@morze/ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,692 @@
+import { ClassValue } from 'clsx';
+import * as React from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import { Toggle as Toggle$1, ToggleGroup as ToggleGroup$1, Checkbox as Checkbox$1, RadioGroup as RadioGroup$1, Switch as Switch$1, Slider as Slider$1, Label as Label$1, Select as Select$1, Tabs as Tabs$1, Accordion as Accordion$1, Progress as Progress$1, Avatar as Avatar$1, Separator as Separator$1, Dialog as Dialog$1, Popover as Popover$1, DropdownMenu as DropdownMenu$1, Tooltip as Tooltip$1 } from 'radix-ui';
+
+/**
+ * Class name joiner. Morze UI ships plain, prefixed CSS rather than utility
+ * classes, so there is nothing to merge — clsx is enough.
+ */
+declare function cn(...inputs: ClassValue[]): string;
+type Tone = 'primary' | 'accent' | 'danger' | 'warning' | 'info' | 'success';
+
+type MorzeTheme = 'dark' | 'light' | 'system';
+type ThemeContextValue = {
+    /** What was requested — may be `system`. */
+    theme: MorzeTheme;
+    /** What is actually painted — never `system`. */
+    resolvedTheme: 'dark' | 'light';
+    setTheme: (theme: MorzeTheme) => void;
+};
+type MorzeThemeProviderProps = {
+    children: React.ReactNode;
+    /** Initial theme. Defaults to the Morze dark palette. */
+    defaultTheme?: MorzeTheme;
+    /** localStorage key; pass `null` to disable persistence. */
+    storageKey?: string | null;
+    /**
+     * Where `data-mz-theme` is written. `html` themes the whole document (and is
+     * what you want when portalled dialogs and menus should follow the theme);
+     * `element` scopes the theme to the wrapper this provider renders.
+     */
+    target?: 'html' | 'element';
+    className?: string;
+};
+declare function MorzeThemeProvider({ children, defaultTheme, storageKey, target, className, }: MorzeThemeProviderProps): React.JSX.Element;
+declare function useMorzeTheme(): ThemeContextValue;
+
+declare const buttonVariants: (props?: ({
+    variant?: "primary" | "link" | "secondary" | "outline" | "ghost" | "destructive" | null | undefined;
+    size?: "xs" | "sm" | "md" | "lg" | "icon-xs" | "icon-sm" | "icon" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonProps = React.ComponentProps<'button'> & VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+    /** Re-points the convex gradient, glow and focus ring to another tone. */
+    tone?: Tone;
+    /** Swaps the label for a spinner and blocks interaction. */
+    loading?: boolean;
+    /** Pulsing morse dot before the label — the landing's signature accent. */
+    dot?: boolean;
+};
+declare function Button({ className, variant, size, asChild, tone, loading, dot, disabled, children, ...props }: ButtonProps): React.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    variant?: "outline" | "solid" | "soft" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, tone, dot, asChild, children, ...props }: React.ComponentProps<'span'> & VariantProps<typeof badgeVariants> & {
+    asChild?: boolean;
+    tone?: Tone;
+    dot?: boolean;
+}): React.JSX.Element;
+
+declare const toggleVariants: (props?: ({
+    variant?: "outline" | "default" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Toggle({ className, variant, size, tone, ...props }: React.ComponentProps<typeof Toggle$1.Root> & VariantProps<typeof toggleVariants> & {
+    tone?: Tone;
+}): React.JSX.Element;
+
+type ToggleGroupProps = React.ComponentProps<typeof ToggleGroup$1.Root> & VariantProps<typeof toggleVariants> & {
+    tone?: Tone;
+    /**
+     * `segmented` — items sit in one sunken well and the active one pops out.
+     * `joined`    — items share edges as a single convex bar.
+     * `spaced`    — free-standing toggles with a gap.
+     */
+    appearance?: 'segmented' | 'joined' | 'spaced';
+};
+declare function ToggleGroup({ className, variant, size, tone, appearance, style, children, ...props }: ToggleGroupProps): React.JSX.Element;
+declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroup$1.Item> & VariantProps<typeof toggleVariants>): React.JSX.Element;
+
+type CheckboxProps = React.ComponentProps<typeof Checkbox$1.Root> & {
+    size?: 'sm' | 'md' | 'lg';
+    tone?: Tone;
+};
+declare function Checkbox({ className, size, tone, ...props }: CheckboxProps): React.JSX.Element;
+
+declare function RadioGroup({ className, ...props }: React.ComponentProps<typeof RadioGroup$1.Root>): React.JSX.Element;
+declare function RadioGroupItem({ className, tone, ...props }: React.ComponentProps<typeof RadioGroup$1.Item> & {
+    tone?: Tone;
+}): React.JSX.Element;
+
+type SwitchProps = React.ComponentProps<typeof Switch$1.Root> & {
+    size?: 'sm' | 'md' | 'lg';
+    tone?: Tone;
+};
+declare function Switch({ className, size, tone, ...props }: SwitchProps): React.JSX.Element;
+
+declare function Slider({ className, defaultValue, value, min, max, tone, ...props }: React.ComponentProps<typeof Slider$1.Root> & {
+    tone?: Tone;
+}): React.JSX.Element;
+
+type InputProps = React.ComponentProps<'input'> & {
+    inputSize?: 'sm' | 'md' | 'lg';
+};
+declare function Input({ className, type, inputSize, ...props }: InputProps): React.JSX.Element;
+
+declare function Textarea({ className, ...props }: React.ComponentProps<'textarea'>): React.JSX.Element;
+
+declare function Label({ className, ...props }: React.ComponentProps<typeof Label$1.Root>): React.JSX.Element;
+
+/** Vertical label + control + hint/error stack. */
+declare function Field({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function FieldHint({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+declare function FieldError({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+
+declare function Select({ ...props }: React.ComponentProps<typeof Select$1.Root>): React.JSX.Element;
+declare function SelectGroup({ ...props }: React.ComponentProps<typeof Select$1.Group>): React.JSX.Element;
+declare function SelectValue({ ...props }: React.ComponentProps<typeof Select$1.Value>): React.JSX.Element;
+declare function SelectTrigger({ className, size, tone, children, ...props }: React.ComponentProps<typeof Select$1.Trigger> & {
+    size?: 'sm' | 'md';
+    tone?: Tone;
+}): React.JSX.Element;
+declare function SelectContent({ className, children, position, ...props }: React.ComponentProps<typeof Select$1.Content>): React.JSX.Element;
+declare function SelectLabel({ className, ...props }: React.ComponentProps<typeof Select$1.Label>): React.JSX.Element;
+declare function SelectItem({ className, children, ...props }: React.ComponentProps<typeof Select$1.Item>): React.JSX.Element;
+declare function SelectSeparator({ className, ...props }: React.ComponentProps<typeof Select$1.Separator>): React.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof Select$1.ScrollUpButton>): React.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof Select$1.ScrollDownButton>): React.JSX.Element;
+
+declare function Tabs({ className, ...props }: React.ComponentProps<typeof Tabs$1.Root>): React.JSX.Element;
+declare function TabsList({ className, variant, tone, ...props }: React.ComponentProps<typeof Tabs$1.List> & {
+    variant?: 'default' | 'line';
+    tone?: Tone;
+}): React.JSX.Element;
+declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof Tabs$1.Trigger>): React.JSX.Element;
+declare function TabsContent({ className, ...props }: React.ComponentProps<typeof Tabs$1.Content>): React.JSX.Element;
+
+declare function Card({ className, interactive, onClick, onKeyDown, ...props }: React.ComponentProps<'div'> & {
+    interactive?: boolean;
+}): React.JSX.Element;
+declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+
+declare function Alert({ className, tone, ...props }: React.ComponentProps<'div'> & {
+    tone?: Tone;
+}): React.JSX.Element;
+declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AlertDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+
+declare function Accordion({ className, ...props }: React.ComponentProps<typeof Accordion$1.Root>): React.JSX.Element;
+declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof Accordion$1.Item>): React.JSX.Element;
+declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof Accordion$1.Trigger>): React.JSX.Element;
+declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof Accordion$1.Content>): React.JSX.Element;
+
+declare function Progress({ className, value, max, tone, ...props }: React.ComponentProps<typeof Progress$1.Root> & {
+    tone?: Tone;
+}): React.JSX.Element;
+
+declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof Avatar$1.Root> & {
+    size?: 'sm' | 'md' | 'lg';
+}): React.JSX.Element;
+declare function AvatarImage({ className, ...props }: React.ComponentProps<typeof Avatar$1.Image>): React.JSX.Element;
+declare function AvatarFallback({ className, ...props }: React.ComponentProps<typeof Avatar$1.Fallback>): React.JSX.Element;
+
+declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof Separator$1.Root>): React.JSX.Element;
+
+declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+
+type SpinnerProps = React.ComponentProps<'span'> & {
+    /** Announced by screen readers; pass `null` for a purely decorative spinner. */
+    label?: string | null;
+};
+declare function Spinner({ className, label, children, ...props }: SpinnerProps): React.JSX.Element;
+
+declare function Dialog({ ...props }: React.ComponentProps<typeof Dialog$1.Root>): React.JSX.Element;
+declare function DialogTrigger({ ...props }: React.ComponentProps<typeof Dialog$1.Trigger>): React.JSX.Element;
+declare function DialogPortal({ ...props }: React.ComponentProps<typeof Dialog$1.Portal>): React.JSX.Element;
+declare function DialogClose({ ...props }: React.ComponentProps<typeof Dialog$1.Close>): React.JSX.Element;
+declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof Dialog$1.Overlay>): React.JSX.Element;
+declare function DialogContent({ className, children, showCloseButton, closeLabel, ...props }: React.ComponentProps<typeof Dialog$1.Content> & {
+    showCloseButton?: boolean;
+    closeLabel?: string;
+}): React.JSX.Element;
+declare function DialogHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DialogFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function DialogTitle({ className, ...props }: React.ComponentProps<typeof Dialog$1.Title>): React.JSX.Element;
+declare function DialogDescription({ className, ...props }: React.ComponentProps<typeof Dialog$1.Description>): React.JSX.Element;
+
+declare function Popover({ ...props }: React.ComponentProps<typeof Popover$1.Root>): React.JSX.Element;
+declare function PopoverTrigger({ ...props }: React.ComponentProps<typeof Popover$1.Trigger>): React.JSX.Element;
+declare function PopoverAnchor({ ...props }: React.ComponentProps<typeof Popover$1.Anchor>): React.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, ...props }: React.ComponentProps<typeof Popover$1.Content>): React.JSX.Element;
+declare function PopoverHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function PopoverTitle({ className, ...props }: React.ComponentProps<'h2'>): React.JSX.Element;
+declare function PopoverDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
+
+declare function DropdownMenu({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Root>): React.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Portal>): React.JSX.Element;
+declare function DropdownMenuTrigger({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Trigger>): React.JSX.Element;
+declare function DropdownMenuContent({ className, sideOffset, ...props }: React.ComponentProps<typeof DropdownMenu$1.Content>): React.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Group>): React.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: React.ComponentProps<typeof DropdownMenu$1.Item> & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): React.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, ...props }: React.ComponentProps<typeof DropdownMenu$1.CheckboxItem>): React.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: React.ComponentProps<typeof DropdownMenu$1.RadioGroup>): React.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, ...props }: React.ComponentProps<typeof DropdownMenu$1.RadioItem>): React.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: React.ComponentProps<typeof DropdownMenu$1.Label> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.Separator>): React.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
+declare function DropdownMenuSub({ ...props }: React.ComponentProps<typeof DropdownMenu$1.Sub>): React.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: React.ComponentProps<typeof DropdownMenu$1.SubTrigger> & {
+    inset?: boolean;
+}): React.JSX.Element;
+declare function DropdownMenuSubContent({ className, ...props }: React.ComponentProps<typeof DropdownMenu$1.SubContent>): React.JSX.Element;
+
+declare function TooltipProvider({ delayDuration, children, ...props }: React.ComponentProps<typeof Tooltip$1.Provider>): React.JSX.Element;
+declare function Tooltip({ ...props }: React.ComponentProps<typeof Tooltip$1.Root>): React.JSX.Element;
+declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof Tooltip$1.Trigger>): React.JSX.Element;
+declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof Tooltip$1.Content>): React.JSX.Element;
+
+declare function Sheet({ ...props }: React.ComponentProps<typeof Dialog$1.Root>): React.JSX.Element;
+declare function SheetTrigger({ ...props }: React.ComponentProps<typeof Dialog$1.Trigger>): React.JSX.Element;
+declare function SheetClose({ ...props }: React.ComponentProps<typeof Dialog$1.Close>): React.JSX.Element;
+declare function SheetPortal({ ...props }: React.ComponentProps<typeof Dialog$1.Portal>): React.JSX.Element;
+declare function SheetOverlay({ className, ...props }: React.ComponentProps<typeof Dialog$1.Overlay>): React.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, closeLabel, ...props }: React.ComponentProps<typeof Dialog$1.Content> & {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    showCloseButton?: boolean;
+    closeLabel?: string;
+}): React.JSX.Element;
+declare function SheetHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SheetFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof Dialog$1.Title>): React.JSX.Element;
+declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof Dialog$1.Description>): React.JSX.Element;
+
+type SidebarContextValue = {
+    /** `expanded` | `collapsed` — what is painted, mobile aside. */
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextValue;
+type SidebarProviderProps = React.ComponentProps<'div'> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** localStorage key for the collapsed state; `null` disables persistence. */
+    storageKey?: string | null;
+    /** Width below which the sidebar becomes an overlay sheet. */
+    mobileBreakpoint?: number;
+};
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange, storageKey, mobileBreakpoint, className, style, children, ...props }: SidebarProviderProps): React.JSX.Element;
+type SidebarProps = React.ComponentProps<'div'> & {
+    side?: 'left' | 'right';
+    /** Announced to screen readers when the panel opens as a sheet on mobile. */
+    mobileTitle?: string;
+    mobileDescription?: string;
+    /**
+     * `inset` (default) leaves the navigation on the page background and raises
+     * the content in a `SidebarPanel`; `sidebar` gives the navigation its own
+     * surface; `floating` lifts it off the edge as a card.
+     */
+    variant?: 'sidebar' | 'floating' | 'inset';
+    /**
+     * `icon` keeps a rail of icons, `offcanvas` slides the panel away entirely,
+     * `none` pins it open.
+     */
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+};
+declare function Sidebar({ side, variant, collapsible, mobileTitle, mobileDescription, className, children, ...props }: SidebarProps): React.JSX.Element;
+declare function SidebarTrigger({ className, onClick, label, ...props }: React.ComponentProps<'button'> & {
+    label?: string;
+}): React.JSX.Element;
+/** Thin strip along the sidebar edge — click anywhere on it to toggle. */
+declare function SidebarRail({ className, label, ...props }: React.ComponentProps<'button'> & {
+    label?: string;
+}): React.JSX.Element;
+declare function SidebarInset({ className, ...props }: React.ComponentProps<'main'>): React.JSX.Element;
+/**
+ * The raised content surface next to the navigation. Anything that belongs on
+ * the page background — a top bar, breadcrumbs — goes in `SidebarInset` above
+ * it, not inside.
+ */
+declare function SidebarPanel({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
+declare function SidebarContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<'div'> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<'button'> & {
+    asChild?: boolean;
+}): React.JSX.Element;
+declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>): React.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
+type SidebarMenuButtonProps = React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    size?: 'sm' | 'md' | 'lg';
+    /** Shown as a tooltip while the sidebar is collapsed to icons. */
+    tooltip?: React.ReactNode;
+};
+declare function SidebarMenuButton({ asChild, isActive, size, tooltip, className, ...props }: SidebarMenuButtonProps): React.JSX.Element;
+declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<'button'> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}): React.JSX.Element;
+declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<'div'> & {
+    showIcon?: boolean;
+}): React.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>): React.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>): React.JSX.Element;
+declare function SidebarMenuSubButton({ asChild, isActive, size, className, ...props }: React.ComponentProps<'a'> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    size?: 'sm' | 'md';
+}): React.JSX.Element;
+
+/**
+ * Viewport-width check for layout decisions that CSS cannot make on its own —
+ * the sidebar swaps to an overlay sheet rather than restyling in place.
+ * Returns false during SSR and the first client render, so hydration matches.
+ */
+declare function useIsMobile(breakpoint?: number): boolean;
+
+type SortDir = 'asc' | 'desc';
+type DataTableSort = {
+    id: string;
+    dir: SortDir;
+};
+type FilterValue = {
+    type: 'text';
+    value: string;
+} | {
+    type: 'select';
+    value: string[];
+} | {
+    type: 'number-range';
+    min?: number;
+    max?: number;
+} | {
+    type: 'date-range';
+    from?: string;
+    to?: string;
+} | {
+    type: 'boolean';
+    value: boolean;
+};
+type DataTableFilters = Record<string, FilterValue>;
+type DataTableQuery = {
+    sort: DataTableSort[];
+    filters: DataTableFilters;
+    page: number;
+    pageSize: number;
+};
+type SelectOptionDef = {
+    value: string;
+    label: string;
+};
+/** Declares which control the header popover shows and what it sends back. */
+type ColumnFilterDef = {
+    type: 'text';
+    placeholder?: string;
+} | {
+    type: 'select';
+    options: SelectOptionDef[];
+    multiple?: boolean;
+} | {
+    type: 'number-range';
+    step?: number;
+    unit?: string;
+} | {
+    type: 'date-range';
+} | {
+    type: 'boolean';
+    trueLabel?: string;
+    falseLabel?: string;
+};
+type EditableDef<T> = {
+    type: 'text' | 'number' | 'select';
+    options?: SelectOptionDef[];
+    /** Resolves the current editable value out of the row. */
+    value: (row: T) => string;
+    /** Rejected promises roll the cell back and surface the message. */
+    onSave: (row: T, value: string) => void | Promise<void>;
+};
+type DataTableColumn<T> = {
+    id: string;
+    header: React.ReactNode;
+    /** Short label used where the header may be a node — column manager, cards. */
+    label?: string;
+    /** Plain value renderer. Ignored when `cell` is given. */
+    accessor?: (row: T) => React.ReactNode;
+    cell?: (row: T, context: {
+        rowIndex: number;
+    }) => React.ReactNode;
+    width?: number;
+    minWidth?: number;
+    maxWidth?: number;
+    align?: 'left' | 'center' | 'right';
+    sortable?: boolean;
+    filter?: ColumnFilterDef;
+    /** Sticks the column to an edge while the body scrolls sideways. */
+    pinned?: 'left' | 'right';
+    resizable?: boolean;
+    /**
+     * `false` keeps the column at exactly `width` when the table stretches its
+     * columns to fill the container — for icon or action columns.
+     */
+    flex?: boolean;
+    /** `false` keeps the column out of the visibility menu (and always visible). */
+    hideable?: boolean;
+    editable?: EditableDef<T>;
+    headerTitle?: string;
+};
+/** Column layout is UI state, not query state — it never reaches the backend. */
+type ColumnLayout = {
+    order: string[];
+    hidden: string[];
+    widths: Record<string, number>;
+    pinned: Record<string, 'left' | 'right' | undefined>;
+    /** Columns the user resized by hand; auto-fit leaves these alone. */
+    sized: string[];
+};
+type SavedView = {
+    id: string;
+    name: string;
+    query: DataTableQuery;
+    layout?: Partial<ColumnLayout>;
+};
+type RowSelectionState = {
+    /** Explicitly ticked row keys on the current page. */
+    keys: string[];
+    /**
+     * "Everything the current filter matches", including rows never fetched.
+     * Bulk actions must send the query instead of the key list in this mode.
+     */
+    allMatching: boolean;
+};
+declare const emptyQuery: DataTableQuery;
+
+/**
+ * Every visible string the table owns, in one place. Defaults are English;
+ * pass a partial `labels` object to translate or reword any of them.
+ */
+type DataTableLabels = {
+    filter: string;
+    filterFor: (column: string) => string;
+    filterActive: string;
+    contains: string;
+    apply: string;
+    reset: string;
+    resetAll: string;
+    resetFilters: string;
+    clearFilter: string;
+    rangeFrom: string;
+    rangeTo: string;
+    dateFrom: string;
+    dateTo: string;
+    yes: string;
+    no: string;
+    columns: string;
+    moveUp: (column: string) => string;
+    moveDown: (column: string) => string;
+    pinning: (column: string, side: string) => string;
+    pinnedLeft: string;
+    pinnedRight: string;
+    notPinned: string;
+    show: (column: string) => string;
+    hide: (column: string) => string;
+    sortBy: (column: string) => string;
+    columnWidth: (column: string) => string;
+    selectPage: string;
+    selectRow: string;
+    expandRow: string;
+    collapseRow: string;
+    details: string;
+    empty: string;
+    retry: string;
+    rowsPerPage: string;
+    nothingFound: string;
+    of: string;
+    firstPage: string;
+    previousPage: string;
+    nextPage: string;
+    lastPage: string;
+    selectedCount: (count: string) => string;
+    allMatchingSuffix: string;
+    selectAllMatching: (total: string) => string;
+    clearSelection: string;
+    bulkActions: string;
+};
+declare const defaultDataTableLabels: DataTableLabels;
+declare function resolveLabels(labels?: Partial<DataTableLabels>): DataTableLabels;
+
+type DataTableProps<T> = {
+    columns: DataTableColumn<T>[];
+    data: T[];
+    rowKey: (row: T) => string;
+    /** Total matching rows on the server; drives the pager. */
+    total?: number;
+    loading?: boolean;
+    error?: React.ReactNode;
+    onRetry?: () => void;
+    query: DataTableQuery;
+    onQueryChange: (query: DataTableQuery) => void;
+    /** Shift-click extends the range; `allMatching` covers unfetched rows. */
+    selection?: RowSelectionState;
+    onSelectionChange?: (selection: RowSelectionState) => void;
+    bulkActions?: (selection: RowSelectionState) => React.ReactNode;
+    renderExpanded?: (row: T) => React.ReactNode;
+    onRowClick?: (row: T) => void;
+    layout?: Partial<ColumnLayout>;
+    onLayoutChange?: (layout: ColumnLayout) => void;
+    /** localStorage key for widths, order, visibility and pinning. */
+    persistKey?: string | null;
+    toolbar?: React.ReactNode;
+    /**
+     * Stretches the columns to fill the container on mount and on container
+     * resize, so there is no dead space at the right edge. Columns the user
+     * resized by hand keep their width. `false` uses the declared widths as-is.
+     */
+    autoFit?: boolean;
+    density?: 'compact' | 'normal' | 'relaxed';
+    stickyHeader?: boolean;
+    emptyState?: React.ReactNode;
+    pageSizeOptions?: number[];
+    /** Overrides for any of the table's own strings. Defaults are English. */
+    labels?: Partial<DataTableLabels>;
+    /** Locale for number formatting; defaults to the browser's. */
+    locale?: string;
+    caption?: string;
+    className?: string;
+};
+declare function DataTable<T>({ columns, data, rowKey, total, loading, error, onRetry, query, onQueryChange, selection, onSelectionChange, bulkActions, renderExpanded, onRowClick, layout: controlledLayout, onLayoutChange, persistKey, toolbar, autoFit, density, stickyHeader, emptyState, pageSizeOptions, labels: labelsProp, locale, caption, className, }: DataTableProps<T>): React.JSX.Element;
+
+declare function DataTablePagination({ query, total, rowsOnPage, pageSizeOptions, labels: labelsProp, locale, onQueryChange, }: {
+    query: DataTableQuery;
+    total?: number;
+    rowsOnPage: number;
+    pageSizeOptions?: number[];
+    labels?: Partial<DataTableLabels>;
+    /** Number formatting locale; defaults to the browser's. */
+    locale?: string;
+    onQueryChange: (query: DataTableQuery) => void;
+}): React.JSX.Element;
+
+type Props$1<T> = {
+    columns: DataTableColumn<T>[];
+    layout: ColumnLayout;
+    onToggleHidden: (id: string) => void;
+    onSetPinned: (id: string, side: 'left' | 'right' | undefined) => void;
+    onMove: (id: string, delta: number) => void;
+    onMoveTo: (id: string, targetId: string) => void;
+    onReset: () => void;
+    labels?: Partial<DataTableLabels>;
+};
+/**
+ * Reordering lives here rather than on the header itself: dragging a header
+ * would fight the resize handle, and a list gives keyboard users real controls
+ * instead of a drag-only affordance.
+ */
+declare function ColumnManager<T>({ columns, layout, onToggleHidden, onSetPinned, onMove, onMoveTo, onReset, labels: labelsProp, }: Props$1<T>): React.JSX.Element;
+
+type Props = {
+    columnLabel: string;
+    def: ColumnFilterDef;
+    value: FilterValue | undefined;
+    onApply: (value: FilterValue | undefined) => void;
+    labels?: Partial<DataTableLabels>;
+};
+/**
+ * Filters are staged locally and committed on Apply. On server-driven data an
+ * immediate commit would fire a request per keystroke.
+ */
+declare function ColumnFilter({ columnLabel, def, value, onApply, labels: labelsProp }: Props): React.JSX.Element;
+declare function FilterChip({ label, onClear, clearLabel, className, }: {
+    label: React.ReactNode;
+    onClear: () => void;
+    clearLabel?: string;
+    className?: string;
+}): React.JSX.Element;
+
+type UseTableQueryOptions = {
+    initial?: Partial<DataTableQuery>;
+    /** Mirrors the query into the query-string under this prefix. */
+    urlKey?: string | null;
+    /** `replace` keeps table interactions out of the back-button history. */
+    history?: 'replace' | 'push';
+};
+declare function useTableQuery({ initial, urlKey, history, }?: UseTableQueryOptions): {
+    query: DataTableQuery;
+    setQuery: React.Dispatch<React.SetStateAction<DataTableQuery>>;
+    reset: () => void;
+};
+type UseSavedViewsOptions = {
+    storageKey?: string | null;
+    views?: SavedView[];
+    onViewsChange?: (views: SavedView[]) => void;
+};
+declare function useSavedViews({ storageKey, views: controlled, onViewsChange, }?: UseSavedViewsOptions): {
+    views: SavedView[];
+    save: (view: SavedView) => void;
+    remove: (id: string) => void;
+};
+
+type UseColumnLayoutOptions<T> = {
+    columns: DataTableColumn<T>[];
+    /** localStorage key for widths, order, visibility and pinning. */
+    persistKey?: string | null;
+    layout?: Partial<ColumnLayout>;
+    onLayoutChange?: (layout: ColumnLayout) => void;
+};
+declare function useColumnLayout<T>({ columns, persistKey, layout: controlled, onLayoutChange, }: UseColumnLayoutOptions<T>): {
+    layout: ColumnLayout;
+    visible: DataTableColumn<T>[];
+    widthOf: (id: string) => number;
+    minWidthOf: (id: string) => number;
+    setWidth: (id: string, width: number) => void;
+    fitTo: (available: number) => void;
+    toggleHidden: (id: string) => void;
+    setPinned: (id: string, side: "left" | "right" | undefined) => void;
+    move: (id: string, delta: number) => void;
+    moveTo: (id: string, targetId: string) => void;
+    reset: () => void;
+};
+
+/**
+ * Selection is controlled from the outside so bulk actions can live anywhere,
+ * but the shift-range anchor is local UI state.
+ */
+declare function useRowSelection(options: {
+    value: RowSelectionState;
+    onChange: (next: RowSelectionState) => void;
+    pageKeys: string[];
+}): {
+    selected: Set<string>;
+    count: number | undefined;
+    allMatching: boolean;
+    pageSelected: boolean;
+    pagePartial: boolean;
+    toggle: (key: string, event?: {
+        shiftKey?: boolean;
+    }) => void;
+    togglePage: () => void;
+    /** Escalates from "this page" to "everything the filter matches". */
+    selectAllMatching: () => void;
+    clear: () => void;
+};
+
+/** A filter that carries no constraint should never reach the backend. */
+declare function isFilterActive(value: FilterValue | undefined): value is FilterValue;
+declare function activeFilters(filters: DataTableFilters): [string, FilterValue][];
+declare function setFilter(query: DataTableQuery, id: string, value: FilterValue | undefined): DataTableQuery;
+/**
+ * Click cycles asc → desc → off. With `additive` (shift-click) the column joins
+ * the existing sort instead of replacing it, which is how multi-sort is
+ * expressed to the backend as an ordered list.
+ */
+declare function toggleSort(query: DataTableQuery, id: string, additive?: boolean): DataTableQuery;
+declare function sortStateOf(query: DataTableQuery, id: string): {
+    dir: undefined;
+    index: undefined;
+} | {
+    dir: SortDir;
+    index: number | undefined;
+};
+declare function pageCount(total: number | undefined, pageSize: number): number;
+/** Compact URL form: `-date,name` → [{date desc}, {name asc}]. */
+declare function serializeSort(sort: DataTableSort[]): string;
+declare function parseSort(raw: string | null): DataTableSort[];
+
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, type ButtonProps, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, ColumnFilter, type ColumnFilterDef, type ColumnLayout, ColumnManager, DataTable, type DataTableColumn, type DataTableFilters, type DataTableLabels, DataTablePagination, type DataTableProps, type DataTableQuery, type DataTableSort, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, type EditableDef, Field, FieldError, FieldHint, FilterChip, type FilterValue, Input, type InputProps, Label, type MorzeTheme, MorzeThemeProvider, type MorzeThemeProviderProps, Popover, PopoverAnchor, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, type RowSelectionState, type SavedView, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOptionDef, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarPanel, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, type SortDir, Spinner, Switch, type SwitchProps, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toggle, ToggleGroup, ToggleGroupItem, type Tone, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, type UseSavedViewsOptions, type UseTableQueryOptions, activeFilters, badgeVariants, buttonVariants, cn, defaultDataTableLabels, emptyQuery, isFilterActive, pageCount, parseSort, resolveLabels, serializeSort, setFilter, sortStateOf, toggleSort, toggleVariants, useColumnLayout, useIsMobile, useMorzeTheme, useRowSelection, useSavedViews, useSidebar, useTableQuery };