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

package/dist/components/Tabs/Tabs.js

@@ -1,57 +1,59 @@
 "use client";
-import { jsxs as u, jsx as r } from "react/jsx-runtime";
-import d, { useRef as R, useCallback as h, useEffect as T } from "react";
-import { Nav as I, Div as S } from "../Element/Tags.js";
+import { jsxs as h, jsx as a } from "react/jsx-runtime";
+import y, { useRef as g, useCallback as p, useEffect as x } from "react";
+import { Nav as S, Div as v } from "../Element/Tags.js";
 /* empty css         */
-import { Divider as v } from "../Divider/Divider.js";
-import { Text as B } from "../Typography/Text.js";
-import { Element as g } from "../Element/Element.js";
-const C = d.forwardRef(
-  ({ tabs: l, additionalNavContentWrapper: p, defaultActiveTab: x, align: E = "left", isFullWidth: $, ...w }, N) => {
-    const y = l.findIndex((e) => e.key === x), a = y > -1 ? y : 0, [t, o] = d.useState(
-      l.length > 0 ? l[a] : void 0
-    ), [A, k] = d.useState(!1), f = R([]), s = h((e) => {
-      (t == null ? void 0 : t.key) !== e.key && (k(!0), setTimeout(() => {
-        o(e), k(!1);
+import { Divider as B } from "../Divider/Divider.js";
+import { Text as C } from "../Typography/Text.js";
+import { Element as T } from "../Element/Element.js";
+const j = y.forwardRef(
+  ({ tabs: n, additionalNavContentWrapper: E, defaultActiveTab: $, align: w = "left", isFullWidth: N, ...R }, A) => {
+    const c = n.findIndex((e) => e.key === $), o = c > -1 ? c : 0, [t, s] = y.useState(
+      n.length > 0 ? n[o] : void 0
+    ), [D, k] = y.useState(!1), u = g([]), i = g(null), d = p((e) => {
+      (t == null ? void 0 : t.key) !== e.key && (k(!0), i.current !== null && clearTimeout(i.current), i.current = setTimeout(() => {
+        s(e), k(!1), i.current = null;
       }, 150));
     }, [t == null ? void 0 : t.key]);
-    T(() => {
-      l.length > 0 ? l.find((i) => i.key === (t == null ? void 0 : t.key)) || o(l[a]) : o(void 0);
-    }, [l, a, t == null ? void 0 : t.key]);
-    const D = h((e, i) => {
+    x(() => () => {
+      i.current !== null && clearTimeout(i.current);
+    }, []), x(() => {
+      n.length > 0 ? n.find((r) => r.key === (t == null ? void 0 : t.key)) || s(n[o]) : s(void 0);
+    }, [n, o, t == null ? void 0 : t.key]);
+    const I = p((e, r) => {
       var m;
-      let n = i;
+      let l = r;
       if (e.key === "ArrowRight")
-        n = (i + 1) % l.length;
+        l = (r + 1) % n.length;
       else if (e.key === "ArrowLeft")
-        n = (i - 1 + l.length) % l.length;
+        l = (r - 1 + n.length) % n.length;
       else if (e.key === "Home")
-        n = 0;
+        l = 0;
       else if (e.key === "End")
-        n = l.length - 1;
+        l = n.length - 1;
       else
         return;
       e.preventDefault();
-      const c = l[n];
-      c && (s(c), (m = f.current[n]) == null || m.focus());
-    }, [l, s]);
-    return t ? /* @__PURE__ */ u(
-      g,
+      const f = n[l];
+      f && (d(f), (m = u.current[l]) == null || m.focus());
+    }, [n, d]);
+    return t ? /* @__PURE__ */ h(
+      T,
       {
         as: "div",
         "data-tabs": !0,
-        ref: N,
-        "data-align": E,
-        "data-full-width": $,
-        ...w,
+        ref: A,
+        "data-align": w,
+        "data-full-width": N,
+        ...R,
         children: [
-          /* @__PURE__ */ r(I, { "data-tabs-nav": !0, role: "tablist", "aria-label": "Tab Navigation", children: /* @__PURE__ */ u("ul", { className: "tab-labels-list", children: [
-            l.map((e, i) => /* @__PURE__ */ r("li", { children: /* @__PURE__ */ r(
-              g,
+          /* @__PURE__ */ a(S, { "data-tabs-nav": !0, role: "tablist", "aria-label": "Tab Navigation", children: /* @__PURE__ */ h("ul", { className: "tab-labels-list", role: "none", children: [
+            n.map((e, r) => /* @__PURE__ */ a("li", { role: "none", children: /* @__PURE__ */ a(
+              T,
               {
                 as: "button",
-                ref: (n) => {
-                  f.current[i] = n;
+                ref: (l) => {
+                  u.current[r] = l;
                 },
                 id: `tab-${e.key}`,
                 role: "tab",
@@ -61,12 +63,12 @@ const C = d.forwardRef(
                 "data-tab-label": !0,
                 "data-active": t.key === e.key,
                 "data-alert": e.hasAlert,
-                onClick: () => s(e),
-                onKeyDown: (n) => D(n, i),
+                onClick: () => d(e),
+                onKeyDown: (l) => I(l, r),
                 className: `tab-button ${t.key === e.key ? "is-active" : ""}`,
                 marginBottom: "nano",
-                children: /* @__PURE__ */ r(
-                  B,
+                children: /* @__PURE__ */ a(
+                  C,
                   {
                     className: `tab-label ${t.key === e.key ? "is-active" : ""} ${e.hasAlert ? "has-alert" : ""}`,
                     children: e.label
@@ -74,11 +76,11 @@ const C = d.forwardRef(
                 )
               }
             ) }, e.key)),
-            p
+            E
           ] }) }),
-          /* @__PURE__ */ r(v, { kind: "tertiary", marginTop: "none", marginBottom: "micro" }),
-          l.map((e) => /* @__PURE__ */ r(
-            S,
+          /* @__PURE__ */ a(B, { kind: "tertiary", marginTop: "none", marginBottom: "micro" }),
+          n.map((e) => /* @__PURE__ */ a(
+            v,
             {
               id: `tab-panel-${e.key}`,
               role: "tabpanel",
@@ -86,7 +88,7 @@ const C = d.forwardRef(
               tabIndex: t.key === e.key ? 0 : -1,
               "data-tab-content": !0,
               "data-active": t.key === e.key,
-              "data-exiting": t.key === e.key && A,
+              "data-exiting": t.key === e.key && D,
               hidden: t.key !== e.key,
               children: e.content
             },
@@ -97,8 +99,8 @@ const C = d.forwardRef(
     ) : null;
   }
 );
-C.displayName = "Tabs";
+j.displayName = "Tabs";
 export {
-  C as Tabs
+  j as Tabs
 };
 //# sourceMappingURL=Tabs.js.map

package/dist/components/Tabs/Tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useEffect, useCallback, useRef } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { Div, Nav } from \"../Element/Tags\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./tabs.css\";\n\n// OTHER ===============================================================================================================\nimport { Divider } from \"../Divider/Divider\";\nimport { Text } from \"../Typography/Text\";\n\ninterface TabType {\n        key        : string;\n        label      : React.ReactNode;\n        content    : React.ReactNode;\n        hasAlert ? : boolean;\n}\n\n// prettier-ignore\nexport interface TabsCustomProps {\n        tabs                          : TabType[];\n        additionalNavContentWrapper ? : React.ReactNode;\n        defaultActiveTab            ? : React.ReactNode;\n        align                       ? : \"left\" | \"centre\" | \"center\" | \"right\";\n        isFullWidth                 ? : boolean;\n}\n\nexport type TabsElementType = HTMLDivElement;\nexport type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;\n\nexport const Tabs = React.forwardRef(\n    (\n        {tabs, additionalNavContentWrapper, defaultActiveTab, align = \"left\", isFullWidth, ...props} : TabsProps,\n        ref : React.Ref<TabsElementType>) => {\n        const index = tabs.findIndex((tab) => tab.key === defaultActiveTab);\n        const defaultTabIndex = index > -1 ? index : 0;\n        const [ activeTab, setActiveTab ] = React.useState<TabType | undefined>(\n            tabs.length > 0 ? tabs[defaultTabIndex] : undefined,\n        );\n        const [ isExiting, setIsExiting ] = React.useState<boolean>(false);\n\n        // Refs for keyboard navigation to focus the tab buttons\n        const tabButtonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n        // V2's performant animation logic\n        const handleTabChange = useCallback((tab : TabType) => {\n            if (activeTab?.key !== tab.key) {\n                setIsExiting(true);\n                setTimeout(() => {\n                    setActiveTab(tab);\n                    setIsExiting(false);\n                }, 150); // Animation duration\n            }\n        }, [ activeTab?.key ]);\n\n        useEffect(() => {\n            if (tabs.length > 0) {\n                // If the current active tab still exists in the new tabs array, keep it.\n                // This preserves the active state if the content of a tab changes.\n                const currentTabStillExists = tabs.find(tab => tab.key === activeTab?.key);\n                if (!currentTabStillExists) {\n                    // Otherwise, default to the designated default tab or the first one.\n                    setActiveTab(tabs[defaultTabIndex]);\n                }\n            } else {\n                setActiveTab(undefined);\n            }\n        }, [ tabs, defaultTabIndex, activeTab?.key ]);\n\n\n        const handleKeyDown = useCallback((event : React.KeyboardEvent, currentIndex : number) => {\n            let nextIndex = currentIndex;\n\n            if (event.key === \"ArrowRight\") {\n                nextIndex = (currentIndex + 1) % tabs.length;\n            } else if (event.key === \"ArrowLeft\") {\n                nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n            } else if (event.key === \"Home\") {\n                nextIndex = 0;\n            } else if (event.key === \"End\") {\n                nextIndex = tabs.length - 1;\n            } else {\n                // Exit if it's not a navigation key\n                return;\n            }\n\n            event.preventDefault();\n            const nextTab = tabs[nextIndex];\n            if (nextTab) {\n                handleTabChange(nextTab);\n                tabButtonRefs.current[nextIndex]?.focus();\n            }\n\n        }, [ tabs, handleTabChange ]);\n\n        if (!activeTab) {\n            return null; // Render nothing if there are no tabs or no active tab\n        }\n\n        return (\n            <Element<TabsElementType>\n                as=\"div\"\n                data-tabs\n                ref={ref}\n                data-align={align}\n                data-full-width={isFullWidth}\n                {...props}\n            >\n                <Nav data-tabs-nav role=\"tablist\" aria-label=\"Tab Navigation\">\n                    <ul className=\"tab-labels-list\">\n                        {tabs.map((tab, i) => (\n                            <li key={tab.key}>\n                                <Element<HTMLButtonElement>\n                                    as=\"button\"\n                                    ref={(el) => { tabButtonRefs.current[i] = el; }}\n                                    id={`tab-${tab.key}`}\n                                    role=\"tab\"\n                                    aria-selected={activeTab.key === tab.key}\n                                    aria-controls={`tab-panel-${tab.key}`}\n                                    tabIndex={activeTab.key === tab.key ? 0 : -1} // Roaming tabindex\n                                    data-tab-label\n                                    data-active={activeTab.key === tab.key}\n                                    data-alert={tab.hasAlert}\n                                    onClick={() => handleTabChange(tab)}\n                                    onKeyDown={(e) => handleKeyDown(e, i)}\n                                    className={`tab-button ${activeTab.key === tab.key ? \"is-active\" : \"\"}`}\n                                    marginBottom=\"nano\"\n                                >\n                                    <Text\n                                        className={`tab-label ${activeTab.key === tab.key ? \"is-active\" : \"\"} ${tab.hasAlert ? \"has-alert\" : \"\"}`}\n                                    >\n                                        {tab.label}\n                                    </Text>\n                                </Element>\n                            </li>\n                        ))}\n                        {additionalNavContentWrapper}\n                    </ul>\n                </Nav>\n\n                <Divider kind=\"tertiary\" marginTop=\"none\" marginBottom=\"micro\" />\n\n                {tabs.map((tab) => (\n                    <Div\n                        key={tab.key}\n                        id={`tab-panel-${tab.key}`}\n                        role=\"tabpanel\"\n                        aria-labelledby={`tab-${tab.key}`}\n                        tabIndex={activeTab.key === tab.key ? 0 : -1}\n                        data-tab-content\n                        data-active={activeTab.key === tab.key}\n                        data-exiting={activeTab.key === tab.key && isExiting}\n                        hidden={activeTab.key !== tab.key}\n                    >\n                        {tab.content}\n                    </Div>\n                ))}\n            </Element>\n        );\n    },\n);\nTabs.displayName = \"Tabs\";"],"names":["Tabs","React","tabs","additionalNavContentWrapper","defaultActiveTab","align","isFullWidth","props","ref","index","tab","defaultTabIndex","activeTab","setActiveTab","isExiting","setIsExiting","tabButtonRefs","useRef","handleTabChange","useCallback","useEffect","handleKeyDown","event","currentIndex","nextIndex","nextTab","_a","jsxs","Element","jsx","Nav","el","e","Text","Divider","Div"],"mappings":"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"}
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/Tabs/Tabs.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { useEffect, useCallback, useRef } from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps } from \"../Element/constants\";\nimport { Div, Nav } from \"../Element/Tags\";\nimport { Element } from \"$element\";\n\n// STYLES ==============================================================================================================\nimport \"./tabs.css\";\n\n// OTHER ===============================================================================================================\nimport { Divider } from \"../Divider/Divider\";\nimport { Text } from \"../Typography/Text\";\n\ninterface TabType {\n        key        : string;\n        label      : React.ReactNode;\n        content    : React.ReactNode;\n        hasAlert ? : boolean;\n}\n\n// prettier-ignore\nexport interface TabsCustomProps {\n        tabs                          : TabType[];\n        additionalNavContentWrapper ? : React.ReactNode;\n        defaultActiveTab            ? : React.ReactNode;\n        align                       ? : \"left\" | \"centre\" | \"center\" | \"right\";\n        isFullWidth                 ? : boolean;\n}\n\nexport type TabsElementType = HTMLDivElement;\nexport type TabsProps = Omit<CommonAndHTMLProps<TabsElementType>, keyof TabsCustomProps> & TabsCustomProps;\n\nexport const Tabs = React.forwardRef(\n    (\n        {tabs, additionalNavContentWrapper, defaultActiveTab, align = \"left\", isFullWidth, ...props} : TabsProps,\n        ref : React.Ref<TabsElementType>) => {\n        const index = tabs.findIndex((tab) => tab.key === defaultActiveTab);\n        const defaultTabIndex = index > -1 ? index : 0;\n        const [ activeTab, setActiveTab ] = React.useState<TabType | undefined>(\n            tabs.length > 0 ? tabs[defaultTabIndex] : undefined,\n        );\n        const [ isExiting, setIsExiting ] = React.useState<boolean>(false);\n\n        // Refs for keyboard navigation to focus the tab buttons\n        const tabButtonRefs = useRef<(HTMLButtonElement | null)[]>([]);\n\n        // Holds the pending exit-animation timer so rapid switching / unmount\n        // mid-transition can clear it instead of committing a stale tab.\n        const exitTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n        // V2's performant animation logic\n        const handleTabChange = useCallback((tab : TabType) => {\n            if (activeTab?.key !== tab.key) {\n                setIsExiting(true);\n                // Cancel any in-flight transition before queuing a new one.\n                if (exitTimerRef.current !== null) {\n                    clearTimeout(exitTimerRef.current);\n                }\n                exitTimerRef.current = setTimeout(() => {\n                    setActiveTab(tab);\n                    setIsExiting(false);\n                    exitTimerRef.current = null;\n                }, 150); // Animation duration\n            }\n        }, [ activeTab?.key ]);\n\n        // Clear any pending exit-animation timer on unmount.\n        useEffect(() => {\n            return () => {\n                if (exitTimerRef.current !== null) {\n                    clearTimeout(exitTimerRef.current);\n                }\n            };\n        }, []);\n\n        useEffect(() => {\n            if (tabs.length > 0) {\n                // If the current active tab still exists in the new tabs array, keep it.\n                // This preserves the active state if the content of a tab changes.\n                const currentTabStillExists = tabs.find(tab => tab.key === activeTab?.key);\n                if (!currentTabStillExists) {\n                    // Otherwise, default to the designated default tab or the first one.\n                    setActiveTab(tabs[defaultTabIndex]);\n                }\n            } else {\n                setActiveTab(undefined);\n            }\n        }, [ tabs, defaultTabIndex, activeTab?.key ]);\n\n\n        const handleKeyDown = useCallback((event : React.KeyboardEvent, currentIndex : number) => {\n            let nextIndex = currentIndex;\n\n            if (event.key === \"ArrowRight\") {\n                nextIndex = (currentIndex + 1) % tabs.length;\n            } else if (event.key === \"ArrowLeft\") {\n                nextIndex = (currentIndex - 1 + tabs.length) % tabs.length;\n            } else if (event.key === \"Home\") {\n                nextIndex = 0;\n            } else if (event.key === \"End\") {\n                nextIndex = tabs.length - 1;\n            } else {\n                // Exit if it's not a navigation key\n                return;\n            }\n\n            event.preventDefault();\n            const nextTab = tabs[nextIndex];\n            if (nextTab) {\n                handleTabChange(nextTab);\n                tabButtonRefs.current[nextIndex]?.focus();\n            }\n\n        }, [ tabs, handleTabChange ]);\n\n        if (!activeTab) {\n            return null; // Render nothing if there are no tabs or no active tab\n        }\n\n        return (\n            <Element<TabsElementType>\n                as=\"div\"\n                data-tabs\n                ref={ref}\n                data-align={align}\n                data-full-width={isFullWidth}\n                {...props}\n            >\n                <Nav data-tabs-nav role=\"tablist\" aria-label=\"Tab Navigation\">\n                    {/* role=\"none\" on the list + items removes their list semantics from the\n                        a11y tree so the role=\"tab\" buttons become the tablist's owned children\n                        (otherwise axe flags aria-required-children / aria-required-parent). */}\n                    <ul className=\"tab-labels-list\" role=\"none\">\n                        {tabs.map((tab, i) => (\n                            <li key={tab.key} role=\"none\">\n                                <Element<HTMLButtonElement>\n                                    as=\"button\"\n                                    ref={(el) => { tabButtonRefs.current[i] = el; }}\n                                    id={`tab-${tab.key}`}\n                                    role=\"tab\"\n                                    aria-selected={activeTab.key === tab.key}\n                                    aria-controls={`tab-panel-${tab.key}`}\n                                    tabIndex={activeTab.key === tab.key ? 0 : -1} // Roaming tabindex\n                                    data-tab-label\n                                    data-active={activeTab.key === tab.key}\n                                    data-alert={tab.hasAlert}\n                                    onClick={() => handleTabChange(tab)}\n                                    onKeyDown={(e) => handleKeyDown(e, i)}\n                                    className={`tab-button ${activeTab.key === tab.key ? \"is-active\" : \"\"}`}\n                                    marginBottom=\"nano\"\n                                >\n                                    <Text\n                                        className={`tab-label ${activeTab.key === tab.key ? \"is-active\" : \"\"} ${tab.hasAlert ? \"has-alert\" : \"\"}`}\n                                    >\n                                        {tab.label}\n                                    </Text>\n                                </Element>\n                            </li>\n                        ))}\n                        {additionalNavContentWrapper}\n                    </ul>\n                </Nav>\n\n                <Divider kind=\"tertiary\" marginTop=\"none\" marginBottom=\"micro\" />\n\n                {tabs.map((tab) => (\n                    <Div\n                        key={tab.key}\n                        id={`tab-panel-${tab.key}`}\n                        role=\"tabpanel\"\n                        aria-labelledby={`tab-${tab.key}`}\n                        tabIndex={activeTab.key === tab.key ? 0 : -1}\n                        data-tab-content\n                        data-active={activeTab.key === tab.key}\n                        data-exiting={activeTab.key === tab.key && isExiting}\n                        hidden={activeTab.key !== tab.key}\n                    >\n                        {tab.content}\n                    </Div>\n                ))}\n            </Element>\n        );\n    },\n);\nTabs.displayName = \"Tabs\";"],"names":["Tabs","React","tabs","additionalNavContentWrapper","defaultActiveTab","align","isFullWidth","props","ref","index","tab","defaultTabIndex","activeTab","setActiveTab","isExiting","setIsExiting","tabButtonRefs","useRef","exitTimerRef","handleTabChange","useCallback","useEffect","handleKeyDown","event","currentIndex","nextIndex","nextTab","_a","jsxs","Element","jsx","Nav","i","el","e","Text","Divider","Div"],"mappings":"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"}

package/dist/components/Toast/ToastsProvider/ToastsProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ToastsProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/ToastsProvider/ToastsProvider.tsx"],"names":[],"mappings":"AACA,OAAc,EAAoD,SAAS,EAAE,MAAM,OAAO,CAAC;AAc3F,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAK,SAAS,CAAC;IACvB,MAAS,CAAC,EAAG,KAAK,GAAG,QAAQ,CAAC;CACjC;AAGD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAUzE,eAAO,MAAM,cAAc;4BAGxB,mBAAmB;;CAqCrB,CAAC;AAIF,eAAO,MAAM,SAAS,QAAO,aAQ5B,CAAC"}
+{"version":3,"file":"ToastsProvider.d.ts","sourceRoot":"","sources":["../../../../src/components/Toast/ToastsProvider/ToastsProvider.tsx"],"names":[],"mappings":"AACA,OAAc,EAA6D,SAAS,EAAE,MAAM,OAAO,CAAC;AAcpG,MAAM,WAAW,mBAAmB;IAChC,QAAQ,EAAK,SAAS,CAAC;IACvB,MAAS,CAAC,EAAG,KAAK,GAAG,QAAQ,CAAC;CACjC;AAGD,MAAM,MAAM,aAAa,GAAG,CAAC,OAAO,EAAE,MAAM,EAAE,QAAQ,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;AAUzE,eAAO,MAAM,cAAc;4BAGxB,mBAAmB;;CAqCrB,CAAC;AAIF,eAAO,MAAM,SAAS,QAAO,aAQ5B,CAAC"}

package/dist/components/Toast/ToastsProvider/ToastsProvider.js

@@ -1,45 +1,45 @@
 "use client";
-import { jsxs as p, jsx as a } from "react/jsx-runtime";
-import { useState as T, useCallback as n, createContext as x, useContext as f } from "react";
-import { ToastsWrapper as h } from "../ToastsWrapper/ToastsWrapper.js";
-import { ToastItem as v } from "../ToastItem/ToastItem.js";
-const i = x(null), C = ({
-  children: r,
+import { jsxs as p, jsx as n } from "react/jsx-runtime";
+import { useState as T, useCallback as i, createContext as x, useMemo as f, useContext as h } from "react";
+import { ToastsWrapper as v } from "../ToastsWrapper/ToastsWrapper.js";
+import { ToastItem as C } from "../ToastItem/ToastItem.js";
+const m = x(null), w = ({
+  children: e,
   anchor: c = "top"
 }) => {
-  const [m, e] = T([]), u = n((t) => {
-    e((o) => o.filter((s) => s.id !== t));
-  }, []), l = n((t, o = 4) => {
+  const [u, r] = T([]), l = i((t) => {
+    r((o) => o.filter((s) => s.id !== t));
+  }, []), a = i((t, o = 4) => {
     const s = `toast-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;
-    e((d) => [...d, {
+    r((d) => [...d, {
       id: s,
       message: t,
       duration: o
     }]);
   }, []);
-  return /* @__PURE__ */ p(i.Provider, { value: { toast: l }, children: [
-    r,
-    /* @__PURE__ */ a(h, { anchor: c, children: m.map(({ id: t, message: o, duration: s }) => /* @__PURE__ */ a(
-      v,
+  return /* @__PURE__ */ p(m.Provider, { value: f(() => ({ toast: a }), [a]), children: [
+    e,
+    /* @__PURE__ */ n(v, { anchor: c, children: u.map(({ id: t, message: o, duration: s }) => /* @__PURE__ */ n(
+      C,
       {
         id: t,
         duration: s,
-        onClose: () => u(t),
+        onClose: () => l(t),
         children: o
       },
       t
     )) })
   ] });
 };
-C.displayName = "ToastsProvider";
-const j = () => {
-  const r = f(i);
-  if (!r)
+w.displayName = "ToastsProvider";
+const M = () => {
+  const e = h(m);
+  if (!e)
     throw new Error("useToasts must be used within a ToastsProvider");
-  return r.toast;
+  return e.toast;
 };
 export {
-  C as ToastsProvider,
-  j as useToasts
+  w as ToastsProvider,
+  M as useToasts
 };
 //# sourceMappingURL=ToastsProvider.js.map

package/dist/components/Toast/ToastsProvider/ToastsProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastsProvider.js","sources":["../../../../src/components/Toast/ToastsProvider/ToastsProvider.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { createContext, useContext, useState, useCallback, ReactNode } from \"react\";\n\n// INTERNAL ============================================================================================================\nimport { ToastsWrapper } from \"../ToastsWrapper/ToastsWrapper\";\nimport { ToastItem } from \"../ToastItem/ToastItem\";\n\n// TYPES ===============================================================================================================\ninterface InternalToast {\n    id       : string;\n    message  : string;\n    duration : number;\n}\n\n// prettier-ignore\nexport interface ToastsProviderProps {\n    children   : ReactNode;\n    anchor   ? : \"top\" | \"bottom\";\n}\n\n// TOAST FUNCTION TYPE =================================================================================================\nexport type ToastFunction = (message: string, duration?: number) => void;\n\ninterface ToastsContextValue {\n    toast: ToastFunction;\n}\n\n// CONTEXT =============================================================================================================\nconst ToastsContext = createContext<ToastsContextValue | null>(null);\n\n// PROVIDER ============================================================================================================\nexport const ToastsProvider = ({\n    children,\n    anchor = \"top\",\n}: ToastsProviderProps) => {\n    const [toasts, setToasts] = useState<InternalToast[]>([]);\n\n    // Remove a toast by ID\n    const removeToast = useCallback((id: string) => {\n        setToasts(prev => prev.filter(t => t.id !== id));\n    }, []);\n\n    // Main toast function\n    const toast: ToastFunction = useCallback((message: string, duration: number = 4) => {\n        const id = `toast-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n\n        setToasts(prev => [...prev, {\n            id,\n            message,\n            duration,\n        }]);\n    }, []);\n\n    return (\n        <ToastsContext.Provider value={{ toast }}>\n            {children}\n\n            <ToastsWrapper anchor={anchor}>\n                {toasts.map(({ id, message, duration }) => (\n                    <ToastItem\n                        key={id}\n                        id={id}\n                        duration={duration}\n                        onClose={() => removeToast(id)}\n                    >\n                        {message}\n                    </ToastItem>\n                ))}\n            </ToastsWrapper>\n        </ToastsContext.Provider>\n    );\n};\nToastsProvider.displayName = \"ToastsProvider\";\n\n// HOOK ================================================================================================================\nexport const useToasts = (): ToastFunction => {\n    const context = useContext(ToastsContext);\n\n    if (!context) {\n        throw new Error(\"useToasts must be used within a ToastsProvider\");\n    }\n\n    return context.toast;\n};\n"],"names":["ToastsContext","createContext","ToastsProvider","children","anchor","toasts","setToasts","useState","removeToast","useCallback","id","prev","t","toast","message","duration","jsx","ToastsWrapper","ToastItem","useToasts","context","useContext"],"mappings":";;;;AA4BA,MAAMA,IAAgBC,EAAyC,IAAI,GAGtDC,IAAiB,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,QAAAC,IAAS;AACb,MAA2B;AACvB,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAA0B,CAAA,CAAE,GAGlDC,IAAcC,EAAY,CAACC,MAAe;AAC5C,IAAAJ,EAAU,OAAQK,EAAK,OAAO,OAAKC,EAAE,OAAOF,CAAE,CAAC;AAAA,EACnD,GAAG,CAAA,CAAE,GAGCG,IAAuBJ,EAAY,CAACK,GAAiBC,IAAmB,MAAM;AAChF,UAAML,IAAK,SAAS,KAAK,IAAA,CAAK,IAAI,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC,CAAC;AAE5E,IAAAJ,EAAU,CAAAK,MAAQ,CAAC,GAAGA,GAAM;AAAA,MACxB,IAAAD;AAAA,MACA,SAAAI;AAAA,MACA,UAAAC;AAAA,IAAA,CACH,CAAC;AAAA,EACN,GAAG,CAAA,CAAE;AAEL,2BACKf,EAAc,UAAd,EAAuB,OAAO,EAAE,OAAAa,KAC5B,UAAA;AAAA,IAAAV;AAAA,IAED,gBAAAa,EAACC,GAAA,EAAc,QAAAb,GACV,UAAAC,EAAO,IAAI,CAAC,EAAE,IAAAK,GAAI,SAAAI,GAAS,UAAAC,EAAA,MACxB,gBAAAC;AAAA,MAACE;AAAA,MAAA;AAAA,QAEG,IAAAR;AAAA,QACA,UAAAK;AAAA,QACA,SAAS,MAAMP,EAAYE,CAAE;AAAA,QAE5B,UAAAI;AAAA,MAAA;AAAA,MALIJ;AAAA,IAAA,CAOZ,EAAA,CACL;AAAA,EAAA,GACJ;AAER;AACAR,EAAe,cAAc;AAGtB,MAAMiB,IAAY,MAAqB;AAC1C,QAAMC,IAAUC,EAAWrB,CAAa;AAExC,MAAI,CAACoB;AACD,UAAM,IAAI,MAAM,gDAAgD;AAGpE,SAAOA,EAAQ;AACnB;"}
+{"version":3,"file":"ToastsProvider.js","sources":["../../../../src/components/Toast/ToastsProvider/ToastsProvider.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React, { createContext, useContext, useState, useCallback, useMemo, ReactNode } from \"react\";\n\n// INTERNAL ============================================================================================================\nimport { ToastsWrapper } from \"../ToastsWrapper/ToastsWrapper\";\nimport { ToastItem } from \"../ToastItem/ToastItem\";\n\n// TYPES ===============================================================================================================\ninterface InternalToast {\n    id       : string;\n    message  : string;\n    duration : number;\n}\n\n// prettier-ignore\nexport interface ToastsProviderProps {\n    children   : ReactNode;\n    anchor   ? : \"top\" | \"bottom\";\n}\n\n// TOAST FUNCTION TYPE =================================================================================================\nexport type ToastFunction = (message: string, duration?: number) => void;\n\ninterface ToastsContextValue {\n    toast: ToastFunction;\n}\n\n// CONTEXT =============================================================================================================\nconst ToastsContext = createContext<ToastsContextValue | null>(null);\n\n// PROVIDER ============================================================================================================\nexport const ToastsProvider = ({\n    children,\n    anchor = \"top\",\n}: ToastsProviderProps) => {\n    const [toasts, setToasts] = useState<InternalToast[]>([]);\n\n    // Remove a toast by ID\n    const removeToast = useCallback((id: string) => {\n        setToasts(prev => prev.filter(t => t.id !== id));\n    }, []);\n\n    // Main toast function\n    const toast: ToastFunction = useCallback((message: string, duration: number = 4) => {\n        const id = `toast-${Date.now()}-${Math.random().toString(36).substring(2, 9)}`;\n\n        setToasts(prev => [...prev, {\n            id,\n            message,\n            duration,\n        }]);\n    }, []);\n\n    return (\n        <ToastsContext.Provider value={useMemo(() => ({ toast }), [toast])}>\n            {children}\n\n            <ToastsWrapper anchor={anchor}>\n                {toasts.map(({ id, message, duration }) => (\n                    <ToastItem\n                        key={id}\n                        id={id}\n                        duration={duration}\n                        onClose={() => removeToast(id)}\n                    >\n                        {message}\n                    </ToastItem>\n                ))}\n            </ToastsWrapper>\n        </ToastsContext.Provider>\n    );\n};\nToastsProvider.displayName = \"ToastsProvider\";\n\n// HOOK ================================================================================================================\nexport const useToasts = (): ToastFunction => {\n    const context = useContext(ToastsContext);\n\n    if (!context) {\n        throw new Error(\"useToasts must be used within a ToastsProvider\");\n    }\n\n    return context.toast;\n};\n"],"names":["ToastsContext","createContext","ToastsProvider","children","anchor","toasts","setToasts","useState","removeToast","useCallback","id","prev","t","toast","message","duration","jsxs","useMemo","jsx","ToastsWrapper","ToastItem","useToasts","context","useContext"],"mappings":";;;;AA4BA,MAAMA,IAAgBC,EAAyC,IAAI,GAGtDC,IAAiB,CAAC;AAAA,EAC3B,UAAAC;AAAA,EACA,QAAAC,IAAS;AACb,MAA2B;AACvB,QAAM,CAACC,GAAQC,CAAS,IAAIC,EAA0B,CAAA,CAAE,GAGlDC,IAAcC,EAAY,CAACC,MAAe;AAC5C,IAAAJ,EAAU,OAAQK,EAAK,OAAO,OAAKC,EAAE,OAAOF,CAAE,CAAC;AAAA,EACnD,GAAG,CAAA,CAAE,GAGCG,IAAuBJ,EAAY,CAACK,GAAiBC,IAAmB,MAAM;AAChF,UAAML,IAAK,SAAS,KAAK,IAAA,CAAK,IAAI,KAAK,OAAA,EAAS,SAAS,EAAE,EAAE,UAAU,GAAG,CAAC,CAAC;AAE5E,IAAAJ,EAAU,CAAAK,MAAQ,CAAC,GAAGA,GAAM;AAAA,MACxB,IAAAD;AAAA,MACA,SAAAI;AAAA,MACA,UAAAC;AAAA,IAAA,CACH,CAAC;AAAA,EACN,GAAG,CAAA,CAAE;AAEL,SACI,gBAAAC,EAAChB,EAAc,UAAd,EAAuB,OAAOiB,EAAQ,OAAO,EAAE,OAAAJ,EAAA,IAAU,CAACA,CAAK,CAAC,GAC5D,UAAA;AAAA,IAAAV;AAAA,IAED,gBAAAe,EAACC,GAAA,EAAc,QAAAf,GACV,UAAAC,EAAO,IAAI,CAAC,EAAE,IAAAK,GAAI,SAAAI,GAAS,UAAAC,EAAA,MACxB,gBAAAG;AAAA,MAACE;AAAA,MAAA;AAAA,QAEG,IAAAV;AAAA,QACA,UAAAK;AAAA,QACA,SAAS,MAAMP,EAAYE,CAAE;AAAA,QAE5B,UAAAI;AAAA,MAAA;AAAA,MALIJ;AAAA,IAAA,CAOZ,EAAA,CACL;AAAA,EAAA,GACJ;AAER;AACAR,EAAe,cAAc;AAGtB,MAAMmB,IAAY,MAAqB;AAC1C,QAAMC,IAAUC,EAAWvB,CAAa;AAExC,MAAI,CAACsB;AACD,UAAM,IAAI,MAAM,gDAAgD;AAGpE,SAAOA,EAAQ;AACnB;"}

package/dist/components/Typography/Heading.js

@@ -1,23 +1,23 @@
 "use client";
-import { jsx as s } from "react/jsx-runtime";
-import d from "react";
+import { jsx as d } from "react/jsx-runtime";
+import s from "react";
 import { Element as t } from "../Element/Element.js";
-const i = d.forwardRef(
-  ({ fontStyle: a = "sans-serif", weight: e, align: n, ...f }, o) => {
+const i = s.forwardRef(
+  ({ fontStyle: a, weight: e, align: n, ...o }, f) => {
     let r = [];
-    return e && r.push(`weight-${e}`), a && r.push(`font-${a}`), n && r.push(`text-${n}`), /* @__PURE__ */ s(t, { ref: o, classNames: r, ...f });
+    return e && r.push(`weight-${e}`), a && r.push(`font-${a}`), n && r.push(`text-${n}`), /* @__PURE__ */ d(t, { ref: f, classNames: r, ...o });
   }
-), m = d.forwardRef((a, e) => /* @__PURE__ */ s(i, { as: "h1", ref: e, ...a }));
+), m = s.forwardRef((a, e) => /* @__PURE__ */ d(i, { as: "h1", ref: e, ...a }));
 m.displayName = "Heading1";
-const p = d.forwardRef((a, e) => /* @__PURE__ */ s(i, { as: "h2", ref: e, ...a }));
+const p = s.forwardRef((a, e) => /* @__PURE__ */ d(i, { as: "h2", ref: e, ...a }));
 p.displayName = "Heading2";
-const H = d.forwardRef((a, e) => /* @__PURE__ */ s(i, { as: "h3", ref: e, ...a }));
+const H = s.forwardRef((a, e) => /* @__PURE__ */ d(i, { as: "h3", ref: e, ...a }));
 H.displayName = "Heading3";
-const g = d.forwardRef((a, e) => /* @__PURE__ */ s(i, { as: "h4", ref: e, ...a }));
+const g = s.forwardRef((a, e) => /* @__PURE__ */ d(i, { as: "h4", ref: e, ...a }));
 g.displayName = "Heading4";
-const c = d.forwardRef((a, e) => /* @__PURE__ */ s(i, { as: "h5", ref: e, ...a }));
+const c = s.forwardRef((a, e) => /* @__PURE__ */ d(i, { as: "h5", ref: e, ...a }));
 c.displayName = "Heading5";
-const h = d.forwardRef((a, e) => /* @__PURE__ */ s(i, { as: "h6", ref: e, ...a }));
+const h = s.forwardRef((a, e) => /* @__PURE__ */ d(i, { as: "h6", ref: e, ...a }));
 h.displayName = "Heading6";
 export {
   m as Heading1,

package/dist/components/Typography/Heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"Heading.js","sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["// FRAMEWORK ===========================================================================================================\nimport React from \"react\";\n\n// FICTOAN =============================================================================================================\nimport { Element } from \"../Element\";\n\n// TYPES ===============================================================================================================\nimport { CommonAndHTMLProps, WeightTypes } from \"../Element/constants\";\n\n// prettier-ignore\ninterface HeadingBaseProps {\n    as        ? : \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n    fontStyle ? : \"sans-serif\" | \"serif\" | \"monospace\";\n    weight    ? : WeightTypes;\n    align     ? : \"left\" | \"centre\" | \"center\" | \"right\";\n}\n\nexport type HeadingElementType = HTMLHeadingElement;\nexport type HeadingProps = Omit<CommonAndHTMLProps<HeadingElementType>, keyof HeadingBaseProps> & HeadingBaseProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nconst Heading = React.forwardRef(\n    ({ fontStyle = \"sans-serif\", weight, align, ...props }: HeadingProps, ref: React.Ref<HeadingElementType>) => {\n        let classNames = [];\n\n        if (weight) {\n            classNames.push(`weight-${weight}`);\n        }\n\n        if (fontStyle) {\n            classNames.push(`font-${fontStyle}`);\n        }\n\n        if (align) {\n            classNames.push(`text-${align}`);\n        }\n\n        return <Element<HeadingElementType> ref={ref} classNames={classNames} {...props} />;\n    }\n);\n\nexport const Heading1 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h1\" ref={ref} {...props} />\n));\nHeading1.displayName = \"Heading1\";\n\nexport const Heading2 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h2\" ref={ref} {...props} />\n));\nHeading2.displayName = \"Heading2\";\n\nexport const Heading3 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h3\" ref={ref} {...props} />\n));\nHeading3.displayName = \"Heading3\";\n\nexport const Heading4 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h4\" ref={ref} {...props} />\n));\nHeading4.displayName = \"Heading4\";\n\nexport const Heading5 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h5\" ref={ref} {...props} />\n));\nHeading5.displayName = \"Heading5\";\n\nexport const Heading6 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h6\" ref={ref} {...props} />\n));\nHeading6.displayName = \"Heading6\";\n"],"names":["Heading","React","fontStyle","weight","align","props","ref","classNames","jsx","Element","Heading1","Heading2","Heading3","Heading4","Heading5","Heading6"],"mappings":";;;AAqBA,MAAMA,IAAUC,EAAM;AAAA,EAClB,CAAC,EAAE,WAAAC,IAAY,cAAc,QAAAC,GAAQ,OAAAC,GAAO,GAAGC,EAAA,GAAuBC,MAAuC;AACzG,QAAIC,IAAa,CAAA;AAEjB,WAAIJ,KACAI,EAAW,KAAK,UAAUJ,CAAM,EAAE,GAGlCD,KACAK,EAAW,KAAK,QAAQL,CAAS,EAAE,GAGnCE,KACAG,EAAW,KAAK,QAAQH,CAAK,EAAE,GAG5B,gBAAAI,EAACC,GAAA,EAA4B,KAAAH,GAAU,YAAAC,GAAyB,GAAGF,GAAO;AAAA,EACrF;AACJ,GAEaK,IAAWT,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDK,EAAS,cAAc;AAEhB,MAAMC,IAAWV,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDM,EAAS,cAAc;AAEhB,MAAMC,IAAWX,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDO,EAAS,cAAc;AAEhB,MAAMC,IAAWZ,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDQ,EAAS,cAAc;AAEhB,MAAMC,IAAWb,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDS,EAAS,cAAc;AAEhB,MAAMC,IAAWd,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDU,EAAS,cAAc;"}
+{"version":3,"file":"Heading.js","sources":["../../../src/components/Typography/Heading.tsx"],"sourcesContent":["// FRAMEWORK ===========================================================================================================\nimport React from \"react\";\n\n// FICTOAN =============================================================================================================\nimport { Element } from \"../Element\";\n\n// TYPES ===============================================================================================================\nimport { CommonAndHTMLProps, WeightTypes } from \"../Element/constants\";\n\n// prettier-ignore\ninterface HeadingBaseProps {\n    as        ? : \"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\";\n    fontStyle ? : \"sans-serif\" | \"serif\" | \"monospace\";\n    weight    ? : WeightTypes;\n    align     ? : \"left\" | \"centre\" | \"center\" | \"right\";\n}\n\nexport type HeadingElementType = HTMLHeadingElement;\nexport type HeadingProps = Omit<CommonAndHTMLProps<HeadingElementType>, keyof HeadingBaseProps> & HeadingBaseProps;\n\n// COMPONENT ///////////////////////////////////////////////////////////////////////////////////////////////////////////\nconst Heading = React.forwardRef(\n    ({ fontStyle, weight, align, ...props }: HeadingProps, ref: React.Ref<HeadingElementType>) => {\n        let classNames = [];\n\n        if (weight) {\n            classNames.push(`weight-${weight}`);\n        }\n\n        if (fontStyle) {\n            classNames.push(`font-${fontStyle}`);\n        }\n\n        if (align) {\n            classNames.push(`text-${align}`);\n        }\n\n        return <Element<HeadingElementType> ref={ref} classNames={classNames} {...props} />;\n    }\n);\n\nexport const Heading1 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h1\" ref={ref} {...props} />\n));\nHeading1.displayName = \"Heading1\";\n\nexport const Heading2 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h2\" ref={ref} {...props} />\n));\nHeading2.displayName = \"Heading2\";\n\nexport const Heading3 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h3\" ref={ref} {...props} />\n));\nHeading3.displayName = \"Heading3\";\n\nexport const Heading4 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h4\" ref={ref} {...props} />\n));\nHeading4.displayName = \"Heading4\";\n\nexport const Heading5 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h5\" ref={ref} {...props} />\n));\nHeading5.displayName = \"Heading5\";\n\nexport const Heading6 = React.forwardRef((props: HeadingProps, ref: React.Ref<HeadingElementType>) => (\n    <Heading as=\"h6\" ref={ref} {...props} />\n));\nHeading6.displayName = \"Heading6\";\n"],"names":["Heading","React","fontStyle","weight","align","props","ref","classNames","jsx","Element","Heading1","Heading2","Heading3","Heading4","Heading5","Heading6"],"mappings":";;;AAqBA,MAAMA,IAAUC,EAAM;AAAA,EAClB,CAAC,EAAE,WAAAC,GAAW,QAAAC,GAAQ,OAAAC,GAAO,GAAGC,EAAA,GAAuBC,MAAuC;AAC1F,QAAIC,IAAa,CAAA;AAEjB,WAAIJ,KACAI,EAAW,KAAK,UAAUJ,CAAM,EAAE,GAGlCD,KACAK,EAAW,KAAK,QAAQL,CAAS,EAAE,GAGnCE,KACAG,EAAW,KAAK,QAAQH,CAAK,EAAE,GAG5B,gBAAAI,EAACC,GAAA,EAA4B,KAAAH,GAAU,YAAAC,GAAyB,GAAGF,GAAO;AAAA,EACrF;AACJ,GAEaK,IAAWT,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDK,EAAS,cAAc;AAEhB,MAAMC,IAAWV,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDM,EAAS,cAAc;AAEhB,MAAMC,IAAWX,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDO,EAAS,cAAc;AAEhB,MAAMC,IAAWZ,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDQ,EAAS,cAAc;AAEhB,MAAMC,IAAWb,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDS,EAAS,cAAc;AAEhB,MAAMC,IAAWd,EAAM,WAAW,CAACI,GAAqBC,MAC3D,gBAAAE,EAACR,GAAA,EAAQ,IAAG,MAAK,KAAAM,GAAW,GAAGD,GAAO,CACzC;AACDU,EAAS,cAAc;"}

package/dist/components/Typography/Text.js

@@ -1,15 +1,15 @@
 "use client";
 import { jsx as i } from "react/jsx-runtime";
-import a from "react";
-import { Element as u } from "../Element/Element.js";
-const x = a.forwardRef(
-  ({ weight: s, size: e, fontStyle: r = "sans-serif", align: f, isSubtext: p, ...m }, o) => {
+import u from "react";
+import { Element as x } from "../Element/Element.js";
+const a = u.forwardRef(
+  ({ weight: e, size: s, fontStyle: p, align: r, isSubtext: f, ...m }, o) => {
     let t = [];
-    return s && t.push(`weight-${s}`), e && t.push(`text-${e}`), r && t.push(`font-${r}`), p && t.push("sub-text"), f && t.push(`text-${f}`), /* @__PURE__ */ i(u, { as: "p", ref: o, classNames: t, ...m });
+    return e && t.push(`weight-${e}`), s && t.push(`text-${s}`), p && t.push(`font-${p}`), f && t.push("sub-text"), r && t.push(`text-${r}`), /* @__PURE__ */ i(x, { as: "p", ref: o, classNames: t, ...m });
   }
 );
-x.displayName = "Text";
+a.displayName = "Text";
 export {
-  x as Text
+  a as Text
 };
 //# sourceMappingURL=Text.js.map

package/dist/components/Typography/Text.js.map

@@ -1 +1 @@
-{"version":3,"file":"Text.js","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps, SpacingTypes, WeightTypes } from \"../Element/constants\";\nimport { Element } from \"$element\";\n\n// prettier-ignore\nexport interface TextCustomProps {\n    fontStyle ? : \"sans-serif\" | \"serif\" | \"monospace\";\n    weight    ? : WeightTypes;\n    size      ? : SpacingTypes;\n    align     ? : \"left\" | \"centre\" | \"center\" | \"right\";\n    isSubtext ? : boolean;\n}\n\nexport type TextElementType = HTMLParagraphElement;\nexport type TextProps = Omit<CommonAndHTMLProps<TextElementType>, keyof TextCustomProps> & TextCustomProps;\n\nexport const Text = React.forwardRef(\n    (\n        {weight, size, fontStyle = \"sans-serif\", align, isSubtext, ...props} : TextProps,\n        ref : React.Ref<TextElementType>,\n    ) => {\n        let classNames = [];\n\n        if (weight) {\n            classNames.push(`weight-${weight}`);\n        }\n\n        if (size) {\n            classNames.push(`text-${size}`);\n        }\n\n        if (fontStyle) {\n            classNames.push(`font-${fontStyle}`);\n        }\n\n        if (isSubtext) {\n            classNames.push(\"sub-text\");\n        }\n\n        if (align) {\n            classNames.push(`text-${align}`);\n        }\n\n        return <Element<TextElementType> as=\"p\" ref={ref} classNames={classNames} {...props} />;\n    },\n);\nText.displayName = \"Text\";\n"],"names":["Text","React","weight","size","fontStyle","align","isSubtext","props","ref","classNames","Element"],"mappings":";;;AAmBO,MAAMA,IAAOC,EAAM;AAAA,EACtB,CACI,EAAC,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,IAAY,cAAc,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAC9DC,MACC;AACD,QAAIC,IAAa,CAAA;AAEjB,WAAIP,KACAO,EAAW,KAAK,UAAUP,CAAM,EAAE,GAGlCC,KACAM,EAAW,KAAK,QAAQN,CAAI,EAAE,GAG9BC,KACAK,EAAW,KAAK,QAAQL,CAAS,EAAE,GAGnCE,KACAG,EAAW,KAAK,UAAU,GAG1BJ,KACAI,EAAW,KAAK,QAAQJ,CAAK,EAAE,qBAG3BK,GAAA,EAAyB,IAAG,KAAI,KAAAF,GAAU,YAAAC,GAAyB,GAAGF,GAAO;AAAA,EACzF;AACJ;AACAP,EAAK,cAAc;"}
+{"version":3,"file":"Text.js","sources":["../../../src/components/Typography/Text.tsx"],"sourcesContent":["// REACT CORE ==========================================================================================================\nimport React from \"react\";\n\n// LOCAL COMPONENTS ====================================================================================================\nimport { CommonAndHTMLProps, SpacingTypes, WeightTypes } from \"../Element/constants\";\nimport { Element } from \"$element\";\n\n// prettier-ignore\nexport interface TextCustomProps {\n    fontStyle ? : \"sans-serif\" | \"serif\" | \"monospace\";\n    weight    ? : WeightTypes;\n    size      ? : SpacingTypes;\n    align     ? : \"left\" | \"centre\" | \"center\" | \"right\";\n    isSubtext ? : boolean;\n}\n\nexport type TextElementType = HTMLParagraphElement;\nexport type TextProps = Omit<CommonAndHTMLProps<TextElementType>, keyof TextCustomProps> & TextCustomProps;\n\nexport const Text = React.forwardRef(\n    (\n        {weight, size, fontStyle, align, isSubtext, ...props} : TextProps,\n        ref : React.Ref<TextElementType>,\n    ) => {\n        let classNames = [];\n\n        if (weight) {\n            classNames.push(`weight-${weight}`);\n        }\n\n        if (size) {\n            classNames.push(`text-${size}`);\n        }\n\n        if (fontStyle) {\n            classNames.push(`font-${fontStyle}`);\n        }\n\n        if (isSubtext) {\n            classNames.push(\"sub-text\");\n        }\n\n        if (align) {\n            classNames.push(`text-${align}`);\n        }\n\n        return <Element<TextElementType> as=\"p\" ref={ref} classNames={classNames} {...props} />;\n    },\n);\nText.displayName = \"Text\";\n"],"names":["Text","React","weight","size","fontStyle","align","isSubtext","props","ref","classNames","Element"],"mappings":";;;AAmBO,MAAMA,IAAOC,EAAM;AAAA,EACtB,CACI,EAAC,QAAAC,GAAQ,MAAAC,GAAM,WAAAC,GAAW,OAAAC,GAAO,WAAAC,GAAW,GAAGC,EAAA,GAC/CC,MACC;AACD,QAAIC,IAAa,CAAA;AAEjB,WAAIP,KACAO,EAAW,KAAK,UAAUP,CAAM,EAAE,GAGlCC,KACAM,EAAW,KAAK,QAAQN,CAAI,EAAE,GAG9BC,KACAK,EAAW,KAAK,QAAQL,CAAS,EAAE,GAGnCE,KACAG,EAAW,KAAK,UAAU,GAG1BJ,KACAI,EAAW,KAAK,QAAQJ,CAAK,EAAE,qBAG3BK,GAAA,EAAyB,IAAG,KAAI,KAAAF,GAAU,YAAAC,GAAyB,GAAGF,GAAO;AAAA,EACzF;AACJ;AACAP,EAAK,cAAc;"}

package/dist/fictoan-schema.json

@@ -1,7 +1,7 @@
 {
   "$schema": "https://fictoan.io/schema/v1.json",
   "name": "fictoan-react",
-  "version": "2.0.0-beta.18",
+  "version": "2.0.0-beta.19",
   "framework": "react",
   "philosophy": "Plain-English props, pure CSS, zero runtime. A universal Element prop set (spacing, colour, layout, responsiveness) works across every component.",
   "docs": "https://fictoan.io",
@@ -206,62 +206,62 @@
     "layoutAsFlexbox": {
       "type": "boolean"
     },
-    "stackVertically": {
+    "listVertically": {
       "type": "boolean"
     },
-    "stackHorizontally": {
+    "listHorizontally": {
       "type": "boolean"
     },
     "layoutAsGrid": {
       "type": "boolean"
     },
     "columns": {
-      "type": "string"
+      "type": "number"
     },
     "gap": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "margin": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "horizontalMargin": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "verticalMargin": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "marginTop": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "marginRight": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "marginBottom": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "marginLeft": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "padding": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "horizontalPadding": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "verticalPadding": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "paddingTop": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "paddingRight": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "paddingBottom": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "paddingLeft": {
-      "type": "SpacingTypes"
+      "type": "SpacingOrLength"
     },
     "horizontallyCentreThis": {
       "type": "boolean"
@@ -1588,7 +1588,7 @@
         },
         "renderItem": {
           "type": "((props: RenderItemProps) => ReactNode)",
-          "default": "(\n    {\n        type,\n        page,\n        selected,\n        disabled,\n        onClick,\n        key,\n        ...props\n    }: RenderItemProps) => {\n    if (type === \"ellipsis\") {\n        return (\n            <Text className=\"pagination-ellipsis\">...</Text>\n        );\n    }\n\n    const iconButtonLabels: Record<string, string> = {\n        first    : \"Go to first page\",\n        previous : \"Go to previous page\",\n        next     : \"Go to next page\",\n        last     : \"Go to last page\",\n    };\n\n    const paginationItemProps = {\n        type      : \"button\",\n        className : `pagination-item ${selected ? \"selected\" : \"\"} ${disabled ? \"disabled\" : \"\"}`,\n        onClick,\n        disabled,\n        ...(iconButtonLabels[type] ? { \"aria-label\" : iconButtonLabels[type] } : {}),\n        ...props,\n    };\n\n    let content;\n    switch (type) {\n        case \"first\":\n            content = content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <line x1=\"5\" y1=\"18\" x2=\"5\" y2=\"6\" />\n                    <polyline points=\"14 18 9 12 14 6\" />\n                    <line x1=\"10\" y1=\"12\" x2=\"19\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        case \"previous\":\n            content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <polyline points=\"12 18 7 12 12 6\" />\n                    <line x1=\"8\" y1=\"12\" x2=\"17\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        case \"next\":\n            content = content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <polyline points=\"12 6 17 12 12 18\" />\n                    <line x1=\"16\" y1=\"12\" x2=\"7\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        case \"last\":\n            content = content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <polyline points=\"10 6 15 12 10 18\" />\n                    <line x1=\"19\" y1=\"6\" x2=\"19\" y2=\"18\" />\n                    <line x1=\"14\" y1=\"12\" x2=\"5\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        default:\n            content = page;\n    }\n\n    return (\n        <Button\n            kind=\"custom\"\n            {...paginationItemProps}\n        >\n            {content}\n        </Button>\n    );\n}"
+          "default": "(\n    {\n        type,\n        page,\n        selected,\n        disabled,\n        onClick,\n        key,\n        ...props\n    }: RenderItemProps) => {\n    if (type === \"ellipsis\") {\n        return (\n            <Text key={key} className=\"pagination-ellipsis\">...</Text>\n        );\n    }\n\n    const iconButtonLabels: Record<string, string> = {\n        first    : \"Go to first page\",\n        previous : \"Go to previous page\",\n        next     : \"Go to next page\",\n        last     : \"Go to last page\",\n    };\n\n    const paginationItemProps = {\n        type      : \"button\",\n        className : `pagination-item ${selected ? \"selected\" : \"\"} ${disabled ? \"disabled\" : \"\"}`,\n        onClick,\n        disabled,\n        ...(iconButtonLabels[type] ? { \"aria-label\" : iconButtonLabels[type] } : {}),\n        ...props,\n    };\n\n    let content;\n    switch (type) {\n        case \"first\":\n            content = content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <line x1=\"5\" y1=\"18\" x2=\"5\" y2=\"6\" />\n                    <polyline points=\"14 18 9 12 14 6\" />\n                    <line x1=\"10\" y1=\"12\" x2=\"19\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        case \"previous\":\n            content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <polyline points=\"12 18 7 12 12 6\" />\n                    <line x1=\"8\" y1=\"12\" x2=\"17\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        case \"next\":\n            content = content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <polyline points=\"12 6 17 12 12 18\" />\n                    <line x1=\"16\" y1=\"12\" x2=\"7\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        case \"last\":\n            content = content = (\n                <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n                    <polyline points=\"10 6 15 12 10 18\" />\n                    <line x1=\"19\" y1=\"6\" x2=\"19\" y2=\"18\" />\n                    <line x1=\"14\" y1=\"12\" x2=\"5\" y2=\"12\" />\n                </svg>\n            );\n            break;\n        default:\n            content = page;\n    }\n\n    return (\n        <Button\n            key={key}\n            kind=\"custom\"\n            {...paginationItemProps}\n        >\n            {content}\n        </Button>\n    );\n}"
         },
         "isLoading": {
           "type": "boolean",
@@ -1622,6 +1622,9 @@
         "mobileSpan": {
           "type": "SpanTypes"
         },
+        "fillLeftoverWidth": {
+          "type": "boolean"
+        },
         "isHorizontal": {
           "type": "boolean"
         },
@@ -1689,6 +1692,9 @@
         "allowUltraWide": {
           "type": "boolean"
         },
+        "equalisePortions": {
+          "type": "boolean"
+        },
         "groupLabel": {
           "type": "string"
         }
@@ -1859,9 +1865,6 @@
         },
         "summary": {
           "type": "string"
-        },
-        "hasColSpan": {
-          "type": "boolean"
         }
       }
     },
@@ -1948,8 +1951,7 @@
       "import": "import { Text } from \"fictoan-react\";",
       "props": {
         "fontStyle": {
-          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
-          "default": "sans-serif"
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\""
         },
         "size": {
           "type": "SpacingTypes"
@@ -1971,8 +1973,7 @@
           "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\""
         },
         "fontStyle": {
-          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
-          "default": "sans-serif"
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\""
         },
         "align": {
           "type": "\"left\" | \"centre\" | \"center\" | \"right\""
@@ -1988,8 +1989,7 @@
           "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\""
         },
         "fontStyle": {
-          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
-          "default": "sans-serif"
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\""
         },
         "align": {
           "type": "\"left\" | \"centre\" | \"center\" | \"right\""
@@ -2004,8 +2004,7 @@
           "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\""
         },
         "fontStyle": {
-          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
-          "default": "sans-serif"
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\""
         },
         "align": {
           "type": "\"left\" | \"centre\" | \"center\" | \"right\""
@@ -2020,8 +2019,7 @@
           "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\""
         },
         "fontStyle": {
-          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
-          "default": "sans-serif"
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\""
         },
         "align": {
           "type": "\"left\" | \"centre\" | \"center\" | \"right\""
@@ -2036,8 +2034,7 @@
           "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\""
         },
         "fontStyle": {
-          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
-          "default": "sans-serif"
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\""
         },
         "align": {
           "type": "\"left\" | \"centre\" | \"center\" | \"right\""
@@ -2052,8 +2049,7 @@
           "type": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\""
         },
         "fontStyle": {
-          "type": "\"sans-serif\" | \"serif\" | \"monospace\"",
-          "default": "sans-serif"
+          "type": "\"sans-serif\" | \"serif\" | \"monospace\""
         },
         "align": {
           "type": "\"left\" | \"centre\" | \"center\" | \"right\""