@fairgarden/design 0.1.0-alpha.0

package/components/Stat/stat.module.css

@@ -0,0 +1,299 @@
+/*
+ * Stat block (§12.10; typography §8.8; counts §5.10.2). CVA function
+ * `statBlock`. Pure type, so it works on every ground: every text is
+ * --primary12; cell rules are --role-hairline; only the hero's mount takes
+ * the secondary (front disc --secondary9, under-disc --secondary7, the
+ * numeral on it --secondary-contrast). Colors are role variables only.
+ *
+ * Column counts: cells span a 12-track grid on the `stat-row` container
+ * (the root), so the cells can query it. `--stat-span` is a track count.
+ */
+
+/* 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. */
+.label {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.numeral {
+  composes: typeStat from '../../utils/type.module.css';
+}
+
+.numeralCompact {
+  composes: typeStatCompact from '../../utils/type.module.css';
+}
+
+.unit {
+  composes: typeLead from '../../utils/type.module.css';
+}
+
+.unitCompact {
+  composes: typeSubhead from '../../utils/type.module.css';
+}
+
+.qualifier {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.delta {
+  composes: typeCaption from '../../utils/type.module.css';
+}
+
+.source {
+  composes: typeSmall from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .label,
+  .numeral,
+  .numeralCompact,
+  .unit,
+  .unitCompact,
+  .qualifier,
+  .delta,
+  .source {
+    margin: 0;
+    color: var(--primary12);
+  }
+
+  .unit,
+  .unitCompact {
+    line-height: inherit;
+  }
+
+  /* Change: a ▲ or ▼ at --size-px-3 plus words, never color alone. */
+  .delta {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-1);
+  }
+
+  .deltaGlyph {
+    flex: none;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    fill: currentColor;
+  }
+
+  @media (forced-colors: active) {
+    .deltaGlyph {
+      forced-color-adjust: none;
+      fill: CanvasText;
+    }
+  }
+}
+
+@layer variants {
+  /* Row: rule-topped cells like spec cells; --border-size-1 --role-hairline. */
+  .row {
+    container: stat-row / inline-size;
+    display: grid;
+    grid-template-columns: repeat(12, minmax(0, 1fr));
+    column-gap: var(--ds-space-margin);
+    row-gap: var(--size-px-5);
+  }
+
+  .cell {
+    --stat-span: 12;
+
+    grid-column: span var(--stat-span);
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-px-2);
+    min-inline-size: 0;
+    padding-block-start: var(--size-px-3);
+    border-block-start: var(--border-size-1) solid var(--role-hairline);
+  }
+
+  /* Four or more stats: every figure compact, at every width (§8.8). */
+  .compact .cell {
+    gap: var(--size-px-1);
+  }
+
+  /* Baseline, no container queries: four 2 × 2 (1-up past 5 characters), never auto-fit. */
+  .countTwo .cell,
+  .countFour .cell {
+    --stat-span: 6;
+  }
+
+  .long .cell {
+    --stat-span: 12;
+  }
+
+  @media (min-width: 768px) {
+    .countTwo .cell {
+      --stat-span: 6;
+    }
+
+    .threeShort .cell {
+      --stat-span: 4;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .countThree .cell {
+      --stat-span: 4;
+    }
+
+    .countFour .cell {
+      --stat-span: 3;
+    }
+  }
+
+  @media (max-width: 359.98px) {
+    .base .cell {
+      --stat-span: 12;
+    }
+  }
+
+  /* Container thresholds on stat-row (§5.10.2) refine the baseline. */
+  @container stat-row (width < 360px) {
+    .base .cell {
+      --stat-span: 12;
+    }
+  }
+
+  @container stat-row (360px <= width < 768px) {
+    .countTwo .cell,
+    .countFour .cell {
+      --stat-span: 6;
+    }
+
+    .countThree .cell,
+    .long .cell {
+      --stat-span: 12;
+    }
+  }
+
+  @container stat-row (768px <= width < 1024px) {
+    .countTwo .cell,
+    .countFour .cell {
+      --stat-span: 6;
+    }
+
+    .countThree .cell {
+      --stat-span: 12;
+    }
+
+    .threeShort .cell {
+      --stat-span: 4;
+    }
+  }
+
+  @container stat-row (width >= 1024px) {
+    .countTwo .cell {
+      --stat-span: 6;
+    }
+
+    .countThree .cell {
+      --stat-span: 4;
+    }
+
+    .countFour .cell {
+      --stat-span: 3;
+    }
+  }
+
+  /* Hero: one numeral centered on the blob mount (§6.6), a caption below. */
+  .hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--ds-space-12);
+    text-align: center;
+  }
+
+  .mount {
+    position: relative;
+    display: grid;
+    place-items: center;
+    inline-size: var(--ds-size-art-s);
+    aspect-ratio: 142 / 140;
+  }
+
+  .mountArt {
+    position: absolute;
+    inset: 0;
+    inline-size: 100%;
+    block-size: 100%;
+    overflow: visible;
+  }
+
+  .mountFront {
+    fill: var(--secondary9);
+  }
+
+  .mountUnder {
+    fill: var(--secondary7);
+  }
+
+  .hero .numeral,
+  .hero .unit {
+    position: relative;
+    color: var(--secondary-contrast);
+  }
+
+  .caption {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: var(--size-px-1);
+  }
+
+  /* Inline: the numeral in running text, its qualifier at the text's size. */
+  .inline {
+    display: inline;
+  }
+
+  .numeralInline {
+    font-weight: var(--font-weight-7);
+    font-variant-numeric: var(--ds-numerals-data);
+  }
+
+  .inline .qualifier {
+    font-size: inherit;
+    line-height: inherit;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Blocks print 4-up if the figures fit, else 2 × 2; cells never split (§8.8, §5.12). */
+    .cell {
+      --stat-span: 12;
+
+      break-inside: avoid;
+    }
+
+    .countTwo .cell {
+      --stat-span: 6;
+    }
+
+    .countThree .cell {
+      --stat-span: 4;
+    }
+
+    .countFour .cell {
+      --stat-span: 3;
+    }
+
+    .long .cell {
+      --stat-span: 6;
+    }
+
+    /* The mount is decoration: hidden, so the remap cannot turn its discs black; the numeral stays. */
+    .mountArt {
+      display: none;
+    }
+
+    .hero {
+      break-inside: avoid;
+    }
+  }
+}

package/components/Sticker/Sticker.d.ts

@@ -0,0 +1,71 @@
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { type VariantProps } from 'class-variance-authority';
+export declare const sticker: (props?: ({
+    size?: "s" | "l" | null | undefined;
+    bare?: 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 StickerVariants = VariantProps<typeof sticker>;
+/** The two native sticker sizes (§6.2): S 152 px, L 312 px. */
+export type StickerSize = 's' | 'l';
+/** Props for Sticker: `span` props, `render`, the art, the size, `bare` and the color axes. */
+export type StickerProps = Omit<useRender.ComponentProps<'span'>, 'children'> & {
+    /**
+     * The asset's viewBox, drawn at its native size: `0 0 152 152` for S,
+     * `0 0 312 312` for L (other aspect ratios keep the width).
+     */
+    viewBox: string;
+    /**
+     * The halo layer: the asset's pre-expanded path, 8 px (`--ds-space-halo`)
+     * outside every part, merged into one silhouette with rounded concave
+     * bridges and no sharp outer corners. Never a runtime stroke, outline or
+     * blur. Filled `--primary1`; no edge, ever. Ignored with `bare`.
+     */
+    halo?: React.ReactNode;
+    /**
+     * The line art, stroked in `--role-heading` at the silhouette weight
+     * (`--ds-stroke-3` at S, `--ds-stroke-4` at L), round caps and joins, no
+     * fill; give ink-spot parts `fill="currentColor"`, and wrap interior lines
+     * in `StickerDetail`. No text inside the art.
+     */
+    children: React.ReactNode;
+    /** `s` (default): `--ds-size-art-s`, 152 px. `l`: `--ds-size-art-l`, 312 px. */
+    size?: StickerSize;
+    /**
+     * The bare variant: no halo and no scope of its own; the art draws in the
+     * host ground's `--role-heading` with open counters. Never on a
+     * decorative pattern. Default `false`.
+     */
+    bare?: boolean;
+    /**
+     * Primary Radix scale: the halo's `--primary1` (the sticker's own scope),
+     * or, when bare, the host's. Override only with a pairing §2 verifies
+     * [D128]. Never defaulted.
+     */
+    primary?: StickerVariants['primary'];
+    /**
+     * Secondary Radix scale: the line's `--role-heading` (step 12). Override
+     * only with a verified pairing [D128]. Never defaulted.
+     */
+    secondary?: StickerVariants['secondary'];
+};
+/**
+ * A §6.5 sticker: pass the asset's `viewBox`, its pre-expanded `halo` path
+ * and its line art as children. It declares its own `white` scope, so the
+ * same asset looks identical on every ground within a mode: a face that
+ * follows the page mode on a page ground, a light island inside a field or
+ * the night band. In print the halo vanishes and the line prints black.
+ */
+export declare function Sticker(props: StickerProps): React.ReactElement<unknown, string | React.JSXElementConstructor<any>>;
+/** Props for StickerDetail: SVG group props. */
+export type StickerDetailProps = Omit<React.SVGProps<SVGGElement>, 'ref'>;
+/**
+ * Interior lines, one stroke step lighter than the silhouette
+ * (`--border-size-2` at S, `--ds-stroke-3` at L): at most two weights per
+ * drawing, depth by weight, never tone (§6.2).
+ */
+export declare function StickerDetail(props: StickerDetailProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Sticker.d.ts.map

package/components/Sticker/Sticker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Sticker.d.ts","sourceRoot":"","sources":["../../src/components/Sticker/Sticker.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAA;AAErD,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AA+CjE,eAAO,MAAM,OAAO;;;;;8EAiBlB,CAAA;AAEF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAA;AAEnD,+DAA+D;AAC/D,MAAM,MAAM,WAAW,GAAG,GAAG,GAAG,GAAG,CAAA;AAEnC,+FAA+F;AAC/F,MAAM,MAAM,YAAY,GAAG,IAAI,CAAC,SAAS,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,UAAU,CAAC,GAAG;IAC9E;;;OAGG;IACH,OAAO,EAAE,MAAM,CAAA;IACf;;;;;OAKG;IACH,IAAI,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IACtB;;;;;OAKG;IACH,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,gFAAgF;IAChF,IAAI,CAAC,EAAE,WAAW,CAAA;IAClB;;;;OAIG;IACH,IAAI,CAAC,EAAE,OAAO,CAAA;IACd;;;;OAIG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IACpC;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;CACzC,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,KAAK,EAAE,YAAY,0EAwD1C;AAED,gDAAgD;AAChD,MAAM,MAAM,kBAAkB,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC,WAAW,CAAC,EAAE,KAAK,CAAC,CAAA;AAEzE;;;;GAIG;AACH,wBAAgB,aAAa,CAAC,KAAK,EAAE,kBAAkB,qBAGtD"}

package/components/Sticker/Sticker.js

@@ -0,0 +1,104 @@
+'use client';
+import * as React from 'react';
+import { useRender } from '@base-ui/react/use-render';
+import { mergeProps } from '@base-ui/react/merge-props';
+import { cva } from 'class-variance-authority';
+import { Ground } from '../Ground';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './sticker.module.css';
+/*
+ * Sticker (§6.5, §6.12, §6.14): Bareburger's die-cut halo. Hand art with an
+ * 8 px `--primary1` halo around its merged silhouette, which separates the
+ * art from any ground without shadow, alpha or blur. Decorative
+ * (`aria-hidden`); at most one per scene; sizes S and L only; never on a
+ * photograph.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: sticker.module.css; CVA function `sticker`.
+ * - Axes: `size` → s | l (`--ds-size-art-s` 152 px, `--ds-size-art-l`
+ *   312 px, with their stroke pairs); `bare` → `bare` (no halo and no scope
+ *   of its own: the host's `--role-heading`, counters open); `primary`,
+ *   `secondary` → scales module classes (bare only; a haloed sticker passes
+ *   them to its own scope).
+ * - Compound variants: none.
+ * - Defaults: size s, bare false; color axes: none.
+ * - Color fallback: the sticker's own `white` scope (olive × green), so it
+ *   looks the same on every ground; bare, it inherits the host scope.
+ * - States: static.
+ * - Parts: base (the sized box), art (the SVG), the scope (the nested
+ *   Ground, an SVG group; no class of its own), halo (the asset's
+ *   pre-expanded halo path, `--primary1`), line (the line art in
+ *   `--role-heading`: strokes at the silhouette weight, ink fills through
+ *   `fill="currentColor"`), detail (interior lines at the lighter weight;
+ *   `StickerDetail`).
+ * - Scope: a nested `kind="face"` Ground, preset `white`, rendered as the
+ *   SVG group that holds halo and line, so it paints no box: it follows the
+ *   page mode on a page ground and is a light island (`data-theme="light"`)
+ *   inside a field or the night band, which Ground writes from context
+ *   [D148, D149, D179]. The halo names `--primary1` directly, never
+ *   `--role-halo` [D144, D150].
+ * - Container: none. Fixed sizes, never scaled with the viewport (P9) [D78];
+ *   a smaller box (the empty state's spot size) swaps the size, keeping
+ *   strokes at their token weight.
+ */
+export const sticker = cva(styles.base, {
+    variants: {
+        size: {
+            s: styles.s,
+            l: styles.l,
+        },
+        bare: {
+            true: styles.bare,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        size: 's',
+        bare: false,
+    },
+});
+/**
+ * A §6.5 sticker: pass the asset's `viewBox`, its pre-expanded `halo` path
+ * and its line art as children. It declares its own `white` scope, so the
+ * same asset looks identical on every ground within a mode: a face that
+ * follows the page mode on a page ground, a light island inside a field or
+ * the night band. In print the halo vanishes and the line prints black.
+ */
+export function Sticker(props) {
+    const { render, ref, className, viewBox, halo, children, size = 's', bare = false, primary, secondary, ...rest } = props;
+    const scope = useScopeAttributes();
+    const line = React.createElement("g", { className: styles.line }, children);
+    const art = (React.createElement("svg", { className: styles.art, viewBox: viewBox, focusable: "false", "aria-hidden": "true" }, bare ? (line) : (React.createElement(Ground, { kind: "face", preset: "white", primary: (primary ?? undefined), secondary: (secondary ?? undefined), render: React.createElement("g", null) },
+        halo != null ? React.createElement("g", { className: styles.halo }, halo) : null,
+        line))));
+    return useRender({
+        defaultTagName: 'span',
+        render,
+        ref,
+        props: mergeProps({
+            ...(bare ? scope : null),
+            'aria-hidden': true,
+            className: sticker({
+                size,
+                bare,
+                primary: bare ? primary : undefined,
+                secondary: bare ? secondary : undefined,
+                className,
+            }),
+            children: art,
+        }, rest),
+    });
+}
+/**
+ * Interior lines, one stroke step lighter than the silhouette
+ * (`--border-size-2` at S, `--ds-stroke-3` at L): at most two weights per
+ * drawing, depth by weight, never tone (§6.2).
+ */
+export function StickerDetail(props) {
+    const { className, ...rest } = props;
+    return React.createElement("g", { ...rest, className: className ? `${styles.detail} ${className}` : styles.detail });
+}
+//# sourceMappingURL=Sticker.js.map

package/components/Sticker/Sticker.js.map

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

package/components/Sticker/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Sticker';
+//# sourceMappingURL=index.d.ts.map

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

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

package/components/Sticker/index.js

@@ -0,0 +1,2 @@
+export * from './Sticker';
+//# sourceMappingURL=index.js.map

package/components/Sticker/index.js.map

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

package/components/Sticker/sticker.module.css

@@ -0,0 +1,87 @@
+/*
+ * Sticker (§6.5). Parts: base (the sized box), art (the SVG), the scope
+ * (the nested white Ground, an SVG group, so it paints no box), halo (the
+ * asset's pre-expanded halo path), line (the line art), detail (interior
+ * lines). Colors are role variables of the sticker's own scope: the halo
+ * --primary1, named directly [D144]; the line --role-heading, section-head
+ * rank for hand art [D60]. Bare, the line takes the host's --role-heading.
+ * Local custom properties carry dimensions only:
+ *   --sticker-size          the native width (--ds-size-art-s or -l)
+ *   --sticker-stroke        the silhouette weight
+ *   --sticker-stroke-detail the interior weight, one step lighter
+ */
+
+@layer base {
+  .base {
+    --sticker-size: var(--ds-size-art-s);
+    --sticker-stroke: var(--ds-stroke-3);
+    --sticker-stroke-detail: var(--border-size-2);
+
+    display: inline-block;
+    flex: none;
+    inline-size: var(--sticker-size);
+    max-inline-size: 100%;
+    vertical-align: top;
+  }
+
+  .art {
+    display: block;
+    inline-size: 100%;
+    block-size: auto;
+    overflow: visible;
+  }
+
+  /* The halo: a --primary1 face under ink, never an edge (§6.5). */
+  .halo {
+    fill: var(--primary1);
+    stroke: none;
+  }
+
+  /* Monoline art (§6.2): one ink, round caps and joins, fixed strokes at every rendered size. */
+  .line {
+    color: var(--role-heading);
+    fill: none;
+    stroke: currentColor;
+    stroke-width: var(--sticker-stroke);
+    stroke-linecap: round;
+    stroke-linejoin: round;
+  }
+
+  .line * {
+    vector-effect: non-scaling-stroke;
+  }
+
+  .detail {
+    stroke-width: var(--sticker-stroke-detail);
+  }
+}
+
+@layer variants {
+  /* S: 152 px, silhouette --ds-stroke-3, interior --border-size-2 (§6.2). */
+  .s {
+    --sticker-size: var(--ds-size-art-s);
+    --sticker-stroke: var(--ds-stroke-3);
+    --sticker-stroke-detail: var(--border-size-2);
+  }
+
+  /* L: 312 px, silhouette --ds-stroke-4, interior --ds-stroke-3 (§6.2). */
+  .l {
+    --sticker-size: var(--ds-size-art-l);
+    --sticker-stroke: var(--ds-stroke-4);
+    --sticker-stroke-detail: var(--ds-stroke-3);
+  }
+
+  /* Bare: the host scope's --role-heading, no halo (the line's color is already that role). */
+  .bare .line {
+    color: var(--role-heading);
+  }
+}
+
+@layer print {
+  @media print {
+    /* The halo remaps to white and vanishes; the line prints black; never split. */
+    .base {
+      break-inside: avoid;
+    }
+  }
+}

package/components/Switch/Switch.d.ts

@@ -0,0 +1,57 @@
+import * as React from 'react';
+import { Switch as BaseSwitch } from '@base-ui/react/switch';
+import { type VariantProps } from 'class-variance-authority';
+export declare const switchRoot: (props?: ({
+    kind?: "inline" | "row" | 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 SwitchVariants = VariantProps<typeof switchRoot>;
+/** The state words shown beside the track. */
+export interface SwitchStateLabels {
+    /** Shown while on. Default "On". */
+    on: string;
+    /** Shown while off. Default "Off". */
+    off: string;
+}
+/**
+ * Props for Switch: Base UI Switch.Root props (on the track) plus the
+ * kind, color axes and the row's content. `className` goes on the row.
+ */
+export type SwitchProps = Omit<BaseSwitch.Root.Props, 'className' | 'children'> & {
+    /**
+     * `row` (default): label left, switch right, the row a hit target with a
+     * hairline rule. `inline`: switch, state word, then label.
+     */
+    kind?: SwitchVariants['kind'];
+    /**
+     * Primary Radix scale: the off track and thumb, label and state word.
+     * Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: SwitchVariants['primary'];
+    /**
+     * Secondary Radix scale: the on track's fill and edge and the on thumb,
+     * through --role-select. Omitted, it inherits the scope.
+     */
+    secondary?: SwitchVariants['secondary'];
+    /** Class for the row (the `base` part). */
+    className?: string;
+    /** The label: name the setting, not the action, in title case [D160]. */
+    children?: React.ReactNode;
+    /** Optional helper text under the label, in sentence case. */
+    description?: React.ReactNode;
+    /** The state words; default "On" / "Off". Set in `type-label` caps. */
+    stateLabels?: SwitchStateLabels;
+    /** The state word while `aria-busy` is set; default "Saving…". */
+    busyLabel?: string;
+};
+/**
+ * A Base UI Switch for a setting that takes effect the moment it flips.
+ * Off → on changes position, thumb shape (ring → disc), edge weight and
+ * fill, so state is never fill alone [D15]. While the change is saving,
+ * pass `aria-busy`: the state word reads "Saving…" and the switch is
+ * inert; on failure revert `checked` and explain in a toast (§10.17).
+ */
+export declare function Switch(props: SwitchProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Switch.d.ts.map

package/components/Switch/Switch.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../src/components/Switch/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,MAAM,IAAI,UAAU,EAAE,MAAM,uBAAuB,CAAA;AAC5D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAsCjE,eAAO,MAAM,UAAU;;;;8EAarB,CAAA;AAEF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAA;AAErD,8CAA8C;AAC9C,MAAM,WAAW,iBAAiB;IAChC,oCAAoC;IACpC,EAAE,EAAE,MAAM,CAAA;IACV,sCAAsC;IACtC,GAAG,EAAE,MAAM,CAAA;CACZ;AAID;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,EAAE,WAAW,GAAG,UAAU,CAAC,GAAG;IAChF;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAC7B;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACvC,2CAA2C;IAC3C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,yEAAyE;IACzE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC1B,8DAA8D;IAC9D,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAC7B,uEAAuE;IACvE,WAAW,CAAC,EAAE,iBAAiB,CAAA;IAC/B,kEAAkE;IAClE,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBA2DxC"}