@commercetools/nimbus 2.7.0 → 2.8.0

package/dist/components/toast/constants/index.d.ts

@@ -0,0 +1,36 @@
+import { ToastPlacement, ToastType } from '../toast.types';
+/**
+ * Default toast duration in milliseconds (6 seconds).
+ */
+export declare const DEFAULT_DURATION = 6000;
+/**
+ * Default placement when not specified by the consumer.
+ */
+export declare const DEFAULT_PLACEMENT: ToastPlacement;
+/**
+ * All supported toast placements.
+ */
+export declare const ALL_PLACEMENTS: ToastPlacement[];
+/**
+ * Numpad-based hotkey mapping for toast placements.
+ * Each array element is checked against `event[key]` (for modifiers)
+ * or `event.code` (for key codes). All keys must match for the hotkey
+ * to trigger.
+ *
+ * Uses Ctrl+Shift to avoid conflicts with macOS special character insertion,
+ * Windows input language switching, and screen reader navigation shortcuts.
+ */
+export declare const PLACEMENT_HOTKEYS: Record<ToastPlacement, string[]>;
+/**
+ * Maps numpad key codes to their placement region IDs.
+ *
+ * Zag-js only accepts a single `event.code` per hotkey entry, so it can't
+ * match both `Digit9` and `Numpad9`. This map lets us supplement zag's
+ * built-in listener with numpad support via a separate keydown handler
+ * in ToastOutlet.
+ */
+export declare const NUMPAD_HOTKEYS: Record<string, string>;
+/**
+ * Maps toast semantic types to Nimbus color palettes.
+ */
+export declare const COLOR_PALETTE_MAP: Record<ToastType, string>;

package/dist/components/toast/index.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Main barrel export for Toast
+ */
+export { toast } from './services/toast.manager';
+export { ToastOutlet } from './components/toast.outlet';
+export type { ToastType, ToastVariant, ToastPlacement, ToastAction, ToastOptions, ToastPromiseOptions, ToastManagerApi, } from './toast.types';

package/dist/components/toast/intl/de.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pre-compiled de messages for Toast
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    dismiss: string;
+};
+export default _default;

package/dist/components/toast/intl/en.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pre-compiled en messages for Toast
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    dismiss: string;
+};
+export default _default;

package/dist/components/toast/intl/es.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pre-compiled es messages for Toast
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    dismiss: string;
+};
+export default _default;

package/dist/components/toast/intl/fr-FR.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pre-compiled fr-FR messages for Toast
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    dismiss: string;
+};
+export default _default;

package/dist/components/toast/intl/pt-BR.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Pre-compiled pt-BR messages for Toast
+ * Generated by @internationalized/string-compiler
+ * DO NOT EDIT MANUALLY
+ */
+declare const _default: {
+    dismiss: string;
+};
+export default _default;

package/dist/components/toast/services/index.d.ts

@@ -0,0 +1,2 @@
+export { toast, ToastManager } from './toast.manager';
+export { getToaster, getToasterEntries, isToastersActive, onToastersActivated, resetToasters, } from './toast.toasters';

package/dist/components/toast/services/toast.manager.d.ts

@@ -0,0 +1,112 @@
+import { ToastOptions, ToastManagerApi, ToastPromiseOptions } from '../toast.types';
+/**
+ * ToastManager - Singleton class managing multiple toaster instances per placement.
+ *
+ * Architecture:
+ * - ID-to-placement routing: Tracks which toast ID belongs to which placement
+ * - Convenience methods: info(), success(), warning(), error() methods
+ * - Promise support: promise() method that transitions loading → success/error
+ * - Default duration: 6000ms, consumer-controlled (action does not override)
+ */
+declare class ToastManager implements ToastManagerApi {
+    private static instance;
+    private toastPlacements;
+    private constructor();
+    /**
+     * Get singleton instance of ToastManager.
+     */
+    static getInstance(): ToastManager;
+    /**
+     * Validate and normalize placement value.
+     */
+    private normalizePlacement;
+    /**
+     * Create a toast and return its ID.
+     */
+    create(options: ToastOptions): string;
+    /**
+     * Update an existing toast.
+     */
+    update(id: string, options: Partial<ToastOptions>): void;
+    /**
+     * Dismiss toast(s) with exit animation.
+     * If no ID is provided, dismisses all toasts across all placements.
+     */
+    dismiss(id?: string): void;
+    /**
+     * Remove toast(s) immediately without exit animation.
+     * If no ID is provided, removes all toasts across all placements.
+     */
+    remove(id?: string): void;
+    info(options: Omit<ToastOptions, "type">): string;
+    success(options: Omit<ToastOptions, "type">): string;
+    warning(options: Omit<ToastOptions, "type">): string;
+    error(options: Omit<ToastOptions, "type">): string;
+    /**
+     * Create promise toast with loading/success/error states.
+     */
+    promise(promise: Promise<unknown>, options: ToastPromiseOptions, config?: Pick<ToastOptions, "placement">): void;
+    /**
+     * Reset manager state (for testing only).
+     *
+     * Clears the ID-to-placement map and resets all underlying toaster
+     * instances so tests start from a clean slate.
+     */
+    reset(): void;
+}
+/**
+ * Imperative toast API.
+ *
+ * @example
+ * ```tsx
+ * // Create toast
+ * const id = toast({ title: "Success", description: "Operation completed", type: "success" });
+ *
+ * // Convenience methods
+ * toast.info({ title: "Information", description: "Something happened" });
+ * toast.success({ title: "Success", description: "Operation completed" });
+ * toast.warning({ title: "Warning", description: "Please review" });
+ * toast.error({ title: "Error", description: "Something went wrong" });
+ *
+ * // With variant (default is "solid")
+ * toast.info({ title: "Subtle info", description: "Additional context", variant: "subtle" });
+ * toast.success({ title: "Bold success", description: "Changes saved", variant: "solid" });
+ *
+ * // With close button (off by default)
+ * toast.info({ title: "Closable", description: "Can be dismissed", closable: true });
+ *
+ * // With action button
+ * toast({
+ *   title: "Action required",
+ *   description: "File was deleted",
+ *   action: { label: "Undo", onPress: () => {} }
+ * });
+ *
+ * // Promise pattern
+ * toast.promise(fetchData(), {
+ *   loading: { title: "Loading...", description: "Please wait" },
+ *   success: { title: "Done!", description: "Data loaded" },
+ *   error: { title: "Failed!", description: "Could not load data" }
+ * });
+ *
+ * // Dismiss
+ * toast.dismiss(id);
+ * toast.dismiss(); // Dismiss all
+ *
+ * // Remove immediately
+ * toast.remove(id);
+ * toast.remove(); // Remove all
+ * ```
+ */
+export declare const toast: ((options: ToastOptions) => string) & {
+    info: (options: Omit<ToastOptions, "type">) => string;
+    success: (options: Omit<ToastOptions, "type">) => string;
+    warning: (options: Omit<ToastOptions, "type">) => string;
+    error: (options: Omit<ToastOptions, "type">) => string;
+    promise: (promise: Promise<unknown>, options: ToastPromiseOptions, config?: Pick<ToastOptions, "placement">) => void;
+    update: (id: string, options: Partial<ToastOptions>) => void;
+    dismiss: (id?: string) => void;
+    remove: (id?: string) => void;
+    reset: () => void;
+};
+export { ToastManager };

package/dist/components/toast/toast.i18n.d.ts

@@ -0,0 +1,7 @@
+export declare const messages: {
+    dismiss: {
+        id: string;
+        description: string;
+        defaultMessage: string;
+    };
+};

package/dist/components/toast/toast.messages.d.ts

@@ -0,0 +1,6 @@
+import { LocalizedString, LocalizedStrings } from '@internationalized/string';
+export declare const toastMessagesStrings: LocalizedStrings<string, LocalizedString>;
+/**
+ * Available message keys for Toast component
+ */
+export type ToastMessageKey = "dismiss";

package/dist/components/toast/toast.recipe.d.ts

@@ -0,0 +1,81 @@
+/**
+ * Recipe configuration for the Toast component.
+ * Defines the styling variants and base styles using Chakra UI's recipe system.
+ *
+ * Registered under the "toast" key to override Chakra's default toast recipe,
+ * allowing Chakra's built-in Toast components to use Nimbus styles directly.
+ *
+ * Color palette mappings:
+ * - info → info (blue)
+ * - success → positive (green)
+ * - warning → warning (amber)
+ * - error → critical (red)
+ *
+ * Variants:
+ * - solid: Bold colored background with contrast text (default)
+ * - subtle: Subtle background with border
+ * - accent-start: Subtle background with a colored accent line on the inline-start edge (via inset box-shadow)
+ */
+export declare const toastRecipe: import('@chakra-ui/react').SlotRecipeDefinition<"root" | "title" | "description" | "indicator" | "closeTrigger" | "actionTrigger", {
+    variant: {
+        solid: {
+            root: {
+                backgroundColor: "colorPalette.9";
+            };
+            indicator: {
+                "& svg": {
+                    color: "colorPalette.contrast";
+                };
+            };
+            title: {
+                color: "colorPalette.contrast";
+            };
+            description: {
+                color: "colorPalette.contrast";
+            };
+            actionTrigger: {
+                borderColor: "colorPalette.contrast";
+            };
+        };
+        subtle: {
+            root: {
+                backgroundColor: "colorPalette.2";
+                boxShadow: "inset 0 0 0 1px {colors.colorPalette.5}, {shadows.1}";
+            };
+            indicator: {
+                "& svg": {
+                    color: "colorPalette.11";
+                };
+            };
+            title: {
+                color: "colorPalette.11";
+            };
+            description: {
+                color: "colorPalette.12";
+            };
+        };
+        "accent-start": {
+            root: {
+                backgroundColor: "neutral.2";
+                boxShadow: "inset 3px 0 0 0 {colors.colorPalette.9}, inset 0 0 0 1px {colors.neutral.5}, {shadows.1}";
+            };
+            indicator: {
+                "& svg": {
+                    color: "colorPalette.11";
+                };
+            };
+            title: {
+                color: "neutral.12";
+            };
+            description: {
+                color: "neutral.11";
+            };
+            actionTrigger: {
+                colorPalette: "neutral";
+            };
+            closeTrigger: {
+                colorPalette: "neutral";
+            };
+        };
+    };
+}>;

package/dist/components/toast/toast.types.d.ts

@@ -0,0 +1,116 @@
+import { default as React } from 'react';
+/**
+ * Toast type determines visual styling and ARIA semantics.
+ * - info: Informational messages (role="status", polite)
+ * - success: Success confirmations (role="status", polite)
+ * - warning: Warning messages (role="status", polite)
+ * - error: Error messages (role="alert", assertive)
+ */
+export type ToastType = "info" | "success" | "warning" | "error" | "loading";
+/**
+ * Toast placement determines position on screen.
+ * Maps to Chakra UI placement values and numpad positions for hotkeys.
+ */
+export type ToastPlacement = "top-start" | "top-end" | "bottom-start" | "bottom-end";
+/**
+ * Action button configuration for toast.
+ */
+export type ToastAction = {
+    /** Label text for the action button */
+    label: string;
+    /** Press handler for the action button */
+    onPress: () => void;
+};
+/**
+ * Toast visual variant.
+ * - solid: Bold colored background with contrast text (default)
+ * - subtle: Subtle background with border
+ * - accent-start: Subtle background with a colored accent line on the inline-start edge
+ */
+export type ToastVariant = "solid" | "subtle" | "accent-start";
+/**
+ * Options for creating a toast notification.
+ */
+export type ToastOptions = {
+    /** Toast type determines styling and ARIA role */
+    type?: ToastType;
+    /** Visual variant (default: "accent-start") */
+    variant?: ToastVariant;
+    /** Title text */
+    title: string;
+    /** Description text providing additional context */
+    description?: string;
+    /** Optional action button */
+    action?: ToastAction;
+    /** Custom icon element that replaces the default type-based icon */
+    icon?: React.ReactElement;
+    /** Auto-dismiss duration in milliseconds (default: 6000, Infinity = never) */
+    duration?: number;
+    /** Placement on screen (default: "top-end") */
+    placement?: ToastPlacement;
+    /** Whether the close button is visible (default: false) */
+    closable?: boolean;
+    /** Pause auto-dismiss on hover/focus (default: true) */
+    pauseOnInteraction?: boolean;
+    /**
+     * Override the default `aria-live` politeness level.
+     * By default, `error` toasts use `"assertive"` and all others use `"polite"`.
+     */
+    "aria-live"?: "polite" | "assertive" | "off";
+};
+/**
+ * Promise toast configuration for loading/success/error states.
+ */
+export type ToastPromiseOptions = {
+    /** Toast options for loading state */
+    loading: ToastOptions;
+    /** Toast options for success state */
+    success: ToastOptions;
+    /** Toast options for error state */
+    error: ToastOptions;
+};
+/**
+ * Internal type representing the toast data object passed by Chakra UI's Toaster
+ * render prop. Only covers the fields accessed by the outlet.
+ */
+export type ChakraToastData = {
+    id?: string;
+    type?: string;
+    title?: string;
+    description?: string;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+    meta?: {
+        closable?: boolean;
+        variant?: ToastVariant;
+        icon?: React.ReactElement;
+        "aria-live"?: "polite" | "assertive" | "off";
+    };
+};
+/**
+ * Toast manager API for imperative toast control.
+ */
+export type ToastManagerApi = {
+    /** Create a toast and return its ID */
+    create: (options: ToastOptions) => string;
+    /** Update an existing toast */
+    update: (id: string, options: Partial<ToastOptions>) => void;
+    /** Dismiss toast(s) with animation */
+    dismiss: (id?: string) => void;
+    /** Remove toast(s) immediately without animation */
+    remove: (id?: string) => void;
+    /** Create info toast */
+    info: (options: Omit<ToastOptions, "type">) => string;
+    /** Create success toast */
+    success: (options: Omit<ToastOptions, "type">) => string;
+    /** Create warning toast */
+    warning: (options: Omit<ToastOptions, "type">) => string;
+    /** Create error toast */
+    error: (options: Omit<ToastOptions, "type">) => string;
+    /** Create promise toast with loading/success/error states */
+    promise: (promise: Promise<unknown>, options: ToastPromiseOptions, config?: Pick<ToastOptions, "placement">) => void;
+    /** Reset manager state (testing only) */
+    reset: () => void;
+};

package/dist/components/toast.cjs

@@ -0,0 +1,2 @@
+"use strict";const t=require("../chunks/toast.manager-C-xQVs3Q.cjs.js"),e=require("../chunks/toast.outlet-Ojazv9Da.cjs.js");exports.toast=t.toast;exports.ToastOutlet=e.ToastOutlet;
+//# sourceMappingURL=toast.cjs.map

package/dist/components/toast.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.cjs","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/components/toast.es.js

@@ -0,0 +1,7 @@
+import { t as a } from "../chunks/toast.manager-Dj0xhoar.es.js";
+import { T as s } from "../chunks/toast.outlet-C8fv8YzY.es.js";
+export {
+  s as ToastOutlet,
+  a as toast
+};
+//# sourceMappingURL=toast.es.js.map

package/dist/components/toast.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"toast.es.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;"}

package/dist/components/toggle-button/toggle-button.types.d.ts

@@ -1,4 +1,4 @@
-import { HTMLChakraProps, RecipeProps } from '@chakra-ui/react';
+import { HTMLChakraProps, RecipeProps } from '@chakra-ui/react/styled-system';
 import { ToggleButtonProps as RaToggleButtonProps } from 'react-aria-components';
 import { SemanticPalettesOnly } from '../../type-utils';
 type ToggleButtonRecipeProps = {

package/dist/components/toggle-button-group.cjs

@@ -1,2 +1,2 @@
-"use strict";const o=require("../chunks/toggle-button-group--ZStnkyT.cjs.js");exports.ToggleButtonGroup=o.ToggleButtonGroup;exports._ToggleButtonGroupButton=o.ToggleButtonGroupButton;exports._ToggleButtonGroupRoot=o.ToggleButtonGroupRoot;
+"use strict";const o=require("../chunks/toggle-button-group-Dt36o8cR.cjs.js");exports.ToggleButtonGroup=o.ToggleButtonGroup;exports._ToggleButtonGroupButton=o.ToggleButtonGroupButton;exports._ToggleButtonGroupRoot=o.ToggleButtonGroupRoot;
 //# sourceMappingURL=toggle-button-group.cjs.map

package/dist/components/toggle-button-group.es.js

@@ -1,4 +1,4 @@
-import { T as u, a as g, b as r } from "../chunks/toggle-button-group-PnfISweU.es.js";
+import { T as u, a as g, b as r } from "../chunks/toggle-button-group-DONqa5F0.es.js";
 export {
   u as ToggleButtonGroup,
   g as _ToggleButtonGroupButton,

package/dist/components/toggle-button.cjs

@@ -1,2 +1,2 @@
-"use strict";const t=require("../chunks/toggle-button-CQkIgFSC.cjs.js");exports.ToggleButton=t.ToggleButton;
+"use strict";const t=require("../chunks/toggle-button-VjKDjHMu.cjs.js");exports.ToggleButton=t.ToggleButton;
 //# sourceMappingURL=toggle-button.cjs.map

package/dist/components/toggle-button.es.js

@@ -1,4 +1,4 @@
-import { T as e } from "../chunks/toggle-button-ZDqoRk4M.es.js";
+import { T as e } from "../chunks/toggle-button-CZjsgZAb.es.js";
 export {
   e as ToggleButton
 };

package/dist/components/toolbar/toolbar.types.d.ts

@@ -1,5 +1,5 @@
 import { FC, Ref } from 'react';
-import { HTMLChakraProps, RecipeProps, UnstyledProp } from '@chakra-ui/react';
+import { HTMLChakraProps, RecipeProps, UnstyledProp } from '@chakra-ui/react/styled-system';
 import { ToolbarProps as RaToolbarProps } from 'react-aria-components';
 type ToolbarRecipeProps = {
     /** Size variant of the toolbar */

package/dist/components/toolbar.cjs

@@ -1,2 +1,2 @@
-"use strict";const o=require("../chunks/toolbar-CN0gYhZS.cjs.js");exports.Toolbar=o.Toolbar;
+"use strict";const o=require("../chunks/toolbar-q5-QMUWS.cjs.js");exports.Toolbar=o.Toolbar;
 //# sourceMappingURL=toolbar.cjs.map

package/dist/components/toolbar.es.js

@@ -1,4 +1,4 @@
-import { T as a } from "../chunks/toolbar-Clh1EbKK.es.js";
+import { T as a } from "../chunks/toolbar-D7siAVmx.es.js";
 export {
   a as Toolbar
 };

package/dist/components/tooltip/tooltip.types.d.ts

@@ -1,6 +1,6 @@
 import { PropsWithChildren } from 'react';
 import { TooltipProps as RaTooltipProps } from 'react-aria-components';
-import { HTMLChakraProps, RecipeProps, UnstyledProp } from '@chakra-ui/react';
+import { HTMLChakraProps, RecipeProps, UnstyledProp } from '@chakra-ui/react/styled-system';
 import { OmitInternalProps } from '../../type-utils/omit-props';
 type TooltipRecipeProps = RecipeProps<"nimbusTooltip"> & UnstyledProp;
 export type TooltipRootSlotProps = HTMLChakraProps<"div", TooltipRecipeProps>;

package/dist/components/tooltip.cjs

@@ -1,2 +1,2 @@
-"use strict";const e=require("../chunks/tooltip-DYy_urAN.cjs.js"),o=require("../chunks/make-element-focusable-AmxCDNBB.cjs.js");exports.Tooltip=e.Tooltip;exports.MakeElementFocusable=o.MakeElementFocusable;
+"use strict";const e=require("../chunks/tooltip-M0jvp5BS.cjs.js"),o=require("../chunks/make-element-focusable-Cf-r4YQd.cjs.js");exports.Tooltip=e.Tooltip;exports.MakeElementFocusable=o.MakeElementFocusable;
 //# sourceMappingURL=tooltip.cjs.map

package/dist/components/tooltip.es.js

@@ -1,5 +1,5 @@
-import { T as a } from "../chunks/tooltip-DsIxtZs4.es.js";
-import { M as t } from "../chunks/make-element-focusable-BNkjt6Kk.es.js";
+import { T as a } from "../chunks/tooltip-qXiO_TDp.es.js";
+import { M as t } from "../chunks/make-element-focusable-C7F_esXN.es.js";
 export {
   t as MakeElementFocusable,
   a as Tooltip