prime-ui-kit 0.9.0 → 0.9.1

package/dist/components/smart-filter/SmartFilter.d.ts

@@ -0,0 +1,105 @@
+import * as React from "react";
+import type { ControlSize } from "@/internal/states";
+import { type SmartFilterValue } from "./model";
+export type { SmartFilterMode, SmartFilterSelection, SmartFilterValue } from "./model";
+export { matchesSmartFilter, resolveSmartFilterValues } from "./model";
+export type SmartFilterOption = {
+    value: string;
+    label: string;
+    /** A decorative icon before the label (`<Icon name="…" />`). */
+    icon?: React.ReactNode;
+};
+export type SmartFilterField = {
+    /** Key of the field in the value. */
+    key: string;
+    label: string;
+    options: SmartFilterOption[];
+    /**
+     * A fixed set of values (default `true`): hiding every value at once is not allowed. Set `false`
+     * for an open set (services, users) that can change under the selection.
+     */
+    finite?: boolean;
+};
+/** System strings. `{query}`, `{value}`, `{field}`, `{fields}`, `{count}` are substituted. */
+export type SmartFilterLabels = {
+    /** Text of the filter button. */
+    filter: string;
+    /** Placeholder and accessible name of the search field. */
+    searchPlaceholder: string;
+    /** `aria-label` of the search clear button. */
+    clearSearch: string;
+    /** The first row of the panel while typing. */
+    searchText: string;
+    /** Fields with no matches while typing. */
+    noMatches: string;
+    /** Footer hint. */
+    hint: string;
+    /** Footer counter. */
+    count: string;
+    /** Footer reset button. */
+    reset: string;
+    /** Collapsed values of a field. */
+    more: string;
+    /** Chips row: the add button. */
+    add: string;
+    /** Chips row: clear all. */
+    clearAll: string;
+    /** Title of a value. */
+    showValue: string;
+    /** Name of the «−» action of a value. */
+    hideValue: string;
+    /** Name of the «−» action of a hidden value. */
+    unhideValue: string;
+    /** Prefix of a hidden value. */
+    not: string;
+    /** Text of a "show" tag. */
+    chipInclude: string;
+    /** Text of a "hide" tag. */
+    chipExclude: string;
+    /** `aria-label` of a tag's remove button. */
+    remove: string;
+};
+export type SmartFilterRootProps = {
+    /** The fields this screen filters by, in display order. Empty: only the search remains. */
+    fields: readonly SmartFilterField[];
+    /** Selection per field key. */
+    value?: SmartFilterValue;
+    defaultValue?: SmartFilterValue;
+    onValueChange?: (value: SmartFilterValue) => void;
+    /** Free-text search. Applied as typed; debounce it in the owner if needed. */
+    search?: string;
+    defaultSearch?: string;
+    onSearchChange?: (search: string) => void;
+    size?: ControlSize;
+    /** Values of one field shown before «Ещё N». Default 12. */
+    collapsedLimit?: number;
+    labels?: Partial<SmartFilterLabels>;
+    className?: string;
+    /** `SmartFilter.Toolbar` and `SmartFilter.Chips`. */
+    children: React.ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function SmartFilterRoot({ fields, value, defaultValue, onValueChange, search, defaultSearch, onSearchChange, size, collapsedLimit, labels, className, children, ref, }: SmartFilterRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SmartFilterRoot {
+    var displayName: string;
+}
+export type SmartFilterToolbarProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function SmartFilterToolbar({ className, ...rest }: SmartFilterToolbarProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SmartFilterToolbar {
+    var displayName: string;
+}
+export type SmartFilterChipsProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** The applied filters as removable tags, with "add" and "clear all". Renders nothing without filters. */
+declare function SmartFilterChips({ className, ...rest }: SmartFilterChipsProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace SmartFilterChips {
+    var displayName: string;
+}
+export declare const SmartFilter: {
+    Root: typeof SmartFilterRoot;
+    Toolbar: typeof SmartFilterToolbar;
+    Chips: typeof SmartFilterChips;
+};

package/dist/components/smart-filter/model.d.ts

@@ -0,0 +1,33 @@
+/**
+ * The filter model: every field has two lists, what to show and what to hide. Pure functions with
+ * no state; the owner keeps the value (`SmartFilter.Root value / onValueChange`).
+ */
+export type SmartFilterSelection = {
+    /** Values to show. Empty means "any". */
+    include: string[];
+    /** Values to hide. */
+    exclude: string[];
+};
+/** Selection per field key. Fields without a selection are absent. */
+export type SmartFilterValue = Record<string, SmartFilterSelection>;
+export type SmartFilterMode = "include" | "exclude";
+export declare function selectionModeOf(selection: SmartFilterSelection | undefined, value: string): SmartFilterMode | null;
+/** Sets the mode of a value; asking for the mode it already has clears it. A value is never in both lists. */
+export declare function toggleSelectionMode(selection: SmartFilterSelection | undefined, value: string, mode: SmartFilterMode): SmartFilterSelection;
+/** Drops a value from both lists. */
+export declare function removeSelectionValue(selection: SmartFilterSelection | undefined, value: string): SmartFilterSelection;
+export declare function selectionSize(selection: SmartFilterSelection | undefined): number;
+/** Sets one field's selection; an empty selection removes the field from the value. */
+export declare function withSelection(value: SmartFilterValue, key: string, selection: SmartFilterSelection): SmartFilterValue;
+/**
+ * For a field with a fixed set of values: whether `value` can be hidden without hiding everything.
+ * "Everything hidden" is an empty result, so it is not allowed.
+ */
+export declare function canExcludeValue(selection: SmartFilterSelection | undefined, value: string, all: readonly string[]): boolean;
+/** Whether a value passes a selection: `include` empty means any, `exclude` rejects. */
+export declare function matchesSmartFilter(selection: SmartFilterSelection | undefined, value: string): boolean;
+/**
+ * Turns a selection over a fixed set of values into the list to ask a server for: "hide" becomes
+ * "all except". An empty array means no filter (also when the selection covers every value).
+ */
+export declare function resolveSmartFilterValues(selection: SmartFilterSelection | undefined, all: readonly string[]): string[];

package/dist/components/spinner/Spinner.d.ts

@@ -0,0 +1,22 @@
+import * as React from "react";
+import type { ControlSize, TextTone } from "@/internal/states";
+export type SpinnerLabels = {
+    /** Text read by screen readers while the spinner is shown. */
+    loading: string;
+};
+export type SpinnerProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /**
+     * Explicit size on the icon scale (xs 14 · s 16 · m 20 · l 24 · xl 32). Without it the spinner
+     * follows its host like an `Icon`: the host's icon size, else the nearest control tier, else 16.
+     */
+    size?: ControlSize;
+    /** Ring color; `default` inherits `currentColor`. */
+    tone?: TextTone;
+    labels?: Partial<SpinnerLabels>;
+    ref?: React.Ref<HTMLSpanElement>;
+};
+/**
+ * Indeterminate loading indicator: a rotating ring with a gap. A `role="status"` region with
+ * `labels.loading` for screen readers; pass `aria-hidden` when the host already says it is busy.
+ */
+export declare function Spinner({ size: sizeProp, tone, labels: labelsProp, className, ...rest }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/stepper/Stepper.d.ts

@@ -1,79 +1,70 @@
 import * as React from "react";
 import type { ControlSize } from "@/internal/states";
-/** Step state: derived from the Root `value` (before → `completed`, equal → `active`, after → `pending`) unless set on the step. */
-export type StepperStepStatus = "pending" | "active" | "completed" | "error";
-export type StepperRootProps = {
+/** Item state: derived from the Root `value` (before → `completed`, equal → `active`, after → `pending`) unless set on the item. */
+export type StepperItemStatus = "pending" | "active" | "completed" | "danger";
+export type StepperRootProps = Omit<React.OlHTMLAttributes<HTMLOListElement>, "defaultValue" | "onChange"> & {
     /** Default `vertical`. A horizontal stepper stacks vertically in containers narrower than 480px. */
     orientation?: "horizontal" | "vertical";
     /** Current step (0-based), controlled. */
     value?: number;
     /** Initial step when uncontrolled. Default `0`. */
     defaultValue?: number;
-    /** Called with the step index when a step is clicked. */
+    /** Called with the item index when an item is clicked. */
     onValueChange?: (index: number) => void;
     size?: ControlSize;
-    /** `Stepper.Step` elements as direct children (an array from `map` is fine). */
-    children: React.ReactNode;
-    className?: string;
-} & Omit<React.OlHTMLAttributes<HTMLOListElement>, "children" | "defaultValue" | "onChange">;
+    ref?: React.Ref<HTMLOListElement>;
+};
 declare function StepperRoot({ orientation, value: valueProp, defaultValue, onValueChange, size, children, className, ...rest }: StepperRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace StepperRoot {
     var displayName: string;
 }
-export type StepperStepProps = {
-    /** Overrides the status derived from the Root `value` (e.g. `error`). */
-    status?: StepperStepStatus;
-    children: React.ReactNode;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "children">;
-export type StepperIndicatorProps = {
-    /** Replaces the default content (step number, or a check when completed). */
+export type StepperItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
+    /** Overrides the status derived from the Root `value` (e.g. `danger`). */
+    status?: StepperItemStatus;
+    ref?: React.Ref<HTMLButtonElement>;
+};
+declare function StepperItem({ status: statusProp, children, className, disabled, onClick, ...rest }: StepperItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace StepperItem {
+    var displayName: string;
+}
+type SpanProps = React.HTMLAttributes<HTMLSpanElement> & {
+    ref?: React.Ref<HTMLSpanElement>;
+};
+export type StepperIndicatorProps = SpanProps & {
+    /** Replaces the default content (the item number, or a check when completed). */
     children?: React.ReactNode;
-    className?: string;
 };
-declare function StepperIndicator({ children, className }: StepperIndicatorProps): import("react/jsx-runtime").JSX.Element;
+declare function StepperIndicator({ children, className, ...rest }: StepperIndicatorProps): import("react/jsx-runtime").JSX.Element;
 declare namespace StepperIndicator {
     var displayName: string;
 }
-export type StepperContentProps = {
-    children: React.ReactNode;
-    className?: string;
-};
+export type StepperContentProps = SpanProps;
 /** Text column: `Stepper.Title` and optional `Stepper.Description`. */
-declare function StepperContent({ children, className }: StepperContentProps): import("react/jsx-runtime").JSX.Element;
+declare function StepperContent({ className, ...rest }: StepperContentProps): import("react/jsx-runtime").JSX.Element;
 declare namespace StepperContent {
     var displayName: string;
 }
-export type StepperTitleProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-declare function StepperTitle({ children, className }: StepperTitleProps): import("react/jsx-runtime").JSX.Element;
+export type StepperTitleProps = SpanProps;
+declare function StepperTitle({ className, ...rest }: StepperTitleProps): import("react/jsx-runtime").JSX.Element;
 declare namespace StepperTitle {
     var displayName: string;
 }
-export type StepperDescriptionProps = {
-    children: React.ReactNode;
-    className?: string;
-};
-declare function StepperDescription({ children, className }: StepperDescriptionProps): import("react/jsx-runtime").JSX.Element;
+export type StepperDescriptionProps = SpanProps;
+declare function StepperDescription({ className, ...rest }: StepperDescriptionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace StepperDescription {
     var displayName: string;
 }
-export type StepperArrowProps = {
-    className?: string;
+export type StepperArrowProps = Omit<React.SVGAttributes<SVGSVGElement>, "children"> & {
+    ref?: React.Ref<SVGSVGElement>;
 };
-/** Trailing chevron for vertical steps that open a page or panel. */
-declare function StepperArrow({ className }: StepperArrowProps): import("react/jsx-runtime").JSX.Element;
+/** Trailing chevron for vertical items that open a page or panel. */
+declare function StepperArrow({ className, ...rest }: StepperArrowProps): import("react/jsx-runtime").JSX.Element;
 declare namespace StepperArrow {
     var displayName: string;
 }
 export declare const Stepper: {
     Root: typeof StepperRoot;
-    Step: React.ForwardRefExoticComponent<{
-        /** Overrides the status derived from the Root `value` (e.g. `error`). */
-        status?: StepperStepStatus;
-        children: React.ReactNode;
-    } & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children" | "type"> & React.RefAttributes<HTMLButtonElement>>;
+    Item: typeof StepperItem;
     Indicator: typeof StepperIndicator;
     Content: typeof StepperContent;
     Title: typeof StepperTitle;
@@ -81,4 +72,3 @@ export declare const Stepper: {
     Arrow: typeof StepperArrow;
 };
 export {};
-//# sourceMappingURL=Stepper.d.ts.map

package/dist/components/switch/Switch.d.ts

@@ -1,52 +1,34 @@
-import * as React from "react";
+import type * as React from "react";
+import { type ChoiceLabelProps } from "@/internal/ChoiceField";
 import type { ControlSize } from "@/internal/states";
-type InputPassthrough = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "checked" | "defaultChecked" | "onChange" | "children">;
-export type SwitchRootProps = InputPassthrough & {
+export type SwitchRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "checked" | "defaultChecked" | "onChange"> & {
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
-    /** Invalid state; also set while a `Switch.Error` is mounted. */
+    /** Invalid state; a non-empty `error` implies it. */
     invalid?: boolean;
+    /** Help text under the label text. Hidden while `error` is shown. */
+    hint?: React.ReactNode;
+    /** Error message in the hint slot; implies `invalid`. */
+    error?: React.ReactNode;
+    /** Tier. Default: the tier of the surrounding control (a form, a panel), else `m`. */
     size?: ControlSize;
-    /** Stretch to the container width. By default the field is as wide as its content. */
-    fullWidth?: boolean;
+    /** `Switch.Label`; without it only the track renders (give it an `aria-label`). */
     children?: React.ReactNode;
+    /** The native `role="switch"` input. */
+    ref?: React.Ref<HTMLInputElement>;
 };
-export type SwitchLabelProps = {
-    children?: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLLabelElement>, "htmlFor" | "size">;
-export type SwitchHintProps = {
-    children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLParagraphElement>, "id">;
-declare function SwitchHint({ children, className, ...rest }: SwitchHintProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SwitchHint {
+declare function SwitchRoot({ id, checked: checkedProp, defaultChecked, onCheckedChange, invalid, hint, error, size: sizeProp, disabled, readOnly, className, "aria-describedby": ariaDescribedBy, children, ref, ...inputRest }: SwitchRootProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SwitchRoot {
     var displayName: string;
 }
-export type SwitchErrorProps = SwitchHintProps;
-declare function SwitchError({ children, className, ...rest }: SwitchErrorProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SwitchError {
+export type SwitchLabelProps = ChoiceLabelProps;
+declare function SwitchLabel(props: SwitchLabelProps): import("react/jsx-runtime").JSX.Element;
+declare namespace SwitchLabel {
     var displayName: string;
 }
 export declare const Switch: {
-    Root: React.ForwardRefExoticComponent<InputPassthrough & {
-        checked?: boolean;
-        defaultChecked?: boolean;
-        onCheckedChange?: (checked: boolean) => void;
-        /** Invalid state; also set while a `Switch.Error` is mounted. */
-        invalid?: boolean;
-        size?: ControlSize;
-        /** Stretch to the container width. By default the field is as wide as its content. */
-        fullWidth?: boolean;
-        children?: React.ReactNode;
-    } & React.RefAttributes<HTMLInputElement>>;
-    Label: React.ForwardRefExoticComponent<{
-        children?: React.ReactNode;
-        className?: string;
-    } & Omit<React.HTMLAttributes<HTMLLabelElement>, "size" | "htmlFor"> & React.RefAttributes<HTMLLabelElement>>;
-    Hint: typeof SwitchHint;
-    Error: typeof SwitchError;
+    Root: typeof SwitchRoot;
+    Label: typeof SwitchLabel;
 };
 export {};
-//# sourceMappingURL=Switch.d.ts.map

package/dist/components/tabs/Tabs.d.ts

@@ -1,86 +1,110 @@
 import * as React from "react";
-import type { ControlSize, PaletteColor } from "@/internal/states";
-export type TabsRootProps = {
+import { type ControlSize, type PaletteColor } from "@/internal/states";
+export type TabsLabels = {
+    /** Name of the close button of a removable tab; `{label}` is the tab's title. */
+    remove: string;
+};
+type TabsOrientation = "horizontal" | "vertical";
+export type TabsRootProps = Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue"> & {
     value?: string;
     defaultValue?: string;
     onValueChange?: (value: string) => void;
     /** Default `horizontal`. A vertical list stacks above the panel in containers narrower than 600px. */
-    orientation?: "horizontal" | "vertical";
+    orientation?: TabsOrientation;
     size?: ControlSize;
-    children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "defaultValue" | "children">;
-declare function TabsRoot({ value, defaultValue, onValueChange, orientation, size, children, className, ...rest }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
+    /** Text and icon colour of the active tab. Default `neutral`: primary text, accent icon. */
+    tone?: "neutral" | "accent";
+    /** Horizontal tabs share the list width. Default `true`; `false` sizes each tab to its content. */
+    fullWidth?: boolean;
+    /** Narrowest a horizontal tab with a label gets before the list scrolls (px or a CSS length). */
+    minItemWidth?: number | string;
+    /** Widest a horizontal tab gets (px or a CSS length); a longer label ends with an ellipsis. */
+    maxItemWidth?: number | string;
+    labels?: Partial<TabsLabels>;
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function TabsRoot({ value, defaultValue, onValueChange, orientation, size, tone, fullWidth, minItemWidth, maxItemWidth, labels, children, className, style, ...rest }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsRoot {
     var displayName: string;
 }
-export type TabsListProps = {
-    children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
-declare function TabsList({ children, className, ...rest }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+export type TabsListProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+declare function TabsList({ children, className, ref, ...rest }: TabsListProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsList {
     var displayName: string;
 }
-export type TabsTriggerProps = {
+export type TabsItemProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "type" | "role" | "onClick"> & {
     value: string;
     disabled?: boolean;
+    /**
+     * Makes the tab closable: a close button, `Delete` / `Backspace` on the focused tab and a middle
+     * click. Closing the active tab first selects its neighbour; remove the item in this callback.
+     */
+    onRemove?: () => void;
     /**
      * Plain text, or parts: `Tabs.Icon`, `Tabs.Label`, `Tabs.Count`, `Tabs.Description`.
-     * A `Tabs.Description` makes the trigger two-line and becomes its accessible description.
+     * A `Tabs.Description` makes the item two-line and becomes its accessible description.
      */
     children: React.ReactNode;
-    className?: string;
-} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "value" | "children" | "type" | "role" | "onClick">;
-declare function TabsTrigger({ value, disabled, children, className, ...rest }: TabsTriggerProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TabsTrigger {
+    ref?: React.Ref<HTMLButtonElement>;
+};
+declare function TabsItem({ value, disabled, onRemove, children, className, onKeyDown, onMouseDown, onAuxClick, ref, ...rest }: TabsItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabsItem {
     var displayName: string;
 }
-export type TabsIconProps = {
+export type TabsIconProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
+    ref?: React.Ref<HTMLSpanElement>;
+};
 declare function TabsIcon({ children, className, ...rest }: TabsIconProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsIcon {
     var displayName: string;
 }
-export type TabsLabelProps = {
+export type TabsLabelProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
+    ref?: React.Ref<HTMLSpanElement>;
+};
 /**
- * Trigger title; truncates with an ellipsis in a constrained row. Text labels reserve the width of
- * the medium weight, so the row does not shift when a tab becomes active.
+ * Tab title; truncates with an ellipsis in a narrow tab. Text labels reserve the width of the
+ * medium weight, so the row does not shift when a tab becomes active.
  */
 declare function TabsLabel({ children, className, ...rest }: TabsLabelProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsLabel {
     var displayName: string;
 }
-export type TabsCountProps = {
+export type TabsCountProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children" | "color"> & {
     /** Badge hue. Default `gray`. */
     color?: PaletteColor;
     children: React.ReactNode;
-    className?: string;
+    ref?: React.Ref<HTMLSpanElement>;
 };
 /** Counter next to the label: a soft badge one tier below the tabs size. */
-declare function TabsCount({ color, children, className }: TabsCountProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsCount({ color, children, className, ...rest }: TabsCountProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsCount {
     var displayName: string;
 }
-export type TabsDescriptionProps = {
+export type TabsDescriptionProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
     /** Muted second line; wrap a key value in `<strong>` to emphasize it. */
     children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLSpanElement>, "children">;
+    ref?: React.Ref<HTMLSpanElement>;
+};
 declare function TabsDescription({ children, className, ...rest }: TabsDescriptionProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsDescription {
     var displayName: string;
 }
-export type TabsPanelProps = {
+export type TabsSeparatorProps = Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
+    ref?: React.Ref<HTMLDivElement>;
+};
+/** A `Divider` hairline between groups of tabs, across the list; a tablist owns only tabs. */
+declare function TabsSeparator({ className, ...rest }: TabsSeparatorProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabsSeparator {
+    var displayName: string;
+}
+export type TabsPanelProps = React.HTMLAttributes<HTMLDivElement> & {
     value: string;
-    children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLDivElement>, "children">;
+    ref?: React.Ref<HTMLDivElement>;
+};
 declare function TabsPanel({ value, children, className, ...rest }: TabsPanelProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace TabsPanel {
     var displayName: string;
@@ -88,12 +112,12 @@ declare namespace TabsPanel {
 export declare const Tabs: {
     Root: typeof TabsRoot;
     List: typeof TabsList;
-    Trigger: typeof TabsTrigger;
+    Item: typeof TabsItem;
     Icon: typeof TabsIcon;
     Label: typeof TabsLabel;
     Count: typeof TabsCount;
     Description: typeof TabsDescription;
+    Separator: typeof TabsSeparator;
     Panel: typeof TabsPanel;
 };
 export {};
-//# sourceMappingURL=Tabs.d.ts.map

package/dist/components/tag-select/TagOptionMenu.d.ts

@@ -0,0 +1,29 @@
+import type { PaletteColor } from "@/internal/states";
+export type TagOptionMenuLabels = {
+    edit: string;
+    name: string;
+    delete: string;
+    colors: string;
+    colorNames: Record<PaletteColor, string>;
+};
+type TagOptionMenuProps = {
+    value: string;
+    label: string;
+    color: PaletteColor;
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    onUpdate?: (value: string, updates: {
+        label?: string;
+        color?: PaletteColor;
+    }) => void;
+    onDelete?: (value: string) => void;
+    labels: TagOptionMenuLabels;
+    disabled: boolean;
+};
+/**
+ * The «⋯» of a TagSelect row: a Popover to rename, recolor or delete the option. The popover
+ * opens above the list (it is inside a dropdown layer) and is its own topmost layer, so presses in
+ * it never dismiss the list.
+ */
+export declare function TagOptionMenu({ value, label, color, open, onOpenChange, onUpdate, onDelete, labels, disabled, }: TagOptionMenuProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/components/tag-select/TagSelect.d.ts

@@ -1,11 +1,15 @@
-import { type FieldFrameProps } from "@/internal/FieldFrame";
-import type { ControlSize, PaletteColor } from "@/internal/states";
+import { type FieldFrameProps, type FieldRootDomProps } from "@/internal/FieldFrame";
+import { type ControlSize, type PaletteColor } from "@/internal/states";
 export type TagSelectOption = {
     value: string;
     label: string;
     color?: PaletteColor;
     disabled?: boolean;
 };
+export type TagSelectOptionUpdate = {
+    label?: string;
+    color?: PaletteColor;
+};
 export type TagSelectLabels = {
     /** Line above the list; `""` hides it. */
     panelHint: string;
@@ -13,7 +17,7 @@ export type TagSelectLabels = {
     create: string;
     /** Accessible name of a chip's remove button; `{label}` is the tag text. */
     remove: string;
-    /** Accessible name of the «+N» button; `{count}` is the number of hidden tags. */
+    /** Accessible name of the «+N» chip; `{count}` is the number of hidden tags. */
     more: string;
     /** Screen-reader announcement after a tag is removed; `{label}` is the tag text. */
     removed: string;
@@ -30,11 +34,7 @@ export type TagSelectLabels = {
     /** Muted marker after the label when `optional`. */
     optional: string;
 };
-export type TagSelectOptionUpdate = {
-    label?: string;
-    color?: PaletteColor;
-};
-export type TagSelectRootProps = FieldFrameProps & {
+export type TagSelectProps = FieldRootDomProps & FieldFrameProps & {
     /** Available tags: value, label and chip color. */
     options: TagSelectOption[];
     value?: string[];
@@ -47,7 +47,7 @@ export type TagSelectRootProps = FieldFrameProps & {
     creatable?: boolean;
     /** A new value was created (Create row or Enter), not picked from `options`. */
     onCreate?: (value: string) => void;
-    /** Chip color of values without an option color, including created ones. Default `gray`. */
+    /** Chip color of values without an option color, including created ones. */
     defaultColor?: PaletteColor;
     /** Enables the «⋯» row menu: tag name and color. `value` never changes. */
     onOptionUpdate?: (value: string, updates: TagSelectOptionUpdate) => void;
@@ -66,12 +66,11 @@ export type TagSelectRootProps = FieldFrameProps & {
     "aria-label"?: string;
     "aria-labelledby"?: string;
 };
-declare function TagSelectRoot({ options, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, creatable, onCreate, defaultColor, onOptionUpdate, onOptionDelete, disabled, placeholder, invalid: invalidProp, focusRing, size, label, required, optional, hint, error, id: idProp, labels: labelsProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: TagSelectRootProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TagSelectRoot {
+/**
+ * A multi-value field shown as tag chips: pick from a list, type to filter, create new values.
+ * At rest one row (extra chips fold into «+N»); focused or open it shows every chip.
+ */
+export declare function TagSelect({ options, value: valueProp, defaultValue, onValueChange, open: openProp, defaultOpen, onOpenChange, creatable, onCreate, defaultColor, onOptionUpdate, onOptionDelete, disabled, placeholder, invalid: invalidProp, focusRing, size, label, required, optional, hint, error, id: idProp, labels: labelsProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...rest }: TagSelectProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace TagSelect {
     var displayName: string;
 }
-export declare const TagSelect: {
-    Root: typeof TagSelectRoot;
-};
-export {};
-//# sourceMappingURL=TagSelect.d.ts.map

package/dist/components/tag-select/useChipOverflow.d.ts

@@ -0,0 +1,19 @@
+import * as React from "react";
+type ChipOverflowOptions = {
+    /** The visible chip row (its width and column gap). */
+    rowRef: React.RefObject<HTMLElement | null>;
+    /** An invisible row of every chip followed by a «+N» sample: the widths to fit. */
+    measureRef: React.RefObject<HTMLElement | null>;
+    /** The text input sharing the row; its min width is reserved unless it is collapsed. */
+    inputRef: React.RefObject<HTMLInputElement | null>;
+    /** The chips (a new array when one is added, removed, renamed or recolored). */
+    chips: readonly unknown[];
+    inputCollapsed: boolean;
+};
+/**
+ * How many chips fit on one row of the field; the rest collapse into a «+N» chip. At least one
+ * chip stays visible (it shrinks with an ellipsis, «+N» never does). Recounts when the chips
+ * change and when the row or the measured chips change size (fonts, a renamed tag).
+ */
+export declare function useChipOverflow({ rowRef, measureRef, inputRef, chips, inputCollapsed, }: ChipOverflowOptions): number;
+export {};