@loykin/designkit 0.0.1-dev.4 → 0.0.1-dev.6
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/LICENSE +21 -0
- package/README.md +13 -4
- package/dist/index.cjs +518 -257
- package/dist/index.cjs.map +1 -1
- package/dist/index.d.cts +90 -41
- package/dist/index.d.ts +90 -41
- package/dist/index.js +513 -259
- package/dist/index.js.map +1 -1
- package/dist/styles.css +184 -2
- package/package.json +7 -6
package/dist/index.d.cts
CHANGED
|
@@ -35,6 +35,14 @@ declare const badgeVariants: (props?: ({
|
|
|
35
35
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
36
36
|
declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
|
|
37
37
|
|
|
38
|
+
declare function Breadcrumb({ className, ...props }: React$1.ComponentProps<'nav'>): react_jsx_runtime.JSX.Element;
|
|
39
|
+
declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<'ol'>): react_jsx_runtime.JSX.Element;
|
|
40
|
+
declare function BreadcrumbItem({ className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
|
|
41
|
+
declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
|
|
42
|
+
declare function BreadcrumbPage({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
|
|
43
|
+
declare function BreadcrumbSeparator({ children, className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
|
|
44
|
+
declare function BreadcrumbEllipsis({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
|
|
45
|
+
|
|
38
46
|
declare const buttonVariants: (props?: ({
|
|
39
47
|
variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
|
|
40
48
|
size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
@@ -236,37 +244,6 @@ declare function TabsList({ className, variant, ...props }: Tabs$2.List.Props &
|
|
|
236
244
|
declare function TabsTrigger({ className, ...props }: Tabs$2.Tab.Props): react_jsx_runtime.JSX.Element;
|
|
237
245
|
declare function TabsContent({ className, ...props }: Tabs$2.Panel.Props): react_jsx_runtime.JSX.Element;
|
|
238
246
|
|
|
239
|
-
type ShellId = 'sidebar' | 'header';
|
|
240
|
-
type DensityId = 'compact' | 'default' | 'comfortable';
|
|
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';
|
|
242
|
-
interface GlobalTheme {
|
|
243
|
-
radius: number;
|
|
244
|
-
primaryHue: number;
|
|
245
|
-
primaryChroma: number;
|
|
246
|
-
fontScale: number;
|
|
247
|
-
lineHeight: number;
|
|
248
|
-
density: DensityId;
|
|
249
|
-
darkMode: boolean;
|
|
250
|
-
}
|
|
251
|
-
interface TemplateOverride {
|
|
252
|
-
radius?: number;
|
|
253
|
-
primaryChroma?: number;
|
|
254
|
-
density?: DensityId;
|
|
255
|
-
pagePaddingY?: string;
|
|
256
|
-
panelGap?: string;
|
|
257
|
-
toolbarHeight?: string;
|
|
258
|
-
}
|
|
259
|
-
interface ThemeState {
|
|
260
|
-
global: GlobalTheme;
|
|
261
|
-
overrides: Record<TemplateId, TemplateOverride>;
|
|
262
|
-
activeShell: ShellId;
|
|
263
|
-
activeTemplate: TemplateId;
|
|
264
|
-
setGlobal: (patch: Partial<GlobalTheme>) => void;
|
|
265
|
-
setOverride: (id: TemplateId, patch: Partial<TemplateOverride>) => void;
|
|
266
|
-
setShell: (shell: ShellId) => void;
|
|
267
|
-
setTemplate: (template: TemplateId) => void;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
247
|
interface DashboardPanelProps {
|
|
271
248
|
title?: string;
|
|
272
249
|
description?: string;
|
|
@@ -295,12 +272,18 @@ interface DashboardBodyTemplateProps {
|
|
|
295
272
|
}
|
|
296
273
|
declare function DashboardBodyTemplate({ theme, className, title, description, topBar, toolbar, variableBar, children, contentClassName, }: DashboardBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
297
274
|
|
|
275
|
+
interface WorkbenchResizeState {
|
|
276
|
+
leftPaneWidth: number;
|
|
277
|
+
rightPaneWidth: number;
|
|
278
|
+
bottomPaneHeight: number;
|
|
279
|
+
}
|
|
298
280
|
interface WorkbenchBodyTemplateProps {
|
|
299
281
|
theme?: CSSProperties;
|
|
300
282
|
className?: string;
|
|
301
283
|
contentClassName?: string;
|
|
302
284
|
title?: ReactNode;
|
|
303
285
|
description?: ReactNode;
|
|
286
|
+
status?: ReactNode;
|
|
304
287
|
topBar?: ReactNode;
|
|
305
288
|
/** Right side of the built-in workbench header. Prefer this over toolbar for new code. */
|
|
306
289
|
headerRight?: ReactNode;
|
|
@@ -325,6 +308,7 @@ interface WorkbenchBodyTemplateProps {
|
|
|
325
308
|
maxRightPaneWidth?: number;
|
|
326
309
|
minBottomPaneHeight?: number;
|
|
327
310
|
maxBottomPaneHeight?: number;
|
|
311
|
+
onResize?: (state: WorkbenchResizeState) => void;
|
|
328
312
|
leftPaneClassName?: string;
|
|
329
313
|
mainPaneClassName?: string;
|
|
330
314
|
rightPaneClassName?: string;
|
|
@@ -334,7 +318,7 @@ interface WorkbenchBodyTemplateProps {
|
|
|
334
318
|
/** Mobile Sheet label for the right pane trigger */
|
|
335
319
|
rightPaneLabel?: string;
|
|
336
320
|
}
|
|
337
|
-
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, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
321
|
+
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, onResize, leftPaneClassName, mainPaneClassName, rightPaneClassName, bottomPaneClassName, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
338
322
|
|
|
339
323
|
interface DataBodyTabProps {
|
|
340
324
|
id: string;
|
|
@@ -393,6 +377,7 @@ interface DataBodyTemplateProps {
|
|
|
393
377
|
topBar?: React__default.ReactNode;
|
|
394
378
|
title?: React__default.ReactNode;
|
|
395
379
|
description?: React__default.ReactNode;
|
|
380
|
+
status?: React__default.ReactNode;
|
|
396
381
|
actions?: React__default.ReactNode;
|
|
397
382
|
toolbarLeft?: React__default.ReactNode;
|
|
398
383
|
toolbarRight?: React__default.ReactNode;
|
|
@@ -402,7 +387,7 @@ interface DataBodyTemplateProps {
|
|
|
402
387
|
children?: React__default.ReactNode;
|
|
403
388
|
contentClassName?: string;
|
|
404
389
|
}
|
|
405
|
-
declare function Root$1({ theme, className, topBar, title, description, actions, toolbarLeft, toolbarRight, activeTab: controlledActive, defaultTab, onTabChange, children, contentClassName, }: DataBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
390
|
+
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;
|
|
406
391
|
declare const DataBodyTemplate: typeof Root$1 & {
|
|
407
392
|
Body: typeof DataBodyBody;
|
|
408
393
|
Tab: typeof DataBodyTab;
|
|
@@ -419,6 +404,7 @@ interface BrowseBodyTemplateProps {
|
|
|
419
404
|
topBar?: React__default.ReactNode;
|
|
420
405
|
title?: React__default.ReactNode;
|
|
421
406
|
description?: React__default.ReactNode;
|
|
407
|
+
status?: React__default.ReactNode;
|
|
422
408
|
actions?: React__default.ReactNode;
|
|
423
409
|
sidebar: React__default.ReactNode;
|
|
424
410
|
sidebarTitle?: string;
|
|
@@ -428,7 +414,7 @@ interface BrowseBodyTemplateProps {
|
|
|
428
414
|
contentClassName?: string;
|
|
429
415
|
children?: React__default.ReactNode;
|
|
430
416
|
}
|
|
431
|
-
declare function BrowseBodyTemplate({ theme, className, topBar, title, description, actions, sidebar, sidebarTitle, sidebarWidth, toolbar, footer, contentClassName, children, }: BrowseBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
417
|
+
declare function BrowseBodyTemplate({ theme, className, topBar, title, description, status, actions, sidebar, sidebarTitle, sidebarWidth, toolbar, footer, contentClassName, children, }: BrowseBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
432
418
|
|
|
433
419
|
type DetailBodyVariant = 'media' | 'record' | 'full';
|
|
434
420
|
interface DetailBodyTemplateProps {
|
|
@@ -513,6 +499,7 @@ declare function ListDetailBodyTemplate({ theme, className, topBar, list, detail
|
|
|
513
499
|
interface PanelTemplateProps {
|
|
514
500
|
title?: React__default.ReactNode;
|
|
515
501
|
eyebrow?: React__default.ReactNode;
|
|
502
|
+
status?: React__default.ReactNode;
|
|
516
503
|
actions?: React__default.ReactNode;
|
|
517
504
|
footer?: React__default.ReactNode;
|
|
518
505
|
children?: React__default.ReactNode;
|
|
@@ -527,7 +514,7 @@ interface PanelTemplateSectionProps {
|
|
|
527
514
|
children?: React__default.ReactNode;
|
|
528
515
|
}
|
|
529
516
|
declare function PanelTemplateSection({ title, description, actions, className, children, }: PanelTemplateSectionProps): react_jsx_runtime.JSX.Element;
|
|
530
|
-
declare function PanelTemplateRoot({ title, eyebrow, actions, footer, children, className, bodyClassName, }: PanelTemplateProps): react_jsx_runtime.JSX.Element;
|
|
517
|
+
declare function PanelTemplateRoot({ title, eyebrow, status, actions, footer, children, className, bodyClassName, }: PanelTemplateProps): react_jsx_runtime.JSX.Element;
|
|
531
518
|
declare const PanelTemplate: typeof PanelTemplateRoot & {
|
|
532
519
|
Section: typeof PanelTemplateSection;
|
|
533
520
|
};
|
|
@@ -542,6 +529,7 @@ interface FormWizardStep {
|
|
|
542
529
|
interface FormWizardBodyTemplateProps {
|
|
543
530
|
theme?: React.CSSProperties;
|
|
544
531
|
title?: string;
|
|
532
|
+
status?: React.ReactNode;
|
|
545
533
|
topBar?: React.ReactNode;
|
|
546
534
|
variant?: FormWizardVariant;
|
|
547
535
|
steps: FormWizardStep[];
|
|
@@ -550,7 +538,7 @@ interface FormWizardBodyTemplateProps {
|
|
|
550
538
|
onBack?: () => void;
|
|
551
539
|
onFinish?: () => void;
|
|
552
540
|
}
|
|
553
|
-
declare function FormWizardBodyTemplate({ theme, title, topBar, variant, steps, activeStep, onNext, onBack, onFinish, }: FormWizardBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
541
|
+
declare function FormWizardBodyTemplate({ theme, title, status, topBar, variant, steps, activeStep, onNext, onBack, onFinish, }: FormWizardBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
554
542
|
|
|
555
543
|
interface TypographyBodyTemplateProps {
|
|
556
544
|
theme?: React.CSSProperties;
|
|
@@ -577,6 +565,7 @@ interface DataPageTitleBlockProps {
|
|
|
577
565
|
title?: React.ReactNode;
|
|
578
566
|
description?: React.ReactNode;
|
|
579
567
|
breadcrumb?: React.ReactNode;
|
|
568
|
+
status?: React.ReactNode;
|
|
580
569
|
className?: string;
|
|
581
570
|
}
|
|
582
571
|
interface DataPageActionsProps {
|
|
@@ -626,7 +615,7 @@ interface DataPageFooterProps {
|
|
|
626
615
|
}
|
|
627
616
|
declare function Root({ children, className, style }: DataPageProps): react_jsx_runtime.JSX.Element;
|
|
628
617
|
declare function Header({ children, className }: DataPageHeaderProps): react_jsx_runtime.JSX.Element;
|
|
629
|
-
declare function TitleBlock({ title, description, breadcrumb, className }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
|
|
618
|
+
declare function TitleBlock({ title, description, breadcrumb, status, className, }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
|
|
630
619
|
declare function Actions({ children, className }: DataPageActionsProps): react_jsx_runtime.JSX.Element | null;
|
|
631
620
|
declare function Tabs({ children, className }: DataPageTabsProps): react_jsx_runtime.JSX.Element | null;
|
|
632
621
|
declare function Tab({ active, count, children, onClick, disabled, className }: DataPageTabProps): react_jsx_runtime.JSX.Element;
|
|
@@ -674,6 +663,7 @@ interface PageTopBarProps {
|
|
|
674
663
|
right?: React__default.ReactNode;
|
|
675
664
|
variant?: PageTopBarVariant;
|
|
676
665
|
height?: string;
|
|
666
|
+
minHeight?: string;
|
|
677
667
|
className?: string;
|
|
678
668
|
style?: React__default.CSSProperties;
|
|
679
669
|
children?: React__default.ReactNode;
|
|
@@ -700,10 +690,10 @@ declare function buildTopBar(opts: {
|
|
|
700
690
|
left: React__default.ReactNode;
|
|
701
691
|
right?: React__default.ReactNode;
|
|
702
692
|
}): React__default.ReactNode;
|
|
703
|
-
declare function PageTopBar({ left, right, variant, height, className, style, children, sidebarTrigger, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
|
|
693
|
+
declare function PageTopBar({ left, right, variant, height, minHeight, className, style, children, sidebarTrigger, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
|
|
704
694
|
|
|
705
695
|
interface TemplateNavigationItem {
|
|
706
|
-
id:
|
|
696
|
+
id: string;
|
|
707
697
|
label: string;
|
|
708
698
|
icon?: ComponentType<{
|
|
709
699
|
className?: string;
|
|
@@ -717,7 +707,66 @@ interface TemplateNavigationGroup {
|
|
|
717
707
|
|
|
718
708
|
declare function useIsMobile(): boolean;
|
|
719
709
|
|
|
720
|
-
|
|
710
|
+
type ShellId = 'sidebar' | 'header';
|
|
711
|
+
type DensityId = 'compact' | 'default' | 'comfortable';
|
|
712
|
+
type CurrentTemplateId = 'form-wizard' | 'databody' | 'sectioned' | 'typography' | 'colors' | 'login' | 'dashboard' | 'workbench' | 'browse' | 'detail' | 'list-detail' | 'panel';
|
|
713
|
+
/**
|
|
714
|
+
* @deprecated Playground/demo template identifiers remain available for one
|
|
715
|
+
* release for source compatibility. New code should use `CurrentTemplateId`
|
|
716
|
+
* for shipped DesignKit layouts or app-owned string ids for playground routes.
|
|
717
|
+
*/
|
|
718
|
+
type LegacyTemplateId = 'table' | 'table-infinity' | 'table-drag' | 'table-card' | 'table-card-list' | 'tabbed' | 'form' | 'form-stacked' | 'form-inline' | 'databody-detail' | 'databody-split' | 'login-forgot' | 'login-reset' | 'login-otp' | 'workbench-panel-editor' | 'workbench-sql-editor' | 'workbench-agent-chat' | 'detail-record' | 'detail-full';
|
|
719
|
+
type TemplateId = CurrentTemplateId | LegacyTemplateId;
|
|
720
|
+
interface GlobalTheme {
|
|
721
|
+
radius: number;
|
|
722
|
+
primaryHue: number;
|
|
723
|
+
primaryChroma: number;
|
|
724
|
+
fontScale: number;
|
|
725
|
+
lineHeight: number;
|
|
726
|
+
density: DensityId;
|
|
727
|
+
darkMode: boolean;
|
|
728
|
+
}
|
|
729
|
+
interface TemplateOverride {
|
|
730
|
+
radius?: number;
|
|
731
|
+
primaryChroma?: number;
|
|
732
|
+
density?: DensityId;
|
|
733
|
+
pagePaddingY?: string;
|
|
734
|
+
panelGap?: string;
|
|
735
|
+
toolbarHeight?: string;
|
|
736
|
+
}
|
|
737
|
+
interface ThemeState {
|
|
738
|
+
global: GlobalTheme;
|
|
739
|
+
overrides: Record<string, TemplateOverride>;
|
|
740
|
+
/**
|
|
741
|
+
* @deprecated Playground navigation state is no longer managed by DesignKit.
|
|
742
|
+
* Keep route or view state in the consuming app instead.
|
|
743
|
+
*/
|
|
744
|
+
activeShell: ShellId;
|
|
745
|
+
/**
|
|
746
|
+
* @deprecated Playground navigation state is no longer managed by DesignKit.
|
|
747
|
+
* Keep route or view state in the consuming app instead.
|
|
748
|
+
*/
|
|
749
|
+
activeTemplate: string;
|
|
750
|
+
setGlobal: (patch: Partial<GlobalTheme>) => void;
|
|
751
|
+
setOverride: (id: string, patch: Partial<TemplateOverride>) => void;
|
|
752
|
+
/**
|
|
753
|
+
* @deprecated No-op compatibility shim. Keep shell routing in the consuming app.
|
|
754
|
+
*/
|
|
755
|
+
setShell: (shell: ShellId) => void;
|
|
756
|
+
/**
|
|
757
|
+
* @deprecated No-op compatibility shim. Keep template routing in the consuming app.
|
|
758
|
+
*/
|
|
759
|
+
setTemplate: (template: string) => void;
|
|
760
|
+
}
|
|
761
|
+
|
|
762
|
+
interface StyleInjectorOptions {
|
|
763
|
+
/**
|
|
764
|
+
* CSS selector that receives the generated DesignKit variables.
|
|
765
|
+
* Defaults to `:root`. Use this when embedding DesignKit inside a scoped host.
|
|
766
|
+
*/
|
|
767
|
+
scope?: string;
|
|
768
|
+
}
|
|
769
|
+
declare function useStyleInjector(options?: StyleInjectorOptions): void;
|
|
721
770
|
/** Returns CSS custom properties for a template — used as inline style for external usage */
|
|
722
771
|
declare function buildTemplateTheme(g: {
|
|
723
772
|
radius: number;
|
|
@@ -740,4 +789,4 @@ declare function cn(...inputs: ClassValue[]): string;
|
|
|
740
789
|
|
|
741
790
|
declare const useThemeStore: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
|
|
742
791
|
|
|
743
|
-
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 };
|
|
792
|
+
export { 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, type LegacyTemplateId, 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
CHANGED
|
@@ -35,6 +35,14 @@ declare const badgeVariants: (props?: ({
|
|
|
35
35
|
} & class_variance_authority_types.ClassProp) | undefined) => string;
|
|
36
36
|
declare function Badge({ className, variant, render, ...props }: useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
|
|
37
37
|
|
|
38
|
+
declare function Breadcrumb({ className, ...props }: React$1.ComponentProps<'nav'>): react_jsx_runtime.JSX.Element;
|
|
39
|
+
declare function BreadcrumbList({ className, ...props }: React$1.ComponentProps<'ol'>): react_jsx_runtime.JSX.Element;
|
|
40
|
+
declare function BreadcrumbItem({ className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
|
|
41
|
+
declare function BreadcrumbLink({ className, render, ...props }: useRender.ComponentProps<'a'>): React$1.ReactElement<unknown, string | React$1.JSXElementConstructor<any>>;
|
|
42
|
+
declare function BreadcrumbPage({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
|
|
43
|
+
declare function BreadcrumbSeparator({ children, className, ...props }: React$1.ComponentProps<'li'>): react_jsx_runtime.JSX.Element;
|
|
44
|
+
declare function BreadcrumbEllipsis({ className, ...props }: React$1.ComponentProps<'span'>): react_jsx_runtime.JSX.Element;
|
|
45
|
+
|
|
38
46
|
declare const buttonVariants: (props?: ({
|
|
39
47
|
variant?: "default" | "link" | "secondary" | "destructive" | "outline" | "ghost" | null | undefined;
|
|
40
48
|
size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
|
|
@@ -236,37 +244,6 @@ declare function TabsList({ className, variant, ...props }: Tabs$2.List.Props &
|
|
|
236
244
|
declare function TabsTrigger({ className, ...props }: Tabs$2.Tab.Props): react_jsx_runtime.JSX.Element;
|
|
237
245
|
declare function TabsContent({ className, ...props }: Tabs$2.Panel.Props): react_jsx_runtime.JSX.Element;
|
|
238
246
|
|
|
239
|
-
type ShellId = 'sidebar' | 'header';
|
|
240
|
-
type DensityId = 'compact' | 'default' | 'comfortable';
|
|
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';
|
|
242
|
-
interface GlobalTheme {
|
|
243
|
-
radius: number;
|
|
244
|
-
primaryHue: number;
|
|
245
|
-
primaryChroma: number;
|
|
246
|
-
fontScale: number;
|
|
247
|
-
lineHeight: number;
|
|
248
|
-
density: DensityId;
|
|
249
|
-
darkMode: boolean;
|
|
250
|
-
}
|
|
251
|
-
interface TemplateOverride {
|
|
252
|
-
radius?: number;
|
|
253
|
-
primaryChroma?: number;
|
|
254
|
-
density?: DensityId;
|
|
255
|
-
pagePaddingY?: string;
|
|
256
|
-
panelGap?: string;
|
|
257
|
-
toolbarHeight?: string;
|
|
258
|
-
}
|
|
259
|
-
interface ThemeState {
|
|
260
|
-
global: GlobalTheme;
|
|
261
|
-
overrides: Record<TemplateId, TemplateOverride>;
|
|
262
|
-
activeShell: ShellId;
|
|
263
|
-
activeTemplate: TemplateId;
|
|
264
|
-
setGlobal: (patch: Partial<GlobalTheme>) => void;
|
|
265
|
-
setOverride: (id: TemplateId, patch: Partial<TemplateOverride>) => void;
|
|
266
|
-
setShell: (shell: ShellId) => void;
|
|
267
|
-
setTemplate: (template: TemplateId) => void;
|
|
268
|
-
}
|
|
269
|
-
|
|
270
247
|
interface DashboardPanelProps {
|
|
271
248
|
title?: string;
|
|
272
249
|
description?: string;
|
|
@@ -295,12 +272,18 @@ interface DashboardBodyTemplateProps {
|
|
|
295
272
|
}
|
|
296
273
|
declare function DashboardBodyTemplate({ theme, className, title, description, topBar, toolbar, variableBar, children, contentClassName, }: DashboardBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
297
274
|
|
|
275
|
+
interface WorkbenchResizeState {
|
|
276
|
+
leftPaneWidth: number;
|
|
277
|
+
rightPaneWidth: number;
|
|
278
|
+
bottomPaneHeight: number;
|
|
279
|
+
}
|
|
298
280
|
interface WorkbenchBodyTemplateProps {
|
|
299
281
|
theme?: CSSProperties;
|
|
300
282
|
className?: string;
|
|
301
283
|
contentClassName?: string;
|
|
302
284
|
title?: ReactNode;
|
|
303
285
|
description?: ReactNode;
|
|
286
|
+
status?: ReactNode;
|
|
304
287
|
topBar?: ReactNode;
|
|
305
288
|
/** Right side of the built-in workbench header. Prefer this over toolbar for new code. */
|
|
306
289
|
headerRight?: ReactNode;
|
|
@@ -325,6 +308,7 @@ interface WorkbenchBodyTemplateProps {
|
|
|
325
308
|
maxRightPaneWidth?: number;
|
|
326
309
|
minBottomPaneHeight?: number;
|
|
327
310
|
maxBottomPaneHeight?: number;
|
|
311
|
+
onResize?: (state: WorkbenchResizeState) => void;
|
|
328
312
|
leftPaneClassName?: string;
|
|
329
313
|
mainPaneClassName?: string;
|
|
330
314
|
rightPaneClassName?: string;
|
|
@@ -334,7 +318,7 @@ interface WorkbenchBodyTemplateProps {
|
|
|
334
318
|
/** Mobile Sheet label for the right pane trigger */
|
|
335
319
|
rightPaneLabel?: string;
|
|
336
320
|
}
|
|
337
|
-
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, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
321
|
+
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, onResize, leftPaneClassName, mainPaneClassName, rightPaneClassName, bottomPaneClassName, leftPaneLabel, rightPaneLabel, }: WorkbenchBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
338
322
|
|
|
339
323
|
interface DataBodyTabProps {
|
|
340
324
|
id: string;
|
|
@@ -393,6 +377,7 @@ interface DataBodyTemplateProps {
|
|
|
393
377
|
topBar?: React__default.ReactNode;
|
|
394
378
|
title?: React__default.ReactNode;
|
|
395
379
|
description?: React__default.ReactNode;
|
|
380
|
+
status?: React__default.ReactNode;
|
|
396
381
|
actions?: React__default.ReactNode;
|
|
397
382
|
toolbarLeft?: React__default.ReactNode;
|
|
398
383
|
toolbarRight?: React__default.ReactNode;
|
|
@@ -402,7 +387,7 @@ interface DataBodyTemplateProps {
|
|
|
402
387
|
children?: React__default.ReactNode;
|
|
403
388
|
contentClassName?: string;
|
|
404
389
|
}
|
|
405
|
-
declare function Root$1({ theme, className, topBar, title, description, actions, toolbarLeft, toolbarRight, activeTab: controlledActive, defaultTab, onTabChange, children, contentClassName, }: DataBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
390
|
+
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;
|
|
406
391
|
declare const DataBodyTemplate: typeof Root$1 & {
|
|
407
392
|
Body: typeof DataBodyBody;
|
|
408
393
|
Tab: typeof DataBodyTab;
|
|
@@ -419,6 +404,7 @@ interface BrowseBodyTemplateProps {
|
|
|
419
404
|
topBar?: React__default.ReactNode;
|
|
420
405
|
title?: React__default.ReactNode;
|
|
421
406
|
description?: React__default.ReactNode;
|
|
407
|
+
status?: React__default.ReactNode;
|
|
422
408
|
actions?: React__default.ReactNode;
|
|
423
409
|
sidebar: React__default.ReactNode;
|
|
424
410
|
sidebarTitle?: string;
|
|
@@ -428,7 +414,7 @@ interface BrowseBodyTemplateProps {
|
|
|
428
414
|
contentClassName?: string;
|
|
429
415
|
children?: React__default.ReactNode;
|
|
430
416
|
}
|
|
431
|
-
declare function BrowseBodyTemplate({ theme, className, topBar, title, description, actions, sidebar, sidebarTitle, sidebarWidth, toolbar, footer, contentClassName, children, }: BrowseBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
417
|
+
declare function BrowseBodyTemplate({ theme, className, topBar, title, description, status, actions, sidebar, sidebarTitle, sidebarWidth, toolbar, footer, contentClassName, children, }: BrowseBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
432
418
|
|
|
433
419
|
type DetailBodyVariant = 'media' | 'record' | 'full';
|
|
434
420
|
interface DetailBodyTemplateProps {
|
|
@@ -513,6 +499,7 @@ declare function ListDetailBodyTemplate({ theme, className, topBar, list, detail
|
|
|
513
499
|
interface PanelTemplateProps {
|
|
514
500
|
title?: React__default.ReactNode;
|
|
515
501
|
eyebrow?: React__default.ReactNode;
|
|
502
|
+
status?: React__default.ReactNode;
|
|
516
503
|
actions?: React__default.ReactNode;
|
|
517
504
|
footer?: React__default.ReactNode;
|
|
518
505
|
children?: React__default.ReactNode;
|
|
@@ -527,7 +514,7 @@ interface PanelTemplateSectionProps {
|
|
|
527
514
|
children?: React__default.ReactNode;
|
|
528
515
|
}
|
|
529
516
|
declare function PanelTemplateSection({ title, description, actions, className, children, }: PanelTemplateSectionProps): react_jsx_runtime.JSX.Element;
|
|
530
|
-
declare function PanelTemplateRoot({ title, eyebrow, actions, footer, children, className, bodyClassName, }: PanelTemplateProps): react_jsx_runtime.JSX.Element;
|
|
517
|
+
declare function PanelTemplateRoot({ title, eyebrow, status, actions, footer, children, className, bodyClassName, }: PanelTemplateProps): react_jsx_runtime.JSX.Element;
|
|
531
518
|
declare const PanelTemplate: typeof PanelTemplateRoot & {
|
|
532
519
|
Section: typeof PanelTemplateSection;
|
|
533
520
|
};
|
|
@@ -542,6 +529,7 @@ interface FormWizardStep {
|
|
|
542
529
|
interface FormWizardBodyTemplateProps {
|
|
543
530
|
theme?: React.CSSProperties;
|
|
544
531
|
title?: string;
|
|
532
|
+
status?: React.ReactNode;
|
|
545
533
|
topBar?: React.ReactNode;
|
|
546
534
|
variant?: FormWizardVariant;
|
|
547
535
|
steps: FormWizardStep[];
|
|
@@ -550,7 +538,7 @@ interface FormWizardBodyTemplateProps {
|
|
|
550
538
|
onBack?: () => void;
|
|
551
539
|
onFinish?: () => void;
|
|
552
540
|
}
|
|
553
|
-
declare function FormWizardBodyTemplate({ theme, title, topBar, variant, steps, activeStep, onNext, onBack, onFinish, }: FormWizardBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
541
|
+
declare function FormWizardBodyTemplate({ theme, title, status, topBar, variant, steps, activeStep, onNext, onBack, onFinish, }: FormWizardBodyTemplateProps): react_jsx_runtime.JSX.Element;
|
|
554
542
|
|
|
555
543
|
interface TypographyBodyTemplateProps {
|
|
556
544
|
theme?: React.CSSProperties;
|
|
@@ -577,6 +565,7 @@ interface DataPageTitleBlockProps {
|
|
|
577
565
|
title?: React.ReactNode;
|
|
578
566
|
description?: React.ReactNode;
|
|
579
567
|
breadcrumb?: React.ReactNode;
|
|
568
|
+
status?: React.ReactNode;
|
|
580
569
|
className?: string;
|
|
581
570
|
}
|
|
582
571
|
interface DataPageActionsProps {
|
|
@@ -626,7 +615,7 @@ interface DataPageFooterProps {
|
|
|
626
615
|
}
|
|
627
616
|
declare function Root({ children, className, style }: DataPageProps): react_jsx_runtime.JSX.Element;
|
|
628
617
|
declare function Header({ children, className }: DataPageHeaderProps): react_jsx_runtime.JSX.Element;
|
|
629
|
-
declare function TitleBlock({ title, description, breadcrumb, className }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
|
|
618
|
+
declare function TitleBlock({ title, description, breadcrumb, status, className, }: DataPageTitleBlockProps): react_jsx_runtime.JSX.Element | null;
|
|
630
619
|
declare function Actions({ children, className }: DataPageActionsProps): react_jsx_runtime.JSX.Element | null;
|
|
631
620
|
declare function Tabs({ children, className }: DataPageTabsProps): react_jsx_runtime.JSX.Element | null;
|
|
632
621
|
declare function Tab({ active, count, children, onClick, disabled, className }: DataPageTabProps): react_jsx_runtime.JSX.Element;
|
|
@@ -674,6 +663,7 @@ interface PageTopBarProps {
|
|
|
674
663
|
right?: React__default.ReactNode;
|
|
675
664
|
variant?: PageTopBarVariant;
|
|
676
665
|
height?: string;
|
|
666
|
+
minHeight?: string;
|
|
677
667
|
className?: string;
|
|
678
668
|
style?: React__default.CSSProperties;
|
|
679
669
|
children?: React__default.ReactNode;
|
|
@@ -700,10 +690,10 @@ declare function buildTopBar(opts: {
|
|
|
700
690
|
left: React__default.ReactNode;
|
|
701
691
|
right?: React__default.ReactNode;
|
|
702
692
|
}): React__default.ReactNode;
|
|
703
|
-
declare function PageTopBar({ left, right, variant, height, className, style, children, sidebarTrigger, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
|
|
693
|
+
declare function PageTopBar({ left, right, variant, height, minHeight, className, style, children, sidebarTrigger, }: PageTopBarProps): react_jsx_runtime.JSX.Element;
|
|
704
694
|
|
|
705
695
|
interface TemplateNavigationItem {
|
|
706
|
-
id:
|
|
696
|
+
id: string;
|
|
707
697
|
label: string;
|
|
708
698
|
icon?: ComponentType<{
|
|
709
699
|
className?: string;
|
|
@@ -717,7 +707,66 @@ interface TemplateNavigationGroup {
|
|
|
717
707
|
|
|
718
708
|
declare function useIsMobile(): boolean;
|
|
719
709
|
|
|
720
|
-
|
|
710
|
+
type ShellId = 'sidebar' | 'header';
|
|
711
|
+
type DensityId = 'compact' | 'default' | 'comfortable';
|
|
712
|
+
type CurrentTemplateId = 'form-wizard' | 'databody' | 'sectioned' | 'typography' | 'colors' | 'login' | 'dashboard' | 'workbench' | 'browse' | 'detail' | 'list-detail' | 'panel';
|
|
713
|
+
/**
|
|
714
|
+
* @deprecated Playground/demo template identifiers remain available for one
|
|
715
|
+
* release for source compatibility. New code should use `CurrentTemplateId`
|
|
716
|
+
* for shipped DesignKit layouts or app-owned string ids for playground routes.
|
|
717
|
+
*/
|
|
718
|
+
type LegacyTemplateId = 'table' | 'table-infinity' | 'table-drag' | 'table-card' | 'table-card-list' | 'tabbed' | 'form' | 'form-stacked' | 'form-inline' | 'databody-detail' | 'databody-split' | 'login-forgot' | 'login-reset' | 'login-otp' | 'workbench-panel-editor' | 'workbench-sql-editor' | 'workbench-agent-chat' | 'detail-record' | 'detail-full';
|
|
719
|
+
type TemplateId = CurrentTemplateId | LegacyTemplateId;
|
|
720
|
+
interface GlobalTheme {
|
|
721
|
+
radius: number;
|
|
722
|
+
primaryHue: number;
|
|
723
|
+
primaryChroma: number;
|
|
724
|
+
fontScale: number;
|
|
725
|
+
lineHeight: number;
|
|
726
|
+
density: DensityId;
|
|
727
|
+
darkMode: boolean;
|
|
728
|
+
}
|
|
729
|
+
interface TemplateOverride {
|
|
730
|
+
radius?: number;
|
|
731
|
+
primaryChroma?: number;
|
|
732
|
+
density?: DensityId;
|
|
733
|
+
pagePaddingY?: string;
|
|
734
|
+
panelGap?: string;
|
|
735
|
+
toolbarHeight?: string;
|
|
736
|
+
}
|
|
737
|
+
interface ThemeState {
|
|
738
|
+
global: GlobalTheme;
|
|
739
|
+
overrides: Record<string, TemplateOverride>;
|
|
740
|
+
/**
|
|
741
|
+
* @deprecated Playground navigation state is no longer managed by DesignKit.
|
|
742
|
+
* Keep route or view state in the consuming app instead.
|
|
743
|
+
*/
|
|
744
|
+
activeShell: ShellId;
|
|
745
|
+
/**
|
|
746
|
+
* @deprecated Playground navigation state is no longer managed by DesignKit.
|
|
747
|
+
* Keep route or view state in the consuming app instead.
|
|
748
|
+
*/
|
|
749
|
+
activeTemplate: string;
|
|
750
|
+
setGlobal: (patch: Partial<GlobalTheme>) => void;
|
|
751
|
+
setOverride: (id: string, patch: Partial<TemplateOverride>) => void;
|
|
752
|
+
/**
|
|
753
|
+
* @deprecated No-op compatibility shim. Keep shell routing in the consuming app.
|
|
754
|
+
*/
|
|
755
|
+
setShell: (shell: ShellId) => void;
|
|
756
|
+
/**
|
|
757
|
+
* @deprecated No-op compatibility shim. Keep template routing in the consuming app.
|
|
758
|
+
*/
|
|
759
|
+
setTemplate: (template: string) => void;
|
|
760
|
+
}
|
|
761
|
+
|
|
762
|
+
interface StyleInjectorOptions {
|
|
763
|
+
/**
|
|
764
|
+
* CSS selector that receives the generated DesignKit variables.
|
|
765
|
+
* Defaults to `:root`. Use this when embedding DesignKit inside a scoped host.
|
|
766
|
+
*/
|
|
767
|
+
scope?: string;
|
|
768
|
+
}
|
|
769
|
+
declare function useStyleInjector(options?: StyleInjectorOptions): void;
|
|
721
770
|
/** Returns CSS custom properties for a template — used as inline style for external usage */
|
|
722
771
|
declare function buildTemplateTheme(g: {
|
|
723
772
|
radius: number;
|
|
@@ -740,4 +789,4 @@ declare function cn(...inputs: ClassValue[]): string;
|
|
|
740
789
|
|
|
741
790
|
declare const useThemeStore: zustand.UseBoundStore<zustand.StoreApi<ThemeState>>;
|
|
742
791
|
|
|
743
|
-
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 };
|
|
792
|
+
export { 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, type LegacyTemplateId, 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 };
|