@nocoo/basalt 2.2.0 → 3.1.0

package/dist/components/toast.js

@@ -11,10 +11,10 @@ var c = {
 	info: "bg-basalt-info-tint [&_[data-icon]]:text-basalt-info [&_[data-title]]:text-basalt-info"
 }, l = {
 	default: null,
-	success: /* @__PURE__ */ a(e, { className: "size-4" }),
-	error: /* @__PURE__ */ a(t, { className: "size-4" }),
-	warning: /* @__PURE__ */ a(r, { className: "size-4" }),
-	info: /* @__PURE__ */ a(n, { className: "size-4" })
+	success: /* @__PURE__ */ a(e, { className: "size-basalt-icon-lg" }),
+	error: /* @__PURE__ */ a(t, { className: "size-basalt-icon-lg" }),
+	warning: /* @__PURE__ */ a(r, { className: "size-basalt-icon-lg" }),
+	info: /* @__PURE__ */ a(n, { className: "size-basalt-icon-lg" })
 };
 function u(e, t) {
 	return t === !1 ? null : t ?? l[e] ?? void 0;
@@ -51,23 +51,28 @@ function p({ closeButton: s = !0, ...l }) {
 	return /* @__PURE__ */ a(o, {
 		closeButton: s,
 		icons: {
-			success: /* @__PURE__ */ a(e, { className: "size-4" }),
-			error: /* @__PURE__ */ a(t, { className: "size-4" }),
-			warning: /* @__PURE__ */ a(r, { className: "size-4" }),
-			info: /* @__PURE__ */ a(n, { className: "size-4" }),
-			close: /* @__PURE__ */ a(i, { className: "size-3.5" })
+			success: /* @__PURE__ */ a(e, { className: "size-basalt-icon-lg" }),
+			error: /* @__PURE__ */ a(t, { className: "size-basalt-icon-lg" }),
+			warning: /* @__PURE__ */ a(r, { className: "size-basalt-icon-lg" }),
+			info: /* @__PURE__ */ a(n, { className: "size-basalt-icon-lg" }),
+			close: /* @__PURE__ */ a(i, { className: "size-basalt-icon" })
+		},
+		toastOptions: {
+			unstyled: !0,
+			classNames: {
+				toast: "basalt-ui basalt-toast flex w-full items-center gap-basalt-space-lg rounded-basalt-md bg-basalt-popover px-basalt-card-lg py-basalt-card text-basalt-base leading-[var(--basalt-leading-banner)] text-basalt-foreground shadow-lg [&_[data-content]]:min-w-0 [&_[data-content]]:flex-1",
+				title: "font-medium",
+				description: "text-basalt-sm leading-[var(--basalt-line-relaxed)] text-basalt-muted-foreground",
+				closeButton: "basalt-action basalt-action-icon order-last inline-flex shrink-0 cursor-pointer items-center justify-center rounded-basalt-sm text-basalt-muted-foreground hover:bg-basalt-hover hover:text-basalt-foreground focus-visible:ring-2 focus-visible:ring-basalt-ring",
+				actionButton: "basalt-action shrink-0 cursor-pointer rounded-basalt-sm bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary-hover",
+				cancelButton: "basalt-action shrink-0 cursor-pointer rounded-basalt-sm bg-basalt-control hover:bg-basalt-hover",
+				icon: "flex size-basalt-icon-lg shrink-0 items-center justify-center",
+				success: c.success,
+				error: c.error,
+				warning: c.warning,
+				info: c.info
+			}
 		},
-		toastOptions: { classNames: {
-			toast: "border border-basalt-border text-basalt-foreground shadow-lg",
-			title: "text-sm font-medium",
-			description: "text-sm text-basalt-muted-foreground",
-			closeButton: "border-basalt-border bg-basalt-popover text-basalt-muted-foreground hover:text-basalt-foreground",
-			icon: "size-4",
-			success: c.success,
-			error: c.error,
-			warning: c.warning,
-			info: c.info
-		} },
 		...l
 	});
 }

package/dist/components/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","names":["sonnerToast","Sonner","Toaster$1","toast$1","VARIANT_CLASS","VARIANT_ICON","Check","CircleAlert","TriangleAlert","Info","resolveIcon","icon","variant","show","rest","options","payload","close","message","toast","Toaster","props","X","Toast"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["import { Check, CircleAlert, Info, TriangleAlert, X } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Toaster as Sonner, toast as sonnerToast } from \"sonner\";\n\nexport type ToastVariant = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport type ToastOptions = {\n\t/**\n\t * Secondary supporting text or node displayed below the main message.\n\t */\n\tdescription?: ReactNode;\n\t/**\n\t * Custom icon override. When set to `false`, suppresses default status or notification icons.\n\t */\n\ticon?: ReactNode | false;\n\t/**\n\t * Whether a close button is displayed on this individual toast notification.\n\t * @default true\n\t */\n\tclose?: boolean;\n\t/**\n\t * Visibility duration in milliseconds before auto-dismissal. Resolved as `toast.duration || (Toaster.toastOptions.duration ?? Toaster.duration) || 4000`. Infinity disables auto-closing. Setting to 0 treats it as falsy and falls back through container duration before defaulting to 4000ms.\n\t * @default \"inherited from container, finally 4000ms\"\n\t */\n\tduration?: number;\n\t/**\n\t * Unique identifier for this toast notification. Can be used with `toast.dismiss(id)` to manually dismiss this specific toast.\n\t */\n\tid?: string | number;\n\t/**\n\t * Optional action button configuration with label and onClick handler.\n\t */\n\taction?: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n};\n\n/**\n * Options accepted by the root `toast(message, options)` dispatch function, extending `ToastOptions` with an optional `variant`.\n */\nexport type ToastCallOptions = ToastOptions & {\n\t/**\n\t * Visual status variant style for this toast.\n\t * @default \"default\"\n\t */\n\tvariant?: ToastVariant;\n};\n\nconst VARIANT_CLASS: Record<ToastVariant, string> = {\n\tdefault: \"bg-basalt-popover\",\n\tsuccess:\n\t\t\"bg-basalt-heatmap-green-1 [&_[data-icon]]:text-basalt-heatmap-green-4 [&_[data-title]]:text-basalt-heatmap-green-4\",\n\terror:\n\t\t\"bg-basalt-danger-tint [&_[data-icon]]:text-basalt-danger [&_[data-title]]:text-basalt-danger\",\n\twarning:\n\t\t\"bg-basalt-warning-tint [&_[data-icon]]:text-basalt-warning [&_[data-title]]:text-basalt-warning\",\n\tinfo: \"bg-basalt-info-tint [&_[data-icon]]:text-basalt-info [&_[data-title]]:text-basalt-info\",\n};\n\nconst VARIANT_ICON: Record<ToastVariant, ReactNode> = {\n\tdefault: null,\n\tsuccess: <Check className=\"size-4\" />,\n\terror: <CircleAlert className=\"size-4\" />,\n\twarning: <TriangleAlert className=\"size-4\" />,\n\tinfo: <Info className=\"size-4\" />,\n};\n\nfunction resolveIcon(variant: ToastVariant, icon: ToastOptions[\"icon\"]) {\n\tif (icon === false) {\n\t\treturn null;\n\t}\n\tif (icon != null) {\n\t\treturn icon;\n\t}\n\treturn VARIANT_ICON[variant] ?? undefined;\n}\n\n/**\n * Dispatches a toast notification with the given message and options.\n * @param message Main notification content or React node.\n * @param options Notification customization options including optional variant.\n * @returns The unique toast identifier (string or number).\n */\nfunction show(message: ReactNode, options: ToastCallOptions = {}) {\n\tconst { variant = \"default\", icon, close = true, ...rest } = options;\n\tconst payload = {\n\t\t...rest,\n\t\tcloseButton: close,\n\t\tclassName: VARIANT_CLASS[variant],\n\t\ticon: resolveIcon(variant, icon),\n\t};\n\tif (variant === \"success\") {\n\t\treturn sonnerToast.success(message, payload);\n\t}\n\tif (variant === \"error\") {\n\t\treturn sonnerToast.error(message, payload);\n\t}\n\tif (variant === \"warning\") {\n\t\treturn sonnerToast.warning(message, payload);\n\t}\n\tif (variant === \"info\") {\n\t\treturn sonnerToast.info(message, payload);\n\t}\n\treturn sonnerToast(message, payload);\n}\n\n/**\n * Imperative notification dispatcher. Directly callable as `toast(message, options)` to display a default notification, with helper methods for status variants (`success`, `error`, `warning`, `info`) and dismissal (`dismiss`).\n */\nexport const toast = Object.assign(show, {\n\t/**\n\t * Dispatches a success status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\tsuccess: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"success\" }),\n\t/**\n\t * Dispatches an error status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\terror: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"error\" }),\n\t/**\n\t * Dispatches a warning status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\twarning: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"warning\" }),\n\t/**\n\t * Dispatches an info status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\tinfo: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"info\" }),\n\t/**\n\t * Dismisses an active toast by its identifier, or dismisses all toasts when called without arguments. Note: Calling without arguments returns `undefined` at runtime; calling with `id` returns the dismissed `id`.\n\t * @param id Optional identifier of the toast to dismiss. When omitted, all toasts are dismissed.\n\t * @returns The dismissed toast identifier if provided, or undefined if dismissed without arguments.\n\t */\n\tdismiss: sonnerToast.dismiss,\n});\n\ntype SonnerComponentProps = ComponentProps<typeof Sonner>;\n\nexport type ToasterToastOptions = NonNullable<SonnerComponentProps[\"toastOptions\"]>;\nexport type ToasterIcons = NonNullable<SonnerComponentProps[\"icons\"]>;\nexport type ToasterSwipeDirection = NonNullable<SonnerComponentProps[\"swipeDirections\"]>[number];\n\nexport interface ToasterProps\n\textends Omit<\n\t\tSonnerComponentProps,\n\t\t| \"id\"\n\t\t| \"invert\"\n\t\t| \"theme\"\n\t\t| \"position\"\n\t\t| \"hotkey\"\n\t\t| \"richColors\"\n\t\t| \"expand\"\n\t\t| \"duration\"\n\t\t| \"gap\"\n\t\t| \"visibleToasts\"\n\t\t| \"closeButton\"\n\t\t| \"toastOptions\"\n\t\t| \"className\"\n\t\t| \"style\"\n\t\t| \"offset\"\n\t\t| \"mobileOffset\"\n\t\t| \"dir\"\n\t\t| \"swipeDirections\"\n\t\t| \"icons\"\n\t\t| \"containerAriaLabel\"\n\t\t| \"customAriaLabel\"\n\t> {\n\t/**\n\t * Unique identifier for this toaster instance. When set, only toasts dispatched with a matching toasterId will display here. Basalt standard toast options do not expose toasterId, so global un-identified mounting is recommended.\n\t */\n\tid?: SonnerComponentProps[\"id\"];\n\t/**\n\t * Invert toast foreground and background colors.\n\t * @default false\n\t */\n\tinvert?: SonnerComponentProps[\"invert\"];\n\t/**\n\t * Color scheme theme override for toast notifications.\n\t * @default \"light\"\n\t */\n\ttheme?: SonnerComponentProps[\"theme\"];\n\t/**\n\t * Screen positioning for the toast viewport stack.\n\t * @default \"bottom-right\"\n\t */\n\tposition?: SonnerComponentProps[\"position\"];\n\t/**\n\t * Keyboard hotkey combination to expand and focus the toast viewport.\n\t * @default [\"altKey\", \"KeyT\"]\n\t */\n\thotkey?: SonnerComponentProps[\"hotkey\"];\n\t/**\n\t * Whether rich semantic colors should be applied to default notification styles.\n\t * @default false\n\t */\n\trichColors?: SonnerComponentProps[\"richColors\"];\n\t/**\n\t * Whether toasts should be expanded by default rather than collapsed into a stacked pile.\n\t * @default false\n\t */\n\texpand?: SonnerComponentProps[\"expand\"];\n\t/**\n\t * Default visibility duration in milliseconds before auto-dismissal. Resolved as `toast.duration || (Toaster.toastOptions.duration ?? Toaster.duration) || 4000`. Passing Infinity prevents auto-closing. When `toastOptions.duration === 0`, it is treated as falsy and bypasses `Toaster.duration`, falling back to 4000.\n\t * @default 4000\n\t */\n\tduration?: SonnerComponentProps[\"duration\"];\n\t/**\n\t * Pixel gap between stacked toasts.\n\t * @default 14\n\t */\n\tgap?: SonnerComponentProps[\"gap\"];\n\t/**\n\t * Maximum number of toasts visible simultaneously in the stack.\n\t * @default 3\n\t */\n\tvisibleToasts?: SonnerComponentProps[\"visibleToasts\"];\n\t/**\n\t * Whether a close button is displayed on each toast notification. Basalt enables this by default (`closeButton = true`), and Basalt single-toast calls also default to `close: true`, overriding `Toaster.closeButton = false`. To hide the close button on an individual toast, pass `close: false` in the dispatch options.\n\t * @default true\n\t */\n\tcloseButton?: SonnerComponentProps[\"closeButton\"];\n\t/**\n\t * Default options and custom class names applied to all rendered toasts. Passing a custom `toastOptions` object will override Basalt default styling rather than deep-merging.\n\t */\n\ttoastOptions?: ToasterToastOptions;\n\t/**\n\t * Additional CSS class name applied to each rendered ordered list (`ol`) toast viewport.\n\t */\n\tclassName?: SonnerComponentProps[\"className\"];\n\t/**\n\t * Inline style properties applied to each rendered ordered list (`ol`) toast viewport.\n\t */\n\tstyle?: SonnerComponentProps[\"style\"];\n\t/**\n\t * Viewport offset margin from screen edges on desktop screens.\n\t * @default \"24px\"\n\t */\n\toffset?: SonnerComponentProps[\"offset\"];\n\t/**\n\t * Viewport offset margin from screen edges on mobile devices.\n\t * @default \"16px\"\n\t */\n\tmobileOffset?: SonnerComponentProps[\"mobileOffset\"];\n\t/**\n\t * Layout direction of the notification viewport ('ltr', 'rtl', or document direction when unspecified).\n\t * @default document direction\n\t */\n\tdir?: SonnerComponentProps[\"dir\"];\n\t/**\n\t * Allowed swipe directions to dismiss toasts. Defaults based on position orientation (e.g. ['bottom', 'right'] for bottom-right).\n\t */\n\tswipeDirections?: ToasterSwipeDirection[];\n\t/**\n\t * Custom icon overrides for toast status variants. Basalt preconfigures Lucide icons; passing an `icons` object replaces defaults rather than deep-merging. Basalt status variant dispatches (`toast.success`, `error`, `warning`, `info`) supply default status icons directly, which take precedence over `Toaster.icons`; custom individual toast icons should be passed via `options.icon`.\n\t */\n\ticons?: ToasterIcons;\n\t/**\n\t * Accessible label for the notification region container.\n\t * @default \"Notifications\"\n\t */\n\tcontainerAriaLabel?: SonnerComponentProps[\"containerAriaLabel\"];\n\t/**\n\t * Custom accessible label overriding both containerAriaLabel and hotkey text on the section wrapper.\n\t */\n\tcustomAriaLabel?: SonnerComponentProps[\"customAriaLabel\"];\n}\n\nexport function Toaster({ closeButton = true, ...props }: ToasterProps) {\n\treturn (\n\t\t<Sonner\n\t\t\tcloseButton={closeButton}\n\t\t\ticons={{\n\t\t\t\tsuccess: <Check className=\"size-4\" />,\n\t\t\t\terror: <CircleAlert className=\"size-4\" />,\n\t\t\t\twarning: <TriangleAlert className=\"size-4\" />,\n\t\t\t\tinfo: <Info className=\"size-4\" />,\n\t\t\t\tclose: <X className=\"size-3.5\" />,\n\t\t\t}}\n\t\t\ttoastOptions={{\n\t\t\t\tclassNames: {\n\t\t\t\t\ttoast: \"border border-basalt-border text-basalt-foreground shadow-lg\",\n\t\t\t\t\ttitle: \"text-sm font-medium\",\n\t\t\t\t\tdescription: \"text-sm text-basalt-muted-foreground\",\n\t\t\t\t\tcloseButton:\n\t\t\t\t\t\t\"border-basalt-border bg-basalt-popover text-basalt-muted-foreground hover:text-basalt-foreground\",\n\t\t\t\t\ticon: \"size-4\",\n\t\t\t\t\tsuccess: VARIANT_CLASS.success,\n\t\t\t\t\terror: VARIANT_CLASS.error,\n\t\t\t\t\twarning: VARIANT_CLASS.warning,\n\t\t\t\t\tinfo: VARIANT_CLASS.info,\n\t\t\t\t},\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport const Toast = Toaster;\n"],"mappings":";;;;;AAiDA,IAAMI,IAA8C;CACnD,SAAS;CACT,SACC;CACD,OACC;CACD,SACC;CACD,MAAM;AACP,GAEMC,IAAgD;CACrD,SAAS;CACT,SAAS,kBAACC,GAAD,EAAO,WAAU,SAAU,CAAA;CACpC,OAAO,kBAACC,GAAD,EAAa,WAAU,SAAU,CAAA;CACxC,SAAS,kBAACC,GAAD,EAAe,WAAU,SAAU,CAAA;CAC5C,MAAM,kBAACC,GAAD,EAAM,WAAU,SAAU,CAAA;AACjC;AAEA,SAASC,EAAY,GAAuB,GAA4B;CAOvE,OANIC,MAAS,KACL,OAEJA,KAGGN,EAAaO,MAAY,KAAA;AACjC;AAQA,SAASC,EAAK,GAAoB,IAA4B,CAAC,GAAG;CACjE,IAAM,EAAE,aAAU,WAAW,SAAM,WAAQ,IAAM,GAAGC,MAASC,GACvDC,IAAU;EACf,GAAGF;EACH,aAAaG;EACb,WAAWb,EAAcQ;EACzB,MAAMF,EAAYE,GAASD,CAAI;CAChC;CAaA,OAZIC,MAAY,YACRZ,EAAY,QAAQkB,GAASF,CAAO,IAExCJ,MAAY,UACRZ,EAAY,MAAMkB,GAASF,CAAO,IAEtCJ,MAAY,YACRZ,EAAY,QAAQkB,GAASF,CAAO,IAExCJ,MAAY,SACRZ,EAAY,KAAKkB,GAASF,CAAO,IAElChB,EAAYkB,GAASF,CAAO;AACpC;AAKA,IAAaG,IAAQ,OAAO,OAAON,GAAM;CAOxC,UAAU,GAAoB,MAC7BA,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAU,CAAC;CAOjD,QAAQ,GAAoB,MAC3BF,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAQ,CAAC;CAO/C,UAAU,GAAoB,MAC7BF,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAU,CAAC;CAOjD,OAAO,GAAoB,MAC1BF,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAO,CAAC;CAM9C,SAASf,EAAY;AACtB,CAAC;AAqID,SAAgBoB,EAAQ,EAAE,iBAAc,IAAM,GAAGC,KAAuB;CACvE,OACC,kBAACpB,GAAD;EACc;EACb,OAAO;GACN,SAAS,kBAACK,GAAD,EAAO,WAAU,SAAU,CAAA;GACpC,OAAO,kBAACC,GAAD,EAAa,WAAU,SAAU,CAAA;GACxC,SAAS,kBAACC,GAAD,EAAe,WAAU,SAAU,CAAA;GAC5C,MAAM,kBAACC,GAAD,EAAM,WAAU,SAAU,CAAA;GAChC,OAAO,kBAACa,GAAD,EAAG,WAAU,WAAY,CAAA;EACjC;EACA,cAAc,EACb,YAAY;GACX,OAAO;GACP,OAAO;GACP,aAAa;GACb,aACC;GACD,MAAM;GACN,SAASlB,EAAc;GACvB,OAAOA,EAAc;GACrB,SAASA,EAAc;GACvB,MAAMA,EAAc;EACrB,EACD;EACA,GAAIiB;CACJ,CAAA;AAEH;AAEA,IAAaE,IAAQH"}
+{"version":3,"file":"toast.js","names":["sonnerToast","Sonner","Toaster$1","toast$1","VARIANT_CLASS","VARIANT_ICON","Check","CircleAlert","TriangleAlert","Info","resolveIcon","icon","variant","show","rest","options","payload","close","message","toast","Toaster","props","X","Toast"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["import { Check, CircleAlert, Info, TriangleAlert, X } from \"lucide-react\";\nimport type { ComponentProps, ReactNode } from \"react\";\nimport { Toaster as Sonner, toast as sonnerToast } from \"sonner\";\n\nexport type ToastVariant = \"default\" | \"success\" | \"error\" | \"warning\" | \"info\";\n\nexport type ToastOptions = {\n\t/**\n\t * Secondary supporting text or node displayed below the main message.\n\t */\n\tdescription?: ReactNode;\n\t/**\n\t * Custom icon override. When set to `false`, suppresses default status or notification icons.\n\t */\n\ticon?: ReactNode | false;\n\t/**\n\t * Whether a close button is displayed on this individual toast notification.\n\t * @default true\n\t */\n\tclose?: boolean;\n\t/**\n\t * Visibility duration in milliseconds before auto-dismissal. Resolved as `toast.duration || (Toaster.toastOptions.duration ?? Toaster.duration) || 4000`. Infinity disables auto-closing. Setting to 0 treats it as falsy and falls back through container duration before defaulting to 4000ms.\n\t * @default \"inherited from container, finally 4000ms\"\n\t */\n\tduration?: number;\n\t/**\n\t * Unique identifier for this toast notification. Can be used with `toast.dismiss(id)` to manually dismiss this specific toast.\n\t */\n\tid?: string | number;\n\t/**\n\t * Optional action button configuration with label and onClick handler.\n\t */\n\taction?: {\n\t\tlabel: string;\n\t\tonClick: () => void;\n\t};\n};\n\n/**\n * Options accepted by the root `toast(message, options)` dispatch function, extending `ToastOptions` with an optional `variant`.\n */\nexport type ToastCallOptions = ToastOptions & {\n\t/**\n\t * Visual status variant style for this toast.\n\t * @default \"default\"\n\t */\n\tvariant?: ToastVariant;\n};\n\nconst VARIANT_CLASS: Record<ToastVariant, string> = {\n\tdefault: \"bg-basalt-popover\",\n\tsuccess:\n\t\t\"bg-basalt-heatmap-green-1 [&_[data-icon]]:text-basalt-heatmap-green-4 [&_[data-title]]:text-basalt-heatmap-green-4\",\n\terror:\n\t\t\"bg-basalt-danger-tint [&_[data-icon]]:text-basalt-danger [&_[data-title]]:text-basalt-danger\",\n\twarning:\n\t\t\"bg-basalt-warning-tint [&_[data-icon]]:text-basalt-warning [&_[data-title]]:text-basalt-warning\",\n\tinfo: \"bg-basalt-info-tint [&_[data-icon]]:text-basalt-info [&_[data-title]]:text-basalt-info\",\n};\n\nconst VARIANT_ICON: Record<ToastVariant, ReactNode> = {\n\tdefault: null,\n\tsuccess: <Check className=\"size-basalt-icon-lg\" />,\n\terror: <CircleAlert className=\"size-basalt-icon-lg\" />,\n\twarning: <TriangleAlert className=\"size-basalt-icon-lg\" />,\n\tinfo: <Info className=\"size-basalt-icon-lg\" />,\n};\n\nfunction resolveIcon(variant: ToastVariant, icon: ToastOptions[\"icon\"]) {\n\tif (icon === false) {\n\t\treturn null;\n\t}\n\tif (icon != null) {\n\t\treturn icon;\n\t}\n\treturn VARIANT_ICON[variant] ?? undefined;\n}\n\n/**\n * Dispatches a toast notification with the given message and options.\n * @param message Main notification content or React node.\n * @param options Notification customization options including optional variant.\n * @returns The unique toast identifier (string or number).\n */\nfunction show(message: ReactNode, options: ToastCallOptions = {}) {\n\tconst { variant = \"default\", icon, close = true, ...rest } = options;\n\tconst payload = {\n\t\t...rest,\n\t\tcloseButton: close,\n\t\tclassName: VARIANT_CLASS[variant],\n\t\ticon: resolveIcon(variant, icon),\n\t};\n\tif (variant === \"success\") {\n\t\treturn sonnerToast.success(message, payload);\n\t}\n\tif (variant === \"error\") {\n\t\treturn sonnerToast.error(message, payload);\n\t}\n\tif (variant === \"warning\") {\n\t\treturn sonnerToast.warning(message, payload);\n\t}\n\tif (variant === \"info\") {\n\t\treturn sonnerToast.info(message, payload);\n\t}\n\treturn sonnerToast(message, payload);\n}\n\n/**\n * Imperative notification dispatcher. Directly callable as `toast(message, options)` to display a default notification, with helper methods for status variants (`success`, `error`, `warning`, `info`) and dismissal (`dismiss`).\n */\nexport const toast = Object.assign(show, {\n\t/**\n\t * Dispatches a success status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\tsuccess: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"success\" }),\n\t/**\n\t * Dispatches an error status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\terror: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"error\" }),\n\t/**\n\t * Dispatches a warning status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\twarning: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"warning\" }),\n\t/**\n\t * Dispatches an info status toast notification.\n\t * @param message Main notification content or React node.\n\t * @param options Notification customization options.\n\t * @returns The unique toast identifier (string or number).\n\t */\n\tinfo: (message: ReactNode, options?: ToastOptions) =>\n\t\tshow(message, { ...options, variant: \"info\" }),\n\t/**\n\t * Dismisses an active toast by its identifier, or dismisses all toasts when called without arguments. Note: Calling without arguments returns `undefined` at runtime; calling with `id` returns the dismissed `id`.\n\t * @param id Optional identifier of the toast to dismiss. When omitted, all toasts are dismissed.\n\t * @returns The dismissed toast identifier if provided, or undefined if dismissed without arguments.\n\t */\n\tdismiss: sonnerToast.dismiss,\n});\n\ntype SonnerComponentProps = ComponentProps<typeof Sonner>;\n\nexport type ToasterToastOptions = NonNullable<SonnerComponentProps[\"toastOptions\"]>;\nexport type ToasterIcons = NonNullable<SonnerComponentProps[\"icons\"]>;\nexport type ToasterSwipeDirection = NonNullable<SonnerComponentProps[\"swipeDirections\"]>[number];\n\nexport interface ToasterProps\n\textends Omit<\n\t\tSonnerComponentProps,\n\t\t| \"id\"\n\t\t| \"invert\"\n\t\t| \"theme\"\n\t\t| \"position\"\n\t\t| \"hotkey\"\n\t\t| \"richColors\"\n\t\t| \"expand\"\n\t\t| \"duration\"\n\t\t| \"gap\"\n\t\t| \"visibleToasts\"\n\t\t| \"closeButton\"\n\t\t| \"toastOptions\"\n\t\t| \"className\"\n\t\t| \"style\"\n\t\t| \"offset\"\n\t\t| \"mobileOffset\"\n\t\t| \"dir\"\n\t\t| \"swipeDirections\"\n\t\t| \"icons\"\n\t\t| \"containerAriaLabel\"\n\t\t| \"customAriaLabel\"\n\t> {\n\t/**\n\t * Unique identifier for this toaster instance. When set, only toasts dispatched with a matching toasterId will display here. Basalt standard toast options do not expose toasterId, so global un-identified mounting is recommended.\n\t */\n\tid?: SonnerComponentProps[\"id\"];\n\t/**\n\t * Invert toast foreground and background colors.\n\t * @default false\n\t */\n\tinvert?: SonnerComponentProps[\"invert\"];\n\t/**\n\t * Color scheme theme override for toast notifications.\n\t * @default \"light\"\n\t */\n\ttheme?: SonnerComponentProps[\"theme\"];\n\t/**\n\t * Screen positioning for the toast viewport stack.\n\t * @default \"bottom-right\"\n\t */\n\tposition?: SonnerComponentProps[\"position\"];\n\t/**\n\t * Keyboard hotkey combination to expand and focus the toast viewport.\n\t * @default [\"altKey\", \"KeyT\"]\n\t */\n\thotkey?: SonnerComponentProps[\"hotkey\"];\n\t/**\n\t * Whether rich semantic colors should be applied to default notification styles.\n\t * @default false\n\t */\n\trichColors?: SonnerComponentProps[\"richColors\"];\n\t/**\n\t * Whether toasts should be expanded by default rather than collapsed into a stacked pile.\n\t * @default false\n\t */\n\texpand?: SonnerComponentProps[\"expand\"];\n\t/**\n\t * Default visibility duration in milliseconds before auto-dismissal. Resolved as `toast.duration || (Toaster.toastOptions.duration ?? Toaster.duration) || 4000`. Passing Infinity prevents auto-closing. When `toastOptions.duration === 0`, it is treated as falsy and bypasses `Toaster.duration`, falling back to 4000.\n\t * @default 4000\n\t */\n\tduration?: SonnerComponentProps[\"duration\"];\n\t/**\n\t * Pixel gap between stacked toasts.\n\t * @default 14\n\t */\n\tgap?: SonnerComponentProps[\"gap\"];\n\t/**\n\t * Maximum number of toasts visible simultaneously in the stack.\n\t * @default 3\n\t */\n\tvisibleToasts?: SonnerComponentProps[\"visibleToasts\"];\n\t/**\n\t * Whether a close button is displayed on each toast notification. Basalt enables this by default (`closeButton = true`), and Basalt single-toast calls also default to `close: true`, overriding `Toaster.closeButton = false`. To hide the close button on an individual toast, pass `close: false` in the dispatch options.\n\t * @default true\n\t */\n\tcloseButton?: SonnerComponentProps[\"closeButton\"];\n\t/**\n\t * Default options and custom class names applied to all rendered toasts. Passing a custom `toastOptions` object will override Basalt default styling rather than deep-merging.\n\t */\n\ttoastOptions?: ToasterToastOptions;\n\t/**\n\t * Additional CSS class name applied to each rendered ordered list (`ol`) toast viewport.\n\t */\n\tclassName?: SonnerComponentProps[\"className\"];\n\t/**\n\t * Inline style properties applied to each rendered ordered list (`ol`) toast viewport.\n\t */\n\tstyle?: SonnerComponentProps[\"style\"];\n\t/**\n\t * Viewport offset margin from screen edges on desktop screens.\n\t * @default \"24px\"\n\t */\n\toffset?: SonnerComponentProps[\"offset\"];\n\t/**\n\t * Viewport offset margin from screen edges on mobile devices.\n\t * @default \"16px\"\n\t */\n\tmobileOffset?: SonnerComponentProps[\"mobileOffset\"];\n\t/**\n\t * Layout direction of the notification viewport ('ltr', 'rtl', or document direction when unspecified).\n\t * @default document direction\n\t */\n\tdir?: SonnerComponentProps[\"dir\"];\n\t/**\n\t * Allowed swipe directions to dismiss toasts. Defaults based on position orientation (e.g. ['bottom', 'right'] for bottom-right).\n\t */\n\tswipeDirections?: ToasterSwipeDirection[];\n\t/**\n\t * Custom icon overrides for toast status variants. Basalt preconfigures Lucide icons; passing an `icons` object replaces defaults rather than deep-merging. Basalt status variant dispatches (`toast.success`, `error`, `warning`, `info`) supply default status icons directly, which take precedence over `Toaster.icons`; custom individual toast icons should be passed via `options.icon`.\n\t */\n\ticons?: ToasterIcons;\n\t/**\n\t * Accessible label for the notification region container.\n\t * @default \"Notifications\"\n\t */\n\tcontainerAriaLabel?: SonnerComponentProps[\"containerAriaLabel\"];\n\t/**\n\t * Custom accessible label overriding both containerAriaLabel and hotkey text on the section wrapper.\n\t */\n\tcustomAriaLabel?: SonnerComponentProps[\"customAriaLabel\"];\n}\n\nexport function Toaster({ closeButton = true, ...props }: ToasterProps) {\n\treturn (\n\t\t<Sonner\n\t\t\tcloseButton={closeButton}\n\t\t\ticons={{\n\t\t\t\tsuccess: <Check className=\"size-basalt-icon-lg\" />,\n\t\t\t\terror: <CircleAlert className=\"size-basalt-icon-lg\" />,\n\t\t\t\twarning: <TriangleAlert className=\"size-basalt-icon-lg\" />,\n\t\t\t\tinfo: <Info className=\"size-basalt-icon-lg\" />,\n\t\t\t\tclose: <X className=\"size-basalt-icon\" />,\n\t\t\t}}\n\t\t\ttoastOptions={{\n\t\t\t\tunstyled: true,\n\t\t\t\tclassNames: {\n\t\t\t\t\ttoast:\n\t\t\t\t\t\t\"basalt-ui basalt-toast flex w-full items-center gap-basalt-space-lg rounded-basalt-md bg-basalt-popover px-basalt-card-lg py-basalt-card text-basalt-base leading-[var(--basalt-leading-banner)] text-basalt-foreground shadow-lg [&_[data-content]]:min-w-0 [&_[data-content]]:flex-1\",\n\t\t\t\t\ttitle: \"font-medium\",\n\t\t\t\t\tdescription:\n\t\t\t\t\t\t\"text-basalt-sm leading-[var(--basalt-line-relaxed)] text-basalt-muted-foreground\",\n\t\t\t\t\tcloseButton:\n\t\t\t\t\t\t\"basalt-action basalt-action-icon order-last inline-flex shrink-0 cursor-pointer items-center justify-center rounded-basalt-sm text-basalt-muted-foreground hover:bg-basalt-hover hover:text-basalt-foreground focus-visible:ring-2 focus-visible:ring-basalt-ring\",\n\t\t\t\t\tactionButton:\n\t\t\t\t\t\t\"basalt-action shrink-0 cursor-pointer rounded-basalt-sm bg-basalt-primary text-basalt-primary-foreground hover:bg-basalt-primary-hover\",\n\t\t\t\t\tcancelButton:\n\t\t\t\t\t\t\"basalt-action shrink-0 cursor-pointer rounded-basalt-sm bg-basalt-control hover:bg-basalt-hover\",\n\t\t\t\t\ticon: \"flex size-basalt-icon-lg shrink-0 items-center justify-center\",\n\t\t\t\t\tsuccess: VARIANT_CLASS.success,\n\t\t\t\t\terror: VARIANT_CLASS.error,\n\t\t\t\t\twarning: VARIANT_CLASS.warning,\n\t\t\t\t\tinfo: VARIANT_CLASS.info,\n\t\t\t\t},\n\t\t\t}}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport const Toast = Toaster;\n"],"mappings":";;;;;AAiDA,IAAMI,IAA8C;CACnD,SAAS;CACT,SACC;CACD,OACC;CACD,SACC;CACD,MAAM;AACP,GAEMC,IAAgD;CACrD,SAAS;CACT,SAAS,kBAACC,GAAD,EAAO,WAAU,sBAAuB,CAAA;CACjD,OAAO,kBAACC,GAAD,EAAa,WAAU,sBAAuB,CAAA;CACrD,SAAS,kBAACC,GAAD,EAAe,WAAU,sBAAuB,CAAA;CACzD,MAAM,kBAACC,GAAD,EAAM,WAAU,sBAAuB,CAAA;AAC9C;AAEA,SAASC,EAAY,GAAuB,GAA4B;CAOvE,OANIC,MAAS,KACL,OAEJA,KAGGN,EAAaO,MAAY,KAAA;AACjC;AAQA,SAASC,EAAK,GAAoB,IAA4B,CAAC,GAAG;CACjE,IAAM,EAAE,aAAU,WAAW,SAAM,WAAQ,IAAM,GAAGC,MAASC,GACvDC,IAAU;EACf,GAAGF;EACH,aAAaG;EACb,WAAWb,EAAcQ;EACzB,MAAMF,EAAYE,GAASD,CAAI;CAChC;CAaA,OAZIC,MAAY,YACRZ,EAAY,QAAQkB,GAASF,CAAO,IAExCJ,MAAY,UACRZ,EAAY,MAAMkB,GAASF,CAAO,IAEtCJ,MAAY,YACRZ,EAAY,QAAQkB,GAASF,CAAO,IAExCJ,MAAY,SACRZ,EAAY,KAAKkB,GAASF,CAAO,IAElChB,EAAYkB,GAASF,CAAO;AACpC;AAKA,IAAaG,IAAQ,OAAO,OAAON,GAAM;CAOxC,UAAU,GAAoB,MAC7BA,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAU,CAAC;CAOjD,QAAQ,GAAoB,MAC3BF,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAQ,CAAC;CAO/C,UAAU,GAAoB,MAC7BF,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAU,CAAC;CAOjD,OAAO,GAAoB,MAC1BF,EAAKK,GAAS;EAAE,GAAGH;EAAS,SAAS;CAAO,CAAC;CAM9C,SAASf,EAAY;AACtB,CAAC;AAqID,SAAgBoB,EAAQ,EAAE,iBAAc,IAAM,GAAGC,KAAuB;CACvE,OACC,kBAACpB,GAAD;EACc;EACb,OAAO;GACN,SAAS,kBAACK,GAAD,EAAO,WAAU,sBAAuB,CAAA;GACjD,OAAO,kBAACC,GAAD,EAAa,WAAU,sBAAuB,CAAA;GACrD,SAAS,kBAACC,GAAD,EAAe,WAAU,sBAAuB,CAAA;GACzD,MAAM,kBAACC,GAAD,EAAM,WAAU,sBAAuB,CAAA;GAC7C,OAAO,kBAACa,GAAD,EAAG,WAAU,mBAAoB,CAAA;EACzC;EACA,cAAc;GACb,UAAU;GACV,YAAY;IACX,OACC;IACD,OAAO;IACP,aACC;IACD,aACC;IACD,cACC;IACD,cACC;IACD,MAAM;IACN,SAASlB,EAAc;IACvB,OAAOA,EAAc;IACrB,SAASA,EAAc;IACvB,MAAMA,EAAc;GACrB;EACD;EACA,GAAIiB;CACJ,CAAA;AAEH;AAEA,IAAaE,IAAQH"}

package/dist/components/toggle-group.js

@@ -17,16 +17,17 @@ var c = i.createContext("single"), l = i.forwardRef(({ className: n, children: i
 		value: l.type,
 		children: /* @__PURE__ */ o(s.Root, {
 			ref: f,
-			className: e(t, "relative inline-flex h-8 shrink-0 items-center gap-0.5 rounded-full bg-basalt-muted p-0.5 ring-1 ring-basalt-border/70", n),
+			className: e(t, "relative inline-flex shrink-0 items-center gap-basalt-space-xs rounded-basalt-full bg-basalt-muted p-basalt-space-xs ring-1 ring-basalt-border/70", n),
 			...l,
 			children: [d ? /* @__PURE__ */ a("span", {
 				"aria-hidden": "true",
 				"data-slot": "selection-indicator",
-				className: e("pointer-events-none absolute rounded-full bg-basalt-primary shadow-sm", m),
+				className: e("pointer-events-none absolute rounded-basalt-full bg-basalt-primary", m),
 				style: {
-					left: p.left,
+					left: 0,
+					transform: `translate(${p.left}px, ${p.top}px)`,
 					width: p.visible ? p.width : 0,
-					top: p.top,
+					top: 0,
 					height: p.visible ? p.height : 0
 				}
 			}) : null, i]
@@ -38,7 +39,7 @@ var u = i.forwardRef(({ className: t, ...r }, o) => {
 	let l = i.useContext(c);
 	return /* @__PURE__ */ a(s.Item, {
 		ref: o,
-		className: e("relative inline-flex h-7 cursor-pointer items-center rounded-full px-2.5 text-[11px] font-semibold tracking-wide text-basalt-muted-foreground transition-colors before:absolute before:inset-0", "hover:text-basalt-foreground", n, "aria-checked:text-basalt-primary-foreground aria-pressed:text-basalt-primary-foreground", l === "multiple" && "aria-pressed:bg-basalt-primary aria-pressed:shadow-sm", "disabled:pointer-events-none disabled:opacity-50", t),
+		className: e("relative basalt-action basalt-action-sm inline-flex cursor-pointer items-center rounded-basalt-full font-semibold leading-[var(--basalt-line-body)] tracking-wide text-basalt-muted-foreground transition-colors basalt-motion before:absolute before:-inset-basalt-border-width", "hover:text-basalt-foreground", n, "aria-checked:text-basalt-primary-foreground aria-pressed:text-basalt-primary-foreground", l === "multiple" && "aria-pressed:bg-basalt-primary", "disabled:pointer-events-none disabled:opacity-50", t),
 		...r
 	});
 });

package/dist/components/toggle-group.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-group.js","names":["React","ToggleGroupPrimitive","ToggleGroupMode","ToggleGroup","props","sliding","rootRef","useSelectionIndicator","cn","BASALT_UI_CLASS","className","motionClassName","state","children","ToggleGroupItem","mode","FOCUS_RING"],"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useSelectionIndicator } from \"../utils/selection-indicator\";\nimport { FOCUS_RING } from \"./overlay\";\n\nconst ToggleGroupMode = React.createContext<\"single\" | \"multiple\">(\"single\");\n\ntype RadixToggleGroupSingleProps = React.ComponentPropsWithoutRef<\n\ttypeof ToggleGroupPrimitive.Root\n> & { type: \"single\" };\ntype RadixToggleGroupMultipleProps = React.ComponentPropsWithoutRef<\n\ttypeof ToggleGroupPrimitive.Root\n> & { type: \"multiple\" };\ntype RadixToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>;\n\nexport interface ToggleGroupSingleProps\n\textends Omit<\n\t\tRadixToggleGroupSingleProps,\n\t\t\"type\" | \"value\" | \"defaultValue\" | \"onValueChange\" | \"disabled\" | \"rovingFocus\" | \"orientation\"\n\t> {\n\t/**\n\t * Single-selection mode.\n\t */\n\ttype: \"single\";\n\t/**\n\t * Controlled string value in single mode. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixToggleGroupSingleProps[\"value\"];\n\t/**\n\t * Default string value in single mode when initially rendered.\n\t * @default \"\"\n\t */\n\tdefaultValue?: RadixToggleGroupSingleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when single selected value changes.\n\t */\n\tonValueChange?: RadixToggleGroupSingleProps[\"onValueChange\"];\n\t/**\n\t * Whether all toggle group items are disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleGroupSingleProps[\"disabled\"];\n\t/**\n\t * Whether keyboard navigation uses roving tabindex.\n\t * @default true\n\t */\n\trovingFocus?: RadixToggleGroupSingleProps[\"rovingFocus\"];\n\t/**\n\t * Constrains keyboard navigation axis; does not alter horizontal CSS layout.\n\t */\n\torientation?: RadixToggleGroupSingleProps[\"orientation\"];\n}\n\nexport interface ToggleGroupMultipleProps\n\textends Omit<\n\t\tRadixToggleGroupMultipleProps,\n\t\t\"type\" | \"value\" | \"defaultValue\" | \"onValueChange\" | \"disabled\" | \"rovingFocus\" | \"orientation\"\n\t> {\n\t/**\n\t * Multiple-selection mode.\n\t */\n\ttype: \"multiple\";\n\t/**\n\t * Controlled array in multiple mode. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixToggleGroupMultipleProps[\"value\"];\n\t/**\n\t * Default string array in multiple mode when initially rendered.\n\t * @default []\n\t */\n\tdefaultValue?: RadixToggleGroupMultipleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when multiple selected values change.\n\t */\n\tonValueChange?: RadixToggleGroupMultipleProps[\"onValueChange\"];\n\t/**\n\t * Whether all toggle group items are disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleGroupMultipleProps[\"disabled\"];\n\t/**\n\t * Whether keyboard navigation uses roving tabindex.\n\t * @default true\n\t */\n\trovingFocus?: RadixToggleGroupMultipleProps[\"rovingFocus\"];\n\t/**\n\t * Constrains keyboard navigation axis; does not alter horizontal CSS layout.\n\t */\n\torientation?: RadixToggleGroupMultipleProps[\"orientation\"];\n}\n\nexport type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;\n\nexport const ToggleGroup = React.forwardRef<\n\tReact.ElementRef<typeof ToggleGroupPrimitive.Root>,\n\tToggleGroupProps\n>(({ className, children, ...props }, ref) => {\n\tconst sliding = props.type === \"single\";\n\tconst {\n\t\tref: rootRef,\n\t\tstate,\n\t\tmotionClassName,\n\t} = useSelectionIndicator({\n\t\t// TooltipTrigger can also own data-state on a composed toggle.\n\t\titemSelector: '[aria-checked=\"true\"]',\n\t\tenabled: sliding,\n\t\tref,\n\t});\n\n\treturn (\n\t\t<ToggleGroupMode.Provider value={props.type}>\n\t\t\t<ToggleGroupPrimitive.Root\n\t\t\t\tref={rootRef}\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\t\"relative inline-flex h-8 shrink-0 items-center gap-0.5 rounded-full bg-basalt-muted p-0.5 ring-1 ring-basalt-border/70\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{sliding ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tdata-slot=\"selection-indicator\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"pointer-events-none absolute rounded-full bg-basalt-primary shadow-sm\",\n\t\t\t\t\t\t\tmotionClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tleft: state.left,\n\t\t\t\t\t\t\twidth: state.visible ? state.width : 0,\n\t\t\t\t\t\t\ttop: state.top,\n\t\t\t\t\t\t\theight: state.visible ? state.height : 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t\t{children}\n\t\t\t</ToggleGroupPrimitive.Root>\n\t\t</ToggleGroupMode.Provider>\n\t);\n});\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;\n\nexport interface ToggleGroupItemProps\n\textends Omit<RadixToggleGroupItemProps, \"value\" | \"disabled\"> {\n\t/**\n\t * Unique item value within the group. Forwards ref to HTMLButtonElement.\n\t */\n\tvalue: RadixToggleGroupItemProps[\"value\"];\n\t/**\n\t * Whether this toggle item is disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleGroupItemProps[\"disabled\"];\n}\n\nexport const ToggleGroupItem = React.forwardRef<\n\tReact.ElementRef<typeof ToggleGroupPrimitive.Item>,\n\tToggleGroupItemProps\n>(({ className, ...props }, ref) => {\n\tconst mode = React.useContext(ToggleGroupMode);\n\treturn (\n\t\t<ToggleGroupPrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative inline-flex h-7 cursor-pointer items-center rounded-full px-2.5 text-[11px] font-semibold tracking-wide text-basalt-muted-foreground transition-colors before:absolute before:inset-0\",\n\t\t\t\t\"hover:text-basalt-foreground\",\n\t\t\t\tFOCUS_RING,\n\t\t\t\t\"aria-checked:text-basalt-primary-foreground aria-pressed:text-basalt-primary-foreground\",\n\t\t\t\tmode === \"multiple\" && \"aria-pressed:bg-basalt-primary aria-pressed:shadow-sm\",\n\t\t\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;\n"],"mappings":";;;;;;;;;AAOA,IAAME,IAAkBF,EAAM,cAAqC,QAAQ,GAwF9DG,IAAcH,EAAM,YAG9B,EAAE,cAAW,aAAU,GAAGI,KAAS,MAAQ;CAC7C,IAAMC,IAAUD,EAAM,SAAS,UACzB,EACL,KAAKE,GACL,UACA,uBACGC,EAAsB;EAEzB,cAAc;EACd,SAASF;EACT;CACD,CAAC;CAED,OACC,kBAACH,EAAgB,UAAjB;EAA0B,OAAOE,EAAM;EACtC,UAAA,kBAACH,EAAqB,MAAtB;GACC,KAAKK;GACL,WAAWE,EACVC,GACA,0HACAC,CACD;GACA,GAAIN;GAPL,UAAA,CASEC,IACA,kBAAC,QAAD;IACC,eAAY;IACZ,aAAU;IACV,WAAWG,EACV,yEACAG,CACD;IACA,OAAO;KACN,MAAMC,EAAM;KACZ,OAAOA,EAAM,UAAUA,EAAM,QAAQ;KACrC,KAAKA,EAAM;KACX,QAAQA,EAAM,UAAUA,EAAM,SAAS;IACxC;GACA,CAAA,IACE,MACHC,CACyB;;CACF,CAAA;AAE5B,CAAC;AACD,EAAY,cAAcZ,EAAqB,KAAK;AAepD,IAAaa,IAAkBd,EAAM,YAGlC,EAAE,cAAW,GAAGI,KAAS,MAAQ;CACnC,IAAMW,IAAOf,EAAM,WAAWE,CAAe;CAC7C,OACC,kBAACD,EAAqB,MAAtB;EACM;EACL,WAAWO,EACV,kMACA,gCACAQ,GACA,2FACAD,MAAS,cAAc,yDACvB,oDACAL,CACD;EACA,GAAIN;CACJ,CAAA;AAEH,CAAC;AACD,EAAgB,cAAcH,EAAqB,KAAK"}
+{"version":3,"file":"toggle-group.js","names":["React","ToggleGroupPrimitive","ToggleGroupMode","ToggleGroup","props","sliding","rootRef","useSelectionIndicator","cn","BASALT_UI_CLASS","className","motionClassName","state","children","ToggleGroupItem","mode","FOCUS_RING"],"sources":["../../src/components/toggle-group.tsx"],"sourcesContent":["import * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { useSelectionIndicator } from \"../utils/selection-indicator\";\nimport { FOCUS_RING } from \"./overlay\";\n\nconst ToggleGroupMode = React.createContext<\"single\" | \"multiple\">(\"single\");\n\ntype RadixToggleGroupSingleProps = React.ComponentPropsWithoutRef<\n\ttypeof ToggleGroupPrimitive.Root\n> & { type: \"single\" };\ntype RadixToggleGroupMultipleProps = React.ComponentPropsWithoutRef<\n\ttypeof ToggleGroupPrimitive.Root\n> & { type: \"multiple\" };\ntype RadixToggleGroupItemProps = React.ComponentPropsWithoutRef<typeof ToggleGroupPrimitive.Item>;\n\nexport interface ToggleGroupSingleProps\n\textends Omit<\n\t\tRadixToggleGroupSingleProps,\n\t\t\"type\" | \"value\" | \"defaultValue\" | \"onValueChange\" | \"disabled\" | \"rovingFocus\" | \"orientation\"\n\t> {\n\t/**\n\t * Single-selection mode.\n\t */\n\ttype: \"single\";\n\t/**\n\t * Controlled string value in single mode. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixToggleGroupSingleProps[\"value\"];\n\t/**\n\t * Default string value in single mode when initially rendered.\n\t * @default \"\"\n\t */\n\tdefaultValue?: RadixToggleGroupSingleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when single selected value changes.\n\t */\n\tonValueChange?: RadixToggleGroupSingleProps[\"onValueChange\"];\n\t/**\n\t * Whether all toggle group items are disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleGroupSingleProps[\"disabled\"];\n\t/**\n\t * Whether keyboard navigation uses roving tabindex.\n\t * @default true\n\t */\n\trovingFocus?: RadixToggleGroupSingleProps[\"rovingFocus\"];\n\t/**\n\t * Constrains keyboard navigation axis; does not alter horizontal CSS layout.\n\t */\n\torientation?: RadixToggleGroupSingleProps[\"orientation\"];\n}\n\nexport interface ToggleGroupMultipleProps\n\textends Omit<\n\t\tRadixToggleGroupMultipleProps,\n\t\t\"type\" | \"value\" | \"defaultValue\" | \"onValueChange\" | \"disabled\" | \"rovingFocus\" | \"orientation\"\n\t> {\n\t/**\n\t * Multiple-selection mode.\n\t */\n\ttype: \"multiple\";\n\t/**\n\t * Controlled array in multiple mode. Root forwards ref to HTMLDivElement.\n\t */\n\tvalue?: RadixToggleGroupMultipleProps[\"value\"];\n\t/**\n\t * Default string array in multiple mode when initially rendered.\n\t * @default []\n\t */\n\tdefaultValue?: RadixToggleGroupMultipleProps[\"defaultValue\"];\n\t/**\n\t * Callback invoked when multiple selected values change.\n\t */\n\tonValueChange?: RadixToggleGroupMultipleProps[\"onValueChange\"];\n\t/**\n\t * Whether all toggle group items are disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleGroupMultipleProps[\"disabled\"];\n\t/**\n\t * Whether keyboard navigation uses roving tabindex.\n\t * @default true\n\t */\n\trovingFocus?: RadixToggleGroupMultipleProps[\"rovingFocus\"];\n\t/**\n\t * Constrains keyboard navigation axis; does not alter horizontal CSS layout.\n\t */\n\torientation?: RadixToggleGroupMultipleProps[\"orientation\"];\n}\n\nexport type ToggleGroupProps = ToggleGroupSingleProps | ToggleGroupMultipleProps;\n\nexport const ToggleGroup = React.forwardRef<\n\tReact.ElementRef<typeof ToggleGroupPrimitive.Root>,\n\tToggleGroupProps\n>(({ className, children, ...props }, ref) => {\n\tconst sliding = props.type === \"single\";\n\tconst {\n\t\tref: rootRef,\n\t\tstate,\n\t\tmotionClassName,\n\t} = useSelectionIndicator({\n\t\t// TooltipTrigger can also own data-state on a composed toggle.\n\t\titemSelector: '[aria-checked=\"true\"]',\n\t\tenabled: sliding,\n\t\tref,\n\t});\n\n\treturn (\n\t\t<ToggleGroupMode.Provider value={props.type}>\n\t\t\t<ToggleGroupPrimitive.Root\n\t\t\t\tref={rootRef}\n\t\t\t\tclassName={cn(\n\t\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\t\t\"relative inline-flex shrink-0 items-center gap-basalt-space-xs rounded-basalt-full bg-basalt-muted p-basalt-space-xs ring-1 ring-basalt-border/70\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{sliding ? (\n\t\t\t\t\t<span\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tdata-slot=\"selection-indicator\"\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\t\"pointer-events-none absolute rounded-basalt-full bg-basalt-primary\",\n\t\t\t\t\t\t\tmotionClassName,\n\t\t\t\t\t\t)}\n\t\t\t\t\t\tstyle={{\n\t\t\t\t\t\t\tleft: 0,\n\t\t\t\t\t\t\ttransform: `translate(${state.left}px, ${state.top}px)`,\n\t\t\t\t\t\t\twidth: state.visible ? state.width : 0,\n\t\t\t\t\t\t\ttop: 0,\n\t\t\t\t\t\t\theight: state.visible ? state.height : 0,\n\t\t\t\t\t\t}}\n\t\t\t\t\t/>\n\t\t\t\t) : null}\n\t\t\t\t{children}\n\t\t\t</ToggleGroupPrimitive.Root>\n\t\t</ToggleGroupMode.Provider>\n\t);\n});\nToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;\n\nexport interface ToggleGroupItemProps\n\textends Omit<RadixToggleGroupItemProps, \"value\" | \"disabled\"> {\n\t/**\n\t * Unique item value within the group. Forwards ref to HTMLButtonElement.\n\t */\n\tvalue: RadixToggleGroupItemProps[\"value\"];\n\t/**\n\t * Whether this toggle item is disabled.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleGroupItemProps[\"disabled\"];\n}\n\nexport const ToggleGroupItem = React.forwardRef<\n\tReact.ElementRef<typeof ToggleGroupPrimitive.Item>,\n\tToggleGroupItemProps\n>(({ className, ...props }, ref) => {\n\tconst mode = React.useContext(ToggleGroupMode);\n\treturn (\n\t\t<ToggleGroupPrimitive.Item\n\t\t\tref={ref}\n\t\t\tclassName={cn(\n\t\t\t\t\"relative basalt-action basalt-action-sm inline-flex cursor-pointer items-center rounded-basalt-full font-semibold leading-[var(--basalt-line-body)] tracking-wide text-basalt-muted-foreground transition-colors basalt-motion before:absolute before:-inset-basalt-border-width\",\n\t\t\t\t\"hover:text-basalt-foreground\",\n\t\t\t\tFOCUS_RING,\n\t\t\t\t\"aria-checked:text-basalt-primary-foreground aria-pressed:text-basalt-primary-foreground\",\n\t\t\t\tmode === \"multiple\" && \"aria-pressed:bg-basalt-primary\",\n\t\t\t\t\"disabled:pointer-events-none disabled:opacity-50\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n});\nToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;\n"],"mappings":";;;;;;;;;AAOA,IAAME,IAAkBF,EAAM,cAAqC,QAAQ,GAwF9DG,IAAcH,EAAM,YAG9B,EAAE,cAAW,aAAU,GAAGI,KAAS,MAAQ;CAC7C,IAAMC,IAAUD,EAAM,SAAS,UACzB,EACL,KAAKE,GACL,UACA,uBACGC,EAAsB;EAEzB,cAAc;EACd,SAASF;EACT;CACD,CAAC;CAED,OACC,kBAACH,EAAgB,UAAjB;EAA0B,OAAOE,EAAM;EACtC,UAAA,kBAACH,EAAqB,MAAtB;GACC,KAAKK;GACL,WAAWE,EACVC,GACA,qJACAC,CACD;GACA,GAAIN;GAPL,UAAA,CASEC,IACA,kBAAC,QAAD;IACC,eAAY;IACZ,aAAU;IACV,WAAWG,EACV,sEACAG,CACD;IACA,OAAO;KACN,MAAM;KACN,WAAW,aAAaC,EAAM,KAAK,MAAMA,EAAM,IAAI;KACnD,OAAOA,EAAM,UAAUA,EAAM,QAAQ;KACrC,KAAK;KACL,QAAQA,EAAM,UAAUA,EAAM,SAAS;IACxC;GACA,CAAA,IACE,MACHC,CACyB;;CACF,CAAA;AAE5B,CAAC;AACD,EAAY,cAAcZ,EAAqB,KAAK;AAepD,IAAaa,IAAkBd,EAAM,YAGlC,EAAE,cAAW,GAAGI,KAAS,MAAQ;CACnC,IAAMW,IAAOf,EAAM,WAAWE,CAAe;CAC7C,OACC,kBAACD,EAAqB,MAAtB;EACM;EACL,WAAWO,EACV,oRACA,gCACAQ,GACA,2FACAD,MAAS,cAAc,kCACvB,oDACAL,CACD;EACA,GAAIN;CACJ,CAAA;AAEH,CAAC;AACD,EAAgB,cAAcH,EAAqB,KAAK"}

package/dist/components/toggle.js

@@ -7,16 +7,16 @@ import { cva as i } from "class-variance-authority";
 import { jsx as a } from "react/jsx-runtime";
 import * as o from "@radix-ui/react-toggle";
 //#region src/components/toggle.tsx
-var s = i(`${t} relative inline-flex cursor-pointer items-center justify-center rounded-basalt-md text-sm font-medium transition-colors before:absolute before:inset-0 hover:bg-basalt-accent aria-pressed:bg-basalt-accent ${n}`, {
+var s = i(`${t} basalt-choice relative inline-flex cursor-pointer items-center justify-center rounded-basalt-md font-medium transition-colors basalt-motion before:absolute before:-inset-basalt-border-width hover:bg-basalt-hover ${n}`, {
 	variants: {
 		variant: {
-			default: "bg-basalt-muted text-basalt-foreground",
-			outline: "border border-basalt-border bg-basalt-secondary"
+			default: "bg-basalt-control text-basalt-foreground",
+			outline: "border border-basalt-border bg-basalt-control"
 		},
 		size: {
-			default: "h-9 px-3",
-			sm: "h-8 px-2 text-xs",
-			lg: "h-10 px-4"
+			default: "basalt-action",
+			sm: "basalt-action basalt-action-sm",
+			lg: "basalt-action basalt-action-lg"
 		}
 	},
 	defaultVariants: {

package/dist/components/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","names":["React","TogglePrimitive","toggleVariants","cva","BASALT_UI_CLASS","FOCUS_RING","Toggle","props","cn","className"],"sources":["../../src/components/toggle.tsx"],"sourcesContent":["import * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\nconst toggleVariants = cva(\n\t`${BASALT_UI_CLASS} relative inline-flex cursor-pointer items-center justify-center rounded-basalt-md text-sm font-medium transition-colors before:absolute before:inset-0 hover:bg-basalt-accent aria-pressed:bg-basalt-accent ${FOCUS_RING}`,\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-muted text-basalt-foreground\",\n\t\t\t\toutline: \"border border-basalt-border bg-basalt-secondary\",\n\t\t\t},\n\t\t\tsize: { default: \"h-9 px-3\", sm: \"h-8 px-2 text-xs\", lg: \"h-10 px-4\" },\n\t\t},\n\t\tdefaultVariants: { variant: \"default\", size: \"default\" },\n\t},\n);\n\ntype RadixToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>;\n\nexport interface ToggleProps\n\textends Omit<RadixToggleProps, \"pressed\" | \"defaultPressed\" | \"onPressedChange\" | \"disabled\">,\n\t\tOmit<VariantProps<typeof toggleVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof toggleVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof toggleVariants>[\"size\"];\n\t/**\n\t * Controlled pressed state of the toggle. Forwards ref to HTMLButtonElement.\n\t */\n\tpressed?: RadixToggleProps[\"pressed\"];\n\t/**\n\t * Uncontrolled pressed state when initially rendered.\n\t * @default false\n\t */\n\tdefaultPressed?: RadixToggleProps[\"defaultPressed\"];\n\t/**\n\t * Callback invoked when pressed state changes.\n\t */\n\tonPressedChange?: RadixToggleProps[\"onPressedChange\"];\n\t/**\n\t * Whether the toggle is disabled from user interaction.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleProps[\"disabled\"];\n}\n\nexport const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(\n\t({ className, variant, size, ...props }, ref) => (\n\t\t<TogglePrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(toggleVariants({ variant, size }), className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nToggle.displayName = TogglePrimitive.Root.displayName;\n"],"mappings":";;;;;;;;;AAOA,IAAME,IAAiBC,EACtB,GAAGC,EAAgB,+MAA+MC,KAClO;CACC,UAAU;EACT,SAAS;GACR,SAAS;GACT,SAAS;EACV;EACA,MAAM;GAAE,SAAS;GAAY,IAAI;GAAoB,IAAI;EAAY;CACtE;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAU;AACxD,CACD,GAqCaC,IAASN,EAAM,YAC1B,EAAE,cAAW,YAAS,SAAM,GAAGO,KAAS,MACxC,kBAACN,EAAgB,MAAjB;CACM;CACL,WAAWO,EAAGN,EAAe;EAAE;EAAS;CAAK,CAAC,GAAGO,CAAS;CAC1D,GAAIF;AACJ,CAAA,CAEH;AACA,EAAO,cAAcN,EAAgB,KAAK"}
+{"version":3,"file":"toggle.js","names":["React","TogglePrimitive","toggleVariants","cva","BASALT_UI_CLASS","FOCUS_RING","Toggle","props","cn","className"],"sources":["../../src/components/toggle.tsx"],"sourcesContent":["import * as TogglePrimitive from \"@radix-ui/react-toggle\";\nimport { cva, type VariantProps } from \"class-variance-authority\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { FOCUS_RING } from \"./overlay\";\n\nconst toggleVariants = cva(\n\t`${BASALT_UI_CLASS} basalt-choice relative inline-flex cursor-pointer items-center justify-center rounded-basalt-md font-medium transition-colors basalt-motion before:absolute before:-inset-basalt-border-width hover:bg-basalt-hover ${FOCUS_RING}`,\n\t{\n\t\tvariants: {\n\t\t\tvariant: {\n\t\t\t\tdefault: \"bg-basalt-control text-basalt-foreground\",\n\t\t\t\toutline: \"border border-basalt-border bg-basalt-control\",\n\t\t\t},\n\t\t\tsize: {\n\t\t\t\tdefault: \"basalt-action\",\n\t\t\t\tsm: \"basalt-action basalt-action-sm\",\n\t\t\t\tlg: \"basalt-action basalt-action-lg\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: { variant: \"default\", size: \"default\" },\n\t},\n);\n\ntype RadixToggleProps = React.ComponentPropsWithoutRef<typeof TogglePrimitive.Root>;\n\nexport interface ToggleProps\n\textends Omit<RadixToggleProps, \"pressed\" | \"defaultPressed\" | \"onPressedChange\" | \"disabled\">,\n\t\tOmit<VariantProps<typeof toggleVariants>, \"variant\" | \"size\"> {\n\t/**\n\t * Visual style variant.\n\t * @default \"default\"\n\t */\n\tvariant?: VariantProps<typeof toggleVariants>[\"variant\"];\n\t/**\n\t * Sizing preset.\n\t * @default \"default\"\n\t */\n\tsize?: VariantProps<typeof toggleVariants>[\"size\"];\n\t/**\n\t * Controlled pressed state of the toggle. Forwards ref to HTMLButtonElement.\n\t */\n\tpressed?: RadixToggleProps[\"pressed\"];\n\t/**\n\t * Uncontrolled pressed state when initially rendered.\n\t * @default false\n\t */\n\tdefaultPressed?: RadixToggleProps[\"defaultPressed\"];\n\t/**\n\t * Callback invoked when pressed state changes.\n\t */\n\tonPressedChange?: RadixToggleProps[\"onPressedChange\"];\n\t/**\n\t * Whether the toggle is disabled from user interaction.\n\t * @default false\n\t */\n\tdisabled?: RadixToggleProps[\"disabled\"];\n}\n\nexport const Toggle = React.forwardRef<React.ElementRef<typeof TogglePrimitive.Root>, ToggleProps>(\n\t({ className, variant, size, ...props }, ref) => (\n\t\t<TogglePrimitive.Root\n\t\t\tref={ref}\n\t\t\tclassName={cn(toggleVariants({ variant, size }), className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nToggle.displayName = TogglePrimitive.Root.displayName;\n"],"mappings":";;;;;;;;;AAOA,IAAME,IAAiBC,EACtB,GAAGC,EAAgB,uNAAuNC,KAC1O;CACC,UAAU;EACT,SAAS;GACR,SAAS;GACT,SAAS;EACV;EACA,MAAM;GACL,SAAS;GACT,IAAI;GACJ,IAAI;EACL;CACD;CACA,iBAAiB;EAAE,SAAS;EAAW,MAAM;CAAU;AACxD,CACD,GAqCaC,IAASN,EAAM,YAC1B,EAAE,cAAW,YAAS,SAAM,GAAGO,KAAS,MACxC,kBAACN,EAAgB,MAAjB;CACM;CACL,WAAWO,EAAGN,EAAe;EAAE;EAAS;CAAK,CAAC,GAAGO,CAAS;CAC1D,GAAIF;AACJ,CAAA,CAEH;AACA,EAAO,cAAcN,EAAgB,KAAK"}

package/dist/components/tool-chips.d.ts

@@ -0,0 +1,12 @@
+import type { ToolDiff, ToolStep } from "../models/agent-feedback.js";
+export type { ToolDiff, ToolStep } from "../models/agent-feedback.js";
+export interface ToolChipsProps {
+    /** Caller-owned tool activity; statuses never advance automatically. */
+    steps: readonly ToolStep[];
+    diffs?: readonly ToolDiff[];
+    title?: string;
+    /** Start with the tool list expanded. @default true */
+    defaultOpen?: boolean;
+    className?: string;
+}
+export declare function ToolChips({ steps, diffs, title, defaultOpen, className, }: ToolChipsProps): import("react").JSX.Element;

package/dist/components/tool-chips.js

@@ -0,0 +1,138 @@
+"use client";
+import { cn as e } from "../utils/cn.js";
+import { Button as t } from "./button.js";
+import { Collapsible as n, CollapsibleContent as r, CollapsibleTrigger as i } from "./collapsible.js";
+import { useHoverHighlight as a } from "../utils/use-hover-highlight.js";
+import { Popover as o, PopoverContent as s, PopoverTitle as c, PopoverTrigger as l } from "./popover.js";
+import { useToolChipsViewModel as u } from "../viewmodels/use-tool-chips.js";
+import { CodeBlock as d } from "./code.js";
+import { Loader as f } from "./loader.js";
+import { Check as p, CircleAlert as m, FileText as h, Pencil as g, Sparkles as _, Terminal as v } from "lucide-react";
+import { jsx as y, jsxs as b } from "react/jsx-runtime";
+//#region src/components/tool-chips.tsx
+var x = {
+	think: _,
+	read: h,
+	write: g,
+	run: v
+};
+function S({ steps: h, diffs: g = [], title: _, defaultOpen: v = !0, className: S }) {
+	let C = u(h, v), w = a();
+	return /* @__PURE__ */ b(n, {
+		open: C.open,
+		onOpenChange: C.setOpen,
+		className: e("basalt-ui w-full space-y-basalt-content-gap leading-[var(--basalt-line-body)]", S),
+		children: [/* @__PURE__ */ y(i, {
+			className: "rounded-basalt-sm px-basalt-row-x py-basalt-control-y text-basalt-muted-foreground",
+			children: /* @__PURE__ */ y("span", {
+				role: "status",
+				children: _ ?? `${C.total} tool calls · ${C.completed} complete`
+			})
+		}), /* @__PURE__ */ b(r, {
+			ref: w,
+			unstyled: !0,
+			className: "basalt-hover-list space-y-basalt-space-sm",
+			children: [
+				h.map((e) => {
+					let t = x[e.kind];
+					return /* @__PURE__ */ b(n, {
+						open: C.expanded.includes(e.id),
+						onOpenChange: (t) => C.setExpanded(e.id, t),
+						className: "basalt-agent-reveal",
+						children: [/* @__PURE__ */ y(i, {
+							"data-basalt-hover-item": "",
+							"data-hover-selected": C.expanded.includes(e.id),
+							"aria-label": [
+								e.label,
+								e.target,
+								e.status
+							].filter(Boolean).join(" "),
+							className: "w-full min-h-basalt-control items-start justify-between rounded-basalt-sm px-basalt-row-x py-basalt-row-y leading-basalt-row [&>svg]:mt-[calc((var(--basalt-line-row)-var(--basalt-size-icon-sm))/2)]",
+							children: /* @__PURE__ */ b("span", {
+								className: "flex min-w-0 items-start gap-basalt-row-gap text-basalt-base leading-basalt-row",
+								children: [
+									/* @__PURE__ */ y("span", {
+										className: "flex h-[var(--basalt-line-row)] w-basalt-icon-lg shrink-0 items-center justify-center",
+										children: /* @__PURE__ */ y(t, {
+											"aria-hidden": "true",
+											className: "size-basalt-icon-lg",
+											strokeWidth: 1.5
+										})
+									}),
+									/* @__PURE__ */ b("span", {
+										className: "flex min-w-0 flex-wrap items-center gap-x-basalt-row-gap",
+										children: [/* @__PURE__ */ y("span", { children: e.label }), e.target && /* @__PURE__ */ y("span", {
+											className: "max-w-full truncate font-mono text-basalt-code text-basalt-muted-foreground",
+											children: e.target
+										})]
+									}),
+									/* @__PURE__ */ y("span", {
+										role: "img",
+										"aria-label": e.status,
+										className: "flex h-[var(--basalt-line-row)] w-basalt-icon-sm shrink-0 items-center justify-center",
+										children: e.status === "running" ? /* @__PURE__ */ y(f, {
+											size: 12,
+											showLabel: !1,
+											showElapsed: !1,
+											"aria-hidden": "true"
+										}) : e.status === "complete" ? /* @__PURE__ */ y(p, { size: 12 }) : e.status === "error" ? /* @__PURE__ */ y(m, {
+											size: 12,
+											className: "text-basalt-danger"
+										}) : null
+									})
+								]
+							})
+						}), /* @__PURE__ */ y(r, {
+							unstyled: !0,
+							className: "pl-basalt-row-content pr-basalt-row-x pb-basalt-row-y",
+							children: /* @__PURE__ */ y("p", {
+								className: "whitespace-pre-wrap break-words text-basalt-code text-basalt-muted-foreground",
+								children: e.detail || "No output yet"
+							})
+						})]
+					}, e.id);
+				}),
+				h.length === 0 && /* @__PURE__ */ y("p", {
+					className: "px-basalt-row-x py-basalt-space-lg text-basalt-sm text-basalt-muted-foreground",
+					children: "No tool calls yet"
+				}),
+				/* @__PURE__ */ y("div", {
+					className: "flex flex-wrap gap-basalt-content-gap px-basalt-row-x",
+					children: g.map((e) => /* @__PURE__ */ b(o, { children: [/* @__PURE__ */ y(l, {
+						asChild: !0,
+						children: /* @__PURE__ */ b(t, {
+							variant: "outline",
+							size: "sm",
+							"aria-label": `${e.file} +${e.added} -${e.removed}`,
+							children: [
+								/* @__PURE__ */ y("span", {
+									className: "font-mono text-basalt-sm",
+									children: e.file
+								}),
+								/* @__PURE__ */ b("span", {
+									className: "text-basalt-primary",
+									children: ["+", e.added]
+								}),
+								/* @__PURE__ */ b("span", {
+									className: "text-basalt-danger",
+									children: ["-", e.removed]
+								})
+							]
+						})
+					}), /* @__PURE__ */ b(s, {
+						arrow: !1,
+						className: "max-w-[calc(100vw-2rem)]",
+						children: [/* @__PURE__ */ y(c, { children: e.file }), /* @__PURE__ */ y(d, {
+							className: "mt-basalt-space-lg max-h-basalt-64 text-basalt-sm",
+							children: e.content || "No diff preview available"
+						})]
+					})] }, e.file))
+				})
+			]
+		})]
+	});
+}
+//#endregion
+export { S as ToolChips };
+
+//# sourceMappingURL=tool-chips.js.map

package/dist/components/tool-chips.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tool-chips.js","names":["ICONS","Sparkles","FileText","Pencil","Terminal","ToolChips","vm","useToolChipsViewModel","steps","defaultOpen","highlightRef","useHoverHighlight","Collapsible","cn","className","CollapsibleTrigger","title","CollapsibleContent","Icon","step","next","Loader","Check","CircleAlert","diffs","Popover","PopoverTrigger","Button","diff","PopoverContent","PopoverTitle","CodeBlock"],"sources":["../../src/components/tool-chips.tsx"],"sourcesContent":["import { Check, CircleAlert, FileText, Pencil, Sparkles, Terminal } from \"lucide-react\";\nimport type { ToolDiff, ToolStep } from \"../models/agent-feedback\";\nimport { cn } from \"../utils/cn\";\nimport { useHoverHighlight } from \"../utils/use-hover-highlight\";\nimport { useToolChipsViewModel } from \"../viewmodels/use-tool-chips\";\nimport { Button } from \"./button\";\nimport { CodeBlock } from \"./code\";\nimport { Collapsible, CollapsibleContent, CollapsibleTrigger } from \"./collapsible\";\nimport { Loader } from \"./loader\";\nimport { Popover, PopoverContent, PopoverTitle, PopoverTrigger } from \"./popover\";\n\nexport type { ToolDiff, ToolStep } from \"../models/agent-feedback\";\nexport interface ToolChipsProps {\n\t/** Caller-owned tool activity; statuses never advance automatically. */\n\tsteps: readonly ToolStep[];\n\tdiffs?: readonly ToolDiff[];\n\ttitle?: string;\n\t/** Start with the tool list expanded. @default true */\n\tdefaultOpen?: boolean;\n\tclassName?: string;\n}\nconst ICONS = { think: Sparkles, read: FileText, write: Pencil, run: Terminal };\n\nexport function ToolChips({\n\tsteps,\n\tdiffs = [],\n\ttitle,\n\tdefaultOpen = true,\n\tclassName,\n}: ToolChipsProps) {\n\tconst vm = useToolChipsViewModel(steps, defaultOpen);\n\tconst highlightRef = useHoverHighlight();\n\treturn (\n\t\t<Collapsible\n\t\t\topen={vm.open}\n\t\t\tonOpenChange={vm.setOpen}\n\t\t\tclassName={cn(\n\t\t\t\t\"basalt-ui w-full space-y-basalt-content-gap leading-[var(--basalt-line-body)]\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t>\n\t\t\t<CollapsibleTrigger className=\"rounded-basalt-sm px-basalt-row-x py-basalt-control-y text-basalt-muted-foreground\">\n\t\t\t\t<span role=\"status\">{title ?? `${vm.total} tool calls · ${vm.completed} complete`}</span>\n\t\t\t</CollapsibleTrigger>\n\t\t\t<CollapsibleContent\n\t\t\t\tref={highlightRef}\n\t\t\t\tunstyled\n\t\t\t\tclassName=\"basalt-hover-list space-y-basalt-space-sm\"\n\t\t\t>\n\t\t\t\t{steps.map((step) => {\n\t\t\t\t\tconst Icon = ICONS[step.kind];\n\t\t\t\t\treturn (\n\t\t\t\t\t\t<Collapsible\n\t\t\t\t\t\t\tkey={step.id}\n\t\t\t\t\t\t\topen={vm.expanded.includes(step.id)}\n\t\t\t\t\t\t\tonOpenChange={(next) => vm.setExpanded(step.id, next)}\n\t\t\t\t\t\t\tclassName=\"basalt-agent-reveal\"\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<CollapsibleTrigger\n\t\t\t\t\t\t\t\tdata-basalt-hover-item=\"\"\n\t\t\t\t\t\t\t\tdata-hover-selected={vm.expanded.includes(step.id)}\n\t\t\t\t\t\t\t\taria-label={[step.label, step.target, step.status].filter(Boolean).join(\" \")}\n\t\t\t\t\t\t\t\tclassName=\"w-full min-h-basalt-control items-start justify-between rounded-basalt-sm px-basalt-row-x py-basalt-row-y leading-basalt-row [&>svg]:mt-[calc((var(--basalt-line-row)-var(--basalt-size-icon-sm))/2)]\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<span className=\"flex min-w-0 items-start gap-basalt-row-gap text-basalt-base leading-basalt-row\">\n\t\t\t\t\t\t\t\t\t<span className=\"flex h-[var(--basalt-line-row)] w-basalt-icon-lg shrink-0 items-center justify-center\">\n\t\t\t\t\t\t\t\t\t\t<Icon aria-hidden=\"true\" className=\"size-basalt-icon-lg\" strokeWidth={1.5} />\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span className=\"flex min-w-0 flex-wrap items-center gap-x-basalt-row-gap\">\n\t\t\t\t\t\t\t\t\t\t<span>{step.label}</span>\n\t\t\t\t\t\t\t\t\t\t{step.target && (\n\t\t\t\t\t\t\t\t\t\t\t<span className=\"max-w-full truncate font-mono text-basalt-code text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t\t\t\t{step.target}\n\t\t\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t\t)}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t\t<span\n\t\t\t\t\t\t\t\t\t\trole=\"img\"\n\t\t\t\t\t\t\t\t\t\taria-label={step.status}\n\t\t\t\t\t\t\t\t\t\tclassName=\"flex h-[var(--basalt-line-row)] w-basalt-icon-sm shrink-0 items-center justify-center\"\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t{step.status === \"running\" ? (\n\t\t\t\t\t\t\t\t\t\t\t<Loader size={12} showLabel={false} showElapsed={false} aria-hidden=\"true\" />\n\t\t\t\t\t\t\t\t\t\t) : step.status === \"complete\" ? (\n\t\t\t\t\t\t\t\t\t\t\t<Check size={12} />\n\t\t\t\t\t\t\t\t\t\t) : step.status === \"error\" ? (\n\t\t\t\t\t\t\t\t\t\t\t<CircleAlert size={12} className=\"text-basalt-danger\" />\n\t\t\t\t\t\t\t\t\t\t) : null}\n\t\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t\t</span>\n\t\t\t\t\t\t\t</CollapsibleTrigger>\n\t\t\t\t\t\t\t<CollapsibleContent\n\t\t\t\t\t\t\t\tunstyled\n\t\t\t\t\t\t\t\tclassName=\"pl-basalt-row-content pr-basalt-row-x pb-basalt-row-y\"\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<p className=\"whitespace-pre-wrap break-words text-basalt-code text-basalt-muted-foreground\">\n\t\t\t\t\t\t\t\t\t{step.detail || \"No output yet\"}\n\t\t\t\t\t\t\t\t</p>\n\t\t\t\t\t\t\t</CollapsibleContent>\n\t\t\t\t\t\t</Collapsible>\n\t\t\t\t\t);\n\t\t\t\t})}\n\t\t\t\t{steps.length === 0 && (\n\t\t\t\t\t<p className=\"px-basalt-row-x py-basalt-space-lg text-basalt-sm text-basalt-muted-foreground\">\n\t\t\t\t\t\tNo tool calls yet\n\t\t\t\t\t</p>\n\t\t\t\t)}\n\t\t\t\t<div className=\"flex flex-wrap gap-basalt-content-gap px-basalt-row-x\">\n\t\t\t\t\t{diffs.map((diff) => (\n\t\t\t\t\t\t<Popover key={diff.file}>\n\t\t\t\t\t\t\t<PopoverTrigger asChild>\n\t\t\t\t\t\t\t\t<Button\n\t\t\t\t\t\t\t\t\tvariant=\"outline\"\n\t\t\t\t\t\t\t\t\tsize=\"sm\"\n\t\t\t\t\t\t\t\t\taria-label={`${diff.file} +${diff.added} -${diff.removed}`}\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<span className=\"font-mono text-basalt-sm\">{diff.file}</span>\n\t\t\t\t\t\t\t\t\t<span className=\"text-basalt-primary\">+{diff.added}</span>\n\t\t\t\t\t\t\t\t\t<span className=\"text-basalt-danger\">-{diff.removed}</span>\n\t\t\t\t\t\t\t\t</Button>\n\t\t\t\t\t\t\t</PopoverTrigger>\n\t\t\t\t\t\t\t<PopoverContent arrow={false} className=\"max-w-[calc(100vw-2rem)]\">\n\t\t\t\t\t\t\t\t<PopoverTitle>{diff.file}</PopoverTitle>\n\t\t\t\t\t\t\t\t<CodeBlock className=\"mt-basalt-space-lg max-h-basalt-64 text-basalt-sm\">\n\t\t\t\t\t\t\t\t\t{diff.content || \"No diff preview available\"}\n\t\t\t\t\t\t\t\t</CodeBlock>\n\t\t\t\t\t\t\t</PopoverContent>\n\t\t\t\t\t\t</Popover>\n\t\t\t\t\t))}\n\t\t\t\t</div>\n\t\t\t</CollapsibleContent>\n\t\t</Collapsible>\n\t);\n}\n"],"mappings":";;;;;;;;;;;;AAqBA,IAAMA,IAAQ;CAAE,OAAOC;CAAU,MAAMC;CAAU,OAAOC;CAAQ,KAAKC;AAAS;AAE9E,SAAgBC,EAAU,EACzB,UACA,WAAQ,CAAC,GACT,UACA,iBAAc,IACd,gBACkB;CAClB,IAAMC,IAAKC,EAAsBC,GAAOC,CAAW,GAC7CC,IAAeC,EAAkB;CACvC,OACC,kBAACC,GAAD;EACC,MAAMN,EAAG;EACT,cAAcA,EAAG;EACjB,WAAWO,EACV,iFACAC,CACD;EAND,UAAA,CAQC,kBAACC,GAAD;GAAoB,WAAU;GAC7B,UAAA,kBAAC,QAAD;IAAM,MAAK;IAAU,UAAAC,KAAS,GAAGV,EAAG,MAAM,gBAAgBA,EAAG,UAAU;GAAiB,CAAA;EACrE,CAAA,GACpB,kBAACW,GAAD;GACC,KAAKP;GACL,UAAA;GACA,WAAU;GAHX,UAAA;IAKEF,EAAM,KAAK,MAAS;KACpB,IAAMU,IAAOlB,EAAMmB,EAAK;KACxB,OACC,kBAACP,GAAD;MAEC,MAAMN,EAAG,SAAS,SAASa,EAAK,EAAE;MAClC,eAAe,MAASb,EAAG,YAAYa,EAAK,IAAIC,CAAI;MACpD,WAAU;MAJX,UAAA,CAMC,kBAACL,GAAD;OACC,0BAAuB;OACvB,uBAAqBT,EAAG,SAAS,SAASa,EAAK,EAAE;OACjD,cAAY;QAACA,EAAK;QAAOA,EAAK;QAAQA,EAAK;OAAM,CAAC,CAAC,OAAO,OAAO,CAAC,CAAC,KAAK,GAAG;OAC3E,WAAU;OAEV,UAAA,kBAAC,QAAD;QAAM,WAAU;QAAhB,UAAA;SACC,kBAAC,QAAD;UAAM,WAAU;UACf,UAAA,kBAACD,GAAD;WAAM,eAAY;WAAO,WAAU;WAAsB,aAAa;UAAM,CAAA;SACvE,CAAA;SACN,kBAAC,QAAD;UAAM,WAAU;UAAhB,UAAA,CACC,kBAAC,QAAD,EAAA,UAAOC,EAAK,MAAY,CAAA,GACvBA,EAAK,UACL,kBAAC,QAAD;WAAM,WAAU;WACd,UAAAA,EAAK;UACD,CAAA,CAEF;;SACN,kBAAC,QAAD;UACC,MAAK;UACL,cAAYA,EAAK;UACjB,WAAU;UAET,UAAAA,EAAK,WAAW,YAChB,kBAACE,GAAD;WAAQ,MAAM;WAAI,WAAW;WAAO,aAAa;WAAO,eAAY;UAAQ,CAAA,IACzEF,EAAK,WAAW,aACnB,kBAACG,GAAD,EAAO,MAAM,GAAK,CAAA,IACfH,EAAK,WAAW,UACnB,kBAACI,GAAD;WAAa,MAAM;WAAI,WAAU;UAAsB,CAAA,IACpD;SACC,CAAA;QACD;;MACa,CAAA,GACpB,kBAACN,GAAD;OACC,UAAA;OACA,WAAU;OAEV,UAAA,kBAAC,KAAD;QAAG,WAAU;QACX,UAAAE,EAAK,UAAU;OACd,CAAA;MACgB,CAAA,CACR;KA9CP,GAAAA,EAAK,EA8CE;IAEf,CAAC;IACAX,EAAM,WAAW,KACjB,kBAAC,KAAD;KAAG,WAAU;KAAiF,UAAA;IAE3F,CAAA;IAEJ,kBAAC,OAAD;KAAK,WAAU;KACb,UAAAgB,EAAM,KAAK,MACX,kBAACC,GAAD,EAAA,UAAA,CACC,kBAACC,GAAD;MAAgB,SAAA;MACf,UAAA,kBAACC,GAAD;OACC,SAAQ;OACR,MAAK;OACL,cAAY,GAAGC,EAAK,KAAK,IAAIA,EAAK,MAAM,IAAIA,EAAK;OAHlD,UAAA;QAKC,kBAAC,QAAD;SAAM,WAAU;SAA4B,UAAAA,EAAK;QAAW,CAAA;QAC5D,kBAAC,QAAD;SAAM,WAAU;SAAhB,UAAA,CAAsC,KAAEA,EAAK,KAAY;;QACzD,kBAAC,QAAD;SAAM,WAAU;SAAhB,UAAA,CAAqC,KAAEA,EAAK,OAAc;;OACnD;;KACO,CAAA,GAChB,kBAACC,GAAD;MAAgB,OAAO;MAAO,WAAU;MAAxC,UAAA,CACC,kBAACC,GAAD,EAAA,UAAeF,EAAK,KAAmB,CAAA,GACvC,kBAACG,GAAD;OAAW,WAAU;OACnB,UAAAH,EAAK,WAAW;MACP,CAAA,CACI;KACR,CAAA,CAAA,EAAA,GAlBKA,EAAK,IAkBV,CACT;IACG,CAAA;GACc;EACR,CAAA,CAAA;;AAEf"}

package/dist/components/toolbar.js

@@ -43,7 +43,7 @@ var l = i.forwardRef(({ className: t, onKeyDown: n, onFocus: r, ...o }, l) => {
 			let i = t[e.key === "ArrowRight" ? (r + 1) % t.length : (r - 1 + t.length) % t.length];
 			i && (c(t, i), i.focus());
 		},
-		className: e("inline-flex w-fit items-stretch rounded-basalt-md bg-basalt-secondary shadow-xs ring-1 ring-basalt-border", "[&>*:not(:first-child)]:border-l [&>*:not(:first-child)]:border-basalt-border", t)
+		className: e("inline-flex w-fit items-stretch rounded-basalt-md bg-basalt-control shadow-xs ring-1 ring-basalt-border", "[&>*:not(:first-child)]:border-l [&>*:not(:first-child)]:border-basalt-border", t)
 	});
 });
 l.displayName = "Toolbar";
@@ -52,7 +52,7 @@ var u = i.forwardRef(({ className: t, size: r, icon: i, children: s, ...c }, l)
 	return /* @__PURE__ */ a(n, {
 		ref: l,
 		icon: i,
-		className: e(o, "h-auto min-h-9 shrink-0", u === "icon" && "w-9", t),
+		className: e(o, "h-auto min-h-basalt-control shrink-0", u === "icon" && "w-basalt-control", t),
 		...c,
 		variant: "ghost",
 		size: u,
@@ -62,7 +62,7 @@ var u = i.forwardRef(({ className: t, size: r, icon: i, children: s, ...c }, l)
 u.displayName = "Toolbar.Button";
 var d = i.forwardRef(({ className: n, ...i }, s) => /* @__PURE__ */ a(r, {
 	ref: s,
-	className: e(o, t, "h-auto min-h-9", n),
+	className: e(o, t, "h-auto min-h-basalt-control", n),
 	...i
 }));
 d.displayName = "Toolbar.Input";

package/dist/components/toolbar.js.map

@@ -1 +1 @@
-{"version":3,"file":"toolbar.js","names":["React","toolbarControlClass","cn","toolbarItems","root","node","setRovingTab","item","items","active","ToolbarRoot","props","innerRef","ref","event","target","onKeyDown","start","index","className","ToolbarButton","resolvedSize","size","icon","children","Button","ToolbarInput","Input","FOCUS_INSET","Toolbar"],"sources":["../../src/components/toolbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { Input } from \"./input\";\nimport { FOCUS_INSET } from \"./overlay\";\n\nconst toolbarControlClass = cn(\n\t\"relative min-w-0 rounded-none border-0 bg-transparent shadow-none\",\n\t\"first:rounded-l-basalt-md last:rounded-r-basalt-md\",\n\t\"focus-within:z-2 focus:z-2 focus-visible:z-2\",\n);\n\nexport type ToolbarProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"aria-label\"> & {\n\t/**\n\t * Accessible name for the toolbar.\n\t */\n\t\"aria-label\"?: string;\n};\n\nfunction toolbarItems(root: HTMLElement) {\n\treturn [\n\t\t...root.querySelectorAll<HTMLElement>(\"button:not([disabled]), input:not([disabled])\"),\n\t].filter((node) => node.closest('[role=\"toolbar\"]') === root);\n}\n\nfunction setRovingTab(items: HTMLElement[], active: HTMLElement) {\n\tfor (const item of items) {\n\t\titem.tabIndex = item === active ? 0 : -1;\n\t}\n}\n\nconst ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>(\n\t({ className, onKeyDown, onFocus, ...props }, ref) => {\n\t\tconst innerRef = React.useRef<HTMLDivElement | null>(null);\n\t\tReact.useLayoutEffect(() => {\n\t\t\tconst root = innerRef.current;\n\t\t\tif (!root) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst items = toolbarItems(root);\n\t\t\tconst active =\n\t\t\t\titems.find((item) => item.tabIndex === 0 && !(item as HTMLButtonElement).disabled) ??\n\t\t\t\titems[0];\n\t\t\tif (active) {\n\t\t\t\tsetRovingTab(items, active);\n\t\t\t}\n\t\t});\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={(node) => {\n\t\t\t\t\tinnerRef.current = node;\n\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\tref(node);\n\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\tref.current = node;\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t\trole=\"toolbar\"\n\t\t\t\tonFocus={(event) => {\n\t\t\t\t\tonFocus?.(event);\n\t\t\t\t\tconst items = toolbarItems(event.currentTarget);\n\t\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\t\tif (items.includes(target)) {\n\t\t\t\t\t\tsetRovingTab(items, target);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\tonKeyDown?.(event);\n\t\t\t\t\tif (event.defaultPrevented || (event.key !== \"ArrowRight\" && event.key !== \"ArrowLeft\")) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif (\n\t\t\t\t\t\tevent.target instanceof HTMLInputElement ||\n\t\t\t\t\t\tevent.target instanceof HTMLTextAreaElement\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst start = event.target.selectionStart ?? 0;\n\t\t\t\t\t\tconst end = event.target.selectionEnd ?? start;\n\t\t\t\t\t\tif (start !== end) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (event.key === \"ArrowLeft\" && start > 0) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (event.key === \"ArrowRight\" && start < event.target.value.length) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tconst items = toolbarItems(event.currentTarget);\n\t\t\t\t\tconst index = items.indexOf(event.target as HTMLElement);\n\t\t\t\t\tif (index < 0 || items.length === 0) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tconst next =\n\t\t\t\t\t\tevent.key === \"ArrowRight\"\n\t\t\t\t\t\t\t? (index + 1) % items.length\n\t\t\t\t\t\t\t: (index - 1 + items.length) % items.length;\n\t\t\t\t\tconst node = items[next];\n\t\t\t\t\tif (node) {\n\t\t\t\t\t\tsetRovingTab(items, node);\n\t\t\t\t\t\tnode.focus();\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"inline-flex w-fit items-stretch rounded-basalt-md bg-basalt-secondary shadow-xs ring-1 ring-basalt-border\",\n\t\t\t\t\t\"[&>*:not(:first-child)]:border-l [&>*:not(:first-child)]:border-basalt-border\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t/>\n\t\t);\n\t},\n);\nToolbarRoot.displayName = \"Toolbar\";\n\nexport type ToolbarButtonProps = Omit<ButtonProps, \"variant\" | \"disabled\" | \"asChild\"> & {\n\t/**\n\t * Disable the toolbar button.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(\n\t({ className, size, icon, children, ...props }, ref) => {\n\t\tconst resolvedSize = size ?? (icon && children == null ? \"icon\" : \"default\");\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\ticon={icon}\n\t\t\t\tclassName={cn(\n\t\t\t\t\ttoolbarControlClass,\n\t\t\t\t\t\"h-auto min-h-9 shrink-0\",\n\t\t\t\t\tresolvedSize === \"icon\" && \"w-9\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tsize={resolvedSize}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Button>\n\t\t);\n\t},\n);\nToolbarButton.displayName = \"Toolbar.Button\";\n\nexport type ToolbarInputProps = Omit<React.ComponentPropsWithoutRef<typeof Input>, \"disabled\"> & {\n\t/**\n\t * Disable the toolbar input.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const ToolbarInput = React.forwardRef<HTMLInputElement, ToolbarInputProps>(\n\t({ className, ...props }, ref) => (\n\t\t<Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(toolbarControlClass, FOCUS_INSET, \"h-auto min-h-9\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nToolbarInput.displayName = \"Toolbar.Input\";\n\nexport const Toolbar = Object.assign(ToolbarRoot, {\n\tButton: ToolbarButton,\n\tInput: ToolbarInput,\n});\n"],"mappings":";;;;;;;;AAMA,IAAMC,IAAsBC,EAC3B,qEACA,sDACA,8CACD;AASA,SAASC,EAAa,GAAmB;CACxC,OAAO,CACN,GAAGC,EAAK,iBAA8B,+CAA+C,CACtF,CAAC,CAAC,QAAQ,MAASC,EAAK,QAAQ,oBAAkB,MAAMD,CAAI;AAC7D;AAEA,SAASE,EAAa,GAAsB,GAAqB;CAChE,KAAK,IAAMC,KAAQC,GAClB,EAAK,WAAWD,MAASE,IAAS,IAAI;AAExC;AAEA,IAAMC,IAAcV,EAAM,YACxB,EAAE,cAAW,cAAW,YAAS,GAAGW,KAAS,MAAQ;CACrD,IAAMC,IAAWZ,EAAM,OAA8B,IAAI;CAczD,OAbAA,EAAM,sBAAsB;EAC3B,IAAMI,IAAOQ,EAAS;EACtB,IAAI,CAACR,GACJ;EAED,IAAMI,IAAQL,EAAaC,CAAI,GACzBK,IACLD,EAAM,MAAM,MAASD,EAAK,aAAa,KAAK,CAAEA,EAA2B,QAAQ,KACjFC,EAAM;EACP,AAAIC,KACHH,EAAaE,GAAOC,CAAM;CAE5B,CAAC,GAEA,kBAAC,OAAD;EACC,MAAM,MAAS;GAEd,AADA,EAAS,UAAUJ,GACf,OAAOQ,KAAQ,aAClBA,EAAIR,CAAI,IACEQ,MACV,EAAI,UAAUR;EAEhB;EACA,GAAIM;EACJ,MAAK;EACL,UAAU,MAAU;GACnB,IAAUG,CAAK;GACf,IAAMN,IAAQL,EAAaW,EAAM,aAAa,GACxCC,IAASD,EAAM;GACrB,AAAIN,EAAM,SAASO,CAAM,KACxBT,EAAaE,GAAOO,CAAM;EAE5B;EACA,YAAY,MAAU;GAErB,IADAC,IAAYF,CAAK,GACbA,EAAM,oBAAqBA,EAAM,QAAQ,gBAAgBA,EAAM,QAAQ,aAC1E;GAED,IACCA,EAAM,kBAAkB,oBACxBA,EAAM,kBAAkB,qBACvB;IACD,IAAMG,IAAQH,EAAM,OAAO,kBAAkB;IAQ7C,IANIG,OADQH,EAAM,OAAO,gBAAgBG,MAIrCH,EAAM,QAAQ,eAAeG,IAAQ,KAGrCH,EAAM,QAAQ,gBAAgBG,IAAQH,EAAM,OAAO,MAAM,QAC5D;GAEF;GACA,IAAMN,IAAQL,EAAaW,EAAM,aAAa,GACxCI,IAAQV,EAAM,QAAQM,EAAM,MAAqB;GACvD,IAAII,IAAQ,KAAKV,EAAM,WAAW,GACjC;GAED,EAAM,eAAe;GAKrB,IAAMH,IAAOG,EAHZM,EAAM,QAAQ,gBACVI,IAAQ,KAAKV,EAAM,UACnBU,IAAQ,IAAIV,EAAM,UAAUA,EAAM;GAEvC,AAAIH,MACHC,EAAaE,GAAOH,CAAI,GACxBA,EAAK,MAAM;EAEb;EACA,WAAWH,EACV,6GACA,iFACAiB,CACD;CACA,CAAA;AAEH,CACD;AACA,EAAY,cAAc;AAU1B,IAAaC,IAAgBpB,EAAM,YACjC,EAAE,cAAW,SAAM,SAAM,aAAU,GAAGW,KAAS,MAAQ;CACvD,IAAMU,IAAeC,MAASC,KAAQC,KAAY,OAAO,SAAS;CAClE,OACC,kBAACC,GAAD;EACM;EACC;EACN,WAAWvB,EACVD,GACA,2BACAoB,MAAiB,UAAU,OAC3BF,CACD;EACA,GAAIR;EACJ,SAAQ;EACR,MAAMU;EAEL;CACM,CAAA;AAEV,CACD;AACA,EAAc,cAAc;AAU5B,IAAaK,IAAe1B,EAAM,YAChC,EAAE,cAAW,GAAGW,KAAS,MACzB,kBAACgB,GAAD;CACM;CACL,WAAWzB,EAAGD,GAAqB2B,GAAa,kBAAkBT,CAAS;CAC3E,GAAIR;AACJ,CAAA,CAEH;AACA,EAAa,cAAc;AAE3B,IAAakB,IAAU,OAAO,OAAOnB,GAAa;CACjD,QAAQU;CACR,OAAOM;AACR,CAAC"}
+{"version":3,"file":"toolbar.js","names":["React","toolbarControlClass","cn","toolbarItems","root","node","setRovingTab","item","items","active","ToolbarRoot","props","innerRef","ref","event","target","onKeyDown","start","index","className","ToolbarButton","resolvedSize","size","icon","children","Button","ToolbarInput","Input","FOCUS_INSET","Toolbar"],"sources":["../../src/components/toolbar.tsx"],"sourcesContent":["import * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { Button, type ButtonProps } from \"./button\";\nimport { Input } from \"./input\";\nimport { FOCUS_INSET } from \"./overlay\";\n\nconst toolbarControlClass = cn(\n\t\"relative min-w-0 rounded-none border-0 bg-transparent shadow-none\",\n\t\"first:rounded-l-basalt-md last:rounded-r-basalt-md\",\n\t\"focus-within:z-2 focus:z-2 focus-visible:z-2\",\n);\n\nexport type ToolbarProps = Omit<React.HTMLAttributes<HTMLDivElement>, \"aria-label\"> & {\n\t/**\n\t * Accessible name for the toolbar.\n\t */\n\t\"aria-label\"?: string;\n};\n\nfunction toolbarItems(root: HTMLElement) {\n\treturn [\n\t\t...root.querySelectorAll<HTMLElement>(\"button:not([disabled]), input:not([disabled])\"),\n\t].filter((node) => node.closest('[role=\"toolbar\"]') === root);\n}\n\nfunction setRovingTab(items: HTMLElement[], active: HTMLElement) {\n\tfor (const item of items) {\n\t\titem.tabIndex = item === active ? 0 : -1;\n\t}\n}\n\nconst ToolbarRoot = React.forwardRef<HTMLDivElement, ToolbarProps>(\n\t({ className, onKeyDown, onFocus, ...props }, ref) => {\n\t\tconst innerRef = React.useRef<HTMLDivElement | null>(null);\n\t\tReact.useLayoutEffect(() => {\n\t\t\tconst root = innerRef.current;\n\t\t\tif (!root) {\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tconst items = toolbarItems(root);\n\t\t\tconst active =\n\t\t\t\titems.find((item) => item.tabIndex === 0 && !(item as HTMLButtonElement).disabled) ??\n\t\t\t\titems[0];\n\t\t\tif (active) {\n\t\t\t\tsetRovingTab(items, active);\n\t\t\t}\n\t\t});\n\t\treturn (\n\t\t\t<div\n\t\t\t\tref={(node) => {\n\t\t\t\t\tinnerRef.current = node;\n\t\t\t\t\tif (typeof ref === \"function\") {\n\t\t\t\t\t\tref(node);\n\t\t\t\t\t} else if (ref) {\n\t\t\t\t\t\tref.current = node;\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\t{...props}\n\t\t\t\trole=\"toolbar\"\n\t\t\t\tonFocus={(event) => {\n\t\t\t\t\tonFocus?.(event);\n\t\t\t\t\tconst items = toolbarItems(event.currentTarget);\n\t\t\t\t\tconst target = event.target as HTMLElement;\n\t\t\t\t\tif (items.includes(target)) {\n\t\t\t\t\t\tsetRovingTab(items, target);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tonKeyDown={(event) => {\n\t\t\t\t\tonKeyDown?.(event);\n\t\t\t\t\tif (event.defaultPrevented || (event.key !== \"ArrowRight\" && event.key !== \"ArrowLeft\")) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tif (\n\t\t\t\t\t\tevent.target instanceof HTMLInputElement ||\n\t\t\t\t\t\tevent.target instanceof HTMLTextAreaElement\n\t\t\t\t\t) {\n\t\t\t\t\t\tconst start = event.target.selectionStart ?? 0;\n\t\t\t\t\t\tconst end = event.target.selectionEnd ?? start;\n\t\t\t\t\t\tif (start !== end) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (event.key === \"ArrowLeft\" && start > 0) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t\tif (event.key === \"ArrowRight\" && start < event.target.value.length) {\n\t\t\t\t\t\t\treturn;\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\tconst items = toolbarItems(event.currentTarget);\n\t\t\t\t\tconst index = items.indexOf(event.target as HTMLElement);\n\t\t\t\t\tif (index < 0 || items.length === 0) {\n\t\t\t\t\t\treturn;\n\t\t\t\t\t}\n\t\t\t\t\tevent.preventDefault();\n\t\t\t\t\tconst next =\n\t\t\t\t\t\tevent.key === \"ArrowRight\"\n\t\t\t\t\t\t\t? (index + 1) % items.length\n\t\t\t\t\t\t\t: (index - 1 + items.length) % items.length;\n\t\t\t\t\tconst node = items[next];\n\t\t\t\t\tif (node) {\n\t\t\t\t\t\tsetRovingTab(items, node);\n\t\t\t\t\t\tnode.focus();\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"inline-flex w-fit items-stretch rounded-basalt-md bg-basalt-control shadow-xs ring-1 ring-basalt-border\",\n\t\t\t\t\t\"[&>*:not(:first-child)]:border-l [&>*:not(:first-child)]:border-basalt-border\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t/>\n\t\t);\n\t},\n);\nToolbarRoot.displayName = \"Toolbar\";\n\nexport type ToolbarButtonProps = Omit<ButtonProps, \"variant\" | \"disabled\" | \"asChild\"> & {\n\t/**\n\t * Disable the toolbar button.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const ToolbarButton = React.forwardRef<HTMLButtonElement, ToolbarButtonProps>(\n\t({ className, size, icon, children, ...props }, ref) => {\n\t\tconst resolvedSize = size ?? (icon && children == null ? \"icon\" : \"default\");\n\t\treturn (\n\t\t\t<Button\n\t\t\t\tref={ref}\n\t\t\t\ticon={icon}\n\t\t\t\tclassName={cn(\n\t\t\t\t\ttoolbarControlClass,\n\t\t\t\t\t\"h-auto min-h-basalt-control shrink-0\",\n\t\t\t\t\tresolvedSize === \"icon\" && \"w-basalt-control\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t\tvariant=\"ghost\"\n\t\t\t\tsize={resolvedSize}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Button>\n\t\t);\n\t},\n);\nToolbarButton.displayName = \"Toolbar.Button\";\n\nexport type ToolbarInputProps = Omit<React.ComponentPropsWithoutRef<typeof Input>, \"disabled\"> & {\n\t/**\n\t * Disable the toolbar input.\n\t * @default false\n\t */\n\tdisabled?: boolean;\n};\n\nexport const ToolbarInput = React.forwardRef<HTMLInputElement, ToolbarInputProps>(\n\t({ className, ...props }, ref) => (\n\t\t<Input\n\t\t\tref={ref}\n\t\t\tclassName={cn(toolbarControlClass, FOCUS_INSET, \"h-auto min-h-basalt-control\", className)}\n\t\t\t{...props}\n\t\t/>\n\t),\n);\nToolbarInput.displayName = \"Toolbar.Input\";\n\nexport const Toolbar = Object.assign(ToolbarRoot, {\n\tButton: ToolbarButton,\n\tInput: ToolbarInput,\n});\n"],"mappings":";;;;;;;;AAMA,IAAMC,IAAsBC,EAC3B,qEACA,sDACA,8CACD;AASA,SAASC,EAAa,GAAmB;CACxC,OAAO,CACN,GAAGC,EAAK,iBAA8B,+CAA+C,CACtF,CAAC,CAAC,QAAQ,MAASC,EAAK,QAAQ,oBAAkB,MAAMD,CAAI;AAC7D;AAEA,SAASE,EAAa,GAAsB,GAAqB;CAChE,KAAK,IAAMC,KAAQC,GAClB,EAAK,WAAWD,MAASE,IAAS,IAAI;AAExC;AAEA,IAAMC,IAAcV,EAAM,YACxB,EAAE,cAAW,cAAW,YAAS,GAAGW,KAAS,MAAQ;CACrD,IAAMC,IAAWZ,EAAM,OAA8B,IAAI;CAczD,OAbAA,EAAM,sBAAsB;EAC3B,IAAMI,IAAOQ,EAAS;EACtB,IAAI,CAACR,GACJ;EAED,IAAMI,IAAQL,EAAaC,CAAI,GACzBK,IACLD,EAAM,MAAM,MAASD,EAAK,aAAa,KAAK,CAAEA,EAA2B,QAAQ,KACjFC,EAAM;EACP,AAAIC,KACHH,EAAaE,GAAOC,CAAM;CAE5B,CAAC,GAEA,kBAAC,OAAD;EACC,MAAM,MAAS;GAEd,AADA,EAAS,UAAUJ,GACf,OAAOQ,KAAQ,aAClBA,EAAIR,CAAI,IACEQ,MACV,EAAI,UAAUR;EAEhB;EACA,GAAIM;EACJ,MAAK;EACL,UAAU,MAAU;GACnB,IAAUG,CAAK;GACf,IAAMN,IAAQL,EAAaW,EAAM,aAAa,GACxCC,IAASD,EAAM;GACrB,AAAIN,EAAM,SAASO,CAAM,KACxBT,EAAaE,GAAOO,CAAM;EAE5B;EACA,YAAY,MAAU;GAErB,IADAC,IAAYF,CAAK,GACbA,EAAM,oBAAqBA,EAAM,QAAQ,gBAAgBA,EAAM,QAAQ,aAC1E;GAED,IACCA,EAAM,kBAAkB,oBACxBA,EAAM,kBAAkB,qBACvB;IACD,IAAMG,IAAQH,EAAM,OAAO,kBAAkB;IAQ7C,IANIG,OADQH,EAAM,OAAO,gBAAgBG,MAIrCH,EAAM,QAAQ,eAAeG,IAAQ,KAGrCH,EAAM,QAAQ,gBAAgBG,IAAQH,EAAM,OAAO,MAAM,QAC5D;GAEF;GACA,IAAMN,IAAQL,EAAaW,EAAM,aAAa,GACxCI,IAAQV,EAAM,QAAQM,EAAM,MAAqB;GACvD,IAAII,IAAQ,KAAKV,EAAM,WAAW,GACjC;GAED,EAAM,eAAe;GAKrB,IAAMH,IAAOG,EAHZM,EAAM,QAAQ,gBACVI,IAAQ,KAAKV,EAAM,UACnBU,IAAQ,IAAIV,EAAM,UAAUA,EAAM;GAEvC,AAAIH,MACHC,EAAaE,GAAOH,CAAI,GACxBA,EAAK,MAAM;EAEb;EACA,WAAWH,EACV,2GACA,iFACAiB,CACD;CACA,CAAA;AAEH,CACD;AACA,EAAY,cAAc;AAU1B,IAAaC,IAAgBpB,EAAM,YACjC,EAAE,cAAW,SAAM,SAAM,aAAU,GAAGW,KAAS,MAAQ;CACvD,IAAMU,IAAeC,MAASC,KAAQC,KAAY,OAAO,SAAS;CAClE,OACC,kBAACC,GAAD;EACM;EACC;EACN,WAAWvB,EACVD,GACA,wCACAoB,MAAiB,UAAU,oBAC3BF,CACD;EACA,GAAIR;EACJ,SAAQ;EACR,MAAMU;EAEL;CACM,CAAA;AAEV,CACD;AACA,EAAc,cAAc;AAU5B,IAAaK,IAAe1B,EAAM,YAChC,EAAE,cAAW,GAAGW,KAAS,MACzB,kBAACgB,GAAD;CACM;CACL,WAAWzB,EAAGD,GAAqB2B,GAAa,+BAA+BT,CAAS;CACxF,GAAIR;AACJ,CAAA,CAEH;AACA,EAAa,cAAc;AAE3B,IAAakB,IAAU,OAAO,OAAOnB,GAAa;CACjD,QAAQU;CACR,OAAOM;AACR,CAAC"}

package/dist/components/tooltip.js

@@ -11,7 +11,7 @@ var s = o.Provider, c = o.Root, l = o.Trigger, u = i.forwardRef(({ className: i,
 	children: /* @__PURE__ */ a(o.Content, {
 		ref: l,
 		sideOffset: s,
-		className: e(t, n, r, "overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover px-2 py-1 text-xs font-normal leading-4 text-basalt-popover-foreground shadow-md", i),
+		className: e(t, n, r, "basalt-floating overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover px-basalt-space-lg py-basalt-space-sm text-basalt-sm font-normal leading-[var(--basalt-line-compact)] text-basalt-popover-foreground shadow-md", i),
 		...c
 	})
 }));

package/dist/components/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","names":["React","TooltipPrimitive","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent","props","cn","BASALT_UI_CLASS","OVERLAY_LAYER","OVERLAY_MOTION","className"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\ntype RadixTooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\ntype RadixTooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;\ntype RadixTooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\ntype RadixTooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;\n\nexport interface TooltipProviderProps\n\textends Omit<\n\t\tRadixTooltipProviderProps,\n\t\t\"children\" | \"delayDuration\" | \"skipDelayDuration\" | \"disableHoverableContent\"\n\t> {\n\t/**\n\t * Application or component tree wrapped by the tooltip provider context.\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * Default delay before tooltips open when pointer enters a trigger, in milliseconds.\n\t * Can be overridden per tooltip instance via Tooltip.\n\t * @default 700\n\t */\n\tdelayDuration?: RadixTooltipProviderProps[\"delayDuration\"];\n\t/**\n\t * Duration in milliseconds a user has to enter another trigger without incurring the opening delay again.\n\t * @default 300\n\t */\n\tskipDelayDuration?: RadixTooltipProviderProps[\"skipDelayDuration\"];\n\t/**\n\t * When true, moving pointer into tooltip content closes the tooltip as pointer leaves trigger.\n\t * @default false\n\t */\n\tdisableHoverableContent?: RadixTooltipProviderProps[\"disableHoverableContent\"];\n}\n\nexport const TooltipProvider: React.FC<TooltipProviderProps> = TooltipPrimitive.Provider;\n\nexport interface TooltipProps\n\textends Omit<\n\t\tRadixTooltipProps,\n\t\t| \"children\"\n\t\t| \"open\"\n\t\t| \"defaultOpen\"\n\t\t| \"onOpenChange\"\n\t\t| \"delayDuration\"\n\t\t| \"disableHoverableContent\"\n\t> {\n\t/**\n\t * Content elements rendered within the tooltip root, typically a TooltipTrigger and TooltipContent.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Controlled open state of the tooltip.\n\t */\n\topen?: RadixTooltipProps[\"open\"];\n\t/**\n\t * Uncontrolled initial open state of the tooltip.\n\t * @default false\n\t */\n\tdefaultOpen?: RadixTooltipProps[\"defaultOpen\"];\n\t/**\n\t * Callback called when the open state changes.\n\t */\n\tonOpenChange?: RadixTooltipProps[\"onOpenChange\"];\n\t/**\n\t * Delay before the tooltip opens, in milliseconds. Overrides TooltipProvider delayDuration.\n\t * Defaults to provider value (typically 700ms).\n\t */\n\tdelayDuration?: RadixTooltipProps[\"delayDuration\"];\n\t/**\n\t * When true, moving pointer into tooltip content closes the tooltip as pointer leaves trigger.\n\t * Overrides TooltipProvider setting.\n\t */\n\tdisableHoverableContent?: RadixTooltipProps[\"disableHoverableContent\"];\n}\n\nexport const Tooltip: React.FC<TooltipProps> = TooltipPrimitive.Root;\n\nexport interface TooltipTriggerProps extends Omit<RadixTooltipTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * TooltipTrigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixTooltipTriggerProps[\"asChild\"];\n}\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport interface TooltipContentProps\n\textends Omit<\n\t\tRadixTooltipContentProps,\n\t\t| \"aria-label\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"side\"\n\t\t| \"sideOffset\"\n\t\t| \"align\"\n\t\t| \"alignOffset\"\n\t\t| \"avoidCollisions\"\n\t\t| \"collisionBoundary\"\n\t\t| \"collisionPadding\"\n\t\t| \"arrowPadding\"\n\t\t| \"sticky\"\n\t\t| \"hideWhenDetached\"\n\t\t| \"updatePositionStrategy\"\n\t\t| \"forceMount\"\n\t\t| \"asChild\"\n\t> {\n\t/**\n\t * A more descriptive accessible label announced by screen readers.\n\t */\n\t\"aria-label\"?: RadixTooltipContentProps[\"aria-label\"];\n\t/**\n\t * Callback fired when the Escape key is down on the tooltip content layer. Can be prevented.\n\t */\n\tonEscapeKeyDown?: RadixTooltipContentProps[\"onEscapeKeyDown\"];\n\t/**\n\t * Callback fired when a pointerdown event happens outside the bounds of the tooltip. Can be prevented.\n\t */\n\tonPointerDownOutside?: RadixTooltipContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Preferred placement side relative to trigger.\n\t * @default \"top\"\n\t */\n\tside?: RadixTooltipContentProps[\"side\"];\n\t/**\n\t * Distance in pixels between trigger and floating content panel.\n\t * @default 4\n\t */\n\tsideOffset?: RadixTooltipContentProps[\"sideOffset\"];\n\t/**\n\t * Preferred alignment along the side axis.\n\t * @default \"center\"\n\t */\n\talign?: RadixTooltipContentProps[\"align\"];\n\t/**\n\t * Offset in pixels from the start or end alignment position.\n\t * @default 0\n\t */\n\talignOffset?: RadixTooltipContentProps[\"alignOffset\"];\n\t/**\n\t * Whether to reposition content to avoid viewport boundary collisions.\n\t * @default true\n\t */\n\tavoidCollisions?: RadixTooltipContentProps[\"avoidCollisions\"];\n\t/**\n\t * Element or elements bounding boundary collision calculations.\n\t * @default []\n\t */\n\tcollisionBoundary?: RadixTooltipContentProps[\"collisionBoundary\"];\n\t/**\n\t * Virtual padding from collision boundaries in pixels.\n\t * @default 0\n\t */\n\tcollisionPadding?: RadixTooltipContentProps[\"collisionPadding\"];\n\t/**\n\t * Padding in pixels between popper arrow and floating panel edge.\n\t * @default 0\n\t */\n\tarrowPadding?: RadixTooltipContentProps[\"arrowPadding\"];\n\t/**\n\t * Sticky positioning behavior along the align axis when overflowing.\n\t * @default \"partial\"\n\t */\n\tsticky?: RadixTooltipContentProps[\"sticky\"];\n\t/**\n\t * Whether to hide content completely when trigger is fully occluded.\n\t * @default false\n\t */\n\thideWhenDetached?: RadixTooltipContentProps[\"hideWhenDetached\"];\n\t/**\n\t * Strategy used to calculate and update popper position.\n\t * @default \"optimized\"\n\t */\n\tupdatePositionStrategy?: RadixTooltipContentProps[\"updatePositionStrategy\"];\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 */\n\tforceMount?: true;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * TooltipContent forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixTooltipContentProps[\"asChild\"];\n}\n\nexport const TooltipContent = React.forwardRef<\n\tReact.ElementRef<typeof TooltipPrimitive.Content>,\n\tTooltipContentProps\n>(({ className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal forceMount={props.forceMount}>\n\t\t<TooltipPrimitive.Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\tOVERLAY_LAYER,\n\t\t\t\tOVERLAY_MOTION,\n\t\t\t\t\"overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover px-2 py-1 text-xs font-normal leading-4 text-basalt-popover-foreground shadow-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</TooltipPrimitive.Portal>\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n"],"mappings":";;;;;;;;AAsCA,IAAaE,IAAkDD,EAAiB,UAyCnEE,IAAkCF,EAAiB,MAWnDG,IAAiBH,EAAiB,SAuGlCI,IAAiBL,EAAM,YAGjC,EAAE,cAAW,gBAAa,GAAG,GAAGM,KAAS,MAC3C,kBAACL,EAAiB,QAAlB;CAAyB,YAAYK,EAAM;CAC1C,UAAA,kBAACL,EAAiB,SAAlB;EACM;EACO;EACZ,WAAWM,EACVC,GACAC,GACAC,GACA,oKACAC,CACD;EACA,GAAIL;CACJ,CAAA;AACuB,CAAA,CACzB;AACD,EAAe,cAAcL,EAAiB,QAAQ"}
+{"version":3,"file":"tooltip.js","names":["React","TooltipPrimitive","TooltipProvider","Tooltip","TooltipTrigger","TooltipContent","props","cn","BASALT_UI_CLASS","OVERLAY_LAYER","OVERLAY_MOTION","className"],"sources":["../../src/components/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport * as React from \"react\";\nimport { cn } from \"../utils/cn\";\nimport { BASALT_UI_CLASS } from \"../utils/control-surface\";\nimport { OVERLAY_LAYER, OVERLAY_MOTION } from \"./overlay\";\n\ntype RadixTooltipProviderProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Provider>;\ntype RadixTooltipProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Root>;\ntype RadixTooltipTriggerProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Trigger>;\ntype RadixTooltipContentProps = React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content>;\n\nexport interface TooltipProviderProps\n\textends Omit<\n\t\tRadixTooltipProviderProps,\n\t\t\"children\" | \"delayDuration\" | \"skipDelayDuration\" | \"disableHoverableContent\"\n\t> {\n\t/**\n\t * Application or component tree wrapped by the tooltip provider context.\n\t */\n\tchildren: React.ReactNode;\n\t/**\n\t * Default delay before tooltips open when pointer enters a trigger, in milliseconds.\n\t * Can be overridden per tooltip instance via Tooltip.\n\t * @default 700\n\t */\n\tdelayDuration?: RadixTooltipProviderProps[\"delayDuration\"];\n\t/**\n\t * Duration in milliseconds a user has to enter another trigger without incurring the opening delay again.\n\t * @default 300\n\t */\n\tskipDelayDuration?: RadixTooltipProviderProps[\"skipDelayDuration\"];\n\t/**\n\t * When true, moving pointer into tooltip content closes the tooltip as pointer leaves trigger.\n\t * @default false\n\t */\n\tdisableHoverableContent?: RadixTooltipProviderProps[\"disableHoverableContent\"];\n}\n\nexport const TooltipProvider: React.FC<TooltipProviderProps> = TooltipPrimitive.Provider;\n\nexport interface TooltipProps\n\textends Omit<\n\t\tRadixTooltipProps,\n\t\t| \"children\"\n\t\t| \"open\"\n\t\t| \"defaultOpen\"\n\t\t| \"onOpenChange\"\n\t\t| \"delayDuration\"\n\t\t| \"disableHoverableContent\"\n\t> {\n\t/**\n\t * Content elements rendered within the tooltip root, typically a TooltipTrigger and TooltipContent.\n\t */\n\tchildren?: React.ReactNode;\n\t/**\n\t * Controlled open state of the tooltip.\n\t */\n\topen?: RadixTooltipProps[\"open\"];\n\t/**\n\t * Uncontrolled initial open state of the tooltip.\n\t * @default false\n\t */\n\tdefaultOpen?: RadixTooltipProps[\"defaultOpen\"];\n\t/**\n\t * Callback called when the open state changes.\n\t */\n\tonOpenChange?: RadixTooltipProps[\"onOpenChange\"];\n\t/**\n\t * Delay before the tooltip opens, in milliseconds. Overrides TooltipProvider delayDuration.\n\t * Defaults to provider value (typically 700ms).\n\t */\n\tdelayDuration?: RadixTooltipProps[\"delayDuration\"];\n\t/**\n\t * When true, moving pointer into tooltip content closes the tooltip as pointer leaves trigger.\n\t * Overrides TooltipProvider setting.\n\t */\n\tdisableHoverableContent?: RadixTooltipProps[\"disableHoverableContent\"];\n}\n\nexport const Tooltip: React.FC<TooltipProps> = TooltipPrimitive.Root;\n\nexport interface TooltipTriggerProps extends Omit<RadixTooltipTriggerProps, \"asChild\"> {\n\t/**\n\t * Change the default rendered button element to the child element, merging props and behavior.\n\t * TooltipTrigger forwards ref to HTMLButtonElement and inherits native button attributes.\n\t * @default false\n\t */\n\tasChild?: RadixTooltipTriggerProps[\"asChild\"];\n}\n\nexport const TooltipTrigger = TooltipPrimitive.Trigger;\n\nexport interface TooltipContentProps\n\textends Omit<\n\t\tRadixTooltipContentProps,\n\t\t| \"aria-label\"\n\t\t| \"onEscapeKeyDown\"\n\t\t| \"onPointerDownOutside\"\n\t\t| \"side\"\n\t\t| \"sideOffset\"\n\t\t| \"align\"\n\t\t| \"alignOffset\"\n\t\t| \"avoidCollisions\"\n\t\t| \"collisionBoundary\"\n\t\t| \"collisionPadding\"\n\t\t| \"arrowPadding\"\n\t\t| \"sticky\"\n\t\t| \"hideWhenDetached\"\n\t\t| \"updatePositionStrategy\"\n\t\t| \"forceMount\"\n\t\t| \"asChild\"\n\t> {\n\t/**\n\t * A more descriptive accessible label announced by screen readers.\n\t */\n\t\"aria-label\"?: RadixTooltipContentProps[\"aria-label\"];\n\t/**\n\t * Callback fired when the Escape key is down on the tooltip content layer. Can be prevented.\n\t */\n\tonEscapeKeyDown?: RadixTooltipContentProps[\"onEscapeKeyDown\"];\n\t/**\n\t * Callback fired when a pointerdown event happens outside the bounds of the tooltip. Can be prevented.\n\t */\n\tonPointerDownOutside?: RadixTooltipContentProps[\"onPointerDownOutside\"];\n\t/**\n\t * Preferred placement side relative to trigger.\n\t * @default \"top\"\n\t */\n\tside?: RadixTooltipContentProps[\"side\"];\n\t/**\n\t * Distance in pixels between trigger and floating content panel.\n\t * @default 4\n\t */\n\tsideOffset?: RadixTooltipContentProps[\"sideOffset\"];\n\t/**\n\t * Preferred alignment along the side axis.\n\t * @default \"center\"\n\t */\n\talign?: RadixTooltipContentProps[\"align\"];\n\t/**\n\t * Offset in pixels from the start or end alignment position.\n\t * @default 0\n\t */\n\talignOffset?: RadixTooltipContentProps[\"alignOffset\"];\n\t/**\n\t * Whether to reposition content to avoid viewport boundary collisions.\n\t * @default true\n\t */\n\tavoidCollisions?: RadixTooltipContentProps[\"avoidCollisions\"];\n\t/**\n\t * Element or elements bounding boundary collision calculations.\n\t * @default []\n\t */\n\tcollisionBoundary?: RadixTooltipContentProps[\"collisionBoundary\"];\n\t/**\n\t * Virtual padding from collision boundaries in pixels.\n\t * @default 0\n\t */\n\tcollisionPadding?: RadixTooltipContentProps[\"collisionPadding\"];\n\t/**\n\t * Padding in pixels between popper arrow and floating panel edge.\n\t * @default 0\n\t */\n\tarrowPadding?: RadixTooltipContentProps[\"arrowPadding\"];\n\t/**\n\t * Sticky positioning behavior along the align axis when overflowing.\n\t * @default \"partial\"\n\t */\n\tsticky?: RadixTooltipContentProps[\"sticky\"];\n\t/**\n\t * Whether to hide content completely when trigger is fully occluded.\n\t * @default false\n\t */\n\thideWhenDetached?: RadixTooltipContentProps[\"hideWhenDetached\"];\n\t/**\n\t * Strategy used to calculate and update popper position.\n\t * @default \"optimized\"\n\t */\n\tupdatePositionStrategy?: RadixTooltipContentProps[\"updatePositionStrategy\"];\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 */\n\tforceMount?: true;\n\t/**\n\t * Change the default rendered div element to the child element, merging props and behavior.\n\t * TooltipContent forwards ref to HTMLDivElement and inherits native div attributes.\n\t * @default false\n\t */\n\tasChild?: RadixTooltipContentProps[\"asChild\"];\n}\n\nexport const TooltipContent = React.forwardRef<\n\tReact.ElementRef<typeof TooltipPrimitive.Content>,\n\tTooltipContentProps\n>(({ className, sideOffset = 4, ...props }, ref) => (\n\t<TooltipPrimitive.Portal forceMount={props.forceMount}>\n\t\t<TooltipPrimitive.Content\n\t\t\tref={ref}\n\t\t\tsideOffset={sideOffset}\n\t\t\tclassName={cn(\n\t\t\t\tBASALT_UI_CLASS,\n\t\t\t\tOVERLAY_LAYER,\n\t\t\t\tOVERLAY_MOTION,\n\t\t\t\t\"basalt-floating overflow-hidden rounded-basalt-md border border-basalt-border bg-basalt-popover px-basalt-space-lg py-basalt-space-sm text-basalt-sm font-normal leading-[var(--basalt-line-compact)] text-basalt-popover-foreground shadow-md\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t</TooltipPrimitive.Portal>\n));\nTooltipContent.displayName = TooltipPrimitive.Content.displayName;\n"],"mappings":";;;;;;;;AAsCA,IAAaE,IAAkDD,EAAiB,UAyCnEE,IAAkCF,EAAiB,MAWnDG,IAAiBH,EAAiB,SAuGlCI,IAAiBL,EAAM,YAGjC,EAAE,cAAW,gBAAa,GAAG,GAAGM,KAAS,MAC3C,kBAACL,EAAiB,QAAlB;CAAyB,YAAYK,EAAM;CAC1C,UAAA,kBAACL,EAAiB,SAAlB;EACM;EACO;EACZ,WAAWM,EACVC,GACAC,GACAC,GACA,kPACAC,CACD;EACA,GAAIL;CACJ,CAAA;AACuB,CAAA,CACzB;AACD,EAAe,cAAcL,EAAiB,QAAQ"}