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

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

@@ -1,201 +1,116 @@
-import { s as r } from "../../sva-OmxClA9g.js";
-const e = r({
-  slots: [
-    "root",
-    "input",
-    "label",
-    "radioMark",
-    "checkedRadioMark",
-    "checkboxMark"
-  ],
+import { s as r } from "../../sva-CsHRIRDW.js";
+const o = r({
+  slots: ["root", "input", "label", "content", "mark", "heading"],
   base: {
     root: {
+      // Performance: CSS containment (no paint to allow focus ring/shadow)
+      contain: "layout style",
       color: "colour.primary.fill",
       display: "flex",
       position: "relative",
-      padding: "spacing.0",
-      transition: "[all 0.2s ease-out]",
-      "&:has(svg:hover)": {
-        color: "colour.primary.fillHover"
+      textStyle: "typography.body.md.medium",
+      "&:has(input:disabled)": {
+        cursor: "not-allowed",
+        "& label": {
+          pointerEvents: "none"
+        }
       }
     },
     input: {
-      border: "[0px]",
-      clip: "rect(0, 0, 0, 0)",
-      height: "[1px]",
-      margin: "[-1px]",
-      overflow: "hidden",
-      padding: "spacing.0",
-      position: "absolute",
-      width: "[1px]"
+      srOnly: !0
     },
     label: {
       display: "inline-flex",
       alignItems: "center",
-      padding: "spacing.0",
-      border: "[0px solid transparent]",
       borderRadius: "radius.system.form",
-      backgroundColor: "[transparent]",
-      position: "relative",
       lineHeight: "1.5",
-      margin: "[0px]",
+      margin: "none",
       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.2",
-      flexShrink: 0,
+    content: {
+      font: "inherit",
+      color: "colour.neutral.90"
+    },
+    heading: {
+      display: "block"
+    },
+    mark: {
+      focusable: "group",
       color: "[currentColor]",
-      "& circle": {
-        fill: "[currentColor]",
-        display: "none"
-      },
-      _groupFocusWithin: {
-        layerStyle: "elevation.focus"
+      flexShrink: 0,
+      ".group:has(input:disabled) &": {
+        opacity: "[0.5]"
       }
-    },
-    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: {
+    checked: {
       true: {
         label: {
-          borderWidth: "1px",
-          borderStyle: "solid",
-          borderColor: "colour.neutral.40",
-          borderRadius: "radius.050",
-          padding: "spacing.4"
+          borderColor: "[currentColor]"
         }
       }
     },
-    checked: {
-      true: {
-        label: {
-          borderColor: "[currentColor]"
+    variant: {
+      card: {
+        root: {
+          textStyle: "typography.body.md"
         },
-        radioMark: {
-          borderColor: "[currentColor]",
-          "& circle": {
-            fill: "[currentColor]",
-            display: "block"
+        label: {
+          p: "spacing.4",
+          width: "12/12",
+          cursor: "pointer",
+          borderRadius: "radius.system.layout",
+          border: "table",
+          display: "flex",
+          flexDirection: "row-reverse",
+          alignItems: "start",
+          _hover: {
+            backgroundColor: "colour.neutral.20"
           }
+        },
+        content: {
+          flex: "1"
+        },
+        mark: {
+          flex: "[0]",
+          mr: "none",
+          focusable: "true"
+        },
+        input: {
+          focusable: "label-after"
         }
       },
-      false: {
-        radioMark: {
+      touch: {
+        label: {
+          border: "table",
+          borderRadius: "radius.system.form",
+          p: "spacing.3",
           _hover: {
-            backgroundColor: "colour.primary.surfaceHover"
+            bg: "colour.neutral.20"
           }
+        },
+        mark: {
+          focusable: "true"
+        },
+        input: {
+          focusable: "label-after"
         }
       }
     }
   },
   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,
+      variant: ["card", "touch"],
       checked: !0,
       css: {
         label: {
-          topLeftTriangle: !0
-        },
-        checkboxMark: {
-          checkmark: !0
+          borderWidth: "2px"
         }
       }
     }
   ]
 });
 export {
-  e as radio
+  o as radio
 };

package/dist/components/RadioGroup/RadioGroup.d.ts

@@ -0,0 +1,58 @@
+import { ChangeEvent, Context, ReactElement, Ref, ReactNode } from 'react';
+import { ReactHookFormCompatibleRef } from '../../interfaces';
+import { FormControlValue, IressStyledProps } from '../../types';
+import { CheckboxVariants } from '../Checkbox';
+export interface IressRadioGroupProps<T = FormControlValue> extends Omit<IressStyledProps, 'onChange' | 'defaultValue'> {
+    /**
+     * Content of the radio group, usually multiple `IressRadio` components.
+     */
+    children?: ReactNode;
+    /**
+     * Sets which of the block / inline layout options apply.
+     * @default 'stack'
+     */
+    layout?: 'stack' | 'block' | 'inline' | 'inlineFlex' | 'inlineEqualWidth';
+    /**
+     * Name to be applied to all radios in the group.
+     */
+    name?: string;
+    /**
+     * Called when a user selects one of its children radio buttons.
+     * If you pass in a non-string value, you can access it using the second parameter of the function.
+     */
+    onChange?: (e: ChangeEvent<HTMLInputElement>, value?: T) => void;
+    /**
+     * When true, marks the field as required
+     */
+    required?: boolean;
+    /**
+     * Initial value of radio group when in uncontrolled mode.
+     */
+    defaultValue?: T;
+    /**
+     * Renders a readOnly radio group.
+     */
+    readOnly?: boolean;
+    /**
+     * Value of radio group when in controlled mode.
+     */
+    value?: T;
+    /**
+     * The visual variant of the radios in the group. This is passed down to child radios, but can be overridden at the individual radio 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 radio style.
+     */
+    variant?: CheckboxVariants;
+}
+export type RadioGroupContextValue<T = FormControlValue> = Pick<IressRadioGroupProps<T>, 'name' | 'value' | 'required' | 'onChange' | 'readOnly' | 'variant'>;
+export interface RadioGroupRef extends ReactHookFormCompatibleRef<HTMLDivElement> {
+    reset: () => void;
+}
+export declare function getRadioGroupContext<T = FormControlValue>(): Context<RadioGroupContextValue<T> | undefined>;
+export declare const RadioGroupContext: Context<RadioGroupContextValue<FormControlValue> | undefined>;
+export declare const IressRadioGroup: (<T = FormControlValue>(props: IressRadioGroupProps<T> & {
+    ref?: Ref<RadioGroupRef>;
+}) => ReactElement) & {
+    displayName: "IressRadioGroup";
+};

package/dist/components/RadioGroup/RadioGroup.js

@@ -1,87 +1,86 @@
-import { jsx as f } from "react/jsx-runtime";
-import { forwardRef as B, createContext as N, useRef as T, useMemo as j, useImperativeHandle as k } from "react";
-import { useControlledState as D } from "../../hooks/useControlledState.js";
-import { radioGroup as E } from "./RadioGroup.styles.js";
-import { c as H } from "../../cx-DN21T1EH.js";
-import { s as M } from "../../factory-oPXoMw9H.js";
-import { GlobalCSSClass as P } from "../../enums.js";
-import { useNoDefaultValueInForms as h } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
-function w() {
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as F, createContext as N, useRef as q, useMemo as B, useImperativeHandle as T } from "react";
+import { useControlledState as j } from "../../hooks/useControlledState.js";
+import { radioGroup as k } from "./RadioGroup.styles.js";
+import { c as D } from "../../cx-DN21T1EH.js";
+import { s as E } from "../../factory-CcYfm2kB.js";
+import { GlobalCSSClass as H } from "../../enums.js";
+import { useNoDefaultValueInForms as M } from "../../patterns/Form/hooks/useNoDefaultValueInForms.js";
+function P() {
   return N(void 0);
 }
-function z() {
-  return A;
+function w() {
+  return z;
 }
-const A = w(), J = ({
-  children: d,
-  className: v,
-  hiddenRadio: t,
-  layout: G = "stack",
-  name: n,
-  onBlur: R,
-  onChange: s,
-  onFocus: x,
-  required: c,
-  role: C = "radiogroup",
-  defaultValue: a,
-  readOnly: i,
-  value: S,
-  touch: l,
-  ...g
-}, I) => {
-  h({
+const z = P(), A = ({
+  children: m,
+  className: f,
+  layout: R = "stack",
+  name: u,
+  onBlur: G,
+  onChange: n,
+  onFocus: v,
+  required: s,
+  role: x = "radiogroup",
+  defaultValue: c,
+  readOnly: a,
+  value: C,
+  variant: i,
+  ...I
+}, S) => {
+  M({
     component: "IressRadioGroup",
-    defaultValue: a
+    defaultValue: c
   });
-  const r = T(null), e = r.current, { value: p, setValue: u } = D({
+  const r = q(null), t = r.current, { value: p, setValue: e } = j({
     component: "IressRadioGroup",
-    defaultValue: a,
-    value: S
-  }), b = j(
+    defaultValue: c,
+    value: C
+  }), g = B(
     () => ({
-      name: n,
+      name: u,
       value: p,
-      hiddenRadio: t,
-      required: c,
-      readOnly: i,
-      touch: l,
-      onChange: (o, m) => {
-        u(m), s?.(o, m);
-      }
+      required: s,
+      readOnly: a,
+      onChange: (o, l) => {
+        e(l), n?.(o, l);
+      },
+      variant: i
     }),
-    [n, p, t, c, i, u, s, l]
+    [u, p, s, a, i, e, n]
   );
-  k(I, () => ({
+  T(S, () => ({
     // React hook form requires the focus, blur, input
-    focus: () => e?.querySelector("input")?.focus(),
-    blur: () => e?.querySelector("input")?.blur(),
-    input: e,
-    reset: () => u(void 0)
+    focus: () => t?.querySelector("input")?.focus(),
+    blur: () => t?.querySelector("input")?.blur(),
+    input: t,
+    reset: () => e(void 0)
   }));
   const y = (o) => {
-    x?.(o), o.target === r.current && r.current.querySelector("input")?.focus();
-  }, F = (o) => {
-    o.relatedTarget && !r.current?.contains(o.relatedTarget) && R?.(o);
-  }, { Provider: q } = z();
-  return /* @__PURE__ */ f(q, { value: b, children: /* @__PURE__ */ f(
-    M.div,
+    v?.(o), o.target === r.current && r.current.querySelector("input")?.focus();
+  }, b = (o) => {
+    o.relatedTarget && !r.current?.contains(o.relatedTarget) && G?.(o);
+  }, { Provider: h } = w();
+  return /* @__PURE__ */ d(h, { value: g, children: /* @__PURE__ */ d(
+    E.div,
     {
-      ...g,
+      ...I,
       ref: r,
-      role: C,
-      className: H(
-        v,
-        E({ layout: G, hiddenRadio: t }),
-        P.RadioGroup
+      role: x,
+      className: D(
+        f,
+        k({ layout: R }),
+        H.RadioGroup
       ),
-      onBlur: F,
+      onBlur: b,
       onFocus: y,
-      children: d
+      children: m
     }
   ) });
-}, Z = B(J);
+}, J = F(A);
+J.displayName = "IressRadioGroup";
 export {
-  Z as IressRadioGroup,
-  A as RadioGroupContext,
-  z as getRadioGroupContext
+  J as IressRadioGroup,
+  z as RadioGroupContext,
+  w as getRadioGroupContext
 };

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

@@ -0,0 +1,41 @@
+export declare const radioGroup: import('../../styled-system/types').RecipeRuntimeFn<{
+    layout: {
+        stack: {
+            display: "inline-flex";
+            flexFlow: "column wrap";
+            rowGap: "spacing.2";
+            '& > *': {
+                flexBasis: "[0]";
+            };
+        };
+        block: {
+            display: "flex";
+            flexFlow: "column wrap";
+            rowGap: "spacing.2";
+            '& label': {
+                flexBasis: "[100%]";
+            };
+        };
+        inline: {
+            display: "flex";
+            flexFlow: "row wrap";
+            width: "[100%]";
+            gap: "spacing.2";
+            '& label': {
+                flexBasis: "[auto]";
+                flexGrow: "[0]";
+            };
+        };
+        inlineFlex: {
+            display: "inline-flex";
+            gap: "spacing.2";
+        };
+        inlineEqualWidth: {
+            display: "flex";
+            width: "[100%]";
+            '& > *': {
+                flex: "[1 1 auto]";
+            };
+        };
+    };
+}>;

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

@@ -1,5 +1,5 @@
-import { c as a } from "../../cva-JiDXAa83.js";
-const i = a({
+import { c as l } from "../../cva-3iuaj0TL.js";
+const i = l({
   base: {},
   variants: {
     layout: {
@@ -40,15 +40,6 @@ const i = a({
           flex: "[1 1 auto]"
         }
       }
-    },
-    hiddenRadio: {
-      true: {
-        "& label": {
-          _hover: {
-            backgroundColor: "colour.primary.surfaceHover"
-          }
-        }
-      }
     }
   },
   defaultVariants: {

package/dist/components/RadioMark/RadioMark.d.ts

@@ -0,0 +1,19 @@
+import { IressCSSProps } from '../../interfaces';
+export interface IressRadioMarkProps extends IressCSSProps {
+    /**
+     * Whether the radio is checked
+     */
+    checked?: boolean;
+    /**
+     * Additional CSS class names
+     */
+    className?: string;
+    /**
+     * Test ID for testing purposes
+     */
+    'data-testid'?: string;
+}
+/**
+ * RadioMark component renders the SVG circle used to indicate a selected radio button.
+ */
+export declare const IressRadioMark: ({ checked, className, ...restProps }: IressRadioMarkProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/RadioMark/RadioMark.js

@@ -0,0 +1,31 @@
+import { jsx as s } from "react/jsx-runtime";
+import { c } from "../../css-DVJ-ALYD.js";
+import { c as i } from "../../cx-DN21T1EH.js";
+import { s as l } from "../../is-valid-prop-C5D641yn.js";
+import { GlobalCSSClass as p } from "../../enums.js";
+import { radioMark as n } from "./RadioMark.styles.js";
+const g = ({
+  checked: r = !1,
+  className: o,
+  ...t
+}) => {
+  const m = n.raw({ checked: r }), [e, a] = l(t);
+  return /* @__PURE__ */ s(
+    "svg",
+    {
+      version: "1.1",
+      viewBox: "0 0 200 200",
+      xmlns: "http://www.w3.org/2000/svg",
+      ...a,
+      className: i(
+        c(m, e),
+        p.FormElement,
+        o
+      ),
+      children: /* @__PURE__ */ s("circle", { cx: "100", cy: "100", r: "70" })
+    }
+  );
+};
+export {
+  g as IressRadioMark
+};

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

@@ -0,0 +1,15 @@
+export declare const radioMark: import('../../styled-system/types').RecipeRuntimeFn<{
+    checked: {
+        true: {
+            '--iress-border-color': "currentColor";
+            '& circle': {
+                display: "block";
+            };
+        };
+        false: {
+            _hover: {
+                backgroundColor: "colour.primary.surfaceHover";
+            };
+        };
+    };
+}>;

package/dist/components/RadioMark/RadioMark.styles.js

@@ -0,0 +1,45 @@
+import { c as r } from "../../cva-3iuaj0TL.js";
+const e = r({
+  base: {
+    boxSizing: "border-box",
+    position: "relative",
+    border: "input",
+    borderColor: "var(--iress-border-color, {colors.colour.neutral.70})",
+    backgroundColor: "colour.neutral.10",
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    width: "[1.4em]",
+    minWidth: "[1.4em]",
+    height: "[1.4em]",
+    borderRadius: "[100%]",
+    marginInlineEnd: "spacing.2",
+    flexShrink: 0,
+    color: "[currentColor]",
+    "& circle": {
+      fill: "[currentColor]",
+      display: "none"
+    }
+  },
+  variants: {
+    checked: {
+      true: {
+        "--iress-border-color": "currentColor",
+        "& circle": {
+          display: "block"
+        }
+      },
+      false: {
+        _hover: {
+          backgroundColor: "colour.primary.surfaceHover"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    checked: !1
+  }
+});
+export {
+  e as radioMark
+};

package/dist/components/RadioMark/index.d.ts

@@ -0,0 +1,2 @@
+export * from './RadioMark';
+export * from './RadioMark.styles';

package/dist/components/RadioMark/index.js

@@ -0,0 +1,6 @@
+import { IressRadioMark as a } from "./RadioMark.js";
+import { radioMark as d } from "./RadioMark.styles.js";
+export {
+  a as IressRadioMark,
+  d as radioMark
+};