@iress-oss/ids-components 5.17.0 → 6.0.0-alpha.0

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

@@ -0,0 +1,183 @@
+import { s as e } from "../../sva-TRyehFkb.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
 };

package/dist/components/Tooltip/Tooltip.js

@@ -1,77 +1,81 @@
-import { jsxs as f, jsx as a } from "react/jsx-runtime";
-import { useState as P, useEffect as R, Fragment as S } from "react";
-import { c as j } from "../../index-2QXL0WYc.js";
-import { i as E, o as H, p as L, h as M, q as k, r as q, t as B, k as D, l as G, m as U } from "../../floating-ui.react-nmA48tb2.js";
-import { FloatingUIAlign as W } from "../../enums.js";
-import { propagateTestid as m } from "../../helpers/utility/propagateTestid.js";
-import { toArray as z } from "../../helpers/formatting/toArray.js";
-import { idsLogger as J } from "../../helpers/utility/idsLogger.js";
-import { focusableElements as K } from "../../helpers/dom/focusableElements.js";
-const Q = "ids-tooltip-v5170", V = "ids-tooltip--content-v5170", r = {
-  tooltip: Q,
-  content: V
-}, X = ({
+import { jsxs as m, jsx as a } from "react/jsx-runtime";
+import { useState as w, useEffect as j, Fragment as N } from "react";
+import { c as O } from "../../cx-DN21T1EH.js";
+import { u as P, o as R, i as E, j as G, s as H, k as L, l as k, b as B, c as D, d as M } from "../../floating-ui.react-CPN4oQCc.js";
+import { propagateTestid as p } from "../../helpers/utility/propagateTestid.js";
+import { toArray as W } from "../../helpers/formatting/toArray.js";
+import { idsLogger as q } from "../../helpers/utility/idsLogger.js";
+import { focusableElements as z } from "../../helpers/dom/focusableElements.js";
+import { tooltip as J } from "./Tooltip.styles.js";
+import { s as K } from "../../factory-DHLOr79I.js";
+import { GlobalCSSClass as Q } from "../../enums.js";
+const re = ({
   children: o,
   className: u,
   align: n = "top",
-  delay: h = 500,
-  open: d = !1,
+  delay: d = 500,
+  open: h = !1,
   tooltipText: g,
   "data-testid": s,
   ...v
 }) => {
-  const F = {
-    [r.tooltip]: !0
-  }, I = j(u, F), i = n === "auto", [c, A] = P(d), { refs: t, floatingStyles: b, context: e } = E({
+  const r = J(), i = n === "auto", [c, b] = w(h), { refs: e, floatingStyles: F, context: t } = P({
     placement: i ? void 0 : n,
     open: c,
-    onOpenChange: A,
-    middleware: [H(5), i ? L() : M(), k()]
-  }), x = q(e, {
+    onOpenChange: b,
+    middleware: [R(5), i ? E() : G(), H()]
+  }), I = L(t, {
     move: !1,
-    delay: { open: h, close: 500 }
-  }), y = B(e), C = D(e), T = G(e, { role: "tooltip" }), { getReferenceProps: w, getFloatingProps: N } = U([
+    delay: { open: d, close: 500 }
+  }), x = k(t), C = B(t), T = D(t, { role: "tooltip" }), { getReferenceProps: y, getFloatingProps: A } = M([
+    I,
     x,
-    y,
     C,
     T
   ]);
-  return R(() => {
-    if (!o || !t.reference.current) return;
-    K(t.reference.current).length > 0 || J(
+  return j(() => {
+    if (!o || !e.reference.current) return;
+    z(e.reference.current).length > 0 || q(
       `IressTooltip: The content that activates the tooltip is not focusable,
             which is a failure of WCAG Level AA Success Criterion 1.4.13 - Content on Hover or Focus.
             To fix this warning, change the activator to either IressButton, IressMenuItem or another focusable component.`,
       "warn"
     );
-  }, [o, t.reference]), /* @__PURE__ */ f("div", { className: I, ...v, "data-testid": s, children: [
-    /* @__PURE__ */ a(
-      "div",
-      {
-        className: r.activator,
-        "data-testid": m(s, "activator"),
-        ref: t.setReference,
-        ...w(),
-        children: o
-      }
-    ),
-    c && /* @__PURE__ */ a(
-      "div",
-      {
-        className: r.content,
-        style: b,
-        "data-testid": m(s, "tooltip-text"),
-        ref: t.setFloating,
-        ...N(),
-        children: z(g).map((l, p, O) => /* @__PURE__ */ f(S, { children: [
-          l,
-          p < O.length - 1 && /* @__PURE__ */ a("br", {})
-        ] }, p))
-      }
-    )
-  ] });
+  }, [o, e.reference]), /* @__PURE__ */ m(
+    K.div,
+    {
+      className: O(r.root, u, Q.Tooltip),
+      ...v,
+      "data-testid": s,
+      children: [
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: r.activator,
+            "data-testid": p(s, "activator"),
+            ref: e.setReference,
+            ...y(),
+            children: o
+          }
+        ),
+        c && /* @__PURE__ */ a(
+          "div",
+          {
+            className: r.content,
+            style: F,
+            "data-testid": p(s, "tooltip-text"),
+            ref: e.setFloating,
+            ...A(),
+            children: W(g).map((l, f, S) => /* @__PURE__ */ m(N, { children: [
+              l,
+              f < S.length - 1 && /* @__PURE__ */ a("br", {})
+            ] }, f))
+          }
+        )
+      ]
+    }
+  );
 };
-X.Align = W;
 export {
-  X as IressTooltip
+  re as IressTooltip
 };

package/dist/components/Tooltip/Tooltip.styles.js

@@ -0,0 +1,28 @@
+import { s as o } from "../../sva-TRyehFkb.js";
+const a = o({
+  slots: ["root", "activator", "content"],
+  base: {
+    root: {
+      display: "inline-block",
+      position: "relative"
+    },
+    activator: {},
+    content: {
+      zIndex: "600",
+      width: "[max-content]",
+      maxWidth: "[20em]",
+      padding: "spacing.200",
+      borderRadius: "radius.system.form",
+      borderStyle: "solid",
+      layerStyle: "elevation.floating",
+      textStyle: "typography.body.sm.regular",
+      color: "colour.neutral.10",
+      bg: "colour.neutral.80"
+    }
+  },
+  variants: {},
+  compoundVariants: []
+});
+export {
+  a as tooltip
+};

package/dist/components/Tooltip/index.js

@@ -1,4 +1,6 @@
-import { IressTooltip as e } from "./Tooltip.js";
+import { IressTooltip as t } from "./Tooltip.js";
+import { tooltip as e } from "./Tooltip.styles.js";
 export {
-  e as IressTooltip
+  t as IressTooltip,
+  e as tooltip
 };

package/dist/components/ValidationMessage/ValidationLink/ValidationLink.js

@@ -1,21 +1,19 @@
 import { jsx as i } from "react/jsx-runtime";
-import { isValidFormInputElement as n } from "../../../helpers/form/isValidFormInputElement.js";
-import { ValidationBase as s } from "../ValidationBase/ValidationBase.js";
-const u = ({
-  linkToTarget: e,
-  ...o
+import { IressValidationMessage as r } from "../ValidationMessage.js";
+import { c as m } from "../../../cx-DN21T1EH.js";
+import { GlobalCSSClass as t } from "../../../enums.js";
+const c = ({
+  className: o,
+  linkToTarget: s,
+  ...a
 }) => /* @__PURE__ */ i(
-  s,
+  r,
   {
-    ...o,
-    as: "a",
-    href: `#${e}`,
-    onClick: (r) => {
-      const t = document.getElementById(e);
-      t && (r.preventDefault(), n(t) ? t.focus() : (t.setAttribute("tabIndex", "-1"), t.focus(), t.removeAttribute("tabIndex")));
-    }
+    ...a,
+    className: m(o, t.ValidationLink),
+    linkToTarget: s
   }
 );
 export {
-  u as IressValidationLink
+  c as IressValidationLink
 };

package/dist/components/ValidationMessage/ValidationMessage.js

@@ -1,8 +1,43 @@
-import { jsx as a } from "react/jsx-runtime";
-import { SystemValidationStatus as o } from "../../enums.js";
-import { ValidationBase as s } from "./ValidationBase/ValidationBase.js";
-const i = (t) => /* @__PURE__ */ a(s, { ...t, as: "div" });
-i.Status = o;
+import { jsxs as f, jsx as o } from "react/jsx-runtime";
+import { capitalizeFirstLetter as u } from "../../helpers/formatting/capitalizeFirstLetter.js";
+import { c as p } from "../../cx-DN21T1EH.js";
+import { IressText as x } from "../Text/Text.js";
+import { s as m } from "../../factory-DHLOr79I.js";
+import { GlobalCSSClass as y } from "../../enums.js";
+import { isValidFormInputElement as b } from "../../helpers/form/isValidFormInputElement.js";
+const v = ({
+  prefix: t,
+  status: r = "danger"
+}) => t || `${r === "danger" ? "Error" : u(r)}: `, j = ({
+  children: t,
+  className: r,
+  linkToTarget: e,
+  prefix: d,
+  status: s = "danger",
+  visiblePrefix: c = !1,
+  ...n
+}) => /* @__PURE__ */ f(
+  x,
+  {
+    color: `colour.system.${s}.text`,
+    display: "block",
+    ...n,
+    element: e ? "a" : "div",
+    href: e ? `#${e}` : void 0,
+    onClick: (a) => {
+      var l;
+      if ((l = n.onClick) == null || l.call(n, a), !e)
+        return;
+      const i = document.getElementById(e);
+      i && (a.preventDefault(), b(i) ? i.focus() : (i.setAttribute("tabIndex", "-1"), i.focus(), i.removeAttribute("tabIndex")));
+    },
+    className: p(r, y.ValidationMessage),
+    children: [
+      /* @__PURE__ */ o(m.div, { srOnly: !c, display: "inline", pe: "spacing.100", children: /* @__PURE__ */ o(v, { prefix: d, status: s }) }),
+      /* @__PURE__ */ o(m.div, { display: "inline", children: t })
+    ]
+  }
+);
 export {
-  i as IressValidationMessage
+  j as IressValidationMessage
 };

package/dist/components/ValidationMessage/ValidationSummary/ValidationSummary.js

@@ -1,69 +1,68 @@
-import { jsx as i } from "react/jsx-runtime";
-import { c as u } from "../../../index-2QXL0WYc.js";
-import { propagateTestid as f } from "../../../helpers/utility/propagateTestid.js";
-import { IressValidationMessage as p } from "../ValidationMessage.js";
+import { jsxs as T, jsx as r } from "react/jsx-runtime";
+import { propagateTestid as p } from "../../../helpers/utility/propagateTestid.js";
+import { IressValidationMessage as c } from "../ValidationMessage.js";
 import "react";
-import { useIdIfNeeded as c } from "../../../hooks/useIdIfNeeded.js";
-import { IressValidationLink as y } from "../ValidationLink/ValidationLink.js";
-const v = "ids-validation-summary-v5170", I = {
-  validationSummary: v
-}, S = ({
-  children: a,
-  "data-testid": r,
-  linkToTarget: e,
-  prefix: o,
-  status: d,
-  visiblePrefix: s
-}) => e ? /* @__PURE__ */ i(
-  y,
-  {
-    linkToTarget: e,
-    status: d,
-    prefix: o,
-    visiblePrefix: s,
-    "data-testid": r,
-    children: a
-  }
-) : /* @__PURE__ */ i(
-  p,
-  {
-    status: d,
-    prefix: o,
-    visiblePrefix: s,
-    "data-testid": r,
-    children: a
-  }
-), b = ({
-  messages: a = [],
-  linkToTarget: r,
-  prefix: e,
-  visiblePrefix: o,
-  status: d = "danger",
-  className: s,
-  "data-testid": n,
+import { useIdIfNeeded as g } from "../../../hooks/useIdIfNeeded.js";
+import { s as e } from "../../../factory-DHLOr79I.js";
+import { c as S } from "../../../cx-DN21T1EH.js";
+import { GlobalCSSClass as h } from "../../../enums.js";
+const N = ({
+  messages: o = [],
+  linkToTarget: f,
+  prefix: s,
+  visiblePrefix: l,
+  status: n = "danger",
+  "data-testid": a,
+  children: t,
+  itemStyle: d,
+  className: u,
   ...m
 }) => {
-  const l = c({ id: m.id });
-  return a.length ? /* @__PURE__ */ i(
-    "ul",
+  const x = g({ id: m.id });
+  return !o.length && !t ? null : /* @__PURE__ */ T(
+    e.ul,
     {
+      "data-testid": a,
+      listStyle: "none",
+      m: "spacing.000",
+      p: "spacing.000",
       ...m,
-      className: u(s, I.validationSummary),
-      "data-testid": n,
-      children: a.map((t) => /* @__PURE__ */ i("li", { children: /* @__PURE__ */ i(
-        S,
-        {
-          linkToTarget: t.linkToTarget ?? r,
-          status: t.status ?? d,
-          prefix: t.prefix ?? e,
-          visiblePrefix: t.visiblePrefix ?? o,
-          "data-testid": t.dataTestId ?? f(n, "error"),
-          children: t.message
-        }
-      ) }, `${l}-${t.linkToTarget}-${t.message}`))
+      className: S(u, h.ValidationSummary),
+      children: [
+        o.map((i) => /* @__PURE__ */ r(
+          e.li,
+          {
+            m: "spacing.000",
+            children: /* @__PURE__ */ r(
+              c,
+              {
+                linkToTarget: i.linkToTarget ?? f,
+                status: i.status ?? n,
+                prefix: i.prefix ?? s,
+                visiblePrefix: i.visiblePrefix ?? l,
+                "data-testid": i.dataTestId ?? p(a, "error"),
+                ...d,
+                children: i.message
+              }
+            )
+          },
+          `${x}-${i.linkToTarget}-${i.message}`
+        )),
+        t && /* @__PURE__ */ r(e.li, { m: "spacing.000", children: /* @__PURE__ */ r(
+          c,
+          {
+            status: n,
+            prefix: s,
+            visiblePrefix: l,
+            "data-testid": p(a, "error"),
+            ...d,
+            children: t
+          }
+        ) })
+      ]
     }
-  ) : null;
+  );
 };
 export {
-  b as IressValidationSummary
+  N as IressValidationSummary
 };