@nocoo/basalt 3.1.0 → 3.2.1

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-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"}
+{"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\",\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/tool-chips.js

@@ -62,7 +62,7 @@ function S({ steps: h, diffs: g = [], title: _, defaultOpen: v = !0, className:
 									/* @__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",
+											className: "max-w-full truncate font-mono text-basalt-base text-basalt-muted-foreground",
 											children: e.target
 										})]
 									}),
@@ -86,7 +86,7 @@ function S({ steps: h, diffs: g = [], title: _, defaultOpen: v = !0, className:
 							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",
+								className: "whitespace-pre-wrap break-words text-basalt-base text-basalt-muted-foreground",
 								children: e.detail || "No output yet"
 							})
 						})]

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

@@ -1 +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":"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"}
+{"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-base 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-base 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":"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"}

package/dist/components/toolbar.js

@@ -47,16 +47,16 @@ var l = i.forwardRef(({ className: t, onKeyDown: n, onFocus: r, ...o }, l) => {
 	});
 });
 l.displayName = "Toolbar";
-var u = i.forwardRef(({ className: t, size: r, icon: i, children: s, ...c }, l) => {
-	let u = r ?? (i && s == null ? "icon" : "default");
+var u = i.forwardRef(({ className: r, size: i, icon: s, children: c, ...l }, u) => {
+	let d = i ?? (s && c == null ? "icon" : "default");
 	return /* @__PURE__ */ a(n, {
-		ref: l,
-		icon: i,
-		className: e(o, "h-auto min-h-basalt-control shrink-0", u === "icon" && "w-basalt-control", t),
-		...c,
+		ref: u,
+		icon: s,
+		className: e(o, t, "h-auto min-h-basalt-control shrink-0", d === "icon" && "w-basalt-control", r),
+		...l,
 		variant: "ghost",
-		size: u,
-		children: s
+		size: d,
+		children: c
 	});
 });
 u.displayName = "Toolbar.Button";

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-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"}
+{"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","FOCUS_INSET","ToolbarInput","Input","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\tFOCUS_INSET,\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":"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"}

package/dist/styles/base.css

@@ -202,6 +202,63 @@
 }
 
 @layer components {
+	:is(.basalt-focus, .basalt-action) {
+		scroll-margin: var(--basalt-focus-clearance);
+	}
+
+	:is(.basalt-focus, .basalt-action):focus:not(:focus-visible) {
+		outline: none;
+	}
+
+	:is(.basalt-focus, .basalt-action):focus-visible,
+	.basalt-nav-actions :focus-visible,
+	.basalt-focus-frame:has(> .basalt-focus:focus-visible)::after,
+	.basalt-focus-group:has(:is(input, textarea):focus-visible):not(
+		:has(.basalt-focus-group :focus-visible)
+	) {
+		outline: var(--basalt-focus-width) solid hsl(var(--basalt-ring));
+		outline-offset: var(--basalt-focus-offset);
+	}
+
+	.basalt-focus-inset:focus-visible,
+	.basalt-focus-frame:has(> .basalt-focus:focus-visible)::after,
+	.basalt-focus-group.basalt-focus-inset:has(:is(input, textarea):focus-visible):not(
+		:has(.basalt-focus-group :focus-visible)
+	),
+	.basalt-focus-group .basalt-choice:focus-visible,
+	.basalt-nav-actions .basalt-choice:focus-visible {
+		outline-offset: calc(-1 * var(--basalt-focus-offset));
+	}
+
+	.basalt-focus-group :is(input, textarea):focus-visible,
+	.basalt-focus-frame > .basalt-focus:focus-visible {
+		outline: none;
+	}
+
+	.basalt-focus-frame:has(> .basalt-focus:focus-visible)::after {
+		content: "";
+		position: absolute;
+		inset: 0;
+		z-index: 1;
+		border-radius: inherit;
+		pointer-events: none;
+	}
+
+	@media (forced-colors: active) {
+		:is(.basalt-focus, .basalt-action):focus-visible,
+		.basalt-nav-actions :focus-visible,
+		.basalt-focus-frame:has(> .basalt-focus:focus-visible)::after,
+		.basalt-focus-group:has(:is(input, textarea):focus-visible):not(
+				:has(.basalt-focus-group :focus-visible)
+			) {
+			outline: 2px solid Highlight;
+		}
+
+		.basalt-focus-group :is(input, textarea):focus-visible {
+			outline: none;
+		}
+	}
+
 	[data-basalt-header][data-density="compact"]
 		:where([data-basalt-header-leading], [data-basalt-header-actions])
 		:where(button, a, [role="button"]) {
@@ -209,3 +266,17 @@
 		min-width: var(--basalt-size-touch);
 	}
 }
+
+:is(.basalt-focus, .basalt-action):focus-visible,
+.basalt-nav-actions :focus-visible,
+.basalt-focus-group:has(:is(input, textarea):focus-visible):not(
+	:has(.basalt-focus-group :focus-visible)
+),
+.basalt-chart :focus-visible {
+	transition: none;
+}
+
+.basalt-focus-swatch:focus-visible {
+	box-shadow: inset 0 0 0 calc(var(--basalt-focus-offset) + var(--basalt-focus-width))
+		hsl(var(--basalt-background));
+}