npm - @kanso-labs/kanso-ui - Versions diffs - 0.28.3 → 0.28.4 - Mend

@kanso-labs/kanso-ui 0.28.3 → 0.28.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (14) hide show

package/README.md +35 -7
package/dist/components/button/index.js.map +1 -1
package/dist/components/date-picker/index.js +79 -80
package/dist/components/date-picker/index.js.map +1 -1
package/dist/components/date-range-picker/index.js +94 -96
package/dist/components/date-range-picker/index.js.map +1 -1
package/dist/components/slider/index.js +3 -2
package/dist/components/slider/index.js.map +1 -1
package/dist/components/token-field/index.js +2 -2
package/dist/components/token-field/index.js.map +1 -1
package/dist/control/styles.js +1 -1
package/dist/control/styles.js.map +1 -1
package/dist/styles.css +12 -0
package/package.json +2 -2

package/README.md CHANGED Viewed

@@ -61,10 +61,17 @@ The components are built on
 [React Aria Components](https://react-aria.adobe.com), and the utilities an app
 needs around them come from this package too: `I18nProvider` and
 `RouterProvider`, `Collection`, `VisuallyHidden`, `Focusable` and `Pressable`,
-`Virtualizer` with its layouts, the `useFilter`, `useListData`, `useTreeData`
-and `useAsyncList` hooks, `useDragAndDrop` with `useDrag`, `useDrop` and the
-drop item guards, `useLocale`, `parseColor` and `getColorChannels`, and the
-`Key`, `Selection`, `SortDescriptor` and `PressEvent` types.
+`SharedElement` and `SharedElementTransition`, `Virtualizer` with its layouts,
+the `useFilter`, `useListData`, `useTreeData` and `useAsyncList` hooks,
+`useDragAndDrop` with `useDrag`, `useDrop`, the drop item guards and
+`DIRECTORY_DRAG_TYPE`, `useLocale`, `parseColor` and `getColorChannels`,
+`TokenFieldValue`, and the `Key`, `Selection`, `SortDescriptor` and `PressEvent`
+types.
+A virtualized collection needs to be told how tall its rows are, and
+`collectionSizes` is what the collections here measure — `listRow`, `menuRow`,
+`tableRow` and the rest — so a `Virtualizer`'s `layoutOptions` take a number the
+components agree with rather than one guessed at the call site.
 ```tsx
 import { I18nProvider, useListData } from '@kanso-labs/kanso-ui'
@@ -76,6 +83,27 @@ of the library carries a second set of contexts, and the two never meet: a
 trigger context it looks for belongs to your copy. Everything above is the same
 object the components use, which is what keeps them talking to each other.
+### Date values
+The date components — `DatePicker`, `DateField`, `Calendar`, `RangeCalendar`,
+`DateRangePicker` and `TimeField` — take the values
+[`@internationalized/date`](https://react-spectrum.adobe.com/internationalized/date/)
+builds, and this package publishes them at its own `./date` subpath:
+```ts
+import {
+  CalendarDate,
+  getLocalTimeZone,
+  today,
+} from '@kanso-labs/kanso-ui/date'
+```
+**Do not install `@internationalized/date` alongside this package.** A
+`CalendarDate` built from a second copy is a different class, and a `Calendar`'s
+`value` rejects it. The subpath is what makes installing it unnecessary, and it
+is a subpath rather than part of the main entry so an app with no date component
+pays nothing for it.
 ### Layout
 `Container` centres content at a measure, and `Stack` puts one gap from the
@@ -162,9 +190,9 @@ with the same styles and ripple, announced as the link it is.
 <Button href="/items/1">Label</Button>
 ```
-The overlays — `Sheet` and `Popover` — are opened by a `Button` or `IconButton`
-placed directly inside them, and closed by any button inside their content given
-`slot="close"`:
+The overlays — `Sheet`, `Dialog` and `Popover` — are opened by a `Button` or
+`IconButton` placed directly inside them, and closed by any button inside their
+content given `slot="close"`:
 ```tsx
 <Sheet>

package/dist/components/button/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","ButtonRenderProps","ClassNameOrFunction","FocusableElement","ButtonProps","RACButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","focus","mergeStatefulStyles","colors","radii","shadows","spacing","stateLayerOpacity","typography","ProgressIndicator","Ripple","ReturnType","styles","base","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kVAEAm","kybGjl","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","filled","filledDisabled","label","labelPending","k33iCy","lg","kZKoxP","kg3NbH","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","pending","kpwlN0","kjj79g","text","textDisabled","tonal","tonalDisabled","xl","xs","xxl","outlineWidths","disabledStyles","ButtonDOMProps","Omit","GlobalEventKey","Pick","HTMLElement","children","className","ButtonState","disableRipple","href","pendingLabel","rel","size","ButtonSize","style","target","variant","ButtonVariant","Exclude","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","render","t4","t5","props","undefined","t6","ripple","t7","state","ring","styleProps","element","aria","handlers","surface","T0","t8","t9","t10","buttonContent","t11","isPending"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// Elevated is the one variant whose shadow is part of its identity. The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// Two independent axes, applied base -> variant -> size. The order is what\n// lets `text` keep its tighter inline padding at the default size while the\n// other sizes still set their own: `md` deliberately declares no\n// paddingInline, so a medium button falls through to whatever its variant\n// asked for, and every other size overrides it. That mirrors the source\n// design's own cascade, where the size classes are declared after the\n// variant ones and win on padding for exactly the same reason.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n base: {\n kGNEyG: \"x6s0dn4\",\n kaIpWk: \"x3y1ksm\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kMv6JI: \"xkknnkr\",\n kGuDYH: \"x14zspaw\",\n k63SB2: \"x1v9cpvo\",\n kOIVth: \"x126z3so\",\n kb6lSQ: \"x155f00i\",\n kLWn49: \"x1lz68p4\",\n kVAEAm: \"x1n2onr6\",\n kybGjl: \"x1hl2dhg\",\n $$css: true\n },\n disabled: {\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n elevated: {\n kWkggS: \"x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6\",\n kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n kMwMTN: \"x1mxwv8y\",\n $$css: true\n },\n elevatedDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n filled: {\n kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n kMwMTN: \"xwjo7ld\",\n $$css: true\n },\n filledDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n label: {\n k1xSpc: \"xjp7ctv\",\n $$css: true\n },\n labelPending: {\n k33iCy: \"xlshs6z\",\n $$css: true\n },\n lg: {\n kZKoxP: \"xnnlda6\",\n kMv6JI: \"x46eyla\",\n kGuDYH: \"x5ehqhr\",\n k63SB2: \"xrf6cl6\",\n kb6lSQ: \"x1g135zh\",\n kLWn49: \"x1ggk5va\",\n kg3NbH: \"xg0ps1x\",\n $$css: true\n },\n md: {\n kZKoxP: \"x1vqgdyp\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n outlined: {\n kWkggS: \"x1dg9itu x1yu1589 x1728qcm xjbqb8w\",\n kVAM5u: \"x133yhug\",\n ksu8eU: \"x1y0btm7\",\n kMzoRj: \"xmkeg23\",\n kMwMTN: \"x1w5n3ug\",\n $$css: true\n },\n outlinedDisabled: {\n kWkggS: \"xjbqb8w\",\n kVAM5u: \"xrh88j3\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n pending: {\n kGNEyG: \"x6s0dn4\",\n k1xSpc: \"x78zum5\",\n kpwlN0: \"x10a8y8t\",\n kjj79g: \"xl56j7k\",\n kVAEAm: \"x10l6tqk\",\n $$css: true\n },\n text: {\n kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n kMwMTN: \"x1mxwv8y\",\n $$css: true\n },\n textDisabled: {\n kWkggS: \"xjbqb8w\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n tonal: {\n kWkggS: \"xnqsvhv xc87fxa xlizrex x15dekr4\",\n kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n kMwMTN: \"x1sawysd\",\n $$css: true\n },\n tonalDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n xl: {\n kZKoxP: \"xjp8j0k\",\n kMv6JI: \"x1fz0g89\",\n kGuDYH: \"xkb6epg\",\n k63SB2: \"x76yrz5\",\n kOIVth: \"x1gka490\",\n kb6lSQ: \"x1s1qhaa\",\n kLWn49: \"x1voeury\",\n kg3NbH: \"x1sdxjpb\",\n $$css: true\n },\n xs: {\n kZKoxP: \"x10w6t97\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n xxl: {\n kZKoxP: \"xn866dk\",\n kMv6JI: \"x1vsmgmf\",\n kGuDYH: \"xh9c4x\",\n k63SB2: \"x1y15vu6\",\n kOIVth: \"xxj4525\",\n kb6lSQ: \"xoqu3bc\",\n kLWn49: \"x10x9d6x\",\n kg3NbH: \"x1dao9b2\",\n $$css: true\n }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n lg: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n md: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n xl: {\n kMzoRj: \"xdh2fpr\",\n $$css: true\n },\n xs: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n xxl: {\n kMzoRj: \"x9r2w2z\",\n $$css: true\n }\n};\nconst disabledStyles = {\n elevated: styles.elevatedDisabled,\n filled: styles.filledDisabled,\n outlined: styles.outlinedDisabled,\n text: styles.textDisabled,\n tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' \| 'className' \| 'style' \| GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n children?: ReactNode;\n /** A function may compute the class from the button's render state. /\n className?: ClassNameOrFunction<ButtonState>;\n /\n Disables the press ripple. The hover/pressed background state layer is\n * unaffected.\n * @default false\n /\n disableRipple?: boolean;\n /\n Where the button leads. Given one, the button is rendered as a link —\n * an `<a>`, announced as the link it is — with the same styles and ripple.\n * `render`, `type`, and the form and pending props apply to the button\n * form only.\n /\n href?: string;\n /\n The name of the ring shown while the button is pending, for a screen\n * reader. The label it replaces is hidden while it shows.\n * @default 'Loading'\n /\n pendingLabel?: string;\n /* The link's `rel`, when `href` is set. /\n rel?: string;\n /\n Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n * the buttons spec page's XS, S, M, L and XL, each with its own inline\n * padding and type role. `md` is the page's default.\n * @default 'md'\n /\n size?: ButtonSize;\n /* A function may compute the style from the button's render state. /\n style?: StyleOrFunction<ButtonState>;\n /* The link's `target`, when `href` is set. /\n target?: string;\n /\n How much weight the button pulls. `filled` and `tonal` carry a container\n * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n * a low surface and lifts off it with a shadow, for a button that has to\n * separate from a busy background rather than from the page.\n * @default 'filled'\n /\n variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' \| 'md' \| 'xl' \| 'xs' \| 'xxl';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link, so\n// neither is here: a `className` written against this state serves both\n// elements. What the button draws while pending is decided in\n// `buttonContent`, which sees React Aria's own state rather than this one.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' \| 'isFocused' \| 'isFocusVisible' \| 'isHovered' \| 'isPressed'>;\ntype ButtonVariant = 'elevated' \| 'filled' \| 'outlined' \| 'text' \| 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' \| 'onClick' \| 'onFocus'>;\n\n/\n The design's button, at five emphasis levels and five control heights.\n * Given `href` it is a link with the same appearance. Every `aria-` prop is\n forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n children,\n disableRipple = false,\n href,\n isDisabled = false,\n onClick,\n onContextMenu,\n onKeyDown,\n onKeyUp,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n pendingLabel = 'Loading',\n rel,\n render,\n size = 'md',\n target,\n variant = 'filled',\n ...props\n}: ButtonProps) {\n // `props` (className/style, etc.) is spread separately: `className` and\n // `style` there may be functions of render state, which ripple's own\n // handler-only merge doesn't need to know about. It is also why the styles\n // below merge through mergeStatefulStyles rather than the plain\n // mergeStyles. The ripple is off while disabled: React Aria still forwards\n // pointer events to a disabled element, and a press that changes nothing\n // should not look like one.\n const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n onClick,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp\n });\n const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n const element = {\n aria: ariaAttributesOf(props),\n onKeyDown,\n onKeyUp\n };\n if (href !== undefined) {\n return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n {children}\n {ripple.surface}\n </RACLink>;\n }\n return <RACButton isDisabled={isDisabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n {buttonContent(children, pendingLabel, ripple)}\n </RACButton>;\n}\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n return (state: ButtonRenderProps) => <>\n <span {...{\n 0: {\n className: \"xjp7ctv\"\n },\n 1: {\n className: \"xjp7ctv xlshs6z\"\n }\n }[!!state.isPending << 0]}>\n {children}\n </span>\n {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n </span> : null}\n {ripple.surface}\n </>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["DOMAttributes","ReactNode","ButtonRenderProps","ClassNameOrFunction","FocusableElement","ButtonProps","RACButtonProps","StyleOrFunction","stylex","Button","RACButton","Link","RACLink","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","focus","mergeStatefulStyles","colors","radii","shadows","spacing","stateLayerOpacity","typography","ProgressIndicator","Ripple","ReturnType","styles","base","kGNEyG","kaIpWk","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kb6lSQ","kLWn49","kVAEAm","kybGjl","$$css","disabled","elevated","kWkggS","kGVxlE","kMwMTN","elevatedDisabled","filled","filledDisabled","label","labelPending","k33iCy","lg","kZKoxP","kg3NbH","md","outlined","kVAM5u","ksu8eU","outlinedDisabled","pending","kpwlN0","kjj79g","text","textDisabled","tonal","tonalDisabled","xl","xs","xxl","outlineWidths","disabledStyles","ButtonDOMProps","Omit","GlobalEventKey","Pick","HTMLElement","children","className","ButtonState","disableRipple","href","pendingLabel","rel","size","ButtonSize","style","target","variant","ButtonVariant","Exclude","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","render","t4","t5","props","undefined","t6","ripple","t7","state","ring","styleProps","element","aria","handlers","surface","T0","t8","t9","t10","buttonContent","t11","isPending"],"sources":["../../../src/components/button/index.tsx"],"sourcesContent":["import type { DOMAttributes, ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, FocusableElement, ButtonProps as RACButtonProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, Link as RACLink } from 'react-aria-components';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites its label colour over its container at the\n// interaction state's opacity, rather than swapping in a separate\n// hover/pressed color: filled and tonal paint the 'on-color' over the\n// container, outlined, text and elevated paint the label colour over their\n// own. The pairs are the buttons spec page's newer values: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary, elevated on surface container\n// low with a primary label.\n//\n// Elevated is the one variant whose shadow is part of its identity. The\n// page rests it at elevation 1 rather than flat, raises it on hover and\n// returns it to 1 while pressed — where filled and tonal rest flat and lift\n// only on hover. Disabled drops it to none, since a shadow says a control is\n// available to press.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined rather than factored into a helper:\n// @stylexjs/babel-plugin only statically recognizes expressions written\n// directly as property values, and a call to an externally-defined function\n// isn't one of them.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property: a button given `href` renders as a link,\n// which React Aria turns into a <span> while disabled, and neither matches\n// the pseudo-class. The disabled styles are applied last from the render\n// state's `isDisabled`, and StyleX replaces a property whole, so they also\n// take the hover and pressed branches with them — which is what keeps a\n// hovered disabled button from lighting up.\n//\n// Two independent axes, applied base -> variant -> size. The variant carries\n// colour and the size carries geometry, so the two never argue: inline\n// padding belongs to the size alone, and every size declares its own.\n//\n// That is deliberate rather than incidental. The buttons page gives padding\n// per size — its Small button padding is 16dp, the 24dp beside it being the\n// older value the page marks as not recommended — and gives the five colour\n// styles no padding of their own. A text button is therefore as wide as a\n// filled one at the same size, which is what the code draws.\n//\n// This did once read the other way, with `md` declaring no padding so a\n// medium button fell through to its variant's. `fix(button)!: the spec's\n// five sizes` replaced that when the component took the page's sizes, since\n// a per-variant padding had nowhere to sit once every size carried one. The\n// comment describing the old cascade outlived it by some months, which is\n// how it came to say `text` keeps a tighter padding it has never had — back\n// then `text` declared 16dp while a filled `md` declared none at all, so the\n// text button was the wider of the two.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\nconst styles = {\n base: {\n kGNEyG: \"x6s0dn4\",\n kaIpWk: \"x3y1ksm\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kMv6JI: \"xkknnkr\",\n kGuDYH: \"x14zspaw\",\n k63SB2: \"x1v9cpvo\",\n kOIVth: \"x126z3so\",\n kb6lSQ: \"x155f00i\",\n kLWn49: \"x1lz68p4\",\n kVAEAm: \"x1n2onr6\",\n kybGjl: \"x1hl2dhg\",\n $$css: true\n },\n disabled: {\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n elevated: {\n kWkggS: \"x1k1wbbp x3k5p2v xf9j7ge x1vnz5z6\",\n kGVxlE: \"x1g60mc1 x1fzngjt x19efjv6\",\n kMwMTN: \"x1mxwv8y\",\n $$css: true\n },\n elevatedDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n filled: {\n kWkggS: \"xpky1to x16z974x xyf7a0q xnety89\",\n kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n kMwMTN: \"xwjo7ld\",\n $$css: true\n },\n filledDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n label: {\n k1xSpc: \"xjp7ctv\",\n $$css: true\n },\n labelPending: {\n k33iCy: \"xlshs6z\",\n $$css: true\n },\n lg: {\n kZKoxP: \"xnnlda6\",\n kMv6JI: \"x46eyla\",\n kGuDYH: \"x5ehqhr\",\n k63SB2: \"xrf6cl6\",\n kb6lSQ: \"x1g135zh\",\n kLWn49: \"x1ggk5va\",\n kg3NbH: \"xg0ps1x\",\n $$css: true\n },\n md: {\n kZKoxP: \"x1vqgdyp\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n outlined: {\n kWkggS: \"x1dg9itu x1yu1589 x1728qcm xjbqb8w\",\n kVAM5u: \"x133yhug\",\n ksu8eU: \"x1y0btm7\",\n kMzoRj: \"xmkeg23\",\n kMwMTN: \"x1w5n3ug\",\n $$css: true\n },\n outlinedDisabled: {\n kWkggS: \"xjbqb8w\",\n kVAM5u: \"xrh88j3\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n pending: {\n kGNEyG: \"x6s0dn4\",\n k1xSpc: \"x78zum5\",\n kpwlN0: \"x10a8y8t\",\n kjj79g: \"xl56j7k\",\n kVAEAm: \"x10l6tqk\",\n $$css: true\n },\n text: {\n kWkggS: \"x12vej0r x598nmq x14dcer4 xjbqb8w\",\n kMwMTN: \"x1mxwv8y\",\n $$css: true\n },\n textDisabled: {\n kWkggS: \"xjbqb8w\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n tonal: {\n kWkggS: \"xnqsvhv xc87fxa xlizrex x15dekr4\",\n kGVxlE: \"xpk4wdd x1955hzl x1gnnqk1\",\n kMwMTN: \"x1sawysd\",\n $$css: true\n },\n tonalDisabled: {\n kWkggS: \"xepofeg\",\n kGVxlE: \"x1gnnqk1\",\n kMwMTN: \"x1xj74d8\",\n $$css: true\n },\n xl: {\n kZKoxP: \"xjp8j0k\",\n kMv6JI: \"x1fz0g89\",\n kGuDYH: \"xkb6epg\",\n k63SB2: \"x76yrz5\",\n kOIVth: \"x1gka490\",\n kb6lSQ: \"x1s1qhaa\",\n kLWn49: \"x1voeury\",\n kg3NbH: \"x1sdxjpb\",\n $$css: true\n },\n xs: {\n kZKoxP: \"x10w6t97\",\n kg3NbH: \"x790zyz\",\n $$css: true\n },\n xxl: {\n kZKoxP: \"xn866dk\",\n kMv6JI: \"x1vsmgmf\",\n kGuDYH: \"xh9c4x\",\n k63SB2: \"x1y15vu6\",\n kOIVth: \"xxj4525\",\n kb6lSQ: \"xoqu3bc\",\n kLWn49: \"x10x9d6x\",\n kg3NbH: \"x1dao9b2\",\n $$css: true\n }\n};\n\n// The outlined button's border thickens with the size, as the page's size\n// tokens have it: 1dp up to M, 2dp at L, 3dp at XL. A style per size rather\n// than a value in the size style, since a border on a filled button would\n// draw in the label colour.\nconst outlineWidths = {\n lg: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n md: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n xl: {\n kMzoRj: \"xdh2fpr\",\n $$css: true\n },\n xs: {\n kMzoRj: \"xmkeg23\",\n $$css: true\n },\n xxl: {\n kMzoRj: \"x9r2w2z\",\n $$css: true\n }\n};\nconst disabledStyles = {\n elevated: styles.elevatedDisabled,\n filled: styles.filledDisabled,\n outlined: styles.outlinedDisabled,\n text: styles.textDisabled,\n tonal: styles.tonalDisabled\n};\ntype ButtonDOMProps = Omit<RACButtonProps, 'children' \| 'className' \| 'style' \| GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype ButtonProps = {\n children?: ReactNode;\n /** A function may compute the class from the button's render state. /\n className?: ClassNameOrFunction<ButtonState>;\n /\n Disables the press ripple. The hover/pressed background state layer is\n * unaffected.\n * @default false\n /\n disableRipple?: boolean;\n /\n Where the button leads. Given one, the button is rendered as a link —\n * an `<a>`, announced as the link it is — with the same styles and ripple.\n * `render`, `type`, and the form and pending props apply to the button\n * form only.\n /\n href?: string;\n /\n The name of the ring shown while the button is pending, for a screen\n * reader. The label it replaces is hidden while it shows.\n * @default 'Loading'\n /\n pendingLabel?: string;\n /* The link's `rel`, when `href` is set. /\n rel?: string;\n /\n Control height: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n * the buttons spec page's XS, S, M, L and XL, each with its own inline\n * padding and type role. `md` is the page's default.\n * @default 'md'\n /\n size?: ButtonSize;\n /* A function may compute the style from the button's render state. /\n style?: StyleOrFunction<ButtonState>;\n /* The link's `target`, when `href` is set. /\n target?: string;\n /\n How much weight the button pulls. `filled` and `tonal` carry a container\n * of their own; `outlined` and `text` sit on the page; `elevated` sits on\n * a low surface and lifts off it with a shadow, for a button that has to\n * separate from a busy background rather than from the page.\n * @default 'filled'\n /\n variant?: ButtonVariant;\n} & ButtonDOMProps;\ntype ButtonSize = 'lg' \| 'md' \| 'xl' \| 'xs' \| 'xxl';\n\n// The render state both of React Aria's elements share. A className or\n// style function written against it serves the button and the link alike;\n// `isPending` belongs to the button alone, and `isCurrent` to the link, so\n// neither is here: a `className` written against this state serves both\n// elements. What the button draws while pending is decided in\n// `buttonContent`, which sees React Aria's own state rather than this one.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' \| 'isFocused' \| 'isFocusVisible' \| 'isHovered' \| 'isPressed'>;\ntype ButtonVariant = 'elevated' \| 'filled' \| 'outlined' \| 'text' \| 'tonal';\n\n// React Aria types the global DOM events — pointer, mouse, touch, wheel and\n// the rest — against the element each component renders, and a handler\n// written for a <button> does not type-check against an <a>. The keys are\n// retyped against HTMLElement here so one set of props serves both forms;\n// the events React Aria defines itself (press, focus, keyboard) keep its\n// types, since it hands those its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACButtonProps, 'onBlur' \| 'onClick' \| 'onFocus'>;\n\n/\n The design's button, at five emphasis levels and five control heights.\n * Given `href` it is a link with the same appearance. Every `aria-` prop is\n forwarded to the element; React Aria alone would keep only the labelling\n * ones.\n */\nfunction Button({\n children,\n disableRipple = false,\n href,\n isDisabled = false,\n onClick,\n onContextMenu,\n onKeyDown,\n onKeyUp,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp,\n pendingLabel = 'Loading',\n rel,\n render,\n size = 'md',\n target,\n variant = 'filled',\n ...props\n}: ButtonProps) {\n // `props` (className/style, etc.) is spread separately: `className` and\n // `style` there may be functions of render state, which ripple's own\n // handler-only merge doesn't need to know about. It is also why the styles\n // below merge through mergeStatefulStyles rather than the plain\n // mergeStyles. The ripple is off while disabled: React Aria still forwards\n // pointer events to a disabled element, and a press that changes nothing\n // should not look like one.\n const ripple = useRipple<FocusableElement>(!disableRipple && !isDisabled, {\n onClick,\n onContextMenu,\n onPointerCancel,\n onPointerDown,\n onPointerLeave,\n onPointerUp\n });\n const styleProps = mergeStatefulStyles((state: ButtonState) => stylex.props(styles.base, focus.ring, styles[variant], styles[size], variant === 'outlined' && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant]), props);\n const element = {\n aria: ariaAttributesOf(props),\n onKeyDown,\n onKeyUp\n };\n if (href !== undefined) {\n return <RACLink href={href} isDisabled={isDisabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n {children}\n {ripple.surface}\n </RACLink>;\n }\n return <RACButton isDisabled={isDisabled} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n {buttonContent(children, pendingLabel, ripple)}\n </RACButton>;\n}\n// What the button draws: its label, hidden while the button is pending, with\n// the ring over it. The ring takes the button's own content colour rather\n// than the progress page's primary, which on a filled button is the fill\n// itself and so invisible. The label stays in the flow so the button keeps its\n// width, which is what stops a form jumping the moment it is submitted.\n// React Aria wants the progress bar in the accessibility tree as soon as the\n// button goes pending, so it is rendered from the render state rather than\n// after a delay.\n//\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler\n// memoises the result on its inputs.\nfunction buttonContent(children: ReactNode, pendingLabel: string, ripple: Ripple) {\n return (state: ButtonRenderProps) => <>\n <span {...{\n 0: {\n className: \"xjp7ctv\"\n },\n 1: {\n className: \"xjp7ctv xlshs6z\"\n }\n }[!!state.isPending << 0]}>\n {children}\n </span>\n {state.isPending ? <span className=\"x6s0dn4 x78zum5 x10a8y8t xl56j7k x10l6tqk\">\n <ProgressIndicator aria-label={pendingLabel} isIndeterminate size=\"1em\" tone=\"inherit\" variant=\"circular\" />\n </span> : null}\n {ripple.surface}\n </>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}

package/dist/components/date-picker/index.js CHANGED Viewed

@@ -13,6 +13,13 @@ import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, DateInput, DatePicker, Dialog, Group, Popover } from "react-aria-components";
 //#region src/components/date-picker/index.tsx
+function calendarTrigger(triggerLabel) {
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": triggerLabel,
+		className: triggerClassName,
+		children: /* @__PURE__ */ jsx(CalendarGlyph, { ...props(picker.triggerGlyph) })
+	});
+}
 /**
 * A date typed into a field, or picked from a calendar behind a button. The
 * value is React Aria's — pass `value` with `onChange` to control it, or
@@ -34,7 +41,7 @@ import { Button, DateInput, DatePicker, Dialog, Group, Popover } from "react-ari
 * which is the element a layout positions.
 */
 function DatePicker$1(t0) {
-	const $ = c(33);
+	const $ = c(32);
 	const { container, description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, triggerLabel: t3, variant: t4, ...props$1 } = t0;
 	const floatingLabel = t1 === void 0 ? true : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
@@ -50,119 +57,111 @@ function DatePicker$1(t0) {
 	} else t5 = $[1];
 	const t6 = mergeStatefulStyles(props(fieldStyles.root), props$1);
 	let t7;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t7 = props(picker.group);
-		$[2] = t7;
-	} else t7 = $[2];
+	if ($[2] !== triggerLabel) {
+		t7 = calendarTrigger(triggerLabel);
+		$[2] = triggerLabel;
+		$[3] = t7;
+	} else t7 = $[3];
 	let t8;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = /* @__PURE__ */ jsx(DateInput, {
-			...props(segmentStyles.input),
-			children: renderSegment
-		});
-		$[3] = t8;
-	} else t8 = $[3];
-	let t9;
 	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(CalendarGlyph, { ...props(picker.triggerGlyph) });
-		$[4] = t9;
-	} else t9 = $[4];
-	let t10;
-	if ($[5] !== triggerLabel) {
-		t10 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsxs(Group, {
-			...t7,
-			children: [t8, /* @__PURE__ */ jsx(Button, {
-				"aria-label": triggerLabel,
-				className: triggerClassName,
-				children: t9
-			})]
+		t8 = props(picker.group);
+		$[4] = t8;
+	} else t8 = $[4];
+	let t9;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsx(Group, {
+			...t8,
+			children: /* @__PURE__ */ jsx(DateInput, {
+				...props(segmentStyles.input),
+				children: renderSegment
+			})
 		}) });
-		$[5] = triggerLabel;
-		$[6] = t10;
-	} else t10 = $[6];
-	let t11;
-	if ($[7] !== floatingLabel || $[8] !== label || $[9] !== leadingIcon || $[10] !== t10 || $[11] !== variant) {
-		t11 = /* @__PURE__ */ jsx(FieldBox, {
+		$[5] = t9;
+	} else t9 = $[5];
+	let t10;
+	if ($[6] !== floatingLabel || $[7] !== label || $[8] !== leadingIcon || $[9] !== t7 || $[10] !== variant) {
+		t10 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			isPopulated: true,
 			label,
 			leading: leadingIcon,
+			trailing: t7,
 			variant,
-			children: t10
+			children: t9
 		});
-		$[7] = floatingLabel;
-		$[8] = label;
-		$[9] = leadingIcon;
-		$[10] = t10;
-		$[11] = variant;
-		$[12] = t11;
-	} else t11 = $[12];
-	let t12;
-	if ($[13] !== description || $[14] !== error) {
-		t12 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[6] = floatingLabel;
+		$[7] = label;
+		$[8] = leadingIcon;
+		$[9] = t7;
+		$[10] = variant;
+		$[11] = t10;
+	} else t10 = $[11];
+	let t11;
+	if ($[12] !== description || $[13] !== error) {
+		t11 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
 		});
-		$[13] = description;
-		$[14] = error;
+		$[12] = description;
+		$[13] = error;
+		$[14] = t11;
+	} else t11 = $[14];
+	let t12;
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = props(overlay.popup, picker.popover);
 		$[15] = t12;
 	} else t12 = $[15];
 	let t13;
 	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
-		t13 = props(overlay.popup, picker.popover);
+		t13 = props(overlay.popupDialog, focus.ring);
 		$[16] = t13;
 	} else t13 = $[16];
 	let t14;
-	if ($[17] === Symbol.for("react.memo_cache_sentinel")) {
-		t14 = props(overlay.popupDialog, focus.ring);
-		$[17] = t14;
-	} else t14 = $[17];
-	let t15;
-	if ($[18] !== label) {
-		t15 = /* @__PURE__ */ jsx(Dialog, {
-			...t14,
+	if ($[17] !== label) {
+		t14 = /* @__PURE__ */ jsx(Dialog, {
+			...t13,
 			children: /* @__PURE__ */ jsx(Calendar$1, { "aria-label": label })
 		});
-		$[18] = label;
-		$[19] = t15;
-	} else t15 = $[19];
-	let t16;
-	if ($[20] !== container || $[21] !== t15) {
-		t16 = /* @__PURE__ */ jsx(Popover, {
+		$[17] = label;
+		$[18] = t14;
+	} else t14 = $[18];
+	let t15;
+	if ($[19] !== container || $[20] !== t14) {
+		t15 = /* @__PURE__ */ jsx(Popover, {
 			UNSTABLE_portalContainer: container,
-			...t13,
-			children: t15
+			...t12,
+			children: t14
 		});
-		$[20] = container;
+		$[19] = container;
+		$[20] = t14;
 		$[21] = t15;
-		$[22] = t16;
-	} else t16 = $[22];
-	let t17;
-	if ($[23] !== T0 || $[24] !== isDisabled || $[25] !== props$1 || $[26] !== t11 || $[27] !== t12 || $[28] !== t16 || $[29] !== t5 || $[30] !== t6 || $[31] !== validationBehavior) {
-		t17 = /* @__PURE__ */ jsxs(T0, {
+	} else t15 = $[21];
+	let t16;
+	if ($[22] !== T0 || $[23] !== isDisabled || $[24] !== props$1 || $[25] !== t10 || $[26] !== t11 || $[27] !== t15 || $[28] !== t5 || $[29] !== t6 || $[30] !== validationBehavior) {
+		t16 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t5,
 			validationBehavior,
 			...props$1,
 			...t6,
 			children: [
+				t10,
 				t11,
-				t12,
-				t16
+				t15
 			]
 		});
-		$[23] = T0;
-		$[24] = isDisabled;
-		$[25] = props$1;
+		$[22] = T0;
+		$[23] = isDisabled;
+		$[24] = props$1;
+		$[25] = t10;
 		$[26] = t11;
-		$[27] = t12;
-		$[28] = t16;
-		$[29] = t5;
-		$[30] = t6;
-		$[31] = validationBehavior;
-		$[32] = t17;
-	} else t17 = $[32];
-	return t17;
+		$[27] = t15;
+		$[28] = t5;
+		$[29] = t6;
+		$[30] = validationBehavior;
+		$[31] = t16;
+	} else t16 = $[31];
+	return t16;
 }
 //#endregion
 export { DatePicker$1 as default };

package/dist/components/date-picker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["ReactNode","DateValue","DatePickerProps","RACDatePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DatePicker","RACDatePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","Calendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","style","triggerLabel","variant","t0","$","_c","t1","isDisabled","t2","t3","t4","props","undefined","validationBehavior","T0","t5","t6","root","t7","Symbol","for","group","t8","input","t9","triggerGlyph","t10","t11","t12","t13","popup","popover","t14","popupDialog","ring","t15","t16","t17"],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DatePickerProps as RACDatePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DatePicker as RACDatePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport Calendar from '../calendar';\n\n// The date pickers page's picker: the date field a date is typed into, with\n// a calendar behind a button for picking it instead. Both halves already\n// exist — the segments are `DateField`'s, from `src/segments`, and the\n// calendar is `Calendar` — so what this adds is the button between them and\n// the surface the calendar opens on.\n//\n// Two things are this component's own.\n//\n// The picker is one field, not a field beside a button. React Aria's\n// `Group` is what holds the segments and the trigger together, so the box\n// draws once around both and a reader tabs through the segments and reaches\n// the button at the end of them rather than as a separate control.\n//\n// It is docked above the medium breakpoint and modal below it, which is\n// the pairing the page draws and the same swap `Sheet` makes. It is done in\n// CSS rather than by rendering a different tree: a 360dp calendar anchored\n// to a field is unreachable at 375px, and a modal that stayed centred on a\n// desktop would cover a form for no reason. `Sheet` settles this the same\n// way, and doing it twice in two different ways is how the two would drift.\n\ntype DatePickerProps<T extends DateValue = DateValue> = Omit<RACDatePickerProps<T>, 'children' \| 'className' \| 'style'> & {\n /** A function may compute the class from the picker's render state. /\n className?: RACDatePickerProps<T>['className'];\n /\n Where to portal the calendar. Defaults to the end of `<body>`, which is\n * right for an app that sets its StyleX theme on `:root`. An app that\n * scopes the theme to a subtree has to point this at an element inside it,\n * or the calendar renders outside the theme and falls back to the tokens'\n * `prefers-color-scheme` default.\n /\n container?: Element;\n /* Supporting text under the field. /\n description?: string;\n /* The message shown instead of the description, which also marks the field invalid. /\n error?: string;\n /\n Whether the label floats into the box's top once the field holds a\n * value, rather than sitting above it.\n * @default true\n /\n floatingLabel?: boolean;\n /* What the field is for. Always rendered; never a placeholder. /\n label: string;\n /* An icon at the box's leading end. /\n leadingIcon?: ReactNode;\n /* A function may compute the style from the picker's render state. /\n style?: RACDatePickerProps<T>['style'];\n /\n What the button that opens the calendar is called, for a screen reader.\n * @default 'Choose a date'\n /\n triggerLabel?: string;\n /\n Which of the text fields page's two boxes to draw.\n * @default 'filled'\n /\n variant?: FieldVariant;\n};\n\n/\n A date typed into a field, or picked from a calendar behind a button. The\n * value is React Aria's — pass `value` with `onChange` to control it, or\n * `defaultValue` — as an `@internationalized/date` value from this package's\n * `./date` subpath.\n \n ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n \n <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n \n The segments are `DateField`'s and the calendar is `Calendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, which is the page's modal picker.\n \n The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DatePicker<T extends DateValue>({\n container,\n description,\n error,\n floatingLabel = true,\n isDisabled = false,\n label,\n leadingIcon,\n triggerLabel = 'Choose a date',\n variant = 'filled',\n ...props\n}: DatePickerProps<T>) {\n const validationBehavior = useFieldValidationBehavior();\n return <RACDatePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n <FieldBox floatingLabel={floatingLabel}\n // Always populated, which buys exactly one thing: the outlined\n // notch. The box decides populated twice over — in CSS for the\n // label's type, and in React for the notch, since CSS cannot cut an\n // outline to a width it has no way to measure. React Aria renders a\n // hidden `<input type=\"date\">` carrying no placeholder, so the CSS\n // half reads as populated on its own; the React half reads React\n // Aria's input context, which a picker does not provide. Without\n // this the notch stays shut across segments already showing\n // `mm/dd/yyyy`.\n isPopulated label={label} leading={leadingIcon} variant={variant}>\n <FieldValue>\n <RACGroup {...stylex.props(picker.group)}>\n <RACDateInput {...stylex.props(segmentStyles.input)}>\n {renderSegment}\n </RACDateInput>\n <RACButton aria-label={triggerLabel} className={triggerClassName}>\n <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n </RACButton>\n </RACGroup>\n </FieldValue>\n </FieldBox>\n <FieldMessage description={description} error={error} />\n <RACPopover\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n <Calendar aria-label={label} />\n </RACDialog>\n </RACPopover>\n </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["ReactNode","DateValue","DatePickerProps","RACDatePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DatePicker","RACDatePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","Calendar","Omit","T","className","container","Element","description","error","floatingLabel","label","leadingIcon","style","triggerLabel","variant","calendarTrigger","props","triggerGlyph","t0","$","_c","t1","isDisabled","t2","t3","t4","undefined","validationBehavior","T0","t5","t6","root","t7","t8","Symbol","for","group","t9","input","t10","t11","t12","popup","popover","t13","popupDialog","ring","t14","t15","t16"],"sources":["../../../src/components/date-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DatePickerProps as RACDatePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DatePicker as RACDatePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport Calendar from '../calendar';\n\n// The date pickers page's picker: the date field a date is typed into, with\n// a calendar behind a button for picking it instead. Both halves already\n// exist — the segments are `DateField`'s, from `src/segments`, and the\n// calendar is `Calendar` — so what this adds is the button between them and\n// the surface the calendar opens on.\n//\n// Two things are this component's own.\n//\n// The picker is one field, not a field beside a button. React Aria's\n// `Group` is what holds the segments and the trigger together, so the box\n// draws once around both and a reader tabs through the segments and reaches\n// the button at the end of them rather than as a separate control.\n//\n// It is docked above the medium breakpoint and modal below it, which is\n// the pairing the page draws and the same swap `Sheet` makes. It is done in\n// CSS rather than by rendering a different tree: a 360dp calendar anchored\n// to a field is unreachable at 375px, and a modal that stayed centred on a\n// desktop would cover a form for no reason. `Sheet` settles this the same\n// way, and doing it twice in two different ways is how the two would drift.\n\ntype DatePickerProps<T extends DateValue = DateValue> = Omit<RACDatePickerProps<T>, 'children' \| 'className' \| 'style'> & {\n /** A function may compute the class from the picker's render state. /\n className?: RACDatePickerProps<T>['className'];\n /\n Where to portal the calendar. Defaults to the end of `<body>`, which is\n * right for an app that sets its StyleX theme on `:root`. An app that\n * scopes the theme to a subtree has to point this at an element inside it,\n * or the calendar renders outside the theme and falls back to the tokens'\n * `prefers-color-scheme` default.\n /\n container?: Element;\n /* Supporting text under the field. /\n description?: string;\n /* The message shown instead of the description, which also marks the field invalid. /\n error?: string;\n /\n Whether the label floats into the box's top once the field holds a\n * value, rather than sitting above it.\n * @default true\n /\n floatingLabel?: boolean;\n /* What the field is for. Always rendered; never a placeholder. /\n label: string;\n /* An icon at the box's leading end. /\n leadingIcon?: ReactNode;\n /* A function may compute the style from the picker's render state. /\n style?: RACDatePickerProps<T>['style'];\n /\n What the button that opens the calendar is called, for a screen reader.\n * @default 'Choose a date'\n /\n triggerLabel?: string;\n /\n Which of the text fields page's two boxes to draw.\n * @default 'filled'\n /\n variant?: FieldVariant;\n};\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string) {\n return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n </RACButton>;\n}\n\n/\n A date typed into a field, or picked from a calendar behind a button. The\n * value is React Aria's — pass `value` with `onChange` to control it, or\n * `defaultValue` — as an `@internationalized/date` value from this package's\n * `./date` subpath.\n \n ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n \n <DatePicker defaultValue={new CalendarDate(2026, 9, 15)} label=\"Label\" />\n * ```\n \n The segments are `DateField`'s and the calendar is `Calendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, which is the page's modal picker.\n \n The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DatePicker<T extends DateValue>({\n container,\n description,\n error,\n floatingLabel = true,\n isDisabled = false,\n label,\n leadingIcon,\n triggerLabel = 'Choose a date',\n variant = 'filled',\n ...props\n}: DatePickerProps<T>) {\n const validationBehavior = useFieldValidationBehavior();\n return <RACDatePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n <FieldBox floatingLabel={floatingLabel}\n // Always populated, which buys exactly one thing: the outlined\n // notch. The box decides populated twice over — in CSS for the\n // label's type, and in React for the notch, since CSS cannot cut an\n // outline to a width it has no way to measure. React Aria renders a\n // hidden `<input type=\"date\">` carrying no placeholder, so the CSS\n // half reads as populated on its own; the React half reads React\n // Aria's input context, which a picker does not provide. Without\n // this the notch stays shut across segments already showing\n // `mm/dd/yyyy`.\n isPopulated label={label} leading={leadingIcon}\n // In the chrome's trailing slot rather than on the segments' line,\n // which is where Select and ComboBox put their chevron. The slot\n // cancels the box's top padding and stretches to its full height, so\n // it centres the 40dp trigger in the box; on the line the trigger\n // was taller than the row that held it and hung past the underline,\n // and the segments centred on it rather than on their own line.\n //\n // React Aria's `DatePicker` is what gives the trigger its press\n // behaviour, through context, so the slot reaches it as well as the\n // group did.\n trailing={calendarTrigger(triggerLabel)} variant={variant}>\n <FieldValue>\n <RACGroup {...stylex.props(picker.group)}>\n <RACDateInput {...stylex.props(segmentStyles.input)}>\n {renderSegment}\n </RACDateInput>\n </RACGroup>\n </FieldValue>\n </FieldBox>\n <FieldMessage description={description} error={error} />\n <RACPopover\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n <Calendar aria-label={label} />\n </RACDialog>\n </RACPopover>\n </RACDatePicker>;\n}\nexport type { DatePickerProps };\nexport default DatePicker;"],"mappings":"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"}

package/dist/components/date-range-picker/index.js CHANGED Viewed

@@ -13,6 +13,13 @@ import { c } from "react/compiler-runtime";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { Button, DateInput, DateRangePicker, Dialog, Group, Popover } from "react-aria-components";
 //#region src/components/date-range-picker/index.tsx
+function calendarTrigger(triggerLabel) {
+	return /* @__PURE__ */ jsx(Button, {
+		"aria-label": triggerLabel,
+		className: triggerClassName,
+		children: /* @__PURE__ */ jsx(CalendarGlyph, { ...props(picker.triggerGlyph) })
+	});
+}
 /**
 * A date range typed into a field, or picked from a calendar behind a
 * button. The value is React Aria's — pass `value` with `onChange` to
@@ -40,7 +47,7 @@ import { Button, DateInput, DateRangePicker, Dialog, Group, Popover } from "reac
 * which is the element a layout positions.
 */
 function DateRangePicker$1(t0) {
-	const $ = c(39);
+	const $ = c(38);
 	const { container, description, error, floatingLabel: t1, isDisabled: t2, label, leadingIcon, separator: t3, triggerLabel: t4, variant: t5, ...props$1 } = t0;
 	const floatingLabel = t1 === void 0 ? true : t1;
 	const isDisabled = t2 === void 0 ? false : t2;
@@ -57,151 +64,142 @@ function DateRangePicker$1(t0) {
 	} else t6 = $[1];
 	const t7 = mergeStatefulStyles(props(fieldStyles.root), props$1);
 	let t8;
-	if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
-		t8 = props(picker.group);
-		$[2] = t8;
-	} else t8 = $[2];
+	if ($[2] !== triggerLabel) {
+		t8 = calendarTrigger(triggerLabel);
+		$[2] = triggerLabel;
+		$[3] = t8;
+	} else t8 = $[3];
 	let t9;
-	if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
-		t9 = /* @__PURE__ */ jsx(DateInput, {
+	if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+		t9 = props(picker.group);
+		$[4] = t9;
+	} else t9 = $[4];
+	let t10;
+	if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+		t10 = /* @__PURE__ */ jsx(DateInput, {
 			slot: "start",
 			...props(segmentStyles.input),
 			children: renderSegment
 		});
-		$[3] = t9;
-	} else t9 = $[3];
-	let t10;
-	if ($[4] !== separator) {
-		t10 = /* @__PURE__ */ jsx("span", {
+		$[5] = t10;
+	} else t10 = $[5];
+	let t11;
+	if ($[6] !== separator) {
+		t11 = /* @__PURE__ */ jsx("span", {
 			"aria-hidden": "true",
 			className: "x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej",
 			children: separator
 		});
-		$[4] = separator;
-		$[5] = t10;
-	} else t10 = $[5];
-	let t11;
-	if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
-		t11 = /* @__PURE__ */ jsx(DateInput, {
+		$[6] = separator;
+		$[7] = t11;
+	} else t11 = $[7];
+	let t12;
+	if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+		t12 = /* @__PURE__ */ jsx(DateInput, {
 			slot: "end",
 			...props(segmentStyles.input),
 			children: renderSegment
 		});
-		$[6] = t11;
-	} else t11 = $[6];
-	let t12;
-	if ($[7] === Symbol.for("react.memo_cache_sentinel")) {
-		t12 = /* @__PURE__ */ jsx(CalendarGlyph, { ...props(picker.triggerGlyph) });
-		$[7] = t12;
-	} else t12 = $[7];
+		$[8] = t12;
+	} else t12 = $[8];
 	let t13;
-	if ($[8] !== triggerLabel) {
-		t13 = /* @__PURE__ */ jsx(Button, {
-			"aria-label": triggerLabel,
-			className: triggerClassName,
-			children: t12
-		});
-		$[8] = triggerLabel;
-		$[9] = t13;
-	} else t13 = $[9];
-	let t14;
-	if ($[10] !== t10 || $[11] !== t13) {
-		t14 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsxs(Group, {
-			...t8,
+	if ($[9] !== t11) {
+		t13 = /* @__PURE__ */ jsx(FieldValue, { children: /* @__PURE__ */ jsxs(Group, {
+			...t9,
 			children: [
-				t9,
 				t10,
 				t11,
-				t13
+				t12
 			]
 		}) });
-		$[10] = t10;
-		$[11] = t13;
-		$[12] = t14;
-	} else t14 = $[12];
-	let t15;
-	if ($[13] !== floatingLabel || $[14] !== label || $[15] !== leadingIcon || $[16] !== t14 || $[17] !== variant) {
-		t15 = /* @__PURE__ */ jsx(FieldBox, {
+		$[9] = t11;
+		$[10] = t13;
+	} else t13 = $[10];
+	let t14;
+	if ($[11] !== floatingLabel || $[12] !== label || $[13] !== leadingIcon || $[14] !== t13 || $[15] !== t8 || $[16] !== variant) {
+		t14 = /* @__PURE__ */ jsx(FieldBox, {
 			floatingLabel,
 			isPopulated: true,
 			label,
 			leading: leadingIcon,
+			trailing: t8,
 			variant,
-			children: t14
+			children: t13
 		});
-		$[13] = floatingLabel;
-		$[14] = label;
-		$[15] = leadingIcon;
-		$[16] = t14;
-		$[17] = variant;
-		$[18] = t15;
-	} else t15 = $[18];
-	let t16;
-	if ($[19] !== description || $[20] !== error) {
-		t16 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[11] = floatingLabel;
+		$[12] = label;
+		$[13] = leadingIcon;
+		$[14] = t13;
+		$[15] = t8;
+		$[16] = variant;
+		$[17] = t14;
+	} else t14 = $[17];
+	let t15;
+	if ($[18] !== description || $[19] !== error) {
+		t15 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error
 		});
-		$[19] = description;
-		$[20] = error;
+		$[18] = description;
+		$[19] = error;
+		$[20] = t15;
+	} else t15 = $[20];
+	let t16;
+	if ($[21] === Symbol.for("react.memo_cache_sentinel")) {
+		t16 = props(overlay.popup, picker.popover);
 		$[21] = t16;
 	} else t16 = $[21];
 	let t17;
 	if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
-		t17 = props(overlay.popup, picker.popover);
+		t17 = props(overlay.popupDialog, focus.ring);
 		$[22] = t17;
 	} else t17 = $[22];
 	let t18;
-	if ($[23] === Symbol.for("react.memo_cache_sentinel")) {
-		t18 = props(overlay.popupDialog, focus.ring);
-		$[23] = t18;
-	} else t18 = $[23];
-	let t19;
-	if ($[24] !== label) {
-		t19 = /* @__PURE__ */ jsx(Dialog, {
-			...t18,
+	if ($[23] !== label) {
+		t18 = /* @__PURE__ */ jsx(Dialog, {
+			...t17,
 			children: /* @__PURE__ */ jsx(RangeCalendar$1, { "aria-label": label })
 		});
-		$[24] = label;
-		$[25] = t19;
-	} else t19 = $[25];
-	let t20;
-	if ($[26] !== container || $[27] !== t19) {
-		t20 = /* @__PURE__ */ jsx(Popover, {
+		$[23] = label;
+		$[24] = t18;
+	} else t18 = $[24];
+	let t19;
+	if ($[25] !== container || $[26] !== t18) {
+		t19 = /* @__PURE__ */ jsx(Popover, {
 			UNSTABLE_portalContainer: container,
-			...t17,
-			children: t19
+			...t16,
+			children: t18
 		});
-		$[26] = container;
+		$[25] = container;
+		$[26] = t18;
 		$[27] = t19;
-		$[28] = t20;
-	} else t20 = $[28];
-	let t21;
-	if ($[29] !== T0 || $[30] !== isDisabled || $[31] !== props$1 || $[32] !== t15 || $[33] !== t16 || $[34] !== t20 || $[35] !== t6 || $[36] !== t7 || $[37] !== validationBehavior) {
-		t21 = /* @__PURE__ */ jsxs(T0, {
+	} else t19 = $[27];
+	let t20;
+	if ($[28] !== T0 || $[29] !== isDisabled || $[30] !== props$1 || $[31] !== t14 || $[32] !== t15 || $[33] !== t19 || $[34] !== t6 || $[35] !== t7 || $[36] !== validationBehavior) {
+		t20 = /* @__PURE__ */ jsxs(T0, {
 			isDisabled,
 			isInvalid: t6,
 			validationBehavior,
 			...props$1,
 			...t7,
 			children: [
+				t14,
 				t15,
-				t16,
-				t20
+				t19
 			]
 		});
-		$[29] = T0;
-		$[30] = isDisabled;
-		$[31] = props$1;
+		$[28] = T0;
+		$[29] = isDisabled;
+		$[30] = props$1;
+		$[31] = t14;
 		$[32] = t15;
-		$[33] = t16;
-		$[34] = t20;
-		$[35] = t6;
-		$[36] = t7;
-		$[37] = validationBehavior;
-		$[38] = t21;
-	} else t21 = $[38];
-	return t21;
+		$[33] = t19;
+		$[34] = t6;
+		$[35] = t7;
+		$[36] = validationBehavior;
+		$[37] = t20;
+	} else t20 = $[37];
+	return t20;
 }
 //#endregion
 export { DateRangePicker$1 as default };

package/dist/components/date-range-picker/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["ReactNode","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","className","T","container","Element","description","error","floatingLabel","label","leadingIcon","separator","style","triggerLabel","variant","Omit","t0","$","_c","t1","isDisabled","t2","t3","t4","t5","props","undefined","validationBehavior","T0","t6","t7","root","t8","Symbol","for","group","t9","input","t10","t11","t12","triggerGlyph","t13","t14","t15","t16","t17","popup","popover","t18","popupDialog","ring","t19","t20","t21"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the modal\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.` and `modal.`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// The dash is decoration, not content. It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// Both segment groups and the trigger sit in one React Aria `Group`. The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue = DateValue> = {\n /** A function may compute the class from the picker's render state. /\n className?: RACDateRangePickerProps<T>['className'];\n /\n Where to portal the calendar. Defaults to the end of `<body>`, which is\n * right for an app that sets its StyleX theme on `:root`. An app that\n * scopes the theme to a subtree has to point this at an element inside it,\n * or the calendar renders outside the theme and falls back to the tokens'\n * `prefers-color-scheme` default.\n /\n container?: Element;\n /* Supporting text under the field. /\n description?: string;\n /* The message shown instead of the description, which also marks the field invalid. /\n error?: string;\n /\n Whether the label floats into the box's top once the field holds a\n * value, rather than sitting above it.\n * @default true\n /\n floatingLabel?: boolean;\n /* What the field is for. Always rendered; never a placeholder. /\n label: string;\n /* An icon at the box's leading end. /\n leadingIcon?: ReactNode;\n /\n What is drawn between the two segment groups. Decoration — a screen\n * reader is told which group is which by React Aria.\n * @default '–'\n /\n separator?: string;\n /* A function may compute the style from the picker's render state. /\n style?: RACDateRangePickerProps<T>['style'];\n /\n What the button that opens the calendar is called, for a screen reader.\n * @default 'Choose a date range'\n /\n triggerLabel?: string;\n /\n Which of the text fields page's two boxes to draw.\n * @default 'filled'\n /\n variant?: FieldVariant;\n} & Omit<RACDateRangePickerProps<T>, 'children' \| 'className' \| 'style'>;\n\n/\n A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n \n ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n \n <DateRangePicker\n * defaultValue={{\n * end: new CalendarDate(2026, 9, 20),\n * start: new CalendarDate(2026, 9, 15),\n * }}\n * label=\"Label\"\n * />\n * ```\n \n The segments are `DateField`'s and the calendar is `RangeCalendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, the same swap `DatePicker` makes.\n \n The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DateRangePicker<T extends DateValue>({\n container,\n description,\n error,\n floatingLabel = true,\n isDisabled = false,\n label,\n leadingIcon,\n separator = '–',\n triggerLabel = 'Choose a date range',\n variant = 'filled',\n ...props\n}: DateRangePickerProps<T>) {\n const validationBehavior = useFieldValidationBehavior();\n return <RACDateRangePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n <FieldBox floatingLabel={floatingLabel}\n // Always populated, which buys exactly one thing: the outlined\n // notch. The box decides populated twice over — in CSS for the\n // label's type, and in React for the notch, since CSS cannot cut an\n // outline to a width it has no way to measure. React Aria renders a\n // hidden input per segment group, neither carrying a placeholder, so\n // the CSS half reads as populated on its own; the React half reads\n // React Aria's input context, which a picker does not provide.\n // Without this the notch stays shut across segments already showing\n // `mm/dd/yyyy`.\n isPopulated label={label} leading={leadingIcon} variant={variant}>\n <FieldValue>\n <RACGroup {...stylex.props(picker.group)}>\n <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n {renderSegment}\n </RACDateInput>\n <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n {separator}\n </span>\n <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n {renderSegment}\n </RACDateInput>\n <RACButton aria-label={triggerLabel} className={triggerClassName}>\n <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n </RACButton>\n </RACGroup>\n </FieldValue>\n </FieldBox>\n <FieldMessage description={description} error={error} />\n <RACPopover\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n <RangeCalendar aria-label={label} />\n </RACDialog>\n </RACPopover>\n </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["ReactNode","DateValue","DateRangePickerProps","RACDateRangePickerProps","stylex","Button","RACButton","DateInput","RACDateInput","DateRangePicker","RACDateRangePicker","Dialog","RACDialog","Group","RACGroup","Popover","RACPopover","FieldVariant","FieldBox","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","CalendarGlyph","renderSegment","segmentStyles","focus","mergeStatefulStyles","overlay","picker","triggerClassName","colors","typography","RangeCalendar","className","T","container","Element","description","error","floatingLabel","label","leadingIcon","separator","style","triggerLabel","variant","Omit","calendarTrigger","props","triggerGlyph","t0","$","_c","t1","isDisabled","t2","t3","t4","t5","undefined","validationBehavior","T0","t6","t7","root","t8","t9","Symbol","for","group","t10","input","t11","t12","t13","t14","t15","t16","popup","popover","t17","popupDialog","ring","t18","t19","t20"],"sources":["../../../src/components/date-range-picker/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DateValue, DateRangePickerProps as RACDateRangePickerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Button as RACButton, DateInput as RACDateInput, DateRangePicker as RACDateRangePicker, Dialog as RACDialog, Group as RACGroup, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CalendarGlyph } from '../../glyphs';\nimport { renderSegment } from '../../segments';\nimport { segmentStyles } from '../../segments/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport { picker, triggerClassName } from '../../styles/picker';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\nimport RangeCalendar from '../range-calendar';\n\n// `DatePicker` picking two dates rather than one. Every part it draws is\n// already here — the segments from `src/segments`, the trigger and the\n// overlay from `src/styles/picker`, the calendar from `RangeCalendar` — so\n// the two pickers cannot come apart. What a range adds is a second segment\n// group and the dash between them.\n//\n// The date pickers page draws a range as a configuration of the modal\n// picker: a full-screen selector with a header and two text fields, plus a\n// modal date input variant. It carries no docked range picker and no range\n// token of its own — its token set is `docked.` and `modal.`, and neither\n// names a range. So the docked shape here follows the docked single picker,\n// the same choice `RangeCalendar` records for the band it draws.\n//\n// Two things are this component's own.\n//\n// The dash is decoration, not content. It reads as a range to someone\n// looking, and React Aria has already told a screen reader which group is\n// which — every segment is named \"Start Date\" or \"End Date\" — so repeating\n// it aloud would be a third telling. It is `aria-hidden` and takes the muted\n// role, which is what keeps it quieter than the dates either side.\n//\n// Both segment groups and the trigger sit in one React Aria `Group`. The\n// box draws once around all three, so a reader tabs start, end, trigger\n// rather than meeting three controls in a row.\n\ntype DateRangePickerProps<T extends DateValue = DateValue> = {\n /** A function may compute the class from the picker's render state. /\n className?: RACDateRangePickerProps<T>['className'];\n /\n Where to portal the calendar. Defaults to the end of `<body>`, which is\n * right for an app that sets its StyleX theme on `:root`. An app that\n * scopes the theme to a subtree has to point this at an element inside it,\n * or the calendar renders outside the theme and falls back to the tokens'\n * `prefers-color-scheme` default.\n /\n container?: Element;\n /* Supporting text under the field. /\n description?: string;\n /* The message shown instead of the description, which also marks the field invalid. /\n error?: string;\n /\n Whether the label floats into the box's top once the field holds a\n * value, rather than sitting above it.\n * @default true\n /\n floatingLabel?: boolean;\n /* What the field is for. Always rendered; never a placeholder. /\n label: string;\n /* An icon at the box's leading end. /\n leadingIcon?: ReactNode;\n /\n What is drawn between the two segment groups. Decoration — a screen\n * reader is told which group is which by React Aria.\n * @default '–'\n /\n separator?: string;\n /* A function may compute the style from the picker's render state. /\n style?: RACDateRangePickerProps<T>['style'];\n /\n What the button that opens the calendar is called, for a screen reader.\n * @default 'Choose a date range'\n /\n triggerLabel?: string;\n /\n Which of the text fields page's two boxes to draw.\n * @default 'filled'\n /\n variant?: FieldVariant;\n} & Omit<RACDateRangePickerProps<T>, 'children' \| 'className' \| 'style'>;\n\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-jsx-as-prop is after — the same reason Select builds its\n// chevron this way.\nfunction calendarTrigger(triggerLabel: string) {\n return <RACButton aria-label={triggerLabel} className={triggerClassName}>\n <CalendarGlyph {...stylex.props(picker.triggerGlyph)} />\n </RACButton>;\n}\n\n/\n A date range typed into a field, or picked from a calendar behind a\n * button. The value is React Aria's — pass `value` with `onChange` to\n * control it, or `defaultValue` — as a `{ start, end }` pair of\n * `@internationalized/date` values from this package's `./date` subpath.\n \n ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n \n <DateRangePicker\n * defaultValue={{\n * end: new CalendarDate(2026, 9, 20),\n * start: new CalendarDate(2026, 9, 15),\n * }}\n * label=\"Label\"\n * />\n * ```\n \n The segments are `DateField`'s and the calendar is `RangeCalendar`, so\n * `granularity`, `minValue`, `maxValue` and `isDateUnavailable` all behave\n * as they do there. Above the medium breakpoint the calendar is docked to\n * the field; below it, it opens centred, the same swap `DatePicker` makes.\n \n The call site's `className` and `style` land on the picker as a whole,\n * which is the element a layout positions.\n */\nfunction DateRangePicker<T extends DateValue>({\n container,\n description,\n error,\n floatingLabel = true,\n isDisabled = false,\n label,\n leadingIcon,\n separator = '–',\n triggerLabel = 'Choose a date range',\n variant = 'filled',\n ...props\n}: DateRangePickerProps<T>) {\n const validationBehavior = useFieldValidationBehavior();\n return <RACDateRangePicker<T> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n <FieldBox floatingLabel={floatingLabel}\n // Always populated, which buys exactly one thing: the outlined\n // notch. The box decides populated twice over — in CSS for the\n // label's type, and in React for the notch, since CSS cannot cut an\n // outline to a width it has no way to measure. React Aria renders a\n // hidden input per segment group, neither carrying a placeholder, so\n // the CSS half reads as populated on its own; the React half reads\n // React Aria's input context, which a picker does not provide.\n // Without this the notch stays shut across segments already showing\n // `mm/dd/yyyy`.\n isPopulated label={label} leading={leadingIcon}\n // In the chrome's trailing slot rather than on the segments' line —\n // see the same prop on DatePicker for what that slot does and why\n // the trigger still opens from there.\n trailing={calendarTrigger(triggerLabel)} variant={variant}>\n <FieldValue>\n <RACGroup {...stylex.props(picker.group)}>\n <RACDateInput slot=\"start\" {...stylex.props(segmentStyles.input)}>\n {renderSegment}\n </RACDateInput>\n <span aria-hidden=\"true\" className=\"x1w5n3ug x2lah0s x16svsjw x1848etk xh7dzej\">\n {separator}\n </span>\n <RACDateInput slot=\"end\" {...stylex.props(segmentStyles.input)}>\n {renderSegment}\n </RACDateInput>\n </RACGroup>\n </FieldValue>\n </FieldBox>\n <FieldMessage description={description} error={error} />\n <RACPopover\n // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n UNSTABLE_portalContainer={container} {...stylex.props(overlay.popup, picker.popover)}>\n <RACDialog {...stylex.props(overlay.popupDialog, focus.ring)}>\n <RangeCalendar aria-label={label} />\n </RACDialog>\n </RACPopover>\n </RACDateRangePicker>;\n}\nexport type { DateRangePickerProps };\nexport default DateRangePicker;"],"mappings":"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"}

package/dist/components/slider/index.js CHANGED Viewed

@@ -1,12 +1,13 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
-import { spacing } from "../../tokens/design.tokens.stylex.js";
 import { groupStyles } from "../../field/styles.js";
 import { FieldLabel } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Slider, SliderOutput, SliderThumb, SliderTrack } from "react-aria-components";
 //#region src/components/slider/index.tsx
+const HANDLE_GAP = "6px";
+const HANDLE_WIDTH = "4px";
 const styles = {
 	active: {
 		kWkggS: "xnety89",
@@ -133,7 +134,7 @@ const placements = {
 	}]
 };
 function clearOf(percent, fromEnd) {
-	return `calc(${fromEnd ? 100 - percent : percent}% + ${spacing.sm})`;
+	return `calc(${fromEnd ? 100 - percent : percent}% + ${HANDLE_GAP} + ${HANDLE_WIDTH} / 2)`;
 }
 /**
 * A slider for one value, or for a range when the value is a pair. The value

package/dist/components/slider/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["SliderProps","RACSliderProps","SliderThumbRenderProps","SliderTrackRenderProps","stylex","Slider","RACSlider","SliderOutput","SliderThumb","SliderTrack","FieldLabel","groupStyles","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","styles","active","kWkggS","$$css","activeDisabled","inactiveDisabled","innerBlockEnd","kT0f0o","kVL7Gh","innerBlockStart","kfmiAY","krdFHd","innerInlineEnd","innerInlineStart","root","kzqmXN","rootVertical","kGNEyG","kZKoxP","segment","kaIpWk","kB7OPa","k87sOh","kVAEAm","segmentVertical","kLqNvP","thumb","kkrTdU","kjBf7l","kInvED","k3XXqK","kMeerF","kIyJzY","k1ekBW","kAMwcw","thumbActive","thumbActiveVertical","thumbDisabled","thumbDragging","thumbFocused","thumbVertical","_temp","krVfgx","placements","block","start","end","val","undefined","inline","kt4wiu","Omit","label","orientation","thumbLabels","clearOf","percent","fromEnd","along","sm","t0","$","_c","T0","t1","t2","t3","vertical","t4","t5","t6","props","state","0","className","2","1","3","isDisabled","trackContent","t7","t8","thumbContent","index","isDragging","isFocusVisible","getThumbValueLabel","thumbStyles","percents","values","map","_","getThumbPercent","first","last","at","range","length","place","innerStart","innerEnd"],"sources":["../../../src/components/slider/index.tsx"],"sourcesContent":["import type { SliderProps as RACSliderProps, SliderThumbRenderProps, SliderTrackRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Slider as RACSlider, SliderOutput, SliderThumb, SliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { groupStyles } from '../../field/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page, at the size its tokens call extra-small: a 16dp track\n// with an 8dp corner, the active part in primary and the inactive part in\n// secondary container, a 4dp stop in on secondary container 6dp from the\n// inactive end, and a handle 4dp wide and 44dp tall in primary that narrows\n// to 2dp while pressed or focused. The track parts on each side of the\n// handle, with 6dp of space between them and it, and their corners\n// against the handle are 2dp where their outer ends are full. Disabled, the\n// active part and the handle are on surface at the disabled content opacity\n// and the inactive part at the disabled container opacity.\n//\n// The value indicator is the page's label: inverse surface under label-large\n// in inverse on surface, 44dp tall and at least 48dp wide, 12dp above the\n// handle. It shows while the handle is dragged or has keyboard focus, and it\n// is React Aria's `SliderOutput`, so what it shows is what the slider\n// announces.\n//\n// React Aria's `Slider` is the root, `SliderTrack` the strip the handles are\n// placed along by percent, and `SliderThumb` each handle around a visually\n// hidden range input. The track's parts are drawn here from those percents\n// rather than with `SliderFill`, since the page's parts stop short of the\n// handle on both sides and the fill runs up to it. A range slider is the\n// same track with two handles and the active part between them.\n//\n// Vertical, the same parts run along the block axis, with the active part\n// rising from the bottom and the indicator to the start side of the handle.\nconst styles = {\n active: {\n kWkggS: \"xnety89\",\n $$css: true\n },\n activeDisabled: {\n kWkggS: \"x1crcgwy\",\n $$css: true\n },\n inactiveDisabled: {\n kWkggS: \"x19v6zzp\",\n $$css: true\n },\n innerBlockEnd: {\n kT0f0o: \"x1ui04y5\",\n kVL7Gh: \"x6en5u8\",\n $$css: true\n },\n innerBlockStart: {\n kfmiAY: \"x1e4oeot\",\n krdFHd: \"xr9e8f9\",\n $$css: true\n },\n innerInlineEnd: {\n kT0f0o: \"x1ui04y5\",\n kfmiAY: \"x1e4oeot\",\n $$css: true\n },\n innerInlineStart: {\n kVL7Gh: \"x6en5u8\",\n krdFHd: \"xr9e8f9\",\n $$css: true\n },\n root: {\n kzqmXN: \"xh8yej3\",\n $$css: true\n },\n rootVertical: {\n kGNEyG: \"x1cy8zhl\",\n kZKoxP: \"x1u5z0ei\",\n kzqmXN: \"x14atkfc\",\n $$css: true\n },\n segment: {\n kWkggS: \"x15dekr4\",\n kZKoxP: \"xlup9mm\",\n kaIpWk: \"x1xdvaa9\",\n kB7OPa: \"x9f619\",\n k87sOh: \"xuivejd\",\n kVAEAm: \"x10l6tqk\",\n $$css: true\n },\n segmentVertical: {\n kZKoxP: \"xt7dq6l\",\n kzqmXN: \"x1kky2od\",\n k87sOh: \"x80663w\",\n kLqNvP: \"x9p6ekw\",\n $$css: true\n },\n thumb: {\n kWkggS: \"xnety89\",\n kZKoxP: \"xn3w4p2\",\n kaIpWk: \"x3y1ksm\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1jm3nie\",\n kzqmXN: \"x51ohtg\",\n k87sOh: \"xwa60dl\",\n kjBf7l: \"xrgy624\",\n kInvED: \"x1hl8ikr\",\n k3XXqK: \"x1t137rt\",\n kMeerF: \"x1de99jn\",\n kIyJzY: \"x1qno0dh\",\n k1ekBW: \"xdl150w\",\n kAMwcw: \"xpc4ca7\",\n $$css: true\n },\n thumbActive: {\n kzqmXN: \"xfo62xy\",\n $$css: true\n },\n thumbActiveVertical: {\n kZKoxP: \"x36qwtl\",\n kzqmXN: \"x187nhsf\",\n $$css: true\n },\n thumbDisabled: {\n kWkggS: \"x1crcgwy\",\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n thumbDragging: {\n kkrTdU: \"xi9pz9s\",\n $$css: true\n },\n thumbFocused: {\n k3XXqK: \"xaatb59\",\n $$css: true\n },\n thumbVertical: {\n kZKoxP: \"xqu0tyb\",\n kzqmXN: \"x187nhsf\",\n k87sOh: \"x80663w\",\n kLqNvP: \"xbudbmw\",\n $$css: true\n }\n};\n\n// Where each part of the track starts and ends, as insets from the track's\n// two ends: a percent of the way along, plus the 6dp of space and half the\n// handle's 4dp that keep it clear of the handle. Dynamic styles, since the\n// percents come from the value at render time and StyleX compiles its\n// classes ahead of time; each writes its insets to custom properties inline.\nconst _temp = {\n krVfgx: \"xiicpxy\",\n k87sOh: \"x5mnzd7\",\n \"$$css\": true\n};\nconst placements = {\n block: (start: string, end: string) => [_temp, {\n \"--x-insetBlockEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start),\n \"--x-insetBlockStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end)\n }],\n inline: (start: string, end: string) => [{\n kt4wiu: end != null ? \"xqxgn94\" : end,\n kLqNvP: start != null ? \"x1lxsm33\" : start,\n $$css: true\n }, {\n \"--x-insetInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n }]\n};\ntype SliderProps = Omit<RACSliderProps, 'children' \| 'orientation'> & {\n /*\n What the slider sets. A slider that a row labels some other way leaves\n * it out and passes `aria-label` instead.\n /\n label?: string;\n /\n Along which axis the handle moves. A vertical slider is 240px tall until\n * `style` on the root says otherwise.\n * @default 'horizontal'\n /\n orientation?: 'horizontal' \| 'vertical';\n /\n A name for each handle of a range slider, in order, since two handles\n * named by the same label cannot be told apart.\n /\n thumbLabels?: string[];\n};\n\n// The inset of a part's end from the track's end, clear of the handle at\n// `percent` of the way along. `spacing.sm` is the 6dp of space plus half the\n// handle's 4dp, which is what the page measures between the two.\nfunction clearOf(percent: number, fromEnd: boolean) {\n const along = fromEnd ? 100 - percent : percent;\n return `calc(${along}% + ${spacing.sm})`;\n}\n\n/\n A slider for one value, or for a range when the value is a pair. The value\n * is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own, with `minValue`, `maxValue` and\n * `step` to shape it and `formatOptions` to say how it reads. Arrow keys\n * move a handle by a step, Page Up and Page Down by ten, Home and End to\n * the ends.\n \n The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions and the one that gives a vertical\n * slider its height.\n /\nfunction Slider({\n label,\n orientation = 'horizontal',\n thumbLabels,\n ...props\n}: SliderProps) {\n const vertical = orientation === 'vertical';\n return <RACSlider orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(groupStyles.root, styles.root, vertical && styles.rootVertical), props)}>\n {label === undefined ? null : <FieldLabel variant=\"group\">{label}</FieldLabel>}\n <SliderTrack {...mergeStatefulStyles((state: SliderTrackRenderProps) => ({\n 0: {\n className: \"xn3w4p2 x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n },\n 2: {\n className: \"x9f619 x1ypdohk x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j\"\n },\n 1: {\n className: \"xn3w4p2 x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n },\n 3: {\n className: \"x9f619 x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j x1h6gzvc\"\n }\n })[!!vertical << 1 \| !!state.isDisabled << 0], {})}>\n {trackContent(vertical, thumbLabels)}\n </SliderTrack>\n </RACSlider>;\n}\n\n// What a handle draws: its value while it is dragged or has keyboard focus.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction thumbContent(index: number, vertical: boolean) {\n return (state: SliderThumbRenderProps) => state.isDragging \|\| state.isFocusVisible ? <SliderOutput {...{\n 0: {\n className: \"x6s0dn4 x1c5gpgi xn3w4p2 x3y1ksm x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo x3mk9i xbudbmw xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuuh30 xuxw1ft\"\n },\n 1: {\n className: \"x6s0dn4 x1c5gpgi xn3w4p2 x3y1ksm x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuxw1ft xdd4er5 xwa60dl x15zsqls xhi6v0a x1cb1t30\"\n }\n }[!!vertical << 0]}>\n {state.state.getThumbValueLabel(index)}\n </SliderOutput> : null;\n}\nfunction thumbStyles(vertical: boolean) {\n return (state: SliderThumbRenderProps) => stylex.props(styles.thumb, vertical && styles.thumbVertical, (state.isDragging \|\| state.isFocusVisible) && (vertical ? styles.thumbActiveVertical : styles.thumbActive), state.isDragging && styles.thumbDragging, state.isFocusVisible && styles.thumbFocused, state.isDisabled && styles.thumbDisabled);\n}\n\n// The track's parts and handles, from the slider's state: an inactive part\n// before the first handle of a range, the active part up to or between the\n// handles, and the inactive part after the last one carrying the stop.\nfunction trackContent(vertical: boolean, thumbLabels: string[] \| undefined) {\n return ({\n isDisabled,\n state\n }: SliderTrackRenderProps) => {\n const percents = state.values.map((_, index) => state.getThumbPercent(index) 100);\n const first = percents[0] ?? 0;\n const last = percents.at(-1) ?? 0;\n const range = percents.length > 1;\n const place = vertical ? placements.block : placements.inline;\n const innerStart = vertical ? styles.innerBlockStart : styles.innerInlineStart;\n const innerEnd = vertical ? styles.innerBlockEnd : styles.innerInlineEnd;\n return <>\n {range ? <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerEnd, place('0px', clearOf(first, true)))} /> : null}\n <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, styles.active, isDisabled && styles.activeDisabled, range && innerStart, innerEnd, place(range ? clearOf(first, false) : '0px', clearOf(last, true)))} />\n <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerStart, place(clearOf(last, false), '0px'))}>\n <span {...{\n 0: {\n className: \"x81krv7 xqu0tyb x3y1ksm x51ohtg x1atx4j1 x1f889gz x10l6tqk\"\n },\n 2: {\n className: \"x81krv7 xqu0tyb x3y1ksm x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3\"\n },\n 1: {\n className: \"xqu0tyb x3y1ksm x51ohtg x1atx4j1 x1f889gz x10l6tqk x1crcgwy\"\n },\n 3: {\n className: \"xqu0tyb x3y1ksm x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3 x1crcgwy\"\n }\n }[!!vertical << 1 \| !!isDisabled << 0]} />\n </span>\n {percents.map((_, index) => <SliderThumb aria-label={thumbLabels?.[index]} index={index}\n // oxlint-disable-next-line react/no-array-index-key -- a handle's position is its identity\n key={index} {...mergeStatefulStyles(thumbStyles(vertical), {})}>\n {thumbContent(index, vertical)}\n </SliderThumb>)}\n </>;\n };\n}\nexport type { SliderProps };\nexport default Slider;"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["SliderProps","RACSliderProps","SliderThumbRenderProps","SliderTrackRenderProps","stylex","Slider","RACSlider","SliderOutput","SliderThumb","SliderTrack","FieldLabel","groupStyles","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","HANDLE_GAP","HANDLE_WIDTH","styles","active","kWkggS","$$css","activeDisabled","inactiveDisabled","innerBlockEnd","kT0f0o","kVL7Gh","innerBlockStart","kfmiAY","krdFHd","innerInlineEnd","innerInlineStart","root","kzqmXN","rootVertical","kGNEyG","kZKoxP","segment","kaIpWk","kB7OPa","k87sOh","kVAEAm","segmentVertical","kLqNvP","thumb","kkrTdU","kjBf7l","kInvED","k3XXqK","kMeerF","kIyJzY","k1ekBW","kAMwcw","thumbActive","thumbActiveVertical","thumbDisabled","thumbDragging","thumbFocused","thumbVertical","_temp","krVfgx","placements","block","start","end","val","undefined","inline","kt4wiu","Omit","label","orientation","thumbLabels","clearOf","percent","fromEnd","along","t0","$","_c","T0","t1","t2","t3","vertical","t4","t5","t6","props","state","0","className","2","1","3","isDisabled","trackContent","t7","t8","thumbContent","index","isDragging","isFocusVisible","getThumbValueLabel","thumbStyles","percents","values","map","_","getThumbPercent","first","last","at","range","length","place","innerStart","innerEnd"],"sources":["../../../src/components/slider/index.tsx"],"sourcesContent":["import type { SliderProps as RACSliderProps, SliderThumbRenderProps, SliderTrackRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Slider as RACSlider, SliderOutput, SliderThumb, SliderTrack } from 'react-aria-components';\nimport { FieldLabel } from '../../field';\nimport { groupStyles } from '../../field/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The sliders page, at the size its tokens call extra-small: a 16dp track\n// with an 8dp corner, the active part in primary and the inactive part in\n// secondary container, a 4dp stop in on secondary container 6dp from the\n// inactive end, and a handle 4dp wide and 44dp tall in primary that narrows\n// to 2dp while pressed or focused. The track parts on each side of the\n// handle, with 6dp of space between them and it, and their corners\n// against the handle are 2dp where their outer ends are full. Disabled, the\n// active part and the handle are on surface at the disabled content opacity\n// and the inactive part at the disabled container opacity.\n//\n// The value indicator is the page's label: inverse surface under label-large\n// in inverse on surface, 44dp tall and at least 48dp wide, 12dp above the\n// handle. It shows while the handle is dragged or has keyboard focus, and it\n// is React Aria's `SliderOutput`, so what it shows is what the slider\n// announces.\n//\n// React Aria's `Slider` is the root, `SliderTrack` the strip the handles are\n// placed along by percent, and `SliderThumb` each handle around a visually\n// hidden range input. The track's parts are drawn here from those percents\n// rather than with `SliderFill`, since the page's parts stop short of the\n// handle on both sides and the fill runs up to it. A range slider is the\n// same track with two handles and the active part between them.\n//\n// Vertical, the same parts run along the block axis, with the active part\n// rising from the bottom and the indicator to the start side of the handle.\n// The sliders page's own measurements, which are constants of the component\n// rather than steps of the consumer's spacing scale. `clearOf` below read the\n// gap off `spacing.sm` — true at its default 8, since 6 plus half the handle\n// comes to the same — so a theme moving that step opened the gap beside the\n// handle while the stop, written as the literal it is, stayed where the page\n// puts it.\nconst HANDLE_GAP = '6px';\nconst HANDLE_WIDTH = '4px';\nconst styles = {\n active: {\n kWkggS: \"xnety89\",\n $$css: true\n },\n activeDisabled: {\n kWkggS: \"x1crcgwy\",\n $$css: true\n },\n inactiveDisabled: {\n kWkggS: \"x19v6zzp\",\n $$css: true\n },\n innerBlockEnd: {\n kT0f0o: \"x1ui04y5\",\n kVL7Gh: \"x6en5u8\",\n $$css: true\n },\n innerBlockStart: {\n kfmiAY: \"x1e4oeot\",\n krdFHd: \"xr9e8f9\",\n $$css: true\n },\n innerInlineEnd: {\n kT0f0o: \"x1ui04y5\",\n kfmiAY: \"x1e4oeot\",\n $$css: true\n },\n innerInlineStart: {\n kVL7Gh: \"x6en5u8\",\n krdFHd: \"xr9e8f9\",\n $$css: true\n },\n root: {\n kzqmXN: \"xh8yej3\",\n $$css: true\n },\n rootVertical: {\n kGNEyG: \"x1cy8zhl\",\n kZKoxP: \"x1u5z0ei\",\n kzqmXN: \"x14atkfc\",\n $$css: true\n },\n segment: {\n kWkggS: \"x15dekr4\",\n kZKoxP: \"xlup9mm\",\n kaIpWk: \"x1xdvaa9\",\n kB7OPa: \"x9f619\",\n k87sOh: \"xuivejd\",\n kVAEAm: \"x10l6tqk\",\n $$css: true\n },\n segmentVertical: {\n kZKoxP: \"xt7dq6l\",\n kzqmXN: \"x1kky2od\",\n k87sOh: \"x80663w\",\n kLqNvP: \"x9p6ekw\",\n $$css: true\n },\n thumb: {\n kWkggS: \"xnety89\",\n kZKoxP: \"xn3w4p2\",\n kaIpWk: \"x3y1ksm\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1jm3nie\",\n kzqmXN: \"x51ohtg\",\n k87sOh: \"xwa60dl\",\n kjBf7l: \"xrgy624\",\n kInvED: \"x1hl8ikr\",\n k3XXqK: \"x1t137rt\",\n kMeerF: \"x1de99jn\",\n kIyJzY: \"x1qno0dh\",\n k1ekBW: \"xdl150w\",\n kAMwcw: \"xpc4ca7\",\n $$css: true\n },\n thumbActive: {\n kzqmXN: \"xfo62xy\",\n $$css: true\n },\n thumbActiveVertical: {\n kZKoxP: \"x36qwtl\",\n kzqmXN: \"x187nhsf\",\n $$css: true\n },\n thumbDisabled: {\n kWkggS: \"x1crcgwy\",\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n thumbDragging: {\n kkrTdU: \"xi9pz9s\",\n $$css: true\n },\n thumbFocused: {\n k3XXqK: \"xaatb59\",\n $$css: true\n },\n thumbVertical: {\n kZKoxP: \"xqu0tyb\",\n kzqmXN: \"x187nhsf\",\n k87sOh: \"x80663w\",\n kLqNvP: \"xbudbmw\",\n $$css: true\n }\n};\n\n// Where each part of the track starts and ends, as insets from the track's\n// two ends: a percent of the way along, plus the 6dp of space and half the\n// handle's 4dp that keep it clear of the handle. Dynamic styles, since the\n// percents come from the value at render time and StyleX compiles its\n// classes ahead of time; each writes its insets to custom properties inline.\nconst _temp = {\n krVfgx: \"xiicpxy\",\n k87sOh: \"x5mnzd7\",\n \"$$css\": true\n};\nconst placements = {\n block: (start: string, end: string) => [_temp, {\n \"--x-insetBlockEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start),\n \"--x-insetBlockStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end)\n }],\n inline: (start: string, end: string) => [{\n kt4wiu: end != null ? \"xqxgn94\" : end,\n kLqNvP: start != null ? \"x1lxsm33\" : start,\n $$css: true\n }, {\n \"--x-insetInlineEnd\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(end),\n \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(start)\n }]\n};\ntype SliderProps = Omit<RACSliderProps, 'children' \| 'orientation'> & {\n /*\n What the slider sets. A slider that a row labels some other way leaves\n * it out and passes `aria-label` instead.\n /\n label?: string;\n /\n Along which axis the handle moves. A vertical slider is 240px tall until\n * `style` on the root says otherwise.\n * @default 'horizontal'\n /\n orientation?: 'horizontal' \| 'vertical';\n /\n A name for each handle of a range slider, in order, since two handles\n * named by the same label cannot be told apart.\n /\n thumbLabels?: string[];\n};\n\n// The inset of a part's end from the track's end, clear of the handle at\n// `percent` of the way along. The percentage lands on the handle's centre,\n// so half the handle's width joins the page's gap to reach its edge.\nfunction clearOf(percent: number, fromEnd: boolean) {\n const along = fromEnd ? 100 - percent : percent;\n return `calc(${along}% + ${HANDLE_GAP} + ${HANDLE_WIDTH} / 2)`;\n}\n\n/\n A slider for one value, or for a range when the value is a pair. The value\n * is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own, with `minValue`, `maxValue` and\n * `step` to shape it and `formatOptions` to say how it reads. Arrow keys\n * move a handle by a step, Page Up and Page Down by ten, Home and End to\n * the ends.\n \n The call site's `className` and `style` land on the slider as a whole,\n * which is the element a layout positions and the one that gives a vertical\n * slider its height.\n /\nfunction Slider({\n label,\n orientation = 'horizontal',\n thumbLabels,\n ...props\n}: SliderProps) {\n const vertical = orientation === 'vertical';\n return <RACSlider orientation={orientation} {...props} {...mergeStatefulStyles(stylex.props(groupStyles.root, styles.root, vertical && styles.rootVertical), props)}>\n {label === undefined ? null : <FieldLabel variant=\"group\">{label}</FieldLabel>}\n <SliderTrack {...mergeStatefulStyles((state: SliderTrackRenderProps) => ({\n 0: {\n className: \"xn3w4p2 x9f619 x1ypdohk xh8yej3 x1n2onr6\"\n },\n 2: {\n className: \"x9f619 x1ypdohk x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j\"\n },\n 1: {\n className: \"xn3w4p2 x9f619 xh8yej3 x1n2onr6 x1h6gzvc\"\n },\n 3: {\n className: \"x9f619 x1n2onr6 x5yr21d x1iyjqo2 x187nhsf x2lwn1j x1h6gzvc\"\n }\n })[!!vertical << 1 \| !!state.isDisabled << 0], {})}>\n {trackContent(vertical, thumbLabels)}\n </SliderTrack>\n </RACSlider>;\n}\n\n// What a handle draws: its value while it is dragged or has keyboard focus.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction thumbContent(index: number, vertical: boolean) {\n return (state: SliderThumbRenderProps) => state.isDragging \|\| state.isFocusVisible ? <SliderOutput {...{\n 0: {\n className: \"x6s0dn4 x1c5gpgi xn3w4p2 x3y1ksm x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo x3mk9i xbudbmw xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuuh30 xuxw1ft\"\n },\n 1: {\n className: \"x6s0dn4 x1c5gpgi xn3w4p2 x3y1ksm x9f619 x1girmi0 x78zum5 xkknnkr x14zspaw x1v9cpvo xl56j7k x155f00i x1lz68p4 x900493 x18fpw6u x10l6tqk xuxw1ft xdd4er5 xwa60dl x15zsqls xhi6v0a x1cb1t30\"\n }\n }[!!vertical << 0]}>\n {state.state.getThumbValueLabel(index)}\n </SliderOutput> : null;\n}\nfunction thumbStyles(vertical: boolean) {\n return (state: SliderThumbRenderProps) => stylex.props(styles.thumb, vertical && styles.thumbVertical, (state.isDragging \|\| state.isFocusVisible) && (vertical ? styles.thumbActiveVertical : styles.thumbActive), state.isDragging && styles.thumbDragging, state.isFocusVisible && styles.thumbFocused, state.isDisabled && styles.thumbDisabled);\n}\n\n// The track's parts and handles, from the slider's state: an inactive part\n// before the first handle of a range, the active part up to or between the\n// handles, and the inactive part after the last one carrying the stop.\nfunction trackContent(vertical: boolean, thumbLabels: string[] \| undefined) {\n return ({\n isDisabled,\n state\n }: SliderTrackRenderProps) => {\n const percents = state.values.map((_, index) => state.getThumbPercent(index) 100);\n const first = percents[0] ?? 0;\n const last = percents.at(-1) ?? 0;\n const range = percents.length > 1;\n const place = vertical ? placements.block : placements.inline;\n const innerStart = vertical ? styles.innerBlockStart : styles.innerInlineStart;\n const innerEnd = vertical ? styles.innerBlockEnd : styles.innerInlineEnd;\n return <>\n {range ? <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerEnd, place('0px', clearOf(first, true)))} /> : null}\n <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, styles.active, isDisabled && styles.activeDisabled, range && innerStart, innerEnd, place(range ? clearOf(first, false) : '0px', clearOf(last, true)))} />\n <span {...stylex.props(styles.segment, vertical && styles.segmentVertical, isDisabled && styles.inactiveDisabled, innerStart, place(clearOf(last, false), '0px'))}>\n <span {...{\n 0: {\n className: \"x81krv7 xqu0tyb x3y1ksm x51ohtg x1atx4j1 x1f889gz x10l6tqk\"\n },\n 2: {\n className: \"x81krv7 xqu0tyb x3y1ksm x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3\"\n },\n 1: {\n className: \"xqu0tyb x3y1ksm x51ohtg x1atx4j1 x1f889gz x10l6tqk x1crcgwy\"\n },\n 3: {\n className: \"xqu0tyb x3y1ksm x51ohtg x10l6tqk x1atx4j1 x1woyocn xrr41r3 x1crcgwy\"\n }\n }[!!vertical << 1 \| !!isDisabled << 0]} />\n </span>\n {percents.map((_, index) => <SliderThumb aria-label={thumbLabels?.[index]} index={index}\n // oxlint-disable-next-line react/no-array-index-key -- a handle's position is its identity\n key={index} {...mergeStatefulStyles(thumbStyles(vertical), {})}>\n {thumbContent(index, vertical)}\n </SliderThumb>)}\n </>;\n };\n}\nexport type { SliderProps };\nexport default Slider;"],"mappings":"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"}

package/dist/components/token-field/index.js CHANGED Viewed

@@ -115,8 +115,8 @@ function TokenField$1(t0) {
 	let t5;
 	if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
 		t5 = {
-			0: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt xqf7pud x126k92a" },
-			1: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt xqf7pud x126k92a xwuztrq" }
+			0: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a" },
+			1: { className: "x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi" }
 		};
 		$[16] = t5;
 	} else t5 = $[16];

package/dist/components/token-field/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["ReactNode","TokenFieldProps","RACTokenFieldProps","TokenInputProps","RACTokenInputProps","stylex","Token","RACToken","TokenField","RACTokenField","TokenInput","RACTokenInput","TokenFieldValue","FieldVariant","chipStyles","FieldBox","FieldMessage","fieldStyles","invalidFrom","focus","mergeStatefulStyles","colors","spacing","typography","styles","token","kfSwDN","kXLuUW","$$css","className","T","description","error","floatingLabel","label","leadingIcon","renderToken","segment","TokenSegment","style","trailingIcon","variant","Omit","Parameters","isPopulated","value","undefined","segments","some","text","length","tokenContent","props","base","ring","unselected","t0","$","_c","T0","populated","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","defaultValue","root","isDisabled","Symbol","for","0","1"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TokenFieldProps as RACTokenFieldProps, TokenInputProps as RACTokenInputProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Token as RACToken, TokenField as RACTokenField, TokenInput as RACTokenInput, TokenFieldValue } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldBox, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom } from '../../field/root';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's input chips inside a text field: a field whose value is\n// text with pills in it — a tag input, a mention field, a structured search\n// box. The box, label, supporting line and error are the field chrome in\n// `src/field`, shared with every other field; the pill is the chip module's\n// in `src/chip`, shared with Chip and ChipGroup. What is here is React Aria's\n// `TokenField` around them.\n//\n// The value is React Aria's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and this component does not wrap it. What\n// counts as a token is the whole question a token field exists to answer — a\n// hash tag, an @ mention, a chosen contact — and a wrapper would be a second\n// place to decide it. The class is re-exported from the package so a call\n// site can subclass it and override `tokenize`.\n//\n// Three things are worth knowing.\n//\n// The editable area is not an input. React Aria draws a contenteditable\n// element, since a token cannot live inside an `<input>`. So the box is drawn\n// `multiline` and grows with what it holds, and the chrome is told whether it\n// is populated rather than reading an input's value — a token field is the\n// third control the chrome cannot ask, after a select and a picker.\n//\n// The box's whole height is the editable area. A press anywhere in the\n// box has to put the caret in the text, so the box is not covered by a press\n// target the way Select's is; React Aria's own element fills the control's\n// place and takes the press.\n//\n// A token is drawn by the call site, or by this. `renderToken` takes a\n// segment and returns what the pill holds; without it the pill holds the\n// segment's own text. Either way the pill is the page's, so a token here and\n// a chip elsewhere cannot drift.\n\nconst styles = {\n token: {\n kfSwDN: \"x87ps6o\",\n kXLuUW: \"xxymvpz\",\n $$css: true\n }\n};\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = {\n /** A function may compute the class from the field's render state. /\n className?: RACTokenFieldProps<T>['className'];\n /\n A hint shown under the field. Replaced by `error` when there is one, so\n * the two never stack.\n /\n description?: string;\n /\n The problem with the current value, in words. Its presence is what puts\n * the field in its error state — the message and the red underline both\n * follow from it.\n /\n error?: string;\n /\n Whether the label sits in the empty box and floats to the top once the\n * field is focused or holds something. `false` keeps it small at the top in\n * every state.\n * @default true\n /\n floatingLabel?: boolean;\n /\n What the field is for. Required rather than optional: a field with no\n * label is a box a screen reader cannot name.\n /\n label: string;\n /\n An icon at the start of the box, before the label and the value: the\n * page's 24dp leading icon, in the muted role.\n /\n leadingIcon?: ReactNode;\n /\n What each token holds. Given a segment, return what to draw inside its\n * pill; without it the pill holds the segment's own text.\n /\n renderToken?: (segment: TokenSegment) => ReactNode;\n /* A function may compute the style from the field's render state. /\n style?: RACTokenFieldProps<T>['style'];\n /\n An icon at the end of the box, after the value: the page's 24dp trailing\n * icon, in the muted role and the error role once the field has an error.\n /\n trailingIcon?: ReactNode;\n /\n The filled box, or the outlined one, as the text fields page draws them.\n * @default 'filled'\n /\n variant?: FieldVariant;\n} & Omit<RACTokenFieldProps<T>, 'children' \| 'className' \| 'style'>;\n\n// One token, as React Aria hands it to the editable area's render function.\n// Taken from that prop rather than imported, since the type lives in\n// `react-stately`, which this package does not depend on directly.\ntype TokenSegment = Parameters<RACTokenInputProps['children']>[0];\n\n// Whether the field holds anything, for the floating label. A token field's\n// editable area is a contenteditable element rather than an input, so the\n// chrome cannot read a value off it and is told instead.\nfunction isPopulated(value: TokenFieldValue \| undefined) {\n if (value === undefined) {\n return undefined;\n }\n return value.segments.some(segment => segment.text.length > 0);\n}\n\n// What each token draws. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction tokenContent(renderToken: TokenFieldProps['renderToken']) {\n return (segment: TokenSegment) => <RACToken {...stylex.props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token)}>\n {renderToken === undefined ? segment.text : renderToken(segment)}\n </RACToken>;\n}\n\n/\n A labelled field whose value is text with inline tokens — a tag input, a\n * mention field, a structured search box. Its value is React Aria's\n * `TokenFieldValue`: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own.\n \n ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n \n <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n \n What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which the package re-exports for that. `renderToken`\n * decides what each pill holds; without it, the segment's own text.\n \n The box, label, supporting line and error are the field chrome in\n * `src/field`, and the pill is the chip module's, shared with Chip and\n * ChipGroup.\n \n The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction TokenField<T extends TokenFieldValue = TokenFieldValue>({\n description,\n error,\n floatingLabel = true,\n label,\n leadingIcon,\n renderToken,\n trailingIcon,\n variant = 'filled',\n ...props\n}: TokenFieldProps<T>) {\n const populated = isPopulated(props.value ?? props.defaultValue);\n return <RACTokenField<T> {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n <FieldBox floatingLabel={floatingLabel}\n // React Aria's `TextField` hands its group the field's disabled and\n // invalid state through context; its `TokenField` does not, so the\n // box is told outright or its label and its underline never turn.\n isDisabled={props.isDisabled} isInvalid={invalidFrom(error)} isPopulated={populated} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n <RACTokenInput<T> {...{\n 0: {\n className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt xqf7pud x126k92a\"\n },\n 1: {\n className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt xqf7pud x126k92a xwuztrq\"\n }\n }[!!(variant === 'filled') << 0]}>\n {tokenContent(renderToken)}\n </RACTokenInput>\n </FieldBox>\n <FieldMessage description={description} error={error} />\n </RACTokenField>;\n}\nexport type { TokenFieldProps, TokenSegment };\nexport default TokenField;"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["ReactNode","TokenFieldProps","RACTokenFieldProps","TokenInputProps","RACTokenInputProps","stylex","Token","RACToken","TokenField","RACTokenField","TokenInput","RACTokenInput","TokenFieldValue","FieldVariant","chipStyles","FieldBox","FieldMessage","fieldStyles","invalidFrom","focus","mergeStatefulStyles","colors","typography","TOKEN_LINE","styles","token","kfSwDN","kXLuUW","$$css","className","T","description","error","floatingLabel","label","leadingIcon","renderToken","segment","TokenSegment","style","trailingIcon","variant","Omit","Parameters","isPopulated","value","undefined","segments","some","text","length","tokenContent","props","base","ring","unselected","t0","$","_c","T0","populated","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","defaultValue","root","isDisabled","Symbol","for","0","1"],"sources":["../../../src/components/token-field/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { TokenFieldProps as RACTokenFieldProps, TokenInputProps as RACTokenInputProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Token as RACToken, TokenField as RACTokenField, TokenInput as RACTokenInput, TokenFieldValue } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { chipStyles } from '../../chip/styles';\nimport { FieldBox, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom } from '../../field/root';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, typography } from '../../tokens/design.tokens.stylex';\n\n// The chips page's input chips inside a text field: a field whose value is\n// text with pills in it — a tag input, a mention field, a structured search\n// box. The box, label, supporting line and error are the field chrome in\n// `src/field`, shared with every other field; the pill is the chip module's\n// in `src/chip`, shared with Chip and ChipGroup. What is here is React Aria's\n// `TokenField` around them.\n//\n// The value is React Aria's `TokenFieldValue`, a list of text and token\n// segments rather than a string, and this component does not wrap it. What\n// counts as a token is the whole question a token field exists to answer — a\n// hash tag, an @ mention, a chosen contact — and a wrapper would be a second\n// place to decide it. The class is re-exported from the package so a call\n// site can subclass it and override `tokenize`.\n//\n// Three things are worth knowing.\n//\n// The editable area is not an input. React Aria draws a contenteditable\n// element, since a token cannot live inside an `<input>`. So the box is drawn\n// `multiline` and grows with what it holds, and the chrome is told whether it\n// is populated rather than reading an input's value — a token field is the\n// third control the chrome cannot ask, after a select and a picker.\n//\n// The box's whole height is the editable area. A press anywhere in the\n// box has to put the caret in the text, so the box is not covered by a press\n// target the way Select's is; React Aria's own element fills the control's\n// place and takes the press.\n//\n// A token is drawn by the call site, or by this. `renderToken` takes a\n// segment and returns what the pill holds; without it the pill holds the\n// segment's own text. Either way the pill is the page's, so a token here and\n// a chip elsewhere cannot drift.\n\n// A token's pill is 32dp tall inside a body line of 24, so the control's\n// line makes room for it or the pills overlap once the value wraps. Stated\n// once because the control's floor and its line have to agree, and the\n// clearance under the label is measured from it.\nconst TOKEN_LINE = '32px';\nconst styles = {\n token: {\n kfSwDN: \"x87ps6o\",\n kXLuUW: \"xxymvpz\",\n $$css: true\n }\n};\ntype TokenFieldProps<T extends TokenFieldValue = TokenFieldValue> = {\n /** A function may compute the class from the field's render state. /\n className?: RACTokenFieldProps<T>['className'];\n /\n A hint shown under the field. Replaced by `error` when there is one, so\n * the two never stack.\n /\n description?: string;\n /\n The problem with the current value, in words. Its presence is what puts\n * the field in its error state — the message and the red underline both\n * follow from it.\n /\n error?: string;\n /\n Whether the label sits in the empty box and floats to the top once the\n * field is focused or holds something. `false` keeps it small at the top in\n * every state.\n * @default true\n /\n floatingLabel?: boolean;\n /\n What the field is for. Required rather than optional: a field with no\n * label is a box a screen reader cannot name.\n /\n label: string;\n /\n An icon at the start of the box, before the label and the value: the\n * page's 24dp leading icon, in the muted role.\n /\n leadingIcon?: ReactNode;\n /\n What each token holds. Given a segment, return what to draw inside its\n * pill; without it the pill holds the segment's own text.\n /\n renderToken?: (segment: TokenSegment) => ReactNode;\n /* A function may compute the style from the field's render state. /\n style?: RACTokenFieldProps<T>['style'];\n /\n An icon at the end of the box, after the value: the page's 24dp trailing\n * icon, in the muted role and the error role once the field has an error.\n /\n trailingIcon?: ReactNode;\n /\n The filled box, or the outlined one, as the text fields page draws them.\n * @default 'filled'\n /\n variant?: FieldVariant;\n} & Omit<RACTokenFieldProps<T>, 'children' \| 'className' \| 'style'>;\n\n// One token, as React Aria hands it to the editable area's render function.\n// Taken from that prop rather than imported, since the type lives in\n// `react-stately`, which this package does not depend on directly.\ntype TokenSegment = Parameters<RACTokenInputProps['children']>[0];\n\n// Whether the field holds anything, for the floating label. A token field's\n// editable area is a contenteditable element rather than an input, so the\n// chrome cannot read a value off it and is told instead.\nfunction isPopulated(value: TokenFieldValue \| undefined) {\n if (value === undefined) {\n return undefined;\n }\n return value.segments.some(segment => segment.text.length > 0);\n}\n\n// What each token draws. Built by a call rather than written inline at the\n// prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its input.\nfunction tokenContent(renderToken: TokenFieldProps['renderToken']) {\n return (segment: TokenSegment) => <RACToken {...stylex.props(chipStyles.base, focus.ring, chipStyles.unselected, styles.token)}>\n {renderToken === undefined ? segment.text : renderToken(segment)}\n </RACToken>;\n}\n\n/\n A labelled field whose value is text with inline tokens — a tag input, a\n * mention field, a structured search box. Its value is React Aria's\n * `TokenFieldValue`: pass `value` with `onChange` to control it, or\n * `defaultValue` to let it keep its own.\n \n ```tsx\n * const [value, setValue] = useState(new TokenFieldValue([]))\n \n <TokenField label=\"Label\" onChange={setValue} value={value} />\n * ```\n \n What counts as a token is the call site's: subclass `TokenFieldValue` and\n * override `tokenize`, which the package re-exports for that. `renderToken`\n * decides what each pill holds; without it, the segment's own text.\n \n The box, label, supporting line and error are the field chrome in\n * `src/field`, and the pill is the chip module's, shared with Chip and\n * ChipGroup.\n \n The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction TokenField<T extends TokenFieldValue = TokenFieldValue>({\n description,\n error,\n floatingLabel = true,\n label,\n leadingIcon,\n renderToken,\n trailingIcon,\n variant = 'filled',\n ...props\n}: TokenFieldProps<T>) {\n const populated = isPopulated(props.value ?? props.defaultValue);\n return <RACTokenField<T> {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n <FieldBox floatingLabel={floatingLabel}\n // React Aria's `TextField` hands its group the field's disabled and\n // invalid state through context; its `TokenField` does not, so the\n // box is told outright or its label and its underline never turn.\n isDisabled={props.isDisabled} isInvalid={invalidFrom(error)} isPopulated={populated} label={label} leading={leadingIcon} multiline trailing={trailingIcon} variant={variant}>\n <RACTokenInput<T> {...{\n 0: {\n className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x21xpn4 x1t137rt x126k92a\"\n },\n 1: {\n className: \"x9f619 x139gbkf x1lliihq x16svsjw x1848etk x1c52epr xh8yej3 x1qn8t5l xcgk4ki x1t137rt x126k92a xhm3zzy xczxdwi\"\n }\n }[!!(variant === 'filled') << 0]}>\n {tokenContent(renderToken)}\n </RACTokenInput>\n </FieldBox>\n <FieldMessage description={description} error={error} />\n </RACTokenField>;\n}\nexport type { TokenFieldProps, TokenSegment };\nexport default TokenField;"],"mappings":"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"}

package/dist/control/styles.js CHANGED Viewed

@@ -42,7 +42,7 @@ const controlStyles = {
 		k63SB2: "x1c52epr",
 		kb6lSQ: "x1qn8t5l",
 		kLWn49: "xh7dzej",
-		k8WAf4: "x1cmllll",
+		k8WAf4: "x18r0n19",
 		$$css: true
 	},
 	labelDisabled: {

package/dist/control/styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","k1C7PZ","kumcoG","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","labelDisabled","labelReadOnly","messages","kEXP64"],"sources":["../../src/control/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row a selection control draws, shared by Checkbox, Switch and Radio.\n// Each wrote it out in full: the two-column grid, the body-large label with\n// its disabled and read-only fades, the messages cell under the text, and the\n// cursors the control takes in those two states. Switch's own comment already\n// said it drew \"the two-column grid the checkbox uses\" while keeping a second\n// copy, so the coupling was recorded in prose rather than in code — the same\n// thing src/field and src/row were extracted to stop.\n//\n// The set is closed at three. React Aria Components has no fourth component\n// drawing this row, and CheckboxGroup is a container rather than a control.\n// What this is worth is that the three cannot drift apart, and that the\n// repository's own convention — a style more than one component draws lives\n// beside src/components, not inside it — holds here too.\n//\n// Two things deliberately stay with each component.\n//\n// The state layers are three different shapes rather than one shape with\n// three sets of key names. Checkbox carries an `error` key Radio has no\n// equivalent for, Checkbox's pressed set inverts its own key names, and\n// Switch deliberately does not invert at all. One style keyed on a `marked`\n// boolean would have to encode an error branch one caller uses, an inversion\n// another uses, and a documented non-inversion for the third, which costs a\n// reader more than the three short `stylex.create` calls it would replace.\n//\n// And the disc's colour. Checkbox draws it in `onSurface` and Radio in\n// `onSurfaceVariant`, which is the one declaration their otherwise identical\n// discs disagree on, so `disc` holds the other fourteen and each component\n// composes its own colour after.\nconst controlStyles = {\n controlDisabled: {\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n controlReadOnly: {\n kkrTdU: \"xt0e3qv\",\n $$css: true\n },\n disc: {\n kGNEyG: \"x6s0dn4\",\n kWkggS: \"xjbqb8w\",\n kZKoxP: \"x1vqgdyp\",\n kaIpWk: \"x3y1ksm\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x78zum5\",\n kmuXW: \"x2lah0s\",\n kzqmXN: \"x100vrsf\",\n kjj79g: \"xl56j7k\",\n kVAEAm: \"x1n2onr6\",\n kIyJzY: \"x1qno0dh\",\n k1ekBW: \"x15406qy\",\n kAMwcw: \"xpc4ca7\",\n $$css: true\n },\n field: {\n kGNEyG: \"x7a106z\",\n kB7OPa: \"x9f619\",\n k1C7PZ: \"xpr5407\",\n k1xSpc: \"xrvj5dj\",\n kumcoG: \"x1pmbctz\",\n $$css: true\n },\n label: {\n kB7OPa: \"x9f619\",\n kMwMTN: \"x139gbkf\",\n kkrTdU: \"x1ypdohk\",\n kMv6JI: \"x16svsjw\",\n kGuDYH: \"x1848etk\",\n k63SB2: \"x1c52epr\",\n kb6lSQ: \"x1qn8t5l\",\n kLWn49: \"xh7dzej\",\n k8WAf4: \"~~x1cmllll~~\",\n $$css: true\n },\n labelDisabled: {\n kMwMTN: \"x1xj74d8\",\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n labelReadOnly: {\n kkrTdU: \"xt0e3qv\",\n $$css: true\n },\n messages: {\n kEXP64: \"x1xdureb\",\n $$css: true\n }\n};\nexport { controlStyles };"],"mappings":";~~AAgCA~~,~~MAAMO~~,gBAAgB;CACpBC,iBAAiB;EACfC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfF,QAAQ;EACRC,OAAO;CACT;CACAE,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,OAAO;EACLb,QAAQ;EACRI,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRlB,OAAO;CACT;CACAmB,OAAO;EACLZ,QAAQ;EACRa,QAAQ;EACRrB,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR1B,OAAO;CACT;CACA2B,eAAe;EACbP,QAAQ;EACRrB,QAAQ;EACRC,OAAO;CACT;CACA4B,eAAe;EACb7B,QAAQ;EACRC,OAAO;CACT;CACA6B,UAAU;EACRC,QAAQ;EACR9B,OAAO;CACT;AACF"}
1	+ {"version":3,"file":"styles.js","names":["stylex","colors","motion","radii","spacing","stateLayerOpacity","typography","TARGET_SIZE","controlStyles","controlDisabled","kkrTdU","$$css","controlReadOnly","disc","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","k1xSpc","kmuXW","kzqmXN","kjj79g","kVAEAm","kIyJzY","k1ekBW","kAMwcw","field","k1C7PZ","kumcoG","label","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","k8WAf4","labelDisabled","labelReadOnly","messages","kEXP64"],"sources":["../../src/control/styles.ts"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport '../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../tokens/design.tokens.stylex';\n\n// The row a selection control draws, shared by Checkbox, Switch and Radio.\n// Each wrote it out in full: the two-column grid, the body-large label with\n// its disabled and read-only fades, the messages cell under the text, and the\n// cursors the control takes in those two states. Switch's own comment already\n// said it drew \"the two-column grid the checkbox uses\" while keeping a second\n// copy, so the coupling was recorded in prose rather than in code — the same\n// thing src/field and src/row were extracted to stop.\n//\n// The set is closed at three. React Aria Components has no fourth component\n// drawing this row, and CheckboxGroup is a container rather than a control.\n// What this is worth is that the three cannot drift apart, and that the\n// repository's own convention — a style more than one component draws lives\n// beside src/components, not inside it — holds here too.\n//\n// Two things deliberately stay with each component.\n//\n// The state layers are three different shapes rather than one shape with\n// three sets of key names. Checkbox carries an `error` key Radio has no\n// equivalent for, Checkbox's pressed set inverts its own key names, and\n// Switch deliberately does not invert at all. One style keyed on a `marked`\n// boolean would have to encode an error branch one caller uses, an inversion\n// another uses, and a documented non-inversion for the third, which costs a\n// reader more than the three short `stylex.create` calls it would replace.\n//\n// And the disc's colour. Checkbox draws it in `onSurface` and Radio in\n// `onSurfaceVariant`, which is the one declaration their otherwise identical\n// discs disagree on, so `disc` holds the other fourteen and each component\n// composes its own colour after.\n// The control's target, which the disc draws at and the label centres its\n// first line on. Stated once because those two have to agree: a disc resized\n// without the label following it would put the control off its own label\n// again, which is the drift this row already had once.\nconst TARGET_SIZE = '40px';\nconst controlStyles = {\n controlDisabled: {\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n controlReadOnly: {\n kkrTdU: \"xt0e3qv\",\n $$css: true\n },\n disc: {\n kGNEyG: \"x6s0dn4\",\n kWkggS: \"xjbqb8w\",\n kZKoxP: \"x1vqgdyp\",\n kaIpWk: \"x3y1ksm\",\n kB7OPa: \"x9f619\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x78zum5\",\n kmuXW: \"x2lah0s\",\n kzqmXN: \"x100vrsf\",\n kjj79g: \"xl56j7k\",\n kVAEAm: \"x1n2onr6\",\n kIyJzY: \"x1qno0dh\",\n k1ekBW: \"x15406qy\",\n kAMwcw: \"xpc4ca7\",\n $$css: true\n },\n field: {\n kGNEyG: \"x7a106z\",\n kB7OPa: \"x9f619\",\n k1C7PZ: \"xpr5407\",\n k1xSpc: \"xrvj5dj\",\n kumcoG: \"x1pmbctz\",\n $$css: true\n },\n label: {\n kB7OPa: \"x9f619\",\n kMwMTN: \"x139gbkf\",\n kkrTdU: \"x1ypdohk\",\n kMv6JI: \"x16svsjw\",\n kGuDYH: \"x1848etk\",\n k63SB2: \"x1c52epr\",\n kb6lSQ: \"x1qn8t5l\",\n kLWn49: \"xh7dzej\",\n k8WAf4: \"x18r0n19\",\n $$css: true\n },\n labelDisabled: {\n kMwMTN: \"x1xj74d8\",\n kkrTdU: \"x1h6gzvc\",\n $$css: true\n },\n labelReadOnly: {\n kkrTdU: \"xt0e3qv\",\n $$css: true\n },\n messages: {\n kEXP64: \"x1xdureb\",\n $$css: true\n }\n};\nexport { controlStyles };"],"mappings":";AAqCA,MAAMQ,gBAAgB;CACpBC,iBAAiB;EACfC,QAAQ;EACRC,OAAO;CACT;CACAC,iBAAiB;EACfF,QAAQ;EACRC,OAAO;CACT;CACAE,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRf,OAAO;CACT;CACAgB,OAAO;EACLb,QAAQ;EACRI,QAAQ;EACRU,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRlB,OAAO;CACT;CACAmB,OAAO;EACLZ,QAAQ;EACRa,QAAQ;EACRrB,QAAQ;EACRsB,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACR1B,OAAO;CACT;CACA2B,eAAe;EACbP,QAAQ;EACRrB,QAAQ;EACRC,OAAO;CACT;CACA4B,eAAe;EACb7B,QAAQ;EACRC,OAAO;CACT;CACA6B,UAAU;EACRC,QAAQ;EACR9B,OAAO;CACT;AACF"}

package/dist/styles.css CHANGED Viewed

@@ -275,6 +275,10 @@
     padding-block: 22px;
   }
+  .x18r0n19 {
+    padding-block: calc((40px - var(--xol8812)) / 2);
+  }
   .xpg5a72 {
     padding-block: var(--x1ug6acx);
   }
@@ -2675,6 +2679,10 @@
     min-height: calc(2 * var(--xod9tvo) + var(--x1lrg4gv) + var(--xol8812));
   }
+  .xhm3zzy {
+    min-height: calc(32px + var(--x1lrg4gv));
+  }
   .x1chvrdh {
     min-height: var(--x-minBlockSize);
   }
@@ -2749,6 +2757,10 @@
     padding-top: var(--x196ey9q);
   }
+  .xczxdwi {
+    padding-top: var(--x1lrg4gv);
+  }
   .x1clyivc {
     padding-top: var(--x3km7fe);
   }

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@kanso-labs/kanso-ui",
-  "version": "0.28.3",
+  "version": "0.28.4",
   "description": "A React component library built on React Aria Components primitives and styled with StyleX, with design tokens sourced from a single W3C DTCG file and compiled via Style Dictionary",
   "keywords": [
     "react",
@@ -74,7 +74,7 @@
     "@commitlint/cli": "21.2.2",
     "@commitlint/config-conventional": "21.2.2",
     "@eslint/js": "10.0.1",
-    "@kanso-labs/unplugin-style-dictionary": "0.6.2",
+    "@kanso-labs/unplugin-style-dictionary": "0.8.0",
     "@rolldown/plugin-babel": "0.2.4",
     "@storybook/addon-a11y": "10.6.0",
     "@storybook/addon-docs": "10.6.0",