@iress-oss/ids-components 6.0.0-alpha.3 → 6.0.0-alpha.30

package/dist/components/Checkbox/Checkbox.js

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

package/dist/components/Checkbox/Checkbox.styles.d.ts

@@ -0,0 +1,68 @@
+export declare const checkbox: import('../../styled-system/types').SlotRecipeRuntimeFn<"label" | "input" | "mark" | "content" | "heading" | "root", {
+    hiddenLabel: {
+        true: {
+            label: {
+                display: "inline-block";
+            };
+            mark: {
+                marginInlineEnd: "spacing.0";
+            };
+            content: {
+                srOnly: true;
+            };
+        };
+    };
+    checked: {
+        true: {
+            label: {
+                borderColor: "[currentColor]";
+            };
+        };
+    };
+    variant: {
+        card: {
+            root: {
+                textStyle: "typography.body.md";
+            };
+            label: {
+                p: "spacing.4";
+                width: "12/12";
+                cursor: "pointer";
+                borderRadius: "radius.system.layout";
+                border: "table";
+                display: "flex";
+                flexDirection: "row-reverse";
+                _hover: {
+                    backgroundColor: "colour.neutral.20";
+                };
+            };
+            content: {
+                flex: "1";
+            };
+            mark: {
+                flex: "[0]";
+                mr: "none";
+                focusable: "true";
+            };
+            input: {
+                focusable: "label-after";
+            };
+        };
+        touch: {
+            label: {
+                border: "table";
+                borderRadius: "radius.system.form";
+                p: "spacing.3";
+                _hover: {
+                    bg: "colour.neutral.20";
+                };
+            };
+            mark: {
+                focusable: "true";
+            };
+            input: {
+                focusable: "label-after";
+            };
+        };
+    };
+}>;

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

@@ -1,41 +1,45 @@
-import { s as r } from "../../sva-OmxClA9g.js";
-const o = r({
-  slots: [
-    "formElement",
-    "input",
-    "srOnly",
-    "root",
-    "label",
-    "labelSpan",
-    "mark",
-    "hiddenControl",
-    "touch"
-  ],
+import { s as e } from "../../sva-CsHRIRDW.js";
+const o = e({
+  slots: ["root", "label", "content", "mark", "heading", "input"],
   base: {
-    formElement: {},
     root: {
+      // Performance: CSS containment (no paint to allow focus ring/shadow)
+      contain: "layout style",
       color: "colour.primary.fill",
       display: "flex",
-      position: "relative"
-    },
-    input: {
-      srOnly: !0
+      position: "relative",
+      textStyle: "typography.body.md.medium",
+      "&:has(input:disabled)": {
+        cursor: "not-allowed",
+        "& label": {
+          pointerEvents: "none"
+        }
+      }
     },
     label: {
-      position: "relative",
       lineHeight: "1.5",
       margin: "spacing.0",
       display: "inline-flex",
       cursor: "pointer"
     },
-    labelSpan: {},
+    heading: {
+      display: "block"
+    },
+    content: {
+      font: "inherit",
+      color: "colour.neutral.90"
+    },
     mark: {
       color: "[currentColor]",
       marginInlineEnd: "spacing.2",
       flexShrink: 0,
-      _groupFocusWithin: {
-        layerStyle: "elevation.focus"
+      focusable: "group",
+      ".group:has(input:disabled) &": {
+        opacity: "[0.5]"
       }
+    },
+    input: {
+      srOnly: !0
     }
   },
   variants: {
@@ -47,66 +51,72 @@ const o = r({
         mark: {
           marginInlineEnd: "spacing.0"
         },
-        labelSpan: {
+        content: {
           srOnly: !0
         }
       }
     },
-    hiddenControl: {
+    checked: {
       true: {
         label: {
-          position: "relative",
-          padding: "spacing.0",
-          width: "[100%]",
+          borderColor: "[currentColor]"
+        }
+      }
+    },
+    variant: {
+      card: {
+        root: {
+          textStyle: "typography.body.md"
+        },
+        label: {
+          p: "spacing.4",
+          width: "12/12",
           cursor: "pointer",
-          borderRadius: "radius.system.form",
-          borderColor: "colour.neutral.40",
-          borderStyle: "solid",
-          borderWidth: "1px",
+          borderRadius: "radius.system.layout",
+          border: "table",
+          display: "flex",
+          flexDirection: "row-reverse",
           _hover: {
-            backgroundColor: "colour.primary.surfaceHover"
-          },
-          _groupFocusWithin: {
-            layerStyle: "elevation.focus"
+            backgroundColor: "colour.neutral.20"
           }
         },
-        labelSpan: {
-          display: "block"
+        content: {
+          flex: "1"
         },
         mark: {
-          checkmark: !1
+          flex: "[0]",
+          mr: "none",
+          focusable: "true"
+        },
+        input: {
+          focusable: "label-after"
         }
-      }
-    },
-    touch: {
-      true: {
+      },
+      touch: {
         label: {
-          borderColor: "colour.neutral.40",
-          borderStyle: "solid",
-          borderWidth: "1px",
+          border: "table",
           borderRadius: "radius.system.form",
-          padding: "spacing.3"
-        }
-      }
-    },
-    checked: {
-      true: {
-        label: {
-          borderColor: "[currentColor]"
+          p: "spacing.3",
+          _hover: {
+            bg: "colour.neutral.20"
+          }
+        },
+        mark: {
+          focusable: "true"
+        },
+        input: {
+          focusable: "label-after"
         }
       }
     }
   },
   compoundVariants: [
     {
-      hiddenControl: !0,
+      variant: ["card", "touch"],
       checked: !0,
       css: {
         label: {
-          topLeftTriangle: !0
-        },
-        mark: {
-          checkmark: !0
+          borderWidth: "2px"
         }
       }
     }

package/dist/components/CheckboxGroup/CheckboxGroup.d.ts

@@ -0,0 +1,56 @@
+import { ReactNode, ForwardedRef, ReactElement } from 'react';
+import { FormControlValue, IressStyledProps } from '../../types';
+import { IressCheckboxProps, CheckboxVariants } from '../Checkbox/Checkbox';
+import { ReactHookFormCompatibleRef } from '../../interfaces';
+export interface IressCheckboxGroupProps<T = FormControlValue> extends Omit<IressStyledProps, 'defaultValue' | 'onChange' | 'color'> {
+    /**
+     * Content to be displayed inside the group, usually multiple `IressCheckbox`.
+     */
+    children?: ReactNode;
+    /**
+     * Value of checkbox group when in uncontrolled mode.
+     */
+    defaultValue?: T | T[];
+    /**
+     * Sets which of the block / inline layout options apply.
+     * @default 'stack'
+     */
+    layout?: 'stack' | 'block' | 'inline';
+    /**
+     * Name to be applied to all checkboxes in the group.
+     */
+    name?: string;
+    /**
+     * Called with collated new value when a user toggles one of its children checkboxes.
+     */
+    onChange?: (value?: T[]) => void;
+    /**
+     * Renders the group in a read-only state.
+     */
+    readOnly?: boolean;
+    /**
+     * Value of checkbox group when in controlled mode.
+     */
+    value?: T | T[];
+    /**
+     * The visual variant of the checkboxes in the group. This is passed down to child checkboxes, but can be overridden at the individual checkbox level.
+     * - `card`: Provides a larger, card-like style with a heading slot.
+     * - `touch`: Provides a larger, button-like style, great for mobile devices.
+     * - `undefined`: The default checkbox style.
+     */
+    variant?: CheckboxVariants;
+}
+export interface CheckboxGroupRef<T = FormControlValue> extends ReactHookFormCompatibleRef<HTMLDivElement> {
+    check: (checked: T) => void;
+    reset: () => void;
+}
+export type CheckboxGroupContextValue<T = FormControlValue> = Pick<IressCheckboxGroupProps<T>, 'name' | 'readOnly' | 'variant'> & Pick<IressCheckboxProps<T>, 'onChange'> & {
+    value: T[];
+};
+export declare function getCheckboxGroupContext<T = FormControlValue>(): React.Context<CheckboxGroupContextValue<T>>;
+export declare const CheckboxGroupContext: import('react').Context<CheckboxGroupContextValue<FormControlValue> | undefined>;
+export declare const IressCheckboxGroup: (<T = FormControlValue>(props: IressCheckboxGroupProps<T> & {
+    ref?: ForwardedRef<CheckboxGroupRef<T>>;
+}) => ReactElement) & {
+    displayName: "IressCheckboxGroup";
+};

package/dist/components/CheckboxGroup/CheckboxGroup.js

@@ -1,87 +1,86 @@
 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);
+import { forwardRef as q, createContext as y, useRef as B, useImperativeHandle as T, useMemo as V } from "react";
+import { toArray as a } from "../../helpers/formatting/toArray.js";
+import { useControlledState as j } from "../../hooks/useControlledState.js";
+import { checkboxGroup as w } from "./CheckboxGroup.styles.js";
+import { c as A } from "../../cx-DN21T1EH.js";
+import { GlobalCSSClass as D } from "../../enums.js";
+import { useNoDefaultValueInForms as E } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+function H() {
+  return y(void 0);
 }
-function _() {
-  return z;
+function M() {
+  return _;
 }
-const z = M(), J = ({
-  className: f,
+const _ = H(), z = ({
+  className: m,
   value: n,
   defaultValue: r,
-  children: x,
-  layout: C = "stack",
-  onBlur: v,
-  onChange: b,
+  children: f,
+  layout: x = "stack",
+  onBlur: C,
+  onChange: h,
   onFocus: d,
-  hiddenCheckbox: s,
-  name: l,
-  role: h = "group",
+  name: s,
+  role: b = "group",
   readOnly: t,
-  touch: i,
+  variant: l,
   ...k
-}, G) => {
-  H({
+}, v) => {
+  E({
     component: "IressCheckboxGroup",
     defaultValue: r
   });
-  const { value: a, setValue: g, toggleValue: u } = y({
+  const { value: i, setValue: G, toggleValue: u } = j({
     component: "IressCheckbox",
-    defaultValue: r === void 0 ? void 0 : m(r),
+    defaultValue: r === void 0 ? void 0 : a(r),
     multiple: !0,
-    onChange: b,
-    value: n === void 0 ? void 0 : m(n)
-  }), e = V(null), c = e.current;
-  j(G, () => ({
+    onChange: h,
+    value: n === void 0 ? void 0 : a(n)
+  }), e = B(null), c = e.current;
+  T(v, () => ({
     // 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([])
+    reset: () => G([])
   }));
-  const I = w(
+  const g = V(
     () => ({
-      hiddenCheckbox: s,
-      name: l,
-      onChange: (o, q, B) => u(B, q),
+      name: s,
+      onChange: (o, N, R) => u(R, N),
       readOnly: t,
-      touch: i,
-      value: a ?? []
+      value: i ?? [],
+      variant: l
     }),
-    [l, a, s, t, i, u]
-  ), S = (o) => {
+    [s, t, i, l, u]
+  ), I = (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(
+  }, S = (o) => {
+    o.relatedTarget && !e.current?.contains(o.relatedTarget) && C?.(o);
+  }, { Provider: F } = M();
+  return /* @__PURE__ */ p(F, { value: g, children: /* @__PURE__ */ p(
     "div",
     {
       ...k,
-      role: h,
+      role: b,
       ref: e,
-      className: D(
-        f,
-        A({ layout: C, readOnly: t }),
-        E.CheckboxGroup
+      className: A(
+        m,
+        w({ layout: x, readOnly: t }),
+        D.CheckboxGroup
       ),
-      onBlur: F,
-      onFocus: S,
-      children: x
+      onBlur: S,
+      onFocus: I,
+      children: f
     }
   ) });
-}, Z = N(J);
+}, J = q(z);
+J.displayName = "IressCheckboxGroup";
 export {
-  z as CheckboxGroupContext,
-  Z as IressCheckboxGroup,
-  _ as getCheckboxGroupContext
+  _ as CheckboxGroupContext,
+  J as IressCheckboxGroup,
+  M as getCheckboxGroupContext
 };