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

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

@@ -0,0 +1,201 @@
+import { s as r } from "../../sva-TRyehFkb.js";
+const e = r({
+  slots: [
+    "root",
+    "input",
+    "label",
+    "radioMark",
+    "checkedRadioMark",
+    "checkboxMark"
+  ],
+  base: {
+    root: {
+      color: "colour.primary.fill",
+      display: "flex",
+      position: "relative",
+      padding: "spacing.000",
+      transition: "[all 0.2s ease-out]",
+      "&:has(svg:hover)": {
+        color: "colour.primary.fillHover"
+      }
+    },
+    input: {
+      border: "[0px]",
+      clip: "rect(0, 0, 0, 0)",
+      height: "[1px]",
+      margin: "[-1px]",
+      overflow: "hidden",
+      padding: "spacing.000",
+      position: "absolute",
+      width: "[1px]"
+    },
+    label: {
+      display: "inline-flex",
+      alignItems: "center",
+      padding: "spacing.000",
+      border: "[0px solid transparent]",
+      borderRadius: "radius.system.form",
+      backgroundColor: "[transparent]",
+      position: "relative",
+      lineHeight: "1.5",
+      margin: "[0px]",
+      cursor: "pointer"
+    },
+    radioMark: {
+      boxSizing: "border-box",
+      position: "relative",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "colour.neutral.70",
+      backgroundColor: "colour.neutral.10",
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      width: "[calc(1.3 * 1rem)]",
+      height: "[calc(1.3 * 1rem)]",
+      borderRadius: "[100%]",
+      marginInlineEnd: "spacing.150",
+      flexShrink: 0,
+      color: "[currentColor]",
+      "& circle": {
+        fill: "[currentColor]",
+        display: "none"
+      },
+      _groupFocusWithin: {
+        layerStyle: "elevation.focus"
+      }
+    },
+    checkboxMark: {
+      checkmark: !1
+    }
+  },
+  variants: {
+    hiddenControl: {
+      true: {
+        label: {
+          display: "block",
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: "colour.neutral.40",
+          cursor: "pointer",
+          _hover: {
+            backgroundColor: "colour.primary.surfaceHover"
+          }
+        },
+        radioMark: {
+          display: "none"
+        }
+      }
+    },
+    touch: {
+      true: {
+        label: {
+          borderWidth: "1px",
+          borderStyle: "solid",
+          borderColor: "colour.neutral.40",
+          borderRadius: "radius.050",
+          padding: "spacing.400"
+        }
+      }
+    },
+    checked: {
+      true: {
+        label: {
+          borderColor: "[currentColor]"
+        },
+        radioMark: {
+          borderColor: "[currentColor]",
+          "& circle": {
+            fill: "[currentColor]",
+            display: "block"
+          }
+        }
+      },
+      false: {
+        radioMark: {
+          _hover: {
+            backgroundColor: "colour.primary.surfaceHover"
+          }
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      hiddenControl: !0,
+      css: {
+        input: {
+          _checked: {
+            "& + label": {
+              border: "[none]",
+              padding: "[1px]",
+              _after: {
+                content: '""',
+                position: "absolute",
+                inset: "[0]",
+                display: "block",
+                borderWidth: "1px",
+                borderStyle: "solid",
+                borderColor: "colour.primary.fill",
+                borderRadius: "[inherit]",
+                pointerEvents: "none"
+              }
+            }
+          },
+          _focus: {
+            "& + label": {
+              _after: {
+                content: '""',
+                position: "absolute",
+                inset: "[0]",
+                display: "block",
+                borderRadius: "[inherit]",
+                pointerEvents: "none",
+                layerStyle: "elevation.focus"
+              }
+            }
+          }
+        }
+      }
+    },
+    {
+      hiddenControl: !1,
+      css: {
+        input: {
+          _checked: {
+            "& ~ div svg circle": {
+              display: "revert"
+            }
+          }
+        }
+      }
+    },
+    {
+      touch: !0,
+      css: {
+        input: {
+          _checked: {
+            "& + label": {
+              borderColor: "colour.primary.fill"
+            }
+          }
+        }
+      }
+    },
+    {
+      hiddenControl: !0,
+      checked: !0,
+      css: {
+        label: {
+          topLeftTriangle: !0
+        },
+        checkboxMark: {
+          checkmark: !0
+        }
+      }
+    }
+  ]
+});
+export {
+  e as radio
+};

package/dist/components/Radio/index.js

@@ -1,4 +1,6 @@
-import { u as s } from "../../LoadingSuspense-BjzbePWa.js";
+import { IressRadio as e } from "./Radio.js";
+import { radio as d } from "./Radio.styles.js";
 export {
-  s as IressRadio
+  e as IressRadio,
+  d as radio
 };

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,86 +1,95 @@
 import { jsx as v } from "react/jsx-runtime";
-import { c as L } from "../../index-2QXL0WYc.js";
-import { RadioGroupLayout as S } from "./RadioGroup.types.js";
-import { forwardRef as W, useRef as j, useMemo as w, useImperativeHandle as D } from "react";
-import { useControlledState as F } from "../../hooks/useControlledState.js";
-import { RadioGroupContext as H } from "./RadioGroupContext.js";
-import { useNoDefaultValueInForms as M } from "../Form/hooks/useNoDefaultValueInForms.js";
-const P = "ids-radio-group-v5170", z = "ids-radio-group--stack-v5170", A = "ids-radio-group--block-v5170", B = "ids-radio-group--inline-v5170", J = "ids-radio-group--inline-flex-v5170", K = "ids-radio-group--inline-equal-width-v5170", G = {
-  radioGroup: P,
-  stack: z,
-  "ids-radio": "ids-radio-v5170",
-  block: A,
-  "ids-radio--label": "ids-radio--label-v5170",
-  inline: B,
-  inlineFlex: J,
-  inlineEqualWidth: K
-}, R = W(
-  ({
-    children: b,
-    className: k,
-    hiddenRadio: d,
-    layout: l = "stack",
-    name: u,
-    onChange: r,
-    onFocus: e,
-    required: p,
-    role: x = "radiogroup",
-    defaultValue: c,
-    readonly: n,
-    value: I,
-    touch: m,
-    ...g
-  }, N) => {
-    M({
-      component: "IressRadioGroup",
-      defaultValue: c
-    });
-    const s = j(null), o = s.current, { value: f, setValue: a } = F({
-      component: "IressRadioGroup",
-      defaultValue: c,
-      value: I
-    }), q = w(
-      () => ({
-        name: u,
-        value: f,
-        hiddenRadio: d,
-        required: p,
-        readonly: n,
-        touch: m,
-        onChange: (t, i) => {
-          a(i), r == null || r(t, i);
-        }
-      }),
-      [u, f, d, p, n, a, r, m]
-    );
-    D(N, () => ({
-      // React hook form requires the focus, blur, input
-      focus: () => o == null ? void 0 : o.focus(),
-      blur: () => o == null ? void 0 : o.blur(),
-      input: o,
-      reset: () => a(void 0)
-    }));
-    const y = (t) => {
-      var i;
-      e == null || e(t), t.target === s.current && ((i = s.current.querySelector("input")) == null || i.focus());
-    };
-    return /* @__PURE__ */ v(H.Provider, { value: q, children: /* @__PURE__ */ v(
-      "div",
-      {
-        ...g,
-        ref: s,
-        role: x,
-        className: L(k, G.radioGroup, {
-          [G[l]]: !!l
-        }),
-        onFocus: y,
-        children: b
+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);
+}
+function L() {
+  return Q;
+}
+const Q = K(), U = ({
+  children: G,
+  className: R,
+  hiddenRadio: u,
+  layout: x = "stack",
+  name: p,
+  onBlur: i,
+  onChange: s,
+  onFocus: a,
+  required: f,
+  role: S = "radiogroup",
+  defaultValue: l,
+  readOnly: m,
+  value: I,
+  touch: n,
+  ...b
+}, y) => {
+  J({
+    component: "IressRadioGroup",
+    defaultValue: l
+  });
+  const e = k(null), t = e.current, { value: d, setValue: c } = M({
+    component: "IressRadioGroup",
+    defaultValue: l,
+    value: I
+  }), C = D(
+    () => ({
+      name: p,
+      value: d,
+      hiddenRadio: u,
+      required: f,
+      readOnly: m,
+      touch: n,
+      onChange: (o, r) => {
+        c(r), s == null || s(o, r);
       }
-    ) });
-  }
-);
-R.displayName = "IressRadioGroup";
-R.Layout = S;
+    }),
+    [p, d, u, f, m, c, s, n]
+  );
+  H(y, () => ({
+    // 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)
+  }));
+  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,
+    {
+      ...b,
+      ref: e,
+      role: S,
+      className: w(
+        R,
+        P({ layout: x, hiddenRadio: u }),
+        A.RadioGroup
+      ),
+      onBlur: N,
+      onFocus: q,
+      children: G
+    }
+  ) });
+}, O = g(U);
 export {
-  R as IressRadioGroup
+  O as IressRadioGroup,
+  Q as RadioGroupContext,
+  L as getRadioGroupContext
 };

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

@@ -0,0 +1,60 @@
+import { a } from "../../cva-B2x59Dph.js";
+const i = a({
+  base: {},
+  variants: {
+    layout: {
+      stack: {
+        display: "inline-flex",
+        flexFlow: "column wrap",
+        rowGap: "spacing.200",
+        "& > *": {
+          flexBasis: "[0]"
+        }
+      },
+      block: {
+        display: "flex",
+        flexFlow: "column wrap",
+        rowGap: "spacing.200",
+        "& label": {
+          flexBasis: "[100%]"
+        }
+      },
+      inline: {
+        display: "flex",
+        flexFlow: "row wrap",
+        width: "[100%]",
+        gap: "spacing.200",
+        "& label": {
+          flexBasis: "[auto]",
+          flexGrow: "[0]"
+        }
+      },
+      inlineFlex: {
+        display: "inline-flex",
+        gap: "spacing.200"
+      },
+      inlineEqualWidth: {
+        display: "flex",
+        width: "[100%]",
+        "& > *": {
+          flex: "[1 1 auto]"
+        }
+      }
+    },
+    hiddenRadio: {
+      true: {
+        "& label": {
+          _hover: {
+            backgroundColor: "colour.primary.surfaceHover"
+          }
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    layout: "stack"
+  }
+});
+export {
+  i as radioGroup
+};

package/dist/components/RadioGroup/index.js

@@ -1,7 +1,8 @@
-import { RADIO_GROUP_LAYOUTS as p, RadioGroupLayout as R } from "./RadioGroup.types.js";
-import { IressRadioGroup as e } from "./RadioGroup.js";
+import { IressRadioGroup as t, RadioGroupContext as e, getRadioGroupContext as p } from "./RadioGroup.js";
+import { radioGroup as d } from "./RadioGroup.styles.js";
 export {
-  e as IressRadioGroup,
-  p as RADIO_GROUP_LAYOUTS,
-  R as RadioGroupLayout
+  t as IressRadioGroup,
+  e as RadioGroupContext,
+  p as getRadioGroupContext,
+  d as radioGroup
 };

package/dist/components/Readonly/Readonly.js

@@ -1,42 +1,69 @@
-import "react/jsx-runtime";
-import "react";
-import "../../helpers/utility/propagateTestid.js";
-import { v as N } from "../../LoadingSuspense-BjzbePWa.js";
-import "../../fuzzysort-eoXOpoo6.js";
-import "../Badge/Badge.js";
-import "../../index-2QXL0WYc.js";
-import "../ButtonGroup/ButtonGroupProvider.js";
-import "../../enums.js";
-import "../Card/Card.js";
-import "../CheckboxGroup/CheckboxGroup.js";
-import "../Col/Col.js";
-import "../Expander/Expander.js";
-import "../Form/FormContext.js";
-import "../Menu/Menu.js";
-import "../Menu/MenuProvider.js";
-import "../../PopoverProvider-BqnPfQtY.js";
-import "../CheckboxMark/CheckboxMark.types.js";
-import "../CheckboxMark/CheckboxMark.js";
-import "../Modal/ModalProvider.js";
-import "../Panel/Panel.js";
-import "../Popover/Popover.js";
-import "../Popover/InputPopover/InputPopover.js";
-import "../../SlideoutProvider-CQh140HM.js";
-import "react-dom";
-import "../RadioGroup/RadioGroup.js";
-import "../Text/Text.js";
-import "../../helpers/form/getFormControlValueAsStringIfDefined.js";
-import "../Skeleton/Skeleton.js";
-import "../SkipLink/SkipLink.js";
-import "../Stack/Stack.js";
-import "../Table/TableContext.js";
-import "../TabSet/Tab/Tab.js";
-import "../TabSet/TabSet.js";
-import "../Toggle/Toggle.js";
-import "../Tooltip/Tooltip.js";
-import "../ValidationMessage/ValidationMessage.js";
-import "../../InputBase-Dt3vHG19.js";
-import "../Form/hooks/useNoDefaultValueInForms.js";
+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 "../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,
+  prepend: l,
+  style: p,
+  width: u,
+  value: v,
+  inline: y,
+  alignRight: h,
+  ...x
+}, N) => {
+  g({
+    component: "IressReadonly",
+    defaultValue: n
+  });
+  const o = S({ inline: y, width: u, alignRight: h }), d = c(n), m = c(v);
+  return /* @__PURE__ */ R(
+    "div",
+    {
+      className: e(
+        s,
+        o.root,
+        o.readonly,
+        D.Readonly
+      ),
+      "data-testid": i,
+      style: p,
+      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,
+          {
+            screenreaderText: t === !0 ? "loading" : t
+          }
+        ) }),
+        a && /* @__PURE__ */ r("div", { className: e(o.addon), children: a }),
+        /* @__PURE__ */ r(
+          "input",
+          {
+            ...x,
+            defaultValue: d,
+            type: "hidden",
+            ref: N,
+            "data-testid": I(i, "input"),
+            value: m
+          }
+        )
+      ]
+    }
+  );
+}, E = C(j);
 export {
-  N as IressReadonly
+  E as IressReadonly
 };