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

package/foundations/ground/ground.module.css

@@ -0,0 +1,84 @@
+/*
+ * Ground: the preset scope (§1.11.5) [D178]. Paints the scope's ground, sets
+ * its one text ink, publishes the container edge as --role-edge, draws the
+ * seam on full-bleed bands and the edge on fields. Colors come from
+ * roles.css through the scope attributes the component writes; the module
+ * itself names role variables only and selects no scope or mode hook.
+ *
+ * The kind classes sit in the base layer, so a composing component's
+ * variant class (the Dialog's solid cover) can reset a field's geometry.
+ */
+@layer base {
+  .base {
+    display: block;
+    color: var(--primary12);
+    background-color: var(--role-ground);
+  }
+
+  /*
+   * Full-bleed band (a page ground, or the night band): a --border-size-1
+   * seam at top and bottom in --role-seam, invisible (the ground's own
+   * color) except on the night band in dark mode, where it is --primary12
+   * [D179]. A band has no container edge, so --role-edge is --role-rule.
+   * The hairline between two different page grounds is the §11.2 divider's.
+   */
+  .band {
+    --role-edge: var(--role-rule);
+
+    border-block: var(--border-size-1) solid var(--role-seam);
+  }
+
+  /*
+   * Field [D177]: inset inside the content container, never full-bleed, with
+   * a radius and its own --primary12 edge at --border-size-1 in both modes;
+   * no seam, because the edge does that job.
+   */
+  .field {
+    --role-edge: var(--primary12);
+    --ground-edge: var(--border-size-1);
+
+    padding: var(--fgd-space-margin);
+    border: var(--ground-edge) solid var(--role-edge);
+    border-radius: var(--radius-2-25);
+  }
+
+  /*
+   * Nested face (card face, plate, panel): no seam and no geometry of its
+   * own; the composing component sets size and radius and draws its edge in
+   * --role-edge: --primary10 on a page ground [D179].
+   */
+  .face {
+    --role-edge: var(--primary10);
+
+    border-block: none;
+  }
+}
+
+@layer variants {
+  /* A page ground inside a field or the night band: a light island with a --primary12 edge [D149, D179]. */
+  .island {
+    --role-edge: var(--primary12);
+  }
+
+  /* The one framed feature field per page: --fgd-radius-feature and a --border-size-2 edge [D95, D177]. */
+  .framed {
+    --ground-edge: var(--border-size-2);
+
+    border-radius: var(--fgd-radius-feature);
+  }
+}
+
+@layer print {
+  @media print {
+    /* The seam is the printed ground-change rule (§1.4.5); the ground prints white. */
+    .band {
+      border-block-width: var(--border-size-1);
+      break-inside: auto;
+    }
+
+    /* A field keeps its edge on paper; the framed feature field keeps --border-size-2 [D95]. */
+    .field {
+      break-inside: avoid;
+    }
+  }
+}

package/foundations/ground/index.d.ts.map

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

package/foundations/ground/index.js.map

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

package/foundations/icon/Icon.d.ts

@@ -0,0 +1,49 @@
+import * as React from 'react';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName, type IconTier } from '../../icons/paths';
+export type { IconName, IconTier };
+/**
+ * Icon classes (§6.10) [D166]. `size` is the Material Symbols tier:
+ * `inline` 16 px (`--size-px-3`), `tag` 20 px (`--size-px-4`), `block` 36 px
+ * (`--fgd-size-icon-block`). The icon has no color axes: it is filled in
+ * `currentColor` and takes its part's ink role.
+ */
+export declare const icon: (props?: ({
+    size?: "inline" | "block" | "tag" | null | undefined;
+    directional?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+/**
+ * Which weight instance an icon draws (§10.1 icon states) [D166]:
+ * - `rest`: the tier's calibrated weight;
+ * - `emphasis`: the next stroke tier's weight at the same size, pinned;
+ * - `interactive`: rest, swapping to emphasis while an `iconHost` ancestor
+ *   is hovered or pressed.
+ */
+export type IconWeightState = 'rest' | 'emphasis' | 'interactive';
+/** Props for Icon: SVG props (without `children`, `color`, `fill` and `size`), the size tier, the name and the weight state. */
+export type IconProps = Omit<React.ComponentPropsWithRef<'svg'>, 'children' | 'color' | 'fill' | 'size'> & VariantProps<typeof icon> & {
+    /** The §6.10 inventory name (Material Symbols Rounded). */
+    name: IconName;
+    /**
+     * Accessible name. Omit it for an icon beside a visible label or inside
+     * a named control: the icon is then hidden from assistive technology.
+     */
+    label?: string;
+    /**
+     * `rest` (default) draws the tier's calibrated weight. `emphasis` pins
+     * the next stroke tier's weight at the same size, as the weight-change
+     * cue of a pressed or selected state. `interactive` draws rest and swaps
+     * to emphasis while an ancestor carrying `iconHost` is hovered or
+     * pressed; it ships both paths, so use it only inside such a host.
+     */
+    weight?: IconWeightState;
+};
+/**
+ * A Material Symbols Rounded UI icon, drawn as inline SVG in `currentColor`
+ * (FILL 0) at its tier's calibrated weight. The one FILL 1 instance,
+ * `circle`, is a selection mark only and must always travel with a second
+ * cue (a bar, a weight change, an edge change or a word): state is never
+ * shown by fill alone [D166].
+ */
+export declare function Icon({ name, label, size, directional, weight, className, ...rest }: IconProps): React.JSX.Element;
+//# sourceMappingURL=Icon.d.ts.map

package/foundations/icon/Icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.d.ts","sourceRoot":"","sources":["../../src/foundations/icon/Icon.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EAIL,KAAK,QAAQ,EACb,KAAK,QAAQ,EACd,MAAM,mBAAmB,CAAA;AAI1B,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,CAAA;AAElC;;;;;GAKG;AACH,eAAO,MAAM,IAAI;;;8EAef,CAAA;AAEF;;;;;;GAMG;AACH,MAAM,MAAM,eAAe,GAAG,MAAM,GAAG,UAAU,GAAG,aAAa,CAAA;AASjE,gIAAgI;AAChI,MAAM,MAAM,SAAS,GAAG,IAAI,CAC1B,KAAK,CAAC,qBAAqB,CAAC,KAAK,CAAC,EAClC,UAAU,GAAG,OAAO,GAAG,MAAM,GAAG,MAAM,CACvC,GACC,YAAY,CAAC,OAAO,IAAI,CAAC,GAAG;IAC1B,2DAA2D;IAC3D,IAAI,EAAE,QAAQ,CAAA;IACd;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd;;;;;;OAMG;IACH,MAAM,CAAC,EAAE,eAAe,CAAA;CACzB,CAAA;AAEH;;;;;;GAMG;AACH,wBAAgB,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,WAAW,EACX,MAAe,EACf,SAAS,EACT,GAAG,IAAI,EACR,EAAE,SAAS,qBA6BX"}

package/foundations/icon/Icon.js

@@ -0,0 +1,54 @@
+'use client';
+import * as React from 'react';
+import { cva } from 'class-variance-authority';
+import { iconPathsByWeight, iconTierWeights, iconViewBox, } from '../../icons/paths';
+import styles from './icon.module.css';
+/**
+ * Icon classes (§6.10) [D166]. `size` is the Material Symbols tier:
+ * `inline` 16 px (`--size-px-3`), `tag` 20 px (`--size-px-4`), `block` 36 px
+ * (`--fgd-size-icon-block`). The icon has no color axes: it is filled in
+ * `currentColor` and takes its part's ink role.
+ */
+export const icon = cva(styles.base, {
+    variants: {
+        size: {
+            inline: styles.inline,
+            tag: styles.tag,
+            block: styles.block,
+        },
+        directional: {
+            true: styles.directional,
+        },
+    },
+    defaultVariants: {
+        size: 'inline',
+        directional: false,
+    },
+});
+/** Glyphs that point along the inline axis, mirrored in right-to-left layouts (§6.10). */
+const directionalIcons = new Set([
+    'arrow_forward',
+    'chevron_left',
+    'chevron_right',
+]);
+/**
+ * A Material Symbols Rounded UI icon, drawn as inline SVG in `currentColor`
+ * (FILL 0) at its tier's calibrated weight. The one FILL 1 instance,
+ * `circle`, is a selection mark only and must always travel with a second
+ * cue (a bar, a weight change, an edge change or a word): state is never
+ * shown by fill alone [D166].
+ */
+export function Icon({ name, label, size, directional, weight = 'rest', className, ...rest }) {
+    const a11y = label
+        ? { role: 'img', 'aria-label': label }
+        : { 'aria-hidden': true };
+    const weights = iconTierWeights[size ?? 'inline'];
+    return (React.createElement("svg", { viewBox: iconViewBox, fill: "currentColor", focusable: "false", ...a11y, ...rest, className: icon({
+            size,
+            directional: directional ?? directionalIcons.has(name),
+            className,
+        }) }, weight === 'interactive' ? (React.createElement(React.Fragment, null,
+        React.createElement("path", { className: styles.rest, d: iconPathsByWeight[weights.rest][name] }),
+        React.createElement("path", { className: styles.emphasis, d: iconPathsByWeight[weights.emphasis][name] }))) : (React.createElement("path", { d: iconPathsByWeight[weights[weight]][name] }))));
+}
+//# sourceMappingURL=Icon.js.map

package/foundations/icon/Icon.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Icon.js","sourceRoot":"","sources":["../../src/foundations/icon/Icon.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAEjE,OAAO,EACL,iBAAiB,EACjB,eAAe,EACf,WAAW,GAGZ,MAAM,mBAAmB,CAAA;AAE1B,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAItC;;;;;GAKG;AACH,MAAM,CAAC,MAAM,IAAI,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IACnC,QAAQ,EAAE;QACR,IAAI,EAAE;YACJ,MAAM,EAAE,MAAM,CAAC,MAAM;YACrB,GAAG,EAAE,MAAM,CAAC,GAAG;YACf,KAAK,EAAE,MAAM,CAAC,KAAK;SACpB;QACD,WAAW,EAAE;YACX,IAAI,EAAE,MAAM,CAAC,WAAW;SACzB;KACF;IACD,eAAe,EAAE;QACf,IAAI,EAAE,QAAQ;QACd,WAAW,EAAE,KAAK;KACnB;CACF,CAAC,CAAA;AAWF,0FAA0F;AAC1F,MAAM,gBAAgB,GAA0B,IAAI,GAAG,CAAW;IAChE,eAAe;IACf,cAAc;IACd,eAAe;CAChB,CAAC,CAAA;AAyBF;;;;;;GAMG;AACH,MAAM,UAAU,IAAI,CAAC,EACnB,IAAI,EACJ,KAAK,EACL,IAAI,EACJ,WAAW,EACX,MAAM,GAAG,MAAM,EACf,SAAS,EACT,GAAG,IAAI,EACG;IACV,MAAM,IAAI,GAAG,KAAK;QAChB,CAAC,CAAE,EAAE,IAAI,EAAE,KAAK,EAAE,YAAY,EAAE,KAAK,EAAY;QACjD,CAAC,CAAE,EAAE,aAAa,EAAE,IAAI,EAAY,CAAA;IACtC,MAAM,OAAO,GAAG,eAAe,CAAC,IAAI,IAAI,QAAQ,CAAC,CAAA;IAEjD,OAAO,CACL,6BACE,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,cAAc,EACnB,SAAS,EAAC,OAAO,KACb,IAAI,KACJ,IAAI,EACR,SAAS,EAAE,IAAI,CAAC;YACd,IAAI;YACJ,WAAW,EAAE,WAAW,IAAI,gBAAgB,CAAC,GAAG,CAAC,IAAI,CAAC;YACtD,SAAS;SACV,CAAC,IAED,MAAM,KAAK,aAAa,CAAC,CAAC,CAAC,CAC1B;QACE,8BAAM,SAAS,EAAE,MAAM,CAAC,IAAI,EAAE,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,IAAI,CAAC,GAAI;QAC1E,8BAAM,SAAS,EAAE,MAAM,CAAC,QAAQ,EAAE,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,IAAI,CAAC,GAAI,CACjF,CACJ,CAAC,CAAC,CAAC,CACF,8BAAM,CAAC,EAAE,iBAAiB,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC,GAAI,CACtD,CACG,CACP,CAAA;AACH,CAAC"}

package/foundations/icon/icon.module.css

@@ -0,0 +1,69 @@
+/*
+ * Icon (§6.10, §1.5.12) [D166]. One Material Symbols Rounded instance per
+ * icon and weight, filled in currentColor, so it takes its part's ink role,
+ * follows the mode with no selector and prints black (12 / 15 / 27 pt = the
+ * px sizes at 0.75 pt per px, so no print rule is needed). The icon carries
+ * no color, mode or grade of its own, and never scales between tiers.
+ *
+ * Weight (§10.1 icon states). Each tier draws its calibrated rest weight;
+ * the emphasis instance is the next stroke tier's weight at the same size
+ * and optical size, never a larger glyph. An icon with
+ * weight="interactive" carries both paths and swaps to emphasis while its
+ * host is hovered or pressed. The host opts in by composing `iconHost` in a
+ * top-level rule (Lightning CSS rejects nested composes):
+ *   .base { composes: iconHost from '../icon/icon.module.css'; }
+ * or, from JS, by adding the exported `iconHost` class. Disabled and busy
+ * hosts keep the rest weight; focus rings the host, never the glyph.
+ */
+@layer base {
+  .base {
+    display: inline-block;
+    flex: none;
+    inline-size: var(--icon-size);
+    block-size: var(--icon-size);
+    fill: currentColor;
+    vertical-align: middle;
+  }
+
+  /* An interactive icon's emphasis path waits for its host. */
+  .emphasis {
+    display: none;
+  }
+}
+
+@layer variants {
+  /* Tiers (§6.10): inline 16, tag 20, block 36. */
+  .inline {
+    --icon-size: var(--size-px-3);
+  }
+
+  .tag {
+    --icon-size: var(--size-px-4);
+  }
+
+  .block {
+    --icon-size: var(--fgd-size-icon-block);
+  }
+
+  /* Directional glyphs mirror in right-to-left layouts (§6.10, §1.3.6). */
+  .directional:dir(rtl) {
+    scale: -1 1;
+  }
+}
+
+@layer states {
+  /*
+   * Hover (not disabled, not busy) and press (:active, or data-pressed where
+   * Base UI sets it): the emphasis instance replaces the rest one. The press
+   * colors (the inverse pair) belong to the host [D84].
+   */
+  .iconHost:not([data-disabled], :disabled, [aria-busy='true']):is(:hover, :active, [data-pressed])
+    .rest {
+    display: none;
+  }
+
+  .iconHost:not([data-disabled], :disabled, [aria-busy='true']):is(:hover, :active, [data-pressed])
+    .emphasis {
+    display: inline;
+  }
+}

package/foundations/icon/iconHost.d.ts

@@ -0,0 +1,9 @@
+/**
+ * The host class for `weight="interactive"` icons (§10.1 icon states). Add it
+ * to the element whose hover or press swaps the icon to its emphasis weight
+ * (a button, a cell, a link), or compose it in the host's module:
+ * `composes: iconHost from '../icon/icon.module.css'`. Kept out of the
+ * client module, so a server component reads the class name itself.
+ */
+export declare const iconHost: string;
+//# sourceMappingURL=iconHost.d.ts.map

package/foundations/icon/iconHost.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconHost.d.ts","sourceRoot":"","sources":["../../src/foundations/icon/iconHost.ts"],"names":[],"mappings":"AAEA;;;;;;GAMG;AACH,eAAO,MAAM,QAAQ,EAAE,MAAwB,CAAA"}

package/foundations/icon/iconHost.js

@@ -0,0 +1,10 @@
+import styles from './icon.module.css';
+/**
+ * The host class for `weight="interactive"` icons (§10.1 icon states). Add it
+ * to the element whose hover or press swaps the icon to its emphasis weight
+ * (a button, a cell, a link), or compose it in the host's module:
+ * `composes: iconHost from '../icon/icon.module.css'`. Kept out of the
+ * client module, so a server component reads the class name itself.
+ */
+export const iconHost = styles.iconHost;
+//# sourceMappingURL=iconHost.js.map

package/foundations/icon/iconHost.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"iconHost.js","sourceRoot":"","sources":["../../src/foundations/icon/iconHost.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAEtC;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAW,MAAM,CAAC,QAAQ,CAAA"}

package/foundations/icon/index.d.ts.map

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

package/foundations/icon/index.js.map

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

package/foundations/outline-morph/OutlineMorph.d.ts

@@ -0,0 +1,112 @@
+import * as React from 'react';
+import { type OutlineMorphDuration, type OutlineMorphRing } from './morphEngine';
+/** Options for `useOutlineMorph`. */
+export type UseOutlineMorphOptions = {
+    /** The popup's open state, as its root has it after each commit. */
+    open: boolean;
+    /**
+     * Run the morph. Default `true`; `false` leaves the popup's own open and
+     * close, and a change of `open` committed with it false happens that way.
+     */
+    enabled?: boolean;
+    /**
+     * How the trigger draws its focus ring. Default `focus-visible`: on the
+     * trigger while it matches `:focus-visible` (focus moves into the popup).
+     * `focus-within`: on a field's box whenever anything in it holds focus,
+     * pointer focus included (focus stays in its input).
+     */
+    ring?: OutlineMorphRing;
+    /**
+     * Durations in ms, overriding the tokens. Default: the trigger's
+     * `--fgd-duration-expand` (333) and `--fgd-duration-collapse` (200), read
+     * at each open and close; 0 turns the morph off.
+     */
+    duration?: OutlineMorphDuration;
+    /**
+     * A modal surface (a dialog, a sheet), whose frame sits in an
+     * `OutlineMorphLayer`: the durations default to the trigger's
+     * `--fgd-duration-expand-surface` (400) and
+     * `--fgd-duration-collapse-surface` (240). Default `false`.
+     */
+    surface?: boolean;
+};
+/** The refs `useOutlineMorph` returns: stable callbacks for the three elements. */
+export type OutlineMorphRefs = {
+    /** A trigger: its focus ring (or edge) is where the morph starts and lands. */
+    sourceRef: (element: HTMLElement | null) => void;
+    /** The popup: its border box and radius are the frame the morph grows into. */
+    targetRef: (element: HTMLElement | null) => void;
+    /** The overlay: pass to `OutlineMorphFrame`. */
+    frameRef: (element: HTMLElement | null) => void;
+    /** The popup's own tail, if it has one (an arrow): the cap copies it while the morph runs. */
+    tailSourceRef: (element: HTMLElement | null) => void;
+    /** The tail cap: pass to `OutlineMorphTail`, rendered after the frame. */
+    tailRef: (element: HTMLElement | null) => void;
+};
+/**
+ * Grows a trigger's focus ring into its popup's frame on open, and back on
+ * close. With a ring drawn (keyboard focus, or any focus in a field), the
+ * morph starts on it; without one (a pointer press), on the trigger's edge:
+ * its boxed edge, else its box in its fill, else (a text button, an
+ * underline, a bare glyph) its ring's box in its ink. The close lands on the
+ * ring when focus stays or returns with one (the trigger's own ring then
+ * shows in the same frame the overlay goes), else on the edge.
+ *
+ * Wire three refs: `sourceRef` on the trigger (several triggers may share
+ * one popup; the one marked open is used), `targetRef` on the popup,
+ * and `frameRef` on an `OutlineMorphFrame` rendered as the popup's sibling
+ * inside the element that positions it (e.g. Base UI's Positioner), so the
+ * frame is out of flow and moves with the popup. The popup's CSS must
+ * answer `[data-outline-morph]`: its border takes its face color and its
+ * own enter and exit transition is dropped.
+ */
+export declare function useOutlineMorph(options: UseOutlineMorphOptions): OutlineMorphRefs;
+/** Props for OutlineMorphFrame. */
+export type OutlineMorphFrameProps = {
+    /** `frameRef` from `useOutlineMorph`. */
+    ref: (element: HTMLElement | null) => void;
+    /** Extra class names, added after the module's own. */
+    className?: string;
+};
+/**
+ * The overlay the morph animates: an empty 2 px frame (the popup's own
+ * weight and color, read at run time), absolutely positioned, hidden
+ * unless a morph runs, `aria-hidden` and never hit-tested.
+ */
+export declare function OutlineMorphFrame(props: OutlineMorphFrameProps): React.JSX.Element;
+/** Props for OutlineMorphTail. */
+export type OutlineMorphTailProps = {
+    /** `tailRef` from `useOutlineMorph`. */
+    ref: (element: HTMLElement | null) => void;
+    /** The adopter's class: the tail's size, and its rotation per `data-side` as the popup's own tail. */
+    className?: string;
+    /** The same drawing as the popup's tail (e.g. `OverlayTail`), its fill and stroke answering the cap. */
+    children?: React.ReactNode;
+};
+/**
+ * The tail cap [§9.17]: the overlay's copy of a popup's tail, rendered
+ * after `OutlineMorphFrame` in the same container so it paints above the
+ * frame. While the morph runs it sits on the popup's own tail (hidden
+ * meanwhile) and shows only on the trigger side of the frame's trigger-
+ * facing edge, so the tail grows out of that edge as the frame arrives and
+ * is whole as it lands. Its stroke is `currentColor` (the frame's color on
+ * the same timing); its face is `--fgd-outline-morph-tail-fill` (the
+ * popup's). Hidden unless a morph runs, `aria-hidden`, never hit-tested. A
+ * popup without a tail never shows it.
+ */
+export declare function OutlineMorphTail(props: OutlineMorphTailProps): React.JSX.Element;
+/** Props for `OutlineMorphLayer`. */
+export type OutlineMorphLayerProps = {
+    /** Extra class names, added after the module's own (e.g. a `z-index` other than the modal layer's). */
+    className?: string;
+    /** The `OutlineMorphFrame`. */
+    children?: React.ReactNode;
+};
+/**
+ * The container a modal surface's frame sits in, since the surface has no
+ * positioner: fixed, the full viewport, above the surface (`--layer-4`, the
+ * dialogs' layer, rendered after the popup in its portal) and never hit
+ * tested, so the engine measures in viewport coordinates as they are.
+ */
+export declare function OutlineMorphLayer(props: OutlineMorphLayerProps): React.JSX.Element;
+//# sourceMappingURL=OutlineMorph.d.ts.map

package/foundations/outline-morph/OutlineMorph.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutlineMorph.d.ts","sourceRoot":"","sources":["../../src/foundations/outline-morph/OutlineMorph.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,EAEL,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACtB,MAAM,eAAe,CAAA;AA8CtB,qCAAqC;AACrC,MAAM,MAAM,sBAAsB,GAAG;IACnC,oEAAoE;IACpE,IAAI,EAAE,OAAO,CAAA;IACb;;;OAGG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB;;;;;OAKG;IACH,IAAI,CAAC,EAAE,gBAAgB,CAAA;IACvB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,oBAAoB,CAAA;IAC/B;;;;;OAKG;IACH,OAAO,CAAC,EAAE,OAAO,CAAA;CAClB,CAAA;AAED,mFAAmF;AACnF,MAAM,MAAM,gBAAgB,GAAG;IAC7B,+EAA+E;IAC/E,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAChD,+EAA+E;IAC/E,SAAS,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAChD,gDAAgD;IAChD,QAAQ,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC/C,8FAA8F;IAC9F,aAAa,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IACpD,0EAA0E;IAC1E,OAAO,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;CAC/C,CAAA;AAED;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,eAAe,CAAC,OAAO,EAAE,sBAAsB,GAAG,gBAAgB,CA8BjF;AAED,mCAAmC;AACnC,MAAM,MAAM,sBAAsB,GAAG;IACnC,yCAAyC;IACzC,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC1C,uDAAuD;IACvD,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,CAAA;AAED;;;;GAIG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAGlF;AAED,kCAAkC;AAClC,MAAM,MAAM,qBAAqB,GAAG;IAClC,wCAAwC;IACxC,GAAG,EAAE,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAA;IAC1C,sGAAsG;IACtG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,gBAAgB,CAAC,KAAK,EAAE,qBAAqB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAOhF;AAED,qCAAqC;AACrC,MAAM,MAAM,sBAAsB,GAAG;IACnC,uGAAuG;IACvG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,+BAA+B;IAC/B,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;CAC3B,CAAA;AAED;;;;;GAKG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,sBAAsB,GAAG,KAAK,CAAC,GAAG,CAAC,OAAO,CAOlF"}

package/foundations/outline-morph/OutlineMorph.js

@@ -0,0 +1,83 @@
+'use client';
+import * as React from 'react';
+import { cx } from '../../utils/className';
+import { EXPAND_DURATION_MS } from '../../utils/tokens';
+import { OutlineMorphController, } from './morphEngine';
+import styles from './outline-morph.module.css';
+/**
+ * Grows a trigger's focus ring into its popup's frame on open, and back on
+ * close. With a ring drawn (keyboard focus, or any focus in a field), the
+ * morph starts on it; without one (a pointer press), on the trigger's edge:
+ * its boxed edge, else its box in its fill, else (a text button, an
+ * underline, a bare glyph) its ring's box in its ink. The close lands on the
+ * ring when focus stays or returns with one (the trigger's own ring then
+ * shows in the same frame the overlay goes), else on the edge.
+ *
+ * Wire three refs: `sourceRef` on the trigger (several triggers may share
+ * one popup; the one marked open is used), `targetRef` on the popup,
+ * and `frameRef` on an `OutlineMorphFrame` rendered as the popup's sibling
+ * inside the element that positions it (e.g. Base UI's Positioner), so the
+ * frame is out of flow and moves with the popup. The popup's CSS must
+ * answer `[data-outline-morph]`: its border takes its face color and its
+ * own enter and exit transition is dropped.
+ */
+export function useOutlineMorph(options) {
+    const { open, enabled = true, ring = 'focus-visible', duration, surface = false } = options;
+    const [controller] = React.useState(() => new OutlineMorphController());
+    // Explicit durations only; otherwise the engine reads the tokens at each open and close.
+    const openMs = duration?.open;
+    const closeMs = duration?.close;
+    // A layout effect: both directions start in the commit that changes the popup, before it paints.
+    React.useLayoutEffect(() => {
+        controller.duration =
+            openMs === undefined && closeMs === undefined
+                ? undefined
+                : { open: openMs ?? EXPAND_DURATION_MS.open, close: closeMs ?? EXPAND_DURATION_MS.close };
+        controller.ring = ring;
+        controller.surface = surface;
+        controller.update(open, enabled);
+    }, [controller, open, enabled, ring, surface, openMs, closeMs]);
+    React.useEffect(() => () => controller.stop(), [controller]);
+    return React.useMemo(() => ({
+        sourceRef: controller.sourceRef,
+        targetRef: controller.targetRef,
+        frameRef: controller.frameRef,
+        tailSourceRef: controller.tailSourceRef,
+        tailRef: controller.tailRef,
+    }), [controller]);
+}
+/**
+ * The overlay the morph animates: an empty 2 px frame (the popup's own
+ * weight and color, read at run time), absolutely positioned, hidden
+ * unless a morph runs, `aria-hidden` and never hit-tested.
+ */
+export function OutlineMorphFrame(props) {
+    const { ref, className } = props;
+    return React.createElement("div", { ref: ref, "aria-hidden": "true", className: cx(styles.frame, className) });
+}
+/**
+ * The tail cap [§9.17]: the overlay's copy of a popup's tail, rendered
+ * after `OutlineMorphFrame` in the same container so it paints above the
+ * frame. While the morph runs it sits on the popup's own tail (hidden
+ * meanwhile) and shows only on the trigger side of the frame's trigger-
+ * facing edge, so the tail grows out of that edge as the frame arrives and
+ * is whole as it lands. Its stroke is `currentColor` (the frame's color on
+ * the same timing); its face is `--fgd-outline-morph-tail-fill` (the
+ * popup's). Hidden unless a morph runs, `aria-hidden`, never hit-tested. A
+ * popup without a tail never shows it.
+ */
+export function OutlineMorphTail(props) {
+    const { ref, className, children } = props;
+    return (React.createElement("div", { ref: ref, "aria-hidden": "true", className: cx(styles.tail, className) }, children));
+}
+/**
+ * The container a modal surface's frame sits in, since the surface has no
+ * positioner: fixed, the full viewport, above the surface (`--layer-4`, the
+ * dialogs' layer, rendered after the popup in its portal) and never hit
+ * tested, so the engine measures in viewport coordinates as they are.
+ */
+export function OutlineMorphLayer(props) {
+    const { className, children } = props;
+    return (React.createElement("div", { "aria-hidden": "true", className: cx(styles.layer, className) }, children));
+}
+//# sourceMappingURL=OutlineMorph.js.map

package/foundations/outline-morph/OutlineMorph.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"OutlineMorph.js","sourceRoot":"","sources":["../../src/foundations/outline-morph/OutlineMorph.tsx"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAE9B,OAAO,EAAE,EAAE,EAAE,MAAM,uBAAuB,CAAA;AAC1C,OAAO,EAAE,kBAAkB,EAAE,MAAM,oBAAoB,CAAA;AACvD,OAAO,EACL,sBAAsB,GAGvB,MAAM,eAAe,CAAA;AACtB,OAAO,MAAM,MAAM,4BAA4B,CAAA;AA0F/C;;;;;;;;;;;;;;;;GAgBG;AACH,MAAM,UAAU,eAAe,CAAC,OAA+B;IAC7D,MAAM,EAAE,IAAI,EAAE,OAAO,GAAG,IAAI,EAAE,IAAI,GAAG,eAAe,EAAE,QAAQ,EAAE,OAAO,GAAG,KAAK,EAAE,GAAG,OAAO,CAAA;IAC3F,MAAM,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC,QAAQ,CAAC,GAAG,EAAE,CAAC,IAAI,sBAAsB,EAAE,CAAC,CAAA;IACvE,yFAAyF;IACzF,MAAM,MAAM,GAAG,QAAQ,EAAE,IAAI,CAAA;IAC7B,MAAM,OAAO,GAAG,QAAQ,EAAE,KAAK,CAAA;IAE/B,iGAAiG;IACjG,KAAK,CAAC,eAAe,CAAC,GAAG,EAAE;QACzB,UAAU,CAAC,QAAQ;YACjB,MAAM,KAAK,SAAS,IAAI,OAAO,KAAK,SAAS;gBAC3C,CAAC,CAAC,SAAS;gBACX,CAAC,CAAC,EAAE,IAAI,EAAE,MAAM,IAAI,kBAAkB,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,IAAI,kBAAkB,CAAC,KAAK,EAAE,CAAA;QAC7F,UAAU,CAAC,IAAI,GAAG,IAAI,CAAA;QACtB,UAAU,CAAC,OAAO,GAAG,OAAO,CAAA;QAC5B,UAAU,CAAC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,CAAA;IAClC,CAAC,EAAE,CAAC,UAAU,EAAE,IAAI,EAAE,OAAO,EAAE,IAAI,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,CAAC,CAAC,CAAA;IAE/D,KAAK,CAAC,SAAS,CAAC,GAAG,EAAE,CAAC,GAAG,EAAE,CAAC,UAAU,CAAC,IAAI,EAAE,EAAE,CAAC,UAAU,CAAC,CAAC,CAAA;IAE5D,OAAO,KAAK,CAAC,OAAO,CAClB,GAAG,EAAE,CAAC,CAAC;QACL,SAAS,EAAE,UAAU,CAAC,SAAS;QAC/B,SAAS,EAAE,UAAU,CAAC,SAAS;QAC/B,QAAQ,EAAE,UAAU,CAAC,QAAQ;QAC7B,aAAa,EAAE,UAAU,CAAC,aAAa;QACvC,OAAO,EAAE,UAAU,CAAC,OAAO;KAC5B,CAAC,EACF,CAAC,UAAU,CAAC,CACb,CAAA;AACH,CAAC;AAUD;;;;GAIG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,GAAG,KAAK,CAAA;IAChC,OAAO,6BAAK,GAAG,EAAE,GAAG,iBAAc,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,GAAI,CAAA;AACrF,CAAC;AAYD;;;;;;;;;;GAUG;AACH,MAAM,UAAU,gBAAgB,CAAC,KAA4B;IAC3D,MAAM,EAAE,GAAG,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IAC1C,OAAO,CACL,6BAAK,GAAG,EAAE,GAAG,iBAAc,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,IAAI,EAAE,SAAS,CAAC,IACpE,QAAQ,CACL,CACP,CAAA;AACH,CAAC;AAUD;;;;;GAKG;AACH,MAAM,UAAU,iBAAiB,CAAC,KAA6B;IAC7D,MAAM,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,KAAK,CAAA;IACrC,OAAO,CACL,4CAAiB,MAAM,EAAC,SAAS,EAAE,EAAE,CAAC,MAAM,CAAC,KAAK,EAAE,SAAS,CAAC,IAC3D,QAAQ,CACL,CACP,CAAA;AACH,CAAC"}

package/foundations/outline-morph/index.d.ts

@@ -0,0 +1,3 @@
+export * from './OutlineMorph';
+export { OUTLINE_MORPH_ATTRIBUTE, OUTLINE_MORPH_PENDING_ATTRIBUTE, OUTLINE_MORPH_PROPERTY, canOutlineMorph, type OutlineMorphDuration, type OutlineMorphRing, } from './morphEngine';
+//# sourceMappingURL=index.d.ts.map

package/foundations/outline-morph/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/foundations/outline-morph/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACL,uBAAuB,EACvB,+BAA+B,EAC/B,sBAAsB,EACtB,eAAe,EACf,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,GACtB,MAAM,eAAe,CAAA"}

package/foundations/outline-morph/index.js

@@ -0,0 +1,3 @@
+export * from './OutlineMorph';
+export { OUTLINE_MORPH_ATTRIBUTE, OUTLINE_MORPH_PENDING_ATTRIBUTE, OUTLINE_MORPH_PROPERTY, canOutlineMorph, } from './morphEngine';
+//# sourceMappingURL=index.js.map

package/foundations/outline-morph/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/foundations/outline-morph/index.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAA;AAC9B,OAAO,EACL,uBAAuB,EACvB,+BAA+B,EAC/B,sBAAsB,EACtB,eAAe,GAGhB,MAAM,eAAe,CAAA"}