@clubmed/trident-ui 1.3.0-beta.9 → 1.3.0-rc.1

package/molecules/Forms/Password/Password.d.ts

@@ -1,4 +1,4 @@
-import { type FormControlProps } from '../FormControl';
+import { FormControlProps } from '../FormControl';
 import { ValidationMessage } from './ValidationMessage';
 export interface PasswordProps<Value> extends FormControlProps<Value> {
     validationMessages?: ValidationMessage[];

package/molecules/Forms/Password/ValidationMessage.d.ts

@@ -1,4 +1,4 @@
-import type { ValidationStatus } from '../../../hooks/useInternalStatus';
+import { ValidationStatus } from '../../../hooks/useInternalStatus';
 export interface ValidationMessage {
     label: string;
     status: ValidationStatus;

package/molecules/Forms/Radios/Radio.d.ts

@@ -1,5 +1,4 @@
-import { type InputHTMLAttributes } from 'react';
-import '../controls.css';
+import { InputHTMLAttributes } from 'react';
 export interface RadioProps<Value = string> extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     /**
      * The data-testid to apply to the button.
@@ -13,3 +12,6 @@ export interface RadioProps<Value = string> extends Omit<InputHTMLAttributes<HTM
     onChange?: (name: string, value: Value | null) => void;
 }
 export declare function Radio<Value = string>(props: RadioProps<Value>): import("react/jsx-runtime").JSX.Element;
+export declare namespace Radio {
+    var displayName: string;
+}

package/molecules/Forms/Radios/Radio.js

@@ -1,62 +1,63 @@
-import { jsxs as c, jsx as e } from "react/jsx-runtime";
-import { c as b } from "../../../chunks/index.js";
-import { useId as k } from "react";
-import { useValue as w } from "../../../hooks/useValue.js";
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { c as C } from "../../../chunks/index.js";
+import { useId as N } from "react";
+import { useValue as b } from "../../../hooks/useValue.js";
 /* empty css                       */
-function R(d) {
-  const n = k(), {
-    id: o = n,
-    name: l = o,
-    className: m,
-    dataTestId: h,
+function k(r) {
+  const d = N(), {
+    id: o = d,
+    name: t = o,
+    className: c,
+    dataTestId: m,
     disabled: a,
-    checked: f = !1,
+    checked: h = !1,
     value: i,
-    size: t = 24,
+    size: s = 24,
     tabIndex: p = 0,
-    children: u,
-    onChange: s,
+    children: f,
+    onChange: u,
     ...v
-  } = d, { value: r, setValue: x } = w({
-    name: l,
-    initialValue: f,
+  } = r, { value: l, setValue: x } = b({
+    name: t,
+    initialValue: h,
     onChange(g, y) {
-      s == null || s(g, i !== void 0 ? i : y);
+      u?.(g, i !== void 0 ? i : y);
     }
   });
-  return /* @__PURE__ */ c(
+  return /* @__PURE__ */ n(
     "label",
     {
-      className: b(m, "relative flex items-center gap-8", {
+      className: C(c, "relative flex items-center gap-8", {
         "text-grey": a
       }),
       children: [
-        /* @__PURE__ */ c("span", { className: "relative", children: [
+        /* @__PURE__ */ n("span", { className: "relative", children: [
           /* @__PURE__ */ e(
             "input",
             {
               ...v,
-              name: l,
-              "data-testid": h,
+              name: t,
+              "data-testid": m,
               type: "radio",
               tabIndex: p,
               onChange: () => {
-                !a && x(!r);
+                !a && x(!l);
               },
-              defaultChecked: r,
+              defaultChecked: l,
               "data-name": "Radio",
               disabled: a,
               value: i
             }
           ),
-          /* @__PURE__ */ e("span", { style: { height: t, width: t }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 16 16", width: t * 2 / 3, className: "overflow-visible", children: /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "8px", style: { fill: "hsl(var(--color-saffron))" } }) }) })
+          /* @__PURE__ */ e("span", { style: { height: s, width: s }, children: /* @__PURE__ */ e("svg", { viewBox: "0 0 16 16", width: s * 2 / 3, className: "overflow-visible", children: /* @__PURE__ */ e("circle", { cx: "8", cy: "8", r: "8px", style: { fill: "hsl(var(--color-saffron))" } }) }) })
         ] }),
-        u
+        f
       ]
     }
   );
 }
+k.displayName = "Radio";
 export {
-  R as Radio
+  k as Radio
 };
 //# sourceMappingURL=Radio.js.map

package/molecules/Forms/Radios/Radio.js.map

@@ -1 +1 @@
-{"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\n\nexport interface RadioProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\n  /**\n   * The diameter of the radio button.\n   * */\n  size?: number;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Radio<Value = string>(props: RadioProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    checked: initialChecked = false,\n    value,\n    size = 24,\n    tabIndex = 0,\n    children,\n    onChange,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, (value !== undefined ? value : checked) as Value);\n    },\n  });\n\n  return (\n    <label\n      className={classnames(className, 'relative flex items-center gap-8', {\n        'text-grey': disabled,\n      })}\n    >\n      <span className=\"relative\">\n        <input\n          {...rest}\n          name={name}\n          data-testid={dataTestId}\n          type=\"radio\"\n          tabIndex={tabIndex}\n          onChange={() => {\n            !disabled && setValue(!checked);\n          }}\n          defaultChecked={checked}\n          data-name=\"Radio\"\n          disabled={disabled}\n          value={value}\n        />\n\n        <span style={{ height: size, width: size }}>\n          <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n            <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'hsl(var(--color-saffron))' }} />\n          </svg>\n        </span>\n      </span>\n\n      {children}\n    </label>\n  );\n}\n"],"names":["Radio","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","children","onChange","rest","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAoBO,SAASA,EAAsBC,GAA0B;AAC9D,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAF,KAAA,QAAAA,EAAWT,GAAOK,MAAU,SAAYA,IAAQM;AAAAA,IAClD;AAAA,EAAA,CACD;AAED,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWd,GAAW,oCAAoC;AAAA,QACnE,aAAaE;AAAA,MAAA,CACd;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAW,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGN;AAAA,cACJ,MAAAV;AAAA,cACA,eAAaE;AAAA,cACb,MAAK;AAAA,cACL,UAAAK;AAAA,cACA,UAAU,MAAM;AACd,iBAACJ,KAAYS,EAAS,CAACD,CAAO;AAAA,cAChC;AAAA,cACA,gBAAgBA;AAAA,cAChB,aAAU;AAAA,cACV,UAAAR;AAAA,cACA,OAAAE;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,gBAAAW,EAAC,QAAA,EAAK,OAAO,EAAE,QAAQV,GAAM,OAAOA,EAAA,GAClC,UAAA,gBAAAU,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQV,IAAO,IAAK,GAAG,WAAU,oBACxD,UAAA,gBAAAU,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,OAAO,EAAE,MAAM,4BAAA,EAA4B,CAAG,GAC9E,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAECR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;"}
+{"version":3,"file":"Radio.js","sources":["../../../../lib/molecules/Forms/Radios/Radio.tsx"],"sourcesContent":["import classnames from 'classnames';\nimport { type InputHTMLAttributes, useId } from 'react';\nimport { useValue } from '@/hooks/useValue.js';\nimport '../controls.css';\n\nexport interface RadioProps<Value = string>\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {\n  /**\n   * The data-testid to apply to the button.\n   * This is used for testing purposes.\n   * */\n  dataTestId?: string;\n  /**\n   * The diameter of the radio button.\n   * */\n  size?: number;\n\n  onChange?: (name: string, value: Value | null) => void;\n}\n\nexport function Radio<Value = string>(props: RadioProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    className,\n    dataTestId,\n    disabled,\n    checked: initialChecked = false,\n    value,\n    size = 24,\n    tabIndex = 0,\n    children,\n    onChange,\n    ...rest\n  } = props;\n\n  const { value: checked, setValue } = useValue<boolean>({\n    name,\n    initialValue: initialChecked,\n    onChange(name, checked) {\n      onChange?.(name, (value !== undefined ? value : checked) as Value);\n    },\n  });\n\n  return (\n    <label\n      className={classnames(className, 'relative flex items-center gap-8', {\n        'text-grey': disabled,\n      })}\n    >\n      <span className=\"relative\">\n        <input\n          {...rest}\n          name={name}\n          data-testid={dataTestId}\n          type=\"radio\"\n          tabIndex={tabIndex}\n          onChange={() => {\n            !disabled && setValue(!checked);\n          }}\n          defaultChecked={checked}\n          data-name=\"Radio\"\n          disabled={disabled}\n          value={value}\n        />\n\n        <span style={{ height: size, width: size }}>\n          <svg viewBox=\"0 0 16 16\" width={(size * 2) / 3} className=\"overflow-visible\">\n            <circle cx=\"8\" cy=\"8\" r=\"8px\" style={{ fill: 'hsl(var(--color-saffron))' }} />\n          </svg>\n        </span>\n      </span>\n\n      {children}\n    </label>\n  );\n}\n\nRadio.displayName = 'Radio';\n"],"names":["Radio","props","internalId","useId","id","name","className","dataTestId","disabled","initialChecked","value","size","tabIndex","children","onChange","rest","checked","setValue","useValue","jsxs","classnames","jsx"],"mappings":";;;;;AAoBO,SAASA,EAAsBC,GAA0B;AAC9D,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,WAAAE;AAAA,IACA,YAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAASC,IAAiB;AAAA,IAC1B,OAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC,IAAW;AAAA,IACX,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,IACDd,GAEE,EAAE,OAAOe,GAAS,UAAAC,EAAA,IAAaC,EAAkB;AAAA,IACrD,MAAAb;AAAA,IACA,cAAcI;AAAA,IACd,SAASJ,GAAMW,GAAS;AACtB,MAAAF,IAAWT,GAAOK,MAAU,SAAYA,IAAQM,CAAiB;AAAA,IACnE;AAAA,EAAA,CACD;AAED,SACE,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAWd,GAAW,oCAAoC;AAAA,QACnE,aAAaE;AAAA,MAAA,CACd;AAAA,MAED,UAAA;AAAA,QAAA,gBAAAW,EAAC,QAAA,EAAK,WAAU,YACd,UAAA;AAAA,UAAA,gBAAAE;AAAA,YAAC;AAAA,YAAA;AAAA,cACE,GAAGN;AAAA,cACJ,MAAAV;AAAA,cACA,eAAaE;AAAA,cACb,MAAK;AAAA,cACL,UAAAK;AAAA,cACA,UAAU,MAAM;AACd,iBAACJ,KAAYS,EAAS,CAACD,CAAO;AAAA,cAChC;AAAA,cACA,gBAAgBA;AAAA,cAChB,aAAU;AAAA,cACV,UAAAR;AAAA,cACA,OAAAE;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF,gBAAAW,EAAC,QAAA,EAAK,OAAO,EAAE,QAAQV,GAAM,OAAOA,EAAA,GAClC,UAAA,gBAAAU,EAAC,OAAA,EAAI,SAAQ,aAAY,OAAQV,IAAO,IAAK,GAAG,WAAU,oBACxD,UAAA,gBAAAU,EAAC,UAAA,EAAO,IAAG,KAAI,IAAG,KAAI,GAAE,OAAM,OAAO,EAAE,MAAM,4BAAA,EAA4B,CAAG,GAC9E,EAAA,CACF;AAAA,QAAA,GACF;AAAA,QAECR;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGP;AAEAb,EAAM,cAAc;"}

package/molecules/Forms/Radios/RadioGroup.d.ts

@@ -1,5 +1,5 @@
-import { type HTMLAttributes } from 'react';
-import type { FormControlProps } from '../FormControl.js';
+import { HTMLAttributes } from 'react';
+import { FormControlProps } from '../FormControl.js';
 export interface RadioGroupProps<Value = string> extends Pick<FormControlProps<Value>, 'id' | 'name' | 'value' | 'onChange' | 'disabled' | 'readOnly' | 'tabIndex' | 'description' | 'validationStatus' | 'errorMessage'>, Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {
 }
 export declare function RadioGroup<Value = string>(props: RadioGroupProps<Value>): import("react/jsx-runtime").JSX.Element;

package/molecules/Forms/Radios/RadioGroup.js

@@ -1,37 +1,74 @@
-import { jsx as v } from "react/jsx-runtime";
-import { useId as x, Children as I, cloneElement as b, isValidElement as C } from "react";
-import { useValue as h } from "../../../hooks/useValue.js";
-import { c as E } from "../../../chunks/index.js";
-function G(l) {
-  const s = x(), {
-    id: a = s,
-    name: r = a,
-    children: t,
-    value: i,
-    defaultValue: m,
-    onChange: u,
-    disabled: d,
-    readOnly: p,
-    tabIndex: c = 0,
-    ...n
-  } = l, { value: f, setValue: V } = h({
-    name: r,
-    initialValue: i,
-    defaultValue: m,
-    onChange: u
-  });
-  return /* @__PURE__ */ v("div", { ...n, className: E("flex gap-12", n.className), role: "radiogroup", children: I.map(t, (e, o) => C(e) ? b(e, {
-    ...e.props,
-    name: r,
-    id: `${a}-${o}`,
-    disabled: d,
-    readOnly: p,
-    tabIndex: c + o + 1,
-    checked: f === e.props.value,
-    onChange(N, g) {
-      V(g);
+import { jsx as N } from "react/jsx-runtime";
+import { useId as O, Children as V, isValidElement as W, cloneElement as y } from "react";
+import { useValue as _ } from "../../../hooks/useValue.js";
+import { c as h } from "../../../chunks/index.js";
+import { KEY as a } from "../../../hooks/keyboard.constants.js";
+function G(k) {
+  const R = O(), {
+    id: s = R,
+    name: u = s,
+    children: g,
+    value: v,
+    defaultValue: I,
+    onChange: E,
+    disabled: p,
+    readOnly: c,
+    tabIndex: b = 0,
+    ...m
+  } = k, { value: r, setValue: i } = _({
+    name: u,
+    initialValue: v,
+    defaultValue: I,
+    onChange: E
+  }), A = (e, o) => {
+    let n = o;
+    const t = e.target.parentNode.querySelectorAll('[role="radio"]');
+    if (e.key === a.ARROW_RIGHT || e.key === a.ARROW_DOWN)
+      n = (o + 1) % t.length, t[n]?.focus();
+    else if (e.key === a.ARROW_LEFT || e.key === a.ARROW_UP)
+      n = (o - 1 + t.length) % t.length, t[n]?.focus();
+    else if (e.key === a.SPACE || e.key === a.ENTER) {
+      i(t[o].dataset.value);
+      return;
     }
-  }) : e) });
+  };
+  function d(e, o) {
+    return r == null || r === "" ? b === o ? 0 : -1 : e ? 0 : -1;
+  }
+  return /* @__PURE__ */ N("div", { ...m, className: h("flex gap-12", m.className), role: "radiogroup", children: V.map(g, (e, o) => {
+    if (!W(e))
+      return e;
+    const n = e.type.displayName, t = e.props.value, l = r === t;
+    return n?.includes("Button") ? y(e, {
+      ...e.props,
+      value: void 0,
+      role: "radio",
+      color: l ? "black" : "white",
+      name: u,
+      component: "span",
+      id: `${s}-${o}`,
+      disabled: p,
+      readOnly: c,
+      tabIndex: d(l, o),
+      "data-value": t,
+      "aria-checked": r === t,
+      onKeyDown: (f) => A(f, o),
+      onClick() {
+        i(t), e.props?.onClick?.(t);
+      }
+    }) : y(e, {
+      ...e.props,
+      name: u,
+      id: `${s}-${o}`,
+      disabled: p,
+      readOnly: c,
+      tabIndex: d(l, o),
+      checked: l,
+      onChange(f, C) {
+        i(C);
+      }
+    });
+  }) });
 }
 export {
   G as RadioGroup

package/molecules/Forms/Radios/RadioGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"RadioGroup.js","sources":["../../../../lib/molecules/Forms/Radios/RadioGroup.tsx"],"sourcesContent":["import { Children, cloneElement, type HTMLAttributes, isValidElement, useId } from 'react';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl.js';\nimport type { RadioProps } from '@/molecules/Forms/Radios/Radio.js';\nimport { useValue } from '@/hooks/useValue.js';\nimport classnames from 'classnames';\n\nexport interface RadioGroupProps<Value = string>\n  extends Pick<\n      FormControlProps<Value>,\n      | 'id'\n      | 'name'\n      | 'value'\n      | 'onChange'\n      | 'disabled'\n      | 'readOnly'\n      | 'tabIndex'\n      | 'description'\n      | 'validationStatus'\n      | 'errorMessage'\n    >,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function RadioGroup<Value = string>(props: RadioGroupProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    children,\n    value: initialValue,\n    defaultValue,\n    onChange,\n    disabled,\n    readOnly,\n    tabIndex = 0,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    defaultValue: defaultValue as Value,\n    onChange,\n  });\n\n  return (\n    <div {...rest} className={classnames('flex gap-12', rest.className)} role=\"radiogroup\">\n      {Children.map(children, (child, index) => {\n        return isValidElement(child)\n          ? cloneElement(child, {\n              ...child.props,\n              name,\n              id: `${id}-${index}`,\n              disabled,\n              readOnly,\n              tabIndex: tabIndex + index + 1,\n              checked: value === (child.props as RadioProps).value,\n              onChange(_: string, value: Value) {\n                setValue(value);\n              },\n            } as RadioProps<Value>)\n          : child;\n      })}\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","internalId","useId","id","name","children","initialValue","defaultValue","onChange","disabled","readOnly","tabIndex","rest","value","setValue","useValue","classnames","Children","child","index","isValidElement","cloneElement","_"],"mappings":";;;;AAsBO,SAASA,EAA2BC,GAA+B;AACxE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,UAAAE;AAAA,IACA,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACDZ,GAEE,EAAE,OAAAa,GAAO,UAAAC,EAAA,IAAaC,EAAgB;AAAA,IAC1C,MAAAX;AAAA,IACA,cAAAE;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD;AAED,2BACG,OAAA,EAAK,GAAGI,GAAM,WAAWI,EAAW,eAAeJ,EAAK,SAAS,GAAG,MAAK,cACvE,UAAAK,EAAS,IAAIZ,GAAU,CAACa,GAAOC,MACvBC,EAAeF,CAAK,IACvBG,EAAaH,GAAO;AAAA,IAClB,GAAGA,EAAM;AAAA,IACT,MAAAd;AAAA,IACA,IAAI,GAAGD,CAAE,IAAIgB,CAAK;AAAA,IAClB,UAAAV;AAAA,IACA,UAAAC;AAAA,IACA,UAAUC,IAAWQ,IAAQ;AAAA,IAC7B,SAASN,MAAWK,EAAM,MAAqB;AAAA,IAC/C,SAASI,GAAWT,GAAc;AAChC,MAAAC,EAASD,CAAK;AAAA,IAChB;AAAA,EAAA,CACoB,IACtBK,CACL,EAAA,CACH;AAEJ;"}
+{"version":3,"file":"RadioGroup.js","sources":["../../../../lib/molecules/Forms/Radios/RadioGroup.tsx"],"sourcesContent":["import {\n  Children,\n  cloneElement,\n  type HTMLAttributes,\n  isValidElement,\n  useId,\n  type ReactElement,\n} from 'react';\nimport type { FormControlProps } from '@/molecules/Forms/FormControl.js';\nimport type { RadioProps } from '@/molecules/Forms/Radios/Radio.js';\nimport { useValue } from '@/hooks/useValue.js';\nimport classnames from 'classnames';\nimport type { ButtonProps } from '@/molecules/Buttons/v2/Button';\nimport { KEY } from '@/hooks/keyboard.constants';\n\nexport interface RadioGroupProps<Value = string>\n  extends Pick<\n      FormControlProps<Value>,\n      | 'id'\n      | 'name'\n      | 'value'\n      | 'onChange'\n      | 'disabled'\n      | 'readOnly'\n      | 'tabIndex'\n      | 'description'\n      | 'validationStatus'\n      | 'errorMessage'\n    >,\n    Omit<HTMLAttributes<HTMLDivElement>, 'onChange'> {}\n\nexport function RadioGroup<Value = string>(props: RadioGroupProps<Value>) {\n  const internalId = useId();\n\n  const {\n    id = internalId,\n    name = id,\n    children,\n    value: initialValue,\n    defaultValue,\n    onChange,\n    disabled,\n    readOnly,\n    tabIndex = 0,\n    ...rest\n  } = props;\n\n  const { value, setValue } = useValue<Value>({\n    name,\n    initialValue,\n    defaultValue: defaultValue as Value,\n    onChange,\n  });\n\n  const handleKeyDown = (e: KeyboardEvent, index: number) => {\n    let newIndex = index;\n    const options = (e.target as any)!.parentNode!.querySelectorAll('[role=\"radio\"]');\n\n    if (e.key === KEY.ARROW_RIGHT || e.key === KEY.ARROW_DOWN) {\n      newIndex = (index + 1) % options.length;\n      options[newIndex]?.focus();\n    } else if (e.key === KEY.ARROW_LEFT || e.key === KEY.ARROW_UP) {\n      newIndex = (index - 1 + options.length) % options.length;\n      options[newIndex]?.focus();\n    } else if (e.key === KEY.SPACE || e.key === KEY.ENTER) {\n      setValue(options[index].dataset.value as Value);\n      return;\n    }\n  };\n\n  function getTabIndex(checked: boolean, index: number) {\n    if (value === undefined || value === null || value === '') {\n      return tabIndex === index ? 0 : -1;\n    }\n\n    return checked ? 0 : -1;\n  }\n\n  return (\n    <div {...rest} className={classnames('flex gap-12', rest.className)} role=\"radiogroup\">\n      {Children.map(children, (child, index) => {\n        if (!isValidElement(child)) {\n          return child;\n        }\n\n        const type = (child.type as unknown as ReactElement & { displayName?: string }).displayName;\n        const itemValue = (child.props as ButtonProps | RadioProps).value;\n        const checked = value === itemValue;\n\n        if (type?.includes('Button')) {\n          return cloneElement(child, {\n            ...child.props,\n            value: undefined,\n            role: 'radio',\n            color: checked ? 'black' : 'white',\n            name,\n            component: 'span',\n            id: `${id}-${index}`,\n            disabled,\n            readOnly,\n            tabIndex: getTabIndex(checked, index),\n            'data-value': itemValue,\n            'aria-checked': value === itemValue,\n            onKeyDown: (e: KeyboardEvent) => handleKeyDown(e, index),\n            onClick() {\n              setValue(itemValue as Value);\n              child.props?.onClick?.(itemValue as Value);\n            },\n          } as ButtonProps);\n        }\n\n        return cloneElement(child, {\n          ...child.props,\n          name,\n          id: `${id}-${index}`,\n          disabled,\n          readOnly,\n          tabIndex: getTabIndex(checked, index),\n          checked: checked,\n          onChange(_: string, value: Value) {\n            setValue(value);\n          },\n        } as RadioProps<Value>);\n      })}\n    </div>\n  );\n}\n"],"names":["RadioGroup","props","internalId","useId","id","name","children","initialValue","defaultValue","onChange","disabled","readOnly","tabIndex","rest","value","setValue","useValue","handleKeyDown","index","newIndex","options","KEY","getTabIndex","checked","classnames","Children","child","isValidElement","type","itemValue","cloneElement","e","_"],"mappings":";;;;;AA+BO,SAASA,EAA2BC,GAA+B;AACxE,QAAMC,IAAaC,EAAA,GAEb;AAAA,IACJ,IAAAC,IAAKF;AAAA,IACL,MAAAG,IAAOD;AAAA,IACP,UAAAE;AAAA,IACA,OAAOC;AAAA,IACP,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,GAAGC;AAAA,EAAA,IACDZ,GAEE,EAAE,OAAAa,GAAO,UAAAC,EAAA,IAAaC,EAAgB;AAAA,IAC1C,MAAAX;AAAA,IACA,cAAAE;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,EAAA,CACD,GAEKQ,IAAgB,CAAC,GAAkBC,MAAkB;AACzD,QAAIC,IAAWD;AACf,UAAME,IAAW,EAAE,OAAgB,WAAY,iBAAiB,gBAAgB;AAEhF,QAAI,EAAE,QAAQC,EAAI,eAAe,EAAE,QAAQA,EAAI;AAC7C,MAAAF,KAAYD,IAAQ,KAAKE,EAAQ,QACjCA,EAAQD,CAAQ,GAAG,MAAA;AAAA,aACV,EAAE,QAAQE,EAAI,cAAc,EAAE,QAAQA,EAAI;AACnD,MAAAF,KAAYD,IAAQ,IAAIE,EAAQ,UAAUA,EAAQ,QAClDA,EAAQD,CAAQ,GAAG,MAAA;AAAA,aACV,EAAE,QAAQE,EAAI,SAAS,EAAE,QAAQA,EAAI,OAAO;AACrD,MAAAN,EAASK,EAAQF,CAAK,EAAE,QAAQ,KAAc;AAC9C;AAAA,IACF;AAAA,EACF;AAEA,WAASI,EAAYC,GAAkBL,GAAe;AACpD,WAA2BJ,KAAU,QAAQA,MAAU,KAC9CF,MAAaM,IAAQ,IAAI,KAG3BK,IAAU,IAAI;AAAA,EACvB;AAEA,2BACG,OAAA,EAAK,GAAGV,GAAM,WAAWW,EAAW,eAAeX,EAAK,SAAS,GAAG,MAAK,cACvE,UAAAY,EAAS,IAAInB,GAAU,CAACoB,GAAOR,MAAU;AACxC,QAAI,CAACS,EAAeD,CAAK;AACvB,aAAOA;AAGT,UAAME,IAAQF,EAAM,KAA4D,aAC1EG,IAAaH,EAAM,MAAmC,OACtDH,IAAUT,MAAUe;AAE1B,WAAID,GAAM,SAAS,QAAQ,IAClBE,EAAaJ,GAAO;AAAA,MACzB,GAAGA,EAAM;AAAA,MACT,OAAO;AAAA,MACP,MAAM;AAAA,MACN,OAAOH,IAAU,UAAU;AAAA,MAC3B,MAAAlB;AAAA,MACA,WAAW;AAAA,MACX,IAAI,GAAGD,CAAE,IAAIc,CAAK;AAAA,MAClB,UAAAR;AAAA,MACA,UAAAC;AAAA,MACA,UAAUW,EAAYC,GAASL,CAAK;AAAA,MACpC,cAAcW;AAAA,MACd,gBAAgBf,MAAUe;AAAA,MAC1B,WAAW,CAACE,MAAqBd,EAAcc,GAAGb,CAAK;AAAA,MACvD,UAAU;AACR,QAAAH,EAASc,CAAkB,GAC3BH,EAAM,OAAO,UAAUG,CAAkB;AAAA,MAC3C;AAAA,IAAA,CACc,IAGXC,EAAaJ,GAAO;AAAA,MACzB,GAAGA,EAAM;AAAA,MACT,MAAArB;AAAA,MACA,IAAI,GAAGD,CAAE,IAAIc,CAAK;AAAA,MAClB,UAAAR;AAAA,MACA,UAAAC;AAAA,MACA,UAAUW,EAAYC,GAASL,CAAK;AAAA,MACpC,SAAAK;AAAA,MACA,SAASS,GAAWlB,GAAc;AAChC,QAAAC,EAASD,CAAK;AAAA,MAChB;AAAA,IAAA,CACoB;AAAA,EACxB,CAAC,EAAA,CACH;AAEJ;"}

package/molecules/Forms/Range.d.ts

@@ -1,5 +1,4 @@
-import { type InputHTMLAttributes } from 'react';
-import './range.css';
+import { InputHTMLAttributes } from 'react';
 interface RangeProps extends Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> {
     /**
      * Aria label