@object-ui/layout 2.0.0 → 3.0.0

package/dist/index.js

@@ -1,42 +1,42 @@
-import { ComponentRegistry as R } from "@object-ui/core";
-import ne, { useEffect as oe } from "react";
-import { cn as T, SidebarProvider as se, SidebarInset as le, SidebarTrigger as ce, Sidebar as ie, SidebarContent as ue, SidebarGroup as fe, SidebarGroupLabel as de, SidebarGroupContent as me, SidebarMenu as pe, SidebarMenuItem as be, SidebarMenuButton as xe } from "@object-ui/components";
-import { SchemaRenderer as ye } from "@object-ui/react";
-import { useLocation as ve, NavLink as he } from "react-router-dom";
-var j = { exports: {} }, x = {};
-var W;
-function Ee() {
-  if (W) return x;
-  W = 1;
-  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), c = /* @__PURE__ */ Symbol.for("react.fragment");
-  function a(o, l, n) {
-    var d = null;
-    if (n !== void 0 && (d = "" + n), l.key !== void 0 && (d = "" + l.key), "key" in l) {
-      n = {};
-      for (var m in l)
-        m !== "key" && (n[m] = l[m]);
-    } else n = l;
-    return l = n.ref, {
+import { ComponentRegistry as b } from "@object-ui/core";
+import ae, { useEffect as se } from "react";
+import { cn as h, SidebarProvider as ne, SidebarInset as le, SidebarTrigger as ce, Sidebar as ie, SidebarContent as ue, SidebarGroup as de, SidebarGroupLabel as fe, SidebarGroupContent as me, SidebarMenu as pe, SidebarMenuItem as ge, SidebarMenuButton as xe } from "@object-ui/components";
+import { SchemaRenderer as be } from "@object-ui/react";
+import { useLocation as ye, NavLink as ve } from "react-router-dom";
+var j = { exports: {} }, y = {};
+var G;
+function he() {
+  if (G) return y;
+  G = 1;
+  var r = /* @__PURE__ */ Symbol.for("react.transitional.element"), l = /* @__PURE__ */ Symbol.for("react.fragment");
+  function t(a, n, s) {
+    var f = null;
+    if (s !== void 0 && (f = "" + s), n.key !== void 0 && (f = "" + n.key), "key" in n) {
+      s = {};
+      for (var m in n)
+        m !== "key" && (s[m] = n[m]);
+    } else s = n;
+    return n = s.ref, {
       $$typeof: r,
-      type: o,
-      key: d,
-      ref: l !== void 0 ? l : null,
-      props: n
+      type: a,
+      key: f,
+      ref: n !== void 0 ? n : null,
+      props: s
     };
   }
-  return x.Fragment = c, x.jsx = a, x.jsxs = a, x;
+  return y.Fragment = l, y.jsx = t, y.jsxs = t, y;
 }
-var y = {};
-var q;
-function _e() {
-  return q || (q = 1, process.env.NODE_ENV !== "production" && (function() {
+var v = {};
+var W;
+function Ee() {
+  return W || (W = 1, process.env.NODE_ENV !== "production" && (function() {
     function r(e) {
       if (e == null) return null;
       if (typeof e == "function")
         return e.$$typeof === re ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case g:
+        case S:
           return "Fragment";
         case z:
           return "Profiler";
@@ -60,69 +60,69 @@ function _e() {
           case H:
             return (e._context.displayName || "Context") + ".Consumer";
           case B:
-            var t = e.render;
-            return e = e.displayName, e || (e = t.displayName || t.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
+            var o = e.render;
+            return e = e.displayName, e || (e = o.displayName || o.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case K:
-            return t = e.displayName || null, t !== null ? t : r(e.type) || "Memo";
-          case S:
-            t = e._payload, e = e._init;
+            return o = e.displayName || null, o !== null ? o : r(e.type) || "Memo";
+          case T:
+            o = e._payload, e = e._init;
             try {
-              return r(e(t));
+              return r(e(o));
             } catch {
             }
         }
       return null;
     }
-    function c(e) {
+    function l(e) {
       return "" + e;
     }
-    function a(e) {
+    function t(e) {
       try {
-        c(e);
-        var t = !1;
+        l(e);
+        var o = !1;
       } catch {
-        t = !0;
+        o = !0;
       }
-      if (t) {
-        t = console;
-        var i = t.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
+      if (o) {
+        o = console;
+        var i = o.error, u = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
         return i.call(
-          t,
+          o,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
           u
-        ), c(e);
+        ), l(e);
       }
     }
-    function o(e) {
-      if (e === g) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === S)
+    function a(e) {
+      if (e === S) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === T)
         return "<...>";
       try {
-        var t = r(e);
-        return t ? "<" + t + ">" : "<...>";
+        var o = r(e);
+        return o ? "<" + o + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function l() {
+    function n() {
       var e = P.A;
       return e === null ? null : e.getOwner();
     }
-    function n() {
+    function s() {
       return Error("react-stack-top-frame");
     }
-    function d(e) {
-      if (I.call(e, "key")) {
-        var t = Object.getOwnPropertyDescriptor(e, "key").get;
-        if (t && t.isReactWarning) return !1;
+    function f(e) {
+      if ($.call(e, "key")) {
+        var o = Object.getOwnPropertyDescriptor(e, "key").get;
+        if (o && o.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function m(e, t) {
+    function m(e, o) {
       function i() {
-        Y || (Y = !0, console.error(
+        M || (M = !0, console.error(
           "%s: `key` is not a prop. Trying to access it will result in `undefined` being returned. If you need to access the same value within the child component, you should pass it as a different prop. (https://react.dev/link/special-props)",
-          t
+          o
         ));
       }
       i.isReactWarning = !0, Object.defineProperty(e, "key", {
@@ -130,23 +130,23 @@ function _e() {
         configurable: !0
       });
     }
-    function v() {
+    function g() {
       var e = r(this.type);
-      return L[e] || (L[e] = !0, console.error(
+      return I[e] || (I[e] = !0, console.error(
         "Accessing element.ref was removed in React 19. ref is now a regular prop. It will be removed from the JSX Element type in a future release."
       )), e = this.props.ref, e !== void 0 ? e : null;
     }
-    function h(e, t, i, u, _, A) {
-      var f = i.ref;
+    function E(e, o, i, u, R, A) {
+      var d = i.ref;
       return e = {
-        $$typeof: $,
+        $$typeof: L,
         type: e,
-        key: t,
+        key: o,
         props: i,
         _owner: u
-      }, (f !== void 0 ? f : null) !== null ? Object.defineProperty(e, "ref", {
+      }, (d !== void 0 ? d : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: v
+        get: g
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -161,7 +161,7 @@ function _e() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: _
+        value: R
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
@@ -169,25 +169,25 @@ function _e() {
         value: A
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function p(e, t, i, u, _, A) {
-      var f = t.children;
-      if (f !== void 0)
+    function p(e, o, i, u, R, A) {
+      var d = o.children;
+      if (d !== void 0)
         if (u)
-          if (te(f)) {
-            for (u = 0; u < f.length; u++)
-              O(f[u]);
-            Object.freeze && Object.freeze(f);
+          if (te(d)) {
+            for (u = 0; u < d.length; u++)
+              O(d[u]);
+            Object.freeze && Object.freeze(d);
           } else
             console.error(
               "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
             );
-        else O(f);
-      if (I.call(t, "key")) {
-        f = r(e);
-        var b = Object.keys(t).filter(function(ae) {
-          return ae !== "key";
+        else O(d);
+      if ($.call(o, "key")) {
+        d = r(e);
+        var x = Object.keys(o).filter(function(oe) {
+          return oe !== "key";
         });
-        u = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", D[f + u] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
+        u = 0 < x.length ? "{key: someKey, " + x.join(": ..., ") + ": ...}" : "{key: someKey}", D[d + u] || (x = 0 < x.length ? "{" + x.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -195,201 +195,240 @@ React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
           u,
-          f,
-          b,
-          f
-        ), D[f + u] = !0);
+          d,
+          x,
+          d
+        ), D[d + u] = !0);
       }
-      if (f = null, i !== void 0 && (a(i), f = "" + i), d(t) && (a(t.key), f = "" + t.key), "key" in t) {
+      if (d = null, i !== void 0 && (t(i), d = "" + i), f(o) && (t(o.key), d = "" + o.key), "key" in o) {
         i = {};
-        for (var N in t)
-          N !== "key" && (i[N] = t[N]);
-      } else i = t;
-      return f && m(
+        for (var C in o)
+          C !== "key" && (i[C] = o[C]);
+      } else i = o;
+      return d && m(
         i,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), h(
+      ), E(
         e,
-        f,
+        d,
         i,
-        l(),
-        _,
+        n(),
+        R,
         A
       );
     }
     function O(e) {
-      C(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === S && (e._payload.status === "fulfilled" ? C(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+      w(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === T && (e._payload.status === "fulfilled" ? w(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function C(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === $;
+    function w(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === L;
     }
-    var E = ne, $ = /* @__PURE__ */ Symbol.for("react.transitional.element"), J = /* @__PURE__ */ Symbol.for("react.portal"), g = /* @__PURE__ */ Symbol.for("react.fragment"), V = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), H = /* @__PURE__ */ Symbol.for("react.consumer"), X = /* @__PURE__ */ Symbol.for("react.context"), B = /* @__PURE__ */ Symbol.for("react.forward_ref"), Z = /* @__PURE__ */ Symbol.for("react.suspense"), Q = /* @__PURE__ */ Symbol.for("react.suspense_list"), K = /* @__PURE__ */ Symbol.for("react.memo"), S = /* @__PURE__ */ Symbol.for("react.lazy"), ee = /* @__PURE__ */ Symbol.for("react.activity"), re = /* @__PURE__ */ Symbol.for("react.client.reference"), P = E.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, I = Object.prototype.hasOwnProperty, te = Array.isArray, k = console.createTask ? console.createTask : function() {
+    var _ = ae, L = /* @__PURE__ */ Symbol.for("react.transitional.element"), J = /* @__PURE__ */ Symbol.for("react.portal"), S = /* @__PURE__ */ Symbol.for("react.fragment"), V = /* @__PURE__ */ Symbol.for("react.strict_mode"), z = /* @__PURE__ */ Symbol.for("react.profiler"), H = /* @__PURE__ */ Symbol.for("react.consumer"), X = /* @__PURE__ */ Symbol.for("react.context"), B = /* @__PURE__ */ Symbol.for("react.forward_ref"), Z = /* @__PURE__ */ Symbol.for("react.suspense"), Q = /* @__PURE__ */ Symbol.for("react.suspense_list"), K = /* @__PURE__ */ Symbol.for("react.memo"), T = /* @__PURE__ */ Symbol.for("react.lazy"), ee = /* @__PURE__ */ Symbol.for("react.activity"), re = /* @__PURE__ */ Symbol.for("react.client.reference"), P = _.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, te = Array.isArray, k = console.createTask ? console.createTask : function() {
       return null;
     };
-    E = {
+    _ = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var Y, L = {}, M = E.react_stack_bottom_frame.bind(
-      E,
-      n
-    )(), F = k(o(n)), D = {};
-    y.Fragment = g, y.jsx = function(e, t, i) {
+    var M, I = {}, Y = _.react_stack_bottom_frame.bind(
+      _,
+      s
+    )(), F = k(a(s)), D = {};
+    v.Fragment = S, v.jsx = function(e, o, i) {
       var u = 1e4 > P.recentlyCreatedOwnerStacks++;
       return p(
         e,
-        t,
+        o,
         i,
         !1,
-        u ? Error("react-stack-top-frame") : M,
-        u ? k(o(e)) : F
+        u ? Error("react-stack-top-frame") : Y,
+        u ? k(a(e)) : F
       );
-    }, y.jsxs = function(e, t, i) {
+    }, v.jsxs = function(e, o, i) {
       var u = 1e4 > P.recentlyCreatedOwnerStacks++;
       return p(
         e,
-        t,
+        o,
         i,
         !0,
-        u ? Error("react-stack-top-frame") : M,
-        u ? k(o(e)) : F
+        u ? Error("react-stack-top-frame") : Y,
+        u ? k(a(e)) : F
       );
     };
-  })()), y;
+  })()), v;
 }
-var U;
-function Re() {
-  return U || (U = 1, process.env.NODE_ENV === "production" ? j.exports = Ee() : j.exports = _e()), j.exports;
+var q;
+function _e() {
+  return q || (q = 1, process.env.NODE_ENV === "production" ? j.exports = he() : j.exports = Ee()), j.exports;
 }
-var s = Re();
-function w({
+var c = _e();
+function N({
   title: r,
-  description: c,
-  action: a,
-  className: o,
-  children: l,
-  ...n
+  description: l,
+  action: t,
+  className: a,
+  children: n,
+  ...s
 }) {
-  return /* @__PURE__ */ s.jsx("div", { className: T("flex flex-col gap-4 pb-4 md:pb-8", o), ...n, children: /* @__PURE__ */ s.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
-    /* @__PURE__ */ s.jsxs("div", { className: "flex flex-col gap-1", children: [
-      /* @__PURE__ */ s.jsx("h1", { className: "text-2xl font-bold tracking-tight md:text-3xl", children: r }),
-      c && /* @__PURE__ */ s.jsx("p", { className: "text-sm text-muted-foreground", children: c })
+  return /* @__PURE__ */ c.jsx("div", { className: h("flex flex-col gap-4 pb-4 md:pb-8", a), ...s, children: /* @__PURE__ */ c.jsxs("div", { className: "flex items-center justify-between gap-4", children: [
+    /* @__PURE__ */ c.jsxs("div", { className: "flex flex-col gap-1", children: [
+      /* @__PURE__ */ c.jsx("h1", { className: "text-2xl font-bold tracking-tight md:text-3xl", children: r }),
+      l && /* @__PURE__ */ c.jsx("p", { className: "text-sm text-muted-foreground", children: l })
     ] }),
-    (a || l) && /* @__PURE__ */ s.jsxs("div", { className: "flex items-center gap-2", children: [
-      a,
-      l
+    (t || n) && /* @__PURE__ */ c.jsxs("div", { className: "flex items-center gap-2", children: [
+      t,
+      n
     ] })
   ] }) });
 }
-function G(r) {
-  const c = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);
-  if (!c) return null;
-  const a = parseInt(c[1], 16) / 255, o = parseInt(c[2], 16) / 255, l = parseInt(c[3], 16) / 255, n = Math.max(a, o, l), d = Math.min(a, o, l);
-  let m = 0, v = 0;
-  const h = (n + d) / 2;
-  if (n !== d) {
-    const p = n - d;
-    switch (v = h > 0.5 ? p / (2 - n - d) : p / (n + d), n) {
-      case a:
-        m = ((o - l) / p + (o < l ? 6 : 0)) / 6;
+function U(r) {
+  const l = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(r);
+  if (!l) return null;
+  const t = parseInt(l[1], 16) / 255, a = parseInt(l[2], 16) / 255, n = parseInt(l[3], 16) / 255, s = Math.max(t, a, n), f = Math.min(t, a, n);
+  let m = 0, g = 0;
+  const E = (s + f) / 2;
+  if (s !== f) {
+    const p = s - f;
+    switch (g = E > 0.5 ? p / (2 - s - f) : p / (s + f), s) {
+      case t:
+        m = ((a - n) / p + (a < n ? 6 : 0)) / 6;
         break;
-      case o:
-        m = ((l - a) / p + 2) / 6;
+      case a:
+        m = ((n - t) / p + 2) / 6;
         break;
-      case l:
-        m = ((a - o) / p + 4) / 6;
+      case n:
+        m = ((t - a) / p + 4) / 6;
         break;
     }
   }
-  return `${Math.round(m * 360)} ${Math.round(v * 100)}% ${Math.round(h * 100)}%`;
+  return `${Math.round(m * 360)} ${Math.round(g * 100)}% ${Math.round(E * 100)}%`;
 }
-function je(r, c) {
-  oe(() => {
-    const a = document.documentElement;
+function Re(r, l) {
+  se(() => {
+    const t = document.documentElement;
     if (r?.primaryColor) {
-      const o = G(r.primaryColor);
-      o && (a.style.setProperty("--brand-primary", r.primaryColor), a.style.setProperty("--brand-primary-hsl", o));
+      const a = U(r.primaryColor);
+      a && (t.style.setProperty("--brand-primary", r.primaryColor), t.style.setProperty("--brand-primary-hsl", a));
     } else
-      a.style.removeProperty("--brand-primary"), a.style.removeProperty("--brand-primary-hsl");
+      t.style.removeProperty("--brand-primary"), t.style.removeProperty("--brand-primary-hsl");
     if (r?.accentColor) {
-      const o = G(r.accentColor);
-      o && (a.style.setProperty("--brand-accent", r.accentColor), a.style.setProperty("--brand-accent-hsl", o));
+      const a = U(r.accentColor);
+      a && (t.style.setProperty("--brand-accent", r.accentColor), t.style.setProperty("--brand-accent-hsl", a));
     } else
-      a.style.removeProperty("--brand-accent"), a.style.removeProperty("--brand-accent-hsl");
+      t.style.removeProperty("--brand-accent"), t.style.removeProperty("--brand-accent-hsl");
     if (r?.favicon) {
-      const o = document.querySelector("#favicon") || document.querySelector('link[rel="icon"]');
-      o && (o.href = r.favicon);
+      const a = document.querySelector("#favicon") || document.querySelector('link[rel="icon"]');
+      a && (a.href = r.favicon);
     }
-    return c && (document.title = c), () => {
-      a.style.removeProperty("--brand-primary"), a.style.removeProperty("--brand-primary-hsl"), a.style.removeProperty("--brand-accent"), a.style.removeProperty("--brand-accent-hsl");
+    return l && (document.title = l), () => {
+      t.style.removeProperty("--brand-primary"), t.style.removeProperty("--brand-primary-hsl"), t.style.removeProperty("--brand-accent"), t.style.removeProperty("--brand-accent-hsl");
     };
-  }, [r?.primaryColor, r?.accentColor, r?.favicon, c]);
+  }, [r?.primaryColor, r?.accentColor, r?.favicon, l]);
 }
-function Te({
+function je({
   sidebar: r,
-  navbar: c,
-  children: a,
-  className: o,
-  defaultOpen: l = !0,
-  branding: n
+  navbar: l,
+  children: t,
+  className: a,
+  defaultOpen: n = !0,
+  branding: s
 }) {
-  return je(n, n?.title), /* @__PURE__ */ s.jsxs(se, { defaultOpen: l, children: [
+  return Re(s, s?.title), /* @__PURE__ */ c.jsxs(ne, { defaultOpen: n, children: [
     r,
-    /* @__PURE__ */ s.jsxs(le, { children: [
-      /* @__PURE__ */ s.jsxs("header", { className: "flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4", children: [
-        /* @__PURE__ */ s.jsx(ce, { className: "-ml-1" }),
-        /* @__PURE__ */ s.jsx("div", { className: "w-px h-4 bg-border mx-1 sm:mx-2" }),
-        c
+    /* @__PURE__ */ c.jsxs(le, { children: [
+      /* @__PURE__ */ c.jsxs("header", { className: "flex h-14 sm:h-16 shrink-0 items-center gap-2 border-b bg-background px-2 sm:px-4", children: [
+        /* @__PURE__ */ c.jsx(ce, { className: "-ml-1" }),
+        /* @__PURE__ */ c.jsx("div", { className: "w-px h-4 bg-border mx-1 sm:mx-2" }),
+        l
       ] }),
-      /* @__PURE__ */ s.jsx("main", { className: T("flex-1 overflow-auto p-3 sm:p-4 md:p-6", o), children: a })
+      /* @__PURE__ */ c.jsx("main", { className: h("flex-1 overflow-auto p-3 sm:p-4 md:p-6", a), children: t })
     ] })
   ] });
 }
-function ge({ className: r, children: c, ...a }) {
-  return /* @__PURE__ */ s.jsx("div", { className: T("rounded-xl border bg-card text-card-foreground shadow", r), ...a, children: /* @__PURE__ */ s.jsx("div", { className: "p-6", children: c }) });
+function Se({ className: r, children: l, ...t }) {
+  return /* @__PURE__ */ c.jsx("div", { className: h("rounded-xl border bg-card text-card-foreground shadow", r), ...t, children: /* @__PURE__ */ c.jsx("div", { className: "p-6", children: l }) });
+}
+const Te = {
+  xs: { 1: "grid-cols-1", 2: "grid-cols-2", 3: "grid-cols-3", 4: "grid-cols-4", 6: "grid-cols-6", 12: "grid-cols-12" },
+  sm: { 1: "sm:grid-cols-1", 2: "sm:grid-cols-2", 3: "sm:grid-cols-3", 4: "sm:grid-cols-4", 6: "sm:grid-cols-6", 12: "sm:grid-cols-12" },
+  md: { 1: "md:grid-cols-1", 2: "md:grid-cols-2", 3: "md:grid-cols-3", 4: "md:grid-cols-4", 6: "md:grid-cols-6", 12: "md:grid-cols-12" },
+  lg: { 1: "lg:grid-cols-1", 2: "lg:grid-cols-2", 3: "lg:grid-cols-3", 4: "lg:grid-cols-4", 6: "lg:grid-cols-6", 12: "lg:grid-cols-12" },
+  xl: { 1: "xl:grid-cols-1", 2: "xl:grid-cols-2", 3: "xl:grid-cols-3", 4: "xl:grid-cols-4", 6: "xl:grid-cols-6", 12: "xl:grid-cols-12" },
+  "2xl": { 1: "2xl:grid-cols-1", 2: "2xl:grid-cols-2", 3: "2xl:grid-cols-3", 4: "2xl:grid-cols-4", 6: "2xl:grid-cols-6", 12: "2xl:grid-cols-12" }
+};
+function Pe(r) {
+  if (!r) return "grid-cols-1";
+  const l = [];
+  for (const [t, a] of Object.entries(r)) {
+    const n = Te[t];
+    if (n && a) {
+      const f = Object.keys(n).map(Number).reduce(
+        (m, g) => Math.abs(g - a) < Math.abs(m - a) ? g : m
+      );
+      l.push(n[f]);
+    }
+  }
+  return l.join(" ") || "grid-cols-1";
 }
-const Se = (r) => r ? Array.isArray(r) ? r : [r] : [];
-function Ce({ schema: r, className: c, style: a, id: o, ...l }) {
-  const n = Se(r.children);
-  return /* @__PURE__ */ s.jsxs(
+const ke = {
+  0: "gap-0",
+  1: "gap-1",
+  2: "gap-2",
+  3: "gap-3",
+  4: "gap-4",
+  5: "gap-5",
+  6: "gap-6",
+  8: "gap-8"
+}, Ae = ({
+  columns: r,
+  gap: l = 4,
+  className: t,
+  children: a
+}) => {
+  const n = Pe(r), s = typeof l == "number" ? ke[l] || `gap-${l}` : "";
+  return /* @__PURE__ */ c.jsx("div", { className: h("grid", n, s, t), children: a });
+}, Ce = (r) => r ? Array.isArray(r) ? r : [r] : [];
+function Ie({ schema: r, className: l, style: t, id: a, ...n }) {
+  const s = Ce(r.children);
+  return /* @__PURE__ */ c.jsxs(
     "div",
     {
-      id: o || r.id,
-      className: T("flex flex-col h-full space-y-4", c),
-      style: a,
+      id: a || r.id,
+      className: h("flex flex-col h-full space-y-4", l),
+      style: t,
       children: [
-        /* @__PURE__ */ s.jsx(
-          w,
+        /* @__PURE__ */ c.jsx(
+          N,
           {
             title: r.title,
             description: r.description
           }
         ),
-        /* @__PURE__ */ s.jsx("div", { className: "flex-1 overflow-auto", children: n.map((d, m) => /* @__PURE__ */ s.jsx(
-          ye,
+        /* @__PURE__ */ c.jsx("div", { className: "flex-1 overflow-auto", children: s.map((f, m) => /* @__PURE__ */ c.jsx(
+          be,
           {
-            schema: d,
-            ...l
+            schema: f,
+            ...n
           },
-          d?.id || m
+          f?.id || m
         )) })
       ]
     }
   );
 }
-function $e({ items: r, title: c = "Application", className: a, collapsible: o = "icon" }) {
-  const l = ve();
-  return /* @__PURE__ */ s.jsx(ie, { className: a, collapsible: o, children: /* @__PURE__ */ s.jsx(ue, { children: /* @__PURE__ */ s.jsxs(fe, { children: [
-    /* @__PURE__ */ s.jsx(de, { children: c }),
-    /* @__PURE__ */ s.jsx(me, { children: /* @__PURE__ */ s.jsx(pe, { children: r.map((n) => /* @__PURE__ */ s.jsx(be, { children: /* @__PURE__ */ s.jsx(xe, { asChild: !0, isActive: l.pathname === n.href, children: /* @__PURE__ */ s.jsxs(he, { to: n.href, children: [
-      n.icon && /* @__PURE__ */ s.jsx(n.icon, {}),
-      /* @__PURE__ */ s.jsx("span", { children: n.title })
-    ] }) }) }, n.href)) }) })
+function Ye({ items: r, title: l = "Application", className: t, collapsible: a = "icon" }) {
+  const n = ye();
+  return /* @__PURE__ */ c.jsx(ie, { className: t, collapsible: a, children: /* @__PURE__ */ c.jsx(ue, { children: /* @__PURE__ */ c.jsxs(de, { children: [
+    /* @__PURE__ */ c.jsx(fe, { children: l }),
+    /* @__PURE__ */ c.jsx(me, { children: /* @__PURE__ */ c.jsx(pe, { children: r.map((s) => /* @__PURE__ */ c.jsx(ge, { children: /* @__PURE__ */ c.jsx(xe, { asChild: !0, isActive: n.pathname === s.href, children: /* @__PURE__ */ c.jsxs(ve, { to: s.href, children: [
+      s.icon && /* @__PURE__ */ c.jsx(s.icon, {}),
+      /* @__PURE__ */ c.jsx("span", { children: s.title })
+    ] }) }) }, s.href)) }) })
   ] }) }) });
 }
-function Pe() {
-  R.register("page-header", w, {
+function Ne() {
+  b.register("page-header", N, {
     namespace: "layout",
     label: "Page Header",
     category: "Layout",
@@ -397,27 +436,37 @@ function Pe() {
       { name: "title", type: "string" },
       { name: "description", type: "string" }
     ]
-  }), R.register("page:header", w, { namespace: "layout" }), R.register("page:card", ge, {
+  }), b.register("page:header", N, { namespace: "layout" }), b.register("page:card", Se, {
     namespace: "layout",
     label: "Page Card",
     category: "Layout",
     isContainer: !0
-  }), R.register("app-shell", Te, {
+  }), b.register("app-shell", je, {
     namespace: "layout",
     label: "App Shell",
     category: "Layout"
+  }), b.register("responsive-grid", Ae, {
+    namespace: "layout",
+    label: "Responsive Grid",
+    category: "Layout",
+    isContainer: !0,
+    inputs: [
+      { name: "columns", type: "object" },
+      { name: "gap", type: "number" }
+    ]
   });
 }
 try {
-  Pe();
+  Ne();
 } catch {
 }
 export {
-  Te as AppShell,
-  Ce as Page,
-  ge as PageCard,
-  w as PageHeader,
-  $e as SidebarNav,
-  Pe as registerLayout,
-  je as useAppShellBranding
+  je as AppShell,
+  Ie as Page,
+  Se as PageCard,
+  N as PageHeader,
+  Ae as ResponsiveGrid,
+  Ye as SidebarNav,
+  Ne as registerLayout,
+  Re as useAppShellBranding
 };