@kanso-labs/kanso-ui 0.15.0 → 0.17.0

package/README.md

@@ -50,6 +50,27 @@ StyleX compiles the library's own rules into a CSS `@layer`, and your app's
 stylesheet is unlayered, so your rules win the cascade wherever the two meet —
 no specificity contest, and no `!important`.
 
+### React Aria utilities
+
+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.
+
+```tsx
+import { I18nProvider, useListData } from '@kanso-labs/kanso-ui'
+```
+
+**Do not install `react-aria-components` alongside this package.** A second copy
+of the library carries a second set of contexts, and the two never meet: a
+`Button` placed inside a `Sheet` from this package opens nothing when the
+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.
+
 ### Layout
 
 `Container` centres content at a measure, and `Stack` puts one gap from the

package/dist/components/app-bar/index.d.ts

@@ -3,16 +3,16 @@ import { ReactNode } from "react";
 //#region src/components/app-bar/index.d.ts
 type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
   /**
-   * Which of M3's alignments the text takes. `center` is the configuration
-   * that replaced the old center-aligned variant.
+   * Which of Material Design's alignments the text takes. `center` is the
+   * configuration that replaced the old center-aligned variant.
    * @default 'start'
    */
   align?: 'center' | 'start';
   /**
    * Collapses a flexible bar to the height and headline of the small one, for
-   * a pinned bar over content that has been scrolled. M3 specifies it for the
-   * flexible sizes, and without it a pinned `large` costs 152px of the
-   * viewport for as long as the page is open.
+   * a pinned bar over content that has been scrolled. Material Design
+   * specifies it for the flexible sizes, and without it a pinned `large` costs
+   * 152px of the viewport for as long as the page is open.
    *
    * Controlled, and for the same reason `scrolled` is: only the app knows
    * which element scrolls, and how far into it the bar should have finished
@@ -42,12 +42,12 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
   /**
    * Where the bar's content starts, measured to the headline. A leading slot
    * sits 12px before that, which is the room an icon button's own padding
-   * fills around its glyph — M3's arrangement, and what makes a bar with an
-   * icon and one without start their text in the same place.
+   * fills around its glyph — Material Design's arrangement, and what makes a
+   * bar with an icon and one without start their text in the same place.
    *
-   * The default is M3's own margin for a top app bar, which is also the
-   * margin it gives body content, so a bar and the page beneath line up
-   * without either being told about the other. Set it to the page's gutter
+   * The default is Material Design's own margin for a top app bar, which is
+   * also the margin it gives body content, so a bar and the page beneath line
+   * up without either being told about the other. Set it to the page's gutter
    * where that differs.
    * @default '16px'
    */
@@ -67,9 +67,9 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
   /** Usually a back or menu icon button. Sits before the text. */
   leading?: ReactNode;
   /**
-   * Whether the content beneath has been scrolled. M3 separates a bar from
-   * scrolled content with a fill colour rather than a shadow, and this is what
-   * applies it.
+   * Whether the content beneath has been scrolled. Material Design separates
+   * a bar from scrolled content with a fill colour rather than a shadow, and
+   * this is what applies it.
    *
    * Controlled, with no listener of its own: only the app knows which element
    * scrolls, and a bar that watched the window would be wrong inside every
@@ -78,9 +78,8 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
    */
   scrolled?: boolean;
   /**
-   * Height and headline size. `medium` and `large` are M3 Expressive's
-   * flexible bars, which hug their text — the baseline variants they replaced
-   * are no longer recommended and are not offered.
+   * Height and headline size. `medium` and `large` are Material Design's
+   * flexible bars, which hug their text.
    * @default 'small'
    */
   size?: 'large' | 'medium' | 'small';
@@ -90,8 +89,8 @@ type AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {
   trailing?: ReactNode;
 };
 /**
- * Material 3's app bar: the container at the top of a page carrying its title,
- * one or two actions, and the way back out.
+ * Material Design's app bar: the container at the top of a page carrying its
+ * title, one or two actions, and the way back out.
  *
  * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;
  * `medium` and `large` are the flexible bars, which give the headline a larger

package/dist/components/app-bar/index.js

@@ -69,8 +69,8 @@ const rowStyles = { root: (contentInset, maxInlineSize) => [_temp2, {
 	"--x-paddingInline": ((val) => typeof val === "number" ? val + "px" : val != null ? val : void 0)(`calc(${contentInset} - ${HEADLINE_OFFSET})`)
 }] };
 /**
-* Material 3's app bar: the container at the top of a page carrying its title,
-* one or two actions, and the way back out.
+* Material Design's app bar: the container at the top of a page carrying its
+* title, one or two actions, and the way back out.
 *
 * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;
 * `medium` and `large` are the flexible bars, which give the headline a larger

package/dist/components/app-bar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material 3's app bar, in the three sizes M3 Expressive recommends.\n//\n// The spec offers four variants. `search` is absent because it opens M3's\n// search view when selected, and that is a component in its own right that\n// this library does not have — half of a search bar would be worse than none.\n// The other three are here.\n//\n// `medium` and `large` are M3 Expressive's *flexible* bars. The baseline\n// medium and large ones they replaced are marked \"not recommended\" in the\n// spec, so there is no ambiguity to protect against and the shorter names are\n// the ones worth having at a call site.\n//\n// M3 also merged the old center-aligned variant into small as a configuration\n// rather than a variant, which is why alignment is a prop here and applies to\n// every size.\n//\n// Heights are M3's, and they are minimums rather than fixed. The spec says the\n// flexible bars \"hug the text contents\", and Expressive added multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// How far the headline sits inside whatever comes before it, and the figure\n// an icon button's glyph is inset from the edge of its own touch target. M3\n// leans on the two agreeing, which is what makes a bar with a leading icon\n// and one without start their text in the same place.\nconst HEADLINE_OFFSET = '12px';\n\n// Where the bar's visible content starts by default, which is M3's own\n// margin for a top app bar and the same margin its body content takes.\nconst DEFAULT_CONTENT_INSET = '16px';\nconst HEIGHTS = {\n  large: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  medium: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  small: {\n    plain: '64px',\n    withSubtitle: '64px'\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. M3 does\n// not describe the collapsed large bar as a state of its own — it describes it\n// as becoming the small bar, which is why this reads off the same table rather\n// than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.small.plain;\nconst styles = {\n  root: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure. M3's\n// own tokens are `md.comp.app-bar.<size>.title.font`, aliases onto the type\n// scale rather than sizes of their own, so this maps to the scale the same\n// way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  large: 'headlineMedium',\n  medium: 'headlineSmall',\n  small: 'titleLarge'\n} as const;\n\n// The headline is the page's title in M3's model, so it is the page's <h1>.\n// A bar nested somewhere that already has one can pass its own heading as\n// `headline` instead.\n// oxlint-disable-next-line jsx-a11y/heading-has-content -- filled by useRender\nconst HEADING_1 = <h1 />;\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. The inset is where the bar's visible content starts,\n// and the row carries `contentInset` minus the offset the text block already\n// holds — which is what keeps a leading icon's glyph and a headline with no\n// icon before it starting in the same place.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  kg3NbH: \"x30g6up\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (contentInset: string, maxInlineSize: string) => [_temp2, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc(${contentInset} - ${HEADLINE_OFFSET})`)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of M3's alignments the text takes. `center` is the configuration\n   * that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a pinned bar over content that has been scrolled. M3 specifies it for the\n   * flexible sizes, and without it a pinned `large` costs 152px of the\n   * viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. Usually set from the same handler.\n   *\n   * Ignored on `small`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * **The scroll container needs `overflow-anchor: none`.** Collapsing hands\n   * the page back the height the bar gives up, and browsers answer a change\n   * in height above the viewport by moving the scroll offset by exactly that\n   * amount, so the content underneath stays where it was. That offset is\n   * what the call site derived `collapsed` from, so it lands back under the\n   * threshold, the bar expands, the offset is restored, and the two take\n   * turns for as long as the reader stays in that band. Turning anchoring off\n   * is what breaks the loop, and it is also the movement you want: the\n   * content follows the bar's bottom edge up rather than standing still while\n   * the bar shrinks behind it.\n   *\n   * No threshold avoids this on its own. The unstable band is as tall as the\n   * height the bar gives back and it sits directly above wherever the\n   * threshold is put, so moving the threshold moves the band with it.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts, measured to the headline. A leading slot\n   * sits 12px before that, which is the room an icon button's own padding\n   * fills around its glyph — M3's arrangement, and what makes a bar with an\n   * icon and one without start their text in the same place.\n   *\n   * The default is M3's own margin for a top app bar, which is also the\n   * margin it gives body content, so a bar and the page beneath line up\n   * without either being told about the other. Set it to the page's gutter\n   * where that differs.\n   * @default '16px'\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Whether the content beneath has been scrolled. M3 separates a bar from\n   * scrolled content with a fill colour rather than a shadow, and this is what\n   * applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size. `medium` and `large` are M3 Expressive's\n   * flexible bars, which hug their text — the baseline variants they replaced\n   * are no longer recommended and are not offered.\n   * @default 'small'\n   */\n  size?: 'large' | 'medium' | 'small';\n  /** A second line under the headline. Makes `medium` and `large` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material 3's app bar: the container at the top of a page carrying its title,\n * one or two actions, and the way back out.\n *\n * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;\n * `medium` and `large` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = DEFAULT_CONTENT_INSET,\n  contentMaxInlineSize = 'none',\n  headline,\n  leading,\n  render,\n  scrolled = false,\n  size = 'small',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `small` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'small';\n  const expandedHeight = subtitle === undefined || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize))}>\n          {leading === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {headline === undefined ? null : <Text className=\"xioksi3 x1nxaspg x1seskgd\" render={HEADING_1} variant={collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {subtitle === undefined || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {trailing === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props)\n    },\n    render\n  });\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/app-bar/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\nimport Text from '../text';\n\n// Material Design's app bar, in the three sizes the spec recommends.\n//\n// `medium` and `large` are Material Design's *flexible* bars, the newer of the\n// two sets the spec gives and the one it recommends, which is why the short\n// names are theirs.\n//\n// Material Design also merged the old center-aligned variant into small as a\n// configuration rather than a variant, which is why alignment is a prop here\n// and applies to every size.\n//\n// Heights are Material Design's, and they are minimums rather than fixed. The\n// spec says the flexible bars \"hug the text contents\" and gives them multi-line\n// support and text wrapping, so a headline long enough to wrap has to be able\n// to make its bar taller. Fixing the height would truncate exactly the case\n// the variant was redesigned for.\n\n// How far the headline sits inside whatever comes before it, and the figure\n// an icon button's glyph is inset from the edge of its own touch target.\n// Material Design leans on the two agreeing, which is what makes a bar with a\n// leading icon and one without start their text in the same place.\nconst HEADLINE_OFFSET = '12px';\n\n// Where the bar's visible content starts by default, which is Material\n// Design's own margin for a top app bar and the same margin its body content\n// takes.\nconst DEFAULT_CONTENT_INSET = '16px';\nconst HEIGHTS = {\n  large: {\n    plain: '120px',\n    withSubtitle: '152px'\n  },\n  medium: {\n    plain: '112px',\n    withSubtitle: '136px'\n  },\n  small: {\n    plain: '64px',\n    withSubtitle: '64px'\n  }\n} as const;\n\n// What a flexible bar collapses to, which is the small bar exactly. Material\n// Design does not describe the collapsed large bar as a state of its own — it\n// describes it as becoming the small bar, which is why this reads off the same\n// table rather than being a fourth height.\nconst COLLAPSED_HEIGHT = HEIGHTS.small.plain;\nconst styles = {\n  root: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"x14s9m32\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"xioksi3\",\n    k1ekBW: \"x8u3r54\",\n    kAMwcw: \"x1seskgd\",\n    $$css: true\n  },\n  row: {\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kOIVth: \"xzoy561\",\n    kzqmXN: \"xh8yej3\",\n    kUOVxO: \"xvueqy4\",\n    $$css: true\n  },\n  scrolled: {\n    kWkggS: \"x1mjdul6\",\n    $$css: true\n  }\n};\n\n// One entry per size, and each names a type role rather than a figure.\n// Material Design's own tokens are `md.comp.app-bar.<size>.title.font`,\n// aliases onto the type scale rather than sizes of their own, so this maps to\n// the scale the same way and lets Text apply it.\nconst HEADLINE_VARIANT = {\n  large: 'headlineMedium',\n  medium: 'headlineSmall',\n  small: 'titleLarge'\n} as const;\n\n// The headline is the page's title in Material Design's model, so it is the\n// page's <h1>. A bar nested somewhere that already has one can pass its own\n// heading as `headline` instead.\n// oxlint-disable-next-line jsx-a11y/heading-has-content -- filled by useRender\nconst HEADING_1 = <h1 />;\nconst PARAGRAPH = <p />;\n\n// Height is the one value the call site does not choose, and it depends on two\n// props at once, so it is a function style rather than one key per\n// combination. StyleX writes it to a custom property inline, the same\n// mechanism Feed uses for its cell minimum.\nconst _temp = {\n  kAzted: \"x1chvrdh\",\n  \"$$css\": true\n};\nconst heightStyles = {\n  root: (minBlockSize: string) => [_temp, {\n    \"--x-minBlockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(minBlockSize)\n  }]\n};\n\n// The row's measure and inset both come from the call site, so both are\n// function styles too. The inset is where the bar's visible content starts,\n// and the row carries `contentInset` minus the offset the text block already\n// holds — which is what keeps a leading icon's glyph and a headline with no\n// icon before it starting in the same place.\nconst _temp2 = {\n  ks0D6T: \"x13i5qev\",\n  kg3NbH: \"x30g6up\",\n  \"$$css\": true\n};\nconst rowStyles = {\n  root: (contentInset: string, maxInlineSize: string) => [_temp2, {\n    \"--x-maxInlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(maxInlineSize),\n    \"--x-paddingInline\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`calc(${contentInset} - ${HEADLINE_OFFSET})`)\n  }]\n};\ntype AppBarProps = Omit<RenderComponentProps<'header'>, 'children'> & {\n  /**\n   * Which of Material Design's alignments the text takes. `center` is the\n   * configuration that replaced the old center-aligned variant.\n   * @default 'start'\n   */\n  align?: 'center' | 'start';\n  /**\n   * Collapses a flexible bar to the height and headline of the small one, for\n   * a pinned bar over content that has been scrolled. Material Design\n   * specifies it for the flexible sizes, and without it a pinned `large` costs\n   * 152px of the viewport for as long as the page is open.\n   *\n   * Controlled, and for the same reason `scrolled` is: only the app knows\n   * which element scrolls, and how far into it the bar should have finished\n   * collapsing. Usually set from the same handler.\n   *\n   * Ignored on `small`, which is already the height this collapses to. The\n   * subtitle goes with the height, since there is no room for a second line\n   * in the small bar.\n   *\n   * **The scroll container needs `overflow-anchor: none`.** Collapsing hands\n   * the page back the height the bar gives up, and browsers answer a change\n   * in height above the viewport by moving the scroll offset by exactly that\n   * amount, so the content underneath stays where it was. That offset is\n   * what the call site derived `collapsed` from, so it lands back under the\n   * threshold, the bar expands, the offset is restored, and the two take\n   * turns for as long as the reader stays in that band. Turning anchoring off\n   * is what breaks the loop, and it is also the movement you want: the\n   * content follows the bar's bottom edge up rather than standing still while\n   * the bar shrinks behind it.\n   *\n   * No threshold avoids this on its own. The unstable band is as tall as the\n   * height the bar gives back and it sits directly above wherever the\n   * threshold is put, so moving the threshold moves the band with it.\n   * @default false\n   */\n  collapsed?: boolean;\n  /**\n   * Where the bar's content starts, measured to the headline. A leading slot\n   * sits 12px before that, which is the room an icon button's own padding\n   * fills around its glyph — Material Design's arrangement, and what makes a\n   * bar with an icon and one without start their text in the same place.\n   *\n   * The default is Material Design's own margin for a top app bar, which is\n   * also the margin it gives body content, so a bar and the page beneath line\n   * up without either being told about the other. Set it to the page's gutter\n   * where that differs.\n   * @default '16px'\n   */\n  contentInset?: string;\n  /**\n   * How wide the bar's contents may run before they stop growing, with the\n   * row centred in whatever is left. The bar's own surface still paints edge\n   * to edge.\n   *\n   * This is what lines a full-bleed bar up with a page whose content sits in\n   * a measure: give it the page's measure, and `contentInset` the page's\n   * gutter. Unset, the row is as wide as the bar.\n   */\n  contentMaxInlineSize?: string;\n  /** The page's title. Wraps rather than truncating, and grows the bar with it. */\n  headline?: ReactNode;\n  /** Usually a back or menu icon button. Sits before the text. */\n  leading?: ReactNode;\n  /**\n   * Whether the content beneath has been scrolled. Material Design separates\n   * a bar from scrolled content with a fill colour rather than a shadow, and\n   * this is what applies it.\n   *\n   * Controlled, with no listener of its own: only the app knows which element\n   * scrolls, and a bar that watched the window would be wrong inside every\n   * pane and dialog that scrolls independently.\n   * @default false\n   */\n  scrolled?: boolean;\n  /**\n   * Height and headline size. `medium` and `large` are Material Design's\n   * flexible bars, which hug their text.\n   * @default 'small'\n   */\n  size?: 'large' | 'medium' | 'small';\n  /** A second line under the headline. Makes `medium` and `large` taller. */\n  subtitle?: ReactNode;\n  /** Actions, at the far end. Usually icon buttons. */\n  trailing?: ReactNode;\n};\n\n/**\n * Material Design's app bar: the container at the top of a page carrying its\n * title, one or two actions, and the way back out.\n *\n * Three sizes. `small` is a fixed 64px bar for a page whose title is a label;\n * `medium` and `large` are the flexible bars, which give the headline a larger\n * type role and grow to fit a subtitle or a headline that wraps.\n *\n * It paints its own surface, unlike the layout components, because separating\n * itself from the content beneath is the job — which is also why `scrolled`\n * and `collapsed` exist. Neither watches the page: only the app knows which\n * element scrolls, so both are set from its own scroll handler.\n */\nfunction AppBar({\n  align = 'start',\n  collapsed = false,\n  contentInset = DEFAULT_CONTENT_INSET,\n  contentMaxInlineSize = 'none',\n  headline,\n  leading,\n  render,\n  scrolled = false,\n  size = 'small',\n  subtitle,\n  trailing,\n  ...props\n}: AppBarProps) {\n  // `small` is already what the flexible bars collapse to, so collapsing it is\n  // a no-op rather than an error. A bar whose size is chosen at the call site\n  // from a breakpoint would otherwise have to guard the prop as well.\n  const collapse = collapsed && size !== 'small';\n  const expandedHeight = subtitle === undefined || subtitle === null ? HEIGHTS[size].plain : HEIGHTS[size].withSubtitle;\n  const height = collapse ? COLLAPSED_HEIGHT : expandedHeight;\n  return useRender({\n    defaultTagName: 'header',\n    props: {\n      ...props,\n      children: <div {...stylex.props(styles.row, rowStyles.root(contentInset, contentMaxInlineSize))}>\n          {leading === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{leading}</div>}\n          <div {...{\n          0: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02\"\n          },\n          1: {\n            className: \"x9f619 x78zum5 xdt5ytf x1iyjqo2 xl56j7k xeuugli x1cmllll xaope02 x2b8uid\"\n          }\n        }[!!(align === 'center') << 0]}>\n            {headline === undefined ? null : <Text className=\"xioksi3 x1nxaspg x1seskgd\" render={HEADING_1} variant={collapse ? HEADLINE_VARIANT.small : HEADLINE_VARIANT[size]}>\n                {headline}\n              </Text>}\n            {subtitle === undefined || collapse ? null : <Text render={PARAGRAPH} tone=\"muted\" variant=\"bodyMedium\">\n                {subtitle}\n              </Text>}\n          </div>\n          {trailing === undefined ? null : <div className=\"x6s0dn4 x78zum5 x2lah0s xzoy561\">{trailing}</div>}\n        </div>,\n      ...mergeStyles(stylex.props(styles.root, heightStyles.root(height), scrolled && styles.scrolled), props)\n    },\n    render\n  });\n}\nexport type { AppBarProps };\nexport default AppBar;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"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 { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\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 and text paint the label colour over a transparent\n// one. The pairs are the buttons spec page's, Expressive column: tonal on\n// secondary container, outlined with an outline variant border and an\n// on-surface-variant label, text on primary.\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.\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    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\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  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  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  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  /** 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  /** @default 'filled' */\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.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = '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 four 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  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, 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      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"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 { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, shadows, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\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 and text paint the label colour over a transparent\n// one. 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.\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.\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    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"x9v5kkp x1t137rt\",\n    kMeerF: \"x1de99jn\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    $$css: true\n  },\n  disabled: {\n    kkrTdU: \"x1h6gzvc\",\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  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  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  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  /** 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  /** @default 'filled' */\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.\ntype ButtonState = Pick<ButtonRenderProps, 'isDisabled' | 'isFocused' | 'isFocusVisible' | 'isHovered' | 'isPressed'>;\ntype ButtonVariant = '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 four 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  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, 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      {children}\n      {ripple.surface}\n    </RACButton>;\n}\nexport type { ButtonDOMProps, ButtonProps, ButtonSize, ButtonState, ButtonVariant };\nexport default Button;"],"mappings":"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"}

package/dist/components/checkbox/index.d.ts

@@ -0,0 +1,35 @@
+import { ReactNode } from "react";
+import { CheckboxFieldProps } from "react-aria-components";
+//#region src/components/checkbox/index.d.ts
+type CheckboxProps = {
+  /**
+   * The label, beside the box. A checkbox that a row labels some other way
+   * leaves it out and passes `aria-label` instead.
+   */
+  children?: ReactNode;
+  /**
+   * A hint under the label. Replaced by `error` when there is one, so the
+   * two never stack.
+   */
+  description?: string;
+  /**
+   * The problem with the current value, in words. Its presence is what puts
+   * the checkbox in its error state — the message, the error colours and
+   * `aria-invalid` all follow from it.
+   */
+  error?: string;
+} & Omit<CheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;
+/**
+ * A checkbox with its label, and optionally a description or an error under
+ * it. Its state is React Aria's: pass `isSelected` with `onChange` to
+ * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`
+ * draws the dash for a box that stands for a partly selected set. Inside a
+ * `CheckboxGroup` it takes its `value` and the group's selection instead.
+ *
+ * The call site's `className` and `style` land on the field as a whole,
+ * which is the element a layout positions.
+ */
+declare function Checkbox({ children, description, error, ...props }: CheckboxProps): import("react").JSX.Element;
+//#endregion
+export { type CheckboxProps, Checkbox as default };
+//# sourceMappingURL=index.d.ts.map

package/dist/components/checkbox/index.js

@@ -0,0 +1,221 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
+import { mergeStatefulStyles } from "../../styles/merge.js";
+import { useRipple } from "../../hooks/useRipple.js";
+import { FieldMessage } from "../../field/index.js";
+import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
+import { CheckGlyph, IndeterminateGlyph } from "../../glyphs/index.js";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { c } from "react/compiler-runtime";
+import { CheckboxButton, CheckboxField } from "react-aria-components";
+//#region src/components/checkbox/index.tsx
+const styles = {
+	box: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xjbqb8w",
+		kZKoxP: "xmix8c7",
+		kVAM5u: "x1is7jjm",
+		kaIpWk: "x1cum3z5",
+		ksu8eU: "x1y0btm7",
+		kMzoRj: "xdh2fpr",
+		kB7OPa: "x9f619",
+		kMwMTN: "xwjo7ld",
+		k1xSpc: "x78zum5",
+		kzqmXN: "x1xp8n7a",
+		kjj79g: "xl56j7k",
+		kIyJzY: "x1qno0dh",
+		k1ekBW: "xts7igz",
+		kAMwcw: "xpc4ca7",
+		$$css: true
+	},
+	boxMarked: {
+		kWkggS: "xnety89",
+		kVAM5u: "x9r1u3d",
+		$$css: true
+	},
+	boxMarkedDisabled: {
+		kWkggS: "x1crcgwy",
+		kVAM5u: "x9r1u3d",
+		kMwMTN: "xrpadme",
+		$$css: true
+	},
+	boxMarkedError: {
+		kWkggS: "xwi4nbo",
+		kVAM5u: "x9r1u3d",
+		kMwMTN: "x1l7c2jh",
+		$$css: true
+	},
+	boxUnmarkedActive: {
+		kVAM5u: "x1pacwz9",
+		$$css: true
+	},
+	boxUnmarkedDisabled: {
+		kVAM5u: "xp1r3on",
+		$$css: true
+	},
+	boxUnmarkedError: {
+		kVAM5u: "xx78ee7",
+		$$css: true
+	},
+	control: {
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xjbqb8w",
+		kZKoxP: "x1vqgdyp",
+		kaIpWk: "x3y1ksm",
+		kB7OPa: "x9f619",
+		kMwMTN: "x139gbkf",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x78zum5",
+		kmuXW: "x2lah0s",
+		kzqmXN: "x100vrsf",
+		kjj79g: "xl56j7k",
+		kVAEAm: "x1n2onr6",
+		kIyJzY: "x1qno0dh",
+		k1ekBW: "x15406qy",
+		kAMwcw: "xpc4ca7",
+		$$css: true
+	},
+	controlDisabled: {
+		kkrTdU: "x1h6gzvc",
+		$$css: true
+	},
+	controlFocused: {
+		kjBf7l: "xrgy624",
+		kInvED: "x1hl8ikr",
+		k3XXqK: "xaatb59",
+		kMeerF: "x1de99jn",
+		$$css: true
+	},
+	controlReadOnly: {
+		kkrTdU: "xt0e3qv",
+		$$css: true
+	}
+};
+const hoverLayers = {
+	error: {
+		kWkggS: "x55e1u4",
+		$$css: true
+	},
+	marked: {
+		kWkggS: "x659ado",
+		$$css: true
+	},
+	unmarked: {
+		kWkggS: "x1b18xnh",
+		$$css: true
+	}
+};
+const pressedLayers = {
+	error: {
+		kWkggS: "x3czxiy",
+		$$css: true
+	},
+	marked: {
+		kWkggS: "xjeeohs",
+		$$css: true
+	},
+	unmarked: {
+		kWkggS: "x1dvjsmr",
+		$$css: true
+	}
+};
+function buttonContent(children, ripple) {
+	return (state) => {
+		const marked = state.isSelected || state.isIndeterminate;
+		const interactive = !state.isDisabled && !state.isReadOnly;
+		const tone = state.isInvalid ? "error" : marked ? "marked" : "unmarked";
+		const active = state.isHovered || state.isPressed || state.isFocusVisible;
+		return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("span", {
+			...interactive ? ripple.handlers : {},
+			...props(styles.control, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused),
+			children: [/* @__PURE__ */ jsx("span", {
+				...props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled)),
+				children: state.isIndeterminate ? /* @__PURE__ */ jsx(IndeterminateGlyph, { className: "xmix8c7 x1lliihq x1xp8n7a" }) : state.isSelected ? /* @__PURE__ */ jsx(CheckGlyph, { className: "xmix8c7 x1lliihq x1xp8n7a" }) : null
+			}), interactive ? ripple.surface : null]
+		}), children === void 0 ? null : /* @__PURE__ */ jsx("span", {
+			...{
+				0: { className: "x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll" },
+				2: { className: "x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv" },
+				1: { className: "x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc" },
+				3: { className: "x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc" }
+			}[!!state.isReadOnly << 1 | !!state.isDisabled << 0],
+			children
+		})] });
+	};
+}
+/**
+* A checkbox with its label, and optionally a description or an error under
+* it. Its state is React Aria's: pass `isSelected` with `onChange` to
+* control it, or `defaultSelected` to let it keep its own; `isIndeterminate`
+* draws the dash for a box that stands for a partly selected set. Inside a
+* `CheckboxGroup` it takes its `value` and the group's selection instead.
+*
+* The call site's `className` and `style` land on the field as a whole,
+* which is the element a layout positions.
+*/
+function Checkbox(t0) {
+	const $ = c(18);
+	const { children, description, error, ...props } = t0;
+	const ripple = useRipple();
+	const validationBehavior = useFieldValidationBehavior();
+	const T0 = CheckboxField;
+	let t1;
+	if ($[0] !== error) {
+		t1 = invalidFrom(error);
+		$[0] = error;
+		$[1] = t1;
+	} else t1 = $[1];
+	const t2 = mergeStatefulStyles({ className: "x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz" }, props);
+	let t3;
+	if ($[2] !== children || $[3] !== ripple) {
+		t3 = buttonContent(children, ripple);
+		$[2] = children;
+		$[3] = ripple;
+		$[4] = t3;
+	} else t3 = $[4];
+	let t4;
+	if ($[5] !== t3) {
+		t4 = /* @__PURE__ */ jsx(CheckboxButton, {
+			className: "xjp7ctv",
+			children: t3
+		});
+		$[5] = t3;
+		$[6] = t4;
+	} else t4 = $[6];
+	let t5;
+	if ($[7] !== description || $[8] !== error) {
+		t5 = /* @__PURE__ */ jsx("div", {
+			className: "x1xdureb",
+			children: /* @__PURE__ */ jsx(FieldMessage, {
+				description,
+				error,
+				inset: false
+			})
+		});
+		$[7] = description;
+		$[8] = error;
+		$[9] = t5;
+	} else t5 = $[9];
+	let t6;
+	if ($[10] !== T0 || $[11] !== props || $[12] !== t1 || $[13] !== t2 || $[14] !== t4 || $[15] !== t5 || $[16] !== validationBehavior) {
+		t6 = /* @__PURE__ */ jsxs(T0, {
+			isInvalid: t1,
+			validationBehavior,
+			...props,
+			...t2,
+			children: [t4, t5]
+		});
+		$[10] = T0;
+		$[11] = props;
+		$[12] = t1;
+		$[13] = t2;
+		$[14] = t4;
+		$[15] = t5;
+		$[16] = validationBehavior;
+		$[17] = t6;
+	} else t6 = $[17];
+	return t6;
+}
+//#endregion
+export { Checkbox as default };
+
+//# sourceMappingURL=index.js.map

package/dist/components/checkbox/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":["description","error","validationBehavior"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxButton, CheckboxField } from 'react-aria-components';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\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 checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\nconst styles = {\n  box: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"xrpadme\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x139gbkf\",\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  controlDisabled: {\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  controlFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  controlReadOnly: {\n    kkrTdU: \"xt0e3qv\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all follow from it.\n   */\n  error?: string;\n} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\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. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: CheckboxButtonRenderProps) => {\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.control, state.isReadOnly && styles.controlReadOnly, state.isDisabled && styles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && styles.controlFocused)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        {children === undefined ? null : <span {...{\n        0: {\n          className: \"x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll\"\n        },\n        2: {\n          className: \"x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv\"\n        },\n        1: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        },\n        3: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n            {children}\n          </span>}\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\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 Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles({\n    className: \"x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz\"\n  }, props)}>\n      <CheckboxButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </CheckboxButton>\n      <div className=\"x1xdureb\">\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </CheckboxField>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":";;;;;;;;;;AAgCA,MAAM,SAAS;CACb,KAAK;EACH,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,WAAW;EACT,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,mBAAmB;EACjB,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,mBAAmB;EACjB,QAAQ;EACR,OAAO;CACT;CACA,qBAAqB;EACnB,QAAQ;EACR,OAAO;CACT;CACA,kBAAkB;EAChB,QAAQ;EACR,OAAO;CACT;CACA,SAAS;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;EACP,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;CACA,gBAAgB;EACd,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,QAAQ;EACR,OAAO;CACT;CACA,iBAAiB;EACf,QAAQ;EACR,OAAO;CACT;AACF;AAKA,MAAM,cAAc;CAClB,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AACA,MAAM,gBAAgB;CACpB,OAAO;EACL,QAAQ;EACR,OAAO;CACT;CACA,QAAQ;EACN,QAAQ;EACR,OAAO;CACT;CACA,UAAU;EACR,QAAQ;EACR,OAAO;CACT;AACF;AA4BA,SAAS,cAAc,UAAqB,QAAgB;CAC1D,QAAQ,UAAqC;EAC3C,MAAM,SAAS,MAAM,cAAc,MAAM;EACzC,MAAM,cAAc,CAAC,MAAM,cAAc,CAAC,MAAM;EAChD,MAAM,OAAa,MAAM,YAAY,UAAU,SAAS,WAAW;EACnE,MAAM,SAAS,MAAM,aAAa,MAAM,aAAa,MAAM;EAC3D,OAAO,qBAAA,UAAA,EAAA,UAAA,CACH,qBAAC,QAAD;GAAM,GAAI,cAAc,OAAO,WAAW,CAAC;GAAG,GAAI,MAAa,OAAO,SAAS,MAAM,cAAc,OAAO,iBAAiB,MAAM,cAAc,OAAO,iBAAiB,eAAe,MAAM,aAAa,YAAY,OAAO,eAAe,MAAM,aAAa,cAAc,OAAO,MAAM,kBAAkB,OAAO,cAAc;GAAhU,UAAA,CACE,oBAAC,QAAD;IAAM,GAAI,MAAa,OAAO,KAAK,UAAU,OAAO,WAAW,CAAC,UAAU,MAAM,aAAa,OAAO,kBAAkB,CAAC,UAAU,CAAC,MAAM,aAAa,eAAe,UAAU,OAAO,mBAAmB,UAAU,MAAM,aAAa,OAAO,gBAAgB,MAAM,eAAe,SAAS,OAAO,oBAAoB,OAAO,oBAAoB;IAC7U,UAAA,MAAM,kBAAkB,oBAAC,oBAAD,EAAoB,WAAU,4BAA2B,CAAA,IAAM,MAAM,aAAa,oBAAC,YAAD,EAAY,WAAU,4BAA2B,CAAA,IAAM;GAC9J,CAAA,GACL,cAAc,OAAO,UAAU,IAC5B;EACL,CAAA,GAAA,aAAa,KAAA,IAAY,OAAO,oBAAC,QAAD;GAAM,GAAI;IAC3C,GAAG,EACD,WAAW,gFACb;IACA,GAAG,EACD,WAAW,+EACb;IACA,GAAG,EACD,WAAW,gFACb;IACA,GAAG,EACD,WAAW,gFACb;GACF,EAAE,CAAC,CAAC,MAAM,cAAc,IAAI,CAAC,CAAC,MAAM,cAAc;GAC3C;EACG,CAAA,CACV,EAAA,CAAA;CACJ;AACF;;;;;;;;;;;AAYA,SAAA,SAAA,IAAA;CAAA,MAAA,IAAA,EAAA,EAAA;CAAkB,MAAA,EAAA,UAAA,aAAA,OAAA,GAAA,UAAA;CAMhB,MAAA,SAAe,UAA2B;CAC1C,MAAA,qBAA2B,2BAA2B;CAC9C,MAAA,KAAA;CAAa,IAAA;CAAA,IAAA,EAAA,OAAA,OAAA;EAAY,KAAA,YAAY,KAAK;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAyD,MAAA,KAAA,oBAAoB,EAAA,WACnH,0CACb,GAAG,KAAK;CAAC,IAAA;CAAA,IAAA,EAAA,OAAA,YAAA,EAAA,OAAA,QAAA;EAEF,KAAA,cAAc,UAAU,MAAM;EAAC,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,IAAA;EADlC,KAAA,oBAAC,gBAAD;GAA0B,WAAA;GACvB,UAAA;EADY,CAAA;EAEE,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,OAAA,eAAA,EAAA,OAAA,OAAA;EACjB,KAAA,oBAAA,OAAA;GAAe,WAAA;GACb,UAAA,oBAAC,cAAD;IAA2B;IAAoB;IAAc,OAAA;GAAK,CAAA;EAC9D,CAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;EAAA,EAAA,KAAA;CAAA,OAAA,KAAA,EAAA;CAAA,IAAA;CAAA,IAAA,EAAA,QAAA,MAAA,EAAA,QAAA,SAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,MAAA,EAAA,QAAA,oBAAA;EARH,KAAA,qBAAC,IAAD;GAA0B,WAAA;GAAwC;GAAkB,GAAM;GAAK,GAAM;GAArG,UAAA,CAGH,IAGA,EANiB;;EASH,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;EAAA,EAAA,MAAA;CAAA,OAAA,KAAA,EAAA;CAAA,OATX;AASW"}

package/dist/components/checkbox-group/index.d.ts

@@ -0,0 +1,38 @@
+import { ReactNode } from "react";
+import { CheckboxGroupProps } from "react-aria-components";
+//#region src/components/checkbox-group/index.d.ts
+type CheckboxGroupProps$1 = {
+  /** The checkboxes, each with a `value` of its own. */
+  children?: ReactNode;
+  /**
+   * A hint under the group. Replaced by `error` when there is one, so the
+   * two never stack.
+   */
+  description?: string;
+  /**
+   * The problem with the current selection, in words. Its presence is what
+   * puts the group in its error state — the message, the boxes' error
+   * colours and `aria-invalid` all follow from it.
+   */
+  error?: string;
+  /**
+   * What the group is for. Required rather than optional: a group of
+   * checkboxes with no name is a set of boxes a screen reader cannot
+   * introduce.
+   */
+  label: string;
+} & Omit<CheckboxGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;
+/**
+ * A labelled set of checkboxes with one value between them. The value is
+ * React Aria's: pass `value` with `onChange` to control it, or
+ * `defaultValue` to let the group keep its own, and each `Checkbox` inside
+ * names the entry it stands for with `value`. Disabled, read-only and the
+ * error state reach every checkbox from here.
+ *
+ * The call site's `className` and `style` land on the group as a whole,
+ * which is the element a layout positions.
+ */
+declare function CheckboxGroup$1({ children, description, error, label, ...props }: CheckboxGroupProps$1): import("react").JSX.Element;
+//#endregion
+export { type CheckboxGroupProps$1 as CheckboxGroupProps, CheckboxGroup$1 as default };
+//# sourceMappingURL=index.d.ts.map