@iress-oss/ids-components 5.20.2 → 6.0.0-alpha.1

package/dist/components/Toaster/components/Toast/ToastAnimated.js

@@ -0,0 +1,50 @@
+import { jsx as T } from "react/jsx-runtime";
+import { useState as x, useRef as S, useEffect as f } from "react";
+import { getTransitionDuration as C } from "../../../../helpers/transition/getTransitionDuration.js";
+import { u as F, e as O } from "../../../../floating-ui.react-CmSaAiNF.js";
+import { toast as R } from "./Toast.styles.js";
+import { c as h } from "../../../../cx-DN21T1EH.js";
+import { Toast as j } from "./Toast.js";
+const q = ({
+  animation: u,
+  className: c,
+  onClose: m,
+  onTimeout: a,
+  timeout: s = 6e3,
+  ...l
+}) => {
+  const [p, r] = x(!0), o = S(240), { context: t } = F({
+    open: p,
+    onOpenChange: r
+  }), { isMounted: d, status: e } = O(t, {
+    duration: o.current
+  });
+  if (f(() => {
+    s && setTimeout(() => {
+      r(!1), setTimeout(() => a?.(), o.current);
+    }, s);
+  }, [a, s]), f(() => {
+    e === "initial" && (o.current = C(
+      t.refs.floating.current
+    )), e === "open" && t.refs.floating.current?.focus();
+  }, [e, t.refs.floating]), !d) return !1;
+  const i = e === "close" ? "closed" : e, g = R({
+    animation: u ?? "fade",
+    transitionState: i
+  });
+  return /* @__PURE__ */ T(
+    j,
+    {
+      ...l,
+      className: h(c, g.root),
+      "data-state": i,
+      onClose: (n) => {
+        r(!1), setTimeout(() => m?.(n), o.current);
+      },
+      ref: (n) => t.refs.setFloating(n)
+    }
+  );
+};
+export {
+  q as ToastAnimated
+};

package/dist/components/Toaster/helpers/toasterRegister.js

@@ -0,0 +1,10 @@
+const t = /* @__PURE__ */ new Map(), r = (e, s) => {
+  t.set(e, s);
+}, o = (e) => {
+  t.delete(e);
+}, n = (e) => t.get(e);
+export {
+  n as getToaster,
+  r as registerToaster,
+  o as unregisterToaster
+};

package/dist/components/Toaster/hooks/useToaster.js

@@ -1,26 +1,39 @@
-import { useContext as u, useEffect as a, useMemo as c } from "react";
-import { N as f } from "../../../LoadingSuspense-BtzikVZk.js";
-const w = (e) => {
-  const r = u(f);
-  if (r === void 0)
+import { createContext as w, useContext as i, useCallback as a, useMemo as T } from "react";
+import { getToaster as f } from "../helpers/toasterRegister.js";
+const h = w(
+  void 0
+), n = (o) => typeof o != "string" ? o : { content: o }, l = (o) => {
+  const t = i(h);
+  if (t === void 0)
     throw new Error("useToaster must be used within a IressToasterProvider");
-  const { show: t, setOptions: i, options: o, animateOut: n } = r;
-  return a(() => {
-    e && i({
-      ...o,
-      position: e ?? o.position
-    });
-  }, [e]), c(
+  const e = a(
+    (r, s) => {
+      const u = o ? f(o) : t;
+      if (!u && o)
+        throw new Error(`Toaster with id "${o}" not found.`);
+      return u?.show(r, s) ?? "";
+    },
+    [t, o]
+  ), c = a(
+    (r) => {
+      const s = o ? f(o) : t;
+      if (!s && o)
+        throw new Error(`Toaster with id "${o}" not found.`);
+      s?.close(r);
+    },
+    [t, o]
+  );
+  return T(
     () => ({
-      success: (s) => t({ ...s, status: "success" }),
-      error: (s) => t({ ...s, status: "error" }),
-      info: (s) => t({ ...s, status: "info" }),
-      close: n,
-      options: o
+      success: (r) => e("success", n(r)),
+      error: (r) => e("error", n(r)),
+      info: (r) => e("info", n(r)),
+      close: c
     }),
-    [n, o, t]
+    [c, e]
   );
 };
 export {
-  w as useToaster
+  h as ToasterContext,
+  l as useToaster
 };

package/dist/components/Toaster/index.js

@@ -1,17 +1,11 @@
-import { TOAST_ANIMATION as r, TOAST_STATUS as s } from "./Toast/Toast.types.js";
-import { TOASTER_ARIA_ATTRIBUTES as e, TOASTER_POSITION as t, TOAST_POSITION_ANIMATION_MATRIX as I, ToasterPosition as O } from "./Toaster.types.js";
-import { M as S, O as _, T as N, N as x } from "../../LoadingSuspense-BtzikVZk.js";
-import { useToaster as f } from "./hooks/useToaster.js";
+import { IressToasterProvider as t } from "./ToasterProvider.js";
+import { ToasterContext as s, useToaster as a } from "./hooks/useToaster.js";
+import { toaster as f } from "./Toaster.styles.js";
+import { toast as p } from "./components/Toast/Toast.styles.js";
 export {
-  S as IressToast,
-  _ as IressToasterProvider,
-  e as TOASTER_ARIA_ATTRIBUTES,
-  t as TOASTER_POSITION,
-  r as TOAST_ANIMATION,
-  I as TOAST_POSITION_ANIMATION_MATRIX,
-  s as TOAST_STATUS,
-  N as Toast,
-  x as ToasterContext,
-  O as ToasterPosition,
-  f as useToaster
+  t as IressToasterProvider,
+  s as ToasterContext,
+  p as toast,
+  f as toaster,
+  a as useToaster
 };

package/dist/components/Toggle/Toggle.js

@@ -1,101 +1,91 @@
-import { jsxs as p, jsx as l } from "react/jsx-runtime";
-import { c as a } from "../../index-cbHCAGLB.js";
-import { forwardRef as f, useState as C, useId as B, useEffect as x } from "react";
-import { GlobalCSSClass as I } from "../../enums.js";
-import { propagateTestid as u } from "../../helpers/utility/propagateTestid.js";
-import "../CheckboxMark/CheckboxMark.types.js";
-import { IressCheckboxMark as N } from "../CheckboxMark/CheckboxMark.js";
-import { ButtonCssClass as T } from "../Button/Button.types.js";
-import { ToggleLayout as w } from "./Toggle.types.js";
-const L = "ids-toggle--toggle-base-v5202", M = "ids-toggle--checkbox-mark-v5202", S = "ids-toggle--toggle-button-v5202", j = "ids-toggle--button-checked-v5202", R = "ids-toggle--toggle-button-container-v5202", $ = "ids-toggle--label-v5202", E = "ids-toggle--layout__inline-v5202", G = "ids-toggle--layout__stack-v5202", t = {
-  toggleBase: L,
-  checkboxMark: M,
-  toggleButton: S,
-  buttonChecked: j,
-  toggleButtonContainer: R,
-  label: $,
-  layout__inline: E,
-  "layout__inline-reverse": "ids-toggle--layout__inline-reverse-v5202",
-  "layout__inline-between": "ids-toggle--layout__inline-between-v5202",
-  layout__stack: G
-}, O = ({
-  hiddenLabel: o,
-  children: s,
-  "data-testid": n,
-  ...i
-}) => /* @__PURE__ */ l(
-  "span",
-  {
-    ...i,
-    className: a(t.label, {
-      [I.SROnly]: o
-    }),
-    "data-testid": u(n, "label"),
-    children: s
-  }
-), b = f(
-  ({
-    checked: o = !1,
-    hiddenLabel: s,
-    children: n,
-    layout: i = "inline",
-    className: m,
-    onChange: c,
-    "data-testid": g,
-    ..._
-  }, k) => {
-    const [e, r] = C(o), d = `toggleLabel--${B()}`, y = {
-      hiddenLabel: s,
-      id: d,
-      "data-testid": g
-    }, h = (v) => {
-      r(!e), c?.(!e, v);
-    };
-    return x(() => {
-      r(o);
-    }, [o, c]), /* @__PURE__ */ p(
-      "div",
-      {
-        "data-testid": g,
-        ..._,
-        className: a(
-          m,
-          t.toggleBase,
-          t[`layout__${i}`]
-        ),
-        ref: k,
-        children: [
-          /* @__PURE__ */ l(O, { ...y, children: n }),
-          /* @__PURE__ */ l("div", { className: t.toggleButtonContainer, children: /* @__PURE__ */ l(
-            "button",
-            {
-              className: a(T.Base, t.toggleButton, {
-                [t.buttonChecked]: e
-              }),
-              role: "switch",
-              type: "button",
-              "aria-checked": e,
-              onClick: h,
-              "aria-labelledby": d,
-              "data-testid": u(g, "button__button"),
-              children: /* @__PURE__ */ l(
-                N,
-                {
-                  className: a(t.checkboxMark, {
-                    "visibility-hidden": !e
-                  }),
-                  checked: e
-                }
-              )
-            }
-          ) })
-        ]
-      }
-    );
-  }
-);
-b.displayName = "IressToggle";
-b.Layout = w;
+import { jsxs as v, jsx as a } from "react/jsx-runtime";
+import { useState as N, useRef as S, useId as y, useEffect as f } from "react";
+import { propagateTestid as p } from "../../helpers/utility/propagateTestid.js";
+import { IressCheckboxMark as B } from "../CheckboxMark/CheckboxMark.js";
+import "../CheckboxMark/CheckboxMark.styles.js";
+import { toggle as h } from "./Toggle.styles.js";
+import { c as u } from "../../css-fGu_jDvv.js";
+import { c as b } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as L } from "../../enums.js";
+import { s as T } from "../../factory-oPXoMw9H.js";
+const _ = ({
+  hiddenLabel: e,
+  layout: c,
+  children: i,
+  "data-testid": o,
+  ...n
+}) => {
+  const r = h({ hiddenLabel: e, layout: c });
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      ...n,
+      className: r.label,
+      "data-testid": p(o, "label"),
+      children: i
+    }
+  );
+}, D = ({
+  checked: e = !1,
+  hiddenLabel: c,
+  children: i,
+  layout: o = "inline",
+  className: n,
+  onChange: r,
+  "data-testid": d,
+  ...k
+}) => {
+  const [t, m] = N(e), s = S(null), g = `toggleLabel--${y()}`, x = {
+    hiddenLabel: c,
+    id: g,
+    "data-testid": d
+  }, C = (I) => {
+    m(!t), r?.(!t, I);
+  };
+  f(() => {
+    m(e);
+  }, [e, r]), f(() => {
+    s.current && (s.current.classList.remove(
+      u({ _before: { animationStyle: "toggle-active" } })
+    ), s.current.offsetHeight, s.current.classList.add(
+      u({ _before: { animationStyle: "toggle-active" } })
+    ));
+  }, [t]);
+  const l = h({ layout: o, checked: t });
+  return /* @__PURE__ */ v(
+    T.div,
+    {
+      "data-testid": d,
+      ...k,
+      className: b(n, l.toggleBase, L.Toggle),
+      children: [
+        /* @__PURE__ */ a(_, { ...x, layout: o, children: i }),
+        /* @__PURE__ */ a("div", { className: l.toggleButtonContainer, children: /* @__PURE__ */ a(
+          "button",
+          {
+            className: b(l.toggleButton),
+            role: "switch",
+            type: "button",
+            "aria-checked": t,
+            onClick: C,
+            "aria-labelledby": g,
+            "data-testid": p(d, "button__button"),
+            ref: s,
+            children: /* @__PURE__ */ a(
+              B,
+              {
+                className: l.checkboxMark,
+                bg: "transparent",
+                checked: t,
+                size: "sm"
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+};
 export {
-  b as IressToggle
+  D as IressToggle
 };

package/dist/components/Toggle/Toggle.styles.js

@@ -0,0 +1,183 @@
+import { s as e } from "../../sva-OmxClA9g.js";
+const t = e({
+  slots: [
+    "toggleBase",
+    "toggleButtonContainer",
+    "toggleButton",
+    "buttonChecked",
+    "checkboxMark",
+    "label"
+  ],
+  base: {
+    toggleBase: {
+      display: "inline-flex",
+      gap: "spacing.050",
+      color: "colour.primary.fill"
+    },
+    toggleButtonContainer: {
+      position: "relative",
+      width: "toggle.width",
+      height: "toggle.thumb",
+      lineHeight: "0",
+      bg: "[currentColor]",
+      borderWidth: "2px",
+      borderStyle: "solid",
+      borderColor: "[currentColor]",
+      borderRadius: "[{sizes.toggle.thumb}]",
+      transition: "[background-color 0.3s ease-out]",
+      '&:has([role="switch"]:focus-visible)': {
+        layerStyle: "elevation.focus"
+      },
+      _hover: {
+        color: "colour.neutral.80"
+      }
+    },
+    toggleButton: {
+      height: "[100%]",
+      width: "[100%]",
+      position: "relative",
+      justifyContent: "flex-start",
+      alignItems: "center",
+      padding: "spacing.000",
+      cursor: "pointer",
+      border: "[none]",
+      backgroundColor: "transparent",
+      display: "flex",
+      _focus: {
+        outline: "[none]"
+      },
+      "&>svg": {
+        border: "[none]"
+      },
+      _before: {
+        content: '""',
+        top: "spacing.000",
+        left: "spacing.000",
+        right: "spacing.000",
+        bottom: "spacing.000",
+        position: "absolute",
+        borderRadius: "[{sizes.toggle.thumb}]",
+        pointerEvents: "none",
+        backgroundColor: "[color-mix(in srgb, {colors.colour.primary.fill}, transparent 90%)]",
+        opacity: 0,
+        transform: "scale(0.5)",
+        transformOrigin: "center"
+      },
+      _after: {
+        content: '""',
+        width: "toggle.thumb",
+        height: "toggle.thumb",
+        borderRadius: "[50%]",
+        backgroundColor: "colour.neutral.10",
+        borderWidth: "2px",
+        borderStyle: "solid",
+        borderColor: "[currentColor]",
+        position: "absolute",
+        top: "[-2px]",
+        left: "[-2px]",
+        transition: "[transform 0.3s ease-out]",
+        boxShadow: "0 1px 2px rgba(0, 0, 0, 0.2)"
+      }
+    },
+    checkboxMark: {
+      opacity: 0,
+      marginInlineStart: "spacing.050",
+      "&&:hover": {
+        bg: "transparent"
+      }
+    },
+    label: {
+      display: "inline-block",
+      marginInlineEnd: "spacing.100",
+      color: "colour.neutral.80",
+      textStyle: "typography.body.md.strong",
+      lineHeight: "1.5rem"
+    }
+  },
+  variants: {
+    layout: {
+      inline: {
+        toggleBase: {
+          display: "inline-flex",
+          alignItems: "center"
+        }
+      },
+      "inline-reverse": {
+        toggleBase: {
+          display: "inline-flex",
+          alignItems: "center",
+          flexDirection: "row-reverse"
+        },
+        label: {
+          marginInlineStart: "spacing.100",
+          marginInlineEnd: "spacing.000"
+        }
+      },
+      "inline-between": {
+        toggleBase: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between"
+        }
+      },
+      stack: {
+        toggleBase: {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "flex-start",
+          width: "[100%]"
+        },
+        label: {
+          display: "block",
+          marginBlockEnd: "spacing.100"
+        }
+      }
+    },
+    hiddenLabel: {
+      true: {
+        label: {
+          srOnly: !0,
+          display: "inline-block"
+        },
+        checkboxMark: {
+          marginInlineEnd: "spacing.100"
+        }
+      }
+    },
+    checked: {
+      true: {
+        toggleButtonContainer: {
+          _hover: {
+            bg: "colour.primary.fillHover",
+            borderColor: "colour.primary.fillHover"
+          }
+        },
+        checkboxMark: {
+          opacity: 1
+        },
+        toggleButton: {
+          _after: {
+            transform: "translateX(calc({sizes.toggle.width} - {sizes.toggle.thumb}))",
+            borderColor: "[currentColor]"
+          },
+          _hover: {
+            _after: {
+              borderColor: "colour.primary.fillHover"
+            }
+          }
+        }
+      },
+      false: {
+        toggleButtonContainer: {
+          color: "colour.neutral.70"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    layout: "inline"
+  }
+});
+export {
+  t as toggle
+};

package/dist/components/Toggle/index.js

@@ -1,7 +1,6 @@
-import { TOGGLE_LAYOUTS as r, ToggleLayout as g } from "./Toggle.types.js";
-import { IressToggle as t } from "./Toggle.js";
+import { IressToggle as r } from "./Toggle.js";
+import { toggle as t } from "./Toggle.styles.js";
 export {
-  t as IressToggle,
-  r as TOGGLE_LAYOUTS,
-  g as ToggleLayout
+  r as IressToggle,
+  t as toggle
 };