@loykin/designkit 0.0.1-dev.0

package/dist/index.d.cts

@@ -0,0 +1,667 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React$1 from 'react';
+import React__default, { ComponentType } from 'react';
+import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
+import * as class_variance_authority_types from 'class-variance-authority/types';
+import { useRender } from '@base-ui/react/use-render';
+import { VariantProps } from 'class-variance-authority';
+import { Button as Button$1 } from '@base-ui/react/button';
+import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
+import { Menu } from '@base-ui/react/menu';
+import { Popover as Popover$1 } from '@base-ui/react/popover';
+import { ScrollArea as ScrollArea$1 } from '@base-ui/react/scroll-area';
+import { NavigationMenu as NavigationMenu$1 } from '@base-ui/react/navigation-menu';
+import { Select as Select$1 } from '@base-ui/react/select';
+import { Separator as Separator$1 } from '@base-ui/react/separator';
+import { Dialog } from '@base-ui/react/dialog';
+import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
+import { Slider as Slider$1 } from '@base-ui/react/slider';
+import { Switch as Switch$1 } from '@base-ui/react/switch';
+import { Tabs as Tabs$2 } from '@base-ui/react/tabs';
+import { DataGridColumnDef } from '@loykin/gridkit';
+export { DataGridColumnDef } from '@loykin/gridkit';
+import { Table as Table$1, Row } from '@tanstack/react-table';
+import { ClassValue } from 'clsx';
+import * as zustand from 'zustand';
+
+declare function Avatar({ className, size, ...props }: Avatar$1.Root.Props & {
+    size?: 'default' | 'sm' | 'lg';
+}): react_jsx_runtime.JSX.Element;
+declare function AvatarImage({ className, ...props }: Avatar$1.Image.Props): react_jsx_runtime.JSX.Element;
+declare function AvatarFallback({ className, ...props }: Avatar$1.Fallback.Props): react_jsx_runtime.JSX.Element;
+declare function AvatarBadge({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
+declare function AvatarGroup({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function AvatarGroupCount({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+
+declare const badgeVariants: (props?: ({
+    variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+
+declare const buttonVariants: (props?: ({
+    variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
+    size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function Button({ className, variant, size, ...props }: Button$1.Props & VariantProps<typeof buttonVariants>): react_jsx_runtime.JSX.Element;
+
+declare function Card({ className, size, ...props }: React$1.ComponentProps<'div'> & {
+    size?: 'default' | 'sm';
+}): react_jsx_runtime.JSX.Element;
+declare function CardHeader({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardTitle({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardDescription({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardAction({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardContent({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function CardFooter({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+
+declare function Checkbox({ className, ...props }: Checkbox$1.Root.Props): react_jsx_runtime.JSX.Element;
+
+declare function DropdownMenu({ ...props }: Menu.Root.Props): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuPortal({ ...props }: Menu.Portal.Props): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuTrigger({ asChild: _asChild, ...props }: Menu.Trigger.Props & {
+    asChild?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuContent({ align, alignOffset, side, sideOffset, className, ...props }: Menu.Popup.Props & Pick<Menu.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuGroup({ ...props }: Menu.Group.Props): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuLabel({ className, inset, ...props }: Menu.GroupLabel.Props & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuItem({ className, inset, variant, ...props }: Menu.Item.Props & {
+    inset?: boolean;
+    variant?: 'default' | 'destructive';
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSub({ ...props }: Menu.SubmenuRoot.Props): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubTrigger({ className, inset, children, ...props }: Menu.SubmenuTrigger.Props & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSubContent({ align, alignOffset, side, sideOffset, className, ...props }: React$1.ComponentProps<typeof DropdownMenuContent>): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuCheckboxItem({ className, children, checked, inset, ...props }: Menu.CheckboxItem.Props & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioGroup({ ...props }: Menu.RadioGroup.Props): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuRadioItem({ className, children, inset, ...props }: Menu.RadioItem.Props & {
+    inset?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuSeparator({ className, ...props }: Menu.Separator.Props): react_jsx_runtime.JSX.Element;
+declare function DropdownMenuShortcut({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
+
+declare function Input({ className, type, ...props }: React$1.ComponentProps<'input'>): react_jsx_runtime.JSX.Element;
+
+declare function Label({ className, ...props }: React$1.ComponentProps<'label'>): react_jsx_runtime.JSX.Element;
+
+declare function Popover({ ...props }: Popover$1.Root.Props): react_jsx_runtime.JSX.Element;
+declare function PopoverTrigger({ ...props }: Popover$1.Trigger.Props): react_jsx_runtime.JSX.Element;
+declare function PopoverContent({ className, align, alignOffset, side, sideOffset, ...props }: Popover$1.Popup.Props & Pick<Popover$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): react_jsx_runtime.JSX.Element;
+declare function PopoverHeader({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function PopoverTitle({ className, ...props }: Popover$1.Title.Props): react_jsx_runtime.JSX.Element;
+declare function PopoverDescription({ className, ...props }: Popover$1.Description.Props): react_jsx_runtime.JSX.Element;
+
+declare function ScrollArea({ className, children, ...props }: ScrollArea$1.Root.Props): react_jsx_runtime.JSX.Element;
+declare function ScrollBar({ className, orientation, ...props }: ScrollArea$1.Scrollbar.Props): react_jsx_runtime.JSX.Element;
+
+declare function NavigationMenu({ align, className, children, ...props }: NavigationMenu$1.Root.Props & Pick<NavigationMenu$1.Positioner.Props, 'align'>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuList({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenu$1.List>): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuItem({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenu$1.Item>): react_jsx_runtime.JSX.Element;
+declare const navigationMenuTriggerStyle: (props?: class_variance_authority_types.ClassProp | undefined) => string;
+declare function NavigationMenuTrigger({ className, children, ...props }: NavigationMenu$1.Trigger.Props): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuContent({ className, ...props }: NavigationMenu$1.Content.Props): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuPositioner({ className, side, sideOffset, align, alignOffset, ...props }: NavigationMenu$1.Positioner.Props): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuLink({ className, ...props }: NavigationMenu$1.Link.Props): react_jsx_runtime.JSX.Element;
+declare function NavigationMenuIndicator({ className, ...props }: React.ComponentPropsWithRef<typeof NavigationMenu$1.Icon>): react_jsx_runtime.JSX.Element;
+
+declare const Select: typeof Select$1.Root;
+declare function SelectGroup({ className, ...props }: Select$1.Group.Props): react_jsx_runtime.JSX.Element;
+declare function SelectValue({ className, ...props }: Select$1.Value.Props): react_jsx_runtime.JSX.Element;
+declare function SelectTrigger({ className, size, children, ...props }: Select$1.Trigger.Props & {
+    size?: 'sm' | 'default';
+}): react_jsx_runtime.JSX.Element;
+declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: Select$1.Popup.Props & Pick<Select$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset' | 'alignItemWithTrigger'>): react_jsx_runtime.JSX.Element;
+declare function SelectLabel({ className, ...props }: Select$1.GroupLabel.Props): react_jsx_runtime.JSX.Element;
+declare function SelectItem({ className, children, ...props }: Select$1.Item.Props): react_jsx_runtime.JSX.Element;
+declare function SelectSeparator({ className, ...props }: Select$1.Separator.Props): react_jsx_runtime.JSX.Element;
+declare function SelectScrollUpButton({ className, ...props }: React$1.ComponentProps<typeof Select$1.ScrollUpArrow>): react_jsx_runtime.JSX.Element;
+declare function SelectScrollDownButton({ className, ...props }: React$1.ComponentProps<typeof Select$1.ScrollDownArrow>): react_jsx_runtime.JSX.Element;
+
+declare function Separator({ className, orientation, ...props }: Separator$1.Props): react_jsx_runtime.JSX.Element;
+
+declare function Sheet({ ...props }: Dialog.Root.Props): react_jsx_runtime.JSX.Element;
+declare function SheetTrigger({ ...props }: Dialog.Trigger.Props): react_jsx_runtime.JSX.Element;
+declare function SheetClose({ ...props }: Dialog.Close.Props): react_jsx_runtime.JSX.Element;
+declare function SheetContent({ className, children, side, showCloseButton, ...props }: Dialog.Popup.Props & {
+    side?: 'top' | 'right' | 'bottom' | 'left';
+    showCloseButton?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SheetHeader({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SheetFooter({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SheetTitle({ className, ...props }: Dialog.Title.Props): react_jsx_runtime.JSX.Element;
+declare function SheetDescription({ className, ...props }: Dialog.Description.Props): react_jsx_runtime.JSX.Element;
+
+declare function TooltipProvider({ delay, ...props }: Tooltip$1.Provider.Props): react_jsx_runtime.JSX.Element;
+declare function Tooltip({ ...props }: Tooltip$1.Root.Props): react_jsx_runtime.JSX.Element;
+declare function TooltipTrigger({ ...props }: Tooltip$1.Trigger.Props): react_jsx_runtime.JSX.Element;
+declare function TooltipContent({ className, side, sideOffset, align, alignOffset, children, ...props }: Tooltip$1.Popup.Props & Pick<Tooltip$1.Positioner.Props, 'align' | 'alignOffset' | 'side' | 'sideOffset'>): react_jsx_runtime.JSX.Element;
+
+type SidebarContextProps = {
+    state: 'expanded' | 'collapsed';
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    openMobile: boolean;
+    setOpenMobile: (open: boolean) => void;
+    isMobile: boolean;
+    toggleSidebar: () => void;
+};
+declare function useSidebar(): SidebarContextProps;
+declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React$1.ComponentProps<'div'> & {
+    defaultOpen?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}): react_jsx_runtime.JSX.Element;
+declare function Sidebar({ side, variant, collapsible, className, children, dir, ...props }: React$1.ComponentProps<'div'> & {
+    side?: 'left' | 'right';
+    variant?: 'sidebar' | 'floating' | 'inset';
+    collapsible?: 'offcanvas' | 'icon' | 'none';
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarTrigger({ className, onClick, ...props }: React$1.ComponentProps<typeof Button>): react_jsx_runtime.JSX.Element;
+declare function SidebarRail({ className, ...props }: React$1.ComponentProps<'button'>): react_jsx_runtime.JSX.Element;
+declare function SidebarInset({ className, ...props }: React$1.ComponentProps<'main'>): react_jsx_runtime.JSX.Element;
+declare function SidebarInput({ className, ...props }: React$1.ComponentProps<typeof Input>): react_jsx_runtime.JSX.Element;
+declare function SidebarHeader({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SidebarFooter({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SidebarSeparator({ className, ...props }: React$1.ComponentProps<typeof Separator>): react_jsx_runtime.JSX.Element;
+declare function SidebarContent({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SidebarGroup({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<'div'> & React$1.ComponentProps<'div'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<'button'> & React$1.ComponentProps<'button'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function SidebarGroupContent({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenu({ className, ...props }: React$1.ComponentProps<'ul'>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuItem({ className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
+declare const sidebarMenuButtonVariants: (props?: ({
+    variant?: "default" | "outline" | null | undefined;
+    size?: "default" | "sm" | "lg" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<'button'> & React$1.ComponentProps<'button'> & {
+    isActive?: boolean;
+    tooltip?: string | React$1.ComponentProps<typeof TooltipContent>;
+} & VariantProps<typeof sidebarMenuButtonVariants>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<'button'> & React$1.ComponentProps<'button'> & {
+    showOnHover?: boolean;
+}): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+declare function SidebarMenuBadge({ className, ...props }: React$1.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React$1.ComponentProps<'div'> & {
+    showIcon?: boolean;
+}): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSub({ className, ...props }: React$1.ComponentProps<'ul'>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSubItem({ className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
+declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: useRender.ComponentProps<'a'> & React$1.ComponentProps<'a'> & {
+    size?: 'sm' | 'md';
+    isActive?: boolean;
+}): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
+
+interface EmptyStateAction {
+    label: string;
+    onClick?: () => void;
+    variant?: 'default' | 'outline' | 'ghost';
+}
+interface EmptyStateProps {
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    title: string;
+    description?: string;
+    action?: EmptyStateAction;
+    className?: string;
+}
+declare function EmptyState({ icon: Icon, title, description, action, className }: EmptyStateProps): react_jsx_runtime.JSX.Element;
+
+declare function Skeleton({ className, ...props }: React.ComponentProps<'div'>): react_jsx_runtime.JSX.Element;
+
+declare function Slider({ className, defaultValue, value, min, max, ...props }: Slider$1.Root.Props): react_jsx_runtime.JSX.Element;
+
+declare function Switch({ className, size, ...props }: Switch$1.Root.Props & {
+    size?: 'sm' | 'default';
+}): react_jsx_runtime.JSX.Element;
+
+declare function Table({ className, ...props }: React$1.ComponentProps<'table'>): react_jsx_runtime.JSX.Element;
+declare function TableHeader({ className, ...props }: React$1.ComponentProps<'thead'>): react_jsx_runtime.JSX.Element;
+declare function TableBody({ className, ...props }: React$1.ComponentProps<'tbody'>): react_jsx_runtime.JSX.Element;
+declare function TableFooter({ className, ...props }: React$1.ComponentProps<'tfoot'>): react_jsx_runtime.JSX.Element;
+declare function TableRow({ className, ...props }: React$1.ComponentProps<'tr'>): react_jsx_runtime.JSX.Element;
+declare function TableHead({ className, ...props }: React$1.ComponentProps<'th'>): react_jsx_runtime.JSX.Element;
+declare function TableCell({ className, ...props }: React$1.ComponentProps<'td'>): react_jsx_runtime.JSX.Element;
+declare function TableCaption({ className, ...props }: React$1.ComponentProps<'caption'>): react_jsx_runtime.JSX.Element;
+
+declare function Tabs$1({ className, orientation, ...props }: Tabs$2.Root.Props): react_jsx_runtime.JSX.Element;
+declare const tabsListVariants: (props?: ({
+    variant?: "default" | "line" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+declare function TabsList({ className, variant, ...props }: Tabs$2.List.Props & VariantProps<typeof tabsListVariants>): react_jsx_runtime.JSX.Element;
+declare function TabsTrigger({ className, ...props }: Tabs$2.Tab.Props): react_jsx_runtime.JSX.Element;
+declare function TabsContent({ className, ...props }: Tabs$2.Panel.Props): react_jsx_runtime.JSX.Element;
+
+type ShellId = 'sidebar' | 'header';
+type DensityId = 'compact' | 'default' | 'comfortable';
+type TemplateId = 'table' | 'table-infinity' | 'table-drag' | 'table-card' | 'table-card-list' | 'tabbed' | 'form' | 'form-stacked' | 'form-wizard' | 'form-inline' | 'databody' | 'databody-detail' | 'databody-split' | 'sectioned' | 'typography' | 'colors' | 'login' | 'login-forgot' | 'login-reset' | 'login-otp';
+interface GlobalTheme {
+    radius: number;
+    primaryHue: number;
+    primaryChroma: number;
+    fontScale: number;
+    lineHeight: number;
+    density: DensityId;
+    darkMode: boolean;
+}
+interface TemplateOverride {
+    radius?: number;
+    primaryChroma?: number;
+    density?: DensityId;
+    pagePaddingY?: string;
+    panelGap?: string;
+    toolbarHeight?: string;
+}
+interface ThemeState {
+    global: GlobalTheme;
+    overrides: Record<TemplateId, TemplateOverride>;
+    activeShell: ShellId;
+    activeTemplate: TemplateId;
+    setGlobal: (patch: Partial<GlobalTheme>) => void;
+    setOverride: (id: TemplateId, patch: Partial<TemplateOverride>) => void;
+    setShell: (shell: ShellId) => void;
+    setTemplate: (template: TemplateId) => void;
+}
+
+type DataGridViewVariant = 'standard' | 'infinity' | 'drag' | 'card' | 'card-list';
+type DataGridViewFilter<T> = (table: Table$1<T>) => React.ReactNode;
+interface DataGridViewInfinityProps<T> {
+    data?: T[];
+    hasNextPage: boolean;
+    isFetchingNextPage: boolean;
+    fetchNextPage: () => void;
+    tableKey?: string;
+}
+interface DataGridViewDragProps<T> {
+    onRowReorder?: (rows: T[]) => void;
+    dragColumnSize?: number;
+}
+interface DataGridViewCardProps<T> {
+    renderCard?: (row: Row<T>) => React.ReactNode;
+    cardColumns?: number;
+    minCardWidth?: number;
+    minColumns?: number;
+}
+interface DataGridViewProps<T extends Record<string, unknown>> {
+    data: T[];
+    columns: DataGridColumnDef<T>[];
+    getRowId?: (row: T, index: number) => string;
+    variant?: DataGridViewVariant;
+    tableHeight?: string | number;
+    rowHeight?: number;
+    tableWidthMode?: 'spacer' | 'fill-last' | 'independent';
+    enableSorting?: boolean;
+    enableColumnFilters?: boolean;
+    emptyMessage?: string;
+    headerLeft?: DataGridViewFilter<T>;
+    headerRight?: DataGridViewFilter<T>;
+    pagination?: {
+        pageSize?: number;
+    } | false;
+    footer?: (table: Table$1<T>) => React.ReactNode;
+    infinity?: DataGridViewInfinityProps<T>;
+    drag?: DataGridViewDragProps<T>;
+    card?: DataGridViewCardProps<T>;
+}
+
+declare function DataGridView<T extends Record<string, unknown>>({ data, columns, getRowId, variant, tableHeight, rowHeight, tableWidthMode, enableSorting, enableColumnFilters, emptyMessage, headerLeft, headerRight, pagination, footer, infinity, drag, card, }: DataGridViewProps<T>): react_jsx_runtime.JSX.Element;
+
+type TemplateGroup = 'Table' | 'Pages' | 'Design' | 'Auth';
+type TemplateNavigationGroupId = 'DataBodyTemplate' | 'FormWizardBodyTemplate' | 'LoginBodyTemplate' | 'Common';
+type TemplateExportKind = 'data-grid' | 'data-grid-card' | 'body-template' | 'typography' | 'databody' | 'login';
+interface TemplateOptionChoice {
+    value: string;
+    label: string;
+}
+interface TemplateOptionSpec {
+    key: string;
+    label: string;
+    type: 'select';
+    choices: TemplateOptionChoice[];
+    defaultValue: string;
+}
+interface TemplateDefinition {
+    id: TemplateId;
+    label: string;
+    /** Short label used only in nav sub-menu (omit to fall back to label) */
+    navigationLabel?: string;
+    /** Section-header label for the nav group this item anchors (omit to fall back to label) */
+    navigationSubgroupLabel?: string;
+    group: TemplateGroup;
+    navigationGroup: TemplateNavigationGroupId;
+    navigationParent?: TemplateId;
+    layoutClassName: string;
+    exportComponent: string;
+    exportKind: TemplateExportKind;
+    preset: TemplateOverride;
+    options?: TemplateOptionSpec[];
+    preview?: {
+        variant?: DataGridViewVariant;
+        breadcrumb?: React.ReactNode;
+        title?: React.ReactNode;
+        description?: React.ReactNode;
+    };
+}
+declare const TEMPLATE_DEFINITIONS: TemplateDefinition[];
+declare function getTemplateDefinition(id: TemplateId): TemplateDefinition | undefined;
+declare function createTemplateOverrides(): Record<TemplateId, TemplateOverride>;
+
+interface TemplateCodeContext {
+    definition: TemplateDefinition;
+    themeProp: string;
+    layoutClassName: string;
+}
+type TemplateCodeBuilder = (context: TemplateCodeContext) => string;
+
+interface DataBodyTabProps {
+    id: string;
+    label: React__default.ReactNode;
+    count?: number;
+    disabled?: boolean;
+    children: React__default.ReactNode;
+}
+declare function DataBodyTab(_props: DataBodyTabProps): null;
+interface DataBodyBodyProps {
+    children?: React__default.ReactNode;
+    className?: string;
+}
+declare function DataBodyBody(_props: DataBodyBodyProps): null;
+interface DataBodySectionProps {
+    id: string;
+    label: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    disabled?: boolean;
+    children?: React__default.ReactNode;
+}
+declare function DataBodySection(_props: DataBodySectionProps): null;
+interface DataBodySummaryProps {
+    children?: React__default.ReactNode;
+}
+declare function DataBodySummary(_props: DataBodySummaryProps): null;
+type GroupLayout = 'stacked' | 'horizontal' | 'inline' | 'split';
+type GroupVariant = 'card' | 'plain' | 'bordered';
+interface DataBodyGroupProps {
+    layout?: GroupLayout;
+    variant?: GroupVariant;
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    danger?: boolean;
+    children?: React__default.ReactNode;
+}
+declare function DataBodyGroup(props: DataBodyGroupProps): react_jsx_runtime.JSX.Element;
+interface DataBodyFieldProps {
+    label: string;
+    description?: string;
+    children?: React__default.ReactNode;
+}
+declare function DataBodyField({ label, description, children }: DataBodyFieldProps): react_jsx_runtime.JSX.Element;
+interface DataBodyRowProps {
+    label: string;
+    description?: string;
+    required?: boolean;
+    children?: React__default.ReactNode;
+}
+declare function DataBodyRow({ label, description, required, children }: DataBodyRowProps): react_jsx_runtime.JSX.Element;
+interface DataBodyTemplateProps {
+    theme?: React__default.CSSProperties;
+    className?: string;
+    topBar?: React__default.ReactNode;
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    toolbarLeft?: React__default.ReactNode;
+    toolbarRight?: React__default.ReactNode;
+    activeTab?: string;
+    defaultTab?: string;
+    onTabChange?: (id: string) => void;
+    children?: React__default.ReactNode;
+    contentClassName?: string;
+}
+declare function Root$1({ theme, className, topBar, title, description, actions, toolbarLeft, toolbarRight, activeTab: controlledActive, defaultTab, onTabChange, children, contentClassName, }: DataBodyTemplateProps): react_jsx_runtime.JSX.Element;
+declare const DataBodyTemplate: typeof Root$1 & {
+    Body: typeof DataBodyBody;
+    Tab: typeof DataBodyTab;
+    Section: typeof DataBodySection;
+    Summary: typeof DataBodySummary;
+    Group: typeof DataBodyGroup;
+    Row: typeof DataBodyRow;
+    Field: typeof DataBodyField;
+};
+
+interface DataBodyTemplateDemoProps {
+    theme?: React__default.CSSProperties;
+    topBarShow?: string;
+    topBarVariant?: string;
+    topBarBg?: string;
+}
+declare function DataBodyTemplateDemo({ theme, topBarShow, topBarVariant, topBarBg }: DataBodyTemplateDemoProps): react_jsx_runtime.JSX.Element;
+
+type FormWizardVariant = 'card' | 'plain';
+interface FormWizardStep {
+    key: string;
+    title: string;
+    description?: string;
+    content: React.ReactNode;
+}
+interface FormWizardBodyTemplateProps {
+    theme?: React.CSSProperties;
+    title?: string;
+    topBar?: React.ReactNode;
+    variant?: FormWizardVariant;
+    steps: FormWizardStep[];
+    activeStep: number;
+    onNext?: () => void;
+    onBack?: () => void;
+    onFinish?: () => void;
+}
+declare function FormWizardBodyTemplate({ theme, title, topBar, variant, steps, activeStep, onNext, onBack, onFinish, }: FormWizardBodyTemplateProps): react_jsx_runtime.JSX.Element;
+
+declare function FormWizardBodyTemplateDemo({ theme, variant, topBarShow, topBarVariant, topBarBg, }: {
+    theme?: React.CSSProperties;
+    variant?: FormWizardVariant;
+    topBarShow?: string;
+    topBarVariant?: string;
+    topBarBg?: string;
+}): react_jsx_runtime.JSX.Element;
+
+interface TypographyBodyTemplateProps {
+    theme?: React.CSSProperties;
+    breadcrumb?: React.ReactNode;
+}
+declare function TypographyBodyTemplate({ theme, breadcrumb }: TypographyBodyTemplateProps): react_jsx_runtime.JSX.Element;
+
+interface ColorsBodyTemplateProps {
+    theme?: React.CSSProperties;
+    breadcrumb?: React.ReactNode;
+}
+declare function ColorsBodyTemplate({ theme, breadcrumb }: ColorsBodyTemplateProps): react_jsx_runtime.JSX.Element;
+
+interface DataPageProps {
+    children: React.ReactNode;
+    className?: string;
+    style?: React.CSSProperties;
+}
+interface DataPageHeaderProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+interface DataPageTitleBlockProps {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    breadcrumb?: React.ReactNode;
+    className?: string;
+}
+interface DataPageActionsProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+interface DataPageTabsProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+interface DataPageTabProps {
+    active?: boolean;
+    count?: number;
+    children: React.ReactNode;
+    onClick?: () => void;
+    disabled?: boolean;
+    className?: string;
+}
+interface DataPageContentProps {
+    children?: React.ReactNode;
+    className?: string;
+    padding?: 'none' | 'compact' | 'default';
+}
+interface DataPageGroupProps {
+    children?: React.ReactNode;
+    className?: string;
+    surface?: 'none' | 'bordered' | 'card';
+}
+interface DataPageGroupHeaderProps {
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    actions?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+}
+interface DataPageGroupToolbarProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+interface DataPageGroupBodyProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+interface DataPageFooterProps {
+    children?: React.ReactNode;
+    className?: string;
+}
+declare function Root({ children, className, style }: DataPageProps): react_jsx_runtime.JSX.Element;
+declare function Header({ children, className }: DataPageHeaderProps): react_jsx_runtime.JSX.Element;
+declare function TitleBlock({ title, description, breadcrumb, className }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
+declare function Actions({ children, className }: DataPageActionsProps): react_jsx_runtime.JSX.Element | null;
+declare function Tabs({ children, className }: DataPageTabsProps): react_jsx_runtime.JSX.Element | null;
+declare function Tab({ active, count, children, onClick, disabled, className }: DataPageTabProps): react_jsx_runtime.JSX.Element;
+declare function Content({ children, className, padding }: DataPageContentProps): react_jsx_runtime.JSX.Element;
+declare function Group({ children, className, surface }: DataPageGroupProps): react_jsx_runtime.JSX.Element;
+declare function GroupHeader({ title, description, actions, children, className, }: DataPageGroupHeaderProps): react_jsx_runtime.JSX.Element | null;
+declare function GroupToolbar({ children, className }: DataPageGroupToolbarProps): react_jsx_runtime.JSX.Element | null;
+declare function GroupBody({ children, className }: DataPageGroupBodyProps): react_jsx_runtime.JSX.Element;
+declare function Footer({ children, className }: DataPageFooterProps): react_jsx_runtime.JSX.Element | null;
+declare const DataPage: typeof Root & {
+    Header: typeof Header;
+    TitleBlock: typeof TitleBlock;
+    Actions: typeof Actions;
+    Tabs: typeof Tabs;
+    Tab: typeof Tab;
+    Content: typeof Content;
+    Group: typeof Group;
+    GroupHeader: typeof GroupHeader;
+    GroupToolbar: typeof GroupToolbar;
+    GroupBody: typeof GroupBody;
+    Footer: typeof Footer;
+};
+
+type LoginLayout = 'centered' | 'split';
+type LoginSide = 'left' | 'right';
+type LoginCard = 'card' | 'plain';
+type LoginBg = 'default' | 'none' | 'subtle';
+type LoginCardWidth = 'sm' | 'md' | 'lg';
+interface LoginBodyTemplateProps {
+    theme?: React__default.CSSProperties;
+    layout?: LoginLayout;
+    side?: LoginSide;
+    card?: LoginCard;
+    bg?: LoginBg;
+    cardWidth?: LoginCardWidth;
+    brand?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    className?: string;
+}
+declare function LoginBodyTemplate({ theme, layout, side, card, bg, cardWidth, brand, children, className, }: LoginBodyTemplateProps): react_jsx_runtime.JSX.Element;
+
+type PageTopBarVariant = 'ghost' | 'default';
+interface PageTopBarProps {
+    left?: React__default.ReactNode;
+    right?: React__default.ReactNode;
+    variant?: PageTopBarVariant;
+    height?: string;
+    className?: string;
+    style?: React__default.CSSProperties;
+    children?: React__default.ReactNode;
+}
+type PageBreadcrumbItem = string | {
+    label: string;
+    href?: string;
+};
+declare function PageBreadcrumb({ items }: {
+    items: PageBreadcrumbItem[];
+}): react_jsx_runtime.JSX.Element;
+/** Builds a PageTopBar ReactNode from playground option strings. */
+declare function buildTopBar(opts: {
+    topBarShow?: string;
+    topBarVariant?: string;
+    topBarBg?: string;
+    left: React__default.ReactNode;
+    right?: React__default.ReactNode;
+}): React__default.ReactNode;
+declare function PageTopBar({ left, right, variant, height, className, style, children, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
+
+interface TemplateConfig {
+    id: TemplateId;
+    label: string;
+    component: ComponentType<{
+        theme?: React.CSSProperties;
+    }>;
+    buildCode?: TemplateCodeBuilder;
+    group?: string;
+    description?: string;
+}
+interface TemplateNavigationItem {
+    id: TemplateId;
+    label: string;
+    icon?: ComponentType<{
+        className?: string;
+    }>;
+    children?: TemplateNavigationItem[];
+}
+interface TemplateNavigationGroup {
+    label: string;
+    items: TemplateNavigationItem[];
+}
+
+declare const TEMPLATES: TemplateConfig[];
+declare const TEMPLATE_NAVIGATION: TemplateNavigationGroup[];
+
+declare function useIsMobile(): boolean;
+
+declare function useStyleInjector(): void;
+/** Returns CSS custom properties for a template — used as inline style for external usage */
+declare function buildTemplateTheme(g: {
+    radius: number;
+    primaryHue: number;
+    primaryChroma: number;
+    density?: DensityId;
+    fontScale?: number;
+    lineHeight?: number;
+}, ov?: {
+    radius?: number;
+    primaryChroma?: number;
+    density?: DensityId;
+    pagePaddingY?: string;
+    panelGap?: string;
+    toolbarHeight?: string;
+}): React.CSSProperties;
+
+declare function cn(...inputs: ClassValue[]): string;
+
+declare const useThemeStore: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
+
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, type ColorsBodyTemplateProps, type DataBodyBodyProps, type DataBodyFieldProps, type DataBodyGroupProps, type DataBodyRowProps, type DataBodySectionProps, type DataBodySummaryProps, type DataBodyTabProps, DataBodyTemplate, DataBodyTemplateDemo, type DataBodyTemplateProps, DataGridView, type DataGridViewProps, type DataGridViewVariant, DataPage, type DataPageActionsProps, type DataPageContentProps, type DataPageFooterProps, type DataPageGroupBodyProps, type DataPageGroupHeaderProps, type DataPageGroupProps, type DataPageGroupToolbarProps, type DataPageHeaderProps, type DataPageProps, type DataPageTabProps, type DataPageTabsProps, type DataPageTitleBlockProps, type DensityId, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateAction, type EmptyStateProps, FormWizardBodyTemplate, FormWizardBodyTemplateDemo, type FormWizardBodyTemplateProps, type FormWizardStep, type FormWizardVariant, type GlobalTheme, type GroupLayout, type GroupVariant, Input, Label, LoginBodyTemplate, type LoginBodyTemplateProps, type LoginLayout, type LoginSide, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuPositioner, NavigationMenuTrigger, PageBreadcrumb, type PageBreadcrumbItem, PageTopBar, type PageTopBarProps, type PageTopBarVariant, Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, type ShellId, Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, Skeleton, Slider, Switch, TEMPLATES, TEMPLATE_DEFINITIONS, TEMPLATE_NAVIGATION, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, type TemplateCodeBuilder, type TemplateCodeContext, type TemplateConfig, type TemplateDefinition, type TemplateExportKind, type TemplateGroup, type TemplateId, type TemplateNavigationGroup, type TemplateNavigationGroupId, type TemplateNavigationItem, type TemplateOptionChoice, type TemplateOptionSpec, type TemplateOverride, type ThemeState, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, type TypographyBodyTemplateProps, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, createTemplateOverrides, getTemplateDefinition, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useStyleInjector, useThemeStore };