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

package/dist/components/Radio/Radio.js

@@ -1,114 +1,119 @@
-import { jsx as t, jsxs as C } from "react/jsx-runtime";
-import { forwardRef as E, useContext as H } from "react";
-import { useControlledState as P } from "../../hooks/useControlledState.js";
-import { useIdIfNeeded as z } from "../../hooks/useIdIfNeeded.js";
+import { jsx as e, jsxs as k } from "react/jsx-runtime";
+import { forwardRef as j, useContext as A } from "react";
+import { useControlledState as B } from "../../hooks/useControlledState.js";
+import { useIdIfNeeded as E } from "../../hooks/useIdIfNeeded.js";
 import { propagateTestid as l } from "../../helpers/utility/propagateTestid.js";
-import { IressReadonly as D } from "../Readonly/Readonly.js";
+import { IressReadonly as H } from "../Readonly/Readonly.js";
 import "../Readonly/Readonly.styles.js";
-import { getFormControlValueAsString as J } from "../../helpers/form/getFormControlValueAsString.js";
-import { c as u } from "../../cva-B2x59Dph.js";
-import { c as K } from "../../cx-DN21T1EH.js";
-import { radio as L } from "./Radio.styles.js";
-import { GlobalCSSClass as f } from "../../enums.js";
-import { IressCheckboxMark as Q } from "../CheckboxMark/CheckboxMark.js";
+import { getFormControlValueAsString as P } from "../../helpers/form/getFormControlValueAsString.js";
+import { c as C } from "../../css-fGu_jDvv.js";
+import { c as z } from "../../cx-DN21T1EH.js";
+import { radio as D } from "./Radio.styles.js";
+import { GlobalCSSClass as p } from "../../enums.js";
+import { IressCheckboxMark as J } from "../CheckboxMark/CheckboxMark.js";
 import "../CheckboxMark/CheckboxMark.styles.js";
-import { getRadioGroupContext as T } from "../RadioGroup/RadioGroup.js";
+import { getRadioGroupContext as K } from "../RadioGroup/RadioGroup.js";
 import "../RadioGroup/RadioGroup.styles.js";
-import { s as h } from "../../factory-DHLOr79I.js";
-import { s as U } from "../../is-valid-prop-DFFvE05x.js";
-import { IressText as W } from "../Text/Text.js";
-const X = ({
-  checked: y,
-  children: p,
-  className: R,
-  "data-testid": r,
+import { s as h } from "../../factory-oPXoMw9H.js";
+import { s as L } from "../../is-valid-prop-Ce0wiweq.js";
+import { IressText as Q } from "../Text/Text.js";
+const T = (a) => /* @__PURE__ */ e(
+  h.svg,
+  {
+    version: "1.1",
+    viewBox: "0 0 200 200",
+    xmlns: "http://www.w3.org/2000/svg",
+    ...a,
+    className: p.FormElement,
+    children: /* @__PURE__ */ e("circle", { cx: "100", cy: "100", r: "70" })
+  }
+), U = ({
+  checked: a,
+  children: u,
+  className: x,
+  "data-testid": i,
   defaultChecked: g,
-  hiddenControl: w,
-  name: v,
-  onChange: i,
-  readOnly: b,
-  required: M,
-  value: o,
-  touch: N,
+  hiddenControl: y,
+  name: R,
+  onChange: w,
+  readOnly: v,
+  required: b,
+  value: r,
+  touch: M,
   ...n
-}, S) => {
-  const k = z(n), e = H(T()), { value: I, setValue: O } = P({
+}, N) => {
+  const f = E(n), o = A(K()), { value: S, setValue: G } = B({
     component: "Radio",
     defaultValue: !!g,
-    value: y,
+    value: a,
     propName: "checked"
-  }), m = !!(e != null && e.onChange), c = m ? e.value === o : I;
-  if (m ? e.readOnly : b)
-    return c ? /* @__PURE__ */ t(
-      D,
+  }), d = !!o?.onChange, s = d ? o.value === r : S;
+  if (d ? o.readOnly : v)
+    return s ? /* @__PURE__ */ e(
+      H,
       {
         ...n,
         width: void 0,
-        value: J(o),
-        children: p
+        value: P(r),
+        children: u
       }
     ) : null;
-  const q = (e == null ? void 0 : e.name) ?? v, a = (e == null ? void 0 : e.hiddenRadio) ?? w, F = (e == null ? void 0 : e.required) ?? M, V = (e == null ? void 0 : e.touch) ?? N, s = L.raw({
-    hiddenControl: a,
-    touch: V,
-    checked: c
-  }), j = () => /* @__PURE__ */ t(
-    h.svg,
-    {
-      version: "1.1",
-      viewBox: "0 0 200 200",
-      xmlns: "http://www.w3.org/2000/svg",
-      ...s.radioMark,
-      className: f.FormElement,
-      children: /* @__PURE__ */ t("circle", { cx: "100", cy: "100", r: "70" })
-    }
-  ), [A, B] = U(n);
-  return /* @__PURE__ */ C(
+  const I = o?.name ?? R, c = o?.hiddenRadio ?? y, O = o?.required ?? b, q = o?.touch ?? M, t = D.raw({
+    hiddenControl: c,
+    touch: q,
+    checked: s
+  }), [F, V] = L(n);
+  return /* @__PURE__ */ k(
     "div",
     {
-      "data-testid": r,
-      className: K(
-        R,
-        u(s.root, A),
-        f.Group,
-        f.Radio
+      "data-testid": i,
+      className: z(
+        x,
+        C(t.root, F),
+        p.Group,
+        p.Radio
       ),
       children: [
-        /* @__PURE__ */ t(
+        /* @__PURE__ */ e(
           h.input,
           {
-            ...B,
-            ...s.input,
+            ...V,
+            ...t.input,
             type: "radio",
-            id: k,
-            name: q,
-            ref: S,
-            "data-testid": l(r, "input"),
-            onChange: (d) => {
-              var x;
-              m || O(d.target.checked), i == null || i(d, o), (x = e == null ? void 0 : e.onChange) == null || x.call(e, d, o);
+            id: f,
+            name: I,
+            ref: N,
+            "data-testid": l(i, "input"),
+            onChange: (m) => {
+              d || G(m.target.checked), w?.(m, r), o?.onChange?.(m, r);
             },
-            value: String(o),
-            checked: c,
-            required: F
+            value: String(r),
+            checked: s,
+            required: O
           }
         ),
-        /* @__PURE__ */ C(h.label, { htmlFor: k, ...s.label, children: [
-          !a && /* @__PURE__ */ t(j, { "data-testid": l(r, "radioMark") }),
-          a && /* @__PURE__ */ t(
-            Q,
+        /* @__PURE__ */ k(h.label, { htmlFor: f, ...t.label, children: [
+          !c && /* @__PURE__ */ e(
+            T,
+            {
+              ...t.radioMark,
+              "data-testid": l(i, "radioMark")
+            }
+          ),
+          c && /* @__PURE__ */ e(
+            J,
             {
-              className: u(s.checkboxMark),
-              checked: c,
-              "data-testid": l(r, "checkboxMark")
+              className: C(t.checkboxMark),
+              checked: s,
+              "data-testid": l(i, "checkboxMark")
             }
           ),
-          /* @__PURE__ */ t(W, { element: "span", children: p })
+          /* @__PURE__ */ e(Q, { element: "span", children: u })
         ] })
       ]
     }
   );
-}, ke = E(X);
+}, fo = j(U);
 export {
-  ke as IressRadio
+  fo as IressRadio
 };

package/dist/components/Radio/Radio.styles.js

@@ -1,4 +1,4 @@
-import { s as r } from "../../sva-TRyehFkb.js";
+import { s as r } from "../../sva-OmxClA9g.js";
 const e = r({
   slots: [
     "root",
@@ -13,7 +13,7 @@ const e = r({
       color: "colour.primary.fill",
       display: "flex",
       position: "relative",
-      padding: "spacing.000",
+      padding: "spacing.0",
       transition: "[all 0.2s ease-out]",
       "&:has(svg:hover)": {
         color: "colour.primary.fillHover"
@@ -25,14 +25,14 @@ const e = r({
       height: "[1px]",
       margin: "[-1px]",
       overflow: "hidden",
-      padding: "spacing.000",
+      padding: "spacing.0",
       position: "absolute",
       width: "[1px]"
     },
     label: {
       display: "inline-flex",
       alignItems: "center",
-      padding: "spacing.000",
+      padding: "spacing.0",
       border: "[0px solid transparent]",
       borderRadius: "radius.system.form",
       backgroundColor: "[transparent]",
@@ -54,7 +54,7 @@ const e = r({
       width: "[calc(1.3 * 1rem)]",
       height: "[calc(1.3 * 1rem)]",
       borderRadius: "[100%]",
-      marginInlineEnd: "spacing.150",
+      marginInlineEnd: "spacing.2",
       flexShrink: 0,
       color: "[currentColor]",
       "& circle": {
@@ -94,7 +94,7 @@ const e = r({
           borderStyle: "solid",
           borderColor: "colour.neutral.40",
           borderRadius: "radius.050",
-          padding: "spacing.400"
+          padding: "spacing.4"
         }
       }
     },

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,95 +1,87 @@
-import { jsx as v } from "react/jsx-runtime";
-import { forwardRef as g, createContext as j, useRef as k, useMemo as D, useImperativeHandle as H } from "react";
-import { useControlledState as M } from "../../hooks/useControlledState.js";
-import { radioGroup as P } from "./RadioGroup.styles.js";
-import { c as w } from "../../cx-DN21T1EH.js";
-import { s as z } from "../../factory-DHLOr79I.js";
-import { GlobalCSSClass as A } from "../../enums.js";
-import { useNoDefaultValueInForms as J } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-function K() {
-  return j(void 0);
+import { jsx as f } from "react/jsx-runtime";
+import { forwardRef as B, createContext as N, useRef as T, useMemo as j, useImperativeHandle as k } from "react";
+import { useControlledState as D } from "../../hooks/useControlledState.js";
+import { radioGroup as E } from "./RadioGroup.styles.js";
+import { c as H } from "../../cx-DN21T1EH.js";
+import { s as M } from "../../factory-oPXoMw9H.js";
+import { GlobalCSSClass as P } from "../../enums.js";
+import { useNoDefaultValueInForms as h } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+function w() {
+  return N(void 0);
 }
-function L() {
-  return Q;
+function z() {
+  return A;
 }
-const Q = K(), U = ({
-  children: G,
-  className: R,
-  hiddenRadio: u,
-  layout: x = "stack",
-  name: p,
-  onBlur: i,
+const A = w(), J = ({
+  children: d,
+  className: v,
+  hiddenRadio: t,
+  layout: G = "stack",
+  name: n,
+  onBlur: R,
   onChange: s,
-  onFocus: a,
-  required: f,
-  role: S = "radiogroup",
-  defaultValue: l,
-  readOnly: m,
-  value: I,
-  touch: n,
-  ...b
-}, y) => {
-  J({
+  onFocus: x,
+  required: c,
+  role: C = "radiogroup",
+  defaultValue: a,
+  readOnly: i,
+  value: S,
+  touch: l,
+  ...g
+}, I) => {
+  h({
     component: "IressRadioGroup",
-    defaultValue: l
+    defaultValue: a
   });
-  const e = k(null), t = e.current, { value: d, setValue: c } = M({
+  const r = T(null), e = r.current, { value: p, setValue: u } = D({
     component: "IressRadioGroup",
-    defaultValue: l,
-    value: I
-  }), C = D(
+    defaultValue: a,
+    value: S
+  }), b = j(
     () => ({
-      name: p,
-      value: d,
-      hiddenRadio: u,
-      required: f,
-      readOnly: m,
-      touch: n,
-      onChange: (o, r) => {
-        c(r), s == null || s(o, r);
+      name: n,
+      value: p,
+      hiddenRadio: t,
+      required: c,
+      readOnly: i,
+      touch: l,
+      onChange: (o, m) => {
+        u(m), s?.(o, m);
       }
     }),
-    [p, d, u, f, m, c, s, n]
+    [n, p, t, c, i, u, s, l]
   );
-  H(y, () => ({
+  k(I, () => ({
     // React hook form requires the focus, blur, input
-    focus: () => {
-      var o;
-      return (o = t == null ? void 0 : t.querySelector("input")) == null ? void 0 : o.focus();
-    },
-    blur: () => {
-      var o;
-      return (o = t == null ? void 0 : t.querySelector("input")) == null ? void 0 : o.blur();
-    },
-    input: t,
-    reset: () => c(void 0)
+    focus: () => e?.querySelector("input")?.focus(),
+    blur: () => e?.querySelector("input")?.blur(),
+    input: e,
+    reset: () => u(void 0)
   }));
-  const q = (o) => {
-    var r;
-    a == null || a(o), o.target === e.current && ((r = e.current.querySelector("input")) == null || r.focus());
-  }, N = (o) => {
-    var r;
-    o.relatedTarget && !((r = e.current) != null && r.contains(o.relatedTarget)) && (i == null || i(o));
-  }, { Provider: T } = L();
-  return /* @__PURE__ */ v(T, { value: C, children: /* @__PURE__ */ v(
-    z.div,
+  const y = (o) => {
+    x?.(o), o.target === r.current && r.current.querySelector("input")?.focus();
+  }, F = (o) => {
+    o.relatedTarget && !r.current?.contains(o.relatedTarget) && R?.(o);
+  }, { Provider: q } = z();
+  return /* @__PURE__ */ f(q, { value: b, children: /* @__PURE__ */ f(
+    M.div,
     {
-      ...b,
-      ref: e,
-      role: S,
-      className: w(
-        R,
-        P({ layout: x, hiddenRadio: u }),
-        A.RadioGroup
+      ...g,
+      ref: r,
+      role: C,
+      className: H(
+        v,
+        E({ layout: G, hiddenRadio: t }),
+        P.RadioGroup
       ),
-      onBlur: N,
-      onFocus: q,
-      children: G
+      onBlur: F,
+      onFocus: y,
+      children: d
     }
   ) });
-}, O = g(U);
+}, Z = B(J);
 export {
-  O as IressRadioGroup,
-  Q as RadioGroupContext,
-  L as getRadioGroupContext
+  Z as IressRadioGroup,
+  A as RadioGroupContext,
+  z as getRadioGroupContext
 };

package/dist/components/RadioGroup/RadioGroup.styles.js

@@ -1,4 +1,4 @@
-import { a } from "../../cva-B2x59Dph.js";
+import { c as a } from "../../cva-JiDXAa83.js";
 const i = a({
   base: {},
   variants: {
@@ -6,7 +6,7 @@ const i = a({
       stack: {
         display: "inline-flex",
         flexFlow: "column wrap",
-        rowGap: "spacing.200",
+        rowGap: "spacing.2",
         "& > *": {
           flexBasis: "[0]"
         }
@@ -14,7 +14,7 @@ const i = a({
       block: {
         display: "flex",
         flexFlow: "column wrap",
-        rowGap: "spacing.200",
+        rowGap: "spacing.2",
         "& label": {
           flexBasis: "[100%]"
         }
@@ -23,7 +23,7 @@ const i = a({
         display: "flex",
         flexFlow: "row wrap",
         width: "[100%]",
-        gap: "spacing.200",
+        gap: "spacing.2",
         "& label": {
           flexBasis: "[auto]",
           flexGrow: "[0]"
@@ -31,7 +31,7 @@ const i = a({
       },
       inlineFlex: {
         display: "inline-flex",
-        gap: "spacing.200"
+        gap: "spacing.2"
       },
       inlineEqualWidth: {
         display: "flex",

package/dist/components/Readonly/Readonly.js

@@ -1,69 +1,70 @@
-import { jsxs as R, jsx as r } from "react/jsx-runtime";
-import { forwardRef as C } from "react";
-import { propagateTestid as I } from "../../helpers/utility/propagateTestid.js";
-import { getFormControlValueAsStringIfDefined as c } from "../../helpers/form/getFormControlValueAsStringIfDefined.js";
-import { readonly as S } from "./Readonly.styles.js";
-import { c as e } from "../../cx-DN21T1EH.js";
-import { IressSpinner as V } from "../Spinner/Spinner.js";
+import { jsxs as S, jsx as o } from "react/jsx-runtime";
+import { forwardRef as I } from "react";
+import { propagateTestid as V } from "../../helpers/utility/propagateTestid.js";
+import { getFormControlValueAsStringIfDefined as d } from "../../helpers/form/getFormControlValueAsStringIfDefined.js";
+import { readonly as D } from "./Readonly.styles.js";
+import { c as s } from "../../css-fGu_jDvv.js";
+import { c as P } from "../../cx-DN21T1EH.js";
+import { IressSpinner as g } from "../Spinner/Spinner.js";
 import "../Spinner/Spinner.styles.js";
-import { GlobalCSSClass as D } from "../../enums.js";
-import { useNoDefaultValueInForms as g } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-const j = ({
-  append: a,
-  children: f,
-  className: s,
-  "data-testid": i,
-  defaultValue: n,
-  loading: t,
+import { GlobalCSSClass as j } from "../../enums.js";
+import { useNoDefaultValueInForms as w } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+import { s as F } from "../../is-valid-prop-Ce0wiweq.js";
+const b = ({
+  append: t,
+  children: c,
+  className: p,
+  "data-testid": a,
+  defaultValue: i,
+  loading: e,
   prepend: l,
-  style: p,
+  style: f,
   width: u,
   value: v,
   inline: y,
   alignRight: h,
-  ...x
-}, N) => {
-  g({
+  ...N
+}, x) => {
+  w({
     component: "IressReadonly",
-    defaultValue: n
+    defaultValue: i
   });
-  const o = S({ inline: y, width: u, alignRight: h }), d = c(n), m = c(v);
-  return /* @__PURE__ */ R(
+  const r = D.raw({ inline: y, width: u, alignRight: h }), n = d(i), m = d(v), [C, R] = F(N);
+  return /* @__PURE__ */ S(
     "div",
     {
-      className: e(
-        s,
-        o.root,
-        o.readonly,
-        D.Readonly
+      className: P(
+        p,
+        s(r.root, C),
+        j.Readonly
       ),
-      "data-testid": i,
-      style: p,
+      "data-testid": a,
+      style: f,
       children: [
-        l && /* @__PURE__ */ r("div", { className: e(o.addon), children: l }),
-        /* @__PURE__ */ r("div", { className: e(s, o.formControl, o.readonly), children: f ?? m ?? d }),
-        /* @__PURE__ */ r("div", { className: e(o.internal), children: t && /* @__PURE__ */ r(
-          V,
+        l && /* @__PURE__ */ o("div", { className: s(r.addon), children: l }),
+        /* @__PURE__ */ o("div", { className: s(r.formControl), children: c ?? m ?? n }),
+        /* @__PURE__ */ o("div", { className: s(r.internal), children: e && /* @__PURE__ */ o(
+          g,
           {
-            screenreaderText: t === !0 ? "loading" : t
+            screenreaderText: e === !0 ? "loading" : e
           }
         ) }),
-        a && /* @__PURE__ */ r("div", { className: e(o.addon), children: a }),
-        /* @__PURE__ */ r(
+        t && /* @__PURE__ */ o("div", { className: s(r.addon), children: t }),
+        /* @__PURE__ */ o(
           "input",
           {
-            ...x,
-            defaultValue: d,
+            ...R,
+            defaultValue: n,
             type: "hidden",
-            ref: N,
-            "data-testid": I(i, "input"),
+            ref: x,
+            "data-testid": V(a, "input"),
             value: m
           }
         )
       ]
     }
   );
-}, E = C(j);
+}, M = I(b);
 export {
-  E as IressReadonly
+  M as IressReadonly
 };

package/dist/components/Readonly/Readonly.styles.js

@@ -1,15 +1,17 @@
-import { s as t } from "../../sva-TRyehFkb.js";
+import { s as t } from "../../sva-OmxClA9g.js";
 const i = t({
-  slots: ["root", "wrapper", "addon", "internal", "formControl", "readonly"],
+  slots: ["root", "wrapper", "addon", "internal", "formControl"],
   base: {
     root: {
       display: "flex",
-      alignItems: "stretch",
       backgroundColor: "colour.neutral.10",
       minHeight: "input.height",
       margin: "[0]",
       flexGrow: "1",
-      textStyle: "typography.body.lg"
+      textStyle: "typography.body.md",
+      alignItems: "center",
+      height: "auto",
+      lineHeight: "inherit"
     },
     addon: {
       borderRadius: "radius.100",
@@ -24,16 +26,16 @@ const i = t({
         display: "none"
       },
       "& > *": {
-        px: "spacing.250"
+        px: "spacing.3"
       },
       _first: {
         "& > *": {
-          pl: "spacing.000"
+          pl: "spacing.0"
         }
       },
       _last: {
         "& > *": {
-          pr: "spacing.000"
+          pr: "spacing.0"
         }
       }
     },
@@ -41,7 +43,7 @@ const i = t({
       display: "flex",
       alignItems: "center",
       "& > *": {
-        padding: "[0 {spacing.spacing.250}]"
+        padding: "[0 {spacing.spacing.3}]"
       },
       _empty: {
         display: "none"
@@ -51,7 +53,6 @@ const i = t({
       borderWidth: 0,
       borderRadius: "radius.system.form",
       backgroundColor: "colour.neutral.10",
-      textStyle: "typography.body.lg",
       color: "colour.neutral.80",
       display: "inline-flex",
       alignItems: "center",
@@ -59,20 +60,14 @@ const i = t({
       flex: "auto",
       maxWidth: "[100%]",
       minHeight: "input.height",
-      lineHeight: 1,
+      height: "auto",
+      lineHeight: "inherit",
       _focus: {
         outline: "[none]"
       },
       _placeholder: {
         color: "colour.neutral.60"
       }
-    },
-    readonly: {
-      display: "flex",
-      alignItems: "center",
-      height: "auto",
-      minHeight: "input.height",
-      lineHeight: "inherit"
     }
   },
   variants: {