@hypoth-ui/react 0.1.0

package/dist/client-8T-8F3H4.d.ts

@@ -0,0 +1,1885 @@
+import * as react from 'react';
+import react__default, { ButtonHTMLAttributes, MouseEvent as MouseEvent$1, InputHTMLAttributes, AnchorHTMLAttributes, ReactNode, CSSProperties, HTMLAttributes, RefObject, SyntheticEvent } from 'react';
+
+/**
+ * Responsive Utilities
+ *
+ * Provides types and utilities for breakpoint-aware component props.
+ * Supports responsive object syntax for size and other props.
+ *
+ * @packageDocumentation
+ */
+/**
+ * Breakpoint names matching the design token system
+ */
+type Breakpoint = "base" | "sm" | "md" | "lg" | "xl" | "2xl";
+/**
+ * Responsive prop value type
+ *
+ * Can be either:
+ * - A single value (applies to all breakpoints)
+ * - An object with breakpoint keys (applies at each breakpoint)
+ *
+ * @example
+ * ```tsx
+ * // Single value
+ * <Button size="md" />
+ *
+ * // Responsive object
+ * <Button size={{ base: "sm", md: "md", lg: "lg" }} />
+ * ```
+ */
+type ResponsiveProp<T> = T | Partial<Record<Breakpoint, T>>;
+
+type ButtonVariant = "primary" | "secondary" | "ghost" | "destructive";
+type ButtonSize = "sm" | "md" | "lg";
+interface ButtonProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, "onClick"> {
+    /** Visual style variant */
+    variant?: ButtonVariant;
+    /**
+     * Button size - supports responsive object syntax
+     * @example
+     * ```tsx
+     * // Single value
+     * <Button size="md" />
+     *
+     * // Responsive
+     * <Button size={{ base: "sm", md: "md", lg: "lg" }} />
+     * ```
+     */
+    size?: ResponsiveProp<ButtonSize>;
+    /** Loading state */
+    loading?: boolean;
+    /** Click handler */
+    onClick?: (event: MouseEvent$1<HTMLElement>) => void;
+    /** Button content */
+    children?: react__default.ReactNode;
+}
+/**
+ * React wrapper for ds-button Web Component.
+ * Provides type-safe props and event handling.
+ */
+declare const Button: react__default.ForwardRefExoticComponent<ButtonProps & react__default.RefAttributes<HTMLElement>>;
+
+type InputType = "text" | "email" | "password" | "number" | "tel" | "url" | "search";
+type InputSize = "sm" | "md" | "lg";
+interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "size" | "onChange" | "onInput"> {
+    /** Input type */
+    type?: InputType;
+    /**
+     * Input size - supports responsive object syntax
+     * @example
+     * ```tsx
+     * // Single value
+     * <Input size="md" />
+     *
+     * // Responsive
+     * <Input size={{ base: "sm", md: "md", lg: "lg" }} />
+     * ```
+     */
+    size?: ResponsiveProp<InputSize>;
+    /** Error state */
+    error?: boolean;
+    /** Change handler - fires when input loses focus with changed value */
+    onChange?: (value: string, event: Event) => void;
+    /** Value change handler - fires on every keystroke */
+    onValueChange?: (value: string, event: Event) => void;
+}
+/**
+ * React wrapper for ds-input Web Component.
+ * Provides type-safe props and event handling.
+ */
+declare const Input: react__default.ForwardRefExoticComponent<InputProps & react__default.RefAttributes<HTMLElement>>;
+
+/**
+ * Event type definitions for React wrapper components.
+ * These types match the custom events emitted by Web Components.
+ */
+/**
+ * Event detail for ds:navigate custom event from ds-link.
+ */
+interface DsNavigateEventDetail {
+    /** The target URL */
+    href: string;
+    /** Whether the link opens in a new tab */
+    external: boolean;
+    /** The original DOM event that triggered navigation */
+    originalEvent: MouseEvent | KeyboardEvent;
+}
+/**
+ * Event detail for input value changes.
+ */
+interface DsInputEventDetail {
+    value: string;
+}
+/**
+ * Typed event handler for ds:navigate.
+ */
+type NavigateEventHandler = (event: CustomEvent<DsNavigateEventDetail>) => void;
+/**
+ * Typed event handler for input events.
+ */
+type InputValueHandler = (value: string, event: CustomEvent<DsInputEventDetail>) => void;
+
+/**
+ * Polymorphic type utilities for asChild pattern.
+ */
+/**
+ * Spacing values supported by Box component.
+ * Maps to design system spacing tokens.
+ */
+type SpacingValue = 0 | 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 12 | 16 | 20 | 24;
+/**
+ * Display values for Box component.
+ */
+type DisplayValue = "block" | "inline" | "inline-block" | "flex" | "inline-flex" | "grid" | "inline-grid" | "none";
+/**
+ * Flex direction values.
+ */
+type FlexDirection = "row" | "row-reverse" | "column" | "column-reverse";
+/**
+ * Alignment values for flex/grid.
+ */
+type AlignValue = "start" | "end" | "center" | "stretch" | "baseline";
+/**
+ * Justify values for flex/grid.
+ */
+type JustifyValue = "start" | "end" | "center" | "between" | "around" | "evenly";
+/**
+ * Base props for components supporting asChild pattern.
+ */
+interface AsChildProps {
+    /**
+     * When true, the component renders its child element with merged props
+     * instead of its default element.
+     */
+    asChild?: boolean;
+}
+
+type LinkVariant = "default" | "muted" | "underline";
+interface LinkProps extends Omit<AnchorHTMLAttributes<HTMLAnchorElement>, "href">, AsChildProps {
+    /** Target URL */
+    href: string;
+    /** Whether the link opens in a new tab */
+    external?: boolean;
+    /** Visual variant */
+    variant?: LinkVariant;
+    /** Handler for ds:navigate event. Can prevent default navigation. */
+    onNavigate?: NavigateEventHandler;
+    /** Link content */
+    children?: ReactNode;
+}
+/**
+ * React wrapper for ds-link Web Component.
+ * Provides type-safe props and onNavigate event handler.
+ * Supports asChild for Next.js Link integration.
+ */
+declare const Link: react.ForwardRefExoticComponent<LinkProps & react.RefAttributes<HTMLElement>>;
+
+type IconSize = "xs" | "sm" | "md" | "lg" | "xl";
+/**
+ * Icon name from Lucide library (kebab-case format).
+ * This is a nominal type alias to document the expected format.
+ */
+type IconName = string;
+interface IconProps {
+    /** Icon name from Lucide library (kebab-case) */
+    name: string;
+    /**
+     * Icon size - supports responsive object syntax
+     * @example
+     * ```tsx
+     * // Single value
+     * <Icon name="check" size="md" />
+     *
+     * // Responsive
+     * <Icon name="check" size={{ base: "sm", md: "md", lg: "lg" }} />
+     * ```
+     */
+    size?: ResponsiveProp<IconSize>;
+    /** Accessible label. When omitted, icon is decorative. */
+    label?: string;
+    /** Custom color (CSS value) */
+    color?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * React wrapper for ds-icon Web Component.
+ * Provides type-safe props for icon display.
+ */
+declare const Icon: react.ForwardRefExoticComponent<IconProps & react.RefAttributes<HTMLElement>>;
+
+type SpinnerSize = "sm" | "md" | "lg";
+interface SpinnerProps {
+    /**
+     * Spinner size - supports responsive object syntax
+     * @example
+     * ```tsx
+     * // Single value
+     * <Spinner size="md" />
+     *
+     * // Responsive
+     * <Spinner size={{ base: "sm", md: "md" }} />
+     * ```
+     */
+    size?: ResponsiveProp<SpinnerSize>;
+    /** Accessible label for screen readers */
+    label?: string;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * React wrapper for ds-spinner Web Component.
+ * Provides type-safe props for loading indicator.
+ */
+declare const Spinner: react.ForwardRefExoticComponent<SpinnerProps & react.RefAttributes<HTMLElement>>;
+
+interface VisuallyHiddenProps {
+    /** When true, content becomes visible on focus */
+    focusable?: boolean;
+    /** Hidden content */
+    children: ReactNode;
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * React wrapper for ds-visually-hidden Web Component.
+ * Hides content visually while keeping it accessible to screen readers.
+ */
+declare const VisuallyHidden: react.ForwardRefExoticComponent<VisuallyHiddenProps & react.RefAttributes<HTMLElement>>;
+
+type TextSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type TextWeight = "normal" | "medium" | "semibold" | "bold";
+type TextVariant = "default" | "muted" | "success" | "warning" | "error";
+interface TextProps extends AsChildProps {
+    /** Text size */
+    size?: TextSize;
+    /** Font weight */
+    weight?: TextWeight;
+    /** Color variant */
+    variant?: TextVariant;
+    /** Truncate text with ellipsis */
+    truncate?: boolean;
+    /** Additional CSS classes */
+    className?: string;
+    /** Text content */
+    children?: ReactNode;
+}
+/**
+ * Text is a typography primitive that applies consistent text styling.
+ * Supports asChild for semantic HTML elements (h1-h6, p, etc.).
+ *
+ * @example
+ * ```tsx
+ * <Text size="lg" weight="bold">Large bold text</Text>
+ *
+ * <Text size="2xl" weight="bold" asChild>
+ *   <h1>Page Title</h1>
+ * </Text>
+ *
+ * <Text variant="muted" asChild>
+ *   <p>Muted paragraph text</p>
+ * </Text>
+ * ```
+ */
+declare const Text: react.ForwardRefExoticComponent<TextProps & react.RefAttributes<HTMLElement>>;
+
+interface BoxProps extends AsChildProps {
+    p?: SpacingValue;
+    px?: SpacingValue;
+    py?: SpacingValue;
+    pt?: SpacingValue;
+    pr?: SpacingValue;
+    pb?: SpacingValue;
+    pl?: SpacingValue;
+    m?: SpacingValue;
+    mx?: SpacingValue;
+    my?: SpacingValue;
+    mt?: SpacingValue;
+    mr?: SpacingValue;
+    mb?: SpacingValue;
+    ml?: SpacingValue;
+    gap?: SpacingValue;
+    display?: DisplayValue;
+    flexDirection?: FlexDirection;
+    alignItems?: AlignValue;
+    justifyContent?: JustifyValue;
+    flexWrap?: "wrap" | "nowrap" | "wrap-reverse";
+    flexGrow?: 0 | 1;
+    flexShrink?: 0 | 1;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}
+/**
+ * Box is a layout primitive that applies spacing and layout CSS classes.
+ * Supports asChild for semantic HTML rendering.
+ *
+ * @example
+ * ```tsx
+ * <Box p={4} display="flex" gap={2}>
+ *   <span>Item 1</span>
+ *   <span>Item 2</span>
+ * </Box>
+ *
+ * <Box p={6} asChild>
+ *   <main>Content</main>
+ * </Box>
+ * ```
+ */
+declare const Box: react.ForwardRefExoticComponent<BoxProps & react.RefAttributes<HTMLElement>>;
+
+interface SlotProps extends HTMLAttributes<HTMLElement> {
+    children?: ReactNode;
+}
+/**
+ * Slot renders its child element with merged props.
+ * Used internally by asChild implementations.
+ *
+ * - Validates that children is a single React element
+ * - Merges props (className concatenated, styles merged, events composed)
+ * - Forwards refs to the child element
+ */
+declare const Slot: react.ForwardRefExoticComponent<SlotProps & react.RefAttributes<HTMLElement>>;
+
+/**
+ * Portal React Component
+ *
+ * Renders children into a DOM node outside the parent component hierarchy.
+ * Useful for modals, tooltips, dropdowns, and other overlay patterns.
+ */
+
+interface PortalProps {
+    /** Content to render in the portal */
+    children: ReactNode;
+    /** Container element to render into (defaults to document.body) */
+    container?: Element | null;
+    /** CSS selector for container element (alternative to container prop) */
+    containerSelector?: string;
+    /** Whether the portal is disabled (renders children in place) */
+    disabled?: boolean;
+}
+/**
+ * Portal component for rendering content outside the normal React tree.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage - renders to document.body
+ * <Portal>
+ *   <div className="modal">Modal content</div>
+ * </Portal>
+ *
+ * // Custom container
+ * <Portal container={document.getElementById('portal-root')}>
+ *   <div className="dropdown">Dropdown content</div>
+ * </Portal>
+ *
+ * // Using selector
+ * <Portal containerSelector="#portal-root">
+ *   <div>Content</div>
+ * </Portal>
+ *
+ * // Disabled portal (renders in place)
+ * <Portal disabled>
+ *   <div>Renders here instead</div>
+ * </Portal>
+ * ```
+ */
+declare function Portal({ children, container, containerSelector, disabled, }: PortalProps): ReactNode;
+declare namespace Portal {
+    var displayName: string;
+}
+
+interface FocusScopeProps {
+    /** Content to wrap with focus management */
+    children: ReactNode;
+    /** Whether to trap focus within the scope */
+    trap?: boolean;
+    /** Whether to restore focus to the previously focused element on unmount */
+    restoreFocus?: boolean;
+    /** Whether to auto-focus the first focusable element on mount */
+    autoFocus?: boolean;
+    /** Ref to element to focus on mount (overrides autoFocus behavior) */
+    initialFocus?: RefObject<HTMLElement>;
+    /** Ref to element to restore focus to on unmount */
+    returnFocus?: RefObject<HTMLElement>;
+    /** Callback when focus leaves the scope (only when trap is false) */
+    onFocusOutside?: (event: FocusEvent) => void;
+    /** Whether the focus scope is active */
+    active?: boolean;
+    /** Additional class name for the wrapper */
+    className?: string;
+    /** Render as a different element */
+    as?: keyof JSX.IntrinsicElements;
+}
+interface FocusScopeRef {
+    /** Focus the first focusable element */
+    focusFirst: () => void;
+    /** Focus the last focusable element */
+    focusLast: () => void;
+    /** Get all focusable elements */
+    getFocusableElements: () => HTMLElement[];
+}
+/**
+ * FocusScope component for managing focus within a container.
+ *
+ * @example
+ * ```tsx
+ * // Basic modal usage
+ * <FocusScope trap restoreFocus autoFocus>
+ *   <div role="dialog" aria-modal="true">
+ *     <input placeholder="First input" />
+ *     <button>Close</button>
+ *   </div>
+ * </FocusScope>
+ *
+ * // With initial focus
+ * const submitRef = useRef<HTMLButtonElement>(null);
+ *
+ * <FocusScope trap restoreFocus initialFocus={submitRef}>
+ *   <input />
+ *   <button ref={submitRef}>Submit</button>
+ * </FocusScope>
+ *
+ * // Controlled activation
+ * <FocusScope trap active={isOpen}>
+ *   {children}
+ * </FocusScope>
+ * ```
+ */
+declare const FocusScope: react.ForwardRefExoticComponent<FocusScopeProps & react.RefAttributes<FocusScopeRef>>;
+
+/**
+ * ClientOnly React Component
+ *
+ * Prevents SSR for browser-only components. Renders fallback on server
+ * and during hydration, then shows children after client-side mount.
+ */
+
+interface ClientOnlyProps {
+    /** Content to render only on the client */
+    children: ReactNode;
+    /** Fallback content to show during SSR and hydration */
+    fallback?: ReactNode;
+}
+/**
+ * ClientOnly component for browser-only rendering.
+ *
+ * Useful for components that:
+ * - Access browser APIs (window, document, localStorage)
+ * - Use third-party libraries that don't support SSR
+ * - Need to avoid hydration mismatches
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <ClientOnly>
+ *   <BrowserOnlyChart data={data} />
+ * </ClientOnly>
+ *
+ * // With fallback
+ * <ClientOnly fallback={<Skeleton height={300} />}>
+ *   <Chart data={data} />
+ * </ClientOnly>
+ *
+ * // For localStorage access
+ * <ClientOnly fallback={<span>Loading preferences...</span>}>
+ *   <UserPreferences />
+ * </ClientOnly>
+ * ```
+ */
+declare function ClientOnly({ children, fallback }: ClientOnlyProps): ReactNode;
+declare namespace ClientOnly {
+    var displayName: string;
+}
+/**
+ * Hook for client-only rendering logic.
+ *
+ * @returns true when running on the client after hydration
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const isClient = useIsClient();
+ *
+ *   if (!isClient) {
+ *     return <Skeleton />;
+ *   }
+ *
+ *   return <ClientSideContent />;
+ * }
+ * ```
+ */
+declare function useIsClient(): boolean;
+
+type AlertVariant = "info" | "success" | "warning" | "error";
+interface AlertProps extends Omit<HTMLAttributes<HTMLElement>, "title"> {
+    /** Visual variant */
+    variant?: AlertVariant;
+    /** Alert title */
+    title?: string;
+    /** Whether the alert can be closed */
+    closable?: boolean;
+    /** Hide the default icon */
+    hideIcon?: boolean;
+    /** Custom icon element */
+    icon?: ReactNode;
+    /** Action slot content */
+    action?: ReactNode;
+    /** Callback when close button is clicked */
+    onClose?: () => void;
+    /** Alert content/description */
+    children?: ReactNode;
+}
+/**
+ * Alert component for contextual feedback messages.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Alert variant="success" title="Success">
+ *   Your changes have been saved.
+ * </Alert>
+ *
+ * // Closable alert
+ * <Alert variant="error" title="Error" closable onClose={() => setShowAlert(false)}>
+ *   An error occurred while saving.
+ * </Alert>
+ *
+ * // With action
+ * <Alert variant="warning" title="Warning" action={<Button size="sm">Undo</Button>}>
+ *   This action cannot be reversed.
+ * </Alert>
+ * ```
+ */
+declare const Alert: react.ForwardRefExoticComponent<AlertProps & react.RefAttributes<HTMLDivElement>>;
+
+type ToastVariant = "info" | "success" | "warning" | "error";
+type ToastPosition = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastState = "entering" | "visible" | "exiting" | "dismissed";
+interface ToastAction {
+    label: string;
+    onClick: () => void;
+}
+interface ToastOptions$1 {
+    title: string;
+    description?: string;
+    variant?: ToastVariant;
+    duration?: number;
+    action?: ToastAction;
+}
+interface ToastData extends ToastOptions$1 {
+    id: string;
+    state: ToastState;
+    createdAt: number;
+}
+interface ToastProviderProps {
+    /** Toast position */
+    position?: ToastPosition;
+    /** Maximum simultaneous toasts */
+    max?: number;
+    /** Default duration in ms */
+    duration?: number;
+    /** Children (your app) */
+    children: ReactNode;
+}
+/**
+ * Toast Provider component.
+ *
+ * @example
+ * ```tsx
+ * <Toast.Provider position="top-right" max={5}>
+ *   <App />
+ * </Toast.Provider>
+ * ```
+ */
+declare function ToastProvider({ position, max, duration: defaultDuration, children, }: ToastProviderProps): ReactNode;
+declare namespace ToastProvider {
+    var displayName: string;
+}
+
+interface ToastOptions {
+    /** Toast title (required) */
+    title: string;
+    /** Optional description */
+    description?: string;
+    /** Visual variant */
+    variant?: "info" | "success" | "warning" | "error";
+    /** Auto-dismiss duration in ms (0 = no auto-dismiss) */
+    duration?: number;
+    /** Optional action button */
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+interface UseToastReturn {
+    /** Show a toast notification */
+    toast: (options: ToastOptions) => string;
+    /** Dismiss a specific toast */
+    dismiss: (id: string) => void;
+    /** Dismiss all toasts */
+    dismissAll: () => void;
+}
+/**
+ * Hook for showing toast notifications.
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { toast, dismiss } = useToast();
+ *
+ *   const handleSave = async () => {
+ *     try {
+ *       await saveData();
+ *       toast({ title: "Saved!", variant: "success" });
+ *     } catch {
+ *       toast({
+ *         title: "Error",
+ *         description: "Failed to save",
+ *         variant: "error",
+ *         action: { label: "Retry", onClick: handleSave },
+ *       });
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleSave}>Save</button>;
+ * }
+ * ```
+ */
+declare function useToast(): UseToastReturn;
+
+/**
+ * Toast Compound Component
+ *
+ * Non-blocking notification system with queue management and animations.
+ */
+
+/**
+ * Toast compound component.
+ *
+ * @example
+ * ```tsx
+ * // In your app root (e.g., layout.tsx)
+ * import { Toast } from "@hypoth-ui/react/client";
+ *
+ * export default function RootLayout({ children }) {
+ *   return (
+ *     <html>
+ *       <body>
+ *         <Toast.Provider position="top-right" max={5}>
+ *           {children}
+ *         </Toast.Provider>
+ *       </body>
+ *     </html>
+ *   );
+ * }
+ *
+ * // In any component
+ * import { useToast } from "@hypoth-ui/react/client";
+ *
+ * function SaveButton() {
+ *   const { toast } = useToast();
+ *
+ *   const handleSave = async () => {
+ *     try {
+ *       await save();
+ *       toast({ title: "Saved!", variant: "success" });
+ *     } catch {
+ *       toast({
+ *         title: "Error",
+ *         description: "Failed to save",
+ *         variant: "error",
+ *         action: { label: "Retry", onClick: handleSave },
+ *       });
+ *     }
+ *   };
+ *
+ *   return <button onClick={handleSave}>Save</button>;
+ * }
+ * ```
+ */
+declare const Toast: {
+    readonly Provider: typeof ToastProvider;
+};
+
+type ProgressVariant = "linear" | "circular";
+type ProgressSize = "sm" | "md" | "lg";
+interface ProgressProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * Current progress value (0-100). Omit for indeterminate.
+     */
+    value?: number;
+    /**
+     * Maximum value.
+     * @default 100
+     */
+    max?: number;
+    /**
+     * Visual variant.
+     * @default "linear"
+     */
+    variant?: ProgressVariant;
+    /**
+     * Size variant - supports responsive object syntax.
+     * @default "md"
+     * @example
+     * ```tsx
+     * // Single value
+     * <Progress value={75} size="md" />
+     *
+     * // Responsive
+     * <Progress value={75} size={{ base: "sm", md: "lg" }} />
+     * ```
+     */
+    size?: ResponsiveProp<ProgressSize>;
+    /**
+     * Accessible label.
+     */
+    label?: string;
+    /**
+     * Show value as percentage text (circular only).
+     * @default false
+     */
+    showValue?: boolean;
+}
+/**
+ * Progress indicator component for showing loading or completion status.
+ *
+ * @example
+ * ```tsx
+ * // Determinate linear progress
+ * <Progress value={75} label="Uploading..." />
+ *
+ * // Indeterminate circular progress
+ * <Progress variant="circular" label="Loading" />
+ *
+ * // Circular with percentage display
+ * <Progress variant="circular" value={45} showValue />
+ * ```
+ */
+declare const Progress: react.ForwardRefExoticComponent<ProgressProps & react.RefAttributes<HTMLElement>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ds-progress": ProgressProps & {
+                ref?: React.Ref<HTMLElement>;
+                "show-value"?: boolean;
+            };
+        }
+    }
+}
+
+type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+type AvatarShape = "circle" | "square";
+type AvatarStatus = "online" | "offline" | "away" | "busy";
+interface AvatarProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * Image source URL.
+     */
+    src?: string;
+    /**
+     * Alt text for image.
+     */
+    alt?: string;
+    /**
+     * User's name (used for initials fallback).
+     */
+    name?: string;
+    /**
+     * Size variant - supports responsive object syntax.
+     * @default "md"
+     * @example
+     * ```tsx
+     * // Single value
+     * <Avatar name="John Doe" size="md" />
+     *
+     * // Responsive
+     * <Avatar name="John Doe" size={{ base: "sm", md: "lg" }} />
+     * ```
+     */
+    size?: ResponsiveProp<AvatarSize>;
+    /**
+     * Shape variant.
+     * @default "circle"
+     */
+    shape?: AvatarShape;
+    /**
+     * Status indicator.
+     */
+    status?: AvatarStatus;
+    /**
+     * Whether to show status indicator.
+     * @default false
+     */
+    showStatus?: boolean;
+}
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ds-avatar": AvatarProps & {
+                ref?: React.Ref<HTMLElement>;
+                "show-status"?: boolean;
+            };
+        }
+    }
+}
+
+interface AvatarGroupProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Maximum number of avatars to display before showing overflow.
+     * @default 5
+     */
+    max?: number;
+    /**
+     * Size variant (inherited by child avatars) - supports responsive object syntax.
+     * @default "md"
+     * @example
+     * ```tsx
+     * // Single value
+     * <AvatarGroup size="md">...</AvatarGroup>
+     *
+     * // Responsive
+     * <AvatarGroup size={{ base: "sm", md: "lg" }}>...</AvatarGroup>
+     * ```
+     */
+    size?: ResponsiveProp<AvatarSize>;
+    /**
+     * Avatar children.
+     */
+    children?: ReactNode;
+}
+/**
+ * Avatar group component for displaying multiple avatars with overflow indicator.
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup max={3}>
+ *   <Avatar name="Alice" />
+ *   <Avatar name="Bob" />
+ *   <Avatar name="Charlie" />
+ *   <Avatar name="Diana" />
+ *   <Avatar name="Eve" />
+ * </AvatarGroup>
+ * // Shows 3 avatars + "+2" overflow indicator
+ * ```
+ */
+declare const AvatarGroup: react.ForwardRefExoticComponent<AvatarGroupProps & react.RefAttributes<HTMLElement>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ds-avatar-group": AvatarGroupProps & {
+                ref?: React.Ref<HTMLElement>;
+            };
+        }
+    }
+}
+
+/**
+ * Avatar compound component for user representation.
+ *
+ * @example
+ * ```tsx
+ * // Single avatar
+ * <Avatar src="/user.jpg" name="John Doe" />
+ *
+ * // Avatar group
+ * <Avatar.Group max={3}>
+ *   <Avatar name="Alice" />
+ *   <Avatar name="Bob" />
+ *   <Avatar name="Charlie" />
+ * </Avatar.Group>
+ * ```
+ */
+declare const Avatar: react.ForwardRefExoticComponent<AvatarProps & react.RefAttributes<HTMLElement>> & {
+    Group: react.ForwardRefExoticComponent<AvatarGroupProps & react.RefAttributes<HTMLElement>>;
+};
+
+type TableAlign = "left" | "center" | "right";
+type SortDirection = "asc" | "desc" | "none";
+interface TableHeadProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Column key for sorting.
+     */
+    column?: string;
+    /**
+     * Text alignment.
+     * @default "left"
+     */
+    align?: TableAlign;
+    /**
+     * Whether this column is sortable.
+     * @default false
+     */
+    sortable?: boolean;
+    /**
+     * Current sort direction.
+     * @default "none"
+     */
+    sortDirection?: SortDirection;
+    /**
+     * Column width (CSS value).
+     */
+    width?: string;
+    /**
+     * Callback when sort is triggered.
+     */
+    onSort?: (column: string, direction: SortDirection) => void;
+    /**
+     * Header cell content.
+     */
+    children?: ReactNode;
+}
+/**
+ * Table header cell component (th).
+ */
+declare const TableHead: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLElement>>;
+
+interface TableCellProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Text alignment.
+     * @default "left"
+     */
+    align?: TableAlign;
+    /**
+     * Column span.
+     * @default 1
+     */
+    colSpan?: number;
+    /**
+     * Row span.
+     * @default 1
+     */
+    rowSpan?: number;
+    /**
+     * Cell content.
+     */
+    children?: ReactNode;
+}
+/**
+ * Table cell component (td).
+ */
+declare const TableCell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLElement>>;
+
+interface TableRowProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Row ID for selection tracking.
+     */
+    rowId?: string;
+    /**
+     * Whether this row is selected.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Row cells.
+     */
+    children?: ReactNode;
+}
+/**
+ * Table row component (tr).
+ */
+declare const TableRow: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLElement>>;
+
+interface TableBodyProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Table body rows.
+     */
+    children?: ReactNode;
+}
+/**
+ * Table body component (tbody).
+ */
+declare const TableBody: react.ForwardRefExoticComponent<TableBodyProps & react.RefAttributes<HTMLElement>>;
+
+interface TableHeaderProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Table header rows.
+     */
+    children?: ReactNode;
+}
+/**
+ * Table header component (thead).
+ */
+declare const TableHeader: react.ForwardRefExoticComponent<TableHeaderProps & react.RefAttributes<HTMLElement>>;
+
+type TableSize = "compact" | "default" | "spacious";
+interface TableRootProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Size variant.
+     * @default "default"
+     */
+    size?: TableSize;
+    /**
+     * Whether to show striped rows.
+     * @default false
+     */
+    striped?: boolean;
+    /**
+     * Whether to remove borders.
+     * @default false
+     */
+    borderless?: boolean;
+    /**
+     * Whether to use fixed layout.
+     * @default false
+     */
+    fixed?: boolean;
+    /**
+     * Whether header is sticky.
+     * @default false
+     */
+    stickyHeader?: boolean;
+    /**
+     * Accessible caption for screen readers.
+     */
+    caption?: string;
+    /**
+     * Table content.
+     */
+    children?: ReactNode;
+}
+
+/**
+ * Table compound component for structured data display.
+ *
+ * @example
+ * ```tsx
+ * <Table striped>
+ *   <Table.Header>
+ *     <Table.Row>
+ *       <Table.Head sortable column="name" onSort={handleSort}>Name</Table.Head>
+ *       <Table.Head>Email</Table.Head>
+ *     </Table.Row>
+ *   </Table.Header>
+ *   <Table.Body>
+ *     <Table.Row>
+ *       <Table.Cell>John Doe</Table.Cell>
+ *       <Table.Cell>john@example.com</Table.Cell>
+ *     </Table.Row>
+ *   </Table.Body>
+ * </Table>
+ * ```
+ */
+declare const Table: react.ForwardRefExoticComponent<TableRootProps & react.RefAttributes<HTMLElement>> & {
+    Header: react.ForwardRefExoticComponent<TableHeaderProps & react.RefAttributes<HTMLElement>>;
+    Body: react.ForwardRefExoticComponent<TableBodyProps & react.RefAttributes<HTMLElement>>;
+    Row: react.ForwardRefExoticComponent<TableRowProps & react.RefAttributes<HTMLElement>>;
+    Head: react.ForwardRefExoticComponent<TableHeadProps & react.RefAttributes<HTMLElement>>;
+    Cell: react.ForwardRefExoticComponent<TableCellProps & react.RefAttributes<HTMLElement>>;
+};
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ds-table": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                ref?: React.Ref<HTMLElement>;
+                size?: string;
+                striped?: boolean;
+                borderless?: boolean;
+                fixed?: boolean;
+                "sticky-header"?: boolean;
+                caption?: string;
+            };
+            "ds-table-header": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                ref?: React.Ref<HTMLElement>;
+            };
+            "ds-table-body": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                ref?: React.Ref<HTMLElement>;
+            };
+            "ds-table-row": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                ref?: React.Ref<HTMLElement>;
+                "row-id"?: string;
+                selected?: boolean;
+            };
+            "ds-table-head": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                ref?: React.Ref<HTMLElement>;
+                column?: string;
+                align?: string;
+                sortable?: boolean;
+                "sort-direction"?: string;
+                width?: string;
+                "onDs-sort"?: (event: CustomEvent) => void;
+            };
+            "ds-table-cell": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                ref?: React.Ref<HTMLElement>;
+                align?: string;
+                colspan?: number;
+                rowspan?: number;
+            };
+        }
+    }
+}
+
+type SkeletonVariant = "text" | "circular" | "rectangular" | "rounded";
+type SkeletonSize = "xs" | "sm" | "md" | "lg" | "xl";
+type SkeletonWidth = "full" | "3/4" | "1/2" | "1/4";
+type SkeletonAnimation = "wave" | "pulse" | "none";
+interface SkeletonProps extends Omit<HTMLAttributes<HTMLElement>, "children"> {
+    /**
+     * Shape variant.
+     * @default "text"
+     */
+    variant?: SkeletonVariant;
+    /**
+     * Size preset for height - supports responsive object syntax.
+     * @example
+     * ```tsx
+     * // Single value
+     * <Skeleton size="md" />
+     *
+     * // Responsive
+     * <Skeleton size={{ base: "sm", md: "lg" }} />
+     * ```
+     */
+    size?: ResponsiveProp<SkeletonSize>;
+    /**
+     * Width preset.
+     */
+    width?: SkeletonWidth;
+    /**
+     * Custom width (CSS value).
+     */
+    customWidth?: string;
+    /**
+     * Custom height (CSS value).
+     */
+    customHeight?: string;
+    /**
+     * Animation type.
+     * @default "wave"
+     */
+    animation?: SkeletonAnimation;
+    /**
+     * Accessible label for screen readers.
+     * @default "Loading..."
+     */
+    label?: string;
+}
+/**
+ * Skeleton loading placeholder component for content that is loading.
+ *
+ * @example
+ * ```tsx
+ * // Text skeleton
+ * <Skeleton variant="text" width="3/4" />
+ *
+ * // Circular avatar skeleton
+ * <Skeleton variant="circular" customWidth="40px" customHeight="40px" />
+ *
+ * // Card skeleton layout
+ * <div className="space-y-2">
+ *   <Skeleton variant="rectangular" customHeight="200px" />
+ *   <Skeleton variant="text" width="1/2" />
+ *   <Skeleton variant="text" />
+ *   <Skeleton variant="text" width="3/4" />
+ * </div>
+ * ```
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<SkeletonProps & react.RefAttributes<HTMLElement>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ds-skeleton": SkeletonProps & {
+                ref?: React.Ref<HTMLElement>;
+                "custom-width"?: string;
+                "custom-height"?: string;
+            };
+        }
+    }
+}
+
+type BadgeVariant = "neutral" | "primary" | "secondary" | "success" | "warning" | "error" | "info";
+type BadgeSize = "sm" | "md" | "lg";
+type BadgePosition = "top-right" | "top-left" | "bottom-right" | "bottom-left";
+interface BadgeProps extends Omit<HTMLAttributes<HTMLElement>, "content"> {
+    /**
+     * Badge content/count.
+     */
+    content?: string | number;
+    /**
+     * Maximum count to show. Displays "{max}+" if exceeded.
+     */
+    max?: number;
+    /**
+     * Color variant.
+     * @default "primary"
+     */
+    variant?: BadgeVariant;
+    /**
+     * Size variant - supports responsive object syntax.
+     * @default "md"
+     * @example
+     * ```tsx
+     * // Single value
+     * <Badge content={5} size="md" />
+     *
+     * // Responsive
+     * <Badge content={5} size={{ base: "sm", md: "md" }} />
+     * ```
+     */
+    size?: ResponsiveProp<BadgeSize>;
+    /**
+     * Use outline style.
+     * @default false
+     */
+    outline?: boolean;
+    /**
+     * Show as dot (no content).
+     * @default false
+     */
+    dot?: boolean;
+    /**
+     * Position when used in wrapper.
+     * @default "top-right"
+     */
+    position?: BadgePosition;
+    /**
+     * Show pulse animation.
+     * @default false
+     */
+    pulse?: boolean;
+}
+/**
+ * Badge component for counts, notifications, and status indicators.
+ *
+ * @example
+ * ```tsx
+ * // Count badge
+ * <Badge content={5} variant="error" />
+ *
+ * // Max count
+ * <Badge content={150} max={99} />
+ *
+ * // Dot indicator
+ * <Badge dot variant="success" />
+ * ```
+ */
+declare const Badge: react.ForwardRefExoticComponent<BadgeProps & react.RefAttributes<HTMLElement>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ds-badge": BadgeProps & {
+                ref?: React.Ref<HTMLElement>;
+            };
+        }
+    }
+}
+
+type TagVariant = "neutral" | "primary" | "secondary" | "success" | "warning" | "error" | "info";
+type TagSize = "sm" | "md" | "lg";
+interface TagProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Color variant.
+     * @default "neutral"
+     */
+    variant?: TagVariant;
+    /**
+     * Size variant - supports responsive object syntax.
+     * @default "md"
+     * @example
+     * ```tsx
+     * // Single value
+     * <Tag size="md">React</Tag>
+     *
+     * // Responsive
+     * <Tag size={{ base: "sm", md: "md" }}>React</Tag>
+     * ```
+     */
+    size?: ResponsiveProp<TagSize>;
+    /**
+     * Use solid (filled) style instead of subtle.
+     * @default false
+     */
+    solid?: boolean;
+    /**
+     * Show remove button.
+     * @default false
+     */
+    removable?: boolean;
+    /**
+     * Make tag clickable/interactive.
+     * @default false
+     */
+    clickable?: boolean;
+    /**
+     * Disable the tag.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Value for identification in events.
+     */
+    value?: string;
+    /**
+     * Callback when remove button is clicked.
+     */
+    onRemove?: (value: string) => void;
+    /**
+     * Tag content.
+     */
+    children?: ReactNode;
+}
+/**
+ * Tag component for categorization with optional remove action.
+ *
+ * @example
+ * ```tsx
+ * // Basic tag
+ * <Tag variant="primary">React</Tag>
+ *
+ * // Removable tag
+ * <Tag removable onRemove={(value) => console.log('Removed:', value)} value="react">
+ *   React
+ * </Tag>
+ *
+ * // Clickable tag
+ * <Tag clickable onClick={() => console.log('Clicked')}>
+ *   Click me
+ * </Tag>
+ * ```
+ */
+declare const Tag: react.ForwardRefExoticComponent<TagProps & react.RefAttributes<HTMLElement>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ds-tag": TagProps & {
+                ref?: React.Ref<HTMLElement>;
+                "onDs-remove"?: (event: CustomEvent) => void;
+                "onDs-click"?: (event: CustomEvent) => void;
+            };
+        }
+    }
+}
+
+interface TreeItemProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+    /**
+     * Unique item ID.
+     */
+    itemId?: string;
+    /**
+     * Whether item is expanded.
+     * @default false
+     */
+    expanded?: boolean;
+    /**
+     * Whether item is selected.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Callback when expand state changes.
+     */
+    onExpand?: (itemId: string, expanded: boolean) => void;
+    /**
+     * Callback when item is selected.
+     */
+    onItemSelect?: (itemId: string, selected: boolean) => void;
+    /**
+     * Callback when item is activated (Enter/double-click).
+     */
+    onActivate?: (itemId: string) => void;
+    /**
+     * Item label content.
+     */
+    children?: ReactNode;
+}
+/**
+ * Tree item component for hierarchical nodes.
+ */
+declare const TreeItem: react.ForwardRefExoticComponent<TreeItemProps & react.RefAttributes<HTMLElement>>;
+
+type TreeSelectionMode = "single" | "multiple" | "none";
+type TreeSize = "default" | "compact";
+interface TreeRootProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Selection mode.
+     * @default "single"
+     */
+    selectionMode?: TreeSelectionMode;
+    /**
+     * Size variant.
+     * @default "default"
+     */
+    size?: TreeSize;
+    /**
+     * Show connecting lines.
+     * @default false
+     */
+    lines?: boolean;
+    /**
+     * Accessible label.
+     * @default "Tree"
+     */
+    label?: string;
+    /**
+     * Whether the tree is in a loading state.
+     * When true, sets aria-busy and disables keyboard navigation.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Text to display/announce during loading.
+     * @default "Loading..."
+     */
+    loadingText?: string;
+    /**
+     * Node IDs that are currently loading children.
+     * Allows for node-level loading indicators.
+     */
+    loadingNodes?: string[];
+    /**
+     * Callback when selection changes.
+     */
+    onSelectionChange?: (selectedItems: string[]) => void;
+    /**
+     * Tree content (TreeItem elements).
+     */
+    children?: ReactNode;
+}
+
+/**
+ * Tree compound component for hierarchical data display.
+ *
+ * @example
+ * ```tsx
+ * <Tree selectionMode="single" onSelectionChange={(ids) => console.log(ids)}>
+ *   <Tree.Item itemId="1">
+ *     Documents
+ *     <div slot="children">
+ *       <Tree.Item itemId="1-1">Work</Tree.Item>
+ *       <Tree.Item itemId="1-2">Personal</Tree.Item>
+ *     </div>
+ *   </Tree.Item>
+ *   <Tree.Item itemId="2">Pictures</Tree.Item>
+ * </Tree>
+ * ```
+ */
+declare const Tree: react.ForwardRefExoticComponent<TreeRootProps & react.RefAttributes<HTMLElement>> & {
+    Item: react.ForwardRefExoticComponent<TreeItemProps & react.RefAttributes<HTMLElement>>;
+};
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ds-tree": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                ref?: React.Ref<HTMLElement>;
+                "selection-mode"?: string;
+                size?: string;
+                lines?: boolean;
+                label?: string;
+                "onDs-selection-change"?: (event: CustomEvent) => void;
+            };
+            "ds-tree-item": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                ref?: React.Ref<HTMLElement>;
+                "item-id"?: string;
+                expanded?: boolean;
+                selected?: boolean;
+                disabled?: boolean;
+                "onDs-expand"?: (event: CustomEvent) => void;
+                "onDs-select"?: (event: CustomEvent) => void;
+                "onDs-activate"?: (event: CustomEvent) => void;
+            };
+        }
+    }
+}
+
+interface ListItemProps extends Omit<HTMLAttributes<HTMLElement>, "onSelect"> {
+    /**
+     * Unique item ID.
+     */
+    itemId?: string;
+    /**
+     * Whether item is selected.
+     * @default false
+     */
+    selected?: boolean;
+    /**
+     * Whether item is disabled.
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Value for identification.
+     */
+    value?: string;
+    /**
+     * Callback when item is selected.
+     */
+    onItemSelect?: (itemId: string, value: string, selected: boolean) => void;
+    /**
+     * Callback when item is activated (Enter/double-click).
+     */
+    onActivate?: (itemId: string, value: string) => void;
+    /**
+     * Item content.
+     */
+    children?: ReactNode;
+}
+/**
+ * List item component for collection items.
+ */
+declare const ListItem: react.ForwardRefExoticComponent<ListItemProps & react.RefAttributes<HTMLElement>>;
+
+type ListSelectionMode = "single" | "multiple" | "none";
+type ListOrientation = "vertical" | "horizontal";
+type ListSize = "default" | "compact" | "spacious";
+interface ListRootProps extends HTMLAttributes<HTMLElement> {
+    /**
+     * Selection mode.
+     * @default "single"
+     */
+    selectionMode?: ListSelectionMode;
+    /**
+     * List orientation.
+     * @default "vertical"
+     */
+    orientation?: ListOrientation;
+    /**
+     * Size variant.
+     * @default "default"
+     */
+    size?: ListSize;
+    /**
+     * Show border around list.
+     * @default false
+     */
+    bordered?: boolean;
+    /**
+     * Accessible label.
+     * @default "List"
+     */
+    label?: string;
+    /**
+     * Callback when selection changes.
+     */
+    onSelectionChange?: (selectedItems: string[]) => void;
+    /**
+     * List content (ListItem elements).
+     */
+    children?: ReactNode;
+}
+
+/**
+ * List compound component for collection display.
+ *
+ * @example
+ * ```tsx
+ * <List selectionMode="single" onSelectionChange={(ids) => console.log(ids)}>
+ *   <List.Item itemId="1">Item 1</List.Item>
+ *   <List.Item itemId="2">Item 2</List.Item>
+ *   <List.Item itemId="3" disabled>Item 3 (disabled)</List.Item>
+ * </List>
+ * ```
+ */
+declare const List: react.ForwardRefExoticComponent<ListRootProps & react.RefAttributes<HTMLElement>> & {
+    Item: react.ForwardRefExoticComponent<ListItemProps & react.RefAttributes<HTMLElement>>;
+};
+
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ds-list": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                ref?: React.Ref<HTMLElement>;
+                "selection-mode"?: string;
+                orientation?: string;
+                size?: string;
+                bordered?: boolean;
+                label?: string;
+                "onDs-selection-change"?: (event: CustomEvent) => void;
+            };
+            "ds-list-item": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & {
+                ref?: React.Ref<HTMLElement>;
+                "item-id"?: string;
+                selected?: boolean;
+                disabled?: boolean;
+                value?: string;
+                "onDs-select"?: (event: CustomEvent) => void;
+                "onDs-activate"?: (event: CustomEvent) => void;
+            };
+        }
+    }
+}
+
+type CalendarSize = "default" | "compact";
+interface CalendarProps extends Omit<HTMLAttributes<HTMLElement>, "onChange"> {
+    /**
+     * Selected date (ISO format: YYYY-MM-DD).
+     */
+    value?: string;
+    /**
+     * Minimum selectable date (ISO format).
+     */
+    min?: string;
+    /**
+     * Maximum selectable date (ISO format).
+     */
+    max?: string;
+    /**
+     * Disabled dates (array of ISO format strings).
+     */
+    disabledDates?: string[];
+    /**
+     * Locale for month/day names.
+     * @default "en-US"
+     */
+    locale?: string;
+    /**
+     * Size variant.
+     * @default "default"
+     */
+    size?: CalendarSize;
+    /**
+     * First day of week (0 = Sunday, 1 = Monday).
+     * @default 0
+     */
+    firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
+    /**
+     * Callback when a date is selected.
+     */
+    onChange?: (value: string, date: Date) => void;
+    /**
+     * Callback when the displayed month changes.
+     */
+    onMonthChange?: (month: number, year: number) => void;
+}
+/**
+ * Calendar component for date selection.
+ *
+ * @example
+ * ```tsx
+ * <Calendar
+ *   value="2024-01-15"
+ *   min="2024-01-01"
+ *   max="2024-12-31"
+ *   onChange={(value, date) => console.log(value, date)}
+ * />
+ * ```
+ */
+declare const Calendar: react.ForwardRefExoticComponent<CalendarProps & react.RefAttributes<HTMLElement>>;
+declare global {
+    namespace JSX {
+        interface IntrinsicElements {
+            "ds-calendar": CalendarProps & {
+                ref?: React.Ref<HTMLElement>;
+                "disabled-dates"?: string;
+                "first-day-of-week"?: number;
+                "onDs-change"?: (event: CustomEvent) => void;
+                "onDs-month-change"?: (event: CustomEvent) => void;
+            };
+        }
+    }
+}
+
+type DataTableSortDirection = "asc" | "desc" | "none";
+interface DataTableColumn {
+    id: string;
+    header: string;
+    accessor?: string;
+    sortable?: boolean;
+    resizable?: boolean;
+    width?: string;
+    minWidth?: string;
+    maxWidth?: string;
+    align?: "left" | "center" | "right";
+}
+interface DataTableSort {
+    column: string;
+    direction: DataTableSortDirection;
+}
+interface DataTablePagination {
+    page: number;
+    pageSize: number;
+    total: number;
+}
+interface DataTableProps {
+    /**
+     * Enable virtualization for large datasets.
+     * @default false
+     */
+    virtualized?: boolean;
+    /**
+     * Row height for virtualization (in pixels).
+     * @default 48
+     */
+    rowHeight?: number;
+    /**
+     * Number of overscan rows for virtualization.
+     * @default 5
+     */
+    overscan?: number;
+    /**
+     * Total number of rows (for server-side pagination).
+     * @default 0
+     */
+    totalRows?: number;
+    /**
+     * Current page (1-indexed).
+     * @default 1
+     */
+    page?: number;
+    /**
+     * Page size.
+     * @default 10
+     */
+    pageSize?: number;
+    /**
+     * Available page sizes as comma-separated string.
+     * @default "10,25,50,100"
+     */
+    pageSizes?: string;
+    /**
+     * Enable row selection.
+     * @default false
+     */
+    selectable?: boolean;
+    /**
+     * Selection mode.
+     * @default "multiple"
+     */
+    selectionMode?: "single" | "multiple";
+    /**
+     * Show loading state.
+     * @default false
+     */
+    loading?: boolean;
+    /**
+     * Sort column ID.
+     */
+    sortColumn?: string;
+    /**
+     * Sort direction.
+     * @default "none"
+     */
+    sortDirection?: "asc" | "desc" | "none";
+    /**
+     * Filter/search query.
+     */
+    filter?: string;
+    /**
+     * Empty state message.
+     * @default "No data available"
+     */
+    emptyMessage?: string;
+    /**
+     * Callback when sort changes.
+     */
+    onSort?: (detail: {
+        column: string;
+        direction: "asc" | "desc" | "none";
+    }) => void;
+    /**
+     * Callback when page changes.
+     */
+    onPageChange?: (detail: {
+        page: number;
+    }) => void;
+    /**
+     * Callback when page size changes.
+     */
+    onPageSizeChange?: (detail: {
+        pageSize: number;
+    }) => void;
+    /**
+     * Callback when row selection changes.
+     */
+    onSelectionChange?: (detail: {
+        selectedRows: string[];
+    }) => void;
+    /**
+     * Table content (use Table sub-components).
+     */
+    children?: ReactNode;
+    /**
+     * Additional class name.
+     */
+    className?: string;
+}
+/**
+ * DataTable component for displaying large datasets with virtualization,
+ * pagination, sorting, and selection support.
+ *
+ * @example
+ * ```tsx
+ * <DataTable
+ *   totalRows={100}
+ *   page={1}
+ *   pageSize={10}
+ *   selectable
+ *   onPageChange={(detail) => console.log(detail.page)}
+ * >
+ *   <Table>
+ *     <TableHeader>...</TableHeader>
+ *     <TableBody>...</TableBody>
+ *   </Table>
+ * </DataTable>
+ * ```
+ */
+declare const DataTable: react.ForwardRefExoticComponent<DataTableProps & react.RefAttributes<HTMLElement>>;
+
+/**
+ * Event normalization utilities for Web Component → React interop.
+ * Handles event bubbling and synthetic event creation.
+ */
+/**
+ * Creates a wrapped event handler that normalizes Web Component custom events
+ * to work with React's event system.
+ */
+declare function createEventHandler<T extends SyntheticEvent>(handler: ((event: T) => void) | undefined): ((event: Event) => void) | undefined;
+/**
+ * Attaches event listeners to a Web Component element.
+ * Returns a cleanup function.
+ */
+declare function attachEventListeners(element: Element, events: Record<string, ((event: Event) => void) | undefined>): () => void;
+
+/**
+ * Factory for creating React wrapper components around Web Components.
+ * Handles ref forwarding and property/attribute synchronization.
+ */
+interface WrapperConfig<P extends Record<string, unknown>> {
+    /** The custom element tag name */
+    tagName: string;
+    /** Properties to sync to the element */
+    properties?: (keyof P)[];
+    /** Event name mappings: React prop name → DOM event name */
+    events?: Record<string, string>;
+    /** Default prop values */
+    defaults?: Partial<P>;
+}
+/**
+ * Creates a React wrapper component for a Web Component.
+ * Handles property synchronization and event forwarding.
+ */
+declare function createComponent<E extends HTMLElement, P extends Record<string, unknown> = Record<string, unknown>>(config: WrapperConfig<P>): react.ForwardRefExoticComponent<react.PropsWithoutRef<P & Omit<any, "ref"> & {
+    children?: React.ReactNode;
+}> & react.RefAttributes<E>>;
+
+/**
+ * Composes two event handlers, calling child handler first.
+ * If child handler calls preventDefault(), parent handler is skipped.
+ */
+declare function composeEventHandlers<E extends SyntheticEvent | Event>(parentHandler?: (event: E) => void, childHandler?: (event: E) => void): (event: E) => void;
+/**
+ * Merges two className strings, filtering out falsy values.
+ */
+declare function mergeClassNames(...classNames: (string | undefined | null | false)[]): string;
+/**
+ * Merges two style objects, with child styles taking precedence.
+ */
+declare function mergeStyles(parentStyle?: CSSProperties, childStyle?: CSSProperties): CSSProperties | undefined;
+/**
+ * Merges slot props with child props.
+ * - className: concatenated
+ * - style: merged (child wins conflicts)
+ * - event handlers: composed (both called, child first)
+ * - other props: child wins
+ */
+declare function mergeProps<T extends Record<string, unknown>>(slotProps: T, childProps: T): T;
+
+export { useToast as $, type AlignValue as A, type ButtonProps as B, type ClientOnlyProps as C, type DsNavigateEventDetail as D, VisuallyHidden as E, type FocusScopeProps as F, Text as G, Box as H, type InputProps as I, type JustifyValue as J, Slot as K, type LinkProps as L, Portal as M, type NavigateEventHandler as N, FocusScope as O, type PortalProps as P, ClientOnly as Q, type ResponsiveProp as R, type SpinnerProps as S, type TextProps as T, useIsClient as U, type VisuallyHiddenProps as V, type WrapperConfig as W, Alert as X, type AlertProps as Y, type AlertVariant as Z, Toast as _, type ButtonVariant as a, type CalendarProps as a$, type ToastProviderProps as a0, type ToastVariant as a1, type ToastPosition as a2, type ToastState as a3, type ToastAction as a4, type ToastData as a5, type ToastOptions as a6, type UseToastReturn as a7, Progress as a8, type ProgressProps as a9, type SkeletonVariant as aA, type SkeletonSize as aB, type SkeletonWidth as aC, type SkeletonAnimation as aD, Badge as aE, type BadgeProps as aF, type BadgeVariant as aG, type BadgeSize as aH, type BadgePosition as aI, Tag as aJ, type TagProps as aK, type TagVariant as aL, type TagSize as aM, Tree as aN, TreeItem as aO, type TreeRootProps as aP, type TreeSelectionMode as aQ, type TreeSize as aR, type TreeItemProps as aS, List as aT, ListItem as aU, type ListRootProps as aV, type ListSelectionMode as aW, type ListOrientation as aX, type ListSize as aY, type ListItemProps as aZ, Calendar as a_, type ProgressVariant as aa, type ProgressSize as ab, Avatar as ac, AvatarGroup as ad, type AvatarProps as ae, type AvatarSize as af, type AvatarShape as ag, type AvatarStatus as ah, type AvatarGroupProps as ai, Table as aj, TableHeader as ak, TableBody as al, TableRow as am, TableHead as an, TableCell as ao, type TableRootProps as ap, type TableSize as aq, type TableHeaderProps as ar, type TableBodyProps as as, type TableRowProps as at, type TableHeadProps as au, type TableAlign as av, type SortDirection as aw, type TableCellProps as ax, Skeleton as ay, type SkeletonProps as az, type ButtonSize as b, type CalendarSize as b0, DataTable as b1, type DataTableProps as b2, type DataTableColumn as b3, type DataTableSort as b4, type DataTablePagination as b5, type DataTableSortDirection as b6, createEventHandler as b7, attachEventListeners as b8, createComponent as b9, composeEventHandlers as ba, mergeClassNames as bb, mergeStyles as bc, mergeProps as bd, type InputType as c, type InputSize as d, type LinkVariant as e, type IconProps as f, type IconName as g, type IconSize as h, type SpinnerSize as i, type TextSize as j, type TextWeight as k, type TextVariant as l, type BoxProps as m, type SlotProps as n, type FocusScopeRef as o, type DsInputEventDetail as p, type InputValueHandler as q, type SpacingValue as r, type DisplayValue as s, type FlexDirection as t, type AsChildProps as u, Button as v, Input as w, Link as x, Icon as y, Spinner as z };