@loykin/designkit 0.0.1-dev.3 → 0.0.1-dev.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +58 -18
- package/dist/index.cjs +384 -246
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +53 -9
- package/dist/index.d.ts +53 -9
- package/dist/index.js +384 -248
- package/dist/index.js.map +1 -1
- package/dist/styles.css +133 -2
- package/package.json +4 -4
package/dist/index.d.cts
CHANGED
|
@@ -193,6 +193,7 @@ declare function SidebarMenuSubButton({ render, size, isActive, className, ...pr
|
|
|
193
193
|
size?: 'sm' | 'md';
|
|
194
194
|
isActive?: boolean;
|
|
195
195
|
}): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
|
|
196
|
+
declare function useSidebarOptional(): SidebarContextProps | null;
|
|
196
197
|
|
|
197
198
|
interface EmptyStateAction {
|
|
198
199
|
label: string;
|
|
@@ -237,7 +238,7 @@ declare function TabsContent({ className, ...props }: Tabs$2.Panel.Props): react
|
|
|
237
238
|
|
|
238
239
|
type ShellId = 'sidebar' | 'header';
|
|
239
240
|
type DensityId = 'compact' | 'default' | 'comfortable';
|
|
240
|
-
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';
|
|
241
|
+
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' | 'panel';
|
|
241
242
|
interface GlobalTheme {
|
|
242
243
|
radius: number;
|
|
243
244
|
primaryHue: number;
|
|
@@ -300,6 +301,7 @@ interface WorkbenchBodyTemplateProps {
|
|
|
300
301
|
contentClassName?: string;
|
|
301
302
|
title?: ReactNode;
|
|
302
303
|
description?: ReactNode;
|
|
304
|
+
status?: ReactNode;
|
|
303
305
|
topBar?: ReactNode;
|
|
304
306
|
/** Right side of the built-in workbench header. Prefer this over toolbar for new code. */
|
|
305
307
|
headerRight?: ReactNode;
|
|
@@ -328,8 +330,12 @@ interface WorkbenchBodyTemplateProps {
|
|
|
328
330
|
mainPaneClassName?: string;
|
|
329
331
|
rightPaneClassName?: string;
|
|
330
332
|
bottomPaneClassName?: string;
|
|
333
|
+
/** Mobile Sheet label for the left pane trigger */
|
|
334
|
+
leftPaneLabel?: string;
|
|
335
|
+
/** Mobile Sheet label for the right pane trigger */
|
|
336
|
+
rightPaneLabel?: string;
|
|
331
337
|
}
|
|
332
|
-
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;
|
|
338
|
+
declare function WorkbenchBodyTemplate({ theme, className, contentClassName, title, description, status, 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, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
333
339
|
|
|
334
340
|
interface DataBodyTabProps {
|
|
335
341
|
id: string;
|
|
@@ -388,6 +394,7 @@ interface DataBodyTemplateProps {
|
|
|
388
394
|
topBar?: React__default.ReactNode;
|
|
389
395
|
title?: React__default.ReactNode;
|
|
390
396
|
description?: React__default.ReactNode;
|
|
397
|
+
status?: React__default.ReactNode;
|
|
391
398
|
actions?: React__default.ReactNode;
|
|
392
399
|
toolbarLeft?: React__default.ReactNode;
|
|
393
400
|
toolbarRight?: React__default.ReactNode;
|
|
@@ -397,7 +404,7 @@ interface DataBodyTemplateProps {
|
|
|
397
404
|
children?: React__default.ReactNode;
|
|
398
405
|
contentClassName?: string;
|
|
399
406
|
}
|
|
400
|
-
declare function Root$1({ theme, className, topBar, title, description, actions, toolbarLeft, toolbarRight, activeTab: controlledActive, defaultTab, onTabChange, children, contentClassName, }: DataBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
407
|
+
declare function Root$1({ theme, className, topBar, title, description, status, actions, toolbarLeft, toolbarRight, activeTab: controlledActive, defaultTab, onTabChange, children, contentClassName, }: DataBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
401
408
|
declare const DataBodyTemplate: typeof Root$1 & {
|
|
402
409
|
Body: typeof DataBodyBody;
|
|
403
410
|
Tab: typeof DataBodyTab;
|
|
@@ -414,6 +421,7 @@ interface BrowseBodyTemplateProps {
|
|
|
414
421
|
topBar?: React__default.ReactNode;
|
|
415
422
|
title?: React__default.ReactNode;
|
|
416
423
|
description?: React__default.ReactNode;
|
|
424
|
+
status?: React__default.ReactNode;
|
|
417
425
|
actions?: React__default.ReactNode;
|
|
418
426
|
sidebar: React__default.ReactNode;
|
|
419
427
|
sidebarTitle?: string;
|
|
@@ -423,7 +431,7 @@ interface BrowseBodyTemplateProps {
|
|
|
423
431
|
contentClassName?: string;
|
|
424
432
|
children?: React__default.ReactNode;
|
|
425
433
|
}
|
|
426
|
-
declare function BrowseBodyTemplate({ theme, className, topBar, title, description, actions, sidebar, sidebarTitle, sidebarWidth, toolbar, footer, contentClassName, children, }: BrowseBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
434
|
+
declare function BrowseBodyTemplate({ theme, className, topBar, title, description, status, actions, sidebar, sidebarTitle, sidebarWidth, toolbar, footer, contentClassName, children, }: BrowseBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
427
435
|
|
|
428
436
|
type DetailBodyVariant = 'media' | 'record' | 'full';
|
|
429
437
|
interface DetailBodyTemplateProps {
|
|
@@ -498,8 +506,35 @@ interface ListDetailBodyTemplateProps {
|
|
|
498
506
|
listWidth?: number;
|
|
499
507
|
listClassName?: string;
|
|
500
508
|
detailClassName?: string;
|
|
509
|
+
/** Called when the mobile back button is pressed — use to clear the selected item */
|
|
510
|
+
onBack?: () => void;
|
|
511
|
+
/** Label for the mobile back button. Default: "Back" */
|
|
512
|
+
backLabel?: string;
|
|
501
513
|
}
|
|
502
|
-
declare function ListDetailBodyTemplate({ theme, className, topBar, list, detail, emptyDetail, listWidth, listClassName, detailClassName, }: ListDetailBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
514
|
+
declare function ListDetailBodyTemplate({ theme, className, topBar, list, detail, emptyDetail, listWidth, listClassName, detailClassName, onBack, backLabel, }: ListDetailBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
515
|
+
|
|
516
|
+
interface PanelTemplateProps {
|
|
517
|
+
title?: React__default.ReactNode;
|
|
518
|
+
eyebrow?: React__default.ReactNode;
|
|
519
|
+
status?: React__default.ReactNode;
|
|
520
|
+
actions?: React__default.ReactNode;
|
|
521
|
+
footer?: React__default.ReactNode;
|
|
522
|
+
children?: React__default.ReactNode;
|
|
523
|
+
className?: string;
|
|
524
|
+
bodyClassName?: string;
|
|
525
|
+
}
|
|
526
|
+
interface PanelTemplateSectionProps {
|
|
527
|
+
title?: React__default.ReactNode;
|
|
528
|
+
description?: React__default.ReactNode;
|
|
529
|
+
actions?: React__default.ReactNode;
|
|
530
|
+
className?: string;
|
|
531
|
+
children?: React__default.ReactNode;
|
|
532
|
+
}
|
|
533
|
+
declare function PanelTemplateSection({ title, description, actions, className, children, }: PanelTemplateSectionProps): react_jsx_runtime.JSX.Element;
|
|
534
|
+
declare function PanelTemplateRoot({ title, eyebrow, status, actions, footer, children, className, bodyClassName, }: PanelTemplateProps): react_jsx_runtime.JSX.Element;
|
|
535
|
+
declare const PanelTemplate: typeof PanelTemplateRoot & {
|
|
536
|
+
Section: typeof PanelTemplateSection;
|
|
537
|
+
};
|
|
503
538
|
|
|
504
539
|
type FormWizardVariant = 'card' | 'plain';
|
|
505
540
|
interface FormWizardStep {
|
|
@@ -511,6 +546,7 @@ interface FormWizardStep {
|
|
|
511
546
|
interface FormWizardBodyTemplateProps {
|
|
512
547
|
theme?: React.CSSProperties;
|
|
513
548
|
title?: string;
|
|
549
|
+
status?: React.ReactNode;
|
|
514
550
|
topBar?: React.ReactNode;
|
|
515
551
|
variant?: FormWizardVariant;
|
|
516
552
|
steps: FormWizardStep[];
|
|
@@ -519,7 +555,7 @@ interface FormWizardBodyTemplateProps {
|
|
|
519
555
|
onBack?: () => void;
|
|
520
556
|
onFinish?: () => void;
|
|
521
557
|
}
|
|
522
|
-
declare function FormWizardBodyTemplate({ theme, title, topBar, variant, steps, activeStep, onNext, onBack, onFinish, }: FormWizardBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
558
|
+
declare function FormWizardBodyTemplate({ theme, title, status, topBar, variant, steps, activeStep, onNext, onBack, onFinish, }: FormWizardBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
523
559
|
|
|
524
560
|
interface TypographyBodyTemplateProps {
|
|
525
561
|
theme?: React.CSSProperties;
|
|
@@ -546,6 +582,7 @@ interface DataPageTitleBlockProps {
|
|
|
546
582
|
title?: React.ReactNode;
|
|
547
583
|
description?: React.ReactNode;
|
|
548
584
|
breadcrumb?: React.ReactNode;
|
|
585
|
+
status?: React.ReactNode;
|
|
549
586
|
className?: string;
|
|
550
587
|
}
|
|
551
588
|
interface DataPageActionsProps {
|
|
@@ -595,7 +632,7 @@ interface DataPageFooterProps {
|
|
|
595
632
|
}
|
|
596
633
|
declare function Root({ children, className, style }: DataPageProps): react_jsx_runtime.JSX.Element;
|
|
597
634
|
declare function Header({ children, className }: DataPageHeaderProps): react_jsx_runtime.JSX.Element;
|
|
598
|
-
declare function TitleBlock({ title, description, breadcrumb, className }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
|
|
635
|
+
declare function TitleBlock({ title, description, breadcrumb, status, className }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
|
|
599
636
|
declare function Actions({ children, className }: DataPageActionsProps): react_jsx_runtime.JSX.Element | null;
|
|
600
637
|
declare function Tabs({ children, className }: DataPageTabsProps): react_jsx_runtime.JSX.Element | null;
|
|
601
638
|
declare function Tab({ active, count, children, onClick, disabled, className }: DataPageTabProps): react_jsx_runtime.JSX.Element;
|
|
@@ -646,6 +683,13 @@ interface PageTopBarProps {
|
|
|
646
683
|
className?: string;
|
|
647
684
|
style?: React__default.CSSProperties;
|
|
648
685
|
children?: React__default.ReactNode;
|
|
686
|
+
/**
|
|
687
|
+
* Mobile sidebar trigger shown at the far left of the bar.
|
|
688
|
+
* - undefined (default): auto-detect — shows when inside SidebarProvider on mobile
|
|
689
|
+
* - false: suppress entirely
|
|
690
|
+
* - ReactNode: custom trigger content
|
|
691
|
+
*/
|
|
692
|
+
sidebarTrigger?: false | React__default.ReactNode;
|
|
649
693
|
}
|
|
650
694
|
type PageBreadcrumbItem = string | {
|
|
651
695
|
label: string;
|
|
@@ -662,7 +706,7 @@ declare function buildTopBar(opts: {
|
|
|
662
706
|
left: React__default.ReactNode;
|
|
663
707
|
right?: React__default.ReactNode;
|
|
664
708
|
}): React__default.ReactNode;
|
|
665
|
-
declare function PageTopBar({ left, right, variant, height, className, style, children, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
|
|
709
|
+
declare function PageTopBar({ left, right, variant, height, className, style, children, sidebarTrigger, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
|
|
666
710
|
|
|
667
711
|
interface TemplateNavigationItem {
|
|
668
712
|
id: TemplateId;
|
|
@@ -702,4 +746,4 @@ declare function cn(...inputs: ClassValue[]): string;
|
|
|
702
746
|
|
|
703
747
|
declare const useThemeStore: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
|
|
704
748
|
|
|
705
|
-
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 };
|
|
749
|
+
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, 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, 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, useSidebarOptional, useStyleInjector, useThemeStore };
|
package/dist/index.d.ts
CHANGED
|
@@ -193,6 +193,7 @@ declare function SidebarMenuSubButton({ render, size, isActive, className, ...pr
|
|
|
193
193
|
size?: 'sm' | 'md';
|
|
194
194
|
isActive?: boolean;
|
|
195
195
|
}): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
|
|
196
|
+
declare function useSidebarOptional(): SidebarContextProps | null;
|
|
196
197
|
|
|
197
198
|
interface EmptyStateAction {
|
|
198
199
|
label: string;
|
|
@@ -237,7 +238,7 @@ declare function TabsContent({ className, ...props }: Tabs$2.Panel.Props): react
|
|
|
237
238
|
|
|
238
239
|
type ShellId = 'sidebar' | 'header';
|
|
239
240
|
type DensityId = 'compact' | 'default' | 'comfortable';
|
|
240
|
-
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';
|
|
241
|
+
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' | 'panel';
|
|
241
242
|
interface GlobalTheme {
|
|
242
243
|
radius: number;
|
|
243
244
|
primaryHue: number;
|
|
@@ -300,6 +301,7 @@ interface WorkbenchBodyTemplateProps {
|
|
|
300
301
|
contentClassName?: string;
|
|
301
302
|
title?: ReactNode;
|
|
302
303
|
description?: ReactNode;
|
|
304
|
+
status?: ReactNode;
|
|
303
305
|
topBar?: ReactNode;
|
|
304
306
|
/** Right side of the built-in workbench header. Prefer this over toolbar for new code. */
|
|
305
307
|
headerRight?: ReactNode;
|
|
@@ -328,8 +330,12 @@ interface WorkbenchBodyTemplateProps {
|
|
|
328
330
|
mainPaneClassName?: string;
|
|
329
331
|
rightPaneClassName?: string;
|
|
330
332
|
bottomPaneClassName?: string;
|
|
333
|
+
/** Mobile Sheet label for the left pane trigger */
|
|
334
|
+
leftPaneLabel?: string;
|
|
335
|
+
/** Mobile Sheet label for the right pane trigger */
|
|
336
|
+
rightPaneLabel?: string;
|
|
331
337
|
}
|
|
332
|
-
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;
|
|
338
|
+
declare function WorkbenchBodyTemplate({ theme, className, contentClassName, title, description, status, 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, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
333
339
|
|
|
334
340
|
interface DataBodyTabProps {
|
|
335
341
|
id: string;
|
|
@@ -388,6 +394,7 @@ interface DataBodyTemplateProps {
|
|
|
388
394
|
topBar?: React__default.ReactNode;
|
|
389
395
|
title?: React__default.ReactNode;
|
|
390
396
|
description?: React__default.ReactNode;
|
|
397
|
+
status?: React__default.ReactNode;
|
|
391
398
|
actions?: React__default.ReactNode;
|
|
392
399
|
toolbarLeft?: React__default.ReactNode;
|
|
393
400
|
toolbarRight?: React__default.ReactNode;
|
|
@@ -397,7 +404,7 @@ interface DataBodyTemplateProps {
|
|
|
397
404
|
children?: React__default.ReactNode;
|
|
398
405
|
contentClassName?: string;
|
|
399
406
|
}
|
|
400
|
-
declare function Root$1({ theme, className, topBar, title, description, actions, toolbarLeft, toolbarRight, activeTab: controlledActive, defaultTab, onTabChange, children, contentClassName, }: DataBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
407
|
+
declare function Root$1({ theme, className, topBar, title, description, status, actions, toolbarLeft, toolbarRight, activeTab: controlledActive, defaultTab, onTabChange, children, contentClassName, }: DataBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
401
408
|
declare const DataBodyTemplate: typeof Root$1 & {
|
|
402
409
|
Body: typeof DataBodyBody;
|
|
403
410
|
Tab: typeof DataBodyTab;
|
|
@@ -414,6 +421,7 @@ interface BrowseBodyTemplateProps {
|
|
|
414
421
|
topBar?: React__default.ReactNode;
|
|
415
422
|
title?: React__default.ReactNode;
|
|
416
423
|
description?: React__default.ReactNode;
|
|
424
|
+
status?: React__default.ReactNode;
|
|
417
425
|
actions?: React__default.ReactNode;
|
|
418
426
|
sidebar: React__default.ReactNode;
|
|
419
427
|
sidebarTitle?: string;
|
|
@@ -423,7 +431,7 @@ interface BrowseBodyTemplateProps {
|
|
|
423
431
|
contentClassName?: string;
|
|
424
432
|
children?: React__default.ReactNode;
|
|
425
433
|
}
|
|
426
|
-
declare function BrowseBodyTemplate({ theme, className, topBar, title, description, actions, sidebar, sidebarTitle, sidebarWidth, toolbar, footer, contentClassName, children, }: BrowseBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
434
|
+
declare function BrowseBodyTemplate({ theme, className, topBar, title, description, status, actions, sidebar, sidebarTitle, sidebarWidth, toolbar, footer, contentClassName, children, }: BrowseBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
427
435
|
|
|
428
436
|
type DetailBodyVariant = 'media' | 'record' | 'full';
|
|
429
437
|
interface DetailBodyTemplateProps {
|
|
@@ -498,8 +506,35 @@ interface ListDetailBodyTemplateProps {
|
|
|
498
506
|
listWidth?: number;
|
|
499
507
|
listClassName?: string;
|
|
500
508
|
detailClassName?: string;
|
|
509
|
+
/** Called when the mobile back button is pressed — use to clear the selected item */
|
|
510
|
+
onBack?: () => void;
|
|
511
|
+
/** Label for the mobile back button. Default: "Back" */
|
|
512
|
+
backLabel?: string;
|
|
501
513
|
}
|
|
502
|
-
declare function ListDetailBodyTemplate({ theme, className, topBar, list, detail, emptyDetail, listWidth, listClassName, detailClassName, }: ListDetailBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
514
|
+
declare function ListDetailBodyTemplate({ theme, className, topBar, list, detail, emptyDetail, listWidth, listClassName, detailClassName, onBack, backLabel, }: ListDetailBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
515
|
+
|
|
516
|
+
interface PanelTemplateProps {
|
|
517
|
+
title?: React__default.ReactNode;
|
|
518
|
+
eyebrow?: React__default.ReactNode;
|
|
519
|
+
status?: React__default.ReactNode;
|
|
520
|
+
actions?: React__default.ReactNode;
|
|
521
|
+
footer?: React__default.ReactNode;
|
|
522
|
+
children?: React__default.ReactNode;
|
|
523
|
+
className?: string;
|
|
524
|
+
bodyClassName?: string;
|
|
525
|
+
}
|
|
526
|
+
interface PanelTemplateSectionProps {
|
|
527
|
+
title?: React__default.ReactNode;
|
|
528
|
+
description?: React__default.ReactNode;
|
|
529
|
+
actions?: React__default.ReactNode;
|
|
530
|
+
className?: string;
|
|
531
|
+
children?: React__default.ReactNode;
|
|
532
|
+
}
|
|
533
|
+
declare function PanelTemplateSection({ title, description, actions, className, children, }: PanelTemplateSectionProps): react_jsx_runtime.JSX.Element;
|
|
534
|
+
declare function PanelTemplateRoot({ title, eyebrow, status, actions, footer, children, className, bodyClassName, }: PanelTemplateProps): react_jsx_runtime.JSX.Element;
|
|
535
|
+
declare const PanelTemplate: typeof PanelTemplateRoot & {
|
|
536
|
+
Section: typeof PanelTemplateSection;
|
|
537
|
+
};
|
|
503
538
|
|
|
504
539
|
type FormWizardVariant = 'card' | 'plain';
|
|
505
540
|
interface FormWizardStep {
|
|
@@ -511,6 +546,7 @@ interface FormWizardStep {
|
|
|
511
546
|
interface FormWizardBodyTemplateProps {
|
|
512
547
|
theme?: React.CSSProperties;
|
|
513
548
|
title?: string;
|
|
549
|
+
status?: React.ReactNode;
|
|
514
550
|
topBar?: React.ReactNode;
|
|
515
551
|
variant?: FormWizardVariant;
|
|
516
552
|
steps: FormWizardStep[];
|
|
@@ -519,7 +555,7 @@ interface FormWizardBodyTemplateProps {
|
|
|
519
555
|
onBack?: () => void;
|
|
520
556
|
onFinish?: () => void;
|
|
521
557
|
}
|
|
522
|
-
declare function FormWizardBodyTemplate({ theme, title, topBar, variant, steps, activeStep, onNext, onBack, onFinish, }: FormWizardBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
558
|
+
declare function FormWizardBodyTemplate({ theme, title, status, topBar, variant, steps, activeStep, onNext, onBack, onFinish, }: FormWizardBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
523
559
|
|
|
524
560
|
interface TypographyBodyTemplateProps {
|
|
525
561
|
theme?: React.CSSProperties;
|
|
@@ -546,6 +582,7 @@ interface DataPageTitleBlockProps {
|
|
|
546
582
|
title?: React.ReactNode;
|
|
547
583
|
description?: React.ReactNode;
|
|
548
584
|
breadcrumb?: React.ReactNode;
|
|
585
|
+
status?: React.ReactNode;
|
|
549
586
|
className?: string;
|
|
550
587
|
}
|
|
551
588
|
interface DataPageActionsProps {
|
|
@@ -595,7 +632,7 @@ interface DataPageFooterProps {
|
|
|
595
632
|
}
|
|
596
633
|
declare function Root({ children, className, style }: DataPageProps): react_jsx_runtime.JSX.Element;
|
|
597
634
|
declare function Header({ children, className }: DataPageHeaderProps): react_jsx_runtime.JSX.Element;
|
|
598
|
-
declare function TitleBlock({ title, description, breadcrumb, className }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
|
|
635
|
+
declare function TitleBlock({ title, description, breadcrumb, status, className }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
|
|
599
636
|
declare function Actions({ children, className }: DataPageActionsProps): react_jsx_runtime.JSX.Element | null;
|
|
600
637
|
declare function Tabs({ children, className }: DataPageTabsProps): react_jsx_runtime.JSX.Element | null;
|
|
601
638
|
declare function Tab({ active, count, children, onClick, disabled, className }: DataPageTabProps): react_jsx_runtime.JSX.Element;
|
|
@@ -646,6 +683,13 @@ interface PageTopBarProps {
|
|
|
646
683
|
className?: string;
|
|
647
684
|
style?: React__default.CSSProperties;
|
|
648
685
|
children?: React__default.ReactNode;
|
|
686
|
+
/**
|
|
687
|
+
* Mobile sidebar trigger shown at the far left of the bar.
|
|
688
|
+
* - undefined (default): auto-detect — shows when inside SidebarProvider on mobile
|
|
689
|
+
* - false: suppress entirely
|
|
690
|
+
* - ReactNode: custom trigger content
|
|
691
|
+
*/
|
|
692
|
+
sidebarTrigger?: false | React__default.ReactNode;
|
|
649
693
|
}
|
|
650
694
|
type PageBreadcrumbItem = string | {
|
|
651
695
|
label: string;
|
|
@@ -662,7 +706,7 @@ declare function buildTopBar(opts: {
|
|
|
662
706
|
left: React__default.ReactNode;
|
|
663
707
|
right?: React__default.ReactNode;
|
|
664
708
|
}): React__default.ReactNode;
|
|
665
|
-
declare function PageTopBar({ left, right, variant, height, className, style, children, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
|
|
709
|
+
declare function PageTopBar({ left, right, variant, height, className, style, children, sidebarTrigger, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
|
|
666
710
|
|
|
667
711
|
interface TemplateNavigationItem {
|
|
668
712
|
id: TemplateId;
|
|
@@ -702,4 +746,4 @@ declare function cn(...inputs: ClassValue[]): string;
|
|
|
702
746
|
|
|
703
747
|
declare const useThemeStore: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
|
|
704
748
|
|
|
705
|
-
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 };
|
|
749
|
+
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, 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, 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, useSidebarOptional, useStyleInjector, useThemeStore };
|