@payfit/unity-components 2.31.1 → 2.31.2

package/dist/esm/components/radio-button-group/parts/RadioButton.d.ts

@@ -1,6 +1,8 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { ReactNode } from 'react';
 import { RadioProps } from 'react-aria-components/RadioGroup';
+export { RadioIndicator } from './RadioIndicator.js';
+export type { RadioIndicatorProps, RadioState } from './RadioIndicator.js';
 export declare const radioButton: import('tailwind-variants').TVReturnType<{
     [key: string]: {
         [key: string]: import('tailwind-merge').ClassNameValue | {

package/dist/esm/components/radio-button-group/parts/RadioButton.js

@@ -1,13 +1,12 @@
-import { jsxs as u, jsx as o, Fragment as x } from "react/jsx-runtime";
-import { forwardRef as g, useContext as v, useMemo as l } from "react";
-import { uyTv as R } from "@payfit/unity-themes";
-import { RadioGroupStateContext as S, Radio as h } from "react-aria-components/RadioGroup";
-import { Flex as w } from "../../flex/Flex.js";
-import { Text as N } from "../../text/Text.js";
-import B from "./radio-input-selected.svg.js";
-import O from "./radio-input-unselected.svg.js";
-import { RadioButtonHelper as F } from "./RadioButtonHelper.js";
-const j = R({
+import { jsxs as a, jsx as t, Fragment as f } from "react/jsx-runtime";
+import { forwardRef as x, useContext as g } from "react";
+import { uyTv as h, useUnityTheme as R } from "@payfit/unity-themes";
+import { RadioGroupStateContext as w, Radio as N } from "react-aria-components/RadioGroup";
+import { Flex as v } from "../../flex/Flex.js";
+import { Text as B } from "../../text/Text.js";
+import { RadioButtonHelper as S } from "./RadioButtonHelper.js";
+import { RadioIndicator as j } from "./RadioIndicator.js";
+const C = h({
   slots: {
     container: [
       "uy:group uy:inline-flex uy:flex-col uy:gap-50",
@@ -30,52 +29,39 @@ const j = R({
       "uy:group-data-[readonly=true]:text-content-neutral uy:group-data-[readonly]:cursor-text"
     ]
   }
-}), C = g(
-  ({ children: i, value: n, isDisabled: e, helperText: t, ...s }, y) => {
-    const { base: c, label: m, container: b, radio: a } = j(), r = v(S), p = l(() => r?.isReadOnly ? {
-      "--radio-fill-color": "var(--uy-color-border-form-read-only)",
-      "--radio-border-color": "var(--uy-color-border-form-disabled)"
-    } : {
-      "--radio-fill-color": "var(--uy-color-surface-primary-active)",
-      "--radio-border-color": "var(--uy-color-border-form-active)"
-    }, [r?.isReadOnly]), f = l(() => r?.isReadOnly || r?.isDisabled || e ? {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)"
-    } : {
-      "--radio-border-color": "var(--uy-color-border-form-enabled)"
-    }, [e, r?.isDisabled, r?.isReadOnly]);
-    return /* @__PURE__ */ u(w, { direction: "col", gap: "50", className: b(), children: [
-      /* @__PURE__ */ o(
-        h,
+}), F = x(
+  ({ children: u, value: d, isDisabled: o, helperText: r, ...n }, i) => {
+    const { base: l, label: s, container: y, radio: m } = C(), e = g(w), { theme: c } = R(), p = e?.isReadOnly ? "readonly" : e?.isDisabled || o ? "disabled" : e?.isInvalid ? "invalid" : "enabled";
+    return /* @__PURE__ */ a(v, { direction: "col", gap: "50", className: y(), children: [
+      /* @__PURE__ */ t(
+        N,
         {
-          ...s,
-          value: n,
-          isDisabled: e,
-          className: ({ isFocusVisible: d }) => c(),
-          ref: y,
-          children: ({ isSelected: d }) => /* @__PURE__ */ u(x, { children: [
-            d ? /* @__PURE__ */ o(
-              B,
+          ...n,
+          value: d,
+          isDisabled: o,
+          className: () => l(),
+          ref: i,
+          children: ({ isSelected: b }) => /* @__PURE__ */ a(f, { children: [
+            /* @__PURE__ */ t(
+              j,
               {
-                style: p,
-                className: a()
-              }
-            ) : /* @__PURE__ */ o(
-              O,
-              {
-                style: f,
-                className: a()
+                isSelected: b,
+                state: p,
+                theme: c,
+                className: m()
               }
             ),
-            /* @__PURE__ */ o(N, { variant: "body", className: m(), children: i })
+            /* @__PURE__ */ t(B, { variant: "body", className: s(), children: u })
           ] })
         }
       ),
-      t ? /* @__PURE__ */ o(F, { children: t }) : null
+      r ? /* @__PURE__ */ t(S, { children: r }) : null
     ] });
   }
 );
-C.displayName = "RadioButton";
+F.displayName = "RadioButton";
 export {
-  C as RadioButton,
-  j as radioButton
+  F as RadioButton,
+  j as RadioIndicator,
+  C as radioButton
 };

package/dist/esm/components/radio-button-group/parts/RadioIndicator.d.ts

@@ -0,0 +1,11 @@
+type EnabledState = 'enabled' | 'disabled' | 'readonly';
+type ValidationState = 'valid' | 'invalid';
+export type RadioState = EnabledState | ValidationState;
+export interface RadioIndicatorProps {
+    isSelected: boolean;
+    state: RadioState;
+    theme: string;
+    className?: string;
+}
+export declare const RadioIndicator: ({ isSelected, state, theme, className, }: RadioIndicatorProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/radio-button-group/parts/RadioIndicator.js

@@ -0,0 +1,131 @@
+import { jsx as e, jsxs as l } from "react/jsx-runtime";
+const c = {
+  unselected: {
+    enabled: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
+    valid: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
+    invalid: { "--radio-border-color": "var(--uy-color-border-form-error)" },
+    disabled: {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)"
+    },
+    readonly: {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)"
+    }
+  },
+  selected: {
+    enabled: {
+      "--radio-bg-color": "var(--uy-color-surface-form-active)",
+      "--radio-border-color": "var(--uy-color-surface-form-active)",
+      "--radio-dot-size": "3px",
+      "--radio-dot-color": "var(--uy-color-content-inverted)"
+    },
+    valid: {
+      "--radio-bg-color": "var(--uy-color-surface-form-active)",
+      "--radio-border-color": "var(--uy-color-surface-form-active)",
+      "--radio-dot-size": "3px",
+      "--radio-dot-color": "var(--uy-color-content-inverted)"
+    },
+    invalid: {
+      "--radio-bg-color": "var(--uy-color-surface-danger)",
+      "--radio-border-color": "transparent",
+      "--radio-dot-size": "3px",
+      "--radio-dot-color": "var(--uy-color-content-inverted)"
+    },
+    disabled: {
+      "--radio-bg-color": "var(--uy-color-surface-form-disabled)",
+      "--radio-border-color": "var(--uy-color-border-form-disabled)",
+      "--radio-dot-size": "3px",
+      "--radio-dot-color": "var(--uy-color-content-form-disabled)"
+    },
+    readonly: {
+      "--radio-bg-color": "var(--uy-color-surface-form-read-only)",
+      "--radio-border-color": "transparent",
+      "--radio-dot-size": "3px",
+      "--radio-dot-color": "var(--uy-color-surface-neutral-disabled)"
+    }
+  }
+}, i = {
+  unselected: {
+    enabled: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
+    valid: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
+    invalid: { "--radio-border-color": "var(--uy-color-border-form-error)" },
+    disabled: {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)"
+    },
+    readonly: {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)"
+    }
+  },
+  selected: {
+    enabled: {
+      "--radio-border-color": "var(--uy-color-border-form-active)",
+      "--radio-dot-color": "var(--uy-color-surface-primary-active)"
+    },
+    valid: {
+      "--radio-border-color": "var(--uy-color-border-form-active)",
+      "--radio-dot-color": "var(--uy-color-surface-primary-active)"
+    },
+    invalid: {
+      "--radio-border-color": "var(--uy-color-border-form-error)",
+      "--radio-dot-color": "var(--uy-color-content-form-invalid)"
+    },
+    disabled: {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)",
+      "--radio-dot-color": "var(--uy-color-border-form-disabled)"
+    },
+    readonly: {
+      "--radio-border-color": "var(--uy-color-border-form-disabled)",
+      "--radio-dot-color": "var(--uy-color-border-form-read-only)"
+    }
+  }
+};
+function t({
+  isSelected: r,
+  state: o,
+  theme: d
+}) {
+  return (d === "rebrand" ? c : i)[r ? "selected" : "unselected"][o];
+}
+const n = ({
+  isSelected: r,
+  state: o,
+  theme: d,
+  className: a
+}) => /* @__PURE__ */ e(
+  "svg",
+  {
+    width: "20",
+    height: "20",
+    viewBox: "0 0 20 20",
+    fill: "none",
+    xmlns: "http://www.w3.org/2000/svg",
+    style: t({ isSelected: r, state: o, theme: d }),
+    className: a,
+    children: /* @__PURE__ */ l("g", { id: "Radio input", children: [
+      /* @__PURE__ */ e(
+        "circle",
+        {
+          id: "Background",
+          cx: "10",
+          cy: "10",
+          r: "7",
+          fill: "var(--radio-bg-color, white)",
+          stroke: "var(--radio-border-color, #0157B2)",
+          strokeWidth: "1.25"
+        }
+      ),
+      /* @__PURE__ */ e(
+        "circle",
+        {
+          id: "Dot",
+          cx: "10",
+          cy: "10",
+          style: { r: "var(--radio-dot-size, 5px)" },
+          fill: "var(--radio-dot-color, transparent)"
+        }
+      )
+    ] })
+  }
+);
+export {
+  n as RadioIndicator
+};

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.d.ts

@@ -44,7 +44,7 @@ export interface SelectableCardRadioProps extends Omit<RadioProps, 'children'>,
  * @remarks [API Docs](https://unity-components.payfit.io/?path=/docs/inputs-selectablecardgroup-selectablecardradiogroup-selectablecardradio--docs) • [Design Docs](https://www.payfit.design/24f360409/p/05fc26-selectable-card)
  */
 declare const SelectableCardRadio: {
-    ({ title, description, illustration, ...props }: SelectableCardRadioProps): import("react/jsx-runtime").JSX.Element;
+    ({ title, description, illustration, isDisabled, ...props }: SelectableCardRadioProps): import("react/jsx-runtime").JSX.Element;
     displayName: string;
 };
 export { SelectableCardRadio };

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/SelectableCardRadio.js

@@ -1,38 +1,48 @@
-import { jsx as r, jsxs as a, Fragment as n } from "react/jsx-runtime";
-import { useId as s } from "react";
-import { Radio as p } from "react-aria-components/RadioGroup";
-import { Text as f } from "../../../text/Text.js";
-import { Content as b } from "../../internals/Content.js";
-import { Description as h } from "../../internals/Description.js";
-import { Illustration as I } from "../../internals/Illustration.js";
-import { SelectedIndicator as x } from "../../internals/SelectedIndicator.js";
-import { selectableCard as C } from "../../selectableCard.variant.js";
-import R from "./RadioIndicator.js";
-const S = ({
-  title: d,
+import { jsx as e, jsxs as n, Fragment as b } from "react/jsx-runtime";
+import { useId as h, useContext as S } from "react";
+import { useUnityTheme as u } from "@payfit/unity-themes";
+import { RadioGroupStateContext as x, Radio as y } from "react-aria-components/RadioGroup";
+import { RadioIndicator as C } from "../../../radio-button-group/parts/RadioIndicator.js";
+import { Text as I } from "../../../text/Text.js";
+import { Content as R } from "../../internals/Content.js";
+import { Description as g } from "../../internals/Description.js";
+import { Illustration as v } from "../../internals/Illustration.js";
+import { SelectedIndicator as j } from "../../internals/SelectedIndicator.js";
+import { selectableCard as N } from "../../selectableCard.variant.js";
+const T = ({
+  title: l,
   description: o,
-  illustration: t,
-  ...l
+  illustration: a,
+  isDisabled: i,
+  ...m
 }) => {
-  const m = s(), { base: c } = C(), i = `selectable-card-radio-${m}__title`;
-  return /* @__PURE__ */ r(
-    p,
+  const s = h(), { theme: c } = u(), { base: p } = N(), t = S(x), f = t?.isReadOnly ? "readonly" : t?.isDisabled || i ? "disabled" : t?.isInvalid ? "invalid" : "enabled", d = `selectable-card-radio-${s}__title`;
+  return /* @__PURE__ */ e(
+    y,
     {
-      className: ({ isFocusVisible: e }) => c({ isFocusVisible: e }),
-      "aria-labelledby": i,
-      ...l,
-      children: ({ isSelected: e }) => /* @__PURE__ */ a(n, { children: [
-        /* @__PURE__ */ r(x, { children: /* @__PURE__ */ r(R, { isSelected: e }) }),
-        /* @__PURE__ */ a(b, { children: [
-          t && /* @__PURE__ */ r(I, { children: t }),
-          /* @__PURE__ */ r(f, { asElement: "h3", variant: "bodyLargeStrong", id: i, children: d }),
-          o && /* @__PURE__ */ r(h, { children: o })
+      className: ({ isFocusVisible: r }) => p({ isFocusVisible: r }),
+      "aria-labelledby": d,
+      isDisabled: i,
+      ...m,
+      children: ({ isSelected: r }) => /* @__PURE__ */ n(b, { children: [
+        /* @__PURE__ */ e(j, { children: /* @__PURE__ */ e(
+          C,
+          {
+            isSelected: r,
+            state: f,
+            theme: c
+          }
+        ) }),
+        /* @__PURE__ */ n(R, { children: [
+          a && /* @__PURE__ */ e(v, { children: a }),
+          /* @__PURE__ */ e(I, { asElement: "h3", variant: "bodyLargeStrong", id: d, children: l }),
+          o && /* @__PURE__ */ e(g, { children: o })
         ] })
       ] })
     }
   );
 };
-S.displayName = "SelectableCardRadio";
+T.displayName = "SelectableCardRadio";
 export {
-  S as SelectableCardRadio
+  T as SelectableCardRadio
 };

package/dist/esm/components/selectable-card/selectableCard.variant.js

@@ -8,7 +8,7 @@ const u = e({
       "uy:text-content-form-enabled",
       "uy:bg-surface-form-enabled",
       "uy:hover:border-border-form-hover",
-      "uy:data-[selected=true]:border-border-form-active uy:data-[selected=true]:border-2 uy:data-[selected=true]:m-0",
+      "uy:data-[selected=true]:border-border-form-selected uy:data-[selected=true]:border-2 uy:data-[selected=true]:m-0",
       "uy:data-[invalid]:border-border-form-error uy:data-[invalid]:bg-surface-form-error",
       "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
     ]

package/dist/esm/index.js

@@ -228,7 +228,8 @@ import { CarouselContent as nf, carouselContent as ff } from "./components/carou
 import { CarouselSlide as uf, carouselSlide as df } from "./components/carousel/parts/CarouselSlide.js";
 import { DialogTrigger as gf, DialogTrigger as sf } from "react-aria-components/Dialog";
 import { FilterAdapters as bf } from "./components/filter-toolbar/utils/filter-adapters.js";
-import { useAsyncList as Tf } from "react-stately/useAsyncList";
+import { RadioIndicator as Tf } from "./components/radio-button-group/parts/RadioIndicator.js";
+import { useAsyncList as Pf } from "react-stately/useAsyncList";
 export {
   p as ActionBar,
   m as ActionBarAction,
@@ -389,6 +390,7 @@ export {
   Sa as RadioButtonGroup,
   Pn as RadioButtonGroupField,
   Pa as RadioButtonHelper,
+  Tf as RadioIndicator,
   Ao as RawBreadcrumbLink,
   mn as RawFormContextualLink,
   ht as RawLink,
@@ -542,7 +544,7 @@ export {
   Ex as toggleSwitch,
   Lx as toggleSwitchGroup,
   h as useAppMenuContext,
-  Tf as useAsyncList,
+  Pf as useAsyncList,
   Wx as useBreakpointListener,
   qx as useContainerQueryLevel,
   Qn as useFieldA11yContext,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.31.1",
+  "version": "2.31.2",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -42,7 +42,7 @@
     "@hookform/devtools": "4.4.0",
     "@hookform/resolvers": "5.2.1",
     "@internationalized/date": "3.12.1",
-    "@payfit/unity-illustrations": "2.31.1",
+    "@payfit/unity-illustrations": "2.31.2",
     "@radix-ui/react-avatar": "1.1.11",
     "@radix-ui/react-slot": "1.2.4",
     "@react-aria/interactions": "3.28.0",
@@ -74,8 +74,8 @@
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
-    "@payfit/unity-icons": "2.31.1",
-    "@payfit/unity-themes": "2.31.1",
+    "@payfit/unity-icons": "2.31.2",
+    "@payfit/unity-themes": "2.31.2",
     "@storybook/react-vite": "^10.3.2",
     "@tanstack/react-query": "^5",
     "@tanstack/react-router": "^1.131",
@@ -89,9 +89,9 @@
     "@figma/code-connect": "1.4.3",
     "@hookform/devtools": "4.4.0",
     "@internationalized/date": "3.12.1",
-    "@payfit/unity-icons": "2.31.1",
-    "@payfit/unity-illustrations": "2.31.1",
-    "@payfit/unity-themes": "2.31.1",
+    "@payfit/unity-icons": "2.31.2",
+    "@payfit/unity-illustrations": "2.31.2",
+    "@payfit/unity-themes": "2.31.2",
     "@storybook/addon-a11y": "10.3.5",
     "@storybook/addon-designs": "11.1.3",
     "@storybook/addon-docs": "10.3.5",

package/dist/esm/components/radio-button-group/parts/radio-input-selected.svg.js

@@ -1,5 +0,0 @@
-import * as e from "react";
-const o = (t) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "Radio input" }, /* @__PURE__ */ e.createElement("path", { id: "Background", d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z", fill: "white", stroke: "var(--radio-border-color, #0157B2)", strokeWidth: 1.25 }), /* @__PURE__ */ e.createElement("path", { id: "Foreground", d: "M5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10Z", fill: "var(--radio-fill-color, #0157B2)" })));
-export {
-  o as default
-};

package/dist/esm/components/radio-button-group/parts/radio-input-unselected.svg.js

@@ -1,5 +0,0 @@
-import * as e from "react";
-const o = (t) => /* @__PURE__ */ e.createElement("svg", { width: 20, height: 20, viewBox: "0 0 20 20", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "Radio input" }, /* @__PURE__ */ e.createElement("path", { id: "Background", d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z", fill: "white", stroke: "var(--radio-border-color, #CDCED6)", strokeWidth: 1.25 })));
-export {
-  o as default
-};

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/RadioIndicator.d.ts

@@ -1,8 +0,0 @@
-interface RadioIndocatorProps {
-    isSelected: boolean;
-}
-declare const RadioIndicator: {
-    ({ isSelected }: RadioIndocatorProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export default RadioIndicator;

package/dist/esm/components/selectable-card/selectable-card-radio-group/parts/RadioIndicator.js

@@ -1,68 +0,0 @@
-import { jsx as r, jsxs as e } from "react/jsx-runtime";
-import { uyTv as i } from "@payfit/unity-themes";
-const t = i({
-  base: "",
-  variants: {
-    isSelected: {
-      false: [
-        "uy:stroke-border-form-enabled",
-        "uy:hover:stroke-border-form-hover",
-        "uy:focus-visible:stroke-border-form-focus"
-      ],
-      true: ["uy:text-surface-form-active"]
-    }
-  }
-}), d = ({ isSelected: o }) => o ? /* @__PURE__ */ r(
-  "svg",
-  {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ e("g", { id: "Radio input", className: t({ isSelected: o }), children: [
-      /* @__PURE__ */ r(
-        "path",
-        {
-          id: "Background",
-          d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z",
-          fill: "white",
-          stroke: "currentColor",
-          strokeWidth: "1.25"
-        }
-      ),
-      /* @__PURE__ */ r(
-        "path",
-        {
-          id: "Foreground",
-          d: "M5 10C5 7.23858 7.23858 5 10 5C12.7614 5 15 7.23858 15 10C15 12.7614 12.7614 15 10 15C7.23858 15 5 12.7614 5 10Z",
-          fill: "currentColor"
-        }
-      )
-    ] })
-  }
-) : /* @__PURE__ */ r(
-  "svg",
-  {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    children: /* @__PURE__ */ r("g", { id: "Radio input", children: /* @__PURE__ */ r(
-      "path",
-      {
-        className: t({ isSelected: o }),
-        id: "Background",
-        d: "M2.625 10C2.625 5.9269 5.9269 2.625 10 2.625C14.0731 2.625 17.375 5.9269 17.375 10C17.375 14.0731 14.0731 17.375 10 17.375C5.9269 17.375 2.625 14.0731 2.625 10Z",
-        fill: "white",
-        stroke: "currentColor",
-        strokeWidth: "1.25"
-      }
-    ) })
-  }
-);
-d.displayName = "RadioIndicator";
-export {
-  d as default
-};