@windmorph/react 0.0.0-stage → 0.1.0

package/dist/components/checkbox/checkbox-styles.js

@@ -0,0 +1,54 @@
+import { tv } from "../../utils/tv.js";
+import { selectionControlStyles } from "../../primitives/selection-control-styles.js";
+//#region src/components/checkbox/checkbox-styles.ts
+/** Variant definitions for {@link Checkbox}. */
+const checkboxStyles = tv({
+	extend: selectionControlStyles,
+	slots: {
+		box: [
+			"relative inline-flex size-[18px] items-center justify-center rounded-[2px]",
+			"border-2 border-solid border-[color:var(--_md-comp-checkbox-unselected-outline-color)] bg-transparent",
+			"text-[color:var(--_md-comp-checkbox-selected-icon-color)]",
+			"[transition-property:background-color,border-color]",
+			"[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]",
+			"[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]",
+			"group-data-hovered/control:border-on-surface",
+			"group-data-focus-visible/control:border-on-surface",
+			"group-data-pressed/control:border-on-surface",
+			"control-checked:border-transparent",
+			"control-checked:bg-[var(--_md-comp-checkbox-selected-container-color)]",
+			"control-checked:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]",
+			"control-checked:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]",
+			"group-data-invalid/control:border-error group-data-invalid/control:text-on-error",
+			"group-data-invalid/control:control-checked:bg-error",
+			"group-data-invalid/control:group-data-pressed/control:border-error",
+			"group-data-invalid/control:group-data-pressed/control:control-checked:border-transparent",
+			"group-data-disabled/control:border-on-surface/38 group-data-disabled/control:text-surface",
+			"group-data-disabled/control:control-checked:border-transparent",
+			"group-data-disabled/control:control-checked:bg-on-surface/38",
+			"group-data-disabled/control:[transition-duration:0s]",
+			"forced-colors:forced-color-adjust-none forced-colors:border-[CanvasText]! forced-colors:text-[Canvas]!",
+			"forced-colors:control-checked:border-transparent! forced-colors:control-checked:bg-[CanvasText]!",
+			"forced-colors:group-data-disabled/control:border-[GrayText]!",
+			"forced-colors:group-data-disabled/control:control-checked:border-transparent! forced-colors:group-data-disabled/control:control-checked:bg-[GrayText]!"
+		],
+		icon: "pointer-events-none absolute -inset-[2px] size-[18px] overflow-visible",
+		mark: ["fill-none stroke-current stroke-2 [stroke-linecap:square] [stroke-dasharray:1] [stroke-dashoffset:1]", "[transition-property:stroke-dashoffset] [transition-duration:0s] [transition-delay:100ms]"],
+		check: [
+			"group-data-checked/control:[stroke-dashoffset:0]",
+			"group-data-checked/control:[transition-delay:0s]",
+			"group-data-checked/control:[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]",
+			"group-data-checked/control:[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]"
+		],
+		dash: [
+			"group-data-indeterminate/control:[stroke-dashoffset:0]",
+			"group-data-indeterminate/control:[transition-delay:0s]",
+			"group-data-indeterminate/control:[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]",
+			"group-data-indeterminate/control:[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]"
+		]
+	}
+});
+//#endregion
+export { checkboxStyles };
+
+//# sourceMappingURL=checkbox-styles.js.map

package/dist/components/checkbox/checkbox-styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-styles.js","names":[],"sources":["../../../src/components/checkbox/checkbox-styles.ts"],"sourcesContent":["import { selectionControlStyles } from '../../primitives/selection-control-styles';\nimport { tv, type VariantProps } from '../../utils/tv';\n\n/*\n * Values follow Compose Material 3 (Checkbox.kt with M3 styling, i.e.\n * ComposeMaterial3Flags.isCheckboxStylingFixEnabled, and CheckboxTokens): an 18px box\n * with 2px corners and a 2px outline, a 2px square-capped check, a 40px round state\n * layer and a 48px touch target. The unselected outline is on-surface-variant and\n * darkens to on-surface on hover, focus and press; a selected box has no outline. The\n * box fills on the default effects spring and empties on the fast one; the check draws\n * on the default spatial spring and snaps away 100ms after unchecking. State layers\n * follow the M3 spec: on-surface when unselected, primary when selected, inverted while\n * pressed, error when invalid (shared with radio buttons and switches in\n * `selectionControlStyles`).\n * The selected container and icon colours and the unselected outline colour come from the\n * checkbox's component tokens (`checkbox-tokens.ts`, `--md-comp-checkbox-*`), resolved on\n * the box. A consumer class (`classNames.box`) still wins in `cn()`.\n * Every class is written out in full so Tailwind can find it.\n */\n\n/** Variant definitions for {@link Checkbox}. */\nexport const checkboxStyles = tv({\n  extend: selectionControlStyles,\n  slots: {\n    box: [\n      'relative inline-flex size-[18px] items-center justify-center rounded-[2px]',\n      'border-2 border-solid border-[color:var(--_md-comp-checkbox-unselected-outline-color)] bg-transparent',\n      'text-[color:var(--_md-comp-checkbox-selected-icon-color)]',\n      '[transition-property:background-color,border-color]',\n      '[transition-duration:var(--md-sys-motion-spring-effects-fast-duration)]',\n      '[transition-timing-function:var(--md-sys-motion-spring-effects-fast-easing)]',\n      // The unselected outline darkens on hover, focus and press (CheckboxTokens\n      // Unselected{Hover,Focus,Pressed}OutlineColor = on-surface).\n      'group-data-hovered/control:border-on-surface',\n      'group-data-focus-visible/control:border-on-surface',\n      'group-data-pressed/control:border-on-surface',\n      // Checked and indeterminate boxes have no outline (Selected*OutlineWidth = 0): the border turns\n      // transparent and the fill shows through it, in every state, invalid included.\n      'control-checked:border-transparent',\n      'control-checked:bg-[var(--_md-comp-checkbox-selected-container-color)]',\n      'control-checked:[transition-duration:var(--md-sys-motion-spring-effects-default-duration)]',\n      'control-checked:[transition-timing-function:var(--md-sys-motion-spring-effects-default-easing)]',\n      'group-data-invalid/control:border-error group-data-invalid/control:text-on-error',\n      'group-data-invalid/control:control-checked:bg-error',\n      // Stacked so the error outline also wins over the pressed colour (equal specificity\n      // otherwise), and a pressed selected box still has no outline.\n      'group-data-invalid/control:group-data-pressed/control:border-error',\n      'group-data-invalid/control:group-data-pressed/control:control-checked:border-transparent',\n      'group-data-disabled/control:border-on-surface/38 group-data-disabled/control:text-surface',\n      'group-data-disabled/control:control-checked:border-transparent',\n      'group-data-disabled/control:control-checked:bg-on-surface/38',\n      'group-data-disabled/control:[transition-duration:0s]',\n      // Forced colours: the box in system colours, `GrayText` when disabled, so a disabled\n      // box doesn't look like an enabled one (a selected box is filled, its mark `Canvas`).\n      'forced-colors:forced-color-adjust-none forced-colors:border-[CanvasText]! forced-colors:text-[Canvas]!',\n      'forced-colors:control-checked:border-transparent! forced-colors:control-checked:bg-[CanvasText]!',\n      'forced-colors:group-data-disabled/control:border-[GrayText]!',\n      'forced-colors:group-data-disabled/control:control-checked:border-transparent! forced-colors:group-data-disabled/control:control-checked:bg-[GrayText]!',\n    ],\n    // The box sits inside its 2px border, so the 18px drawing area is offset by it.\n    icon: 'pointer-events-none absolute -inset-[2px] size-[18px] overflow-visible',\n    mark: [\n      'fill-none stroke-current stroke-2 [stroke-linecap:square] [stroke-dasharray:1] [stroke-dashoffset:1]',\n      '[transition-property:stroke-dashoffset] [transition-duration:0s] [transition-delay:100ms]',\n    ],\n    check: [\n      'group-data-checked/control:[stroke-dashoffset:0]',\n      'group-data-checked/control:[transition-delay:0s]',\n      'group-data-checked/control:[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n      'group-data-checked/control:[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n    ],\n    dash: [\n      'group-data-indeterminate/control:[stroke-dashoffset:0]',\n      'group-data-indeterminate/control:[transition-delay:0s]',\n      'group-data-indeterminate/control:[transition-duration:var(--md-sys-motion-spring-spatial-default-duration)]',\n      'group-data-indeterminate/control:[transition-timing-function:var(--md-sys-motion-spring-spatial-default-easing)]',\n    ],\n  },\n});\n\n/**\n * The variants of {@link checkboxStyles}, for building on its styles. They are the recipe's keys, not\n * component props: their names (`hasIcon`, `isOpen`…) follow the classes and may change.\n */\nexport type CheckboxStyleProps = VariantProps<typeof checkboxStyles>;\n"],"mappings":";;;;AAqBA,MAAa,iBAAiB,GAAG;CAC/B,QAAQ;CACR,OAAO;EACL,KAAK;GACH;GACA;GACA;GACA;GACA;GACA;GAGA;GACA;GACA;GAGA;GACA;GACA;GACA;GACA;GACA;GAGA;GACA;GACA;GACA;GACA;GACA;GAGA;GACA;GACA;GACA;EACF;EAEA,MAAM;EACN,MAAM,CACJ,wGACA,2FACF;EACA,OAAO;GACL;GACA;GACA;GACA;EACF;EACA,MAAM;GACJ;GACA;GACA;GACA;EACF;CACF;AACF,CAAC"}

package/dist/components/checkbox/checkbox-tokens.d.ts

@@ -0,0 +1,7 @@
+import { ComponentTokenSet } from "../../tokens/component.js";
+import "../../index.js";
+//#region src/components/checkbox/checkbox-tokens.d.ts
+/** The tokens of {@link Checkbox}: `--md-comp-checkbox-<part>`. */
+export declare const checkboxTokenSet: ComponentTokenSet<"selected-icon-color" | "selected-container-color" | "unselected-outline-color">;
+//#endregion
+//# sourceMappingURL=checkbox-tokens.d.ts.map

package/dist/components/checkbox/checkbox-tokens.js

@@ -0,0 +1,41 @@
+import { color, defineComponentTokens } from "../../tokens/component.js";
+//#region src/components/checkbox/checkbox-tokens.ts
+/** The tokens of {@link Checkbox}: `--md-comp-checkbox-<part>`. */
+const checkboxTokenSet = defineComponentTokens({
+	name: "md-comp-checkbox",
+	tokens: {
+		"selected-container-color": {
+			value: color("primary"),
+			description: "The box, checked or indeterminate.",
+			compose: "CheckboxTokens.SelectedContainerColor",
+			paints: {
+				property: "background-color",
+				slot: "box",
+				state: "checked"
+			}
+		},
+		"selected-icon-color": {
+			value: color("on-primary"),
+			description: "The check mark and the dash.",
+			compose: "CheckboxTokens.SelectedIconColor",
+			paints: {
+				property: "color",
+				slot: "box",
+				state: "checked"
+			}
+		},
+		"unselected-outline-color": {
+			value: color("on-surface-variant"),
+			description: "The 2px outline of an unchecked box.",
+			compose: "CheckboxTokens.UnselectedOutlineColor",
+			paints: {
+				property: "border-top-color",
+				slot: "box"
+			}
+		}
+	}
+});
+//#endregion
+export { checkboxTokenSet };
+
+//# sourceMappingURL=checkbox-tokens.js.map

package/dist/components/checkbox/checkbox-tokens.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-tokens.js","names":[],"sources":["../../../src/components/checkbox/checkbox-tokens.ts"],"sourcesContent":["import { color, defineComponentTokens } from '../../tokens/component';\n\n/*\n * Checkbox's component tokens, M3's `md.comp.checkbox.*` names (checked against\n * m3.material.io's token tables, 2026-10-14), with Compose's CheckboxTokens defaults. The\n * drawn box (`checkbox-box.tsx`) carries `data-tokens`, so list items that are checkboxes\n * read the same tokens; the checkbox's root carries it too. Hover, focus, pressed, error and\n * disabled values stay classes.\n */\n\n/** The tokens of {@link Checkbox}: `--md-comp-checkbox-<part>`. */\nexport const checkboxTokenSet = defineComponentTokens({\n  name: 'md-comp-checkbox',\n  tokens: {\n    'selected-container-color': {\n      value: color('primary'),\n      description: 'The box, checked or indeterminate.',\n      compose: 'CheckboxTokens.SelectedContainerColor',\n      paints: { property: 'background-color', slot: 'box', state: 'checked' },\n    },\n    'selected-icon-color': {\n      value: color('on-primary'),\n      description: 'The check mark and the dash.',\n      compose: 'CheckboxTokens.SelectedIconColor',\n      paints: { property: 'color', slot: 'box', state: 'checked' },\n    },\n    'unselected-outline-color': {\n      value: color('on-surface-variant'),\n      description: 'The 2px outline of an unchecked box.',\n      compose: 'CheckboxTokens.UnselectedOutlineColor',\n      paints: { property: 'border-top-color', slot: 'box' },\n    },\n  },\n});\n"],"mappings":";;;AAWA,MAAa,mBAAmB,sBAAsB;CACpD,MAAM;CACN,QAAQ;EACN,4BAA4B;GAC1B,OAAO,MAAM,SAAS;GACtB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;IAAO,OAAO;GAAU;EACxE;EACA,uBAAuB;GACrB,OAAO,MAAM,YAAY;GACzB,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAS,MAAM;IAAO,OAAO;GAAU;EAC7D;EACA,4BAA4B;GAC1B,OAAO,MAAM,oBAAoB;GACjC,aAAa;GACb,SAAS;GACT,QAAQ;IAAE,UAAU;IAAoB,MAAM;GAAM;EACtD;CACF;AACF,CAAC"}

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

@@ -0,0 +1,171 @@
+import { Density } from "../../tokens/density.js";
+import { ButtonBaseActionProps, ButtonBaseLinkProps, ButtonBaseToggleProps } from "../../primitives/ButtonBase.js";
+import { ChipOutline } from "./chip-styles.js";
+import { CSSProperties, ReactElement, ReactNode } from "react";
+//#region src/components/chip/Chip.d.ts
+export interface ChipClassNames {
+  /** The chip's container, merged with `className`. */
+  root?: string;
+  /** The row holding the leading icon, label and trailing icon. */
+  content?: string;
+  /** The leading icon or avatar slot. */
+  leading?: string;
+  /** The label text. */
+  label?: string;
+  /** The trailing icon slot. */
+  trailing?: string;
+}
+export interface ChipLabels {
+  /** First word of the remove button's name, which ends with the label. @default "Remove" */
+  remove: string;
+  /**
+   * Announces a selected `InputChip` that has no `onPress` (with one, its action carries
+   * `aria-pressed`): the remove button's description, or hidden text on a static chip.
+   * @default "Selected"
+   */
+  selected: string;
+}
+interface ChipCommonProps {
+  /** The label. */
+  children: ReactNode;
+  /** Icon before the label (18px). Hidden from assistive tech. */
+  leadingIcon?: ReactElement;
+  /**
+   * The flat chip's border: `outline-variant`, or `strong` (`outline`) for 3:1 contrast
+   * where nothing else shows the chip is interactive. @default "standard"
+   */
+  outline?: ChipOutline;
+  /**
+   * Web density, `0` to `-3`: each step takes 4px off the chip's height (32px at 0, 24px at -2
+   * and -3); its touch target stays 48px. Left out, the chip takes the density of the nearest
+   * `ChipSet`, `ThemeProvider` or `ThemeScope`. M3 asks for density to be the reader's choice
+   * rather than a default, so prefer setting it there, from a setting.
+   * @default 0
+   */
+  density?: Density;
+  /** Classes for each part, by slot. */
+  classNames?: ChipClassNames;
+}
+interface AssistChipOwnProps extends ChipCommonProps {
+  /** `surface-container-low` at level 1 instead of an outline. @default false */
+  elevated?: boolean;
+}
+type OmitChip<T> = Omit<T, keyof AssistChipOwnProps | 'toggle'>;
+export type AssistChipProps = AssistChipOwnProps & (OmitChip<ButtonBaseActionProps> | OmitChip<ButtonBaseLinkProps>);
+/**
+ * M3 assist chip: a smart or automated action that can span apps, such as opening a calendar
+ * event. A button, or a link with `href`. Assist chips have no trailing icon.
+ *
+ * @example
+ * <AssistChip leadingIcon={<EventIcon />} onPress={addToCalendar}>Add to calendar</AssistChip>
+ */
+export declare function AssistChip({ children, leadingIcon, elevated, outline, density, classNames, className, ...base }: AssistChipProps): import("react").JSX.Element;
+interface SuggestionChipOwnProps extends ChipCommonProps {
+  /** `surface-container-low` at level 1 instead of an outline. @default false */
+  elevated?: boolean;
+}
+export type SuggestionChipProps = SuggestionChipOwnProps & Omit<ButtonBaseActionProps, keyof SuggestionChipOwnProps | 'toggle'>;
+/**
+ * M3 suggestion chip: a dynamically generated suggestion, such as a reply. Use an icon
+ * sparingly.
+ *
+ * @example
+ * <SuggestionChip onPress={() => reply('Sounds good')}>Sounds good</SuggestionChip>
+ */
+export declare function SuggestionChip({ children, leadingIcon, elevated, outline, density, classNames, className, ...base }: SuggestionChipProps): import("react").JSX.Element;
+export interface FilterChipClassNames extends ChipClassNames {
+  /** The toggle of a chip with a remove button. */
+  primary?: string;
+  /** The remove button after the label. */
+  remove?: string;
+}
+interface FilterChipOwnProps extends Omit<ChipCommonProps, 'classNames'> {
+  /**
+   * Icon after the label, e.g. a dropdown arrow when the chip opens a menu. Hidden from
+   * assistive tech; the whole chip is the control. Not with `onRemove`.
+   */
+  trailingIcon?: ReactElement;
+  /**
+   * Adds a remove button after the label, a second focus stop named "Remove" + the label
+   * (M3: for medium and expanded windows). Backspace or Delete on the chip also calls it.
+   */
+  onRemove?: () => void;
+  /** Words the chip announces, with English defaults. */
+  labels?: Partial<ChipLabels>;
+  /** `surface-container-low` at level 1 instead of an outline. @default false */
+  elevated?: boolean;
+  /** Classes for each part, by slot. */
+  classNames?: FilterChipClassNames;
+}
+export type FilterChipProps = FilterChipOwnProps & Omit<ButtonBaseToggleProps, keyof FilterChipOwnProps | 'toggle'>;
+/**
+ * M3 filter chip: a toggle (`aria-pressed`, or a radio in a single-select `ChipSet`) for
+ * filtering content. Without a `leadingIcon` a check grows in when selected. Controlled
+ * with `selected` / `onSelectedChange`, uncontrolled with `defaultSelected`, or through a
+ * `ChipSet`'s selection with a `value`.
+ *
+ * @example
+ * <FilterChip selected={vegan} onSelectedChange={setVegan}>Vegan</FilterChip>
+ */
+export declare function FilterChip(props: FilterChipProps): import("react").JSX.Element;
+export interface InputChipClassNames extends ChipClassNames {
+  /** The chip's action (a button with `onPress`), or its label part. */
+  primary?: string;
+  /** The avatar image before the label. */
+  avatar?: string;
+  /** The remove button after the label. */
+  remove?: string;
+}
+interface InputChipOwnProps {
+  /** The label. */
+  children: ReactNode;
+  /** Icon before the label (18px). Hidden from assistive tech. */
+  leadingIcon?: ReactElement;
+  /** A 24px image before the label, with 12px corners (takes precedence over `leadingIcon`). */
+  avatar?: ReactElement;
+  /** Shows the chip as selected (`aria-pressed` on its action). */
+  selected?: boolean;
+  /** The chip's action, e.g. editing the entry. Makes the chip's label part a button. */
+  onPress?: ButtonBaseActionProps['onPress'];
+  /** Shows a remove button; also called on Backspace or Delete. */
+  onRemove?: () => void;
+  /** Words the chip announces, with English defaults. */
+  labels?: Partial<ChipLabels>;
+  /** The flat chip's border. @default "standard" */
+  outline?: ChipOutline;
+  /**
+   * Web density, `0` to `-3`: each step takes 4px off the chip's height (32px at 0, 24px at -2
+   * and -3); its touch target stays 48px. Left out, the chip takes the density of the nearest
+   * `ChipSet`, `ThemeProvider` or `ThemeScope`. M3 asks for density to be the reader's choice
+   * rather than a default, so prefer setting it there, from a setting.
+   * @default 0
+   */
+  density?: Density;
+  /** Disables the chip's action and its remove button. @default false */
+  disabled?: boolean;
+  /** Classes for each part, by slot. */
+  classNames?: InputChipClassNames;
+  /** Classes for the root element, merged with `classNames.root`; consumer classes win. */
+  className?: string;
+  /** Inline styles for the root element. */
+  style?: CSSProperties;
+}
+export type InputChipProps = InputChipOwnProps & Omit<React.ComponentPropsWithRef<'div'>, keyof InputChipOwnProps>;
+/**
+ * M3 input chip: a discrete piece of information the user entered, such as a recipient.
+ * M3 expects input chips to be removable: give it `onRemove` unless the entry is fixed.
+ *
+ * With `onPress` and `onRemove`, the chip's action and its remove button are two focus
+ * stops. With only `onRemove`, the chip is one focus stop (the remove button, named
+ * "Remove" + the label), as M3 asks. Backspace or Delete on the chip removes it. A chip
+ * with a remove button is at least 88px wide, so the button's 48px target never covers
+ * the label.
+ *
+ * @example
+ * <InputChip avatar={<img src={photo} alt="" />} onRemove={() => remove(id)}>
+ *   Alex
+ * </InputChip>
+ */
+export declare function InputChip({ children, leadingIcon, avatar, selected, onPress, onRemove, labels, outline, density, disabled, classNames, className, ...rest }: InputChipProps): import("react").JSX.Element;
+//#endregion
+//# sourceMappingURL=Chip.d.ts.map

package/dist/components/chip/Chip.js

@@ -0,0 +1,348 @@
+"use client";
+import { densityAttribute } from "../../tokens/density.js";
+import { cn } from "../../utils/cn.js";
+import { ButtonBase, ToggleGroupStateContext } from "../../primitives/ButtonBase.js";
+import { TouchTarget } from "../../primitives/TouchTarget.js";
+import { mergeDataTokens } from "../../utils/merge-data-tokens.js";
+import { chipStyles } from "./chip-styles.js";
+import { useContext, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { VisuallyHidden } from "react-aria";
+import { useToggleState } from "react-stately";
+//#region src/components/chip/Chip.tsx
+/** Material Symbols "check" and "close" (Apache-2.0). */
+function CheckIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		viewBox: "0 -960 960 960",
+		fill: "currentColor",
+		children: /* @__PURE__ */ jsx("path", { d: "M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z" })
+	});
+}
+function CloseIcon() {
+	return /* @__PURE__ */ jsx("svg", {
+		"aria-hidden": "true",
+		viewBox: "0 -960 960 960",
+		fill: "currentColor",
+		children: /* @__PURE__ */ jsx("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" })
+	});
+}
+const DEFAULT_LABELS = {
+	remove: "Remove",
+	selected: "Selected"
+};
+function ChipContent({ styles, classNames, leading, children, trailing, labelId }) {
+	return /* @__PURE__ */ jsxs("span", {
+		className: styles.content({ class: classNames?.content }),
+		children: [
+			/* @__PURE__ */ jsx(TouchTarget, {}),
+			leading,
+			/* @__PURE__ */ jsx("span", {
+				id: labelId,
+				className: styles.label({ class: classNames?.label }),
+				children
+			}),
+			trailing
+		]
+	});
+}
+/**
+* The component tokens' hooks (chip-tokens.ts): each kind's set, followed by any set the app
+* passed on the same element (`props`), and whether the chip is elevated, which picks its
+* elevated container token; and the chip's own density, if set.
+*/
+const tokenAttributes = (kind, elevated, density, props) => ({
+	"data-tokens": mergeDataTokens(`md-comp-${kind}-chip`, props),
+	"data-elevated": elevated || void 0,
+	...densityAttribute(density)
+});
+const leadingIconOf = (styles, icon, className) => icon && /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
+	"data-slot": "leading",
+	className: styles.leading({ class: className }),
+	children: icon
+});
+const trailingIconOf = (styles, icon, className) => icon && /* @__PURE__ */ jsx("span", {
+	"aria-hidden": "true",
+	className: styles.trailing({ class: className }),
+	children: icon
+});
+/** Backspace or Delete on a removable chip removes it (M3 chips, keyboard navigation). */
+const removeKeys = (onRemove, disabled) => (event) => {
+	if (onRemove && !disabled && (event.key === "Backspace" || event.key === "Delete")) {
+		event.preventDefault();
+		onRemove();
+	}
+};
+/** The remove button: named "Remove" + the chip's label, with a 48px target. */
+function RemoveButton({ styles, className, labelId, labels, onRemove, disabled, describedBy }) {
+	const removeId = useId();
+	const { remove } = {
+		...DEFAULT_LABELS,
+		...labels
+	};
+	return /* @__PURE__ */ jsxs(ButtonBase, {
+		disabled,
+		onPress: onRemove,
+		onKeyDown: removeKeys(onRemove, disabled),
+		"aria-labelledby": `${removeId} ${labelId}`,
+		"aria-describedby": describedBy,
+		"data-chip-remove": "",
+		className: styles.remove({ class: className }),
+		children: [
+			/* @__PURE__ */ jsx(TouchTarget, {}),
+			/* @__PURE__ */ jsx("span", {
+				id: removeId,
+				hidden: true,
+				children: remove
+			}),
+			/* @__PURE__ */ jsx(CloseIcon, {})
+		]
+	});
+}
+/**
+* M3 assist chip: a smart or automated action that can span apps, such as opening a calendar
+* event. A button, or a link with `href`. Assist chips have no trailing icon.
+*
+* @example
+* <AssistChip leadingIcon={<EventIcon />} onPress={addToCalendar}>Add to calendar</AssistChip>
+*/
+function AssistChip({ children, leadingIcon, elevated, outline, density, classNames, className, ...base }) {
+	const styles = chipStyles({
+		kind: "assist",
+		elevated,
+		outline,
+		leading: leadingIcon ? "icon" : "none"
+	});
+	return /* @__PURE__ */ jsx(ButtonBase, {
+		...base,
+		...tokenAttributes("assist", elevated, density, base),
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsx(ChipContent, {
+			styles,
+			classNames,
+			leading: leadingIconOf(styles, leadingIcon, classNames?.leading),
+			children
+		})
+	});
+}
+/**
+* M3 suggestion chip: a dynamically generated suggestion, such as a reply. Use an icon
+* sparingly.
+*
+* @example
+* <SuggestionChip onPress={() => reply('Sounds good')}>Sounds good</SuggestionChip>
+*/
+function SuggestionChip({ children, leadingIcon, elevated, outline, density, classNames, className, ...base }) {
+	const styles = chipStyles({
+		kind: "suggestion",
+		elevated,
+		outline,
+		leading: leadingIcon ? "icon" : "none"
+	});
+	return /* @__PURE__ */ jsx(ButtonBase, {
+		...base,
+		...tokenAttributes("suggestion", elevated, density, base),
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsx(ChipContent, {
+			styles,
+			classNames,
+			leading: leadingIconOf(styles, leadingIcon, classNames?.leading),
+			children
+		})
+	});
+}
+/**
+* M3 filter chip: a toggle (`aria-pressed`, or a radio in a single-select `ChipSet`) for
+* filtering content. Without a `leadingIcon` a check grows in when selected. Controlled
+* with `selected` / `onSelectedChange`, uncontrolled with `defaultSelected`, or through a
+* `ChipSet`'s selection with a `value`.
+*
+* @example
+* <FilterChip selected={vegan} onSelectedChange={setVegan}>Vegan</FilterChip>
+*/
+function FilterChip(props) {
+	const { onRemove } = props;
+	return onRemove ? /* @__PURE__ */ jsx(RemovableFilterChip, {
+		...props,
+		onRemove
+	}) : /* @__PURE__ */ jsx(SimpleFilterChip, { ...props });
+}
+function filterLeading(styles, leadingIcon, className) {
+	if (leadingIcon) return leadingIconOf(styles, leadingIcon, className);
+	return /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		className: styles.check(),
+		children: /* @__PURE__ */ jsx("span", {
+			className: styles.checkInner(),
+			children: /* @__PURE__ */ jsx("span", {
+				className: styles.checkIcon({ class: className }),
+				children: /* @__PURE__ */ jsx(CheckIcon, {})
+			})
+		})
+	});
+}
+function SimpleFilterChip({ children, leadingIcon, trailingIcon, elevated, outline, density, classNames, className, onRemove: _onRemove, labels: _labels, ...base }) {
+	const styles = chipStyles({
+		kind: "filter",
+		elevated,
+		outline,
+		leading: leadingIcon ? "icon" : "none",
+		trailing: Boolean(trailingIcon)
+	});
+	return /* @__PURE__ */ jsx(ButtonBase, {
+		...base,
+		...tokenAttributes("filter", elevated, density, base),
+		toggle: true,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: /* @__PURE__ */ jsx(ChipContent, {
+			styles,
+			classNames,
+			leading: filterLeading(styles, leadingIcon, classNames?.leading),
+			trailing: trailingIconOf(styles, trailingIcon, classNames?.trailing),
+			children
+		})
+	});
+}
+/** A filter chip with a remove button: a container of the toggle and the remove button. */
+function RemovableFilterChip({ children, leadingIcon, trailingIcon: _trailingIcon, elevated, outline, density, classNames, className, style, onRemove, labels, selected, defaultSelected, onSelectedChange, value, disabled, onKeyDown, ...base }) {
+	const labelId = useId();
+	const groupState = useContext(ToggleGroupStateContext);
+	const inGroup = groupState != null && value !== void 0;
+	const ownState = useToggleState({
+		isSelected: selected,
+		defaultSelected,
+		onChange: onSelectedChange
+	});
+	const isSelected = inGroup ? groupState.selectedKeys.has(value) : ownState.isSelected;
+	const isDisabled = Boolean(disabled || inGroup && groupState.isDisabled);
+	const styles = chipStyles({
+		kind: "filter",
+		split: "two",
+		elevated,
+		outline,
+		leading: leadingIcon ? "icon" : "none",
+		trailing: true
+	});
+	const toggleProps = inGroup ? { value } : {
+		value,
+		selected: ownState.isSelected,
+		onSelectedChange: ownState.setSelected
+	};
+	return /* @__PURE__ */ jsxs("div", {
+		...tokenAttributes("filter", elevated, density),
+		"data-selected": isSelected || void 0,
+		"data-disabled": isDisabled || void 0,
+		style,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [/* @__PURE__ */ jsx(ButtonBase, {
+			...base,
+			...toggleProps,
+			toggle: true,
+			disabled,
+			onKeyDown: (event) => {
+				removeKeys(onRemove, isDisabled)(event);
+				onKeyDown?.(event);
+			},
+			"data-chip-primary": "",
+			className: styles.primary({ class: classNames?.primary }),
+			children: /* @__PURE__ */ jsx(ChipContent, {
+				styles,
+				classNames,
+				labelId,
+				leading: filterLeading(styles, leadingIcon, classNames?.leading),
+				children
+			})
+		}), /* @__PURE__ */ jsx(RemoveButton, {
+			styles,
+			className: classNames?.remove,
+			labelId,
+			labels,
+			onRemove,
+			disabled: isDisabled
+		})]
+	});
+}
+/**
+* M3 input chip: a discrete piece of information the user entered, such as a recipient.
+* M3 expects input chips to be removable: give it `onRemove` unless the entry is fixed.
+*
+* With `onPress` and `onRemove`, the chip's action and its remove button are two focus
+* stops. With only `onRemove`, the chip is one focus stop (the remove button, named
+* "Remove" + the label), as M3 asks. Backspace or Delete on the chip removes it. A chip
+* with a remove button is at least 88px wide, so the button's 48px target never covers
+* the label.
+*
+* @example
+* <InputChip avatar={<img src={photo} alt="" />} onRemove={() => remove(id)}>
+*   Alex
+* </InputChip>
+*/
+function InputChip({ children, leadingIcon, avatar, selected, onPress, onRemove, labels, outline, density, disabled, classNames, className, ...rest }) {
+	const labelId = useId();
+	const selectedId = useId();
+	const split = onRemove ? onPress ? "two" : "removeOnly" : "none";
+	const announceSelected = Boolean(selected) && !onPress;
+	const selectedWord = {
+		...DEFAULT_LABELS,
+		...labels
+	}.selected;
+	const styles = chipStyles({
+		kind: "input",
+		split,
+		outline,
+		leading: avatar ? "avatar" : leadingIcon ? "icon" : "none",
+		trailing: Boolean(onRemove)
+	});
+	const leading = avatar ? /* @__PURE__ */ jsx("span", {
+		"aria-hidden": "true",
+		"data-slot": "leading",
+		className: styles.leading({ class: classNames?.leading }),
+		children: /* @__PURE__ */ jsx("span", {
+			className: styles.avatar({ class: classNames?.avatar }),
+			children: avatar
+		})
+	}) : leadingIconOf(styles, leadingIcon, classNames?.leading);
+	const content = /* @__PURE__ */ jsx(ChipContent, {
+		styles,
+		classNames,
+		leading,
+		labelId,
+		children
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		...rest,
+		...tokenAttributes("input", void 0, density, rest),
+		"data-selected": selected || void 0,
+		"data-disabled": disabled || void 0,
+		className: styles.root({ class: cn(classNames?.root, className) }),
+		children: [onPress ? /* @__PURE__ */ jsx(ButtonBase, {
+			disabled,
+			onPress,
+			onKeyDown: removeKeys(onRemove, disabled),
+			"aria-pressed": selected,
+			"data-chip-primary": "",
+			className: styles.primary({ class: classNames?.primary }),
+			children: content
+		}) : /* @__PURE__ */ jsxs("span", {
+			"data-chip-primary": "",
+			className: styles.primary({ class: classNames?.primary }),
+			children: [content, announceSelected && (onRemove ? /* @__PURE__ */ jsx("span", {
+				id: selectedId,
+				hidden: true,
+				children: selectedWord
+			}) : /* @__PURE__ */ jsx(VisuallyHidden, { children: `, ${selectedWord}` }))]
+		}), onRemove && /* @__PURE__ */ jsx(RemoveButton, {
+			styles,
+			className: classNames?.remove,
+			labelId,
+			labels,
+			onRemove,
+			disabled,
+			describedBy: announceSelected ? selectedId : void 0
+		})]
+	});
+}
+//#endregion
+export { AssistChip, FilterChip, InputChip, SuggestionChip };
+
+//# sourceMappingURL=Chip.js.map