@kanso-labs/kanso-ui 0.44.0 → 0.45.0

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","CheckboxButtonRenderProps","CheckboxFieldRenderProps","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","fieldContent","t6","button","reserve","messages","stylex.props","_c","props"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldRenderProps, 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      {fieldContent(<CheckboxButton className=\"xjp7ctv\">\n          {buttonContent(children, ripple, inGroup)}\n        </CheckboxButton>, description, error, reachable)}\n    </CheckboxField>;\n}\n\n// The button and the line under it, from the field's render state: the\n// description fades with a disabled checkbox, by itself or by its group, as\n// its label does. Built by a call for the same reason as `buttonContent`.\nfunction fieldContent(button: ReactNode, description: string | undefined, error: string | undefined, reserve: boolean) {\n  return ({\n    isDisabled\n  }: CheckboxFieldRenderProps) => <>\n      {button}\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} inset={false} isDisabled={isDisabled} reserve={reserve} />\n      </div>\n    </>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["c","_c","ReactNode","RefAttributes","CheckboxButtonRenderProps","CheckboxFieldRenderProps","PressEvent","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","kWkggS","kZKoxP","kVAM5u","kaIpWk","ksu8eU","kMzoRj","kB7OPa","kMwMTN","k1xSpc","kzqmXN","kVAEAm","kIyJzY","k1ekBW","kAMwcw","$$css","boxMarked","boxMarkedDisabled","boxMarkedError","boxUnmarkedActive","boxUnmarkedDisabled","boxUnmarkedError","control","hoverLayers","error","marked","unmarked","focusLayers","pressedLayers","CheckboxProps","children","description","Omit","Ripple","ReturnType","HTMLLabelElement","Tone","buttonContent","surface","inGroup","state","required","isRequired","isSelected","isIndeterminate","interactive","isDisabled","isReadOnly","tone","isInvalid","active","isHovered","isPressed","isFocusVisible","props","disc","controlReadOnly","controlDisabled","ringVisible","className","Checkbox","t0","$","validationBehavior","group","reachable","validate","undefined","name","t1","Symbol","for","ripple","press","onPress","event","pointerType","play","t2","t3","field","t4","handlers","t5","t6","t7","fieldContent","button","reserve","messages","stylex.props","_c","props"],"sources":["../../../src/components/checkbox/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode, RefAttributes } from 'react';\nimport type { CheckboxButtonRenderProps, CheckboxFieldRenderProps, PressEvent, 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//\n// A change of state moves together: the fill and the rule fade, and the glyph\n// fades and grows in or shrinks out with them, over the same duration and\n// curve. Both glyphs are always drawn, one over the other, so a box moving\n// between checked and indeterminate crosses from one to the other, and one\n// being cleared fades out the mark it had.\n//\n// The ripple answers every press: on the control, on the text beside it, or\n// from a key, and grows from the middle of the control whichever it is. The\n// text runs the width of the row, so a ripple following the pointer there\n// reached the control only as it finished growing. A key press ripples once\n// the key has activated the checkbox, as Button's does.\n\n// Windows High Contrast and the rest of the forced-colours modes. Spelled\n// here rather than imported, for the reason src/field/styles.ts records: the\n// StyleX compiler resolves a constant across files only out of a `.stylex.ts`\n// module, and the generated one holds design tokens rather than queries.\nconst FORCED_COLORS = '@media (forced-colors: active)';\nconst styles = {\n  box: {\n    k6CgDc: \"x12w9bfk\",\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: \"x1lliihq\",\n    kzqmXN: \"x1xp8n7a\",\n    kVAEAm: \"x1n2onr6\",\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<HTMLLabelElement>>;\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 surface goes on the control while\n// the checkbox can change, and is left off while it cannot, since a press\n// that changes nothing should not look like one. Its handlers are the\n// label's, in `Checkbox` below.\nfunction buttonContent(children: ReactNode, surface: Ripple['surface'], 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 {...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            <CheckGlyph {...{\n            0: {\n              className: \"x12w9bfk xmix8c7 x1lliihq x1xp8n7a x1qiirwl x5pnq3g xg01cxk x10l6tqk x1a33avv x1qno0dh x6o7n8i xpc4ca7\"\n            },\n            1: {\n              className: \"x12w9bfk xmix8c7 x1lliihq x1xp8n7a x1qiirwl x5pnq3g x10l6tqk x1qno0dh x6o7n8i xpc4ca7 x1hc1fzr x3oybdh\"\n            }\n          }[!!(state.isSelected && !state.isIndeterminate) << 0]} />\n            <IndeterminateGlyph {...{\n            0: {\n              className: \"x12w9bfk xmix8c7 x1lliihq x1xp8n7a x1qiirwl x5pnq3g xg01cxk x10l6tqk x1a33avv x1qno0dh x6o7n8i xpc4ca7\"\n            },\n            1: {\n              className: \"x12w9bfk xmix8c7 x1lliihq x1xp8n7a x1qiirwl x5pnq3g x10l6tqk x1qno0dh x6o7n8i xpc4ca7 x1hc1fzr x3oybdh\"\n            }\n          }[!!state.isIndeterminate << 0]} />\n          </span>\n          {interactive ? 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 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 group = useContext(CheckboxGroupStateContext);\n  const inGroup = group !== null;\n  const reachable = !inGroup && (props.isRequired === true || props.validate !== undefined || props.name !== undefined);\n\n  // The ripple listens on the label, which hears a pointer on the control and\n  // on the text alike, and grows from the middle of the control for both.\n  // React Aria drops a click handler there, so a press ends on its release\n  // instead. A key reaches the input rather than the label, so its press is\n  // played once it activates the checkbox. React Aria reports that\n  // activation twice, as the key and then as the click the browser makes of\n  // it, and only the first plays. A checkbox that a press cannot change\n  // listens for neither, as in `buttonContent`.\n  const interactive = props.isDisabled !== true && props.isReadOnly !== true && group?.isDisabled !== true && group?.isReadOnly !== true;\n  const ripple = useRipple<HTMLLabelElement>(interactive, {}, true, true);\n  const press = {\n    onPress: (event: PressEvent) => {\n      if (event.pointerType === 'keyboard') {\n        ripple.play();\n      }\n      props.onPress?.(event);\n    }\n  };\n  return <CheckboxField isInvalid={invalidFrom(error)} validationBehavior={validationBehavior} {...props} {...press} {...mergeStatefulStyles(stylex.props(controlStyles.field), props)}>\n      {fieldContent(<CheckboxButton {...ripple.handlers} className=\"xjp7ctv\">\n          {buttonContent(children, ripple.surface, inGroup)}\n        </CheckboxButton>, description, error, reachable)}\n    </CheckboxField>;\n}\n\n// The button and the line under it, from the field's render state: the\n// description fades with a disabled checkbox, by itself or by its group, as\n// its label does. Built by a call for the same reason as `buttonContent`.\nfunction fieldContent(button: ReactNode, description: string | undefined, error: string | undefined, reserve: boolean) {\n  return ({\n    isDisabled\n  }: CheckboxFieldRenderProps) => <>\n      {button}\n      <div {...stylex.props(controlStyles.messages)}>\n        <FieldMessage description={description} error={error} indent inset={false} isDisabled={isDisabled} reserve={reserve} />\n      </div>\n    </>;\n}\nexport type { CheckboxProps };\nexport default Checkbox;"],"mappings":"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"}

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

@@ -2,35 +2,18 @@ import { ReactNode, RefAttributes } from "react";
 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. 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.
-   * @default false
-   */
-  elevated?: boolean;
-  /**
-   * An icon before the label, in the page's 18dp slot and the primary role.
-   * An icon drawn in `em` takes its size from the slot.
-   */
-  icon?: ReactNode;
-  /**
-   * `assist` for an action the chip's context suggests, and `suggestion`
-   * for one the product generates. Either is an action rather than a
-   * selection, so neither is ever selected.
-   */
+type ChipActionProps = ChipBaseProps & Omit<ButtonProps, 'children' | 'isPending'> & {
   variant: 'assist' | 'suggestion';
 };
-/** A filter chip: a two-state button, the default. */
-type ChipFilterProps = Omit<ToggleButtonProps, 'children'> & {
+/**
+ * What every chip takes, whichever button it is. Declared once rather than on
+ * each member of the union, so each prop has one description: the props table
+ * joins the descriptions of a prop the members declare apart.
+ */
+type ChipBaseProps = {
   /**
-   * 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
+   * The chip's label. A node rather than React Aria's node-or-function, since
+   * a filter 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. Required: the page
    * draws no chip without one, and a chip with none is an empty button to a
@@ -39,19 +22,33 @@ type ChipFilterProps = Omit<ToggleButtonProps, 'children'> & {
   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
+   * elevation 1, in place of the outline. A selected filter chip keeps the
    * secondary container.
    * @default false
    */
   elevated?: boolean;
   /**
    * An icon before the label, in the page's 18dp slot and the primary role.
-   * The check takes its place while the chip is selected, so the chip keeps
-   * its width. An icon drawn in `em` takes its size from the slot.
+   * On a filter chip the check takes its place while the chip is selected, so
+   * the chip keeps its width. An icon drawn in `em` takes its size from the
+   * slot.
    */
   icon?: ReactNode;
+};
+/** A filter chip: a two-state button, the default. */
+type ChipFilterProps = ChipBaseProps & Omit<ToggleButtonProps, 'children'> & {
   /**
-   * A filter chip, a two-state button.
+   * An icon after the label, in the same 18dp slot and the chip's own
+   * content role, which is the page's dropdown filter chip: an arrow here
+   * says the chip opens a menu. It stays while the chip is selected. An
+   * icon drawn in `em` takes its size from the slot.
+   */
+  trailingIcon?: ReactNode;
+  /**
+   * `filter`, the default, for a two-state button; `assist` for an action
+   * the chip's context suggests, and `suggestion` for one the product
+   * generates. Either of those is an action rather than a selection, so
+   * neither is ever selected.
    * @default 'filter'
    */
   variant?: 'filter';
@@ -65,8 +62,27 @@ type ChipVariant = 'assist' | 'filter' | 'suggestion';
  * control it, or `defaultSelected` to let it keep its own state. Selection is
  * announced through `aria-pressed` rather than a role of its own.
  *
+ * This is the chip on its own. A set of chips with a selection rule, one at a
+ * time or several, is a `ChipGroup`, which keeps the rule, moves between the
+ * chips with the arrow keys and labels the set.
+ *
+ * Given a `trailingIcon`, a filter chip is the page's dropdown filter chip:
+ * placed first inside a `Menu`, it opens the menu, and an arrow after its
+ * label says so.
+ *
  * `variant="assist"` and `variant="suggestion"` draw the page's two action
  * chips instead: plain buttons, pressed with `onPress`, never selected.
+ *
+ * ```tsx
+ * const [selected, setSelected] = useState(false)
+ *
+ * <Chip isSelected={selected} onChange={setSelected}>
+ *   Label
+ * </Chip>
+ * <Chip icon={<AddIcon />} onPress={onAdd} variant="assist">
+ *   Label
+ * </Chip>
+ * ```
  */
 declare function Chip(props: ChipProps & RefAttributes<HTMLButtonElement>): import("react").JSX.Element;
 //#endregion

package/dist/components/chip/index.js

@@ -2,7 +2,7 @@
 import { mergeStatefulStyles } from "../../styles/merge.js";
 import { ariaAttributesOf, buttonRenderer, toggleButtonRenderer } from "../../render/aria.js";
 import { useRipple } from "../../hooks/useRipple.js";
-import { chipGlyph, chipLabel, chipPropsFor } from "../../chip/index.js";
+import { chipGlyph, chipLabel, chipPropsFor, chipTrailingIcon } from "../../chip/index.js";
 import { c } from "react/compiler-runtime";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { Button, ToggleButton } from "react-aria-components";
@@ -91,8 +91,27 @@ function actionChipContent(children, icon, surface) {
 * control it, or `defaultSelected` to let it keep its own state. Selection is
 * announced through `aria-pressed` rather than a role of its own.
 *
+* This is the chip on its own. A set of chips with a selection rule, one at a
+* time or several, is a `ChipGroup`, which keeps the rule, moves between the
+* chips with the arrow keys and labels the set.
+*
+* Given a `trailingIcon`, a filter chip is the page's dropdown filter chip:
+* placed first inside a `Menu`, it opens the menu, and an arrow after its
+* label says so.
+*
 * `variant="assist"` and `variant="suggestion"` draw the page's two action
 * chips instead: plain buttons, pressed with `onPress`, never selected.
+*
+* ```tsx
+* const [selected, setSelected] = useState(false)
+*
+* <Chip isSelected={selected} onChange={setSelected}>
+*   Label
+* </Chip>
+* <Chip icon={<AddIcon />} onPress={onAdd} variant="assist">
+*   Label
+* </Chip>
+* ```
 */
 function Chip(props) {
 	const $ = c(4);
@@ -113,16 +132,17 @@ function Chip(props) {
 	} else t0 = $[3];
 	return t0;
 }
-function chipContent(children, icon, surface) {
+function chipContent(children, icon, trailingIcon, surface) {
 	return (state) => /* @__PURE__ */ jsxs(Fragment, { children: [
 		chipGlyph(state, icon),
 		chipLabel(children),
+		chipTrailingIcon(trailingIcon),
 		surface
 	] });
 }
 function FilterChip(t0) {
-	const $ = c(18);
-	const { children, elevated: t1, icon, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, render, variant: t2, ...props } = t0;
+	const $ = c(19);
+	const { children, elevated: t1, icon, onClick, onContextMenu, onKeyDown, onKeyUp, onPointerCancel, onPointerDown, onPointerLeave, onPointerUp, render, trailingIcon, variant: t2, ...props } = t0;
 	const elevated = t1 === void 0 ? false : t1;
 	const variant = t2 === void 0 ? "filter" : t2;
 	const element = {
@@ -154,15 +174,16 @@ function FilterChip(t0) {
 	const t5 = ripple.handlers;
 	const t6 = mergeStatefulStyles(filterChipClasses(variant, elevated), props);
 	let t7;
-	if ($[7] !== children || $[8] !== icon || $[9] !== ripple.surface) {
-		t7 = chipContent(children, icon, ripple.surface);
+	if ($[7] !== children || $[8] !== icon || $[9] !== ripple.surface || $[10] !== trailingIcon) {
+		t7 = chipContent(children, icon, trailingIcon, ripple.surface);
 		$[7] = children;
 		$[8] = icon;
 		$[9] = ripple.surface;
-		$[10] = t7;
-	} else t7 = $[10];
+		$[10] = trailingIcon;
+		$[11] = t7;
+	} else t7 = $[11];
 	let t8;
-	if ($[11] !== T0 || $[12] !== props || $[13] !== ripple.handlers || $[14] !== t4 || $[15] !== t6 || $[16] !== t7) {
+	if ($[12] !== T0 || $[13] !== props || $[14] !== ripple.handlers || $[15] !== t4 || $[16] !== t6 || $[17] !== t7) {
 		t8 = /* @__PURE__ */ jsx(T0, {
 			render: t4,
 			...t5,
@@ -170,14 +191,14 @@ function FilterChip(t0) {
 			...t6,
 			children: t7
 		});
-		$[11] = T0;
-		$[12] = props;
-		$[13] = ripple.handlers;
-		$[14] = t4;
-		$[15] = t6;
-		$[16] = t7;
-		$[17] = t8;
-	} else t8 = $[17];
+		$[12] = T0;
+		$[13] = props;
+		$[14] = ripple.handlers;
+		$[15] = t4;
+		$[16] = t6;
+		$[17] = t7;
+		$[18] = t8;
+	} else t8 = $[18];
 	return t8;
 }
 function filterChipClasses(kind, elevated) {

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  /**\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(\n        { isDisabled: state.isDisabled, isSelected: false },\n        icon,\n        false,\n      )}\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","chipTrailingIcon","useRipple","ariaAttributesOf","buttonRenderer","toggleButtonRenderer","mergeStatefulStyles","ChipActionProps","ChipBaseProps","Omit","variant","children","elevated","icon","ChipFilterProps","trailingIcon","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 {\n  chipGlyph,\n  chipLabel,\n  chipPropsFor,\n  chipTrailingIcon,\n} 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 = ChipBaseProps &\n  Omit<RACButtonProps, 'children' | 'isPending'> & {\n    // Described on the filter chip's `variant` alone: the table joins the\n    // descriptions of both, and the one sentence there covers all three.\n    variant: 'assist' | 'suggestion'\n  }\n\n/**\n * What every chip takes, whichever button it is. Declared once rather than on\n * each member of the union, so each prop has one description: the props table\n * joins the descriptions of a prop the members declare apart.\n */\ntype ChipBaseProps = {\n  /**\n   * The chip's label. A node rather than React Aria's node-or-function, since\n   * a filter 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 filter chip 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   * On a filter chip the check takes its place while the chip is selected, so\n   * the chip keeps its width. An icon drawn in `em` takes its size from the\n   * slot.\n   */\n  icon?: ReactNode\n}\n\n/** A filter chip: a two-state button, the default. */\ntype ChipFilterProps = ChipBaseProps &\n  Omit<RACToggleButtonProps, 'children'> & {\n    /**\n     * An icon after the label, in the same 18dp slot and the chip's own\n     * content role, which is the page's dropdown filter chip: an arrow here\n     * says the chip opens a menu. It stays while the chip is selected. An\n     * icon drawn in `em` takes its size from the slot.\n     */\n    trailingIcon?: ReactNode\n    /**\n     * `filter`, the default, for a two-state button; `assist` for an action\n     * the chip's context suggests, and `suggestion` for one the product\n     * generates. Either of those is an action rather than a selection, so\n     * neither is ever selected.\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(\n        { isDisabled: state.isDisabled, isSelected: false },\n        icon,\n        false,\n      )}\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 * This is the chip on its own. A set of chips with a selection rule, one at a\n * time or several, is a `ChipGroup`, which keeps the rule, moves between the\n * chips with the arrow keys and labels the set.\n *\n * Given a `trailingIcon`, a filter chip is the page's dropdown filter chip:\n * placed first inside a `Menu`, it opens the menu, and an arrow after its\n * label says so.\n *\n * `variant=\"assist\"` and `variant=\"suggestion\"` draw the page's two action\n * chips instead: plain buttons, pressed with `onPress`, never selected.\n *\n * ```tsx\n * const [selected, setSelected] = useState(false)\n *\n * <Chip isSelected={selected} onChange={setSelected}>\n *   Label\n * </Chip>\n * <Chip icon={<AddIcon />} onPress={onAdd} variant=\"assist\">\n *   Label\n * </Chip>\n * ```\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 any trailing\n// icon, and the ripple over them all. 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(\n  children: ReactNode,\n  icon: ReactNode,\n  trailingIcon: ReactNode,\n  surface: ReactNode,\n) {\n  return (state: ToggleButtonRenderProps) => (\n    <>\n      {chipGlyph(state, icon)}\n      {chipLabel(children)}\n      {chipTrailingIcon(trailingIcon)}\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  trailingIcon,\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, trailingIcon, 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":";;;;;;;;;AAyHA,SAAAkC,WAAAC,IAAA;CAAA,MAAAC,IAAAnC,EAAA,EAAA;CAAoB,MAAA,EAAA0B,UAAAC,UAAAS,IAAAR,MAAAS,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAAC,QAAApB,SAAA,GAAAqB,UAAAZ;CAElB,MAAAP,WAAAS,OAAAW,KAAAA,IAAA,QAAAX;CAcA,MAAAY,UAAgB;EAAAC,MAAQ/B,iBAAiB4B,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,SAAelC,UAA4B6B,MAAKM,eAAgB,MAAMF,EAOrE;CAGE,MAAAG,KAAA3C;CACS,MAAA4C,KAAAnC,eAAe6B,SAASH,MAAM;CAClC,MAAAU,KAAAJ,OAAMK;CAEN,MAAAC,KAAApC,oBAAoBqC,kBAAkBjC,SAASE,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,UACNjD,aAAa;EAAE,GAAGiD;EAAOC,YAAY;CAAM,GAAG;EAAEtC;EAAUoC;CAAK,CAAC;AACpE;AAIA,SAASF,kBACPnC,UACAE,MACAgC,SACA;CACA,QAAQI,UACN,qBAAA,UAAA,EAAA,UAAA;EACGnD,UACC;GAAEuC,YAAYY,MAAMZ;GAAYa,YAAY;EAAM,GAClDrC,MACA,KACF;EACCd,UAAUY,QAAQ;EAClBkC;CACH,EAAA,CAAA;AAEJ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BA,SAAAM,KAAApB,OAAA;CAAA,MAAAX,IAAAnC,EAAA,CAAA;CACE,IAAImE,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,YACP1C,UACAE,MACAE,cACA8B,SACA;CACA,QAAQI,UACN,qBAAA,UAAA,EAAA,UAAA;EACGnD,UAAUmD,OAAOpC,IAAI;EACrBd,UAAUY,QAAQ;EAClBV,iBAAiBc,YAAY;EAC7B8B;CACH,EAAA,CAAA;AAEJ;AAEA,SAAAS,WAAAnC,IAAA;CAAA,MAAAC,IAAAnC,EAAA,EAAA;CAAoB,MAAA,EAAA0B,UAAAC,UAAAS,IAAAR,MAAAS,SAAAC,eAAAC,WAAAC,SAAAC,iBAAAC,eAAAC,gBAAAC,aAAAC,QAAAf,cAAAL,SAAAyB,IAAA,GAAAJ,UAAAZ;CAElB,MAAAP,WAAAS,OAAAW,KAAAA,IAAA,QAAAX;CAYA,MAAAX,UAAAyB,OAAAH,KAAAA,IAAA,WAAAG;CAGA,MAAAF,UAAgB;EAAAC,MAAQ/B,iBAAiB4B,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,SAAelC,UAA4B6B,MAAKM,eAAgB,MAAME,EAOrE;CAGE,MAAAD,KAAA1C;CACS,MAAA4C,KAAAnC,qBAAqB4B,SAASH,MAAM;CACxC,MAAAY,KAAAN,OAAMK;CAEN,MAAAG,KAAAtC,oBAAoBiD,kBAAkB7C,SAASE,QAAQ,GAAGmB,KAAK;CAAC,IAAAgB;CAAA,IAAA3B,EAAA,OAAAT,YAAAS,EAAA,OAAAP,QAAAO,EAAA,OAAAgB,OAAAS,WAAAzB,EAAA,QAAAL,cAAA;EAEnEgC,KAAAM,YAAY1C,UAAUE,MAAME,cAAcqB,OAAMS,OAAQ;EAACzB,EAAA,KAAAT;EAAAS,EAAA,KAAAP;EAAAO,EAAA,KAAAgB,OAAAS;EAAAzB,EAAA,MAAAL;EAAAK,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;EAN5DS,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,UACNjD,aAAaiD,OAAO;EAAErC;EAAUoC;CAAK,CAAC;AAC1C;AAKA,SAASI,SAASrB,OAA4C;CAC5D,OAAOA,MAAMrB,YAAY,YAAYqB,MAAMrB,YAAY;AACzD"}

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

@@ -39,8 +39,11 @@ type ChipGroupProps<T extends object = object> = {
   description?: string;
   /**
    * The problem with the current selection, in words. Its presence is what
-   * puts the group in its error state — the message and `aria-invalid` both
-   * follow from it.
+   * puts the group in its error state: the label and the message take the
+   * error colour, the grid's `aria-describedby` names the message, and the
+   * message is read out politely as it appears. The grid carries no
+   * `aria-invalid`, which ARIA does not allow on a grid, so the message is
+   * the whole of what a screen reader is told.
    *
    * Outside a `Form` the message line arrives with the message, so the
    * field grows when this does and moves what is under it. A `Form` holds

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

@@ -44,7 +44,7 @@ const GroupActionContext = createContext(false);
 const LABEL_STATE_VALID = { isInvalid: false };
 const LABEL_STATE_INVALID = { isInvalid: true };
 function actingChipPropsFor(state) {
-	return chipPropsFor(state);
+	return chipPropsFor(state, { kind: kindOf(state) });
 }
 /**
 * A labelled set of chips, one or more of which can be chosen, each of which
@@ -281,7 +281,13 @@ function ChipGroupChip(t0) {
 	return t6;
 }
 function groupChipPropsFor(state) {
-	return chipPropsFor(state, { inert: state.selectionMode === "none" });
+	return chipPropsFor(state, {
+		inert: state.selectionMode === "none",
+		kind: kindOf(state)
+	});
+}
+function kindOf(state) {
+	return state.allowsRemoving ? "input" : "filter";
 }
 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","focus","mergeStatefulStyles","mergeStyles","sizing","spacing","styles","list","kB7OPa","k1xSpc","kwnvtZ","kOIVth","kAzted","$$css","ChipGroupChipProps","children","className","icon","style","textValue","Omit","ChipGroupProps","item","T","description","error","escapeKeyBehavior","label","removeLabel","Pick","chipContent","surface","acts","state","selectionMode","isDisabled","props","surfaceCorners","allowsRemoving","removeGlyph","RemoveLabelContext","undefined","GroupActionContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","actingChipPropsFor","ChipGroup","t0","$","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","root","onAction","Symbol","for","ring","ChipGroupChip","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","href","ripple","handlers","groupChipPropsFor","inert","Chip","stylex.props","RACButton","_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// **Escape leaves the selection alone.** React Aria's collections clear the\n// selection on Escape and stop the key there, which suits a list whose\n// selection is what an action is about to act on. A set of chips holds a\n// value, as a checkbox group does, and usually sits in a Sheet, Dialog or\n// Popover, where Escape is what dismisses it: clearing it there wiped the\n// reader's filters and took a second press to close. So the group passes\n// React Aria's `escapeKeyBehavior` as `none` unless told `clearSelection`.\n//\n// **A chip a press does nothing to does not look pressable.** In a group\n// that selects nothing, a chip with no action of its own or the group's is\n// a control only for its close target. It draws the arrow cursor, no layer\n// and no ripple, and its close target keeps the pointer. A disabled chip's\n// close target takes the chip's `not-allowed` with it.\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 = {\n  /**\n   * The chip's label. Text, numbers, or a mix of the two — `Label {3}` —\n   * also name the chip; a label holding an element needs `textValue`.\n   */\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  /**\n   * The chip's name as text, which is what a screen reader announces for\n   * its row. Read from the label when that is text or numbers, so it is\n   * needed only when the label holds an element — emphasis, a count in a\n   * badge — and React Aria warns in the console when such a chip has none.\n   * Given, it wins over the text read from the label.\n   */\n  textValue?: string;\n} & Omit<RACTagProps, 'children' | 'className' | 'style' | 'textValue'>;\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 Escape does on a chip. `none`, the default, keeps the selection and\n   * lets the key through to whatever is around the group, so a group in a\n   * Sheet, Dialog or Popover closes it on the first press. `clearSelection`\n   * empties the selection first, as React Aria's own default does, and lets\n   * a second press through.\n   *\n   * @default 'none'\n   */\n  escapeKeyBehavior?: 'clearSelection' | 'none';\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' | 'escapeKeyBehavior'> & 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, and not\n// disabled: one the group lets be selected, or one with an action, its own\n// or the group's. Any other chip in a group that selects nothing is a\n// control only for its close target, and React Aria reports neither hover\n// nor press on it, so a ripple there would answer a press that changes\n// nothing. `acts` is the action half, which the render state does not carry.\n//\n// It sits in a box of its own carrying the chip's corner, since React Aria's\n// cell between the chip and this content would otherwise hand the ripple a\n// square one to inherit; see the header of src/chip/styles.ts.\nfunction chipContent(children: ReactNode, icon: ReactNode, removeLabel: string | undefined, surface: ReactNode, acts: boolean) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state, icon, state.selectionMode !== 'none')}\n      {chipLabel(children)}\n      {(acts || state.selectionMode !== 'none') && !state.isDisabled ? <span {...stylex.props(chipStyles.surfaceCorners)}>{surface}</span> : 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// Whether the group was given `onAction`, which makes every chip in it\n// pressable whether or not it selects. A context for the reason the close\n// target's name is one.\nconst GroupActionContext = createContext(false);\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// The pill of a chip with an action, which a press always reaches.\nfunction actingChipPropsFor(state: TagRenderProps) {\n  return chipPropsFor(state);\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 is never wider than its row, so a label with no room ends in an\n * ellipsis rather than wrapping, and shows its full text in the browser's\n * tooltip on hover.\n *\n * Escape on a chip keeps the selection and reaches whatever is around the\n * group, so a group in a Sheet, Dialog or Popover closes it. Pass\n * `escapeKeyBehavior=\"clearSelection\"` for React Aria's own default, which\n * empties the selection on the first press and lets the second through.\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  escapeKeyBehavior = 'none',\n  items,\n  label,\n  removeLabel,\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T> & RefAttributes<HTMLDivElement>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup escapeKeyBehavior={escapeKeyBehavior} {...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        <GroupActionContext value={props.onAction !== undefined}>\n          <RACTagList<T> items={items} renderEmptyState={renderEmptyState} {...stylex.props(styles.list, focus.ring)}>\n            {children}\n          </RACTagList>\n        </GroupActionContext>\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  // An action of its own, a link or the group's makes a chip pressable even\n  // in a group that selects nothing, as React Aria treats it.\n  const acts = useContext(GroupActionContext) || props.onAction !== undefined || props.href !== undefined;\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(acts ? actingChipPropsFor : groupChipPropsFor, props)}>\n      {chipContent(children, icon, removeLabel, ripple.surface, acts)}\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. Inert where\n// the group selects nothing and the chip has no action — see the header.\nfunction groupChipPropsFor(state: TagRenderProps) {\n  return chipPropsFor(state, {\n    inert: state.selectionMode === 'none'\n  });\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport { ChipGroupChip };\nexport default ChipGroup;"],"mappings":"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"}
+{"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","children","className","icon","style","textValue","Omit","ChipGroupProps","item","T","description","error","escapeKeyBehavior","label","removeLabel","Pick","chipContent","surface","acts","state","selectionMode","isDisabled","props","surfaceCorners","allowsRemoving","removeGlyph","RemoveLabelContext","undefined","GroupActionContext","LABEL_STATE_VALID","isInvalid","LABEL_STATE_INVALID","actingChipPropsFor","kind","kindOf","ChipGroup","t0","$","T0","invalid","items","renderEmptyState","t1","t2","t3","t4","t5","t6","t7","t8","t9","t10","t11","t12","root","onAction","Symbol","for","ring","ChipGroupChip","onContextMenu","onPointerCancel","onPointerDown","onPointerLeave","onPointerUp","href","ripple","handlers","groupChipPropsFor","inert","Chip","stylex.props","RACButton","_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, points it at its error, and moves between its chips\n// 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// **Escape leaves the selection alone.** React Aria's collections clear the\n// selection on Escape and stop the key there, which suits a list whose\n// selection is what an action is about to act on. A set of chips holds a\n// value, as a checkbox group does, and usually sits in a Sheet, Dialog or\n// Popover, where Escape is what dismisses it: clearing it there wiped the\n// reader's filters and took a second press to close. So the group passes\n// React Aria's `escapeKeyBehavior` as `none` unless told `clearSelection`.\n//\n// **A chip a press does nothing to does not look pressable.** In a group\n// that selects nothing, a chip with no action of its own or the group's is\n// a control only for its close target. It draws the arrow cursor, no layer\n// and no ripple, and its close target keeps the pointer. A disabled chip's\n// close target takes the chip's `not-allowed` with it.\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 = {\n  /**\n   * The chip's label. Text, numbers, or a mix of the two — `Label {3}` —\n   * also name the chip; a label holding an element needs `textValue`.\n   */\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  /**\n   * The chip's name as text, which is what a screen reader announces for\n   * its row. Read from the label when that is text or numbers, so it is\n   * needed only when the label holds an element — emphasis, a count in a\n   * badge — and React Aria warns in the console when such a chip has none.\n   * Given, it wins over the text read from the label.\n   */\n  textValue?: string;\n} & Omit<RACTagProps, 'children' | 'className' | 'style' | 'textValue'>;\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 label and the message take the\n   * error colour, the grid's `aria-describedby` names the message, and the\n   * message is read out politely as it appears. The grid carries no\n   * `aria-invalid`, which ARIA does not allow on a grid, so the message is\n   * the whole of what a screen reader is told.\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 Escape does on a chip. `none`, the default, keeps the selection and\n   * lets the key through to whatever is around the group, so a group in a\n   * Sheet, Dialog or Popover closes it on the first press. `clearSelection`\n   * empties the selection first, as React Aria's own default does, and lets\n   * a second press through.\n   *\n   * @default 'none'\n   */\n  escapeKeyBehavior?: 'clearSelection' | 'none';\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' | 'escapeKeyBehavior'> & 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, and not\n// disabled: one the group lets be selected, or one with an action, its own\n// or the group's. Any other chip in a group that selects nothing is a\n// control only for its close target, and React Aria reports neither hover\n// nor press on it, so a ripple there would answer a press that changes\n// nothing. `acts` is the action half, which the render state does not carry.\n//\n// It sits in a box of its own carrying the chip's corner, since React Aria's\n// cell between the chip and this content would otherwise hand the ripple a\n// square one to inherit; see the header of src/chip/styles.ts.\nfunction chipContent(children: ReactNode, icon: ReactNode, removeLabel: string | undefined, surface: ReactNode, acts: boolean) {\n  return (state: TagRenderProps) => <>\n      {chipGlyph(state, icon, state.selectionMode !== 'none')}\n      {chipLabel(children)}\n      {(acts || state.selectionMode !== 'none') && !state.isDisabled ? <span {...stylex.props(chipStyles.surfaceCorners)}>{surface}</span> : 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// Whether the group was given `onAction`, which makes every chip in it\n// pressable whether or not it selects. A context for the reason the close\n// target's name is one.\nconst GroupActionContext = createContext(false);\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// The pill of a chip with an action, which a press always reaches.\nfunction actingChipPropsFor(state: TagRenderProps) {\n  return chipPropsFor(state, {\n    kind: kindOf(state)\n  });\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 is never wider than its row, so a label with no room ends in an\n * ellipsis rather than wrapping, and shows its full text in the browser's\n * tooltip on hover.\n *\n * Escape on a chip keeps the selection and reaches whatever is around the\n * group, so a group in a Sheet, Dialog or Popover closes it. Pass\n * `escapeKeyBehavior=\"clearSelection\"` for React Aria's own default, which\n * empties the selection on the first press and lets the second through.\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  escapeKeyBehavior = 'none',\n  items,\n  label,\n  removeLabel,\n  renderEmptyState,\n  ...props\n}: ChipGroupProps<T> & RefAttributes<HTMLDivElement>) {\n  const invalid = invalidFrom(error);\n  return <RACTagGroup escapeKeyBehavior={escapeKeyBehavior} {...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        <GroupActionContext value={props.onAction !== undefined}>\n          <RACTagList<T> items={items} renderEmptyState={renderEmptyState} {...stylex.props(styles.list, focus.ring)}>\n            {children}\n          </RACTagList>\n        </GroupActionContext>\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  // An action of its own, a link or the group's makes a chip pressable even\n  // in a group that selects nothing, as React Aria treats it.\n  const acts = useContext(GroupActionContext) || props.onAction !== undefined || props.href !== undefined;\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(acts ? actingChipPropsFor : groupChipPropsFor, props)}>\n      {chipContent(children, icon, removeLabel, ripple.surface, acts)}\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. Inert where\n// the group selects nothing and the chip has no action — see the header.\nfunction groupChipPropsFor(state: TagRenderProps) {\n  return chipPropsFor(state, {\n    inert: state.selectionMode === 'none',\n    kind: kindOf(state)\n  });\n}\n\n// Which of the page's chips a group's chip is: an input chip once it can be\n// removed, and a filter chip until then, which is what decides whether a\n// selected one lifts under a hovering pointer.\nfunction kindOf(state: TagRenderProps) {\n  return state.allowsRemoving ? 'input' : 'filter';\n}\nChipGroup.Chip = ChipGroupChip;\nexport type { ChipGroupChipProps, ChipGroupProps };\nexport { ChipGroupChip };\nexport default ChipGroup;"],"mappings":";;;;;;;;;;;;;;;;;AAmEA,MAAMwC,SAAS,EACbC,MAAM;CACJC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,QAAQ;CACRC,OAAO;AACT,EACF;AA8FA,SAASiB,YAAYf,UAAqBE,MAAiBW,aAAiCG,SAAoBC,MAAe;CAC7H,QAAQC,UAA0B,qBAAA,YAAA,EAAA,UAAA;EAC7B5C,UAAU4C,OAAOhB,MAAMgB,MAAMC,kBAAkB,MAAM;EACrD5C,UAAUyB,QAAQ;GACjBiB,QAAQC,MAAMC,kBAAkB,WAAW,CAACD,MAAME,aAAa,oBAAC,QAAD;GAAM,GAAIzD,MAAae,WAAW4C,cAAc;GAAIN,UAAAA;EAAc,CAAA,IAAI;EACtIE,MAAMK,iBAAiB,oBAACgD,QAAD;GAAW,cAAY1D;GAAa,WAAWpC;GAAqB,MAAK;GAC7F,UAAA,oBAAC,YAAD,EAAY,GAAId,MAAae,WAAW8C,WAAW,EAAE,CAAA;EAC5C,CAAA,IAAI;CACnB,EAAA,CAAA;AACJ;AAMA,MAAMC,qBAAqB7D,cAAkC8D,KAAAA,CAAS;AAKtE,MAAMC,qBAAqB/D,cAAc,KAAK;AAG9C,MAAMgE,oBAAoB,EACxBC,WAAW,MACb;AACA,MAAMC,sBAAsB,EAC1BD,WAAW,KACb;AAGA,SAASE,mBAAmBb,OAAuB;CACjD,OAAO1C,aAAa0C,OAAO,EACzBc,MAAMC,OAAOf,KAAK,EACpB,CAAC;AACH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAgCA,SAAAgB,UAAAC,IAAA;CAAA,MAAAC,IAAApF,EAAA,EAAA;CAAA,IAAAqF;CAAA,IAAArC;CAAA,IAAAS;CAAA,IAAAC;CAAA,IAAA4B;CAAA,IAAAC;CAAA,IAAA3B;CAAA,IAAAS;CAAA,IAAAR;CAAA,IAAA2B;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAC;CAAA,IAAAP,EAAA,OAAAD,IAAA;EAA8C,MAAA,EAAAnC,UAAA4C,IAAAnC,aAAAoC,IAAAnC,OAAAoC,IAAAnC,mBAAAoC,IAAAR,OAAAS,IAAApC,OAAAqC,IAAApC,aAAAqC,KAAAV,kBAAAW,KAAA,GAAAC,QAAAjB;EAAAnC,WAAA4C;EAAAnC,cAAAoC;EAAAnC,QAAAoC;EAAAP,QAAAS;EAAApC,QAAAqC;EAAApC,cAAAqC;EAAAV,mBAAAW;EAAA9B,UAAA+B;EAI5C,MAAAzC,oBAAAoC,OAAArB,KAAAA,IAAA,SAAAqB;EAOAT,UAAgBxD,YAAY4B,KAAK;EACzB2B,KAAAlE;EAA+BwC,KAAAA;EAAuBU,KAAAA;EAAWsB,KAAAvD,YAAYzB,MAAaoB,YAAWsE,IAAK,GAAGhC,OAAK;EAACe,EAAA,KAAAD;EAAAC,EAAA,KAAAC;EAAAD,EAAA,KAAApC;EAAAoC,EAAA,KAAA3B;EAAA2B,EAAA,KAAA1B;EAAA0B,EAAA,KAAAE;EAAAF,EAAA,KAAAG;EAAAH,EAAA,KAAAxB;EAAAwB,EAAA,KAAAf;EAAAe,EAAA,KAAAvB;EAAAuB,EAAA,MAAAI;EAAAJ,EAAA,MAAAK;EAAAL,EAAA,MAAAM;EAAAN,EAAA,MAAAO;CAAA,OAAA;EAAAN,KAAAD,EAAA;EAAApC,WAAAoC,EAAA;EAAA3B,cAAA2B,EAAA;EAAA1B,QAAA0B,EAAA;EAAAE,UAAAF,EAAA;EAAAG,QAAAH,EAAA;EAAAxB,QAAAwB,EAAA;EAAAf,UAAAe,EAAA;EAAAvB,cAAAuB,EAAA;EAAAI,mBAAAJ,EAAA;EAAAK,KAAAL,EAAA;EAAAM,KAAAN,EAAA;EAAAO,KAAAP,EAAA;CAAA;CAIpG,MAAAQ,KAAAN,UAAAR,sBAAAF;CAAiD,IAAAiB;CAAA,IAAAT,EAAA,QAAAxB,SAAAwB,EAAA,QAAAQ,IAAA;EAApEC,KAAA,oBAAC,YAAD;GAAmB,OAAAD;GAA2D,SAAA;GAC3EhC,UAAAA;EADQ,CAAA;EAEEwB,EAAA,MAAAxB;EAAAwB,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAEgB,MAAAU,KAAAzB,QAAKiC,aAAc5B,KAAAA;CAAS,IAAAqB;CAAA,IAAAX,EAAA,QAAAmB,OAAAC,IAAA,2BAAA,GAAA;EACgBT,KAAApF,MAAa4B,OAAMC,MAAON,MAAKuE,IAAK;EAACrB,EAAA,MAAAW;CAAA,OAAAA,KAAAX,EAAA;CAAA,IAAAY;CAAA,IAAAZ,EAAA,QAAApC,YAAAoC,EAAA,QAAAG,SAAAH,EAAA,QAAAI,kBAAA;EAA1GQ,KAAA,oBAAC2B,SAAD;GAAsBpC;GAAyBC;GAAgB,GAAMO;GAClE/C;EADQ,CAAA;EAEEoC,EAAA,MAAApC;EAAAoC,EAAA,MAAAG;EAAAH,EAAA,MAAAI;EAAAJ,EAAA,MAAAY;CAAA,OAAAA,KAAAZ,EAAA;CAAA,IAAAa;CAAA,IAAAb,EAAA,QAAAU,MAAAV,EAAA,QAAAY,IAAA;EAHfC,KAAA,oBAAC,oBAAD;GAA2B,OAAAH;GACzBE,UAAAA;EADiB,CAAA;EAIEZ,EAAA,MAAAU;EAAAV,EAAA,MAAAY;EAAAZ,EAAA,MAAAa;CAAA,OAAAA,KAAAb,EAAA;CAAA,IAAAc;CAAA,IAAAd,EAAA,QAAAvB,eAAAuB,EAAA,QAAAa,IAAA;EALvBC,MAAA,oBAAC,oBAAD;GAA2BrC,OAAAA;GACzBoC,UAAAA;EADiB,CAAA;EAMEb,EAAA,MAAAvB;EAAAuB,EAAA,MAAAa;EAAAb,EAAA,MAAAc;CAAA,OAAAA,MAAAd,EAAA;CAAA,IAAAe;CAAA,IAAAf,EAAA,QAAA3B,eAAA2B,EAAA,QAAA1B,OAAA;EACrByC,MAAA,oBAAC,cAAD;GAA2B1C;GAAoBC;GAAc,OAAA;EAAK,CAAA;EAAI0B,EAAA,MAAA3B;EAAA2B,EAAA,MAAA1B;EAAA0B,EAAA,MAAAe;CAAA,OAAAA,MAAAf,EAAA;CAAA,IAAAgB;CAAA,IAAAhB,EAAA,QAAAC,MAAAD,EAAA,QAAAK,MAAAL,EAAA,QAAAc,OAAAd,EAAA,QAAAe,OAAAf,EAAA,QAAAM,MAAAN,EAAA,QAAAO,MAAAP,EAAA,QAAAS,IAAA;EAdnEO,MAAA,qBAAC,IAAD;GAAgCzC,mBAAAA;GAAiB,GAAMU;GAAK,GAAMsB;GAAlE,UAAA;IAIHE;IAGAK;IAOAC;GAde;;EAeHf,EAAA,MAAAC;EAAAD,EAAA,MAAAK;EAAAL,EAAA,MAAAc;EAAAd,EAAA,MAAAe;EAAAf,EAAA,MAAAM;EAAAN,EAAA,MAAAO;EAAAP,EAAA,MAAAS;EAAAT,EAAA,MAAAgB;CAAA,OAAAA,MAAAhB,EAAA;CAAA,OAfTgB;AAeS;;;;;AAOlB,SAAAM,cAAAvB,IAAA;CAAA,MAAAC,IAAApF,EAAA,EAAA;CAAuB,MAAA,EAAAgD,UAAAE,MAAAyD,eAAAC,iBAAAC,eAAAC,gBAAAC,aAAA,GAAA1C,UAAAc;CAUrB,MAAAtB,cAAoBhD,WAAW4D,kBAAkB;CAGjD,MAAAR,OAAapD,WAAW8D,kBAAkD,KAA3BN,MAAKiC,aAAc5B,KAAAA,KAAaL,MAAK2C,SAAUtC,KAAAA;CAAU,IAAAe;CAAA,IAAAL,EAAA,OAAAuB,iBAAAvB,EAAA,OAAAwB,mBAAAxB,EAAA,OAAAyB,iBAAAzB,EAAA,OAAA0B,kBAAA1B,EAAA,OAAA2B,aAAA;EAIzDtB,KAAA;GAAAkB;GAAAC;GAAAC;GAAAC;GAAAC;EAM/C;EAAC3B,EAAA,KAAAuB;EAAAvB,EAAA,KAAAwB;EAAAxB,EAAA,KAAAyB;EAAAzB,EAAA,KAAA0B;EAAA1B,EAAA,KAAA2B;EAAA3B,EAAA,KAAAK;CAAA,OAAAA,KAAAL,EAAA;CAND,MAAA6B,SAAehF,UAA0B,MAAMwD,IAM5C,IAAI;CACC,MAAAJ,KAAApE;CAAkB,MAAAyE,KAAArB,MAAKjB,aAAczB,OAAOqB,QAAQ;CAAO,MAAA2C,KAAAsB,OAAMC;CAA0B,MAAAtB,KAAAzD,oBAAoB8B,OAAAc,qBAAAoC,mBAA+C9C,KAAK;CAAC,IAAAwB;CAAA,IAAAT,EAAA,OAAAnB,QAAAmB,EAAA,OAAApC,YAAAoC,EAAA,OAAAlC,QAAAkC,EAAA,OAAAvB,eAAAuB,EAAA,QAAA6B,OAAAjD,SAAA;EACvK6B,KAAA9B,YAAYf,UAAUE,MAAMW,aAAaoD,OAAMjD,SAAUC,IAAI;EAACmB,EAAA,KAAAnB;EAAAmB,EAAA,KAAApC;EAAAoC,EAAA,KAAAlC;EAAAkC,EAAA,KAAAvB;EAAAuB,EAAA,MAAA6B,OAAAjD;EAAAoB,EAAA,MAAAS;CAAA,OAAAA,KAAAT,EAAA;CAAA,IAAAU;CAAA,IAAAV,EAAA,QAAAC,MAAAD,EAAA,QAAAf,SAAAe,EAAA,QAAA6B,OAAAC,YAAA9B,EAAA,QAAAM,MAAAN,EAAA,QAAAQ,MAAAR,EAAA,QAAAS,IAAA;EAD5DC,KAAA,oBAAC,IAAD;GAAmB,WAAAJ;GAAmC,GAAMC;GAAe,GAAMtB;GAAK,GAAMuB;GAC9FC,UAAAA;EADS,CAAA;EAEHT,EAAA,MAAAC;EAAAD,EAAA,MAAAf;EAAAe,EAAA,MAAA6B,OAAAC;EAAA9B,EAAA,MAAAM;EAAAN,EAAA,MAAAQ;EAAAR,EAAA,MAAAS;EAAAT,EAAA,MAAAU;CAAA,OAAAA,KAAAV,EAAA;CAAA,OAFJU;AAEI;AAMb,SAASqB,kBAAkBjD,OAAuB;CAChD,OAAO1C,aAAa0C,OAAO;EACzBkD,OAAOlD,MAAMC,kBAAkB;EAC/Ba,MAAMC,OAAOf,KAAK;CACpB,CAAC;AACH;AAKA,SAASe,OAAOf,OAAuB;CACrC,OAAOA,MAAMK,iBAAiB,UAAU;AAC1C;AACAW,UAAUmC,OAAOX"}

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

@@ -19,11 +19,38 @@ type DialogProps$1 = Omit<DialogTriggerProps, 'children'> & {
  * `Dialog` opens it, and one given `slot="close"` anywhere inside the
  * content closes it; neither needs a part of its own.
  *
+ * ```tsx
+ * <Dialog>
+ *   <Button>Open dialog</Button>
+ *   <Dialog.Content>
+ *     <Dialog.Header>
+ *       <Dialog.Title>Headline</Dialog.Title>
+ *       <IconButton aria-label="Close" slot="close">
+ *         <CloseIcon />
+ *       </IconButton>
+ *     </Dialog.Header>
+ *     <Dialog.Body>Supporting text</Dialog.Body>
+ *     <Dialog.Footer>
+ *       <Button slot="close" variant="text">
+ *         Cancel
+ *       </Button>
+ *       <Button onPress={confirm} slot="close" variant="text">
+ *         Confirm
+ *       </Button>
+ *     </Dialog.Footer>
+ *   </Dialog.Content>
+ * </Dialog>
+ * ```
+ *
  * `Dialog` is the trigger's half, so a dialog nothing on the page opens — one
  * a route shows, or a menu item raises — leaves it out and passes `isOpen`
  * and `onOpenChange` to `Dialog.Content` instead. Wrapped in `Dialog` with no
  * button inside it, React Aria warns that its press responder found nothing
  * to press.
+ *
+ * Tab stays inside an open dialog, so a `Snackbar` shown meanwhile is
+ * reached with F6, which React Aria uses to move between landmarks. Tabbing
+ * on past the snackbar's last control leads back into the dialog.
  */
 declare function Dialog$1({ children, ...props }: DialogProps$1): import("react").JSX.Element;
 declare namespace Dialog$1 {