@epilot/spark-ui 0.21.0 → 0.22.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (57) hide show
  1. package/dist/components/attachment.d.cts +1 -1
  2. package/dist/components/attachment.d.ts +1 -1
  3. package/dist/components/bar-chart.cjs.map +1 -1
  4. package/dist/components/bar-chart.js.map +1 -1
  5. package/dist/components/bubble.d.cts +1 -1
  6. package/dist/components/bubble.d.ts +1 -1
  7. package/dist/components/button.d.cts +3 -3
  8. package/dist/components/button.d.ts +3 -3
  9. package/dist/components/callout.d.cts +1 -1
  10. package/dist/components/callout.d.ts +1 -1
  11. package/dist/components/donut-chart.cjs.map +1 -1
  12. package/dist/components/donut-chart.js.map +1 -1
  13. package/dist/components/field.cjs +1 -1
  14. package/dist/components/field.cjs.map +1 -1
  15. package/dist/components/field.js +1 -1
  16. package/dist/components/field.js.map +1 -1
  17. package/dist/components/icon.cjs +4 -4
  18. package/dist/components/icon.cjs.map +1 -1
  19. package/dist/components/icon.js +4 -4
  20. package/dist/components/icon.js.map +1 -1
  21. package/dist/components/input-date.cjs +2 -1
  22. package/dist/components/input-date.cjs.map +1 -1
  23. package/dist/components/input-date.d.cts +3 -1
  24. package/dist/components/input-date.d.ts +3 -1
  25. package/dist/components/input-date.js +2 -1
  26. package/dist/components/input-date.js.map +1 -1
  27. package/dist/components/line-chart.cjs +1 -1
  28. package/dist/components/line-chart.cjs.map +1 -1
  29. package/dist/components/line-chart.js +1 -1
  30. package/dist/components/line-chart.js.map +1 -1
  31. package/dist/components/list.cjs +2 -2
  32. package/dist/components/list.cjs.map +1 -1
  33. package/dist/components/list.d.cts +7 -2
  34. package/dist/components/list.d.ts +7 -2
  35. package/dist/components/list.js +2 -2
  36. package/dist/components/list.js.map +1 -1
  37. package/dist/components/page-header.d.cts +1 -1
  38. package/dist/components/page-header.d.ts +1 -1
  39. package/dist/components/power-history-chart.cjs +1 -1
  40. package/dist/components/power-history-chart.cjs.map +1 -1
  41. package/dist/components/power-history-chart.js +1 -1
  42. package/dist/components/power-history-chart.js.map +1 -1
  43. package/dist/components/sankey-chart.cjs +2 -2
  44. package/dist/components/sankey-chart.cjs.map +1 -1
  45. package/dist/components/sankey-chart.js +2 -2
  46. package/dist/components/sankey-chart.js.map +1 -1
  47. package/dist/components/slider.cjs.map +1 -1
  48. package/dist/components/slider.js.map +1 -1
  49. package/dist/components/toast.cjs +32 -7
  50. package/dist/components/toast.cjs.map +1 -1
  51. package/dist/components/toast.d.cts +15 -2
  52. package/dist/components/toast.d.ts +15 -2
  53. package/dist/components/toast.js +32 -7
  54. package/dist/components/toast.js.map +1 -1
  55. package/dist/lib/generate-radix-colors.cjs.map +1 -1
  56. package/dist/lib/generate-radix-colors.js.map +1 -1
  57. package/package.json +1 -1
@@ -1 +1 @@
1
- {"version":3,"file":"toast.cjs","names":["CheckCircle","Info","Warning","Cancel","ToastPrimitive","Spinner","buttonVariants","Close"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["'use client'\n\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast'\nimport {\n Cancel,\n CheckCircle,\n Close,\n Info,\n Warning,\n type SparkIcon,\n} from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\nimport { Spinner } from './spinner'\n\ntype ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading'\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n\n// Per-toast overrides Base UI carries through untouched as opaque `data`.\ntype ToastData = { closeButton?: boolean }\n\n// `label` is the button's content; everything else a `<button>` takes passes\n// straight through, so a caller can set `className`, `disabled`, `type`, and\n// the rest without a new prop for each one.\ntype ToastAction = Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'children'\n> & {\n label: React.ReactNode\n}\n\ntype ToastOptions = {\n description?: React.ReactNode\n /** Auto-dismiss time in ms. `0` keeps the toast until dismissed. */\n duration?: number\n /** Reuse an id to update a toast in place instead of stacking a new one. */\n id?: string\n closeButton?: boolean\n action?: ToastAction\n onDismiss?: () => void\n /** `high` announces urgently (assertive); the default is polite. */\n priority?: 'low' | 'high'\n}\n\ntype ToastPromiseMessages<Value> = {\n loading: string\n success: string | ((value: Value) => string)\n error: string | ((error: unknown) => string)\n}\n\nconst TOAST_ICONS: Record<\n Exclude<ToastType, 'loading'>,\n { icon: SparkIcon; className: string }\n> = {\n success: { icon: CheckCircle, className: 'text-success-light' },\n info: { icon: Info, className: 'text-info-light' },\n warning: { icon: Warning, className: 'text-warning-light' },\n error: { icon: Cancel, className: 'text-error-light' },\n}\n\n// Opaque radix steps (bg 2, border 6, text 11) so a floating toast never lets\n// page content bleed through the way the alpha `-soft` tokens would. The border\n// carries the tone too, otherwise a tinted toast keeps a grey outline.\nconst TONE_CLASSES: Record<Exclude<ToastType, 'loading'>, string> = {\n success: 'border-green-6 bg-green-2 text-green-11',\n info: 'border-blue-6 bg-blue-2 text-blue-11',\n warning: 'border-orange-6 bg-orange-2 text-orange-11',\n error: 'border-red-6 bg-red-2 text-red-11',\n}\n\n// Mobile-first: every position drops to a full-width stack at the top, which\n// is what the end-customer portal ships. `position` only takes effect from the\n// `sm` breakpoint up.\nconst POSITION_CLASSES: Record<ToastPosition, string> = {\n 'top-left': 'sm:top-4 sm:right-auto sm:bottom-auto sm:left-4',\n 'top-center':\n 'sm:top-4 sm:right-auto sm:bottom-auto sm:left-1/2 sm:-translate-x-1/2',\n 'top-right': 'sm:top-4 sm:right-4 sm:bottom-auto sm:left-auto',\n 'bottom-left': 'sm:top-auto sm:right-auto sm:bottom-4 sm:left-4',\n 'bottom-center':\n 'sm:top-auto sm:right-auto sm:bottom-4 sm:left-1/2 sm:-translate-x-1/2',\n 'bottom-right': 'sm:top-auto sm:right-4 sm:bottom-4 sm:left-auto',\n}\n\nconst manager = ToastPrimitive.createToastManager<ToastData>()\n\nlet sequence = 0\n\n// `label` names the content and `onClick` is wrapped, so neither reaches the\n// DOM button as-is; everything else does.\nfunction actionRest({\n label: _label,\n onClick: _onClick,\n ...rest\n}: ToastAction) {\n return rest\n}\n\nfunction toManagerOptions(\n id: string,\n title: React.ReactNode,\n type: ToastType | undefined,\n options: ToastOptions | undefined,\n) {\n const action = options?.action\n return {\n id,\n title,\n type,\n description: options?.description,\n timeout: options?.duration,\n priority: options?.priority,\n onClose: options?.onDismiss,\n // Base UI leaves the toast open after an action; dismissing matches what\n // callers expect from an \"Undo\" button.\n actionProps: action && {\n ...actionRest(action),\n children: action.label,\n onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n action.onClick?.(event)\n manager.close(id)\n },\n },\n data: { closeButton: options?.closeButton },\n }\n}\n\nconst emit =\n (type?: ToastType) =>\n (message: React.ReactNode, options?: ToastOptions): string => {\n // an id up front lets the action handler close the toast it belongs to\n const id = options?.id ?? `spark-toast-${(sequence += 1)}`\n return manager.add(toManagerOptions(id, message, type, options))\n }\n\n// A string phase becomes a titled toast of that type; an object phase keeps\n// whatever the caller set and only fills in the type.\nconst phase =\n <Value,>(\n value: ToastPromiseMessages<Value>[keyof ToastPromiseMessages<Value>],\n type: ToastType,\n ) =>\n (result: Value) => {\n const resolved = typeof value === 'function' ? value(result) : value\n return { title: resolved, type }\n }\n\nconst toast = Object.assign(emit(), {\n success: emit('success'),\n info: emit('info'),\n warning: emit('warning'),\n error: emit('error'),\n loading: emit('loading'),\n /** Dismiss one toast, or every toast when called without an id. */\n dismiss: (id?: string) => manager.close(id),\n promise: <Value,>(\n promiseValue: Promise<Value>,\n messages: ToastPromiseMessages<Value>,\n ) =>\n manager.promise(promiseValue, {\n loading: { title: messages.loading, type: 'loading' as const },\n success: phase(messages.success, 'success'),\n error: phase(messages.error as never, 'error'),\n }),\n})\n\nfunction ToastIcon({ type }: { type?: string }) {\n const icon = TOAST_ICONS[type as Exclude<ToastType, 'loading'>]\n if (type !== 'loading' && !icon) return null\n\n const Glyph = icon?.icon\n\n // Fixed box matching the title's line height, so the glyph and the spinner\n // both centre on the first line whether or not a description follows.\n return (\n <span\n aria-hidden=\"true\"\n className=\"flex h-5 w-5 shrink-0 items-center justify-center\"\n >\n {type === 'loading' ? (\n // Decorative: the toast already announces the loading message, so the\n // spinner must not add a second status live region.\n <Spinner\n className=\"text-gray-11\"\n label=\"\"\n role=\"presentation\"\n size=\"sm\"\n />\n ) : Glyph ? (\n <Glyph className={cn('[--spark-icon-size:20px]', icon.className)} />\n ) : null}\n </span>\n )\n}\n\nfunction ToastItem({\n closeButton,\n richColors,\n toast: toastObject,\n}: {\n closeButton: boolean\n richColors: boolean\n toast: ToastPrimitive.Root.ToastObject<ToastData>\n}) {\n const tone = TONE_CLASSES[toastObject.type as Exclude<ToastType, 'loading'>]\n const showClose = toastObject.data?.closeButton ?? closeButton\n\n return (\n <ToastPrimitive.Root\n data-slot=\"toast\"\n className={cn(\n // Skin only. All geometry (position, stacking, transitions, the\n // pointer bridge) lives in styles/index.css, because Tailwind's\n // `utilities` layer outranks `components` and a stray `bottom-0` here\n // would beat the stylesheet's `bottom: auto` on top-anchored stacks.\n // The border is what makes the cards behind the front one legible.\n 'flex items-start gap-2 rounded-lg border border-gray-a5 bg-gray-1 p-3 text-gray shadow-md select-none',\n richColors && tone,\n )}\n // the stack is top-anchored on mobile and bottom-anchored above `sm`, so\n // both vertical directions have to dismiss\n swipeDirection={['up', 'down', 'right']}\n toast={toastObject}\n >\n <ToastIcon type={toastObject.type} />\n <ToastPrimitive.Content className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n <ToastPrimitive.Title\n className=\"text-sm font-medium\"\n data-slot=\"toast-title\"\n />\n <ToastPrimitive.Description\n className={cn(\n 'text-sm',\n richColors && tone ? 'text-inherit' : 'text-gray-11',\n )}\n data-slot=\"toast-description\"\n />\n </ToastPrimitive.Content>\n {toastObject.actionProps ? (\n <ToastPrimitive.Action\n // -my-2 keeps the 36px control from stretching a single-line row past\n // the 20px text; self-center then lands it on the title when there is\n // no description, and mid-block when there is one\n className={cn(\n buttonVariants({ size: 'small', variant: 'primary' }),\n '-my-2 shrink-0 self-center rounded-full',\n )}\n data-slot=\"toast-action\"\n />\n ) : null}\n {showClose ? (\n <ToastPrimitive.Close\n aria-label=\"Close\"\n className={cn(\n buttonVariants({ size: 'icon-small', variant: 'tertiary' }),\n // -my-1: same reason as the action, for a 28px control\n '-my-1 -mr-1 size-7 shrink-0 self-center text-gray-11',\n )}\n data-slot=\"toast-close\"\n >\n <Close aria-hidden=\"true\" className=\"[--spark-icon-size:18px]\" />\n </ToastPrimitive.Close>\n ) : null}\n </ToastPrimitive.Root>\n )\n}\n\nfunction ToastList({\n closeButton,\n richColors,\n}: {\n closeButton: boolean\n richColors: boolean\n}) {\n const { toasts } = ToastPrimitive.useToastManager<ToastData>()\n\n return toasts.map((toastObject) => (\n <ToastItem\n closeButton={closeButton}\n key={toastObject.id}\n richColors={richColors}\n toast={toastObject}\n />\n ))\n}\n\ntype ToasterProps = {\n className?: string\n /** Corner or edge the toasts stack in. */\n position?: ToastPosition\n /** Close button on every toast; a per-toast `closeButton` wins. */\n closeButton?: boolean\n /** Tinted surfaces for success/info/warning/error toasts. */\n richColors?: boolean\n /** Default auto-dismiss time in ms. `0` disables auto-dismiss. */\n duration?: number\n /** Toasts visible at once before older ones are marked `data-limited`. */\n limit?: number\n /**\n * Vertical edge below the `sm` breakpoint, where the stack is always\n * full-width and `position` does not apply. Defaults to `top`, matching the\n * end-customer portal.\n */\n mobilePosition?: 'top' | 'bottom'\n}\n\nfunction Toaster({\n className,\n closeButton = true,\n duration = 4000,\n limit,\n mobilePosition = 'top',\n position = 'bottom-right',\n richColors = true,\n}: ToasterProps) {\n return (\n <ToastPrimitive.Provider\n limit={limit}\n timeout={duration}\n toastManager={manager}\n >\n <ToastPrimitive.Portal>\n <ToastPrimitive.Viewport\n // block + zero height: the toasts are absolutely positioned against\n // this box's bottom edge, the way Base UI's stacked example works\n className={cn(\n 'fixed inset-x-4 z-50 block h-0 outline-none',\n mobilePosition === 'top' ? 'top-4' : 'bottom-4',\n 'sm:inset-x-auto sm:w-96 sm:max-w-[calc(100vw-2rem)]',\n POSITION_CLASSES[position],\n className,\n )}\n data-mobile-side={mobilePosition}\n data-side={position.startsWith('top') ? 'top' : 'bottom'}\n data-slot=\"toaster\"\n >\n <ToastList closeButton={closeButton} richColors={richColors} />\n </ToastPrimitive.Viewport>\n </ToastPrimitive.Portal>\n </ToastPrimitive.Provider>\n )\n}\n\nexport { Toaster, toast }\nexport type {\n ToastAction,\n ToasterProps,\n ToastOptions,\n ToastPosition,\n ToastPromiseMessages,\n ToastType,\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"toast.cjs","names":["CheckCircle","Info","Warning","Cancel","ToastPrimitive","Spinner","buttonVariants","Close"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["'use client'\n\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast'\nimport type { BaseUIEvent } from '@base-ui/react/types'\nimport {\n Cancel,\n CheckCircle,\n Close,\n Info,\n Warning,\n type SparkIcon,\n} from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\nimport { Spinner } from './spinner'\n\ntype ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading'\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n\n// Per-toast overrides Base UI carries through untouched as opaque `data`.\ntype ToastData = {\n closeButton?: boolean\n closeLabel?: string\n icon?: React.ReactNode\n onCloseClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n// `label` is the button's content; everything else a `<button>` takes passes\n// straight through, so a caller can set `className`, `disabled`, `type`, and\n// the rest without a new prop for each one.\ntype ToastAction = Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'children'\n> & {\n label: React.ReactNode\n}\n\ntype ToastOptions = {\n description?: React.ReactNode\n /** Auto-dismiss time in ms. `0` keeps the toast until dismissed. */\n duration?: number\n /** Reuse an id to update a toast in place instead of stacking a new one. */\n id?: string\n closeButton?: boolean\n /** Accessible name of the close button; overrides the Toaster's `closeLabel`. */\n closeLabel?: string\n /**\n * Replaces the type icon. `null` renders no icon. The icon is decorative,\n * so the title has to carry the meaning on its own.\n */\n icon?: React.ReactNode\n /**\n * Runs when the close button is clicked. Call `event.preventDefault()` to\n * keep the toast open, for example to cancel a running download first.\n */\n onCloseClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n action?: ToastAction\n onDismiss?: () => void\n /** `high` announces urgently (assertive); the default is polite. */\n priority?: 'low' | 'high'\n}\n\ntype ToastPromiseMessages<Value> = {\n loading: string\n success: string | ((value: Value) => string)\n error: string | ((error: unknown) => string)\n}\n\nconst TOAST_ICONS: Record<\n Exclude<ToastType, 'loading'>,\n { icon: SparkIcon; className: string }\n> = {\n success: { icon: CheckCircle, className: 'text-success-light' },\n info: { icon: Info, className: 'text-info-light' },\n warning: { icon: Warning, className: 'text-warning-light' },\n error: { icon: Cancel, className: 'text-error-light' },\n}\n\n// Opaque radix steps (bg 2, border 6, text 11) so a floating toast never lets\n// page content bleed through the way the alpha `-soft` tokens would. The border\n// carries the tone too, otherwise a tinted toast keeps a grey outline.\nconst TONE_CLASSES: Record<Exclude<ToastType, 'loading'>, string> = {\n success: 'border-green-6 bg-green-2 text-green-11',\n info: 'border-blue-6 bg-blue-2 text-blue-11',\n warning: 'border-orange-6 bg-orange-2 text-orange-11',\n error: 'border-red-6 bg-red-2 text-red-11',\n}\n\n// Mobile-first: every position drops to a full-width stack at the top, which\n// is what the end-customer portal ships. `position` only takes effect from the\n// `sm` breakpoint up.\nconst POSITION_CLASSES: Record<ToastPosition, string> = {\n 'top-left': 'sm:top-4 sm:right-auto sm:bottom-auto sm:left-4',\n 'top-center':\n 'sm:top-4 sm:right-auto sm:bottom-auto sm:left-1/2 sm:-translate-x-1/2',\n 'top-right': 'sm:top-4 sm:right-4 sm:bottom-auto sm:left-auto',\n 'bottom-left': 'sm:top-auto sm:right-auto sm:bottom-4 sm:left-4',\n 'bottom-center':\n 'sm:top-auto sm:right-auto sm:bottom-4 sm:left-1/2 sm:-translate-x-1/2',\n 'bottom-right': 'sm:top-auto sm:right-4 sm:bottom-4 sm:left-auto',\n}\n\nconst manager = ToastPrimitive.createToastManager<ToastData>()\n\nlet sequence = 0\n\n// `label` names the content and `onClick` is wrapped, so neither reaches the\n// DOM button as-is; everything else does.\nfunction actionRest({\n label: _label,\n onClick: _onClick,\n ...rest\n}: ToastAction) {\n return rest\n}\n\nfunction toManagerOptions(\n id: string,\n title: React.ReactNode,\n type: ToastType | undefined,\n options: ToastOptions | undefined,\n) {\n const action = options?.action\n return {\n id,\n title,\n type,\n description: options?.description,\n timeout: options?.duration,\n priority: options?.priority,\n onClose: options?.onDismiss,\n // Base UI leaves the toast open after an action; dismissing matches what\n // callers expect from an \"Undo\" button.\n actionProps: action && {\n ...actionRest(action),\n children: action.label,\n onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n action.onClick?.(event)\n manager.close(id)\n },\n },\n data: {\n closeButton: options?.closeButton,\n closeLabel: options?.closeLabel,\n icon: options?.icon,\n onCloseClick: options?.onCloseClick,\n },\n }\n}\n\nconst emit =\n (type?: ToastType) =>\n (message: React.ReactNode, options?: ToastOptions): string => {\n // an id up front lets the action handler close the toast it belongs to\n const id = options?.id ?? `spark-toast-${(sequence += 1)}`\n return manager.add(toManagerOptions(id, message, type, options))\n }\n\n// A string phase becomes a titled toast of that type; an object phase keeps\n// whatever the caller set and only fills in the type.\nconst phase =\n <Value,>(\n value: ToastPromiseMessages<Value>[keyof ToastPromiseMessages<Value>],\n type: ToastType,\n ) =>\n (result: Value) => {\n const resolved = typeof value === 'function' ? value(result) : value\n return { title: resolved, type }\n }\n\nconst toast = Object.assign(emit(), {\n success: emit('success'),\n info: emit('info'),\n warning: emit('warning'),\n error: emit('error'),\n loading: emit('loading'),\n /** Dismiss one toast, or every toast when called without an id. */\n dismiss: (id?: string) => manager.close(id),\n promise: <Value,>(\n promiseValue: Promise<Value>,\n messages: ToastPromiseMessages<Value>,\n ) =>\n manager.promise(promiseValue, {\n loading: { title: messages.loading, type: 'loading' as const },\n success: phase(messages.success, 'success'),\n error: phase(messages.error as never, 'error'),\n }),\n})\n\nfunction ToastIcon({\n custom,\n type,\n}: {\n custom: React.ReactNode | undefined\n type?: string\n}) {\n const icon = TOAST_ICONS[type as Exclude<ToastType, 'loading'>]\n if (custom !== undefined) {\n if (custom === null || custom === false) return null\n return (\n <span\n aria-hidden=\"true\"\n className=\"flex h-5 w-5 shrink-0 items-center justify-center [--spark-icon-size:20px]\"\n data-slot=\"toast-icon\"\n >\n {custom}\n </span>\n )\n }\n if (type !== 'loading' && !icon) return null\n\n const Glyph = icon?.icon\n\n // Fixed box matching the title's line height, so the glyph and the spinner\n // both centre on the first line whether or not a description follows.\n return (\n <span\n aria-hidden=\"true\"\n className=\"flex h-5 w-5 shrink-0 items-center justify-center\"\n data-slot=\"toast-icon\"\n >\n {type === 'loading' ? (\n // Decorative: the toast already announces the loading message, so the\n // spinner must not add a second status live region.\n <Spinner\n className=\"text-gray-11\"\n label=\"\"\n role=\"presentation\"\n size=\"sm\"\n />\n ) : Glyph ? (\n <Glyph className={cn('[--spark-icon-size:20px]', icon.className)} />\n ) : null}\n </span>\n )\n}\n\nfunction ToastItem({\n closeButton,\n closeLabel,\n richColors,\n toast: toastObject,\n}: {\n closeButton: boolean\n closeLabel: string\n richColors: boolean\n toast: ToastPrimitive.Root.ToastObject<ToastData>\n}) {\n const tone = TONE_CLASSES[toastObject.type as Exclude<ToastType, 'loading'>]\n const showClose = toastObject.data?.closeButton ?? closeButton\n const onCloseClick = toastObject.data?.onCloseClick\n\n return (\n <ToastPrimitive.Root\n data-slot=\"toast\"\n className={cn(\n // Skin only. All geometry (position, stacking, transitions, the\n // pointer bridge) lives in styles/index.css, because Tailwind's\n // `utilities` layer outranks `components` and a stray `bottom-0` here\n // would beat the stylesheet's `bottom: auto` on top-anchored stacks.\n // The border is what makes the cards behind the front one legible.\n 'flex items-start gap-2 rounded-lg border border-gray-a5 bg-gray-1 p-3 text-gray shadow-md select-none',\n richColors && tone,\n )}\n // the stack is top-anchored on mobile and bottom-anchored above `sm`, so\n // both vertical directions have to dismiss\n swipeDirection={['up', 'down', 'right']}\n toast={toastObject}\n >\n <ToastIcon custom={toastObject.data?.icon} type={toastObject.type} />\n <ToastPrimitive.Content className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n <ToastPrimitive.Title\n className=\"text-sm font-medium\"\n data-slot=\"toast-title\"\n />\n <ToastPrimitive.Description\n className={cn(\n 'text-sm',\n richColors && tone ? 'text-inherit' : 'text-gray-11',\n )}\n data-slot=\"toast-description\"\n />\n </ToastPrimitive.Content>\n {toastObject.actionProps ? (\n <ToastPrimitive.Action\n // -my-2 keeps the 36px control from stretching a single-line row past\n // the 20px text; self-center then lands it on the title when there is\n // no description, and mid-block when there is one\n className={cn(\n buttonVariants({ size: 'small', variant: 'primary' }),\n '-my-2 shrink-0 self-center rounded-full',\n )}\n data-slot=\"toast-action\"\n />\n ) : null}\n {showClose ? (\n <ToastPrimitive.Close\n aria-label={toastObject.data?.closeLabel ?? closeLabel}\n className={cn(\n buttonVariants({ size: 'icon-small', variant: 'tertiary' }),\n // -my-1: same reason as the action, for a 28px control\n '-my-1 -mr-1 size-7 shrink-0 self-center text-gray-11',\n )}\n data-slot=\"toast-close\"\n onClick={\n onCloseClick &&\n ((event: BaseUIEvent<React.MouseEvent<HTMLButtonElement>>) => {\n onCloseClick(event)\n // Base UI's own close runs after this handler unless prevented.\n if (event.defaultPrevented) event.preventBaseUIHandler()\n })\n }\n >\n <Close aria-hidden=\"true\" className=\"[--spark-icon-size:18px]\" />\n </ToastPrimitive.Close>\n ) : null}\n </ToastPrimitive.Root>\n )\n}\n\nfunction ToastList({\n closeButton,\n closeLabel,\n richColors,\n}: {\n closeButton: boolean\n closeLabel: string\n richColors: boolean\n}) {\n const { toasts } = ToastPrimitive.useToastManager<ToastData>()\n\n return toasts.map((toastObject) => (\n <ToastItem\n closeButton={closeButton}\n closeLabel={closeLabel}\n key={toastObject.id}\n richColors={richColors}\n toast={toastObject}\n />\n ))\n}\n\ntype ToasterProps = {\n className?: string\n /** Corner or edge the toasts stack in. */\n position?: ToastPosition\n /** Close button on every toast; a per-toast `closeButton` wins. */\n closeButton?: boolean\n /** Accessible name of every close button; a per-toast `closeLabel` wins. */\n closeLabel?: string\n /** Tinted surfaces for success/info/warning/error toasts. */\n richColors?: boolean\n /** Default auto-dismiss time in ms. `0` disables auto-dismiss. */\n duration?: number\n /** Toasts visible at once before older ones are marked `data-limited`. */\n limit?: number\n /**\n * Vertical edge below the `sm` breakpoint, where the stack is always\n * full-width and `position` does not apply. Defaults to `top`, matching the\n * end-customer portal.\n */\n mobilePosition?: 'top' | 'bottom'\n}\n\nfunction Toaster({\n className,\n closeButton = true,\n closeLabel = 'Close',\n duration = 4000,\n limit,\n mobilePosition = 'top',\n position = 'bottom-right',\n richColors = true,\n}: ToasterProps) {\n return (\n <ToastPrimitive.Provider\n limit={limit}\n timeout={duration}\n toastManager={manager}\n >\n <ToastPrimitive.Portal>\n <ToastPrimitive.Viewport\n // block + zero height: the toasts are absolutely positioned against\n // this box's bottom edge, the way Base UI's stacked example works\n className={cn(\n 'fixed inset-x-4 z-50 block h-0 outline-none',\n mobilePosition === 'top' ? 'top-4' : 'bottom-4',\n 'sm:inset-x-auto sm:w-96 sm:max-w-[calc(100vw-2rem)]',\n POSITION_CLASSES[position],\n className,\n )}\n data-mobile-side={mobilePosition}\n data-side={position.startsWith('top') ? 'top' : 'bottom'}\n data-slot=\"toaster\"\n >\n <ToastList\n closeButton={closeButton}\n closeLabel={closeLabel}\n richColors={richColors}\n />\n </ToastPrimitive.Viewport>\n </ToastPrimitive.Portal>\n </ToastPrimitive.Provider>\n )\n}\n\nexport { Toaster, toast }\nexport type {\n ToastAction,\n ToasterProps,\n ToastOptions,\n ToastPosition,\n ToastPromiseMessages,\n ToastType,\n}\n"],"mappings":"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"}
@@ -12,7 +12,18 @@ type ToastOptions = {
12
12
  description?: React$1.ReactNode; /** Auto-dismiss time in ms. `0` keeps the toast until dismissed. */
13
13
  duration?: number; /** Reuse an id to update a toast in place instead of stacking a new one. */
14
14
  id?: string;
15
- closeButton?: boolean;
15
+ closeButton?: boolean; /** Accessible name of the close button; overrides the Toaster's `closeLabel`. */
16
+ closeLabel?: string;
17
+ /**
18
+ * Replaces the type icon. `null` renders no icon. The icon is decorative,
19
+ * so the title has to carry the meaning on its own.
20
+ */
21
+ icon?: React$1.ReactNode;
22
+ /**
23
+ * Runs when the close button is clicked. Call `event.preventDefault()` to
24
+ * keep the toast open, for example to cancel a running download first.
25
+ */
26
+ onCloseClick?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
16
27
  action?: ToastAction;
17
28
  onDismiss?: () => void; /** `high` announces urgently (assertive); the default is polite. */
18
29
  priority?: 'low' | 'high';
@@ -34,7 +45,8 @@ declare const toast: ((message: React$1.ReactNode, options?: ToastOptions) => st
34
45
  type ToasterProps = {
35
46
  className?: string; /** Corner or edge the toasts stack in. */
36
47
  position?: ToastPosition; /** Close button on every toast; a per-toast `closeButton` wins. */
37
- closeButton?: boolean; /** Tinted surfaces for success/info/warning/error toasts. */
48
+ closeButton?: boolean; /** Accessible name of every close button; a per-toast `closeLabel` wins. */
49
+ closeLabel?: string; /** Tinted surfaces for success/info/warning/error toasts. */
38
50
  richColors?: boolean; /** Default auto-dismiss time in ms. `0` disables auto-dismiss. */
39
51
  duration?: number; /** Toasts visible at once before older ones are marked `data-limited`. */
40
52
  limit?: number;
@@ -48,6 +60,7 @@ type ToasterProps = {
48
60
  declare function Toaster({
49
61
  className,
50
62
  closeButton,
63
+ closeLabel,
51
64
  duration,
52
65
  limit,
53
66
  mobilePosition,
@@ -12,7 +12,18 @@ type ToastOptions = {
12
12
  description?: React$1.ReactNode; /** Auto-dismiss time in ms. `0` keeps the toast until dismissed. */
13
13
  duration?: number; /** Reuse an id to update a toast in place instead of stacking a new one. */
14
14
  id?: string;
15
- closeButton?: boolean;
15
+ closeButton?: boolean; /** Accessible name of the close button; overrides the Toaster's `closeLabel`. */
16
+ closeLabel?: string;
17
+ /**
18
+ * Replaces the type icon. `null` renders no icon. The icon is decorative,
19
+ * so the title has to carry the meaning on its own.
20
+ */
21
+ icon?: React$1.ReactNode;
22
+ /**
23
+ * Runs when the close button is clicked. Call `event.preventDefault()` to
24
+ * keep the toast open, for example to cancel a running download first.
25
+ */
26
+ onCloseClick?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
16
27
  action?: ToastAction;
17
28
  onDismiss?: () => void; /** `high` announces urgently (assertive); the default is polite. */
18
29
  priority?: 'low' | 'high';
@@ -34,7 +45,8 @@ declare const toast: ((message: React$1.ReactNode, options?: ToastOptions) => st
34
45
  type ToasterProps = {
35
46
  className?: string; /** Corner or edge the toasts stack in. */
36
47
  position?: ToastPosition; /** Close button on every toast; a per-toast `closeButton` wins. */
37
- closeButton?: boolean; /** Tinted surfaces for success/info/warning/error toasts. */
48
+ closeButton?: boolean; /** Accessible name of every close button; a per-toast `closeLabel` wins. */
49
+ closeLabel?: string; /** Tinted surfaces for success/info/warning/error toasts. */
38
50
  richColors?: boolean; /** Default auto-dismiss time in ms. `0` disables auto-dismiss. */
39
51
  duration?: number; /** Toasts visible at once before older ones are marked `data-limited`. */
40
52
  limit?: number;
@@ -48,6 +60,7 @@ type ToasterProps = {
48
60
  declare function Toaster({
49
61
  className,
50
62
  closeButton,
63
+ closeLabel,
51
64
  duration,
52
65
  limit,
53
66
  mobilePosition,
@@ -63,7 +63,12 @@ function toManagerOptions(id, title, type, options) {
63
63
  manager.close(id);
64
64
  }
65
65
  },
66
- data: { closeButton: options?.closeButton }
66
+ data: {
67
+ closeButton: options?.closeButton,
68
+ closeLabel: options?.closeLabel,
69
+ icon: options?.icon,
70
+ onCloseClick: options?.onCloseClick
71
+ }
67
72
  };
68
73
  }
69
74
  const emit = (type) => (message, options) => {
@@ -93,13 +98,23 @@ const toast = Object.assign(emit(), {
93
98
  error: phase(messages.error, "error")
94
99
  })
95
100
  });
96
- function ToastIcon({ type }) {
101
+ function ToastIcon({ custom, type }) {
97
102
  const icon = TOAST_ICONS[type];
103
+ if (custom !== void 0) {
104
+ if (custom === null || custom === false) return null;
105
+ return /* @__PURE__ */ jsx("span", {
106
+ "aria-hidden": "true",
107
+ className: "flex h-5 w-5 shrink-0 items-center justify-center [--spark-icon-size:20px]",
108
+ "data-slot": "toast-icon",
109
+ children: custom
110
+ });
111
+ }
98
112
  if (type !== "loading" && !icon) return null;
99
113
  const Glyph = icon?.icon;
100
114
  return /* @__PURE__ */ jsx("span", {
101
115
  "aria-hidden": "true",
102
116
  className: "flex h-5 w-5 shrink-0 items-center justify-center",
117
+ "data-slot": "toast-icon",
103
118
  children: type === "loading" ? /* @__PURE__ */ jsx(Spinner, {
104
119
  className: "text-gray-11",
105
120
  label: "",
@@ -108,9 +123,10 @@ function ToastIcon({ type }) {
108
123
  }) : Glyph ? /* @__PURE__ */ jsx(Glyph, { className: cn("[--spark-icon-size:20px]", icon.className) }) : null
109
124
  });
110
125
  }
111
- function ToastItem({ closeButton, richColors, toast: toastObject }) {
126
+ function ToastItem({ closeButton, closeLabel, richColors, toast: toastObject }) {
112
127
  const tone = TONE_CLASSES[toastObject.type];
113
128
  const showClose = toastObject.data?.closeButton ?? closeButton;
129
+ const onCloseClick = toastObject.data?.onCloseClick;
114
130
  return /* @__PURE__ */ jsxs(Toast.Root, {
115
131
  "data-slot": "toast",
116
132
  className: cn("flex items-start gap-2 rounded-lg border border-gray-a5 bg-gray-1 p-3 text-gray shadow-md select-none", richColors && tone),
@@ -121,7 +137,10 @@ function ToastItem({ closeButton, richColors, toast: toastObject }) {
121
137
  ],
122
138
  toast: toastObject,
123
139
  children: [
124
- /* @__PURE__ */ jsx(ToastIcon, { type: toastObject.type }),
140
+ /* @__PURE__ */ jsx(ToastIcon, {
141
+ custom: toastObject.data?.icon,
142
+ type: toastObject.type
143
+ }),
125
144
  /* @__PURE__ */ jsxs(Toast.Content, {
126
145
  className: "flex min-w-0 flex-1 flex-col gap-0.5",
127
146
  children: [/* @__PURE__ */ jsx(Toast.Title, {
@@ -140,12 +159,16 @@ function ToastItem({ closeButton, richColors, toast: toastObject }) {
140
159
  "data-slot": "toast-action"
141
160
  }) : null,
142
161
  showClose ? /* @__PURE__ */ jsx(Toast.Close, {
143
- "aria-label": "Close",
162
+ "aria-label": toastObject.data?.closeLabel ?? closeLabel,
144
163
  className: cn(buttonVariants({
145
164
  size: "icon-small",
146
165
  variant: "tertiary"
147
166
  }), "-my-1 -mr-1 size-7 shrink-0 self-center text-gray-11"),
148
167
  "data-slot": "toast-close",
168
+ onClick: onCloseClick && ((event) => {
169
+ onCloseClick(event);
170
+ if (event.defaultPrevented) event.preventBaseUIHandler();
171
+ }),
149
172
  children: /* @__PURE__ */ jsx(Close, {
150
173
  "aria-hidden": "true",
151
174
  className: "[--spark-icon-size:18px]"
@@ -154,15 +177,16 @@ function ToastItem({ closeButton, richColors, toast: toastObject }) {
154
177
  ]
155
178
  });
156
179
  }
157
- function ToastList({ closeButton, richColors }) {
180
+ function ToastList({ closeButton, closeLabel, richColors }) {
158
181
  const { toasts } = Toast.useToastManager();
159
182
  return toasts.map((toastObject) => /* @__PURE__ */ jsx(ToastItem, {
160
183
  closeButton,
184
+ closeLabel,
161
185
  richColors,
162
186
  toast: toastObject
163
187
  }, toastObject.id));
164
188
  }
165
- function Toaster({ className, closeButton = true, duration = 4e3, limit, mobilePosition = "top", position = "bottom-right", richColors = true }) {
189
+ function Toaster({ className, closeButton = true, closeLabel = "Close", duration = 4e3, limit, mobilePosition = "top", position = "bottom-right", richColors = true }) {
166
190
  return /* @__PURE__ */ jsx(Toast.Provider, {
167
191
  limit,
168
192
  timeout: duration,
@@ -174,6 +198,7 @@ function Toaster({ className, closeButton = true, duration = 4e3, limit, mobileP
174
198
  "data-slot": "toaster",
175
199
  children: /* @__PURE__ */ jsx(ToastList, {
176
200
  closeButton,
201
+ closeLabel,
177
202
  richColors
178
203
  })
179
204
  }) })
@@ -1 +1 @@
1
- {"version":3,"file":"toast.js","names":["ToastPrimitive"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["'use client'\n\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast'\nimport {\n Cancel,\n CheckCircle,\n Close,\n Info,\n Warning,\n type SparkIcon,\n} from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\nimport { Spinner } from './spinner'\n\ntype ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading'\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n\n// Per-toast overrides Base UI carries through untouched as opaque `data`.\ntype ToastData = { closeButton?: boolean }\n\n// `label` is the button's content; everything else a `<button>` takes passes\n// straight through, so a caller can set `className`, `disabled`, `type`, and\n// the rest without a new prop for each one.\ntype ToastAction = Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'children'\n> & {\n label: React.ReactNode\n}\n\ntype ToastOptions = {\n description?: React.ReactNode\n /** Auto-dismiss time in ms. `0` keeps the toast until dismissed. */\n duration?: number\n /** Reuse an id to update a toast in place instead of stacking a new one. */\n id?: string\n closeButton?: boolean\n action?: ToastAction\n onDismiss?: () => void\n /** `high` announces urgently (assertive); the default is polite. */\n priority?: 'low' | 'high'\n}\n\ntype ToastPromiseMessages<Value> = {\n loading: string\n success: string | ((value: Value) => string)\n error: string | ((error: unknown) => string)\n}\n\nconst TOAST_ICONS: Record<\n Exclude<ToastType, 'loading'>,\n { icon: SparkIcon; className: string }\n> = {\n success: { icon: CheckCircle, className: 'text-success-light' },\n info: { icon: Info, className: 'text-info-light' },\n warning: { icon: Warning, className: 'text-warning-light' },\n error: { icon: Cancel, className: 'text-error-light' },\n}\n\n// Opaque radix steps (bg 2, border 6, text 11) so a floating toast never lets\n// page content bleed through the way the alpha `-soft` tokens would. The border\n// carries the tone too, otherwise a tinted toast keeps a grey outline.\nconst TONE_CLASSES: Record<Exclude<ToastType, 'loading'>, string> = {\n success: 'border-green-6 bg-green-2 text-green-11',\n info: 'border-blue-6 bg-blue-2 text-blue-11',\n warning: 'border-orange-6 bg-orange-2 text-orange-11',\n error: 'border-red-6 bg-red-2 text-red-11',\n}\n\n// Mobile-first: every position drops to a full-width stack at the top, which\n// is what the end-customer portal ships. `position` only takes effect from the\n// `sm` breakpoint up.\nconst POSITION_CLASSES: Record<ToastPosition, string> = {\n 'top-left': 'sm:top-4 sm:right-auto sm:bottom-auto sm:left-4',\n 'top-center':\n 'sm:top-4 sm:right-auto sm:bottom-auto sm:left-1/2 sm:-translate-x-1/2',\n 'top-right': 'sm:top-4 sm:right-4 sm:bottom-auto sm:left-auto',\n 'bottom-left': 'sm:top-auto sm:right-auto sm:bottom-4 sm:left-4',\n 'bottom-center':\n 'sm:top-auto sm:right-auto sm:bottom-4 sm:left-1/2 sm:-translate-x-1/2',\n 'bottom-right': 'sm:top-auto sm:right-4 sm:bottom-4 sm:left-auto',\n}\n\nconst manager = ToastPrimitive.createToastManager<ToastData>()\n\nlet sequence = 0\n\n// `label` names the content and `onClick` is wrapped, so neither reaches the\n// DOM button as-is; everything else does.\nfunction actionRest({\n label: _label,\n onClick: _onClick,\n ...rest\n}: ToastAction) {\n return rest\n}\n\nfunction toManagerOptions(\n id: string,\n title: React.ReactNode,\n type: ToastType | undefined,\n options: ToastOptions | undefined,\n) {\n const action = options?.action\n return {\n id,\n title,\n type,\n description: options?.description,\n timeout: options?.duration,\n priority: options?.priority,\n onClose: options?.onDismiss,\n // Base UI leaves the toast open after an action; dismissing matches what\n // callers expect from an \"Undo\" button.\n actionProps: action && {\n ...actionRest(action),\n children: action.label,\n onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n action.onClick?.(event)\n manager.close(id)\n },\n },\n data: { closeButton: options?.closeButton },\n }\n}\n\nconst emit =\n (type?: ToastType) =>\n (message: React.ReactNode, options?: ToastOptions): string => {\n // an id up front lets the action handler close the toast it belongs to\n const id = options?.id ?? `spark-toast-${(sequence += 1)}`\n return manager.add(toManagerOptions(id, message, type, options))\n }\n\n// A string phase becomes a titled toast of that type; an object phase keeps\n// whatever the caller set and only fills in the type.\nconst phase =\n <Value,>(\n value: ToastPromiseMessages<Value>[keyof ToastPromiseMessages<Value>],\n type: ToastType,\n ) =>\n (result: Value) => {\n const resolved = typeof value === 'function' ? value(result) : value\n return { title: resolved, type }\n }\n\nconst toast = Object.assign(emit(), {\n success: emit('success'),\n info: emit('info'),\n warning: emit('warning'),\n error: emit('error'),\n loading: emit('loading'),\n /** Dismiss one toast, or every toast when called without an id. */\n dismiss: (id?: string) => manager.close(id),\n promise: <Value,>(\n promiseValue: Promise<Value>,\n messages: ToastPromiseMessages<Value>,\n ) =>\n manager.promise(promiseValue, {\n loading: { title: messages.loading, type: 'loading' as const },\n success: phase(messages.success, 'success'),\n error: phase(messages.error as never, 'error'),\n }),\n})\n\nfunction ToastIcon({ type }: { type?: string }) {\n const icon = TOAST_ICONS[type as Exclude<ToastType, 'loading'>]\n if (type !== 'loading' && !icon) return null\n\n const Glyph = icon?.icon\n\n // Fixed box matching the title's line height, so the glyph and the spinner\n // both centre on the first line whether or not a description follows.\n return (\n <span\n aria-hidden=\"true\"\n className=\"flex h-5 w-5 shrink-0 items-center justify-center\"\n >\n {type === 'loading' ? (\n // Decorative: the toast already announces the loading message, so the\n // spinner must not add a second status live region.\n <Spinner\n className=\"text-gray-11\"\n label=\"\"\n role=\"presentation\"\n size=\"sm\"\n />\n ) : Glyph ? (\n <Glyph className={cn('[--spark-icon-size:20px]', icon.className)} />\n ) : null}\n </span>\n )\n}\n\nfunction ToastItem({\n closeButton,\n richColors,\n toast: toastObject,\n}: {\n closeButton: boolean\n richColors: boolean\n toast: ToastPrimitive.Root.ToastObject<ToastData>\n}) {\n const tone = TONE_CLASSES[toastObject.type as Exclude<ToastType, 'loading'>]\n const showClose = toastObject.data?.closeButton ?? closeButton\n\n return (\n <ToastPrimitive.Root\n data-slot=\"toast\"\n className={cn(\n // Skin only. All geometry (position, stacking, transitions, the\n // pointer bridge) lives in styles/index.css, because Tailwind's\n // `utilities` layer outranks `components` and a stray `bottom-0` here\n // would beat the stylesheet's `bottom: auto` on top-anchored stacks.\n // The border is what makes the cards behind the front one legible.\n 'flex items-start gap-2 rounded-lg border border-gray-a5 bg-gray-1 p-3 text-gray shadow-md select-none',\n richColors && tone,\n )}\n // the stack is top-anchored on mobile and bottom-anchored above `sm`, so\n // both vertical directions have to dismiss\n swipeDirection={['up', 'down', 'right']}\n toast={toastObject}\n >\n <ToastIcon type={toastObject.type} />\n <ToastPrimitive.Content className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n <ToastPrimitive.Title\n className=\"text-sm font-medium\"\n data-slot=\"toast-title\"\n />\n <ToastPrimitive.Description\n className={cn(\n 'text-sm',\n richColors && tone ? 'text-inherit' : 'text-gray-11',\n )}\n data-slot=\"toast-description\"\n />\n </ToastPrimitive.Content>\n {toastObject.actionProps ? (\n <ToastPrimitive.Action\n // -my-2 keeps the 36px control from stretching a single-line row past\n // the 20px text; self-center then lands it on the title when there is\n // no description, and mid-block when there is one\n className={cn(\n buttonVariants({ size: 'small', variant: 'primary' }),\n '-my-2 shrink-0 self-center rounded-full',\n )}\n data-slot=\"toast-action\"\n />\n ) : null}\n {showClose ? (\n <ToastPrimitive.Close\n aria-label=\"Close\"\n className={cn(\n buttonVariants({ size: 'icon-small', variant: 'tertiary' }),\n // -my-1: same reason as the action, for a 28px control\n '-my-1 -mr-1 size-7 shrink-0 self-center text-gray-11',\n )}\n data-slot=\"toast-close\"\n >\n <Close aria-hidden=\"true\" className=\"[--spark-icon-size:18px]\" />\n </ToastPrimitive.Close>\n ) : null}\n </ToastPrimitive.Root>\n )\n}\n\nfunction ToastList({\n closeButton,\n richColors,\n}: {\n closeButton: boolean\n richColors: boolean\n}) {\n const { toasts } = ToastPrimitive.useToastManager<ToastData>()\n\n return toasts.map((toastObject) => (\n <ToastItem\n closeButton={closeButton}\n key={toastObject.id}\n richColors={richColors}\n toast={toastObject}\n />\n ))\n}\n\ntype ToasterProps = {\n className?: string\n /** Corner or edge the toasts stack in. */\n position?: ToastPosition\n /** Close button on every toast; a per-toast `closeButton` wins. */\n closeButton?: boolean\n /** Tinted surfaces for success/info/warning/error toasts. */\n richColors?: boolean\n /** Default auto-dismiss time in ms. `0` disables auto-dismiss. */\n duration?: number\n /** Toasts visible at once before older ones are marked `data-limited`. */\n limit?: number\n /**\n * Vertical edge below the `sm` breakpoint, where the stack is always\n * full-width and `position` does not apply. Defaults to `top`, matching the\n * end-customer portal.\n */\n mobilePosition?: 'top' | 'bottom'\n}\n\nfunction Toaster({\n className,\n closeButton = true,\n duration = 4000,\n limit,\n mobilePosition = 'top',\n position = 'bottom-right',\n richColors = true,\n}: ToasterProps) {\n return (\n <ToastPrimitive.Provider\n limit={limit}\n timeout={duration}\n toastManager={manager}\n >\n <ToastPrimitive.Portal>\n <ToastPrimitive.Viewport\n // block + zero height: the toasts are absolutely positioned against\n // this box's bottom edge, the way Base UI's stacked example works\n className={cn(\n 'fixed inset-x-4 z-50 block h-0 outline-none',\n mobilePosition === 'top' ? 'top-4' : 'bottom-4',\n 'sm:inset-x-auto sm:w-96 sm:max-w-[calc(100vw-2rem)]',\n POSITION_CLASSES[position],\n className,\n )}\n data-mobile-side={mobilePosition}\n data-side={position.startsWith('top') ? 'top' : 'bottom'}\n data-slot=\"toaster\"\n >\n <ToastList closeButton={closeButton} richColors={richColors} />\n </ToastPrimitive.Viewport>\n </ToastPrimitive.Portal>\n </ToastPrimitive.Provider>\n )\n}\n\nexport { Toaster, toast }\nexport type {\n ToastAction,\n ToasterProps,\n ToastOptions,\n ToastPosition,\n ToastPromiseMessages,\n ToastType,\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"toast.js","names":["ToastPrimitive"],"sources":["../../src/components/toast.tsx"],"sourcesContent":["'use client'\n\nimport { Toast as ToastPrimitive } from '@base-ui/react/toast'\nimport type { BaseUIEvent } from '@base-ui/react/types'\nimport {\n Cancel,\n CheckCircle,\n Close,\n Info,\n Warning,\n type SparkIcon,\n} from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\nimport { Spinner } from './spinner'\n\ntype ToastType = 'success' | 'info' | 'warning' | 'error' | 'loading'\n\ntype ToastPosition =\n | 'top-left'\n | 'top-center'\n | 'top-right'\n | 'bottom-left'\n | 'bottom-center'\n | 'bottom-right'\n\n// Per-toast overrides Base UI carries through untouched as opaque `data`.\ntype ToastData = {\n closeButton?: boolean\n closeLabel?: string\n icon?: React.ReactNode\n onCloseClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n}\n\n// `label` is the button's content; everything else a `<button>` takes passes\n// straight through, so a caller can set `className`, `disabled`, `type`, and\n// the rest without a new prop for each one.\ntype ToastAction = Omit<\n React.ComponentPropsWithoutRef<'button'>,\n 'children'\n> & {\n label: React.ReactNode\n}\n\ntype ToastOptions = {\n description?: React.ReactNode\n /** Auto-dismiss time in ms. `0` keeps the toast until dismissed. */\n duration?: number\n /** Reuse an id to update a toast in place instead of stacking a new one. */\n id?: string\n closeButton?: boolean\n /** Accessible name of the close button; overrides the Toaster's `closeLabel`. */\n closeLabel?: string\n /**\n * Replaces the type icon. `null` renders no icon. The icon is decorative,\n * so the title has to carry the meaning on its own.\n */\n icon?: React.ReactNode\n /**\n * Runs when the close button is clicked. Call `event.preventDefault()` to\n * keep the toast open, for example to cancel a running download first.\n */\n onCloseClick?: (event: React.MouseEvent<HTMLButtonElement>) => void\n action?: ToastAction\n onDismiss?: () => void\n /** `high` announces urgently (assertive); the default is polite. */\n priority?: 'low' | 'high'\n}\n\ntype ToastPromiseMessages<Value> = {\n loading: string\n success: string | ((value: Value) => string)\n error: string | ((error: unknown) => string)\n}\n\nconst TOAST_ICONS: Record<\n Exclude<ToastType, 'loading'>,\n { icon: SparkIcon; className: string }\n> = {\n success: { icon: CheckCircle, className: 'text-success-light' },\n info: { icon: Info, className: 'text-info-light' },\n warning: { icon: Warning, className: 'text-warning-light' },\n error: { icon: Cancel, className: 'text-error-light' },\n}\n\n// Opaque radix steps (bg 2, border 6, text 11) so a floating toast never lets\n// page content bleed through the way the alpha `-soft` tokens would. The border\n// carries the tone too, otherwise a tinted toast keeps a grey outline.\nconst TONE_CLASSES: Record<Exclude<ToastType, 'loading'>, string> = {\n success: 'border-green-6 bg-green-2 text-green-11',\n info: 'border-blue-6 bg-blue-2 text-blue-11',\n warning: 'border-orange-6 bg-orange-2 text-orange-11',\n error: 'border-red-6 bg-red-2 text-red-11',\n}\n\n// Mobile-first: every position drops to a full-width stack at the top, which\n// is what the end-customer portal ships. `position` only takes effect from the\n// `sm` breakpoint up.\nconst POSITION_CLASSES: Record<ToastPosition, string> = {\n 'top-left': 'sm:top-4 sm:right-auto sm:bottom-auto sm:left-4',\n 'top-center':\n 'sm:top-4 sm:right-auto sm:bottom-auto sm:left-1/2 sm:-translate-x-1/2',\n 'top-right': 'sm:top-4 sm:right-4 sm:bottom-auto sm:left-auto',\n 'bottom-left': 'sm:top-auto sm:right-auto sm:bottom-4 sm:left-4',\n 'bottom-center':\n 'sm:top-auto sm:right-auto sm:bottom-4 sm:left-1/2 sm:-translate-x-1/2',\n 'bottom-right': 'sm:top-auto sm:right-4 sm:bottom-4 sm:left-auto',\n}\n\nconst manager = ToastPrimitive.createToastManager<ToastData>()\n\nlet sequence = 0\n\n// `label` names the content and `onClick` is wrapped, so neither reaches the\n// DOM button as-is; everything else does.\nfunction actionRest({\n label: _label,\n onClick: _onClick,\n ...rest\n}: ToastAction) {\n return rest\n}\n\nfunction toManagerOptions(\n id: string,\n title: React.ReactNode,\n type: ToastType | undefined,\n options: ToastOptions | undefined,\n) {\n const action = options?.action\n return {\n id,\n title,\n type,\n description: options?.description,\n timeout: options?.duration,\n priority: options?.priority,\n onClose: options?.onDismiss,\n // Base UI leaves the toast open after an action; dismissing matches what\n // callers expect from an \"Undo\" button.\n actionProps: action && {\n ...actionRest(action),\n children: action.label,\n onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n action.onClick?.(event)\n manager.close(id)\n },\n },\n data: {\n closeButton: options?.closeButton,\n closeLabel: options?.closeLabel,\n icon: options?.icon,\n onCloseClick: options?.onCloseClick,\n },\n }\n}\n\nconst emit =\n (type?: ToastType) =>\n (message: React.ReactNode, options?: ToastOptions): string => {\n // an id up front lets the action handler close the toast it belongs to\n const id = options?.id ?? `spark-toast-${(sequence += 1)}`\n return manager.add(toManagerOptions(id, message, type, options))\n }\n\n// A string phase becomes a titled toast of that type; an object phase keeps\n// whatever the caller set and only fills in the type.\nconst phase =\n <Value,>(\n value: ToastPromiseMessages<Value>[keyof ToastPromiseMessages<Value>],\n type: ToastType,\n ) =>\n (result: Value) => {\n const resolved = typeof value === 'function' ? value(result) : value\n return { title: resolved, type }\n }\n\nconst toast = Object.assign(emit(), {\n success: emit('success'),\n info: emit('info'),\n warning: emit('warning'),\n error: emit('error'),\n loading: emit('loading'),\n /** Dismiss one toast, or every toast when called without an id. */\n dismiss: (id?: string) => manager.close(id),\n promise: <Value,>(\n promiseValue: Promise<Value>,\n messages: ToastPromiseMessages<Value>,\n ) =>\n manager.promise(promiseValue, {\n loading: { title: messages.loading, type: 'loading' as const },\n success: phase(messages.success, 'success'),\n error: phase(messages.error as never, 'error'),\n }),\n})\n\nfunction ToastIcon({\n custom,\n type,\n}: {\n custom: React.ReactNode | undefined\n type?: string\n}) {\n const icon = TOAST_ICONS[type as Exclude<ToastType, 'loading'>]\n if (custom !== undefined) {\n if (custom === null || custom === false) return null\n return (\n <span\n aria-hidden=\"true\"\n className=\"flex h-5 w-5 shrink-0 items-center justify-center [--spark-icon-size:20px]\"\n data-slot=\"toast-icon\"\n >\n {custom}\n </span>\n )\n }\n if (type !== 'loading' && !icon) return null\n\n const Glyph = icon?.icon\n\n // Fixed box matching the title's line height, so the glyph and the spinner\n // both centre on the first line whether or not a description follows.\n return (\n <span\n aria-hidden=\"true\"\n className=\"flex h-5 w-5 shrink-0 items-center justify-center\"\n data-slot=\"toast-icon\"\n >\n {type === 'loading' ? (\n // Decorative: the toast already announces the loading message, so the\n // spinner must not add a second status live region.\n <Spinner\n className=\"text-gray-11\"\n label=\"\"\n role=\"presentation\"\n size=\"sm\"\n />\n ) : Glyph ? (\n <Glyph className={cn('[--spark-icon-size:20px]', icon.className)} />\n ) : null}\n </span>\n )\n}\n\nfunction ToastItem({\n closeButton,\n closeLabel,\n richColors,\n toast: toastObject,\n}: {\n closeButton: boolean\n closeLabel: string\n richColors: boolean\n toast: ToastPrimitive.Root.ToastObject<ToastData>\n}) {\n const tone = TONE_CLASSES[toastObject.type as Exclude<ToastType, 'loading'>]\n const showClose = toastObject.data?.closeButton ?? closeButton\n const onCloseClick = toastObject.data?.onCloseClick\n\n return (\n <ToastPrimitive.Root\n data-slot=\"toast\"\n className={cn(\n // Skin only. All geometry (position, stacking, transitions, the\n // pointer bridge) lives in styles/index.css, because Tailwind's\n // `utilities` layer outranks `components` and a stray `bottom-0` here\n // would beat the stylesheet's `bottom: auto` on top-anchored stacks.\n // The border is what makes the cards behind the front one legible.\n 'flex items-start gap-2 rounded-lg border border-gray-a5 bg-gray-1 p-3 text-gray shadow-md select-none',\n richColors && tone,\n )}\n // the stack is top-anchored on mobile and bottom-anchored above `sm`, so\n // both vertical directions have to dismiss\n swipeDirection={['up', 'down', 'right']}\n toast={toastObject}\n >\n <ToastIcon custom={toastObject.data?.icon} type={toastObject.type} />\n <ToastPrimitive.Content className=\"flex min-w-0 flex-1 flex-col gap-0.5\">\n <ToastPrimitive.Title\n className=\"text-sm font-medium\"\n data-slot=\"toast-title\"\n />\n <ToastPrimitive.Description\n className={cn(\n 'text-sm',\n richColors && tone ? 'text-inherit' : 'text-gray-11',\n )}\n data-slot=\"toast-description\"\n />\n </ToastPrimitive.Content>\n {toastObject.actionProps ? (\n <ToastPrimitive.Action\n // -my-2 keeps the 36px control from stretching a single-line row past\n // the 20px text; self-center then lands it on the title when there is\n // no description, and mid-block when there is one\n className={cn(\n buttonVariants({ size: 'small', variant: 'primary' }),\n '-my-2 shrink-0 self-center rounded-full',\n )}\n data-slot=\"toast-action\"\n />\n ) : null}\n {showClose ? (\n <ToastPrimitive.Close\n aria-label={toastObject.data?.closeLabel ?? closeLabel}\n className={cn(\n buttonVariants({ size: 'icon-small', variant: 'tertiary' }),\n // -my-1: same reason as the action, for a 28px control\n '-my-1 -mr-1 size-7 shrink-0 self-center text-gray-11',\n )}\n data-slot=\"toast-close\"\n onClick={\n onCloseClick &&\n ((event: BaseUIEvent<React.MouseEvent<HTMLButtonElement>>) => {\n onCloseClick(event)\n // Base UI's own close runs after this handler unless prevented.\n if (event.defaultPrevented) event.preventBaseUIHandler()\n })\n }\n >\n <Close aria-hidden=\"true\" className=\"[--spark-icon-size:18px]\" />\n </ToastPrimitive.Close>\n ) : null}\n </ToastPrimitive.Root>\n )\n}\n\nfunction ToastList({\n closeButton,\n closeLabel,\n richColors,\n}: {\n closeButton: boolean\n closeLabel: string\n richColors: boolean\n}) {\n const { toasts } = ToastPrimitive.useToastManager<ToastData>()\n\n return toasts.map((toastObject) => (\n <ToastItem\n closeButton={closeButton}\n closeLabel={closeLabel}\n key={toastObject.id}\n richColors={richColors}\n toast={toastObject}\n />\n ))\n}\n\ntype ToasterProps = {\n className?: string\n /** Corner or edge the toasts stack in. */\n position?: ToastPosition\n /** Close button on every toast; a per-toast `closeButton` wins. */\n closeButton?: boolean\n /** Accessible name of every close button; a per-toast `closeLabel` wins. */\n closeLabel?: string\n /** Tinted surfaces for success/info/warning/error toasts. */\n richColors?: boolean\n /** Default auto-dismiss time in ms. `0` disables auto-dismiss. */\n duration?: number\n /** Toasts visible at once before older ones are marked `data-limited`. */\n limit?: number\n /**\n * Vertical edge below the `sm` breakpoint, where the stack is always\n * full-width and `position` does not apply. Defaults to `top`, matching the\n * end-customer portal.\n */\n mobilePosition?: 'top' | 'bottom'\n}\n\nfunction Toaster({\n className,\n closeButton = true,\n closeLabel = 'Close',\n duration = 4000,\n limit,\n mobilePosition = 'top',\n position = 'bottom-right',\n richColors = true,\n}: ToasterProps) {\n return (\n <ToastPrimitive.Provider\n limit={limit}\n timeout={duration}\n toastManager={manager}\n >\n <ToastPrimitive.Portal>\n <ToastPrimitive.Viewport\n // block + zero height: the toasts are absolutely positioned against\n // this box's bottom edge, the way Base UI's stacked example works\n className={cn(\n 'fixed inset-x-4 z-50 block h-0 outline-none',\n mobilePosition === 'top' ? 'top-4' : 'bottom-4',\n 'sm:inset-x-auto sm:w-96 sm:max-w-[calc(100vw-2rem)]',\n POSITION_CLASSES[position],\n className,\n )}\n data-mobile-side={mobilePosition}\n data-side={position.startsWith('top') ? 'top' : 'bottom'}\n data-slot=\"toaster\"\n >\n <ToastList\n closeButton={closeButton}\n closeLabel={closeLabel}\n richColors={richColors}\n />\n </ToastPrimitive.Viewport>\n </ToastPrimitive.Portal>\n </ToastPrimitive.Provider>\n )\n}\n\nexport { Toaster, toast }\nexport type {\n ToastAction,\n ToasterProps,\n ToastOptions,\n ToastPosition,\n ToastPromiseMessages,\n ToastType,\n}\n"],"mappings":"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"}
@@ -1 +1 @@
1
- {"version":3,"file":"generate-radix-colors.cjs","names":["RadixColors","Color"],"sources":["../../src/lib/generate-radix-colors.tsx"],"sourcesContent":["/**\n * Vendored from Radix UI's website — components/generate-radix-colors.tsx\n * https://github.com/radix-ui/website\n *\n * MIT License — Copyright (c) 2024 WorkOS\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND. (Full text:\n * https://github.com/radix-ui/website/blob/main/LICENSE)\n *\n * Kept VERBATIM so it can be re-synced upstream (this file is excluded from the\n * formatter in vite.config.ts). Strict type-checking is skipped (upstream targets\n * a looser tsconfig with unchecked array indexing over fixed 12-step scales).\n *\n * Only deviation from upstream: `getAlphaColorSrgb`/`getAlphaColorP3` are `export`ed (no\n * algorithm change) so `accent-theme.ts` can re-solve alpha for its canvas-tinted steps\n * with Radix's own solver instead of duplicating its rounding-correction logic. Re-apply\n * these two keywords after a re-sync.\n */\n// @ts-nocheck\nimport * as RadixColors from \"@radix-ui/colors\";\nimport Color from \"colorjs.io\";\nimport BezierEasing from \"bezier-easing\";\n\ntype ArrayOf12<T> = [T, T, T, T, T, T, T, T, T, T, T, T];\nconst arrayOf12 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as const;\n\n// prettier-ignore\nconst grayScaleNames = ['gray', 'mauve', 'slate', 'sage', 'olive', 'sand'] as const;\n\n// prettier-ignore\nconst scaleNames = [...grayScaleNames, 'tomato', 'red', 'ruby', 'crimson', 'pink',\n'plum', 'purple', 'violet', 'iris', 'indigo', 'blue', 'cyan', 'teal', 'jade', 'green',\n'grass', 'brown', 'orange', 'sky', 'mint', 'lime', 'yellow', 'amber'] as const;\n\nconst lightColors = Object.fromEntries(\n\tscaleNames.map((scaleName) => [\n\t\tscaleName,\n\t\tObject.values(RadixColors[`${scaleName}P3`]).map((str) => new Color(str).to(\"oklch\")),\n\t]),\n) as Record<(typeof scaleNames)[number], ArrayOf12<Color>>;\n\nconst darkColors = Object.fromEntries(\n\tscaleNames.map((scaleName) => [\n\t\tscaleName,\n\t\tObject.values(RadixColors[`${scaleName}DarkP3`]).map((str) => new Color(str).to(\"oklch\")),\n\t]),\n) as Record<(typeof scaleNames)[number], ArrayOf12<Color>>;\n\nconst lightGrayColors = Object.fromEntries(\n\tgrayScaleNames.map((scaleName) => [\n\t\tscaleName,\n\t\tObject.values(RadixColors[`${scaleName}P3`]).map((str) => new Color(str).to(\"oklch\")),\n\t]),\n) as Record<(typeof grayScaleNames)[number], ArrayOf12<Color>>;\n\nconst darkGrayColors = Object.fromEntries(\n\tgrayScaleNames.map((scaleName) => [\n\t\tscaleName,\n\t\tObject.values(RadixColors[`${scaleName}DarkP3`]).map((str) => new Color(str).to(\"oklch\")),\n\t]),\n) as Record<(typeof grayScaleNames)[number], ArrayOf12<Color>>;\n\nexport const generateRadixColors = ({\n\tappearance,\n\t...args\n}: {\n\tappearance: \"light\" | \"dark\";\n\taccent: string;\n\tgray: string;\n\tbackground: string;\n}) => {\n\tconst allScales = appearance === \"light\" ? lightColors : darkColors;\n\tconst grayScales = appearance === \"light\" ? lightGrayColors : darkGrayColors;\n\tconst backgroundColor = new Color(args.background).to(\"oklch\");\n\n\tconst grayBaseColor = new Color(args.gray).to(\"oklch\");\n\tconst grayScaleColors = getScaleFromColor(grayBaseColor, grayScales, backgroundColor);\n\n\tconst accentBaseColor = new Color(args.accent).to(\"oklch\");\n\n\tlet accentScaleColors = getScaleFromColor(accentBaseColor, allScales, backgroundColor);\n\n\t// Enforce srgb for the background color\n\tconst backgroundHex = backgroundColor.to(\"srgb\").toString({ format: \"hex\" });\n\n\t// Make sure we use the tint from the gray scale for when base is pure white or black\n\tconst accentBaseHex = accentBaseColor.to(\"srgb\").toString({ format: \"hex\" });\n\tif (accentBaseHex === \"#000\" || accentBaseHex === \"#fff\") {\n\t\taccentScaleColors = grayScaleColors.map((color) => color.clone()) as ArrayOf12<Color>;\n\t}\n\n\tconst [accent9Color, accentContrastColor] = getStep9Colors(accentScaleColors, accentBaseColor);\n\n\taccentScaleColors[8] = accent9Color;\n\taccentScaleColors[9] = getButtonHoverColor(accent9Color, [accentScaleColors]);\n\n\t// Limit saturation of the text colors\n\taccentScaleColors[10].coords[1] = Math.min(\n\t\tMath.max(accentScaleColors[8].coords[1], accentScaleColors[7].coords[1]),\n\t\taccentScaleColors[10].coords[1],\n\t);\n\taccentScaleColors[11].coords[1] = Math.min(\n\t\tMath.max(accentScaleColors[8].coords[1], accentScaleColors[7].coords[1]),\n\t\taccentScaleColors[11].coords[1],\n\t);\n\n\tconst accentScaleHex = accentScaleColors.map((color) =>\n\t\tcolor.to(\"srgb\").toString({ format: \"hex\" }),\n\t) as ArrayOf12<string>;\n\n\tconst accentScaleWideGamut = accentScaleColors.map(toOklchString) as ArrayOf12<string>;\n\n\tconst accentScaleAlphaHex = accentScaleHex.map((color) =>\n\t\tgetAlphaColorSrgb(color, backgroundHex),\n\t) as ArrayOf12<string>;\n\n\tconst accentScaleAlphaWideGamutString = accentScaleHex.map((color) =>\n\t\tgetAlphaColorP3(color, backgroundHex),\n\t) as ArrayOf12<string>;\n\n\tconst accentContrastColorHex = accentContrastColor.to(\"srgb\").toString({ format: \"hex\" });\n\n\tconst grayScaleHex = grayScaleColors.map((color) =>\n\t\tcolor.to(\"srgb\").toString({ format: \"hex\" }),\n\t) as ArrayOf12<string>;\n\n\tconst grayScaleWideGamut = grayScaleColors.map(toOklchString) as ArrayOf12<string>;\n\n\tconst grayScaleAlphaHex = grayScaleHex.map((color) =>\n\t\tgetAlphaColorSrgb(color, backgroundHex),\n\t) as ArrayOf12<string>;\n\n\tconst grayScaleAlphaWideGamutString = grayScaleHex.map((color) =>\n\t\tgetAlphaColorP3(color, backgroundHex),\n\t) as ArrayOf12<string>;\n\n\tconst accentSurfaceHex =\n\t\tappearance === \"light\"\n\t\t\t? getAlphaColorSrgb(accentScaleHex[1], backgroundHex, 0.8)\n\t\t\t: getAlphaColorSrgb(accentScaleHex[1], backgroundHex, 0.5);\n\n\tconst accentSurfaceWideGamutString =\n\t\tappearance === \"light\"\n\t\t\t? getAlphaColorP3(accentScaleWideGamut[1], backgroundHex, 0.8)\n\t\t\t: getAlphaColorP3(accentScaleWideGamut[1], backgroundHex, 0.5);\n\n\treturn {\n\t\taccentScale: accentScaleHex,\n\t\taccentScaleAlpha: accentScaleAlphaHex,\n\t\taccentScaleWideGamut: accentScaleWideGamut,\n\t\taccentScaleAlphaWideGamut: accentScaleAlphaWideGamutString,\n\t\taccentContrast: accentContrastColorHex,\n\n\t\tgrayScale: grayScaleHex,\n\t\tgrayScaleAlpha: grayScaleAlphaHex,\n\t\tgrayScaleWideGamut: grayScaleWideGamut,\n\t\tgrayScaleAlphaWideGamut: grayScaleAlphaWideGamutString,\n\n\t\tgraySurface: appearance === \"light\" ? \"#ffffffcc\" : \"rgba(0, 0, 0, 0.05)\",\n\t\tgraySurfaceWideGamut:\n\t\t\tappearance === \"light\" ? \"color(display-p3 1 1 1 / 80%)\" : \"color(display-p3 0 0 0 / 5%)\",\n\n\t\taccentSurface: accentSurfaceHex,\n\t\taccentSurfaceWideGamut: accentSurfaceWideGamutString,\n\n\t\tbackground: backgroundHex,\n\t};\n};\n\nfunction getStep9Colors(scale: ArrayOf12<Color>, accentBaseColor: Color): [Color, Color] {\n\tconst referenceBackgroundColor = scale[0];\n\tconst distance = accentBaseColor.deltaEOK(referenceBackgroundColor) * 100;\n\n\t// If the accent base color is close to the page background color, it's likely\n\t// white on white or black on black, so we want to return something that makes sense instead\n\tif (distance < 25) {\n\t\treturn [scale[8], getTextColor(scale[8])];\n\t}\n\n\treturn [accentBaseColor, getTextColor(accentBaseColor)];\n}\n\nfunction getButtonHoverColor(source: Color, scales: ArrayOf12<Color>[]) {\n\tconst [L, C, H] = source.coords;\n\tconst newL = L > 0.4 ? L - 0.03 / (L + 0.1) : L + 0.03 / (L + 0.1);\n\tconst newC = L > 0.4 && !isNaN(H) ? C * 0.93 + 0 : C;\n\tconst buttonHoverColor = new Color(\"oklch\", [newL, newC, H]);\n\n\t// Find closest in-scale color to donate the chroma and hue.\n\t// Especially useful when the source color is pure white or black,\n\t// but the gray scale is tinted.\n\tlet closestColor = buttonHoverColor;\n\tlet minDistance = Infinity;\n\n\tscales.forEach((scale) => {\n\t\tfor (const color of scale) {\n\t\t\tconst distance = buttonHoverColor.deltaEOK(color);\n\t\t\tif (distance < minDistance) {\n\t\t\t\tminDistance = distance;\n\t\t\t\tclosestColor = color;\n\t\t\t}\n\t\t}\n\t});\n\n\tbuttonHoverColor.coords[1] = closestColor.coords[1];\n\tbuttonHoverColor.coords[2] = closestColor.coords[2];\n\treturn buttonHoverColor;\n}\n\nfunction getScaleFromColor(\n\tsource: Color,\n\tscales: Record<string, ArrayOf12<Color>>,\n\tbackgroundColor: Color,\n) {\n\tlet allColors: { scale: string; color: Color; distance: number }[] = [];\n\n\tObject.entries(scales).forEach(([name, scale]) => {\n\t\tfor (const color of scale) {\n\t\t\tconst distance = source.deltaEOK(color);\n\t\t\tallColors.push({ scale: name, distance, color });\n\t\t}\n\t});\n\n\tallColors.sort((a, b) => a.distance - b.distance);\n\n\t// Remove non-unique scales\n\tlet closestColors = allColors.filter(\n\t\t(color, i, arr) => i === arr.findIndex((value) => value.scale === color.scale),\n\t);\n\n\t// If the next two closest colors are both grays, remove the second one until it’s not a gray anymore.\n\t// This is because up next we will be comparing how close the two closest colors are to the source color,\n\t// and since the grays are all extremely close to each other, we won’t get any useful data from the second\n\t// closest color if it’s also a gray.\n\tconst grayScaleNamesStr = grayScaleNames as readonly string[];\n\tconst allAreGrays = closestColors.every((color) => grayScaleNamesStr.includes(color.scale));\n\tif (!allAreGrays && grayScaleNamesStr.includes(closestColors[0].scale)) {\n\t\twhile (grayScaleNamesStr.includes(closestColors[1].scale)) {\n\t\t\tclosestColors.splice(1, 1);\n\t\t}\n\t}\n\n\tlet colorA = closestColors[0];\n\tlet colorB = closestColors[1];\n\n\t// Light trigonometry ahead.\n\t//\n\t// We want to determine the color that is the closest to the source color. Sometimes it makes sense\n\t// to proportionally mix the two closest colors together, but sometimes it is not useful at all.\n\t// Color coords are spatial in 3D, however we can treat the data we have as a 2D projection that is good enough.\n\t//\n\t// Case 1:\n\t// If the distances between the source color, the 1st closest color (A) and the 2nd closest color (B) form\n\t// a triangle where NEITHER angle A nor B are larger than 90 degrees, then we want to mix the 1st and the 2nd\n\t// closest colors in the same proportion as distances AD and BD are to each other. Mixing the two would result\n\t// in a color that would be closer to the source color than either of the two original closest colors.\n\t// Example: source color is a desaturated blue, which is between \"indigo\" and \"slate\" scales.\n\t//\n\t// C ← Source color\n\t// /|⟍\n\t// / | ⟍\n\t// b / | ⟍ a\n\t// / | ⟍\n\t// / | ⟍\n\t// A --- D -------- B\n\t// ↑\n\t// The color we want to use as the base, which is a mix of A and B.\n\t//\n\t// Case 2:\n\t// If the distances between the source color, the 1st closest color (A) and the 2nd closest color (B) form\n\t// a triangle where EITHER angle A or B are larger than 90 degrees, then we don’t care about point B because it’s\n\t// directionally the same as A, as mixing A and B can’t provide us with a color that is any closer to the source.\n\t// Example: source color is a saturated blue, with \"blue\" being the closest scale, and \"indigo\" just being further.\n\t//\n\t// C ← Source color\n\t// \\⟍\n\t// \\ ⟍\n\t// \\ ⟍ a\n\t// b \\ ⟍\n\t// \\ ⟍\n\t// A ------- B\n\t// ↑\n\t// The color we want to use as the base, which is not influenced by B.\n\n\t// We’ll need all the lengths of the triangle sides, named after the angles they look at:\n\tconst a = colorB.distance;\n\tconst b = colorA.distance;\n\tconst c = colorA.color.deltaEOK(colorB.color);\n\n\t// We can get the ratios of AD to BD lengths with trigonometry using tangents,\n\t// as the ratio of the tangents of the opposite angles will match.\n\tconst cosA = (b ** 2 + c ** 2 - a ** 2) / (2 * b * c);\n\tconst radA = Math.acos(cosA);\n\tconst sinA = Math.sin(radA);\n\n\tconst cosB = (a ** 2 + c ** 2 - b ** 2) / (2 * a * c);\n\tconst radB = Math.acos(cosB);\n\tconst sinB = Math.sin(radB);\n\n\t// Tangent of angle C in the ACD triangle\n\tconst tanC1 = cosA / sinA;\n\n\t// Tangent of angle C in the BCD triangle\n\tconst tanC2 = cosB / sinB;\n\n\t// The ratio of the tangents corresponds to the ratio of the distances AD to BD\n\t// In the end, it means how much of scale B we want to mix into scale A.\n\t// If it’s \"0\" or less, this is an obtuse triangle from case 2, and we use just scale A.\n\tconst ratio = Math.max(0, tanC1 / tanC2) * 0.5;\n\n\t// The base scale is going to be a mix of the two closest scales, with the mix ratio we determined before\n\tconst scaleA = scales[colorA.scale];\n\tconst scaleB = scales[colorB.scale];\n\tconst scale = arrayOf12.map((i) =>\n\t\tnew Color(Color.mix(scaleA[i], scaleB[i], ratio)).to(\"oklch\"),\n\t) as ArrayOf12<Color>;\n\n\t// Get the closest color from the pre-mixed scale we created\n\tconst baseColor = scale.slice().sort((a, b) => source.deltaEOK(a) - source.deltaEOK(b))[0];\n\n\t// Note the chroma difference between the source color and the base color\n\tconst ratioC = source.coords[1] / baseColor.coords[1];\n\n\t// Modify hue and chroma of the scale to match the source color\n\tscale.forEach((color) => {\n\t\tcolor.coords[1] = Math.min(source.coords[1] * 1.5, color.coords[1] * ratioC);\n\t\tcolor.coords[2] = source.coords[2];\n\t});\n\n\t// Light mode\n\tif (scale[0].coords[0] > 0.5) {\n\t\tconst lightnessScale = scale.map(({ coords }) => coords[0]);\n\t\tconst backgroundL = Math.max(0, Math.min(1, backgroundColor.coords[0]));\n\t\tconst newLightnessScale = transposeProgressionStart(\n\t\t\tbackgroundL,\n\t\t\t// Add white as the first \"step\" of the light scale\n\t\t\t[1, ...lightnessScale],\n\t\t\tlightModeEasing,\n\t\t);\n\n\t\t// Remove the step we added\n\t\tnewLightnessScale.shift();\n\n\t\tnewLightnessScale.forEach((lightness, i) => {\n\t\t\tscale[i].coords[0] = lightness;\n\t\t});\n\n\t\treturn scale;\n\t}\n\n\t// Dark mode\n\tlet ease: typeof darkModeEasing = [...darkModeEasing];\n\tconst referenceBackgroundColorL = scale[0].coords[0];\n\tconst backgroundColorL = Math.max(0, Math.min(1, backgroundColor.coords[0]));\n\n\t// If background is lighter than step 0, we want to gradually change the easing to linear\n\tconst ratioL = backgroundColorL / referenceBackgroundColorL;\n\n\tif (ratioL > 1) {\n\t\tconst maxRatio = 1.5;\n\n\t\tfor (let i = 0; i < ease.length; i++) {\n\t\t\tconst metaRatio = (ratioL - 1) * (maxRatio / (maxRatio - 1));\n\t\t\tease[i] = ratioL > maxRatio ? 0 : Math.max(0, ease[i] * (1 - metaRatio));\n\t\t}\n\t}\n\n\tconst lightnessScale = scale.map(({ coords }) => coords[0]);\n\tconst backgroundL = backgroundColor.coords[0];\n\tconst newLightnessScale = transposeProgressionStart(backgroundL, lightnessScale, ease);\n\n\tnewLightnessScale.forEach((lightness, i) => {\n\t\tscale[i].coords[0] = lightness;\n\t});\n\n\treturn scale;\n}\n\nfunction getTextColor(background: Color) {\n\tconst white = new Color(\"oklch\", [1, 0, 0]);\n\n\tif (Math.abs(white.contrastAPCA(background)) < 40) {\n\t\tconst [, C, H] = background.coords;\n\t\treturn new Color(\"oklch\", [0.25, Math.max(0.08 * C, 0.04), H]);\n\t}\n\n\treturn white;\n}\n\n// target = background * (1 - alpha) + foreground * alpha\n// alpha = (target - background) / (foreground - background)\n// Expects 0-1 numbers for the RGB channels\nfunction getAlphaColor(\n\ttargetRgb: number[],\n\tbackgroundRgb: number[],\n\trgbPrecision: number,\n\talphaPrecision: number,\n\ttargetAlpha?: number,\n) {\n\tconst [tr, tg, tb] = targetRgb.map((c) => Math.round(c * rgbPrecision));\n\tconst [br, bg, bb] = backgroundRgb.map((c) => Math.round(c * rgbPrecision));\n\n\tif (\n\t\ttr === undefined ||\n\t\ttg === undefined ||\n\t\ttb === undefined ||\n\t\tbr === undefined ||\n\t\tbg === undefined ||\n\t\tbb === undefined\n\t) {\n\t\tthrow Error(\"Color is undefined\");\n\t}\n\n\t// Is the background color lighter, RGB-wise, than target color?\n\t// Decide whether we want to add as little color or as much color as possible,\n\t// darkening or lightening the background respectively.\n\t// If at least one of the bits of the target RGB value\n\t// is lighter than the background, we want to lighten it.\n\tlet desiredRgb = 0;\n\tif (tr > br) {\n\t\tdesiredRgb = rgbPrecision;\n\t} else if (tg > bg) {\n\t\tdesiredRgb = rgbPrecision;\n\t} else if (tb > bb) {\n\t\tdesiredRgb = rgbPrecision;\n\t}\n\n\tconst alphaR = (tr - br) / (desiredRgb - br);\n\tconst alphaG = (tg - bg) / (desiredRgb - bg);\n\tconst alphaB = (tb - bb) / (desiredRgb - bb);\n\n\tconst isPureGray = [alphaR, alphaG, alphaB].every((alpha) => alpha === alphaR);\n\n\t// No need for precision gymnastics with pure grays, and we can get cleaner output\n\tif (!targetAlpha && isPureGray) {\n\t\t// Convert back to 0-1 values\n\t\tconst V = desiredRgb / rgbPrecision;\n\t\treturn [V, V, V, alphaR] as const;\n\t}\n\n\tconst clampRgb = (n: number) => (isNaN(n) ? 0 : Math.min(rgbPrecision, Math.max(0, n)));\n\tconst clampA = (n: number) => (isNaN(n) ? 0 : Math.min(alphaPrecision, Math.max(0, n)));\n\tconst maxAlpha = targetAlpha ?? Math.max(alphaR, alphaG, alphaB);\n\n\tconst A = clampA(Math.ceil(maxAlpha * alphaPrecision)) / alphaPrecision;\n\tlet R = clampRgb(((br * (1 - A) - tr) / A) * -1);\n\tlet G = clampRgb(((bg * (1 - A) - tg) / A) * -1);\n\tlet B = clampRgb(((bb * (1 - A) - tb) / A) * -1);\n\n\tR = Math.ceil(R);\n\tG = Math.ceil(G);\n\tB = Math.ceil(B);\n\n\tconst blendedR = blendAlpha(R, A, br);\n\tconst blendedG = blendAlpha(G, A, bg);\n\tconst blendedB = blendAlpha(B, A, bb);\n\n\t// Correct for rounding errors in light mode\n\tif (desiredRgb === 0) {\n\t\tif (tr <= br && tr !== blendedR) {\n\t\t\tR = tr > blendedR ? R + 1 : R - 1;\n\t\t}\n\n\t\tif (tg <= bg && tg !== blendedG) {\n\t\t\tG = tg > blendedG ? G + 1 : G - 1;\n\t\t}\n\n\t\tif (tb <= bb && tb !== blendedB) {\n\t\t\tB = tb > blendedB ? B + 1 : B - 1;\n\t\t}\n\t}\n\n\t// Correct for rounding errors in dark mode\n\tif (desiredRgb === rgbPrecision) {\n\t\tif (tr >= br && tr !== blendedR) {\n\t\t\tR = tr > blendedR ? R + 1 : R - 1;\n\t\t}\n\n\t\tif (tg >= bg && tg !== blendedG) {\n\t\t\tG = tg > blendedG ? G + 1 : G - 1;\n\t\t}\n\n\t\tif (tb >= bb && tb !== blendedB) {\n\t\t\tB = tb > blendedB ? B + 1 : B - 1;\n\t\t}\n\t}\n\n\t// Convert back to 0-1 values\n\tR = R / rgbPrecision;\n\tG = G / rgbPrecision;\n\tB = B / rgbPrecision;\n\n\treturn [R, G, B, A] as const;\n}\n\n// Important – I empirically discovered that this rounding is how the browser actually overlays\n// transparent RGB bits over each other. It does NOT round the whole result altogether.\nfunction blendAlpha(foreground: number, alpha: number, background: number, round = true) {\n\tif (round) {\n\t\treturn Math.round(background * (1 - alpha)) + Math.round(foreground * alpha);\n\t}\n\n\treturn background * (1 - alpha) + foreground * alpha;\n}\n\nexport function getAlphaColorSrgb(targetColor: string, backgroundColor: string, targetAlpha?: number) {\n\tconst [r, g, b, a] = getAlphaColor(\n\t\tnew Color(targetColor).to(\"srgb\").coords,\n\t\tnew Color(backgroundColor).to(\"srgb\").coords,\n\t\t255,\n\t\t255,\n\t\ttargetAlpha,\n\t);\n\n\treturn formatHex(new Color(\"srgb\", [r, g, b], a).toString({ format: \"hex\" }));\n}\n\nexport function getAlphaColorP3(targetColor: string, backgroundColor: string, targetAlpha?: number) {\n\tconst [r, g, b, a] = getAlphaColor(\n\t\tnew Color(targetColor).to(\"p3\").coords,\n\t\tnew Color(backgroundColor).to(\"p3\").coords,\n\t\t// Not sure why, but the resulting P3 alpha colors are blended in the browser most precisely when\n\t\t// rounded to 255 integers too. Is the browser using 0-255 rather than 0-1 under the hood for P3 too?\n\t\t255,\n\t\t1000,\n\t\ttargetAlpha,\n\t);\n\n\treturn (\n\t\tnew Color(\"p3\", [r, g, b], a)\n\t\t\t.toString({ precision: 4 })\n\t\t\t// Important: in non-browser environments colorjs.io outputs a different format for some reason\n\t\t\t.replace(\"color(p3 \", \"color(display-p3 \")\n\t);\n}\n\n// Format shortform hex to longform\nfunction formatHex(str: string) {\n\tif (!str.startsWith(\"#\")) {\n\t\treturn str;\n\t}\n\n\tif (str.length === 4) {\n\t\tconst hash = str.charAt(0);\n\t\tconst r = str.charAt(1);\n\t\tconst g = str.charAt(2);\n\t\tconst b = str.charAt(3);\n\t\treturn hash + r + r + g + g + b + b;\n\t}\n\n\tif (str.length === 5) {\n\t\tconst hash = str.charAt(0);\n\t\tconst r = str.charAt(1);\n\t\tconst g = str.charAt(2);\n\t\tconst b = str.charAt(3);\n\t\tconst a = str.charAt(4);\n\t\treturn hash + r + r + g + g + b + b + a + a;\n\t}\n\n\treturn str;\n}\n\nconst darkModeEasing = [1, 0, 1, 0] as [number, number, number, number];\nconst lightModeEasing = [0, 2, 0, 2] as [number, number, number, number];\n\nexport function transposeProgressionStart(\n\tto: number,\n\tarr: number[],\n\tcurve: [number, number, number, number],\n) {\n\treturn arr.map((n, i, arr) => {\n\t\tconst lastIndex = arr.length - 1;\n\t\tconst diff = arr[0] - to;\n\t\tconst fn = BezierEasing(...curve);\n\t\treturn n - diff * fn(1 - i / lastIndex);\n\t});\n}\n\nexport function transposeProgressionEnd(\n\tto: number,\n\tarr: number[],\n\tcurve: [number, number, number, number],\n) {\n\treturn arr.map((n, i, arr) => {\n\t\tconst lastIndex = arr.length - 1;\n\t\tconst diff = arr[lastIndex] - to;\n\t\tconst fn = BezierEasing(...curve);\n\t\treturn n - diff * fn(i / lastIndex);\n\t});\n}\n\n// Convert to OKLCH string with percentage for the lightness channel\n// https://github.com/radix-ui/themes/issues/420\nfunction toOklchString(color: Color) {\n\tconst L = +(color.coords[0] * 100).toFixed(1);\n\treturn color\n\t\t.to(\"oklch\")\n\t\t.toString({ precision: 4 })\n\t\t.replace(/(\\S+)(.+)/, `oklch(${L}%$2`);\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"generate-radix-colors.cjs","names":["RadixColors","Color"],"sources":["../../src/lib/generate-radix-colors.tsx"],"sourcesContent":["/**\n * Vendored from Radix UI's website — components/generate-radix-colors.tsx\n * https://github.com/radix-ui/website\n *\n * MIT License — Copyright (c) 2024 WorkOS\n *\n * Permission is hereby granted, free of charge, to any person obtaining a copy\n * of this software and associated documentation files (the \"Software\"), to deal\n * in the Software without restriction, including without limitation the rights\n * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell\n * copies of the Software, and to permit persons to whom the Software is\n * furnished to do so, subject to the following conditions:\n *\n * The above copyright notice and this permission notice shall be included in all\n * copies or substantial portions of the Software.\n *\n * THE SOFTWARE IS PROVIDED \"AS IS\", WITHOUT WARRANTY OF ANY KIND. (Full text:\n * https://github.com/radix-ui/website/blob/main/LICENSE)\n *\n * Kept VERBATIM so it can be re-synced upstream (this file is excluded from the\n * formatter in vite.config.ts). Strict type-checking is skipped (upstream targets\n * a looser tsconfig with unchecked array indexing over fixed 12-step scales).\n *\n * Only deviation from upstream: `getAlphaColorSrgb`/`getAlphaColorP3` are `export`ed (no\n * algorithm change) so `accent-theme.ts` can re-solve alpha for its canvas-tinted steps\n * with Radix's own solver instead of duplicating its rounding-correction logic. Re-apply\n * these two keywords after a re-sync.\n */\n// @ts-nocheck\nimport * as RadixColors from \"@radix-ui/colors\";\nimport Color from \"colorjs.io\";\nimport BezierEasing from \"bezier-easing\";\n\ntype ArrayOf12<T> = [T, T, T, T, T, T, T, T, T, T, T, T];\nconst arrayOf12 = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11] as const;\n\n// prettier-ignore\nconst grayScaleNames = ['gray', 'mauve', 'slate', 'sage', 'olive', 'sand'] as const;\n\n// prettier-ignore\nconst scaleNames = [...grayScaleNames, 'tomato', 'red', 'ruby', 'crimson', 'pink',\n'plum', 'purple', 'violet', 'iris', 'indigo', 'blue', 'cyan', 'teal', 'jade', 'green',\n'grass', 'brown', 'orange', 'sky', 'mint', 'lime', 'yellow', 'amber'] as const;\n\nconst lightColors = Object.fromEntries(\n\tscaleNames.map((scaleName) => [\n\t\tscaleName,\n\t\tObject.values(RadixColors[`${scaleName}P3`]).map((str) => new Color(str).to(\"oklch\")),\n\t]),\n) as Record<(typeof scaleNames)[number], ArrayOf12<Color>>;\n\nconst darkColors = Object.fromEntries(\n\tscaleNames.map((scaleName) => [\n\t\tscaleName,\n\t\tObject.values(RadixColors[`${scaleName}DarkP3`]).map((str) => new Color(str).to(\"oklch\")),\n\t]),\n) as Record<(typeof scaleNames)[number], ArrayOf12<Color>>;\n\nconst lightGrayColors = Object.fromEntries(\n\tgrayScaleNames.map((scaleName) => [\n\t\tscaleName,\n\t\tObject.values(RadixColors[`${scaleName}P3`]).map((str) => new Color(str).to(\"oklch\")),\n\t]),\n) as Record<(typeof grayScaleNames)[number], ArrayOf12<Color>>;\n\nconst darkGrayColors = Object.fromEntries(\n\tgrayScaleNames.map((scaleName) => [\n\t\tscaleName,\n\t\tObject.values(RadixColors[`${scaleName}DarkP3`]).map((str) => new Color(str).to(\"oklch\")),\n\t]),\n) as Record<(typeof grayScaleNames)[number], ArrayOf12<Color>>;\n\nexport const generateRadixColors = ({\n\tappearance,\n\t...args\n}: {\n\tappearance: \"light\" | \"dark\";\n\taccent: string;\n\tgray: string;\n\tbackground: string;\n}) => {\n\tconst allScales = appearance === \"light\" ? lightColors : darkColors;\n\tconst grayScales = appearance === \"light\" ? lightGrayColors : darkGrayColors;\n\tconst backgroundColor = new Color(args.background).to(\"oklch\");\n\n\tconst grayBaseColor = new Color(args.gray).to(\"oklch\");\n\tconst grayScaleColors = getScaleFromColor(grayBaseColor, grayScales, backgroundColor);\n\n\tconst accentBaseColor = new Color(args.accent).to(\"oklch\");\n\n\tlet accentScaleColors = getScaleFromColor(accentBaseColor, allScales, backgroundColor);\n\n\t// Enforce srgb for the background color\n\tconst backgroundHex = backgroundColor.to(\"srgb\").toString({ format: \"hex\" });\n\n\t// Make sure we use the tint from the gray scale for when base is pure white or black\n\tconst accentBaseHex = accentBaseColor.to(\"srgb\").toString({ format: \"hex\" });\n\tif (accentBaseHex === \"#000\" || accentBaseHex === \"#fff\") {\n\t\taccentScaleColors = grayScaleColors.map((color) => color.clone()) as ArrayOf12<Color>;\n\t}\n\n\tconst [accent9Color, accentContrastColor] = getStep9Colors(accentScaleColors, accentBaseColor);\n\n\taccentScaleColors[8] = accent9Color;\n\taccentScaleColors[9] = getButtonHoverColor(accent9Color, [accentScaleColors]);\n\n\t// Limit saturation of the text colors\n\taccentScaleColors[10].coords[1] = Math.min(\n\t\tMath.max(accentScaleColors[8].coords[1], accentScaleColors[7].coords[1]),\n\t\taccentScaleColors[10].coords[1],\n\t);\n\taccentScaleColors[11].coords[1] = Math.min(\n\t\tMath.max(accentScaleColors[8].coords[1], accentScaleColors[7].coords[1]),\n\t\taccentScaleColors[11].coords[1],\n\t);\n\n\tconst accentScaleHex = accentScaleColors.map((color) =>\n\t\tcolor.to(\"srgb\").toString({ format: \"hex\" }),\n\t) as ArrayOf12<string>;\n\n\tconst accentScaleWideGamut = accentScaleColors.map(toOklchString) as ArrayOf12<string>;\n\n\tconst accentScaleAlphaHex = accentScaleHex.map((color) =>\n\t\tgetAlphaColorSrgb(color, backgroundHex),\n\t) as ArrayOf12<string>;\n\n\tconst accentScaleAlphaWideGamutString = accentScaleHex.map((color) =>\n\t\tgetAlphaColorP3(color, backgroundHex),\n\t) as ArrayOf12<string>;\n\n\tconst accentContrastColorHex = accentContrastColor.to(\"srgb\").toString({ format: \"hex\" });\n\n\tconst grayScaleHex = grayScaleColors.map((color) =>\n\t\tcolor.to(\"srgb\").toString({ format: \"hex\" }),\n\t) as ArrayOf12<string>;\n\n\tconst grayScaleWideGamut = grayScaleColors.map(toOklchString) as ArrayOf12<string>;\n\n\tconst grayScaleAlphaHex = grayScaleHex.map((color) =>\n\t\tgetAlphaColorSrgb(color, backgroundHex),\n\t) as ArrayOf12<string>;\n\n\tconst grayScaleAlphaWideGamutString = grayScaleHex.map((color) =>\n\t\tgetAlphaColorP3(color, backgroundHex),\n\t) as ArrayOf12<string>;\n\n\tconst accentSurfaceHex =\n\t\tappearance === \"light\"\n\t\t\t? getAlphaColorSrgb(accentScaleHex[1], backgroundHex, 0.8)\n\t\t\t: getAlphaColorSrgb(accentScaleHex[1], backgroundHex, 0.5);\n\n\tconst accentSurfaceWideGamutString =\n\t\tappearance === \"light\"\n\t\t\t? getAlphaColorP3(accentScaleWideGamut[1], backgroundHex, 0.8)\n\t\t\t: getAlphaColorP3(accentScaleWideGamut[1], backgroundHex, 0.5);\n\n\treturn {\n\t\taccentScale: accentScaleHex,\n\t\taccentScaleAlpha: accentScaleAlphaHex,\n\t\taccentScaleWideGamut: accentScaleWideGamut,\n\t\taccentScaleAlphaWideGamut: accentScaleAlphaWideGamutString,\n\t\taccentContrast: accentContrastColorHex,\n\n\t\tgrayScale: grayScaleHex,\n\t\tgrayScaleAlpha: grayScaleAlphaHex,\n\t\tgrayScaleWideGamut: grayScaleWideGamut,\n\t\tgrayScaleAlphaWideGamut: grayScaleAlphaWideGamutString,\n\n\t\tgraySurface: appearance === \"light\" ? \"#ffffffcc\" : \"rgba(0, 0, 0, 0.05)\",\n\t\tgraySurfaceWideGamut:\n\t\t\tappearance === \"light\" ? \"color(display-p3 1 1 1 / 80%)\" : \"color(display-p3 0 0 0 / 5%)\",\n\n\t\taccentSurface: accentSurfaceHex,\n\t\taccentSurfaceWideGamut: accentSurfaceWideGamutString,\n\n\t\tbackground: backgroundHex,\n\t};\n};\n\nfunction getStep9Colors(scale: ArrayOf12<Color>, accentBaseColor: Color): [Color, Color] {\n\tconst referenceBackgroundColor = scale[0];\n\tconst distance = accentBaseColor.deltaEOK(referenceBackgroundColor) * 100;\n\n\t// If the accent base color is close to the page background color, it's likely\n\t// white on white or black on black, so we want to return something that makes sense instead\n\tif (distance < 25) {\n\t\treturn [scale[8], getTextColor(scale[8])];\n\t}\n\n\treturn [accentBaseColor, getTextColor(accentBaseColor)];\n}\n\nfunction getButtonHoverColor(source: Color, scales: ArrayOf12<Color>[]) {\n\tconst [L, C, H] = source.coords;\n\tconst newL = L > 0.4 ? L - 0.03 / (L + 0.1) : L + 0.03 / (L + 0.1);\n\tconst newC = L > 0.4 && !isNaN(H) ? C * 0.93 + 0 : C;\n\tconst buttonHoverColor = new Color(\"oklch\", [newL, newC, H]);\n\n\t// Find closest in-scale color to donate the chroma and hue.\n\t// Especially useful when the source color is pure white or black,\n\t// but the gray scale is tinted.\n\tlet closestColor = buttonHoverColor;\n\tlet minDistance = Infinity;\n\n\tscales.forEach((scale) => {\n\t\tfor (const color of scale) {\n\t\t\tconst distance = buttonHoverColor.deltaEOK(color);\n\t\t\tif (distance < minDistance) {\n\t\t\t\tminDistance = distance;\n\t\t\t\tclosestColor = color;\n\t\t\t}\n\t\t}\n\t});\n\n\tbuttonHoverColor.coords[1] = closestColor.coords[1];\n\tbuttonHoverColor.coords[2] = closestColor.coords[2];\n\treturn buttonHoverColor;\n}\n\nfunction getScaleFromColor(\n\tsource: Color,\n\tscales: Record<string, ArrayOf12<Color>>,\n\tbackgroundColor: Color,\n) {\n\tlet allColors: { scale: string; color: Color; distance: number }[] = [];\n\n\tObject.entries(scales).forEach(([name, scale]) => {\n\t\tfor (const color of scale) {\n\t\t\tconst distance = source.deltaEOK(color);\n\t\t\tallColors.push({ scale: name, distance, color });\n\t\t}\n\t});\n\n\tallColors.sort((a, b) => a.distance - b.distance);\n\n\t// Remove non-unique scales\n\tlet closestColors = allColors.filter(\n\t\t(color, i, arr) => i === arr.findIndex((value) => value.scale === color.scale),\n\t);\n\n\t// If the next two closest colors are both grays, remove the second one until it’s not a gray anymore.\n\t// This is because up next we will be comparing how close the two closest colors are to the source color,\n\t// and since the grays are all extremely close to each other, we won’t get any useful data from the second\n\t// closest color if it’s also a gray.\n\tconst grayScaleNamesStr = grayScaleNames as readonly string[];\n\tconst allAreGrays = closestColors.every((color) => grayScaleNamesStr.includes(color.scale));\n\tif (!allAreGrays && grayScaleNamesStr.includes(closestColors[0].scale)) {\n\t\twhile (grayScaleNamesStr.includes(closestColors[1].scale)) {\n\t\t\tclosestColors.splice(1, 1);\n\t\t}\n\t}\n\n\tlet colorA = closestColors[0];\n\tlet colorB = closestColors[1];\n\n\t// Light trigonometry ahead.\n\t//\n\t// We want to determine the color that is the closest to the source color. Sometimes it makes sense\n\t// to proportionally mix the two closest colors together, but sometimes it is not useful at all.\n\t// Color coords are spatial in 3D, however we can treat the data we have as a 2D projection that is good enough.\n\t//\n\t// Case 1:\n\t// If the distances between the source color, the 1st closest color (A) and the 2nd closest color (B) form\n\t// a triangle where NEITHER angle A nor B are larger than 90 degrees, then we want to mix the 1st and the 2nd\n\t// closest colors in the same proportion as distances AD and BD are to each other. Mixing the two would result\n\t// in a color that would be closer to the source color than either of the two original closest colors.\n\t// Example: source color is a desaturated blue, which is between \"indigo\" and \"slate\" scales.\n\t//\n\t// C ← Source color\n\t// /|⟍\n\t// / | ⟍\n\t// b / | ⟍ a\n\t// / | ⟍\n\t// / | ⟍\n\t// A --- D -------- B\n\t// ↑\n\t// The color we want to use as the base, which is a mix of A and B.\n\t//\n\t// Case 2:\n\t// If the distances between the source color, the 1st closest color (A) and the 2nd closest color (B) form\n\t// a triangle where EITHER angle A or B are larger than 90 degrees, then we don’t care about point B because it’s\n\t// directionally the same as A, as mixing A and B can’t provide us with a color that is any closer to the source.\n\t// Example: source color is a saturated blue, with \"blue\" being the closest scale, and \"indigo\" just being further.\n\t//\n\t// C ← Source color\n\t// \\⟍\n\t// \\ ⟍\n\t// \\ ⟍ a\n\t// b \\ ⟍\n\t// \\ ⟍\n\t// A ------- B\n\t// ↑\n\t// The color we want to use as the base, which is not influenced by B.\n\n\t// We’ll need all the lengths of the triangle sides, named after the angles they look at:\n\tconst a = colorB.distance;\n\tconst b = colorA.distance;\n\tconst c = colorA.color.deltaEOK(colorB.color);\n\n\t// We can get the ratios of AD to BD lengths with trigonometry using tangents,\n\t// as the ratio of the tangents of the opposite angles will match.\n\tconst cosA = (b ** 2 + c ** 2 - a ** 2) / (2 * b * c);\n\tconst radA = Math.acos(cosA);\n\tconst sinA = Math.sin(radA);\n\n\tconst cosB = (a ** 2 + c ** 2 - b ** 2) / (2 * a * c);\n\tconst radB = Math.acos(cosB);\n\tconst sinB = Math.sin(radB);\n\n\t// Tangent of angle C in the ACD triangle\n\tconst tanC1 = cosA / sinA;\n\n\t// Tangent of angle C in the BCD triangle\n\tconst tanC2 = cosB / sinB;\n\n\t// The ratio of the tangents corresponds to the ratio of the distances AD to BD\n\t// In the end, it means how much of scale B we want to mix into scale A.\n\t// If it’s \"0\" or less, this is an obtuse triangle from case 2, and we use just scale A.\n\tconst ratio = Math.max(0, tanC1 / tanC2) * 0.5;\n\n\t// The base scale is going to be a mix of the two closest scales, with the mix ratio we determined before\n\tconst scaleA = scales[colorA.scale];\n\tconst scaleB = scales[colorB.scale];\n\tconst scale = arrayOf12.map((i) =>\n\t\tnew Color(Color.mix(scaleA[i], scaleB[i], ratio)).to(\"oklch\"),\n\t) as ArrayOf12<Color>;\n\n\t// Get the closest color from the pre-mixed scale we created\n\tconst baseColor = scale.slice().sort((a, b) => source.deltaEOK(a) - source.deltaEOK(b))[0];\n\n\t// Note the chroma difference between the source color and the base color\n\tconst ratioC = source.coords[1] / baseColor.coords[1];\n\n\t// Modify hue and chroma of the scale to match the source color\n\tscale.forEach((color) => {\n\t\tcolor.coords[1] = Math.min(source.coords[1] * 1.5, color.coords[1] * ratioC);\n\t\tcolor.coords[2] = source.coords[2];\n\t});\n\n\t// Light mode\n\tif (scale[0].coords[0] > 0.5) {\n\t\tconst lightnessScale = scale.map(({ coords }) => coords[0]);\n\t\tconst backgroundL = Math.max(0, Math.min(1, backgroundColor.coords[0]));\n\t\tconst newLightnessScale = transposeProgressionStart(\n\t\t\tbackgroundL,\n\t\t\t// Add white as the first \"step\" of the light scale\n\t\t\t[1, ...lightnessScale],\n\t\t\tlightModeEasing,\n\t\t);\n\n\t\t// Remove the step we added\n\t\tnewLightnessScale.shift();\n\n\t\tnewLightnessScale.forEach((lightness, i) => {\n\t\t\tscale[i].coords[0] = lightness;\n\t\t});\n\n\t\treturn scale;\n\t}\n\n\t// Dark mode\n\tlet ease: typeof darkModeEasing = [...darkModeEasing];\n\tconst referenceBackgroundColorL = scale[0].coords[0];\n\tconst backgroundColorL = Math.max(0, Math.min(1, backgroundColor.coords[0]));\n\n\t// If background is lighter than step 0, we want to gradually change the easing to linear\n\tconst ratioL = backgroundColorL / referenceBackgroundColorL;\n\n\tif (ratioL > 1) {\n\t\tconst maxRatio = 1.5;\n\n\t\tfor (let i = 0; i < ease.length; i++) {\n\t\t\tconst metaRatio = (ratioL - 1) * (maxRatio / (maxRatio - 1));\n\t\t\tease[i] = ratioL > maxRatio ? 0 : Math.max(0, ease[i] * (1 - metaRatio));\n\t\t}\n\t}\n\n\tconst lightnessScale = scale.map(({ coords }) => coords[0]);\n\tconst backgroundL = backgroundColor.coords[0];\n\tconst newLightnessScale = transposeProgressionStart(backgroundL, lightnessScale, ease);\n\n\tnewLightnessScale.forEach((lightness, i) => {\n\t\tscale[i].coords[0] = lightness;\n\t});\n\n\treturn scale;\n}\n\nfunction getTextColor(background: Color) {\n\tconst white = new Color(\"oklch\", [1, 0, 0]);\n\n\tif (Math.abs(white.contrastAPCA(background)) < 40) {\n\t\tconst [, C, H] = background.coords;\n\t\treturn new Color(\"oklch\", [0.25, Math.max(0.08 * C, 0.04), H]);\n\t}\n\n\treturn white;\n}\n\n// target = background * (1 - alpha) + foreground * alpha\n// alpha = (target - background) / (foreground - background)\n// Expects 0-1 numbers for the RGB channels\n// oxlint-disable-next-line eslint/complexity -- pre-existing; split it before adding branches\nfunction getAlphaColor(\n\ttargetRgb: number[],\n\tbackgroundRgb: number[],\n\trgbPrecision: number,\n\talphaPrecision: number,\n\ttargetAlpha?: number,\n) {\n\tconst [tr, tg, tb] = targetRgb.map((c) => Math.round(c * rgbPrecision));\n\tconst [br, bg, bb] = backgroundRgb.map((c) => Math.round(c * rgbPrecision));\n\n\tif (\n\t\ttr === undefined ||\n\t\ttg === undefined ||\n\t\ttb === undefined ||\n\t\tbr === undefined ||\n\t\tbg === undefined ||\n\t\tbb === undefined\n\t) {\n\t\tthrow Error(\"Color is undefined\");\n\t}\n\n\t// Is the background color lighter, RGB-wise, than target color?\n\t// Decide whether we want to add as little color or as much color as possible,\n\t// darkening or lightening the background respectively.\n\t// If at least one of the bits of the target RGB value\n\t// is lighter than the background, we want to lighten it.\n\tlet desiredRgb = 0;\n\tif (tr > br) {\n\t\tdesiredRgb = rgbPrecision;\n\t} else if (tg > bg) {\n\t\tdesiredRgb = rgbPrecision;\n\t} else if (tb > bb) {\n\t\tdesiredRgb = rgbPrecision;\n\t}\n\n\tconst alphaR = (tr - br) / (desiredRgb - br);\n\tconst alphaG = (tg - bg) / (desiredRgb - bg);\n\tconst alphaB = (tb - bb) / (desiredRgb - bb);\n\n\tconst isPureGray = [alphaR, alphaG, alphaB].every((alpha) => alpha === alphaR);\n\n\t// No need for precision gymnastics with pure grays, and we can get cleaner output\n\tif (!targetAlpha && isPureGray) {\n\t\t// Convert back to 0-1 values\n\t\tconst V = desiredRgb / rgbPrecision;\n\t\treturn [V, V, V, alphaR] as const;\n\t}\n\n\tconst clampRgb = (n: number) => (isNaN(n) ? 0 : Math.min(rgbPrecision, Math.max(0, n)));\n\tconst clampA = (n: number) => (isNaN(n) ? 0 : Math.min(alphaPrecision, Math.max(0, n)));\n\tconst maxAlpha = targetAlpha ?? Math.max(alphaR, alphaG, alphaB);\n\n\tconst A = clampA(Math.ceil(maxAlpha * alphaPrecision)) / alphaPrecision;\n\tlet R = clampRgb(((br * (1 - A) - tr) / A) * -1);\n\tlet G = clampRgb(((bg * (1 - A) - tg) / A) * -1);\n\tlet B = clampRgb(((bb * (1 - A) - tb) / A) * -1);\n\n\tR = Math.ceil(R);\n\tG = Math.ceil(G);\n\tB = Math.ceil(B);\n\n\tconst blendedR = blendAlpha(R, A, br);\n\tconst blendedG = blendAlpha(G, A, bg);\n\tconst blendedB = blendAlpha(B, A, bb);\n\n\t// Correct for rounding errors in light mode\n\tif (desiredRgb === 0) {\n\t\tif (tr <= br && tr !== blendedR) {\n\t\t\tR = tr > blendedR ? R + 1 : R - 1;\n\t\t}\n\n\t\tif (tg <= bg && tg !== blendedG) {\n\t\t\tG = tg > blendedG ? G + 1 : G - 1;\n\t\t}\n\n\t\tif (tb <= bb && tb !== blendedB) {\n\t\t\tB = tb > blendedB ? B + 1 : B - 1;\n\t\t}\n\t}\n\n\t// Correct for rounding errors in dark mode\n\tif (desiredRgb === rgbPrecision) {\n\t\tif (tr >= br && tr !== blendedR) {\n\t\t\tR = tr > blendedR ? R + 1 : R - 1;\n\t\t}\n\n\t\tif (tg >= bg && tg !== blendedG) {\n\t\t\tG = tg > blendedG ? G + 1 : G - 1;\n\t\t}\n\n\t\tif (tb >= bb && tb !== blendedB) {\n\t\t\tB = tb > blendedB ? B + 1 : B - 1;\n\t\t}\n\t}\n\n\t// Convert back to 0-1 values\n\tR = R / rgbPrecision;\n\tG = G / rgbPrecision;\n\tB = B / rgbPrecision;\n\n\treturn [R, G, B, A] as const;\n}\n\n// Important – I empirically discovered that this rounding is how the browser actually overlays\n// transparent RGB bits over each other. It does NOT round the whole result altogether.\nfunction blendAlpha(foreground: number, alpha: number, background: number, round = true) {\n\tif (round) {\n\t\treturn Math.round(background * (1 - alpha)) + Math.round(foreground * alpha);\n\t}\n\n\treturn background * (1 - alpha) + foreground * alpha;\n}\n\nexport function getAlphaColorSrgb(targetColor: string, backgroundColor: string, targetAlpha?: number) {\n\tconst [r, g, b, a] = getAlphaColor(\n\t\tnew Color(targetColor).to(\"srgb\").coords,\n\t\tnew Color(backgroundColor).to(\"srgb\").coords,\n\t\t255,\n\t\t255,\n\t\ttargetAlpha,\n\t);\n\n\treturn formatHex(new Color(\"srgb\", [r, g, b], a).toString({ format: \"hex\" }));\n}\n\nexport function getAlphaColorP3(targetColor: string, backgroundColor: string, targetAlpha?: number) {\n\tconst [r, g, b, a] = getAlphaColor(\n\t\tnew Color(targetColor).to(\"p3\").coords,\n\t\tnew Color(backgroundColor).to(\"p3\").coords,\n\t\t// Not sure why, but the resulting P3 alpha colors are blended in the browser most precisely when\n\t\t// rounded to 255 integers too. Is the browser using 0-255 rather than 0-1 under the hood for P3 too?\n\t\t255,\n\t\t1000,\n\t\ttargetAlpha,\n\t);\n\n\treturn (\n\t\tnew Color(\"p3\", [r, g, b], a)\n\t\t\t.toString({ precision: 4 })\n\t\t\t// Important: in non-browser environments colorjs.io outputs a different format for some reason\n\t\t\t.replace(\"color(p3 \", \"color(display-p3 \")\n\t);\n}\n\n// Format shortform hex to longform\nfunction formatHex(str: string) {\n\tif (!str.startsWith(\"#\")) {\n\t\treturn str;\n\t}\n\n\tif (str.length === 4) {\n\t\tconst hash = str.charAt(0);\n\t\tconst r = str.charAt(1);\n\t\tconst g = str.charAt(2);\n\t\tconst b = str.charAt(3);\n\t\treturn hash + r + r + g + g + b + b;\n\t}\n\n\tif (str.length === 5) {\n\t\tconst hash = str.charAt(0);\n\t\tconst r = str.charAt(1);\n\t\tconst g = str.charAt(2);\n\t\tconst b = str.charAt(3);\n\t\tconst a = str.charAt(4);\n\t\treturn hash + r + r + g + g + b + b + a + a;\n\t}\n\n\treturn str;\n}\n\nconst darkModeEasing = [1, 0, 1, 0] as [number, number, number, number];\nconst lightModeEasing = [0, 2, 0, 2] as [number, number, number, number];\n\nexport function transposeProgressionStart(\n\tto: number,\n\tarr: number[],\n\tcurve: [number, number, number, number],\n) {\n\treturn arr.map((n, i, arr) => {\n\t\tconst lastIndex = arr.length - 1;\n\t\tconst diff = arr[0] - to;\n\t\tconst fn = BezierEasing(...curve);\n\t\treturn n - diff * fn(1 - i / lastIndex);\n\t});\n}\n\nexport function transposeProgressionEnd(\n\tto: number,\n\tarr: number[],\n\tcurve: [number, number, number, number],\n) {\n\treturn arr.map((n, i, arr) => {\n\t\tconst lastIndex = arr.length - 1;\n\t\tconst diff = arr[lastIndex] - to;\n\t\tconst fn = BezierEasing(...curve);\n\t\treturn n - diff * fn(i / lastIndex);\n\t});\n}\n\n// Convert to OKLCH string with percentage for the lightness channel\n// https://github.com/radix-ui/themes/issues/420\nfunction toOklchString(color: Color) {\n\tconst L = +(color.coords[0] * 100).toFixed(1);\n\treturn color\n\t\t.to(\"oklch\")\n\t\t.toString({ precision: 4 })\n\t\t.replace(/(\\S+)(.+)/, `oklch(${L}%$2`);\n}\n"],"mappings":"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"}