@scalably/ui 0.1.0

package/dist/index.d.ts

@@ -0,0 +1,1667 @@
+import * as react from 'react';
+import { ReactNode } from 'react';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { ClassValue } from 'clsx';
+import * as date_fns from 'date-fns';
+export { addMonths, endOfMonth, isSameDay, startOfMonth } from 'date-fns';
+
+interface BackToTopProps {
+    /** Offset in px before button appears */
+    showAfter?: number;
+    /** Positioning class overrides */
+    className?: string;
+    /** Container class (wrapper) */
+    containerClassName?: string;
+    /** Accessible label */
+    ariaLabel?: string;
+    /** Custom icon to display */
+    icon?: React.ReactNode;
+    /** Custom render function for the icon */
+    renderIcon?: (visible: boolean) => React.ReactNode;
+    /** Custom render function for the entire button */
+    renderButton?: (props: {
+        onClick: () => void;
+        visible: boolean;
+        className: string;
+        ariaLabel: string;
+    }) => React.ReactNode;
+    /** Scroll behavior: 'smooth' (default) or 'auto' */
+    scrollBehavior?: ScrollBehavior;
+    /** Full scroll options for advanced control */
+    scrollOptions?: ScrollToOptions;
+    /** Custom click handler (overrides default scroll behavior) */
+    onClick?: () => void;
+}
+/**
+ * BackToTop - A floating action button that appears after scrolling and scrolls to the top.
+ *
+ * Features:
+ * - Auto-hide/show based on scroll position
+ * - Smooth scroll animation
+ * - Fully customizable icon and button rendering
+ * - Keyboard and screen-reader accessible
+ * - Responsive sizing
+ *
+ * Customization:
+ * - `icon`: Replace the default icon
+ * - `renderIcon`: Full control over icon rendering
+ * - `renderButton`: Complete button customization
+ * - `scrollBehavior`/`scrollOptions`: Control scroll behavior
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <BackToTop showAfter={300} />
+ *
+ * // Custom icon
+ * <BackToTop icon={<ChevronUpIcon />} />
+ *
+ * // Custom icon render
+ * <BackToTop
+ *   renderIcon={(visible) => (
+ *     <div className={visible ? "animate-bounce" : ""}>
+ *       <ArrowUpIcon />
+ *     </div>
+ *   )}
+ * />
+ *
+ * // Fully custom button
+ * <BackToTop
+ *   renderButton={({ onClick, visible, ariaLabel }) => (
+ *     <button
+ *       onClick={onClick}
+ *       aria-label={ariaLabel}
+ *       className={`custom-back-to-top ${visible ? 'show' : 'hide'}`}
+ *     >
+ *       ↑ Top
+ *     </button>
+ *   )}
+ * />
+ *
+ * // Custom scroll behavior
+ * <BackToTop
+ *   scrollBehavior="auto"
+ *   onClick={() => window.scrollTo({ top: 0, behavior: 'instant' })}
+ * />
+ * ```
+ */
+declare const BackToTop: react.ForwardRefExoticComponent<BackToTopProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Accessible status badge with semantic color variants.
+ *
+ * Aligns with design system color semantics:
+ * - `success`: Active/Complete/Done/Confirmed/Verified
+ * - `warning`: In progress/Waiting for confirmation
+ * - `error`: Needs attention/Important/Alert/Danger
+ * - `inactive`: Closed/Passed/Not active/Too late
+ * - `info`: Informational status
+ *
+ * @example
+ * ```tsx
+ * <StatusBadge status="success">Active</StatusBadge>
+ * <StatusBadge status="warning" variant="outline">Pending</StatusBadge>
+ * <StatusBadge status="inactive">Closed</StatusBadge>
+ * <StatusBadge status="error" icon={<AlertIcon />}>Urgent</StatusBadge>
+ * ```
+ */
+declare const statusBadgeVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+    status?: "error" | "success" | "warning" | "info" | "inactive" | null | undefined;
+    variant?: "solid" | "soft" | "outline" | null | undefined;
+    fullWidth?: boolean | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type StatusBadgeStatus = NonNullable<VariantProps<typeof statusBadgeVariants>["status"]>;
+type StatusBadgeVariant = NonNullable<VariantProps<typeof statusBadgeVariants>["variant"]>;
+type StatusBadgeSize = NonNullable<VariantProps<typeof statusBadgeVariants>["size"]>;
+interface StatusBadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "children">, VariantProps<typeof statusBadgeVariants> {
+    /**
+     * Badge size using design system typography.
+     * - `sm`: 12px medium (label-12-medium) - default
+     * - `md`: 14px medium (body-14-medium)
+     * - `lg`: 16px medium (body-16-medium)
+     * @default "sm"
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Optional leading icon.
+     */
+    icon?: ReactNode;
+    /**
+     * Badge content (text or elements).
+     */
+    children?: ReactNode;
+    /**
+     * Accessible label for icon-only badges.
+     * Falls back to the status label if no children provided.
+     */
+    "aria-label"?: string;
+}
+declare const StatusBadge: react.ForwardRefExoticComponent<StatusBadgeProps & react.RefAttributes<HTMLSpanElement>>;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "text" | "outline" | "destructive" | "secondary" | null | undefined;
+    size?: "icon" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type ButtonVariant = VariantProps<typeof buttonVariants>["variant"];
+type ButtonSize = VariantProps<typeof buttonVariants>["size"];
+type ButtonBaseProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "size">;
+interface ButtonProps extends ButtonBaseProps, VariantProps<typeof buttonVariants> {
+    loading?: boolean;
+    disabled?: boolean;
+    leftIcon?: React.ReactNode;
+    rightIcon?: React.ReactNode;
+}
+/**
+ * Button - A versatile button component with multiple variants, sizes, and states.
+ *
+ * Features:
+ * - Multiple variants: default, destructive, outline, secondary, text, link
+ * - Responsive sizes: md, lg, icon (mobile-first, scales up on larger screens)
+ * - Loading state with built-in spinner
+ * - Left and right icon slots
+ * - Full keyboard navigation and accessibility
+ * - Smooth transitions and interactive states
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Button onClick={handleClick}>
+ *   Click me
+ * </Button>
+ *
+ * // With variant and size
+ * <Button variant="outline" size="lg">
+ *   Large Outline Button
+ * </Button>
+ *
+ * // Loading state
+ * <Button loading disabled>
+ *   Saving...
+ * </Button>
+ *
+ * // With icons
+ * <Button leftIcon={<SaveIcon />} rightIcon={<ArrowIcon />}>
+ *   Save and Continue
+ * </Button>
+ *
+ * // Icon-only button
+ * <Button variant="text" size="icon" aria-label="Close">
+ *   <CloseIcon />
+ * </Button>
+ * ```
+ */
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+type MultipleSelectionButtonBaseProps = Omit<React.HTMLAttributes<HTMLDivElement>, "selectedCount" | "actions" | "defaultActive" | "active" | "onActiveChange" | "iconButtonAriaLabel">;
+interface MultipleSelectionButtonProps extends MultipleSelectionButtonBaseProps {
+    selectedCount?: number;
+    actions?: React.ReactNode | React.ReactNode[];
+    defaultActive?: boolean;
+    active?: boolean;
+    onActiveChange?: (active: boolean) => void;
+    iconButtonAriaLabel?: string;
+    selectedLabel?: React.ReactNode | ((count: number) => React.ReactNode);
+    /** Custom toggle icon (when inactive) */
+    toggleIcon?: React.ReactNode;
+    /** Custom close icon (when active) */
+    closeIcon?: React.ReactNode;
+    /** Custom render function for count badge */
+    renderCount?: (count: number) => React.ReactNode;
+    /** Maximum count to display before showing "99+" */
+    maxDisplayCount?: number;
+    /** Custom render function for the entire component when inactive */
+    renderInactive?: (props: {
+        onClick: () => void;
+        ariaLabel: string;
+    }) => React.ReactNode;
+    /** Custom render function for the entire component when active */
+    renderActive?: (props: {
+        onClose: () => void;
+        selectedCount: number;
+        selectedLabel: React.ReactNode;
+        actions?: React.ReactNode | React.ReactNode[];
+    }) => React.ReactNode;
+}
+/**
+ * MultipleSelectionButton - A compact controller for multi-select mode with action toolbar.
+ *
+ * Features:
+ * - Toggle between inactive (icon button) and active (toolbar) states
+ * - Selection counter with customizable max display
+ * - Action slots for bulk operations
+ * - Controlled and uncontrolled modes
+ * - Fully customizable icons and rendering
+ *
+ * Customization:
+ * - `toggleIcon`/`closeIcon`: Replace default icons
+ * - `renderCount`: Custom count badge rendering
+ * - `renderInactive`/`renderActive`: Complete state customization
+ * - `maxDisplayCount`: Control when to show "99+"
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <MultipleSelectionButton
+ *   active={isSelecting}
+ *   onActiveChange={setIsSelecting}
+ *   selectedCount={selected.length}
+ *   actions={[
+ *     <Button onClick={handleDelete}>Delete</Button>,
+ *     <Button onClick={handleExport}>Export</Button>
+ *   ]}
+ * />
+ *
+ * // Custom icons
+ * <MultipleSelectionButton
+ *   active={isSelecting}
+ *   onActiveChange={setIsSelecting}
+ *   selectedCount={selected.length}
+ *   toggleIcon={<CheckSquareIcon />}
+ *   closeIcon={<XIcon />}
+ * />
+ *
+ * // Custom count rendering
+ * <MultipleSelectionButton
+ *   active={isSelecting}
+ *   selectedCount={selected.length}
+ *   renderCount={(count) => (
+ *     <div className="badge">{count} items</div>
+ *   )}
+ * />
+ *
+ * // Fully custom rendering
+ * <MultipleSelectionButton
+ *   active={isSelecting}
+ *   onActiveChange={setIsSelecting}
+ *   selectedCount={selected.length}
+ *   renderActive={({ onClose, selectedCount }) => (
+ *     <div className="custom-toolbar">
+ *       <button onClick={onClose}>✕</button>
+ *       <span>{selectedCount} selected</span>
+ *     </div>
+ *   )}
+ * />
+ * ```
+ */
+declare const MultipleSelectionButton: react.ForwardRefExoticComponent<MultipleSelectionButtonProps & react.RefAttributes<HTMLDivElement>>;
+
+type BaseInputProps$1 = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+interface CheckboxProps extends BaseInputProps$1 {
+    /** Marks the field as invalid (error state). Applies error color styling. */
+    invalid?: boolean;
+    /** Sets the checkbox to an indeterminate state. */
+    indeterminate?: boolean;
+    /** Optional visible label. Use `children` if you need custom label layout. */
+    label?: React.ReactNode;
+    /** Optional description text shown under the label for a11y. */
+    description?: React.ReactNode;
+    /** Id of the description element for aria-describedby; auto-wired if `description` provided. */
+    descriptionId?: string;
+}
+/**
+ * Checkbox - An accessible checkbox component with custom SVG UI and advanced states.
+ *
+ * Features:
+ * - Native checkbox behavior with custom visual design
+ * - Indeterminate state support
+ * - Error/invalid state styling
+ * - Optional label and description
+ * - Full keyboard navigation and accessibility
+ * - ARIA attributes for screen readers
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Checkbox
+ *   checked={agreed}
+ *   onChange={(e) => setAgreed(e.target.checked)}
+ *   label="I agree to the terms"
+ * />
+ *
+ * // With description
+ * <Checkbox
+ *   checked={notifications}
+ *   onChange={(e) => setNotifications(e.target.checked)}
+ *   label="Enable notifications"
+ *   description="Receive email updates about your account"
+ * />
+ *
+ * // With indeterminate state (e.g., "select all")
+ * <Checkbox
+ *   checked={allSelected}
+ *   indeterminate={someSelected}
+ *   onChange={handleSelectAll}
+ *   label="Select all items"
+ * />
+ *
+ * // With error state
+ * <Checkbox
+ *   checked={agreed}
+ *   onChange={(e) => setAgreed(e.target.checked)}
+ *   label="I agree to the terms"
+ *   invalid={!agreed && submitted}
+ * />
+ * ```
+ */
+declare const Checkbox: react.ForwardRefExoticComponent<CheckboxProps & react.RefAttributes<HTMLInputElement>>;
+
+type Orientation = "horizontal" | "vertical";
+
+interface CheckboxGroupOption<T extends string = string> {
+    value: T;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    invalid?: boolean;
+    id?: string;
+}
+type BaseFieldSetProps$1 = Omit<React.HTMLAttributes<HTMLFieldSetElement>, "onChange">;
+interface CheckboxGroupProps<T extends string = string> extends BaseFieldSetProps$1 {
+    /** Accessible legend/title for the group */
+    legend: React.ReactNode;
+    /** Shared name assigned to all checkboxes in this group */
+    name: string;
+    /** Layout direction */
+    orientation?: Orientation;
+    /** Checkbox options list */
+    options: CheckboxGroupOption<T>[];
+    /** Controlled values array */
+    value?: T[];
+    /** Uncontrolled default values array */
+    defaultValue?: T[];
+    /** Change handler (receives array of selected values) */
+    onChange?: (selected: T[]) => void;
+    /** Marks group invalid; individual option invalids override per item */
+    invalid?: boolean;
+    /** Description for the group for SR users */
+    description?: React.ReactNode;
+    /** ID for description element, auto if omitted */
+    descriptionId?: string;
+    /** Show "Select All" checkbox */
+    showSelectAll?: boolean;
+    /** Label for the "Select All" checkbox */
+    selectAllLabel?: React.ReactNode;
+}
+/**
+ * - Fieldset wrapper managing a group of checkboxes with optional Select All,description, and orientation.
+ */
+declare const CheckboxGroup: react.ForwardRefExoticComponent<CheckboxGroupProps<string> & react.RefAttributes<HTMLFieldSetElement>>;
+
+declare const inputVariants: (props?: ({
+    variant?: "error" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type InputVariants = VariantProps<typeof inputVariants>;
+type InputVariant = InputVariants["variant"];
+type InputBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "required">;
+interface InputProps extends InputBaseProps {
+    variant?: InputVariant;
+    label?: string;
+    error?: string;
+    helperText?: string;
+    contentSize?: number;
+    leftDivider?: boolean;
+    rightDivider?: boolean;
+    containerClassName?: string;
+    required?: boolean;
+    disabled?: boolean;
+    leftIcon?: React.ReactNode;
+    onLeftIconClick?: () => void;
+    leftIconAriaLabel?: string;
+    rightIcon?: React.ReactNode;
+    onRightIconClick?: () => void;
+    rightIconAriaLabel?: string;
+}
+/**
+ * Input - A text input component with validation, icons, and accessibility features.
+ *
+ * Features:
+ * - Validation states with error styling
+ * - Label, helper text, and error message support
+ * - Left and right icon slots (static or clickable)
+ * - Optional dividers between icons and input
+ * - Responsive sizing (mobile-first design)
+ * - Full keyboard navigation and accessibility
+ * - Support for all native input types
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Input
+ *   label="Email"
+ *   placeholder="Enter your email"
+ *   value={email}
+ *   onChange={(e) => setEmail(e.target.value)}
+ * />
+ *
+ * // With validation
+ * <Input
+ *   label="Password"
+ *   type="password"
+ *   required
+ *   error="Password must be at least 8 characters"
+ *   helperText="Use a strong password"
+ * />
+ *
+ * // With icons
+ * <Input
+ *   leftIcon={<SearchIcon />}
+ *   placeholder="Search..."
+ * />
+ *
+ * // With clickable icons
+ * <Input
+ *   type="password"
+ *   rightIcon={<EyeIcon />}
+ *   onRightIconClick={togglePasswordVisibility}
+ *   rightIconAriaLabel="Toggle password visibility"
+ * />
+ *
+ * // With dividers
+ * <Input
+ *   leftIcon={<DollarIcon />}
+ *   leftDivider
+ *   placeholder="0.00"
+ * />
+ * ```
+ */
+declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+
+type QuantityInputBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "value" | "defaultValue">;
+interface QuantityInputProps extends QuantityInputBaseProps {
+    value?: number;
+    defaultValue?: number;
+    onChange?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    label?: string;
+    helperText?: string;
+    error?: string;
+    containerClassName?: string;
+    inputClassName?: string;
+    /** Disable manual typing; only allow +/- */
+    readOnlyInput?: boolean;
+}
+/**
+ * - Controlled/uncontrolled via useControllableState
+ * - Clamps to [min, max]
+ * - Disables +/- when at bounds
+ * - Auto-clamps manual input on blur or invalid typing
+ */
+declare const QuantityInput: react.ForwardRefExoticComponent<QuantityInputProps & react.RefAttributes<HTMLInputElement>>;
+
+declare const searchInputVariants: (props?: ({
+    variant?: "full" | "compact" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SearchInputVariant = VariantProps<typeof searchInputVariants>["variant"];
+type SearchInputBaseProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type">;
+interface SearchInputProps extends SearchInputBaseProps {
+    variant?: SearchInputVariant;
+    placeholder?: string;
+    onSearch?: (value: string) => void;
+    clearable?: boolean;
+    containerClassName?: string;
+    disabled?: boolean;
+    defaultValue?: string;
+}
+/**
+ * - Search field with compact and full variants, animated expansion, keyboard
+ * handling, and optional clear button.
+ */
+declare const SearchInput: react.ForwardRefExoticComponent<SearchInputProps & react.RefAttributes<HTMLInputElement>>;
+
+type DatePickerMode = "single" | "range";
+interface BaseProps$1 {
+    label?: string;
+    mode?: DatePickerMode;
+    defaultMonth?: Date;
+    minDate?: Date;
+    maxDate?: Date;
+    isDateDisabled?: (date: Date) => boolean;
+    isDateMarked?: (date: Date) => boolean;
+    showTime?: boolean;
+    minuteStep?: number;
+    onCancel?: () => void;
+    onApply?: (value: Date | {
+        from: Date | null;
+        to: Date | null;
+    }) => void;
+    className?: string;
+    locale?: string | string[];
+    labels?: {
+        from?: string;
+        to?: string;
+        today?: string;
+        cancel?: string;
+        apply?: string;
+        hours?: string;
+        minutes?: string;
+    };
+    weekdayLabels?: string[];
+    monthLabels?: string[];
+    formatHeaderDate?: (date: Date) => string;
+}
+interface SingleProps$1 extends BaseProps$1 {
+    mode?: "single";
+    value?: Date | null;
+    onChange?: (value: Date | null) => void;
+}
+interface RangeValue {
+    from: Date | null;
+    to: Date | null;
+}
+interface RangeProps$1 extends BaseProps$1 {
+    mode: "range";
+    value?: RangeValue;
+    onChange?: (value: RangeValue) => void;
+}
+type DatePickerProps = SingleProps$1 | RangeProps$1;
+/**
+ * DatePicker - A comprehensive date and time picker with single and range selection modes.
+ *
+ * Features:
+ * - Single date or date range selection
+ * - Optional time picker with customizable minute steps
+ * - Responsive design (side-by-side on desktop, step-by-step on mobile)
+ * - Full internationalization support
+ * - Min/max date constraints
+ * - Custom date validation and marking
+ * - Keyboard navigation and accessibility
+ * - Customizable labels and formatting
+ *
+ * @example
+ * ```tsx
+ * // Single date selection
+ * <DatePicker
+ *   mode="single"
+ *   value={selectedDate}
+ *   onChange={setSelectedDate}
+ *   showTime
+ *   minuteStep={15}
+ *   onApply={(date) => console.log('Applied:', date)}
+ * />
+ *
+ * // Date range selection
+ * <DatePicker
+ *   mode="range"
+ *   value={{ from: startDate, to: endDate }}
+ *   onChange={setDateRange}
+ *   minDate={new Date()}
+ *   maxDate={addMonths(new Date(), 6)}
+ *   onApply={(range) => console.log('Applied:', range)}
+ * />
+ *
+ * // With localization
+ * <DatePicker
+ *   mode="single"
+ *   value={date}
+ *   onChange={setDate}
+ *   locale="es"
+ *   labels={{
+ *     today: 'Hoy',
+ *     cancel: 'Cancelar',
+ *     apply: 'Aplicar'
+ *   }}
+ * />
+ *
+ * // With custom validation
+ * <DatePicker
+ *   mode="single"
+ *   value={date}
+ *   onChange={setDate}
+ *   isDateDisabled={(d) => d.getDay() === 0 || d.getDay() === 6}
+ *   isDateMarked={(d) => isHoliday(d)}
+ * />
+ * ```
+ */
+declare const DatePicker: react.ForwardRefExoticComponent<DatePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+type DateInputMode = "single" | "range";
+type BaseProps = {
+    label?: string;
+    helperText?: string;
+    error?: string;
+    required?: boolean;
+    disabled?: boolean;
+    className?: string;
+    containerClassName?: string;
+    placeholder?: string;
+    autoWidth?: boolean;
+    format?: (value: Date | {
+        from: Date | null;
+        to: Date | null;
+    } | null) => string;
+    parse?: (text: string) => Date | null;
+    onOpenChange?: (open: boolean) => void;
+    closeOnSelect?: boolean;
+} & Pick<DatePickerProps, "minDate" | "maxDate" | "isDateDisabled" | "isDateMarked" | "showTime" | "minuteStep" | "locale" | "labels" | "weekdayLabels" | "monthLabels" | "formatHeaderDate">;
+type SingleValue = Date | null;
+interface SingleProps extends Omit<InputProps, "value" | "onChange" | "type" | "defaultValue">, BaseProps {
+    mode?: "single";
+    value?: SingleValue;
+    defaultValue?: SingleValue;
+    onChange?: (value: SingleValue) => void;
+}
+interface RangeProps extends Omit<InputProps, "value" | "onChange" | "type" | "defaultValue">, BaseProps {
+    mode: "range";
+    value?: RangeValue;
+    defaultValue?: RangeValue;
+    onChange?: (value: RangeValue) => void;
+}
+type DateInputProps = SingleProps | RangeProps;
+/**
+ * - Text input that opens an accessible date (and optional time) picker. Supports
+ * single and range modes, localization, and formatted display values.
+ */
+declare const DateInput: react.ForwardRefExoticComponent<DateInputProps & react.RefAttributes<HTMLInputElement>>;
+
+declare const dividerVariants: (props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    inset?: "end" | "none" | "both" | "start" | null | undefined;
+    thickness?: "sm" | "px" | null | undefined;
+    stretch?: "none" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DividerVariant = VariantProps<typeof dividerVariants>;
+type DividerProps = React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof dividerVariants> & {
+    colorClassName?: string;
+};
+/**
+ * - Themed horizontal or vertical separator with orientation, inset, thickness,
+ * and stretch variants. Uses role="separator" for a11y.
+ */
+declare const Divider: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    inset?: "end" | "none" | "both" | "start" | null | undefined;
+    thickness?: "sm" | "px" | null | undefined;
+    stretch?: "none" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    colorClassName?: string;
+} & react.RefAttributes<HTMLDivElement>>;
+
+declare const fileUploadVariants: (props?: ({
+    variant?: "error" | "default" | "disabled" | "dragOver" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type FileUploadVariant = VariantProps<typeof fileUploadVariants>["variant"];
+type FileUploadSize = VariantProps<typeof fileUploadVariants>["size"];
+type FileUploadIconType = "file" | "image" | "video";
+interface FileUploadError {
+    type: "fileType" | "fileSize" | "fileCount" | "network" | "unknown";
+    message: string;
+    file?: File;
+}
+interface FileUploadFile {
+    id: string;
+    file: File;
+    preview?: string;
+    status: "pending" | "uploading" | "success" | "error";
+    error?: FileUploadError;
+    progress?: number;
+}
+type FileUploadSubtitleContext = {
+    acceptedFileTypes: string[];
+    maxFileSize: number;
+    multiple: boolean;
+    maxFiles: number;
+};
+interface FileUploadMessages {
+    titleIdle?: React.ReactNode;
+    titleDragOver?: React.ReactNode;
+    subtitle?: React.ReactNode;
+}
+interface FileUploadProps {
+    files?: FileUploadFile[];
+    onFilesChange?: (files: FileUploadFile[]) => void;
+    onUploadSuccess?: (files: File[]) => void;
+    onUploadError?: (error: FileUploadError) => void;
+    onFileRemove?: (fileId: string) => void;
+    acceptedFileTypes?: string[];
+    maxFileSize?: number;
+    maxFiles?: number;
+    multiple?: boolean;
+    disabled?: boolean;
+    label?: string;
+    error?: string;
+    /** Optional helper text displayed under the dropzone when no error */
+    helperText?: string;
+    variant?: FileUploadVariant;
+    size?: FileUploadSize;
+    className?: string;
+    iconType?: FileUploadIconType;
+    uploadIcon?: React.ReactNode;
+    successIcon?: React.ReactNode;
+    errorIcon?: React.ReactNode;
+    id?: string;
+    required?: boolean;
+    "aria-label"?: string;
+    "aria-describedby"?: string;
+    messages?: FileUploadMessages;
+    /**
+     * Fully control the subtitle line using a render function.
+     * If provided, this takes precedence over messages.subtitle.
+     */
+    renderSubtitle?: (ctx: FileUploadSubtitleContext) => React.ReactNode;
+    /**
+     * Optional callback for custom file validation.
+     * Return a FileUploadError to reject the file, or null/undefined to accept it.
+     * This runs after internal type/size validation.
+     */
+    onValidateFile?: (file: File) => FileUploadError | null | undefined;
+}
+/**
+ * File upload component with drag-and-drop, validation, previews, and accessibility support.
+ * Supports multiple files, file type validation, size limits, and comprehensive error handling.
+ */
+/**
+ * Note on uploading state:
+ * - The component does not perform uploads; the parent owns upload lifecycle.
+ * - To show progress or uploading state, manage `files` as a controlled prop and
+ *   update each item's `status` ("uploading" | "success" | "error") and `progress`.
+ */
+declare const FileUpload: react.ForwardRefExoticComponent<FileUploadProps & react.RefAttributes<HTMLDivElement>>;
+
+type FormBaseProps = Omit<React.FormHTMLAttributes<HTMLFormElement>, "onSubmit">;
+interface FormProps extends FormBaseProps {
+    onSubmit?: (event: React.FormEvent<HTMLFormElement>) => void;
+    noValidate?: boolean;
+    children: React.ReactNode;
+    className?: string;
+    "aria-describedby"?: string;
+}
+/**
+ * - Accessible form primitives: form wrapper with invalid focus management,
+ * error summary region, and grouping field container.
+ */
+declare const Form: react.ForwardRefExoticComponent<FormProps & react.RefAttributes<HTMLFormElement>>;
+interface FormErrorItem {
+    id: string;
+    message: string;
+}
+interface FormErrorSummaryProps {
+    errors: FormErrorItem[];
+    className?: string;
+    title?: string;
+    id?: string;
+}
+/**
+ * Renders a concise error summary with links to corresponding fields.
+ * Uses role="alert" and aria-live to announce updates to screen readers.
+ */
+declare const FormErrorSummary: react.ForwardRefExoticComponent<FormErrorSummaryProps & react.RefAttributes<HTMLDivElement>>;
+interface FormFieldProps {
+    children: React.ReactNode;
+    className?: string;
+    asFieldset?: boolean;
+    legend?: string;
+}
+/**
+ * Lightweight grouping container for related controls.
+ * Optionally renders a fieldset/legend for semantic grouping.
+ */
+declare const FormField: react.ForwardRefExoticComponent<FormFieldProps & react.RefAttributes<HTMLDivElement | HTMLFieldSetElement>>;
+
+type PaginationBaseProps = Omit<React.HTMLAttributes<HTMLElement>, "onChange">;
+interface PaginationProps extends PaginationBaseProps {
+    total?: number;
+    pageSize?: number;
+    page?: number;
+    defaultPage?: number;
+    onPageChange?: (page: number) => void;
+    siblingCount?: 0 | 1 | 2;
+    showInfo?: boolean;
+    showFirstLast?: boolean;
+    hasNextPage?: boolean;
+    hasPrevPage?: boolean;
+    renderInfo?: (from: number, to: number, total: number) => React.ReactNode;
+    className?: string;
+}
+/**
+ * Pagination - An accessible pagination component with flexible configuration.
+ *
+ * Features:
+ * - Page number buttons with ellipsis for large datasets
+ * - Previous/Next navigation
+ * - Optional First/Last page buttons
+ * - Page info display (e.g., "1-10 of 100")
+ * - Controlled or uncontrolled modes
+ * - Responsive design
+ * - Configurable sibling page count
+ * - Custom info renderer
+ * - Full keyboard navigation and ARIA support
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Pagination
+ *   total={100}
+ *   pageSize={10}
+ *   page={currentPage}
+ *   onPageChange={setCurrentPage}
+ * />
+ *
+ * // With first/last buttons
+ * <Pagination
+ *   total={500}
+ *   pageSize={20}
+ *   page={page}
+ *   onPageChange={setPage}
+ *   showFirstLast
+ *   siblingCount={2}
+ * />
+ *
+ * // Without page info
+ * <Pagination
+ *   total={200}
+ *   pageSize={25}
+ *   page={page}
+ *   onPageChange={setPage}
+ *   showInfo={false}
+ * />
+ *
+ * // Custom info renderer
+ * <Pagination
+ *   total={150}
+ *   pageSize={15}
+ *   page={page}
+ *   onPageChange={setPage}
+ *   renderInfo={(from, to, total) => (
+ *     <span>Showing {from}-{to} of {total} items</span>
+ *   )}
+ * />
+ *
+ * // For infinite scroll/cursor pagination
+ * <Pagination
+ *   page={page}
+ *   onPageChange={setPage}
+ *   hasNextPage={hasMore}
+ *   hasPrevPage={page > 1}
+ *   showInfo={false}
+ * />
+ * ```
+ */
+declare const Pagination: react.ForwardRefExoticComponent<PaginationProps & react.RefAttributes<HTMLElement>>;
+
+type BaseInputProps = Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">;
+interface RadioProps extends BaseInputProps {
+    /** Marks the field as invalid (error state). Applies error color styling. */
+    invalid?: boolean;
+    /** Optional visible label. Use `children` if you need custom label layout. */
+    label?: React.ReactNode;
+    /** Optional description text shown under the label for a11y. */
+    description?: React.ReactNode;
+    /** Id of the description element for aria-describedby; auto-wired if `description` provided. */
+    descriptionId?: string;
+}
+/**
+ * Radio - An accessible radio button component with custom SVG UI.
+ *
+ * Features:
+ * - Native radio button behavior with custom visual design
+ * - Error/invalid state styling
+ * - Optional label and description
+ * - Full keyboard navigation within radio groups
+ * - ARIA attributes for screen readers
+ * - Works with RadioGroup for managing groups
+ *
+ * @example
+ * ```tsx
+ * // Basic usage (standalone)
+ * <Radio
+ *   name="size"
+ *   value="medium"
+ *   checked={size === 'medium'}
+ *   onChange={(e) => setSize(e.target.value)}
+ *   label="Medium"
+ * />
+ *
+ * // With description
+ * <Radio
+ *   name="plan"
+ *   value="pro"
+ *   checked={plan === 'pro'}
+ *   onChange={(e) => setPlan(e.target.value)}
+ *   label="Pro Plan"
+ *   description="$29/month - Advanced features included"
+ * />
+ *
+ * // With error state
+ * <Radio
+ *   name="payment"
+ *   value="card"
+ *   checked={payment === 'card'}
+ *   onChange={(e) => setPayment(e.target.value)}
+ *   label="Credit Card"
+ *   invalid={!payment && submitted}
+ * />
+ *
+ * // Use RadioGroup for managing multiple radios
+ * <RadioGroup value={size} onChange={setSize}>
+ *   <Radio value="small" label="Small" />
+ *   <Radio value="medium" label="Medium" />
+ *   <Radio value="large" label="Large" />
+ * </RadioGroup>
+ * ```
+ */
+declare const Radio: react.ForwardRefExoticComponent<RadioProps & react.RefAttributes<HTMLInputElement>>;
+
+interface RadioGroupOption<T extends string = string> {
+    value: T;
+    label: React.ReactNode;
+    description?: React.ReactNode;
+    disabled?: boolean;
+    invalid?: boolean;
+    id?: string;
+}
+type BaseFieldSetProps = Omit<React.HTMLAttributes<HTMLFieldSetElement>, "onChange">;
+interface RadioGroupProps<T extends string = string> extends BaseFieldSetProps {
+    /** Accessible legend/title for the group */
+    legend: React.ReactNode;
+    /** Shared name assigned to all radios in this group */
+    name: string;
+    /** Layout direction */
+    orientation?: Orientation;
+    /** Radio options list */
+    options: RadioGroupOption<T>[];
+    /** Controlled value */
+    value?: T;
+    /** Uncontrolled default value */
+    defaultValue?: T;
+    /** Change handler (receives next value) */
+    onChange?: (next: T) => void;
+    /** Marks group invalid; individual option invalids override per item */
+    invalid?: boolean;
+    /** Description for the group for SR users */
+    description?: React.ReactNode;
+    /** ID for description element, auto if omitted */
+    descriptionId?: string;
+}
+/**
+ * - Fieldset wrapper managing a group of radios with description and orientation.
+ * - Supports controlled and uncontrolled selection.
+ */
+declare const RadioGroup: react.ForwardRefExoticComponent<RadioGroupProps<string> & react.RefAttributes<HTMLFieldSetElement>>;
+
+declare const selectVariants: (props?: ({
+    variant?: "error" | "default" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type SelectVariant = VariantProps<typeof selectVariants>["variant"];
+interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+type SelectBaseProps = Omit<React.SelectHTMLAttributes<HTMLSelectElement>, "size" | "required" | "multiple" | "onChange">;
+interface SelectProps extends SelectBaseProps {
+    variant?: SelectVariant;
+    label?: string;
+    error?: string;
+    helperText?: string;
+    required?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    options: SelectOption[];
+    value?: string | string[];
+    multiple?: boolean;
+    native?: boolean;
+    onChange?: (value: string | string[]) => void;
+    containerClassName?: string;
+    renderOption?: (option: SelectOption) => React.ReactNode;
+    searchable?: boolean;
+    onSearch?: (searchTerm: string) => void;
+    clearable?: boolean;
+    maxHeight?: number;
+    renderValue?: (props: {
+        selectedValue: string | string[];
+        selectedOption: SelectOption | null;
+        options: SelectOption[];
+        multiple: boolean;
+        placeholder?: string;
+    }) => React.ReactNode;
+    renderDropdown?: (props: {
+        isOpen: boolean;
+        selectId: string;
+        searchable: boolean;
+        searchTerm: string;
+        searchInputRef: React.RefObject<HTMLInputElement>;
+        onSearchChange: (searchTerm: string) => void;
+        filteredOptions: SelectOption[];
+        selectedValue: string | string[];
+        multiple: boolean;
+        optionRefs: React.MutableRefObject<Array<HTMLButtonElement | null>>;
+        onOptionChange: (value: string) => void;
+        onKeyDown: (e: React.KeyboardEvent) => void;
+        renderOption?: (option: SelectOption) => React.ReactNode;
+        maxHeight: number;
+    }) => React.ReactNode;
+}
+/**
+ * Select - A versatile form select component with native and custom dropdown modes.
+ *
+ * Features:
+ * - Native HTML select or custom dropdown UI
+ * - Single and multi-select support
+ * - Searchable options (client-side or API-driven)
+ * - Clearable selections
+ * - Custom option rendering
+ * - Validation states (error, helper text)
+ * - Full keyboard navigation and accessibility
+ *
+ * Customization:
+ * - `renderValue`: Override the display of the selected value(s) in the button
+ * - `renderDropdown`: Override the entire dropdown menu rendering
+ * - `renderOption`: Customize individual option rendering
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Select
+ *   options={[{ value: "1", label: "Option 1" }]}
+ *   value={value}
+ *   onChange={setValue}
+ * />
+ *
+ * // Custom value display
+ * <Select
+ *   options={options}
+ *   value={value}
+ *   onChange={setValue}
+ *   renderValue={({ selectedOption }) => (
+ *     <span className="sui-font-bold">{selectedOption?.label}</span>
+ *   )}
+ * />
+ *
+ * // Custom dropdown
+ * <Select
+ *   options={options}
+ *   value={value}
+ *   onChange={setValue}
+ *   renderDropdown={({ isOpen, filteredOptions, onOptionChange }) => (
+ *     // Your custom dropdown JSX
+ *   )}
+ * />
+ * ```
+ */
+declare const Select: react.ForwardRefExoticComponent<SelectProps & react.RefAttributes<HTMLButtonElement | HTMLSelectElement>>;
+
+type TabsProps = {
+    className?: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (v: string) => void;
+    children: React.ReactNode;
+};
+/**
+ * Tabs - An accessible tabs system with animated indicator and keyboard navigation.
+ *
+ * Features:
+ * - Compound component pattern (Tabs, TabsList, TabsTrigger, TabsContent)
+ * - Animated indicator following active tab
+ * - Roving tabindex for keyboard navigation (Arrow keys)
+ * - Controlled or uncontrolled modes
+ * - Responsive and mobile-friendly
+ * - Full ARIA support for screen readers
+ * - Dense mode for compact UIs
+ *
+ * Components:
+ * - `Tabs`: Root container with state management
+ * - `TabsList`: Container for tab triggers with animated indicator
+ * - `TabsTrigger`: Individual tab button
+ * - `TabsContent`: Content panel for each tab
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Overview</TabsTrigger>
+ *     <TabsTrigger value="tab2">Details</TabsTrigger>
+ *     <TabsTrigger value="tab3">Settings</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">
+ *     <h2>Overview Content</h2>
+ *   </TabsContent>
+ *   <TabsContent value="tab2">
+ *     <h2>Details Content</h2>
+ *   </TabsContent>
+ *   <TabsContent value="tab3">
+ *     <h2>Settings Content</h2>
+ *   </TabsContent>
+ * </Tabs>
+ *
+ * // Controlled mode
+ * <Tabs value={activeTab} onValueChange={setActiveTab}>
+ *   <TabsList>
+ *     <TabsTrigger value="profile">Profile</TabsTrigger>
+ *     <TabsTrigger value="billing">Billing</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="profile">Profile form...</TabsContent>
+ *   <TabsContent value="billing">Billing info...</TabsContent>
+ * </Tabs>
+ *
+ * // Dense mode (compact UI)
+ * <Tabs defaultValue="tab1">
+ *   <TabsList dense>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ * ```
+ */
+declare const Tabs: {
+    ({ className, value, defaultValue, onValueChange, children, }: TabsProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+type TabsListProps = React.HTMLAttributes<HTMLDivElement> & {
+    /** When true, reduce horizontal padding for compact UIs */
+    dense?: boolean;
+};
+declare const TabsList: {
+    ({ className, dense, ...props }: TabsListProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+type TabsTriggerProps = Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+    value: string;
+    /** Optional icon displayed to the left of the label */
+    icon?: React.ReactNode;
+};
+declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<react.ButtonHTMLAttributes<HTMLButtonElement>, "onChange"> & {
+    value: string;
+    /** Optional icon displayed to the left of the label */
+    icon?: React.ReactNode;
+} & react.RefAttributes<HTMLButtonElement>>;
+type TabsContentProps = React.HTMLAttributes<HTMLDivElement> & {
+    value: string;
+    /** Keep content mounted when inactive (hidden). Useful to preserve state. */
+    forceMount?: boolean;
+};
+declare const TabsContent: {
+    ({ className, value, children, forceMount, ...props }: TabsContentProps): react_jsx_runtime.JSX.Element | null;
+    displayName: string;
+};
+
+interface TimePickerProps {
+    value: Date | null;
+    onChange: (d: Date) => void;
+    minuteStep?: number;
+    hoursLabel?: string;
+    minutesLabel?: string;
+    className?: string;
+    placeholder?: string;
+    /** Custom format function for displaying time */
+    formatTime?: (date: Date) => string;
+    /** Custom render function for the trigger button */
+    renderTrigger?: (props: {
+        value: Date | null;
+        formattedTime: string;
+        onClick: () => void;
+        open: boolean;
+        disabled: boolean;
+    }) => React.ReactNode;
+    /** Custom render function for hour options */
+    renderHourOption?: (hour: number, isSelected: boolean) => React.ReactNode;
+    /** Custom render function for minute options */
+    renderMinuteOption?: (minute: number, isSelected: boolean) => React.ReactNode;
+    /** Custom render function for the entire spinner */
+    renderSpinner?: (props: {
+        value: Date;
+        onChange: (d: Date) => void;
+        minuteStep: number;
+        hoursLabel: string;
+        minutesLabel: string;
+    }) => React.ReactNode;
+}
+/**
+ * TimePicker - A time selection component with hour/minute spinners.
+ *
+ * Features:
+ * - Hour and minute selection with customizable step
+ * - Dropdown with scrollable spinners
+ * - Keyboard navigation (Escape to close)
+ * - Click-outside to close
+ * - Fully customizable trigger, options, and spinner
+ * - Auto-scroll to selected time
+ *
+ * Customization:
+ * - `formatTime`: Custom time formatting
+ * - `renderTrigger`: Complete trigger customization
+ * - `renderHourOption`/`renderMinuteOption`: Custom option rendering
+ * - `renderSpinner`: Complete spinner customization
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <TimePicker
+ *   value={time}
+ *   onChange={setTime}
+ *   minuteStep={15}
+ * />
+ *
+ * // Custom format
+ * <TimePicker
+ *   value={time}
+ *   onChange={setTime}
+ *   formatTime={(date) => date.toLocaleTimeString('en-US', {
+ *     hour: '2-digit',
+ *     minute: '2-digit',
+ *     hour12: true
+ *   })}
+ * />
+ *
+ * // Custom trigger
+ * <TimePicker
+ *   value={time}
+ *   onChange={setTime}
+ *   renderTrigger={({ formattedTime, onClick, open }) => (
+ *     <button onClick={onClick} className="custom-trigger">
+ *       🕐 {formattedTime || 'Pick time'}
+ *     </button>
+ *   )}
+ * />
+ *
+ * // Custom option rendering
+ * <TimePicker
+ *   value={time}
+ *   onChange={setTime}
+ *   renderHourOption={(hour, isSelected) => (
+ *     <span className={isSelected ? 'selected' : ''}>
+ *       {hour === 0 ? '12 AM' : hour < 12 ? `${hour} AM` : hour === 12 ? '12 PM' : `${hour - 12} PM`}
+ *     </span>
+ *   )}
+ * />
+ * ```
+ */
+declare const TimePicker: react.ForwardRefExoticComponent<TimePickerProps & react.RefAttributes<HTMLDivElement>>;
+
+type ToastStatus = "success" | "info" | "warn" | "error";
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+    variant?: React.ComponentProps<typeof Button>["variant"];
+}
+interface ToastProps {
+    status: ToastStatus;
+    title: string;
+    message?: string;
+    className?: string;
+    actions?: ToastAction[];
+    onClose?: () => void;
+    autoCloseMs?: number;
+    showProgress?: boolean;
+    /** Custom icon for this toast (overrides status icon) */
+    customIcon?: React.ReactNode;
+    /** Custom render function for the icon */
+    renderIcon?: (status: ToastStatus) => React.ReactNode;
+    /** Custom render function for the close button */
+    renderCloseButton?: (props: {
+        onClick: () => void;
+    }) => React.ReactNode;
+    /** Custom render function for the progress bar */
+    renderProgress?: (progress: number, status: ToastStatus) => React.ReactNode;
+    /** Hide the close button */
+    hideCloseButton?: boolean;
+}
+/**
+ * Toast - A status notification component with auto-dismiss and action buttons.
+ *
+ * Features:
+ * - Multiple status types: success, info, warn, error
+ * - Auto-dismiss with configurable timeout
+ * - Visual progress bar showing remaining time
+ * - Pauses on hover/focus for better UX
+ * - Optional action buttons
+ * - Manual close button
+ * - ARIA live region for screen reader announcements
+ * - Smooth animations
+ * - Fully customizable icons, close button, and progress bar
+ *
+ * Customization:
+ * - `customIcon`: Replace the default status icon
+ * - `renderIcon`: Full control over icon rendering
+ * - `renderCloseButton`: Custom close button
+ * - `renderProgress`: Custom progress bar
+ * - `hideCloseButton`: Hide the close button
+ *
+ * @example
+ * ```tsx
+ * // Basic success toast
+ * <Toast
+ *   status="success"
+ *   title="Success"
+ *   message="Your changes have been saved"
+ *   onClose={() => console.log('Toast closed')}
+ * />
+ *
+ * // Custom icon
+ * <Toast
+ *   status="info"
+ *   title="New Feature"
+ *   customIcon={<SparklesIcon />}
+ *   onClose={handleClose}
+ * />
+ *
+ * // Custom close button
+ * <Toast
+ *   status="warn"
+ *   title="Warning"
+ *   renderCloseButton={({ onClick }) => (
+ *     <button onClick={onClick} className="custom-close">×</button>
+ *   )}
+ * />
+ *
+ * // Custom progress bar
+ * <Toast
+ *   status="success"
+ *   title="Uploading..."
+ *   renderProgress={(progress, status) => (
+ *     <div className="custom-progress">
+ *       {Math.round(progress)}%
+ *     </div>
+ *   )}
+ * />
+ *
+ * // Error toast with action
+ * <Toast
+ *   status="error"
+ *   title="Upload Failed"
+ *   message="Unable to upload file. Please try again."
+ *   actions={[
+ *     { label: 'Retry', onClick: handleRetry, variant: 'default' },
+ *     { label: 'Dismiss', onClick: handleClose, variant: 'text' }
+ *   ]}
+ *   onClose={handleClose}
+ * />
+ * ```
+ */
+declare const Toast: React.FC<ToastProps>;
+
+type ToastPosition = "top-left" | "top-right" | "top-center" | "bottom-left" | "bottom-right" | "bottom-center";
+interface ToastContainerProps {
+    position?: ToastPosition;
+    className?: string;
+    children?: React.ReactNode;
+    width?: number | string;
+}
+/**
+ * - Fixed-position portal region to stack toasts at screen edges.
+ * - Click-through outer wrapper with pointer-enabled children.
+ */
+declare const ToastContainer: React.FC<ToastContainerProps>;
+
+type TooltipSide = "top" | "bottom" | "left" | "right" | "auto";
+type TooltipAlign = "center" | "start" | "end";
+type TooltipProps = {
+    children?: React.ReactElement;
+    content: React.ReactNode;
+    className?: string;
+    containerClassName?: string;
+    side?: TooltipSide;
+    align?: TooltipAlign;
+    open?: boolean;
+    defaultOpen?: boolean;
+    disabled?: boolean;
+    delayMs?: number;
+    id?: string;
+    withBackdrop?: boolean;
+    portal?: boolean;
+    /** Show or hide the arrow */
+    showArrow?: boolean;
+    /** Custom arrow element */
+    renderArrow?: () => React.ReactNode;
+    /** Custom class for the arrow */
+    arrowClassName?: string;
+};
+/**
+ * Tooltip - A lightweight, accessible tooltip with smart positioning.
+ *
+ * Features:
+ * - Smart positioning using Floating UI (auto-adjusts to viewport)
+ * - Multiple placement options (top, bottom, left, right, auto)
+ * - Alignment control (center, start, end)
+ * - Controlled or uncontrolled modes
+ * - Configurable delay before showing
+ * - Optional backdrop overlay
+ * - Portal rendering for z-index management
+ * - Customizable arrow indicator
+ * - ARIA compliant (aria-describedby)
+ * - Mouse and keyboard support
+ *
+ * Customization:
+ * - `showArrow`: Show or hide the arrow
+ * - `renderArrow`: Custom arrow rendering
+ * - `arrowClassName`: Custom arrow styling
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Tooltip content="This is a helpful tooltip">
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ *
+ * // With custom positioning
+ * <Tooltip
+ *   content="Positioned on the right side"
+ *   side="right"
+ *   align="start"
+ * >
+ *   <span>Hover for info</span>
+ * </Tooltip>
+ *
+ * // Without arrow
+ * <Tooltip
+ *   content="No arrow tooltip"
+ *   showArrow={false}
+ * >
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ *
+ * // Custom arrow styling
+ * <Tooltip
+ *   content="Custom arrow"
+ *   arrowClassName="sui-bg-blue-500"
+ * >
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ *
+ * // Custom arrow render
+ * <Tooltip
+ *   content="Custom arrow element"
+ *   renderArrow={() => (
+ *     <div className="custom-arrow">▼</div>
+ *   )}
+ * >
+ *   <Button>Hover me</Button>
+ * </Tooltip>
+ *
+ * // With backdrop and portal
+ * <Tooltip
+ *   content="Important information"
+ *   withBackdrop
+ *   portal
+ *   delayMs={300}
+ * >
+ *   <Button variant="outline">Show info</Button>
+ * </Tooltip>
+ * ```
+ */
+declare const Tooltip: React.FC<TooltipProps>;
+
+type ViewMode = "grid" | "list";
+interface ViewToggleProps {
+    value: ViewMode;
+    onChange?: (value: ViewMode) => void;
+    className?: string;
+    "aria-label"?: string;
+    /** Custom grid icon */
+    gridIcon?: React.ReactNode;
+    /** Custom list icon */
+    listIcon?: React.ReactNode;
+    /** Accessible label for grid option */
+    gridLabel?: string;
+    /** Accessible label for list option */
+    listLabel?: string;
+    /** Custom render function for individual options */
+    renderOption?: (mode: ViewMode, props: {
+        isActive: boolean;
+        onClick: () => void;
+        onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+        ref: React.RefObject<HTMLDivElement>;
+        ariaLabel: string;
+    }) => React.ReactNode;
+}
+/**
+ * ViewToggle - A compact switch for toggling between grid and list views.
+ *
+ * Features:
+ * - Two-option toggle (grid/list)
+ * - Keyboard navigation (Arrow keys)
+ * - Fully accessible radio group
+ * - Animated selection indicator
+ * - Customizable icons and rendering
+ *
+ * Customization:
+ * - `gridIcon`/`listIcon`: Replace default icons
+ * - `gridLabel`/`listLabel`: Custom ARIA labels
+ * - `renderOption`: Complete option customization
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ViewToggle value={view} onChange={setView} />
+ *
+ * // Custom icons
+ * <ViewToggle
+ *   value={view}
+ *   onChange={setView}
+ *   gridIcon={<CustomGridIcon />}
+ *   listIcon={<CustomListIcon />}
+ * />
+ *
+ * // Custom labels
+ * <ViewToggle
+ *   value={view}
+ *   onChange={setView}
+ *   gridLabel="Card view"
+ *   listLabel="Table view"
+ * />
+ *
+ * // Fully custom rendering
+ * <ViewToggle
+ *   value={view}
+ *   onChange={setView}
+ *   renderOption={(mode, { isActive, onClick, ariaLabel }) => (
+ *     <button
+ *       onClick={onClick}
+ *       aria-label={ariaLabel}
+ *       className={isActive ? 'active' : ''}
+ *     >
+ *       {mode === 'grid' ? '⊞' : '☰'} {mode}
+ *     </button>
+ *   )}
+ * />
+ * ```
+ */
+declare const ViewToggle: React.FC<ViewToggleProps>;
+
+interface ScalablyUIProviderProps {
+    children: React.ReactNode;
+    className?: string;
+    /**
+     * When true, merges the scope class onto the single child instead of adding an extra wrapper div.
+     */
+    asChild?: boolean;
+}
+/**
+ * ScalablyUIProvider
+ *
+ * Adds the required `sui-scope` wrapper so prefixed Tailwind styles apply.
+ *
+ * Usage:
+ * <ScalablyUIProvider>
+ *   <App />
+ * </ScalablyUIProvider>
+ *
+ * Or to avoid an extra DOM node:
+ * <ScalablyUIProvider asChild>
+ *   <main />
+ * </ScalablyUIProvider>
+ */
+declare const ScalablyUIProvider: React.FC<ScalablyUIProviderProps>;
+
+/**
+ * Utility function to merge Tailwind CSS classes intelligently
+ * Combines clsx for conditional classes and tailwind-merge for conflict resolution
+ *
+ * @param inputs - Class values to merge
+ * @returns Merged class string
+ *
+ * @example
+ * ```tsx
+ * cn('sui-p-4', isActive && 'sui-bg-blue-500', 'sui-text-white')
+ * // Returns: 'sui-p-4 sui-bg-blue-500 sui-text-white'
+ * ```
+ */
+declare function cn(...inputs: ClassValue[]): string;
+/**
+ * Creates a scoped class name with the UI prefix
+ * Ensures all classes are properly prefixed for isolation
+ *
+ * @param className - The class name to scope
+ * @returns Scoped class name
+ *
+ * @example
+ * ```tsx
+ * scopeClass('p-4 bg-blue-500') // Returns: 'ui-p-4 ui-bg-blue-500'
+ * ```
+ */
+declare function scopeClass(className: string): string;
+/**
+ * Debounce utility for performance optimization
+ *
+ * @param func - Function to debounce
+ * @param wait - Wait time in milliseconds
+ * @returns Debounced function
+ */
+declare function debounce<T extends (...args: unknown[]) => unknown>(func: T, wait: number): (...args: Parameters<T>) => void;
+/**
+ * Throttle utility for performance optimization
+ *
+ * @param func - Function to throttle
+ * @param limit - Time limit in milliseconds
+ * @returns Throttled function
+ */
+declare function throttle<T extends (...args: unknown[]) => unknown>(func: T, limit: number): (...args: Parameters<T>) => void;
+
+declare const clampDate: (d: Date, min?: Date, max?: Date) => Date;
+declare const toDateKey: (d: Date) => string;
+declare const daysGrid: (viewMonth: Date, localeCode?: string) => date_fns.EachDayOfIntervalResult<{
+    start: Date;
+    end: Date;
+}, undefined>;
+type DateLikeRange = {
+    from: Date | null;
+    to: Date | null;
+};
+declare const formatDateLocalized: (value: Date | DateLikeRange | null, opts?: {
+    locale?: string | string[];
+    includeTime?: boolean;
+}) => string;
+declare const monthsForLocale: (localeCode?: string) => string[];
+declare const weekdaysForLocale: (localeCode?: string) => string[];
+
+type FieldErrorLike = {
+    message?: string;
+} | undefined | null;
+declare const fieldErrorToProps: (error: FieldErrorLike) => {
+    error?: string;
+};
+declare const zodErrorsToSummary: (errors: Record<string, FieldErrorLike>) => {
+    id: string;
+    message: string;
+}[];
+
+export { BackToTop, type BackToTopProps, Button, type ButtonProps, type ButtonSize, type ButtonVariant, Checkbox, CheckboxGroup, type CheckboxGroupOption, type CheckboxGroupProps, type CheckboxProps, DateInput, type DateInputMode, type DateInputProps, DatePicker, type DatePickerMode, type DatePickerProps, Divider, type DividerProps, type DividerVariant, type FieldErrorLike, FileUpload, type FileUploadError, type FileUploadFile, type FileUploadIconType, type FileUploadProps, type FileUploadSize, type FileUploadVariant, Form, type FormErrorItem, FormErrorSummary, type FormErrorSummaryProps, FormField, type FormFieldProps, type FormProps, Input, type InputProps, type InputVariant, MultipleSelectionButton, type MultipleSelectionButtonProps, Pagination, type PaginationProps, QuantityInput, type QuantityInputProps, Radio, RadioGroup, type RadioGroupOption, type RadioGroupProps, type RadioProps, type RangeValue, ScalablyUIProvider, type ScalablyUIProviderProps, SearchInput, type SearchInputProps, type SearchInputVariant, Select, type SelectOption, type SelectProps, type SelectVariant, StatusBadge, type StatusBadgeProps, type StatusBadgeSize, type StatusBadgeStatus, type StatusBadgeVariant, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, TimePicker, type TimePickerProps, Toast, type ToastAction, ToastContainer, type ToastContainerProps, type ToastPosition, type ToastProps, type ToastStatus, Tooltip, type TooltipAlign, type TooltipProps, type TooltipSide, type ViewMode, ViewToggle, type ViewToggleProps, clampDate, cn, daysGrid, debounce, fieldErrorToProps, formatDateLocalized, monthsForLocale, scopeClass, throttle, toDateKey, weekdaysForLocale, zodErrorsToSummary };