@kanso-labs/kanso-ui 0.40.9 → 0.42.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","KeyboardEventHandler","ReactNode","RefAttributes","FocusableElement","Key","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","ToggleGroupState","stylex","createContext","createElement","useContext","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","LabelledByAttribute","CheckGlyph","useRipple","useToggleGroupDisabled","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","GroupRender","Ripple","ReturnType","NonNullable","keyOf","segment","HTMLElement","written","dataset","key","undefined","JSON","parse","radioGroupRenderer","render","domProps","renderProps","merged","onKeyDownCapture","radioKeys","state","toolbar","HTMLDivElement","event","group","currentTarget","segments","querySelectorAll","filter","closest","from","findIndex","target","step","altKey","ctrlKey","metaKey","stepOf","getComputedStyle","direction","preventDefault","stopPropagation","to","length","setSelected","rtl","GLYPH_SIZE","GLYPH_RESERVE","sm","GLYPH_RESERVE_HALF","FORCED_COLORS","styles","label","k6CgDc","k7Eaqz","kVQacm","kg5iWk","kIyJzY","k1ekBW","kAMwcw","khDVqt","$$css","labelChosen","kAXs8y","labelReserved","k71WvV","keTefX","labelShifted","kgeoSG","kGOzcv","kpsdNU","kEoFBp","kGNEyG","kWkggS","kZKoxP","kVAM5u","kT0f0o","kVL7Gh","k2ei4v","kfmiAY","krdFHd","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kjj79g","kb6lSQ","kLWn49","k8WAf4","kg3NbH","kVAEAm","segmentDisabled","kMwMTN","segmentSelected","segmentSelectedUnmarked","segmentUnselected","SegmentedButtonProps","Omit","className","disallowEmptySelection","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","isSelected","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","reserves","glyph","isHovered","isFocusVisible","isPressed","props","surface","SegmentedButton","t0","$","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","t8","t9","single","t10","SegmentedButtonSegment","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","element","aria","disabledByGroup","id","stringify","handlers","segmentStyles","ring","Segment","RACSelectionIndicator","stylex.props","_c","RACToggleButtonGroup","RACToggleButton"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEventHandler, ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, Key, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps, ToggleGroupState } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, createElement, useContext } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport type { LabelledByAttribute } from '../../render/name';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useToggleGroupDisabled } from '../../hooks/useToggleGroupDisabled';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The segmented buttons page's outlined segmented button: two to five\n// segments joined into one outlined track, of which one or several are\n// chosen. A segment is Button's default size and type role — a 40dp\n// container with a label-large label — which is what that page gives too.\n//\n// What a screen reader hears follows the selection mode, and React Aria\n// decides it rather than this component. Choosing one of the segments is a\n// radio group, so the track is a `radiogroup` and each segment a `radio`\n// reporting `aria-checked`; choosing several is a `toolbar` of buttons each\n// reporting `aria-pressed`. That is the right mapping for both, and it is\n// why the mode is a word on the group rather than two components.\n//\n// React Aria stops at the name, though: its single mode is announced as a\n// radio group and behaves as a toolbar. So that mode takes the rest of the\n// radio group pattern from the ARIA Authoring Practices, a deliberate\n// departure from React Aria's `ToggleButtonGroup`, in two parts. The chosen\n// segment cannot be pressed off, since a radio group always holds a choice\n// and the page's single-select set always keeps one segment chosen;\n// `disallowEmptySelection={false}` gives React Aria's default back. And the\n// arrow keys choose as they move, wrapping at either end, with Home and End\n// choosing the first and last segment. Under React Aria the arrows moved\n// focus alone and stopped at the ends, so a screen reader reached each radio\n// without it being checked, and choosing one took a separate Space. Choosing\n// several keeps React Aria's toolbar keys, where the arrows only move between\n// buttons and Space toggles one.\n//\n// Six things are this component's own.\n//\n// **The segments are one track, not a row of buttons.** Every segment\n// carries the page's 1dp outline, and each one after the first drops its\n// leading edge so neighbours share a single rule rather than drawing two\n// against each other. The outer ends are the page's fully rounded shape and\n// the inner joins are square.\n//\n// **Every segment is the same width.** The page gives the segment width as\n// the container's divided by their number, so the track is a grid of equal\n// columns; the container itself is still as wide as its widest label asks,\n// plus the room described next.\n//\n// **A chosen segment says so with a check.** The page draws it in the icon\n// slot, so a segment given an `icon` shows the icon while unselected and the\n// check once chosen. `showSelectedIcon` turns it off for a set whose labels\n// already read as chosen or not.\n//\n// Without the check, the page's chosen container is the only cue, and it is\n// about 1.2:1 against the page in the light theme, with the same label\n// colour either way — under WCAG's 3:1 for a state. So a set with the check\n// off draws its chosen segment on the secondary role instead, with the label\n// on it, which clears that comfortably. A departure from the page, taken\n// only where the page's own cue has been turned off; with the check drawn,\n// the chosen segment is the page's.\n//\n// Under forced colours a fill is painted in the page's own `Canvas`, so the\n// chosen container is `Highlight` with its label in `HighlightText` — the\n// pair the mode gives whatever is chosen — and a disabled chosen one keeps\n// a `GrayText` ring rather than a fill, which leaves its `GrayText` label\n// readable.\n//\n// That slot is drawn out of flow, and every segment that could ever use it\n// keeps room for it whether or not it is drawing one. Laid out in flow it\n// was part of the segment's content size, so the widest segment was\n// whichever one was chosen and the whole track changed width with the\n// choice — moving every label, and moving the ground under the chosen\n// container while it was sliding across it. The mechanism is Angular\n// Material's button toggle: the slot is absolute at the leading padding\n// edge and opens from 0 to 18dp, and the label's own margins open the space\n// it lands in, both over `durationShort2`. Two things here are not theirs.\n// The room is a margin on the label rather than padding on the segment,\n// because padding would be part of the content size the equal columns are\n// measured from — which is the thing being fixed. And it is split across\n// both of the label's sides while nothing is drawn, so a bare label stays\n// centred; Angular Material has no such case, since its toggles are sized\n// by their own content rather than by the widest of them.\n//\n// The cost is that a track able to draw a check is 26dp per segment wider\n// than its labels alone would ask for. It is not wider than it used to\n// get, though, and that falls out rather than being arranged: the reserve\n// puts every column at the widest label plus the room, which is exactly\n// what the widest column already measured while its own segment was the\n// chosen one. What changes is that the track is always that, instead of\n// only while the longest label is the one chosen.\n//\n// Angular Material delays the check's own transition by 45ms so the space\n// opens before the glyph arrives. That is dropped rather than carried as a\n// literal: there is no motion token for it, and the slot here opens from its\n// centre rather than its leading edge, so the check and the label never\n// cross even when the two run together.\n//\n// **The chosen container is an element of its own, and it moves.** It is\n// React Aria's `SelectionIndicator`, a shared element rendered inside every\n// segment and drawn in the chosen one: on a change it keeps the old one\n// until it has finished moving, so two exist while it slides. No\n// `SharedElementTransition` is rendered here, because `ToggleButtonGroup`\n// wraps its children in one already — worth saying, since the primitive\n// throws outside a scope wherever else it is used.\n//\n// It is the page's chosen container rather than a smaller pill: it covers\n// the segment, which is the box a background painted, so the fill is all\n// that travels. Three things follow. It is drawn behind the segments rather\n// than inside one, or a container crossing a neighbour would pass over that\n// neighbour's label and the rule beside it. Its corners have to match\n// whichever segment it is in, which the segment hands down as a custom\n// property, because a child cannot read its own parent's place in the track.\n// And the state layers move onto a layer of their own above it, since a\n// container that slides away would otherwise take the hover with it and off\n// the segment under the pointer.\n//\n// **Choosing several animates differently, rather than the same way twice.**\n// A shared element is one element: it can move between segments, but with\n// several chosen there is no single segment for it to be at. So\n// `selectionMode=\"multiple\"` names only `opacity` in the transition, nothing\n// positional is snapshotted, and each container fades in and out where it\n// is; `single` names `translate` and `border-radius` as well, and the one\n// container travels between segments.\n//\n// **Two of the page's values are the library's instead**, both for\n// consistency with the controls beside them: the focus ring, which is\n// primary at 2dp offset 2dp everywhere here rather than the page's secondary\n// at 3dp, and the press, which is the library's ripple rather than a flat\n// state layer. The page names a ripple as the pressed state, so the second\n// is a departure only in how it is drawn.\n//\n// **The density steps are not drawn.** The page removes 4dp of height per\n// step down, for denser interfaces; nothing else in the library takes a\n// density, and one component that did would be the odd one out. A shorter\n// track is a `className` away.\n//\n// Vertical is React Aria's and is not passed through, since the page draws\n// one row and a column of joined segments is a different shape — the outer\n// corners, the shared rule and the equal columns would all have to mean\n// something else.\n\n// Whether a chosen segment draws the check. A context rather than a prop on\n// each segment, since it is the set's decision and repeating it on every\n// segment is how the two drift.\nconst ShowSelectedIconContext = createContext(true);\n\n// Which of the two animations the chosen container plays. Read from a\n// context for the same reason, and because React Aria's own state context\n// holds the mode in a shape this would have to narrow before using.\nconst SelectionModeContext = createContext<SelectionMode>('single');\ntype GroupRender = RACToggleButtonGroupProps['render'];\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\n\n// A segment's key, back from the attribute `SegmentedButtonSegment` writes\n// it into. JSON rather than the key as written, so a numeric key comes back\n// a number and matches the one React Aria's selection holds.\nfunction keyOf(segment: HTMLElement): Key | null {\n  const written = segment.dataset.key;\n  if (written === undefined) {\n    return null;\n  }\n  const key: unknown = JSON.parse(written);\n  return typeof key === 'string' || typeof key === 'number' ? key : null;\n}\n\n// The group's element, with `radioKeys` in place of React Aria's keyboard\n// handler, then handed to the call site's own `render` if it passed one.\nfunction radioGroupRenderer(render: GroupRender): NonNullable<GroupRender> {\n  return (domProps, renderProps) => {\n    const merged = {\n      ...domProps,\n      onKeyDownCapture: radioKeys(renderProps.state, domProps.onKeyDownCapture)\n    };\n    return render === undefined ? createElement('div', merged) : render(merged, renderProps);\n  };\n}\n\n// The radio group's keys, taken ahead of React Aria's toolbar ones on the\n// same capture listener: the arrows, Home and End move focus to a segment\n// and choose it, wrapping at the ends and passing over a disabled segment,\n// which is what the toolbar's own handler would otherwise do with focus\n// alone. Everything else — Tab, and an arrow held with a modifier the\n// browser may want — is handed to the toolbar as before.\nfunction radioKeys(state: ToggleGroupState, toolbar: KeyboardEventHandler<HTMLDivElement> | undefined): KeyboardEventHandler<HTMLDivElement> {\n  return event => {\n    const group = event.currentTarget;\n    const segments = [...group.querySelectorAll<HTMLElement>('[data-key]:not([data-disabled])')].filter(segment => segment.closest('[role=\"radiogroup\"]') === group);\n    const from = segments.findIndex(segment => segment === event.target);\n    const step = event.altKey || event.ctrlKey || event.metaKey ? null : stepOf(event.key, getComputedStyle(group).direction === 'rtl');\n    if (from === -1 || step === null) {\n      toolbar?.(event);\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    const to = step === 'first' ? 0 : step === 'last' ? segments.length - 1 : (from + step + segments.length) % segments.length;\n    const segment = segments[to];\n    const key = keyOf(segment);\n    if (key === null) {\n      return;\n    }\n    segment.focus();\n    state.setSelected(key, true);\n  };\n}\n\n// Where a key moves the choice in a radio group: one segment on, one back,\n// or to either end. Right and left follow the direction the track is drawn\n// in, read off the track itself rather than the locale, so a `dir` on a\n// wrapper turns them over as it turns the track over; up and down, and Home\n// and End, follow the document order whatever the direction.\nfunction stepOf(key: string, rtl: boolean): -1 | 1 | 'first' | 'last' | null {\n  switch (key) {\n    case 'ArrowDown':\n      {\n        return 1;\n      }\n    case 'ArrowLeft':\n      {\n        return rtl ? 1 : -1;\n      }\n    case 'ArrowRight':\n      {\n        return rtl ? -1 : 1;\n      }\n    case 'ArrowUp':\n      {\n        return -1;\n      }\n    case 'End':\n      {\n        return 'last';\n      }\n    case 'Home':\n      {\n        return 'first';\n      }\n    default:\n      {\n        return null;\n      }\n  }\n}\n\n// The page's 18dp icon slot, and the room a segment keeps for it: the slot\n// plus the gap between it and the label. Half of that room sits on each side\n// of the label while nothing is drawn, which is what keeps a bare label\n// centred; see `labelReserved`.\nconst GLYPH_SIZE = '18px';\nconst GLYPH_RESERVE = `calc(${GLYPH_SIZE} + ${spacing.sm})`;\nconst GLYPH_RESERVE_HALF = `calc((${GLYPH_SIZE} + ${spacing.sm}) / 2)`;\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  label: {\n    k6CgDc: \"x12w9bfk\",\n    k7Eaqz: \"xeuugli\",\n    kVQacm: \"xb3r6kr\",\n    kg5iWk: \"xlyipyv\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1ve1rmq\",\n    kAMwcw: \"xpc4ca7\",\n    khDVqt: \"xuxw1ft\",\n    $$css: true\n  },\n  labelChosen: {\n    kAXs8y: \"x1g12otp\",\n    $$css: true\n  },\n  labelReserved: {\n    k71WvV: \"x184gv5z\",\n    keTefX: \"x1mjqfaz\",\n    $$css: true\n  },\n  labelShifted: {\n    k71WvV: \"x14z9mp\",\n    keTefX: \"x1c5lys2\",\n    $$css: true\n  },\n  segment: {\n    \"--segment-indicator-radius-end\": \"x32u3vw x111hk5a\",\n    \"--segment-indicator-radius-start\": \"xatjrgw x1syycwj\",\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x17kqlg\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kVAM5u: \"x1fwvt7v\",\n    kT0f0o: \"x1fougng xkducg2\",\n    kVL7Gh: \"x1prwiuu x1uwupfv\",\n    k2ei4v: \"x120dh57 x14e42zd\",\n    kfmiAY: \"x17hb1p4 x1a37zkv\",\n    krdFHd: \"xwfph4i xb01x1j\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"x18fpw6u\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  segmentDisabled: {\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  segmentSelected: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  segmentSelectedUnmarked: {\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  segmentUnselected: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\ntype SegmentedButtonProps = LabelledByAttribute & Omit<RACToggleButtonGroupProps, 'className' | 'orientation' | 'style'> & {\n  /** A function may compute the class from the set's render state. */\n  className?: RACToggleButtonGroupProps['className'];\n  /**\n   * Whether the chosen segment stays chosen when it is pressed again. On\n   * by default while one is chosen, since a radio group always holds a\n   * choice; `false` lets a press clear it, as React Aria's own default\n   * does. Off by default while several may be, where any of them can be\n   * turned off.\n   * @default true while one is chosen, false while several may be\n   */\n  disallowEmptySelection?: boolean;\n  /**\n   * Whether a chosen segment draws a check before its label, as the page\n   * has it. `false` leaves the segment's own icon in place while selected,\n   * and draws the chosen segment on the stronger secondary container, since\n   * the page's own is too faint to say which is chosen by itself.\n   * @default true\n   */\n  showSelectedIcon?: boolean;\n  /** A function may compute the style from the set's render state. */\n  style?: RACToggleButtonGroupProps['style'];\n};\ntype SegmentedButtonSegmentProps = Omit<RACToggleButtonProps, 'children' | 'className' | 'style'> & {\n  /** The segment's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the segment's render state. */\n  className?: RACToggleButtonProps['className'];\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * An icon before the label, in the page's 18dp size. Replaced by the check\n   * while the segment is chosen, unless the set turns that off. An icon drawn\n   * in `em` takes that size from the slot.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the segment's render state. */\n  style?: RACToggleButtonProps['style'];\n};\n\n/**\n * What the glyph slot draws: the check on a chosen segment, or the segment's\n * own icon. `null` for a segment with neither, which leaves the slot empty\n * and closed rather than unrendered. Returns a node rather than letting the\n * type be inferred, since `ReactNode` is a union that includes a promise and\n * an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, showSelectedIcon: boolean): ReactNode {\n  if (state.isSelected && showSelectedIcon) {\n    return <CheckGlyph className=\"x5yr21d x2lah0s x1xp8n7a\" />;\n  }\n  return icon ?? null;\n}\n\n// The chosen container's class, from the segment's own state and the shared\n// element's. A function, because React Aria hands the indicator the entering\n// and leaving states the fade is drawn from, and those are the only two the\n// element knows about itself.\nfunction indicatorClassName(isDisabled: boolean, selectionMode: SelectionMode, showSelectedIcon: boolean): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    8: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    4: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4\"\n    },\n    12: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    10: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    14: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    1: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    9: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    5: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4 xg01cxk\"\n    },\n    13: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    11: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    15: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 3 | !!!showSelectedIcon << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? '';\n}\n\n// What a segment 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 segmentContent(children: ReactNode, icon: ReactNode, ripple: Ripple, selectionMode: SelectionMode, showSelectedIcon: boolean) {\n  // Whether this segment can ever draw a glyph, and so whether it keeps room\n  // for one. A set that draws no check and a segment with no icon of its own\n  // never needs the slot, and reserving it there would be dead space in\n  // every segment of the track.\n  const reserves = showSelectedIcon || icon !== undefined;\n  return (state: ToggleButtonRenderProps) => {\n    const glyph = glyphFor(state, icon, showSelectedIcon);\n    return <>\n        <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode, showSelectedIcon)} />\n        <span {...{\n        0: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n        },\n        4: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n        },\n        2: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        6: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        1: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        5: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        3: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        7: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        }\n      }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n        {reserves && <span {...{\n        0: {\n          className: \"x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xnalus7 xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7\"\n        },\n        1: {\n          className: \"x12w9bfk x6s0dn4 xmix8c7 x3nfvp2 xosj86m xwa60dl x2xyl1b xl56j7k xb3r6kr x47corl x10l6tqk xmzmy3r x1qno0dh x1j4rzew xpc4ca7 x1xp8n7a\"\n        }\n      }[!!(glyph !== null) << 0]}>\n            {glyph}\n          </span>}\n        <span {...stylex.props(styles.label, reserves && (glyph === null ? styles.labelReserved : styles.labelShifted), state.isSelected && !state.isDisabled && styles.labelChosen)}>\n          {children}\n        </span>\n        {ripple.surface}\n      </>;\n  };\n}\n\n/**\n * A row of two to five joined segments, of which one — or with\n * `selectionMode=\"multiple\"`, several — is chosen. Selection is React Aria's:\n * pass `selectedKeys` with `onSelectionChange` to control it, or\n * `defaultSelectedKeys` to let it keep its own. Give every segment an `id`,\n * which is the key selection is reported by.\n *\n * ```tsx\n * <SegmentedButton aria-label=\"Label\" defaultSelectedKeys={['first']}>\n *   <SegmentedButton.Segment id=\"first\">First item</SegmentedButton.Segment>\n *   <SegmentedButton.Segment id=\"second\">Second item</SegmentedButton.Segment>\n * </SegmentedButton>\n * ```\n *\n * Name the set with `aria-label` or `aria-labelledby`, one of which the\n * props require — nothing here labels it for you, and a set with no name is\n * a group a screen reader cannot announce. What it is announced as follows the selection mode: choosing one\n * is a radio group, choosing several a toolbar of two-state buttons. So does\n * how the chosen container moves: it slides between segments while one is\n * chosen, and fades in place while several may be.\n *\n * Choosing one behaves as a radio group too, which React Aria's\n * `ToggleButtonGroup` does not. The chosen segment stays chosen when it is\n * pressed again, unless `disallowEmptySelection` is `false`. The arrow keys\n * move to a segment and choose it, wrapping at either end, and Home and End\n * choose the first and last. Choosing several keeps React Aria's keys: the\n * arrows move between segments, and Space or Enter toggles the focused one.\n *\n * The call site's `className` and `style` land on the track, which is the\n * element a layout positions.\n */\nfunction SegmentedButton({\n  disallowEmptySelection,\n  render,\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: RefAttributes<HTMLDivElement> & SegmentedButtonProps) {\n  const single = selectionMode === 'single';\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} disallowEmptySelection={disallowEmptySelection ?? single} render={single ? radioGroupRenderer(render) : render} selectionMode={selectionMode} {...mergeStatefulStyles({\n        className: \"x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0\"\n      }, props)} />\n      </SelectionModeContext>\n    </ShowSelectedIconContext>;\n}\n\n/**\n * One segment. Its `id` is what selection is reported by, and its label is\n * what names it. A chosen segment draws a check before the label; an\n * unchosen one draws whatever `icon` holds, if anything.\n */\nfunction SegmentedButtonSegment({\n  children,\n  disableRipple = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  ...props\n}: RefAttributes<HTMLButtonElement> & SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  const showSelectedIcon = useContext(ShowSelectedIconContext);\n  // The `aria-*` props React Aria would drop and the keyboard handlers it\n  // would wrap go on the element itself, as they do on Chip, Button and\n  // IconButton; see src/render/aria.tsx.\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation. A disabled set disables\n  // its segments through React Aria's group state rather than their props,\n  // so the group is read as well.\n  const disabledByGroup = useToggleGroupDisabled(props.id);\n  // The call site's pointer handlers go through the ripple, which calls\n  // them after its own. Spread beside the ripple's, one of the two sets\n  // would write over the other.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true && !disabledByGroup, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <RACToggleButton\n  // The key the radio group's arrow keys choose this segment by; see\n  // `radioKeys`. React Aria keeps a segment's key off its element.\n  data-key={selectionMode === 'single' && props.id !== undefined ? JSON.stringify(props.id) : undefined} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(segmentStyles(showSelectedIcon), props)}>\n      {segmentContent(children, icon, ripple, selectionMode, showSelectedIcon)}\n    </RACToggleButton>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// segment's state comes from the render state React Aria hands its\n// className. `disabled` is applied last so its label colour wins over both\n// of the others. Built by a call, since a set that draws no check labels its\n// chosen segment for the container it draws instead.\nfunction segmentStyles(showSelectedIcon: boolean) {\n  return (state: ToggleButtonRenderProps) => stylex.props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !showSelectedIcon && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport { SegmentedButtonSegment };\nexport default SegmentedButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","KeyboardEventHandler","ReactNode","RefAttributes","FocusableElement","Key","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","ToggleGroupState","stylex","createContext","createElement","useContext","useLayoutEffect","useState","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","LabelledByAttribute","CheckGlyph","useRipple","useToggleGroupDisabled","ariaAttributesOf","toggleButtonRenderer","focus","mergeStatefulStyles","colors","motion","radii","sizing","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","GroupRender","Ripple","ReturnType","NonNullable","keyOf","segment","HTMLElement","written","dataset","key","undefined","JSON","parse","radioGroupRenderer","render","domProps","renderProps","merged","onKeyDownCapture","radioKeys","state","toolbar","HTMLDivElement","event","group","currentTarget","segments","querySelectorAll","filter","closest","from","findIndex","target","step","altKey","ctrlKey","metaKey","stepOf","getComputedStyle","direction","preventDefault","stopPropagation","to","length","setSelected","rtl","GLYPH_SIZE","GLYPH_RESERVE","sm","GLYPH_RESERVE_HALF","PADDING_GIVE","md","FORCED_COLORS","styles","kgeoSG","kGOzcv","kpsdNU","kEoFBp","k6CgDc","kGNEyG","kWkggS","kZKoxP","kVAM5u","kT0f0o","kVL7Gh","k2ei4v","kfmiAY","krdFHd","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kjj79g","kb6lSQ","kLWn49","k7Eaqz","k8WAf4","kg3NbH","kVAEAm","kIyJzY","k1ekBW","kAMwcw","$$css","segmentDisabled","kMwMTN","segmentSelected","segmentSelectedUnmarked","segmentUnselected","spacer","kmuXW","kzqmXN","spacerHalf","spacerHolding","spacerIcon","SegmentedButtonProps","Omit","className","disallowEmptySelection","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","marked","isSelected","hasLabel","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","labelRef","element","HTMLSpanElement","labelTitle","labelled","reserves","glyph","drawn","isHovered","isFocusVisible","isPressed","props","surface","SegmentedButton","t0","$","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","t8","t9","single","t10","SegmentedButtonSegment","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","label","setLabel","useTruncatedText","aria","disabledByGroup","id","stringify","handlers","segmentStyles","ring","text","setText","measure","cut","scrollWidth","clientWidth","textContent","resize","ResizeObserver","observe","relabel","MutationObserver","characterData","childList","subtree","disconnect","Segment","RACSelectionIndicator","stylex.props","_c","RACToggleButtonGroup","RACToggleButton"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["'use client';\n\nimport type { KeyboardEventHandler, ReactNode, RefAttributes } from 'react';\nimport type { FocusableElement, Key, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps, ToggleGroupState } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, createElement, useContext, useLayoutEffect, useState } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport type { LabelledByAttribute } from '../../render/name';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { useToggleGroupDisabled } from '../../hooks/useToggleGroupDisabled';\nimport { ariaAttributesOf, toggleButtonRenderer } from '../../render/aria';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, sizing, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The segmented buttons page's outlined segmented button: two to five\n// segments joined into one outlined track, of which one or several are\n// chosen. A segment is Button's default size and type role — a 40dp\n// container with a label-large label — which is what that page gives too.\n//\n// What a screen reader hears follows the selection mode, and React Aria\n// decides it rather than this component. Choosing one of the segments is a\n// radio group, so the track is a `radiogroup` and each segment a `radio`\n// reporting `aria-checked`; choosing several is a `toolbar` of buttons each\n// reporting `aria-pressed`. That is the right mapping for both, and it is\n// why the mode is a word on the group rather than two components.\n//\n// React Aria stops at the name, though: its single mode is announced as a\n// radio group and behaves as a toolbar. So that mode takes the rest of the\n// radio group pattern from the ARIA Authoring Practices, a deliberate\n// departure from React Aria's `ToggleButtonGroup`, in two parts. The chosen\n// segment cannot be pressed off, since a radio group always holds a choice\n// and the page's single-select set always keeps one segment chosen;\n// `disallowEmptySelection={false}` gives React Aria's default back. And the\n// arrow keys choose as they move, wrapping at either end, with Home and End\n// choosing the first and last segment. Under React Aria the arrows moved\n// focus alone and stopped at the ends, so a screen reader reached each radio\n// without it being checked, and choosing one took a separate Space. Choosing\n// several keeps React Aria's toolbar keys, where the arrows only move between\n// buttons and Space toggles one.\n//\n// Six things are this component's own.\n//\n// **The segments are one track, not a row of buttons.** Every segment\n// carries the page's 1dp outline, and each one after the first drops its\n// leading edge so neighbours share a single rule rather than drawing two\n// against each other. The outer ends are the page's fully rounded shape and\n// the inner joins are square.\n//\n// **Every segment is the same width.** The page gives the segment width as\n// the container's divided by their number, so the track is a grid of equal\n// columns; the container itself is still as wide as its widest label asks,\n// plus the room described next.\n//\n// **A chosen segment says so with a check.** The page draws it in the icon\n// slot, so a segment given an `icon` shows the icon while unselected and the\n// check once chosen. `showSelectedIcon` turns it off for a set whose labels\n// already read as chosen or not.\n//\n// Without the check, the page's chosen container is the only cue, and it is\n// about 1.2:1 against the page in the light theme, with the same label\n// colour either way — under WCAG's 3:1 for a state. So a set with the check\n// off draws its chosen segment on the secondary role instead, with the label\n// on it, which clears that comfortably. A departure from the page, taken\n// only where the page's own cue has been turned off; with the check drawn,\n// the chosen segment is the page's.\n//\n// A segment with an `icon` and no label is drawn that way whatever the set\n// says. It keeps its icon when chosen, since the icon is all that tells it\n// from its neighbours, and a check in its place would hide which of them is\n// the chosen one.\n//\n// Under forced colours a fill is painted in the page's own `Canvas`, so the\n// chosen container is `Highlight` with its label in `HighlightText` — the\n// pair the mode gives whatever is chosen — and a disabled chosen one keeps\n// a `GrayText` ring rather than a fill, which leaves its `GrayText` label\n// readable.\n//\n// Every segment that could ever draw that slot keeps room for it whether\n// or not it is drawing one. Sized by what it drew, the slot made the widest\n// segment whichever one was chosen, and the whole track changed width with\n// the choice — moving every label, and moving the ground under the chosen\n// container while it was sliding across it. The mechanism is Angular\n// Material's button toggle: the slot opens from 0 to 18dp and the space it\n// lands in opens beside it, both over `durationShort2`. Here that space is\n// two spacers either side of the label, which trade it between them: half\n// on each side while nothing is drawn, so a bare label stays centred, and\n// all of it on the leading side, where the slot sits, once something is.\n// Their total never changes, so neither does the segment's width. Angular\n// Material has no case of the first kind, since its toggles are sized by\n// their own content rather than by the widest of them.\n//\n// That room gives way before the label does. A track with room to spare is\n// the widest label plus 26dp per segment, which is what the widest column\n// already measured while its own segment was the chosen one. A track\n// squeezed below that — long labels on a phone — gives the reserve back\n// first, then the 4dp of the page's 12dp padding beyond the 8dp a segment\n// always keeps, and only then cuts a label short, with an ellipsis and a\n// `title` that shows it whole. A segment drawing a glyph keeps the glyph and\n// its 8dp gap, so the chosen label is the first to be cut. A label shows\n// whole in a segment 16dp wider than it, or 42dp while a glyph is drawn\n// beside it, plus the segment's rule. The track's width still never depends\n// on the choice: squeezed, its columns are the container's, shared equally.\n//\n// Angular Material delays the check's own transition by 45ms so the space\n// opens before the glyph arrives. That is dropped rather than carried as a\n// literal: there is no motion token for it, and the slot here opens from its\n// centre rather than its leading edge, so the check and the label never\n// cross even when the two run together.\n//\n// **The chosen container is an element of its own, and it moves.** It is\n// React Aria's `SelectionIndicator`, a shared element rendered inside every\n// segment and drawn in the chosen one: on a change it keeps the old one\n// until it has finished moving, so two exist while it slides. No\n// `SharedElementTransition` is rendered here, because `ToggleButtonGroup`\n// wraps its children in one already — worth saying, since the primitive\n// throws outside a scope wherever else it is used.\n//\n// It is the page's chosen container rather than a smaller pill: it covers\n// the segment, which is the box a background painted, so the fill is all\n// that travels. Three things follow. It is drawn behind the segments rather\n// than inside one, or a container crossing a neighbour would pass over that\n// neighbour's label and the rule beside it. Its corners have to match\n// whichever segment it is in, which the segment hands down as a custom\n// property, because a child cannot read its own parent's place in the track.\n// And the state layers move onto a layer of their own above it, since a\n// container that slides away would otherwise take the hover with it and off\n// the segment under the pointer.\n//\n// **Choosing several animates differently, rather than the same way twice.**\n// A shared element is one element: it can move between segments, but with\n// several chosen there is no single segment for it to be at. So\n// `selectionMode=\"multiple\"` names only `opacity` in the transition, nothing\n// positional is snapshotted, and each container fades in and out where it\n// is; `single` names `translate` and `border-radius` as well, and the one\n// container travels between segments.\n//\n// **Two of the page's values are the library's instead**, both for\n// consistency with the controls beside them: the focus ring, which is\n// primary at 2dp offset 2dp everywhere here rather than the page's secondary\n// at 3dp, and the press, which is the library's ripple rather than a flat\n// state layer. The page names a ripple as the pressed state, so the second\n// is a departure only in how it is drawn.\n//\n// **The density steps are not drawn.** The page removes 4dp of height per\n// step down, for denser interfaces; nothing else in the library takes a\n// density, and one component that did would be the odd one out. A shorter\n// track is a `className` away.\n//\n// Vertical is React Aria's and is not passed through, since the page draws\n// one row and a column of joined segments is a different shape — the outer\n// corners, the shared rule and the equal columns would all have to mean\n// something else.\n\n// Whether a chosen segment draws the check. A context rather than a prop on\n// each segment, since it is the set's decision and repeating it on every\n// segment is how the two drift.\nconst ShowSelectedIconContext = createContext(true);\n\n// Which of the two animations the chosen container plays. Read from a\n// context for the same reason, and because React Aria's own state context\n// holds the mode in a shape this would have to narrow before using.\nconst SelectionModeContext = createContext<SelectionMode>('single');\ntype GroupRender = RACToggleButtonGroupProps['render'];\ntype Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\n\n// A segment's key, back from the attribute `SegmentedButtonSegment` writes\n// it into. JSON rather than the key as written, so a numeric key comes back\n// a number and matches the one React Aria's selection holds.\nfunction keyOf(segment: HTMLElement): Key | null {\n  const written = segment.dataset.key;\n  if (written === undefined) {\n    return null;\n  }\n  const key: unknown = JSON.parse(written);\n  return typeof key === 'string' || typeof key === 'number' ? key : null;\n}\n\n// The group's element, with `radioKeys` in place of React Aria's keyboard\n// handler, then handed to the call site's own `render` if it passed one.\nfunction radioGroupRenderer(render: GroupRender): NonNullable<GroupRender> {\n  return (domProps, renderProps) => {\n    const merged = {\n      ...domProps,\n      onKeyDownCapture: radioKeys(renderProps.state, domProps.onKeyDownCapture)\n    };\n    return render === undefined ? createElement('div', merged) : render(merged, renderProps);\n  };\n}\n\n// The radio group's keys, taken ahead of React Aria's toolbar ones on the\n// same capture listener: the arrows, Home and End move focus to a segment\n// and choose it, wrapping at the ends and passing over a disabled segment,\n// which is what the toolbar's own handler would otherwise do with focus\n// alone. Everything else — Tab, and an arrow held with a modifier the\n// browser may want — is handed to the toolbar as before.\nfunction radioKeys(state: ToggleGroupState, toolbar: KeyboardEventHandler<HTMLDivElement> | undefined): KeyboardEventHandler<HTMLDivElement> {\n  return event => {\n    const group = event.currentTarget;\n    const segments = [...group.querySelectorAll<HTMLElement>('[data-key]:not([data-disabled])')].filter(segment => segment.closest('[role=\"radiogroup\"]') === group);\n    const from = segments.findIndex(segment => segment === event.target);\n    const step = event.altKey || event.ctrlKey || event.metaKey ? null : stepOf(event.key, getComputedStyle(group).direction === 'rtl');\n    if (from === -1 || step === null) {\n      toolbar?.(event);\n      return;\n    }\n    event.preventDefault();\n    event.stopPropagation();\n    const to = step === 'first' ? 0 : step === 'last' ? segments.length - 1 : (from + step + segments.length) % segments.length;\n    const segment = segments[to];\n    const key = keyOf(segment);\n    if (key === null) {\n      return;\n    }\n    segment.focus();\n    state.setSelected(key, true);\n  };\n}\n\n// Where a key moves the choice in a radio group: one segment on, one back,\n// or to either end. Right and left follow the direction the track is drawn\n// in, read off the track itself rather than the locale, so a `dir` on a\n// wrapper turns them over as it turns the track over; up and down, and Home\n// and End, follow the document order whatever the direction.\nfunction stepOf(key: string, rtl: boolean): -1 | 1 | 'first' | 'last' | null {\n  switch (key) {\n    case 'ArrowDown':\n      {\n        return 1;\n      }\n    case 'ArrowLeft':\n      {\n        return rtl ? 1 : -1;\n      }\n    case 'ArrowRight':\n      {\n        return rtl ? -1 : 1;\n      }\n    case 'ArrowUp':\n      {\n        return -1;\n      }\n    case 'End':\n      {\n        return 'last';\n      }\n    case 'Home':\n      {\n        return 'first';\n      }\n    default:\n      {\n        return null;\n      }\n  }\n}\n\n// The page's 18dp icon slot, and the room a segment keeps for it: the slot\n// plus the gap between it and the label. Half of that room sits on each side\n// of the label while nothing is drawn, which is what keeps a bare label\n// centred; see `labelReserved`.\nconst GLYPH_SIZE = '18px';\nconst GLYPH_RESERVE = `calc(${GLYPH_SIZE} + ${spacing.sm})`;\nconst GLYPH_RESERVE_HALF = `calc((${GLYPH_SIZE} + ${spacing.sm}) / 2)`;\n\n// The part of the page's 12dp padding a segment gives back on a narrow\n// track: the padding is 8dp, and the rest sits in the spacers, which shrink.\nconst PADDING_GIVE = `calc(${spacing.md} - ${spacing.sm})`;\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  segment: {\n    \"--segment-indicator-radius-end\": \"x32u3vw x111hk5a\",\n    \"--segment-indicator-radius-start\": \"xatjrgw x1syycwj\",\n    kgeoSG: \"x1cpjm7i\",\n    kGOzcv: \"x17kqlg\",\n    kpsdNU: \"xm4btww\",\n    kEoFBp: \"x1hmns74\",\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1rv7mn0\",\n    kVAM5u: \"x1fwvt7v\",\n    kT0f0o: \"x1fougng xkducg2\",\n    kVL7Gh: \"x1prwiuu x1uwupfv\",\n    k2ei4v: \"x120dh57 x14e42zd\",\n    kfmiAY: \"x17hb1p4 x1a37zkv\",\n    krdFHd: \"xwfph4i xb01x1j\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xmkeg23\",\n    kB7OPa: \"x9f619\",\n    kkrTdU: \"x1ypdohk\",\n    k1xSpc: \"x3nfvp2\",\n    kMv6JI: \"xkknnkr\",\n    kGuDYH: \"x14zspaw\",\n    k63SB2: \"x1v9cpvo\",\n    kjj79g: \"xl56j7k\",\n    kb6lSQ: \"x155f00i\",\n    kLWn49: \"x1lz68p4\",\n    k7Eaqz: \"xeuugli\",\n    k8WAf4: \"xt970qd\",\n    kg3NbH: \"xn60lsn\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xt3l3uh\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  segmentDisabled: {\n    kVAM5u: \"xrh88j3\",\n    kMwMTN: \"x1xj74d8 x1bhcspo\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  segmentSelected: {\n    kMwMTN: \"x1sawysd x1k5gbb1\",\n    $$css: true\n  },\n  segmentSelectedUnmarked: {\n    kMwMTN: \"x1lba3jz x1k5gbb1\",\n    $$css: true\n  },\n  segmentUnselected: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  },\n  spacer: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kmuXW: \"xs83m0k\",\n    kzqmXN: \"xbraz1g\",\n    kjj79g: \"x13a6bvl\",\n    k7Eaqz: \"xeuugli\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x1pha8k4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  spacerHalf: {\n    kzqmXN: \"x154zo0h\",\n    $$css: true\n  },\n  spacerHolding: {\n    kzqmXN: \"x1n85vuq\",\n    k7Eaqz: \"x36sgg7\",\n    $$css: true\n  },\n  spacerIcon: {\n    kzqmXN: \"x1iuy3mw\",\n    k7Eaqz: \"x16xo4sp\",\n    $$css: true\n  }\n};\ntype SegmentedButtonProps = LabelledByAttribute & Omit<RACToggleButtonGroupProps, 'className' | 'orientation' | 'style'> & {\n  /** A function may compute the class from the set's render state. */\n  className?: RACToggleButtonGroupProps['className'];\n  /**\n   * Whether the chosen segment stays chosen when it is pressed again. On\n   * by default while one is chosen, since a radio group always holds a\n   * choice; `false` lets a press clear it, as React Aria's own default\n   * does. Off by default while several may be, where any of them can be\n   * turned off.\n   * @default true while one is chosen, false while several may be\n   */\n  disallowEmptySelection?: boolean;\n  /**\n   * Whether a chosen segment draws a check before its label, as the page\n   * has it. `false` leaves the segment's own icon in place while selected,\n   * and draws the chosen segment on the stronger secondary container, since\n   * the page's own is too faint to say which is chosen by itself.\n   * @default true\n   */\n  showSelectedIcon?: boolean;\n  /** A function may compute the style from the set's render state. */\n  style?: RACToggleButtonGroupProps['style'];\n};\ntype SegmentedButtonSegmentProps = Omit<RACToggleButtonProps, 'children' | 'className' | 'style'> & {\n  /** The segment's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the segment's render state. */\n  className?: RACToggleButtonProps['className'];\n  /**\n   * Disables the press ripple. The hover and pressed state layers are\n   * unaffected.\n   * @default false\n   */\n  disableRipple?: boolean;\n  /**\n   * An icon before the label, in the page's 18dp size. Replaced by the check\n   * while the segment is chosen, unless the set turns that off. An icon drawn\n   * in `em` takes that size from the slot.\n   *\n   * Given with no label, the icon is the segment, centred in it and kept\n   * while chosen; name the segment with `aria-label` then.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the segment's render state. */\n  style?: RACToggleButtonProps['style'];\n};\n\n/**\n * What the glyph slot draws: the check on a chosen segment, or the segment's\n * own icon. `null` for a segment with neither, which leaves the slot empty\n * and closed rather than unrendered. Returns a node rather than letting the\n * type be inferred, since `ReactNode` is a union that includes a promise and\n * an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, marked: boolean): ReactNode {\n  if (state.isSelected && marked) {\n    return <CheckGlyph className=\"x5yr21d x2lah0s x1xp8n7a\" />;\n  }\n  return icon ?? null;\n}\n\n// Whether a segment has a label, rather than an icon alone. An empty string\n// and a `false` from a condition at the call site are no label either.\nfunction hasLabel(children: ReactNode) {\n  return children !== undefined && children !== null && children !== false && children !== '';\n}\n\n// The chosen container's class, from the segment's own state and the shared\n// element's. A function, because React Aria hands the indicator the entering\n// and leaving states the fade is drawn from, and those are the only two the\n// element knows about itself.\nfunction indicatorClassName(isDisabled: boolean, selectionMode: SelectionMode, marked: boolean): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    8: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    4: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4\"\n    },\n    12: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    10: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    14: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1\"\n    },\n    1: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    9: {\n      className: \"x15dekr4 x1jzqe4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    5: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd x167r6xl x1jzqe4 xg01cxk\"\n    },\n    13: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 x167r6xl x1jzqe4 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    11: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    },\n    15: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg x9yvj25 xmnqt3w xx61lck x2h6xq1 xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 3 | !!!marked << 2 | !!isDisabled << 1 | !!(state.isEntering || state.isExiting) << 0].className ?? '';\n}\n\n// What a segment 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 segmentContent(children: ReactNode, icon: ReactNode, ripple: Ripple, selectionMode: SelectionMode, marked: boolean, labelRef: (element: HTMLSpanElement | null) => void, labelTitle: string | undefined) {\n  const labelled = hasLabel(children);\n  // Whether this segment can ever draw a glyph, and so whether it keeps room\n  // for one. A set that draws no check and a segment with no icon of its own\n  // never needs the slot, and reserving it there would be dead space in\n  // every segment of the track.\n  const reserves = marked || icon !== undefined;\n  return (state: ToggleButtonRenderProps) => {\n    const glyph = glyphFor(state, icon, marked);\n    const drawn = glyph !== null;\n    return <>\n        <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode, marked)} />\n        <span {...{\n        0: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n        },\n        4: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n        },\n        2: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        6: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n        },\n        1: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        5: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        3: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        },\n        7: {\n          className: \"x12w9bfk xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n        }\n      }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n        <span {...stylex.props(styles.spacer, reserves && (drawn ? labelled ? styles.spacerHolding : styles.spacerIcon : styles.spacerHalf))}>\n          {reserves && <span {...{\n          0: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7\"\n          },\n          2: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a\"\n          },\n          1: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xnalus7 xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1nsf9p3\"\n          },\n          3: {\n            className: \"x12w9bfk x6s0dn4 xmix8c7 x9f619 x3nfvp2 x2lah0s xosj86m xl56j7k xb3r6kr x47corl x1qno0dh x1gcwfje xpc4ca7 x1xp8n7a x1nsf9p3\"\n          }\n        }[!!drawn << 1 | !!(drawn && labelled) << 0]}>\n              {glyph}\n            </span>}\n        </span>\n        {labelled && <span ref={labelRef} title={labelTitle} {...{\n        0: {\n          className: \"x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft\"\n        },\n        2: {\n          className: \"x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8\"\n        },\n        1: {\n          className: \"x12w9bfk x2lah0s x193iq5w xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1g12otp\"\n        },\n        3: {\n          className: \"x12w9bfk x2lah0s xeuugli xb3r6kr xlyipyv x1qno0dh xrtqwew xpc4ca7 xuxw1ft x1tpxo8 x1g12otp\"\n        }\n      }[!!drawn << 1 | !!(state.isSelected && !state.isDisabled) << 0]}>\n            {children}\n          </span>}\n        <span {...{\n        0: {\n          className: \"x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k xbraz1g x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7\"\n        },\n        1: {\n          className: \"x12w9bfk x6s0dn4 x9f619 x78zum5 xs83m0k x13a6bvl xeuugli x1qno0dh x1pha8k4 xpc4ca7 x154zo0h\"\n        }\n      }[!!(reserves && !drawn) << 0]} />\n        {ripple.surface}\n      </>;\n  };\n}\n\n/**\n * A row of two to five joined segments, of which one — or with\n * `selectionMode=\"multiple\"`, several — is chosen. Selection is React Aria's:\n * pass `selectedKeys` with `onSelectionChange` to control it, or\n * `defaultSelectedKeys` to let it keep its own. Give every segment an `id`,\n * which is the key selection is reported by.\n *\n * ```tsx\n * <SegmentedButton aria-label=\"Label\" defaultSelectedKeys={['first']}>\n *   <SegmentedButton.Segment id=\"first\">First item</SegmentedButton.Segment>\n *   <SegmentedButton.Segment id=\"second\">Second item</SegmentedButton.Segment>\n * </SegmentedButton>\n * ```\n *\n * Name the set with `aria-label` or `aria-labelledby`, one of which the\n * props require — nothing here labels it for you, and a set with no name is\n * a group a screen reader cannot announce. What it is announced as follows the selection mode: choosing one\n * is a radio group, choosing several a toolbar of two-state buttons. So does\n * how the chosen container moves: it slides between segments while one is\n * chosen, and fades in place while several may be.\n *\n * Choosing one behaves as a radio group too, which React Aria's\n * `ToggleButtonGroup` does not. The chosen segment stays chosen when it is\n * pressed again, unless `disallowEmptySelection` is `false`. The arrow keys\n * move to a segment and choose it, wrapping at either end, and Home and End\n * choose the first and last. Choosing several keeps React Aria's keys: the\n * arrows move between segments, and Space or Enter toggles the focused one.\n *\n * The call site's `className` and `style` land on the track, which is the\n * element a layout positions.\n */\nfunction SegmentedButton({\n  disallowEmptySelection,\n  render,\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: RefAttributes<HTMLDivElement> & SegmentedButtonProps) {\n  const single = selectionMode === 'single';\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} disallowEmptySelection={disallowEmptySelection ?? single} render={single ? radioGroupRenderer(render) : render} selectionMode={selectionMode} {...mergeStatefulStyles({\n        className: \"x9f619 xwz0xwf xu6a5m6 x1mt1orb xc8icb0\"\n      }, props)} />\n      </SelectionModeContext>\n    </ShowSelectedIconContext>;\n}\n\n/**\n * One segment. Its `id` is what selection is reported by, and its label is\n * what names it. A chosen segment draws a check before the label; an\n * unchosen one draws whatever `icon` holds, if anything.\n */\nfunction SegmentedButtonSegment({\n  children,\n  disableRipple = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  ...props\n}: RefAttributes<HTMLButtonElement> & SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  // Whether this segment draws the check when chosen: the set's choice,\n  // unless the segment has no label — see the header.\n  const marked = useContext(ShowSelectedIconContext) && hasLabel(children);\n  const [label, setLabel] = useState<HTMLSpanElement | null>(null);\n  const labelTitle = useTruncatedText(label);\n  // The `aria-*` props React Aria would drop and the keyboard handlers it\n  // would wrap go on the element itself, as they do on Chip, Button and\n  // IconButton; see src/render/aria.tsx.\n  const element = {\n    aria: ariaAttributesOf(props),\n    onKeyDown,\n    onKeyUp\n  };\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation. A disabled set disables\n  // its segments through React Aria's group state rather than their props,\n  // so the group is read as well.\n  const disabledByGroup = useToggleGroupDisabled(props.id);\n  // The call site's pointer handlers go through the ripple, which calls\n  // them after its own. Spread beside the ripple's, one of the two sets\n  // would write over the other.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true && !disabledByGroup, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  });\n  return <RACToggleButton\n  // The key the radio group's arrow keys choose this segment by; see\n  // `radioKeys`. React Aria keeps a segment's key off its element.\n  data-key={selectionMode === 'single' && props.id !== undefined ? JSON.stringify(props.id) : undefined} render={toggleButtonRenderer(element, render)} {...ripple.handlers} {...props} {...mergeStatefulStyles(segmentStyles(marked), props)}>\n      {segmentContent(children, icon, ripple, selectionMode, marked, setLabel, labelTitle)}\n    </RACToggleButton>;\n}\n\n// StyleX cannot target `[data-selected]` on the element it is styling, so a\n// segment's state comes from the render state React Aria hands its\n// className. `disabled` is applied last so its label colour wins over both\n// of the others. Built by a call, since a set that draws no check labels its\n// chosen segment for the container it draws instead.\nfunction segmentStyles(marked: boolean) {\n  return (state: ToggleButtonRenderProps) => stylex.props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isSelected && !marked && styles.segmentSelectedUnmarked, state.isDisabled && styles.segmentDisabled);\n}\n\n// The text of a label its segment is cutting short, for a `title` that shows\n// it whole; undefined while it fits. Measured again whenever the label's box\n// or its text changes, which is when it can start or stop being cut.\nfunction useTruncatedText(label: HTMLElement | null): string | undefined {\n  const [text, setText] = useState<string | undefined>(undefined);\n  useLayoutEffect(() => {\n    if (label === null) {\n      return undefined;\n    }\n    const measure = () => {\n      const cut = label.scrollWidth > label.clientWidth;\n      setText(cut && label.textContent !== '' ? label.textContent : undefined);\n    };\n    measure();\n    const resize = new ResizeObserver(measure);\n    resize.observe(label);\n    const relabel = new MutationObserver(measure);\n    relabel.observe(label, {\n      characterData: true,\n      childList: true,\n      subtree: true\n    });\n    return () => {\n      resize.disconnect();\n      relabel.disconnect();\n    };\n  }, [label]);\n  return text;\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport { SegmentedButtonSegment };\nexport default SegmentedButton;"],"mappings":"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"}

package/dist/components/separator/index.js

@@ -34,14 +34,14 @@ const styles = {
 const insets = {
 	horizontal: {
 		both: {
-			kzqmXN: "x14atkfc",
+			kzqmXN: "x1n0idw",
 			k71WvV: "xdf1gh2",
 			keTefX: "x1m7rnnc",
 			$$css: true
 		},
 		none: { $$css: true },
 		start: {
-			kzqmXN: "x14atkfc",
+			kzqmXN: "x1u7osep",
 			keTefX: "x1m7rnnc",
 			$$css: true
 		}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","RefAttributes","SeparatorProps","RACSeparatorProps","stylex","Separator","RACSeparator","SeparatorContext","useSlottedContext","mergeStyles","colors","spacing","FORCED_COLORS","styles","base","kWkggS","kMzoRj","kB7OPa","kmuXW","kogj98","$$css","horizontal","kZKoxP","kLZC3w","kPef9Z","kEafiO","kzqmXN","vertical","kSGwAc","kGJrpR","kVhnKS","k2ei4v","horizontalInsets","both","k71WvV","keTefX","none","start","verticalInsets","k1K539","keoZOQ","insets","SeparatorInset","Omit","inset","orientation","t0","$","t1","props","undefined","context","slot","resolved","T0","t2","t3","Separator","_c","props","RACSeparator","stylex.props"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["'use client';\n\nimport type { RefAttributes } from 'react';\nimport type { SeparatorProps as RACSeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Separator as RACSeparator, SeparatorContext, useSlottedContext } from 'react-aria-components';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } from '../../tokens/design.tokens.stylex';\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// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n// The horizontal element is an <hr>, which arrives with a border and a\n// margin of its own; both are zeroed here so it is the same 1px box a <div>\n// would be.\n//\n// Vertical has no length of its own. `alignSelf: stretch` takes it from the\n// flex or grid parent, since a divider between two rows should match\n// whatever they turn out to be rather than being told a height at the call\n// site. In a plain block parent there is nothing to stretch to and it will\n// have no height — that is the documented cost of the prop.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The\n// page names them \"inset\" and \"middle-inset\"; the prop says `start` and\n// `both` instead, since `inset=\"inset\"` reads as nothing at all and the two\n// words say which ends move.\n//\n// The inset is drawn as a margin on the logical axis the rule runs along, so\n// it follows the writing mode and works for a vertical rule as well — the\n// page only draws horizontal ones, but a shortened vertical rule between two\n// columns is the same idea and would otherwise have to be written at the\n// call site. An inset rule also drops its `100%` length: a margin sits\n// outside the box, so a full-width rule with one would overflow its parent\n// by exactly the inset.\n//\n// The orientation is resolved rather than defaulted eagerly, so a container\n// that sets one through React Aria's separator context reaches it. Toolbar\n// is what needs that: a rule between two controls in a row is vertical, and\n// a `Separator` written inside one should not have to say so. React Aria's\n// own `Toolbar` sets no such context — it puts the orientation on itself and\n// nothing else — so ours provides it, and this is the half that reads it.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kLZC3w: \"x19dwuzr\",\n    kPef9Z: \"x4z998w\",\n    kEafiO: \"x1lym3mf\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kGJrpR: \"xjslfuv\",\n    kVhnKS: \"x1gbqego\",\n    k2ei4v: \"xjg5lhu\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\n\n// The page's 16dp, on whichever axis the rule runs along. `auto` replaces the\n// `100%` a full-width rule takes, since a margin outside a 100% box overflows\n// the parent by the inset.\nconst horizontalInsets = {\n  both: {\n    kzqmXN: \"x14atkfc\",\n    k71WvV: \"xdf1gh2\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    kzqmXN: \"x14atkfc\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  }\n};\n\n// A vertical rule takes its length from the parent through `alignSelf`, so\n// the margin shortens it from the end it is on rather than moving it.\nconst verticalInsets = {\n  both: {\n    k1K539: \"xxkrg4w\",\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  }\n};\nconst insets = {\n  horizontal: horizontalInsets,\n  vertical: verticalInsets\n};\ntype SeparatorInset = 'both' | 'none' | 'start';\ntype SeparatorProps = Omit<RACSeparatorProps, 'orientation'> & {\n  /**\n   * How far the rule is held off the edges it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both`\n   * holds it off each end, which is its middle-inset one. The inset follows\n   * the writing mode rather than a fixed side.\n   * @default 'none'\n   */\n  inset?: SeparatorInset;\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent and has none of its own. Defaults to whatever the\n   * container asks for — a `Toolbar` asks for the rule across its own\n   * direction — and to horizontal outside one.\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A 1px rule between items. The orientation drives the accessibility tree as\n * well as which side the rule is drawn on: horizontal renders an `<hr>`,\n * whose role and orientation are implicit, and vertical a `<div>` given the\n * separator role and `aria-orientation=\"vertical\"`.\n *\n * `inset` holds the rule off the ends it runs between — `start` off the\n * leading one, `both` off each — which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * React Aria's rather than a styled element of the library's own, so a\n * `Menu` or `Toolbar` around it reaches it through context — a separator\n * between menu items is part of the collection, and one in a toolbar takes\n * the rule across the toolbar's own direction. `elementType` picks a\n * different element, and `render` is React Aria's function form.\n */\nfunction Separator({\n  inset = 'none',\n  orientation,\n  ...props\n}: RefAttributes<HTMLElement> & SeparatorProps) {\n  const context = useSlottedContext(SeparatorContext, props.slot);\n  const resolved = orientation ?? context?.orientation ?? 'horizontal';\n  return <RACSeparator orientation={resolved} {...props} {...mergeStyles(stylex.props(styles.base, styles[resolved], insets[resolved][inset]), props)} />;\n}\nexport type { SeparatorInset, SeparatorProps };\nexport default Separator;"],"mappings":";;;;;;;AAsDA,MAAMc,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRN,OAAO;CACT;AACF;AAsCA,MAAMqB,SAAS;CACbpB,YAAYW;EAjCZC,MAAM;GACJP,QAAQ;GACRQ,QAAQ;GACRC,QAAQ;GACRf,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLX,QAAQ;GACRS,QAAQ;GACRf,OAAO;EACT;CAoBYY;CACZL,UAAUW;EAfVL,MAAM;GACJM,QAAQ;GACRC,QAAQ;GACRpB,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLG,QAAQ;GACRpB,OAAO;EACT;CAIUkB;AACZ;;;;;;;;;;;;;;;;;AAoCA,SAAAjC,YAAAyC,IAAA;CAAA,MAAAC,IAAA/C,EAAA,CAAA;CAAmB,MAAA,EAAA4C,OAAAI,IAAAH,aAAA,GAAAI,YAAAH;CACjB,MAAAF,QAAAI,OAAAE,KAAAA,IAAA,SAAAF;CAIA,MAAAG,UAAgB3C,kBAAkBD,kBAAkB0C,QAAKG,IAAK;CAC9D,MAAAC,WAAiBR,eAAeM,SAAON,eAAtB;CACT,MAAAS,KAAAhD;CAAmD,MAAAiD,KAAA9C,YAAYL,MAAaS,OAAMC,MAAOD,OAAOwC,WAAWZ,OAAOY,SAAS,CAACT,MAAM,GAAGK,OAAK;CAAC,IAAAO;CAAA,IAAAT,EAAA,OAAAO,MAAAP,EAAA,OAAAE,WAAAF,EAAA,OAAAM,YAAAN,EAAA,OAAAQ,IAAA;EAA5IC,KAAA,oBAAC,IAAD;GAA2BH,aAAAA;GAAQ,GAAMJ;GAAK,GAAMM;EAAwF,CAAA;EAAIR,EAAA,KAAAO;EAAAP,EAAA,KAAAE;EAAAF,EAAA,KAAAM;EAAAN,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAAhJS;AAAgJ"}
+{"version":3,"file":"index.js","names":["c","_c","RefAttributes","SeparatorProps","RACSeparatorProps","stylex","Separator","RACSeparator","SeparatorContext","useSlottedContext","mergeStyles","colors","spacing","FORCED_COLORS","styles","base","kWkggS","kMzoRj","kB7OPa","kmuXW","kogj98","$$css","horizontal","kZKoxP","kLZC3w","kPef9Z","kEafiO","kzqmXN","vertical","kSGwAc","kGJrpR","kVhnKS","k2ei4v","horizontalInsets","both","k71WvV","keTefX","none","start","verticalInsets","k1K539","keoZOQ","insets","SeparatorInset","Omit","inset","orientation","t0","$","t1","props","undefined","context","slot","resolved","T0","t2","t3","Separator","_c","props","RACSeparator","stylex.props"],"sources":["../../../src/components/separator/index.tsx"],"sourcesContent":["'use client';\n\nimport type { RefAttributes } from 'react';\nimport type { SeparatorProps as RACSeparatorProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { Separator as RACSeparator, SeparatorContext, useSlottedContext } from 'react-aria-components';\nimport { mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, spacing } from '../../tokens/design.tokens.stylex';\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// A divider is the same colour as a border, so it draws from outlineVariant\n// rather than a role of its own — the design system treats the two as one\n// decision, and a separator that drifted from the borders around it would\n// read as a mistake.\n//\n// Drawn as a background on a 1px box rather than as a border, so the rule is\n// the element itself. A border would leave the element's own box at zero\n// size, which makes it invisible to flex `gap` and to anything measuring it.\n// The horizontal element is an <hr>, which arrives with a border and a\n// margin of its own; both are zeroed here so it is the same 1px box a <div>\n// would be.\n//\n// Vertical has no length of its own. `alignSelf: stretch` takes it from the\n// flex or grid parent, since a divider between two rows should match\n// whatever they turn out to be rather than being told a height at the call\n// site. In a plain block parent there is nothing to stretch to and it will\n// have no height — that is the documented cost of the prop.\n//\n// The divider page gives three forms and this draws all three: full width,\n// inset by 16dp at the leading end, and middle-inset by 16dp at both. The\n// page names them \"inset\" and \"middle-inset\"; the prop says `start` and\n// `both` instead, since `inset=\"inset\"` reads as nothing at all and the two\n// words say which ends move.\n//\n// The inset is drawn as a margin on the logical axis the rule runs along, so\n// it follows the writing mode and works for a vertical rule as well — the\n// page only draws horizontal ones, but a shortened vertical rule between two\n// columns is the same idea and would otherwise have to be written at the\n// call site. An inset rule's length is `100%` less its margins: a margin\n// sits outside the box, so a full-width rule with one would overflow its\n// parent by exactly the inset, and `auto` in its place gives an empty `<hr>`\n// a width only where the parent stretches it — in a flex row, or a parent\n// centring its children, the rule came out 0 wide and vanished.\n//\n// The orientation is resolved rather than defaulted eagerly, so a container\n// that sets one through React Aria's separator context reaches it. Toolbar\n// is what needs that: a rule between two controls in a row is vertical, and\n// a `Separator` written inside one should not have to say so. React Aria's\n// own `Toolbar` sets no such context — it puts the orientation on itself and\n// nothing else — so ours provides it, and this is the half that reads it.\nconst styles = {\n  base: {\n    kWkggS: \"x1l12bh\",\n    kMzoRj: \"xc342km\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kogj98: \"x1ghz6dp\",\n    $$css: true\n  },\n  horizontal: {\n    kZKoxP: \"xjm9jq1\",\n    kLZC3w: \"x19dwuzr\",\n    kPef9Z: \"x4z998w\",\n    kEafiO: \"x1lym3mf\",\n    kzqmXN: \"xh8yej3\",\n    $$css: true\n  },\n  vertical: {\n    kSGwAc: \"xkh2ocl\",\n    kGJrpR: \"xjslfuv\",\n    kVhnKS: \"x1gbqego\",\n    k2ei4v: \"xjg5lhu\",\n    kzqmXN: \"x1i1rx1s\",\n    $$css: true\n  }\n};\n\n// The page's 16dp, on whichever axis the rule runs along. The length is the\n// full-width rule's `100%` less the margins, which keeps the rule inside its\n// parent — a margin outside a 100% box overflows by the inset — and still\n// gives it a width in every layout, where `auto` gives an `<hr>` with no\n// content one only in a parent that stretches it.\nconst horizontalInsets = {\n  both: {\n    kzqmXN: \"x1n0idw\",\n    k71WvV: \"xdf1gh2\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    kzqmXN: \"x1u7osep\",\n    keTefX: \"x1m7rnnc\",\n    $$css: true\n  }\n};\n\n// A vertical rule takes its length from the parent through `alignSelf`, so\n// the margin shortens it from the end it is on rather than moving it.\nconst verticalInsets = {\n  both: {\n    k1K539: \"xxkrg4w\",\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  },\n  none: {\n    $$css: true\n  },\n  start: {\n    keoZOQ: \"xwf6w2j\",\n    $$css: true\n  }\n};\nconst insets = {\n  horizontal: horizontalInsets,\n  vertical: verticalInsets\n};\ntype SeparatorInset = 'both' | 'none' | 'start';\ntype SeparatorProps = Omit<RACSeparatorProps, 'orientation'> & {\n  /**\n   * How far the rule is held off the edges it runs between. `start` holds it\n   * 16dp off the leading end, which is the page's inset divider; `both`\n   * holds it off each end, which is its middle-inset one. The inset follows\n   * the writing mode rather than a fixed side.\n   * @default 'none'\n   */\n  inset?: SeparatorInset;\n  /**\n   * Which way the rule runs. A vertical separator takes its length from a\n   * flex or grid parent and has none of its own. Defaults to whatever the\n   * container asks for — a `Toolbar` asks for the rule across its own\n   * direction — and to horizontal outside one.\n   */\n  orientation?: 'horizontal' | 'vertical';\n};\n\n/**\n * A 1px rule between items. The orientation drives the accessibility tree as\n * well as which side the rule is drawn on: horizontal renders an `<hr>`,\n * whose role and orientation are implicit, and vertical a `<div>` given the\n * separator role and `aria-orientation=\"vertical\"`.\n *\n * `inset` holds the rule off the ends it runs between — `start` off the\n * leading one, `both` off each — which is what a rule between list rows\n * takes so it lines up with their text rather than the container's edge.\n *\n * React Aria's rather than a styled element of the library's own, so a\n * `Menu` or `Toolbar` around it reaches it through context — a separator\n * between menu items is part of the collection, and one in a toolbar takes\n * the rule across the toolbar's own direction. `elementType` picks a\n * different element, and `render` is React Aria's function form.\n */\nfunction Separator({\n  inset = 'none',\n  orientation,\n  ...props\n}: RefAttributes<HTMLElement> & SeparatorProps) {\n  const context = useSlottedContext(SeparatorContext, props.slot);\n  const resolved = orientation ?? context?.orientation ?? 'horizontal';\n  return <RACSeparator orientation={resolved} {...props} {...mergeStyles(stylex.props(styles.base, styles[resolved], insets[resolved][inset]), props)} />;\n}\nexport type { SeparatorInset, SeparatorProps };\nexport default Separator;"],"mappings":";;;;;;;AAwDA,MAAMc,SAAS;CACbC,MAAM;EACJC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,OAAO;EACPC,QAAQ;EACRC,OAAO;CACT;CACAC,YAAY;EACVC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRN,OAAO;CACT;CACAO,UAAU;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRC,QAAQ;EACRL,QAAQ;EACRN,OAAO;CACT;AACF;AAwCA,MAAMqB,SAAS;CACbpB,YAAYW;EAjCZC,MAAM;GACJP,QAAQ;GACRQ,QAAQ;GACRC,QAAQ;GACRf,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLX,QAAQ;GACRS,QAAQ;GACRf,OAAO;EACT;CAoBYY;CACZL,UAAUW;EAfVL,MAAM;GACJM,QAAQ;GACRC,QAAQ;GACRpB,OAAO;EACT;EACAgB,MAAM,EACJhB,OAAO,KACT;EACAiB,OAAO;GACLG,QAAQ;GACRpB,OAAO;EACT;CAIUkB;AACZ;;;;;;;;;;;;;;;;;AAoCA,SAAAjC,YAAAyC,IAAA;CAAA,MAAAC,IAAA/C,EAAA,CAAA;CAAmB,MAAA,EAAA4C,OAAAI,IAAAH,aAAA,GAAAI,YAAAH;CACjB,MAAAF,QAAAI,OAAAE,KAAAA,IAAA,SAAAF;CAIA,MAAAG,UAAgB3C,kBAAkBD,kBAAkB0C,QAAKG,IAAK;CAC9D,MAAAC,WAAiBR,eAAeM,SAAON,eAAtB;CACT,MAAAS,KAAAhD;CAAmD,MAAAiD,KAAA9C,YAAYL,MAAaS,OAAMC,MAAOD,OAAOwC,WAAWZ,OAAOY,SAAS,CAACT,MAAM,GAAGK,OAAK;CAAC,IAAAO;CAAA,IAAAT,EAAA,OAAAO,MAAAP,EAAA,OAAAE,WAAAF,EAAA,OAAAM,YAAAN,EAAA,OAAAQ,IAAA;EAA5IC,KAAA,oBAAC,IAAD;GAA2BH,aAAAA;GAAQ,GAAMJ;GAAK,GAAMM;EAAwF,CAAA;EAAIR,EAAA,KAAAO;EAAAP,EAAA,KAAAE;EAAAF,EAAA,KAAAM;EAAAN,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,OAAhJS;AAAgJ"}

package/dist/components/sheet/index.js

@@ -5,6 +5,7 @@ import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { overlay } from "../../styles/overlay.js";
 import { useHoldBottomEdge } from "../../hooks/useBottomEdge.js";
 import { useScrollable } from "../../hooks/useScrollable.js";
+import { OverlayScope } from "../../overlay/index.js";
 import { c } from "react/compiler-runtime";
 import { useRef } from "react";
 import { jsx } from "react/jsx-runtime";
@@ -67,7 +68,7 @@ function Sheet(t0) {
 }
 function SheetBody(t0) {
 	const $ = c(7);
-	const { ref: callerRef, ...props$2 } = t0;
+	const { ref: callerRef, ...props$1 } = t0;
 	const ref = useRef(null);
 	const scrollable = useScrollable(ref);
 	const t1 = callerRef ?? void 0;
@@ -79,17 +80,17 @@ function SheetBody(t0) {
 	} else t2 = $[1];
 	const merged = t2;
 	const t3 = scrollable ? 0 : void 0;
-	const t4 = mergeStyles(props(styles.body, overlay.modalBodyRing), props$2);
+	const t4 = mergeStyles(props(styles.body, overlay.modalBodyRing), props$1);
 	let t5;
-	if ($[2] !== merged || $[3] !== props$2 || $[4] !== t3 || $[5] !== t4) {
+	if ($[2] !== merged || $[3] !== props$1 || $[4] !== t3 || $[5] !== t4) {
 		t5 = /* @__PURE__ */ jsx("div", {
 			tabIndex: t3,
-			...props$2,
+			...props$1,
 			ref: merged,
 			...t4
 		});
 		$[2] = merged;
-		$[3] = props$2;
+		$[3] = props$1;
 		$[4] = t3;
 		$[5] = t4;
 		$[6] = t5;
@@ -124,12 +125,12 @@ function SheetContent(t0) {
 	let isKeyboardDismissDisabled;
 	let isOpen;
 	let onOpenChange;
-	let props$1;
+	let props$2;
 	let ref;
 	let style;
 	let t1;
 	if ($[0] !== t0) {
-		({children, className, container, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props$1} = t0);
+		({children, className, container, defaultOpen, isDismissable: t1, isKeyboardDismissDisabled, isOpen, onOpenChange, ref, style, ...props$2} = t0);
 		$[0] = t0;
 		$[1] = children;
 		$[2] = className;
@@ -138,7 +139,7 @@ function SheetContent(t0) {
 		$[5] = isKeyboardDismissDisabled;
 		$[6] = isOpen;
 		$[7] = onOpenChange;
-		$[8] = props$1;
+		$[8] = props$2;
 		$[9] = ref;
 		$[10] = style;
 		$[11] = t1;
@@ -150,7 +151,7 @@ function SheetContent(t0) {
 		isKeyboardDismissDisabled = $[5];
 		isOpen = $[6];
 		onOpenChange = $[7];
-		props$1 = $[8];
+		props$2 = $[8];
 		ref = $[9];
 		style = $[10];
 		t1 = $[11];
@@ -177,14 +178,14 @@ function SheetContent(t0) {
 		$[16] = t4;
 	} else t4 = $[16];
 	let t5;
-	if ($[17] !== children || $[18] !== props$1) {
+	if ($[17] !== children || $[18] !== props$2) {
 		t5 = /* @__PURE__ */ jsx(Dialog, {
-			...props$1,
+			...props$2,
 			...t4,
 			children
 		});
 		$[17] = children;
-		$[18] = props$1;
+		$[18] = props$2;
 		$[19] = t5;
 	} else t5 = $[19];
 	let t6;
@@ -201,7 +202,7 @@ function SheetContent(t0) {
 	} else t6 = $[23];
 	let t7;
 	if ($[24] !== container || $[25] !== defaultOpen || $[26] !== isDismissable || $[27] !== isKeyboardDismissDisabled || $[28] !== isOpen || $[29] !== onOpenChange || $[30] !== t6) {
-		t7 = /* @__PURE__ */ jsx(ModalOverlay, {
+		t7 = /* @__PURE__ */ jsx(OverlayScope, { children: /* @__PURE__ */ jsx(ModalOverlay, {
 			defaultOpen,
 			isDismissable,
 			isKeyboardDismissDisabled,
@@ -210,7 +211,7 @@ function SheetContent(t0) {
 			UNSTABLE_portalContainer: container,
 			...t2,
 			children: t6
-		});
+		}) });
 		$[24] = container;
 		$[25] = defaultOpen;
 		$[26] = isDismissable;
@@ -242,7 +243,7 @@ function SheetFooter(t0) {
 		$[1] = t2;
 	} else t2 = $[1];
 	const merged = t2;
-	const t3 = mergeStyles({ className: "x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x" }, props);
+	const t3 = mergeStyles({ className: "x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x1a02dak x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x" }, props);
 	let t4;
 	if ($[2] !== merged || $[3] !== props || $[4] !== t3) {
 		t4 = /* @__PURE__ */ jsx("div", {
@@ -326,7 +327,7 @@ function SheetTitle(props) {
 	const $ = c(5);
 	let t0;
 	if ($[0] !== props) {
-		t0 = mergeStyles({ className: "x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp" }, props);
+		t0 = mergeStyles({ className: "x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp xeuugli xj0a0fe" }, props);
 		$[0] = props;
 		$[1] = t0;
 	} else t0 = $[1];

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","useMemo","useRef","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","useHoldBottomEdge","useScrollable","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kORKVm","k8WAf4","kg3NbH","$$css","SheetProps","Omit","children","Sheet","t0","$","props","t1","SheetBody","ref","callerRef","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","SheetContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","Symbol","for","scrim","modalDialog","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps","_c","props","stylex.props"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo, useRef } from 'react';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { useHoldBottomEdge } from '../../hooks/useBottomEdge';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\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// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n\n// The side sheet arrives along the inline axis, and it takes two keyframes to\n// do that rather than one. Which edge the panel rests against is logical —\n// `insetInlineEnd` puts it on the right under a left-to-right document and on\n// the left under a right-to-left one — but `translateX` is physical and flips\n// with nothing. One keyframe would therefore have the panel arrive from the\n// far side of where it comes to rest under one of the two.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromStart = \"x18x3npg-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  }\n};\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. 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 * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n *\n * `Sheet` is the trigger's half, so a sheet nothing on the page opens — one\n * a route shows, or a menu item raises — leaves it out and passes `isOpen`\n * and `onOpenChange` to `Sheet.Content` instead. Wrapped in `Sheet` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop, so a keyboard can scroll it\n  // when nothing inside it takes focus; a call site's own tabIndex still\n  // wins. See useScrollable.\n  const scrollable = useScrollable(ref);\n  // The body measures itself through its own ref, and the call site's lands\n  // on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div\n  // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n  tabIndex={scrollable ? 0 : undefined} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n *\n * Inside `Sheet`, the open state is the trigger's. On its own, with no\n * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and\n * a `slot=\"close\"` button, Escape and the scrim all report through\n * `onOpenChange`, as they would to `Sheet`.\n *\n * The scrim draws at `z-index: 900`, over any page content layered below\n * that, such as a sticky header, and the panel draws inside it. A\n * `Snackbar` draws at 1000, so a toast raised from inside the sheet is read\n * over it, and React Aria's popovers and menus draw above both.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  isOpen,\n  onOpenChange,\n  ref,\n  style,\n  ...props\n}: RefAttributes<HTMLDivElement> & SheetContentProps) {\n  return <ModalOverlay defaultOpen={defaultOpen} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} isOpen={isOpen} onOpenChange={onOpenChange}\n  // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n  UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n      <Modal\n    // The panel, where the call site's class and style land, rather than\n    // the dialog inside it, which takes the rest of the props.\n    ref={ref} {...mergeStatefulStyles({\n      className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr x1a148e8 x1mrd0q x5ubeis x1lodr2j x1uhho1l x19b5e0v xg4bq00 xg4jtgg xsds98l xixxii4\"\n    }, {\n      className,\n      style\n    })}>\n        <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n          {children}\n        </Dialog>\n      </Modal>\n    </ModalOverlay>;\n}\n\n/**\n * The sheet's actions. The panel is pinned to the window's bottom edge in\n * both presentations, so they sit on that edge, and a toast rises clear of\n * them while the sheet is open rather than lying over its buttons. A side\n * sheet's are included: the toast is centred in the window, and on any\n * window narrower than about 1376px its 576 reach into the sheet's 400.\n */\nfunction SheetFooter({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  useHoldBottomEdge(ref, true);\n  // The footer measures itself through its own ref, and the call site's\n  // lands on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div {...props} ref={merged} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xwvh9j7 xqu0tyb x1dkaolv x9f619 x1g12otp x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: RefAttributes<HTMLHeadingElement> & SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's open state and dismissal settings\n// and the panel's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the panel, which is the one worth\n// restyling and positioning, the open state and the dismissal settings reach\n// the scrim, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its siblings,\n// since the picked one carries React Aria's documentation, whose default is\n// the reverse of this component's.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the sheet on that scope's tokens, or\n   * to the end of `<body>` where there is none. A subtree themed through the\n   * `themeScope` class has no container of its own, so point this inside it,\n   * or the sheet renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the panel, closes the sheet.\n   * `true` here where React Aria's own default is `false`, since a sheet\n   * that ignores a tap outside it reads as stuck. Escape is\n   * `isKeyboardDismissDisabled`'s, and this says nothing about it.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport { SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle };\nexport default Sheet;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","HTMLAttributes","ReactNode","RefAttributes","ClassNameOrFunction","DialogProps","DialogTriggerProps","HeadingProps","ModalOverlayProps","ModalRenderProps","StyleOrFunction","stylex","useMemo","useRef","Dialog","DialogTrigger","Heading","Modal","ModalOverlay","useHoldBottomEdge","useScrollable","OverlayScope","mergeRefs","mergeStatefulStyles","mergeStyles","overlay","colors","media","motion","radii","shadows","spacing","typography","FORCED_COLORS","slideInFromEnd","slideInFromStart","slideInFromBottom","styles","body","kB7OPa","k1xSpc","kXwgrk","kzQI83","kOIVth","kORKVm","k8WAf4","kg3NbH","$$css","SheetProps","Omit","children","Sheet","t0","$","props","t1","SheetBody","ref","callerRef","scrollable","undefined","t2","merged","t3","t4","modalBodyRing","t5","SheetContent","className","container","defaultOpen","isKeyboardDismissDisabled","isOpen","onOpenChange","style","isDismissable","Symbol","for","scrim","modalDialog","t6","t7","SheetFooter","SheetHandle","SheetHeader","SheetTitle","Body","Content","Footer","Handle","Header","Title","SheetContentProps","Pick","Element","SheetTitleProps","_c","props","stylex.props"],"sources":["../../../src/components/sheet/index.tsx"],"sourcesContent":["'use client';\n\nimport type { HTMLAttributes, ReactNode, RefAttributes } from 'react';\nimport type { ClassNameOrFunction, DialogProps, DialogTriggerProps, HeadingProps, ModalOverlayProps, ModalRenderProps, StyleOrFunction } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useMemo, useRef } from 'react';\nimport { Dialog, DialogTrigger, Heading, Modal, ModalOverlay } from 'react-aria-components';\nimport { useHoldBottomEdge } from '../../hooks/useBottomEdge';\nimport { useScrollable } from '../../hooks/useScrollable';\nimport { OverlayScope } from '../../overlay';\nimport { mergeRefs } from '../../render/ref';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport { overlay } from '../../styles/overlay';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, media, motion, radii, shadows, spacing, typography } from '../../tokens/design.tokens.stylex';\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// One component, two presentations. Above the medium breakpoint it is a side\n// sheet pinned to the inline end of the viewport; below it, the same panel\n// becomes a bottom sheet. That is the pairing the Material Design pages draw\n// rather than two components: a sheet that stayed on the right at 375px would\n// be a drawer covering the whole screen.\n//\n// The two differ in five things and no more: which edges they are pinned to,\n// which two corners are rounded, which axis they arrive along, how much of\n// the viewport they may take, and the drag handle, which is the bottom\n// sheets page's element alone. Everything inside the panel — the 24 of start\n// and end padding, the 12 between the header's elements, the actions area —\n// comes from the side sheets page and is drawn the same in both.\n\n// The side sheet arrives along the inline axis, and it takes two keyframes to\n// do that rather than one. Which edge the panel rests against is logical —\n// `insetInlineEnd` puts it on the right under a left-to-right document and on\n// the left under a right-to-left one — but `translateX` is physical and flips\n// with nothing. One keyframe would therefore have the panel arrive from the\n// far side of where it comes to rest under one of the two.\nconst slideInFromEnd = \"x17cjob-B\";\nconst slideInFromStart = \"x18x3npg-B\";\nconst slideInFromBottom = \"x15b941j-B\";\n\n// Entry only, so there is no exit animation to wait for and closing is\n// immediate: React Aria keeps a closing panel mounted only while an animation\n// is running on it, and finds none. See the comment on `SheetContent` for why\n// that is a design call rather than a limit of StyleX.\n//\n// React Aria's overlay is three nested elements — the scrim, the panel, and\n// the dialog inside it — so the styles are split the same way: the overlay\n// module's scrim on the first, `content` on the panel, its modal dialog style\n// on the element that carries the role. The scrim and that dialog style are\n// shared with every modal overlay; the panel is the sheet's own, since which\n// edge it is pinned to is what makes it a sheet.\nconst styles = {\n  body: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kXwgrk: \"xdt5ytf\",\n    kzQI83: \"x1iyjqo2\",\n    kOIVth: \"xxj4525\",\n    kORKVm: \"x1odjw0f\",\n    k8WAf4: \"xp6hjv6\",\n    kg3NbH: \"xg0ps1x\",\n    $$css: true\n  }\n};\ntype SheetProps = Omit<DialogTriggerProps, 'children'> & {\n  children?: ReactNode;\n};\n\n/**\n * A modal panel that arrives from the edge of the screen — a side sheet on a\n * wide viewport, a bottom sheet on a narrow one. 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 * Composed rather than configured by props, because a sheet's header, body,\n * and footer all take arbitrary content — the parts are `Sheet.Content`,\n * `Sheet.Header`, `Sheet.Title`, `Sheet.Body`, and `Sheet.Footer`. A\n * `Button` or `IconButton` placed directly inside `Sheet` opens it, and one\n * given `slot=\"close\"` anywhere inside the content closes it; neither needs\n * a part of its own.\n *\n * `Sheet` is the trigger's half, so a sheet nothing on the page opens — one\n * a route shows, or a menu item raises — leaves it out and passes `isOpen`\n * and `onOpenChange` to `Sheet.Content` instead. Wrapped in `Sheet` with no\n * button inside it, React Aria warns that its press responder found nothing\n * to press.\n */\nfunction Sheet({\n  children,\n  ...props\n}: SheetProps) {\n  return <DialogTrigger {...props}>{children}</DialogTrigger>;\n}\nfunction SheetBody({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  // A body its content runs past is a tab stop, so a keyboard can scroll it\n  // when nothing inside it takes focus; a call site's own tabIndex still\n  // wins. See useScrollable.\n  const scrollable = useScrollable(ref);\n  // The body measures itself through its own ref, and the call site's lands\n  // on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div\n  // oxlint-disable-next-line jsx-a11y/no-noninteractive-tabindex -- a scroll container with nothing focusable inside is otherwise out of a keyboard's reach, which axe's scrollable-region-focusable reports\n  tabIndex={scrollable ? 0 : undefined} {...props} ref={merged} {...mergeStyles(stylex.props(styles.body, overlay.modalBodyRing), props)} />;\n}\n\n/**\n * The panel itself, and the scrim behind it. Everything the sheet shows goes\n * in here; the trigger stays outside it, since the trigger lives in the page\n * while this is portalled out to the end of the body.\n *\n * A press on the scrim closes the sheet unless `isDismissable` says\n * otherwise — React Aria's own default is the reverse, and a sheet that\n * ignores a tap outside it reads as stuck.\n *\n * Inside `Sheet`, the open state is the trigger's. On its own, with no\n * trigger, it is this part's: `isOpen` with `onOpenChange` controls it, and\n * a `slot=\"close\"` button, Escape and the scrim all report through\n * `onOpenChange`, as they would to `Sheet`.\n *\n * The scrim draws at `z-index: 900`, over any page content layered below\n * that, such as a sticky header, and the panel draws inside it. A\n * `Snackbar` draws at 1000, so a toast raised from inside the sheet is read\n * over it, and React Aria's popovers and menus draw above both.\n */\nfunction SheetContent({\n  children,\n  className,\n  container,\n  defaultOpen,\n  isDismissable = true,\n  isKeyboardDismissDisabled,\n  isOpen,\n  onOpenChange,\n  ref,\n  style,\n  ...props\n}: RefAttributes<HTMLDivElement> & SheetContentProps) {\n  return <OverlayScope>\n      <ModalOverlay defaultOpen={defaultOpen} isDismissable={isDismissable} isKeyboardDismissDisabled={isKeyboardDismissDisabled} isOpen={isOpen} onOpenChange={onOpenChange}\n    // oxlint-disable-next-line typescript/no-deprecated -- its replacement, UNSAFE_PortalProvider, is not exported by react-aria-components\n    UNSTABLE_portalContainer={container} {...stylex.props(overlay.scrim)}>\n        <Modal\n      // The panel, where the call site's class and style land, rather than\n      // the dialog inside it, which takes the rest of the props.\n      ref={ref} {...mergeStatefulStyles({\n        className: \"x1n1nwrg x1u6grsq x1ioi8j8 xu2fq7p x18ihq2d x16dv9tl x1vnz5z6 x19dwuzr xuz63mn x1lym3mf xkducg2 xrzall9 xb0nsol xjslfuv x1gbqego x1cfajip xjg5lhu x1a37zkv xys6ro8 x6xk272 x9t1vth x19efjv6 x9f619 x139gbkf x78zum5 xdt5ytf x1l2rt3b xwvxfow x1ey2m1c x13vifvy xmpip4z xtijo5x xhi6v0a x1upgybz x7ab17h x11ijow0 xb3r6kr x1a148e8 x1mrd0q x5ubeis x1lodr2j x1uhho1l x19b5e0v xg4bq00 xg4jtgg xsds98l xixxii4\"\n      }, {\n        className,\n        style\n      })}>\n          <Dialog {...props} {...stylex.props(overlay.modalDialog)}>\n            {children}\n          </Dialog>\n        </Modal>\n      </ModalOverlay>\n    </OverlayScope>;\n}\n\n/**\n * The sheet's actions. The panel is pinned to the window's bottom edge in\n * both presentations, so they sit on that edge, and a toast rises clear of\n * them while the sheet is open rather than lying over its buttons. A side\n * sheet's are included: the toast is centred in the window, and on any\n * window narrower than about 1376px its 576 reach into the sheet's 400.\n */\nfunction SheetFooter({\n  ref: callerRef,\n  ...props\n}: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  const ref = useRef<HTMLDivElement>(null);\n  useHoldBottomEdge(ref, true);\n  // The footer measures itself through its own ref, and the call site's\n  // lands on the same element.\n  const merged = useMemo(() => mergeRefs(ref, callerRef ?? undefined), [callerRef]);\n  return <div {...props} ref={merged} {...mergeStyles({\n    className: \"x12smttz x13fuv20 x178xt8z x9f619 x78zum5 x2lah0s x1a02dak x126z3so x1nhvcw1 x1qafhyn x8i8c5o x1clyivc xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * The bottom sheets page's drag handle: a short bar above the sheet's\n * content, saying the panel is a bottom sheet. Place it first inside\n * `Sheet.Content`; above the medium breakpoint the panel is a side sheet and\n * this draws nothing.\n *\n * It is decoration rather than a control, and hidden from assistive\n * technology. Material's own handle drags a sheet between a collapsed and an\n * expanded height and dismisses it from the collapsed one; this panel has\n * one height and cannot be dragged, so a control that only looked draggable\n * would promise what it cannot do. Closing is already the scrim, Escape, and\n * any button given `slot=\"close\"`.\n */\nfunction SheetHandle(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div aria-hidden=\"true\" {...props} {...mergeStyles({\n    className: \"x6s0dn4 x9f619 x1s85apg x37i4ze x2lah0s xl56j7k x1xg6qyv\"\n  }, props)}>\n      <span className=\"x1ccu2yh xwvh9j7 xqu0tyb x1dkaolv x9f619 x1g12otp x1td3qas\" />\n    </div>;\n}\nfunction SheetHeader(props: HTMLAttributes<HTMLDivElement> & RefAttributes<HTMLDivElement>) {\n  return <div {...props} {...mergeStyles({\n    className: \"x6s0dn4 x1j6faob x1q0q8m5 xso031l x9f619 x78zum5 x2lah0s x1gka490 x1qughib x1cmllll xg0ps1x\"\n  }, props)} />;\n}\n\n/**\n * Names the sheet. Rendered through React Aria's title slot, which is what\n * points the dialog's `aria-labelledby` at it — a sheet without one announces\n * itself as an unnamed dialog.\n */\nfunction SheetTitle(props: RefAttributes<HTMLHeadingElement> & SheetTitleProps) {\n  return <Heading slot=\"title\" {...props} {...mergeStyles({\n    className: \"x9f619 x1w5n3ug xdy5w5q xete2z3 x14ijtet xug9e1u x2divse x1ghz6dp xeuugli xj0a0fe\"\n  }, props)} />;\n}\nSheet.Body = SheetBody;\nSheet.Content = SheetContent;\nSheet.Footer = SheetFooter;\nSheet.Handle = SheetHandle;\nSheet.Header = SheetHeader;\nSheet.Title = SheetTitle;\n\n// The dialog's own props, plus the scrim's open state and dismissal settings\n// and the panel's styling. A call site has no reason to know there are three\n// elements: `className` and `style` reach the panel, which is the one worth\n// restyling and positioning, the open state and the dismissal settings reach\n// the scrim, and everything else lands on the dialog.\n//\n// `isDismissable` is declared here rather than picked with its siblings,\n// since the picked one carries React Aria's documentation, whose default is\n// the reverse of this component's.\ntype SheetContentProps = Omit<DialogProps, 'className' | 'style'> & Pick<ModalOverlayProps, 'defaultOpen' | 'isKeyboardDismissDisabled' | 'isOpen' | 'onOpenChange'> & {\n  /** A function may compute the class from the panel's render state. */\n  className?: ClassNameOrFunction<ModalRenderProps>;\n  /**\n   * Where to portal the panel and scrim. Defaults to the container of the\n   * `ThemeScope` around it, which keeps the sheet on that scope's tokens, or\n   * to the end of `<body>` where there is none. A subtree themed through the\n   * `themeScope` class has no container of its own, so point this inside it,\n   * or the sheet renders outside and keeps the page's tokens.\n   */\n  container?: Element;\n  /**\n   * Whether a press on the scrim, outside the panel, closes the sheet.\n   * `true` here where React Aria's own default is `false`, since a sheet\n   * that ignores a tap outside it reads as stuck. Escape is\n   * `isKeyboardDismissDisabled`'s, and this says nothing about it.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /** A function may compute the style from the panel's render state. */\n  style?: StyleOrFunction<ModalRenderProps>;\n};\ntype SheetTitleProps = HeadingProps;\nexport type { SheetContentProps, SheetProps, SheetTitleProps };\nexport { SheetBody, SheetContent, SheetFooter, SheetHandle, SheetHeader, SheetTitle };\nexport default Sheet;"],"mappings":"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"}

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

@@ -19,7 +19,11 @@ type SnackbarOptions = {
    * closes the snackbar, which is what the page draws.
    */
   action?: SnackbarAction;
-  /** Run when the snackbar closes, however it was closed. */
+  /**
+   * Run when the snackbar closes, however it was closed: by its timer, its
+   * action or close button, `close`, `clear`, or a newer message added in its
+   * place.
+   */
   onClose?: () => void;
   /**
    * Whether a close button is shown at the end. The page draws one for a
@@ -82,6 +86,7 @@ type SnackbarProps = {
  * keeps that API's `UNSTABLE_` name out of a consumer's code.
  */
 declare class SnackbarQueue {
+  #private;
   /**
    * React Aria's queue, which `Snackbar` subscribes to. Not part of the
    * package's API — read it and an upstream release may break the call site.
@@ -89,10 +94,12 @@ declare class SnackbarQueue {
   readonly rac: UNSTABLE_ToastQueue<SnackbarMessage>;
   constructor();
   /**
-   * Shows a message, and returns the key that closes it.
+   * Shows a message in place of the one on screen, and returns the key that
+   * closes it. The message it replaces is closed, so its `onClose` runs, and
+   * it does not come back.
    */
   add(message: ReactNode, options?: SnackbarOptions): string;
-  /** Closes every snackbar, shown or waiting. */
+  /** Closes the snackbar on screen, running its `onClose`. */
   clear(): void;
   /** Closes one snackbar, by the key `add` returned. */
   close(key: string): void;