@sachin-tosa/tosa 1.0.2 → 1.0.4

package/dist/tosa.es.js

@@ -1,44 +1,44 @@
 import re, { useState as te } from "react";
-var T = { exports: {} }, E = {};
-var F;
+var E = { exports: {} }, v = {};
+var Y;
 function ne() {
-  if (F) return E;
-  F = 1;
+  if (Y) return v;
+  Y = 1;
   var l = /* @__PURE__ */ Symbol.for("react.transitional.element"), f = /* @__PURE__ */ Symbol.for("react.fragment");
-  function u(c, o, s) {
-    var m = null;
-    if (s !== void 0 && (m = "" + s), o.key !== void 0 && (m = "" + o.key), "key" in o) {
+  function u(d, o, s) {
+    var p = null;
+    if (s !== void 0 && (p = "" + s), o.key !== void 0 && (p = "" + o.key), "key" in o) {
       s = {};
-      for (var _ in o)
-        _ !== "key" && (s[_] = o[_]);
+      for (var b in o)
+        b !== "key" && (s[b] = o[b]);
     } else s = o;
     return o = s.ref, {
       $$typeof: l,
-      type: c,
-      key: m,
+      type: d,
+      key: p,
       ref: o !== void 0 ? o : null,
       props: s
     };
   }
-  return E.Fragment = f, E.jsx = u, E.jsxs = u, E;
+  return v.Fragment = f, v.jsx = u, v.jsxs = u, v;
 }
-var v = {};
-var D;
+var h = {};
+var I;
 function ae() {
-  return D || (D = 1, process.env.NODE_ENV !== "production" && (function() {
+  return I || (I = 1, process.env.NODE_ENV !== "production" && (function() {
     function l(e) {
       if (e == null) return null;
       if (typeof e == "function")
         return e.$$typeof === Q ? null : e.displayName || e.name || null;
       if (typeof e == "string") return e;
       switch (e) {
-        case k:
+        case _:
           return "Fragment";
-        case J:
+        case X:
           return "Profiler";
-        case U:
+        case W:
           return "StrictMode";
-        case X:
+        case G:
           return "Suspense";
         case H:
           return "SuspenseList";
@@ -49,18 +49,18 @@ function ae() {
         switch (typeof e.tag == "number" && console.error(
           "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
         ), e.$$typeof) {
-          case W:
+          case U:
             return "Portal";
-          case z:
+          case J:
             return e.displayName || "Context";
-          case V:
+          case q:
             return (e._context.displayName || "Context") + ".Consumer";
-          case G:
+          case V:
             var r = e.render;
             return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
           case B:
             return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
-          case g:
+          case k:
             r = e._payload, e = e._init;
             try {
               return l(e(r));
@@ -89,9 +89,9 @@ function ae() {
         ), f(e);
       }
     }
-    function c(e) {
-      if (e === k) return "<>";
-      if (typeof e == "object" && e !== null && e.$$typeof === g)
+    function d(e) {
+      if (e === _) return "<>";
+      if (typeof e == "object" && e !== null && e.$$typeof === k)
         return "<...>";
       try {
         var r = l(e);
@@ -101,22 +101,22 @@ function ae() {
       }
     }
     function o() {
-      var e = O.A;
+      var e = y.A;
       return e === null ? null : e.getOwner();
     }
     function s() {
       return Error("react-stack-top-frame");
     }
-    function m(e) {
-      if (w.call(e, "key")) {
+    function p(e) {
+      if (N.call(e, "key")) {
         var r = Object.getOwnPropertyDescriptor(e, "key").get;
         if (r && r.isReactWarning) return !1;
       }
       return e.key !== void 0;
     }
-    function _(e, r) {
+    function b(e, r) {
       function t() {
-        N || (N = !0, console.error(
+        C || (C = !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)",
           r
         ));
@@ -126,23 +126,23 @@ function ae() {
         configurable: !0
       });
     }
-    function L() {
+    function F() {
       var e = l(this.type);
-      return C[e] || (C[e] = !0, console.error(
+      return P[e] || (P[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 M(e, r, t, n, R, j) {
+    function D(e, r, t, n, x, T) {
       var a = t.ref;
       return e = {
-        $$typeof: y,
+        $$typeof: A,
         type: e,
         key: r,
         props: t,
         _owner: n
       }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
         enumerable: !1,
-        get: L
+        get: F
       }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
         configurable: !1,
         enumerable: !1,
@@ -157,33 +157,33 @@ function ae() {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: R
+        value: x
       }), Object.defineProperty(e, "_debugTask", {
         configurable: !1,
         enumerable: !1,
         writable: !0,
-        value: j
+        value: T
       }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
     }
-    function S(e, r, t, n, R, j) {
+    function j(e, r, t, n, x, T) {
       var a = r.children;
       if (a !== void 0)
         if (n)
           if (K(a)) {
             for (n = 0; n < a.length; n++)
-              h(a[n]);
+              S(a[n]);
             Object.freeze && Object.freeze(a);
           } 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 h(a);
-      if (w.call(r, "key")) {
+        else S(a);
+      if (N.call(r, "key")) {
         a = l(e);
-        var d = Object.keys(r).filter(function(ee) {
+        var m = Object.keys(r).filter(function(ee) {
           return ee !== "key";
         });
-        n = 0 < d.length ? "{key: someKey, " + d.join(": ..., ") + ": ...}" : "{key: someKey}", I[a + n] || (d = 0 < d.length ? "{" + d.join(": ..., ") + ": ...}" : "{}", console.error(
+        n = 0 < m.length ? "{key: someKey, " + m.join(": ..., ") + ": ...}" : "{key: someKey}", $[a + n] || (m = 0 < m.length ? "{" + m.join(": ..., ") + ": ...}" : "{}", console.error(
           `A props object containing a "key" prop is being spread into JSX:
   let props = %s;
   <%s {...props} />
@@ -192,91 +192,346 @@ React keys must be passed directly to JSX without using spread:
   <%s key={someKey} {...props} />`,
           n,
           a,
-          d,
+          m,
           a
-        ), I[a + n] = !0);
+        ), $[a + n] = !0);
       }
-      if (a = null, t !== void 0 && (u(t), a = "" + t), m(r) && (u(r.key), a = "" + r.key), "key" in r) {
+      if (a = null, t !== void 0 && (u(t), a = "" + t), p(r) && (u(r.key), a = "" + r.key), "key" in r) {
         t = {};
-        for (var A in r)
-          A !== "key" && (t[A] = r[A]);
+        for (var w in r)
+          w !== "key" && (t[w] = r[w]);
       } else t = r;
-      return a && _(
+      return a && b(
         t,
         typeof e == "function" ? e.displayName || e.name || "Unknown" : e
-      ), M(
+      ), D(
         e,
         a,
         t,
         o(),
-        R,
-        j
+        x,
+        T
       );
     }
-    function h(e) {
-      P(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === g && (e._payload.status === "fulfilled" ? P(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
+    function S(e) {
+      O(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === k && (e._payload.status === "fulfilled" ? O(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
     }
-    function P(e) {
-      return typeof e == "object" && e !== null && e.$$typeof === y;
+    function O(e) {
+      return typeof e == "object" && e !== null && e.$$typeof === A;
     }
-    var p = re, y = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), k = /* @__PURE__ */ Symbol.for("react.fragment"), U = /* @__PURE__ */ Symbol.for("react.strict_mode"), J = /* @__PURE__ */ Symbol.for("react.profiler"), V = /* @__PURE__ */ Symbol.for("react.consumer"), z = /* @__PURE__ */ Symbol.for("react.context"), G = /* @__PURE__ */ Symbol.for("react.forward_ref"), X = /* @__PURE__ */ Symbol.for("react.suspense"), H = /* @__PURE__ */ Symbol.for("react.suspense_list"), B = /* @__PURE__ */ Symbol.for("react.memo"), g = /* @__PURE__ */ Symbol.for("react.lazy"), Z = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), O = p.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, w = Object.prototype.hasOwnProperty, K = Array.isArray, x = console.createTask ? console.createTask : function() {
+    var g = re, A = /* @__PURE__ */ Symbol.for("react.transitional.element"), U = /* @__PURE__ */ Symbol.for("react.portal"), _ = /* @__PURE__ */ Symbol.for("react.fragment"), W = /* @__PURE__ */ Symbol.for("react.strict_mode"), X = /* @__PURE__ */ Symbol.for("react.profiler"), q = /* @__PURE__ */ Symbol.for("react.consumer"), J = /* @__PURE__ */ Symbol.for("react.context"), V = /* @__PURE__ */ Symbol.for("react.forward_ref"), G = /* @__PURE__ */ Symbol.for("react.suspense"), H = /* @__PURE__ */ Symbol.for("react.suspense_list"), B = /* @__PURE__ */ Symbol.for("react.memo"), k = /* @__PURE__ */ Symbol.for("react.lazy"), Z = /* @__PURE__ */ Symbol.for("react.activity"), Q = /* @__PURE__ */ Symbol.for("react.client.reference"), y = g.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, N = Object.prototype.hasOwnProperty, K = Array.isArray, R = console.createTask ? console.createTask : function() {
       return null;
     };
-    p = {
+    g = {
       react_stack_bottom_frame: function(e) {
         return e();
       }
     };
-    var N, C = {}, Y = p.react_stack_bottom_frame.bind(
-      p,
+    var C, P = {}, M = g.react_stack_bottom_frame.bind(
+      g,
       s
-    )(), $ = x(c(s)), I = {};
-    v.Fragment = k, v.jsx = function(e, r, t) {
-      var n = 1e4 > O.recentlyCreatedOwnerStacks++;
-      return S(
+    )(), L = R(d(s)), $ = {};
+    h.Fragment = _, h.jsx = function(e, r, t) {
+      var n = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return j(
         e,
         r,
         t,
         !1,
-        n ? Error("react-stack-top-frame") : Y,
-        n ? x(c(e)) : $
+        n ? Error("react-stack-top-frame") : M,
+        n ? R(d(e)) : L
       );
-    }, v.jsxs = function(e, r, t) {
-      var n = 1e4 > O.recentlyCreatedOwnerStacks++;
-      return S(
+    }, h.jsxs = function(e, r, t) {
+      var n = 1e4 > y.recentlyCreatedOwnerStacks++;
+      return j(
         e,
         r,
         t,
         !0,
-        n ? Error("react-stack-top-frame") : Y,
-        n ? x(c(e)) : $
+        n ? Error("react-stack-top-frame") : M,
+        n ? R(d(e)) : L
       );
     };
-  })()), v;
+  })()), h;
 }
-var q;
+var z;
 function oe() {
-  return q || (q = 1, process.env.NODE_ENV === "production" ? T.exports = ne() : T.exports = ae()), T.exports;
+  return z || (z = 1, process.env.NODE_ENV === "production" ? E.exports = ne() : E.exports = ae()), E.exports;
 }
 var i = oe();
-const se = "_nav_10qgk_1", le = "_menu_10qgk_17", ue = "_toggle_10qgk_27", ce = "_open_10qgk_55", b = {
-  nav: se,
-  menu: le,
-  toggle: ue,
-  open: ce
-};
-function fe({ brand: l = "TOSA", links: f = [] }) {
-  const [u, c] = te(!1);
-  return /* @__PURE__ */ i.jsxs("nav", { className: b.nav, children: [
-    /* @__PURE__ */ i.jsx("div", { className: b.logo, children: l }),
-    /* @__PURE__ */ i.jsx("button", { className: b.toggle, onClick: () => c(!u), children: "☰" }),
-    /* @__PURE__ */ i.jsx("ul", { className: `${b.menu} ${u ? b.open : ""}`, children: f.map((o, s) => /* @__PURE__ */ i.jsx("li", { children: o }, s)) })
+const c = (() => {
+  const l = document.createElement("style");
+  return l.textContent = `
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .navbar {
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(10px);
+    }
+
+    .navContainer {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem 2rem;
+    }
+
+    .logo {
+      font-size: 1.8rem;
+      font-weight: 700;
+      letter-spacing: 2px;
+      background: linear-gradient(135deg, #00d8ff 0%, #0099cc 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      cursor: pointer;
+      transition: transform 0.3s ease;
+    }
+
+    .logo:hover {
+      transform: scale(1.05);
+    }
+
+    .navMenu {
+      display: flex;
+      list-style: none;
+      gap: 2.5rem;
+      align-items: center;
+    }
+
+    .navLink {
+      position: relative;
+      text-decoration: none;
+      color: #e0e0e0;
+      font-weight: 500;
+      font-size: 1rem;
+      padding: 0.5rem 0;
+      transition: color 0.3s ease;
+    }
+
+    .navLink::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 2px;
+      background: linear-gradient(90deg, #00d8ff, #0099cc);
+      transition: width 0.3s ease;
+    }
+
+    .navLink:hover {
+      color: #00d8ff;
+    }
+
+    .navLink:hover::after {
+      width: 100%;
+    }
+
+    .hamburger {
+      display: none;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 28px;
+      height: 22px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      z-index: 1001;
+    }
+
+    .bar {
+      width: 100%;
+      height: 3px;
+      background: #00d8ff;
+      border-radius: 3px;
+      transition: all 0.3s ease;
+    }
+
+    .hamburger.active .bar:nth-child(1) {
+      transform: translateY(9.5px) rotate(45deg);
+    }
+
+    .hamburger.active .bar:nth-child(2) {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+
+    .hamburger.active .bar:nth-child(3) {
+      transform: translateY(-9.5px) rotate(-45deg);
+    }
+
+    .demoContent {
+      padding: 4rem 2rem;
+      max-width: 1200px;
+      margin: 0 auto;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    }
+
+    .demoSection {
+      margin-bottom: 3rem;
+      padding: 3rem 2rem;
+      background: #f8f9fa;
+      border-radius: 12px;
+      scroll-margin-top: 80px;
+    }
+
+    .demoSection h2 {
+      color: #1a1a2e;
+      margin-bottom: 1rem;
+      font-size: 2rem;
+    }
+
+    .demoSection p {
+      color: #666;
+      line-height: 1.8;
+      font-size: 1.1rem;
+    }
+
+    @media (max-width: 768px) {
+      .hamburger {
+        display: flex;
+      }
+
+      .navMenu {
+        position: fixed;
+        top: 0;
+        right: 0;
+        height: 100vh;
+        width: 280px;
+        flex-direction: column;
+        justify-content: flex-start;
+        padding-top: 5rem;
+        gap: 0;
+        background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
+        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
+        transform: translateX(100%);
+        transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+
+      .navMenu.open {
+        transform: translateX(0);
+      }
+
+      .navMenu li {
+        width: 100%;
+        opacity: 0;
+        transform: translateX(50px);
+      }
+
+      .navMenu.open li {
+        animation: slideIn 0.4s forwards;
+      }
+
+      .navMenu.open li:nth-child(1) { animation-delay: 0.1s; }
+      .navMenu.open li:nth-child(2) { animation-delay: 0.2s; }
+      .navMenu.open li:nth-child(3) { animation-delay: 0.3s; }
+      .navMenu.open li:nth-child(4) { animation-delay: 0.4s; }
+
+      @keyframes slideIn {
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      .navLink {
+        display: block;
+        padding: 1.2rem 2rem;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        font-size: 1.1rem;
+      }
+
+      .navLink::after {
+        display: none;
+      }
+
+      .navLink:hover {
+        background: rgba(0, 216, 255, 0.1);
+      }
+    }
+
+    @media (max-width: 480px) {
+      .navContainer {
+        padding: 1rem 1.5rem;
+      }
+
+      .logo {
+        font-size: 1.5rem;
+      }
+
+      .navMenu {
+        width: 100%;
+      }
+    }
+  `, document.head.querySelector("[data-navbar-styles]") || (l.setAttribute("data-navbar-styles", ""), document.head.appendChild(l)), {
+    navbar: "navbar",
+    navContainer: "navContainer",
+    logo: "logo",
+    navMenu: "navMenu",
+    navLink: "navLink",
+    hamburger: "hamburger",
+    bar: "bar",
+    active: "active",
+    open: "open",
+    demoContent: "demoContent",
+    demoSection: "demoSection"
+  };
+})();
+function se({ brand: l = "TOSA", links: f = ["Home", "About", "Services", "Contact"] }) {
+  const [u, d] = te(!1);
+  return /* @__PURE__ */ i.jsxs(i.Fragment, { children: [
+    /* @__PURE__ */ i.jsx("nav", { className: c.navbar, children: /* @__PURE__ */ i.jsxs("div", { className: c.navContainer, children: [
+      /* @__PURE__ */ i.jsx("div", { className: c.logo, children: l }),
+      /* @__PURE__ */ i.jsxs(
+        "button",
+        {
+          className: `${c.hamburger} ${u ? c.active : ""}`,
+          onClick: () => d(!u),
+          "aria-label": "Toggle menu",
+          "aria-expanded": u,
+          children: [
+            /* @__PURE__ */ i.jsx("span", { className: c.bar }),
+            /* @__PURE__ */ i.jsx("span", { className: c.bar }),
+            /* @__PURE__ */ i.jsx("span", { className: c.bar })
+          ]
+        }
+      ),
+      /* @__PURE__ */ i.jsx("ul", { className: `${c.navMenu} ${u ? c.open : ""}`, children: f.map((o, s) => /* @__PURE__ */ i.jsx("li", { children: /* @__PURE__ */ i.jsx(
+        "a",
+        {
+          href: `#${o.toLowerCase()}`,
+          className: c.navLink,
+          onClick: () => d(!1),
+          children: o
+        }
+      ) }, s)) })
+    ] }) }),
+    /* @__PURE__ */ i.jsx("div", { className: c.demoContent, children: f.map((o, s) => /* @__PURE__ */ i.jsxs("section", { id: o.toLowerCase(), className: c.demoSection, children: [
+      /* @__PURE__ */ i.jsx("h2", { children: o }),
+      /* @__PURE__ */ i.jsxs("p", { children: [
+        "This is the ",
+        o,
+        " section. The navbar stays fixed at the top and smoothly transitions on mobile devices. Scroll down to see the sticky behavior in action. The navigation links will smoothly scroll to each section."
+      ] })
+    ] }, s)) })
   ] });
 }
-function de() {
+function le() {
   return /* @__PURE__ */ i.jsx("nav", { children: /* @__PURE__ */ i.jsx("h1", { children: "Hello cards" }) });
 }
 export {
-  de as Card,
-  fe as Navbar
+  le as Card,
+  se as Navbar
 };

package/dist/tosa.umd.js

@@ -1,6 +1,220 @@
-(function(u,d){typeof exports=="object"&&typeof module<"u"?d(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],d):(u=typeof globalThis<"u"?globalThis:u||self,d(u.Tosa={},u.React))})(this,(function(u,d){"use strict";var T={exports:{}},v={};var A;function W(){if(A)return v;A=1;var l=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function c(f,o,s){var b=null;if(s!==void 0&&(b=""+s),o.key!==void 0&&(b=""+o.key),"key"in o){s={};for(var R in o)R!=="key"&&(s[R]=o[R])}else s=o;return o=s.ref,{$$typeof:l,type:f,key:b,ref:o!==void 0?o:null,props:s}}return v.Fragment=m,v.jsx=c,v.jsxs=c,v}var E={};var P;function U(){return P||(P=1,process.env.NODE_ENV!=="production"&&(function(){function l(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===oe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case O:return"Fragment";case Z:return"Profiler";case B:return"StrictMode";case re:return"Suspense";case te:return"SuspenseList";case ae:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case H:return"Portal";case K:return e.displayName||"Context";case Q:return(e._context.displayName||"Context")+".Consumer";case ee:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ne:return r=e.displayName||null,r!==null?r:l(e.type)||"Memo";case h:r=e._payload,e=e._init;try{return l(e(r))}catch{}}return null}function m(e){return""+e}function c(e){try{m(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),m(e)}}function f(e){if(e===O)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===h)return"<...>";try{var r=l(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function o(){var e=j.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function b(e){if(I.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function R(e,r){function t(){F||(F=!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)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function G(){var e=l(this.type);return D[e]||(D[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 X(e,r,t,n,g,x){var a=t.ref;return e={$$typeof:$,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:G}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:g}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:x}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function N(e,r,t,n,g,x){var a=r.children;if(a!==void 0)if(n)if(se(a)){for(n=0;n<a.length;n++)C(a[n]);Object.freeze&&Object.freeze(a)}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 C(a);if(I.call(r,"key")){a=l(e);var _=Object.keys(r).filter(function(le){return le!=="key"});n=0<_.length?"{key: someKey, "+_.join(": ..., ")+": ...}":"{key: someKey}",L[a+n]||(_=0<_.length?"{"+_.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
+(function(d,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],p):(d=typeof globalThis<"u"?globalThis:d||self,p(d.Tosa={},d.React))})(this,(function(d,p){"use strict";var E={exports:{}},v={};var O;function U(){if(O)return v;O=1;var c=Symbol.for("react.transitional.element"),m=Symbol.for("react.fragment");function u(f,i,s){var g=null;if(s!==void 0&&(g=""+s),i.key!==void 0&&(g=""+i.key),"key"in i){s={};for(var x in i)x!=="key"&&(s[x]=i[x])}else s=i;return i=s.ref,{$$typeof:c,type:f,key:g,ref:i!==void 0?i:null,props:s}}return v.Fragment=m,v.jsx=u,v.jsxs=u,v}var h={};var A;function W(){return A||(A=1,process.env.NODE_ENV!=="production"&&(function(){function c(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===oe?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case y:return"Fragment";case Z:return"Profiler";case B:return"StrictMode";case re:return"Suspense";case te:return"SuspenseList";case ae:return"Activity"}if(typeof e=="object")switch(typeof e.tag=="number"&&console.error("Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."),e.$$typeof){case H:return"Portal";case K:return e.displayName||"Context";case Q:return(e._context.displayName||"Context")+".Consumer";case ee:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case ne:return r=e.displayName||null,r!==null?r:c(e.type)||"Memo";case R:r=e._payload,e=e._init;try{return c(e(r))}catch{}}return null}function m(e){return""+e}function u(e){try{m(e);var r=!1}catch{r=!0}if(r){r=console;var t=r.error,n=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return t.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",n),m(e)}}function f(e){if(e===y)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===R)return"<...>";try{var r=c(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function i(){var e=T.A;return e===null?null:e.getOwner()}function s(){return Error("react-stack-top-frame")}function g(e){if(Y.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function x(e,r){function t(){$||($=!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)",r))}t.isReactWarning=!0,Object.defineProperty(e,"key",{get:t,configurable:!0})}function V(){var e=c(this.type);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 G(e,r,t,n,k,j){var a=t.ref;return e={$$typeof:L,type:e,key:r,props:t,_owner:n},(a!==void 0?a:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:V}):Object.defineProperty(e,"ref",{enumerable:!1,value:null}),e._store={},Object.defineProperty(e._store,"validated",{configurable:!1,enumerable:!1,writable:!0,value:0}),Object.defineProperty(e,"_debugInfo",{configurable:!1,enumerable:!1,writable:!0,value:null}),Object.defineProperty(e,"_debugStack",{configurable:!1,enumerable:!1,writable:!0,value:k}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:j}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function C(e,r,t,n,k,j){var a=r.children;if(a!==void 0)if(n)if(ie(a)){for(n=0;n<a.length;n++)P(a[n]);Object.freeze&&Object.freeze(a)}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 P(a);if(Y.call(r,"key")){a=c(e);var b=Object.keys(r).filter(function(se){return se!=="key"});n=0<b.length?"{key: someKey, "+b.join(": ..., ")+": ...}":"{key: someKey}",D[a+n]||(b=0<b.length?"{"+b.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} />`,n,a,_,a),L[a+n]=!0)}if(a=null,t!==void 0&&(c(t),a=""+t),b(r)&&(c(r.key),a=""+r.key),"key"in r){t={};for(var y in r)y!=="key"&&(t[y]=r[y])}else t=r;return a&&R(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),X(e,a,t,o(),g,x)}function C(e){Y(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===h&&(e._payload.status==="fulfilled"?Y(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function Y(e){return typeof e=="object"&&e!==null&&e.$$typeof===$}var k=d,$=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),O=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),Z=Symbol.for("react.profiler"),Q=Symbol.for("react.consumer"),K=Symbol.for("react.context"),ee=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),te=Symbol.for("react.suspense_list"),ne=Symbol.for("react.memo"),h=Symbol.for("react.lazy"),ae=Symbol.for("react.activity"),oe=Symbol.for("react.client.reference"),j=k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,I=Object.prototype.hasOwnProperty,se=Array.isArray,S=console.createTask?console.createTask:function(){return null};k={react_stack_bottom_frame:function(e){return e()}};var F,D={},M=k.react_stack_bottom_frame.bind(k,s)(),q=S(f(s)),L={};E.Fragment=O,E.jsx=function(e,r,t){var n=1e4>j.recentlyCreatedOwnerStacks++;return N(e,r,t,!1,n?Error("react-stack-top-frame"):M,n?S(f(e)):q)},E.jsxs=function(e,r,t){var n=1e4>j.recentlyCreatedOwnerStacks++;return N(e,r,t,!0,n?Error("react-stack-top-frame"):M,n?S(f(e)):q)}})()),E}var w;function J(){return w||(w=1,process.env.NODE_ENV==="production"?T.exports=W():T.exports=U()),T.exports}var i=J();const p={nav:"_nav_10qgk_1",menu:"_menu_10qgk_17",toggle:"_toggle_10qgk_27",open:"_open_10qgk_55"};function V({brand:l="TOSA",links:m=[]}){const[c,f]=d.useState(!1);return i.jsxs("nav",{className:p.nav,children:[i.jsx("div",{className:p.logo,children:l}),i.jsx("button",{className:p.toggle,onClick:()=>f(!c),children:"☰"}),i.jsx("ul",{className:`${p.menu} ${c?p.open:""}`,children:m.map((o,s)=>i.jsx("li",{children:o},s))})]})}function z(){return i.jsx("nav",{children:i.jsx("h1",{children:"Hello cards"})})}u.Card=z,u.Navbar=V,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
+  <%s key={someKey} {...props} />`,n,a,b,a),D[a+n]=!0)}if(a=null,t!==void 0&&(u(t),a=""+t),g(r)&&(u(r.key),a=""+r.key),"key"in r){t={};for(var S in r)S!=="key"&&(t[S]=r[S])}else t=r;return a&&x(t,typeof e=="function"?e.displayName||e.name||"Unknown":e),G(e,a,t,i(),k,j)}function P(e){M(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===R&&(e._payload.status==="fulfilled"?M(e._payload.value)&&e._payload.value._store&&(e._payload.value._store.validated=1):e._store&&(e._store.validated=1))}function M(e){return typeof e=="object"&&e!==null&&e.$$typeof===L}var _=p,L=Symbol.for("react.transitional.element"),H=Symbol.for("react.portal"),y=Symbol.for("react.fragment"),B=Symbol.for("react.strict_mode"),Z=Symbol.for("react.profiler"),Q=Symbol.for("react.consumer"),K=Symbol.for("react.context"),ee=Symbol.for("react.forward_ref"),re=Symbol.for("react.suspense"),te=Symbol.for("react.suspense_list"),ne=Symbol.for("react.memo"),R=Symbol.for("react.lazy"),ae=Symbol.for("react.activity"),oe=Symbol.for("react.client.reference"),T=_.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,Y=Object.prototype.hasOwnProperty,ie=Array.isArray,w=console.createTask?console.createTask:function(){return null};_={react_stack_bottom_frame:function(e){return e()}};var $,I={},z=_.react_stack_bottom_frame.bind(_,s)(),F=w(f(s)),D={};h.Fragment=y,h.jsx=function(e,r,t){var n=1e4>T.recentlyCreatedOwnerStacks++;return C(e,r,t,!1,n?Error("react-stack-top-frame"):z,n?w(f(e)):F)},h.jsxs=function(e,r,t){var n=1e4>T.recentlyCreatedOwnerStacks++;return C(e,r,t,!0,n?Error("react-stack-top-frame"):z,n?w(f(e)):F)}})()),h}var N;function X(){return N||(N=1,process.env.NODE_ENV==="production"?E.exports=U():E.exports=W()),E.exports}var o=X();const l=(()=>{const c=document.createElement("style");return c.textContent=`
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+
+    .navbar {
+      position: sticky;
+      top: 0;
+      z-index: 1000;
+      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+      backdrop-filter: blur(10px);
+    }
+
+    .navContainer {
+      max-width: 1200px;
+      margin: 0 auto;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 1rem 2rem;
+    }
+
+    .logo {
+      font-size: 1.8rem;
+      font-weight: 700;
+      letter-spacing: 2px;
+      background: linear-gradient(135deg, #00d8ff 0%, #0099cc 100%);
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      background-clip: text;
+      cursor: pointer;
+      transition: transform 0.3s ease;
+    }
+
+    .logo:hover {
+      transform: scale(1.05);
+    }
+
+    .navMenu {
+      display: flex;
+      list-style: none;
+      gap: 2.5rem;
+      align-items: center;
+    }
+
+    .navLink {
+      position: relative;
+      text-decoration: none;
+      color: #e0e0e0;
+      font-weight: 500;
+      font-size: 1rem;
+      padding: 0.5rem 0;
+      transition: color 0.3s ease;
+    }
+
+    .navLink::after {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      width: 0;
+      height: 2px;
+      background: linear-gradient(90deg, #00d8ff, #0099cc);
+      transition: width 0.3s ease;
+    }
+
+    .navLink:hover {
+      color: #00d8ff;
+    }
+
+    .navLink:hover::after {
+      width: 100%;
+    }
+
+    .hamburger {
+      display: none;
+      flex-direction: column;
+      justify-content: space-between;
+      width: 28px;
+      height: 22px;
+      background: none;
+      border: none;
+      cursor: pointer;
+      padding: 0;
+      z-index: 1001;
+    }
+
+    .bar {
+      width: 100%;
+      height: 3px;
+      background: #00d8ff;
+      border-radius: 3px;
+      transition: all 0.3s ease;
+    }
+
+    .hamburger.active .bar:nth-child(1) {
+      transform: translateY(9.5px) rotate(45deg);
+    }
+
+    .hamburger.active .bar:nth-child(2) {
+      opacity: 0;
+      transform: translateX(-20px);
+    }
+
+    .hamburger.active .bar:nth-child(3) {
+      transform: translateY(-9.5px) rotate(-45deg);
+    }
+
+    .demoContent {
+      padding: 4rem 2rem;
+      max-width: 1200px;
+      margin: 0 auto;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+    }
+
+    .demoSection {
+      margin-bottom: 3rem;
+      padding: 3rem 2rem;
+      background: #f8f9fa;
+      border-radius: 12px;
+      scroll-margin-top: 80px;
+    }
+
+    .demoSection h2 {
+      color: #1a1a2e;
+      margin-bottom: 1rem;
+      font-size: 2rem;
+    }
+
+    .demoSection p {
+      color: #666;
+      line-height: 1.8;
+      font-size: 1.1rem;
+    }
+
+    @media (max-width: 768px) {
+      .hamburger {
+        display: flex;
+      }
+
+      .navMenu {
+        position: fixed;
+        top: 0;
+        right: 0;
+        height: 100vh;
+        width: 280px;
+        flex-direction: column;
+        justify-content: flex-start;
+        padding-top: 5rem;
+        gap: 0;
+        background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
+        box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
+        transform: translateX(100%);
+        transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
+      }
+
+      .navMenu.open {
+        transform: translateX(0);
+      }
+
+      .navMenu li {
+        width: 100%;
+        opacity: 0;
+        transform: translateX(50px);
+      }
+
+      .navMenu.open li {
+        animation: slideIn 0.4s forwards;
+      }
+
+      .navMenu.open li:nth-child(1) { animation-delay: 0.1s; }
+      .navMenu.open li:nth-child(2) { animation-delay: 0.2s; }
+      .navMenu.open li:nth-child(3) { animation-delay: 0.3s; }
+      .navMenu.open li:nth-child(4) { animation-delay: 0.4s; }
+
+      @keyframes slideIn {
+        to {
+          opacity: 1;
+          transform: translateX(0);
+        }
+      }
+
+      .navLink {
+        display: block;
+        padding: 1.2rem 2rem;
+        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+        font-size: 1.1rem;
+      }
+
+      .navLink::after {
+        display: none;
+      }
+
+      .navLink:hover {
+        background: rgba(0, 216, 255, 0.1);
+      }
+    }
+
+    @media (max-width: 480px) {
+      .navContainer {
+        padding: 1rem 1.5rem;
+      }
+
+      .logo {
+        font-size: 1.5rem;
+      }
+
+      .navMenu {
+        width: 100%;
+      }
+    }
+  `,document.head.querySelector("[data-navbar-styles]")||(c.setAttribute("data-navbar-styles",""),document.head.appendChild(c)),{navbar:"navbar",navContainer:"navContainer",logo:"logo",navMenu:"navMenu",navLink:"navLink",hamburger:"hamburger",bar:"bar",active:"active",open:"open",demoContent:"demoContent",demoSection:"demoSection"}})();function q({brand:c="TOSA",links:m=["Home","About","Services","Contact"]}){const[u,f]=p.useState(!1);return o.jsxs(o.Fragment,{children:[o.jsx("nav",{className:l.navbar,children:o.jsxs("div",{className:l.navContainer,children:[o.jsx("div",{className:l.logo,children:c}),o.jsxs("button",{className:`${l.hamburger} ${u?l.active:""}`,onClick:()=>f(!u),"aria-label":"Toggle menu","aria-expanded":u,children:[o.jsx("span",{className:l.bar}),o.jsx("span",{className:l.bar}),o.jsx("span",{className:l.bar})]}),o.jsx("ul",{className:`${l.navMenu} ${u?l.open:""}`,children:m.map((i,s)=>o.jsx("li",{children:o.jsx("a",{href:`#${i.toLowerCase()}`,className:l.navLink,onClick:()=>f(!1),children:i})},s))})]})}),o.jsx("div",{className:l.demoContent,children:m.map((i,s)=>o.jsxs("section",{id:i.toLowerCase(),className:l.demoSection,children:[o.jsx("h2",{children:i}),o.jsxs("p",{children:["This is the ",i," section. The navbar stays fixed at the top and smoothly transitions on mobile devices. Scroll down to see the sticky behavior in action. The navigation links will smoothly scroll to each section."]})]},s))})]})}function J(){return o.jsx("nav",{children:o.jsx("h1",{children:"Hello cards"})})}d.Card=J,d.Navbar=q,Object.defineProperty(d,Symbol.toStringTag,{value:"Module"})}));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sachin-tosa/tosa",
-  "version": "1.0.2",
+  "version": "1.0.4",
   "description": "TOSA is a reusable React UI component library with responsive components like Navbar, Cards, Carousel, etc.",
   "author": "Sachin Ruhela",
   "license": "MIT",
@@ -28,6 +28,8 @@
     "react-dom": ">=18"
   },
   "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "@vitejs/plugin-react": "^5.1.2",
     "vite": "^7.3.1"
   }

package/dist/tosa.css

@@ -1 +0,0 @@
-._nav_10qgk_1{display:flex;justify-content:space-between;padding:1rem;background:#111;color:#fff}._menu_10qgk_17{display:flex;gap:1rem}._toggle_10qgk_27{display:none}@media(max-width:768px){._toggle_10qgk_27{display:block}._menu_10qgk_17{display:none;flex-direction:column}._open_10qgk_55{display:flex}}