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

package/overlays/search-dialog/search-dialog.module.css

@@ -0,0 +1,492 @@
+/*
+ * Search dialog (§9.10 [D194]). CVA function `searchDialog` in
+ * SearchDialog.tsx, on the trigger and on the popup. Parts: base, trigger,
+ * triggerBox, triggerMain, magnifier, triggerLabel, kbd, backdrop,
+ * viewport, popup, box, inputRow, input, esc, escKey, closeIcon, results,
+ * scroll, list, group, groupLabel, item, itemHead, itemIcon, itemTitle,
+ * match, sectionTitle, score, description, empty, stats, statsText,
+ * visuallyHidden.
+ *
+ * The frame is the expanding box's: one radius (--xb-radius) and one
+ * --border-size-2 edge in both states, --role-rule on the trigger and
+ * --primary12 on the dialog. Below --md-n-above the dialog is the sheet:
+ * the same panel inset by the page margin and the safe areas; the face
+ * is --primary1. Rows, group labels, statuses and matches compose
+ * forms/search's parts; the dialog only adds its layout (full-bleed rows
+ * of two lines, sticky group labels). The backdrop is colorless: the frame,
+ * the inert page and the sheet carry the modal state [D24 → D121]. Motion
+ * is the morph, or none: without it the dialog opens and closes at once,
+ * never a fade [D91, D204].
+ * No view-transition name or class is written here: the box sets them per
+ * instance. Colors are role variables only; local custom properties carry
+ * dimensions only.
+ */
+
+/* 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. */
+.trigger {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.triggerLabel {
+  composes: typeBodyUi typeMuted from '../../utils/type.module.css';
+}
+
+.kbd,
+.escKey {
+  composes: typeData typeMuted from '../../utils/type.module.css';
+}
+
+.input {
+  composes: typeBodyUi from '../../utils/type.module.css';
+}
+
+.groupLabel {
+  composes: groupLabel from '../../forms/search/search.module.css';
+}
+
+.item {
+  composes: item from '../../forms/search/search.module.css';
+}
+
+.itemIcon {
+  composes: itemIcon from '../../forms/search/search.module.css';
+}
+
+.match {
+  composes: match from '../../forms/search/search.module.css';
+}
+
+.sectionTitle,
+.description {
+  composes: typeCaption typeMuted from '../../utils/type.module.css';
+}
+
+.score {
+  composes: typeData typeMuted from '../../utils/type.module.css';
+}
+
+.empty,
+.stats {
+  composes: status from '../../forms/search/search.module.css';
+}
+
+.statsText {
+  composes: typeMuted from '../../utils/type.module.css';
+}
+
+@layer base {
+  /* Both roots: nothing of their own beyond the scale classes. */
+  .base {
+    box-sizing: border-box;
+  }
+
+  /*
+   * The field-like trigger: --fgd-size-control-md tall, its hit area
+   * extended to --fgd-size-hit; the width of the site search field. The
+   * box draws its frame, hover edge step and focus ring (the host hands
+   * them over).
+   */
+  .trigger {
+    justify-content: center;
+    inline-size: min(100%, var(--size-px-14));
+    min-block-size: var(--fgd-size-control-md);
+    margin: 0;
+    color: var(--primary12);
+    text-align: start;
+    appearance: none;
+  }
+
+  .trigger::after {
+    content: '';
+    position: absolute;
+    inset-inline: 0;
+    inset-block: calc((var(--fgd-size-control-md) - var(--fgd-size-hit)) / 2);
+  }
+
+  .triggerBox {
+    justify-content: center;
+    padding-inline: var(--size-px-3);
+  }
+
+  /*
+   * The main piece: as tall as the trigger's content (inside the box's
+   * edge), so it rides into the input row at nearly one scale.
+   */
+  .triggerMain {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    min-block-size: calc(var(--fgd-size-control-md) - 2 * var(--xb-edge));
+  }
+
+  /* The magnifier: Material Symbols Rounded `search`, inline tier, decorative, --primary12 [D166]. */
+  .magnifier {
+    flex: none;
+    color: var(--primary12);
+  }
+
+  /*
+   * The label reserves --size-px-9 (64 px), more than "Search" takes in
+   * the UI face or its fallbacks, so where the trigger sizes to its content
+   * (the Navigation Bar's search slot) the web font arriving never changes
+   * its width and nothing beside it moves [D201, D203].
+   */
+  .triggerLabel {
+    flex: 1 1 auto;
+    min-inline-size: var(--size-px-9);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  /* The shortcut hint: a mono key cap on the field rule, from --lg-n-above; it rides the right edge. */
+  /*
+   * The hint: mono, so 6ch holds "Ctrl K" exactly; "⌘K" centers in the
+   * same box. The box is painted before the label is known, so the trigger
+   * keeps one width from the first paint [D201].
+   */
+  .kbd {
+    display: none;
+    flex: none;
+    box-sizing: content-box;
+    min-inline-size: 6ch;
+    padding-inline: var(--size-px-1);
+    text-align: center;
+    border: var(--border-size-1) solid var(--role-rule);
+    border-radius: var(--radius-1);
+    white-space: nowrap;
+  }
+
+  @media (min-width: 1024px) {
+    .kbd {
+      display: inline-block;
+    }
+  }
+
+  /* Colorless: it only catches outside presses. */
+  .backdrop {
+    position: fixed;
+    inset: 0;
+    z-index: var(--layer-4);
+  }
+
+  /* iOS Safari: a fixed backdrop leaves the bottom toolbar area uncovered. */
+  @supports (-webkit-touch-callout: none) {
+    .backdrop {
+      position: absolute;
+    }
+  }
+
+  /*
+   * The popup's frame of reference. At base, the whole screen less the page
+   * margin on every side, plus the safe areas; from --md-n-above,
+   * top-aligned.
+   */
+  .viewport {
+    position: fixed;
+    inset: 0;
+    z-index: var(--layer-4);
+    display: flex;
+    justify-content: center;
+    align-items: stretch;
+    box-sizing: border-box;
+    padding: calc(var(--fgd-space-margin) + env(safe-area-inset-top, 0px))
+      calc(var(--fgd-space-margin) + env(safe-area-inset-right, 0px))
+      calc(var(--fgd-space-margin) + env(safe-area-inset-bottom, 0px))
+      calc(var(--fgd-space-margin) + env(safe-area-inset-left, 0px));
+    overflow: hidden;
+  }
+
+  @media (min-width: 768px) {
+    .viewport {
+      align-items: flex-start;
+      padding-block: var(--size-px-5);
+      padding-inline: 0;
+    }
+  }
+
+  /*
+   * The popup hosts the expanded box. At base, the sheet: the inset panel,
+   * filling the viewport inside its padding and scrolling inside; from
+   * --md-n-above, the centered panel in the Dialog `wide` width, as tall as
+   * its results (it scrolls inside).
+   */
+  .popup {
+    inline-size: 100%;
+    block-size: 100%;
+    max-block-size: 100%;
+    margin: 0;
+    color: var(--primary12);
+    outline: 0;
+  }
+
+  @media (min-width: 768px) {
+    .popup {
+      inline-size: min(var(--fgd-measure-reading), calc(100% - 2 * var(--size-px-7-5)));
+      block-size: auto;
+    }
+  }
+
+  /*
+   * The expanded box's content: the input row, the results, the stats row.
+   * The box insets it by its frame's edge.
+   */
+  .box {
+    min-block-size: 0;
+  }
+
+  /* The input row: the dialog's main piece; the ring shows round it on any focus of the input [D90]. */
+  .inputRow {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    box-sizing: border-box;
+    min-block-size: var(--fgd-size-hit);
+    margin: var(--size-px-2);
+    padding-inline: var(--size-px-2-5) var(--size-px-2);
+    border-radius: var(--radius-1);
+    cursor: text;
+  }
+
+  .input {
+    flex: 1 1 auto;
+    align-self: stretch;
+    min-inline-size: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: none;
+    color: var(--primary12);
+    outline: 0;
+    appearance: none;
+  }
+
+  .input::placeholder {
+    color: var(--role-muted);
+    opacity: 1;
+  }
+
+  /* "esc": a key cap that closes, from --lg-n-above with the shortcut; it rides the right edge. */
+  .esc {
+    display: none;
+    position: relative;
+    flex: none;
+    align-items: center;
+    box-sizing: border-box;
+    margin: 0;
+    padding: var(--size-px-1) var(--size-px-2);
+    border: var(--border-size-1) solid var(--role-rule);
+    border-radius: var(--radius-1);
+    background: none;
+    font: inherit;
+    cursor: default;
+  }
+
+  /* Every target reaches --fgd-size-hit (§9.1) [D43]. */
+  .esc::after {
+    content: '';
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    inline-size: var(--fgd-size-hit);
+    block-size: var(--fgd-size-hit);
+    min-inline-size: 100%;
+    min-block-size: 100%;
+    translate: -50% -50%;
+  }
+
+  @media (min-width: 1024px) {
+    .esc {
+      display: inline-flex;
+    }
+  }
+
+  /* "Close search": an icon-only Button (its hit area reaches --fgd-size-hit); it rides the right edge. */
+  .closeIcon {
+    flex: none;
+  }
+
+  /* The results: the extra piece, under a --border-size-1 rule, full bleed; the list scrolls inside. */
+  .results {
+    display: flex;
+    flex-direction: column;
+    flex: 1 1 auto;
+    min-block-size: 0;
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  .scroll {
+    flex: 1 1 auto;
+    min-block-size: 0;
+  }
+
+  /* The keyboard highlight scrolls clear of the sticky group label. */
+  .scroll > :first-child {
+    scroll-padding-block: var(--size-px-7-5) var(--size-px-1);
+  }
+
+  .list {
+    padding: var(--size-px-1);
+    outline: 0;
+  }
+
+  .list:empty {
+    padding: 0;
+  }
+
+  .group {
+    display: block;
+  }
+
+  /* Group labels stick to the top while their rows scroll under them: the face, and a rule underneath. */
+  .list .groupLabel {
+    position: sticky;
+    inset-block-start: 0;
+    z-index: 1;
+    margin: 0;
+    background-color: var(--primary1);
+    border-block-end: var(--border-size-1) solid var(--role-rule);
+  }
+
+  /* Rows: a link of two lines (title row, then a page's description). */
+  .list .item {
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: center;
+    gap: var(--size-px-1);
+    padding-block: var(--size-px-2);
+  }
+
+  .itemHead {
+    display: flex;
+    align-items: center;
+    gap: var(--size-px-2);
+    min-inline-size: 0;
+  }
+
+  .itemTitle {
+    min-inline-size: 0;
+    color: var(--primary12);
+    overflow-wrap: anywhere;
+  }
+
+  .sectionTitle {
+    text-transform: capitalize;
+  }
+
+  .score {
+    margin-inline-start: auto;
+  }
+
+  /* "No results for '[query]'": a plain-word status, never a red error (P10). */
+  .scroll .empty:not(:empty) {
+    padding: var(--size-px-5) var(--size-px-3);
+    text-align: center;
+  }
+
+  /* The stats row: under a rule, end-aligned; hidden (its height kept) while there are no stats. */
+  .box .stats:not(:empty) {
+    display: flex;
+    justify-content: flex-end;
+    padding: var(--size-px-1) var(--size-px-3);
+    border-block-start: var(--border-size-1) solid var(--role-rule);
+  }
+
+  .visuallyHidden {
+    position: absolute;
+    inline-size: 1px;
+    block-size: 1px;
+    margin: -1px;
+    padding: 0;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    .esc {
+      transition: border-color var(--fgd-duration-quick) var(--ease-out-3);
+    }
+  }
+}
+
+@layer variants {
+  /*
+   * One visible close at every width, riding the right edge: the "Close
+   * search" button (the sheet, the panel below --lg-n-above, and the panel
+   * without the shortcut), or from --lg-n-above with the shortcut the esc
+   * key cap in its place.
+   */
+  @media (min-width: 1024px) {
+    .esc ~ .closeIcon {
+      display: none;
+    }
+  }
+}
+
+@layer states {
+  /* While the dialog is open the trigger keeps its place, hidden; its box keeps its names valid. */
+  .trigger[aria-expanded='true'] {
+    visibility: hidden;
+  }
+
+  .inputRow:has(.input:focus) {
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: 0;
+  }
+
+  /*
+   * While the expanding box opens, the input row's ring waits and appears
+   * in place as the box lands [D196, D205]. The row is the box's main
+   * piece, whose image keeps its proportions and hugs the left edge, so
+   * while the box is narrower the image runs past its right edge: a ring
+   * drawn on it would travel in from the side, outside the frame.
+   */
+  :global(:root[data-fgd-expanding]) .inputRow:has(.input:focus) {
+    outline-style: none;
+  }
+
+  .esc:hover:not(:focus-visible) {
+    border-color: var(--primary12);
+  }
+
+  .esc:focus-visible {
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: var(--fgd-focus-offset);
+  }
+
+  /* Focus parked on the popup itself: the ring sits inside the frame, on the box's radius (the host publishes --xb-radius). */
+  .popup:focus-visible {
+    outline: var(--fgd-focus-width) solid var(--primary12);
+    outline-offset: calc(-2 * var(--fgd-focus-width));
+    border-radius: var(--xb-radius);
+  }
+
+  /*
+   * The morph owns the motion while it runs; without it the dialog opens and
+   * closes at once (no reveal of its own) [D204]. The closing popup hides at
+   * once, since the root snapshot does not crossfade.
+   */
+  :root[data-fgd-expanding] .popup[data-closed],
+  :root[data-fgd-expanding] .popup[data-ending-style] {
+    visibility: hidden;
+  }
+
+  .statsText[data-hidden] {
+    visibility: hidden;
+  }
+}
+
+@layer print {
+  @media print {
+    /* Interaction only: neither the trigger nor the dialog prints. */
+    .trigger,
+    .backdrop,
+    .viewport {
+      display: none;
+    }
+  }
+}

package/overlays/search-dialog/useShortcutLabel.d.ts

@@ -0,0 +1,13 @@
+/** The hint's visible text and its `aria-keyshortcuts` value. */
+export type ShortcutLabel = {
+    /** "⌘K" on Apple platforms, "Ctrl K" elsewhere. */
+    label: string;
+    /** "Meta+K" or "Control+K". */
+    aria: string;
+};
+/**
+ * The ⌘K / Ctrl K hint. `null` on the server and during hydration, so the
+ * server markup never names the wrong platform; the client fills it in.
+ */
+export declare function useShortcutLabel(): ShortcutLabel | null;
+//# sourceMappingURL=useShortcutLabel.d.ts.map

package/overlays/search-dialog/useShortcutLabel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShortcutLabel.d.ts","sourceRoot":"","sources":["../../src/overlays/search-dialog/useShortcutLabel.ts"],"names":[],"mappings":"AASA,iEAAiE;AACjE,MAAM,MAAM,aAAa,GAAG;IAC1B,mDAAmD;IACnD,KAAK,EAAE,MAAM,CAAA;IACb,+BAA+B;IAC/B,IAAI,EAAE,MAAM,CAAA;CACb,CAAA;AAgBD;;;GAGG;AACH,wBAAgB,gBAAgB,IAAI,aAAa,GAAG,IAAI,CAMvD"}

package/overlays/search-dialog/useShortcutLabel.js

@@ -0,0 +1,19 @@
+'use client';
+import * as React from 'react';
+const apple = { label: '⌘K', aria: 'Meta+K' };
+const other = { label: 'Ctrl K', aria: 'Control+K' };
+function isApplePlatform() {
+    const nav = navigator;
+    const platform = nav.userAgentData?.platform || nav.platform || nav.userAgent;
+    return /mac|iphone|ipad|ipod/i.test(platform);
+}
+// The platform never changes while the page is open.
+const subscribe = () => () => { };
+/**
+ * The ⌘K / Ctrl K hint. `null` on the server and during hydration, so the
+ * server markup never names the wrong platform; the client fills it in.
+ */
+export function useShortcutLabel() {
+    return React.useSyncExternalStore(subscribe, () => (isApplePlatform() ? apple : other), () => null);
+}
+//# sourceMappingURL=useShortcutLabel.js.map

package/overlays/search-dialog/useShortcutLabel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useShortcutLabel.js","sourceRoot":"","sources":["../../src/overlays/search-dialog/useShortcutLabel.ts"],"names":[],"mappings":"AAAA,YAAY,CAAA;AAEZ,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAe9B,MAAM,KAAK,GAAkB,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAA;AAC5D,MAAM,KAAK,GAAkB,EAAE,KAAK,EAAE,QAAQ,EAAE,IAAI,EAAE,WAAW,EAAE,CAAA;AAInE,SAAS,eAAe;IACtB,MAAM,GAAG,GAAG,SAAgC,CAAA;IAC5C,MAAM,QAAQ,GAAG,GAAG,CAAC,aAAa,EAAE,QAAQ,IAAI,GAAG,CAAC,QAAQ,IAAI,GAAG,CAAC,SAAS,CAAA;IAC7E,OAAO,uBAAuB,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;AAC/C,CAAC;AAED,qDAAqD;AACrD,MAAM,SAAS,GAAG,GAAG,EAAE,CAAC,GAAG,EAAE,GAAE,CAAC,CAAA;AAEhC;;;GAGG;AACH,MAAM,UAAU,gBAAgB;IAC9B,OAAO,KAAK,CAAC,oBAAoB,CAC/B,SAAS,EACT,GAAG,EAAE,CAAC,CAAC,eAAe,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC,CAAC,CAAC,KAAK,CAAC,EACzC,GAAG,EAAE,CAAC,IAAI,CACX,CAAA;AACH,CAAC"}

package/overlays/search-dialog/variants.d.ts

@@ -0,0 +1,25 @@
+import { type VariantProps } from 'class-variance-authority';
+/**
+ * On both roots: the trigger (the page scope) and the popup (the overlay
+ * scope). Axes: `primary`, `secondary` → scales module classes, never
+ * defaulted [D133].
+ */
+export declare const searchDialog: (props?: ({
+    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;
+/** The color axes of `searchDialog`. */
+export type SearchDialogVariants = VariantProps<typeof searchDialog>;
+/**
+ * Row icons by the engine's result `type`: page `description`, part
+ * `widgets`, export `deployed_code`, section `format_h2`, subsection
+ * `format_h3`.
+ */
+export declare const searchDialogTypeIcons: {
+    readonly page: "description";
+    readonly part: "widgets";
+    readonly export: "deployed_code";
+    readonly section: "format_h2";
+    readonly subsection: "format_h3";
+};
+//# sourceMappingURL=variants.d.ts.map

package/overlays/search-dialog/variants.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.d.ts","sourceRoot":"","sources":["../../src/overlays/search-dialog/variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAYjE;;;;GAIG;AACH,eAAO,MAAM,YAAY;;;8EAKvB,CAAA;AAEF,wCAAwC;AACxC,MAAM,MAAM,oBAAoB,GAAG,YAAY,CAAC,OAAO,YAAY,CAAC,CAAA;AAEpE;;;;GAIG;AACH,eAAO,MAAM,qBAAqB;;;;;;CAMmC,CAAA"}

package/overlays/search-dialog/variants.js

@@ -0,0 +1,31 @@
+import { cva } from 'class-variance-authority';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import styles from './search-dialog.module.css';
+/*
+ * The search dialog's shared pieces: the CVA function and the row icons.
+ * A plain module (not a client one), so a server component reads them too.
+ */
+/**
+ * On both roots: the trigger (the page scope) and the popup (the overlay
+ * scope). Axes: `primary`, `secondary` → scales module classes, never
+ * defaulted [D133].
+ */
+export const searchDialog = cva(styles.base, {
+    variants: {
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+});
+/**
+ * Row icons by the engine's result `type`: page `description`, part
+ * `widgets`, export `deployed_code`, section `format_h2`, subsection
+ * `format_h3`.
+ */
+export const searchDialogTypeIcons = {
+    page: 'description',
+    part: 'widgets',
+    export: 'deployed_code',
+    section: 'format_h2',
+    subsection: 'format_h3',
+};
+//# sourceMappingURL=variants.js.map

package/overlays/search-dialog/variants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"variants.js","sourceRoot":"","sources":["../../src/overlays/search-dialog/variants.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAqB,MAAM,0BAA0B,CAAA;AAIjE,OAAO,EAAE,oBAAoB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAA;AACjF,OAAO,MAAM,MAAM,4BAA4B,CAAA;AAE/C;;;GAGG;AAEH;;;;GAIG;AACH,MAAM,CAAC,MAAM,YAAY,GAAG,GAAG,CAAC,MAAM,CAAC,IAAI,EAAE;IAC3C,QAAQ,EAAE;QACR,OAAO,EAAE,oBAAoB;QAC7B,SAAS,EAAE,sBAAsB;KAClC;CACF,CAAC,CAAA;AAKF;;;;GAIG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACnC,IAAI,EAAE,aAAa;IACnB,IAAI,EAAE,SAAS;IACf,MAAM,EAAE,eAAe;IACvB,OAAO,EAAE,WAAW;IACpB,UAAU,EAAE,WAAW;CAC4C,CAAA"}

package/overlays/tooltip/Tooltip.d.ts

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { Tooltip as BaseTooltip } from '@base-ui/react/tooltip';
+import { type VariantProps } from 'class-variance-authority';
+import { TOOLTIP_DELAY_MS } from '../../utils/tokens';
+export declare const tooltip: (props?: ({
+    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;
+export declare const tooltipTrigger: (props?: ({
+    kind?: "label" | "term" | "hint" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+type TooltipVariants = VariantProps<typeof tooltip>;
+export type TooltipTriggerKind = NonNullable<VariantProps<typeof tooltipTrigger>['kind']>;
+/** The open delay, mirroring `--fgd-delay-tooltip` (500 ms, §1.5.15) [D175]. */
+export { TOOLTIP_DELAY_MS };
+/** Props for TooltipProvider: Base UI Tooltip Provider props. */
+export type TooltipProviderProps = BaseTooltip.Provider.Props;
+/**
+ * Shares the open delay across a group of triggers, such as a toolbar: the
+ * first tooltip opens after `--fgd-delay-tooltip` (500 ms), its neighbors
+ * open at once while one is showing.
+ */
+export declare function TooltipProvider({ delay, ...rest }: TooltipProviderProps): React.JSX.Element;
+/** Props for Tooltip: Base UI Tooltip Root props. */
+export type TooltipProps<Payload = unknown> = BaseTooltip.Root.Props<Payload>;
+/**
+ * One tooltip: a `TooltipTrigger` and a `TooltipPopup`. It opens on hover
+ * after 500 ms and on keyboard focus, appears instantly, stays open while the
+ * pointer moves onto it, and Esc dismisses it without moving focus. Touch
+ * screens never show it, so the trigger must make sense without it. It never
+ * prints: definitions behind terms must also exist as footnotes.
+ */
+export declare function Tooltip<Payload = unknown>(props: TooltipProps<Payload>): React.JSX.Element;
+/** Props for TooltipTrigger: Base UI Tooltip Trigger props plus the trigger form. */
+export type TooltipTriggerProps<Payload = unknown> = BaseTooltip.Trigger.Props<Payload> & {
+    /**
+     * `label` (default): the trigger is your control, passed through `render`
+     * (an icon-only Button); the popup text equals its accessible name.
+     * `hint`: a Material `help` glyph at the inline tier beside a label; the
+     * children become its visually hidden accessible name. `term`: the
+     * children, underlined in `line-dotted-fine` at a 2 px offset.
+     */
+    kind?: TooltipTriggerKind;
+};
+/**
+ * The element the tooltip names. With `kind="label"`, pass the control as
+ * `render`, e.g. `render={<Button iconOnly icon="search">Search</Button>}`.
+ * The hint glyph and the term underline follow the trigger's own ground.
+ */
+export declare function TooltipTrigger<Payload = unknown>(props: TooltipTriggerProps<Payload>): React.JSX.Element;
+/** Props for TooltipPopup: Base UI Tooltip Popup props plus placement and the color axes. */
+export type TooltipPopupProps = BaseTooltip.Popup.Props & Pick<BaseTooltip.Positioner.Props, 'side' | 'align'> & {
+    /**
+     * Primary Radix scale inside the popup's scope: face, edge and text.
+     * Omitted, the overlay scope's default applies; the popup never inherits
+     * the trigger's scales.
+     */
+    primary?: TooltipVariants['primary'];
+    /** Secondary Radix scale inside the popup's scope; no part uses it. */
+    secondary?: TooltipVariants['secondary'];
+    /** Props for the Base UI Portal, such as `container`. */
+    portalProps?: Omit<BaseTooltip.Portal.Props, 'children'>;
+};
+/**
+ * The popup: one short line of `type-caption` (three at most), at most
+ * `--fgd-size-tooltip` (280 px) wide, on the overlay scope's `--primary1` face inside a
+ * `--border-size-2` `--primary12` frame with `--radius-1`. It sits
+ * `--size-px-2` from the trigger (`side`, default `top`) and flips or shifts
+ * to stay inside the viewport.
+ */
+export declare function TooltipPopup(props: TooltipPopupProps): React.JSX.Element;
+//# sourceMappingURL=Tooltip.d.ts.map

package/overlays/tooltip/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/overlays/tooltip/Tooltip.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAA;AAC/D,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAYjE,OAAO,EAAE,gBAAgB,EAAE,MAAM,oBAAoB,CAAA;AA2BrD,eAAO,MAAM,OAAO;;;8EAKlB,CAAA;AAEF,eAAO,MAAM,cAAc;;8EAWzB,CAAA;AAEF,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,OAAO,CAAC,CAAA;AACnD,MAAM,MAAM,kBAAkB,GAAG,WAAW,CAAC,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,CAAC,CAAA;AAEzF,gFAAgF;AAChF,OAAO,EAAE,gBAAgB,EAAE,CAAA;AAK3B,iEAAiE;AACjE,MAAM,MAAM,oBAAoB,GAAG,WAAW,CAAC,QAAQ,CAAC,KAAK,CAAA;AAE7D;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,EAAE,KAAwB,EAAE,GAAG,IAAI,EAAE,EAAE,oBAAoB,qBAM1F;AAED,qDAAqD;AACrD,MAAM,MAAM,YAAY,CAAC,OAAO,GAAG,OAAO,IAAI,WAAW,CAAC,IAAI,CAAC,KAAK,CAAC,OAAO,CAAC,CAAA;AAE7E;;;;;;GAMG;AACH,wBAAgB,OAAO,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,EAAE,YAAY,CAAC,OAAO,CAAC,qBAEtE;AAED,qFAAqF;AACrF,MAAM,MAAM,mBAAmB,CAAC,OAAO,GAAG,OAAO,IAAI,WAAW,CAAC,OAAO,CAAC,KAAK,CAAC,OAAO,CAAC,GAAG;IACxF;;;;;;OAMG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAA;CAC1B,CAAA;AAED;;;;GAIG;AACH,wBAAgB,cAAc,CAAC,OAAO,GAAG,OAAO,EAAE,KAAK,EAAE,mBAAmB,CAAC,OAAO,CAAC,qBAyBpF;AAED,6FAA6F;AAC7F,MAAM,MAAM,iBAAiB,GAAG,WAAW,CAAC,KAAK,CAAC,KAAK,GACrD,IAAI,CAAC,WAAW,CAAC,UAAU,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAAC,GAAG;IACrD;;;;OAIG;IACH,OAAO,CAAC,EAAE,eAAe,CAAC,SAAS,CAAC,CAAA;IACpC,uEAAuE;IACvE,SAAS,CAAC,EAAE,eAAe,CAAC,WAAW,CAAC,CAAA;IACxC,yDAAyD;IACzD,WAAW,CAAC,EAAE,IAAI,CAAC,WAAW,CAAC,MAAM,CAAC,KAAK,EAAE,UAAU,CAAC,CAAA;CACzD,CAAA;AAEH;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,KAAK,EAAE,iBAAiB,qBAkCpD"}