fiboui 2.2.0 → 2.2.3

package/README.md

@@ -1,4 +1,4 @@
-# FiboUI v2.2.0
+# FiboUI v2.2.3
 
 **A Flutter & SwiftUI-inspired React UI framework featuring a fluent builder API and fine-grained reactivity.**
 

package/dist/{FineGrain-6w615KQw.js → FineGrain-BEvB51B2.js}

@@ -1,6 +1,6 @@
 "use client";
 import s, { useRef as l, useEffect as p } from "react";
-import { w as x, r as m, E } from "./builder-KLTu7nAI.js";
+import { y as x, r as m, E } from "./builder-3Bc2PfP9.js";
 function R({
   compute: e,
   as: n = "span",

package/dist/Link-ElmaMZB8.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsx as m } from "react/jsx-runtime";
+import { createContext as x, useContext as p } from "react";
+const v = x(null);
+function o() {
+  const t = p(v);
+  if (!t)
+    throw new Error("useRouter must be used within a Router");
+  return t;
+}
+function C() {
+  return p(v);
+}
+function R() {
+  const { navigate: t } = o();
+  return t;
+}
+function g() {
+  const { params: t } = o();
+  return t;
+}
+function k() {
+  const { query: t } = o();
+  return t;
+}
+function L() {
+  var r;
+  const { currentPath: t, query: n, hash: a } = o(), e = ((r = n == null ? void 0 : n.toString) == null ? void 0 : r.call(n)) ?? "";
+  return {
+    pathname: t,
+    search: e ? `?${e}` : "",
+    hash: a ?? ""
+  };
+}
+const $ = ({
+  to: t,
+  children: n,
+  replace: a = !1,
+  state: e,
+  className: r,
+  style: h,
+  onClick: i
+}) => {
+  const f = R(), c = C(), u = t.startsWith("http") || t.startsWith("//") || t.startsWith("#") ? t : `${(c == null ? void 0 : c.basename) ?? ""}${t}`;
+  return /* @__PURE__ */ m(
+    "a",
+    {
+      href: u,
+      onClick: (s) => {
+        s.ctrlKey || s.metaKey || s.shiftKey || s.button !== 0 || (s.preventDefault(), i && i(s), f(t, { replace: a, state: e }));
+      },
+      className: r,
+      style: h,
+      children: n
+    }
+  );
+}, N = ({
+  to: t,
+  children: n,
+  className: a = "",
+  style: e = {},
+  activeClassName: r = "active",
+  activeStyle: h = {},
+  exact: i = !1,
+  ...f
+}) => {
+  const { currentPath: c } = o(), u = i ? c === t : c.startsWith(t), l = u ? `${a} ${r}`.trim() : a, s = u ? { ...e, ...h } : e;
+  return /* @__PURE__ */ m(
+    $,
+    {
+      to: t,
+      className: l,
+      style: s,
+      ...f,
+      children: n
+    }
+  );
+};
+export {
+  $ as L,
+  N,
+  v as R,
+  R as a,
+  g as b,
+  L as c,
+  k as d,
+  C as e,
+  o as u
+};

package/dist/{Router-i6Nc6qVs.js → Router-BwbaHooU.js}

@@ -1,44 +1,44 @@
 "use client";
-var W = Object.defineProperty;
-var B = (o, n, e) => n in o ? W(o, n, { enumerable: !0, configurable: !0, writable: !0, value: e }) : o[n] = e;
-var R = (o, n, e) => B(o, typeof n != "symbol" ? n + "" : n, e);
-import { jsxs as m, jsx as r } from "react/jsx-runtime";
-import z, { Component as M, useState as S, useCallback as y, useEffect as j, Suspense as A, createContext as D } from "react";
-import { R as H } from "./Link-DDzSPY1Q.js";
-function U(o, n) {
-  const e = n.split("/").filter(Boolean), a = o.split("/").filter(Boolean);
-  if (e.length !== a.length)
+var A = Object.defineProperty;
+var D = (e, o, r) => o in e ? A(e, o, { enumerable: !0, configurable: !0, writable: !0, value: r }) : e[o] = r;
+var E = (e, o, r) => D(e, typeof o != "symbol" ? o + "" : o, r);
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import F, { Component as I, useState as w, useCallback as b, useEffect as U, Suspense as G, createContext as N } from "react";
+import { R as q } from "./Link-ElmaMZB8.js";
+function O(e, o) {
+  const r = o.split("/").filter(Boolean), i = e.split("/").filter(Boolean);
+  if (r.length !== i.length)
     return { match: !1, params: {} };
-  const t = {};
-  for (let i = 0; i < e.length; i++) {
-    const u = e[i], h = a[i];
-    if (u.startsWith(":")) {
-      const w = u.slice(1);
-      t[w] = h;
+  const n = {};
+  for (let a = 0; a < r.length; a++) {
+    const f = r[a], m = i[a];
+    if (f.startsWith(":")) {
+      const y = f.slice(1);
+      n[y] = m;
       continue;
     }
-    if (u !== h)
+    if (f !== m)
       return { match: !1, params: {} };
   }
-  return { match: !0, params: t };
+  return { match: !0, params: n };
 }
-function b(o, n) {
-  for (const e of o) {
-    const { match: a, params: t } = U(n, e.path);
-    if (a)
-      return { route: e, params: t };
-    if (e.children) {
-      const i = b(e.children, n);
-      if (i.route)
-        return i;
+function x(e, o) {
+  for (const r of e) {
+    const { match: i, params: n } = O(o, r.path);
+    if (i)
+      return { route: r, params: n };
+    if (r.children) {
+      const a = x(r.children, o);
+      if (a.route)
+        return a;
     }
   }
   return { route: null, params: {} };
 }
-class F extends M {
-  constructor(e) {
-    super(e);
-    R(this, "reset", () => {
+class Q extends I {
+  constructor(r) {
+    super(r);
+    E(this, "reset", () => {
       this.setState({
         hasError: !1,
         error: null,
@@ -51,36 +51,36 @@ class F extends M {
       errorInfo: null
     };
   }
-  static getDerivedStateFromError(e) {
+  static getDerivedStateFromError(r) {
     return {
       hasError: !0,
-      error: e
+      error: r
     };
   }
-  componentDidCatch(e, a) {
-    var t, i;
-    console.error("RouteErrorBoundary caught error:", e, a), (i = (t = this.props).onError) == null || i.call(t, e, a), this.setState({
-      errorInfo: a
+  componentDidCatch(r, i) {
+    var n, a;
+    console.error("RouteErrorBoundary caught error:", r, i), (a = (n = this.props).onError) == null || a.call(n, r, i), this.setState({
+      errorInfo: i
     });
   }
   render() {
     if (this.state.hasError && this.state.error) {
-      const { fallback: e } = this.props;
-      return typeof e == "function" ? e(this.state.error, this.state.errorInfo) : e || /* @__PURE__ */ m("div", { style: { padding: "2rem", textAlign: "center" }, children: [
-        /* @__PURE__ */ r("h1", { children: "Something went wrong" }),
-        /* @__PURE__ */ r("p", { children: this.state.error.message })
+      const { fallback: r } = this.props;
+      return typeof r == "function" ? r(this.state.error, this.state.errorInfo) : r || /* @__PURE__ */ p("div", { style: { padding: "2rem", textAlign: "center" }, children: [
+        /* @__PURE__ */ t("h1", { children: "Something went wrong" }),
+        /* @__PURE__ */ t("p", { children: this.state.error.message })
       ] });
     }
     return this.props.children;
   }
 }
-const I = ({ error: o, onReset: n }) => {
-  const e = () => {
+const V = ({ error: e, onReset: o }) => {
+  const r = () => {
     window.location.href = "/";
-  }, a = () => {
+  }, i = () => {
     window.location.reload();
   };
-  return /* @__PURE__ */ r(
+  return /* @__PURE__ */ t(
     "div",
     {
       style: {
@@ -93,7 +93,7 @@ const I = ({ error: o, onReset: n }) => {
         backgroundColor: "#f9fafb",
         fontFamily: "system-ui, -apple-system, sans-serif"
       },
-      children: /* @__PURE__ */ m(
+      children: /* @__PURE__ */ p(
         "div",
         {
           style: {
@@ -106,7 +106,7 @@ const I = ({ error: o, onReset: n }) => {
             textAlign: "center"
           },
           children: [
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ t(
               "div",
               {
                 style: {
@@ -119,7 +119,7 @@ const I = ({ error: o, onReset: n }) => {
                   alignItems: "center",
                   justifyContent: "center"
                 },
-                children: /* @__PURE__ */ m(
+                children: /* @__PURE__ */ p(
                   "svg",
                   {
                     width: "32",
@@ -131,15 +131,15 @@ const I = ({ error: o, onReset: n }) => {
                     strokeLinecap: "round",
                     strokeLinejoin: "round",
                     children: [
-                      /* @__PURE__ */ r("circle", { cx: "12", cy: "12", r: "10" }),
-                      /* @__PURE__ */ r("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
-                      /* @__PURE__ */ r("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
+                      /* @__PURE__ */ t("circle", { cx: "12", cy: "12", r: "10" }),
+                      /* @__PURE__ */ t("line", { x1: "12", y1: "8", x2: "12", y2: "12" }),
+                      /* @__PURE__ */ t("line", { x1: "12", y1: "16", x2: "12.01", y2: "16" })
                     ]
                   }
                 )
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ t(
               "h1",
               {
                 style: {
@@ -151,7 +151,7 @@ const I = ({ error: o, onReset: n }) => {
                 children: "Oops! Something went wrong"
               }
             ),
-            o && /* @__PURE__ */ r(
+            e && /* @__PURE__ */ t(
               "div",
               {
                 style: {
@@ -161,7 +161,7 @@ const I = ({ error: o, onReset: n }) => {
                   borderRadius: "8px",
                   border: "1px solid #fecaca"
                 },
-                children: /* @__PURE__ */ r(
+                children: /* @__PURE__ */ t(
                   "p",
                   {
                     style: {
@@ -171,12 +171,12 @@ const I = ({ error: o, onReset: n }) => {
                       margin: 0,
                       wordBreak: "break-word"
                     },
-                    children: o.message
+                    children: e.message
                   }
                 )
               }
             ),
-            /* @__PURE__ */ r(
+            /* @__PURE__ */ t(
               "p",
               {
                 style: {
@@ -188,7 +188,7 @@ const I = ({ error: o, onReset: n }) => {
                 children: "We're sorry for the inconvenience. Please try one of the options below."
               }
             ),
-            /* @__PURE__ */ m(
+            /* @__PURE__ */ p(
               "div",
               {
                 style: {
@@ -198,10 +198,10 @@ const I = ({ error: o, onReset: n }) => {
                   flexWrap: "wrap"
                 },
                 children: [
-                  n && /* @__PURE__ */ r(
+                  o && /* @__PURE__ */ t(
                     "button",
                     {
-                      onClick: n,
+                      onClick: o,
                       style: {
                         padding: "0.75rem 1.5rem",
                         backgroundColor: "#3b82f6",
@@ -213,19 +213,19 @@ const I = ({ error: o, onReset: n }) => {
                         cursor: "pointer",
                         transition: "background-color 0.2s"
                       },
-                      onMouseEnter: (t) => {
-                        t.currentTarget.style.backgroundColor = "#2563eb";
+                      onMouseEnter: (n) => {
+                        n.currentTarget.style.backgroundColor = "#2563eb";
                       },
-                      onMouseLeave: (t) => {
-                        t.currentTarget.style.backgroundColor = "#3b82f6";
+                      onMouseLeave: (n) => {
+                        n.currentTarget.style.backgroundColor = "#3b82f6";
                       },
                       children: "Try Again"
                     }
                   ),
-                  /* @__PURE__ */ r(
+                  /* @__PURE__ */ t(
                     "button",
                     {
-                      onClick: a,
+                      onClick: i,
                       style: {
                         padding: "0.75rem 1.5rem",
                         backgroundColor: "#6b7280",
@@ -237,19 +237,19 @@ const I = ({ error: o, onReset: n }) => {
                         cursor: "pointer",
                         transition: "background-color 0.2s"
                       },
-                      onMouseEnter: (t) => {
-                        t.currentTarget.style.backgroundColor = "#4b5563";
+                      onMouseEnter: (n) => {
+                        n.currentTarget.style.backgroundColor = "#4b5563";
                       },
-                      onMouseLeave: (t) => {
-                        t.currentTarget.style.backgroundColor = "#6b7280";
+                      onMouseLeave: (n) => {
+                        n.currentTarget.style.backgroundColor = "#6b7280";
                       },
                       children: "Reload Page"
                     }
                   ),
-                  /* @__PURE__ */ r(
+                  /* @__PURE__ */ t(
                     "button",
                     {
-                      onClick: e,
+                      onClick: r,
                       style: {
                         padding: "0.75rem 1.5rem",
                         backgroundColor: "white",
@@ -261,11 +261,11 @@ const I = ({ error: o, onReset: n }) => {
                         cursor: "pointer",
                         transition: "all 0.2s"
                       },
-                      onMouseEnter: (t) => {
-                        t.currentTarget.style.backgroundColor = "#f9fafb", t.currentTarget.style.borderColor = "#9ca3af";
+                      onMouseEnter: (n) => {
+                        n.currentTarget.style.backgroundColor = "#f9fafb", n.currentTarget.style.borderColor = "#9ca3af";
                       },
-                      onMouseLeave: (t) => {
-                        t.currentTarget.style.backgroundColor = "white", t.currentTarget.style.borderColor = "#d1d5db";
+                      onMouseLeave: (n) => {
+                        n.currentTarget.style.backgroundColor = "white", n.currentTarget.style.borderColor = "#d1d5db";
                       },
                       children: "Go Home"
                     }
@@ -273,7 +273,7 @@ const I = ({ error: o, onReset: n }) => {
                 ]
               }
             ),
-            (o == null ? void 0 : o.stack) && /* @__PURE__ */ m(
+            (e == null ? void 0 : e.stack) && /* @__PURE__ */ p(
               "details",
               {
                 style: {
@@ -281,7 +281,7 @@ const I = ({ error: o, onReset: n }) => {
                   textAlign: "left"
                 },
                 children: [
-                  /* @__PURE__ */ r(
+                  /* @__PURE__ */ t(
                     "summary",
                     {
                       style: {
@@ -293,7 +293,7 @@ const I = ({ error: o, onReset: n }) => {
                       children: "Stack Trace"
                     }
                   ),
-                  /* @__PURE__ */ r(
+                  /* @__PURE__ */ t(
                     "pre",
                     {
                       style: {
@@ -306,7 +306,7 @@ const I = ({ error: o, onReset: n }) => {
                         overflow: "auto",
                         maxHeight: "300px"
                       },
-                      children: o.stack
+                      children: e.stack
                     }
                   )
                 ]
@@ -317,70 +317,82 @@ const I = ({ error: o, onReset: n }) => {
       )
     }
   );
-}, G = D(null), V = ({
-  routes: o,
-  fallback: n,
-  loading: e,
-  basename: a = "",
-  errorBoundary: t,
-  onError: i
+};
+function T(e, o) {
+  return o && e.startsWith(o) ? e.slice(o.length) || "/" : e || "/";
+}
+function $(e) {
+  return e ? e.startsWith("?") ? e.slice(1) : e : "";
+}
+function J(e) {
+  return e ? e.startsWith("#") ? e : `#${e}` : "";
+}
+const K = N(null), ee = ({
+  routes: e,
+  fallback: o,
+  loading: r,
+  basename: i = "",
+  initialPath: n = "/",
+  initialSearch: a = "",
+  initialHash: f = "",
+  errorBoundary: m,
+  onError: y
 }) => {
-  const [u, h] = S(() => typeof window > "u" ? "/" : window.location.pathname.replace(a, "") || "/"), [w, x] = S(
-    () => typeof window > "u" ? new URLSearchParams() : new URLSearchParams(window.location.search)
-  ), { route: p, params: P } = b(o, u), k = z.useRef(p);
-  k.current = p;
-  const g = y(async (s, c = {}) => {
-    const f = k.current, { route: l } = b(o, s);
-    if (f != null && f.beforeLeave && l) {
-      const d = await f.beforeLeave(l, f);
-      if (d === !1)
+  const [k, C] = w(() => T(n, i)), [W, v] = w(() => new URLSearchParams($(a))), [L, z] = w(() => J(f)), { route: h, params: B } = x(e, k), R = F.useRef(h);
+  R.current = h;
+  const g = b(async (s, d = {}) => {
+    const u = R.current, { route: c } = x(e, s);
+    if (u != null && u.beforeLeave && c) {
+      const l = await u.beforeLeave(c, u);
+      if (l === !1)
         return;
-      if (typeof d == "string")
-        return g(d, c);
+      if (typeof l == "string")
+        return g(l, d);
     }
-    if (l != null && l.beforeEnter) {
-      const d = await l.beforeEnter(l, f);
-      if (d === !1)
+    if (c != null && c.beforeEnter) {
+      const l = await c.beforeEnter(c, u);
+      if (l === !1)
         return;
-      typeof d == "string" && (s = d);
+      typeof l == "string" && (s = l);
     }
-    const v = a + s;
-    typeof window < "u" && (c.replace ? window.history.replaceState(c.state || {}, "", v) : window.history.pushState(c.state || {}, "", v), x(new URLSearchParams(window.location.search))), h(s);
-  }, [a, o]), E = y(() => {
+    const P = i + s;
+    typeof window < "u" && (d.replace ? window.history.replaceState(d.state || {}, "", P) : window.history.pushState(d.state || {}, "", P), v(new URLSearchParams(window.location.search))), C(s);
+  }, [i, e]), M = b(() => {
     typeof window < "u" && window.history.back();
-  }, []), T = y((s) => {
+  }, []), j = b((s) => {
     g(s, { replace: !0 });
   }, [g]);
-  j(() => {
+  U(() => {
+    if (typeof window > "u") return;
     const s = () => {
-      const c = window.location.pathname.replace(a, "") || "/";
-      h(c), x(new URLSearchParams(window.location.search));
+      C(T(window.location.pathname, i)), v(new URLSearchParams(window.location.search)), z(window.location.hash || "");
     };
-    return window.addEventListener("popstate", s), () => window.removeEventListener("popstate", s);
-  }, [a]);
-  const L = {
-    currentPath: u,
-    basename: a,
+    return s(), window.addEventListener("popstate", s), () => window.removeEventListener("popstate", s);
+  }, [i]);
+  const H = {
+    currentPath: k,
+    basename: i,
     navigate: g,
-    goBack: E,
-    replace: T,
-    params: P,
-    query: w
-  }, C = () => {
-    if (!p)
-      return n ? /* @__PURE__ */ r(n, {}) : /* @__PURE__ */ r("div", { children: "404 - Page Not Found" });
-    const s = p.component, c = /* @__PURE__ */ r(G.Provider, { value: p, children: /* @__PURE__ */ r(s, {}) });
-    return /* @__PURE__ */ r(
-      F,
+    goBack: M,
+    replace: j,
+    params: B,
+    query: W,
+    hash: L
+  }, S = () => {
+    if (!h)
+      return o ? /* @__PURE__ */ t(o, {}) : /* @__PURE__ */ t("div", { children: "404 - Page Not Found" });
+    const s = h.component, d = /* @__PURE__ */ t(K.Provider, { value: h, children: /* @__PURE__ */ t(s, {}) });
+    return /* @__PURE__ */ t(
+      Q,
       {
-        fallback: t || /* @__PURE__ */ r(I, {}),
-        onError: i,
-        children: c
+        fallback: m || /* @__PURE__ */ t(V, {}),
+        onError: y,
+        children: d
       }
     );
   };
-  return /* @__PURE__ */ r(H.Provider, { value: L, children: e ? /* @__PURE__ */ r(A, { fallback: e, children: C() }) : C() });
+  return /* @__PURE__ */ t(q.Provider, { value: H, children: r ? /* @__PURE__ */ t(G, { fallback: r, children: S() }) : S() });
 };
 export {
-  V as R
+  ee as R
 };