@nocoo/basalt 2.1.8 → 3.0.0

package/dist/components/alert-dialog.js

@@ -27,13 +27,13 @@ var f = a.forwardRef(({ className: e, size: t = "base", ...n }, a) => /* @__PURE
 f.displayName = i.Content.displayName;
 var p = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ o(i.Title, {
 	ref: r,
-	className: e("text-2xl font-semibold tracking-tight", t),
+	className: e("text-basalt-3xl font-semibold tracking-tight", t),
 	...n
 }));
 p.displayName = i.Title.displayName;
 var m = a.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ o(i.Description, {
 	ref: r,
-	className: e("text-base text-basalt-muted-foreground", t),
+	className: e("text-basalt-lg text-basalt-muted-foreground", t),
 	...n
 }));
 m.displayName = i.Description.displayName;
@@ -50,12 +50,12 @@ var g = a.forwardRef(({ className: n, ...r }, a) => /* @__PURE__ */ o(i.Action,
 }));
 g.displayName = i.Action.displayName;
 var _ = ({ className: t, ...n }) => /* @__PURE__ */ o("div", {
-	className: e("flex flex-col space-y-2 text-left", t),
+	className: e("flex flex-col space-y-basalt-space-lg text-left", t),
 	...n
 });
 _.displayName = "AlertDialogHeader";
 var v = ({ className: t, ...n }) => /* @__PURE__ */ o("div", {
-	className: e("mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", t),
+	className: e("mt-basalt-space-lg flex flex-col-reverse gap-basalt-space-lg sm:flex-row sm:justify-end", t),
 	...n
 });
 v.displayName = "AlertDialogFooter";

package/dist/components/alert-dialog.js.map

@@ -1 +1 @@
-{"version":3,"file":"alert-dialog.js","names":[],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { buttonVariants } from \"./button\";\nimport { type DialogSize, dialogOverlayClass, dialogPanelClass } from \"./dialog\";\n\ntype RadixAlertDialogProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>;\ntype RadixAlertDialogTriggerProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Trigger\n>;\ntype RadixAlertDialogPortalProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Portal\n>;\ntype RadixAlertDialogOverlayProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Overlay\n>;\ntype RadixAlertDialogContentProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Content\n>;\ntype RadixAlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;\ntype RadixAlertDialogDescriptionProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Description\n>;\ntype RadixAlertDialogActionProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Action\n>;\ntype RadixAlertDialogCancelProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Cancel\n>;\n\nexport interface AlertDialogProps\n\textends Omit<RadixAlertDialogProps, \"open\" | \"defaultOpen\" | \"onOpenChange\"> {\n\t/**\n\t * Controlled open state of the alert dialog.\n\t */\n\topen?: RadixAlertDialogProps[\"open\"];\n\t/**\n\t * Uncontrolled default open state of the alert dialog on initial render.\n\t * @default false\n\t */\n\tdefaultOpen?: RadixAlertDialogProps[\"defaultOpen\"];\n\t/**\n\t * Callback invoked when the open state changes.\n\t */\n\tonOpenChange?: RadixAlertDialogProps[\"onOpenChange\"];\n}\n\nexport const AlertDialog: React.FC<AlertDialogProps> = AlertDialogPrimitive.Root;\n\nexport interface AlertDialogTriggerProps extends Omit<RadixAlertDialogTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogTriggerProps[\"asChild\"];\n}\n\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\nexport interface AlertDialogPortalProps\n\textends Omit<RadixAlertDialogPortalProps, \"container\" | \"forceMount\"> {\n\t/**\n\t * Target container element where the alert dialog overlay and content portal should mount.\n\t */\n\tcontainer?: RadixAlertDialogPortalProps[\"container\"];\n\t/**\n\t * Used to force mounting when controlling transition animations externally.\n\t */\n\tforceMount?: RadixAlertDialogPortalProps[\"forceMount\"];\n}\n\nexport const AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nexport interface AlertDialogOverlayProps\n\textends Omit<RadixAlertDialogOverlayProps, \"asChild\" | \"forceMount\"> {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Overlay forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogOverlayProps[\"asChild\"];\n\t/**\n\t * Used to force mounting when controlling transition animations externally.\n\t */\n\tforceMount?: RadixAlertDialogOverlayProps[\"forceMount\"];\n}\n\nexport const AlertDialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n\tAlertDialogOverlayProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nexport interface AlertDialogContentProps\n\textends Omit<\n\t\tRadixAlertDialogContentProps,\n\t\t| \"size\"\n\t\t| \"asChild\"\n\t\t| \"forceMount\"\n\t\t| \"trapFocus\"\n\t\t| \"onOpenAutoFocus\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t> {\n\t/**\n\t * Fixed desktop width preset, shared with Dialog. Content scrolls vertically when overflowing available height.\n\t * @default \"base\"\n\t */\n\tsize?: DialogSize;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogContentProps[\"asChild\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * When forceMount is true, the content remains mounted even when closed.\n\t * The caller is responsible for visibility transitions and unmounting after animation completes.\n\t * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.\n\t */\n\tforceMount?: RadixAlertDialogContentProps[\"forceMount\"];\n\t/**\n\t * Event handler called when auto-focusing on open. Defaults to focusing the cancel button. Can be prevented with event.preventDefault().\n\t */\n\tonOpenAutoFocus?: RadixAlertDialogContentProps[\"onOpenAutoFocus\"];\n\t/**\n\t * Event handler called when restoring focus on close. Can be prevented with event.preventDefault().\n\t */\n\tonCloseAutoFocus?: RadixAlertDialogContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Event handler called when the Escape key is pressed. Can be prevented with event.preventDefault().\n\t */\n\tonEscapeKeyDown?: RadixAlertDialogContentProps[\"onEscapeKeyDown\"];\n}\n\nexport const AlertDialogContent = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(({ className, size = \"base\", ...props }, ref) => (\n\t<AlertDialogPortal forceMount={props.forceMount}>\n\t\t<AlertDialogOverlay forceMount={props.forceMount} />\n\t\t<AlertDialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t{...props}\n\t\t/>\n\t</AlertDialogPortal>\n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nexport interface AlertDialogTitleProps extends Omit<RadixAlertDialogTitleProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered heading element to the child element, merging props and behavior.\n\t * Title forwards ref to HTMLHeadingElement and inherits native h2 attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogTitleProps[\"asChild\"];\n}\n\nexport const AlertDialogTitle = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Title>,\n\tAlertDialogTitleProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-2xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nexport interface AlertDialogDescriptionProps\n\textends Omit<RadixAlertDialogDescriptionProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered paragraph element to the child element, merging props and behavior.\n\t * Description forwards ref to HTMLParagraphElement and inherits native p attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogDescriptionProps[\"asChild\"];\n}\n\nexport const AlertDialogDescription = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Description>,\n\tAlertDialogDescriptionProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-base text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;\n\nexport interface AlertDialogCancelProps extends Omit<RadixAlertDialogCancelProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Cancel forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogCancelProps[\"asChild\"];\n}\n\nexport const AlertDialogCancel = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n\tAlertDialogCancelProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Cancel\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"outline\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport interface AlertDialogActionProps extends Omit<RadixAlertDialogActionProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Action forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogActionProps[\"asChild\"];\n}\n\nexport const AlertDialogAction = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Action>,\n\tAlertDialogActionProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Action\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"destructive\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nexport interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const AlertDialogHeader = ({ className, ...props }: AlertDialogHeaderProps) => (\n\t<div className={cn(\"flex flex-col space-y-2 text-left\", className)} {...props} />\n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nexport interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const AlertDialogFooter = ({ className, ...props }: AlertDialogFooterProps) => (\n\t<div\n\t\tclassName={cn(\"mt-6 flex flex-col-reverse gap-2 sm:flex-row sm:justify-end\", className)}\n\t\t{...props}\n\t/>\n);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n"],"mappings":";;;;;;;;AA+CA,IAAa,IAA0C,EAAqB,MAW/D,IAAqB,EAAqB,SAc1C,IAAoB,EAAqB,QAgBzC,IAAqB,EAAM,YAGrC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,SAAtB;CAAmC;CAAK,WAAW,EAAmB,CAAS;CAAG,GAAI;AAAQ,CAAA,CAC9F;AACD,EAAmB,cAAc,EAAqB,QAAQ;AA6C9D,IAAa,IAAqB,EAAM,YAGrC,EAAE,cAAW,UAAO,QAAQ,GAAG,KAAS,MAC1C,kBAAC,GAAD;CAAmB,YAAY,EAAM;CAArC,UAAA,CACC,kBAAC,GAAD,EAAoB,YAAY,EAAM,WAAa,CAAA,GACnD,kBAAC,EAAqB,SAAtB;EACM;EACL,4BAAyB;EACzB,WAAW,EAAiB;GAAE;GAAM;EAAU,CAAC;EAC/C,GAAI;CACJ,CAAA,CACiB;AACnB,CAAA,CAAA;AACD,EAAmB,cAAc,EAAqB,QAAQ;AAW9D,IAAa,IAAmB,EAAM,YAGnC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,OAAtB;CACM;CACL,WAAW,EAAG,yCAAyC,CAAS;CAChE,GAAI;AACJ,CAAA,CACD;AACD,EAAiB,cAAc,EAAqB,MAAM;AAY1D,IAAa,IAAyB,EAAM,YAGzC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,aAAtB;CACM;CACL,WAAW,EAAG,0CAA0C,CAAS;CACjE,GAAI;AACJ,CAAA,CACD;AACD,EAAuB,cAAc,EAAqB,YAAY;AAWtE,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,UAAU,CAAC,GAAG,CAAS;CAC/D,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAW5D,IAAa,IAAoB,EAAM,YAGpC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAqB,QAAtB;CACM;CACL,WAAW,EAAG,EAAe,EAAE,SAAS,cAAc,CAAC,GAAG,CAAS;CACnE,GAAI;AACJ,CAAA,CACD;AACD,EAAkB,cAAc,EAAqB,OAAO;AAI5D,IAAa,KAAqB,EAAE,cAAW,GAAG,QACjD,kBAAC,OAAD;CAAK,WAAW,EAAG,qCAAqC,CAAS;CAAG,GAAI;AAAQ,CAAA;AAEjF,EAAkB,cAAc;AAIhC,IAAa,KAAqB,EAAE,cAAW,GAAG,QACjD,kBAAC,OAAD;CACC,WAAW,EAAG,+DAA+D,CAAS;CACtF,GAAI;AACJ,CAAA;AAEF,EAAkB,cAAc"}
+{"version":3,"file":"alert-dialog.js","names":["AlertDialogPrimitive","React","AlertDialog","AlertDialogTrigger","AlertDialogPortal","AlertDialogOverlay","props","dialogOverlayClass","className","AlertDialogContent","dialogPanelClass","AlertDialogTitle","cn","AlertDialogDescription","AlertDialogCancel","buttonVariants","AlertDialogAction","AlertDialogHeader","AlertDialogFooter"],"sources":["../../src/components/alert-dialog.tsx"],"sourcesContent":["import * as AlertDialogPrimitive from \"@radix-ui/react-alert-dialog\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { buttonVariants } from \"./button\";\nimport { type DialogSize, dialogOverlayClass, dialogPanelClass } from \"./dialog\";\n\ntype RadixAlertDialogProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Root>;\ntype RadixAlertDialogTriggerProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Trigger\n>;\ntype RadixAlertDialogPortalProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Portal\n>;\ntype RadixAlertDialogOverlayProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Overlay\n>;\ntype RadixAlertDialogContentProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Content\n>;\ntype RadixAlertDialogTitleProps = React.ComponentPropsWithoutRef<typeof AlertDialogPrimitive.Title>;\ntype RadixAlertDialogDescriptionProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Description\n>;\ntype RadixAlertDialogActionProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Action\n>;\ntype RadixAlertDialogCancelProps = React.ComponentPropsWithoutRef<\n\ttypeof AlertDialogPrimitive.Cancel\n>;\n\nexport interface AlertDialogProps\n\textends Omit<RadixAlertDialogProps, \"open\" | \"defaultOpen\" | \"onOpenChange\"> {\n\t/**\n\t * Controlled open state of the alert dialog.\n\t */\n\topen?: RadixAlertDialogProps[\"open\"];\n\t/**\n\t * Uncontrolled default open state of the alert dialog on initial render.\n\t * @default false\n\t */\n\tdefaultOpen?: RadixAlertDialogProps[\"defaultOpen\"];\n\t/**\n\t * Callback invoked when the open state changes.\n\t */\n\tonOpenChange?: RadixAlertDialogProps[\"onOpenChange\"];\n}\n\nexport const AlertDialog: React.FC<AlertDialogProps> = AlertDialogPrimitive.Root;\n\nexport interface AlertDialogTriggerProps extends Omit<RadixAlertDialogTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Trigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogTriggerProps[\"asChild\"];\n}\n\nexport const AlertDialogTrigger = AlertDialogPrimitive.Trigger;\n\nexport interface AlertDialogPortalProps\n\textends Omit<RadixAlertDialogPortalProps, \"container\" | \"forceMount\"> {\n\t/**\n\t * Target container element where the alert dialog overlay and content portal should mount.\n\t */\n\tcontainer?: RadixAlertDialogPortalProps[\"container\"];\n\t/**\n\t * Used to force mounting when controlling transition animations externally.\n\t */\n\tforceMount?: RadixAlertDialogPortalProps[\"forceMount\"];\n}\n\nexport const AlertDialogPortal = AlertDialogPrimitive.Portal;\n\nexport interface AlertDialogOverlayProps\n\textends Omit<RadixAlertDialogOverlayProps, \"asChild\" | \"forceMount\"> {\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Overlay forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogOverlayProps[\"asChild\"];\n\t/**\n\t * Used to force mounting when controlling transition animations externally.\n\t */\n\tforceMount?: RadixAlertDialogOverlayProps[\"forceMount\"];\n}\n\nexport const AlertDialogOverlay = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Overlay>,\n\tAlertDialogOverlayProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Overlay ref={ref} className={dialogOverlayClass(className)} {...props} />\n));\nAlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;\n\nexport interface AlertDialogContentProps\n\textends Omit<\n\t\tRadixAlertDialogContentProps,\n\t\t| \"size\"\n\t\t| \"asChild\"\n\t\t| \"forceMount\"\n\t\t| \"trapFocus\"\n\t\t| \"onOpenAutoFocus\"\n\t\t| \"onCloseAutoFocus\"\n\t\t| \"onEscapeKeyDown\"\n\t> {\n\t/**\n\t * Fixed desktop width preset, shared with Dialog. Content scrolls vertically when overflowing available height.\n\t * @default \"base\"\n\t */\n\tsize?: DialogSize;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * Content forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogContentProps[\"asChild\"];\n\t/**\n\t * Force mounting content in DOM for external animation controls.\n\t * When forceMount is true, the content remains mounted even when closed.\n\t * The caller is responsible for visibility transitions and unmounting after animation completes.\n\t * Note: Keeping modal content forceMounted may isolate background interactions until unmounted.\n\t */\n\tforceMount?: RadixAlertDialogContentProps[\"forceMount\"];\n\t/**\n\t * Event handler called when auto-focusing on open. Defaults to focusing the cancel button. Can be prevented with event.preventDefault().\n\t */\n\tonOpenAutoFocus?: RadixAlertDialogContentProps[\"onOpenAutoFocus\"];\n\t/**\n\t * Event handler called when restoring focus on close. Can be prevented with event.preventDefault().\n\t */\n\tonCloseAutoFocus?: RadixAlertDialogContentProps[\"onCloseAutoFocus\"];\n\t/**\n\t * Event handler called when the Escape key is pressed. Can be prevented with event.preventDefault().\n\t */\n\tonEscapeKeyDown?: RadixAlertDialogContentProps[\"onEscapeKeyDown\"];\n}\n\nexport const AlertDialogContent = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Content>,\n\tAlertDialogContentProps\n>(({ className, size = \"base\", ...props }, ref) => (\n\t<AlertDialogPortal forceMount={props.forceMount}>\n\t\t<AlertDialogOverlay forceMount={props.forceMount} />\n\t\t<AlertDialogPrimitive.Content\n\t\t\tref={ref}\n\t\t\tdata-basalt-surface-root=\"\"\n\t\t\tclassName={dialogPanelClass({ size, className })}\n\t\t\t{...props}\n\t\t/>\n\t</AlertDialogPortal>\n));\nAlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;\n\nexport interface AlertDialogTitleProps extends Omit<RadixAlertDialogTitleProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered heading element to the child element, merging props and behavior.\n\t * Title forwards ref to HTMLHeadingElement and inherits native h2 attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogTitleProps[\"asChild\"];\n}\n\nexport const AlertDialogTitle = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Title>,\n\tAlertDialogTitleProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Title\n\t\tref={ref}\n\t\tclassName={cn(\"text-basalt-3xl font-semibold tracking-tight\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;\n\nexport interface AlertDialogDescriptionProps\n\textends Omit<RadixAlertDialogDescriptionProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered paragraph element to the child element, merging props and behavior.\n\t * Description forwards ref to HTMLParagraphElement and inherits native p attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogDescriptionProps[\"asChild\"];\n}\n\nexport const AlertDialogDescription = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Description>,\n\tAlertDialogDescriptionProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Description\n\t\tref={ref}\n\t\tclassName={cn(\"text-basalt-lg text-basalt-muted-foreground\", className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;\n\nexport interface AlertDialogCancelProps extends Omit<RadixAlertDialogCancelProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Cancel forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogCancelProps[\"asChild\"];\n}\n\nexport const AlertDialogCancel = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Cancel>,\n\tAlertDialogCancelProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Cancel\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"outline\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;\n\nexport interface AlertDialogActionProps extends Omit<RadixAlertDialogActionProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * Action forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixAlertDialogActionProps[\"asChild\"];\n}\n\nexport const AlertDialogAction = React.forwardRef<\n\tReact.ElementRef<typeof AlertDialogPrimitive.Action>,\n\tAlertDialogActionProps\n>(({ className, ...props }, ref) => (\n\t<AlertDialogPrimitive.Action\n\t\tref={ref}\n\t\tclassName={cn(buttonVariants({ variant: \"destructive\" }), className)}\n\t\t{...props}\n\t/>\n));\nAlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;\n\nexport interface AlertDialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const AlertDialogHeader = ({ className, ...props }: AlertDialogHeaderProps) => (\n\t<div className={cn(\"flex flex-col space-y-basalt-space-lg text-left\", className)} {...props} />\n);\nAlertDialogHeader.displayName = \"AlertDialogHeader\";\n\nexport interface AlertDialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const AlertDialogFooter = ({ className, ...props }: AlertDialogFooterProps) => (\n\t<div\n\t\tclassName={cn(\n\t\t\t\"mt-basalt-space-lg flex flex-col-reverse gap-basalt-space-lg sm:flex-row sm:justify-end\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n);\nAlertDialogFooter.displayName = \"AlertDialogFooter\";\n"],"mappings":";;;;;;;;AA+CA,IAAaE,IAA0CF,EAAqB,MAW/DG,IAAqBH,EAAqB,SAc1CI,IAAoBJ,EAAqB,QAgBzCK,IAAqBJ,EAAM,YAGrC,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACN,EAAqB,SAAtB;CAAmC;CAAK,WAAWO,EAAmBC,CAAS;CAAG,GAAIF;AAAQ,CAAA,CAC9F;AACD,EAAmB,cAAcN,EAAqB,QAAQ;AA6C9D,IAAaS,IAAqBR,EAAM,YAGrC,EAAE,cAAW,UAAO,QAAQ,GAAGK,KAAS,MAC1C,kBAACF,GAAD;CAAmB,YAAYE,EAAM;CAArC,UAAA,CACC,kBAACD,GAAD,EAAoB,YAAYC,EAAM,WAAa,CAAA,GACnD,kBAACN,EAAqB,SAAtB;EACM;EACL,4BAAyB;EACzB,WAAWU,EAAiB;GAAE;GAAM;EAAU,CAAC;EAC/C,GAAIJ;CACJ,CAAA,CACiB;AACnB,CAAA,CAAA;AACD,EAAmB,cAAcN,EAAqB,QAAQ;AAW9D,IAAaW,IAAmBV,EAAM,YAGnC,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACN,EAAqB,OAAtB;CACM;CACL,WAAWY,EAAG,gDAAgDJ,CAAS;CACvE,GAAIF;AACJ,CAAA,CACD;AACD,EAAiB,cAAcN,EAAqB,MAAM;AAY1D,IAAaa,IAAyBZ,EAAM,YAGzC,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACN,EAAqB,aAAtB;CACM;CACL,WAAWY,EAAG,+CAA+CJ,CAAS;CACtE,GAAIF;AACJ,CAAA,CACD;AACD,EAAuB,cAAcN,EAAqB,YAAY;AAWtE,IAAac,IAAoBb,EAAM,YAGpC,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACN,EAAqB,QAAtB;CACM;CACL,WAAWY,EAAGG,EAAe,EAAE,SAAS,UAAU,CAAC,GAAGP,CAAS;CAC/D,GAAIF;AACJ,CAAA,CACD;AACD,EAAkB,cAAcN,EAAqB,OAAO;AAW5D,IAAagB,IAAoBf,EAAM,YAGpC,EAAE,cAAW,GAAGK,KAAS,MAC3B,kBAACN,EAAqB,QAAtB;CACM;CACL,WAAWY,EAAGG,EAAe,EAAE,SAAS,cAAc,CAAC,GAAGP,CAAS;CACnE,GAAIF;AACJ,CAAA,CACD;AACD,EAAkB,cAAcN,EAAqB,OAAO;AAI5D,IAAaiB,KAAqB,EAAE,cAAW,GAAGX,QACjD,kBAAC,OAAD;CAAK,WAAWM,EAAG,mDAAmDJ,CAAS;CAAG,GAAIF;AAAQ,CAAA;AAE/F,EAAkB,cAAc;AAIhC,IAAaY,KAAqB,EAAE,cAAW,GAAGZ,QACjD,kBAAC,OAAD;CACC,WAAWM,EACV,2FACAJ,CACD;CACA,GAAIF;AACJ,CAAA;AAEF,EAAkB,cAAc"}

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

@@ -1,5 +1,5 @@
 import type { HTMLAttributes, ReactNode } from "react";
-export declare function AppHeader({ leading, breadcrumbs, title, actions, className, ...props }: HTMLAttributes<HTMLElement> & {
+export declare function AppHeader({ leading, breadcrumbs, title, actions, sticky, density, className, ...props }: HTMLAttributes<HTMLElement> & {
     leading?: ReactNode;
     breadcrumbs?: {
         href?: string;
@@ -7,4 +7,8 @@ export declare function AppHeader({ leading, breadcrumbs, title, actions, classN
     }[];
     title?: ReactNode;
     actions?: ReactNode;
+    /** Keep this row visible in its current scroll owner, including the shell safe area. */
+    sticky?: boolean;
+    /** Compact is a 52px row; comfortable is 56px. */
+    density?: "comfortable" | "compact";
 }): import("react").JSX.Element;

package/dist/components/app-header.js

@@ -5,27 +5,35 @@ import { Breadcrumbs as n } from "./breadcrumbs.js";
 import { ChevronRight as r } from "lucide-react";
 import { Fragment as i, jsx as a, jsxs as o } from "react/jsx-runtime";
 //#region src/components/app-header.tsx
-function s({ leading: s, breadcrumbs: c, title: l, actions: u, className: d, ...f }) {
+function s({ leading: s, breadcrumbs: c, title: l, actions: u, sticky: d = !1, density: f = "comfortable", className: p, ...m }) {
 	return /* @__PURE__ */ o("header", {
-		className: e(t, "flex h-14 shrink-0 items-center justify-between gap-3 px-4 md:px-6", d),
-		...f,
+		"data-basalt-header": "",
+		"data-sticky": d || void 0,
+		"data-density": f,
+		className: e(t, "flex shrink-0 items-center justify-between gap-basalt-space-lg px-basalt-space-lg md:px-basalt-space-lg", f === "compact" ? "h-[3.25rem]" : "h-basalt-14", p),
+		...m,
 		children: [/* @__PURE__ */ o("div", {
-			className: "flex min-w-0 items-center gap-3",
-			children: [s, /* @__PURE__ */ o("div", {
-				className: "flex min-w-0 items-center gap-1",
+			className: "flex min-w-0 items-center gap-basalt-space-lg",
+			children: [s ? /* @__PURE__ */ a("div", {
+				"data-basalt-header-leading": "",
+				className: "flex shrink-0 items-center",
+				children: s
+			}) : null, /* @__PURE__ */ o("div", {
+				className: "flex min-w-0 items-center gap-basalt-space-sm",
 				children: [c && c.length > 0 ? /* @__PURE__ */ o(i, { children: [/* @__PURE__ */ a(n, {
 					items: c,
 					className: "min-w-0"
-				}), /* @__PURE__ */ a(r, {
-					className: "size-3 shrink-0 text-basalt-muted-foreground",
+				}), l ? /* @__PURE__ */ a(r, {
+					className: "size-basalt-icon-sm shrink-0 text-basalt-muted-foreground",
 					"aria-hidden": "true"
-				})] }) : null, l ? /* @__PURE__ */ a("h1", {
-					className: "truncate text-sm font-normal text-basalt-foreground",
+				}) : null] }) : null, l ? /* @__PURE__ */ a("h1", {
+					className: "truncate text-basalt-base font-normal text-basalt-foreground",
 					children: l
 				}) : null]
 			})]
 		}), u ? /* @__PURE__ */ a("div", {
-			className: "flex shrink-0 items-center gap-1",
+			"data-basalt-header-actions": "",
+			className: "flex shrink-0 items-center gap-basalt-space-sm",
 			children: u
 		}) : null]
 	});

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

@@ -1 +1 @@
-{"version":3,"file":"app-header.js","names":[],"sources":["../../src/components/app-header.tsx"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Breadcrumbs } from \"./breadcrumbs\";\n\nexport function AppHeader({\n\tleading,\n\tbreadcrumbs,\n\ttitle,\n\tactions,\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLElement> & {\n\tleading?: ReactNode;\n\tbreadcrumbs?: { href?: string; label: ReactNode }[];\n\ttitle?: ReactNode;\n\tactions?: ReactNode;\n}) {\n\treturn (\n\t\t<header\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex h-14 shrink-0 items-center justify-between gap-3 px-4 md:px-6\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex min-w-0 items-center gap-3\">\n\t\t\t\t{leading}\n\t\t\t\t<div className=\"flex min-w-0 items-center gap-1\">\n\t\t\t\t\t{breadcrumbs && breadcrumbs.length > 0 ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Breadcrumbs items={breadcrumbs} className=\"min-w-0\" />\n\t\t\t\t\t\t\t<ChevronRight\n\t\t\t\t\t\t\t\tclassName=\"size-3 shrink-0 text-basalt-muted-foreground\"\n\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{title ? (\n\t\t\t\t\t\t<h1 className=\"truncate text-sm font-normal text-basalt-foreground\">{title}</h1>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{actions ? <div className=\"flex shrink-0 items-center gap-1\">{actions}</div> : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;;;AAMA,SAAgB,EAAU,EACzB,YACA,gBACA,UACA,YACA,cACA,GAAG,KAMD;CACF,OACC,kBAAC,UAAD;EACC,WAAW,EACV,GACA,sEACA,CACD;EACA,GAAI;EANL,UAAA,CAQC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACE,GACD,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACE,KAAe,EAAY,SAAS,IACpC,kBAAA,GAAA,EAAA,UAAA,CACC,kBAAC,GAAD;KAAa,OAAO;KAAa,WAAU;IAAW,CAAA,GACtD,kBAAC,GAAD;KACC,WAAU;KACV,eAAY;IACZ,CAAA,CACA,EAAA,CAAA,IACC,MACH,IACA,kBAAC,MAAD;KAAI,WAAU;KAAuD,UAAA;IAAU,CAAA,IAC5E,IACA;GACD,CAAA,CAAA;EACJ,CAAA,GAAA,IAAU,kBAAC,OAAD;GAAK,WAAU;GAAoC,UAAA;EAAa,CAAA,IAAI,IACxE;;AAEV"}
+{"version":3,"file":"app-header.js","names":["_Fragment","AppHeader","props","sticky","density","cn","BASALT_UI_CLASS","className","leading","breadcrumbs","Fragment","Breadcrumbs","title","ChevronRight","actions"],"sources":["../../src/components/app-header.tsx"],"sourcesContent":["import { ChevronRight } from \"lucide-react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { Breadcrumbs } from \"./breadcrumbs\";\n\nexport function AppHeader({\n\tleading,\n\tbreadcrumbs,\n\ttitle,\n\tactions,\n\tsticky = false,\n\tdensity = \"comfortable\",\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLElement> & {\n\tleading?: ReactNode;\n\tbreadcrumbs?: { href?: string; label: ReactNode }[];\n\ttitle?: ReactNode;\n\tactions?: ReactNode;\n\t/** Keep this row visible in its current scroll owner, including the shell safe area. */\n\tsticky?: boolean;\n\t/** Compact is a 52px row; comfortable is 56px. */\n\tdensity?: \"comfortable\" | \"compact\";\n}) {\n\treturn (\n\t\t<header\n\t\t\tdata-basalt-header=\"\"\n\t\t\tdata-sticky={sticky || undefined}\n\t\t\tdata-density={density}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"flex shrink-0 items-center justify-between gap-basalt-space-lg px-basalt-space-lg md:px-basalt-space-lg\",\n\t\t\t\tdensity === \"compact\" ? \"h-[3.25rem]\" : \"h-basalt-14\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<div className=\"flex min-w-0 items-center gap-basalt-space-lg\">\n\t\t\t\t{leading ? (\n\t\t\t\t\t<div data-basalt-header-leading=\"\" className=\"flex shrink-0 items-center\">\n\t\t\t\t\t\t{leading}\n\t\t\t\t\t</div>\n\t\t\t\t) : null}\n\t\t\t\t<div className=\"flex min-w-0 items-center gap-basalt-space-sm\">\n\t\t\t\t\t{breadcrumbs && breadcrumbs.length > 0 ? (\n\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t<Breadcrumbs items={breadcrumbs} className=\"min-w-0\" />\n\t\t\t\t\t\t\t{title ? (\n\t\t\t\t\t\t\t\t<ChevronRight\n\t\t\t\t\t\t\t\t\tclassName=\"size-basalt-icon-sm shrink-0 text-basalt-muted-foreground\"\n\t\t\t\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t</>\n\t\t\t\t\t) : null}\n\t\t\t\t\t{title ? (\n\t\t\t\t\t\t<h1 className=\"truncate text-basalt-base font-normal text-basalt-foreground\">\n\t\t\t\t\t\t\t{title}\n\t\t\t\t\t\t</h1>\n\t\t\t\t\t) : null}\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t\t{actions ? (\n\t\t\t\t<div\n\t\t\t\t\tdata-basalt-header-actions=\"\"\n\t\t\t\t\tclassName=\"flex shrink-0 items-center gap-basalt-space-sm\"\n\t\t\t\t>\n\t\t\t\t\t{actions}\n\t\t\t\t</div>\n\t\t\t) : null}\n\t\t</header>\n\t);\n}\n"],"mappings":";;;;;;;AAMA,SAAgBC,EAAU,EACzB,YACA,gBACA,UACA,YACA,YAAS,IACT,aAAU,eACV,cACA,GAAGC,KAUD;CACF,OACC,kBAAC,UAAD;EACC,sBAAmB;EACnB,eAAaC,KAAU,KAAA;EACvB,gBAAcC;EACd,WAAWC,EACVC,GACA,2GACAF,MAAY,YAAY,gBAAgB,eACxCG,CACD;EACA,GAAIL;EAVL,UAAA,CAYC,kBAAC,OAAD;GAAK,WAAU;GAAf,UAAA,CACEM,IACA,kBAAC,OAAD;IAAK,8BAA2B;IAAG,WAAU;IAC3C,UAAAA;GACG,CAAA,IACF,MACJ,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACEC,KAAeA,EAAY,SAAS,IACpC,kBAAAT,GAAA,EAAA,UAAA,CACC,kBAACW,GAAD;KAAa,OAAOF;KAAa,WAAU;IAAW,CAAA,GACrDG,IACA,kBAACC,GAAD;KACC,WAAU;KACV,eAAY;IACZ,CAAA,IACE,IACH,EAAA,CAAA,IACC,MACHD,IACA,kBAAC,MAAD;KAAI,WAAU;KACZ,UAAAA;IACE,CAAA,IACD,IACA;GACD,CAAA,CAAA;EACJ,CAAA,GAAAE,IACA,kBAAC,OAAD;GACC,8BAA2B;GAC3B,WAAU;GAET,UAAAA;EACG,CAAA,IACF,IACG;;AAEV"}

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

@@ -1,4 +1,7 @@
 import type { AnchorHTMLAttributes, HTMLAttributes } from "react";
 export declare function AppSkipLink({ href, className, children, ...props }: AnchorHTMLAttributes<HTMLAnchorElement>): import("react").JSX.Element;
-export declare function AppShell({ className, ...props }: HTMLAttributes<HTMLDivElement>): import("react").JSX.Element;
+export declare function AppShell({ layout, className, ...props }: HTMLAttributes<HTMLDivElement> & {
+    /** Scroll owner: bounded panes, document, or document below 768px. */
+    layout?: "workspace" | "document" | "responsive";
+}): import("react").JSX.Element;
 export declare function AppMain({ className, ...props }: HTMLAttributes<HTMLElement>): import("react").JSX.Element;

package/dist/components/app-shell.js

@@ -6,21 +6,24 @@ import { jsx as n } from "react/jsx-runtime";
 function r({ href: r = "#main-content", className: i, children: a, ...o }) {
 	return /* @__PURE__ */ n("a", {
 		href: r,
-		className: e(t, "sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:rounded-lg focus:bg-basalt-primary focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-basalt-primary-foreground", i),
+		className: e(t, "sr-only focus:not-sr-only focus:absolute focus:top-basalt-2 focus:left-basalt-2 focus:z-[100] focus:rounded-basalt-md focus:bg-basalt-primary focus:px-basalt-space-lg focus:py-basalt-space-lg focus:text-basalt-base focus:font-medium focus:text-basalt-primary-foreground", i),
 		...o,
 		children: a
 	});
 }
-function i({ className: t, ...r }) {
+function i({ layout: t = "workspace", className: r, ...i }) {
 	return /* @__PURE__ */ n("div", {
-		className: e("flex h-screen w-full overflow-hidden overscroll-none bg-basalt-background", t),
-		...r
+		"data-basalt-shell": t,
+		className: e("flex w-full bg-basalt-background", r),
+		...i
 	});
 }
 function a({ className: t, ...r }) {
 	return /* @__PURE__ */ n("main", {
 		id: "main-content",
-		className: e("flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden", t),
+		tabIndex: -1,
+		"data-basalt-main": "",
+		className: e("flex min-h-0 min-w-0 flex-1 flex-col", t),
 		...r
 	});
 }

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

@@ -1 +1 @@
-{"version":3,"file":"app-shell.js","names":[],"sources":["../../src/components/app-shell.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, HTMLAttributes } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport function AppSkipLink({\n\thref = \"#main-content\",\n\tclassName,\n\tchildren,\n\t...props\n}: AnchorHTMLAttributes<HTMLAnchorElement>) {\n\treturn (\n\t\t<a\n\t\t\thref={href}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"sr-only focus:not-sr-only focus:absolute focus:top-2 focus:left-2 focus:z-[100] focus:rounded-lg focus:bg-basalt-primary focus:px-4 focus:py-2 focus:text-sm focus:font-medium focus:text-basalt-primary-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</a>\n\t);\n}\n\nexport function AppShell({ className, ...props }: HTMLAttributes<HTMLDivElement>) {\n\treturn (\n\t\t<div\n\t\t\tclassName={cn(\n\t\t\t\t\"flex h-screen w-full overflow-hidden overscroll-none bg-basalt-background\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport function AppMain({ className, ...props }: HTMLAttributes<HTMLElement>) {\n\treturn (\n\t\t<main\n\t\t\tid=\"main-content\"\n\t\t\tclassName={cn(\"flex h-full min-h-0 min-w-0 flex-1 flex-col overflow-hidden\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;AAIA,SAAgB,EAAY,EAC3B,UAAO,iBACP,cACA,aACA,GAAG,KACwC;CAC3C,OACC,kBAAC,KAAD;EACO;EACN,WAAW,EACV,GACA,uNACA,CACD;EACA,GAAI;EAEH;CACC,CAAA;AAEL;AAEA,SAAgB,EAAS,EAAE,cAAW,GAAG,KAAyC;CACjF,OACC,kBAAC,OAAD;EACC,WAAW,EACV,6EACA,CACD;EACA,GAAI;CACJ,CAAA;AAEH;AAEA,SAAgB,EAAQ,EAAE,cAAW,GAAG,KAAsC;CAC7E,OACC,kBAAC,QAAD;EACC,IAAG;EACH,WAAW,EAAG,+DAA+D,CAAS;EACtF,GAAI;CACJ,CAAA;AAEH"}
+{"version":3,"file":"app-shell.js","names":["AppSkipLink","props","cn","BASALT_UI_CLASS","className","AppShell","layout","AppMain"],"sources":["../../src/components/app-shell.tsx"],"sourcesContent":["import type { AnchorHTMLAttributes, HTMLAttributes } from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\n\nexport function AppSkipLink({\n\thref = \"#main-content\",\n\tclassName,\n\tchildren,\n\t...props\n}: AnchorHTMLAttributes<HTMLAnchorElement>) {\n\treturn (\n\t\t<a\n\t\t\thref={href}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\"sr-only focus:not-sr-only focus:absolute focus:top-basalt-2 focus:left-basalt-2 focus:z-[100] focus:rounded-basalt-md focus:bg-basalt-primary focus:px-basalt-space-lg focus:py-basalt-space-lg focus:text-basalt-base focus:font-medium focus:text-basalt-primary-foreground\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children}\n\t\t</a>\n\t);\n}\n\nexport function AppShell({\n\tlayout = \"workspace\",\n\tclassName,\n\t...props\n}: HTMLAttributes<HTMLDivElement> & {\n\t/** Scroll owner: bounded panes, document, or document below 768px. */\n\tlayout?: \"workspace\" | \"document\" | \"responsive\";\n}) {\n\treturn (\n\t\t<div\n\t\t\tdata-basalt-shell={layout}\n\t\t\tclassName={cn(\"flex w-full bg-basalt-background\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport function AppMain({ className, ...props }: HTMLAttributes<HTMLElement>) {\n\treturn (\n\t\t<main\n\t\t\tid=\"main-content\"\n\t\t\ttabIndex={-1}\n\t\t\tdata-basalt-main=\"\"\n\t\t\tclassName={cn(\"flex min-h-0 min-w-0 flex-1 flex-col\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n"],"mappings":";;;;;AAIA,SAAgBA,EAAY,EAC3B,UAAO,iBACP,cACA,aACA,GAAGC,KACwC;CAC3C,OACC,kBAAC,KAAD;EACO;EACN,WAAWC,EACVC,GACA,iRACAC,CACD;EACA,GAAIH;EAEH;CACC,CAAA;AAEL;AAEA,SAAgBI,EAAS,EACxB,YAAS,aACT,cACA,GAAGJ,KAID;CACF,OACC,kBAAC,OAAD;EACC,qBAAmBK;EACnB,WAAWJ,EAAG,oCAAoCE,CAAS;EAC3D,GAAIH;CACJ,CAAA;AAEH;AAEA,SAAgBM,EAAQ,EAAE,cAAW,GAAGN,KAAsC;CAC7E,OACC,kBAAC,QAAD;EACC,IAAG;EACH,UAAU;EACV,oBAAiB;EACjB,WAAWC,EAAG,wCAAwCE,CAAS;EAC/D,GAAIH;CACJ,CAAA;AAEH"}

package/dist/components/approval-card.d.ts

@@ -0,0 +1,13 @@
+import type { ApprovalAnswers, ApprovalQuestion } from "../models/agent-feedback.js";
+export type { ApprovalAnswer, ApprovalAnswers, ApprovalQuestion } from "../models/agent-feedback.js";
+export interface ApprovalCardProps {
+    /** Stable question and option IDs. Remount with a new key for a new request. */
+    questions: readonly ApprovalQuestion[];
+    /** Submit answers; a rejected promise keeps answers and shows retry feedback. */
+    onSubmit: (answers: ApprovalAnswers) => void | Promise<void>;
+    /** Enable automatic progression after a single selection. Never auto-submits. @default true */
+    autoAdvance?: boolean;
+    onDismiss?: () => void;
+    className?: string;
+}
+export declare function ApprovalCard({ className, onDismiss, ...props }: ApprovalCardProps): import("react").JSX.Element;

package/dist/components/approval-card.js

@@ -0,0 +1,161 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Button as t } from "./button.js";
+import { Checkbox as n } from "./checkbox.js";
+import { useHoverHighlight as r } from "../utils/use-hover-highlight.js";
+import { Input as i } from "./input.js";
+import { LayerCard as a } from "./layer-card.js";
+import { useApprovalCardViewModel as o } from "../viewmodels/use-approval-card.js";
+import { Radio as s } from "./radio.js";
+import { useEffect as c, useId as l, useRef as u } from "react";
+import { ChevronLeft as d, X as f } from "lucide-react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+//#region src/components/approval-card.tsx
+function h({ className: h, onDismiss: g, ..._ }) {
+	let v = o(_), y = l(), b = u(null), x = u(null), S = u(null), C = r(b);
+	c(() => {
+		if (!v.focusToken) return;
+		let e = document.activeElement;
+		e instanceof HTMLElement && e !== document.body && e.isConnected && !e.matches(":disabled, [aria-disabled='true']") || (b.current?.querySelector(":is([role=\"radio\"], [role=\"checkbox\"], input):not(:disabled):not([aria-disabled=\"true\"])") ?? x.current)?.focus();
+	}, [v.focusToken]), c(() => {
+		v.status === "submitted" && S.current?.focus();
+	}, [v.status]);
+	let w = v.question;
+	if (!w) return /* @__PURE__ */ p(a, {
+		padding: "sm",
+		className: h,
+		children: /* @__PURE__ */ p("p", {
+			className: "text-basalt-base text-basalt-muted-foreground",
+			children: "No approval questions"
+		})
+	});
+	if (v.status === "submitted") return /* @__PURE__ */ p(a, {
+		padding: "sm",
+		className: h,
+		children: /* @__PURE__ */ p("p", {
+			ref: S,
+			tabIndex: -1,
+			role: "status",
+			className: "text-basalt-base",
+			children: "Answers submitted"
+		})
+	});
+	let T = v.status === "submitting";
+	return /* @__PURE__ */ m(a, {
+		padding: "sm",
+		className: e("w-full space-y-basalt-content-gap px-basalt-panel-x py-basalt-panel-y leading-[var(--basalt-line-body)]", h),
+		children: [
+			/* @__PURE__ */ m("div", {
+				className: "flex items-center justify-between gap-basalt-content-gap",
+				children: [/* @__PURE__ */ p("h3", {
+					ref: x,
+					id: y,
+					tabIndex: -1,
+					className: "text-basalt-base font-medium",
+					"aria-live": "polite",
+					children: w.label
+				}), g && /* @__PURE__ */ p(t, {
+					variant: "ghost",
+					size: "icon",
+					"aria-label": "Dismiss approval",
+					disabled: T,
+					onClick: g,
+					children: /* @__PURE__ */ p(f, {})
+				})]
+			}),
+			/* @__PURE__ */ m("div", {
+				ref: C,
+				className: "basalt-agent-reveal basalt-hover-list -mx-basalt-row-x space-y-basalt-content-gap",
+				children: [w.type === "single" ? /* @__PURE__ */ p(s.Group, {
+					value: v.answer?.selected[0] ?? "",
+					onValueChange: v.choose,
+					disabled: T,
+					"aria-labelledby": y,
+					className: "gap-basalt-space-xs",
+					children: w.options.map((e) => /* @__PURE__ */ m("label", {
+						"data-basalt-hover-item": "",
+						"data-hover-selected": v.answer?.selected.includes(e.id),
+						"data-disabled": e.disabled || T ? "" : void 0,
+						htmlFor: `${y}-${e.id}`,
+						className: "flex cursor-pointer items-center gap-basalt-row-gap rounded-basalt-sm px-basalt-row-x py-basalt-row-y text-basalt-code leading-basalt-row",
+						children: [/* @__PURE__ */ p(s.Item, {
+							id: `${y}-${e.id}`,
+							value: e.id,
+							disabled: e.disabled
+						}), e.label]
+					}, e.id))
+				}) : /* @__PURE__ */ p("fieldset", {
+					disabled: T,
+					"aria-labelledby": y,
+					className: "space-y-basalt-space-xs",
+					children: w.options.map((e) => /* @__PURE__ */ m("label", {
+						"data-basalt-hover-item": "",
+						"data-hover-selected": v.answer?.selected.includes(e.id),
+						"data-disabled": e.disabled || T ? "" : void 0,
+						htmlFor: `${y}-${e.id}`,
+						className: "flex cursor-pointer items-center gap-basalt-row-gap rounded-basalt-sm px-basalt-row-x py-basalt-row-y text-basalt-code leading-basalt-row",
+						children: [/* @__PURE__ */ p(n, {
+							id: `${y}-${e.id}`,
+							checked: v.answer?.selected.includes(e.id) ?? !1,
+							onCheckedChange: () => v.choose(e.id),
+							disabled: e.disabled
+						}), e.label]
+					}, e.id))
+				}), w.allowCustom && /* @__PURE__ */ p(i, {
+					"aria-label": "Custom answer",
+					placeholder: "Something else...",
+					className: "ml-basalt-row-x w-[calc(100%-2*var(--basalt-space-row-x))]",
+					value: v.answer?.custom ?? "",
+					disabled: T,
+					onChange: (e) => v.setCustom(e.target.value)
+				})]
+			}, w.id),
+			v.error && /* @__PURE__ */ p("p", {
+				role: "alert",
+				className: "text-basalt-sm text-basalt-danger",
+				children: v.error
+			}),
+			/* @__PURE__ */ m("div", {
+				className: "flex items-center justify-between gap-basalt-content-gap border-t border-basalt-border pt-basalt-space-lg",
+				children: [/* @__PURE__ */ m("div", {
+					className: "flex items-center gap-basalt-content-gap",
+					children: [/* @__PURE__ */ p(t, {
+						variant: "ghost",
+						size: "icon",
+						className: "-ml-[calc((var(--basalt-size-action)-var(--basalt-size-icon))/2)]",
+						"aria-label": "Previous question",
+						disabled: T || v.position === 0,
+						onClick: () => v.move(v.position - 1),
+						children: /* @__PURE__ */ p(d, {})
+					}), /* @__PURE__ */ m("span", {
+						className: "text-basalt-sm tabular-nums text-basalt-muted-foreground",
+						children: [
+							v.position + 1,
+							" / ",
+							_.questions.length
+						]
+					})]
+				}), /* @__PURE__ */ m("div", {
+					className: "flex gap-basalt-content-gap",
+					children: [w.required === !1 && /* @__PURE__ */ p(t, {
+						variant: "ghost",
+						size: "sm",
+						disabled: T,
+						onClick: v.skip,
+						children: "Skip"
+					}), /* @__PURE__ */ p(t, {
+						size: "sm",
+						loading: T,
+						disabled: !v.canContinue || T,
+						onClick: v.continue,
+						children: v.last ? "Submit" : "Continue"
+					})]
+				})]
+			})
+		]
+	});
+}
+//#endregion
+export { h as ApprovalCard };
+
+//# sourceMappingURL=approval-card.js.map

package/dist/components/approval-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"approval-card.js","names":["ApprovalCard","props","vm","useApprovalCardViewModel","id","useId","options","useRef","heading","submitted","highlightRef","useHoverHighlight","useEffect","active","question","LayerCard","busy","cn","className","onDismiss","Button","X","Radio","option","Checkbox","Input","event","ChevronLeft"],"sources":["../../src/components/approval-card.tsx"],"sourcesContent":["import { ChevronLeft, X } from \"lucide-react\";\nimport { useEffect, useId, useRef } from \"react\";\nimport type { ApprovalAnswers, ApprovalQuestion } from \"../models/agent-feedback\";\nimport { cn } from \"../utils/cn\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\nimport { useApprovalCardViewModel } from \"../viewmodels/use-approval-card\";\nimport { Button } from \"./button\";\nimport { Checkbox } from \"./checkbox\";\nimport { Input } from \"./input\";\nimport { LayerCard } from \"./layer-card\";\nimport { Radio } from \"./radio\";\n\nexport type { ApprovalAnswer, ApprovalAnswers, ApprovalQuestion } from \"../models/agent-feedback\";\nexport interface ApprovalCardProps {\n\t/** Stable question and option IDs. Remount with a new key for a new request. */\n\tquestions: readonly ApprovalQuestion[];\n\t/** Submit answers; a rejected promise keeps answers and shows retry feedback. */\n\tonSubmit: (answers: ApprovalAnswers) => void | Promise<void>;\n\t/** Enable automatic progression after a single selection. Never auto-submits. @default true */\n\tautoAdvance?: boolean;\n\tonDismiss?: () => void;\n\tclassName?: string;\n}\n\nexport function ApprovalCard({ className, onDismiss, ...props }: ApprovalCardProps) {\n\tconst vm = useApprovalCardViewModel(props);\n\tconst id = useId();\n\tconst options = useRef<HTMLDivElement | null>(null);\n\tconst heading = useRef<HTMLHeadingElement | null>(null);\n\tconst submitted = useRef<HTMLParagraphElement | null>(null);\n\tconst highlightRef = useHoverHighlight(options);\n\tuseEffect(() => {\n\t\tif (!vm.focusToken) return;\n\t\tconst active = document.activeElement;\n\t\t// A control the user is still holding stays put; a removed or disabled one hands off to the question.\n\t\tif (\n\t\t\tactive instanceof HTMLElement &&\n\t\t\tactive !== document.body &&\n\t\t\tactive.isConnected &&\n\t\t\t!active.matches(\":disabled, [aria-disabled='true']\")\n\t\t)\n\t\t\treturn;\n\t\tconst answer = options.current?.querySelector<HTMLElement>(\n\t\t\t':is([role=\"radio\"], [role=\"checkbox\"], input):not(:disabled):not([aria-disabled=\"true\"])',\n\t\t);\n\t\t(answer ?? heading.current)?.focus();\n\t}, [vm.focusToken]);\n\tuseEffect(() => {\n\t\tif (vm.status === \"submitted\") submitted.current?.focus();\n\t}, [vm.status]);\n\tconst question = vm.question;\n\tif (!question)\n\t\treturn (\n\t\t\t<LayerCard padding=\"sm\" className={className}>\n\t\t\t\t<p className=\"text-basalt-base text-basalt-muted-foreground\">No approval questions</p>\n\t\t\t</LayerCard>\n\t\t);\n\tif (vm.status === \"submitted\")\n\t\treturn (\n\t\t\t<LayerCard padding=\"sm\" className={className}>\n\t\t\t\t<p ref={submitted} tabIndex={-1} role=\"status\" className=\"text-basalt-base\">\n\t\t\t\t\tAnswers submitted\n\t\t\t\t</p>\n\t\t\t</LayerCard>\n\t\t);\n\tconst busy = vm.status === \"submitting\";\n\treturn (\n\t\t<LayerCard\n\t\t\tpadding=\"sm\"\n\t\t\tclassName={cn(\n\t\t\t\t\"w-full space-y-basalt-content-gap px-basalt-panel-x py-basalt-panel-y leading-[var(--basalt-line-body)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<div className=\"flex items-center justify-between gap-basalt-content-gap\">\n\t\t\t\t<h3\n\t\t\t\t\tref={heading}\n\t\t\t\t\tid={id}\n\t\t\t\t\ttabIndex={-1}\n\t\t\t\t\tclassName=\"text-basalt-base font-medium\"\n\t\t\t\t\taria-live=\"polite\"\n\t\t\t\t>\n\t\t\t\t\t{question.label}\n\t\t\t\t</h3>\n\t\t\t\t{onDismiss && (\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\taria-label=\"Dismiss approval\"\n\t\t\t\t\t\tdisabled={busy}\n\t\t\t\t\t\tonClick={onDismiss}\n\t\t\t\t\t>\n\t\t\t\t\t\t<X />\n\t\t\t\t\t</Button>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t<div\n\t\t\t\tkey={question.id}\n\t\t\t\tref={highlightRef}\n\t\t\t\tclassName=\"basalt-agent-reveal basalt-hover-list -mx-basalt-row-x space-y-basalt-content-gap\"\n\t\t\t>\n\t\t\t\t{question.type === \"single\" ? (\n\t\t\t\t\t<Radio.Group\n\t\t\t\t\t\tvalue={vm.answer?.selected[0] ?? \"\"}\n\t\t\t\t\t\tonValueChange={vm.choose}\n\t\t\t\t\t\tdisabled={busy}\n\t\t\t\t\t\taria-labelledby={id}\n\t\t\t\t\t\tclassName=\"gap-basalt-space-xs\"\n\t\t\t\t\t>\n\t\t\t\t\t\t{question.options.map((option) => (\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\tdata-basalt-hover-item=\"\"\n\t\t\t\t\t\t\t\tdata-hover-selected={vm.answer?.selected.includes(option.id)}\n\t\t\t\t\t\t\t\tdata-disabled={option.disabled || busy ? \"\" : undefined}\n\t\t\t\t\t\t\t\thtmlFor={`${id}-${option.id}`}\n\t\t\t\t\t\t\t\tclassName=\"flex cursor-pointer items-center gap-basalt-row-gap rounded-basalt-sm px-basalt-row-x py-basalt-row-y text-basalt-code leading-basalt-row\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Radio.Item\n\t\t\t\t\t\t\t\t\tid={`${id}-${option.id}`}\n\t\t\t\t\t\t\t\t\tvalue={option.id}\n\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</Radio.Group>\n\t\t\t\t) : (\n\t\t\t\t\t<fieldset disabled={busy} aria-labelledby={id} className=\"space-y-basalt-space-xs\">\n\t\t\t\t\t\t{question.options.map((option) => (\n\t\t\t\t\t\t\t<label\n\t\t\t\t\t\t\t\tkey={option.id}\n\t\t\t\t\t\t\t\tdata-basalt-hover-item=\"\"\n\t\t\t\t\t\t\t\tdata-hover-selected={vm.answer?.selected.includes(option.id)}\n\t\t\t\t\t\t\t\tdata-disabled={option.disabled || busy ? \"\" : undefined}\n\t\t\t\t\t\t\t\thtmlFor={`${id}-${option.id}`}\n\t\t\t\t\t\t\t\tclassName=\"flex cursor-pointer items-center gap-basalt-row-gap rounded-basalt-sm px-basalt-row-x py-basalt-row-y text-basalt-code leading-basalt-row\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<Checkbox\n\t\t\t\t\t\t\t\t\tid={`${id}-${option.id}`}\n\t\t\t\t\t\t\t\t\tchecked={vm.answer?.selected.includes(option.id) ?? false}\n\t\t\t\t\t\t\t\t\tonCheckedChange={() => vm.choose(option.id)}\n\t\t\t\t\t\t\t\t\tdisabled={option.disabled}\n\t\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t\t\t{option.label}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t))}\n\t\t\t\t\t</fieldset>\n\t\t\t\t)}\n\t\t\t\t{question.allowCustom && (\n\t\t\t\t\t<Input\n\t\t\t\t\t\taria-label=\"Custom answer\"\n\t\t\t\t\t\tplaceholder=\"Something else...\"\n\t\t\t\t\t\tclassName=\"ml-basalt-row-x w-[calc(100%-2*var(--basalt-space-row-x))]\"\n\t\t\t\t\t\tvalue={vm.answer?.custom ?? \"\"}\n\t\t\t\t\t\tdisabled={busy}\n\t\t\t\t\t\tonChange={(event) => vm.setCustom(event.target.value)}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t\t{vm.error && (\n\t\t\t\t<p role=\"alert\" className=\"text-basalt-sm text-basalt-danger\">\n\t\t\t\t\t{vm.error}\n\t\t\t\t</p>\n\t\t\t)}\n\t\t\t<div className=\"flex items-center justify-between gap-basalt-content-gap border-t border-basalt-border pt-basalt-space-lg\">\n\t\t\t\t<div className=\"flex items-center gap-basalt-content-gap\">\n\t\t\t\t\t<Button\n\t\t\t\t\t\tvariant=\"ghost\"\n\t\t\t\t\t\tsize=\"icon\"\n\t\t\t\t\t\tclassName=\"-ml-[calc((var(--basalt-size-action)-var(--basalt-size-icon))/2)]\"\n\t\t\t\t\t\taria-label=\"Previous question\"\n\t\t\t\t\t\tdisabled={busy || vm.position === 0}\n\t\t\t\t\t\tonClick={() => vm.move(vm.position - 1)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<ChevronLeft />\n\t\t\t\t\t</Button>\n\t\t\t\t\t<span className=\"text-basalt-sm tabular-nums text-basalt-muted-foreground\">\n\t\t\t\t\t\t{vm.position + 1} / {props.questions.length}\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t\t<div className=\"flex gap-basalt-content-gap\">\n\t\t\t\t\t{question.required === false && (\n\t\t\t\t\t\t<Button variant=\"ghost\" size=\"sm\" disabled={busy} onClick={vm.skip}>\n\t\t\t\t\t\t\tSkip\n\t\t\t\t\t\t</Button>\n\t\t\t\t\t)}\n\t\t\t\t\t<Button size=\"sm\" loading={busy} disabled={!vm.canContinue || busy} onClick={vm.continue}>\n\t\t\t\t\t\t{vm.last ? \"Submit\" : \"Continue\"}\n\t\t\t\t\t</Button>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t</LayerCard>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;;AAwBA,SAAgBA,EAAa,EAAE,cAAW,cAAW,GAAGC,KAA4B;CACnF,IAAMC,IAAKC,EAAyBF,CAAK,GACnCG,IAAKC,EAAM,GACXC,IAAUC,EAA8B,IAAI,GAC5CC,IAAUD,EAAkC,IAAI,GAChDE,IAAYF,EAAoC,IAAI,GACpDG,IAAeC,EAAkBL,CAAO;CAiB9C,AAhBAM,QAAgB;EACf,IAAI,CAACV,EAAG,YAAY;EACpB,IAAMW,IAAS,SAAS;EAExB,AACCA,aAAkB,eAClBA,MAAW,SAAS,QACpBA,EAAO,eACP,CAACA,EAAO,QAAQ,mCAAmC,MAGrCP,EAAQ,SAAS,cAC/B,gGACD,KACWE,EAAQ,QAAA,EAAU,MAAM;CACpC,GAAG,CAACN,EAAG,UAAU,CAAC,GAClBU,QAAgB;EACf,AAAIV,EAAG,WAAW,eAAaO,EAAU,SAAS,MAAM;CACzD,GAAG,CAACP,EAAG,MAAM,CAAC;CACd,IAAMY,IAAWZ,EAAG;CACpB,IAAI,CAACY,GACJ,OACC,kBAACC,GAAD;EAAW,SAAQ;EAAgB;EAClC,UAAA,kBAAC,KAAD;GAAG,WAAU;GAAgD,UAAA;EAAwB,CAAA;CAC3E,CAAA;CAEb,IAAIb,EAAG,WAAW,aACjB,OACC,kBAACa,GAAD;EAAW,SAAQ;EAAgB;EAClC,UAAA,kBAAC,KAAD;GAAG,KAAKN;GAAW,UAAU;GAAI,MAAK;GAAS,WAAU;GAAmB,UAAA;EAEzE,CAAA;CACO,CAAA;CAEb,IAAMO,IAAOd,EAAG,WAAW;CAC3B,OACC,kBAACa,GAAD;EACC,SAAQ;EACR,WAAWE,EACV,2GACAC,CACD;EALD,UAAA;GAOC,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,MAAD;KACC,KAAKV;KACD;KACJ,UAAU;KACV,WAAU;KACV,aAAU;KAET,UAAAM,EAAS;IACP,CAAA,GACHK,KACA,kBAACC,GAAD;KACC,SAAQ;KACR,MAAK;KACL,cAAW;KACX,UAAUJ;KACV,SAASG;KAET,UAAA,kBAACE,GAAD,CAAI,CAAA;IACG,CAAA,CAEL;;GACL,kBAAC,OAAD;IAEC,KAAKX;IACL,WAAU;IAHX,UAAA,CAKEI,EAAS,SAAS,WAClB,kBAACQ,EAAM,OAAP;KACC,OAAOpB,EAAG,QAAQ,SAAS,MAAM;KACjC,eAAeA,EAAG;KAClB,UAAUc;KACV,mBAAiBZ;KACjB,WAAU;KAET,UAAAU,EAAS,QAAQ,KAAK,MACtB,kBAAC,SAAD;MAEC,0BAAuB;MACvB,uBAAqBZ,EAAG,QAAQ,SAAS,SAASqB,EAAO,EAAE;MAC3D,iBAAeA,EAAO,YAAYP,IAAO,KAAK,KAAA;MAC9C,SAAS,GAAGZ,EAAG,GAAGmB,EAAO;MACzB,WAAU;MANX,UAAA,CAQC,kBAACD,EAAM,MAAP;OACC,IAAI,GAAGlB,EAAG,GAAGmB,EAAO;OACpB,OAAOA,EAAO;OACd,UAAUA,EAAO;MACjB,CAAA,GACAA,EAAO,KACF;KAbD,GAAAA,EAAO,EAaN,CACP;IACW,CAAA,IAEb,kBAAC,YAAD;KAAU,UAAUP;KAAM,mBAAiBZ;KAAI,WAAU;KACvD,UAAAU,EAAS,QAAQ,KAAK,MACtB,kBAAC,SAAD;MAEC,0BAAuB;MACvB,uBAAqBZ,EAAG,QAAQ,SAAS,SAASqB,EAAO,EAAE;MAC3D,iBAAeA,EAAO,YAAYP,IAAO,KAAK,KAAA;MAC9C,SAAS,GAAGZ,EAAG,GAAGmB,EAAO;MACzB,WAAU;MANX,UAAA,CAQC,kBAACC,GAAD;OACC,IAAI,GAAGpB,EAAG,GAAGmB,EAAO;OACpB,SAASrB,EAAG,QAAQ,SAAS,SAASqB,EAAO,EAAE,KAAK;OACpD,uBAAuBrB,EAAG,OAAOqB,EAAO,EAAE;OAC1C,UAAUA,EAAO;MACjB,CAAA,GACAA,EAAO,KACF;KAdD,GAAAA,EAAO,EAcN,CACP;IACQ,CAAA,GAEVT,EAAS,eACT,kBAACW,GAAD;KACC,cAAW;KACX,aAAY;KACZ,WAAU;KACV,OAAOvB,EAAG,QAAQ,UAAU;KAC5B,UAAUc;KACV,WAAW,MAAUd,EAAG,UAAUwB,EAAM,OAAO,KAAK;IACpD,CAAA,CAEE;GA9DC,GAAAZ,EAAS,EA8DV;GACJZ,EAAG,SACH,kBAAC,KAAD;IAAG,MAAK;IAAQ,WAAU;IACxB,UAAAA,EAAG;GACF,CAAA;GAEJ,kBAAC,OAAD;IAAK,WAAU;IAAf,UAAA,CACC,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACC,kBAACkB,GAAD;MACC,SAAQ;MACR,MAAK;MACL,WAAU;MACV,cAAW;MACX,UAAUJ,KAAQd,EAAG,aAAa;MAClC,eAAeA,EAAG,KAAKA,EAAG,WAAW,CAAC;MAEtC,UAAA,kBAACyB,GAAD,CAAc,CAAA;KACP,CAAA,GACR,kBAAC,QAAD;MAAM,WAAU;MAAhB,UAAA;OACEzB,EAAG,WAAW;OAAE;OAAID,EAAM,UAAU;MAChC;KACF,CAAA,CAAA;IACL,CAAA,GAAA,kBAAC,OAAD;KAAK,WAAU;KAAf,UAAA,CACEa,EAAS,aAAa,MACtB,kBAACM,GAAD;MAAQ,SAAQ;MAAQ,MAAK;MAAK,UAAUJ;MAAM,SAASd,EAAG;MAAM,UAAA;KAE5D,CAAA,GAET,kBAACkB,GAAD;MAAQ,MAAK;MAAK,SAASJ;MAAM,UAAU,CAACd,EAAG,eAAec;MAAM,SAASd,EAAG;MAC9E,UAAAA,EAAG,OAAO,WAAW;KACf,CAAA,CACJ;IACD,CAAA,CAAA;;EACK;;AAEb"}

package/dist/components/autocomplete.js.map

@@ -1 +1 @@
-{"version":3,"file":"autocomplete.js","names":[],"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport type { InputSize } from \"./input\";\nimport { TypeaheadField, type TypeaheadItem } from \"./typeahead-field\";\n\nexport type AutocompleteItem = TypeaheadItem;\n\nexport type AutocompleteProps = Omit<\n\tComponentPropsWithoutRef<\"div\">,\n\t\"children\" | \"defaultValue\" | \"onChange\"\n> & {\n\t/**\n\t * Suggestions shown as the query matches. Values outside the list are allowed.\n\t *\n\t * Note: When focus leaves the field (via pointer click or Tab/Shift+Tab navigation),\n\t * any uncommitted text or matching suggestion is committed once without stealing focus\n\t * back to the input, allowing natural focus traversal.\n\t */\n\titems: AutocompleteItem[];\n\t/**\n\t * The controlled value.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the value changes, including freeform text.\n\t */\n\tonValueChange?: (value: string) => void;\n\t/**\n\t * Native form field name.\n\t */\n\tname?: string;\n\t/**\n\t * Placeholder shown when the field is empty.\n\t * @default Search…\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Disable the field.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Disable the field and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n};\n\nexport function Autocomplete({ placeholder = \"Search…\", ...rest }: AutocompleteProps) {\n\treturn <TypeaheadField placeholder={placeholder} allowFreeform {...rest} />;\n}\n"],"mappings":";;;;AAwDA,SAAgB,EAAa,EAAE,iBAAc,WAAW,GAAG,KAA2B;CACrF,OAAO,kBAAC,GAAD;EAA6B;EAAa,eAAA;EAAc,GAAI;CAAO,CAAA;AAC3E"}
+{"version":3,"file":"autocomplete.js","names":["Autocomplete","rest","TypeaheadField"],"sources":["../../src/components/autocomplete.tsx"],"sourcesContent":["import type { ComponentPropsWithoutRef } from \"react\";\nimport type { InputSize } from \"./input\";\nimport { TypeaheadField, type TypeaheadItem } from \"./typeahead-field\";\n\nexport type AutocompleteItem = TypeaheadItem;\n\nexport type AutocompleteProps = Omit<\n\tComponentPropsWithoutRef<\"div\">,\n\t\"children\" | \"defaultValue\" | \"onChange\"\n> & {\n\t/**\n\t * Suggestions shown as the query matches. Values outside the list are allowed.\n\t *\n\t * Note: When focus leaves the field (via pointer click or Tab/Shift+Tab navigation),\n\t * any uncommitted text or matching suggestion is committed once without stealing focus\n\t * back to the input, allowing natural focus traversal.\n\t */\n\titems: AutocompleteItem[];\n\t/**\n\t * The controlled value.\n\t */\n\tvalue?: string;\n\t/**\n\t * The uncontrolled initial value.\n\t */\n\tdefaultValue?: string;\n\t/**\n\t * Called when the value changes, including freeform text.\n\t */\n\tonValueChange?: (value: string) => void;\n\t/**\n\t * Native form field name.\n\t */\n\tname?: string;\n\t/**\n\t * Placeholder shown when the field is empty.\n\t * @default Search…\n\t */\n\tplaceholder?: string;\n\t/**\n\t * Disable the field.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n\t/**\n\t * Disable the field and mark it busy.\n\t * @default false\n\t */\n\tloading?: boolean;\n\t/**\n\t * The visual size of the field.\n\t * @default default\n\t */\n\tsize?: InputSize;\n};\n\nexport function Autocomplete({ placeholder = \"Search…\", ...rest }: AutocompleteProps) {\n\treturn <TypeaheadField placeholder={placeholder} allowFreeform {...rest} />;\n}\n"],"mappings":";;;;AAwDA,SAAgBA,EAAa,EAAE,iBAAc,WAAW,GAAGC,KAA2B;CACrF,OAAO,kBAACC,GAAD;EAA6B;EAAa,eAAA;EAAc,GAAID;CAAO,CAAA;AAC3E"}

package/dist/components/avatar.d.ts

@@ -76,3 +76,15 @@ export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<Omit<A
      */
     delayMs?: number;
 } & React.RefAttributes<HTMLSpanElement>>;
+export interface AvatarInitialsProps {
+    /** Person or organization name; initials are derived from its first two words. */
+    name: string;
+    /** Stable color identity, independent of display name changes. */
+    colorKey?: string;
+    /** Two-letter override for application-specific abbreviations. */
+    initials?: string;
+    /** Avatar diameter. @default "default" */
+    size?: "sm" | "default";
+    className?: string;
+}
+export declare function AvatarInitials({ name, colorKey, initials, size, className, }: AvatarInitialsProps): React.JSX.Element;

package/dist/components/avatar.js

@@ -1,28 +1,49 @@
 "use client";
 import { cn as e } from "../utils/cn.js";
-import * as t from "react";
-import { jsx as n } from "react/jsx-runtime";
-import * as r from "@radix-ui/react-avatar";
+import { avatarColorIndex as t, avatarInitials as n } from "../models/avatar.js";
+import { TAG_COLORS as r } from "./tag-badge.js";
+import * as i from "react";
+import { jsx as a } from "react/jsx-runtime";
+import * as o from "@radix-ui/react-avatar";
 //#region src/components/avatar.tsx
-var i = t.forwardRef(({ className: t, ...i }, a) => /* @__PURE__ */ n(r.Root, {
-	ref: a,
-	className: e("relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full", t),
-	...i
+var s = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a(o.Root, {
+	ref: r,
+	className: e("relative flex h-basalt-9 w-basalt-9 shrink-0 overflow-hidden rounded-basalt-full", t),
+	...n
 }));
-i.displayName = r.Root.displayName;
-var a = t.forwardRef(({ className: t, ...i }, a) => /* @__PURE__ */ n(r.Image, {
-	ref: a,
+s.displayName = o.Root.displayName;
+var c = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a(o.Image, {
+	ref: r,
 	className: e("aspect-square h-full w-full", t),
-	...i
+	...n
 }));
-a.displayName = r.Image.displayName;
-var o = t.forwardRef(({ className: t, ...i }, a) => /* @__PURE__ */ n(r.Fallback, {
-	ref: a,
-	className: e("flex h-full w-full items-center justify-center rounded-full bg-basalt-muted text-xs", t),
-	...i
+c.displayName = o.Image.displayName;
+var l = i.forwardRef(({ className: t, ...n }, r) => /* @__PURE__ */ a(o.Fallback, {
+	ref: r,
+	className: e("flex h-full w-full items-center justify-center rounded-basalt-full bg-basalt-muted text-basalt-sm", t),
+	...n
 }));
-o.displayName = r.Fallback.displayName;
+l.displayName = o.Fallback.displayName;
+var u = [
+	r.blue.className,
+	r.amber.className,
+	r.rose.className,
+	r.teal.className,
+	r.violet.className,
+	r.success.className
+];
+function d({ name: r, colorKey: i, initials: o, size: c = "default", className: d }) {
+	return /* @__PURE__ */ a(s, {
+		role: "img",
+		"aria-label": r,
+		className: e(c === "sm" && "size-basalt-6", d),
+		children: /* @__PURE__ */ a(l, {
+			className: e("font-medium", c === "sm" ? "text-basalt-xs" : "text-basalt-sm", u[t(i ?? r)]),
+			children: o?.trim() ? Array.from(o.trim().toLocaleUpperCase("en-US")).slice(0, 2).join("") : n(r)
+		})
+	});
+}
 //#endregion
-export { i as Avatar, o as AvatarFallback, a as AvatarImage };
+export { s as Avatar, l as AvatarFallback, c as AvatarImage, d as AvatarInitials };
 
 //# sourceMappingURL=avatar.js.map

package/dist/components/avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"avatar.js","names":[],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\n\nexport type AvatarProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n\t\"asChild\"\n> & {\n\t/**\n\t * Change the default rendered element for the one passed as a child, merging their props and behavior.\n\t * @default false\n\t */\n\tasChild?: boolean;\n};\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n\t({ className, ...props }, ref) => (\n\t\t<AvatarPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\"relative flex h-9 w-9 shrink-0 overflow-hidden rounded-full\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\nexport type AvatarImageProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>,\n\t\"asChild\" | \"onLoadingStatusChange\" | \"src\" | \"alt\"\n> & {\n\t/**\n\t * Change the default rendered element for the one passed as a child, merging their props and behavior.\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Image source URL for the avatar image.\n\t */\n\tsrc?: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>[\"src\"];\n\t/**\n\t * Text description of the image for accessibility and screen readers.\n\t */\n\talt?: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>[\"alt\"];\n\t/**\n\t * A callback providing the current loading status of the image ('idle' | 'loading' | 'loaded' | 'error').\n\t */\n\tonLoadingStatusChange?: React.ComponentPropsWithoutRef<\n\t\ttypeof AvatarPrimitive.Image\n\t>[\"onLoadingStatusChange\"];\n};\n\nexport const AvatarImage = React.forwardRef<\n\tReact.ElementRef<typeof AvatarPrimitive.Image>,\n\tAvatarImageProps\n>(({ className, ...props }, ref) => (\n\t<AvatarPrimitive.Image\n\t\tref={ref}\n\t\tclassName={cn(\"aspect-square h-full w-full\", className)}\n\t\t{...props}\n\t/>\n));\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nexport type AvatarFallbackProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>,\n\t\"asChild\" | \"delayMs\"\n> & {\n\t/**\n\t * Change the default rendered element for the one passed as a child, merging their props and behavior.\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Useful for delaying rendering so it only appears for those with slower connections.\n\t * Unset by default, rendering immediately without delay.\n\t */\n\tdelayMs?: number;\n};\n\nexport const AvatarFallback = React.forwardRef<\n\tReact.ElementRef<typeof AvatarPrimitive.Fallback>,\n\tAvatarFallbackProps\n>(({ className, ...props }, ref) => (\n\t<AvatarPrimitive.Fallback\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-full w-full items-center justify-center rounded-full bg-basalt-muted text-xs\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n"],"mappings":";;;;;;AAeA,IAAa,IAAS,EAAM,YAC1B,EAAE,cAAW,GAAG,KAAS,MACzB,kBAAC,EAAgB,MAAjB;CACM;CACL,WAAW,EAAG,+DAA+D,CAAS;CACtF,GAAI;AACJ,CAAA,CAEH;AACA,EAAO,cAAc,EAAgB,KAAK;AA2B1C,IAAa,IAAc,EAAM,YAG9B,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,OAAjB;CACM;CACL,WAAW,EAAG,+BAA+B,CAAS;CACtD,GAAI;AACJ,CAAA,CACD;AACD,EAAY,cAAc,EAAgB,MAAM;AAkBhD,IAAa,IAAiB,EAAM,YAGjC,EAAE,cAAW,GAAG,KAAS,MAC3B,kBAAC,EAAgB,UAAjB;CACM;CACL,WAAW,EACV,uFACA,CACD;CACA,GAAI;AACJ,CAAA,CACD;AACD,EAAe,cAAc,EAAgB,SAAS"}
+{"version":3,"file":"avatar.js","names":["React","AvatarPrimitive","Avatar","props","cn","className","AvatarImage","AvatarFallback","AVATAR_TONES","TAG_COLORS","AvatarInitials","name","size","avatarColorIndex","colorKey","initials","avatarInitials"],"sources":["../../src/components/avatar.tsx"],"sourcesContent":["import * as AvatarPrimitive from \"@radix-ui/react-avatar\";\nimport * as React from \"react\";\nimport { avatarColorIndex, avatarInitials } from \"../models/avatar\";\nimport { cn } from \"../utils/cn\";\nimport { TAG_COLORS } from \"./tag-badge\";\n\nexport type AvatarProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,\n\t\"asChild\"\n> & {\n\t/**\n\t * Change the default rendered element for the one passed as a child, merging their props and behavior.\n\t * @default false\n\t */\n\tasChild?: boolean;\n};\n\nexport const Avatar = React.forwardRef<React.ElementRef<typeof AvatarPrimitive.Root>, AvatarProps>(\n\t({ className, ...props }, ref) => (\n\t\t<AvatarPrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative flex h-basalt-9 w-basalt-9 shrink-0 overflow-hidden rounded-basalt-full\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nAvatar.displayName = AvatarPrimitive.Root.displayName;\n\nexport type AvatarImageProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>,\n\t\"asChild\" | \"onLoadingStatusChange\" | \"src\" | \"alt\"\n> & {\n\t/**\n\t * Change the default rendered element for the one passed as a child, merging their props and behavior.\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Image source URL for the avatar image.\n\t */\n\tsrc?: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>[\"src\"];\n\t/**\n\t * Text description of the image for accessibility and screen readers.\n\t */\n\talt?: React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>[\"alt\"];\n\t/**\n\t * A callback providing the current loading status of the image ('idle' | 'loading' | 'loaded' | 'error').\n\t */\n\tonLoadingStatusChange?: React.ComponentPropsWithoutRef<\n\t\ttypeof AvatarPrimitive.Image\n\t>[\"onLoadingStatusChange\"];\n};\n\nexport const AvatarImage = React.forwardRef<\n\tReact.ElementRef<typeof AvatarPrimitive.Image>,\n\tAvatarImageProps\n>(({ className, ...props }, ref) => (\n\t<AvatarPrimitive.Image\n\t\tref={ref}\n\t\tclassName={cn(\"aspect-square h-full w-full\", className)}\n\t\t{...props}\n\t/>\n));\nAvatarImage.displayName = AvatarPrimitive.Image.displayName;\n\nexport type AvatarFallbackProps = Omit<\n\tReact.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>,\n\t\"asChild\" | \"delayMs\"\n> & {\n\t/**\n\t * Change the default rendered element for the one passed as a child, merging their props and behavior.\n\t * @default false\n\t */\n\tasChild?: boolean;\n\t/**\n\t * Useful for delaying rendering so it only appears for those with slower connections.\n\t * Unset by default, rendering immediately without delay.\n\t */\n\tdelayMs?: number;\n};\n\nexport const AvatarFallback = React.forwardRef<\n\tReact.ElementRef<typeof AvatarPrimitive.Fallback>,\n\tAvatarFallbackProps\n>(({ className, ...props }, ref) => (\n\t<AvatarPrimitive.Fallback\n\t\tref={ref}\n\t\tclassName={cn(\n\t\t\t\"flex h-full w-full items-center justify-center rounded-basalt-full bg-basalt-muted text-basalt-sm\",\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n));\nAvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;\n\nconst AVATAR_TONES = [\n\tTAG_COLORS.blue.className,\n\tTAG_COLORS.amber.className,\n\tTAG_COLORS.rose.className,\n\tTAG_COLORS.teal.className,\n\tTAG_COLORS.violet.className,\n\tTAG_COLORS.success.className,\n] as const;\n\nexport interface AvatarInitialsProps {\n\t/** Person or organization name; initials are derived from its first two words. */\n\tname: string;\n\t/** Stable color identity, independent of display name changes. */\n\tcolorKey?: string;\n\t/** Two-letter override for application-specific abbreviations. */\n\tinitials?: string;\n\t/** Avatar diameter. @default \"default\" */\n\tsize?: \"sm\" | \"default\";\n\tclassName?: string;\n}\n\nexport function AvatarInitials({\n\tname,\n\tcolorKey,\n\tinitials,\n\tsize = \"default\",\n\tclassName,\n}: AvatarInitialsProps) {\n\treturn (\n\t\t<Avatar\n\t\t\trole=\"img\"\n\t\t\taria-label={name}\n\t\t\tclassName={cn(size === \"sm\" && \"size-basalt-6\", className)}\n\t\t>\n\t\t\t<AvatarFallback\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"font-medium\",\n\t\t\t\t\tsize === \"sm\" ? \"text-basalt-xs\" : \"text-basalt-sm\",\n\t\t\t\t\tAVATAR_TONES[avatarColorIndex(colorKey ?? name)],\n\t\t\t\t)}\n\t\t\t>\n\t\t\t\t{initials?.trim()\n\t\t\t\t\t? Array.from(initials.trim().toLocaleUpperCase(\"en-US\")).slice(0, 2).join(\"\")\n\t\t\t\t\t: avatarInitials(name)}\n\t\t\t</AvatarFallback>\n\t\t</Avatar>\n\t);\n}\n"],"mappings":";;;;;;;;AAiBA,IAAaE,IAASF,EAAM,YAC1B,EAAE,cAAW,GAAGG,KAAS,MACzB,kBAACF,EAAgB,MAAjB;CACM;CACL,WAAWG,EACV,oFACAC,CACD;CACA,GAAIF;AACJ,CAAA,CAEH;AACA,EAAO,cAAcF,EAAgB,KAAK;AA2B1C,IAAaK,IAAcN,EAAM,YAG9B,EAAE,cAAW,GAAGG,KAAS,MAC3B,kBAACF,EAAgB,OAAjB;CACM;CACL,WAAWG,EAAG,+BAA+BC,CAAS;CACtD,GAAIF;AACJ,CAAA,CACD;AACD,EAAY,cAAcF,EAAgB,MAAM;AAkBhD,IAAaM,IAAiBP,EAAM,YAGjC,EAAE,cAAW,GAAGG,KAAS,MAC3B,kBAACF,EAAgB,UAAjB;CACM;CACL,WAAWG,EACV,qGACAC,CACD;CACA,GAAIF;AACJ,CAAA,CACD;AACD,EAAe,cAAcF,EAAgB,SAAS;AAEtD,IAAMO,IAAe;CACpBC,EAAW,KAAK;CAChBA,EAAW,MAAM;CACjBA,EAAW,KAAK;CAChBA,EAAW,KAAK;CAChBA,EAAW,OAAO;CAClBA,EAAW,QAAQ;AACpB;AAcA,SAAgBC,EAAe,EAC9B,SACA,aACA,aACA,UAAO,WACP,gBACuB;CACvB,OACC,kBAACR,GAAD;EACC,MAAK;EACL,cAAYS;EACZ,WAAWP,EAAGQ,MAAS,QAAQ,iBAAiBP,CAAS;EAEzD,UAAA,kBAACE,GAAD;GACC,WAAWH,EACV,eACAQ,MAAS,OAAO,mBAAmB,kBACnCJ,EAAaK,EAAiBC,KAAYH,CAAI,EAC/C;GAEC,UAAAI,GAAU,KAAK,IACb,MAAM,KAAKA,EAAS,KAAK,CAAC,CAAC,kBAAkB,OAAO,CAAC,CAAC,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,KAAK,EAAE,IAC1EC,EAAeL,CAAI;EACP,CAAA;CACT,CAAA;AAEV"}

package/dist/components/badge.js

@@ -4,21 +4,21 @@ import { BASALT_UI_CLASS as t } from "../utils/control-surface.js";
 import { cva as n } from "class-variance-authority";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/components/badge.tsx
-var a = n("inline-flex items-center gap-1.5 rounded-full border px-2.5 py-0.5 text-xs font-medium", {
+var a = n("inline-flex items-center gap-basalt-space-md rounded-basalt-full border basalt-inline font-medium", {
 	variants: { variant: {
 		default: "border-transparent bg-basalt-primary text-basalt-primary-foreground",
 		secondary: "border-transparent bg-basalt-secondary text-basalt-foreground",
 		destructive: "border-transparent bg-basalt-destructive text-basalt-destructive-foreground",
 		outline: "border-basalt-border text-basalt-foreground",
 		info: "border-transparent bg-basalt-info-tint text-basalt-info",
-		success: "border-transparent bg-basalt-heatmap-green-3 text-white",
+		success: "border-transparent bg-basalt-badge-green text-basalt-badge-green-foreground",
 		warning: "border-transparent bg-basalt-warning-tint text-basalt-warning",
 		error: "border-transparent bg-basalt-danger-tint text-basalt-danger",
-		red: "border-transparent bg-basalt-danger text-white",
-		orange: "border-transparent bg-basalt-warning text-white",
-		teal: "border-transparent bg-basalt-badge-teal text-white",
-		blue: "border-transparent bg-basalt-info text-white",
-		purple: "border-transparent bg-basalt-badge-purple text-white"
+		red: "border-transparent bg-basalt-danger text-basalt-danger-foreground",
+		orange: "border-transparent bg-basalt-warning text-basalt-warning-foreground",
+		teal: "border-transparent bg-basalt-badge-teal text-basalt-badge-teal-foreground",
+		blue: "border-transparent bg-basalt-info text-basalt-info-foreground",
+		purple: "border-transparent bg-basalt-badge-purple text-basalt-badge-purple-foreground"
 	} },
 	defaultVariants: { variant: "default" }
 });
@@ -27,7 +27,7 @@ function o({ className: n, variant: o, dot: s, children: c, ...l }) {
 		className: e(t, a({ variant: o }), n),
 		...l,
 		children: [s ? /* @__PURE__ */ r("span", {
-			className: "size-1.5 rounded-full bg-current",
+			className: "size-basalt-1_5 rounded-basalt-full bg-current",
 			"aria-hidden": "true"
 		}) : null, c]
 	});