@orbit_ui_toolkit/orbitui-kit 0.1.1 → 0.1.2

package/dist/orbitui.es.js

@@ -1,44 +1,44 @@
-import G, { useState as te } from "react";
+import z, { useState as te } from "react";
 var R = { exports: {} }, C = {};
-var F;
+var G;
 function se() {
-  if (F) return C;
-  F = 1;
-  var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), n = /* @__PURE__ */ Symbol.for("react.fragment");
-  function l(t, o, a) {
-    var d = null;
-    if (a !== void 0 && (d = "" + a), o.key !== void 0 && (d = "" + o.key), "key" in o) {
-      a = {};
-      for (var c in o)
-        c !== "key" && (a[c] = o[c]);
-    } else a = o;
-    return o = a.ref, {
+  if (G) return C;
+  G = 1;
+  var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), o = /* @__PURE__ */ Symbol.for("react.fragment");
+  function i(t, l, n) {
+    var a = null;
+    if (n !== void 0 && (a = "" + n), l.key !== void 0 && (a = "" + l.key), "key" in l) {
+      n = {};
+      for (var c in l)
+        c !== "key" && (n[c] = l[c]);
+    } else n = l;
+    return l = n.ref, {
       $$typeof: s,
       type: t,
-      key: d,
-      ref: o !== void 0 ? o : null,
-      props: a
+      key: a,
+      ref: l !== void 0 ? l : null,
+      props: n
     };
   }
-  return C.Fragment = n, C.jsx = l, C.jsxs = l, C;
+  return C.Fragment = o, C.jsx = i, C.jsxs = i, C;
 }
-var _ = {};
-var U;
+var $ = {};
+var H;
 function ne() {
-  return U || (U = 1, process.env.NODE_ENV !== "production" && (function() {
+  return H || (H = 1, process.env.NODE_ENV !== "production" && (function() {
     function s(r) {
       if (r == null) return null;
       if (typeof r == "function")
         return r.$$typeof === K ? null : r.displayName || r.name || null;
       if (typeof r == "string") return r;
       switch (r) {
-        case k:
+        case j:
           return "Fragment";
-        case M:
+        case _:
           return "Profiler";
-        case L:
+        case T:
           return "StrictMode";
-        case J:
+        case q:
           return "Suspense";
         case Z:
           return "SuspenseList";
@@ -51,98 +51,98 @@ function ne() {
         ), r.$$typeof) {
           case N:
             return "Portal";
-          case H:
+          case S:
             return r.displayName || "Context";
-          case $:
+          case W:
             return (r._context.displayName || "Context") + ".Consumer";
-          case q:
-            var i = r.render;
-            return r = r.displayName, r || (r = i.displayName || i.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
+          case I:
+            var d = r.render;
+            return r = r.displayName, r || (r = d.displayName || d.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
           case X:
-            return i = r.displayName || null, i !== null ? i : s(r.type) || "Memo";
-          case T:
-            i = r._payload, r = r._init;
+            return d = r.displayName || null, d !== null ? d : s(r.type) || "Memo";
+          case A:
+            d = r._payload, r = r._init;
             try {
-              return s(r(i));
+              return s(r(d));
             } catch {
             }
         }
       return null;
     }
-    function n(r) {
+    function o(r) {
       return "" + r;
     }
-    function l(r) {
+    function i(r) {
       try {
-        n(r);
-        var i = !1;
+        o(r);
+        var d = !1;
       } catch {
-        i = !0;
+        d = !0;
       }
-      if (i) {
-        i = console;
-        var u = i.error, x = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
-        return u.call(
-          i,
+      if (d) {
+        d = console;
+        var x = d.error, h = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
+        return x.call(
+          d,
           "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
-          x
-        ), n(r);
+          h
+        ), o(r);
       }
     }
     function t(r) {
-      if (r === k) return "<>";
-      if (typeof r == "object" && r !== null && r.$$typeof === T)
+      if (r === j) return "<>";
+      if (typeof r == "object" && r !== null && r.$$typeof === A)
         return "<...>";
       try {
-        var i = s(r);
-        return i ? "<" + i + ">" : "<...>";
+        var d = s(r);
+        return d ? "<" + d + ">" : "<...>";
       } catch {
         return "<...>";
       }
     }
-    function o() {
-      var r = S.A;
+    function l() {
+      var r = O.A;
       return r === null ? null : r.getOwner();
     }
-    function a() {
+    function n() {
       return Error("react-stack-top-frame");
     }
-    function d(r) {
-      if (z.call(r, "key")) {
-        var i = Object.getOwnPropertyDescriptor(r, "key").get;
-        if (i && i.isReactWarning) return !1;
+    function a(r) {
+      if (B.call(r, "key")) {
+        var d = Object.getOwnPropertyDescriptor(r, "key").get;
+        if (d && d.isReactWarning) return !1;
       }
       return r.key !== void 0;
     }
-    function c(r, i) {
-      function u() {
-        W || (W = !0, console.error(
+    function c(r, d) {
+      function x() {
+        D || (D = !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)",
-          i
+          d
         ));
       }
-      u.isReactWarning = !0, Object.defineProperty(r, "key", {
-        get: u,
+      x.isReactWarning = !0, Object.defineProperty(r, "key", {
+        get: x,
         configurable: !0
       });
     }
-    function f() {
+    function u() {
       var r = s(this.type);
-      return I[r] || (I[r] = !0, console.error(
+      return Y[r] || (Y[r] = !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."
       )), r = this.props.ref, r !== void 0 ? r : null;
     }
-    function g(r, i, u, x, E, O) {
-      var m = u.ref;
+    function f(r, d, x, h, E, L) {
+      var m = x.ref;
       return r = {
-        $$typeof: v,
+        $$typeof: y,
         type: r,
-        key: i,
-        props: u,
-        _owner: x
+        key: d,
+        props: x,
+        _owner: h
       }, (m !== void 0 ? m : null) !== null ? Object.defineProperty(r, "ref", {
         enumerable: !1,
-        get: f
+        get: u
       }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -162,117 +162,118 @@ function ne() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: O
+        value: L
       }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
     }
-    function p(r, i, u, x, E, O) {
-      var m = i.children;
+    function b(r, d, x, h, E, L) {
+      var m = d.children;
       if (m !== void 0)
-        if (x)
+        if (h)
           if (ee(m)) {
-            for (x = 0; x < m.length; x++)
-              b(m[x]);
+            for (h = 0; h < m.length; h++)
+              p(m[h]);
             Object.freeze && Object.freeze(m);
           } 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 b(m);
-      if (z.call(i, "key")) {
+        else p(m);
+      if (B.call(d, "key")) {
         m = s(r);
-        var y = Object.keys(i).filter(function(re) {
+        var w = Object.keys(d).filter(function(re) {
           return re !== "key";
         });
-        x = 0 < y.length ? "{key: someKey, " + y.join(": ..., ") + ": ...}" : "{key: someKey}", Y[m + x] || (y = 0 < y.length ? "{" + y.join(": ..., ") + ": ...}" : "{}", console.error(
+        h = 0 < w.length ? "{key: someKey, " + w.join(": ..., ") + ": ...}" : "{key: someKey}", V[m + h] || (w = 0 < w.length ? "{" + w.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
 React keys must be passed directly to JSX without using spread:
   let props = %s;
   <%s key={someKey} {...props} />`,
-          x,
+          h,
           m,
-          y,
+          w,
           m
-        ), Y[m + x] = !0);
+        ), V[m + h] = !0);
       }
-      if (m = null, u !== void 0 && (l(u), m = "" + u), d(i) && (l(i.key), m = "" + i.key), "key" in i) {
-        u = {};
-        for (var P in i)
-          P !== "key" && (u[P] = i[P]);
-      } else u = i;
+      if (m = null, x !== void 0 && (i(x), m = "" + x), a(d) && (i(d.key), m = "" + d.key), "key" in d) {
+        x = {};
+        for (var M in d)
+          M !== "key" && (x[M] = d[M]);
+      } else x = d;
       return m && c(
-        u,
+        x,
         typeof r == "function" ? r.displayName || r.name || "Unknown" : r
-      ), g(
+      ), f(
         r,
         m,
-        u,
-        o(),
+        x,
+        l(),
         E,
-        O
+        L
       );
     }
-    function b(r) {
-      j(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === T && (r._payload.status === "fulfilled" ? j(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
+    function p(r) {
+      v(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === A && (r._payload.status === "fulfilled" ? v(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
     }
-    function j(r) {
-      return typeof r == "object" && r !== null && r.$$typeof === v;
+    function v(r) {
+      return typeof r == "object" && r !== null && r.$$typeof === y;
     }
-    var h = G, v = /* @__PURE__ */ Symbol.for("react.transitional.element"), N = /* @__PURE__ */ Symbol.for("react.portal"), k = /* @__PURE__ */ Symbol.for("react.fragment"), L = /* @__PURE__ */ Symbol.for("react.strict_mode"), M = /* @__PURE__ */ Symbol.for("react.profiler"), $ = /* @__PURE__ */ Symbol.for("react.consumer"), H = /* @__PURE__ */ Symbol.for("react.context"), q = /* @__PURE__ */ Symbol.for("react.forward_ref"), J = /* @__PURE__ */ Symbol.for("react.suspense"), Z = /* @__PURE__ */ Symbol.for("react.suspense_list"), X = /* @__PURE__ */ Symbol.for("react.memo"), T = /* @__PURE__ */ Symbol.for("react.lazy"), Q = /* @__PURE__ */ Symbol.for("react.activity"), K = /* @__PURE__ */ Symbol.for("react.client.reference"), S = h.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, z = Object.prototype.hasOwnProperty, ee = Array.isArray, A = console.createTask ? console.createTask : function() {
+    var g = z, y = /* @__PURE__ */ Symbol.for("react.transitional.element"), N = /* @__PURE__ */ Symbol.for("react.portal"), j = /* @__PURE__ */ Symbol.for("react.fragment"), T = /* @__PURE__ */ Symbol.for("react.strict_mode"), _ = /* @__PURE__ */ Symbol.for("react.profiler"), W = /* @__PURE__ */ Symbol.for("react.consumer"), S = /* @__PURE__ */ Symbol.for("react.context"), I = /* @__PURE__ */ Symbol.for("react.forward_ref"), q = /* @__PURE__ */ Symbol.for("react.suspense"), Z = /* @__PURE__ */ Symbol.for("react.suspense_list"), X = /* @__PURE__ */ Symbol.for("react.memo"), A = /* @__PURE__ */ Symbol.for("react.lazy"), Q = /* @__PURE__ */ Symbol.for("react.activity"), K = /* @__PURE__ */ Symbol.for("react.client.reference"), O = g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, B = Object.prototype.hasOwnProperty, ee = Array.isArray, P = console.createTask ? console.createTask : function() {
       return null;
     };
-    h = {
+    g = {
       react_stack_bottom_frame: function(r) {
         return r();
       }
     };
-    var W, I = {}, B = h.react_stack_bottom_frame.bind(
-      h,
-      a
-    )(), D = A(t(a)), Y = {};
-    _.Fragment = k, _.jsx = function(r, i, u) {
-      var x = 1e4 > S.recentlyCreatedOwnerStacks++;
-      return p(
+    var D, Y = {}, F = g.react_stack_bottom_frame.bind(
+      g,
+      n
+    )(), U = P(t(n)), V = {};
+    $.Fragment = j, $.jsx = function(r, d, x) {
+      var h = 1e4 > O.recentlyCreatedOwnerStacks++;
+      return b(
         r,
-        i,
-        u,
+        d,
+        x,
         !1,
-        x ? Error("react-stack-top-frame") : B,
-        x ? A(t(r)) : D
+        h ? Error("react-stack-top-frame") : F,
+        h ? P(t(r)) : U
       );
-    }, _.jsxs = function(r, i, u) {
-      var x = 1e4 > S.recentlyCreatedOwnerStacks++;
-      return p(
+    }, $.jsxs = function(r, d, x) {
+      var h = 1e4 > O.recentlyCreatedOwnerStacks++;
+      return b(
         r,
-        i,
-        u,
+        d,
+        x,
         !0,
-        x ? Error("react-stack-top-frame") : B,
-        x ? A(t(r)) : D
+        h ? Error("react-stack-top-frame") : F,
+        h ? P(t(r)) : U
       );
     };
-  })()), _;
+  })()), $;
 }
-var V;
+var J;
 function oe() {
-  return V || (V = 1, process.env.NODE_ENV === "production" ? R.exports = se() : R.exports = ne()), R.exports;
+  return J || (J = 1, process.env.NODE_ENV === "production" ? R.exports = se() : R.exports = ne()), R.exports;
 }
 var e = oe();
-const w = ({
+const k = ({
   variant: s = "primary",
-  size: n = "md",
-  rounded: l = "full",
+  size: o = "md",
+  rounded: i = "full",
   isLoading: t = !1,
-  fullWidth: o = !1,
-  leftIcon: a,
-  rightIcon: d,
+  fullWidth: l = !1,
+  leftIcon: n,
+  rightIcon: a,
   className: c = "",
-  children: f,
-  disabled: g,
+  children: u,
+  disabled: f,
+  gradient: b,
   ...p
 }) => {
-  const b = "inline-flex items-center justify-center font-medium disabled:opacity-50 disabled:pointer-events-none transition-colors duration-150", j = {
+  const v = "inline-flex items-center justify-center font-medium disabled:opacity-50 disabled:pointer-events-none transition-colors duration-150", g = {
     primary: "bg-[#0070f3] text-white hover:bg-[#0060df] border border-transparent",
     secondary: "bg-transparent text-[#0070f3] border border-[#0070f3] hover:bg-blue-50",
     // White with Blue Border
@@ -282,114 +283,134 @@ const w = ({
     // Burnt Orange/Red
     link: "bg-transparent text-[#0070f3] hover:underline px-0 py-0 h-auto border-none",
     // Text only
-    ghost: "bg-transparent text-gray-700 hover:bg-gray-100 border-transparent"
+    ghost: "bg-transparent text-gray-700 hover:bg-gray-100 border-transparent",
     // Transparent with hover bg
-  }, h = {
+    gradient: `text-white border-none hover:opacity-90 active:scale-95 ${b || "bg-gradient-to-r from-red-500 to-pink-500"}`
+  }, y = {
     sm: "px-4 py-1.5 text-xs gap-1.5 min-w-[80px]",
-    md: "px-6 py-2 text-sm gap-2 min-w-[100px]",
-    lg: "px-8 py-3 text-base gap-2 min-w-[120px]",
+    md: "px-6 py-2.5 text-sm gap-2 min-w-[100px]",
+    lg: "px-8 py-3.5 text-lg gap-2 min-w-[120px]",
     icon: "w-10 h-10 p-0 min-w-0"
-  }, v = {
+  }, N = {
     none: "rounded-none",
     sm: "rounded-sm",
     md: "rounded-md",
     lg: "rounded-lg",
     full: "rounded-full"
-  }, N = o ? "w-full" : "";
+  }, j = l ? "w-full" : "";
   return /* @__PURE__ */ e.jsxs(
     "button",
     {
-      className: `${b} ${j[s]} ${h[n]} ${v[l]} ${N} ${c}`,
-      disabled: g || t,
+      className: `${v} ${g[s]} ${y[o]} ${N[i]} ${j} ${c}`,
+      disabled: f || t,
       ...p,
       children: [
         t && /* @__PURE__ */ e.jsxs("svg", { className: "animate-spin -ml-1 mr-2 h-4 w-4", xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", children: [
           /* @__PURE__ */ e.jsx("circle", { className: "opacity-25", cx: "12", cy: "12", r: "10", stroke: "currentColor", strokeWidth: "4" }),
           /* @__PURE__ */ e.jsx("path", { className: "opacity-75", fill: "currentColor", d: "M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z" })
         ] }),
-        !t && a && /* @__PURE__ */ e.jsx("span", { className: "shrink-0", children: a }),
-        /* @__PURE__ */ e.jsx("span", { className: "truncate", children: t ? "Loading..." : f }),
-        !t && d && /* @__PURE__ */ e.jsx("span", { className: "shrink-0", children: d })
+        !t && n && /* @__PURE__ */ e.jsx("span", { className: "shrink-0", children: n }),
+        /* @__PURE__ */ e.jsx("span", { className: "truncate", children: t ? "Loading..." : u }),
+        !t && a && /* @__PURE__ */ e.jsx("span", { className: "shrink-0", children: a })
       ]
     }
   );
-}, de = ({
+}, le = z.forwardRef(({
   label: s,
-  error: n,
-  leftIcon: l,
+  error: o,
+  leftIcon: i,
   rightIcon: t,
-  className: o = "",
+  variant: l = "default",
+  className: n = "",
   ...a
-}) => /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
-  s && /* @__PURE__ */ e.jsx("label", { className: "text-sm font-medium text-gray-700", children: s }),
-  /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
-    l && /* @__PURE__ */ e.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400", children: l }),
-    /* @__PURE__ */ e.jsx(
-      "input",
-      {
-        className: `
+}, c) => {
+  const u = {
+    default: "bg-white border-gray-300 text-gray-900 focus:ring-blue-500",
+    glass: "bg-black/30 border-gray-600 text-white placeholder-gray-400 focus:ring-pink-500 focus:border-pink-500",
+    dark: "bg-gray-900 border-gray-800 text-white focus:ring-blue-500"
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
+    s && /* @__PURE__ */ e.jsx("label", { className: `text-sm font-medium ${l === "default" ? "text-gray-700" : "text-gray-300"}`, children: s }),
+    /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
+      i && /* @__PURE__ */ e.jsx("div", { className: "absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none text-gray-400", children: i }),
+      /* @__PURE__ */ e.jsx(
+        "input",
+        {
+          ref: c,
+          className: `
                         w-full 
-                        ${l ? "pl-10" : "px-3"} 
+                        ${i ? "pl-10" : "px-3"} 
                         ${t ? "pr-10" : "px-3"} 
-                        py-2 
-                        bg-white 
+                        py-3 
                         border 
-                        ${n ? "border-red-500" : "border-gray-300"} 
-                        rounded-md 
+                        ${o ? "border-red-500" : ""} 
+                        rounded-lg 
                         shadow-sm 
                         focus:outline-none 
                         focus:ring-2 
-                        ${n ? "focus:ring-red-500" : "focus:ring-blue-500"} 
+                        ${o ? "focus:ring-red-500" : ""} 
                         focus:border-transparent 
                         transition-all 
                         duration-200 
-                        hover:border-gray-400 
-                        ${o}
+                        ${u[l]}
+                        ${n}
                     `,
-        ...a
-      }
-    ),
-    t && /* @__PURE__ */ e.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400", children: t })
-  ] }),
-  n && /* @__PURE__ */ e.jsx("span", { className: "text-xs text-red-500", children: n })
-] }), ue = ({
+          ...a
+        }
+      ),
+      t && /* @__PURE__ */ e.jsx("div", { className: "absolute inset-y-0 right-0 pr-3 flex items-center text-gray-400", children: t })
+    ] }),
+    o && /* @__PURE__ */ e.jsx("span", { className: "text-xs text-red-500", children: o })
+  ] });
+});
+le.displayName = "Input";
+const ue = ({
   title: s,
-  subtitle: n,
-  children: l,
+  subtitle: o,
+  children: i,
   footer: t,
-  className: o = ""
-}) => /* @__PURE__ */ e.jsxs("div", { className: `bg-white rounded-xl border border-gray-200 shadow-sm overflow-hidden ${o}`, children: [
-  (s || n) && /* @__PURE__ */ e.jsxs("div", { className: "px-6 py-4 border-b border-gray-100", children: [
-    s && /* @__PURE__ */ e.jsx("h3", { className: "text-lg font-semibold text-gray-900", children: s }),
-    n && /* @__PURE__ */ e.jsx("p", { className: "text-sm text-gray-500 mt-1", children: n })
-  ] }),
-  /* @__PURE__ */ e.jsx("div", { className: "px-6 py-4", children: l }),
-  t && /* @__PURE__ */ e.jsx("div", { className: "px-6 py-4 bg-gray-50 border-t border-gray-100", children: t })
-] }), xe = ({
+  className: l = "",
+  variant: n = "default",
+  noPadding: a = !1
+}) => {
+  const c = {
+    default: "bg-white border-gray-200 shadow-sm",
+    glass: "bg-black/40 backdrop-blur-lg border-gray-800 shadow-lg",
+    transparent: "bg-transparent border-none shadow-none"
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: `rounded-xl border overflow-hidden transition-all duration-300 ${c[n]} ${l}`, children: [
+    (s || o) && /* @__PURE__ */ e.jsxs("div", { className: `px-6 py-4 border-b ${n === "glass" ? "border-gray-800" : "border-gray-100"}`, children: [
+      s && /* @__PURE__ */ e.jsx("h3", { className: `text-lg font-semibold ${n === "glass" ? "text-white" : "text-gray-900"}`, children: s }),
+      o && /* @__PURE__ */ e.jsx("p", { className: `text-sm mt-1 ${n === "glass" ? "text-gray-400" : "text-gray-500"}`, children: o })
+    ] }),
+    /* @__PURE__ */ e.jsx("div", { className: a ? "" : "px-6 py-4", children: i }),
+    t && /* @__PURE__ */ e.jsx("div", { className: `px-6 py-4 border-t ${n === "glass" ? "bg-black/20 border-gray-800" : "bg-gray-50 border-gray-100"}`, children: t })
+  ] });
+}, xe = ({
   username: s,
-  profilePic: n,
-  postImage: l,
+  profilePic: o,
+  postImage: i,
   likesCount: t,
-  caption: o,
-  location: a,
-  isLiked: d = !1,
+  caption: l,
+  location: n,
+  isLiked: a = !1,
   isBookmarked: c = !1,
-  onLike: f,
-  onComment: g,
-  onShare: p,
-  onBookmark: b
+  onLike: u,
+  onComment: f,
+  onShare: b,
+  onBookmark: p
 }) => /* @__PURE__ */ e.jsxs("div", { className: "group relative max-w-[420px] mx-auto bg-white rounded-3xl overflow-hidden shadow-sm hover:shadow-xl transition-all duration-300 border border-gray-100/50", children: [
   /* @__PURE__ */ e.jsxs("div", { className: "relative w-full aspect-4/5 bg-gray-100 overflow-hidden", children: [
     /* @__PURE__ */ e.jsx(
       "img",
       {
-        src: l,
+        src: i,
         alt: "Post content",
         className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
       }
     ),
     /* @__PURE__ */ e.jsx("div", { className: "absolute top-4 right-4 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ e.jsx(
-      w,
+      k,
       {
         variant: "ghost",
         size: "icon",
@@ -409,46 +430,46 @@ const w = ({
         /* @__PURE__ */ e.jsx("div", { className: "relative", children: /* @__PURE__ */ e.jsx(
           "img",
           {
-            src: n,
+            src: o,
             alt: s,
             className: "w-10 h-10 rounded-full object-cover ring-2 ring-offset-2 ring-indigo-500"
           }
         ) }),
         /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col", children: [
           /* @__PURE__ */ e.jsx("span", { className: "font-bold text-gray-900 text-sm leading-tight hover:text-indigo-600 cursor-pointer transition-colors", children: s }),
-          a && /* @__PURE__ */ e.jsx("span", { className: "text-[11px] font-medium text-gray-400 uppercase tracking-wide", children: a })
+          n && /* @__PURE__ */ e.jsx("span", { className: "text-[11px] font-medium text-gray-400 uppercase tracking-wide", children: n })
         ] })
       ] }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ e.jsx(
-          w,
+          k,
           {
             variant: "ghost",
             size: "icon",
             rounded: "full",
-            onClick: f,
-            className: `transition-colors ${d ? "text-rose-500 hover:bg-rose-50" : "text-gray-400 hover:text-rose-500"}`,
-            children: d ? /* @__PURE__ */ e.jsx("svg", { "aria-label": "Unlike", fill: "currentColor", height: "26", role: "img", viewBox: "0 0 48 48", width: "26", children: /* @__PURE__ */ e.jsx("path", { d: "M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 14.9 17.8 29.1 23.9 30.2h.2c6.1-1.1 23.9-15.3 23.9-30.2 0-8-6-14.5-13.4-14.5z" }) }) : /* @__PURE__ */ e.jsx("svg", { "aria-label": "Like", fill: "currentColor", height: "26", role: "img", viewBox: "0 0 24 24", width: "26", children: /* @__PURE__ */ e.jsx("path", { d: "M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.194 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.252.342.392.545.517.545s.265-.203.517-.545a4.21 4.21 0 0 1 3.675-1.941m0-2a6.21 6.21 0 0 0-5.292 2.768 6.21 6.21 0 0 0-5.292-2.768 6.989 6.989 0 0 0-6.708 7.218c0 4.19 2.923 6.64 5.642 9.066 2.057 1.838 4.19 3.744 5.358 5.485.474-.707 2.112-2.298 5.358-5.188 2.308-2.053 5.358-4.706 5.358-9.363a6.989 6.989 0 0 0-6.708-7.218Z" }) })
+            onClick: u,
+            className: `transition-colors ${a ? "text-rose-500 hover:bg-rose-50" : "text-gray-400 hover:text-rose-500"}`,
+            children: a ? /* @__PURE__ */ e.jsx("svg", { "aria-label": "Unlike", fill: "currentColor", height: "26", role: "img", viewBox: "0 0 48 48", width: "26", children: /* @__PURE__ */ e.jsx("path", { d: "M34.6 3.1c-4.5 0-7.9 1.8-10.6 5.6-2.7-3.7-6.1-5.5-10.6-5.5C6 3.1 0 9.6 0 17.6c0 14.9 17.8 29.1 23.9 30.2h.2c6.1-1.1 23.9-15.3 23.9-30.2 0-8-6-14.5-13.4-14.5z" }) }) : /* @__PURE__ */ e.jsx("svg", { "aria-label": "Like", fill: "currentColor", height: "26", role: "img", viewBox: "0 0 24 24", width: "26", children: /* @__PURE__ */ e.jsx("path", { d: "M16.792 3.904A4.989 4.989 0 0 1 21.5 9.122c0 3.072-2.652 4.959-5.197 7.222-2.512 2.243-3.865 3.469-4.303 3.752-.477-.309-2.143-1.823-4.303-3.752C5.141 14.072 2.5 12.194 2.5 9.122a4.989 4.989 0 0 1 4.708-5.218 4.21 4.21 0 0 1 3.675 1.941c.252.342.392.545.517.545s.265-.203.517-.545a4.21 4.21 0 0 1 3.675-1.941m0-2a6.21 6.21 0 0 0-5.292 2.768 6.21 6.21 0 0 0-5.292-2.768 6.989 6.989 0 0 0-6.708 7.218c0 4.19 2.923 6.64 5.642 9.066 2.057 1.838 4.19 3.744 5.358 5.485.474-.707 2.112-2.298 5.358-5.188 2.308-2.053 5.358-4.706 5.358-9.363a6.989 6.989 0 0 0-6.708-7.218Z" }) })
           }
         ),
         /* @__PURE__ */ e.jsx(
-          w,
+          k,
           {
             variant: "ghost",
             size: "icon",
             rounded: "full",
-            onClick: g,
+            onClick: f,
             className: "text-gray-400 hover:text-indigo-500",
             children: /* @__PURE__ */ e.jsx("svg", { "aria-label": "Comment", fill: "currentColor", height: "26", role: "img", viewBox: "0 0 24 24", width: "26", children: /* @__PURE__ */ e.jsx("path", { d: "M20.656 17.008a9.993 9.993 0 1 0-3.59 3.615L22 22Z", fill: "none", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "2" }) })
           }
         ),
         /* @__PURE__ */ e.jsx(
-          w,
+          k,
           {
             variant: "ghost",
             size: "icon",
             rounded: "full",
-            onClick: p,
+            onClick: b,
             className: "text-gray-400 hover:text-indigo-500",
             children: /* @__PURE__ */ e.jsxs("svg", { "aria-label": "Share Post", fill: "currentColor", height: "26", role: "img", viewBox: "0 0 24 24", width: "26", children: [
               /* @__PURE__ */ e.jsx("line", { fill: "none", stroke: "currentColor", strokeLinejoin: "round", strokeWidth: "2", x1: "22", x2: "9.218", y1: "3", y2: "10.083" }),
@@ -459,19 +480,19 @@ const w = ({
       ] })
     ] }),
     /* @__PURE__ */ e.jsxs("div", { className: "space-y-3", children: [
-      /* @__PURE__ */ e.jsx("p", { className: "text-gray-800 text-sm leading-relaxed", children: o }),
+      /* @__PURE__ */ e.jsx("p", { className: "text-gray-800 text-sm leading-relaxed", children: l }),
       /* @__PURE__ */ e.jsxs("div", { className: "flex items-center justify-between pt-2 border-t border-gray-50", children: [
         /* @__PURE__ */ e.jsxs("span", { className: "font-semibold text-xs text-gray-500", children: [
           t.toLocaleString(),
           " Likes"
         ] }),
         /* @__PURE__ */ e.jsx("div", { className: "flex items-center gap-3", children: /* @__PURE__ */ e.jsx(
-          w,
+          k,
           {
             variant: "ghost",
             size: "icon",
             rounded: "full",
-            onClick: b,
+            onClick: p,
             className: `transition-colors ${c ? "text-gray-900" : "text-gray-400 hover:text-gray-900"}`,
             children: c ? /* @__PURE__ */ e.jsx("svg", { "aria-label": "Remove", fill: "currentColor", height: "22", role: "img", viewBox: "0 0 24 24", width: "22", children: /* @__PURE__ */ e.jsx("path", { d: "M20 22a.999.999 0 0 1-.687-.273L12 14.89l-7.313 6.837A1 1 0 0 1 3 21V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1Z" }) }) : /* @__PURE__ */ e.jsx("svg", { "aria-label": "Save", fill: "currentColor", height: "22", role: "img", viewBox: "0 0 24 24", width: "22", children: /* @__PURE__ */ e.jsx("path", { d: "M20 22a.999.999 0 0 1-.687-.273L12 14.89l-7.313 6.837A1 1 0 0 1 3 21V3a1 1 0 0 1 1-1h16a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1Z", fill: "none", stroke: "currentColor", strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: "2" }) })
           }
@@ -486,66 +507,66 @@ const w = ({
             className: "w-full text-xs text-gray-600 bg-gray-50 rounded-full px-3 py-2 outline-none focus:ring-1 focus:ring-indigo-200 transition-all"
           }
         ),
-        /* @__PURE__ */ e.jsx("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ e.jsx(w, { variant: "ghost", size: "sm", className: "text-indigo-500 font-bold px-2 py-0 h-auto hover:bg-transparent hover:text-indigo-700 min-w-0", children: "Post" }) })
+        /* @__PURE__ */ e.jsx("div", { className: "absolute right-2 top-1/2 -translate-y-1/2", children: /* @__PURE__ */ e.jsx(k, { variant: "ghost", size: "sm", className: "text-indigo-500 font-bold px-2 py-0 h-auto hover:bg-transparent hover:text-indigo-700 min-w-0", children: "Post" }) })
       ] })
     ] })
   ] })
-] }), me = ({
+] }), he = ({
   variant: s = "spinner",
-  size: n = "md",
-  className: l = "",
+  size: o = "md",
+  className: i = "",
   color: t,
-  colors: o
+  colors: l
 }) => {
-  const a = {
+  const n = {
     sm: "w-4 h-4",
     md: "w-8 h-8",
     lg: "w-12 h-12",
     xl: "w-16 h-16"
-  }, d = {
+  }, a = {
     sm: "w-1 h-1",
     md: "w-2 h-2",
     lg: "w-3 h-3",
     xl: "w-4 h-4"
-  }, c = a[n], f = "bg-gradient-to-tr from-yellow-400 via-red-500 to-purple-600";
+  }, c = n[o], u = "bg-gradient-to-tr from-yellow-400 via-red-500 to-purple-600";
   if (s === "dots") {
-    const g = d[n], p = !!t || !!o?.length, b = (h) => {
-      if (!p) return {};
-      const v = o?.[h] || t;
-      return v ? { backgroundColor: v } : {};
-    }, j = () => p ? "" : f;
-    return /* @__PURE__ */ e.jsx("div", { className: `flex items-center justify-center gap-1 ${l}`, children: [0, 1, 2].map((h) => /* @__PURE__ */ e.jsx(
+    const f = a[o], b = !!t || !!l?.length, p = (g) => {
+      if (!b) return {};
+      const y = l?.[g] || t;
+      return y ? { backgroundColor: y } : {};
+    }, v = () => b ? "" : u;
+    return /* @__PURE__ */ e.jsx("div", { className: `flex items-center justify-center gap-1 ${i}`, children: [0, 1, 2].map((g) => /* @__PURE__ */ e.jsx(
       "div",
       {
-        className: `${g} rounded-full animate-bounce ${j()}`,
+        className: `${f} rounded-full animate-bounce ${v()}`,
         style: {
-          ...b(h),
-          animationDelay: h === 0 ? "-0.3s" : h === 1 ? "-0.15s" : "0s"
+          ...p(g),
+          animationDelay: g === 0 ? "-0.3s" : g === 1 ? "-0.15s" : "0s"
         }
       },
-      h
+      g
     )) });
   }
   if (s === "pulse") {
-    const g = t ? "" : f;
-    return /* @__PURE__ */ e.jsxs("div", { className: `relative flex items-center justify-center ${c} ${l}`, children: [
+    const f = t ? "" : u;
+    return /* @__PURE__ */ e.jsxs("div", { className: `relative flex items-center justify-center ${c} ${i}`, children: [
       /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: `absolute inline-flex h-full w-full rounded-full opacity-75 animate-ping ${g}`,
+          className: `absolute inline-flex h-full w-full rounded-full opacity-75 animate-ping ${f}`,
           style: t ? { backgroundColor: t } : {}
         }
       ),
       /* @__PURE__ */ e.jsx(
         "span",
         {
-          className: `relative inline-flex rounded-full h-3/4 w-3/4 ${g}`,
+          className: `relative inline-flex rounded-full h-3/4 w-3/4 ${f}`,
           style: t ? { backgroundColor: t } : {}
         }
       )
     ] });
   }
-  return s === "multicolor" ? /* @__PURE__ */ e.jsx("div", { className: `${c} relative ${l}`, children: /* @__PURE__ */ e.jsx("div", { className: `absolute inset-0 rounded-full ${f} animate-spin`, children: /* @__PURE__ */ e.jsx("div", { className: "absolute inset-[3px] bg-white rounded-full" }) }) }) : s === "orbit" ? t ? /* @__PURE__ */ e.jsxs("div", { className: `relative ${c} ${l}`, children: [
+  return s === "multicolor" ? /* @__PURE__ */ e.jsx("div", { className: `${c} relative ${i}`, children: /* @__PURE__ */ e.jsx("div", { className: `absolute inset-0 rounded-full ${u} animate-spin`, children: /* @__PURE__ */ e.jsx("div", { className: "absolute inset-[3px] bg-white rounded-full" }) }) }) : s === "orbit" ? t ? /* @__PURE__ */ e.jsxs("div", { className: `relative ${c} ${i}`, children: [
     /* @__PURE__ */ e.jsx(
       "div",
       {
@@ -560,18 +581,18 @@ const w = ({
         style: { borderColor: t, borderLeftColor: "transparent", borderRightColor: "transparent", animationDirection: "reverse", animationDuration: "1.5s" }
       }
     )
-  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `relative ${c} ${l}`, children: [
-    /* @__PURE__ */ e.jsx("div", { className: `absolute inset-0 rounded-full ${f} animate-spin`, children: /* @__PURE__ */ e.jsx("div", { className: "absolute inset-[2px] bg-white rounded-full" }) }),
-    /* @__PURE__ */ e.jsx("div", { className: `absolute inset-1 rounded-full ${f} animate-spin-reverse opacity-75`, style: { animationDirection: "reverse", animationDuration: "1.5s" }, children: /* @__PURE__ */ e.jsx("div", { className: "absolute inset-[2px] bg-white rounded-full" }) })
+  ] }) : /* @__PURE__ */ e.jsxs("div", { className: `relative ${c} ${i}`, children: [
+    /* @__PURE__ */ e.jsx("div", { className: `absolute inset-0 rounded-full ${u} animate-spin`, children: /* @__PURE__ */ e.jsx("div", { className: "absolute inset-[2px] bg-white rounded-full" }) }),
+    /* @__PURE__ */ e.jsx("div", { className: `absolute inset-1 rounded-full ${u} animate-spin-reverse opacity-75`, style: { animationDirection: "reverse", animationDuration: "1.5s" }, children: /* @__PURE__ */ e.jsx("div", { className: "absolute inset-[2px] bg-white rounded-full" }) })
   ] }) : null;
-}, he = ({
+}, me = ({
   variant: s = "info",
-  title: n,
-  children: l,
+  title: o,
+  children: i,
   onClose: t,
-  className: o = ""
+  className: l = ""
 }) => {
-  const d = {
+  const a = {
     success: {
       container: "bg-green-50 text-green-900 border-green-200",
       iconColor: "text-green-600",
@@ -596,23 +617,23 @@ const w = ({
       closeHover: "hover:bg-blue-100 text-blue-600",
       Icon: () => /* @__PURE__ */ e.jsx("svg", { className: "w-5 h-5", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" }) })
     }
-  }[s], c = d.Icon;
+  }[s], c = a.Icon;
   return /* @__PURE__ */ e.jsxs(
     "div",
     {
       role: "alert",
-      className: `flex p-4 rounded-lg border ${d.container} ${o}`,
+      className: `flex p-4 rounded-lg border ${a.container} ${l}`,
       children: [
-        /* @__PURE__ */ e.jsx("div", { className: `shrink-0 ${d.iconColor}`, children: /* @__PURE__ */ e.jsx(c, {}) }),
+        /* @__PURE__ */ e.jsx("div", { className: `shrink-0 ${a.iconColor}`, children: /* @__PURE__ */ e.jsx(c, {}) }),
         /* @__PURE__ */ e.jsxs("div", { className: "ml-3 text-sm flex-1", children: [
-          n && /* @__PURE__ */ e.jsx("span", { className: "font-semibold block mb-1", children: n }),
-          /* @__PURE__ */ e.jsx("div", { className: "leading-relaxed", children: l })
+          o && /* @__PURE__ */ e.jsx("span", { className: "font-semibold block mb-1", children: o }),
+          /* @__PURE__ */ e.jsx("div", { className: "leading-relaxed", children: i })
         ] }),
         t && /* @__PURE__ */ e.jsx(
           "button",
           {
             onClick: t,
-            className: `ml-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex h-8 w-8 items-center justify-center transition-colors ${d.closeHover}`,
+            className: `ml-auto -mx-1.5 -my-1.5 rounded-lg p-1.5 inline-flex h-8 w-8 items-center justify-center transition-colors ${a.closeHover}`,
             "aria-label": "Close",
             children: /* @__PURE__ */ e.jsx("svg", { className: "w-4 h-4", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) })
           }
@@ -622,12 +643,12 @@ const w = ({
   );
 }, ae = ({
   children: s,
-  colSpan: n,
-  rowSpan: l,
+  colSpan: o,
+  rowSpan: i,
   colStart: t,
-  className: o = ""
+  className: l = ""
 }) => {
-  const a = {
+  const n = {
     1: "col-span-1",
     2: "col-span-2",
     3: "col-span-3",
@@ -641,7 +662,7 @@ const w = ({
     11: "col-span-11",
     12: "col-span-12",
     full: "col-span-full"
-  }, d = {
+  }, a = {
     1: "row-span-1",
     2: "row-span-2",
     3: "row-span-3",
@@ -649,24 +670,24 @@ const w = ({
     5: "row-span-5",
     6: "row-span-6"
   }, c = [
-    n ? a[n] : "",
-    l ? d[l] : "",
+    o ? n[o] : "",
+    i ? a[i] : "",
     t ? `col-start-${t}` : "",
-    o
+    l
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ e.jsx("div", { className: c, children: s });
-}, le = ({
+}, ie = ({
   children: s,
-  cols: n = 1,
-  gap: l = 4,
+  cols: o = 1,
+  gap: i = 4,
   gapX: t,
-  gapY: o,
-  flow: a = "row",
-  align: d,
+  gapY: l,
+  flow: n = "row",
+  align: a,
   justify: c,
-  className: f = ""
+  className: u = ""
 }) => {
-  const g = {
+  const f = {
     1: "grid-cols-1",
     2: "grid-cols-2",
     3: "grid-cols-3",
@@ -676,7 +697,7 @@ const w = ({
     8: "grid-cols-8",
     10: "grid-cols-10",
     12: "grid-cols-12"
-  }, p = {
+  }, b = {
     0: "gap-0",
     1: "gap-1",
     2: "gap-2",
@@ -687,32 +708,33 @@ const w = ({
     8: "gap-8",
     10: "gap-10",
     12: "gap-12"
-  }, b = [
+  }, p = [
     "grid",
-    g[n],
-    t === void 0 && o === void 0 ? p[l] : "",
+    f[o],
+    t === void 0 && l === void 0 ? b[i] : "",
     // Use standard gap if no X/Y overrides
     t ? `gap-x-${t}` : "",
-    o ? `gap-y-${o}` : "",
-    a ? `grid-flow-${a}` : "",
-    d ? `items-${d}` : "",
+    l ? `gap-y-${l}` : "",
+    n ? `grid-flow-${n}` : "",
+    a ? `items-${a}` : "",
     c ? `justify-${c}` : "",
-    f
+    u
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsx("div", { className: b, children: s });
+  return /* @__PURE__ */ e.jsx("div", { className: p, children: s });
 };
-le.Item = ae;
+ie.Item = ae;
 const fe = ({
   variant: s = "body1",
-  component: n,
-  children: l,
+  component: o,
+  children: i,
   weight: t,
-  align: o = "left",
-  color: a,
-  className: d = "",
-  noWrap: c = !1
+  align: l = "left",
+  color: n,
+  className: a = "",
+  noWrap: c = !1,
+  gradient: u
 }) => {
-  const g = n || {
+  const b = o || {
     h1: "h1",
     h2: "h2",
     h3: "h3",
@@ -734,7 +756,7 @@ const fe = ({
     body2: "text-sm md:text-base leading-relaxed",
     caption: "text-xs md:text-sm text-gray-500",
     overline: "text-xs uppercase tracking-widest font-semibold"
-  }, b = {
+  }, v = {
     h1: "font-extrabold",
     h2: "font-bold",
     h3: "font-bold",
@@ -745,41 +767,77 @@ const fe = ({
     body2: "font-normal",
     caption: "font-normal",
     overline: "font-bold"
-  }, j = {
+  }, g = {
     normal: "font-normal",
     medium: "font-medium",
     semibold: "font-semibold",
     bold: "font-bold",
     extrabold: "font-extrabold"
-  }, h = {
+  }, y = {
     left: "text-left",
     center: "text-center",
     right: "text-right",
     justify: "text-justify"
-  }, v = p[s], N = t ? j[t] : b[s], k = h[o], $ = [
-    v,
+  }, N = p[s], j = t ? g[t] : v[s], T = y[l];
+  let _ = n || (s === "caption" ? "text-gray-500" : "text-gray-900");
+  u && (_ = `${typeof u == "string" ? u : "bg-gradient-to-r from-pink-500 via-red-500 to-yellow-500"} text-transparent bg-clip-text`);
+  const S = [
     N,
-    k,
-    a || "text-gray-900",
+    j,
+    T,
+    _,
     c ? "truncate" : "",
-    d
+    a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ e.jsx(g, { className: $, children: l });
-}, ie = G.forwardRef(({ as: s, className: n = "", children: l, ...t }, o) => {
-  const a = s || "div";
-  return /* @__PURE__ */ e.jsx(a, { ref: o, className: n, ...t, children: l });
+  return /* @__PURE__ */ e.jsx(b, { className: S, children: i });
+}, ce = z.forwardRef(({
+  as: s,
+  className: o = "",
+  children: i,
+  center: t,
+  fullScreen: l,
+  bgImage: n,
+  overlay: a,
+  glass: c,
+  style: u,
+  ...f
+}, b) => {
+  const p = s || "div", v = [
+    t ? "flex items-center justify-center" : "",
+    l ? "min-h-screen w-full" : "",
+    c ? "backdrop-blur-lg bg-black/40" : "",
+    o
+  ].filter(Boolean).join(" "), g = {
+    ...n ? {
+      backgroundImage: `url(${n})`,
+      backgroundSize: "cover",
+      backgroundPosition: "center",
+      backgroundRepeat: "no-repeat"
+    } : {},
+    ...u
+  };
+  return /* @__PURE__ */ e.jsxs(p, { ref: b, className: `relative ${v}`, style: g, ...f, children: [
+    a && /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: `absolute inset-0 z-0 ${typeof a == "string" ? "" : "bg-black/70"}`,
+        style: typeof a == "string" ? { backgroundColor: a } : {}
+      }
+    ),
+    /* @__PURE__ */ e.jsx("div", { className: "relative z-10 w-full h-full flex flex-col items-center justify-center", children: i })
+  ] });
 });
-ie.displayName = "Box";
+ce.displayName = "Box";
 const ge = ({
   label: s,
-  error: n,
-  autoResize: l,
+  error: o,
+  autoResize: i,
   className: t = "",
-  rows: o = 4,
-  ...a
+  rows: l = 4,
+  ...n
 }) => {
-  const d = (c) => {
-    l && (c.target.style.height = "auto", c.target.style.height = `${c.target.scrollHeight}px`), a.onChange?.(c);
+  const a = (c) => {
+    i && (c.target.style.height = "auto", c.target.style.height = `${c.target.scrollHeight}px`), n.onChange?.(c);
   };
   return /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col gap-1.5 w-full", children: [
     s && /* @__PURE__ */ e.jsx("label", { className: "text-sm font-medium text-gray-700", children: s }),
@@ -792,12 +850,12 @@ const ge = ({
                     py-2 
                     bg-white 
                     border 
-                    ${n ? "border-red-500" : "border-gray-300"} 
+                    ${o ? "border-red-500" : "border-gray-300"} 
                     rounded-md 
                     shadow-sm 
                     focus:outline-none 
                     focus:ring-2 
-                    ${n ? "focus:ring-red-500" : "focus:ring-blue-500"} 
+                    ${o ? "focus:ring-red-500" : "focus:ring-blue-500"} 
                     focus:border-transparent 
                     transition-all 
                     duration-200 
@@ -806,32 +864,32 @@ const ge = ({
                     resize-y
                     ${t}
                 `,
-        rows: o,
-        onInput: d,
-        ...a
+        rows: l,
+        onInput: a,
+        ...n
       }
     ),
-    n && /* @__PURE__ */ e.jsx("span", { className: "text-xs text-red-500", children: n })
+    o && /* @__PURE__ */ e.jsx("span", { className: "text-xs text-red-500", children: o })
   ] });
-}, pe = ({
+}, be = ({
   sidebar: s,
-  header: n,
-  children: l,
+  header: o,
+  children: i,
   footer: t,
-  sidebarWidth: o = "260px",
-  className: a = ""
+  sidebarWidth: l = "260px",
+  className: n = ""
 }) => {
-  const [d, c] = te(!1);
-  return /* @__PURE__ */ e.jsxs("div", { className: `flex h-screen bg-gray-50 overflow-hidden ${a}`, children: [
+  const [a, c] = te(!1);
+  return /* @__PURE__ */ e.jsxs("div", { className: `flex h-screen bg-gray-50 overflow-hidden ${n}`, children: [
     s && /* @__PURE__ */ e.jsx(
       "div",
       {
         className: "hidden md:flex flex-col h-full bg-white border-r border-gray-200",
-        style: { width: o },
+        style: { width: l },
         children: s
       }
     ),
-    s && d && /* @__PURE__ */ e.jsx(
+    s && a && /* @__PURE__ */ e.jsx(
       "div",
       {
         className: "fixed inset-0 z-40 bg-black/50 md:hidden",
@@ -843,7 +901,7 @@ const ge = ({
       {
         className: `
                         fixed inset-y-0 left-0 z-50 w-64 bg-white shadow-xl transition-transform duration-300 md:hidden
-                        ${d ? "translate-x-0" : "-translate-x-full"}
+                        ${a ? "translate-x-0" : "-translate-x-full"}
                     `,
         children: s
       }
@@ -858,20 +916,20 @@ const ge = ({
             children: /* @__PURE__ */ e.jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16m-7 6h7" }) })
           }
         ),
-        /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex items-center justify-between", children: n || /* @__PURE__ */ e.jsx("div", { className: "font-bold text-xl text-indigo-600", children: "OrbitUI" }) })
+        /* @__PURE__ */ e.jsx("div", { className: "flex-1 flex items-center justify-between", children: o || /* @__PURE__ */ e.jsx("div", { className: "font-bold text-xl text-indigo-600", children: "OrbitUI" }) })
       ] }),
-      /* @__PURE__ */ e.jsx("main", { className: "flex-1 overflow-y-auto p-4 md:p-6 lg:p-8", children: l }),
+      /* @__PURE__ */ e.jsx("main", { className: "flex-1 overflow-y-auto p-4 md:p-6 lg:p-8", children: i }),
       t && /* @__PURE__ */ e.jsx("footer", { className: "h-14 border-t border-gray-200 bg-white px-4 flex items-center shrink-0", children: t })
     ] })
   ] });
-}, be = ({
+}, pe = ({
   sidebar: s,
-  header: n,
-  children: l,
+  header: o,
+  children: i,
   footer: t,
-  maxWidth: o = "935px",
-  className: a = ""
-}) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col md:flex-row h-screen bg-white ${a}`, children: [
+  maxWidth: l = "935px",
+  className: n = ""
+}) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col md:flex-row h-screen bg-white ${n}`, children: [
   s && /* @__PURE__ */ e.jsx("aside", { className: "hidden md:flex flex-col fixed left-0 h-screen border-r border-gray-200 transition-all duration-300 xl:w-64 w-20 z-50 bg-white", children: s }),
   /* @__PURE__ */ e.jsxs(
     "main",
@@ -881,20 +939,20 @@ const ge = ({
                     ${s ? "md:ml-20 xl:ml-64" : ""}
                 `,
       children: [
-        n && /* @__PURE__ */ e.jsx("header", { className: "sticky top-0 z-40 bg-white/80 backdrop-blur-md border-b border-gray-100 md:hidden", children: n }),
-        /* @__PURE__ */ e.jsx("div", { className: "mx-auto px-4 md:px-8 py-8", style: { maxWidth: o }, children: l })
+        o && /* @__PURE__ */ e.jsx("header", { className: "sticky top-0 z-40 bg-white/80 backdrop-blur-md border-b border-gray-100 md:hidden", children: o }),
+        /* @__PURE__ */ e.jsx("div", { className: "mx-auto px-4 md:px-8 py-8", style: { maxWidth: l }, children: i })
       ]
     }
   ),
   t && /* @__PURE__ */ e.jsx("nav", { className: "md:hidden fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-50", children: t })
 ] }), ve = ({
   list: s,
-  header: n,
-  children: l,
+  header: o,
+  children: i,
   footer: t,
-  isChatActive: o = !1,
-  onBack: a,
-  listWidth: d = "350px",
+  isChatActive: l = !1,
+  onBack: n,
+  listWidth: a = "350px",
   className: c = ""
 }) => /* @__PURE__ */ e.jsxs("div", { className: `flex h-screen bg-white overflow-hidden ${c}`, children: [
   /* @__PURE__ */ e.jsx(
@@ -902,9 +960,9 @@ const ge = ({
     {
       className: `
                     flex-shrink-0 border-r border-gray-200 bg-white transition-all duration-300
-                    ${o ? "hidden md:flex" : "flex w-full md:w-auto"}
+                    ${l ? "hidden md:flex" : "flex w-full md:w-auto"}
                 `,
-      style: { width: o ? d : window.innerWidth < 768 ? "100%" : d },
+      style: { width: l ? a : window.innerWidth < 768 ? "100%" : a },
       children: /* @__PURE__ */ e.jsx("div", { className: "flex flex-col w-full h-full", children: s })
     }
   ),
@@ -913,39 +971,106 @@ const ge = ({
     {
       className: `
                     flex-1 flex flex-col min-w-0 bg-white transition-all duration-300
-                    ${o ? "flex w-full" : "hidden md:flex"}
+                    ${l ? "flex w-full" : "hidden md:flex"}
                 `,
       children: [
-        (n || a) && /* @__PURE__ */ e.jsxs("header", { className: "flex h-16 items-center px-4 border-b border-gray-100 shrink-0 bg-white/80 backdrop-blur-md sticky top-0 z-10", children: [
-          a && /* @__PURE__ */ e.jsx(
+        (o || n) && /* @__PURE__ */ e.jsxs("header", { className: "flex h-16 items-center px-4 border-b border-gray-100 shrink-0 bg-white/80 backdrop-blur-md sticky top-0 z-10", children: [
+          n && /* @__PURE__ */ e.jsx(
             "button",
             {
-              onClick: a,
+              onClick: n,
               className: "mr-3 p-2 md:hidden text-gray-500 hover:bg-gray-100 rounded-full transition-colors",
               "aria-label": "Go back",
               children: /* @__PURE__ */ e.jsx("svg", { className: "w-6 h-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M15 19l-7-7 7-7" }) })
             }
           ),
-          /* @__PURE__ */ e.jsx("div", { className: "flex-1 min-w-0", children: n })
+          /* @__PURE__ */ e.jsx("div", { className: "flex-1 min-w-0", children: o })
         ] }),
-        /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto bg-gray-50", children: l }),
+        /* @__PURE__ */ e.jsx("div", { className: "flex-1 overflow-y-auto bg-gray-50", children: i }),
         t && /* @__PURE__ */ e.jsx("footer", { className: "p-4 bg-white border-t border-gray-100 shrink-0", children: t })
       ]
     }
   )
-] });
+] }), ye = ({
+  src: s,
+  alt: o = "User",
+  initials: i,
+  size: t = "md",
+  status: l,
+  className: n = "",
+  isBordered: a = !1
+}) => {
+  const c = {
+    xs: "w-6 h-6 text-xs",
+    sm: "w-8 h-8 text-xs",
+    md: "w-10 h-10 text-sm",
+    lg: "w-12 h-12 text-base",
+    xl: "w-16 h-16 text-lg",
+    "2xl": "w-24 h-24 text-xl"
+  }, u = {
+    online: "bg-green-500",
+    offline: "bg-gray-400",
+    busy: "bg-red-500",
+    away: "bg-yellow-500"
+  }, f = {
+    xs: "w-1.5 h-1.5",
+    sm: "w-2 h-2",
+    md: "w-2.5 h-2.5",
+    lg: "w-3 h-3",
+    xl: "w-4 h-4",
+    "2xl": "w-5 h-5"
+  };
+  return /* @__PURE__ */ e.jsxs("div", { className: `relative inline-block ${n}`, children: [
+    /* @__PURE__ */ e.jsx(
+      "div",
+      {
+        className: `
+                    ${c[t]} 
+                    rounded-full 
+                    flex items-center justify-center 
+                    overflow-hidden 
+                    bg-gray-100 
+                    text-gray-600 
+                    font-bold
+                    ${a ? "ring-2 ring-white" : ""}
+                `,
+        children: s ? /* @__PURE__ */ e.jsx(
+          "img",
+          {
+            src: s,
+            alt: o,
+            className: "w-full h-full object-cover"
+          }
+        ) : /* @__PURE__ */ e.jsx("span", { children: i || o.charAt(0).toUpperCase() })
+      }
+    ),
+    l && /* @__PURE__ */ e.jsx(
+      "span",
+      {
+        className: `
+                        absolute bottom-0 right-0 
+                        block rounded-full 
+                        ring-2 ring-white 
+                        ${u[l]} 
+                        ${f[t]}
+                    `
+      }
+    )
+  ] });
+};
 export {
-  he as Alert,
-  pe as AppLayout,
-  ie as Box,
-  w as Button,
+  me as Alert,
+  be as AppLayout,
+  ye as Avatar,
+  ce as Box,
+  k as Button,
   ue as Card,
-  le as Grid,
+  ie as Grid,
   ve as InboxLayout,
-  de as Input,
-  me as Loader,
+  le as Input,
+  he as Loader,
   xe as Post,
-  be as SocialLayout,
+  pe as SocialLayout,
   ge as TextArea,
   fe as Typography
 };