@urbicon-ui/blocks 6.21.1 → 6.21.2

package/dist/primitives/Toast/Toaster.svelte

@@ -11,7 +11,8 @@
   import WarningTriangleIconDefault from '../../icons/WarningTriangleIcon.svelte';
   import DangerCircleIconDefault from '../../icons/DangerCircleIcon.svelte';
   import { getBlocksConfig, resolveSlotClasses } from '../../provider';
-  import type { ToastProps } from './index';
+  import Spinner from '../Spinner/Spinner.svelte';
+  import type { ToastData, ToastProps } from './index';
 
   const bt = useBlocksI18n();
 
@@ -66,12 +67,25 @@
           content: () => '',
           title: () => '',
           description: () => '',
+          actions: () => '',
+          actionButton: () => '',
+          cancelButton: () => '',
           dismissButton: () => '',
           progress: () => ''
         }
       : toastVariants({ placement })
   );
 
+  // Run a toast action/cancel button: fire its handler, then dismiss unless the
+  // action opted out (`dismissOnClick: false`, e.g. a "Retry" that re-issues the
+  // async work and updates the same toast).
+  function runAction(toast: ToastData, which: 'action' | 'cancel') {
+    const action = toast[which];
+    if (!action) return;
+    action.onClick?.(toast.id);
+    if (action.dismissOnClick !== false) toaster.dismiss(toast.id);
+  }
+
   function slot(key: keyof typeof styles, intent?: string) {
     const overrides = slotClasses?.[key];
     if (unstyled) return overrides ?? '';
@@ -115,7 +129,11 @@
   {#each visibleToasts as toast (toast.id)}
     {@const IntentIcon = INTENT_ICON_MAP[toast.intent] ?? INTENT_ICON_MAP.neutral}
     <div class={slot('toast', toast.intent)} role="alert" transition:fly={flyParams()}>
-      <IntentIcon class={slot('icon', toast.intent)} />
+      {#if toast.loading}
+        <span class={slot('icon', toast.intent)}><Spinner size="sm" /></span>
+      {:else}
+        <IntentIcon class={slot('icon', toast.intent)} />
+      {/if}
 
       <div class={slot('content')}>
         {#if toast.title}
@@ -124,6 +142,28 @@
         {#if toast.description}
           <div class={slot('description')}>{toast.description}</div>
         {/if}
+        {#if toast.action || toast.cancel}
+          <div class={slot('actions')}>
+            {#if toast.action}
+              <button
+                type="button"
+                class={slot('actionButton')}
+                onclick={() => runAction(toast, 'action')}
+              >
+                {toast.action.label}
+              </button>
+            {/if}
+            {#if toast.cancel}
+              <button
+                type="button"
+                class={slot('cancelButton')}
+                onclick={() => runAction(toast, 'cancel')}
+              >
+                {toast.cancel.label}
+              </button>
+            {/if}
+          </div>
+        {/if}
       </div>
 
       {#if toast.dismissible}

package/dist/primitives/Toast/index.d.ts

@@ -11,6 +11,17 @@ export declare const TOAST_INTENTS: readonly ["primary", "info", "success", "war
  * standard intent palette.
  */
 export type ToastIntent = (typeof TOAST_INTENTS)[number];
+/**
+ * An action or cancel button rendered inside a toast (Sonner-style).
+ */
+export interface ToastAction {
+    /** Button label. */
+    label: string;
+    /** Click handler. Receives the toast id so the handler can dismiss/update it. */
+    onClick?: (id: string) => void;
+    /** Dismiss the toast after the click. @default true */
+    dismissOnClick?: boolean;
+}
 /**
  * Internal data shape for a rendered toast. Created by `toaster.add()`.
  */
@@ -29,6 +40,25 @@ export interface ToastData {
     dismissible: boolean;
     /** Show an animated progress bar that counts down the remaining `duration`. @default true */
     showProgress: boolean;
+    /** Primary action button (prominent). */
+    action?: ToastAction;
+    /** Secondary/cancel button (quiet). */
+    cancel?: ToastAction;
+    /** Render a spinner instead of the intent icon (used by `toaster.promise` while pending). @default false */
+    loading?: boolean;
+}
+/**
+ * Per-state config for `toaster.promise`. Each state is either a plain title
+ * string or a full {@link ToastInput}; `success`/`error` may also be a function
+ * of the resolved value / rejection reason.
+ */
+export interface ToastPromiseOptions<T> {
+    /** Shown while the promise is pending (spinner, persistent, not dismissible). */
+    loading: string | ToastInput;
+    /** Shown when the promise resolves. */
+    success: string | ToastInput | ((value: T) => string | ToastInput);
+    /** Shown when the promise rejects. */
+    error: string | ToastInput | ((reason: unknown) => string | ToastInput);
 }
 /**
  * Options accepted by `toaster.add()` and the shorthand methods (`info`, `success`, `warning`, `danger`).

package/dist/primitives/Toast/toast.store.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ToastData, ToastInput, ToastShorthandOpts } from './index.js';
+import type { ToastData, ToastInput, ToastPromiseOptions, ToastShorthandOpts } from './index.js';
 import type { ToastPlacement } from './toast.variants.js';
 /**
  * Reactive store that manages the global toast queue.
@@ -24,6 +24,30 @@ declare class ToastStore {
     registerSubscriber(): () => void;
     /** Create a toast with full control over all options. Returns the toast ID for programmatic dismissal. */
     add(input: ToastInput): string;
+    /**
+     * Merge new fields into an existing toast in place — same id, same stack
+     * position — and reset its auto-dismiss timer to the new `duration`. No-op if
+     * the toast is gone. Backs `promise()`, which flips a pending toast to
+     * success/error without it sliding out and a new one flying in.
+     */
+    update(id: string, input: ToastInput): void;
+    /**
+     * Drive a toast through a promise's lifecycle (Sonner-style). Shows a
+     * persistent, non-dismissible spinner toast while pending, then flips it in
+     * place to success on resolve or danger on reject. `success`/`error` may be a
+     * plain title, a full {@link ToastInput}, or a function of the resolved value
+     * / rejection reason. Returns the toast id.
+     *
+     * @example
+     * ```ts
+     * toaster.promise(saveDraft(), {
+     *   loading: 'Saving…',
+     *   success: (draft) => `Saved “${draft.title}”`,
+     *   error: (e) => `Could not save: ${e.message}`
+     * });
+     * ```
+     */
+    promise<T>(promise: Promise<T>, opts: ToastPromiseOptions<T>): string;
     /** Remove a single toast by ID. Clears its auto-dismiss timer. */
     dismiss(id: string): void;
     /** Remove all toasts and cancel their timers. */

package/dist/primitives/Toast/toast.store.svelte.js

@@ -50,7 +50,10 @@ class ToastStore {
             description: input.description,
             duration: input.duration ?? 5000,
             dismissible: input.dismissible ?? true,
-            showProgress: input.showProgress ?? true
+            showProgress: input.showProgress ?? true,
+            action: input.action,
+            cancel: input.cancel,
+            loading: input.loading ?? false
         };
         this.toasts = [...this.toasts, toast];
         if (toast.duration > 0) {
@@ -58,6 +61,93 @@ class ToastStore {
         }
         return id;
     }
+    /**
+     * Merge new fields into an existing toast in place — same id, same stack
+     * position — and reset its auto-dismiss timer to the new `duration`. No-op if
+     * the toast is gone. Backs `promise()`, which flips a pending toast to
+     * success/error without it sliding out and a new one flying in.
+     */
+    update(id, input) {
+        const idx = this.toasts.findIndex((t) => t.id === id);
+        if (idx === -1)
+            return;
+        const next = { ...this.toasts[idx], ...input };
+        this.toasts = [...this.toasts.slice(0, idx), next, ...this.toasts.slice(idx + 1)];
+        const timer = this.timers.get(id);
+        if (timer) {
+            clearTimeout(timer);
+            this.timers.delete(id);
+        }
+        if (next.duration > 0) {
+            this.timers.set(id, setTimeout(() => this.dismiss(id), next.duration));
+        }
+    }
+    /**
+     * Drive a toast through a promise's lifecycle (Sonner-style). Shows a
+     * persistent, non-dismissible spinner toast while pending, then flips it in
+     * place to success on resolve or danger on reject. `success`/`error` may be a
+     * plain title, a full {@link ToastInput}, or a function of the resolved value
+     * / rejection reason. Returns the toast id.
+     *
+     * @example
+     * ```ts
+     * toaster.promise(saveDraft(), {
+     *   loading: 'Saving…',
+     *   success: (draft) => `Saved “${draft.title}”`,
+     *   error: (e) => `Could not save: ${e.message}`
+     * });
+     * ```
+     */
+    promise(promise, opts) {
+        const loadingInput = typeof opts.loading === 'string' ? { title: opts.loading } : opts.loading;
+        const id = this.add({
+            intent: 'neutral',
+            ...loadingInput,
+            loading: true,
+            duration: 0,
+            dismissible: false,
+            showProgress: false
+        });
+        // Shared settle fields: leave the spinner/persistent/non-dismissible state
+        // and become a normal auto-dismissing toast. `description: undefined` clears
+        // the loading description unless the success/error config sets its own.
+        const settled = {
+            loading: false,
+            duration: 5000,
+            dismissible: true,
+            showProgress: true
+        };
+        // A throwing user formatter must not turn into an unhandled rejection on the
+        // internal `.then`; fall back to a bare settled toast (still flips out of the
+        // loading state) and dev-warn instead.
+        const resolveMessage = (fn, arg, label) => {
+            let out;
+            try {
+                out = typeof fn === 'function' ? fn(arg) : fn;
+            }
+            catch (err) {
+                if (import.meta.env?.DEV)
+                    console.warn(`[Toast] promise ${label} formatter threw:`, err);
+            }
+            return typeof out === 'string' ? { title: out } : out;
+        };
+        promise.then((value) => {
+            this.update(id, {
+                intent: 'success',
+                description: undefined,
+                ...settled,
+                ...resolveMessage(opts.success, value, 'success')
+            });
+        }, (reason) => {
+            this.update(id, {
+                intent: 'danger',
+                description: undefined,
+                ...settled,
+                ...resolveMessage(opts.error, reason, 'error')
+            });
+        });
+        return id;
+    }
     /** Remove a single toast by ID. Clears its auto-dismiss timer. */
     dismiss(id) {
         const timer = this.timers.get(id);

package/dist/primitives/Toast/toast.variants.d.ts

@@ -39,6 +39,24 @@ export declare const toastVariants: ((props?: {
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
     }) | undefined) => string;
+    actions: (props?: ({
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    actionButton: (props?: ({
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
+    cancelButton: (props?: ({
+        intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
+        placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;
+    } & {
+        class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
+    }) | undefined) => string;
     dismissButton: (props?: ({
         intent?: "primary" | "info" | "success" | "warning" | "danger" | "neutral" | undefined;
         placement?: "bottom-right" | "top-right" | "bottom-left" | "top-left" | "top-center" | "bottom-center" | undefined;

package/dist/primitives/Toast/toast.variants.js

@@ -16,6 +16,21 @@ export const toastVariants = tv({
         content: 'flex-1 min-w-0',
         title: 'font-semibold text-sm leading-tight',
         description: 'text-sm mt-0.5 opacity-80',
+        // Action row (Sonner-style). Intent-neutral, prominent primary + quiet
+        // cancel — the toast's intent already reads through the icon/progress, so
+        // the buttons stay contrast-based rather than intent-coloured.
+        actions: 'flex items-center gap-2 mt-2.5',
+        // tier: modify — small interactive sub-elements on a contain surface.
+        actionButton: [
+            'rounded-modify px-2.5 py-1 text-xs font-medium',
+            'bg-text-primary/10 hover:bg-text-primary/20 text-text-primary',
+            'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/40'
+        ],
+        cancelButton: [
+            'rounded-modify px-2.5 py-1 text-xs font-medium',
+            'text-text-secondary hover:text-text-primary',
+            'transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-current/40'
+        ],
         // tier: modify — small interactive sub-element on a contain surface.
         dismissButton: [
             'shrink-0 rounded-modify p-1',

package/dist/primitives/Toggle/Toggle.svelte

@@ -11,6 +11,7 @@
     checked = $bindable(false),
     label,
     helper,
+    error,
     tier,
     size = 'md',
     intent = 'primary',
@@ -35,7 +36,8 @@
   const id = $derived(idProp ?? propsId);
   const ff = useFormField(() => ({
     fieldId: id,
-    hint: helper,
+    helper,
+    error,
     required,
     disabled
   }));
@@ -61,6 +63,7 @@
     appearance,
     checked,
     disabled,
+    error: !!error,
     withBorder
   });
 
@@ -111,6 +114,7 @@
       aria-checked={checked}
       aria-label={label ? undefined : bt('accessibility.toggle') || 'Toggle'}
       aria-describedby={ff.describedBy}
+      aria-invalid={ff.invalid ? 'true' : undefined}
       onchange={handleChange}
       {...restProps}
     />
@@ -135,9 +139,19 @@
     {/if}
   </label>
 
-  {#if ff.hintId}
+  {#if ff.errorId}
+    <div
+      id={ff.errorId}
+      class={unstyled
+        ? (slotClasses?.message ?? '')
+        : styles.message({ class: slotClasses?.message })}
+      role="alert"
+    >
+      {error}
+    </div>
+  {:else if ff.helperId}
     <div
-      id={ff.hintId}
+      id={ff.helperId}
       class={unstyled
         ? (slotClasses?.message ?? '')
         : styles.message({ class: slotClasses?.message })}

package/dist/primitives/Toggle/index.d.ts

@@ -24,13 +24,19 @@ import type { ToggleSlots, ToggleVariants } from './toggle.variants.js';
  * />
  * ```
  */
-export interface ToggleProps extends Omit<ToggleVariants, 'checked'>, Omit<HTMLInputAttributes, 'type' | 'size' | 'checked' | 'class' | 'children'> {
+export interface ToggleProps extends Omit<ToggleVariants, 'checked' | 'error'>, Omit<HTMLInputAttributes, 'type' | 'size' | 'checked' | 'class' | 'children'> {
     /** Current on/off state. Supports two-way binding via `bind:checked`. */
     checked?: boolean;
     /** Text label displayed to the right of the toggle track. */
     label?: string;
-    /** Hint text shown below the control. Useful for explaining side-effects of the toggle. */
+    /** Helper text shown below the control. Hidden when `error` is set. Useful for explaining side-effects of the toggle. */
     helper?: string;
+    /**
+     * Error message shown below the control. Replaces `helper`, flags the
+     * hidden input `aria-invalid`, and marks the unchecked track with the
+     * danger colour — e.g. for a consent toggle that must be switched on.
+     */
+    error?: string;
     /** Prevent interaction and dim the control. */
     disabled?: boolean;
     /** Mark the native input as required for form validation. */

package/dist/primitives/Toggle/toggle.variants.d.ts

@@ -6,6 +6,7 @@ export declare const toggleVariants: ((props?: {
     appearance?: "default" | "dot" | undefined;
     checked?: boolean | undefined;
     disabled?: boolean | undefined;
+    error?: boolean | undefined;
     withBorder?: boolean | undefined;
 } | undefined) => {
     wrapper: (props?: ({
@@ -15,6 +16,7 @@ export declare const toggleVariants: ((props?: {
         appearance?: "default" | "dot" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | undefined;
         withBorder?: boolean | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -26,6 +28,7 @@ export declare const toggleVariants: ((props?: {
         appearance?: "default" | "dot" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | undefined;
         withBorder?: boolean | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -37,6 +40,7 @@ export declare const toggleVariants: ((props?: {
         appearance?: "default" | "dot" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | undefined;
         withBorder?: boolean | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -48,6 +52,7 @@ export declare const toggleVariants: ((props?: {
         appearance?: "default" | "dot" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | undefined;
         withBorder?: boolean | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -59,6 +64,7 @@ export declare const toggleVariants: ((props?: {
         appearance?: "default" | "dot" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | undefined;
         withBorder?: boolean | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;
@@ -70,6 +76,7 @@ export declare const toggleVariants: ((props?: {
         appearance?: "default" | "dot" | undefined;
         checked?: boolean | undefined;
         disabled?: boolean | undefined;
+        error?: boolean | undefined;
         withBorder?: boolean | undefined;
     } & {
         class?: string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | (string | number | false | /*elided*/ any | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined)[] | Record<string, boolean | null | undefined> | null | undefined;

package/dist/primitives/Toggle/toggle.variants.js

@@ -86,6 +86,11 @@ export const toggleVariants = tv({
                 control: 'opacity-50 cursor-not-allowed pointer-events-none'
             }
         },
+        error: {
+            true: {
+                message: 'text-danger'
+            }
+        },
         withBorder: {
             true: {},
             false: {}
@@ -153,6 +158,19 @@ export const toggleVariants = tv({
             intent: 'neutral',
             class: { track: 'bg-neutral border-neutral' }
         },
+        // ── Error state: danger boundary on the unchecked track (Switch-Pill) ──
+        // Mirrors Checkbox ("error overrides unchecked border"): the off state
+        // carries the danger mark, the on state keeps its intent colour — an
+        // error on a boolean control usually means "must be switched on".
+        // The dot-appearance twin lives at the END of the compound list so it
+        // folds over the dot-unchecked `border-border-default` (order is
+        // semantic — later compounds win conflicting buckets).
+        {
+            appearance: 'default',
+            error: true,
+            checked: false,
+            class: { track: 'border-danger peer-focus-visible:ring-danger/40' }
+        },
         // ── Thumb translation per size when checked (Switch-Pill only) ──
         { appearance: 'default', checked: true, size: 'xs', class: { thumb: 'translate-x-4' } },
         { appearance: 'default', checked: true, size: 'sm', class: { thumb: 'translate-x-5' } },
@@ -212,6 +230,13 @@ export const toggleVariants = tv({
             checked: true,
             intent: 'neutral',
             class: { track: 'border-neutral bg-neutral' }
+        },
+        // ── Error state, dot appearance (must fold over dot-unchecked border) ──
+        {
+            appearance: 'dot',
+            error: true,
+            checked: false,
+            class: { track: 'border-danger' }
         }
     ],
     defaultVariants: {
@@ -221,6 +246,7 @@ export const toggleVariants = tv({
         appearance: 'default',
         checked: false,
         disabled: false,
+        error: false,
         withBorder: false
     }
 });