@fairgarden/design 0.1.0-alpha.0 → 0.1.0-alpha.2

package/actions/button/button.module.css

@@ -0,0 +1,494 @@
+/*
+ * Button (§9.2; worked example §1.11.10). CVA function `button`.
+ * Parts: `base` (container: edge, radius, focus ring), `label`, `icon`, and
+ * `edge` / `edgeLine`, the SVG that draws the disabled `line-dotted-fine`
+ * edge as true dots [D36, D68]. Colors are role variables only; local custom
+ * properties carry dimensions only. Label case is authored, never set here.
+ */
+
+/* Composition sits in top-level rules, outside the layers: Lightning CSS
+ * (Next.js with Turbopack) rejects `composes` inside @layer or any nesting.
+ * The composed classes keep their own layers. */
+.edgeLine {
+  composes: lineDottedFine from '../../utils/line.module.css';
+}
+
+@layer base {
+  .base {
+    /* Local dimensions. Size classes publish --button-height. */
+    --button-padding-inline: var(--size-px-5);
+    --button-edge: var(--border-size-2);
+    --button-edge-radius: calc(var(--button-height) / 2);
+
+    position: relative;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--size-px-3);
+    box-sizing: border-box;
+    block-size: var(--button-height);
+    margin: 0;
+    padding-block: 0;
+    padding-inline: var(--button-padding-inline);
+    border: var(--button-edge) solid;
+    border-radius: var(--radius-round);
+    background: none;
+    white-space: nowrap;
+    text-decoration-line: none;
+    appearance: none;
+  }
+
+  /* Every target reaches --fgd-size-hit; a smaller control extends it invisibly (§9.1) [D43]. */
+  .base::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
+    min-inline-size: 100%;
+    min-block-size: 100%;
+    translate: -50% -50%;
+  }
+
+  .label {
+    text-decoration-thickness: var(--border-size-1-5);
+    text-underline-offset: 0.15em;
+  }
+
+  .icon {
+    flex: none;
+  }
+
+  /* Disabled edge host: covers the border box once the solid edge is removed. */
+  .edge {
+    display: none;
+    position: absolute;
+    inset-block-start: calc(var(--fgd-dot-fine) / 2);
+    inset-inline-start: calc(var(--fgd-dot-fine) / 2);
+    inline-size: calc(100% - var(--fgd-dot-fine));
+    block-size: calc(100% - var(--fgd-dot-fine));
+    overflow: visible;
+    pointer-events: none;
+  }
+
+  .edgeLine {
+    fill: none;
+    stroke: var(--role-disabled-edge);
+    rx: calc(var(--button-edge-radius) - var(--fgd-dot-fine) / 2);
+  }
+
+  @media (forced-colors: active) {
+    .edgeLine {
+      stroke: currentColor;
+    }
+  }
+
+  /*
+   * Hover and press transitions [D181]: --fgd-duration-quick, --ease-out-3;
+   * instant under --motionNotOK. Only opaque-to-opaque changes fade [D205]:
+   * ink, edge and underline colors everywhere, and the fill of `solid`,
+   * which is opaque at rest, on hover and pressed. An `outline` or media
+   * Button's fill and ink change only together, as the inverse pair on
+   * press (the outline's fill from none), so both step at once.
+   */
+  @media (prefers-reduced-motion: no-preference) {
+    .base,
+    .label {
+      transition-property: color, border-color, text-decoration-color;
+      transition-duration: var(--fgd-duration-quick);
+      transition-timing-function: var(--ease-out-3);
+    }
+
+    .solid {
+      transition-property: color, background-color, border-color, text-decoration-color;
+    }
+
+    /*
+     * A `solid` press swaps fill and ink as the inverse pair, so the press
+     * and its release (marked `data-released` for two frames, since both a
+     * release and a hover-in end on :hover) step both at once: no frame shows
+     * the ink over a fill of its own tone. Hover in and out still fade.
+     */
+    .solid:active,
+    .solid:active .label,
+    .solid[data-released],
+    .solid[data-released] .label {
+      transition-property: border-color, text-decoration-color;
+    }
+
+    .outline,
+    .outline .label,
+    .onMedia,
+    .onMedia .label {
+      transition-property: border-color, text-decoration-color;
+    }
+  }
+}
+
+.sm {
+  composes: typeButtonSm from '../../utils/type.module.css';
+}
+
+.md {
+  composes: typeButton from '../../utils/type.module.css';
+}
+
+.lg {
+  composes: typeButton from '../../utils/type.module.css';
+}
+
+.xl {
+  composes: typeButtonLg from '../../utils/type.module.css';
+}
+
+@layer variants {
+  /* Size: height and type role; padding is --size-px-5 at every size. */
+  .sm {
+    --button-height: var(--size-px-7);
+  }
+
+  .md {
+    --button-height: var(--fgd-size-control-md);
+  }
+
+  .lg {
+    --button-height: var(--size-px-8);
+  }
+
+  .xl {
+    --button-height: var(--fgd-size-control-xl);
+  }
+
+  /*
+   * The action fill. Its secondary falls back to the scope's action scale
+   * [D133]; an explicit `secondary` class wins from the scales layer.
+   */
+  .solid {
+    --secondary1: var(--action1);
+    --secondary2: var(--action2);
+    --secondary3: var(--action3);
+    --secondary4: var(--action4);
+    --secondary5: var(--action5);
+    --secondary6: var(--action6);
+    --secondary7: var(--action7);
+    --secondary8: var(--action8);
+    --secondary9: var(--action9);
+    --secondary10: var(--action10);
+    --secondary11: var(--action11);
+    --secondary12: var(--action12);
+    --secondary-contrast: var(--action-contrast);
+    --secondary-hover: var(--action-hover);
+
+    border-color: var(--role-action-edge);
+    background-color: var(--role-action);
+    color: var(--role-action-label);
+  }
+
+  /* The outline twin: --primary12 edge and label, no fill. */
+  .outline {
+    border-color: var(--primary12);
+    color: var(--primary12);
+  }
+
+  /* No container: label --primary12, glyph --role-glyph [D155]. */
+  .text {
+    --button-padding-inline: 0px;
+    --button-edge: 0px;
+
+    block-size: auto;
+    border-style: none;
+    color: var(--primary12);
+  }
+
+  .text .icon {
+    color: var(--role-glyph);
+  }
+
+  /* Circle (width = height) with a centered glyph; the label is the accessible name, visually hidden. */
+  .iconOnly {
+    --button-padding-inline: 0px;
+
+    inline-size: var(--button-height);
+    block-size: var(--button-height);
+  }
+
+  /* Visually hidden at 1 px (as Toggle's), so a long name never widens the page's scrollable area. */
+  .iconOnly .label {
+    position: absolute;
+    inline-size: var(--border-size-1);
+    block-size: var(--border-size-1);
+    margin: calc(var(--border-size-1) * -1);
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+  }
+
+  .iconOnly .icon {
+    color: inherit;
+  }
+
+  /* Media button face: the wrapping night Ground's ground, --primary12 outline and glyph. */
+  .onMedia {
+    border-color: var(--primary12);
+    background-color: var(--role-ground);
+    color: var(--primary12);
+  }
+
+  /* Butted to a field (§10.3): --radius-1 outside, --radius-0 at the seam. */
+  .buttedStart {
+    --button-edge-radius: var(--radius-1);
+
+    border-start-start-radius: var(--radius-0);
+    border-end-start-radius: var(--radius-0);
+    border-start-end-radius: var(--radius-1);
+    border-end-end-radius: var(--radius-1);
+  }
+
+  .buttedEnd {
+    --button-edge-radius: var(--radius-1);
+
+    border-start-start-radius: var(--radius-1);
+    border-end-start-radius: var(--radius-1);
+    border-start-end-radius: var(--radius-0);
+    border-end-end-radius: var(--radius-0);
+  }
+}
+
+@layer compounds {
+  /* Media button: --size-px-7 square, --radius-1, --border-size-1 outline. */
+  .iconOnlyOnMedia {
+    --button-height: var(--size-px-7);
+    --button-edge: var(--border-size-1);
+    --button-edge-radius: var(--radius-1);
+
+    border-radius: var(--radius-1);
+  }
+
+  /*
+   * Destructive [D192]: the danger roles replace the action and primary
+   * inks. Solid: the danger fill, label and edge; outline: the danger edge
+   * and text; text: the danger text with its glyph in the danger edge ink
+   * (≥ 3:1, and the one red cue where the label falls back to --primary12).
+   */
+  .solidDestructive {
+    border-color: var(--role-danger-edge);
+    background-color: var(--role-danger);
+    color: var(--role-danger-label);
+  }
+
+  .outlineDestructive {
+    border-color: var(--role-danger-edge);
+    color: var(--role-danger-text);
+  }
+
+  .textDestructive {
+    color: var(--role-danger-text);
+  }
+
+  .textDestructive .icon {
+    color: var(--role-danger-edge);
+  }
+
+  /* Icon-only butted: keeps the §10.3 cell instead of the circle. */
+  .iconOnlyButtedStart,
+  .iconOnlyButtedEnd {
+    --button-height: var(--size-px-8);
+
+    inline-size: var(--size-px-9);
+  }
+}
+
+@layer states {
+  /*
+   * Hover (not disabled, not busy) [D181]. It changes a fill or an ink only,
+   * never the edge, a transform or a shadow:
+   * - solid: the fill moves to --role-action-hover (the action scale's
+   *   lighter neighbour, step 10 in a dark scope; the ink pill --primary11);
+   *   label and edge unchanged, no underline;
+   * - outline: a --primary3 fill (--role-soft-hover); where soft fills drop
+   *   it stays the ground and the label takes the bare-text underline
+   *   (--fgd-soft-hover-line);
+   * - text: the label takes --role-link-hover, underlined where that is
+   *   --primary12 (--fgd-link-hover-line); the glyph swaps to the next tier's
+   *   weight through Icon weight="interactive" (as on icon-only buttons).
+   */
+  .solid:not([data-disabled], [aria-busy='true']):hover {
+    background-color: var(--role-action-hover);
+  }
+
+  .outline:not([data-disabled], [aria-busy='true']):hover {
+    background-color: var(--role-soft-hover);
+  }
+
+  .outline:not([data-disabled], [aria-busy='true']):hover .label {
+    text-decoration-line: var(--fgd-soft-hover-line);
+    text-decoration-color: var(--role-accent);
+    text-decoration-thickness: var(--border-size-2);
+    text-underline-offset: var(--size-px-1);
+  }
+
+  .text:not([data-disabled], [aria-busy='true']):hover .label {
+    color: var(--role-link-hover);
+    text-decoration-line: var(--fgd-link-hover-line);
+    text-decoration-color: var(--role-accent);
+  }
+
+  /*
+   * Destructive hover [D192]: the solid fill moves to --role-danger-hover
+   * (light --danger12: the lighter 10 would drop the label to 4.28:1;
+   * dark --danger10); the text label keeps the danger ink and takes the
+   * underline; every destructive underline is drawn in the label's ink.
+   */
+  .solidDestructive:not([data-disabled], [aria-busy='true']):hover {
+    background-color: var(--role-danger-hover);
+  }
+
+  .textDestructive:not([data-disabled], [aria-busy='true']):hover .label {
+    color: var(--role-danger-text);
+    text-decoration-line: underline;
+  }
+
+  .destructive:not([data-disabled], [aria-busy='true']):hover .label {
+    text-decoration-color: currentColor;
+  }
+
+  /*
+   * Forced colors flatten author fills and inks, so a hover adds a
+   * --border-size-2 outline on a contained or outline button and an
+   * underline on a text button, in the system colors [D181].
+   */
+  @media (forced-colors: active) {
+    .solid:not([data-disabled], [aria-busy='true']):hover,
+    .outline:not([data-disabled], [aria-busy='true']):hover {
+      outline: var(--border-size-2) solid currentColor;
+      outline-offset: var(--border-size-2);
+    }
+
+    .text:not([data-disabled], [aria-busy='true']):hover .label {
+      text-decoration-line: underline;
+    }
+  }
+
+  /* Pressed: the inverse pair; the edge is unchanged [D84, D96]. */
+  .outline:not([data-disabled], [aria-busy='true']):active,
+  .onMedia:not([data-disabled], [aria-busy='true']):active {
+    background-color: var(--primary12);
+    color: var(--role-inverse);
+  }
+
+  /*
+   * The ink pill (rest fill already --primary12) presses to a --primary1
+   * face with a --primary12 label [D144]. roles.css has no alias for that
+   * swap yet; without one this falls back to the inverse pair.
+   */
+  .solid:not([data-disabled], [aria-busy='true']):active {
+    background-color: var(--role-action-pressed);
+    color: var(--role-action-pressed-label);
+  }
+
+  .text:not([data-disabled], [aria-busy='true']):active .label {
+    text-decoration-line: underline;
+    text-decoration-thickness: var(--border-size-2);
+  }
+
+  /*
+   * Focus: 2 px --primary12 ring at the ring offset (--fgd-focus-offset,
+   * 2 px), keyboard only [D45]. A text Button has no container, so its ring
+   * stands off a padded box as tall as its size's contained Button
+   * (--button-height, centred on the words) at that 2 px offset: it sits
+   * around the words at the height of the other Buttons' rings, never on the
+   * glyphs. It is the ring only, an outline: nothing moves, the hit area and
+   * the words stay put. The offset is the local ring token, so the outline
+   * morph starts and lands on the same box [D204]. Icon-only text Buttons
+   * keep the circle's own ring.
+   */
+  .text:not(.iconOnly) {
+    /* Whole pixels, as the browser draws an outline offset. */
+    --fgd-focus-offset: max(
+      var(--border-size-2),
+      round(down, calc((var(--button-height) - 1lh) / 2 + var(--border-size-2)), 1px)
+    );
+  }
+
+  /* In running text the ring keeps to the line: --size-px-1 around the words, so it barely reaches the lines above and below. */
+  :where(p, li, dd, dt, blockquote, figcaption, td, th) > .text:not(.iconOnly) {
+    --fgd-focus-offset: var(--size-px-1);
+  }
+
+  .base:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--fgd-focus-offset);
+  }
+
+  /*
+   * Disabled: fill removed, --role-muted ink, `line-dotted-fine` edge in
+   * --role-rule drawn by the edge part; never dimmed [D16]. The solid
+   * edge's width moves into the padding, so the button keeps its size.
+   */
+  .base[data-disabled] {
+    padding-inline: calc(var(--button-padding-inline) + var(--button-edge));
+    border-style: none;
+    background: none;
+    color: var(--role-muted);
+    /* The fill goes to none, so it steps [D205]. */
+    transition-property: color, border-color, text-decoration-color;
+  }
+
+  .base[data-disabled] .edge {
+    display: block;
+  }
+
+  /* The media button keeps its face so the glyph stays legible on the photo. */
+  .onMedia[data-disabled] {
+    background-color: var(--role-ground);
+  }
+
+  /* A text button's glyph is removed; an icon-only glyph stays, muted. */
+  .text[data-disabled] .icon {
+    visibility: hidden;
+  }
+
+  .iconOnly[data-disabled] .icon {
+    visibility: visible;
+  }
+
+  /* Busy: rest roles kept, width held at its rest width, inert, no spinner [D84]. */
+  .base[aria-busy='true'] {
+    min-inline-size: var(--button-rest-width, auto);
+    cursor: progress;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Action, icon-only, disabled and busy buttons are hidden (§9.2, §9.1). */
+    .base:not([href]),
+    .iconOnly,
+    .base[data-disabled],
+    .base[aria-busy='true'] {
+      display: none;
+    }
+
+    /* A navigating outline twin drops its edge to --border-size-1, so rank survives (§1.4.5). */
+    .outline[href] {
+      --button-edge: var(--border-size-1);
+    }
+
+    /* A navigating text button prints like a link (§9.3). */
+    .text[href] .label {
+      text-decoration-line: underline;
+    }
+
+    /* A navigating button prints "Label (URL)" (§7.6). */
+    .base[href]::after {
+      content: '(' attr(href) ')';
+      position: static;
+      inline-size: auto;
+      block-size: auto;
+      min-inline-size: 0;
+      min-block-size: 0;
+      translate: none;
+    }
+  }
+}

package/actions/button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/actions/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/actions/button/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/actions/button/index.ts"],"names":[],"mappings":"AAAA,cAAc,UAAU,CAAA"}

package/actions/chip/Chip.d.ts

@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+export declare const chip: (props?: ({
+    removable?: boolean | null | undefined;
+    primary?: "ruby" | "brown" | "crimson" | "gold" | "gray" | "indigo" | "olive" | "pink" | "plum" | "purple" | "red" | "tomato" | "violet" | "bronze" | "iris" | "mauve" | "sage" | "sand" | "slate" | null | undefined;
+    secondary?: "ruby" | "blue" | "brown" | "crimson" | "cyan" | "gold" | "gray" | "green" | "indigo" | "lime" | "olive" | "orange" | "pink" | "plum" | "purple" | "red" | "teal" | "tomato" | "violet" | "yellow" | "amber" | "bronze" | "grass" | "iris" | "jade" | "mauve" | "mint" | "sage" | "sand" | "sky" | "slate" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type ChipVariants = Omit<VariantProps<typeof chip>, 'removable'>;
+/**
+ * The module's part classes, for a composed component that renders the
+ * chip on its own Base UI parts (the Combobox's `Chip` and `ChipRemove`)
+ * and leaves the look to this module (§1.11.1).
+ */
+export declare const chipParts: {
+    readonly base: string;
+    readonly label: string;
+    readonly remove: string;
+    readonly edge: string;
+    readonly edgeLine: string;
+};
+/** Props for Chip: `span` props, `render`, the remove handler and label, and the color axes. */
+export type ChipProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {
+    /** The chosen value, e.g. "Oak Savanna". Never truncated in print. */
+    children: React.ReactNode;
+    /**
+     * Called when the × is pressed. Omitted, the chip renders without its ×
+     * (a read-only value).
+     */
+    onRemove?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /**
+     * The ×'s accessible name. Default "Remove [label]" when `children` is a
+     * string, otherwise "Remove".
+     */
+    removeLabel?: string;
+    /**
+     * Replaces the × element, e.g. `<Combobox.ChipRemove />`, which then
+     * receives the module's class, the glyph and the accessible name.
+     */
+    removeRender?: React.ReactElement;
+    /** The value can't be removed: muted label and ×, dotted edge. Default `false`. */
+    disabled?: boolean;
+    /**
+     * Primary Radix scale: edge, label, × and focus rings. Never defaulted;
+     * omitted, it inherits the scope [D133].
+     */
+    primary?: ChipVariants['primary'];
+    /** Secondary Radix scale: accepted for the shared contract; unused. Never defaulted. */
+    secondary?: ChipVariants['secondary'];
+};
+/**
+ * A removable chip: `--size-px-7` tall, a `--border-size-1-5` `--role-rule`
+ * edge, the label in `type-body-ui` and the × (`close`, inline tier) in a
+ * `--fgd-size-hit` target with its own focus ring. It prints as the word.
+ */
+export declare function Chip(props: ChipProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+export {};
+//# sourceMappingURL=Chip.d.ts.map

package/actions/chip/Chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/actions/chip/Chip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA+BjE,eAAO,MAAM,IAAI;;;;8EAUf,CAAA;AAEF,KAAK,YAAY,GAAG,IAAI,CAAC,YAAY,CAAC,OAAO,IAAI,CAAC,EAAE,WAAW,CAAC,CAAA;AAEhE;;;;GAIG;AACH,eAAO,MAAM,SAAS;;;;;;CAMZ,CAAA;AAEV,gGAAgG;AAChG,MAAM,MAAM,SAAS,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC3E,sEAAsE;IACtE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB;;;OAGG;IACH,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;IAC/D;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB;;;OAGG;IACH,YAAY,CAAC,EAAE,KAAK,CAAC,YAAY,CAAA;IACjC,mFAAmF;IACnF,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC,SAAS,CAAC,CAAA;IACjC,wFAAwF;IACxF,SAAS,CAAC,EAAE,YAAY,CAAC,WAAW,CAAC,CAAA;CACtC,CAAA;AAED;;;;GAIG;AACH,wBAAgB,IAAI,CAAC,KAAK,EAAE,SAAS,0EAqDpC"}

package/actions/chip/Chip.js

@@ -0,0 +1,94 @@
+'use client';
+import * as React from 'react';
+import { Button as BaseButton } from '@base-ui/react/button';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Icon, iconHost } from '../../foundations/icon';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './chip.module.css';
+/*
+ * Chip (§10.11): the removable chip, a chosen value with its × in its own
+ * hit area. Shared by the Combobox's multiple selection and by filter UIs
+ * that list the active filters; the filter chip that toggles is §9.4's
+ * Toggle `chip` variant, not this component.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: chip.module.css; CVA function `chip`.
+ * - Axes: `primary`, `secondary` → scales module classes (`secondary`
+ *   unused: the chip draws every part from the primary).
+ * - Compound variants: none. Defaults: none; color axes: none [D133].
+ * - Color fallback: inherits the scope (inside a Combobox, the Combobox's
+ *   scales).
+ * - States: `remove` (a Base UI Button) `:hover` (not disabled) → the ×
+ *   takes the next tier's weight (§10.1 icon states, through `iconHost`);
+ *   `:active` → the inverse pair on the × cell; `:focus-visible` → its own
+ *   ring; `data-disabled` → `--role-muted` label and ×, and the
+ *   `line-dotted-fine` chip edge drawn by `edge` / `edgeLine` [D16].
+ * - Parts: base (with `removable` while it carries its ×), label, remove;
+ *   `edge` / `edgeLine` draw the dotted disabled edge as true dots
+ *   [D36, D68].
+ * - Scope: none. Container: none; inherits its context. A set wraps; it
+ *   scrolls sideways only inside a `rail` Scroll Area (§10.19).
+ */
+export const chip = cva(styles.base, {
+    variants: {
+        // Computed from `onRemove`, never a prop: the × cell closes the end.
+        removable: {
+            true: styles.removable,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * The module's part classes, for a composed component that renders the
+ * chip on its own Base UI parts (the Combobox's `Chip` and `ChipRemove`)
+ * and leaves the look to this module (§1.11.1).
+ */
+export const chipParts = {
+    base: styles.base,
+    label: styles.label,
+    remove: styles.remove,
+    edge: styles.edge,
+    edgeLine: styles.edgeLine,
+};
+/**
+ * A removable chip: `--size-px-7` tall, a `--border-size-1-5` `--role-rule`
+ * edge, the label in `type-body-ui` and the × (`close`, inline tier) in a
+ * `--fgd-size-hit` target with its own focus ring. It prints as the word.
+ */
+export function Chip(props) {
+    const { render, ref, className, children, onRemove, removeLabel, removeRender, disabled, primary, secondary, ...rest } = props;
+    const scope = useScopeAttributes();
+    const accessibleName = removeLabel ?? (typeof children === 'string' ? `Remove ${children}` : 'Remove');
+    const remove = useRender({
+        enabled: onRemove != null,
+        render: removeRender ?? React.createElement(BaseButton, null),
+        props: {
+            className: `${styles.remove} ${iconHost}`,
+            'aria-label': accessibleName,
+            disabled,
+            onClick: onRemove,
+            children: React.createElement(Icon, { name: "close", weight: "interactive" }),
+        },
+    });
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        ref,
+        props: mergeProps({
+            ...scope,
+            className: chip({ removable: onRemove != null, primary, secondary, className }),
+            'data-disabled': disabled ? '' : undefined,
+            children: (React.createElement(React.Fragment, null,
+                React.createElement("span", { className: styles.label }, children),
+                remove,
+                React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
+                    React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" })))),
+        }, rest),
+    });
+}
+//# sourceMappingURL=Chip.js.map

package/actions/chip/Chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Chip.js","sourceRoot":"","sources":["../../src/actions/chip/Chip.tsx"],"names":[],"mappings":"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"}