@fairgarden/design 0.1.0-alpha.0

package/components/ScrollArea/ScrollArea.d.ts

@@ -0,0 +1,67 @@
+import * as React from 'react';
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+import { type VariantProps } from 'class-variance-authority';
+export declare const scrollArea: (props?: ({
+    kind?: "wide" | "panel" | "rail" | 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 ScrollAreaVariants = VariantProps<typeof scrollArea>;
+/** Props for ScrollArea: Base UI Scroll Area Root props plus the kind and color axes. */
+export type ScrollAreaProps = BaseScrollArea.Root.Props & {
+    /**
+     * `panel` (default): vertical; the scrollbar shows on hover, focus and
+     * scroll; the area caps at 50% of the viewport height (`maxBlockSize`
+     * changes the cap).
+     * `wide`: horizontal, the scrollbar always visible (wide tables).
+     * `rail`: horizontal, a 2 px progress rail whose thumb equals the visible
+     * fraction (carousels and removable-chip rows).
+     */
+    kind?: ScrollAreaVariants['kind'];
+    /**
+     * Primary Radix scale: every part (track, thumb, edges, focus ring). Never
+     * defaulted; omitted, it inherits the scope [D133].
+     */
+    primary?: ScrollAreaVariants['primary'];
+    /** Secondary Radix scale: unused by the scroll area. Never defaulted. */
+    secondary?: ScrollAreaVariants['secondary'];
+    /**
+     * Accessible name for the scrollable region. Given, the viewport becomes a
+     * named `region`; the viewport is focusable whenever it scrolls.
+     */
+    label?: string;
+    /** Ref to the scrolling viewport, e.g. to scroll it from Prev/Next buttons. */
+    viewportRef?: React.Ref<HTMLDivElement>;
+    /** Class for the content wrapper, the layout box of the children. */
+    contentClassName?: string;
+    /**
+     * The area's maximum block size, a CSS length such as
+     * `calc(var(--available-height) - 2px)` (a number is px). Default: 50dvh
+     * for `panel`, none for `wide` and `rail`.
+     */
+    maxBlockSize?: string | number;
+    /**
+     * `true` (default): the viewport joins the tab order whenever it scrolls,
+     * so a keyboard can scroll it (§10.19). `false` keeps it out, for content
+     * whose own items are the focus stops and scroll themselves into view
+     * (a tab list).
+     */
+    focusable?: boolean;
+    /**
+     * `true` (default): the content is at least as wide as its children, so
+     * wide content scrolls. `false`: the content keeps the viewport's width
+     * and its children overflow it, so their percentages resolve against the
+     * viewport (a carousel track).
+     */
+    fitContent?: boolean;
+};
+/**
+ * A Base UI Scroll Area. Overflow is shown by a hard `--border-size-2`
+ * `--role-rule` edge on each side with hidden content, never a fade
+ * [D21, D68], and by a hairline track with a `--role-rule` thumb. Content
+ * prints at full height with the scrollbars and edges hidden. Don't nest
+ * two scroll areas on the same axis.
+ */
+export declare function ScrollArea(props: ScrollAreaProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=ScrollArea.d.ts.map

package/components/ScrollArea/ScrollArea.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../../src/components/ScrollArea/ScrollArea.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAC9B,OAAO,EAAE,UAAU,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAA;AACzE,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAA;AAoCjE,eAAO,MAAM,UAAU;;;;8EAcrB,CAAA;AAEF,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAA;AAEzD,yFAAyF;AACzF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,IAAI,CAAC,KAAK,GAAG;IACxD;;;;;;;OAOG;IACH,IAAI,CAAC,EAAE,kBAAkB,CAAC,MAAM,CAAC,CAAA;IACjC;;;OAGG;IACH,OAAO,CAAC,EAAE,kBAAkB,CAAC,SAAS,CAAC,CAAA;IACvC,yEAAyE;IACzE,SAAS,CAAC,EAAE,kBAAkB,CAAC,WAAW,CAAC,CAAA;IAC3C;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,+EAA+E;IAC/E,WAAW,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,cAAc,CAAC,CAAA;IACvC,qEAAqE;IACrE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;OAIG;IACH,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAC9B;;;;;OAKG;IACH,SAAS,CAAC,EAAE,OAAO,CAAA;IACnB;;;;;OAKG;IACH,UAAU,CAAC,EAAE,OAAO,CAAA;CACrB,CAAA;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,KAAK,EAAE,eAAe,qBAwEhD"}

package/components/ScrollArea/ScrollArea.js

@@ -0,0 +1,87 @@
+'use client';
+import * as React from 'react';
+import { ScrollArea as BaseScrollArea } from '@base-ui/react/scroll-area';
+import { cva } from 'class-variance-authority';
+import { cx, resolveClassName } from '../../utils/className';
+import { primaryScaleVariants, secondaryScaleVariants } from '../../utils/scales';
+import { useScopeAttributes } from '../../utils/scope';
+import styles from './scroll-area.module.css';
+/*
+ * Scroll Area (§10.19): bounded overflow for popup lists, dialog bodies,
+ * wide tables (§8.2), carousels (§12.4) and removable-chip rows. Never for
+ * whole pages or reading columns.
+ *
+ * Implementation (CSS Modules + CVA)
+ * - Module: scroll-area.module.css; CVA function `scrollArea`.
+ * - Axes: `kind` → panel | wide | rail (panel: vertical, scrollbar on
+ *   hover, focus and scroll; wide: horizontal, scrollbar always visible;
+ *   rail: the 2 px progress rail) [D155]; `primary`, `secondary` → scales
+ *   module classes (`secondary` unused).
+ * - Compound variants: none.
+ * - Defaults: kind panel; color axes none [D133].
+ * - Color fallback: inherits the scope.
+ * - States: Scrollbar `data-orientation` → its edge; `data-hovering`,
+ *   `data-scrolling` → the panel scrollbar shows and the thumb widens;
+ *   Thumb `:active` → --primary12; Root `data-has-overflow-x/-y` → the
+ *   gutter is reserved; `data-overflow-{x,y}-{start,end}` → each `edge`
+ *   rule; Viewport `:focus-visible` → ring.
+ * - Parts: base, viewport, content, scrollbar, thumb, corner, edge
+ *   (edgeStart, edgeEnd).
+ * - Scope: none.
+ * - Container: none; inherits its context.
+ *
+ * Hook for composed components: `--scroll-area-edge-start: none` on the
+ * root hides the start edge, for a table whose pinned column draws that
+ * edge itself (§8.2). `maxBlockSize` writes `--scroll-area-max-block`, the
+ * root's cap (50dvh on a panel by default).
+ */
+export const scrollArea = cva(styles.base, {
+    variants: {
+        kind: {
+            panel: styles.panel,
+            wide: styles.wide,
+            rail: styles.rail,
+        },
+        // Color axes: never defaulted, so an omitted prop inherits the scope [D133].
+        primary: primaryScaleVariants,
+        secondary: secondaryScaleVariants,
+    },
+    defaultVariants: {
+        kind: 'panel',
+    },
+});
+/**
+ * A Base UI Scroll Area. Overflow is shown by a hard `--border-size-2`
+ * `--role-rule` edge on each side with hidden content, never a fade
+ * [D21, D68], and by a hairline track with a `--role-rule` thumb. Content
+ * prints at full height with the scrollbars and edges hidden. Don't nest
+ * two scroll areas on the same axis.
+ */
+export function ScrollArea(props) {
+    const { kind, primary, secondary, label, viewportRef, contentClassName, maxBlockSize, focusable = true, fitContent = true, className, style, children, ...rest } = props;
+    const scope = useScopeAttributes();
+    const orientation = (kind ?? 'panel') === 'panel' ? 'vertical' : 'horizontal';
+    const variants = { kind, primary, secondary };
+    const resolvedClassName = resolveClassName(className, (extra) => scrollArea({ ...variants, className: extra }));
+    const named = label ? { role: 'region', 'aria-label': label } : null;
+    // The cap is a local dimension on the root; the kind classes read it.
+    const cap = maxBlockSize == null
+        ? null
+        : {
+            '--scroll-area-max-block': typeof maxBlockSize === 'number' ? `${maxBlockSize}px` : maxBlockSize,
+        };
+    const resolvedStyle = cap == null
+        ? style
+        : typeof style === 'function'
+            ? (state) => ({ ...style(state), ...cap })
+            : { ...style, ...cap };
+    return (React.createElement(BaseScrollArea.Root, { ...rest, ...scope, className: resolvedClassName, style: resolvedStyle },
+        React.createElement(BaseScrollArea.Viewport, { ref: viewportRef, className: styles.viewport, ...named, ...(focusable ? null : { tabIndex: -1 }) },
+            React.createElement(BaseScrollArea.Content, { className: cx(styles.content, contentClassName), ...(fitContent ? null : { style: { minWidth: 0 } }) }, children)),
+        React.createElement(BaseScrollArea.Scrollbar, { orientation: orientation, className: styles.scrollbar },
+            React.createElement(BaseScrollArea.Thumb, { className: styles.thumb })),
+        React.createElement(BaseScrollArea.Corner, { className: styles.corner }),
+        React.createElement("span", { className: `${styles.edge} ${styles.edgeStart}`, "aria-hidden": "true" }),
+        React.createElement("span", { className: `${styles.edge} ${styles.edgeEnd}`, "aria-hidden": "true" })));
+}
+//# sourceMappingURL=ScrollArea.js.map

package/components/ScrollArea/ScrollArea.js.map

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

package/components/ScrollArea/index.d.ts

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

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

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

package/components/ScrollArea/index.js

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

package/components/ScrollArea/index.js.map

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

package/components/ScrollArea/scroll-area.module.css

@@ -0,0 +1,247 @@
+/*
+ * Scroll Area (§10.19). CVA function `scrollArea`.
+ * Parts: `base` (Root, the positioned frame), `viewport`, `content`,
+ * `scrollbar` (the gutter and its centered hairline track), `thumb`,
+ * `corner`, and `edge` (`edgeStart`, `edgeEnd`): the hard overflow rules,
+ * never a fade [D21, D68]. Colors are role variables only; local custom
+ * properties carry dimensions only.
+ *
+ * Local properties:
+ *   --scroll-area-gutter      the scrollbar gutter, reserved so content never shifts
+ *   --scroll-area-thumb       thumb thickness; widens on hover and drag
+ *   --scroll-area-edge-start  `none` hides the start edge (a pinned table column draws it)
+ *   --scroll-area-max-block   the root's cap, written by the `maxBlockSize` prop
+ */
+
+@layer base {
+  .base {
+    --scroll-area-gutter: var(--ds-space-12);
+    --scroll-area-thumb: var(--size-px-1);
+
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    max-block-size: var(--scroll-area-max-block, none);
+  }
+
+  .viewport {
+    flex: 1 1 auto;
+    min-block-size: 0;
+    min-inline-size: 0;
+    overscroll-behavior: contain;
+  }
+
+  /* The gutter: a centered --border-size-1 --role-hairline track. */
+  .scrollbar {
+    display: flex;
+    box-sizing: border-box;
+  }
+
+  .scrollbar::before {
+    content: '';
+    position: absolute;
+    border: 0 solid var(--role-hairline);
+    pointer-events: none;
+  }
+
+  .scrollbar[data-orientation='vertical'] {
+    justify-content: center;
+    inline-size: var(--scroll-area-gutter);
+  }
+
+  .scrollbar[data-orientation='vertical']::before {
+    inset-block: 0;
+    inset-inline-start: calc(50% - var(--border-size-1) / 2);
+    border-inline-start-width: var(--border-size-1);
+  }
+
+  .scrollbar[data-orientation='horizontal'] {
+    align-items: center;
+    block-size: var(--scroll-area-gutter);
+  }
+
+  .scrollbar[data-orientation='horizontal']::before {
+    inset-inline: 0;
+    inset-block-start: calc(50% - var(--border-size-1) / 2);
+    border-block-start-width: var(--border-size-1);
+  }
+
+  /* The thumb: --role-rule, --radius-round; its fill is its own edge (≥ 3:1) [D12]. */
+  .thumb {
+    position: relative;
+    flex: none;
+    border-radius: var(--radius-round);
+    background-color: var(--role-rule);
+  }
+
+  .scrollbar[data-orientation='vertical'] .thumb {
+    inline-size: var(--scroll-area-thumb);
+  }
+
+  .scrollbar[data-orientation='horizontal'] .thumb {
+    block-size: var(--scroll-area-thumb);
+  }
+
+  .corner {
+    display: none;
+  }
+
+  /* Overflow edges: shown per side by the states layer. */
+  .edge {
+    display: none;
+    position: absolute;
+    border: 0 solid var(--role-rule);
+    pointer-events: none;
+  }
+
+  @media (forced-colors: active) {
+    .thumb {
+      forced-color-adjust: none;
+      background-color: CanvasText;
+    }
+  }
+}
+
+@layer variants {
+  /* Panel: vertical, capped at half the viewport unless `maxBlockSize` sets the cap; the gutter always reserved. */
+  .panel {
+    max-block-size: var(--scroll-area-max-block, 50dvh);
+  }
+
+  .panel .viewport {
+    padding-inline-end: var(--scroll-area-gutter);
+  }
+
+  .panel .edgeStart {
+    inset-block-start: 0;
+    inset-inline: 0 var(--scroll-area-gutter);
+    border-block-start-width: var(--border-size-2);
+  }
+
+  .panel .edgeEnd {
+    inset-block-end: 0;
+    inset-inline: 0 var(--scroll-area-gutter);
+    border-block-end-width: var(--border-size-2);
+  }
+
+  /* Wide and rail: horizontal; scroll-snap follows the content's own snap points. */
+  .wide .viewport {
+    scroll-snap-type: x proximity;
+  }
+
+  .rail .viewport {
+    scroll-snap-type: x mandatory;
+  }
+
+  .wide .edgeStart,
+  .rail .edgeStart {
+    inset-inline-start: 0;
+    inset-block: 0 var(--scroll-area-gutter);
+    border-inline-start-width: var(--border-size-2);
+  }
+
+  .wide .edgeEnd,
+  .rail .edgeEnd {
+    inset-inline-end: 0;
+    inset-block: 0 var(--scroll-area-gutter);
+    border-inline-end-width: var(--border-size-2);
+  }
+
+  /* Rail: a --border-size-2 --role-hairline track with a --primary12 thumb, square ends. */
+  .rail .scrollbar::before {
+    inset-block-start: calc(50% - var(--border-size-2) / 2);
+    border-block-start-width: var(--border-size-2);
+  }
+
+  .rail .thumb {
+    --scroll-area-thumb: var(--border-size-2);
+
+    border-radius: var(--ds-radius-none);
+    background-color: var(--primary12);
+  }
+}
+
+@layer states {
+  /* The horizontal gutter is reserved while there is something to scroll. */
+  .wide[data-has-overflow-x] .viewport,
+  .rail[data-has-overflow-x] .viewport {
+    padding-block-end: var(--scroll-area-gutter);
+  }
+
+  /* Panel scrollbar: shown on hover, scroll and focus. */
+  .panel .scrollbar {
+    visibility: hidden;
+  }
+
+  .panel .scrollbar[data-hovering],
+  .panel .scrollbar[data-scrolling],
+  .panel:focus-within .scrollbar {
+    visibility: visible;
+  }
+
+  /* The thumb widens on hover and scroll (6 px), and darkens to --primary12 while dragged. */
+  .scrollbar[data-hovering] .thumb,
+  .scrollbar[data-scrolling] .thumb {
+    --scroll-area-thumb: calc(var(--size-px-1) * 1.5);
+  }
+
+  .thumb:active {
+    --scroll-area-thumb: calc(var(--size-px-1) * 1.5);
+
+    background-color: var(--primary12);
+  }
+
+  .rail .scrollbar[data-hovering] .thumb,
+  .rail .scrollbar[data-scrolling] .thumb,
+  .rail .thumb:active {
+    --scroll-area-thumb: var(--border-size-2);
+  }
+
+  /* Each edge rule appears only while content is hidden on that side. */
+  .panel[data-overflow-y-start] .edgeStart,
+  .wide[data-overflow-x-start] .edgeStart,
+  .rail[data-overflow-x-start] .edgeStart {
+    display: var(--scroll-area-edge-start, block);
+  }
+
+  .panel[data-overflow-y-end] .edgeEnd,
+  .wide[data-overflow-x-end] .edgeEnd,
+  .rail[data-overflow-x-end] .edgeEnd {
+    display: block;
+  }
+
+  /* Focus: the 2 px --primary12 ring at a 2 px offset, keyboard only [D45]. */
+  .viewport:focus-visible {
+    outline: var(--border-size-2) solid var(--primary12);
+    outline-offset: var(--border-size-2);
+  }
+}
+
+@layer print {
+  @media print {
+    /* Unfold: content prints at full height; scrollbars, rails and edges are hidden (§10.19). */
+    .base {
+      display: block;
+      max-block-size: none;
+    }
+
+    /* The viewport's `overflow: scroll` and the content's `min-width` are inline styles. */
+    .viewport {
+      overflow: visible !important;
+      max-block-size: none;
+      padding: 0;
+    }
+
+    .content {
+      min-inline-size: 0 !important;
+    }
+
+    .scrollbar,
+    .corner,
+    .edge {
+      display: none;
+    }
+  }
+}

package/components/Search/Search.d.ts

@@ -0,0 +1,119 @@
+import * as React from 'react';
+import { Autocomplete as BaseAutocomplete } from '@base-ui/react/autocomplete';
+import { type VariantProps } from 'class-variance-authority';
+import { type IconName } from '../Icon';
+export declare const search: (props?: ({
+    kind?: "ruled" | "docked" | "boxed" | 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 SearchVariants = VariantProps<typeof search>;
+/** One suggestion row. */
+export type SearchSuggestion = {
+    /** The text the suggestion fills in (and submits). */
+    value: string;
+    /** The row's words. Default: `value`. */
+    label?: string;
+    /** An italic secondary name in --role-muted (a Latin name, a place). */
+    secondaryName?: string;
+    /** An optional type icon (inline tier). */
+    icon?: IconName;
+    /** Makes the row a link to this page. */
+    href?: string;
+    disabled?: boolean;
+};
+/** A titled group of suggestions; each group after the first sits under a rule. */
+export type SearchSuggestionGroup = {
+    /** The group head, in `type-label` caps. */
+    label: string;
+    items: readonly SearchSuggestion[];
+};
+type SearchItems = readonly SearchSuggestion[] | readonly SearchSuggestionGroup[];
+interface SearchFieldProps {
+    /**
+     * The field's label and the landmark's name ("Search the guide"). A
+     * placeholder never replaces it.
+     */
+    label: string;
+    /** Shows `label` above the field. Default `false`: it names the input for assistive technology. */
+    labelVisible?: boolean;
+    /** Default "Search…", ending in the ellipsis character. */
+    placeholder?: string;
+    /** The query, controlled. */
+    value?: string;
+    /** The initial query. */
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    /** Called with the query on submit (Enter, or the submit cell); the page does not reload. */
+    onSubmit?: (query: string, event: React.FormEvent<HTMLFormElement>) => void;
+    /** A native form action, used when `onSubmit` is not given. */
+    action?: string;
+    /** The query's name in a native submission. Default `q`. */
+    name?: string;
+    /** The suggestions, or titled groups. Pass `filter={null}` when the server filters them. */
+    items?: SearchItems;
+    /** Base UI's filter; `null` when the server already filtered the items. */
+    filter?: BaseAutocomplete.Root.Props<SearchSuggestion>['filter'];
+    /** Status text: "12 results". Announced politely. */
+    status?: React.ReactNode;
+    /** Shows "Searching…" in the status row while suggestions load. */
+    loading?: boolean;
+    /** The empty status. Default "No results for '[query]'"; add a next step where you can. */
+    emptyText?: (query: string) => React.ReactNode;
+    /** The "See all results" row's destination for a query. */
+    seeAllHref?: (query: string) => string;
+    /** The "See all" row's words. Default "See all results for '[query]'". */
+    seeAllText?: (query: string) => React.ReactNode;
+    /** The submit cell's accessible name (and label from `--md-n-above` when `submitLabelled`). Default "Search". */
+    submitLabel?: string;
+    /** Shows the submit's label from `--md-n-above`. Default `false`: the icon-only cell. */
+    submitLabelled?: boolean;
+    /** Hides the butted submit (boxed and docked); Enter still submits. */
+    hideSubmit?: boolean;
+    /** Submits the chosen suggestion when a row is pressed. */
+    submitOnItemClick?: boolean;
+    disabled?: boolean;
+    /** Class names for the landmark, added after the module's own. */
+    className?: string;
+    /** Primary Radix scale: field, rules, rows and focus ring. Never defaulted [D133]. */
+    primary?: SearchVariants['primary'];
+    /** Secondary Radix scale: accepted; the submit takes the scope's action scale. */
+    secondary?: SearchVariants['secondary'];
+}
+interface SearchTriggerProps {
+    /** The trigger's accessible name ("Search"). */
+    label: string;
+    /** Opens the app's search sheet (a Dialog below `--lg-n-above`) or docked bar. */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    /** Base UI `render`, to compose the trigger with a Dialog trigger. */
+    render?: React.ReactElement;
+    /** Class names for the Button, added after its own. */
+    className?: string;
+    /** Primary Radix scale for the Button. Never defaulted [D133]. */
+    primary?: SearchVariants['primary'];
+    /** Secondary Radix scale for the Button. */
+    secondary?: SearchVariants['secondary'];
+}
+/**
+ * Props for Search. `kind="trigger"` takes only the trigger props; the
+ * other kinds take the field props.
+ */
+export type SearchProps = ({
+    /**
+     * `boxed` (default): the field box with the butted submit. `ruled`:
+     * the field between two --border-size-2 rules. `docked`: the boxed
+     * field in the full-width top bar. `trigger`: the header's icon-only
+     * Button that opens the search sheet or bar.
+     */
+    kind?: 'boxed' | 'ruled' | 'docked';
+} & SearchFieldProps) | ({
+    kind: 'trigger';
+} & SearchTriggerProps);
+/**
+ * Search in a `search` landmark. Matches are marked by weight, never
+ * color; an empty result is a plain-word status, never a red error (P10).
+ * Show one docked bar at a time.
+ */
+export declare function Search(props: SearchProps): React.JSX.Element;
+export {};
+//# sourceMappingURL=Search.d.ts.map

package/components/Search/Search.d.ts.map

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