@kanso-labs/kanso-ui 0.34.11 → 0.34.13

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","RefObject","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","PopoverRenderProps","StyleOrFunction","TextProps","stylex","createContext","useCallback","useContext","useEffect","useId","useMemo","useState","Dialog","DialogTrigger","Heading","PreviewTrigger","Popover","RACPopover","Text","OverlayAlign","OverlaySide","focus","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","spacing","typography","DEFAULT_SIDE_OFFSET","styles","content","kGO01o","kLKAdn","kg3NbH","$$css","description","kB7OPa","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kogj98","md","ks0D6T","sm","title","DEFAULT_HOVER_DELAY","DEFAULT_HOVER_CLOSE_DELAY","PopoverAlign","PopoverSide","PopoverSize","PopoverContext","modal","size","DescriptionContext","id","register","PopoverProps","Omit","children","closeDelay","delay","trigger","PopoverTrigger","t0","$","_c","props","t1","t2","t3","t4","t5","undefined","t6","context","t7","t8","PopoverContent","alignOffset","className","container","style","triggerRef","align","side","sideOffset","descriptionId","described","setDescribed","Symbol","for","state","popup","placement","t9","t10","t11","popupDialog","ring","t12","t13","t14","PopoverDescription","PopoverTitle","Content","Description","Title","PopoverContentProps","Element","PopoverDescriptionProps","PopoverTitleProps"],"sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, PopoverRenderProps, StyleOrFunction, TextProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from 'react';\nimport { Dialog, DialogTrigger, Heading, PreviewTrigger, Popover as RACPopover, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The gap between the anchor and the panel, matching `spacing.sm`'s default.\n// A number rather than the token, because React Aria computes the position in\n// JavaScript and so cannot read a CSS custom property — this is the one place\n// in the component where a step of the spacing scale is spelled out. React\n// Aria's own default is 8 as well, but the value is this component's decision\n// rather than an inherited one.\nconst DEFAULT_SIDE_OFFSET = 8;\n\n// The surface, its entry and the dialog's focus ring are the overlay module's,\n// shared with every anchored overlay; what is here is Popover's own — its\n// inset, its two widths, and the type of its title and description.\n//\n// Popover has no page of its own, so the inset and the type follow the rich\n// tooltip, the nearest thing the Material Design pages draw: a plain rounded\n// panel offset from its anchor, with no caret drawn between the two, holding\n// a subhead over supporting text.\n//\n// React Aria's popover is two elements — the positioned panel and the dialog\n// inside it — so the styles are split the same way: the surface, `content`\n// and a size on the panel, the dialog style on the element that carries the\n// role.\nconst styles = {\n  content: {\n    kGO01o: \"xqf7pud\",\n    kLKAdn: \"x6gmt8y\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  description: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  md: {\n    ks0D6T: \"x10u2fgw\",\n    $$css: true\n  },\n  sm: {\n    ks0D6T: \"xjjheoa\",\n    $$css: true\n  },\n  title: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  }\n};\n\n// How long a pointer rests on the trigger before a hovered popover opens,\n// and how long it has to leave before it closes. React Aria's own defaults,\n// spelled out because they are the whole feel of a hover trigger and worth\n// finding in the component rather than in a changelog.\nconst DEFAULT_HOVER_DELAY = 600;\nconst DEFAULT_HOVER_CLOSE_DELAY = 200;\n\n// The overlay module's, since which side a surface opens on is the same\n// question for every anchored overlay. Aliased rather than re-declared so\n// the names a call site imports stay this component's.\ntype PopoverAlign = OverlayAlign;\ntype PopoverSide = OverlaySide;\ntype PopoverSize = 'md' | 'sm';\n\n// `size` and `modal` are declared on the root, where a reader expects to set\n// the shape of the whole popover, but it is `Popover.Content` that has to\n// apply them. Through context rather than making the call site repeat them —\n// the same arrangement Sheet uses, and worth keeping identical between the\n// two panels a consumer is most likely to reach for in the same afternoon.\nconst PopoverContext = createContext<{\n  modal: boolean;\n  size: PopoverSize;\n}>({\n  modal: false,\n  size: 'md'\n});\n\n// React Aria points a dialog's `aria-describedby` at its description slot\n// only for an alert dialog, on the grounds that an ordinary dialog's content\n// is read anyway. A popover's description names what the panel is for, so it\n// is pointed at here: the content hands the description an id, and the\n// description reports that it is mounted, since an `aria-describedby` with\n// nothing at the other end is an invalid reference rather than a harmless one.\nconst DescriptionContext = createContext<{\n  id: string;\n  register: () => () => void;\n}>({\n  id: '',\n  register: () => () => {}\n});\ntype PopoverProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * How long the pointer has to leave a hovered popover before it closes, in\n   * milliseconds. Ignored by a pressed one.\n   * @default 200\n   */\n  closeDelay?: number;\n  /**\n   * How long the pointer has to rest on the trigger before a hovered popover\n   * opens, in milliseconds. Ignored by a pressed one.\n   * @default 600\n   */\n  delay?: number;\n  /**\n   * Blocks the page behind the panel while it is open, as a dialog would.\n   * Off by default: a popover leaves the page interactive, which is the\n   * difference from `Sheet`.\n   * @default false\n   */\n  modal?: boolean;\n  /**\n   * Panel width: `sm` caps at 240px, `md` at 320px. Either way the panel is\n   * only as wide as its contents, and never wider than the viewport.\n   * @default 'md'\n   */\n  size?: PopoverSize;\n  /**\n   * What opens the panel: a press, or a pointer resting on the trigger.\n   * `hover` is the tooltips page's rich tooltip — it opens on hover, focus\n   * or a long press, and stays open while the pointer is inside it, so the\n   * panel's own buttons and links can be reached.\n   * @default 'press'\n   */\n  trigger?: PopoverTrigger;\n};\ntype PopoverTrigger = 'hover' | 'press';\n\n// React Aria names a placement by the side and, along it, the end the panel\n// is aligned to — `bottom start`, or `left top` on the sides where the axis\n// runs the other way.\n/**\n * A panel anchored to the control that opened it. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Non-modal by design — the page behind stays scrollable and clickable, which\n * is the difference from `Sheet`. Pass `modal` to change that.\n *\n * Composed rather than configured by props, because a popover's contents are\n * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and\n * `Popover.Description`. A `Button` or `IconButton` placed directly inside\n * `Popover` opens it, and one given `slot=\"close\"` inside the content closes\n * it; neither needs a part of its own.\n */\nfunction Popover({\n  children,\n  closeDelay = DEFAULT_HOVER_CLOSE_DELAY,\n  delay = DEFAULT_HOVER_DELAY,\n  modal = false,\n  size = 'md',\n  trigger = 'press',\n  ...props\n}: PopoverProps) {\n  const context = useMemo(() => ({\n    modal,\n    size\n  }), [modal, size]);\n\n  // A hovered popover is React Aria's preview trigger, which is a different\n  // element around the same parts rather than a mode of the pressed one: it\n  // opens from hover, focus or a long press, and it is always non-modal,\n  // since a panel that blocked the page while the pointer merely rested on\n  // something would be a trap. `modal` is left alone rather than refused,\n  // and `Popover.Content` reads it as it always did — the two are simply\n  // never combined by anything the page draws.\n  if (trigger === 'hover') {\n    return <PopoverContext value={context}>\n        <PreviewTrigger closeDelay={closeDelay} delay={delay} {...props}>\n          {children}\n        </PreviewTrigger>\n      </PopoverContext>;\n  }\n  return <PopoverContext value={context}>\n      <DialogTrigger {...props}>{children}</DialogTrigger>\n    </PopoverContext>;\n}\n\n/**\n * The panel itself. Everything the popover shows goes in here; the trigger\n * stays outside it, since the trigger lives in the page while this is\n * portalled out to the end of the body.\n *\n * Placement is React Aria's anchor positioning, so the panel flips to the\n * opposite side and shifts along the edge of the viewport on its own rather\n * than being clipped by it.\n */\nfunction PopoverContent({\n  align = 'center',\n  alignOffset,\n  children,\n  className,\n  container,\n  side = 'bottom',\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  style,\n  triggerRef,\n  ...props\n}: PopoverContentProps) {\n  const {\n    modal,\n    size\n  } = useContext(PopoverContext);\n  const descriptionId = useId();\n  const [described, setDescribed] = useState(false);\n  const register = useCallback(() => {\n    setDescribed(true);\n    return () => {\n      setDescribed(false);\n    };\n  }, []);\n  const description = useMemo(() => ({\n    id: descriptionId,\n    register\n  }), [descriptionId, register]);\n  return <RACPopover crossOffset={alignOffset} isNonModal={!modal} offset={sideOffset} placement={placementOf(side, align)} triggerRef={triggerRef}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles((state: PopoverRenderProps) => stylex.props(overlay.popup, styles.content, styles[size], popupOrigin(state.placement)), {\n    className,\n    style\n  })}>\n      <Dialog aria-describedby={described ? descriptionId : undefined} {...props} {...stylex.props(overlay.popupDialog, focus.ring)}>\n        <DescriptionContext value={description}>{children}</DescriptionContext>\n      </Dialog>\n    </RACPopover>;\n}\n\n/**\n * Supporting copy under the title. The panel's `aria-describedby` points at\n * it — see DescriptionContext for why that is this component's doing.\n */\nfunction PopoverDescription(props: PopoverDescriptionProps) {\n  const {\n    id,\n    register\n  } = useContext(DescriptionContext);\n  useEffect(() => register(), [register]);\n  return <Text id={id} slot=\"description\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1ghz6dp\"\n  }, props)} />;\n}\n\n/**\n * Names the popover. Rendered through React Aria's title slot, which is what\n * points the panel's `aria-labelledby` at it — a popover without one announces\n * itself unnamed.\n */\nfunction PopoverTitle(props: PopoverTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q x1ghz6dp\"\n  }, props)} />;\n}\nPopover.Content = PopoverContent;\nPopover.Description = PopoverDescription;\nPopover.Title = PopoverTitle;\n\n// The dialog's own props, plus the four that place the panel and its\n// styling. Those belong to the positioned panel rather than to the dialog,\n// but a call site has no reason to know there are two elements — `className`\n// and `style` reach the panel, which is the one worth restyling, and\n// everything else lands on the dialog.\ntype PopoverContentProps = Omit<DialogProps, 'children' | 'className' | 'style'> & {\n  /**\n   * Where the panel sits along the side it opens on.\n   * @default 'center'\n   */\n  align?: PopoverAlign;\n  /** Moves the panel along that side, in pixels. */\n  alignOffset?: number;\n  children?: ReactNode;\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the panel. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the popover renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Which side of the trigger the panel opens on. It flips to the opposite\n   * side when there is no room.\n   * @default 'bottom'\n   */\n  side?: PopoverSide;\n  /**\n   * The gap between the trigger and the panel, in pixels.\n   * @default 8\n   */\n  sideOffset?: number;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n  /**\n   * An element to anchor the panel to other than the trigger that opened it.\n   */\n  triggerRef?: RefObject<Element | null>;\n};\ntype PopoverDescriptionProps = TextProps;\ntype PopoverTitleProps = HeadingProps;\nexport type { PopoverAlign, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitleProps, PopoverTrigger };\nexport default Popover;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","RefObject","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","PopoverRenderProps","StyleOrFunction","TextProps","stylex","createContext","useCallback","useContext","useEffect","useId","useMemo","useState","Dialog","DialogTrigger","Heading","PreviewTrigger","Popover","RACPopover","Text","OverlayAlign","OverlaySide","focus","mergeStatefulStyles","mergeStyles","overlay","placementOf","popupOrigin","colors","spacing","typography","DEFAULT_SIDE_OFFSET","styles","content","kGO01o","kLKAdn","kg3NbH","$$css","description","kB7OPa","kMwMTN","kMv6JI","kGuDYH","k63SB2","kb6lSQ","kLWn49","kogj98","md","ks0D6T","sm","title","DEFAULT_HOVER_DELAY","DEFAULT_HOVER_CLOSE_DELAY","PopoverAlign","PopoverSide","PopoverSize","PopoverContext","modal","size","DescriptionContext","id","register","PopoverProps","Omit","children","closeDelay","delay","trigger","PopoverTrigger","t0","$","_c","props","t1","t2","t3","t4","t5","undefined","t6","context","t7","t8","PopoverContent","alignOffset","className","container","style","triggerRef","align","side","sideOffset","descriptionId","described","setDescribed","Symbol","for","state","popup","placement","t9","t10","t11","popupDialog","ring","t12","t13","t14","PopoverDescription","PopoverTitle","Content","Description","Title","PopoverContentProps","Element","PopoverDescriptionProps","PopoverTitleProps","Popover","_c","props","stylex.props","RACPopover"],"sources":["../../../src/components/popover/index.tsx"],"sourcesContent":["import type { ReactNode, RefObject } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, PopoverRenderProps, StyleOrFunction, TextProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useCallback, useContext, useEffect, useId, useMemo, useState } from 'react';\nimport { Dialog, DialogTrigger, Heading, PreviewTrigger, Popover as RACPopover, Text } from 'react-aria-components';\nimport type { OverlayAlign, OverlaySide } from '../../styles/overlay';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay, placementOf, popupOrigin } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing, typography } from '../../tokens/design.tokens.stylex';\n\n// The gap between the anchor and the panel, matching `spacing.sm`'s default.\n// A number rather than the token, because React Aria computes the position in\n// JavaScript and so cannot read a CSS custom property — this is the one place\n// in the component where a step of the spacing scale is spelled out. React\n// Aria's own default is 8 as well, but the value is this component's decision\n// rather than an inherited one.\nconst DEFAULT_SIDE_OFFSET = 8;\n\n// The surface, its entry and the dialog's focus ring are the overlay module's,\n// shared with every anchored overlay; what is here is Popover's own — its\n// inset, its two widths, and the type of its title and description.\n//\n// Popover has no page of its own, so the inset and the type follow the rich\n// tooltip, the nearest thing the Material Design pages draw: a plain rounded\n// panel offset from its anchor, with no caret drawn between the two, holding\n// a subhead over supporting text.\n//\n// React Aria's popover is two elements — the positioned panel and the dialog\n// inside it — so the styles are split the same way: the surface, `content`\n// and a size on the panel, the dialog style on the element that carries the\n// role.\nconst styles = {\n  content: {\n    kGO01o: \"xqf7pud\",\n    kLKAdn: \"x6gmt8y\",\n    kg3NbH: \"x790zyz\",\n    $$css: true\n  },\n  description: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xpo2rfv\",\n    kGuDYH: \"x193rfdd\",\n    k63SB2: \"x1hews6w\",\n    kb6lSQ: \"xn43zvd\",\n    kLWn49: \"xv61bfh\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  md: {\n    ks0D6T: \"x10u2fgw\",\n    $$css: true\n  },\n  sm: {\n    ks0D6T: \"xjjheoa\",\n    $$css: true\n  },\n  title: {\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"x1w5n3ug\",\n    kMv6JI: \"xrgwony\",\n    kGuDYH: \"x12s497w\",\n    k63SB2: \"x1szcwkt\",\n    kb6lSQ: \"xo803ec\",\n    kLWn49: \"xyl1r0q\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  }\n};\n\n// How long a pointer rests on the trigger before a hovered popover opens,\n// and how long it has to leave before it closes. React Aria's own defaults,\n// spelled out because they are the whole feel of a hover trigger and worth\n// finding in the component rather than in a changelog.\nconst DEFAULT_HOVER_DELAY = 600;\nconst DEFAULT_HOVER_CLOSE_DELAY = 200;\n\n// The overlay module's, since which side a surface opens on is the same\n// question for every anchored overlay. Aliased rather than re-declared so\n// the names a call site imports stay this component's.\ntype PopoverAlign = OverlayAlign;\ntype PopoverSide = OverlaySide;\ntype PopoverSize = 'md' | 'sm';\n\n// `size` and `modal` are declared on the root, where a reader expects to set\n// the shape of the whole popover, but it is `Popover.Content` that has to\n// apply them. Through context rather than making the call site repeat them —\n// the same arrangement Sheet uses, and worth keeping identical between the\n// two panels a consumer is most likely to reach for in the same afternoon.\nconst PopoverContext = createContext<{\n  modal: boolean;\n  size: PopoverSize;\n}>({\n  modal: false,\n  size: 'md'\n});\n\n// React Aria points a dialog's `aria-describedby` at its description slot\n// only for an alert dialog, on the grounds that an ordinary dialog's content\n// is read anyway. A popover's description names what the panel is for, so it\n// is pointed at here: the content hands the description an id, and the\n// description reports that it is mounted, since an `aria-describedby` with\n// nothing at the other end is an invalid reference rather than a harmless one.\nconst DescriptionContext = createContext<{\n  id: string;\n  register: () => () => void;\n}>({\n  id: '',\n  register: () => () => {}\n});\ntype PopoverProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n  /**\n   * How long the pointer has to leave a hovered popover before it closes, in\n   * milliseconds. Ignored by a pressed one.\n   * @default 200\n   */\n  closeDelay?: number;\n  /**\n   * How long the pointer has to rest on the trigger before a hovered popover\n   * opens, in milliseconds. Ignored by a pressed one.\n   * @default 600\n   */\n  delay?: number;\n  /**\n   * Blocks the page behind the panel while it is open, as a dialog would.\n   * Off by default: a popover leaves the page interactive, which is the\n   * difference from `Sheet`.\n   * @default false\n   */\n  modal?: boolean;\n  /**\n   * Panel width: `sm` caps at 240px, `md` at 320px. Either way the panel is\n   * only as wide as its contents, and never wider than the viewport.\n   * @default 'md'\n   */\n  size?: PopoverSize;\n  /**\n   * What opens the panel: a press, or a pointer resting on the trigger.\n   * `hover` is the tooltips page's rich tooltip — it opens on hover, focus\n   * or a long press, and stays open while the pointer is inside it, so the\n   * panel's own buttons and links can be reached.\n   * @default 'press'\n   */\n  trigger?: PopoverTrigger;\n};\ntype PopoverTrigger = 'hover' | 'press';\n\n// React Aria names a placement by the side and, along it, the end the panel\n// is aligned to — `bottom start`, or `left top` on the sides where the axis\n// runs the other way.\n/**\n * A panel anchored to the control that opened it. Open state is React Aria's:\n * pass `isOpen` with `onOpenChange` to control it, or `defaultOpen` to let it\n * keep its own.\n *\n * Non-modal by design — the page behind stays scrollable and clickable, which\n * is the difference from `Sheet`. Pass `modal` to change that.\n *\n * Composed rather than configured by props, because a popover's contents are\n * arbitrary — the parts are `Popover.Content`, `Popover.Title`, and\n * `Popover.Description`. A `Button` or `IconButton` placed directly inside\n * `Popover` opens it, and one given `slot=\"close\"` inside the content closes\n * it; neither needs a part of its own.\n */\nfunction Popover({\n  children,\n  closeDelay = DEFAULT_HOVER_CLOSE_DELAY,\n  delay = DEFAULT_HOVER_DELAY,\n  modal = false,\n  size = 'md',\n  trigger = 'press',\n  ...props\n}: PopoverProps) {\n  const context = useMemo(() => ({\n    modal,\n    size\n  }), [modal, size]);\n\n  // A hovered popover is React Aria's preview trigger, which is a different\n  // element around the same parts rather than a mode of the pressed one: it\n  // opens from hover, focus or a long press, and it is always non-modal,\n  // since a panel that blocked the page while the pointer merely rested on\n  // something would be a trap. `modal` is left alone rather than refused,\n  // and `Popover.Content` reads it as it always did — the two are simply\n  // never combined by anything the page draws.\n  if (trigger === 'hover') {\n    return <PopoverContext value={context}>\n        <PreviewTrigger closeDelay={closeDelay} delay={delay} {...props}>\n          {children}\n        </PreviewTrigger>\n      </PopoverContext>;\n  }\n  return <PopoverContext value={context}>\n      <DialogTrigger {...props}>{children}</DialogTrigger>\n    </PopoverContext>;\n}\n\n/**\n * The panel itself. Everything the popover shows goes in here; the trigger\n * stays outside it, since the trigger lives in the page while this is\n * portalled out to the end of the body.\n *\n * Placement is React Aria's anchor positioning, so the panel flips to the\n * opposite side and shifts along the edge of the viewport on its own rather\n * than being clipped by it.\n */\nfunction PopoverContent({\n  align = 'center',\n  alignOffset,\n  children,\n  className,\n  container,\n  side = 'bottom',\n  sideOffset = DEFAULT_SIDE_OFFSET,\n  style,\n  triggerRef,\n  ...props\n}: PopoverContentProps) {\n  const {\n    modal,\n    size\n  } = useContext(PopoverContext);\n  const descriptionId = useId();\n  const [described, setDescribed] = useState(false);\n  const register = useCallback(() => {\n    setDescribed(true);\n    return () => {\n      setDescribed(false);\n    };\n  }, []);\n  const description = useMemo(() => ({\n    id: descriptionId,\n    register\n  }), [descriptionId, register]);\n  return <RACPopover crossOffset={alignOffset} isNonModal={!modal} offset={sideOffset} placement={placementOf(side, align)} triggerRef={triggerRef}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...mergeStatefulStyles((state: PopoverRenderProps) => stylex.props(overlay.popup, styles.content, styles[size], popupOrigin(state.placement)), {\n    className,\n    style\n  })}>\n      <Dialog aria-describedby={described ? descriptionId : undefined} {...props} {...stylex.props(overlay.popupDialog, focus.ring)}>\n        <DescriptionContext value={description}>{children}</DescriptionContext>\n      </Dialog>\n    </RACPopover>;\n}\n\n/**\n * Supporting copy under the title. The panel's `aria-describedby` points at\n * it — see DescriptionContext for why that is this component's doing.\n */\nfunction PopoverDescription(props: PopoverDescriptionProps) {\n  const {\n    id,\n    register\n  } = useContext(DescriptionContext);\n  useEffect(() => register(), [register]);\n  return <Text id={id} slot=\"description\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xpo2rfv x193rfdd x1hews6w xn43zvd xv61bfh x1ghz6dp\"\n  }, props)} />;\n}\n\n/**\n * Names the popover. Rendered through React Aria's title slot, which is what\n * points the panel's `aria-labelledby` at it — a popover without one announces\n * itself unnamed.\n */\nfunction PopoverTitle(props: PopoverTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xrgwony x12s497w x1szcwkt xo803ec xyl1r0q x1ghz6dp\"\n  }, props)} />;\n}\nPopover.Content = PopoverContent;\nPopover.Description = PopoverDescription;\nPopover.Title = PopoverTitle;\n\n// The dialog's own props, plus the four that place the panel and its\n// styling. Those belong to the positioned panel rather than to the dialog,\n// but a call site has no reason to know there are two elements — `className`\n// and `style` reach the panel, which is the one worth restyling, and\n// everything else lands on the dialog.\ntype PopoverContentProps = Omit<DialogProps, 'children' | 'className' | 'style'> & {\n  /**\n   * Where the panel sits along the side it opens on.\n   * @default 'center'\n   */\n  align?: PopoverAlign;\n  /** Moves the panel along that side, in pixels. */\n  alignOffset?: number;\n  children?: ReactNode;\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<PopoverRenderProps>;\n  /**\n   * Where to portal the panel. Defaults to the end of `<body>`, which is\n   * right for an app that sets its StyleX theme on `:root`. An app that\n   * scopes the theme to a subtree has to point this at an element inside it,\n   * or the popover renders outside the theme and falls back to the tokens'\n   * `prefers-color-scheme` default.\n   */\n  container?: Element;\n  /**\n   * Which side of the trigger the panel opens on. It flips to the opposite\n   * side when there is no room.\n   * @default 'bottom'\n   */\n  side?: PopoverSide;\n  /**\n   * The gap between the trigger and the panel, in pixels.\n   * @default 8\n   */\n  sideOffset?: number;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<PopoverRenderProps>;\n  /**\n   * An element to anchor the panel to other than the trigger that opened it.\n   */\n  triggerRef?: RefObject<Element | null>;\n};\ntype PopoverDescriptionProps = TextProps;\ntype PopoverTitleProps = HeadingProps;\nexport type { PopoverAlign, PopoverContentProps, PopoverDescriptionProps, PopoverProps, PopoverSide, PopoverSize, PopoverTitleProps, PopoverTrigger };\nexport default Popover;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","fallback","kZKoxP","kzqmXN","image","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","ProductIconProps","Omit","name","size","src","tone","initialFrom","trimmed","trim","Array","from","toLocaleUpperCase","ProductIcon","t0","$","_c","render","t1","t2","props","undefined","status","t3","named","t4","t5","role","t6","t7","t8","children","t9","defaultTagName"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\n//\n// That cost is also why `tone` tints the fallback rather than the root. A mark\n// letterboxed into the square does not cover it, and neither does one drawn\n// with transparency, so a tint on the root showed as a coloured box around\n// every logo that was not an opaque square. On the fallback it is seen exactly\n// when it is meant to be: while there is no mark, or none has loaded.\n//\n// No Material Design page draws a product mark, so its sizes are Avatar's —\n// 36, 40 and 56 — which is what lets a mark and a person fill the same slot.\n// Avatar's own comment is where those three are argued, against the\n// library's control scale rather than against a page. The fallback's tint is\n// a container role under its on-colour, the pairing every filled surface in\n// the system uses.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  fallback: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud.\n   */\n  name: string;\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint the fallback with. It is\n   * the fallback's own background, so it is gone once `src` has loaded rather\n   * than sitting behind the mark.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n  const trimmed = name.trim();\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  // The mark is shown only once it has loaded, and the letter stays until\n  // then and comes back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the fallback letter be read: \"B\" is\n  // not what anyone means to announce. Marking the root as an image also\n  // makes its contents presentational, so neither the mark nor the letter\n  // is announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the letter\n  // shown when there is no mark, or none has loaded yet.\n  //\n  // A blank name — one still loading, say — names nothing, so the icon is\n  // then a plain element rather than an image with no name, which a screen\n  // reader reads as a bare \"image\". Its empty initial, or its mark with an\n  // empty alt, leave it nothing to announce.\n  const named = name.trim() !== '';\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...(named ? {\n        'aria-label': name,\n        role: 'img'\n      } : {}),\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" /> : <span {...stylex.props(styles.fallback, styles[tone])}>\n            {initialFrom(name)}\n          </span>,\n      ...mergeStyles(stylex.props(styles.base, styles[size]), props)\n    },\n    render\n  });\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["stylex","RenderComponentProps","useImageLoadingStatus","useRender","mergeStyles","colors","radii","typography","styles","base","kGNEyG","kaIpWk","kB7OPa","k1xSpc","kmuXW","kMv6JI","k63SB2","kjj79g","kVQacm","kfSwDN","$$css","fallback","kZKoxP","kzqmXN","image","kVIFPx","lg","kGuDYH","md","negative","kWkggS","kMwMTN","positive","primary","secondary","sm","tertiary","ProductIconProps","Omit","name","size","src","tone","initialFrom","trimmed","trim","Array","from","toLocaleUpperCase","ProductIcon","t0","$","_c","render","t1","t2","props","undefined","status","t3","named","t4","t5","role","t6","t7","t8","children","t9","defaultTagName","_c","props","stylex.props"],"sources":["../../../src/components/product-icon/index.tsx"],"sourcesContent":["import * as stylex from '@stylexjs/stylex';\nimport type { RenderComponentProps } from '../../render/useRender';\nimport { useImageLoadingStatus } from '../../hooks/useImageLoadingStatus';\nimport { useRender } from '../../render/useRender';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, radii, typography } from '../../tokens/design.tokens.stylex';\n\n// The counterpart to Avatar: Avatar stands for a person, this stands for\n// everything else — an application, a service, a brand. The two are the same\n// three sizes so either can fill a leading slot without moving what sits\n// beside it, and they differ in the two ways that matter for a mark rather\n// than a face.\n//\n// A rounded square rather than a circle. A logo is drawn to its own bounding\n// box, and a circle crops the corners it was composed with.\n//\n// `contain` rather than `cover`. Cropping a face to fill a circle loses\n// nothing anyone minds; cropping a wordmark loses the word. The cost is\n// letterboxing — a wide mark leaves space above and below — and that is the\n// right trade for a mark whose whole job is to be recognised.\n//\n// That cost is also why `tone` tints the fallback rather than the root. A mark\n// letterboxed into the square does not cover it, and neither does one drawn\n// with transparency, so a tint on the root showed as a coloured box around\n// every logo that was not an opaque square. On the fallback it is seen exactly\n// when it is meant to be: while there is no mark, or none has loaded.\n//\n// No Material Design page draws a product mark, so its sizes are Avatar's —\n// 36, 40 and 56 — which is what lets a mark and a person fill the same slot.\n// Avatar's own comment is where those three are argued, against the\n// library's control scale rather than against a page. The fallback's tint is\n// a container role under its on-colour, the pairing every filled surface in\n// the system uses.\nconst styles = {\n  base: {\n    kGNEyG: \"x6s0dn4\",\n    kaIpWk: \"x1xdvaa9\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x3nfvp2\",\n    kmuXW: \"x2lah0s\",\n    kMv6JI: \"xkknnkr\",\n    k63SB2: \"x1bf3uqz\",\n    kjj79g: \"xl56j7k\",\n    kVQacm: \"xb3r6kr\",\n    kfSwDN: \"x87ps6o\",\n    $$css: true\n  },\n  fallback: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x5yr21d\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xh8yej3\",\n    kjj79g: \"xl56j7k\",\n    $$css: true\n  },\n  image: {\n    kZKoxP: \"x5yr21d\",\n    kzqmXN: \"xh8yej3\",\n    kVIFPx: \"x19kjcj4\",\n    $$css: true\n  },\n  lg: {\n    kZKoxP: \"xnnlda6\",\n    kGuDYH: \"x1848etk\",\n    kzqmXN: \"x15yg21f\",\n    $$css: true\n  },\n  md: {\n    kZKoxP: \"x1vqgdyp\",\n    kGuDYH: \"x14zspaw\",\n    kzqmXN: \"x100vrsf\",\n    $$css: true\n  },\n  negative: {\n    kWkggS: \"xkz0cvf\",\n    kMwMTN: \"xylzu7l\",\n    $$css: true\n  },\n  positive: {\n    kWkggS: \"xa3zu90\",\n    kMwMTN: \"x1di7zbg\",\n    $$css: true\n  },\n  primary: {\n    kWkggS: \"xp89om9\",\n    kMwMTN: \"xscdzaa\",\n    $$css: true\n  },\n  secondary: {\n    kWkggS: \"x15dekr4\",\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  sm: {\n    kZKoxP: \"xc9qbxq\",\n    kGuDYH: \"xkucv67\",\n    kzqmXN: \"x14qfxbe\",\n    $$css: true\n  },\n  tertiary: {\n    kWkggS: \"xs6yvni\",\n    kMwMTN: \"x3cbcwg\",\n    $$css: true\n  }\n};\ntype ProductIconProps = Omit<RenderComponentProps<'span'>, 'children'> & {\n  /**\n   * What this identifies. Supplies both the fallback initial and the\n   * accessible name, so a screen reader announces the thing rather than\n   * reading a letter aloud.\n   */\n  name: string;\n  /**\n   * Edge length: `sm` 36px, `md` 40px, `lg` 56px. The same three Avatar uses,\n   * so the two are interchangeable wherever one leads a row or a card.\n   * @default 'md'\n   */\n  size?: 'lg' | 'md' | 'sm';\n  /**\n   * The mark to show in place of the initial. The initial stays until it has\n   * loaded, and comes back if it fails.\n   */\n  src?: string;\n  /**\n   * Which container/on-container colour pair to tint the fallback with. It is\n   * the fallback's own background, so it is gone once `src` has loaded rather\n   * than sitting behind the mark.\n   * @default 'primary'\n   */\n  tone?: 'negative' | 'positive' | 'primary' | 'secondary' | 'tertiary';\n};\n\n// One letter, where Avatar takes two. A person has a first name and a last\n// name to initialise; a thing usually has neither, so the same rule applied\n// to \"Second Item\" would produce \"SI\" — a pair of initials for something that\n// was never two words in that sense. Array.from rather than indexing, so a\n// name starting outside the Basic Multilingual Plane yields its whole first\n// character instead of half a surrogate pair.\nfunction initialFrom(name: string) {\n  const trimmed = name.trim();\n  return (Array.from(trimmed)[0] ?? '').toLocaleUpperCase();\n}\n\n/**\n * A small square mark identifying something that is not a person — an\n * application, a service, a brand. Reach for Avatar when it is a person.\n *\n * The mark is letterboxed rather than cropped, so a logo of any aspect ratio\n * can be handed over as it was drawn.\n */\nfunction ProductIcon({\n  name,\n  render,\n  size = 'md',\n  src,\n  tone = 'primary',\n  ...props\n}: ProductIconProps) {\n  // The mark is shown only once it has loaded, and the letter stays until\n  // then and comes back if it fails — see useImageLoadingStatus.\n  const status = useImageLoadingStatus(src);\n\n  // role/aria-label rather than letting the fallback letter be read: \"B\" is\n  // not what anyone means to announce. Marking the root as an image also\n  // makes its contents presentational, so neither the mark nor the letter\n  // is announced a second time underneath the name. A span rather than an\n  // <img>, which is void: this element's whole job is to hold the letter\n  // shown when there is no mark, or none has loaded yet.\n  //\n  // A blank name — one still loading, say — names nothing, so the icon is\n  // then a plain element rather than an image with no name, which a screen\n  // reader reads as a bare \"image\". Its empty initial, or its mark with an\n  // empty alt, leave it nothing to announce.\n  const named = name.trim() !== '';\n  return useRender({\n    defaultTagName: 'span',\n    props: {\n      ...(named ? {\n        'aria-label': name,\n        role: 'img'\n      } : {}),\n      ...props,\n      children: status === 'loaded' ? <img alt=\"\" src={src} className=\"x5yr21d xh8yej3 x19kjcj4\" /> : <span {...stylex.props(styles.fallback, styles[tone])}>\n            {initialFrom(name)}\n          </span>,\n      ...mergeStyles(stylex.props(styles.base, styles[size]), props)\n    },\n    render\n  });\n}\nexport type { ProductIconProps };\nexport default ProductIcon;"],"mappings":";;;;;;;AAkCA,MAAMQ,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;CACT;CACAC,UAAU;EACRX,QAAQ;EACRY,QAAQ;EACRT,QAAQ;EACRU,QAAQ;EACRN,QAAQ;EACRG,OAAO;CACT;CACAI,OAAO;EACLF,QAAQ;EACRC,QAAQ;EACRE,QAAQ;EACRL,OAAO;CACT;CACAM,IAAI;EACFJ,QAAQ;EACRK,QAAQ;EACRJ,QAAQ;EACRH,OAAO;CACT;CACAQ,IAAI;EACFN,QAAQ;EACRK,QAAQ;EACRJ,QAAQ;EACRH,OAAO;CACT;CACAS,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAY,UAAU;EACRF,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAa,SAAS;EACPH,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAc,WAAW;EACTJ,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;CACAe,IAAI;EACFb,QAAQ;EACRK,QAAQ;EACRJ,QAAQ;EACRH,OAAO;CACT;CACAgB,UAAU;EACRN,QAAQ;EACRC,QAAQ;EACRX,OAAO;CACT;AACF;AAkCA,SAASuB,YAAYJ,MAAc;CACjC,MAAMK,UAAUL,KAAKM,KAAK;CAC1B,QAAQC,MAAMC,KAAKH,OAAO,CAAC,CAAC,MAAM,GAAA,CAAII,kBAAkB;AAC1D;;;;;;;;AASA,SAAAC,YAAAC,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAb,MAAAc,QAAAb,MAAAc,IAAAb,KAAAC,MAAAa,IAAA,GAAAC,YAAAN;CAGnB,MAAAV,OAAAc,OAAAG,KAAAA,IAAA,OAAAH;CAEA,MAAAZ,OAAAa,OAAAE,KAAAA,IAAA,YAAAF;CAKA,MAAAG,SAAexD,sBAAsBuC,GAAG;CAAE,IAAAkB;CAAA,IAAAR,EAAA,OAAAZ,MAAA;EAa5BoB,KAAApB,KAAIM,KAAM;EAACM,EAAA,KAAAZ;EAAAY,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAzB,MAAAS,QAAcD,OAAgB;CAEZ,MAAAE,KAAA;CAAM,IAAAC;CAAA,IAAAX,EAAA,OAAAZ,QAAAY,EAAA,OAAAS,OAAA;EAEhBE,KAAAF,QAAA;GAAA,cACYrB;GAAIwB,MACZ;EACH,IAHD,CAGC;EAACZ,EAAA,KAAAZ;EAAAY,EAAA,KAAAS;EAAAT,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAZ,QAAAY,EAAA,OAAAV,OAAAU,EAAA,OAAAO,UAAAP,EAAA,OAAAT,MAAA;EAEIsB,KAAAN,WAAW,WAAW,oBAAA,OAAA;GAAS,KAAA;GAAQjB;GAAe,WAAA;EAA0B,CAAA,IAAM,oBAAA,QAAA;GAErF,GAF+FzC,MAAaQ,OAAMa,UAAWb,OAAOkC,KAAK;GAC7IC,UAAAA,YAAYJ,IAAI;EACZ,CAAA;EAAAY,EAAA,KAAAZ;EAAAY,EAAA,KAAAV;EAAAU,EAAA,KAAAO;EAAAP,EAAA,KAAAT;EAAAS,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CACR,MAAAc,KAAA7D,YAAYJ,MAAaQ,OAAMC,MAAOD,OAAOgC,KAAK,GAAGgB,OAAK;CAAC,IAAAU;CAAA,IAAAf,EAAA,QAAAK,WAAAL,EAAA,QAAAW,MAAAX,EAAA,QAAAa,MAAAb,EAAA,QAAAc,IAAA;EATzDC,KAAA;GAAA,GACDJ;GAGE,GACHN;GAAKW,UACEH;GAEC,GACRC;EACL;EAACd,EAAA,MAAAK;EAAAL,EAAA,MAAAW;EAAAX,EAAA,MAAAa;EAAAb,EAAA,MAAAc;EAAAd,EAAA,MAAAe;CAAA,OAAAA,KAAAf,EAAA;CAAA,IAAAiB;CAAA,IAAAjB,EAAA,QAAAE,UAAAF,EAAA,QAAAe,IAAA;EAZcE,KAAA;GAAAC,gBACCR;GAAML,OACfU;GAUNb;EAEH;EAACF,EAAA,MAAAE;EAAAF,EAAA,MAAAe;EAAAf,EAAA,MAAAiB;CAAA,OAAAA,KAAAjB,EAAA;CAAA,OAdMhD,UAAUiE,EAchB;AAAC"}

package/dist/components/progress-indicator/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","ProgressBarRenderProps","ProgressBarProps","RACProgressBarProps","stylex","ProgressBar","IndicatorTone","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","colors","motion","radii","CIRCULAR_SIZE","CIRCULAR_SIZE_PX","THICKNESS","GAP","RADIUS","CIRCUMFERENCE","Math","PI","FORCED_COLORS","ARC_MS","CYCLE_MS","ROTATE_MS","round","RING_EASING","INDETERMINATE_MS","BUFFER_MS","LINE_SLOWDOWN","RING_SLOWDOWN","primaryTranslate","primaryScale","secondaryTranslate","secondaryScale","buffering","expandArc","travelArc","spin","_temp","kZKoxP","kzqmXN","_temp2","styles","arcActive","kjVXCG","$$css","arcIndeterminate","kkDQuc","k44tkh","ko0y90","kKVMdj","kyAemX","k1ekBW","arcMotion","k6CgDc","kIyJzY","kAMwcw","arcTrack","circular","kB7OPa","k1xSpc","k3aq6I","circularIndeterminate","circularSize","size","val","undefined","indeterminateBarInner","kWkggS","kaIpWk","kpwlN0","kVAEAm","indeterminateTrack","kjBf7l","kInvED","k3XXqK","kMeerF","primaryBarInner","rootCircular","kGNEyG","secondaryBarInner","trackBuffered","kmuXW","trackBufferedAt","share","ProgressIndicatorProps","buffer","className","label","showValue","style","tone","ProgressIndicatorTone","variant","ProgressIndicatorVariant","Omit","Extract","arcsFor","percentage","active","track","max","strokeDasharray","strokeDashoffset","bufferShare","minValue","maxValue","value","range","buffered","remaining","min","CircularTrack","t0","$","_c","isIndeterminate","inherit","t1","arcs","t2","props","t3","inheritTrack","t4","t5","t6","t7","inheritActive","t8","t9","indicatorContent","state","valueText","LinearTrack","0","1","ProgressIndicator","T0","t10","t11","t12","root"],"sources":["../../../src/components/progress-indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ProgressBarRenderProps, ProgressBarProps as RACProgressBarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ProgressBar } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii } from '../../tokens/design.tokens.stylex';\n\n// The progress indicators page's two shapes, drawn flat: the page's wavy\n// shape is the Expressive column's alone, and its amplitude and wavelength\n// belong to a variant rather than to this. Both carry the three parts the\n// page's anatomy names — the active indicator in primary, the track in\n// secondary container, and, on the line, the stop indicator in primary at\n// the end — at the page's 4dp thickness, with the 4dp gap its measurements\n// give either side of the track. The ring is the page's default 40dp of the\n// four sizes it draws.\n//\n// The determinate line is a row of those parts: the active indicator takes\n// the value's share of what the gaps and the stop leave, and the track takes\n// the rest — see `activeAt` in src/indicator/styles.ts. The\n// determinate ring is two arcs of one circle, cut by the dash pattern: the\n// active arc runs from the top for its share of the circumference, and the\n// track picks up 4dp past it and stops 4dp before it comes back round,\n// which is the same gap measured along the curve.\n//\n// The animations are Material's own rather than something assembled from\n// the motion tokens: an indeterminate indicator is a piece of choreography,\n// and one written from scratch reads as a different component beside a\n// Material app. Material Web and Angular Material both descend from the\n// same implementation and agree on every number, so the numbers here are\n// theirs — the line's two bars and their four keyframe sets, the buffer's\n// scrolling dots, the ring's 1333ms arc, its four-arc cycle and its 1568ms\n// rotation, and the 250ms and 500ms a determinate value moves over.\n//\n// Two things are decided differently, both after reading the two of them.\n//\n// The ring is one dashed arc rather than two halves. Material Web draws it\n// as a pair of bordered half-circles, Angular as a pair of clipped SVG\n// circles with a patch over the seam between them; both constructions exist\n// to work around that split, and a single arc whose dash pattern is\n// animated needs neither and shares its geometry with the determinate ring.\n// The three effects it composes are still theirs: the arc grows and shrinks\n// over the arc's duration, its start travels the circle over four of those,\n// and the whole thing turns over the rotation's.\n//\n// Under `prefers-reduced-motion` the motion slows rather than stopping,\n// which is Angular's answer and the better one: an indicator that freezes\n// stops saying the work is going on, and a frozen arc caught at its short\n// end reads as broken. The multipliers are Angular's — two for the line,\n// and a quarter more for the ring.\n//\n// React Aria's `ProgressBar` is the root: it carries the role, the value and\n// its text, and reports the percentage and whether it is indeterminate as\n// render state, which is what everything here is drawn from.\n\n// The circle the arcs are cut from. The radius is the diameter less the\n// stroke, halved, so the stroke sits inside the 40dp box rather than\n// straddling its edge.\n//\n// The thickness and the gap are the same 4dp the shared line is drawn at,\n// written again rather than imported from `src/indicator/styles`: StyleX\n// evaluates the values inside `stylex.create` and `stylex.keyframes` as it\n// compiles, and will not follow an import to a module that is not a theme\n// to reach one — an imported constant fails the transform outright.\nconst CIRCULAR_SIZE = 40;\n// The same value as a length, hoisted rather than built at the parameter.\n// The compiler has no safe reordering for a template literal, so one written\n// as a default parameter skips the whole component around it — which the\n// panic threshold this lands beside turns into a build failure.\nconst CIRCULAR_SIZE_PX = `${CIRCULAR_SIZE}px`;\nconst THICKNESS = 4;\nconst GAP = 4;\nconst RADIUS = (CIRCULAR_SIZE - THICKNESS) / 2;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\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// The ring's timings. The arc is 1333ms; a full cycle is four of them; and\n// the rotation is the arc scaled by 360/306, which is the arc's start\n// rotation plus the circle less the arc's size.\nconst ARC_MS = 1333;\nconst CYCLE_MS = ARC_MS * 4;\nconst ROTATE_MS = Math.round(ARC_MS * 360 / 306);\nconst RING_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n// The line's own: 2s for an indeterminate pass, and the 250ms the buffer's\n// dots take to scroll one pitch. What a determinate value moves over is the\n// shared line's, since a meter moves the same way.\nconst INDETERMINATE_MS = 2000;\nconst BUFFER_MS = 250;\n\n// What `prefers-reduced-motion` slows each shape by.\nconst LINE_SLOWDOWN = 2;\nconst RING_SLOWDOWN = 1.25;\n\n// The two bars of the indeterminate line, translated and scaled at once.\nconst primaryTranslate = \"x1pch1fy-B\";\nconst primaryScale = \"xxyp5q1-B\";\nconst secondaryTranslate = \"xzo9tdn-B\";\nconst secondaryScale = \"x1w7bnrt-B\";\n\n// The buffer's dots scroll by one pitch of the pattern and start again.\nconst buffering = \"x19sykc1-B\";\n\n// The arc's own length, written against a path the circle normalises to 100\n// with `pathLength`, so these are percentages of the circumference rather\n// than lengths StyleX would have to work out.\n//\n// Material contracts to 10 degrees of turn and grows to 270. The 270 is 75\n// of the circumference and is written as it is; the 10 is not, because the\n// page's rounded ends change what a short dash draws. A round cap adds half\n// the stroke at each end, so a 10-degree dash on the 40dp ring is 3px of\n// path inside a 7px capsule of 4px stroke — a dot rather than the sliver\n// Material's square-cut ends give at the same angle. 8 is the shortest the\n// cap still draws as an arc, and it is the floor for that reason rather\n// than because the page names it.\nconst expandArc = \"x1t81ys1-B\";\n\n// Where the arc starts. Material turns it in eight increments of 135 degrees\n// rather than at a constant rate, each eased with the same curve the arc's\n// growth uses, so it settles at each position and springs to the next; three\n// full turns over the cycle, under the rotation's own single turn. The\n// numbers here are those angles along a path of 100: 135 degrees is 37.5 of\n// it, and 1080 degrees is 300.\nconst travelArc = \"x26nhu8-B\";\nconst spin = \"x1fy8ia8-B\";\nconst _temp = {\n  kZKoxP: \"xyq6l7l\",\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst _temp2 = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst styles = {\n  arcActive: {\n    kjVXCG: \"x1i9vjva\",\n    $$css: true\n  },\n  arcIndeterminate: {\n    kkDQuc: \"x12dwrod\",\n    k44tkh: \"xxx5gdc\",\n    ko0y90: \"x77zgwx\",\n    kKVMdj: \"x14p4i3i\",\n    kyAemX: \"x1582zw4\",\n    kjVXCG: \"x1i9vjva\",\n    k1ekBW: \"x13b0p5u\",\n    $$css: true\n  },\n  arcMotion: {\n    k6CgDc: \"x12w9bfk\",\n    kIyJzY: \"xd6oih7\",\n    k1ekBW: \"xg0bdzq\",\n    kAMwcw: \"x4ognrn\",\n    $$css: true\n  },\n  arcTrack: {\n    kjVXCG: \"xynoiew\",\n    $$css: true\n  },\n  circular: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1lliihq\",\n    k3aq6I: \"x9tu13d\",\n    $$css: true\n  },\n  circularIndeterminate: {\n    kkDQuc: \"x7hzzi\",\n    k44tkh: \"x11c9iw4\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xpedhrg\",\n    kyAemX: \"x1esw782\",\n    k3aq6I: \"x1c071of\",\n    $$css: true\n  },\n  circularSize: (size: string) => [_temp, {\n    \"--x-blockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size),\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size)\n  }],\n  indeterminateBarInner: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  indeterminateTrack: {\n    kWkggS: \"x15dekr4\",\n    kaIpWk: \"x1dkaolv\",\n    kpwlN0: \"x10a8y8t\",\n    kjBf7l: \"x3teovq\",\n    kInvED: \"xvr1dqx\",\n    k3XXqK: \"x815t2r\",\n    kMeerF: \"xcthrzx\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  primaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xkj56kq\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  rootCircular: {\n    kGNEyG: \"x1cy8zhl\",\n    kzqmXN: \"x14atkfc\",\n    $$css: true\n  },\n  secondaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xnb0dd2\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  trackBuffered: {\n    kWkggS: \"x15dekr4\",\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  trackBufferedAt: (share: number) => [_temp2, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${share}%`)\n  }]\n};\ntype ProgressIndicatorProps = {\n  /**\n   * How far the work is loaded ahead of the value — a video's buffered\n   * seconds, a queue's fetched pages. Read on the same scale as `value`: the\n   * track is solid up to it and dotted beyond. Ignored while the indicator\n   * is indeterminate, and left out for work with nothing to buffer.\n   */\n  buffer?: number;\n  /** A function may compute the class from the indicator's render state. */\n  className?: RACProgressBarProps['className'];\n  /**\n   * What the work is, shown above the indicator. A screen reader reads it as\n   * the indicator's name; an indicator whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label. Ignored while the indicator\n   * is indeterminate, which has no value to show.\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * How wide the ring is drawn, as a CSS length. Everything inside scales\n   * with it, so `1em` gives a ring the size of the type around it. Ignored\n   * by the line, which fills the width it is given.\n   *\n   * A length rather than a step of the `sm`/`md`/`lg` scale every other\n   * `size` here takes — see AGENTS.md, under Prop vocabularies. A ring sized\n   * to the type around it is what the prop is for, which no fixed scale\n   * gives; the name predates that rule, and changing it is a breaking change\n   * of its own.\n   * @default '40px'\n   */\n  size?: string;\n  /** A function may compute the style from the indicator's render state. */\n  style?: RACProgressBarProps['style'];\n  /**\n   * Which colours it is drawn in. `primary` is the page's own pair — the\n   * active indicator in primary over a secondary container track — and\n   * `inherit` takes the colour around it, for an indicator inside something\n   * that already has one, such as a button, where primary would be the fill.\n   * @default 'primary'\n   */\n  tone?: ProgressIndicatorTone;\n  /**\n   * The line the page draws, or the ring: `linear` fills the width it is\n   * given, `circular` is 40dp across.\n   * @default 'linear'\n   */\n  variant?: ProgressIndicatorVariant;\n} & Omit<RACProgressBarProps, 'children' | 'className' | 'style'>;\n\n// The two of the shared line's four tones an indicator draws. The other two\n// say how a measurement reads, which is a meter's business rather than a\n// running task's.\ntype ProgressIndicatorTone = Extract<IndicatorTone, 'inherit' | 'primary'>;\ntype ProgressIndicatorVariant = 'circular' | 'linear';\n\n// The dashes that cut the two arcs out of one circle. The active arc runs\n// from the top for its share of the circumference; the track picks up 4dp\n// after it and stops 4dp before it comes back round, which is the page's gap\n// measured along the curve.\nfunction arcsFor(percentage: number | undefined) {\n  const active = (percentage ?? 0) / 100 * CIRCUMFERENCE;\n  const track = Math.max(0, CIRCUMFERENCE - active - 2 * GAP);\n  return {\n    active: {\n      strokeDasharray: `${active} ${CIRCUMFERENCE}`,\n      strokeDashoffset: 0\n    },\n    track: {\n      strokeDasharray: `${track} ${CIRCUMFERENCE}`,\n      strokeDashoffset: -(active + GAP)\n    }\n  };\n}\n\n// How much of the track the buffer covers. The buffer is read on the value's\n// scale, and the track holds what the value has not taken, so the solid part\n// is the buffer's share of that remainder.\nfunction bufferShare(buffer: number | undefined, percentage: number | undefined, minValue: number, maxValue: number) {\n  if (buffer === undefined) {\n    return undefined;\n  }\n  const value = percentage ?? 0;\n  const range = maxValue - minValue;\n  const buffered = range === 0 ? 0 : (buffer - minValue) / range * 100;\n  const remaining = 100 - value;\n  if (remaining <= 0) {\n    return 0;\n  }\n  return Math.min(100, Math.max(0, (buffered - value) / remaining * 100));\n}\nfunction CircularTrack({\n  isIndeterminate,\n  percentage,\n  size,\n  tone\n}: {\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  size: string;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  const arcs = arcsFor(percentage);\n  return <svg aria-hidden=\"true\" viewBox={`0 0 ${CIRCULAR_SIZE} ${CIRCULAR_SIZE}`} {...stylex.props(styles.circular, styles.circularSize(size), isIndeterminate && styles.circularIndeterminate)}>\n      {isIndeterminate ? null : <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" r={RADIUS} strokeDasharray={arcs.track.strokeDasharray} strokeDashoffset={arcs.track.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(styles.arcMotion, styles.arcTrack, inherit && indicatorStyles.inheritTrack)} />}\n      <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" pathLength={isIndeterminate ? 100 : undefined} r={RADIUS} strokeDasharray={isIndeterminate ? undefined : arcs.active.strokeDasharray} strokeDashoffset={isIndeterminate ? undefined : arcs.active.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(isIndeterminate ? styles.arcIndeterminate : styles.arcMotion, isIndeterminate ? null : styles.arcActive, inherit && indicatorStyles.inheritActive)} />\n    </svg>;\n}\n\n// What the indicator draws, from React Aria's render state. Built by a call\n// rather 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\n// on its inputs.\nfunction indicatorContent(label: ReactNode, showValue: boolean, variant: ProgressIndicatorVariant, buffer: number | undefined, minValue: number, maxValue: number, size: string, tone: ProgressIndicatorTone) {\n  return (state: ProgressBarRenderProps) => <>\n      <IndicatorLabels label={label} value={showValue && !state.isIndeterminate ? state.valueText : undefined} />\n      {variant === 'circular' ? <CircularTrack isIndeterminate={state.isIndeterminate} percentage={state.percentage} size={size} tone={tone} /> : <LinearTrack buffer={bufferShare(buffer, state.percentage, minValue, maxValue)} isIndeterminate={state.isIndeterminate} percentage={state.percentage} tone={tone} />}\n    </>;\n}\nfunction LinearTrack({\n  buffer,\n  isIndeterminate,\n  percentage,\n  tone\n}: {\n  buffer: number | undefined;\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  if (isIndeterminate) {\n    return <div className=\"xqu0tyb x1dkaolv x9f619 xh8yej3 xb3r6kr x1n2onr6 x19axjrm x1c071of\">\n        <span {...stylex.props(styles.indeterminateTrack, inherit && indicatorStyles.inheritTrack)} />\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x4hg7df x1esw782 xoia761\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.primaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x1pdi2bj x1esw782 xnsac6p\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.secondaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n      </div>;\n  }\n  return <IndicatorLine percentage={percentage ?? 0} tone={tone}>\n      {buffer === undefined ? undefined : <>\n          <span {...stylex.props(styles.trackBuffered, styles.trackBufferedAt(buffer), inherit && indicatorStyles.inheritTrack)} />\n          <span {...{\n        0: {\n          className: \"x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1d6qlk4 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli\"\n        },\n        1: {\n          className: \"x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli x1larodg\"\n        }\n      }[!!inherit << 0]} />\n        </>}\n    </IndicatorLine>;\n}\n\n/**\n * Progress through a task, as a line or a ring. Its value is React Aria's:\n * pass `value` between `minValue` and `maxValue`, or leave `value` out and\n * set `isIndeterminate` for work whose length is not known. `formatOptions`\n * says how the value reads, in the locale the page is in, and `buffer` marks\n * how far the work is loaded ahead of it.\n *\n * The call site's `className` and `style` land on the indicator as a whole,\n * which is the element a layout positions.\n */\nfunction ProgressIndicator({\n  buffer,\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = false,\n  size = CIRCULAR_SIZE_PX,\n  tone = 'primary',\n  variant = 'linear',\n  ...props\n}: ProgressIndicatorProps) {\n  return <ProgressBar maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root, variant === 'circular' && styles.rootCircular), props)}>\n      {indicatorContent(label, showValue, variant, buffer, minValue, maxValue, size, tone)}\n    </ProgressBar>;\n}\nexport type { ProgressIndicatorProps, ProgressIndicatorTone, ProgressIndicatorVariant };\nexport default ProgressIndicator;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","ProgressBarRenderProps","ProgressBarProps","RACProgressBarProps","stylex","ProgressBar","IndicatorTone","IndicatorLabels","IndicatorLine","indicatorStyles","mergeStatefulStyles","colors","motion","radii","CIRCULAR_SIZE","CIRCULAR_SIZE_PX","THICKNESS","GAP","RADIUS","CIRCUMFERENCE","Math","PI","FORCED_COLORS","ARC_MS","CYCLE_MS","ROTATE_MS","round","RING_EASING","INDETERMINATE_MS","BUFFER_MS","LINE_SLOWDOWN","RING_SLOWDOWN","primaryTranslate","primaryScale","secondaryTranslate","secondaryScale","buffering","expandArc","travelArc","spin","_temp","kZKoxP","kzqmXN","_temp2","styles","arcActive","kjVXCG","$$css","arcIndeterminate","kkDQuc","k44tkh","ko0y90","kKVMdj","kyAemX","k1ekBW","arcMotion","k6CgDc","kIyJzY","kAMwcw","arcTrack","circular","kB7OPa","k1xSpc","k3aq6I","circularIndeterminate","circularSize","size","val","undefined","indeterminateBarInner","kWkggS","kaIpWk","kpwlN0","kVAEAm","indeterminateTrack","kjBf7l","kInvED","k3XXqK","kMeerF","primaryBarInner","rootCircular","kGNEyG","secondaryBarInner","trackBuffered","kmuXW","trackBufferedAt","share","ProgressIndicatorProps","buffer","className","label","showValue","style","tone","ProgressIndicatorTone","variant","ProgressIndicatorVariant","Omit","Extract","arcsFor","percentage","active","track","max","strokeDasharray","strokeDashoffset","bufferShare","minValue","maxValue","value","range","buffered","remaining","min","CircularTrack","t0","$","_c","isIndeterminate","inherit","t1","arcs","t2","props","t3","inheritTrack","t4","t5","t6","t7","inheritActive","t8","t9","indicatorContent","state","valueText","LinearTrack","0","1","ProgressIndicator","T0","t10","t11","t12","root","_c","stylex.props","props"],"sources":["../../../src/components/progress-indicator/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { ProgressBarRenderProps, ProgressBarProps as RACProgressBarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { ProgressBar } from 'react-aria-components';\nimport type { IndicatorTone } from '../../indicator/styles';\nimport { IndicatorLabels, IndicatorLine } from '../../indicator';\nimport { indicatorStyles } from '../../indicator/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii } from '../../tokens/design.tokens.stylex';\n\n// The progress indicators page's two shapes, drawn flat: the page's wavy\n// shape is the Expressive column's alone, and its amplitude and wavelength\n// belong to a variant rather than to this. Both carry the three parts the\n// page's anatomy names — the active indicator in primary, the track in\n// secondary container, and, on the line, the stop indicator in primary at\n// the end — at the page's 4dp thickness, with the 4dp gap its measurements\n// give either side of the track. The ring is the page's default 40dp of the\n// four sizes it draws.\n//\n// The determinate line is a row of those parts: the active indicator takes\n// the value's share of what the gaps and the stop leave, and the track takes\n// the rest — see `activeAt` in src/indicator/styles.ts. The\n// determinate ring is two arcs of one circle, cut by the dash pattern: the\n// active arc runs from the top for its share of the circumference, and the\n// track picks up 4dp past it and stops 4dp before it comes back round,\n// which is the same gap measured along the curve.\n//\n// The animations are Material's own rather than something assembled from\n// the motion tokens: an indeterminate indicator is a piece of choreography,\n// and one written from scratch reads as a different component beside a\n// Material app. Material Web and Angular Material both descend from the\n// same implementation and agree on every number, so the numbers here are\n// theirs — the line's two bars and their four keyframe sets, the buffer's\n// scrolling dots, the ring's 1333ms arc, its four-arc cycle and its 1568ms\n// rotation, and the 250ms and 500ms a determinate value moves over.\n//\n// Two things are decided differently, both after reading the two of them.\n//\n// The ring is one dashed arc rather than two halves. Material Web draws it\n// as a pair of bordered half-circles, Angular as a pair of clipped SVG\n// circles with a patch over the seam between them; both constructions exist\n// to work around that split, and a single arc whose dash pattern is\n// animated needs neither and shares its geometry with the determinate ring.\n// The three effects it composes are still theirs: the arc grows and shrinks\n// over the arc's duration, its start travels the circle over four of those,\n// and the whole thing turns over the rotation's.\n//\n// Under `prefers-reduced-motion` the motion slows rather than stopping,\n// which is Angular's answer and the better one: an indicator that freezes\n// stops saying the work is going on, and a frozen arc caught at its short\n// end reads as broken. The multipliers are Angular's — two for the line,\n// and a quarter more for the ring.\n//\n// React Aria's `ProgressBar` is the root: it carries the role, the value and\n// its text, and reports the percentage and whether it is indeterminate as\n// render state, which is what everything here is drawn from.\n\n// The circle the arcs are cut from. The radius is the diameter less the\n// stroke, halved, so the stroke sits inside the 40dp box rather than\n// straddling its edge.\n//\n// The thickness and the gap are the same 4dp the shared line is drawn at,\n// written again rather than imported from `src/indicator/styles`: StyleX\n// evaluates the values inside `stylex.create` and `stylex.keyframes` as it\n// compiles, and will not follow an import to a module that is not a theme\n// to reach one — an imported constant fails the transform outright.\nconst CIRCULAR_SIZE = 40;\n// The same value as a length, hoisted rather than built at the parameter.\n// The compiler has no safe reordering for a template literal, so one written\n// as a default parameter skips the whole component around it — which the\n// panic threshold this lands beside turns into a build failure.\nconst CIRCULAR_SIZE_PX = `${CIRCULAR_SIZE}px`;\nconst THICKNESS = 4;\nconst GAP = 4;\nconst RADIUS = (CIRCULAR_SIZE - THICKNESS) / 2;\nconst CIRCUMFERENCE = 2 * Math.PI * RADIUS;\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// The ring's timings. The arc is 1333ms; a full cycle is four of them; and\n// the rotation is the arc scaled by 360/306, which is the arc's start\n// rotation plus the circle less the arc's size.\nconst ARC_MS = 1333;\nconst CYCLE_MS = ARC_MS * 4;\nconst ROTATE_MS = Math.round(ARC_MS * 360 / 306);\nconst RING_EASING = 'cubic-bezier(0.4, 0, 0.2, 1)';\n\n// The line's own: 2s for an indeterminate pass, and the 250ms the buffer's\n// dots take to scroll one pitch. What a determinate value moves over is the\n// shared line's, since a meter moves the same way.\nconst INDETERMINATE_MS = 2000;\nconst BUFFER_MS = 250;\n\n// What `prefers-reduced-motion` slows each shape by.\nconst LINE_SLOWDOWN = 2;\nconst RING_SLOWDOWN = 1.25;\n\n// The two bars of the indeterminate line, translated and scaled at once.\nconst primaryTranslate = \"x1pch1fy-B\";\nconst primaryScale = \"xxyp5q1-B\";\nconst secondaryTranslate = \"xzo9tdn-B\";\nconst secondaryScale = \"x1w7bnrt-B\";\n\n// The buffer's dots scroll by one pitch of the pattern and start again.\nconst buffering = \"x19sykc1-B\";\n\n// The arc's own length, written against a path the circle normalises to 100\n// with `pathLength`, so these are percentages of the circumference rather\n// than lengths StyleX would have to work out.\n//\n// Material contracts to 10 degrees of turn and grows to 270. The 270 is 75\n// of the circumference and is written as it is; the 10 is not, because the\n// page's rounded ends change what a short dash draws. A round cap adds half\n// the stroke at each end, so a 10-degree dash on the 40dp ring is 3px of\n// path inside a 7px capsule of 4px stroke — a dot rather than the sliver\n// Material's square-cut ends give at the same angle. 8 is the shortest the\n// cap still draws as an arc, and it is the floor for that reason rather\n// than because the page names it.\nconst expandArc = \"x1t81ys1-B\";\n\n// Where the arc starts. Material turns it in eight increments of 135 degrees\n// rather than at a constant rate, each eased with the same curve the arc's\n// growth uses, so it settles at each position and springs to the next; three\n// full turns over the cycle, under the rotation's own single turn. The\n// numbers here are those angles along a path of 100: 135 degrees is 37.5 of\n// it, and 1080 degrees is 300.\nconst travelArc = \"x26nhu8-B\";\nconst spin = \"x1fy8ia8-B\";\nconst _temp = {\n  kZKoxP: \"xyq6l7l\",\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst _temp2 = {\n  kzqmXN: \"x1uyokj7\",\n  \"$$css\": true\n};\nconst styles = {\n  arcActive: {\n    kjVXCG: \"x1i9vjva\",\n    $$css: true\n  },\n  arcIndeterminate: {\n    kkDQuc: \"x12dwrod\",\n    k44tkh: \"xxx5gdc\",\n    ko0y90: \"x77zgwx\",\n    kKVMdj: \"x14p4i3i\",\n    kyAemX: \"x1582zw4\",\n    kjVXCG: \"x1i9vjva\",\n    k1ekBW: \"x13b0p5u\",\n    $$css: true\n  },\n  arcMotion: {\n    k6CgDc: \"x12w9bfk\",\n    kIyJzY: \"xd6oih7\",\n    k1ekBW: \"xg0bdzq\",\n    kAMwcw: \"x4ognrn\",\n    $$css: true\n  },\n  arcTrack: {\n    kjVXCG: \"xynoiew\",\n    $$css: true\n  },\n  circular: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x1lliihq\",\n    k3aq6I: \"x9tu13d\",\n    $$css: true\n  },\n  circularIndeterminate: {\n    kkDQuc: \"x7hzzi\",\n    k44tkh: \"x11c9iw4\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xpedhrg\",\n    kyAemX: \"x1esw782\",\n    k3aq6I: \"x1c071of\",\n    $$css: true\n  },\n  circularSize: (size: string) => [_temp, {\n    \"--x-blockSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size),\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(size)\n  }],\n  indeterminateBarInner: {\n    kWkggS: \"xnety89 x1jzqe4\",\n    kaIpWk: \"x1dkaolv\",\n    kB7OPa: \"x9f619\",\n    kpwlN0: \"x10a8y8t\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  indeterminateTrack: {\n    kWkggS: \"x15dekr4\",\n    kaIpWk: \"x1dkaolv\",\n    kpwlN0: \"x10a8y8t\",\n    kjBf7l: \"x3teovq\",\n    kInvED: \"xvr1dqx\",\n    k3XXqK: \"x815t2r\",\n    kMeerF: \"xcthrzx\",\n    kVAEAm: \"x10l6tqk\",\n    $$css: true\n  },\n  primaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xkj56kq\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  rootCircular: {\n    kGNEyG: \"x1cy8zhl\",\n    kzqmXN: \"x14atkfc\",\n    $$css: true\n  },\n  secondaryBarInner: {\n    kkDQuc: \"xy02sl2\",\n    k44tkh: \"x1c74tu6\",\n    ko0y90: \"xa4qsjk\",\n    kKVMdj: \"xnb0dd2\",\n    kyAemX: \"x1esw782\",\n    $$css: true\n  },\n  trackBuffered: {\n    kWkggS: \"x15dekr4\",\n    kZKoxP: \"x5yr21d\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    $$css: true\n  },\n  trackBufferedAt: (share: number) => [_temp2, {\n    \"--x-inlineSize\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${share}%`)\n  }]\n};\ntype ProgressIndicatorProps = {\n  /**\n   * How far the work is loaded ahead of the value — a video's buffered\n   * seconds, a queue's fetched pages. Read on the same scale as `value`: the\n   * track is solid up to it and dotted beyond. Ignored while the indicator\n   * is indeterminate, and left out for work with nothing to buffer.\n   */\n  buffer?: number;\n  /** A function may compute the class from the indicator's render state. */\n  className?: RACProgressBarProps['className'];\n  /**\n   * What the work is, shown above the indicator. A screen reader reads it as\n   * the indicator's name; an indicator whose surroundings name it takes\n   * `aria-label` instead and leaves this out.\n   */\n  label?: ReactNode;\n  /**\n   * Whether the value is shown beside the label. Ignored while the indicator\n   * is indeterminate, which has no value to show.\n   * @default false\n   */\n  showValue?: boolean;\n  /**\n   * How wide the ring is drawn, as a CSS length. Everything inside scales\n   * with it, so `1em` gives a ring the size of the type around it. Ignored\n   * by the line, which fills the width it is given.\n   *\n   * A length rather than a step of the `sm`/`md`/`lg` scale every other\n   * `size` here takes — see AGENTS.md, under Prop vocabularies. A ring sized\n   * to the type around it is what the prop is for, which no fixed scale\n   * gives; the name predates that rule, and changing it is a breaking change\n   * of its own.\n   * @default '40px'\n   */\n  size?: string;\n  /** A function may compute the style from the indicator's render state. */\n  style?: RACProgressBarProps['style'];\n  /**\n   * Which colours it is drawn in. `primary` is the page's own pair — the\n   * active indicator in primary over a secondary container track — and\n   * `inherit` takes the colour around it, for an indicator inside something\n   * that already has one, such as a button, where primary would be the fill.\n   * @default 'primary'\n   */\n  tone?: ProgressIndicatorTone;\n  /**\n   * The line the page draws, or the ring: `linear` fills the width it is\n   * given, `circular` is 40dp across.\n   * @default 'linear'\n   */\n  variant?: ProgressIndicatorVariant;\n} & Omit<RACProgressBarProps, 'children' | 'className' | 'style'>;\n\n// The two of the shared line's four tones an indicator draws. The other two\n// say how a measurement reads, which is a meter's business rather than a\n// running task's.\ntype ProgressIndicatorTone = Extract<IndicatorTone, 'inherit' | 'primary'>;\ntype ProgressIndicatorVariant = 'circular' | 'linear';\n\n// The dashes that cut the two arcs out of one circle. The active arc runs\n// from the top for its share of the circumference; the track picks up 4dp\n// after it and stops 4dp before it comes back round, which is the page's gap\n// measured along the curve.\nfunction arcsFor(percentage: number | undefined) {\n  const active = (percentage ?? 0) / 100 * CIRCUMFERENCE;\n  const track = Math.max(0, CIRCUMFERENCE - active - 2 * GAP);\n  return {\n    active: {\n      strokeDasharray: `${active} ${CIRCUMFERENCE}`,\n      strokeDashoffset: 0\n    },\n    track: {\n      strokeDasharray: `${track} ${CIRCUMFERENCE}`,\n      strokeDashoffset: -(active + GAP)\n    }\n  };\n}\n\n// How much of the track the buffer covers. The buffer is read on the value's\n// scale, and the track holds what the value has not taken, so the solid part\n// is the buffer's share of that remainder.\nfunction bufferShare(buffer: number | undefined, percentage: number | undefined, minValue: number, maxValue: number) {\n  if (buffer === undefined) {\n    return undefined;\n  }\n  const value = percentage ?? 0;\n  const range = maxValue - minValue;\n  const buffered = range === 0 ? 0 : (buffer - minValue) / range * 100;\n  const remaining = 100 - value;\n  if (remaining <= 0) {\n    return 0;\n  }\n  return Math.min(100, Math.max(0, (buffered - value) / remaining * 100));\n}\nfunction CircularTrack({\n  isIndeterminate,\n  percentage,\n  size,\n  tone\n}: {\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  size: string;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  const arcs = arcsFor(percentage);\n  return <svg aria-hidden=\"true\" viewBox={`0 0 ${CIRCULAR_SIZE} ${CIRCULAR_SIZE}`} {...stylex.props(styles.circular, styles.circularSize(size), isIndeterminate && styles.circularIndeterminate)}>\n      {isIndeterminate ? null : <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" r={RADIUS} strokeDasharray={arcs.track.strokeDasharray} strokeDashoffset={arcs.track.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(styles.arcMotion, styles.arcTrack, inherit && indicatorStyles.inheritTrack)} />}\n      <circle cx={CIRCULAR_SIZE / 2} cy={CIRCULAR_SIZE / 2} fill=\"none\" pathLength={isIndeterminate ? 100 : undefined} r={RADIUS} strokeDasharray={isIndeterminate ? undefined : arcs.active.strokeDasharray} strokeDashoffset={isIndeterminate ? undefined : arcs.active.strokeDashoffset} strokeLinecap=\"round\" strokeWidth={THICKNESS} {...stylex.props(isIndeterminate ? styles.arcIndeterminate : styles.arcMotion, isIndeterminate ? null : styles.arcActive, inherit && indicatorStyles.inheritActive)} />\n    </svg>;\n}\n\n// What the indicator draws, from React Aria's render state. Built by a call\n// rather 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\n// on its inputs.\nfunction indicatorContent(label: ReactNode, showValue: boolean, variant: ProgressIndicatorVariant, buffer: number | undefined, minValue: number, maxValue: number, size: string, tone: ProgressIndicatorTone) {\n  return (state: ProgressBarRenderProps) => <>\n      <IndicatorLabels label={label} value={showValue && !state.isIndeterminate ? state.valueText : undefined} />\n      {variant === 'circular' ? <CircularTrack isIndeterminate={state.isIndeterminate} percentage={state.percentage} size={size} tone={tone} /> : <LinearTrack buffer={bufferShare(buffer, state.percentage, minValue, maxValue)} isIndeterminate={state.isIndeterminate} percentage={state.percentage} tone={tone} />}\n    </>;\n}\nfunction LinearTrack({\n  buffer,\n  isIndeterminate,\n  percentage,\n  tone\n}: {\n  buffer: number | undefined;\n  isIndeterminate: boolean;\n  percentage: number | undefined;\n  tone: ProgressIndicatorTone;\n}) {\n  const inherit = tone === 'inherit';\n  if (isIndeterminate) {\n    return <div className=\"xqu0tyb x1dkaolv x9f619 xh8yej3 xb3r6kr x1n2onr6 x19axjrm x1c071of\">\n        <span {...stylex.props(styles.indeterminateTrack, inherit && indicatorStyles.inheritTrack)} />\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x4hg7df x1esw782 xoia761\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.primaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n        <span className=\"xqu0tyb x9f619 xh8yej3 x13vifvy x10l6tqk x1nf803f xy02sl2 x1c74tu6 xa4qsjk x1pdi2bj x1esw782 xnsac6p\">\n          <span {...stylex.props(styles.indeterminateBarInner, styles.secondaryBarInner, inherit && indicatorStyles.inheritActive)} />\n        </span>\n      </div>;\n  }\n  return <IndicatorLine percentage={percentage ?? 0} tone={tone}>\n      {buffer === undefined ? undefined : <>\n          <span {...stylex.props(styles.trackBuffered, styles.trackBufferedAt(buffer), inherit && indicatorStyles.inheritTrack)} />\n          <span {...{\n        0: {\n          className: \"x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1d6qlk4 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli\"\n        },\n        1: {\n          className: \"x114jyov xs4xyr0 xa4qsjk xwx18z9 x1esw782 x1w3jsh0 xwj9l49 x5yr21d x9f619 x1iyjqo2 xeuugli x1larodg\"\n        }\n      }[!!inherit << 0]} />\n        </>}\n    </IndicatorLine>;\n}\n\n/**\n * Progress through a task, as a line or a ring. Its value is React Aria's:\n * pass `value` between `minValue` and `maxValue`, or leave `value` out and\n * set `isIndeterminate` for work whose length is not known. `formatOptions`\n * says how the value reads, in the locale the page is in, and `buffer` marks\n * how far the work is loaded ahead of it.\n *\n * The call site's `className` and `style` land on the indicator as a whole,\n * which is the element a layout positions.\n */\nfunction ProgressIndicator({\n  buffer,\n  label,\n  maxValue = 100,\n  minValue = 0,\n  showValue = false,\n  size = CIRCULAR_SIZE_PX,\n  tone = 'primary',\n  variant = 'linear',\n  ...props\n}: ProgressIndicatorProps) {\n  return <ProgressBar maxValue={maxValue} minValue={minValue} {...props} {...mergeStatefulStyles(stylex.props(indicatorStyles.root, variant === 'circular' && styles.rootCircular), props)}>\n      {indicatorContent(label, showValue, variant, buffer, minValue, maxValue, size, tone)}\n    </ProgressBar>;\n}\nexport type { ProgressIndicatorProps, ProgressIndicatorTone, ProgressIndicatorVariant };\nexport default ProgressIndicator;"],"mappings":"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"}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","ControlLabel","controlStyles","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","fieldGroupStyles","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","FORCED_COLORS","styles","control","kMwMTN","$$css","toneActive","toneDisabled","toneSelected","hoverLayers","selected","kWkggS","unselected","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","className","surface","groupContent","horizontal","Radio","t0","$","_c","T0","t1","field","t2","t3","t4","Symbol","for","messages","t5","t6","orientation","undefined","validationBehavior","root"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles as fieldGroupStyles } from '../../field/styles';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\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)';\nconst styles = {\n  control: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the label's colour and\n   * `aria-invalid` on the group all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the button can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span className=\"x12w9bfk x6s0dn4 x1qx5ct2 x1r7ld26 x16fbrrb x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span {...{\n            0: {\n              className: \"xtwfq29 x1jzqe4 x170jfvy x16fbrrb x1fsd2vl\"\n            },\n            1: {\n              className: \"x170jfvy x16fbrrb x1fsd2vl xtwfq29 x1o55y2u\"\n            }\n          }[!!state.isDisabled << 0]} /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} inset={false} />\n      </div>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldGroupStyles.root), props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","RadioGroupProps","RACRadioGroupProps","RadioButtonRenderProps","RadioFieldProps","RadioGroupRenderProps","stylex","RadioGroup","RACRadioGroup","RadioButton","RadioField","ControlLabel","controlStyles","FieldLabel","FieldMessage","invalidFrom","useFieldValidationBehavior","groupStyles","fieldGroupStyles","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","FORCED_COLORS","styles","control","kMwMTN","$$css","toneActive","toneDisabled","toneSelected","hoverLayers","selected","kWkggS","unselected","pressedLayers","children","description","error","label","Omit","RadioProps","Ripple","ReturnType","HTMLSpanElement","buttonContent","ripple","state","interactive","isDisabled","isReadOnly","tone","isSelected","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","className","surface","groupContent","horizontal","Radio","t0","$","_c","T0","t1","field","t2","t3","t4","Symbol","for","messages","t5","t6","orientation","undefined","validationBehavior","root","stylex.props","_c","props","RadioGroup","RACRadioGroup","fieldGroupStyles"],"sources":["../../../src/components/radio-group/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { RadioGroupProps as RACRadioGroupProps, RadioButtonRenderProps, RadioFieldProps, RadioGroupRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { RadioGroup as RACRadioGroup, RadioButton, RadioField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { groupStyles as fieldGroupStyles } from '../../field/styles';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The radio button page: a 20dp ring inside a 40dp state layer, with a 48dp\n// target. Unselected, the ring is 2dp of on surface variant that turns on\n// surface while hovered, pressed or focused; selected, the ring and the 10dp\n// dot inside it are primary. Disabled is on surface at the disabled opacity\n// for both. The state layer is on surface over an unselected button and\n// primary over a selected one while hovered, and the two swap once pressed.\n// The page draws no error state for the button itself: an invalid group\n// says so through its label and message, and the buttons keep their colours.\n//\n// Two components from one module, since neither means anything without the\n// other: a radio button is a member of a group, and the group is what holds\n// the value. React Aria's `RadioGroup` is the group, a div with the label,\n// description and error slots; `RadioField` is one button's root, a div with\n// its description slot; and `RadioButton` is the label around the visually\n// hidden input, whose children draw the button from the render state React\n// Aria hands them. The field is the same two-column grid Checkbox uses, with\n// the label `display: contents` so the description lines up under the text.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the button is selected.\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)';\nconst styles = {\n  control: {\n    kMwMTN: \"x1w5n3ug\",\n    $$css: true\n  },\n  toneActive: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  toneDisabled: {\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  toneSelected: {\n    kMwMTN: \"x1mxwv8y\",\n    $$css: true\n  }\n};\n\n// The state layer follows the button: on surface over an unselected one and\n// primary over a selected one while hovered, the two swapped once pressed.\nconst hoverLayers = {\n  selected: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  selected: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unselected: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype RadioGroupProps = {\n  /** The radio buttons, each with a `value` of its own. */\n  children?: ReactNode;\n  /**\n   * A hint under the group. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current selection, in words. Its presence is what\n   * puts the group in its error state — the message, the label's colour and\n   * `aria-invalid` on the group all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of radio\n   * buttons with no name is a set a screen reader cannot introduce.\n   */\n  label: string;\n} & Omit<RACRadioGroupProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype RadioProps = Omit<RadioFieldProps, 'children'> & {\n  /**\n   * The label, beside the button. A button that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /** A hint under the label, read with the button. */\n  description?: string;\n};\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the button can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: RadioButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone = state.isSelected ? 'selected' : 'unselected';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isSelected && styles.toneSelected, !state.isSelected && interactive && active && styles.toneActive, state.isDisabled && styles.toneDisabled, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span className=\"x12w9bfk x6s0dn4 x1qx5ct2 x1r7ld26 x16fbrrb x1y0btm7 xdh2fpr x9f619 x78zum5 xw4jnvo xl56j7k x1qno0dh xshfolx xpc4ca7\">\n            {state.isSelected ? <span {...{\n            0: {\n              className: \"xtwfq29 x1jzqe4 x170jfvy x16fbrrb x1fsd2vl\"\n            },\n            1: {\n              className: \"x170jfvy x16fbrrb x1fsd2vl xtwfq29 x1o55y2u\"\n            }\n          }[!!state.isDisabled << 0]} /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n// The group's parts, from its render state: the label's colour follows\n// disabled and invalid the way a field's follows its box.\nfunction groupContent(label: string, children: ReactNode, description: string | undefined, error: string | undefined, horizontal: boolean) {\n  return (state: RadioGroupRenderProps) => <>\n      <FieldLabel state={state} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <div {...{\n      0: {\n        className: \"x78zum5 xdt5ytf\"\n      },\n      1: {\n        className: \"x78zum5 xpamuu5 x1q0g3np x1a02dak\"\n      }\n    }[!!horizontal << 0]}>\n        {children}\n      </div>\n      <FieldMessage description={description} error={error} inset={false} />\n    </>;\n}\n\n/**\n * One option of a `RadioGroup`, with its label and optionally a description\n * under it. It names the entry it stands for with `value`; the selection is\n * the group's. Rendered on its own, outside a group, it has no state to\n * belong to.\n *\n * The call site's `className` and `style` land on the option as a whole,\n * which is the element a layout positions.\n */\nfunction Radio({\n  children,\n  description,\n  ...props\n}: RadioProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  return <RadioField {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <RadioButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </RadioButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} inset={false} />\n      </div>\n    </RadioField>;\n}\n\n/**\n * A labelled set of radio buttons with one selected value between them. The\n * value is React Aria's: pass `value` with `onChange` to control it, or\n * `defaultValue` to let the group keep its own, and each `Radio` inside\n * names the entry it stands for. Arrow keys move the selection; disabled,\n * read-only and the error state reach every button from here, and\n * `orientation=\"horizontal\"` lays the buttons along a line.\n *\n * The call site's `className` and `style` land on the group as a whole,\n * which is the element a layout positions.\n */\nfunction RadioGroup({\n  children,\n  description,\n  error,\n  label,\n  orientation = 'vertical',\n  ...props\n}: RadioGroupProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACRadioGroup isInvalid={invalidFrom(error)} orientation={orientation} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldGroupStyles.root), props)}>\n      {groupContent(label, children, description, error, orientation === 'horizontal')}\n    </RACRadioGroup>;\n}\nexport type { RadioGroupProps, RadioProps };\nexport { Radio };\nexport default RadioGroup;"],"mappings":"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"}

package/dist/components/range-calendar/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","RangeCalendarProps","RACRangeCalendarProps","stylex","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","RangeCalendar","RACRangeCalendar","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","focus","mergeStatefulStyles","Omit","T","className","style","cellClassName","state","isDisabled","isSelected","isSelectionEnd","isSelectionStart","isToday","isUnavailable","isEnd","props","cell","ring","cellToday","cellInRange","cellRangeStart","cellRangeEnd","cellSelected","cellUnavailable","cellDisabled","gridCell","date","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid"],"sources":["../../../src/components/range-calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, RangeCalendarProps as RACRangeCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, RangeCalendar as RACRangeCalendar } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's calendar again, picking two dates rather than one.\n// Every part it draws is Calendar's, from `src/calendar` — the container, the\n// grid, the weekday row, the chevrons and the date circle — so the two cannot\n// come apart.\n//\n// What a range adds is the band between its two ends. The docked token set\n// stops at the selected date, so the band's colours are the modal date\n// picker's range-selection tokens — the secondary container, one step down\n// from the primary the two ends take — and its reasons are in\n// `src/calendar/styles.ts` where it is defined.\n//\n// Two things follow from drawing a band across a grid whose cells are spaced\n// apart.\n//\n// **The band is square and the ends are round.** A range of consecutive days\n// reads as one shape rather than a row of circles, and the first and last day\n// round only their outer edge, which is what makes the band begin and end at\n// a circle.\n//\n// **The band reaches across the grid's own spacing.** A negative inline\n// margin of half that spacing on each side closes the gap between one day and\n// the next without moving either. Without it the band arrives as a dashed run\n// of separate blocks.\n\ntype RangeCalendarProps<T extends DateValue = DateValue> = Omit<RACRangeCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACRangeCalendarProps<T>['className'];\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACRangeCalendarProps<T>['style'];\n};\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order is what makes a range read as one shape. Every selected day takes\n// the band; the two ends then take the circle over it, and round the outer\n// edge the band does not continue past. `unavailable` comes after those, so a\n// ruled-out day inside a range keeps the band and takes the strikethrough\n// over it. `disabled` is last of all, and StyleX replaces a property whole,\n// so it takes the branches above it with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isSelected: boolean;\n  isSelectionEnd: boolean;\n  isSelectionStart: boolean;\n  isToday: boolean;\n  isUnavailable: boolean;\n}) {\n  const isEnd = state.isSelected && (state.isSelectionStart || state.isSelectionEnd);\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\n\n/**\n * A calendar for picking a range of dates. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as a `{ start, end }` pair of `@internationalized/date` values\n * from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <RangeCalendar\n *   aria-label=\"Label\"\n *   defaultValue={{\n *     start: new CalendarDate(2026, 9, 8),\n *     end: new CalendarDate(2026, 9, 15),\n *   }}\n * />\n * ```\n *\n * The two ends take the circle a selected date takes in `Calendar`, and the\n * days between them a band in the secondary container. `minValue`,\n * `maxValue`, `isDateUnavailable` and `visibleDuration` are the same props\n * `Calendar` takes, and `allowsNonContiguousRanges` lets a range skip the\n * dates ruled out inside it rather than stopping at the first.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>) {\n  return <RACRangeCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarHeader />\n      <div {...stylex.props(calendarStyles.months)}>\n        {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n            <CalendarGridHeader />\n            <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n          </RACCalendarGrid>)}\n      </div>\n    </RACRangeCalendar>;\n}\nexport type { RangeCalendarProps };\nexport default RangeCalendar;"],"mappings":";;;;;;;;;;AAoDA,SAASwB,cAAcC,OAOpB;CACD,MAAMO,QAAQP,MAAME,eAAeF,MAAMI,oBAAoBJ,MAAMG;CACnE,OAAOvB,MAAaY,eAAeiB,MAAMhB,MAAMiB,MAAMV,MAAMK,WAAWb,eAAemB,WAAWX,MAAME,cAAcV,eAAeoB,aAAaZ,MAAME,cAAcF,MAAMI,oBAAoBZ,eAAeqB,gBAAgBb,MAAME,cAAcF,MAAMG,kBAAkBX,eAAesB,cAAcP,SAASf,eAAeuB,cAAcf,MAAMM,iBAAiBd,eAAewB,iBAAiBhB,MAAMC,cAAcT,eAAeyB,YAAY,CAAC,CAACpB,aAAa;AACnc;AACA,SAASqB,SAASC,MAAkC;CAClD,OAAO,oBAAC,cAAD;EAAiB,WAAWpB;EAAqBoB;CAAK,CAAA;AAC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAAhC,gBAAAqB,SAAA;CAAA,MAAAY,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAZ,SAAA;EAC6Cc,KAAA5B,oBAAoBd,MAAaY,eAAc+B,IAAK,GAAGf,OAAK;EAACY,EAAA,KAAAZ;EAAAY,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EACpGH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAA7C,MAAaY,eAAcoC,MAAO;EAACR,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAZ,QAAAsB,iBAAAF,QAAA;EACzCC,KAAAtC,aAAaiB,QAAKsB,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACZ,EAAA,KAAAZ,QAAAsB,iBAAAF;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAT,EAAA,KAAAS;EAAAT,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAZ,WAAAY,EAAA,OAAAE,MAAAF,EAAA,QAAAa,IAAA;EAPHC,KAAA,qBAAC,eAAD;GAAiB,GAAQ1B;GAAK,GAAMc;GAApC,UAAA,CACHE,IACAS,EAFoB;;EAQHb,EAAA,KAAAZ;EAAAY,EAAA,KAAAE;EAAAF,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OARdc;AAQc;AATvB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAAC,cAAD;EAA6CA;EAAM,GAAMvD,MAAaY,eAAc4C,IAAK;EAAzF,UAAA,CAC5D,oBAAC,sBAAD,CAAmB,CAAA,GACnB,oBAAC,kBAAD,EAAA,UAAsBlB,SAAF,CAAA,CAFwD;CAAMiB,GAAAA,OAAMP,MAAZ;AAG5D"}
+{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","RangeCalendarProps","RACRangeCalendarProps","stylex","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","RangeCalendar","RACRangeCalendar","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","focus","mergeStatefulStyles","Omit","T","className","style","cellClassName","state","isDisabled","isSelected","isSelectionEnd","isSelectionStart","isToday","isUnavailable","isEnd","props","cell","ring","cellToday","cellInRange","cellRangeStart","cellRangeEnd","cellSelected","cellUnavailable","cellDisabled","gridCell","date","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid","stylex.props","RACCalendarCell","RangeCalendar","_c","props","RACRangeCalendar","RACCalendarGrid","CalendarGridHeader","RACCalendarGridBody"],"sources":["../../../src/components/range-calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, RangeCalendarProps as RACRangeCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, RangeCalendar as RACRangeCalendar } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's calendar again, picking two dates rather than one.\n// Every part it draws is Calendar's, from `src/calendar` — the container, the\n// grid, the weekday row, the chevrons and the date circle — so the two cannot\n// come apart.\n//\n// What a range adds is the band between its two ends. The docked token set\n// stops at the selected date, so the band's colours are the modal date\n// picker's range-selection tokens — the secondary container, one step down\n// from the primary the two ends take — and its reasons are in\n// `src/calendar/styles.ts` where it is defined.\n//\n// Two things follow from drawing a band across a grid whose cells are spaced\n// apart.\n//\n// **The band is square and the ends are round.** A range of consecutive days\n// reads as one shape rather than a row of circles, and the first and last day\n// round only their outer edge, which is what makes the band begin and end at\n// a circle.\n//\n// **The band reaches across the grid's own spacing.** A negative inline\n// margin of half that spacing on each side closes the gap between one day and\n// the next without moving either. Without it the band arrives as a dashed run\n// of separate blocks.\n\ntype RangeCalendarProps<T extends DateValue = DateValue> = Omit<RACRangeCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACRangeCalendarProps<T>['className'];\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACRangeCalendarProps<T>['style'];\n};\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order is what makes a range read as one shape. Every selected day takes\n// the band; the two ends then take the circle over it, and round the outer\n// edge the band does not continue past. `unavailable` comes after those, so a\n// ruled-out day inside a range keeps the band and takes the strikethrough\n// over it. `disabled` is last of all, and StyleX replaces a property whole,\n// so it takes the branches above it with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isSelected: boolean;\n  isSelectionEnd: boolean;\n  isSelectionStart: boolean;\n  isToday: boolean;\n  isUnavailable: boolean;\n}) {\n  const isEnd = state.isSelected && (state.isSelectionStart || state.isSelectionEnd);\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isUnavailable && calendarStyles.cellUnavailable, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\n\n/**\n * A calendar for picking a range of dates. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as a `{ start, end }` pair of `@internationalized/date` values\n * from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <RangeCalendar\n *   aria-label=\"Label\"\n *   defaultValue={{\n *     start: new CalendarDate(2026, 9, 8),\n *     end: new CalendarDate(2026, 9, 15),\n *   }}\n * />\n * ```\n *\n * The two ends take the circle a selected date takes in `Calendar`, and the\n * days between them a band in the secondary container. `minValue`,\n * `maxValue`, `isDateUnavailable` and `visibleDuration` are the same props\n * `Calendar` takes, and `allowsNonContiguousRanges` lets a range skip the\n * dates ruled out inside it rather than stopping at the first.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>) {\n  return <RACRangeCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarHeader />\n      <div {...stylex.props(calendarStyles.months)}>\n        {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n            <CalendarGridHeader />\n            <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n          </RACCalendarGrid>)}\n      </div>\n    </RACRangeCalendar>;\n}\nexport type { RangeCalendarProps };\nexport default RangeCalendar;"],"mappings":";;;;;;;;;;AAoDA,SAASwB,cAAcC,OAOpB;CACD,MAAMO,QAAQP,MAAME,eAAeF,MAAMI,oBAAoBJ,MAAMG;CACnE,OAAOvB,MAAaY,eAAeiB,MAAMhB,MAAMiB,MAAMV,MAAMK,WAAWb,eAAemB,WAAWX,MAAME,cAAcV,eAAeoB,aAAaZ,MAAME,cAAcF,MAAMI,oBAAoBZ,eAAeqB,gBAAgBb,MAAME,cAAcF,MAAMG,kBAAkBX,eAAesB,cAAcP,SAASf,eAAeuB,cAAcf,MAAMM,iBAAiBd,eAAewB,iBAAiBhB,MAAMC,cAAcT,eAAeyB,YAAY,CAAC,CAACpB,aAAa;AACnc;AACA,SAASqB,SAASC,MAAkC;CAClD,OAAO,oBAACmB,cAAD;EAAiB,WAAWvC;EAAqBoB;CAAK,CAAA;AAC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAAhC,gBAAAqB,SAAA;CAAA,MAAAY,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAZ,SAAA;EAC6Cc,KAAA5B,oBAAoBd,MAAaY,eAAc+B,IAAK,GAAGf,OAAK;EAACY,EAAA,KAAAZ;EAAAY,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EACpGH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAA7C,MAAaY,eAAcoC,MAAO;EAACR,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAZ,QAAAsB,iBAAAF,QAAA;EACzCC,KAAAtC,aAAaiB,QAAKsB,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACZ,EAAA,KAAAZ,QAAAsB,iBAAAF;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAT,EAAA,KAAAS;EAAAT,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAZ,WAAAY,EAAA,OAAAE,MAAAF,EAAA,QAAAa,IAAA;EAPHC,KAAA,qBAACQ,eAAD;GAAiB,GAAQlC;GAAK,GAAMc;GAApC,UAAA,CACHE,IACAS,EAFoB;;EAQHb,EAAA,KAAAZ;EAAAY,EAAA,KAAAE;EAAAF,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OARdc;AAQc;AATvB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAACQ,cAAD;EAA6CR;EAAM,GAAMvD,MAAaY,eAAc4C,IAAK;EAAzF,UAAA,CAC5D,oBAACQ,sBAAD,CAAmB,CAAA,GACnB,oBAACC,kBAAD,EAAA,UAAsB3B,SAAF,CAAA,CAFwD;CAAMiB,GAAAA,OAAMP,MAAZ;AAG5D"}

package/dist/components/search-field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["SearchFieldProps","RACSearchFieldProps","SearchFieldRenderProps","stylex","Label","SearchField","RACSearchField","VisuallyHidden","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","CloseGlyph","SearchGlyph","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","IconButton","FORCED_COLORS","clearLabel","description","error","label","placeholder","Omit","fieldContent","state","className","isDisabled","isEmpty","t0","$","_c","t1","t2","props","undefined","validationBehavior","T0","t3","t4","root","t5","t6"],"sources":["../../../src/components/search-field/index.tsx"],"sourcesContent":["import type { SearchFieldProps as RACSearchFieldProps, SearchFieldRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Label, SearchField as RACSearchField, VisuallyHidden } from 'react-aria-components';\nimport { FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CloseGlyph, SearchGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\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// The search page's search bar, on its own: a 56dp container with a full\n// corner on surface container high, a 24dp magnifier in on surface variant\n// at the start, the supporting text in on surface variant and the input\n// text in on surface, both body-large, and a trailing icon button in on\n// surface variant that clears the field while it holds anything. The page's\n// 16dp of padding is to a 48dp tap target, and the icon sits 12dp inside\n// that, so the magnifier starts 28dp in and the text 4dp past the target,\n// at 68dp; the clear button is the medium icon button, 40dp around a 24dp\n// icon, set 4dp in from the padding so its icon ends 28dp from the end. The\n// container follows its own width up to the page's 720dp; the page's 360dp\n// floor is left to the call site, since a phone's width less its margins is\n// under it. The list of suggestions the page draws under the bar is\n// Autocomplete's, and nothing here.\n//\n// The page's hovered and pressed states are on surface state layers over\n// the container, at the opacities the tokens hold. It names a focused state\n// and draws nothing for it, so the bar takes the 2dp primary ring the text\n// fields page gives a focused field, drawn inside the pill as a shadow for\n// the reason the chrome's box draws its underline that way: a shadow\n// changes nothing about the bar's size, and clipped to the corner it stays\n// inside the pill. It shows on any focus, as the underline does; a text\n// control matches `:focus-visible` on every focus anyway. Disabled takes\n// the chrome's dimmed container and content, since the page has no disabled\n// state and the sibling fields already agree on one.\n//\n// React Aria's `SearchField` is the root, a div holding the label,\n// description and error slots and the clear button's context; the bar is\n// its own element around the field chrome's input, and the label is\n// visually hidden, since the bar carries no label of its own and the\n// supporting text is what a person reads.\n\ntype SearchFieldProps = {\n  /**\n   * The name of the button that clears the field, for a screen reader.\n   * @default 'Clear'\n   */\n  clearLabel?: string;\n  /**\n   * A hint shown under the bar. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and `aria-invalid` follow\n   * from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the field searches, for a screen reader. The bar draws no label,\n   * so this is read and never shown; `placeholder` is what is seen.\n   */\n  label: string;\n  /** The supporting text in the empty bar, which is what a person reads. */\n  placeholder?: string;\n} & Omit<RACSearchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the bar draws, from the field's render state: the clear button only\n// while the field holds something. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after; the React Compiler memoises the result on its inputs.\nfunction fieldContent(label: string, placeholder: string | undefined, clearLabel: string, description: string | undefined, error: string | undefined) {\n  return (state: SearchFieldRenderProps) => <>\n      <VisuallyHidden>\n        <Label>{label}</Label>\n      </VisuallyHidden>\n      <div {...{\n      0: {\n        className: \"x12w9bfk x6s0dn4 x17m4uoy x1g5gueg xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x1w5n3ug x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1xj74d8 x1bhcspo\"\n      }\n    }[!!state.isDisabled << 0]}>\n        <SearchGlyph className=\"xxk0z11 x1lliihq x2lah0s xvy4d1p\" />\n        <FieldInput placeholder={placeholder} className=\"x1hcrkkg xzwh6sb xjyslct x1iyjqo2 xeuugli\" />\n        {state.isEmpty ? null : <IconButton aria-label={clearLabel} className=\"x15ir4sr\">\n            <CloseGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n          </IconButton>}\n      </div>\n      <FieldMessage description={description} error={error} />\n    </>;\n}\n\n/**\n * A search bar: a keyword typed into a pill, submitted with Enter and\n * cleared with Escape or its button. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own; `onSubmit` is handed the value on Enter and `onClear` is called\n * when it is emptied.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The input and the message are\n * the field chrome in `src/field`, shared with every other field; the bar\n * around them is the search page's rather than the box the other fields\n * share.\n */\nfunction SearchField({\n  clearLabel = 'Clear',\n  description,\n  error,\n  isDisabled = false,\n  label,\n  placeholder,\n  ...props\n}: SearchFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACSearchField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {fieldContent(label, placeholder, clearLabel, description, error)}\n    </RACSearchField>;\n}\nexport type { SearchFieldProps };\nexport default SearchField;"],"mappings":";;;;;;;;;;AAkFA,SAAS8B,aAAaH,OAAeC,aAAiCJ,YAAoBC,aAAiCC,OAA2B;CACpJ,QAAQK,UAAkC,qBAAA,UAAA,EAAA,UAAA;EACtC,oBAAC,gBAAD,EAAA,UACE,oBAAC,OAAD,EAAA,UAAQJ,MAAa,CAAA,EACP,CAAA;EAChB,qBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACDK,WAAW,wOACb;IACA,GAAG,EACDA,WAAW,8NACb;GACF,EAAE,CAAC,CAACD,MAAME,cAAc;GAPtB,UAAA;IAQE,oBAAC,aAAD,EAAa,WAAU,mCAAkC,CAAA;IACzD,oBAAC,YAAD;KAAyBL;KAAa,WAAU;IAA2C,CAAA;IAC1FG,MAAMG,UAAU,OAAO,oBAAC,YAAD;KAAY,cAAYV;KAAY,WAAU;KAClE,UAAA,oBAAC,YAAD,EAAY,WAAU,4BAA2B,CAAA;IACvC,CAAA;GACX;;EACL,oBAAC,cAAD;GAA2BC;GAAoBC;EAAM,CAAA;CACvD,EAAA,CAAA;AACJ;;;;;;;;;;;;;;AAeA,SAAArB,cAAA8B,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAb,YAAAc,IAAAb,aAAAC,OAAAO,YAAAM,IAAAZ,OAAAC,aAAA,GAAAY,YAAAL;CACnB,MAAAX,aAAAc,OAAAG,KAAAA,IAAA,UAAAH;CAGA,MAAAL,aAAAM,OAAAE,KAAAA,IAAA,QAAAF;CAKA,MAAAG,qBAA2B9B,2BAA2B;CAC9C,MAAA+B,KAAArC;CAAc,IAAAsC;CAAA,IAAAR,EAAA,OAAAV,OAAA;EAAoCkB,KAAAjC,YAAYe,KAAK;EAACU,EAAA,KAAAV;EAAAU,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAyD,MAAAS,KAAA9B,oBAAoBZ,MAAaO,YAAWoC,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAX,EAAA,OAAAZ,cAAAY,EAAA,OAAAX,eAAAW,EAAA,OAAAV,SAAAU,EAAA,OAAAT,SAAAS,EAAA,OAAAR,aAAA;EAC1LmB,KAAAjB,aAAaH,OAAOC,aAAaJ,YAAYC,aAAaC,KAAK;EAACU,EAAA,KAAAZ;EAAAY,EAAA,KAAAX;EAAAW,EAAA,KAAAV;EAAAU,EAAA,KAAAT;EAAAS,EAAA,KAAAR;EAAAQ,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAO,MAAAP,EAAA,OAAAH,cAAAG,EAAA,QAAAI,WAAAJ,EAAA,QAAAQ,MAAAR,EAAA,QAAAS,MAAAT,EAAA,QAAAW,MAAAX,EAAA,QAAAM,oBAAA;EAD9DM,KAAA,oBAAC,IAAD;GAA4Bf;GAAuB,WAAAW;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAChIE,UAAAA;EADiB,CAAA;EAEHX,EAAA,KAAAO;EAAAP,EAAA,KAAAH;EAAAG,EAAA,MAAAI;EAAAJ,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAW;EAAAX,EAAA,MAAAM;EAAAN,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAFZY;AAEY"}
+{"version":3,"file":"index.js","names":["SearchFieldProps","RACSearchFieldProps","SearchFieldRenderProps","stylex","Label","SearchField","RACSearchField","VisuallyHidden","FieldInput","FieldMessage","fieldStyles","invalidFrom","useFieldValidationBehavior","CloseGlyph","SearchGlyph","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","IconButton","FORCED_COLORS","clearLabel","description","error","label","placeholder","Omit","fieldContent","state","className","isDisabled","isEmpty","t0","$","_c","t1","t2","props","undefined","validationBehavior","T0","t3","t4","root","t5","t6","SearchField","_c","props","RACSearchField","stylex.props"],"sources":["../../../src/components/search-field/index.tsx"],"sourcesContent":["import type { SearchFieldProps as RACSearchFieldProps, SearchFieldRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Label, SearchField as RACSearchField, VisuallyHidden } from 'react-aria-components';\nimport { FieldInput, FieldMessage } from '../../field';\nimport { fieldStyles, invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CloseGlyph, SearchGlyph } from '../../glyphs';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\nimport IconButton from '../icon-button';\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// The search page's search bar, on its own: a 56dp container with a full\n// corner on surface container high, a 24dp magnifier in on surface variant\n// at the start, the supporting text in on surface variant and the input\n// text in on surface, both body-large, and a trailing icon button in on\n// surface variant that clears the field while it holds anything. The page's\n// 16dp of padding is to a 48dp tap target, and the icon sits 12dp inside\n// that, so the magnifier starts 28dp in and the text 4dp past the target,\n// at 68dp; the clear button is the medium icon button, 40dp around a 24dp\n// icon, set 4dp in from the padding so its icon ends 28dp from the end. The\n// container follows its own width up to the page's 720dp; the page's 360dp\n// floor is left to the call site, since a phone's width less its margins is\n// under it. The list of suggestions the page draws under the bar is\n// Autocomplete's, and nothing here.\n//\n// The page's hovered and pressed states are on surface state layers over\n// the container, at the opacities the tokens hold. It names a focused state\n// and draws nothing for it, so the bar takes the 2dp primary ring the text\n// fields page gives a focused field, drawn inside the pill as a shadow for\n// the reason the chrome's box draws its underline that way: a shadow\n// changes nothing about the bar's size, and clipped to the corner it stays\n// inside the pill. It shows on any focus, as the underline does; a text\n// control matches `:focus-visible` on every focus anyway. Disabled takes\n// the chrome's dimmed container and content, since the page has no disabled\n// state and the sibling fields already agree on one.\n//\n// React Aria's `SearchField` is the root, a div holding the label,\n// description and error slots and the clear button's context; the bar is\n// its own element around the field chrome's input, and the label is\n// visually hidden, since the bar carries no label of its own and the\n// supporting text is what a person reads.\n\ntype SearchFieldProps = {\n  /**\n   * The name of the button that clears the field, for a screen reader.\n   * @default 'Clear'\n   */\n  clearLabel?: string;\n  /**\n   * A hint shown under the bar. Replaced by `error` when there is one, so\n   * the two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the field in its error state — the message and `aria-invalid` follow\n   * from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the field searches, for a screen reader. The bar draws no label,\n   * so this is read and never shown; `placeholder` is what is seen.\n   */\n  label: string;\n  /** The supporting text in the empty bar, which is what a person reads. */\n  placeholder?: string;\n} & Omit<RACSearchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the bar draws, from the field's render state: the clear button only\n// while the field holds something. Built by a call rather than written\n// inline at the prop, which is what react-perf's no-new-function-as-prop is\n// after; the React Compiler memoises the result on its inputs.\nfunction fieldContent(label: string, placeholder: string | undefined, clearLabel: string, description: string | undefined, error: string | undefined) {\n  return (state: SearchFieldRenderProps) => <>\n      <VisuallyHidden>\n        <Label>{label}</Label>\n      </VisuallyHidden>\n      <div {...{\n      0: {\n        className: \"x12w9bfk x6s0dn4 x17m4uoy x1g5gueg xvkjz1l xs1ryiz x1ylmb6m x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x1w5n3ug x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7\"\n      },\n      1: {\n        className: \"x12w9bfk x6s0dn4 xs1ryiz x1dkaolv xx61lck x13rsnn2 x19i8hm1 x1gnnqk1 x9f619 x78zum5 xxj4525 xh8yej3 xwnkcuf x1x84bn5 x12iqurn xi9ts3s x1jrff4x x1glmgrm xtrd051 x1qno0dh x106061f xpc4ca7 xepofeg xmnqt3w x1xj74d8 x1bhcspo\"\n      }\n    }[!!state.isDisabled << 0]}>\n        <SearchGlyph className=\"xxk0z11 x1lliihq x2lah0s xvy4d1p\" />\n        <FieldInput placeholder={placeholder} className=\"x1hcrkkg xzwh6sb xjyslct x1iyjqo2 xeuugli\" />\n        {state.isEmpty ? null : <IconButton aria-label={clearLabel} className=\"x15ir4sr\">\n            <CloseGlyph className=\"xlzyvqe x1lliihq x15vhz18\" />\n          </IconButton>}\n      </div>\n      <FieldMessage description={description} error={error} />\n    </>;\n}\n\n/**\n * A search bar: a keyword typed into a pill, submitted with Enter and\n * cleared with Escape or its button. Its value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep\n * its own; `onSubmit` is handed the value on Enter and `onClear` is called\n * when it is emptied.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions. The input and the message are\n * the field chrome in `src/field`, shared with every other field; the bar\n * around them is the search page's rather than the box the other fields\n * share.\n */\nfunction SearchField({\n  clearLabel = 'Clear',\n  description,\n  error,\n  isDisabled = false,\n  label,\n  placeholder,\n  ...props\n}: SearchFieldProps) {\n  const validationBehavior = useFieldValidationBehavior();\n  return <RACSearchField isDisabled={isDisabled} isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(fieldStyles.root), props)}>\n      {fieldContent(label, placeholder, clearLabel, description, error)}\n    </RACSearchField>;\n}\nexport type { SearchFieldProps };\nexport default SearchField;"],"mappings":";;;;;;;;;;AAkFA,SAAS8B,aAAaH,OAAeC,aAAiCJ,YAAoBC,aAAiCC,OAA2B;CACpJ,QAAQK,UAAkC,qBAAA,UAAA,EAAA,UAAA;EACtC,oBAAC,gBAAD,EAAA,UACE,oBAAC,OAAD,EAAA,UAAQJ,MAAa,CAAA,EACP,CAAA;EAChB,qBAAC,OAAD;GAAK,GAAI;IACT,GAAG,EACDK,WAAW,wOACb;IACA,GAAG,EACDA,WAAW,8NACb;GACF,EAAE,CAAC,CAACD,MAAME,cAAc;GAPtB,UAAA;IAQE,oBAAC,aAAD,EAAa,WAAU,mCAAkC,CAAA;IACzD,oBAAC,YAAD;KAAyBL;KAAa,WAAU;IAA2C,CAAA;IAC1FG,MAAMG,UAAU,OAAO,oBAAC,YAAD;KAAY,cAAYV;KAAY,WAAU;KAClE,UAAA,oBAAC,YAAD,EAAY,WAAU,4BAA2B,CAAA;IACvC,CAAA;GACX;;EACL,oBAAC,cAAD;GAA2BC;GAAoBC;EAAM,CAAA;CACvD,EAAA,CAAA;AACJ;;;;;;;;;;;;;;AAeA,SAAArB,cAAA8B,IAAA;CAAA,MAAAC,IAAAC,EAAA,EAAA;CAAqB,MAAA,EAAAb,YAAAc,IAAAb,aAAAC,OAAAO,YAAAM,IAAAZ,OAAAC,aAAA,GAAAY,YAAAL;CACnB,MAAAX,aAAAc,OAAAG,KAAAA,IAAA,UAAAH;CAGA,MAAAL,aAAAM,OAAAE,KAAAA,IAAA,QAAAF;CAKA,MAAAG,qBAA2B9B,2BAA2B;CAC9C,MAAA+B,KAAArC;CAAc,IAAAsC;CAAA,IAAAR,EAAA,OAAAV,OAAA;EAAoCkB,KAAAjC,YAAYe,KAAK;EAACU,EAAA,KAAAV;EAAAU,EAAA,KAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAyD,MAAAS,KAAA9B,oBAAoBZ,MAAaO,YAAWoC,IAAK,GAAGN,OAAK;CAAC,IAAAO;CAAA,IAAAX,EAAA,OAAAZ,cAAAY,EAAA,OAAAX,eAAAW,EAAA,OAAAV,SAAAU,EAAA,OAAAT,SAAAS,EAAA,OAAAR,aAAA;EAC1LmB,KAAAjB,aAAaH,OAAOC,aAAaJ,YAAYC,aAAaC,KAAK;EAACU,EAAA,KAAAZ;EAAAY,EAAA,KAAAX;EAAAW,EAAA,KAAAV;EAAAU,EAAA,KAAAT;EAAAS,EAAA,KAAAR;EAAAQ,EAAA,KAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,OAAAO,MAAAP,EAAA,OAAAH,cAAAG,EAAA,QAAAI,WAAAJ,EAAA,QAAAQ,MAAAR,EAAA,QAAAS,MAAAT,EAAA,QAAAW,MAAAX,EAAA,QAAAM,oBAAA;EAD9DM,KAAA,oBAAC,IAAD;GAA4Bf;GAAuB,WAAAW;GAAwCF;GAAkB,GAAMF;GAAK,GAAMK;GAChIE,UAAAA;EADiB,CAAA;EAEHX,EAAA,KAAAO;EAAAP,EAAA,KAAAH;EAAAG,EAAA,MAAAI;EAAAJ,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAW;EAAAX,EAAA,MAAAM;EAAAN,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAFZY;AAEY"}