gridsmith-ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1311 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ButtonHTMLAttributes, ReactNode, InputHTMLAttributes, LabelHTMLAttributes, TextareaHTMLAttributes, Ref, HTMLAttributes, ComponentProps } from 'react';
+import { IconName } from './icons.js';
+import { ColumnDef } from '@tanstack/react-table';
+import { VirtualItem } from '@tanstack/react-virtual';
+import { Separator, Panel, Group } from 'react-resizable-panels';
+
+type ButtonVariant = "default" | "secondary" | "tertiary" | "outline" | "ghost" | "destructive" | "success" | "warning" | "link";
+type ButtonSize = "sm" | "md" | "lg" | "icon-sm" | "icon" | "icon-lg";
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: ButtonVariant;
+    size?: ButtonSize;
+    iconLeft?: ReactNode;
+    iconRight?: ReactNode;
+    loading?: boolean;
+    children?: ReactNode;
+}
+declare function Button({ variant, size, iconLeft, iconRight, loading, className, children, disabled, style, ...props }: ButtonProps): react_jsx_runtime.JSX.Element;
+
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
+
+interface DropdownMenuItem {
+    label: string;
+    icon?: IconName;
+    onClick: () => void;
+    variant?: "default" | "destructive";
+    disabled?: boolean;
+}
+interface DropdownMenuDivider {
+    type: "divider";
+}
+type DropdownMenuEntry = DropdownMenuItem | DropdownMenuDivider;
+interface DropdownMenuProps {
+    trigger: ReactNode;
+    items: DropdownMenuEntry[];
+    align?: Align;
+    className?: string;
+    container?: Element | DocumentFragment;
+}
+declare function DropdownMenu({ trigger, items, align, className, container }: DropdownMenuProps): react_jsx_runtime.JSX.Element;
+
+interface BulkAction {
+    label: string;
+    onClick: () => void;
+    variant?: "default" | "destructive";
+}
+interface BulkActionBarProps {
+    selectedCount: number;
+    actions: BulkAction[];
+    onClearSelection: () => void;
+    className?: string;
+}
+declare function BulkActionBar({ selectedCount, actions, onClearSelection, className }: BulkActionBarProps): react_jsx_runtime.JSX.Element | null;
+
+type InputSize = "sm" | "md";
+declare function Input({ className, size, error, prefix, suffix, ...props }: Omit<InputHTMLAttributes<HTMLInputElement>, "size"> & {
+    size?: InputSize;
+    error?: boolean;
+    prefix?: ReactNode;
+    suffix?: ReactNode;
+}): react_jsx_runtime.JSX.Element;
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    autoResize?: boolean;
+    maxRows?: number;
+    ref?: Ref<HTMLTextAreaElement>;
+}
+declare function Textarea({ className, autoResize, maxRows, ref, ...props }: TextareaProps): react_jsx_runtime.JSX.Element;
+declare function Label({ className, children, ...props }: LabelHTMLAttributes<HTMLLabelElement>): react_jsx_runtime.JSX.Element;
+declare function Toggle({ checked, onChange, label, disabled, error, "aria-labelledby": ariaLabelledBy, ...rest }: {
+    checked: boolean;
+    onChange: (v: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    error?: boolean;
+    "aria-labelledby"?: string;
+} & Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange">): react_jsx_runtime.JSX.Element;
+
+interface Option {
+    id: string;
+    label: string;
+    group?: string;
+}
+type DropdownSize = "sm" | "md";
+interface DropdownProps {
+    options: Option[];
+    value: string | string[];
+    onChange: (value: string | string[]) => void;
+    label?: string;
+    disabled?: boolean;
+    placeholder?: string;
+    multiple?: boolean;
+    searchable?: boolean;
+    size?: DropdownSize;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    container?: Element | DocumentFragment;
+    error?: boolean;
+}
+declare function Dropdown({ options, value, onChange, label, disabled, placeholder, multiple, searchable, size, className, ref, container, error, }: DropdownProps): react_jsx_runtime.JSX.Element;
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface ComboboxProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: ComboboxOption[];
+    placeholder?: string;
+    disabled?: boolean;
+    loading?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    container?: Element | DocumentFragment;
+    error?: boolean;
+}
+declare function Combobox({ value, onChange, options, placeholder, disabled, loading, className, ref, container, error }: ComboboxProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps {
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    label?: string;
+    disabled?: boolean;
+    indeterminate?: boolean;
+    className?: string;
+    ref?: Ref<HTMLInputElement>;
+}
+declare function Checkbox({ checked, onChange, label, disabled, indeterminate, className, ref }: CheckboxProps): react_jsx_runtime.JSX.Element;
+interface CheckboxGroupProps {
+    value: string[];
+    onChange: (value: string[]) => void;
+    children: ReactNode;
+    className?: string;
+}
+declare function CheckboxGroup({ value, onChange, children, className }: CheckboxGroupProps): react_jsx_runtime.JSX.Element;
+interface CheckboxGroupItemProps {
+    value: string;
+    label: string;
+    disabled?: boolean;
+    /** @deprecated Use CheckboxGroup's value/onChange via context instead. */
+    groupValue?: string[];
+    /** @deprecated Use CheckboxGroup's value/onChange via context instead. */
+    onGroupChange?: (value: string[]) => void;
+}
+declare function CheckboxGroupItem({ value, label, disabled, groupValue, onGroupChange }: CheckboxGroupItemProps): react_jsx_runtime.JSX.Element;
+
+interface RadioOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: RadioOption[];
+    orientation?: "vertical" | "horizontal";
+    className?: string;
+    label?: string;
+}
+declare function RadioGroup({ value, onChange, options, orientation, className, label }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+
+interface DatePickerProps {
+    value: Date | null;
+    onChange: (date: Date | null) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    container?: Element | DocumentFragment;
+    error?: boolean;
+    label?: string;
+}
+declare function DatePicker({ value, onChange, placeholder, disabled, className, ref, container, error, label }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+interface FileUploadProps {
+    onFiles: (files: File[]) => void;
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    className?: string;
+    error?: boolean;
+    label?: string;
+}
+declare function FileUpload({ onFiles, accept, multiple, maxSize, className, error, label }: FileUploadProps): react_jsx_runtime.JSX.Element;
+
+interface SliderRangeProps {
+    value: number | [number, number];
+    onChange: (value: number | [number, number]) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    showValue?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    error?: boolean;
+}
+declare function SliderRange({ value, onChange, min, max, step, disabled, showValue, className, ref, error, }: SliderRangeProps): react_jsx_runtime.JSX.Element;
+
+interface TimePickerProps {
+    value: string;
+    onChange: (time: string) => void;
+    use24Hour?: boolean;
+    minuteStep?: number;
+    disabled?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    container?: Element | DocumentFragment;
+    error?: boolean;
+}
+declare function TimePicker({ value, onChange, use24Hour, minuteStep, disabled, className, ref, container, error, }: TimePickerProps): react_jsx_runtime.JSX.Element;
+
+interface NumberInputProps {
+    value: number;
+    onChange: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    placeholder?: string;
+    prefix?: string;
+    suffix?: string;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    error?: boolean;
+}
+declare function NumberInput({ value, onChange, min, max, step, disabled, placeholder, prefix, suffix, size, className, error, }: NumberInputProps): react_jsx_runtime.JSX.Element;
+
+interface TagInputProps {
+    value: string[];
+    onChange: (tags: string[]) => void;
+    placeholder?: string;
+    maxTags?: number;
+    disabled?: boolean;
+    className?: string;
+    error?: boolean;
+}
+declare function TagInput({ value, onChange, placeholder, maxTags, disabled, className, error, }: TagInputProps): react_jsx_runtime.JSX.Element;
+
+interface PinInputProps {
+    value: string;
+    onChange: (value: string) => void;
+    length?: number;
+    mask?: boolean;
+    disabled?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    error?: boolean;
+}
+declare function PinInput({ value, onChange, length, mask, disabled, size, className, error, }: PinInputProps): react_jsx_runtime.JSX.Element;
+
+interface RatingProps {
+    value: number;
+    onChange?: (value: number) => void;
+    max?: number;
+    allowHalf?: boolean;
+    readOnly?: boolean;
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    error?: boolean;
+}
+declare function Rating({ value, onChange, max, allowHalf, readOnly, size, className, error, }: RatingProps): react_jsx_runtime.JSX.Element;
+
+interface ColorPickerProps {
+    value: string;
+    onChange: (color: string) => void;
+    showAlpha?: boolean;
+    swatches?: string[];
+    disabled?: boolean;
+    className?: string;
+    error?: boolean;
+}
+declare function ColorPicker({ value, onChange, showAlpha, swatches, disabled, className, error, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+interface InlineFieldErrorProps {
+    message: string;
+    id: string;
+    className?: string;
+}
+declare function InlineFieldError({ message, id, className }: InlineFieldErrorProps): react_jsx_runtime.JSX.Element;
+
+type ValidationMode = "onBlur" | "onSubmit" | "onChange";
+interface FormErrors {
+    [field: string]: string | undefined;
+}
+interface FormContextValue {
+    errors: FormErrors;
+    setError: (field: string, message: string | undefined) => void;
+    clearErrors: () => void;
+    validationMode: ValidationMode;
+    submitted: boolean;
+}
+declare function useFormContext(): FormContextValue;
+interface FormWrapperProps {
+    onSubmit: (errors: FormErrors) => void;
+    validationMode?: ValidationMode;
+    children: ReactNode;
+    className?: string;
+    ref?: React.Ref<HTMLFormElement>;
+}
+declare function FormWrapper({ onSubmit, validationMode, children, className, ref }: FormWrapperProps): react_jsx_runtime.JSX.Element;
+
+interface TransferItem {
+    id: string;
+    label: string;
+    disabled?: boolean;
+}
+interface TransferListProps {
+    available: TransferItem[];
+    selected: TransferItem[];
+    onChange: (available: TransferItem[], selected: TransferItem[]) => void;
+    availableTitle?: string;
+    selectedTitle?: string;
+    searchable?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function TransferList({ available, selected, onChange, availableTitle, selectedTitle, searchable, className, ref, }: TransferListProps): react_jsx_runtime.JSX.Element;
+
+interface RichTextEditorProps {
+    content?: string;
+    placeholder?: string;
+    onChange?: (html: string) => void;
+    editable?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function RichTextEditor({ content, placeholder, onChange, editable, className, ref, }: RichTextEditorProps): react_jsx_runtime.JSX.Element | null;
+
+interface MentionSuggestion {
+    id: string;
+    label: string;
+    avatar?: string;
+    description?: string;
+}
+interface MentionInputProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    suggestions: MentionSuggestion[];
+    trigger?: string;
+    placeholder?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare function MentionInput({ value: controlledValue, onChange, suggestions, trigger, placeholder, disabled, className, }: MentionInputProps): react_jsx_runtime.JSX.Element;
+
+type CardVariant = "default" | "interactive" | "outline" | "ghost";
+interface CardProps extends HTMLAttributes<HTMLDivElement> {
+    variant?: CardVariant;
+    loading?: boolean;
+    selected?: boolean;
+    selectable?: boolean;
+    onSelectedChange?: (selected: boolean) => void;
+    children: ReactNode;
+}
+declare function Card({ variant, loading, selected, selectable, onSelectedChange, className, children, onClick, ...props }: CardProps): react_jsx_runtime.JSX.Element;
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    actions?: ReactNode;
+}
+declare function CardHeader({ className, children, actions, ...props }: CardHeaderProps): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, children, ...props }: HTMLAttributes<HTMLHeadingElement>): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, children, ...props }: HTMLAttributes<HTMLParagraphElement>): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, children, ...props }: HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+interface Trend {
+    direction: "up" | "down" | "flat";
+    value: string;
+}
+interface StatsCardProps {
+    value: string | number;
+    label: string;
+    trend?: Trend;
+    icon?: IconName;
+    layout?: "card" | "inline";
+    children?: ReactNode;
+    className?: string;
+}
+declare function StatsCard({ value, label, trend, icon, layout, children, className }: StatsCardProps): react_jsx_runtime.JSX.Element;
+
+interface DataListItem {
+    label: string;
+    value: ReactNode;
+}
+interface DataListProps {
+    items: DataListItem[];
+    columns?: 1 | 2;
+    className?: string;
+}
+declare function DataList({ items, columns, className }: DataListProps): react_jsx_runtime.JSX.Element;
+
+interface AccordionItem {
+    trigger: ReactNode;
+    content: ReactNode;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    type?: "single" | "multiple";
+    defaultOpen?: number[];
+    open?: number[];
+    onOpenChange?: (open: number[]) => void;
+    className?: string;
+}
+declare function Accordion({ items, type, defaultOpen, open: controlledOpen, onOpenChange, className }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+declare const DEFAULT_BREAKPOINTS: {
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+};
+type BreakpointKey = keyof typeof DEFAULT_BREAKPOINTS;
+/**
+ * Provides an override container width for all `useBreakpoint` calls within
+ * this subtree. Used by the builder's viewport preview to make components
+ * respond to the constrained canvas width instead of the browser viewport.
+ */
+declare function BreakpointWidthProvider({ width, children }: {
+    width: number | null;
+    children: ReactNode;
+}): react.FunctionComponentElement<react.ProviderProps<number | null>>;
+/**
+ * Reactive breakpoint check that reads `--ds-bp-*` CSS variables.
+ * Returns true when the viewport (or override container) is at or below the
+ * named breakpoint.
+ *
+ * @example
+ * const isMobile = useBreakpoint("md"); // true when ≤768px
+ */
+declare function useBreakpoint(key: BreakpointKey): boolean;
+
+interface Column {
+    key: string;
+    header: string;
+    align?: "left" | "center" | "right";
+    sortable?: boolean;
+}
+type SortDir = "asc" | "desc" | null;
+type TableDensity = "default" | "compact";
+interface TableProps {
+    columns: Column[];
+    data: Record<string, string | number | ReactNode>[];
+    className?: string;
+    sortable?: boolean;
+    sortKey?: string | null;
+    sortDir?: SortDir;
+    onSortChange?: (key: string | null, dir: SortDir) => void;
+    selectable?: boolean;
+    selectedRows?: number[];
+    onSelectionChange?: (rows: number[]) => void;
+    expandable?: boolean;
+    renderExpanded?: (row: Record<string, string | number | ReactNode>, index: number) => ReactNode;
+    density?: TableDensity;
+    stickyHeader?: boolean;
+    striped?: boolean;
+    loading?: boolean;
+    emptyState?: ReactNode;
+    onRowClick?: (row: Record<string, string | number | ReactNode>, index: number) => void;
+    /** Breakpoint at which the table switches to card layout. Defaults to "md" (768px). */
+    mobileBreakpoint?: BreakpointKey;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Table({ columns, data, className, sortable, sortKey: controlledSortKey, sortDir: controlledSortDir, onSortChange, selectable, selectedRows, onSelectionChange, expandable, renderExpanded, density, stickyHeader, striped, loading, emptyState, onRowClick, mobileBreakpoint, ref, }: TableProps): react_jsx_runtime.JSX.Element;
+
+interface CalendarEvent {
+    id: string;
+    title: string;
+    start: Date;
+    end?: Date;
+    allDay?: boolean;
+    category?: string;
+    description?: string;
+    location?: string;
+}
+interface EventCategory {
+    color: string;
+    label: string;
+}
+type CalendarView = "month" | "week" | "year";
+interface CalendarProps {
+    events?: CalendarEvent[];
+    view?: CalendarView;
+    defaultView?: CalendarView;
+    onViewChange?: (view: CalendarView) => void;
+    date?: Date;
+    defaultDate?: Date;
+    onDateChange?: (date: Date) => void;
+    onDateRangeChange?: (range: {
+        start: Date;
+        end: Date;
+    }) => void;
+    onEventClick?: (event: CalendarEvent) => void;
+    onDayClick?: (date: Date) => void;
+    categories?: Record<string, EventCategory>;
+    weekStartsOn?: 0 | 1;
+    className?: string;
+}
+
+declare function Calendar({ events, view: controlledView, defaultView, onViewChange, date: controlledDate, defaultDate, onDateChange, onDateRangeChange, onEventClick, onDayClick, categories, weekStartsOn, className, }: CalendarProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = "default" | "neutral" | "subtle" | "success" | "success-soft" | "warning" | "warning-soft" | "error" | "error-soft" | "outline";
+type BadgeSize = "xs" | "sm" | "md";
+interface BadgeProps {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    /** Icon to show before the label */
+    iconLeft?: IconName;
+    /** Icon to show after the label */
+    iconRight?: IconName;
+    className?: string;
+    children?: ReactNode;
+}
+declare function Badge({ variant, size, iconLeft, iconRight, className, children }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+type TagVariant = "default" | "subtle" | "success" | "warning" | "error" | "outline";
+interface TagProps {
+    variant?: TagVariant;
+    size?: "sm" | "md";
+    onRemove?: () => void;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+    children: ReactNode;
+}
+declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLSpanElement>>;
+
+interface AvatarProps {
+    initials?: string;
+    src?: string;
+    alt?: string;
+    size?: "sm" | "md" | "lg";
+    status?: "online" | "away";
+    className?: string;
+}
+declare function Avatar({ initials, src, alt, size, status, className }: AvatarProps): react_jsx_runtime.JSX.Element;
+
+interface EmptyStateProps {
+    icon?: ReactNode;
+    title: string;
+    description?: string;
+    action?: ReactNode;
+    variant?: "empty" | "filtered" | "error" | "no-permission";
+    className?: string;
+}
+declare function EmptyState({ icon, title, description, action, variant, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+interface TimelineItem {
+    title: string;
+    description?: string;
+    timestamp?: string;
+    icon?: ReactNode;
+    variant?: "default" | "success" | "warning" | "error";
+}
+interface TimelineProps {
+    items: TimelineItem[];
+    orientation?: "vertical" | "horizontal";
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Timeline({ items, orientation, className, ref }: TimelineProps): react_jsx_runtime.JSX.Element;
+
+interface CodeBlockProps {
+    code: string;
+    language?: string;
+    showLineNumbers?: boolean;
+    className?: string;
+}
+declare function CodeBlock({ code, language, showLineNumbers, className, }: CodeBlockProps): react_jsx_runtime.JSX.Element;
+
+interface CollapsibleProps {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    children: ReactNode | ((props: {
+        isOpen: boolean;
+        toggle: () => void;
+    }) => ReactNode);
+    className?: string;
+}
+interface CollapsibleTriggerProps {
+    children: ReactNode;
+    className?: string;
+}
+interface CollapsibleContentProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function CollapsibleRoot({ open: controlledOpen, defaultOpen, onOpenChange, children, className, }: CollapsibleProps): react_jsx_runtime.JSX.Element;
+declare function CollapsibleTrigger({ children, className }: CollapsibleTriggerProps): react_jsx_runtime.JSX.Element;
+declare function CollapsibleContent({ children, className }: CollapsibleContentProps): react_jsx_runtime.JSX.Element;
+declare const Collapsible: typeof CollapsibleRoot & {
+    Trigger: typeof CollapsibleTrigger;
+    Content: typeof CollapsibleContent;
+};
+
+interface KbdProps {
+    children: ReactNode;
+    className?: string;
+}
+declare function Kbd({ children, className }: KbdProps): react_jsx_runtime.JSX.Element;
+
+interface SkeletonProps {
+    variant?: "text" | "avatar" | "card" | "table-row" | "custom";
+    lines?: number;
+    width?: string;
+    height?: string;
+    className?: string;
+}
+declare function Skeleton({ variant, lines, width, height, className }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+interface TreeNode {
+    id: string;
+    label: string;
+    icon?: IconName;
+    children?: TreeNode[];
+    disabled?: boolean;
+}
+interface TreeViewProps {
+    nodes: TreeNode[];
+    selectable?: boolean;
+    multiSelect?: boolean;
+    checkable?: boolean;
+    defaultExpanded?: string[];
+    defaultSelected?: string[];
+    defaultChecked?: string[];
+    onSelect?: (ids: string[]) => void;
+    onCheck?: (ids: string[]) => void;
+    className?: string;
+}
+declare function TreeView({ nodes, selectable, multiSelect, checkable, defaultExpanded, defaultSelected, defaultChecked, onSelect, onCheck, className, }: TreeViewProps): react_jsx_runtime.JSX.Element;
+
+interface CarouselProps {
+    children: ReactNode[];
+    autoPlay?: boolean;
+    autoPlayInterval?: number;
+    loop?: boolean;
+    showIndicators?: boolean;
+    showArrows?: boolean;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function Carousel({ children, autoPlay, autoPlayInterval, loop, showIndicators, showArrows, className, ref, }: CarouselProps): react_jsx_runtime.JSX.Element;
+
+interface DataGridProps<T> {
+    data: T[];
+    columns: ColumnDef<T, any>[];
+    pageSize?: number;
+    editable?: boolean;
+    onCellEdit?: (rowIndex: number, columnId: string, value: unknown) => void;
+    /** Breakpoint at which the grid switches to card layout. Defaults to "md" (768px). */
+    mobileBreakpoint?: BreakpointKey;
+    className?: string;
+}
+declare function DataGrid<T>({ data, columns, pageSize, editable, onCellEdit, mobileBreakpoint, className, }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
+
+interface KanbanCard {
+    id: string;
+    title: string;
+    description?: string;
+    tags?: string[];
+    avatar?: string;
+}
+interface KanbanColumn {
+    id: string;
+    title: string;
+    cards: KanbanCard[];
+    color?: string;
+}
+interface KanbanBoardProps {
+    columns: KanbanColumn[];
+    onColumnsChange?: (columns: KanbanColumn[]) => void;
+    renderCard?: (card: KanbanCard) => ReactNode;
+    className?: string;
+}
+declare function KanbanBoard({ columns: controlledCols, onColumnsChange, renderCard, className, }: KanbanBoardProps): react_jsx_runtime.JSX.Element;
+
+interface ChatMessage {
+    id: string;
+    sender: {
+        name: string;
+        avatar?: string;
+    };
+    content: string | ReactNode;
+    timestamp: Date;
+    isOwn?: boolean;
+}
+interface ChatMessageListProps {
+    messages: ChatMessage[];
+    typingUser?: string;
+    showInput?: boolean;
+    onSend?: (text: string) => void;
+    className?: string;
+}
+declare function ChatMessageList({ messages, typingUser, showInput, onSend, className, }: ChatMessageListProps): react_jsx_runtime.JSX.Element;
+
+interface VirtualizedListProps<T> {
+    items: T[];
+    estimateSize: (index: number) => number;
+    renderItem: (item: T, index: number, virtualItem: VirtualItem) => ReactNode;
+    overscan?: number;
+    height?: number | string;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+}
+declare function VirtualizedList<T>({ items, estimateSize, renderItem, overscan, height, className, ref, }: VirtualizedListProps<T>): react_jsx_runtime.JSX.Element;
+
+interface StackedListItem {
+    id: string | number;
+    leading?: ReactNode;
+    title: string;
+    subtitle?: string;
+    meta?: ReactNode;
+    actions?: ReactNode;
+    onClick?: () => void;
+}
+interface StackedListProps {
+    items: StackedListItem[];
+    divided?: boolean;
+    className?: string;
+}
+declare const StackedList: react.ForwardRefExoticComponent<StackedListProps & react.RefAttributes<HTMLUListElement>>;
+
+type TabsVariant = "underline" | "pill";
+interface Tab {
+    id: string;
+    label: string;
+    count?: number;
+    icon?: IconName;
+    disabled?: boolean;
+}
+interface TabsArrayProps {
+    tabs: Tab[];
+    activeTab: string;
+    onTabChange: (id: string) => void;
+    orientation?: "horizontal" | "vertical";
+    variant?: TabsVariant;
+    fullWidth?: boolean;
+    className?: string;
+    children?: never;
+}
+interface TabsCompoundProps {
+    activeTab: string;
+    onTabChange: (id: string) => void;
+    orientation?: "horizontal" | "vertical";
+    variant?: TabsVariant;
+    fullWidth?: boolean;
+    className?: string;
+    children: ReactNode;
+    tabs?: never;
+}
+type TabsProps = TabsArrayProps | TabsCompoundProps;
+declare function TabsList({ children, className }: {
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ value, children, count, icon, disabled, className }: {
+    value: string;
+    children: ReactNode;
+    count?: number;
+    icon?: IconName;
+    disabled?: boolean;
+    className?: string;
+}): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ value, children, className }: {
+    value: string;
+    children: ReactNode;
+    className?: string;
+}): react_jsx_runtime.JSX.Element | null;
+declare function TabsRoot(props: TabsProps): react_jsx_runtime.JSX.Element;
+declare const Tabs: typeof TabsRoot & {
+    List: typeof TabsList;
+    Trigger: typeof TabsTrigger;
+    Content: typeof TabsContent;
+};
+
+interface BreadcrumbItem$1 {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+interface BreadcrumbsProps {
+    items: BreadcrumbItem$1[];
+    separator?: "slash" | "chevron" | "dot";
+    className?: string;
+}
+declare function Breadcrumbs({ items, separator, className }: BreadcrumbsProps): react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    onPageSizeChange?: (size: number) => void;
+    className?: string;
+}
+declare function Pagination({ currentPage, totalPages, onPageChange, pageSize, pageSizeOptions, onPageSizeChange, className }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+interface Step {
+    label: string;
+    description?: string;
+    status?: "complete" | "error" | "loading";
+}
+interface StepperProps {
+    steps: Step[];
+    currentStep: number;
+    onStepChange?: (step: number) => void;
+    orientation?: "horizontal" | "vertical";
+    className?: string;
+}
+declare function Stepper({ steps, currentStep, onStepChange, orientation, className }: StepperProps): react_jsx_runtime.JSX.Element;
+
+type SidebarType = "traditional" | "compact" | "minimal";
+interface SidebarContextValue {
+    collapsed: boolean;
+    onCollapsedChange: (collapsed: boolean) => void;
+    portalContainer: Element | null;
+    type: SidebarType;
+}
+declare function useSidebar(): SidebarContextValue | null;
+type SidebarVariant = "default" | "dark" | "branded";
+interface SidebarProps {
+    header?: ReactNode;
+    footer?: ReactNode;
+    children: ReactNode;
+    collapsed?: boolean;
+    defaultCollapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    variant?: SidebarVariant;
+    /** Force dark-mode scoping for overlays (tooltips, dropdowns) portaled from this sidebar. */
+    darkMode?: boolean;
+    mini?: boolean;
+    /** Sidebar layout type: traditional (collapsible), compact (narrow icon+label stacked), minimal (transparent, no border) */
+    type?: SidebarType;
+    /** Fill available width (100%) instead of using a fixed token width. Use inside Drawers. */
+    fill?: boolean;
+    className?: string;
+}
+declare const Sidebar: react.ForwardRefExoticComponent<SidebarProps & react.RefAttributes<HTMLElement>>;
+
+interface SidebarItem {
+    label: string;
+    icon?: IconName;
+    href?: string;
+    active?: boolean;
+    badge?: ReactNode;
+    children?: SidebarItem[];
+    defaultExpanded?: boolean;
+}
+interface SidebarSection {
+    label?: string;
+    items: SidebarItem[];
+}
+interface SidebarNavProps {
+    items?: SidebarItem[];
+    sections?: SidebarSection[];
+    collapsed?: boolean;
+    onCollapsedChange?: (collapsed: boolean) => void;
+    footer?: ReactNode;
+    onItemClick?: (item: SidebarItem, index: number) => void;
+    /** Override sidebar type (defaults to parent Sidebar context type) */
+    type?: SidebarType;
+    /** Mobile mode: disables hover flyouts for compact items, renders children inline instead. */
+    mobile?: boolean;
+    className?: string;
+}
+declare function SidebarNav({ items, sections, collapsed: propsCollapsed, onCollapsedChange: propsOnChange, footer, onItemClick, type: propsType, mobile, className, }: SidebarNavProps): react_jsx_runtime.JSX.Element;
+
+interface SegmentedControlOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+interface SegmentedControlProps {
+    value: string;
+    onChange: (value: string) => void;
+    options: SegmentedControlOption[];
+    size?: "sm" | "md" | "lg";
+    variant?: "default" | "ghost";
+    className?: string;
+}
+declare function SegmentedControl({ value, onChange, options, size, variant, className, }: SegmentedControlProps): react_jsx_runtime.JSX.Element;
+
+interface BottomNavItem {
+    label: string;
+    icon: IconName;
+    active?: boolean;
+}
+interface BottomNavProps {
+    items: BottomNavItem[];
+    onItemClick?: (item: BottomNavItem, index: number) => void;
+    /** Max visible items before overflow. Defaults to 5. */
+    maxVisible?: number;
+    className?: string;
+    ref?: Ref<HTMLElement>;
+}
+declare function BottomNav({ items, onItemClick, maxVisible, className, ref }: BottomNavProps): react_jsx_runtime.JSX.Element;
+
+interface BreadcrumbItem {
+    label: string;
+    href?: string;
+    onClick?: () => void;
+}
+type HeadingLevel = "h1" | "h2" | "h3" | "h4";
+interface PageHeaderProps {
+    title: string;
+    description?: string;
+    badge?: ReactNode;
+    breadcrumbs?: BreadcrumbItem[];
+    onBack?: () => void;
+    actions?: ReactNode;
+    avatar?: ReactNode;
+    stats?: ReactNode;
+    filters?: ReactNode;
+    bannerImage?: string;
+    as?: HeadingLevel;
+    className?: string;
+}
+declare function PageHeader({ title, description, badge, breadcrumbs, onBack, actions, avatar, stats, filters, bannerImage, as: Heading, className, }: PageHeaderProps): react_jsx_runtime.JSX.Element;
+
+interface DockItem {
+    id: string;
+    icon: IconName | ReactNode;
+    label: string;
+    onClick?: () => void;
+    badge?: number;
+}
+interface DockProps {
+    items: DockItem[];
+    magnification?: number;
+    baseSize?: number;
+    className?: string;
+}
+declare function Dock({ items, magnification, baseSize, className, }: DockProps): react_jsx_runtime.JSX.Element;
+
+type NavbarType = "default" | "underline" | "minimal";
+type NavbarAlign = "left" | "center" | "right";
+type NavbarVariant = "default" | "transparent" | "compact" | "branded";
+interface NavbarProps {
+    logo?: ReactNode;
+    navLinks?: ReactNode;
+    search?: ReactNode;
+    actions?: ReactNode;
+    userMenu?: ReactNode;
+    variant?: NavbarVariant;
+    /** Visual style type: default (ghost-button nav items), underline (tab-style with bottom indicator), minimal (transparent, borderless, text-only) */
+    type?: NavbarType;
+    /** Horizontal alignment of nav links: left (default), center (viewport-centered), right (before actions) */
+    align?: NavbarAlign;
+    sticky?: boolean;
+    className?: string;
+    onMenuClick?: () => void;
+}
+declare const Navbar: react.ForwardRefExoticComponent<NavbarProps & react.RefAttributes<HTMLElement>>;
+
+interface NavMenuItem {
+    label: string;
+    href?: string;
+    active?: boolean;
+    icon?: IconName;
+    description?: string;
+    /** Nested items render as a grouped section under this label */
+    children?: NavMenuItem[];
+}
+interface NavMenuProps {
+    /** Trigger label displayed in the navbar */
+    label: string;
+    items: NavMenuItem[];
+    /** Whether any child route is currently active (highlights the trigger) */
+    active?: boolean;
+    /** Matches the parent Navbar type for consistent styling */
+    type?: NavbarType;
+    onItemClick?: (item: NavMenuItem) => void;
+    className?: string;
+}
+declare function NavMenu({ label, items, active, type, onItemClick, className, }: NavMenuProps): react_jsx_runtime.JSX.Element;
+
+type MobileHeaderMenuType = "default" | "underline" | "minimal";
+interface MobileHeaderMenuItemData {
+    label: string;
+    icon?: IconName;
+    active?: boolean;
+}
+interface MobileHeaderMenuProps {
+    items: MobileHeaderMenuItemData[];
+    type?: MobileHeaderMenuType;
+    onItemClick?: (item: MobileHeaderMenuItemData, index: number) => void;
+    className?: string;
+}
+declare function MobileHeaderMenu({ items, type, onItemClick, className }: MobileHeaderMenuProps): react_jsx_runtime.JSX.Element;
+
+type DialogSize = "sm" | "md" | "lg" | "xl" | "full";
+interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    title: string;
+    description?: string;
+    children?: ReactNode;
+    footer?: ReactNode;
+    variant?: "default" | "destructive";
+    size?: DialogSize;
+    alert?: boolean;
+    container?: Element | DocumentFragment;
+    /** Called when Enter is pressed in the dialog (e.g. form submit). Primary footer button should use type="submit". */
+    onSubmit?: () => void;
+}
+declare function Dialog({ open, onClose, title, description, children, footer, variant, size, alert, container, onSubmit }: DialogProps): react.ReactPortal | null;
+
+interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    position?: "left" | "right" | "bottom";
+    width?: string;
+    title?: string;
+    children: ReactNode;
+    footer?: ReactNode;
+    container?: Element | DocumentFragment;
+    /** Remove default content padding — use when the child (e.g. Sidebar) handles its own spacing. */
+    flush?: boolean;
+    /** Use a lighter backdrop (no blur, subtle dim). Use for compact overlays. */
+    lightBackdrop?: boolean;
+}
+declare function Drawer({ open, onClose, position, width, title, children, footer, container, flush, lightBackdrop }: DrawerProps): react.ReactPortal | null;
+
+interface TooltipProps {
+    content: ReactNode;
+    children: ReactNode;
+    side?: Side;
+    delay?: number;
+    className?: string;
+    container?: Element | DocumentFragment;
+}
+declare function Tooltip({ content, children, side, delay, className, container }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+interface PopoverProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    trigger: ReactNode;
+    children: ReactNode;
+    side?: Side;
+    align?: Align;
+    width?: "trigger" | "auto" | (string & {});
+    className?: string;
+    container?: Element | DocumentFragment;
+}
+declare function Popover({ open, onOpenChange, trigger, children, side, align, width, className, container }: PopoverProps): react_jsx_runtime.JSX.Element;
+
+interface Command {
+    id: string;
+    label: string;
+    icon?: IconName;
+    shortcut?: string;
+    group?: string;
+    onSelect: () => void;
+}
+interface CommandPaletteProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    commands: Command[];
+    placeholder?: string;
+    loading?: boolean;
+    container?: Element | DocumentFragment;
+}
+declare function CommandPalette({ open, onOpenChange, commands, placeholder, loading, container }: CommandPaletteProps): react.ReactPortal | null;
+
+interface HoverCardProps {
+    content: ReactNode;
+    children: ReactNode;
+    side?: Side;
+    delay?: number;
+    closeDelay?: number;
+    className?: string;
+    container?: Element | DocumentFragment;
+}
+declare function HoverCard({ content, children, side, delay, closeDelay, className, container, }: HoverCardProps): react_jsx_runtime.JSX.Element;
+
+interface ContextMenuItem {
+    label: string;
+    icon?: IconName;
+    shortcut?: string;
+    disabled?: boolean;
+    destructive?: boolean;
+    separator?: boolean;
+    onClick?: () => void;
+}
+interface ContextMenuProps {
+    items: ContextMenuItem[];
+    children: ReactNode;
+    className?: string;
+    ref?: Ref<HTMLDivElement>;
+    container?: Element | DocumentFragment;
+}
+declare function ContextMenu({ items, children, className, ref, container }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+
+interface SheetProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    children: ReactNode;
+    footer?: ReactNode;
+    snapPoints?: number[];
+}
+declare function Sheet({ open, onClose, title, children, footer, snapPoints }: SheetProps): react.ReactPortal | null;
+
+interface Notification {
+    id: string;
+    title: string;
+    description?: string;
+    timestamp: string;
+    read?: boolean;
+    avatar?: string;
+    initials?: string;
+}
+interface NotificationCenterProps {
+    notifications: Notification[];
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onMarkRead?: (id: string) => void;
+    onMarkAllRead?: () => void;
+    onDismiss?: (id: string) => void;
+    className?: string;
+    container?: Element | DocumentFragment;
+    ref?: Ref<HTMLDivElement>;
+    variant?: "dropdown" | "page";
+    filter?: "all" | "unread";
+    onFilterChange?: (filter: "all" | "unread") => void;
+}
+declare function NotificationCenter({ notifications, open: controlledOpen, onOpenChange, onMarkRead, onMarkAllRead, onDismiss, className, container, ref, variant, filter: controlledFilter, onFilterChange, }: NotificationCenterProps): react_jsx_runtime.JSX.Element;
+
+interface TourStep {
+    target: string;
+    title: string;
+    content: ReactNode;
+    placement?: "top" | "bottom" | "left" | "right";
+}
+interface TourProps {
+    steps: TourStep[];
+    open: boolean;
+    onClose: () => void;
+    onComplete?: () => void;
+    container?: Element | DocumentFragment;
+}
+declare function Tour({ steps, open, onClose, onComplete, container }: TourProps): react.ReactPortal | null;
+
+type AlertVariant = "info" | "success" | "warning" | "error";
+interface AlertAction {
+    label: string;
+    onClick: () => void;
+}
+interface AlertProps {
+    variant: AlertVariant;
+    title: string;
+    children?: ReactNode;
+    dismissible?: boolean;
+    onDismiss?: () => void;
+    action?: AlertAction;
+    className?: string;
+}
+declare function Alert({ variant, title, children, dismissible, onDismiss, action, className }: AlertProps): react_jsx_runtime.JSX.Element;
+
+type ToastVariant = "default" | "success" | "warning" | "error";
+type ToastPosition = "top-right" | "top-left" | "bottom-right" | "bottom-left" | "top-center" | "bottom-center";
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastProps {
+    variant?: ToastVariant;
+    message: ReactNode;
+    visible: boolean;
+    onDismiss: () => void;
+    duration?: number;
+    pauseOnHover?: boolean;
+    action?: ToastAction;
+    position?: ToastPosition;
+    container?: Element | DocumentFragment;
+}
+declare function Toast({ variant, message, visible, onDismiss, duration, pauseOnHover, action, position, container }: ToastProps): react.ReactPortal | null;
+
+type ProgressVariant = "default" | "success" | "warning" | "error";
+interface ProgressProps {
+    value?: number;
+    max?: number;
+    variant?: ProgressVariant;
+    size?: "sm" | "md" | "lg";
+    indeterminate?: boolean;
+    showLabel?: boolean;
+    className?: string;
+}
+declare function Progress({ value, max, variant, size, indeterminate, showLabel, className }: ProgressProps): react_jsx_runtime.JSX.Element;
+
+declare const sizes: {
+    readonly sm: "h-4 w-4 border-[1.5px]";
+    readonly md: "h-6 w-6 border-2";
+    readonly lg: "h-8 w-8 border-[2.5px]";
+};
+interface SpinnerProps {
+    size?: keyof typeof sizes;
+    color?: "default" | "inherit";
+    label?: string;
+    className?: string;
+}
+declare function Spinner({ size, color, label, className }: SpinnerProps): react_jsx_runtime.JSX.Element;
+
+type Orientation = "horizontal" | "vertical";
+interface DividerProps {
+    orientation?: Orientation;
+    label?: ReactNode;
+    className?: string;
+}
+declare function Divider({ orientation, label, className, }: DividerProps): react_jsx_runtime.JSX.Element;
+
+interface ScrollAreaProps {
+    children: ReactNode;
+    className?: string;
+    orientation?: "vertical" | "horizontal" | "both";
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+}
+declare function ScrollArea({ children, className, orientation, maxHeight, maxWidth, }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
+
+type PanelGroupProps = ComponentProps<typeof Group>;
+type Direction = "horizontal" | "vertical";
+interface ResizablePanelGroupProps extends Omit<PanelGroupProps, "className" | "orientation"> {
+    direction?: Direction;
+    className?: string;
+}
+declare function ResizablePanelGroup({ className, direction, ...props }: ResizablePanelGroupProps): react_jsx_runtime.JSX.Element;
+type PanelProps = ComponentProps<typeof Panel>;
+interface ResizablePanelProps extends Omit<PanelProps, "className"> {
+    className?: string;
+}
+declare function ResizablePanel({ className, ...props }: ResizablePanelProps): react_jsx_runtime.JSX.Element;
+type PanelResizeHandleProps = ComponentProps<typeof Separator>;
+interface ResizableHandleProps extends Omit<PanelResizeHandleProps, "className"> {
+    withHandle?: boolean;
+    className?: string;
+}
+declare function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps): react_jsx_runtime.JSX.Element;
+
+interface AppShellContextValue {
+    hasSidebar: boolean;
+    hasMobileMenu: boolean;
+    sidebarOpen: boolean;
+    setSidebarOpen: (open: boolean) => void;
+    isMobile: boolean;
+    /** True only for tablet-sized viewports (between sm and md breakpoints). Drawer shows here, not on small mobile. */
+    isTablet: boolean;
+}
+declare function useAppShell(): AppShellContextValue | null;
+type AppShellLayout = "sidebar" | "stacked" | "sidebar-header" | "multi-column";
+interface AppShellProps {
+    layout?: AppShellLayout;
+    sidebar?: ReactNode;
+    /** Content to render in the mobile drawer. For sidebar layouts, this is typically a Sidebar+SidebarNav. For header layouts, a MobileHeaderMenu. */
+    mobileMenu?: ReactNode;
+    /** Override drawer width for the mobile menu. Defaults to --ds-drawer-width. */
+    mobileMenuWidth?: string;
+    /** Use a lighter backdrop for the mobile menu drawer. */
+    mobileMenuLightBackdrop?: boolean;
+    /** Remove drawer padding and borders. Default true. Set false for compact overlays. */
+    mobileMenuFlush?: boolean;
+    navbar?: ReactNode;
+    mobileNav?: ReactNode;
+    children: ReactNode;
+    className?: string;
+    /** When false, main area won't scroll — use for full-height layouts like ResizablePanelGroup. Default true. */
+    scrollable?: boolean;
+}
+declare const AppShell: react.ForwardRefExoticComponent<AppShellProps & react.RefAttributes<HTMLDivElement>>;
+
+type MaxWidth = "sm" | "md" | "lg" | "xl" | "full";
+type Padding = "none" | "default" | "wide";
+interface PageContainerProps {
+    maxWidth?: MaxWidth;
+    padding?: Padding;
+    centered?: boolean;
+    children: ReactNode;
+    className?: string;
+}
+declare const PageContainer: react.ForwardRefExoticComponent<PageContainerProps & react.RefAttributes<HTMLDivElement>>;
+
+interface SectionHeadingProps {
+    title: string;
+    description?: string;
+    actions?: ReactNode;
+    badge?: ReactNode;
+    tabs?: ReactNode;
+    bordered?: boolean;
+    className?: string;
+}
+declare const SectionHeading: react.ForwardRefExoticComponent<SectionHeadingProps & react.RefAttributes<HTMLDivElement>>;
+
+interface ActionPanelProps {
+    title: string;
+    description?: string;
+    action: ReactNode;
+    className?: string;
+}
+declare const ActionPanel: react.ForwardRefExoticComponent<ActionPanelProps & react.RefAttributes<HTMLDivElement>>;
+interface ActionPanelGroupProps {
+    children: ReactNode;
+    divided?: boolean;
+    className?: string;
+}
+declare const ActionPanelGroup: react.ForwardRefExoticComponent<ActionPanelGroupProps & react.RefAttributes<HTMLDivElement>>;
+
+export { Accordion, ActionPanel, ActionPanelGroup, Alert, AppShell, type AppShellContextValue, Avatar, Badge, type BadgeSize, type BadgeVariant, BottomNav, type BottomNavItem, Breadcrumbs, type BreakpointKey, BreakpointWidthProvider, BulkActionBar, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Carousel, ChatMessageList, Checkbox, CheckboxGroup, CheckboxGroupItem, CodeBlock, Collapsible, ColorPicker, type Column, Combobox, CommandPalette, ContextMenu, DataGrid, DataList, DatePicker, Dialog, Divider, Dock, Drawer, Dropdown, DropdownMenu, EmptyState, FileUpload, FormWrapper, HoverCard, InlineFieldError, Input, KanbanBoard, Kbd, Label, MentionInput, MobileHeaderMenu, type MobileHeaderMenuItemData, type MobileHeaderMenuType, NavMenu, type NavMenuItem, Navbar, type NavbarType, NotificationCenter, NumberInput, PageContainer, PageHeader, type PageHeaderProps, Pagination, PinInput, Popover, Progress, RadioGroup, Rating, ResizableHandle, ResizablePanel, ResizablePanelGroup, RichTextEditor, ScrollArea, SectionHeading, SegmentedControl, Sheet, Sidebar, type SidebarContextValue, type SidebarItem, SidebarNav, type SidebarSection, type SidebarType, Skeleton, SliderRange, Spinner, StackedList, StatsCard, Stepper, type Tab, Table, type TableDensity, type TableProps, Tabs, Tag, TagInput, type TagVariant, Textarea, TimePicker, Timeline, Toast, Toggle, Tooltip, Tour, TransferList, TreeView, VirtualizedList, useAppShell, useBreakpoint, useFormContext, useSidebar };