npm - fictoan-react - Versions diffs - 2.0.0-beta.17 → 2.0.0-beta.18 - Mend

fictoan-react 2.0.0-beta.17 → 2.0.0-beta.18

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (181) hide show

package/dist/components/Form/PinInputField/PinInputField.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"PinInputField.js","sources":["../../../../src/components/Form/PinInputField/PinInputField.tsx"],"sourcesContent":["// FRAMEWORK ===========================================================================================================\nimport React, { createRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from \"react\";\n\n// FICTOAN =============================================================================================================\nimport { InputField } from \"../InputField/InputField\";\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { Div } from \"../../Element/Tags\";\n\n// STYLES ==============================================================================================================\nimport \"./pin-input-field.css\";\n\n// TYPES ===============================================================================================================\nimport { CommonAndHTMLProps, SpacingTypes } from \"../../Element/constants\";\n\ninterface PinInputFieldHandle extends HTMLDivElement {\n reset: () => void;\n}\n\n// prettier-ignore\ntype PinInputFieldCustomProps = {\n numberOfFields : number;\n onChange ? : (value: string) => void;\n type ? : \"alphanumeric\" | \"number\";\n mask ? : boolean;\n isOTP ? : boolean;\n autoFocus ? : boolean;\n pasteFromClipboard ? : \"enabled\" | \"disabled\";\n focusFirstInputOnReset ? : boolean;\n isFullWidth ? : boolean;\n ariaLabel ? : string;\n // FormItem integration\n label ? : string;\n helpText ? : string | React.ReactNode;\n errorText ? : string;\n required ? : boolean;\n size ? : Exclude<SpacingTypes, \"nano\" | \"huge\">;\n};\n\nexport type PinInputFieldElementType = HTMLDivElement & { reset: () => void };\nexport type PinInputFieldProps = Omit<CommonAndHTMLProps<PinInputFieldElementType>, keyof PinInputFieldCustomProps> &\n PinInputFieldCustomProps;\n\n// UTILITIES ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nfunction validate(value: string, type: \"alphanumeric\" | \"number\") {\n const NUMERIC_REGEX = /^[0-9]+$/;\n const ALPHA_NUMERIC_REGEX = /^[a-zA-Z0-9]+$/i;\n const regex = type === \"alphanumeric\" ? ALPHA_NUMERIC_REGEX : NUMERIC_REGEX;\n return regex.test(value);\n}\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const PinInputField = React.forwardRef(\n (\n {\n numberOfFields: length,\n onChange,\n type = \"number\",\n mask = false,\n isOTP = false,\n autoFocus = false,\n pasteFromClipboard = \"enabled\",\n focusFirstInputOnReset = true,\n isFullWidth,\n ariaLabel,\n // FormItem integration\n label,\n helpText,\n errorText,\n required,\n size,\n ...props\n }: PinInputFieldProps,\n ref: React.Ref<PinInputFieldElementType>\n ) => {\n // REFS =====================================================================================================\n const pinInputFieldRef = useRef<PinInputFieldElementType>(null);\n const [inputRefs, setInputRefs] = useState<React.RefObject<HTMLInputElement>[]>([]);\n\n // STATES ===================================================================================================\n const [values, setValues] = useState<string[]>([]);\n const [moveFocus, setMoveFocus] = useState<boolean>(true);\n const [focusedIndex, setFocusedIndex] = useState<number>(-1);\n\n // CONSTANTS ================================================================================================\n const reactId = React.useId();\n const inputGroupId = props.id || `pin-input-${reactId.replace(/:/g, \"\")}`;\n const inputDescription = ariaLabel || label || \"Enter verification code\";\n const { describedBy } = deriveAriaIds(inputGroupId, helpText, errorText);\n\n // HANDLERS =================================================================================================\n const focus = useCallback(\n (index: number) => {\n const ref = inputRefs[index];\n ref?.current?.focus();\n },\n [inputRefs]\n );\n\n const focusNext = useCallback(\n (index: number) => {\n if (!moveFocus) return;\n const next = index + 1 < length ? index + 1 : null;\n if (next) {\n focus(next);\n }\n },\n [focus, length, moveFocus]\n );\n\n const handleResetPinInput = useCallback(() => {\n setValues(Array(length).fill(\"\"));\n onChange?.(\"\"); // Clear the complete value\n if (focusFirstInputOnReset) {\n focus(0);\n setFocusedIndex(0);\n }\n }, [length, onChange, focus, focusFirstInputOnReset]);\n\n // VALUE HANDLING ==============================================================================================\n const setValue = useCallback(\n (value: string, index: number) => {\n const nextValues = [...values];\n nextValues[index] = value;\n setValues(nextValues);\n\n // Emit complete PIN value\n onChange?.(nextValues.join(\"\"));\n\n const isComplete =\n value !== \"\" &&\n nextValues.length === length &&\n nextValues.every((inputValue) => inputValue != null && inputValue !== \"\") &&\n index === length - 1;\n\n if (!isComplete) {\n setMoveFocus(true);\n focusNext(index);\n }\n },\n [focusNext, length, onChange, values]\n );\n\n // Updated input handler to work with both string values and events\n const handleInputChange = useCallback((inputValue: string | React.FormEvent<HTMLInputElement>, inputFieldIndex: number) => {\n // Extract value whether we get a string or an event\n const value = typeof inputValue === \"string\" ? inputValue : (inputValue.target as HTMLInputElement).value;\n const currentValue = values[inputFieldIndex];\n\n if (value === \"\") {\n setValue(\"\", inputFieldIndex);\n return;\n }\n\n // Rest of the logic remains the same\n if (value.length > 1 && inputFieldIndex < length - 1) {\n if (validate(value, type)) {\n let nextValue: string[] = [];\n const chars = value.split(\"\");\n\n if (currentValue === \"\") {\n nextValue = chars.filter((_, j) => inputFieldIndex + j < length);\n } else {\n const isAppending = inputRefs[inputFieldIndex].current?.selectionEnd === value.length;\n if (isAppending) {\n nextValue = chars.filter((_, j) => j > 0 && inputFieldIndex + j - 1 < length);\n } else {\n nextValue = chars.filter((_, j) => j < value.length - 1 && inputFieldIndex + j < length);\n }\n }\n\n const newValues = values.map((v, j) =>\n j >= inputFieldIndex && j < inputFieldIndex + nextValue.length\n ? nextValue[j - inputFieldIndex]\n : v\n );\n\n setValues(newValues);\n onChange?.(newValues.join(\"\"));\n\n const nextFocusIndex = Math.min(inputFieldIndex + nextValue.length, length - 1);\n focus(nextFocusIndex);\n }\n } else {\n let nextValue = value;\n if (currentValue?.length > 0) {\n nextValue = value.charAt(value.length - 1);\n }\n if (validate(nextValue, type)) {\n setValue(nextValue, inputFieldIndex);\n }\n }\n }, [length, onChange, setValue, type, values, focus, inputRefs]);\n\n const handleKeyDown = useCallback((event: React.KeyboardEvent<HTMLInputElement>, i: number) => {\n if (event.key === \"Backspace\") {\n if ((event.target as HTMLInputElement).value === \"\") {\n if (i > 0) {\n const newIndex = i - 1;\n setValue(\"\", newIndex);\n focus(newIndex);\n setMoveFocus(true);\n }\n } else {\n setMoveFocus(false);\n }\n } else if (event.key === \"Escape\") {\n inputRefs[i].current?.blur();\n handleBlur();\n } else if (event.key === \"ArrowRight\") {\n if (i < length - 1) {\n focus(i + 1);\n }\n } else if (event.key === \"ArrowLeft\") {\n if (i > 0) {\n focus(i - 1);\n }\n }\n }, [focus, setValue, inputRefs, length]);\n\n // EVENT HANDLERS ==============================================================================================\n // Updated focus handler to work with event type\n const handleFocus = useCallback((e: React.FocusEvent<HTMLInputElement> | undefined, i: number) => {\n setFocusedIndex(i);\n }, []);\n\n // When moving around the InputElements using tab key, browsers automatically select\n // the value (if it exists) in the InputElement - which we want to disable. Additionally,\n // when an existing value is selected/highlighted and pasted over, there is no way to\n // clearly distinguish between the other 2 scenarios of pasting by keeping the cursor before\n // and after the existing value. Specific example: If the existing value is 5, the event\n // when highlighting and pasting '567' is the same as placing the cursor before the existing\n // value and pasting '67'. By disabling this, we eliminate one of these cases.\n // Is this a hack? Yes. Is there a better way? IDK. Does it matter? Not unless there is a\n // valid reason for users to need selecting a single InputElement within a PinInput.\n const handleSelect = useCallback((e: React.SyntheticEvent<HTMLInputElement, Event>) => {\n const target = e.target as HTMLInputElement;\n setTimeout(() => {\n target.setSelectionRange(target.value.length, target.value.length);\n }, 0);\n }, []);\n\n const handleBlur = useCallback(() => {\n setFocusedIndex(-1);\n }, []);\n\n // EFFECTS =====================================================================================================\n useEffect(() => {\n setInputRefs((inputRefs) => {\n const refs = Array(length)\n .fill(0)\n .map((_, i) => {\n const ref = inputRefs[i] || createRef();\n if (autoFocus && i === 0) {\n ref.current?.focus();\n }\n return ref;\n });\n return refs;\n });\n }, [length, autoFocus]);\n\n useImperativeHandle(\n ref,\n () => ({\n ...(pinInputFieldRef.current as HTMLDivElement),\n reset: handleResetPinInput\n }) as PinInputFieldHandle,\n [handleResetPinInput]\n );\n\n // RENDER ==================================================================================================\n let classNames: string[] = [];\n\n if (isFullWidth) {\n classNames.push(\"full-width\");\n }\n\n return (\n <FormItem\n label={label}\n htmlFor={inputGroupId}\n helpText={helpText}\n errorText={errorText}\n required={required}\n size={size}\n >\n <Div\n data-pin-input-field\n ref={pinInputFieldRef}\n id={inputGroupId}\n classNames={isFullWidth ? [\"full-width\"] : []}\n role=\"group\"\n aria-label={label ? undefined : inputDescription}\n aria-invalid={Boolean(errorText) || undefined}\n aria-required={required}\n aria-describedby={describedBy}\n {...props}\n >\n {Array.from({ length }, (_, i) => (\n <InputField\n key={i}\n id={`${inputGroupId}-${i}`}\n ref={inputRefs[i]}\n type={mask ? \"password\" : type === \"number\" ? \"tel\" : \"text\"}\n inputMode={type === \"number\" ? \"numeric\" : \"text\"}\n onChange={(value: string | React.FormEvent<HTMLInputElement>) => handleInputChange(value, i)}\n onKeyDown={(e) => handleKeyDown(e, i)}\n onFocus={(e) => handleFocus(e as React.FocusEvent<HTMLInputElement>, i)}\n onSelect={handleSelect}\n onBlur={handleBlur}\n placeholder={focusedIndex !== i ? \"\\u2981\" : undefined}\n autoComplete={isOTP ? \"one-time-code\" : \"off\"}\n value={values[i] || \"\"}\n autoFocus={autoFocus && i === 0}\n onCopy={(e) => pasteFromClipboard === \"disabled\" && e.preventDefault()}\n onPaste={(e) => pasteFromClipboard === \"disabled\" && e.preventDefault()}\n aria-label={`Digit ${i + 1} of ${length}`}\n aria-required={required}\n />\n ))}\n </Div>\n </FormItem>\n );\n }\n);\nPinInputField.displayName = \"PinInputField\";\n"],"names":["validate","value","type","PinInputField","React","length","onChange","mask","isOTP","autoFocus","pasteFromClipboard","focusFirstInputOnReset","isFullWidth","ariaLabel","label","helpText","errorText","required","size","props","ref","pinInputFieldRef","useRef","inputRefs","setInputRefs","useState","values","setValues","moveFocus","setMoveFocus","focusedIndex","setFocusedIndex","reactId","inputGroupId","inputDescription","describedBy","deriveAriaIds","focus","useCallback","index","focusNext","next","handleResetPinInput","setValue","nextValues","inputValue","handleInputChange","inputFieldIndex","currentValue","nextValue","chars","_","j","_a","newValues","v","nextFocusIndex","handleKeyDown","event","i","newIndex","handleBlur","handleFocus","e","handleSelect","target","useEffect","createRef","useImperativeHandle","jsx","FormItem","Div","InputField"],"mappings":"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"}

package/dist/components/Form/RadioButton/RadioButton.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAQvC,OAAO,oBAAoB,CAAC;AAM5B,eAAO,MAAM,WAAW;;;;;;;;;;;~~wCAqEvB~~,CAAC"}
1	+ {"version":3,"file":"RadioButton.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/RadioButton/RadioButton.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAQvC,OAAO,oBAAoB,CAAC;AAM5B,eAAO,MAAM,WAAW;;;;;;;;;;;wCA6EvB,CAAC"}

package/dist/components/Form/RadioButton/RadioButton.js ADDED Viewed

@@ -0,0 +1,82 @@
+"use client";
+import { jsx as d, jsxs as P } from "react/jsx-runtime";
+import f, { useMemo as j } from "react";
+import { deriveAriaIds as w, FormItem as k } from "../FormItem/FormItem.js";
+import { separateWrapperProps as A } from "../../../utils/propSeparation.js";
+/* empty css                 */
+import { Element as e } from "../../Element/Element.js";
+const C = f.forwardRef(
+  ({
+    id: r,
+    name: s,
+    value: n,
+    label: l,
+    helpText: m,
+    errorText: t,
+    onChange: p,
+    checked: u,
+    disabled: c,
+    required: i,
+    labelFirst: a,
+    ...v
+  }, h) => {
+    const I = j(() => s || r, [s, r]), y = (N) => {
+      N.target.checked && p && p(n);
+    }, { wrapperProps: B, inputProps: R } = A(v), b = f.useId(), o = r || `radio-${b.replace(/:/g, "")}`, { describedBy: g } = w(o, m, t);
+    return /* @__PURE__ */ d(
+      e,
+      {
+        as: "div",
+        "data-radio-button": !0,
+        ref: h,
+        "aria-disabled": c,
+        className: a ? "label-first" : void 0,
+        ...B,
+        children: /* @__PURE__ */ P(
+          k,
+          {
+            label: l,
+            htmlFor: o,
+            helpText: m,
+            errorText: t,
+            required: i,
+            labelFirst: a,
+            children: [
+              /* @__PURE__ */ d(
+                e,
+                {
+                  as: "input",
+                  type: "radio",
+                  id: o,
+                  name: I,
+                  value: n,
+                  checked: u,
+                  disabled: c,
+                  required: i,
+                  "aria-invalid": !!t || void 0,
+                  "aria-required": i,
+                  "aria-describedby": g,
+                  onChange: y,
+                  ...R
+                }
+              ),
+              /* @__PURE__ */ d(
+                e,
+                {
+                  as: a ? "label" : "div",
+                  htmlFor: a ? o : void 0,
+                  "data-radio": !0
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+C.displayName = "RadioButton";
+export {
+  C as RadioButton
+};
+//# sourceMappingURL=RadioButton.js.map

package/dist/components/Form/RadioButton/RadioButton.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RadioButton.js","sources":["../../../../src/components/Form/RadioButton/RadioButton.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useMemo } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { Element } from \"$element\";\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { separateWrapperProps } from \"../../../utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./radio-button.css\";\n\n// OTHER ===============================================================================================================\nimport { RadioButtonProps, RadioButtonElementType } from \"./constants\";\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const RadioButton = React.forwardRef(\n (\n {\n id,\n name,\n value,\n label,\n helpText,\n errorText,\n onChange,\n checked,\n disabled,\n required,\n labelFirst,\n ...props\n }: RadioButtonProps,\n ref: React.Ref<RadioButtonElementType>\n ) => {\n const derivedName = useMemo(() => name || id, [name, id]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n if (e.target.checked && onChange) {\n onChange(value);\n }\n };\n\n // Separate wrapper-level props (margin, padding, etc.) from input-specific props\n const { wrapperProps, inputProps } = separateWrapperProps(props);\n\n const reactId = React.useId();\n const finalId = id || `radio-${reactId.replace(/:/g, \"\")}`;\n const { describedBy } = deriveAriaIds(finalId, helpText, errorText);\n\n // The native <input type=\"radio\"> below already has role=\"radio\". The\n // wrapper div used to duplicate that role, which made AT announce two\n // radios per RadioButton — left as a plain wrapper now.\n return (\n <Element<RadioButtonElementType>\n as=\"div\"\n data-radio-button\n ref={ref}\n aria-disabled={disabled}\n className={labelFirst ? \"label-first\" : undefined}\n {...wrapperProps}\n >\n <FormItem\n label={label}\n htmlFor={finalId}\n helpText={helpText}\n errorText={errorText}\n required={required}\n labelFirst={labelFirst}\n >\n <Element\n as=\"input\"\n type=\"radio\"\n id={finalId}\n name={derivedName}\n value={value}\n checked={checked}\n disabled={disabled}\n required={required}\n aria-invalid={Boolean(errorText) || undefined}\n aria-required={required}\n aria-describedby={describedBy}\n onChange={handleChange}\n {...inputProps}\n />\n <Element\n as={labelFirst ? \"label\" : \"div\"}\n htmlFor={labelFirst ? finalId : undefined}\n data-radio\n />\n </FormItem>\n </Element>\n );\n }\n);\nRadioButton.displayName = \"RadioButton\";\n"],"names":["RadioButton","React","id","name","value","label","helpText","errorText","onChange","checked","disabled","required","labelFirst","props","ref","derivedName","useMemo","handleChange","e","wrapperProps","inputProps","separateWrapperProps","reactId","finalId","describedBy","deriveAriaIds","jsx","Element","jsxs","FormItem"],"mappings":";;;;;;AAeO,MAAMA,IAAcC,EAAM;AAAA,EAC7B,CACI;AAAA,IACI,IAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,UAAMC,IAAcC,EAAQ,MAAMb,KAAQD,GAAI,CAACC,GAAMD,CAAE,CAAC,GAElDe,IAAe,CAACC,MAA2C;AAC7D,MAAIA,EAAE,OAAO,WAAWV,KACpBA,EAASJ,CAAK;AAAA,IAEtB,GAGM,EAAE,cAAAe,GAAc,YAAAC,MAAeC,EAAqBR,CAAK,GAEzDS,IAAUrB,EAAM,MAAA,GAChBsB,IAAUrB,KAAM,SAASoB,EAAQ,QAAQ,MAAM,EAAE,CAAC,IAClD,EAAE,aAAAE,EAAA,IAAgBC,EAAcF,GAASjB,GAAUC,CAAS;AAKlE,WACI,gBAAAmB;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,qBAAiB;AAAA,QACjB,KAAAb;AAAA,QACA,iBAAeJ;AAAA,QACf,WAAWE,IAAa,gBAAgB;AAAA,QACvC,GAAGO;AAAA,QAEJ,UAAA,gBAAAS;AAAA,UAACC;AAAA,UAAA;AAAA,YACG,OAAAxB;AAAA,YACA,SAASkB;AAAA,YACT,UAAAjB;AAAA,YACA,WAAAC;AAAA,YACA,UAAAI;AAAA,YACA,YAAAC;AAAA,YAEA,UAAA;AAAA,cAAA,gBAAAc;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACG,IAAG;AAAA,kBACH,MAAK;AAAA,kBACL,IAAIJ;AAAA,kBACJ,MAAMR;AAAA,kBACN,OAAAX;AAAA,kBACA,SAAAK;AAAA,kBACA,UAAAC;AAAA,kBACA,UAAAC;AAAA,kBACA,gBAAc,EAAQJ,KAAc;AAAA,kBACpC,iBAAeI;AAAA,kBACf,oBAAkBa;AAAA,kBAClB,UAAUP;AAAA,kBACT,GAAGG;AAAA,gBAAA;AAAA,cAAA;AAAA,cAER,gBAAAM;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBACG,IAAIf,IAAa,UAAU;AAAA,kBAC3B,SAASA,IAAaW,IAAU;AAAA,kBAChC,cAAU;AAAA,gBAAA;AAAA,cAAA;AAAA,YACd;AAAA,UAAA;AAAA,QAAA;AAAA,MACJ;AAAA,IAAA;AAAA,EAGZ;AACJ;AACAvB,EAAY,cAAc;"}

package/dist/components/Form/RadioButton/RadioGroup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/RadioButton/RadioGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAQvC,OAAO,mBAAmB,CAAC;AAM3B,eAAO,MAAM,UAAU;;;;~~wCAuGtB~~,CAAC"}
1	+ {"version":3,"file":"RadioGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/RadioButton/RadioGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAQvC,OAAO,mBAAmB,CAAC;AAM3B,eAAO,MAAM,UAAU;;;;wCA6GtB,CAAC"}

package/dist/components/Form/RadioButton/RadioGroup.js ADDED Viewed

@@ -0,0 +1,97 @@
+"use client";
+import { jsx as i, jsxs as L } from "react/jsx-runtime";
+import b, { useMemo as M } from "react";
+import { Div as I } from "../../Element/Tags.js";
+import { deriveAriaIds as P, FormItem as V } from "../FormItem/FormItem.js";
+/* empty css                */
+import { Element as x } from "../../Element/Element.js";
+const z = b.forwardRef(
+  ({
+    id: e,
+    name: u,
+    label: c,
+    helpText: n,
+    errorText: t,
+    options: y,
+    value: f,
+    defaultValue: $,
+    onChange: d,
+    align: h,
+    equaliseWidth: g,
+    equalizeWidth: N,
+    required: v,
+    disabled: R,
+    size: k,
+    columns: s,
+    labelFirst: l,
+    ...w
+  }, G) => {
+    const j = M(() => u || e, [u, e]), B = (p) => {
+      d == null || d(p.target.value);
+    };
+    let o = [];
+    h && o.push(`align-${h}`), (g || N) && o.push("equalise-width"), s && o.push("with-columns"), l && o.push("label-first");
+    const F = b.useId(), r = e || `radio-group-${F.replace(/:/g, "")}`, { describedBy: q } = P(r, n, t);
+    return /* @__PURE__ */ i(
+      V,
+      {
+        label: c,
+        htmlFor: r,
+        helpText: n,
+        errorText: t,
+        required: v,
+        size: k,
+        children: /* @__PURE__ */ i(
+          x,
+          {
+            as: "div",
+            "data-radio-group": !0,
+            ref: G,
+            id: r,
+            classNames: o,
+            role: "radiogroup",
+            "aria-label": c,
+            "aria-invalid": !!t || void 0,
+            "aria-required": v,
+            "aria-describedby": q,
+            style: s ? { gridTemplateColumns: `repeat(${s}, 1fr)` } : void 0,
+            ...w,
+            children: y.map((p, A) => {
+              const { id: C, value: m, label: D, ...E } = p, a = C || `${r}-option-${A}`;
+              return /* @__PURE__ */ L(
+                I,
+                {
+                  "data-radio-button": !0,
+                  className: l ? "label-first" : void 0,
+                  children: [
+                    /* @__PURE__ */ i(
+                      "input",
+                      {
+                        type: "radio",
+                        id: a,
+                        name: j,
+                        value: m,
+                        checked: f ? f === m : $ === m,
+                        disabled: R,
+                        onChange: B,
+                        ...E
+                      }
+                    ),
+                    /* @__PURE__ */ i("label", { htmlFor: a, children: D }),
+                    l ? /* @__PURE__ */ i("label", { htmlFor: a, "data-radio": !0 }) : /* @__PURE__ */ i(I, { "data-radio": !0 })
+                  ]
+                },
+                a
+              );
+            })
+          }
+        )
+      }
+    );
+  }
+);
+z.displayName = "RadioGroup";
+export {
+  z as RadioGroup
+};
+//# sourceMappingURL=RadioGroup.js.map

package/dist/components/Form/RadioButton/RadioGroup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RadioGroup.js","sources":["../../../../src/components/Form/RadioButton/RadioGroup.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useMemo } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { Div } from \"../../Element/Tags\";\nimport { Element } from \"$element\";\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\n\n// STYLES ==============================================================================================================\nimport \"./radio-group.css\";\n\n// TYPES ===============================================================================================================\nimport { RadioGroupProps } from \"./constants\";\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const RadioGroup = React.forwardRef(\n (\n {\n id,\n name,\n label,\n helpText,\n errorText,\n options,\n value,\n defaultValue,\n onChange,\n align,\n equaliseWidth,\n equalizeWidth,\n required,\n disabled,\n size,\n columns,\n labelFirst,\n ...props\n }: RadioGroupProps,\n ref: React.Ref<HTMLDivElement>\n ) => {\n const derivedName = useMemo(() => name || id, [name, id]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(e.target.value);\n };\n\n let classNames: string[] = [];\n\n if (align) {\n classNames.push(`align-${align}`);\n }\n\n if (equaliseWidth || equalizeWidth) {\n classNames.push(`equalise-width`);\n }\n\n if (columns) {\n classNames.push(`with-columns`);\n }\n\n if (labelFirst) {\n classNames.push(`label-first`);\n }\n\n const reactId = React.useId();\n const finalGroupId = id || `radio-group-${reactId.replace(/:/g, \"\")}`;\n const { describedBy } = deriveAriaIds(finalGroupId, helpText, errorText);\n\n return (\n <FormItem\n label={label}\n htmlFor={finalGroupId}\n helpText={helpText}\n errorText={errorText}\n required={required}\n size={size}\n >\n <Element\n as=\"div\"\n data-radio-group\n ref={ref}\n id={finalGroupId}\n classNames={classNames}\n role=\"radiogroup\"\n aria-label={label}\n aria-invalid={Boolean(errorText) || undefined}\n aria-required={required}\n aria-describedby={describedBy}\n style={columns ? { gridTemplateColumns: `repeat(${columns}, 1fr)` } : undefined}\n {...props}\n >\n {options.map((option, index) => {\n const { id: optionId, value: optionValue, label: optionLabel, ...optionProps } = option;\n const finalId = optionId || `${finalGroupId}-option-${index}`;\n const isChecked = value ? value === optionValue : defaultValue === optionValue;\n\n return (\n <Div\n key={finalId}\n data-radio-button\n className={labelFirst ? \"label-first\" : undefined}\n >\n <input\n type=\"radio\"\n id={finalId}\n name={derivedName}\n value={optionValue}\n checked={isChecked}\n disabled={disabled}\n onChange={handleChange}\n {...optionProps}\n />\n <label htmlFor={finalId}>{optionLabel}</label>\n {labelFirst ? (\n <label htmlFor={finalId} data-radio />\n ) : (\n <Div data-radio />\n )}\n </Div>\n );\n })}\n </Element>\n </FormItem>\n );\n }\n);\nRadioGroup.displayName = \"RadioGroup\";\n"],"names":["RadioGroup","React","id","name","label","helpText","errorText","options","value","defaultValue","onChange","align","equaliseWidth","equalizeWidth","required","disabled","size","columns","labelFirst","props","ref","derivedName","useMemo","handleChange","e","classNames","reactId","finalGroupId","describedBy","deriveAriaIds","jsx","FormItem","Element","option","index","optionId","optionValue","optionLabel","optionProps","finalId","jsxs","Div"],"mappings":";;;;;;AAeO,MAAMA,IAAaC,EAAM;AAAA,EAC5B,CACI;AAAA,IACI,IAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,SAAAC;AAAA,IACA,OAAAC;AAAA,IACA,cAAAC;AAAA,IACA,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,eAAAC;AAAA,IACA,eAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,SAAAC;AAAA,IACA,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,UAAMC,IAAcC,EAAQ,MAAMnB,KAAQD,GAAI,CAACC,GAAMD,CAAE,CAAC,GAElDqB,IAAe,CAACC,MAA2C;AAC7D,MAAAd,KAAA,QAAAA,EAAWc,EAAE,OAAO;AAAA,IACxB;AAEA,QAAIC,IAAuB,CAAA;AAE3B,IAAId,KACAc,EAAW,KAAK,SAASd,CAAK,EAAE,IAGhCC,KAAiBC,MACjBY,EAAW,KAAK,gBAAgB,GAGhCR,KACAQ,EAAW,KAAK,cAAc,GAG9BP,KACAO,EAAW,KAAK,aAAa;AAGjC,UAAMC,IAAUzB,EAAM,MAAA,GAChB0B,IAAezB,KAAM,eAAewB,EAAQ,QAAQ,MAAM,EAAE,CAAC,IAC7D,EAAE,aAAAE,EAAA,IAAgBC,EAAcF,GAActB,GAAUC,CAAS;AAEvE,WACI,gBAAAwB;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAA3B;AAAA,QACA,SAASuB;AAAA,QACT,UAAAtB;AAAA,QACA,WAAAC;AAAA,QACA,UAAAQ;AAAA,QACA,MAAAE;AAAA,QAEA,UAAA,gBAAAc;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,oBAAgB;AAAA,YAChB,KAAAZ;AAAA,YACA,IAAIO;AAAA,YACJ,YAAAF;AAAA,YACA,MAAK;AAAA,YACL,cAAYrB;AAAA,YACZ,gBAAc,EAAQE,KAAc;AAAA,YACpC,iBAAeQ;AAAA,YACf,oBAAkBc;AAAA,YAClB,OAAOX,IAAU,EAAE,qBAAqB,UAAUA,CAAO,aAAa;AAAA,YACrE,GAAGE;AAAA,YAEH,UAAAZ,EAAQ,IAAI,CAAC0B,GAAQC,MAAU;AAC5B,oBAAM,EAAE,IAAIC,GAAU,OAAOC,GAAa,OAAOC,GAAa,GAAGC,EAAA,IAAgBL,GAC3EM,IAAUJ,KAAY,GAAGR,CAAY,WAAWO,CAAK;AAG3D,qBACI,gBAAAM;AAAA,gBAACC;AAAA,gBAAA;AAAA,kBAEG,qBAAiB;AAAA,kBACjB,WAAWvB,IAAa,gBAAgB;AAAA,kBAExC,UAAA;AAAA,oBAAA,gBAAAY;AAAA,sBAAC;AAAA,sBAAA;AAAA,wBACG,MAAK;AAAA,wBACL,IAAIS;AAAA,wBACJ,MAAMlB;AAAA,wBACN,OAAOe;AAAA,wBACP,SAbM5B,IAAQA,MAAU4B,IAAc3B,MAAiB2B;AAAA,wBAcvD,UAAArB;AAAA,wBACA,UAAUQ;AAAA,wBACT,GAAGe;AAAA,sBAAA;AAAA,oBAAA;AAAA,oBAER,gBAAAR,EAAC,SAAA,EAAM,SAASS,GAAU,UAAAF,GAAY;AAAA,oBACrCnB,IACG,gBAAAY,EAAC,SAAA,EAAM,SAASS,GAAS,cAAU,GAAA,CAAC,IAEpC,gBAAAT,EAACW,GAAA,EAAI,cAAU,GAAA,CAAC;AAAA,kBAAA;AAAA,gBAAA;AAAA,gBAlBfF;AAAA,cAAA;AAAA,YAsBjB,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAGZ;AACJ;AACAvC,EAAW,cAAc;"}

package/dist/components/Form/RadioButton/RadioTabGroup.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"RadioTabGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/RadioButton/RadioTabGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAUjF,OAAO,uBAAuB,CAAC;AAW/B,eAAO,MAAM,aAAa;;~~wCAgOzB~~,CAAC"}
1	+ {"version":3,"file":"RadioTabGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/RadioButton/RadioTabGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4D,MAAM,OAAO,CAAC;AAUjF,OAAO,uBAAuB,CAAC;AAW/B,eAAO,MAAM,aAAa;;wCA0OzB,CAAC"}

package/dist/components/Form/RadioButton/RadioTabGroup.js ADDED Viewed

@@ -0,0 +1,182 @@
+"use client";
+import { jsx as s, jsxs as d } from "react/jsx-runtime";
+import y, { useMemo as Y, useRef as M, useState as p, useCallback as X, useEffect as q } from "react";
+import { Div as c } from "../../Element/Tags.js";
+import { deriveAriaIds as Z, FormItem as _ } from "../FormItem/FormItem.js";
+import { separateWrapperProps as tt } from "../../../utils/propSeparation.js";
+/* empty css                    */
+import { Element as et } from "../../Element/Element.js";
+const rt = y.forwardRef(
+  ({
+    id: u,
+    name: S,
+    label: x,
+    helpText: N,
+    errorText: m,
+    options: f,
+    defaultValue: ot,
+    value: h,
+    required: P,
+    onChange: b,
+    size: v = "medium",
+    bgColour: st,
+    disabled: C,
+    ...G
+  }, j) => {
+    const R = Y(() => S || u, [S, u]), i = M(null), [F, E] = p({
+      width: 0,
+      transform: "translateX(0)"
+    }), [$, T] = p(!1), [a, D] = p(0), [w, L] = p(0), g = M([]), W = X(() => {
+      if (!i.current) return;
+      const t = i.current, e = t.closest("[data-input-wrapper]");
+      if (t && e) {
+        const o = t.scrollWidth, n = e.clientWidth, r = o > n;
+        T(r), L(r ? o - n : 0);
+      }
+    }, []);
+    q(() => {
+      const t = i.current;
+      if (!t) return;
+      W();
+      const e = new ResizeObserver(() => {
+        W();
+      });
+      return e.observe(t), t.closest("[data-input-wrapper]") && e.observe(t.closest("[data-input-wrapper]")), () => e.disconnect();
+    }, [W]), q(() => {
+      const t = f.findIndex((e) => e.value === h);
+      if (t >= 0) {
+        const e = () => {
+          const o = g.current[t];
+          if (o) {
+            const n = o.offsetWidth;
+            let r = "translateX(0)";
+            t > 0 && (r = `translateX(${g.current.slice(0, t).reduce((U, I) => U + ((I == null ? void 0 : I.offsetWidth) || 0), 0)}px)`), E({ width: n, transform: r });
+          }
+        };
+        if (document.fonts && document.fonts.ready)
+          document.fonts.ready.then(() => {
+            requestAnimationFrame(() => {
+              requestAnimationFrame(e);
+            });
+          });
+        else {
+          const o = setTimeout(e, 100);
+          return () => clearTimeout(o);
+        }
+      }
+    }, [h, f]);
+    const O = (t) => {
+      b == null || b(t.target.value);
+    }, { wrapperProps: V, inputProps: z } = tt(G), A = X((t) => {
+      const e = i.current;
+      if (!e) return;
+      const n = e.clientWidth * 0.8;
+      let r = t === "right" ? Math.min(a + n, w) : Math.max(a - n, 0);
+      D(r), requestAnimationFrame(() => {
+        e.style.transform = `translateX(-${r}px)`;
+      });
+    }, [a, w]), H = a > 0, J = a < w, k = [];
+    v && k.push(`size-${v}`);
+    const K = y.useId(), l = u || `radio-tab-group-${K.replace(/:/g, "")}`, { describedBy: Q } = Z(l, N, m);
+    return /* @__PURE__ */ s(
+      _,
+      {
+        label: x,
+        htmlFor: l,
+        helpText: N,
+        errorText: m,
+        required: P,
+        size: v,
+        ...V,
+        children: /* @__PURE__ */ d(
+          et,
+          {
+            as: "div",
+            "data-radio-tab-group": !0,
+            ref: j,
+            id: l,
+            classNames: k,
+            name: R,
+            role: "radiogroup",
+            "aria-label": x,
+            "aria-invalid": !!m || void 0,
+            "aria-required": P,
+            "aria-describedby": Q,
+            ...z,
+            children: [
+              $ && H && /* @__PURE__ */ s(
+                c,
+                {
+                  className: "scroll-button left",
+                  onClick: () => A("left"),
+                  children: /* @__PURE__ */ s("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ s("polyline", { points: "15 18 9 12 15 6" }) })
+                }
+              ),
+              /* @__PURE__ */ d(c, { className: "rtg-options-container", children: [
+                /* @__PURE__ */ d(
+                  c,
+                  {
+                    className: "rtg-options-wrapper",
+                    ref: i,
+                    children: [
+                      /* @__PURE__ */ s(
+                        c,
+                        {
+                          className: "indicator",
+                          style: {
+                            width: `${F.width}px`,
+                            transform: F.transform
+                          }
+                        }
+                      ),
+                      f.map((t, e) => {
+                        const { id: o, ...n } = t, r = o || `${l}-option-${e}`;
+                        return /* @__PURE__ */ d(y.Fragment, { children: [
+                          /* @__PURE__ */ s(
+                            "input",
+                            {
+                              type: "radio",
+                              ...n,
+                              id: r,
+                              name: R,
+                              checked: h === t.value,
+                              disabled: C || t.disabled,
+                              onChange: O
+                            }
+                          ),
+                          /* @__PURE__ */ s(
+                            "label",
+                            {
+                              ref: (B) => {
+                                g.current[e] = B;
+                              },
+                              htmlFor: r,
+                              children: t.label
+                            }
+                          )
+                        ] }, r);
+                      })
+                    ]
+                  }
+                ),
+                $ && J && /* @__PURE__ */ s(
+                  c,
+                  {
+                    className: "scroll-button right",
+                    onClick: () => A("right"),
+                    children: /* @__PURE__ */ s("svg", { viewBox: "0 0 24 24", children: /* @__PURE__ */ s("polyline", { points: "9 6 15 12 9 18" }) })
+                  }
+                )
+              ] })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+rt.displayName = "RadioTabGroup";
+export {
+  rt as RadioTabGroup
+};
+//# sourceMappingURL=RadioTabGroup.js.map

package/dist/components/Form/RadioButton/RadioTabGroup.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"RadioTabGroup.js","sources":["../../../../src/components/Form/RadioButton/RadioTabGroup.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useMemo, useRef, useEffect, useState, useCallback } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { Div } from \"$tags\";\nimport { Element } from \"$element\";\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { SpacingTypes } from \"../../Element/constants\";\nimport { separateWrapperProps } from \"../../../utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./radio-tab-group.css\";\n\n// OTHER ===============================================================================================================\nimport { RadioTabGroupProps, RadioButtonElementType } from \"./constants\";\n\ninterface IndicatorPosition {\n width: number;\n transform: string;\n}\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const RadioTabGroup = React.forwardRef<HTMLDivElement, RadioTabGroupProps>(\n (\n {\n id,\n name,\n label,\n helpText,\n errorText,\n options,\n defaultValue,\n value,\n required,\n onChange,\n size = \"medium\",\n bgColour,\n disabled,\n ...props\n },\n ref\n ) => {\n const derivedName = useMemo(() => name || id, [name, id]);\n const optionsWrapperRef = useRef<HTMLDivElement>(null);\n\n const [indicatorPos, setIndicatorPos] = useState<IndicatorPosition>({\n width: 0,\n transform: \"translateX(0)\",\n });\n const [needsScroll, setNeedsScroll] = useState(false);\n const [scrollPosition, setScrollPosition] = useState(0);\n const [maxScroll, setMaxScroll] = useState(0);\n\n const labelsRef = useRef<(HTMLLabelElement | null)[]>([]);\n\n const measureWidths = useCallback(() => {\n if (!optionsWrapperRef.current) return;\n\n const wrapper = optionsWrapperRef.current;\n const inputWrapper = wrapper.closest(\"[data-input-wrapper]\");\n\n if (wrapper && inputWrapper) {\n const totalContentWidth = wrapper.scrollWidth;\n const availableWidth = inputWrapper.clientWidth;\n const needsToScroll = totalContentWidth > availableWidth;\n\n setNeedsScroll(needsToScroll);\n setMaxScroll(needsToScroll ? totalContentWidth - availableWidth : 0);\n }\n }, []);\n\n useEffect(() => {\n const wrapper = optionsWrapperRef.current;\n if (!wrapper) return;\n\n // Initial measurement\n measureWidths();\n\n // Set up observer for size changes\n const observer = new ResizeObserver(() => {\n measureWidths();\n });\n\n observer.observe(wrapper);\n if (wrapper.closest(\"[data-input-wrapper]\")) {\n observer.observe(wrapper.closest(\"[data-input-wrapper]\") as Element);\n }\n\n return () => observer.disconnect();\n }, [measureWidths]);\n\n // Update indicator position based on selected radio\n useEffect(() => {\n const selectedIndex = options.findIndex(option => option.value === value);\n if (selectedIndex >= 0) {\n const updateIndicator = () => {\n const label = labelsRef.current[selectedIndex];\n if (label) {\n const width = label.offsetWidth;\n let transform = \"translateX(0)\";\n\n if (selectedIndex > 0) {\n const offset = labelsRef.current\n .slice(0, selectedIndex)\n .reduce((acc, label) => acc + (label?.offsetWidth || 0), 0);\n transform = `translateX(${offset}px)`;\n }\n\n setIndicatorPos({ width, transform });\n }\n };\n\n // Wait for fonts to load before measuring to get correct widths\n if (document.fonts && document.fonts.ready) {\n document.fonts.ready.then(() => {\n requestAnimationFrame(() => {\n requestAnimationFrame(updateIndicator);\n });\n });\n } else {\n const timeoutId = setTimeout(updateIndicator, 100);\n return () => clearTimeout(timeoutId);\n }\n }\n }, [value, options]);\n\n const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange?.(e.target.value);\n };\n\n // Separate wrapper-level props (margin, padding, etc.) from component-specific props\n const { wrapperProps, inputProps } = separateWrapperProps(props);\n\n const handleScroll = useCallback((direction: \"left\" | \"right\") => {\n const wrapper = optionsWrapperRef.current;\n if (!wrapper) return;\n\n const visibleWidth = wrapper.clientWidth;\n const scrollAmount = visibleWidth * 0.8;\n\n let newPosition = direction === \"right\"\n ? Math.min(scrollPosition + scrollAmount, maxScroll)\n : Math.max(scrollPosition - scrollAmount, 0);\n\n setScrollPosition(newPosition);\n\n requestAnimationFrame(() => {\n wrapper.style.transform = `translateX(-${newPosition}px)`;\n });\n }, [scrollPosition, maxScroll]);\n\n const canScrollLeft = scrollPosition > 0;\n const canScrollRight = scrollPosition < maxScroll;\n\n const classNames: string[] = [];\n if (size) {\n classNames.push(`size-${size}`);\n }\n\n const reactId = React.useId();\n const finalGroupId = id || `radio-tab-group-${reactId.replace(/:/g, \"\")}`;\n const { describedBy } = deriveAriaIds(finalGroupId, helpText, errorText);\n\n return (\n <FormItem\n label={label}\n htmlFor={finalGroupId}\n helpText={helpText}\n errorText={errorText}\n required={required}\n size={size}\n {...wrapperProps}\n >\n <Element\n as=\"div\"\n data-radio-tab-group\n ref={ref}\n id={finalGroupId}\n classNames={classNames}\n name={derivedName}\n role=\"radiogroup\"\n aria-label={label}\n aria-invalid={Boolean(errorText) || undefined}\n aria-required={required}\n aria-describedby={describedBy}\n {...inputProps}\n >\n {/* LEFT SCROLL BUTTON */}\n {needsScroll && canScrollLeft && (\n <Div\n className=\"scroll-button left\"\n onClick={() => handleScroll(\"left\")}\n >\n <svg viewBox=\"0 0 24 24\">\n <polyline points=\"15 18 9 12 15 6\" />\n </svg>\n </Div>\n )}\n\n {/* RADIO OPTIONS */}\n <Div className=\"rtg-options-container\">\n <Div\n className=\"rtg-options-wrapper\"\n ref={optionsWrapperRef}\n >\n {/* INDICATOR */}\n <Div\n className=\"indicator\"\n style={{\n width: `${indicatorPos.width}px`,\n transform: indicatorPos.transform,\n }}\n />\n\n {options.map((option, index) => {\n const { id: optionId, ...optionProps } = option;\n const finalId = optionId || `${finalGroupId}-option-${index}`;\n\n return (\n <React.Fragment key={finalId}>\n <input\n type=\"radio\"\n {...optionProps}\n id={finalId}\n name={derivedName}\n checked={value === option.value}\n disabled={disabled || option.disabled}\n onChange={handleChange}\n />\n <label\n ref={el => { labelsRef.current[index] = el; }}\n htmlFor={finalId}\n >\n {option.label}\n </label>\n </React.Fragment>\n );\n })}\n </Div>\n\n {/* RIGHT SCROLL BUTTON */}\n {needsScroll && canScrollRight && (\n <Div\n className=\"scroll-button right\"\n onClick={() => handleScroll(\"right\")}\n >\n <svg viewBox=\"0 0 24 24\">\n <polyline points=\"9 6 15 12 9 18\" />\n </svg>\n </Div>\n )}\n </Div>\n </Element>\n </FormItem>\n );\n }\n);\nRadioTabGroup.displayName = \"RadioTabGroup\";\n"],"names":["RadioTabGroup","React","id","name","label","helpText","errorText","options","defaultValue","value","required","onChange","size","bgColour","disabled","props","ref","derivedName","useMemo","optionsWrapperRef","useRef","indicatorPos","setIndicatorPos","useState","needsScroll","setNeedsScroll","scrollPosition","setScrollPosition","maxScroll","setMaxScroll","labelsRef","measureWidths","useCallback","wrapper","inputWrapper","totalContentWidth","availableWidth","needsToScroll","useEffect","observer","selectedIndex","option","updateIndicator","width","transform","acc","timeoutId","handleChange","e","wrapperProps","inputProps","separateWrapperProps","handleScroll","direction","scrollAmount","newPosition","canScrollLeft","canScrollRight","classNames","reactId","finalGroupId","describedBy","deriveAriaIds","jsx","FormItem","jsxs","Element","Div","index","optionId","optionProps","finalId","el"],"mappings":"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"}