@craftzbay/ui 0.1.0

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

@@ -0,0 +1,109 @@
+import { ReactNode } from 'react';
+export declare const Command: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CommandInput: import('react').ForwardRefExoticComponent<Omit<Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import('react').InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "key" | "asChild" | keyof import('react').InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & import('react').RefAttributes<HTMLInputElement>, "ref"> & import('react').RefAttributes<HTMLInputElement>>;
+export declare const CommandList: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    label?: string;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CommandEmpty: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CommandGroup: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CommandSeparator: import('react').ForwardRefExoticComponent<Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild"> & {
+    alwaysRender?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const CommandItem: import('react').ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof import('react').HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "key" | keyof import('react').HTMLAttributes<HTMLDivElement> | "asChild">, "onSelect" | "disabled" | "value"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare function CommandShortcut({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): import("react/jsx-runtime").JSX.Element;
+export interface CommandDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    children: ReactNode;
+    /** Visible label for screen readers. */
+    title?: string;
+}
+export declare function CommandDialog({ open, onOpenChange, children, title }: CommandDialogProps): import("react/jsx-runtime").JSX.Element;
+/**
+ * Hook that wires ⌘K / Ctrl+K to a setter — the canonical way to mount the
+ * palette in an app shell.
+ *
+ * @example
+ *   const [open, setOpen] = useState(false);
+ *   useCommandPaletteShortcut(setOpen);
+ *   …
+ *   <CommandDialog open={open} onOpenChange={setOpen}>
+ *     <CommandInput placeholder="Type a command…" />
+ *     <CommandList>
+ *       <CommandEmpty>No results.</CommandEmpty>
+ *       <CommandGroup heading="Suggestions">
+ *         <CommandItem>Create project</CommandItem>
+ *         <CommandItem>Invite teammate</CommandItem>
+ *       </CommandGroup>
+ *     </CommandList>
+ *   </CommandDialog>
+ *
+ * @do Group items by category. Show "Recent" first when the query is empty.
+ * @dont Hide essential actions behind the palette only — keep at least one
+ *       button entry in the UI.
+ */
+export declare function useCommandPaletteShortcut(setOpen: (open: boolean) => void): void;

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

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from 'react';
+import * as ContextMenuPrimitive from '@radix-ui/react-context-menu';
+/**
+ * Right-click (or two-finger tap) menu. Visual surface mirrors DropdownMenu
+ * for consistency.
+ *
+ * @example
+ *   <ContextMenu>
+ *     <ContextMenuTrigger asChild>
+ *       <div className="grid h-32 place-items-center rounded-lg border border-border">
+ *         Right-click me
+ *       </div>
+ *     </ContextMenuTrigger>
+ *     <ContextMenuContent>
+ *       <ContextMenuItem>Open</ContextMenuItem>
+ *       <ContextMenuSeparator />
+ *       <ContextMenuItem destructive>Delete</ContextMenuItem>
+ *     </ContextMenuContent>
+ *   </ContextMenu>
+ *
+ * @do Mirror DropdownMenu items for the same surface — users expect the same
+ *      operations from both.
+ * @dont Hide critical actions behind right-click — they must also exist in
+ *       a visible button or menu.
+ */
+export declare const ContextMenu: import('react').FC<ContextMenuPrimitive.ContextMenuProps>;
+export declare const ContextMenuTrigger: import('react').ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuTriggerProps & import('react').RefAttributes<HTMLSpanElement>>;
+export declare const ContextMenuGroup: import('react').ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuPortal: import('react').FC<ContextMenuPrimitive.ContextMenuPortalProps>;
+export declare const ContextMenuSub: import('react').FC<ContextMenuPrimitive.ContextMenuSubProps>;
+export declare const ContextMenuRadioGroup: import('react').ForwardRefExoticComponent<ContextMenuPrimitive.ContextMenuRadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSubTrigger: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubTriggerProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSubContent: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSubContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuContent: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuItem: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    destructive?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuCheckboxItem: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuCheckboxItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuRadioItem: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuRadioItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuLabel: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuLabelProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const ContextMenuSeparator: import('react').ForwardRefExoticComponent<Omit<ContextMenuPrimitive.ContextMenuSeparatorProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare function ContextMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace ContextMenuShortcut {
+    var displayName: string;
+}

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

@@ -0,0 +1,66 @@
+import { ReactNode } from 'react';
+export interface DataGridColumn<TRow> {
+    /** Stable key used for visibility, sort, and React lists. */
+    key: string;
+    /** Header label. */
+    header: ReactNode;
+    /** Render the cell. Defaults to the value at `row[key]`. */
+    cell?: (row: TRow) => ReactNode;
+    /** Cell width — passed to `<col>` so the grid keeps shape during loading. */
+    width?: string;
+    /** Allow sorting on this column. */
+    sortable?: boolean;
+    /** Right-align numeric / monetary columns. */
+    align?: 'left' | 'right';
+}
+export interface DataGridProps<TRow extends {
+    id: string | number;
+}> {
+    columns: DataGridColumn<TRow>[];
+    rows: TRow[];
+    loading?: boolean;
+    /** Initial sort state. */
+    sort?: {
+        key: string;
+        direction: 'asc' | 'desc';
+    } | null;
+    onSortChange?: (sort: {
+        key: string;
+        direction: 'asc' | 'desc';
+    }) => void;
+    /** Show a filter input row above the grid. */
+    filter?: {
+        value: string;
+        onChange: (q: string) => void;
+        placeholder?: string;
+    };
+    /** Empty-state node when no rows are visible. */
+    emptyState?: ReactNode;
+    className?: string;
+}
+/**
+ * Composite grid built from `Table` + DropdownMenu + Input. Provides
+ * column visibility toggle, an inline filter, sortable headers, and
+ * loading / empty states.
+ *
+ * @example
+ *   <DataGrid
+ *     columns={[
+ *       { key: 'name', header: 'Name', sortable: true },
+ *       { key: 'status', header: 'Status', cell: r => <Badge tone={...}>{r.status}</Badge> },
+ *       { key: 'updatedAt', header: 'Updated', align: 'right' },
+ *     ]}
+ *     rows={rows}
+ *     filter={{ value: q, onChange: setQ }}
+ *     sort={sort}
+ *     onSortChange={setSort}
+ *   />
+ *
+ * @do Provide a meaningful empty state with a primary action when the grid
+ *      starts empty (no items at all, not just filtered out).
+ * @dont Render thousands of rows synchronously — virtualise with `@tanstack/react-virtual`
+ *       and wrap with this component's headers as a shell.
+ */
+export declare function DataGrid<TRow extends {
+    id: string | number;
+}>({ columns, rows, loading, sort, onSortChange, filter, emptyState, className, }: DataGridProps<TRow>): import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,42 @@
+import { ReactNode } from 'react';
+import { DateRange } from 'react-day-picker';
+export interface DatePickerProps {
+    value?: Date;
+    onChange: (date: Date | undefined) => void;
+    label?: ReactNode;
+    placeholder?: string;
+    error?: ReactNode;
+    disabled?: boolean;
+    /** Restrict to a date range. Days outside are not selectable. */
+    fromDate?: Date;
+    toDate?: Date;
+    className?: string;
+}
+/**
+ * Single-date picker.
+ *
+ * @example
+ *   <DatePicker label="Date of birth" value={dob} onChange={setDob} />
+ *
+ * @do Use locale-aware formatting via the consumer's display layer.
+ * @dont Roll a custom calendar — Radix Popover + react-day-picker handles a11y.
+ */
+export declare const DatePicker: import('react').ForwardRefExoticComponent<DatePickerProps & import('react').RefAttributes<HTMLDivElement>>;
+export interface DateRangePickerProps {
+    value?: DateRange;
+    onChange: (range: DateRange | undefined) => void;
+    label?: ReactNode;
+    placeholder?: string;
+    error?: ReactNode;
+    disabled?: boolean;
+    fromDate?: Date;
+    toDate?: Date;
+    className?: string;
+}
+/**
+ * Two-date range picker. `value` is `{from, to}`.
+ *
+ * @example
+ *   <DateRangePicker label="Reporting period" value={range} onChange={setRange} />
+ */
+export declare const DateRangePicker: import('react').ForwardRefExoticComponent<DateRangePickerProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,62 @@
+import { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from 'react';
+import { ButtonProps } from './Button';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+export declare const Dialog: import('react').FC<DialogPrimitive.DialogProps>;
+export declare const DialogTrigger: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const DialogPortal: import('react').FC<DialogPrimitive.DialogPortalProps>;
+export declare const DialogClose: import('react').ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const DialogOverlay: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export interface DialogContentProps extends ComponentPropsWithoutRef<typeof DialogPrimitive.Content> {
+    /** Show the default close (×) button in the top-right. */
+    showClose?: boolean;
+    /** Dialog width — `sm` 400 / `md` 520 / `lg` 720. */
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare const DialogContent: import('react').ForwardRefExoticComponent<DialogContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare function DialogHeader({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogHeader {
+    var displayName: string;
+}
+export declare function DialogFooter({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DialogFooter {
+    var displayName: string;
+}
+export declare const DialogTitle: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & import('react').RefAttributes<HTMLHeadingElement>, "ref"> & import('react').RefAttributes<HTMLHeadingElement>>;
+export declare const DialogDescription: import('react').ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & import('react').RefAttributes<HTMLParagraphElement>, "ref"> & import('react').RefAttributes<HTMLParagraphElement>>;
+export interface ConfirmationDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: ReactNode;
+    description?: ReactNode;
+    /** Label of the confirm button. */
+    confirmLabel?: string;
+    /** Label of the cancel button. */
+    cancelLabel?: string;
+    /** Variant of the confirm button — typically `primary` or `destructive`. */
+    confirmVariant?: ButtonProps['variant'];
+    /** Called when the user confirms. Awaited — shows a spinner while pending. */
+    onConfirm: () => void | Promise<void>;
+    /** Whether the confirm button is currently submitting. */
+    loading?: boolean;
+}
+/**
+ * Confirmation dialog with title, description, cancel + confirm buttons.
+ *
+ * @example Destructive confirmation
+ *   <ConfirmationDialog
+ *     open={open} onOpenChange={setOpen}
+ *     title="Delete project?"
+ *     description="This permanently deletes the project and all its data."
+ *     confirmLabel="Delete project"
+ *     confirmVariant="destructive"
+ *     onConfirm={handleDelete}
+ *   />
+ *
+ * @do Lead the title with the action: "Delete project?" not "Are you sure?".
+ *      State consequences in the description.
+ * @dont Use for low-risk reversible actions — those don't need a dialog.
+ */
+export declare function ConfirmationDialog({ open, onOpenChange, title, description, confirmLabel, cancelLabel, confirmVariant, onConfirm, loading, }: ConfirmationDialogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace ConfirmationDialog {
+    var displayName: string;
+}

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

@@ -0,0 +1,47 @@
+import { HTMLAttributes } from 'react';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+export declare const DropdownMenu: import('react').FC<DropdownMenuPrimitive.DropdownMenuProps>;
+export declare const DropdownMenuTrigger: import('react').ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & import('react').RefAttributes<HTMLButtonElement>>;
+export declare const DropdownMenuGroup: import('react').ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuPortal: import('react').FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+export declare const DropdownMenuSub: import('react').FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+export declare const DropdownMenuRadioGroup: import('react').ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSubTrigger: import('react').ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSubContent: import('react').ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuContent: import('react').ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuItem: import('react').ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+    destructive?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuCheckboxItem: import('react').ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuRadioItem: import('react').ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuLabel: import('react').ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export declare const DropdownMenuSeparator: import('react').ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & import('react').RefAttributes<HTMLDivElement>, "ref"> & import('react').RefAttributes<HTMLDivElement>>;
+/**
+ * Trailing right-aligned shortcut label inside a menu item. Pair with `<Kbd>`
+ * inside the Kbd component file if you want stylised keys.
+ */
+export declare function DropdownMenuShortcut({ className, ...props }: HTMLAttributes<HTMLSpanElement>): import("react/jsx-runtime").JSX.Element;
+export declare namespace DropdownMenuShortcut {
+    var displayName: string;
+}
+/**
+ * @example
+ *   <DropdownMenu>
+ *     <DropdownMenuTrigger asChild><IconButton aria-label="More" icon={<MoreHorizontal />} /></DropdownMenuTrigger>
+ *     <DropdownMenuContent>
+ *       <DropdownMenuItem>Open<DropdownMenuShortcut>⌘O</DropdownMenuShortcut></DropdownMenuItem>
+ *       <DropdownMenuItem>Rename</DropdownMenuItem>
+ *       <DropdownMenuSeparator />
+ *       <DropdownMenuItem destructive>Delete</DropdownMenuItem>
+ *     </DropdownMenuContent>
+ *   </DropdownMenu>
+ *
+ * @do Group destructive items at the bottom with a separator.
+ * @dont Mix link navigation and action items in the same menu — split into
+ *       two menus or two groups with labels.
+ */

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

@@ -0,0 +1,31 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface EmptyStateProps extends HTMLAttributes<HTMLDivElement> {
+    /** Visual marker — small Lucide icon or custom illustration. */
+    icon?: ReactNode;
+    /** Heading. One short sentence. */
+    title: ReactNode;
+    /** Description. One or two sentences max. */
+    description?: ReactNode;
+    /** Primary action — usually a `<Button>` that creates the missing item. */
+    action?: ReactNode;
+    /** Secondary helper link — "Learn more", "Import existing", etc. */
+    secondaryAction?: ReactNode;
+}
+/**
+ * Shown when a list / dataset / surface has no content yet. Tone is helpful,
+ * never apologetic.
+ *
+ * @example
+ *   <EmptyState
+ *     icon={<Folder className="size-6" />}
+ *     title="No projects yet"
+ *     description="Create a project to start tracking work."
+ *     action={<Button>New project</Button>}
+ *   />
+ *
+ * @do Lead with the next action. The icon is decoration; the button is the
+ *      point.
+ * @dont Use elaborate illustrations on internal product surfaces — they
+ *       break the refined-minimal direction.
+ */
+export declare const EmptyState: import('react').ForwardRefExoticComponent<EmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,29 @@
+import { HTMLAttributes, ReactNode } from 'react';
+export interface ErrorStateProps extends HTMLAttributes<HTMLDivElement> {
+    /** `404` not-found, `500` server, or `generic` (catch-all). */
+    variant?: '404' | '500' | 'generic';
+    /** Override the default title. */
+    title?: ReactNode;
+    /** Override the default description. */
+    description?: ReactNode;
+    /** Custom action node. Replaces the default retry button. */
+    action?: ReactNode;
+    /** When provided, renders a default "Try again" button calling this handler. */
+    onRetry?: () => void;
+}
+/**
+ * Page-level error placeholder. Pair with `onRetry` for transient failures.
+ *
+ * @example 500
+ *   <ErrorState variant="500" onRetry={refetch} />
+ *
+ * @example Custom
+ *   <ErrorState title="Quota exceeded"
+ *               description="Your plan allows 1,000 events/day."
+ *               action={<Button>Upgrade plan</Button>} />
+ *
+ * @do Match the tone to the cause — server errors apologise, user errors
+ *      explain. Always offer a next step.
+ * @dont Show a raw stack trace to end users.
+ */
+export declare const ErrorState: import('react').ForwardRefExoticComponent<ErrorStateProps & import('react').RefAttributes<HTMLDivElement>>;

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

@@ -0,0 +1,22 @@
+import { HTMLAttributes } from 'react';
+import { ControllerProps, FieldPath, FieldValues } from 'react-hook-form';
+import * as LabelPrimitive from '@radix-ui/react-label';
+export declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: import('react-hook-form').FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React.JSX.Element;
+export declare function FormField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>(props: ControllerProps<TFieldValues, TName>): import("react/jsx-runtime").JSX.Element;
+export declare function useFormField(): {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: import('react-hook-form').FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+export declare const FormItem: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import('react').RefAttributes<HTMLDivElement>>;
+export declare const FormLabel: import('react').ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & import('react').RefAttributes<HTMLLabelElement>, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+export declare const FormControl: import('react').ForwardRefExoticComponent<Omit<import('@radix-ui/react-slot').SlotProps & import('react').RefAttributes<HTMLElement>, "ref"> & import('react').RefAttributes<HTMLElement>>;
+export declare const FormDescription: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;
+export declare const FormError: import('react').ForwardRefExoticComponent<HTMLAttributes<HTMLParagraphElement> & import('react').RefAttributes<HTMLParagraphElement>>;

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

@@ -0,0 +1,34 @@
+import { ButtonHTMLAttributes, ReactNode } from 'react';
+import { VariantProps } from '../../lib/cva';
+declare const iconButton: (props?: ({
+    variant?: "outline" | "primary" | "secondary" | "ghost" | "destructive" | null | undefined;
+    size?: "md" | "sm" | "lg" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButton> {
+    /**
+     * Accessible label for screen readers. **Required** — an icon-only button
+     * with no label is invisible to assistive tech.
+     */
+    'aria-label': string;
+    /** The Lucide icon to render. */
+    icon: ReactNode;
+    /** Show a spinner instead of the icon. */
+    loading?: boolean;
+}
+/**
+ * Square, icon-only button. Default variant is `ghost` because most
+ * IconButtons sit in dense toolbars or tables. Always pass `aria-label`.
+ *
+ * @example Toolbar action
+ *   <IconButton aria-label="Edit row" icon={<Edit2 />} onClick={onEdit} />
+ *
+ * @example Dismissible chip
+ *   <IconButton aria-label="Remove tag" size="sm" icon={<X />} />
+ *
+ * @do Use `ghost` for in-row actions; `outline` when next to a label-less
+ *      primary button you want users to consider as an alternative.
+ * @dont Use IconButton when the action's meaning isn't universally
+ *       recognised. If users need to learn the icon, ship a Button with text.
+ */
+export declare const IconButton: import('react').ForwardRefExoticComponent<IconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export {};

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

@@ -0,0 +1,49 @@
+import { InputHTMLAttributes, ReactNode } from 'react';
+import { VariantProps } from '../../lib/cva';
+declare const field: (props?: ({
+    size?: "md" | "sm" | "lg" | null | undefined;
+    tone?: "default" | "error" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+type InputType = 'text' | 'email' | 'password' | 'number' | 'search' | 'tel' | 'url';
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'size' | 'prefix'>, VariantProps<typeof field> {
+    /** Field type. `password` enables a show/hide toggle; `search` adds a clear button. */
+    type?: InputType;
+    /** Visible label rendered above the input. */
+    label?: ReactNode;
+    /** Hint below the input. Hidden while `error` is set. */
+    helperText?: ReactNode;
+    /** Validation message. Renders in `danger` colour and sets `aria-invalid`. */
+    error?: ReactNode;
+    /** Content rendered inside the field, before the input — icon or short text. */
+    prefix?: ReactNode;
+    /** Content rendered inside the field, after the input. */
+    suffix?: ReactNode;
+    /** Show an inline clear (×) button when the input has a value. */
+    clearable?: boolean;
+    /** Fires when the clear button is pressed. The consumer owns the state. */
+    onClear?: () => void;
+    /** Visually conceal the label while keeping it for screen readers. */
+    hideLabel?: boolean;
+}
+/**
+ * Text-style input with optional label, helper / error, prefix / suffix,
+ * clear, and password show-hide. Wraps a single native `<input>` so it works
+ * with `react-hook-form` and any controlled / uncontrolled pattern.
+ *
+ * @example Email with helper
+ *   <Input type="email" label="Work email" helperText="We never share this." />
+ *
+ * @example Password with show/hide
+ *   <Input type="password" label="Password" autoComplete="current-password" />
+ *
+ * @example Search with clear
+ *   <Input type="search" placeholder="Search…" value={q} onChange={…}
+ *          clearable onClear={() => setQ('')} />
+ *
+ * @do Always pair an input with a visible label. If space forces hiding it,
+ *      use `hideLabel` so the label stays in the accessibility tree.
+ * @dont Use placeholder as the only label — placeholders disappear on input
+ *       and fail accessibility.
+ */
+export declare const Input: import('react').ForwardRefExoticComponent<InputProps & import('react').RefAttributes<HTMLInputElement>>;
+export {};

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

@@ -0,0 +1,16 @@
+import { HTMLAttributes } from 'react';
+export interface KbdProps extends HTMLAttributes<HTMLElement> {
+    /** Visual size — match the surrounding text. */
+    size?: 'sm' | 'md';
+}
+/**
+ * Stylised keyboard shortcut indicator. Compose multiple `<Kbd>` for chords.
+ *
+ * @example
+ *   Press <Kbd>⌘</Kbd>+<Kbd>K</Kbd> to open the command palette.
+ *
+ * @do Use OS-conventional symbols (⌘ ⇧ ⌥ ⌃ ⏎) — keep visuals consistent
+ *      across the app.
+ * @dont Use Kbd for clickable buttons — it implies a real keyboard input.
+ */
+export declare const Kbd: import('react').ForwardRefExoticComponent<KbdProps & import('react').RefAttributes<HTMLElement>>;

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

@@ -0,0 +1,62 @@
+import { ReactNode } from 'react';
+export interface MultiSelectOption {
+    /** Stable, unique value submitted in `onChange`. */
+    value: string;
+    /** Visible label shown both in the menu and in the selected chip. */
+    label: string;
+    /** Optional secondary text shown after the label in the menu. */
+    description?: string;
+    /** Disable selecting this option. */
+    disabled?: boolean;
+}
+export interface MultiSelectProps {
+    /** All possible options. */
+    options: MultiSelectOption[];
+    /** Currently selected values. Controlled. */
+    value: string[];
+    /** Called whenever the selection changes. */
+    onChange: (next: string[]) => void;
+    /** Visible label above the field. */
+    label?: ReactNode;
+    /** Hint below the field. Hidden when `error` is set. */
+    helperText?: ReactNode;
+    /** Validation message. */
+    error?: ReactNode;
+    /** Empty-state placeholder shown when nothing is selected. */
+    placeholder?: string;
+    /** Text shown when no options match the search. */
+    emptyText?: string;
+    /** Max number of chips rendered inline; remainder shown as "+N more". */
+    maxVisibleChips?: number;
+    /** Whether the user can clear all selections with a single click. */
+    clearable?: boolean;
+    /** Disable the entire field. */
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * Chip-based multi-select with a searchable menu (cmdk under the hood).
+ *
+ * Keyboard:
+ *   - Backspace on the input with empty query removes the last chip
+ *   - Enter / Space toggles the highlighted option
+ *   - Escape closes the menu
+ *
+ * @example Tag picker
+ *   <MultiSelect label="Tags"
+ *                options={tags}
+ *                value={selected}
+ *                onChange={setSelected}
+ *                placeholder="Pick tags" />
+ *
+ * @example Bounded with overflow chip
+ *   <MultiSelect options={users}
+ *                value={value}
+ *                onChange={setValue}
+ *                maxVisibleChips={3} />
+ *
+ * @do Cap `maxVisibleChips` (3–5) on narrow surfaces so the field doesn't
+ *      reflow as the user adds selections.
+ * @dont Use MultiSelect for fewer than ~6 options. CheckboxGroup is clearer.
+ */
+export declare const MultiSelect: import('react').ForwardRefExoticComponent<MultiSelectProps & import('react').RefAttributes<HTMLDivElement>>;