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

package/dist/components/Divider/Divider.js

@@ -0,0 +1,29 @@
+"use client";
+import { jsx as l } from "react/jsx-runtime";
+import m from "react";
+/* empty css            */
+import { Element as s } from "../Element/Element.js";
+const p = m.forwardRef(
+  ({ kind: r, height: a, label: o, ...t }, i) => {
+    let e = [];
+    return r && e.push(r), /* @__PURE__ */ l(
+      s,
+      {
+        as: "hr",
+        "data-hrule": !0,
+        ref: i,
+        classNames: e,
+        role: "separator",
+        "aria-orientation": "horizontal",
+        "aria-label": o,
+        ...t,
+        style: a ? { height: a } : void 0
+      }
+    );
+  }
+);
+p.displayName = "Divider";
+export {
+  p as Divider
+};
+//# sourceMappingURL=Divider.js.map

package/dist/components/Divider/Divider.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Divider.js","sources":["../../../src/components/Divider/Divider.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./divider.css\";\n\n// prettier-ignore\nexport interface DividerCustomProps {\n    kind   ? : \"primary\" | \"secondary\" | \"tertiary\";\n    height ? : string;\n    label  ? : string;\n}\n\nexport type DividerElementType = HTMLHRElement;\nexport type DividerProps = Omit<CommonAndHTMLProps<DividerElementType>, keyof DividerCustomProps> & DividerCustomProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nexport const Divider = React.forwardRef(\n    (\n        {kind, height, label, ...props} : DividerProps, ref : React.Ref<DividerElementType>) => {\n        let classNames = [];\n\n        if (kind) {\n            classNames.push(kind);\n        }\n\n        return (\n            <Element<DividerElementType>\n                as=\"hr\"\n                data-hrule\n                ref={ref}\n                classNames={classNames}\n                role=\"separator\"\n                aria-orientation=\"horizontal\"\n                aria-label={label}\n                {...props}\n                style={height ? {height : height} : undefined}\n            />\n        );\n    },\n);\nDivider.displayName = \"Divider\";\n"],"names":["Divider","React","kind","height","label","props","ref","classNames","jsx","Element"],"mappings":";;;;AAqBO,MAAMA,IAAUC,EAAM;AAAA,EACzB,CACI,EAAC,MAAAC,GAAM,QAAAC,GAAQ,OAAAC,GAAO,GAAGC,EAAA,GAAuBC,MAAwC;AACxF,QAAIC,IAAa,CAAA;AAEjB,WAAIL,KACAK,EAAW,KAAKL,CAAI,GAIpB,gBAAAM;AAAA,MAACC;AAAA,MAAA;AAAA,QACG,IAAG;AAAA,QACH,cAAU;AAAA,QACV,KAAAH;AAAA,QACA,YAAAC;AAAA,QACA,MAAK;AAAA,QACL,oBAAiB;AAAA,QACjB,cAAYH;AAAA,QACX,GAAGC;AAAA,QACJ,OAAOF,IAAS,EAAC,QAAAA,MAAmB;AAAA,MAAA;AAAA,IAAA;AAAA,EAGhD;AACJ;AACAH,EAAQ,cAAc;"}

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;AAgB3C,eAAO,MAAM,OAAO,EA4Kf,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,154 @@
+"use client";
+import { jsx as ut } from "react/jsx-runtime";
+import Ct from "react";
+import { createClassName as Ot } from "../../utils/classNames.js";
+const Tt = /* @__PURE__ */ new Set([
+  "none",
+  "nano",
+  "micro",
+  "tiny",
+  "small",
+  "medium",
+  "large",
+  "huge"
+]), wt = (o) => Tt.has(o), kt = Ct.forwardRef(
+  ({
+    as: o = "div",
+    role: k,
+    ariaLabel: x,
+    tabIndex: z,
+    onKeyDown: N,
+    ...L
+  }, R) => {
+    const {
+      classNames: S = [],
+      bgColor: e,
+      bgColour: n,
+      bgOpacity: l,
+      borderColor: r,
+      borderColour: d,
+      borderOpacity: s,
+      className: v,
+      columns: a,
+      fillColor: g,
+      fillColour: p,
+      gap: B,
+      hideOnDesktop: P,
+      hideOnMobile: E,
+      hideOnTabletLandscape: F,
+      hideOnTabletPortrait: I,
+      horizontalMargin: M,
+      horizontalPadding: A,
+      horizontallyCenterThis: j,
+      horizontallyCentreThis: D,
+      inheritFormSpacing: G,
+      isClickable: H,
+      isFullHeight: K,
+      isFullWidth: V,
+      layoutAsFlexbox: W,
+      layoutAsGrid: _,
+      listVertically: q,
+      listHorizontally: J,
+      marginLeft: Q,
+      marginBottom: U,
+      margin: X,
+      marginRight: Y,
+      marginTop: Z,
+      opacity: m,
+      paddingBottom: tt,
+      paddingLeft: it,
+      padding: ot,
+      paddingRight: at,
+      paddingTop: et,
+      pushItemsToEnds: nt,
+      shadow: h,
+      shape: c,
+      showOnlyOnDesktop: lt,
+      showOnlyOnMobile: rt,
+      showOnlyOnTabletLandscape: dt,
+      showOnlyOnTabletPortrait: st,
+      size: y,
+      strokeColor: b,
+      strokeColour: $,
+      textColor: f,
+      textColour: u,
+      verticalMargin: gt,
+      verticalPadding: pt,
+      verticallyCenterItems: mt,
+      verticallyCentreItems: ht,
+      weight: C,
+      style: ct,
+      ...yt
+    } = L, O = [], T = {}, i = (t, bt, $t) => {
+      t && (wt(t) ? O.push(bt(t)) : $t.forEach((ft) => {
+        T[ft] = t;
+      }));
+    };
+    i(B, (t) => `gap-${t}`, ["gap"]), i(X, (t) => `margin-all-${t}`, ["margin"]), i(Z, (t) => `margin-top-${t}`, ["marginTop"]), i(Y, (t) => `margin-right-${t}`, ["marginRight"]), i(U, (t) => `margin-bottom-${t}`, ["marginBottom"]), i(Q, (t) => `margin-left-${t}`, ["marginLeft"]), i(M, (t) => `margin-right-${t} margin-left-${t}`, ["marginLeft", "marginRight"]), i(gt, (t) => `margin-top-${t} margin-bottom-${t}`, ["marginTop", "marginBottom"]), i(ot, (t) => `padding-all-${t}`, ["padding"]), i(et, (t) => `padding-top-${t}`, ["paddingTop"]), i(at, (t) => `padding-right-${t}`, ["paddingRight"]), i(tt, (t) => `padding-bottom-${t}`, ["paddingBottom"]), i(it, (t) => `padding-left-${t}`, ["paddingLeft"]), i(A, (t) => `padding-right-${t} padding-left-${t}`, ["paddingLeft", "paddingRight"]), i(pt, (t) => `padding-top-${t} padding-bottom-${t}`, ["paddingTop", "paddingBottom"]);
+    const w = {
+      ...ct,
+      ...l && { "--bg-opacity": Number(l) / 100 },
+      ...s && { "--border-opacity": Number(s) / 100 },
+      ...a && { gridTemplateColumns: `repeat(${a}, 1fr)` },
+      ...T
+    };
+    return /* @__PURE__ */ ut(
+      o,
+      {
+        ref: R,
+        role: k,
+        "aria-label": x,
+        tabIndex: z,
+        onKeyDown: N,
+        ...yt,
+        "data-form-spaced": G || void 0,
+        style: Object.keys(w).length > 0 ? w : void 0,
+        className: Ot(
+          [
+            v,
+            e && `bg-${e}`,
+            n && `bg-${n}`,
+            r && `border-${r}`,
+            d && `border-${d}`,
+            g && `fill-${g}`,
+            p && `fill-${p}`,
+            P && "hide-on-desktop",
+            E && "hide-on-mobile",
+            F && "hide-on-tablet-landscape",
+            I && "hide-on-tablet-portrait",
+            j && "horizontally-centre-this",
+            D && "horizontally-centre-this",
+            H && "is-clickable",
+            K && "full-height",
+            V && "full-width",
+            W && "layout-flexbox",
+            (_ || a) && "layout-grid",
+            q && "list-vertically",
+            J && "list-horizontally",
+            m && `opacity-${m}`,
+            nt && "push-to-ends",
+            h && `shadow-${h}`,
+            c && `shape-${c}`,
+            lt && "show-only-on-desktop",
+            rt && "show-only-on-mobile",
+            dt && "show-only-on-tablet-landscape",
+            st && "show-only-on-tablet-portrait",
+            y && `size-${y}`,
+            b && `stroke-${b}`,
+            $ && `stroke-${$}`,
+            f && `text-${f}`,
+            u && `text-${u}`,
+            mt && "vertically-centre-items",
+            ht && "vertically-centre-items",
+            C && `weight-${C}`
+          ].concat(O, S)
+        )
+      }
+    );
+  }
+);
+kt.displayName = "Element";
+export {
+  kt 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// Spacing props accept a scale token OR an arbitrary CSS length. Tokens map to a\n// utility class (stays in @layer fictoan, overridable); anything else is treated\n// as a raw length and applied via inline style.\nconst SPACING_TOKENS = new Set<string>([\n    \"none\", \"nano\", \"micro\", \"tiny\", \"small\", \"medium\", \"large\", \"huge\",\n]);\nconst isSpacingToken = (value: string): boolean => SPACING_TOKENS.has(value);\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            listVertically,\n            listHorizontally,\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        // Spacing props: a scale token emits a utility class; any other string is\n        // treated as a raw CSS length and applied via inline style.\n        const spacingClasses: string[] = [];\n        const spacingStyle: Record<string, string> = {};\n        const applySpacing = (\n            value      : string | undefined,\n            tokenClass : (token: string) => string,\n            cssProps   : string[],\n        ) => {\n            if (!value) return;\n            if (isSpacingToken(value)) {\n                spacingClasses.push(tokenClass(value));\n            } else {\n                cssProps.forEach((prop) => { spacingStyle[prop] = value; });\n            }\n        };\n\n        applySpacing(gap,               (t) => `gap-${t}`,                             [\"gap\"]);\n        applySpacing(margin,            (t) => `margin-all-${t}`,                      [\"margin\"]);\n        applySpacing(marginTop,         (t) => `margin-top-${t}`,                      [\"marginTop\"]);\n        applySpacing(marginRight,       (t) => `margin-right-${t}`,                    [\"marginRight\"]);\n        applySpacing(marginBottom,      (t) => `margin-bottom-${t}`,                   [\"marginBottom\"]);\n        applySpacing(marginLeft,        (t) => `margin-left-${t}`,                     [\"marginLeft\"]);\n        applySpacing(horizontalMargin,  (t) => `margin-right-${t} margin-left-${t}`,   [\"marginLeft\", \"marginRight\"]);\n        applySpacing(verticalMargin,    (t) => `margin-top-${t} margin-bottom-${t}`,   [\"marginTop\", \"marginBottom\"]);\n        applySpacing(padding,           (t) => `padding-all-${t}`,                     [\"padding\"]);\n        applySpacing(paddingTop,        (t) => `padding-top-${t}`,                     [\"paddingTop\"]);\n        applySpacing(paddingRight,      (t) => `padding-right-${t}`,                   [\"paddingRight\"]);\n        applySpacing(paddingBottom,     (t) => `padding-bottom-${t}`,                  [\"paddingBottom\"]);\n        applySpacing(paddingLeft,       (t) => `padding-left-${t}`,                    [\"paddingLeft\"]);\n        applySpacing(horizontalPadding, (t) => `padding-right-${t} padding-left-${t}`, [\"paddingLeft\", \"paddingRight\"]);\n        applySpacing(verticalPadding,   (t) => `padding-top-${t} padding-bottom-${t}`, [\"paddingTop\", \"paddingBottom\"]);\n\n        // Build style object: user style + opacity custom properties + arbitrary spacing\n        const computedStyle = {\n            ...style,\n            ...(bgOpacity && { \"--bg-opacity\": Number(bgOpacity) / 100 }),\n            ...(borderOpacity && { \"--border-opacity\": Number(borderOpacity) / 100 }),\n            ...(columns && { gridTemplateColumns: `repeat(${columns}, 1fr)` }),\n            ...spacingStyle,\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                        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 || columns) && \"layout-grid\",\n                        listVertically && \"list-vertically\",\n                        listHorizontally && \"list-horizontally\",\n                        opacity && `opacity-${opacity}`,\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                        verticallyCenterItems && \"vertically-centre-items\",\n                        verticallyCentreItems && \"vertically-centre-items\",\n                        weight && `weight-${weight}`,\n                    ].concat(spacingClasses, 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":["SPACING_TOKENS","isSpacingToken","value","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","listVertically","listHorizontally","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","spacingClasses","spacingStyle","applySpacing","tokenClass","cssProps","prop","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.d.ts

@@ -1,4 +1,4 @@
-import { ElementType, FormEvent, HTMLProps } from 'react';
+import { ElementType, HTMLProps } from 'react';
 import { OklchColourName } from '../../styles/colours';
 
 export declare const BasicColours: readonly ["transparent", "black", "white"];
@@ -10,6 +10,7 @@ type OpacityLevel = 0 | 5 | 10 | 20 | 30 | 40 | 50 | 60 | 70 | 80 | 90;
 type CustomColours = "hue" | "tint" | "shade" | "analogue" | "accent";
 export type EmphasisTypes = "primary" | "secondary" | "tertiary" | "custom";
 export type SpacingTypes = "none" | "nano" | "micro" | "tiny" | "small" | "medium" | "large" | "huge";
+export type SpacingOrLength = SpacingTypes | (string & {});
 export type ShadowTypes = "none" | "mild" | "hard" | "soft";
 export type ShapeTypes = "rounded" | "curved";
 export type OpacityTypes = "0" | "5" | "10" | "20" | "30" | "40" | "50" | "60" | "70" | "80" | "90";
@@ -33,25 +34,25 @@ export interface CommonProps {
     shape?: ShapeTypes;
     opacity?: OpacityTypes;
     layoutAsFlexbox?: boolean;
-    stackVertically?: boolean;
-    stackHorizontally?: boolean;
+    listVertically?: boolean;
+    listHorizontally?: boolean;
     layoutAsGrid?: boolean;
-    columns?: string;
-    gap?: SpacingTypes;
-    margin?: SpacingTypes;
-    horizontalMargin?: SpacingTypes;
-    verticalMargin?: SpacingTypes;
-    marginTop?: SpacingTypes;
-    marginRight?: SpacingTypes;
-    marginBottom?: SpacingTypes;
-    marginLeft?: SpacingTypes;
-    padding?: SpacingTypes;
-    horizontalPadding?: SpacingTypes;
-    verticalPadding?: SpacingTypes;
-    paddingTop?: SpacingTypes;
-    paddingRight?: SpacingTypes;
-    paddingBottom?: SpacingTypes;
-    paddingLeft?: SpacingTypes;
+    columns?: number;
+    gap?: SpacingOrLength;
+    margin?: SpacingOrLength;
+    horizontalMargin?: SpacingOrLength;
+    verticalMargin?: SpacingOrLength;
+    marginTop?: SpacingOrLength;
+    marginRight?: SpacingOrLength;
+    marginBottom?: SpacingOrLength;
+    marginLeft?: SpacingOrLength;
+    padding?: SpacingOrLength;
+    horizontalPadding?: SpacingOrLength;
+    verticalPadding?: SpacingOrLength;
+    paddingTop?: SpacingOrLength;
+    paddingRight?: SpacingOrLength;
+    paddingBottom?: SpacingOrLength;
+    paddingLeft?: SpacingOrLength;
     horizontallyCentreThis?: boolean;
     horizontallyCenterThis?: boolean;
     verticallyCentreItems?: boolean;
@@ -74,12 +75,11 @@ export interface CommonProps {
 }
 export interface CommonAndHTMLProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "size" | "ref" | "shape"> {
 }
-export type FlexibleEventHandler<T, V = any> = ((event: T) => void) | ((value: V) => void);
+export type FlexibleEventHandler<T, V = unknown> = ((event: T) => void) | ((value: V) => void);
 export interface ElementProps<T extends {}> extends CommonProps, Omit<HTMLProps<T>, "as" | "ref" | "shape"> {
     as?: ElementType;
     className?: string;
     ariaLabel?: string;
-    onChange?: FlexibleEventHandler<FormEvent<T>, any>;
 }
 export {};
 //# sourceMappingURL=constants.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Element/constants.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"constants.d.ts","sourceRoot":"","sources":["../../../src/components/Element/constants.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAG/C,OAAO,EAA0B,KAAK,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGpF,eAAO,MAAM,YAAY,4CAA+C,CAAC;AACzE,KAAK,gBAAgB,GAAG,OAAO,YAAY,CAAC,MAAM,CAAC,CAAC;AAGpD,eAAO,MAAM,cAAc,yDAAuE,CAAC;AAEnG,KAAK,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;AAClC,KAAK,UAAU,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAC7D,KAAK,YAAY,GAAG,CAAC,GAAG,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AACvE,KAAK,aAAa,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,CAAC;AAGtE,MAAM,MAAM,aAAa,GAAG,SAAS,GAAG,WAAW,GAAG,UAAU,GAAG,QAAQ,CAAC;AAC5E,MAAM,MAAM,YAAY,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,GAAG,OAAO,GAAG,MAAM,CAAC;AAItG,MAAM,MAAM,eAAe,GAAG,YAAY,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAC3D,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;AAC5D,MAAM,MAAM,UAAU,GAAG,SAAS,GAAG,QAAQ,CAAC;AAC9C,MAAM,MAAM,YAAY,GAAG,GAAG,GAAG,GAAG,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AACpG,MAAM,MAAM,WAAW,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,GAAG,KAAK,CAAC;AAChG,MAAM,MAAM,kBAAkB,GAAG,SAAS,GAAG,SAAS,GAAG,QAAQ,CAAC;AAElE,MAAM,MAAM,eAAe,GACrB,GAAG,eAAe,IAAI,SAAS,GAAG,UAAU,EAAE,GAC9C,GAAG,eAAe,IAAI,SAAS,GAAG,UAAU,WAAW,YAAY,EAAE,GACrE,GAAG,eAAe,WAAW,YAAY,EAAE,GAC3C,GAAG,gBAAgB,WAAW,YAAY,EAAE,GAC5C,eAAe,GACf,gBAAgB,GAChB,aAAa,GACb,EAAE,CAAC;AAET,MAAM,WAAW,WAAW;IACxB,OAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,QAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,SAA0B,CAAC,EAAG,YAAY,CAAC;IAC3C,SAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,UAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,WAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,YAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,aAA0B,CAAC,EAAG,YAAY,CAAC;IAC3C,SAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,UAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,WAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,YAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,MAA0B,CAAC,EAAG,WAAW,CAAC;IAC1C,KAA0B,CAAC,EAAG,UAAU,CAAC;IACzC,OAA0B,CAAC,EAAG,YAAY,CAAC;IAE3C,eAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,cAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,gBAA0B,CAAC,EAAG,OAAO,CAAC;IAEtC,YAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,OAA0B,CAAC,EAAG,MAAM,CAAC;IAErC,GAA0B,CAAC,EAAG,eAAe,CAAC;IAE9C,MAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,gBAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,cAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,SAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,WAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,YAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,UAA0B,CAAC,EAAG,eAAe,CAAC;IAE9C,OAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,iBAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,eAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,UAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,YAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,aAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,WAA0B,CAAC,EAAG,eAAe,CAAC;IAC9C,sBAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,sBAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,qBAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,qBAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,eAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,WAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,WAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,YAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,kBAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,YAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,gBAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,oBAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,wBAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,qBAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,yBAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,aAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,iBAA0B,CAAC,EAAG,OAAO,CAAC;IACtC,MAA0B,CAAC,EAAG,WAAW,CAAC;IAC1C,UAA0B,CAAC,EAAG,MAAM,EAAE,CAAC;CAC1C;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,EAAE,CAC5C,SAAQ,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,KAAK,GAAG,OAAO,CAAC;CAAG;AAI/E,MAAM,MAAM,oBAAoB,CAAC,CAAC,EAAE,CAAC,GAAG,OAAO,IACzC,CAAC,CAAC,KAAK,EAAG,CAAC,KAAK,IAAI,CAAC,GACrB,CAAC,CAAC,KAAK,EAAG,CAAC,KAAK,IAAI,CAAC,CAAC;AAE5B,MAAM,WAAW,YAAY,CAAC,CAAC,SAAS,EAAE,CAAE,SAAQ,WAAW,EAAE,IAAI,CAAC,SAAS,CAAC,CAAC,CAAC,EAAE,IAAI,GAAG,KAAK,GAAG,OAAO,CAAC;IACvG,EAAU,CAAC,EAAG,WAAW,CAAC;IAC1B,SAAU,CAAC,EAAG,MAAM,CAAC;IACrB,SAAU,CAAC,EAAG,MAAM,CAAC;CACxB"}

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, 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\";\n// A spacing prop accepts a scale token (preferred — emits a utility class) OR any CSS\n// length string (e.g. \"4px\", \"20vw\", \"calc(100% - 8px)\") which is applied via inline style.\n// The `& {}` keeps autocomplete suggesting the tokens while still allowing any string.\nexport type SpacingOrLength = SpacingTypes | (string & {});\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    listVertically            ? : boolean;\n    listHorizontally          ? : boolean;\n    // Grid --------------------------------------------------------------------\n    layoutAsGrid              ? : boolean;\n    columns                   ? : number;\n    // Common ------------------------------------------------------------------\n    gap                       ? : SpacingOrLength;\n    // Margin ------------------------------------------------------------------\n    margin                    ? : SpacingOrLength;\n    horizontalMargin          ? : SpacingOrLength;\n    verticalMargin            ? : SpacingOrLength;\n    marginTop                 ? : SpacingOrLength;\n    marginRight               ? : SpacingOrLength;\n    marginBottom              ? : SpacingOrLength;\n    marginLeft                ? : SpacingOrLength;\n    // Padding -----------------------------------------------------------------\n    padding                   ? : SpacingOrLength;\n    horizontalPadding         ? : SpacingOrLength;\n    verticalPadding           ? : SpacingOrLength;\n    paddingTop                ? : SpacingOrLength;\n    paddingRight              ? : SpacingOrLength;\n    paddingBottom             ? : SpacingOrLength;\n    paddingLeft               ? : SpacingOrLength;\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 = unknown> =\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}\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