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

package/dist/components/Tag/TagInput/TagInput.styles.js

@@ -0,0 +1,26 @@
+import { s as t } from "../../../sva-OmxClA9g.js";
+const s = t({
+  slots: ["input", "tag"],
+  base: {
+    input: {
+      flexWrap: "wrap",
+      rowGap: "xs",
+      py: "xs",
+      "& > :first-child": {
+        display: "contents",
+        minHeight: "[0px]"
+      },
+      "& > input": {
+        width: "auto",
+        minHeight: "[calc({sizes.input.height} - {spacing.xs} * 2.5)]",
+        py: "none"
+      }
+    },
+    tag: {
+      marginLeft: "xs"
+    }
+  }
+});
+export {
+  s as tagInput
+};

package/dist/components/Tag/index.js

@@ -1,5 +1,8 @@
-import { K as r, L as e } from "../../LoadingSuspense-BtzikVZk.js";
+import { IressTag as e } from "./Tag.js";
+import { tag as p } from "./Tag.styles.js";
+import { IressTagInput as a } from "./TagInput/TagInput.js";
 export {
-  r as IressTag,
-  e as IressTagInput
+  e as IressTag,
+  a as IressTagInput,
+  p as tag
 };

package/dist/components/Text/Text.js

@@ -1,34 +1,25 @@
-import { jsx as x } from "react/jsx-runtime";
-import { c as d } from "../../index-cbHCAGLB.js";
-import { GlobalCSSClass as T, TextMode as c, TextElement as p, TextAlign as B, TextVariant as $ } from "../../enums.js";
-const e = ({
-  align: t,
-  children: a,
-  className: r,
-  "data-testid": i,
-  element: l = "div",
-  mode: s,
-  noGutter: n,
-  variant: o,
+import { jsx as e } from "react/jsx-runtime";
+import { s as r } from "../../factory-oPXoMw9H.js";
+import { text as s } from "./Text.styles.js";
+import { useMemo as i } from "react";
+import { c as l } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as n } from "../../enums.js";
+const d = ({
+  className: o,
   ...m
-}) => /* @__PURE__ */ x(
-  l,
-  {
-    ...m,
-    className: d(r, "iress-u-text", {
-      [`iress--${o}`]: !!o,
-      [`iress--${s}`]: !!s,
-      [`${T.TextAlignBase}--${t}`]: !!t,
-      "iress--no-gutter": n
-    }),
-    "data-testid": i,
-    children: a
-  }
-);
-e.Mode = c;
-e.Element = p;
-e.Align = B;
-e.Variant = $;
+}) => {
+  const t = i(
+    () => r(m.element ?? "div", s),
+    [m.element]
+  );
+  return /* @__PURE__ */ e(
+    t,
+    {
+      ...m,
+      className: l(o, n.Text)
+    }
+  );
+};
 export {
-  e as IressText
+  d as IressText
 };

package/dist/components/Text/Text.styles.js

@@ -0,0 +1,81 @@
+import { m as a, s as n } from "../../css-fGu_jDvv.js";
+import { c as s, m as i } from "../../create-recipe-C-ASk1Hy.js";
+const e = /* @__PURE__ */ s("text", {
+  element: "div"
+}, [
+  {
+    element: [
+      "p",
+      "div",
+      "span"
+    ],
+    css: {
+      "& code": {
+        textStyle: "typography.code",
+        paddingBlock: "spacing.000",
+        paddingInline: "spacing.100",
+        background: "colour.neutral.20",
+        color: "colour.neutral.80",
+        borderWidth: "0.5px",
+        borderColor: "colour.neutral.30",
+        borderRadius: "radius.025",
+        alignSelf: "flex-start"
+      },
+      "& small": {
+        textStyle: "typography.body.sm"
+      },
+      "& cite": {
+        textStyle: "typography.body.sm"
+      },
+      "& caption:not(table[class] *)": {
+        textStyle: "typography.body.sm",
+        display: "block"
+      },
+      "& a:not([class])": {
+        color: "colour.primary.text",
+        textDecoration: "underline",
+        _hover: {
+          textDecoration: "none"
+        }
+      }
+    }
+  }
+]), r = {
+  element: [
+    "p",
+    "div",
+    "span",
+    "h1",
+    "h2",
+    "h3",
+    "h4",
+    "h5",
+    "h6",
+    "code",
+    "small",
+    "cite",
+    "caption",
+    "strong",
+    "em",
+    "a",
+    "blockquote",
+    "pre"
+  ]
+}, o = Object.keys(r), l = /* @__PURE__ */ Object.assign(a(e.recipeFn), {
+  __recipe__: !0,
+  __name__: "text",
+  __getCompoundVariantCss__: e.__getCompoundVariantCss__,
+  raw: (t) => t,
+  variantKeys: o,
+  variantMap: r,
+  merge(t) {
+    return i(this, t);
+  },
+  splitVariantProps(t) {
+    return n(t, o);
+  },
+  getVariantProps: e.getVariantProps
+});
+export {
+  l as text
+};

package/dist/components/Text/index.js

@@ -1,6 +1,6 @@
-import { TEXT_ELEMENTS as o } from "./Text.types.js";
-import { IressText as T } from "./Text.js";
+import { text as t } from "./Text.styles.js";
+import { IressText as x } from "./Text.js";
 export {
-  T as IressText,
-  o as TEXT_ELEMENTS
+  x as IressText,
+  t as text
 };

package/dist/components/Toaster/Toaster.js

@@ -1,11 +1,62 @@
-import "react/jsx-runtime";
-import "react";
-import "./Toaster.types.js";
-import "../../index-cbHCAGLB.js";
-import { a7 as f } from "../../LoadingSuspense-BtzikVZk.js";
-import "../../enums.js";
-import "../Stack/Stack.js";
-import "../../floating-ui.react-DYBeYtOf.js";
+import { jsx as r, jsxs as u, Fragment as x } from "react/jsx-runtime";
+import { useContext as b, useRef as v, useEffect as C, createElement as T } from "react";
+import "../Stack/Stack.styles.js";
+import { IressStack as g } from "../Stack/Stack.js";
+import { g as h } from "../../floating-ui.react-CmSaAiNF.js";
+import { toaster as A } from "./Toaster.styles.js";
+import { c as y } from "../../cx-DN21T1EH.js";
+import { ToastAnimated as E } from "./components/Toast/ToastAnimated.js";
+import { s as l } from "../../factory-oPXoMw9H.js";
+import { GlobalCSSClass as S } from "../../enums.js";
+import { ToasterContext as j } from "./hooks/useToaster.js";
+const k = {
+  "bottom-end": "end-x",
+  "bottom-start": "start-x",
+  "bottom-center": "end-y",
+  "top-end": "end-x",
+  "top-start": "start-x",
+  "top-center": "start-y"
+}, m = {
+  role: "alert",
+  "aria-relevant": "additions",
+  "aria-live": "assertive"
+}, q = ({
+  className: d,
+  container: t,
+  position: a = "bottom-end",
+  toasts: n = [],
+  ...f
+}) => {
+  const i = b(j), o = v(null), c = A({ position: a });
+  return C(() => {
+    if (!t)
+      return;
+    const e = t instanceof HTMLElement ? t : t.current;
+    Object.entries(m).forEach(([s, p]) => {
+      e?.setAttribute(s, String(p));
+    });
+  }, [t]), n.length ? /* @__PURE__ */ u(x, { children: [
+    !t && /* @__PURE__ */ r(l.div, { ref: o, ...m }),
+    /* @__PURE__ */ r(h, { root: t ?? o, children: /* @__PURE__ */ r(
+      g,
+      {
+        className: y(c.root, d, S.Toaster),
+        gap: "md",
+        ...f,
+        children: n.map((e) => /* @__PURE__ */ T(
+          E,
+          {
+            ...e,
+            animation: k[a],
+            key: e.id,
+            onClose: (s) => i?.remove(e.id, s),
+            onTimeout: () => i?.remove(e.id)
+          }
+        ))
+      }
+    ) })
+  ] }) : t ? null : /* @__PURE__ */ r(l.div, { ref: o, ...m });
+};
 export {
-  f as IressToaster
+  q as Toaster
 };

package/dist/components/Toaster/Toaster.styles.js

@@ -0,0 +1,66 @@
+import { s as t } from "../../sva-OmxClA9g.js";
+const n = t({
+  slots: ["root"],
+  base: {
+    root: {
+      display: "flex",
+      position: "fixed",
+      width: "[500px]",
+      maxWidth: "[100%]",
+      zIndex: "500",
+      padding: "spacing.700",
+      boxSizing: "border-box",
+      "&:empty": {
+        display: "none"
+      }
+    }
+  },
+  variants: {
+    position: {
+      "bottom-end": {
+        root: {
+          insetBlockEnd: "[0]",
+          insetInlineEnd: "[0]"
+        }
+      },
+      "bottom-start": {
+        root: {
+          insetBlockEnd: "[0]",
+          insetInlineStart: "[0]"
+        }
+      },
+      "bottom-center": {
+        root: {
+          insetBlockEnd: "[0]",
+          insetInlineStart: "[50%]",
+          transform: "translateX(-50%)"
+        }
+      },
+      "top-end": {
+        root: {
+          insetBlockStart: "[0]",
+          insetInlineEnd: "[0]"
+        }
+      },
+      "top-start": {
+        root: {
+          insetBlockStart: "[0]",
+          insetInlineStart: "[0]"
+        }
+      },
+      "top-center": {
+        root: {
+          insetBlockStart: "[0]",
+          insetInlineStart: "[50%]",
+          transform: "translateX(-50%)"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    position: "bottom-end"
+  }
+});
+export {
+  n as toaster
+};

package/dist/components/Toaster/ToasterProvider.js

@@ -1,7 +1,51 @@
-import "react/jsx-runtime";
-import "react";
-import { O as s, N as a } from "../../LoadingSuspense-BtzikVZk.js";
+import { jsxs as x, jsx as g } from "react/jsx-runtime";
+import { useState as C, useCallback as a, useMemo as h, useEffect as j } from "react";
+import { Toaster as v } from "./Toaster.js";
+import { registerToaster as w, unregisterToaster as I } from "./helpers/toasterRegister.js";
+import { ToasterContext as P } from "./hooks/useToaster.js";
+const S = ({
+  children: d,
+  id: s,
+  position: n,
+  ...p
+}) => {
+  const [T, m] = C([]), i = a(
+    (t, r) => {
+      m((e) => (e?.find((o) => o.id === t)?.onClose?.(r), e?.filter((o) => o.id !== t)));
+    },
+    []
+  ), f = a(
+    (t, r) => {
+      const e = r.id ?? `${(/* @__PURE__ */ new Date()).getTime()}`, c = n?.includes("top");
+      return m((o = []) => [
+        ...c ? [] : o,
+        { ...r, id: e, status: t },
+        ...c ? o : []
+      ]), e;
+    },
+    [n]
+  ), l = a((t) => {
+    m(
+      (r) => r?.map(
+        (e) => e.id === t ? { ...e, timeout: 100 } : e
+      )
+    );
+  }, []), u = h(
+    () => ({
+      close: l,
+      remove: i,
+      show: f
+    }),
+    [l, i, f]
+  );
+  return j(() => {
+    if (s)
+      return w(s, u), () => I(s);
+  }, [s, u]), /* @__PURE__ */ x(P.Provider, { value: u, children: [
+    d,
+    /* @__PURE__ */ g(v, { id: s, position: n, ...p, toasts: T })
+  ] });
+};
 export {
-  s as IressToasterProvider,
-  a as ToasterContext
+  S as IressToasterProvider
 };

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

@@ -0,0 +1,95 @@
+import { jsx as o, jsxs as a } from "react/jsx-runtime";
+import { propagateTestid as i } from "../../../../helpers/utility/propagateTestid.js";
+import "../../../../Button-D6AL0bia.js";
+import { IressCloseButton as h } from "../../../Button/CloseButton/CloseButton.js";
+import "../../../Inline/Inline.styles.js";
+import { IressInline as y } from "../../../Inline/Inline.js";
+import { IressText as N } from "../../../Text/Text.js";
+import { forwardRef as b } from "react";
+import { c as g } from "../../../../cx-DN21T1EH.js";
+import { toast as v } from "./Toast.styles.js";
+import { s as C } from "../../../../factory-oPXoMw9H.js";
+import { IressIcon as I } from "../../../Icon/Icon.js";
+import "../../../Icon/Icon.styles.js";
+import { GlobalCSSClass as T } from "../../../../enums.js";
+const S = {
+  error: "colour.system.danger.text",
+  success: "colour.system.success.text",
+  info: "colour.system.info.text"
+}, j = {
+  error: "ban",
+  success: "check",
+  info: "info-square"
+}, k = b(
+  ({
+    heading: e,
+    status: t,
+    actions: c,
+    children: m,
+    content: n,
+    dismissible: l = !0,
+    onClose: d,
+    "data-testid": s,
+    className: p,
+    ...f
+  }, x) => {
+    const r = v({ status: t });
+    return /* @__PURE__ */ o(
+      C.div,
+      {
+        ...f,
+        "data-testid": s,
+        className: g(p, r.root, T.Toast),
+        tabIndex: -1,
+        ref: x,
+        children: /* @__PURE__ */ o("div", { className: r.panel, children: /* @__PURE__ */ a(y, { gap: "sm", verticalAlign: "top", noWrap: !0, children: [
+          /* @__PURE__ */ o(
+            I,
+            {
+              name: j[t],
+              screenreaderText: `${t}: `,
+              textStyle: "typography.body.lg",
+              fixedWidth: !0,
+              color: S[t]
+            }
+          ),
+          /* @__PURE__ */ a(
+            "div",
+            {
+              className: r.wrapper,
+              "data-testid": i(s, "content"),
+              children: [
+                e && /* @__PURE__ */ o(
+                  N,
+                  {
+                    className: r.heading,
+                    "data-testid": i(s, "heading"),
+                    children: typeof e == "string" ? /* @__PURE__ */ o("h2", { children: e }) : e
+                  }
+                ),
+                l && /* @__PURE__ */ o(
+                  h,
+                  {
+                    "data-testid": i(
+                      s,
+                      "close-button__button"
+                    ),
+                    className: r.closeButton,
+                    onClick: (u) => d?.(u),
+                    screenreaderText: "Dismiss"
+                  }
+                ),
+                /* @__PURE__ */ o("div", { className: r.content, children: n ?? m }),
+                c && /* @__PURE__ */ o("div", { className: r.footer, children: c })
+              ]
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+);
+k.displayName = "Toast";
+export {
+  k as Toast
+};

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

@@ -0,0 +1,197 @@
+import { s as o } from "../../../../sva-OmxClA9g.js";
+const n = o({
+  slots: [
+    "root",
+    "panel",
+    "wrapper",
+    "icon",
+    "heading",
+    "content",
+    "footer",
+    "closeButton"
+  ],
+  base: {
+    root: {
+      display: "block",
+      position: "relative",
+      zIndex: "500",
+      transition: "[all 0.3s ease-in-out]",
+      layerStyle: "elevation.floating",
+      _motionReduce: {
+        transform: "none",
+        transition: "[opacity 0.3s ease-in-out]",
+        visibility: "hidden"
+      }
+    },
+    panel: {
+      borderWidth: "1px",
+      borderRadius: "radius.system.form",
+      padding: "spacing.400",
+      textStyle: "typography.body.md.regular"
+    },
+    wrapper: {
+      lineHeight: "1.5",
+      paddingRight: "spacing.600"
+    },
+    icon: {
+      lineHeight: "normal"
+    },
+    heading: {
+      display: "inline-block",
+      marginBottom: "spacing.100",
+      marginRight: "spacing.100",
+      "&:empty": {
+        display: "none"
+      },
+      "& > h2, & > h3, & > h4, & > h5, & > h6": {
+        marginBlock: "spacing.000",
+        textStyle: "typography.body.md.strong"
+      }
+    },
+    content: {
+      noGutter: !0
+    },
+    footer: {
+      paddingBlockStart: "spacing.200"
+    },
+    closeButton: {
+      position: "absolute",
+      top: "spacing.050",
+      right: "spacing.050"
+    }
+  },
+  variants: {
+    status: {
+      error: {
+        panel: {
+          backgroundColor: "colour.system.danger.surface",
+          color: "colour.neutral.80",
+          borderColor: "colour.system.danger.fill"
+        },
+        heading: {
+          color: "colour.system.danger.text"
+        }
+      },
+      success: {
+        panel: {
+          backgroundColor: "colour.system.success.surface",
+          color: "colour.neutral.80",
+          borderColor: "colour.system.success.fill"
+        },
+        heading: {
+          color: "colour.system.success.text"
+        }
+      },
+      info: {
+        panel: {
+          backgroundColor: "colour.system.info.surface",
+          color: "colour.neutral.80",
+          borderColor: "colour.system.info.fill"
+        },
+        heading: {
+          color: "colour.system.info.text"
+        }
+      }
+    },
+    animation: {
+      "start-x": {
+        root: {
+          insetInlineStart: "[-100%]",
+          ms: "spacing.400"
+        }
+      },
+      "end-x": {
+        root: {
+          insetInlineEnd: "[-100%]",
+          me: "spacing.400"
+        }
+      },
+      "start-y": {
+        root: {
+          mt: "spacing.400",
+          transform: "[translateY(-100%)]"
+        }
+      },
+      "end-y": {
+        root: {
+          mb: "spacing.400",
+          transform: "[translateY(100%)]"
+        }
+      },
+      fade: {
+        root: {
+          opacity: "0"
+        }
+      }
+    },
+    transitionState: {
+      initial: {
+        root: {
+          opacity: "0"
+        }
+      },
+      open: {
+        root: {
+          opacity: "1",
+          _motionReduce: {
+            visibility: "visible"
+          }
+        }
+      },
+      closed: {
+        root: {
+          opacity: "0"
+        }
+      },
+      unmounted: {
+        root: {
+          display: "none"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      animation: "start-x",
+      transitionState: "open",
+      css: {
+        root: {
+          insetInlineStart: "[0%]"
+        }
+      }
+    },
+    {
+      animation: "end-x",
+      transitionState: "open",
+      css: {
+        root: {
+          insetInlineEnd: "[0%]"
+        }
+      }
+    },
+    {
+      animation: ["start-y", "end-y"],
+      transitionState: "open",
+      css: {
+        root: {
+          transform: "[translateY(0%)]"
+        }
+      }
+    },
+    {
+      animation: "fade",
+      transitionState: "open",
+      css: {
+        root: {
+          opacity: "1"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    status: "info"
+  }
+});
+export {
+  n as toast
+};