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

package/dist/components/Card/Card.styles.js

@@ -0,0 +1,209 @@
+import { s as t } from "../../sva-TRyehFkb.js";
+const e = t({
+  slots: ["root", "prepend", "heading", "topRight", "media", "body", "footer"],
+  base: {
+    root: {
+      position: "relative",
+      borderRadius: "radius.system.layout",
+      bg: "colour.neutral.10",
+      color: "colour.neutral.80",
+      layerStyle: "elevation.raised",
+      textStyle: "typography.body.md.regular",
+      textAlign: "start",
+      noGutter: !0,
+      padding: "spacing.400",
+      transition: "all",
+      _focus: {
+        layerStyle: "elevation.focus"
+      }
+    },
+    prepend: {
+      gridArea: "prepend",
+      padding: "spacing.400"
+    },
+    heading: {
+      gridArea: "heading",
+      padding: "spacing.400",
+      "& > h1:not([class]), & > h2:not([class]), & > h3:not([class]), & > h4:not([class]), & > h5:not([class]), & > h6:not([class])": {
+        textStyle: "typography.heading.4",
+        mb: "spacing.000"
+      },
+      "& a": {
+        color: "colour.primary.text",
+        textDecoration: "underline",
+        _hover: {
+          textDecoration: "none"
+        }
+      }
+    },
+    topRight: {
+      gridArea: "topRight",
+      padding: "spacing.200"
+    },
+    media: {
+      gridArea: "media",
+      padding: "spacing.000",
+      borderRadius: "radius.system.layout",
+      overflow: "hidden",
+      "& img": {
+        display: "block",
+        width: "[100%]",
+        height: "auto",
+        maxWidth: "[100%]"
+      },
+      "&:not(:last-child)": {
+        borderBottomRadius: "radius.000"
+      }
+    },
+    body: {
+      gridArea: "body",
+      padding: "spacing.400"
+    },
+    footer: {
+      gridArea: "footer",
+      padding: "spacing.400",
+      borderBlockStart: "divider"
+    }
+  },
+  variants: {
+    clickable: {
+      true: {
+        root: {
+          cursor: "pointer",
+          _hover: {
+            borderColor: "colour.primary.fill"
+          },
+          _focus: {
+            layerStyle: "elevation.focus",
+            outline: "[none]"
+          }
+        }
+      }
+    },
+    element: {
+      a: {},
+      button: {
+        root: {
+          width: "[100%]"
+        }
+      },
+      div: {}
+    },
+    selected: {
+      true: {
+        root: {
+          borderWidth: "[0px]",
+          borderColor: "colour.primary.fill",
+          _after: {
+            content: '""',
+            position: "absolute",
+            inset: "[0]",
+            borderColor: "colour.primary.fill",
+            borderStyle: "solid",
+            borderWidth: "[2px]",
+            borderRadius: "radius.system.form",
+            pointerEvents: "[none]"
+          }
+        }
+      }
+    },
+    stretch: {
+      true: {
+        root: {
+          flex: "1",
+          width: "[100%]",
+          stretch: !0
+        }
+      }
+    },
+    hasSlots: {
+      true: {
+        root: {
+          display: "grid",
+          gridTemplateAreas: '"prepend body topRight" "footer footer footer"',
+          gridAutoColumns: "[minmax(0, min-content) auto min-content]",
+          gridAutoRows: "[auto min-content]",
+          padding: "spacing.000"
+        }
+      }
+    },
+    hasPrepend: {
+      true: {}
+    },
+    hasHeading: {
+      true: {}
+    },
+    hasMedia: {
+      true: {
+        root: {
+          padding: "spacing.000"
+        }
+      }
+    }
+  },
+  compoundVariants: [
+    {
+      hasSlots: !0,
+      hasHeading: !0,
+      css: {
+        root: {
+          gridTemplateAreas: '"prepend heading topRight" "prepend body body" "footer footer footer"',
+          gridAutoColumns: "[minmax(0, min-content) auto min-content]",
+          gridAutoRows: "[min-content auto min-content]"
+        },
+        heading: {
+          "&:not(:last-child)": {
+            paddingBlockEnd: "spacing.200"
+          }
+        },
+        body: {
+          paddingBlockStart: "spacing.000"
+        }
+      }
+    },
+    {
+      hasSlots: !0,
+      hasMedia: !0,
+      css: {
+        root: {
+          gridTemplateAreas: '"prepend media media" "prepend body topRight" "footer footer footer"',
+          gridAutoColumns: "[minmax(0, min-content) auto]",
+          gridAutoRows: "[min-content auto min-content]",
+          position: "relative",
+          padding: "spacing.000"
+        }
+      }
+    },
+    {
+      hasSlots: !0,
+      hasHeading: !0,
+      hasMedia: !0,
+      css: {
+        root: {
+          gridTemplateAreas: '"prepend media media" "prepend heading topRight" "prepend body body" "footer footer footer"',
+          gridAutoColumns: "[minmax(0, min-content) auto]",
+          gridAutoRows: "[min-content min-content auto min-content]"
+        },
+        topRight: {
+          pt: "spacing.250"
+        }
+      }
+    },
+    {
+      hasSlots: !0,
+      hasPrepend: !0,
+      css: {
+        heading: {
+          paddingInlineStart: "spacing.000"
+        },
+        body: {
+          paddingInlineStart: "spacing.000"
+        }
+      }
+    }
+  ],
+  defaultVariants: {}
+});
+export {
+  e as card
+};

package/dist/components/Card/index.js

@@ -1,15 +1,8 @@
-import { CardCssClass as s, CardSlotClass as e } from "./Card.types.js";
-import { IressCard as C } from "./Card.js";
-import { IressButtonCard as m } from "./components/ButtonCard.js";
-import { IressLinkCard as d } from "./components/LinkCard.js";
-import { composeIDSCard as x } from "./helpers/composeIDSCard.js";
-import { composeIDSCardSlots as l } from "./helpers/composeIDSCardSlots.js";
+import { IressButtonCard as e, IressCard as o, IressLinkCard as a } from "./Card.js";
+import { card as t } from "./Card.styles.js";
 export {
-  s as CardCssClass,
-  e as CardSlotClass,
-  m as IressButtonCard,
-  C as IressCard,
-  d as IressLinkCard,
-  x as composeIDSCard,
-  l as composeIDSCardSlots
+  e as IressButtonCard,
+  o as IressCard,
+  a as IressLinkCard,
+  t as card
 };

package/dist/components/Checkbox/Checkbox.js

@@ -1,15 +1,127 @@
-import "react/jsx-runtime";
-import "../../index-2QXL0WYc.js";
-import "react";
-import "../../enums.js";
-import "../../helpers/form/getFormControlValueAsString.js";
-import "../CheckboxMark/CheckboxMark.types.js";
-import "../CheckboxMark/CheckboxMark.js";
-import { d as f } from "../../LoadingSuspense-D0TO0TDT.js";
-import "../../hooks/useControlledState.js";
-import "../Form/hooks/useNoDefaultValueInForms.js";
-import "../CheckboxGroup/CheckboxGroupContext.js";
-import "../../helpers/formatting/toArray.js";
+import { jsx as m, jsxs as y } from "react/jsx-runtime";
+import { forwardRef as W, useRef as X, useId as Y, useState as Z, useContext as _, useCallback as $, useImperativeHandle as E } from "react";
+import { getFormControlValueAsString as b } from "../../helpers/form/getFormControlValueAsString.js";
+import { IressCheckboxMark as G } from "../CheckboxMark/CheckboxMark.js";
+import "../CheckboxMark/CheckboxMark.styles.js";
+import { useControlledState as ee } from "../../hooks/useControlledState.js";
+import { IressReadonly as te } from "../Readonly/Readonly.js";
+import "../Readonly/Readonly.styles.js";
+import { checkbox as oe } from "./Checkbox.styles.js";
+import { c as l } from "../../cva-B2x59Dph.js";
+import { c as g } from "../../cx-DN21T1EH.js";
+import { propagateTestid as se } from "../../helpers/utility/propagateTestid.js";
+import { getCheckboxGroupContext as re } from "../CheckboxGroup/CheckboxGroup.js";
+import "../CheckboxGroup/CheckboxGroup.styles.js";
+import { GlobalCSSClass as d } from "../../enums.js";
+import { s as F } from "../../factory-DHLOr79I.js";
+import { s as ne } from "../../is-valid-prop-DFFvE05x.js";
+import { IressText as ae } from "../Text/Text.js";
+import { useNoDefaultValueInForms as ie } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+const me = ({
+  checked: S,
+  className: V,
+  defaultChecked: c,
+  hiddenControl: v,
+  hiddenLabel: N,
+  indeterminate: p,
+  id: R,
+  name: w,
+  onChange: i,
+  value: t,
+  children: u,
+  readOnly: P,
+  touch: j,
+  "data-testid": f,
+  ...h
+}, H) => {
+  ie({
+    component: "IressCheckbox",
+    defaultValue: c,
+    message: "Using the `defaultChecked` prop on an `IressCheckbox` inside an `IressForm` component is not supported. Please use the `defaultValue` prop on the `IressFormField`, or use `defaultValues` on the `IressForm` component (recommended) to ensure a single source of truth for your form."
+  });
+  const C = X(null), o = C.current, M = Y(), k = R ?? M, [T, q] = Z(
+    p ?? !1
+  ), e = _(re()), A = e ? void 0 : c, D = e && t ? e.value.includes(t) : S, O = (e == null ? void 0 : e.hiddenCheckbox) ?? v, U = (e == null ? void 0 : e.touch) ?? j, z = (e == null ? void 0 : e.readOnly) ?? P, B = (e == null ? void 0 : e.name) ?? w, {
+    value: s,
+    setValue: I,
+    isControlled: r
+  } = ee({
+    component: "IressCheckbox",
+    propName: "checked",
+    defaultValue: A,
+    value: D
+  }), J = r ? p : T, K = $(
+    (a) => {
+      var x;
+      r || q(!1), I(a.target.checked), i == null || i(a, a.target.checked, t), (x = e == null ? void 0 : e.onChange) == null || x.call(e, a, a.target.checked, t);
+    },
+    [e, r, i, I, t]
+  );
+  if (E(H, () => ({
+    focus: () => o == null ? void 0 : o.focus(),
+    blur: () => o == null ? void 0 : o.blur(),
+    input: o,
+    extras: {
+      valueProp: "checked"
+    }
+  })), z)
+    return s ? /* @__PURE__ */ m(
+      te,
+      {
+        ...h,
+        width: void 0,
+        value: b(t),
+        children: u
+      }
+    ) : null;
+  const n = oe.raw({
+    hiddenControl: O,
+    hiddenLabel: N,
+    touch: U,
+    checked: s
+  }), [L, Q] = ne(h);
+  return /* @__PURE__ */ y(
+    "div",
+    {
+      "data-testid": f,
+      className: g(
+        V,
+        l(n.root, L),
+        d.Group,
+        d.Checkbox
+      ),
+      children: [
+        /* @__PURE__ */ m(
+          F.input,
+          {
+            ...Q,
+            ...n.input,
+            value: b(t),
+            type: "checkbox",
+            id: k,
+            defaultChecked: r ? void 0 : s,
+            checked: r ? s : void 0,
+            onChange: K,
+            ref: C,
+            name: B
+          }
+        ),
+        /* @__PURE__ */ y(F.label, { htmlFor: k, ...n.label, children: [
+          /* @__PURE__ */ m(
+            G,
+            {
+              className: g(l(n.mark), d.FormElement),
+              checked: s,
+              indeterminate: J,
+              "data-testid": se(f, "checkboxMark")
+            }
+          ),
+          /* @__PURE__ */ m(ae, { element: "span", className: l(n.labelSpan), children: u })
+        ] })
+      ]
+    }
+  );
+}, Re = W(me);
 export {
-  f as IressCheckbox
+  Re as IressCheckbox
 };

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

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