@kanso-labs/kanso-ui 0.34.11 → 0.34.13

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","DisclosurePanelProps","RACDisclosurePanelProps","DisclosureProps","RACDisclosureProps","stylex","useContext","DisclosureStateContext","Button","RACButton","Disclosure","RACDisclosure","DisclosurePanel","RACDisclosurePanel","Heading","RACHeading","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","colors","motion","spacing","styles","header","kzqmXN","k9WMMc","$$css","DisclosureHeaderProps","children","headingLevel","leading","supporting","Omit","className","style","chevronFor","isExpanded","t0","$","_c","T0","t1","t2","t3","props","DisclosureHeader","undefined","state","ripple","headerClassName","handlers","t4","t5","surface","headerContent","t6","t7","Symbol","for","0","1","isDisabled","base","list","interactive","twoLine","disabled","Header","Panel"],"sources":["../../../src/components/disclosure/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { DisclosureStateContext, Button as RACButton, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, Heading as RACHeading } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\n\n// A section that opens to show what is under it, and closes again. The\n// header is the row every list here draws — `src/row`, shared with ListItem,\n// ListBox and List — so its 56dp floor, body-large headline, body-medium\n// supporting line and state layers are that module's, and a header sitting\n// above a list cannot drift from the rows below it.\n//\n// The lists page gives the expand interaction its own token set, which its\n// widget keeps behind a menu that does not open to a script. What the page\n// states in words covers the row, which is what the shared module already\n// carries; the chevron's size and the panel's inset below are the library's\n// own, taken from the row's own trailing slot and inline padding rather than\n// invented.\n//\n// Three things are this component's own.\n//\n// **The header is a heading with a button in it.** React Aria wants both —\n// the heading is what a screen reader jumps between, and the button is what\n// opens the section — so `Disclosure.Header` renders the pair rather than\n// leaving a call site to remember. `headingLevel` says where in the page's\n// outline it sits.\n//\n// **The panel opens to its own height, without one being measured.** A grid\n// whose single row goes from `0fr` to `1fr` interpolates between nothing and\n// the content's natural height, so no height is read from the DOM and no\n// number is written down. Under `prefers-reduced-motion` the row snaps\n// instead.\n//\n// **Only the opening animates, and that is React Aria's doing rather than a\n// choice here.** It marks the collapsed panel `hidden=\"until-found\"`, so on\n// the way closed the content stops being laid out at once and the track has\n// nothing left to shrink. Worth knowing before reaching for a closing\n// animation: it needs the panel kept in the layout, which would cost the\n// find-in-page behaviour that attribute buys.\n\nconst styles = {\n  header: {\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  }\n};\ntype DisclosureHeaderProps = {\n  /** The header's headline — what the section is about. */\n  children?: ReactNode;\n  /**\n   * Where the header sits in the page's outline. React Aria renders the\n   * trigger inside a heading, and a screen reader moves between them.\n   * @default 3\n   */\n  headingLevel?: number;\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n};\ntype DisclosurePanelProps = Omit<RACDisclosurePanelProps, 'className' | 'style'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: RACDisclosurePanelProps['className'];\n  /** A function may compute the style from the panel's render state. */\n  style?: RACDisclosurePanelProps['style'];\n};\ntype DisclosureProps = Omit<RACDisclosureProps, 'children'> & {\n  /** A `Disclosure.Header` and a `Disclosure.Panel`. */\n  children?: ReactNode;\n};\n\n// The chevron, turned or not. A call rather than JSX written at the prop,\n// which is what react-perf's jsx-no-jsx-as-prop is after; the React Compiler\n// memoises the result on `isExpanded`.\nfunction chevronFor(isExpanded: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n    },\n    1: {\n      className: \"x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n    }\n  }[!!isExpanded << 0]} />;\n}\n\n/**\n * A section that opens to show what is under it. Whether it is open is React\n * Aria's: pass `isExpanded` with `onExpandedChange` to control it, or\n * `defaultExpanded` to let it keep its own.\n *\n * ```tsx\n * <Disclosure>\n *   <Disclosure.Header>Headline</Disclosure.Header>\n *   <Disclosure.Panel>Supporting line</Disclosure.Panel>\n * </Disclosure>\n * ```\n *\n * The header is the row every list here draws, so a section above a list of\n * rows lines up with them. The panel opens to whatever height its content\n * turns out to have, and snaps rather than sliding under\n * `prefers-reduced-motion`.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Disclosure({\n  children,\n  ...props\n}: DisclosureProps) {\n  return <RACDisclosure {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {children}\n    </RACDisclosure>;\n}\n\n/**\n * The row that opens the section. It renders the heading React Aria wants\n * around the trigger and the button inside it, and draws the shared row's\n * slots with a chevron in the trailing one.\n */\nfunction DisclosureHeader({\n  children,\n  headingLevel = 3,\n  leading,\n  supporting\n}: DisclosureHeaderProps) {\n  // The chevron turns with the section, and React Aria's button render state\n  // reports the press states rather than what the button controls — so\n  // whether the section is open comes from the disclosure's own context.\n  const state = useContext(DisclosureStateContext);\n  // The press ripple a list's rows draw, since this is the same row. It is a\n  // button, which hears its own click, so the press ends there as Button's\n  // does, and a keyboard press draws one too.\n  const ripple = useRipple<FocusableElement>();\n  return <RACHeading level={headingLevel} className=\"x1qlqyl8 x1pd3egz x1ghz6dp\">\n      <RACButton className={headerClassName(supporting)} slot=\"trigger\" {...ripple.handlers}>\n        {headerContent(children, leading, supporting, state?.isExpanded === true, ripple.surface)}\n      </RACButton>\n    </RACHeading>;\n}\n\n/**\n * What the section shows while it is open. Its content lines up with the\n * headline above it, and it takes the group role React Aria gives it —\n * `role=\"region\"` names it in the landmark list instead, for a section a\n * reader should be able to jump to.\n */\nfunction DisclosurePanel({\n  children,\n  ...props\n}: DisclosurePanelProps) {\n  // The track has to know, and React Aria hands the render state to the panel\n  // rather than to what wraps it — so the state comes from its context, the\n  // same one its own panel reads.\n  const state = useContext(DisclosureStateContext);\n  return <div {...{\n    0: {\n      className: \"x12w9bfk xrvj5dj xihq33y xjvfotl x1qn9uv2 x1seskgd\"\n    },\n    1: {\n      className: \"x12w9bfk xrvj5dj xjvfotl x1qn9uv2 x1seskgd x1tu4anv\"\n    }\n  }[!!(state?.isExpanded === true) << 0]}>\n      <RACDisclosurePanel {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x2lwn1j xb3r6kr\"\n    }, props)}>\n        <div className=\"x9f619 xzfxn0k x790zyz\">{children}</div>\n      </RACDisclosurePanel>\n    </div>;\n}\n\n// The trigger's classes, from React Aria's render state. `isSelected` is not\n// among them — a disclosure's button reports `aria-expanded` rather than a\n// selection — so the row draws unselected throughout and only its disabled\n// state changes.\n//\n// A supporting line moves the header from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what the trigger is doing and not what it holds; the classes are\n// built by a call for the same reason `headerContent` is.\n// No overline, and so no three-line header. The row takes the list\n// variant's metrics because a header looks like a list row, but what it\n// follows is its own page, and that page gives a headline and a supporting\n// line — the three-line item belongs to the lists page, which `List.Item`\n// and `ListBox.Item` draw.\nfunction headerClassName(supporting: ReactNode) {\n  return (state: {\n    isDisabled: boolean;\n  }) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, supporting !== undefined && rowStyles.twoLine, state.isDisabled && rowStyles.disabled).className ?? '';\n}\n\n// What the header row draws. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its inputs.\nfunction headerContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, isExpanded: boolean, ripple: ReactNode) {\n  return (state: {\n    isDisabled: boolean;\n  }) => <>\n      <RowContent isDisabled={state.isDisabled} leading={leading} supporting={supporting} trailing={chevronFor(isExpanded)}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\nDisclosure.Header = DisclosureHeader;\nDisclosure.Panel = DisclosurePanel;\nexport type { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps };\nexport default Disclosure;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","DisclosurePanelProps","RACDisclosurePanelProps","DisclosureProps","RACDisclosureProps","stylex","useContext","DisclosureStateContext","Button","RACButton","Disclosure","RACDisclosure","DisclosurePanel","RACDisclosurePanel","Heading","RACHeading","ChevronEndGlyph","useRipple","RowContent","rowStyles","mergeStatefulStyles","colors","motion","spacing","styles","header","kzqmXN","k9WMMc","$$css","DisclosureHeaderProps","children","headingLevel","leading","supporting","Omit","className","style","chevronFor","isExpanded","t0","$","_c","T0","t1","t2","t3","props","DisclosureHeader","undefined","state","ripple","headerClassName","handlers","t4","t5","surface","headerContent","t6","t7","Symbol","for","0","1","isDisabled","base","list","interactive","twoLine","disabled","Header","Panel","Disclosure","_c","RACDisclosure","RACButton","RACHeading","DisclosurePanel","RACDisclosurePanel","stylex.props"],"sources":["../../../src/components/disclosure/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, DisclosurePanelProps as RACDisclosurePanelProps, DisclosureProps as RACDisclosureProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { DisclosureStateContext, Button as RACButton, Disclosure as RACDisclosure, DisclosurePanel as RACDisclosurePanel, Heading as RACHeading } from 'react-aria-components';\nimport { ChevronEndGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { rowStyles } from '../../row/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, spacing } from '../../tokens/design.tokens.stylex';\n\n// A section that opens to show what is under it, and closes again. The\n// header is the row every list here draws — `src/row`, shared with ListItem,\n// ListBox and List — so its 56dp floor, body-large headline, body-medium\n// supporting line and state layers are that module's, and a header sitting\n// above a list cannot drift from the rows below it.\n//\n// The lists page gives the expand interaction its own token set, which its\n// widget keeps behind a menu that does not open to a script. What the page\n// states in words covers the row, which is what the shared module already\n// carries; the chevron's size and the panel's inset below are the library's\n// own, taken from the row's own trailing slot and inline padding rather than\n// invented.\n//\n// Three things are this component's own.\n//\n// **The header is a heading with a button in it.** React Aria wants both —\n// the heading is what a screen reader jumps between, and the button is what\n// opens the section — so `Disclosure.Header` renders the pair rather than\n// leaving a call site to remember. `headingLevel` says where in the page's\n// outline it sits.\n//\n// **The panel opens to its own height, without one being measured.** A grid\n// whose single row goes from `0fr` to `1fr` interpolates between nothing and\n// the content's natural height, so no height is read from the DOM and no\n// number is written down. Under `prefers-reduced-motion` the row snaps\n// instead.\n//\n// **Only the opening animates, and that is React Aria's doing rather than a\n// choice here.** It marks the collapsed panel `hidden=\"until-found\"`, so on\n// the way closed the content stops being laid out at once and the track has\n// nothing left to shrink. Worth knowing before reaching for a closing\n// animation: it needs the panel kept in the layout, which would cost the\n// find-in-page behaviour that attribute buys.\n\nconst styles = {\n  header: {\n    kzqmXN: \"xh8yej3\",\n    k9WMMc: \"x1yc453h\",\n    $$css: true\n  }\n};\ntype DisclosureHeaderProps = {\n  /** The header's headline — what the section is about. */\n  children?: ReactNode;\n  /**\n   * Where the header sits in the page's outline. React Aria renders the\n   * trigger inside a heading, and a screen reader moves between them.\n   * @default 3\n   */\n  headingLevel?: number;\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n};\ntype DisclosurePanelProps = Omit<RACDisclosurePanelProps, 'className' | 'style'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: RACDisclosurePanelProps['className'];\n  /** A function may compute the style from the panel's render state. */\n  style?: RACDisclosurePanelProps['style'];\n};\ntype DisclosureProps = Omit<RACDisclosureProps, 'children'> & {\n  /** A `Disclosure.Header` and a `Disclosure.Panel`. */\n  children?: ReactNode;\n};\n\n// The chevron, turned or not. A call rather than JSX written at the prop,\n// which is what react-perf's jsx-no-jsx-as-prop is after; the React Compiler\n// memoises the result on `isExpanded`.\nfunction chevronFor(isExpanded: boolean) {\n  return <ChevronEndGlyph {...{\n    0: {\n      className: \"x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p x19axjrm x1c071of xkzkux9 x11xpdln xpc4ca7\"\n    },\n    1: {\n      className: \"x12w9bfk xxk0z11 x1w5n3ug x2lah0s xvy4d1p xkzkux9 x11xpdln xpc4ca7 x1y10d4b x1iffjtl\"\n    }\n  }[!!isExpanded << 0]} />;\n}\n\n/**\n * A section that opens to show what is under it. Whether it is open is React\n * Aria's: pass `isExpanded` with `onExpandedChange` to control it, or\n * `defaultExpanded` to let it keep its own.\n *\n * ```tsx\n * <Disclosure>\n *   <Disclosure.Header>Headline</Disclosure.Header>\n *   <Disclosure.Panel>Supporting line</Disclosure.Panel>\n * </Disclosure>\n * ```\n *\n * The header is the row every list here draws, so a section above a list of\n * rows lines up with them. The panel opens to whatever height its content\n * turns out to have, and snaps rather than sliding under\n * `prefers-reduced-motion`.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction Disclosure({\n  children,\n  ...props\n}: DisclosureProps) {\n  return <RACDisclosure {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {children}\n    </RACDisclosure>;\n}\n\n/**\n * The row that opens the section. It renders the heading React Aria wants\n * around the trigger and the button inside it, and draws the shared row's\n * slots with a chevron in the trailing one.\n */\nfunction DisclosureHeader({\n  children,\n  headingLevel = 3,\n  leading,\n  supporting\n}: DisclosureHeaderProps) {\n  // The chevron turns with the section, and React Aria's button render state\n  // reports the press states rather than what the button controls — so\n  // whether the section is open comes from the disclosure's own context.\n  const state = useContext(DisclosureStateContext);\n  // The press ripple a list's rows draw, since this is the same row. It is a\n  // button, which hears its own click, so the press ends there as Button's\n  // does, and a keyboard press draws one too.\n  const ripple = useRipple<FocusableElement>();\n  return <RACHeading level={headingLevel} className=\"x1qlqyl8 x1pd3egz x1ghz6dp\">\n      <RACButton className={headerClassName(supporting)} slot=\"trigger\" {...ripple.handlers}>\n        {headerContent(children, leading, supporting, state?.isExpanded === true, ripple.surface)}\n      </RACButton>\n    </RACHeading>;\n}\n\n/**\n * What the section shows while it is open. Its content lines up with the\n * headline above it, and it takes the group role React Aria gives it —\n * `role=\"region\"` names it in the landmark list instead, for a section a\n * reader should be able to jump to.\n */\nfunction DisclosurePanel({\n  children,\n  ...props\n}: DisclosurePanelProps) {\n  // The track has to know, and React Aria hands the render state to the panel\n  // rather than to what wraps it — so the state comes from its context, the\n  // same one its own panel reads.\n  const state = useContext(DisclosureStateContext);\n  return <div {...{\n    0: {\n      className: \"x12w9bfk xrvj5dj xihq33y xjvfotl x1qn9uv2 x1seskgd\"\n    },\n    1: {\n      className: \"x12w9bfk xrvj5dj xjvfotl x1qn9uv2 x1seskgd x1tu4anv\"\n    }\n  }[!!(state?.isExpanded === true) << 0]}>\n      <RACDisclosurePanel {...props} {...mergeStatefulStyles({\n      className: \"x9f619 x2lwn1j xb3r6kr\"\n    }, props)}>\n        <div className=\"x9f619 xzfxn0k x790zyz\">{children}</div>\n      </RACDisclosurePanel>\n    </div>;\n}\n\n// The trigger's classes, from React Aria's render state. `isSelected` is not\n// among them — a disclosure's button reports `aria-expanded` rather than a\n// selection — so the row draws unselected throughout and only its disabled\n// state changes.\n//\n// A supporting line moves the header from the page's one-line container\n// height to its two-line one, which is a floor rather than something the\n// row's own box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as\n// an argument rather than read from the render state, since React Aria\n// reports what the trigger is doing and not what it holds; the classes are\n// built by a call for the same reason `headerContent` is.\n// No overline, and so no three-line header. The row takes the list\n// variant's metrics because a header looks like a list row, but what it\n// follows is its own page, and that page gives a headline and a supporting\n// line — the three-line item belongs to the lists page, which `List.Item`\n// and `ListBox.Item` draw.\nfunction headerClassName(supporting: ReactNode) {\n  return (state: {\n    isDisabled: boolean;\n  }) => stylex.props(rowStyles.base, rowStyles.list, rowStyles.interactive, styles.header, supporting !== undefined && rowStyles.twoLine, state.isDisabled && rowStyles.disabled).className ?? '';\n}\n\n// What the header row draws. Built by a call rather than written inline at\n// the prop, which is what react-perf's no-new-function-as-prop is after; the\n// React Compiler memoises the result on its inputs.\nfunction headerContent(children: ReactNode, leading: ReactNode, supporting: ReactNode, isExpanded: boolean, ripple: ReactNode) {\n  return (state: {\n    isDisabled: boolean;\n  }) => <>\n      <RowContent isDisabled={state.isDisabled} leading={leading} supporting={supporting} trailing={chevronFor(isExpanded)}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\nDisclosure.Header = DisclosureHeader;\nDisclosure.Panel = DisclosurePanel;\nexport type { DisclosureHeaderProps, DisclosurePanelProps, DisclosureProps };\nexport default Disclosure;"],"mappings":"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"}

package/dist/components/disclosure-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DisclosureGroupProps","RACDisclosureGroupProps","stylex","Children","Fragment","isValidElement","DisclosureGroup","RACDisclosureGroup","mergeStatefulStyles","Separator","Omit","children","divided","t0","$","_c","T0","t1","t2","t3","t4","props","undefined","className","dividedChildren","sections","flatten","map","section","index","keyOf","toArray","flatMap","child","type","key","String"],"sources":["../../../src/components/disclosure-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DisclosureGroupProps as RACDisclosureGroupProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Children, Fragment, isValidElement } from 'react';\nimport { DisclosureGroup as RACDisclosureGroup } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport Separator from '../separator';\n\n// A stack of Disclosures that agree with each other about what is open —\n// the lists page's accordion. The sections are the library's own\n// `Disclosure`, unchanged: this adds only the agreement between them and the\n// rule that divides them.\n//\n// Give each section an `id`, which is the key the group reports as expanded.\n// Whether one opens at a time or several is `allowsMultipleExpanded`, and it\n// is React Aria's rather than two components — a group that closes the last\n// section when a new one opens is the same stack with a different word.\n//\n// Two things are this component's own.\n//\n// **A rule between the sections, and none at the ends.** The group renders\n// the library's `Separator` between each pair rather than asking each\n// section to draw a border, so a section drawn on its own and a section in a\n// group stay the same component. `divided={false}` leaves them undivided,\n// for a stack sitting on cards of its own.\n//\n// **Nothing else is added.** The group draws no container, no corner and no\n// colour: an accordion inside a card and one running down a page want\n// different surroundings, and the page is what knows which it is.\n//\n// The lists page keeps its expand-interaction tokens behind a token-set menu\n// that does not open to a script, so what is drawn here is what the page\n// states in words plus what `Disclosure` already carries; see that\n// component's comment for the same note.\n\ntype DisclosureGroupProps = Omit<RACDisclosureGroupProps, 'children'> & {\n  /** The sections, as `Disclosure` elements each given an `id`. */\n  children?: ReactNode;\n  /**\n   * Whether a rule is drawn between the sections. There is never one above\n   * the first or below the last.\n   * @default true\n   */\n  divided?: boolean;\n};\n\n/**\n * A stack of `Disclosure` sections that agree about what is open. Which are\n * expanded is React Aria's: pass `expandedKeys` with `onExpandedChange` to\n * control it, or `defaultExpandedKeys` to let the group keep its own.\n *\n * ```tsx\n * <DisclosureGroup defaultExpandedKeys={FIRST}>\n *   <Disclosure id=\"first\">\n *     <Disclosure.Header>Headline</Disclosure.Header>\n *     <Disclosure.Panel>Supporting line</Disclosure.Panel>\n *   </Disclosure>\n * </DisclosureGroup>\n * ```\n *\n * One section opens at a time unless `allowsMultipleExpanded` says otherwise.\n * Give every section an `id` — that is the key the group reports.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction DisclosureGroup({\n  children,\n  divided = true,\n  ...props\n}: DisclosureGroupProps) {\n  return <RACDisclosureGroup {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {divided ? dividedChildren(children) : children}\n    </RACDisclosureGroup>;\n}\n\n// The sections with a rule between each pair, and none at the ends.\nfunction dividedChildren(children: ReactNode) {\n  const sections = flatten(children);\n  return sections.map((section, index) => <Fragment key={keyOf(section, index)}>\n      {index === 0 ? null : <Separator />}\n      {section}\n    </Fragment>);\n}\n\n// The sections, with any fragment around them opened up first.\n// `Children.toArray` flattens arrays but hands back a fragment as one child,\n// and a call site that writes its sections inside one — or maps over data and\n// wraps the result — would otherwise get a single entry and no rules at all.\n// Recursive, since a fragment may hold another.\nfunction flatten(children: ReactNode): ReactNode[] {\n  return Children.toArray(children).flatMap(child => {\n    if (isValidElement<{\n      children?: ReactNode;\n    }>(child)) {\n      if (child.type === Fragment) {\n        return flatten(child.props.children);\n      }\n    }\n    return [child];\n  });\n}\n\n// The key `Children.toArray` put on the entry, falling back to its position\n// for anything that is not an element — a string between two sections is not\n// a thing this component expects, but it should render rather than throw.\nfunction keyOf(section: ReactNode, index: number) {\n  if (isValidElement(section)) {\n    return section.key ?? String(index);\n  }\n  return String(index);\n}\nexport type { DisclosureGroupProps };\nexport default DisclosureGroup;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,SAAAO,kBAAAO,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAL;CAAA,IAAAC;CAAA,IAAAK;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAyB,MAAA,EAAAF,UAAAQ,IAAAP,SAAAQ,IAAA,GAAAC,UAAAR;EAAAF,WAAAQ;EAEvBP,UAAAQ,OAAAE,KAAAA,IAAA,OAAAF;EAGQJ,KAAAT;EAAuBc,KAAAA;EAAWH,KAAAV,oBAAoB,EAAAe,WACjD,yBACb,GAAGF,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAF,KAAAF,EAAA;EAAAH,WAAAG,EAAA;EAAAF,UAAAE,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAH,YAAAG,EAAA,OAAAF,SAAA;EACJO,KAAAP,UAAUY,gBAAgBb,QAAmB,IAA7CA;EAA8CG,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAH5CC,KAAA,oBAAC,IAAD;GAAmB,GAAKC;GAAK,GAAMH;GAGrCC,UAAAA;EAHqB,CAAA;EAIHL,EAAA,KAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAJhBM;AAIgB;AAIzB,SAASI,gBAAgBb,UAAqB;CAE5C,OADiBe,QAAQf,QAClBc,CAAQ,CAACE,KAAKC,SAASC,UAAU,qBAAC,UAAD,EAAA,UAAA,CACnCA,UAAU,IAAI,OAAO,oBAAC,aAAD,CAAU,CAAA,GAC/BD,OACO,EAAA,GAH2CE,MAAMF,SAASC,KAAK,CAG/D,CAAC;AACf;AAOA,SAASH,QAAQf,UAAkC;CACjD,OAAOR,SAAS4B,QAAQpB,QAAQ,CAAC,CAACqB,SAAQC,UAAS;EACjD,IAAI5B,eAED4B,KAAK,GACFA;OAAAA,MAAMC,SAAS9B,UACjB,OAAOsB,QAAQO,MAAMZ,MAAMV,QAAQ;EAAA;EAGvC,OAAO,CAACsB,KAAK;CACf,CAAC;AACH;AAKA,SAASH,MAAMF,SAAoBC,OAAe;CAChD,IAAIxB,eAAeuB,OAAO,GACxB,OAAOA,QAAQO,OAAOC,OAAOP,KAAK;CAEpC,OAAOO,OAAOP,KAAK;AACrB"}
+{"version":3,"file":"index.js","names":["ReactNode","DisclosureGroupProps","RACDisclosureGroupProps","stylex","Children","Fragment","isValidElement","DisclosureGroup","RACDisclosureGroup","mergeStatefulStyles","Separator","Omit","children","divided","t0","$","_c","T0","t1","t2","t3","t4","props","undefined","className","dividedChildren","sections","flatten","map","section","index","keyOf","toArray","flatMap","child","type","key","String","DisclosureGroup","_c","RACDisclosureGroup","Separator"],"sources":["../../../src/components/disclosure-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DisclosureGroupProps as RACDisclosureGroupProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Children, Fragment, isValidElement } from 'react';\nimport { DisclosureGroup as RACDisclosureGroup } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport Separator from '../separator';\n\n// A stack of Disclosures that agree with each other about what is open —\n// the lists page's accordion. The sections are the library's own\n// `Disclosure`, unchanged: this adds only the agreement between them and the\n// rule that divides them.\n//\n// Give each section an `id`, which is the key the group reports as expanded.\n// Whether one opens at a time or several is `allowsMultipleExpanded`, and it\n// is React Aria's rather than two components — a group that closes the last\n// section when a new one opens is the same stack with a different word.\n//\n// Two things are this component's own.\n//\n// **A rule between the sections, and none at the ends.** The group renders\n// the library's `Separator` between each pair rather than asking each\n// section to draw a border, so a section drawn on its own and a section in a\n// group stay the same component. `divided={false}` leaves them undivided,\n// for a stack sitting on cards of its own.\n//\n// **Nothing else is added.** The group draws no container, no corner and no\n// colour: an accordion inside a card and one running down a page want\n// different surroundings, and the page is what knows which it is.\n//\n// The lists page keeps its expand-interaction tokens behind a token-set menu\n// that does not open to a script, so what is drawn here is what the page\n// states in words plus what `Disclosure` already carries; see that\n// component's comment for the same note.\n\ntype DisclosureGroupProps = Omit<RACDisclosureGroupProps, 'children'> & {\n  /** The sections, as `Disclosure` elements each given an `id`. */\n  children?: ReactNode;\n  /**\n   * Whether a rule is drawn between the sections. There is never one above\n   * the first or below the last.\n   * @default true\n   */\n  divided?: boolean;\n};\n\n/**\n * A stack of `Disclosure` sections that agree about what is open. Which are\n * expanded is React Aria's: pass `expandedKeys` with `onExpandedChange` to\n * control it, or `defaultExpandedKeys` to let the group keep its own.\n *\n * ```tsx\n * <DisclosureGroup defaultExpandedKeys={FIRST}>\n *   <Disclosure id=\"first\">\n *     <Disclosure.Header>Headline</Disclosure.Header>\n *     <Disclosure.Panel>Supporting line</Disclosure.Panel>\n *   </Disclosure>\n * </DisclosureGroup>\n * ```\n *\n * One section opens at a time unless `allowsMultipleExpanded` says otherwise.\n * Give every section an `id` — that is the key the group reports.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction DisclosureGroup({\n  children,\n  divided = true,\n  ...props\n}: DisclosureGroupProps) {\n  return <RACDisclosureGroup {...props} {...mergeStatefulStyles({\n    className: \"x9f619 x78zum5 xdt5ytf\"\n  }, props)}>\n      {divided ? dividedChildren(children) : children}\n    </RACDisclosureGroup>;\n}\n\n// The sections with a rule between each pair, and none at the ends.\nfunction dividedChildren(children: ReactNode) {\n  const sections = flatten(children);\n  return sections.map((section, index) => <Fragment key={keyOf(section, index)}>\n      {index === 0 ? null : <Separator />}\n      {section}\n    </Fragment>);\n}\n\n// The sections, with any fragment around them opened up first.\n// `Children.toArray` flattens arrays but hands back a fragment as one child,\n// and a call site that writes its sections inside one — or maps over data and\n// wraps the result — would otherwise get a single entry and no rules at all.\n// Recursive, since a fragment may hold another.\nfunction flatten(children: ReactNode): ReactNode[] {\n  return Children.toArray(children).flatMap(child => {\n    if (isValidElement<{\n      children?: ReactNode;\n    }>(child)) {\n      if (child.type === Fragment) {\n        return flatten(child.props.children);\n      }\n    }\n    return [child];\n  });\n}\n\n// The key `Children.toArray` put on the entry, falling back to its position\n// for anything that is not an element — a string between two sections is not\n// a thing this component expects, but it should render rather than throw.\nfunction keyOf(section: ReactNode, index: number) {\n  if (isValidElement(section)) {\n    return section.key ?? String(index);\n  }\n  return String(index);\n}\nexport type { DisclosureGroupProps };\nexport default DisclosureGroup;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAkEA,SAAAO,kBAAAO,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAL;CAAA,IAAAC;CAAA,IAAAK;CAAA,IAAAC;CAAA,IAAAJ,EAAA,OAAAD,IAAA;EAAyB,MAAA,EAAAF,UAAAQ,IAAAP,SAAAQ,IAAA,GAAAC,UAAAR;EAAAF,WAAAQ;EAEvBP,UAAAQ,OAAAE,KAAAA,IAAA,OAAAF;EAGQJ,KAAAT;EAAuBc,KAAAA;EAAWH,KAAAV,oBAAoB,EAAAe,WACjD,yBACb,GAAGF,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAG;EAAAH,EAAA,KAAAI;CAAA,OAAA;EAAAF,KAAAF,EAAA;EAAAH,WAAAG,EAAA;EAAAF,UAAAE,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;CAAA;CAAA,IAAAK;CAAA,IAAAL,EAAA,OAAAH,YAAAG,EAAA,OAAAF,SAAA;EACJO,KAAAP,UAAUY,gBAAgBb,QAAmB,IAA7CA;EAA8CG,EAAA,KAAAH;EAAAG,EAAA,KAAAF;EAAAE,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,QAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAH5CC,KAAA,oBAAC,IAAD;GAAmB,GAAKC;GAAK,GAAMH;GAGrCC,UAAAA;EAHqB,CAAA;EAIHL,EAAA,KAAAE;EAAAF,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAJhBM;AAIgB;AAIzB,SAASI,gBAAgBb,UAAqB;CAE5C,OADiBe,QAAQf,QAClBc,CAAQ,CAACE,KAAKC,SAASC,UAAU,qBAAC,UAAD,EAAA,UAAA,CACnCA,UAAU,IAAI,OAAO,oBAACW,aAAD,CAAU,CAAA,GAC/BZ,OACO,EAAA,GAH2CE,MAAMF,SAASC,KAAK,CAG/D,CAAC;AACf;AAOA,SAASH,QAAQf,UAAkC;CACjD,OAAOR,SAAS4B,QAAQpB,QAAQ,CAAC,CAACqB,SAAQC,UAAS;EACjD,IAAI5B,eAED4B,KAAK,GACFA;OAAAA,MAAMC,SAAS9B,UACjB,OAAOsB,QAAQO,MAAMZ,MAAMV,QAAQ;EAAA;EAGvC,OAAO,CAACsB,KAAK;CACf,CAAC;AACH;AAKA,SAASH,MAAMF,SAAoBC,OAAe;CAChD,IAAIxB,eAAeuB,OAAO,GACxB,OAAOA,QAAQO,OAAOC,OAAOP,KAAK;CAEpC,OAAOO,OAAOP,KAAK;AACrB"}

package/dist/components/drop-zone/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","DropZoneProps","RACDropZoneProps","FileTriggerProps","RACFileTriggerProps","stylex","DropZone","RACDropZone","FileTrigger","RACFileTrigger","mergeStatefulStyles","dropZoneStyles","rootStyles","Omit","children","className","label","style","content","isDisabled","undefined","props","labelDisabled","t0","$","_c","T0","t1","t2","t3","t4","t5"],"sources":["../../../src/components/drop-zone/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DropZoneProps as RACDropZoneProps, FileTriggerProps as RACFileTriggerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DropZone as RACDropZone, FileTrigger as RACFileTrigger } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { dropZoneStyles, rootStyles } from './styles';\n\n// A place to drop files, and a button that opens the file picker. The design\n// system carries no page for either — there is no drop target and no file\n// input in it — so the drop target is drawn from the nearest thing it does\n// carry, the outlined card: the same surface, the same 1dp outline-variant\n// rule and the same medium corner.\n//\n// Two departures from that card, both this component's own.\n//\n// **The rule is dashed rather than solid.** A solid rule reads as a card,\n// which is a thing that holds content; a dashed one reads as a place to put\n// something, which is what this is. It is the one convention strong enough\n// that drawing it as a card would be the surprising choice.\n//\n// **Dropping over it fills it.** The rule goes to the primary role and the\n// surface to primary container, which is the same pair a selected list row\n// takes — so \"this is the target\" looks the same here as \"this is the one\n// chosen\" does elsewhere.\n//\n// **The label names the target rather than being composed into a name.**\n// React Aria puts a visually hidden button inside and, given nothing, labels\n// it `DropZone` — its own component name, untranslated, which is what a\n// screen reader would then read out. Passing the label through as the\n// button's `aria-label` and drawing the text as ordinary content is what\n// makes the name the words the call site wrote and nothing else; React\n// Aria's own label slot would compose the two and say both.\n//\n// `FileTrigger` is beside it rather than inside it, and that is React Aria's\n// shape rather than a choice here: a file picker is useful on its own, with\n// no drop target anywhere near it. It renders nothing but a hidden input, so\n// it takes no `className` or `style` of its own — whatever it wraps is what\n// is seen, and that is normally the library's Button.\n\ntype DropZoneProps = Omit<RACDropZoneProps, 'children' | 'className' | 'style'> & {\n  /** What the target holds: its label, and whatever else it offers. */\n  children?: ReactNode;\n  /** A function may compute the class from the target's render state. */\n  className?: RACDropZoneProps['className'];\n  /**\n   * What the target says it is for. Drawn inside it and used as its\n   * accessible name, so a target with one needs no `aria-label`. A string\n   * rather than a node, since it is what names the target; anything richer\n   * goes in `children` beside it.\n   */\n  label?: string;\n  /** A function may compute the style from the target's render state. */\n  style?: RACDropZoneProps['style'];\n};\ntype FileTriggerProps = RACFileTriggerProps;\n\n// What the target draws, from React Aria's render state. Written as a call\n// rather than inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction content(children: ReactNode, label: string | undefined, isDisabled: boolean) {\n  return <>\n      {label === undefined ? null : <p {...stylex.props(dropZoneStyles.label, isDisabled && dropZoneStyles.labelDisabled)}>\n          {label}\n        </p>}\n      {children}\n    </>;\n}\n\n/**\n * A place to drop files. What is dropped is React Aria's: `onDrop` is handed\n * the items, and `isFileDropItem`, `isDirectoryDropItem`, `isTextDropItem`\n * and `DIRECTORY_DRAG_TYPE` are exported from the package for reading them.\n *\n * ```tsx\n * <DropZone label=\"Drop here\" onDrop={handleDrop}>\n *   <FileTrigger onSelect={handleSelect}>\n *     <Button variant=\"outlined\">Label</Button>\n *   </FileTrigger>\n * </DropZone>\n * ```\n *\n * It is drawn from the outlined card, with a dashed rule rather than a solid\n * one, and fills with the primary container while something is over it.\n * `label` both draws the words and names the target; `aria-label` names it\n * without drawing anything, for a page that already says what it takes.\n *\n * The call site's `className` and `style` land on the target itself, which\n * is the element a layout positions.\n */\nfunction DropZone({\n  children,\n  label,\n  ...props\n}: DropZoneProps) {\n  return <RACDropZone aria-label={props['aria-label'] ?? label} {...props} {...mergeStatefulStyles(rootStyles, props)}>\n      {content(children, label, props.isDisabled ?? false)}\n    </RACDropZone>;\n}\n\n/**\n * A button that opens the file picker. Wrap whatever should open it —\n * normally the library's Button — and take the files from `onSelect`.\n *\n * ```tsx\n * <FileTrigger acceptedFileTypes={['image/*']} onSelect={handleSelect}>\n *   <Button>Label</Button>\n * </FileTrigger>\n * ```\n *\n * It renders nothing of its own but the hidden input, so it takes no\n * `className` or `style`: what is seen is whatever it wraps. `allowsMultiple`\n * takes more than one file, `acceptDirectory` takes a folder, and\n * `defaultCamera` opens straight to a camera on a device that has one.\n */\nfunction FileTrigger(props: FileTriggerProps) {\n  return <RACFileTrigger {...props} />;\n}\nexport type { DropZoneProps, FileTriggerProps };\nexport { FileTrigger };\nexport default DropZone;"],"mappings":";;;;;;;AA4DA,SAASkB,QAAQJ,UAAqBE,OAA2BG,YAAqB;CACpF,OAAO,qBAAA,UAAA,EAAA,UAAA,CACFH,UAAUI,KAAAA,IAAY,OAAO,oBAAC,KAAD;EAAG,GAAIf,MAAaM,eAAeK,OAAOG,cAAcR,eAAeW,aAAa;EAC7GN,UAAAA;CACA,CAAA,GACJF,QACH,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAAR,WAAAiB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAkB,MAAA,EAAAT,UAAAE,OAAA,GAAAK,UAAAE;EAKRG,KAAAnB;EAAwBoB,KAAAN,MAAM,iBAANL;EAAkCK,KAAAA;EAAWQ,KAAAnB,oBAAoBE,YAAYS,KAAK;EAC7GS,KAAAZ,QAAQJ,UAAUE,OAAOK,MAAKF,cAAL,KAAyB;EAACK,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,MAAAL,EAAA,QAAAM,IAAA;EADjDC,KAAA,oBAAC,IAAD;GAAyB,cAAAJ;GAA4B,GAAMN;GAAK,GAAMQ;GACxEC,UAAAA;EADc,CAAA;EAEHN,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAFTO;AAES;;;;;;;;;;;;;;;;AAkBlB,SAAAvB,cAAAa,OAAA;CAAA,MAAAG,IAAAC,EAAA,CAAA;CAAA,IAAAF;CAAA,IAAAC,EAAA,OAAAH,OAAA;EACSE,KAAA,oBAAC,aAAD,EAAe,GAAKF,MAAK,CAAA;EAAIG,EAAA,KAAAH;EAAAG,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,OAA7BD;AAA6B"}
+{"version":3,"file":"index.js","names":["ReactNode","DropZoneProps","RACDropZoneProps","FileTriggerProps","RACFileTriggerProps","stylex","DropZone","RACDropZone","FileTrigger","RACFileTrigger","mergeStatefulStyles","dropZoneStyles","rootStyles","Omit","children","className","label","style","content","isDisabled","undefined","props","labelDisabled","t0","$","_c","T0","t1","t2","t3","t4","t5","stylex.props","DropZone","_c","RACDropZone","FileTrigger","RACFileTrigger"],"sources":["../../../src/components/drop-zone/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { DropZoneProps as RACDropZoneProps, FileTriggerProps as RACFileTriggerProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { DropZone as RACDropZone, FileTrigger as RACFileTrigger } from 'react-aria-components';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport { dropZoneStyles, rootStyles } from './styles';\n\n// A place to drop files, and a button that opens the file picker. The design\n// system carries no page for either — there is no drop target and no file\n// input in it — so the drop target is drawn from the nearest thing it does\n// carry, the outlined card: the same surface, the same 1dp outline-variant\n// rule and the same medium corner.\n//\n// Two departures from that card, both this component's own.\n//\n// **The rule is dashed rather than solid.** A solid rule reads as a card,\n// which is a thing that holds content; a dashed one reads as a place to put\n// something, which is what this is. It is the one convention strong enough\n// that drawing it as a card would be the surprising choice.\n//\n// **Dropping over it fills it.** The rule goes to the primary role and the\n// surface to primary container, which is the same pair a selected list row\n// takes — so \"this is the target\" looks the same here as \"this is the one\n// chosen\" does elsewhere.\n//\n// **The label names the target rather than being composed into a name.**\n// React Aria puts a visually hidden button inside and, given nothing, labels\n// it `DropZone` — its own component name, untranslated, which is what a\n// screen reader would then read out. Passing the label through as the\n// button's `aria-label` and drawing the text as ordinary content is what\n// makes the name the words the call site wrote and nothing else; React\n// Aria's own label slot would compose the two and say both.\n//\n// `FileTrigger` is beside it rather than inside it, and that is React Aria's\n// shape rather than a choice here: a file picker is useful on its own, with\n// no drop target anywhere near it. It renders nothing but a hidden input, so\n// it takes no `className` or `style` of its own — whatever it wraps is what\n// is seen, and that is normally the library's Button.\n\ntype DropZoneProps = Omit<RACDropZoneProps, 'children' | 'className' | 'style'> & {\n  /** What the target holds: its label, and whatever else it offers. */\n  children?: ReactNode;\n  /** A function may compute the class from the target's render state. */\n  className?: RACDropZoneProps['className'];\n  /**\n   * What the target says it is for. Drawn inside it and used as its\n   * accessible name, so a target with one needs no `aria-label`. A string\n   * rather than a node, since it is what names the target; anything richer\n   * goes in `children` beside it.\n   */\n  label?: string;\n  /** A function may compute the style from the target's render state. */\n  style?: RACDropZoneProps['style'];\n};\ntype FileTriggerProps = RACFileTriggerProps;\n\n// What the target draws, from React Aria's render state. Written as a call\n// rather than inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result\n// on its inputs.\nfunction content(children: ReactNode, label: string | undefined, isDisabled: boolean) {\n  return <>\n      {label === undefined ? null : <p {...stylex.props(dropZoneStyles.label, isDisabled && dropZoneStyles.labelDisabled)}>\n          {label}\n        </p>}\n      {children}\n    </>;\n}\n\n/**\n * A place to drop files. What is dropped is React Aria's: `onDrop` is handed\n * the items, and `isFileDropItem`, `isDirectoryDropItem`, `isTextDropItem`\n * and `DIRECTORY_DRAG_TYPE` are exported from the package for reading them.\n *\n * ```tsx\n * <DropZone label=\"Drop here\" onDrop={handleDrop}>\n *   <FileTrigger onSelect={handleSelect}>\n *     <Button variant=\"outlined\">Label</Button>\n *   </FileTrigger>\n * </DropZone>\n * ```\n *\n * It is drawn from the outlined card, with a dashed rule rather than a solid\n * one, and fills with the primary container while something is over it.\n * `label` both draws the words and names the target; `aria-label` names it\n * without drawing anything, for a page that already says what it takes.\n *\n * The call site's `className` and `style` land on the target itself, which\n * is the element a layout positions.\n */\nfunction DropZone({\n  children,\n  label,\n  ...props\n}: DropZoneProps) {\n  return <RACDropZone aria-label={props['aria-label'] ?? label} {...props} {...mergeStatefulStyles(rootStyles, props)}>\n      {content(children, label, props.isDisabled ?? false)}\n    </RACDropZone>;\n}\n\n/**\n * A button that opens the file picker. Wrap whatever should open it —\n * normally the library's Button — and take the files from `onSelect`.\n *\n * ```tsx\n * <FileTrigger acceptedFileTypes={['image/*']} onSelect={handleSelect}>\n *   <Button>Label</Button>\n * </FileTrigger>\n * ```\n *\n * It renders nothing of its own but the hidden input, so it takes no\n * `className` or `style`: what is seen is whatever it wraps. `allowsMultiple`\n * takes more than one file, `acceptDirectory` takes a folder, and\n * `defaultCamera` opens straight to a camera on a device that has one.\n */\nfunction FileTrigger(props: FileTriggerProps) {\n  return <RACFileTrigger {...props} />;\n}\nexport type { DropZoneProps, FileTriggerProps };\nexport { FileTrigger };\nexport default DropZone;"],"mappings":";;;;;;;AA4DA,SAASkB,QAAQJ,UAAqBE,OAA2BG,YAAqB;CACpF,OAAO,qBAAA,UAAA,EAAA,UAAA,CACFH,UAAUI,KAAAA,IAAY,OAAO,oBAAC,KAAD;EAAG,GAAIf,MAAaM,eAAeK,OAAOG,cAAcR,eAAeW,aAAa;EAC7GN,UAAAA;CACA,CAAA,GACJF,QACH,EAAA,CAAA;AACJ;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAAR,WAAAiB,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAkB,MAAA,EAAAT,UAAAE,OAAA,GAAAK,UAAAE;EAKRG,KAAAnB;EAAwBoB,KAAAN,MAAM,iBAANL;EAAkCK,KAAAA;EAAWQ,KAAAnB,oBAAoBE,YAAYS,KAAK;EAC7GS,KAAAZ,QAAQJ,UAAUE,OAAOK,MAAKF,cAAL,KAAyB;EAACK,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,MAAAL,EAAA,QAAAM,IAAA;EADjDC,KAAA,oBAAC,IAAD;GAAyB,cAAAJ;GAA4B,GAAMN;GAAK,GAAMQ;GACxEC,UAAAA;EADc,CAAA;EAEHN,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,OAFTO;AAES;;;;;;;;;;;;;;;;AAkBlB,SAAAvB,cAAAa,OAAA;CAAA,MAAAG,IAAAC,EAAA,CAAA;CAAA,IAAAF;CAAA,IAAAC,EAAA,OAAAH,OAAA;EACSE,KAAA,oBAACc,aAAD,EAAe,GAAKhB,MAAK,CAAA;EAAIG,EAAA,KAAAH;EAAAG,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,OAA7BD;AAA6B"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","spacing","DEFAULT_MIN_ITEM_WIDTH","_temp","kB7OPa","k1xSpc","kOIVth","kumcoG","styles","root","minItemWidth","undefined","FeedProps","Feed","t0","$","_c","render","t1","t2","t3","t4","t5","t6","props","defaultTagName"],"sources":["../../../src/components/feed/index.tsx"],"sourcesContent":["import * 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 { spacing } from '../../tokens/design.tokens.stylex';\n\n// Material Design's example minimum for an adaptive grid cell, and the only\n// number the spec puts on one. It is a floor rather than a recommendation: how\n// narrow a card can get before its contents stop making sense is a property of\n// the contents, which is why Material Design leaves it a parameter rather than\n// fixing it. Most feeds should say what theirs is instead of taking this.\nconst DEFAULT_MIN_ITEM_WIDTH = '180px';\n\n// The third of Material Design's canonical layouts, after list-detail and\n// supporting pane. Where those two divide a page into panes, this arranges one\n// pane into a grid of comparable things — the spec's own examples are news and\n// social feeds, and a catalogue of cards is the same shape.\n//\n// Material Design describes the grid by its cell rather than by its columns:\n// Compose spells it `GridCells.Adaptive(minSize)`, meaning every column is at\n// least that wide and the grid fits as many as it can.\n// `repeat(auto-fill, minmax(…, 1fr))` is the same sentence in CSS.\n//\n// So there are no breakpoints here, and that is the point rather than an\n// omission. The layout answers to the room it is given instead of to the width\n// of the window, which is what lets a feed inside a pane reflow with the pane.\n// It also means none of the query emission-order care that ListDetail and\n// SupportingPane both have to document applies.\n//\n// A function style rather than a static one, because the cell minimum comes\n// from the call site and StyleX compiles its classes ahead of time. StyleX\n// resolves that by writing the value to a custom property inline, which is the\n// same mechanism the token gallery's `durationBar` uses.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  k1xSpc: \"xrvj5dj\",\n  kOIVth: \"xj2l1yv\",\n  kumcoG: \"xqketvx\",\n  \"$$css\": true\n};\nconst styles = {\n  root: (minItemWidth: string) => [_temp, {\n    \"--x-gridTemplateColumns\": `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` != null ? `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` : undefined\n  }]\n};\ntype FeedProps = {\n  /**\n   * How narrow a cell may get before the grid drops a column. Every column is\n   * at least this wide and the grid fits as many as the space allows, which is\n   * how Material Design describes an adaptive grid — by its cell rather than\n   * by a column count per breakpoint.\n   *\n   * Worth setting. The default is the figure Material Design's own example\n   * uses, and it is a floor rather than advice: only the contents know how\n   * narrow they can go.\n   * @default '180px'\n   */\n  minItemWidth?: string;\n} & RenderComponentProps<'div'>;\n\n/**\n * Material Design's feed layout: a grid of comparable items that fits as many\n * columns as the space allows, down to a single column when it allows only\n * one.\n *\n * Layout only — it paints no surface, and it gives its children no container\n * of their own, so each child is a grid cell exactly as it was written. That\n * is the difference from ListDetail and SupportingPane, which do wrap: those\n * two divide a page into named regions, where this one lays out however many\n * things it is handed.\n *\n * It reads the space it is in rather than the width of the window, so a feed\n * inside a pane reflows with the pane rather than with the browser.\n */\nfunction Feed({\n  minItemWidth = DEFAULT_MIN_ITEM_WIDTH,\n  render,\n  ...props\n}: FeedProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      // The dynamic style carries the cell minimum as a custom property in\n      // `style` rather than as a class, which is why the merge has to reach\n      // `style` as well as `className` — see src/styles/merge.ts.\n      ...mergeStyles(stylex.props(styles.root(minItemWidth)), props)\n    },\n    render\n  });\n}\nexport type { FeedProps };\nexport default Feed;"],"mappings":";;;;;AAYA,MAAMK,yBAAyB;AAsB/B,MAAMC,QAAQ;CACZC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACR,SAAS;AACX;AACA,MAAMC,SAAS,EACbC,OAAOC,iBAAyB,CAACP,OAAO,EACtC,2BAA2B,4BAA4BO,aAAY,YAAa,OAAO,4BAA4BA,aAAY,WAAYC,KAAAA,EAC7I,CAAC,EACH;;;;;;;;;;;;;;;AA8BA,SAAAE,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAJ,cAAAY,IAAAL,QAAAM,IAAA,GAAAC,YAAAV;EAAAG,SAAAM;EACZ,MAAAb,eAAAY,OAAAX,KAAAA,IAAAT,yBAAAoB;EAIOvB,KAAAA;EACWqB,KAAA;EAEXI,KAAAA;EAIAL,KAAAnB,YAAYH,MAAaW,OAAMC,KAAMC,YAAY,CAAC,GAAGc,OAAK;EAACT,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EALzDG,KAAA;GAAA,GACFE;GAAK,GAILL;EACL;EAACJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAE,UAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EARcC,KAAA;GAAAE,gBACCL;GAAKI,OACdF;GAMNL;EAEH;EAACF,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAVMhB,GAAUwB,EAUhB;AAAC"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","spacing","DEFAULT_MIN_ITEM_WIDTH","_temp","kB7OPa","k1xSpc","kOIVth","kumcoG","styles","root","minItemWidth","undefined","FeedProps","Feed","t0","$","_c","render","t1","t2","t3","t4","t5","t6","props","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/feed/index.tsx"],"sourcesContent":["import * 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 { spacing } from '../../tokens/design.tokens.stylex';\n\n// Material Design's example minimum for an adaptive grid cell, and the only\n// number the spec puts on one. It is a floor rather than a recommendation: how\n// narrow a card can get before its contents stop making sense is a property of\n// the contents, which is why Material Design leaves it a parameter rather than\n// fixing it. Most feeds should say what theirs is instead of taking this.\nconst DEFAULT_MIN_ITEM_WIDTH = '180px';\n\n// The third of Material Design's canonical layouts, after list-detail and\n// supporting pane. Where those two divide a page into panes, this arranges one\n// pane into a grid of comparable things — the spec's own examples are news and\n// social feeds, and a catalogue of cards is the same shape.\n//\n// Material Design describes the grid by its cell rather than by its columns:\n// Compose spells it `GridCells.Adaptive(minSize)`, meaning every column is at\n// least that wide and the grid fits as many as it can.\n// `repeat(auto-fill, minmax(…, 1fr))` is the same sentence in CSS.\n//\n// So there are no breakpoints here, and that is the point rather than an\n// omission. The layout answers to the room it is given instead of to the width\n// of the window, which is what lets a feed inside a pane reflow with the pane.\n// It also means none of the query emission-order care that ListDetail and\n// SupportingPane both have to document applies.\n//\n// A function style rather than a static one, because the cell minimum comes\n// from the call site and StyleX compiles its classes ahead of time. StyleX\n// resolves that by writing the value to a custom property inline, which is the\n// same mechanism the token gallery's `durationBar` uses.\nconst _temp = {\n  kB7OPa: \"x9f619\",\n  k1xSpc: \"xrvj5dj\",\n  kOIVth: \"xj2l1yv\",\n  kumcoG: \"xqketvx\",\n  \"$$css\": true\n};\nconst styles = {\n  root: (minItemWidth: string) => [_temp, {\n    \"--x-gridTemplateColumns\": `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` != null ? `repeat(auto-fill, minmax(${minItemWidth}, 1fr))` : undefined\n  }]\n};\ntype FeedProps = {\n  /**\n   * How narrow a cell may get before the grid drops a column. Every column is\n   * at least this wide and the grid fits as many as the space allows, which is\n   * how Material Design describes an adaptive grid — by its cell rather than\n   * by a column count per breakpoint.\n   *\n   * Worth setting. The default is the figure Material Design's own example\n   * uses, and it is a floor rather than advice: only the contents know how\n   * narrow they can go.\n   * @default '180px'\n   */\n  minItemWidth?: string;\n} & RenderComponentProps<'div'>;\n\n/**\n * Material Design's feed layout: a grid of comparable items that fits as many\n * columns as the space allows, down to a single column when it allows only\n * one.\n *\n * Layout only — it paints no surface, and it gives its children no container\n * of their own, so each child is a grid cell exactly as it was written. That\n * is the difference from ListDetail and SupportingPane, which do wrap: those\n * two divide a page into named regions, where this one lays out however many\n * things it is handed.\n *\n * It reads the space it is in rather than the width of the window, so a feed\n * inside a pane reflows with the pane rather than with the browser.\n */\nfunction Feed({\n  minItemWidth = DEFAULT_MIN_ITEM_WIDTH,\n  render,\n  ...props\n}: FeedProps) {\n  return useRender({\n    defaultTagName: 'div',\n    props: {\n      ...props,\n      // The dynamic style carries the cell minimum as a custom property in\n      // `style` rather than as a class, which is why the merge has to reach\n      // `style` as well as `className` — see src/styles/merge.ts.\n      ...mergeStyles(stylex.props(styles.root(minItemWidth)), props)\n    },\n    render\n  });\n}\nexport type { FeedProps };\nexport default Feed;"],"mappings":";;;;;AAYA,MAAMK,yBAAyB;AAsB/B,MAAMC,QAAQ;CACZC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACR,SAAS;AACX;AACA,MAAMC,SAAS,EACbC,OAAOC,iBAAyB,CAACP,OAAO,EACtC,2BAA2B,4BAA4BO,aAAY,YAAa,OAAO,4BAA4BA,aAAY,WAAYC,KAAAA,EAC7I,CAAC,EACH;;;;;;;;;;;;;;;AA8BA,SAAAE,KAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAJ,cAAAY,IAAAL,QAAAM,IAAA,GAAAC,YAAAV;EAAAG,SAAAM;EACZ,MAAAb,eAAAY,OAAAX,KAAAA,IAAAT,yBAAAoB;EAIOvB,KAAAA;EACWqB,KAAA;EAEXI,KAAAA;EAIAL,KAAAnB,YAAYH,MAAaW,OAAMC,KAAMC,YAAY,CAAC,GAAGc,OAAK;EAACT,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EALzDG,KAAA;GAAA,GACFE;GAAK,GAILL;EACL;EAACJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAQ;CAAA,IAAAR,EAAA,OAAAE,UAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EARcC,KAAA;GAAAE,gBACCL;GAAKI,OACdF;GAMNL;EAEH;EAACF,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,OAVMhB,GAAUwB,EAUhB;AAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CSSProperties","FormProps","RACFormProps","stylex","Form","RACForm","FIELD_VALIDATION_BEHAVIOR","mergeStyles","className","style","validationBehavior","Omit","t0","$","_c","T0","t1","t2","t3","t4","props","undefined"],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { FormProps as RACFormProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Form as RACForm } from 'react-aria-components';\nimport { FIELD_VALIDATION_BEHAVIOR } from '../../field/root';\nimport { mergeStyles } from '../../styles/merge';\n\n// No page of its own: a form is the fields inside it, and the text fields\n// page is what each of them draws — the error a form reports lands in the\n// field's supporting text, in the error role, under the box. The form\n// draws nothing, and lays nothing out either; a Stack inside it is what\n// spaces the fields.\n//\n// React Aria's `Form` is the element. It hands two things to the fields\n// inside it through context: `validationErrors`, keyed by each field's\n// `name`, which is how a server's answer reaches the fields without any of\n// them changing, and `validationBehavior`, which every field reads in place\n// of its own default. React Aria's own default for that is `native`; the\n// library's is `aria`, set here so a form and a field agree, with `native`\n// the opt-in.\n\ntype FormProps = {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its message as soon as the field says so, and lets the form submit\n   * regardless. `native` hands validation to the browser: a required or\n   * malformed field blocks submission, and its message is the browser's\n   * own, shown once submission is tried.\n   *\n   * Under `aria`, moving focus after a server answers is the call site's.\n   * The errors are associated — `aria-invalid` on each control, the message\n   * in its `aria-describedby` — but nothing moves and nothing is read out,\n   * because no part of the form knows a round trip happened. `validationErrors`\n   * is a prop rather than an event, so a form cannot tell a submission coming\n   * back from a first render that was given errors to begin with.\n   * @default 'aria'\n   */\n  validationBehavior?: 'aria' | 'native';\n} & Omit<RACFormProps, 'className' | 'style'>;\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to let the\n * browser's own constraint validation block submission. `onSubmit` is handed\n * the submit event; call `preventDefault` on it to handle the submission\n * yourself, and read the values from `new FormData(event.currentTarget)`.\n *\n * Handing `validationErrors` back from a submission is where a reader has to\n * be told something arrived: see `validationBehavior` for what the form does\n * and what it leaves to the call site.\n *\n * A form also reserves each field's message line. A field on its own draws\n * that line only once it has something to say, so an error arriving after a\n * submit or an async check makes the field taller and moves everything below\n * it down the page. Inside a form the line is there from the start, empty,\n * and nothing moves when it fills — which is the whole reason a form is where\n * a message arrives after the fact.\n *\n * The call site's `className` and `style` land on the form element, which is\n * the element a layout positions.\n */\nfunction Form({\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  ...props\n}: FormProps) {\n  return <RACForm validationBehavior={validationBehavior} {...props} {...mergeStyles({\n    className: \"x9f619\"\n  }, props)} />;\n}\nexport type { FormProps };\nexport default Form;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,SAAAI,OAAAQ,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,oBAAAS,IAAA,GAAAC,UAAAR;EACZ,MAAAF,qBAAAS,OAAAE,KAAAA,IAAAf,4BAAAa;EAGQJ,KAAAV;EAA4BK,KAAAA;EAAwBU,KAAAA;EAAWF,KAAAX,YAAY,EAAAC,WACtE,SACb,GAAGY,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAFFC,KAAA,oBAAC,IAAD;GAA6BT,oBAAAA;GAAkB,GAAMU;GAAK,GAAMF;EAE9D,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAFNM;AAEM"}
+{"version":3,"file":"index.js","names":["CSSProperties","FormProps","RACFormProps","stylex","Form","RACForm","FIELD_VALIDATION_BEHAVIOR","mergeStyles","className","style","validationBehavior","Omit","t0","$","_c","T0","t1","t2","t3","t4","props","undefined","Form","_c","RACForm"],"sources":["../../../src/components/form/index.tsx"],"sourcesContent":["import type { CSSProperties } from 'react';\nimport type { FormProps as RACFormProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Form as RACForm } from 'react-aria-components';\nimport { FIELD_VALIDATION_BEHAVIOR } from '../../field/root';\nimport { mergeStyles } from '../../styles/merge';\n\n// No page of its own: a form is the fields inside it, and the text fields\n// page is what each of them draws — the error a form reports lands in the\n// field's supporting text, in the error role, under the box. The form\n// draws nothing, and lays nothing out either; a Stack inside it is what\n// spaces the fields.\n//\n// React Aria's `Form` is the element. It hands two things to the fields\n// inside it through context: `validationErrors`, keyed by each field's\n// `name`, which is how a server's answer reaches the fields without any of\n// them changing, and `validationBehavior`, which every field reads in place\n// of its own default. React Aria's own default for that is `native`; the\n// library's is `aria`, set here so a form and a field agree, with `native`\n// the opt-in.\n\ntype FormProps = {\n  className?: string;\n  style?: CSSProperties;\n  /**\n   * How the fields inside validate. `aria` marks a field invalid and shows\n   * its message as soon as the field says so, and lets the form submit\n   * regardless. `native` hands validation to the browser: a required or\n   * malformed field blocks submission, and its message is the browser's\n   * own, shown once submission is tried.\n   *\n   * Under `aria`, moving focus after a server answers is the call site's.\n   * The errors are associated — `aria-invalid` on each control, the message\n   * in its `aria-describedby` — but nothing moves and nothing is read out,\n   * because no part of the form knows a round trip happened. `validationErrors`\n   * is a prop rather than an event, so a form cannot tell a submission coming\n   * back from a first render that was given errors to begin with.\n   * @default 'aria'\n   */\n  validationBehavior?: 'aria' | 'native';\n} & Omit<RACFormProps, 'className' | 'style'>;\n\n/**\n * A form: the fields inside it and what they are told about validation. Pass\n * `validationErrors`, an object keyed by field `name`, to show what a server\n * sent back under each field, and `validationBehavior=\"native\"` to let the\n * browser's own constraint validation block submission. `onSubmit` is handed\n * the submit event; call `preventDefault` on it to handle the submission\n * yourself, and read the values from `new FormData(event.currentTarget)`.\n *\n * Handing `validationErrors` back from a submission is where a reader has to\n * be told something arrived: see `validationBehavior` for what the form does\n * and what it leaves to the call site.\n *\n * A form also reserves each field's message line. A field on its own draws\n * that line only once it has something to say, so an error arriving after a\n * submit or an async check makes the field taller and moves everything below\n * it down the page. Inside a form the line is there from the start, empty,\n * and nothing moves when it fills — which is the whole reason a form is where\n * a message arrives after the fact.\n *\n * The call site's `className` and `style` land on the form element, which is\n * the element a layout positions.\n */\nfunction Form({\n  validationBehavior = FIELD_VALIDATION_BEHAVIOR,\n  ...props\n}: FormProps) {\n  return <RACForm validationBehavior={validationBehavior} {...props} {...mergeStyles({\n    className: \"x9f619\"\n  }, props)} />;\n}\nexport type { FormProps };\nexport default Form;"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgEA,SAAAI,OAAAQ,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAF,oBAAAS,IAAA,GAAAC,UAAAR;EACZ,MAAAF,qBAAAS,OAAAE,KAAAA,IAAAf,4BAAAa;EAGQJ,KAAAV;EAA4BK,KAAAA;EAAwBU,KAAAA;EAAWF,KAAAX,YAAY,EAAAC,WACtE,SACb,GAAGY,KAAK;EAACP,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAM;CAAA,IAAAN,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,OAAAI,MAAAJ,EAAA,OAAAK,IAAA;EAFFC,KAAA,oBAAC,IAAD;GAA6BT,oBAAAA;GAAkB,GAAMU;GAAK,GAAMF;EAE9D,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAAA,KAAAN,EAAA;CAAA,OAFNM;AAEM"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ClassNameOrFunction","DOMRenderFunction","FocusableElement","StyleOrFunction","stylex","ButtonContext","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","useSlottedContext","ButtonDOMProps","ButtonState","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","stateLayerOpacity","ProgressIndicator","Ripple","ReturnType","FORCED_COLORS","TARGET_SIZE","styles","base","k6CgDc","kGNEyG","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","filledToggleSelected","label","labelPending","k33iCy","lg","kZKoxP","kGuDYH","kzqmXN","md","kgeoSG","kFcpXp","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","pending","kpwlN0","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","selectedShapes","toggleStyles","selected","unselected","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","buttonContent","ripple","state","isPending","surface","IconButton","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","t4","t5","props","undefined","context","slot","t6","element","aria","t7","t8","handlers","t9","toggleStyleProps","t10","toggleContent","ring","styleProps","T0","t11"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\n//\n// **Under forced colours a container is drawn as a rule, and a chosen toggle\n// as the mode's own chosen pair.** That mode paints author backgrounds in a\n// system colour and forces the icon's, which left a filled or tonal icon\n// button as an icon with nothing round it and a chosen toggle the same as an\n// unchosen one. `base` draws a 1px `ButtonText` border there, as Button's\n// does. Outlined keeps its own rule, and standard stays without one, as the\n// page draws it. A chosen toggle of any style is filled `Highlight` with its\n// icon in `HighlightText`. A disabled button's icon and edge are `GrayText`,\n// for the reason Button's comment gives: the browser greys a disabled\n// `<button>` there, but not the `<span>` a disabled link is.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n/**\n * The press area the page requires of its two smallest sizes. A literal\n * rather than `sizing.controlMd`, which holds the same number: that is a step\n * of the control scale, and a consumer resizing their medium controls should\n * not shrink a target the page states as a floor.\n */\nconst TARGET_SIZE = '48px';\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xpky1to xyf7a0q xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\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: \"xs1ryiz\",\n    kaIpWk: \"xtt5grq x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1fh0d6s\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1q69gdh\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1q27o6y x1v1ylhe x1c5gpgi x1jzqe4\",\n    kVAM5u: \"x9r1u3d x1n2ykn\",\n    kMwMTN: \"x1girmi0 x1k5gbb1\",\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  standard: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w x1jzqe4\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y x1k5gbb1\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl x1jzqe4\",\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"xszbqgh\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1n6cgzf\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's 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};\n\n// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\nconst selectedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// Which container a toggle draws, chosen and not. Two of the six are the\n// plain button's own styles: an unchosen tonal or standard toggle is the\n// tonal or standard button. A chosen filled toggle takes the filled button's\n// colours from a style of its own, which adds the forced-colours pair.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filledToggleSelected,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   */\n  'aria-label': string;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\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, and a toggle is never a link.\n   */\n  href?: string;\n  /**\n   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  isSelected?: boolean;\n  /**\n   * Called with the new state when a toggle is pressed. Passing this,\n   * `isSelected` or `defaultSelected` is what makes the button a toggle.\n   */\n  onChange?: (isSelected: boolean) => void;\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   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\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}\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. A toggle takes neither `href` nor the\n * pending props.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isPending = false,\n  isSelected,\n  onChange,\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 = 'standard',\n  ...props\n}: IconButtonProps) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\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, and while pending, as in\n  // Button — and pending for the same second reason given there: React Aria\n  // suppresses the click that would end a press but not the pointer events\n  // that start one, so a ripple begun while pending was never ended.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled && !isPending, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\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  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\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 memoises\n// the result on its inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant) {\n  return (state: IconButtonState) => stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size],\n  // A chosen outlined toggle has a container rather than a rule, so the\n  // width goes on only while it is unchosen.\n  variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ButtonRenderProps","ClassNameOrFunction","DOMRenderFunction","FocusableElement","StyleOrFunction","stylex","ButtonContext","Button","RACButton","Link","RACLink","ToggleButton","RACToggleButton","useSlottedContext","ButtonDOMProps","ButtonState","useRipple","ariaAttributesOf","buttonRenderer","linkRenderer","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","stateLayerOpacity","ProgressIndicator","Ripple","ReturnType","FORCED_COLORS","TARGET_SIZE","styles","base","k6CgDc","kGNEyG","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kmuXW","kjj79g","kmVPX3","kVAEAm","kybGjl","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","filled","kWkggS","kMwMTN","filledDisabled","filledToggle","filledToggleSelected","label","labelPending","k33iCy","lg","kZKoxP","kGuDYH","kzqmXN","md","kgeoSG","kFcpXp","kEoFBp","outlined","outlinedDisabled","outlinedToggleSelected","pending","kpwlN0","standard","standardDisabled","standardToggleSelected","tonal","tonalDisabled","tonalToggleSelected","xl","xs","xxl","outlineWidths","selectedShapes","toggleStyles","selected","unselected","disabledStyles","IconButtonProps","children","className","IconButtonState","defaultSelected","disableRipple","href","isSelected","onChange","pendingLabel","rel","render","size","IconButtonSize","style","target","variant","IconButtonVariant","Omit","buttonContent","ripple","state","isPending","surface","IconButton","t0","$","_c","t1","isDisabled","t2","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","t3","t4","t5","props","undefined","context","slot","t6","element","aria","t7","t8","handlers","t9","toggleStyleProps","t10","toggleContent","ring","styleProps","T0","t11","_c","props","RACToggleButton","stylex.props","RACLink","RACButton"],"sources":["../../../src/components/icon-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ButtonRenderProps, ClassNameOrFunction, DOMRenderFunction, FocusableElement, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ButtonContext, Button as RACButton, Link as RACLink, ToggleButton as RACToggleButton, useSlottedContext } from 'react-aria-components';\nimport type { ButtonDOMProps, ButtonState } from '../button';\nimport { useRipple } from '../../hooks/useRipple';\nimport { ariaAttributesOf, buttonRenderer, linkRenderer, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport ProgressIndicator from '../progress-indicator';\n\n// Each variant composites an 'on-color' over its own container at the\n// interaction state's opacity, rather than swapping in a separate hover\n// color. The pairs are the icon buttons spec page's: filled on primary,\n// tonal on secondary container, outlined with an outline variant border and\n// an on-surface-variant icon, standard on surface variant over nothing.\n// calc(<opacity> * 100%) turns the token's unitless 0-1 ratio into the\n// percentage color-mix() takes. Inlined at each property rather than factored\n// into a helper: @stylexjs/babel-plugin only statically recognizes\n// expressions written directly as property values.\n//\n// Disabled is a style of its own per variant rather than a `:disabled`\n// branch inside each property, for the reason Button's comment gives: given\n// `href` this renders as a link, which React Aria turns into a <span> while\n// disabled, and neither matches the pseudo-class. Applied last from the\n// render state, the disabled styles replace each property whole, hover and\n// pressed branches included.\n//\n// **The outlined border thickens with the size, and the widths are Button's\n// rather than this page's.** The icon buttons page keeps them in a size token\n// set its widget will not open to a script, and the two components already\n// share their five heights on purpose — a 96dp icon button beside a 96dp\n// outlined button with a different border weight would read as a mistake.\n//\n// **A toggle is the same button reporting a state.** Given `isSelected`,\n// `defaultSelected` or `onChange` it is React Aria's `ToggleButton` instead\n// of its `Button`, which announces the state through `aria-pressed` rather\n// than a role of its own — every variant and size still applies. The page\n// gives each style a second pair of colour roles for it, and they are not\n// the plain button's: a filled toggle rests on surface container with an\n// on-surface-variant icon and takes primary once chosen, a tonal one rests\n// on secondary container and takes secondary, and a standard one is\n// transparent throughout with the icon going from on-surface-variant to\n// primary, and an outlined one swaps its border for the inverse surface\n// pair. So a chosen filled toggle looks like a plain filled button, and an\n// unchosen one does not.\n//\n// A toggle is never a link and never pending. React Aria's `ToggleButton`\n// takes neither, and neither means anything for a control whose whole job is\n// to report which of two states it is in.\n//\n// The corner softens from a circle to a rounded square while pressed, which\n// is the shape morph the icon buttons spec page gives this control, at the\n// pressed corner its size token set names: 8 for the two small sizes, 12 at\n// medium, 16 at the two large. Each size carries its own pressed radius, since\n// StyleX replaces the property whole. The two transitioned properties take\n// different curves — the colour change is linear-ish and the shape change is\n// emphasized — so the timing functions are a matching comma list rather than\n// one value.\n//\n// A chosen toggle rests at that same pressed corner, which is the page's\n// shape morph: a toggle icon button moves from round while unchosen to\n// square once chosen. The square shape's own corner sits in a token set the\n// page keeps behind its size menu, but the page also says both shapes press\n// to the same radius — so the size's pressed corner is the value it already\n// assigns to that size, used here at rest rather than invented.\n//\n// **Under forced colours a container is drawn as a rule, and a chosen toggle\n// as the mode's own chosen pair.** That mode paints author backgrounds in a\n// system colour and forces the icon's, which left a filled or tonal icon\n// button as an icon with nothing round it and a chosen toggle the same as an\n// unchosen one. `base` draws a 1px `ButtonText` border there, as Button's\n// does. Outlined keeps its own rule, and standard stays without one, as the\n// page draws it. A chosen toggle of any style is filled `Highlight` with its\n// icon in `HighlightText`. A disabled button's icon and edge are `GrayText`,\n// for the reason Button's comment gives: the browser greys a disabled\n// `<button>` there, but not the `<span>` a disabled link is.\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\n\n/**\n * The press area the page requires of its two smallest sizes. A literal\n * rather than `sizing.controlMd`, which holds the same number: that is a step\n * of the control scale, and a consumer resizing their medium controls should\n * not shrink a target the page states as a floor.\n */\nconst TARGET_SIZE = '48px';\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kVAM5u: \"x1ylmb6m\",\n    kaIpWk: \"x1dkaolv\",\n    ksu8eU: \"xx61lck\",\n    kMzoRj: \"xc342km x13rsnn2\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kjj79g: \"xl56j7k\",\n    kmVPX3: \"x1717udv\",\n    kVAEAm: \"x1n2onr6\",\n    kybGjl: \"x1hl2dhg\",\n    kIyJzY: \"x1iuyhda\",\n    k1ekBW: \"xb5u718\",\n    kAMwcw: \"x15l9jch\",\n    $$css: true\n  },\n  disabled: {\n    kaIpWk: \"x1dkaolv\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  filled: {\n    kWkggS: \"xpky1to xyf7a0q xnety89\",\n    kMwMTN: \"xwjo7ld\",\n    $$css: true\n  },\n  filledDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  filledToggle: {\n    kWkggS: \"xbck2fw x1h1ujn1 x1mjdul6\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  filledToggleSelected: {\n    kWkggS: \"xpky1to xyf7a0q xnety89 x1jzqe4\",\n    kMwMTN: \"xwjo7ld x1k5gbb1\",\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: \"xs1ryiz\",\n    kaIpWk: \"xtt5grq x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1fh0d6s\",\n    $$css: true\n  },\n  md: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1q69gdh\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"x1rv7mn0\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"x1pvqxga\",\n    kzqmXN: \"x1eujcsb\",\n    $$css: true\n  },\n  outlined: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kVAM5u: \"x133yhug\",\n    ksu8eU: \"x1y0btm7\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  outlinedDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kVAM5u: \"xrh88j3 xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  outlinedToggleSelected: {\n    kWkggS: \"x1q27o6y x1v1ylhe x1c5gpgi x1jzqe4\",\n    kVAM5u: \"x9r1u3d x1n2ykn\",\n    kMwMTN: \"x1girmi0 x1k5gbb1\",\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  standard: {\n    kWkggS: \"x1dg9itu x1728qcm xjbqb8w\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  standardDisabled: {\n    kWkggS: \"xjbqb8w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  standardToggleSelected: {\n    kWkggS: \"x12vej0r x14dcer4 xjbqb8w x1jzqe4\",\n    kMzoRj: \"xc342km\",\n    kMwMTN: \"x1mxwv8y x1k5gbb1\",\n    $$css: true\n  },\n  tonal: {\n    kWkggS: \"xnqsvhv xlizrex x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  tonalDisabled: {\n    kWkggS: \"xepofeg\",\n    kVAM5u: \"xmnqt3w\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    $$css: true\n  },\n  tonalToggleSelected: {\n    kWkggS: \"x1q841l6 x1ofvui0 x167r6xl x1jzqe4\",\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  xl: {\n    kZKoxP: \"x1xaimp3\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1s3cmhv\",\n    kzqmXN: \"xszbqgh\",\n    $$css: true\n  },\n  xs: {\n    kgeoSG: \"x1cpjm7i\",\n    kFcpXp: \"x1n6cgzf\",\n    kEoFBp: \"x1hmns74\",\n    kZKoxP: \"xig8zya\",\n    kaIpWk: \"x1r81nxe x1dkaolv\",\n    kGuDYH: \"xwsyq91\",\n    kzqmXN: \"x11ts1a5\",\n    $$css: true\n  },\n  xxl: {\n    kZKoxP: \"x173yhrv\",\n    kaIpWk: \"x11f6t2b x1dkaolv\",\n    kGuDYH: \"x1tgwohi\",\n    kzqmXN: \"xz1kjiq\",\n    $$css: true\n  }\n};\n\n// The outlined border thickens with the size, as Button's does: 1dp up to M,\n// 2dp at XL, 3dp at XXL. A style per size rather than a value in the size\n// style, since a border on a filled button would draw in the icon's 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};\n\n// A chosen toggle rests at the corner its size presses to, which is the\n// page's round-to-square morph. A style per size rather than a value inside\n// each size style, since StyleX replaces the property whole and this one has\n// to beat both the size's `:active` branch and the disabled style's circle.\nconst selectedShapes = {\n  lg: {\n    kaIpWk: \"x62ce2h\",\n    $$css: true\n  },\n  md: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  },\n  xs: {\n    kaIpWk: \"x1xdvaa9\",\n    $$css: true\n  },\n  xxl: {\n    kaIpWk: \"xhpdng0\",\n    $$css: true\n  }\n};\n\n// Which container a toggle draws, chosen and not. Two of the six are the\n// plain button's own styles: an unchosen tonal or standard toggle is the\n// tonal or standard button. A chosen filled toggle takes the filled button's\n// colours from a style of its own, which adds the forced-colours pair.\nconst toggleStyles = {\n  filled: {\n    selected: styles.filledToggleSelected,\n    unselected: styles.filledToggle\n  },\n  outlined: {\n    selected: styles.outlinedToggleSelected,\n    unselected: styles.outlined\n  },\n  standard: {\n    selected: styles.standardToggleSelected,\n    unselected: styles.standard\n  },\n  tonal: {\n    selected: styles.tonalToggleSelected,\n    unselected: styles.tonal\n  }\n};\nconst disabledStyles = {\n  filled: styles.filledDisabled,\n  outlined: styles.outlinedDisabled,\n  standard: styles.standardDisabled,\n  tonal: styles.tonalDisabled\n};\ntype IconButtonProps = {\n  /**\n   * What the button does, in words. Required rather than optional: an icon\n   * on its own has no accessible name, so without this the control announces\n   * nothing at all.\n   */\n  'aria-label': string;\n  children?: ReactNode;\n  /** A function may compute the class from the button's render state. */\n  className?: ClassNameOrFunction<IconButtonState>;\n  /**\n   * Whether a toggle starts chosen, when it keeps its own state. Passing\n   * this, `isSelected` or `onChange` is what makes the button a toggle.\n   */\n  defaultSelected?: boolean;\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\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, and a toggle is never a link.\n   */\n  href?: string;\n  /**\n   * Whether a toggle is chosen, when the call site holds the state. Pass it\n   * with `onChange`; passing this, `defaultSelected` or `onChange` is what\n   * makes the button a toggle.\n   */\n  isSelected?: boolean;\n  /**\n   * Called with the new state when a toggle is pressed. Passing this,\n   * `isSelected` or `defaultSelected` is what makes the button a toggle.\n   */\n  onChange?: (isSelected: boolean) => void;\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   * The element to render, given the props it would have carried. React\n   * Aria's own form: it has to return the element the component would have\n   * rendered itself.\n   */\n  render?: DOMRenderFunction<'button', IconButtonState>;\n  /**\n   * Control size: `xs` 32px, `md` 40px, `lg` 56px, `xl` 96px, `xxl` 136px —\n   * the icon buttons spec page's XS to XL, and the same heights `Button`\n   * uses, so the two line up beside each other in a row. The icon is 20px,\n   * 24px, 24px, 32px and 40px in turn.\n   * @default 'md'\n   */\n  size?: IconButtonSize;\n  /** A function may compute the style from the button's render state. */\n  style?: StyleOrFunction<IconButtonState>;\n  /** The link's `target`, when `href` is set. */\n  target?: string;\n  /**\n   * `standard` is transparent and tints what it sits on; `outlined` is\n   * transparent with a rule around it; `filled` and `tonal` carry a container\n   * of their own.\n   * @default 'standard'\n   */\n  variant?: IconButtonVariant;\n} & Omit<ButtonDOMProps, 'render'>;\ntype IconButtonSize = 'lg' | 'md' | 'xl' | 'xs' | 'xxl';\n\n// The render state a call site's `className`, `style` or `render` function is\n// handed. `isSelected` is optional because only the toggle form has one, and\n// one function has to be accepted by both: React Aria hands the plain button\n// a state without it and the toggle a state with it, and a parameter type\n// this wide accepts either.\ntype IconButtonState = ButtonState & {\n  isSelected?: boolean;\n};\ntype IconButtonVariant = 'filled' | 'outlined' | 'standard' | 'tonal';\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}\n/**\n * A button that is an icon, at five control heights. Given `href` it is a\n * link with the same appearance. Every `aria-*` prop is forwarded to the\n * element; React Aria alone would keep only the labelling ones.\n *\n * Given `isSelected`, `defaultSelected` or `onChange` it is a toggle, which\n * reports its state through `aria-pressed` and draws the page's second pair\n * of colour roles for its variant. A toggle takes neither `href` nor the\n * pending props.\n *\n * ```tsx\n * <IconButton aria-label=\"Label\" defaultSelected variant=\"tonal\">\n *   <StarIcon />\n * </IconButton>\n * ```\n */\nfunction IconButton({\n  children,\n  defaultSelected,\n  disableRipple = false,\n  href,\n  isDisabled,\n  isPending = false,\n  isSelected,\n  onChange,\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 = 'standard',\n  ...props\n}: IconButtonProps) {\n  // A field's context may disable the button — a number field's stepper at\n  // the end of its range, a search field's clear button with the field — and\n  // React Aria takes a prop over its context, so a default of `false` here\n  // would keep every one of them enabled. The call site's own prop still\n  // wins where it is given; the context is read for the ripple, which has\n  // to know before the render state does.\n  const context = useSlottedContext(ButtonContext, props.slot);\n  const disabled = isDisabled ?? context?.isDisabled ?? false;\n\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, and while pending, as in\n  // Button — and pending for the same second reason given there: React Aria\n  // suppresses the click that would end a press but not the pointer events\n  // that start one, so a ripple begun while pending was never ended.\n  const ripple = useRipple<FocusableElement>(!disableRipple && !disabled && !isPending, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n\n  // The three props that make this a toggle. Read together rather than behind\n  // a `toggle` word of its own, the way `href` already turns the button into\n  // a link: a button given none of them has no state to report, and one given\n  // any of them has nothing else it could mean.\n  if (defaultSelected !== undefined || isSelected !== undefined || onChange !== undefined) {\n    return <RACToggleButton defaultSelected={defaultSelected} isDisabled={disabled} isSelected={isSelected} onChange={onChange} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(toggleStyleProps(size, variant), props)}>\n        {toggleContent(children, ripple)}\n      </RACToggleButton>;\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  if (href !== undefined) {\n    return <RACLink href={href} isDisabled={disabled} rel={rel} render={linkRenderer(element)} target={target} {...ripple.handlers} {...props} {...styleProps}>\n        {children}\n        {ripple.surface}\n      </RACLink>;\n  }\n  return <RACButton isDisabled={disabled} isPending={isPending} render={buttonRenderer(element, render)} {...ripple.handlers} {...props} {...styleProps}>\n      {buttonContent(children, pendingLabel, ripple)}\n    </RACButton>;\n}\n\n// What a toggle draws: its icon and the ripple. No pending ring — React\n// Aria's toggle button has no pending state, and a control reporting which of\n// two states it is in has nothing to be pending about.\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 memoises\n// the result on its inputs.\nfunction toggleContent(children: ReactNode, ripple: Ripple) {\n  return () => <>\n      {children}\n      {ripple.surface}\n    </>;\n}\n\n// A toggle's styles, from React Aria's render state. The chosen shape is\n// applied after the disabled styles so it survives them: which of the two\n// states a disabled toggle is in should still be readable, and the disabled\n// style otherwise forces the circle back.\nfunction toggleStyleProps(size: IconButtonSize, variant: IconButtonVariant) {\n  return (state: IconButtonState) => stylex.props(styles.base, focus.ring, state.isSelected === true ? toggleStyles[variant].selected : toggleStyles[variant].unselected, styles[size],\n  // A chosen outlined toggle has a container rather than a rule, so the\n  // width goes on only while it is unchosen.\n  variant === 'outlined' && state.isSelected !== true && outlineWidths[size], state.isDisabled && styles.disabled, state.isDisabled && disabledStyles[variant], state.isSelected === true && selectedShapes[size]);\n}\nexport type { IconButtonProps, IconButtonSize, IconButtonState, IconButtonVariant };\nexport default IconButton;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","radii","spacing","typography","KeycapProps","Keycap","t0","$","_c","render","t1","t2","t3","t4","t5","props","className","t6","defaultTagName"],"sources":["../../../src/components/keycap/index.tsx"],"sourcesContent":["import * 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, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Named for the physical thing it draws rather than for the element it\n// renders. `Kbd` would match the tag, but a component library is read by\n// people writing call sites, not markup, and `Key` in that setting is already\n// spoken for several times over — an API key, an object key, React's own key\n// prop. A keycap is unambiguously the one on a keyboard.\n//\n// Sized in em for the same reason Code is: a key named inside a footnote and\n// one named inside a paragraph are the same component. The ratio is smaller\n// than Code's because the border adds height that the glyphs do not, and\n// matching Code's 0.875 leaves a keycap standing taller than the line it\n// sits in.\n//\n// Transparent rather than filled, so a keycap inside a Card or a Sheet does\n// not read as a nested surface. The border alone carries the metaphor.\n//\n// No Material Design page draws a keycap. Its rule is the assist chip's, 1dp\n// in the outline role around a label. Its size is the text's, as above, and\n// its corner is the extra-small step of the shape scale rather than the\n// chip's small one, since a box the height of a line has no room for 8dp.\n\ntype KeycapProps = RenderComponentProps<'kbd'>;\n\n/**\n * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,\n * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A\n * chord is several of these, combined at the call site.\n */\nfunction Keycap({\n  render,\n  ...props\n}: KeycapProps) {\n  return useRender({\n    defaultTagName: 'kbd',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x9f619 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { KeycapProps };\nexport default Keycap;"],"mappings":";;;;;;;;;AAkCA,SAAAS,OAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAgB,MAAA,EAAAG,QAAAK,IAAA,GAAAC,UAAAT;EAAAG,SAAAK;EAIPhB,KAAAA;EACWc,KAAA;EAEXG,KAAAA;EACAJ,KAAAZ,YAAY,EAAAiB,WACF,qHACb,GAAGD,KAAK;EAACR,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EAJJG,KAAA;GAAA,GACFC;GAAK,GACLJ;EAGL;EAACJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAE,UAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EAPcG,KAAA;GAAAC,gBACCN;GAAKG,OACdD;GAKNL;EAEH;EAACF,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OATMT,GAAUmB,EAShB;AAAC"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useRender","mergeStyles","colors","radii","spacing","typography","KeycapProps","Keycap","t0","$","_c","render","t1","t2","t3","t4","t5","props","className","t6","defaultTagName","_c"],"sources":["../../../src/components/keycap/index.tsx"],"sourcesContent":["import * 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, radii, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// Named for the physical thing it draws rather than for the element it\n// renders. `Kbd` would match the tag, but a component library is read by\n// people writing call sites, not markup, and `Key` in that setting is already\n// spoken for several times over — an API key, an object key, React's own key\n// prop. A keycap is unambiguously the one on a keyboard.\n//\n// Sized in em for the same reason Code is: a key named inside a footnote and\n// one named inside a paragraph are the same component. The ratio is smaller\n// than Code's because the border adds height that the glyphs do not, and\n// matching Code's 0.875 leaves a keycap standing taller than the line it\n// sits in.\n//\n// Transparent rather than filled, so a keycap inside a Card or a Sheet does\n// not read as a nested surface. The border alone carries the metaphor.\n//\n// No Material Design page draws a keycap. Its rule is the assist chip's, 1dp\n// in the outline role around a label. Its size is the text's, as above, and\n// its corner is the extra-small step of the shape scale rather than the\n// chip's small one, since a box the height of a line has no room for 8dp.\n\ntype KeycapProps = RenderComponentProps<'kbd'>;\n\n/**\n * A single key on a keyboard, as named in an instruction — `Enter`, `Esc`,\n * `Ctrl`. It renders a `<kbd>` and takes its scale from the text around it. A\n * chord is several of these, combined at the call site.\n */\nfunction Keycap({\n  render,\n  ...props\n}: KeycapProps) {\n  return useRender({\n    defaultTagName: 'kbd',\n    props: {\n      ...props,\n      ...mergeStyles({\n        className: \"xjbqb8w x1fwvt7v x1tfhd1 x1y0btm7 xmkeg23 x9f619 x139gbkf x1rg5ohu xbppi91 xuegzgz x37zpob xt970qd xdomwbk xuxw1ft\"\n      }, props)\n    },\n    render\n  });\n}\nexport type { KeycapProps };\nexport default Keycap;"],"mappings":";;;;;;;;;AAkCA,SAAAS,OAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAAgB,MAAA,EAAAG,QAAAK,IAAA,GAAAC,UAAAT;EAAAG,SAAAK;EAIPhB,KAAAA;EACWc,KAAA;EAEXG,KAAAA;EACAJ,KAAAZ,YAAY,EAAAiB,WACF,qHACb,GAAGD,KAAK;EAACR,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;EAAAL,EAAA,KAAAM;CAAA,OAAA;EAAAJ,SAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAAA,IAAAO;CAAA,IAAAP,EAAA,OAAAG,MAAAH,EAAA,OAAAI,IAAA;EAJJG,KAAA;GAAA,GACFC;GAAK,GACLJ;EAGL;EAACJ,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAO;CAAA,OAAAA,KAAAP,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,OAAAE,UAAAF,EAAA,QAAAK,MAAAL,EAAA,QAAAO,IAAA;EAPcG,KAAA;GAAAC,gBACCN;GAAKG,OACdD;GAKNL;EAEH;EAACF,EAAA,KAAAE;EAAAF,EAAA,MAAAK;EAAAL,EAAA,MAAAO;EAAAP,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OATMT,GAAUmB,EAShB;AAAC"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["AriaAttributes","DOMAttributes","ReactNode","ClassNameOrFunction","LinkRenderProps","LinkProps","RACLinkProps","StyleOrFunction","stylex","Link","RACLink","ariaAttributesOf","linkRenderer","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","styles","base","k6CgDc","kaIpWk","kB7OPa","kkrTdU","kNySMw","kcSHmL","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","k1TLXF","tones","inherit","primary","underlines","always","kMnn75","hover","none","GlobalEventKey","Exclude","HTMLElement","LinkDOMProps","Omit","Pick","children","className","style","tone","LinkTone","underline","LinkUnderline","t0","$","_c","T0","t1","t2","t3","onKeyDown","onKeyUp","render","t4","t5","props","undefined","element","aria","t6","state","ring","isDisabled"],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["import type { AriaAttributes, DOMAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, LinkRenderProps, LinkProps as RACLinkProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Link as RACLink } from 'react-aria-components';\nimport { ariaAttributesOf, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// No Material Design page draws an inline link. The nearest component is the\n// text button, whose label is the same primary role on no container, and this\n// takes that, with the disabled treatment every page gives content: on\n// surface at the disabled-content opacity. What belongs to a control standing\n// on its own is left out — the button's height, padding, type and state\n// layer. A link takes its size and face from the sentence it sits in, and\n// says it can be followed with its underline instead, which is this\n// component's own: a 1px rule in 45% of the primary role, or in the outline\n// role under `inherit`, turning fully primary on hover.\n\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kNySMw: \"xyi4chj\",\n    kcSHmL: \"x1ohr1zr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xz1df8t\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    k1TLXF: \"x1g6epwz\",\n    $$css: true\n  }\n};\nconst tones = {\n  inherit: {\n    kMwMTN: \"x1aetzt3 x1heor9g\",\n    k1TLXF: \"x1rdisx9 x1dbr5dg\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"x1rdisx9 xfhk6l2\",\n    $$css: true\n  }\n};\nconst underlines = {\n  always: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  },\n  hover: {\n    kMnn75: \"x1sur9pj xkrqix3\",\n    $$css: true\n  },\n  none: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  }\n};\n\n// React Aria types the global DOM events against the element it renders, and\n// a handler written for an <a> does not type-check against the <span> it\n// renders while disabled. The keys are retyped against HTMLElement here, as\n// Button's are, so one set of props serves both forms; the events React Aria\n// defines itself (press, hover, focus) keep its types, since it hands those\n// its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACLinkProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype LinkDOMProps = Omit<RACLinkProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype LinkProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the link's render state. */\n  className?: ClassNameOrFunction<LinkRenderProps>;\n  /** A function may compute the style from the link's render state. */\n  style?: StyleOrFunction<LinkRenderProps>;\n  /**\n   * Which colour role to render in. `primary` marks the link out from the\n   * text around it; `inherit` takes the surrounding colour and leans on the\n   * underline alone, for a link in a place already understood to be links —\n   * a footer, a breadcrumb, a nav.\n   * @default 'primary'\n   */\n  tone?: LinkTone;\n  /**\n   * When to draw the rule. Leave it at `always` in prose: without it, colour\n   * is the only thing separating the link from the sentence, which some\n   * readers cannot see. `hover` and `none` are for links whose position\n   * already announces them, such as a row of footer links.\n   * @default 'always'\n   */\n  underline?: LinkUnderline;\n} & AriaAttributes & LinkDOMProps;\ntype LinkTone = 'inherit' | 'primary';\ntype LinkUnderline = 'always' | 'hover' | 'none';\n\n/**\n * A navigational link. It renders an `<a>` and sets no type of its own, so it\n * takes the size and face of the text it sits in. Without `href`, or while\n * disabled, it is a span announced as a link instead, since a disabled\n * anchor is no link at all.\n *\n * Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard\n * alike, a `RouterProvider` above it turns a navigation into a client-side\n * one, and a `Breadcrumbs` or `Menu` around it reaches it through context.\n * `render` is React Aria's function form, handed the anchor's props to spread\n * onto an element of its own. Every `aria-*` prop is forwarded to the element;\n * React Aria alone would keep only the labelling ones.\n */\nfunction Link({\n  onKeyDown,\n  onKeyUp,\n  render,\n  tone = 'primary',\n  underline = 'always',\n  ...props\n}: LinkProps) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <RACLink render={linkRenderer(element, render)} {...props} {...mergeStatefulStyles((state: LinkRenderProps) => stylex.props(styles.base, focus.ring, tones[tone], underlines[underline], state.isDisabled && styles.disabled), props)} />;\n}\nexport type { LinkDOMProps, LinkProps, LinkTone, LinkUnderline };\nexport default Link;"],"mappings":";;;;;;;;AAoBA,MAAMmB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMI,QAAQ;CACZC,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAM,SAAS;EACPJ,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMO,aAAa;CACjBC,QAAQ;EACNC,QAAQ;EACRT,OAAO;CACT;CACAU,OAAO;EACLD,QAAQ;EACRT,OAAO;CACT;CACAW,MAAM;EACJF,QAAQ;EACRT,OAAO;CACT;AACF;;;;;;;;;;;;;;AAiDA,SAAArB,OAAA8C,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAO,WAAAC,SAAAC,QAAAb,MAAAc,IAAAZ,WAAAa,IAAA,GAAAC,YAAAZ;EAIZ,MAAAJ,OAAAc,OAAAG,KAAAA,IAAA,YAAAH;EACA,MAAAZ,YAAAa,OAAAE,KAAAA,IAAA,WAAAF;EAGA,MAAAG,UAAgB;GAAAC,MACR3D,iBAAiBwD,OAAK;GAACL;GAAAC;EAG/B;EACQL,KAAAhD;EAAgBiD,KAAA/C,aAAayD,SAASL,MAAM;EAAOG,KAAAA;EAAK,IAAAI;EAAA,IAAAf,EAAA,OAAAL,QAAAK,EAAA,OAAAH,WAAA;GAA0BkB,MAAAC,UAA4BhE,MAAaW,OAAMC,MAAOP,MAAK4D,MAAOvC,MAAMiB,OAAOd,WAAWgB,YAAYmB,MAAKE,cAAevD,OAAMY,QAAS;GAACyB,EAAA,KAAAL;GAAAK,EAAA,KAAAH;GAAAG,EAAA,KAAAe;EAAA,OAAAA,KAAAf,EAAA;EAA9JK,KAAA/C,oBAAoByD,IAA4IJ,OAAK;EAACX,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAArOI,KAAA,oBAAC,IAAD;GAAiB,QAAAN;GAA6B,GAAMQ;GAAK,GAAMN;EAAsK,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAAzOS;AAAyO"}
+{"version":3,"file":"index.js","names":["AriaAttributes","DOMAttributes","ReactNode","ClassNameOrFunction","LinkRenderProps","LinkProps","RACLinkProps","StyleOrFunction","stylex","Link","RACLink","ariaAttributesOf","linkRenderer","focus","mergeStatefulStyles","colors","motion","radii","stateLayerOpacity","styles","base","k6CgDc","kaIpWk","kB7OPa","kkrTdU","kNySMw","kcSHmL","kIyJzY","k1ekBW","kAMwcw","$$css","disabled","kMwMTN","k1TLXF","tones","inherit","primary","underlines","always","kMnn75","hover","none","GlobalEventKey","Exclude","HTMLElement","LinkDOMProps","Omit","Pick","children","className","style","tone","LinkTone","underline","LinkUnderline","t0","$","_c","T0","t1","t2","t3","onKeyDown","onKeyUp","render","t4","t5","props","undefined","element","aria","t6","state","ring","isDisabled","Link","_c","props","RACLink","stylex.props"],"sources":["../../../src/components/link/index.tsx"],"sourcesContent":["import type { AriaAttributes, DOMAttributes, ReactNode } from 'react';\nimport type { ClassNameOrFunction, LinkRenderProps, LinkProps as RACLinkProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Link as RACLink } from 'react-aria-components';\nimport { ariaAttributesOf, linkRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// No Material Design page draws an inline link. The nearest component is the\n// text button, whose label is the same primary role on no container, and this\n// takes that, with the disabled treatment every page gives content: on\n// surface at the disabled-content opacity. What belongs to a control standing\n// on its own is left out — the button's height, padding, type and state\n// layer. A link takes its size and face from the sentence it sits in, and\n// says it can be followed with its underline instead, which is this\n// component's own: a 1px rule in 45% of the primary role, or in the outline\n// role under `inherit`, turning fully primary on hover.\n\nconst styles = {\n  base: {\n    k6CgDc: \"x12w9bfk\",\n    kaIpWk: \"x1tfhd1\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    kNySMw: \"xyi4chj\",\n    kcSHmL: \"x1ohr1zr\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xz1df8t\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  disabled: {\n    kMwMTN: \"x1xj74d8\",\n    kkrTdU: \"x1h6gzvc\",\n    k1TLXF: \"x1g6epwz\",\n    $$css: true\n  }\n};\nconst tones = {\n  inherit: {\n    kMwMTN: \"x1aetzt3 x1heor9g\",\n    k1TLXF: \"x1rdisx9 x1dbr5dg\",\n    $$css: true\n  },\n  primary: {\n    kMwMTN: \"x1mxwv8y\",\n    k1TLXF: \"x1rdisx9 xfhk6l2\",\n    $$css: true\n  }\n};\nconst underlines = {\n  always: {\n    kMnn75: \"xujl8zx\",\n    $$css: true\n  },\n  hover: {\n    kMnn75: \"x1sur9pj xkrqix3\",\n    $$css: true\n  },\n  none: {\n    kMnn75: \"xkrqix3\",\n    $$css: true\n  }\n};\n\n// React Aria types the global DOM events against the element it renders, and\n// a handler written for an <a> does not type-check against the <span> it\n// renders while disabled. The keys are retyped against HTMLElement here, as\n// Button's are, so one set of props serves both forms; the events React Aria\n// defines itself (press, hover, focus) keep its types, since it hands those\n// its own event objects.\ntype GlobalEventKey = Exclude<keyof DOMAttributes<HTMLElement> & keyof RACLinkProps, 'onBlur' | 'onClick' | 'onFocus'>;\ntype LinkDOMProps = Omit<RACLinkProps, 'children' | 'className' | 'style' | GlobalEventKey> & Pick<DOMAttributes<HTMLElement>, GlobalEventKey>;\ntype LinkProps = {\n  children?: ReactNode;\n  /** A function may compute the class from the link's render state. */\n  className?: ClassNameOrFunction<LinkRenderProps>;\n  /** A function may compute the style from the link's render state. */\n  style?: StyleOrFunction<LinkRenderProps>;\n  /**\n   * Which colour role to render in. `primary` marks the link out from the\n   * text around it; `inherit` takes the surrounding colour and leans on the\n   * underline alone, for a link in a place already understood to be links —\n   * a footer, a breadcrumb, a nav.\n   * @default 'primary'\n   */\n  tone?: LinkTone;\n  /**\n   * When to draw the rule. Leave it at `always` in prose: without it, colour\n   * is the only thing separating the link from the sentence, which some\n   * readers cannot see. `hover` and `none` are for links whose position\n   * already announces them, such as a row of footer links.\n   * @default 'always'\n   */\n  underline?: LinkUnderline;\n} & AriaAttributes & LinkDOMProps;\ntype LinkTone = 'inherit' | 'primary';\ntype LinkUnderline = 'always' | 'hover' | 'none';\n\n/**\n * A navigational link. It renders an `<a>` and sets no type of its own, so it\n * takes the size and face of the text it sits in. Without `href`, or while\n * disabled, it is a span announced as a link instead, since a disabled\n * anchor is no link at all.\n *\n * Behaviour is React Aria's: `onPress` fires for pointer, touch and keyboard\n * alike, a `RouterProvider` above it turns a navigation into a client-side\n * one, and a `Breadcrumbs` or `Menu` around it reaches it through context.\n * `render` is React Aria's function form, handed the anchor's props to spread\n * onto an element of its own. Every `aria-*` prop is forwarded to the element;\n * React Aria alone would keep only the labelling ones.\n */\nfunction Link({\n  onKeyDown,\n  onKeyUp,\n  render,\n  tone = 'primary',\n  underline = 'always',\n  ...props\n}: LinkProps) {\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  return <RACLink render={linkRenderer(element, render)} {...props} {...mergeStatefulStyles((state: LinkRenderProps) => stylex.props(styles.base, focus.ring, tones[tone], underlines[underline], state.isDisabled && styles.disabled), props)} />;\n}\nexport type { LinkDOMProps, LinkProps, LinkTone, LinkUnderline };\nexport default Link;"],"mappings":";;;;;;;;AAoBA,MAAMmB,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRC,QAAQ;EACRR,QAAQ;EACRS,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMI,QAAQ;CACZC,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;CACAM,SAAS;EACPJ,QAAQ;EACRC,QAAQ;EACRH,OAAO;CACT;AACF;AACA,MAAMO,aAAa;CACjBC,QAAQ;EACNC,QAAQ;EACRT,OAAO;CACT;CACAU,OAAO;EACLD,QAAQ;EACRT,OAAO;CACT;CACAW,MAAM;EACJF,QAAQ;EACRT,OAAO;CACT;AACF;;;;;;;;;;;;;;AAiDA,SAAArB,OAAA8C,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAD,IAAA;EAAc,MAAA,EAAAO,WAAAC,SAAAC,QAAAb,MAAAc,IAAAZ,WAAAa,IAAA,GAAAC,YAAAZ;EAIZ,MAAAJ,OAAAc,OAAAG,KAAAA,IAAA,YAAAH;EACA,MAAAZ,YAAAa,OAAAE,KAAAA,IAAA,WAAAF;EAGA,MAAAG,UAAgB;GAAAC,MACR3D,iBAAiBwD,OAAK;GAACL;GAAAC;EAG/B;EACQL,KAAAhD;EAAgBiD,KAAA/C,aAAayD,SAASL,MAAM;EAAOG,KAAAA;EAAK,IAAAI;EAAA,IAAAf,EAAA,OAAAL,QAAAK,EAAA,OAAAH,WAAA;GAA0BkB,MAAAC,UAA4BhE,MAAaW,OAAMC,MAAOP,MAAK4D,MAAOvC,MAAMiB,OAAOd,WAAWgB,YAAYmB,MAAKE,cAAevD,OAAMY,QAAS;GAACyB,EAAA,KAAAL;GAAAK,EAAA,KAAAH;GAAAG,EAAA,KAAAe;EAAA,OAAAA,KAAAf,EAAA;EAA9JK,KAAA/C,oBAAoByD,IAA4IJ,OAAK;EAACX,EAAA,KAAAD;EAAAC,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAH,KAAAF,EAAA;EAAAG,KAAAH,EAAA;EAAAI,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAE,MAAAF,EAAA,OAAAG,MAAAH,EAAA,QAAAI,MAAAJ,EAAA,QAAAK,IAAA;EAArOI,KAAA,oBAAC,IAAD;GAAiB,QAAAN;GAA6B,GAAMQ;GAAK,GAAMN;EAAsK,CAAA;EAAIL,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAAzOS;AAAyO"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","GridListItemRenderProps","GridListItemProps","RACGridListItemProps","GridListLoadMoreItemProps","RACGridListLoadMoreItemProps","GridListProps","RACGridListProps","GridListSectionProps","RACGridListSectionProps","stylex","createContext","useContext","GridList","RACGridList","GridListHeader","RACGridListHeader","GridListItem","RACGridListItem","GridListLoadMoreItem","RACGridListLoadMoreItem","GridListSection","RACGridListSection","CollectionLoadMore","collectionStyles","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","ListLoadMoreProps","Omit","label","ListProps","T","className","selectLabel","style","ListRowProps","children","leading","overline","supporting","trailing","ListSectionProps","header","itemContent","ripple","state","isDisabled","isSelected","leadingFor","selectionBehavior","selectionMode","List","t0","$","_c","T0","T1","t1","t2","t3","t4","props","undefined","container","t5","ListItem","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","handlers","surface","t6","ListLoadMore","loading","ListSection","section","Item","LoadMore","Section"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { GridListItemRenderProps, GridListItemProps as RACGridListItemProps, GridListLoadMoreItemProps as RACGridListLoadMoreItemProps, GridListProps as RACGridListProps, GridListSectionProps as RACGridListSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { GridList as RACGridList, GridListHeader as RACGridListHeader, GridListItem as RACGridListItem, GridListLoadMoreItem as RACGridListLoadMoreItem, GridListSection as RACGridListSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport Checkbox from '../checkbox';\n\n// The lists page's interactive list. Each row is the row every list here\n// draws — `src/row`, shared with ListItem and ListBox — so the 56dp floor,\n// the body-large headline, the body-medium supporting line, the state layers\n// and the disabled treatment are all that module's.\n//\n// ListItem is the static row: one row, on its own, presenting. This is the\n// collection that draws the same row and adds selection, keyboard navigation\n// between rows, sections and a load-more sentinel. A page with one row uses\n// ListItem; a page with a list of them uses this.\n//\n// It is ListBox's shape over a different React Aria primitive, and the\n// difference is what the primitive allows inside a row. A listbox option is\n// a leaf: a screen reader reads its text and nothing inside it can be\n// focused, so a row with a checkbox or a button in it is not an option. A\n// grid list's row is a row of cells, and its contents can be reached and\n// operated. That is what a list with a checkbox on every row needs, and it\n// is why this exists beside ListBox rather than instead of it.\n//\n// Three things are this component's own.\n//\n// **A selecting list draws a checkbox.** React Aria reports the selection\n// mode and behaviour on each row, so a list that toggles draws one without\n// the call site saying so on every item — and it is the library's Checkbox\n// rather than a glyph, so it looks like every other checkbox on the page.\n//\n// **The checkbox is drawn first, before whatever the row was given.** The\n// page draws it leading on a plain row and trailing beside an avatar; one\n// place, always the same, is what keeps a column of rows reading down.\n//\n// **Drag and drop passes straight through.** `dragAndDropHooks` is React\n// Aria's and is not wrapped, since what a list can be dropped on is the\n// page's business rather than the row's.\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the list's decision and repeating it on every row\n// is how the two drift.\nconst SelectLabelContext = createContext('Select');\ntype ListLoadMoreProps = Omit<RACGridListLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListProps<T extends object = object> = Omit<RACGridListProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n};\n\n// `Row` rather than `Item`, though the component is `List.Item`, because\n// `ListItemProps` is the standalone `ListItem` component's and both are\n// exported from the package. The two overlap on four props, so a call site\n// reaching for the obvious name got something that typechecked until it\n// passed `textValue`, and an error pointing at `onClick` rather than at the\n// name. `row` is what this file and `src/row` call the thing anyway.\ntype ListRowProps<T extends object = object> = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACGridListItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACGridListItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & Omit<RACGridListItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListSectionProps<T extends object = object> = Omit<RACGridListSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the row draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The state decides two things: whether a selection checkbox is drawn, and\n// which colour the supporting line takes — the muted role holds only while\n// the row is drawn on the surface.\nfunction itemContent(children: ReactNode, leading: ReactNode, overline: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string, ripple: ReactNode) {\n  return (state: GridListItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} overline={overline} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The selection checkbox, then whatever the row was given. Its return type is\n * written out rather than inferred: `ReactNode` is a union that includes a\n * promise, and a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: GridListItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  if (state.selectionBehavior !== 'toggle' || state.selectionMode === 'none') {\n    return leading;\n  }\n  return <>\n      <Checkbox aria-label={selectLabel} slot=\"selection\" />\n      {leading}\n    </>;\n}\n\n/**\n * A list of rows one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the row instead.\n *\n * ListItem is the static row — one row, presenting, on its own. This is the\n * collection that draws the same row and adds selection, keyboard navigation\n * between rows, sections and a load-more sentinel.\n *\n * Composed from parts, since a row's slots take arbitrary content:\n * `List.Item`, `List.Section` and `List.LoadMore`. Name the list with\n * `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction List<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: ListProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * One row. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every row an `id` — that is\n * the key selection is reported by.\n *\n * A list that selects with checkboxes draws one before whatever `leading`\n * holds, from the state React Aria reports rather than from a prop here.\n */\nfunction ListItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListRowProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  // The press ripple ListItem draws, so a row looks the same pressed in a\n  // list as on its own. The call site's pointer handlers are handed to the\n  // hook to merge, for the reason ListItem gives. React Aria keeps a row's\n  // clicks for its own press handling, so the press ends on the release.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple.surface)}\n    </RACGridListItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction ListLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListLoadMoreProps) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACGridListLoadMoreItem>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction ListSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListSectionProps<T>) {\n  return <RACGridListSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <RACGridListHeader {...stylex.props(collectionStyles.header)}>\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\nList.Item = ListItem;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps };\nexport default List;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","GridListItemRenderProps","GridListItemProps","RACGridListItemProps","GridListLoadMoreItemProps","RACGridListLoadMoreItemProps","GridListProps","RACGridListProps","GridListSectionProps","RACGridListSectionProps","stylex","createContext","useContext","GridList","RACGridList","GridListHeader","RACGridListHeader","GridListItem","RACGridListItem","GridListLoadMoreItem","RACGridListLoadMoreItem","GridListSection","RACGridListSection","CollectionLoadMore","collectionStyles","rowItemStyles","textOf","useRipple","RowContent","mergeStatefulStyles","mergeStyles","Checkbox","SelectLabelContext","ListLoadMoreProps","Omit","label","ListProps","T","className","selectLabel","style","ListRowProps","children","leading","overline","supporting","trailing","ListSectionProps","header","itemContent","ripple","state","isDisabled","isSelected","leadingFor","selectionBehavior","selectionMode","List","t0","$","_c","T0","T1","t1","t2","t3","t4","props","undefined","container","t5","ListItem","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","textValue","handlers","surface","t6","ListLoadMore","loading","ListSection","section","Item","LoadMore","Section","_c","props","RACGridList","stylex.props","RACGridListItem","RACGridListLoadMoreItem","RACGridListSection","RACGridListHeader"],"sources":["../../../src/components/list/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { GridListItemRenderProps, GridListItemProps as RACGridListItemProps, GridListLoadMoreItemProps as RACGridListLoadMoreItemProps, GridListProps as RACGridListProps, GridListSectionProps as RACGridListSectionProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { GridList as RACGridList, GridListHeader as RACGridListHeader, GridListItem as RACGridListItem, GridListLoadMoreItem as RACGridListLoadMoreItem, GridListSection as RACGridListSection } from 'react-aria-components';\nimport { CollectionLoadMore } from '../../collection';\nimport { collectionStyles, rowItemStyles } from '../../collection/styles';\nimport { textOf } from '../../collection/text';\nimport { useRipple } from '../../hooks/useRipple';\nimport { RowContent } from '../../row';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport Checkbox from '../checkbox';\n\n// The lists page's interactive list. Each row is the row every list here\n// draws — `src/row`, shared with ListItem and ListBox — so the 56dp floor,\n// the body-large headline, the body-medium supporting line, the state layers\n// and the disabled treatment are all that module's.\n//\n// ListItem is the static row: one row, on its own, presenting. This is the\n// collection that draws the same row and adds selection, keyboard navigation\n// between rows, sections and a load-more sentinel. A page with one row uses\n// ListItem; a page with a list of them uses this.\n//\n// It is ListBox's shape over a different React Aria primitive, and the\n// difference is what the primitive allows inside a row. A listbox option is\n// a leaf: a screen reader reads its text and nothing inside it can be\n// focused, so a row with a checkbox or a button in it is not an option. A\n// grid list's row is a row of cells, and its contents can be reached and\n// operated. That is what a list with a checkbox on every row needs, and it\n// is why this exists beside ListBox rather than instead of it.\n//\n// Three things are this component's own.\n//\n// **A selecting list draws a checkbox.** React Aria reports the selection\n// mode and behaviour on each row, so a list that toggles draws one without\n// the call site saying so on every item — and it is the library's Checkbox\n// rather than a glyph, so it looks like every other checkbox on the page.\n//\n// **The checkbox is drawn first, before whatever the row was given.** The\n// page draws it leading on a plain row and trailing beside an avatar; one\n// place, always the same, is what keeps a column of rows reading down.\n//\n// **Drag and drop passes straight through.** `dragAndDropHooks` is React\n// Aria's and is not wrapped, since what a list can be dropped on is the\n// page's business rather than the row's.\n\n// What each row's selection checkbox is called. A context rather than a prop\n// on the row, since it is the list's decision and repeating it on every row\n// is how the two drift.\nconst SelectLabelContext = createContext('Select');\ntype ListLoadMoreProps = Omit<RACGridListLoadMoreItemProps, 'children'> & {\n  /**\n   * What the row says while it is loading. Read by a screen reader; the ring\n   * itself carries no text.\n   * @default 'Loading more'\n   */\n  label?: string;\n};\ntype ListProps<T extends object = object> = Omit<RACGridListProps<T>, 'className' | 'style'> & {\n  /** A function may compute the class from the list's render state. */\n  className?: RACGridListProps<T>['className'];\n  /**\n   * What each row's selection checkbox is called, for a screen reader. The\n   * row's own text is what names the row; this names the box inside it.\n   * @default 'Select'\n   */\n  selectLabel?: string;\n  /** A function may compute the style from the list's render state. */\n  style?: RACGridListProps<T>['style'];\n};\n\n// `Row` rather than `Item`, though the component is `List.Item`, because\n// `ListItemProps` is the standalone `ListItem` component's and both are\n// exported from the package. The two overlap on four props, so a call site\n// reaching for the obvious name got something that typechecked until it\n// passed `textValue`, and an error pointing at `onClick` rather than at the\n// name. `row` is what this file and `src/row` call the thing anyway.\ntype ListRowProps<T extends object = object> = {\n  /** The row's headline — the one thing it is mostly about. */\n  children?: ReactNode;\n  /** A function may compute the class from the row's render state. */\n  className?: RACGridListItemProps<T>['className'];\n  /** Content before the headline: an avatar, an icon. */\n  leading?: ReactNode;\n  /**\n   * A line above the headline, in the page's label-small and the same muted\n   * role the supporting line takes — a category, a date, a status. Given\n   * alongside `supporting` it makes the row the page's three-line item.\n   */\n  overline?: ReactNode;\n  /** A function may compute the style from the row's render state. */\n  style?: RACGridListItemProps<T>['style'];\n  /** A second line under the headline, in the muted role. */\n  supporting?: ReactNode;\n  /** Content after the headline, such as an amount or a control. */\n  trailing?: ReactNode;\n} & Omit<RACGridListItemProps<T>, 'children' | 'className' | 'style'>;\ntype ListSectionProps<T extends object = object> = Omit<RACGridListSectionProps<T>, 'children'> & {\n  /**\n   * The rows in the section. A section built from data puts React Aria's\n   * `Collection` in here rather than a render function, since the header is\n   * an element beside them.\n   */\n  children?: ReactNode;\n  /**\n   * The section's heading, rendered through React Aria's header so the\n   * section is named by it. A section without one is a group with no name.\n   */\n  header?: ReactNode;\n};\n\n// What the row draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The state decides two things: whether a selection checkbox is drawn, and\n// which colour the supporting line takes — the muted role holds only while\n// the row is drawn on the surface.\nfunction itemContent(children: ReactNode, leading: ReactNode, overline: ReactNode, supporting: ReactNode, trailing: ReactNode, selectLabel: string, ripple: ReactNode) {\n  return (state: GridListItemRenderProps) => <>\n      <RowContent isDisabled={state.isDisabled} isSelected={state.isSelected} leading={leadingFor(state, leading, selectLabel)} overline={overline} supporting={supporting} trailing={trailing}>\n        {children}\n      </RowContent>\n      {state.isDisabled ? null : ripple}\n    </>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// row's state comes from the render state React Aria hands its className.\n// The order matters: `disabled` is applied last so its ground and colour\n// win over the selected container's. The state layers come from the render\n// state as well — see `focusVisible` in src/row/styles.ts — and React Aria\n// reports none of them on a disabled row, so nothing has to outrank them.\n//\n// A supporting line moves the row from the page's one-line container height\n// to its two-line one, which is a floor rather than something the row's own\n// box arrives at — see `twoLine` in `src/row/styles.ts`. Taken as an\n// argument rather than read from the render state, since React Aria reports\n// what a row is doing and not what it holds; the row is built by a call for\n// the same reason `itemContent` is.\n/**\n * The selection checkbox, then whatever the row was given. Its return type is\n * written out rather than inferred: `ReactNode` is a union that includes a\n * promise, and a function inferred as returning one has to be `async`.\n */\nfunction leadingFor(state: GridListItemRenderProps, leading: ReactNode, selectLabel: string): ReactNode {\n  if (state.selectionBehavior !== 'toggle' || state.selectionMode === 'none') {\n    return leading;\n  }\n  return <>\n      <Checkbox aria-label={selectLabel} slot=\"selection\" />\n      {leading}\n    </>;\n}\n\n/**\n * A list of rows one or more of which can be selected. Selection is React\n * Aria's: set `selectionMode` to `single` or `multiple`, and pass\n * `selectedKeys` with `onSelectionChange` to control it or\n * `defaultSelectedKeys` to let it keep its own. A list that only responds to\n * a press takes `onAction` on the row instead.\n *\n * ListItem is the static row — one row, presenting, on its own. This is the\n * collection that draws the same row and adds selection, keyboard navigation\n * between rows, sections and a load-more sentinel.\n *\n * Composed from parts, since a row's slots take arbitrary content:\n * `List.Item`, `List.Section` and `List.LoadMore`. Name the list with\n * `aria-label` or `aria-labelledby` — nothing here labels it for you.\n *\n * The call site's `className` and `style` land on the container, which is\n * the element a layout positions.\n */\nfunction List<T extends object>({\n  selectLabel = 'Select',\n  ...props\n}: ListProps<T>) {\n  return <SelectLabelContext value={selectLabel}>\n      <RACGridList {...props} {...mergeStatefulStyles(stylex.props(collectionStyles.container), props)} />\n    </SelectLabelContext>;\n}\n\n/**\n * One row. Its slots are the row's: `leading`, the headline as children,\n * `supporting` under it, and `trailing`. Give every row an `id` — that is\n * the key selection is reported by.\n *\n * A list that selects with checkboxes draws one before whatever `leading`\n * holds, from the state React Aria reports rather than from a prop here.\n */\nfunction ListItem<T extends object = object>({\n  children,\n  leading,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  overline,\n  supporting,\n  textValue,\n  trailing,\n  ...props\n}: ListRowProps<T>) {\n  const selectLabel = useContext(SelectLabelContext);\n  // The press ripple ListItem draws, so a row looks the same pressed in a\n  // list as on its own. The call site's pointer handlers are handed to the\n  // hook to merge, for the reason ListItem gives. React Aria keeps a row's\n  // clicks for its own press handling, so the press ends on the release.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACGridListItem textValue={textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(rowItemStyles(supporting, overline), props)}>\n      {itemContent(children, leading, overline, supporting, trailing, selectLabel, ripple.surface)}\n    </RACGridListItem>;\n}\n\n/**\n * The row the list shows while it is fetching more. React Aria calls\n * `onLoadMore` when this comes into view, and draws it only while\n * `isLoading`.\n */\nfunction ListLoadMore({\n  label = 'Loading more',\n  ...props\n}: ListLoadMoreProps) {\n  return <RACGridListLoadMoreItem {...props} {...mergeStyles(stylex.props(collectionStyles.loading), props)}>\n      <CollectionLoadMore label={label} size=\"24px\" />\n    </RACGridListLoadMoreItem>;\n}\n\n/**\n * A named group of rows. `header` names it, and is what a screen reader\n * reads before the rows inside.\n */\nfunction ListSection<T extends object = object>({\n  children,\n  header,\n  ...props\n}: ListSectionProps<T>) {\n  return <RACGridListSection {...props} {...mergeStyles(stylex.props(collectionStyles.section), props)}>\n      {header === undefined ? null : <RACGridListHeader {...stylex.props(collectionStyles.header)}>\n          {header}\n        </RACGridListHeader>}\n      {children}\n    </RACGridListSection>;\n}\nList.Item = ListItem;\nList.LoadMore = ListLoadMore;\nList.Section = ListSection;\nexport type { ListLoadMoreProps, ListProps, ListRowProps, ListSectionProps };\nexport default List;"],"mappings":"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"}