@alixpartners/ui-components 2.1.0 → 2.2.0

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

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+/**
+ * Toast variant types - matches existing Toast component
+ */
+export type ToastVariant = 'success' | 'warning' | 'error';
+/**
+ * Position configuration for toast container
+ */
+export type AnchorOrigin = {
+    vertical: 'top' | 'bottom';
+    horizontal: 'left' | 'center' | 'right';
+};
+/**
+ * Options for individual toast display
+ */
+export interface ToastOptions {
+    /** Duration in milliseconds. 0 = persistent (never auto-dismiss) */
+    duration?: number;
+    /** Whether to hide the icon */
+    noIcon?: boolean;
+}
+/**
+ * ToastProvider component props
+ */
+export interface ToastProviderProps {
+    children: ReactNode;
+    /** Maximum number of toasts visible at once. Default: 3 */
+    maxSnack?: number;
+    /** Position of toast container. Default: { vertical: 'top', horizontal: 'center' } */
+    anchorOrigin?: AnchorOrigin;
+    /** Default auto-hide duration in milliseconds. Default: 3000 */
+    autoHideDuration?: number;
+    /** Prevent duplicate messages. Default: true */
+    preventDuplicate?: boolean;
+}
+/**
+ * Return type for useToast hook
+ */
+export interface UseToastReturn {
+    /** Show a success toast */
+    success(message: string, options?: ToastOptions): string;
+    /** Show a warning toast */
+    warning(message: string, options?: ToastOptions): string;
+    /** Show an error toast */
+    error(message: string, options?: ToastOptions): string;
+    /** Close a specific toast by ID */
+    close(id: string): void;
+    /** Close all visible toasts immediately */
+    closeAll(): void;
+}
+export declare const DEFAULT_ANCHOR_ORIGIN: AnchorOrigin;
+export declare const DEFAULT_MAX_SNACK = 3;
+export declare const DEFAULT_AUTO_HIDE_DURATION = 3000;
+export declare const DEFAULT_PREVENT_DUPLICATE = true;

package/dist/components/ToastProvider/useToast.d.ts

@@ -0,0 +1,28 @@
+import { UseToastReturn } from './types';
+/**
+ * Hook to access toast notification functions.
+ * Must be used within a ToastProvider.
+ *
+ * @returns {UseToastReturn} Object with methods to show and manage toasts
+ * @throws {Error} If used outside of ToastProvider
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const toast = useToast()
+ *
+ *   const handleSave = async () => {
+ *     try {
+ *       await saveData()
+ *       toast.success('Data saved successfully!')
+ *     } catch {
+ *       toast.error('Failed to save data')
+ *     }
+ *   }
+ *
+ *   return <button onClick={handleSave}>Save</button>
+ * }
+ * ```
+ */
+export declare function useToast(): UseToastReturn;
+export default useToast;

package/dist/components/Toggle/Toggle.js

@@ -1,27 +1,28 @@
 import { jsxs as k, jsx as d } from "react/jsx-runtime";
-import * as h from "react";
+import * as m from "react";
 import { useId as D, useEffect as M, useState as j } from "react";
 import { c as F } from "../../clsx-OuTLNxxd.js";
-import { d as y, u as H, c as K, P, a as A, e as U } from "../../index-DWydnyjJ.js";
-import { u as q } from "../../index-BZPx6jYI.js";
-import '../../assets/Toggle.css';var S = "Switch", [z, se] = K(S), [L, O] = z(S), T = h.forwardRef(
+import { d as y, u as H, P, c as K, b as A } from "../../index-DM51yNMI.js";
+import { u as U } from "../../index-BZPx6jYI.js";
+import { u as q } from "../../index-CxAtPSMM.js";
+import '../../assets/Toggle.css';var v = "Switch", [z] = A(v), [L, O] = z(v), T = m.forwardRef(
   (r, c) => {
     const {
       __scopeSwitch: e,
       name: n,
       checked: o,
-      defaultChecked: f,
+      defaultChecked: p,
       required: s,
       disabled: a,
       value: i = "on",
-      onCheckedChange: m,
+      onCheckedChange: h,
       form: l,
       ..._
-    } = r, [t, u] = h.useState(null), v = y(c, (w) => u(w)), C = h.useRef(!1), g = t ? l || !!t.closest("form") : !0, [b, I] = H({
+    } = r, [t, u] = m.useState(null), S = y(c, (w) => u(w)), C = m.useRef(!1), g = t ? l || !!t.closest("form") : !0, [b, I] = H({
       prop: o,
-      defaultProp: f ?? !1,
-      onChange: m,
-      caller: S
+      defaultProp: p ?? !1,
+      onChange: h,
+      caller: v
     });
     return /* @__PURE__ */ k(L, { scope: e, checked: b, disabled: a, children: [
       /* @__PURE__ */ d(
@@ -36,8 +37,8 @@ import '../../assets/Toggle.css';var S = "Switch", [z, se] = K(S), [L, O] = z(S)
           disabled: a,
           value: i,
           ..._,
-          ref: v,
-          onClick: A(r.onClick, (w) => {
+          ref: S,
+          onClick: K(r.onClick, (w) => {
             I((B) => !B), g && (C.current = w.isPropagationStopped(), C.current || w.stopPropagation());
           })
         }
@@ -59,8 +60,8 @@ import '../../assets/Toggle.css';var S = "Switch", [z, se] = K(S), [L, O] = z(S)
     ] });
   }
 );
-T.displayName = S;
-var E = "SwitchThumb", N = h.forwardRef(
+T.displayName = v;
+var E = "SwitchThumb", N = m.forwardRef(
   (r, c) => {
     const { __scopeSwitch: e, ...n } = r, o = O(E, e);
     return /* @__PURE__ */ d(
@@ -75,16 +76,16 @@ var E = "SwitchThumb", N = h.forwardRef(
   }
 );
 N.displayName = E;
-var W = "SwitchBubbleInput", x = h.forwardRef(
+var W = "SwitchBubbleInput", x = m.forwardRef(
   ({
     __scopeSwitch: r,
     control: c,
     checked: e,
     bubbles: n = !0,
     ...o
-  }, f) => {
-    const s = h.useRef(null), a = y(s, f), i = q(e), m = U(c);
-    return h.useEffect(() => {
+  }, p) => {
+    const s = m.useRef(null), a = y(s, p), i = U(e), h = q(c);
+    return m.useEffect(() => {
       const l = s.current;
       if (!l) return;
       const _ = window.HTMLInputElement.prototype, u = Object.getOwnPropertyDescriptor(
@@ -92,8 +93,8 @@ var W = "SwitchBubbleInput", x = h.forwardRef(
         "checked"
       ).set;
       if (i !== e && u) {
-        const v = new Event("click", { bubbles: n });
-        u.call(l, e), l.dispatchEvent(v);
+        const S = new Event("click", { bubbles: n });
+        u.call(l, e), l.dispatchEvent(S);
       }
     }, [i, e, n]), /* @__PURE__ */ d(
       "input",
@@ -106,7 +107,7 @@ var W = "SwitchBubbleInput", x = h.forwardRef(
         ref: a,
         style: {
           ...o.style,
-          ...m,
+          ...h,
           position: "absolute",
           pointerEvents: "none",
           opacity: 0,
@@ -121,7 +122,7 @@ function R(r) {
   return r ? "checked" : "unchecked";
 }
 var X = T, Y = N;
-const G = "Toggle-module__wrapper___rjhvi", J = "Toggle-module__root___mhwY4", Q = "Toggle-module__thumb___mWKFb", V = "Toggle-module__label___DMfcr", Z = "Toggle-module__disabled___sxlCk", p = {
+const G = "Toggle-module__wrapper___rjhvi", J = "Toggle-module__root___mhwY4", Q = "Toggle-module__thumb___mWKFb", V = "Toggle-module__label___DMfcr", Z = "Toggle-module__disabled___sxlCk", f = {
   wrapper: G,
   root: J,
   thumb: Q,
@@ -134,23 +135,23 @@ function ae({
   disabled: e = !1,
   labelPosition: n = "left",
   onChange: o,
-  className: f,
+  className: p,
   ...s
 }) {
   const a = D();
   M(() => {
-    m(c);
+    h(c);
   }, [c]);
-  const [i, m] = j(c), l = (t) => {
-    m(t), o == null || o(t);
+  const [i, h] = j(c), l = (t) => {
+    h(t), o == null || o(t);
   }, _ = (t) => {
     var u;
     (t.key === "Enter" || t.key === " ") && (t.preventDefault(), l(!i)), (u = s.onKeyDown) == null || u.call(s, t);
   };
-  return /* @__PURE__ */ k("div", { className: F(p.wrapper, e && p.disabled, f), children: [
-    n === "left" && /* @__PURE__ */ d("label", { className: p.label, htmlFor: a, children: r }),
-    /* @__PURE__ */ d(X, { className: p.root, checked: i, disabled: e, onCheckedChange: l, id: a, onKeyDown: _, ...s, children: /* @__PURE__ */ d(Y, { className: p.thumb }) }),
-    n === "right" && /* @__PURE__ */ d("label", { className: p.label, htmlFor: a, children: r })
+  return /* @__PURE__ */ k("div", { className: F(f.wrapper, e && f.disabled, p), children: [
+    n === "left" && /* @__PURE__ */ d("label", { className: f.label, htmlFor: a, children: r }),
+    /* @__PURE__ */ d(X, { className: f.root, checked: i, disabled: e, onCheckedChange: l, id: a, onKeyDown: _, ...s, children: /* @__PURE__ */ d(Y, { className: f.thumb }) }),
+    n === "right" && /* @__PURE__ */ d("label", { className: f.label, htmlFor: a, children: r })
   ] });
 }
 export {

package/dist/components/Toggle/Toggle.test.js

@@ -1,5 +1,5 @@
 import { jsx as s } from "react/jsx-runtime";
-import { d, i as n, r as g, g as t, s as l, v as c, f as r } from "../../vi.ClIskdbk-CFW_9sOK.js";
+import { d, i as n, r as g, g as t, s as l, v as b, f as r } from "../../vi.bdSIJ99Y-017e_Pkz.js";
 import a from "./Toggle.js";
 d("Toggle", () => {
   d("Rendering", () => {
@@ -85,17 +85,17 @@ d("Toggle", () => {
     });
   }), d("User Interactions", () => {
     n("should call onChange when clicked", () => {
-      const e = c.fn();
+      const e = b.fn();
       g(/* @__PURE__ */ s(a, { label: "Test toggle", onChange: e }));
       const o = l.getByTestId("toggle-root");
       r.click(o), t(e).toHaveBeenCalledTimes(1), t(e).toHaveBeenCalledWith(!0);
     }), n("should toggle checked state when clicked", () => {
-      const e = c.fn();
+      const e = b.fn();
       g(/* @__PURE__ */ s(a, { label: "Test toggle", onChange: e }));
       const o = l.getByTestId("toggle-root");
       o.focus(), t(o).not.toBeChecked(), r.click(o), t(o).toBeChecked(), t(e).toHaveBeenCalledWith(!0), r.click(o), t(o).not.toBeChecked(), t(e).toHaveBeenCalledWith(!1);
     }), n("should not call onChange when disabled", () => {
-      const e = c.fn();
+      const e = b.fn();
       g(/* @__PURE__ */ s(a, { label: "Test toggle", disabled: !0, onChange: e }));
       const o = l.getByTestId("toggle-root");
       r.click(o), t(e).not.toHaveBeenCalled();
@@ -104,7 +104,7 @@ d("Toggle", () => {
       const e = l.getByTestId("toggle-root");
       t(e).not.toBeChecked(), r.click(e), t(e).not.toBeChecked();
     }), n("should handle keyboard interactions", () => {
-      const e = c.fn();
+      const e = b.fn();
       g(/* @__PURE__ */ s(a, { label: "Test toggle", onChange: e }));
       const o = l.getByTestId("toggle-root");
       o.focus(), t(o).not.toBeChecked(), r.keyDown(o, {
@@ -113,7 +113,7 @@ d("Toggle", () => {
         key: " "
       }), t(e).toHaveBeenCalledTimes(2), t(e).toHaveBeenCalledWith(!1), t(o).not.toBeChecked();
     }), n("should handle Enter key interactions", () => {
-      const e = c.fn();
+      const e = b.fn();
       g(/* @__PURE__ */ s(a, { label: "Test toggle", onChange: e }));
       const o = l.getByTestId("toggle-root");
       t(o).not.toBeChecked(), r.keyDown(o, {
@@ -125,8 +125,8 @@ d("Toggle", () => {
       g(/* @__PURE__ */ s(a, { label: "Test toggle" })), g(/* @__PURE__ */ s(a, { label: "Test toggle" }));
       const e = l.queryAllByTestId("toggle-root");
       t(e).toHaveLength(2);
-      const o = e.map((h) => h.getAttribute("id")), b = Array.from(new Set(o)).length;
-      t(b).toBe(2);
+      const o = e.map((h) => h.getAttribute("id")), c = Array.from(new Set(o)).length;
+      t(c).toBe(2);
     }), n("should have proper ARIA attributes", () => {
       g(/* @__PURE__ */ s(a, { label: "Test toggle" }));
       const e = l.getByTestId("toggle-root");
@@ -142,7 +142,7 @@ d("Toggle", () => {
     }), n("should not be focusable when disabled", () => {
       g(/* @__PURE__ */ s(a, { label: "Test toggle", disabled: !0 }));
       const e = l.getByTestId("toggle-root");
-      e.focus(), t(e).not.toHaveFocus();
+      t(e).toBeDisabled();
     });
   });
 });

package/dist/components/Tooltip/Tooltip.js

@@ -3,10 +3,11 @@ import * as i from "react";
 import { useState as Z } from "react";
 import { c as j } from "../../clsx-OuTLNxxd.js";
 import ee from "../Icon/Icon.js";
-import { P as G, c as te, u as oe, d as F, a as C, h as re } from "../../index-DWydnyjJ.js";
-import { c as B, R as ne, A as le, P as ie, a as se, D as ae, C as ce } from "../../index-DieLVN0p.js";
-import { u as ue } from "../../index-2H7slGYV.js";
-import { P as K } from "../../index-DpfPnSMn.js";
+import { P as G, u as te, d as F, c as C, b as oe, h as re } from "../../index-DM51yNMI.js";
+import { P as ne, D as le } from "../../index-DrR82jOT.js";
+import { u as ie } from "../../index-7CBv-Jx6.js";
+import { R as se, A as ae, a as ce, c as B, C as ue } from "../../index-C-3_YVJ1.js";
+import { P as K } from "../../index-BymOxiM6.js";
 import '../../assets/Tooltip.css';var pe = Object.freeze({
   // See: https://github.com/twbs/bootstrap/blob/main/scss/mixins/_visually-hidden.scss
   position: "absolute",
@@ -30,7 +31,7 @@ import '../../assets/Tooltip.css';var pe = Object.freeze({
   )
 );
 U.displayName = de;
-var fe = U, [D, $e] = te("Tooltip", [
+var fe = U, [D] = oe("Tooltip", [
   B
 ]), L = B(), V = "TooltipProvider", he = 700, A = "tooltip.open", [ve, I] = D(V), $ = (t) => {
   const {
@@ -77,25 +78,25 @@ var R = "Tooltip", [_e, O] = D(R), Y = (t) => {
     onOpenChange: s,
     disableHoverableContent: a,
     delayDuration: h
-  } = t, l = I(R, t.__scopeTooltip), f = L(o), [c, d] = i.useState(null), v = ue(), p = i.useRef(0), m = a ?? l.disableHoverableContent, _ = h ?? l.delayDuration, T = i.useRef(!1), [g, x] = oe({
+  } = t, l = I(R, t.__scopeTooltip), f = L(o), [c, d] = i.useState(null), v = ie(), p = i.useRef(0), m = a ?? l.disableHoverableContent, _ = h ?? l.delayDuration, T = i.useRef(!1), [g, x] = te({
     prop: r,
     defaultProp: n ?? !1,
-    onChange: (H) => {
-      H ? (l.onOpen(), document.dispatchEvent(new CustomEvent(A))) : l.onClose(), s == null || s(H);
+    onChange: (S) => {
+      S ? (l.onOpen(), document.dispatchEvent(new CustomEvent(A))) : l.onClose(), s == null || s(S);
     },
     caller: R
   }), w = i.useMemo(() => g ? T.current ? "delayed-open" : "instant-open" : "closed", [g]), E = i.useCallback(() => {
     window.clearTimeout(p.current), p.current = 0, T.current = !1, x(!0);
   }, [x]), P = i.useCallback(() => {
     window.clearTimeout(p.current), p.current = 0, x(!1);
-  }, [x]), S = i.useCallback(() => {
+  }, [x]), H = i.useCallback(() => {
     window.clearTimeout(p.current), p.current = window.setTimeout(() => {
       T.current = !0, x(!0), p.current = 0;
     }, _);
   }, [_, x]);
   return i.useEffect(() => () => {
     p.current && (window.clearTimeout(p.current), p.current = 0);
-  }, []), /* @__PURE__ */ u(ne, { ...f, children: /* @__PURE__ */ u(
+  }, []), /* @__PURE__ */ u(se, { ...f, children: /* @__PURE__ */ u(
     _e,
     {
       scope: o,
@@ -105,8 +106,8 @@ var R = "Tooltip", [_e, O] = D(R), Y = (t) => {
       trigger: c,
       onTriggerChange: d,
       onTriggerEnter: i.useCallback(() => {
-        l.isOpenDelayedRef.current ? S() : E();
-      }, [l.isOpenDelayedRef, S, E]),
+        l.isOpenDelayedRef.current ? H() : E();
+      }, [l.isOpenDelayedRef, H, E]),
       onTriggerLeave: i.useCallback(() => {
         m ? P() : (window.clearTimeout(p.current), p.current = 0);
       }, [P, m]),
@@ -121,7 +122,7 @@ Y.displayName = R;
 var N = "TooltipTrigger", X = i.forwardRef(
   (t, o) => {
     const { __scopeTooltip: e, ...r } = t, n = O(N, e), s = I(N, e), a = L(e), h = i.useRef(null), l = F(o, h, n.onTriggerChange), f = i.useRef(!1), c = i.useRef(!1), d = i.useCallback(() => f.current = !1, []);
-    return i.useEffect(() => () => document.removeEventListener("pointerup", d), [d]), /* @__PURE__ */ u(le, { asChild: !0, ...a, children: /* @__PURE__ */ u(
+    return i.useEffect(() => () => document.removeEventListener("pointerup", d), [d]), /* @__PURE__ */ u(ae, { asChild: !0, ...a, children: /* @__PURE__ */ u(
       G.button,
       {
         "aria-describedby": n.open ? n.contentId : void 0,
@@ -151,7 +152,7 @@ var M = "TooltipPortal", [me, Te] = D(M, {
   forceMount: void 0
 }), q = (t) => {
   const { __scopeTooltip: o, forceMount: e, children: r, container: n } = t, s = O(M, o);
-  return /* @__PURE__ */ u(me, { scope: o, forceMount: e, children: /* @__PURE__ */ u(K, { present: e || s.open, children: /* @__PURE__ */ u(ie, { asChild: !0, container: n, children: r }) }) });
+  return /* @__PURE__ */ u(me, { scope: o, forceMount: e, children: /* @__PURE__ */ u(K, { present: e || s.open, children: /* @__PURE__ */ u(ne, { asChild: !0, container: n, children: r }) }) });
 };
 q.displayName = M;
 var b = "TooltipContent", W = i.forwardRef(
@@ -204,7 +205,7 @@ var b = "TooltipContent", W = i.forwardRef(
         return window.addEventListener("scroll", d, { capture: !0 }), () => window.removeEventListener("scroll", d, { capture: !0 });
       }
     }, [l.trigger, c]), /* @__PURE__ */ u(
-      ae,
+      le,
       {
         asChild: !0,
         disableOutsidePointerEvents: !1,
@@ -213,7 +214,7 @@ var b = "TooltipContent", W = i.forwardRef(
         onFocusOutside: (d) => d.preventDefault(),
         onDismiss: c,
         children: /* @__PURE__ */ k(
-          ce,
+          ue,
           {
             "data-state": l.stateAttribute,
             ...f,
@@ -244,7 +245,7 @@ var J = "TooltipArrow", Q = i.forwardRef(
     return ge(
       J,
       e
-    ).isInside ? null : /* @__PURE__ */ u(se, { ...n, ...r, ref: o });
+    ).isInside ? null : /* @__PURE__ */ u(ce, { ...n, ...r, ref: o });
   }
 );
 Q.displayName = J;
@@ -341,7 +342,7 @@ function Oe(t) {
   return e.pop(), o.length === 1 && e.length === 1 && o[0].x === e[0].x && o[0].y === e[0].y ? o : o.concat(e);
 }
 var De = $, Le = Y, ke = X, Ae = q, Ne = W, Ie = Q;
-const Me = "Tooltip-module__tooltip___LjRUX", Se = "Tooltip-module__closable___MjoEb", y = {
+const Me = "Tooltip-module__tooltip___LjRUX", He = "Tooltip-module__closable___MjoEb", y = {
   "tooltip-container": "Tooltip-module__tooltip-container___X4jVa",
   tooltip: Me,
   "tooltip-md": "Tooltip-module__tooltip-md___v79jI",
@@ -352,7 +353,7 @@ const Me = "Tooltip-module__tooltip___LjRUX", Se = "Tooltip-module__closable___M
   "tooltip-light": "Tooltip-module__tooltip-light___f9BKo",
   "tooltip-close-icon": "Tooltip-module__tooltip-close-icon___EceS-",
   "tooltip-content": "Tooltip-module__tooltip-content___fjJv5",
-  closable: Se,
+  closable: He,
   "tooltip-enter": "Tooltip-module__tooltip-enter___KfwAg",
   "tooltip-enter-active": "Tooltip-module__tooltip-enter-active___L7FtU",
   "tooltip-exit": "Tooltip-module__tooltip-exit___RLxZG",

package/dist/{index-2H7slGYV.js → index-7CBv-Jx6.js}

@@ -1,5 +1,5 @@
 import * as e from "react";
-import { i as o } from "./index-DWydnyjJ.js";
+import { i as o } from "./index-DM51yNMI.js";
 var n = e[" useId ".trim().toString()] || (() => {
 }), i = 0;
 function f(r) {

package/dist/{index-DpfPnSMn.js → index-BymOxiM6.js}

@@ -1,5 +1,5 @@
 import * as a from "react";
-import { d as T, i as A } from "./index-DWydnyjJ.js";
+import { d as T, i as A } from "./index-DM51yNMI.js";
 function E(n, e) {
   return a.useReducer((r, t) => e[r][t] ?? r, n);
 }
@@ -35,7 +35,7 @@ function P(n) {
     if (e) {
       let i;
       const m = e.ownerDocument.defaultView ?? window, d = (u) => {
-        const g = l(t.current).includes(u.animationName);
+        const g = l(t.current).includes(CSS.escape(u.animationName));
         if (u.target === e && g && (s("ANIMATION_END"), !o.current)) {
           const O = e.style.animationFillMode;
           e.style.animationFillMode = "forwards", i = m.setTimeout(() => {