@kanso-labs/kanso-ui 0.40.5 → 0.40.7

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","CheckboxButtonRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","CheckboxButton","CheckboxField","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","stateLayerOpacity","FORCED_COLORS","styles","box","k6CgDc","kGNEyG","kWkggS","kZKoxP","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","boxMarked","boxMarkedDisabled","boxMarkedError","boxUnmarkedActive","boxUnmarkedDisabled","boxUnmarkedError","control","hoverLayers","error","marked","unmarked","focusLayers","pressedLayers","CheckboxProps","children","description","Omit","Ripple","ReturnType","HTMLSpanElement","Tone","buttonContent","ripple","state","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","Checkbox","t0","$","validationBehavior","T0","t1","t2","field","t3","t4","t5","Symbol","for","messages","t6","t7","stylex.props","_c","props"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { CheckboxButton, CheckboxField } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } 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, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  box: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d xmnqt3w\",\n    kMwMTN: \"xrpadme x1bhcspo\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on xmnqt3w\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  error: {\n    kWkggS: \"xyn212m\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple) {\n  return (state: CheckboxButtonRenderProps) => {\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel state={state}>{children}</ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps & RefAttributes<HTMLDivElement>) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <CheckboxButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple)}\n      </CheckboxButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} />\n      </div>\n    </CheckboxField>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","CheckboxButtonRenderProps","CheckboxFieldProps","RACCheckboxFieldProps","stylex","useContext","CheckboxButton","CheckboxField","CheckboxGroupStateContext","ControlLabel","controlStyles","FieldMessage","invalidFrom","useFieldValidationBehavior","CheckGlyph","IndeterminateGlyph","useRipple","focus","mergeStatefulStyles","colors","motion","stateLayerOpacity","FORCED_COLORS","styles","box","k6CgDc","kGNEyG","kWkggS","kZKoxP","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kjj79g","kIyJzY","k1ekBW","kAMwcw","$$css","boxMarked","boxMarkedDisabled","boxMarkedError","boxUnmarkedActive","boxUnmarkedDisabled","boxUnmarkedError","control","hoverLayers","error","marked","unmarked","focusLayers","pressedLayers","CheckboxProps","children","description","Omit","Ripple","ReturnType","HTMLSpanElement","Tone","buttonContent","ripple","inGroup","state","required","isRequired","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","handlers","props","disc","controlReadOnly","controlDisabled","ringVisible","surface","Checkbox","t0","$","validationBehavior","reachable","validate","undefined","name","T0","t1","t2","field","t3","t4","t5","Symbol","for","messages","t6","t7","stylex.props","_c","props"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldProps as RACCheckboxFieldProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { useContext } from 'react';\nimport { CheckboxButton, CheckboxField, CheckboxGroupStateContext } from 'react-aria-components';\nimport { ControlLabel } from '../../control';\nimport { controlStyles } from '../../control/styles';\nimport { FieldMessage } from '../../field';\nimport { invalidFrom, useFieldValidationBehavior } from '../../field/root';\nimport { CheckGlyph, IndeterminateGlyph } 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, stateLayerOpacity } from '../../tokens/design.tokens.stylex';\n\n// The checkbox page: an 18dp box with a 2dp corner and an 18dp glyph, inside\n// a 40dp state layer, with a 48dp target. Unselected, the box is a 2dp rule\n// in on surface variant that turns on surface while hovered, pressed or\n// focused; selected or indeterminate, it fills with primary and the glyph\n// takes on primary. The error pair is error and on error, and disabled is\n// on surface at the disabled opacity for the rule or the fill, with the\n// glyph in surface. The state layer is on surface over an unselected box and\n// primary over a selected one while hovered, and the two swap once pressed.\n//\n// React Aria's `CheckboxField` is the root, a div holding the description\n// and error slots; its `CheckboxButton` is the label around a visually\n// hidden input, and everything drawn is that label's children, chosen from\n// the render state React Aria hands them. The field is a two-column grid —\n// the control, then the text — and the label is `display: contents`, so the\n// control and the label text each take a column and the description and\n// error line up under the text rather than under the box.\n//\n// The adjacent label is body-large on surface, which the page keeps the same\n// whether or not the box is selected. The corner is a literal: the page's\n// 2dp is a step the shape scale does not carry.\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  box: {\n    k6CgDc: \"x12w9bfk\",\n    kGNEyG: \"x6s0dn4\",\n    kWkggS: \"xjbqb8w\",\n    kZKoxP: \"xmix8c7\",\n    kVAM5u: \"x1is7jjm\",\n    kaIpWk: \"x1cum3z5\",\n    ksu8eU: \"x1y0btm7\",\n    kMzoRj: \"xdh2fpr\",\n    kB7OPa: \"x9f619\",\n    kMwMTN: \"xwjo7ld\",\n    k1xSpc: \"x78zum5\",\n    kzqmXN: \"x1xp8n7a\",\n    kjj79g: \"xl56j7k\",\n    kIyJzY: \"x1qno0dh\",\n    k1ekBW: \"xts7igz\",\n    kAMwcw: \"xpc4ca7\",\n    $$css: true\n  },\n  boxMarked: {\n    kWkggS: \"xnety89\",\n    kVAM5u: \"x9r1u3d\",\n    $$css: true\n  },\n  boxMarkedDisabled: {\n    kWkggS: \"x1crcgwy\",\n    kVAM5u: \"x9r1u3d xmnqt3w\",\n    kMwMTN: \"xrpadme x1bhcspo\",\n    $$css: true\n  },\n  boxMarkedError: {\n    kWkggS: \"xwi4nbo\",\n    kVAM5u: \"x9r1u3d\",\n    kMwMTN: \"x1l7c2jh\",\n    $$css: true\n  },\n  boxUnmarkedActive: {\n    kVAM5u: \"x1pacwz9\",\n    $$css: true\n  },\n  boxUnmarkedDisabled: {\n    kVAM5u: \"xp1r3on xmnqt3w\",\n    $$css: true\n  },\n  boxUnmarkedError: {\n    kVAM5u: \"xx78ee7\",\n    $$css: true\n  },\n  control: {\n    kMwMTN: \"x139gbkf\",\n    $$css: true\n  }\n};\n\n// The state layer's colour follows the box: on surface over an unmarked box\n// and primary over a marked one while hovered, the two swapped once pressed,\n// and error throughout while invalid.\nconst hoverLayers = {\n  error: {\n    kWkggS: \"x55e1u4\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x659ado\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1b18xnh\",\n    $$css: true\n  }\n};\n\n// A keyboard's focus draws the hover layer's colour at the focus opacity.\nconst focusLayers = {\n  error: {\n    kWkggS: \"xyn212m\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"x1sog3nf\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"xwqhyid\",\n    $$css: true\n  }\n};\nconst pressedLayers = {\n  error: {\n    kWkggS: \"x3czxiy\",\n    $$css: true\n  },\n  marked: {\n    kWkggS: \"xjeeohs\",\n    $$css: true\n  },\n  unmarked: {\n    kWkggS: \"x1dvjsmr\",\n    $$css: true\n  }\n};\ntype CheckboxProps = {\n  /**\n   * The label, beside the box. A checkbox that a row labels some other way\n   * leaves it out and passes `aria-label` instead.\n   *\n   * A link or a button in it acts on its own, as in a native label: a press\n   * or Enter on \"the terms\" in \"I agree to the terms\" follows the link and\n   * leaves the checkbox as it was. A press anywhere else in the label\n   * toggles it.\n   */\n  children?: ReactNode;\n  /**\n   * A hint under the label. Replaced by `error` when there is one, so the\n   * two never stack.\n   */\n  description?: string;\n  /**\n   * The problem with the current value, in words. Its presence is what puts\n   * the checkbox in its error state — the message, the error colours and\n   * `aria-invalid` all follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n} & Omit<RACCheckboxFieldProps, 'children' | 'isInvalid' | 'validationBehavior'>;\ntype Ripple = ReturnType<typeof useRipple<HTMLSpanElement>>;\ntype Tone = 'error' | 'marked' | 'unmarked';\n\n// What the label draws, chosen from the render state React Aria hands it.\n// Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs. The ripple's handlers and surface go on the\n// control while the checkbox can change, and are left off while it cannot,\n// since a press that changes nothing should not look like one.\nfunction buttonContent(children: ReactNode, ripple: Ripple, inGroup: boolean) {\n  return (state: CheckboxButtonRenderProps) => {\n    // A checkbox in a group is marked by the group's label rather than its\n    // own: the group is what has to have a choice made in it.\n    const required = state.isRequired && !inGroup;\n    const marked = state.isSelected || state.isIndeterminate;\n    const interactive = !state.isDisabled && !state.isReadOnly;\n    const tone: Tone = state.isInvalid ? 'error' : marked ? 'marked' : 'unmarked';\n    const active = state.isHovered || state.isPressed || state.isFocusVisible;\n    return <>\n        <span {...interactive ? ripple.handlers : {}} {...stylex.props(controlStyles.disc, styles.control, state.isReadOnly && controlStyles.controlReadOnly, state.isDisabled && controlStyles.controlDisabled, interactive && state.isHovered && hoverLayers[tone], interactive && state.isFocusVisible && focusLayers[tone], interactive && state.isPressed && pressedLayers[tone], state.isFocusVisible && focus.ringVisible)}>\n          <span {...stylex.props(styles.box, marked && styles.boxMarked, !marked && state.isInvalid && styles.boxUnmarkedError, !marked && !state.isInvalid && interactive && active && styles.boxUnmarkedActive, marked && state.isInvalid && styles.boxMarkedError, state.isDisabled && (marked ? styles.boxMarkedDisabled : styles.boxUnmarkedDisabled))}>\n            {state.isIndeterminate ? <IndeterminateGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : state.isSelected ? <CheckGlyph className=\"xmix8c7 x1lliihq x1xp8n7a\" /> : null}\n          </span>\n          {interactive ? ripple.surface : null}\n        </span>\n        <ControlLabel isRequired={required} state={state}>\n          {children}\n        </ControlLabel>\n      </>;\n  };\n}\n\n/**\n * A checkbox with its label, and optionally a description or an error under\n * it. Its state is React Aria's: pass `isSelected` with `onChange` to\n * control it, or `defaultSelected` to let it keep its own; `isIndeterminate`\n * draws the dash for a box that stands for a partly selected set. Inside a\n * `CheckboxGroup` it takes its `value` and the group's selection instead.\n *\n * `isRequired` ends the label in the asterisk every required field's label\n * ends in. Inside a `CheckboxGroup` the group's label carries it instead,\n * since the group is what must have a choice made in it.\n *\n * The call site's `className` and `style` land on the field as a whole,\n * which is the element a layout positions.\n */\nfunction Checkbox({\n  children,\n  description,\n  error,\n  ...props\n}: CheckboxProps & RefAttributes<HTMLDivElement>) {\n  const ripple = useRipple<HTMLSpanElement>();\n  const validationBehavior = useFieldValidationBehavior();\n\n  // Whether a message can ever reach this checkbox, which is what a form\n  // keeps an empty line under a field for. One in a group cannot — the\n  // group owns the one message and keeps its own line for it — and one on\n  // its own can only where something can find it wanting: a requirement, a\n  // check of its own, or a name a form's errors can be keyed by. Without\n  // this every checkbox in a form sat a line taller than it draws, and a\n  // group of them in a form gained a line after every item.\n  const inGroup = useContext(CheckboxGroupStateContext) !== null;\n  const reachable = !inGroup && (props.isRequired === true || props.validate !== undefined || props.name !== undefined);\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      <CheckboxButton className=\"xjp7ctv\">\n        {buttonContent(children, ripple, inGroup)}\n      </CheckboxButton>\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} reserve={reachable} />\n      </div>\n    </CheckboxField>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}

package/dist/components/checkbox-group/index.js

@@ -1,8 +1,8 @@
 "use client";
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles } from "../../styles/merge.js";
-import { groupStyles } from "../../field/styles.js";
 import { invalidFrom, useFieldValidationBehavior } from "../../field/root.js";
+import { groupStyles } from "../../field/styles.js";
 import { FieldLabel, FieldMessage } from "../../field/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";

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

@@ -3,8 +3,11 @@ import { ButtonProps, ToggleButtonProps } from "react-aria-components";
 //#region src/components/chip/index.d.ts
 /** An assist or suggestion chip: an action, drawn as a plain button. */
 type ChipActionProps = Omit<ButtonProps, 'children' | 'isPending'> & {
-  /** The chip's label. */
-  children?: ReactNode;
+  /**
+   * The chip's label. Required: the page draws no chip without one, and a
+   * chip with none is an empty button to a screen reader.
+   */
+  children: ReactNode;
   /**
    * Raises the chip off the page on a container of its own, at the page's
    * elevation 1, in place of the outline.
@@ -29,9 +32,11 @@ type ChipFilterProps = Omit<ToggleButtonProps, 'children'> & {
    * The chip's label. A node rather than React Aria's node-or-function,
    * since the chip puts its own check before whatever this is and a function
    * would be handed a `defaultChildren` the chip never rendered. ChipGroup's
-   * chip narrows it the same way, for the same reason.
+   * chip narrows it the same way, for the same reason. Required: the page
+   * draws no chip without one, and a chip with none is an empty button to a
+   * screen reader.
    */
-  children?: ReactNode;
+  children: ReactNode;
   /**
    * Raises the chip off the page on a container of its own, at the page's
    * elevation 1, in place of the outline. A selected one keeps the

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ButtonRenderProps","FocusableElement","ButtonProps","RACButtonProps","ToggleButtonProps","RACToggleButtonProps","ToggleButtonRenderProps","Button","ToggleButton","ChipKind","chipGlyph","chipLabel","chipPropsFor","useRipple","ariaAttributesOf","buttonRenderer","toggleButtonRenderer","mergeStatefulStyles","ChipActionProps","Omit","children","elevated","icon","variant","ChipFilterProps","ChipProps","ChipVariant","ActionChip","t0","$","t1","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","render","props","undefined","element","aria","t2","ripple","isDisabled","T0","t3","t4","handlers","t5","actionChipClasses","t6","surface","actionChipContent","t7","kind","state","isSelected","Chip","isAction","chipContent","FilterChip","filterChipClasses","t8","_c"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode, RefAttributes } from 'react'\nimport type {\n  ButtonRenderProps,\n  FocusableElement,\n  ButtonProps as RACButtonProps,\n  ToggleButtonProps as RACToggleButtonProps,\n  ToggleButtonRenderProps,\n} from 'react-aria-components'\n\nimport { Button, ToggleButton } from 'react-aria-components'\n\nimport type { ChipKind } from '../../chip'\n\nimport { chipGlyph, chipLabel, chipPropsFor } from '../../chip'\nimport { useRipple } from '../../hooks/useRipple'\nimport {\n  ariaAttributesOf,\n  buttonRenderer,\n  toggleButtonRenderer,\n} from '../../render/aria'\nimport { mergeStatefulStyles } from '../../styles/merge'\n\n// The pill, its containers, its check and its disabled treatment are the\n// chip module's in `src/chip`, shared with the chips a ChipGroup draws; what\n// is here is React Aria's button around them. Three of the chips page's four\n// chips are drawn here, and `variant` picks the button:\n//\n// - **A filter chip**, the default, is React Aria's `ToggleButton`: a\n//   two-state button announced through `aria-pressed`, which takes the\n//   secondary container and the check once selected.\n// - **An assist or suggestion chip** is React Aria's `Button`: an action, so\n//   nothing is announced as pressed and nothing is ever selected. The two\n//   differ in the label's role alone; see `src/chip/styles.ts`.\n//\n// The page's fourth, the input chip, is ChipGroup's removable chip, and a\n// token in a TokenField.\n//\n// Two of the call site's props go on the element through `src/render/aria`\n// rather than through that spread, as `Button` and `IconButton` do. React\n// Aria builds a button's attributes from an allowlist that holds only the\n// labelling `aria-*` and the state it manages itself, so any other one — a\n// shortcut, an owned element — is dropped before it reaches the DOM. And it\n// wraps a keyboard handler it is given so that the event stops there unless\n// the handler asks otherwise, which is its convention rather than the DOM's;\n// on the element the handler bubbles, so an Escape pressed on a chip inside\n// a dialog still reaches the dialog.\n//\n// A press ripples, as it does on every other pressable control here: the\n// chips page names the ripple as the pressed state, beside the layer.\n\n/** An assist or suggestion chip: an action, drawn as a plain button. */\ntype ChipActionProps = Omit<RACButtonProps, 'children' | 'isPending'> & {\n  /** The chip's label. */\n  children?: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline.\n   * @default false\n   */\n  elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role.\n   * An icon drawn in `em` takes its size from the slot.\n   */\n  icon?: ReactNode\n  /**\n   * `assist` for an action the chip's context suggests, and `suggestion`\n   * for one the product generates. Either is an action rather than a\n   * selection, so neither is ever selected.\n   */\n  variant: 'assist' | 'suggestion'\n}\n\n/** A filter chip: a two-state button, the default. */\ntype ChipFilterProps = Omit<RACToggleButtonProps, 'children'> & {\n  /**\n   * The chip's label. A node rather than React Aria's node-or-function,\n   * since the chip puts its own check before whatever this is and a function\n   * would be handed a `defaultChildren` the chip never rendered. ChipGroup's\n   * chip narrows it the same way, for the same reason.\n   */\n  children?: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline. A selected one keeps the\n   * secondary container.\n   * @default false\n   */\n  elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role.\n   * The check takes its place while the chip is selected, so the chip keeps\n   * its width. An icon drawn in `em` takes its size from the slot.\n   */\n  icon?: ReactNode\n  /**\n   * A filter chip, a two-state button.\n   * @default 'filter'\n   */\n  variant?: 'filter'\n}\n\ntype ChipProps = ChipActionProps | ChipFilterProps\n\n/** Which of the chips page's chips a Chip is. */\ntype ChipVariant = 'assist' | 'filter' | 'suggestion'\n\nfunction ActionChip({\n  children,\n  elevated = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  variant,\n  ...props\n}: ChipActionProps & RefAttributes<HTMLButtonElement>) {\n  const element = { aria: ariaAttributesOf(props), onKeyDown, onKeyUp }\n  // Off while disabled, as on the filter chip. `onClick` goes through the\n  // ripple too: on a mouse press the ripple ends on the click, so a call\n  // site's own handler spread beside it would leave it pressed.\n  const ripple = useRipple<FocusableElement>(props.isDisabled !== true, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp,\n  })\n\n  return (\n    <Button\n      render={buttonRenderer(element, render)}\n      {...ripple.handlers}\n      {...props}\n      {...mergeStatefulStyles(actionChipClasses(variant, elevated), props)}\n    >\n      {actionChipContent(children, icon, ripple.surface)}\n    </Button>\n  )\n}\n\n// An action chip's classes: the unselected pill, which it always is.\nfunction actionChipClasses(kind: ChipKind, elevated: boolean) {\n  return (state: ButtonRenderProps) =>\n    chipPropsFor({ ...state, isSelected: false }, { elevated, kind })\n}\n\n// What an action chip draws: its icon, if any, then the label, and the\n// ripple over both. Built by a call for the reason `chipContent` is.\nfunction actionChipContent(\n  children: ReactNode,\n  icon: ReactNode,\n  surface: ReactNode,\n) {\n  return (state: ButtonRenderProps) => (\n    <>\n      {chipGlyph({ isDisabled: state.isDisabled, isSelected: false }, icon)}\n      {chipLabel(children)}\n      {surface}\n    </>\n  )\n}\n\n/**\n * A chip. By default a filter chip, which is a two-state button, so its\n * selected state is React Aria's `isSelected`: pass it with `onChange` to\n * control it, or `defaultSelected` to let it keep its own state. Selection is\n * announced through `aria-pressed` rather than a role of its own.\n *\n * `variant=\"assist\"` and `variant=\"suggestion\"` draw the page's two action\n * chips instead: plain buttons, pressed with `onPress`, never selected.\n */\nfunction Chip(props: ChipProps & RefAttributes<HTMLButtonElement>) {\n  if (isAction(props)) {\n    return <ActionChip {...props} />\n  }\n  return <FilterChip {...props} />\n}\n\n// What the chip draws, from React Aria's render state: the check while it is\n// selected or its icon while it is not, then the label, and the ripple over\n// both. Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction chipContent(children: ReactNode, icon: ReactNode, surface: ReactNode) {\n  return (state: ToggleButtonRenderProps) => (\n    <>\n      {chipGlyph(state, icon)}\n      {chipLabel(children)}\n      {surface}\n    </>\n  )\n}\n\nfunction FilterChip({\n  children,\n  elevated = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  variant = 'filter',\n  ...props\n}: ChipFilterProps & RefAttributes<HTMLButtonElement>) {\n  const element = { aria: ariaAttributesOf(props), onKeyDown, onKeyUp }\n  // Off while disabled: React Aria still forwards pointer events to a\n  // disabled element, and a press that changes nothing should not look like\n  // one. Typed as Button's ripple is, since React Aria types a toggle\n  // button's pointer events against a <div> rather than the <button> it\n  // renders. `onClick` goes through it for the action chip's reason.\n  const ripple = useRipple<FocusableElement>(props.isDisabled !== true, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp,\n  })\n\n  return (\n    <ToggleButton\n      render={toggleButtonRenderer(element, render)}\n      {...ripple.handlers}\n      {...props}\n      {...mergeStatefulStyles(filterChipClasses(variant, elevated), props)}\n    >\n      {chipContent(children, icon, ripple.surface)}\n    </ToggleButton>\n  )\n}\n\n// A filter chip's classes, from its render state.\nfunction filterChipClasses(kind: ChipKind, elevated: boolean) {\n  return (state: ToggleButtonRenderProps) =>\n    chipPropsFor(state, { elevated, kind })\n}\n\n// Whether a chip is one of the two action chips. A guard rather than a\n// comparison at the call, since TypeScript does not narrow the union through\n// React Aria's mapped prop types on `variant` alone.\nfunction isAction(props: ChipProps): props is ChipActionProps {\n  return props.variant === 'assist' || props.variant === 'suggestion'\n}\n\nexport type { ChipActionProps, ChipFilterProps, ChipProps, ChipVariant }\n\nexport default Chip\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","ButtonRenderProps","FocusableElement","ButtonProps","RACButtonProps","ToggleButtonProps","RACToggleButtonProps","ToggleButtonRenderProps","Button","ToggleButton","ChipKind","chipGlyph","chipLabel","chipPropsFor","useRipple","ariaAttributesOf","buttonRenderer","toggleButtonRenderer","mergeStatefulStyles","ChipActionProps","Omit","children","elevated","icon","variant","ChipFilterProps","ChipProps","ChipVariant","ActionChip","t0","$","t1","onClick","onContextMenu","onKeyDown","onKeyUp","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","render","props","undefined","element","aria","t2","ripple","isDisabled","T0","t3","t4","handlers","t5","actionChipClasses","t6","surface","actionChipContent","t7","kind","state","isSelected","Chip","isAction","chipContent","FilterChip","filterChipClasses","t8","_c"],"sources":["../../../src/components/chip/index.tsx"],"sourcesContent":["'use client'\n\nimport type { ReactNode, RefAttributes } from 'react'\nimport type {\n  ButtonRenderProps,\n  FocusableElement,\n  ButtonProps as RACButtonProps,\n  ToggleButtonProps as RACToggleButtonProps,\n  ToggleButtonRenderProps,\n} from 'react-aria-components'\n\nimport { Button, ToggleButton } from 'react-aria-components'\n\nimport type { ChipKind } from '../../chip'\n\nimport { chipGlyph, chipLabel, chipPropsFor } from '../../chip'\nimport { useRipple } from '../../hooks/useRipple'\nimport {\n  ariaAttributesOf,\n  buttonRenderer,\n  toggleButtonRenderer,\n} from '../../render/aria'\nimport { mergeStatefulStyles } from '../../styles/merge'\n\n// The pill, its containers, its check and its disabled treatment are the\n// chip module's in `src/chip`, shared with the chips a ChipGroup draws; what\n// is here is React Aria's button around them. Three of the chips page's four\n// chips are drawn here, and `variant` picks the button:\n//\n// - **A filter chip**, the default, is React Aria's `ToggleButton`: a\n//   two-state button announced through `aria-pressed`, which takes the\n//   secondary container and the check once selected.\n// - **An assist or suggestion chip** is React Aria's `Button`: an action, so\n//   nothing is announced as pressed and nothing is ever selected. The two\n//   differ in the label's role alone; see `src/chip/styles.ts`.\n//\n// The page's fourth, the input chip, is ChipGroup's removable chip, and a\n// token in a TokenField.\n//\n// Two of the call site's props go on the element through `src/render/aria`\n// rather than through that spread, as `Button` and `IconButton` do. React\n// Aria builds a button's attributes from an allowlist that holds only the\n// labelling `aria-*` and the state it manages itself, so any other one — a\n// shortcut, an owned element — is dropped before it reaches the DOM. And it\n// wraps a keyboard handler it is given so that the event stops there unless\n// the handler asks otherwise, which is its convention rather than the DOM's;\n// on the element the handler bubbles, so an Escape pressed on a chip inside\n// a dialog still reaches the dialog.\n//\n// A press ripples, as it does on every other pressable control here: the\n// chips page names the ripple as the pressed state, beside the layer.\n\n/** An assist or suggestion chip: an action, drawn as a plain button. */\ntype ChipActionProps = Omit<RACButtonProps, 'children' | 'isPending'> & {\n  /**\n   * The chip's label. Required: the page draws no chip without one, and a\n   * chip with none is an empty button to a screen reader.\n   */\n  children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline.\n   * @default false\n   */\n  elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role.\n   * An icon drawn in `em` takes its size from the slot.\n   */\n  icon?: ReactNode\n  /**\n   * `assist` for an action the chip's context suggests, and `suggestion`\n   * for one the product generates. Either is an action rather than a\n   * selection, so neither is ever selected.\n   */\n  variant: 'assist' | 'suggestion'\n}\n\n/** A filter chip: a two-state button, the default. */\ntype ChipFilterProps = Omit<RACToggleButtonProps, 'children'> & {\n  /**\n   * The chip's label. A node rather than React Aria's node-or-function,\n   * since the chip puts its own check before whatever this is and a function\n   * would be handed a `defaultChildren` the chip never rendered. ChipGroup's\n   * chip narrows it the same way, for the same reason. Required: the page\n   * draws no chip without one, and a chip with none is an empty button to a\n   * screen reader.\n   */\n  children: ReactNode\n  /**\n   * Raises the chip off the page on a container of its own, at the page's\n   * elevation 1, in place of the outline. A selected one keeps the\n   * secondary container.\n   * @default false\n   */\n  elevated?: boolean\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role.\n   * The check takes its place while the chip is selected, so the chip keeps\n   * its width. An icon drawn in `em` takes its size from the slot.\n   */\n  icon?: ReactNode\n  /**\n   * A filter chip, a two-state button.\n   * @default 'filter'\n   */\n  variant?: 'filter'\n}\n\ntype ChipProps = ChipActionProps | ChipFilterProps\n\n/** Which of the chips page's chips a Chip is. */\ntype ChipVariant = 'assist' | 'filter' | 'suggestion'\n\nfunction ActionChip({\n  children,\n  elevated = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  variant,\n  ...props\n}: ChipActionProps & RefAttributes<HTMLButtonElement>) {\n  const element = { aria: ariaAttributesOf(props), onKeyDown, onKeyUp }\n  // Off while disabled, as on the filter chip. `onClick` goes through the\n  // ripple too: on a mouse press the ripple ends on the click, so a call\n  // site's own handler spread beside it would leave it pressed.\n  const ripple = useRipple<FocusableElement>(props.isDisabled !== true, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp,\n  })\n\n  return (\n    <Button\n      render={buttonRenderer(element, render)}\n      {...ripple.handlers}\n      {...props}\n      {...mergeStatefulStyles(actionChipClasses(variant, elevated), props)}\n    >\n      {actionChipContent(children, icon, ripple.surface)}\n    </Button>\n  )\n}\n\n// An action chip's classes: the unselected pill, which it always is.\nfunction actionChipClasses(kind: ChipKind, elevated: boolean) {\n  return (state: ButtonRenderProps) =>\n    chipPropsFor({ ...state, isSelected: false }, { elevated, kind })\n}\n\n// What an action chip draws: its icon, if any, then the label, and the\n// ripple over both. Built by a call for the reason `chipContent` is.\nfunction actionChipContent(\n  children: ReactNode,\n  icon: ReactNode,\n  surface: ReactNode,\n) {\n  return (state: ButtonRenderProps) => (\n    <>\n      {chipGlyph({ isDisabled: state.isDisabled, isSelected: false }, icon)}\n      {chipLabel(children)}\n      {surface}\n    </>\n  )\n}\n\n/**\n * A chip. By default a filter chip, which is a two-state button, so its\n * selected state is React Aria's `isSelected`: pass it with `onChange` to\n * control it, or `defaultSelected` to let it keep its own state. Selection is\n * announced through `aria-pressed` rather than a role of its own.\n *\n * `variant=\"assist\"` and `variant=\"suggestion\"` draw the page's two action\n * chips instead: plain buttons, pressed with `onPress`, never selected.\n */\nfunction Chip(props: ChipProps & RefAttributes<HTMLButtonElement>) {\n  if (isAction(props)) {\n    return <ActionChip {...props} />\n  }\n  return <FilterChip {...props} />\n}\n\n// What the chip draws, from React Aria's render state: the check while it is\n// selected or its icon while it is not, then the label, and the ripple over\n// both. Built by a call rather than written inline at the prop, which is what\n// react-perf's no-new-function-as-prop is after; the React Compiler memoises\n// the result on its inputs.\nfunction chipContent(children: ReactNode, icon: ReactNode, surface: ReactNode) {\n  return (state: ToggleButtonRenderProps) => (\n    <>\n      {chipGlyph(state, icon)}\n      {chipLabel(children)}\n      {surface}\n    </>\n  )\n}\n\nfunction FilterChip({\n  children,\n  elevated = false,\n  icon,\n  onClick,\n  onContextMenu,\n  onKeyDown,\n  onKeyUp,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  render,\n  variant = 'filter',\n  ...props\n}: ChipFilterProps & RefAttributes<HTMLButtonElement>) {\n  const element = { aria: ariaAttributesOf(props), onKeyDown, onKeyUp }\n  // Off while disabled: React Aria still forwards pointer events to a\n  // disabled element, and a press that changes nothing should not look like\n  // one. Typed as Button's ripple is, since React Aria types a toggle\n  // button's pointer events against a <div> rather than the <button> it\n  // renders. `onClick` goes through it for the action chip's reason.\n  const ripple = useRipple<FocusableElement>(props.isDisabled !== true, {\n    onClick,\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp,\n  })\n\n  return (\n    <ToggleButton\n      render={toggleButtonRenderer(element, render)}\n      {...ripple.handlers}\n      {...props}\n      {...mergeStatefulStyles(filterChipClasses(variant, elevated), props)}\n    >\n      {chipContent(children, icon, ripple.surface)}\n    </ToggleButton>\n  )\n}\n\n// A filter chip's classes, from its render state.\nfunction filterChipClasses(kind: ChipKind, elevated: boolean) {\n  return (state: ToggleButtonRenderProps) =>\n    chipPropsFor(state, { elevated, kind })\n}\n\n// Whether a chip is one of the two action chips. A guard rather than a\n// comparison at the call, since TypeScript does not narrow the union through\n// React Aria's mapped prop types on `variant` alone.\nfunction isAction(props: ChipProps): props is ChipActionProps {\n  return props.variant === 'assist' || props.variant === 'suggestion'\n}\n\nexport type { ChipActionProps, ChipFilterProps, ChipProps, ChipVariant }\n\nexport default Chip\n"],"mappings":";;;;;;;;;AAkHA,SAAA+B,WAAAC,IAAA;CAAA,MAAAC,IAAAhC,EAAA,EAAA;CAAoB,MAAA,EAAAuB,UAAAC,UAAAS,IAAAR,MAAAS,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAAC,QAAAhB,SAAA,GAAAiB,UAAAZ;CAElB,MAAAP,WAAAS,OAAAW,KAAAA,IAAA,QAAAX;CAcA,MAAAY,UAAgB;EAAAC,MAAQ7B,iBAAiB0B,KAAK;EAACP;EAAAC;CAAqB;CAAC,IAAAU;CAAA,IAAAf,EAAA,OAAAE,WAAAF,EAAA,OAAAG,iBAAAH,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EAICM,KAAA;GAAAb;GAAAC;GAAAG;GAAAC;GAAAC;GAAAC;EAOtE;EAACT,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAe;CAAA,OAAAA,KAAAf,EAAA;CAPD,MAAAgB,SAAehC,UAA4B2B,MAAKM,eAAgB,MAAMF,EAOrE;CAGE,MAAAG,KAAAxC;CACS,MAAAyC,KAAAjC,eAAe2B,SAASH,MAAM;CAClC,MAAAU,KAAAJ,OAAMK;CAEN,MAAAC,KAAAlC,oBAAoBmC,kBAAkB7B,SAASF,QAAQ,GAAGmB,KAAK;CAAC,IAAAa;CAAA,IAAAxB,EAAA,OAAAT,YAAAS,EAAA,OAAAP,QAAAO,EAAA,OAAAgB,OAAAS,SAAA;EAEnED,KAAAE,kBAAkBnC,UAAUE,MAAMuB,OAAMS,OAAQ;EAACzB,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAgB,OAAAS;EAAAzB,EAAA,MAAAwB;CAAA,OAAAA,KAAAxB,EAAA;CAAA,IAAA2B;CAAA,IAAA3B,EAAA,QAAAkB,MAAAlB,EAAA,QAAAW,SAAAX,EAAA,QAAAgB,OAAAK,YAAArB,EAAA,QAAAmB,MAAAnB,EAAA,QAAAsB,MAAAtB,EAAA,QAAAwB,IAAA;EANpDG,KAAA,oBAAC,IAAD;GACU,QAAAR;GAA+B,GACnCC;GAAe,GACfT;GAAK,GACLW;GAEHE,UAAAA;EANI,CAAA;EAOExB,EAAA,MAAAkB;EAAAlB,EAAA,MAAAW;EAAAX,EAAA,MAAAgB,OAAAK;EAAArB,EAAA,MAAAmB;EAAAnB,EAAA,MAAAsB;EAAAtB,EAAA,MAAAwB;EAAAxB,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,OAPT2B;AAOS;AAKb,SAASJ,kBAAkBK,MAAgBpC,UAAmB;CAC5D,QAAQqC,UACN9C,aAAa;EAAE,GAAG8C;EAAOC,YAAY;CAAM,GAAG;EAAEtC;EAAUoC;CAAK,CAAC;AACpE;AAIA,SAASF,kBACPnC,UACAE,MACAgC,SACA;CACA,QAAQI,UACN,qBAAA,UAAA,EAAA,UAAA;EACGhD,UAAU;GAAEoC,YAAYY,MAAMZ;GAAYa,YAAY;EAAM,GAAGrC,IAAI;EACnEX,UAAUS,QAAQ;EAClBkC;CACH,EAAA,CAAA;AAEJ;;;;;;;;;;AAWA,SAAAM,KAAApB,OAAA;CAAA,MAAAX,IAAAhC,EAAA,CAAA;CACE,IAAIgE,SAASrB,KAAK,GAAC;EAAA,IAAAZ;EAAA,IAAAC,EAAA,OAAAW,OAAA;GACVZ,KAAA,oBAAC,YAAD,EAAW,GAAKY,MAAK,CAAA;GAAIX,EAAA,KAAAW;GAAAX,EAAA,KAAAD;EAAA,OAAAA,KAAAC,EAAA;EAAA,OAAzBD;CAAyB;CACjC,IAAAA;CAAA,IAAAC,EAAA,OAAAW,OAAA;EACMZ,KAAA,oBAAC,YAAD,EAAW,GAAKY,MAAK,CAAA;EAAIX,EAAA,KAAAW;EAAAX,EAAA,KAAAD;CAAA,OAAAA,KAAAC,EAAA;CAAA,OAAzBD;AAAyB;AAQlC,SAASkC,YAAY1C,UAAqBE,MAAiBgC,SAAoB;CAC7E,QAAQI,UACN,qBAAA,UAAA,EAAA,UAAA;EACGhD,UAAUgD,OAAOpC,IAAI;EACrBX,UAAUS,QAAQ;EAClBkC;CACH,EAAA,CAAA;AAEJ;AAEA,SAAAS,WAAAnC,IAAA;CAAA,MAAAC,IAAAhC,EAAA,EAAA;CAAoB,MAAA,EAAAuB,UAAAC,UAAAS,IAAAR,MAAAS,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAAC,QAAAhB,SAAAqB,IAAA,GAAAJ,UAAAZ;CAElB,MAAAP,WAAAS,OAAAW,KAAAA,IAAA,QAAAX;CAWA,MAAAP,UAAAqB,OAAAH,KAAAA,IAAA,WAAAG;CAGA,MAAAF,UAAgB;EAAAC,MAAQ7B,iBAAiB0B,KAAK;EAACP;EAAAC;CAAqB;CAAC,IAAAc;CAAA,IAAAnB,EAAA,OAAAE,WAAAF,EAAA,OAAAG,iBAAAH,EAAA,OAAAM,mBAAAN,EAAA,OAAAO,iBAAAP,EAAA,OAAAQ,kBAAAR,EAAA,OAAAS,aAAA;EAMCU,KAAA;GAAAjB;GAAAC;GAAAG;GAAAC;GAAAC;GAAAC;EAOtE;EAACT,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAM;EAAAN,EAAA,KAAAO;EAAAP,EAAA,KAAAQ;EAAAR,EAAA,KAAAS;EAAAT,EAAA,KAAAmB;CAAA,OAAAA,KAAAnB,EAAA;CAPD,MAAAgB,SAAehC,UAA4B2B,MAAKM,eAAgB,MAAME,EAOrE;CAGE,MAAAD,KAAAvC;CACS,MAAAyC,KAAAjC,qBAAqB0B,SAASH,MAAM;CACxC,MAAAY,KAAAN,OAAMK;CAEN,MAAAG,KAAApC,oBAAoB+C,kBAAkBzC,SAASF,QAAQ,GAAGmB,KAAK;CAAC,IAAAgB;CAAA,IAAA3B,EAAA,OAAAT,YAAAS,EAAA,OAAAP,QAAAO,EAAA,OAAAgB,OAAAS,SAAA;EAEnEE,KAAAM,YAAY1C,UAAUE,MAAMuB,OAAMS,OAAQ;EAACzB,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAgB,OAAAS;EAAAzB,EAAA,MAAA2B;CAAA,OAAAA,KAAA3B,EAAA;CAAA,IAAAoC;CAAA,IAAApC,EAAA,QAAAkB,MAAAlB,EAAA,QAAAW,SAAAX,EAAA,QAAAgB,OAAAK,YAAArB,EAAA,QAAAoB,MAAApB,EAAA,QAAAwB,MAAAxB,EAAA,QAAA2B,IAAA;EAN9CS,KAAA,oBAAC,IAAD;GACU,QAAAhB;GAAqC,GACzCE;GAAe,GACfX;GAAK,GACLa;GAEHG,UAAAA;EANU,CAAA;EAOE3B,EAAA,MAAAkB;EAAAlB,EAAA,MAAAW;EAAAX,EAAA,MAAAgB,OAAAK;EAAArB,EAAA,MAAAoB;EAAApB,EAAA,MAAAwB;EAAAxB,EAAA,MAAA2B;EAAA3B,EAAA,MAAAoC;CAAA,OAAAA,KAAApC,EAAA;CAAA,OAPfoC;AAOe;AAKnB,SAASD,kBAAkBP,MAAgBpC,UAAmB;CAC5D,QAAQqC,UACN9C,aAAa8C,OAAO;EAAErC;EAAUoC;CAAK,CAAC;AAC1C;AAKA,SAASI,SAASrB,OAA4C;CAC5D,OAAOA,MAAMjB,YAAY,YAAYiB,MAAMjB,YAAY;AACzD"}

package/dist/components/chip-group/index.js

@@ -2,9 +2,10 @@
 import { props } from "../../node_modules/@stylexjs/stylex/lib/es/stylex.js";
 import { mergeStatefulStyles, mergeStyles } from "../../styles/merge.js";
 import { CloseGlyph } from "../../glyphs/index.js";
+import { focus } from "../../styles/focus.js";
 import { useRipple } from "../../hooks/useRipple.js";
-import { groupStyles } from "../../field/styles.js";
 import { invalidFrom } from "../../field/root.js";
+import { groupStyles } from "../../field/styles.js";
 import { FieldLabel, FieldMessage } from "../../field/index.js";
 import { chipStyles } from "../../chip/styles.js";
 import { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName } from "../../chip/index.js";
@@ -14,6 +15,14 @@ import { createContext, useContext } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { Button, Tag, TagGroup, TagList } from "react-aria-components";
 //#region src/components/chip-group/index.tsx
+const styles = { list: {
+	kB7OPa: "x9f619",
+	k1xSpc: "x78zum5",
+	kwnvtZ: "x1a02dak",
+	kOIVth: "x126z3so",
+	kAzted: "xlzjxrf",
+	$$css: true
+} };
 function chipContent(children, icon, removeLabel, surface) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		chipGlyph(state, icon),
@@ -52,7 +61,7 @@ const LABEL_STATE_INVALID = { isInvalid: true };
 * which is the element a layout positions.
 */
 function ChipGroup(t0) {
-	const $ = c(32);
+	const $ = c(33);
 	let T0;
 	let children;
 	let description;
@@ -115,59 +124,64 @@ function ChipGroup(t0) {
 		$[14] = t4;
 	} else t4 = $[14];
 	let t5;
-	if ($[15] !== children || $[16] !== items || $[17] !== renderEmptyState) {
-		t5 = /* @__PURE__ */ jsx(TagList, {
+	if ($[15] === Symbol.for("react.memo_cache_sentinel")) {
+		t5 = props(styles.list, focus.ring);
+		$[15] = t5;
+	} else t5 = $[15];
+	let t6;
+	if ($[16] !== children || $[17] !== items || $[18] !== renderEmptyState) {
+		t6 = /* @__PURE__ */ jsx(TagList, {
 			items,
 			renderEmptyState,
-			className: "x9f619 x78zum5 x1a02dak x126z3so x1t137rt",
+			...t5,
 			children
 		});
-		$[15] = children;
-		$[16] = items;
-		$[17] = renderEmptyState;
-		$[18] = t5;
-	} else t5 = $[18];
-	let t6;
-	if ($[19] !== removeLabel || $[20] !== t5) {
-		t6 = /* @__PURE__ */ jsx(RemoveLabelContext, {
+		$[16] = children;
+		$[17] = items;
+		$[18] = renderEmptyState;
+		$[19] = t6;
+	} else t6 = $[19];
+	let t7;
+	if ($[20] !== removeLabel || $[21] !== t6) {
+		t7 = /* @__PURE__ */ jsx(RemoveLabelContext, {
 			value: removeLabel,
-			children: t5
+			children: t6
 		});
-		$[19] = removeLabel;
-		$[20] = t5;
+		$[20] = removeLabel;
 		$[21] = t6;
-	} else t6 = $[21];
-	let t7;
-	if ($[22] !== description || $[23] !== error) {
-		t7 = /* @__PURE__ */ jsx(FieldMessage, {
+		$[22] = t7;
+	} else t7 = $[22];
+	let t8;
+	if ($[23] !== description || $[24] !== error) {
+		t8 = /* @__PURE__ */ jsx(FieldMessage, {
 			description,
 			error,
 			inset: false
 		});
-		$[22] = description;
-		$[23] = error;
-		$[24] = t7;
-	} else t7 = $[24];
-	let t8;
-	if ($[25] !== T0 || $[26] !== t1 || $[27] !== t2 || $[28] !== t4 || $[29] !== t6 || $[30] !== t7) {
-		t8 = /* @__PURE__ */ jsxs(T0, {
+		$[23] = description;
+		$[24] = error;
+		$[25] = t8;
+	} else t8 = $[25];
+	let t9;
+	if ($[26] !== T0 || $[27] !== t1 || $[28] !== t2 || $[29] !== t4 || $[30] !== t7 || $[31] !== t8) {
+		t9 = /* @__PURE__ */ jsxs(T0, {
 			...t1,
 			...t2,
 			children: [
 				t4,
-				t6,
-				t7
+				t7,
+				t8
 			]
 		});
-		$[25] = T0;
-		$[26] = t1;
-		$[27] = t2;
-		$[28] = t4;
-		$[29] = t6;
+		$[26] = T0;
+		$[27] = t1;
+		$[28] = t2;
+		$[29] = t4;
 		$[30] = t7;
 		$[31] = t8;
-	} else t8 = $[31];
-	return t8;
+		$[32] = t9;
+	} else t9 = $[32];
+	return t9;
 }
 /**
 * One chip. Give every chip an `id` — that is the key selection and removal
@@ -227,7 +241,7 @@ function ChipGroupChip(t0) {
 	return t6;
 }
 function groupChipPropsFor(state) {
-	return chipPropsFor(state, { inGroup: true });
+	return chipPropsFor(state);
 }
 ChipGroup.Chip = ChipGroupChip;
 //#endregion

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactElement","ReactNode","RefAttributes","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipPropsFor","chipRemoveClassName","chipStyles","textOf","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","useRipple","mergeStatefulStyles","mergeStyles","spacing","ChipGroupChipProps","Omit","children","className","icon","style","ChipGroupProps","item","T","description","error","label","removeLabel","Pick","chipContent","surface","state","selectionMode","isDisabled","allowsRemoving","props","removeGlyph","RemoveLabelContext","undefined","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","root","ChipGroupChip","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","ripple","textValue","handlers","groupChipPropsFor","inGroup","Chip","RACButton","stylex.props","_c","props","RACTagGroup","RACTagList","RACTag"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode, RefAttributes } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { textOf } from '../../collection/text';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n  /** The chip's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the chip's render state. */\n  className?: RACTagProps['className'];\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role.\n   * The check takes its place while the chip is chosen, so the chip keeps\n   * its width. An icon drawn in `em` takes its size from the slot.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n  /**\n   * The chips, each with an `id` of its own. With `items`, a function from an\n   * item to its chip, which React Aria calls for each item in turn.\n   */\n  children?: ((item: T) => ReactElement) | 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 and `aria-invalid` both\n   * follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * What the close target on each chip is called, for a screen reader. React\n   * Aria adds the chip's own label after it, so this is the verb rather than\n   * the whole phrase — \"Remove\" becomes \"Remove First item\". Left out, React\n   * Aria names it in the reader's locale — \"Remove\" in English.\n   */\n  removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The check and the icon it replaces are the chip module's, so a chip in a\n// group and a chip on its own draw the same ones. The close target is drawn\n// only where the group allows removing, which React Aria reports rather than\n// the call site saying so on every chip.\n//\n// The ripple is drawn only on a chip a press does something to: one the\n// group lets be selected, and not disabled. A chip in a group that selects\n// nothing is a control only for its close target, and React Aria reports\n// neither hover nor press on it, so a ripple there would answer a press that\n// changes nothing.\nfunction chipContent(children: ReactNode, icon: ReactNode, removeLabel: string | undefined, surface: ReactNode) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state, icon)}\n      {chipLabel(children)}\n      {state.selectionMode !== 'none' && !state.isDisabled ? surface : null}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} className={chipRemoveClassName} slot=\"remove\">\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift. Undefined unless the group is given one, which leaves\n// the name React Aria gives in the reader's locale.\nconst RemoveLabelContext = createContext<string | undefined>(undefined);\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\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 ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel,\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T> & RefAttributes<HTMLDivElement>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} className=\"x9f619 x78zum5 x1a02dak x126z3so x1t137rt\">\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  icon,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  ...props\n}: ChipGroupChipProps & RefAttributes<HTMLDivElement>) {\n  const removeLabel = useContext(RemoveLabelContext);\n  // The press ripple a list's rows draw — see ListItem there. A chip in a\n  // group is a collection row, whose clicks React Aria keeps for itself, so\n  // the press ends when the pointer is released rather than on a click.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(groupChipPropsFor, props)}>\n      {chipContent(children, icon, removeLabel, ripple.surface)}\n    </RACTag>;\n}\n\n// The pill a standalone Chip draws, from `src/chip`, with the touch target a\n// chip in a group takes instead.\nfunction groupChipPropsFor(state: TagRenderProps) {\n  return chipPropsFor(state, {\n    inGroup: true\n  });\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport { ChipGroupChip };\nexport default ChipGroup;"],"mappings":";;;;;;;;;;;;;;;;AAoHA,SAASoD,YAAYZ,UAAqBE,MAAiBQ,aAAiCG,SAAoB;CAC9G,QAAQC,UAA0B,qBAAA,YAAA,EAAA,UAAA;EAC7B/B,UAAU+B,OAAOZ,IAAI;EACrBlB,UAAUgB,QAAQ;EAClBc,MAAMC,kBAAkB,UAAU,CAACD,MAAME,aAAaH,UAAU;EAChEC,MAAMG,iBAAiB,oBAACqC,QAAD;GAAW,cAAY5C;GAAa,WAAWxB;GAAqB,MAAK;GAC7F,UAAA,oBAAC,YAAD,EAAY,GAAId,MAAae,WAAWgC,WAAW,EAAE,CAAA;EAC5C,CAAA,IAAI;CACnB,EAAA,CAAA;AACJ;AAMA,MAAMC,qBAAqB/C,cAAkCgD,KAAAA,CAAS;AAGtE,MAAMC,oBAAoB,EACxBC,WAAW,MACb;AACA,MAAMC,sBAAsB,EAC1BD,WAAW,KACb;;;;;;;;;;;;;;;;;;;;;;AAuBA,SAAAE,UAAAC,IAAA;CAAA,MAAAC,IAAAlE,EAAA,EAAA;CAAA,IAAAmE;CAAA,IAAA5B;CAAA,IAAAO;CAAA,IAAAC;CAAA,IAAAqB;CAAA,IAAAC;CAAA,IAAArB;CAAA,IAAAC;CAAA,IAAAqB;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAN,EAAA,OAAAD,IAAA;EAA8C,MAAA,EAAA1B,UAAAkC,IAAA3B,aAAA4B,IAAA3B,OAAA4B,IAAAN,OAAAO,IAAA5B,OAAA6B,IAAA5B,aAAA6B,IAAAR,kBAAAS,IAAA,GAAAtB,YAAAQ;EAAA1B,WAAAkC;EAAA3B,cAAA4B;EAAA3B,QAAA4B;EAAAN,QAAAO;EAAA5B,QAAA6B;EAAA5B,cAAA6B;EAAAR,mBAAAS;EAU5CX,UAAgBtC,YAAYiB,KAAK;EACzBoB,KAAAhD;EAAgBsC,KAAAA;EAAWe,KAAArC,YAAYxB,MAAaoB,YAAWiD,IAAK,GAAGvB,OAAK;EAACS,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAA3B;EAAA2B,EAAA,KAAApB;EAAAoB,EAAA,KAAAnB;EAAAmB,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAlB;EAAAkB,EAAA,KAAAjB;EAAAiB,EAAA,KAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;CAAA,OAAA;EAAAL,KAAAD,EAAA;EAAA3B,WAAA2B,EAAA;EAAApB,cAAAoB,EAAA;EAAAnB,QAAAmB,EAAA;EAAAE,UAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAlB,QAAAkB,EAAA;EAAAjB,cAAAiB,EAAA;EAAAI,mBAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;CAAA;CAI9D,MAAAO,KAAAL,UAAAL,sBAAAF;CAAiD,IAAAa;CAAA,IAAAR,EAAA,QAAAlB,SAAAkB,EAAA,QAAAO,IAAA;EAApEC,KAAA,oBAAC,YAAD;GAAmB,OAAAD;GAA2D,SAAA;GAC3EzB,UAAAA;EADQ,CAAA;EAEEkB,EAAA,MAAAlB;EAAAkB,EAAA,MAAAO;EAAAP,EAAA,MAAAQ;CAAA,OAAAA,KAAAR,EAAA;CAAA,IAAAS;CAAA,IAAAT,EAAA,QAAA3B,YAAA2B,EAAA,QAAAG,SAAAH,EAAA,QAAAI,kBAAA;EAEXK,KAAA,oBAACuB,SAAD;GAAsB7B;GAAyBC;GAA4B,WAAA;GACxE/B;EADQ,CAAA;EAEE2B,EAAA,MAAA3B;EAAA2B,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAjB,eAAAiB,EAAA,QAAAS,IAAA;EAHfC,KAAA,oBAAC,oBAAD;GAA2B3B,OAAAA;GACzB0B,UAAAA;EADiB,CAAA;EAIET,EAAA,MAAAjB;EAAAiB,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,IAAAW;CAAA,IAAAX,EAAA,QAAApB,eAAAoB,EAAA,QAAAnB,OAAA;EACrB8B,KAAA,oBAAC,cAAD;GAA2B/B;GAAoBC;GAAc,OAAA;EAAK,CAAA;EAAImB,EAAA,MAAApB;EAAAoB,EAAA,MAAAnB;EAAAmB,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAAC,MAAAD,EAAA,QAAAK,MAAAL,EAAA,QAAAM,MAAAN,EAAA,QAAAQ,MAAAR,EAAA,QAAAU,MAAAV,EAAA,QAAAW,IAAA;EAZnEC,KAAA,qBAAC,IAAD;GAAY,GAAKrB;GAAK,GAAMe;GAA5B,UAAA;IAIHE;IAGAE;IAKAC;GAZe;;EAaHX,EAAA,MAAAC;EAAAD,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAU;EAAAV,EAAA,MAAAW;EAAAX,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,OAbTY;AAaS;;;;;AAOlB,SAAAG,cAAAhB,IAAA;CAAA,MAAAC,IAAAlE,EAAA,EAAA;CAAuB,MAAA,EAAAuC,UAAAE,MAAAyC,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAA,GAAA7B,UAAAQ;CAUrB,MAAAhB,cAAoBpC,WAAW8C,kBAAkB;CAAE,IAAAY;CAAA,IAAAL,EAAA,OAAAgB,iBAAAhB,EAAA,OAAAiB,mBAAAjB,EAAA,OAAAkB,iBAAAlB,EAAA,OAAAmB,kBAAAnB,EAAA,OAAAoB,aAAA;EAIJf,KAAA;GAAAW;GAAAC;GAAAC;GAAAC;GAAAC;EAM/C;EAACpB,EAAA,KAAAgB;EAAAhB,EAAA,KAAAiB;EAAAjB,EAAA,KAAAkB;EAAAlB,EAAA,KAAAmB;EAAAnB,EAAA,KAAAoB;EAAApB,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAND,MAAAqB,SAAetD,UAA0B,MAAMsC,IAM5C,IAAI;CACC,MAAAJ,KAAAlD;CAAkB,MAAAuD,KAAAf,MAAK+B,aAAc7D,OAAOY,QAAQ;CAAO,MAAAkC,KAAAc,OAAME;CAA0B,MAAAf,KAAAxC,oBAAoBwD,mBAAmBjC,KAAK;CAAC,IAAAkB;CAAA,IAAAT,EAAA,OAAA3B,YAAA2B,EAAA,OAAAzB,QAAAyB,EAAA,OAAAjB,eAAAiB,EAAA,OAAAqB,OAAAnC,SAAA;EAC3IuB,KAAAxB,YAAYZ,UAAUE,MAAMQ,aAAasC,OAAMnC,OAAQ;EAACc,EAAA,KAAA3B;EAAA2B,EAAA,KAAAzB;EAAAyB,EAAA,KAAAjB;EAAAiB,EAAA,KAAAqB,OAAAnC;EAAAc,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAC,MAAAD,EAAA,QAAAT,SAAAS,EAAA,QAAAqB,OAAAE,YAAAvB,EAAA,QAAAM,MAAAN,EAAA,QAAAQ,MAAAR,EAAA,QAAAS,IAAA;EADtDC,KAAA,oBAAC,IAAD;GAAmB,WAAAJ;GAAmC,GAAMC;GAAe,GAAMhB;GAAK,GAAMiB;GAC9FC,UAAAA;EADS,CAAA;EAEHT,EAAA,MAAAC;EAAAD,EAAA,MAAAT;EAAAS,EAAA,MAAAqB,OAAAE;EAAAvB,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAFJU;AAEI;AAKb,SAASc,kBAAkBrC,OAAuB;CAChD,OAAO7B,aAAa6B,OAAO,EACzBsC,SAAS,KACX,CAAC;AACH;AACA3B,UAAU4B,OAAOX"}
+{"version":3,"file":"index.js","names":["c","_c","ReactElement","ReactNode","RefAttributes","TagGroupProps","RACTagGroupProps","TagListProps","RACTagListProps","TagProps","RACTagProps","TagRenderProps","stylex","createContext","useContext","Button","RACButton","Tag","RACTag","TagGroup","RACTagGroup","TagList","RACTagList","chipGlyph","chipLabel","chipPropsFor","chipRemoveClassName","chipStyles","textOf","FieldLabel","FieldMessage","invalidFrom","groupStyles","CloseGlyph","useRipple","focus","mergeStatefulStyles","mergeStyles","sizing","spacing","styles","list","kB7OPa","k1xSpc","kwnvtZ","kOIVth","kAzted","$$css","ChipGroupChipProps","Omit","children","className","icon","style","ChipGroupProps","item","T","description","error","label","removeLabel","Pick","chipContent","surface","state","selectionMode","isDisabled","allowsRemoving","props","removeGlyph","RemoveLabelContext","undefined","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","ChipGroup","t0","$","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","root","Symbol","for","ring","ChipGroupChip","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","ripple","textValue","handlers","groupChipPropsFor","Chip","RACButton","stylex.props","_c","props","RACTagGroup","RACTagList","RACTag"],"sources":["../../../src/components/chip-group/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactElement, ReactNode, RefAttributes } from 'react';\nimport type { TagGroupProps as RACTagGroupProps, TagListProps as RACTagListProps, TagProps as RACTagProps, TagRenderProps } from 'react-aria-components';\nimport * as stylex from '@stylexjs/stylex';\nimport { createContext, useContext } from 'react';\nimport { Button as RACButton, Tag as RACTag, TagGroup as RACTagGroup, TagList as RACTagList } from 'react-aria-components';\nimport { chipGlyph, chipLabel, chipPropsFor, chipRemoveClassName } from '../../chip';\nimport { chipStyles } from '../../chip/styles';\nimport { textOf } from '../../collection/text';\nimport { FieldLabel, FieldMessage } from '../../field';\nimport { invalidFrom } from '../../field/root';\nimport { groupStyles } from '../../field/styles';\nimport { CloseGlyph } from '../../glyphs';\nimport { useRipple } from '../../hooks/useRipple';\nimport { focus } from '../../styles/focus';\nimport { mergeStatefulStyles, mergeStyles } from '../../styles/merge';\nimport '../../tokens/design.tokens.stylex';\nimport { sizing, spacing } from '../../tokens/design.tokens.stylex';\n\n// The chips page's filter and input chips as a set: one or more chosen from a\n// row, each one removable. The pill is the chip module's in `src/chip`,\n// shared with the standalone Chip, so the two cannot drift; what is here is\n// the group around them.\n//\n// Three things it adds over a row of Chips.\n//\n// **It is a group, not a row of buttons.** React Aria's `TagGroup` names the\n// set, describes it, reports it invalid as a whole, and moves between its\n// chips with the arrow keys rather than making each one a tab stop — which\n// is what a set of a dozen filters needs. The label, the supporting line and\n// the error are the field chrome's, so a group reads like the fields beside\n// it, exactly as CheckboxGroup and RadioGroup do.\n//\n// **A chip can be removed.** Give the group `onRemove` and each chip draws\n// the page's trailing close target, an 18dp glyph in a target of its own so a\n// press there removes rather than toggles. Backspace and Delete remove the\n// focused chip too, which is React Aria's. A chosen chip's check sits at the\n// other end, so a chip that is both selected and removable carries one glyph\n// on each side of its label.\n//\n// **Selection is the group's, not each chip's.** `selectionMode` and\n// `selectedKeys` live on the group, so a set that chooses one of its chips\n// and a set that chooses several are the same component with a different\n// word. A chip on its own that toggles nothing else is still Chip.\n//\n// One thing is worth knowing about how this maps onto React Aria. A chip's\n// text value is read off its children and found only when they are a plain\n// string, and a chip here is always an element — the label sits beside a\n// close target. So a plain-string label is passed through as the text value,\n// which is what typeahead and a screen reader's announcement are made of;\n// see ListBox.Item, where the same thing bit.\n\nconst styles = {\n  list: {\n    kB7OPa: \"x9f619\",\n    k1xSpc: \"x78zum5\",\n    kwnvtZ: \"x1a02dak\",\n    kOIVth: \"x126z3so\",\n    kAzted: \"xlzjxrf\",\n    $$css: true\n  }\n};\ntype ChipGroupChipProps = Omit<RACTagProps, 'children' | 'className' | 'style'> & {\n  /** The chip's label. */\n  children?: ReactNode;\n  /** A function may compute the class from the chip's render state. */\n  className?: RACTagProps['className'];\n  /**\n   * An icon before the label, in the page's 18dp slot and the primary role.\n   * The check takes its place while the chip is chosen, so the chip keeps\n   * its width. An icon drawn in `em` takes its size from the slot.\n   */\n  icon?: ReactNode;\n  /** A function may compute the style from the chip's render state. */\n  style?: RACTagProps['style'];\n};\ntype ChipGroupProps<T extends object = object> = {\n  /**\n   * The chips, each with an `id` of its own. With `items`, a function from an\n   * item to its chip, which React Aria calls for each item in turn.\n   */\n  children?: ((item: T) => ReactElement) | 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 and `aria-invalid` both\n   * follow from it.\n   *\n   * Outside a `Form` the message line arrives with the message, so the\n   * field grows when this does and moves what is under it. A `Form` holds\n   * that space from the start; so does a permanent `description`.\n   */\n  error?: string;\n  /**\n   * What the group is for. Required rather than optional: a set of chips\n   * with no name is a row a screen reader cannot introduce.\n   */\n  label: string;\n  /**\n   * What the close target on each chip is called, for a screen reader. React\n   * Aria adds the chip's own label after it, so this is the verb rather than\n   * the whole phrase — \"Remove\" becomes \"Remove First item\". Left out, React\n   * Aria names it in the reader's locale — \"Remove\" in English.\n   */\n  removeLabel?: string;\n} & Omit<RACTagGroupProps, 'children'> & Pick<RACTagListProps<T>, 'items' | 'renderEmptyState'>;\n\n// What the chip draws, from React Aria's render state. Built by a call rather\n// than written inline at the prop, which is what react-perf's\n// no-new-function-as-prop is after; the React Compiler memoises the result on\n// its inputs.\n//\n// The check and the icon it replaces are the chip module's, so a chip in a\n// group and a chip on its own draw the same ones. The close target is drawn\n// only where the group allows removing, which React Aria reports rather than\n// the call site saying so on every chip.\n//\n// The ripple is drawn only on a chip a press does something to: one the\n// group lets be selected, and not disabled. A chip in a group that selects\n// nothing is a control only for its close target, and React Aria reports\n// neither hover nor press on it, so a ripple there would answer a press that\n// changes nothing.\nfunction chipContent(children: ReactNode, icon: ReactNode, removeLabel: string | undefined, surface: ReactNode) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state, icon)}\n      {chipLabel(children)}\n      {state.selectionMode !== 'none' && !state.isDisabled ? surface : null}\n      {state.allowsRemoving ? <RACButton aria-label={removeLabel} className={chipRemoveClassName} slot=\"remove\">\n          <CloseGlyph {...stylex.props(chipStyles.removeGlyph)} />\n        </RACButton> : null}\n    </>;\n}\n\n// What each chip calls its close target. A context rather than a prop on the\n// chip, since it is the group's decision and repeating it on every chip is\n// how the two drift. Undefined unless the group is given one, which leaves\n// the name React Aria gives in the reader's locale.\nconst RemoveLabelContext = createContext<string | undefined>(undefined);\n\n// Hoisted so neither is a new object on every render.\nconst LABEL_STATE_VALID = {\n  isInvalid: false\n};\nconst LABEL_STATE_INVALID = {\n  isInvalid: true\n};\n\n/**\n * A labelled set of chips, one or more of which can be chosen, each of which\n * can be removed. Selection is React Aria's: set `selectionMode` to `single`\n * or `multiple` and pass `selectedKeys` with `onSelectionChange` to control\n * it, or `defaultSelectedKeys` to let it keep its own.\n *\n * ```tsx\n * <ChipGroup label=\"Label\" selectionMode=\"multiple\" onRemove={remove}>\n *   <ChipGroup.Chip id=\"first\">First item</ChipGroup.Chip>\n * </ChipGroup>\n * ```\n *\n * Give the group `onRemove` and each chip draws a close target. The arrow\n * keys move between chips, so a set of many is one tab stop rather than many.\n *\n * A chip that toggles nothing else is Chip; this is for a set that shares a\n * value.\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 ChipGroup<T extends object = object>({\n  children,\n  description,\n  error,\n  items,\n  label,\n  removeLabel,\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T> & RefAttributes<HTMLDivElement>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup {...props} {...mergeStyles(stylex.props(groupStyles.root), props)}>\n      {/* React Aria's tag group has no disabled state of its own — a chip is\n          disabled through the group's `disabledKeys` — so the label follows\n          validity alone. */}\n      <FieldLabel state={invalid ? LABEL_STATE_INVALID : LABEL_STATE_VALID} variant=\"group\">\n        {label}\n      </FieldLabel>\n      <RemoveLabelContext value={removeLabel}>\n        <RACTagList<T> items={items} renderEmptyState={renderEmptyState} {...stylex.props(styles.list, focus.ring)}>\n          {children}\n        </RACTagList>\n      </RemoveLabelContext>\n      <FieldMessage description={description} error={error} inset={false} />\n    </RACTagGroup>;\n}\n\n/**\n * One chip. Give every chip an `id` — that is the key selection and removal\n * are reported by.\n */\nfunction ChipGroupChip({\n  children,\n  icon,\n  onContextMenu,\n  onPointerCancel,\n  onPointerDown,\n  onPointerLeave,\n  onPointerUp,\n  ...props\n}: ChipGroupChipProps & RefAttributes<HTMLDivElement>) {\n  const removeLabel = useContext(RemoveLabelContext);\n  // The press ripple a list's rows draw — see ListItem there. A chip in a\n  // group is a collection row, whose clicks React Aria keeps for itself, so\n  // the press ends when the pointer is released rather than on a click.\n  const ripple = useRipple<HTMLDivElement>(true, {\n    onContextMenu,\n    onPointerCancel,\n    onPointerDown,\n    onPointerLeave,\n    onPointerUp\n  }, true);\n  return <RACTag textValue={props.textValue ?? textOf(children)} {...ripple.handlers} {...props} {...mergeStatefulStyles(groupChipPropsFor, props)}>\n      {chipContent(children, icon, removeLabel, ripple.surface)}\n    </RACTag>;\n}\n\n// The pill a standalone Chip draws, from `src/chip`, touch target included:\n// every chip's reaches halfway across the gap its rows wrap at.\nfunction groupChipPropsFor(state: TagRenderProps) {\n  return chipPropsFor(state);\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport { ChipGroupChip };\nexport default ChipGroup;"],"mappings":"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"}

package/dist/components/copy-field/index.d.ts

@@ -13,6 +13,15 @@ type CopyFieldProps = {
    * I18nProvider's locale — "Copy" in English.
    */
   copyLabel?: string;
+  /**
+   * What the value is — "Repository URL", "Access token" — for a page with
+   * more than one field. It names the field as a group and joins the button's
+   * name, so a screen reader hears "Copy Repository URL" rather than one
+   * "Copy" after another; it is not shown. The value itself stays out of the
+   * button's name, since a token would be read aloud. Left out, the field is
+   * unnamed and its button is "Copy" alone, as it always was.
+   */
+  label?: string;
   /**
    * Called with the value after it reaches the clipboard, never before.
    *
@@ -24,9 +33,10 @@ type CopyFieldProps = {
    */
   onCopied?: (value: string) => void;
   /**
-   * Called when the write is refused, with whatever was thrown. The button
-   * stays at rest, so this is the only signal an app gets — reach for it to
-   * fall back, by selecting the value or saying so in a snackbar.
+   * Called when the write is refused, with whatever was thrown, and the
+   * field's own fallback has not copied the value either. By then the value
+   * is selected and the field says so — see `selectedLabel` — so this is for
+   * an app that wants to say more, in a snackbar say.
    *
    * Takes the error where `onCopied` takes the value, because the value is
    * the one thing the call site already has and the reason is the one thing
@@ -35,6 +45,15 @@ type CopyFieldProps = {
    * permission is denied it is a `DOMException`.
    */
   onCopyFailed?: (error: unknown) => void;
+  /**
+   * What is announced when the clipboard refused the write and the value has
+   * been selected for the reader to copy themselves. The button keeps saying
+   * `copyLabel`, since a label slot wide enough for this would double the
+   * button's width at rest; the selection itself is what shows. Left out, it
+   * is the phrase for it in the I18nProvider's locale — "Selected to copy"
+   * in English.
+   */
+  selectedLabel?: string;
   /** The text shown, and the text copied. */
   value: string;
 } & Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
@@ -44,10 +63,13 @@ type CopyFieldProps = {
  * on the button itself.
  *
  * A write refused — outside a secure context, or where the permission is
- * denied — leaves the button at rest rather than confirming, and calls
- * `onCopyFailed`.
+ * denied — does not leave the reader with nothing. The field selects the
+ * value and tries the older copy command, which some of those places still
+ * allow; failing that, the selection is left ready for the keyboard's own
+ * copy, the field announces so, and `onCopyFailed` is called. One click on
+ * the value selects exactly the value too.
  */
-declare function CopyField({ copiedLabel: copiedLabelProp, copyLabel: copyLabelProp, onCopied, onCopyFailed, value, ...props }: CopyFieldProps & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
+declare function CopyField({ copiedLabel: copiedLabelProp, copyLabel: copyLabelProp, label, onCopied, onCopyFailed, selectedLabel: selectedLabelProp, value, ...props }: CopyFieldProps & RefAttributes<HTMLDivElement>): import("react").JSX.Element;
 //#endregion
 export { type CopyFieldProps, CopyField as default };
 //# sourceMappingURL=index.d.ts.map