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

package/components/Checkbox/checkbox.module.css

@@ -1,388 +0,0 @@
-/*
- * Checkbox (§10.7). CVA function `checkbox`. The root `base` is the row, a
- * <label> wrapping Checkbox.Root (`box`), so the whole row is the hit
- * target. The row shows the box's state by reading its Base UI attributes
- * through :has(), as the option card does (§12.1); it writes no state of its
- * own. Parts: base, box, indicator (`mark` holding the ✓ `check` and the
- * indeterminate `bar`), label, description, thumb, title, value, leader
- * (`leaderLine`), 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:
- *   --checkbox-edge         box edge width (2 → 3 px checked)
- *   --checkbox-card-edge    option card edge width (1 → 2 px checked)
- *   --checkbox-edge-radius  radius the disabled dotted edge follows
- * Label case is authored, never set here, except the card's caps title.
- */
-
-/* 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. */
-.base {
-  composes: typeBodyUi from '../../utils/type.module.css';
-}
-
-.title {
-  composes: typeLabel from '../../utils/type.module.css';
-}
-
-.description {
-  composes: typeCaption typeMuted from '../../utils/type.module.css';
-}
-
-.edgeLine {
-  composes: lineDottedFine from '../../utils/line.module.css';
-}
-
-.leaderLine {
-  composes: lineDottedFine from '../../utils/line.module.css';
-}
-
-@layer base {
-  .base {
-    position: relative; /* holds Base UI's hidden input */
-    display: grid;
-    align-items: start;
-    align-content: center;
-    box-sizing: border-box;
-    min-block-size: var(--ds-size-hit);
-    min-inline-size: 0;
-    color: var(--primary12);
-  }
-
-  /* The box: --size-px-4, --radius-1, a --border-size-2 --primary12 edge; aligned to the first line. */
-  .box {
-    --checkbox-edge: var(--border-size-2);
-    --checkbox-edge-radius: var(--radius-1);
-
-    grid-area: box;
-    position: relative;
-    display: block;
-    box-sizing: border-box;
-    inline-size: var(--size-px-4);
-    block-size: var(--size-px-4);
-    margin-block: calc((1lh - var(--size-px-4)) / 2) 0;
-    margin-inline: 0 var(--ds-space-12);
-    border: var(--checkbox-edge) solid var(--primary12);
-    border-radius: var(--radius-1);
-    background: none;
-  }
-
-  /* The mark covers the box's border box, so its 20-unit grid is 1:1 with px. */
-  .indicator {
-    position: absolute;
-    inset: calc(var(--checkbox-edge) * -1);
-    display: block;
-    color: var(--role-select-mark);
-  }
-
-  /* ✓ or bar at --border-size-2 with round caps, in the mark's ink; never a knockout. */
-  .mark {
-    display: block;
-    inline-size: 100%;
-    block-size: 100%;
-    overflow: visible;
-    fill: none;
-    stroke: currentColor;
-    stroke-width: var(--border-size-2);
-    stroke-linecap: round;
-    stroke-linejoin: round;
-  }
-
-  /* The bare-text hover underline's color, weight and offset (§10.1) [D181]. */
-  .label {
-    grid-area: label;
-    color: var(--primary12);
-    text-decoration-color: var(--role-accent);
-    text-decoration-thickness: var(--border-size-2);
-    text-underline-offset: var(--size-px-1);
-  }
-
-  .description {
-    grid-area: description;
-    margin-block-start: var(--size-px-1);
-  }
-
-  .title {
-    grid-area: title;
-    color: var(--primary12);
-  }
-
-  .value {
-    grid-area: value;
-    color: var(--primary12);
-    font-variant-numeric: var(--ds-numerals-data);
-  }
-
-  .thumb {
-    grid-area: thumb;
-    display: block;
-    inline-size: var(--ds-size-thumb);
-    aspect-ratio: var(--ratio-square);
-    margin-inline-end: var(--ds-space-12);
-    overflow: hidden;
-    overflow: clip;
-  }
-
-  .thumb > * {
-    display: block;
-    inline-size: 100%;
-    block-size: 100%;
-    object-fit: cover;
-  }
-
-  /* The ledger leader: line-dotted-fine in --role-rule, sitting near the baseline. */
-  .leader {
-    grid-area: leader;
-    display: block;
-    inline-size: 100%;
-    block-size: var(--size-px-5);
-    block-size: 1lh;
-    overflow: visible;
-  }
-
-  .leaderLine {
-    stroke: var(--role-rule);
-  }
-
-  /* Disabled edge host: covers the border box once the solid edge is removed. */
-  .edge {
-    display: none;
-    position: absolute;
-    inset-block-start: calc(var(--ds-dot-fine) / 2);
-    inset-inline-start: calc(var(--ds-dot-fine) / 2);
-    inline-size: calc(100% - var(--ds-dot-fine));
-    block-size: calc(100% - var(--ds-dot-fine));
-    overflow: visible;
-    pointer-events: none;
-  }
-
-  .edgeLine {
-    fill: none;
-    stroke: var(--role-disabled-edge);
-    rx: calc(var(--checkbox-edge-radius) - var(--ds-dot-fine) / 2);
-  }
-
-  @media (forced-colors: active) {
-    .edgeLine,
-    .leaderLine {
-      stroke: currentColor;
-    }
-  }
-
-  /* Hover transitions [D181]: --ds-duration-quick, --ease-out-3. */
-  @media (prefers-reduced-motion: no-preference) {
-    .box,
-    .base,
-    .label {
-      transition-property: border-color, background-color, text-decoration-color;
-      transition-duration: var(--ds-duration-quick);
-      transition-timing-function: var(--ease-out-3);
-    }
-  }
-}
-
-@layer variants {
-  /* Standard: box, then label and description; --ds-space-12 gap. */
-  .standard {
-    grid-template-columns: auto minmax(0, 1fr);
-    grid-template-areas:
-      'box label'
-      '. description';
-  }
-
-  /*
-   * The option card (§10.7 owns it; §12.2 cites it): a bordered row with a
-   * --border-size-1 --role-rule edge, --ds-radius-8 and --size-px-3
-   * padding. The padding absorbs the edge step, so checking never moves
-   * the content.
-   */
-  .card {
-    --checkbox-card-edge: var(--border-size-1);
-    --checkbox-edge-radius: var(--ds-radius-8);
-
-    grid-template-columns: auto auto minmax(0, 1fr) auto;
-    grid-template-areas:
-      'box thumb title value'
-      'box thumb description description';
-    align-items: center;
-    padding: calc(var(--size-px-3) + var(--border-size-1) - var(--checkbox-card-edge));
-    border: var(--checkbox-card-edge) solid var(--role-rule);
-    border-radius: var(--ds-radius-8);
-  }
-
-  .card .box {
-    margin-block: 0;
-  }
-
-  .card .value {
-    justify-self: end;
-    margin-inline-start: var(--ds-space-12);
-    text-align: end;
-  }
-
-  /* Below 360 px the value drops under the title: viewport fallback, then the group container (§5.10.2). */
-  @media (max-width: 359.98px) {
-    .card {
-      grid-template-columns: auto auto minmax(0, 1fr);
-      grid-template-areas:
-        'box thumb title'
-        'box thumb value'
-        'box thumb description';
-    }
-
-    .card .value {
-      justify-self: start;
-      margin-inline-start: 0;
-      text-align: start;
-    }
-  }
-
-  @container checkbox-group (width < 360px) {
-    .card {
-      grid-template-columns: auto auto minmax(0, 1fr);
-      grid-template-areas:
-        'box thumb title'
-        'box thumb value'
-        'box thumb description';
-    }
-
-    .card .value {
-      justify-self: start;
-      margin-inline-start: 0;
-      text-align: start;
-    }
-  }
-
-  /* Ledger: label, dotted leader, optional value, then the box (Inciardi Prints). */
-  .ledger {
-    grid-template-columns: auto minmax(var(--size-px-5), 1fr) auto auto;
-    grid-template-areas:
-      'label leader value box'
-      'description description description .';
-  }
-
-  .ledger .box {
-    margin-inline: 0;
-  }
-
-  .ledger .leader {
-    margin-inline: var(--size-px-2);
-  }
-
-  .ledger .value {
-    margin-inline-end: var(--size-px-2);
-  }
-}
-
-@layer states {
-  /* Checked and indeterminate: --role-select fill, the mark, a --ds-stroke-3 --role-select-edge (§10.1). */
-  .box[data-checked],
-  .box[data-indeterminate] {
-    --checkbox-edge: var(--ds-stroke-3);
-
-    border-color: var(--role-select-edge);
-    background-color: var(--role-select);
-  }
-
-  .indicator[data-indeterminate] .check {
-    display: none;
-  }
-
-  .indicator:not([data-indeterminate]) .bar {
-    display: none;
-  }
-
-  /* The checked option card: --border-size-2 --role-select-edge (the one checked-card value). */
-  .card:has(.box[data-checked], .box[data-indeterminate]) {
-    --checkbox-card-edge: var(--border-size-2);
-
-    border-color: var(--role-select-edge);
-  }
-
-  /*
-   * Hover (not disabled, not read-only) [D181]. The box edge never changes,
-   * so hover cannot read as checked. An unchecked box takes the outline
-   * hover, a --primary3 fill (--role-soft-hover: none where soft fills
-   * drop); a checked or indeterminate box moves its fill to
-   * --role-select-hover, mark and edge unchanged. The label takes the
-   * bare-text underline.
-   */
-  .base:not(:has([data-disabled], [data-readonly])):hover .box[data-unchecked] {
-    background-color: var(--role-soft-hover);
-  }
-
-  .base:not(:has([data-disabled], [data-readonly])):hover .box:is([data-checked], [data-indeterminate]) {
-    background-color: var(--role-select-hover);
-  }
-
-  .base:not(:has([data-disabled], [data-readonly])):hover .label {
-    text-decoration-line: underline;
-  }
-
-  /* The unchecked card edge steps --role-rule → --primary12 at the same weight [D140]. */
-  .card:not(:has([data-disabled], [data-readonly], [data-checked], [data-indeterminate])):hover {
-    border-color: var(--primary12);
-  }
-
-  /* Focus: 2 px --primary12 ring at a 2 px offset outside the box, keyboard only [D45]. */
-  .box:focus-visible {
-    outline: var(--ds-focus-width) solid var(--primary12);
-    outline-offset: var(--ds-focus-offset);
-  }
-
-  /*
-   * Disabled: the solid edge gives way to the dotted edge in --role-rule
-   * (--primary12 on one-ink grounds [D85]); the fill drops and the mark
-   * turns --role-muted. Never dimmed [D16].
-   */
-  .box[data-disabled] {
-    --checkbox-edge: 0px;
-
-    border-style: none;
-    background: none;
-  }
-
-  .box[data-disabled] .indicator {
-    color: var(--role-muted);
-  }
-
-  .box[data-disabled] > .edge {
-    display: block;
-  }
-
-  .base:has(.box[data-disabled]) .label,
-  .base:has(.box[data-disabled]) .title,
-  .base:has(.box[data-disabled]) .value {
-    color: var(--role-muted);
-  }
-
-  .card:has(.box[data-disabled]) {
-    --checkbox-card-edge: 0px;
-
-    border-style: none;
-  }
-
-  .card:has(.box[data-disabled]) > .edge {
-    display: block;
-  }
-}
-
-@layer print {
-  @media print {
-    /* A 0.75 pt square; checked keeps its --ds-stroke-3 step and a black mark (§10.7). */
-    .box {
-      --checkbox-edge: var(--border-size-1);
-    }
-
-    .box[data-checked],
-    .box[data-indeterminate] {
-      --checkbox-edge: var(--ds-stroke-3);
-    }
-
-    /* Disabled controls do not print (§10.1). */
-    .base:has(.box[data-disabled]) {
-      display: none;
-    }
-  }
-}

package/components/Checkbox/index.d.ts.map

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

package/components/Checkbox/index.js.map

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

package/components/CheckboxGroup/CheckboxGroup.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckboxGroup.d.ts","sourceRoot":"","sources":["../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAClF,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAkCjE,eAAO,MAAM,aAAa;;;;8EAcxB,CAAA;AAEF,KAAK,qBAAqB,GAAG,YAAY,CAAC,OAAO,aAAa,CAAC,CAAA;AAE/D;;;GAGG;AACH,MAAM,MAAM,kBAAkB,GAAG,iBAAiB,CAAC,KAAK,GAAG;IACzD;;;;OAIG;IACH,IAAI,CAAC,EAAE,qBAAqB,CAAC,MAAM,CAAC,CAAA;IACpC,6EAA6E;IAC7E,OAAO,CAAC,EAAE,qBAAqB,CAAC,SAAS,CAAC,CAAA;IAC1C;;;OAGG;IACH,SAAS,CAAC,EAAE,qBAAqB,CAAC,WAAW,CAAC,CAAA;CAC/C,CAAA;AAED;;;;;;;GAOG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAiBtD"}

package/components/CheckboxGroup/CheckboxGroup.js

@@ -1,63 +0,0 @@
-'use client';
-import * as React from 'react';
-import { CheckboxGroup as BaseCheckboxGroup } from '@base-ui/react/checkbox-group';
-import { cva } from 'class-variance-authority';
-import { CheckboxKindContext } from '../Checkbox';
-import { resolveClassName } from '../../utils/className';
-import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
-import { useScopeAttributes } from '../../utils/scope';
-import styles from './checkbox-group.module.css';
-/*
- * Checkbox Group (§10.7): group layout only.
- *
- * Implementation (CSS Modules + CVA)
- * - Module: checkbox-group.module.css; CVA function `checkboxGroup`.
- * - Axes: `kind` → standard | card | ledger (the layout for that build; it
- *   is also passed to the checkboxes inside as their default kind);
- *   `primary`, `secondary` → scales module classes, inherited by the
- *   checkboxes.
- * - Compound variants: none.
- * - Defaults: kind standard; color axes none [D133].
- * - Color fallback: inherits the scope.
- * - States: data-disabled (Base UI) → carried by each checkbox's own
- *   data-disabled; the group draws nothing.
- * - Parts: base.
- * - Scope: none.
- * - Container: `base` is the inline-size container `checkbox-group`.
- *   Baseline one column (option cards full width); from 480 px short
- *   labels in 2 columns; from 768 px option cards 2-up when there are more
- *   than 4; below 360 px the card value drops under its title (§5.10.2)
- *   [D163].
- */
-export const checkboxGroup = cva(styles.base, {
-    variants: {
-        kind: {
-            standard: styles.standard,
-            card: styles.card,
-            ledger: styles.ledger,
-        },
-        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
-        primary: primaryScaleVariants,
-        secondary: secondaryScaleVariants,
-    },
-    defaultVariants: {
-        kind: 'standard',
-    },
-});
-/**
- * Shared state for a set of Checkboxes (Base UI Checkbox Group). A "select
- * all" parent is a Checkbox with `parent`, and the group needs `allValues`
- * and a controlled `value`. Put the group inside a Fieldset whose legend
- * names the question; the group error message sits under the legend and
- * never turns a box red (§10.7). The root is an inline-size container, so
- * give it a width in shrink-to-fit layouts.
- */
-export function CheckboxGroup(props) {
-    const { kind, primary, secondary, className, children, ...rest } = props;
-    const scope = useScopeAttributes();
-    const variants = { kind, primary, secondary };
-    const resolvedClassName = resolveClassName(className, (extra) => checkboxGroup({ ...variants, className: extra }));
-    return (React.createElement(CheckboxKindContext.Provider, { value: kind ?? undefined },
-        React.createElement(BaseCheckboxGroup, { ...rest, ...scope, className: resolvedClassName }, children)));
-}
-//# sourceMappingURL=CheckboxGroup.js.map

package/components/CheckboxGroup/CheckboxGroup.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"CheckboxGroup.js","sourceRoot":"","sources":["../../src/components/CheckboxGroup/CheckboxGroup.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,aAAa,IAAI,iBAAiB,EAAE,MAAM,+BAA+B,CAAA;AAClF,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AACjD,OAAO,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAA;AACxD,OAAO,EACL,oBAAoB,EACpB,sBAAsB,GACvB,MAAM,oBAAoB,CAAA;AAC3B,OAAO,EAAE,kBAAkB,EAAE,MAAM,mBAAmB,CAAA;AAEtD,OAAO,MAAM,MAAM,6BAA6B,CAAA;AAEhD;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IAC5C,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,QAAQ,EAAE,MAAM,CAAC,QAAQ;YACzB,IAAI,EAAE,MAAM,CAAC,IAAI;YACjB,MAAM,EAAE,MAAM,CAAC,MAAM;SACtB;QACD,6EAA6E;QAC7E,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;IACD,eAAe,EAAE;QACf,IAAI,EAAE,UAAU;KACjB;CACF,CAAC,CAAA;AAwBF;;;;;;;GAOG;AACH,MAAM,UAAU,aAAa,CAAC,KAAyB;IACrD,MAAM,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,IAAI,EAAE,GAAG,KAAK,CAAA;IAExE,MAAM,KAAK,GAAG,kBAAkB,EAAE,CAAA;IAElC,MAAM,QAAQ,GAAG,EAAE,IAAI,EAAE,OAAO,EAAE,SAAS,EAAE,CAAA;IAC7C,MAAM,iBAAiB,GAAG,gBAAgB,CAAC,SAAS,EAAE,CAAC,KAAK,EAAE,EAAE,CAC9D,aAAa,CAAC,EAAE,GAAG,QAAQ,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC,CACjD,CAAA;IAED,OAAO,CACL,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,IAAI,IAAI,SAAS;QACpD,oBAAC,iBAAiB,OAAK,IAAI,KAAM,KAAK,EAAE,SAAS,EAAE,iBAAiB,IACjE,QAAQ,CACS,CACS,CAChC,CAAA;AACH,CAAC"}

package/components/CheckboxGroup/checkbox-group.module.css

@@ -1,52 +0,0 @@
-/*
- * Checkbox Group (§10.7), group layout only. CVA function `checkboxGroup`.
- * The root `base` is the inline-size container `checkbox-group` [D163]. A
- * container cannot query itself, so the columns come from the rows' flex
- * basis, which the container rules set; the group styles only that layout
- * and never a checkbox's own parts. Baseline without container support:
- * one column.
- */
-
-@layer base {
-  .base {
-    container: checkbox-group / inline-size;
-    display: flex;
-    flex-wrap: wrap;
-    gap: var(--ds-space-12);
-    min-inline-size: 0;
-  }
-
-  .base > * {
-    flex: 1 1 100%;
-    min-inline-size: 0;
-  }
-}
-
-@layer variants {
-  .standard {
-    gap: var(--ds-space-12);
-  }
-
-  /* Option cards sit --size-px-5 apart. */
-  .card {
-    gap: var(--size-px-5);
-  }
-
-  .ledger {
-    gap: var(--ds-space-12);
-  }
-
-  /* From 480 px of group width, short labels run in 2 columns (§5.10.2). */
-  @container checkbox-group (width >= 480px) {
-    .standard > * {
-      flex: 0 1 calc((100% - var(--ds-space-12)) / 2);
-    }
-  }
-
-  /* From 768 px, option cards go 2-up when there are more than 4. */
-  @container checkbox-group (width >= 768px) {
-    .card:has(> :nth-child(5)) > * {
-      flex: 0 1 calc((100% - var(--size-px-5)) / 2);
-    }
-  }
-}

package/components/CheckboxGroup/index.d.ts.map

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

package/components/CheckboxGroup/index.js.map

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

package/components/Chip/Chip.d.ts

@@ -1,58 +0,0 @@
-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 `--ds-stroke-1-5` `--role-rule`
- * edge, the label in `type-body-ui` and the × (`close`, inline tier) in a
- * `--ds-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/components/Chip/Chip.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Chip.d.ts","sourceRoot":"","sources":["../../src/components/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/components/Chip/Chip.js

@@ -1,94 +0,0 @@
-'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 '../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 `--ds-stroke-1-5` `--role-rule`
- * edge, the label in `type-body-ui` and the × (`close`, inline tier) in a
- * `--ds-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