@windmorph/react 0.0.0-stage → 0.1.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","names":[],"sources":["../../../src/components/chip/Chip.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useContext,\n  useId,\n  type CSSProperties,\n  type KeyboardEvent,\n  type ReactElement,\n  type ReactNode,\n} from 'react';\nimport { VisuallyHidden } from 'react-aria';\nimport { useToggleState } from 'react-stately';\nimport {\n  ButtonBase,\n  ToggleGroupStateContext,\n  type ButtonBaseActionProps,\n  type ButtonBaseLinkProps,\n  type ButtonBaseToggleProps,\n} from '../../primitives/ButtonBase';\nimport { TouchTarget } from '../../primitives/TouchTarget';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { cn } from '../../utils/cn';\nimport { mergeDataTokens } from '../../utils/merge-data-tokens';\nimport { chipStyles, type ChipOutline } from './chip-styles';\n\n/** Material Symbols \"check\" and \"close\" (Apache-2.0). */\nfunction CheckIcon() {\n  return (\n    <svg viewBox=\"0 -960 960 960\" fill=\"currentColor\">\n      <path d=\"M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z\" />\n    </svg>\n  );\n}\n\nfunction CloseIcon() {\n  return (\n    <svg aria-hidden=\"true\" viewBox=\"0 -960 960 960\" fill=\"currentColor\">\n      <path d=\"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z\" />\n    </svg>\n  );\n}\n\nexport interface ChipClassNames {\n  /** The chip's container, merged with `className`. */\n  root?: string;\n  /** The row holding the leading icon, label and trailing icon. */\n  content?: string;\n  /** The leading icon or avatar slot. */\n  leading?: string;\n  /** The label text. */\n  label?: string;\n  /** The trailing icon slot. */\n  trailing?: string;\n}\n\nexport interface ChipLabels {\n  /** First word of the remove button's name, which ends with the label. @default \"Remove\" */\n  remove: string;\n  /**\n   * Announces a selected `InputChip` that has no `onPress` (with one, its action carries\n   * `aria-pressed`): the remove button's description, or hidden text on a static chip.\n   * @default \"Selected\"\n   */\n  selected: string;\n}\n\nconst DEFAULT_LABELS: ChipLabels = { remove: 'Remove', selected: 'Selected' };\n\ninterface ChipCommonProps {\n  /** The label. */\n  children: ReactNode;\n  /** Icon before the label (18px). Hidden from assistive tech. */\n  leadingIcon?: ReactElement;\n  /**\n   * The flat chip's border: `outline-variant`, or `strong` (`outline`) for 3:1 contrast\n   * where nothing else shows the chip is interactive. @default \"standard\"\n   */\n  outline?: ChipOutline;\n  /**\n   * Web density, `0` to `-3`: each step takes 4px off the chip's height (32px at 0, 24px at -2\n   * and -3); its touch target stays 48px. Left out, the chip takes the density of the nearest\n   * `ChipSet`, `ThemeProvider` or `ThemeScope`. M3 asks for density to be the reader's choice\n   * rather than a default, so prefer setting it there, from a setting.\n   * @default 0\n   */\n  density?: Density;\n  /** Classes for each part, by slot. */\n  classNames?: ChipClassNames;\n}\n\ntype Styles = ReturnType<typeof chipStyles>;\n\nfunction ChipContent({\n  styles,\n  classNames,\n  leading,\n  children,\n  trailing,\n  labelId,\n}: {\n  styles: Styles;\n  classNames?: ChipClassNames;\n  leading?: ReactNode;\n  children: ReactNode;\n  trailing?: ReactNode;\n  labelId?: string;\n}) {\n  return (\n    <span className={styles.content({ class: classNames?.content })}>\n      <TouchTarget />\n      {leading}\n      <span id={labelId} className={styles.label({ class: classNames?.label })}>\n        {children}\n      </span>\n      {trailing}\n    </span>\n  );\n}\n\n/**\n * The component tokens' hooks (chip-tokens.ts): each kind's set, followed by any set the app\n * passed on the same element (`props`), and whether the chip is elevated, which picks its\n * elevated container token; and the chip's own density, if set.\n */\nconst tokenAttributes = (\n  kind: 'assist' | 'suggestion' | 'filter' | 'input',\n  elevated: boolean | undefined,\n  density: Density | undefined,\n  props?: object,\n) => ({\n  'data-tokens': mergeDataTokens(`md-comp-${kind}-chip`, props),\n  'data-elevated': elevated || undefined,\n  ...densityAttribute(density),\n});\n\nconst leadingIconOf = (styles: Styles, icon: ReactElement | undefined, className?: string) =>\n  icon && (\n    <span aria-hidden=\"true\" data-slot=\"leading\" className={styles.leading({ class: className })}>\n      {icon}\n    </span>\n  );\n\nconst trailingIconOf = (styles: Styles, icon: ReactElement | undefined, className?: string) =>\n  icon && (\n    <span aria-hidden=\"true\" className={styles.trailing({ class: className })}>\n      {icon}\n    </span>\n  );\n\n/** Backspace or Delete on a removable chip removes it (M3 chips, keyboard navigation). */\nconst removeKeys =\n  (onRemove: (() => void) | undefined, disabled: boolean | undefined) =>\n  (event: KeyboardEvent<HTMLElement>) => {\n    if (onRemove && !disabled && (event.key === 'Backspace' || event.key === 'Delete')) {\n      event.preventDefault();\n      onRemove();\n    }\n  };\n\n/** The remove button: named \"Remove\" + the chip's label, with a 48px target. */\nfunction RemoveButton({\n  styles,\n  className,\n  labelId,\n  labels,\n  onRemove,\n  disabled,\n  describedBy,\n}: {\n  styles: Styles;\n  className?: string;\n  labelId: string;\n  labels?: Partial<ChipLabels>;\n  onRemove: () => void;\n  disabled?: boolean;\n  /** An element describing the chip's state (a selected input chip without an action). */\n  describedBy?: string;\n}) {\n  const removeId = useId();\n  const { remove } = { ...DEFAULT_LABELS, ...labels };\n  return (\n    <ButtonBase\n      disabled={disabled}\n      onPress={onRemove}\n      onKeyDown={removeKeys(onRemove, disabled)}\n      aria-labelledby={`${removeId} ${labelId}`}\n      aria-describedby={describedBy}\n      data-chip-remove=\"\"\n      className={styles.remove({ class: className })}\n    >\n      <TouchTarget />\n      <span id={removeId} hidden>\n        {remove}\n      </span>\n      <CloseIcon />\n    </ButtonBase>\n  );\n}\n\n/* ------------------------------------------------------------------ Assist */\n\ninterface AssistChipOwnProps extends ChipCommonProps {\n  /** `surface-container-low` at level 1 instead of an outline. @default false */\n  elevated?: boolean;\n}\n\ntype OmitChip<T> = Omit<T, keyof AssistChipOwnProps | 'toggle'>;\n\nexport type AssistChipProps = AssistChipOwnProps &\n  (OmitChip<ButtonBaseActionProps> | OmitChip<ButtonBaseLinkProps>);\n\n/**\n * M3 assist chip: a smart or automated action that can span apps, such as opening a calendar\n * event. A button, or a link with `href`. Assist chips have no trailing icon.\n *\n * @example\n * <AssistChip leadingIcon={<EventIcon />} onPress={addToCalendar}>Add to calendar</AssistChip>\n */\nexport function AssistChip({\n  children,\n  leadingIcon,\n  elevated,\n  outline,\n  density,\n  classNames,\n  className,\n  ...base\n}: AssistChipProps) {\n  const styles = chipStyles({\n    kind: 'assist',\n    elevated,\n    outline,\n    leading: leadingIcon ? 'icon' : 'none',\n  });\n  return (\n    <ButtonBase\n      {...(base as ButtonBaseActionProps)}\n      {...tokenAttributes('assist', elevated, density, base)}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <ChipContent\n        styles={styles}\n        classNames={classNames}\n        leading={leadingIconOf(styles, leadingIcon, classNames?.leading)}\n      >\n        {children}\n      </ChipContent>\n    </ButtonBase>\n  );\n}\n\n/* -------------------------------------------------------------- Suggestion */\n\ninterface SuggestionChipOwnProps extends ChipCommonProps {\n  /** `surface-container-low` at level 1 instead of an outline. @default false */\n  elevated?: boolean;\n}\n\nexport type SuggestionChipProps = SuggestionChipOwnProps &\n  Omit<ButtonBaseActionProps, keyof SuggestionChipOwnProps | 'toggle'>;\n\n/**\n * M3 suggestion chip: a dynamically generated suggestion, such as a reply. Use an icon\n * sparingly.\n *\n * @example\n * <SuggestionChip onPress={() => reply('Sounds good')}>Sounds good</SuggestionChip>\n */\nexport function SuggestionChip({\n  children,\n  leadingIcon,\n  elevated,\n  outline,\n  density,\n  classNames,\n  className,\n  ...base\n}: SuggestionChipProps) {\n  const styles = chipStyles({\n    kind: 'suggestion',\n    elevated,\n    outline,\n    leading: leadingIcon ? 'icon' : 'none',\n  });\n  return (\n    <ButtonBase\n      {...base}\n      {...tokenAttributes('suggestion', elevated, density, base)}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <ChipContent\n        styles={styles}\n        classNames={classNames}\n        leading={leadingIconOf(styles, leadingIcon, classNames?.leading)}\n      >\n        {children}\n      </ChipContent>\n    </ButtonBase>\n  );\n}\n\n/* ------------------------------------------------------------------ Filter */\n\nexport interface FilterChipClassNames extends ChipClassNames {\n  /** The toggle of a chip with a remove button. */\n  primary?: string;\n  /** The remove button after the label. */\n  remove?: string;\n}\n\ninterface FilterChipOwnProps extends Omit<ChipCommonProps, 'classNames'> {\n  /**\n   * Icon after the label, e.g. a dropdown arrow when the chip opens a menu. Hidden from\n   * assistive tech; the whole chip is the control. Not with `onRemove`.\n   */\n  trailingIcon?: ReactElement;\n  /**\n   * Adds a remove button after the label, a second focus stop named \"Remove\" + the label\n   * (M3: for medium and expanded windows). Backspace or Delete on the chip also calls it.\n   */\n  onRemove?: () => void;\n  /** Words the chip announces, with English defaults. */\n  labels?: Partial<ChipLabels>;\n  /** `surface-container-low` at level 1 instead of an outline. @default false */\n  elevated?: boolean;\n  /** Classes for each part, by slot. */\n  classNames?: FilterChipClassNames;\n}\n\nexport type FilterChipProps = FilterChipOwnProps &\n  Omit<ButtonBaseToggleProps, keyof FilterChipOwnProps | 'toggle'>;\n\n/**\n * M3 filter chip: a toggle (`aria-pressed`, or a radio in a single-select `ChipSet`) for\n * filtering content. Without a `leadingIcon` a check grows in when selected. Controlled\n * with `selected` / `onSelectedChange`, uncontrolled with `defaultSelected`, or through a\n * `ChipSet`'s selection with a `value`.\n *\n * @example\n * <FilterChip selected={vegan} onSelectedChange={setVegan}>Vegan</FilterChip>\n */\nexport function FilterChip(props: FilterChipProps) {\n  const { onRemove } = props;\n  return onRemove ? (\n    <RemovableFilterChip {...props} onRemove={onRemove} />\n  ) : (\n    <SimpleFilterChip {...props} />\n  );\n}\n\nfunction filterLeading(styles: Styles, leadingIcon: ReactElement | undefined, className?: string) {\n  if (leadingIcon) return leadingIconOf(styles, leadingIcon, className);\n  return (\n    <span aria-hidden=\"true\" className={styles.check()}>\n      <span className={styles.checkInner()}>\n        <span className={styles.checkIcon({ class: className })}>\n          <CheckIcon />\n        </span>\n      </span>\n    </span>\n  );\n}\n\nfunction SimpleFilterChip({\n  children,\n  leadingIcon,\n  trailingIcon,\n  elevated,\n  outline,\n  density,\n  classNames,\n  className,\n  onRemove: _onRemove,\n  labels: _labels,\n  ...base\n}: FilterChipProps) {\n  const styles = chipStyles({\n    kind: 'filter',\n    elevated,\n    outline,\n    leading: leadingIcon ? 'icon' : 'none',\n    trailing: Boolean(trailingIcon),\n  });\n  return (\n    <ButtonBase\n      {...base}\n      {...tokenAttributes('filter', elevated, density, base)}\n      toggle\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <ChipContent\n        styles={styles}\n        classNames={classNames}\n        leading={filterLeading(styles, leadingIcon, classNames?.leading)}\n        trailing={trailingIconOf(styles, trailingIcon, classNames?.trailing)}\n      >\n        {children}\n      </ChipContent>\n    </ButtonBase>\n  );\n}\n\n/** A filter chip with a remove button: a container of the toggle and the remove button. */\nfunction RemovableFilterChip({\n  children,\n  leadingIcon,\n  trailingIcon: _trailingIcon,\n  elevated,\n  outline,\n  density,\n  classNames,\n  className,\n  style,\n  onRemove,\n  labels,\n  selected,\n  defaultSelected,\n  onSelectedChange,\n  value,\n  disabled,\n  onKeyDown,\n  ...base\n}: FilterChipProps & { onRemove: () => void }) {\n  const labelId = useId();\n  const groupState = useContext(ToggleGroupStateContext);\n  const inGroup = groupState != null && value !== undefined;\n  const ownState = useToggleState({\n    isSelected: selected,\n    defaultSelected,\n    onChange: onSelectedChange,\n  });\n  const isSelected = inGroup ? groupState.selectedKeys.has(value) : ownState.isSelected;\n  const isDisabled = Boolean(disabled || (inGroup && groupState.isDisabled));\n  const styles = chipStyles({\n    kind: 'filter',\n    split: 'two',\n    elevated,\n    outline,\n    leading: leadingIcon ? 'icon' : 'none',\n    trailing: true,\n  });\n  const toggleProps = inGroup\n    ? { value }\n    : { value, selected: ownState.isSelected, onSelectedChange: ownState.setSelected };\n  return (\n    <div\n      {...tokenAttributes('filter', elevated, density)}\n      data-selected={isSelected || undefined}\n      data-disabled={isDisabled || undefined}\n      style={style}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      <ButtonBase\n        {...base}\n        {...toggleProps}\n        toggle\n        disabled={disabled}\n        onKeyDown={(event) => {\n          removeKeys(onRemove, isDisabled)(event);\n          onKeyDown?.(event);\n        }}\n        data-chip-primary=\"\"\n        className={styles.primary({ class: classNames?.primary })}\n      >\n        <ChipContent\n          styles={styles}\n          classNames={classNames}\n          labelId={labelId}\n          leading={filterLeading(styles, leadingIcon, classNames?.leading)}\n        >\n          {children}\n        </ChipContent>\n      </ButtonBase>\n      <RemoveButton\n        styles={styles}\n        className={classNames?.remove}\n        labelId={labelId}\n        labels={labels}\n        onRemove={onRemove}\n        disabled={isDisabled}\n      />\n    </div>\n  );\n}\n\n/* ------------------------------------------------------------------- Input */\n\nexport interface InputChipClassNames extends ChipClassNames {\n  /** The chip's action (a button with `onPress`), or its label part. */\n  primary?: string;\n  /** The avatar image before the label. */\n  avatar?: string;\n  /** The remove button after the label. */\n  remove?: string;\n}\n\ninterface InputChipOwnProps {\n  /** The label. */\n  children: ReactNode;\n  /** Icon before the label (18px). Hidden from assistive tech. */\n  leadingIcon?: ReactElement;\n  /** A 24px image before the label, with 12px corners (takes precedence over `leadingIcon`). */\n  avatar?: ReactElement;\n  /** Shows the chip as selected (`aria-pressed` on its action). */\n  selected?: boolean;\n  /** The chip's action, e.g. editing the entry. Makes the chip's label part a button. */\n  onPress?: ButtonBaseActionProps['onPress'];\n  /** Shows a remove button; also called on Backspace or Delete. */\n  onRemove?: () => void;\n  /** Words the chip announces, with English defaults. */\n  labels?: Partial<ChipLabels>;\n  /** The flat chip's border. @default \"standard\" */\n  outline?: ChipOutline;\n  /**\n   * Web density, `0` to `-3`: each step takes 4px off the chip's height (32px at 0, 24px at -2\n   * and -3); its touch target stays 48px. Left out, the chip takes the density of the nearest\n   * `ChipSet`, `ThemeProvider` or `ThemeScope`. M3 asks for density to be the reader's choice\n   * rather than a default, so prefer setting it there, from a setting.\n   * @default 0\n   */\n  density?: Density;\n  /** Disables the chip's action and its remove button. @default false */\n  disabled?: boolean;\n  /** Classes for each part, by slot. */\n  classNames?: InputChipClassNames;\n  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */\n  className?: string;\n  /** Inline styles for the root element. */\n  style?: CSSProperties;\n}\n\nexport type InputChipProps = InputChipOwnProps &\n  Omit<React.ComponentPropsWithRef<'div'>, keyof InputChipOwnProps>;\n\n/**\n * M3 input chip: a discrete piece of information the user entered, such as a recipient.\n * M3 expects input chips to be removable: give it `onRemove` unless the entry is fixed.\n *\n * With `onPress` and `onRemove`, the chip's action and its remove button are two focus\n * stops. With only `onRemove`, the chip is one focus stop (the remove button, named\n * \"Remove\" + the label), as M3 asks. Backspace or Delete on the chip removes it. A chip\n * with a remove button is at least 88px wide, so the button's 48px target never covers\n * the label.\n *\n * @example\n * <InputChip avatar={<img src={photo} alt=\"\" />} onRemove={() => remove(id)}>\n *   Alex\n * </InputChip>\n */\nexport function InputChip({\n  children,\n  leadingIcon,\n  avatar,\n  selected,\n  onPress,\n  onRemove,\n  labels,\n  outline,\n  density,\n  disabled,\n  classNames,\n  className,\n  ...rest\n}: InputChipProps) {\n  const labelId = useId();\n  const selectedId = useId();\n  const split = onRemove ? (onPress ? 'two' : 'removeOnly') : 'none';\n  // Without an action there's no `aria-pressed` to carry the selection, so it's said in words\n  // (WCAG 1.3.1): the remove button's description, or hidden text on a static chip.\n  const announceSelected = Boolean(selected) && !onPress;\n  const selectedWord = { ...DEFAULT_LABELS, ...labels }.selected;\n  const styles = chipStyles({\n    kind: 'input',\n    split,\n    outline,\n    leading: avatar ? 'avatar' : leadingIcon ? 'icon' : 'none',\n    trailing: Boolean(onRemove),\n  });\n  const leading = avatar ? (\n    <span\n      aria-hidden=\"true\"\n      data-slot=\"leading\"\n      className={styles.leading({ class: classNames?.leading })}\n    >\n      <span className={styles.avatar({ class: classNames?.avatar })}>{avatar}</span>\n    </span>\n  ) : (\n    leadingIconOf(styles, leadingIcon, classNames?.leading)\n  );\n  const content = (\n    <ChipContent styles={styles} classNames={classNames} leading={leading} labelId={labelId}>\n      {children}\n    </ChipContent>\n  );\n\n  return (\n    <div\n      {...rest}\n      {...tokenAttributes('input', undefined, density, rest)}\n      data-selected={selected || undefined}\n      data-disabled={disabled || undefined}\n      className={styles.root({ class: cn(classNames?.root, className) })}\n    >\n      {onPress ? (\n        <ButtonBase\n          disabled={disabled}\n          onPress={onPress}\n          onKeyDown={removeKeys(onRemove, disabled)}\n          aria-pressed={selected}\n          data-chip-primary=\"\"\n          className={styles.primary({ class: classNames?.primary })}\n        >\n          {content}\n        </ButtonBase>\n      ) : (\n        <span data-chip-primary=\"\" className={styles.primary({ class: classNames?.primary })}>\n          {content}\n          {announceSelected &&\n            (onRemove ? (\n              <span id={selectedId} hidden>\n                {selectedWord}\n              </span>\n            ) : (\n              <VisuallyHidden>{`, ${selectedWord}`}</VisuallyHidden>\n            ))}\n        </span>\n      )}\n      {onRemove && (\n        <RemoveButton\n          styles={styles}\n          className={classNames?.remove}\n          labelId={labelId}\n          labels={labels}\n          onRemove={onRemove}\n          disabled={disabled}\n          describedBy={announceSelected ? selectedId : undefined}\n        />\n      )}\n    </div>\n  );\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,70 @@
+import { Density } from "../../tokens/density.js";
+import { ChipSetLayout } from "./chip-styles.js";
+import { ComponentPropsWithRef, ReactNode } from "react";
+import { Key } from "react-stately";
+//#region src/components/chip/ChipSet.d.ts
+export interface ChipSetClassNames {
+  /** The set's container, merged with `className`. */
+  root?: string;
+}
+type Naming = {
+  /** Accessible name for the set of chips. Required unless `aria-labelledby` is set. */
+  'aria-label': string;
+} | {
+  /** The id of the element that names the set. Required unless `aria-label` is set. */
+  'aria-labelledby': string;
+};
+interface ChipSetOwnProps {
+  /** The chips. Filter chips take part in the set's selection with a `value`. */
+  children: ReactNode;
+  /**
+   * Filter chip selection: `single` (a radio group: selecting a chip clears the others)
+   * or `multiple`. With `none`, each chip keeps its own state. @default "none"
+   */
+  selectionMode?: 'none' | 'single' | 'multiple';
+  /** The selected chips' values (controlled). */
+  selectedKeys?: Iterable<Key>;
+  /** The chips selected at first (uncontrolled). */
+  defaultSelectedKeys?: Iterable<Key>;
+  /** Called with the selected chips' values when the selection changes. */
+  onSelectionChange?: (keys: Set<Key>) => void;
+  /**
+   * The last selected chip can be deselected, leaving none. `false` keeps at least one chip
+   * selected. @default true
+   */
+  deselectable?: boolean;
+  /** Disables every chip that takes part in the selection. @default false */
+  disabled?: boolean;
+  /**
+   * `wrap` onto new rows, or one row that `scroll`s sideways (M3 suggests scrolling past
+   * two rows). @default "wrap"
+   */
+  layout?: ChipSetLayout;
+  /**
+   * Web density, `0` to `-3`, for the set and its chips: each step takes 4px off the chips
+   * (32px at 0, 24px at -2 and -3) and puts 2px more between rows, so each chip's 48px touch
+   * target stays clear of the rows above and below. Left out, the set takes the density of the
+   * nearest `ThemeProvider` or `ThemeScope`; M3 asks for density to be the reader's choice, so
+   * prefer setting it there.
+   * @default 0
+   */
+  density?: Density;
+  /** Classes for each part, by slot. */
+  classNames?: ChipSetClassNames;
+}
+export type ChipSetProps = ChipSetOwnProps & Naming & Omit<ComponentPropsWithRef<'div'>, keyof ChipSetOwnProps | 'aria-label' | 'aria-labelledby'>;
+/**
+ * M3 chip set: a labelled group of chips, 8px apart, that wraps or scrolls sideways. It is
+ * one Tab stop, and arrow keys move between its chips. With `selectionMode`, its filter
+ * chips (each with a `value`) share one selection; a single selection is a radio group,
+ * whose arrow keys select as they move.
+ *
+ * @example
+ * <ChipSet aria-label="Diet" selectionMode="multiple" defaultSelectedKeys={['vegan']}>
+ *   <FilterChip value="vegan">Vegan</FilterChip>
+ *   <FilterChip value="gluten-free">Gluten-free</FilterChip>
+ * </ChipSet>
+ */
+export declare function ChipSet({ children, selectionMode, selectedKeys, defaultSelectedKeys, onSelectionChange, deselectable, disabled, layout, density, classNames, className, ref, onKeyDown, onFocus, onPointerDown, ...rest }: ChipSetProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=ChipSet.d.ts.map

package/dist/components/chip/ChipSet.js

@@ -0,0 +1,198 @@
+"use client";
+import { densityAttribute } from "../../tokens/density.js";
+import { cn } from "../../utils/cn.js";
+import { ToggleGroupStateContext } from "../../primitives/ButtonBase.js";
+import { focusCheckedRadio, notePointerDown, radioGroupKeyDown } from "../../utils/radio-group-keys.js";
+import { chipSetStyles } from "./chip-styles.js";
+import { useEffect, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+import { useObjectRef } from "react-aria";
+import { useToggleGroupState } from "react-stately";
+//#region src/components/chip/ChipSet.tsx
+const FOCUSABLE = "button:not([disabled]):not([tabindex=\"-1\"]), a[href]:not([tabindex=\"-1\"]), [tabindex=\"0\"]";
+function focusables(root) {
+	return [...root.querySelectorAll(FOCUSABLE)].filter((element) => !element.closest("[hidden], [inert]"));
+}
+/**
+* Keyboard use of a chip set (M3 chips, keyboard navigation): the set is one Tab stop,
+* arrow keys move between its chips (and a chip's remove button), Home and End go to the
+* first and last. Left and right follow the set's direction. Leaving with Tab and coming
+* back returns to the chip that had focus. A single-selection set is a radio group (WAI-ARIA
+* APG): the arrow keys, Home and End select the chip they move to, wrapping at the ends,
+* and Tab enters at the selected chip.
+*/
+function useChipSetKeyboard(single) {
+	const lastFocused = useRef(null);
+	const onKeyDown = (event) => {
+		const from = event.currentTarget.ownerDocument.activeElement;
+		moveFocus(event);
+		const to = event.currentTarget.ownerDocument.activeElement;
+		if (event.key !== "Tab" && to !== from) revealInRow(event.currentTarget, to);
+	};
+	const moveFocus = (event) => {
+		if (single && radioGroupKeyDown(event)) return;
+		const root = event.currentTarget;
+		const items = focusables(root);
+		const current = items.indexOf(event.target);
+		if (current < 0 || event.altKey || event.ctrlKey || event.metaKey) return;
+		const rtl = getComputedStyle(root).direction === "rtl";
+		let next;
+		switch (event.key) {
+			case "ArrowDown":
+				next = current + 1;
+				break;
+			case "ArrowUp":
+				next = current - 1;
+				break;
+			case "ArrowRight":
+				next = rtl ? current - 1 : current + 1;
+				break;
+			case "ArrowLeft":
+				next = rtl ? current + 1 : current - 1;
+				break;
+			case "Home":
+				next = 0;
+				break;
+			case "End":
+				next = items.length - 1;
+				break;
+			case "Tab":
+				lastFocused.current = items[current] ?? null;
+				(event.shiftKey ? items[0] : items.at(-1))?.focus();
+				return;
+			default: return;
+		}
+		event.preventDefault();
+		items[Math.max(0, Math.min(items.length - 1, next))]?.focus();
+	};
+	const onFocus = (event) => {
+		const from = event.relatedTarget;
+		if (from && event.currentTarget.contains(from)) return;
+		const target = lastFocused.current;
+		lastFocused.current = null;
+		if (single && focusCheckedRadio(event)) return;
+		if (target && target !== event.target && event.currentTarget.contains(target)) target.focus();
+	};
+	const onPointerDown = () => {
+		lastFocused.current = null;
+	};
+	return {
+		onKeyDown,
+		onFocus,
+		onPointerDown
+	};
+}
+/**
+* Scrolls a sideways-scrolling set just far enough to show the chip the arrow keys moved to,
+* focus ring included: `focus()` scrolls only a chip that is wholly hidden, so one partly past
+* the row's edge stayed clipped. Only the row moves, never the page.
+*/
+function revealInRow(row, chip) {
+	if (!(chip instanceof HTMLElement) || row.scrollWidth <= row.clientWidth) return;
+	const edges = row.getBoundingClientRect();
+	const box = chip.getBoundingClientRect();
+	const ring = 5;
+	const past = Math.max(0, box.right + ring - edges.right) - Math.max(0, edges.left - box.left + ring);
+	if (past !== 0) row.scrollLeft += past;
+}
+/**
+* Keeps focus in the set when the focused chip goes away, e.g. after Backspace or Delete
+* removes it (WCAG 2.4.3): focus moves to the next stop, or the previous one at the end,
+* or the set itself once it's empty. The stops are read whenever focus enters a stop or a
+* key is pressed, so the removed one's neighbours are known after it has left the DOM.
+*/
+function useFocusAfterRemoval(rootRef) {
+	useEffect(() => {
+		const root = rootRef.current;
+		if (!root) return;
+		let focused = null;
+		let stops = [];
+		const remember = () => {
+			const active = root.ownerDocument.activeElement;
+			stops = focusables(root);
+			focused = active instanceof HTMLElement && stops.includes(active) ? active : null;
+		};
+		const forget = (event) => {
+			if (event.relatedTarget instanceof Node && !root.contains(event.relatedTarget)) focused = null;
+		};
+		const restore = () => {
+			if (!focused || focused.isConnected) return;
+			const active = root.ownerDocument.activeElement;
+			const lost = focused;
+			focused = null;
+			if (active && active !== root.ownerDocument.body) return;
+			const index = stops.indexOf(lost);
+			(stops.slice(index + 1).find((stop) => stop.isConnected) ?? stops.slice(0, index).reverse().find((stop) => stop.isConnected) ?? root).focus({ preventScroll: true });
+		};
+		const observer = new MutationObserver(restore);
+		observer.observe(root, {
+			childList: true,
+			subtree: true
+		});
+		root.addEventListener("focusin", remember);
+		root.addEventListener("keydown", remember, true);
+		root.addEventListener("focusout", forget);
+		return () => {
+			observer.disconnect();
+			root.removeEventListener("focusin", remember);
+			root.removeEventListener("keydown", remember, true);
+			root.removeEventListener("focusout", forget);
+		};
+	}, [rootRef]);
+}
+/**
+* M3 chip set: a labelled group of chips, 8px apart, that wraps or scrolls sideways. It is
+* one Tab stop, and arrow keys move between its chips. With `selectionMode`, its filter
+* chips (each with a `value`) share one selection; a single selection is a radio group,
+* whose arrow keys select as they move.
+*
+* @example
+* <ChipSet aria-label="Diet" selectionMode="multiple" defaultSelectedKeys={['vegan']}>
+*   <FilterChip value="vegan">Vegan</FilterChip>
+*   <FilterChip value="gluten-free">Gluten-free</FilterChip>
+* </ChipSet>
+*/
+function ChipSet({ children, selectionMode = "none", selectedKeys, defaultSelectedKeys, onSelectionChange, deselectable = true, disabled, layout, density, classNames, className, ref, onKeyDown, onFocus, onPointerDown, ...rest }) {
+	const state = useToggleGroupState({
+		selectionMode: selectionMode === "single" ? "single" : "multiple",
+		selectedKeys,
+		defaultSelectedKeys,
+		onSelectionChange,
+		disallowEmptySelection: !deselectable,
+		isDisabled: disabled
+	});
+	const keyboard = useChipSetKeyboard(selectionMode === "single");
+	const rootRef = useObjectRef(ref);
+	useFocusAfterRemoval(rootRef);
+	return /* @__PURE__ */ jsx("div", {
+		role: selectionMode === "single" ? "radiogroup" : "group",
+		tabIndex: -1,
+		...rest,
+		ref: rootRef,
+		"data-layout": layout ?? "wrap",
+		...densityAttribute(density),
+		"aria-disabled": disabled || void 0,
+		onKeyDown: (event) => {
+			keyboard.onKeyDown(event);
+			onKeyDown?.(event);
+		},
+		onFocus: (event) => {
+			keyboard.onFocus(event);
+			onFocus?.(event);
+		},
+		onPointerDown: (event) => {
+			keyboard.onPointerDown();
+			onPointerDown?.(event);
+		},
+		onPointerDownCapture: selectionMode === "single" ? notePointerDown : void 0,
+		className: chipSetStyles({ layout }).root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsx(ToggleGroupStateContext, {
+			value: selectionMode === "none" ? null : state,
+			children
+		})
+	});
+}
+//#endregion
+export { ChipSet };
+
+//# sourceMappingURL=ChipSet.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ChipSet.js","names":[],"sources":["../../../src/components/chip/ChipSet.tsx"],"sourcesContent":["'use client';\n\nimport {\n  useEffect,\n  useRef,\n  type ComponentPropsWithRef,\n  type FocusEvent,\n  type KeyboardEvent,\n  type ReactNode,\n} from 'react';\nimport { useObjectRef } from 'react-aria';\nimport { useToggleGroupState, type Key } from 'react-stately';\nimport { densityAttribute, type Density } from '../../tokens/density';\nimport { ToggleGroupStateContext } from '../../primitives/ButtonBase';\nimport { cn } from '../../utils/cn';\nimport {\n  focusCheckedRadio,\n  notePointerDown,\n  radioGroupKeyDown,\n} from '../../utils/radio-group-keys';\nimport { chipSetStyles, type ChipSetLayout } from './chip-styles';\n\nexport interface ChipSetClassNames {\n  /** The set's container, merged with `className`. */\n  root?: string;\n}\n\ntype Naming =\n  | {\n      /** Accessible name for the set of chips. Required unless `aria-labelledby` is set. */\n      'aria-label': string;\n    }\n  | {\n      /** The id of the element that names the set. Required unless `aria-label` is set. */\n      'aria-labelledby': string;\n    };\n\ninterface ChipSetOwnProps {\n  /** The chips. Filter chips take part in the set's selection with a `value`. */\n  children: ReactNode;\n  /**\n   * Filter chip selection: `single` (a radio group: selecting a chip clears the others)\n   * or `multiple`. With `none`, each chip keeps its own state. @default \"none\"\n   */\n  selectionMode?: 'none' | 'single' | 'multiple';\n  /** The selected chips' values (controlled). */\n  selectedKeys?: Iterable<Key>;\n  /** The chips selected at first (uncontrolled). */\n  defaultSelectedKeys?: Iterable<Key>;\n  /** Called with the selected chips' values when the selection changes. */\n  onSelectionChange?: (keys: Set<Key>) => void;\n  /**\n   * The last selected chip can be deselected, leaving none. `false` keeps at least one chip\n   * selected. @default true\n   */\n  deselectable?: boolean;\n  /** Disables every chip that takes part in the selection. @default false */\n  disabled?: boolean;\n  /**\n   * `wrap` onto new rows, or one row that `scroll`s sideways (M3 suggests scrolling past\n   * two rows). @default \"wrap\"\n   */\n  layout?: ChipSetLayout;\n  /**\n   * Web density, `0` to `-3`, for the set and its chips: each step takes 4px off the chips\n   * (32px at 0, 24px at -2 and -3) and puts 2px more between rows, so each chip's 48px touch\n   * target stays clear of the rows above and below. Left out, the set takes the density of the\n   * nearest `ThemeProvider` or `ThemeScope`; M3 asks for density to be the reader's choice, so\n   * prefer setting it there.\n   * @default 0\n   */\n  density?: Density;\n  /** Classes for each part, by slot. */\n  classNames?: ChipSetClassNames;\n}\n\nexport type ChipSetProps = ChipSetOwnProps &\n  Naming &\n  Omit<ComponentPropsWithRef<'div'>, keyof ChipSetOwnProps | 'aria-label' | 'aria-labelledby'>;\n\nconst FOCUSABLE =\n  'button:not([disabled]):not([tabindex=\"-1\"]), a[href]:not([tabindex=\"-1\"]), [tabindex=\"0\"]';\n\nfunction focusables(root: HTMLElement): HTMLElement[] {\n  return [...root.querySelectorAll<HTMLElement>(FOCUSABLE)].filter(\n    (element) => !element.closest('[hidden], [inert]'),\n  );\n}\n\n/**\n * Keyboard use of a chip set (M3 chips, keyboard navigation): the set is one Tab stop,\n * arrow keys move between its chips (and a chip's remove button), Home and End go to the\n * first and last. Left and right follow the set's direction. Leaving with Tab and coming\n * back returns to the chip that had focus. A single-selection set is a radio group (WAI-ARIA\n * APG): the arrow keys, Home and End select the chip they move to, wrapping at the ends,\n * and Tab enters at the selected chip.\n */\nfunction useChipSetKeyboard(single: boolean) {\n  const lastFocused = useRef<HTMLElement | null>(null);\n\n  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {\n    const from = event.currentTarget.ownerDocument.activeElement;\n    moveFocus(event);\n    const to = event.currentTarget.ownerDocument.activeElement;\n    if (event.key !== 'Tab' && to !== from) revealInRow(event.currentTarget, to);\n  };\n\n  const moveFocus = (event: KeyboardEvent<HTMLDivElement>) => {\n    if (single && radioGroupKeyDown(event)) return;\n    const root = event.currentTarget;\n    const items = focusables(root);\n    const current = items.indexOf(event.target as HTMLElement);\n    if (current < 0 || event.altKey || event.ctrlKey || event.metaKey) return;\n    const rtl = getComputedStyle(root).direction === 'rtl';\n    let next: number;\n    switch (event.key) {\n      case 'ArrowDown':\n        next = current + 1;\n        break;\n      case 'ArrowUp':\n        next = current - 1;\n        break;\n      case 'ArrowRight':\n        next = rtl ? current - 1 : current + 1;\n        break;\n      case 'ArrowLeft':\n        next = rtl ? current + 1 : current - 1;\n        break;\n      case 'Home':\n        next = 0;\n        break;\n      case 'End':\n        next = items.length - 1;\n        break;\n      case 'Tab':\n        // Leave the set: move to its first or last stop, and let the browser go on from there.\n        lastFocused.current = items[current] ?? null;\n        (event.shiftKey ? items[0] : items.at(-1))?.focus();\n        return;\n      default:\n        return;\n    }\n    event.preventDefault();\n    items[Math.max(0, Math.min(items.length - 1, next))]?.focus();\n  };\n\n  const onFocus = (event: FocusEvent<HTMLDivElement>) => {\n    const from = event.relatedTarget as Node | null;\n    if (from && event.currentTarget.contains(from)) return;\n    const target = lastFocused.current;\n    lastFocused.current = null;\n    if (single && focusCheckedRadio(event)) return;\n    if (target && target !== event.target && event.currentTarget.contains(target)) target.focus();\n  };\n\n  // A pointer press focuses the chip it lands on, never the one left with Tab.\n  const onPointerDown = () => {\n    lastFocused.current = null;\n  };\n\n  return { onKeyDown, onFocus, onPointerDown };\n}\n\n/**\n * Scrolls a sideways-scrolling set just far enough to show the chip the arrow keys moved to,\n * focus ring included: `focus()` scrolls only a chip that is wholly hidden, so one partly past\n * the row's edge stayed clipped. Only the row moves, never the page.\n */\nfunction revealInRow(row: HTMLElement, chip: Element | null) {\n  if (!(chip instanceof HTMLElement) || row.scrollWidth <= row.clientWidth) return;\n  const edges = row.getBoundingClientRect();\n  const box = chip.getBoundingClientRect();\n  // The focus ring: a 3px outline 2px outside the chip.\n  const ring = 5;\n  const past =\n    Math.max(0, box.right + ring - edges.right) - Math.max(0, edges.left - box.left + ring);\n  if (past !== 0) row.scrollLeft += past;\n}\n\n/**\n * Keeps focus in the set when the focused chip goes away, e.g. after Backspace or Delete\n * removes it (WCAG 2.4.3): focus moves to the next stop, or the previous one at the end,\n * or the set itself once it's empty. The stops are read whenever focus enters a stop or a\n * key is pressed, so the removed one's neighbours are known after it has left the DOM.\n */\nfunction useFocusAfterRemoval(rootRef: { current: HTMLDivElement | null }) {\n  useEffect(() => {\n    const root = rootRef.current;\n    if (!root) return;\n    let focused: HTMLElement | null = null;\n    let stops: HTMLElement[] = [];\n    const remember = () => {\n      const active = root.ownerDocument.activeElement;\n      stops = focusables(root);\n      focused = active instanceof HTMLElement && stops.includes(active) ? active : null;\n    };\n    const forget = (event: globalThis.FocusEvent) => {\n      // Focus moving elsewhere (not a removal, which leaves nothing focused) ends the watch.\n      if (event.relatedTarget instanceof Node && !root.contains(event.relatedTarget)) {\n        focused = null;\n      }\n    };\n    const restore = () => {\n      if (!focused || focused.isConnected) return;\n      const active = root.ownerDocument.activeElement;\n      const lost = focused;\n      focused = null;\n      if (active && active !== root.ownerDocument.body) return;\n      const index = stops.indexOf(lost);\n      const next =\n        stops.slice(index + 1).find((stop) => stop.isConnected) ??\n        stops\n          .slice(0, index)\n          .reverse()\n          .find((stop) => stop.isConnected);\n      // The neighbour sits beside the removed chip: focus it without scrolling the page\n      // (a press on a partly hidden chip's remove button scrolled it, 2026-10-15).\n      (next ?? root).focus({ preventScroll: true });\n    };\n    const observer = new MutationObserver(restore);\n    observer.observe(root, { childList: true, subtree: true });\n    root.addEventListener('focusin', remember);\n    root.addEventListener('keydown', remember, true);\n    root.addEventListener('focusout', forget);\n    return () => {\n      observer.disconnect();\n      root.removeEventListener('focusin', remember);\n      root.removeEventListener('keydown', remember, true);\n      root.removeEventListener('focusout', forget);\n    };\n  }, [rootRef]);\n}\n\n/**\n * M3 chip set: a labelled group of chips, 8px apart, that wraps or scrolls sideways. It is\n * one Tab stop, and arrow keys move between its chips. With `selectionMode`, its filter\n * chips (each with a `value`) share one selection; a single selection is a radio group,\n * whose arrow keys select as they move.\n *\n * @example\n * <ChipSet aria-label=\"Diet\" selectionMode=\"multiple\" defaultSelectedKeys={['vegan']}>\n *   <FilterChip value=\"vegan\">Vegan</FilterChip>\n *   <FilterChip value=\"gluten-free\">Gluten-free</FilterChip>\n * </ChipSet>\n */\nexport function ChipSet({\n  children,\n  selectionMode = 'none',\n  selectedKeys,\n  defaultSelectedKeys,\n  onSelectionChange,\n  deselectable = true,\n  disabled,\n  layout,\n  density,\n  classNames,\n  className,\n  ref,\n  onKeyDown,\n  onFocus,\n  onPointerDown,\n  ...rest\n}: ChipSetProps) {\n  const state = useToggleGroupState({\n    selectionMode: selectionMode === 'single' ? 'single' : 'multiple',\n    selectedKeys,\n    defaultSelectedKeys,\n    onSelectionChange,\n    disallowEmptySelection: !deselectable,\n    isDisabled: disabled,\n  });\n  const keyboard = useChipSetKeyboard(selectionMode === 'single');\n  const rootRef = useObjectRef(ref);\n  useFocusAfterRemoval(rootRef);\n  return (\n    <div\n      role={selectionMode === 'single' ? 'radiogroup' : 'group'}\n      // Focusable from script only: it takes focus when its last chip is removed.\n      tabIndex={-1}\n      {...rest}\n      ref={rootRef}\n      data-layout={layout ?? 'wrap'}\n      {...densityAttribute(density)}\n      aria-disabled={disabled || undefined}\n      onKeyDown={(event) => {\n        keyboard.onKeyDown(event);\n        onKeyDown?.(event);\n      }}\n      onFocus={(event) => {\n        keyboard.onFocus(event);\n        onFocus?.(event);\n      }}\n      onPointerDown={(event) => {\n        keyboard.onPointerDown();\n        onPointerDown?.(event);\n      }}\n      // A press's focus stays on the chip it lands on, never the checked one (2026-10-15).\n      onPointerDownCapture={selectionMode === 'single' ? notePointerDown : undefined}\n      className={chipSetStyles({ layout }).root({ class: cn(classNames?.root, className) })}\n    >\n      <ToggleGroupStateContext value={selectionMode === 'none' ? null : state}>\n        {children}\n      </ToggleGroupStateContext>\n    </div>\n  );\n}\n"],"mappings":"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"}

package/dist/components/chip/chip-styles.d.ts

@@ -0,0 +1,263 @@
+import { VariantProps } from "../../utils/tv.js";
+//#region src/components/chip/chip-styles.d.ts
+/** Variant definitions for the chips; extend them to add variants. */
+export declare const chipStyles: import("tailwind-variants").TVReturnType<{
+  kind: {
+    assist: {
+      root: string[];
+      leading: string;
+    };
+    suggestion: {
+      root: string[];
+      leading: string;
+    };
+    filter: {
+      root: string[];
+      leading: string[];
+    };
+    input: {
+      root: string[];
+      leading: string;
+    };
+  };
+  /**
+   * How the chip is built: one element (`none`); a container of two buttons, its main
+   * part and the remove button (`two`); or a remove-only input chip, whose one focus stop
+   * is the remove button, so its focus ring circles the whole chip (`removeOnly`).
+   */
+  split: {
+    none: {};
+    two: {
+      root: string[];
+      remove: string;
+    };
+    removeOnly: {
+      root: string[];
+      remove: string;
+      primary: string;
+    };
+  };
+  elevated: {
+    true: {
+      root: string[];
+    };
+    false: {
+      root: string;
+    };
+  };
+  /** `strong` draws the border in `outline` for 3:1 contrast (M3's accessibility guidance). */
+  outline: {
+    standard: {};
+    strong: {};
+  };
+  leading: {
+    none: {};
+    icon: {};
+    avatar: {};
+  };
+  trailing: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string[];
+  content: string;
+  leading: string;
+  label: string;
+  trailing: string;
+  check: string[];
+  checkInner: string;
+  checkIcon: string;
+  avatar: string;
+  remove: string[];
+  primary: string;
+}, undefined, {
+  kind: {
+    assist: {
+      root: string[];
+      leading: string;
+    };
+    suggestion: {
+      root: string[];
+      leading: string;
+    };
+    filter: {
+      root: string[];
+      leading: string[];
+    };
+    input: {
+      root: string[];
+      leading: string;
+    };
+  };
+  /**
+   * How the chip is built: one element (`none`); a container of two buttons, its main
+   * part and the remove button (`two`); or a remove-only input chip, whose one focus stop
+   * is the remove button, so its focus ring circles the whole chip (`removeOnly`).
+   */
+  split: {
+    none: {};
+    two: {
+      root: string[];
+      remove: string;
+    };
+    removeOnly: {
+      root: string[];
+      remove: string;
+      primary: string;
+    };
+  };
+  elevated: {
+    true: {
+      root: string[];
+    };
+    false: {
+      root: string;
+    };
+  };
+  /** `strong` draws the border in `outline` for 3:1 contrast (M3's accessibility guidance). */
+  outline: {
+    standard: {};
+    strong: {};
+  };
+  leading: {
+    none: {};
+    icon: {};
+    avatar: {};
+  };
+  trailing: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string[];
+  content: string;
+  leading: string;
+  label: string;
+  trailing: string;
+  check: string[];
+  checkInner: string;
+  checkIcon: string;
+  avatar: string;
+  remove: string[];
+  primary: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  kind: {
+    assist: {
+      root: string[];
+      leading: string;
+    };
+    suggestion: {
+      root: string[];
+      leading: string;
+    };
+    filter: {
+      root: string[];
+      leading: string[];
+    };
+    input: {
+      root: string[];
+      leading: string;
+    };
+  };
+  /**
+   * How the chip is built: one element (`none`); a container of two buttons, its main
+   * part and the remove button (`two`); or a remove-only input chip, whose one focus stop
+   * is the remove button, so its focus ring circles the whole chip (`removeOnly`).
+   */
+  split: {
+    none: {};
+    two: {
+      root: string[];
+      remove: string;
+    };
+    removeOnly: {
+      root: string[];
+      remove: string;
+      primary: string;
+    };
+  };
+  elevated: {
+    true: {
+      root: string[];
+    };
+    false: {
+      root: string;
+    };
+  };
+  /** `strong` draws the border in `outline` for 3:1 contrast (M3's accessibility guidance). */
+  outline: {
+    standard: {};
+    strong: {};
+  };
+  leading: {
+    none: {};
+    icon: {};
+    avatar: {};
+  };
+  trailing: {
+    true: {};
+    false: {};
+  };
+}, {
+  root: string[];
+  content: string;
+  leading: string;
+  label: string;
+  trailing: string;
+  check: string[];
+  checkInner: string;
+  checkIcon: string;
+  avatar: string;
+  remove: string[];
+  primary: string;
+}>>;
+/**
+ * Variant definitions for {@link ChipSet}. Chips are 8px apart (M3: "Keep an 8dp minimum
+ * space between chips"). With web density, rows come 2px further apart per step, half of what
+ * each chip loses (8 → 10 → 12px; 12px at -3, where chips stay 24px), so a chip's 48px touch
+ * target never reaches the chips in the rows above and below.
+ */
+export declare const chipSetStyles: import("tailwind-variants").TVReturnType<{
+  layout: {
+    wrap: {
+      root: string;
+    };
+    scroll: {
+      root: string[];
+    };
+  };
+}, {
+  root: string;
+}, undefined, {
+  layout: {
+    wrap: {
+      root: string;
+    };
+    scroll: {
+      root: string[];
+    };
+  };
+}, {
+  root: string;
+}, import("tailwind-variants").TVReturnTypeLike<{
+  layout: {
+    wrap: {
+      root: string;
+    };
+    scroll: {
+      root: string[];
+    };
+  };
+}, {
+  root: string;
+}>>;
+/**
+ * The variants of {@link chipStyles}, for building on its styles. They are the recipe's keys, not
+ * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.
+ */
+export type ChipStyleProps = VariantProps<typeof chipStyles>;
+export type ChipOutline = NonNullable<ChipStyleProps['outline']>;
+export type ChipSetLayout = NonNullable<VariantProps<typeof chipSetStyles>['layout']>;
+//#endregion
+//# sourceMappingURL=chip-styles.d.ts.map