@opencxh/ui-kit 3.172.0 → 3.175.2

package/dist/src/action/Button.d.ts

@@ -3,11 +3,11 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     /**
      * The visual style variant of the button
      */
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'success' | 'warning' | 'danger-solid';
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive" | "success" | "warning" | "danger-solid";
     /**
      * The size of the button
      */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "full";
     /**
      * Whether the button should take the full width of its container
      */
@@ -29,7 +29,7 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      */
     iconOnly?: boolean;
     /** `circle` is for a control that is only ever an icon: call answer/reject. */
-    shape?: 'default' | 'circle';
+    shape?: "default" | "circle";
 }
 /**
  * Button component with theme integration and multiple variants

package/dist/src/action/ButtonGroup.d.ts

@@ -3,9 +3,9 @@ export interface ButtonGroupProps {
     /** Child buttons to group */
     children: React.ReactNode;
     /** Size of the button group */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     /** Orientation of the button group */
-    orientation?: 'horizontal' | 'vertical';
+    orientation?: "horizontal" | "vertical";
     /** Whether buttons should be attached (no gap) */
     attached?: boolean;
     /** Additional CSS classes */

package/dist/src/action/Link.d.ts

@@ -1,11 +1,11 @@
 import { default as React } from 'react';
 export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
     /** Link variant */
-    variant?: 'default' | 'subtle' | 'underline' | 'button';
+    variant?: "default" | "subtle" | "underline" | "button";
     /** Link size */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
     /** Color theme */
-    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral';
+    color?: "primary" | "secondary" | "accent" | "success" | "warning" | "error" | "info" | "neutral";
     /** Whether the link is disabled */
     disabled?: boolean;
     /** Whether to show external link icon */

package/dist/src/action/SplitButton.d.ts

@@ -4,7 +4,7 @@ export interface SplitButtonOption {
     label: string;
     onClick: () => void;
     variant?: "default" | "destructive";
-    /** Optioneel icoon vóór het label in het menu. */
+    /** Optional icon before the label in the menu. */
     icon?: React.ReactNode;
 }
 export interface SplitButtonProps {
@@ -15,22 +15,22 @@ export interface SplitButtonProps {
     icon?: React.ReactNode;
     options: SplitButtonOption[];
     disabled?: boolean;
-    /** Spinner in de primaire helft; blokkeert beide helften. */
+    /** Spinner in the primary half; blocks both halves. */
     loading?: boolean;
     /**
-     * Waar het optie-menu opent. Gebruik een `top-*` placement wanneer de knop
-     * onderaan zijn container staat (bv. een sticky verzendbalk).
+     * Where the options menu opens. Use a `top-*` placement when the button sits
+     * at the bottom of its container (e.g. a sticky send bar).
      */
     menuPlacement?: "bottom-end" | "bottom-start" | "top-end" | "top-start";
-    /** Accessible naam voor de chevron-knop. */
+    /** Accessible name for the chevron button. */
     menuLabel?: string;
 }
 /**
- * Knop met een primaire actie plus een chevron-menu voor varianten daarvan.
- * De primaire helft is een gewone `Button` (zelfde varianten/loading-gedrag);
- * het menu loopt via `Popover`, dus het is `position: fixed` en wordt niet
- * geklipt door een scrollende of overflow-hidden voorouder.
+ * Button with a primary action plus a chevron menu of variants. The primary half
+ * is a plain `Button` (same variants/loading behavior); the menu goes through
+ * `Popover`, so it is `position: fixed` and never clipped by a scrolling or
+ * overflow-hidden ancestor.
  *
- * Zonder opties rendert dit precies een `Button` — geen chevron.
+ * Without options this renders exactly a `Button` — no chevron.
  */
 export declare function SplitButton({ label, onClick, variant, size, icon, options, disabled, loading, menuPlacement, menuLabel, }: SplitButtonProps): React.JSX.Element;

package/dist/src/content/ArtifactView.d.ts

@@ -1,7 +1,7 @@
 import { ArtifactBlock, ArtifactRuntime } from '@opencxh/domain';
 export interface ArtifactViewProps {
     blocks: ArtifactBlock[];
-    /** Alles behalve `"inert"` wordt geweigerd. Zie de klassenoot hierboven. */
+    /** Everything except `"inert"` is rejected. See the class note above. */
     runtime?: ArtifactRuntime;
     className?: string;
 }

package/dist/src/content/Avatar.d.ts

@@ -1,18 +1,12 @@
 import { default as React } from 'react';
 /**
- * Plate colour. `default` is the neutral disc used everywhere a monogram is just
- * an identity marker.
- *
- * `identity` derives the colour from `name`, so the same person or team is the
- * same colour on every surface — see {@link identityPlateClass}. Use it in a
- * list of many people; use `default` where there is only one plate on screen
- * and colour would carry no information.
- *
- * The other three are for a message thread, where the plate answers "which side
- * is this from" before you read a word: `in` is the other party, `out` is us
- * (ink, so it reads as ours in both themes) and `note` is an internal remark.
- * Each is a fill with its own foreground — a fill cannot borrow a colour from
- * the ramp, because the ramp does not change between light and dark.
+ * Plate colour. `default` is the neutral disc for a lone monogram; `identity`
+ * derives the colour from `name` so the same person or team is the same colour
+ * on every surface (see {@link identityPlateClass}) — use it in a list of many
+ * people. The other three are for a message thread, where the plate answers
+ * "which side is this from": `in` is the other party, `out` is us (ink, so it
+ * reads as ours in both themes), `note` an internal remark. Each is a fill with
+ * its own foreground — the ramp does not change between light and dark.
  */
 export type AvatarTone = "default" | "identity" | "in" | "out" | "note";
 export interface AvatarProps {
@@ -22,9 +16,7 @@ export interface AvatarProps {
     src?: string;
     /** Plate colour; see {@link AvatarTone}. */
     tone?: AvatarTone;
-    /** Size preset */
     size?: "xs" | "sm" | "md" | "lg";
-    /** Additional CSS classes */
     className?: string;
     /** Override the title attribute (defaults to `name`) */
     title?: string;

package/dist/src/content/ChannelBadge.d.ts

@@ -27,4 +27,4 @@ export interface ChannelBadgeProps {
  * <ChannelBadge channel="mail" size="lg"><MailIcon /></ChannelBadge>
  * ```
  */
-export declare function ChannelBadge({ channel, children, size, className, title }: ChannelBadgeProps): React.JSX.Element;
+export declare function ChannelBadge({ channel, children, size, className, title, }: ChannelBadgeProps): React.JSX.Element;

package/dist/src/content/Icon.d.ts

@@ -12,9 +12,9 @@ export interface IconProps {
     /** Icon component from lucide-react or custom icon */
     icon: React.ComponentType<any>;
     /** Icon size */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | number;
     /** Icon color */
-    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'current';
+    color?: "primary" | "secondary" | "accent" | "success" | "warning" | "error" | "info" | "neutral" | "current";
     /** Whether the icon should be clickable */
     clickable?: boolean;
     /** Click handler */
@@ -22,6 +22,6 @@ export interface IconProps {
     /** Additional CSS classes */
     className?: string;
     /** Accessibility label */
-    'aria-label'?: string;
+    "aria-label"?: string;
 }
 export declare const Icon: React.FC<IconProps>;

package/dist/src/content/Image.d.ts

@@ -5,11 +5,11 @@ export interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     /** Alt text for accessibility */
     alt: string;
     /** Image size preset */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "full";
     /** Aspect ratio */
-    aspectRatio?: 'square' | 'video' | 'portrait' | 'landscape' | 'auto';
+    aspectRatio?: "square" | "video" | "portrait" | "landscape" | "auto";
     /** Border radius */
-    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    radius?: "none" | "sm" | "md" | "lg" | "xl" | "full";
     /** Whether to show loading state */
     showLoading?: boolean;
     /** Whether to show error state */

package/dist/src/content/MessageBubble.d.ts

@@ -25,18 +25,9 @@ export interface MessageBubbleProps {
 }
 /**
  * A single message in a conversation: chat, email and call transcript all use
- * the same shape.
- *
- * The corner facing the sender is tight (`rounded-sm`) and the other three are
- * `rounded-lg`, which is what makes direction readable without a tail. Sent
- * messages sit on `bg-bubble-out-soft`, a 4% ink wash — deliberately lighter than
- * `accent-soft`, which reads as heavy on every message you have ever sent.
- *
- * @example
- * ```tsx
- * <MessageBubble side="out" className="max-w-bubble px-4 py-3">
- *   <Text>{body}</Text>
- * </MessageBubble>
- * ```
+ * the same shape. The corner facing the sender is tight (`rounded-sm`), the
+ * other three `rounded-lg` — that is what makes direction readable without a
+ * tail. Sent messages sit on `bg-bubble-out-soft`, a 4% ink wash — deliberately
+ * lighter than `accent-soft`, which reads as heavy on every sent message.
  */
 export declare function MessageBubble({ side, continued, tone, className, children, }: MessageBubbleProps): React.JSX.Element;

package/dist/src/content/Page.d.ts

@@ -22,12 +22,8 @@ export interface PageProps {
     actions?: PageHeaderAction[];
     /** Renders the back chevron beside the title. */
     onBack?: () => void;
-    /**
-     * Lets the user rename the record from the header: the title becomes
-     * clickable and grows a pencil beside it. `PageHeader` has had this for a
-     * while; `Page` simply never forwarded it, so any page built on `Page` had to
-     * put a rename somewhere else.
-     */
+    /** Lets the user rename the record from the header: the title becomes
+     * clickable and grows a pencil beside it. Forwarded to `PageHeader`. */
     editable?: boolean;
     /** Called with the trimmed new title. Only fires when it actually changed. */
     onTitleChange?: (title: string) => void;
@@ -71,28 +67,12 @@ export interface PageProps {
 }
 /**
  * One app page: the header, the content gutter, the scroll container, and the
- * loading and empty states.
- *
- * These four were re-invented per page — 24 times in `eylo-voip` alone, each
- * with its own gutter — which is how `p-4` there and `px-5` everywhere else
- * ended up side by side in the same product. Reach for this instead of pairing
- * a `PageHeader` with a padded `div`.
- *
- * Settings panels are the exception: they live inside the settings frame, which
- * draws its own title and scrolls itself, so they use `SettingsPage`.
- *
- * @example
- * ```tsx
- * <Page
- *   title={t("interactions")}
- *   subtitle={t("interactions_description")}
- *   actions={[{ id: "refresh", label: t("refresh"), onClick: reload }]}
- *   loading={loading}
- *   empty={!interactions.length && <EmptyState title={t("interaction_no_records_found")} />}
- * >
- *   <InteractionsTable interactions={interactions} />
- * </Page>
- * ```
+ * loading and empty states. These four were re-invented per page — 24 times in
+ * `eylo-voip` alone, each with its own gutter — which is how `p-4` there and
+ * `px-5` everywhere else ended up side by side. Reach for this instead of
+ * pairing a `PageHeader` with a padded `div`. Settings panels are the
+ * exception: they live inside the settings frame, which draws its own title
+ * and scrolls itself, so they use `SettingsPage`.
  */
 export declare const Page: React.FC<PageProps>;
 export {};

package/dist/src/content/PageHeader.d.ts

@@ -2,19 +2,13 @@ import { default as React } from 'react';
 import { ButtonProps } from '../action/Button';
 import { SplitButtonOption } from '../action/SplitButton';
 export interface PageHeaderAction {
-    /** Action identifier */
     id: string;
-    /** Action label */
     label: string;
-    /** Action icon */
     icon?: React.ReactNode;
-    /** Action handler */
     onClick: () => void;
     /** Action variant. Tracks Button, so the two cannot drift apart. */
     variant?: ButtonProps["variant"];
-    /** Whether action is disabled */
     disabled?: boolean;
-    /** Dropdown options for split button */
     splitOptions?: SplitButtonOption[];
     /**
      * Render this action yourself instead of as a Button — a filter chip, a
@@ -30,7 +24,6 @@ export interface PageHeaderProps {
      * its own background, full-bleed, closed off with a bottom border.
      */
     surface?: boolean;
-    /** Page title */
     title: string;
     /** Page subtitle/description. Sits beside the title. */
     subtitle?: string;
@@ -43,30 +36,18 @@ export interface PageHeaderProps {
      * an inline row of properties survives a narrow window.
      */
     meta?: React.ReactNode;
-    /** Breadcrumb items */
     breadcrumbs?: Array<{
         label: string;
         href?: string;
     }>;
-    /** Action buttons */
     actions?: PageHeaderAction[];
-    /** Additional content to render in the header */
     children?: React.ReactNode;
-    /** Additional CSS classes */
     className?: string;
-    /** Back button label */
     backLabel?: string;
-    /** Back button handler */
     onBack?: () => void;
-    /** Back button class name */
     backClassName?: string;
-    /** Whether the title is editable */
     editable?: boolean;
-    /** Callback when title is changed */
     onTitleChange?: (newTitle: string) => void;
 }
 export declare const ChevronLeftIcon: () => React.JSX.Element;
-/**
- * PageHeader component for consistent page layouts with title, actions, and breadcrumbs
- */
 export declare const PageHeader: React.FC<PageHeaderProps>;

package/dist/src/content/PageToolbar.d.ts

@@ -23,9 +23,7 @@ export interface PageToolbarProps {
     onBack?: () => void;
     /** Back button label (visually hidden on small screens) */
     backLabel?: string;
-    /** Additional CSS classes */
     className?: string;
-    /** Padding on the left and right of the toolbar */
     padding?: "none" | "sm" | "md" | "lg";
     /** Optional extra content placed between back button and actions */
     children?: React.ReactNode;

package/dist/src/content/RichText.d.ts

@@ -1,14 +1,11 @@
 export interface RichTextProps {
-    /** Markdown of HTML; welke van de twee wordt gedetecteerd. */
+    /** Markdown or HTML; which of the two is auto-detected. */
     text: string | null | undefined;
-    /** Extra classes op de wrapper (bv. `text-sm` of een line-clamp). */
+    /** Extra classes on the wrapper (e.g. `text-sm` or a line-clamp). */
     className?: string;
-    /**
-     * Forceer een tak in plaats van te detecteren. Alleen nodig als je zeker
-     * weet wat je hebt en de heuristiek in de weg zit (bv. platte tekst die
-     * toevallig op een tag lijkt).
-     */
+    /** Force a branch instead of detecting — only when the heuristic gets in
+     * the way (e.g. plain text that happens to look like a tag). */
     as?: "markdown" | "html";
 }
-/** Veilig gerenderde markdown-of-HTML tekst. */
+/** Safely rendered markdown-or-HTML text. */
 export declare function RichText({ text, className, as }: RichTextProps): import("react").JSX.Element;

package/dist/src/content/SectionDivider.d.ts

@@ -18,4 +18,4 @@ export interface SectionDividerProps {
  * <SectionDivider label="Gesprekken" align="start" trailing={<Badge>12</Badge>} />
  * ```
  */
-export declare function SectionDivider({ label, trailing, align, className }: SectionDividerProps): React.JSX.Element;
+export declare function SectionDivider({ label, trailing, align, className, }: SectionDividerProps): React.JSX.Element;

package/dist/src/content/SettingsPage.d.ts

@@ -60,18 +60,14 @@ export interface SettingsPageProps {
     /** Left-aligned footer actions, set apart from the primary pair (e.g. Delete). */
     secondaryActions?: PageHeaderAction[];
     /**
-     * Where the actions go. `footer` (the default) is the sticky bar at the
-     * bottom of the panel; `header` hands them to the frame so they sit beside
-     * the title, which is where the design system puts detail actions.
+     * Where the actions go: `footer` (default) is the sticky bar at the bottom
+     * of the panel; `header` hands them to the frame beside the title.
      *
-     * Reach for `header` when the panel's body contains an anchored overlay — a
-     * `Select` menu, a `Popover` — inside a `sticky` or `z-index`-bearing element.
+     * Reach for `header` when the body contains an anchored overlay (a `Select`,
+     * a `Popover`) inside a `sticky` or `z-index`-bearing element:
      * `position: sticky` creates a stacking context even at `z-index: auto`, so
-     * everything inside such an element collapses into one layer that the footer's
-     * own `sticky … z-10` then paints over: the menu opens *behind* the bar. The
-     * panels are `position: fixed`, so they escape clipping but not stacking.
-     * Removing the footer removes the competitor rather than starting a
-     * z-index race that neither side can win.
+     * the menu paints behind the footer's own `sticky … z-10`. Removing the
+     * footer removes the competitor rather than starting a z-index race.
      */
     actionsPlacement?: "footer" | "header";
     /** Renders the back affordance in the frame header (or inline when unframed). */

package/dist/src/content/tableColumns.d.ts

@@ -1,15 +1,13 @@
 import { BadgeProps } from '../feedback/Badge';
 import { TableColumn } from './Table';
 /**
- * Column builders for the three things table configs kept getting wrong, each
- * in the same way across apps: a state rendered as prose, a stored code shown
- * raw, and an id shown instead of the name it points at.
+ * Column builders for the three things table configs kept getting wrong across
+ * apps: a state rendered as prose, a stored code shown raw, and an id shown
+ * instead of the name it points at.
  *
- * They all keep the *label* in `accessor` and render only the decoration in
- * `cell`, because `Table` searches and sorts on the accessor value. Putting the
- * readable text there means a search for "Active" or for a team's name matches
- * what the row actually shows — which is exactly what a raw `enabled` boolean
- * or a bare `teamId` used to break.
+ * All keep the *label* in `accessor` and render only the decoration in `cell`,
+ * because `Table` searches and sorts on the accessor value — so a search for
+ * "Active" or a team's name matches what the row actually shows.
  */
 export interface BadgeColumnConfig<T, V = unknown> {
     id: string;

package/dist/src/federated-resource/index.d.ts

@@ -2,15 +2,13 @@ import { default as React } from 'react';
 interface FederatedResourceProps {
     identifier: string;
     resourceLoader: () => Promise<any>;
-    framework?: 'react' | 'svelte' | 'vanilla';
-    /** Getoond zolang de remote laadt. */
+    framework?: "react" | "svelte" | "vanilla";
+    /** Shown while the remote loads. */
     fallback?: React.ReactNode;
     /**
-     * Getoond wanneer de remote niet te laden is — app uitgezet, bundel stuk, sleutel fout.
-     *
-     * Zonder dit rendert dit component bij een fout niets, en dan verdwijnt de plek waar
-     * iets had moeten staan zonder spoor in de UI. Dat is precies het verschil tussen "de
-     * app is er niet" en "er is niks aan de hand".
+     * Shown when the remote cannot load — app disabled, bundle broken, wrong key.
+     * Without it a failure renders nothing, and the spot where something should have
+     * been disappears without a trace in the UI.
      */
     errorFallback?: React.ReactNode;
     componentProps?: Record<string, any>;

package/dist/src/feedback/Badge.d.ts

@@ -5,50 +5,13 @@ import { default as React } from 'react';
  * doing nothing at all — the badge silently rendered as `default`. Omitting it
  * turns that mistake into a compile error pointing at `variant`.
  */
-export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
-    /**
-     * The visual variant of the badge
-     */
-    variant?: 'default' | 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'note';
-    /**
-     * The size of the badge
-     */
-    size?: 'sm' | 'md' | 'lg';
-    /**
-     * Whether the badge should have a dot indicator
-     */
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "color"> {
+    variant?: "default" | "primary" | "secondary" | "success" | "warning" | "error" | "info" | "note";
+    size?: "sm" | "md" | "lg";
     dot?: boolean;
-    /**
-     * Icon to display in the badge
-     */
     icon?: React.ReactNode;
-    /**
-     * Whether the badge can be dismissed
-     */
     dismissible?: boolean;
-    /**
-     * Callback fired when the badge is dismissed
-     */
     onDismiss?: () => void;
 }
-/**
- * Badge component for displaying status indicators and labels
- *
- * @example
- * ```tsx
- * <Badge variant="success">Active</Badge>
- *
- * <Badge variant="warning" dot>
- *   Pending
- * </Badge>
- *
- * <Badge variant="error" dismissible onDismiss={() => console.log('dismissed')}>
- *   Error
- * </Badge>
- *
- * <Badge variant="primary" icon={<StarIcon />}>
- *   Featured
- * </Badge>
- * ```
- */
+/** Badge for status indicators and labels. */
 export declare function Badge({ variant, size, dot, icon, dismissible, onDismiss, className, children, ...props }: BadgeProps): React.JSX.Element;

package/dist/src/feedback/EmptyState.d.ts

@@ -13,15 +13,5 @@ export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElemen
     /** Render inside a raised card (focus "done" state) vs. plain centered block. */
     card?: boolean;
 }
-/**
- * Centered empty / completion state (focus queue done, no-results lists).
- *
- * @example
- * ```tsx
- * <EmptyState card tone="success" icon={<Icon icon={Check} size="lg" />}
- *   title="Wachtrij leeg — 7 afgehandeld"
- *   description="Nieuwe gesprekken verschijnen hier vanzelf."
- *   actions={<Button>Terug naar Mijn dag</Button>} />
- * ```
- */
+/** Centered empty / completion state (focus queue done, no-results lists). */
 export declare function EmptyState({ icon, tone, title, description, actions, card, className, ...props }: EmptyStateProps): React.JSX.Element;

package/dist/src/feedback/Kbd.d.ts

@@ -3,12 +3,5 @@ export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
     /** Key label, e.g. "⌘K", "E", "↵". */
     children: React.ReactNode;
 }
-/**
- * Keyboard-shortcut chip (the `⌘K` / `E` / `↵` hints in the redesign).
- *
- * @example
- * ```tsx
- * Zoeken <Kbd>⌘K</Kbd>
- * ```
- */
+/** Keyboard-shortcut chip (the `⌘K` / `E` / `↵` hints). */
 export declare function Kbd({ children, className, ...props }: KbdProps): React.JSX.Element;

package/dist/src/feedback/ProgressBar.d.ts

@@ -10,11 +10,5 @@ export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
 /**
  * Slim determinate progress bar (focus queue progress, subtask completion).
  * Token-driven and mode-aware.
- *
- * @example
- * ```tsx
- * <ProgressBar value={40} />
- * <ProgressBar value={3 / 7 * 100} variant="success" size="sm" />
- * ```
  */
 export declare function ProgressBar({ value, variant, size, className, ...props }: ProgressBarProps): React.JSX.Element;

package/dist/src/feedback/Spinner.d.ts

@@ -1,32 +1,10 @@
 import { default as React } from 'react';
 export interface SpinnerProps extends React.HTMLAttributes<HTMLDivElement> {
-    /**
-     * The size of the spinner
-     */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    /**
-     * The color variant of the spinner
-     */
-    variant?: 'primary' | 'secondary' | 'white' | 'current';
-    /**
-     * Optional label for accessibility
-     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    variant?: "primary" | "secondary" | "white" | "current";
+    /** Accessible label; rendered visually only with `showLabel`. */
     label?: string;
-    /**
-     * Whether to show the spinner with a label
-     */
     showLabel?: boolean;
 }
-/**
- * Spinner component for loading states
- *
- * @example
- * ```tsx
- * <Spinner size="md" variant="primary" />
- *
- * <Spinner size="lg" variant="primary" showLabel label="Loading..." />
- *
- * <Spinner size="sm" variant="white" />
- * ```
- */
+/** Spinner for loading states. */
 export declare function Spinner({ size, variant, label, showLabel, className, ...props }: SpinnerProps): React.JSX.Element;

package/dist/src/feedback/StatusDot.d.ts

@@ -18,16 +18,5 @@ export interface StatusDotProps {
     label?: string;
     className?: string;
 }
-/**
- * Small state marker: presence, session state, unread, live recording.
- *
- * Replaces a scatter of hand-rolled `h-2 w-2 rounded-full bg-green-500` spans
- * that used raw palette colours and disagreed on size (8px vs 10px).
- *
- * @example
- * ```tsx
- * <StatusDot tone="success" label="Online" />
- * <StatusDot tone="danger" pulse label="Opname loopt" />
- * ```
- */
+/** Small state marker: presence, session state, unread, live recording. */
 export declare function StatusDot({ tone, shape, pulse, label, className, }: StatusDotProps): React.JSX.Element;

package/dist/src/feedback/StepIndicator.d.ts

@@ -17,13 +17,5 @@ export interface StepIndicatorProps {
     label?: string;
     className?: string;
 }
-/**
- * Progress through a short, linear flow.
- *
- * @example
- * ```tsx
- * <StepIndicator steps={["provider", "channel", "owner"]} current={step} />
- * <StepIndicator steps={["intent", "channel", "address"]} current={step} variant="dots" />
- * ```
- */
+/** Progress through a short, linear flow. */
 export declare function StepIndicator({ steps, current, variant, label, className, }: StepIndicatorProps): React.JSX.Element;