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

package/dist/components/ButtonGroup/ButtonGroupProvider.js

@@ -1,34 +1,41 @@
-import { jsx as d } from "react/jsx-runtime";
-import { createContext as p, useMemo as m } from "react";
-import { toArray as r } from "../../helpers/formatting/toArray.js";
-import { useControlledState as i } from "../../hooks/useControlledState.js";
-const v = p(void 0), B = ({
-  children: s,
+import { jsx as a } from "react/jsx-runtime";
+import { createContext as i, useMemo as m } from "react";
+import { toArray as d } from "../../helpers/formatting/toArray.js";
+import { useControlledState as f } from "../../hooks/useControlledState.js";
+function v() {
+  return i(
+    void 0
+  );
+}
+function x() {
+  return g;
+}
+const g = v(), P = ({
+  children: r,
   defaultSelected: n,
-  multiple: l,
-  onChange: u,
-  selected: c
+  multiple: u = !1,
+  onChange: c,
+  selected: s
 }) => {
-  const { value: t, toggleValue: o } = i({
+  const { value: t, toggleValue: e } = f({
     component: "IressButtonGroup",
     defaultValue: n,
-    multiple: l,
-    onChange: (e) => {
-      u?.({ selected: e });
-    },
+    multiple: u,
+    onChange: c,
     propName: "selected",
-    value: c
-  }), a = m(
+    value: s
+  }), l = m(
     () => ({
-      isActive: (e) => !!(e && r(t).includes(e)),
-      toggle: o,
-      selected: r(t)
+      isActive: (o) => !!(o && d(t).includes(o)),
+      toggle: e,
+      selected: t
     }),
-    [o, t]
-  );
-  return /* @__PURE__ */ d(v.Provider, { value: a, children: s });
+    [e, t]
+  ), { Provider: p } = x();
+  return /* @__PURE__ */ a(p, { value: l, children: r });
 };
 export {
-  v as ButtonGroupContext,
-  B as IressButtonGroupProvider
+  g as ButtonGroupContext,
+  P as ButtonGroupProvider,
+  x as getButtonGroupContext
 };

package/dist/components/ButtonGroup/hooks/useButtonGroupItem.js

@@ -0,0 +1,21 @@
+import { useContext as e } from "react";
+import { ButtonGroupContext as i } from "../ButtonGroupProvider.js";
+const p = ({
+  value: t
+}) => {
+  const o = e(i);
+  if (!o) return;
+  const r = o.isActive(t);
+  return {
+    active: r,
+    props: {
+      "aria-pressed": r
+    },
+    toggle() {
+      t !== void 0 && o?.toggle?.(t, !r);
+    }
+  };
+};
+export {
+  p as useButtonGroupItem
+};

package/dist/components/ButtonGroup/index.js

@@ -1,6 +1,8 @@
 import { IressButtonGroup as t } from "./ButtonGroup.js";
-import { u as e } from "../../useIDSButtonGroupItem-YYpF5FzH.js";
+import { buttonGroup as e } from "./ButtonGroup.styles.js";
+import { useButtonGroupItem as m } from "./hooks/useButtonGroupItem.js";
 export {
   t as IressButtonGroup,
-  e as useIDSButtonGroupItem
+  e as buttonGroup,
+  m as useButtonGroupItem
 };

package/dist/components/Card/Card.js

@@ -1,50 +1,102 @@
-import { jsx as a } from "react/jsx-runtime";
-import { PaddingSize as i, HeadingLevel as r } from "../../enums.js";
-import { composeIDSCard as h } from "./helpers/composeIDSCard.js";
-import { composeIDSCardSlots as k } from "./helpers/composeIDSCardSlots.js";
-import { HeadingWithDeprecatedFallback as D } from "../HeadingWithDeprecatedFallback/HeadingWithDeprecatedFallback.js";
-const t = ({
-  className: n,
-  padding: c = i.Md,
-  selected: m,
-  stretch: s,
-  children: l,
+import { jsx as t, jsxs as k, Fragment as P } from "react/jsx-runtime";
+import { s as j } from "../../is-valid-prop-Ce0wiweq.js";
+import { card as M } from "./Card.styles.js";
+import { c as e } from "../../css-fGu_jDvv.js";
+import { c as w } from "../../cx-DN21T1EH.js";
+import { propagateTestid as r } from "../../helpers/utility/propagateTestid.js";
+import { useMemo as B } from "react";
+import { GlobalCSSClass as F } from "../../enums.js";
+const y = ({
+  element: s,
+  className: c,
+  selected: l,
+  stretch: C,
+  children: m,
   footer: p,
-  heading: d,
-  headingLevel: g = r.H2,
-  headingText: e,
-  media: f,
-  prepend: C,
-  topRight: H,
-  ...o
+  heading: h,
+  media: n,
+  prepend: i,
+  topRight: f,
+  ...v
 }) => {
-  const v = d || e ? /* @__PURE__ */ a(
-    D,
+  const d = typeof h == "string" ? /* @__PURE__ */ t("h2", { children: h }) : h, b = !!i, u = !!(i ?? f ?? n ?? d ?? p), N = !!d, I = !!n, S = s == "button" || s == "a" || !!v.onClick, a = M.raw({
+    clickable: S,
+    // Convert the element to a string for compatibility with the card.raw function
+    element: String(s),
+    selected: l,
+    stretch: C,
+    hasSlots: u,
+    hasHeading: N,
+    hasMedia: I,
+    hasPrepend: b
+  }), o = v["data-testid"], [g, x] = j(v), E = B(() => s ?? "div", [s]);
+  return /* @__PURE__ */ t(
+    E,
     {
-      component: "IressCard",
-      heading: d,
-      headingText: e,
-      HeadingTag: g
+      ...x,
+      className: w(
+        e(a.root, g),
+        c,
+        F.Card
+      ),
+      children: u ? /* @__PURE__ */ k(P, { children: [
+        i && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e(a.prepend),
+            "data-testid": r(o, "prepend"),
+            children: i
+          }
+        ),
+        f && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e(a.topRight),
+            "data-testid": r(o, "topRight"),
+            children: f
+          }
+        ),
+        n && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e(a.media),
+            "data-testid": r(o, "media"),
+            children: n
+          }
+        ),
+        d && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e(a.heading),
+            "data-testid": r(o, "heading"),
+            children: d
+          }
+        ),
+        m && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e(a.body),
+            "data-testid": r(o, "body"),
+            children: m
+          }
+        ),
+        p && /* @__PURE__ */ t(
+          "div",
+          {
+            className: e(a.footer),
+            "data-testid": r(o, "footer"),
+            children: p
+          }
+        )
+      ] }) : m
     }
-  ) : void 0, I = h({
-    className: n,
-    clickable: !!o.onClick,
-    padding: c,
-    selected: m,
-    stretch: s
-  }), S = k({
-    children: l,
-    "data-testid": o["data-testid"],
-    footer: p,
-    heading: v,
-    media: f,
-    prepend: C,
-    topRight: H
-  });
-  return /* @__PURE__ */ a("div", { ...o, ...I, children: S });
-};
-t.HeadingLevel = r;
-t.Padding = i;
+  );
+}, K = (s) => {
+  const { type: c = "button", ...l } = s;
+  return /* @__PURE__ */ t(y, { element: "button", type: c, ...l });
+}, O = (s) => /* @__PURE__ */ t(y, { element: "a", ...s });
 export {
-  t as IressCard
+  K as IressButtonCard,
+  y as IressCard,
+  O as IressLinkCard
 };

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

@@ -0,0 +1,209 @@
+import { s as t } from "../../sva-OmxClA9g.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,126 @@
-import "react/jsx-runtime";
-import "../../index-cbHCAGLB.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-BtzikVZk.js";
-import "../../hooks/useControlledState.js";
-import "../Form/hooks/useNoDefaultValueInForms.js";
-import "../CheckboxGroup/CheckboxGroupContext.js";
-import "../../helpers/formatting/toArray.js";
+import { jsx as c, jsxs as I } from "react/jsx-runtime";
+import { forwardRef as K, useRef as L, useId as Q, useState as W, useContext as X, useCallback as Y, useImperativeHandle as Z } from "react";
+import { getFormControlValueAsString as g } from "../../helpers/form/getFormControlValueAsString.js";
+import { IressCheckboxMark as _ } from "../CheckboxMark/CheckboxMark.js";
+import "../CheckboxMark/CheckboxMark.styles.js";
+import { useControlledState as $ } from "../../hooks/useControlledState.js";
+import { IressReadonly as ee } from "../Readonly/Readonly.js";
+import "../Readonly/Readonly.styles.js";
+import { checkbox as oe } from "./Checkbox.styles.js";
+import { c as l } from "../../css-fGu_jDvv.js";
+import { c as y } from "../../cx-DN21T1EH.js";
+import { propagateTestid as te } from "../../helpers/utility/propagateTestid.js";
+import { getCheckboxGroupContext as se } from "../CheckboxGroup/CheckboxGroup.js";
+import "../CheckboxGroup/CheckboxGroup.styles.js";
+import { GlobalCSSClass as i } from "../../enums.js";
+import { s as F } from "../../factory-oPXoMw9H.js";
+import { s as re } from "../../is-valid-prop-Ce0wiweq.js";
+import { IressText as ne } from "../Text/Text.js";
+import { useNoDefaultValueInForms as ce } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+const ae = ({
+  checked: S,
+  className: V,
+  defaultChecked: d,
+  hiddenControl: N,
+  hiddenLabel: R,
+  indeterminate: u,
+  id: G,
+  name: v,
+  onChange: p,
+  value: o,
+  children: h,
+  readOnly: w,
+  touch: j,
+  "data-testid": f,
+  ...k
+}, E) => {
+  ce({
+    component: "IressCheckbox",
+    defaultValue: d,
+    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 = L(null), a = C.current, H = Q(), b = G ?? H, [M, P] = W(
+    u ?? !1
+  ), e = X(se()), T = e ? void 0 : d, q = e?.hiddenCheckbox ?? N, A = e?.touch ?? j, D = e?.readOnly ?? w, O = e?.name ?? v;
+  let m = S;
+  e && o ? m = e.value.includes(o) : !e && typeof o == "boolean" && (m = o);
+  const {
+    value: t,
+    setValue: x,
+    isControlled: s
+  } = $({
+    component: "IressCheckbox",
+    propName: "checked",
+    defaultValue: T,
+    value: m
+  }), U = s ? u : M, z = Y(
+    (n) => {
+      s || P(!1), x(n.target.checked), p?.(n, n.target.checked, o), e?.onChange?.(n, n.target.checked, o);
+    },
+    [e, s, p, x, o]
+  );
+  if (Z(E, () => ({
+    focus: () => a?.focus(),
+    blur: () => a?.blur(),
+    input: a
+  })), D)
+    return t ? /* @__PURE__ */ c(
+      ee,
+      {
+        ...k,
+        width: void 0,
+        value: g(o),
+        children: h
+      }
+    ) : null;
+  const r = oe.raw({
+    hiddenControl: q,
+    hiddenLabel: R,
+    touch: A,
+    checked: t
+  }), [B, J] = re(k);
+  return /* @__PURE__ */ I(
+    "div",
+    {
+      "data-testid": f,
+      className: y(
+        V,
+        l(r.root, B),
+        i.Group,
+        i.Checkbox
+      ),
+      children: [
+        /* @__PURE__ */ c(
+          F.input,
+          {
+            ...J,
+            ...r.input,
+            value: g(o),
+            type: "checkbox",
+            id: b,
+            defaultChecked: s ? void 0 : t,
+            checked: s ? t : void 0,
+            onChange: z,
+            ref: C,
+            name: O
+          }
+        ),
+        /* @__PURE__ */ I(F.label, { htmlFor: b, ...r.label, children: [
+          /* @__PURE__ */ c(
+            _,
+            {
+              className: y(l(r.mark), i.FormElement),
+              checked: t,
+              indeterminate: U,
+              "data-testid": te(f, "checkboxMark")
+            }
+          ),
+          /* @__PURE__ */ c(ne, { element: "span", className: l(r.labelSpan), children: h })
+        ] })
+      ]
+    }
+  );
+}, Re = K(ae);
 export {
-  f as IressCheckbox
+  Re as IressCheckbox
 };