@fairgarden/design 0.1.0-alpha.0

package/components/Breadcrumb/breadcrumb.module.css

@@ -0,0 +1,413 @@
+/*
+ * Breadcrumb (§9.8). CVA functions `breadcrumb` and `breadcrumbStairRow` in
+ * Breadcrumb.tsx. Parts: base (the nav), list (the one-line `ol`), item,
+ * link (an ancestor: Link kind="nav" muted), plain (a level without a page),
+ * separator (› chevron), current, domainGlyph, the "…" overflow crumb,
+ * parentRow / parentLink / parentText (‹ Parent), stair (the Collapsible
+ * root), stairBar, stairToggle, stairGlyph (the glyph's box),
+ * stairTitle, staircase (the Collapsible panel), stairList, stairRow,
+ * stairChevron, printLine. Colors follow the §9.8 Color roles table through
+ * role variables only; local custom properties carry dimensions only:
+ *   --stair-indent  a staircase row's start inset, published by level1…6
+ *
+ * Tier classes: `inMd` marks what the 4-level line shows, `inLg` what the
+ * 6-level line shows; the media and container rules below pick one.
+ *
+ * The staircase kind is the section-bar breadcrumb (§11.7) [D184]: the
+ * staircase below --md-n-above, then one line whose crumbs truncate on a
+ * --ds-size-hit target, rest in --primary12 (the §11.7 crumb ink; the hover
+ * stays Link's muted --role-link-hover only) and whose current crumb, at
+ * --font-weight-7, acts as the bar's 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. Crumbs are caps wayfinding,
+ * the §3.7 breadcrumb forms of `type-label` [D165]. */
+.link {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.plain {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.current {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.parentLink {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.stairTitle {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+.printLine {
+  composes: typeLabel from '../../utils/type.module.css';
+}
+
+@layer base {
+  .base {
+    min-inline-size: 0;
+    color: var(--primary12);
+  }
+
+  /* The one-line form. Crumbs never wrap; the middle collapses instead. */
+  .list {
+    display: none;
+    flex-wrap: nowrap;
+    align-items: center;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    white-space: nowrap;
+  }
+
+  .item {
+    display: none;
+    flex: none;
+    align-items: center;
+  }
+
+  /* › at the inline tier, --size-px-2 each side, --role-muted (§9.8 Tokens). */
+  .separator {
+    flex: none;
+    margin-inline: var(--size-px-2);
+    color: var(--role-muted);
+  }
+
+  /* Optional solid glyph, --size-px-3, --size-px-2 before the root [D47]. */
+  .domainGlyph {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--size-px-3);
+    block-size: var(--size-px-3);
+    margin-inline-end: var(--size-px-2);
+    color: var(--primary12);
+  }
+
+  .current {
+    color: var(--primary12);
+  }
+
+  .plain {
+    color: var(--role-muted);
+  }
+
+  /* ‹ Parent: one line; a long label truncates with an ellipsis, never wraps. */
+  .parentRow {
+    display: flex;
+    min-inline-size: 0;
+  }
+
+  .parentLink {
+    max-inline-size: 100%;
+  }
+
+  /* The cap is the container width less the glyph and the Button's gap; the
+     vw line is the fallback without container units. */
+  .parentText {
+    display: block;
+    max-inline-size: calc(100vw - 2 * var(--ds-space-margin) - 2 * var(--size-px-3));
+    max-inline-size: calc(100cqi - 2 * var(--size-px-3));
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* The staircase (LTA): toggle and truncated title on a --ds-size-hit bar. */
+  .stair {
+    display: block;
+    min-inline-size: 0;
+  }
+
+  .stairBar {
+    display: flex;
+    align-items: center;
+    min-block-size: var(--ds-size-hit);
+    min-inline-size: 0;
+  }
+
+  .stairToggle {
+    position: relative;
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--ds-size-hit);
+    block-size: var(--ds-size-hit);
+    margin: 0;
+    padding: 0;
+    border: 0;
+    border-radius: var(--radius-round);
+    background: none;
+    color: var(--primary12);
+    cursor: pointer;
+    appearance: none;
+  }
+
+  /* The 16 px glyph's box, centred in the toggle's hit area. */
+  .stairGlyph {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    inline-size: var(--size-px-7);
+    block-size: var(--size-px-7);
+  }
+
+  .stairTitle {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    overflow: hidden;
+    color: var(--primary12);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* The clip reveal (§1.5.15) [D91]: the panel's edge wipes open, never fades. */
+  .staircase {
+    block-size: var(--collapsible-panel-height);
+    overflow: hidden;
+    overflow: clip;
+  }
+
+  /* Level 1 sits under the title, past the toggle's hit area (LTA ≈41 px). */
+  .stairList {
+    margin: 0;
+    padding: 0;
+    padding-inline-start: var(--ds-size-hit);
+    list-style: none;
+  }
+
+  .stairRow {
+    --stair-indent: 0px;
+
+    display: flex;
+    align-items: center;
+    min-block-size: var(--ds-size-hit);
+    padding-inline-start: var(--stair-indent);
+    white-space: nowrap;
+  }
+
+  /* The --size-px-5 chevron slot before levels 2 and deeper; › in --role-muted. */
+  .stairChevron {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    inline-size: var(--size-px-5);
+    color: var(--role-muted);
+  }
+
+  .printLine {
+    display: none;
+    margin: 0;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .staircase {
+      transition-property: block-size;
+      transition-duration: var(--ds-duration-disclosure);
+      transition-timing-function: var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /* Ancestor and pageless level: --font-weight-4, --font-letterspacing-2 (§3.7);
+     the ancestor link's rest ink is Link's `muted` --role-muted, never an accent [D80]. */
+  .link,
+  .plain {
+    font-weight: var(--font-weight-4);
+    letter-spacing: var(--font-letterspacing-2);
+  }
+
+  .link {
+    white-space: nowrap;
+  }
+
+  /* Staircase indents: level 2 adds the chevron slot; each deeper level --size-px-2. */
+  .level1,
+  .level2 {
+    --stair-indent: 0px;
+  }
+
+  .level3 {
+    --stair-indent: var(--size-px-2);
+  }
+
+  .level4 {
+    --stair-indent: calc(2 * var(--size-px-2));
+  }
+
+  .level5 {
+    --stair-indent: calc(3 * var(--size-px-2));
+  }
+
+  .level6 {
+    --stair-indent: calc(4 * var(--size-px-2));
+  }
+
+  /* In-page breadcrumb: a module, container-first [D163]. Baseline: the
+     parent link only. */
+  .kindInline {
+    container: breadcrumb / inline-size;
+  }
+
+  /* Parent: the single ‹ Parent link at every width. */
+  .kindParent .parentRow {
+    display: flex;
+  }
+
+  /* The staircase kind's line (the section bar's crumbs): crumbs shrink and
+     truncate rather than wrap, each at most --size-px-14, on a --ds-size-hit
+     target (§11.7) [D184]. */
+  .kindStaircase .list {
+    min-inline-size: 0;
+  }
+
+  .kindStaircase .item {
+    flex: 0 1 auto;
+    min-inline-size: 0;
+  }
+
+  .kindStaircase .list .link,
+  .kindStaircase .list .plain,
+  .kindStaircase .list .current {
+    display: block;
+    min-inline-size: 0;
+    max-inline-size: var(--size-px-14);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  .kindStaircase .list .link {
+    padding-block: calc((var(--ds-size-hit) - 1lh) / 2);
+  }
+
+  /* The bar's crumbs rest in --primary12 (§11.7); weight and position tell
+     the current crumb apart. Link's states layer keeps the muted hover. */
+  .kindStaircase .list .link,
+  .kindStaircase .list .plain {
+    color: var(--primary12);
+  }
+
+  /* Viewport fallback: inline from --md-n-above (4 levels), 6 levels from
+     --lg-n-above. The staircase is page frame: the staircase below
+     --md-n-above, one line from it [D184]. */
+  @media (min-width: 768px) {
+    .kindInline .list,
+    .kindStaircase .list {
+      display: flex;
+    }
+
+    .kindInline .parentRow,
+    .kindStaircase .stair {
+      display: none;
+    }
+
+    .inMd {
+      display: flex;
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .item {
+      display: none;
+    }
+
+    .inLg {
+      display: flex;
+    }
+  }
+
+  /* Container thresholds (§5.10.2): from 768 px inline, the middle collapsed
+     past 4 levels (root and last two ancestors kept); from 1024 px up to 6. */
+  @container breadcrumb (width < 768px) {
+    .kindInline .list {
+      display: none;
+    }
+
+    .kindInline .parentRow {
+      display: flex;
+    }
+  }
+
+  @container breadcrumb (width >= 768px) {
+    .kindInline .list {
+      display: flex;
+    }
+
+    .kindInline .parentRow {
+      display: none;
+    }
+
+    .item {
+      display: none;
+    }
+
+    .inMd {
+      display: flex;
+    }
+  }
+
+  @container breadcrumb (width >= 1024px) {
+    .item {
+      display: none;
+    }
+
+    .inLg {
+      display: flex;
+    }
+  }
+}
+
+@layer states {
+  /* Ancestor hover is Link's `muted` nav hover: --role-link-hover only,
+     underlined where that ink is --primary12 (§9.8) [D80, D181]. */
+
+  /* Current: --font-weight-6 against ancestors at --font-weight-4, last, unlinked;
+     on the staircase kind's line --font-weight-7, acting as the title [D184]. */
+  .current[aria-current='page'] {
+    font-weight: var(--font-weight-6);
+  }
+
+  .kindStaircase .list .current[aria-current='page'] {
+    font-weight: var(--font-weight-7);
+  }
+
+  /* Stair toggle hover: the glyph at the next tier's weight, from the
+     Collapsible's glyph host; no added circle (§11.7) [D181]. */
+
+  /* Focus: 2 px --primary12 ring at a 2 px offset, keyboard only [D45]. */
+  .stairToggle:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+
+  .staircase[data-starting-style],
+  .staircase[data-ending-style] {
+    block-size: 0;
+  }
+}
+
+@layer print {
+  @media print {
+    /* The interactive breadcrumb is hidden; the path prints once as one plain
+       line of caps, the staircase flattened and collapsed crumbs restored,
+       with no URLs or link letters (§7.8) [D80, D105]. */
+    .list,
+    .parentRow,
+    .stair {
+      display: none;
+    }
+
+    .printLine {
+      display: block;
+    }
+  }
+}

package/components/Breadcrumb/index.d.ts

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

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

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

package/components/Breadcrumb/index.js

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

package/components/Breadcrumb/index.js.map

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

package/components/Button/Button.d.ts

@@ -0,0 +1,97 @@
+import * as React from 'react';
+import { Button as BaseButton } from '@base-ui/react/button';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../Icon';
+/**
+ * Button classes (§9.2, §1.11.10). `primary` and `secondary` are never
+ * defaulted [D133]: the `solid` class falls back to the scope's action scale
+ * for `secondary`, and an explicit `secondary` wins from the scales layer.
+ */
+export declare const button: (props?: ({
+    variant?: "outline" | "text" | "solid" | null | undefined;
+    size?: "sm" | "md" | "lg" | "xl" | null | undefined;
+    iconOnly?: boolean | null | undefined;
+    onMedia?: boolean | null | undefined;
+    butted?: "end" | "start" | 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 ButtonVariants = VariantProps<typeof button>;
+/** Handler type of the deprecated `onPress` alias, kept for existing callers. */
+export type PressCallback = (event: React.MouseEvent<HTMLButtonElement>) => void;
+type ButtonCommonProps = Omit<BaseButton.Props, 'children'> & {
+    /**
+     * `outline` (default) is the outline twin; `solid` is the page's primary
+     * action, filled with the scope's action scale; `text` is a text button
+     * whose glyph trails (§9.2).
+     */
+    variant?: ButtonVariants['variant'];
+    /**
+     * Butts the button against an adjacent field on its `start` or `end`
+     * edge, as in the butted submit. Default: none.
+     */
+    butted?: ButtonVariants['butted'];
+    /**
+     * Primary Radix scale, from the primary roster: the outline edge, labels
+     * and focus ring. Never defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: ButtonVariants['primary'];
+    /**
+     * Secondary Radix scale: the `solid` fill and the `text` glyph. Omitted,
+     * `solid` falls back to the scope's action scale.
+     */
+    secondary?: ButtonVariants['secondary'];
+    /** Which side of the label the glyph sits on (a `text` Button's chevron trails). */
+    iconPosition?: 'start' | 'end';
+    /**
+     * Called on click, after `onClick`.
+     * @deprecated Use `onClick`. Kept as an alias from the react-aria Button.
+     */
+    onPress?: PressCallback;
+};
+type LabelledButtonProps = {
+    /** `true` hides the label and shows only `icon`. Default `false`. */
+    iconOnly?: false | null;
+    /** Only with `iconOnly`. */
+    onMedia?: false | null;
+    /**
+     * Fixed height: `sm` 32 px (hit area extended to 44), `md` 40 px (default),
+     * `lg` 48 px, `xl` 56 px for the page's single transactional action.
+     */
+    size?: ButtonVariants['size'];
+    /** One optional functional glyph (§6.10), inline tier, FILL 0. */
+    icon?: IconName;
+    /** The label: verb plus object, authored in title case [D160]. */
+    children?: React.ReactNode;
+};
+type IconOnlyButtonProps = {
+    /**
+     * Shows only `icon`; `children` becomes the visually hidden accessible
+     * name. Pair the button with a Tooltip. Default `false`.
+     */
+    iconOnly: true;
+    /** Media button: place it inside a `night` Ground [D148]. */
+    onMedia?: boolean | null;
+    /** `sm`, `md` (default) or `lg`: `xl` is excluded for icon-only buttons. */
+    size?: Exclude<ButtonVariants['size'], 'xl'>;
+    /** The glyph (§6.10). */
+    icon: IconName;
+    /** The accessible name, visually hidden. Pair the button with a Tooltip. */
+    children: React.ReactNode;
+};
+/**
+ * Props for Button: Base UI Button props plus the variant and color axes.
+ * With `iconOnly`, `icon` and an accessible-name `children` are required.
+ */
+export type ButtonProps = ButtonCommonProps & (LabelledButtonProps | IconOnlyButtonProps);
+/**
+ * A Base UI Button. A navigating action renders an anchor through `render`
+ * (with `nativeButton={false}`), keeping link semantics. States come from
+ * Base UI and ARIA attributes only: pass `disabled` (with
+ * `focusableWhenDisabled` where the reason matters) or `aria-busy` together
+ * with an authored "-ing…" label; a busy button holds its rest width and
+ * ignores clicks.
+ */
+export declare function Button(props: ButtonProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Button.d.ts.map

package/components/Button/Button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../src/components/Button/Button.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;AAEjE,OAAO,EAAkB,KAAK,QAAQ,EAAE,MAAM,SAAS,CAAA;AAWvD;;;;GAIG;AACH,eAAO,MAAM,MAAM;;;;;;;;8EAqCjB,CAAA;AAEF,KAAK,cAAc,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAA;AAEjD,iFAAiF;AACjF,MAAM,MAAM,aAAa,GAAG,CAAC,KAAK,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAA;AAIhF,KAAK,iBAAiB,GAAG,IAAI,CAAC,UAAU,CAAC,KAAK,EAAE,UAAU,CAAC,GAAG;IAC1D;;;;OAIG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC;;;OAGG;IACH,MAAM,CAAC,EAAE,cAAc,CAAC,QAAQ,CAAC,CAAA;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,cAAc,CAAC,SAAS,CAAC,CAAA;IACnC;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC,WAAW,CAAC,CAAA;IACvC,oFAAoF;IACpF,YAAY,CAAC,EAAE,OAAO,GAAG,KAAK,CAAA;IAC9B;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAA;CACxB,CAAA;AAEH,KAAK,mBAAmB,GAAG;IACzB,qEAAqE;IACrE,QAAQ,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACvB,4BAA4B;IAC5B,OAAO,CAAC,EAAE,KAAK,GAAG,IAAI,CAAA;IACtB;;;OAGG;IACH,IAAI,CAAC,EAAE,cAAc,CAAC,MAAM,CAAC,CAAA;IAC7B,kEAAkE;IAClE,IAAI,CAAC,EAAE,QAAQ,CAAA;IACf,kEAAkE;IAClE,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED,KAAK,mBAAmB,GAAG;IACzB;;;OAGG;IACH,QAAQ,EAAE,IAAI,CAAA;IACd,6DAA6D;IAC7D,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACxB,4EAA4E;IAC5E,IAAI,CAAC,EAAE,OAAO,CAAC,cAAc,CAAC,MAAM,CAAC,EAAE,IAAI,CAAC,CAAA;IAC5C,yBAAyB;IACzB,IAAI,EAAE,QAAQ,CAAA;IACd,4EAA4E;IAC5E,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED;;;GAGG;AACH,MAAM,MAAM,WAAW,GAAG,iBAAiB,GACzC,CAAC,mBAAmB,GAAG,mBAAmB,CAAC,CAAA;AAE7C;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,KAAK,EAAE,WAAW,qBAsHxC"}

package/components/Button/Button.js

@@ -0,0 +1,127 @@
+'use client';
+import * as React from 'react';
+import { Button as BaseButton } from '@base-ui/react/button';
+import { cva } from 'class-variance-authority';
+import { Icon, iconHost } from '../Icon';
+import { assignRef } from '../../utils/assignRef';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants, } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './button.module.css';
+/**
+ * Button classes (§9.2, §1.11.10). `primary` and `secondary` are never
+ * defaulted [D133]: the `solid` class falls back to the scope's action scale
+ * for `secondary`, and an explicit `secondary` wins from the scales layer.
+ */
+export const button = cva(styles.base, {
+    variants: {
+        variant: {
+            solid: styles.solid,
+            outline: styles.outline,
+            text: styles.text,
+        },
+        size: {
+            sm: styles.sm,
+            md: styles.md,
+            lg: styles.lg,
+            xl: styles.xl,
+        },
+        iconOnly: {
+            true: styles.iconOnly,
+        },
+        onMedia: {
+            true: styles.onMedia,
+        },
+        butted: {
+            start: styles.buttedStart,
+            end: styles.buttedEnd,
+        },
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    compoundVariants: [
+        { iconOnly: true, onMedia: true, class: styles.iconOnlyOnMedia },
+        { iconOnly: true, butted: 'start', class: styles.iconOnlyButtedStart },
+        { iconOnly: true, butted: 'end', class: styles.iconOnlyButtedEnd },
+    ],
+    defaultVariants: {
+        variant: 'outline',
+        size: 'md',
+        iconOnly: false,
+        onMedia: false,
+    },
+});
+/**
+ * A Base UI Button. A navigating action renders an anchor through `render`
+ * (with `nativeButton={false}`), keeping link semantics. States come from
+ * Base UI and ARIA attributes only: pass `disabled` (with
+ * `focusableWhenDisabled` where the reason matters) or `aria-busy` together
+ * with an authored "-ing…" label; a busy button holds its rest width and
+ * ignores clicks.
+ */
+export function Button(props) {
+    const { variant, size, iconOnly, onMedia, butted, primary, secondary, icon, iconPosition = 'start', onPress, onClick, className, children, disabled, ref, ...rest } = props;
+    const scope = useScopeAttributes();
+    const busy = rest['aria-busy'] === true || rest['aria-busy'] === 'true';
+    // A navigating Button keeps link semantics: drop Base UI's role="button".
+    const linkSemantics = React.isValidElement(rest.render) &&
+        rest.render.props.href != null &&
+        !('role' in rest)
+        ? { role: undefined }
+        : null;
+    const element = React.useRef(null);
+    const restWidth = React.useRef(null);
+    const setRef = React.useCallback((node) => {
+        element.current = node;
+        assignRef(ref, node);
+    }, [ref]);
+    // Remember the rest width, then hold it while busy [D84].
+    React.useLayoutEffect(() => {
+        if (!busy && element.current) {
+            restWidth.current = element.current.getBoundingClientRect().width;
+        }
+    }, [busy, children]);
+    React.useLayoutEffect(() => {
+        const node = element.current;
+        if (!busy || !node || restWidth.current === null)
+            return undefined;
+        node.style.setProperty('--button-rest-width', `${restWidth.current}px`);
+        return () => {
+            node.style.removeProperty('--button-rest-width');
+        };
+    }, [busy]);
+    const handleClick = (event) => {
+        if (busy) {
+            event.preventDefault();
+            event.preventBaseUIHandler();
+            return;
+        }
+        restWidth.current = event.currentTarget.getBoundingClientRect().width;
+        onClick?.(event);
+        onPress?.(event);
+    };
+    const variants = {
+        variant,
+        size,
+        iconOnly,
+        onMedia,
+        butted,
+        primary,
+        secondary,
+    };
+    // The text Button and icon-only buttons swap the glyph to the next tier's
+    // weight on hover and press (§10.1 icon states) [D181]; the root hosts it.
+    const interactiveGlyph = icon != null && (variant === 'text' || iconOnly === true);
+    const host = interactiveGlyph ? iconHost : undefined;
+    const resolvedClassName = resolveClassName(className, (extra) => button({ ...variants, className: cx(host, extra) }));
+    // Icon-only lg takes the tag tier (20 px) as its own instance, never a resize.
+    const glyph = icon ? (React.createElement(Icon, { name: icon, size: iconOnly && size === 'lg' ? 'tag' : 'inline', weight: interactiveGlyph ? 'interactive' : 'rest', className: styles.icon })) : null;
+    const label = children == null ? null : React.createElement("span", { className: styles.label }, children);
+    const edge = disabled && variant !== 'text' ? (React.createElement("svg", { className: styles.edge, "aria-hidden": "true", focusable: "false" },
+        React.createElement("rect", { className: styles.edgeLine, width: "100%", height: "100%" }))) : null;
+    return (React.createElement(BaseButton, { ...rest, ...linkSemantics, ...scope, ref: setRef, disabled: disabled, className: resolvedClassName, onClick: handleClick },
+        iconPosition === 'end' ? label : glyph,
+        iconPosition === 'end' ? glyph : label,
+        edge));
+}
+//# sourceMappingURL=Button.js.map

package/components/Button/Button.js.map

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