@me1a/ui 2.2.0 → 2.2.2

package/dist/index.d.ts

@@ -1,30 +1,2619 @@
-export { B as Button, a as ButtonProps, T as Tooltip, d as TooltipContent, e as TooltipProvider, c as TooltipTrigger, b as buttonVariants } from './tooltip-B4jzaurK.js';
-export { Accordion, AccordionContent, AccordionContentProps, AccordionItem, AccordionItemProps, AccordionProps, AccordionTrigger, AccordionTriggerProps, Avatar, AvatarFallback, AvatarFallbackProps, AvatarImage, AvatarImageProps, AvatarProps, Badge, BadgeProps, Box, BoxProps, Breadcrumb, BreadcrumbEllipsis, BreadcrumbEllipsisProps, BreadcrumbItem, BreadcrumbItemProps, BreadcrumbLink, BreadcrumbLinkProps, BreadcrumbList, BreadcrumbListProps, BreadcrumbPage, BreadcrumbPageProps, BreadcrumbProps, BreadcrumbSeparator, BreadcrumbSeparatorProps, CheckboxProps, Collapsible, CollapsibleContent, CollapsibleContentProps, CollapsibleProps, CollapsibleTrigger, CollapsibleTriggerProps, Command, CommandDialog, CommandDialogProps, CommandEmpty, CommandEmptyProps, CommandEmptyRef, CommandGroup, CommandGroupProps, CommandGroupRef, CommandInput, CommandInputProps, CommandInputRef, CommandItem, CommandItemProps, CommandItemRef, CommandList, CommandListProps, CommandListRef, CommandProps, CommandRef, CommandSeparator, CommandSeparatorProps, CommandSeparatorRef, CommandShortcut, CommandShortcutProps, Container, ContainerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, MultiSelect, MultiSelectOption, MultiSelectProps, PageLoader, PageLoaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationLinkProps, PaginationNext, PaginationPrevious, RadioGroupItemProps, RadioGroupProps, ResizableHandle, ResizableHandleProps, ResizablePanel, ResizablePanelGroup, ResizablePanelGroupProps, ResizablePanelProps, Select, SelectOption, SelectProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Skeleton, Stack, StackProps, SwitchProps, Table, TableBody, TableBodyProps, TableCaption, TableCaptionProps, TableCell, TableCellProps, TableFooter, TableFooterProps, TableHead, TableHeadProps, TableHeader, TableHeaderProps, TableProps, TableRow, TableRowProps, TextField, TextFieldProps, Toaster, Typography, TypographyAlign, TypographyProps, TypographyVariant, badgeVariants, typographyVariants } from './atoms.js';
-export { C as Checkbox, I as Input, L as Label, a as LabelProps, R as RadioGroup, b as RadioGroupItem, d as RadioItemContainer, c as RadioItemLabel, S as Switch } from './checkbox-DxgDKaHx.js';
-export { d as Toast, h as ToastAction, a as ToastActionElement, g as ToastClose, f as ToastDescription, T as ToastProps, b as ToastProvider, e as ToastTitle, c as ToastViewport } from './toast-2xT7L1tJ.js';
-export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, NavigationMenu, NavigationMenuContent, NavigationMenuContentProps, NavigationMenuIndicator, NavigationMenuIndicatorProps, NavigationMenuItem, NavigationMenuItemProps, NavigationMenuLink, NavigationMenuLinkProps, NavigationMenuList, NavigationMenuListProps, NavigationMenuProps, NavigationMenuTrigger, NavigationMenuTriggerProps, NavigationMenuViewport, NavigationMenuViewportProps, Tabs, TabsContent, TabsList, TabsTrigger } from './molecules.js';
-export { Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuCheckboxItemProps, DropdownMenuContent, DropdownMenuContentProps, DropdownMenuGroup, DropdownMenuGroupProps, DropdownMenuItem, DropdownMenuItemProps, DropdownMenuLabel, DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuPortalProps, DropdownMenuProps, DropdownMenuRadioGroup, DropdownMenuRadioGroupProps, DropdownMenuRadioItem, DropdownMenuRadioItemProps, DropdownMenuSeparator, DropdownMenuSeparatorProps, DropdownMenuShortcut, DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubContentProps, DropdownMenuSubProps, DropdownMenuSubTrigger, DropdownMenuSubTriggerProps, DropdownMenuTrigger, DropdownMenuTriggerProps, Sidebar, SidebarContent, SidebarContextProps, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupActionProps, SidebarGroupContent, SidebarGroupLabel, SidebarGroupLabelProps, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuActionProps, SidebarMenuBadge, SidebarMenuButton, SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSkeletonProps, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubButtonProps, SidebarMenuSubItem, SidebarProps, SidebarProvider, SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, sidebarMenuButtonVariants, useSidebar } from './organisms.js';
-export { reducer, toast, useIsMobile, useToast } from './hooks.js';
-export { cn } from './utils.js';
-import 'class-variance-authority/types';
-import 'react';
-import 'class-variance-authority';
-import '@radix-ui/react-tooltip';
-import 'react/jsx-runtime';
-import '@radix-ui/react-dialog';
-import '@radix-ui/react-separator';
-import '@radix-ui/react-avatar';
-import 'react-resizable-panels';
-import '@radix-ui/react-switch';
-import '@radix-ui/react-collapsible';
-import 'cmdk';
-import '@radix-ui/react-radio-group';
-import '@radix-ui/react-accordion';
-import '@radix-ui/react-checkbox';
-import '@radix-ui/react-label';
-import '@radix-ui/react-toast';
-import '@radix-ui/react-navigation-menu';
-import '@radix-ui/react-tabs';
-import 'vaul';
-import '@radix-ui/react-dropdown-menu';
-import 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React$1 from 'react';
+import { ComponentProps, ComponentPropsWithoutRef, ElementRef, TextareaHTMLAttributes } from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as DialogPrimitive from '@radix-ui/react-dialog';
+import { DialogProps } from '@radix-ui/react-dialog';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as ToastPrimitives from '@radix-ui/react-toast';
+import * as ResizablePrimitive from 'react-resizable-panels';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+import * as CollapsiblePrimitive from '@radix-ui/react-collapsible';
+import { Command as Command$1 } from 'cmdk';
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as NavigationMenuPrimitive from '@radix-ui/react-navigation-menu';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as vaul from 'vaul';
+import { Drawer as Drawer$1 } from 'vaul';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as react_hook_form from 'react-hook-form';
+import { FieldValues, FieldPath, ControllerProps } from 'react-hook-form';
+import * as _radix_ui_react_slot from '@radix-ui/react-slot';
+import { Slot } from '@radix-ui/react-slot';
+import { ClassValue } from 'clsx';
+
+/**
+ * Props interface for the Button component.
+ * Extends the native button HTML attributes and adds support for variants and asChild prop.
+ * Implements proper accessibility features and follows WCAG 2.1 Level AA guidelines.
+ *
+ * @interface ButtonProps
+ * @extends {React.ButtonHTMLAttributes<HTMLButtonElement>}
+ * @extends {VariantProps<typeof buttonVariants>}
+ *
+ * @property {boolean} [asChild] - When true, renders the button as a child component using Radix UI's Slot.
+ * @property {ButtonVariant} [variant] - The visual style variant of the button.
+ * @property {ButtonSize} [size] - The size variant of the button.
+ * @property {string} [className] - Additional CSS classes to apply to the button.
+ * @property {React.ReactNode} [startIcon] - Icon to display before the button text.
+ * @property {React.ReactNode} [endIcon] - Icon to display after the button text.
+ * @property {boolean} [loading] - Whether the button is in a loading state.
+ * @property {string} [type] - The type of button (button, submit, reset). Defaults to "button".
+ * @property {string} [aria-label] - Accessible label for the button. Falls back to button text if not provided.
+ */
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    asChild?: boolean;
+    startIcon?: React$1.ReactNode;
+    endIcon?: React$1.ReactNode;
+    loading?: boolean;
+    type?: "button" | "submit" | "reset";
+    "aria-label"?: string;
+}
+
+/**
+ * Button variant styles using class-variance-authority.
+ * Defines the visual styles for different button variants and sizes.
+ * Follows WCAG 2.1 Level AA guidelines for accessibility.
+ *
+ * @example
+ * ```tsx
+ * <Button variant="primary" size="lg">Click me</Button>
+ * ```
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * A versatile button component that supports multiple variants, sizes, and can be rendered as a child component.
+ * Built on top of Radix UI's Slot primitive for maximum flexibility.
+ * Implements proper accessibility features and follows WCAG 2.1 Level AA guidelines.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-button--docs
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default button
+ * <Button>Click me</Button>
+ *
+ * // Destructive button with small size
+ * <Button variant="destructive" size="sm">Delete</Button>
+ *
+ * // As a link
+ * <Button variant="link" asChild>
+ *   <a href="/about">About</a>
+ * </Button>
+ *
+ * // With icons
+ * <Button startIcon={<Icon />}>With Start Icon</Button>
+ * <Button endIcon={<Icon />}>With End Icon</Button>
+ *
+ * // Loading state
+ * <Button loading>Loading</Button>
+ * ```
+ *
+ * @param {ButtonProps} props - The component props
+ * @param {React.Ref<HTMLButtonElement>} ref - Forwarded ref
+ * @returns {JSX.Element} A button element
+ */
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+/**
+ * Props interface for the TextField component.
+ * Extends the native input HTML attributes and adds support for variants and icons.
+ *
+ * @interface TextFieldProps
+ * @extends {React.InputHTMLAttributes<HTMLInputElement>}
+ * @extends {VariantProps<typeof textFieldVariants>}
+ *
+ * @property {string} [variant] - The visual style variant of the text field.
+ * @property {string} [size] - The size variant of the text field.
+ * @property {string} [className] - Additional CSS classes to apply to the text field.
+ * @property {React.ReactNode} [startIcon] - Icon to display before the input.
+ * @property {React.ReactNode} [endIcon] - Icon to display after the input.
+ * @property {boolean} [loading] - Whether the text field is in a loading state.
+ * @property {string} [error] - Error message to display below the text field.
+ * @property {string} [label] - Label text for the text field.
+ * @property {string} [helperText] - Helper text to display below the text field.
+ */
+interface TextFieldProps extends Omit<React$1.InputHTMLAttributes<HTMLInputElement>, "size">, VariantProps<typeof textFieldVariants> {
+    startIcon?: React$1.ReactNode;
+    endIcon?: React$1.ReactNode;
+    loading?: boolean;
+    error?: string;
+    label?: string;
+    helperText?: string;
+}
+
+/**
+ * Text field variant styles using class-variance-authority.
+ * Defines the visual styles for different text field variants and sizes.
+ */
+declare const textFieldVariants: (props?: ({
+    variant?: "default" | "error" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * A versatile text field component that supports multiple variants, sizes, and icons.
+ * Built on top of shadcn/ui's Input component.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-text-field--docs
+ *
+ * @component
+ * @example
+ * ```tsx
+ * // Default text field
+ * <TextField placeholder="Enter text" />
+ *
+ * // With icons
+ * <TextField startIcon={<SearchIcon />} placeholder="Search..." />
+ * <TextField endIcon={<CalendarIcon />} placeholder="Select date" />
+ *
+ * // With loading state
+ * <TextField loading placeholder="Loading..." />
+ *
+ * // With error
+ * <TextField error="Invalid input" placeholder="Enter text" />
+ * ```
+ */
+declare const TextField: React$1.ForwardRefExoticComponent<TextFieldProps & React$1.RefAttributes<HTMLInputElement>>;
+
+interface ContainerProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The maximum width of the container.
+     * - "sm": 640px
+     * - "md": 768px
+     * - "lg": 1024px
+     * - "xl": 1280px
+     * - "full": 100%
+     * - false: No max-width (fluid)
+     *
+     * @default "lg"
+     */
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "full" | false;
+    /**
+     * Whether to disable the default horizontal padding.
+     * When true, removes the default padding (px-4 sm:px-6 lg:px-8).
+     *
+     * @default false
+     */
+    disablePadding?: boolean;
+    /**
+     * Whether to make the container fluid (no max-width).
+     * When true, the container will expand to fill its parent's width.
+     *
+     * @default false
+     */
+    fluid?: boolean;
+}
+declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Box is a fundamental layout component that serves as a building block for other components.
+ * It's a polymorphic component that can render as different HTML elements while maintaining
+ * consistent styling and behavior.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-box--docs
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Box>Content</Box>
+ *
+ * // As a different element
+ * <Box as="section">Section content</Box>
+ *
+ * // With custom className
+ * <Box className="bg-primary text-white p-4">Styled content</Box>
+ *
+ * // With custom dimensions
+ * <Box width="100px" height="200px">Fixed size content</Box>
+ * <Box width="50%" height="auto">Responsive content</Box>
+ * ```
+ */
+
+type BoxComponent = "div" | "span" | "section" | "article" | "main" | "aside" | "header" | "footer" | "nav";
+type DimensionValue = string | number;
+interface BoxProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The HTML element to render the Box as.
+     * This allows for semantic HTML while maintaining consistent styling.
+     *
+     * @default "div"
+     */
+    as?: BoxComponent;
+    /**
+     * The width of the Box component.
+     * Can be a number (interpreted as pixels) or a string (e.g., "100%", "50px", "10rem").
+     */
+    width?: DimensionValue;
+    /**
+     * The height of the Box component.
+     * Can be a number (interpreted as pixels) or a string (e.g., "100%", "50px", "10rem").
+     */
+    height?: DimensionValue;
+}
+declare const Box: React$1.ForwardRefExoticComponent<BoxProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Stack is a layout component that arranges its children in a vertical or horizontal stack
+ * with consistent spacing between items. It's built on top of Flexbox and provides
+ * a simple way to create consistent layouts.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-stack--docs
+ *
+ * @example
+ * ```tsx
+ * // Basic vertical stack
+ * <Stack>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Stack>
+ *
+ * // Horizontal stack with custom spacing
+ * <Stack direction="horizontal" spacing="lg">
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ * </Stack>
+ *
+ * // Centered stack with wrapping
+ * <Stack direction="horizontal" center wrap>
+ *   <div>Item 1</div>
+ *   <div>Item 2</div>
+ *   <div>Item 3</div>
+ * </Stack>
+ *
+ * // Stack with custom alignment
+ * <Stack align="center" justify="between">
+ *   <div>Left</div>
+ *   <div>Center</div>
+ *   <div>Right</div>
+ * </Stack>
+ *
+ * // Stack with custom dimensions
+ * <Stack width="100%" height="200px">
+ *   <div>Full width, fixed height stack</div>
+ * </Stack>
+ * ```
+ */
+
+interface StackProps extends React$1.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The direction in which to stack the items.
+     * - "vertical": Items are stacked top to bottom
+     * - "horizontal": Items are stacked left to right
+     *
+     * @default "vertical"
+     */
+    direction?: "vertical" | "horizontal";
+    /**
+     * The spacing between items in the stack.
+     * - "none": 0px
+     * - "xs": 0.25rem (4px)
+     * - "sm": 0.5rem (8px)
+     * - "md": 1rem (16px)
+     * - "lg": 1.5rem (24px)
+     * - "xl": 2rem (32px)
+     *
+     * @default "md"
+     */
+    spacing?: "none" | "xs" | "sm" | "md" | "lg" | "xl";
+    /**
+     * Whether to allow items to wrap to the next line when they don't fit.
+     * Only applies to horizontal stacks.
+     *
+     * @default false
+     */
+    wrap?: boolean;
+    /**
+     * Whether to center items both horizontally and vertically.
+     * This is a shorthand for setting both align and justify to "center".
+     *
+     * @default false
+     */
+    center?: boolean;
+    /**
+     * How to justify items along the main axis.
+     * - "start": Items are packed toward the start
+     * - "end": Items are packed toward the end
+     * - "center": Items are centered
+     * - "between": Items are evenly distributed with first item at start and last at end
+     * - "around": Items are evenly distributed with equal space around them
+     * - "evenly": Items are distributed so that the spacing between any two items is equal
+     *
+     * @default undefined
+     */
+    justify?: "start" | "end" | "center" | "between" | "around" | "evenly";
+    /**
+     * How to align items along the cross axis.
+     * - "start": Items are aligned at the start
+     * - "end": Items are aligned at the end
+     * - "center": Items are centered
+     * - "stretch": Items are stretched to fill the container
+     * - "baseline": Items are aligned at their baselines
+     *
+     * @default undefined
+     */
+    align?: "start" | "end" | "center" | "stretch" | "baseline";
+    /**
+     * The width of the stack container.
+     * Can be any valid CSS width value (e.g., "100%", "200px", "50vw").
+     *
+     * @default undefined
+     */
+    width?: string;
+    /**
+     * The height of the stack container.
+     * Can be any valid CSS height value (e.g., "100%", "200px", "50vh").
+     *
+     * @default undefined
+     */
+    height?: string;
+}
+declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Dialog component for creating accessible dialogs with overlay and content.
+ * Built on top of Radix UI's Dialog primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-dialog--docs
+ *
+ * @example
+ * ```tsx
+ * <Dialog>
+ *   <DialogTrigger>Open Dialog</DialogTrigger>
+ *   <DialogContent>Dialog Content</DialogContent>
+ * </Dialog>
+ */
+declare const Dialog: React$1.FC<DialogPrimitive.DialogProps>;
+declare const DialogTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
+declare const DialogClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DialogOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogContent: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DialogHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const DialogTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const DialogDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * Input component for creating accessible input fields.
+ * Built on top of shadcn/ui's Input component.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-input--docs
+ *
+ */
+declare const Input: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+
+/**
+ * Separator component for creating horizontal or vertical dividers.
+ * Built on top of Radix UI's Separator primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-separator--docs
+ *
+ */
+declare const Separator: React$1.ForwardRefExoticComponent<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Sheet component for creating accessible sheets with overlay and content.
+ * Built on top of Radix UI's Sheet primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-sheet--docs
+ *
+ * @example
+ * ```tsx
+ * <Sheet>
+ *   <SheetTrigger>Open Sheet</SheetTrigger>
+ *   <SheetContent>Sheet Content</SheetContent>
+ * </Sheet>
+ */
+declare const Sheet: React$1.FC<DialogPrimitive.DialogProps>;
+declare const SheetTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SheetClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SheetPortal: React$1.FC<DialogPrimitive.DialogPortalProps>;
+declare const SheetOverlay: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const sheetVariants: (props?: ({
+    side?: "left" | "right" | "bottom" | "top" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface SheetContentProps extends React$1.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+}
+declare const SheetContent: React$1.ForwardRefExoticComponent<SheetContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const SheetHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const SheetFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const SheetTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const SheetDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * Skeleton component for creating a loading state.
+ * Built on top of shadcn/ui's Skeleton component.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-skeleton--docs
+ *
+ * @example
+ * ```tsx
+ * <Skeleton className="w-10 h-10" />
+ * ```
+ */
+declare function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+
+/**
+ * Avatar component that displays a user's profile picture or fallback.
+ * Built on top of Radix UI's Avatar primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-avatar--docs
+ *
+ * @example
+ * ```tsx
+ * <Avatar>
+ *   <AvatarImage src="/path/to/image.jpg" alt="User avatar" />
+ *   <AvatarFallback>JD</AvatarFallback>
+ * </Avatar>
+ * ```
+ */
+declare const Avatar: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+/**
+ * AvatarImage component that displays the user's profile picture.
+ * Falls back to AvatarFallback if the image fails to load.
+ */
+declare const AvatarImage: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React$1.RefAttributes<HTMLImageElement>, "ref"> & React$1.RefAttributes<HTMLImageElement>>;
+/**
+ * AvatarFallback component that displays when the image fails to load.
+ * Typically shows the user's initials or a placeholder icon.
+ */
+declare const AvatarFallback: React$1.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React$1.RefAttributes<HTMLSpanElement>, "ref"> & React$1.RefAttributes<HTMLSpanElement>>;
+
+type AvatarProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>;
+type AvatarImageProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>;
+type AvatarFallbackProps = React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>;
+
+/**
+ * TooltipProvider component for creating accessible tooltips.
+ * Built on top of Radix UI's Tooltip primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-tooltip--docs
+ *
+ * @example
+ * ```tsx
+ * <TooltipProvider>
+ *   <Tooltip>
+ *     <TooltipTrigger>Hover me</TooltipTrigger>
+ *     <TooltipContent>Tooltip content</TooltipContent>
+ *   </Tooltip>
+ * </TooltipProvider>
+ * ```
+ */
+declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
+declare const Tooltip: React$1.FC<TooltipPrimitive.TooltipProps>;
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "success" | "warning" | "info" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+    /**
+     * The content to display inside the badge
+     */
+    children: React.ReactNode;
+    /**
+     * Optional icon to display before the badge content
+     */
+    icon?: React.ReactNode;
+    /**
+     * Optional icon to display after the badge content
+     */
+    iconAfter?: React.ReactNode;
+}
+
+/**
+ * Badge component for displaying status, counts, or labels.
+ * Supports various variants, sizes, and optional icons.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-badge--docs
+ *
+ * @example
+ * ```tsx
+ * <Badge variant="success">Active</Badge>
+ * <Badge variant="warning" icon={<AlertIcon />}>Warning</Badge>
+ * <Badge variant="info" size="lg" iconAfter={<ArrowIcon />}>New</Badge>
+ * ```
+ */
+declare const Badge: React$1.ForwardRefExoticComponent<BadgeProps & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const typographyVariants: (props?: ({
+    variant?: "list" | "small" | "blockquote" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "p" | "muted" | "large" | "lead" | null | undefined;
+    align?: "center" | "left" | "right" | "justify" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface TypographyProps extends React$1.HTMLAttributes<HTMLElement>, VariantProps<typeof typographyVariants> {
+    as?: React$1.ElementType;
+}
+/**
+ * Typography component for creating accessible text elements.
+ * Built on top of shadcn/ui's Typography component.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-typography--docs
+ *
+ */
+declare const Typography: React$1.ForwardRefExoticComponent<TypographyProps & React$1.RefAttributes<HTMLElement>>;
+
+type TypographyVariant = NonNullable<VariantProps<typeof typographyVariants>["variant"]>;
+type TypographyAlign = NonNullable<VariantProps<typeof typographyVariants>["align"]>;
+
+interface PageLoaderProps {
+    /**
+     * Optional className to extend the component's styles
+     */
+    className?: string;
+    /**
+     * Optional size of the loader (default: "default")
+     */
+    size?: "sm" | "default" | "lg";
+    /**
+     * Optional text to display below the loader
+     */
+    text?: string;
+    /**
+     * Optional color of the loader (default: "primary")
+     */
+    color?: "primary" | "secondary" | "accent" | "muted" | "destructive" | string;
+}
+/**
+ * PageLoader component for displaying a loading indicator.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-page-loader--docs
+ *
+ */
+declare function PageLoader({ className, size, text, color }: PageLoaderProps): react_jsx_runtime.JSX.Element;
+
+declare const labelVariants: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+interface LabelProps extends React$1.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>, VariantProps<typeof labelVariants> {
+}
+/**
+ * Label component for creating accessible labels.
+ * Built on top of Radix UI's Label primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-label--docs
+ *
+ */
+declare const Label: React$1.ForwardRefExoticComponent<LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
+
+declare const ToastProvider: React$1.FC<ToastPrimitives.ToastProviderProps>;
+declare const ToastViewport: React$1.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastViewportProps & React$1.RefAttributes<HTMLOListElement>, "ref"> & React$1.RefAttributes<HTMLOListElement>>;
+declare const Toast$1: React$1.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastProps & React$1.RefAttributes<HTMLLIElement>, "ref"> & VariantProps<(props?: ({
+    variant?: "default" | "destructive" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React$1.RefAttributes<HTMLLIElement>>;
+declare const ToastAction: React$1.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastActionProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const ToastClose: React$1.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastCloseProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const ToastTitle: React$1.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastTitleProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const ToastDescription: React$1.ForwardRefExoticComponent<Omit<ToastPrimitives.ToastDescriptionProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+type ToastProps = React$1.ComponentPropsWithoutRef<typeof Toast$1>;
+type ToastActionElement = React$1.ReactElement<typeof ToastAction>;
+
+/**
+ * Toaster component for managing and displaying toast notifications.
+ * Built on top of the Toast primitive components.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-toaster--docs
+ *
+ * @example
+ * ```tsx
+ * // Add Toaster to your app's root layout
+ * <Toaster />
+ *
+ * // Use the toast hook to show notifications
+ * const { toast } = useToast()
+ *
+ * toast({
+ *   title: "Success",
+ *   description: "Your changes have been saved.",
+ *   action: <ToastAction altText="Undo">Undo</ToastAction>
+ * })
+ * ```
+ */
+declare function Toaster(): react_jsx_runtime.JSX.Element;
+
+interface TableProps extends React$1.HTMLAttributes<HTMLTableElement> {
+}
+interface TableHeaderProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
+}
+interface TableBodyProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
+}
+interface TableFooterProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
+}
+interface TableRowProps extends React$1.HTMLAttributes<HTMLTableRowElement> {
+}
+interface TableHeadProps extends React$1.ThHTMLAttributes<HTMLTableCellElement> {
+}
+interface TableCellProps extends React$1.TdHTMLAttributes<HTMLTableCellElement> {
+}
+interface TableCaptionProps extends React$1.HTMLAttributes<HTMLTableCaptionElement> {
+}
+
+/**
+ * Table component that provides a structured way to display data in rows and columns.
+ * Built on top of native HTML table elements with enhanced styling and accessibility.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-table--docs
+ *
+ * @example
+ * ```tsx
+ * <Table>
+ *   <TableHeader>
+ *     <TableRow>
+ *       <TableHead>Name</TableHead>
+ *       <TableHead>Email</TableHead>
+ *     </TableRow>
+ *   </TableHeader>
+ *   <TableBody>
+ *     <TableRow>
+ *       <TableCell>John Doe</TableCell>
+ *       <TableCell>john@example.com</TableCell>
+ *     </TableRow>
+ *   </TableBody>
+ * </Table>
+ * ```
+ */
+declare const Table: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<HTMLTableElement>>;
+declare const TableHeader: React$1.ForwardRefExoticComponent<TableHeaderProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableBody: React$1.ForwardRefExoticComponent<TableBodyProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableFooter: React$1.ForwardRefExoticComponent<TableFooterProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+declare const TableRow: React$1.ForwardRefExoticComponent<TableRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
+declare const TableHead: React$1.ForwardRefExoticComponent<TableHeadProps & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const TableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
+declare const TableCaption: React$1.ForwardRefExoticComponent<TableCaptionProps & React$1.RefAttributes<HTMLTableCaptionElement>>;
+
+/**
+ * Resizable component that provides resizable panel functionality.
+ * Built on top of react-resizable-panels.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-resizable--docs
+ *
+ * @example
+ * ```tsx
+ * <ResizablePanelGroup>
+ *   <ResizablePanel defaultSize={20}>
+ *     <div>Left Panel</div>
+ *   </ResizablePanel>
+ *   <ResizableHandle withHandle />
+ *   <ResizablePanel defaultSize={80}>
+ *     <div>Right Panel</div>
+ *   </ResizablePanel>
+ * </ResizablePanelGroup>
+ * ```
+ */
+declare const ResizablePanelGroup: ({ className, ...props }: ComponentProps<typeof ResizablePrimitive.PanelGroup>) => react_jsx_runtime.JSX.Element;
+declare const ResizablePanel: React$1.ForwardRefExoticComponent<Omit<React$1.HTMLAttributes<HTMLButtonElement | HTMLElement | HTMLSpanElement | HTMLInputElement | HTMLLabelElement | HTMLObjectElement | HTMLLinkElement | HTMLFormElement | HTMLSlotElement | HTMLStyleElement | HTMLTitleElement | HTMLDialogElement | HTMLImageElement | HTMLOptionElement | HTMLTableElement | HTMLAnchorElement | HTMLAreaElement | HTMLAudioElement | HTMLBaseElement | HTMLQuoteElement | HTMLBodyElement | HTMLBRElement | HTMLCanvasElement | HTMLTableColElement | HTMLDataElement | HTMLDataListElement | HTMLModElement | HTMLDetailsElement | HTMLDivElement | HTMLDListElement | HTMLEmbedElement | HTMLFieldSetElement | HTMLHeadingElement | HTMLHeadElement | HTMLHRElement | HTMLHtmlElement | HTMLIFrameElement | HTMLLegendElement | HTMLLIElement | HTMLMapElement | HTMLMetaElement | HTMLMeterElement | HTMLOListElement | HTMLOptGroupElement | HTMLOutputElement | HTMLParagraphElement | HTMLPreElement | HTMLProgressElement | HTMLScriptElement | HTMLSelectElement | HTMLSourceElement | HTMLTemplateElement | HTMLTableSectionElement | HTMLTableCellElement | HTMLTextAreaElement | HTMLTimeElement | HTMLTableRowElement | HTMLTrackElement | HTMLUListElement | HTMLVideoElement | HTMLTableCaptionElement | HTMLMenuElement | HTMLPictureElement>, "id" | "onResize"> & {
+    className?: string;
+    collapsedSize?: number | undefined;
+    collapsible?: boolean | undefined;
+    defaultSize?: number | undefined;
+    id?: string;
+    maxSize?: number | undefined;
+    minSize?: number | undefined;
+    onCollapse?: ResizablePrimitive.PanelOnCollapse;
+    onExpand?: ResizablePrimitive.PanelOnExpand;
+    onResize?: ResizablePrimitive.PanelOnResize;
+    order?: number;
+    style?: object;
+    tagName?: keyof HTMLElementTagNameMap | undefined;
+} & {
+    children?: React$1.ReactNode | undefined;
+} & React$1.RefAttributes<ResizablePrimitive.ImperativePanelHandle>>;
+declare const ResizableHandle: ({ withHandle, className, ...props }: ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+    withHandle?: boolean;
+}) => react_jsx_runtime.JSX.Element;
+
+type ResizablePanelGroupProps = ComponentProps<typeof ResizablePrimitive.PanelGroup>;
+type ResizablePanelProps = ComponentProps<typeof ResizablePrimitive.Panel>;
+type ResizableHandleProps = ComponentProps<typeof ResizablePrimitive.PanelResizeHandle> & {
+    withHandle?: boolean;
+};
+
+type SelectOption = {
+    id: string;
+    label: string;
+    startIcon?: React$1.ReactNode;
+    endIcon?: React$1.ReactNode;
+    className?: string;
+    disabled?: boolean;
+};
+type SelectProps = {
+    /** Whether the select is searchable */
+    searchable?: boolean;
+    /** Whether the select should take up the full width of its container */
+    fullWidth?: boolean;
+    /** Currently selected value */
+    value: string;
+    /** Array of options to display in the select */
+    options: SelectOption[];
+    /** Callback fired when the value changes */
+    onChange: (value: string) => void;
+    /** Render a custom CommandList for the select, if not provided, the select will render a default CommandList with the options */
+    renderCommandList?: (options: SelectOption[]) => React$1.ReactNode;
+    /** Placeholder text to show when no value is selected */
+    placeholder?: string;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether the select is required */
+    required?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Additional class name for the select */
+    className?: string;
+    /** ID for the select element */
+    id?: string;
+};
+/**
+ * SearchableSelect component that provides a searchable dropdown select input.
+ * Built on top of Radix UI's Select primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs-atoms-select--docs
+ *
+ * @example
+ * ```tsx
+ * <Select
+ *   options={[
+ *     { id: "1", label: "Option 1" },
+ *     { id: "2", label: "Option 2" }
+ *   ]}
+ *   value="1"
+ *   onChange={setValue}
+ *   required
+ * />
+ * ```
+ */
+declare function Select({ options, value, onChange, placeholder, disabled, required, error, className, fullWidth, searchable, id, renderCommandList }: SelectProps): react_jsx_runtime.JSX.Element;
+
+type MultiSelectOption = {
+    id: string;
+    label: string;
+    startIcon?: React$1.ReactNode;
+    endIcon?: React$1.ReactNode;
+    className?: string;
+    disabled?: boolean;
+};
+type MultiSelectProps = {
+    /** Whether the select is searchable */
+    searchable?: boolean;
+    /** Whether the select should take up the full width of its container */
+    fullWidth?: boolean;
+    /** Array of options to display in the select */
+    options: MultiSelectOption[];
+    /** Currently selected values */
+    value: string[];
+    /** Callback fired when the values change */
+    onChange: (value: string[]) => void;
+    /** Render a custom CommandList for the select, if not provided, the select will render a default CommandList with the options */
+    renderCommandList?: (options: MultiSelectOption[]) => React$1.ReactNode;
+    /** Placeholder text to show when no value is selected */
+    placeholder?: string;
+    /** Whether the select is disabled */
+    disabled?: boolean;
+    /** Whether the select is required */
+    required?: boolean;
+    /** Error message to display */
+    error?: string;
+    /** Additional class name for the select */
+    className?: string;
+    /** ID for the select element */
+    id?: string;
+    /** Maximum number of selections allowed */
+    maxSelections?: number;
+    /** Whether to show the select all option */
+    showSelectAll?: boolean;
+};
+/**
+ * MultiSelect component that provides a searchable dropdown select input with multiple selection.
+ * Built on top of Radix UI's Select primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs-atoms-multiselect--docs
+ *
+ * @example
+ * ```tsx
+ * <MultiSelect
+ *   options={[
+ *     { id: "1", label: "Option 1" },
+ *     { id: "2", label: "Option 2" }
+ *   ]}
+ *   value={["1"]}
+ *   onChange={setValue}
+ *   showSelectAll
+ * />
+ * ```
+ */
+declare function MultiSelect({ options, value, onChange, placeholder, disabled, required, error, className, fullWidth, searchable, id, maxSelections, showSelectAll, renderCommandList }: MultiSelectProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Switch component that provides a toggle input control.
+ * Built on top of Radix UI's Switch primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-switch--docs
+ *
+ * @example
+ * ```tsx
+ * <Switch />
+ * <Switch defaultChecked />
+ * <Switch disabled />
+ * ```
+ */
+declare const Switch: React$1.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+type SwitchProps = React$1.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>;
+
+/**
+ * Collapsible component that allows content to be expanded and collapsed.
+ * Built on top of Radix UI's Collapsible primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-collapsible--docs
+ *
+ * @example
+ * ```tsx
+ * <Collapsible>
+ *   <CollapsibleTrigger>Toggle</CollapsibleTrigger>
+ *   <CollapsibleContent>Content</CollapsibleContent>
+ * </Collapsible>
+ * ```
+ */
+declare const Collapsible: React$1.ForwardRefExoticComponent<CollapsiblePrimitive.CollapsibleProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const CollapsibleTrigger: React$1.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const CollapsibleContent: React$1.ForwardRefExoticComponent<Omit<CollapsiblePrimitive.CollapsibleContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+type CollapsibleProps = React$1.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Root>;
+type CollapsibleTriggerProps = React$1.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Trigger>;
+type CollapsibleContentProps = React$1.ComponentPropsWithoutRef<typeof CollapsiblePrimitive.Content>;
+
+type CommandProps = ComponentPropsWithoutRef<typeof Command$1>;
+type CommandRef = ElementRef<typeof Command$1>;
+type CommandDialogProps = DialogProps;
+type CommandInputProps = ComponentPropsWithoutRef<typeof Command$1.Input>;
+type CommandInputRef = ElementRef<typeof Command$1.Input>;
+type CommandListProps = ComponentPropsWithoutRef<typeof Command$1.List>;
+type CommandListRef = ElementRef<typeof Command$1.List>;
+type CommandEmptyProps = ComponentPropsWithoutRef<typeof Command$1.Empty>;
+type CommandEmptyRef = ElementRef<typeof Command$1.Empty>;
+type CommandGroupProps = ComponentPropsWithoutRef<typeof Command$1.Group>;
+type CommandGroupRef = ElementRef<typeof Command$1.Group>;
+type CommandSeparatorProps = ComponentPropsWithoutRef<typeof Command$1.Separator>;
+type CommandSeparatorRef = ElementRef<typeof Command$1.Separator>;
+type CommandItemProps = ComponentPropsWithoutRef<typeof Command$1.Item>;
+type CommandItemRef = ElementRef<typeof Command$1.Item>;
+type CommandShortcutProps = React$1.HTMLAttributes<HTMLSpanElement>;
+
+/**
+ * Command component that provides a command palette interface.
+ * Built on top of cmdk and Radix UI's Dialog primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-command--docs
+ *
+ * @example
+ * ```tsx
+ * <Command>
+ *   <CommandInput placeholder="Search..." />
+ *   <CommandList>
+ *     <CommandEmpty>No results found.</CommandEmpty>
+ *     <CommandGroup heading="Suggestions">
+ *       <CommandItem>Calendar</CommandItem>
+ *       <CommandItem>Search</CommandItem>
+ *     </CommandGroup>
+ *   </CommandList>
+ * </Command>
+ * ```
+ */
+declare const Command: React$1.ForwardRefExoticComponent<Omit<{
+    children?: React$1.ReactNode;
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.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$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CommandDialog: ({ children, ...props }: CommandDialogProps) => react_jsx_runtime.JSX.Element;
+declare const CommandInput: React$1.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof React$1.InputHTMLAttributes<HTMLInputElement>> & {
+    ref?: React$1.Ref<HTMLInputElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+    value?: string;
+    onValueChange?: (search: string) => void;
+} & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const CommandList: React$1.ForwardRefExoticComponent<Omit<{
+    children?: React$1.ReactNode;
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    label?: string;
+} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CommandEmpty: React$1.ForwardRefExoticComponent<Omit<{
+    children?: React$1.ReactNode;
+} & Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CommandGroup: React$1.ForwardRefExoticComponent<Omit<{
+    children?: React$1.ReactNode;
+} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "value" | "heading"> & {
+    heading?: React$1.ReactNode;
+    value?: string;
+    forceMount?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CommandSeparator: React$1.ForwardRefExoticComponent<Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    alwaysRender?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CommandItem: React$1.ForwardRefExoticComponent<Omit<{
+    children?: React$1.ReactNode;
+} & Omit<Pick<Pick<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof React$1.HTMLAttributes<HTMLDivElement>> & {
+    ref?: React$1.Ref<HTMLDivElement>;
+} & {
+    asChild?: boolean;
+}, "asChild" | "key" | keyof React$1.HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+    disabled?: boolean;
+    onSelect?: (value: string) => void;
+    value?: string;
+    keywords?: string[];
+    forceMount?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const CommandShortcut: {
+    ({ className, ...props }: CommandShortcutProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Pagination component that provides navigation controls for paginated content.
+ * Built on top of shadcn/ui's button component.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-pagination--docs
+ *
+ * @example
+ * ```tsx
+ * <Pagination>
+ *   <PaginationContent>
+ *     <PaginationItem>
+ *       <PaginationPrevious href="#" />
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationLink href="#" isActive>1</PaginationLink>
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationEllipsis />
+ *     </PaginationItem>
+ *     <PaginationItem>
+ *       <PaginationNext href="#" />
+ *     </PaginationItem>
+ *   </PaginationContent>
+ * </Pagination>
+ * ```
+ */
+declare const Pagination: {
+    ({ className, ...props }: React$1.ComponentProps<"nav">): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const PaginationContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
+declare const PaginationItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
+type PaginationLinkProps$1 = {
+    isActive?: boolean;
+} & Pick<ButtonProps, "size"> & React$1.ComponentProps<"a">;
+declare const PaginationLink: {
+    ({ className, isActive, size, children, ...props }: PaginationLinkProps$1): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const PaginationPrevious: {
+    ({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const PaginationNext: {
+    ({ className, ...props }: React$1.ComponentProps<typeof PaginationLink>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const PaginationEllipsis: {
+    ({ className, ...props }: React$1.ComponentProps<"span">): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+type PaginationLinkProps = {
+    isActive?: boolean;
+} & Pick<ButtonProps, "size"> & React$1.ComponentProps<"a">;
+
+/**
+ * RadioGroup component that allows users to select a single option from a list.
+ * Built on top of Radix UI's RadioGroup primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-radio-group--docs
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup defaultValue="option-1">
+ *   <RadioGroupItem value="option-1">Option 1</RadioGroupItem>
+ *   <RadioGroupItem value="option-2">Option 2</RadioGroupItem>
+ * </RadioGroup>
+ * ```
+ */
+declare const RadioGroup: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * RadioGroupItem component that represents a single option in a RadioGroup.
+ * Built on top of Radix UI's RadioGroupItem primitive.
+ *
+ * @example
+ * ```tsx
+ * <RadioGroupItem value="option-1">Option 1</RadioGroupItem>
+ * ```
+ */
+declare const RadioGroupItem: React$1.ForwardRefExoticComponent<Omit<RadioGroupPrimitive.RadioGroupItemProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * RadioItemContainer component that provides a container for radio group items with proper spacing and layout.
+ *
+ * @example
+ * ```tsx
+ * <RadioItemContainer>
+ *   <RadioGroupItem value="option-1">Option 1</RadioGroupItem>
+ *   <RadioGroupItem value="option-2">Option 2</RadioGroupItem>
+ * </RadioItemContainer>
+ * ```
+ */
+declare const RadioItemContainer: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * RadioItemLabel component that provides a label for individual radio items.
+ * Built on top of the Label component.
+ *
+ * @example
+ * ```tsx
+ * <RadioItemLabel>Select an option</RadioItemLabel>
+ * ```
+ */
+declare const RadioItemLabel: React$1.ForwardRefExoticComponent<Omit<LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
+
+type RadioGroupProps = React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>;
+type RadioGroupItemProps = React$1.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>;
+
+/**
+ * Props for a single-item accordion
+ */
+type AccordionSingleProps = React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    /** The type of accordion - must be "single" for this variant */
+    type: "single";
+    /** The default value of the accordion item */
+    defaultValue?: string;
+    /** The controlled value of the accordion item */
+    value?: string;
+    /** Callback fired when the value changes */
+    onValueChange?: (_value: string) => void;
+    /** Whether the accordion item can be collapsed */
+    collapsible?: boolean;
+};
+/**
+ * Props for a multiple-item accordion
+ */
+type AccordionMultipleProps = React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+    /** The type of accordion - must be "multiple" for this variant */
+    type: "multiple";
+    /** The default values of the accordion items */
+    defaultValue?: string[];
+    /** The controlled values of the accordion items */
+    value?: string[];
+    /** Callback fired when the values change */
+    onValueChange?: (_value: string[]) => void;
+};
+/**
+ * Props for the Accordion component
+ */
+type AccordionProps = AccordionSingleProps | AccordionMultipleProps;
+/**
+ * Props for an individual accordion item
+ */
+interface AccordionItemProps extends React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item> {
+    /** The value of the accordion item */
+    value: string;
+}
+/**
+ * Props for the accordion trigger button
+ */
+interface AccordionTriggerProps extends React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger> {
+    /** The content of the accordion trigger */
+    children: React$1.ReactNode;
+}
+/**
+ * Props for the accordion content panel
+ */
+interface AccordionContentProps extends React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content> {
+    /** The content of the accordion panel */
+    children: React$1.ReactNode;
+}
+
+/**
+ * Accordion component that displays a list of expandable/collapsible sections.
+ * Built on top of Radix UI's Accordion primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-accordion--docs
+ *
+ * @example
+ * ```tsx
+ * <Accordion type="single" collapsible>
+ *   <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>
+ * ```
+ */
+declare const Accordion: React$1.ForwardRefExoticComponent<((Omit<AccordionPrimitive.AccordionSingleProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    type: "single";
+    defaultValue?: string;
+    value?: string;
+    onValueChange?: (_value: string) => void;
+    collapsible?: boolean;
+}) | (Omit<AccordionPrimitive.AccordionMultipleProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    type: "multiple";
+    defaultValue?: string[];
+    value?: string[];
+    onValueChange?: (_value: string[]) => void;
+})) & React$1.RefAttributes<HTMLDivElement>>;
+declare const AccordionItem: React$1.ForwardRefExoticComponent<AccordionItemProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const AccordionTrigger: React$1.ForwardRefExoticComponent<AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const AccordionContent: React$1.ForwardRefExoticComponent<AccordionContentProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Checkbox component built on top of Radix UI's Checkbox primitive.
+ * Provides a customizable checkbox input with proper accessibility and keyboard navigation.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-checkbox--docs
+ *
+ * @example
+ * ```tsx
+ * <Checkbox id="terms" name="terms" />
+ * <label htmlFor="terms">Accept terms and conditions</label>
+ * ```
+ */
+
+declare const Checkbox: React$1.ForwardRefExoticComponent<Omit<CheckboxPrimitive.CheckboxProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+type CheckboxProps = React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>;
+
+interface BreadcrumbProps extends React$1.ComponentPropsWithoutRef<"nav"> {
+    separator?: React$1.ReactNode;
+}
+interface BreadcrumbListProps extends React$1.ComponentPropsWithoutRef<"ol"> {
+}
+interface BreadcrumbItemProps extends React$1.ComponentPropsWithoutRef<"li"> {
+}
+interface BreadcrumbLinkProps extends React$1.ComponentPropsWithoutRef<"a"> {
+    asChild?: boolean;
+}
+interface BreadcrumbPageProps extends React$1.ComponentPropsWithoutRef<"span"> {
+}
+interface BreadcrumbSeparatorProps extends React$1.ComponentProps<"li"> {
+}
+interface BreadcrumbEllipsisProps extends React$1.ComponentProps<"span"> {
+}
+
+declare const Breadcrumb: React$1.ForwardRefExoticComponent<BreadcrumbProps & React$1.RefAttributes<HTMLElement>>;
+declare const BreadcrumbList: React$1.ForwardRefExoticComponent<BreadcrumbListProps & React$1.RefAttributes<HTMLOListElement>>;
+declare const BreadcrumbItem: React$1.ForwardRefExoticComponent<BreadcrumbItemProps & React$1.RefAttributes<HTMLLIElement>>;
+declare const BreadcrumbLink: React$1.ForwardRefExoticComponent<BreadcrumbLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+declare const BreadcrumbPage: React$1.ForwardRefExoticComponent<BreadcrumbPageProps & React$1.RefAttributes<HTMLSpanElement>>;
+declare const BreadcrumbSeparator: {
+    ({ children, className, ...props }: BreadcrumbSeparatorProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const BreadcrumbEllipsis: {
+    ({ className, ...props }: BreadcrumbEllipsisProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+/**
+ * Card is a flexible container component that can be used to group related content and actions.
+ * It provides a consistent visual style with a subtle border, shadow, and rounded corners.
+ *
+ */
+
+/**
+ * The main card container component.
+ * Provides the base styling for the card including border, shadow, and rounded corners.
+ * * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-card--docs
+ *
+ * @example
+ * ```tsx
+ * // Basic card
+ * <Card>
+ *   <CardHeader>
+ *     <CardTitle>Card Title</CardTitle>
+ *     <CardDescription>Card Description</CardDescription>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <p>Card content goes here.</p>
+ *   </CardContent>
+ *   <CardFooter>
+ *     <Button>Action</Button>
+ *   </CardFooter>
+ * </Card>
+ *
+ * // Card with custom styling
+ * <Card className="bg-primary text-primary-foreground">
+ *   <CardHeader>
+ *     <CardTitle>Custom Styled Card</CardTitle>
+ *   </CardHeader>
+ *   <CardContent>
+ *     <p>This card has custom background and text colors.</p>
+ *   </CardContent>
+ * </Card>
+ * ```
+ */
+declare const Card: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Header section of the card.
+ * Typically contains the card title and description.
+ * Includes padding and spacing for consistent layout.
+ */
+declare const CardHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Title component for the card.
+ * Should be used within CardHeader.
+ * Provides consistent typography styling for card titles.
+ */
+declare const CardTitle: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLHeadingElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Description component for the card.
+ * Should be used within CardHeader.
+ * Provides consistent typography styling for card descriptions.
+ */
+declare const CardDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+/**
+ * Main content section of the card.
+ * Includes padding and removes top padding to maintain consistent spacing with the header.
+ */
+declare const CardContent: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Footer section of the card.
+ * Typically contains action buttons or additional information.
+ * Includes padding and removes top padding to maintain consistent spacing with the content.
+ */
+declare const CardFooter: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const navigationMenuTriggerStyle: (props?: ({
+    variant?: "default" | "ghost" | "link" | "mobile" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+interface NavigationMenuProps extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Root> {
+    /**
+     * The content of the navigation menu
+     */
+    children: React.ReactNode;
+    /**
+     * Optional className for the root element
+     */
+    className?: string;
+}
+interface NavigationMenuListProps extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.List> {
+    /**
+     * Optional className for the list element
+     */
+    className?: string;
+}
+interface NavigationMenuItemProps extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Item> {
+    /**
+     * Optional className for the item element
+     */
+    className?: string;
+}
+interface NavigationMenuTriggerProps extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Trigger>, VariantProps<typeof navigationMenuTriggerStyle> {
+    /**
+     * Optional className for the trigger element
+     */
+    className?: string;
+}
+interface NavigationMenuContentProps extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Content> {
+    /**
+     * Optional className for the content element
+     */
+    className?: string;
+}
+interface NavigationMenuLinkProps extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Link> {
+    /**
+     * Optional className for the link element
+     */
+    className?: string;
+}
+interface NavigationMenuViewportProps extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Viewport> {
+    /**
+     * Optional className for the viewport element
+     */
+    className?: string;
+}
+interface NavigationMenuIndicatorProps extends React.ComponentPropsWithoutRef<typeof NavigationMenuPrimitive.Indicator> {
+    /**
+     * Optional className for the indicator element
+     */
+    className?: string;
+}
+
+/**
+ * NavigationMenu component for creating accessible navigation menus with dropdowns.
+ * Built on top of Radix UI's NavigationMenu primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-navigation-menu--docs
+ *
+ * @example
+ * ```
+ * <NavigationMenu>
+ *   <NavigationMenuList>
+ *     <NavigationMenuItem>
+ *       <NavigationMenuTrigger>Getting Started</NavigationMenuTrigger>
+ *       <NavigationMenuContent>
+ *         <ul className="grid gap-3 p-4 md:w-[400px] lg:w-[500px]">
+ *           <li className="row-span-3">
+ *             <NavigationMenuLink asChild>
+ *               <a className="flex h-full w-full select-none flex-col justify-end rounded-md bg-gradient-to-b from-muted/50 to-muted p-6 no-underline outline-none focus:shadow-md">
+ *                 <div className="mb-2 mt-4 text-lg font-medium">shadcn/ui</div>
+ *                 <p className="text-sm leading-tight text-muted-foreground">
+ *                   Beautifully designed components built with Radix UI and Tailwind CSS.
+ *                 </p>
+ *               </a>
+ *             </NavigationMenuLink>
+ *           </li>
+ *         </ul>
+ *       </NavigationMenuContent>
+ *     </NavigationMenuItem>
+ *   </NavigationMenuList>
+ * </NavigationMenu>
+ * ```
+ */
+declare const NavigationMenu: React$1.ForwardRefExoticComponent<NavigationMenuProps & React$1.RefAttributes<HTMLElement>>;
+declare const NavigationMenuList: React$1.ForwardRefExoticComponent<NavigationMenuListProps & React$1.RefAttributes<HTMLUListElement>>;
+declare const NavigationMenuItem: React$1.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuItemProps & React$1.RefAttributes<HTMLLIElement>>;
+declare const NavigationMenuTrigger: React$1.ForwardRefExoticComponent<NavigationMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const NavigationMenuContent: React$1.ForwardRefExoticComponent<NavigationMenuContentProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenuLink: React$1.ForwardRefExoticComponent<NavigationMenuPrimitive.NavigationMenuLinkProps & React$1.RefAttributes<HTMLAnchorElement>>;
+declare const NavigationMenuViewport: React$1.ForwardRefExoticComponent<NavigationMenuViewportProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const NavigationMenuIndicator: React$1.ForwardRefExoticComponent<NavigationMenuIndicatorProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Tabs component provides a way to organize content into separate views where only one view is visible at a time.
+ * It follows the WAI-ARIA Tabs Pattern for accessibility.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-tabs--docs
+ *
+ * @example
+ * ```tsx
+ * <Tabs defaultValue="account">
+ *   <TabsList>
+ *     <TabsTrigger value="account">Account</TabsTrigger>
+ *     <TabsTrigger value="password">Password</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="account">
+ *     <p>Account settings content</p>
+ *   </TabsContent>
+ *   <TabsContent value="password">
+ *     <p>Password settings content</p>
+ *   </TabsContent>
+ * </Tabs>
+ * ```
+ */
+
+declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+declare const Drawer: {
+    ({ shouldScaleBackground, ...props }: React$1.ComponentProps<typeof Drawer$1.Root>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * The trigger element that opens the drawer.
+ * Should be used with the `asChild` prop to wrap your own trigger element.
+ */
+declare const DrawerTrigger: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Portal component that renders the drawer content outside the DOM hierarchy.
+ * This ensures proper stacking context and accessibility.
+ */
+declare const DrawerPortal: typeof vaul.Portal;
+/**
+ * Close button component for the drawer.
+ * Should be used with the `asChild` prop to wrap your own close button.
+ */
+declare const DrawerClose: React$1.ForwardRefExoticComponent<DialogPrimitive.DialogCloseProps & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * Overlay component that appears behind the drawer.
+ * Provides a semi-transparent backdrop and handles click-outside behavior.
+ */
+declare const DrawerOverlay: React$1.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * The main content container for the drawer.
+ * Includes the handle bar at the top and manages the slide-up animation.
+ */
+declare const DrawerContent: React$1.ForwardRefExoticComponent<Omit<Omit<DialogPrimitive.DialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * Header section of the drawer.
+ * Typically contains the title and description.
+ */
+declare const DrawerHeader: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * Footer section of the drawer.
+ * Typically contains action buttons.
+ */
+declare const DrawerFooter: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLDivElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+/**
+ * Title component for the drawer.
+ * Should be used within DrawerHeader.
+ */
+declare const DrawerTitle: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+/**
+ * Description component for the drawer.
+ * Should be used within DrawerHeader.
+ */
+declare const DrawerDescription: React$1.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+type SidebarContextProps$1 = {
+    state: "expanded" | "collapsed";
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps$1;
+declare const SidebarProvider: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * A flexible sidebar component that supports various layouts and configurations.
+ * The sidebar can be positioned on either side of the screen and supports different
+ * visual styles and collapse behaviors.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/organisms-sidebar--docs
+ *
+ * @example
+ * ```tsx
+ * <Sidebar>
+ *   <SidebarHeader>
+ *     <SidebarTitle>Dashboard</SidebarTitle>
+ *   </SidebarHeader>
+ *   <SidebarContent>
+ *     <SidebarMenu>
+ *       <SidebarMenuItem icon={<HomeIcon />}>Home</SidebarMenuItem>
+ *       <SidebarMenuItem icon={<SettingsIcon />}>Settings</SidebarMenuItem>
+ *     </SidebarMenu>
+ *   </SidebarContent>
+ *   <SidebarFooter>
+ *     <SidebarTrigger />
+ *   </SidebarFooter>
+ * </Sidebar>
+ * ```
+ */
+declare const Sidebar: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+    side?: "left" | "right";
+    variant?: "sidebar" | "floating" | "inset";
+    collapsible?: "offcanvas" | "icon" | "none";
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarTrigger: React$1.ForwardRefExoticComponent<Omit<ButtonProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarRail: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarInset: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarInput: React$1.ForwardRefExoticComponent<Omit<Omit<React$1.DetailedHTMLProps<React$1.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>, "ref"> & React$1.RefAttributes<HTMLInputElement>>;
+declare const SidebarHeader: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarFooter: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarSeparator: React$1.ForwardRefExoticComponent<Omit<Omit<SeparatorPrimitive.SeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroup: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupLabel: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+    asChild?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarGroupAction: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarGroupContent: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenu: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const SidebarMenuButton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    isActive?: boolean;
+    tooltip?: string | React$1.ComponentProps<typeof TooltipContent>;
+} & VariantProps<(props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuAction: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLButtonElement> & React$1.ButtonHTMLAttributes<HTMLButtonElement> & {
+    asChild?: boolean;
+    showOnHover?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SidebarMenuBadge: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSkeleton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLDivElement> & React$1.HTMLAttributes<HTMLDivElement> & {
+    showIcon?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SidebarMenuSub: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.HTMLAttributes<HTMLUListElement>, HTMLUListElement>, "ref"> & React$1.RefAttributes<HTMLUListElement>>;
+declare const SidebarMenuSubItem: React$1.ForwardRefExoticComponent<Omit<React$1.DetailedHTMLProps<React$1.LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & React$1.RefAttributes<HTMLLIElement>>;
+declare const SidebarMenuSubButton: React$1.ForwardRefExoticComponent<Omit<React$1.ClassAttributes<HTMLAnchorElement> & React$1.AnchorHTMLAttributes<HTMLAnchorElement> & {
+    asChild?: boolean;
+    size?: "sm" | "md";
+    isActive?: boolean;
+}, "ref"> & React$1.RefAttributes<HTMLAnchorElement>>;
+
+/**
+ * Context props for the Sidebar component that manages its state and behavior.
+ * This context provides the necessary state and methods to control the sidebar's
+ * expansion, collapse, and mobile responsiveness.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/organisms-sidebar--docs
+ */
+type SidebarContextProps = {
+    /** Current state of the sidebar - either expanded or collapsed */
+    state: "expanded" | "collapsed";
+    /** Whether the sidebar is currently open */
+    open: boolean;
+    /** Function to control the sidebar's open state */
+    setOpen: (open: boolean) => void;
+    /** Whether the mobile sidebar is currently open */
+    openMobile: boolean;
+    /** Function to control the mobile sidebar's open state */
+    setOpenMobile: (open: boolean) => void;
+    /** Whether the sidebar is being viewed on a mobile device */
+    isMobile: boolean;
+    /** Function to toggle the sidebar's state */
+    toggleSidebar: () => void;
+};
+/**
+ * Props for the main Sidebar component.
+ * Extends the base div props and adds sidebar-specific configuration options.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/organisms-sidebar--docs
+ *
+ * @example
+ * ```tsx
+ * <Sidebar
+ *   side="left"
+ *   variant="sidebar"
+ *   collapsible="icon"
+ * >
+ *   <SidebarContent>...</SidebarContent>
+ * </Sidebar>
+ * ```
+ */
+type SidebarProps = React$1.ComponentProps<"div"> & {
+    /** Position of the sidebar relative to the main content */
+    side?: "left" | "right";
+    /** Visual style variant of the sidebar */
+    variant?: "sidebar" | "floating" | "inset";
+    /** Collapse behavior of the sidebar */
+    collapsible?: "offcanvas" | "icon" | "none";
+};
+/**
+ * Props for the SidebarProvider component that manages sidebar state.
+ * Provides controlled and uncontrolled state management options.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/organisms-sidebar--docs
+ *
+ * @example
+ * ```tsx
+ * <SidebarProvider defaultOpen={true}>
+ *   <Sidebar>...</Sidebar>
+ * </SidebarProvider>
+ * ```
+ */
+type SidebarProviderProps = React$1.ComponentProps<"div"> & {
+    /** Initial open state for uncontrolled usage */
+    defaultOpen?: boolean;
+    /** Controlled open state */
+    open?: boolean;
+    /** Callback when open state changes */
+    onOpenChange?: (open: boolean) => void;
+};
+/**
+ * Props for the SidebarMenuButton component.
+ * Extends button props with additional styling and behavior options.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/organisms-sidebar--docs
+ *
+ * @example
+ * ```tsx
+ * <SidebarMenuButton
+ *   isActive={true}
+ *   tooltip="Dashboard"
+ * >
+ *   <DashboardIcon />
+ * </SidebarMenuButton>
+ * ```
+ */
+type SidebarMenuButtonProps = React$1.ComponentProps<"button"> & {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Whether the button is currently active */
+    isActive?: boolean;
+    /** Tooltip content or configuration */
+    tooltip?: string | React$1.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>;
+/**
+ * Props for the SidebarMenuAction component.
+ * Used for action buttons within the sidebar menu.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/organisms-sidebar--docs
+ *
+ * @example
+ * ```tsx
+ * <SidebarMenuAction showOnHover>
+ *   <PlusIcon />
+ * </SidebarMenuAction>
+ * ```
+ */
+type SidebarMenuActionProps = React$1.ComponentProps<"button"> & {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Whether to only show the action on hover */
+    showOnHover?: boolean;
+};
+/**
+ * Props for the SidebarMenuSubButton component.
+ * Used for secondary navigation items within the sidebar.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/organisms-sidebar--docs
+ *
+ * @example
+ * ```tsx
+ * <SidebarMenuSubButton
+ *   size="sm"
+ *   isActive={true}
+ *   href="/settings/profile"
+ * >
+ *   Profile Settings
+ * </SidebarMenuSubButton>
+ * ```
+ */
+type SidebarMenuSubButtonProps = React$1.ComponentProps<"a"> & {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+    /** Size variant of the sub-button */
+    size?: "sm" | "md";
+    /** Whether the sub-button is currently active */
+    isActive?: boolean;
+};
+/**
+ * Props for the SidebarMenuSkeleton component.
+ * Used to show loading states in the sidebar menu.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/organisms-sidebar--docs
+ *
+ * @example
+ * ```tsx
+ * <SidebarMenuSkeleton showIcon />
+ * ```
+ */
+type SidebarMenuSkeletonProps = React$1.ComponentProps<"div"> & {
+    /** Whether to show an icon skeleton */
+    showIcon?: boolean;
+};
+/**
+ * Props for the SidebarGroupLabel component.
+ * Used to display section labels within the sidebar.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/organisms-sidebar--docs
+ *
+ * @example
+ * ```tsx
+ * <SidebarGroupLabel>Navigation</SidebarGroupLabel>
+ * ```
+ */
+type SidebarGroupLabelProps = React$1.ComponentProps<"div"> & {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+};
+/**
+ * Props for the SidebarGroupAction component.
+ * Used for action buttons within sidebar groups.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/organisms-sidebar--docs
+ *
+ * @example
+ * ```tsx
+ * <SidebarGroupAction>
+ *   <SettingsIcon />
+ * </SidebarGroupAction>
+ * ```
+ */
+type SidebarGroupActionProps = React$1.ComponentProps<"button"> & {
+    /** Whether to render as a child component */
+    asChild?: boolean;
+};
+
+/**
+ * DropdownMenu component for creating accessible dropdown menus.
+ * Built on top of Radix UI's DropdownMenu primitive.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/organisms-dropdown-menu--docs
+ *
+ * @example
+ * ```tsx
+ * <DropdownMenu>
+ *   <DropdownMenuTrigger>Open Menu</DropdownMenuTrigger>
+ *   <DropdownMenuContent>
+ *     <DropdownMenuItem>Item 1</DropdownMenuItem>
+ *     <DropdownMenuItem>Item 2</DropdownMenuItem>
+ *     <DropdownMenuItem>Item 3</DropdownMenuItem>
+ *   </DropdownMenuContent>
+ * </DropdownMenu>
+ * ```
+ */
+declare const DropdownMenu: React$1.FC<DropdownMenuPrimitive.DropdownMenuProps>;
+declare const DropdownMenuTrigger: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const DropdownMenuGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuPortal: React$1.FC<DropdownMenuPrimitive.DropdownMenuPortalProps>;
+declare const DropdownMenuSub: React$1.FC<DropdownMenuPrimitive.DropdownMenuSubProps>;
+declare const DropdownMenuRadioGroup: React$1.ForwardRefExoticComponent<DropdownMenuPrimitive.DropdownMenuRadioGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubTriggerProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSubContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSubContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuContent: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuCheckboxItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuCheckboxItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuRadioItem: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuRadioItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & {
+    inset?: boolean;
+} & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: React$1.HTMLAttributes<HTMLSpanElement>): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const dropdownMenuTriggerStyle: (props?: ({
+    variant?: "default" | "outline" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+
+type DropdownMenuTriggerVariants = VariantProps<typeof dropdownMenuTriggerStyle>;
+interface DropdownMenuProps {
+    /**
+     * The content of the dropdown menu
+     */
+    children: React.ReactNode;
+    /**
+     * The open state of the dropdown menu
+     */
+    open?: boolean;
+    /**
+     * The default open state of the dropdown menu
+     */
+    defaultOpen?: boolean;
+    /**
+     * The controlled open state of the dropdown menu
+     */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * The modal state of the dropdown menu
+     */
+    modal?: boolean;
+}
+interface DropdownMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, DropdownMenuTriggerVariants {
+    /**
+     * The content of the trigger
+     */
+    children: React.ReactNode;
+    /**
+     * The variant of the trigger
+     */
+    variant?: DropdownMenuTriggerVariants["variant"];
+    /**
+     * The size of the trigger
+     */
+    size?: DropdownMenuTriggerVariants["size"];
+}
+interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of the dropdown menu
+     */
+    children: React.ReactNode;
+    /**
+     * The side offset of the dropdown menu
+     */
+    sideOffset?: number;
+    /**
+     * The align offset of the dropdown menu
+     */
+    alignOffset?: number;
+    /**
+     * The side of the dropdown menu
+     */
+    side?: "top" | "right" | "bottom" | "left";
+    /**
+     * The alignment of the dropdown menu
+     */
+    align?: "start" | "center" | "end";
+    /**
+     * The collision padding of the dropdown menu
+     */
+    collisionPadding?: number;
+    /**
+     * The collision boundary of the dropdown menu
+     */
+    collisionBoundary?: Element | null | Array<Element | null>;
+    /**
+     * The arrow padding of the dropdown menu
+     */
+    arrowPadding?: number;
+    /**
+     * The sticky state of the dropdown menu
+     */
+    sticky?: "partial" | "always";
+    /**
+     * The hide when detached state of the dropdown menu
+     */
+    hideWhenDetached?: boolean;
+    /**
+     * The update position strategy of the dropdown menu
+     */
+    updatePositionStrategy?: "optimized" | "always";
+    /**
+     * The force mount state of the dropdown menu
+     */
+    forceMount?: boolean;
+    /**
+     * The container of the dropdown menu
+     */
+    container?: HTMLElement;
+}
+interface DropdownMenuItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of the dropdown menu item
+     */
+    children: React.ReactNode;
+    /**
+     * The inset state of the dropdown menu item
+     */
+    inset?: boolean;
+    /**
+     * The disabled state of the dropdown menu item
+     */
+    disabled?: boolean;
+    /**
+     * The selected state of the dropdown menu item
+     */
+    selected?: boolean;
+}
+interface DropdownMenuCheckboxItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of the dropdown menu checkbox item
+     */
+    children: React.ReactNode;
+    /**
+     * The checked state of the dropdown menu checkbox item
+     */
+    checked?: boolean;
+    /**
+     * The disabled state of the dropdown menu checkbox item
+     */
+    disabled?: boolean;
+    /**
+     * The on checked change handler of the dropdown menu checkbox item
+     */
+    onCheckedChange?: (checked: boolean) => void;
+}
+interface DropdownMenuRadioItemProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of the dropdown menu radio item
+     */
+    children: React.ReactNode;
+    /**
+     * The value of the dropdown menu radio item
+     */
+    value: string;
+    /**
+     * The disabled state of the dropdown menu radio item
+     */
+    disabled?: boolean;
+}
+interface DropdownMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of the dropdown menu label
+     */
+    children: React.ReactNode;
+    /**
+     * The inset state of the dropdown menu label
+     */
+    inset?: boolean;
+}
+interface DropdownMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+}
+interface DropdownMenuShortcutProps extends React.HTMLAttributes<HTMLSpanElement> {
+    /**
+     * The content of the dropdown menu shortcut
+     */
+    children: React.ReactNode;
+}
+interface DropdownMenuGroupProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of the dropdown menu group
+     */
+    children: React.ReactNode;
+}
+interface DropdownMenuPortalProps {
+    /**
+     * The content of the dropdown menu portal
+     */
+    children: React.ReactNode;
+    /**
+     * The container of the dropdown menu portal
+     */
+    container?: HTMLElement;
+}
+interface DropdownMenuSubProps {
+    /**
+     * The content of the dropdown menu sub
+     */
+    children: React.ReactNode;
+    /**
+     * The open state of the dropdown menu sub
+     */
+    open?: boolean;
+    /**
+     * The default open state of the dropdown menu sub
+     */
+    defaultOpen?: boolean;
+    /**
+     * The controlled open state of the dropdown menu sub
+     */
+    onOpenChange?: (open: boolean) => void;
+}
+interface DropdownMenuSubContentProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of the dropdown menu sub content
+     */
+    children: React.ReactNode;
+    /**
+     * The side offset of the dropdown menu sub content
+     */
+    sideOffset?: number;
+    /**
+     * The align offset of the dropdown menu sub content
+     */
+    alignOffset?: number;
+    /**
+     * The side of the dropdown menu sub content
+     */
+    side?: "top" | "right" | "bottom" | "left";
+    /**
+     * The alignment of the dropdown menu sub content
+     */
+    align?: "start" | "center" | "end";
+    /**
+     * The collision padding of the dropdown menu sub content
+     */
+    collisionPadding?: number;
+    /**
+     * The collision boundary of the dropdown menu sub content
+     */
+    collisionBoundary?: Element | null | Array<Element | null>;
+    /**
+     * The arrow padding of the dropdown menu sub content
+     */
+    arrowPadding?: number;
+    /**
+     * The sticky state of the dropdown menu sub content
+     */
+    sticky?: "partial" | "always";
+    /**
+     * The hide when detached state of the dropdown menu sub content
+     */
+    hideWhenDetached?: boolean;
+    /**
+     * The update position strategy of the dropdown menu sub content
+     */
+    updatePositionStrategy?: "optimized" | "always";
+    /**
+     * The force mount state of the dropdown menu sub content
+     */
+    forceMount?: boolean;
+    /**
+     * The container of the dropdown menu sub content
+     */
+    container?: HTMLElement;
+}
+interface DropdownMenuSubTriggerProps extends React.HTMLAttributes<HTMLDivElement> {
+    /**
+     * The content of the dropdown menu sub trigger
+     */
+    children: React.ReactNode;
+    /**
+     * The inset state of the dropdown menu sub trigger
+     */
+    inset?: boolean;
+    /**
+     * The disabled state of the dropdown menu sub trigger
+     */
+    disabled?: boolean;
+}
+interface DropdownMenuRadioGroupProps {
+    /**
+     * The content of the dropdown menu radio group
+     */
+    children: React.ReactNode;
+    /**
+     * The value of the dropdown menu radio group
+     */
+    value?: string;
+    /**
+     * The default value of the dropdown menu radio group
+     */
+    defaultValue?: string;
+    /**
+     * The controlled value of the dropdown menu radio group
+     */
+    onValueChange?: (value: string) => void;
+}
+
+interface RHFTextFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React$1.ComponentProps<typeof Input>, "name"> {
+    /** The name of the field in the form */
+    name: TName;
+    /** Optional label for the field */
+    label?: string;
+    /** Optional description text below the field */
+    description?: string;
+    /** Optional warning text to display */
+    warningText?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** The type of input (text, number, email, etc.) */
+    type?: React$1.HTMLInputTypeAttribute;
+    /** Optional placeholder text */
+    placeholder?: string;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+}
+
+/**
+ * A text field component that integrates with React Hook Form.
+ * Provides form validation, error handling, and accessibility features.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhftextfield--docs
+ *
+ * * @example
+ * ```tsx
+ * <Form>
+ *   <RHFTextField name="name" label="Name" />
+ *   <RHFTextField name="email" label="Email" />
+ * </Form>
+ * ```
+ */
+declare function RHFTextField<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, type, warningText, required, disabled, readOnly, placeholder, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, onBlur, ...other }: RHFTextFieldProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+interface TextareaProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+    /**
+     * Whether the textarea should automatically resize
+     */
+    autoResize?: boolean;
+}
+
+/**
+ * Textarea component for creating accessible text areas.
+ * Built on top of shadcn/ui's Textarea component.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/atoms-textarea--docs
+ *
+ * @example
+ * ```tsx
+ * <Textarea placeholder="Enter text" />
+ * ```
+ */
+declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+interface RHFTextareaProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React$1.ComponentProps<typeof Textarea>, "name"> {
+    /** The name of the field in the form */
+    name: TName;
+    /** Optional label for the field */
+    label?: string;
+    /** Optional description text below the field */
+    description?: string;
+    /** Optional warning text to display */
+    warningText?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Optional placeholder text */
+    placeholder?: string;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+    /** Whether the textarea should automatically resize */
+    autoResize?: boolean;
+}
+
+/**
+ * A textarea component that integrates with React Hook Form.
+ * Provides form validation, error handling, and accessibility features.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhftextarea--docs
+ *
+ * @example
+ * ```tsx
+ * <Form>
+ *   <RHFTextarea name="description" label="Description" />
+ * </Form>
+ * ```
+ */
+declare function RHFTextarea<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, placeholder, autoResize, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, onBlur, ...other }: RHFTextareaProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+interface RHFCheckboxProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React$1.ComponentProps<typeof Checkbox>, "name"> {
+    /** The name of the field in the form */
+    name: TName;
+    /** Optional label for the field */
+    label?: string;
+    /** Optional description text below the field */
+    description?: string;
+    /** Optional warning text to display */
+    warningText?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+}
+
+/**
+ * A checkbox component that integrates with React Hook Form.
+ * Provides form validation, error handling, and accessibility features.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfcheckbox--docs
+ *
+ * @example
+ * ```tsx
+ * <Form>
+ *   <RHFCheckbox name="terms" label="Accept terms and conditions" />
+ * </Form>
+ * ```
+ */
+declare function RHFCheckbox<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, ...other }: RHFCheckboxProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+interface RHFSwitchProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React$1.ComponentProps<typeof Switch>, "name"> {
+    /** The name of the field in the form */
+    name: TName;
+    /** Optional label for the field */
+    label?: string;
+    /** Optional description text below the field */
+    description?: string;
+    /** Optional warning text to display */
+    warningText?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+}
+
+/**
+ * A switch component that integrates with React Hook Form.
+ * Provides form validation, error handling, and accessibility features.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfswitch--docs
+ *
+ * @example
+ * ```tsx
+ * <Form>
+ *   <RHFSwitch name="notifications" label="Enable notifications" />
+ * </Form>
+ * ```
+ */
+declare function RHFSwitch<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, ...other }: RHFSwitchProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+interface RHFRadioGroupOption {
+    label: string;
+    id: string;
+}
+interface RHFRadioGroupWithChildrenProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React$1.ComponentProps<typeof RadioGroup>, "name"> {
+    /** The name of the field in the form */
+    name: TName;
+    /** Optional label for the field */
+    label?: string;
+    /** Optional description text below the field */
+    description?: string;
+    /** Optional warning text to display */
+    warningText?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+    /** Children must be RadioGroupItem components */
+    children: React$1.ReactNode;
+}
+interface RHFRadioGroupWithOptionsProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React$1.ComponentProps<typeof RadioGroup>, "name"> {
+    /** The name of the field in the form */
+    name: TName;
+    /** Optional label for the field */
+    label?: string;
+    /** radio group options */
+    options: RHFRadioGroupOption[];
+    /** Optional description text below the field */
+    description?: string;
+    /** Optional warning text to display */
+    warningText?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+}
+type RHFRadioGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = RHFRadioGroupWithChildrenProps<TFieldValues, TName> | RHFRadioGroupWithOptionsProps<TFieldValues, TName>;
+
+/**
+ * A radio group component that integrates with React Hook Form.
+ * Provides form validation, error handling, and accessibility features.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfradiogroup--docs
+ *
+ * @example
+ * ```tsx
+ * // Using children
+ * <Form>
+ *   <RHFRadioGroup name="preference" label="Select your preference">
+ *     <RadioGroupItem value="option1" label="Option 1" />
+ *     <RadioGroupItem value="option2" label="Option 2" />
+ *   </RHFRadioGroup>
+ * </Form>
+ *
+ * // Using options prop
+ * <Form>
+ *   <RHFRadioGroup
+ *     name="preference"
+ *     label="Select your preference"
+ *     options={[
+ *       { id: "option1", label: "Option 1" },
+ *       { id: "option2", label: "Option 2" }
+ *     ]}
+ *   />
+ * </Form>
+ * ```
+ */
+declare function RHFRadioGroup<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, children, ...other }: RHFRadioGroupProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+interface RHFRadioButtonGroupOption {
+    label: string;
+    id: string;
+    size?: "default" | "sm" | "lg";
+}
+interface RHFRadioButtonGroupProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<React$1.ComponentProps<typeof RadioGroup>, "name"> {
+    /** The name of the field in the form */
+    name: TName;
+    /** Optional label for the field */
+    label?: string;
+    /** Optional description text below the field */
+    description?: string;
+    /** Optional warning text to display */
+    warningText?: string;
+    /** Whether the field is required */
+    required?: boolean;
+    /** Whether the field is disabled */
+    disabled?: boolean;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+    /** Radio button group options */
+    options: RHFRadioButtonGroupOption[];
+}
+
+/**
+ * A radio button group component that integrates with React Hook Form.
+ * Uses buttons instead of traditional radio inputs for a more modern look.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfradiobuttongroup--docs
+ *
+ * @example
+ * ```tsx
+ * <Form>
+ *   <RHFRadioButtonGroup
+ *     name="preference"
+ *     label="Select your preference"
+ *     options={[
+ *       { value: "option1", label: "Option 1" },
+ *       { value: "option2", label: "Option 2" },
+ *       { value: "option3", label: "Option 3" }
+ *     ]}
+ *   />
+ * </Form>
+ * ```
+ */
+declare function RHFRadioButtonGroup<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, options, ...other }: RHFRadioButtonGroupProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+declare const Form: <TFieldValues extends FieldValues, TContext = any, TTransformedValues = TFieldValues>(props: react_hook_form.FormProviderProps<TFieldValues, TContext, TTransformedValues>) => React$1.JSX.Element;
+declare const FormField: <TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ ...props }: ControllerProps<TFieldValues, TName>) => react_jsx_runtime.JSX.Element;
+declare const useFormField: () => {
+    invalid: boolean;
+    isDirty: boolean;
+    isTouched: boolean;
+    isValidating: boolean;
+    error?: react_hook_form.FieldError;
+    id: string;
+    name: string;
+    formItemId: string;
+    formDescriptionId: string;
+    formMessageId: string;
+};
+declare const FormItem: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLDivElement> & React$1.RefAttributes<HTMLDivElement>>;
+declare const FormLabel: React$1.ForwardRefExoticComponent<Omit<LabelPrimitive.LabelProps & React$1.RefAttributes<HTMLLabelElement>, "ref"> & React$1.RefAttributes<HTMLLabelElement>>;
+declare const FormControl: React$1.ForwardRefExoticComponent<Omit<_radix_ui_react_slot.SlotProps & React$1.RefAttributes<HTMLElement>, "ref"> & React$1.RefAttributes<HTMLElement>>;
+declare const FormDescription: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const FormMessage: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLParagraphElement> & React$1.RefAttributes<HTMLParagraphElement>>;
+
+/**
+ * Props interface for the Form component.
+ * Extends react-hook-form's FormProvider props.
+ */
+interface FormProps<TFieldValues extends FieldValues = FieldValues> {
+    /**
+     * The form context value
+     */
+    context: React$1.Context<TFieldValues>;
+    /**
+     * The form children
+     */
+    children: React$1.ReactNode;
+}
+/**
+ * Props interface for the FormField component.
+ * Extends react-hook-form's Controller props.
+ */
+interface FormFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends ControllerProps<TFieldValues, TName> {
+}
+/**
+ * Props interface for the FormItem component.
+ * Extends HTML div attributes.
+ */
+interface FormItemProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Props interface for the FormLabel component.
+ * Extends Radix UI Label props.
+ */
+interface FormLabelProps extends React$1.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> {
+}
+/**
+ * Props interface for the FormControl component.
+ * Extends Radix UI Slot props.
+ */
+interface FormControlProps extends React$1.ComponentPropsWithoutRef<typeof Slot> {
+}
+/**
+ * Props interface for the FormDescription component.
+ * Extends HTML paragraph attributes.
+ */
+interface FormDescriptionProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
+}
+/**
+ * Props interface for the FormMessage component.
+ * Extends HTML paragraph attributes.
+ */
+interface FormMessageProps extends React$1.HTMLAttributes<HTMLParagraphElement> {
+    /**
+     * The message content
+     */
+    children?: React$1.ReactNode;
+}
+/**
+ * Context value type for form field context
+ */
+type FormFieldContextValue<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = {
+    name: TName;
+};
+/**
+ * Context value type for form item context
+ */
+type FormItemContextValue = {
+    id: string;
+};
+
+interface RHFMultiSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<MultiSelectProps, "name" | "value" | "onChange"> {
+    /** The name of the field in the form */
+    name: TName;
+    /** Optional label for the field */
+    label?: string;
+    /** Optional description text below the field */
+    description?: string;
+    /** Optional warning text to display */
+    warningText?: string;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+}
+
+/**
+ * A multi-select component that integrates with React Hook Form.
+ * Provides form validation, error handling, and accessibility features.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfmultiselect--docs
+ *
+ * @example
+ * ```tsx
+ * <Form>
+ *   <RHFMultiSelect
+ *     name="countries"
+ *     label="Countries"
+ *     options={[
+ *       { id: "us", label: "United States" },
+ *       { id: "ca", label: "Canada" }
+ *     ]}
+ *
+ *   />
+ * </Form>
+ * ```
+ */
+declare function RHFMultiSelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, placeholder, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, options, ...other }: RHFMultiSelectProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+type RHFSelectOption = SelectOption;
+interface RHFSelectProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Omit<SelectProps, "name" | "value" | "onChange"> {
+    /** The name of the field in the form */
+    name: TName;
+    /** Optional label for the field */
+    label?: string;
+    /** Optional description text below the field */
+    description?: string;
+    /** Optional warning text to display */
+    warningText?: string;
+    /** Whether the field is read-only */
+    readOnly?: boolean;
+    /** Optional aria-label for accessibility */
+    "aria-label"?: string;
+    /** Optional aria-describedby for accessibility */
+    "aria-describedby"?: string;
+}
+
+/**
+ * A select component that integrates with React Hook Form.
+ * Provides form validation, error handling, and accessibility features.
+ *
+ * @url https://sergii-melnykov.github.io/ui/?path=/docs/molecules-rhf-rhfselect--docs
+ *
+ * @example
+ * ```tsx
+ * <Form>
+ *   <RHFSelect
+ *     name="country"
+ *     label="Country"
+ *     options={[
+ *       { id: "us", label: "United States" },
+ *       { id: "ca", label: "Canada" }
+ *     ]}
+ *   />
+ * </Form>
+ * ```
+ */
+declare function RHFSelect<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>>({ name, label, description, className, warningText, required, disabled, readOnly, placeholder, "aria-label": ariaLabel, "aria-describedby": ariaDescribedby, options, ...other }: RHFSelectProps<TFieldValues, TName>): react_jsx_runtime.JSX.Element;
+
+declare function useIsMobile(): boolean;
+
+type ToasterToast = ToastProps & {
+    id: string;
+    title?: React$1.ReactNode;
+    description?: React$1.ReactNode;
+    action?: ToastActionElement;
+};
+declare const actionTypes: {
+    readonly ADD_TOAST: "ADD_TOAST";
+    readonly UPDATE_TOAST: "UPDATE_TOAST";
+    readonly DISMISS_TOAST: "DISMISS_TOAST";
+    readonly REMOVE_TOAST: "REMOVE_TOAST";
+};
+type ActionType = typeof actionTypes;
+type Action = {
+    type: ActionType["ADD_TOAST"];
+    toast: ToasterToast;
+} | {
+    type: ActionType["UPDATE_TOAST"];
+    toast: Partial<ToasterToast>;
+} | {
+    type: ActionType["DISMISS_TOAST"];
+    toastId?: ToasterToast["id"];
+} | {
+    type: ActionType["REMOVE_TOAST"];
+    toastId?: ToasterToast["id"];
+};
+interface State {
+    toasts: ToasterToast[];
+}
+declare const reducer: (state: State, action: Action) => State;
+type Toast = Omit<ToasterToast, "id">;
+declare function toast({ ...props }: Toast): {
+    id: string;
+    dismiss: () => void;
+    update: (props: ToasterToast) => void;
+};
+declare function useToast(): {
+    toast: typeof toast;
+    dismiss: (toastId?: string) => void;
+    toasts: ToasterToast[];
+};
+
+declare function cn(...inputs: ClassValue[]): string;
+
+export { Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, type AccordionProps, AccordionTrigger, type AccordionTriggerProps, Avatar, AvatarFallback, type AvatarFallbackProps, AvatarImage, type AvatarImageProps, type AvatarProps, Badge, type BadgeProps, Box, type BoxProps, Breadcrumb, BreadcrumbEllipsis, type BreadcrumbEllipsisProps, BreadcrumbItem, type BreadcrumbItemProps, BreadcrumbLink, type BreadcrumbLinkProps, BreadcrumbList, type BreadcrumbListProps, BreadcrumbPage, type BreadcrumbPageProps, type BreadcrumbProps, BreadcrumbSeparator, type BreadcrumbSeparatorProps, Button, type ButtonProps, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, type CheckboxProps, Collapsible, CollapsibleContent, type CollapsibleContentProps, type CollapsibleProps, CollapsibleTrigger, type CollapsibleTriggerProps, Command, CommandDialog, type CommandDialogProps, CommandEmpty, type CommandEmptyProps, type CommandEmptyRef, CommandGroup, type CommandGroupProps, type CommandGroupRef, CommandInput, type CommandInputProps, type CommandInputRef, CommandItem, type CommandItemProps, type CommandItemRef, CommandList, type CommandListProps, type CommandListRef, type CommandProps, type CommandRef, CommandSeparator, type CommandSeparatorProps, type CommandSeparatorRef, CommandShortcut, type CommandShortcutProps, Container, type ContainerProps, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, type DropdownMenuCheckboxItemProps, DropdownMenuContent, type DropdownMenuContentProps, DropdownMenuGroup, type DropdownMenuGroupProps, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, type DropdownMenuPortalProps, type DropdownMenuProps, DropdownMenuRadioGroup, type DropdownMenuRadioGroupProps, DropdownMenuRadioItem, type DropdownMenuRadioItemProps, DropdownMenuSeparator, type DropdownMenuSeparatorProps, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, type DropdownMenuSubContentProps, type DropdownMenuSubProps, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type DropdownMenuTriggerProps, Form, FormControl, type FormControlProps, FormDescription, type FormDescriptionProps, FormField, type FormFieldContextValue, type FormFieldProps, FormItem, type FormItemContextValue, type FormItemProps, FormLabel, type FormLabelProps, FormMessage, type FormMessageProps, type FormProps, Input, Label, type LabelProps, MultiSelect, type MultiSelectOption, type MultiSelectProps, NavigationMenu, NavigationMenuContent, type NavigationMenuContentProps, NavigationMenuIndicator, type NavigationMenuIndicatorProps, NavigationMenuItem, type NavigationMenuItemProps, NavigationMenuLink, type NavigationMenuLinkProps, NavigationMenuList, type NavigationMenuListProps, type NavigationMenuProps, NavigationMenuTrigger, type NavigationMenuTriggerProps, NavigationMenuViewport, type NavigationMenuViewportProps, PageLoader, type PageLoaderProps, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, type PaginationLinkProps, PaginationNext, PaginationPrevious, RHFCheckbox, RHFMultiSelect, RHFRadioButtonGroup, type RHFRadioButtonGroupOption, type RHFRadioButtonGroupProps, RHFRadioGroup, RHFSelect, type RHFSelectOption, type RHFSelectProps, RHFSwitch, RHFTextField, RHFTextarea, RadioGroup, RadioGroupItem, type RadioGroupItemProps, type RadioGroupProps, RadioItemContainer, RadioItemLabel, ResizableHandle, type ResizableHandleProps, ResizablePanel, ResizablePanelGroup, type ResizablePanelGroupProps, type ResizablePanelProps, Select, type SelectOption, type SelectProps, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, type SidebarContextProps, SidebarFooter, SidebarGroup, SidebarGroupAction, type SidebarGroupActionProps, SidebarGroupContent, SidebarGroupLabel, type SidebarGroupLabelProps, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, type SidebarMenuActionProps, SidebarMenuBadge, SidebarMenuButton, type SidebarMenuButtonProps, SidebarMenuItem, SidebarMenuSkeleton, type SidebarMenuSkeletonProps, SidebarMenuSub, SidebarMenuSubButton, type SidebarMenuSubButtonProps, SidebarMenuSubItem, type SidebarProps, SidebarProvider, type SidebarProviderProps, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Stack, type StackProps, Switch, type SwitchProps, Table, TableBody, type TableBodyProps, TableCaption, type TableCaptionProps, TableCell, type TableCellProps, TableFooter, type TableFooterProps, TableHead, type TableHeadProps, TableHeader, type TableHeaderProps, type TableProps, TableRow, type TableRowProps, Tabs, TabsContent, TabsList, TabsTrigger, TextField, type TextFieldProps, Toast$1 as Toast, ToastAction, type ToastActionElement, ToastClose, ToastDescription, type ToastProps, ToastProvider, ToastTitle, ToastViewport, Toaster, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Typography, type TypographyAlign, type TypographyProps, type TypographyVariant, badgeVariants, buttonVariants, cn, reducer, sidebarMenuButtonVariants, toast, typographyVariants, useFormField, useIsMobile, useSidebar, useToast };