@kanso-labs/kanso-ui 0.26.3 → 0.26.5

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

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

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

@@ -1,5 +1,6 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
+import { focus } from "../../styles/focus.js";
 import { calendarStyles } from "../../calendar/styles.js";
 import { CalendarGridHeader as CalendarGridHeader$1, CalendarHeader } from "../../calendar/index.js";
 import { monthOffsets } from "../../calendar/months.js";
@@ -9,7 +10,7 @@ import { CalendarCell, CalendarGrid, CalendarGridBody, RangeCalendar } from "rea
 //#region src/components/range-calendar/index.tsx
 function cellClassName(state) {
 	const isEnd = state.isSelected && (state.isSelectionStart || state.isSelectionEnd);
-	return props(calendarStyles.cell, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? "";
+	return props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? "";
 }
 function gridCell(date) {
 	return /* @__PURE__ */ jsx(CalendarCell, {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","RangeCalendarProps","RACRangeCalendarProps","stylex","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","RangeCalendar","RACRangeCalendar","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","mergeStatefulStyles","Omit","T","className","style","cellClassName","state","isDisabled","isSelected","isSelectionEnd","isSelectionStart","isToday","isEnd","props","cell","cellToday","cellInRange","cellRangeStart","cellRangeEnd","cellSelected","cellDisabled","gridCell","date","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid"],"sources":["../../../src/components/range-calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, RangeCalendarProps as RACRangeCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, RangeCalendar as RACRangeCalendar } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's calendar again, picking two dates rather than one.\n// Every part it draws is Calendar's, from `src/calendar` — the container, the\n// grid, the weekday row, the chevrons and the date circle — so the two cannot\n// come apart.\n//\n// What a range adds is the band between its two ends, and the page tokenises\n// no such thing: its token set covers the docked calendar's selected date and\n// stops there. So the band is the library's own, and its reasons are in\n// `src/calendar/styles.ts` where it is defined — the secondary container, one\n// step down from the primary the two ends take.\n//\n// Two things follow from drawing a band across a grid whose cells are spaced\n// apart.\n//\n// **The band is square and the ends are round.** A range of consecutive days\n// reads as one shape rather than a row of circles, and the first and last day\n// round only their outer edge, which is what makes the band begin and end at\n// a circle.\n//\n// **The band reaches across the grid's own spacing.** A negative inline\n// margin of half that spacing on each side closes the gap between one day and\n// the next without moving either. Without it the band arrives as a dashed run\n// of separate blocks.\n\ntype RangeCalendarProps<T extends DateValue> = Omit<RACRangeCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACRangeCalendarProps<T>['className'];\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACRangeCalendarProps<T>['style'];\n};\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order is what makes a range read as one shape. Every selected day takes\n// the band; the two ends then take the circle over it, and round the outer\n// edge the band does not continue past. `disabled` is last of all, and StyleX\n// replaces a property whole, so it takes the branches above it with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isSelected: boolean;\n  isSelectionEnd: boolean;\n  isSelectionStart: boolean;\n  isToday: boolean;\n}) {\n  const isEnd = state.isSelected && (state.isSelectionStart || state.isSelectionEnd);\n  return stylex.props(calendarStyles.cell, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\n\n/**\n * A calendar for picking a range of dates. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as a `{ start, end }` pair of `@internationalized/date` values\n * from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <RangeCalendar\n *   aria-label=\"Label\"\n *   defaultValue={{\n *     start: new CalendarDate(2026, 9, 8),\n *     end: new CalendarDate(2026, 9, 15),\n *   }}\n * />\n * ```\n *\n * The two ends take the circle a selected date takes in `Calendar`, and the\n * days between them a band in the secondary container. `minValue`,\n * `maxValue`, `isDateUnavailable` and `visibleDuration` are the same props\n * `Calendar` takes, and `allowsNonContiguousRanges` lets a range skip the\n * dates ruled out inside it rather than stopping at the first.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>) {\n  return <RACRangeCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarHeader />\n      <div {...stylex.props(calendarStyles.months)}>\n        {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n            <CalendarGridHeader />\n            <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n          </RACCalendarGrid>)}\n      </div>\n    </RACRangeCalendar>;\n}\nexport type { RangeCalendarProps };\nexport default RangeCalendar;"],"mappings":";;;;;;;;;AAiDA,SAASuB,cAAcC,OAMpB;CACD,MAAMM,QAAQN,MAAME,eAAeF,MAAMI,oBAAoBJ,MAAMG;CACnE,OAAOtB,MAAaY,eAAee,MAAMR,MAAMK,WAAWZ,eAAegB,WAAWT,MAAME,cAAcT,eAAeiB,aAAaV,MAAME,cAAcF,MAAMI,oBAAoBX,eAAekB,gBAAgBX,MAAME,cAAcF,MAAMG,kBAAkBV,eAAemB,cAAcN,SAASb,eAAeoB,cAAcb,MAAMC,cAAcR,eAAeqB,YAAY,CAAC,CAACjB,aAAa;AAChY;AACA,SAASkB,SAASC,MAAkC;CAClD,OAAO,oBAAC,cAAD;EAAiB,WAAWjB;EAAqBiB;CAAK,CAAA;AAC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAA5B,gBAAAmB,SAAA;CAAA,MAAAU,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAV,SAAA;EAC6CY,KAAAzB,oBAAoBb,MAAaY,eAAc2B,IAAK,GAAGb,OAAK;EAACU,EAAA,KAAAV;EAAAU,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EACpGH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAAzC,MAAaY,eAAcgC,MAAO;EAACR,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAV,QAAAoB,iBAAAF,QAAA;EACzCC,KAAAlC,aAAae,QAAKoB,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACZ,EAAA,KAAAV,QAAAoB,iBAAAF;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAT,EAAA,KAAAS;EAAAT,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAV,WAAAU,EAAA,OAAAE,MAAAF,EAAA,QAAAa,IAAA;EAPHC,KAAA,qBAAC,eAAD;GAAiB,GAAQxB;GAAK,GAAMY;GAApC,UAAA,CACHE,IACAS,EAFoB;;EAQHb,EAAA,KAAAV;EAAAU,EAAA,KAAAE;EAAAF,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OARdc;AAQc;AATvB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAAC,cAAD;EAA6CA;EAAM,GAAMnD,MAAaY,eAAcwC,IAAK;EAAzF,UAAA,CAC5D,oBAAC,sBAAD,CAAmB,CAAA,GACnB,oBAAC,kBAAD,EAAA,UAAsBlB,SAAF,CAAA,CAFwD;CAAMiB,GAAAA,OAAMP,MAAZ;AAG5D"}
+{"version":3,"file":"index.js","names":["CalendarDate","ReactElement","DateValue","RangeCalendarProps","RACRangeCalendarProps","stylex","CalendarCell","RACCalendarCell","CalendarGrid","RACCalendarGrid","CalendarGridBody","RACCalendarGridBody","RangeCalendar","RACRangeCalendar","CalendarGridHeader","CalendarHeader","monthOffsets","calendarStyles","focus","mergeStatefulStyles","Omit","T","className","style","cellClassName","state","isDisabled","isSelected","isSelectionEnd","isSelectionStart","isToday","isEnd","props","cell","ring","cellToday","cellInRange","cellRangeStart","cellRangeEnd","cellSelected","cellDisabled","gridCell","date","$","_c","t0","root","t1","t2","Symbol","for","months","t3","visibleDuration","map","_temp","t4","t5","offset","grid"],"sources":["../../../src/components/range-calendar/index.tsx"],"sourcesContent":["import type { CalendarDate } from '@internationalized/date';\nimport type { ReactElement } from 'react';\nimport type { DateValue, RangeCalendarProps as RACRangeCalendarProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CalendarCell as RACCalendarCell, CalendarGrid as RACCalendarGrid, CalendarGridBody as RACCalendarGridBody, RangeCalendar as RACRangeCalendar } from 'react-aria-components';\nimport { CalendarGridHeader, CalendarHeader } from '../../calendar';\nimport { monthOffsets } from '../../calendar/months';\nimport { calendarStyles } from '../../calendar/styles';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\n\n// The date pickers page's calendar again, picking two dates rather than one.\n// Every part it draws is Calendar's, from `src/calendar` — the container, the\n// grid, the weekday row, the chevrons and the date circle — so the two cannot\n// come apart.\n//\n// What a range adds is the band between its two ends, and the page tokenises\n// no such thing: its token set covers the docked calendar's selected date and\n// stops there. So the band is the library's own, and its reasons are in\n// `src/calendar/styles.ts` where it is defined — the secondary container, one\n// step down from the primary the two ends take.\n//\n// Two things follow from drawing a band across a grid whose cells are spaced\n// apart.\n//\n// **The band is square and the ends are round.** A range of consecutive days\n// reads as one shape rather than a row of circles, and the first and last day\n// round only their outer edge, which is what makes the band begin and end at\n// a circle.\n//\n// **The band reaches across the grid's own spacing.** A negative inline\n// margin of half that spacing on each side closes the gap between one day and\n// the next without moving either. Without it the band arrives as a dashed run\n// of separate blocks.\n\ntype RangeCalendarProps<T extends DateValue> = Omit<RACRangeCalendarProps<T>, 'children' | 'className' | 'style'> & {\n  /** A function may compute the class from the calendar's render state. */\n  className?: RACRangeCalendarProps<T>['className'];\n  /** A function may compute the style from the calendar's render state. */\n  style?: RACRangeCalendarProps<T>['style'];\n};\n\n// A date's classes, from React Aria's render state. StyleX cannot target\n// `[data-selected]` on the element it is styling, so the state comes from\n// what React Aria hands the className.\n//\n// The order is what makes a range read as one shape. Every selected day takes\n// the band; the two ends then take the circle over it, and round the outer\n// edge the band does not continue past. `disabled` is last of all, and StyleX\n// replaces a property whole, so it takes the branches above it with it.\nfunction cellClassName(state: {\n  isDisabled: boolean;\n  isSelected: boolean;\n  isSelectionEnd: boolean;\n  isSelectionStart: boolean;\n  isToday: boolean;\n}) {\n  const isEnd = state.isSelected && (state.isSelectionStart || state.isSelectionEnd);\n  return stylex.props(calendarStyles.cell, focus.ring, state.isToday && calendarStyles.cellToday, state.isSelected && calendarStyles.cellInRange, state.isSelected && state.isSelectionStart && calendarStyles.cellRangeStart, state.isSelected && state.isSelectionEnd && calendarStyles.cellRangeEnd, isEnd && calendarStyles.cellSelected, state.isDisabled && calendarStyles.cellDisabled).className ?? '';\n}\nfunction gridCell(date: CalendarDate): ReactElement {\n  return <RACCalendarCell className={cellClassName} date={date} />;\n}\n\n/**\n * A calendar for picking a range of dates. The value is React Aria's: pass\n * `value` with `onChange` to control it, or `defaultValue` to let it keep its\n * own, both as a `{ start, end }` pair of `@internationalized/date` values\n * from this package's `./date` subpath.\n *\n * ```tsx\n * import { CalendarDate } from '@kanso-labs/kanso-ui/date'\n *\n * <RangeCalendar\n *   aria-label=\"Label\"\n *   defaultValue={{\n *     start: new CalendarDate(2026, 9, 8),\n *     end: new CalendarDate(2026, 9, 15),\n *   }}\n * />\n * ```\n *\n * The two ends take the circle a selected date takes in `Calendar`, and the\n * days between them a band in the secondary container. `minValue`,\n * `maxValue`, `isDateUnavailable` and `visibleDuration` are the same props\n * `Calendar` takes, and `allowsNonContiguousRanges` lets a range skip the\n * dates ruled out inside it rather than stopping at the first.\n *\n * The call site's `className` and `style` land on the container, which is the\n * element a layout positions.\n */\nfunction RangeCalendar<T extends DateValue>(props: RangeCalendarProps<T>) {\n  return <RACRangeCalendar<T> {...props} {...mergeStatefulStyles(stylex.props(calendarStyles.root), props)}>\n      <CalendarHeader />\n      <div {...stylex.props(calendarStyles.months)}>\n        {monthOffsets(props.visibleDuration?.months ?? 1).map(offset => <RACCalendarGrid key={offset.months} offset={offset} {...stylex.props(calendarStyles.grid)}>\n            <CalendarGridHeader />\n            <RACCalendarGridBody>{gridCell}</RACCalendarGridBody>\n          </RACCalendarGrid>)}\n      </div>\n    </RACRangeCalendar>;\n}\nexport type { RangeCalendarProps };\nexport default RangeCalendar;"],"mappings":";;;;;;;;;;AAkDA,SAASwB,cAAcC,OAMpB;CACD,MAAMM,QAAQN,MAAME,eAAeF,MAAMI,oBAAoBJ,MAAMG;CACnE,OAAOvB,MAAaY,eAAegB,MAAMf,MAAMgB,MAAMT,MAAMK,WAAWb,eAAekB,WAAWV,MAAME,cAAcV,eAAemB,aAAaX,MAAME,cAAcF,MAAMI,oBAAoBZ,eAAeoB,gBAAgBZ,MAAME,cAAcF,MAAMG,kBAAkBX,eAAeqB,cAAcP,SAASd,eAAesB,cAAcd,MAAMC,cAAcT,eAAeuB,YAAY,CAAC,CAAClB,aAAa;AAC5Y;AACA,SAASmB,SAASC,MAAkC;CAClD,OAAO,oBAAC,cAAD;EAAiB,WAAWlB;EAAqBkB;CAAK,CAAA;AAC/D;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6BA,SAAA9B,gBAAAoB,SAAA;CAAA,MAAAW,IAAAC,EAAA,EAAA;CAAA,IAAAC;CAAA,IAAAF,EAAA,OAAAX,SAAA;EAC6Ca,KAAA1B,oBAAoBd,MAAaY,eAAc6B,IAAK,GAAGd,OAAK;EAACW,EAAA,KAAAX;EAAAW,EAAA,KAAAE;CAAA,OAAAA,KAAAF,EAAA;CAAA,IAAAI;CAAA,IAAAC;CAAA,IAAAL,EAAA,OAAAM,OAAAC,IAAA,2BAAA,GAAA;EACpGH,KAAA,oBAAC,gBAAD,CAAe,CAAA;EACNC,KAAA3C,MAAaY,eAAckC,MAAO;EAACR,EAAA,KAAAI;EAAAJ,EAAA,KAAAK;CAAA,OAAA;EAAAD,KAAAJ,EAAA;EAAAK,KAAAL,EAAA;CAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,OAAAX,QAAAqB,iBAAAF,QAAA;EACzCC,KAAApC,aAAagB,QAAKqB,iBAAwBF,UAA7B,CAAkC,CAAC,CAAAG,IAAKC,KAGlC;EAACZ,EAAA,KAAAX,QAAAqB,iBAAAF;EAAAR,EAAA,KAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,OAAAS,IAAA;EAJvBI,KAAA,oBAAA,OAAA;GAKM,GALGR;GACNI,UAAAA;EAIG,CAAA;EAAAT,EAAA,KAAAS;EAAAT,EAAA,KAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,OAAAX,WAAAW,EAAA,OAAAE,MAAAF,EAAA,QAAAa,IAAA;EAPHC,KAAA,qBAAC,eAAD;GAAiB,GAAQzB;GAAK,GAAMa;GAApC,UAAA,CACHE,IACAS,EAFoB;;EAQHb,EAAA,KAAAX;EAAAW,EAAA,KAAAE;EAAAF,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,KAAAd,EAAA;CAAA,OARdc;AAQc;AATvB,SAAAF,MAAAG,QAAA;CAAA,OAIwE,qBAAC,cAAD;EAA6CA;EAAM,GAAMrD,MAAaY,eAAc0C,IAAK;EAAzF,UAAA,CAC5D,oBAAC,sBAAD,CAAmB,CAAA,GACnB,oBAAC,kBAAD,EAAA,UAAsBlB,SAAF,CAAA,CAFwD;CAAMiB,GAAAA,OAAMP,MAAZ;AAG5D"}

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

@@ -1,5 +1,7 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CheckGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext } from "react";
@@ -8,6 +10,55 @@ import { SelectionIndicator, ToggleButton, ToggleButtonGroup } from "react-aria-
 //#region src/components/segmented-button/index.tsx
 const ShowSelectedIconContext = createContext(true);
 const SelectionModeContext = createContext("single");
+const styles = {
+	segment: {
+		"--segment-indicator-radius-end": "x1qkl9vf x111hk5a",
+		"--segment-indicator-radius-start": "x36wtw6 x1syycwj",
+		kGNEyG: "x6s0dn4",
+		kWkggS: "xjbqb8w",
+		kZKoxP: "x1vqgdyp",
+		kVAM5u: "x1fwvt7v",
+		kT0f0o: "x1asv1gf xkducg2",
+		kVL7Gh: "x15ku28o x1uwupfv",
+		k2ei4v: "x120dh57 x14e42zd",
+		kfmiAY: "x12k3b1q x1a37zkv",
+		krdFHd: "x1f6vc7b xb01x1j",
+		ksu8eU: "x1y0btm7",
+		kMzoRj: "xmkeg23",
+		kB7OPa: "x9f619",
+		kkrTdU: "x1ypdohk",
+		k1xSpc: "x3nfvp2",
+		kMv6JI: "xkknnkr",
+		kGuDYH: "x14zspaw",
+		k63SB2: "x1v9cpvo",
+		kOIVth: "x126z3so",
+		kjj79g: "xl56j7k",
+		kb6lSQ: "x155f00i",
+		kLWn49: "x1lz68p4",
+		k7Eaqz: "xeuugli",
+		k8WAf4: "xt970qd",
+		kg3NbH: "x18fpw6u",
+		kVAEAm: "x1n2onr6",
+		kIyJzY: "x1qno0dh",
+		k1ekBW: "xt3l3uh",
+		kAMwcw: "xpc4ca7",
+		$$css: true
+	},
+	segmentDisabled: {
+		kVAM5u: "xrh88j3",
+		kMwMTN: "x1xj74d8",
+		kkrTdU: "x1h6gzvc",
+		$$css: true
+	},
+	segmentSelected: {
+		kMwMTN: "x1sawysd",
+		$$css: true
+	},
+	segmentUnselected: {
+		kMwMTN: "x139gbkf",
+		$$css: true
+	}
+};
 /**
 * The check on a chosen segment, or the segment's own icon. Returns a node
 * rather than letting the type be inferred, since `ReactNode` is a union
@@ -202,12 +253,7 @@ function SegmentedButtonSegment(t0) {
 	return t5;
 }
 function segmentStyles(state) {
-	return {
-		0: { className: "x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1fwvt7v x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x1ypdohk x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 x139gbkf" },
-		2: { className: "x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1fwvt7v x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x1ypdohk x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 x1sawysd" },
-		1: { className: "x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 xrh88j3 x1xj74d8 x1h6gzvc" },
-		3: { className: "x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 xrh88j3 x1xj74d8 x1h6gzvc" }
-	}[!!state.isSelected << 1 | !!state.isDisabled << 0];
+	return props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isDisabled && styles.segmentDisabled);
 }
 SegmentedButton.Segment = SegmentedButtonSegment;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","stylex","createContext","useContext","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","CheckGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","Ripple","ReturnType","NonNullable","SegmentedButtonProps","Omit","className","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","state","isSelected","undefined","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","isHovered","isFocusVisible","isPressed","surface","SegmentedButton","t0","$","_c","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","props","t8","SegmentedButtonSegment","handlers","segmentStyles","Segment"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The 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// 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//\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// **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 Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\ntype SegmentedButtonProps = 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 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   * @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.\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 * The check on a chosen segment, or the segment's own icon. Returns a node\n * rather than letting the type be inferred, since `ReactNode` is a union\n * that includes a promise and an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, showSelectedIcon: boolean): ReactNode {\n  if (state.isSelected && showSelectedIcon) {\n    return <span className=\"x6s0dn4 xmix8c7 x3nfvp2 x2lah0s xosj86m x1xp8n7a xl56j7k\">\n        <CheckGlyph className=\"x5yr21d xh8yej3\" />\n      </span>;\n  }\n  if (icon === undefined) {\n    return null;\n  }\n  return <span className=\"x6s0dn4 xmix8c7 x3nfvp2 x2lah0s xosj86m x1xp8n7a xl56j7k\">{icon}</span>;\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): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    4: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg\"\n    },\n    1: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    5: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 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  return (state: ToggleButtonRenderProps) => <>\n      <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode)} />\n      <span {...{\n      0: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n      },\n      4: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n      },\n      2: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n      },\n      6: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n      },\n      1: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      },\n      5: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      },\n      3: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      },\n      7: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      }\n    }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n      {glyphFor(state, icon, showSelectedIcon)}\n      <span className=\"xeuugli xb3r6kr xlyipyv xuxw1ft\">{children}</span>\n      {ripple.surface}\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` — nothing here labels\n * it for you, and a set with no name is a group a screen reader cannot\n * 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 * The call site's `className` and `style` land on the track, which is the\n * element a layout positions.\n */\nfunction SegmentedButton({\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: SegmentedButtonProps) {\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} 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  ...props\n}: SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  const showSelectedIcon = useContext(ShowSelectedIconContext);\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true);\n  return <RACToggleButton {...props} {...ripple.handlers} {...mergeStatefulStyles(segmentStyles, 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.\nfunction segmentStyles(state: ToggleButtonRenderProps) {\n  return {\n    0: {\n      className: \"x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1fwvt7v x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x1ypdohk x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 x139gbkf\"\n    },\n    2: {\n      className: \"x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1fwvt7v x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x1ypdohk x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 x1sawysd\"\n    },\n    1: {\n      className: \"x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 xrh88j3 x1xj74d8 x1h6gzvc\"\n    },\n    3: {\n      className: \"x1qkl9vf x111hk5a x36wtw6 x1syycwj x6s0dn4 xjbqb8w x1vqgdyp x1asv1gf xkducg2 x15ku28o x1uwupfv x120dh57 x14e42zd x12k3b1q x1a37zkv x1f6vc7b xb01x1j x1y0btm7 xmkeg23 x9f619 x3nfvp2 xkknnkr x14zspaw x1v9cpvo x126z3so xl56j7k x155f00i x1lz68p4 xeuugli xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn xt970qd x18fpw6u x1n2onr6 x1qno0dh xt3l3uh xpc4ca7 xrh88j3 x1xj74d8 x1h6gzvc\"\n    }\n  }[!!state.isSelected << 1 | !!state.isDisabled << 0];\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport default SegmentedButton;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["ReactNode","FocusableElement","ToggleButtonGroupProps","RACToggleButtonGroupProps","ToggleButtonProps","RACToggleButtonProps","SharedElementRenderProps","ToggleButtonRenderProps","stylex","createContext","useContext","SelectionIndicator","RACSelectionIndicator","ToggleButton","RACToggleButton","ToggleButtonGroup","RACToggleButtonGroup","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","ShowSelectedIconContext","SelectionModeContext","SelectionMode","Ripple","ReturnType","NonNullable","styles","segment","kGNEyG","kWkggS","kZKoxP","kVAM5u","kT0f0o","kVL7Gh","k2ei4v","kfmiAY","krdFHd","ksu8eU","kMzoRj","kB7OPa","kkrTdU","k1xSpc","kMv6JI","kGuDYH","k63SB2","kOIVth","kjj79g","kb6lSQ","kLWn49","k7Eaqz","k8WAf4","kg3NbH","kVAEAm","kIyJzY","k1ekBW","kAMwcw","$$css","segmentDisabled","kMwMTN","segmentSelected","segmentUnselected","SegmentedButtonProps","Omit","className","showSelectedIcon","style","SegmentedButtonSegmentProps","children","disableRipple","icon","glyphFor","state","isSelected","undefined","indicatorClassName","isDisabled","selectionMode","isEntering","isExiting","segmentContent","ripple","isHovered","isFocusVisible","isPressed","surface","SegmentedButton","t0","$","_c","T0","T1","T2","t1","t2","t3","t4","t5","t6","t7","props","t8","SegmentedButtonSegment","handlers","segmentStyles","ring","Segment"],"sources":["../../../src/components/segmented-button/index.tsx"],"sourcesContent":["import type { ReactNode } from 'react';\nimport type { FocusableElement, ToggleButtonGroupProps as RACToggleButtonGroupProps, ToggleButtonProps as RACToggleButtonProps, SharedElementRenderProps, ToggleButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { SelectionIndicator as RACSelectionIndicator, ToggleButton as RACToggleButton, ToggleButtonGroup as RACToggleButtonGroup } from 'react-aria-components';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, 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// 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//\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// **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 Ripple = ReturnType<typeof useRipple<FocusableElement>>;\ntype SelectionMode = NonNullable<RACToggleButtonGroupProps['selectionMode']>;\nconst styles = {\n  segment: {\n    \"--segment-indicator-radius-end\": \"x1qkl9vf x111hk5a\",\n    \"--segment-indicator-radius-start\": \"x36wtw6 x1syycwj\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kVAM5u: \"x1fwvt7v\",\n    kT0f0o: \"x1asv1gf xkducg2\",\n    kVL7Gh: \"x15ku28o x1uwupfv\",\n    k2ei4v: \"x120dh57 x14e42zd\",\n    kfmiAY: \"x12k3b1q x1a37zkv\",\n    krdFHd: \"x1f6vc7b 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    kOIVth: \"x126z3so\",\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\",\n    kkrTdU: \"x1h6gzvc\",\n    $$css: true\n  },\n  segmentSelected: {\n    kMwMTN: \"x1sawysd\",\n    $$css: true\n  },\n  segmentUnselected: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\ntype SegmentedButtonProps = 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 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   * @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.\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 * The check on a chosen segment, or the segment's own icon. Returns a node\n * rather than letting the type be inferred, since `ReactNode` is a union\n * that includes a promise and an inferred one has to be `async`.\n */\nfunction glyphFor(state: ToggleButtonRenderProps, icon: ReactNode, showSelectedIcon: boolean): ReactNode {\n  if (state.isSelected && showSelectedIcon) {\n    return <span className=\"x6s0dn4 xmix8c7 x3nfvp2 x2lah0s xosj86m x1xp8n7a xl56j7k\">\n        <CheckGlyph className=\"x5yr21d xh8yej3\" />\n      </span>;\n  }\n  if (icon === undefined) {\n    return null;\n  }\n  return <span className=\"x6s0dn4 xmix8c7 x3nfvp2 x2lah0s xosj86m x1xp8n7a xl56j7k\">{icon}</span>;\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): (state: SharedElementRenderProps) => string {\n  return state => ({\n    0: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd\"\n    },\n    4: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7\"\n    },\n    2: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg\"\n    },\n    6: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg\"\n    },\n    1: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xg01cxk\"\n    },\n    5: {\n      className: \"x15dekr4 xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xg01cxk\"\n    },\n    3: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk xioksi3 x1c42kcb x1seskgd xepofeg xg01cxk\"\n    },\n    7: {\n      className: \"xrldhhw x12tjb6f x1g25zgg xleywy5 x9f619 x1jz8bvi x47corl x10l6tqk x8knxv4 x12w9bfk x1qno0dh x19991ni xpc4ca7 xepofeg xg01cxk\"\n    }\n  })[!!(selectionMode === 'multiple') << 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  return (state: ToggleButtonRenderProps) => <>\n      <RACSelectionIndicator className={indicatorClassName(state.isDisabled, selectionMode)} />\n      <span {...{\n      0: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi xg01cxk x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4\"\n      },\n      4: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xe2qvxb\"\n      },\n      2: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n      },\n      6: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xcl2av\"\n      },\n      1: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      },\n      5: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      },\n      3: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      },\n      7: {\n        className: \"xtwfq29 x1pjcqnp x9f619 x1jz8bvi x47corl x10l6tqk x1qno0dh x19991ni xpc4ca7 x8knxv4 xjg27g\"\n      }\n    }[!!state.isHovered << 2 | !!state.isFocusVisible << 1 | !!state.isPressed << 0]} />\n      {glyphFor(state, icon, showSelectedIcon)}\n      <span className=\"xeuugli xb3r6kr xlyipyv xuxw1ft\">{children}</span>\n      {ripple.surface}\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` — nothing here labels\n * it for you, and a set with no name is a group a screen reader cannot\n * 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 * The call site's `className` and `style` land on the track, which is the\n * element a layout positions.\n */\nfunction SegmentedButton({\n  selectionMode = 'single',\n  showSelectedIcon = true,\n  ...props\n}: SegmentedButtonProps) {\n  return <ShowSelectedIconContext value={showSelectedIcon}>\n      <SelectionModeContext value={selectionMode}>\n        <RACToggleButtonGroup {...props} 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  ...props\n}: SegmentedButtonSegmentProps) {\n  const selectionMode = useContext(SelectionModeContext);\n  const showSelectedIcon = useContext(ShowSelectedIconContext);\n  // Off while disabled, as in Button: a control that cannot be pressed\n  // should not answer a press with an animation.\n  const ripple = useRipple<FocusableElement>(!disableRipple && props.isDisabled !== true);\n  return <RACToggleButton {...props} {...ripple.handlers} {...mergeStatefulStyles(segmentStyles, 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.\nfunction segmentStyles(state: ToggleButtonRenderProps) {\n  return stylex.props(styles.segment, focus.ring, state.isSelected ? styles.segmentSelected : styles.segmentUnselected, state.isDisabled && styles.segmentDisabled);\n}\nSegmentedButton.Segment = SegmentedButtonSegment;\nexport type { SegmentedButtonProps, SegmentedButtonSegmentProps };\nexport default SegmentedButton;"],"mappings":"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"}

package/dist/components/switch/index.js

@@ -1,6 +1,7 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { CheckGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
 import { FieldMessage } from "../../field/index.js";
@@ -115,13 +116,7 @@ const styles = {
 		kVAM5u: "xrh88j3",
 		$$css: true
 	},
-	trackFocused: {
-		kjBf7l: "xrgy624",
-		kInvED: "x1hl8ikr",
-		k3XXqK: "xaatb59",
-		kMeerF: "x1de99jn",
-		$$css: true
-	},
+	trackFocused: { $$css: true },
 	trackOn: {
 		kWkggS: "xnety89",
 		kVAM5u: "x1uajy3w",
@@ -168,7 +163,7 @@ function buttonContent(children, icon, ripple, drag) {
 				3: { className: "x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k x1h6gzvc" }
 			}[!!state.isReadOnly << 1 | !!state.isDisabled << 0],
 			children: /* @__PURE__ */ jsx("span", {
-				...props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && styles.trackFocused),
+				...props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && styles.trackFocused, state.isFocusVisible && focus.ringVisible),
 				children: /* @__PURE__ */ jsxs("span", {
 					...interactive ? drag.handlers(on) : {},
 					...props(styles.seat, on && styles.seatOn, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0)),

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["MouseEvent","ReactMouseEvent","ReactNode","PointerEvent","ReactPointerEvent","SwitchFieldProps","RACSwitchFieldProps","SwitchButtonRenderProps","stylex","useCallback","useRef","useState","SwitchButton","SwitchField","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","useRipple","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","_temp","kLqNvP","styles","handle","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","handleActive","handleDisabled","handleOn","handleOnActive","handleOnDisabled","handlePressed","layer","kpwlN0","kVAEAm","seat","k87sOh","seatAt","offset","val","undefined","seatDragging","seatOn","track","kVAM5u","ksu8eU","kMzoRj","kmuXW","trackDisabled","trackFocused","kjBf7l","kInvED","k3XXqK","kMeerF","trackOn","trackOnDisabled","hoverLayers","off","on","pressedLayers","TRAVEL","Drag","ReturnType","useHandleDrag","Ripple","HTMLSpanElement","SwitchProps","children","description","error","icon","Omit","buttonContent","ripple","drag","state","interactive","isDisabled","isReadOnly","isSelected","dragging","active","isHovered","isPressed","isFocusVisible","className","props","handlers","surface","Switch","t0","$","_c","t1","validationBehavior","T0","t2","t3","t4","t5","t6","t7","setOffset","origin","settled","cancelClick","Symbol","for","current","onPointerCancel","event","preventDefault","stopPropagation","onClickCapture","event_0","from","along","rtl","x","clientX","next","Math","min","max","base","onPointerMove","event_1","from_0","stopped","currentTarget","dispatchEvent","bubbles","pointerId","pointerType","input","closest","querySelector","click","onPointerUp","onPointerDown","event_2","button","getComputedStyle","direction","setPointerCapture"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["// React's event types are aliased because `useHandleDrag` also constructs a\n// DOM `PointerEvent`. Imported unaliased, the name shadows that constructor:\n// TypeScript still resolves the call to the global, since a type-only import\n// takes no value name, but a reader and a static analyser alike read it as\n// React's type, which has no runtime value behind it at all.\nimport type { MouseEvent as ReactMouseEvent, ReactNode, PointerEvent as ReactPointerEvent } from 'react';\nimport type { SwitchFieldProps as RACSwitchFieldProps, SwitchButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useRef, useState } from 'react';\nimport { SwitchButton, SwitchField } from 'react-aria-components';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The switch page: a 52 by 32dp track with a 2dp outline and a full corner,\n// a handle that is 16dp off, 24dp on and 28dp while pressed, a 16dp icon in\n// the handle when asked for, a 40dp state layer around the handle and a 48dp\n// target. Off, the track is surface container highest inside an outline\n// rule and the handle is outline, turning on surface variant while hovered,\n// pressed or focused; on, the track is primary and the handle on primary,\n// turning primary container in the same states, with the icon in on primary\n// container. Disabled, the track and its rule are on surface at the\n// disabled container opacity and the handle on surface at the disabled\n// content opacity, or surface when on. The state layer is on surface off and\n// primary on.\n//\n// React Aria's `SwitchField` is the root, a div holding the description and\n// error slots; its `SwitchButton` is the label around a visually hidden\n// input, and everything drawn is that label's children, chosen from the\n// render state React Aria hands them. The field is the two-column grid the\n// checkbox uses, with the label `display: contents`, so the description and\n// error line up under the text.\n//\n// The handle travels between the two ends of the track and grows between\n// its three sizes on the same transition, `motion.durationShort2` with the\n// standard easing; the state layer and the ripple sit on a 40dp disc centred\n// on the handle, so they move with it. The adjacent label is body-large on\n// surface, which the page keeps the same whichever way the switch is.\n//\n// The page's pressed handle follows the pointer: it grows, travels with the\n// drag, and the switch flips when it is released past the middle of the\n// track or springs back when it is not. React Aria's `SwitchButton` has no\n// drag of its own, so the travel is this component's — see `useHandleDrag`.\nconst _temp = {\n  kLqNvP: \"x1lxsm33\",\n  \"$$css\": true\n};\nconst styles = {\n  handle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xp2scj5\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xscdzaa\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1kky2od\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x7okvu4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  handleActive: {\n    kWkggS: \"x1ccu2yh\",\n    $$css: true\n  },\n  handleDisabled: {\n    kWkggS: \"x1crcgwy\",\n    $$css: true\n  },\n  handleOn: {\n    kWkggS: \"x1ntwmx2\",\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  handleOnActive: {\n    kWkggS: \"xp89om9\",\n    $$css: true\n  },\n  handleOnDisabled: {\n    kWkggS: \"x14s9m32\",\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  handlePressed: {\n    kZKoxP: \"x1fgtraw\",\n    kzqmXN: \"xgd8bvy\",\n    $$css: true\n  },\n  layer: {\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"x100vrsf\",\n    kpwlN0: \"x1qx2jxi\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seat: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1fgtraw\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xgd8bvy\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x2hifos\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seatAt: (offset: number) => [_temp, {\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${offset}px`)\n  }],\n  seatDragging: {\n    kIyJzY: \"x1mq3mr6\",\n    $$css: true\n  },\n  seatOn: {\n    kLqNvP: \"x1n8ud3w\",\n    $$css: true\n  },\n  track: {\n    kWkggS: \"x1rrhr5q\",\n    kZKoxP: \"x10w6t97\",\n    kVAM5u: \"x1fwvt7v\",\n    kaIpWk: \"x3y1ksm\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  trackDisabled: {\n    kWkggS: \"x1trd85j\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  trackFocused: {\n    kjBf7l: \"xrgy624\",\n    kInvED: \"x1hl8ikr\",\n    k3XXqK: \"xaatb59\",\n    kMeerF: \"x1de99jn\",\n    $$css: true\n  },\n  trackOn: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x1uajy3w\",\n    $$css: true\n  },\n  trackOnDisabled: {\n    kWkggS: \"x19v6zzp\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  }\n};\n\n// The state layer over the handle: on surface while the switch is off and\n// primary while it is on, at the hover or the pressed opacity.\nconst hoverLayers = {\n  off: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  off: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\n\n// How far the seat travels: the track's 48dp inside its 2dp rule, less the\n// seat's own 28dp.\nconst TRAVEL = 20;\ntype Drag = ReturnType<typeof useHandleDrag>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype SwitchProps = {\n  /**\n   * The label, beside the switch. A switch that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the switch in its error state — the message and `aria-invalid` follow\n   * from it.\n   */\n  error?: string;\n  /**\n   * Draws the check in the handle while the switch is on, the page's\n   * \"icon on selected switch\" form.\n   * @default false\n   */\n  icon?: boolean;\n} & Omit<RACSwitchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// state layer while the switch can change, and are left off while it\n// cannot, since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, icon: boolean, ripple: Ripple, drag: Drag) {\n  return (state: SwitchButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const on = state.isSelected;\n    const dragging = interactive && drag.offset !== null;\n    const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);\n    return <>\n        <span {...{\n        0: {\n          className: \"x6s0dn4 x1vqgdyp x9f619 x1ypdohk x78zum5 x2lah0s xvni27 xl56j7k\"\n        },\n        2: {\n          className: \"x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k xt0e3qv\"\n        },\n        1: {\n          className: \"x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k x1h6gzvc\"\n        },\n        3: {\n          className: \"x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n          <span {...stylex.props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && styles.trackFocused)}>\n            <span {...interactive ? drag.handlers(on) : {}} {...stylex.props(styles.seat, on && styles.seatOn, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0))}>\n              <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.layer, interactive && state.isHovered && hoverLayers[on ? 'on' : 'off'], interactive && state.isPressed && pressedLayers[on ? 'on' : 'off'])}>\n                {interactive ? ripple.surface : null}\n              </span>\n              <span {...stylex.props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled))}>\n                {icon && on ? <CheckGlyph className=\"xlup9mm x1lliihq x1kky2od\" /> : null}\n              </span>\n            </span>\n          </span>\n        </span>\n        {children === undefined ? null : <span {...{\n        0: {\n          className: \"x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll\"\n        },\n        2: {\n          className: \"x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv\"\n        },\n        1: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        },\n        3: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n            {children}\n          </span>}\n      </>;\n  };\n}\n\n/**\n * A switch that turns a setting on or off, with its label and optionally a\n * description or an error under it. Its state is React Aria's: pass\n * `isSelected` with `onChange` to control it, or `defaultSelected` to let it\n * keep its own. A switch takes effect as it is flipped, which is what sets\n * it apart from a checkbox in a form.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Switch({\n  children,\n  description,\n  error,\n  icon = false,\n  ...props\n}: SwitchProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const drag = useHandleDrag();\n  const validationBehavior = useFieldValidationBehavior();\n  return <SwitchField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles({\n    className: \"x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz\"\n  }, props)}>\n      <SwitchButton className=\"xjp7ctv\">\n        {buttonContent(children, icon, ripple, drag)}\n      </SwitchButton>\n      <div className=\"x1xdureb\">\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </SwitchField>;\n}\n\n/**\n * The handle following a pointer across the track, as the switch page draws\n * a pressed switch. The seat's inset comes from the drag while one is under\n * way, and the switch settles from where the handle was let go: on past the\n * middle of the track, off before it.\n *\n * What flips the switch on an ordinary tap is React Aria's own press, which\n * ends on the pointer being released and pays no attention to where the\n * handle was dragged to — so a drag has to end that press before releasing,\n * which is what the pointer cancel is for, and settle the switch itself.\n * Settling means clicking the field's own input, the same element a tap\n * reaches in the end: the change goes through React Aria, and a controlled\n * switch stays controlled, since nothing here calls `onChange` or holds any\n * state of the switch's own. The click the pointer's release sends after\n * that is cancelled too, so nothing flips the switch a second time.\n *\n * A press that never moves is left alone entirely, so a tap flips the switch\n * as it did before.\n */\nfunction useHandleDrag() {\n  const [offset, setOffset] = useState<null | number>(null);\n  const origin = useRef<null | {\n    base: number;\n    on: boolean;\n    rtl: boolean;\n    x: number;\n  }>(null);\n  const settled = useRef<null | number>(null);\n  const cancelClick = useRef(false);\n  const onPointerCancel = useCallback(() => {\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n  }, []);\n  const onClickCapture = useCallback((event: ReactMouseEvent<HTMLSpanElement>) => {\n    if (!cancelClick.current) {\n      return;\n    }\n    cancelClick.current = false;\n    // The label's activation is the browser's own, so this is what stops the\n    // input being flipped by a drag that settled where it began.\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    if (from === null) {\n      return;\n    }\n    const along = from.rtl ? from.x - event.clientX : event.clientX - from.x;\n    const next = Math.min(TRAVEL, Math.max(0, from.base + along));\n    settled.current = next;\n    setOffset(next);\n  }, []);\n  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    const stopped = settled.current;\n    const seat = event.currentTarget;\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n    // A press that never moved is a tap, which React Aria flips on its own.\n    if (from === null || stopped === null) {\n      return;\n    }\n    // React Aria's press is about to flip the switch from wherever it\n    // started, so it is cancelled first — a pointer cancel is what ends a\n    // press without firing it — and the drag settles the switch instead.\n    seat.dispatchEvent(new PointerEvent('pointercancel', {\n      bubbles: true,\n      pointerId: event.pointerId,\n      pointerType: event.pointerType\n    }));\n    // The pointer's own click follows this, by which time the switch has\n    // already settled.\n    cancelClick.current = true;\n    if (stopped > TRAVEL / 2 === from.on) {\n      return;\n    }\n    const input = seat.closest('label')?.querySelector('input');\n    input?.click();\n  }, []);\n  const handlers = useCallback((on: boolean) => ({\n    onClickCapture,\n    onPointerCancel,\n    onPointerDown: (event: ReactPointerEvent<HTMLSpanElement>) => {\n      if (event.pointerType === 'mouse' && event.button !== 0) {\n        return;\n      }\n      origin.current = {\n        base: on ? TRAVEL : 0,\n        on,\n        rtl: getComputedStyle(event.currentTarget).direction === 'rtl',\n        x: event.clientX\n      };\n      settled.current = null;\n      try {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      } catch {\n        // A pointer the browser is not tracking has no capture to take —\n        // a synthetic event in a test, where the moves are dispatched on\n        // this element anyway.\n      }\n    },\n    onPointerMove,\n    onPointerUp\n  }), [onClickCapture, onPointerCancel, onPointerMove, onPointerUp]);\n  return {\n    handlers,\n    offset\n  };\n}\nexport type { SwitchProps };\nexport default Switch;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["MouseEvent","ReactMouseEvent","ReactNode","PointerEvent","ReactPointerEvent","SwitchFieldProps","RACSwitchFieldProps","SwitchButtonRenderProps","stylex","useCallback","useRef","useState","SwitchButton","SwitchField","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","radii","spacing","stateLayerOpacity","typography","_temp","kLqNvP","styles","handle","kGNEyG","kWkggS","kZKoxP","kaIpWk","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","handleActive","handleDisabled","handleOn","handleOnActive","handleOnDisabled","handlePressed","layer","kpwlN0","kVAEAm","seat","k87sOh","seatAt","offset","val","undefined","seatDragging","seatOn","track","kVAM5u","ksu8eU","kMzoRj","kmuXW","trackDisabled","trackFocused","trackOn","trackOnDisabled","hoverLayers","off","on","pressedLayers","TRAVEL","Drag","ReturnType","useHandleDrag","Ripple","HTMLSpanElement","SwitchProps","children","description","error","icon","Omit","buttonContent","ripple","drag","state","interactive","isDisabled","isReadOnly","isSelected","dragging","active","isHovered","isPressed","isFocusVisible","className","props","ringVisible","handlers","surface","Switch","t0","$","_c","t1","validationBehavior","T0","t2","t3","t4","t5","t6","t7","setOffset","origin","settled","cancelClick","Symbol","for","current","onPointerCancel","event","preventDefault","stopPropagation","onClickCapture","event_0","from","along","rtl","x","clientX","next","Math","min","max","base","onPointerMove","event_1","from_0","stopped","currentTarget","dispatchEvent","bubbles","pointerId","pointerType","input","closest","querySelector","click","onPointerUp","onPointerDown","event_2","button","getComputedStyle","direction","setPointerCapture"],"sources":["../../../src/components/switch/index.tsx"],"sourcesContent":["// React's event types are aliased because `useHandleDrag` also constructs a\n// DOM `PointerEvent`. Imported unaliased, the name shadows that constructor:\n// TypeScript still resolves the call to the global, since a type-only import\n// takes no value name, but a reader and a static analyser alike read it as\n// React's type, which has no runtime value behind it at all.\nimport type { MouseEvent as ReactMouseEvent, ReactNode, PointerEvent as ReactPointerEvent } from 'react';\nimport type { SwitchFieldProps as RACSwitchFieldProps, SwitchButtonRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useCallback, useRef, useState } from 'react';\nimport { SwitchButton, SwitchField } from 'react-aria-components';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { colors, motion, radii, spacing, stateLayerOpacity, typography } from '../../tokens/design.tokens.stylex';\n\n// The switch page: a 52 by 32dp track with a 2dp outline and a full corner,\n// a handle that is 16dp off, 24dp on and 28dp while pressed, a 16dp icon in\n// the handle when asked for, a 40dp state layer around the handle and a 48dp\n// target. Off, the track is surface container highest inside an outline\n// rule and the handle is outline, turning on surface variant while hovered,\n// pressed or focused; on, the track is primary and the handle on primary,\n// turning primary container in the same states, with the icon in on primary\n// container. Disabled, the track and its rule are on surface at the\n// disabled container opacity and the handle on surface at the disabled\n// content opacity, or surface when on. The state layer is on surface off and\n// primary on.\n//\n// React Aria's `SwitchField` is the root, a div holding the description and\n// error slots; its `SwitchButton` is the label around a visually hidden\n// input, and everything drawn is that label's children, chosen from the\n// render state React Aria hands them. The field is the two-column grid the\n// checkbox uses, with the label `display: contents`, so the description and\n// error line up under the text.\n//\n// The handle travels between the two ends of the track and grows between\n// its three sizes on the same transition, `motion.durationShort2` with the\n// standard easing; the state layer and the ripple sit on a 40dp disc centred\n// on the handle, so they move with it. The adjacent label is body-large on\n// surface, which the page keeps the same whichever way the switch is.\n//\n// The page's pressed handle follows the pointer: it grows, travels with the\n// drag, and the switch flips when it is released past the middle of the\n// track or springs back when it is not. React Aria's `SwitchButton` has no\n// drag of its own, so the travel is this component's — see `useHandleDrag`.\nconst _temp = {\n  kLqNvP: \"x1lxsm33\",\n  \"$$css\": true\n};\nconst styles = {\n  handle: {\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xp2scj5\",\n    kZKoxP: \"xlup9mm\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xscdzaa\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1kky2od\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x7okvu4\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  handleActive: {\n    kWkggS: \"x1ccu2yh\",\n    $$css: true\n  },\n  handleDisabled: {\n    kWkggS: \"x1crcgwy\",\n    $$css: true\n  },\n  handleOn: {\n    kWkggS: \"x1ntwmx2\",\n    kZKoxP: \"xxk0z11\",\n    kzqmXN: \"xvy4d1p\",\n    $$css: true\n  },\n  handleOnActive: {\n    kWkggS: \"xp89om9\",\n    $$css: true\n  },\n  handleOnDisabled: {\n    kWkggS: \"x14s9m32\",\n    kMwMTN: \"x1gpw424\",\n    $$css: true\n  },\n  handlePressed: {\n    kZKoxP: \"x1fgtraw\",\n    kzqmXN: \"xgd8bvy\",\n    $$css: true\n  },\n  layer: {\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"x1vqgdyp\",\n    kaIpWk: \"x3y1ksm\",\n    kB7OPa: \"x9f619\",\n    kzqmXN: \"x100vrsf\",\n    kpwlN0: \"x1qx2jxi\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x15406qy\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seat: {\n    kGNEyG: \"x6s0dn4\",\n    kZKoxP: \"x1fgtraw\",\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"xgd8bvy\",\n    k87sOh: \"x13vifvy\",\n    kLqNvP: \"x1o0tod\",\n    kjj79g: \"xl56j7k\",\n    kVAEAm: \"x10l6tqk\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"x2hifos\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  seatAt: (offset: number) => [_temp, {\n    \"--x-insetInlineStart\": (val => typeof val === \"number\" ? val + \"px\" : val != null ? val : undefined)(`${offset}px`)\n  }],\n  seatDragging: {\n    kIyJzY: \"x1mq3mr6\",\n    $$css: true\n  },\n  seatOn: {\n    kLqNvP: \"x1n8ud3w\",\n    $$css: true\n  },\n  track: {\n    kWkggS: \"x1rrhr5q\",\n    kZKoxP: \"x10w6t97\",\n    kVAM5u: \"x1fwvt7v\",\n    kaIpWk: \"x3y1ksm\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kmuXW: \"x2lah0s\",\n    kzqmXN: \"xvni27\",\n    kVAEAm: \"x1n2onr6\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  trackDisabled: {\n    kWkggS: \"x1trd85j\",\n    kVAM5u: \"xrh88j3\",\n    $$css: true\n  },\n  trackFocused: {\n    $$css: true\n  },\n  trackOn: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x1uajy3w\",\n    $$css: true\n  },\n  trackOnDisabled: {\n    kWkggS: \"x19v6zzp\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  }\n};\n\n// The state layer over the handle: on surface while the switch is off and\n// primary while it is on, at the hover or the pressed opacity.\nconst hoverLayers = {\n  off: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  off: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  on: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\n\n// How far the seat travels: the track's 48dp inside its 2dp rule, less the\n// seat's own 28dp.\nconst TRAVEL = 20;\ntype Drag = ReturnType<typeof useHandleDrag>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype SwitchProps = {\n  /**\n   * The label, beside the switch. A switch that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the switch in its error state — the message and `aria-invalid` follow\n   * from it.\n   */\n  error?: string;\n  /**\n   * Draws the check in the handle while the switch is on, the page's\n   * \"icon on selected switch\" form.\n   * @default false\n   */\n  icon?: boolean;\n} & Omit<RACSwitchFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// state layer while the switch can change, and are left off while it\n// cannot, since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, icon: boolean, ripple: Ripple, drag: Drag) {\n  return (state: SwitchButtonRenderProps) => {\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const on = state.isSelected;\n    const dragging = interactive && drag.offset !== null;\n    const active = interactive && (state.isHovered || state.isPressed || state.isFocusVisible);\n    return <>\n        <span {...{\n        0: {\n          className: \"x6s0dn4 x1vqgdyp x9f619 x1ypdohk x78zum5 x2lah0s xvni27 xl56j7k\"\n        },\n        2: {\n          className: \"x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k xt0e3qv\"\n        },\n        1: {\n          className: \"x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k x1h6gzvc\"\n        },\n        3: {\n          className: \"x6s0dn4 x1vqgdyp x9f619 x78zum5 x2lah0s xvni27 xl56j7k x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n          <span {...stylex.props(styles.track, on && styles.trackOn, state.isDisabled && (on ? styles.trackOnDisabled : styles.trackDisabled), state.isFocusVisible && styles.trackFocused, state.isFocusVisible && focus.ringVisible)}>\n            <span {...interactive ? drag.handlers(on) : {}} {...stylex.props(styles.seat, on && styles.seatOn, dragging && styles.seatDragging, dragging && styles.seatAt(drag.offset ?? 0))}>\n              <span {...interactive ? ripple.handlers : {}} {...stylex.props(styles.layer, interactive && state.isHovered && hoverLayers[on ? 'on' : 'off'], interactive && state.isPressed && pressedLayers[on ? 'on' : 'off'])}>\n                {interactive ? ripple.surface : null}\n              </span>\n              <span {...stylex.props(styles.handle, on && styles.handleOn, active && (on ? styles.handleOnActive : styles.handleActive), (dragging || interactive && state.isPressed) && styles.handlePressed, state.isDisabled && (on ? styles.handleOnDisabled : styles.handleDisabled))}>\n                {icon && on ? <CheckGlyph className=\"xlup9mm x1lliihq x1kky2od\" /> : null}\n              </span>\n            </span>\n          </span>\n        </span>\n        {children === undefined ? null : <span {...{\n        0: {\n          className: \"x9f619 x139gbkf x1ypdohk x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll\"\n        },\n        2: {\n          className: \"x9f619 x139gbkf x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll xt0e3qv\"\n        },\n        1: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        },\n        3: {\n          className: \"x9f619 x16svsjw x1848etk x1c52epr x1qn8t5l xh7dzej x1cmllll x1xj74d8 x1h6gzvc\"\n        }\n      }[!!state.isReadOnly << 1 | !!state.isDisabled << 0]}>\n            {children}\n          </span>}\n      </>;\n  };\n}\n\n/**\n * A switch that turns a setting on or off, with its label and optionally a\n * description or an error under it. Its state is React Aria's: pass\n * `isSelected` with `onChange` to control it, or `defaultSelected` to let it\n * keep its own. A switch takes effect as it is flipped, which is what sets\n * it apart from a checkbox in a form.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Switch({\n  children,\n  description,\n  error,\n  icon = false,\n  ...props\n}: SwitchProps) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const drag = useHandleDrag();\n  const validationBehavior = useFieldValidationBehavior();\n  return <SwitchField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles({\n    className: \"x7a106z x9f619 xpr5407 xrvj5dj x1pmbctz\"\n  }, props)}>\n      <SwitchButton className=\"xjp7ctv\">\n        {buttonContent(children, icon, ripple, drag)}\n      </SwitchButton>\n      <div className=\"x1xdureb\">\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </SwitchField>;\n}\n\n/**\n * The handle following a pointer across the track, as the switch page draws\n * a pressed switch. The seat's inset comes from the drag while one is under\n * way, and the switch settles from where the handle was let go: on past the\n * middle of the track, off before it.\n *\n * What flips the switch on an ordinary tap is React Aria's own press, which\n * ends on the pointer being released and pays no attention to where the\n * handle was dragged to — so a drag has to end that press before releasing,\n * which is what the pointer cancel is for, and settle the switch itself.\n * Settling means clicking the field's own input, the same element a tap\n * reaches in the end: the change goes through React Aria, and a controlled\n * switch stays controlled, since nothing here calls `onChange` or holds any\n * state of the switch's own. The click the pointer's release sends after\n * that is cancelled too, so nothing flips the switch a second time.\n *\n * A press that never moves is left alone entirely, so a tap flips the switch\n * as it did before.\n */\nfunction useHandleDrag() {\n  const [offset, setOffset] = useState<null | number>(null);\n  const origin = useRef<null | {\n    base: number;\n    on: boolean;\n    rtl: boolean;\n    x: number;\n  }>(null);\n  const settled = useRef<null | number>(null);\n  const cancelClick = useRef(false);\n  const onPointerCancel = useCallback(() => {\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n  }, []);\n  const onClickCapture = useCallback((event: ReactMouseEvent<HTMLSpanElement>) => {\n    if (!cancelClick.current) {\n      return;\n    }\n    cancelClick.current = false;\n    // The label's activation is the browser's own, so this is what stops the\n    // input being flipped by a drag that settled where it began.\n    event.preventDefault();\n    event.stopPropagation();\n  }, []);\n  const onPointerMove = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    if (from === null) {\n      return;\n    }\n    const along = from.rtl ? from.x - event.clientX : event.clientX - from.x;\n    const next = Math.min(TRAVEL, Math.max(0, from.base + along));\n    settled.current = next;\n    setOffset(next);\n  }, []);\n  const onPointerUp = useCallback((event: ReactPointerEvent<HTMLSpanElement>) => {\n    const from = origin.current;\n    const stopped = settled.current;\n    const seat = event.currentTarget;\n    origin.current = null;\n    settled.current = null;\n    setOffset(null);\n    // A press that never moved is a tap, which React Aria flips on its own.\n    if (from === null || stopped === null) {\n      return;\n    }\n    // React Aria's press is about to flip the switch from wherever it\n    // started, so it is cancelled first — a pointer cancel is what ends a\n    // press without firing it — and the drag settles the switch instead.\n    seat.dispatchEvent(new PointerEvent('pointercancel', {\n      bubbles: true,\n      pointerId: event.pointerId,\n      pointerType: event.pointerType\n    }));\n    // The pointer's own click follows this, by which time the switch has\n    // already settled.\n    cancelClick.current = true;\n    if (stopped > TRAVEL / 2 === from.on) {\n      return;\n    }\n    const input = seat.closest('label')?.querySelector('input');\n    input?.click();\n  }, []);\n  const handlers = useCallback((on: boolean) => ({\n    onClickCapture,\n    onPointerCancel,\n    onPointerDown: (event: ReactPointerEvent<HTMLSpanElement>) => {\n      if (event.pointerType === 'mouse' && event.button !== 0) {\n        return;\n      }\n      origin.current = {\n        base: on ? TRAVEL : 0,\n        on,\n        rtl: getComputedStyle(event.currentTarget).direction === 'rtl',\n        x: event.clientX\n      };\n      settled.current = null;\n      try {\n        event.currentTarget.setPointerCapture(event.pointerId);\n      } catch {\n        // A pointer the browser is not tracking has no capture to take —\n        // a synthetic event in a test, where the moves are dispatched on\n        // this element anyway.\n      }\n    },\n    onPointerMove,\n    onPointerUp\n  }), [onClickCapture, onPointerCancel, onPointerMove, onPointerUp]);\n  return {\n    handlers,\n    offset\n  };\n}\nexport type { SwitchProps };\nexport default Switch;"],"mappings":"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"}

package/dist/components/tabs/index.js

@@ -1,9 +1,15 @@
+import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
+import { focus } from "../../styles/focus.js";
 import { c } from "react/compiler-runtime";
 import { createContext, useContext, useEffect, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { SelectionIndicator, Tab, TabList, TabPanel, TabPanels, Tabs } from "react-aria-components";
 //#region src/components/tabs/index.tsx
+const styles = { panel: {
+	kB7OPa: "x9f619",
+	$$css: true
+} };
 const NO_PANELS = /* @__PURE__ */ new Set();
 const PanelsContext = createContext(NO_PANELS);
 const RegisterPanelContext = createContext(() => () => {});
@@ -114,10 +120,10 @@ function TabsList(props) {
 	} else t1 = $[4];
 	return t1;
 }
-function TabsPanel(props) {
+function TabsPanel(props$1) {
 	const $ = c(9);
 	const register = useContext(RegisterPanelContext);
-	const { id } = props;
+	const { id } = props$1;
 	let t0;
 	let t1;
 	if ($[0] !== id || $[1] !== register) {
@@ -136,18 +142,18 @@ function TabsPanel(props) {
 	}
 	useEffect(t0, t1);
 	let t2;
-	if ($[4] !== props) {
-		t2 = mergeStatefulStyles({ className: "x9f619 xrgy624 x1hl8ikr x9v5kkp x1t137rt x1de99jn" }, props);
-		$[4] = props;
+	if ($[4] !== props$1) {
+		t2 = mergeStatefulStyles(props(styles.panel, focus.ring), props$1);
+		$[4] = props$1;
 		$[5] = t2;
 	} else t2 = $[5];
 	let t3;
-	if ($[6] !== props || $[7] !== t2) {
+	if ($[6] !== props$1 || $[7] !== t2) {
 		t3 = /* @__PURE__ */ jsx(TabPanel, {
-			...props,
+			...props$1,
 			...t2
 		});
-		$[6] = props;
+		$[6] = props$1;
 		$[7] = t2;
 		$[8] = t3;
 	} else t3 = $[8];