@optilogic/core 1.0.0-beta.0

package/dist/index.d.cts

@@ -0,0 +1,2310 @@
+import { ClassValue } from 'clsx';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import * as React$1 from 'react';
+import { VariantProps } from 'class-variance-authority';
+import * as LabelPrimitive from '@radix-ui/react-label';
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
+import * as SwitchPrimitive from '@radix-ui/react-switch';
+import * as ProgressPrimitive from '@radix-ui/react-progress';
+import * as SeparatorPrimitive from '@radix-ui/react-separator';
+import * as SelectPrimitive from '@radix-ui/react-select';
+import * as TabsPrimitive from '@radix-ui/react-tabs';
+import * as AccordionPrimitive from '@radix-ui/react-accordion';
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import * as AlertDialogPrimitive from '@radix-ui/react-alert-dialog';
+import { DayPickerProps } from 'react-day-picker';
+import { LucideIcon } from 'lucide-react';
+
+/**
+ * Utility function to merge Tailwind CSS classes with proper precedence.
+ * Combines clsx for conditional classes with tailwind-merge for deduplication.
+ *
+ * @example
+ * cn("px-4 py-2", "px-6") // => "py-2 px-6"
+ * cn("text-red-500", isActive && "text-blue-500") // => conditional
+ */
+declare function cn(...inputs: ClassValue[]): string;
+
+/**
+ * Button variant styles using class-variance-authority.
+ * Provides consistent button styling across the application.
+ */
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "primary" | "destructive" | "outline" | "secondary" | "ghost" | "link" | null | undefined;
+    size?: "default" | "sm" | "lg" | "icon" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface ButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {
+    /**
+     * If true, the button will render as its child element (Slot pattern).
+     * Useful for wrapping other components like links.
+     */
+    asChild?: boolean;
+}
+/**
+ * Button Component
+ *
+ * A versatile button component with multiple variants and sizes.
+ * Supports the Slot pattern for composing with other elements.
+ *
+ * @example
+ * <Button variant="primary">Click me</Button>
+ *
+ * @example
+ * <Button variant="ghost" size="icon">
+ *   <Icon />
+ * </Button>
+ *
+ * @example
+ * <Button asChild>
+ *   <a href="/link">Link Button</a>
+ * </Button>
+ */
+declare const Button: React$1.ForwardRefExoticComponent<ButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface InputProps extends React$1.InputHTMLAttributes<HTMLInputElement> {
+}
+/**
+ * Input Component
+ *
+ * A styled text input with consistent theming.
+ * Supports all native input attributes.
+ *
+ * @example
+ * <Input placeholder="Enter your name" />
+ *
+ * @example
+ * <Input type="email" placeholder="email@example.com" />
+ *
+ * @example
+ * <Input disabled value="Disabled input" />
+ */
+declare const Input: React$1.ForwardRefExoticComponent<InputProps & React$1.RefAttributes<HTMLInputElement>>;
+
+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
+ *
+ * A form label component with consistent styling.
+ * Automatically associates with form controls via htmlFor.
+ *
+ * @example
+ * <Label htmlFor="email">Email</Label>
+ * <Input id="email" type="email" />
+ */
+declare const Label: React$1.ForwardRefExoticComponent<LabelProps & React$1.RefAttributes<HTMLLabelElement>>;
+
+interface TextareaProps extends React$1.TextareaHTMLAttributes<HTMLTextAreaElement> {
+}
+/**
+ * Textarea Component
+ *
+ * A styled multi-line text input with consistent theming.
+ * Supports all native textarea attributes.
+ *
+ * @example
+ * <Textarea placeholder="Enter description..." />
+ *
+ * @example
+ * <Textarea rows={5} placeholder="Write your message..." />
+ */
+declare const Textarea: React$1.ForwardRefExoticComponent<TextareaProps & React$1.RefAttributes<HTMLTextAreaElement>>;
+
+/**
+ * Badge variant styles using class-variance-authority.
+ */
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "destructive" | "outline" | "secondary" | "muted" | "success" | "warning" | "accent" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface BadgeProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> {
+}
+/**
+ * Badge Component
+ *
+ * A small status indicator with various semantic variants.
+ * Use for tags, labels, counts, or status indicators.
+ *
+ * @example
+ * <Badge>Default</Badge>
+ *
+ * @example
+ * <Badge variant="success">Active</Badge>
+ *
+ * @example
+ * <Badge variant="destructive">Error</Badge>
+ */
+declare function Badge({ className, variant, ...props }: BadgeProps): react_jsx_runtime.JSX.Element;
+
+interface CheckboxProps extends React$1.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> {
+    /**
+     * Whether to show a visible border around the checkbox.
+     * @default true
+     */
+    showBorder?: boolean;
+}
+/**
+ * Checkbox Component
+ *
+ * An accessible checkbox input built on Radix UI primitives.
+ * Supports controlled and uncontrolled modes.
+ *
+ * @example
+ * <Checkbox id="terms" />
+ * <Label htmlFor="terms">Accept terms</Label>
+ *
+ * @example
+ * <Checkbox checked={isChecked} onCheckedChange={setIsChecked} />
+ */
+declare const Checkbox: React$1.ForwardRefExoticComponent<CheckboxProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface SwitchProps extends React$1.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root> {
+}
+/**
+ * Switch Component
+ *
+ * A toggle switch for boolean on/off states.
+ * Accessible alternative to checkbox for settings.
+ *
+ * @example
+ * <Switch id="notifications" />
+ * <Label htmlFor="notifications">Enable notifications</Label>
+ *
+ * @example
+ * <Switch checked={isEnabled} onCheckedChange={setIsEnabled} />
+ */
+declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface ProgressProps extends React$1.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root> {
+}
+/**
+ * Progress Component
+ *
+ * A progress bar showing completion percentage.
+ * Use for loading states, file uploads, or task progress.
+ *
+ * @example
+ * <Progress value={50} />
+ *
+ * @example
+ * <Progress value={progress} className="w-[60%]" />
+ */
+declare const Progress: React$1.ForwardRefExoticComponent<ProgressProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface SeparatorProps extends React$1.ComponentPropsWithoutRef<typeof SeparatorPrimitive.Root> {
+}
+/**
+ * Separator Component
+ *
+ * A visual divider between content sections.
+ * Can be horizontal (default) or vertical.
+ *
+ * @example
+ * <div>Content above</div>
+ * <Separator />
+ * <div>Content below</div>
+ *
+ * @example
+ * <div className="flex items-center gap-4">
+ *   <span>Left</span>
+ *   <Separator orientation="vertical" className="h-4" />
+ *   <span>Right</span>
+ * </div>
+ */
+declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface SkeletonProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Skeleton Component
+ *
+ * A loading placeholder with shimmer animation.
+ * Use to indicate content that is loading.
+ *
+ * @example
+ * // Text placeholder
+ * <Skeleton className="h-4 w-[250px]" />
+ *
+ * @example
+ * // Avatar placeholder
+ * <Skeleton className="h-12 w-12 rounded-full" />
+ *
+ * @example
+ * // Card placeholder
+ * <div className="space-y-2">
+ *   <Skeleton className="h-4 w-[250px]" />
+ *   <Skeleton className="h-4 w-[200px]" />
+ * </div>
+ */
+declare function Skeleton({ className, ...props }: SkeletonProps): react_jsx_runtime.JSX.Element;
+
+declare const Select: React$1.FC<SelectPrimitive.SelectProps>;
+declare const SelectGroup: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectValue: React$1.ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & React$1.RefAttributes<HTMLSpanElement>>;
+interface SelectTriggerProps extends React$1.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger> {
+}
+declare const SelectTrigger: React$1.ForwardRefExoticComponent<SelectTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const SelectScrollUpButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollUpButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectScrollDownButton: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectScrollDownButtonProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectContent: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectLabel: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectLabelProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectItem: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const SelectSeparator: React$1.ForwardRefExoticComponent<Omit<SelectPrimitive.SelectSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Tabs Root
+ *
+ * Container for tabbed content. Controls which tab is active.
+ *
+ * @example
+ * <Tabs defaultValue="tab1">
+ *   <TabsList>
+ *     <TabsTrigger value="tab1">Tab 1</TabsTrigger>
+ *     <TabsTrigger value="tab2">Tab 2</TabsTrigger>
+ *   </TabsList>
+ *   <TabsContent value="tab1">Content 1</TabsContent>
+ *   <TabsContent value="tab2">Content 2</TabsContent>
+ * </Tabs>
+ */
+declare const Tabs: React$1.ForwardRefExoticComponent<TabsPrimitive.TabsProps & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * TabsList
+ *
+ * Container for tab triggers. Provides the tab header bar.
+ */
+declare const TabsList: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsListProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * TabsTrigger
+ *
+ * Individual tab button that activates its associated content.
+ */
+declare const TabsTrigger: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsTriggerProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * TabsContent
+ *
+ * Container for the content associated with a tab.
+ */
+declare const TabsContent: React$1.ForwardRefExoticComponent<Omit<TabsPrimitive.TabsContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * Accordion variant styles using class-variance-authority.
+ * Provides consistent accordion styling across the application.
+ */
+declare const accordionItemVariants: (props?: ({
+    variant?: "default" | "ghost" | "bordered" | "card" | "filled" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionTriggerVariants: (props?: ({
+    variant?: "default" | "ghost" | "bordered" | "card" | "filled" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare const accordionContentVariants: (props?: ({
+    variant?: "default" | "ghost" | "bordered" | "card" | "filled" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+/**
+ * Accordion Root
+ *
+ * Container for accordion items. Can be single or multiple mode.
+ *
+ * @example
+ * <Accordion type="single" collapsible>
+ *   <AccordionItem value="item-1">
+ *     <AccordionTrigger>Section 1</AccordionTrigger>
+ *     <AccordionContent>Content 1</AccordionContent>
+ *   </AccordionItem>
+ * </Accordion>
+ */
+declare const Accordion: React$1.ForwardRefExoticComponent<(AccordionPrimitive.AccordionSingleProps | AccordionPrimitive.AccordionMultipleProps) & React$1.RefAttributes<HTMLDivElement>>;
+type AccordionVariant = "default" | "bordered" | "card" | "filled" | "ghost";
+interface AccordionItemProps extends React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>, VariantProps<typeof accordionItemVariants> {
+}
+/**
+ * AccordionItem
+ *
+ * Individual accordion section containing a trigger and content.
+ * Supports variants: default, bordered, card, filled, ghost
+ */
+declare const AccordionItem: React$1.ForwardRefExoticComponent<AccordionItemProps & React$1.RefAttributes<HTMLDivElement>>;
+interface AccordionTriggerProps extends React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>, VariantProps<typeof accordionTriggerVariants> {
+}
+/**
+ * AccordionTrigger
+ *
+ * Button that toggles the accordion item open/closed.
+ * Includes animated chevron indicator.
+ * Supports variants: default, bordered, card, filled, ghost
+ */
+declare const AccordionTrigger: React$1.ForwardRefExoticComponent<AccordionTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+interface AccordionContentProps extends React$1.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>, VariantProps<typeof accordionContentVariants> {
+}
+/**
+ * AccordionContent
+ *
+ * Animated content area that expands/collapses.
+ * Supports variants: default, bordered, card, filled, ghost
+ */
+declare const AccordionContent: React$1.ForwardRefExoticComponent<AccordionContentProps & React$1.RefAttributes<HTMLDivElement>>;
+
+/**
+ * TooltipProvider - Wrap your app with this for shared tooltip delay behavior
+ */
+declare const TooltipProvider: React$1.FC<TooltipPrimitive.TooltipProviderProps>;
+/**
+ * TooltipRoot - The root component for controlled usage
+ */
+declare const TooltipRoot: React$1.FC<TooltipPrimitive.TooltipProps>;
+/**
+ * TooltipTrigger - The element that triggers the tooltip
+ */
+declare const TooltipTrigger: React$1.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * TooltipPortal - Portals the content to document.body
+ */
+declare const TooltipPortal: React$1.FC<TooltipPrimitive.TooltipPortalProps>;
+/**
+ * TooltipContent - The styled tooltip content
+ */
+declare const TooltipContent: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+/**
+ * TooltipArrow - Optional arrow pointing to the trigger
+ */
+declare const TooltipArrow: React$1.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipArrowProps & React$1.RefAttributes<SVGSVGElement>, "ref"> & React$1.RefAttributes<SVGSVGElement>>;
+interface TooltipProps {
+    /**
+     * Tooltip content - can be string or ReactNode for rich content
+     */
+    content: React$1.ReactNode;
+    /**
+     * Element to wrap with tooltip
+     */
+    children: React$1.ReactElement;
+    /**
+     * Position of the tooltip relative to the trigger
+     * @default "top"
+     */
+    position?: "top" | "bottom" | "left" | "right";
+    /**
+     * Delay before showing tooltip (in milliseconds)
+     * @default 200
+     */
+    delayDuration?: number;
+    /**
+     * Offset from the trigger element (in pixels)
+     * @default 6
+     */
+    sideOffset?: number;
+    /**
+     * Maximum width of the tooltip
+     * @default 250
+     */
+    maxWidth?: number;
+    /**
+     * Whether the tooltip is disabled
+     * @default false
+     */
+    disabled?: boolean;
+    /**
+     * Additional class names for the tooltip content
+     */
+    className?: string;
+}
+/**
+ * Tooltip component
+ *
+ * Simple wrapper around Radix Tooltip for ease of use.
+ * Renders in a portal so it's never clipped by containers.
+ *
+ * @example
+ * <Tooltip content="Hello world">
+ *   <button>Hover me</button>
+ * </Tooltip>
+ *
+ * @example
+ * <Tooltip content="Click to save" position="bottom" delayDuration={0}>
+ *   <button>Save</button>
+ * </Tooltip>
+ */
+declare function Tooltip({ content, children, position, delayDuration, sideOffset, maxWidth, disabled, className, }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Popover - Root component for popover behavior
+ */
+declare const Popover: React$1.FC<PopoverPrimitive.PopoverProps>;
+/**
+ * PopoverTrigger - Element that triggers the popover
+ */
+declare const PopoverTrigger: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+/**
+ * PopoverAnchor - Custom anchor element for positioning
+ */
+declare const PopoverAnchor: React$1.ForwardRefExoticComponent<PopoverPrimitive.PopoverAnchorProps & React$1.RefAttributes<HTMLDivElement>>;
+interface PopoverContentProps extends React$1.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content> {
+}
+/**
+ * PopoverContent - The popover content panel
+ *
+ * @example
+ * <Popover>
+ *   <PopoverTrigger asChild>
+ *     <Button>Open</Button>
+ *   </PopoverTrigger>
+ *   <PopoverContent>
+ *     <p>Popover content here</p>
+ *   </PopoverContent>
+ * </Popover>
+ */
+declare const PopoverContent: React$1.ForwardRefExoticComponent<PopoverContentProps & React$1.RefAttributes<HTMLDivElement>>;
+
+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>>;
+interface DropdownMenuSubTriggerProps extends React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> {
+    inset?: boolean;
+}
+declare const DropdownMenuSubTrigger: React$1.ForwardRefExoticComponent<DropdownMenuSubTriggerProps & 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>>;
+interface DropdownMenuItemProps extends React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> {
+    inset?: boolean;
+    destructive?: boolean;
+}
+declare const DropdownMenuItem: React$1.ForwardRefExoticComponent<DropdownMenuItemProps & 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>>;
+interface DropdownMenuLabelProps extends React$1.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> {
+    inset?: boolean;
+}
+declare const DropdownMenuLabel: React$1.ForwardRefExoticComponent<DropdownMenuLabelProps & React$1.RefAttributes<HTMLDivElement>>;
+declare const DropdownMenuSeparator: React$1.ForwardRefExoticComponent<Omit<DropdownMenuPrimitive.DropdownMenuSeparatorProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface DropdownMenuShortcutProps extends React$1.HTMLAttributes<HTMLSpanElement> {
+}
+declare const DropdownMenuShortcut: {
+    ({ className, ...props }: DropdownMenuShortcutProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+
+declare const AlertDialog: React$1.FC<AlertDialogPrimitive.AlertDialogProps>;
+declare const AlertDialogTrigger: React$1.ForwardRefExoticComponent<AlertDialogPrimitive.AlertDialogTriggerProps & React$1.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogPortal: React$1.FC<AlertDialogPrimitive.AlertDialogPortalProps>;
+declare const AlertDialogOverlay: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogOverlayProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+declare const AlertDialogContent: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogContentProps & React$1.RefAttributes<HTMLDivElement>, "ref"> & React$1.RefAttributes<HTMLDivElement>>;
+interface AlertDialogHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const AlertDialogHeader: {
+    ({ className, ...props }: AlertDialogHeaderProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+interface AlertDialogFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const AlertDialogFooter: {
+    ({ className, ...props }: AlertDialogFooterProps): react_jsx_runtime.JSX.Element;
+    displayName: string;
+};
+declare const AlertDialogTitle: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogTitleProps & React$1.RefAttributes<HTMLHeadingElement>, "ref"> & React$1.RefAttributes<HTMLHeadingElement>>;
+declare const AlertDialogDescription: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogDescriptionProps & React$1.RefAttributes<HTMLParagraphElement>, "ref"> & React$1.RefAttributes<HTMLParagraphElement>>;
+declare const AlertDialogAction: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogActionProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const AlertDialogCancel: React$1.ForwardRefExoticComponent<Omit<AlertDialogPrimitive.AlertDialogCancelProps & React$1.RefAttributes<HTMLButtonElement>, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface CardProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+/**
+ * Card - Container component for grouped content
+ */
+declare const Card: React$1.ForwardRefExoticComponent<CardProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CardHeaderProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardHeader: React$1.ForwardRefExoticComponent<CardHeaderProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CardTitleProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardTitle: React$1.ForwardRefExoticComponent<CardTitleProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CardDescriptionProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardDescription: React$1.ForwardRefExoticComponent<CardDescriptionProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CardContentProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardContent: React$1.ForwardRefExoticComponent<CardContentProps & React$1.RefAttributes<HTMLDivElement>>;
+interface CardFooterProps extends React$1.HTMLAttributes<HTMLDivElement> {
+}
+declare const CardFooter: React$1.ForwardRefExoticComponent<CardFooterProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface TableProps extends React$1.HTMLAttributes<HTMLTableElement> {
+}
+declare const Table: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<HTMLTableElement>>;
+interface TableHeaderProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const TableHeader: React$1.ForwardRefExoticComponent<TableHeaderProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+interface TableBodyProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const TableBody: React$1.ForwardRefExoticComponent<TableBodyProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+interface TableFooterProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
+}
+declare const TableFooter: React$1.ForwardRefExoticComponent<TableFooterProps & React$1.RefAttributes<HTMLTableSectionElement>>;
+interface TableRowProps extends React$1.HTMLAttributes<HTMLTableRowElement> {
+}
+declare const TableRow: React$1.ForwardRefExoticComponent<TableRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
+interface TableHeadProps extends React$1.ThHTMLAttributes<HTMLTableCellElement> {
+}
+declare const TableHead: React$1.ForwardRefExoticComponent<TableHeadProps & React$1.RefAttributes<HTMLTableCellElement>>;
+interface TableCellProps extends React$1.TdHTMLAttributes<HTMLTableCellElement> {
+}
+declare const TableCell: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
+interface TableCaptionProps extends React$1.HTMLAttributes<HTMLTableCaptionElement> {
+}
+declare const TableCaption: React$1.ForwardRefExoticComponent<TableCaptionProps & React$1.RefAttributes<HTMLTableCaptionElement>>;
+
+interface ModalProps {
+    /**
+     * Whether the modal is open
+     */
+    isOpen: boolean;
+    /**
+     * Callback when modal should close
+     */
+    onClose: () => void;
+    /**
+     * Modal title
+     */
+    title: string;
+    /**
+     * Modal content
+     */
+    children: React$1.ReactNode;
+    /**
+     * Footer content (buttons, actions, etc.)
+     */
+    footer?: React$1.ReactNode;
+    /**
+     * Size variant
+     */
+    size?: "sm" | "md" | "lg";
+    /**
+     * Z-index for stacking modals (default: 50)
+     */
+    zIndex?: number;
+    /**
+     * Additional class names for modal content
+     */
+    className?: string;
+}
+/**
+ * Modal component
+ *
+ * Extensible modal base for dialogs, confirmations, and forms.
+ * Features:
+ * - Backdrop overlay
+ * - Escape key to close
+ * - Click outside to close
+ * - Customizable footer with action buttons
+ * - Multiple size variants
+ *
+ * @example
+ * <Modal isOpen={open} onClose={() => setOpen(false)} title="Confirm">
+ *   <p>Are you sure?</p>
+ *   <footer slot="footer">
+ *     <Button onClick={() => setOpen(false)}>Cancel</Button>
+ *     <Button variant="primary" onClick={handleConfirm}>Confirm</Button>
+ *   </footer>
+ * </Modal>
+ */
+declare function Modal({ isOpen, onClose, title, children, footer, size, zIndex, className, }: ModalProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * ModalButton component
+ * @deprecated Use Button component from @optilogic/core instead
+ *
+ * Wrapper around Button for backward compatibility
+ */
+interface ModalButtonProps {
+    /**
+     * Button label
+     */
+    label: string;
+    /**
+     * Click handler
+     */
+    onClick: () => void;
+    /**
+     * Button variant
+     */
+    variant?: "default" | "primary" | "destructive";
+    /**
+     * Whether the button is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+declare function ModalButton({ label, onClick, variant, disabled, className, }: ModalButtonProps): react_jsx_runtime.JSX.Element;
+
+interface ConfirmationModalProps {
+    /** Whether the modal is open */
+    open: boolean;
+    /** Callback when open state changes */
+    onOpenChange: (open: boolean) => void;
+    /** Title of the confirmation dialog */
+    title: string;
+    /** Description/message to display */
+    description: string;
+    /** Label for the confirm button */
+    confirmLabel?: string;
+    /** Label for the cancel button */
+    cancelLabel?: string;
+    /** Whether this is a destructive action (styles confirm button as destructive) */
+    destructive?: boolean;
+    /** Callback when confirmed */
+    onConfirm: () => void;
+    /** Callback when cancelled (optional, defaults to closing) */
+    onCancel?: () => void;
+}
+/**
+ * ConfirmationModal
+ *
+ * A simple yes/no confirmation dialog built on AlertDialog.
+ * Use for actions that need user confirmation before proceeding.
+ *
+ * @example
+ * <ConfirmationModal
+ *   open={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   title="Delete Item"
+ *   description="Are you sure you want to delete this item?"
+ *   destructive
+ *   onConfirm={handleDelete}
+ * />
+ */
+declare function ConfirmationModal({ open, onOpenChange, title, description, confirmLabel, cancelLabel, destructive, onConfirm, onCancel, }: ConfirmationModalProps): react_jsx_runtime.JSX.Element;
+/**
+ * useConfirmation Hook
+ *
+ * A hook that provides imperative confirmation dialogs.
+ * Returns a confirm function that shows a dialog and returns a promise.
+ *
+ * @example
+ * const { confirm, ConfirmationDialog } = useConfirmation();
+ *
+ * const handleDelete = async () => {
+ *   const confirmed = await confirm({
+ *     title: "Delete Item",
+ *     description: "Are you sure you want to delete this item?",
+ *     destructive: true,
+ *   });
+ *   if (confirmed) {
+ *     // perform delete
+ *   }
+ * };
+ *
+ * return (
+ *   <>
+ *     <button onClick={handleDelete}>Delete</button>
+ *     {ConfirmationDialog}
+ *   </>
+ * );
+ */
+declare function useConfirmation(): {
+    confirm: (options: {
+        title: string;
+        description: string;
+        confirmLabel?: string;
+        cancelLabel?: string;
+        destructive?: boolean;
+    }) => Promise<boolean>;
+    ConfirmationDialog: react_jsx_runtime.JSX.Element;
+};
+
+interface ResizeHandleProps {
+    /**
+     * Orientation of the resize handle
+     */
+    orientation: "left" | "right";
+    /**
+     * Whether the handle is resizable (draggable)
+     */
+    resizable?: boolean;
+    /**
+     * Show/hide the handle UI
+     */
+    showHandle?: boolean;
+    /**
+     * Callback when drag starts
+     */
+    onDragStart?: () => void;
+    /**
+     * Callback during drag; receives pixel delta
+     */
+    onDrag?: (deltaX: number) => void;
+    /**
+     * Callback when drag ends
+     */
+    onDragEnd?: () => void;
+    /**
+     * Callback for keyboard resize (arrow keys)
+     */
+    onKeyboardResize?: (direction: 1 | -1) => void;
+    /**
+     * ARIA label for accessibility
+     */
+    ariaLabel?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * ResizeHandle component
+ *
+ * A draggable handle for resizing panels with full keyboard and mouse support.
+ * Includes visual feedback, accessibility features, and smooth interactions.
+ */
+declare function ResizeHandle({ orientation, resizable, showHandle, onDragStart, onDrag, onDragEnd, onKeyboardResize, ariaLabel, className, }: ResizeHandleProps): react_jsx_runtime.JSX.Element | null;
+
+interface ResizablePanelProps {
+    /**
+     * Which edge the panel anchors to
+     */
+    orientation: "left" | "right";
+    /**
+     * Default collapsed width in vw
+     */
+    collapsedSizeVW: number;
+    /**
+     * Current expanded width in vw (controlled prop)
+     */
+    expandedWidthVW?: number;
+    /**
+     * Minimum width in vw
+     */
+    minWidthVW?: number;
+    /**
+     * Maximum width in vw
+     */
+    maxWidthVW?: number;
+    /**
+     * Whether the panel is expanded (drawer) vs collapsed
+     */
+    isExpanded: boolean;
+    /**
+     * Whether the panel is in overlay mode
+     */
+    isOverlay?: boolean;
+    /**
+     * When in overlay mode, the outer panel width in vw
+     */
+    outerWidthVW?: number;
+    /**
+     * When in overlay mode, the inner panel width in vw
+     */
+    innerWidthVW?: number;
+    /**
+     * Current left panel width in vw (needed for overlay positioning and dynamic constraints)
+     */
+    leftWidthVW?: number;
+    /**
+     * Whether the panel is resizable
+     */
+    resizable?: boolean;
+    /**
+     * Show/hide the resize handle
+     */
+    showHandle?: boolean;
+    /**
+     * Callback during resize; emits clamped value in vw
+     */
+    onResize?: (widthVW: number) => void;
+    /**
+     * Callback for collapse/expand toggle
+     */
+    onToggle?: (next: boolean) => void;
+    /**
+     * Callback to promote to overlay mode
+     */
+    onPromoteToOverlay?: () => void;
+    /**
+     * Callback to demote from overlay mode
+     */
+    onDemoteFromOverlay?: () => void;
+    /**
+     * Callback when resizing the overlay outer/inner split
+     */
+    onResizeOverlay?: (outerWidthVW: number) => void;
+    /**
+     * ARIA label for the resize handle
+     */
+    handleAriaLabel?: string;
+    /**
+     * Optional header slot
+     */
+    slotHeader?: React$1.ReactNode;
+    /**
+     * Optional footer slot
+     */
+    slotFooter?: React$1.ReactNode;
+    /**
+     * Optional inner panel content (for overlay mode)
+     */
+    innerPanelContent?: React$1.ReactNode;
+    /**
+     * Panel content
+     */
+    children: React$1.ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Data attributes for styling/state
+     */
+    dataAttributes?: Record<string, string>;
+}
+/**
+ * ResizablePanel component
+ *
+ * A generic, framework-agnostic panel that can collapse, expand, resize,
+ * and promote to overlay mode. Backs both left (search) and right (preview) panels.
+ */
+declare function ResizablePanel({ orientation, collapsedSizeVW, expandedWidthVW, minWidthVW, maxWidthVW, isExpanded, isOverlay, outerWidthVW, innerWidthVW, leftWidthVW, resizable, showHandle, onResize, onToggle: _onToggle, onPromoteToOverlay: _onPromoteToOverlay, onDemoteFromOverlay, onResizeOverlay, handleAriaLabel, slotHeader, slotFooter, innerPanelContent, children, className, dataAttributes, }: ResizablePanelProps): react_jsx_runtime.JSX.Element;
+
+interface ChipProps {
+    /**
+     * Chip label text
+     */
+    label: string;
+    /**
+     * Click handler
+     */
+    onClick?: () => void;
+    /**
+     * Whether the chip is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * Chip component
+ *
+ * A clickable pill-shaped component for tags, filters, or suggested actions.
+ * Uses the theme chip colors.
+ *
+ * @example
+ * <Chip label="React" onClick={() => console.log('clicked')} />
+ *
+ * @example
+ * <Chip label="Disabled" disabled />
+ */
+declare function Chip({ label, onClick, disabled, className, }: ChipProps): react_jsx_runtime.JSX.Element;
+
+declare const loadingSpinnerVariants: (props?: ({
+    size?: "default" | "sm" | "lg" | "xl" | null | undefined;
+    variant?: "default" | "inherit" | "muted" | "accent" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface LoadingSpinnerProps extends React$1.HTMLAttributes<HTMLDivElement>, VariantProps<typeof loadingSpinnerVariants> {
+    /**
+     * Optional label shown below the spinner
+     */
+    label?: string;
+    /**
+     * Show animated dots after the label
+     */
+    showDots?: boolean;
+}
+/**
+ * LoadingSpinner Component
+ *
+ * A circular loading spinner with size and color variants.
+ *
+ * @example
+ * // Basic spinner
+ * <LoadingSpinner />
+ *
+ * @example
+ * // Large spinner with label
+ * <LoadingSpinner size="lg" label="Loading..." />
+ *
+ * @example
+ * // Small accent spinner
+ * <LoadingSpinner size="sm" variant="accent" />
+ *
+ * @example
+ * // Inherit parent text color
+ * <LoadingSpinner variant="inherit" />
+ */
+declare const LoadingSpinner: React$1.ForwardRefExoticComponent<LoadingSpinnerProps & React$1.RefAttributes<HTMLDivElement>>;
+
+interface ToasterProps {
+    /**
+     * Position of the toaster
+     * @default "top-right"
+     */
+    position?: "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+    /**
+     * Whether to expand toasts on hover
+     * @default false
+     */
+    expand?: boolean;
+    /**
+     * Whether to use rich colors
+     * @default true
+     */
+    richColors?: boolean;
+    /**
+     * Whether to show close button
+     * @default true
+     */
+    closeButton?: boolean;
+    /**
+     * Theme mode
+     * @default "system"
+     */
+    theme?: "light" | "dark" | "system";
+}
+/**
+ * Toaster component using Sonner
+ *
+ * Provides toast notifications throughout the app.
+ * Add this component once at the root of your app.
+ *
+ * Usage:
+ *   import { toast } from "sonner";
+ *   toast.success("Success!");
+ *   toast.error("Error!");
+ *   toast.info("Info!");
+ *   toast.warning("Warning!");
+ *
+ * @example
+ * // In your app root
+ * <Toaster />
+ *
+ * // Then anywhere in your app
+ * toast.success("Saved successfully!");
+ */
+declare function Toaster({ position, expand, richColors, closeButton, theme, }?: ToasterProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * DataGrid Types
+ *
+ * Enhanced type definitions for the DataGrid component with support for
+ * resizable columns, filtering, sorting, cell editing, and keyboard navigation.
+ */
+
+/**
+ * Filter operators for different filter types
+ */
+type TextFilterOperator = "contains" | "notContains" | "equals" | "notEquals" | "startsWith" | "endsWith" | "isEmpty" | "isNotEmpty";
+type NumberFilterOperator = "equals" | "notEquals" | "gt" | "gte" | "lt" | "lte" | "between" | "isEmpty" | "isNotEmpty";
+type DateFilterOperator = "equals" | "notEquals" | "before" | "after" | "between" | "isEmpty" | "isNotEmpty";
+type FilterOperator = TextFilterOperator | NumberFilterOperator | DateFilterOperator;
+/**
+ * Filter type options
+ */
+type FilterType = "text" | "number" | "date" | "select" | "boolean";
+/**
+ * Editor type options
+ */
+type EditorType = "text" | "number" | "date" | "select" | "boolean";
+/**
+ * Option for select-type filters and editors
+ */
+interface SelectOption {
+    value: string;
+    label: string;
+}
+/**
+ * Represents possible cell values in the DataGrid.
+ * Used for filter values, editing values, and cell accessors.
+ */
+type CellValue = string | number | boolean | Date | null | undefined;
+/**
+ * Filter value type - includes array for multi-select filters
+ */
+type FilterValue = CellValue | CellValue[];
+/**
+ * Filter configuration for a single column
+ */
+interface FilterConfig {
+    /** Column key this filter applies to */
+    columnKey: string;
+    /** Filter operator */
+    operator: FilterOperator;
+    /** Filter value */
+    value: FilterValue;
+    /** Secondary value for 'between' operator */
+    valueTo?: FilterValue;
+}
+/**
+ * Sort configuration for a single column
+ */
+interface SortConfig {
+    /** Column key to sort by */
+    field: string;
+    /** Sort direction */
+    direction: "asc" | "desc";
+}
+/**
+ * Focused cell position
+ */
+interface CellPosition {
+    /** Row index */
+    rowIndex: number;
+    /** Column key */
+    columnKey: string;
+}
+/**
+ * Cell editing state
+ */
+interface EditingCell extends CellPosition {
+    /** Current editing value */
+    value: CellValue;
+    /** Original value before editing */
+    originalValue: CellValue;
+}
+/**
+ * Column definition for the grid
+ */
+interface ColumnDef<T = Record<string, CellValue>> {
+    /** Unique key for the column */
+    key: string;
+    /** Column header (can be string or React node) */
+    header: string | React$1.ReactNode;
+    /** Column width (number for px) */
+    width?: number;
+    /** Minimum column width when resizing */
+    minWidth?: number;
+    /** Maximum column width when resizing */
+    maxWidth?: number;
+    /** Custom cell renderer */
+    cell?: (row: T, rowIndex: number) => React$1.ReactNode;
+    /** Accessor function to get cell value (defaults to row[key]) */
+    accessor?: (row: T) => CellValue;
+    /** Whether this column is sortable */
+    sortable?: boolean;
+    /** Custom sort comparator function */
+    sortComparator?: (a: T, b: T) => number;
+    /** Whether this column is resizable (overrides global setting) */
+    resizable?: boolean;
+    /** Whether this column is filterable */
+    filterable?: boolean;
+    /** Filter type for this column */
+    filterType?: FilterType;
+    /** Options for select-type filters */
+    filterOptions?: SelectOption[];
+    /** Custom filter function for uncontrolled filtering */
+    filterFn?: (row: T, filterValue: FilterValue, operator: FilterOperator) => boolean;
+    /** Whether this column is editable */
+    editable?: boolean;
+    /** Editor type for this column */
+    editorType?: EditorType;
+    /** Options for select-type editors */
+    editorOptions?: SelectOption[];
+    /** Validator function - returns true if valid, or error message string */
+    validator?: (value: CellValue, row: T) => boolean | string;
+    /** Whether column is hidden */
+    hidden?: boolean;
+    /** Pin column to left or right */
+    pinned?: "left" | "right";
+    /** Text alignment */
+    align?: "left" | "center" | "right";
+}
+/**
+ * Pagination configuration
+ */
+interface PaginationConfig {
+    /** Current page (0-indexed) */
+    currentPage: number;
+    /** Number of rows per page */
+    pageSize: number;
+    /** Total number of pages */
+    totalPages: number;
+    /** Total number of items */
+    totalItems?: number;
+    /** Callback when page changes */
+    onPageChange: (page: number) => void;
+    /** Callback when page size changes */
+    onPageSizeChange: (size: number) => void;
+    /** Available page size options */
+    pageSizeOptions?: number[];
+    /** Show "go to page" input */
+    showGoToPage?: boolean;
+}
+/**
+ * Search configuration (global search)
+ */
+interface SearchConfig {
+    /** Current search query */
+    searchQuery: string;
+    /** Callback when search query changes */
+    onSearchChange: (query: string) => void;
+    /** Search input placeholder */
+    placeholder?: string;
+}
+/**
+ * Complete grid state for controlled/uncontrolled modes
+ */
+interface DataGridState {
+    /** Current sorting configuration */
+    sorting?: SortConfig[];
+    /** Current filter configuration */
+    filters?: FilterConfig[];
+    /** Current column widths */
+    columnWidths?: Record<string, number>;
+    /** Hidden column keys */
+    hiddenColumns?: string[];
+    /** Current pagination state (for uncontrolled mode) */
+    pagination?: {
+        page: number;
+        pageSize: number;
+    };
+    /** Currently focused cell */
+    focusedCell?: CellPosition | null;
+    /** Currently editing cell */
+    editingCell?: EditingCell | null;
+}
+/**
+ * Callback for cell edit events
+ */
+interface CellEditEvent<T = Record<string, CellValue>> {
+    /** Row index */
+    rowIndex: number;
+    /** Column key */
+    columnKey: string;
+    /** New value */
+    newValue: CellValue;
+    /** Original value */
+    oldValue: CellValue;
+    /** The row data */
+    row: T;
+}
+/**
+ * DataGrid props
+ */
+interface DataGridProps<T = Record<string, CellValue>> {
+    /** Data to display in the grid */
+    data: T[];
+    /** Column definitions */
+    columns: ColumnDef<T>[];
+    /** Key accessor for row identification */
+    getRowKey?: (row: T, index: number) => string;
+    /** Enable column resizing globally (default: false) */
+    resizableColumns?: boolean;
+    /** Enable virtualization for large datasets (default: true if data.length > 100) */
+    virtualized?: boolean;
+    /** Make header sticky (default: true) */
+    stickyHeader?: boolean;
+    /** Enable hover tooltips for long content (default: true) */
+    showTooltips?: boolean;
+    /** Minimum cell content length to show tooltip (default: 30) */
+    tooltipMinLength?: number;
+    /** Show column dividing borders between cells (default: true) */
+    showColumnBorders?: boolean;
+    /** Enable internal sorting when in uncontrolled mode (default: true) */
+    enableInternalSorting?: boolean;
+    /** Enable internal filtering when in uncontrolled mode (default: true) */
+    enableInternalFiltering?: boolean;
+    /** Current sorting configuration */
+    sorting?: SortConfig[];
+    /** Callback when sorting changes */
+    onSortChange?: (sorting: SortConfig[]) => void;
+    /** Current filter configuration */
+    filters?: FilterConfig[];
+    /** Callback when filters change */
+    onFilterChange?: (filters: FilterConfig[]) => void;
+    /** Current column widths */
+    columnWidths?: Record<string, number>;
+    /** Callback when a column is resized */
+    onColumnResize?: (columnKey: string, width: number) => void;
+    /** Callback when column resize starts */
+    onColumnResizeStart?: (columnKey: string) => void;
+    /** Callback when column resize ends */
+    onColumnResizeEnd?: (columnKey: string, width: number) => void;
+    /** Default sorting for uncontrolled mode */
+    defaultSorting?: SortConfig[];
+    /** Default filters for uncontrolled mode */
+    defaultFilters?: FilterConfig[];
+    /** Default column widths for uncontrolled mode */
+    defaultColumnWidths?: Record<string, number>;
+    /** Callback when any internal state changes (for uncontrolled mode) */
+    onStateChange?: (state: DataGridState) => void;
+    /** Row click handler */
+    onRowClick?: (row: T, rowIndex: number) => void;
+    /** Row double-click handler */
+    onRowDoubleClick?: (row: T, rowIndex: number) => void;
+    /** Selected row keys/ids */
+    selectedRows?: string[];
+    /** Callback when row selection changes */
+    onSelectedRowsChange?: (selectedKeys: string[]) => void;
+    /** Row class name function */
+    rowClassName?: (row: T, rowIndex: number) => string;
+    /** Cell edit handler - called when cell value changes */
+    onCellEdit?: (rowIndex: number, columnKey: string, newValue: CellValue, oldValue: CellValue) => void;
+    /** Callback before cell edit starts - return false to prevent */
+    onCellEditStart?: (rowIndex: number, columnKey: string) => boolean | void;
+    /** Callback when cell edit is cancelled */
+    onCellEditCancel?: (rowIndex: number, columnKey: string) => void;
+    /** Currently focused cell (controlled) */
+    focusedCell?: CellPosition | null;
+    /** Callback when focused cell changes */
+    onFocusedCellChange?: (cell: CellPosition | null) => void;
+    /** Enable keyboard navigation (default: true) */
+    enableKeyboardNavigation?: boolean;
+    /** Pagination configuration */
+    pagination?: PaginationConfig;
+    /** Search configuration */
+    search?: SearchConfig;
+    /** Loading state */
+    loading?: boolean;
+    /** Custom loading component */
+    loadingComponent?: React$1.ReactNode;
+    /** Empty state message */
+    emptyMessage?: string;
+    /** Custom empty state component */
+    emptyComponent?: React$1.ReactNode;
+    /** Additional class name for container */
+    className?: string;
+    /** Additional class name for table */
+    tableClassName?: string;
+    /** Enable infinite scroll mode */
+    infiniteScroll?: boolean;
+    /** Callback when more data should be loaded */
+    onLoadMore?: () => void;
+    /** Whether more data is available */
+    hasMore?: boolean;
+    /** Whether currently loading more data */
+    loadingMore?: boolean;
+}
+/**
+ * Internal state for the DataGrid
+ */
+interface DataGridInternalState {
+    sorting: SortConfig[];
+    filters: FilterConfig[];
+    columnWidths: Record<string, number>;
+    focusedCell: CellPosition | null;
+    editingCell: EditingCell | null;
+}
+/**
+ * Context for DataGrid sub-components
+ */
+interface DataGridContextValue<T = Record<string, CellValue>> {
+    data: T[];
+    columns: ColumnDef<T>[];
+    getRowKey: (row: T, index: number) => string;
+    state: DataGridInternalState;
+    setFocusedCell: (cell: CellPosition | null) => void;
+    startEditing: (rowIndex: number, columnKey: string) => void;
+    commitEdit: (value: CellValue) => void;
+    cancelEdit: () => void;
+    updateColumnWidth: (columnKey: string, width: number) => void;
+    updateSorting: (sorting: SortConfig[]) => void;
+    updateFilters: (filters: FilterConfig[]) => void;
+    resizableColumns: boolean;
+    enableKeyboardNavigation: boolean;
+}
+/**
+ * Props for HeaderCell component
+ */
+interface HeaderCellProps$1<T = Record<string, CellValue>> {
+    column: ColumnDef<T>;
+    columnIndex: number;
+    width: number;
+    sorting?: SortConfig;
+    filter?: FilterConfig;
+    isResizable: boolean;
+    onSort?: () => void;
+    onFilterChange?: (filter: FilterConfig | null) => void;
+    onResize?: (width: number) => void;
+    onResizeStart?: () => void;
+    onResizeEnd?: (width: number) => void;
+}
+/**
+ * Props for FilterPopover component
+ */
+interface FilterPopoverProps$1 {
+    column: ColumnDef;
+    filter?: FilterConfig;
+    onFilterChange: (filter: FilterConfig | null) => void;
+}
+/**
+ * Props for CellEditor component
+ */
+interface CellEditorProps$1<T = Record<string, CellValue>> {
+    column: ColumnDef<T>;
+    value: CellValue;
+    row: T;
+    rowIndex: number;
+    onCommit: (value: CellValue) => void;
+    onCancel: () => void;
+}
+/**
+ * Props for GridCell component
+ */
+interface GridCellProps<T = Record<string, CellValue>> {
+    column: ColumnDef<T>;
+    row: T;
+    rowIndex: number;
+    columnIndex: number;
+    width: number;
+    isEditing: boolean;
+    isFocused: boolean;
+    onStartEdit: () => void;
+    onCommitEdit: (value: CellValue) => void;
+    onCancelEdit: () => void;
+    onFocus: () => void;
+}
+
+/**
+ * DataGrid Component
+ */
+declare function DataGrid<T = Record<string, CellValue>>({ data, columns, getRowKey, resizableColumns, virtualized, stickyHeader, showTooltips, tooltipMinLength, enableKeyboardNavigation, showColumnBorders, enableInternalSorting, enableInternalFiltering, sorting: controlledSorting, onSortChange, filters: controlledFilters, onFilterChange, columnWidths: controlledColumnWidths, onColumnResize, onColumnResizeStart, onColumnResizeEnd, defaultSorting, defaultFilters, defaultColumnWidths, onStateChange, onRowClick, onRowDoubleClick, selectedRows, onSelectedRowsChange, rowClassName, onCellEdit, onCellEditStart, onCellEditCancel, focusedCell: controlledFocusedCell, onFocusedCellChange, pagination, search, loading, loadingComponent, emptyMessage, emptyComponent, className, tableClassName, infiniteScroll, onLoadMore, hasMore, loadingMore, }: DataGridProps<T>): react_jsx_runtime.JSX.Element;
+
+interface HeaderCellProps<T = any> {
+    /** Column definition */
+    column: ColumnDef<T>;
+    /** Column index */
+    columnIndex: number;
+    /** Current width of the column */
+    width: number;
+    /** Current sort config for this column (if sorted) */
+    sorting?: SortConfig;
+    /** Current filter config for this column (if filtered) */
+    filter?: FilterConfig;
+    /** Whether this column is resizable */
+    isResizable: boolean;
+    /** Callback when sort is toggled */
+    onSort?: () => void;
+    /** Callback when filter changes */
+    onFilterChange?: (filter: FilterConfig | null) => void;
+    /** Resize handle mouse down handler */
+    onResizeMouseDown?: (event: React$1.MouseEvent) => void;
+    /** Resize handle double click handler */
+    onResizeDoubleClick?: (event: React$1.MouseEvent) => void;
+    /** Whether currently resizing this column */
+    isResizing?: boolean;
+}
+/**
+ * HeaderCell Component
+ */
+declare function HeaderCell<T = any>({ column, columnIndex, width, sorting, filter, isResizable, onSort, onFilterChange, onResizeMouseDown, onResizeDoubleClick, isResizing, }: HeaderCellProps<T>): react_jsx_runtime.JSX.Element;
+
+interface FilterPopoverProps<T = Record<string, CellValue>> {
+    /** Column definition */
+    column: ColumnDef<T>;
+    /** Current filter value */
+    filter?: FilterConfig;
+    /** Callback when filter changes */
+    onFilterChange: (filter: FilterConfig | null) => void;
+}
+/**
+ * FilterPopover Component
+ */
+declare function FilterPopover<T = Record<string, CellValue>>({ column, filter, onFilterChange, }: FilterPopoverProps<T>): react_jsx_runtime.JSX.Element;
+
+interface CellEditorProps<T = Record<string, CellValue>> {
+    /** Column definition */
+    column: ColumnDef<T>;
+    /** Current value being edited */
+    value: CellValue;
+    /** The row data */
+    row: T;
+    /** Row index */
+    rowIndex: number;
+    /** Callback to commit the edit */
+    onCommit: (value: CellValue) => void;
+    /** Callback to cancel the edit */
+    onCancel: () => void;
+    /** Callback when value changes (for controlled updates) */
+    onChange?: (value: CellValue) => void;
+    /** Additional class name */
+    className?: string;
+}
+declare function CellEditor<T = Record<string, CellValue>>({ column, value, row, rowIndex, onCommit, onCancel, onChange, className, }: CellEditorProps<T>): react_jsx_runtime.JSX.Element;
+
+/**
+ * useDataGridState Hook
+ *
+ * Manages internal state for the DataGrid component, supporting both
+ * controlled and uncontrolled modes for sorting, filtering, column widths,
+ * cell focus, and cell editing.
+ */
+
+interface UseDataGridStateOptions<T = Record<string, CellValue>> {
+    sorting?: SortConfig[];
+    filters?: FilterConfig[];
+    columnWidths?: Record<string, number>;
+    focusedCell?: CellPosition | null;
+    defaultSorting?: SortConfig[];
+    defaultFilters?: FilterConfig[];
+    defaultColumnWidths?: Record<string, number>;
+    onSortChange?: (sorting: SortConfig[]) => void;
+    onFilterChange?: (filters: FilterConfig[]) => void;
+    onColumnResize?: (columnKey: string, width: number) => void;
+    onFocusedCellChange?: (cell: CellPosition | null) => void;
+    onStateChange?: (state: DataGridState) => void;
+    onCellEdit?: (rowIndex: number, columnKey: string, newValue: CellValue, oldValue: CellValue) => void;
+    onCellEditStart?: (rowIndex: number, columnKey: string) => boolean | void;
+    onCellEditCancel?: (rowIndex: number, columnKey: string) => void;
+    columns: ColumnDef<T>[];
+    data: T[];
+    getCellValue: (row: T, column: ColumnDef<T>) => CellValue;
+}
+interface UseDataGridStateReturn {
+    state: DataGridInternalState;
+    actions: {
+        setSorting: (sorting: SortConfig[]) => void;
+        toggleSort: (columnKey: string) => void;
+        setFilters: (filters: FilterConfig[]) => void;
+        setFilter: (filter: FilterConfig | null, columnKey: string) => void;
+        clearFilters: () => void;
+        setColumnWidth: (columnKey: string, width: number) => void;
+        setFocusedCell: (cell: CellPosition | null) => void;
+        startEditing: (rowIndex: number, columnKey: string) => void;
+        updateEditingValue: (value: CellValue) => void;
+        /** Commit the current edit. Optionally pass a value to commit immediately (for async editors like checkbox/date) */
+        commitEdit: (value?: CellValue) => void;
+        cancelEdit: () => void;
+    };
+    isControlled: {
+        sorting: boolean;
+        filters: boolean;
+        columnWidths: boolean;
+        focusedCell: boolean;
+    };
+}
+/**
+ * Hook to manage DataGrid state with controlled/uncontrolled support
+ */
+declare function useDataGridState<T = Record<string, CellValue>>(options: UseDataGridStateOptions<T>): UseDataGridStateReturn;
+
+/**
+ * useKeyboardNavigation Hook
+ *
+ * Handles keyboard navigation for the DataGrid component including:
+ * - Arrow keys: Move between cells
+ * - Enter: Start editing / commit edit
+ * - Escape: Cancel edit
+ * - Tab/Shift+Tab: Move to next/previous cell
+ * - Home/End: Jump to first/last cell in row
+ * - Ctrl+Home/End: Jump to first/last cell in grid
+ * - Page Up/Down: Scroll by visible page
+ */
+
+interface UseKeyboardNavigationOptions<T = any> {
+    /** Whether keyboard navigation is enabled */
+    enabled: boolean;
+    /** Current focused cell */
+    focusedCell: CellPosition | null;
+    /** Current editing cell */
+    editingCell: EditingCell | null;
+    /** Column definitions (for determining visible columns) */
+    columns: ColumnDef<T>[];
+    /** Total number of rows */
+    rowCount: number;
+    /** Number of visible rows (for page up/down) */
+    visibleRowCount?: number;
+    /** Callback to set focused cell */
+    onFocusedCellChange: (cell: CellPosition | null) => void;
+    /** Callback to start editing */
+    onStartEditing: (rowIndex: number, columnKey: string) => void;
+    /** Callback to commit edit */
+    onCommitEdit: () => void;
+    /** Callback to cancel edit */
+    onCancelEdit: () => void;
+    /** Callback to scroll a row into view */
+    onScrollToRow?: (rowIndex: number) => void;
+    /** Callback to scroll a column into view */
+    onScrollToColumn?: (columnKey: string) => void;
+}
+interface UseKeyboardNavigationReturn {
+    /** Handler to attach to the grid container */
+    handleKeyDown: (event: React.KeyboardEvent) => void;
+    /** Ref to attach to the grid container for focus management */
+    containerRef: React.RefObject<HTMLDivElement>;
+    /** Focus the container (useful after clicking a cell) */
+    focusContainer: () => void;
+}
+/**
+ * Hook to handle keyboard navigation in the DataGrid
+ */
+declare function useKeyboardNavigation<T = any>(options: UseKeyboardNavigationOptions<T>): UseKeyboardNavigationReturn;
+
+/**
+ * useColumnResize Hook
+ *
+ * Handles column resizing logic with:
+ * - Mouse drag support
+ * - Min/max width constraints
+ * - Callbacks for resize start/end
+ * - Double-click to auto-fit (optional)
+ */
+
+interface UseColumnResizeOptions {
+    /** Column key being resized */
+    columnKey: string;
+    /** Column definition (for min/max width) */
+    column: ColumnDef;
+    /** Current column width */
+    currentWidth: number;
+    /** Whether resizing is enabled */
+    enabled: boolean;
+    /** Callback when width changes during resize */
+    onResize: (width: number) => void;
+    /** Callback when resize starts */
+    onResizeStart?: () => void;
+    /** Callback when resize ends */
+    onResizeEnd?: (width: number) => void;
+}
+interface UseColumnResizeReturn {
+    /** Whether currently dragging */
+    isDragging: boolean;
+    /** Props to spread on the resize handle element */
+    resizeHandleProps: {
+        onMouseDown: (event: React.MouseEvent) => void;
+        onDoubleClick: (event: React.MouseEvent) => void;
+        style: React.CSSProperties;
+        role: string;
+        "aria-label": string;
+        tabIndex: number;
+    };
+}
+/**
+ * Hook to handle column resize drag interactions
+ */
+declare function useColumnResize(options: UseColumnResizeOptions): UseColumnResizeReturn;
+/**
+ * Hook to manage resize state for all columns
+ */
+interface UseColumnResizeManagerOptions<T = any> {
+    /** Column definitions */
+    columns: ColumnDef<T>[];
+    /** Current column widths */
+    columnWidths: Record<string, number>;
+    /** Whether resizing is enabled globally */
+    resizableColumns: boolean;
+    /** Callback when a column width changes */
+    onColumnResize: (columnKey: string, width: number) => void;
+    /** Callback when resize starts */
+    onColumnResizeStart?: (columnKey: string) => void;
+    /** Callback when resize ends */
+    onColumnResizeEnd?: (columnKey: string, width: number) => void;
+}
+interface UseColumnResizeManagerReturn {
+    /** Currently resizing column key */
+    resizingColumn: string | null;
+    /** Get resize props for a specific column */
+    getResizeProps: (columnKey: string) => {
+        isDragging: boolean;
+        handleMouseDown: (event: React.MouseEvent) => void;
+        handleDoubleClick: (event: React.MouseEvent) => void;
+    };
+}
+/**
+ * Hook to manage column resize state across all columns
+ */
+declare function useColumnResizeManager<T = any>(options: UseColumnResizeManagerOptions<T>): UseColumnResizeManagerReturn;
+
+/**
+ * Data Processing Utilities
+ *
+ * Functions for sorting and filtering data internally in uncontrolled mode.
+ * Also exports helper functions for use in controlled mode.
+ */
+
+/**
+ * Get a value from a row using column accessor or key
+ */
+declare function getCellValue<T>(row: T, column: ColumnDef<T>): CellValue;
+/**
+ * Apply sorting to data
+ */
+declare function applySorting<T>(data: T[], sorting: SortConfig[], columns: ColumnDef<T>[]): T[];
+/**
+ * Apply a single filter operator to a value.
+ * Can be used in controlled mode to filter data with the same logic as internal filtering.
+ *
+ * @param value - The cell value to test
+ * @param filterValue - The filter value to compare against
+ * @param filterValueTo - Secondary value for 'between' operator
+ * @param operator - The filter operator to apply
+ * @param filterType - Optional filter type hint (text, number, date, boolean)
+ * @returns true if the value passes the filter, false otherwise
+ *
+ * @example
+ * // Using in controlled mode
+ * const filteredData = data.filter(row =>
+ *   applyFilterOperator(row.name, "john", undefined, "contains", "text")
+ * );
+ */
+declare function applyFilterOperator(value: CellValue, filterValue: FilterValue, filterValueTo: FilterValue, operator: FilterOperator, filterType?: string): boolean;
+/**
+ * Apply filters to data
+ */
+declare function applyFilters<T>(data: T[], filters: FilterConfig[], columns: ColumnDef<T>[]): T[];
+
+interface AutocompleteOption {
+    /** Unique value for the option */
+    value: string;
+    /** Display label for the option */
+    label: string;
+    /** Optional description shown below the label */
+    description?: string;
+    /** Whether this option is disabled */
+    disabled?: boolean;
+    /** Optional group/category for the option */
+    group?: string;
+}
+interface AutocompleteProps {
+    /** Array of options to display */
+    options: AutocompleteOption[];
+    /** Currently selected value */
+    value?: string;
+    /** Callback when selection changes */
+    onChange?: (value: string | undefined) => void;
+    /** Placeholder text when no selection */
+    placeholder?: string;
+    /** Placeholder for the search input */
+    searchPlaceholder?: string;
+    /** Text to show when no options match the search */
+    emptyText?: string;
+    /** Whether the autocomplete is disabled */
+    disabled?: boolean;
+    /** Additional class name for the trigger */
+    className?: string;
+    /** Whether to allow clearing the selection */
+    clearable?: boolean;
+}
+/**
+ * Autocomplete component - a searchable dropdown/select
+ *
+ * Features:
+ * - Search filtering
+ * - Grouped options support
+ * - Clearable selection
+ * - Keyboard navigation
+ *
+ * @example
+ * <Autocomplete
+ *   options={[
+ *     { value: 'react', label: 'React' },
+ *     { value: 'vue', label: 'Vue' },
+ *   ]}
+ *   value={selected}
+ *   onChange={setSelected}
+ *   placeholder="Select a framework..."
+ * />
+ */
+declare function Autocomplete({ options, value, onChange, placeholder, searchPlaceholder, emptyText, disabled, className, clearable, }: AutocompleteProps): react_jsx_runtime.JSX.Element;
+
+declare const iconButtonVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | "muted" | "filled" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+interface IconButtonProps extends React$1.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof iconButtonVariants> {
+    /**
+     * Whether the button is in an active/selected state
+     */
+    isActive?: boolean;
+    /**
+     * Icon element to display (typically from lucide-react)
+     */
+    icon?: React$1.ReactNode;
+    /**
+     * Accessibility label (required if no children)
+     */
+    "aria-label": string;
+}
+/**
+ * IconButton component
+ *
+ * A versatile icon button for toolbars and action buttons.
+ * Uses consistent hover states across all themes.
+ *
+ * @example
+ * <IconButton
+ *   icon={<RefreshCw className="w-4 h-4" />}
+ *   aria-label="Refresh"
+ *   onClick={handleRefresh}
+ * />
+ *
+ * @example With active state
+ * <IconButton
+ *   icon={<Grid className="w-4 h-4" />}
+ *   aria-label="Grid view"
+ *   isActive={viewMode === 'grid'}
+ *   onClick={() => setViewMode('grid')}
+ * />
+ */
+declare const IconButton: React$1.ForwardRefExoticComponent<IconButtonProps & React$1.RefAttributes<HTMLButtonElement>>;
+
+interface CopyButtonProps {
+    /**
+     * Content to copy to clipboard
+     */
+    content: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Size of the button
+     */
+    size?: "sm" | "md" | "lg";
+}
+/**
+ * CopyButton component
+ *
+ * A button that copies content to clipboard and shows feedback.
+ *
+ * @example
+ * <CopyButton content="Text to copy" />
+ *
+ * @example
+ * <div className="group relative">
+ *   <pre>some code</pre>
+ *   <CopyButton content="some code" className="absolute top-2 right-2" />
+ * </div>
+ */
+declare function CopyButton({ content, className, size }: CopyButtonProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Theme Types
+ *
+ * Type definitions for the JSON-based theme system.
+ * Ported from platform-leapfrog for consistent theming across projects.
+ */
+/**
+ * Theme interface mapping all color properties to CSS variables
+ */
+interface Theme {
+    /** Theme metadata */
+    id: string;
+    name: string;
+    description?: string;
+    author?: string;
+    /** Base colors */
+    background: string;
+    foreground: string;
+    /** Surface colors */
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    /** Accent & interactive colors */
+    primary: string;
+    primaryForeground: string;
+    accent: string;
+    accentForeground: string;
+    /** Secondary & utility colors */
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    /** State colors */
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+    /** Chip/badge colors */
+    chip: string;
+    chipForeground: string;
+    /** Borders & inputs */
+    border: string;
+    input: string;
+    ring: string;
+    /** Chart colors */
+    chart1: string;
+    chart2: string;
+    chart3: string;
+    chart4: string;
+    chart5: string;
+    /** Border radius */
+    radius?: string;
+}
+/**
+ * Theme with colors in hex format (for editing/display)
+ */
+type ThemeHex = Theme;
+/**
+ * Theme with colors in HSL format (for CSS variables)
+ */
+interface ThemeHSL extends Omit<Theme, keyof ThemeColorFields> {
+    id: string;
+    name: string;
+    description?: string;
+    author?: string;
+    radius?: string;
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    accent: string;
+    accentForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+    chip: string;
+    chipForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+    chart1: string;
+    chart2: string;
+    chart3: string;
+    chart4: string;
+    chart5: string;
+}
+type ThemeColorFields = {
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    popover: string;
+    popoverForeground: string;
+    primary: string;
+    primaryForeground: string;
+    accent: string;
+    accentForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    muted: string;
+    mutedForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+    chip: string;
+    chipForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+    chart1: string;
+    chart2: string;
+    chart3: string;
+    chart4: string;
+    chart5: string;
+};
+/**
+ * Color field configuration for editors
+ */
+interface ColorFieldConfig {
+    key: keyof ThemeColorFields;
+    label: string;
+    description?: string;
+    group: "base" | "surface" | "accent" | "secondary" | "state" | "chip" | "border" | "chart";
+}
+
+/**
+ * Theme Presets
+ *
+ * Built-in theme definitions for opti-ui.
+ * Ported from platform-leapfrog for consistent theming.
+ */
+
+/**
+ * Green Theme - Alternative theme option
+ */
+declare const GREEN_THEME: Theme;
+/**
+ * Optilogic Legacy Theme - Default theme
+ */
+declare const OPTILOGIC_LEGACY_THEME: Theme;
+/**
+ * Futuristic Theme - Neon cyberpunk aesthetic
+ */
+declare const FUTURISTIC_THEME: Theme;
+/**
+ * Nature Inspired Theme - Earthy greens and browns
+ */
+declare const NATURE_THEME: Theme;
+/**
+ * Sci-Fi Theme - Deep space with vibrant accents
+ */
+declare const SCIFI_THEME: Theme;
+/**
+ * Ocean Theme - Calming blues and teals
+ */
+declare const OCEAN_THEME: Theme;
+/**
+ * Sunset Theme - Warm oranges and purples
+ */
+declare const SUNSET_THEME: Theme;
+/**
+ * Forest Theme - Deep greens and browns
+ */
+declare const FOREST_THEME: Theme;
+/**
+ * Cyberpunk Theme - Neon pinks and cyans
+ */
+declare const CYBERPUNK_THEME: Theme;
+/**
+ * Minimalist Light Theme - Clean and simple
+ */
+declare const MINIMALIST_LIGHT_THEME: Theme;
+/**
+ * Dark Elegant Theme - Sophisticated dark mode
+ */
+declare const DARK_ELEGANT_THEME: Theme;
+/**
+ * All available preset themes
+ */
+declare const PRESET_THEMES: Theme[];
+/**
+ * All theme suggestions for preview
+ */
+declare const ALL_THEMES: Theme[];
+/**
+ * Get a preset theme by ID
+ */
+declare function getPresetTheme(id: string): Theme | undefined;
+/**
+ * Get the default theme (fallback)
+ */
+declare function getDefaultTheme(): Theme;
+/**
+ * Check if a theme is a preset (not user-created)
+ */
+declare function isPresetTheme(themeId: string): boolean;
+
+/**
+ * Theme Utilities
+ *
+ * Functions for theme conversion and application.
+ * Ported from platform-leapfrog for consistent theming.
+ */
+
+/**
+ * Convert hex color to HSL format for CSS variables
+ */
+declare function hexToHsl(hex: string): string;
+/**
+ * Convert hex theme to HSL theme
+ */
+declare function themeToHsl(theme: Theme): ThemeHSL;
+/**
+ * Apply a theme to the DOM
+ *
+ * @param theme - The theme to apply
+ * @param targetElement - Optional element to apply theme to (defaults to document.documentElement)
+ */
+declare function applyTheme(theme: Theme, targetElement?: HTMLElement): void;
+/**
+ * Get the currently active theme (uses default)
+ */
+declare function getCurrentTheme(): Theme;
+/**
+ * Validate theme object structure
+ */
+declare function validateTheme(theme: unknown): theme is Theme;
+/**
+ * Clone a theme (for editing)
+ */
+declare function cloneTheme(theme: Theme, newName?: string): Theme;
+/**
+ * Deep comparison of two themes
+ */
+declare function areThemesEqual(theme1: Theme, theme2: Theme): boolean;
+/**
+ * Export theme as JSON string
+ */
+declare function exportTheme(theme: Theme): string;
+/**
+ * Import theme from JSON string
+ */
+declare function importTheme(jsonString: string): {
+    success: boolean;
+    theme?: Theme;
+    error?: string;
+};
+
+interface ThemePickerProps {
+    /** Currently selected theme (controlled) */
+    value?: Theme;
+    /** Callback when theme changes */
+    onValueChange?: (theme: Theme) => void;
+    /** Available themes to choose from */
+    themes?: Theme[];
+    /** Trigger style variant */
+    triggerVariant?: "icon" | "button";
+    /** Size of the trigger */
+    triggerSize?: "sm" | "default" | "lg";
+    /** Whether to apply the theme to the DOM when selected */
+    applyOnSelect?: boolean;
+    /** Additional class name for the trigger */
+    className?: string;
+    /** Alignment of the popover */
+    align?: "start" | "center" | "end";
+    /** Side of the popover */
+    side?: "top" | "right" | "bottom" | "left";
+}
+/**
+ * ThemePicker Component
+ *
+ * A theme selection dropdown that displays available themes as visual swatches.
+ *
+ * @example Basic usage
+ * ```tsx
+ * <ThemePicker onValueChange={(theme) => console.log(theme)} />
+ * ```
+ *
+ * @example Controlled with custom themes
+ * ```tsx
+ * const [theme, setTheme] = useState(OPTILOGIC_LEGACY_THEME);
+ * <ThemePicker
+ *   value={theme}
+ *   onValueChange={setTheme}
+ *   themes={[OPTILOGIC_LEGACY_THEME, DARK_ELEGANT_THEME]}
+ * />
+ * ```
+ */
+declare function ThemePicker({ value, onValueChange, themes, triggerVariant, triggerSize, applyOnSelect, className, align, side, }: ThemePickerProps): react_jsx_runtime.JSX.Element;
+
+type CalendarProps = DayPickerProps;
+/**
+ * Calendar Component
+ *
+ * A fully styled calendar using react-day-picker with library design tokens.
+ *
+ * @example Single date selection
+ * ```tsx
+ * const [date, setDate] = useState<Date>();
+ * <Calendar mode="single" selected={date} onSelect={setDate} />
+ * ```
+ *
+ * @example Date range selection
+ * ```tsx
+ * const [range, setRange] = useState<DateRange>();
+ * <Calendar mode="range" selected={range} onSelect={setRange} />
+ * ```
+ *
+ * @example Quick navigation with month/year selectors
+ * ```tsx
+ * <Calendar
+ *   mode="single"
+ *   selected={date}
+ *   onSelect={setDate}
+ *   fromYear={2020}
+ *   toYear={2030}
+ * />
+ * ```
+ */
+declare function Calendar({ className, classNames, showOutsideDays, month: controlledMonth, defaultMonth, onMonthChange, ...props }: CalendarProps): react_jsx_runtime.JSX.Element;
+declare namespace Calendar {
+    var displayName: string;
+}
+
+/**
+ * DatePicker Component
+ *
+ * A complete date picker combining an input field with a calendar popover.
+ * Built using library primitives for consistent styling.
+ *
+ * Features:
+ * - Input field with formatted date display
+ * - Calendar popover for date selection
+ * - Controlled and uncontrolled modes
+ * - Clearable option
+ * - Min/max date constraints
+ * - Custom date formatting
+ * - Keyboard accessible
+ */
+interface DatePickerProps {
+    /** Selected date value */
+    value?: Date;
+    /** Default value for uncontrolled mode */
+    defaultValue?: Date;
+    /** Callback when date changes */
+    onChange?: (date: Date | undefined) => void;
+    /** Placeholder text when no date selected */
+    placeholder?: string;
+    /** Whether the picker is disabled */
+    disabled?: boolean;
+    /** Minimum selectable date */
+    minDate?: Date;
+    /** Maximum selectable date */
+    maxDate?: Date;
+    /** Date format string (date-fns format) */
+    dateFormat?: string;
+    /** Whether to show a clear button */
+    clearable?: boolean;
+    /** Additional class name */
+    className?: string;
+    /** Input ID for label association */
+    id?: string;
+    /** Input name for form submission */
+    name?: string;
+    /** Alignment of the popover */
+    align?: "start" | "center" | "end";
+    /** Side of the popover */
+    side?: "top" | "right" | "bottom" | "left";
+    /** Whether the popover should match the trigger width */
+    matchTriggerWidth?: boolean;
+    /** Callback when the popover opens/closes */
+    onOpenChange?: (open: boolean) => void;
+}
+/**
+ * DatePicker Component
+ *
+ * A date input with calendar popover for easy date selection.
+ *
+ * @example Basic usage
+ * ```tsx
+ * const [date, setDate] = useState<Date>();
+ * <DatePicker value={date} onChange={setDate} />
+ * ```
+ *
+ * @example With constraints
+ * ```tsx
+ * <DatePicker
+ *   value={date}
+ *   onChange={setDate}
+ *   minDate={new Date()}
+ *   maxDate={addMonths(new Date(), 3)}
+ *   placeholder="Select a date"
+ * />
+ * ```
+ *
+ * @example Custom format
+ * ```tsx
+ * <DatePicker
+ *   value={date}
+ *   onChange={setDate}
+ *   dateFormat="dd/MM/yyyy"
+ * />
+ * ```
+ */
+declare function DatePicker({ value, defaultValue, onChange, placeholder, disabled, minDate, maxDate, dateFormat, clearable, className, id, name, align, side, matchTriggerWidth, onOpenChange, }: DatePickerProps): react_jsx_runtime.JSX.Element;
+declare namespace DatePicker {
+    var displayName: string;
+}
+/**
+ * DatePickerInput Component
+ *
+ * A variant that looks more like a traditional input field.
+ * Useful for inline editing or compact layouts.
+ */
+interface DatePickerInputProps extends Omit<DatePickerProps, "className"> {
+    /** Additional class name for the input wrapper */
+    className?: string;
+    /** Size variant */
+    size?: "sm" | "default" | "lg";
+}
+declare function DatePickerInput({ value, defaultValue, onChange, placeholder, disabled, minDate, maxDate, dateFormat, clearable, className, id, name, align, side, onOpenChange, size, }: DatePickerInputProps): react_jsx_runtime.JSX.Element;
+declare namespace DatePickerInput {
+    var displayName: string;
+}
+
+/**
+ * Context menu item definition
+ */
+interface ContextMenuItem {
+    /** Unique identifier */
+    id: string;
+    /** Display label */
+    label: string;
+    /** Optional icon component */
+    icon?: LucideIcon;
+    /** Click handler (ignored if has submenu) */
+    action?: () => void;
+    /** Keyboard shortcut display text */
+    shortcut?: string;
+    /** Whether item is disabled */
+    disabled?: boolean;
+    /** Whether to show as destructive/danger action */
+    destructive?: boolean;
+    /** Show divider line after this item */
+    divider?: boolean;
+    /** Nested submenu items */
+    submenu?: ContextMenuItem[];
+}
+interface ContextMenuProps {
+    /** Menu items */
+    items: ContextMenuItem[];
+    /** Whether menu is open */
+    isOpen: boolean;
+    /** Close handler */
+    onClose: () => void;
+    /** Menu position (x, y) */
+    position: {
+        x: number;
+        y: number;
+    };
+    /** Anchor element (alternative to position) */
+    anchorEl?: HTMLElement | null;
+    /** Additional class names */
+    className?: string;
+}
+/**
+ * ContextMenu component
+ *
+ * A unified context menu with support for icons, shortcuts, submenus, and more.
+ *
+ * @example
+ * const { isOpen, position, openMenu, closeMenu } = useContextMenu();
+ *
+ * <div onContextMenu={(e) => {
+ *   e.preventDefault();
+ *   openMenu(e.clientX, e.clientY, item);
+ * }}>
+ *   Right click me
+ * </div>
+ *
+ * <ContextMenu
+ *   isOpen={isOpen}
+ *   position={position}
+ *   onClose={closeMenu}
+ *   items={[
+ *     { id: 'edit', label: 'Edit', icon: Edit, action: handleEdit },
+ *     { id: 'delete', label: 'Delete', icon: Trash, destructive: true, action: handleDelete },
+ *   ]}
+ * />
+ */
+declare function ContextMenu({ items, isOpen, onClose, position, anchorEl, className, }: ContextMenuProps): react_jsx_runtime.JSX.Element | null;
+/**
+ * Hook to manage context menu state
+ */
+interface UseContextMenuResult<T = unknown> {
+    /** Whether menu is open */
+    isOpen: boolean;
+    /** Menu position */
+    position: {
+        x: number;
+        y: number;
+    };
+    /** Target item that was right-clicked */
+    targetItem: T | null;
+    /** Ref for the menu element */
+    menuRef: React$1.RefObject<HTMLDivElement>;
+    /** Open the context menu */
+    openMenu: (x: number, y: number, item: T) => void;
+    /** Close the context menu */
+    closeMenu: () => void;
+}
+declare function useContextMenu<T = unknown>(): UseContextMenuResult<T>;
+
+/** @deprecated Use SortConfig instead */
+type SortingConfig = {
+    field: string;
+    direction: "asc" | "desc";
+    onSort: (field: string) => void;
+};
+
+export { ALL_THEMES, Accordion, AccordionContent, type AccordionContentProps, AccordionItem, type AccordionItemProps, AccordionTrigger, type AccordionTriggerProps, type AccordionVariant, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, type AlertDialogFooterProps, AlertDialogHeader, type AlertDialogHeaderProps, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Autocomplete, type AutocompleteOption, type AutocompleteProps, Badge, type BadgeProps, Button, type ButtonProps, CYBERPUNK_THEME, Calendar, type CalendarProps, Card, CardContent, type CardContentProps, CardDescription, type CardDescriptionProps, CardFooter, type CardFooterProps, CardHeader, type CardHeaderProps, type CardProps, CardTitle, type CardTitleProps, type CellEditEvent, CellEditor, type CellEditorProps$1 as CellEditorProps, type CellPosition, Checkbox, type CheckboxProps, Chip, type ChipProps, type ColorFieldConfig, type ColumnDef, ConfirmationModal, type ConfirmationModalProps, ContextMenu, type ContextMenuItem, type ContextMenuProps, CopyButton, type CopyButtonProps, DARK_ELEGANT_THEME, DataGrid, type DataGridContextValue, type DataGridInternalState, type DataGridProps, type DataGridState, type DateFilterOperator, DatePicker, DatePickerInput, type DatePickerInputProps, type DatePickerProps, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, type DropdownMenuItemProps, DropdownMenuLabel, type DropdownMenuLabelProps, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, type DropdownMenuShortcutProps, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, type DropdownMenuSubTriggerProps, DropdownMenuTrigger, type EditingCell, type EditorType, FOREST_THEME, FUTURISTIC_THEME, type FilterConfig, type FilterOperator, FilterPopover, type FilterPopoverProps$1 as FilterPopoverProps, type FilterType, GREEN_THEME, type GridCellProps, HeaderCell, type HeaderCellProps$1 as HeaderCellProps, IconButton, type IconButtonProps, Input, type InputProps, Label, type LabelProps, LoadingSpinner, type LoadingSpinnerProps, MINIMALIST_LIGHT_THEME, Modal, ModalButton, type ModalButtonProps, type ModalProps, NATURE_THEME, type NumberFilterOperator, OCEAN_THEME, OPTILOGIC_LEGACY_THEME, PRESET_THEMES, type PaginationConfig, Popover, PopoverAnchor, PopoverContent, type PopoverContentProps, PopoverTrigger, Progress, type ProgressProps, ResizablePanel, type ResizablePanelProps, ResizeHandle, type ResizeHandleProps, SCIFI_THEME, SUNSET_THEME, type SearchConfig, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, type SelectOption, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, type SelectTriggerProps, SelectValue, Separator, type SeparatorProps, Skeleton, type SkeletonProps, type SortConfig, type SortingConfig, 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, type TextFilterOperator, Textarea, type TextareaProps, type Theme, type ThemeHSL, type ThemeHex, ThemePicker, type ThemePickerProps, Toaster, type ToasterProps, Tooltip, TooltipArrow, TooltipContent, TooltipPortal, type TooltipProps, TooltipProvider, TooltipRoot, TooltipTrigger, type UseContextMenuResult, accordionContentVariants, accordionItemVariants, accordionTriggerVariants, applyFilterOperator, applyFilters, applySorting, applyTheme, areThemesEqual, badgeVariants, buttonVariants, cloneTheme, cn, exportTheme, getCellValue, getCurrentTheme, getDefaultTheme, getPresetTheme, hexToHsl, iconButtonVariants, importTheme, isPresetTheme, labelVariants, loadingSpinnerVariants, themeToHsl, useColumnResize, useColumnResizeManager, useConfirmation, useContextMenu, useDataGridState, useKeyboardNavigation, validateTheme };