@burtson-labs/ui 0.2.0 → 0.4.0

package/README.md

@@ -9,7 +9,7 @@
 
 **The component system behind every Burtson Labs app.**
 
-Accessible React components on Radix and Tailwind CSS, with [Burtson Icons](https://icons.burtson.ai) built in. Install the package, or copy the source into your app and make it yours.
+A quiet, precise, dark-first component system for agents, IDEs and ops tools, with [Burtson Icons](https://icons.burtson.ai) built in. Accessible (Radix primitives underneath, unstyled), themed with Tailwind, no runtime provider. Install the package, or copy the source into your app and make it yours.
 
 [![Docs](https://img.shields.io/badge/docs-ui.burtson.ai-a60ee5)](https://ui.burtson.ai)
 [![npm](https://img.shields.io/npm/v/@burtson-labs/ui?logo=npm)](https://www.npmjs.com/package/@burtson-labs/ui)
@@ -50,7 +50,7 @@ export const Save = () => <Button>Save</Button>;
 
 ### Or copy the source
 
-Every component is also a [shadcn](https://ui.shadcn.com) registry item. The CLI copies the file into `components/ui`, installs its dependencies and adds the Burtson theme:
+Every component is also a registry item in the [shadcn](https://ui.shadcn.com) registry format. The CLI copies the file into `components/ui`, installs its dependencies and adds the Burtson theme:
 
 ```bash
 npx shadcn@latest add https://ui.burtson.ai/r/button.json
@@ -58,7 +58,7 @@ npx shadcn@latest add https://ui.burtson.ai/r/button.json
 
 ## <picture><source media="(prefers-color-scheme: dark)" srcset="https://icons.burtson.ai/svg-white/panel-grid.svg"/><img src="https://icons.burtson.ai/svg-black/panel-grid.svg" align="center" alt=""/></picture> Components
 
-Accordion · Alert · Avatar · Badge · Breadcrumb · Button · Card · Checkbox · Collapsible · Command · Dialog · Dropdown Menu · Input · Kbd · Label · Popover · Progress · Radio Group · Scroll Area · Select · Separator · Sheet · Skeleton · Spinner · Switch · Table · Tabs · Textarea · Tooltip
+Accordion · Alert · App Shell · Avatar · Badge · Breadcrumb · Button · Card · Checkbox · Collapsible · Command · Dialog · Dropdown Menu · Empty State · Field · Icon Button · Input · Kbd · Label · Navigation Menu · Page Header · Popover · Progress · Radio Group · Scroll Area · Select · Separator · Sheet · Skeleton · Spinner · Stat Card · Status · Switch · Table · Tabs · Textarea · Toast · Toolbar · Tooltip
 
 Live previews and code for each one are at [ui.burtson.ai](https://ui.burtson.ai/docs/components/button).
 

package/dist/components/accordion.js

@@ -22,7 +22,7 @@ function AccordionTrigger({ className, children, ...props }) {
 		className: "flex",
 		children: /* @__PURE__ */ jsxs(Accordion.Trigger, {
 			"data-slot": "accordion-trigger",
-			className: cn("flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", className),
+			className: cn("flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-semibold transition-all outline-none hover:text-brand focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", className),
 			...props,
 			children: [children, /* @__PURE__ */ jsx(ChevronDown, {
 				className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200",

package/dist/components/accordion.js.map

@@ -1 +1 @@
-{"version":3,"file":"accordion.js","names":["Accordion","AccordionPrimitive"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport { Accordion as AccordionPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Accordion(props: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn('border-b last:border-b-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          'flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDown\n          className=\"pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200\"\n          aria-hidden\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n      {...props}\n    >\n      <div className={cn('pt-0 pb-4', className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\n"],"mappings":";;;;;;AAMA,SAASA,YAAU,OAA6D;CAC9E,OAAO,oBAACC,UAAmB,MAApB;EAAyB,aAAU;EAAY,GAAI;CAAQ,CAAA;AACpE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,UAAmB,MAApB;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;CAC1D,OACE,oBAACA,UAAmB,QAApB;EAA2B,WAAU;EACnC,UAAA,qBAACA,UAAmB,SAApB;GACE,aAAU;GACV,WAAW,GACT,oRACA,SACF;GACA,GAAI;GANN,UAAA,CAQG,UACD,oBAAC,aAAD;IACE,WAAU;IACV,eAAA;GACD,CAAA,CACyB;;CACH,CAAA;AAE/B;AAEA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;CAC1D,OACE,oBAACA,UAAmB,SAApB;EACE,aAAU;EACV,WAAU;EACV,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,aAAa,SAAS;GAAI;EAAc,CAAA;CACjC,CAAA;AAEhC"}
+{"version":3,"file":"accordion.js","names":["Accordion","AccordionPrimitive"],"sources":["../../src/components/accordion.tsx"],"sourcesContent":["import ChevronDown from '@burtson-labs/icons/react/chevron-down';\nimport { Accordion as AccordionPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Accordion(props: React.ComponentProps<typeof AccordionPrimitive.Root>) {\n  return <AccordionPrimitive.Root data-slot=\"accordion\" {...props} />;\n}\n\nfunction AccordionItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Item>) {\n  return (\n    <AccordionPrimitive.Item\n      data-slot=\"accordion-item\"\n      className={cn('border-b last:border-b-0', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AccordionTrigger({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {\n  return (\n    <AccordionPrimitive.Header className=\"flex\">\n      <AccordionPrimitive.Trigger\n        data-slot=\"accordion-trigger\"\n        className={cn(\n          'flex flex-1 items-start justify-between gap-4 rounded-md py-4 text-left text-sm font-semibold transition-all outline-none hover:text-brand focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        <ChevronDown\n          className=\"pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200\"\n          aria-hidden\n        />\n      </AccordionPrimitive.Trigger>\n    </AccordionPrimitive.Header>\n  );\n}\n\nfunction AccordionContent({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof AccordionPrimitive.Content>) {\n  return (\n    <AccordionPrimitive.Content\n      data-slot=\"accordion-content\"\n      className=\"overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down\"\n      {...props}\n    >\n      <div className={cn('pt-0 pb-4', className)}>{children}</div>\n    </AccordionPrimitive.Content>\n  );\n}\n\nexport { Accordion, AccordionContent, AccordionItem, AccordionTrigger };\n"],"mappings":";;;;;;AAMA,SAASA,YAAU,OAA6D;CAC9E,OAAO,oBAACC,UAAmB,MAApB;EAAyB,aAAU;EAAY,GAAI;CAAQ,CAAA;AACpE;AAEA,SAAS,cAAc,EACrB,WACA,GAAG,SACoD;CACvD,OACE,oBAACA,UAAmB,MAApB;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;CAC1D,OACE,oBAACA,UAAmB,QAApB;EAA2B,WAAU;EACnC,UAAA,qBAACA,UAAmB,SAApB;GACE,aAAU;GACV,WAAW,GACT,uRACA,SACF;GACA,GAAI;GANN,UAAA,CAQG,UACD,oBAAC,aAAD;IACE,WAAU;IACV,eAAA;GACD,CAAA,CACyB;;CACH,CAAA;AAE/B;AAEA,SAAS,iBAAiB,EACxB,WACA,UACA,GAAG,SACuD;CAC1D,OACE,oBAACA,UAAmB,SAApB;EACE,aAAU;EACV,WAAU;EACV,GAAI;EAEJ,UAAA,oBAAC,OAAD;GAAK,WAAW,GAAG,aAAa,SAAS;GAAI;EAAc,CAAA;CACjC,CAAA;AAEhC"}

package/dist/components/alert.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const alertVariants: (props?: ({
-    variant?: "destructive" | "success" | "warning" | "brand" | "default" | null | undefined;
+    variant?: "destructive" | "success" | "warning" | "info" | "brand" | "default" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Alert({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>): React.JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;

package/dist/components/alert.js

@@ -3,13 +3,14 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/alert.tsx
-var alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current", {
+var alertVariants = cva("relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-lg border px-4 py-3.5 text-sm shadow-xs [&>svg]:mt-0.5 [&>svg]:size-4", {
 	variants: { variant: {
-		default: "bg-card text-card-foreground",
-		brand: "border-brand/40 bg-brand-soft text-foreground [&>svg]:text-brand",
-		success: "border-success/40 bg-success/10 text-foreground [&>svg]:text-success",
-		warning: "border-warning/40 bg-warning/10 text-foreground [&>svg]:text-warning",
-		destructive: "border-destructive/40 bg-destructive/10 text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90"
+		default: "border-border bg-surface text-foreground [&>svg]:text-muted-foreground",
+		brand: "border-brand/25 bg-brand-soft/70 text-foreground [&>svg]:text-brand",
+		success: "border-success/25 bg-success/10 text-foreground [&>svg]:text-success",
+		warning: "border-warning/25 bg-warning/10 text-foreground [&>svg]:text-warning",
+		destructive: "border-destructive/25 bg-destructive/10 text-foreground [&>svg]:text-destructive",
+		info: "border-info/25 bg-info/10 text-foreground [&>svg]:text-info"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -24,14 +25,14 @@ function Alert({ className, variant, ...props }) {
 function AlertTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-title",
-		className: cn("col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight", className),
+		className: cn("font-semibold tracking-[-0.01em]", className),
 		...props
 	});
 }
 function AlertDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "alert-description",
-		className: cn("col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed", className),
+		className: cn("col-start-2 text-[13px] leading-5 text-muted-foreground", className),
 		...props
 	});
 }

package/dist/components/alert.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert.js","names":[],"sources":["../../src/components/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst alertVariants = cva(\n  'relative grid w-full grid-cols-[0_1fr] items-start gap-y-0.5 rounded-lg border px-4 py-3 text-sm has-[>svg]:grid-cols-[calc(var(--spacing)*4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5 [&>svg]:text-current',\n  {\n    variants: {\n      variant: {\n        default: 'bg-card text-card-foreground',\n        brand: 'border-brand/40 bg-brand-soft text-foreground [&>svg]:text-brand',\n        success: 'border-success/40 bg-success/10 text-foreground [&>svg]:text-success',\n        warning: 'border-warning/40 bg-warning/10 text-foreground [&>svg]:text-warning',\n        destructive:\n          'border-destructive/40 bg-destructive/10 text-destructive [&>svg]:text-current *:data-[slot=alert-description]:text-destructive/90',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn('col-start-2 line-clamp-1 min-h-4 font-medium tracking-tight', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn(\n        'col-start-2 grid justify-items-start gap-1 text-sm text-muted-foreground [&_p]:leading-relaxed',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants };\n"],"mappings":";;;;;AAKA,IAAM,gBAAgB,IACpB,qOACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,OAAO;EACP,SAAS;EACT,SAAS;EACT,aACE;CACJ,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAEA,SAAS,MAAM,EACb,WACA,SACA,GAAG,SACgE;CACnE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,+DAA+D,SAAS;EACtF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAsC;CAC9E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,kGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"alert.js","names":[],"sources":["../../src/components/alert.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst alertVariants = cva(\n  'relative grid w-full grid-cols-[auto_1fr] gap-x-3 gap-y-0.5 rounded-lg border px-4 py-3.5 text-sm shadow-xs [&>svg]:mt-0.5 [&>svg]:size-4',\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-surface text-foreground [&>svg]:text-muted-foreground',\n        brand: 'border-brand/25 bg-brand-soft/70 text-foreground [&>svg]:text-brand',\n        success: 'border-success/25 bg-success/10 text-foreground [&>svg]:text-success',\n        warning: 'border-warning/25 bg-warning/10 text-foreground [&>svg]:text-warning',\n        destructive:\n          'border-destructive/25 bg-destructive/10 text-foreground [&>svg]:text-destructive',\n        info: 'border-info/25 bg-info/10 text-foreground [&>svg]:text-info',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nfunction Alert({\n  className,\n  variant,\n  ...props\n}: React.ComponentProps<'div'> & VariantProps<typeof alertVariants>) {\n  return (\n    <div\n      data-slot=\"alert\"\n      role=\"alert\"\n      className={cn(alertVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-title\"\n      className={cn('font-semibold tracking-[-0.01em]', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AlertDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"alert-description\"\n      className={cn('col-start-2 text-[13px] leading-5 text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Alert, AlertDescription, AlertTitle, alertVariants };\n"],"mappings":";;;;;AAKA,IAAM,gBAAgB,IACpB,6IACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,OAAO;EACP,SAAS;EACT,SAAS;EACT,aACE;EACF,MAAM;CACR,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAEA,SAAS,MAAM,EACb,WACA,SACA,GAAG,SACgE;CACnE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,MAAK;EACL,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,oCAAoC,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EAAE,WAAW,GAAG,SAAsC;CAC9E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2DAA2D,SAAS;EAClF,GAAI;CACL,CAAA;AAEL"}

package/dist/components/app-shell.d.ts

@@ -0,0 +1,8 @@
+import * as React from 'react';
+declare function AppShell({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AppShellHeader({ className, ...props }: React.ComponentProps<'header'>): React.JSX.Element;
+declare function AppShellBody({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function AppShellSidebar({ className, ...props }: React.ComponentProps<'aside'>): React.JSX.Element;
+declare function AppShellMain({ className, ...props }: React.ComponentProps<'main'>): React.JSX.Element;
+declare function AppShellContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+export { AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar };

package/dist/components/app-shell.js

@@ -0,0 +1,50 @@
+import { cn } from "../lib/utils.js";
+import "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/app-shell.tsx
+function AppShell({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "app-shell",
+		className: cn("grid min-h-dvh grid-rows-[auto_1fr] bg-background text-foreground", className),
+		...props
+	});
+}
+function AppShellHeader({ className, ...props }) {
+	return /* @__PURE__ */ jsx("header", {
+		"data-slot": "app-shell-header",
+		className: cn("sticky top-0 z-40 flex h-12 items-center border-b border-border bg-background/90 px-3 backdrop-blur-xl sm:px-4", className),
+		...props
+	});
+}
+function AppShellBody({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "app-shell-body",
+		className: cn("grid min-h-0 grid-cols-1", className),
+		...props
+	});
+}
+function AppShellSidebar({ className, ...props }) {
+	return /* @__PURE__ */ jsx("aside", {
+		"data-slot": "app-shell-sidebar",
+		className: cn("min-h-0 border-r border-border bg-surface-muted/55", className),
+		...props
+	});
+}
+function AppShellMain({ className, ...props }) {
+	return /* @__PURE__ */ jsx("main", {
+		"data-slot": "app-shell-main",
+		className: cn("min-w-0 bg-background", className),
+		...props
+	});
+}
+function AppShellContent({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "app-shell-content",
+		className: cn("mx-auto w-full max-w-[1600px] p-4 sm:p-6", className),
+		...props
+	});
+}
+//#endregion
+export { AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar };
+
+//# sourceMappingURL=app-shell.js.map

package/dist/components/app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"app-shell.js","names":[],"sources":["../../src/components/app-shell.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction AppShell({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"app-shell\"\n      className={cn('grid min-h-dvh grid-rows-[auto_1fr] bg-background text-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AppShellHeader({ className, ...props }: React.ComponentProps<'header'>) {\n  return (\n    <header\n      data-slot=\"app-shell-header\"\n      className={cn(\n        'sticky top-0 z-40 flex h-12 items-center border-b border-border bg-background/90 px-3 backdrop-blur-xl sm:px-4',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AppShellBody({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"app-shell-body\"\n      className={cn('grid min-h-0 grid-cols-1', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AppShellSidebar({ className, ...props }: React.ComponentProps<'aside'>) {\n  return (\n    <aside\n      data-slot=\"app-shell-sidebar\"\n      className={cn('min-h-0 border-r border-border bg-surface-muted/55', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AppShellMain({ className, ...props }: React.ComponentProps<'main'>) {\n  return (\n    <main\n      data-slot=\"app-shell-main\"\n      className={cn('min-w-0 bg-background', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AppShellContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"app-shell-content\"\n      className={cn('mx-auto w-full max-w-[1600px] p-4 sm:p-6', className)}\n      {...props}\n    />\n  );\n}\n\nexport { AppShell, AppShellBody, AppShellContent, AppShellHeader, AppShellMain, AppShellSidebar };\n"],"mappings":";;;;AAIA,SAAS,SAAS,EAAE,WAAW,GAAG,SAAsC;CACtE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qEAAqE,SAAS;EAC5F,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EAAE,WAAW,GAAG,SAAyC;CAC/E,OACE,oBAAC,UAAD;EACE,aAAU;EACV,WAAW,GACT,kHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAsC;CAC1E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4BAA4B,SAAS;EACnD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAwC;CAC/E,OACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GAAG,sDAAsD,SAAS;EAC7E,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,aAAa,EAAE,WAAW,GAAG,SAAuC;CAC3E,OACE,oBAAC,QAAD;EACE,aAAU;EACV,WAAW,GAAG,yBAAyB,SAAS;EAChD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,4CAA4C,SAAS;EACnE,GAAI;CACL,CAAA;AAEL"}

package/dist/components/avatar.js

@@ -20,7 +20,7 @@ function AvatarImage({ className, ...props }) {
 function AvatarFallback({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Avatar.Fallback, {
 		"data-slot": "avatar-fallback",
-		className: cn("flex size-full items-center justify-center rounded-full bg-brand-soft text-xs font-medium text-accent-foreground", className),
+		className: cn("flex size-full items-center justify-center rounded-full border border-brand/15 bg-brand-soft text-xs font-semibold text-brand-soft-foreground", className),
 		...props
 	});
 }

package/dist/components/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":["Avatar","AvatarPrimitive"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import { Avatar as AvatarPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full object-cover', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center rounded-full bg-brand-soft text-xs font-medium text-accent-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"],"mappings":";;;;;AAKA,SAASA,SAAO,EAAE,WAAW,GAAG,SAA4D;CAC1F,OACE,oBAACC,OAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,oHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"avatar.js","names":["Avatar","AvatarPrimitive"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import { Avatar as AvatarPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Avatar({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root>) {\n  return (\n    <AvatarPrimitive.Root\n      data-slot=\"avatar\"\n      className={cn('relative flex size-8 shrink-0 overflow-hidden rounded-full', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarImage({ className, ...props }: React.ComponentProps<typeof AvatarPrimitive.Image>) {\n  return (\n    <AvatarPrimitive.Image\n      data-slot=\"avatar-image\"\n      className={cn('aspect-square size-full object-cover', className)}\n      {...props}\n    />\n  );\n}\n\nfunction AvatarFallback({\n  className,\n  ...props\n}: React.ComponentProps<typeof AvatarPrimitive.Fallback>) {\n  return (\n    <AvatarPrimitive.Fallback\n      data-slot=\"avatar-fallback\"\n      className={cn(\n        'flex size-full items-center justify-center rounded-full border border-brand/15 bg-brand-soft text-xs font-semibold text-brand-soft-foreground',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport { Avatar, AvatarFallback, AvatarImage };\n"],"mappings":";;;;;AAKA,SAASA,SAAO,EAAE,WAAW,GAAG,SAA4D;CAC1F,OACE,oBAACC,OAAgB,MAAjB;EACE,aAAU;EACV,WAAW,GAAG,8DAA8D,SAAS;EACrF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAA6D;CAChG,OACE,oBAACA,OAAgB,OAAjB;EACE,aAAU;EACV,WAAW,GAAG,wCAAwC,SAAS;EAC/D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,eAAe,EACtB,WACA,GAAG,SACqD;CACxD,OACE,oBAACA,OAAgB,UAAjB;EACE,aAAU;EACV,WAAW,GACT,iJACA,SACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/dist/components/badge.d.ts

@@ -1,7 +1,7 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const badgeVariants: (props?: ({
-    variant?: "secondary" | "destructive" | "success" | "warning" | "brand" | "default" | "outline" | null | undefined;
+    variant?: "secondary" | "destructive" | "success" | "warning" | "info" | "brand" | "default" | "outline" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {
     asChild?: boolean;

package/dist/components/badge.js

@@ -4,15 +4,16 @@ import "react";
 import { jsx } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/badge.tsx
-var badgeVariants = cva("inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:size-3", {
+var badgeVariants = cva("inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold leading-4 whitespace-nowrap outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/20 [&>svg]:size-3", {
 	variants: { variant: {
-		default: "border-transparent bg-primary text-primary-foreground",
-		secondary: "border-transparent bg-secondary text-secondary-foreground",
-		brand: "border-brand/40 bg-brand-soft text-accent-foreground",
-		success: "border-transparent bg-success/15 text-success",
-		warning: "border-transparent bg-warning/15 text-warning",
-		destructive: "border-transparent bg-destructive/15 text-destructive",
-		outline: "text-foreground"
+		default: "border-border bg-surface-muted text-foreground",
+		secondary: "border-border bg-surface-muted text-foreground",
+		brand: "border-brand/20 bg-brand-soft text-brand-soft-foreground",
+		success: "border-success/20 bg-success/10 text-success",
+		warning: "border-warning/20 bg-warning/10 text-warning",
+		destructive: "border-destructive/20 bg-destructive/10 text-destructive",
+		info: "border-info/20 bg-info/10 text-info",
+		outline: "border-border-strong bg-transparent text-muted-foreground"
 	} },
 	defaultVariants: { variant: "default" }
 });

package/dist/components/badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst badgeVariants = cva(\n  'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden rounded-full border px-2 py-0.5 text-xs font-medium whitespace-nowrap transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/50 [&>svg]:pointer-events-none [&>svg]:size-3',\n  {\n    variants: {\n      variant: {\n        default: 'border-transparent bg-primary text-primary-foreground',\n        secondary: 'border-transparent bg-secondary text-secondary-foreground',\n        brand: 'border-brand/40 bg-brand-soft text-accent-foreground',\n        success: 'border-transparent bg-success/15 text-success',\n        warning: 'border-transparent bg-warning/15 text-warning',\n        destructive: 'border-transparent bg-destructive/15 text-destructive',\n        outline: 'text-foreground',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nexport interface BadgeProps\n  extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {\n  asChild?: boolean;\n}\n\nfunction Badge({ className, variant, asChild = false, ...props }: BadgeProps) {\n  const Comp = asChild ? Slot.Root : 'span';\n  return (\n    <Comp data-slot=\"badge\" className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nexport { Badge, badgeVariants };\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,IACpB,uQACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,WAAW;EACX,OAAO;EACP,SAAS;EACT,SAAS;EACT,aAAa;EACb,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAOA,SAAS,MAAM,EAAE,WAAW,SAAS,UAAU,OAAO,GAAG,SAAqB;CAC5E,MAAM,OAAO,UAAU,KAAK,OAAO;CACnC,OACE,oBAAC,MAAD;EAAM,aAAU;EAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE9F"}
+{"version":3,"file":"badge.js","names":[],"sources":["../../src/components/badge.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst badgeVariants = cva(\n  'inline-flex w-fit shrink-0 items-center gap-1.5 rounded-full border px-2 py-0.5 text-[11px] font-semibold leading-4 whitespace-nowrap outline-none transition-colors focus-visible:ring-[3px] focus-visible:ring-ring/20 [&>svg]:size-3',\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-surface-muted text-foreground',\n        // 0.x name for the neutral tag; kept so existing apps keep compiling.\n        secondary: 'border-border bg-surface-muted text-foreground',\n        brand: 'border-brand/20 bg-brand-soft text-brand-soft-foreground',\n        success: 'border-success/20 bg-success/10 text-success',\n        warning: 'border-warning/20 bg-warning/10 text-warning',\n        destructive: 'border-destructive/20 bg-destructive/10 text-destructive',\n        info: 'border-info/20 bg-info/10 text-info',\n        outline: 'border-border-strong bg-transparent text-muted-foreground',\n      },\n    },\n    defaultVariants: { variant: 'default' },\n  },\n);\n\nexport interface BadgeProps\n  extends React.ComponentProps<'span'>, VariantProps<typeof badgeVariants> {\n  asChild?: boolean;\n}\n\nfunction Badge({ className, variant, asChild = false, ...props }: BadgeProps) {\n  const Comp = asChild ? Slot.Root : 'span';\n  return (\n    <Comp data-slot=\"badge\" className={cn(badgeVariants({ variant }), className)} {...props} />\n  );\n}\n\nexport { Badge, badgeVariants };\n"],"mappings":";;;;;;AAMA,IAAM,gBAAgB,IACpB,2OACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EAET,WAAW;EACX,OAAO;EACP,SAAS;EACT,SAAS;EACT,aAAa;EACb,MAAM;EACN,SAAS;CACX,EACF;CACA,iBAAiB,EAAE,SAAS,UAAU;AACxC,CACF;AAOA,SAAS,MAAM,EAAE,WAAW,SAAS,UAAU,OAAO,GAAG,SAAqB;CAC5E,MAAM,OAAO,UAAU,KAAK,OAAO;CACnC,OACE,oBAAC,MAAD;EAAM,aAAU;EAAQ,WAAW,GAAG,cAAc,EAAE,QAAQ,CAAC,GAAG,SAAS;EAAG,GAAI;CAAQ,CAAA;AAE9F"}

package/dist/components/button.d.ts

@@ -1,12 +1,12 @@
 import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
 declare const buttonVariants: (props?: ({
-    variant?: "secondary" | "destructive" | "link" | "default" | "outline" | "ghost" | null | undefined;
-    size?: "default" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "secondary" | "destructive" | "brand" | "link" | "default" | "outline" | "soft" | "ghost" | null | undefined;
+    size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-sm" | "icon-lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface ButtonProps extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {
-    /** Render the child element instead of a <button>, merging props onto it (e.g. a router link). */
     asChild?: boolean;
+    loading?: boolean;
 }
-declare function Button({ className, variant, size, asChild, ...props }: ButtonProps): React.JSX.Element;
+declare function Button({ className, variant, size, asChild, loading, disabled, children, ...props }: ButtonProps): React.JSX.Element;
 export { Button, buttonVariants };

package/dist/components/button.js

@@ -1,26 +1,29 @@
 import { cn } from "../lib/utils.js";
 import { Slot } from "radix-ui";
 import "react";
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { cva } from "class-variance-authority";
 //#region src/components/button.tsx
-var buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none select-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+var buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold tracking-[-0.01em] outline-none transition-[background-color,border-color,color,box-shadow,transform] duration-150 select-none focus-visible:ring-[3px] focus-visible:ring-ring/20 active:translate-y-px disabled:pointer-events-none disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
 	variants: {
 		variant: {
-			default: "bg-primary text-primary-foreground shadow-xs hover:bg-primary/90",
-			destructive: "bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/30",
-			outline: "border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/20 dark:hover:bg-input/40",
-			secondary: "bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80",
-			ghost: "hover:bg-accent hover:text-accent-foreground",
-			link: "text-brand underline-offset-4 hover:underline"
+			default: "border border-primary bg-primary text-primary-foreground shadow-xs hover:border-brand-hover hover:bg-brand-hover",
+			brand: "border border-brand bg-brand text-white shadow-[0_1px_2px_rgb(68_8_94_/_0.18)] hover:border-brand-hover hover:bg-brand-hover",
+			soft: "border border-brand/15 bg-brand-soft text-brand-soft-foreground hover:bg-brand/15",
+			secondary: "border border-border bg-secondary text-secondary-foreground shadow-xs hover:border-border-strong hover:bg-muted",
+			outline: "border border-border-strong bg-surface text-foreground shadow-xs hover:border-brand/35 hover:bg-accent/60 hover:text-accent-foreground",
+			ghost: "border border-transparent text-foreground hover:bg-muted",
+			destructive: "border border-destructive bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90",
+			link: "h-auto rounded-none border-0 p-0 text-brand shadow-none hover:text-brand-hover hover:underline hover:underline-offset-4 active:translate-y-0"
 		},
 		size: {
-			default: "h-9 px-4 py-2 has-[>svg]:px-3",
-			sm: "h-8 gap-1.5 rounded-md px-3 text-[13px] has-[>svg]:px-2.5",
-			lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
-			icon: "size-9",
-			"icon-sm": "size-8",
-			"icon-lg": "size-10"
+			xs: "h-7 gap-1.5 rounded-sm px-2.5 text-xs [&_svg:not([class*=size-])]:size-3.5",
+			sm: "h-8 px-3 text-[13px]",
+			default: "h-9 px-3.5",
+			lg: "h-10 rounded-lg px-4 text-[15px]",
+			icon: "size-9 px-0",
+			"icon-sm": "size-8 px-0",
+			"icon-lg": "size-10 rounded-lg px-0"
 		}
 	},
 	defaultVariants: {
@@ -28,16 +31,22 @@ var buttonVariants = cva("inline-flex shrink-0 items-center justify-center gap-2
 		size: "default"
 	}
 });
-function Button({ className, variant, size, asChild = false, ...props }) {
+function Button({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }) {
 	const Comp = asChild ? Slot.Root : "button";
 	return /* @__PURE__ */ jsx(Comp, {
 		"data-slot": "button",
+		"data-loading": loading ? "" : void 0,
+		"aria-busy": loading || void 0,
+		disabled: !asChild ? disabled || loading : void 0,
 		className: cn(buttonVariants({
 			variant,
-			size,
-			className
-		})),
-		...props
+			size
+		}), className),
+		...props,
+		children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [loading ? /* @__PURE__ */ jsx("span", {
+			"aria-hidden": "true",
+			className: "size-3.5 animate-spin rounded-full border-2 border-current border-r-transparent opacity-70"
+		}) : null, children] })
 	});
 }
 //#endregion

package/dist/components/button.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.js","names":[],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center gap-2 rounded-md text-sm font-medium whitespace-nowrap transition-[color,background-color,border-color,box-shadow] outline-none select-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary text-primary-foreground shadow-xs hover:bg-primary/90',\n        destructive:\n          'bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/30',\n        outline:\n          'border border-input bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/20 dark:hover:bg-input/40',\n        secondary: 'bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80',\n        ghost: 'hover:bg-accent hover:text-accent-foreground',\n        link: 'text-brand underline-offset-4 hover:underline',\n      },\n      size: {\n        default: 'h-9 px-4 py-2 has-[>svg]:px-3',\n        sm: 'h-8 gap-1.5 rounded-md px-3 text-[13px] has-[>svg]:px-2.5',\n        lg: 'h-10 rounded-md px-6 has-[>svg]:px-4',\n        icon: 'size-9',\n        'icon-sm': 'size-8',\n        'icon-lg': 'size-10',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'default' },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {\n  /** Render the child element instead of a <button>, merging props onto it (e.g. a router link). */\n  asChild?: boolean;\n}\n\nfunction Button({ className, variant, size, asChild = false, ...props }: ButtonProps) {\n  const Comp = asChild ? Slot.Root : 'button';\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;AAMA,IAAM,iBAAiB,IACrB,wbACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,aACE;GACF,SACE;GACF,WAAW;GACX,OAAO;GACP,MAAM;EACR;EACA,MAAM;GACJ,SAAS;GACT,IAAI;GACJ,IAAI;GACJ,MAAM;GACN,WAAW;GACX,WAAW;EACb;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAU;AACzD,CACF;AAQA,SAAS,OAAO,EAAE,WAAW,SAAS,MAAM,UAAU,OAAO,GAAG,SAAsB;CACpF,MAAM,OAAO,UAAU,KAAK,OAAO;CACnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,WAAW,GAAG,eAAe;GAAE;GAAS;GAAM;EAAU,CAAC,CAAC;EAC1D,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"button.js","names":["_Fragment"],"sources":["../../src/components/button.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport { Slot } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst buttonVariants = cva(\n  \"inline-flex shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-semibold tracking-[-0.01em] outline-none transition-[background-color,border-color,color,box-shadow,transform] duration-150 select-none focus-visible:ring-[3px] focus-visible:ring-ring/20 active:translate-y-px disabled:pointer-events-none disabled:opacity-45 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default:\n          'border border-primary bg-primary text-primary-foreground shadow-xs hover:border-brand-hover hover:bg-brand-hover',\n        brand:\n          'border border-brand bg-brand text-white shadow-[0_1px_2px_rgb(68_8_94_/_0.18)] hover:border-brand-hover hover:bg-brand-hover',\n        soft: 'border border-brand/15 bg-brand-soft text-brand-soft-foreground hover:bg-brand/15',\n        secondary:\n          'border border-border bg-secondary text-secondary-foreground shadow-xs hover:border-border-strong hover:bg-muted',\n        outline:\n          'border border-border-strong bg-surface text-foreground shadow-xs hover:border-brand/35 hover:bg-accent/60 hover:text-accent-foreground',\n        ghost: 'border border-transparent text-foreground hover:bg-muted',\n        destructive:\n          'border border-destructive bg-destructive text-destructive-foreground shadow-xs hover:bg-destructive/90',\n        link: 'h-auto rounded-none border-0 p-0 text-brand shadow-none hover:text-brand-hover hover:underline hover:underline-offset-4 active:translate-y-0',\n      },\n      size: {\n        xs: 'h-7 gap-1.5 rounded-sm px-2.5 text-xs [&_svg:not([class*=size-])]:size-3.5',\n        sm: 'h-8 px-3 text-[13px]',\n        default: 'h-9 px-3.5',\n        lg: 'h-10 rounded-lg px-4 text-[15px]',\n        icon: 'size-9 px-0',\n        'icon-sm': 'size-8 px-0',\n        'icon-lg': 'size-10 rounded-lg px-0',\n      },\n    },\n    defaultVariants: { variant: 'default', size: 'default' },\n  },\n);\n\nexport interface ButtonProps\n  extends React.ComponentProps<'button'>, VariantProps<typeof buttonVariants> {\n  asChild?: boolean;\n  loading?: boolean;\n}\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  loading = false,\n  disabled,\n  children,\n  ...props\n}: ButtonProps) {\n  const Comp = asChild ? Slot.Root : 'button';\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-loading={loading ? '' : undefined}\n      aria-busy={loading || undefined}\n      disabled={!asChild ? disabled || loading : undefined}\n      className={cn(buttonVariants({ variant, size }), className)}\n      {...props}\n    >\n      {asChild ? (\n        // Slot needs exactly one child to merge onto, so no spinner here.\n        children\n      ) : (\n        <>\n          {loading ? (\n            <span\n              aria-hidden=\"true\"\n              className=\"size-3.5 animate-spin rounded-full border-2 border-current border-r-transparent opacity-70\"\n            />\n          ) : null}\n          {children}\n        </>\n      )}\n    </Comp>\n  );\n}\n\nexport { Button, buttonVariants };\n"],"mappings":";;;;;;AAMA,IAAM,iBAAiB,IACrB,ybACA;CACE,UAAU;EACR,SAAS;GACP,SACE;GACF,OACE;GACF,MAAM;GACN,WACE;GACF,SACE;GACF,OAAO;GACP,aACE;GACF,MAAM;EACR;EACA,MAAM;GACJ,IAAI;GACJ,IAAI;GACJ,SAAS;GACT,IAAI;GACJ,MAAM;GACN,WAAW;GACX,WAAW;EACb;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAU;AACzD,CACF;AAQA,SAAS,OAAO,EACd,WACA,SACA,MACA,UAAU,OACV,UAAU,OACV,UACA,UACA,GAAG,SACW;CACd,MAAM,OAAO,UAAU,KAAK,OAAO;CAEnC,OACE,oBAAC,MAAD;EACE,aAAU;EACV,gBAAc,UAAU,KAAK,KAAA;EAC7B,aAAW,WAAW,KAAA;EACtB,UAAU,CAAC,UAAU,YAAY,UAAU,KAAA;EAC3C,WAAW,GAAG,eAAe;GAAE;GAAS;EAAK,CAAC,GAAG,SAAS;EAC1D,GAAI;EAEH,UAAA,UAEC,WAEA,qBAAAA,UAAA,EAAA,UAAA,CACG,UACC,oBAAC,QAAD;GACE,eAAY;GACZ,WAAU;EACX,CAAA,IACC,MACH,QACD,EAAA,CAAA;CAEA,CAAA;AAEV"}

package/dist/components/card.d.ts

@@ -1,9 +1,17 @@
+import { type VariantProps } from 'class-variance-authority';
 import * as React from 'react';
-declare function Card({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare const cardVariants: (props?: ({
+    variant?: "default" | "raised" | "subtle" | "interactive" | "terminal" | null | undefined;
+    density?: "default" | "compact" | "roomy" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface CardProps extends React.ComponentProps<'div'>, VariantProps<typeof cardVariants> {
+}
+declare function Card({ className, variant, density, ...props }: CardProps): React.JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
+declare function CardEyebrow({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function CardTitle({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function CardDescription({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function CardAction({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function CardContent({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
 declare function CardFooter({ className, ...props }: React.ComponentProps<'div'>): React.JSX.Element;
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export { Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, cardVariants, };

package/dist/components/card.js

@@ -1,57 +1,88 @@
 import { cn } from "../lib/utils.js";
 import "react";
 import { jsx } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
 //#region src/components/card.tsx
-function Card({ className, ...props }) {
+var cardVariants = cva("group/card relative flex flex-col overflow-hidden rounded-lg border text-card-foreground transition-[border-color,background-color,box-shadow,transform] duration-150", {
+	variants: {
+		variant: {
+			default: "border-border bg-card shadow-xs",
+			raised: "border-border bg-surface-raised shadow-md",
+			subtle: "border-border/70 bg-surface-muted shadow-none",
+			interactive: "border-border bg-card shadow-xs hover:-translate-y-0.5 hover:border-brand/30 hover:shadow-md",
+			terminal: "border-border-strong bg-code text-code-foreground shadow-md"
+		},
+		density: {
+			compact: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:px-4 [&_[data-slot=card-footer]]:p-4",
+			default: "[&_[data-slot=card-header]]:p-5 [&_[data-slot=card-content]]:px-5 [&_[data-slot=card-footer]]:p-5",
+			roomy: "[&_[data-slot=card-header]]:p-6 [&_[data-slot=card-content]]:px-6 [&_[data-slot=card-footer]]:p-6"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		density: "default"
+	}
+});
+function Card({ className, variant, density, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card",
-		className: cn("flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm", className),
+		className: cn(cardVariants({
+			variant,
+			density
+		}), className),
 		...props
 	});
 }
 function CardHeader({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-header",
-		className: cn("grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]", className),
+		className: cn("grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-1 border-b border-transparent pb-3", className),
+		...props
+	});
+}
+function CardEyebrow({ className, ...props }) {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "card-eyebrow",
+		className: cn("col-span-full mb-0.5 text-[11px] font-semibold tracking-[0.12em] text-muted-foreground uppercase", className),
 		...props
 	});
 }
 function CardTitle({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-title",
-		className: cn("leading-none font-semibold tracking-tight", className),
+		className: cn("min-w-0 text-sm font-semibold tracking-[-0.015em]", className),
 		...props
 	});
 }
 function CardDescription({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-description",
-		className: cn("text-sm text-muted-foreground", className),
+		className: cn("col-start-1 text-sm leading-5 text-muted-foreground", className),
 		...props
 	});
 }
 function CardAction({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-action",
-		className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className),
+		className: cn("col-start-2 row-span-2 row-start-1 self-start", className),
 		...props
 	});
 }
 function CardContent({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-content",
-		className: cn("px-6", className),
+		className: cn("pb-5", className),
 		...props
 	});
 }
 function CardFooter({ className, ...props }) {
 	return /* @__PURE__ */ jsx("div", {
 		"data-slot": "card-footer",
-		className: cn("flex items-center px-6 [.border-t]:pt-6", className),
+		className: cn("mt-auto flex items-center gap-2 border-t pt-4", className),
 		...props
 	});
 }
 //#endregion
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };
+export { Card, CardAction, CardContent, CardDescription, CardEyebrow, CardFooter, CardHeader, CardTitle, cardVariants };
 
 //# sourceMappingURL=card.js.map

package/dist/components/card.js.map

@@ -1 +1 @@
-{"version":3,"file":"card.js","names":[],"sources":["../../src/components/card.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Card({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        'flex flex-col gap-6 rounded-xl border bg-card py-6 text-card-foreground shadow-sm',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        'grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot=card-action]:grid-cols-[1fr_auto]',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn('leading-none font-semibold tracking-tight', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn('text-sm text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn('col-start-2 row-span-2 row-start-1 self-start justify-self-end', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"card-content\" className={cn('px-6', className)} {...props} />;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn('flex items-center px-6 [.border-t]:pt-6', className)}\n      {...props}\n    />\n  );\n}\n\nexport { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };\n"],"mappings":";;;;AAIA,SAAS,KAAK,EAAE,WAAW,GAAG,SAAsC;CAClE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,qFACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,sHACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,6CAA6C,SAAS;EACpE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iCAAiC,SAAS;EACxD,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,kEAAkE,SAAS;EACzF,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,QAAQ,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrF;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,2CAA2C,SAAS;EAClE,GAAI;CACL,CAAA;AAEL"}
+{"version":3,"file":"card.js","names":[],"sources":["../../src/components/card.tsx"],"sourcesContent":["import { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nconst cardVariants = cva(\n  'group/card relative flex flex-col overflow-hidden rounded-lg border text-card-foreground transition-[border-color,background-color,box-shadow,transform] duration-150',\n  {\n    variants: {\n      variant: {\n        default: 'border-border bg-card shadow-xs',\n        raised: 'border-border bg-surface-raised shadow-md',\n        subtle: 'border-border/70 bg-surface-muted shadow-none',\n        interactive:\n          'border-border bg-card shadow-xs hover:-translate-y-0.5 hover:border-brand/30 hover:shadow-md',\n        terminal: 'border-border-strong bg-code text-code-foreground shadow-md',\n      },\n      density: {\n        compact:\n          '[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:px-4 [&_[data-slot=card-footer]]:p-4',\n        default:\n          '[&_[data-slot=card-header]]:p-5 [&_[data-slot=card-content]]:px-5 [&_[data-slot=card-footer]]:p-5',\n        roomy:\n          '[&_[data-slot=card-header]]:p-6 [&_[data-slot=card-content]]:px-6 [&_[data-slot=card-footer]]:p-6',\n      },\n    },\n    defaultVariants: { variant: 'default', density: 'default' },\n  },\n);\n\nexport interface CardProps extends React.ComponentProps<'div'>, VariantProps<typeof cardVariants> {}\n\nfunction Card({ className, variant, density, ...props }: CardProps) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(cardVariants({ variant, density }), className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        'grid grid-cols-[1fr_auto] items-start gap-x-4 gap-y-1 border-b border-transparent pb-3',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardEyebrow({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-eyebrow\"\n      className={cn(\n        'col-span-full mb-0.5 text-[11px] font-semibold tracking-[0.12em] text-muted-foreground uppercase',\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn('min-w-0 text-sm font-semibold tracking-[-0.015em]', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn('col-start-1 text-sm leading-5 text-muted-foreground', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn('col-start-2 row-span-2 row-start-1 self-start', className)}\n      {...props}\n    />\n  );\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<'div'>) {\n  return <div data-slot=\"card-content\" className={cn('pb-5', className)} {...props} />;\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<'div'>) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn('mt-auto flex items-center gap-2 border-t pt-4', className)}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardEyebrow,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n  cardVariants,\n};\n"],"mappings":";;;;;AAKA,IAAM,eAAe,IACnB,yKACA;CACE,UAAU;EACR,SAAS;GACP,SAAS;GACT,QAAQ;GACR,QAAQ;GACR,aACE;GACF,UAAU;EACZ;EACA,SAAS;GACP,SACE;GACF,SACE;GACF,OACE;EACJ;CACF;CACA,iBAAiB;EAAE,SAAS;EAAW,SAAS;CAAU;AAC5D,CACF;AAIA,SAAS,KAAK,EAAE,WAAW,SAAS,SAAS,GAAG,SAAoB;CAClE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,aAAa;GAAE;GAAS;EAAQ,CAAC,GAAG,SAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,0FACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GACT,oGACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,UAAU,EAAE,WAAW,GAAG,SAAsC;CACvE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,qDAAqD,SAAS;EAC5E,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,gBAAgB,EAAE,WAAW,GAAG,SAAsC;CAC7E,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,uDAAuD,SAAS;EAC9E,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,QAAQ,SAAS;EAAG,GAAI;CAAQ,CAAA;AACrF;AAEA,SAAS,WAAW,EAAE,WAAW,GAAG,SAAsC;CACxE,OACE,oBAAC,OAAD;EACE,aAAU;EACV,WAAW,GAAG,iDAAiD,SAAS;EACxE,GAAI;CACL,CAAA;AAEL"}

package/dist/components/checkbox.js

@@ -7,7 +7,7 @@ import Check from "@burtson-labs/icons/react/check";
 function Checkbox$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Checkbox.Root, {
 		"data-slot": "checkbox",
-		className: cn("peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/20", className),
+		className: cn("peer size-4 shrink-0 rounded-xs border border-border-strong bg-surface shadow-xs transition-[border-color,box-shadow] outline-none hover:border-brand/50 focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground", className),
 		...props,
 		children: /* @__PURE__ */ jsx(Checkbox.Indicator, {
 			"data-slot": "checkbox-indicator",

package/dist/components/checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.js","names":["Checkbox","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer size-4 shrink-0 rounded-[4px] border border-input shadow-xs transition-shadow outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:bg-input/20',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current\"\n      >\n        <Check className=\"size-3.5\" strokeWidth={2.5} aria-hidden />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAMA,SAASA,WAAS,EAAE,WAAW,GAAG,SAA8D;CAC9F,OACE,oBAACC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,yWACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,OAAD;IAAO,WAAU;IAAW,aAAa;IAAK,eAAA;GAAa,CAAA;EAChC,CAAA;CACP,CAAA;AAE5B"}
+{"version":3,"file":"checkbox.js","names":["Checkbox","CheckboxPrimitive"],"sources":["../../src/components/checkbox.tsx"],"sourcesContent":["import Check from '@burtson-labs/icons/react/check';\nimport { Checkbox as CheckboxPrimitive } from 'radix-ui';\nimport * as React from 'react';\n\nimport { cn } from '../lib/utils';\n\nfunction Checkbox({ className, ...props }: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        'peer size-4 shrink-0 rounded-xs border border-border-strong bg-surface shadow-xs transition-[border-color,box-shadow] outline-none hover:border-brand/50 focus-visible:ring-[3px] focus-visible:ring-ring/20 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive data-[state=checked]:border-primary data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',\n        className,\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current\"\n      >\n        <Check className=\"size-3.5\" strokeWidth={2.5} aria-hidden />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  );\n}\n\nexport { Checkbox };\n"],"mappings":";;;;;;AAMA,SAASA,WAAS,EAAE,WAAW,GAAG,SAA8D;CAC9F,OACE,oBAACC,SAAkB,MAAnB;EACE,aAAU;EACV,WAAW,GACT,iZACA,SACF;EACA,GAAI;EAEJ,UAAA,oBAACA,SAAkB,WAAnB;GACE,aAAU;GACV,WAAU;GAEV,UAAA,oBAAC,OAAD;IAAO,WAAU;IAAW,aAAa;IAAK,eAAA;GAAa,CAAA;EAChC,CAAA;CACP,CAAA;AAE5B"}

package/dist/components/command.js

@@ -8,7 +8,7 @@ import { Command } from "cmdk";
 function Command$1({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Command, {
 		"data-slot": "command",
-		className: cn("flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground", className),
+		className: cn("flex h-full w-full flex-col overflow-hidden rounded-lg bg-surface-raised text-popover-foreground", className),
 		...props
 	});
 }
@@ -17,7 +17,7 @@ function CommandDialog({ title = "Command palette", description = "Search for a
 	return /* @__PURE__ */ jsx(Dialog, {
 		...props,
 		children: /* @__PURE__ */ jsxs(DialogContent, {
-			className: cn("top-[20%] translate-y-0 overflow-hidden p-0 sm:max-w-xl", className),
+			className: cn("top-[20%] translate-y-0 gap-0 overflow-hidden p-0 sm:max-w-xl sm:p-0", className),
 			showCloseButton: false,
 			children: [/* @__PURE__ */ jsxs(DialogHeader, {
 				className: "sr-only",
@@ -74,14 +74,14 @@ function CommandSeparator({ className, ...props }) {
 function CommandItem({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Command.Item, {
 		"data-slot": "command-item",
-		className: cn("relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
+		className: cn("relative flex min-h-8 cursor-default items-center gap-2 rounded-sm px-2 text-[13px] outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-muted data-[selected=true]:text-foreground data-[selected=true]:shadow-[inset_2px_0_0_var(--color-brand)] [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className),
 		...props
 	});
 }
 function CommandShortcut({ className, ...props }) {
 	return /* @__PURE__ */ jsx("span", {
 		"data-slot": "command-shortcut",
-		className: cn("ml-auto text-xs tracking-widest text-muted-foreground", className),
+		className: cn("ml-auto rounded-xs border border-border bg-surface-muted px-1.5 font-mono text-[11px] leading-5 text-muted-foreground", className),
 		...props
 	});
 }