@loykin/designkit 0.0.1 → 0.0.3

package/dist/index.d.cts

@@ -330,19 +330,43 @@ interface WorkbenchBodyTemplateProps {
 }
 declare function WorkbenchBodyTemplate({ theme, className, contentClassName, title, description, status, topBar, headerRight, actions, leftPane, mainPane, rightPane, bottomPane, children, resizable, leftPaneCollapsed, rightPaneCollapsed, bottomPaneCollapsed, leftPaneWidth, rightPaneWidth, bottomPaneHeight, minLeftPaneWidth, maxLeftPaneWidth, minRightPaneWidth, maxRightPaneWidth, minBottomPaneHeight, maxBottomPaneHeight, onResize, leftPaneClassName, mainPaneClassName, rightPaneClassName, bottomPaneClassName, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): React__default.JSX.Element;
 
+/**
+ * Defines one tab inside `DataBodyTemplate`.
+ *
+ * Must be rendered beneath a `DataBodyTemplate` root. Do not mix `Tab`, `Section`,
+ * and `Body` as sibling layout modes in the same root.
+ */
 interface DataBodyTabProps {
     id: string;
     label: React__default.ReactNode;
     count?: number;
     disabled?: boolean;
+    /** Search and filter controls scoped to this tab. */
+    toolbarLeft?: React__default.ReactNode;
+    /** Actions scoped to this tab, such as resource creation and export. */
+    toolbarRight?: React__default.ReactNode;
+    /** Content rendered beneath the active tab body, such as pagination. */
+    footer?: React__default.ReactNode;
     children: React__default.ReactNode;
 }
 declare function DataBodyTab(_props: DataBodyTabProps): null;
+/**
+ * Defines the single-pane body of `DataBodyTemplate`.
+ *
+ * Must be rendered beneath a `DataBodyTemplate` root. Use this instead of `Tab`
+ * or `Section` when the page has one full-height content pane.
+ */
 interface DataBodyBodyProps {
     children?: React__default.ReactNode;
     className?: string;
 }
 declare function DataBodyBody(_props: DataBodyBodyProps): null;
+/**
+ * Defines one section in the left-navigation layout of `DataBodyTemplate`.
+ *
+ * Must be rendered beneath a `DataBodyTemplate` root. Do not combine sections
+ * with `Tab` or `Body` siblings in the same root.
+ */
 interface DataBodySectionProps {
     id: string;
     label: React__default.ReactNode;
@@ -351,14 +375,40 @@ interface DataBodySectionProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodySection(_props: DataBodySectionProps): null;
+/** Adds summary content beneath the header of a `DataBodyTemplate` root. */
 interface DataBodySummaryProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodySummary(_props: DataBodySummaryProps): null;
+/**
+ * Keeps controls, async status, data content, and pagination in one resource boundary.
+ * Render it inside a `Tab` or `Body` when those controls are scoped to that content.
+ */
+interface DataBodyResourceProps {
+    toolbarLeft?: React__default.ReactNode;
+    toolbarRight?: React__default.ReactNode;
+    refreshing?: boolean;
+    refreshingLabel?: string;
+    notice?: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    className?: string;
+    bodyClassName?: string;
+}
+declare function DataBodyResource({ toolbarLeft, toolbarRight, refreshing, refreshingLabel, notice, footer, children, className, bodyClassName, }: DataBodyResourceProps): React__default.JSX.Element;
 type GroupLayout = 'stacked' | 'horizontal' | 'inline' | 'split';
 type GroupVariant = 'card' | 'plain' | 'bordered';
+/**
+ * Groups related content inside `DataBodyTemplate`.
+ *
+ * `DataBodyTemplate.Group` is a compound child and must never be rendered as a
+ * standalone page component. Wrap it in `DataBodyTemplate`, optionally inside a
+ * `Tab`, `Section`, or `Body`.
+ */
 interface DataBodyGroupProps {
+    /** Visual arrangement of the group. @defaultValue `'stacked'` */
     layout?: GroupLayout;
+    /** Surface treatment. Defaults depend on `layout`. */
     variant?: GroupVariant;
     title?: React__default.ReactNode;
     description?: React__default.ReactNode;
@@ -368,12 +418,14 @@ interface DataBodyGroupProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodyGroup(props: DataBodyGroupProps): React__default.JSX.Element;
+/** Read-only label/value content for a `DataBodyTemplate.Group`. */
 interface DataBodyFieldProps {
     label: string;
     description?: string;
     children?: React__default.ReactNode;
 }
 declare function DataBodyField({ label, description, children }: DataBodyFieldProps): React__default.JSX.Element;
+/** Form label/control content for a `DataBodyTemplate.Group`. */
 interface DataBodyRowProps {
     label: string;
     description?: string;
@@ -381,6 +433,12 @@ interface DataBodyRowProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodyRow({ label, description, required, children }: DataBodyRowProps): React__default.JSX.Element;
+/**
+ * Props for the required root of the `DataBodyTemplate` compound component.
+ *
+ * Choose one primary child mode: direct content/groups, `Tab`, `Section`, or
+ * `Body`. Do not combine those layout modes in the same root.
+ */
 interface DataBodyTemplateProps {
     theme?: React__default.CSSProperties;
     className?: string;
@@ -397,12 +455,31 @@ interface DataBodyTemplateProps {
     children?: React__default.ReactNode;
     contentClassName?: string;
 }
-declare function Root$1({ theme, className, topBar, title, description, status, actions, toolbarLeft, toolbarRight, activeTab: controlledActive, defaultTab, onTabChange, children, contentClassName, }: DataBodyTemplateProps): React__default.JSX.Element;
+declare function Root$1(props: DataBodyTemplateProps): React__default.JSX.Element;
+/**
+ * Page-level template for data, list, tab, form, and settings experiences.
+ *
+ * Compound members such as `DataBodyTemplate.Resource`, `Group`, `Tab`, `Section`,
+ * `Body`, `Row`, and `Field` must be rendered beneath this root. Rendering a compound
+ * member without the root throws a descriptive runtime error.
+ *
+ * @example
+ * ```tsx
+ * <DataBodyTemplate title="Settings">
+ *   <DataBodyTemplate.Group title="Profile">
+ *     <DataBodyTemplate.Row label="Name">
+ *       <Input />
+ *     </DataBodyTemplate.Row>
+ *   </DataBodyTemplate.Group>
+ * </DataBodyTemplate>
+ * ```
+ */
 declare const DataBodyTemplate: typeof Root$1 & {
     Body: typeof DataBodyBody;
     Tab: typeof DataBodyTab;
     Section: typeof DataBodySection;
     Summary: typeof DataBodySummary;
+    Resource: typeof DataBodyResource;
     Group: typeof DataBodyGroup;
     Row: typeof DataBodyRow;
     Field: typeof DataBodyField;
@@ -777,4 +854,4 @@ declare function cn(...inputs: ClassValue[]): string;
 
 declare const useThemeStore: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BrowseBodyTemplate, type BrowseBodyTemplateProps, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, type ColorsBodyTemplateProps, type CurrentTemplateId, 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, PanelTemplate, type PanelTemplateProps, type PanelTemplateSectionProps, 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, type StyleInjectorOptions, 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, type WorkbenchResizeState, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useSidebarOptional, useStyleInjector, useThemeStore };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BrowseBodyTemplate, type BrowseBodyTemplateProps, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, type ColorsBodyTemplateProps, type CurrentTemplateId, DashboardBodyTemplate, type DashboardBodyTemplateProps, DashboardPanel, type DashboardPanelProps, type DataBodyBodyProps, type DataBodyFieldProps, type DataBodyGroupProps, type DataBodyResourceProps, 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, PanelTemplate, type PanelTemplateProps, type PanelTemplateSectionProps, 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, type StyleInjectorOptions, 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, type WorkbenchResizeState, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useSidebarOptional, useStyleInjector, useThemeStore };

package/dist/index.d.ts

@@ -330,19 +330,43 @@ interface WorkbenchBodyTemplateProps {
 }
 declare function WorkbenchBodyTemplate({ theme, className, contentClassName, title, description, status, topBar, headerRight, actions, leftPane, mainPane, rightPane, bottomPane, children, resizable, leftPaneCollapsed, rightPaneCollapsed, bottomPaneCollapsed, leftPaneWidth, rightPaneWidth, bottomPaneHeight, minLeftPaneWidth, maxLeftPaneWidth, minRightPaneWidth, maxRightPaneWidth, minBottomPaneHeight, maxBottomPaneHeight, onResize, leftPaneClassName, mainPaneClassName, rightPaneClassName, bottomPaneClassName, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): React__default.JSX.Element;
 
+/**
+ * Defines one tab inside `DataBodyTemplate`.
+ *
+ * Must be rendered beneath a `DataBodyTemplate` root. Do not mix `Tab`, `Section`,
+ * and `Body` as sibling layout modes in the same root.
+ */
 interface DataBodyTabProps {
     id: string;
     label: React__default.ReactNode;
     count?: number;
     disabled?: boolean;
+    /** Search and filter controls scoped to this tab. */
+    toolbarLeft?: React__default.ReactNode;
+    /** Actions scoped to this tab, such as resource creation and export. */
+    toolbarRight?: React__default.ReactNode;
+    /** Content rendered beneath the active tab body, such as pagination. */
+    footer?: React__default.ReactNode;
     children: React__default.ReactNode;
 }
 declare function DataBodyTab(_props: DataBodyTabProps): null;
+/**
+ * Defines the single-pane body of `DataBodyTemplate`.
+ *
+ * Must be rendered beneath a `DataBodyTemplate` root. Use this instead of `Tab`
+ * or `Section` when the page has one full-height content pane.
+ */
 interface DataBodyBodyProps {
     children?: React__default.ReactNode;
     className?: string;
 }
 declare function DataBodyBody(_props: DataBodyBodyProps): null;
+/**
+ * Defines one section in the left-navigation layout of `DataBodyTemplate`.
+ *
+ * Must be rendered beneath a `DataBodyTemplate` root. Do not combine sections
+ * with `Tab` or `Body` siblings in the same root.
+ */
 interface DataBodySectionProps {
     id: string;
     label: React__default.ReactNode;
@@ -351,14 +375,40 @@ interface DataBodySectionProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodySection(_props: DataBodySectionProps): null;
+/** Adds summary content beneath the header of a `DataBodyTemplate` root. */
 interface DataBodySummaryProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodySummary(_props: DataBodySummaryProps): null;
+/**
+ * Keeps controls, async status, data content, and pagination in one resource boundary.
+ * Render it inside a `Tab` or `Body` when those controls are scoped to that content.
+ */
+interface DataBodyResourceProps {
+    toolbarLeft?: React__default.ReactNode;
+    toolbarRight?: React__default.ReactNode;
+    refreshing?: boolean;
+    refreshingLabel?: string;
+    notice?: React__default.ReactNode;
+    footer?: React__default.ReactNode;
+    children?: React__default.ReactNode;
+    className?: string;
+    bodyClassName?: string;
+}
+declare function DataBodyResource({ toolbarLeft, toolbarRight, refreshing, refreshingLabel, notice, footer, children, className, bodyClassName, }: DataBodyResourceProps): React__default.JSX.Element;
 type GroupLayout = 'stacked' | 'horizontal' | 'inline' | 'split';
 type GroupVariant = 'card' | 'plain' | 'bordered';
+/**
+ * Groups related content inside `DataBodyTemplate`.
+ *
+ * `DataBodyTemplate.Group` is a compound child and must never be rendered as a
+ * standalone page component. Wrap it in `DataBodyTemplate`, optionally inside a
+ * `Tab`, `Section`, or `Body`.
+ */
 interface DataBodyGroupProps {
+    /** Visual arrangement of the group. @defaultValue `'stacked'` */
     layout?: GroupLayout;
+    /** Surface treatment. Defaults depend on `layout`. */
     variant?: GroupVariant;
     title?: React__default.ReactNode;
     description?: React__default.ReactNode;
@@ -368,12 +418,14 @@ interface DataBodyGroupProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodyGroup(props: DataBodyGroupProps): React__default.JSX.Element;
+/** Read-only label/value content for a `DataBodyTemplate.Group`. */
 interface DataBodyFieldProps {
     label: string;
     description?: string;
     children?: React__default.ReactNode;
 }
 declare function DataBodyField({ label, description, children }: DataBodyFieldProps): React__default.JSX.Element;
+/** Form label/control content for a `DataBodyTemplate.Group`. */
 interface DataBodyRowProps {
     label: string;
     description?: string;
@@ -381,6 +433,12 @@ interface DataBodyRowProps {
     children?: React__default.ReactNode;
 }
 declare function DataBodyRow({ label, description, required, children }: DataBodyRowProps): React__default.JSX.Element;
+/**
+ * Props for the required root of the `DataBodyTemplate` compound component.
+ *
+ * Choose one primary child mode: direct content/groups, `Tab`, `Section`, or
+ * `Body`. Do not combine those layout modes in the same root.
+ */
 interface DataBodyTemplateProps {
     theme?: React__default.CSSProperties;
     className?: string;
@@ -397,12 +455,31 @@ interface DataBodyTemplateProps {
     children?: React__default.ReactNode;
     contentClassName?: string;
 }
-declare function Root$1({ theme, className, topBar, title, description, status, actions, toolbarLeft, toolbarRight, activeTab: controlledActive, defaultTab, onTabChange, children, contentClassName, }: DataBodyTemplateProps): React__default.JSX.Element;
+declare function Root$1(props: DataBodyTemplateProps): React__default.JSX.Element;
+/**
+ * Page-level template for data, list, tab, form, and settings experiences.
+ *
+ * Compound members such as `DataBodyTemplate.Resource`, `Group`, `Tab`, `Section`,
+ * `Body`, `Row`, and `Field` must be rendered beneath this root. Rendering a compound
+ * member without the root throws a descriptive runtime error.
+ *
+ * @example
+ * ```tsx
+ * <DataBodyTemplate title="Settings">
+ *   <DataBodyTemplate.Group title="Profile">
+ *     <DataBodyTemplate.Row label="Name">
+ *       <Input />
+ *     </DataBodyTemplate.Row>
+ *   </DataBodyTemplate.Group>
+ * </DataBodyTemplate>
+ * ```
+ */
 declare const DataBodyTemplate: typeof Root$1 & {
     Body: typeof DataBodyBody;
     Tab: typeof DataBodyTab;
     Section: typeof DataBodySection;
     Summary: typeof DataBodySummary;
+    Resource: typeof DataBodyResource;
     Group: typeof DataBodyGroup;
     Row: typeof DataBodyRow;
     Field: typeof DataBodyField;
@@ -777,4 +854,4 @@ declare function cn(...inputs: ClassValue[]): string;
 
 declare const useThemeStore: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
 
-export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BrowseBodyTemplate, type BrowseBodyTemplateProps, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, type ColorsBodyTemplateProps, type CurrentTemplateId, 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, PanelTemplate, type PanelTemplateProps, type PanelTemplateSectionProps, 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, type StyleInjectorOptions, 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, type WorkbenchResizeState, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useSidebarOptional, useStyleInjector, useThemeStore };
+export { AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, Avatar, AvatarBadge, AvatarFallback, AvatarGroup, AvatarGroupCount, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, BrowseBodyTemplate, type BrowseBodyTemplateProps, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, ColorsBodyTemplate, type ColorsBodyTemplateProps, type CurrentTemplateId, DashboardBodyTemplate, type DashboardBodyTemplateProps, DashboardPanel, type DashboardPanelProps, type DataBodyBodyProps, type DataBodyFieldProps, type DataBodyGroupProps, type DataBodyResourceProps, 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, PanelTemplate, type PanelTemplateProps, type PanelTemplateSectionProps, 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, type StyleInjectorOptions, 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, type WorkbenchResizeState, badgeVariants, buildTemplateTheme, buildTopBar, buttonVariants, cn, navigationMenuTriggerStyle, tabsListVariants, useIsMobile, useSidebar, useSidebarOptional, useStyleInjector, useThemeStore };

package/dist/index.js

@@ -3,7 +3,7 @@ import { clsx } from 'clsx';
 import { twMerge } from 'tailwind-merge';
 import { Button as Button$1 } from '@base-ui/react/button';
 import { cva } from 'class-variance-authority';
-import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { Avatar as Avatar$1 } from '@base-ui/react/avatar';
 import { mergeProps } from '@base-ui/react/merge-props';
 import { useRender } from '@base-ui/react/use-render';
@@ -18,7 +18,7 @@ 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 * as React2 from 'react';
-import React2__default, { createContext, forwardRef, useContext, useEffect, useMemo, Children, useState, Fragment, useCallback } from 'react';
+import React2__default, { createContext, forwardRef, useContext, useEffect, useMemo, Children, useState, Fragment as Fragment$1, useCallback } from 'react';
 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';
@@ -2645,7 +2645,7 @@ function WorkbenchBodyTemplate({
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: cn("flex min-h-0 flex-1 overflow-hidden", contentClassName), children: [
-      showLeftPane && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      showLeftPane && /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(
           "aside",
           {
@@ -2685,7 +2685,7 @@ function WorkbenchBodyTemplate({
       ] }),
       /* @__PURE__ */ jsxs("main", { className: cn("flex min-w-0 flex-1 flex-col overflow-hidden", mainPaneClassName), children: [
         /* @__PURE__ */ jsx("div", { className: "min-h-0 flex-1 overflow-auto", children: mainPane ?? children }),
-        showBottomPane && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+        showBottomPane && /* @__PURE__ */ jsxs(Fragment, { children: [
           resizable && /* @__PURE__ */ jsx(
             ResizeHandle,
             {
@@ -2724,7 +2724,7 @@ function WorkbenchBodyTemplate({
           )
         ] })
       ] }),
-      showRightPane && /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      showRightPane && /* @__PURE__ */ jsxs(Fragment, { children: [
         resizable && /* @__PURE__ */ jsx(
           ResizeHandle,
           {
@@ -2765,19 +2765,30 @@ function WorkbenchBodyTemplate({
     ] })
   ] });
 }
+var DataBodyTemplateContext = React2__default.createContext(false);
+function useDataBodyTemplateParent(component) {
+  if (!React2__default.useContext(DataBodyTemplateContext)) {
+    throw new Error(
+      `[DesignKit] <DataBodyTemplate.${component}> must be rendered inside <DataBodyTemplate>. Wrap it like: <DataBodyTemplate><DataBodyTemplate.${component}>...</DataBodyTemplate.${component}></DataBodyTemplate>.`
+    );
+  }
+}
 function DataBodyTab(_props) {
+  useDataBodyTemplateParent("Tab");
   return null;
 }
 function isDataBodyTab(node) {
   return Boolean(node && typeof node === "object" && "type" in node && node.type === DataBodyTab);
 }
 function DataBodyBody(_props) {
+  useDataBodyTemplateParent("Body");
   return null;
 }
 function isDataBodyBody(node) {
   return Boolean(node && typeof node === "object" && "type" in node && node.type === DataBodyBody);
 }
 function DataBodySection(_props) {
+  useDataBodyTemplateParent("Section");
   return null;
 }
 function isDataBodySection(node) {
@@ -2786,6 +2797,7 @@ function isDataBodySection(node) {
   );
 }
 function DataBodySummary(_props) {
+  useDataBodyTemplateParent("Summary");
   return null;
 }
 function isDataBodySummary(node) {
@@ -2793,6 +2805,56 @@ function isDataBodySummary(node) {
     node && typeof node === "object" && "type" in node && node.type === DataBodySummary
   );
 }
+function DataBodyResource({
+  toolbarLeft,
+  toolbarRight,
+  refreshing,
+  refreshingLabel = "Refreshing",
+  notice,
+  footer,
+  children,
+  className,
+  bodyClassName
+}) {
+  useDataBodyTemplateParent("Resource");
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "data-body-resource",
+      "data-refreshing": refreshing ? "true" : "false",
+      className: cn("flex min-h-0 flex-col", className),
+      children: [
+        (toolbarLeft || toolbarRight || refreshing) && /* @__PURE__ */ jsxs(DataPage.GroupToolbar, { children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-wrap items-center gap-2", children: toolbarLeft }),
+          /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 items-center gap-2", children: [
+            refreshing && /* @__PURE__ */ jsxs(
+              "span",
+              {
+                className: "flex items-center gap-1.5 text-xs text-muted-foreground",
+                role: "status",
+                children: [
+                  /* @__PURE__ */ jsx("span", { className: "size-3 animate-spin rounded-full border-2 border-muted border-t-primary" }),
+                  refreshingLabel
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsx(DataPage.Actions, { children: toolbarRight })
+          ] })
+        ] }),
+        notice && /* @__PURE__ */ jsx("div", { className: "mb-3 shrink-0", children: notice }),
+        /* @__PURE__ */ jsx(DataPage.GroupBody, { className: cn("min-h-0 flex-1", bodyClassName), children }),
+        footer && /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "mt-3 shrink-0 border-t border-border pt-3",
+            "data-slot": "data-body-resource-footer",
+            children: footer
+          }
+        )
+      ]
+    }
+  );
+}
 var layoutDefaultVariant = {
   stacked: "plain",
   horizontal: "card",
@@ -2800,6 +2862,7 @@ var layoutDefaultVariant = {
   split: "bordered"
 };
 function DataBodyGroup(props) {
+  useDataBodyTemplateParent("Group");
   return renderGroupProps(props);
 }
 function isDataBodyGroup(node) {
@@ -2819,12 +2882,12 @@ function GroupWrapper({
     }
     return /* @__PURE__ */ jsx("div", { className: "rounded-(--radius) border border-border p-(--designkit-panel-gap)", children });
   }
-  return /* @__PURE__ */ jsx(Fragment$1, { children });
+  return /* @__PURE__ */ jsx(Fragment, { children });
 }
 function renderGroups(nodes) {
   const childArray = Children.toArray(nodes);
   if (!childArray.some(isDataBodyGroup)) return nodes;
-  return /* @__PURE__ */ jsx(Fragment$1, { children: childArray.map((child, i) => /* @__PURE__ */ jsx(Fragment, { children: isDataBodyGroup(child) ? renderGroup(child) : child }, i)) });
+  return /* @__PURE__ */ jsx(Fragment, { children: childArray.map((child, i) => /* @__PURE__ */ jsx(Fragment$1, { children: isDataBodyGroup(child) ? renderGroup(child) : child }, i)) });
 }
 function renderGroup(group) {
   return renderGroupProps(group.props);
@@ -2897,6 +2960,7 @@ function renderGroupProps(props) {
   ] });
 }
 function DataBodyField({ label, description, children }) {
+  useDataBodyTemplateParent("Field");
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2913,6 +2977,7 @@ function DataBodyField({ label, description, children }) {
   );
 }
 function DataBodyRow({ label, description, required, children }) {
+  useDataBodyTemplateParent("Row");
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -2935,7 +3000,7 @@ function TopBarSlot({ topBar }) {
   if (!topBar) return null;
   return /* @__PURE__ */ jsx("div", { className: "shrink-0", children: topBar });
 }
-function Root2({
+function RootContent({
   theme,
   className,
   topBar,
@@ -2979,7 +3044,13 @@ function Root2({
         /* @__PURE__ */ jsx(DataPage.Actions, { children: actions })
       ] }),
       summaryEl && /* @__PURE__ */ jsx("div", { className: "shrink-0 border-b border-border px-(--designkit-page-padding-x) py-(--designkit-panel-gap)", children: summaryEl.props.children }),
-      /* @__PURE__ */ jsx(DataPage.Content, { className: contentClassName, children: /* @__PURE__ */ jsx(DataPage.Group, { className: "h-full", children: /* @__PURE__ */ jsx(DataPage.GroupBody, { className: cn("h-full", bodyEl.props.className), children: bodyEl.props.children }) }) })
+      /* @__PURE__ */ jsx(DataPage.Content, { className: contentClassName, children: /* @__PURE__ */ jsxs(DataPage.Group, { className: "flex h-full flex-col", children: [
+        (toolbarLeft || toolbarRight) && /* @__PURE__ */ jsxs(DataPage.GroupToolbar, { children: [
+          /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: toolbarLeft }),
+          /* @__PURE__ */ jsx(DataPage.Actions, { children: toolbarRight })
+        ] }),
+        /* @__PURE__ */ jsx(DataPage.GroupBody, { className: cn("min-h-0 flex-1", bodyEl.props.className), children: bodyEl.props.children })
+      ] }) })
     ] });
   }
   if (hasSections) {
@@ -3018,6 +3089,8 @@ function Root2({
     ] });
   }
   const activeTabNode = tabs.find((tab) => tab.props.id === activeId) ?? tabs[0];
+  const activeToolbarLeft = activeTabNode?.props.toolbarLeft ?? toolbarLeft;
+  const activeToolbarRight = activeTabNode?.props.toolbarRight ?? toolbarRight;
   return /* @__PURE__ */ jsxs(DataPage, { className: cn("layout-databody", className), style: theme, children: [
     /* @__PURE__ */ jsx(TopBarSlot, { topBar }),
     /* @__PURE__ */ jsxs(DataPage.Header, { children: [
@@ -3037,19 +3110,24 @@ function Root2({
       tab.props.id
     )) }),
     /* @__PURE__ */ jsxs(DataPage.Content, { className: contentClassName, children: [
-      (toolbarLeft || toolbarRight) && /* @__PURE__ */ jsxs(DataPage.GroupToolbar, { children: [
-        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: toolbarLeft }),
-        /* @__PURE__ */ jsx(DataPage.Actions, { children: toolbarRight })
+      (activeToolbarLeft || activeToolbarRight) && /* @__PURE__ */ jsxs(DataPage.GroupToolbar, { children: [
+        /* @__PURE__ */ jsx("div", { className: "flex min-w-0 items-center gap-2", children: activeToolbarLeft }),
+        /* @__PURE__ */ jsx(DataPage.Actions, { children: activeToolbarRight })
       ] }),
-      hasTabs ? /* @__PURE__ */ jsx(DataPage.GroupBody, { className: "min-h-full", children: renderGroups(activeTabNode?.props.children) }) : /* @__PURE__ */ jsx(DataPage.GroupBody, { children: bodyChildren.map((child, i) => /* @__PURE__ */ jsx(Fragment, { children: isDataBodyGroup(child) ? renderGroup(child) : child }, i)) })
-    ] })
+      hasTabs ? /* @__PURE__ */ jsx(DataPage.GroupBody, { className: "min-h-full", children: renderGroups(activeTabNode?.props.children) }) : /* @__PURE__ */ jsx(DataPage.GroupBody, { children: bodyChildren.map((child, i) => /* @__PURE__ */ jsx(Fragment$1, { children: isDataBodyGroup(child) ? renderGroup(child) : child }, i)) })
+    ] }),
+    activeTabNode?.props.footer && /* @__PURE__ */ jsx(DataPage.Footer, { children: activeTabNode.props.footer })
   ] });
 }
+function Root2(props) {
+  return /* @__PURE__ */ jsx(DataBodyTemplateContext.Provider, { value: true, children: /* @__PURE__ */ jsx(RootContent, { ...props }) });
+}
 var DataBodyTemplate = Object.assign(Root2, {
   Body: DataBodyBody,
   Tab: DataBodyTab,
   Section: DataBodySection,
   Summary: DataBodySummary,
+  Resource: DataBodyResource,
   Group: DataBodyGroup,
   Row: DataBodyRow,
   Field: DataBodyField
@@ -3193,7 +3271,7 @@ function DetailBodySection({
   );
 }
 function renderChildren(nodes) {
-  return Children.toArray(nodes).map((child, i) => /* @__PURE__ */ jsx(Fragment, { children: child }, i));
+  return Children.toArray(nodes).map((child, i) => /* @__PURE__ */ jsx(Fragment$1, { children: child }, i));
 }
 function DetailBodyTemplateRoot({
   variant = "record",
@@ -3268,7 +3346,7 @@ function DetailBodyTemplateRoot({
   const hasRecordInspector = Boolean(leadSlot);
   const hasFullLeadArea = Boolean(leadSlot || insideAsideSlot);
   const layout = {
-    media: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    media: /* @__PURE__ */ jsxs(Fragment, { children: [
       leadSlot && /* @__PURE__ */ jsx("div", { className: "mb-(--designkit-panel-gap)", children: leadSlot }),
       body
     ] }),
@@ -3285,7 +3363,7 @@ function DetailBodyTemplateRoot({
         ]
       }
     ),
-    full: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+    full: /* @__PURE__ */ jsxs(Fragment, { children: [
       hasFullLeadArea && /* @__PURE__ */ jsxs(
         "div",
         {
@@ -3493,7 +3571,7 @@ function FormWizardBodyTemplate({
   return /* @__PURE__ */ jsxs(DataPage, { className: "layout-form-wizard", style: theme, children: [
     topBar && /* @__PURE__ */ jsx("div", { className: "shrink-0", children: topBar }),
     /* @__PURE__ */ jsx(DataPage.Header, { children: /* @__PURE__ */ jsx(DataPage.TitleBlock, { title, status }) }),
-    /* @__PURE__ */ jsx("div", { className: "shrink-0 px-(--designkit-page-padding-x) pb-4", children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: steps.map((step, i) => /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("div", { className: "shrink-0 px-(--designkit-page-padding-x) pb-4", children: /* @__PURE__ */ jsx("div", { className: "flex items-center", children: steps.map((step, i) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
       i > 0 && /* @__PURE__ */ jsx(
         "div",
         {