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

package/dist/components/Checkbox/Checkbox.styles.js

@@ -0,0 +1,117 @@
+import { s as r } from "../../sva-OmxClA9g.js";
+const o = r({
+  slots: [
+    "formElement",
+    "input",
+    "srOnly",
+    "root",
+    "label",
+    "labelSpan",
+    "mark",
+    "hiddenControl",
+    "touch"
+  ],
+  base: {
+    formElement: {},
+    root: {
+      color: "colour.primary.fill",
+      display: "flex",
+      position: "relative"
+    },
+    input: {
+      srOnly: !0
+    },
+    label: {
+      position: "relative",
+      lineHeight: "1.5",
+      margin: "spacing.000",
+      display: "inline-flex",
+      cursor: "pointer"
+    },
+    labelSpan: {},
+    mark: {
+      color: "[currentColor]",
+      marginInlineEnd: "spacing.200",
+      flexShrink: 0,
+      _groupFocusWithin: {
+        layerStyle: "elevation.focus"
+      }
+    }
+  },
+  variants: {
+    hiddenLabel: {
+      true: {
+        label: {
+          display: "inline-block"
+        },
+        mark: {
+          marginInlineEnd: "spacing.000"
+        },
+        labelSpan: {
+          srOnly: !0
+        }
+      }
+    },
+    hiddenControl: {
+      true: {
+        label: {
+          position: "relative",
+          padding: "spacing.000",
+          width: "[100%]",
+          cursor: "pointer",
+          borderRadius: "radius.system.form",
+          borderColor: "colour.neutral.40",
+          borderStyle: "solid",
+          borderWidth: "1px",
+          _hover: {
+            backgroundColor: "colour.primary.surfaceHover"
+          },
+          _groupFocusWithin: {
+            layerStyle: "elevation.focus"
+          }
+        },
+        labelSpan: {
+          display: "block"
+        },
+        mark: {
+          checkmark: !1
+        }
+      }
+    },
+    touch: {
+      true: {
+        label: {
+          borderColor: "colour.neutral.40",
+          borderStyle: "solid",
+          borderWidth: "1px",
+          borderRadius: "radius.system.form",
+          padding: "spacing.300"
+        }
+      }
+    },
+    checked: {
+      true: {
+        label: {
+          borderColor: "[currentColor]"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      hiddenControl: !0,
+      checked: !0,
+      css: {
+        label: {
+          topLeftTriangle: !0
+        },
+        mark: {
+          checkmark: !0
+        }
+      }
+    }
+  ]
+});
+export {
+  o as checkbox
+};

package/dist/components/Checkbox/index.js

@@ -1,4 +1,6 @@
-import { d as r } from "../../LoadingSuspense-BtzikVZk.js";
+import { IressCheckbox as r } from "./Checkbox.js";
+import { checkbox as c } from "./Checkbox.styles.js";
 export {
-  r as IressCheckbox
+  r as IressCheckbox,
+  c as checkbox
 };

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -1,99 +1,87 @@
-import { jsx as d } from "react/jsx-runtime";
-import { c as R } from "../../index-cbHCAGLB.js";
-import { forwardRef as L, useRef as S, useImperativeHandle as V, useMemo as j } from "react";
-import { toArray as b } from "../../helpers/formatting/toArray.js";
-import { CheckboxGroupLayout as q } from "./CheckboxGroup.types.js";
-import { useControlledState as w } from "../../hooks/useControlledState.js";
-import { useNoDefaultValueInForms as A } from "../Form/hooks/useNoDefaultValueInForms.js";
-import { CheckboxGroupContext as D } from "./CheckboxGroupContext.js";
-const E = "ids-checkbox-group-v5202", H = "ids-checkbox-group--full-v5202", M = "ids-checkbox-group--block-v5202", z = "ids-checkbox-group--stack-v5202", B = "ids-checkbox-group--inline-v5202", J = "ids-checkbox-group--readonly-v5202", n = {
-  checkboxGroup: E,
-  full: H,
-  block: M,
-  stack: z,
-  "ids-checkbox": "ids-checkbox-v5202",
-  "ids-input--readonly": "ids-input--readonly-v5202",
-  "ids-checkbox--label": "ids-checkbox--label-v5202",
-  "ids-checkbox--label-span": "ids-checkbox--label-span-v5202",
-  inline: B,
-  readonly: J,
-  "ids-input-base--readonly": "ids-input-base--readonly-v5202"
-}, k = L(
-  ({
-    className: m,
-    value: u,
-    defaultValue: c,
-    children: x,
-    layout: h = "stack",
-    onChange: v,
-    onFocus: f,
-    hiddenCheckbox: l,
-    name: i,
-    role: g = "group",
-    readonly: r,
-    touch: a,
-    ...y
-  }, C) => {
-    A({
-      component: "IressCheckboxGroup",
-      defaultValue: c
-    });
-    const { value: p, setValue: G, toggleValue: s } = w({
-      component: "IressCheckbox",
-      defaultValue: c === void 0 ? void 0 : b(c),
-      multiple: !0,
-      onChange: v,
-      value: u === void 0 ? void 0 : b(u)
-    }), e = S(null), t = e.current;
-    V(C, () => ({
-      // React hook form requires the focus, blur, input
-      focus: () => t?.focus(),
-      blur: () => t?.blur(),
-      input: t,
-      check: (o) => {
-        s(o, !0);
-      },
-      reset: () => {
-        G([]);
-      }
-    }));
-    const I = j(
-      () => ({
-        hiddenCheckbox: l,
-        name: i,
-        onChange: (o, F) => {
-          s(F, o.target.checked);
-        },
-        readonly: r,
-        touch: a,
-        value: p
-      }),
-      [i, p, l, r, a, s]
-    ), N = (o) => {
-      f?.(o), o.target === e.current && e.current.querySelector("input")?.focus();
-    };
-    return /* @__PURE__ */ d(D.Provider, { value: I, children: /* @__PURE__ */ d(
-      "div",
-      {
-        ...y,
-        role: g,
-        ref: e,
-        className: R(
-          m,
-          n.checkboxGroup,
-          n[h],
-          {
-            [n.readonly]: r
-          }
-        ),
-        onFocus: N,
-        children: x
-      }
-    ) });
-  }
-);
-k.displayName = "IressCheckboxGroup";
-k.Layout = q;
+import { jsx as p } from "react/jsx-runtime";
+import { forwardRef as N, createContext as T, useRef as V, useImperativeHandle as j, useMemo as w } from "react";
+import { toArray as m } from "../../helpers/formatting/toArray.js";
+import { useControlledState as y } from "../../hooks/useControlledState.js";
+import { checkboxGroup as A } from "./CheckboxGroup.styles.js";
+import { c as D } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as E } from "../../enums.js";
+import { useNoDefaultValueInForms as H } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+function M() {
+  return T(void 0);
+}
+function _() {
+  return z;
+}
+const z = M(), J = ({
+  className: f,
+  value: n,
+  defaultValue: r,
+  children: x,
+  layout: C = "stack",
+  onBlur: v,
+  onChange: b,
+  onFocus: d,
+  hiddenCheckbox: s,
+  name: l,
+  role: h = "group",
+  readOnly: t,
+  touch: i,
+  ...k
+}, G) => {
+  H({
+    component: "IressCheckboxGroup",
+    defaultValue: r
+  });
+  const { value: a, setValue: g, toggleValue: u } = y({
+    component: "IressCheckbox",
+    defaultValue: r === void 0 ? void 0 : m(r),
+    multiple: !0,
+    onChange: b,
+    value: n === void 0 ? void 0 : m(n)
+  }), e = V(null), c = e.current;
+  j(G, () => ({
+    // React hook form requires the focus, blur, input
+    focus: () => c?.querySelector("input")?.focus(),
+    blur: () => c?.blur(),
+    input: c,
+    // Custom methods allowing you to interact with an uncontrolled checkbox group
+    check: (o) => u(o, !0),
+    reset: () => g([])
+  }));
+  const I = w(
+    () => ({
+      hiddenCheckbox: s,
+      name: l,
+      onChange: (o, q, B) => u(B, q),
+      readOnly: t,
+      touch: i,
+      value: a ?? []
+    }),
+    [l, a, s, t, i, u]
+  ), S = (o) => {
+    d?.(o), o.target === e.current && e.current.querySelector("input")?.focus();
+  }, F = (o) => {
+    o.relatedTarget && !e.current?.contains(o.relatedTarget) && v?.(o);
+  }, { Provider: R } = _();
+  return /* @__PURE__ */ p(R, { value: I, children: /* @__PURE__ */ p(
+    "div",
+    {
+      ...k,
+      role: h,
+      ref: e,
+      className: D(
+        f,
+        A({ layout: C, readOnly: t }),
+        E.CheckboxGroup
+      ),
+      onBlur: F,
+      onFocus: S,
+      children: x
+    }
+  ) });
+}, Z = N(J);
 export {
-  k as IressCheckboxGroup
+  z as CheckboxGroupContext,
+  Z as IressCheckboxGroup,
+  _ as getCheckboxGroupContext
 };

package/dist/components/CheckboxGroup/CheckboxGroup.styles.js

@@ -0,0 +1,87 @@
+import { c as a } from "../../cva-JiDXAa83.js";
+const i = a({
+  base: {
+    display: "flex",
+    flexWrap: "wrap",
+    rowGap: "spacing.200"
+  },
+  variants: {
+    layout: {
+      block: {
+        display: "flex",
+        flexWrap: "wrap",
+        rowGap: "spacing.200",
+        "& label": {
+          display: "flex",
+          flexBasis: "[100%]"
+        },
+        "& label span": {
+          flexBasis: "[100%]"
+        },
+        "& > *": {
+          flexBasis: "[100%]"
+        }
+      },
+      stack: {
+        display: "flex",
+        flexWrap: "wrap",
+        rowGap: "spacing.200",
+        "& > *": {
+          flexBasis: "[100%]"
+        }
+      },
+      inline: {
+        display: "flex",
+        flexFlow: "row wrap",
+        width: "[100%]",
+        rowGap: "spacing.200",
+        columnGap: "spacing.400"
+      }
+    },
+    readOnly: {
+      true: {}
+    }
+  },
+  compoundVariants: [
+    {
+      readOnly: !0,
+      layout: "stack",
+      css: {
+        paddingInlineStart: "spacing.400",
+        "& > *": {
+          display: "list-item"
+        }
+      }
+    },
+    {
+      readOnly: !0,
+      layout: "block",
+      css: {
+        paddingInlineStart: "spacing.400",
+        "& > *": {
+          display: "list-item"
+        }
+      }
+    },
+    {
+      readOnly: !0,
+      layout: "inline",
+      css: {
+        paddingInlineStart: "spacing.400",
+        "& > *": {
+          display: "list-item",
+          marginInlineEnd: "spacing.600"
+        },
+        "& > *:last-child": {
+          marginInlineEnd: "spacing.000"
+        }
+      }
+    }
+  ],
+  defaultVariants: {
+    layout: "stack"
+  }
+});
+export {
+  i as checkboxGroup
+};

package/dist/components/CheckboxGroup/index.js

@@ -1,7 +1,8 @@
-import { CHECKBOX_GROUP_LAYOUTS as e, CheckboxGroupLayout as p } from "./CheckboxGroup.types.js";
-import { IressCheckboxGroup as C } from "./CheckboxGroup.js";
+import { CheckboxGroupContext as r, IressCheckboxGroup as x, getCheckboxGroupContext as t } from "./CheckboxGroup.js";
+import { checkboxGroup as c } from "./CheckboxGroup.styles.js";
 export {
-  e as CHECKBOX_GROUP_LAYOUTS,
-  p as CheckboxGroupLayout,
-  C as IressCheckboxGroup
+  r as CheckboxGroupContext,
+  x as IressCheckboxGroup,
+  c as checkboxGroup,
+  t as getCheckboxGroupContext
 };

package/dist/components/CheckboxMark/CheckboxMark.js

@@ -1,40 +1,52 @@
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import { forwardRef as i } from "react";
-import { IressCheckboxStyles as e } from "./CheckboxMark.types.js";
-import { c as n } from "../../index-cbHCAGLB.js";
-const k = ({ checked: s, indeterminate: o, className: a, ...c }, t) => /* @__PURE__ */ m(
-  "svg",
-  {
-    ref: t,
-    className: n(a, e.checkboxMark, {
-      [e.indeterminate]: o,
-      [e.checked]: s
-    }),
-    ...c,
-    version: "1.1",
-    viewBox: "0 0 200 200",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: [
-      /* @__PURE__ */ r(
-        "line",
-        {
-          className: e.indeterminateMark,
-          x1: "30",
-          y1: "100",
-          x2: "170",
-          y2: "100"
-        }
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { c as o } from "../../css-fGu_jDvv.js";
+import { c as p } from "../../cx-DN21T1EH.js";
+import { checkboxMark as x } from "./CheckboxMark.styles.js";
+import { s as k } from "../../is-valid-prop-Ce0wiweq.js";
+import { GlobalCSSClass as f } from "../../enums.js";
+const d = ({
+  checked: r,
+  className: a,
+  indeterminate: t,
+  size: c,
+  ...m
+}) => {
+  const s = x.raw({ checked: r, indeterminate: t, size: c }), [l, i] = k(m);
+  return /* @__PURE__ */ n(
+    "svg",
+    {
+      className: p(
+        a,
+        o(s.root, l),
+        f.CheckboxMark
       ),
-      /* @__PURE__ */ r(
-        "polyline",
-        {
-          className: e.checkedMark,
-          points: "30 95 80 142 170 50"
-        }
-      )
-    ]
-  }
-), d = i(k);
+      "data-checked": r ? "true" : "false",
+      ...i,
+      version: "1.1",
+      viewBox: "0 0 200 200",
+      xmlns: "http://www.w3.org/2000/svg",
+      children: [
+        /* @__PURE__ */ e(
+          "line",
+          {
+            className: o(s.indeterminateMark),
+            x1: "30",
+            y1: "100",
+            x2: "170",
+            y2: "100"
+          }
+        ),
+        /* @__PURE__ */ e(
+          "polyline",
+          {
+            className: o(s.checkedMark),
+            points: "30 95 80 142 170 50"
+          }
+        )
+      ]
+    }
+  );
+};
 export {
   d as IressCheckboxMark
 };

package/dist/components/CheckboxMark/CheckboxMark.styles.js

@@ -0,0 +1,82 @@
+import { s as r } from "../../sva-OmxClA9g.js";
+const e = r({
+  slots: ["root", "indeterminateMark", "checkedMark"],
+  base: {
+    root: {
+      display: "inline-flex",
+      position: "relative",
+      width: "[calc(1.5 * {sizes.typography.base})]",
+      minWidth: "[calc(1.5 * {sizes.typography.base})]",
+      height: "[calc(1.5 * {sizes.typography.base})]",
+      borderWidth: "1px",
+      borderStyle: "solid",
+      borderColor: "colour.neutral.70",
+      borderRadius: "radius.025",
+      bg: "colour.neutral.10",
+      transitionProperty: "[all]",
+      transitionDuration: "0.2s",
+      transitionTimingFunction: "ease-out",
+      color: "colour.primary.fill",
+      _hover: {
+        bg: "colour.primary.surfaceHover"
+      }
+    },
+    indeterminateMark: {
+      stroke: "colour.primary.onFill",
+      fill: "[transparent]",
+      strokeWidth: 22,
+      display: "none"
+    },
+    checkedMark: {
+      stroke: "colour.neutral.10",
+      fill: "[transparent]",
+      strokeWidth: 22,
+      display: "none"
+    }
+  },
+  variants: {
+    indeterminate: {
+      true: {
+        root: {
+          bg: "[currentColor]",
+          borderColor: "[currentColor]",
+          _hover: {
+            borderColor: "colour.primary.fillHover",
+            bg: "colour.primary.fillHover",
+            stroke: "colour.primary.onFill"
+          }
+        },
+        indeterminateMark: {
+          display: "revert"
+        }
+      }
+    },
+    checked: {
+      true: {
+        root: {
+          bg: "[currentColor]",
+          borderColor: "[currentColor]",
+          _hover: {
+            borderColor: "colour.primary.fillHover",
+            bg: "colour.primary.fillHover",
+            stroke: "colour.primary.onFill"
+          }
+        },
+        checkedMark: {
+          display: "revert"
+        }
+      }
+    },
+    size: {
+      sm: {
+        root: {
+          width: "[calc(1.25 * {sizes.typography.base})]",
+          height: "[calc(1.25 * {sizes.typography.base})]"
+        }
+      }
+    }
+  }
+});
+export {
+  e as checkboxMark
+};

package/dist/components/CheckboxMark/index.js

@@ -1,6 +1,6 @@
-import { IressCheckboxStyles as o } from "./CheckboxMark.types.js";
-import { IressCheckboxMark as x } from "./CheckboxMark.js";
+import { IressCheckboxMark as e } from "./CheckboxMark.js";
+import { checkboxMark as x } from "./CheckboxMark.styles.js";
 export {
-  x as IressCheckboxMark,
-  o as IressCheckboxStyles
+  e as IressCheckboxMark,
+  x as checkboxMark
 };

package/dist/components/Col/Col.js

@@ -1,33 +1,9 @@
 import { jsx as m } from "react/jsx-runtime";
-import { c as p } from "../../index-cbHCAGLB.js";
-import { ColCssClass as s, ColAlignSelf as n, ColOffset as C, ColSpan as S } from "./Col.types.js";
-import { getResponsiveLayoutModifiers as f } from "../../helpers/responsive/getResponsiveLayoutModifiers.js";
-const o = ({
-  alignSelf: e,
-  children: l,
-  className: t,
-  offset: a,
-  span: r = "auto",
-  ...i
-}) => /* @__PURE__ */ m(
-  "div",
-  {
-    className: p(
-      t,
-      s.Base,
-      f(s.Span, r, "12"),
-      f(s.Offset, a),
-      {
-        [`${s.AlignSelf}--${e}`]: !!e
-      }
-    ),
-    ...i,
-    children: l
-  }
-);
-o.AlignSelf = n;
-o.Offset = C;
-o.Span = S;
+import { s as r } from "../../factory-oPXoMw9H.js";
+import { col as t } from "./Col.styles.js";
+import { c as l } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as p } from "../../enums.js";
+const a = r("div", t), n = ({ className: o, ...s }) => /* @__PURE__ */ m(a, { ...s, className: l(o, p.Col) });
 export {
-  o as IressCol
+  n as IressCol
 };

package/dist/components/Col/Col.styles.js

@@ -0,0 +1,28 @@
+import { c as a } from "../../cva-JiDXAa83.js";
+const t = a({
+  base: {
+    display: "block",
+    boxSizing: "border-box",
+    span: "auto"
+  },
+  variants: {
+    alignSelf: {
+      start: {
+        alignSelf: "start"
+      },
+      end: {
+        alignSelf: "end"
+      },
+      center: {
+        alignSelf: "center"
+      },
+      stretch: {
+        alignSelf: "stretch"
+      }
+    }
+  },
+  defaultVariants: {}
+});
+export {
+  t as col
+};