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

@kanso-labs/kanso-ui 0.28.2 → 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 (24) hide show

package/README.md +57 -7
package/dist/components/button/index.js.map +1 -1
package/dist/components/combo-box/index.js +2 -2
package/dist/components/combo-box/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/number-field/index.js +9 -2
package/dist/components/number-field/index.js.map +1 -1
package/dist/components/select/index.js +2 -2
package/dist/components/select/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/field/styles.js +8 -4
package/dist/field/styles.js.map +1 -1
package/dist/styles.css +36 -8
package/dist/tokens/design.tokens.stylex.js +85 -1
package/dist/tokens/design.tokens.stylex.js.map +1 -1
package/package.json +2 -2

package/README.md CHANGED Viewed

@@ -1,5 +1,10 @@
 # Kanso UI
+[![npm version][npm-version-shield]][npm]
+[![npm downloads][npm-downloads-shield]][npm]
+[![License][license-shield]][license] [![Build][build-shield]][build-workflow]
+[![Test][test-shield]][test-workflow] [![Coverage][coverage-shield]][codecov]
 A React component library built on [StyleX](https://stylexjs.com) and
 [React Aria Components](https://react-aria.adobe.com), with design tokens
 sourced from a single
@@ -56,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'
@@ -71,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
@@ -157,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>
@@ -234,3 +267,20 @@ need them exported.
   `src/tokens/design.tokens.json`
 - `npm test` — Storybook story tests (vitest, headless Chromium)
 - `npm run build` — build the publishable package into `dist/`
+[build-shield]:
+  https://img.shields.io/github/actions/workflow/status/kanso-labs/kanso-ui/build.yaml?branch=main&label=Build
+[build-workflow]:
+  https://github.com/kanso-labs/kanso-ui/actions/workflows/build.yaml
+[codecov]: https://codecov.io/gh/kanso-labs/kanso-ui
+[coverage-shield]:
+  https://img.shields.io/codecov/c/github/kanso-labs/kanso-ui?label=Coverage
+[license]: ./LICENSE
+[license-shield]: https://img.shields.io/github/license/kanso-labs/kanso-ui
+[npm]: https://www.npmjs.com/package/@kanso-labs/kanso-ui
+[npm-downloads-shield]: https://img.shields.io/npm/dm/@kanso-labs/kanso-ui
+[npm-version-shield]: https://img.shields.io/npm/v/@kanso-labs/kanso-ui
+[test-shield]:
+  https://img.shields.io/github/actions/workflow/status/kanso-labs/kanso-ui/test.yaml?branch=main&label=Test
+[test-workflow]:
+  https://github.com/kanso-labs/kanso-ui/actions/workflows/test.yaml

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/combo-box/index.js CHANGED Viewed

@@ -222,8 +222,8 @@ function ComboToggle() {
 	let t1;
 	if ($[1] === Symbol.for("react.memo_cache_sentinel")) {
 		t1 = {
-			0: { className: "xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln" },
-			1: { className: "xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d" }
+			0: { className: "xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7" },
+			1: { className: "xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d" }
 		};
 		$[1] = t1;
 	} else t1 = $[1];

package/dist/components/combo-box/index.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"index.js","names":["ReactNode","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","focus","mergeStatefulStyles","overlay","colors","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","toggle","kGNEyG","kZKoxP","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kjj79g","kmVPX3","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","t11","popup","t12","t13","t14","ComboToggle","state","ring","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// Filtering is React Aria's, and stays theirs. `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// A value that is not in the list is allowed or refused, not corrected.\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n list: {\n kWkggS: \"x1vnz5z6\",\n kaIpWk: \"x1tfhd1\",\n kzqmXN: \"xlvufjm\",\n kskxy: \"xedcshv\",\n ks0D6T: \"x1x1rfll\",\n k7Eaqz: \"xeuugli\",\n kORKVm: \"x1odjw0f\",\n k8WAf4: \"x1cmllll\",\n $$css: true\n },\n toggle: {\n kGNEyG: \"x6s0dn4\",\n kWkggS: \"xjbqb8w\",\n kZKoxP: \"xxk0z11\",\n kaIpWk: \"x3y1ksm\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kMwMTN: \"x1heor9g\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kzqmXN: \"xvy4d1p\",\n kjj79g: \"xl56j7k\",\n kmVPX3: \"x1717udv\",\n $$css: true\n }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n /*\n Where to portal the list. 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 list renders outside the theme and falls back to the tokens'\n * `prefers-color-scheme` default.\n /\n container?: Element;\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, the red underline, and\n * `aria-invalid` all 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 a value. `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 combo box with\n * no 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 The options. `ListBox.Item` for each, and `ListBox.Section` to group\n * them — the list inside is a ListBox, and takes everything one does.\n /\n options?: 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<RACComboBoxProps<T, M>, 'children' \| 'defaultSelectedKey' \| 'isInvalid' \| 'onSelectionChange' \| 'selectedKey' \| 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' \| 'single';\n\n/\n The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n /\nfunction ChosenValues() {\n return <FieldValue className=\"x2lah0s\">\n <RACComboBoxValue />\n </FieldValue>;\n}\n\n/\n A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n \n ```tsx\n * <ComboBox\n * label=\"Label\"\n * options={\n * <>\n * <ListBox.Item id=\"first\">First item</ListBox.Item>\n * <ListBox.Item id=\"second\">Second item</ListBox.Item>\n * </>\n * }\n * />\n * ```\n \n Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n \n The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\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 ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n container,\n description,\n error,\n floatingLabel = true,\n isDisabled = false,\n label,\n leadingIcon,\n options,\n variant = 'filled',\n ...props\n}: ComboBoxProps<T, M>) {\n const validationBehavior = useFieldValidationBehavior();\n // What the list is anchored to and takes its width from: the box, not the\n // button inside it, which is a 24dp icon.\n const boxRef = useRef<HTMLDivElement>(null);\n return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...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 `ComboBox` does not, so the box\n // is told outright or its label and its underline never turn.\n isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n <FieldInput />\n </FieldBox>\n <FieldMessage description={description} error={error} />\n <RACPopover triggerRef={boxRef}\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, styles.list)}>\n <ListBox>{options}</ListBox>\n </RACPopover>\n </RACComboBox>;\n}\n\n/\n The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n const state = useContext(ComboBoxStateContext);\n return <RACButton {...stylex.props(styles.toggle, focus.ring)}>\n <ChevronEndGlyph {...{\n 0: {\n className: \"xxk0z11 xvy4d1p x1iffjtl xx6bhzk x11xpdln\"\n },\n 1: {\n className: \"xxk0z11 xvy4d1p xx6bhzk x11xpdln x9tu13d\"\n }\n }[!!(state?.isOpen === true) << 0]} />\n </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"mappings":"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"}
1	+ {"version":3,"file":"index.js","names":["ReactNode","ComboBoxProps","RACComboBoxProps","stylex","useContext","useRef","ComboBoxStateContext","Button","RACButton","ComboBox","RACComboBox","ComboBoxValue","RACComboBoxValue","Popover","RACPopover","FieldVariant","FieldBox","FieldInput","FieldMessage","FieldValue","fieldStyles","invalidFrom","useFieldValidationBehavior","ChevronEndGlyph","focus","mergeStatefulStyles","overlay","colors","motion","radii","spacing","ListBox","TOGGLE","styles","list","kWkggS","kaIpWk","kzqmXN","kskxy","ks0D6T","k7Eaqz","kORKVm","k8WAf4","$$css","toggle","kGNEyG","kZKoxP","kMzoRj","kB7OPa","kMwMTN","kkrTdU","k1xSpc","kjj79g","kmVPX3","ComboBoxSelectionMode","container","Element","description","error","floatingLabel","label","leadingIcon","options","variant","Omit","T","M","ChosenValues","$","_c","t0","Symbol","for","t1","isDisabled","t2","t3","props","undefined","validationBehavior","boxRef","T0","t4","t5","root","t6","t7","selectionMode","t8","t9","t10","t11","popup","t12","t13","t14","ComboToggle","state","ring","0","className","1","isOpen"],"sources":["../../../src/components/combo-box/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ComboBoxProps as RACComboBoxProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext, useRef } from 'react';\nimport { ComboBoxStateContext, Button as RACButton, ComboBox as RACComboBox, ComboBoxValue as RACComboBoxValue, Popover as RACPopover } from 'react-aria-components';\nimport type { FieldVariant } from '../../field';\nimport { FieldBox, FieldInput, FieldMessage, FieldValue } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing } from '../../tokens/design.tokens.stylex';\nimport ListBox from '../list-box';\n\n// The text fields page's autocomplete text field: a text field that filters a\n// list as it is typed. Everything above the list is the field chrome in\n// `src/field` — the same box, label, supporting line and error treatment\n// every other field draws — and the list is ListBox on the shared overlay\n// surface, positioned and sized against the box exactly as Select's is.\n//\n// It is Select's shape with two differences.\n//\n// The control is a real input, so the box is not a press target — typing has\n// to reach the input — and only the chevron at the end opens the list. That\n// is what the page draws too: an autocomplete text field is a text field,\n// with a button on it.\n//\n// And the field is an element tree rather than a function of React Aria's\n// render state, which every other component here writes. React Aria builds a\n// combo box's collection by walking its children for options, and a function\n// is opaque to that walk: with one, the collection is empty until the list\n// has been opened, so a `defaultSelectedKey` resolves to no text and the\n// field starts blank. What needed the render state — whether the list is\n// open — reads the combo box's own state from context instead.\n//\n// Two more things are this component's own.\n//\n// Filtering is React Aria's, and stays theirs. `defaultFilter` takes a\n// predicate, and the package re-exports `useFilter` for a locale-aware one;\n// `items` with `useAsyncList` is how a list that is fetched rather than\n// listed gets in. None of that is wrapped, because a combo box's whole job\n// is which options it shows and a wrapper would be a second place to decide\n// it.\n//\n// A value that is not in the list is allowed or refused, not corrected.\n// `allowsCustomValue` is React Aria's, and with it off the input reverts to\n// the last chosen option on blur rather than keeping text that means nothing.\n//\n// Choosing more than one is `selectionMode=\"multiple\"`, which draws the\n// chosen options before the input through React Aria's `ComboBoxValue`. For\n// a field that draws each of them as a removable chip, the coverage plan has\n// TokenField.\n\n// Hoisted so it is not a new element on every render, which is what\n// react-perf's jsx-no-jsx-as-prop is after.\nconst TOGGLE = <ComboToggle />;\nconst styles = {\n list: {\n kWkggS: \"x1vnz5z6\",\n kaIpWk: \"x1tfhd1\",\n kzqmXN: \"xlvufjm\",\n kskxy: \"xedcshv\",\n ks0D6T: \"x1x1rfll\",\n k7Eaqz: \"xeuugli\",\n kORKVm: \"x1odjw0f\",\n k8WAf4: \"x1cmllll\",\n $$css: true\n },\n toggle: {\n kGNEyG: \"x6s0dn4\",\n kWkggS: \"xjbqb8w\",\n kZKoxP: \"xxk0z11\",\n kaIpWk: \"x3y1ksm\",\n kMzoRj: \"xc342km\",\n kB7OPa: \"x9f619\",\n kMwMTN: \"x1heor9g\",\n kkrTdU: \"x1ypdohk\",\n k1xSpc: \"x3nfvp2\",\n kzqmXN: \"xvy4d1p\",\n kjj79g: \"xl56j7k\",\n kmVPX3: \"x1717udv\",\n $$css: true\n }\n};\ntype ComboBoxProps<T extends object = object, M extends ComboBoxSelectionMode = 'single'> = {\n /*\n Where to portal the list. 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 list renders outside the theme and falls back to the tokens'\n * `prefers-color-scheme` default.\n /\n container?: Element;\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, the red underline, and\n * `aria-invalid` all 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 a value. `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 combo box with\n * no 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 The options. `ListBox.Item` for each, and `ListBox.Section` to group\n * them — the list inside is a ListBox, and takes everything one does.\n /\n options?: 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<RACComboBoxProps<T, M>, 'children' \| 'defaultSelectedKey' \| 'isInvalid' \| 'onSelectionChange' \| 'selectedKey' \| 'validationBehavior'>;\n\n// React Aria's combo box takes its own two-value selection mode rather than\n// the collection-wide one, which also has `none`; that type is local to its\n// module, so the two values are named again here.\ntype ComboBoxSelectionMode = 'multiple' \| 'single';\n\n/\n The chosen options, drawn before the input when more than one may be\n * chosen. The chrome's `FieldValue` is the styled element and React Aria's\n * `ComboBoxValue` sits inside it, as it does in Select.\n /\nfunction ChosenValues() {\n return <FieldValue className=\"x2lah0s\">\n <RACComboBoxValue />\n </FieldValue>;\n}\n\n/\n A labelled text field that filters a list as it is typed. Its value is\n * React Aria's: pass `value` with `onChange` to control which option is\n * chosen, `inputValue` with `onInputChange` to control the text, or the\n * `default` forms of either to let it keep its own. React Aria's older\n * `selectedKey` names are deprecated and are left out of this component's\n * props rather than passed through.\n \n ```tsx\n * <ComboBox\n * label=\"Label\"\n * options={\n * <>\n * <ListBox.Item id=\"first\">First item</ListBox.Item>\n * <ListBox.Item id=\"second\">Second item</ListBox.Item>\n * </>\n * }\n * />\n * ```\n \n Filtering is React Aria's: `defaultFilter` takes a predicate, `useFilter`\n * is re-exported for a locale-aware one, and `items` with `useAsyncList`\n * feeds a list that is fetched rather than listed. `allowsCustomValue` lets\n * the field keep text that matches nothing.\n \n The box, label, input, supporting line and error are the field chrome in\n * `src/field`, shared with every other field; the list is ListBox on the\n * overlay surface every anchored panel here draws.\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 ComboBox<T extends object = object, M extends ComboBoxSelectionMode = 'single'>({\n container,\n description,\n error,\n floatingLabel = true,\n isDisabled = false,\n label,\n leadingIcon,\n options,\n variant = 'filled',\n ...props\n}: ComboBoxProps<T, M>) {\n const validationBehavior = useFieldValidationBehavior();\n // What the list is anchored to and takes its width from: the box, not the\n // button inside it, which is a 24dp icon.\n const boxRef = useRef<HTMLDivElement>(null);\n return <RACComboBox<T, M> isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...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 `ComboBox` does not, so the box\n // is told outright or its label and its underline never turn.\n isDisabled={isDisabled} isInvalid={invalidFrom(error)} label={label} leading={leadingIcon} ref={boxRef} trailing={TOGGLE} variant={variant}>\n {props.selectionMode === 'multiple' ? <ChosenValues /> : null}\n <FieldInput />\n </FieldBox>\n <FieldMessage description={description} error={error} />\n <RACPopover triggerRef={boxRef}\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, styles.list)}>\n <ListBox>{options}</ListBox>\n </RACPopover>\n </RACComboBox>;\n}\n\n/\n The button that opens the list. It takes its press behaviour from the\n * combo box around it through React Aria's button context, and reads whether\n * the list is open from the combo box's state rather than from a render prop\n * — the whole field cannot be a render function, since React Aria builds its\n * collection by walking the children and a function is opaque to that walk.\n */\nfunction ComboToggle() {\n const state = useContext(ComboBoxStateContext);\n return <RACButton {...stylex.props(styles.toggle, focus.ring)}>\n <ChevronEndGlyph {...{\n 0: {\n className: \"xxk0z11 xvy4d1p x1iffjtl xkzkux9 x11xpdln xpc4ca7\"\n },\n 1: {\n className: \"xxk0z11 xvy4d1p xkzkux9 x11xpdln xpc4ca7 x9tu13d\"\n }\n }[!!(state?.isOpen === true) << 0]} />\n </RACButton>;\n}\nexport type { ComboBoxProps, ComboBoxSelectionMode };\nexport default ComboBox;"],"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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"}