@craftzbay/ui 0.1.0

package/dist-lib/components/ui/Pagination.d.ts

@@ -0,0 +1,32 @@
+import { HTMLAttributes } from 'react';
+export interface PaginationProps extends HTMLAttributes<HTMLElement> {
+    /** 1-indexed current page. */
+    page: number;
+    /** Total number of pages. Set to 0 to hide page numbers. */
+    pageCount: number;
+    /** Called with the new page when navigating. */
+    onPageChange: (page: number) => void;
+    /** Total item count, for the "Showing 1-20 of 200" hint. Omit to hide. */
+    totalItems?: number;
+    /** Items shown per page (controlled if `onPageSizeChange` is provided). */
+    pageSize?: number;
+    /** Options for the page-size select. */
+    pageSizeOptions?: number[];
+    /** Called when the user picks a new page size. */
+    onPageSizeChange?: (size: number) => void;
+    /** Show first/last (« ») jump buttons. Default true. */
+    showJump?: boolean;
+}
+/**
+ * Numbered pagination with prev/next, first/last jumps, page-size selector,
+ * and item-count summary.
+ *
+ * @example
+ *   <Pagination page={page} pageCount={20} onPageChange={setPage}
+ *               totalItems={400} pageSize={20}
+ *               pageSizeOptions={[10, 20, 50]} onPageSizeChange={setSize} />
+ *
+ * @do Place the count summary on the left and controls on the right.
+ * @dont Show numbers when there are >100 pages — use a "jump to" input instead.
+ */
+export declare const Pagination: import('react').ForwardRefExoticComponent<PaginationProps & import('react').RefAttributes<HTMLElement>>;

package/dist-lib/components/ui/Popover.d.ts

@@ -0,0 +1,16 @@
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+export declare const Popover: import('react').FC<PopoverPrimitive.PopoverProps>;
+export declare const PopoverTrigger: import('react').ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const PopoverAnchor: import('react').ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const PopoverClose: import('react').ForwardRefExoticComponent<PopoverPrimitive.PopoverCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const PopoverContent: import('react').ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * @example
+ *   <Popover>
+ *     <PopoverTrigger asChild><Button variant="outline">Options</Button></PopoverTrigger>
+ *     <PopoverContent>…</PopoverContent>
+ *   </Popover>
+ *
+ * @do Reserve Popover for low-stakes, transient UI — pickers, mini-forms.
+ * @dont Use Popover for navigation menus — that's DropdownMenu.
+ */

package/dist-lib/components/ui/Progress.d.ts

@@ -0,0 +1,40 @@
+import { ComponentPropsWithoutRef, SVGProps } from 'react';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+export interface ProgressProps extends Omit<ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>, 'value'> {
+    /** 0–100. Omit for indeterminate. */
+    value?: number | null;
+    /** Bar height. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visual tone. Use `success`/`danger` to colour-code completion state. */
+    tone?: 'accent' | 'success' | 'warning' | 'danger';
+}
+/**
+ * Linear progress bar.
+ *
+ * @example
+ *   <Progress value={uploadPct} aria-label="Upload progress" />
+ *   <Progress aria-label="Loading" /> // indeterminate
+ *
+ * @do Always pair Progress with an `aria-label` describing what is progressing.
+ * @dont Use a Progress for an unknown-completion task — use a Spinner.
+ */
+export declare const Progress: import('react').ForwardRefExoticComponent<ProgressProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface ProgressCircleProps extends SVGProps<SVGSVGElement> {
+    /** 0–100. Omit for indeterminate. */
+    value?: number;
+    /** Pixel size of the SVG. */
+    size?: number;
+    /** Stroke thickness. */
+    thickness?: number;
+    /** Visible label for screen readers. */
+    'aria-label': string;
+    tone?: 'accent' | 'success' | 'warning' | 'danger';
+}
+/**
+ * Circular progress ring. Pairs with a numeric label for percentage-style
+ * indicators.
+ *
+ * @example
+ *   <ProgressCircle value={72} aria-label="Storage used" />
+ */
+export declare const ProgressCircle: import('react').ForwardRefExoticComponent<Omit<ProgressCircleProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist-lib/components/ui/RadioGroup.d.ts

@@ -0,0 +1,27 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+export interface RadioGroupProps extends ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root> {
+    /** Lay out the radios horizontally (default) or vertically. */
+    orientation?: 'horizontal' | 'vertical';
+}
+export declare const RadioGroup: import('react').ForwardRefExoticComponent<RadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface RadioItemProps extends Omit<ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>, 'asChild'> {
+    label?: ReactNode;
+    description?: ReactNode;
+    hideLabel?: boolean;
+}
+/**
+ * One radio option with inline label + description.
+ *
+ * @example
+ *   <RadioGroup defaultValue="weekly">
+ *     <RadioItem value="daily" label="Daily" description="Every morning at 9am" />
+ *     <RadioItem value="weekly" label="Weekly" description="Monday mornings" />
+ *     <RadioItem value="never" label="Never" />
+ *   </RadioGroup>
+ *
+ * @do Pair every RadioItem with a label — naked radios are unreachable for
+ *      screen reader users.
+ * @dont Use RadioGroup for binary choices — use Switch.
+ */
+export declare const RadioItem: import('react').ForwardRefExoticComponent<RadioItemProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist-lib/components/ui/ScrollArea.d.ts

@@ -0,0 +1,13 @@
+import * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';
+/**
+ * Custom scroll container with consistent styled scrollbars across OS / browsers.
+ * Use when the default OS scrollbar would visually clash (sidebars, command
+ * palettes, code panes). Falls back to native scroll inside the viewport.
+ *
+ * @example
+ *   <ScrollArea className="h-64 rounded-md border border-border">
+ *     <div className="p-3">…long content…</div>
+ *   </ScrollArea>
+ */
+export declare const ScrollArea: import('react').ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ScrollBar: import('react').ForwardRefExoticComponent<Omit<ScrollAreaPrimitive.ScrollAreaScrollbarProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/ui/Select.d.ts

@@ -0,0 +1,56 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as SelectPrimitive from '@radix-ui/react-select';
+export declare const Select: import('react').FC<SelectPrimitive.SelectProps>;
+export declare const SelectValue: import('react').ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & import('react').RefAttributes<HTMLSpanElement>>;
+export interface SelectTriggerProps extends Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'children'> {
+    /** Placeholder shown when no value is selected. */
+    placeholder?: string;
+    /** Trigger height — matches Input sizes. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Visual tone — `error` swaps the border + ring to danger. */
+    tone?: 'default' | 'error';
+}
+export declare const SelectTrigger: import('react').ForwardRefExoticComponent<SelectTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const SelectScrollUpButton: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectScrollDownButton: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectContent: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectLabel: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export interface SelectItemProps extends ComponentPropsWithoutRef<typeof SelectPrimitive.Item> {
+    /** Icon shown to the left of the label. */
+    leadingIcon?: ReactNode;
+}
+export declare const SelectItem: import('react').ForwardRefExoticComponent<SelectItemProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const SelectSeparator: import('react').ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/** Optional grouping with a label header. Pure composition over Radix Group + Label. */
+export interface SelectGroupProps extends ComponentPropsWithoutRef<typeof SelectPrimitive.Group> {
+    label?: ReactNode;
+}
+export declare const SelectGroup: import('react').ForwardRefExoticComponent<SelectGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Compose `Select` + `SelectTrigger` + `SelectContent` + `SelectItem` for a
+ * single-choice picker. Keyboard, type-ahead, and ARIA come from Radix.
+ *
+ * @example Basic
+ *   <Select onValueChange={setStatus}>
+ *     <SelectTrigger placeholder="Status" />
+ *     <SelectContent>
+ *       <SelectItem value="open">Open</SelectItem>
+ *       <SelectItem value="closed">Closed</SelectItem>
+ *     </SelectContent>
+ *   </Select>
+ *
+ * @example Grouped
+ *   <SelectContent>
+ *     <SelectGroup label="People">
+ *       <SelectItem value="anu">Anu</SelectItem>
+ *       <SelectItem value="bat">Bat</SelectItem>
+ *     </SelectGroup>
+ *     <SelectSeparator />
+ *     <SelectGroup label="Bots">
+ *       <SelectItem value="robo">Robo</SelectItem>
+ *     </SelectGroup>
+ *   </SelectContent>
+ *
+ * @do Use `placeholder` on the trigger when there is no default value.
+ * @dont Use Select for more than ~12 options — switch to `Combobox`.
+ */

package/dist-lib/components/ui/Separator.d.ts

@@ -0,0 +1,13 @@
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+/**
+ * Hairline divider. Decorative by default (no role announced). Pass
+ * `decorative={false}` when the separator carries semantic meaning, e.g.
+ * splitting two regions in a landmark.
+ *
+ * @example Section divider
+ *   <Separator className="my-6" />
+ *
+ * @example Vertical inside a toolbar
+ *   <Separator orientation="vertical" className="h-5 mx-2" />
+ */
+export declare const Separator: import('react').ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/ui/Sheet.d.ts

@@ -0,0 +1,46 @@
+import { ComponentPropsWithoutRef, HTMLAttributes } from 'react';
+import { VariantProps } from '../../lib/cva';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+export declare const Sheet: import('react').FC<DialogPrimitive.DialogProps>;
+export declare const SheetTrigger: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const SheetClose: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const SheetPortal: import('react').FC<DialogPrimitive.DialogPortalProps>;
+declare const sheet: (props?: ({
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface SheetContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheet> {
+    showClose?: boolean;
+}
+export declare const SheetContent: import('react').ForwardRefExoticComponent<SheetContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare function SheetHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SheetHeader {
+    var displayName: string;
+}
+export declare function SheetFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace SheetFooter {
+    var displayName: string;
+}
+export declare const SheetTitle: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const SheetDescription: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
+export {};
+/**
+ * @example Right-side filter drawer
+ *   <Sheet>
+ *     <SheetTrigger asChild><Button variant="outline">Filters</Button></SheetTrigger>
+ *     <SheetContent side="right">
+ *       <SheetHeader>
+ *         <SheetTitle>Filters</SheetTitle>
+ *         <SheetDescription>Refine the result set.</SheetDescription>
+ *       </SheetHeader>
+ *       …
+ *       <SheetFooter>
+ *         <SheetClose asChild><Button variant="outline">Cancel</Button></SheetClose>
+ *         <Button>Apply</Button>
+ *       </SheetFooter>
+ *     </SheetContent>
+ *   </Sheet>
+ *
+ * @do Use right side for filters/inspectors, left for navigation, bottom for
+ *      mobile sheets.
+ * @dont Use a full-screen sheet on desktop — prefer Dialog or a dedicated page.
+ */

package/dist-lib/components/ui/Sidebar.d.ts

@@ -0,0 +1,67 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface SidebarProps extends HTMLAttributes<HTMLElement> {
+    /** Default state on first mount. Use `defaultCollapsed` for uncontrolled. */
+    defaultCollapsed?: boolean;
+    /** Controlled collapsed state. */
+    collapsed?: boolean;
+    /** Called when the user toggles via the rail or keyboard. */
+    onCollapsedChange?: (next: boolean) => void;
+    /** Footer slot pinned to the bottom (user card, version, etc.). */
+    footer?: ReactNode;
+}
+/**
+ * App-level navigation rail. Holds `SidebarSection` → `SidebarItem` lists,
+ * and optionally a `footer`. Supports collapse to icon-only on desktop.
+ *
+ * @example
+ *   <Sidebar footer={<UserCard />}>
+ *     <SidebarSection label="Workspace">
+ *       <SidebarItem icon={<Home />} active>Home</SidebarItem>
+ *       <SidebarItem icon={<Folder />}>Projects</SidebarItem>
+ *     </SidebarSection>
+ *     <SidebarSection label="Account">
+ *       <SidebarItem icon={<Settings />}>Settings</SidebarItem>
+ *     </SidebarSection>
+ *   </Sidebar>
+ *
+ * @do Use 1–3 sections. More than that signals the IA needs restructuring.
+ * @dont Hide critical navigation under the collapsed state — keep icons
+ *       always visible with tooltips.
+ */
+export declare const Sidebar: import('react').ForwardRefExoticComponent<SidebarProps & import('react').RefAttributes<HTMLElement>>;
+export interface SidebarSectionProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visible section header. Hidden when collapsed. */
+    label?: ReactNode;
+}
+export declare function SidebarSection({ label, className, children, ...props }: SidebarSectionProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidebarSection {
+    var displayName: string;
+}
+export interface SidebarItemProps extends HTMLAttributes<HTMLAnchorElement> {
+    /** Lucide icon shown to the left. */
+    icon?: ReactNode;
+    /** Mark as the current page. */
+    active?: boolean;
+    /** Optional `href` — when absent, renders as a `<button>` so consumers can
+     *  bind their own handler / routing wrapper via `onClick`. */
+    href?: string;
+    /** Trailing badge / counter slot. */
+    trailing?: ReactNode;
+    /** Render a sub-item indented under a parent. */
+    sub?: boolean;
+}
+export declare function SidebarItem({ icon, active, href, trailing, sub, className, children, ...props }: SidebarItemProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidebarItem {
+    var displayName: string;
+}
+/** Lightweight collapsible sub-section inside the sidebar. */
+export interface SidebarGroupProps {
+    icon?: ReactNode;
+    label: ReactNode;
+    defaultOpen?: boolean;
+    children: ReactNode;
+}
+export declare function SidebarGroup({ icon, label, defaultOpen, children }: SidebarGroupProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace SidebarGroup {
+    var displayName: string;
+}

package/dist-lib/components/ui/Skeleton.d.ts

@@ -0,0 +1,26 @@
+import { HTMLAttributes } from 'react';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
+    /** Predefined silhouette presets. */
+    variant?: 'text' | 'circle' | 'card' | 'avatar';
+}
+/**
+ * Animated placeholder. Use `Skeleton.Text` / `Skeleton.Avatar` for common
+ * shapes; pass `className` directly for one-off sizes.
+ *
+ * @example List item
+ *   <div className="flex items-center gap-3">
+ *     <Skeleton variant="avatar" />
+ *     <div className="space-y-1.5 flex-1">
+ *       <Skeleton variant="text" className="w-1/3" />
+ *       <Skeleton variant="text" className="w-1/2" />
+ *     </div>
+ *   </div>
+ *
+ * @example Card
+ *   <Skeleton variant="card" className="h-32" />
+ *
+ * @do Match the silhouette of the eventual content so the layout doesn't
+ *      shift when data arrives.
+ * @dont Show a full-page skeleton for sub-300ms loads — use a single Spinner.
+ */
+export declare const Skeleton: import('react').ForwardRefExoticComponent<SkeletonProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist-lib/components/ui/Slider.d.ts

@@ -0,0 +1,33 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as SliderPrimitive from '@radix-ui/react-slider';
+export interface SliderProps extends Omit<ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, 'value' | 'defaultValue'> {
+    /**
+     * Controlled value. Pass `[n]` for a single-thumb slider, `[a, b]` for a range slider.
+     */
+    value?: number[];
+    defaultValue?: number[];
+    /** Inline label rendered above the slider. */
+    label?: ReactNode;
+    /** Show the numeric value next to the label. */
+    showValue?: boolean;
+    /** Format the displayed value (e.g. `(v) => \`${v}%\``). */
+    formatValue?: (value: number) => string;
+}
+/**
+ * Single- or range-thumb slider. Pass one item in `value` for a single
+ * thumb, two for a range.
+ *
+ * @example Single value
+ *   <Slider label="Volume" showValue defaultValue={[60]} max={100} step={1} />
+ *
+ * @example Price range
+ *   <Slider label="Price"
+ *           defaultValue={[50, 250]}
+ *           min={0} max={500} step={10}
+ *           formatValue={(v) => \`$\${v}\`}
+ *           showValue />
+ *
+ * @do Use `showValue` when the absolute number matters (price, volume, weight).
+ * @dont Hide the value when users will need to reason about exact thresholds.
+ */
+export declare const Slider: import('react').ForwardRefExoticComponent<SliderProps & import('react').RefAttributes<HTMLSpanElement>>;

package/dist-lib/components/ui/Spinner.d.ts

@@ -0,0 +1,23 @@
+import { SVGProps } from 'react';
+export interface SpinnerProps extends SVGProps<SVGSVGElement> {
+    /** Visual weight. */
+    tone?: 'accent' | 'neutral' | 'on-accent';
+    /** Pixel size. */
+    size?: 'sm' | 'md' | 'lg';
+    /** Accessible label. Required unless `decorative` is true. */
+    label?: string;
+    /** Hide from assistive tech (set when a parent already announces busy state). */
+    decorative?: boolean;
+}
+/**
+ * Small indeterminate progress indicator. Use when the operation duration is
+ * unknown and Progress isn't appropriate.
+ *
+ * @example
+ *   <Spinner label="Loading users" />
+ *   <Button loading>Saving…</Button>  // uses Spinner internally
+ *
+ * @do Provide a `label` so the busy state is announced.
+ * @dont Use a Spinner for tasks that take 300ms+; use Skeleton instead.
+ */
+export declare const Spinner: import('react').ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & import('react').RefAttributes<SVGSVGElement>>;

package/dist-lib/components/ui/Stepper.d.ts

@@ -0,0 +1,34 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface Step {
+    /** Step heading. */
+    title: ReactNode;
+    /** Optional secondary description, only shown in vertical orientation. */
+    description?: ReactNode;
+}
+export interface StepperProps extends HTMLAttributes<HTMLOListElement> {
+    /** Ordered list of steps. */
+    steps: Step[];
+    /** 0-indexed active step. Steps before it are marked complete. */
+    current: number;
+    /** Layout direction. */
+    orientation?: 'horizontal' | 'vertical';
+}
+/**
+ * Multi-step progress indicator. Use the horizontal variant in narrow flows
+ * (top of an onboarding modal) and vertical for deeper context.
+ *
+ * @example Onboarding
+ *   <Stepper
+ *     current={step}
+ *     steps={[
+ *       { title: 'Workspace' },
+ *       { title: 'Invite team' },
+ *       { title: 'Connect data' },
+ *       { title: 'Done' },
+ *     ]}
+ *   />
+ *
+ * @do Keep titles 1–2 words. Save explanations for the page body.
+ * @dont Use Stepper for free-form navigation. It implies a linear flow.
+ */
+export declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & import('react').RefAttributes<HTMLOListElement>>;

package/dist-lib/components/ui/Switch.d.ts

@@ -0,0 +1,33 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+export interface SwitchProps extends Omit<ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>, 'asChild'> {
+    /** Inline label rendered to the right. */
+    label?: ReactNode;
+    /** Secondary description rendered below the label. */
+    description?: ReactNode;
+    /** Position the label before the switch instead of after. */
+    labelPosition?: 'before' | 'after';
+    /** Visual size. */
+    size?: 'sm' | 'md';
+    /** Hide the label visually while keeping it accessible. */
+    hideLabel?: boolean;
+}
+/**
+ * Binary on/off toggle for instant-apply settings. Use Checkbox when the
+ * choice is part of a form that needs explicit submission.
+ *
+ * @example Instant toggle
+ *   <Switch label="Email digest" checked={on} onCheckedChange={setOn} />
+ *
+ * @example With description
+ *   <Switch label="Two-factor authentication"
+ *           description="Required for admins on production accounts."
+ *           checked={tfa}
+ *           onCheckedChange={setTfa} />
+ *
+ * @do Use Switch when the change takes effect immediately. Pair with
+ *      a toast confirming the new state.
+ * @dont Use Switch inside a form that requires submission — Checkbox
+ *       better matches that mental model.
+ */
+export declare const Switch: import('react').ForwardRefExoticComponent<SwitchProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist-lib/components/ui/Table.d.ts

@@ -0,0 +1,35 @@
+import { HTMLAttributes, ThHTMLAttributes, TdHTMLAttributes } from 'react';
+export declare const Table: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableElement> & import('react').RefAttributes<HTMLTableElement>>;
+export declare const TableHeader: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import('react').RefAttributes<HTMLTableSectionElement>>;
+export declare const TableBody: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import('react').RefAttributes<HTMLTableSectionElement>>;
+export declare const TableFooter: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableSectionElement> & import('react').RefAttributes<HTMLTableSectionElement>>;
+export declare const TableRow: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableRowElement> & {
+    selected?: boolean;
+} & import('react').RefAttributes<HTMLTableRowElement>>;
+export declare const TableHead: import('react').ForwardRefExoticComponent<ThHTMLAttributes<HTMLTableCellElement> & import('react').RefAttributes<HTMLTableCellElement>>;
+export declare const TableCell: import('react').ForwardRefExoticComponent<TdHTMLAttributes<HTMLTableCellElement> & import('react').RefAttributes<HTMLTableCellElement>>;
+export declare const TableCaption: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLTableCaptionElement> & import('react').RefAttributes<HTMLTableCaptionElement>>;
+export interface TableSortHeaderProps extends ThHTMLAttributes<HTMLTableCellElement> {
+    /** Stable column key used in `currentSort.key`. */
+    sortKey: string;
+    /** Currently sorted column + direction (or null). */
+    currentSort: {
+        key: string;
+        direction: 'asc' | 'desc';
+    } | null;
+    /** Called when the user clicks the header. */
+    onSortChange: (key: string, direction: 'asc' | 'desc') => void;
+}
+/**
+ * Sortable column header. Click toggles asc → desc → asc; the icon reflects
+ * the current state.
+ *
+ * @example
+ *   <TableSortHeader sortKey="name" currentSort={sort} onSortChange={onSort}>
+ *     Name
+ *   </TableSortHeader>
+ *
+ * @do Sort by one column at a time. Multi-sort hides state from users.
+ * @dont Sort silently — the icon must change so users see what changed.
+ */
+export declare const TableSortHeader: import('react').ForwardRefExoticComponent<TableSortHeaderProps & import('react').RefAttributes<HTMLTableCellElement>>;

package/dist-lib/components/ui/Tabs.d.ts

@@ -0,0 +1,32 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { VariantProps } from '../../lib/cva';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+export declare const Tabs: import('react').ForwardRefExoticComponent<TabsPrimitive.TabsProps & import('react').RefAttributes<HTMLDivElement>>;
+declare const list: (props?: ({
+    variant?: "underline" | "pills" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface TabsListProps extends ComponentPropsWithoutRef<typeof TabsPrimitive.List>, VariantProps<typeof list> {
+}
+export declare const TabsList: import('react').ForwardRefExoticComponent<TabsListProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const TabsTrigger: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const TabsContent: import('react').ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export {};
+/**
+ * @example Underline (default)
+ *   <Tabs defaultValue="overview">
+ *     <TabsList>
+ *       <TabsTrigger value="overview">Overview</TabsTrigger>
+ *       <TabsTrigger value="activity">Activity</TabsTrigger>
+ *     </TabsList>
+ *     <TabsContent value="overview">…</TabsContent>
+ *     <TabsContent value="activity">…</TabsContent>
+ *   </Tabs>
+ *
+ * @example Pills
+ *   <TabsList variant="pills"><TabsTrigger value="all">All</TabsTrigger>…</TabsList>
+ *
+ * @do Use `underline` at the top of a page or panel. Use `pills` inside a
+ *      card or for filter-style switches.
+ * @dont Mix variants on the same screen — pick one and commit.
+ */

package/dist-lib/components/ui/Textarea.d.ts

@@ -0,0 +1,34 @@
+import { TextareaHTMLAttributes, ReactNode } from 'react';
+export interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /** Visible label above the field. */
+    label?: ReactNode;
+    /** Hint below the field. Hidden when `error` is set. */
+    helperText?: ReactNode;
+    /** Validation message. Sets `aria-invalid`. */
+    error?: ReactNode;
+    /** Grow vertically as content is added. */
+    autoResize?: boolean;
+    /** Minimum rows when `autoResize`. Defaults to 3. */
+    minRows?: number;
+    /** Maximum rows before scrolling when `autoResize`. Defaults to 12. */
+    maxRows?: number;
+    /** Visually hide the label while keeping it accessible. */
+    hideLabel?: boolean;
+}
+/**
+ * Multi-line text input. With `autoResize`, height tracks content from
+ * `minRows` to `maxRows`. Without it, behaves like a native `<textarea>`.
+ *
+ * @example Comment box
+ *   <Textarea label="Note" autoResize minRows={3} maxRows={10} />
+ *
+ * @example With error
+ *   <Textarea label="Description"
+ *             error={errors.description?.message}
+ *             {...register('description')} />
+ *
+ * @do Default to `autoResize` for multi-line free-form input.
+ * @dont Add `resize-none` without auto-resize — users will be stuck with a
+ *       3-line box for long content.
+ */
+export declare const Textarea: import('react').ForwardRefExoticComponent<TextareaProps & import('react').RefAttributes<HTMLTextAreaElement>>;

package/dist-lib/components/ui/Toast.d.ts

@@ -0,0 +1,33 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { VariantProps } from '../../lib/cva';
+import * as ToastPrimitive from '@radix-ui/react-toast';
+export declare const ToastProvider: import('react').FC<ToastPrimitive.ToastProviderProps>;
+export declare const ToastViewport: import('react').ForwardRefExoticComponent<Omit<ToastPrimitive.ToastViewportProps & import('react').RefAttributes<HTMLOListElement>, "ref"> & import('react').RefAttributes<HTMLOListElement>>;
+declare const toast: (props?: ({
+    variant?: "default" | "success" | "warning" | "danger" | "info" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface ToastProps extends ComponentPropsWithoutRef<typeof ToastPrimitive.Root>, VariantProps<typeof toast> {
+}
+export declare const Toast: import('react').ForwardRefExoticComponent<ToastProps & import('react').RefAttributes<HTMLLIElement>>;
+export declare const ToastTitle: import('react').ForwardRefExoticComponent<Omit<ToastPrimitive.ToastTitleProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ToastDescription: import('react').ForwardRefExoticComponent<Omit<ToastPrimitive.ToastDescriptionProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ToastAction: import('react').ForwardRefExoticComponent<Omit<ToastPrimitive.ToastActionProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const ToastClose: import('react').ForwardRefExoticComponent<Omit<ToastPrimitive.ToastCloseProps & import('react').RefAttributes<HTMLButtonElement>, "ref"> & import('react').RefAttributes<HTMLButtonElement>>;
+export {};
+/**
+ * @example
+ *   <ToastProvider>
+ *     …app…
+ *     <Toast variant="success">
+ *       <ToastTitle>Saved</ToastTitle>
+ *       <ToastDescription>Your changes are live.</ToastDescription>
+ *       <ToastAction altText="Undo">Undo</ToastAction>
+ *       <ToastClose />
+ *     </Toast>
+ *     <ToastViewport />
+ *   </ToastProvider>
+ *
+ * @do Use the `useToast()` hook (in `src/hooks/use-toast.ts`) in app code —
+ *      the components here are the primitives the hook renders.
+ * @dont Stack more than two toasts at a time. Newer toasts replace older ones.
+ */