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

package/dist/components/Drawer/Drawer.d.ts

@@ -10,6 +10,9 @@ export interface DrawerCustomProps {
     isDismissible?: boolean;
     showOverlay?: boolean;
     blurOverlay?: boolean;
+    /** @deprecated Click-outside-to-close is governed by `isDismissible` via the
+     *  popover API: when dismissible, both ESC and backdrop click close the
+     *  drawer. Splitting the two is no longer supported. */
     closeOnClickOutside?: boolean;
     label?: string;
     description?: string;

package/dist/components/Drawer/Drawer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAQxE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,iBAAiB;IAC9B,EAAE,EAAsB,MAAM,CAAC;IAC/B,MAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,OAAoB,CAAC,EAAG,MAAM,IAAI,CAAC;IACnC,QAAoB,CAAC,EAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC5D,IAAoB,CAAC,EAAG,YAAY,CAAC;IACrC,aAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,WAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,WAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,mBAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,KAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,WAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,MAAoB,CAAC,EAAG,MAAM,CAAC;CAClC;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAC/C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,EAAE,MAAM,iBAAiB,CAAC,GAAG,iBAAiB,CAAC;AAGnH,eAAO,MAAM,MAAM,8JAuKlB,CAAC"}
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.tsx"],"names":[],"mappings":"AACA,OAAO,KAA4B,MAAM,OAAO,CAAC;AAGjD,OAAO,EAAE,kBAAkB,EAAE,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAKxE,OAAO,cAAc,CAAC;AAEtB,MAAM,WAAW,iBAAiB;IAC9B,EAAE,EAAsB,MAAM,CAAC;IAC/B,MAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,OAAoB,CAAC,EAAG,MAAM,IAAI,CAAC;IACnC,QAAoB,CAAC,EAAG,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC5D,IAAoB,CAAC,EAAG,YAAY,CAAC;IACrC,aAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,WAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,WAAoB,CAAC,EAAG,OAAO,CAAC;IAChC;;4DAEwD;IACxD,mBAAoB,CAAC,EAAG,OAAO,CAAC;IAChC,KAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,WAAoB,CAAC,EAAG,MAAM,CAAC;IAC/B,MAAoB,CAAC,EAAG,MAAM,CAAC;CAClC;AAED,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC;AAC/C,MAAM,MAAM,WAAW,GAAG,IAAI,CAAC,kBAAkB,CAAC,iBAAiB,CAAC,EAAE,MAAM,iBAAiB,CAAC,GAAG,iBAAiB,CAAC;AAGnH,eAAO,MAAM,MAAM,8JAmHlB,CAAC"}

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,96 @@
+"use client";
+import { jsxs as n, jsx as m } from "react/jsx-runtime";
+import L, { useRef as P, useEffect as u } from "react";
+import { Div as $ } from "../Element/Tags.js";
+/* empty css           */
+import { Element as C } from "../Element/Element.js";
+const S = L.forwardRef(
+  ({
+    id: f,
+    children: v,
+    isOpen: r = !1,
+    onClose: t,
+    position: w = "right",
+    size: p = "medium",
+    padding: g = "micro",
+    bgColor: h,
+    bgColour: b,
+    isDismissible: d = !0,
+    showOverlay: y = !0,
+    blurOverlay: E = !1,
+    closeOnClickOutside: T,
+    zIndex: l,
+    label: N,
+    description: a,
+    classNames: R = [],
+    ...k
+  }, x) => {
+    const s = `${f}`, c = a ? `${s}-description` : void 0, D = P(null), o = x || D, j = [
+      "drawer",
+      w,
+      p,
+      ...y ? ["with-overlay"] : [],
+      ...E ? ["blur-overlay"] : [],
+      ...R
+    ];
+    return u(() => {
+      const e = o.current;
+      e && (r && !e.matches(":popover-open") ? (e.showPopover(), e.focus()) : !r && e.matches(":popover-open") && e.hidePopover());
+    }, [r, o]), u(() => {
+      const e = o.current;
+      if (!e) return;
+      const i = (I) => {
+        I.newState === "closed" && r && t && t();
+      };
+      return e.addEventListener("toggle", i), () => e.removeEventListener("toggle", i);
+    }, [r, t, o]), /* @__PURE__ */ n(
+      C,
+      {
+        as: "div",
+        id: s,
+        "data-drawer": !0,
+        ref: o,
+        classNames: j,
+        popover: d ? "auto" : "manual",
+        role: "dialog",
+        "aria-modal": "true",
+        "aria-label": N || "Drawer",
+        "aria-describedby": c,
+        tabIndex: -1,
+        style: l !== void 0 ? { zIndex: l } : void 0,
+        ...k,
+        children: [
+          d && t && /* @__PURE__ */ m(
+            "button",
+            {
+              type: "button",
+              className: "drawer-dismiss-button",
+              onClick: t,
+              "aria-label": "Close drawer",
+              children: "×"
+            }
+          ),
+          /* @__PURE__ */ n(
+            $,
+            {
+              className: "drawer-content",
+              role: "document",
+              padding: g,
+              bgColor: h,
+              bgColour: b,
+              children: [
+                a && /* @__PURE__ */ m("div", { id: c, className: "sr-only", children: a }),
+                v
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+S.displayName = "Drawer";
+export {
+  S as Drawer
+};
+//# sourceMappingURL=Drawer.js.map

package/dist/components/Drawer/Drawer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.js","sources":["../../../src/components/Drawer/Drawer.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useEffect, useRef } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps, SpacingTypes } from \"../Element/constants\";\nimport { Div } from \"$tags\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./drawer.css\";\n\nexport interface DrawerCustomProps {\n    id                    : string;\n    isOpen              ? : boolean;\n    onClose             ? : () => void;\n    position            ? : \"top\" | \"right\" | \"bottom\" | \"left\";\n    size                ? : SpacingTypes;\n    isDismissible       ? : boolean;\n    showOverlay         ? : boolean;\n    blurOverlay         ? : boolean;\n    /** @deprecated Click-outside-to-close is governed by `isDismissible` via the\n     *  popover API: when dismissible, both ESC and backdrop click close the\n     *  drawer. Splitting the two is no longer supported. */\n    closeOnClickOutside ? : boolean;\n    label               ? : string;\n    description         ? : string;\n    zIndex              ? : number;\n}\n\nexport type DrawerElementType = HTMLDivElement;\nexport type DrawerProps = Omit<CommonAndHTMLProps<DrawerElementType>, keyof DrawerCustomProps> & DrawerCustomProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const Drawer = React.forwardRef(\n    (\n        {\n            id,\n            children,\n            isOpen = false,\n            onClose,\n            position = \"right\",\n            size = \"medium\",\n            padding = \"micro\",\n            bgColor,\n            bgColour,\n            isDismissible = true,\n            showOverlay = true,\n            blurOverlay = false,\n            closeOnClickOutside : _closeOnClickOutside,\n            zIndex,\n            label,\n            description,\n            classNames = [],\n            ...props\n        } : DrawerProps,\n        ref : React.Ref<DrawerElementType>,\n    ) => {\n        const drawerId      = `${id}`;\n        const descriptionId = description ? `${drawerId}-description` : undefined;\n        const drawerRef     = useRef<HTMLDivElement>(null);\n        const effectiveRef  = (ref as React.MutableRefObject<HTMLDivElement | null>) || drawerRef;\n\n        const drawerClasses : string[] = [\n            \"drawer\",\n            position,\n            size,\n            ...(showOverlay ? [ \"with-overlay\" ] : []),\n            ...(blurOverlay ? [ \"blur-overlay\" ] : []),\n            ...classNames,\n        ];\n\n        // Sync isOpen prop to popover state. The popover API handles backdrop\n        // click and ESC dismissal natively; we only call showPopover/hidePopover.\n        useEffect(() => {\n            const drawer = effectiveRef.current;\n            if (!drawer) return;\n\n            if (isOpen && !drawer.matches(\":popover-open\")) {\n                drawer.showPopover();\n                // Focus the dismiss button or the drawer itself for keyboard users.\n                drawer.focus();\n            } else if (!isOpen && drawer.matches(\":popover-open\")) {\n                drawer.hidePopover();\n            }\n        }, [ isOpen, effectiveRef ]);\n\n        // When the popover closes externally (ESC, backdrop click), keep React\n        // state in sync by firing onClose.\n        useEffect(() => {\n            const drawer = effectiveRef.current;\n            if (!drawer) return;\n\n            const handleToggle = (e : Event) => {\n                const toggleEvent = e as ToggleEvent;\n                if (toggleEvent.newState === \"closed\" && isOpen && onClose) {\n                    onClose();\n                }\n            };\n\n            drawer.addEventListener(\"toggle\", handleToggle);\n            return () => drawer.removeEventListener(\"toggle\", handleToggle);\n        }, [ isOpen, onClose, effectiveRef ]);\n\n        return (\n            <Element<DrawerElementType>\n                as=\"div\"\n                id={drawerId}\n                data-drawer\n                ref={effectiveRef}\n                classNames={drawerClasses}\n                popover={isDismissible ? \"auto\" : \"manual\"}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-label={label || \"Drawer\"}\n                aria-describedby={descriptionId}\n                tabIndex={-1}\n                style={zIndex !== undefined ? { zIndex } : undefined}\n                {...props}\n            >\n                {isDismissible && onClose && (\n                    <button\n                        type=\"button\"\n                        className=\"drawer-dismiss-button\"\n                        onClick={onClose}\n                        aria-label=\"Close drawer\"\n                    >\n                        &times;\n                    </button>\n                )}\n\n                <Div\n                    className=\"drawer-content\"\n                    role=\"document\"\n                    padding={padding}\n                    bgColor={bgColor}\n                    bgColour={bgColour}\n                >\n                    {description && (\n                        <div id={descriptionId} className=\"sr-only\">\n                            {description}\n                        </div>\n                    )}\n\n                    {children}\n                </Div>\n            </Element>\n        );\n    },\n);\nDrawer.displayName = \"Drawer\";\n"],"names":["Drawer","React","id","children","isOpen","onClose","position","size","padding","bgColor","bgColour","isDismissible","showOverlay","blurOverlay","_closeOnClickOutside","zIndex","label","description","classNames","props","ref","drawerId","descriptionId","drawerRef","useRef","effectiveRef","drawerClasses","useEffect","drawer","handleToggle","e","jsxs","Element","jsx","Div"],"mappings":";;;;;AAiCO,MAAMA,IAASC,EAAM;AAAA,EACxB,CACI;AAAA,IACI,IAAAC;AAAA,IACA,UAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,SAAAC;AAAA,IACA,UAAAC,IAAW;AAAA,IACX,MAAAC,IAAO;AAAA,IACP,SAAAC,IAAU;AAAA,IACV,SAAAC;AAAA,IACA,UAAAC;AAAA,IACA,eAAAC,IAAgB;AAAA,IAChB,aAAAC,IAAc;AAAA,IACd,aAAAC,IAAc;AAAA,IACd,qBAAsBC;AAAA,IACtB,QAAAC;AAAA,IACA,OAAAC;AAAA,IACA,aAAAC;AAAA,IACA,YAAAC,IAAa,CAAA;AAAA,IACb,GAAGC;AAAA,EAAA,GAEPC,MACC;AACD,UAAMC,IAAgB,GAAGnB,CAAE,IACrBoB,IAAgBL,IAAc,GAAGI,CAAQ,iBAAiB,QAC1DE,IAAgBC,EAAuB,IAAI,GAC3CC,IAAiBL,KAAyDG,GAE1EG,IAA2B;AAAA,MAC7B;AAAA,MACApB;AAAA,MACAC;AAAA,MACA,GAAIK,IAAc,CAAE,cAAe,IAAI,CAAA;AAAA,MACvC,GAAIC,IAAc,CAAE,cAAe,IAAI,CAAA;AAAA,MACvC,GAAGK;AAAA,IAAA;AAKP,WAAAS,EAAU,MAAM;AACZ,YAAMC,IAASH,EAAa;AAC5B,MAAKG,MAEDxB,KAAU,CAACwB,EAAO,QAAQ,eAAe,KACzCA,EAAO,YAAA,GAEPA,EAAO,MAAA,KACA,CAACxB,KAAUwB,EAAO,QAAQ,eAAe,KAChDA,EAAO,YAAA;AAAA,IAEf,GAAG,CAAExB,GAAQqB,CAAa,CAAC,GAI3BE,EAAU,MAAM;AACZ,YAAMC,IAASH,EAAa;AAC5B,UAAI,CAACG,EAAQ;AAEb,YAAMC,IAAe,CAACC,MAAc;AAEhC,QADoBA,EACJ,aAAa,YAAY1B,KAAUC,KAC/CA,EAAA;AAAA,MAER;AAEA,aAAAuB,EAAO,iBAAiB,UAAUC,CAAY,GACvC,MAAMD,EAAO,oBAAoB,UAAUC,CAAY;AAAA,IAClE,GAAG,CAAEzB,GAAQC,GAASoB,CAAa,CAAC,GAGhC,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,IAAIX;AAAA,QACJ,eAAW;AAAA,QACX,KAAKI;AAAA,QACL,YAAYC;AAAA,QACZ,SAASf,IAAgB,SAAS;AAAA,QAClC,MAAK;AAAA,QACL,cAAW;AAAA,QACX,cAAYK,KAAS;AAAA,QACrB,oBAAkBM;AAAA,QAClB,UAAU;AAAA,QACV,OAAOP,MAAW,SAAY,EAAE,QAAAA,MAAW;AAAA,QAC1C,GAAGI;AAAA,QAEH,UAAA;AAAA,UAAAR,KAAiBN,KACd,gBAAA4B;AAAA,YAAC;AAAA,YAAA;AAAA,cACG,MAAK;AAAA,cACL,WAAU;AAAA,cACV,SAAS5B;AAAA,cACT,cAAW;AAAA,cACd,UAAA;AAAA,YAAA;AAAA,UAAA;AAAA,UAKL,gBAAA0B;AAAA,YAACG;AAAA,YAAA;AAAA,cACG,WAAU;AAAA,cACV,MAAK;AAAA,cACL,SAAA1B;AAAA,cACA,SAAAC;AAAA,cACA,UAAAC;AAAA,cAEC,UAAA;AAAA,gBAAAO,uBACI,OAAA,EAAI,IAAIK,GAAe,WAAU,WAC7B,UAAAL,GACL;AAAA,gBAGHd;AAAA,cAAA;AAAA,YAAA;AAAA,UAAA;AAAA,QACL;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AACAH,EAAO,cAAc;"}

package/dist/components/Element/Element.d.ts

@@ -1,7 +1,11 @@
 import React from "react";
 import { ElementProps } from './constants';
 
-export declare const Element: <K extends {}>(props: ElementProps<K> & {
-    ref?: React.LegacyRef<HTMLElement>;
+export declare const Element: <K extends HTMLElement = HTMLElement>(props: ElementProps<K> & {
+    role?: string;
+    ariaLabel?: string;
+    tabIndex?: number;
+    onKeyDown?: React.KeyboardEventHandler<K>;
+    ref?: React.Ref<K>;
 }) => React.ReactElement;
 //# sourceMappingURL=Element.d.ts.map

package/dist/components/Element/Element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Element.d.ts","sourceRoot":"","sources":["../../../src/components/Element/Element.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAG3C,eAAO,MAAM,OAAO,EA0Jf,CAAC,CAAC,SAAS,EAAE,EAAE,KAAK,EAAG,YAAY,CAAC,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAG,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAA;CAAE,KAAK,KAAK,CAAC,YAAY,CAAC"}
+{"version":3,"file":"Element.d.ts","sourceRoot":"","sources":["../../../src/components/Element/Element.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,OAAO,CAAC;AAM1B,OAAO,EAAE,YAAY,EAAE,MAAM,aAAa,CAAC;AAQ3C,eAAO,MAAM,OAAO,EAwJf,CAAC,CAAC,SAAS,WAAW,GAAG,WAAW,EACrC,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,GAAG;IACrB,IAAU,CAAC,EAAG,MAAM,CAAC;IACrB,SAAU,CAAC,EAAG,MAAM,CAAC;IACrB,QAAU,CAAC,EAAG,MAAM,CAAC;IACrB,SAAU,CAAC,EAAG,KAAK,CAAC,oBAAoB,CAAC,CAAC,CAAC,CAAC;IAC5C,GAAU,CAAC,EAAG,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAC9B,KACA,KAAK,CAAC,YAAY,CAAC"}

package/dist/components/Element/Element.js

@@ -0,0 +1,152 @@
+"use client";
+import { jsx as pt } from "react/jsx-runtime";
+import ht from "react";
+import { createClassName as mt } from "../../utils/classNames.js";
+const ct = ht.forwardRef(
+  ({
+    as: R = "div",
+    role: E,
+    ariaLabel: I,
+    tabIndex: j,
+    onKeyDown: A,
+    ...B
+  }, D) => {
+    const {
+      classNames: H = [],
+      bgColor: i,
+      bgColour: l,
+      bgOpacity: r,
+      borderColor: n,
+      borderColour: s,
+      borderOpacity: d,
+      className: S,
+      columns: bt,
+      fillColor: g,
+      fillColour: p,
+      gap: h,
+      hideOnDesktop: G,
+      hideOnMobile: V,
+      hideOnTabletLandscape: W,
+      hideOnTabletPortrait: q,
+      horizontalMargin: t,
+      horizontalPadding: o,
+      horizontallyCenterThis: J,
+      horizontallyCentreThis: K,
+      inheritFormSpacing: Q,
+      isClickable: U,
+      isFullHeight: X,
+      isFullWidth: Y,
+      layoutAsFlexbox: Z,
+      layoutAsGrid: _,
+      stackVertically: tt,
+      stackHorizontally: ot,
+      marginLeft: m,
+      marginBottom: c,
+      margin: b,
+      marginRight: y,
+      marginTop: $,
+      opacity: u,
+      paddingBottom: f,
+      paddingLeft: C,
+      padding: k,
+      paddingRight: O,
+      paddingTop: w,
+      pushItemsToEnds: et,
+      shadow: v,
+      shape: x,
+      showOnlyOnDesktop: at,
+      showOnlyOnMobile: it,
+      showOnlyOnTabletLandscape: lt,
+      showOnlyOnTabletPortrait: rt,
+      size: z,
+      strokeColor: T,
+      strokeColour: N,
+      textColor: P,
+      textColour: F,
+      verticalMargin: e,
+      verticalPadding: a,
+      verticallyCenterItems: nt,
+      verticallyCentreItems: st,
+      weight: L,
+      style: dt,
+      ...gt
+    } = B, M = {
+      ...dt,
+      ...r && { "--bg-opacity": Number(r) / 100 },
+      ...d && { "--border-opacity": Number(d) / 100 }
+    };
+    return /* @__PURE__ */ pt(
+      R,
+      {
+        ref: D,
+        role: E,
+        "aria-label": I,
+        tabIndex: j,
+        onKeyDown: A,
+        ...gt,
+        "data-form-spaced": Q || void 0,
+        style: Object.keys(M).length > 0 ? M : void 0,
+        className: mt(
+          [
+            S,
+            i && `bg-${i}`,
+            l && `bg-${l}`,
+            n && `border-${n}`,
+            s && `border-${s}`,
+            g && `fill-${g}`,
+            p && `fill-${p}`,
+            G && "hide-on-desktop",
+            V && "hide-on-mobile",
+            W && "hide-on-tablet-landscape",
+            q && "hide-on-tablet-portrait",
+            t && `margin-right-${t} margin-left-${t}`,
+            o && `padding-right-${o} padding-left-${o}`,
+            J && "horizontally-centre-this",
+            K && "horizontally-centre-this",
+            U && "is-clickable",
+            X && "full-height",
+            Y && "full-width",
+            Z && "layout-flexbox",
+            _ && "layout-grid",
+            tt && "stack-vertically",
+            ot && "stack-horizontally",
+            h && `gap-${h}`,
+            m && `margin-left-${m}`,
+            c && `margin-bottom-${c}`,
+            b && `margin-all-${b}`,
+            y && `margin-right-${y}`,
+            $ && `margin-top-${$}`,
+            u && `opacity-${u}`,
+            f && `padding-bottom-${f}`,
+            C && `padding-left-${C}`,
+            k && `padding-all-${k}`,
+            O && `padding-right-${O}`,
+            w && `padding-top-${w}`,
+            et && "push-to-ends",
+            v && `shadow-${v}`,
+            x && `shape-${x}`,
+            at && "show-only-on-desktop",
+            it && "show-only-on-mobile",
+            lt && "show-only-on-tablet-landscape",
+            rt && "show-only-on-tablet-portrait",
+            z && `size-${z}`,
+            T && `stroke-${T}`,
+            N && `stroke-${N}`,
+            P && `text-${P}`,
+            F && `text-${F}`,
+            e && `margin-top-${e} margin-bottom-${e}`,
+            a && `padding-top-${a} padding-bottom-${a}`,
+            nt && "vertically-centre-items",
+            st && "vertically-centre-items",
+            L && `weight-${L}`
+          ].concat(H)
+        )
+      }
+    );
+  }
+);
+ct.displayName = "Element";
+export {
+  ct as Element
+};
+//# sourceMappingURL=Element.js.map

package/dist/components/Element/Element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Element.js","sources":["../../../src/components/Element/Element.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// UTILS ===============================================================================================================\nimport { createClassName } from \"$utils/classNames\";\n\n// OTHER ===============================================================================================================\nimport { ElementProps } from \"./constants\";\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\n// Internally typed against HTMLElement (the underlying forwardRef call can\n// only carry one ref type). The exported cast below re-types `Element` as a\n// generic component so `<Element<HTMLButtonElement>>` actually flows a button-\n// typed ref through to consumers — `forwardRef` strips the generic K from the\n// outer signature without this cast.\nexport const Element = React.forwardRef(\n    <K extends HTMLElement>(\n        {\n            as : Component = \"div\",\n            role,\n            ariaLabel,\n            tabIndex,\n            onKeyDown,\n            ...props\n        }: ElementProps<K> & {\n            role      ? : string;\n            ariaLabel ? : string;\n            tabIndex  ? : number;\n            onKeyDown ? : (event: React.KeyboardEvent) => void;\n        }, ref: React.Ref<HTMLElement>\n    ) => {\n        const {\n            classNames = [],\n            bgColor,\n            bgColour,\n            bgOpacity,\n            borderColor,\n            borderColour,\n            borderOpacity,\n            className,\n            columns,\n            fillColor,\n            fillColour,\n            gap,\n            hideOnDesktop,\n            hideOnMobile,\n            hideOnTabletLandscape,\n            hideOnTabletPortrait,\n            horizontalMargin,\n            horizontalPadding,\n            horizontallyCenterThis,\n            horizontallyCentreThis,\n            inheritFormSpacing,\n            isClickable,\n            isFullHeight,\n            isFullWidth,\n            layoutAsFlexbox,\n            layoutAsGrid,\n            stackVertically,\n            stackHorizontally,\n            marginLeft,\n            marginBottom,\n            margin,\n            marginRight,\n            marginTop,\n            opacity,\n            paddingBottom,\n            paddingLeft,\n            padding,\n            paddingRight,\n            paddingTop,\n            pushItemsToEnds,\n            shadow,\n            shape,\n            showOnlyOnDesktop,\n            showOnlyOnMobile,\n            showOnlyOnTabletLandscape,\n            showOnlyOnTabletPortrait,\n            size,\n            strokeColor,\n            strokeColour,\n            textColor,\n            textColour,\n            verticalMargin,\n            verticalPadding,\n            verticallyCenterItems,\n            verticallyCentreItems,\n            weight,\n            style,\n            ...minimalProps\n        } = props;\n\n        // Build style object with opacity CSS custom properties\n        const computedStyle = {\n            ...style,\n            ...(bgOpacity && { \"--bg-opacity\": Number(bgOpacity) / 100 }),\n            ...(borderOpacity && { \"--border-opacity\": Number(borderOpacity) / 100 }),\n        } as React.CSSProperties;\n\n        return (\n            <Component\n                ref={ref}\n                role={role}\n                aria-label={ariaLabel}\n                tabIndex={tabIndex}\n                onKeyDown={onKeyDown}\n                {...minimalProps}\n                data-form-spaced={inheritFormSpacing || undefined}\n                style={Object.keys(computedStyle).length > 0 ? computedStyle : undefined}\n                className={createClassName(\n                    [\n                        className,\n                        bgColor && `bg-${bgColor}`,\n                        bgColour && `bg-${bgColour}`,\n                        borderColor && `border-${borderColor}`,\n                        borderColour && `border-${borderColour}`,\n                        fillColor && `fill-${fillColor}`,\n                        fillColour && `fill-${fillColour}`,\n                        hideOnDesktop && \"hide-on-desktop\",\n                        hideOnMobile && \"hide-on-mobile\",\n                        hideOnTabletLandscape && \"hide-on-tablet-landscape\",\n                        hideOnTabletPortrait && \"hide-on-tablet-portrait\",\n                        horizontalMargin && `margin-right-${horizontalMargin} margin-left-${horizontalMargin}`,\n                        horizontalPadding && `padding-right-${horizontalPadding} padding-left-${horizontalPadding}`,\n                        horizontallyCenterThis && \"horizontally-centre-this\",\n                        horizontallyCentreThis && \"horizontally-centre-this\",\n                        isClickable && \"is-clickable\",\n                        isFullHeight && \"full-height\",\n                        isFullWidth && \"full-width\",\n                        layoutAsFlexbox && \"layout-flexbox\",\n                        layoutAsGrid && \"layout-grid\",\n                        stackVertically && \"stack-vertically\",\n                        stackHorizontally && \"stack-horizontally\",\n                        gap && `gap-${gap}`,\n                        marginLeft && `margin-left-${marginLeft}`,\n                        marginBottom && `margin-bottom-${marginBottom}`,\n                        margin && `margin-all-${margin}`,\n                        marginRight && `margin-right-${marginRight}`,\n                        marginTop && `margin-top-${marginTop}`,\n                        opacity && `opacity-${opacity}`,\n                        paddingBottom && `padding-bottom-${paddingBottom}`,\n                        paddingLeft && `padding-left-${paddingLeft}`,\n                        padding && `padding-all-${padding}`,\n                        paddingRight && `padding-right-${paddingRight}`,\n                        paddingTop && `padding-top-${paddingTop}`,\n                        pushItemsToEnds && \"push-to-ends\",\n                        shadow && `shadow-${shadow}`,\n                        shape && `shape-${shape}`,\n                        showOnlyOnDesktop && \"show-only-on-desktop\",\n                        showOnlyOnMobile && \"show-only-on-mobile\",\n                        showOnlyOnTabletLandscape && \"show-only-on-tablet-landscape\",\n                        showOnlyOnTabletPortrait && \"show-only-on-tablet-portrait\",\n                        size && `size-${size}`,\n                        strokeColor && `stroke-${strokeColor}`,\n                        strokeColour && `stroke-${strokeColour}`,\n                        textColor && `text-${textColor}`,\n                        textColour && `text-${textColour}`,\n                        verticalMargin && `margin-top-${verticalMargin} margin-bottom-${verticalMargin}`,\n                        verticalPadding && `padding-top-${verticalPadding} padding-bottom-${verticalPadding}`,\n                        verticallyCenterItems && \"vertically-centre-items\",\n                        verticallyCentreItems && \"vertically-centre-items\",\n                        weight && `weight-${weight}`,\n                    ].concat(classNames),\n                )}\n            />\n        );\n    },\n) as <K extends HTMLElement = HTMLElement>(\n    props: ElementProps<K> & {\n        role      ? : string;\n        ariaLabel ? : string;\n        tabIndex  ? : number;\n        onKeyDown ? : React.KeyboardEventHandler<K>;\n        ref       ? : React.Ref<K>;\n    },\n) => React.ReactElement;\n(Element as any).displayName = \"Element\";\n"],"names":["Element","React","Component","role","ariaLabel","tabIndex","onKeyDown","props","ref","classNames","bgColor","bgColour","bgOpacity","borderColor","borderColour","borderOpacity","className","columns","fillColor","fillColour","gap","hideOnDesktop","hideOnMobile","hideOnTabletLandscape","hideOnTabletPortrait","horizontalMargin","horizontalPadding","horizontallyCenterThis","horizontallyCentreThis","inheritFormSpacing","isClickable","isFullHeight","isFullWidth","layoutAsFlexbox","layoutAsGrid","stackVertically","stackHorizontally","marginLeft","marginBottom","margin","marginRight","marginTop","opacity","paddingBottom","paddingLeft","padding","paddingRight","paddingTop","pushItemsToEnds","shadow","shape","showOnlyOnDesktop","showOnlyOnMobile","showOnlyOnTabletLandscape","showOnlyOnTabletPortrait","size","strokeColor","strokeColour","textColor","textColour","verticalMargin","verticalPadding","verticallyCenterItems","verticallyCentreItems","weight","style","minimalProps","computedStyle","jsx","createClassName"],"mappings":"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"}

package/dist/components/Element/Tags.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx as a } from "react/jsx-runtime";
+import i from "react";
+import { Element as f } from "./Element.js";
+const e = (o, r) => i.forwardRef(
+  (t, s) => {
+    const n = { ...r, ...t };
+    if (o === "a" && "external" in n) {
+      const { external: c } = n;
+      c && (n.target = "_blank", n.rel = "noopener noreferrer");
+    }
+    return /* @__PURE__ */ a(f, { as: o, ref: s, ...n });
+  }
+), d = e("article"), v = e("aside"), x = e("body"), y = e("div"), b = e("footer"), h = e("header"), k = e("main"), u = e("nav"), A = e("section"), E = e("span"), H = e("a", {
+  rel: "noopener noreferrer"
+  // Default props for Hyperlink
+});
+export {
+  d as Article,
+  v as Aside,
+  x as Body,
+  y as Div,
+  b as Footer,
+  h as Header,
+  H as Hyperlink,
+  k as Main,
+  u as Nav,
+  A as Section,
+  E as Span
+};
+//# sourceMappingURL=Tags.js.map

package/dist/components/Element/Tags.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tags.js","sources":["../../../src/components/Element/Tags.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// OTHER ===============================================================================================================\nimport { Element } from \"./Element\";\nimport { ElementProps } from \"./constants\";\n\ninterface HyperlinkCustomProps {\n    href         : string;\n    target     ? : \"_blank\" | \"_self\" | \"_parent\" | \"_top\";\n    rel        ? : string;\n    isExternal ? : boolean;\n}\n\n// Helper type for components that might have custom props\ntype CustomProps<T extends React.ElementType, P = {}> = ElementProps<{}> &\n                                                        React.HTMLAttributes<HTMLElement> & P;\n\nconst createComponentWithElement = <T extends React.ElementType, P = {}>(\n    tagName : T,\n    defaultProps? : Partial<P>,\n) => {\n    return React.forwardRef<HTMLElement, CustomProps<T, P>>(\n        (props, ref) => {\n            // Merge default props with provided props\n            const finalProps = {...defaultProps, ...props};\n\n            // Handle external links for Hyperlink component\n            if (tagName === \"a\" && \"external\" in finalProps) {\n                const {external, ...restProps} = finalProps;\n                if (external) {\n                    finalProps.target = \"_blank\";\n                    finalProps.rel = \"noopener noreferrer\";\n                }\n            }\n\n            return <Element as={tagName} ref={ref} {...finalProps} />;\n        },\n    );\n};\n\nexport const Article = createComponentWithElement(\"article\");\nexport const Aside = createComponentWithElement(\"aside\");\nexport const Body = createComponentWithElement(\"body\");\nexport const Div = createComponentWithElement(\"div\");\nexport const Footer = createComponentWithElement(\"footer\");\nexport const Header = createComponentWithElement(\"header\");\nexport const Main = createComponentWithElement(\"main\");\nexport const Nav = createComponentWithElement(\"nav\");\nexport const Section = createComponentWithElement(\"section\");\nexport const Span = createComponentWithElement(\"span\");\nexport const Hyperlink = createComponentWithElement<\"a\", HyperlinkCustomProps>(\"a\", {\n    rel : \"noopener noreferrer\", // Default props for Hyperlink\n});\n"],"names":["createComponentWithElement","tagName","defaultProps","React","props","ref","finalProps","external","Element","Article","Aside","Body","Div","Footer","Header","Main","Nav","Section","Span","Hyperlink"],"mappings":";;;AAkBA,MAAMA,IAA6B,CAC/BC,GACAC,MAEOC,EAAM;AAAA,EACT,CAACC,GAAOC,MAAQ;AAEZ,UAAMC,IAAa,EAAC,GAAGJ,GAAc,GAAGE,EAAA;AAGxC,QAAIH,MAAY,OAAO,cAAcK,GAAY;AAC7C,YAAM,EAAC,UAAAC,EAAsB,IAAID;AACjC,MAAIC,MACAD,EAAW,SAAS,UACpBA,EAAW,MAAM;AAAA,IAEzB;AAEA,6BAAQE,GAAA,EAAQ,IAAIP,GAAS,KAAAI,GAAW,GAAGC,GAAY;AAAA,EAC3D;AAAA,GAIKG,IAAUT,EAA2B,SAAS,GAC9CU,IAAQV,EAA2B,OAAO,GAC1CW,IAAOX,EAA2B,MAAM,GACxCY,IAAMZ,EAA2B,KAAK,GACtCa,IAASb,EAA2B,QAAQ,GAC5Cc,IAASd,EAA2B,QAAQ,GAC5Ce,IAAOf,EAA2B,MAAM,GACxCgB,IAAMhB,EAA2B,KAAK,GACtCiB,IAAUjB,EAA2B,SAAS,GAC9CkB,IAAOlB,EAA2B,MAAM,GACxCmB,IAAYnB,EAAsD,KAAK;AAAA,EAChF,KAAM;AAAA;AACV,CAAC;"}

package/dist/components/Element/constants.js

@@ -0,0 +1,8 @@
+"use client";
+import { oklchColourDefinitions as o } from "../../styles/colours.js";
+const t = ["transparent", "black", "white"], s = [...Object.keys(o), ...t];
+export {
+  t as BasicColours,
+  s as FictoanColours
+};
+//# sourceMappingURL=constants.js.map

package/dist/components/Element/constants.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"constants.js","sources":["../../../src/components/Element/constants.ts"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport { ElementType, FormEvent, HTMLProps } from \"react\";\n\n// STYLES ==============================================================================================================\nimport { oklchColourDefinitions, type OklchColourName } from \"../../styles/colours\";\n\n// Basic colours without hue/chroma (not part of OKLCH definitions)\nexport const BasicColours = [ \"transparent\", \"black\", \"white\" ] as const;\ntype BasicColoursType = typeof BasicColours[number];\n\n// Combined list of all available colours\nexport const FictoanColours = [ ...Object.keys(oklchColourDefinitions), ...BasicColours ] as const;\n\ntype Luminance = \"dark\" | \"light\";\ntype ShadeLevel = 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;\ntype OpacityLevel = 0 | 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;\ntype CustomColours = \"hue\" | \"tint\" | \"shade\" | \"analogue\" | \"accent\";\n\n// prettier-ignore\nexport type EmphasisTypes = \"primary\" | \"secondary\" | \"tertiary\" | \"custom\";\nexport type SpacingTypes = \"none\" | \"nano\" | \"micro\" | \"tiny\" | \"small\" | \"medium\" | \"large\" | \"huge\";\nexport type ShadowTypes = \"none\" | \"mild\" | \"hard\" | \"soft\";\nexport type ShapeTypes = \"rounded\" | \"curved\";\nexport type OpacityTypes = \"0\" | \"5\" | \"10\" | \"20\" | \"30\" | \"40\" | \"50\" | \"60\" | \"70\" | \"80\" | \"90\";\nexport type WeightTypes = \"100\" | \"200\" | \"300\" | \"400\" | \"500\" | \"600\" | \"700\" | \"800\" | \"900\";\nexport type ButtonVariantTypes = \"success\" | \"warning\" | \"danger\";\n\nexport type ColourPropTypes =\n    | `${OklchColourName}-${Luminance}${ShadeLevel}`\n    | `${OklchColourName}-${Luminance}${ShadeLevel}-opacity${OpacityLevel}`\n    | `${OklchColourName}-opacity${OpacityLevel}`\n    | `${BasicColoursType}-opacity${OpacityLevel}`\n    | OklchColourName\n    | BasicColoursType\n    | CustomColours\n    | \"\";\n\nexport interface CommonProps {\n    bgColor                   ? : ColourPropTypes;\n    bgColour                  ? : ColourPropTypes;\n    bgOpacity                 ? : OpacityTypes;\n    textColor                 ? : ColourPropTypes;\n    textColour                ? : ColourPropTypes;\n    borderColor               ? : ColourPropTypes;\n    borderColour              ? : ColourPropTypes;\n    borderOpacity             ? : OpacityTypes;\n    fillColor                 ? : ColourPropTypes;\n    fillColour                ? : ColourPropTypes;\n    strokeColor               ? : ColourPropTypes;\n    strokeColour              ? : ColourPropTypes;\n    shadow                    ? : ShadowTypes;\n    shape                     ? : ShapeTypes;\n    opacity                   ? : OpacityTypes;\n    // Flexbox -----------------------------------------------------------------\n    layoutAsFlexbox           ? : boolean;\n    stackVertically           ? : boolean;\n    stackHorizontally         ? : boolean;\n    // Grid --------------------------------------------------------------------\n    layoutAsGrid              ? : boolean;\n    columns                   ? : string;\n    // Common ------------------------------------------------------------------\n    gap                       ? : SpacingTypes;\n    // Margin ------------------------------------------------------------------\n    margin                    ? : SpacingTypes;\n    horizontalMargin          ? : SpacingTypes;\n    verticalMargin            ? : SpacingTypes;\n    marginTop                 ? : SpacingTypes;\n    marginRight               ? : SpacingTypes;\n    marginBottom              ? : SpacingTypes;\n    marginLeft                ? : SpacingTypes;\n    // Padding -----------------------------------------------------------------\n    padding                   ? : SpacingTypes;\n    horizontalPadding         ? : SpacingTypes;\n    verticalPadding           ? : SpacingTypes;\n    paddingTop                ? : SpacingTypes;\n    paddingRight              ? : SpacingTypes;\n    paddingBottom             ? : SpacingTypes;\n    paddingLeft               ? : SpacingTypes;\n    horizontallyCentreThis    ? : boolean;\n    horizontallyCenterThis    ? : boolean;\n    verticallyCentreItems     ? : boolean;\n    verticallyCenterItems     ? : boolean;\n    pushItemsToEnds           ? : boolean;\n    isClickable               ? : boolean;\n    isFullWidth               ? : boolean;\n    isFullHeight              ? : boolean;\n    inheritFormSpacing        ? : boolean;\n    hideOnMobile              ? : boolean;\n    showOnlyOnMobile          ? : boolean;\n    hideOnTabletPortrait      ? : boolean;\n    showOnlyOnTabletPortrait  ? : boolean;\n    hideOnTabletLandscape     ? : boolean;\n    showOnlyOnTabletLandscape ? : boolean;\n    hideOnDesktop             ? : boolean;\n    showOnlyOnDesktop         ? : boolean;\n    weight                    ? : WeightTypes;\n    classNames                ? : string[];\n}\n\nexport interface CommonAndHTMLProps<T extends {}>\n    extends CommonProps, Omit<HTMLProps<T>, \"as\" | \"size\" | \"ref\" | \"shape\"> {}\n\n// Fictoan has two different types of event handlers, one for standard events and one for direct values\n// This generic event handler type is a union of the two\nexport type FlexibleEventHandler<T, V = any> =\n    | ((event : T) => void)\n    | ((value : V) => void);\n\nexport interface ElementProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, \"as\" | \"ref\" | \"shape\"> {\n    as        ? : ElementType;\n    className ? : string;\n    ariaLabel ? : string;\n    onChange  ? : FlexibleEventHandler<FormEvent<T>, any>;\n}\n"],"names":["BasicColours","FictoanColours","oklchColourDefinitions"],"mappings":";AAOO,MAAMA,IAAe,CAAE,eAAe,SAAS,OAAQ,GAIjDC,IAAiB,CAAE,GAAG,OAAO,KAAKC,CAAsB,GAAG,GAAGF,CAAa;"}

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

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAOpE,OAAO,gBAAgB,CAAC;AAIxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,CAAC;AACnD,MAAM,MAAM,aAAa,GAAG,qBAAqB,GAAG,WAAW,GAAG;IAC9D,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;AAKF,eAAO,MAAM,QAAQ;SAhBE,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;0CAoE7B,CAAC"}
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAGvC,OAAO,EAAE,WAAW,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAOpE,OAAO,gBAAgB,CAAC;AAIxB,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,MAAM,mBAAmB,GAAG,gBAAgB,CAAC;AACnD,MAAM,MAAM,aAAa,GAAG,qBAAqB,GAAG,WAAW,GAAG;IAC9D,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;AAKF,eAAO,MAAM,QAAQ;SAhBE,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;0CA4E7B,CAAC"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../../src/components/Form/Checkbox/Checkbox.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useMemo } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonProps, SpacingTypes } from \"../../Element/constants\";\nimport { Element } from \"$element\";\n\n// UTILS ===============================================================================================================\nimport { separateWrapperProps } from \"$utils/propSeparation\";\n\n// STYLES ==============================================================================================================\nimport \"./checkbox.css\";\n\n// OTHER ===============================================================================================================\nimport { FormItem, deriveAriaIds } from \"../FormItem/FormItem\";\nimport { InputLabelCustomProps } from \"../InputLabel/InputLabel\";\n\nexport type CheckboxElementType = HTMLInputElement;\nexport type CheckboxProps = InputLabelCustomProps & CommonProps & {\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// TODO: Fix required indicator that clashes with tick because both use the same `label::after` setup.\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const Checkbox = 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        } : CheckboxProps,\n        ref : React.Ref<CheckboxElementType>,\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 || `checkbox-${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<CheckboxElementType>\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-checkbox\n                    className={`size-${size}`}\n                />\n            </FormItem>\n        );\n    },\n);\nCheckbox.displayName = \"Checkbox\";\n"],"names":["Checkbox","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":";;;;;;AAmCO,MAAMA,IAAWC,EAAM;AAAA,EAC1B,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,EAAE,cAAAC,GAAc,YAAAC,MAAeC,EAAqBR,CAAK,GAEzDS,IAAUvB,EAAM,MAAA,GAChBwB,IAAUvB,KAAM,YAAYsB,EAAQ,QAAQ,MAAM,EAAE,CAAC,IACrD,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,iBAAa;AAAA,cACb,WAAW,QAAQZ,CAAI;AAAA,YAAA;AAAA,UAAA;AAAA,QAC3B;AAAA,MAAA;AAAA,IAAA;AAAA,EAGZ;AACJ;AACAb,EAAS,cAAc;"}

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

@@ -1 +1 @@
-{"version":3,"file":"CheckboxAndSwitchGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Checkbox/CheckboxAndSwitchGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,OAAO,iCAAiC,CAAC;AAKzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,UAAU,oBAAoB;IAC1B,EAAE,EAAW,MAAM,CAAC;IACpB,KAAK,EAAQ,MAAM,CAAC;IACpB,KAAK,EAAQ,MAAM,CAAC;IACpB,QAAS,CAAC,EAAG,OAAO,CAAC;CACxB;AAGD,UAAU,gBAAgB;IACtB,EAAc,CAAC,EAAG,MAAM,CAAC;IACzB,IAAI,EAAc,MAAM,CAAC;IACzB,OAAO,EAAW,oBAAoB,EAAE,CAAC;IACzC,KAAc,CAAC,EAAG,MAAM,EAAE,CAAC;IAC3B,YAAc,CAAC,EAAG,MAAM,EAAE,CAAC;IAC3B,QAAc,CAAC,EAAG,CAAC,MAAM,EAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,KAAc,CAAC,EAAG,YAAY,GAAG,UAAU,CAAC;IAC5C,aAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,aAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,IAAc,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACzD,OAAc,CAAC,EAAG,MAAM,CAAC;IACzB,UAAc,CAAC,EAAG,OAAO,CAAC;CAC7B;AAGD,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,gBAAgB,GAAG;IACrE,QAAU,CAAC,EAAG,MAAM,CAAC;IACrB,SAAU,CAAC,EAAG,MAAM,CAAC;IACrB,QAAU,CAAC,EAAG,OAAO,CAAC;IACtB,QAAU,CAAC,EAAG,OAAO,CAAC;CACzB,CAAC;AAGF,eAAO,MAAM,aAAa;eAPR,MAAM;gBACN,MAAM;eACN,OAAO;eACP,OAAO;wCAqHxB,CAAC;AAIF,eAAO,MAAM,WAAW;eA5HN,MAAM;gBACN,MAAM;eACN,OAAO;eACP,OAAO;wCA0OxB,CAAC"}
+{"version":3,"file":"CheckboxAndSwitchGroup.d.ts","sourceRoot":"","sources":["../../../../src/components/Form/Checkbox/CheckboxAndSwitchGroup.tsx"],"names":[],"mappings":"AACA,OAAO,KAAkB,MAAM,OAAO,CAAC;AAIvC,OAAO,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAGvD,OAAO,iCAAiC,CAAC;AAKzC,OAAO,EAAE,qBAAqB,EAAE,MAAM,0BAA0B,CAAC;AAIjE,UAAU,oBAAoB;IAC1B,EAAE,EAAW,MAAM,CAAC;IACpB,KAAK,EAAQ,MAAM,CAAC;IACpB,KAAK,EAAQ,MAAM,CAAC;IACpB,QAAS,CAAC,EAAG,OAAO,CAAC;CACxB;AAGD,UAAU,gBAAgB;IACtB,EAAc,CAAC,EAAG,MAAM,CAAC;IACzB,IAAI,EAAc,MAAM,CAAC;IACzB,OAAO,EAAW,oBAAoB,EAAE,CAAC;IACzC,KAAc,CAAC,EAAG,MAAM,EAAE,CAAC;IAC3B,YAAc,CAAC,EAAG,MAAM,EAAE,CAAC;IAC3B,QAAc,CAAC,EAAG,CAAC,MAAM,EAAG,MAAM,EAAE,KAAK,IAAI,CAAC;IAC9C,KAAc,CAAC,EAAG,YAAY,GAAG,UAAU,CAAC;IAC5C,aAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,aAAc,CAAC,EAAG,OAAO,CAAC;IAC1B,IAAc,CAAC,EAAG,OAAO,CAAC,YAAY,EAAE,MAAM,GAAG,MAAM,CAAC,CAAC;IACzD,OAAc,CAAC,EAAG,MAAM,CAAC;IACzB,UAAc,CAAC,EAAG,OAAO,CAAC;CAC7B;AAGD,MAAM,MAAM,eAAe,GAAG,qBAAqB,GAAG,gBAAgB,GAAG;IACrE,QAAU,CAAC,EAAG,MAAM,CAAC;IACrB,SAAU,CAAC,EAAG,MAAM,CAAC;IACrB,QAAU,CAAC,EAAG,OAAO,CAAC;IACtB,QAAU,CAAC,EAAG,OAAO,CAAC;CACzB,CAAC;AAGF,eAAO,MAAM,aAAa;eAPR,MAAM;gBACN,MAAM;eACN,OAAO;eACP,OAAO;wCA6HxB,CAAC;AAIF,eAAO,MAAM,WAAW;eApIN,MAAM;gBACN,MAAM;eACN,OAAO;eACP,OAAO;wCA0PxB,CAAC"}