@sesamehr/react-design-system 3.3.1 → 3.4.1

package/dist/Feedback/Toast/index.d.ts

@@ -0,0 +1,26 @@
+import { VariantProps } from 'class-variance-authority';
+export { Toast, type ToastProps } from './Toast.tsx';
+export { ToastAction, type ToastActionProps } from './ToastAction.tsx';
+export { ToastClose, type ToastCloseProps } from './ToastClose.tsx';
+export { ToastDescription, type ToastDescriptionProps, } from './ToastDescription.tsx';
+export { ToastIcon, type ToastIconProps } from './ToastIcon.tsx';
+export { ToastTitle, type ToastTitleProps } from './ToastTitle.tsx';
+export { Toaster, type ToasterProps } from './Toaster.tsx';
+export { type ToastActionDescriptor, type ToastEntry, type ToastOptions, type ToastType, type UseToastReturn, dismissAllToasts, dismissToast, toast, useToast, } from './useToast.ts';
+/** The six corners the stack can be anchored to. */
+export declare const TOAST_POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+export type ToastPosition = (typeof TOAST_POSITIONS)[number];
+/**
+ * Class names, not utilities: the declarations live in `Toaster.module.css`
+ * behind `@apply`.
+ */
+export declare const toastViewportVariants: (props?: ({
+    position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ToastViewportVariants = VariantProps<typeof toastViewportVariants>;
+export declare const toastVariants: (props?: ({
+    type?: "success" | "error" | "info" | "warning" | "neutral" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export type ToastVariants = VariantProps<typeof toastVariants>;
+/** Which way a swipe must travel to dismiss, derived from the corner. */
+export declare function toastSwipeDirection(position: ToastPosition): 'up' | 'down' | 'left' | 'right';

package/dist/Feedback/Toast/toast-context.d.ts

@@ -0,0 +1,6 @@
+import { ToastType } from './useToast.ts';
+export interface ToastContextValue {
+    type: ToastType;
+}
+export declare const ToastContext: import('react').Context<ToastContextValue>;
+export declare const useToastContext: () => ToastContextValue;

package/dist/Feedback/Toast/useToast.d.ts

@@ -0,0 +1,51 @@
+export type ToastType = 'info' | 'success' | 'warning' | 'error' | 'neutral';
+export interface ToastActionDescriptor {
+    label: string;
+    onClick: () => void;
+    /**
+     * What a screen reader is told instead of the button, which is gone before
+     * anyone can reach it — so it must describe a route that outlives the toast.
+     * Defaults to the label.
+     */
+    altText?: string;
+}
+export interface ToastOptions {
+    title: string;
+    description?: string;
+    type?: ToastType;
+    action?: ToastActionDescriptor;
+    /** Overrides the `duration` `OxToaster` was mounted with. */
+    duration?: number;
+}
+export interface ToastEntry extends ToastOptions {
+    id: string;
+    type: ToastType;
+    open: boolean;
+}
+export interface UseToastReturn {
+    toasts: readonly ToastEntry[];
+    toast: (options: ToastOptions) => string;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+}
+/**
+ * The queue read without subscribing, for tests that assert on it without
+ * rendering a viewport. Exported for them, not from the package: it is absent
+ * from `index.ts` on purpose and no consumer can reach it.
+ */
+export declare const getToasts: () => readonly ToastEntry[];
+/**
+ * The queue owns the cap rather than the viewport clipping to it, because a
+ * fourth toast has to *close* the oldest: it leaves the way any other does.
+ */
+export declare function setToastLimit(next: number): void;
+export declare function toast(options: ToastOptions): string;
+/**
+ * Closes the toast; dropping it is `removeToast`'s job, a beat later. Also the
+ * single path out of the queue, so a timer, the close button and a swipe all
+ * leave by the same route and a second call is a no-op.
+ */
+export declare function dismissToast(id: string): void;
+export declare function dismissAllToasts(): void;
+export declare function removeToast(id: string): void;
+export declare function useToast(): UseToastReturn;

package/dist/Forms/Field/useFieldGroup.d.ts

@@ -3,7 +3,7 @@
  * inside it.
  *
  * `FieldGroup` already paints its children through custom properties
- * (`--message-text-color`, `--controller-border-color`), and that stays: it is
+ * (`--ox-message-text-color`, `--ox-controller-border-color`), and that stays: it is
  * what lets a consumer's own control inherit the error colour with no prop
  * drilling. A custom property cannot carry an `id` or an `aria-invalid`,
  * though, so the accessible half needs a real context beside it.

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

@@ -0,0 +1,15 @@
+export interface ColorPickerProps {
+    className?: string;
+    children?: React.ReactNode;
+    /** The field does not open, and an open panel closes. */
+    disabled?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    dataTestid: string;
+}
+/** A field that opens a panel of the colours an application may assign. */
+export declare const ColorPicker: import('react').ForwardRefExoticComponent<ColorPickerProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/ColorPicker/ColorPickerContent.d.ts

@@ -0,0 +1,14 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+export interface ColorPickerContentProps extends Omit<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, 'side' | 'align' | 'sideOffset'> {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+    align?: 'start' | 'center' | 'end';
+    dataTestid: string;
+}
+/**
+ * The panel the swatches sit in.
+ *
+ * A radio group and not a plain box: that is what gives the set one tab stop,
+ * arrow keys between swatches, `role="radiogroup"` and an `aria-checked` each.
+ */
+export declare const ColorPickerContent: import('react').ForwardRefExoticComponent<ColorPickerContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/ColorPicker/ColorPickerSwatch.d.ts

@@ -0,0 +1,11 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+export interface ColorPickerSwatchProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'children'> {
+    /** What gets stored when this swatch is chosen. */
+    value: string;
+    /** Any CSS colour: a token (`var(--category-7)`) or a literal. */
+    color: string;
+    /** The colour's name, drawn for screen readers only. */
+    children?: React.ReactNode;
+}
+/** One colour in the panel. */
+export declare const ColorPickerSwatch: import('react').ForwardRefExoticComponent<ColorPickerSwatchProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Forms/Inputs/ColorPicker/ColorPickerTrigger.d.ts

@@ -0,0 +1,17 @@
+export interface ColorPickerTriggerProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> {
+    /** Any CSS colour: a token (`var(--category-7)`) or a literal. */
+    color?: string;
+    /** Shown while nothing is chosen. */
+    placeholder?: string;
+    /** The chosen colour's name. */
+    children?: React.ReactNode;
+}
+/**
+ * The field: the chosen colour, its name, and a chevron.
+ *
+ * Both fall back to the chosen swatch's own, so the bare field works. The prop
+ * and `children` stay because Radix keeps the panel unmounted until it opens:
+ * for a value loaded from a server whose swatch has never rendered, the caller
+ * is the only one who knows.
+ */
+export declare const ColorPickerTrigger: import('react').ForwardRefExoticComponent<ColorPickerTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,5 @@
+export { ColorPicker, type ColorPickerProps } from './ColorPicker.tsx';
+export { ColorPickerTrigger, type ColorPickerTriggerProps, } from './ColorPickerTrigger.tsx';
+export { ColorPickerContent, type ColorPickerContentProps, } from './ColorPickerContent.tsx';
+export { ColorPickerSwatch, type ColorPickerSwatchProps, } from './ColorPickerSwatch.tsx';
+export { useColorPicker, type ColorPickerContext } from './useColorPicker.ts';

package/dist/Forms/Inputs/ColorPicker/useColorPicker.d.ts

@@ -0,0 +1,21 @@
+/** What a swatch tells the root about itself, so the field can redraw it. */
+export interface ColorPickerSwatchEntry {
+    color: string;
+    name: React.ReactNode;
+}
+export interface ColorPickerContext {
+    /** The chosen colour's value, or `undefined` while nothing is chosen. */
+    value: string | undefined;
+    disabled: boolean;
+    /** Choose a colour. Closes the panel, which is what the design asks for. */
+    select: (value: string) => void;
+    /** The swatch behind the chosen value, once one has rendered. */
+    chosen: ColorPickerSwatchEntry | undefined;
+    /**
+     * Record a swatch. Never taken back on unmount: the panel unmounts every
+     * time it closes, and the field has to keep the dot and the name after it.
+     */
+    remember: (value: string, entry: ColorPickerSwatchEntry) => void;
+}
+export declare const ColorPickerContextObject: import('react').Context<ColorPickerContext | null>;
+export declare function useColorPicker(): ColorPickerContext;

package/dist/Forms/Inputs/DatePicker/DatePickerTrigger.d.ts

@@ -18,7 +18,7 @@ export interface DatePickerTriggerProps extends React.ButtonHTMLAttributes<HTMLB
  * `OxCombobox` came to disagree about a radius, a border and a background, and
  * the fix cost more than the component.
  *
- * It takes no size prop: height and radius come from the `--controller-*`
+ * It takes no size prop: height and radius come from the `--ox-controller-*`
  * variables every input in the package reads, so `inputSizeClass[size]` on any
  * ancestor sizes it. Its declarations are `OxSelectTrigger`'s, so the two sit
  * level in one form.

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

@@ -0,0 +1,42 @@
+export interface IconPickerProps {
+    className?: string;
+    children?: React.ReactNode;
+    /** The field does not open, and an open panel closes. */
+    disabled?: boolean;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    dataTestid: string;
+}
+/**
+ * A field that opens a searchable panel of icons — the one on a folder, a
+ * shortcut or a category.
+ *
+ * **The set is composed, not configured.** An item carries its own icon and
+ * its own name, exactly as `OxColorPickerSwatch` carries its own colour, so
+ * the caller writes the icons they want and this component binds none of its
+ * own. That is the whole bundle argument in one sentence and it is worth
+ * spelling out, because the obvious alternative looks friendlier and is not:
+ *
+ * `@sesame/orxata-icons` ships 511 icons, about 85 KB gzipped once the markup,
+ * the barrel and its re-export chain are counted. A picker that knew them all
+ * would have to reach the barrel from inside this package, which
+ * `orxata/icon-import-per-icon` forbids for a documented reason — an icon
+ * pulled through the barrel survives in the design system's own bundle and only
+ * drops out if the *consumer's* bundler walks it, so the package's size becomes
+ * a claim about someone else's toolchain. Everyone installing the design system
+ * for one button would pay for that being wrong. Composed, a caller pays for
+ * the icons they actually listed and nothing else.
+ *
+ * Radix's `Popover.Root` renders no element of its own, so the wrapper below is
+ * what carries `data-slot`, `data-testid` and the class. Both the value and the
+ * open state keep an uncontrolled path, gated on the **handler** the way the
+ * Vue `defineModel` behaves: given a value and nobody listening, the picker
+ * still moves rather than being pinned to what it started on. The open state
+ * has to be held here either way — choosing an icon closes the panel, and only
+ * the side that owns the state can do that.
+ */
+export declare const IconPicker: import('react').ForwardRefExoticComponent<IconPickerProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/IconPicker/IconPickerContent.d.ts

@@ -0,0 +1,26 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+export interface IconPickerContentProps extends Omit<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>, 'side' | 'align' | 'sideOffset'> {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    sideOffset?: number;
+    align?: 'start' | 'center' | 'end';
+    dataTestid: string;
+}
+/**
+ * The panel: a search field over a grid of icons.
+ *
+ * A radio group rather than a plain box, so the whole set is one tab stop and
+ * the arrows move between icons — Radix's roving focus answers all four, which
+ * is what a wrapped grid needs. It is also what gives the set
+ * `role="radiogroup"` and each item its `aria-checked`, so the choice is
+ * announced as a choice instead of as several hundred buttons.
+ *
+ * **The search field is written here rather than composed from `OxSearchBar`,
+ * and that is not a slight on it.** `OxSearchBar` calls `useFieldControl()`,
+ * and so does the trigger. Inside an `OxFieldGroup` the trigger claims the
+ * control id first and a second claim warns — so composing it would print
+ * "more than one labelable control in a single field group" to the console
+ * every time a user opened the panel, for a field that should never have been
+ * the one the label names anyway. It names itself instead, with the same
+ * string it shows as a placeholder.
+ */
+export declare const IconPickerContent: import('react').ForwardRefExoticComponent<IconPickerContentProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/IconPicker/IconPickerItem.d.ts

@@ -0,0 +1,31 @@
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+export interface IconPickerItemProps extends Omit<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'children'> {
+    /** What gets stored when this icon is chosen. */
+    value: string;
+    /** Markup for the icon, as `@sesame/orxata-icons` exports it. */
+    icon: string;
+    /** Extra words the search should match besides `value`. */
+    keywords?: string[];
+    /** The icon's name, drawn for screen readers only. */
+    children?: React.ReactNode;
+}
+/**
+ * One icon in the panel.
+ *
+ * The name goes in `children` and is drawn for screen readers only: there is no
+ * room for it under a 20px glyph, and the design asks for it twice over — the
+ * item needs an accessible name, and nobody should have to tell the icons apart
+ * by shape. The field shows the same name in full.
+ *
+ * **The item decides its own visibility**, which is why the search lives in the
+ * root's context rather than in the panel: the panel would otherwise have to
+ * filter children it did not write. An item that does not survive the term
+ * renders nothing at all, so its SVG is not in the document either.
+ *
+ * `keywords` is where synonyms go — "notification", "alarm" for a bell — and it
+ * is a caller's to supply for the same reason the icons are. This package holds
+ * no synonyms for its icons in any language, and a design system that shipped
+ * Spanish ones would be shipping a search that works in one of the ten locales
+ * it translates.
+ */
+export declare const IconPickerItem: import('react').ForwardRefExoticComponent<IconPickerItemProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Forms/Inputs/IconPicker/IconPickerTrigger.d.ts

@@ -0,0 +1,19 @@
+export interface IconPickerTriggerProps extends Omit<React.ComponentPropsWithoutRef<'button'>, 'children'> {
+    /** Markup for the chosen icon, as `@sesame/orxata-icons` exports it. */
+    icon?: string;
+    /** Shown while nothing is chosen. */
+    placeholder?: string;
+    /** The chosen icon's name. */
+    children?: React.ReactNode;
+}
+/**
+ * The field: the chosen icon, its name, and a chevron.
+ *
+ * The name is `children` and the icon is a prop, both describing the *current*
+ * selection — which is the one thing a registry fed by the items could not do.
+ * Radix keeps a popover's content unmounted until it opens, so no item has run
+ * by the time a form renders an icon it loaded from a server: the common case,
+ * not the edge case. A caller who wrote the set already holds the mapping, so
+ * it is asked for here rather than guessed at.
+ */
+export declare const IconPickerTrigger: import('react').ForwardRefExoticComponent<IconPickerTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;

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

@@ -0,0 +1,5 @@
+export { IconPicker, type IconPickerProps } from './IconPicker.tsx';
+export { IconPickerTrigger, type IconPickerTriggerProps, } from './IconPickerTrigger.tsx';
+export { IconPickerContent, type IconPickerContentProps, } from './IconPickerContent.tsx';
+export { IconPickerItem, type IconPickerItemProps } from './IconPickerItem.tsx';
+export { useIconPicker, type IconPickerContext } from './useIconPicker.ts';

package/dist/Forms/Inputs/IconPicker/useIconPicker.d.ts

@@ -0,0 +1,44 @@
+export interface IconPickerContext {
+    /** The chosen icon's value, or `undefined` while nothing is chosen. */
+    value: string | undefined;
+    disabled: boolean;
+    /** Choose an icon. Closes the panel, which is what the design asks for. */
+    select: (value: string) => void;
+    /** What the panel's search field shows. Cleared when the panel closes. */
+    term: string;
+    setTerm: (term: string) => void;
+    /** Whether an item survives the current term. An item asks about itself. */
+    matches: (value: string, keywords?: string[]) => boolean;
+    /**
+     * An item announces itself while it is mounted, and gets back the call that
+     * takes it away again.
+     *
+     * Only ever read to answer "did the term match nothing at all", which is the
+     * one question an item cannot answer about itself. Deliberately not what the
+     * trigger reads: the panel is unmounted until it opens, so at the moment a
+     * form first paints a value loaded from a server this registry is empty —
+     * which is why the trigger is handed its icon directly instead.
+     */
+    register: (value: string, keywords?: string[]) => () => void;
+    /** False only when a term is in the field and nothing survived it. */
+    hasMatches: boolean;
+}
+export declare const IconPickerContextObject: import('react').Context<IconPickerContext | null>;
+/**
+ * Throwing, unlike `useFieldGroup` — a trigger with no root has nothing to
+ * open and an item with no root has nothing to tell, so neither one has a
+ * sensible way to render.
+ */
+export declare function useIconPicker(): IconPickerContext;
+/**
+ * Case- and accent-insensitive substring matching, over an item's value and
+ * whatever else the caller says it is called.
+ *
+ * The accents are not a flourish: this package ships ten locales, so the names
+ * a Spanish or French caller writes into `keywords` carry them while nobody
+ * types them into a search box. `NFD` splits a letter from its mark and the
+ * range drops the marks, so `nomina` finds `nómina`.
+ */
+export declare function normalize(text: string): string;
+/** True when every word of `term` appears somewhere in `haystack`. */
+export declare function matchesTerm(term: string, haystack: string[]): boolean;

package/dist/Forms/Inputs/InputOtp/InputOtpGroup/InputOtpGroup.d.ts

@@ -1,3 +1,7 @@
 export type InputOtpGroupProps = React.HTMLAttributes<HTMLDivElement>;
-/** InputOtpGroup — visual cluster of slots; its test id follows mount order. */
+/**
+ * InputOtpGroup — welds the slots it holds into one bar, which is the design's
+ * `Style=Default`; slots left directly in the root keep the root's gap instead,
+ * which is `Style=Separated`. Its test id follows mount order.
+ */
 export declare const InputOtpGroup: import('react').ForwardRefExoticComponent<InputOtpGroupProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Forms/Inputs/InputOtp/types.d.ts

@@ -1,6 +1,6 @@
 export interface InputOtpProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {
     dataTestid: string;
-    size?: 'sm' | 'md' | 'lg';
+    size?: 'xs' | 'sm' | 'md' | 'lg';
     type?: 'text' | 'number';
     otp?: boolean;
     /** Render every slot as a password field. */

package/dist/Forms/Inputs/Select/SelectTrigger.d.ts

@@ -18,7 +18,7 @@ export interface SelectTriggerProps extends Omit<React.ComponentPropsWithoutRef<
 /**
  * The button that opens the list and shows the current value.
  *
- * It takes no size prop: height and radius come from the `--controller-*`
+ * It takes no size prop: height and radius come from the `--ox-controller-*`
  * variables shared with every other input, so `inputSizeClass[size]` on any
  * ancestor drives it.
  */

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

@@ -11,14 +11,38 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
      * padding.
      */
     maxRows?: number;
+    /**
+     * The character limit the built-in counter counts to. Set it and the counter
+     * appears; leave it out and there is none.
+     *
+     * A soft limit: nothing here stops the field going past it. That is the
+     * point — `OxCounter` turns red once the value is over, which is the moment
+     * the counter is worth having, and a hard `maxLength` would make that moment
+     * unreachable.
+     */
+    counterMax?: number;
+    /**
+     * Draws the native grip in the bottom-right corner and lets the user drag
+     * the field taller or shorter. Vertical only — a width dragged by hand would
+     * take the field out of the column its field group puts it in.
+     *
+     * Off by default, because Figma draws no grip in any of the six states it
+     * documents and the growth already covers the ordinary case. Turn it on for
+     * a field someone writes paragraphs into, where four rows and a scroll is
+     * not enough room to see what you wrote.
+     *
+     * The drag wins over `maxRows`: the growth stops writing the height the
+     * moment the user has chosen one, or the next keystroke would undo the drag.
+     */
+    resizable?: boolean;
     /** Controlled value. Pair with `onFieldChange`; omit for uncontrolled. */
     field?: string;
     /** Called on every input with the next value. */
     onFieldChange?: (value: string) => void;
     /**
-     * Bottom-right inside the box. A node, or a render prop called with
-     * `{ value, length }` — the limit is the caller's business and the count is
-     * the value's, so neither is a prop.
+     * Overrides what `counterMax` would draw bottom-right inside the box. A node,
+     * or a render prop called with `{ value, length }`, for a word count or a
+     * hint rather than the character counter.
      */
     counter?: ReactNode | ((state: TextareaCounterState) => ReactNode);
     dataTestid: string;
@@ -53,6 +77,27 @@ export interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTex
  * </OxFieldGroup>
  * ```
  *
+ * **`counterMax` is the switch the design calls ‘Show counter’.** It is a
+ * limit rather than a boolean because a counter needs a number to count to,
+ * and the component already knows the other one — so an `<OxCounter>` appears
+ * bottom-right inside the box with nothing else to wire:
+ *
+ * ```tsx
+ * <OxTextarea counterMax={100} dataTestid="notes" />
+ * ```
+ *
+ * The limit is deliberately **not** read from `maxLength`, even though a caller
+ * may well write one too. `maxLength` is a hard stop — the browser refuses the
+ * keystroke — so a counter that counted to it could never reach the over-limit
+ * state `OxCounter` draws in red, and the one case the counter exists to warn
+ * about would be the one it never showed. The soft limit and the hard one are
+ * different numbers, and often only one of them is wanted.
+ *
+ * The `counter` prop still overrides what is drawn there. It takes a render
+ * prop handed `{ value, length }`, both read off the field, so it works for the
+ * uncontrolled case too — a field posting itself in a plain `<form>`, where the
+ * caller has no value to count.
+ *
  * **`field` alone does not mean "controlled" — `field` *with* `onFieldChange`
  * does.** The Vue original is a `defineModel`, and a `defineModel` only hands
  * control to the parent when the parent actually listens; given a value and no

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

@@ -1,6 +1,7 @@
 export { Textarea, type TextareaProps } from './Textarea.tsx';
 /**
- * What the `counter` slot is handed.
+ * What the `counter` render prop is handed when a caller overrides the counter
+ * `counterMax` would otherwise draw.
  *
  * Both numbers come from the field rather than from the caller, so a counter
  * works the same whether the value is controlled or left to the textarea — an
@@ -9,7 +10,7 @@ export { Textarea, type TextareaProps } from './Textarea.tsx';
  *
  * There is no `cva` here on purpose. `Textarea` has no variants: the design
  * draws one box, and its states come from `OxFieldGroup` through the
- * `--controller-*` properties rather than from a class this component picks.
+ * `--ox-controller-*` properties rather than from a class this component picks.
  * An empty variant map would be one more thing to keep in step across two
  * packages in exchange for nothing.
  */

package/dist/Forms/Inputs/Toggle/Switch/Switch.d.ts

@@ -1,7 +1,18 @@
 export interface SwitchProps extends Omit<React.ComponentPropsWithoutRef<'div'>, 'onChange' | 'children'> {
     checked?: boolean;
+    /** `regular` is the board's default variant; `small` is for dense panels. */
     size?: 'small' | 'regular';
     disabled?: boolean;
+    /**
+     * A boolean rather than a node, because the board's `Icon` axis is a boolean
+     * and the glyphs are fixed: `icon-check` when on, `icon-x` when off. That is
+     * the control's own vocabulary — a checkbox's tick, not caller content.
+     *
+     * `children` survives as the escape hatch and wins when it is passed; it now
+     * lands inside the thumb, where the board's glyph is, rather than on the
+     * track, where it used to.
+     */
+    icon?: boolean;
     onCheckedChange?: (checked: boolean) => void;
     children?: React.ReactNode;
 }

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

@@ -6,6 +6,8 @@ export * from './InputOtp/index.ts';
 export * from './Calendar/index.ts';
 export * from './Combobox/index.ts';
 export * from './ChatInput/index.ts';
+export * from './ColorPicker/index.ts';
+export * from './IconPicker/index.ts';
 export * from './DatePicker/index.ts';
 export * from './SearchBar/index.ts';
 export * from './SearchPanel/index.ts';

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

@@ -3,5 +3,5 @@
  * the public vocabulary — a consumer can apply `input-{size}` to an ancestor
  * and every descendant control that reads the custom properties follows.
  */
-export type InputSize = 'sm' | 'md' | 'lg';
+export type InputSize = 'xs' | 'sm' | 'md' | 'lg';
 export declare const inputSizeClass: Record<InputSize, string>;

package/dist/Layout/Scrollbar/Scrollbar.d.ts

@@ -26,8 +26,8 @@ export interface ScrollbarProps extends Omit<React.HTMLAttributes<HTMLDivElement
  * **Placement is the parent's.** This positions itself absolutely inside the
  * nearest positioned ancestor and reads four custom properties for where that
  * is, all with fallbacks that spell "fill the containing block down its right
- * edge": `--scrollbar-top` (`0px`), `--scrollbar-right` (`0px`),
- * `--scrollbar-left` (`auto`) and `--scrollbar-height` (`100%`).
+ * edge": `--ox-scrollbar-top` (`0px`), `--ox-scrollbar-right` (`0px`),
+ * `--ox-scrollbar-left` (`auto`) and `--ox-scrollbar-height` (`100%`).
  *
  * A parent whose scrollport *is* the containing block sets none of them. One
  * that has to compensate for something — a header inside the scrollport, an

package/dist/Navigation/Stepper/Stepper.d.ts

@@ -0,0 +1,23 @@
+import { StepperOrientation } from './useStepper.ts';
+export interface StepperProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Which way the steps run. Horizontal is a row of pills for a wizard header;
+     * vertical is a rail with a connector for a side panel.
+     */
+    orientation?: StepperOrientation;
+    /** Which step is active, one-based — the number printed in the step's own circle. */
+    current?: number;
+    defaultCurrent?: number;
+    onCurrentChange?: (current: number) => void;
+    /** Title above a vertical stepper. */
+    header?: React.ReactNode;
+    /** The line under the title — "Step 2 of 3", in your words. */
+    headerDescription?: React.ReactNode;
+    dataTestid: string;
+}
+/**
+ * Where you are in a linear flow of three to five steps. Port of
+ * `core/src/Navigation/Stepper/Stepper.vue`; Radix has no Stepper, so the
+ * behaviour is implemented here rather than matched to a primitive's DOM.
+ */
+export declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/Stepper/StepperItem.d.ts

@@ -0,0 +1,13 @@
+export interface StepperItemProps extends React.LiHTMLAttributes<HTMLLIElement> {
+    /** Its position in the flow, one-based, and the number printed in the circle. */
+    step: number;
+    /** Marks a step the user has to come back to, whatever the current step is. */
+    error?: boolean;
+    /** The line under the label, in a vertical stepper. */
+    description?: React.ReactNode;
+}
+/**
+ * One step, with its state read off its own number and the root's current one.
+ * Port of `core/src/Navigation/Stepper/StepperItem.vue`.
+ */
+export declare const StepperItem: import('react').ForwardRefExoticComponent<StepperItemProps & import('react').RefAttributes<HTMLLIElement>>;

package/dist/Navigation/Stepper/StepperSubsteps.d.ts

@@ -0,0 +1,12 @@
+export interface StepperSubstepsProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** How many sub-steps this step has */
+    count: number;
+    /** Which one is showing, one-based */
+    current?: number;
+    dataTestid: string;
+}
+/**
+ * The dots under a step that is itself several screens long — 3.1, 3.2, 3.3.
+ * Port of `core/src/Navigation/Stepper/StepperSubsteps.vue`.
+ */
+export declare const StepperSubsteps: import('react').ForwardRefExoticComponent<StepperSubstepsProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/Navigation/Stepper/index.d.ts

@@ -0,0 +1,4 @@
+export { Stepper, type StepperProps } from './Stepper.tsx';
+export { StepperItem, type StepperItemProps } from './StepperItem.tsx';
+export { StepperSubsteps, type StepperSubstepsProps, } from './StepperSubsteps.tsx';
+export { isStepNavigable, stepperState, useStepper, type StepperContextValue, type StepperOrientation, type StepperState, } from './useStepper.ts';

package/dist/Navigation/Stepper/useStepper.d.ts

@@ -0,0 +1,25 @@
+export type StepperOrientation = 'horizontal' | 'vertical';
+export type StepperState = 'completed' | 'current' | 'upcoming' | 'error';
+export interface StepperContextValue {
+    current: number;
+    /** The furthest step this flow has reached, which only ever rises. */
+    furthest: number;
+    orientation: StepperOrientation;
+    dataTestid: string;
+    goTo: (step: number) => void;
+}
+export declare const StepperContext: import('react').Context<StepperContextValue | null>;
+export declare const useStepper: () => StepperContextValue;
+/** Where a step stands relative to the current one; `error` is not a position. */
+export declare const stepperState: (step: number, current: number, error?: boolean) => StepperState;
+/**
+ * Where you have been you may go back to — and where you have been is not where
+ * you are. Walk to step 3 and back to step 1 and steps 2 and 3 read `upcoming`
+ * again while still being filled in, so this asks `furthest` rather than the
+ * state: a position remembers nothing.
+ *
+ * An errored step is reachable whatever the high-water mark says — it is the one
+ * you are being sent back to. The step you are standing on never is, errored or
+ * not, since there is nowhere to go.
+ */
+export declare const isStepNavigable: (step: number, current: number, furthest: number, error?: boolean) => boolean;