@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":"table.js","names":[],"sources":["../../src/components/table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\
|
|
1
|
+
{"version":3,"file":"table.js","names":[],"sources":["../../src/components/table.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nexport interface TableProps extends React.ComponentProps<'table'> {\n /** `compact` for dense ops screens (32px rows), `default` 40px. */\n density?: 'compact' | 'default';\n /** Keep the header visible while the container scrolls; give it a height. */\n stickyHeader?: boolean;\n containerClassName?: string;\n}\n\nfunction Table({\n className,\n density = 'default',\n stickyHeader = false,\n containerClassName,\n ...props\n}: TableProps) {\n return (\n <div\n data-slot=\"table-container\"\n data-density={density}\n data-sticky={stickyHeader || undefined}\n className={cn('group/table relative w-full overflow-auto', containerClassName)}\n >\n <table\n data-slot=\"table\"\n className={cn('w-full caption-bottom text-[13px]', className)}\n {...props}\n />\n </div>\n );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {\n return (\n <thead\n data-slot=\"table-header\"\n className={cn(\n 'bg-surface-muted [&_tr]:border-b group-data-[sticky]/table:sticky group-data-[sticky]/table:top-0 group-data-[sticky]/table:z-10',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TableBody({ className, ...props }: React.ComponentProps<'tbody'>) {\n return (\n <tbody\n data-slot=\"table-body\"\n className={cn('[&_tr:last-child]:border-0', className)}\n {...props}\n />\n );\n}\n\nfunction TableFooter({ className, ...props }: React.ComponentProps<'tfoot'>) {\n return (\n <tfoot\n data-slot=\"table-footer\"\n className={cn('border-t bg-surface-muted font-medium [&>tr]:last:border-b-0', className)}\n {...props}\n />\n );\n}\n\n/** Set `data-state=\"selected\"` (or `selected`) to mark a chosen row. */\nfunction TableRow({\n className,\n selected,\n ...props\n}: React.ComponentProps<'tr'> & { selected?: boolean }) {\n return (\n <tr\n data-slot=\"table-row\"\n data-state={selected ? 'selected' : undefined}\n aria-selected={selected || undefined}\n className={cn(\n 'border-b transition-colors hover:bg-muted/60 data-[state=selected]:bg-brand-soft/60 data-[state=selected]:shadow-[inset_2px_0_0_var(--color-brand)]',\n className,\n )}\n {...props}\n />\n );\n}\n\n/** `numeric` right-aligns with tabular figures, for counts, money and durations. */\nfunction TableHead({\n className,\n numeric,\n ...props\n}: React.ComponentProps<'th'> & { numeric?: boolean }) {\n return (\n <th\n data-slot=\"table-head\"\n className={cn(\n 'h-9 px-3 text-left align-middle text-[11px] font-semibold tracking-[0.06em] whitespace-nowrap text-muted-foreground uppercase group-data-[density=compact]/table:h-8 [&:has([role=checkbox])]:w-10 [&:has([role=checkbox])]:pr-0',\n numeric && 'text-right tabular-nums',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TableCell({\n className,\n numeric,\n ...props\n}: React.ComponentProps<'td'> & { numeric?: boolean }) {\n return (\n <td\n data-slot=\"table-cell\"\n className={cn(\n 'h-10 px-3 align-middle whitespace-nowrap group-data-[density=compact]/table:h-8 [&:has([role=checkbox])]:pr-0',\n numeric && 'text-right font-mono text-[12.5px] tabular-nums',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TableCaption({ className, ...props }: React.ComponentProps<'caption'>) {\n return (\n <caption\n data-slot=\"table-caption\"\n className={cn('mt-3 text-xs text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };\n"],"mappings":";;;;AAYA,SAAS,MAAM,EACb,WACA,UAAU,WACV,eAAe,OACf,oBACA,GAAG,SACU;CACb,OACE,oBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,eAAa,gBAAgB,KAAA;EAC7B,WAAW,GAAG,6CAA6C,kBAAkB;EAE7E,UAAA,oBAAC,SAAD;GACE,aAAU;GACV,WAAW,GAAG,qCAAqC,SAAS;GAC5D,GAAI;EACL,CAAA;CACE,CAAA;AAET;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,oIACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAwC;CACzE,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,8BAA8B,SAAS;EACrD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAwC;CAC3E,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,gEAAgE,SAAS;EACvF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,SAAS,EAChB,WACA,UACA,GAAG,SACmD;CACtD,OACE,oBAAC,MAAD;EACE,aAAU;EACV,cAAY,WAAW,aAAa,KAAA;EACpC,iBAAe,YAAY,KAAA;EAC3B,WAAW,GACT,uJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,UAAU,EACjB,WACA,SACA,GAAG,SACkD;CACrD,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,oOACA,WAAW,2BACX,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EACjB,WACA,SACA,GAAG,SACkD;CACrD,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,iHACA,WAAW,mDACX,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAA0C;CAC9E,OACE,oBAAC,WAAD;EACE,aAAU;EACV,WAAW,GAAG,sCAAsC,SAAS;EAC7D,GAAI;CACL,CAAA;AAEL"}
|
package/dist/components/tabs.js
CHANGED
|
@@ -6,28 +6,28 @@ import { jsx } from "react/jsx-runtime";
|
|
|
6
6
|
function Tabs$1({ className, ...props }) {
|
|
7
7
|
return /* @__PURE__ */ jsx(Tabs.Root, {
|
|
8
8
|
"data-slot": "tabs",
|
|
9
|
-
className: cn("flex flex-col gap-
|
|
9
|
+
className: cn("flex flex-col gap-3", className),
|
|
10
10
|
...props
|
|
11
11
|
});
|
|
12
12
|
}
|
|
13
13
|
function TabsList({ className, ...props }) {
|
|
14
14
|
return /* @__PURE__ */ jsx(Tabs.List, {
|
|
15
15
|
"data-slot": "tabs-list",
|
|
16
|
-
className: cn("inline-flex h-9 w-fit items-center
|
|
16
|
+
className: cn("inline-flex h-9 w-fit items-center gap-0.5 rounded-md border border-border bg-surface-muted p-1 text-muted-foreground", className),
|
|
17
17
|
...props
|
|
18
18
|
});
|
|
19
19
|
}
|
|
20
20
|
function TabsTrigger({ className, ...props }) {
|
|
21
21
|
return /* @__PURE__ */ jsx(Tabs.Trigger, {
|
|
22
22
|
"data-slot": "tabs-trigger",
|
|
23
|
-
className: cn("inline-flex h-
|
|
23
|
+
className: cn("inline-flex h-7 min-w-0 items-center justify-center gap-1.5 rounded-sm px-2.5 text-[13px] font-semibold whitespace-nowrap outline-none transition-[background-color,color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface data-[state=active]:text-foreground data-[state=active]:shadow-xs hover:text-foreground [&_svg]:size-3.5", className),
|
|
24
24
|
...props
|
|
25
25
|
});
|
|
26
26
|
}
|
|
27
27
|
function TabsContent({ className, ...props }) {
|
|
28
28
|
return /* @__PURE__ */ jsx(Tabs.Content, {
|
|
29
29
|
"data-slot": "tabs-content",
|
|
30
|
-
className: cn("flex-1 outline-none", className),
|
|
30
|
+
className: cn("min-w-0 flex-1 outline-none", className),
|
|
31
31
|
...props
|
|
32
32
|
});
|
|
33
33
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tabs.js","names":["Tabs","TabsPrimitive"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import { Tabs as TabsPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n return (\n <TabsPrimitive.Root\n data-slot=\"tabs\"\n className={cn('flex flex-col gap-
|
|
1
|
+
{"version":3,"file":"tabs.js","names":["Tabs","TabsPrimitive"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import { Tabs as TabsPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Tabs({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>) {\n return (\n <TabsPrimitive.Root\n data-slot=\"tabs\"\n className={cn('flex flex-col gap-3', className)}\n {...props}\n />\n );\n}\n\nfunction TabsList({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.List>) {\n return (\n <TabsPrimitive.List\n data-slot=\"tabs-list\"\n className={cn(\n 'inline-flex h-9 w-fit items-center gap-0.5 rounded-md border border-border bg-surface-muted p-1 text-muted-foreground',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n return (\n <TabsPrimitive.Trigger\n data-slot=\"tabs-trigger\"\n className={cn(\n 'inline-flex h-7 min-w-0 items-center justify-center gap-1.5 rounded-sm px-2.5 text-[13px] font-semibold whitespace-nowrap outline-none transition-[background-color,color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-surface data-[state=active]:text-foreground data-[state=active]:shadow-xs hover:text-foreground [&_svg]:size-3.5',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>) {\n return (\n <TabsPrimitive.Content\n data-slot=\"tabs-content\"\n className={cn('min-w-0 flex-1 outline-none', className)}\n {...props}\n />\n );\n}\n\nexport { Tabs, TabsContent, TabsList, TabsTrigger };\n"],"mappings":";;;;;AAKA,SAASA,OAAK,EAAE,WAAW,GAAG,SAA0D;CACtF,OACE,oBAACC,KAAc,MAAf;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA0D;CAC1F,OACE,oBAACA,KAAc,MAAf;EACE,aAAU;EACV,WAAW,GACT,yHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,KAAc,SAAf;EACE,aAAU;EACV,WAAW,GACT,saACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,KAAc,SAAf;EACE,aAAU;EACV,WAAW,GAAG,+BAA+B,SAAS;EACtD,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
|
|
|
6
6
|
function Textarea({ className, ...props }) {
|
|
7
7
|
return /* @__PURE__ */ jsx("textarea", {
|
|
8
8
|
"data-slot": "textarea",
|
|
9
|
-
className: cn(fieldClasses, "
|
|
9
|
+
className: cn(fieldClasses, "min-h-24 resize-y py-2.5 leading-5", className),
|
|
10
10
|
...props
|
|
11
11
|
});
|
|
12
12
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"textarea.js","names":[],"sources":["../../src/components/textarea.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { fieldClasses } from './input';\n\nfunction Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {\n return (\n <textarea\n data-slot=\"textarea\"\n className={cn(fieldClasses, '
|
|
1
|
+
{"version":3,"file":"textarea.js","names":[],"sources":["../../src/components/textarea.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nimport { fieldClasses } from './input';\n\nfunction Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {\n return (\n <textarea\n data-slot=\"textarea\"\n className={cn(fieldClasses, 'min-h-24 resize-y py-2.5 leading-5', className)}\n {...props}\n />\n );\n}\n\nexport { Textarea };\n"],"mappings":";;;;;AAMA,SAAS,SAAS,EAAE,WAAW,GAAG,SAA2C;CAC3E,OACE,oBAAC,YAAD;EACE,aAAU;EACV,WAAW,GAAG,cAAc,sCAAsC,SAAS;EAC3E,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { type VariantProps } from 'class-variance-authority';
|
|
2
|
+
import { Toast as ToastPrimitive } from 'radix-ui';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
/**
|
|
5
|
+
* Brief, non-blocking notices ("Message sent", "Update available"). Put one
|
|
6
|
+
* `ToastProvider` + `ToastViewport` near the root and render `Toast`s with
|
|
7
|
+
* `open` state; Radix handles timing, swipe-to-dismiss and the live region.
|
|
8
|
+
*/
|
|
9
|
+
declare const ToastProvider: React.FC<ToastPrimitive.ToastProviderProps>;
|
|
10
|
+
declare function ToastViewport({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Viewport>): React.JSX.Element;
|
|
11
|
+
declare const toastVariants: (props?: ({
|
|
12
|
+
variant?: "destructive" | "success" | "default" | null | undefined;
|
|
13
|
+
} & import("class-variance-authority/types").ClassProp) | undefined) => string;
|
|
14
|
+
declare function Toast({ className, variant, ...props }: React.ComponentProps<typeof ToastPrimitive.Root> & VariantProps<typeof toastVariants>): React.JSX.Element;
|
|
15
|
+
declare function ToastTitle({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Title>): React.JSX.Element;
|
|
16
|
+
declare function ToastDescription({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Description>): React.JSX.Element;
|
|
17
|
+
/** A button inside the toast; `altText` tells screen readers how to do it without the toast. */
|
|
18
|
+
declare function ToastAction({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Action>): React.JSX.Element;
|
|
19
|
+
declare function ToastClose({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Close>): React.JSX.Element;
|
|
20
|
+
export { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, toastVariants, ToastViewport, };
|
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import { Toast } from "radix-ui";
|
|
3
|
+
import "react";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
import { cva } from "class-variance-authority";
|
|
6
|
+
import X from "@burtson-labs/icons/react/x";
|
|
7
|
+
//#region src/components/toast.tsx
|
|
8
|
+
/**
|
|
9
|
+
* Brief, non-blocking notices ("Message sent", "Update available"). Put one
|
|
10
|
+
* `ToastProvider` + `ToastViewport` near the root and render `Toast`s with
|
|
11
|
+
* `open` state; Radix handles timing, swipe-to-dismiss and the live region.
|
|
12
|
+
*/
|
|
13
|
+
var ToastProvider = Toast.Provider;
|
|
14
|
+
function ToastViewport({ className, ...props }) {
|
|
15
|
+
return /* @__PURE__ */ jsx(Toast.Viewport, {
|
|
16
|
+
"data-slot": "toast-viewport",
|
|
17
|
+
className: cn("fixed right-0 bottom-0 z-[100] flex max-h-dvh w-full flex-col-reverse gap-2 p-4 outline-none sm:max-w-sm", className),
|
|
18
|
+
...props
|
|
19
|
+
});
|
|
20
|
+
}
|
|
21
|
+
var toastVariants = cva("group pointer-events-auto relative grid w-full grid-cols-[1fr_auto] items-start gap-x-3 gap-y-1 overflow-hidden rounded-lg border p-4 pr-10 text-sm shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none", {
|
|
22
|
+
variants: { variant: {
|
|
23
|
+
default: "border-border-strong bg-surface-raised text-foreground",
|
|
24
|
+
success: "border-success/30 bg-surface-raised text-foreground [&_[data-slot=toast-title]]:text-success",
|
|
25
|
+
destructive: "border-destructive/30 bg-surface-raised text-foreground [&_[data-slot=toast-title]]:text-destructive"
|
|
26
|
+
} },
|
|
27
|
+
defaultVariants: { variant: "default" }
|
|
28
|
+
});
|
|
29
|
+
function Toast$1({ className, variant, ...props }) {
|
|
30
|
+
return /* @__PURE__ */ jsx(Toast.Root, {
|
|
31
|
+
"data-slot": "toast",
|
|
32
|
+
className: cn(toastVariants({ variant }), className),
|
|
33
|
+
...props
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
function ToastTitle({ className, ...props }) {
|
|
37
|
+
return /* @__PURE__ */ jsx(Toast.Title, {
|
|
38
|
+
"data-slot": "toast-title",
|
|
39
|
+
className: cn("col-start-1 font-semibold tracking-[-0.01em]", className),
|
|
40
|
+
...props
|
|
41
|
+
});
|
|
42
|
+
}
|
|
43
|
+
function ToastDescription({ className, ...props }) {
|
|
44
|
+
return /* @__PURE__ */ jsx(Toast.Description, {
|
|
45
|
+
"data-slot": "toast-description",
|
|
46
|
+
className: cn("col-start-1 text-[13px] leading-5 text-muted-foreground", className),
|
|
47
|
+
...props
|
|
48
|
+
});
|
|
49
|
+
}
|
|
50
|
+
/** A button inside the toast; `altText` tells screen readers how to do it without the toast. */
|
|
51
|
+
function ToastAction({ className, ...props }) {
|
|
52
|
+
return /* @__PURE__ */ jsx(Toast.Action, {
|
|
53
|
+
"data-slot": "toast-action",
|
|
54
|
+
className: cn("col-start-2 row-span-2 row-start-1 inline-flex h-8 shrink-0 items-center justify-center self-center rounded-md border border-border-strong bg-surface px-3 text-[13px] font-semibold transition-colors outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20", className),
|
|
55
|
+
...props
|
|
56
|
+
});
|
|
57
|
+
}
|
|
58
|
+
function ToastClose({ className, ...props }) {
|
|
59
|
+
return /* @__PURE__ */ jsx(Toast.Close, {
|
|
60
|
+
"data-slot": "toast-close",
|
|
61
|
+
"aria-label": "Dismiss",
|
|
62
|
+
className: cn("absolute top-3 right-3 grid size-6 place-items-center rounded-sm text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-3.5", className),
|
|
63
|
+
...props,
|
|
64
|
+
children: /* @__PURE__ */ jsx(X, { "aria-hidden": true })
|
|
65
|
+
});
|
|
66
|
+
}
|
|
67
|
+
//#endregion
|
|
68
|
+
export { Toast$1 as Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, toastVariants };
|
|
69
|
+
|
|
70
|
+
//# sourceMappingURL=toast.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toast.js","names":["ToastPrimitive","Toast"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["import X from '@burtson-labs/icons/react/x';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport { Toast as ToastPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\n/**\n * Brief, non-blocking notices (\"Message sent\", \"Update available\"). Put one\n * `ToastProvider` + `ToastViewport` near the root and render `Toast`s with\n * `open` state; Radix handles timing, swipe-to-dismiss and the live region.\n */\nconst ToastProvider = ToastPrimitive.Provider;\n\nfunction ToastViewport({\n className,\n ...props\n}: React.ComponentProps<typeof ToastPrimitive.Viewport>) {\n return (\n <ToastPrimitive.Viewport\n data-slot=\"toast-viewport\"\n className={cn(\n 'fixed right-0 bottom-0 z-[100] flex max-h-dvh w-full flex-col-reverse gap-2 p-4 outline-none sm:max-w-sm',\n className,\n )}\n {...props}\n />\n );\n}\n\nconst toastVariants = cva(\n 'group pointer-events-auto relative grid w-full grid-cols-[1fr_auto] items-start gap-x-3 gap-y-1 overflow-hidden rounded-lg border p-4 pr-10 text-sm shadow-[0_16px_48px_rgb(0_0_0_/_0.18)] data-[state=closed]:animate-out data-[state=open]:animate-in data-[swipe=cancel]:translate-x-0 data-[swipe=end]:translate-x-(--radix-toast-swipe-end-x) data-[swipe=move]:translate-x-(--radix-toast-swipe-move-x) data-[swipe=move]:transition-none',\n {\n variants: {\n variant: {\n default: 'border-border-strong bg-surface-raised text-foreground',\n success:\n 'border-success/30 bg-surface-raised text-foreground [&_[data-slot=toast-title]]:text-success',\n destructive:\n 'border-destructive/30 bg-surface-raised text-foreground [&_[data-slot=toast-title]]:text-destructive',\n },\n },\n defaultVariants: { variant: 'default' },\n },\n);\n\nfunction Toast({\n className,\n variant,\n ...props\n}: React.ComponentProps<typeof ToastPrimitive.Root> & VariantProps<typeof toastVariants>) {\n return (\n <ToastPrimitive.Root\n data-slot=\"toast\"\n className={cn(toastVariants({ variant }), className)}\n {...props}\n />\n );\n}\n\nfunction ToastTitle({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Title>) {\n return (\n <ToastPrimitive.Title\n data-slot=\"toast-title\"\n className={cn('col-start-1 font-semibold tracking-[-0.01em]', className)}\n {...props}\n />\n );\n}\n\nfunction ToastDescription({\n className,\n ...props\n}: React.ComponentProps<typeof ToastPrimitive.Description>) {\n return (\n <ToastPrimitive.Description\n data-slot=\"toast-description\"\n className={cn('col-start-1 text-[13px] leading-5 text-muted-foreground', className)}\n {...props}\n />\n );\n}\n\n/** A button inside the toast; `altText` tells screen readers how to do it without the toast. */\nfunction ToastAction({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Action>) {\n return (\n <ToastPrimitive.Action\n data-slot=\"toast-action\"\n className={cn(\n 'col-start-2 row-span-2 row-start-1 inline-flex h-8 shrink-0 items-center justify-center self-center rounded-md border border-border-strong bg-surface px-3 text-[13px] font-semibold transition-colors outline-none hover:bg-muted focus-visible:ring-[3px] focus-visible:ring-ring/20',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ToastClose({ className, ...props }: React.ComponentProps<typeof ToastPrimitive.Close>) {\n return (\n <ToastPrimitive.Close\n data-slot=\"toast-close\"\n aria-label=\"Dismiss\"\n className={cn(\n 'absolute top-3 right-3 grid size-6 place-items-center rounded-sm text-muted-foreground transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/20 [&_svg]:size-3.5',\n className,\n )}\n {...props}\n >\n <X aria-hidden />\n </ToastPrimitive.Close>\n );\n}\n\nexport {\n Toast,\n ToastAction,\n ToastClose,\n ToastDescription,\n ToastProvider,\n ToastTitle,\n toastVariants,\n ToastViewport,\n};\n"],"mappings":";;;;;;;;;;;;AAYA,IAAM,gBAAgBA,MAAe;AAErC,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,MAAe,UAAhB;EACE,aAAU;EACV,WAAW,GACT,4GACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,gBAAgB,IACpB,mbACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,SACE;EACF,aACE;CACJ,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAEA,SAASC,QAAM,EACb,WACA,SACA,GAAG,SACqF;CACxF,OACE,oBAACD,MAAe,MAAhB;EACE,aAAU;EACV,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,oBAACA,MAAe,OAAhB;EACE,aAAU;EACV,WAAW,GAAG,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,oBAACA,MAAe,aAAhB;EACE,aAAU;EACV,WAAW,GAAG,2DAA2D,SAAS;EAClF,GAAI;CACL,CAAA;AAEL;;AAGA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,MAAe,QAAhB;EACE,aAAU;EACV,WAAW,GACT,0RACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAA4D;CAC9F,OACE,oBAACA,MAAe,OAAhB;EACE,aAAU;EACV,cAAW;EACX,WAAW,GACT,mOACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAAC,GAAD,EAAG,eAAA,KAAa,CAAA;CACI,CAAA;AAE1B"}
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
declare function Toolbar({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
3
|
+
declare function ToolbarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
4
|
+
declare function ToolbarSeparator({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
5
|
+
declare function ToolbarSpacer({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
|
|
6
|
+
export { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer };
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
import { cn } from "../lib/utils.js";
|
|
2
|
+
import "react";
|
|
3
|
+
import { jsx } from "react/jsx-runtime";
|
|
4
|
+
//#region src/components/toolbar.tsx
|
|
5
|
+
function Toolbar({ className, ...props }) {
|
|
6
|
+
return /* @__PURE__ */ jsx("div", {
|
|
7
|
+
"data-slot": "toolbar",
|
|
8
|
+
role: "toolbar",
|
|
9
|
+
className: cn("flex min-h-10 flex-wrap items-center gap-1 rounded-lg border border-border bg-surface p-1.5 shadow-xs", className),
|
|
10
|
+
...props
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
function ToolbarGroup({ className, ...props }) {
|
|
14
|
+
return /* @__PURE__ */ jsx("div", {
|
|
15
|
+
"data-slot": "toolbar-group",
|
|
16
|
+
className: cn("flex items-center gap-1", className),
|
|
17
|
+
...props
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
function ToolbarSeparator({ className, ...props }) {
|
|
21
|
+
return /* @__PURE__ */ jsx("div", {
|
|
22
|
+
"data-slot": "toolbar-separator",
|
|
23
|
+
"aria-hidden": "true",
|
|
24
|
+
className: cn("mx-1 h-5 w-px bg-border", className),
|
|
25
|
+
...props
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
function ToolbarSpacer({ className, ...props }) {
|
|
29
|
+
return /* @__PURE__ */ jsx("div", {
|
|
30
|
+
"data-slot": "toolbar-spacer",
|
|
31
|
+
"aria-hidden": "true",
|
|
32
|
+
className: cn("min-w-2 flex-1", className),
|
|
33
|
+
...props
|
|
34
|
+
});
|
|
35
|
+
}
|
|
36
|
+
//#endregion
|
|
37
|
+
export { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer };
|
|
38
|
+
|
|
39
|
+
//# sourceMappingURL=toolbar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"toolbar.js","names":[],"sources":["../../src/components/toolbar.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Toolbar({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"toolbar\"\n role=\"toolbar\"\n className={cn(\n 'flex min-h-10 flex-wrap items-center gap-1 rounded-lg border border-border bg-surface p-1.5 shadow-xs',\n className,\n )}\n {...props}\n />\n );\n}\n\nfunction ToolbarGroup({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"toolbar-group\"\n className={cn('flex items-center gap-1', className)}\n {...props}\n />\n );\n}\n\nfunction ToolbarSeparator({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"toolbar-separator\"\n aria-hidden=\"true\"\n className={cn('mx-1 h-5 w-px bg-border', className)}\n {...props}\n />\n );\n}\n\nfunction ToolbarSpacer({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"toolbar-spacer\"\n aria-hidden=\"true\"\n className={cn('min-w-2 flex-1', className)}\n {...props}\n />\n );\n}\n\nexport { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer };\n"],"mappings":";;;;AAIA,SAAS,QAAQ,EAAE,WAAW,GAAG,SAAsC;CACrE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GACT,yGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAsC;CAC9E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GAAG,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,cAAc,EAAE,WAAW,GAAG,SAAsC;CAC3E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,eAAY;EACZ,WAAW,GAAG,kBAAkB,SAAS;EACzC,GAAI;CACL,CAAA;AAEL"}
|
|
@@ -27,9 +27,9 @@ function TooltipContent({ className, sideOffset = 6, children, ...props }) {
|
|
|
27
27
|
return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsxs(Tooltip.Content, {
|
|
28
28
|
"data-slot": "tooltip-content",
|
|
29
29
|
sideOffset,
|
|
30
|
-
className: cn("z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) animate-in rounded-
|
|
30
|
+
className: cn("z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) animate-in rounded-sm border border-white/10 bg-code px-2 py-1 text-[11.5px] leading-4 font-medium text-balance text-code-foreground shadow-md data-[state=closed]:animate-out", className),
|
|
31
31
|
...props,
|
|
32
|
-
children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "fill-
|
|
32
|
+
children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "fill-code" })]
|
|
33
33
|
}) });
|
|
34
34
|
}
|
|
35
35
|
//#endregion
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"tooltip.js","names":["TooltipPrimitive","Tooltip"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction TooltipProvider({\n delayDuration = 200,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return (\n <TooltipPrimitive.Provider\n data-slot=\"tooltip-provider\"\n delayDuration={delayDuration}\n {...props}\n />\n );\n}\n\n/** Wraps its own provider, so a lone tooltip works without app-level setup. */\nfunction Tooltip(props: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n );\n}\n\nfunction TooltipTrigger(props: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n className,\n sideOffset = 6,\n children,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n sideOffset={sideOffset}\n className={cn(\n 'z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) animate-in rounded-
|
|
1
|
+
{"version":3,"file":"tooltip.js","names":["TooltipPrimitive","Tooltip"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import { Tooltip as TooltipPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction TooltipProvider({\n delayDuration = 200,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n return (\n <TooltipPrimitive.Provider\n data-slot=\"tooltip-provider\"\n delayDuration={delayDuration}\n {...props}\n />\n );\n}\n\n/** Wraps its own provider, so a lone tooltip works without app-level setup. */\nfunction Tooltip(props: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n return (\n <TooltipProvider>\n <TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n </TooltipProvider>\n );\n}\n\nfunction TooltipTrigger(props: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n return <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n className,\n sideOffset = 6,\n children,\n ...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n return (\n <TooltipPrimitive.Portal>\n <TooltipPrimitive.Content\n data-slot=\"tooltip-content\"\n sideOffset={sideOffset}\n className={cn(\n 'z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) animate-in rounded-sm border border-white/10 bg-code px-2 py-1 text-[11.5px] leading-4 font-medium text-balance text-code-foreground shadow-md data-[state=closed]:animate-out',\n className,\n )}\n {...props}\n >\n {children}\n <TooltipPrimitive.Arrow className=\"fill-code\" />\n </TooltipPrimitive.Content>\n </TooltipPrimitive.Portal>\n );\n}\n\nexport { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };\n"],"mappings":";;;;;AAKA,SAAS,gBAAgB,EACvB,gBAAgB,KAChB,GAAG,SACsD;CACzD,OACE,oBAACA,QAAiB,UAAlB;EACE,aAAU;EACK;EACf,GAAI;CACL,CAAA;AAEL;;AAGA,SAASC,UAAQ,OAA2D;CAC1E,OACE,oBAAC,iBAAD,EAAA,UACE,oBAACD,QAAiB,MAAlB;EAAuB,aAAU;EAAU,GAAI;CAAQ,CAAA,EACxC,CAAA;AAErB;AAEA,SAAS,eAAe,OAA8D;CACpF,OAAO,oBAACA,QAAiB,SAAlB;EAA0B,aAAU;EAAkB,GAAI;CAAQ,CAAA;AAC3E;AAEA,SAAS,eAAe,EACtB,WACA,aAAa,GACb,UACA,GAAG,SACqD;CACxD,OACE,oBAACA,QAAiB,QAAlB,EAAA,UACE,qBAACA,QAAiB,SAAlB;EACE,aAAU;EACE;EACZ,WAAW,GACT,wPACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,UACD,oBAACA,QAAiB,OAAlB,EAAwB,WAAU,YAAa,CAAA,CACvB;CACH,CAAA,EAAA,CAAA;AAE7B"}
|
package/dist/index.d.ts
CHANGED
|
@@ -2,6 +2,7 @@ export { cn } from './lib/utils';
|
|
|
2
2
|
export * from './tokens';
|
|
3
3
|
export * from './components/accordion';
|
|
4
4
|
export * from './components/alert';
|
|
5
|
+
export * from './components/app-shell';
|
|
5
6
|
export * from './components/avatar';
|
|
6
7
|
export * from './components/badge';
|
|
7
8
|
export * from './components/breadcrumb';
|
|
@@ -12,9 +13,14 @@ export * from './components/collapsible';
|
|
|
12
13
|
export * from './components/command';
|
|
13
14
|
export * from './components/dialog';
|
|
14
15
|
export * from './components/dropdown-menu';
|
|
16
|
+
export * from './components/empty-state';
|
|
17
|
+
export * from './components/field';
|
|
18
|
+
export * from './components/icon-button';
|
|
15
19
|
export * from './components/input';
|
|
16
20
|
export * from './components/kbd';
|
|
17
21
|
export * from './components/label';
|
|
22
|
+
export * from './components/navigation-menu';
|
|
23
|
+
export * from './components/page-header';
|
|
18
24
|
export * from './components/popover';
|
|
19
25
|
export * from './components/progress';
|
|
20
26
|
export * from './components/radio-group';
|
|
@@ -24,8 +30,12 @@ export * from './components/separator';
|
|
|
24
30
|
export * from './components/sheet';
|
|
25
31
|
export * from './components/skeleton';
|
|
26
32
|
export * from './components/spinner';
|
|
33
|
+
export * from './components/stat-card';
|
|
34
|
+
export * from './components/status';
|
|
27
35
|
export * from './components/switch';
|
|
28
36
|
export * from './components/table';
|
|
29
37
|
export * from './components/tabs';
|
|
30
38
|
export * from './components/textarea';
|
|
39
|
+
export * from './components/toast';
|
|
40
|
+
export * from './components/toolbar';
|
|
31
41
|
export * from './components/tooltip';
|
package/dist/index.js
CHANGED
|
@@ -1,21 +1,27 @@
|
|
|
1
1
|
import { cn } from "./lib/utils.js";
|
|
2
|
-
import tokens, { brand, dark, fontMono, fontSans, light, radius } from "./tokens.js";
|
|
2
|
+
import tokens, { brand, dark, fontMono, fontSans, light, radius, shadow } from "./tokens.js";
|
|
3
3
|
import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/accordion.js";
|
|
4
4
|
import { Alert, AlertDescription, AlertTitle, alertVariants } from "./components/alert.js";
|
|
5
|
+
import { AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar } from "./components/app-shell.js";
|
|
5
6
|
import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
|
|
6
7
|
import { Badge, badgeVariants } from "./components/badge.js";
|
|
7
8
|
import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/breadcrumb.js";
|
|
8
9
|
import { Button, buttonVariants } from "./components/button.js";
|
|
9
|
-
import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/card.js";
|
|
10
|
+
import { Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, cardVariants } from "./components/card.js";
|
|
10
11
|
import { Checkbox } from "./components/checkbox.js";
|
|
11
12
|
import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/collapsible.js";
|
|
12
13
|
import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/dialog.js";
|
|
13
14
|
import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/command.js";
|
|
14
15
|
import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, surfaceClasses } from "./components/popover.js";
|
|
15
16
|
import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/dropdown-menu.js";
|
|
17
|
+
import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "./components/empty-state.js";
|
|
18
|
+
import { Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel } from "./components/field.js";
|
|
19
|
+
import { IconButton } from "./components/icon-button.js";
|
|
16
20
|
import { Input, fieldClasses } from "./components/input.js";
|
|
17
21
|
import { Kbd, KbdGroup } from "./components/kbd.js";
|
|
18
22
|
import { Label } from "./components/label.js";
|
|
23
|
+
import { NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, navigationMenuTriggerStyle } from "./components/navigation-menu.js";
|
|
24
|
+
import { PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle } from "./components/page-header.js";
|
|
19
25
|
import { Progress } from "./components/progress.js";
|
|
20
26
|
import { RadioGroup, RadioGroupItem } from "./components/radio-group.js";
|
|
21
27
|
import { ScrollArea, ScrollBar } from "./components/scroll-area.js";
|
|
@@ -24,9 +30,13 @@ import { Separator } from "./components/separator.js";
|
|
|
24
30
|
import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/sheet.js";
|
|
25
31
|
import { Skeleton } from "./components/skeleton.js";
|
|
26
32
|
import { Spinner } from "./components/spinner.js";
|
|
33
|
+
import { StatCard } from "./components/stat-card.js";
|
|
34
|
+
import { Status, StatusDot, statusDotVariants } from "./components/status.js";
|
|
27
35
|
import { Switch } from "./components/switch.js";
|
|
28
36
|
import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/table.js";
|
|
29
37
|
import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs.js";
|
|
30
38
|
import { Textarea } from "./components/textarea.js";
|
|
39
|
+
import { Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, toastVariants } from "./components/toast.js";
|
|
40
|
+
import { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer } from "./components/toolbar.js";
|
|
31
41
|
import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
|
|
32
|
-
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, Input, Kbd, KbdGroup, Label, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Spinner, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, brand, buttonVariants, cn, dark, fieldClasses, fontMono, fontSans, light, radius, surfaceClasses, tokens };
|
|
42
|
+
export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, Checkbox, Collapsible, CollapsibleContent, CollapsibleTrigger, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger, EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle, Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel, IconButton, Input, Kbd, KbdGroup, Label, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger, Skeleton, Spinner, StatCard, Status, StatusDot, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, Toast, ToastAction, ToastClose, ToastDescription, ToastProvider, ToastTitle, ToastViewport, Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, brand, buttonVariants, cardVariants, cn, dark, fieldClasses, fontMono, fontSans, light, navigationMenuTriggerStyle, radius, shadow, statusDotVariants, surfaceClasses, toastVariants, tokens };
|
package/dist/mui/index.js
CHANGED
|
@@ -24,6 +24,10 @@ function burtsonThemeOptions(mode = "dark") {
|
|
|
24
24
|
main: p.brand,
|
|
25
25
|
contrastText: p["primary-foreground"]
|
|
26
26
|
},
|
|
27
|
+
info: {
|
|
28
|
+
main: p.info,
|
|
29
|
+
contrastText: p["info-foreground"]
|
|
30
|
+
},
|
|
27
31
|
error: {
|
|
28
32
|
main: p.destructive,
|
|
29
33
|
contrastText: p["destructive-foreground"]
|
|
@@ -38,7 +42,7 @@ function burtsonThemeOptions(mode = "dark") {
|
|
|
38
42
|
},
|
|
39
43
|
background: {
|
|
40
44
|
default: p.background,
|
|
41
|
-
paper: p.
|
|
45
|
+
paper: p.surface
|
|
42
46
|
},
|
|
43
47
|
text: {
|
|
44
48
|
primary: p.foreground,
|
|
@@ -46,11 +50,11 @@ function burtsonThemeOptions(mode = "dark") {
|
|
|
46
50
|
},
|
|
47
51
|
divider: p.border,
|
|
48
52
|
action: {
|
|
49
|
-
hover: p.
|
|
53
|
+
hover: p.muted,
|
|
50
54
|
selected: p["brand-soft"]
|
|
51
55
|
}
|
|
52
56
|
},
|
|
53
|
-
shape: { borderRadius: px(radius) },
|
|
57
|
+
shape: { borderRadius: px(radius.md) },
|
|
54
58
|
typography: {
|
|
55
59
|
fontFamily: fontSans,
|
|
56
60
|
button: {
|
|
@@ -65,8 +69,8 @@ function burtsonThemeOptions(mode = "dark") {
|
|
|
65
69
|
border: `1px solid ${p.border}`
|
|
66
70
|
} } },
|
|
67
71
|
MuiTooltip: { styleOverrides: { tooltip: {
|
|
68
|
-
backgroundColor: p.
|
|
69
|
-
color: p
|
|
72
|
+
backgroundColor: p.code,
|
|
73
|
+
color: p["code-foreground"],
|
|
70
74
|
fontSize: 12
|
|
71
75
|
} } },
|
|
72
76
|
MuiCssBaseline: { styleOverrides: { "code, kbd, pre": { fontFamily: fontMono } } }
|
package/dist/mui/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","names":[],"sources":["../../src/mui/index.ts"],"sourcesContent":["/**\n * The Burtson palette for MUI apps, so a screen built with MUI and one built\n * with Burtson UI components look like the same product.\n *\n * import { ThemeProvider } from '@mui/material/styles';\n * import { createBurtsonTheme } from '@burtson-labs/ui/mui';\n * <ThemeProvider theme={createBurtsonTheme('dark')}>…</ThemeProvider>\n */\nimport { createTheme, type Theme, type ThemeOptions } from '@mui/material/styles';\n\nimport { dark, fontMono, fontSans, light, type Palette, radius } from '../tokens';\n\nexport type BurtsonMode = 'light' | 'dark';\n\nconst px = (rem: string) => Math.round(parseFloat(rem) * 16);\n\n/** Theme options only, for apps that deep-merge their own overrides first. */\nexport function burtsonThemeOptions(mode: BurtsonMode = 'dark'): ThemeOptions {\n const p: Palette = mode === 'dark' ? dark : light;\n return {\n palette: {\n mode,\n primary: { main: p.primary, contrastText: p['primary-foreground'] },\n secondary: { main: p.brand, contrastText: p['primary-foreground'] },\n error: { main: p.destructive, contrastText: p['destructive-foreground'] },\n warning: { main: p.warning, contrastText: p['warning-foreground'] },\n success: { main: p.success, contrastText: p['success-foreground'] },\n background: { default: p.background, paper: p.
|
|
1
|
+
{"version":3,"file":"index.js","names":[],"sources":["../../src/mui/index.ts"],"sourcesContent":["/**\n * The Burtson palette for MUI apps, so a screen built with MUI and one built\n * with Burtson UI components look like the same product.\n *\n * import { ThemeProvider } from '@mui/material/styles';\n * import { createBurtsonTheme } from '@burtson-labs/ui/mui';\n * <ThemeProvider theme={createBurtsonTheme('dark')}>…</ThemeProvider>\n */\nimport { createTheme, type Theme, type ThemeOptions } from '@mui/material/styles';\n\nimport { dark, fontMono, fontSans, light, type Palette, radius } from '../tokens';\n\nexport type BurtsonMode = 'light' | 'dark';\n\nconst px = (rem: string) => Math.round(parseFloat(rem) * 16);\n\n/** Theme options only, for apps that deep-merge their own overrides first. */\nexport function burtsonThemeOptions(mode: BurtsonMode = 'dark'): ThemeOptions {\n const p: Palette = mode === 'dark' ? dark : light;\n return {\n palette: {\n mode,\n primary: { main: p.primary, contrastText: p['primary-foreground'] },\n secondary: { main: p.brand, contrastText: p['primary-foreground'] },\n info: { main: p.info, contrastText: p['info-foreground'] },\n error: { main: p.destructive, contrastText: p['destructive-foreground'] },\n warning: { main: p.warning, contrastText: p['warning-foreground'] },\n success: { main: p.success, contrastText: p['success-foreground'] },\n background: { default: p.background, paper: p.surface },\n text: { primary: p.foreground, secondary: p['muted-foreground'] },\n divider: p.border,\n action: { hover: p.muted, selected: p['brand-soft'] },\n },\n shape: { borderRadius: px(radius.md) },\n typography: {\n fontFamily: fontSans,\n button: { textTransform: 'none', fontWeight: 500 },\n },\n components: {\n MuiButton: { defaultProps: { disableElevation: true } },\n MuiPaper: {\n styleOverrides: { root: { backgroundImage: 'none', border: `1px solid ${p.border}` } },\n },\n MuiTooltip: {\n styleOverrides: {\n tooltip: { backgroundColor: p.code, color: p['code-foreground'], fontSize: 12 },\n },\n },\n MuiCssBaseline: {\n styleOverrides: { 'code, kbd, pre': { fontFamily: fontMono } },\n },\n },\n };\n}\n\nexport function createBurtsonTheme(\n mode: BurtsonMode = 'dark',\n ...overrides: ThemeOptions[]\n): Theme {\n return createTheme(burtsonThemeOptions(mode), ...overrides);\n}\n"],"mappings":";;;;;;;;;;;AAcA,IAAM,MAAM,QAAgB,KAAK,MAAM,WAAW,GAAG,IAAI,EAAE;;AAG3D,SAAgB,oBAAoB,OAAoB,QAAsB;CAC5E,MAAM,IAAa,SAAS,SAAS,OAAO;CAC5C,OAAO;EACL,SAAS;GACP;GACA,SAAS;IAAE,MAAM,EAAE;IAAS,cAAc,EAAE;GAAsB;GAClE,WAAW;IAAE,MAAM,EAAE;IAAO,cAAc,EAAE;GAAsB;GAClE,MAAM;IAAE,MAAM,EAAE;IAAM,cAAc,EAAE;GAAmB;GACzD,OAAO;IAAE,MAAM,EAAE;IAAa,cAAc,EAAE;GAA0B;GACxE,SAAS;IAAE,MAAM,EAAE;IAAS,cAAc,EAAE;GAAsB;GAClE,SAAS;IAAE,MAAM,EAAE;IAAS,cAAc,EAAE;GAAsB;GAClE,YAAY;IAAE,SAAS,EAAE;IAAY,OAAO,EAAE;GAAQ;GACtD,MAAM;IAAE,SAAS,EAAE;IAAY,WAAW,EAAE;GAAoB;GAChE,SAAS,EAAE;GACX,QAAQ;IAAE,OAAO,EAAE;IAAO,UAAU,EAAE;GAAc;EACtD;EACA,OAAO,EAAE,cAAc,GAAG,OAAO,EAAE,EAAE;EACrC,YAAY;GACV,YAAY;GACZ,QAAQ;IAAE,eAAe;IAAQ,YAAY;GAAI;EACnD;EACA,YAAY;GACV,WAAW,EAAE,cAAc,EAAE,kBAAkB,KAAK,EAAE;GACtD,UAAU,EACR,gBAAgB,EAAE,MAAM;IAAE,iBAAiB;IAAQ,QAAQ,aAAa,EAAE;GAAS,EAAE,EACvF;GACA,YAAY,EACV,gBAAgB,EACd,SAAS;IAAE,iBAAiB,EAAE;IAAM,OAAO,EAAE;IAAoB,UAAU;GAAG,EAChF,EACF;GACA,gBAAgB,EACd,gBAAgB,EAAE,kBAAkB,EAAE,YAAY,SAAS,EAAE,EAC/D;EACF;CACF;AACF;AAEA,SAAgB,mBACd,OAAoB,QACpB,GAAG,WACI;CACP,OAAO,YAAY,oBAAoB,IAAI,GAAG,GAAG,SAAS;AAC5D"}
|