@burtson-labs/ui 0.2.0 → 0.4.0
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 +3 -3
- package/dist/components/accordion.js +1 -1
- package/dist/components/accordion.js.map +1 -1
- package/dist/components/alert.d.ts +1 -1
- package/dist/components/alert.js +9 -8
- package/dist/components/alert.js.map +1 -1
- package/dist/components/app-shell.d.ts +8 -0
- package/dist/components/app-shell.js +50 -0
- package/dist/components/app-shell.js.map +1 -0
- package/dist/components/avatar.js +1 -1
- package/dist/components/avatar.js.map +1 -1
- package/dist/components/badge.d.ts +1 -1
- package/dist/components/badge.js +9 -8
- package/dist/components/badge.js.map +1 -1
- package/dist/components/button.d.ts +4 -4
- package/dist/components/button.js +28 -19
- package/dist/components/button.js.map +1 -1
- package/dist/components/card.d.ts +10 -2
- package/dist/components/card.js +40 -9
- package/dist/components/card.js.map +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/command.js +4 -4
- package/dist/components/command.js.map +1 -1
- package/dist/components/dialog.d.ts +1 -1
- package/dist/components/dialog.js +15 -15
- package/dist/components/dialog.js.map +1 -1
- package/dist/components/dropdown-menu.js +3 -3
- package/dist/components/dropdown-menu.js.map +1 -1
- package/dist/components/empty-state.d.ts +7 -0
- package/dist/components/empty-state.js +44 -0
- package/dist/components/empty-state.js.map +1 -0
- package/dist/components/field.d.ts +8 -0
- package/dist/components/field.js +51 -0
- package/dist/components/field.js.map +1 -0
- package/dist/components/icon-button.d.ts +8 -0
- package/dist/components/icon-button.js +19 -0
- package/dist/components/icon-button.js.map +1 -0
- package/dist/components/input.d.ts +1 -2
- package/dist/components/input.js +2 -3
- package/dist/components/input.js.map +1 -1
- package/dist/components/kbd.js +1 -1
- package/dist/components/kbd.js.map +1 -1
- package/dist/components/label.js +1 -1
- package/dist/components/label.js.map +1 -1
- package/dist/components/navigation-menu.d.ts +20 -0
- package/dist/components/navigation-menu.js +83 -0
- package/dist/components/navigation-menu.js.map +1 -0
- package/dist/components/page-header.d.ts +8 -0
- package/dist/components/page-header.js +51 -0
- package/dist/components/page-header.js.map +1 -0
- package/dist/components/popover.d.ts +5 -2
- package/dist/components/popover.js +5 -2
- package/dist/components/popover.js.map +1 -1
- package/dist/components/progress.js +2 -2
- package/dist/components/progress.js.map +1 -1
- package/dist/components/radio-group.js +1 -1
- package/dist/components/radio-group.js.map +1 -1
- package/dist/components/scroll-area.js +1 -1
- package/dist/components/scroll-area.js.map +1 -1
- package/dist/components/select.js +3 -3
- package/dist/components/select.js.map +1 -1
- package/dist/components/sheet.js +4 -4
- package/dist/components/sheet.js.map +1 -1
- package/dist/components/skeleton.js +1 -1
- package/dist/components/skeleton.js.map +1 -1
- package/dist/components/stat-card.d.ts +11 -0
- package/dist/components/stat-card.js +42 -0
- package/dist/components/stat-card.js.map +1 -0
- package/dist/components/status.d.ts +12 -0
- package/dist/components/status.js +40 -0
- package/dist/components/status.js.map +1 -0
- package/dist/components/switch.js +1 -1
- package/dist/components/switch.js.map +1 -1
- package/dist/components/table.d.ts +19 -4
- package/dist/components/table.js +18 -12
- package/dist/components/table.js.map +1 -1
- package/dist/components/tabs.js +4 -4
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/textarea.js +1 -1
- package/dist/components/textarea.js.map +1 -1
- package/dist/components/toast.d.ts +20 -0
- package/dist/components/toast.js +70 -0
- package/dist/components/toast.js.map +1 -0
- package/dist/components/toolbar.d.ts +6 -0
- package/dist/components/toolbar.js +39 -0
- package/dist/components/toolbar.js.map +1 -0
- package/dist/components/tooltip.js +2 -2
- package/dist/components/tooltip.js.map +1 -1
- package/dist/index.d.ts +10 -0
- package/dist/index.js +13 -3
- package/dist/mui/index.js +9 -5
- package/dist/mui/index.js.map +1 -1
- package/dist/styles.css +1 -1
- package/dist/theme.css +95 -47
- package/dist/tokens.d.ts +41 -13
- package/dist/tokens.js +80 -47
- package/dist/tokens.js.map +1 -1
- package/package.json +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"command.js","names":["Command","CommandPrimitive"],"sources":["../../src/components/command.tsx"],"sourcesContent":["import Search from '@burtson-labs/icons/react/search';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';\n\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n return (\n <CommandPrimitive\n data-slot=\"command\"\n className={cn(\n 'flex h-full w-full flex-col overflow-hidden rounded-
|
|
1
|
+
{"version":3,"file":"command.js","names":["Command","CommandPrimitive"],"sources":["../../src/components/command.tsx"],"sourcesContent":["import Search from '@burtson-labs/icons/react/search';\nimport { Command as CommandPrimitive } from 'cmdk';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Dialog, DialogContent, DialogDescription, DialogHeader, DialogTitle } from './dialog';\n\nfunction Command({ className, ...props }: React.ComponentProps<typeof CommandPrimitive>) {\n return (\n <CommandPrimitive\n data-slot=\"command\"\n className={cn(\n 'flex h-full w-full flex-col overflow-hidden rounded-lg bg-surface-raised text-popover-foreground',\n className,\n )}\n {...props}\n />\n );\n}\n\n/** A command palette in a dialog, the usual ⌘K surface. */\nfunction CommandDialog({\n title = 'Command palette',\n description = 'Search for a page or an action',\n children,\n className,\n ...props\n}: React.ComponentProps<typeof Dialog> & {\n title?: string;\n description?: string;\n className?: string;\n}) {\n return (\n <Dialog {...props}>\n <DialogContent\n className={cn(\n 'top-[20%] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl sm:p-0',\n className,\n )}\n showCloseButton={false}\n >\n <DialogHeader className=\"sr-only\">\n <DialogTitle>{title}</DialogTitle>\n <DialogDescription>{description}</DialogDescription>\n </DialogHeader>\n <Command className=\"[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-2\">\n {children}\n </Command>\n </DialogContent>\n </Dialog>\n );\n}\n\nfunction CommandInput({\n className,\n ...props\n}: React.ComponentProps<typeof CommandPrimitive.Input>) {\n return (\n <div data-slot=\"command-input-wrapper\" className=\"flex h-11 items-center gap-2 border-b px-3\">\n <Search className=\"size-4 shrink-0 opacity-50\" aria-hidden />\n <CommandPrimitive.Input\n data-slot=\"command-input\"\n className={cn(\n 'flex h-10 w-full bg-transparent py-3 text-sm outline-hidden placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50',\n className,\n )}\n {...props}\n />\n </div>\n );\n}\n\nfunction CommandList({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.List>) {\n return (\n <CommandPrimitive.List\n data-slot=\"command-list\"\n className={cn('max-h-80 scroll-py-1 overflow-x-hidden overflow-y-auto p-1', className)}\n {...props}\n />\n );\n}\n\nfunction CommandEmpty(props: React.ComponentProps<typeof CommandPrimitive.Empty>) {\n return (\n <CommandPrimitive.Empty\n data-slot=\"command-empty\"\n className=\"py-6 text-center text-sm text-muted-foreground\"\n {...props}\n />\n );\n}\n\nfunction CommandGroup({\n className,\n ...props\n}: React.ComponentProps<typeof CommandPrimitive.Group>) {\n return (\n <CommandPrimitive.Group\n data-slot=\"command-group\"\n className={cn(\n 'overflow-hidden p-1 text-foreground [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction CommandSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof CommandPrimitive.Separator>) {\n return (\n <CommandPrimitive.Separator\n data-slot=\"command-separator\"\n className={cn('-mx-1 h-px bg-border', className)}\n {...props}\n />\n );\n}\n\nfunction CommandItem({ className, ...props }: React.ComponentProps<typeof CommandPrimitive.Item>) {\n return (\n <CommandPrimitive.Item\n data-slot=\"command-item\"\n className={cn(\n \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-muted data-[selected=true]:text-foreground data-[selected=true]:shadow-[inset_2px_0_0_var(--color-brand)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\",\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction CommandShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot=\"command-shortcut\"\n className={cn(\n 'ml-auto rounded-xs border border-border bg-surface-muted px-1.5 font-mono text-[11px] leading-5 text-muted-foreground',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport {\n Command,\n CommandDialog,\n CommandEmpty,\n CommandGroup,\n CommandInput,\n CommandItem,\n CommandList,\n CommandSeparator,\n CommandShortcut,\n};\n"],"mappings":";;;;;;;AAQA,SAASA,UAAQ,EAAE,WAAW,GAAG,SAAwD;CACvF,OACE,oBAACC,SAAD;EACE,aAAU;EACV,WAAW,GACT,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,cAAc,EACrB,QAAQ,mBACR,cAAc,kCACd,UACA,WACA,GAAG,SAKF;CACD,OACE,oBAAC,QAAD;EAAQ,GAAI;EACV,UAAA,qBAAC,eAAD;GACE,WAAW,GACT,wEACA,SACF;GACA,iBAAiB;GALnB,UAAA,CAOE,qBAAC,cAAD;IAAc,WAAU;IAAxB,UAAA,CACE,oBAAC,aAAD,EAAA,UAAc,MAAmB,CAAA,GACjC,oBAAC,mBAAD,EAAA,UAAoB,YAA+B,CAAA,CACvC;GACd,CAAA,GAAA,oBAACD,WAAD;IAAS,WAAU;IAChB;GACM,CAAA,CACI;;CACT,CAAA;AAEZ;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,qBAAC,OAAD;EAAK,aAAU;EAAwB,WAAU;EAAjD,UAAA,CACE,oBAAC,QAAD;GAAQ,WAAU;GAA6B,eAAA;EAAa,CAAA,GAC5D,oBAACC,QAAiB,OAAlB;GACE,aAAU;GACV,WAAW,GACT,iJACA,SACF;GACA,GAAI;EACL,CAAA,CACE;;AAET;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,OAA4D;CAChF,OACE,oBAACA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAU;EACV,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACmD;CACtD,OACE,oBAACA,QAAiB,OAAlB;EACE,aAAU;EACV,WAAW,GACT,0NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,QAAiB,WAAlB;EACE,aAAU;EACV,WAAW,GAAG,wBAAwB,SAAS;EAC/C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,QAAiB,MAAlB;EACE,aAAU;EACV,WAAW,GACT,mcACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAuC;CAC9E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GACT,yHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -2,8 +2,8 @@ import { Dialog as DialogPrimitive } from 'radix-ui';
|
|
|
2
2
|
import * as React from 'react';
|
|
3
3
|
declare function Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
|
|
4
4
|
declare function DialogTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
|
|
5
|
-
declare function DialogPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
|
|
6
5
|
declare function DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
|
|
6
|
+
declare function DialogPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
|
|
7
7
|
declare function DialogOverlay({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Overlay>): React.JSX.Element;
|
|
8
8
|
declare function DialogContent({ className, children, showCloseButton, ...props }: React.ComponentProps<typeof DialogPrimitive.Content> & {
|
|
9
9
|
showCloseButton?: boolean;
|
|
@@ -16,65 +16,65 @@ function DialogTrigger(props) {
|
|
|
16
16
|
...props
|
|
17
17
|
});
|
|
18
18
|
}
|
|
19
|
-
function DialogPortal(props) {
|
|
20
|
-
return /* @__PURE__ */ jsx(Dialog.Portal, {
|
|
21
|
-
"data-slot": "dialog-portal",
|
|
22
|
-
...props
|
|
23
|
-
});
|
|
24
|
-
}
|
|
25
19
|
function DialogClose(props) {
|
|
26
20
|
return /* @__PURE__ */ jsx(Dialog.Close, {
|
|
27
21
|
"data-slot": "dialog-close",
|
|
28
22
|
...props
|
|
29
23
|
});
|
|
30
24
|
}
|
|
25
|
+
function DialogPortal(props) {
|
|
26
|
+
return /* @__PURE__ */ jsx(Dialog.Portal, {
|
|
27
|
+
"data-slot": "dialog-portal",
|
|
28
|
+
...props
|
|
29
|
+
});
|
|
30
|
+
}
|
|
31
31
|
function DialogOverlay({ className, ...props }) {
|
|
32
32
|
return /* @__PURE__ */ jsx(Dialog.Overlay, {
|
|
33
33
|
"data-slot": "dialog-overlay",
|
|
34
|
-
className: cn("fixed inset-0 z-50 bg-black/
|
|
34
|
+
className: cn("fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-out data-[state=open]:animate-in", className),
|
|
35
35
|
...props
|
|
36
36
|
});
|
|
37
37
|
}
|
|
38
38
|
function DialogContent({ className, children, showCloseButton = true, ...props }) {
|
|
39
39
|
return /* @__PURE__ */ jsxs(DialogPortal, { children: [/* @__PURE__ */ jsx(DialogOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Content, {
|
|
40
40
|
"data-slot": "dialog-content",
|
|
41
|
-
className: cn("fixed top-1/2 left-1/2 z-50 grid w-
|
|
41
|
+
className: cn("fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-5 rounded-xl border border-border-strong bg-surface-raised p-5 text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-out data-[state=open]:animate-in sm:p-6", className),
|
|
42
42
|
...props,
|
|
43
|
-
children: [children, showCloseButton
|
|
43
|
+
children: [children, showCloseButton ? /* @__PURE__ */ jsxs(Dialog.Close, {
|
|
44
44
|
"data-slot": "dialog-close",
|
|
45
|
-
className: "absolute top-
|
|
45
|
+
className: "absolute top-3.5 right-3.5 grid size-8 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-4",
|
|
46
46
|
children: [/* @__PURE__ */ jsx(X, { "aria-hidden": true }), /* @__PURE__ */ jsx("span", {
|
|
47
47
|
className: "sr-only",
|
|
48
48
|
children: "Close"
|
|
49
49
|
})]
|
|
50
|
-
})]
|
|
50
|
+
}) : null]
|
|
51
51
|
})] });
|
|
52
52
|
}
|
|
53
53
|
function DialogHeader({ className, ...props }) {
|
|
54
54
|
return /* @__PURE__ */ jsx("div", {
|
|
55
55
|
"data-slot": "dialog-header",
|
|
56
|
-
className: cn("
|
|
56
|
+
className: cn("grid gap-1.5 pr-7", className),
|
|
57
57
|
...props
|
|
58
58
|
});
|
|
59
59
|
}
|
|
60
60
|
function DialogFooter({ className, ...props }) {
|
|
61
61
|
return /* @__PURE__ */ jsx("div", {
|
|
62
62
|
"data-slot": "dialog-footer",
|
|
63
|
-
className: cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
|
|
63
|
+
className: cn("flex flex-col-reverse gap-2 border-t border-border pt-4 sm:flex-row sm:justify-end", className),
|
|
64
64
|
...props
|
|
65
65
|
});
|
|
66
66
|
}
|
|
67
67
|
function DialogTitle({ className, ...props }) {
|
|
68
68
|
return /* @__PURE__ */ jsx(Dialog.Title, {
|
|
69
69
|
"data-slot": "dialog-title",
|
|
70
|
-
className: cn("text-
|
|
70
|
+
className: cn("text-base font-semibold tracking-[-0.02em]", className),
|
|
71
71
|
...props
|
|
72
72
|
});
|
|
73
73
|
}
|
|
74
74
|
function DialogDescription({ className, ...props }) {
|
|
75
75
|
return /* @__PURE__ */ jsx(Dialog.Description, {
|
|
76
76
|
"data-slot": "dialog-description",
|
|
77
|
-
className: cn("text-sm text-muted-foreground", className),
|
|
77
|
+
className: cn("text-sm leading-5 text-muted-foreground", className),
|
|
78
78
|
...props
|
|
79
79
|
});
|
|
80
80
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction
|
|
1
|
+
{"version":3,"file":"dialog.js","names":["Dialog","DialogPrimitive"],"sources":["../../src/components/dialog.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport { Dialog as DialogPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Dialog(props: React.ComponentProps<typeof DialogPrimitive.Root>) {\n return <DialogPrimitive.Root data-slot=\"dialog\" {...props} />;\n}\n\nfunction DialogTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>) {\n return <DialogPrimitive.Trigger data-slot=\"dialog-trigger\" {...props} />;\n}\n\nfunction DialogClose(props: React.ComponentProps<typeof DialogPrimitive.Close>) {\n return <DialogPrimitive.Close data-slot=\"dialog-close\" {...props} />;\n}\n\nfunction DialogPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>) {\n return <DialogPrimitive.Portal data-slot=\"dialog-portal\" {...props} />;\n}\n\nfunction DialogOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {\n return (\n <DialogPrimitive.Overlay\n data-slot=\"dialog-overlay\"\n className={cn(\n 'fixed inset-0 z-50 bg-black/55 backdrop-blur-[3px] data-[state=closed]:animate-out data-[state=open]:animate-in',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DialogContent({\n className,\n children,\n showCloseButton = true,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Content> & { showCloseButton?: boolean }) {\n return (\n <DialogPortal>\n <DialogOverlay />\n <DialogPrimitive.Content\n data-slot=\"dialog-content\"\n className={cn(\n 'fixed top-1/2 left-1/2 z-50 grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-5 rounded-xl border border-border-strong bg-surface-raised p-5 text-foreground shadow-[0_24px_80px_rgb(0_0_0_/_0.28)] outline-none data-[state=closed]:animate-out data-[state=open]:animate-in sm:p-6',\n className,\n )}\n {...props}\n >\n {children}\n {showCloseButton ? (\n <DialogPrimitive.Close\n data-slot=\"dialog-close\"\n className=\"absolute top-3.5 right-3.5 grid size-8 place-items-center rounded-md text-muted-foreground outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-4\"\n >\n <X aria-hidden />\n <span className=\"sr-only\">Close</span>\n </DialogPrimitive.Close>\n ) : null}\n </DialogPrimitive.Content>\n </DialogPortal>\n );\n}\n\nfunction DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div data-slot=\"dialog-header\" className={cn('grid gap-1.5 pr-7', className)} {...props} />\n );\n}\n\nfunction DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"dialog-footer\"\n className={cn(\n 'flex flex-col-reverse gap-2 border-t border-border pt-4 sm:flex-row sm:justify-end',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {\n return (\n <DialogPrimitive.Title\n data-slot=\"dialog-title\"\n className={cn('text-base font-semibold tracking-[-0.02em]', className)}\n {...props}\n />\n );\n}\n\nfunction DialogDescription({\n className,\n ...props\n}: React.ComponentProps<typeof DialogPrimitive.Description>) {\n return (\n <DialogPrimitive.Description\n data-slot=\"dialog-description\"\n className={cn('text-sm leading-5 text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\nexport {\n Dialog,\n DialogClose,\n DialogContent,\n DialogDescription,\n DialogFooter,\n DialogHeader,\n DialogOverlay,\n DialogPortal,\n DialogTitle,\n DialogTrigger,\n};\n"],"mappings":";;;;;;AAMA,SAASA,SAAO,OAA0D;CACxE,OAAO,oBAACC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAEA,SAAS,cAAc,OAA6D;CAClF,OAAO,oBAACA,OAAgB,SAAjB;EAAyB,aAAU;EAAiB,GAAI;CAAQ,CAAA;AACzE;AAEA,SAAS,YAAY,OAA2D;CAC9E,OAAO,oBAACA,OAAgB,OAAjB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,aAAa,OAA4D;CAChF,OAAO,oBAACA,OAAgB,QAAjB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,mHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EACrB,WACA,UACA,kBAAkB,MAClB,GAAG,SACoF;CACvF,OACE,qBAAC,cAAD,EAAA,UAAA,CACE,oBAAC,eAAD,CAAgB,CAAA,GAChB,qBAACA,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,8SACA,SACF;EACA,GAAI;EANN,UAAA,CAQG,UACA,kBACC,qBAACA,OAAgB,OAAjB;GACE,aAAU;GACV,WAAU;GAFZ,UAAA,CAIE,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA,GAChB,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CAChB;EACrB,CAAA,IAAA,IACmB;CACb,CAAA,CAAA,EAAA,CAAA;AAElB;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EAAK,aAAU;EAAgB,WAAW,GAAG,qBAAqB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE9F;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,8CAA8C,SAAS;EACrE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EACzB,WACA,GAAG,SACwD;CAC3D,OACE,oBAACA,OAAgB,aAAjB;EACE,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -6,7 +6,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
|
|
|
6
6
|
import ChevronRight from "@burtson-labs/icons/react/chevron-right";
|
|
7
7
|
import Check from "@burtson-labs/icons/react/check";
|
|
8
8
|
//#region src/components/dropdown-menu.tsx
|
|
9
|
-
var itemClasses = "relative flex cursor-default items-center gap-2 rounded-sm px-2
|
|
9
|
+
var itemClasses = "relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden select-none focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground";
|
|
10
10
|
function DropdownMenu$1(props) {
|
|
11
11
|
return /* @__PURE__ */ jsx(DropdownMenu.Root, {
|
|
12
12
|
"data-slot": "dropdown-menu",
|
|
@@ -78,7 +78,7 @@ function DropdownMenuLabel({ className, inset, ...props }) {
|
|
|
78
78
|
return /* @__PURE__ */ jsx(DropdownMenu.Label, {
|
|
79
79
|
"data-slot": "dropdown-menu-label",
|
|
80
80
|
"data-inset": inset || void 0,
|
|
81
|
-
className: cn("px-2
|
|
81
|
+
className: cn("px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8", className),
|
|
82
82
|
...props
|
|
83
83
|
});
|
|
84
84
|
}
|
|
@@ -106,7 +106,7 @@ function DropdownMenuSubTrigger({ className, inset, children, ...props }) {
|
|
|
106
106
|
return /* @__PURE__ */ jsxs(DropdownMenu.SubTrigger, {
|
|
107
107
|
"data-slot": "dropdown-menu-sub-trigger",
|
|
108
108
|
"data-inset": inset || void 0,
|
|
109
|
-
className: cn(itemClasses, "data-[state=open]:bg-
|
|
109
|
+
className: cn(itemClasses, "data-[state=open]:bg-muted", className),
|
|
110
110
|
...props,
|
|
111
111
|
children: [children, /* @__PURE__ */ jsx(ChevronRight, {
|
|
112
112
|
className: "ml-auto size-4",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"dropdown-menu.js","names":["DropdownMenu","DropdownMenuPrimitive"],"sources":["../../src/components/dropdown-menu.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { surfaceClasses } from './popover';\n\nconst itemClasses =\n \"relative flex cursor-default items-center gap-2 rounded-sm px-2
|
|
1
|
+
{"version":3,"file":"dropdown-menu.js","names":["DropdownMenu","DropdownMenuPrimitive"],"sources":["../../src/components/dropdown-menu.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport ChevronRight from '@burtson-labs/icons/react/chevron-right';\nimport { DropdownMenu as DropdownMenuPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { surfaceClasses } from './popover';\n\n// 32px rows, 8px radius; the focused row is a quiet fill, like an active tab.\nconst itemClasses =\n \"relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden select-none focus:bg-muted focus:text-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground\";\n\nfunction DropdownMenu(props: React.ComponentProps<typeof DropdownMenuPrimitive.Root>) {\n return <DropdownMenuPrimitive.Root data-slot=\"dropdown-menu\" {...props} />;\n}\n\nfunction DropdownMenuTrigger(props: React.ComponentProps<typeof DropdownMenuPrimitive.Trigger>) {\n return <DropdownMenuPrimitive.Trigger data-slot=\"dropdown-menu-trigger\" {...props} />;\n}\n\nfunction DropdownMenuGroup(props: React.ComponentProps<typeof DropdownMenuPrimitive.Group>) {\n return <DropdownMenuPrimitive.Group data-slot=\"dropdown-menu-group\" {...props} />;\n}\n\nfunction DropdownMenuContent({\n className,\n sideOffset = 4,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Content>) {\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.Content\n data-slot=\"dropdown-menu-content\"\n sideOffset={sideOffset}\n className={cn(\n surfaceClasses,\n 'max-h-(--radix-dropdown-menu-content-available-height) min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-x-hidden overflow-y-auto p-1',\n className,\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n );\n}\n\nfunction DropdownMenuItem({\n className,\n inset,\n variant = 'default',\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Item> & {\n inset?: boolean;\n variant?: 'default' | 'destructive';\n}) {\n return (\n <DropdownMenuPrimitive.Item\n data-slot=\"dropdown-menu-item\"\n data-inset={inset || undefined}\n data-variant={variant}\n className={cn(\n itemClasses,\n 'data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 data-[variant=destructive]:*:[svg]:!text-destructive',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuCheckboxItem({\n className,\n children,\n checked,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.CheckboxItem>) {\n return (\n <DropdownMenuPrimitive.CheckboxItem\n data-slot=\"dropdown-menu-checkbox-item\"\n className={cn(itemClasses, 'pl-8', className)}\n checked={checked}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <Check className=\"size-4 text-foreground\" aria-hidden />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.CheckboxItem>\n );\n}\n\nfunction DropdownMenuRadioGroup(\n props: React.ComponentProps<typeof DropdownMenuPrimitive.RadioGroup>,\n) {\n return <DropdownMenuPrimitive.RadioGroup data-slot=\"dropdown-menu-radio-group\" {...props} />;\n}\n\nfunction DropdownMenuRadioItem({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.RadioItem>) {\n return (\n <DropdownMenuPrimitive.RadioItem\n data-slot=\"dropdown-menu-radio-item\"\n className={cn(itemClasses, 'pl-8', className)}\n {...props}\n >\n <span className=\"pointer-events-none absolute left-2 flex size-3.5 items-center justify-center\">\n <DropdownMenuPrimitive.ItemIndicator>\n <span className=\"block size-2 rounded-full bg-foreground\" />\n </DropdownMenuPrimitive.ItemIndicator>\n </span>\n {children}\n </DropdownMenuPrimitive.RadioItem>\n );\n}\n\nfunction DropdownMenuLabel({\n className,\n inset,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Label> & { inset?: boolean }) {\n return (\n <DropdownMenuPrimitive.Label\n data-slot=\"dropdown-menu-label\"\n data-inset={inset || undefined}\n className={cn(\n 'px-2 pt-2 pb-1 text-[11px] font-semibold tracking-[0.08em] text-muted-foreground uppercase data-[inset]:pl-8',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuSeparator({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.Separator>) {\n return (\n <DropdownMenuPrimitive.Separator\n data-slot=\"dropdown-menu-separator\"\n className={cn('-mx-1 my-1 h-px bg-border', className)}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuShortcut({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot=\"dropdown-menu-shortcut\"\n className={cn('ml-auto text-xs tracking-widest text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\nfunction DropdownMenuSub(props: React.ComponentProps<typeof DropdownMenuPrimitive.Sub>) {\n return <DropdownMenuPrimitive.Sub data-slot=\"dropdown-menu-sub\" {...props} />;\n}\n\nfunction DropdownMenuSubTrigger({\n className,\n inset,\n children,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubTrigger> & { inset?: boolean }) {\n return (\n <DropdownMenuPrimitive.SubTrigger\n data-slot=\"dropdown-menu-sub-trigger\"\n data-inset={inset || undefined}\n className={cn(itemClasses, 'data-[state=open]:bg-muted', className)}\n {...props}\n >\n {children}\n <ChevronRight className=\"ml-auto size-4\" aria-hidden />\n </DropdownMenuPrimitive.SubTrigger>\n );\n}\n\nfunction DropdownMenuSubContent({\n className,\n ...props\n}: React.ComponentProps<typeof DropdownMenuPrimitive.SubContent>) {\n return (\n <DropdownMenuPrimitive.Portal>\n <DropdownMenuPrimitive.SubContent\n data-slot=\"dropdown-menu-sub-content\"\n className={cn(\n surfaceClasses,\n 'min-w-[8rem] origin-(--radix-dropdown-menu-content-transform-origin) overflow-hidden p-1',\n className,\n )}\n {...props}\n />\n </DropdownMenuPrimitive.Portal>\n );\n}\n\nexport {\n DropdownMenu,\n DropdownMenuCheckboxItem,\n DropdownMenuContent,\n DropdownMenuGroup,\n DropdownMenuItem,\n DropdownMenuLabel,\n DropdownMenuRadioGroup,\n DropdownMenuRadioItem,\n DropdownMenuSeparator,\n DropdownMenuShortcut,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n};\n"],"mappings":";;;;;;;;AAUA,IAAM,cACJ;AAEF,SAASA,eAAa,OAAgE;CACpF,OAAO,oBAACC,aAAsB,MAAvB;EAA4B,aAAU;EAAgB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,oBAAoB,OAAmE;CAC9F,OAAO,oBAACA,aAAsB,SAAvB;EAA+B,aAAU;EAAwB,GAAI;CAAQ,CAAA;AACtF;AAEA,SAAS,kBAAkB,OAAiE;CAC1F,OAAO,oBAACA,aAAsB,OAAvB;EAA6B,aAAU;EAAsB,GAAI;CAAQ,CAAA;AAClF;AAEA,SAAS,oBAAoB,EAC3B,WACA,aAAa,GACb,GAAG,SAC0D;CAC7D,OACE,oBAACA,aAAsB,QAAvB,EAAA,UACE,oBAACA,aAAsB,SAAvB;EACE,aAAU;EACE;EACZ,WAAW,GACT,gBACA,qKACA,SACF;EACA,GAAI;CACL,CAAA,EAC2B,CAAA;AAElC;AAEA,SAAS,iBAAiB,EACxB,WACA,OACA,UAAU,WACV,GAAG,SAIF;CACD,OACE,oBAACA,aAAsB,MAAvB;EACE,aAAU;EACV,cAAY,SAAS,KAAA;EACrB,gBAAc;EACd,WAAW,GACT,aACA,uJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,yBAAyB,EAChC,WACA,UACA,SACA,GAAG,SAC+D;CAClE,OACE,qBAACA,aAAsB,cAAvB;EACE,aAAU;EACV,WAAW,GAAG,aAAa,QAAQ,SAAS;EACnC;EACT,GAAI;EAJN,UAAA,CAME,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACA,aAAsB,eAAvB,EAAA,UACE,oBAAC,OAAD;IAAO,WAAU;IAAyB,eAAA;GAAa,CAAA,EACpB,CAAA;EACjC,CAAA,GACL,QACiC;;AAExC;AAEA,SAAS,uBACP,OACA;CACA,OAAO,oBAACA,aAAsB,YAAvB;EAAkC,aAAU;EAA4B,GAAI;CAAQ,CAAA;AAC7F;AAEA,SAAS,sBAAsB,EAC7B,WACA,UACA,GAAG,SAC4D;CAC/D,OACE,qBAACA,aAAsB,WAAvB;EACE,aAAU;EACV,WAAW,GAAG,aAAa,QAAQ,SAAS;EAC5C,GAAI;EAHN,UAAA,CAKE,oBAAC,QAAD;GAAM,WAAU;GACd,UAAA,oBAACA,aAAsB,eAAvB,EAAA,UACE,oBAAC,QAAD,EAAM,WAAU,0CAA2C,CAAA,EACxB,CAAA;EACjC,CAAA,GACL,QAC8B;;AAErC;AAEA,SAAS,kBAAkB,EACzB,WACA,OACA,GAAG,SAC8E;CACjF,OACE,oBAACA,aAAsB,OAAvB;EACE,aAAU;EACV,cAAY,SAAS,KAAA;EACrB,WAAW,GACT,gHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,sBAAsB,EAC7B,WACA,GAAG,SAC4D;CAC/D,OACE,oBAACA,aAAsB,WAAvB;EACE,aAAU;EACV,WAAW,GAAG,6BAA6B,SAAS;EACpD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,qBAAqB,EAAE,WAAW,GAAG,SAAuC;CACnF,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,OAA+D;CACtF,OAAO,oBAACA,aAAsB,KAAvB;EAA2B,aAAU;EAAoB,GAAI;CAAQ,CAAA;AAC9E;AAEA,SAAS,uBAAuB,EAC9B,WACA,OACA,UACA,GAAG,SACmF;CACtF,OACE,qBAACA,aAAsB,YAAvB;EACE,aAAU;EACV,cAAY,SAAS,KAAA;EACrB,WAAW,GAAG,aAAa,8BAA8B,SAAS;EAClE,GAAI;EAJN,UAAA,CAMG,UACD,oBAAC,cAAD;GAAc,WAAU;GAAiB,eAAA;EAAa,CAAA,CACtB;;AAEtC;AAEA,SAAS,uBAAuB,EAC9B,WACA,GAAG,SAC6D;CAChE,OACE,oBAACA,aAAsB,QAAvB,EAAA,UACE,oBAACA,aAAsB,YAAvB;EACE,aAAU;EACV,WAAW,GACT,gBACA,4FACA,SACF;EACA,GAAI;CACL,CAAA,EAC2B,CAAA;AAElC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
declare function EmptyState({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
3
|
+
declare function EmptyStateIcon({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
4
|
+
declare function EmptyStateTitle({ className, children, ...props }: React.ComponentProps<'h3'>): React.JSX.Element;
|
|
5
|
+
declare function EmptyStateDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
|
|
6
|
+
declare function EmptyStateActions({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
7
|
+
export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle };
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/empty-state.tsx
|
|
5
|
+
function EmptyState({ className, ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx("div", {
|
|
7
|
+
"data-slot": "empty-state",
|
|
8
|
+
className: cn("flex min-h-64 flex-col items-center justify-center rounded-xl border border-dashed border-border-strong bg-surface-muted/60 px-6 py-10 text-center", className),
|
|
9
|
+
...props
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
function EmptyStateIcon({ className, ...props }) {
|
|
13
|
+
return /* @__PURE__ */ jsx("div", {
|
|
14
|
+
"data-slot": "empty-state-icon",
|
|
15
|
+
className: cn("mb-4 grid size-10 place-items-center rounded-lg border border-brand/15 bg-brand-soft text-brand [&_svg]:size-5", className),
|
|
16
|
+
...props
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
function EmptyStateTitle({ className, children, ...props }) {
|
|
20
|
+
return /* @__PURE__ */ jsx("h3", {
|
|
21
|
+
"data-slot": "empty-state-title",
|
|
22
|
+
className: cn("text-sm font-semibold text-foreground", className),
|
|
23
|
+
...props,
|
|
24
|
+
children
|
|
25
|
+
});
|
|
26
|
+
}
|
|
27
|
+
function EmptyStateDescription({ className, ...props }) {
|
|
28
|
+
return /* @__PURE__ */ jsx("p", {
|
|
29
|
+
"data-slot": "empty-state-description",
|
|
30
|
+
className: cn("mt-1 max-w-md text-sm leading-5 text-muted-foreground", className),
|
|
31
|
+
...props
|
|
32
|
+
});
|
|
33
|
+
}
|
|
34
|
+
function EmptyStateActions({ className, ...props }) {
|
|
35
|
+
return /* @__PURE__ */ jsx("div", {
|
|
36
|
+
"data-slot": "empty-state-actions",
|
|
37
|
+
className: cn("mt-5 flex flex-wrap justify-center gap-2", className),
|
|
38
|
+
...props
|
|
39
|
+
});
|
|
40
|
+
}
|
|
41
|
+
//#endregion
|
|
42
|
+
export { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle };
|
|
43
|
+
|
|
44
|
+
//# sourceMappingURL=empty-state.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"empty-state.js","names":[],"sources":["../../src/components/empty-state.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction EmptyState({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"empty-state\"\n className={cn(\n 'flex min-h-64 flex-col items-center justify-center rounded-xl border border-dashed border-border-strong bg-surface-muted/60 px-6 py-10 text-center',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction EmptyStateIcon({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"empty-state-icon\"\n className={cn(\n 'mb-4 grid size-10 place-items-center rounded-lg border border-brand/15 bg-brand-soft text-brand [&_svg]:size-5',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction EmptyStateTitle({ className, children, ...props }: React.ComponentProps<'h3'>) {\n return (\n <h3\n data-slot=\"empty-state-title\"\n className={cn('text-sm font-semibold text-foreground', className)}\n {...props}\n >\n {children}\n </h3>\n );\n}\n\nfunction EmptyStateDescription({ className, ...props }: React.ComponentProps<'p'>) {\n return (\n <p\n data-slot=\"empty-state-description\"\n className={cn('mt-1 max-w-md text-sm leading-5 text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\nfunction EmptyStateActions({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"empty-state-actions\"\n className={cn('mt-5 flex flex-wrap justify-center gap-2', className)}\n {...props}\n />\n );\n}\n\nexport { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle };\n"],"mappings":";;;;AAIA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAsC;CAC5E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,UAAU,GAAG,SAAqC;CACtF,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,yCAAyC,SAAS;EAChE,GAAI;EAEH;CACC,CAAA;AAER;AAEA,SAAS,sBAAsB,EAAE,WAAW,GAAG,SAAoC;CACjF,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,kBAAkB,EAAE,WAAW,GAAG,SAAsC;CAC/E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
declare function Field({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
3
|
+
declare function FieldHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
4
|
+
declare function FieldLabel({ className, ...props }: React.ComponentProps<'label'>): React.JSX.Element;
|
|
5
|
+
declare function FieldHint({ className, ...props }: React.ComponentProps<'span'>): React.JSX.Element;
|
|
6
|
+
declare function FieldDescription({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
|
|
7
|
+
declare function FieldError({ className, ...props }: React.ComponentProps<'p'>): React.JSX.Element;
|
|
8
|
+
export { Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel };
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/field.tsx
|
|
5
|
+
function Field({ className, ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx("div", {
|
|
7
|
+
"data-slot": "field",
|
|
8
|
+
className: cn("grid gap-1.5", className),
|
|
9
|
+
...props
|
|
10
|
+
});
|
|
11
|
+
}
|
|
12
|
+
function FieldHeader({ className, ...props }) {
|
|
13
|
+
return /* @__PURE__ */ jsx("div", {
|
|
14
|
+
"data-slot": "field-header",
|
|
15
|
+
className: cn("flex items-baseline justify-between gap-3", className),
|
|
16
|
+
...props
|
|
17
|
+
});
|
|
18
|
+
}
|
|
19
|
+
function FieldLabel({ className, ...props }) {
|
|
20
|
+
return /* @__PURE__ */ jsx("label", {
|
|
21
|
+
"data-slot": "field-label",
|
|
22
|
+
className: cn("text-[13px] font-semibold text-foreground", className),
|
|
23
|
+
...props
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
function FieldHint({ className, ...props }) {
|
|
27
|
+
return /* @__PURE__ */ jsx("span", {
|
|
28
|
+
"data-slot": "field-hint",
|
|
29
|
+
className: cn("text-xs text-muted-foreground", className),
|
|
30
|
+
...props
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
function FieldDescription({ className, ...props }) {
|
|
34
|
+
return /* @__PURE__ */ jsx("p", {
|
|
35
|
+
"data-slot": "field-description",
|
|
36
|
+
className: cn("text-xs leading-5 text-muted-foreground", className),
|
|
37
|
+
...props
|
|
38
|
+
});
|
|
39
|
+
}
|
|
40
|
+
function FieldError({ className, ...props }) {
|
|
41
|
+
return /* @__PURE__ */ jsx("p", {
|
|
42
|
+
"data-slot": "field-error",
|
|
43
|
+
role: "alert",
|
|
44
|
+
className: cn("text-xs font-medium text-destructive", className),
|
|
45
|
+
...props
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
//#endregion
|
|
49
|
+
export { Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel };
|
|
50
|
+
|
|
51
|
+
//# sourceMappingURL=field.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"field.js","names":[],"sources":["../../src/components/field.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Field({ className, ...props }: React.ComponentProps<'div'>) {\n return <div data-slot=\"field\" className={cn('grid gap-1.5', className)} {...props} />;\n}\n\nfunction FieldHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"field-header\"\n className={cn('flex items-baseline justify-between gap-3', className)}\n {...props}\n />\n );\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<'label'>) {\n return (\n // Callers pass htmlFor (or wrap the control); the rule cannot see through the spread.\n // eslint-disable-next-line jsx-a11y/label-has-associated-control\n <label\n data-slot=\"field-label\"\n className={cn('text-[13px] font-semibold text-foreground', className)}\n {...props}\n />\n );\n}\n\nfunction FieldHint({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot=\"field-hint\"\n className={cn('text-xs text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {\n return (\n <p\n data-slot=\"field-description\"\n className={cn('text-xs leading-5 text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\nfunction FieldError({ className, ...props }: React.ComponentProps<'p'>) {\n return (\n <p\n data-slot=\"field-error\"\n role=\"alert\"\n className={cn('text-xs font-medium text-destructive', className)}\n {...props}\n />\n );\n}\n\nexport { Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel };\n"],"mappings":";;;;AAIA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAsC;CACnE,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAQ,WAAW,GAAG,gBAAgB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACtF;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6CAA6C,SAAS;EACpE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAwC;CAC1E,OAGE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,6CAA6C,SAAS;EACpE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAuC;CACxE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAoC;CAC5E,OACE,oBAAC,KAAD;EACE,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAoC;CACtE,OACE,oBAAC,KAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { type ButtonProps } from './button';
|
|
3
|
+
export interface IconButtonProps extends Omit<ButtonProps, 'children'> {
|
|
4
|
+
label: string;
|
|
5
|
+
children: React.ReactNode;
|
|
6
|
+
}
|
|
7
|
+
declare function IconButton({ label, className, children, size, ...props }: IconButtonProps): React.JSX.Element;
|
|
8
|
+
export { IconButton };
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import { Button } from "./button.js";
|
|
3
|
+
import "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
//#region src/components/icon-button.tsx
|
|
6
|
+
function IconButton({ label, className, children, size = "icon", ...props }) {
|
|
7
|
+
return /* @__PURE__ */ jsx(Button, {
|
|
8
|
+
"aria-label": label,
|
|
9
|
+
title: props.title ?? label,
|
|
10
|
+
size,
|
|
11
|
+
className: cn("rounded-md", className),
|
|
12
|
+
...props,
|
|
13
|
+
children
|
|
14
|
+
});
|
|
15
|
+
}
|
|
16
|
+
//#endregion
|
|
17
|
+
export { IconButton };
|
|
18
|
+
|
|
19
|
+
//# sourceMappingURL=icon-button.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"icon-button.js","names":[],"sources":["../../src/components/icon-button.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { Button, type ButtonProps } from './button';\n\nexport interface IconButtonProps extends Omit<ButtonProps, 'children'> {\n label: string;\n children: React.ReactNode;\n}\n\nfunction IconButton({ label, className, children, size = 'icon', ...props }: IconButtonProps) {\n return (\n <Button\n aria-label={label}\n title={props.title ?? label}\n size={size}\n className={cn('rounded-md', className)}\n {...props}\n >\n {children}\n </Button>\n );\n}\n\nexport { IconButton };\n"],"mappings":";;;;;AAWA,SAAS,WAAW,EAAE,OAAO,WAAW,UAAU,OAAO,QAAQ,GAAG,SAA0B;CAC5F,OACE,oBAAC,QAAD;EACE,cAAY;EACZ,OAAO,MAAM,SAAS;EAChB;EACN,WAAW,GAAG,cAAc,SAAS;EACrC,GAAI;EAEH;CACK,CAAA;AAEZ"}
|
|
@@ -1,5 +1,4 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
|
|
3
|
-
export declare const fieldClasses = "w-full min-w-0 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/20";
|
|
2
|
+
export declare const fieldClasses = "w-full min-w-0 rounded-md border border-input bg-surface px-3 text-sm text-foreground shadow-xs outline-none transition-[border-color,box-shadow,background-color] placeholder:text-muted-foreground/80 hover:border-border-strong focus-visible:border-brand focus-visible:ring-[3px] focus-visible:ring-ring/15 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:ring-destructive/15 dark:bg-surface-raised";
|
|
4
3
|
declare function Input({ className, type, ...props }: React.ComponentProps<'input'>): React.JSX.Element;
|
|
5
4
|
export { Input };
|
package/dist/components/input.js
CHANGED
|
@@ -2,13 +2,12 @@ import { cn } from "../lib/utils.js";
|
|
|
2
2
|
import "react";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
//#region src/components/input.tsx
|
|
5
|
-
|
|
6
|
-
var fieldClasses = "w-full min-w-0 rounded-md border border-input bg-transparent px-3 text-sm shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/20";
|
|
5
|
+
var fieldClasses = "w-full min-w-0 rounded-md border border-input bg-surface px-3 text-sm text-foreground shadow-xs outline-none transition-[border-color,box-shadow,background-color] placeholder:text-muted-foreground/80 hover:border-border-strong focus-visible:border-brand focus-visible:ring-[3px] focus-visible:ring-ring/15 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:ring-destructive/15 dark:bg-surface-raised";
|
|
7
6
|
function Input({ className, type, ...props }) {
|
|
8
7
|
return /* @__PURE__ */ jsx("input", {
|
|
9
8
|
type,
|
|
10
9
|
"data-slot": "input",
|
|
11
|
-
className: cn(fieldClasses, "h-9 py-1 file:
|
|
10
|
+
className: cn(fieldClasses, "h-9 py-1.5 file:mr-3 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground", className),
|
|
12
11
|
...props
|
|
13
12
|
});
|
|
14
13
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"input.js","names":[],"sources":["../../src/components/input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\
|
|
1
|
+
{"version":3,"file":"input.js","names":[],"sources":["../../src/components/input.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport const fieldClasses =\n 'w-full min-w-0 rounded-md border border-input bg-surface px-3 text-sm text-foreground shadow-xs outline-none transition-[border-color,box-shadow,background-color] placeholder:text-muted-foreground/80 hover:border-border-strong focus-visible:border-brand focus-visible:ring-[3px] focus-visible:ring-ring/15 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-60 aria-invalid:border-destructive aria-invalid:ring-destructive/15 dark:bg-surface-raised';\n\nfunction Input({ className, type, ...props }: React.ComponentProps<'input'>) {\n return (\n <input\n type={type}\n data-slot=\"input\"\n className={cn(\n fieldClasses,\n 'h-9 py-1.5 file:mr-3 file:border-0 file:bg-transparent file:text-sm file:font-semibold file:text-foreground',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Input };\n"],"mappings":";;;;AAIA,IAAa,eACX;AAEF,SAAS,MAAM,EAAE,WAAW,MAAM,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACQ;EACN,aAAU;EACV,WAAW,GACT,cACA,+GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
|
package/dist/components/kbd.js
CHANGED
|
@@ -5,7 +5,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
5
5
|
function Kbd({ className, ...props }) {
|
|
6
6
|
return /* @__PURE__ */ jsx("kbd", {
|
|
7
7
|
"data-slot": "kbd",
|
|
8
|
-
className: cn("pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-
|
|
8
|
+
className: cn("pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-xs border border-border-strong border-b-2 bg-surface-muted px-1 font-mono text-[11px] font-medium text-muted-foreground select-none [&_svg]:size-3", className),
|
|
9
9
|
...props
|
|
10
10
|
});
|
|
11
11
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"kbd.js","names":[],"sources":["../../src/components/kbd.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {\n return (\n <kbd\n data-slot=\"kbd\"\n className={cn(\n 'pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-
|
|
1
|
+
{"version":3,"file":"kbd.js","names":[],"sources":["../../src/components/kbd.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Kbd({ className, ...props }: React.ComponentProps<'kbd'>) {\n return (\n <kbd\n data-slot=\"kbd\"\n className={cn(\n 'pointer-events-none inline-flex h-5 min-w-5 items-center justify-center gap-1 rounded-xs border border-border-strong border-b-2 bg-surface-muted px-1 font-mono text-[11px] font-medium text-muted-foreground select-none [&_svg]:size-3',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction KbdGroup({ className, ...props }: React.ComponentProps<'span'>) {\n return (\n <span\n data-slot=\"kbd-group\"\n className={cn('inline-flex items-center gap-1', className)}\n {...props}\n />\n );\n}\n\nexport { Kbd, KbdGroup };\n"],"mappings":";;;;AAIA,SAAS,IAAI,EAAE,WAAW,GAAG,SAAsC;CACjE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,4OACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAuC;CACvE,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,kCAAkC,SAAS;EACzD,GAAI;CACL,CAAA;AAEL"}
|
package/dist/components/label.js
CHANGED
|
@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
6
6
|
function Label$1({ className, ...props }) {
|
|
7
7
|
return /* @__PURE__ */ jsx(Label.Root, {
|
|
8
8
|
"data-slot": "label",
|
|
9
|
-
className: cn("flex items-center gap-2 text-
|
|
9
|
+
className: cn("flex items-center gap-2 text-[13px] leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50", className),
|
|
10
10
|
...props
|
|
11
11
|
});
|
|
12
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"label.js","names":["Label","LabelPrimitive"],"sources":["../../src/components/label.tsx"],"sourcesContent":["import { Label as LabelPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n return (\n <LabelPrimitive.Root\n data-slot=\"label\"\n className={cn(\n 'flex items-center gap-2 text-
|
|
1
|
+
{"version":3,"file":"label.js","names":["Label","LabelPrimitive"],"sources":["../../src/components/label.tsx"],"sourcesContent":["import { Label as LabelPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {\n return (\n <LabelPrimitive.Root\n data-slot=\"label\"\n className={cn(\n 'flex items-center gap-2 text-[13px] leading-none font-semibold select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',\n className,\n )}\n {...props}\n />\n );\n}\n\nexport { Label };\n"],"mappings":";;;;;AAKA,SAASA,QAAM,EAAE,WAAW,GAAG,SAA2D;CACxF,OACE,oBAACC,MAAe,MAAhB;EACE,aAAU;EACV,WAAW,GACT,6NACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { NavigationMenu as NavigationMenuPrimitive } from 'radix-ui';
|
|
2
|
+
import * as React from 'react';
|
|
3
|
+
/**
|
|
4
|
+
* Site navigation with dropdown panels (a products menu, docs sections).
|
|
5
|
+
* Keyboard and screen-reader behaviour come from Radix; the panel renders in
|
|
6
|
+
* a shared viewport under the bar, sized to its content.
|
|
7
|
+
*/
|
|
8
|
+
declare function NavigationMenu({ className, children, viewport, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Root> & {
|
|
9
|
+
viewport?: boolean;
|
|
10
|
+
}): React.JSX.Element;
|
|
11
|
+
declare function NavigationMenuList({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.List>): React.JSX.Element;
|
|
12
|
+
declare function NavigationMenuItem({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Item>): React.JSX.Element;
|
|
13
|
+
/** The look of a top-level entry, for links that sit beside triggers. */
|
|
14
|
+
declare const navigationMenuTriggerStyle = "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 text-sm font-semibold text-foreground/80 outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 data-[active]:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground";
|
|
15
|
+
declare function NavigationMenuTrigger({ className, children, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Trigger>): React.JSX.Element;
|
|
16
|
+
declare function NavigationMenuContent({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Content>): React.JSX.Element;
|
|
17
|
+
declare function NavigationMenuViewport({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Viewport>): React.JSX.Element;
|
|
18
|
+
declare function NavigationMenuLink({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Link>): React.JSX.Element;
|
|
19
|
+
declare function NavigationMenuIndicator({ className, ...props }: React.ComponentProps<typeof NavigationMenuPrimitive.Indicator>): React.JSX.Element;
|
|
20
|
+
export { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, navigationMenuTriggerStyle, NavigationMenuViewport, };
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import ChevronDown from "@burtson-labs/icons/react/chevron-down";
|
|
3
|
+
import { NavigationMenu } from "radix-ui";
|
|
4
|
+
import "react";
|
|
5
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
+
//#region src/components/navigation-menu.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Site navigation with dropdown panels (a products menu, docs sections).
|
|
9
|
+
* Keyboard and screen-reader behaviour come from Radix; the panel renders in
|
|
10
|
+
* a shared viewport under the bar, sized to its content.
|
|
11
|
+
*/
|
|
12
|
+
function NavigationMenu$1({ className, children, viewport = true, ...props }) {
|
|
13
|
+
return /* @__PURE__ */ jsxs(NavigationMenu.Root, {
|
|
14
|
+
"data-slot": "navigation-menu",
|
|
15
|
+
"data-viewport": viewport,
|
|
16
|
+
className: cn("group/navigation-menu relative flex max-w-max flex-1 items-center justify-center", className),
|
|
17
|
+
...props,
|
|
18
|
+
children: [children, viewport && /* @__PURE__ */ jsx(NavigationMenuViewport, {})]
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
function NavigationMenuList({ className, ...props }) {
|
|
22
|
+
return /* @__PURE__ */ jsx(NavigationMenu.List, {
|
|
23
|
+
"data-slot": "navigation-menu-list",
|
|
24
|
+
className: cn("group flex flex-1 list-none items-center justify-center gap-1", className),
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function NavigationMenuItem({ className, ...props }) {
|
|
29
|
+
return /* @__PURE__ */ jsx(NavigationMenu.Item, {
|
|
30
|
+
"data-slot": "navigation-menu-item",
|
|
31
|
+
className: cn("relative", className),
|
|
32
|
+
...props
|
|
33
|
+
});
|
|
34
|
+
}
|
|
35
|
+
/** The look of a top-level entry, for links that sit beside triggers. */
|
|
36
|
+
var navigationMenuTriggerStyle = "group inline-flex h-9 w-max items-center justify-center gap-1 rounded-md px-3 text-sm font-semibold text-foreground/80 outline-none transition-colors hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 data-[active]:text-foreground data-[state=open]:bg-muted data-[state=open]:text-foreground";
|
|
37
|
+
function NavigationMenuTrigger({ className, children, ...props }) {
|
|
38
|
+
return /* @__PURE__ */ jsxs(NavigationMenu.Trigger, {
|
|
39
|
+
"data-slot": "navigation-menu-trigger",
|
|
40
|
+
className: cn(navigationMenuTriggerStyle, className),
|
|
41
|
+
...props,
|
|
42
|
+
children: [children, /* @__PURE__ */ jsx(ChevronDown, {
|
|
43
|
+
"aria-hidden": true,
|
|
44
|
+
className: "relative top-px size-3.5 transition-transform duration-200 group-data-[state=open]:rotate-180"
|
|
45
|
+
})]
|
|
46
|
+
});
|
|
47
|
+
}
|
|
48
|
+
function NavigationMenuContent({ className, ...props }) {
|
|
49
|
+
return /* @__PURE__ */ jsx(NavigationMenu.Content, {
|
|
50
|
+
"data-slot": "navigation-menu-content",
|
|
51
|
+
className: cn("top-0 left-0 w-full p-2 md:absolute md:w-auto data-[motion^=from-]:animate-in data-[motion^=to-]:animate-out", className),
|
|
52
|
+
...props
|
|
53
|
+
});
|
|
54
|
+
}
|
|
55
|
+
function NavigationMenuViewport({ className, ...props }) {
|
|
56
|
+
return /* @__PURE__ */ jsx("div", {
|
|
57
|
+
className: "absolute top-full left-0 z-50 flex justify-center",
|
|
58
|
+
children: /* @__PURE__ */ jsx(NavigationMenu.Viewport, {
|
|
59
|
+
"data-slot": "navigation-menu-viewport",
|
|
60
|
+
className: cn("relative mt-2 h-(--radix-navigation-menu-viewport-height) w-full origin-top overflow-hidden rounded-lg border border-border-strong bg-surface-raised text-popover-foreground shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[state=open]:animate-in md:w-(--radix-navigation-menu-viewport-width)", className),
|
|
61
|
+
...props
|
|
62
|
+
})
|
|
63
|
+
});
|
|
64
|
+
}
|
|
65
|
+
function NavigationMenuLink({ className, ...props }) {
|
|
66
|
+
return /* @__PURE__ */ jsx(NavigationMenu.Link, {
|
|
67
|
+
"data-slot": "navigation-menu-link",
|
|
68
|
+
className: cn("flex flex-col gap-1 rounded-sm p-2 text-sm outline-none transition-colors hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20 data-[active=true]:bg-muted data-[active=true]:shadow-[inset_2px_0_0_var(--color-brand)] [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
|
|
69
|
+
...props
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
function NavigationMenuIndicator({ className, ...props }) {
|
|
73
|
+
return /* @__PURE__ */ jsx(NavigationMenu.Indicator, {
|
|
74
|
+
"data-slot": "navigation-menu-indicator",
|
|
75
|
+
className: cn("top-full z-[1] flex h-1.5 items-end justify-center overflow-hidden data-[state=hidden]:animate-out data-[state=visible]:animate-in", className),
|
|
76
|
+
...props,
|
|
77
|
+
children: /* @__PURE__ */ jsx("div", { className: "relative top-[60%] size-2 rotate-45 rounded-tl-sm bg-border-strong" })
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
//#endregion
|
|
81
|
+
export { NavigationMenu$1 as NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle };
|
|
82
|
+
|
|
83
|
+
//# sourceMappingURL=navigation-menu.js.map
|