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

package/dist/components/Form/Checkbox/CheckboxAndSwitchGroup.js

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

package/dist/components/Form/Checkbox/CheckboxAndSwitchGroup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CheckboxAndSwitchGroup.js","sources":["../../../../src/components/Form/Checkbox/CheckboxAndSwitchGroup.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useMemo } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { Element } from \"$element\";\nimport { SpacingTypes } from \"../../Element/constants\";\n\n// STYLES ==============================================================================================================\nimport \"./checkbox-and-switch-group.css\";\n\n// OTHER ===============================================================================================================\nimport { Checkbox, } from \"./Checkbox\";\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { InputLabelCustomProps } from \"../InputLabel/InputLabel\";\nimport { Switch } from \"./Switch\";\n\n// COMMON GROUP OPTIONS ////////////////////////////////////////////////////////////////////////////////////////////////\ninterface BaseGroupOptionProps {\n    id         : string;\n    label      : string;\n    value      : string;\n    disabled ? : boolean;\n}\n\n// Props specific to the group functionality\ninterface GroupCustomProps {\n    id            ? : string;\n    name            : string;\n    options         : BaseGroupOptionProps[];\n    value         ? : string[];\n    defaultValue  ? : string[];\n    onChange      ? : (values : string[]) => void;\n    align         ? : \"horizontal\" | \"vertical\";\n    equaliseWidth ? : boolean;\n    equalizeWidth ? : boolean;\n    size          ? : Exclude<SpacingTypes, \"nano\" | \"huge\">;\n    columns       ? : number;\n    labelFirst    ? : boolean;\n}\n\n// Combined props for the group component\nexport type InputGroupProps = InputLabelCustomProps & GroupCustomProps & {\n    helpText  ? : string;\n    errorText ? : string;\n    required  ? : boolean;\n    disabled  ? : boolean;\n};\n\n// CHECKBOX GROUP //////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const CheckboxGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(\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        },\n        ref,\n    ) => {\n        const derivedName = useMemo(() => name || id, [ name, id ]);\n\n        const [ selectedValues, setSelectedValues ] = React.useState<string[]>(\n            value || defaultValue || [],\n        );\n\n        React.useEffect(() => {\n            if (value !== undefined) {\n                setSelectedValues(value);\n            }\n        }, [ value ]);\n\n        const handleChange = (optionValue : string, checked : boolean) => {\n            let newValues : string[];\n\n            if (checked) {\n                newValues = [ ...selectedValues, optionValue ];\n            } else {\n                newValues = selectedValues.filter(v => v !== optionValue);\n            }\n\n            // Update internal state if uncontrolled\n            if (value === undefined) {\n                setSelectedValues(newValues);\n            }\n\n            onChange?.(newValues);\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 || `checkbox-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            >\n                <Element\n                    as=\"div\"\n                    data-checkbox-group\n                    ref={ref}\n                    id={finalGroupId}\n                    classNames={classNames}\n                    role=\"group\"\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 = selectedValues.includes(optionValue);\n\n                        return (\n                            <Checkbox\n                                key={finalId}\n                                id={finalId}\n                                name={derivedName}\n                                label={optionLabel}\n                                checked={isChecked}\n                                disabled={disabled || option.disabled}\n                                size={size}\n                                labelFirst={labelFirst}\n                                onChange={(checked : boolean) => handleChange(optionValue, checked)}\n                                {...optionProps}\n                            />\n                        );\n                    })}\n                </Element>\n            </FormItem>\n        );\n    },\n);\nCheckboxGroup.displayName = \"CheckboxGroup\";\n\n// SWITCH GROUP ////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const SwitchGroup = React.forwardRef<HTMLDivElement, InputGroupProps>(\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        },\n        ref,\n    ) => {\n        const derivedName = useMemo(() => name || id, [ name, id ]);\n\n        const [ selectedValues, setSelectedValues ] = React.useState<string[]>(\n            value || defaultValue || [],\n        );\n\n        React.useEffect(() => {\n            if (value !== undefined) {\n                setSelectedValues(value);\n            }\n        }, [ value ]);\n\n        const handleChange = (optionValue : string, checked : boolean) => {\n            let newValues : string[];\n\n            if (checked) {\n                newValues = [ ...selectedValues, optionValue ];\n            } else {\n                newValues = selectedValues.filter(v => v !== optionValue);\n            }\n\n            // Update internal state if uncontrolled\n            if (value === undefined) {\n                setSelectedValues(newValues);\n            }\n\n            onChange?.(newValues);\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 || `switch-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            >\n                <Element\n                    as=\"div\"\n                    data-switch-group\n                    ref={ref}\n                    id={finalGroupId}\n                    classNames={classNames}\n                    role=\"group\"\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 = selectedValues.includes(optionValue);\n\n                        return (\n                            <Switch\n                                key={finalId}\n                                id={finalId}\n                                name={derivedName}\n                                label={optionLabel}\n                                checked={isChecked}\n                                disabled={disabled || option.disabled}\n                                size={size}\n                                labelFirst={labelFirst}\n                                onChange={(checked : boolean) => handleChange(optionValue, checked)}\n                                {...optionProps}\n                            />\n                        );\n                    })}\n                </Element>\n            </FormItem>\n        );\n    },\n);\nSwitchGroup.displayName = \"SwitchGroup\";\n"],"names":["CheckboxGroup","React","id","name","label","helpText","errorText","options","value","defaultValue","onChange","align","equaliseWidth","equalizeWidth","required","disabled","size","columns","labelFirst","props","ref","derivedName","useMemo","selectedValues","setSelectedValues","handleChange","optionValue","checked","newValues","v","classNames","reactId","finalGroupId","describedBy","deriveAriaIds","jsx","FormItem","Element","option","index","optionId","optionLabel","optionProps","finalId","isChecked","Checkbox","SwitchGroup","Switch"],"mappings":";;;;;;;AAiDO,MAAMA,IAAgBC,EAAM;AAAA,EAC/B,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,CAAEC,GAAMD,CAAG,CAAC,GAEpD,CAAEqB,GAAgBC,CAAkB,IAAIvB,EAAM;AAAA,MAChDO,KAASC,KAAgB,CAAA;AAAA,IAAC;AAG9B,IAAAR,EAAM,UAAU,MAAM;AAClB,MAAIO,MAAU,UACVgB,EAAkBhB,CAAK;AAAA,IAE/B,GAAG,CAAEA,CAAM,CAAC;AAEZ,UAAMiB,IAAe,CAACC,GAAsBC,MAAsB;AAC9D,UAAIC;AAEJ,MAAID,IACAC,IAAY,CAAE,GAAGL,GAAgBG,CAAY,IAE7CE,IAAYL,EAAe,OAAO,CAAAM,MAAKA,MAAMH,CAAW,GAIxDlB,MAAU,UACVgB,EAAkBI,CAAS,GAG/BlB,KAAA,QAAAA,EAAWkB;AAAA,IACf;AAEA,QAAIE,IAAwB,CAAA;AAE5B,IAAInB,KACAmB,EAAW,KAAK,SAASnB,CAAK,EAAE,IAGhCC,KAAiBC,MACjBiB,EAAW,KAAK,gBAAgB,GAGhCb,KACAa,EAAW,KAAK,cAAc,GAG9BZ,KACAY,EAAW,KAAK,aAAa;AAGjC,UAAMC,IAAU9B,EAAM,MAAA,GAChB+B,IAAe9B,KAAM,kBAAkB6B,EAAQ,QAAQ,MAAM,EAAE,CAAC,IAChE,EAAE,aAAAE,EAAA,IAAgBC,EAAcF,GAAc3B,GAAUC,CAAS;AAEvE,WACI,gBAAA6B;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAAhC;AAAA,QACA,SAAS4B;AAAA,QACT,UAAA3B;AAAA,QACA,WAAAC;AAAA,QACA,UAAAQ;AAAA,QAEA,UAAA,gBAAAqB;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,uBAAmB;AAAA,YACnB,KAAAjB;AAAA,YACA,IAAIY;AAAA,YACJ,YAAAF;AAAA,YACA,MAAK;AAAA,YACL,cAAY1B;AAAA,YACZ,gBAAc,EAAQE,KAAc;AAAA,YACpC,iBAAeQ;AAAA,YACf,oBAAkBmB;AAAA,YAClB,OAAOhB,IAAU,EAAC,qBAAsB,UAAUA,CAAO,aAAY;AAAA,YACpE,GAAGE;AAAA,YAEH,UAAAZ,EAAQ,IAAI,CAAC+B,GAAQC,MAAU;AAC5B,oBAAM,EAAC,IAAKC,GAAU,OAAQd,GAAa,OAAQe,GAAa,GAAGC,EAAA,IAAeJ,GAC5EK,IAAUH,KAAY,GAAGR,CAAY,WAAWO,CAAK,IACrDK,IAAYrB,EAAe,SAASG,CAAW;AAErD,qBACI,gBAAAS;AAAA,gBAACU;AAAA,gBAAA;AAAA,kBAEG,IAAIF;AAAA,kBACJ,MAAMtB;AAAA,kBACN,OAAOoB;AAAA,kBACP,SAASG;AAAA,kBACT,UAAU7B,KAAYuB,EAAO;AAAA,kBAC7B,MAAAtB;AAAA,kBACA,YAAAE;AAAA,kBACA,UAAU,CAACS,MAAsBF,EAAaC,GAAaC,CAAO;AAAA,kBACjE,GAAGe;AAAA,gBAAA;AAAA,gBATCC;AAAA,cAAA;AAAA,YAYjB,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAGZ;AACJ;AACA3C,EAAc,cAAc;AAGrB,MAAM8C,IAAc7C,EAAM;AAAA,EAC7B,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,CAAEC,GAAMD,CAAG,CAAC,GAEpD,CAAEqB,GAAgBC,CAAkB,IAAIvB,EAAM;AAAA,MAChDO,KAASC,KAAgB,CAAA;AAAA,IAAC;AAG9B,IAAAR,EAAM,UAAU,MAAM;AAClB,MAAIO,MAAU,UACVgB,EAAkBhB,CAAK;AAAA,IAE/B,GAAG,CAAEA,CAAM,CAAC;AAEZ,UAAMiB,IAAe,CAACC,GAAsBC,MAAsB;AAC9D,UAAIC;AAEJ,MAAID,IACAC,IAAY,CAAE,GAAGL,GAAgBG,CAAY,IAE7CE,IAAYL,EAAe,OAAO,CAAAM,MAAKA,MAAMH,CAAW,GAIxDlB,MAAU,UACVgB,EAAkBI,CAAS,GAG/BlB,KAAA,QAAAA,EAAWkB;AAAA,IACf;AAEA,QAAIE,IAAwB,CAAA;AAE5B,IAAInB,KACAmB,EAAW,KAAK,SAASnB,CAAK,EAAE,IAGhCC,KAAiBC,MACjBiB,EAAW,KAAK,gBAAgB,GAGhCb,KACAa,EAAW,KAAK,cAAc,GAG9BZ,KACAY,EAAW,KAAK,aAAa;AAGjC,UAAMC,IAAU9B,EAAM,MAAA,GAChB+B,IAAe9B,KAAM,gBAAgB6B,EAAQ,QAAQ,MAAM,EAAE,CAAC,IAC9D,EAAE,aAAAE,EAAA,IAAgBC,EAAcF,GAAc3B,GAAUC,CAAS;AAEvE,WACI,gBAAA6B;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAAhC;AAAA,QACA,SAAS4B;AAAA,QACT,UAAA3B;AAAA,QACA,WAAAC;AAAA,QACA,UAAAQ;AAAA,QAEA,UAAA,gBAAAqB;AAAA,UAACE;AAAA,UAAA;AAAA,YACG,IAAG;AAAA,YACH,qBAAiB;AAAA,YACjB,KAAAjB;AAAA,YACA,IAAIY;AAAA,YACJ,YAAAF;AAAA,YACA,MAAK;AAAA,YACL,cAAY1B;AAAA,YACZ,gBAAc,EAAQE,KAAc;AAAA,YACpC,iBAAeQ;AAAA,YACf,oBAAkBmB;AAAA,YAClB,OAAOhB,IAAU,EAAC,qBAAsB,UAAUA,CAAO,aAAY;AAAA,YACpE,GAAGE;AAAA,YAEH,UAAAZ,EAAQ,IAAI,CAAC+B,GAAQC,MAAU;AAC5B,oBAAM,EAAC,IAAKC,GAAU,OAAQd,GAAa,OAAQe,GAAa,GAAGC,EAAA,IAAeJ,GAC5EK,IAAUH,KAAY,GAAGR,CAAY,WAAWO,CAAK,IACrDK,IAAYrB,EAAe,SAASG,CAAW;AAErD,qBACI,gBAAAS;AAAA,gBAACY;AAAA,gBAAA;AAAA,kBAEG,IAAIJ;AAAA,kBACJ,MAAMtB;AAAA,kBACN,OAAOoB;AAAA,kBACP,SAASG;AAAA,kBACT,UAAU7B,KAAYuB,EAAO;AAAA,kBAC7B,MAAAtB;AAAA,kBACA,YAAAE;AAAA,kBACA,UAAU,CAACS,MAAsBF,EAAaC,GAAaC,CAAO;AAAA,kBACjE,GAAGe;AAAA,gBAAA;AAAA,gBATCC;AAAA,cAAA;AAAA,YAYjB,CAAC;AAAA,UAAA;AAAA,QAAA;AAAA,MACL;AAAA,IAAA;AAAA,EAGZ;AACJ;AACAG,EAAY,cAAc;"}

package/dist/components/Form/Checkbox/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Checkbox/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAMvD,OAAO,cAAc,CAAC;AAItB,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;AACjD,MAAM,MAAM,WAAW,GAAG,qBAAqB,GAAG;IAC9C,EAAe,CAAC,EAAG,MAAM,CAAC;IAC1B,IAAe,CAAC,EAAG,MAAM,CAAC;IAC1B,OAAe,CAAC,EAAG,OAAO,CAAC;IAC3B,cAAe,CAAC,EAAG,OAAO,CAAC;IAC3B,QAAe,CAAC,EAAG,OAAO,CAAC;IAC3B,QAAe,CAAC,EAAG,OAAO,CAAC;IAC3B,QAAe,CAAC,EAAG,CAAC,OAAO,EAAG,OAAO,KAAK,IAAI,CAAC;IAC/C,IAAe,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC1D,QAAe,CAAC,EAAG,MAAM,CAAC;IAC1B,SAAe,CAAC,EAAG,MAAM,CAAC;IAC1B,UAAe,CAAC,EAAG,OAAO,CAAC;CAC9B,CAAC;AAGF,eAAO,MAAM,MAAM;SAdI,MAAM;WACN,MAAM;cACN,OAAO;qBACP,OAAO;eACP,OAAO;eACP,OAAO;eACP,CAAC,OAAO,EAAG,OAAO,KAAK,IAAI;WAC3B,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;eACtC,MAAM;gBACN,MAAM;iBACN,OAAO;0CAkE7B,CAAC"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Checkbox/Switch.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAMvD,OAAO,cAAc,CAAC;AAItB,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,MAAM,iBAAiB,GAAG,gBAAgB,CAAC;AACjD,MAAM,MAAM,WAAW,GAAG,qBAAqB,GAAG;IAC9C,EAAe,CAAC,EAAG,MAAM,CAAC;IAC1B,IAAe,CAAC,EAAG,MAAM,CAAC;IAC1B,OAAe,CAAC,EAAG,OAAO,CAAC;IAC3B,cAAe,CAAC,EAAG,OAAO,CAAC;IAC3B,QAAe,CAAC,EAAG,OAAO,CAAC;IAC3B,QAAe,CAAC,EAAG,OAAO,CAAC;IAC3B,QAAe,CAAC,EAAG,CAAC,OAAO,EAAG,OAAO,KAAK,IAAI,CAAC;IAC/C,IAAe,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC1D,QAAe,CAAC,EAAG,MAAM,CAAC;IAC1B,SAAe,CAAC,EAAG,MAAM,CAAC;IAC1B,UAAe,CAAC,EAAG,OAAO,CAAC;CAC9B,CAAC;AAGF,eAAO,MAAM,MAAM;SAdI,MAAM;WACN,MAAM;cACN,OAAO;qBACP,OAAO;eACP,OAAO;eACP,OAAO;eACP,CAAC,OAAO,EAAG,OAAO,KAAK,IAAI;WAC3B,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;eACtC,MAAM;gBACN,MAAM;iBACN,OAAO;0CA0E7B,CAAC"}

package/dist/components/Form/Checkbox/Switch.js

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

package/dist/components/Form/Checkbox/Switch.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Switch.js","sources":["../../../../src/components/Form/Checkbox/Switch.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useMemo } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { Element } from \"$element\";\nimport { SpacingTypes } from \"../../Element/constants\";\n\n// UTILS ===============================================================================================================\nimport { separateWrapperProps } from \"$utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./switch.css\";\n\n// OTHER ===============================================================================================================\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { InputLabelCustomProps } from \"../InputLabel/InputLabel\";\n\nexport type SwitchElementType = HTMLInputElement;\nexport type SwitchProps = InputLabelCustomProps & {\n    id             ? : string;\n    name           ? : string;\n    checked        ? : boolean;\n    defaultChecked ? : boolean;\n    disabled       ? : boolean;\n    required       ? : boolean;\n    onChange       ? : (checked : boolean) => void;\n    size           ? : Exclude<SpacingTypes, \"nano\" | \"huge\">;\n    helpText       ? : string;\n    errorText      ? : string;\n    labelFirst     ? : boolean;\n};\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const Switch = React.forwardRef(\n    (\n        {\n            id,\n            name,\n            label,\n            hideLabel,\n            helpText,\n            errorText,\n            onChange,\n            checked,\n            defaultChecked,\n            disabled,\n            required,\n            size = \"medium\",\n            labelFirst,\n            ...props\n        } : SwitchProps,\n        ref : React.Ref<SwitchElementType>,\n    ) => {\n        const derivedName = useMemo(() => name || id, [ name, id ]);\n\n        const handleChange = (e : React.ChangeEvent<HTMLInputElement>) => {\n            onChange?.(e.target.checked);\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 || `switch-${reactId.replace(/:/g, \"\")}`;\n        const { describedBy } = deriveAriaIds(finalId, helpText, errorText);\n\n        return (\n            <FormItem\n                label={label}\n                hideLabel={hideLabel}\n                htmlFor={finalId}\n                helpText={helpText}\n                errorText={errorText}\n                required={required}\n                size={size}\n                labelFirst={labelFirst}\n                {...wrapperProps}\n            >\n                <Element<SwitchElementType>\n                    as=\"input\"\n                    type=\"checkbox\"\n                    ref={ref}\n                    id={finalId}\n                    name={derivedName}\n                    checked={checked}\n                    defaultChecked={defaultChecked}\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-switch\n                    className={`size-${size}`}\n                />\n            </FormItem>\n        );\n    },\n);\nSwitch.displayName = \"Switch\";\n"],"names":["Switch","React","id","name","label","hideLabel","helpText","errorText","onChange","checked","defaultChecked","disabled","required","size","labelFirst","props","ref","derivedName","useMemo","handleChange","e","wrapperProps","inputProps","separateWrapperProps","reactId","finalId","describedBy","deriveAriaIds","jsxs","FormItem","jsx","Element"],"mappings":";;;;;;AAiCO,MAAMA,IAASC,EAAM;AAAA,EACxB,CACI;AAAA,IACI,IAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,SAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,UAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,YAAAC;AAAA,IACA,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,UAAMC,IAAcC,EAAQ,MAAMf,KAAQD,GAAI,CAAEC,GAAMD,CAAG,CAAC,GAEpDiB,IAAe,CAACC,MAA4C;AAC9D,MAAAZ,KAAA,QAAAA,EAAWY,EAAE,OAAO;AAAA,IACxB,GAGM,EAAC,cAAAC,GAAc,YAAAC,MAAcC,EAAqBR,CAAK,GAEvDS,IAAUvB,EAAM,MAAA,GAChBwB,IAAUvB,KAAM,UAAUsB,EAAQ,QAAQ,MAAM,EAAE,CAAC,IACnD,EAAE,aAAAE,EAAA,IAAgBC,EAAcF,GAASnB,GAAUC,CAAS;AAElE,WACI,gBAAAqB;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,OAAAzB;AAAA,QACA,WAAAC;AAAA,QACA,SAASoB;AAAA,QACT,UAAAnB;AAAA,QACA,WAAAC;AAAA,QACA,UAAAK;AAAA,QACA,MAAAC;AAAA,QACA,YAAAC;AAAA,QACC,GAAGO;AAAA,QAEJ,UAAA;AAAA,UAAA,gBAAAS;AAAA,YAACC;AAAA,YAAA;AAAA,cACG,IAAG;AAAA,cACH,MAAK;AAAA,cACL,KAAAf;AAAA,cACA,IAAIS;AAAA,cACJ,MAAMR;AAAA,cACN,SAAAR;AAAA,cACA,gBAAAC;AAAA,cACA,UAAAC;AAAA,cACA,UAAAC;AAAA,cACA,gBAAc,EAAQL,KAAc;AAAA,cACpC,iBAAeK;AAAA,cACf,oBAAkBc;AAAA,cAClB,UAAUP;AAAA,cACT,GAAGG;AAAA,YAAA;AAAA,UAAA;AAAA,UAER,gBAAAQ;AAAA,YAACC;AAAA,YAAA;AAAA,cACG,IAAIjB,IAAa,UAAU;AAAA,cAC3B,SAASA,IAAaW,IAAU;AAAA,cAChC,eAAW;AAAA,cACX,WAAW,QAAQZ,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QAC3B;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AACAb,EAAO,cAAc;"}

package/dist/components/Form/FileUpload/FileUpload.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAO3F,OAAO,mBAAmB,CAAC;AAK3B,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAAC;AACrD,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,WAAW,GAAG;IAChE,EAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,IAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,MAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,kBAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,OAAoB,CAAC,EAAG,MAAM,GAAG,aAAa,CAAC;IAC/C,MAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,QAAoB,CAAC,EAAG,CAAC,KAAK,EAAG,IAAI,EAAE,KAAK,IAAI,CAAC;IACjD,mBAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,kBAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,aAAoB,CAAC,EAAG,eAAe,CAAC;IACxC,YAAoB,CAAC,EAAG,eAAe,CAAC;IACxC,eAAoB,CAAC,EAAG,eAAe,CAAC;IACxC,cAAoB,CAAC,EAAG,eAAe,CAAC;IACxC,QAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,SAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,QAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,QAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,OAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,SAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,IAAoB,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAG,MAAM,CAAC;IACvB,cAAc,CAAC,EAAG,OAAO,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,UAAU;SAzBK,MAAM;WACN,MAAM;aACN,MAAM;yBACN,OAAO;cACP,MAAM,GAAG,aAAa;aACtB,MAAM;eACN,CAAC,KAAK,EAAG,IAAI,EAAE,KAAK,IAAI;0BACxB,MAAM;yBACN,MAAM;oBACN,eAAe;mBACf,eAAe;sBACf,eAAe;qBACf,eAAe;eACf,MAAM;gBACN,MAAM;eACN,OAAO;eACP,OAAO;cACP,OAAO;gBACP,MAAM;WACN,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;mBAC9C,MAAM;qBACJ,OAAO;0CAiK5B,CAAC"}
+{"version":3,"file":"FileUpload.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/FileUpload/FileUpload.tsx"],"names":[],"mappings":"AACA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAGhD,OAAO,EAAE,eAAe,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,+BAA+B,CAAC;AAO3F,OAAO,mBAAmB,CAAC;AAK3B,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAGjE,MAAM,MAAM,qBAAqB,GAAG,gBAAgB,CAAC;AACrD,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,WAAW,GAAG;IAChE,EAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,IAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,MAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,kBAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,OAAoB,CAAC,EAAG,MAAM,GAAG,aAAa,CAAC;IAC/C,MAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,QAAoB,CAAC,EAAG,CAAC,KAAK,EAAG,IAAI,EAAE,KAAK,IAAI,CAAC;IACjD,mBAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,kBAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,aAAoB,CAAC,EAAG,eAAe,CAAC;IACxC,YAAoB,CAAC,EAAG,eAAe,CAAC;IACxC,eAAoB,CAAC,EAAG,eAAe,CAAC;IACxC,cAAoB,CAAC,EAAG,eAAe,CAAC;IACxC,QAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,SAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,QAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,QAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,OAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,SAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,IAAoB,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IAC/D,YAAY,CAAC,EAAG,MAAM,CAAC;IACvB,cAAc,CAAC,EAAG,OAAO,CAAC;CAC7B,CAAC;AAGF,eAAO,MAAM,UAAU;SAzBK,MAAM;WACN,MAAM;aACN,MAAM;yBACN,OAAO;cACP,MAAM,GAAG,aAAa;aACtB,MAAM;eACN,CAAC,KAAK,EAAG,IAAI,EAAE,KAAK,IAAI;0BACxB,MAAM;yBACN,MAAM;oBACN,eAAe;mBACf,eAAe;sBACf,eAAe;qBACf,eAAe;eACf,MAAM;gBACN,MAAM;eACN,OAAO;eACP,OAAO;cACP,OAAO;gBACP,MAAM;WACN,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC;mBAC9C,MAAM;qBACJ,OAAO;0CAsK5B,CAAC"}

package/dist/components/Form/FileUpload/FileUpload.js

@@ -0,0 +1,142 @@
+"use client";
+import { jsx as l, jsxs as c } from "react/jsx-runtime";
+import I, { useState as y, useRef as Q } from "react";
+import { Div as i } from "../../Element/Tags.js";
+import { separateWrapperProps as V } from "../../../utils/propSeparation.js";
+/* empty css                */
+import { Badge as X } from "../../Badge/Badge.js";
+import { deriveAriaIds as Z, FormItem as M } from "../FormItem/FormItem.js";
+import { Text as b } from "../../Typography/Text.js";
+const T = I.forwardRef(
+  ({
+    "aria-label": A,
+    "aria-invalid": N,
+    label: f,
+    helpText: n,
+    errorText: t,
+    required: m,
+    accept: P,
+    allowMultipleFiles: u = !1,
+    capture: R,
+    height: k = "120px",
+    onChange: r,
+    className: B = "",
+    instructionMainText: v = "Drag and drop or click to upload",
+    instructionSubText: D = "You can add multiple files",
+    invalid: $,
+    id: j,
+    name: L,
+    badgeBgColour: h,
+    badgeTextColour: O,
+    size: U,
+    ...x
+  }, z) => {
+    const [o, s] = y([]), [S, d] = y(!1), g = Q(null), W = (e) => {
+      e.preventDefault(), e.stopPropagation(), d(!0);
+    }, Y = (e) => {
+      e.preventDefault(), e.stopPropagation(), d(!1);
+    }, _ = (e) => {
+      e.preventDefault(), e.stopPropagation(), d(!1);
+      const a = Array.from(e.dataTransfer.files);
+      F(a);
+    }, F = (e) => {
+      if (u)
+        s((a) => [...a, ...e]), r == null || r([...o, ...e]);
+      else {
+        const a = e[0];
+        s([a]), r == null || r([a]);
+      }
+    }, q = (e) => {
+      if (e.target.files) {
+        const a = Array.from(e.target.files);
+        F(a);
+      }
+    }, w = (e) => {
+      const a = o.filter((C, K) => K !== e);
+      s(a), r == null || r(a);
+    }, E = () => {
+      var e;
+      (e = g.current) == null || e.click();
+    }, { wrapperProps: G } = V(x), H = I.useId(), p = j || `file-upload-${H.replace(/:/g, "")}`, { describedBy: J } = Z(p, n, t);
+    return /* @__PURE__ */ l(
+      M,
+      {
+        label: f,
+        htmlFor: p,
+        helpText: n,
+        errorText: t,
+        required: m,
+        size: U,
+        ...G,
+        children: /* @__PURE__ */ c(
+          i,
+          {
+            "data-file-upload-area": !0,
+            ref: z,
+            className: [
+              "file-upload-wrapper",
+              S ? "dragging" : "",
+              B
+            ].filter(Boolean).join(" "),
+            "aria-label": A || f,
+            "aria-invalid": N || $ || !!t || void 0,
+            "aria-required": m,
+            "aria-describedby": J,
+            children: [
+              /* @__PURE__ */ c(
+                i,
+                {
+                  className: "file-upload-area",
+                  onDragOver: W,
+                  onDragLeave: Y,
+                  onDrop: _,
+                  onClick: E,
+                  style: { height: k },
+                  children: [
+                    /* @__PURE__ */ l(
+                      "input",
+                      {
+                        ref: g,
+                        type: "file",
+                        id: p,
+                        name: L,
+                        onChange: q,
+                        multiple: u,
+                        accept: P,
+                        capture: R,
+                        className: "file-input"
+                      }
+                    ),
+                    v && /* @__PURE__ */ c(i, { className: "file-upload-content", children: [
+                      /* @__PURE__ */ l(b, { children: v }),
+                      D && /* @__PURE__ */ l(b, { isSubtext: !0, children: D })
+                    ] })
+                  ]
+                }
+              ),
+              o.length > 0 && /* @__PURE__ */ l(i, { className: "uploaded-files", children: o.map((e, a) => /* @__PURE__ */ l(
+                X,
+                {
+                  size: "small",
+                  shape: "rounded",
+                  actionIcon: "cross",
+                  onActionClick: () => w(a),
+                  actionAriaLabel: `Remove ${e.name}`,
+                  bgColour: h,
+                  textColour: O,
+                  children: e.name
+                },
+                `${e.name}-${a}`
+              )) })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+T.displayName = "FileUpload";
+export {
+  T as FileUpload
+};
+//# sourceMappingURL=FileUpload.js.map

package/dist/components/Form/FileUpload/FileUpload.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FileUpload.js","sources":["../../../../src/components/Form/FileUpload/FileUpload.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useRef, useState } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { ColourPropTypes, CommonProps, SpacingTypes } from \"$components/Element/constants\";\nimport { Div } from \"../../Element/Tags\";\n\n// UTILS ===============================================================================================================\nimport { separateWrapperProps } from \"$utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./file-upload.css\";\n\n// OTHER ===============================================================================================================\nimport { Badge } from \"../../Badge/Badge\";\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { InputLabelCustomProps } from \"../InputLabel/InputLabel\";\nimport { Text } from \"../../Typography/Text\";\n\nexport type FileUploadElementType = HTMLInputElement;\nexport type FileUploadProps = InputLabelCustomProps & CommonProps & {\n    id                  ? : string;\n    name                ? : string;\n    accept              ? : string;\n    allowMultipleFiles  ? : boolean;\n    capture             ? : \"user\" | \"environment\";\n    height              ? : string;\n    onChange            ? : (files : File[]) => void;\n    instructionMainText ? : string;\n    instructionSubText  ? : string;\n    badgeBgColour       ? : ColourPropTypes;\n    badgeBgColor        ? : ColourPropTypes;\n    badgeTextColour     ? : ColourPropTypes;\n    badgeTextColor      ? : ColourPropTypes;\n    helpText            ? : string;\n    errorText           ? : string;\n    required            ? : boolean;\n    disabled            ? : boolean;\n    invalid             ? : boolean;\n    className           ? : string;\n    size                ? : Exclude<SpacingTypes, \"nano\" | \"huge\">;\n    \"aria-label\"? : string;\n    \"aria-invalid\"? : boolean;\n};\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const FileUpload = React.forwardRef(\n    (\n        {\n            \"aria-label\"   : ariaLabel,\n            \"aria-invalid\" : ariaInvalid,\n            label,\n            helpText,\n            errorText,\n            required,\n            accept,\n            allowMultipleFiles = false,\n            capture,\n            height = \"120px\",\n            onChange,\n            className = \"\",\n            instructionMainText = \"Drag and drop or click to upload\",\n            instructionSubText = \"You can add multiple files\",\n            invalid,\n            id,\n            name,\n            badgeBgColour,\n            badgeTextColour,\n            size,\n            ...props\n        } : FileUploadProps,\n        ref : React.Ref<FileUploadElementType>,\n    ) => {\n        const [ files, setFiles ] = useState<File[]>([]);\n        const [ isDragging, setIsDragging ] = useState(false);\n        const fileInputRef = useRef<HTMLInputElement>(null);\n\n        const handleDragOver = (e : React.DragEvent) => {\n            e.preventDefault();\n            e.stopPropagation();\n            setIsDragging(true);\n        };\n\n        const handleDragLeave = (e : React.DragEvent) => {\n            e.preventDefault();\n            e.stopPropagation();\n            setIsDragging(false);\n        };\n\n        const handleDrop = (e : React.DragEvent) => {\n            e.preventDefault();\n            e.stopPropagation();\n            setIsDragging(false);\n\n            const droppedFiles = Array.from(e.dataTransfer.files);\n            handleFiles(droppedFiles);\n        };\n\n        const handleFiles = (newFiles : File[]) => {\n            if (!allowMultipleFiles) {\n                const fileToAdd = newFiles[0];\n                setFiles([ fileToAdd ]);\n                onChange?.([ fileToAdd ]);\n            } else {\n                setFiles(prevFiles => [ ...prevFiles, ...newFiles ]);\n                onChange?.([ ...files, ...newFiles ]);\n            }\n        };\n\n        const handleFileInput = (e : React.ChangeEvent<HTMLInputElement>) => {\n            if (e.target.files) {\n                const selectedFiles = Array.from(e.target.files);\n                handleFiles(selectedFiles);\n            }\n        };\n\n        const removeFile = (indexToRemove : number) => {\n            const updatedFiles = files.filter((_, index) => index !== indexToRemove);\n            setFiles(updatedFiles);\n            onChange?.(updatedFiles);\n        };\n\n        const openFileDialog = () => {\n            fileInputRef.current?.click();\n        };\n\n        // Separate wrapper-level props (margin, padding, etc.) from component-specific props\n        const { wrapperProps } = separateWrapperProps(props);\n\n        const reactId = React.useId();\n        const finalId = id || `file-upload-${reactId.replace(/:/g, \"\")}`;\n        const { describedBy } = deriveAriaIds(finalId, helpText, errorText);\n\n        return (\n            <FormItem\n                label={label}\n                htmlFor={finalId}\n                helpText={helpText}\n                errorText={errorText}\n                required={required}\n                size={size}\n                {...wrapperProps}\n            >\n                <Div\n                    data-file-upload-area\n                    ref={ref as React.Ref<HTMLDivElement>}\n                    className={[\n                        \"file-upload-wrapper\",\n                        isDragging ? \"dragging\" : \"\",\n                        className,\n                    ].filter(Boolean).join(\" \")}\n                    aria-label={ariaLabel || label}\n                    aria-invalid={ariaInvalid || invalid || Boolean(errorText) || undefined}\n                    aria-required={required}\n                    aria-describedby={describedBy}\n                >\n                    <Div\n                        className=\"file-upload-area\"\n                        onDragOver={handleDragOver}\n                        onDragLeave={handleDragLeave}\n                        onDrop={handleDrop}\n                        onClick={openFileDialog}\n                        style={{height}}\n                    >\n                        <input\n                            ref={fileInputRef}\n                            type=\"file\"\n                            id={finalId}\n                            name={name}\n                            onChange={handleFileInput}\n                            multiple={allowMultipleFiles}\n                            accept={accept}\n                            capture={capture}\n                            className=\"file-input\"\n                        />\n\n                        {instructionMainText &&\n                            <Div className=\"file-upload-content\">\n                                <Text>{instructionMainText}</Text>\n                                {instructionSubText && (\n                                    <Text isSubtext>{instructionSubText}</Text>\n                                )}\n                            </Div>\n                        }\n                    </Div>\n\n                    {files.length > 0 && (\n                        <Div className=\"uploaded-files\">\n                            {files.map((file, index) => (\n                                <Badge\n                                    key={`${file.name}-${index}`}\n                                    size=\"small\"\n                                    shape=\"rounded\"\n                                    actionIcon=\"cross\"\n                                    onActionClick={() => removeFile(index)}\n                                    actionAriaLabel={`Remove ${file.name}`}\n                                    bgColour={badgeBgColour}\n                                    textColour={badgeTextColour}\n                                >\n                                    {file.name}\n                                </Badge>\n                            ))}\n                        </Div>\n                    )}\n                </Div>\n            </FormItem>\n        );\n    },\n);\nFileUpload.displayName = \"FileUpload\";\n"],"names":["FileUpload","React","ariaLabel","ariaInvalid","label","helpText","errorText","required","accept","allowMultipleFiles","capture","height","onChange","className","instructionMainText","instructionSubText","invalid","id","name","badgeBgColour","badgeTextColour","size","props","ref","files","setFiles","useState","isDragging","setIsDragging","fileInputRef","useRef","handleDragOver","handleDragLeave","handleDrop","droppedFiles","handleFiles","newFiles","prevFiles","fileToAdd","handleFileInput","selectedFiles","removeFile","indexToRemove","updatedFiles","_","index","openFileDialog","_a","wrapperProps","separateWrapperProps","reactId","finalId","describedBy","deriveAriaIds","jsx","FormItem","jsxs","Div","Text","file","Badge"],"mappings":"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"}

package/dist/components/Form/Form/Form.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsxs as c, jsx as s } from "react/jsx-runtime";
+import u from "react";
+/* empty css         */
+import { generateFormThroughConfig as g } from "./FormGenerator.js";
+import { Element as C } from "../../Element/Element.js";
+import { Callout as F } from "../../Callout/Callout.js";
+const d = u.forwardRef(
+  ({ spacing: o = "small", fields: r, onFieldsChange: m, children: e, errorText: t, ...n }, f) => {
+    let a = [];
+    o && a.push(`spacing-${o}`);
+    const p = (i, l) => {
+      m && m({
+        [i]: l
+      });
+    }, h = r != null && r.length ? g(r, p, o) : e;
+    return /* @__PURE__ */ c(
+      C,
+      {
+        as: "form",
+        "data-form": !0,
+        ref: f,
+        classNames: a,
+        ...n,
+        children: [
+          h,
+          t && /* @__PURE__ */ s(F, { kind: "error", children: t })
+        ]
+      }
+    );
+  }
+);
+d.displayName = "Form";
+export {
+  d as Form
+};
+//# sourceMappingURL=Form.js.map

package/dist/components/Form/Form/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../../src/components/Form/Form/Form.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// ELEMENT =============================================================================================================\nimport { CommonAndHTMLProps, SpacingTypes } from \"../../Element/constants\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./form.css\";\n\n// OTHER ===============================================================================================================\nimport { Callout } from \"$components/Callout\";\nimport { FormFieldsConfig, generateFormThroughConfig } from \"./FormGenerator\";\n\n// prettier-ignore\nexport interface FormCustomProps {\n        spacing        ? : SpacingTypes;\n        fields         ? : FormFieldsConfig[];\n        onFieldsChange ? : (values: Record<string, any>) => void;\n        errorText      ? : string;\n}\n\nexport type FormElementType = HTMLFormElement;\nexport type FormProps = Omit<CommonAndHTMLProps<FormElementType>, keyof FormCustomProps> &\n    FormCustomProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const Form = React.forwardRef(\n    (\n        { spacing = \"small\", fields, onFieldsChange, children, errorText, ...props }: FormProps,\n        ref: React.Ref<FormElementType>\n    ) => {\n        let classNames = [];\n\n        if (spacing) {\n            classNames.push(`spacing-${spacing}`);\n        }\n\n        // Handle form field changes to provide direct values\n        const handleFieldChange = (fieldName: string, value: any) => {\n            if (onFieldsChange) {\n                onFieldsChange({\n                    [fieldName]: value\n                });\n            }\n        };\n\n        // Generate form fields if config is provided\n        const formContent = fields?.length ? generateFormThroughConfig(fields, handleFieldChange, spacing) : children;\n\n        return (\n            <Element<FormElementType>\n                as=\"form\"\n                data-form\n                ref={ref}\n                classNames={classNames}\n                {...props}\n            >\n                {formContent}\n                {errorText && <Callout kind=\"error\">{errorText}</Callout>}\n            </Element>\n        );\n    }\n);\nForm.displayName = \"Form\";\n"],"names":["Form","React","spacing","fields","onFieldsChange","children","errorText","props","ref","classNames","handleFieldChange","fieldName","value","formContent","generateFormThroughConfig","jsxs","Element","jsx","Callout"],"mappings":";;;;;;AA2BO,MAAMA,IAAOC,EAAM;AAAA,EACtB,CACI,EAAE,SAAAC,IAAU,SAAS,QAAAC,GAAQ,gBAAAC,GAAgB,UAAAC,GAAU,WAAAC,GAAW,GAAGC,EAAA,GACrEC,MACC;AACD,QAAIC,IAAa,CAAA;AAEjB,IAAIP,KACAO,EAAW,KAAK,WAAWP,CAAO,EAAE;AAIxC,UAAMQ,IAAoB,CAACC,GAAmBC,MAAe;AACzD,MAAIR,KACAA,EAAe;AAAA,QACX,CAACO,CAAS,GAAGC;AAAA,MAAA,CAChB;AAAA,IAET,GAGMC,IAAcV,KAAA,QAAAA,EAAQ,SAASW,EAA0BX,GAAQO,GAAmBR,CAAO,IAAIG;AAErG,WACI,gBAAAU;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,aAAS;AAAA,QACT,KAAAR;AAAA,QACA,YAAAC;AAAA,QACC,GAAGF;AAAA,QAEH,UAAA;AAAA,UAAAM;AAAA,UACAP,KAAa,gBAAAW,EAACC,GAAA,EAAQ,MAAK,SAAS,UAAAZ,EAAA,CAAU;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAG3D;AACJ;AACAN,EAAK,cAAc;"}

package/dist/components/Form/Form/FormGenerator.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import { createElement as u } from "react";
+import { Checkbox as h } from "../Checkbox/Checkbox.js";
+import { FileUpload as F } from "../FileUpload/FileUpload.js";
+import { InputField as s } from "../InputField/InputField.js";
+import { InputLabel as g } from "../InputLabel/InputLabel.js";
+import { Portion as C } from "../../Portion/Portion.js";
+import { RadioButton as S } from "../RadioButton/RadioButton.js";
+import { RadioGroup as b } from "../RadioButton/RadioGroup.js";
+import { Row as E } from "../../Row/Row.js";
+import { Select as P } from "../Select/Select.js";
+import { Switch as x } from "../Checkbox/Switch.js";
+import { TextArea as k } from "../TextArea/TextArea.js";
+import { Element as I } from "../../Element/Element.js";
+const R = {
+  Checkbox: h,
+  Switch: x,
+  InputField: s,
+  FileUpload: F,
+  InputLabel: g,
+  RadioButton: S,
+  RadioGroup: b,
+  Select: P,
+  TextArea: k,
+  Empty: "div"
+}, w = (r, e) => {
+  const { as: m, name: o, ...t } = r, n = (p) => {
+    e(o, p);
+  }, i = R[m] || s;
+  return /* @__PURE__ */ a(
+    I,
+    {
+      as: i,
+      ...t,
+      name: o,
+      isFullWidth: !0,
+      onChange: n
+    }
+  );
+}, D = (r, e, m) => {
+  const o = r.map((t, n) => {
+    const {
+      desktopSpan: i,
+      tabletLandscapeSpan: p,
+      tabletPortraitSpan: l,
+      mobileSpan: f,
+      isHorizontal: c,
+      ...d
+    } = t;
+    return /* @__PURE__ */ u(C, { ...{
+      desktopSpan: i,
+      tabletLandscapeSpan: p,
+      tabletPortraitSpan: l,
+      mobileSpan: f,
+      isHorizontal: c
+    }, key: `${t.name}-${n}` }, w(d, e));
+  });
+  return /* @__PURE__ */ a(E, { gutters: m, children: o });
+};
+export {
+  D as generateFormThroughConfig
+};
+//# sourceMappingURL=FormGenerator.js.map

package/dist/components/Form/Form/FormGenerator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FormGenerator.js","sources":["../../../../src/components/Form/Form/FormGenerator.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { ElementType, ReactNode } from \"react\";\n\n// ELEMENT =============================================================================================================\nimport { ElementProps, SpacingTypes } from \"../../Element/constants\";\n\n// INPUT ===============================================================================================================\n// Common props shared by form inputs\nexport interface InputCommonProps {\n    label?: string;\n    helpText?: string;\n    errorText?: string;\n    required?: boolean;\n    disabled?: boolean;\n}\n\n// OTHER ===============================================================================================================\nimport { Checkbox } from \"../Checkbox/Checkbox\";\nimport { Element } from \"$element\";\nimport { FileUpload } from \"../FileUpload/FileUpload\";\nimport { InputField } from \"../InputField/InputField\";\nimport { InputLabel, InputLabelCustomProps } from \"../InputLabel/InputLabel\";\nimport { PortionProps, Portion } from \"../../Portion/Portion\";\nimport { RadioButton } from \"../RadioButton/RadioButton\";\nimport { RadioGroup } from \"../RadioButton/RadioGroup\";\nimport { RadioGroupOptionProps } from \"../RadioButton/constants\";\nimport { Row } from \"../../Row/Row\";\nimport { Select } from \"../Select/Select\";\nimport { Switch } from \"../Checkbox/Switch\";\nimport { TextArea } from \"../TextArea/TextArea\";\n\n// Types\nexport type FormFieldsType = ElementProps<HTMLInputElement> &\n    ElementProps<HTMLSelectElement> &\n    ElementProps<HTMLTextAreaElement> &\n    InputLabelCustomProps &\n    InputCommonProps;\n\nexport type FormFieldsConfigBase = PortionProps & FormFieldsType;\n\ninterface FormFieldOptionsType extends RadioGroupOptionProps {\n    id    : string;\n    label : string;\n    value : string;\n}\n\nexport interface FormFieldsConfig extends FormFieldsConfigBase {\n    as        : ElementType;\n    options ? : FormFieldOptionsType[];\n    name      : string;\n    // Making name required for field identification\n}\n\n// Supported Form elements for \"as\" prop in config\nconst FormElements: Record<string, ElementType> = {\n    Checkbox,\n    Switch,\n    InputField,\n    FileUpload,\n    InputLabel,\n    RadioButton,\n    RadioGroup,\n    Select,\n    TextArea,\n    Empty: \"div\",\n};\n\nconst getFormItem = (\n    formField: Omit<FormFieldsConfig, \"mobileSpan\" | \"tabletLandscapeSpan\" | \"isHorizontal\" | \"desktopSpan\" | \"tabletPortraitSpan\">,\n    onFieldChange: (fieldName: string, value: any) => void\n): React.ReactNode => {\n    const { as: elementName, name, ...formFieldProps } = formField;\n\n    // Create an onChange handler specific to this field\n    const handleChange = (value: any) => {\n        onFieldChange(name, value);\n    };\n\n    const ElementComponent = FormElements[elementName as keyof typeof FormElements] || InputField;\n\n    return (\n        <Element\n            as={ElementComponent}\n            {...formFieldProps}\n            name={name}\n            isFullWidth\n            onChange={handleChange}\n        />\n    );\n};\n\nexport const generateFormThroughConfig = (\n    fields: FormFieldsConfig[],\n    onFieldChange: (fieldName: string, value: any) => void,\n    spacing: SpacingTypes | undefined,\n): React.ReactNode => {\n    const formChildren: ReactNode[] = fields.map((field, index) => {\n        const {\n                  desktopSpan,\n                  tabletLandscapeSpan,\n                  tabletPortraitSpan,\n                  mobileSpan,\n                  isHorizontal,\n                  ...formField\n              } = field;\n\n        const portionProps = {\n            desktopSpan,\n            tabletLandscapeSpan,\n            tabletPortraitSpan,\n            mobileSpan,\n            isHorizontal,\n        };\n\n        return (\n            <Portion {...portionProps} key={`${field.name}-${index}`}>\n                {getFormItem(formField, onFieldChange)}\n            </Portion>\n        );\n    });\n\n    return <Row gutters={spacing}>{formChildren}</Row>;\n};\n"],"names":["FormElements","Checkbox","Switch","InputField","FileUpload","InputLabel","RadioButton","RadioGroup","Select","TextArea","getFormItem","formField","onFieldChange","elementName","name","formFieldProps","handleChange","value","ElementComponent","jsx","Element","generateFormThroughConfig","fields","spacing","formChildren","field","index","desktopSpan","tabletLandscapeSpan","tabletPortraitSpan","mobileSpan","isHorizontal","createElement","Portion","Row"],"mappings":";;;;;;;;;;;;;;AAsDA,MAAMA,IAA4C;AAAA,EAC9C,UAAAC;AAAA,EACA,QAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,YAAAC;AAAA,EACA,aAAAC;AAAA,EACA,YAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAO;AACX,GAEMC,IAAc,CAChBC,GACAC,MACkB;AAClB,QAAM,EAAE,IAAIC,GAAa,MAAAC,GAAM,GAAGC,MAAmBJ,GAG/CK,IAAe,CAACC,MAAe;AACjC,IAAAL,EAAcE,GAAMG,CAAK;AAAA,EAC7B,GAEMC,IAAmBlB,EAAaa,CAAwC,KAAKV;AAEnF,SACI,gBAAAgB;AAAA,IAACC;AAAA,IAAA;AAAA,MACG,IAAIF;AAAA,MACH,GAAGH;AAAA,MACJ,MAAAD;AAAA,MACA,aAAW;AAAA,MACX,UAAUE;AAAA,IAAA;AAAA,EAAA;AAGtB,GAEaK,IAA4B,CACrCC,GACAV,GACAW,MACkB;AAClB,QAAMC,IAA4BF,EAAO,IAAI,CAACG,GAAOC,MAAU;AAC3D,UAAM;AAAA,MACI,aAAAC;AAAA,MACA,qBAAAC;AAAA,MACA,oBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,cAAAC;AAAA,MACA,GAAGpB;AAAA,IAAA,IACHc;AAUV,WACI,gBAAAO,EAACC,GAAA,EAAS,GATO;AAAA,MACjB,aAAAN;AAAA,MACA,qBAAAC;AAAA,MACA,oBAAAC;AAAA,MACA,YAAAC;AAAA,MACA,cAAAC;AAAA,IAAA,GAI2B,KAAK,GAAGN,EAAM,IAAI,IAAIC,CAAK,GAAA,GACjDhB,EAAYC,GAAWC,CAAa,CACzC;AAAA,EAER,CAAC;AAED,SAAO,gBAAAO,EAACe,GAAA,EAAI,SAASX,GAAU,UAAAC,GAAa;AAChD;"}