@nextlyhq/ui 0.0.1

package/dist/index.d.ts

@@ -0,0 +1,2319 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as react from 'react';
+import { ButtonHTMLAttributes, ComponentProps, TextareaHTMLAttributes, HTMLAttributes, ComponentPropsWithoutRef, ReactNode } from 'react';
+import * as class_variance_authority from 'class-variance-authority';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import { Root } from '@radix-ui/react-label';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import { Root as Root$1 } from '@radix-ui/react-switch';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import { Content, Item, Root as Root$2, Trigger } from '@radix-ui/react-accordion';
+import * as _radix_ui_react_tabs from '@radix-ui/react-tabs';
+import { Content as Content$1, List, Root as Root$3, Trigger as Trigger$1 } from '@radix-ui/react-tabs';
+import * as _radix_ui_react_tooltip from '@radix-ui/react-tooltip';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import { Command as Command$1 } from 'cmdk';
+import { LucideProps } from 'lucide-react';
+import { ToasterProps } from 'sonner';
+export { ToasterProps, toast } from 'sonner';
+import { ClassValue } from 'clsx';
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+}
+
+/**
+ * Button Component - Design System Specification
+ *
+ * Interactive button element for user actions. Supports multiple variants,
+ * sizes, and the asChild pattern for composition.
+ *
+ * Variants:
+ * - default/primary: Primary action button (blue background, white text)
+ * - secondary: Secondary action button (gray background)
+ * - destructive: Destructive action button (red background)
+ * - outline: Outlined button (transparent background, border)
+ * - ghost: Minimal button (transparent, no border)
+ * - link: Link-style button (underlined text)
+ *
+ * Note: 'primary' is a semantic alias for 'default' variant for better code readability
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "md" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const Button: react.ForwardRefExoticComponent<ButtonProps & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Input Component - Design System Specification
+ *
+ * Text input fields for collecting user data. Supports various types (text,
+ * email, password, number) and three size variants.
+ *
+ * Accessibility:
+ * - Full keyboard navigation support
+ * - Proper focus indicators (2px ring with offset)
+ * - Error state support via aria-invalid
+ * - Label association via htmlFor/id
+ * - Placeholder text for guidance (not a replacement for labels)
+ *
+ * Design Specs:
+ * - Height: sm=32px, default=40px, lg=44px
+ * - Padding: Horizontal varies by size (sm=10px, default=12px, lg=16px)
+ * - Border radius: 0px (rounded-none)
+ * - Border: 1px solid, changes on focus/error
+ * - Transition: 150ms (consistent with design system)
+ * - Font size: sm/default=14px (text-sm), lg=16px (text-base)
+ *
+ * Size Variants:
+ * - sm: Height 32px (h-8) - Compact forms, filters
+ * - default: Height 40px (h-10) - Standard forms
+ * - lg: Height 44px (h-11) - Prominent inputs, marketing forms
+ *
+ * Supported Types:
+ * - text: General text input
+ * - email: Email validation
+ * - password: Hidden text input
+ * - number: Numeric input with steppers
+ * - tel: Phone number input
+ * - url: URL validation
+ * - search: Search input with clear button
+ */
+declare const inputVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface InputProps extends Omit<ComponentProps<"input">, "size">, VariantProps<typeof inputVariants> {
+}
+declare const Input: react.ForwardRefExoticComponent<Omit<InputProps, "ref"> & react.RefAttributes<HTMLInputElement>>;
+
+declare const Textarea: react.ForwardRefExoticComponent<TextareaHTMLAttributes<HTMLTextAreaElement> & react.RefAttributes<HTMLTextAreaElement>>;
+
+declare function Label({ className, ...props }: ComponentProps<typeof Root>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Badge Component - Design System Specification
+ *
+ * Badges are non-interactive elements used to highlight important information,
+ * such as status indicators, counts, or labels. They should not be focusable
+ * or interactive.
+ *
+ * Accessibility:
+ * - Badges are non-interactive (no keyboard focus or click handlers)
+ * - Color is not the only indicator - text conveys meaning
+ * - Use aria-label for icon-only badges to provide context
+ * - Provide contextual information in surrounding UI
+ *
+ * Design Specs:
+ * - Height: 22px
+ * - Padding: 2px 10px (vertical × horizontal)
+ * - Border radius: Full (pill shape)
+ * - Font: 12px (text-xs), medium weight (500)
+ * - Colors: Light backgrounds with dark text for visibility in both light/dark modes
+ *
+ * Variants (6 total per design spec):
+ * - default: Light gray background
+ * - primary: Light blue background
+ * - success: Light green background
+ * - warning: Light amber background
+ * - destructive: Light red background
+ * - outline: Transparent background with  border border-primary/5
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "primary" | "destructive" | "outline" | "success" | "warning" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Card Component - Design System Specification
+ *
+ * A container component for grouping related content with clear visual separation.
+ * Cards provide a structured layout with header, content, and footer sections.
+ *
+ * Design Specs:
+ * - Border radius: 0px (rounded-none)
+ * - Padding: 24px (p-6) for header/content, 16px 24px for footer
+ * - Shadow: sm (default), md (hover/elevated)
+ * - Border: 1px solid  border border-primary/5 color
+ *
+ * Variants:
+ * - default: Standard card with subtle shadow
+ * - interactive: Hover effects for clickable cards  (border border-primary/5 highlight, shadow increase)
+ *   ⚠️ IMPORTANT: When using the interactive variant, you MUST add appropriate
+ *   accessibility attributes:
+ *   - Add role="button" or use an actual <button> wrapper
+ *   - Add tabIndex={0} to make it keyboard accessible
+ *   - Add onClick handler for mouse/touch interaction
+ *   - Add onKeyDown handler to support Enter/Space keys
+ *   - Add aria-label or aria-labelledby to describe the action
+ *   Example:
+ *   <Card
+ *     variant="interactive"
+ *     role="button"
+ *     tabIndex={0}
+ *     onClick={handleClick}
+ *     onKeyDown={(e) => e.key === 'Enter' && handleClick()}
+ *     aria-label="View user details"
+ *   >
+ * - elevated: More prominent shadow for emphasis
+ *
+ * Structure:
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Title</CardTitle>
+ *     <CardDescription>Description</CardDescription>
+ *     <CardAction>Action buttons</CardAction>
+ *   </CardHeader>
+ *   <CardContent>Main content</CardContent>
+ *   <CardFooter>Footer actions</CardFooter>
+ * </Card>
+ *
+ * Accessibility:
+ * - Semantic HTML structure supports screen readers
+ * - Interactive cards MUST have role, tabIndex, and keyboard handlers (see above)
+ * - Ensure sufficient color contrast for all text (WCAG 2.2 AA minimum)
+ * - Use aria-label or aria-labelledby for cards without visible text labels
+ */
+declare const cardVariants: (props?: ({
+    variant?: "default" | "interactive" | "elevated" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type CardProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>;
+declare const Card: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    variant?: "default" | "interactive" | "elevated" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
+interface CardHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    /**
+     * Whether to hide the bottom  border border-primary/5 separator between header and content.
+     * Default: false  (border border-primary/5 is shown per design spec)
+     */
+    noBorder?: boolean;
+}
+declare const CardHeader: react.ForwardRefExoticComponent<CardHeaderProps & react.RefAttributes<HTMLDivElement>>;
+type CardTitleProps = HTMLAttributes<HTMLHeadingElement>;
+declare const CardTitle: react.ForwardRefExoticComponent<CardTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+type CardDescriptionProps = HTMLAttributes<HTMLParagraphElement>;
+declare const CardDescription: react.ForwardRefExoticComponent<CardDescriptionProps & react.RefAttributes<HTMLParagraphElement>>;
+type CardActionProps = HTMLAttributes<HTMLDivElement>;
+declare const CardAction: react.ForwardRefExoticComponent<CardActionProps & react.RefAttributes<HTMLDivElement>>;
+type CardContentProps = HTMLAttributes<HTMLDivElement>;
+declare const CardContent: react.ForwardRefExoticComponent<CardContentProps & react.RefAttributes<HTMLDivElement>>;
+type CardFooterProps = HTMLAttributes<HTMLDivElement>;
+declare const CardFooter: react.ForwardRefExoticComponent<CardFooterProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Alert Component - Design System Specification
+ *
+ * Alerts display important messages that require user attention or awareness.
+ * They are non-interactive callouts used for inline notifications and feedback.
+ *
+ * Design Specs:
+ * - Padding: 16px (p-4)
+ * - Border radius: 0px (rounded-none) - intentionally smaller than Card (12px)
+ *   for inline/flow content vs. larger container components
+ * - Border: 1px solid matching variant color
+ * - Shadow: sm (subtle elevation)
+ * - Font: 14px (text-sm)
+ * - Layout: Flex with gap-3 for icon/content spacing
+ * - Colors: Light backgrounds with dark text for WCAG 2.2 AA compliance
+ *
+ * Variants (4 total):
+ * - info (default): Blue - informational messages, neutral announcements
+ * - success: Green - successful operations, confirmations
+ * - warning: Amber - cautions, warnings that need attention
+ * - destructive: Red - errors, critical issues, failures
+ *
+ * Structure:
+ * <Alert variant="info">
+ *   <InfoIcon className="h-4 w-4" />
+ *   <div>
+ *     <AlertTitle>Optional Title</AlertTitle>
+ *     <AlertDescription>Alert message content</AlertDescription>
+ *   </div>
+ * </Alert>
+ *
+ * Accessibility:
+ * - Defaults to role="alert" for assertive screen reader announcements
+ * - Override with role="status" for non-urgent updates (polite announcements)
+ * - Override with role={undefined} to remove ARIA role if needed
+ * - Color is not the only indicator - icons and text convey meaning
+ * - Supports rich content (links, lists) within AlertDescription
+ * - WCAG 2.2 AA compliant color contrast (4.5:1 minimum)
+ *
+ * Usage Examples:
+ *
+ * // Simple alert with icon and description (default role="alert")
+ * <Alert variant="success">
+ *   <CheckCircle2 className="h-4 w-4" />
+ *   <AlertDescription>User created successfully!</AlertDescription>
+ * </Alert>
+ *
+ * // Alert with title and description
+ * <Alert variant="warning">
+ *   <AlertTriangle className="h-4 w-4" />
+ *   <div>
+ *     <AlertTitle>Warning</AlertTitle>
+ *     <AlertDescription>This action cannot be undone.</AlertDescription>
+ *   </div>
+ * </Alert>
+ *
+ * // Non-urgent informational update
+ * <Alert variant="info" role="status">
+ *   <AlertCircle className="h-4 w-4" />
+ *   <AlertDescription>New features are now available.</AlertDescription>
+ * </Alert>
+ *
+ * Icons (from lucide-react):
+ * - Info: <AlertCircle className="h-4 w-4" />
+ * - Success: <CheckCircle2 className="h-4 w-4" />
+ * - Warning: <AlertTriangle className="h-4 w-4" />
+ * - Destructive: <XCircle className="h-4 w-4" />
+ */
+declare const alertVariants: (props?: ({
+    variant?: "destructive" | "success" | "warning" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type AlertProps = HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>;
+/**
+ * Alert - Root container for alert messages
+ *
+ * Defaults to role="alert" for screen reader announcements. Override with
+ * role="status" for non-urgent updates or role={undefined} to remove.
+ *
+ * @example
+ * <Alert variant="success">
+ *   <CheckCircle2 className="h-4 w-4" />
+ *   <AlertDescription>Operation completed successfully</AlertDescription>
+ * </Alert>
+ */
+declare const Alert: react.ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
+    variant?: "destructive" | "success" | "warning" | "info" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
+type AlertTitleProps = HTMLAttributes<HTMLHeadingElement>;
+/**
+ * AlertTitle - Heading text for alert message
+ *
+ * Renders as <h5> for semantic HTML structure. Use for brief, scannable
+ * alert headings that summarize the message (e.g., "Success", "Warning").
+ *
+ * @example
+ * <AlertTitle>Payment Successful</AlertTitle>
+ */
+declare const AlertTitle: react.ForwardRefExoticComponent<AlertTitleProps & react.RefAttributes<HTMLHeadingElement>>;
+type AlertDescriptionProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * AlertDescription - Supporting detail text for alert message
+ *
+ * Renders as <div> to support rich content (links, lists, formatting).
+ * Use for detailed explanations, instructions, or contextual information.
+ *
+ * @example
+ * <AlertDescription>
+ *   Your changes have been saved. <a href="/view">View details</a>
+ * </AlertDescription>
+ */
+declare const AlertDescription: react.ForwardRefExoticComponent<AlertDescriptionProps & react.RefAttributes<HTMLDivElement>>;
+
+declare function Separator({ className, orientation, decorative, ...props }: react.ComponentProps<typeof SeparatorPrimitive.Root>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Skeleton Loading Component
+ *
+ * A flexible loading placeholder component that provides visual feedback while content is loading.
+ * Uses a subtle pulse animation to indicate ongoing loading state.
+ *
+ * @design_specs
+ * - Background: bg-accent (slate-100 in light mode, slate-800 in dark mode)
+ * - Animation: animate-pulse with motion-reduce:animate-none (respects prefers-reduced-motion)
+ * - Border-radius: 0px (rounded-none)
+ * - Contrast: 3:1 minimum for WCAG 1.4.11 (Non-text Contrast) compliance
+ *
+ * @accessibility
+ * - Uses aria-hidden="true" to hide from screen readers (visual indicator only)
+ * - Skeleton should be purely decorative - actual loading state must be conveyed via:
+ *   1. aria-busy="true" on the parent content container
+ *   2. Visually hidden loading text for screen readers
+ * - Animation automatically disabled when user prefers reduced motion
+ * - Reference: https://adrianroselli.com/2020/11/more-accessible-skeletons.html
+ *
+ * @usage_patterns
+ *
+ * **Text Line Skeleton:**
+ * ```tsx
+ * <Skeleton className="h-4 w-[250px]" />
+ * ```
+ *
+ * **Avatar Skeleton:**
+ * ```tsx
+ * <Skeleton className="h-12 w-12 rounded-none" />
+ * ```
+ *
+ * **Card Skeleton:**
+ * ```tsx
+ * <div className="space-y-3">
+ *   <Skeleton className="h-[125px] w-[250px] rounded-none" />
+ *   <div className="space-y-2">
+ *     <Skeleton className="h-4 w-[250px]" />
+ *     <Skeleton className="h-4 w-[200px]" />
+ *   </div>
+ * </div>
+ * ```
+ *
+ * **Proper Accessible Loading Pattern:**
+ * ```tsx
+ * <div aria-busy={isLoading} aria-label="User profile">
+ *   {isLoading ? (
+ *     <>
+ *       <span className="sr-only">Loading user profile...</span>
+ *       <Skeleton className="h-12 w-12 rounded-none" />
+ *       <Skeleton className="h-4 w-[200px]" />
+ *     </>
+ *   ) : (
+ *     <UserProfile data={userData} />
+ *   )}
+ * </div>
+ * ```
+ *
+ * @important
+ * - DO: Use aria-busy="true" on the parent container while loading
+ * - DO: Provide visually hidden loading text for screen readers
+ * - DO: Control dimensions via className (h-* w-* utilities)
+ * - DON'T: Use aria-live, role="alert", or role="progressbar" on skeleton
+ * - DON'T: Use skeleton without aria-busy on parent container
+ *
+ * @wcag_compliance WCAG 2.2 Level AA
+ * - 1.4.11 Non-text Contrast: ✅ 3:1 minimum contrast ratio
+ * - 2.3.3 Animation from Interactions: ✅ Respects prefers-reduced-motion
+ * - 4.1.3 Status Messages: ✅ When used with aria-busy on parent
+ *
+ * @see {@link https://ui.shadcn.com/docs/components/skeleton shadcn/ui Skeleton}
+ * @see {@link https://adrianroselli.com/2020/11/more-accessible-skeletons.html More Accessible Skeletons}
+ */
+declare const Skeleton: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type SkeletonProps = react.ComponentProps<"div">;
+
+/**
+ * Progress variants using CVA
+ *
+ * Defines color variants for different progress states.
+ */
+declare const progressVariants: (props?: ({
+    variant?: "default" | "success" | "error" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Progress component props
+ */
+type ProgressProps = {
+    /**
+     * Current progress value (0-100)
+     *
+     * @example
+     * ```tsx
+     * <Progress value={45} /> // 45% progress
+     * ```
+     */
+    value: number;
+    /**
+     * Maximum value (default: 100)
+     *
+     * @example
+     * ```tsx
+     * <Progress value={30} max={50} /> // 60% progress (30/50)
+     * ```
+     */
+    max?: number;
+    /**
+     * Visual variant for different states
+     *
+     * - `default`: Primary blue (bg-primary-500)
+     * - `success`: Green (bg-green-500)
+     * - `error`: Red (bg-destructive)
+     *
+     * @default "default"
+     */
+    variant?: VariantProps<typeof progressVariants>["variant"];
+    /**
+     * Optional CSS class name for custom styling
+     */
+    className?: string;
+    /**
+     * Optional ARIA label for screen readers
+     *
+     * If not provided, defaults to "Progress: X%"
+     *
+     * @example
+     * ```tsx
+     * <Progress value={45} aria-label="Uploading image.jpg: 45%" />
+     * ```
+     */
+    "aria-label"?: string;
+} & react.HTMLAttributes<HTMLDivElement>;
+/**
+ * Progress component
+ *
+ * Displays a horizontal progress bar with smooth animations and variant support.
+ *
+ * @param props - Progress component props
+ * @returns Progress bar component
+ *
+ * @example
+ * ```tsx
+ * function FileUpload() {
+ *   const [progress, setProgress] = React.useState(0);
+ *
+ *   return (
+ *     <div>
+ *       <p>Uploading file...</p>
+ *       <Progress value={progress} aria-label={`Upload progress: ${progress}%`} />
+ *     </div>
+ *   );
+ * }
+ * ```
+ */
+declare const Progress: react.ForwardRefExoticComponent<{
+    /**
+     * Current progress value (0-100)
+     *
+     * @example
+     * ```tsx
+     * <Progress value={45} /> // 45% progress
+     * ```
+     */
+    value: number;
+    /**
+     * Maximum value (default: 100)
+     *
+     * @example
+     * ```tsx
+     * <Progress value={30} max={50} /> // 60% progress (30/50)
+     * ```
+     */
+    max?: number;
+    /**
+     * Visual variant for different states
+     *
+     * - `default`: Primary blue (bg-primary-500)
+     * - `success`: Green (bg-green-500)
+     * - `error`: Red (bg-destructive)
+     *
+     * @default "default"
+     */
+    variant?: VariantProps<typeof progressVariants>["variant"];
+    /**
+     * Optional CSS class name for custom styling
+     */
+    className?: string;
+    /**
+     * Optional ARIA label for screen readers
+     *
+     * If not provided, defaults to "Progress: X%"
+     *
+     * @example
+     * ```tsx
+     * <Progress value={45} aria-label="Uploading image.jpg: 45%" />
+     * ```
+     */
+    "aria-label"?: string;
+} & react.HTMLAttributes<HTMLDivElement> & react.RefAttributes<HTMLDivElement>>;
+
+declare const Checkbox: react.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & react.RefAttributes<HTMLButtonElement>, "ref"> & {
+    indeterminate?: boolean;
+} & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * RadioGroup Component - Design System Specification
+ *
+ * Radio buttons allow users to select a single option from a set of mutually
+ * exclusive options. They should be used when only one selection is allowed.
+ *
+ * Accessibility:
+ * - Full keyboard navigation support (Arrow keys, Tab, Space)
+ * - Proper ARIA attributes provided by Radix UI
+ * - Focus indicators for keyboard users
+ * - Disabled state support
+ *
+ * Design Specs:
+ * - Size: 16px (h-4 w-4) - Fixed size matching Checkbox
+ * - Border: 1px solid, expands to 5px when checked (visual indicator)
+ * - Border radius: Full (rounded-none)
+ * - Transition: 150ms (consistent with design system)
+ * - Focus ring: 2px ring with 2px offset
+ *
+ * Implementation Notes:
+ * - Uses Radix UI primitives for robust accessibility
+ * - Visual "checked" state achieved via  border border-primary/5 expansion (border-[5px])
+ * - No inner indicator needed -  border border-primary/5 expansion provides clear visual feedback
+ * - Hover state changes  border border-primary/5 color for better interactivity
+ */
+declare const RadioGroup: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const RadioGroupItem: react.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+declare function Switch({ className, ...props }: ComponentProps<typeof Root$1>): react_jsx_runtime.JSX.Element;
+
+declare const Collapsible: react.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & react.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: react.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: react.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleContentProps & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Props for the Accordion root component
+ * @see https://www.radix-ui.com/primitives/docs/components/accordion
+ */
+type AccordionProps = ComponentPropsWithoutRef<typeof Root$2>;
+/**
+ * Props for the AccordionItem component (container for trigger and content)
+ */
+type AccordionItemProps = ComponentPropsWithoutRef<typeof Item>;
+/**
+ * Props for the AccordionTrigger component (clickable header button)
+ */
+type AccordionTriggerProps = ComponentPropsWithoutRef<typeof Trigger>;
+/**
+ * Props for the AccordionContent component (collapsible content panel)
+ */
+type AccordionContentProps = ComponentPropsWithoutRef<typeof Content>;
+
+/**
+ * Accordion Component - Design System Specification
+ *
+ * A vertically stacked set of interactive headings that each reveal a section of content.
+ * Built on Radix UI primitives with WAI-ARIA compliance.
+ *
+ * Design Specs:
+ * - AccordionItem border: 1px bottom  border border-primary/5 (border-b)
+ * - AccordionTrigger padding: 16px vertical (py-4)
+ * - AccordionTrigger font: font-medium (500 weight)
+ * - AccordionContent padding: 16px bottom, 0 top (pb-4 pt-0)
+ * - Icon size: 16×16px (h-4 w-4)
+ * - Icon rotation: 180° when expanded
+ * - Transition duration: 150ms (design system standard)
+ *
+ * Structure:
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Is it accessible?</AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It adheres to the WAI-ARIA design pattern.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ *
+ * Accessibility:
+ * - Full keyboard navigation (Arrow keys, Home, End, Space, Enter)
+ * - ARIA attributes automatically applied by Radix UI
+ * - aria-expanded indicates open/closed state
+ * - aria-controls associates trigger with content
+ * - aria-labelledby provides context to assistive technologies
+ * - role="region" on content panels
+ * - Focus indicators visible (Tailwind default focus-visible)
+ *
+ * Features:
+ * - Single mode: Only one item can be open at a time (type="single")
+ * - Multiple mode: Multiple items can be open (type="multiple")
+ * - Collapsible: Items can be collapsed when clicked again (collapsible prop)
+ * - Disabled state support (disabled prop on items)
+ * - Controlled/uncontrolled modes (value/defaultValue)
+ * - Smooth height animations (data-state animations)
+ *
+ * Usage Examples:
+ *
+ * Basic accordion (single mode):
+ * ```tsx
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Is it accessible?</AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It adheres to the WAI-ARIA design pattern.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionTrigger>Is it styled?</AccordionTrigger>
+ *     <AccordionContent>
+ *       Yes. It comes with default styles that match the design system.
+ *     </AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * Multiple items open (multiple mode):
+ * ```tsx
+ * <Accordion type="multiple">
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Section 1</AccordionTrigger>
+ *     <AccordionContent>Content 1</AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionTrigger>Section 2</AccordionTrigger>
+ *     <AccordionContent>Content 2</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * Controlled accordion:
+ * ```tsx
+ * const [value, setValue] = useState("item-1");
+ * <Accordion type="single" value={value} onValueChange={setValue}>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Item 1</AccordionTrigger>
+ *     <AccordionContent>Content 1</AccordionContent>
+ *   </AccordionItem>
+ *   <AccordionItem value="item-2">
+ *     <AccordionTrigger>Item 2</AccordionTrigger>
+ *     <AccordionContent>Content 2</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ * ```
+ *
+ * @see https://www.radix-ui.com/primitives/docs/components/accordion
+ */
+declare const Accordion: react.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & react.RefAttributes<HTMLDivElement>>;
+/**
+ * AccordionItem - Container for trigger and content
+ *
+ * Design Specs:
+ * - Border: 1px bottom  border border-primary/5 (border-b) for visual separation
+ * - Each item represents a collapsible section
+ *
+ * Accessibility:
+ * - Each item requires a unique value prop for identification
+ * - Disabled state can be set via disabled prop
+ */
+declare const AccordionItem: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/**
+ * AccordionTrigger - Clickable header button that toggles content visibility
+ *
+ * Design Specs:
+ * - Padding: 16px vertical (py-4) for adequate touch target
+ * - Font: font-medium (500 weight) for emphasis
+ * - Hover: underline text on hover for better feedback
+ * - Icon: ChevronDown (16×16px) with 180° rotation when expanded
+ * - Transition: 150ms (design system standard)
+ * - Layout: flex with space-between for trigger text and icon
+ *
+ * Accessibility:
+ * - Button element with proper ARIA attributes
+ * - aria-expanded indicates open/closed state
+ * - aria-controls associates trigger with content panel
+ * - Keyboard: Space/Enter to toggle, Arrow keys to navigate
+ * - Focus indicator visible via default focus-visible styles
+ *
+ * Note:
+ * - The ChevronDown icon is included by default
+ * - Icon rotates 180° when item is expanded ([data-state=open])
+ * - Trigger includes AccordionPrimitive.Header wrapper for proper semantics
+ */
+declare const AccordionTrigger: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * AccordionContent - Collapsible content panel
+ *
+ * Design Specs:
+ * - Padding: 16px bottom, 0 top (pb-4 pt-0) for proper spacing
+ * - Font: text-sm (14px) for body content
+ * - Animation: Smooth height transition via data-state animations
+ * - Overflow: hidden during animation for smooth reveal
+ *
+ * Accessibility:
+ * - role="region" for screen reader context
+ * - aria-labelledby associates content with trigger
+ * - Only visible when item is expanded (data-state="open")
+ * - Content is hidden but still in DOM when collapsed
+ *
+ * Animations:
+ * - data-state="open": animate-accordion-down (Tailwind built-in)
+ * - data-state="closed": animate-accordion-up (Tailwind built-in)
+ * - Height transitions smoothly from 0 to auto
+ */
+declare const AccordionContent: react.ForwardRefExoticComponent<Omit<AccordionPrimitive.AccordionContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Avatar Component - Design System Specification
+ *
+ * Displays user avatars with image and fallback support. Built on Radix UI
+ * primitives for robust image loading and fallback handling.
+ *
+ * **Component Structure**:
+ * - `Avatar`: Root container with size variants
+ * - `AvatarImage`: Image element with src/alt attributes
+ * - `AvatarFallback`: Fallback content (typically initials) when image fails
+ *
+ * **Sizes**:
+ * - sm: 32px (h-8 w-8) - For compact layouts, table rows, lists
+ * - md: 40px (h-10 w-10) - Default size, general use
+ * - lg: 48px (h-12 w-12) - For prominent displays, profile pages
+ * - xl: 64px (h-16 w-16) - For large profile displays, user panels
+ * - 2xl: 80px (h-20 w-20) - For profile headers, large avatars
+ *
+ * **Design Specs**:
+ * - Border radius: rounded-none (circular)
+ * - Background: bg-accent (slate-100 light, slate-800 dark)
+ * - Text color: text-accent-foreground (slate-900 light, slate-100 dark)
+ * - Fallback text scales with avatar size (text-xs to text-2xl)
+ *
+ * **Accessibility**:
+ * - Always provide `alt` text on AvatarImage for screen readers
+ * - Use meaningful fallback text (user initials, not decorative)
+ * - Built on Radix UI with WAI-ARIA compliance
+ * - Image loading handled gracefully with fallback
+ *
+ * @example
+ * // With image
+ * <Avatar size="md">
+ *   <AvatarImage src="/user.jpg" alt="John Doe" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ *
+ * @example
+ * // Fallback only (no image)
+ * <Avatar size="lg">
+ *   <AvatarFallback>AB</AvatarFallback>
+ * </Avatar>
+ *
+ * @example
+ * // Small size for lists
+ * <Avatar size="sm">
+ *   <AvatarImage src="/avatar.jpg" alt="User" />
+ *   <AvatarFallback>U</AvatarFallback>
+ * </Avatar>
+ *
+ * @example
+ * // Extra large for profile headers
+ * <Avatar size="2xl">
+ *   <AvatarImage src="/profile.jpg" alt="User Name" />
+ *   <AvatarFallback>UN</AvatarFallback>
+ * </Avatar>
+ *
+ * @see {@link https://www.radix-ui.com/primitives/docs/components/avatar Radix UI Avatar}
+ * @see {@link https://github.com/nextlyhq/nextly/blob/main/ui-revamp/04-design-system-specification.md Design System Specification}
+ */
+declare const avatarVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Avatar root component
+ *
+ * Container element for avatar image and fallback. Provides consistent sizing
+ * and styling across the application. Uses React Context to pass size to
+ * AvatarFallback for reliable text scaling.
+ */
+declare const Avatar: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & class_variance_authority.VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "2xl" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & {
+    size?: "sm" | "md" | "lg" | "xl" | "2xl";
+} & react.RefAttributes<HTMLSpanElement>>;
+/**
+ * AvatarImage component
+ *
+ * Displays the user's profile image. Falls back to AvatarFallback if image
+ * fails to load or src is not provided.
+ *
+ * **Best Practices**:
+ * - Always provide meaningful `alt` text (user's name, not "avatar" or "profile picture")
+ * - Use optimized images (WebP, AVIF) for better performance
+ * - Consider lazy loading for images below the fold
+ *
+ * @example
+ * <AvatarImage src="/users/john-doe.jpg" alt="John Doe" />
+ */
+declare const AvatarImage: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & react.RefAttributes<HTMLImageElement>>;
+/**
+ * AvatarFallback component
+ *
+ * Displays fallback content when image is not available or fails to load.
+ * Typically shows user initials (1-2 characters). Text size automatically
+ * scales based on the Avatar size using React Context.
+ *
+ * **Best Practices**:
+ * - Use 1-2 uppercase characters (user initials: "JD", "AB")
+ * - Keep text concise and meaningful
+ * - Don't use decorative text ("?", "NA") - use initials or icon instead
+ *
+ * **Text Sizing** (scales with avatar size via Context):
+ * - sm (32px): text-xs (12px)
+ * - md (40px): text-sm (14px)
+ * - lg (48px): text-base (16px)
+ * - xl (64px): text-lg (18px)
+ * - 2xl (80px): text-2xl (24px)
+ *
+ * @example
+ * // User initials
+ * <AvatarFallback>JD</AvatarFallback>
+ *
+ * @example
+ * // Single character for compact layouts
+ * <AvatarFallback>J</AvatarFallback>
+ *
+ * @example
+ * // Custom delay before showing fallback
+ * <AvatarFallback delayMs={300}>AB</AvatarFallback>
+ */
+declare const AvatarFallback: react.ForwardRefExoticComponent<Omit<react.DetailedHTMLProps<react.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    delayMs?: number;
+} & react.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Avatar component props
+ *
+ * Root container for displaying user avatars with image and fallback support.
+ * Extends Radix UI Avatar.Root props with size variants.
+ */
+type AvatarProps = ComponentPropsWithoutRef<"span"> & VariantProps<typeof avatarVariants> & {
+    /**
+     * Size variant
+     * - sm: 32px (h-8 w-8) - For compact layouts, lists
+     * - md: 40px (h-10 w-10) - Default size, general use
+     * - lg: 48px (h-12 w-12) - For prominent displays, profiles
+     * - xl: 64px (h-16 w-16) - For large profile displays, user panels
+     * - 2xl: 80px (h-20 w-20) - For profile headers, large avatars
+     * @default "md"
+     */
+    size?: "sm" | "md" | "lg" | "xl" | "2xl";
+};
+/**
+ * AvatarImage component props
+ *
+ * Displays the avatar image with proper fallback handling.
+ * Extends standard img element props.
+ *
+ * Note: Both src and alt are optional to support dynamic loading scenarios.
+ * When src is undefined/empty, the AvatarFallback will be displayed instead.
+ */
+type AvatarImageProps = ComponentPropsWithoutRef<"img">;
+/**
+ * AvatarFallback component props
+ *
+ * Displays fallback content (typically user initials) when image fails to load.
+ * Extends Radix UI Avatar.Fallback props.
+ */
+type AvatarFallbackProps = ComponentPropsWithoutRef<"span"> & {
+    /**
+     * Delay in milliseconds before showing fallback
+     * @default 600
+     */
+    delayMs?: number;
+};
+
+/**
+ * Props for the Tabs root component
+ * @see https://www.radix-ui.com/primitives/docs/components/tabs
+ */
+type TabsProps = ComponentPropsWithoutRef<typeof Root$3>;
+/**
+ * Props for the TabsList component (container for tab triggers)
+ */
+type TabsListProps = ComponentPropsWithoutRef<typeof List>;
+/**
+ * Props for the TabsTrigger component (clickable tab button)
+ */
+type TabsTriggerProps = ComponentPropsWithoutRef<typeof Trigger$1>;
+/**
+ * Props for the TabsContent component (content panel for each tab)
+ */
+type TabsContentProps = ComponentPropsWithoutRef<typeof Content$1>;
+
+/**
+ * Tabs Component - Design System Specification
+ *
+ * A set of layered sections of content—known as tab panels—that are displayed one at a time.
+ * Built on Radix UI primitives with WAI-ARIA compliance.
+ *
+ * Design Specs:
+ * - TabsList border-radius: 0px (rounded-none)
+ * - TabsTrigger border-radius: 0px (rounded-none)
+ * - TabsList height: 40px (h-10)
+ * - TabsTrigger padding: 12px 24px (px-3 py-1.5)
+ * - Transition duration: 150ms (design system standard)
+ * - Active state: bg-background with subtle shadow
+ *
+ * Structure:
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ *
+ * Accessibility:
+ * - Full keyboard navigation (Arrow keys, Home, End, Tab)
+ * - ARIA attributes automatically applied by Radix UI
+ * - Focus indicators with 2px ring (WCAG 2.2 compliant)
+ * - Disabled state support
+ *
+ * Features:
+ * - Controlled/uncontrolled modes (value/defaultValue)
+ * - Horizontal/vertical orientation support
+ * - Automatic/manual activation modes
+ * - Keyboard navigation built-in
+ *
+ * Usage Examples:
+ *
+ * Basic tabs:
+ * ```tsx
+ * <Tabs defaultValue="overview">
+ *   <TabsList>
+ *     <TabsTrigger value="overview">Overview</TabsTrigger>
+ *     <TabsTrigger value="details">Details</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="overview">Overview content</TabsContent>
+ *   <TabsContent value="details">Details content</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * Controlled tabs:
+ * ```tsx
+ * const [activeTab, setActiveTab] = useState("tab1");
+ * <Tabs value={activeTab} onValueChange={setActiveTab}>
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * Vertical tabs:
+ * ```tsx
+ * <Tabs defaultValue="tab1" orientation="vertical">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ * ```
+ *
+ * @see https://www.radix-ui.com/primitives/docs/components/tabs
+ */
+declare const Tabs: react.ForwardRefExoticComponent<_radix_ui_react_tabs.TabsProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * TabsList - Container for tab triggers
+ *
+ * Design Specs:
+ * - Height: 40px (h-10)
+ * - Border-radius: none (for underline style)
+ * - Background: transparent
+ * - Layout: inline-flex (horizontal by default, use orientation="vertical" on Tabs root for vertical)
+ */
+declare const TabsList: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsListProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/**
+ * TabsTrigger - Clickable tab button
+ *
+ * Design Specs:
+ * - Border-radius: none (Gmail-style underline tabs)
+ * - Padding: 6px 16px (px-4 py-2)
+ * - Font: text-sm (14px), font-medium (500)
+ * - Transition: 150ms (design system standard)
+ * - Active state: blue text with blue bottom  border border-primary/5 (2px)
+ * - Hover: blue text with blue bottom  border border-primary/5
+ * - Gmail-inspired clean underline style
+ *
+ * Accessibility:
+ * - Keyboard navigation: Arrow keys, Home, End
+ * - Focus ring: 2px with offset (WCAG 2.2 compliant)
+ * - Disabled state: pointer-events-none, opacity-50
+ * - Data attributes: [data-state="active|inactive"], [data-disabled]
+ */
+declare const TabsTrigger: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsTriggerProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+/**
+ * TabsContent - Content panel for each tab
+ *
+ * Design Specs:
+ * - Margin top: 8px (mt-2) to separate from TabsList
+ * - Focus ring: 2px with offset (for keyboard navigation)
+ *
+ * Accessibility:
+ * - Focus indicator when navigating with Tab key
+ * - Data attributes: [data-state="active|inactive"], [data-orientation]
+ * - Only active content is visible, inactive content is hidden
+ */
+declare const TabsContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tabs.TabsContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const TooltipProvider: react.FC<_radix_ui_react_tooltip.TooltipProviderProps>;
+declare const Tooltip: react.FC<_radix_ui_react_tooltip.TooltipProps>;
+declare const TooltipTrigger: react.ForwardRefExoticComponent<_radix_ui_react_tooltip.TooltipTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: react.ForwardRefExoticComponent<Omit<_radix_ui_react_tooltip.TooltipContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+declare const Popover: react.FC<PopoverPrimitive.PopoverProps>;
+declare const PopoverTrigger: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const PopoverAnchor: react.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & react.RefAttributes<HTMLDivElement>>;
+declare const PopoverContent: react.ForwardRefExoticComponent<Omit<PopoverPrimitive.PopoverContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Dialog (Modal) Component
+ *
+ * A composable dialog component built on Radix UI primitives for creating modal windows.
+ * Supports keyboard navigation, focus trapping, and WCAG 2.2 AA accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Dialog open={open} onOpenChange={setOpen}>
+ *   <DialogTrigger asChild>
+ *     <Button>Open Dialog</Button>
+ *   </DialogTrigger>
+ *   <DialogContent size="md">
+ *     <DialogHeader>
+ *       <DialogTitle>Edit Profile</DialogTitle>
+ *       <DialogDescription>
+ *         Make changes to your profile here. Click save when you're done.
+ *       </DialogDescription>
+ *     </DialogHeader>
+ *     <div className="space-y-4">
+ *       Your content here
+ *     </div>
+ *     <DialogFooter>
+ *       <Button variant="outline" onClick={() => setOpen(false)}>Cancel</Button>
+ *       <Button type="submit">Save Changes</Button>
+ *     </DialogFooter>
+ *   </DialogContent>
+ * </Dialog>
+ * ```
+ *
+ * @design-spec
+ * - Border-radius: 0px (rounded-none) per design system spec
+ * - Max-width: 512px (default), responsive sizes available
+ * - Backdrop: black/80 with blur effect
+ * - Padding: 24px (p-6)
+ * - Shadow: xl for prominence (elevation level 4)
+ * - Transition: 150ms per design system
+ * - Z-index: Overlay at z-50, Content at z-51 (ensures content above overlay)
+ *
+ * @accessibility
+ * - Focus is trapped inside dialog when open
+ * - Pressing Escape closes the dialog
+ * - Focus returns to trigger element on close
+ * - Includes ARIA labels and descriptions
+ * - Screen reader announcements via role="dialog"
+ * - Close button has sr-only text for screen readers
+ */
+declare const Dialog: react.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: react.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+type DialogOverlayProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
+/**
+ * DialogOverlay - The backdrop overlay behind the dialog content.
+ * Renders with black/80 opacity and blur effect per design spec.
+ */
+declare const DialogOverlay: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Dialog content size variants using CVA.
+ *
+ * @variant sm - Small dialog (384px / max-w-sm) - confirmations, alerts
+ * @variant md - Medium dialog (512px / max-w-lg) - default, standard forms
+ * @variant lg - Large dialog (672px / max-w-2xl) - complex forms, data tables
+ * @variant xl - Extra large dialog (896px / max-w-4xl) - content editors, media galleries
+ * @variant full - Full width with margin (responsive) - fullscreen on mobile
+ */
+declare const dialogContentVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type DialogContentProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & VariantProps<typeof dialogContentVariants>;
+/**
+ * DialogContent - The main dialog content container.
+ *
+ * @param size - Size variant (sm, md, lg, xl, full). Default: md (512px)
+ *
+ * @example
+ * ```tsx
+ * <DialogContent size="lg">
+ *   Your content here
+ * </DialogContent>
+ * ```
+ */
+declare const DialogContent: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & VariantProps<(props?: ({
+    size?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & react.RefAttributes<HTMLDivElement>>;
+type DialogHeaderProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * DialogHeader - Container for dialog title and description.
+ * Provides consistent spacing and alignment (centered on mobile, left-aligned on desktop).
+ */
+declare const DialogHeader: react.ForwardRefExoticComponent<DialogHeaderProps & react.RefAttributes<HTMLDivElement>>;
+type DialogFooterProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * DialogFooter - Container for dialog action buttons.
+ * Provides consistent spacing and alignment (vertical on mobile, horizontal on desktop).
+ *
+ * @example
+ * ```tsx
+ * <DialogFooter>
+ *   <Button variant="outline" onClick={onCancel}>Cancel</Button>
+ *   <Button type="submit">Save Changes</Button>
+ * </DialogFooter>
+ * ```
+ */
+declare const DialogFooter: react.ForwardRefExoticComponent<DialogFooterProps & react.RefAttributes<HTMLDivElement>>;
+type DialogTitleProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
+/**
+ * DialogTitle - The title of the dialog.
+ * Uses text-lg (18px) with semibold weight per design system.
+ *
+ * @accessibility Required for screen readers. Always include a DialogTitle.
+ */
+declare const DialogTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+type DialogDescriptionProps = ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
+/**
+ * DialogDescription - The description text of the dialog.
+ * Uses text-sm (14px) with muted color per design system.
+ *
+ * @accessibility Provides additional context for screen readers.
+ * If not needed visually, you can use sr-only class.
+ */
+declare const DialogDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+
+declare const AlertDialog: react.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: react.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: react.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+type AlertDialogOverlayProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Overlay>;
+/**
+ * AlertDialogOverlay - The backdrop overlay behind the dialog content.
+ */
+declare const AlertDialogOverlay: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type AlertDialogContentProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Content>;
+/**
+ * AlertDialogContent - The main dialog content container.
+ */
+declare const AlertDialogContent: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type AlertDialogHeaderProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * AlertDialogHeader - Container for dialog title and description.
+ */
+declare const AlertDialogHeader: react.ForwardRefExoticComponent<AlertDialogHeaderProps & react.RefAttributes<HTMLDivElement>>;
+type AlertDialogFooterProps = HTMLAttributes<HTMLDivElement>;
+/**
+ * AlertDialogFooter - Container for dialog action buttons.
+ */
+declare const AlertDialogFooter: react.ForwardRefExoticComponent<AlertDialogFooterProps & react.RefAttributes<HTMLDivElement>>;
+type AlertDialogTitleProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;
+/**
+ * AlertDialogTitle - The title of the alert dialog.
+ */
+declare const AlertDialogTitle: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+type AlertDialogDescriptionProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Description>;
+/**
+ * AlertDialogDescription - The description text of the alert dialog.
+ */
+declare const AlertDialogDescription: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+type AlertDialogActionProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Action>;
+/**
+ * AlertDialogAction - The primary action button (e.g., "Delete", "Confirm").
+ * Styled as destructive by default.
+ */
+declare const AlertDialogAction: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+type AlertDialogCancelProps = ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Cancel>;
+/**
+ * AlertDialogCancel - The cancel button.
+ * Styled as outline variant.
+ */
+declare const AlertDialogCancel: react.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * DropdownMenu Component
+ *
+ * A composable dropdown menu component built on Radix UI primitives.
+ * Provides context menus, action menus, and navigation menus with full keyboard support.
+ *
+ * **Design Specifications**:
+ * - Border-radius: 0px (rounded-none) - consistent with Dialog, Select
+ * - Padding: 4px (p-1) - compact spacing for menu items
+ * - Shadow: shadow-md - floating element elevation
+ * - Z-index: z-50 - above most content, below modals
+ * - Min-width: 8rem (128px) - prevents cramped menus
+ * - Item padding: 8px horizontal, 6px vertical (px-2 py-1.5)
+ * - Font-size: 14px (text-sm)
+ * - Transition: Tailwind animate utilities (fade, zoom, slide)
+ *
+ * **Accessibility**:
+ * - Full keyboard navigation (Arrow keys, Enter, Escape, Tab)
+ * - ARIA roles and attributes (menu, menuitem, menuitemcheckbox, menuitemradio)
+ * - Focus management (focus trap, auto-focus first item)
+ * - Screen reader support (labels, descriptions, indicators)
+ * - WCAG 2.2 Level AA compliant
+ *
+ * **Features**:
+ * - Portal rendering via PortalProvider for proper z-index stacking
+ * - Checkbox and Radio item variants
+ * - Sub-menu support (nested menus)
+ * - Keyboard shortcuts display
+ * - Customizable positioning (side, align, sideOffset)
+ * - Disabled state support
+ * - Inset support (for items with icons)
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button variant="outline">Open Menu</Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>Profile</DropdownMenuItem>
+ *     <DropdownMenuItem>Settings</DropdownMenuItem>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuItem>Logout</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With icons and shortcuts
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button variant="ghost" size="icon">
+ *       <MoreHorizontal className="h-4 w-4" />
+ *     </Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent align="end">
+ *     <DropdownMenuLabel>Actions</DropdownMenuLabel>
+ *     <DropdownMenuItem>
+ *       <Edit className="h-4 w-4" />
+ *       Edit
+ *       <DropdownMenuShortcut>⌘E</DropdownMenuShortcut>
+ *     </DropdownMenuItem>
+ *     <DropdownMenuItem>
+ *       <Trash2 className="h-4 w-4" />
+ *       Delete
+ *       <DropdownMenuShortcut>⌘⌫</DropdownMenuShortcut>
+ *     </DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // With checkbox items
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger asChild>
+ *     <Button variant="outline">View Options</Button>
+ *   </DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuLabel>Display</DropdownMenuLabel>
+ *     <DropdownMenuSeparator />
+ *     <DropdownMenuCheckboxItem checked={showPanel} onCheckedChange={setShowPanel}>
+ *       Show Panel
+ *     </DropdownMenuCheckboxItem>
+ *     <DropdownMenuCheckboxItem checked={showToolbar} onCheckedChange={setShowToolbar}>
+ *       Show Toolbar
+ *     </DropdownMenuCheckboxItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ *
+ * @see https://www.radix-ui.com/docs/primitives/components/dropdown-menu - Radix UI DropdownMenu
+ */
+
+declare const DropdownMenu: react.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: react.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: react.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: react.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: react.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Props for the DropdownMenuSubTrigger component
+ */
+type DropdownMenuSubTriggerProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    /**
+     * Whether to add left padding (for alignment with items that have icons)
+     */
+    inset?: boolean;
+};
+/**
+ * Props for the DropdownMenuSubContent component
+ */
+type DropdownMenuSubContentProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>;
+/**
+ * Props for the DropdownMenuContent component
+ */
+type DropdownMenuContentProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content>;
+/**
+ * Props for the DropdownMenuItem component
+ */
+type DropdownMenuItemProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    /**
+     * Whether to add left padding (for alignment with items that have icons)
+     */
+    inset?: boolean;
+};
+/**
+ * Props for the DropdownMenuCheckboxItem component
+ */
+type DropdownMenuCheckboxItemProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>;
+/**
+ * Props for the DropdownMenuRadioItem component
+ */
+type DropdownMenuRadioItemProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>;
+/**
+ * Props for the DropdownMenuLabel component
+ */
+type DropdownMenuLabelProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    /**
+     * Whether to add left padding (for alignment with items that have icons)
+     */
+    inset?: boolean;
+};
+/**
+ * Props for the DropdownMenuSeparator component
+ */
+type DropdownMenuSeparatorProps = react.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>;
+/**
+ * Props for the DropdownMenuShortcut component
+ */
+type DropdownMenuShortcutProps = react.HTMLAttributes<HTMLSpanElement>;
+
+/**
+ * Select Component - Design System Specification
+ *
+ * Dropdown selection component for choosing from a list of options. Built on
+ * Radix UI for robust accessibility and portal rendering.
+ *
+ * Accessibility:
+ * - Full keyboard navigation (Arrow keys, Enter, Escape, Type-ahead)
+ * - Proper ARIA attributes provided by Radix UI
+ * - Screen reader announcements for selected value
+ * - Focus management and keyboard shortcuts
+ * - Disabled state support
+ *
+ * Design Specs:
+ * - Height: sm=32px, default=40px, lg=44px (matches Input component)
+ * - Padding: Horizontal 12px, vertical varies by size
+ * - Border radius: 0px (rounded-none)
+ * - Border: 1px solid, changes on focus/error
+ * - Transition: 150ms (consistent with design system)
+ * - Font size: sm/default=14px (text-sm), lg=16px (text-base)
+ *
+ * Size Variants:
+ * - sm: Height 32px (h-8) - Compact forms, filters
+ * - default: Height 40px (h-10) - Standard forms
+ * - lg: Height 44px (h-11) - Prominent selects
+ *
+ * Features:
+ * - Portal rendering via PortalProvider (avoids overflow issues)
+ * - CheckIcon indicator for selected items
+ * - Keyboard type-ahead search
+ * - Grouping support with labels
+ * - Placeholder text support
+ * - Error state via aria-invalid
+ */
+declare function Select({ ...props }: ComponentProps<typeof SelectPrimitive.Root>): react_jsx_runtime.JSX.Element;
+declare function SelectGroup({ ...props }: ComponentProps<typeof SelectPrimitive.Group>): react_jsx_runtime.JSX.Element;
+declare function SelectValue({ ...props }: ComponentProps<typeof SelectPrimitive.Value>): react_jsx_runtime.JSX.Element;
+declare const selectTriggerVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SelectTriggerProps extends ComponentProps<typeof SelectPrimitive.Trigger>, VariantProps<typeof selectTriggerVariants> {
+}
+declare const SelectTrigger: react.ForwardRefExoticComponent<Omit<SelectTriggerProps, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+declare function SelectContent({ className, children, position, ...props }: ComponentProps<typeof SelectPrimitive.Content>): react_jsx_runtime.JSX.Element;
+declare function SelectLabel({ className, ...props }: ComponentProps<typeof SelectPrimitive.Label>): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ className, children, ...props }: ComponentProps<typeof SelectPrimitive.Item>): react_jsx_runtime.JSX.Element;
+declare function SelectSeparator({ className, ...props }: ComponentProps<typeof SelectPrimitive.Separator>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollUpButton>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: ComponentProps<typeof SelectPrimitive.ScrollDownButton>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Sheet Component
+ *
+ * A dialog variant that slides in from the edges of the screen. Used for mobile
+ * navigation drawers, side panels, and contextual overlays.
+ *
+ * Built on Radix UI Dialog with slide-in animations and overlay backdrop.
+ *
+ * ## Design Specifications
+ *
+ * - **Width**: 320px (sm), 400px (default), 512px (lg), 672px (xl), 100% (full)
+ * - **Animation**: Slide-in from side (150ms duration)
+ * - **Backdrop**: Semi-transparent overlay (50% opacity with backdrop blur)
+ * - **z-index**: 50 (both overlay and content - content renders on top via DOM order)
+ * - **Border-radius**: 0 (full-screen edges)
+ *
+ * ## Accessibility
+ *
+ * - **Focus Trapping**: Focus is trapped within the sheet when open
+ * - **Escape Key**: Closes sheet on Escape key press
+ * - **Overlay Click**: Closes sheet when clicking outside
+ * - **ARIA**: Proper dialog role and ARIA attributes
+ * - **Keyboard Navigation**: Tab/Shift+Tab to navigate, Enter to activate
+ *
+ * ## Usage Examples
+ *
+ * ### Basic Mobile Navigation Drawer
+ *
+ * ```tsx
+ * import { Sheet, SheetContent, SheetTrigger } from '@nextlyhq/ui';
+ * import { Menu } from 'lucide-react';
+ *
+ * function MobileNav() {
+ *   return (
+ *     <Sheet>
+ *       <SheetTrigger asChild>
+ *         <button className="h-11 w-11 md:hidden">
+ *           <Menu />
+ *         </button>
+ *       </SheetTrigger>
+ *       <SheetContent side="left" className="w-72">
+ *         <nav>
+ *           <a href="/dashboard">Dashboard</a>
+ *           <a href="/users">Users</a>
+ *         </nav>
+ *       </SheetContent>
+ *     </Sheet>
+ *   );
+ * }
+ * ```
+ *
+ * @see https://www.radix-ui.com/primitives/docs/components/dialog
+ */
+declare const Sheet: react.FC<DialogPrimitive.DialogProps>;
+declare const SheetTrigger: react.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & react.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: react.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & react.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: react.FC<DialogPrimitive.DialogPortalProps>;
+/**
+ * SheetOverlay
+ *
+ * Semi-transparent backdrop that appears behind the sheet.
+ *
+ * - **Background**: Black with 50% opacity + backdrop blur
+ * - **Animation**: Fade in/out (150ms)
+ * - **z-index**: 50
+ */
+declare const SheetOverlay: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+/**
+ * Sheet Content Variants
+ *
+ * Defines slide-in animations for each side and size options.
+ */
+declare const sheetVariants: (props?: ({
+    side?: "top" | "right" | "bottom" | "left" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SheetContentProps extends react.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+/**
+ * SheetContent
+ *
+ * Main content container for the sheet.
+ *
+ * - **Position**: Fixed to screen edge (side prop)
+ * - **Width**: Responsive (w-3/4 on mobile, max-w-sm on sm+)
+ * - **Padding**: 24px (p-6)
+ * - **Border**: On appropriate edge based on side
+ * - **Close Button**: Positioned in top-right corner (16px from edges)
+ *
+ * @param side - Which edge to slide in from: "left", "right", "top", "bottom"
+ */
+declare const SheetContent: react.ForwardRefExoticComponent<SheetContentProps & react.RefAttributes<HTMLDivElement>>;
+/**
+ * SheetHeader
+ *
+ * Header section for sheet title and description.
+ *
+ * - **Layout**: Flex column with 6px gap
+ * - **Text Alignment**: Left (default) or center
+ */
+declare const SheetHeader: {
+    ({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * SheetFooter
+ *
+ * Footer section for sheet actions (buttons, etc.).
+ *
+ * - **Layout**: Flex row on desktop, column on mobile
+ * - **Alignment**: Right-aligned on desktop, stretched on mobile
+ */
+declare const SheetFooter: {
+    ({ className, ...props }: react.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * SheetTitle
+ *
+ * Title heading for the sheet (h2).
+ *
+ * - **Font**: text-lg font-semibold
+ * - **Color**: text-foreground
+ * - **Required**: For accessibility (screen readers)
+ */
+declare const SheetTitle: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & react.RefAttributes<HTMLHeadingElement>, "ref"> & react.RefAttributes<HTMLHeadingElement>>;
+/**
+ * SheetDescription
+ *
+ * Description text for the sheet.
+ *
+ * - **Font**: text-sm
+ * - **Color**: text-muted-foreground
+ * - **Purpose**: Provide context for screen readers
+ */
+declare const SheetDescription: react.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & react.RefAttributes<HTMLParagraphElement>, "ref"> & react.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * Sheet Component Types
+ *
+ * TypeScript type definitions for the Sheet component (Dialog variant).
+ */
+
+/**
+ * Sheet root component props
+ * Extends Radix UI Dialog.Root props
+ */
+type SheetProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Root>;
+/**
+ * Sheet trigger component props
+ * Extends Radix UI Dialog.Trigger props
+ */
+type SheetTriggerProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Trigger>;
+/**
+ * Sheet close component props
+ * Extends Radix UI Dialog.Close props
+ */
+type SheetCloseProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Close>;
+/**
+ * Sheet overlay component props
+ * Extends Radix UI Dialog.Overlay props
+ */
+type SheetOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>;
+/**
+ * Sheet header component props
+ * Standard div props
+ */
+type SheetHeaderProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Sheet footer component props
+ * Standard div props
+ */
+type SheetFooterProps = React.HTMLAttributes<HTMLDivElement>;
+/**
+ * Sheet title component props
+ * Extends Radix UI Dialog.Title props
+ */
+type SheetTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>;
+/**
+ * Sheet description component props
+ * Extends Radix UI Dialog.Description props
+ */
+type SheetDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>;
+/**
+ * Sheet component refs
+ */
+type SheetOverlayRef = React.ElementRef<typeof DialogPrimitive.Overlay>;
+type SheetContentRef = React.ElementRef<typeof DialogPrimitive.Content>;
+type SheetTitleRef = React.ElementRef<typeof DialogPrimitive.Title>;
+type SheetDescriptionRef = React.ElementRef<typeof DialogPrimitive.Description>;
+
+/**
+ * Command Component
+ *
+ * A command palette component built on cmdk for fast, keyboard-driven navigation and actions.
+ * Supports fuzzy search, keyboard navigation, and WCAG 2.2 AA accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Command>
+ *   <CommandInput placeholder="Type a command or search..." />
+ *   <CommandList>
+ *     <CommandEmpty>No results found.</CommandEmpty>
+ *     <CommandGroup heading="Navigation">
+ *       <CommandItem>
+ *         <Home className="mr-2 h-4 w-4" />
+ *         Dashboard
+ *       </CommandItem>
+ *     </CommandGroup>
+ *   </CommandList>
+ * </Command>
+ * ```
+ *
+ * @design-spec
+ * - Input height: 48px (h-12) - larger for prominence
+ * - Item height: 36px (h-9) desktop, 44px (h-11) mobile for touch
+ * - Border radius: 0px (rounded-none) for items
+ * - Max list height: 400px (max-h-[400px])
+ * - Transition: 150ms per design system
+ *
+ * @accessibility
+ * - Full keyboard navigation (Arrow keys, Enter, Escape, Home, End)
+ * - ARIA attributes (role="combobox", role="listbox", role="option")
+ * - Screen reader announcements for results
+ * - Focus management and visual focus indicators
+ * - WCAG 2.2 AA compliant (verified contrast ratios)
+ */
+type CommandProps = ComponentPropsWithoutRef<typeof Command$1>;
+/**
+ * Command - Root container for the command palette.
+ * Handles filtering, keyboard navigation, and accessibility.
+ */
+declare const Command: react.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+    shouldFilter?: boolean;
+    filter?: (value: string, search: string, keywords?: string[]) => number;
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (value: string) => void;
+    loop?: boolean;
+    disablePointerSelection?: boolean;
+    vimBindings?: boolean;
+} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type CommandDialogProps = DialogPrimitive.DialogProps;
+/**
+ * CommandDialog - Command palette in a modal dialog.
+ * Use this variant for Cmd+K keyboard shortcut pattern.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = useState(false)
+ *
+ * useEffect(() => {
+ *   const down = (e: KeyboardEvent) => {
+ *     if (e.key === "k" && (e.metaKey || e.ctrlKey)) {
+ *       e.preventDefault()
+ *       setOpen((open) => !open)
+ *     }
+ *   }
+ *   document.addEventListener("keydown", down)
+ *   return () => document.removeEventListener("keydown", down)
+ * }, [])
+ *
+ * return (
+ *   <CommandDialog open={open} onOpenChange={setOpen}>
+ *     <CommandInput placeholder="Type a command..." />
+ *     <CommandList>...</CommandList>
+ *   </CommandDialog>
+ * )
+ * ```
+ */
+declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
+type CommandInputProps = ComponentPropsWithoutRef<typeof Command$1.Input>;
+/**
+ * CommandInput - Search input field for filtering commands.
+ * Includes search icon and styled per design system.
+ */
+declare const CommandInput: react.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<react.DetailedHTMLProps<react.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof react.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof react.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & react.RefAttributes<HTMLInputElement>, "ref"> & react.RefAttributes<HTMLInputElement>>;
+type CommandListProps = ComponentPropsWithoutRef<typeof Command$1.List>;
+/**
+ * CommandList - Scrollable container for command results.
+ * Max height 400px per design spec to prevent tall dialogs.
+ */
+declare const CommandList: react.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type CommandEmptyProps = ComponentPropsWithoutRef<typeof Command$1.Empty>;
+/**
+ * CommandEmpty - Empty state message when no results found.
+ * Centered text with muted color per design spec.
+ */
+declare const CommandEmpty: react.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Pick<Pick<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type CommandGroupProps = ComponentPropsWithoutRef<typeof Command$1.Group>;
+/**
+ * CommandGroup - Grouped section of commands with optional heading.
+ * Heading styled as uppercase, small, semibold per design spec.
+ */
+declare const CommandGroup: react.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+    heading?: React.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type CommandSeparatorProps = ComponentPropsWithoutRef<typeof Command$1.Separator>;
+/**
+ * CommandSeparator - Visual divider between command groups.
+ * 1px line with  border border-primary/5 color, 8px margin top/bottom.
+ */
+declare const CommandSeparator: react.ForwardRefExoticComponent<Omit<Pick<Pick<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type CommandItemProps = ComponentPropsWithoutRef<typeof Command$1.Item>;
+/**
+ * CommandItem - Individual selectable command item.
+ * Height: 36px desktop, 44px mobile per design spec.
+ * Includes hover, focus, and selected states.
+ */
+declare const CommandItem: react.ForwardRefExoticComponent<Omit<{
+    children?: React.ReactNode;
+} & Omit<Pick<Pick<react.DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+    ref?: React.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+type CommandShortcutProps = HTMLAttributes<HTMLSpanElement>;
+/**
+ * CommandShortcut - Keyboard shortcut display (e.g., "⌘K", "↵ Enter").
+ * Monospace font, subtle background, right-aligned per design spec.
+ */
+declare const CommandShortcut: react.ForwardRefExoticComponent<CommandShortcutProps & react.RefAttributes<HTMLSpanElement>>;
+
+/**
+ * Spinner Component - Design System Specification
+ *
+ * Loading indicator for short wait times (300ms - 1s). Uses the Loader2 icon from
+ * lucide-react with a smooth rotation animation.
+ *
+ * **Usage Guidelines** (from UX Strategy):
+ * - ✅ Use for buttons and small components (loading states)
+ * - ✅ Use for short waits (300ms - 1s)
+ * - ❌ Don't use for page content (use Skeleton instead)
+ * - ❌ Don't use for waits > 3s (use Progress bar instead)
+ *
+ * **Sizes**:
+ * - sm: 16px (h-4 w-4) - For small buttons, inline text
+ * - md: 20px (h-5 w-5) - Default size, for regular buttons
+ * - lg: 24px (h-6 w-6) - For large buttons, prominent loading states
+ *
+ * **Accessibility**:
+ * - Uses `role="status"` for screen reader announcements
+ * - Uses `aria-label="Loading"` for accessible name
+ * - Respects `prefers-reduced-motion` (animation stops automatically via Tailwind)
+ * - Non-focusable (not interactive)
+ *
+ * **Animation**:
+ * - Uses Tailwind's `animate-spin` utility (1s linear infinite)
+ * - Automatically respects user's motion preferences (WCAG 2.3.3)
+ *
+ * @example
+ * // Button loading state
+ * <Button disabled>
+ *   <Spinner size="sm" className="mr-2" />
+ *   Saving...
+ * </Button>
+ *
+ * @example
+ * // Standalone loading indicator
+ * <div className="flex items-center justify-center p-8">
+ *   <Spinner size="lg" />
+ * </div>
+ *
+ * @example
+ * // Custom color
+ * <Spinner className="text-primary" />
+ */
+declare const spinnerVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Spinner component props
+ *
+ * Extends LucideProps to support all standard SVG attributes (data-*, id, etc.)
+ * while providing size variants and accessibility features.
+ */
+type SpinnerProps = Omit<LucideProps, "size"> & VariantProps<typeof spinnerVariants> & {
+    /**
+     * Accessible label for screen readers
+     * @default "Loading"
+     */
+    "aria-label"?: string;
+};
+/**
+ * Spinner component for loading states
+ */
+declare const Spinner: react.ForwardRefExoticComponent<Omit<SpinnerProps, "ref"> & react.RefAttributes<SVGSVGElement>>;
+
+/**
+ * Toaster Component - Toast Notification System
+ *
+ * A wrapper around Sonner (opinionated toast component for React) with
+ * custom icons. Provides a consistent notification system across the application.
+ *
+ * Features:
+ * - Theme support via `theme` prop (light/dark/system)
+ * - Custom icons from lucide-react matching design system
+ * - 6 toast types: default, success, info, warning, error, loading (promise-based)
+ * - Action button support (Undo, Retry, etc.)
+ * - Configurable positioning (default: bottom-right)
+ * - Automatic stacking and dismissal
+ * - WCAG 2.2 AA compliant colors via CSS variables
+ *
+ * Setup:
+ * 1. Add <Toaster /> to your root layout (once per app)
+ * 2. Import toast from '@nextlyhq/ui' to trigger notifications
+ *
+ * Usage Examples:
+ *
+ * // Default toast
+ * import { toast } from '@nextlyhq/ui';
+ * toast("Event has been created");
+ *
+ * // Success toast
+ * toast.success("User created successfully!");
+ *
+ * // Error toast
+ * toast.error("Failed to save changes. Please try again.");
+ *
+ * // Warning toast
+ * toast.warning("This action cannot be undone.");
+ *
+ * // Info toast
+ * toast.info("Be at the area 10 minutes before the event time");
+ *
+ * // Toast with action button
+ * toast("Event deleted", {
+ *   description: "You can undo this action",
+ *   action: {
+ *     label: "Undo",
+ *     onClick: () => console.log("Undo clicked"),
+ *   },
+ * });
+ *
+ * // Promise-based toast (loading → success/error)
+ * toast.promise(
+ *   fetchData(),
+ *   {
+ *     loading: "Loading...",
+ *     success: (data) => `${data.name} has been created`,
+ *     error: "Failed to load data",
+ *   }
+ * );
+ *
+ * Positioning Options:
+ * <Toaster position="top-right" />
+ * <Toaster position="top-center" />
+ * <Toaster position="bottom-left" />
+ * <Toaster position="bottom-center" />
+ * <Toaster position="bottom-right" /> (default)
+ *
+ * Customization:
+ * All styling uses CSS variables from the design system:
+ * - --normal-bg: Background color (uses --popover with fallback)
+ * - --normal-text: Text color (uses --popover-foreground with fallback)
+ * - --normal-border: Border color (uses --border with fallback)
+ * - --border-radius: Border radius (uses --radius with fallback)
+ *
+ * Security:
+ * ⚠️ IMPORTANT: Toast content is not automatically sanitized. When displaying
+ * user-generated content or data from external sources, ensure you sanitize
+ * the content to prevent XSS attacks. Use plain text strings when possible,
+ * or sanitize HTML/JSX content before passing to toast functions.
+ *
+ * Safe: toast.success(`User ${username} created`) // Template literals with plain text
+ * Unsafe: toast.success(<div dangerouslySetInnerHTML={{__html: userInput}} />) // XSS risk
+ * Safe: toast.success(<div>{sanitizeHtml(userInput)}</div>) // Sanitized content
+ *
+ * Accessibility:
+ * - Screen reader announcements for all toast types
+ * - Keyboard dismissible (Escape key)
+ * - Focus management for action buttons
+ * - ARIA labels automatically applied
+ * - WCAG 2.2 AA color contrast
+ *
+ * @see https://sonner.emilkowal.ski/ - Sonner documentation
+ * @see https://ui.shadcn.com/docs/components/sonner - shadcn/ui integration guide
+ */
+declare function Toaster({ theme, ...props }: ToasterProps): react_jsx_runtime.JSX.Element;
+
+declare const Table: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableElement> & react.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableSectionElement> & react.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableRowElement> & react.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: react.ForwardRefExoticComponent<react.ThHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: react.ForwardRefExoticComponent<react.TdHTMLAttributes<HTMLTableCellElement> & react.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: react.ForwardRefExoticComponent<react.HTMLAttributes<HTMLTableCaptionElement> & react.RefAttributes<HTMLTableCaptionElement>>;
+
+/**
+ * Props for TableSearch component
+ */
+interface TableSearchProps {
+    /** Current search value */
+    value: string;
+    /** Callback when search value changes */
+    onChange: (value: string) => void;
+    /** Callback when clear button is clicked */
+    onClear: () => void;
+    /** Placeholder text for search input */
+    placeholder?: string;
+    /** Whether data is currently loading */
+    isLoading?: boolean;
+    /** Ref to the input element */
+    inputRef?: React.RefObject<HTMLInputElement | null>;
+}
+/**
+ * Search input component for tables
+ *
+ * Features:
+ * - Search icon
+ * - Clear button (when value is present)
+ * - Loading spinner (when isLoading is true)
+ * - Accessible with aria-busy attribute
+ *
+ * @example
+ * ```tsx
+ * <TableSearch
+ *   value={searchInput}
+ *   onChange={handleSearchChange}
+ *   onClear={handleClearSearch}
+ *   placeholder="Search users..."
+ *   isLoading={loading}
+ * />
+ * ```
+ */
+declare function TableSearch({ value, onChange, onClear, placeholder, isLoading, inputRef, }: TableSearchProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Props for TableError component
+ */
+interface TableErrorProps {
+    /** Error message to display */
+    message?: string;
+}
+/**
+ * Error state component for tables
+ */
+declare function TableError({ message, }: TableErrorProps): react_jsx_runtime.JSX.Element;
+/**
+ * Loading state component for tables
+ */
+declare function TableLoading(): react_jsx_runtime.JSX.Element;
+/**
+ * Props for TableEmpty component
+ */
+interface TableEmptyProps {
+    /** Custom message to display when no data */
+    message?: string;
+}
+/**
+ * Empty state component for tables
+ */
+declare function TableEmpty({ message }: TableEmptyProps): react_jsx_runtime.JSX.Element;
+
+interface PaginationMeta {
+    total: number;
+    page: number;
+    limit: number;
+    totalPages: number;
+    hasNext: boolean;
+    hasPrev: boolean;
+}
+interface SortInfo {
+    field: string;
+    direction: "asc" | "desc";
+}
+interface FilterInfo {
+    search?: string;
+    filters?: Record<string, unknown>;
+}
+interface TableParams {
+    pagination: {
+        page: number;
+        pageSize: number;
+    };
+    sorting?: SortInfo[];
+    filters?: FilterInfo;
+}
+interface ListResponse<TData> {
+    items: TData[];
+    meta: PaginationMeta;
+}
+interface PaginationConfig {
+    pageSize?: number;
+    pageSizeOptions?: number[];
+    showPageSizeSelector?: boolean;
+    maxVisiblePages?: number;
+}
+interface ActionCallbacks<TData = unknown> {
+    onEdit?: (item: TData) => void;
+    onDelete?: (item: TData) => void;
+    onView?: (item: TData) => void;
+}
+type DataFetcher<TData> = (params: TableParams) => Promise<ListResponse<TData>>;
+
+/**
+ * Props for TablePagination component
+ */
+interface TablePaginationProps {
+    /** Pagination metadata from server */
+    meta: PaginationMeta;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Callback when page size changes */
+    onPageSizeChange: (pageSize: number) => void;
+    /** Pagination configuration */
+    config?: Required<PaginationConfig>;
+    /** Whether data is currently loading */
+    isLoading?: boolean;
+}
+/**
+ * Pagination controls for tables
+ */
+declare function TablePagination({ meta, onPageChange, onPageSizeChange, config, isLoading, }: TablePaginationProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * TableSkeleton Component
+ *
+ * Generic loading skeleton for data tables.
+ * Renders header, body, and footer skeleton bars inside a card.
+ * Unified with EntryTable skeleton pattern for consistency across all tables.
+ */
+
+interface TableSkeletonProps {
+    columns?: number;
+    rowCount?: number;
+    hideWrapper?: boolean;
+    hideFooter?: boolean;
+}
+declare const TableSkeleton: react.FC<TableSkeletonProps>;
+
+/**
+ * Column definition for ResponsiveTable
+ *
+ * Provides type-safe column definitions with proper type narrowing for render functions.
+ *
+ * @template T - The data type of items in the table
+ * @template K - The specific key from T (defaults to any key of T)
+ *
+ * @example
+ * ```tsx
+ * interface User {
+ *   id: string;
+ *   name: string;
+ *   age: number;
+ * }
+ *
+ * // Type-safe column definition with proper inference
+ * const columns: Column<User>[] = [
+ *   {
+ *     key: "name",
+ *     label: "Name",
+ *     // value is inferred as string, not string | number
+ *     render: (value, user) => <strong>{value}</strong>
+ *   },
+ *   {
+ *     key: "age",
+ *     label: "Age",
+ *     // value is inferred as number, not string | number
+ *     render: (value) => `${value} years old`
+ *   }
+ * ];
+ * ```
+ */
+type Column<T, K extends keyof T = keyof T> = {
+    /** Unique key for the column (must match a property in T) */
+    key: K;
+    /** Display label for the column header */
+    label: react.ReactNode;
+    /** Optional custom renderer for cell content with type-safe value */
+    render?: (value: T[K], item: T) => react.ReactNode;
+    /** Hide column on mobile card view (optional, default: false) */
+    hideOnMobile?: boolean;
+    /** Hide the label on mobile card view (optional, default: false) */
+    hideLabelOnMobile?: boolean;
+    /** Optional custom className for the table header cell */
+    headerClassName?: string;
+    /** Optional custom className for the table body cell */
+    cellClassName?: string;
+};
+/**
+ * Props for ResponsiveTable component
+ *
+ * @template T - The data type of items in the table, must have an 'id' property
+ */
+type ResponsiveTableProps<T extends {
+    id: string;
+}> = {
+    /** Array of data items to display */
+    data: T[];
+    /** Array of column definitions */
+    columns: Column<T>[];
+    /** Optional callback when a row/card is clicked */
+    onRowClick?: (item: T) => void;
+    /** Optional custom renderer for mobile card view */
+    renderMobileCard?: (item: T, columns: Column<T>[]) => react.ReactNode;
+    /** Optional custom className for the container */
+    className?: string;
+    /** Optional empty state message */
+    emptyMessage?: string;
+    /** Optional ARIA label for the table (improves screen reader experience) */
+    ariaLabel?: string;
+    /** Optional custom className for the internal desktop table wrapper */
+    tableWrapperClassName?: string;
+    /** Optional footer content rendered inside the table card (e.g. Pagination) */
+    footer?: react.ReactNode;
+};
+/**
+ * Ref type for ResponsiveTable component
+ */
+type ResponsiveTableRef = HTMLDivElement;
+
+declare const ResponsiveTable: <T extends {
+    id: string;
+}>(props: ResponsiveTableProps<T> & {
+    ref?: react.ForwardedRef<HTMLDivElement>;
+}) => react.ReactElement;
+
+interface PortalProviderProps {
+    /** The DOM element to portal overlay content into. Defaults to document.body (Radix default). */
+    container: HTMLElement | null;
+    children: ReactNode;
+}
+declare function PortalProvider({ container, children }: PortalProviderProps): react_jsx_runtime.JSX.Element;
+declare function usePortalContainer(): HTMLElement | undefined;
+
+/**
+ * Utility function to merge class names with Tailwind CSS support.
+ *
+ * Combines clsx for conditional class names with tailwind-merge
+ * to properly handle Tailwind CSS class conflicts.
+ *
+ * @example
+ * ```typescript
+ * cn('px-2 py-1', 'px-4') // => 'py-1 px-4'
+ * cn('text-red-500', condition && 'text-blue-500')
+ * ```
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Tailwind CSS preset for @nextlyhq/ui components.
+ *
+ * Defines the CSS custom property contract that all UI components expect.
+ * Consumers must provide the actual CSS variable values in their stylesheets.
+ *
+ * Usage (Tailwind v3):
+ *   // tailwind.config.ts
+ *   import uiPreset from "@nextlyhq/ui/tailwind-preset";
+ *   export default { presets: [uiPreset], ... };
+ *
+ * Usage (Tailwind v4 with @config):
+ *   Consumers define the equivalent @theme tokens in their CSS.
+ *   This file serves as the reference contract.
+ */
+declare const uiPreset: {
+    theme: {
+        extend: {
+            colors: {
+                border: string;
+                input: string;
+                ring: string;
+                background: string;
+                foreground: string;
+                primary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                secondary: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                destructive: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                success: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                warning: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                muted: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                accent: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                popover: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+                card: {
+                    DEFAULT: string;
+                    foreground: string;
+                };
+            };
+            borderRadius: {
+                lg: string;
+                md: string;
+                sm: string;
+            };
+            keyframes: {
+                "accordion-down": {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+                "accordion-up": {
+                    from: {
+                        height: string;
+                    };
+                    to: {
+                        height: string;
+                    };
+                };
+            };
+            animation: {
+                "accordion-down": string;
+                "accordion-up": string;
+            };
+        };
+    };
+};
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, type ActionCallbacks, Alert, AlertDescription, type AlertDescriptionProps, AlertDialog, AlertDialogAction, type AlertDialogActionProps, AlertDialogCancel, type AlertDialogCancelProps, AlertDialogContent, type AlertDialogContentProps, AlertDialogDescription, type AlertDialogDescriptionProps, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, type AlertDialogOverlayProps, AlertDialogPortal, AlertDialogTitle, type AlertDialogTitleProps, AlertDialogTrigger, type AlertProps, AlertTitle, type AlertTitleProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Button, type ButtonProps, Card, CardAction, type CardActionProps, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, type Column, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, CommandGroup, type CommandGroupProps, CommandInput, type CommandInputProps, CommandItem, type CommandItemProps, CommandList, type CommandListProps, type CommandProps, CommandSeparator, type CommandSeparatorProps, CommandShortcut, type CommandShortcutProps, type DataFetcher, Dialog, DialogClose, DialogContent, type DialogContentProps, DialogDescription, type DialogDescriptionProps, DialogFooter, type DialogFooterProps, DialogHeader, type DialogHeaderProps, DialogOverlay, type DialogOverlayProps, DialogPortal, DialogTitle, type DialogTitleProps, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type FilterInfo, Input, type InputProps, Label, type ListResponse, type PaginationConfig, type PaginationMeta, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, PortalProvider, Progress, type ProgressProps, RadioGroup, RadioGroupItem, ResponsiveTable, type ResponsiveTableProps, type ResponsiveTableRef, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, Sheet, SheetClose, type SheetCloseProps, SheetContent, type SheetContentProps, type SheetContentRef, SheetDescription, type SheetDescriptionProps, type SheetDescriptionRef, SheetFooter, type SheetFooterProps, SheetHeader, type SheetHeaderProps, SheetOverlay, type SheetOverlayProps, type SheetOverlayRef, SheetPortal, type SheetProps, SheetTitle, type SheetTitleProps, type SheetTitleRef, SheetTrigger, type SheetTriggerProps, Skeleton, type SkeletonProps, type SortInfo, Spinner, type SpinnerProps, Switch, Table, TableBody, TableCaption, TableCell, TableEmpty, type TableEmptyProps, TableError, type TableErrorProps, TableFooter, TableHead, TableHeader, TableLoading, TablePagination, type TablePaginationProps, type TableParams, TableRow, TableSearch, type TableSearchProps, TableSkeleton, type TableSkeletonProps, Tabs, TabsContent, type TabsContentProps, TabsList, type TabsListProps, type TabsProps, TabsTrigger, type TabsTriggerProps, Textarea, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, avatarVariants, badgeVariants, buttonVariants, cardVariants, cn, dialogContentVariants, inputVariants, progressVariants, selectTriggerVariants, sheetVariants, spinnerVariants, uiPreset, usePortalContainer };