@sesamehr/react-design-system 2.0.0-beta.9 → 2.0.0

package/dist/Display/Avatar/AvatarSkeleton/AvatarSkeleton.d.ts

@@ -24,7 +24,7 @@ export interface AvatarSkeletonProps extends React.HTMLAttributes<HTMLDivElement
  * wrapper-with-no-behaviour that `.claude/rules/component-architecture.md` §11
  * rejects.
  *
- * The pulse and the reduced-motion behaviour are not reimplemented here: they
+ * The sweep and the reduced-motion behaviour are not reimplemented here: they
  * come from `Skeleton`, which is the only place they are declared.
  */
 export declare const AvatarSkeleton: import('react').ForwardRefExoticComponent<AvatarSkeletonProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Display/AvatarDetails/AvatarDetails.d.ts

@@ -1,3 +1,28 @@
+import { AvatarSize } from '../Avatar/index.ts';
+/**
+ * What the avatar itself is: the picture, the fallback for when there is no
+ * picture, and how big the whole thing is drawn.
+ *
+ * One object rather than three props, the way `ChatInput` takes `actionLabels`
+ * and `ChatBubble` takes `delivery`. The prop budget is five and the text beside
+ * the avatar already spends three of them; folding the avatar's own settings
+ * into the one value they all describe buys back the room `size` needed, and
+ * leaves room for the next thing the avatar grows.
+ *
+ * `initials` is a field and not something derived from `name` on purpose. Real
+ * records carry initials separately precisely *because* the name arrives badly
+ * formatted — "GARCÍA LÓPEZ, M.ª José", a single word, an email address — so a
+ * derivation is a rule that works on every example anyone writes by hand and
+ * fails on the data.
+ */
+export interface AvatarDetailsAvatar {
+    /** Image source URL */
+    src?: string;
+    /** Fallback initials (max 2 characters), shown when there is no image */
+    initials?: string;
+    /** 24, 32, 48, 64 or 80px. Also sets the text scale beside it. */
+    size?: AvatarSize;
+}
 /**
  * An avatar with a name and an optional second line beside it.
  *
@@ -11,21 +36,33 @@
  * anything. Callers who genuinely need arbitrary content next to an avatar
  * should compose `AvatarSquare` themselves rather than widen this.
  *
- * The prop list is full at five plus `dataTestid`, which is the cap. Anything
- * further has to replace one of these or be argued as a separate component —
- * there is no room left to slip one in.
+ * ### The text scales with the avatar, and the caller still cannot choose it
+ *
+ * The size spans 24px to 80px, and a name at one fixed size across that range is
+ * wrong at both ends. So the two lines step with the box — the pairs are in the
+ * stylesheet, keyed off `data-size`, and they are **derived**, never passed.
+ * There is no text-size prop and no CSS variable a caller pokes: every
+ * `AvatarDetails` at a given size still renders identically to every other one,
+ * which is the guarantee the paragraph above is about. What the fixed-size
+ * version guaranteed was narrower than it looked — it guaranteed sameness
+ * between a 32px row and a 32px row, and there were no other sizes.
+ *
+ * `xs` and `sm` deliberately share a pair: 14/12 is already the smallest
+ * readable step we have, so below 32px only the picture shrinks.
+ *
+ * The prop list is four plus `dataTestid`, against a cap of five. The one spare
+ * is not an invitation — anything that belongs to the avatar goes into
+ * `AvatarDetailsAvatar`, and anything that does not has to argue for itself.
  */
 export interface AvatarDetailsProps extends React.ComponentPropsWithoutRef<'div'> {
-    /** Image source URL */
-    src?: string;
-    /** Fallback initials (max 2 characters) */
-    initials?: string;
-    /** Disabled state */
-    disabled?: boolean;
+    /** The avatar itself: image, fallback initials and size */
+    avatar?: AvatarDetailsAvatar;
     /** Full name to display */
     name: string;
     /** Subtitle (department, role, etc.) */
     subtitle?: string;
+    /** Disabled state */
+    disabled?: boolean;
     dataTestid: string;
 }
 export declare const AvatarDetails: import('react').ForwardRefExoticComponent<AvatarDetailsProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Display/AvatarDetails/index.d.ts

@@ -1 +1 @@
-export { AvatarDetails, type AvatarDetailsProps } from './AvatarDetails.tsx';
+export { AvatarDetails, type AvatarDetailsAvatar, type AvatarDetailsProps, } from './AvatarDetails.tsx';

package/dist/Display/AvatarGroup/AvatarGroup.d.ts

@@ -1,3 +1,4 @@
+import { AvatarSize } from '../Avatar/index.ts';
 export interface AvatarItem {
     src?: string;
     initials?: string;
@@ -10,6 +11,8 @@ export interface AvatarGroupProps extends Omit<React.ButtonHTMLAttributes<HTMLBu
     max?: number;
     /** Whether the group is interactive (clickable) */
     interactive?: boolean;
+    /** The size every avatar in the stack is drawn at. */
+    size?: AvatarSize;
     /** Click handler (only fired when interactive) */
     onClick?: React.MouseEventHandler<HTMLButtonElement>;
     dataTestid: string;

package/dist/Feedback/Skeleton/Skeleton.d.ts

@@ -2,7 +2,8 @@ export interface SkeletonProps extends React.HTMLAttributes<HTMLDivElement> {
     dataTestid: string;
 }
 /**
- * A block that pulses while the content it stands in for is still loading.
+ * A block a sheen sweeps across while the content it stands in for is still
+ * loading.
  *
  * It configures nothing. One surface, and the caller gives it its shape with
  * ordinary classes — `h-4 w-48` is a line of text, `size-10 rounded-full` is an

package/dist/Forms/Inputs/Combobox/Combobox.d.ts

@@ -16,6 +16,25 @@ export interface ComboboxProps extends Omit<React.HTMLAttributes<HTMLDivElement>
     /** Emitted when the open state changes. */
     onOpenChange?: (open: boolean) => void;
     children?: React.ReactNode;
+    /**
+     * The term to search for, once typing has stopped. Binding it is what tells
+     * the combobox its options are an answer it asked for — see `ignoreFilter`.
+     */
+    onSearch?: (term: string) => void;
+    /**
+     * Quiet period, in milliseconds, between the last keystroke and `onSearch`.
+     * `0` emits in the same tick.
+     */
+    debounce?: number;
+    /**
+     * Whether to skip filtering the rendered options in the browser. Left unset
+     * it follows `onSearch`: options the caller went and fetched have already
+     * been filtered, by something that knows more than a literal text match does
+     * — search "peres", get "Ana Pérez" back from a server that folds accents,
+     * and a second pass here hides a correct answer with nothing logged. Pass it
+     * explicitly to override, `false` included.
+     */
+    ignoreFilter?: boolean;
     dataTestid: string;
 }
 /**

package/dist/Forms/Inputs/Combobox/ComboboxChipsInput.d.ts

@@ -3,6 +3,13 @@ export interface ComboboxChipsInputProps extends Omit<React.InputHTMLAttributes<
     placeholder?: string;
     disabled?: boolean;
     size?: InputSize;
+    /**
+     * Names a chip the options cannot: a selection that arrived with the record,
+     * from a server, before any item existed to report a label. Return
+     * `undefined` for anything it does not know and the option's own label is
+     * used, so it never has to answer for values the list can speak for itself.
+     */
+    chipLabel?: (value: string) => string | undefined;
     /** Custom trigger content (defaults to a chevron icon). */
     trigger?: React.ReactNode;
 }

package/dist/Forms/Inputs/Combobox/ComboboxItemEdit.d.ts

@@ -0,0 +1,134 @@
+export interface ComboboxItemEditPreview {
+    /**
+     * Enter the editing state. Pass it straight to the control that starts the
+     * edit — `onClick={edit}` — so it receives the event and can stop it.
+     */
+    edit: (event?: {
+        stopPropagation: () => void;
+    }) => void;
+}
+export interface ComboboxItemEditField {
+    /** The text as it currently stands. */
+    value: string | undefined;
+    /** Report a keystroke from the field. */
+    setValue: (value: string | undefined) => void;
+    /** Save, and leave the editing state. */
+    commit: () => void;
+    /** Put the text back as it was, and leave the editing state. */
+    cancel: () => void;
+}
+export interface ComboboxItemEditProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children' | 'onChange'> {
+    /**
+     * The text being edited. Pass it one way — `value={label}` — and let
+     * `onCommit` write the new one back: it seeds the draft and re-seeds it
+     * whenever it changes, so the caller never holds the draft and the field
+     * inside `field` never has a second copy of it to disagree with. Add
+     * `onValueChange` for a caller who wants every keystroke.
+     */
+    value?: string;
+    /** The starting text when nothing is passed for `value`. */
+    defaultValue?: string;
+    /** Every keystroke, for a caller controlling the draft. */
+    onValueChange?: (value: string | undefined) => void;
+    /** The edit was saved. Carries the text as it now stands. */
+    onCommit?: (value: string | undefined) => void;
+    /** The edit was abandoned; the draft has already been put back. */
+    onCancel?: () => void;
+    /** The row while it is being edited. */
+    field?: (context: ComboboxItemEditField) => React.ReactNode;
+    /** The row the rest of the time. */
+    children?: (context: ComboboxItemEditPreview) => React.ReactNode;
+}
+/**
+ * An option that can be renamed without leaving the list: the row shows its
+ * normal content until the caller's own control asks to edit it, then hands the
+ * row over to the caller's own field. Port of
+ * `core/src/Forms/Inputs/Combobox/ComboboxItemEdit`.
+ *
+ * It holds no strings and draws no buttons — the design system ships neither.
+ * What it owns is the part a caller cannot get right from outside: a list whose
+ * every reflex is to select the row and close, aimed at a field that needs the
+ * click, the keystroke and the `Escape` for itself.
+ *
+ * ```tsx
+ * <OxComboboxItem value="other">
+ *   <OxComboboxItemEdit
+ *     value={label}
+ *     onCommit={next => setLabel(next ?? '')}
+ *     field={({ value, setValue, commit }) => (
+ *       <>
+ *         <OxInputText size="sm" field={value} onFieldChange={setValue} />
+ *         <OxButton variant="ghost" onClick={commit}>…</OxButton>
+ *       </>
+ *     )}
+ *   >
+ *     {({ edit }) => (
+ *       <>
+ *         {label}
+ *         <OxButton variant="ghost" onClick={edit}>…</OxButton>
+ *       </>
+ *     )}
+ *   </OxComboboxItemEdit>
+ * </OxComboboxItem>
+ * ```
+ *
+ * Both states live here rather than behind the caller's own conditional for one
+ * reason worth the extra render prop: the control that *starts* the edit is
+ * itself inside the row, so its click selects the option and shuts the popover
+ * unless it is stopped. `edit` stops it. A caller assembling the two states
+ * themselves has to know that, and the version that does not know it looks
+ * exactly right until it is clicked.
+ *
+ * ### What is taken away from the list while editing, and by whom
+ *
+ * The Vue half is fighting reka; this one is fighting cmdk, and the two land on
+ * very nearly the same list:
+ *
+ * - **The click.** cmdk's `CommandItem` calls `onSelect` on `click`, and a
+ *   single-select combobox turns a selection into `setOpen(false)`. Clicking
+ *   into the field is a click on the row, so the popover closed under the
+ *   cursor that opened it.
+ * - **`Enter`.** cmdk's `Command` dispatches a select on the highlighted row,
+ *   which is the same close by another route. Here it is what saves the edit.
+ * - **`ArrowUp` / `ArrowDown` / `Home` / `End`.** All four are
+ *   `preventDefault()`ed by `Command`, so the caret could not be moved.
+ * - **`pointermove`.** `CommandItem` moves the highlight onto the row under the
+ *   cursor.
+ * - **`Space`** is in the list for the Vue half's sake — reka's `ListboxItem`
+ *   selects on it *with `prevent`*, so a name with two words in it could not be
+ *   typed. cmdk leaves the space bar alone; stopping it here costs nothing and
+ *   keeps one list of claimed keys instead of two that drift.
+ *
+ * `Escape` is deliberately absent and is answered in `ComboboxContent`. See
+ * `useComboboxEditing` for why it cannot be answered here.
+ *
+ * ### Focus
+ *
+ * Nothing in this half steals focus the way reka's listbox can, so there is no
+ * equivalent of the `focusable` flag the Vue port suspends and restores:
+ * Radix's popover is non-modal and `onOpenAutoFocus` is already prevented,
+ * cmdk's highlight is an `aria-activedescendant` rather than a real focus move,
+ * and its one refocusing path fires only when the active element is cmdk's own
+ * input or root — never a field inside a row. What is left is the same on both
+ * sides: take focus on entering the edit, hand it back to the combobox's own
+ * field on leaving.
+ *
+ * **A dialog around the combobox is free here and was not in Vue.** A dialog
+ * traps focus, the popover is portalled to `body` and is therefore outside what
+ * the trap considers the dialog, so the `.focus()` below reads as focus
+ * escaping — unless a nearer focus layer has suspended the trap.
+ * `Popover.Content` registers one in every Radix build, untrapped when the
+ * popover is non-modal, which ours is. reka gives `SelectContentImpl`,
+ * `PopoverContentImpl` and `MenuContentImpl` a `FocusScope` and
+ * `ComboboxContentImpl` none, so the Vue `ComboboxContent` has to add the layer
+ * by hand to reach the behaviour this side gets for nothing.
+ *
+ * **One thing here has no Vue counterpart.** cmdk re-sorts the option elements
+ * by moving the DOM nodes themselves whenever the search term changes, and a
+ * focused field inside a row that gets reparented loses focus. Typing in the
+ * combobox's own search box while a row edit is open is therefore not the same
+ * experience in the two packages. Editing is reached by clicking a control in
+ * the row, which leaves the search box unfocused, so it takes a deliberate
+ * detour to hit.
+ */
+export declare const ComboboxItemEdit: import('react').ForwardRefExoticComponent<ComboboxItemEditProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/Combobox/context.d.ts

@@ -1,3 +1,4 @@
+import { ComboboxEditing } from './useComboboxEditing.ts';
 /**
  * Shared Combobox state.
  *
@@ -6,7 +7,7 @@
  * every part needs — the value, `multiple`, `disabled` and the search term — so
  * a part can be used on its own without threading props through the tree.
  */
-export interface ComboboxContextValue {
+export interface ComboboxContextValue extends ComboboxEditing {
     /** Current selection. `string` for single-select, `string[]` for multiple. */
     value: string | string[] | undefined;
     /** Commit a selection (toggles for `multiple`). */
@@ -21,6 +22,12 @@ export interface ComboboxContextValue {
     /** Search string driving cmdk filtering. */
     search: string;
     setSearch: (search: string) => void;
+    /** Typing: restart the quiet period before the root's `onSearch`. */
+    scheduleSearch: (term: string) => void;
+    /** A gesture that settles the term — clearing it. Report now. */
+    searchImmediately: (term: string) => void;
+    /** Whether cmdk should leave the rendered options alone. */
+    skipFilter: boolean;
     /**
      * The text each option renders, keyed by the value it selects, so the field
      * can show `Barcelona` rather than `barcelona`. See `useComboboxLabels` for
@@ -28,6 +35,12 @@ export interface ComboboxContextValue {
      */
     registerLabel: (value: string, label: string) => void;
     labelFor: (value: string) => string | undefined;
+    /**
+     * The field itself, so a row that took focus for an in-place edit can hand it
+     * back when the edit ends. reka carries the same element on its own combobox
+     * context, which is where the Vue half gets it.
+     */
+    inputRef: React.RefObject<HTMLInputElement | null>;
 }
 export declare const ComboboxContext: import('react').Context<ComboboxContextValue | null>;
 export declare function useComboboxContext(): ComboboxContextValue;

package/dist/Forms/Inputs/Combobox/index.d.ts

@@ -4,6 +4,7 @@ export { ComboboxInput, type ComboboxInputProps } from './ComboboxInput.tsx';
 export { ComboboxChipsInput, type ComboboxChipsInputProps, } from './ComboboxChipsInput.tsx';
 export { ComboboxContent, type ComboboxContentProps, } from './ComboboxContent.tsx';
 export { ComboboxItem, type ComboboxItemProps } from './ComboboxItem.tsx';
+export { ComboboxItemEdit, type ComboboxItemEditProps, } from './ComboboxItemEdit.tsx';
 export { ComboboxEmpty, type ComboboxEmptyProps } from './ComboboxEmpty.tsx';
 export { ComboboxGroup, type ComboboxGroupProps } from './ComboboxGroup.tsx';
 export { ComboboxSeparator, type ComboboxSeparatorProps, } from './ComboboxSeparator.tsx';

package/dist/Forms/Inputs/Combobox/useComboboxEditing.d.ts

@@ -0,0 +1,40 @@
+export interface ComboboxEditing {
+    /** The row entering its editing state announces how to back out of it. */
+    openEdit: (cancel: () => void) => void;
+    /** The row leaving its editing state withdraws that offer. */
+    closeEdit: (cancel: () => void) => void;
+    /**
+     * Back out of the open edit, if there is one. Returns whether there was —
+     * the caller uses that to decide whether the keystroke has been spent.
+     */
+    cancelOpenEdit: () => boolean;
+}
+/**
+ * Which row, if any, is currently being edited in place. Port of
+ * `core/src/Forms/Inputs/Combobox/useComboboxEditing`, where Vue's
+ * `provide`/`inject` does what this hook plus `ComboboxContext` do here.
+ *
+ * It exists for one keystroke. `Escape` inside the edit has to cancel the edit
+ * and leave the list open, and the only thing that can stop the list closing is
+ * the content's `onEscapeKeyDown`: Radix's dismissable layer listens on
+ * `document` with `capture: true`, so the editing field never sees the key
+ * first and cannot swallow it however hard it tries. The layer offers exactly
+ * one way out — `preventDefault()` on the event it hands up. So the content is
+ * where `Escape` has to be answered, the state is in the row, and this is the
+ * wire between them.
+ *
+ * The Vue half reaches the same arrangement from the opposite constraint: reka
+ * listens on `window` in the bubble phase, so there the field *would* see the
+ * key first, and handling it in both places would close the edit before the
+ * content was asked whether to prevent the dismissal — closing the list, which
+ * is the one thing this must not do. One mechanism, in the content, on both
+ * sides.
+ *
+ * A ref rather than state: nothing renders differently for knowing which row is
+ * open, and the only reader is an event handler, which wants the current value
+ * and not the one captured when it was last rendered.
+ *
+ * One edit at a time, and opening a second cancels the first: two rows in edit
+ * mode have two answers to `Escape` and no way to say which one the user meant.
+ */
+export declare function useComboboxEditing(): ComboboxEditing;

package/dist/Forms/Inputs/Combobox/useComboboxSearch.d.ts

@@ -0,0 +1,20 @@
+export interface ComboboxSearch {
+    /** Typing: restart the quiet period, emit when it elapses. */
+    schedule: (term: string) => void;
+    /** A gesture that settles the term — clearing it. Emit now. */
+    immediately: (term: string) => void;
+}
+/**
+ * The wire between whichever field is typed into and the root's `onSearch`.
+ *
+ * The root is where `debounce` and `onSearch` belong — there are three fields
+ * (`ComboboxInput`, `ComboboxChipsInput`, and `ComboboxCancel` clearing one of
+ * them) and a prop on each would be the same number asked three times. The
+ * fields reach it through the shared context, beside `setSearch`.
+ *
+ * The fields report from their `onChange` rather than from the term itself,
+ * because the term is also written when a value is selected — the field is
+ * reset and the resolved label put in its place — and a search fired for the
+ * text of the option the user just picked is a request nobody asked for.
+ */
+export declare function useComboboxSearch(debounce: number, onSearch: ((term: string) => void) | undefined): ComboboxSearch;

package/dist/Forms/Inputs/SearchBar/SearchBar.d.ts

@@ -6,14 +6,14 @@ export interface SearchBarProps extends Omit<React.InputHTMLAttributes<HTMLInput
      * Milliseconds of no typing before `onSearch` fires. `0` fires on every
      * keystroke.
      */
-    delay?: number;
+    debounce?: number;
     /** Controlled term. Pair with `onValueChange`; omit for uncontrolled. */
     value?: string;
     /** Starting term when uncontrolled. */
     defaultValue?: string;
     /** Called on every keystroke with the next term, without waiting. */
     onValueChange?: (value: string) => void;
-    /** Called once typing has been quiet for `delay` ms — and at once on Enter or clear. */
+    /** Called once typing has been quiet for `debounce` ms — and at once on Enter or clear. */
     onSearch?: (term: string) => void;
     dataTestid: string;
 }

package/dist/Forms/Inputs/SearchBar/index.d.ts

@@ -1,8 +1,6 @@
 import { VariantProps } from 'class-variance-authority';
 export { SearchBar } from './SearchBar.tsx';
 export type { SearchBarProps } from './SearchBar.tsx';
-export { useSearchDelay } from './useSearchDelay.ts';
-export type { UseSearchDelayReturn } from './useSearchDelay.ts';
 /**
  * Class names, not utilities — see `Button/index.ts` for why the package
  * cannot publish `.h-10` and `.rounded-lg` of its own. `SearchBar.module.css`

package/dist/Layout/Card/Card.d.ts

@@ -2,7 +2,10 @@ import { CardVariants } from './index.ts';
 export interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
     /** Render as the child element instead of a `<div>` (Radix Slot). */
     asChild?: boolean;
-    /** Which surface it is: `default` is white, `muted` is tinted. */
+    /**
+     * Which surface it is: `default` is white, `muted` is tinted, `highlighted`
+     * is filled with the brand colour and carries its own light text.
+     */
     tone?: CardVariants['tone'];
     /** Drops the border, the shadow and the glass — just the surface and its radius. */
     flat?: boolean;

package/dist/Layout/Card/index.d.ts

@@ -3,9 +3,15 @@ export { Card, type CardProps } from './Card.tsx';
 /**
  * Two things vary, and they are not the same thing.
  *
- * `tone` is which surface it is: white, or tinted for the case the white one
- * cannot serve. White on white needs a border around every row to read as
- * separate things; a tinted surface lets the white ones separate on their own.
+ * `tone` is which surface it is: white, tinted for the case the white one
+ * cannot serve, or filled with the brand colour when the card is the one thing
+ * on the page meant to be looked at first. White on white needs a border around
+ * every row to read as separate things; a tinted surface lets the white ones
+ * separate on their own.
+ *
+ * `highlighted` is the only tone that also sets a text colour, because it is
+ * the only one whose surface is dark enough to need it. Everything inside
+ * inherits it, so the content composes exactly as it would on a white card.
  *
  * `flat` is what it carries on top of that surface. They are kept apart
  * because the combinations are all real: a white card over a tinted one, a
@@ -16,6 +22,6 @@ export { Card, type CardProps } from './Card.tsx';
  * styles keyed off `data-flat` rather than being bent into one.
  */
 export declare const cardVariants: (props?: ({
-    tone?: "default" | "muted" | null | undefined;
+    tone?: "default" | "muted" | "highlighted" | null | undefined;
 } & import('class-variance-authority/types').ClassProp) | undefined) => string;
 export type CardVariants = VariantProps<typeof cardVariants>;

package/dist/Navigation/ToggleTabs/useToggleTabsPill.d.ts

@@ -0,0 +1,27 @@
+import { RefObject } from 'react';
+/**
+ * Moves the selected pill over whichever tab is active.
+ *
+ * The selected state used to be a background on the trigger itself, which is
+ * why it could not travel: two elements cannot transition into one another. So
+ * the pill is a single element in the track, taken out of flow, and what moves
+ * is its geometry — published as custom properties on the track
+ * (`--toggle-tabs-pill-x/y/width/height`) for the stylesheet to spend.
+ *
+ * The handoff is the point. Nothing here decides how the pill is drawn: no
+ * `transform` string, no radius, no colour, no orientation branch. This writes
+ * four numbers and the component's own rule composes them, which keeps a
+ * measurement out of the stylesheet's job and the stylesheet's job out of here
+ * — and means the vertical orientation needs no code, only the `y` that is
+ * already being written.
+ *
+ * Both axes always, for that reason: `data-orientation="vertical"` turns the
+ * track into a column and the pill then travels down it, measured by exactly
+ * the same two rectangles.
+ *
+ * The whole of it runs off observers rather than off the render, which is what
+ * lets it be a single effect with no dependency on the active value: a tab
+ * changing, a tab arriving and a tab being resized are all DOM events by the
+ * time they matter here.
+ */
+export declare function useToggleTabsPill(track: RefObject<HTMLElement | null>): void;

package/dist/hooks/index.d.ts

@@ -8,5 +8,7 @@
  * sibling's folder and a reader having to know that `Textarea`'s sizing is
  * really `ChatInput`'s. See `.claude/rules/component-architecture.md` §13.
  */
-export { useAutoGrow } from './useAutoGrow.ts';
-export type { UseAutoGrowReturn } from './useAutoGrow.ts';
+export { useAutoGrow } from './useAutoGrow/useAutoGrow.ts';
+export type { UseAutoGrowReturn } from './useAutoGrow/useAutoGrow.ts';
+export { useSearchDebounce } from './useSearchDebounce/useSearchDebounce.ts';
+export type { UseSearchDebounceReturn } from './useSearchDebounce/useSearchDebounce.ts';

package/dist/{Forms/Inputs/SearchBar/useSearchDelay.d.ts → hooks/useSearchDebounce/useSearchDebounce.d.ts}

@@ -1,6 +1,6 @@
 /**
  * The quiet period between typing and searching — mirrors
- * `@sesame/orxata-core` `useSearchDelay`.
+ * `@sesame/orxata-core` `useSearchDebounce`.
  *
  * A search field that emits on every keystroke turns "Marie" into five
  * requests, four of which are already stale by the time they land. Waiting for
@@ -13,7 +13,7 @@
  * drops whatever `schedule` had pending, which would otherwise fire a moment
  * later with a term the user has already moved on from.
  */
-export interface UseSearchDelayReturn {
+export interface UseSearchDebounceReturn {
     /** Restart the quiet period; emit when it elapses. */
     schedule: (term: string) => void;
     /** Emit now, dropping anything pending. */
@@ -21,4 +21,4 @@ export interface UseSearchDelayReturn {
     /** Drop anything pending without emitting. */
     cancel: () => void;
 }
-export declare const useSearchDelay: (delay: number, emit: (term: string) => void) => UseSearchDelayReturn;
+export declare const useSearchDebounce: (debounce: number, emit: (term: string) => void) => UseSearchDebounceReturn;

package/dist/main.d.ts

@@ -17,7 +17,7 @@ export { Scrollbar as OxScrollbar, useScrollbar, SCROLLBAR_THICKNESS, type Scrol
 export { LocaleProvider as OxLocaleProvider } from './Locale/index.ts';
 export { normalizeLocale, useLocale } from './Locale/index.ts';
 export { AvatarRounded as OxAvatarRounded, AvatarSkeleton as OxAvatarSkeleton, AvatarSquare as OxAvatarSquare, avatarRoundedVariants, avatarSquareVariants, type AvatarRoundedVariants, type AvatarSize, type AvatarSquareVariants, type AvatarTone, } from './Display/Avatar/index.ts';
-export { AvatarDetails as OxAvatarDetails } from './Display/AvatarDetails/index.ts';
+export { AvatarDetails as OxAvatarDetails, type AvatarDetailsAvatar, } from './Display/AvatarDetails/index.ts';
 export { AvatarGroup as OxAvatarGroup, type AvatarItem, } from './Display/AvatarGroup/index.ts';
 export { Badge as OxBadge, badgeVariants, type BadgeVariants, } from './Display/Badge/index.ts';
 export { CalendarDate as OxCalendarDate, calendarDateVariants, type CalendarDateVariants, } from './Display/CalendarDate/index.ts';
@@ -44,6 +44,6 @@ export { PageControl as OxPageControl, pageControlDots, PAGE_CONTROL_WINDOW, typ
 export { Breadcrumb as OxBreadcrumb, BreadcrumbList as OxBreadcrumbList, BreadcrumbItem as OxBreadcrumbItem, BreadcrumbLink as OxBreadcrumbLink, BreadcrumbPage as OxBreadcrumbPage, BreadcrumbSeparator as OxBreadcrumbSeparator, BreadcrumbEllipsis as OxBreadcrumbEllipsis, } from './Navigation/Breadcrumb/index.ts';
 export { Counter as OxCounter, counterVariants, type CounterVariants, } from './Forms/Field/Counter/index.ts';
 export { FieldGroup as OxFieldGroup, FieldLabel as OxFieldLabel, FieldMessage as OxFieldMessage, useFieldControl, useFieldControlGroup, type FieldControlAttrs, type FieldControlGroupAttrs, type FieldGroupProps, type FieldVariant, } from './Forms/Field/index.ts';
-export { InputGroup as OxInputGroup, InputText as OxInputText, InputNumber as OxInputNumber, InputNumberContent as OxInputNumberContent, InputNumberDecrement as OxInputNumberDecrement, InputNumberIncrement as OxInputNumberIncrement, InputNumberInput as OxInputNumberInput, InputPassword as OxInputPassword, InputPasswordInput as OxInputPasswordInput, InputPasswordToggle as OxInputPasswordToggle, useInputPassword, InputOtp as OxInputOtp, InputOtpGroup as OxInputOtpGroup, InputOtpSlot as OxInputOtpSlot, InputOtpSeparator as OxInputOtpSeparator, useInputOtp, Calendar as OxCalendar, CalendarRange as OxCalendarRange, CalendarDay as OxCalendarDay, calendarDayVariants, Combobox as OxCombobox, ComboboxCancel as OxComboboxCancel, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, ChatInput as OxChatInput, DatePicker as OxDatePicker, DateRangePicker as OxDateRangePicker, DatePickerTrigger as OxDatePickerTrigger, DatePickerHeader as OxDatePickerHeader, DatePickerMonthSelect as OxDatePickerMonthSelect, DatePickerYearSelect as OxDatePickerYearSelect, SearchBar as OxSearchBar, searchBarVariants, useSearchDelay, SearchPanel as OxSearchPanel, SearchPanelInput as OxSearchPanelInput, SearchPanelList as OxSearchPanelList, SearchPanelGroup as OxSearchPanelGroup, SearchPanelItem as OxSearchPanelItem, SearchPanelEmpty as OxSearchPanelEmpty, Select as OxSelect, SelectTrigger as OxSelectTrigger, SelectContent as OxSelectContent, SelectItem as OxSelectItem, SelectGroup as OxSelectGroup, SelectSeparator as OxSelectSeparator, Textarea as OxTextarea, Switch as OxSwitch, Checkbox as OxCheckbox, RadioButton as OxRadioButton, RadioGroup as OxRadioGroup, ToggleGroup as OxToggleGroup, ToggleLabel as OxToggleLabel, ToggleDescription as OxToggleDescription, SWITCH_SIZES, type InputNumberProps, type InputPasswordProps, type InputPasswordContext, type InputOtpProps, type InputOtpSlotProps, type InputOtpContext, type CalendarProps, type CalendarRangeProps, type CalendarDateRange, type CalendarDayProps, type CalendarDayState, type CalendarDayVariants, type CalendarConstraints, type CalendarNav, type ComboboxProps, type ChatInputActionLabels, type ChatInputState, type DatePickerProps, type DateRangePickerProps, type DatePickerTriggerProps, type DatePickerHeaderProps, type DatePickerMonthSelectProps, type DatePickerYearSelectProps, type SearchBarVariants, type UseSearchDelayReturn, type SelectProps, type TextareaCounterState, type RadioGroupProps, type ToggleGroupProps, type ToggleLabelProps, type ToggleDescriptionProps, } from './Forms/Inputs/index.ts';
+export { InputGroup as OxInputGroup, InputText as OxInputText, InputNumber as OxInputNumber, InputNumberContent as OxInputNumberContent, InputNumberDecrement as OxInputNumberDecrement, InputNumberIncrement as OxInputNumberIncrement, InputNumberInput as OxInputNumberInput, InputPassword as OxInputPassword, InputPasswordInput as OxInputPasswordInput, InputPasswordToggle as OxInputPasswordToggle, useInputPassword, InputOtp as OxInputOtp, InputOtpGroup as OxInputOtpGroup, InputOtpSlot as OxInputOtpSlot, InputOtpSeparator as OxInputOtpSeparator, useInputOtp, Calendar as OxCalendar, CalendarRange as OxCalendarRange, CalendarDay as OxCalendarDay, calendarDayVariants, Combobox as OxCombobox, ComboboxCancel as OxComboboxCancel, ComboboxInput as OxComboboxInput, ComboboxChipsInput as OxComboboxChipsInput, ComboboxContent as OxComboboxContent, ComboboxItem as OxComboboxItem, ComboboxItemEdit as OxComboboxItemEdit, ComboboxEmpty as OxComboboxEmpty, ComboboxGroup as OxComboboxGroup, ComboboxSeparator as OxComboboxSeparator, ChatInput as OxChatInput, DatePicker as OxDatePicker, DateRangePicker as OxDateRangePicker, DatePickerTrigger as OxDatePickerTrigger, DatePickerHeader as OxDatePickerHeader, DatePickerMonthSelect as OxDatePickerMonthSelect, DatePickerYearSelect as OxDatePickerYearSelect, SearchBar as OxSearchBar, searchBarVariants, SearchPanel as OxSearchPanel, SearchPanelInput as OxSearchPanelInput, SearchPanelList as OxSearchPanelList, SearchPanelGroup as OxSearchPanelGroup, SearchPanelItem as OxSearchPanelItem, SearchPanelEmpty as OxSearchPanelEmpty, Select as OxSelect, SelectTrigger as OxSelectTrigger, SelectContent as OxSelectContent, SelectItem as OxSelectItem, SelectGroup as OxSelectGroup, SelectSeparator as OxSelectSeparator, Textarea as OxTextarea, Switch as OxSwitch, Checkbox as OxCheckbox, RadioButton as OxRadioButton, RadioGroup as OxRadioGroup, ToggleGroup as OxToggleGroup, ToggleLabel as OxToggleLabel, ToggleDescription as OxToggleDescription, SWITCH_SIZES, type InputNumberProps, type InputPasswordProps, type InputPasswordContext, type InputOtpProps, type InputOtpSlotProps, type InputOtpContext, type CalendarProps, type CalendarRangeProps, type CalendarDateRange, type CalendarDayProps, type CalendarDayState, type CalendarDayVariants, type CalendarConstraints, type CalendarNav, type ComboboxProps, type ChatInputActionLabels, type ChatInputState, type DatePickerProps, type DateRangePickerProps, type DatePickerTriggerProps, type DatePickerHeaderProps, type DatePickerMonthSelectProps, type DatePickerYearSelectProps, type SearchBarVariants, type SelectProps, type TextareaCounterState, type RadioGroupProps, type ToggleGroupProps, type ToggleLabelProps, type ToggleDescriptionProps, } from './Forms/Inputs/index.ts';
 export { Table as OxTable, TableVirtualized as OxTableVirtualized, TableHead as OxTableHead, TableBody as OxTableBody, TableRow as OxTableRow, TableCell as OxTableCell, TableHeaderCell as OxTableHeaderCell, TableSelectCell as OxTableSelectCell, TableDragCell as OxTableDragCell, TableBulkHeader as OxTableBulkHeader, TablePagination as OxTablePagination, TableEmpty as OxTableEmpty, TableRowExpanded as OxTableRowExpanded, TableExpandCell as OxTableExpandCell, TableColumnVisibility as OxTableColumnVisibility, useTable, useTableSelection, useTableSorting, useTablePagination, useTableDetailRow, useTablePinning, useTableColumns, useScrollShadow, useDragToScroll, useFixedColumns, useTableVirtual, } from './Data/Table/index.ts';
 export type { UseTableOptions, UseTableReturn, UseTableSelectionReturn, UseTableSortingReturn, UseTablePaginationOptions, UseTablePaginationReturn, DetailRowInstance, DetailRowOptions, DetailRowPluginDef, UseTablePinningOptions, UseTablePinningReturn, CellInfo, HeaderInfo, UseTableVirtualOptions, UseTableVirtualReturn, UseTableColumnsOptions, UseTableColumnsReturn, UseScrollShadowOptions, UseScrollShadowReturn, UseDragToScrollOptions, UseDragToScrollReturn, UseFixedColumnsOptions, TableProps, TableMode, ColumnDef, ColumnAlign, CellContext, SortingState, PaginationState, PaginationChangePayload, SortingChangePayload, SelectionChangePayload, FilterChangePayload, ColumnResizeMode, ColumnVisibilityState, ColumnOrderState, ExpandedState, ColumnVisibilityChangePayload, ColumnOrderChangePayload, RowExpandChangePayload, ColumnResizePayload, ColumnPinningState, } from './Data/Table/index.ts';