+30 -7

apps/docs/src/components/sidebar/index.tsx

reviewed

··· 1 1 + import { useLayoutEffect } from "@react-aria/utils"; 1 2 import * as stylex from "@stylexjs/stylex"; 2 3 import { ChevronRight } from "lucide-react"; 3 3 - import { createContext, use, useId, useMemo } from "react"; 4 4 + import { createContext, use, useEffect, useId, useMemo } from "react"; 4 5 import { mergeProps, useHover, usePress } from "react-aria"; 5 6 import { 6 7 Button, ··· 51 52 height: spacing["6"], 52 53 paddingLeft: spacing["3"], 53 54 paddingRight: spacing["3"], 55 55 + paddingTop: spacing["4"], 54 56 }, 55 57 sidebarSectionList: { 56 58 margin: 0, ··· 59 61 display: "flex", 60 62 flexDirection: "column", 61 63 }, 64 64 + sidebarItemWrapper: { 65 65 + listStyle: "none", 66 66 + }, 62 67 sidebarItem: { 63 68 // eslint-disable-next-line @stylexjs/valid-styles 64 69 cornerShape: "squircle", ··· 66 71 default: radius["md"], 67 72 "@supports (corner-shape: squircle)": radius["3xl"], 68 73 }, 69 69 - listStyle: "none", 74 74 + borderWidth: 0, 70 75 textDecoration: "none", 71 76 alignItems: "center", 72 77 backgroundColor: { ··· 94 99 ":is([data-pressed=true])": primaryColor.component3, 95 100 }, 96 101 color: primaryColor.text2, 102 102 + scrollMarginTop: spacing["4"], 97 103 }, 98 104 sidebarGroupHeading: { 99 105 margin: 0, ··· 133 139 height: "var(--disclosure-panel-height)", 134 140 }, 135 141 sidebarGroupPanelContent: { 136 136 - gap: spacing["4"], 142 142 + gap: spacing["1"], 137 143 display: "flex", 138 144 flexDirection: "column", 139 139 - paddingTop: spacing["5"], 145 145 + paddingTop: spacing["4"], 140 146 }, 141 147 }); 142 148 ··· 149 155 const headerId = useId(); 150 156 const contextValue = useMemo(() => ({ headerId }), [headerId]); 151 157 158 158 + useLayoutEffect(() => { 159 159 + const focusActiveItem = () => { 160 160 + const activeItem = 161 161 + document.querySelector<HTMLLIElement>("[data-active=true]"); 162 162 + console.log(activeItem); 163 163 + activeItem?.scrollIntoView({ behavior: "instant" }); 164 164 + }; 165 165 + 166 166 + document.addEventListener("keydown", focusActiveItem, { once: true }); 167 167 + return () => document.removeEventListener("keydown", focusActiveItem); 168 168 + }, []); 169 169 + 152 170 return ( 153 171 <SidebarContext value={contextValue}> 154 172 <nav ··· 243 261 <Flex direction="column" gap="1"> 244 262 {title && ( 245 263 <div {...stylex.props(styles.sidebarSectionTitle)}> 246 246 - <Text id={headerId} size="sm" weight="medium" variant="secondary"> 264 264 + <Text id={headerId} size="xs" weight="semibold" variant="secondary"> 247 265 {title} 248 266 </Text> 249 267 </div> ··· 275 293 const Component = "href" in props ? "a" : "button"; 276 294 277 295 return ( 278 278 - <li> 296 296 + <li {...stylex.props(styles.sidebarItemWrapper)}> 279 297 <Component 280 280 - {...mergeProps(props as any, hoverProps, pressProps)} 298 298 + {...mergeProps( 299 299 + props as React.ComponentProps<typeof Component>, 300 300 + hoverProps, 301 301 + pressProps, 302 302 + )} 281 303 data-hovered={isHovered} 282 304 data-pressed={isPressed} 305 305 + data-active={isActive} 283 306 {...stylex.props( 284 307 styles.sidebarItem, 285 308 isActive && styles.sidebarItemActive,

+3 -3

apps/docs/src/docs/components/alert-dialog.mdx apps/docs/src/docs/components/overlays/alert-dialog.mdx

reviewed

··· 3 3 description: A modal dialog component specifically designed for critical actions and confirmations. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/alert-dialog/basic' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/alert-dialog/basic' 9 9 10 10 <Example src={Basic} /> 11 11

+4 -4

apps/docs/src/docs/components/aspect-ratio.mdx apps/docs/src/docs/components/content/aspect-ratio.mdx

reviewed

··· 3 3 description: A component that allows you to set the aspect ratio of a div, with support for images. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/aspect-ratio/basic' 9 9 - import { NoImage } from '../../examples/aspect-ratio/no-image' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/aspect-ratio/basic' 9 9 + import { NoImage } from '../../../examples/aspect-ratio/no-image' 10 10 11 11 <Example src={Basic} /> 12 12

+6 -6

apps/docs/src/docs/components/avatar.mdx apps/docs/src/docs/components/content/avatar.mdx

reviewed

··· 3 3 description: An image element with a fallback for representing the user. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/avatar/basic' 9 9 - import { AvatarSizes } from '../../examples/avatar/sizes' 10 10 - import { AvatarGroup } from '../../examples/avatar/group' 11 11 - import { AvatarFallbacks } from '../../examples/avatar/fallbacks' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/avatar/basic' 9 9 + import { AvatarSizes } from '../../../examples/avatar/sizes' 10 10 + import { AvatarGroup } from '../../../examples/avatar/group' 11 11 + import { AvatarFallbacks } from '../../../examples/avatar/fallbacks' 12 12 13 13 <Example src={Basic} /> 14 14

+7 -7

apps/docs/src/docs/components/badge.mdx apps/docs/src/docs/components/status/badge.mdx

reviewed

··· 3 3 description: A small status indicator component for highlighting information. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/badge/basic' 9 9 - import { BadgeVariants } from '../../examples/badge/variants' 10 10 - import { BadgeSizes } from '../../examples/badge/sizes' 11 11 - import { BadgeWithIcons } from '../../examples/badge/with-icons' 12 12 - import { BadgeDismissible } from '../../examples/badge/dismissible' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/badge/basic' 9 9 + import { BadgeVariants } from '../../../examples/badge/variants' 10 10 + import { BadgeSizes } from '../../../examples/badge/sizes' 11 11 + import { BadgeWithIcons } from '../../../examples/badge/with-icons' 12 12 + import { BadgeDismissible } from '../../../examples/badge/dismissible' 13 13 14 14 <Example src={Basic} /> 15 15

+4 -4

apps/docs/src/docs/components/breadcrumbs.mdx apps/docs/src/docs/components/navigation/breadcrumbs.mdx

reviewed

··· 3 3 description: Breadcrumbs display a hierarchy of links to the current page or resource in an application. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/breadcrumbs/basic' 9 9 - import { Disabled } from '../../examples/breadcrumbs/disabled' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/breadcrumbs/basic' 9 9 + import { Disabled } from '../../../examples/breadcrumbs/disabled' 10 10 11 11 <Example src={Basic} /> 12 12

+3 -3

apps/docs/src/docs/components/button-group.mdx apps/docs/src/docs/components/buttons/button-group.mdx

reviewed

··· 3 3 description: A group of buttons that work together as a single control. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/button-group/basic' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/button-group/basic' 9 9 10 10 <Example src={Basic} /> 11 11

+8 -8

apps/docs/src/docs/components/button.mdx apps/docs/src/docs/components/buttons/button.mdx

reviewed

··· 3 3 description: A clickable button component with multiple variants and sizes. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/button/basic' 9 9 - import { ButtonVariants } from '../../examples/button/variants' 10 10 - import { ButtonSizes } from '../../examples/button/sizes' 11 11 - import { ButtonWithIcons } from '../../examples/button/with-icons' 12 12 - import { ButtonStates } from '../../examples/button/states' 13 13 - import { ButtonLoading } from '../../examples/button/loading' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/button/basic' 9 9 + import { ButtonVariants } from '../../../examples/button/variants' 10 10 + import { ButtonSizes } from '../../../examples/button/sizes' 11 11 + import { ButtonWithIcons } from '../../../examples/button/with-icons' 12 12 + import { ButtonStates } from '../../../examples/button/states' 13 13 + import { ButtonLoading } from '../../../examples/button/loading' 14 14 15 15 <Example src={Basic} /> 16 16

+5 -5

apps/docs/src/docs/components/calendar.mdx apps/docs/src/docs/components/date-and-time/calendar.mdx

reviewed

··· 3 3 description: A calendar displays one or more date grids and allows users to select a single date. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { DefaultCalendar } from '../../examples/calendar/default' 9 9 - import { UnavailableDates } from '../../examples/calendar/unavailable-dates' 10 10 - import { MultipleMonths } from '../../examples/calendar/multiple-months' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { DefaultCalendar } from '../../../examples/calendar/default' 9 9 + import { UnavailableDates } from '../../../examples/calendar/unavailable-dates' 10 10 + import { MultipleMonths } from '../../../examples/calendar/multiple-months' 11 11 12 12 This component wraps the headless React Aria Calendar with sensible defaults and StyleX tokens. 13 13 It renders a header with previous/next buttons and a month heading, and a grid of cells.

+7 -7

apps/docs/src/docs/components/card.mdx apps/docs/src/docs/components/content/card.mdx

reviewed

··· 3 3 description: A flexible container component for grouping related content. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/card/basic' 9 9 - import { CardWithImage } from '../../examples/card/with-image' 10 10 - import { CardSizes } from '../../examples/card/sizes' 11 11 - import { CardWithActions } from '../../examples/card/with-actions' 12 12 - import { CardWithBadges } from '../../examples/card/with-badges' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/card/basic' 9 9 + import { CardWithImage } from '../../../examples/card/with-image' 10 10 + import { CardSizes } from '../../../examples/card/sizes' 11 11 + import { CardWithActions } from '../../../examples/card/with-actions' 12 12 + import { CardWithBadges } from '../../../examples/card/with-badges' 13 13 14 14 <Example src={Basic} /> 15 15

+5 -5

apps/docs/src/docs/components/checkbox.mdx apps/docs/src/docs/components/form/checkbox.mdx

reviewed

··· 3 3 description: A checkbox component for selecting one or more options from a set. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/checkbox/basic' 9 9 - import { CheckboxStates } from '../../examples/checkbox/states' 10 10 - import { CheckboxWithDescription } from '../../examples/checkbox/with-description' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/checkbox/basic' 9 9 + import { CheckboxStates } from '../../../examples/checkbox/states' 10 10 + import { CheckboxWithDescription } from '../../../examples/checkbox/with-description' 11 11 12 12 <Example src={Basic} /> 13 13

+5 -5

apps/docs/src/docs/components/color-area.mdx apps/docs/src/docs/components/color/color-area.mdx

reviewed

··· 3 3 description: A 2D color selection area for choosing colors across two channels. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/color-area/basic' 9 9 - import { AspectRatio } from '../../examples/color-area/aspect-ratio' 10 10 - import { Disabled } from '../../examples/color-area/disabled' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/color-area/basic' 9 9 + import { AspectRatio } from '../../../examples/color-area/aspect-ratio' 10 10 + import { Disabled } from '../../../examples/color-area/disabled' 11 11 12 12 <Example src={Basic} /> 13 13

+6 -6

apps/docs/src/docs/components/color-field.mdx apps/docs/src/docs/components/color/color-field.mdx

reviewed

··· 3 3 description: A color input component for selecting colors with a color picker. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/color-field/basic' 9 9 - import { Validation } from '../../examples/color-field/validation' 10 10 - import { ValidationWarning } from '../../examples/color-field/validation-warning' 11 11 - import { ValidationSuccess } from '../../examples/color-field/validation-success' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/color-field/basic' 9 9 + import { Validation } from '../../../examples/color-field/validation' 10 10 + import { ValidationWarning } from '../../../examples/color-field/validation-warning' 11 11 + import { ValidationSuccess } from '../../../examples/color-field/validation-success' 12 12 13 13 <Example src={Basic} /> 14 14

+6 -6

apps/docs/src/docs/components/color-picker.mdx apps/docs/src/docs/components/color/color-picker.mdx

reviewed

··· 3 3 description: Compose color components to create a color picker. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { DefaultEditor } from '../../examples/color-picker/default-editor' 9 9 - import { CustomChildren } from '../../examples/color-picker/custom-children' 10 10 - import { Swatches } from '../../examples/color-picker/swatches' 11 11 - import { AlphaChannel } from '../../examples/color-picker/alpha-channel' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { DefaultEditor } from '../../../examples/color-picker/default-editor' 9 9 + import { CustomChildren } from '../../../examples/color-picker/custom-children' 10 10 + import { Swatches } from '../../../examples/color-picker/swatches' 11 11 + import { AlphaChannel } from '../../../examples/color-picker/alpha-channel' 12 12 13 13 This component provides a `DefaultColorEditor` component that contains a basic color picker with support for `hsb`, `hsl` and `rgb` values. 14 14 It simply composes other color components, which you can also easily do yourself to customize the picker.

+7 -7

apps/docs/src/docs/components/color-slider.mdx apps/docs/src/docs/components/color/color-slider.mdx

reviewed

··· 3 3 description: A 1D color selection slider for adjusting a single color channel. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/color-slider/basic' 9 9 - import { Channels } from '../../examples/color-slider/channels' 10 10 - import { HideValueLabel } from '../../examples/color-slider/hide-value-label' 11 11 - import { Disabled } from '../../examples/color-slider/disabled' 12 12 - import { Size } from '../../examples/color-slider/size' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/color-slider/basic' 9 9 + import { Channels } from '../../../examples/color-slider/channels' 10 10 + import { HideValueLabel } from '../../../examples/color-slider/hide-value-label' 11 11 + import { Disabled } from '../../../examples/color-slider/disabled' 12 12 + import { Size } from '../../../examples/color-slider/size' 13 13 14 14 <Example src={Basic} /> 15 15

+5 -5

apps/docs/src/docs/components/color-swatch-picker.mdx apps/docs/src/docs/components/color/color-swatch-picker.mdx

reviewed

··· 3 3 description: A list of color swatches that allows selecting one color. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/color-swatch-picker/basic' 9 9 - import { Size } from '../../examples/color-swatch-picker/size' 10 10 - import { Layout } from '../../examples/color-swatch-picker/layout' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/color-swatch-picker/basic' 9 9 + import { Size } from '../../../examples/color-swatch-picker/size' 10 10 + import { Layout } from '../../../examples/color-swatch-picker/layout' 11 11 12 12 <Example src={Basic} /> 13 13

+3 -3

apps/docs/src/docs/components/color-swatch.mdx apps/docs/src/docs/components/color/color-swatch.mdx

reviewed

··· 3 3 description: A color swatch component for displaying color values. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/color-swatch/basic' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/color-swatch/basic' 9 9 10 10 <Example src={Basic} /> 11 11

+5 -5

apps/docs/src/docs/components/color-wheel.mdx apps/docs/src/docs/components/color/color-wheel.mdx

reviewed

··· 3 3 description: A circular color picker for selecting hue with a draggable thumb. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/color-wheel/basic' 9 9 - import { Sizes } from '../../examples/color-wheel/sizes' 10 10 - import { Disabled } from '../../examples/color-wheel/disabled' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/color-wheel/basic' 9 9 + import { Sizes } from '../../../examples/color-wheel/sizes' 10 10 + import { Disabled } from '../../../examples/color-wheel/disabled' 11 11 12 12 <Example src={Basic} /> 13 13

+6 -6

apps/docs/src/docs/components/combobox.mdx apps/docs/src/docs/components/form/combobox.mdx

reviewed

··· 3 3 description: A combo box component that combines a text input with a dropdown list of options. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/combobox/basic' 9 9 - import { Validation } from '../../examples/combobox/validation' 10 10 - import { ValidationWarning } from '../../examples/combobox/validation-warning' 11 11 - import { ValidationSuccess } from '../../examples/combobox/validation-success' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/combobox/basic' 9 9 + import { Validation } from '../../../examples/combobox/validation' 10 10 + import { ValidationWarning } from '../../../examples/combobox/validation-warning' 11 11 + import { ValidationSuccess } from '../../../examples/combobox/validation-success' 12 12 13 13 <Example src={Basic} /> 14 14

+3 -3

apps/docs/src/docs/components/command-menu.mdx apps/docs/src/docs/components/collections/command-menu.mdx

reviewed

··· 3 3 description: A command menu component for displaying a searchable list of commands or actions. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/command-menu/basic' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/command-menu/basic' 9 9 10 10 <Example src={Basic} /> 11 11

+3 -3

apps/docs/src/docs/components/context-menu.mdx apps/docs/src/docs/components/collections/context-menu.mdx

reviewed

··· 3 3 description: A context menu component that appears on right-click or long press. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/context-menu/basic' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/context-menu/basic' 9 9 10 10 <Example src={Basic} /> 11 11

+6 -6

apps/docs/src/docs/components/date-field.mdx apps/docs/src/docs/components/date-and-time/date-field.mdx

reviewed

··· 3 3 description: A date input component for selecting dates with proper formatting. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/date-field/basic' 9 9 - import { Validation } from '../../examples/date-field/validation' 10 10 - import { ValidationWarning } from '../../examples/date-field/validation-warning' 11 11 - import { ValidationSuccess } from '../../examples/date-field/validation-success' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/date-field/basic' 9 9 + import { Validation } from '../../../examples/date-field/validation' 10 10 + import { ValidationWarning } from '../../../examples/date-field/validation-warning' 11 11 + import { ValidationSuccess } from '../../../examples/date-field/validation-success' 12 12 13 13 <Example src={Basic} /> 14 14

+6 -6

apps/docs/src/docs/components/date-picker.mdx apps/docs/src/docs/components/date-and-time/date-picker.mdx

reviewed

··· 3 3 description: A date picker combines a DateField and a Calendar popover to allow users to enter or select a date and time value. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/date-picker/basic' 9 9 - import { Validation } from '../../examples/date-picker/validation' 10 10 - import { ValidationWarning } from '../../examples/date-picker/validation-warning' 11 11 - import { ValidationSuccess } from '../../examples/date-picker/validation-success' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/date-picker/basic' 9 9 + import { Validation } from '../../../examples/date-picker/validation' 10 10 + import { ValidationWarning } from '../../../examples/date-picker/validation-warning' 11 11 + import { ValidationSuccess } from '../../../examples/date-picker/validation-success' 12 12 13 13 <Example src={Basic} /> 14 14

+6 -6

apps/docs/src/docs/components/date-range-picker.mdx apps/docs/src/docs/components/date-and-time/date-range-picker.mdx

reviewed

··· 3 3 description: A date range picker combines date inputs and a RangeCalendar popover to allow users to enter or select a date range. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/date-range-picker/basic' 9 9 - import { Validation } from '../../examples/date-range-picker/validation' 10 10 - import { ValidationWarning } from '../../examples/date-range-picker/validation-warning' 11 11 - import { ValidationSuccess } from '../../examples/date-range-picker/validation-success' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/date-range-picker/basic' 9 9 + import { Validation } from '../../../examples/date-range-picker/validation' 10 10 + import { ValidationWarning } from '../../../examples/date-range-picker/validation-warning' 11 11 + import { ValidationSuccess } from '../../../examples/date-range-picker/validation-success' 12 12 13 13 <Example src={Basic} /> 14 14

+5 -5

apps/docs/src/docs/components/dialog.mdx apps/docs/src/docs/components/overlays/dialog.mdx

reviewed

··· 3 3 description: A modal dialog component for displaying content in an overlay. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/dialog/basic' 9 9 - import { DialogForm } from '../../examples/dialog/form' 10 10 - import { DialogSizes } from '../../examples/dialog/sizes' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/dialog/basic' 9 9 + import { DialogForm } from '../../../examples/dialog/form' 10 10 + import { DialogSizes } from '../../../examples/dialog/sizes' 11 11 12 12 <Example src={Basic} /> 13 13

+7 -7

apps/docs/src/docs/components/disclosure-group.mdx apps/docs/src/docs/components/navigation/disclosure-group.mdx

reviewed

··· 3 3 description: A grouping of related disclosures, sometimes called an accordion. It supports both single and multiple expanded items. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/disclosure-group/basic' 9 9 - import { DefaultExpanded } from '../../examples/disclosure-group/default-expanded' 10 10 - import { MultipleExpanded } from '../../examples/disclosure-group/multiple-expanded' 11 11 - import { Sizes } from '../../examples/disclosure-group/sizes' 12 12 - import { Separators } from '../../examples/disclosure-group/separators' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/disclosure-group/basic' 9 9 + import { DefaultExpanded } from '../../../examples/disclosure-group/default-expanded' 10 10 + import { MultipleExpanded } from '../../../examples/disclosure-group/multiple-expanded' 11 11 + import { Sizes } from '../../../examples/disclosure-group/sizes' 12 12 + import { Separators } from '../../../examples/disclosure-group/separators' 13 13 14 14 <Example src={Basic} /> 15 15

+6 -6

apps/docs/src/docs/components/disclosure.mdx apps/docs/src/docs/components/navigation/disclosure.mdx

reviewed

··· 3 3 description: A collapsible section of content composed of a heading that expands and collapses a panel. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/disclosure/basic' 9 9 - import { Expanded } from '../../examples/disclosure/expanded' 10 10 - import { Disabled } from '../../examples/disclosure/disabled' 11 11 - import { Sizes } from '../../examples/disclosure/sizes' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/disclosure/basic' 9 9 + import { Expanded } from '../../../examples/disclosure/expanded' 10 10 + import { Disabled } from '../../../examples/disclosure/disabled' 11 11 + import { Sizes } from '../../../examples/disclosure/sizes' 12 12 13 13 <Example src={Basic} /> 14 14

+6 -6

apps/docs/src/docs/components/drawer.mdx apps/docs/src/docs/components/overlays/drawer.mdx

reviewed

··· 3 3 description: A modal drawer component that slides in from the side for displaying content in an overlay. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/drawer/basic' 9 9 - import { DrawerSizes } from '../../examples/drawer/sizes' 10 10 - import { DrawerDirections } from '../../examples/drawer/directions' 11 11 - import { DrawerNonModal } from '../../examples/drawer/non-modal' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/drawer/basic' 9 9 + import { DrawerSizes } from '../../../examples/drawer/sizes' 10 10 + import { DrawerDirections } from '../../../examples/drawer/directions' 11 11 + import { DrawerNonModal } from '../../../examples/drawer/non-modal' 12 12 13 13 <Example src={Basic} /> 14 14

+4 -4

apps/docs/src/docs/components/editable-text.mdx apps/docs/src/docs/components/content/editable-text.mdx

reviewed

··· 3 3 description: An inline editable text component that switches between display and edit modes. By default the component will enter edit mode for a long press. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/editable-text/basic' 9 9 - import { Composition } from '../../examples/editable-text/composition' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/editable-text/basic' 9 9 + import { Composition } from '../../../examples/editable-text/composition' 10 10 11 11 <Example src={Basic} /> 12 12

+3 -3

apps/docs/src/docs/components/file-drop-zone.mdx apps/docs/src/docs/components/form/file-drop-zone.mdx

reviewed

··· 3 3 description: A file drop zone component for drag and drop file uploads. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/file-drop-zone/basic' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/file-drop-zone/basic' 9 9 10 10 <Example src={Basic} /> 11 11

+7 -7

apps/docs/src/docs/components/flex.mdx apps/docs/src/docs/components/layout/flex.mdx

reviewed

··· 3 3 description: A flexible container component for creating flexible layouts. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/flex/basic' 9 9 - import { FlexDirections } from '../../examples/flex/directions' 10 10 - import { FlexAlignment } from '../../examples/flex/alignment' 11 11 - import { FlexWrap } from '../../examples/flex/wrap' 12 12 - import { FlexGap } from '../../examples/flex/gap' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/flex/basic' 9 9 + import { FlexDirections } from '../../../examples/flex/directions' 10 10 + import { FlexAlignment } from '../../../examples/flex/alignment' 11 11 + import { FlexWrap } from '../../../examples/flex/wrap' 12 12 + import { FlexGap } from '../../../examples/flex/gap' 13 13 14 14 <Example src={Basic} /> 15 15

+5 -5

apps/docs/src/docs/components/form.mdx apps/docs/src/docs/components/form/form.mdx

reviewed

··· 3 3 description: A form is a group of inputs that allows users to submit data to a server, with support for providing field validation errors. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/form/basic' 9 9 - import { WithValidation } from '../../examples/form/with-validation' 10 10 - import { WithSubmitAndReset } from '../../examples/form/with-submit-and-reset' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/form/basic' 9 9 + import { WithValidation } from '../../../examples/form/with-validation' 10 10 + import { WithSubmitAndReset } from '../../../examples/form/with-submit-and-reset' 11 11 12 12 <Example src={Basic} /> 13 13

+4 -4

apps/docs/src/docs/components/grid.mdx apps/docs/src/docs/components/layout/grid.mdx

reviewed

··· 3 3 description: A grid container component for creating two-dimensional layouts. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/grid/basic' 9 9 - import { GridSpans } from '../../examples/grid/spans' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/grid/basic' 9 9 + import { GridSpans } from '../../../examples/grid/spans' 10 10 11 11 <Example src={Basic} /> 12 12

+4 -4

apps/docs/src/docs/components/hover-card.mdx apps/docs/src/docs/components/overlays/hover-card.mdx

reviewed

··· 3 3 description: A hover card component that displays content when hovering over a trigger element. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/hover-card/basic' 9 9 - import { WithRichContent } from '../../examples/hover-card/with-rich-content' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/hover-card/basic' 9 9 + import { WithRichContent } from '../../../examples/hover-card/with-rich-content' 10 10 11 11 <Example src={Basic} /> 12 12

+5 -5

apps/docs/src/docs/components/icon-button.mdx apps/docs/src/docs/components/buttons/icon-button.mdx

reviewed

··· 3 3 description: A button component specifically designed for icons with built-in tooltip support. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/icon-button/basic' 9 9 - import { IconButtonVariants } from '../../examples/icon-button/variants' 10 10 - import { IconButtonSizes } from '../../examples/icon-button/sizes' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/icon-button/basic' 9 9 + import { IconButtonVariants } from '../../../examples/icon-button/variants' 10 10 + import { IconButtonSizes } from '../../../examples/icon-button/sizes' 11 11 12 12 <Example src={Basic} /> 13 13

+6 -6

apps/docs/src/docs/components/kbd.mdx apps/docs/src/docs/components/content/kbd.mdx

reviewed

··· 3 3 description: A keyboard key component for displaying keyboard shortcuts and keys. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/kbd/basic' 9 9 - import { Shortcuts } from '../../examples/kbd/shortcuts' 10 10 - import { Inline } from '../../examples/kbd/inline' 11 11 - import { Navigation } from '../../examples/kbd/navigation' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/kbd/basic' 9 9 + import { Shortcuts } from '../../../examples/kbd/shortcuts' 10 10 + import { Inline } from '../../../examples/kbd/inline' 11 11 + import { Navigation } from '../../../examples/kbd/navigation' 12 12 13 13 <Example src={Basic} /> 14 14

+4 -4

apps/docs/src/docs/components/label.mdx apps/docs/src/docs/components/form/label.mdx

reviewed

··· 3 3 description: A label component for form elements with optional descriptions. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/label/basic' 9 9 - import { LabelSizes } from '../../examples/label/sizes' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/label/basic' 9 9 + import { LabelSizes } from '../../../examples/label/sizes' 10 10 11 11 <Example src={Basic} /> 12 12

+3 -3

apps/docs/src/docs/components/link.mdx apps/docs/src/docs/components/navigation/link.mdx

reviewed

··· 3 3 description: A link component for navigation and external references. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/link/basic' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/link/basic' 9 9 10 10 <Example src={Basic} /> 11 11

+3 -3

apps/docs/src/docs/components/listbox.mdx apps/docs/src/docs/components/collections/listbox.mdx

reviewed

··· 3 3 description: A list box component for displaying a list of selectable items. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/listbox/basic' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/listbox/basic' 9 9 10 10 <Example src={Basic} /> 11 11

+3 -3

apps/docs/src/docs/components/menu.mdx apps/docs/src/docs/components/collections/menu.mdx

reviewed

··· 3 3 description: A menu component for displaying a list of actions or options. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/menu/basic' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/menu/basic' 9 9 10 10 <Example src={Basic} /> 11 11

+5 -5

apps/docs/src/docs/components/menubar.mdx apps/docs/src/docs/components/collections/menubar.mdx

reviewed

··· 3 3 description: A menubar component that displays a horizontal row of menu items, typically used for application navigation. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/menubar/basic' 9 9 - import { Disabled } from '../../examples/menubar/disabled' 10 10 - import { Size } from '../../examples/menubar/size' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/menubar/basic' 9 9 + import { Disabled } from '../../../examples/menubar/disabled' 10 10 + import { Size } from '../../../examples/menubar/size' 11 11 12 12 <Example src={Basic} /> 13 13

+9 -9

apps/docs/src/docs/components/meter.mdx apps/docs/src/docs/components/status/meter.mdx

reviewed

··· 3 3 description: A gauge component for displaying scalar measurements within a known range. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/meter/basic' 9 9 - import { WithoutValueLabel } from '../../examples/meter/without-value-label' 10 10 - import { Sizes } from '../../examples/meter/sizes' 11 11 - import { Variants } from '../../examples/meter/variants' 12 12 - import { CustomRange } from '../../examples/meter/custom-range' 13 13 - import { ValueFormatting } from '../../examples/meter/value-formatting' 14 14 - import { CustomValueLabel } from '../../examples/meter/custom-value-label' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/meter/basic' 9 9 + import { WithoutValueLabel } from '../../../examples/meter/without-value-label' 10 10 + import { Sizes } from '../../../examples/meter/sizes' 11 11 + import { Variants } from '../../../examples/meter/variants' 12 12 + import { CustomRange } from '../../../examples/meter/custom-range' 13 13 + import { ValueFormatting } from '../../../examples/meter/value-formatting' 14 14 + import { CustomValueLabel } from '../../../examples/meter/custom-value-label' 15 15 16 16 <Example src={Basic} /> 17 17

+6 -6

apps/docs/src/docs/components/number-field.mdx apps/docs/src/docs/components/form/number-field.mdx

reviewed

··· 3 3 description: A number input component with increment/decrement buttons and validation. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/number-field/basic' 9 9 - import { Validation } from '../../examples/number-field/validation' 10 10 - import { ValidationWarning } from '../../examples/number-field/validation-warning' 11 11 - import { ValidationSuccess } from '../../examples/number-field/validation-success' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/number-field/basic' 9 9 + import { Validation } from '../../../examples/number-field/validation' 10 10 + import { ValidationWarning } from '../../../examples/number-field/validation-warning' 11 11 + import { ValidationSuccess } from '../../../examples/number-field/validation-success' 12 12 13 13 <Example src={Basic} /> 14 14

+5 -5

apps/docs/src/docs/components/pagination.mdx apps/docs/src/docs/components/navigation/pagination.mdx

reviewed

··· 3 3 description: A pagination component for navigating through multiple pages of content. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/pagination/basic' 9 9 - import { FewPages } from '../../examples/pagination/few-pages' 10 10 - import { CustomMaxVisiblePages } from '../../examples/pagination/custom-max-visible-pages' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/pagination/basic' 9 9 + import { FewPages } from '../../../examples/pagination/few-pages' 10 10 + import { CustomMaxVisiblePages } from '../../../examples/pagination/custom-max-visible-pages' 11 11 12 12 <Example src={Basic} /> 13 13

+3 -3

apps/docs/src/docs/components/popover.mdx apps/docs/src/docs/components/overlays/popover.mdx

reviewed

··· 3 3 description: A popover component for displaying content in an overlay. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/popover/basic' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/popover/basic' 9 9 10 10 <Example src={Basic} /> 11 11

+7 -7

apps/docs/src/docs/components/progress-bar.mdx apps/docs/src/docs/components/status/progress-bar.mdx

reviewed

··· 3 3 description: A progress indicator component for showing completion status. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/progress-bar/basic' 9 9 - import { WithoutValueLabel } from '../../examples/progress-bar/without-value-label' 10 10 - import { WithoutLabel } from '../../examples/progress-bar/without-label' 11 11 - import { Indeterminate } from '../../examples/progress-bar/indeterminate' 12 12 - import { Sizes } from '../../examples/progress-bar/sizes' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/progress-bar/basic' 9 9 + import { WithoutValueLabel } from '../../../examples/progress-bar/without-value-label' 10 10 + import { WithoutLabel } from '../../../examples/progress-bar/without-label' 11 11 + import { Indeterminate } from '../../../examples/progress-bar/indeterminate' 12 12 + import { Sizes } from '../../../examples/progress-bar/sizes' 13 13 14 14 <Example src={Basic} /> 15 15

+6 -6

apps/docs/src/docs/components/progress-circle.mdx apps/docs/src/docs/components/status/progress-circle.mdx

reviewed

··· 3 3 description: A circular progress indicator component for showing completion status. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/progress-circle/basic' 9 9 - import { WithLabel } from '../../examples/progress-circle/with-label' 10 10 - import { Indeterminate } from '../../examples/progress-circle/indeterminate' 11 11 - import { Sizes } from '../../examples/progress-circle/sizes' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/progress-circle/basic' 9 9 + import { WithLabel } from '../../../examples/progress-circle/with-label' 10 10 + import { Indeterminate } from '../../../examples/progress-circle/indeterminate' 11 11 + import { Sizes } from '../../../examples/progress-circle/sizes' 12 12 13 13 <Example src={Basic} /> 14 14

+5 -5

apps/docs/src/docs/components/radio.mdx apps/docs/src/docs/components/form/radio.mdx

reviewed

··· 3 3 description: A radio button component for selecting a single option from a group. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/radio/basic' 9 9 - import { RadioWithDescription } from '../../examples/radio/with-description' 10 10 - import { RadioHorizontal } from '../../examples/radio/horizontal' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/radio/basic' 9 9 + import { RadioWithDescription } from '../../../examples/radio/with-description' 10 10 + import { RadioHorizontal } from '../../../examples/radio/horizontal' 11 11 12 12 <Example src={Basic} /> 13 13

+5 -5

apps/docs/src/docs/components/range-calendar.mdx apps/docs/src/docs/components/date-and-time/range-calendar.mdx

reviewed

··· 3 3 description: A range calendar lets users select a start and end date from one or more month grids. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { DefaultRangeCalendar } from '../../examples/range-calendar/default' 9 9 - import { UnavailableRangeDates } from '../../examples/range-calendar/unavailable-dates' 10 10 - import { MultipleMonthsRange } from '../../examples/range-calendar/multiple-months' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { DefaultRangeCalendar } from '../../../examples/range-calendar/default' 9 9 + import { UnavailableRangeDates } from '../../../examples/range-calendar/unavailable-dates' 10 10 + import { MultipleMonthsRange } from '../../../examples/range-calendar/multiple-months' 11 11 12 12 Select a date range using a calendar grid with previous/next navigation. 13 13 Supports marking dates unavailable and showing multiple months.

+6 -6

apps/docs/src/docs/components/search-field.mdx apps/docs/src/docs/components/form/search-field.mdx

reviewed

··· 3 3 description: A search input component with built-in search icon and clear functionality. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/search-field/basic' 9 9 - import { Validation } from '../../examples/search-field/validation' 10 10 - import { ValidationWarning } from '../../examples/search-field/validation-warning' 11 11 - import { ValidationSuccess } from '../../examples/search-field/validation-success' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/search-field/basic' 9 9 + import { Validation } from '../../../examples/search-field/validation' 10 10 + import { ValidationWarning } from '../../../examples/search-field/validation-warning' 11 11 + import { ValidationSuccess } from '../../../examples/search-field/validation-success' 12 12 13 13 <Example src={Basic} /> 14 14

+5 -5

apps/docs/src/docs/components/segmented-control.mdx apps/docs/src/docs/components/buttons/segmented-control.mdx

reviewed

··· 3 3 description: A segmented control displays a set of mutually exclusive options, allowing users to select one option at a time. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/segmented-control/basic' 9 9 - import { Size } from '../../examples/segmented-control/size' 10 10 - import { WithIcons } from '../../examples/segmented-control/with-icons' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/segmented-control/basic' 9 9 + import { Size } from '../../../examples/segmented-control/size' 10 10 + import { WithIcons } from '../../../examples/segmented-control/with-icons' 11 11 12 12 <Example src={Basic} /> 13 13

+8 -8

apps/docs/src/docs/components/select.mdx apps/docs/src/docs/components/form/select.mdx

reviewed

··· 3 3 description: A select component for choosing from a list of options. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/select/basic' 9 9 - import { SelectWithDescription } from '../../examples/select/with-description' 10 10 - import { SelectSizes } from '../../examples/select/sizes' 11 11 - import { Validation } from '../../examples/select/validation' 12 12 - import { ValidationWarning } from '../../examples/select/validation-warning' 13 13 - import { ValidationSuccess } from '../../examples/select/validation-success' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/select/basic' 9 9 + import { SelectWithDescription } from '../../../examples/select/with-description' 10 10 + import { SelectSizes } from '../../../examples/select/sizes' 11 11 + import { Validation } from '../../../examples/select/validation' 12 12 + import { ValidationWarning } from '../../../examples/select/validation-warning' 13 13 + import { ValidationSuccess } from '../../../examples/select/validation-success' 14 14 15 15 <Example src={Basic} /> 16 16

+4 -4

apps/docs/src/docs/components/separator.mdx apps/docs/src/docs/components/content/separator.mdx

reviewed

··· 3 3 description: A visual divider component for separating content sections. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/separator/basic' 9 9 - import { SeparatorOrientation } from '../../examples/separator/orientation' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/separator/basic' 9 9 + import { SeparatorOrientation } from '../../../examples/separator/orientation' 10 10 11 11 <Example src={Basic} /> 12 12

+5 -5

apps/docs/src/docs/components/sidebar.mdx apps/docs/src/docs/components/navigation/sidebar.mdx

reviewed

··· 3 3 description: A sidebar navigation component with support for sections, groups, and collapsible sections. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/sidebar/basic' 9 9 - import { WithSections } from '../../examples/sidebar/with-sections' 10 10 - import { WithGroups } from '../../examples/sidebar/with-groups' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/sidebar/basic' 9 9 + import { WithSections } from '../../../examples/sidebar/with-sections' 10 10 + import { WithGroups } from '../../../examples/sidebar/with-groups' 11 11 12 12 <Example src={Basic} /> 13 13

+6 -6

apps/docs/src/docs/components/skeleton.mdx apps/docs/src/docs/components/status/skeleton.mdx

reviewed

··· 3 3 description: A loading placeholder component with circle and rectangle variants. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/skeleton/basic' 9 9 - import { Variants } from '../../examples/skeleton/variants' 10 10 - import { CircleSizes } from '../../examples/skeleton/circle-sizes' 11 11 - import { RectangleHeight } from '../../examples/skeleton/rectangle-height' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/skeleton/basic' 9 9 + import { Variants } from '../../../examples/skeleton/variants' 10 10 + import { CircleSizes } from '../../../examples/skeleton/circle-sizes' 11 11 + import { RectangleHeight } from '../../../examples/skeleton/rectangle-height' 12 12 13 13 <Example src={Basic} /> 14 14

+9 -9

apps/docs/src/docs/components/slider.mdx apps/docs/src/docs/components/form/slider.mdx

reviewed

··· 3 3 description: A range input component for selecting values within a specified range. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/slider/basic' 9 9 - import { Range } from '../../examples/slider/range' 10 10 - import { WithLabels } from '../../examples/slider/with-labels' 11 11 - import { Vertical } from '../../examples/slider/vertical' 12 12 - import { HideValueLabel } from '../../examples/slider/hide-value-label' 13 13 - import { ValueFormatting } from '../../examples/slider/value-formatting' 14 14 - import { Disabled } from '../../examples/slider/disabled' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/slider/basic' 9 9 + import { Range } from '../../../examples/slider/range' 10 10 + import { WithLabels } from '../../../examples/slider/with-labels' 11 11 + import { Vertical } from '../../../examples/slider/vertical' 12 12 + import { HideValueLabel } from '../../../examples/slider/hide-value-label' 13 13 + import { ValueFormatting } from '../../../examples/slider/value-formatting' 14 14 + import { Disabled } from '../../../examples/slider/disabled' 15 15 16 16 <Example src={Basic} /> 17 17

+4 -4

apps/docs/src/docs/components/switch.mdx apps/docs/src/docs/components/form/switch.mdx

reviewed

··· 3 3 description: A toggle switch component for binary choices. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/switch/basic' 9 9 - import { Disabled } from '../../examples/switch/disabled' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/switch/basic' 9 9 + import { Disabled } from '../../../examples/switch/disabled' 10 10 11 11 <Example src={Basic} /> 12 12

+8 -8

apps/docs/src/docs/components/table.mdx apps/docs/src/docs/components/collections/table.mdx

reviewed

··· 3 3 description: A table component for displaying structured data in rows and columns. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/table/basic' 9 9 - import { Selection } from '../../examples/table/selection' 10 10 - import { ResizableColumns } from '../../examples/table/resizable-columns' 11 11 - import { DisabledRows } from '../../examples/table/disabled-rows' 12 12 - import { Sorting } from '../../examples/table/sorting' 13 13 - import { DragAndDrop } from '../../examples/table/drag-and-drop' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/table/basic' 9 9 + import { Selection } from '../../../examples/table/selection' 10 10 + import { ResizableColumns } from '../../../examples/table/resizable-columns' 11 11 + import { DisabledRows } from '../../../examples/table/disabled-rows' 12 12 + import { Sorting } from '../../../examples/table/sorting' 13 13 + import { DragAndDrop } from '../../../examples/table/drag-and-drop' 14 14 15 15 <Example src={Basic} /> 16 16

+6 -6

apps/docs/src/docs/components/tabs.mdx apps/docs/src/docs/components/navigation/tabs.mdx

reviewed

··· 3 3 description: Tabs organize content into multiple sections and allow users to navigate between them. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/tabs/basic' 9 9 - import { Disabled } from '../../examples/tabs/disabled' 10 10 - import { Size } from '../../examples/tabs/size' 11 11 - import { Orientation } from '../../examples/tabs/orientation' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/tabs/basic' 9 9 + import { Disabled } from '../../../examples/tabs/disabled' 10 10 + import { Size } from '../../../examples/tabs/size' 11 11 + import { Orientation } from '../../../examples/tabs/orientation' 12 12 13 13 <Example src={Basic} /> 14 14

+6 -6

apps/docs/src/docs/components/tag-group.mdx apps/docs/src/docs/components/collections/tag-group.mdx

reviewed

··· 3 3 description: A tag group component for displaying and managing collections of tags. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/tag-group/basic' 9 9 - import { Removable } from '../../examples/tag-group/removable' 10 10 - import { Selected } from '../../examples/tag-group/selected' 11 11 - import { WithError } from '../../examples/tag-group/with-error' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/tag-group/basic' 9 9 + import { Removable } from '../../../examples/tag-group/removable' 10 10 + import { Selected } from '../../../examples/tag-group/selected' 11 11 + import { WithError } from '../../../examples/tag-group/with-error' 12 12 13 13 <Example src={Basic} /> 14 14

+3 -3

apps/docs/src/docs/components/text-area.mdx apps/docs/src/docs/components/form/text-area.mdx

reviewed

··· 3 3 description: A multi-line text input component for longer text content. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/text-area/basic' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/text-area/basic' 9 9 10 10 <Example src={Basic} /> 11 11

+10 -10

apps/docs/src/docs/components/text-field.mdx apps/docs/src/docs/components/form/text-field.mdx

reviewed

··· 3 3 description: A text input component with support for labels, descriptions, and validation. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/text-field/basic' 9 9 - import { TextFieldVariants } from '../../examples/text-field/variants' 10 10 - import { TextFieldSizes } from '../../examples/text-field/sizes' 11 11 - import { PasswordField } from '../../examples/text-field/password' 12 12 - import { PrefixAndSuffix } from '../../examples/text-field/prefix-and-suffix' 13 13 - import { Validation } from '../../examples/text-field/validation' 14 14 - import { ValidationWarning } from '../../examples/text-field/validation-warning' 15 15 - import { ValidationSuccess } from '../../examples/text-field/validation-success' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/text-field/basic' 9 9 + import { TextFieldVariants } from '../../../examples/text-field/variants' 10 10 + import { TextFieldSizes } from '../../../examples/text-field/sizes' 11 11 + import { PasswordField } from '../../../examples/text-field/password' 12 12 + import { PrefixAndSuffix } from '../../../examples/text-field/prefix-and-suffix' 13 13 + import { Validation } from '../../../examples/text-field/validation' 14 14 + import { ValidationWarning } from '../../../examples/text-field/validation-warning' 15 15 + import { ValidationSuccess } from '../../../examples/text-field/validation-success' 16 16 17 17 <Example src={Basic} /> 18 18

+7 -7

apps/docs/src/docs/components/text.mdx apps/docs/src/docs/components/content/text.mdx

reviewed

··· 3 3 description: A flexible text component with comprehensive typography controls. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { TextExample } from '../../examples/text/basic' 9 9 - import { TextVariants } from '../../examples/text/variants' 10 10 - import { TextAlignment } from '../../examples/text/alignment' 11 11 - import { TextStrikethrough } from '../../examples/text/strikethrough' 12 12 - import { TextTypography } from '../../examples/text/typography' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { TextExample } from '../../../examples/text/basic' 9 9 + import { TextVariants } from '../../../examples/text/variants' 10 10 + import { TextAlignment } from '../../../examples/text/alignment' 11 11 + import { TextStrikethrough } from '../../../examples/text/strikethrough' 12 12 + import { TextTypography } from '../../../examples/text/typography' 13 13 14 14 <Example src={TextExample} /> 15 15

+10 -10

apps/docs/src/docs/components/time-field.mdx apps/docs/src/docs/components/date-and-time/time-field.mdx

reviewed

··· 3 3 description: A time input component for selecting times with proper formatting. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/time-field/basic' 9 9 - import { Sizes } from '../../examples/time-field/sizes' 10 10 - import { Variants } from '../../examples/time-field/variants' 11 11 - import { Description } from '../../examples/time-field/description' 12 12 - import { PrefixAndSuffix } from '../../examples/time-field/prefix-and-suffix' 13 13 - import { Validation } from '../../examples/time-field/validation' 14 14 - import { ValidationWarning } from '../../examples/time-field/validation-warning' 15 15 - import { ValidationSuccess } from '../../examples/time-field/validation-success' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/time-field/basic' 9 9 + import { Sizes } from '../../../examples/time-field/sizes' 10 10 + import { Variants } from '../../../examples/time-field/variants' 11 11 + import { Description } from '../../../examples/time-field/description' 12 12 + import { PrefixAndSuffix } from '../../../examples/time-field/prefix-and-suffix' 13 13 + import { Validation } from '../../../examples/time-field/validation' 14 14 + import { ValidationWarning } from '../../../examples/time-field/validation-warning' 15 15 + import { ValidationSuccess } from '../../../examples/time-field/validation-success' 16 16 17 17 <Example src={Basic} /> 18 18

+5 -5

apps/docs/src/docs/components/toast.mdx apps/docs/src/docs/components/status/toast.mdx

reviewed

··· 3 3 description: A Toast displays a brief, temporary notification of actions, errors, or other events in an application. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/toast/basic' 9 9 - import { Actions } from '../../examples/toast/actions' 10 10 - import { Icons } from '../../examples/toast/icons' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/toast/basic' 9 9 + import { Actions } from '../../../examples/toast/actions' 10 10 + import { Icons } from '../../../examples/toast/icons' 11 11 12 12 <Example src={Basic} /> 13 13

+5 -5

apps/docs/src/docs/components/toggle-button-group.mdx apps/docs/src/docs/components/buttons/toggle-button-group.mdx

reviewed

··· 3 3 description: A group of toggle buttons that work together as a single control. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 9 9 - import { Basic } from '../../examples/toggle-button-group/basic' 10 10 - import { Orientation } from '../../examples/toggle-button-group/orientation' 11 11 - import { Variants } from '../../examples/toggle-button-group/variants' 9 9 + import { Basic } from '../../../examples/toggle-button-group/basic' 10 10 + import { Orientation } from '../../../examples/toggle-button-group/orientation' 11 11 + import { Variants } from '../../../examples/toggle-button-group/variants' 12 12 13 13 14 14 <Example src={Basic} />

+5 -5

apps/docs/src/docs/components/toggle-button.mdx apps/docs/src/docs/components/buttons/toggle-button.mdx

reviewed

··· 3 3 description: A toggle button component that can be pressed to toggle between states. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/toggle-button/basic' 9 9 - import { Sizes } from '../../examples/toggle-button/sizes' 10 10 - import { Variants } from '../../examples/toggle-button/variants' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/toggle-button/basic' 9 9 + import { Sizes } from '../../../examples/toggle-button/sizes' 10 10 + import { Variants } from '../../../examples/toggle-button/variants' 11 11 12 12 <Example src={Basic} /> 13 13

+5 -5

apps/docs/src/docs/components/toolbar.mdx apps/docs/src/docs/components/layout/toolbar.mdx

reviewed

··· 3 3 description: A toolbar is a container for a set of interactive controls, such as buttons, dropdown menus, or checkboxes, with arrow key navigation. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/toolbar/basic' 9 9 - import { Vertical } from '../../examples/toolbar/vertical' 10 10 - import { WithCheckbox } from '../../examples/toolbar/with-checkbox' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/toolbar/basic' 9 9 + import { Vertical } from '../../../examples/toolbar/vertical' 10 10 + import { WithCheckbox } from '../../../examples/toolbar/with-checkbox' 11 11 12 12 <Example src={Basic} /> 13 13

+4 -4

apps/docs/src/docs/components/tooltip.mdx apps/docs/src/docs/components/overlays/tooltip.mdx

reviewed

··· 3 3 description: A tooltip component that displays helpful information on hover. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/tooltip/basic' 9 9 - import { TooltipPlacements } from '../../examples/tooltip/placements' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/tooltip/basic' 9 9 + import { TooltipPlacements } from '../../../examples/tooltip/placements' 10 10 11 11 <Example src={Basic} /> 12 12

+4 -4

apps/docs/src/docs/components/tree.mdx apps/docs/src/docs/components/collections/tree.mdx

reviewed

··· 3 3 description: A tree component for displaying hierarchical data with expandable nodes. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/tree/basic' 9 9 - import { DragAndDrop } from '../../examples/tree/drag-and-drop' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/tree/basic' 9 9 + import { DragAndDrop } from '../../../examples/tree/drag-and-drop' 10 10 11 11 <Example src={Basic} /> 12 12

+14 -14

apps/docs/src/docs/components/typography.mdx apps/docs/src/docs/components/content/typography.mdx

reviewed

··· 3 3 description: A collection of text components for consistent typography throughout your application. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Headings } from '../../examples/typography/headings' 9 9 - import { Text } from '../../examples/typography/text' 10 10 - import { TextVariants } from '../../examples/typography/variants' 11 11 - import { Lists } from '../../examples/typography/lists' 12 12 - import { FontFamilies } from '../../examples/typography/font-families' 13 13 - import { FontWeights } from '../../examples/typography/font-weights' 14 14 - import { FontSizes } from '../../examples/typography/font-sizes' 15 15 - import { LineHeights } from '../../examples/typography/line-heights' 16 16 - import { LetterSpacing } from '../../examples/typography/letter-spacing' 17 17 - import { Typeramp } from '../../examples/typography/typeramp' 18 18 - import { BlockquoteExample } from '../../examples/typography/blockquote' 19 19 - import { InlineCodeExample } from '../../examples/typography/inline-code' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Headings } from '../../../examples/typography/headings' 9 9 + import { Text } from '../../../examples/typography/text' 10 10 + import { TextVariants } from '../../../examples/typography/variants' 11 11 + import { Lists } from '../../../examples/typography/lists' 12 12 + import { FontFamilies } from '../../../examples/typography/font-families' 13 13 + import { FontWeights } from '../../../examples/typography/font-weights' 14 14 + import { FontSizes } from '../../../examples/typography/font-sizes' 15 15 + import { LineHeights } from '../../../examples/typography/line-heights' 16 16 + import { LetterSpacing } from '../../../examples/typography/letter-spacing' 17 17 + import { Typeramp } from '../../../examples/typography/typeramp' 18 18 + import { BlockquoteExample } from '../../../examples/typography/blockquote' 19 19 + import { InlineCodeExample } from '../../../examples/typography/inline-code' 20 20 21 21 <Example src={Typeramp} /> 22 22

+5 -5

apps/docs/src/docs/components/window-splitter.mdx apps/docs/src/docs/components/layout/window-splitter.mdx

reviewed

··· 3 3 description: A flexible window splitter component for creating resizable panel layouts. 4 4 --- 5 5 6 6 - import { PropDocs } from '../../lib/PropDocs' 7 7 - import { Example } from '../../lib/Example' 8 8 - import { Basic } from '../../examples/window-splitter/basic' 9 9 - import { Vertical } from '../../examples/window-splitter/vertical' 10 10 - import { ThreePanels } from '../../examples/window-splitter/three-panels' 6 6 + import { PropDocs } from '../../../lib/PropDocs' 7 7 + import { Example } from '../../../lib/Example' 8 8 + import { Basic } from '../../../examples/window-splitter/basic' 9 9 + import { Vertical } from '../../../examples/window-splitter/vertical' 10 10 + import { ThreePanels } from '../../../examples/window-splitter/three-panels' 11 11 12 12 <Example src={Basic} /> 13 13

+75 -19

apps/docs/src/routes/docs.tsx

reviewed

··· 62 62 doc._meta.directory.startsWith("showcase"), 63 63 ); 64 64 65 65 + // Group component docs by folder name 66 66 + const componentGroups = componentDocs.reduce( 67 67 + (acc, doc) => { 68 68 + // Extract folder name from path like "components/form/select" -> "form" 69 69 + const pathParts = doc._meta.path.split("/"); 70 70 + const folderName = 71 71 + pathParts.length > 2 && pathParts[1] ? pathParts[1] : "components"; 72 72 + if (!acc[folderName]) { 73 73 + acc[folderName] = []; 74 74 + } 75 75 + acc[folderName]!.push(doc); 76 76 + return acc; 77 77 + }, 78 78 + {} as Record<string, typeof componentDocs>, 79 79 + ); 80 80 + 81 81 + const componentItems: SidebarItem[] = Object.entries(componentGroups) 82 82 + .sort(([a], [b]) => a.localeCompare(b)) 83 83 + .map(([folderName, docs]) => ({ 84 84 + id: `components-${folderName}`, 85 85 + label: folderName.charAt(0).toUpperCase() + folderName.slice(1), 86 86 + items: docs 87 87 + .sort((a, b) => a.title.localeCompare(b.title)) 88 88 + .map((doc) => ({ 89 89 + id: doc._meta.path, 90 90 + label: doc.title, 91 91 + to: "/docs/$", 92 92 + params: { _splat: doc._meta.path }, 93 93 + })), 94 94 + })); 95 95 + 65 96 const sidebarItems: SidebarItem[] = [ 66 97 { 67 98 id: "foundations", ··· 76 107 { 77 108 id: "components", 78 109 label: "Components", 79 79 - items: componentDocs.map((doc) => ({ 80 80 - id: doc._meta.path, 81 81 - label: doc.title, 82 82 - to: "/docs/$", 83 83 - params: { _splat: doc._meta.path }, 84 84 - })), 110 110 + items: componentItems, 85 111 }, 86 112 { 87 113 id: "showcases", ··· 96 122 ]; 97 123 98 124 const flatItems = sidebarItems 99 99 - .flatMap((item) => ("items" in item ? item.items : [item])) 125 125 + .flatMap((item) => { 126 126 + if (!("items" in item) || !item.items) { 127 127 + return [item]; 128 128 + } 129 129 + // Flatten nested items (for components with folder groups) 130 130 + return item.items.flatMap((subItem) => { 131 131 + if (subItem.items) { 132 132 + return subItem.items; 133 133 + } 134 134 + return [subItem]; 135 135 + }); 136 136 + }) 100 137 .filter((item): item is SidebarItem => item !== undefined); 101 138 102 139 function DarkModeToggle() { ··· 154 191 155 192 return ( 156 193 <SidebarGroup title={item.label} key={item.id}> 157 157 - <SidebarSection> 158 158 - {item.items.map((item) => ( 159 159 - <SidebarItemLink 160 160 - key={item.id} 161 161 - to={item.to} 162 162 - params={item.params} 163 163 - isActive={currentItem?.id === item.id} 164 164 - > 165 165 - {item.label} 166 166 - </SidebarItemLink> 167 167 - ))} 168 168 - </SidebarSection> 194 194 + {item.items.map((subItem) => { 195 195 + // If subItem has nested items, it's a group (like component folders) 196 196 + if (subItem.items) { 197 197 + return ( 198 198 + <SidebarSection key={subItem.id} title={subItem.label}> 199 199 + {subItem.items.map((leafItem) => ( 200 200 + <SidebarItemLink 201 201 + key={leafItem.id} 202 202 + to={leafItem.to} 203 203 + params={leafItem.params} 204 204 + isActive={currentItem?.id === leafItem.id} 205 205 + > 206 206 + {leafItem.label} 207 207 + </SidebarItemLink> 208 208 + ))} 209 209 + </SidebarSection> 210 210 + ); 211 211 + } 212 212 + // Otherwise, it's a leaf item (like foundation/showcase docs) 213 213 + return ( 214 214 + <SidebarSection key={subItem.id}> 215 215 + <SidebarItemLink 216 216 + to={subItem.to} 217 217 + params={subItem.params} 218 218 + isActive={currentItem?.id === subItem.id} 219 219 + > 220 220 + {subItem.label} 221 221 + </SidebarItemLink> 222 222 + </SidebarSection> 223 223 + ); 224 224 + })} 169 225 </SidebarGroup> 170 226 ); 171 227 })}

+14 -14

apps/docs/stylex.css

reviewed

··· 1 1 @property --x-boxShadow { syntax: "*"; inherits: false;} 2 2 + @property --x-aspectRatio { syntax: "*"; inherits: false;} 2 3 @property --x-gridTemplateRows { syntax: "*"; inherits: false;} 3 4 @property --x-gridTemplateColumns { syntax: "*"; inherits: false;} 4 5 @property --x-gridColumnStart { syntax: "*"; inherits: false;} 5 6 @property --x-gridColumnEnd { syntax: "*"; inherits: false;} 6 7 @property --x-gridRowStart { syntax: "*"; inherits: false;} 7 8 @property --x-gridRowEnd { syntax: "*"; inherits: false;} 8 8 - @property --x-aspectRatio { syntax: "*"; inherits: false;} 9 9 @property --x-width { syntax: "*"; inherits: false;} 10 10 @property --x-paddingLeft { syntax: "*"; inherits: false;} 11 11 @property --x-fontSize { syntax: "*"; inherits: false;} ··· 25 25 @property --black-xdj5g3 { syntax: "<number>"; inherits: true; initial-value: 900 } 26 26 @keyframes x1wc8ddo-B{from{transform:rotate(0deg);}to{transform:rotate(360deg);}} 27 27 @keyframes x1yo5mx1-B{0%{transform:translate(-50%,-50%) scale(0);}100%{transform:translate(-50%,-50%) scale(1);}} 28 28 - @keyframes x1yf9xd4-B{0%{transform:translateX(-65%);}100%{transform:translateX(0%);}} 29 28 @keyframes x72inym-B{from{transform:translateX(-1.86%);}to{transform:translateX(0%);}} 29 29 + @keyframes x1yf9xd4-B{0%{transform:translateX(-65%);}100%{transform:translateX(0%);}} 30 30 :root, .x15x7s49{--_0-xcffliq:0px;--_1-x1plbop:0.25rem;--_2-xsow7ju:0.5rem;--_3-x1a1riub:0.75rem;--_4-xgvn2um:1rem;--_5-x1pn3ufh:1.25rem;--_6-x109877l:1.5rem;--_7-x3ogwq2:1.75rem;--_8-x1do95gr:2rem;--_9-x58vtwt:2.25rem;--_10-xyoqvup:2.5rem;--_11-x11x3va4:2.75rem;--_12-xaxip2l:3rem;--_14-x18pvp2c:3.5rem;--_16-xnqsi2d:4rem;--_20-xbgtkw8:5rem;--_24-x8uq83j:6rem;--_28-x3c8utc:7rem;--_32-xxeew7j:8rem;--_36-x9ro48l:9rem;--_40-xlhyjhi:10rem;--_44-x4oqk9o:11rem;--_48-xc3zl6e:12rem;--_52-x66e183:13rem;--_56-x1k96jyh:14rem;--_60-xf930e:15rem;--_64-xhz114r:16rem;--_72-xgbkc4t:18rem;--_80-x12r4f45:20rem;--_96-x1mf07nc:24rem;--px-x1rrl3u8:1px;--_0_5-x1bnlq1y:0.125rem;--_1_5-x1llymyc:0.375rem;--_2_5-xmuc480:0.625rem;--_3_5-x1gotxl7:0.875rem;} 31 31 :root, .x1rvy3a9{--_2xs-x1xzzr5o:0 1px rgb(0 0 0 / 0.05);--xs-x1e2w8h4:0 1px 2px 0 rgb(0 0 0 / 0.05);--sm-xeboudq:0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);--md-xf59ov0:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--lg-xgilsvr:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--xl-x1azhb21:0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);--_2xl-x1nhun0f:0 25px 50px -12px rgb(0 0 0 / 0.25);--none-xgllz1r:0 0 #0000;--inset-xe4eu4o:inset 0 0 4px 0 rgb(0 0 0 / 0.1);--insetSm-xio3qbh:inset 0 0 4px 0 rgb(0 0 0 / 0.05);--insetMd-xx48ebj:inset 0 0 4px 0 rgb(0 0 0 / 0.1);--insetLg-x19q2zjg:inset 0 0 8px 0 rgb(0 0 0 / 0.15);} 32 32 :root, .x1vqb0uf{--bg-x11hz5ne:light-dark(#fcfcfd, #fcfcfd);--bgSubtle-xk6jaqm:light-dark(#f9f9fb, #f9f9fb);--component1-x14nyoj8:light-dark(#f0f0f3, #f0f0f3);--component2-xx984p:light-dark(#e8e8ec, #e8e8ec);--component3-x1frjuvu:light-dark(#e0e1e6, #e0e1e6);--border1-x1xf4476:light-dark(#d9d9e0, #d9d9e0);--border2-x10iw3tt:light-dark(#cdced6, #cdced6);--border3-xq0e6t4:light-dark(#b9bbc6, #b9bbc6);--solid1-x1rohqqu:light-dark(#8b8d98, #8b8d98);--solid2-x27t3df:light-dark(#80838d, #80838d);--text1-x1340um9:light-dark(#60646c, #60646c);--text2-x19kn33k:light-dark(#1c2024, #1c2024);} ··· 928 928 .paddingTop-x104xgb4:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_20-xbgtkw8)} 929 929 .paddingTop-x1s6vlbb:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_3-x1a1riub)} 930 930 .paddingTop-x1noqrsl:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_4-xgvn2um)} 931 931 - .paddingTop-x1k7s7hd:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_5-x1pn3ufh)} 932 931 .paddingTop-xz418gm:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_6-x109877l)} 933 932 .right-x3m8u43:not(#\#):not(#\#):not(#\#):not(#\#){right:0} 934 933 .right-x1e3uvw1:not(#\#):not(#\#):not(#\#):not(#\#){right:var(--_3-x1a1riub)} 935 934 .right-xjqvg7w:not(#\#):not(#\#):not(#\#):not(#\#){right:var(--_4-xgvn2um)} 936 935 .scrollMarginTop-x16864uc:not(#\#):not(#\#):not(#\#):not(#\#){scroll-margin-top:var(--_20-xbgtkw8)} 936 936 + .scrollMarginTop-xm4o6wd:not(#\#):not(#\#):not(#\#):not(#\#){scroll-margin-top:var(--_4-xgvn2um)} 937 937 .top-x13dri30:not(#\#):not(#\#):not(#\#):not(#\#){top:-0.01em} 938 938 .top-x13vifvy:not(#\#):not(#\#):not(#\#):not(#\#){top:0} 939 939 .top-xwa60dl:not(#\#):not(#\#):not(#\#):not(#\#){top:50%} ··· 1005 1005 .borderBottomWidth-x1vqyp8j:is(:not(:last-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0} 1006 1006 .borderBottomWidth-x7dc8i6:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0} 1007 1007 .borderBottomWidth-x1ed0nfq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:0} 1008 1008 - .borderBottomWidth-xyn800g:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px} 1009 1008 .borderBottomWidth-x1t94y08:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px} 1009 1009 + .borderBottomWidth-xyn800g:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:1px} 1010 1010 .borderBottomWidth-x1t21ho3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){border-bottom-width:3px} 1011 1011 .borderLeftWidth-x8b28c3:not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:0} 1012 1012 .borderLeftWidth-x7e6zi8:is(:not(:first-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-left-width:0} ··· 1023 1023 .borderRightWidth-xgzzm7r:is(:not(:last-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0} 1024 1024 .borderRightWidth-x13nsbtr:is([data-orientation=horizontal]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0} 1025 1025 .borderRightWidth-x14zibg8:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:0} 1026 1026 + .borderRightWidth-xpx03pi:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px} 1026 1027 .borderRightWidth-xmzihwk:is([data-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px} 1027 1027 - .borderRightWidth-xpx03pi:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:1px} 1028 1028 .borderRightWidth-x1n82x8c:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){border-right-width:3px} 1029 1029 .borderTopLeftRadius-x1jrxlk3:not(:first-child):not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:0} 1030 1030 .borderTopLeftRadius-x10dxjnd:is(:not(:first-child)) *:not(#\#):not(#\#):not(#\#):not(#\#){border-top-left-radius:0} ··· 1039 1039 .borderTopWidth-xk32l79:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){border-top-width:1px} 1040 1040 .bottom-xkg4vtl:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{bottom:0} 1041 1041 .bottom-x1fk7w57:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0} 1042 1042 - .bottom-x1s1o4wi:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0} 1043 1043 - .bottom-x1w0y3cq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0} 1044 1042 .bottom-x1tkpfsv:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0} 1045 1043 .bottom-x1ey2r4m:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0} 1046 1044 .bottom-xslbvph:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0} 1045 1045 + .bottom-x1s1o4wi:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0} 1046 1046 + .bottom-x1w0y3cq:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){bottom:0} 1047 1047 .height-xmu6b7u:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){height:100%} 1048 1048 .height-xfajk90:is([aria-orientation=vertical]):not(#\#):not(#\#):not(#\#):not(#\#){height:100%} 1049 1049 .height-x15y5qw9:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){height:100%} ··· 1063 1063 .height-x1bj8b9x:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_10-xyoqvup)} 1064 1064 .height-x104b1j8:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_11-x11x3va4)} 1065 1065 .height-x1k9a9im:is([data-size=xl]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_14-x18pvp2c)} 1066 1066 - .height-xe43mij:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)} 1067 1066 .height-x11nvpuc:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)} 1067 1067 + .height-xe43mij:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_2-xsow7ju)} 1068 1068 .height-x1dwj4yq:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3_5-x1gotxl7)} 1069 1069 .height-xepgdy3:is(*) svg:not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)} 1070 1070 .height-x6cp08u:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_3-x1a1riub)} ··· 1074 1074 .height-xzmxqe9:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_4-xgvn2um)} 1075 1075 .height-x1ckmk8u:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)} 1076 1076 .height-x413wr7:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)} 1077 1077 - .height-x1900l2r:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)} 1078 1077 .height-xuw6t6g:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)} 1079 1078 .height-x1f99l0e:is([data-focus-visible]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)} 1079 1079 + .height-x1900l2r:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_6-x109877l)} 1080 1080 .height-xflfpla:is([data-size=sm]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_7-x3ogwq2)} 1081 1081 .height-x8h21d:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_7-x3ogwq2)} 1082 1082 .height-xbkx42m:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_8-x1do95gr)} ··· 1087 1087 .height-xz9j5pl:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){height:var(--_9-x58vtwt)} 1088 1088 .left-x12bf3xg:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:0} 1089 1089 .left-xu15ax8:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0} 1090 1090 - .left-x1vbnr6c:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0} 1091 1090 .left-x15qd2tb:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){left:0} 1092 1091 .left-x1958hiq:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){left:0} 1093 1092 .left-xz1wair:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){left:0} 1093 1093 + .left-x1vbnr6c:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:0} 1094 1094 .left-x13m0n2z:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{left:50%} 1095 1095 .left-x1ff65kx:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){left:50%} 1096 1096 .left-xhiwlwb:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){left:calc(attr(data-progress-start number) * 1%)} ··· 1144 1144 .paddingRight-xuusv2y:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_1-x1plbop)} 1145 1145 .paddingRight-x1wn3puj:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2_5-xmuc480)} 1146 1146 .paddingRight-xhqis6d:is([data-size=md]):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2-xsow7ju)} 1147 1147 - .paddingRight-xyc92g7:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2-xsow7ju)} 1148 1147 .paddingRight-xooq7vc:is([data-size=md] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2-xsow7ju)} 1148 1148 + .paddingRight-xyc92g7:is([data-size=sm] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_2-xsow7ju)} 1149 1149 .paddingRight-xzl3pht:is([data-table-size=md] *:not(:last-child)):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_3-x1a1riub)} 1150 1150 .paddingRight-x1w258yr:is([data-size=lg]):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_3-x1a1riub)} 1151 1151 .paddingRight-xmwtj4t:is([data-size=lg] *):not(#\#):not(#\#):not(#\#):not(#\#){padding-right:var(--_3-x1a1riub)} ··· 1159 1159 .paddingTop-x1pdtiu9:is(*) pre:not(#\#):not(#\#):not(#\#):not(#\#){padding-top:var(--_4-xgvn2um)} 1160 1160 .right-x8z6mx6:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{right:0} 1161 1161 .right-xdsir5g:is([data-handle-orientation='vertical'] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0} 1162 1162 - .right-x1pbrn0l:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0} 1163 1163 - .right-xxlim67:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0} 1164 1162 .right-x1hu1b0q:is([data-direction=bottom]):not(#\#):not(#\#):not(#\#):not(#\#){right:0} 1165 1163 .right-x1edtlyo:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){right:0} 1166 1164 .right-xp6x2dd:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){right:0} 1165 1165 + .right-x1pbrn0l:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0} 1166 1166 + .right-xxlim67:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){right:0} 1167 1167 .top-x1v5ec6b:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:0} 1168 1168 .top-xbwnylk:is([data-handle-orientation='horizontal'] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0} 1169 1169 - .top-xdod2xa:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0} 1170 1169 .top-xi4gtk3:is([data-direction=left]):not(#\#):not(#\#):not(#\#):not(#\#){top:0} 1171 1170 .top-x1m4vouk:is([data-direction=right]):not(#\#):not(#\#):not(#\#):not(#\#){top:0} 1172 1171 .top-xck6qwh:is([data-direction=top]):not(#\#):not(#\#):not(#\#):not(#\#){top:0} 1172 1172 + .top-xdod2xa:is([data-orientation=vertical] *):not(#\#):not(#\#):not(#\#):not(#\#){top:0} 1173 1173 .top-xzpubj3:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#)::before{top:50%} 1174 1174 .top-xdpxmfp:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){top:50%} 1175 1175 .top-x7u6t2g:is([data-orientation=horizontal] *):not(#\#):not(#\#):not(#\#):not(#\#){top:auto}

+30 -7

packages/hip-ui/src/components/sidebar/index.tsx

reviewed

··· 1 1 + import { useLayoutEffect } from "@react-aria/utils"; 1 2 import * as stylex from "@stylexjs/stylex"; 2 3 import { ChevronRight } from "lucide-react"; 3 3 - import { createContext, use, useId, useMemo } from "react"; 4 4 + import { createContext, use, useEffect, useId, useMemo } from "react"; 4 5 import { mergeProps, useHover, usePress } from "react-aria"; 5 6 import { 6 7 Button, ··· 51 52 height: spacing["6"], 52 53 paddingLeft: spacing["3"], 53 54 paddingRight: spacing["3"], 55 55 + paddingTop: spacing["4"], 54 56 }, 55 57 sidebarSectionList: { 56 58 margin: 0, ··· 59 61 display: "flex", 60 62 flexDirection: "column", 61 63 }, 64 64 + sidebarItemWrapper: { 65 65 + listStyle: "none", 66 66 + }, 62 67 sidebarItem: { 63 68 // eslint-disable-next-line @stylexjs/valid-styles 64 69 cornerShape: "squircle", ··· 66 71 default: radius["md"], 67 72 "@supports (corner-shape: squircle)": radius["3xl"], 68 73 }, 69 69 - listStyle: "none", 74 74 + borderWidth: 0, 70 75 textDecoration: "none", 71 76 alignItems: "center", 72 77 backgroundColor: { ··· 94 99 ":is([data-pressed=true])": primaryColor.component3, 95 100 }, 96 101 color: primaryColor.text2, 102 102 + scrollMarginTop: spacing["4"], 97 103 }, 98 104 sidebarGroupHeading: { 99 105 margin: 0, ··· 133 139 height: "var(--disclosure-panel-height)", 134 140 }, 135 141 sidebarGroupPanelContent: { 136 136 - gap: spacing["4"], 142 142 + gap: spacing["1"], 137 143 display: "flex", 138 144 flexDirection: "column", 139 139 - paddingTop: spacing["5"], 145 145 + paddingTop: spacing["4"], 140 146 }, 141 147 }); 142 148 ··· 149 155 const headerId = useId(); 150 156 const contextValue = useMemo(() => ({ headerId }), [headerId]); 151 157 158 158 + useLayoutEffect(() => { 159 159 + const focusActiveItem = () => { 160 160 + const activeItem = 161 161 + document.querySelector<HTMLLIElement>("[data-active=true]"); 162 162 + console.log(activeItem); 163 163 + activeItem?.scrollIntoView({ behavior: "instant" }); 164 164 + }; 165 165 + 166 166 + document.addEventListener("keydown", focusActiveItem, { once: true }); 167 167 + return () => document.removeEventListener("keydown", focusActiveItem); 168 168 + }, []); 169 169 + 152 170 return ( 153 171 <SidebarContext value={contextValue}> 154 172 <nav ··· 243 261 <Flex direction="column" gap="1"> 244 262 {title && ( 245 263 <div {...stylex.props(styles.sidebarSectionTitle)}> 246 246 - <Text id={headerId} size="sm" weight="medium" variant="secondary"> 264 264 + <Text id={headerId} size="xs" weight="semibold" variant="secondary"> 247 265 {title} 248 266 </Text> 249 267 </div> ··· 275 293 const Component = "href" in props ? "a" : "button"; 276 294 277 295 return ( 278 278 - <li> 296 296 + <li {...stylex.props(styles.sidebarItemWrapper)}> 279 297 <Component 280 280 - {...mergeProps(props as any, hoverProps, pressProps)} 298 298 + {...mergeProps( 299 299 + props as React.ComponentProps<typeof Component>, 300 300 + hoverProps, 301 301 + pressProps, 302 302 + )} 281 303 data-hovered={isHovered} 282 304 data-pressed={isPressed} 305 305 + data-active={isActive} 283 306 {...stylex.props( 284 307 styles.sidebarItem, 285 308 isActive && styles.sidebarItemActive,