prime-ui-kit 0.7.13 → 0.9.1

package/dist/components/slider/Slider.d.ts

@@ -1,23 +1,37 @@
-import type { SliderSize } from "@/internal/states";
-export type { SliderSize };
-export type SliderRootProps = {
+import { type FieldFrameProps, type FieldRootDomProps } from "@/internal/FieldFrame";
+import type { ControlSize, Tone } from "@/internal/states";
+export type SliderLabels = {
+    /** Muted marker after the label when `optional`. */
+    optional: string;
+};
+export type SliderProps = FieldRootDomProps & Omit<FieldFrameProps, "focusRing"> & {
     value?: number;
     defaultValue?: number;
+    onValueChange?: (value: number) => void;
     min?: number;
     max?: number;
     step?: number;
     disabled?: boolean;
-    onChange?: (value: number) => void;
-    label?: string;
-    size?: SliderSize;
-    className?: string;
+    /** Invalid state: `aria-invalid` on the range input. A non-empty `error` implies it. */
+    invalid?: boolean;
+    /** Shows the current value at the end of the label row (tabular numbers). */
+    showValue?: boolean;
+    /** Formats the displayed value and `aria-valuetext` (e.g. `(v) => \`${v} °C\``). */
+    formatValue?: (value: number) => string;
+    /** Tier. Default: the tier of the surrounding control (a form, a panel), else `m`. */
+    size?: ControlSize;
+    /** Color of the filled part of the track. */
+    tone?: Tone;
+    /** Id of the range input; generated when omitted. */
+    id?: string;
+    /** Name of the range input when there is no `label`. */
     "aria-label"?: string;
+    "aria-describedby"?: string;
+    labels?: Partial<SliderLabels>;
 };
-declare function SliderRoot({ value: valueProp, defaultValue, min: minProp, max: maxProp, step: stepProp, disabled, onChange, label, size, className, "aria-label": ariaLabel, }: SliderRootProps): import("react/jsx-runtime").JSX.Element;
-declare namespace SliderRoot {
-    var displayName: string;
-}
-export declare const Slider: {
-    Root: typeof SliderRoot;
-};
-//# sourceMappingURL=Slider.d.ts.map
+/**
+ * A single value on a range, framed like every field: label row (with the value), the track
+ * with a glass thumb, then hint or error. `className`, `ref` and the rest go to the frame, `id`
+ * and `aria-label` to the range input.
+ */
+export declare function Slider({ value: valueProp, defaultValue, onValueChange, min, max, step, disabled, invalid, label, required, optional, hint, error, showValue, formatValue, size: sizeProp, tone, id, className, style, "aria-label": ariaLabel, "aria-describedby": ariaDescribedBy, labels: labelsProp, ...rest }: SliderProps): import("react/jsx-runtime").JSX.Element;

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,77 +1,74 @@
 import * as React from "react";
-import type { StepperSize } from "@/internal/states";
-import { VerticalStepper } from "./VerticalStepper";
-export { HorizontalStepper } from "./HorizontalStepper";
-export { VerticalStepper } from "./VerticalStepper";
-export type { StepperSize };
-export type StepperOrientation = "horizontal" | "vertical";
-export type StepStatus = "pending" | "active" | "completed" | "error";
-export type StepperRootProps = {
-    orientation?: StepperOrientation;
-    currentStep?: number;
-    size?: StepperSize;
-    children: React.ReactNode;
-    className?: string;
+import type { ControlSize } from "@/internal/states";
+/** 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 item index when an item is clicked. */
+    onValueChange?: (index: number) => void;
+    size?: ControlSize;
+    ref?: React.Ref<HTMLOListElement>;
 };
-declare function StepperRoot({ orientation, currentStep, size, children, className, }: StepperRootProps): import("react/jsx-runtime").JSX.Element;
+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 StepperSeparatorIconProps = {
-    className?: string;
+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 StepperSeparatorIcon({ className }: StepperSeparatorIconProps): import("react/jsx-runtime").JSX.Element;
-declare namespace StepperSeparatorIcon {
+declare function StepperItem({ status: statusProp, children, className, disabled, onClick, ...rest }: StepperItemProps): import("react/jsx-runtime").JSX.Element;
+declare namespace StepperItem {
     var displayName: string;
 }
-export type StepperArrowProps = {
-    className?: string;
-} & Omit<React.ComponentPropsWithoutRef<typeof VerticalStepper.Arrow>, "className">;
-declare function StepperArrow({ className, ...rest }: StepperArrowProps): import("react/jsx-runtime").JSX.Element;
-declare namespace StepperArrow {
-    var displayName: string;
-}
-export type StepperIndicatorProps = {
+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 = {
-    title: string;
-    description?: string;
-    className?: string;
-};
-declare function StepperContent({ title, description, className }: StepperContentProps): import("react/jsx-runtime").JSX.Element;
+export type StepperContentProps = SpanProps;
+/** Text column: `Stepper.Title` and optional `Stepper.Description`. */
+declare function StepperContent({ className, ...rest }: StepperContentProps): import("react/jsx-runtime").JSX.Element;
 declare namespace StepperContent {
     var displayName: string;
 }
-export type StepperStepProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
-    index?: number;
-    status?: StepStatus;
-    children: React.ReactNode;
-    type?: "button" | "submit" | "reset";
+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 = SpanProps;
+declare function StepperDescription({ className, ...rest }: StepperDescriptionProps): import("react/jsx-runtime").JSX.Element;
+declare namespace StepperDescription {
+    var displayName: string;
+}
+export type StepperArrowProps = Omit<React.SVGAttributes<SVGSVGElement>, "children"> & {
+    ref?: React.Ref<SVGSVGElement>;
 };
+/** 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<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
-        index?: number;
-        status?: StepStatus;
-        children: React.ReactNode;
-        type?: "button" | "submit" | "reset";
-    } & React.RefAttributes<HTMLButtonElement>>;
-    Item: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type"> & {
-        index?: number;
-        status?: StepStatus;
-        children: React.ReactNode;
-        type?: "button" | "submit" | "reset";
-    } & React.RefAttributes<HTMLButtonElement>>;
+    Item: typeof StepperItem;
     Indicator: typeof StepperIndicator;
-    ItemIndicator: typeof StepperIndicator;
     Content: typeof StepperContent;
-    SeparatorIcon: typeof StepperSeparatorIcon;
+    Title: typeof StepperTitle;
+    Description: typeof StepperDescription;
     Arrow: typeof StepperArrow;
 };
-//# sourceMappingURL=Stepper.d.ts.map
+export {};

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

@@ -1,48 +1,34 @@
-import * as React from "react";
-import type { SwitchSize, SwitchVariant } from "@/internal/states";
+import type * as React from "react";
+import { type ChoiceLabelProps } from "@/internal/ChoiceField";
+import type { ControlSize } from "@/internal/states";
 export type SwitchRootProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "checked" | "defaultChecked" | "onChange"> & {
-    label?: React.ReactNode;
     checked?: boolean;
     defaultChecked?: boolean;
     onCheckedChange?: (checked: boolean) => void;
-    variant?: SwitchVariant;
-    size?: SwitchSize;
-};
-export type SwitchLabelProps = {
+    /** 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;
+    /** `Switch.Label`; without it only the track renders (give it an `aria-label`). */
     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 {
+    /** The native `role="switch"` input. */
+    ref?: React.Ref<HTMLInputElement>;
+};
+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 = {
-    children: React.ReactNode;
-    className?: string;
-} & Omit<React.HTMLAttributes<HTMLParagraphElement>, "id">;
-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<Omit<React.InputHTMLAttributes<HTMLInputElement>, "checked" | "defaultChecked" | "onChange" | "size" | "type"> & {
-        label?: React.ReactNode;
-        checked?: boolean;
-        defaultChecked?: boolean;
-        onCheckedChange?: (checked: boolean) => void;
-        variant?: SwitchVariant;
-        size?: SwitchSize;
-    } & 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,69 +1,123 @@
 import * as React from "react";
-import type { TabsSize } from "@/internal/states";
-export type TabsOrientation = "horizontal" | "vertical";
-export type { TabsSize };
-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?: TabsOrientation;
-    size?: TabsSize;
-    children: React.ReactNode;
-    className?: string;
+    size?: ControlSize;
+    /** 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, children, className, }: TabsRootProps): import("react/jsx-runtime").JSX.Element;
+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;
+export type TabsListProps = React.HTMLAttributes<HTMLDivElement> & {
+    ref?: React.Ref<HTMLDivElement>;
 };
-declare function TabsList({ children, className }: TabsListProps): import("react/jsx-runtime").JSX.Element;
+declare function TabsList({ children, className, ref, ...rest }: TabsListProps): import("react/jsx-runtime").JSX.Element;
 declare namespace TabsList {
     var displayName: string;
 }
-export type TabsTabProps = {
+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 item two-line and becomes its accessible description.
+     */
     children: React.ReactNode;
-    className?: string;
+    ref?: React.Ref<HTMLButtonElement>;
 };
-declare function TabsTab({ value, disabled, children, className }: TabsTabProps): import("react/jsx-runtime").JSX.Element;
-declare namespace TabsTab {
+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>;
+};
+/**
+ * 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 TabsPanelProps = {
-    value: string;
+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, ...rest }: TabsCountProps): import("react/jsx-runtime").JSX.Element;
+declare namespace TabsCount {
+    var displayName: string;
+}
+export type TabsDescriptionProps = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    /** Muted second line; wrap a key value in `<strong>` to emphasize it. */
+    children: React.ReactNode;
+    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 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;
+    ref?: React.Ref<HTMLDivElement>;
 };
-declare function TabsPanel({ value, children, className }: TabsPanelProps): import("react/jsx-runtime").JSX.Element | null;
+declare function TabsPanel({ value, children, className, ...rest }: TabsPanelProps): import("react/jsx-runtime").JSX.Element | null;
 declare namespace TabsPanel {
     var displayName: string;
 }
 export declare const Tabs: {
     Root: typeof TabsRoot;
     List: typeof TabsList;
-    Tab: typeof TabsTab;
+    Item: typeof TabsItem;
     Icon: typeof TabsIcon;
     Label: typeof TabsLabel;
+    Count: typeof TabsCount;
+    Description: typeof TabsDescription;
+    Separator: typeof TabsSeparator;
     Panel: typeof TabsPanel;
 };
-//# sourceMappingURL=Tabs.d.ts.map
+export {};

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 {};