@loykin/designkit 0.0.1-dev.1 → 0.0.1-dev.3

package/dist/index.d.cts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ComponentType } from 'react';
+import React__default, { ComponentType, CSSProperties, ReactNode } 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';
@@ -237,7 +237,7 @@ declare function TabsContent({ className, ...props }: Tabs$2.Panel.Props): react
 
 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';
+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' | 'dashboard' | 'workbench-panel-editor' | 'workbench-sql-editor' | 'workbench-agent-chat' | 'browse' | 'detail' | 'detail-record' | 'detail-full' | 'list-detail';
 interface GlobalTheme {
     radius: number;
     primaryHue: number;
@@ -266,6 +266,71 @@ interface ThemeState {
     setTemplate: (template: TemplateId) => void;
 }
 
+interface DashboardPanelProps {
+    title?: string;
+    description?: string;
+    loading?: boolean;
+    error?: string | null;
+    transparent?: boolean;
+    /** Edit mode — shows drag handle and grab cursor on the header */
+    editable?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    headerRight?: ReactNode;
+}
+declare const DashboardPanel: React$1.ForwardRefExoticComponent<DashboardPanelProps & React$1.RefAttributes<HTMLDivElement>>;
+interface DashboardBodyTemplateProps {
+    theme?: CSSProperties;
+    className?: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    topBar?: ReactNode;
+    toolbar?: ReactNode;
+    /** Variable bar — rendered as a separate strip between the header and content */
+    variableBar?: ReactNode;
+    children?: ReactNode;
+    contentClassName?: string;
+}
+declare function DashboardBodyTemplate({ theme, className, title, description, topBar, toolbar, variableBar, children, contentClassName, }: DashboardBodyTemplateProps): react_jsx_runtime.JSX.Element;
+
+interface WorkbenchBodyTemplateProps {
+    theme?: CSSProperties;
+    className?: string;
+    contentClassName?: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    topBar?: ReactNode;
+    /** Right side of the built-in workbench header. Prefer this over toolbar for new code. */
+    headerRight?: ReactNode;
+    /** @deprecated Use headerRight. */
+    toolbar?: ReactNode;
+    actions?: ReactNode;
+    leftPane?: ReactNode;
+    mainPane?: ReactNode;
+    rightPane?: ReactNode;
+    bottomPane?: ReactNode;
+    children?: ReactNode;
+    resizable?: boolean;
+    leftPaneCollapsed?: boolean;
+    rightPaneCollapsed?: boolean;
+    bottomPaneCollapsed?: boolean;
+    leftPaneWidth?: number;
+    rightPaneWidth?: number;
+    bottomPaneHeight?: number;
+    minLeftPaneWidth?: number;
+    maxLeftPaneWidth?: number;
+    minRightPaneWidth?: number;
+    maxRightPaneWidth?: number;
+    minBottomPaneHeight?: number;
+    maxBottomPaneHeight?: number;
+    leftPaneClassName?: string;
+    mainPaneClassName?: string;
+    rightPaneClassName?: string;
+    bottomPaneClassName?: string;
+}
+declare function WorkbenchBodyTemplate({ theme, className, contentClassName, title, description, topBar, headerRight, toolbar, actions, leftPane, mainPane, rightPane, bottomPane, children, resizable, leftPaneCollapsed, rightPaneCollapsed, bottomPaneCollapsed, leftPaneWidth, rightPaneWidth, bottomPaneHeight, minLeftPaneWidth, maxLeftPaneWidth, minRightPaneWidth, maxRightPaneWidth, minBottomPaneHeight, maxBottomPaneHeight, leftPaneClassName, mainPaneClassName, rightPaneClassName, bottomPaneClassName, }: WorkbenchBodyTemplateProps): react_jsx_runtime.JSX.Element;
+
 interface DataBodyTabProps {
     id: string;
     label: React__default.ReactNode;
@@ -300,6 +365,7 @@ interface DataBodyGroupProps {
     description?: React__default.ReactNode;
     actions?: React__default.ReactNode;
     danger?: boolean;
+    className?: string;
     children?: React__default.ReactNode;
 }
 declare function DataBodyGroup(props: DataBodyGroupProps): react_jsx_runtime.JSX.Element;
@@ -342,6 +408,99 @@ declare const DataBodyTemplate: typeof Root$1 & {
     Field: typeof DataBodyField;
 };
 
+interface BrowseBodyTemplateProps {
+    theme?: React__default.CSSProperties;
+    className?: string;
+    topBar?: React__default.ReactNode;
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    sidebar: React__default.ReactNode;
+    sidebarTitle?: string;
+    sidebarWidth?: string;
+    toolbar?: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    contentClassName?: string;
+    children?: React__default.ReactNode;
+}
+declare function BrowseBodyTemplate({ theme, className, topBar, title, description, actions, sidebar, sidebarTitle, sidebarWidth, toolbar, footer, contentClassName, children, }: BrowseBodyTemplateProps): react_jsx_runtime.JSX.Element;
+
+type DetailBodyVariant = 'media' | 'record' | 'full';
+interface DetailBodyTemplateProps {
+    variant?: DetailBodyVariant;
+    theme?: React__default.CSSProperties;
+    className?: string;
+    topBar?: React__default.ReactNode;
+    header?: React__default.ReactNode;
+    lead?: React__default.ReactNode;
+    eyebrow?: React__default.ReactNode;
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    status?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    media?: React__default.ReactNode;
+    aside?: React__default.ReactNode;
+    summary?: React__default.ReactNode;
+    stickyAside?: boolean;
+    contentClassName?: string;
+    mediaClassName?: string;
+    asideClassName?: string;
+    children?: React__default.ReactNode;
+}
+interface DetailBodyHeaderProps {
+    eyebrow?: React__default.ReactNode;
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    status?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    compact?: boolean;
+    className?: string;
+}
+declare function DetailBodyHeader({ eyebrow, title, description, status, actions, compact, className, }: DetailBodyHeaderProps): react_jsx_runtime.JSX.Element;
+interface DetailBodyTabProps {
+    id: string;
+    label: React__default.ReactNode;
+    count?: number;
+    disabled?: boolean;
+    children?: React__default.ReactNode;
+}
+declare function DetailBodyTab(_props: DetailBodyTabProps): null;
+interface DetailBodySectionProps {
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    surface?: 'plain' | 'card' | 'bordered';
+    className?: string;
+    children?: React__default.ReactNode;
+}
+declare function DetailBodySection({ title, description, actions, surface, className, children, }: DetailBodySectionProps): react_jsx_runtime.JSX.Element;
+declare function DetailBodyTemplateRoot({ variant, theme, className, topBar, header, lead, eyebrow, title, description, status, actions, media, aside, summary, stickyAside, contentClassName, mediaClassName, asideClassName, children, }: DetailBodyTemplateProps): react_jsx_runtime.JSX.Element;
+declare const DetailBodyTemplate: typeof DetailBodyTemplateRoot & {
+    Header: typeof DetailBodyHeader;
+    Tab: typeof DetailBodyTab;
+    Section: typeof DetailBodySection;
+};
+
+interface ListDetailBodyTemplateProps {
+    theme?: CSSProperties;
+    className?: string;
+    topBar?: ReactNode;
+    /** List pane content — typically a DataGrid, DataGridList, or navigation list */
+    list: ReactNode;
+    /**
+     * Detail pane content. When undefined, `emptyDetail` is shown on desktop
+     * and the list pane fills the screen on mobile.
+     */
+    detail?: ReactNode;
+    /** Placeholder rendered in the detail pane when nothing is selected */
+    emptyDetail?: ReactNode;
+    /** Width of the list pane in px. Default: 320 */
+    listWidth?: number;
+    listClassName?: string;
+    detailClassName?: string;
+}
+declare function ListDetailBodyTemplate({ theme, className, topBar, list, detail, emptyDetail, listWidth, listClassName, detailClassName, }: ListDetailBodyTemplateProps): react_jsx_runtime.JSX.Element;
+
 type FormWizardVariant = 'card' | 'plain';
 interface FormWizardStep {
     key: string;
@@ -526,6 +685,7 @@ declare function buildTemplateTheme(g: {
     radius: number;
     primaryHue: number;
     primaryChroma: number;
+    darkMode?: boolean;
     density?: DensityId;
     fontScale?: number;
     lineHeight?: number;
@@ -542,4 +702,4 @@ 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, type DataBodyTemplateProps, 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, type FormWizardBodyTemplateProps, type FormWizardStep, type FormWizardVariant, type GlobalTheme, type GroupLayout, type GroupVariant, Input, Label, type LoginBg, LoginBodyTemplate, type LoginBodyTemplateProps, type LoginCard, type LoginCardWidth, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, type TemplateId, type TemplateNavigationGroup, type TemplateNavigationItem, type TemplateOverride, type ThemeState, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, type TypographyBodyTemplateProps, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useStyleInjector, useThemeStore };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BrowseBodyTemplate, type BrowseBodyTemplateProps, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, type ColorsBodyTemplateProps, DashboardBodyTemplate, type DashboardBodyTemplateProps, DashboardPanel, type DashboardPanelProps, type DataBodyBodyProps, type DataBodyFieldProps, type DataBodyGroupProps, type DataBodyRowProps, type DataBodySectionProps, type DataBodySummaryProps, type DataBodyTabProps, DataBodyTemplate, type DataBodyTemplateProps, 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, type DetailBodyHeaderProps, type DetailBodySectionProps, type DetailBodyTabProps, DetailBodyTemplate, type DetailBodyTemplateProps, type DetailBodyVariant, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateAction, type EmptyStateProps, FormWizardBodyTemplate, type FormWizardBodyTemplateProps, type FormWizardStep, type FormWizardVariant, type GlobalTheme, type GroupLayout, type GroupVariant, Input, Label, ListDetailBodyTemplate, type ListDetailBodyTemplateProps, type LoginBg, LoginBodyTemplate, type LoginBodyTemplateProps, type LoginCard, type LoginCardWidth, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, type TemplateId, type TemplateNavigationGroup, type TemplateNavigationItem, type TemplateOverride, type ThemeState, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, type TypographyBodyTemplateProps, WorkbenchBodyTemplate, type WorkbenchBodyTemplateProps, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useStyleInjector, useThemeStore };

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import * as React$1 from 'react';
-import React__default, { ComponentType } from 'react';
+import React__default, { ComponentType, CSSProperties, ReactNode } 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';
@@ -237,7 +237,7 @@ declare function TabsContent({ className, ...props }: Tabs$2.Panel.Props): react
 
 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';
+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' | 'dashboard' | 'workbench-panel-editor' | 'workbench-sql-editor' | 'workbench-agent-chat' | 'browse' | 'detail' | 'detail-record' | 'detail-full' | 'list-detail';
 interface GlobalTheme {
     radius: number;
     primaryHue: number;
@@ -266,6 +266,71 @@ interface ThemeState {
     setTemplate: (template: TemplateId) => void;
 }
 
+interface DashboardPanelProps {
+    title?: string;
+    description?: string;
+    loading?: boolean;
+    error?: string | null;
+    transparent?: boolean;
+    /** Edit mode — shows drag handle and grab cursor on the header */
+    editable?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+    headerRight?: ReactNode;
+}
+declare const DashboardPanel: React$1.ForwardRefExoticComponent<DashboardPanelProps & React$1.RefAttributes<HTMLDivElement>>;
+interface DashboardBodyTemplateProps {
+    theme?: CSSProperties;
+    className?: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    topBar?: ReactNode;
+    toolbar?: ReactNode;
+    /** Variable bar — rendered as a separate strip between the header and content */
+    variableBar?: ReactNode;
+    children?: ReactNode;
+    contentClassName?: string;
+}
+declare function DashboardBodyTemplate({ theme, className, title, description, topBar, toolbar, variableBar, children, contentClassName, }: DashboardBodyTemplateProps): react_jsx_runtime.JSX.Element;
+
+interface WorkbenchBodyTemplateProps {
+    theme?: CSSProperties;
+    className?: string;
+    contentClassName?: string;
+    title?: ReactNode;
+    description?: ReactNode;
+    topBar?: ReactNode;
+    /** Right side of the built-in workbench header. Prefer this over toolbar for new code. */
+    headerRight?: ReactNode;
+    /** @deprecated Use headerRight. */
+    toolbar?: ReactNode;
+    actions?: ReactNode;
+    leftPane?: ReactNode;
+    mainPane?: ReactNode;
+    rightPane?: ReactNode;
+    bottomPane?: ReactNode;
+    children?: ReactNode;
+    resizable?: boolean;
+    leftPaneCollapsed?: boolean;
+    rightPaneCollapsed?: boolean;
+    bottomPaneCollapsed?: boolean;
+    leftPaneWidth?: number;
+    rightPaneWidth?: number;
+    bottomPaneHeight?: number;
+    minLeftPaneWidth?: number;
+    maxLeftPaneWidth?: number;
+    minRightPaneWidth?: number;
+    maxRightPaneWidth?: number;
+    minBottomPaneHeight?: number;
+    maxBottomPaneHeight?: number;
+    leftPaneClassName?: string;
+    mainPaneClassName?: string;
+    rightPaneClassName?: string;
+    bottomPaneClassName?: string;
+}
+declare function WorkbenchBodyTemplate({ theme, className, contentClassName, title, description, topBar, headerRight, toolbar, actions, leftPane, mainPane, rightPane, bottomPane, children, resizable, leftPaneCollapsed, rightPaneCollapsed, bottomPaneCollapsed, leftPaneWidth, rightPaneWidth, bottomPaneHeight, minLeftPaneWidth, maxLeftPaneWidth, minRightPaneWidth, maxRightPaneWidth, minBottomPaneHeight, maxBottomPaneHeight, leftPaneClassName, mainPaneClassName, rightPaneClassName, bottomPaneClassName, }: WorkbenchBodyTemplateProps): react_jsx_runtime.JSX.Element;
+
 interface DataBodyTabProps {
     id: string;
     label: React__default.ReactNode;
@@ -300,6 +365,7 @@ interface DataBodyGroupProps {
     description?: React__default.ReactNode;
     actions?: React__default.ReactNode;
     danger?: boolean;
+    className?: string;
     children?: React__default.ReactNode;
 }
 declare function DataBodyGroup(props: DataBodyGroupProps): react_jsx_runtime.JSX.Element;
@@ -342,6 +408,99 @@ declare const DataBodyTemplate: typeof Root$1 & {
     Field: typeof DataBodyField;
 };
 
+interface BrowseBodyTemplateProps {
+    theme?: React__default.CSSProperties;
+    className?: string;
+    topBar?: React__default.ReactNode;
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    sidebar: React__default.ReactNode;
+    sidebarTitle?: string;
+    sidebarWidth?: string;
+    toolbar?: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    contentClassName?: string;
+    children?: React__default.ReactNode;
+}
+declare function BrowseBodyTemplate({ theme, className, topBar, title, description, actions, sidebar, sidebarTitle, sidebarWidth, toolbar, footer, contentClassName, children, }: BrowseBodyTemplateProps): react_jsx_runtime.JSX.Element;
+
+type DetailBodyVariant = 'media' | 'record' | 'full';
+interface DetailBodyTemplateProps {
+    variant?: DetailBodyVariant;
+    theme?: React__default.CSSProperties;
+    className?: string;
+    topBar?: React__default.ReactNode;
+    header?: React__default.ReactNode;
+    lead?: React__default.ReactNode;
+    eyebrow?: React__default.ReactNode;
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    status?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    media?: React__default.ReactNode;
+    aside?: React__default.ReactNode;
+    summary?: React__default.ReactNode;
+    stickyAside?: boolean;
+    contentClassName?: string;
+    mediaClassName?: string;
+    asideClassName?: string;
+    children?: React__default.ReactNode;
+}
+interface DetailBodyHeaderProps {
+    eyebrow?: React__default.ReactNode;
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    status?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    compact?: boolean;
+    className?: string;
+}
+declare function DetailBodyHeader({ eyebrow, title, description, status, actions, compact, className, }: DetailBodyHeaderProps): react_jsx_runtime.JSX.Element;
+interface DetailBodyTabProps {
+    id: string;
+    label: React__default.ReactNode;
+    count?: number;
+    disabled?: boolean;
+    children?: React__default.ReactNode;
+}
+declare function DetailBodyTab(_props: DetailBodyTabProps): null;
+interface DetailBodySectionProps {
+    title?: React__default.ReactNode;
+    description?: React__default.ReactNode;
+    actions?: React__default.ReactNode;
+    surface?: 'plain' | 'card' | 'bordered';
+    className?: string;
+    children?: React__default.ReactNode;
+}
+declare function DetailBodySection({ title, description, actions, surface, className, children, }: DetailBodySectionProps): react_jsx_runtime.JSX.Element;
+declare function DetailBodyTemplateRoot({ variant, theme, className, topBar, header, lead, eyebrow, title, description, status, actions, media, aside, summary, stickyAside, contentClassName, mediaClassName, asideClassName, children, }: DetailBodyTemplateProps): react_jsx_runtime.JSX.Element;
+declare const DetailBodyTemplate: typeof DetailBodyTemplateRoot & {
+    Header: typeof DetailBodyHeader;
+    Tab: typeof DetailBodyTab;
+    Section: typeof DetailBodySection;
+};
+
+interface ListDetailBodyTemplateProps {
+    theme?: CSSProperties;
+    className?: string;
+    topBar?: ReactNode;
+    /** List pane content — typically a DataGrid, DataGridList, or navigation list */
+    list: ReactNode;
+    /**
+     * Detail pane content. When undefined, `emptyDetail` is shown on desktop
+     * and the list pane fills the screen on mobile.
+     */
+    detail?: ReactNode;
+    /** Placeholder rendered in the detail pane when nothing is selected */
+    emptyDetail?: ReactNode;
+    /** Width of the list pane in px. Default: 320 */
+    listWidth?: number;
+    listClassName?: string;
+    detailClassName?: string;
+}
+declare function ListDetailBodyTemplate({ theme, className, topBar, list, detail, emptyDetail, listWidth, listClassName, detailClassName, }: ListDetailBodyTemplateProps): react_jsx_runtime.JSX.Element;
+
 type FormWizardVariant = 'card' | 'plain';
 interface FormWizardStep {
     key: string;
@@ -526,6 +685,7 @@ declare function buildTemplateTheme(g: {
     radius: number;
     primaryHue: number;
     primaryChroma: number;
+    darkMode?: boolean;
     density?: DensityId;
     fontScale?: number;
     lineHeight?: number;
@@ -542,4 +702,4 @@ 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, type DataBodyTemplateProps, 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, type FormWizardBodyTemplateProps, type FormWizardStep, type FormWizardVariant, type GlobalTheme, type GroupLayout, type GroupVariant, Input, Label, type LoginBg, LoginBodyTemplate, type LoginBodyTemplateProps, type LoginCard, type LoginCardWidth, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, type TemplateId, type TemplateNavigationGroup, type TemplateNavigationItem, type TemplateOverride, type ThemeState, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, type TypographyBodyTemplateProps, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useStyleInjector, useThemeStore };
+export { Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, BrowseBodyTemplate, type BrowseBodyTemplateProps, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, type ColorsBodyTemplateProps, DashboardBodyTemplate, type DashboardBodyTemplateProps, DashboardPanel, type DashboardPanelProps, type DataBodyBodyProps, type DataBodyFieldProps, type DataBodyGroupProps, type DataBodyRowProps, type DataBodySectionProps, type DataBodySummaryProps, type DataBodyTabProps, DataBodyTemplate, type DataBodyTemplateProps, 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, type DetailBodyHeaderProps, type DetailBodySectionProps, type DetailBodyTabProps, DetailBodyTemplate, type DetailBodyTemplateProps, type DetailBodyVariant, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, type EmptyStateAction, type EmptyStateProps, FormWizardBodyTemplate, type FormWizardBodyTemplateProps, type FormWizardStep, type FormWizardVariant, type GlobalTheme, type GroupLayout, type GroupVariant, Input, Label, ListDetailBodyTemplate, type ListDetailBodyTemplateProps, type LoginBg, LoginBodyTemplate, type LoginBodyTemplateProps, type LoginCard, type LoginCardWidth, 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, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs$1 as Tabs, TabsContent, TabsList, TabsTrigger, type TemplateId, type TemplateNavigationGroup, type TemplateNavigationItem, type TemplateOverride, type ThemeState, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, TypographyBodyTemplate, type TypographyBodyTemplateProps, WorkbenchBodyTemplate, type WorkbenchBodyTemplateProps, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useStyleInjector, useThemeStore };