@burtson-labs/ui 0.1.0 → 0.3.0

package/dist/components/table.js

@@ -2,13 +2,15 @@ import { cn } from "../lib/utils.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/table.tsx
-function Table({ className, ...props }) {
+function Table({ className, density = "default", stickyHeader = false, containerClassName, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "table-container",
-		className: "relative w-full overflow-x-auto",
+		"data-density": density,
+		"data-sticky": stickyHeader || void 0,
+		className: cn("group/table relative w-full overflow-auto", containerClassName),
 		children: /* @__PURE__ */ jsx("table", {
 			"data-slot": "table",
-			className: cn("w-full caption-bottom text-sm", className),
+			className: cn("w-full caption-bottom text-[13px]", className),
 			...props
 		})
 	});
@@ -16,7 +18,7 @@ function Table({ className, ...props }) {
 function TableHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("thead", {
 		"data-slot": "table-header",
-		className: cn("[&_tr]:border-b", className),
+		className: cn("bg-surface-muted [&_tr]:border-b group-data-[sticky]/table:sticky group-data-[sticky]/table:top-0 group-data-[sticky]/table:z-10", className),
 		...props
 	});
 }
@@ -30,35 +32,39 @@ function TableBody({ className, ...props }) {
 function TableFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("tfoot", {
 		"data-slot": "table-footer",
-		className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className),
+		className: cn("border-t bg-surface-muted font-medium [&>tr]:last:border-b-0", className),
 		...props
 	});
 }
-function TableRow({ className, ...props }) {
+/** Set `data-state="selected"` (or `selected`) to mark a chosen row. */
+function TableRow({ className, selected, ...props }) {
 	return /* @__PURE__ */ jsx("tr", {
 		"data-slot": "table-row",
-		className: cn("border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted", className),
+		"data-state": selected ? "selected" : void 0,
+		"aria-selected": selected || void 0,
+		className: cn("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)]", className),
 		...props
 	});
 }
-function TableHead({ className, ...props }) {
+/** `numeric` right-aligns with tabular figures, for counts, money and durations. */
+function TableHead({ className, numeric, ...props }) {
 	return /* @__PURE__ */ jsx("th", {
 		"data-slot": "table-head",
-		className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0", className),
+		className: cn("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", numeric && "text-right tabular-nums", className),
 		...props
 	});
 }
-function TableCell({ className, ...props }) {
+function TableCell({ className, numeric, ...props }) {
 	return /* @__PURE__ */ jsx("td", {
 		"data-slot": "table-cell",
-		className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className),
+		className: cn("h-10 px-3 align-middle whitespace-nowrap group-data-[density=compact]/table:h-8 [&:has([role=checkbox])]:pr-0", numeric && "text-right font-mono text-[12.5px] tabular-nums", className),
 		...props
 	});
 }
 function TableCaption({ className, ...props }) {
 	return /* @__PURE__ */ jsx("caption", {
 		"data-slot": "table-caption",
-		className: cn("mt-4 text-sm text-muted-foreground", className),
+		className: cn("mt-3 text-xs text-muted-foreground", className),
 		...props
 	});
 }

package/dist/components/table.js.map

@@ -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\nfunction Table({ className, ...props }: React.ComponentProps<'table'>) {\n  return (\n    <div data-slot=\"table-container\" className=\"relative w-full overflow-x-auto\">\n      <table\n        data-slot=\"table\"\n        className={cn('w-full caption-bottom text-sm', className)}\n        {...props}\n      />\n    </div>\n  );\n}\n\nfunction TableHeader({ className, ...props }: React.ComponentProps<'thead'>) {\n  return <thead data-slot=\"table-header\" className={cn('[&_tr]:border-b', className)} {...props} />;\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-muted/50 font-medium [&>tr]:last:border-b-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction TableRow({ className, ...props }: React.ComponentProps<'tr'>) {\n  return (\n    <tr\n      data-slot=\"table-row\"\n      className={cn(\n        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableHead({ className, ...props }: React.ComponentProps<'th'>) {\n  return (\n    <th\n      data-slot=\"table-head\"\n      className={cn(\n        'h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-muted-foreground [&:has([role=checkbox])]:pr-0',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction TableCell({ className, ...props }: React.ComponentProps<'td'>) {\n  return (\n    <td\n      data-slot=\"table-cell\"\n      className={cn('p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0', className)}\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-4 text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow };\n"],"mappings":";;;;AAIA,SAAS,MAAM,EAAE,WAAW,GAAG,SAAwC;CACrE,OACE,oBAAC,OAAD;EAAK,aAAU;EAAkB,WAAU;EACzC,UAAA,oBAAC,SAAD;GACE,aAAU;GACV,WAAW,GAAG,iCAAiC,SAAS;GACxD,GAAI;EACL,CAAA;CACE,CAAA;AAET;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAwC;CAC3E,OAAO,oBAAC,SAAD;EAAO,aAAU;EAAe,WAAW,GAAG,mBAAmB,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClG;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,2DAA2D,SAAS;EAClF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAqC;CACrE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,+EACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAqC;CACtE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GACT,sHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAqC;CACtE,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,oEAAoE,SAAS;EAC3F,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"}
+{"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

@@ -6,28 +6,28 @@ import { jsx } from "react/jsx-runtime";
 function Tabs$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.Root, {
 		"data-slot": "tabs",
-		className: cn("flex flex-col gap-2", className),
+		className: cn("flex flex-col gap-3", className),
 		...props
 	});
 }
 function TabsList({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.List, {
 		"data-slot": "tabs-list",
-		className: cn("inline-flex h-9 w-fit items-center justify-center rounded-lg bg-muted p-[3px] text-muted-foreground", className),
+		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),
 		...props
 	});
 }
 function TabsTrigger({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.Trigger, {
 		"data-slot": "tabs-trigger",
-		className: cn("inline-flex h-full flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 py-1 text-sm font-medium whitespace-nowrap text-muted-foreground transition-[color,box-shadow] outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", className),
+		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),
 		...props
 	});
 }
 function TabsContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Tabs.Content, {
 		"data-slot": "tabs-content",
-		className: cn("flex-1 outline-none", className),
+		className: cn("min-w-0 flex-1 outline-none", className),
 		...props
 	});
 }

package/dist/components/tabs.js.map

@@ -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-2', 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 justify-center rounded-lg bg-muted p-[3px] 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-full flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2.5 py-1 text-sm font-medium whitespace-nowrap text-muted-foreground transition-[color,box-shadow] outline-none hover:text-foreground focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\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('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,uGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,KAAc,SAAf;EACE,aAAU;EACV,WAAW,GACT,qlBACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,KAAc,SAAf;EACE,aAAU;EACV,WAAW,GAAG,uBAAuB,SAAS;EAC9C,GAAI;CACL,CAAA;AAEL"}
+{"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"}

package/dist/components/textarea.js

@@ -6,7 +6,7 @@ import { jsx } from "react/jsx-runtime";
 function Textarea({ className, ...props }) {
 	return /* @__PURE__ */ jsx("textarea", {
 		"data-slot": "textarea",
-		className: cn(fieldClasses, "field-sizing-content min-h-16 py-2", className),
+		className: cn(fieldClasses, "min-h-24 resize-y py-2.5 leading-5", className),
 		...props
 	});
 }

package/dist/components/textarea.js.map

@@ -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, 'field-sizing-content min-h-16 py-2', 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"}
+{"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"}

package/dist/components/toolbar.d.ts

@@ -0,0 +1,6 @@
+import * as React from 'react';
+declare function Toolbar({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ToolbarGroup({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ToolbarSeparator({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function ToolbarSpacer({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer };

package/dist/components/toolbar.js

@@ -0,0 +1,39 @@
+import { cn } from "../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/toolbar.tsx
+function Toolbar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toolbar",
+		role: "toolbar",
+		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),
+		...props
+	});
+}
+function ToolbarGroup({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toolbar-group",
+		className: cn("flex items-center gap-1", className),
+		...props
+	});
+}
+function ToolbarSeparator({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toolbar-separator",
+		"aria-hidden": "true",
+		className: cn("mx-1 h-5 w-px bg-border", className),
+		...props
+	});
+}
+function ToolbarSpacer({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "toolbar-spacer",
+		"aria-hidden": "true",
+		className: cn("min-w-2 flex-1", className),
+		...props
+	});
+}
+//#endregion
+export { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer };
+
+//# sourceMappingURL=toolbar.js.map

package/dist/components/toolbar.js.map

@@ -0,0 +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"}

package/dist/components/tooltip.js

@@ -27,9 +27,9 @@ function TooltipContent({ className, sideOffset = 6, children, ...props }) {
 	return /* @__PURE__ */ jsx(Tooltip.Portal, { children: /* @__PURE__ */ jsxs(Tooltip.Content, {
 		"data-slot": "tooltip-content",
 		sideOffset,
-		className: cn("z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) animate-in rounded-md bg-foreground px-2.5 py-1.5 text-xs text-balance text-background data-[state=closed]:animate-out", className),
+		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),
 		...props,
-		children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "fill-foreground" })]
+		children: [children, /* @__PURE__ */ jsx(Tooltip.Arrow, { className: "fill-code" })]
 	}) });
 }
 //#endregion

package/dist/components/tooltip.js.map

@@ -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-md bg-foreground px-2.5 py-1.5 text-xs text-balance text-background data-[state=closed]:animate-out',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <TooltipPrimitive.Arrow className=\"fill-foreground\" />\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,gMACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,UACD,oBAACA,QAAiB,OAAlB,EAAwB,WAAU,kBAAmB,CAAA,CAC7B;CACH,CAAA,EAAA,CAAA;AAE7B"}
+{"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

@@ -2,16 +2,24 @@ export { cn } from './lib/utils';
 export * from './tokens';
 export * from './components/accordion';
 export * from './components/alert';
+export * from './components/app-shell';
 export * from './components/avatar';
 export * from './components/badge';
+export * from './components/breadcrumb';
 export * from './components/button';
 export * from './components/card';
 export * from './components/checkbox';
+export * from './components/collapsible';
+export * from './components/command';
 export * from './components/dialog';
 export * from './components/dropdown-menu';
+export * from './components/empty-state';
+export * from './components/field';
+export * from './components/icon-button';
 export * from './components/input';
 export * from './components/kbd';
 export * from './components/label';
+export * from './components/page-header';
 export * from './components/popover';
 export * from './components/progress';
 export * from './components/radio-group';
@@ -21,8 +29,11 @@ export * from './components/separator';
 export * from './components/sheet';
 export * from './components/skeleton';
 export * from './components/spinner';
+export * from './components/stat-card';
+export * from './components/status';
 export * from './components/switch';
 export * from './components/table';
 export * from './components/tabs';
 export * from './components/textarea';
+export * from './components/toolbar';
 export * from './components/tooltip';

package/dist/index.js

@@ -1,18 +1,26 @@
 import { cn } from "./lib/utils.js";
-import tokens, { brand, dark, fontMono, fontSans, light, radius } from "./tokens.js";
+import tokens, { brand, dark, fontMono, fontSans, light, radius, shadow } from "./tokens.js";
 import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./components/accordion.js";
 import { Alert, AlertDescription, AlertTitle, alertVariants } from "./components/alert.js";
+import { AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar } from "./components/app-shell.js";
 import { Avatar, AvatarFallback, AvatarImage } from "./components/avatar.js";
 import { Badge, badgeVariants } from "./components/badge.js";
+import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./components/breadcrumb.js";
 import { Button, buttonVariants } from "./components/button.js";
-import { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "./components/card.js";
+import { Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, cardVariants } from "./components/card.js";
 import { Checkbox } from "./components/checkbox.js";
+import { Collapsible, CollapsibleContent, CollapsibleTrigger } from "./components/collapsible.js";
 import { Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger } from "./components/dialog.js";
+import { Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut } from "./components/command.js";
 import { Popover, PopoverAnchor, PopoverContent, PopoverTrigger, surfaceClasses } from "./components/popover.js";
 import { DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuSubContent, DropdownMenuSubTrigger, DropdownMenuTrigger } from "./components/dropdown-menu.js";
+import { EmptyState, EmptyStateActions, EmptyStateDescription, EmptyStateIcon, EmptyStateTitle } from "./components/empty-state.js";
+import { Field, FieldDescription, FieldError, FieldHeader, FieldHint, FieldLabel } from "./components/field.js";
+import { IconButton } from "./components/icon-button.js";
 import { Input, fieldClasses } from "./components/input.js";
 import { Kbd, KbdGroup } from "./components/kbd.js";
 import { Label } from "./components/label.js";
+import { PageHeader, PageHeaderActions, PageHeaderDescription, PageHeaderEyebrow, PageHeaderMain, PageHeaderTitle } from "./components/page-header.js";
 import { Progress } from "./components/progress.js";
 import { RadioGroup, RadioGroupItem } from "./components/radio-group.js";
 import { ScrollArea, ScrollBar } from "./components/scroll-area.js";
@@ -21,9 +29,12 @@ import { Separator } from "./components/separator.js";
 import { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger } from "./components/sheet.js";
 import { Skeleton } from "./components/skeleton.js";
 import { Spinner } from "./components/spinner.js";
+import { StatCard } from "./components/stat-card.js";
+import { Status, StatusDot, statusDotVariants } from "./components/status.js";
 import { Switch } from "./components/switch.js";
 import { Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow } from "./components/table.js";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "./components/tabs.js";
 import { Textarea } from "./components/textarea.js";
+import { Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer } from "./components/toolbar.js";
 import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from "./components/tooltip.js";
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertTitle, Avatar, AvatarFallback, AvatarImage, Badge, Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, 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 };
+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, 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, Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarSpacer, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, brand, buttonVariants, cardVariants, cn, dark, fieldClasses, fontMono, fontSans, light, radius, shadow, statusDotVariants, surfaceClasses, tokens };

package/dist/mui/index.js

@@ -24,6 +24,10 @@ function burtsonThemeOptions(mode = "dark") {
 				main: p.brand,
 				contrastText: p["primary-foreground"]
 			},
+			info: {
+				main: p.info,
+				contrastText: p["info-foreground"]
+			},
 			error: {
 				main: p.destructive,
 				contrastText: p["destructive-foreground"]
@@ -38,7 +42,7 @@ function burtsonThemeOptions(mode = "dark") {
 			},
 			background: {
 				default: p.background,
-				paper: p.card
+				paper: p.surface
 			},
 			text: {
 				primary: p.foreground,
@@ -46,11 +50,11 @@ function burtsonThemeOptions(mode = "dark") {
 			},
 			divider: p.border,
 			action: {
-				hover: p.accent,
+				hover: p.muted,
 				selected: p["brand-soft"]
 			}
 		},
-		shape: { borderRadius: px(radius) },
+		shape: { borderRadius: px(radius.md) },
 		typography: {
 			fontFamily: fontSans,
 			button: {
@@ -65,8 +69,8 @@ function burtsonThemeOptions(mode = "dark") {
 				border: `1px solid ${p.border}`
 			} } },
 			MuiTooltip: { styleOverrides: { tooltip: {
-				backgroundColor: p.foreground,
-				color: p.background,
+				backgroundColor: p.code,
+				color: p["code-foreground"],
 				fontSize: 12
 			} } },
 			MuiCssBaseline: { styleOverrides: { "code, kbd, pre": { fontFamily: fontMono } } }

package/dist/mui/index.js.map

@@ -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.card },\n      text: { primary: p.foreground, secondary: p['muted-foreground'] },\n      divider: p.border,\n      action: { hover: p.accent, selected: p['brand-soft'] },\n    },\n    shape: { borderRadius: px(radius) },\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.foreground, color: p.background, 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,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;GAAK;GACnD,MAAM;IAAE,SAAS,EAAE;IAAY,WAAW,EAAE;GAAoB;GAChE,SAAS,EAAE;GACX,QAAQ;IAAE,OAAO,EAAE;IAAQ,UAAU,EAAE;GAAc;EACvD;EACA,OAAO,EAAE,cAAc,GAAG,MAAM,EAAE;EAClC,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;IAAY,OAAO,EAAE;IAAY,UAAU;GAAG,EAC9E,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"}
+{"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"}