@mdigital_ui/ui 0.2.5 → 0.2.7

package/dist/index.d.ts

@@ -2,9 +2,9 @@ import { ClassValue } from 'clsx';
 import * as class_variance_authority_types from 'class-variance-authority/types';
 import { VariantProps } from 'class-variance-authority';
 import * as React$1 from 'react';
-import React__default, { ReactNode, FC } from 'react';
-import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default, { ReactNode } from 'react';
 import { SwiperProps } from 'swiper/react';
+import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import { ColumnDef, Row } from '@tanstack/react-table';
 import { Command as Command$1 } from 'cmdk';
@@ -19,13 +19,13 @@ declare function cn(...inputs: ClassValue[]): string;
 /**
  * Shared icon sizes for consistent sizing across components
  * Used in Button, Input, Checkbox, Select, MultiSelect, DatePicker, TimePicker, etc.
+ * Standardized to 4-size scale: xs, sm, md, lg
  */
 declare const iconSizes: {
     readonly xs: "h-3 w-3";
     readonly sm: "h-3.5 w-3.5";
     readonly md: "h-4 w-4";
     readonly lg: "h-5 w-5";
-    readonly xl: "h-6 w-6";
 };
 /**
  * Validation status types for form components
@@ -60,7 +60,7 @@ declare function getValidationStatus(messages: StatusMessages): {
 /**
  * Shared TypeScript type definitions for the UI library
  */
-type ComponentSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+type ComponentSize = 'xs' | 'sm' | 'md' | 'lg';
 type ButtonColor$1 = 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info';
 type ComponentColor = 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info';
 type ComponentVariant = 'solid' | 'outline' | 'ghost';
@@ -96,6 +96,19 @@ interface IconProps {
     rightIcon?: React.ReactNode;
 }
 type MessagePosition = 'top' | 'bottom';
+/**
+ * Helper type to create ClassNames interfaces from element union
+ * @example type ButtonClassNames = CreateClassNames<'root' | 'icon' | 'spinner'>
+ */
+type CreateClassNames<T extends string> = Partial<Record<T, string>>;
+/**
+ * Base classNames interface - all multi-element components extend this pattern
+ * Every component has at least a 'root' element
+ */
+interface BaseClassNames {
+    /** The root/container element of the component */
+    root?: string;
+}
 
 /**
  * Color palette for component variants
@@ -200,15 +213,31 @@ declare function createGhostColorVariants(colors: readonly string[]): {
  *   compoundVariants: createAllColorVariants(buttonColors, ['solid', 'outline', 'ghost'])
  * })
  */
-declare function createAllColorVariants(colors: readonly string[], variants: Array<'default' | 'solid' | 'outline' | 'soft' | 'dashed' | 'link' | 'ghost'>): any;
 /**
- * Icon color variants mapped to component colors
- * Used by: Checkbox, Radio, and other components with colored icons
+ * Supported variant types for compound variant generation
+ */
+type StyleVariantType = 'default' | 'solid' | 'outline' | 'soft' | 'dashed' | 'link' | 'ghost';
+/**
+ * Complete color variant generator for components with multiple style variants
+ * Combines all color variant generators into a single array
+ *
+ * Returns `any[]` for CVA (class-variance-authority) compatibility:
+ * - CVA's CompoundVariant type is extremely complex and deeply nested
+ * - Using specific types causes TypeScript inference failures in consuming components
+ * - The `any` type allows CVA to properly infer variant combinations
+ * - This is the recommended approach per CVA documentation for dynamic variant generation
  *
- * Maps to Tailwind utilities: text-primary, text-secondary, etc.
- * Generated from theme variables: --color-primary, --color-secondary, etc.
+ * @param colors - Array of color names to generate variants for
+ * @param variants - Array of style variant types to generate
+ * @returns Array of compound variant objects for CVA
+ */
+declare function createAllColorVariants<V extends StyleVariantType>(colors: readonly string[], variants: V[]): any[];
+/**
+ * Text color classes for all component colors
+ * Used by: Checkbox icons, Spinner, text elements
  */
-declare const iconColorClasses: {
+declare const textColorClasses: {
+    readonly default: "text-text-primary";
     readonly primary: "text-primary";
     readonly secondary: "text-secondary";
     readonly accent: "text-accent";
@@ -218,9 +247,85 @@ declare const iconColorClasses: {
     readonly info: "text-info";
 };
 /**
- * Helper to get icon color class for a given color
+ * Background color classes for skeleton/placeholder (50% opacity)
+ * Used by: Skeleton component
+ */
+declare const bgSkeletonColorClasses: {
+    readonly default: "bg-surface";
+    readonly primary: "bg-primary/50";
+    readonly secondary: "bg-secondary/50";
+    readonly accent: "bg-accent/50";
+    readonly success: "bg-success/50";
+    readonly error: "bg-error/50";
+    readonly warning: "bg-warning/50";
+    readonly info: "bg-info/50";
+};
+/**
+ * Focus ring color classes
+ * Used by: Button, Switch, form elements
+ */
+declare const focusRingColorClasses: {
+    readonly default: "focus-visible:ring-border";
+    readonly primary: "focus-visible:ring-primary";
+    readonly secondary: "focus-visible:ring-secondary";
+    readonly accent: "focus-visible:ring-accent";
+    readonly success: "focus-visible:ring-success";
+    readonly error: "focus-visible:ring-error";
+    readonly warning: "focus-visible:ring-warning";
+    readonly info: "focus-visible:ring-info";
+};
+/**
+ * Combined background + border for checked/selected state
+ * Used by: Checkbox, Radio checked states
+ */
+declare const checkedColorClasses: {
+    readonly primary: "bg-primary border-primary";
+    readonly secondary: "bg-secondary border-secondary";
+    readonly accent: "bg-accent border-accent";
+    readonly success: "bg-success border-success";
+    readonly error: "bg-error border-error";
+    readonly warning: "bg-warning border-warning";
+    readonly info: "bg-info border-info";
+};
+/**
+ * Switch track colors (unchecked -> checked)
+ * Used by: Switch component
  */
-declare function getIconColorClass(color: ButtonColor$1): string;
+declare const switchTrackColorClasses: {
+    readonly primary: "bg-border peer-checked:bg-primary peer-focus-visible:ring-primary";
+    readonly secondary: "bg-border peer-checked:bg-secondary peer-focus-visible:ring-secondary";
+    readonly accent: "bg-border peer-checked:bg-accent peer-focus-visible:ring-accent";
+    readonly success: "bg-border peer-checked:bg-success peer-focus-visible:ring-success";
+    readonly error: "bg-border peer-checked:bg-error peer-focus-visible:ring-error";
+    readonly warning: "bg-border peer-checked:bg-warning peer-focus-visible:ring-warning";
+    readonly info: "bg-border peer-checked:bg-info peer-focus-visible:ring-info";
+};
+/**
+ * Checkbox border colors (default -> checked)
+ * Used by: Checkbox component
+ */
+declare const checkboxBorderColorClasses: {
+    readonly primary: "border-border checked:border-primary";
+    readonly secondary: "border-border checked:border-secondary";
+    readonly accent: "border-border checked:border-accent";
+    readonly success: "border-border checked:border-success";
+    readonly error: "border-border checked:border-error";
+    readonly warning: "border-border checked:border-warning";
+    readonly info: "border-border checked:border-info";
+};
+/**
+ * Radio button inset shadow colors for checked state
+ * Used by: Radio component
+ */
+declare const radioCheckedColorClasses: {
+    readonly primary: "checked:border-primary checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-primary)]";
+    readonly secondary: "checked:border-secondary checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-secondary)]";
+    readonly accent: "checked:border-accent checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-accent)]";
+    readonly success: "checked:border-success checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-success)]";
+    readonly error: "checked:border-error checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-error)]";
+    readonly warning: "checked:border-warning checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-warning)]";
+    readonly info: "checked:border-info checked:shadow-[inset_0_0_0_2px_var(--color-background),inset_0_0_0_13px_var(--color-info)]";
+};
 /**
  * Text-only color variants (no background)
  * Used by: Breadcrumbs, Text components, Labels
@@ -230,65 +335,305 @@ declare const textColorVariants: (props?: ({
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 type TextColorVariants = VariantProps<typeof textColorVariants>;
 /**
- * Standard component size scale (4 sizes)
- * Used by: Button, Input, Select, Textarea, most form components
+ * Generates compound variants for notification solid style (with foreground text)
+ * Used by: Notification, Alert components
+ *
+ * @param colors - Array of color names to generate variants for
+ * @returns Array of compound variant objects for CVA
+ */
+declare function createNotificationSolidColorVariants(colors: readonly string[]): {
+    variant: "solid";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Generates compound variants for notification outline style (border with thick left border)
+ * Used by: Notification, Alert components
+ *
+ * @param colors - Array of color names to generate variants for
+ * @returns Array of compound variant objects for CVA
  */
-declare const componentSizeVariants: {
-    readonly sm: "sm";
-    readonly md: "md";
-    readonly lg: "lg";
-    readonly xl: "xl";
-};
+declare function createNotificationOutlineColorVariants(colors: readonly string[]): {
+    variant: "outline";
+    color: ComponentColor;
+    class: string;
+}[];
 /**
- * Extended component size scale (5 sizes)
- * Used by: Components that need extra small sizing
+ * Generates compound variants for notification soft style (subtle bg with left border)
+ * Used by: Notification, Alert components
+ *
+ * @param colors - Array of color names to generate variants for
+ * @returns Array of compound variant objects for CVA
  */
-declare const extendedComponentSizeVariants: {
-    readonly xs: "xs";
-    readonly sm: "sm";
-    readonly md: "md";
-    readonly lg: "lg";
-    readonly xl: "xl";
-};
+declare function createNotificationSoftColorVariants(colors: readonly string[]): {
+    variant: "soft";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Notification variant type
+ */
+type NotificationVariantType = 'default' | 'solid' | 'outline' | 'soft';
+/**
+ * Complete notification color variant generator
+ *
+ * Returns `any[]` for CVA (class-variance-authority) compatibility.
+ * See createAllColorVariants for detailed explanation.
+ *
+ * @param colors - Array of color names to generate variants for
+ * @param variants - Array of notification variant types to generate
+ * @returns Array of compound variant objects for CVA
+ */
+declare function createNotificationColorVariants(colors: readonly string[], variants: NotificationVariantType[]): any[];
 /**
- * Common spacing values for consistent gaps, padding, and margins
- * Maps to Tailwind spacing scale
- *
- * Note: These are standard Tailwind values. For component-specific spacing,
- * use CSS custom properties defined in index.css (e.g., --button-padding-x-sm)
- */
-declare const commonSpacing: {
-    readonly '0.5': "0.125rem";
-    readonly '1': "0.25rem";
-    readonly '1.5': "0.375rem";
-    readonly '2': "0.5rem";
-    readonly '2.5': "0.625rem";
-    readonly '3': "0.75rem";
-    readonly '4': "1rem";
-    readonly '5': "1.25rem";
-    readonly '6': "1.5rem";
-    readonly '8': "2rem";
+ * Tooltip solid color classes (background with contrasting text)
+ * Used by: Tooltip component solid variant
+ */
+declare const tooltipSolidColorClasses: {
+    readonly default: "bg-text-primary text-background";
+    readonly primary: "bg-primary text-background";
+    readonly secondary: "bg-secondary text-background";
+    readonly accent: "bg-accent text-background";
+    readonly success: "bg-success text-background";
+    readonly error: "bg-error text-background";
+    readonly warning: "bg-warning text-background";
+    readonly info: "bg-info text-background";
 };
 /**
- * Accordion color style generator
- * Generates variant, color, and hover state combinations
+ * Generates compound variants for tooltip soft style
+ * Used by: Tooltip component soft variant
+ *
+ * @param colors - Array of color names to generate variants for
+ * @returns Array of compound variant objects for CVA
+ */
+declare function createTooltipSoftColorVariants(colors: readonly string[]): {
+    variant: "soft";
+    color: ComponentColor;
+    className: string;
+}[];
+/**
+ * Generates compound variants for Kbd solid style
+ * Used by: Kbd component
+ *
+ * @param colors - Array of color names to generate variants for
+ * @returns Array of compound variant objects for CVA
+ */
+declare function createKbdSolidColorVariants(colors: readonly string[]): {
+    variant: "solid";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Generates compound variants for Kbd outline style
+ * Used by: Kbd component
+ *
+ * @param colors - Array of color names to generate variants for
+ * @returns Array of compound variant objects for CVA
+ */
+declare function createKbdOutlineColorVariants(colors: readonly string[]): {
+    variant: "outline";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Generates compound variants for Kbd soft style
+ * Used by: Kbd component
+ *
+ * @param colors - Array of color names to generate variants for
+ * @returns Array of compound variant objects for CVA
+ */
+declare function createKbdSoftColorVariants(colors: readonly string[]): {
+    variant: "soft";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Kbd variant type
+ */
+type KbdVariantType = 'solid' | 'outline' | 'soft';
+/**
+ * Complete Kbd color variant generator
+ *
+ * Returns `any[]` for CVA (class-variance-authority) compatibility.
+ * See createAllColorVariants for detailed explanation.
+ *
+ * @param colors - Array of color names to generate variants for
+ * @param variants - Array of kbd variant types to generate
+ * @returns Array of compound variant objects for CVA
+ */
+declare function createKbdColorVariants(colors: readonly string[], variants: KbdVariantType[]): any[];
+/**
+ * Generates compound variants for Popover default style
+ * Used by: Popover component
+ *
+ * @param colors - Array of color names to generate variants for
+ * @returns Array of compound variant objects for CVA
+ */
+declare function createPopoverDefaultColorVariants(colors: readonly string[]): {
+    variant: "default";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Generates compound variants for Popover solid style
+ * Used by: Popover component
+ *
+ * @param colors - Array of color names to generate variants for
+ * @returns Array of compound variant objects for CVA
+ */
+declare function createPopoverSolidColorVariants(colors: readonly string[]): {
+    variant: "solid";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Generates compound variants for Popover soft style (with backdrop blur)
+ * Used by: Popover component
+ *
+ * @param colors - Array of color names to generate variants for
+ * @returns Array of compound variant objects for CVA
+ */
+declare function createPopoverSoftColorVariants(colors: readonly string[]): {
+    variant: "soft";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Popover variant type
+ */
+type PopoverVariantType = 'default' | 'solid' | 'soft';
+/**
+ * Complete Popover color variant generator
+ *
+ * Returns `any[]` for CVA (class-variance-authority) compatibility.
+ * See createAllColorVariants for detailed explanation.
+ *
+ * @param colors - Array of color names to generate variants for
+ * @param variants - Array of popover variant types to generate
+ * @returns Array of compound variant objects for CVA
+ */
+declare function createPopoverColorVariants(colors: readonly string[], variants: PopoverVariantType[]): any[];
+
+/**
+ * Theme Types
+ * TypeScript types for theme management
+ */
+type Theme = 'light' | 'dark' | 'system';
+interface ThemeProviderProps {
+    /**
+     * The default theme to use when no preference is stored
+     * @default 'system'
+     */
+    defaultTheme?: Theme;
+    /**
+     * The localStorage key to use for persisting theme preference
+     * @default 'ui-theme'
+     */
+    storageKey?: string;
+    /**
+     * Children components
+     */
+    children: React.ReactNode;
+    /**
+     * Disable transitions when theme changes
+     * @default false
+     */
+    disableTransitionOnChange?: boolean;
+    /**
+     * Enable strict mode (throw errors on missing context)
+     * @default false
+     */
+    enableStrictMode?: boolean;
+}
+interface ThemeProviderState {
+    /**
+     * The current theme setting ('light', 'dark', or 'system')
+     */
+    theme: Theme;
+    /**
+     * The resolved theme ('light' or 'dark')
+     * When theme is 'system', this will be the actual OS preference
+     */
+    resolvedTheme: 'light' | 'dark';
+    /**
+     * Update the theme
+     */
+    setTheme: (theme: Theme) => void;
+}
+
+/**
+ * ThemeProvider
+ * Production-ready theme management with React context
+ */
+
+/**
+ * ThemeProvider Component
+ * Provides theme context and manages theme state with persistence
+ */
+declare const ThemeProvider: React__default.FC<ThemeProviderProps>;
+/**
+ * useTheme Hook
+ * Access theme context from any component
+ *
+ * @throws {Error} When used outside ThemeProvider (in strict mode)
+ * @returns {ThemeProviderState} Theme state and setTheme function
+ *
+ * @example
+ * ```tsx
+ * const { theme, setTheme, resolvedTheme } = useTheme();
+ *
+ * // Current theme setting
+ * console.log(theme); // 'light' | 'dark' | 'system'
+ *
+ * // Resolved theme (actual theme being displayed)
+ * console.log(resolvedTheme); // 'light' | 'dark'
+ *
+ * // Change theme
+ * setTheme('dark');
+ * ```
+ */
+declare const useTheme: () => ThemeProviderState;
+/**
+ * Script to inject in <head> for SSR apps to prevent flash
+ * Place this in your HTML template before any styles
  *
- * @param color - Component color
- * @param variant - Style variant (default, solid, soft)
- * @returns Combined class string
+ * @example
+ * ```html
+ * <script dangerouslySetInnerHTML={{ __html: themeScript }} />
+ * ```
  */
-declare function getAccordionColorClass(color: ComponentColor, variant: 'default' | 'solid' | 'soft'): string;
+declare const themeScript = "\n(function() {\n  try {\n    var storageKey = 'ui-theme';\n    var theme = localStorage.getItem(storageKey) || 'system';\n    var resolved = theme;\n\n    if (theme === 'system') {\n      resolved = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';\n    }\n\n    document.documentElement.setAttribute('data-theme', resolved);\n    document.documentElement.classList.add(resolved);\n  } catch (e) {}\n})();\n";
+
 /**
- * Checkbox/Radio indeterminate/checked state color generator
- * Generates background color for checked state with proper contrast
+ * Theme Presets
+ *
+ * Pre-configured color schemes for the UIKit
+ * Each preset includes light and dark mode variants
+ *
+ * Usage:
+ * ```tsx
+ * <div data-theme="corporate">
+ *   // Your components will use the corporate color scheme
+ * </div>
+ * ```
  *
- * @param color - Component color
- * @returns Background class string
+ * Available presets:
+ * - corporate: Professional blue/gray palette for business applications
+ * - vibrant: Bold, saturated colors with purple/pink/teal
+ * - minimal: Muted, low-contrast palette with subtle accents
  */
-declare function getCheckboxColorClass(color: ButtonColor$1): string;
+declare const themePresets: readonly ["corporate", "vibrant", "minimal"];
+type ThemePreset = typeof themePresets[number];
 
-type AccordionVariant = 'default' | 'solid' | 'soft';
-type AccordionSize = 'xs' | 'sm' | 'md' | 'lg';
+type AccordionVariant = "default" | "solid" | "soft" | "bordered" | "splitted";
+type AccordionSize = "xs" | "sm" | "md" | "lg";
+interface AccordionClassNames {
+    root?: string;
+    item?: string;
+    trigger?: string;
+    content?: string;
+    icon?: string;
+}
 interface AccordionItem {
     /**
      * Unique key for the accordion item
@@ -307,9 +652,17 @@ interface AccordionItem {
      */
     disabled?: boolean;
     /**
-     * Custom icon for the item
+     * Custom icon for the item (displayed before title)
      */
     icon?: React.ReactNode;
+    /**
+     * Subtitle displayed below title
+     */
+    subtitle?: React.ReactNode;
+    /**
+     * Extra content displayed on the right side of the header (before expand icon)
+     */
+    extra?: React.ReactNode;
 }
 interface AccordionProps {
     /**
@@ -318,14 +671,22 @@ interface AccordionProps {
     items: AccordionItem[];
     /**
      * Theme color
+     * @default 'default'
      */
     color?: ComponentColor;
     /**
-     * Size variant (accordion only supports xs, sm, md, lg)
+     * Size variant
+     * @default 'md'
      */
     size?: AccordionSize;
     /**
      * Visual style variant
+     * - default: subtle background on hover
+     * - solid: filled background
+     * - soft: light colored background
+     * - bordered: outline border only
+     * - splitted: separated cards with gap
+     * @default 'default'
      */
     variant?: AccordionVariant;
     /**
@@ -342,118 +703,489 @@ interface AccordionProps {
     onChange?: (activeKey: string | string[]) => void;
     /**
      * Allow multiple panels to be open simultaneously
+     * @default false
      */
     multiple?: boolean;
+    /**
+     * Custom expand/collapse icon or false to hide
+     */
+    expandIcon?: React.ReactNode | ((isExpanded: boolean) => React.ReactNode) | false;
+    /**
+     * Position of expand icon
+     * @default 'right'
+     */
+    expandIconPosition?: "left" | "right";
+    /**
+     * Whether at least one panel must remain open
+     * Only works when multiple is false
+     * @default false
+     */
+    collapsible?: boolean;
+    /**
+     * Unmount content when panel is collapsed (for performance)
+     * @default false
+     */
+    destroyOnClose?: boolean;
+    /**
+     * Show divider between items (only for non-splitted variants)
+     * @default true
+     */
+    showDivider?: boolean;
     /**
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Additional CSS class for each item
+     */
+    itemClassName?: string;
+    /**
+     * Custom class names for different parts of the accordion
+     */
+    classNames?: AccordionClassNames;
+    /**
+     * Reference to the accordion container
+     */
+    ref?: React.Ref<HTMLDivElement>;
 }
 
 declare const Accordion: React__default.NamedExoticComponent<AccordionProps>;
 
-type BadgeVariant = 'default' | 'solid' | 'outline' | 'soft';
-type BadgeColor = ComponentColor;
-type BadgeSize = Exclude<ComponentSize, 'xl'>;
-interface BadgeProps {
-    children?: React.ReactNode;
-    variant?: BadgeVariant;
-    color?: BadgeColor;
-    size?: BadgeSize;
-    dot?: boolean;
-    count?: number;
-    showZero?: boolean;
-    className?: string;
+/**
+ * Size variants for Avatar component
+ */
+type AvatarSize = ComponentSize;
+/**
+ * Shape variants for Avatar component
+ */
+type AvatarShape = "circle" | "square";
+/**
+ * Status indicator states for Avatar
+ */
+type AvatarStatus = "online" | "offline" | "away" | "busy";
+/**
+ * Color variants for Avatar background (used with fallback/initials)
+ */
+type AvatarColor = "default" | "primary" | "secondary" | "accent" | "success" | "error" | "warning" | "info";
+interface AvatarClassNames {
+    root?: string;
+    image?: string;
+    fallback?: string;
+    status?: string;
 }
-
-declare const Badge: React__default.NamedExoticComponent<BadgeProps>;
-
-type BreadcrumbsColor = 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info';
-type BreadcrumbsSize = 'xs' | 'sm' | 'md' | 'lg';
-interface BreadcrumbItemData {
+interface AvatarGroupClassNames {
+    root?: string;
+    overflow?: string;
+}
+interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * Label to display for the breadcrumb item
+     * Image source URL
      */
-    label: string;
+    src?: string;
     /**
-     * URL for the breadcrumb link
+     * Alternative text for the image
      */
-    href?: string;
+    alt?: string;
     /**
-     * Click handler (used instead of href for custom navigation)
+     * Fallback text (initials) when image fails to load
+     * If not provided, will try to generate from `name` prop
      */
-    onClick?: () => void;
+    fallback?: string;
     /**
-     * Icon to display before the label
+     * User's name - used to auto-generate initials if fallback not provided
      */
-    leftIcon?: ReactNode;
+    name?: string;
     /**
-     * Icon to display after the label
+     * Avatar size
+     * @default 'md'
      */
-    rightIcon?: ReactNode;
+    size?: AvatarSize;
     /**
-     * Whether this item should be shown as an ellipsis dropdown
+     * Avatar shape
+     * @default 'circle'
      */
-    ellipsis?: boolean;
+    shape?: AvatarShape;
     /**
-     * Orientation of ellipsis icon
+     * Status indicator
      */
-    ellipsisOrientation?: 'horizontal' | 'vertical';
+    status?: AvatarStatus;
     /**
-     * Items to show in the ellipsis dropdown
+     * Background color for fallback/initials
+     * @default 'default'
      */
-    ellipsisItems?: Array<{
-        label: string;
-        href?: string;
-        onClick?: () => void;
-    }>;
-}
-interface BreadcrumbProps {
+    color?: AvatarColor;
     /**
-     * Breadcrumb items to render
+     * Show border/ring around avatar
+     * @default false
      */
-    items?: BreadcrumbItemData[];
+    bordered?: boolean;
     /**
-     * Manual children (alternative to items prop)
+     * Custom icon to show as fallback instead of initials
      */
-    children?: ReactNode;
+    icon?: React.ReactNode;
     /**
-     * Theme color
+     * Badge content (number, icon, or custom element)
+     * Displayed at top-right corner
      */
-    color?: BreadcrumbsColor;
+    badge?: React.ReactNode;
     /**
-     * Size variant
+     * Whether avatar is in disabled state
+     * @default false
      */
-    size?: BreadcrumbsSize;
+    disabled?: boolean;
     /**
-     * Custom separator element
+     * Callback when image fails to load
      */
-    separator?: ReactNode;
+    onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
     /**
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for component parts
+     */
+    classNames?: AvatarClassNames;
+    /**
+     * Reference to the avatar element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+}
+interface AvatarGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Avatar children
+     */
+    children: React.ReactNode;
+    /**
+     * Maximum number of avatars to display
+     */
+    max?: number;
+    /**
+     * Size for all avatars in group
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * Shape for all avatars in group
+     * @default 'circle'
+     */
+    shape?: AvatarShape;
+    /**
+     * Show total count instead of remaining count
+     * @default false
+     */
+    showTotal?: boolean;
+    /**
+     * Custom render function for surplus count
+     */
+    renderSurplus?: (surplus: number) => React.ReactNode;
+    /**
+     * Whether avatars are bordered
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Custom class names for component parts
+     */
+    classNames?: AvatarGroupClassNames;
+    /**
+     * Reference to the group element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+}
+
+/**
+ * Avatar Component
+ */
+declare const Avatar: React__default.NamedExoticComponent<AvatarProps>;
+/**
+ * AvatarGroup Component
+ */
+declare const AvatarGroup: React__default.NamedExoticComponent<AvatarGroupProps>;
+
+type BadgeVariant = 'default' | 'solid' | 'outline' | 'soft';
+type BadgeColor = ComponentColor;
+type BadgeSize = Exclude<ComponentSize, 'xl'>;
+type BadgeShape = 'rounded' | 'pill' | 'circle';
+type BadgePlacement = 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+interface BadgeProps {
+    /**
+     * Content to wrap with the badge (when provided, badge floats over it)
+     */
+    children?: React.ReactNode;
+    /**
+     * Visual style variant
+     * @default 'solid'
+     */
+    variant?: BadgeVariant;
+    /**
+     * Theme color
+     * @default 'primary'
+     */
+    color?: BadgeColor;
+    /**
+     * Badge size
+     * @default 'sm'
+     */
+    size?: BadgeSize;
+    /**
+     * Badge shape
+     * @default 'rounded'
+     */
+    shape?: BadgeShape;
+    /**
+     * Display as a dot indicator instead of content
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * Numeric count to display
+     */
+    count?: number;
+    /**
+     * Maximum count to show before displaying overflow indicator
+     * @default 99
+     */
+    maxCount?: number;
+    /**
+     * Whether to show badge when count is 0
+     * @default false
+     */
+    showZero?: boolean;
+    /**
+     * Icon to display in the badge (before text)
+     */
+    icon?: React.ReactNode;
+    /**
+     * Placement of floating badge relative to children
+     * @default 'top-right'
+     */
+    placement?: BadgePlacement;
+    /**
+     * Custom offset for floating badge position [x, y] in pixels
+     * Positive values move towards center, negative values move away
+     */
+    offset?: [number, number];
+    /**
+     * Show pulsing animation (useful for notification indicators)
+     * @default false
+     */
+    processing?: boolean;
+    /**
+     * Hide the badge visually while keeping it in the DOM
+     * @default false
+     */
+    invisible?: boolean;
+    /**
+     * Force standalone rendering even when children are present
+     * @default false
+     */
+    standalone?: boolean;
+    /**
+     * Badge content (alternative to count, renders custom content)
+     */
+    content?: React.ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Additional CSS class for the badge wrapper (when floating)
+     */
+    wrapperClassName?: string;
+    /**
+     * Reference to the badge element
+     */
+    ref?: React.Ref<HTMLSpanElement>;
+}
+
+/**
+ * Badge Component
+ *
+ * A versatile badge component for displaying counts, status indicators, or labels.
+ * Can be used standalone or as a floating indicator over other elements.
+ *
+ * @example
+ * // Standalone badge
+ * <Badge>New</Badge>
+ *
+ * @example
+ * // Badge with count floating over an icon
+ * <Badge count={5}>
+ *   <BellIcon />
+ * </Badge>
+ *
+ * @example
+ * // Dot indicator with pulse
+ * <Badge dot processing color="success">
+ *   <Avatar />
+ * </Badge>
+ */
+declare const Badge: React__default.NamedExoticComponent<BadgeProps>;
+
+type BreadcrumbsColor = 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info';
+type BreadcrumbsSize = 'xs' | 'sm' | 'md' | 'lg';
+interface BreadcrumbsClassNames {
+    root?: string;
+    list?: string;
+    item?: string;
+    link?: string;
+    separator?: string;
+    current?: string;
+}
+interface BreadcrumbItemData {
+    /**
+     * Label to display for the breadcrumb item
+     */
+    label: string;
+    /**
+     * URL for the breadcrumb link
+     */
+    href?: string;
+    /**
+     * Click handler (used instead of href for custom navigation)
+     */
+    onClick?: () => void;
+    /**
+     * Icon to display before the label
+     */
+    leftIcon?: ReactNode;
+    /**
+     * Icon to display after the label
+     */
+    rightIcon?: ReactNode;
+    /**
+     * Whether this item should be shown as an ellipsis dropdown
+     */
+    ellipsis?: boolean;
+    /**
+     * Orientation of ellipsis icon
+     */
+    ellipsisOrientation?: 'horizontal' | 'vertical';
+    /**
+     * Items to show in the ellipsis dropdown
+     */
+    ellipsisItems?: Array<{
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    }>;
+}
+interface BreadcrumbProps {
+    /**
+     * Breadcrumb items to render
+     */
+    items?: BreadcrumbItemData[];
+    /**
+     * Manual children (alternative to items prop)
+     */
+    children?: ReactNode;
+    /**
+     * Theme color
+     */
+    color?: BreadcrumbsColor;
+    /**
+     * Size variant
+     */
+    size?: BreadcrumbsSize;
+    /**
+     * Custom separator element
+     */
+    separator?: ReactNode;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Custom class names for different elements
+     */
+    classNames?: BreadcrumbsClassNames;
 }
 
 declare const Breadcrumb: React__default.NamedExoticComponent<BreadcrumbProps>;
 
-type ButtonVariant = ComponentVariantExtended;
+type ButtonVariant = ComponentVariantExtended | "soft";
 type ButtonColor = ButtonColor$1;
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
+type ButtonSize = "xs" | "sm" | "md" | "lg";
+type ButtonShape = "rounded" | "pill" | "square";
+interface ButtonClassNames {
+    root?: string;
+    icon?: string;
+    spinner?: string;
+    content?: string;
+}
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+    /**
+     * Visual style variant
+     * @default 'solid'
+     */
     variant?: ButtonVariant;
+    /**
+     * Theme color
+     * @default 'primary'
+     */
     color?: ButtonColor;
+    /**
+     * Button size
+     * @default 'md'
+     */
     size?: ButtonSize;
+    /**
+     * Button shape
+     * @default 'rounded'
+     */
+    shape?: ButtonShape;
+    /**
+     * Whether button is in loading state
+     * @default false
+     */
     loading?: boolean;
+    /**
+     * Text to display while loading (replaces children)
+     */
     loadingText?: string;
+    /**
+     * Position of loading spinner when loadingText is provided
+     * @default 'left'
+     */
+    loadingPosition?: "left" | "right";
+    /**
+     * Icon to display on the left side
+     */
     leftIcon?: React.ReactNode;
+    /**
+     * Icon to display on the right side
+     */
     rightIcon?: React.ReactNode;
+    /**
+     * Whether button takes full width of container
+     * @default false
+     */
     fullWidth?: boolean;
+    /**
+     * Whether this is an icon-only button (square aspect ratio)
+     * @default false
+     */
+    iconOnly?: boolean;
+    /**
+     * Custom class names for component parts
+     */
+    classNames?: ButtonClassNames;
+    /**
+     * Reference to the button element
+     */
     ref?: React.Ref<HTMLButtonElement>;
 }
 
 declare const Button: React__default.NamedExoticComponent<ButtonProps>;
 
+interface ButtonGroupClassNames {
+    root?: string;
+    button?: string;
+}
 interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Children elements (typically Button components)
@@ -461,45 +1193,310 @@ interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     children: React.ReactNode;
     /**
      * Display buttons vertically instead of horizontally
+     * @default false
      */
     vertical?: boolean;
     /**
-     * Add spacing between buttons
+     * Whether buttons are visually attached (connected) or separated
+     * When true, buttons share borders and have no gap
+     * When false, buttons are separated with a gap
+     * @default true
+     */
+    attached?: boolean;
+    /**
+     * Gap size between buttons when not attached
+     * @default 'md'
      */
-    spacing?: boolean;
+    gap?: 'sm' | 'md' | 'lg';
     /**
-     * Make buttons take full width
+     * Make buttons take full width of container
+     * @default false
      */
     fullWidth?: boolean;
+    /**
+     * Size to apply to all child buttons
+     * Individual button size props will override this
+     */
+    size?: ButtonSize;
+    /**
+     * Variant to apply to all child buttons
+     * Individual button variant props will override this
+     */
+    variant?: ButtonVariant;
+    /**
+     * Color to apply to all child buttons
+     * Individual button color props will override this
+     */
+    color?: ButtonColor;
+    /**
+     * Disable all buttons in the group
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Accessible label for the button group
+     */
+    'aria-label'?: string;
     /**
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for component parts
+     */
+    classNames?: ButtonGroupClassNames;
     /**
      * Reference to the div element
      */
     ref?: React.Ref<HTMLDivElement>;
 }
 
+/**
+ * ButtonGroup Component
+ *
+ * Groups multiple buttons together with consistent styling and spacing.
+ * Can propagate common props (size, variant, color, disabled) to all child buttons.
+ *
+ * @example
+ * // Basic horizontal group
+ * <ButtonGroup>
+ *   <Button>Save</Button>
+ *   <Button>Cancel</Button>
+ * </ButtonGroup>
+ *
+ * @example
+ * // Vertical group with uniform styling
+ * <ButtonGroup vertical variant="outline" size="sm">
+ *   <Button>Option 1</Button>
+ *   <Button>Option 2</Button>
+ * </ButtonGroup>
+ *
+ * @example
+ * // Separated buttons with gap
+ * <ButtonGroup attached={false} gap="md">
+ *   <Button>A</Button>
+ *   <Button>B</Button>
+ *   <Button>C</Button>
+ * </ButtonGroup>
+ */
 declare const ButtonGroup: React__default.NamedExoticComponent<ButtonGroupProps>;
 
-declare const cardVariants: (props?: ({
-    variant?: "default" | "ghost" | "destructive" | null | undefined;
-} & class_variance_authority_types.ClassProp) | undefined) => string;
-interface CardProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof cardVariants> {
-    ref?: React$1.Ref<HTMLDivElement>;
+type CardVariant = 'default' | 'solid' | 'outline' | 'soft' | 'ghost' | 'elevated';
+type CardColor = 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info';
+type CardSize = 'xs' | 'sm' | 'md' | 'lg';
+type CardShadow = 'none' | 'sm' | 'md' | 'lg';
+interface CardClassNames {
+    root?: string;
+    header?: string;
+    title?: string;
+    description?: string;
+    content?: string;
+    footer?: string;
+    action?: string;
+    image?: string;
+}
+interface CardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Visual style variant
+     * @default 'default'
+     */
+    variant?: CardVariant;
+    /**
+     * Semantic color for the card border/accent
+     * @default 'default'
+     */
+    color?: CardColor;
+    /**
+     * Card size affecting padding
+     * @default 'md'
+     */
+    size?: CardSize;
+    /**
+     * Shadow/elevation level
+     * @default 'none'
+     */
+    shadow?: CardShadow;
+    /**
+     * Show hover effect on the card
+     * @default false
+     */
+    hoverable?: boolean;
+    /**
+     * Make card clickable with proper accessibility
+     * When true, card becomes a button element
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Show border around the card
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Show loading skeleton state
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Custom class names for card sub-components
+     */
+    classNames?: CardClassNames;
+    /**
+     * Reference to the card element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+}
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Reference to the header element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+}
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
+    /**
+     * HTML heading level
+     * @default 3
+     */
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+    /**
+     * Reference to the title element
+     */
+    ref?: React.Ref<HTMLHeadingElement>;
+}
+interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * Reference to the description element
+     */
+    ref?: React.Ref<HTMLParagraphElement>;
+}
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Reference to the content element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+}
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Reference to the footer element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+}
+interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Reference to the action element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+}
+interface CardImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
+    /**
+     * Image source URL
+     */
+    src: string;
+    /**
+     * Alt text for accessibility
+     */
+    alt: string;
+    /**
+     * Position of the image in the card
+     * @default 'top'
+     */
+    position?: 'top' | 'bottom';
+    /**
+     * Aspect ratio of the image container
+     * @default 'video' (16:9)
+     */
+    aspectRatio?: 'square' | 'video' | 'wide' | 'auto';
+    /**
+     * How the image should fit its container
+     * @default 'cover'
+     */
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none';
+    /**
+     * Reference to the image element
+     */
+    ref?: React.Ref<HTMLImageElement>;
 }
-declare const Card: React$1.NamedExoticComponent<CardProps>;
 
+declare const CardWithSubComponents: React__default.NamedExoticComponent<CardProps> & {
+    Header: React__default.NamedExoticComponent<CardHeaderProps>;
+    Footer: React__default.NamedExoticComponent<CardFooterProps>;
+    Title: React__default.NamedExoticComponent<CardTitleProps>;
+    Description: React__default.NamedExoticComponent<CardDescriptionProps>;
+    Content: React__default.NamedExoticComponent<CardContentProps>;
+    Action: React__default.NamedExoticComponent<CardActionProps>;
+    Image: React__default.NamedExoticComponent<CardImageProps>;
+};
+
+interface CarouselClassNames {
+    /**
+     * Class name for the root container
+     */
+    root?: string;
+    /**
+     * Class name for the wrapper element
+     */
+    wrapper?: string;
+    /**
+     * Class name for individual slides
+     */
+    slide?: string;
+    /**
+     * Class name for the navigation container
+     */
+    navigation?: string;
+    /**
+     * Class name for navigation buttons
+     */
+    navButton?: string;
+    /**
+     * Class name for the pagination container
+     */
+    pagination?: string;
+    /**
+     * Class name for pagination dots
+     */
+    dot?: string;
+    /**
+     * Class name for active pagination dot
+     */
+    dotActive?: string;
+}
 interface CarouselProps extends SwiperProps {
     withArrows?: boolean;
     withPagination?: boolean;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
+    /**
+     * ClassNames for component parts
+     */
+    classNames?: CarouselClassNames;
 }
-declare function Carousel({ withArrows, withPagination, children, loop, className, modules, ...props }: CarouselProps): react_jsx_runtime.JSX.Element;
+declare const Carousel: React__default.NamedExoticComponent<CarouselProps>;
 
 type CascaderSize = 'xs' | 'sm' | 'md' | 'lg';
-type CascaderVariant = 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info';
+type CascaderExpandTrigger = 'click' | 'hover';
+type CascaderPlacement = 'bottomLeft' | 'bottomRight' | 'topLeft' | 'topRight';
+interface CascaderClassNames {
+    /**
+     * Class for root container
+     */
+    root?: string;
+    /**
+     * Class for trigger element
+     */
+    trigger?: string;
+    /**
+     * Class for dropdown container
+     */
+    dropdown?: string;
+    /**
+     * Class for menu panel
+     */
+    menu?: string;
+    /**
+     * Class for individual option
+     */
+    option?: string;
+}
 interface CascaderOption {
     /**
      * Display label for the option
@@ -517,6 +1514,16 @@ interface CascaderOption {
      * Whether the option is disabled
      */
     disabled?: boolean;
+    /**
+     * Whether this node is a leaf (no children to load)
+     * Used with loadData for async loading
+     */
+    isLeaf?: boolean;
+    /**
+     * Whether children are currently loading
+     * @internal
+     */
+    loading?: boolean;
 }
 interface CascaderProps {
     /**
@@ -535,8 +1542,13 @@ interface CascaderProps {
      * Callback when value changes
      */
     onChange?: (value: string[] | string[][], selectedOptions: CascaderOption[] | CascaderOption[][]) => void;
+    /**
+     * Callback when selection is complete (after closing in single mode)
+     */
+    onSelect?: (value: string[], selectedOptions: CascaderOption[]) => void;
     /**
      * Placeholder text
+     * @default 'Please select'
      */
     placeholder?: string;
     /**
@@ -549,30 +1561,32 @@ interface CascaderProps {
     helperText?: string;
     /**
      * Position of validation/helper messages
+     * @default 'bottom'
      */
     messagePosition?: MessagePosition;
     /**
      * Theme color
+     * @default 'default'
      */
     color?: ComponentColor;
     /**
-     * Visual variant
-     */
-    variant?: CascaderVariant;
-    /**
-     * Size variant (cascader only supports xs, sm, md, lg)
+     * Size variant
+     * @default 'md'
      */
     size?: CascaderSize;
     /**
-     * Dropdown position relative to trigger
+     * Dropdown placement relative to trigger
+     * @default 'bottomLeft'
      */
-    position?: 'left' | 'right';
+    placement?: CascaderPlacement;
     /**
      * Whether cascader is disabled
+     * @default false
      */
     disabled?: boolean;
     /**
      * Whether cascader is in loading state
+     * @default false
      */
     loading?: boolean;
     /**
@@ -593,38 +1607,122 @@ interface CascaderProps {
     success?: string;
     /**
      * Whether cascader should take full width
+     * @default true
      */
     fullWidth?: boolean;
     /**
-     * Whether to expand on hover instead of click
+     * How to expand child options
+     * @default 'click'
      */
-    hover?: boolean;
+    expandTrigger?: CascaderExpandTrigger;
     /**
      * Enable multiple selection mode
+     * @default false
      */
     multiple?: boolean;
     /**
-     * Maximum number of chips visible in multiple mode
+     * Maximum number of tags visible in multiple mode
+     * @default 3
      */
-    maxChipsVisible?: number;
+    maxTagCount?: number;
+    /**
+     * Show clear button when value is selected
+     * @default true
+     */
+    clearable?: boolean;
+    /**
+     * Show full path in selection display
+     * @default true
+     */
+    showPath?: boolean;
+    /**
+     * Path separator for display
+     * @default ' / '
+     */
+    pathSeparator?: string;
+    /**
+     * Allow selecting parent nodes (not just leaves)
+     * @default false
+     */
+    changeOnSelect?: boolean;
+    /**
+     * Load data asynchronously
+     * Called when expanding a node that has no children and isLeaf is not true
+     */
+    loadData?: (selectedOptions: CascaderOption[]) => Promise<void>;
     /**
      * Custom render function for display value
      */
-    displayRender?: (labels: string[] | string[][]) => React.ReactNode;
+    displayRender?: (labels: string[] | string[][], selectedOptions?: CascaderOption[] | CascaderOption[][]) => React.ReactNode;
+    /**
+     * Custom render function for tags in multiple mode
+     */
+    tagRender?: (props: {
+        label: string;
+        value: string[];
+        closable: boolean;
+        onClose: () => void;
+    }) => React.ReactNode;
+    /**
+     * Content to show when options array is empty
+     * @default 'No options'
+     */
+    emptyContent?: React.ReactNode;
     /**
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom classes for different parts of the cascader
+     */
+    classNames?: CascaderClassNames;
     /**
      * Whether the field is required
+     * @default false
      */
     required?: boolean;
+    /**
+     * Reference to the cascader container element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Callback when dropdown open state changes
+     */
+    onOpenChange?: (open: boolean) => void;
 }
 
+/**
+ * Cascader Component
+ *
+ * A hierarchical selection component for selecting from nested options.
+ *
+ * @example
+ * // Basic usage
+ * <Cascader
+ *   options={options}
+ *   placeholder="Select location"
+ *   onChange={(value, options) => console.log(value)}
+ * />
+ *
+ * @example
+ * // Multiple selection
+ * <Cascader
+ *   options={options}
+ *   multiple
+ *   placeholder="Select categories"
+ * />
+ */
 declare const Cascader: React__default.NamedExoticComponent<CascaderProps>;
 
-type CheckboxColor = 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info';
+type CheckboxColor = ButtonColor$1;
 type CheckboxSize = 'xs' | 'sm' | 'md' | 'lg';
+interface CheckboxClassNames {
+    root?: string;
+    checkbox?: string;
+    indicator?: string;
+    label?: string;
+    description?: string;
+}
 interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     color?: CheckboxColor;
     size?: CheckboxSize;
@@ -634,10 +1732,19 @@ interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>
     indeterminate?: boolean;
     ref?: React.Ref<HTMLInputElement>;
     labelClassName?: string;
+    classNames?: CheckboxClassNames;
 }
 
 declare const Checkbox: React__default.NamedExoticComponent<CheckboxProps>;
 
+interface CheckboxGroupClassNames {
+    root?: string;
+    label?: string;
+    group?: string;
+    item?: string;
+    helper?: string;
+    error?: string;
+}
 interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Children elements (typically Checkbox components)
@@ -663,6 +1770,10 @@ interface CheckboxGroupProps extends React.HTMLAttributes<HTMLDivElement> {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for different parts of the component
+     */
+    classNames?: CheckboxGroupClassNames;
     /**
      * Reference to the div element
      */
@@ -673,6 +1784,20 @@ declare const CheckboxGroup: React__default.NamedExoticComponent<CheckboxGroupPr
 
 type ClipboardVariant = 'default' | 'solid' | 'soft';
 type ClipboardSize = 'xs' | 'sm' | 'md' | 'lg';
+interface ClipboardClassNames {
+    /**
+     * Class for root container
+     */
+    root?: string;
+    /**
+     * Class for input display element
+     */
+    input?: string;
+    /**
+     * Class for copy button/icon
+     */
+    button?: string;
+}
 interface ClipboardProps {
     /**
      * Text value to copy to clipboard
@@ -698,6 +1823,11 @@ interface ClipboardProps {
      * Duration to show success icon (in milliseconds)
      */
     successDuration?: number;
+    /**
+     * Whether the clipboard is disabled
+     * @default false
+     */
+    disabled?: boolean;
     /**
      * Callback when text is copied
      */
@@ -706,12 +1836,26 @@ interface ClipboardProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom classes for different parts of the clipboard
+     */
+    classNames?: ClipboardClassNames;
+    /**
+     * Reference to the element
+     */
+    ref?: React.Ref<HTMLDivElement>;
 }
 
 declare const Clipboard: React__default.NamedExoticComponent<ClipboardProps>;
 
 type CollapseVariant = 'default' | 'solid' | 'soft';
 type CollapseSize = 'xs' | 'sm' | 'md' | 'lg';
+interface CollapseClassNames {
+    root?: string;
+    header?: string;
+    content?: string;
+    icon?: string;
+}
 interface CollapseProps {
     /**
      * Title displayed in the header
@@ -732,30 +1876,164 @@ interface CollapseProps {
     /**
      * Visual style variant
      */
-    variant?: CollapseVariant;
+    variant?: CollapseVariant;
+    /**
+     * Default open state (uncontrolled)
+     */
+    defaultOpen?: boolean;
+    /**
+     * Controlled open state
+     */
+    open?: boolean;
+    /**
+     * Callback when open state changes
+     */
+    onChange?: (open: boolean) => void;
+    /**
+     * Whether collapse is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Custom class names for different parts of the collapse
+     */
+    classNames?: CollapseClassNames;
+    /**
+     * Reference to the element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+}
+
+declare const Collapse: React__default.NamedExoticComponent<CollapseProps>;
+
+/**
+ * ClassNames for ContextMenu component parts
+ */
+interface ContextMenuClassNames {
+    /**
+     * Class name for the root container
+     */
+    root?: string;
+    /**
+     * Class name for the menu content
+     */
+    content?: string;
     /**
-     * Default open state (uncontrolled)
+     * Class name for individual menu items
      */
-    defaultOpen?: boolean;
+    item?: string;
     /**
-     * Controlled open state
+     * Class name for item icons
      */
-    open?: boolean;
+    itemIcon?: string;
     /**
-     * Callback when open state changes
+     * Class name for item labels
      */
-    onChange?: (open: boolean) => void;
+    itemLabel?: string;
     /**
-     * Whether collapse is disabled
+     * Class name for dividers
      */
-    disabled?: boolean;
+    divider?: string;
     /**
-     * Additional CSS class
+     * Class name for submenu containers
      */
+    submenu?: string;
+}
+/**
+ * Context menu item
+ */
+interface ContextMenuItem {
+    /** Unique item key */
+    key: string;
+    /** Item text (required if not separator) */
+    label?: React__default.ReactNode;
+    /** Icon displayed to the left of the text */
+    icon?: React__default.ReactNode;
+    /** Keyboard shortcut (displayed on the right) */
+    shortcut?: string;
+    /** Whether the item is disabled */
+    disabled?: boolean;
+    /** Click handler */
+    onClick?: () => void;
+    /** Nested items (submenu) */
+    children?: ContextMenuItem[];
+    /** Separator (if true, other properties are ignored) */
+    separator?: boolean;
+}
+/**
+ * ContextMenu component props
+ */
+interface ContextMenuProps {
+    /** Child elements that will trigger the context menu */
+    children: React__default.ReactNode;
+    /** Menu items */
+    items: ContextMenuItem[];
+    /** Additional CSS class */
     className?: string;
+    /** ClassNames for component parts */
+    classNames?: ContextMenuClassNames;
+    /** Whether to disable the context menu */
+    disabled?: boolean;
+    /** Handler called when menu opens or closes */
+    onOpenChange?: (open: boolean) => void;
+    /** Controlled open state */
+    open?: boolean;
 }
 
-declare const Collapse: React__default.NamedExoticComponent<CollapseProps>;
+/**
+ * ContextMenu component based on Popover
+ *
+ * A context menu that opens on right-click.
+ * Uses @radix-ui/react-popover for positioning and state management.
+ * Supports nested submenus, separators, disabled items, and keyboard navigation.
+ *
+ * @example
+ * ```tsx
+ * import ContextMenu from '@mdigital_ui/ui/context-menu'
+ * import { Copy, Paste, Trash } from 'lucide-react'
+ *
+ * function MyComponent() {
+ *   return (
+ *     <ContextMenu
+ *       items={[
+ *         {
+ *           key: 'copy',
+ *           label: 'Copy',
+ *           icon: <Copy />,
+ *           shortcut: 'Ctrl+C',
+ *           onClick: () => console.log('Copy'),
+ *         },
+ *         {
+ *           key: 'paste',
+ *           label: 'Paste',
+ *           icon: <Paste />,
+ *           shortcut: 'Ctrl+V',
+ *           onClick: () => console.log('Paste'),
+ *         },
+ *         { key: 'sep1', separator: true },
+ *         {
+ *           key: 'delete',
+ *           label: 'Delete',
+ *           icon: <Trash />,
+ *           onClick: () => console.log('Delete'),
+ *         },
+ *       ]}
+ *     >
+ *       <div className="p-4 border">
+ *         Right click me!
+ *       </div>
+ *     </ContextMenu>
+ *   )
+ * }
+ * ```
+ */
+declare const ContextMenu: {
+    ({ children, items, className, classNames, disabled, onOpenChange, open: controlledOpen, }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 interface DescriptionsItem {
     key: string;
@@ -763,6 +2041,12 @@ interface DescriptionsItem {
     children: React.ReactNode;
     span?: number;
 }
+interface DescriptionsClassNames {
+    root?: string;
+    item?: string;
+    label?: string;
+    content?: string;
+}
 interface DescriptionsProps {
     items: DescriptionsItem[];
     column?: number;
@@ -772,6 +2056,7 @@ interface DescriptionsProps {
     bordered?: boolean;
     rounded?: boolean;
     className?: string;
+    classNames?: DescriptionsClassNames;
 }
 
 declare const Descriptions: React__default.NamedExoticComponent<DescriptionsProps>;
@@ -860,6 +2145,36 @@ interface DividerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'children
 declare const Divider: React__default.NamedExoticComponent<DividerProps>;
 
 type DropdownSize = 'xs' | 'sm' | 'md' | 'lg';
+interface DropdownClassNames {
+    /**
+     * Class name for the root container
+     */
+    root?: string;
+    /**
+     * Class name for the trigger element
+     */
+    trigger?: string;
+    /**
+     * Class name for the menu container
+     */
+    menu?: string;
+    /**
+     * Class name for individual menu items
+     */
+    item?: string;
+    /**
+     * Class name for item icons
+     */
+    itemIcon?: string;
+    /**
+     * Class name for item labels
+     */
+    itemLabel?: string;
+    /**
+     * Class name for dividers
+     */
+    divider?: string;
+}
 interface DropdownItem {
     /**
      * Display label for the item
@@ -933,6 +2248,10 @@ interface DropdownProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * ClassNames for component parts
+     */
+    classNames?: DropdownClassNames;
     /**
      * Callback when an item is clicked
      */
@@ -942,6 +2261,28 @@ interface DropdownProps {
 declare const Dropdown: React__default.NamedExoticComponent<DropdownProps>;
 
 type EmptySize = 'xs' | 'sm' | 'md' | 'lg';
+interface EmptyClassNames {
+    /**
+     * Class name for the root container
+     */
+    root?: string;
+    /**
+     * Class name for the icon element
+     */
+    icon?: string;
+    /**
+     * Class name for the title element
+     */
+    title?: string;
+    /**
+     * Class name for the description element
+     */
+    description?: string;
+    /**
+     * Class name for the action container
+     */
+    action?: string;
+}
 interface EmptyProps {
     /**
      * Custom icon to display
@@ -975,6 +2316,10 @@ interface EmptyProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * ClassNames for component parts
+     */
+    classNames?: EmptyClassNames;
 }
 
 declare const Empty: React__default.NamedExoticComponent<EmptyProps>;
@@ -993,7 +2338,7 @@ interface FetchingOverlayProps extends SpinnerProps {
     fullscreen?: boolean;
     backdropOpacity?: number;
 }
-declare const FetchingOverlay: FC<FetchingOverlayProps>;
+declare const FetchingOverlay: React__default.NamedExoticComponent<FetchingOverlayProps>;
 
 type GridGap = 'xs' | 'sm' | 'md' | 'lg';
 type GridColumns = 1 | 2 | 3 | 4 | 5 | 6;
@@ -1018,6 +2363,24 @@ interface GridProps {
 
 declare const Grid: React__default.NamedExoticComponent<GridProps>;
 
+interface ImageClassNames {
+    /**
+     * Class name for the root container
+     */
+    root?: string;
+    /**
+     * Class name for the image element
+     */
+    image?: string;
+    /**
+     * Class name for the placeholder element
+     */
+    placeholder?: string;
+    /**
+     * Class name for the error state
+     */
+    error?: string;
+}
 interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     /**
      * Image source URL
@@ -1047,17 +2410,31 @@ interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
      * Image height
      */
     height?: number;
+    /**
+     * ClassNames for component parts
+     */
+    classNames?: ImageClassNames;
 }
 
-declare function Image({ src, withBlur, className, fetchPriority, ...props }: ImageProps): react_jsx_runtime.JSX.Element;
+declare const Image: React__default.NamedExoticComponent<ImageProps>;
 
 type InputVariant = 'outline' | 'filled';
 type InputSize = 'xs' | 'sm' | 'md' | 'lg';
+interface InputClassNames {
+    root?: string;
+    wrapper?: string;
+    label?: string;
+    input?: string;
+    leftIcon?: string;
+    rightIcon?: string;
+    clearButton?: string;
+    helper?: string;
+    error?: string;
+}
 interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size'>, ValidationMessages, Partial<IconProps>, Partial<LoadingProps>, Partial<FullWidthProps> {
     variant?: InputVariant;
     size?: InputSize;
     label?: string;
-    floatingLabel?: boolean;
     messagePosition?: MessagePosition;
     clearable?: boolean;
     onClear?: () => void;
@@ -1065,24 +2442,80 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
     showCount?: boolean;
     ref?: React.Ref<HTMLInputElement>;
     wrapperClassName?: string;
+    classNames?: InputClassNames;
 }
 
 declare const Input: React__default.NamedExoticComponent<InputProps>;
 
+type InputGroupSize = 'xs' | 'sm' | 'md' | 'lg';
+interface InputGroupClassNames {
+    /**
+     * Class for root container
+     */
+    root?: string;
+    /**
+     * Class for addon elements
+     */
+    addon?: string;
+    /**
+     * Class for input element
+     */
+    input?: string;
+}
 interface InputGroupProps {
     /**
-     * Children elements (typically InputGroupInput and InputGroupAddon)
+     * Children elements (InputGroupAddon and InputGroupInput)
+     * Order determines layout - addons and input flow naturally with flexbox
      */
     children: React.ReactNode;
+    /**
+     * Size of the input group - affects height, padding, and text size
+     * @default 'md'
+     */
+    size?: InputGroupSize;
     /**
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom classes for different parts of the input group
+     */
+    classNames?: InputGroupClassNames;
 }
 
-declare const InputGroup: React$1.NamedExoticComponent<InputGroupProps>;
+declare const InputGroup: React__default.NamedExoticComponent<InputGroupProps>;
 
 type InputOTPSize = 'xs' | 'sm' | 'md' | 'lg';
+interface InputOTPClassNames {
+    /**
+     * Class for root container
+     */
+    root?: string;
+    /**
+     * Class for wrapper containing OTP inputs
+     */
+    wrapper?: string;
+    /**
+     * Class for label element
+     */
+    label?: string;
+    /**
+     * Class for individual input slot
+     */
+    slot?: string;
+    /**
+     * Class for active input slot
+     */
+    slotActive?: string;
+    /**
+     * Class for separator between inputs (if any)
+     */
+    separator?: string;
+    /**
+     * Class for helper/validation message
+     */
+    helper?: string;
+}
 interface InputOTPProps {
     /**
      * Number of OTP input fields
@@ -1152,6 +2585,10 @@ interface InputOTPProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom classes for different parts of the input OTP
+     */
+    classNames?: InputOTPClassNames;
     /**
      * Reference to the container div element
      */
@@ -1160,6 +2597,39 @@ interface InputOTPProps {
 
 declare const InputOTP: React__default.NamedExoticComponent<InputOTPProps>;
 
+interface InputPasswordClassNames {
+    root?: string;
+    wrapper?: string;
+    label?: string;
+    input?: string;
+    toggleButton?: string;
+    toggleIcon?: string;
+    helper?: string;
+    error?: string;
+}
+interface PasswordInputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'ref'> {
+    /**
+     * Whether to show visibility toggle button
+     */
+    visibilityToggle?: boolean;
+    /**
+     * Size variant
+     */
+    size?: InputSize;
+    /**
+     * Reference to the input element
+     */
+    ref?: React.Ref<HTMLInputElement>;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Class names for each input password element
+     */
+    classNames?: InputPasswordClassNames;
+}
+
 type KbdVariant = 'solid' | 'outline' | 'soft';
 type KbdSize = 'xs' | 'sm' | 'md' | 'lg';
 interface KbdProps extends React.HTMLAttributes<HTMLElement> {
@@ -1189,6 +2659,17 @@ declare const Kbd: React__default.NamedExoticComponent<KbdProps>;
 
 type ModalSize = 'xs' | 'sm' | 'md' | 'lg';
 type ModalColor = 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info';
+interface ModalClassNames {
+    root?: string;
+    overlay?: string;
+    content?: string;
+    header?: string;
+    title?: string;
+    description?: string;
+    body?: string;
+    footer?: string;
+    closeButton?: string;
+}
 interface ComposedModalProps {
     /**
      * Controlled open state
@@ -1246,10 +2727,14 @@ interface ComposedModalProps {
      * Additional CSS class for content
      */
     contentClassName?: string;
+    /**
+     * Class names for each modal element
+     */
+    classNames?: ModalClassNames;
 }
 
 declare function Modal({ ...props }: React$1.ComponentProps<typeof DialogPrimitive.Root>): react_jsx_runtime.JSX.Element;
-declare function ComposedModal({ open, onOpenChange, title, description, children, footer, size, color, centered, showCloseButton, hideHeader, hideFooter, className, contentClassName, }: ComposedModalProps): react_jsx_runtime.JSX.Element;
+declare function ComposedModal({ open, onOpenChange, title, description, children, footer, size, color, centered, showCloseButton, hideHeader, hideFooter, className, contentClassName, classNames, }: ComposedModalProps): react_jsx_runtime.JSX.Element;
 
 type MultiSelectSize = 'xs' | 'sm' | 'md' | 'lg';
 interface MultiSelectOption {
@@ -1258,6 +2743,52 @@ interface MultiSelectOption {
     disabled?: boolean;
     group?: string;
 }
+interface MultiSelectClassNames {
+    /**
+     * Class for root container
+     */
+    root?: string;
+    /**
+     * Class for trigger button
+     */
+    trigger?: string;
+    /**
+     * Class for individual tag/chip
+     */
+    tag?: string;
+    /**
+     * Class for tag remove button
+     */
+    tagRemove?: string;
+    /**
+     * Class for dropdown container
+     */
+    dropdown?: string;
+    /**
+     * Class for dropdown option
+     */
+    option?: string;
+    /**
+     * Class for selected option
+     */
+    optionSelected?: string;
+    /**
+     * Class for select all option
+     */
+    selectAll?: string;
+    /**
+     * Class for empty state
+     */
+    empty?: string;
+    /**
+     * Class for label element
+     */
+    label?: string;
+    /**
+     * Class for helper text
+     */
+    helper?: string;
+}
 interface MultiSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size' | 'onChange'> {
     size?: MultiSelectSize;
     label?: string;
@@ -1280,11 +2811,15 @@ interface MultiSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 's
     virtualizeThreshold?: number;
     maxDropdownHeight?: number;
     ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Custom classes for different parts of the multi-select
+     */
+    classNames?: MultiSelectClassNames;
 }
 
 declare const MultiSelect: React__default.NamedExoticComponent<MultiSelectProps>;
 
-type NotificationVariant = 'default' | 'solid' | 'outlined' | 'soft';
+type NotificationVariant = 'default' | 'solid' | 'outline' | 'soft';
 type NotificationSize = 'xs' | 'sm' | 'md' | 'lg';
 interface NotificationAction {
     /**
@@ -1296,6 +2831,36 @@ interface NotificationAction {
      */
     onClick: () => void;
 }
+interface NotificationClassNames {
+    /**
+     * Class for root notification container
+     */
+    root?: string;
+    /**
+     * Class for icon element
+     */
+    icon?: string;
+    /**
+     * Class for content wrapper
+     */
+    content?: string;
+    /**
+     * Class for title element
+     */
+    title?: string;
+    /**
+     * Class for description element
+     */
+    description?: string;
+    /**
+     * Class for action button
+     */
+    action?: string;
+    /**
+     * Class for close button
+     */
+    closeButton?: string;
+}
 interface NotificationProps {
     /**
      * Notification title
@@ -1333,6 +2898,10 @@ interface NotificationProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for component parts
+     */
+    classNames?: NotificationClassNames;
     /**
      * Children elements (additional content)
      */
@@ -1344,6 +2913,15 @@ declare const Notification: React__default.NamedExoticComponent<NotificationProp
 type PaginationColor = 'default' | 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info';
 type PaginationSize = 'xs' | 'sm' | 'md' | 'lg';
 type PaginationVariant = 'default' | 'solid' | 'soft';
+interface PaginationClassNames {
+    root?: string;
+    list?: string;
+    item?: string;
+    button?: string;
+    buttonActive?: string;
+    ellipsis?: string;
+    info?: string;
+}
 interface PaginationProps {
     /**
      * Total number of items
@@ -1413,6 +2991,10 @@ interface PaginationProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for different elements
+     */
+    classNames?: PaginationClassNames;
 }
 
 declare const Pagination: React__default.NamedExoticComponent<PaginationProps>;
@@ -1421,6 +3003,28 @@ type ProgressType = 'line' | 'circle' | 'step';
 type ProgressVariant = 'default' | 'solid' | 'soft';
 type ProgressOrientation = 'horizontal' | 'vertical';
 type ProgressSize = 'xs' | 'sm' | 'md' | 'lg';
+interface ProgressClassNames {
+    /**
+     * Class for root progress container
+     */
+    root?: string;
+    /**
+     * Class for progress track/background
+     */
+    track?: string;
+    /**
+     * Class for progress fill/bar
+     */
+    fill?: string;
+    /**
+     * Class for label element
+     */
+    label?: string;
+    /**
+     * Class for value/percentage element
+     */
+    value?: string;
+}
 interface ProgressProps {
     /**
      * Progress value (0-100)
@@ -1431,9 +3035,19 @@ interface ProgressProps {
      */
     color?: ComponentColor;
     /**
-     * Size variant
+     * Size variant (preset sizes for both line and circle)
      */
     size?: ProgressSize;
+    /**
+     * Custom circle diameter in pixels (overrides size preset for circle type)
+     * @example circleSize={16} // 16px diameter for inline text
+     */
+    circleSize?: number;
+    /**
+     * Custom stroke width in pixels (overrides size preset for circle type)
+     * @example strokeWidth={2} // 2px stroke for small circles
+     */
+    strokeWidth?: number;
     /**
      * Visual style variant
      */
@@ -1466,6 +3080,10 @@ interface ProgressProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for component parts
+     */
+    classNames?: ProgressClassNames;
     /**
      * Total number of steps (for step type)
      */
@@ -1474,12 +3092,23 @@ interface ProgressProps {
      * Footer content or boolean to show default footer
      */
     footer?: React.ReactNode | boolean;
+    /**
+     * Accessible label for screen readers
+     */
+    'aria-label'?: string;
 }
 
 declare const Progress: React__default.NamedExoticComponent<ProgressProps>;
 
-type RadioColor = 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info';
+type RadioColor = ButtonColor$1;
 type RadioSize = 'xs' | 'sm' | 'md' | 'lg';
+interface RadioClassNames {
+    root?: string;
+    radio?: string;
+    indicator?: string;
+    label?: string;
+    description?: string;
+}
 interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type'> {
     color?: RadioColor;
     size?: RadioSize;
@@ -1487,10 +3116,19 @@ interface RadioProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
     helperText?: string;
     error?: string | boolean;
     ref?: React.Ref<HTMLInputElement>;
+    classNames?: RadioClassNames;
 }
 
 declare const Radio: React__default.NamedExoticComponent<RadioProps>;
 
+interface RadioGroupClassNames {
+    root?: string;
+    label?: string;
+    group?: string;
+    item?: string;
+    helper?: string;
+    error?: string;
+}
 interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
      * Children elements (typically Radio components)
@@ -1516,6 +3154,10 @@ interface RadioGroupProps extends React.HTMLAttributes<HTMLDivElement> {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for different parts of the component
+     */
+    classNames?: RadioGroupClassNames;
     /**
      * Reference to the div element
      */
@@ -1526,6 +3168,12 @@ declare const RadioGroup: React__default.NamedExoticComponent<RadioGroupProps>;
 
 type RatingVariant = 'default' | 'solid' | 'soft';
 type RatingSize = 'xs' | 'sm' | 'md' | 'lg';
+interface RatingClassNames {
+    root?: string;
+    star?: string;
+    starFilled?: string;
+    label?: string;
+}
 interface RatingProps {
     /**
      * Current rating value (controlled)
@@ -1571,6 +3219,14 @@ interface RatingProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for component parts
+     */
+    classNames?: RatingClassNames;
+    /**
+     * Accessible label for screen readers
+     */
+    'aria-label'?: string;
 }
 
 declare const Rating: React__default.NamedExoticComponent<RatingProps>;
@@ -1603,6 +3259,20 @@ interface RibbonProps {
 declare const Ribbon: React__default.NamedExoticComponent<RibbonProps>;
 
 type SelectSize = 'xs' | 'sm' | 'md' | 'lg';
+interface SelectClassNames {
+    root?: string;
+    trigger?: string;
+    triggerIcon?: string;
+    dropdown?: string;
+    search?: string;
+    option?: string;
+    optionSelected?: string;
+    group?: string;
+    groupLabel?: string;
+    empty?: string;
+    label?: string;
+    helper?: string;
+}
 interface SelectOption extends BaseOption {
     group?: string;
 }
@@ -1618,6 +3288,7 @@ interface SelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'size'
     virtualizeThreshold?: number;
     maxDropdownHeight?: number;
     ref?: React.Ref<HTMLDivElement>;
+    classNames?: SelectClassNames;
 }
 
 declare const Select: React__default.NamedExoticComponent<SelectProps>;
@@ -1635,6 +3306,14 @@ declare const Skeleton: React__default.NamedExoticComponent<SkeletonProps>;
 
 type SliderVariant = 'default' | 'solid' | 'soft';
 type SliderSize = 'xs' | 'sm' | 'md' | 'lg';
+interface SliderClassNames {
+    root?: string;
+    track?: string;
+    range?: string;
+    thumb?: string;
+    label?: string;
+    value?: string;
+}
 interface SliderProps {
     /**
      * Current value (controlled) - single number or array for range
@@ -1680,6 +3359,10 @@ interface SliderProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for component parts
+     */
+    classNames?: SliderClassNames;
     /**
      * Footer content or boolean to show default footer
      */
@@ -1700,6 +3383,16 @@ type StepperVariant = 'default' | 'solid' | 'soft';
 type StepperOrientation = 'horizontal' | 'vertical';
 type StepperType = 'numbered' | 'dots';
 type StepStatus = 'wait' | 'process' | 'finish' | 'error';
+interface StepperClassNames {
+    root?: string;
+    step?: string;
+    stepActive?: string;
+    stepCompleted?: string;
+    icon?: string;
+    label?: string;
+    description?: string;
+    connector?: string;
+}
 interface StepItem {
     /**
      * Label to display for the step
@@ -1763,25 +3456,44 @@ interface StepperProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for different elements
+     */
+    classNames?: StepperClassNames;
 }
 
 declare const Stepper: React__default.NamedExoticComponent<StepperProps>;
 
-type SwitchColor = 'primary' | 'secondary' | 'accent' | 'success' | 'error' | 'warning' | 'info';
-type SwitchSize = 'xs' | 'sm' | 'md' | 'lg';
-interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'ref'> {
+type SwitchColor = ButtonColor$1;
+type SwitchSize = "xs" | "sm" | "md" | "lg";
+type SwitchLabelPosition = "left" | "right";
+interface SwitchClassNames {
+    root?: string;
+    track?: string;
+    thumb?: string;
+    label?: string;
+    description?: string;
+}
+interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "type" | "ref"> {
     /**
      * Theme color
+     * @default 'primary'
      */
     color?: SwitchColor;
     /**
      * Size variant
+     * @default 'md'
      */
     size?: SwitchSize;
     /**
      * Label text
      */
-    label?: string;
+    label?: React.ReactNode;
+    /**
+     * Position of the label relative to the switch
+     * @default 'right'
+     */
+    labelPosition?: SwitchLabelPosition;
     /**
      * Helper text or instructions
      */
@@ -1792,12 +3504,39 @@ interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
     error?: string;
     /**
      * Whether switch is in loading state
+     * @default false
      */
     loading?: boolean;
+    /**
+     * Icon to show inside thumb when checked
+     */
+    thumbIcon?: React.ReactNode;
+    /**
+     * Content to show on the left side of track (visible when unchecked)
+     */
+    startContent?: React.ReactNode;
+    /**
+     * Content to show on the right side of track (visible when checked)
+     */
+    endContent?: React.ReactNode;
+    /**
+     * Whether the switch is required
+     * Shows an asterisk next to the label
+     * @default false
+     */
+    required?: boolean;
+    /**
+     * Additional CSS class for the label text
+     */
+    labelClassName?: string;
     /**
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for component parts
+     */
+    classNames?: SwitchClassNames;
     /**
      * Reference to the input element
      */
@@ -1824,10 +3563,37 @@ interface CellEditEvent<TData = unknown, TValue = unknown> {
     value: TValue;
     row: TData;
 }
+interface TableClassNames {
+    root?: string;
+    wrapper?: string;
+    header?: string;
+    headerRow?: string;
+    headerCell?: string;
+    body?: string;
+    row?: string;
+    cell?: string;
+    footer?: string;
+    pagination?: string;
+    empty?: string;
+    skeleton?: string;
+    actions?: string;
+}
 interface TableProps<TData> {
     data: TData[];
-    columns: ColumnDef<TData, any>[];
+    columns: ColumnDef<TData, unknown>[];
     columnGroups?: ColumnGroup[];
+    /**
+     * Table caption for accessibility (visually hidden by default)
+     */
+    caption?: string;
+    /**
+     * Whether to visually display the caption
+     */
+    showCaption?: boolean;
+    /**
+     * Accessible label for the table (alternative to caption)
+     */
+    'aria-label'?: string;
     variant?: TableVariant;
     size?: TableSize;
     color?: TableColor;
@@ -1860,9 +3626,10 @@ interface TableProps<TData> {
     pinnedRowIds?: string[];
     onPinnedRowsChange?: (pinnedRowIds: string[]) => void;
     className?: string;
+    classNames?: TableClassNames;
 }
 
-declare function Table<TData>({ data, columns, columnGroups, variant, size: initialSize, color, striped, hoverable, bordered, enableSorting, enableFiltering, enablePagination, enableRowSelection, enableMultiRowSelection, enableRowPinning, enableExpandable, enableGrouping, enableVirtualization, enableClickToSelect, enableColumnPinning, enableActions, paginationPosition, expandedContent, footer, emptyState, loading, loadingRows, pageSize, pageSizeOptions, onRowClick, onSelectionChange, onCellEdit, pinnedRowIds, onPinnedRowsChange, className, }: TableProps<TData>): react_jsx_runtime.JSX.Element;
+declare function Table<TData>({ data, columns, columnGroups, caption, showCaption, 'aria-label': ariaLabel, variant, size: initialSize, color, striped, hoverable, bordered, enableSorting, enableFiltering, enablePagination, enableRowSelection, enableMultiRowSelection, enableRowPinning, enableExpandable, enableGrouping, enableVirtualization, enableClickToSelect, enableColumnPinning, enableActions, paginationPosition, expandedContent, footer, emptyState, loading, loadingRows, pageSize, pageSizeOptions, onRowClick, onSelectionChange, onCellEdit, pinnedRowIds, onPinnedRowsChange, className, classNames, }: TableProps<TData>): react_jsx_runtime.JSX.Element;
 declare namespace Table {
     var displayName: string;
 }
@@ -1892,6 +3659,28 @@ interface TabItem {
      */
     disabled?: boolean;
 }
+interface TabsClassNames {
+    /**
+     * Class for root container
+     */
+    root?: string;
+    /**
+     * Class for tab list container
+     */
+    list?: string;
+    /**
+     * Class for individual tab button
+     */
+    tab?: string;
+    /**
+     * Class for active tab button
+     */
+    tabActive?: string;
+    /**
+     * Class for tab panel content
+     */
+    panel?: string;
+}
 interface TabsProps {
     /**
      * Array of tab items
@@ -1925,13 +3714,93 @@ interface TabsProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom classes for different parts of the tabs
+     */
+    classNames?: TabsClassNames;
 }
 
 declare const Tabs: React__default.NamedExoticComponent<TabsProps>;
 
+type TagVariant = 'default' | 'solid' | 'outline' | 'soft';
+type TagColor = ComponentColor;
+type TagSize = Exclude<ComponentSize, 'xl'>;
+interface TagClassNames {
+    root?: string;
+    content?: string;
+    closeButton?: string;
+}
+interface TagProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'onClick'> {
+    children?: React.ReactNode;
+    variant?: TagVariant;
+    color?: TagColor;
+    size?: TagSize;
+    closable?: boolean;
+    onClose?: (e: React.MouseEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLButtonElement> | React.KeyboardEvent<HTMLSpanElement>) => void;
+    onClick?: (e: React.MouseEvent<HTMLSpanElement> | React.KeyboardEvent<HTMLSpanElement>) => void;
+    icon?: React.ReactNode;
+    className?: string;
+    classNames?: TagClassNames;
+    disableKeyboardRemoval?: boolean;
+}
+
+/**
+ * Tag Component
+ *
+ * An interactive badge variant that can be used for labels, categories, or removable items.
+ * Supports multiple variants, colors, sizes, icons, and close functionality.
+ *
+ * @component
+ * @example
+ * // Basic tag
+ * <Tag>Label</Tag>
+ *
+ * @example
+ * // Tag with close button
+ * <Tag closable onClose={(e) => console.log('Tag removed')}>
+ *   Removable Tag
+ * </Tag>
+ *
+ * @example
+ * // Tag with icon
+ * <Tag icon={<Star />} color="warning">
+ *   Featured
+ * </Tag>
+ *
+ * @example
+ * // Different variants
+ * <Tag variant="outline" color="success">Outline Tag</Tag>
+ * <Tag variant="soft" color="info">Soft Tag</Tag>
+ *
+ * @example
+ * // Disable keyboard removal (Backspace/Delete on tag)
+ * <Tag closable disableKeyboardRemoval onClose={(e) => console.log('Tag removed')}>
+ *   No keyboard removal
+ * </Tag>
+ *
+ * @example
+ * // Tag with keyboard removal enabled (focus on tag and press Delete/Backspace)
+ * <Tag closable onClose={(e) => console.log('Tag removed')}>
+ *   Press Delete or Backspace to remove
+ * </Tag>
+ *
+ * @param {TagProps} props - Component props
+ * @returns {JSX.Element} Rendered tag component
+ */
+declare const Tag: React__default.NamedExoticComponent<TagProps>;
+
 type TextareaVariant = 'outline' | 'filled';
 type TextareaSize = 'xs' | 'sm' | 'md' | 'lg';
 type TextareaResize = 'none' | 'vertical' | 'horizontal' | 'both';
+interface TextareaClassNames {
+    root?: string;
+    wrapper?: string;
+    label?: string;
+    textarea?: string;
+    counter?: string;
+    helper?: string;
+    error?: string;
+}
 interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaElement>, 'size' | 'ref'> {
     /**
      * Visual style variant
@@ -1993,6 +3862,10 @@ interface TextareaProps extends Omit<React.TextareaHTMLAttributes<HTMLTextAreaEl
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for component parts
+     */
+    classNames?: TextareaClassNames;
     /**
      * Reference to the textarea element
      */
@@ -2003,6 +3876,9 @@ declare const Textarea: React__default.NamedExoticComponent<TextareaProps>;
 
 type ToggleVariant = 'default' | 'solid' | 'soft';
 type ToggleSize = 'xs' | 'sm' | 'md' | 'lg';
+interface ToggleClassNames {
+    root?: string;
+}
 interface SingleToggleProps {
     /**
      * Pressed state (controlled)
@@ -2040,16 +3916,28 @@ interface SingleToggleProps {
      * Children elements (label text)
      */
     children?: React.ReactNode;
+    /**
+     * Accessible label (required for icon-only toggles)
+     */
+    'aria-label'?: string;
     /**
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for different parts of the toggle
+     */
+    classNames?: ToggleClassNames;
 }
 
 declare const Toggle: React__default.NamedExoticComponent<SingleToggleProps>;
 
 type ToggleGroupVariant = 'default' | 'solid' | 'soft';
 type ToggleGroupSize = 'xs' | 'sm' | 'md' | 'lg';
+interface ToggleGroupClassNames {
+    root?: string;
+    item?: string;
+}
 interface ToggleGroupOption {
     /**
      * Display label for the option
@@ -2117,6 +4005,10 @@ interface ToggleGroupProps {
      * Center align content
      */
     centered?: boolean;
+    /**
+     * Custom class names for different parts of the toggle group
+     */
+    classNames?: ToggleGroupClassNames;
 }
 
 declare const ToggleGroup: React__default.NamedExoticComponent<ToggleGroupProps>;
@@ -2124,6 +4016,24 @@ declare const ToggleGroup: React__default.NamedExoticComponent<ToggleGroupProps>
 type TooltipVariant = 'solid' | 'soft';
 type TooltipColor = ComponentColor;
 type TooltipSize = 'xs' | 'sm' | 'md' | 'lg';
+interface TooltipClassNames {
+    /**
+     * Class for root tooltip wrapper
+     */
+    root?: string;
+    /**
+     * Class for tooltip trigger element
+     */
+    trigger?: string;
+    /**
+     * Class for tooltip content
+     */
+    content?: string;
+    /**
+     * Class for tooltip arrow
+     */
+    arrow?: string;
+}
 interface TooltipProps {
     /**
      * Tooltip content
@@ -2165,11 +4075,45 @@ interface TooltipProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for component parts
+     */
+    classNames?: TooltipClassNames;
 }
 
 declare const Tooltip: React__default.NamedExoticComponent<TooltipProps>;
 
 type TreeSize = 'xs' | 'sm' | 'md' | 'lg';
+interface TreeClassNames {
+    /**
+     * Class name for root container
+     */
+    root?: string;
+    /**
+     * Class name for individual node
+     */
+    node?: string;
+    /**
+     * Class name for node content wrapper
+     */
+    nodeContent?: string;
+    /**
+     * Class name for node icon
+     */
+    icon?: string;
+    /**
+     * Class name for expand/collapse icon
+     */
+    expandIcon?: string;
+    /**
+     * Class name for node label
+     */
+    label?: string;
+    /**
+     * Class name for children container
+     */
+    children?: string;
+}
 interface TreeNode {
     /**
      * Unique key for the node
@@ -2276,11 +4220,45 @@ interface TreeProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for tree elements
+     */
+    classNames?: TreeClassNames;
 }
 
 declare const Tree: React__default.NamedExoticComponent<TreeProps>;
 
 type TreeSelectSize = 'xs' | 'sm' | 'md' | 'lg';
+interface TreeSelectClassNames {
+    /**
+     * Class name for root container
+     */
+    root?: string;
+    /**
+     * Class name for trigger button
+     */
+    trigger?: string;
+    /**
+     * Class name for dropdown content
+     */
+    dropdown?: string;
+    /**
+     * Class name for tree container
+     */
+    tree?: string;
+    /**
+     * Class name for tree nodes
+     */
+    node?: string;
+    /**
+     * Class name for checkboxes
+     */
+    checkbox?: string;
+    /**
+     * Class name for node labels
+     */
+    label?: string;
+}
 interface TreeSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange'> {
     /**
      * Size variant (tree-select only supports xs, sm, md, lg)
@@ -2386,6 +4364,10 @@ interface TreeSelectProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'on
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Custom class names for tree select elements
+     */
+    classNames?: TreeSelectClassNames;
     /**
      * Reference to the div element
      */
@@ -2397,6 +4379,44 @@ declare const TreeSelect: React__default.NamedExoticComponent<TreeSelectProps>;
 type UploadVariant = 'button' | 'dropzone' | 'dragger' | 'picture' | 'avatar';
 type UploadSize = 'xs' | 'sm' | 'md' | 'lg';
 type UploadColor = ButtonColor$1;
+interface UploadClassNames {
+    /**
+     * Class for root container
+     */
+    root?: string;
+    /**
+     * Class for dropzone area
+     */
+    dropzone?: string;
+    /**
+     * Class for file input element
+     */
+    input?: string;
+    /**
+     * Class for upload icon
+     */
+    icon?: string;
+    /**
+     * Class for upload text
+     */
+    text?: string;
+    /**
+     * Class for hint text
+     */
+    hint?: string;
+    /**
+     * Class for file list container
+     */
+    fileList?: string;
+    /**
+     * Class for individual file item
+     */
+    fileItem?: string;
+    /**
+     * Class for progress indicator
+     */
+    progress?: string;
+}
 interface UploadFile {
     uid: string;
     name: string;
@@ -2406,8 +4426,8 @@ interface UploadFile {
     percent?: number;
     url?: string;
     thumbUrl?: string;
-    response?: any;
-    error?: any;
+    response?: unknown;
+    error?: unknown;
 }
 interface UploadProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, 'size' | 'type' | 'onChange' | 'onError'> {
     variant?: UploadVariant;
@@ -2437,17 +4457,21 @@ interface UploadProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
     customRequest?: (options: {
         file: File;
         onProgress: (percent: number) => void;
-        onSuccess: (response: any) => void;
-        onError: (error: any) => void;
+        onSuccess: (response: unknown) => void;
+        onError: (error: unknown) => void;
     }) => void;
     onError?: (error: string, file: File) => void;
     className?: string;
+    /**
+     * Custom classes for different parts of the upload component
+     */
+    classNames?: UploadClassNames;
     ref?: React.Ref<HTMLDivElement>;
 }
 
 declare const Upload: React__default.NamedExoticComponent<UploadProps>;
 
-type ChartSize = 'sm' | 'md' | 'lg' | 'xl';
+type ChartSize = 'xs' | 'sm' | 'md' | 'lg';
 interface ChartDataPoint {
     [key: string]: string | number;
 }
@@ -2503,42 +4527,99 @@ declare const PieChart: React__default.NamedExoticComponent<PieChartProps>;
  * Note: Most command components use React.ComponentProps with the underlying
  * cmdk primitives and add a size prop
  */
-type CommandSize = 'sm' | 'md' | 'lg';
+type CommandSize = 'xs' | 'sm' | 'md' | 'lg';
 
-declare function Command({ className, size, ...props }: React$1.ComponentProps<typeof Command$1> & {
-    size?: 'sm' | 'md' | 'lg';
-}): react_jsx_runtime.JSX.Element;
-declare function CommandModal({ title, description, children, className, showCloseButton, size, ...props }: React$1.ComponentProps<typeof Modal> & {
-    title?: string;
-    description?: string;
-    className?: string;
-    showCloseButton?: boolean;
-    size?: 'sm' | 'md' | 'lg';
-}): react_jsx_runtime.JSX.Element;
-declare function CommandInput({ className, size, ...props }: Omit<React$1.ComponentProps<typeof Command$1.Input>, 'size'> & {
-    size?: CommandSize;
-}): react_jsx_runtime.JSX.Element;
-declare function CommandList({ className, size, ...props }: React$1.ComponentProps<typeof Command$1.List> & {
-    size?: 'sm' | 'md' | 'lg';
-}): react_jsx_runtime.JSX.Element;
-declare function CommandEmpty({ size, ...props }: React$1.ComponentProps<typeof Command$1.Empty> & {
-    size?: 'sm' | 'md' | 'lg';
-}): react_jsx_runtime.JSX.Element;
-declare function CommandGroup({ className, size, ...props }: React$1.ComponentProps<typeof Command$1.Group> & {
-    size?: 'sm' | 'md' | 'lg';
-}): react_jsx_runtime.JSX.Element;
-declare function CommandSeparator({ className, size, ...props }: React$1.ComponentProps<typeof Command$1.Separator> & {
-    size?: 'sm' | 'md' | 'lg';
-}): react_jsx_runtime.JSX.Element;
-declare function CommandItem({ className, size, ...props }: React$1.ComponentProps<typeof Command$1.Item> & {
-    size?: 'sm' | 'md' | 'lg';
-}): react_jsx_runtime.JSX.Element;
-declare function CommandShortcut({ className, size, ...props }: React$1.ComponentProps<'span'> & {
-    size?: 'sm' | 'md' | 'lg';
-}): react_jsx_runtime.JSX.Element;
+interface CommandClassNames {
+    root?: string;
+    input?: string;
+    inputIcon?: string;
+    list?: string;
+    empty?: string;
+    group?: string;
+    groupLabel?: string;
+    item?: string;
+    itemIcon?: string;
+    shortcut?: string;
+}
+
+declare const Command: {
+    ({ className, size, classNames, ...props }: React$1.ComponentProps<typeof Command$1> & {
+        size?: CommandSize;
+        classNames?: CommandClassNames;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const CommandModal: {
+    ({ title, description, children, className, showCloseButton, size, ...props }: React$1.ComponentProps<typeof Modal> & {
+        title?: string;
+        description?: string;
+        className?: string;
+        showCloseButton?: boolean;
+        size?: CommandSize;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const CommandInput: {
+    ({ className, size, classNames, ...props }: Omit<React$1.ComponentProps<typeof Command$1.Input>, "size"> & {
+        size?: CommandSize;
+        classNames?: CommandClassNames;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const CommandList: {
+    ({ className, size, classNames, ...props }: React$1.ComponentProps<typeof Command$1.List> & {
+        size?: CommandSize;
+        classNames?: CommandClassNames;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const CommandEmpty: {
+    ({ size, classNames, ...props }: React$1.ComponentProps<typeof Command$1.Empty> & {
+        size?: CommandSize;
+        classNames?: CommandClassNames;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const CommandGroup: {
+    ({ className, size, classNames, ...props }: React$1.ComponentProps<typeof Command$1.Group> & {
+        size?: CommandSize;
+        classNames?: CommandClassNames;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const CommandSeparator: {
+    ({ className, size, ...props }: React$1.ComponentProps<typeof Command$1.Separator> & {
+        size?: CommandSize;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const CommandItem: {
+    ({ className, size, classNames, ...props }: React$1.ComponentProps<typeof Command$1.Item> & {
+        size?: CommandSize;
+        classNames?: CommandClassNames;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const CommandShortcut: {
+    ({ className, size, classNames, ...props }: React$1.ComponentProps<"span"> & {
+        size?: CommandSize;
+        classNames?: CommandClassNames;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 type DatePickerVariant = 'outline' | 'filled';
 type DatePickerSize = 'xs' | 'sm' | 'md' | 'lg';
+interface DatePickerClassNames {
+    root?: string;
+    trigger?: string;
+    calendar?: string;
+    header?: string;
+    navigation?: string;
+    day?: string;
+    daySelected?: string;
+    dayToday?: string;
+}
 interface BaseDatePickerProps {
     variant?: DatePickerVariant;
     size?: DatePickerSize;
@@ -2555,6 +4636,7 @@ interface BaseDatePickerProps {
     clearable?: boolean;
     fullWidth?: boolean;
     className?: string;
+    classNames?: DatePickerClassNames;
     minDate?: Date;
     maxDate?: Date;
     dateFormat?: string;
@@ -2590,7 +4672,53 @@ declare const DatePicker: React__default.NamedExoticComponent<DatePickerProps> &
     TimePicker: React__default.NamedExoticComponent<TimePickerProps>;
 };
 
-type DrawerDirection = 'bottom' | 'top' | 'left' | 'right';
+type DrawerDirection = "bottom" | "top" | "left" | "right";
+type DrawerSize = "xs" | "sm" | "md" | "lg" | "full";
+/**
+ * ClassNames interface for customizing Drawer sub-components
+ */
+interface DrawerClassNames {
+    /**
+     * Root drawer wrapper class
+     */
+    root?: string;
+    /**
+     * Overlay backdrop class
+     */
+    overlay?: string;
+    /**
+     * Main content container class
+     */
+    content?: string;
+    /**
+     * Header section class
+     */
+    header?: string;
+    /**
+     * Title element class
+     */
+    title?: string;
+    /**
+     * Description element class
+     */
+    description?: string;
+    /**
+     * Body/main content class
+     */
+    body?: string;
+    /**
+     * Footer section class
+     */
+    footer?: string;
+    /**
+     * Drag handle class
+     */
+    handle?: string;
+    /**
+     * Close button class
+     */
+    closeButton?: string;
+}
 interface DrawerProps {
     /**
      * Controlled open state
@@ -2602,12 +4730,34 @@ interface DrawerProps {
     onOpenChange?: (open: boolean) => void;
     /**
      * Direction from which drawer slides in
+     * @default 'bottom'
      */
     direction?: DrawerDirection;
     /**
      * Whether drawer should be modal (blocking interaction with content behind)
+     * @default true
      */
     modal?: boolean;
+    /**
+     * Whether the drawer should close when clicking the overlay
+     * @default true
+     */
+    closeOnOverlayClick?: boolean;
+    /**
+     * Whether pressing the Escape key should close the drawer
+     * @default true
+     */
+    closeOnEscape?: boolean;
+    /**
+     * Whether the drawer can be dismissed by dragging
+     * @default true
+     */
+    dismissible?: boolean;
+    /**
+     * Snap points for drawer positioning (0-1 values)
+     * e.g., [0.5, 1] allows snapping to 50% and 100%
+     */
+    snapPoints?: (number | string)[];
     /**
      * Children elements
      */
@@ -2620,18 +4770,65 @@ interface DrawerTriggerProps {
     children: React.ReactNode;
     /**
      * Whether to render children as child component
+     * @default false
      */
     asChild?: boolean;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Reference to the trigger element
+     */
+    ref?: React.Ref<HTMLButtonElement>;
 }
 interface DrawerContentProps {
     /**
      * Children elements
      */
     children: React.ReactNode;
+    /**
+     * Direction from which drawer slides in
+     * @default 'bottom'
+     */
+    direction?: DrawerDirection;
+    /**
+     * Drawer size
+     * @default 'md'
+     */
+    size?: DrawerSize;
+    /**
+     * Whether to show a close button in the corner
+     * @default false
+     */
+    showCloseButton?: boolean;
+    /**
+     * Whether to show the drag handle
+     * @default true for bottom/top, false for left/right
+     */
+    showHandle?: boolean;
     /**
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Reference to the content element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Custom class names for sub-components
+     */
+    classNames?: DrawerClassNames;
+}
+interface DrawerOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Reference to the overlay element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Custom class names for sub-components
+     */
+    classNames?: DrawerClassNames;
 }
 interface DrawerHeaderProps {
     /**
@@ -2642,6 +4839,14 @@ interface DrawerHeaderProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Reference to the header element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Custom class names for sub-components
+     */
+    classNames?: DrawerClassNames;
 }
 interface DrawerFooterProps {
     /**
@@ -2652,6 +4857,14 @@ interface DrawerFooterProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Reference to the footer element
+     */
+    ref?: React.Ref<HTMLDivElement>;
+    /**
+     * Custom class names for sub-components
+     */
+    classNames?: DrawerClassNames;
 }
 interface DrawerTitleProps {
     /**
@@ -2662,6 +4875,14 @@ interface DrawerTitleProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Reference to the title element
+     */
+    ref?: React.Ref<HTMLHeadingElement>;
+    /**
+     * Custom class names for sub-components
+     */
+    classNames?: DrawerClassNames;
 }
 interface DrawerDescriptionProps {
     /**
@@ -2672,6 +4893,14 @@ interface DrawerDescriptionProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Reference to the description element
+     */
+    ref?: React.Ref<HTMLParagraphElement>;
+    /**
+     * Custom class names for sub-components
+     */
+    classNames?: DrawerClassNames;
 }
 interface DrawerCloseProps {
     /**
@@ -2680,27 +4909,53 @@ interface DrawerCloseProps {
     children: React.ReactNode;
     /**
      * Whether to render children as child component
+     * @default false
      */
     asChild?: boolean;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * Reference to the close element
+     */
+    ref?: React.Ref<HTMLButtonElement>;
 }
 
 declare const Drawer: React__default.NamedExoticComponent<DrawerProps>;
 declare const DrawerTrigger: React__default.NamedExoticComponent<DrawerTriggerProps>;
 declare const DrawerPortal: typeof vaul.Portal;
-interface DrawerOverlayProps extends React__default.HTMLAttributes<HTMLDivElement> {
-    ref?: React__default.Ref<HTMLDivElement>;
-}
 declare const DrawerOverlay: React__default.NamedExoticComponent<DrawerOverlayProps>;
-declare const DrawerContent: React__default.NamedExoticComponent<DrawerContentProps & {
-    direction?: "bottom" | "top" | "left" | "right";
-    size?: "xs" | "sm" | "md" | "lg";
-}>;
+declare const DrawerContent: React__default.NamedExoticComponent<DrawerContentProps>;
 declare const DrawerHeader: React__default.NamedExoticComponent<DrawerHeaderProps>;
 declare const DrawerFooter: React__default.NamedExoticComponent<DrawerFooterProps>;
 declare const DrawerTitle: React__default.NamedExoticComponent<DrawerTitleProps>;
 declare const DrawerDescription: React__default.NamedExoticComponent<DrawerDescriptionProps>;
 declare const DrawerClose: React__default.NamedExoticComponent<DrawerCloseProps>;
 
+interface PopoverClassNames {
+    /**
+     * Class for root popover wrapper
+     */
+    root?: string;
+    /**
+     * Class for popover trigger element
+     */
+    trigger?: string;
+    /**
+     * Class for popover content
+     */
+    content?: string;
+    /**
+     * Class for popover arrow
+     */
+    arrow?: string;
+    /**
+     * Class for close button
+     */
+    closeButton?: string;
+}
+
 declare function Popover({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Root>): react_jsx_runtime.JSX.Element;
 declare function PopoverTrigger({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Trigger>): react_jsx_runtime.JSX.Element;
 declare const popoverContentVariants: (props?: ({
@@ -2709,10 +4964,37 @@ declare const popoverContentVariants: (props?: ({
     color?: "default" | "error" | "warning" | "info" | "success" | "primary" | "secondary" | "accent" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface PopoverContentProps extends Omit<React$1.ComponentProps<typeof PopoverPrimitive.Content>, 'color'>, VariantProps<typeof popoverContentVariants> {
+    classNames?: PopoverClassNames;
 }
-declare function PopoverContent({ className, align, sideOffset, size, variant, color, ...props }: PopoverContentProps): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, align, sideOffset, size, variant, color, classNames, ...props }: PopoverContentProps): react_jsx_runtime.JSX.Element;
 declare function PopoverAnchor({ ...props }: React$1.ComponentProps<typeof PopoverPrimitive.Anchor>): react_jsx_runtime.JSX.Element;
 
+interface TransferClassNames {
+    /**
+     * Class for root container
+     */
+    root?: string;
+    /**
+     * Class for list panel
+     */
+    list?: string;
+    /**
+     * Class for list header
+     */
+    header?: string;
+    /**
+     * Class for search input
+     */
+    search?: string;
+    /**
+     * Class for individual item
+     */
+    item?: string;
+    /**
+     * Class for action buttons container
+     */
+    actions?: string;
+}
 interface TransferItem {
     key: string;
     label: string;
@@ -2747,9 +5029,10 @@ interface TransferProps {
     info?: string;
     success?: string;
     className?: string;
+    classNames?: TransferClassNames;
     ref?: React.Ref<HTMLDivElement>;
 }
 
 declare const Transfer: React__default.NamedExoticComponent<TransferProps>;
 
-export { Accordion, AreaChart, Badge, BarChart, type BaseOption, Breadcrumb as Breadcrumbs, Button, type ButtonColor$1 as ButtonColor, ButtonGroup, Card, Carousel, Cascader, Checkbox, CheckboxGroup, Clipboard, Collapse, Command, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandModal, CommandSeparator, CommandShortcut, type ComponentColor, type ComponentSize, type ComponentVariant, type ComponentVariantExtended, type ComponentVariantInput, ComposedChart, DatePicker, Descriptions, type DisableableProps, Divider, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, Dropdown, Empty, FetchingOverlay, type FullWidthProps, Grid, type IconProps, Image, Input, InputGroup, InputOTP, Input as InputPassword, Kbd, LineChart, type LoadingProps, type MessagePosition, ComposedModal as Modal, MultiSelect, Notification, Pagination, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, Radio, RadioGroup, RangePickerComponent as RangePicker, Rating, type RequiredProps, Ribbon, Select, Skeleton, Slider, Spinner, Stepper, Switch, Table, Tabs, type TextColorVariants, Textarea, TimePickerComponent as TimePicker, Toggle, ToggleGroup, Tooltip, Transfer, Tree, TreeSelect, Upload, type ValidationMessages, buttonColors, cn, commonSpacing, componentColors, componentSizeVariants, createAllColorVariants, createDashedColorVariants, createDefaultColorVariants, createGhostColorVariants, createLinkColorVariants, createOutlineColorVariants, createSoftColorVariants, createSolidColorVariants, extendedComponentSizeVariants, getAccordionColorClass, getCheckboxColorClass, getIconColorClass, getValidationStatus, iconColorClasses, iconSizes, textColorVariants };
+export { Accordion, type AccordionClassNames, type AccordionItem, type AccordionProps, AreaChart, Avatar, type AvatarClassNames, AvatarGroup, type AvatarGroupClassNames, type AvatarGroupProps, type AvatarProps, Badge, type BadgeProps, BarChart, type BaseClassNames, type BaseOption, type BreadcrumbItemData, type BreadcrumbProps, Breadcrumb as Breadcrumbs, type BreadcrumbsClassNames, Button, type ButtonClassNames, type ButtonColor$1 as ButtonColor, ButtonGroup, type ButtonGroupClassNames, type ButtonGroupProps, type ButtonProps, type ButtonShape, type ButtonSize, type ButtonVariant, CardWithSubComponents as Card, type CardActionProps, type CardClassNames, type CardContentProps, type CardDescriptionProps, type CardFooterProps, type CardHeaderProps, type CardImageProps, type CardProps, type CardTitleProps, Carousel, Cascader, type CascaderClassNames, type CascaderOption, type CascaderProps, Checkbox, type CheckboxClassNames, type CheckboxColor, CheckboxGroup, type CheckboxGroupClassNames, type CheckboxGroupProps as CheckboxGroupComponentProps, type CheckboxProps, type CheckboxSize, Clipboard, type ClipboardClassNames, type ClipboardProps, Collapse, type CollapseClassNames, type CollapseProps, Command, type CommandClassNames, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandModal, CommandSeparator, CommandShortcut, type ComponentColor, type ComponentSize, type ComponentVariant, type ComponentVariantExtended, type ComponentVariantInput, ComposedChart, type ComposedModalProps, ContextMenu, type ContextMenuClassNames, type ContextMenuItem, type ContextMenuProps, type CreateClassNames, DatePicker, type DatePickerClassNames, type DatePickerProps, Descriptions, type DescriptionsClassNames, type DescriptionsItem, type DescriptionsProps, type DisableableProps, Divider, type DividerProps, Drawer, type DrawerClassNames, DrawerClose, type DrawerCloseProps, DrawerContent, type DrawerContentProps, DrawerDescription, type DrawerDescriptionProps, DrawerFooter, type DrawerFooterProps, DrawerHeader, type DrawerHeaderProps, DrawerOverlay, type DrawerOverlayProps, DrawerPortal, type DrawerProps, DrawerTitle, type DrawerTitleProps, DrawerTrigger, type DrawerTriggerProps, Dropdown, type DropdownClassNames, type DropdownItem, type DropdownProps, Empty, type EmptyClassNames, type EmptyProps, FetchingOverlay, type FullWidthProps, Grid, type GridProps, type IconProps, Image, type ImageClassNames, type ImageProps, Input, type InputClassNames, InputGroup, type InputGroupClassNames, type InputGroupProps, InputOTP, type InputOTPClassNames, type InputOTPProps, Input as InputPassword, type InputPasswordClassNames, type InputProps, Kbd, type KbdProps, type KbdVariantType, LineChart, type LoadingProps, type MessagePosition, ComposedModal as Modal, type ModalClassNames, MultiSelect, type MultiSelectClassNames, type MultiSelectProps, Notification, type NotificationClassNames, type NotificationProps, type NotificationVariantType, Pagination, type PaginationClassNames, type PaginationProps, type PasswordInputProps, PieChart, Popover, PopoverAnchor, type PopoverClassNames, PopoverContent, PopoverTrigger, type PopoverVariantType, Progress, type ProgressClassNames, type ProgressOrientation, type ProgressProps, type ProgressSize, type ProgressType, type ProgressVariant, Radio, type RadioClassNames, RadioGroup, type RadioGroupClassNames, type RadioGroupProps as RadioGroupComponentProps, type RadioProps, RangePickerComponent as RangePicker, type RangePickerProps, Rating, type RatingClassNames, type RatingProps, type RequiredProps, Ribbon, type RibbonProps, Select, type SelectClassNames, type SelectProps, type SingleToggleProps, Skeleton, type SkeletonProps, Slider, type SliderClassNames, type SliderProps, Spinner, type SpinnerProps, type StepItem, Stepper, type StepperClassNames, type StepperProps, type StyleVariantType, Switch, type SwitchClassNames, type SwitchProps, type TabItem, Table, type TableClassNames, type TableProps, Tabs, type TabsClassNames, type TabsProps, Tag, type TagClassNames, type TagProps, type TextColorVariants, Textarea, type TextareaClassNames, type TextareaProps, type Theme, type ThemePreset, ThemeProvider, type ThemeProviderProps, type ThemeProviderState, TimePickerComponent as TimePicker, type TimePickerProps, Toggle, type ToggleClassNames, ToggleGroup, type ToggleGroupClassNames, type ToggleGroupProps, Tooltip, type TooltipClassNames, type TooltipProps, Transfer, type TransferClassNames, type TransferItem, type TransferProps, Tree, type TreeClassNames, type TreeNode, type TreeProps, TreeSelect, type TreeSelectClassNames, type TreeSelectProps, Upload, type UploadClassNames, type UploadFile, type UploadProps, type ValidationMessages, bgSkeletonColorClasses, buttonColors, checkboxBorderColorClasses, checkedColorClasses, cn, componentColors, createAllColorVariants, createDashedColorVariants, createDefaultColorVariants, createGhostColorVariants, createKbdColorVariants, createKbdOutlineColorVariants, createKbdSoftColorVariants, createKbdSolidColorVariants, createLinkColorVariants, createNotificationColorVariants, createNotificationOutlineColorVariants, createNotificationSoftColorVariants, createNotificationSolidColorVariants, createOutlineColorVariants, createPopoverColorVariants, createPopoverDefaultColorVariants, createPopoverSoftColorVariants, createPopoverSolidColorVariants, createSoftColorVariants, createSolidColorVariants, createTooltipSoftColorVariants, focusRingColorClasses, getValidationStatus, iconSizes, radioCheckedColorClasses, switchTrackColorClasses, textColorClasses, textColorVariants, themePresets, themeScript, tooltipSolidColorClasses, useTheme };