@juv/codego-react-ui 1.0.1 → 1.0.4

package/dist/index.d.ts

@@ -1,2 +1,1203 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
 
-export {  }
+type AccordionVariant = "default" | "bordered" | "separated" | "ghost";
+interface AccordionItem {
+    value: string;
+    trigger: React.ReactNode;
+    content: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+interface AccordionProps {
+    items: AccordionItem[];
+    type?: "single" | "multiple";
+    defaultValue?: string | string[];
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    variant?: AccordionVariant;
+    className?: string;
+}
+declare function Accordion({ items, type, defaultValue, value: controlledValue, onChange, variant, className, }: AccordionProps): react_jsx_runtime.JSX.Element;
+
+interface AvatarStackProps {
+    images: string[];
+    limit?: number;
+    stacked?: boolean;
+    shape?: "circle" | "square";
+    size?: number;
+    className?: string;
+}
+declare function AvatarStack({ images, limit, stacked, shape, size, className, }: AvatarStackProps): react_jsx_runtime.JSX.Element;
+
+type BadgeVariant = "default" | "success" | "error" | "warning" | "info" | "outline" | "ghost";
+type BadgeSize = "sm" | "md" | "lg";
+interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+    variant?: BadgeVariant;
+    size?: BadgeSize;
+    dot?: boolean;
+    rounded?: "md" | "full";
+    icon?: React.ReactNode;
+    removable?: boolean;
+    onRemove?: () => void;
+}
+declare function Badge({ variant, size, dot, rounded, icon, removable, onRemove, className, children, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+interface BreadcrumbItem {
+    label: React.ReactNode;
+    href?: string;
+    icon?: React.ReactNode;
+    onClick?: () => void;
+}
+interface BreadcrumbProps {
+    items: BreadcrumbItem[];
+    separator?: React.ReactNode;
+    maxItems?: number;
+    className?: string;
+}
+declare function Breadcrumb({ items, separator, maxItems, className, }: BreadcrumbProps): react_jsx_runtime.JSX.Element;
+
+interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    variant?: "primary" | "secondary" | "outline" | "ghost" | "link" | "danger" | "success";
+    size?: "xs" | "sm" | "md" | "lg" | "xl";
+    fullWidth?: boolean;
+    width?: number | string;
+    height?: number | string;
+    rounded?: "none" | "sm" | "md" | "lg" | "xl" | "full";
+    bgColor?: string;
+    textColor?: string;
+    borderColor?: string;
+    borderWidth?: number;
+    shadow?: boolean;
+    shadowColor?: string;
+    opacity?: number;
+    gradientFrom?: string;
+    gradientTo?: string;
+    gradientDirection?: "to-r" | "to-l" | "to-t" | "to-b" | "to-tr" | "to-tl" | "to-br" | "to-bl";
+    fontSize?: number;
+    fontWeight?: "normal" | "medium" | "semibold" | "bold";
+    padding?: number | string;
+    margin?: number | string;
+    label?: string;
+    children?: React.ReactNode;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+    iconOnly?: boolean;
+    loading?: boolean;
+    loadingText?: string;
+    loadingPosition?: "left" | "right" | "center";
+    disabled?: boolean;
+    active?: boolean;
+    selected?: boolean;
+    animate?: boolean;
+    transitionDuration?: number;
+    transitionType?: "ease" | "linear" | "spring";
+    hoverScale?: number;
+    hoverOpacity?: number;
+    hoverBgColor?: string;
+    hoverTextColor?: string;
+    hoverBorderColor?: string;
+    activeScale?: number;
+    pressAnimation?: "shrink" | "bounce" | "none";
+    rippleEffect?: boolean;
+    rippleColor?: string;
+    rippleDuration?: number;
+    animationType?: "bounce" | "pulse" | "shake" | "wiggle";
+    loopAnimation?: boolean;
+    animationDelay?: number;
+    fadeIn?: boolean;
+    slideIn?: boolean;
+    slideDirection?: "left" | "right" | "top" | "bottom";
+    onClick?: (e?: any) => void;
+    onDoubleClick?: (e?: any) => void;
+    onMouseEnter?: (e?: any) => void;
+    onMouseLeave?: (e?: any) => void;
+    onMouseDown?: (e?: any) => void;
+    onMouseUp?: (e?: any) => void;
+    onPress?: () => void;
+    onLongPress?: () => void;
+    onPressIn?: () => void;
+    onPressOut?: () => void;
+    onFocus?: () => void;
+    onBlur?: () => void;
+    ariaLabel?: string;
+    role?: string;
+    tabIndex?: number;
+    type?: "button" | "submit" | "reset";
+    preventDefault?: boolean;
+    stopPropagation?: boolean;
+    debounceTime?: number;
+    throttleTime?: number;
+    confirmBeforeClick?: boolean;
+    confirmMessage?: string;
+    href?: string;
+    target?: "_blank" | "_self";
+    as?: "button" | "a" | "div";
+    className?: string;
+    style?: React.CSSProperties;
+    testID?: string;
+}
+declare const Button: React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>>;
+
+interface CalendarEvent {
+    date: Date;
+    label?: string;
+    color?: string;
+}
+interface CalendarProps {
+    value?: Date | null;
+    defaultValue?: Date | null;
+    onChange?: (date: Date) => void;
+    events?: CalendarEvent[];
+    minDate?: Date;
+    maxDate?: Date;
+    className?: string;
+}
+declare function Calendar({ value: controlled, defaultValue, onChange, events, minDate, maxDate, className, }: CalendarProps): react_jsx_runtime.JSX.Element;
+
+declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardHeader: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;
+declare const CardContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+declare const CardFooter: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & React.RefAttributes<HTMLDivElement>>;
+
+interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    inline?: boolean;
+    label?: React.ReactNode;
+    accepted?: boolean;
+    acceptedColor?: string;
+    declined?: boolean;
+    declinedColor?: string;
+    height?: number | string;
+    width?: number | string;
+}
+declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;
+
+interface ColorPickerProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (color: string) => void;
+    showOpacity?: boolean;
+    showSwatches?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+declare function ColorPicker({ value: controlled, defaultValue, onChange, showOpacity, showSwatches, disabled, className, }: ColorPickerProps): react_jsx_runtime.JSX.Element;
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+    group?: string;
+}
+interface ComboboxProps {
+    options: ComboboxOption[];
+    value?: string | string[];
+    defaultValue?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    multiple?: boolean;
+    creatable?: boolean;
+    clearable?: boolean;
+    disabled?: boolean;
+    maxHeight?: string;
+    className?: string;
+}
+declare function Combobox({ options, value: controlled, defaultValue, onChange, placeholder, searchPlaceholder, multiple, creatable, clearable, disabled, maxHeight, className, }: ComboboxProps): react_jsx_runtime.JSX.Element;
+
+interface CommandItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    shortcut?: string;
+    group?: string;
+    onSelect: () => void;
+    keywords?: string[];
+}
+interface CommandPaletteProps {
+    items: CommandItem[];
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    placeholder?: string;
+    maxRecent?: number;
+    className?: string;
+}
+declare function CommandPalette({ items, open: controlled, onOpenChange, placeholder, maxRecent, className, }: CommandPaletteProps): react_jsx_runtime.JSX.Element;
+
+interface ContextMenuItem {
+    label?: React.ReactNode;
+    icon?: React.ReactNode;
+    shortcut?: string;
+    onClick?: () => void;
+    disabled?: boolean;
+    danger?: boolean;
+    separator?: boolean;
+    children?: ContextMenuItem[];
+}
+interface ContextMenuProps {
+    items: ContextMenuItem[];
+    children: React.ReactNode;
+    className?: string;
+}
+declare function ContextMenu({ items, children, className }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+
+type TrendDir = "up" | "down" | "neutral";
+type SemanticColor = "primary" | "info" | "success" | "warning" | "danger" | "muted";
+interface StatsWidgetProps {
+    title: string;
+    value: string | number;
+    subtitle?: string;
+    icon?: React.ReactNode;
+    iconColor?: SemanticColor;
+    trend?: TrendDir;
+    trendValue?: string;
+    trendLabel?: string;
+    delta?: string | number;
+    sparkline?: number[];
+    sparklineColor?: SemanticColor;
+    progress?: number;
+    progressColor?: SemanticColor;
+    badge?: React.ReactNode;
+    footer?: React.ReactNode;
+    animate?: boolean;
+    loading?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+declare function StatsWidget({ title, value, subtitle, icon, iconColor, trend, trendValue, trendLabel, delta, sparkline, sparklineColor, progress, progressColor, badge, footer, animate, loading, onClick, className, }: StatsWidgetProps): react_jsx_runtime.JSX.Element;
+interface ChartDataPoint {
+    label: string;
+    value: number;
+    color?: SemanticColor;
+}
+interface ChartWidgetProps {
+    title: string;
+    description?: string;
+    data: ChartDataPoint[];
+    type?: "bar" | "line" | "donut";
+    color?: SemanticColor;
+    height?: number;
+    showLegend?: boolean;
+    showValues?: boolean;
+    showGrid?: boolean;
+    unit?: string;
+    action?: React.ReactNode;
+    footer?: React.ReactNode;
+    loading?: boolean;
+    className?: string;
+}
+declare function ChartWidget({ title, description, data, type, color, height, showLegend, showValues, showGrid, unit, action, footer, loading, className, }: ChartWidgetProps): react_jsx_runtime.JSX.Element;
+interface TableWidgetProps {
+    title: string;
+    description?: string;
+    action?: React.ReactNode;
+    footer?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function TableWidget({ title, description, action, footer, children, className }: TableWidgetProps): react_jsx_runtime.JSX.Element;
+interface ComposableWidgetProps {
+    title?: string;
+    description?: string;
+    headerLeft?: React.ReactNode;
+    headerRight?: React.ReactNode;
+    toolbar?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    padding?: "none" | "sm" | "md";
+    className?: string;
+}
+declare function ComposableWidget({ title, description, headerLeft, headerRight, toolbar, children, footer, padding, className, }: ComposableWidgetProps): react_jsx_runtime.JSX.Element;
+
+interface DataGridColumn<T> {
+    key: keyof T | string;
+    header: React.ReactNode;
+    render?: (row: T, idx: number) => React.ReactNode;
+    sortable?: boolean;
+    filterable?: boolean;
+    width?: string;
+    align?: "left" | "center" | "right";
+}
+interface DataGridProps<T> {
+    columns: DataGridColumn<T>[];
+    data: T[];
+    rowKey: keyof T | ((row: T) => string);
+    selectable?: boolean;
+    selected?: string[];
+    onSelectChange?: (keys: string[]) => void;
+    pageSize?: number;
+    showPagination?: boolean;
+    showColumnToggle?: boolean;
+    loading?: boolean;
+    emptyMessage?: string;
+    className?: string;
+    onRowClick?: (row: T) => void;
+}
+declare function DataGrid<T extends Record<string, unknown>>({ columns, data, rowKey, selectable, selected: controlledSelected, onSelectChange, pageSize, showPagination, showColumnToggle, loading, emptyMessage, className, onRowClick, }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
+
+interface DatePickerProps {
+    mode: "date" | "dateTime" | "time";
+    value: string;
+    disabledDates?: string[];
+    disabledDateTimes?: string[];
+    onChange: (value: string) => void;
+    onClose: () => void;
+}
+declare function DatePickerPopup({ mode, value, disabledDates, disabledDateTimes, onChange, onClose, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+
+interface DateRange {
+    from: Date | null;
+    to: Date | null;
+}
+interface DateRangePickerProps {
+    value?: DateRange;
+    defaultValue?: DateRange;
+    onChange?: (range: DateRange) => void;
+    placeholder?: string;
+    disabled?: boolean;
+    minDate?: Date;
+    maxDate?: Date;
+    className?: string;
+}
+declare function DateRangePicker({ value: controlled, defaultValue, onChange, placeholder, disabled, minDate, maxDate, className, }: DateRangePickerProps): react_jsx_runtime.JSX.Element;
+
+type DrawerSide = "left" | "right" | "top" | "bottom";
+interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    side?: DrawerSide;
+    size?: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    footer?: React.ReactNode;
+    overlay?: boolean;
+    closeOnOverlay?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Drawer({ open, onClose, side, size, title, description, footer, overlay, closeOnOverlay, children, className, }: DrawerProps): react_jsx_runtime.JSX.Element;
+
+interface DropdownProps {
+    trigger: React.ReactNode;
+    children: React.ReactNode;
+    align?: "left" | "right" | "center";
+    placement?: "bottom" | "top";
+    width?: "sm" | "md" | "lg" | "auto";
+    disabled?: boolean;
+    closeOnSelect?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+declare function Dropdown({ trigger, children, align, placement, width, disabled, closeOnSelect, onOpenChange, className, }: DropdownProps): react_jsx_runtime.JSX.Element;
+
+type ImageEditorMode = "crop" | "rotate" | "flip" | "brightness" | "contrast";
+interface ImageEditorOptions {
+    /** Which tools to show in the editor. Defaults to all. */
+    modes?: ImageEditorMode[];
+    /** Lock crop to aspect ratio e.g. "1:1", "16:9", "4:3" */
+    cropAspectRatio?: string;
+    /** Initial brightness value 0–200, default 100 */
+    defaultBrightness?: number;
+    /** Initial contrast value 0–200, default 100 */
+    defaultContrast?: number;
+}
+interface FileTypeValidation {
+    /** Allowed file extensions e.g. [".jpg", ".png", ".pdf"] */
+    allowedFileTypes?: string[];
+    /** Blocked file extensions e.g. [".exe", ".bat"] */
+    rejectedFileTypes?: string[];
+    /** Allowed MIME types e.g. ["image/png", "application/pdf"] */
+    mimeTypes?: string[];
+}
+interface FileUploadProps extends React.HTMLAttributes<HTMLDivElement>, FileTypeValidation {
+    onFileSelect?: (file: File | null) => void;
+    onFilesChange?: (files: File[]) => void;
+    /** Called when any validation rule fails */
+    onValidationError?: (message: string, file: File) => void;
+    accept?: string;
+    multiple?: boolean;
+    maxSize?: number;
+    maxFiles?: number;
+    disabled?: boolean;
+    reorderable?: boolean;
+    imagePreviewHeight?: number;
+    panelAspectRatio?: string;
+    label?: string;
+    helperText?: string;
+    hint?: string;
+    /** Enable inline image editor after selecting an image */
+    imageEditor?: boolean;
+    /** Image editor configuration */
+    imageEditorOptions?: ImageEditorOptions;
+    className?: string;
+}
+declare function FileUpload({ className, onFileSelect, onFilesChange, onValidationError, accept, multiple, maxSize, maxFiles, disabled, reorderable, imagePreviewHeight, panelAspectRatio, label, helperText, hint, imageEditor, imageEditorOptions, allowedFileTypes, rejectedFileTypes, mimeTypes, ...props }: FileUploadProps): react_jsx_runtime.JSX.Element;
+
+type FlexDirection = "row" | "row-reverse" | "col" | "col-reverse";
+type FlexWrap = "nowrap" | "wrap" | "wrap-reverse";
+type FlexAlign = "start" | "center" | "end" | "stretch" | "baseline";
+type FlexJustify = "start" | "center" | "end" | "between" | "around" | "evenly";
+type FlexGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+interface FlexLayoutProps {
+    direction?: FlexDirection;
+    wrap?: FlexWrap;
+    gap?: FlexGap;
+    align?: FlexAlign;
+    justify?: FlexJustify;
+    inline?: boolean;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function FlexLayout({ direction, wrap, gap, align, justify, inline, children, className, }: FlexLayoutProps): react_jsx_runtime.JSX.Element;
+
+type GridCols = 1 | 2 | 3 | 4 | 5 | 6 | 12;
+type GridGap = "none" | "xs" | "sm" | "md" | "lg" | "xl";
+type GridAlign = "start" | "center" | "end" | "stretch";
+interface GridLayoutProps {
+    cols?: GridCols;
+    smCols?: GridCols;
+    mdCols?: GridCols;
+    lgCols?: GridCols;
+    gap?: GridGap;
+    rowGap?: GridGap;
+    colGap?: GridGap;
+    align?: GridAlign;
+    justify?: GridAlign;
+    children: React.ReactNode;
+    className?: string;
+}
+declare function GridLayout({ cols, smCols, mdCols, lgCols, gap, rowGap, colGap, align, justify, children, className, }: GridLayoutProps): react_jsx_runtime.JSX.Element;
+
+interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "prefix" | "inputMode"> {
+    inputType?: "email" | "numeric" | "integer" | "password" | "tel" | "url" | "color" | "date" | "dateTime" | "time";
+    inputMode?: "decimal" | "text" | "numeric" | "tel" | "url" | "email" | "search" | "none";
+    datalist?: string[];
+    autocapitalize?: "none" | "sentences" | "words" | "characters" | boolean;
+    prefix?: React.ReactNode;
+    suffix?: React.ReactNode;
+    regexValidation?: {
+        pattern: RegExp;
+        message?: string;
+    };
+    prefixIcon?: React.ReactNode;
+    prefixIconColor?: "success" | "error" | "warning" | "info" | (string & {});
+    suffixIcon?: React.ReactNode;
+    suffixIconColor?: "success" | "error" | "warning" | "info" | (string & {});
+    revealable?: boolean;
+    label?: string;
+    mask?: string;
+    stripCharacters?: string;
+    readOnly?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    length?: number;
+    step?: number;
+    placeholder?: string;
+    disabledDates?: string[];
+    disabledDateTimes?: string[];
+}
+declare const Input: React.ForwardRefExoticComponent<InputProps & React.RefAttributes<HTMLInputElement>>;
+
+interface KanbanCard {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    tags?: string[];
+    assignee?: React.ReactNode;
+    priority?: "low" | "medium" | "high";
+}
+interface KanbanColumn {
+    id: string;
+    title: React.ReactNode;
+    color?: string;
+    cards: KanbanCard[];
+}
+interface KanbanBoardProps {
+    columns: KanbanColumn[];
+    onChange?: (columns: KanbanColumn[]) => void;
+    onAddCard?: (columnId: string) => void;
+    className?: string;
+}
+declare function KanbanBoard({ columns: controlled, onChange, onAddCard, className }: KanbanBoardProps): react_jsx_runtime.JSX.Element;
+
+declare const Label: React.ForwardRefExoticComponent<React.LabelHTMLAttributes<HTMLLabelElement> & React.RefAttributes<HTMLLabelElement>>;
+
+interface ModalProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    isOpen: boolean;
+    onClose?: () => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    children: React.ReactNode;
+    footer?: React.ReactNode;
+    unchange?: boolean;
+    className?: string;
+}
+declare function Modal({ isOpen, onClose, title, description, children, footer, unchange, className, ...props }: ModalProps): react_jsx_runtime.JSX.Element;
+
+interface ModalUnchangeProps {
+    isOpen: boolean;
+    /** Title shown in the header */
+    title?: React.ReactNode;
+    /** Subtitle / description */
+    description?: React.ReactNode;
+    /** Icon shown next to the title */
+    icon?: React.ReactNode;
+    /** Footer action buttons */
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}
+/**
+ * A modal that cannot be dismissed by clicking the backdrop or pressing Escape.
+ * Use for critical flows (e.g. accept terms, mandatory onboarding).
+ */
+declare function ModalUnchange({ isOpen, title, description, icon, footer, children, className, }: ModalUnchangeProps): react_jsx_runtime.JSX.Element;
+type ConfirmVariant = "danger" | "warning" | "success" | "info";
+interface ModalConfirmationProps {
+    isOpen: boolean;
+    onClose: () => void;
+    onConfirm: () => void;
+    /** Visual variant — affects icon and confirm button color */
+    variant?: ConfirmVariant;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    /** Label for the confirm button */
+    confirmLabel?: string;
+    /** Label for the cancel button */
+    cancelLabel?: string;
+    /** Show a loading spinner on the confirm button */
+    loading?: boolean;
+    className?: string;
+}
+/**
+ * A two-button confirmation modal with danger / warning / success / info variants.
+ */
+declare function ModalConfirmation({ isOpen, onClose, onConfirm, variant, title, description, confirmLabel, cancelLabel, loading, className, }: ModalConfirmationProps): react_jsx_runtime.JSX.Element;
+interface FormField {
+    /** Unique key */
+    name: string;
+    label: string;
+    type: "text" | "email" | "password" | "textarea" | "select";
+    placeholder?: string;
+    required?: boolean;
+    /** Options for type="select" */
+    options?: {
+        label: string;
+        value: string;
+    }[];
+}
+interface ModalWithFormsProps {
+    isOpen: boolean;
+    onClose: () => void;
+    /** Called with the form values on submit */
+    onSubmit: (values: Record<string, string>) => void;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    fields: FormField[];
+    /** Label for the submit button */
+    submitLabel?: string;
+    /** Label for the cancel button */
+    cancelLabel?: string;
+    /** Show loading state on submit button */
+    loading?: boolean;
+    className?: string;
+}
+/**
+ * A modal that renders a dynamic form from a `fields` array.
+ */
+declare function ModalWithForms({ isOpen, onClose, onSubmit, title, description, fields, submitLabel, cancelLabel, loading, className, }: ModalWithFormsProps): react_jsx_runtime.JSX.Element;
+
+interface LeftSidebarProps {
+    /** Width of the sidebar, default "w-64" */
+    width?: string;
+    /** Header slot (logo, brand) */
+    header?: React.ReactNode;
+    /** Footer slot (user profile, logout) */
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    /** Collapsed state — icon-only mode */
+    collapsed?: boolean;
+}
+declare function LeftSidebar({ width, header, footer, children, className, collapsed, }: LeftSidebarProps): react_jsx_runtime.JSX.Element;
+interface RightSidebarProps {
+    /** Width of the sidebar, default "w-72" */
+    width?: string;
+    /** Header slot */
+    header?: React.ReactNode;
+    /** Footer slot */
+    footer?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+    /** Stick the sidebar to the viewport — position: sticky, top-0, self-start */
+    sticky?: boolean;
+    /** Max height when sticky, default "100vh" */
+    stickyMaxHeight?: string;
+}
+declare function RightSidebar({ width, header, footer, children, className, sticky, stickyMaxHeight, }: RightSidebarProps): react_jsx_runtime.JSX.Element;
+interface TopbarProps {
+    /** Left slot — logo, hamburger, breadcrumb */
+    left?: React.ReactNode;
+    /** Center slot — search, title */
+    center?: React.ReactNode;
+    /** Right slot — actions, avatar, notifications */
+    right?: React.ReactNode;
+    /** Height class, default "h-16" */
+    height?: string;
+    /** Sticky to top */
+    sticky?: boolean;
+    className?: string;
+}
+declare function Topbar({ left, center, right, height, sticky, className, }: TopbarProps): react_jsx_runtime.JSX.Element;
+interface NavItem {
+    label: string;
+    value: string;
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    disabled?: boolean;
+    href?: string;
+}
+interface NavigationProps {
+    items: NavItem[];
+    /** "vertical" | "horizontal", default "vertical" */
+    orientation?: "vertical" | "horizontal";
+    /** Active item value */
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    /** Collapsed — show icons only (vertical) */
+    collapsed?: boolean;
+}
+declare function Navigation({ items, orientation, value, onChange, className, collapsed, }: NavigationProps): react_jsx_runtime.JSX.Element;
+interface NavGroup {
+    label: string;
+    items: NavItem[];
+    /** Collapsible group */
+    collapsible?: boolean;
+    /** Default open state for collapsible groups */
+    defaultOpen?: boolean;
+}
+interface GroupNavigationProps {
+    groups: NavGroup[];
+    value?: string;
+    onChange?: (value: string) => void;
+    className?: string;
+    collapsed?: boolean;
+}
+declare function GroupNavigation({ groups, value, onChange, className, collapsed, }: GroupNavigationProps): react_jsx_runtime.JSX.Element;
+
+type ToastVariant = "default" | "success" | "error" | "warning" | "info";
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+interface ToastItem {
+    id: string;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: ToastVariant;
+    /** Duration in ms before auto-dismiss. 0 = no auto-dismiss */
+    duration?: number;
+    /** Show a progress bar counting down the duration */
+    showProgress?: boolean;
+    /** Custom icon — overrides the variant icon */
+    icon?: React.ReactNode;
+    /** Action button */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    /** Whether the toast can be manually closed */
+    closable?: boolean;
+    /** Override the provider's default position for this toast */
+    position?: ToastPosition;
+}
+interface ToastContextValue {
+    toast: (item: Omit<ToastItem, "id">) => string;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+}
+declare function useToast(): ToastContextValue;
+interface ToastProviderProps {
+    children: React.ReactNode;
+    /** Default position for all toasts */
+    position?: ToastPosition;
+    /** Max toasts visible at once */
+    maxToasts?: number;
+}
+declare function ToastProvider({ children, position, maxToasts, }: ToastProviderProps): react_jsx_runtime.JSX.Element;
+type NotificationVariant = "default" | "success" | "error" | "warning" | "info";
+interface NotificationItem {
+    id: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    variant?: NotificationVariant;
+    /** Timestamp label e.g. "2m ago" */
+    time?: string;
+    /** Avatar or icon node shown on the left */
+    avatar?: React.ReactNode;
+    /** Whether the notification has been read */
+    read?: boolean;
+    /** Click handler for the whole row */
+    onClick?: () => void;
+    /** Action buttons */
+    actions?: {
+        label: string;
+        onClick: () => void;
+        variant?: "primary" | "ghost";
+    }[];
+}
+interface NotificationPanelProps {
+    items: NotificationItem[];
+    /** Header title */
+    title?: string;
+    /** Show a badge with unread count on the bell icon trigger */
+    showBadge?: boolean;
+    /** Called when "Mark all read" is clicked */
+    onMarkAllRead?: () => void;
+    /** Called when "Clear all" is clicked */
+    onClearAll?: () => void;
+    /** Called when a single item is dismissed */
+    onDismiss?: (id: string) => void;
+    /** Empty state message */
+    emptyMessage?: string;
+    className?: string;
+    /** Max height of the list */
+    maxHeight?: string;
+}
+declare function NotificationPanel({ items, title, showBadge, onMarkAllRead, onClearAll, onDismiss, emptyMessage, className, maxHeight, }: NotificationPanelProps): react_jsx_runtime.JSX.Element;
+interface NotificationBannerProps {
+    variant?: NotificationVariant;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    closable?: boolean;
+    onClose?: () => void;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    className?: string;
+}
+declare function NotificationBanner({ variant, title, description, icon, closable, onClose, action, className, }: NotificationBannerProps): react_jsx_runtime.JSX.Element;
+
+interface OtpInputProps {
+    length?: number;
+    value?: string;
+    onChange?: (value: string) => void;
+    onComplete?: (value: string) => void;
+    mask?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    className?: string;
+}
+declare function OtpInput({ length, value: controlled, onChange, onComplete, mask, disabled, invalid, className, }: OtpInputProps): react_jsx_runtime.JSX.Element;
+
+interface PaginationProps {
+    page: number;
+    total: number;
+    pageSize?: number;
+    siblingCount?: number;
+    showFirstLast?: boolean;
+    showPageSize?: boolean;
+    pageSizeOptions?: number[];
+    onPageChange: (page: number) => void;
+    onPageSizeChange?: (size: number) => void;
+    className?: string;
+}
+declare function Pagination({ page, total, pageSize, siblingCount, showFirstLast, showPageSize, pageSizeOptions, onPageChange, onPageSizeChange, className, }: PaginationProps): react_jsx_runtime.JSX.Element;
+
+type PopoverPlacement = "top" | "bottom" | "left" | "right" | "top-start" | "top-end" | "bottom-start" | "bottom-end";
+interface PopoverProps {
+    trigger: React.ReactNode;
+    content: React.ReactNode;
+    placement?: PopoverPlacement;
+    triggerOn?: "click" | "hover";
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+declare function Popover({ trigger, content, placement, triggerOn, open: controlled, onOpenChange, className, }: PopoverProps): react_jsx_runtime.JSX.Element;
+
+type ProgressVariant = "default" | "success" | "error" | "warning" | "info";
+type ProgressSize = "xs" | "sm" | "md" | "lg";
+interface ProgressProps {
+    value?: number;
+    max?: number;
+    variant?: ProgressVariant;
+    size?: ProgressSize;
+    label?: React.ReactNode;
+    showValue?: boolean;
+    animated?: boolean;
+    striped?: boolean;
+    indeterminate?: boolean;
+    className?: string;
+}
+interface CircularProgressProps {
+    value?: number;
+    max?: number;
+    variant?: ProgressVariant;
+    size?: number;
+    strokeWidth?: number;
+    label?: React.ReactNode;
+    showValue?: boolean;
+    indeterminate?: boolean;
+    className?: string;
+}
+declare function Progress({ value, max, variant, size, label, showValue, animated, striped, indeterminate, className, }: ProgressProps): react_jsx_runtime.JSX.Element;
+declare function CircularProgress({ value, max, variant, size, strokeWidth, label, showValue, indeterminate, className, }: CircularProgressProps): react_jsx_runtime.JSX.Element;
+
+type RadioVariant = "default" | "card" | "button";
+type RadioSize = "sm" | "md" | "lg";
+interface RadioOption {
+    value: string;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    disabled?: boolean;
+}
+interface RadioGroupProps {
+    options: RadioOption[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    variant?: RadioVariant;
+    size?: RadioSize;
+    orientation?: "horizontal" | "vertical";
+    name?: string;
+    className?: string;
+}
+declare function RadioGroup({ options, value: controlledValue, defaultValue, onChange, variant, size, orientation, name, className, }: RadioGroupProps): react_jsx_runtime.JSX.Element;
+
+interface RepeaterProps<T> {
+    items: T[];
+    onAdd: () => void;
+    onRemove: (index: number) => void;
+    renderItem: (item: T, index: number) => React.ReactNode;
+    addButtonText?: string;
+    className?: string;
+}
+declare function Repeater<T>({ items, onAdd, onRemove, renderItem, addButtonText, className, }: RepeaterProps<T>): react_jsx_runtime.JSX.Element;
+
+interface PanelProps {
+    sidebar?: React.ReactNode;
+    sidebarHeader?: React.ReactNode;
+    sidebarFooter?: React.ReactNode;
+    sidebarWidth?: string;
+    topbar?: React.ReactNode;
+    topbarTrailing?: React.ReactNode;
+    defaultCollapsed?: boolean;
+    collapsible?: boolean;
+    height?: string;
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Panel({ sidebar, sidebarHeader, sidebarFooter, sidebarWidth, topbar, topbarTrailing, defaultCollapsed, collapsible, height, children, className, }: PanelProps): react_jsx_runtime.JSX.Element;
+declare function PanelSidebarItem({ icon: Icon, label, active, onClick, }: {
+    icon?: React.ElementType;
+    label: string;
+    active?: boolean;
+    onClick?: () => void;
+}): react_jsx_runtime.JSX.Element;
+declare function PanelSidebarGroup({ title, children, }: {
+    title?: string;
+    children: React.ReactNode;
+}): react_jsx_runtime.JSX.Element;
+
+interface ResizablePanelsProps {
+    children: [React.ReactNode, React.ReactNode];
+    orientation?: "horizontal" | "vertical";
+    defaultSize?: number;
+    minSize?: number;
+    maxSize?: number;
+    handleClassName?: string;
+    className?: string;
+}
+declare function ResizablePanels({ children, orientation, defaultSize, minSize, maxSize, handleClassName, className, }: ResizablePanelsProps): react_jsx_runtime.JSX.Element;
+
+interface RichTextEditorProps {
+    value?: string;
+    defaultValue?: string;
+    onChange?: (html: string) => void;
+    placeholder?: string;
+    minHeight?: string;
+    disabled?: boolean;
+    className?: string;
+}
+declare function RichTextEditor({ value: controlled, defaultValue, onChange, placeholder, minHeight, disabled, className, }: RichTextEditorProps): react_jsx_runtime.JSX.Element;
+
+interface ScrollAreaProps extends React.HTMLAttributes<HTMLDivElement> {
+    maxHeight?: string;
+    maxWidth?: string;
+    orientation?: "vertical" | "horizontal" | "both";
+}
+declare function ScrollArea({ maxHeight, maxWidth, orientation, className, children, style, ...props }: ScrollAreaProps): react_jsx_runtime.JSX.Element;
+
+type SectionVariant = "default" | "card" | "bordered" | "ghost";
+interface SectionProps {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    action?: React.ReactNode;
+    children: React.ReactNode;
+    variant?: SectionVariant;
+    collapsible?: boolean;
+    defaultOpen?: boolean;
+    divider?: boolean;
+    className?: string;
+    contentClassName?: string;
+}
+declare function SectionBlock({ title, description, icon, action, children, variant, collapsible, defaultOpen, divider, className, contentClassName, }: SectionProps): react_jsx_runtime.JSX.Element;
+
+type SelectOption = Record<string | number, string>;
+interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
+    options: SelectOption[];
+    value?: string | string[];
+    onChange?: (value: string | string[]) => void;
+    placeholder?: string;
+    searchable?: boolean;
+    native?: boolean;
+    label?: string;
+    loadingMessage?: string;
+    noSearchResultsMessage?: string;
+    searchingMessage?: string;
+    multiple?: boolean;
+    reorderable?: boolean;
+    disabled?: boolean;
+    createOptionForm?: React.ReactNode;
+    suffixIcon?: React.ReactNode;
+    suffixIconColor?: "success" | "error" | "warning" | "info" | (string & {});
+}
+declare function Select({ options, value, onChange, placeholder, searchable, native, label, loadingMessage, noSearchResultsMessage, searchingMessage, multiple, reorderable, disabled, createOptionForm, suffixIcon, suffixIconColor, className, ...props }: SelectProps): react_jsx_runtime.JSX.Element;
+
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+interface SliderProps {
+    value?: number;
+    defaultValue?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    onChange?: (value: number) => void;
+    disabled?: boolean;
+    showTooltip?: boolean;
+    showMarks?: boolean;
+    marks?: {
+        value: number;
+        label?: string;
+    }[];
+    label?: React.ReactNode;
+    showValue?: boolean;
+    className?: string;
+}
+interface RangeSliderProps {
+    value?: [number, number];
+    defaultValue?: [number, number];
+    min?: number;
+    max?: number;
+    step?: number;
+    onChange?: (value: [number, number]) => void;
+    disabled?: boolean;
+    showTooltip?: boolean;
+    label?: React.ReactNode;
+    showValue?: boolean;
+    className?: string;
+}
+declare function Slider({ value: controlled, defaultValue, min, max, step, onChange, disabled, showTooltip, showMarks, marks, label, showValue, className, }: SliderProps): react_jsx_runtime.JSX.Element;
+declare function RangeSlider({ value: controlled, defaultValue, min, max, step, onChange, disabled, showTooltip, label, showValue, className, }: RangeSliderProps): react_jsx_runtime.JSX.Element;
+
+type StatTrend = "up" | "down" | "neutral";
+interface StatCardProps {
+    title: React.ReactNode;
+    value: React.ReactNode;
+    change?: number;
+    changeLabel?: string;
+    trend?: StatTrend;
+    icon?: React.ReactNode;
+    sparkline?: number[];
+    description?: string;
+    loading?: boolean;
+    className?: string;
+}
+declare function StatCard({ title, value, change, changeLabel, trend, icon, sparkline, description, loading, className, }: StatCardProps): react_jsx_runtime.JSX.Element;
+
+interface Step {
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    icon?: React.ReactNode;
+    content?: React.ReactNode;
+    optional?: boolean;
+}
+interface StepperProps {
+    steps: Step[];
+    current?: number;
+    defaultCurrent?: number;
+    onChange?: (step: number) => void;
+    orientation?: "horizontal" | "vertical";
+    clickable?: boolean;
+    className?: string;
+}
+declare function Stepper({ steps, current: controlled, defaultCurrent, onChange, orientation, clickable, className, }: StepperProps): react_jsx_runtime.JSX.Element;
+
+interface Column<T> {
+    key: keyof T | string;
+    title: string;
+    type?: "text" | "image" | "badge" | "icon" | "stack" | "select" | "toggle" | "color" | "checkbox";
+    stackProps?: {
+        limit?: number;
+        stacked?: boolean;
+        shape?: "circle" | "square";
+        size?: number;
+    };
+    /** Options for type="select" */
+    selectOptions?: string[];
+    render?: (item: T) => React.ReactNode;
+    sortable?: boolean;
+    /** Called when a cell value changes (select, toggle, color, checkbox) */
+    onChange?: (item: T, value: any) => void;
+}
+interface TableProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    searchable?: boolean;
+    searchPlaceholder?: string;
+    pagination?: boolean;
+    itemsPerPage?: number;
+    selectable?: boolean;
+    onBulkDelete?: (selectedIds: string[]) => void;
+    idKey?: keyof T;
+    className?: string;
+}
+declare function Table<T extends Record<string, any>>({ data, columns, searchable, searchPlaceholder, pagination, itemsPerPage, selectable, onBulkDelete, idKey, className, }: TableProps<T>): react_jsx_runtime.JSX.Element;
+
+type TabVariant = "line" | "pill" | "boxed" | "lifted";
+type TabSize = "sm" | "md" | "lg";
+interface TabItem {
+    value: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    badge?: React.ReactNode;
+    disabled?: boolean;
+    content?: React.ReactNode;
+}
+interface TabsProps {
+    items: TabItem[];
+    value?: string;
+    defaultValue?: string;
+    onChange?: (value: string) => void;
+    variant?: TabVariant;
+    size?: TabSize;
+    fullWidth?: boolean;
+    className?: string;
+}
+declare function Tabs({ items, value: controlledValue, defaultValue, onChange, variant, size, fullWidth, className, }: TabsProps): react_jsx_runtime.JSX.Element;
+
+interface TagInputProps {
+    value?: string[];
+    defaultValue?: string[];
+    onChange?: (tags: string[]) => void;
+    placeholder?: string;
+    maxTags?: number;
+    allowDuplicates?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+declare function TagInput({ value: controlled, defaultValue, onChange, placeholder, maxTags, allowDuplicates, disabled, className, }: TagInputProps): react_jsx_runtime.JSX.Element;
+
+interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, "rows" | "cols" | "readOnly" | "minLength" | "maxLength"> {
+    rows?: number;
+    cols?: number;
+    autosize?: boolean;
+    readOnly?: boolean;
+    disableGrammarly?: boolean;
+    trim?: boolean;
+    minLength?: number;
+    maxLength?: number;
+    length?: number;
+}
+declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+
+type TimelineVariant = "default" | "success" | "error" | "warning" | "info";
+interface TimelineItem {
+    id?: string;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    time?: React.ReactNode;
+    icon?: React.ReactNode;
+    variant?: TimelineVariant;
+    content?: React.ReactNode;
+}
+interface TimelineProps {
+    items: TimelineItem[];
+    align?: "left" | "alternate";
+    className?: string;
+}
+declare function Timeline({ items, align, className }: TimelineProps): react_jsx_runtime.JSX.Element;
+
+interface ToggleSwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type"> {
+    inline?: boolean;
+    label?: React.ReactNode;
+    accepted?: boolean;
+    acceptedColor?: string;
+    declined?: boolean;
+    declinedColor?: string;
+    width?: number | string;
+    height?: number | string;
+}
+declare const ToggleSwitch: React.ForwardRefExoticComponent<ToggleSwitchProps & React.RefAttributes<HTMLInputElement>>;
+
+interface TooltipProps {
+    content: React.ReactNode;
+    children: React.ReactNode;
+    /** Side to show the tooltip, default "right" */
+    side?: "right" | "left" | "top" | "bottom";
+    className?: string;
+    /** Only render the tooltip when enabled */
+    enabled?: boolean;
+}
+declare function Tooltip({ content, children, side, className, enabled, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+interface TreeNode {
+    id: string;
+    label: React.ReactNode;
+    icon?: React.ReactNode;
+    children?: TreeNode[];
+    disabled?: boolean;
+}
+interface TreeViewProps {
+    nodes: TreeNode[];
+    selected?: string | string[];
+    defaultSelected?: string | string[];
+    onSelect?: (id: string | string[]) => void;
+    defaultExpanded?: string[];
+    multiple?: boolean;
+    className?: string;
+}
+declare function TreeView({ nodes, selected: controlled, defaultSelected, onSelect, defaultExpanded, multiple, className, }: TreeViewProps): react_jsx_runtime.JSX.Element;
+
+interface WidgetProps extends React.HTMLAttributes<HTMLDivElement> {
+    title: string;
+    value: string | number;
+    previousValue?: string | number;
+    description?: string;
+    badge?: React.ReactNode;
+    footer?: React.ReactNode;
+    trendLabel?: string;
+    icon?: React.ReactNode;
+    iconColor?: "primary" | "info" | "success" | "warning" | "danger" | "muted";
+    trend?: "up" | "down" | "neutral";
+    trendValue?: string;
+    progress?: number;
+    progressColor?: "primary" | "info" | "success" | "warning" | "danger";
+    variant?: "default" | "glass" | "filled" | "outline";
+    size?: "sm" | "md" | "lg";
+    loading?: boolean;
+    animate?: boolean;
+    pulse?: boolean;
+    onClick?: () => void;
+}
+declare function Widget({ title, value, previousValue, description, badge, footer, trendLabel, icon, iconColor, trend, trendValue, progress, progressColor, variant, size, loading, animate, pulse, onClick, className, ...props }: WidgetProps): react_jsx_runtime.JSX.Element;
+
+export { Accordion, AvatarStack, Badge, Breadcrumb, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, ChartWidget, Checkbox, CircularProgress, ColorPicker, Combobox, CommandPalette, ComposableWidget, ContextMenu, DataGrid, DatePickerPopup, DateRangePicker, Drawer, Dropdown, FileUpload, FlexLayout, GridLayout, GroupNavigation, Input, KanbanBoard, Label, LeftSidebar, Modal, ModalConfirmation, ModalUnchange, ModalWithForms, Navigation, NotificationBanner, NotificationPanel, OtpInput, Pagination, Panel, PanelSidebarGroup, PanelSidebarItem, Popover, Progress, RadioGroup, RangeSlider, Repeater, ResizablePanels, RichTextEditor, RightSidebar, ScrollArea, SectionBlock, Select, Skeleton, Slider, StatCard, StatsWidget, Stepper, Table, TableWidget, Tabs, TagInput, Textarea, Timeline, ToastProvider, ToggleSwitch, Tooltip, Topbar, TreeView, Widget, useToast };