@mdigital_ui/ui 0.2.5 → 0.2.6

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';
@@ -200,15 +200,173 @@ 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;
+/**
+ * Supported variant types for compound variant generation
+ */
+type StyleVariantType = 'default' | 'solid' | 'outline' | 'soft' | 'dashed' | 'link' | 'ghost';
+/**
+ * Shape of a generated compound variant object
+ * Uses 'any' for CVA compatibility - CVA's compound variants type is complex
+ * and using specific types causes type inference issues
+ */
+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 textColorClasses: {
+    readonly default: "text-text-primary";
+    readonly primary: "text-primary";
+    readonly secondary: "text-secondary";
+    readonly accent: "text-accent";
+    readonly success: "text-success";
+    readonly error: "text-error";
+    readonly warning: "text-warning";
+    readonly info: "text-info";
+};
+/**
+ * Foreground text color classes for solid backgrounds (contrast colors)
+ * Used by: Solid buttons, badges, notifications - text that sits on colored backgrounds
+ * Note: Uses 'text-background' for semantic colors as they typically have white/light foreground
+ */
+declare const textForegroundColorClasses: {
+    readonly default: "text-text-primary";
+    readonly primary: "text-background";
+    readonly secondary: "text-background";
+    readonly accent: "text-background";
+    readonly success: "text-background";
+    readonly error: "text-background";
+    readonly warning: "text-background";
+    readonly info: "text-background";
+};
+/**
+ * Background color classes (solid)
+ * Used by: Solid buttons, badges, checked states
+ */
+declare const bgColorClasses: {
+    readonly default: "bg-surface";
+    readonly primary: "bg-primary";
+    readonly secondary: "bg-secondary";
+    readonly accent: "bg-accent";
+    readonly success: "bg-success";
+    readonly error: "bg-error";
+    readonly warning: "bg-warning";
+    readonly info: "bg-info";
+};
+/**
+ * Background color classes (soft/muted - 10% opacity)
+ * Used by: Soft variants, hover states
+ */
+declare const bgSoftColorClasses: {
+    readonly default: "bg-surface";
+    readonly primary: "bg-primary/10";
+    readonly secondary: "bg-secondary/10";
+    readonly accent: "bg-accent/10";
+    readonly success: "bg-success/10";
+    readonly error: "bg-error/10";
+    readonly warning: "bg-warning/10";
+    readonly info: "bg-info/10";
+};
+/**
+ * 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";
+};
+/**
+ * Border color classes
+ * Used by: Checkbox, Radio, Input borders
+ */
+declare const borderColorClasses: {
+    readonly default: "border-border";
+    readonly primary: "border-primary";
+    readonly secondary: "border-secondary";
+    readonly accent: "border-accent";
+    readonly success: "border-success";
+    readonly error: "border-error";
+    readonly warning: "border-warning";
+    readonly info: "border-info";
+};
+/**
+ * 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 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)]";
+};
 /**
  * Icon color variants mapped to component colors
- * Used by: Checkbox, Radio, and other components with colored icons
- *
- * Maps to Tailwind utilities: text-primary, text-secondary, etc.
- * Generated from theme variables: --color-primary, --color-secondary, etc.
+ * @deprecated Use textColorClasses instead
  */
 declare const iconColorClasses: {
+    readonly default: "text-text-primary";
     readonly primary: "text-primary";
     readonly secondary: "text-secondary";
     readonly accent: "text-accent";
@@ -219,6 +377,7 @@ declare const iconColorClasses: {
 };
 /**
  * Helper to get icon color class for a given color
+ * @deprecated Use textColorClasses[color] instead
  */
 declare function getIconColorClass(color: ButtonColor$1): string;
 /**
@@ -230,25 +389,14 @@ 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
+ * Standard component size scale (4 sizes: xs, sm, md, lg)
+ * Used by: All components - this is the standardized size scale
  */
 declare const componentSizeVariants: {
-    readonly sm: "sm";
-    readonly md: "md";
-    readonly lg: "lg";
-    readonly xl: "xl";
-};
-/**
- * Extended component size scale (5 sizes)
- * Used by: Components that need extra small sizing
- */
-declare const extendedComponentSizeVariants: {
     readonly xs: "xs";
     readonly sm: "sm";
     readonly md: "md";
     readonly lg: "lg";
-    readonly xl: "xl";
 };
 /**
  * Common spacing values for consistent gaps, padding, and margins
@@ -286,9 +434,137 @@ declare function getAccordionColorClass(color: ComponentColor, variant: 'default
  * @returns Background class string
  */
 declare function getCheckboxColorClass(color: ButtonColor$1): string;
+/**
+ * Generates compound variants for notification solid style (with foreground text)
+ * Used by: Notification, Alert components
+ */
+declare function createNotificationSolidColorVariants(colors: readonly string[]): {
+    variant: "solid";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Generates compound variants for notification outlined style (border with thick left border)
+ * Used by: Notification, Alert components
+ */
+declare function createNotificationOutlinedColorVariants(colors: readonly string[]): {
+    variant: "outlined";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Generates compound variants for notification soft style (subtle bg with left border)
+ * Used by: Notification, Alert components
+ */
+declare function createNotificationSoftColorVariants(colors: readonly string[]): {
+    variant: "soft";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Notification variant type
+ */
+type NotificationVariantType = 'default' | 'solid' | 'outlined' | 'soft';
+/**
+ * Complete notification color variant generator
+ */
+declare function createNotificationColorVariants(colors: readonly string[], variants: NotificationVariantType[]): any[];
+/**
+ * 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";
+};
+/**
+ * Generates compound variants for tooltip soft style
+ * Used by: Tooltip component soft variant
+ */
+declare function createTooltipSoftColorVariants(colors: readonly string[]): {
+    variant: "soft";
+    color: ComponentColor;
+    className: string;
+}[];
+/**
+ * Generates compound variants for Kbd solid style
+ * Used by: Kbd component
+ */
+declare function createKbdSolidColorVariants(colors: readonly string[]): {
+    variant: "solid";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Generates compound variants for Kbd outline style
+ * Used by: Kbd component
+ */
+declare function createKbdOutlineColorVariants(colors: readonly string[]): {
+    variant: "outline";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Generates compound variants for Kbd soft style
+ * Used by: Kbd component
+ */
+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
+ */
+declare function createKbdColorVariants(colors: readonly string[], variants: KbdVariantType[]): any[];
+/**
+ * Generates compound variants for Popover default style
+ * Used by: Popover component
+ */
+declare function createPopoverDefaultColorVariants(colors: readonly string[]): {
+    variant: "default";
+    color: ComponentColor;
+    class: string;
+}[];
+/**
+ * Generates compound variants for Popover solid style
+ * Used by: Popover component
+ */
+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
+ */
+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
+ */
+declare function createPopoverColorVariants(colors: readonly string[], variants: PopoverVariantType[]): any[];
 
-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 AccordionItem {
     /**
      * Unique key for the accordion item
@@ -307,9 +583,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 +602,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,30 +634,305 @@ 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;
+    /**
+     * Reference to the accordion container
+     */
+    ref?: React.Ref<HTMLDivElement>;
 }
 
 declare const Accordion: React__default.NamedExoticComponent<AccordionProps>;
 
+/**
+ * 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 AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Image source URL
+     */
+    src?: string;
+    /**
+     * Alternative text for the image
+     */
+    alt?: string;
+    /**
+     * Fallback text (initials) when image fails to load
+     * If not provided, will try to generate from `name` prop
+     */
+    fallback?: string;
+    /**
+     * User's name - used to auto-generate initials if fallback not provided
+     */
+    name?: string;
+    /**
+     * Avatar size
+     * @default 'md'
+     */
+    size?: AvatarSize;
+    /**
+     * Avatar shape
+     * @default 'circle'
+     */
+    shape?: AvatarShape;
+    /**
+     * Status indicator
+     */
+    status?: AvatarStatus;
+    /**
+     * Background color for fallback/initials
+     * @default 'default'
+     */
+    color?: AvatarColor;
+    /**
+     * Show border/ring around avatar
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Custom icon to show as fallback instead of initials
+     */
+    icon?: React.ReactNode;
+    /**
+     * Badge content (number, icon, or custom element)
+     * Displayed at top-right corner
+     */
+    badge?: React.ReactNode;
+    /**
+     * Whether avatar is in disabled state
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when image fails to load
+     */
+    onError?: (event: React.SyntheticEvent<HTMLImageElement>) => void;
+    /**
+     * Additional CSS class
+     */
+    className?: string;
+    /**
+     * 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;
+    /**
+     * 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';
@@ -392,114 +959,349 @@ interface BreadcrumbItemData {
      */
     rightIcon?: ReactNode;
     /**
-     * Whether this item should be shown as an ellipsis dropdown
+     * 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;
+}
+
+declare const Breadcrumb: React__default.NamedExoticComponent<BreadcrumbProps>;
+
+type ButtonVariant = ComponentVariantExtended | "soft";
+type ButtonColor = ButtonColor$1;
+type ButtonSize = "xs" | "sm" | "md" | "lg";
+type ButtonShape = "rounded" | "pill" | "square";
+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;
+    /**
+     * Reference to the button element
+     */
+    ref?: React.Ref<HTMLButtonElement>;
+}
+
+declare const Button: React__default.NamedExoticComponent<ButtonProps>;
+
+interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Children elements (typically Button components)
+     */
+    children: React.ReactNode;
+    /**
+     * Display buttons vertically instead of horizontally
+     * @default false
+     */
+    vertical?: boolean;
+    /**
+     * 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'
+     */
+    gap?: 'sm' | 'md' | 'lg';
+    /**
+     * 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;
+    /**
+     * 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>;
+
+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 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
      */
-    ellipsis?: boolean;
+    bordered?: boolean;
     /**
-     * Orientation of ellipsis icon
+     * Show loading skeleton state
+     * @default false
      */
-    ellipsisOrientation?: 'horizontal' | 'vertical';
+    loading?: boolean;
     /**
-     * Items to show in the ellipsis dropdown
+     * Reference to the card element
      */
-    ellipsisItems?: Array<{
-        label: string;
-        href?: string;
-        onClick?: () => void;
-    }>;
+    ref?: React.Ref<HTMLDivElement>;
 }
-interface BreadcrumbProps {
+interface CardHeaderProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * Breadcrumb items to render
+     * Reference to the header element
      */
-    items?: BreadcrumbItemData[];
+    ref?: React.Ref<HTMLDivElement>;
+}
+interface CardTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {
     /**
-     * Manual children (alternative to items prop)
+     * HTML heading level
+     * @default 3
      */
-    children?: ReactNode;
+    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
     /**
-     * Theme color
+     * Reference to the title element
      */
-    color?: BreadcrumbsColor;
+    ref?: React.Ref<HTMLHeadingElement>;
+}
+interface CardDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {
     /**
-     * Size variant
+     * Reference to the description element
      */
-    size?: BreadcrumbsSize;
+    ref?: React.Ref<HTMLParagraphElement>;
+}
+interface CardContentProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * Custom separator element
+     * Reference to the content element
      */
-    separator?: ReactNode;
+    ref?: React.Ref<HTMLDivElement>;
+}
+interface CardFooterProps extends React.HTMLAttributes<HTMLDivElement> {
     /**
-     * Additional CSS class
+     * Reference to the footer element
      */
-    className?: string;
+    ref?: React.Ref<HTMLDivElement>;
 }
-
-declare const Breadcrumb: React__default.NamedExoticComponent<BreadcrumbProps>;
-
-type ButtonVariant = ComponentVariantExtended;
-type ButtonColor = ButtonColor$1;
-type ButtonSize = 'xs' | 'sm' | 'md' | 'lg';
-interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
-    variant?: ButtonVariant;
-    color?: ButtonColor;
-    size?: ButtonSize;
-    loading?: boolean;
-    loadingText?: string;
-    leftIcon?: React.ReactNode;
-    rightIcon?: React.ReactNode;
-    fullWidth?: boolean;
-    ref?: React.Ref<HTMLButtonElement>;
+interface CardActionProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Reference to the action element
+     */
+    ref?: React.Ref<HTMLDivElement>;
 }
-
-declare const Button: React__default.NamedExoticComponent<ButtonProps>;
-
-interface ButtonGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+interface CardImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     /**
-     * Children elements (typically Button components)
+     * Image source URL
      */
-    children: React.ReactNode;
+    src: string;
     /**
-     * Display buttons vertically instead of horizontally
+     * Alt text for accessibility
      */
-    vertical?: boolean;
+    alt: string;
     /**
-     * Add spacing between buttons
+     * Position of the image in the card
+     * @default 'top'
      */
-    spacing?: boolean;
+    position?: 'top' | 'bottom';
     /**
-     * Make buttons take full width
+     * Aspect ratio of the image container
+     * @default 'video' (16:9)
      */
-    fullWidth?: boolean;
+    aspectRatio?: 'square' | 'video' | 'wide' | 'auto';
     /**
-     * Additional CSS class
+     * How the image should fit its container
+     * @default 'cover'
      */
-    className?: string;
+    objectFit?: 'cover' | 'contain' | 'fill' | 'none';
     /**
-     * Reference to the div element
+     * Reference to the image element
      */
-    ref?: React.Ref<HTMLDivElement>;
+    ref?: React.Ref<HTMLImageElement>;
 }
 
-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>;
-}
-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 CarouselProps extends SwiperProps {
     withArrows?: boolean;
     withPagination?: boolean;
-    children: React.ReactNode;
+    children: React__default.ReactNode;
 }
-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 CascaderOption {
     /**
      * Display label for the option
@@ -517,6 +1319,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 +1347,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 +1366,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,34 +1412,107 @@ 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;
     /**
      * 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';
@@ -698,6 +1590,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,6 +1603,10 @@ interface ClipboardProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Reference to the element
+     */
+    ref?: React.Ref<HTMLDivElement>;
 }
 
 declare const Clipboard: React__default.NamedExoticComponent<ClipboardProps>;
@@ -753,10 +1654,105 @@ interface CollapseProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Reference to the element
+     */
+    ref?: React.Ref<HTMLDivElement>;
 }
 
 declare const Collapse: React__default.NamedExoticComponent<CollapseProps>;
 
+/**
+ * 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;
+    /** Whether to disable the context menu */
+    disabled?: boolean;
+    /** Handler called when menu opens or closes */
+    onOpenChange?: (open: boolean) => void;
+    /** Controlled open state */
+    open?: boolean;
+}
+
+/**
+ * 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, disabled, onOpenChange, open: controlledOpen, }: ContextMenuProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
 interface DescriptionsItem {
     key: string;
     label: React.ReactNode;
@@ -993,7 +1989,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;
@@ -1049,7 +2045,7 @@ interface ImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {
     height?: number;
 }
 
-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';
@@ -1057,7 +2053,6 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
     variant?: InputVariant;
     size?: InputSize;
     label?: string;
-    floatingLabel?: boolean;
     messagePosition?: MessagePosition;
     clearable?: boolean;
     onClear?: () => void;
@@ -1069,18 +2064,25 @@ interface InputProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, '
 
 declare const Input: React__default.NamedExoticComponent<InputProps>;
 
+type InputGroupSize = 'xs' | 'sm' | 'md' | 'lg';
 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;
 }
 
-declare const InputGroup: React$1.NamedExoticComponent<InputGroupProps>;
+declare const InputGroup: React__default.NamedExoticComponent<InputGroupProps>;
 
 type InputOTPSize = 'xs' | 'sm' | 'md' | 'lg';
 interface InputOTPProps {
@@ -1767,21 +2769,29 @@ interface StepperProps {
 
 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 = "primary" | "secondary" | "accent" | "success" | "error" | "warning" | "info";
+type SwitchSize = "xs" | "sm" | "md" | "lg";
+type SwitchLabelPosition = "left" | "right";
+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,8 +2802,31 @@ 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
      */
@@ -1929,6 +2962,67 @@ interface TabsProps {
 
 declare const Tabs: React__default.NamedExoticComponent<TabsProps>;
 
+type TagVariant = 'default' | 'solid' | 'outline' | 'soft';
+type TagColor = ComponentColor;
+type TagSize = Exclude<ComponentSize, 'xl'>;
+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;
+    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';
@@ -2447,7 +3541,7 @@ interface UploadProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>,
 
 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,39 +3597,66 @@ 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;
+declare const Command: {
+    ({ className, size, ...props }: React$1.ComponentProps<typeof Command$1> & {
+        size?: CommandSize;
+    }): 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, ...props }: Omit<React$1.ComponentProps<typeof Command$1.Input>, "size"> & {
+        size?: CommandSize;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const CommandList: {
+    ({ className, size, ...props }: React$1.ComponentProps<typeof Command$1.List> & {
+        size?: CommandSize;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const CommandEmpty: {
+    ({ size, ...props }: React$1.ComponentProps<typeof Command$1.Empty> & {
+        size?: CommandSize;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const CommandGroup: {
+    ({ className, size, ...props }: React$1.ComponentProps<typeof Command$1.Group> & {
+        size?: CommandSize;
+    }): 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, ...props }: React$1.ComponentProps<typeof Command$1.Item> & {
+        size?: CommandSize;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const CommandShortcut: {
+    ({ className, size, ...props }: React$1.ComponentProps<"span"> & {
+        size?: CommandSize;
+    }): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
 
 type DatePickerVariant = 'outline' | 'filled';
 type DatePickerSize = 'xs' | 'sm' | 'md' | 'lg';
@@ -2590,7 +3711,8 @@ 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";
 interface DrawerProps {
     /**
      * Controlled open state
@@ -2602,12 +3724,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 +3764,57 @@ 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>;
+}
+interface DrawerOverlayProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * Reference to the overlay element
+     */
+    ref?: React.Ref<HTMLDivElement>;
 }
 interface DrawerHeaderProps {
     /**
@@ -2642,6 +3825,10 @@ interface DrawerHeaderProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Reference to the header element
+     */
+    ref?: React.Ref<HTMLDivElement>;
 }
 interface DrawerFooterProps {
     /**
@@ -2652,6 +3839,10 @@ interface DrawerFooterProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Reference to the footer element
+     */
+    ref?: React.Ref<HTMLDivElement>;
 }
 interface DrawerTitleProps {
     /**
@@ -2662,6 +3853,10 @@ interface DrawerTitleProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Reference to the title element
+     */
+    ref?: React.Ref<HTMLHeadingElement>;
 }
 interface DrawerDescriptionProps {
     /**
@@ -2672,6 +3867,10 @@ interface DrawerDescriptionProps {
      * Additional CSS class
      */
     className?: string;
+    /**
+     * Reference to the description element
+     */
+    ref?: React.Ref<HTMLParagraphElement>;
 }
 interface DrawerCloseProps {
     /**
@@ -2680,21 +3879,24 @@ 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>;
@@ -2752,4 +3954,4 @@ interface TransferProps {
 
 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, AreaChart, Avatar, AvatarGroup, Badge, BarChart, type BaseOption, Breadcrumb as Breadcrumbs, Button, type ButtonColor$1 as ButtonColor, ButtonGroup, CardWithSubComponents as 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, ContextMenu, 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, type KbdVariantType, LineChart, type LoadingProps, type MessagePosition, ComposedModal as Modal, MultiSelect, Notification, type NotificationVariantType, Pagination, PieChart, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, type PopoverVariantType, Progress, Radio, RadioGroup, RangePickerComponent as RangePicker, Rating, type RequiredProps, Ribbon, Select, Skeleton, Slider, Spinner, Stepper, type StyleVariantType, Switch, Table, Tabs, Tag, type TextColorVariants, Textarea, TimePickerComponent as TimePicker, Toggle, ToggleGroup, Tooltip, Transfer, Tree, TreeSelect, Upload, type ValidationMessages, bgColorClasses, bgSkeletonColorClasses, bgSoftColorClasses, borderColorClasses, buttonColors, checkboxBorderColorClasses, checkedColorClasses, cn, commonSpacing, componentColors, componentSizeVariants, createAllColorVariants, createDashedColorVariants, createDefaultColorVariants, createGhostColorVariants, createKbdColorVariants, createKbdOutlineColorVariants, createKbdSoftColorVariants, createKbdSolidColorVariants, createLinkColorVariants, createNotificationColorVariants, createNotificationOutlinedColorVariants, createNotificationSoftColorVariants, createNotificationSolidColorVariants, createOutlineColorVariants, createPopoverColorVariants, createPopoverDefaultColorVariants, createPopoverSoftColorVariants, createPopoverSolidColorVariants, createSoftColorVariants, createSolidColorVariants, createTooltipSoftColorVariants, focusRingColorClasses, getAccordionColorClass, getCheckboxColorClass, getIconColorClass, getValidationStatus, iconColorClasses, iconSizes, radioCheckedColorClasses, switchTrackColorClasses, textColorClasses, textColorVariants, textForegroundColorClasses, tooltipSolidColorClasses };