@sachin-tosa/tosa 1.0.3 → 1.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/tosa.es.js +626 -142
  2. package/dist/tosa.umd.js +422 -2
  3. package/package.json +1 -1
  4. package/dist/tosa.css +0 -1
package/dist/tosa.es.js CHANGED
@@ -1,48 +1,48 @@
1
- import re, { useState as te } from "react";
2
- var T = { exports: {} }, E = {};
3
- var F;
4
- function ne() {
5
- if (F) return E;
6
- F = 1;
7
- var l = /* @__PURE__ */ Symbol.for("react.transitional.element"), f = /* @__PURE__ */ Symbol.for("react.fragment");
8
- function u(c, o, s) {
9
- var m = null;
10
- if (s !== void 0 && (m = "" + s), o.key !== void 0 && (m = "" + o.key), "key" in o) {
11
- s = {};
12
- for (var _ in o)
13
- _ !== "key" && (s[_] = o[_]);
14
- } else s = o;
15
- return o = s.ref, {
16
- $$typeof: l,
17
- type: c,
18
- key: m,
19
- ref: o !== void 0 ? o : null,
20
- props: s
1
+ import te, { useState as ne } from "react";
2
+ var k = { exports: {} }, g = {};
3
+ var $;
4
+ function ae() {
5
+ if ($) return g;
6
+ $ = 1;
7
+ var s = /* @__PURE__ */ Symbol.for("react.transitional.element"), f = /* @__PURE__ */ Symbol.for("react.fragment");
8
+ function d(u, i, l) {
9
+ var p = null;
10
+ if (l !== void 0 && (p = "" + l), i.key !== void 0 && (p = "" + i.key), "key" in i) {
11
+ l = {};
12
+ for (var h in i)
13
+ h !== "key" && (l[h] = i[h]);
14
+ } else l = i;
15
+ return i = l.ref, {
16
+ $$typeof: s,
17
+ type: u,
18
+ key: p,
19
+ ref: i !== void 0 ? i : null,
20
+ props: l
21
21
  };
22
22
  }
23
- return E.Fragment = f, E.jsx = u, E.jsxs = u, E;
23
+ return g.Fragment = f, g.jsx = d, g.jsxs = d, g;
24
24
  }
25
- var v = {};
26
- var D;
27
- function ae() {
28
- return D || (D = 1, process.env.NODE_ENV !== "production" && (function() {
29
- function l(e) {
25
+ var x = {};
26
+ var I;
27
+ function oe() {
28
+ return I || (I = 1, process.env.NODE_ENV !== "production" && (function() {
29
+ function s(e) {
30
30
  if (e == null) return null;
31
31
  if (typeof e == "function")
32
- return e.$$typeof === Q ? null : e.displayName || e.name || null;
32
+ return e.$$typeof === K ? null : e.displayName || e.name || null;
33
33
  if (typeof e == "string") return e;
34
34
  switch (e) {
35
- case k:
35
+ case w:
36
36
  return "Fragment";
37
- case J:
37
+ case q:
38
38
  return "Profiler";
39
- case U:
39
+ case G:
40
40
  return "StrictMode";
41
- case X:
42
- return "Suspense";
43
41
  case H:
42
+ return "Suspense";
43
+ case B:
44
44
  return "SuspenseList";
45
- case Z:
45
+ case Q:
46
46
  return "Activity";
47
47
  }
48
48
  if (typeof e == "object")
@@ -51,19 +51,19 @@ function ae() {
51
51
  ), e.$$typeof) {
52
52
  case W:
53
53
  return "Portal";
54
- case z:
54
+ case J:
55
55
  return e.displayName || "Context";
56
- case V:
56
+ case X:
57
57
  return (e._context.displayName || "Context") + ".Consumer";
58
- case G:
58
+ case V:
59
59
  var r = e.render;
60
60
  return e = e.displayName, e || (e = r.displayName || r.name || "", e = e !== "" ? "ForwardRef(" + e + ")" : "ForwardRef"), e;
61
- case B:
62
- return r = e.displayName || null, r !== null ? r : l(e.type) || "Memo";
63
- case g:
61
+ case Z:
62
+ return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
63
+ case S:
64
64
  r = e._payload, e = e._init;
65
65
  try {
66
- return l(e(r));
66
+ return s(e(r));
67
67
  } catch {
68
68
  }
69
69
  }
@@ -72,7 +72,7 @@ function ae() {
72
72
  function f(e) {
73
73
  return "" + e;
74
74
  }
75
- function u(e) {
75
+ function d(e) {
76
76
  try {
77
77
  f(e);
78
78
  var r = !1;
@@ -81,68 +81,68 @@ function ae() {
81
81
  }
82
82
  if (r) {
83
83
  r = console;
84
- var t = r.error, n = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
85
- return t.call(
84
+ var n = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
85
+ return n.call(
86
86
  r,
87
87
  "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
88
- n
88
+ a
89
89
  ), f(e);
90
90
  }
91
91
  }
92
- function c(e) {
93
- if (e === k) return "<>";
94
- if (typeof e == "object" && e !== null && e.$$typeof === g)
92
+ function u(e) {
93
+ if (e === w) return "<>";
94
+ if (typeof e == "object" && e !== null && e.$$typeof === S)
95
95
  return "<...>";
96
96
  try {
97
- var r = l(e);
97
+ var r = s(e);
98
98
  return r ? "<" + r + ">" : "<...>";
99
99
  } catch {
100
100
  return "<...>";
101
101
  }
102
102
  }
103
- function o() {
104
- var e = O.A;
103
+ function i() {
104
+ var e = E.A;
105
105
  return e === null ? null : e.getOwner();
106
106
  }
107
- function s() {
107
+ function l() {
108
108
  return Error("react-stack-top-frame");
109
109
  }
110
- function m(e) {
111
- if (w.call(e, "key")) {
110
+ function p(e) {
111
+ if (O.call(e, "key")) {
112
112
  var r = Object.getOwnPropertyDescriptor(e, "key").get;
113
113
  if (r && r.isReactWarning) return !1;
114
114
  }
115
115
  return e.key !== void 0;
116
116
  }
117
- function _(e, r) {
118
- function t() {
119
- N || (N = !0, console.error(
117
+ function h(e, r) {
118
+ function n() {
119
+ A || (A = !0, console.error(
120
120
  "%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)",
121
121
  r
122
122
  ));
123
123
  }
124
- t.isReactWarning = !0, Object.defineProperty(e, "key", {
125
- get: t,
124
+ n.isReactWarning = !0, Object.defineProperty(e, "key", {
125
+ get: n,
126
126
  configurable: !0
127
127
  });
128
128
  }
129
- function L() {
130
- var e = l(this.type);
131
- return C[e] || (C[e] = !0, console.error(
129
+ function U() {
130
+ var e = s(this.type);
131
+ return z[e] || (z[e] = !0, console.error(
132
132
  "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."
133
133
  )), e = this.props.ref, e !== void 0 ? e : null;
134
134
  }
135
- function M(e, r, t, n, R, j) {
136
- var a = t.ref;
135
+ function D(e, r, n, a, y, T) {
136
+ var o = n.ref;
137
137
  return e = {
138
- $$typeof: y,
138
+ $$typeof: C,
139
139
  type: e,
140
140
  key: r,
141
- props: t,
142
- _owner: n
143
- }, (a !== void 0 ? a : null) !== null ? Object.defineProperty(e, "ref", {
141
+ props: n,
142
+ _owner: a
143
+ }, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
144
144
  enumerable: !1,
145
- get: L
145
+ get: U
146
146
  }) : Object.defineProperty(e, "ref", { enumerable: !1, value: null }), e._store = {}, Object.defineProperty(e._store, "validated", {
147
147
  configurable: !1,
148
148
  enumerable: !1,
@@ -157,126 +157,610 @@ function ae() {
157
157
  configurable: !1,
158
158
  enumerable: !1,
159
159
  writable: !0,
160
- value: R
160
+ value: y
161
161
  }), Object.defineProperty(e, "_debugTask", {
162
162
  configurable: !1,
163
163
  enumerable: !1,
164
164
  writable: !0,
165
- value: j
165
+ value: T
166
166
  }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
167
167
  }
168
- function S(e, r, t, n, R, j) {
169
- var a = r.children;
170
- if (a !== void 0)
171
- if (n)
172
- if (K(a)) {
173
- for (n = 0; n < a.length; n++)
174
- h(a[n]);
175
- Object.freeze && Object.freeze(a);
168
+ function j(e, r, n, a, y, T) {
169
+ var o = r.children;
170
+ if (o !== void 0)
171
+ if (a)
172
+ if (ee(o)) {
173
+ for (a = 0; a < o.length; a++)
174
+ N(o[a]);
175
+ Object.freeze && Object.freeze(o);
176
176
  } else
177
177
  console.error(
178
178
  "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
179
179
  );
180
- else h(a);
181
- if (w.call(r, "key")) {
182
- a = l(e);
183
- var d = Object.keys(r).filter(function(ee) {
184
- return ee !== "key";
180
+ else N(o);
181
+ if (O.call(r, "key")) {
182
+ o = s(e);
183
+ var b = Object.keys(r).filter(function(re) {
184
+ return re !== "key";
185
185
  });
186
- n = 0 < d.length ? "{key: someKey, " + d.join(": ..., ") + ": ...}" : "{key: someKey}", I[a + n] || (d = 0 < d.length ? "{" + d.join(": ..., ") + ": ...}" : "{}", console.error(
186
+ a = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", L[o + a] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
187
187
  `A props object containing a "key" prop is being spread into JSX:
188
188
  let props = %s;
189
189
  <%s {...props} />
190
190
  React keys must be passed directly to JSX without using spread:
191
191
  let props = %s;
192
192
  <%s key={someKey} {...props} />`,
193
- n,
194
193
  a,
195
- d,
196
- a
197
- ), I[a + n] = !0);
194
+ o,
195
+ b,
196
+ o
197
+ ), L[o + a] = !0);
198
198
  }
199
- if (a = null, t !== void 0 && (u(t), a = "" + t), m(r) && (u(r.key), a = "" + r.key), "key" in r) {
200
- t = {};
201
- for (var A in r)
202
- A !== "key" && (t[A] = r[A]);
203
- } else t = r;
204
- return a && _(
205
- t,
199
+ if (o = null, n !== void 0 && (d(n), o = "" + n), p(r) && (d(r.key), o = "" + r.key), "key" in r) {
200
+ n = {};
201
+ for (var R in r)
202
+ R !== "key" && (n[R] = r[R]);
203
+ } else n = r;
204
+ return o && h(
205
+ n,
206
206
  typeof e == "function" ? e.displayName || e.name || "Unknown" : e
207
- ), M(
207
+ ), D(
208
208
  e,
209
- a,
210
- t,
211
- o(),
212
- R,
213
- j
209
+ o,
210
+ n,
211
+ i(),
212
+ y,
213
+ T
214
214
  );
215
215
  }
216
- function h(e) {
217
- 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));
216
+ function N(e) {
217
+ P(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === S && (e._payload.status === "fulfilled" ? P(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
218
218
  }
219
219
  function P(e) {
220
- return typeof e == "object" && e !== null && e.$$typeof === y;
220
+ return typeof e == "object" && e !== null && e.$$typeof === C;
221
221
  }
222
- 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() {
222
+ var v = te, C = /* @__PURE__ */ Symbol.for("react.transitional.element"), W = /* @__PURE__ */ Symbol.for("react.portal"), w = /* @__PURE__ */ Symbol.for("react.fragment"), G = /* @__PURE__ */ Symbol.for("react.strict_mode"), q = /* @__PURE__ */ Symbol.for("react.profiler"), X = /* @__PURE__ */ Symbol.for("react.consumer"), J = /* @__PURE__ */ Symbol.for("react.context"), V = /* @__PURE__ */ Symbol.for("react.forward_ref"), H = /* @__PURE__ */ Symbol.for("react.suspense"), B = /* @__PURE__ */ Symbol.for("react.suspense_list"), Z = /* @__PURE__ */ Symbol.for("react.memo"), S = /* @__PURE__ */ Symbol.for("react.lazy"), Q = /* @__PURE__ */ Symbol.for("react.activity"), K = /* @__PURE__ */ Symbol.for("react.client.reference"), E = v.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, O = Object.prototype.hasOwnProperty, ee = Array.isArray, _ = console.createTask ? console.createTask : function() {
223
223
  return null;
224
224
  };
225
- p = {
225
+ v = {
226
226
  react_stack_bottom_frame: function(e) {
227
227
  return e();
228
228
  }
229
229
  };
230
- var N, C = {}, Y = p.react_stack_bottom_frame.bind(
231
- p,
232
- s
233
- )(), $ = x(c(s)), I = {};
234
- v.Fragment = k, v.jsx = function(e, r, t) {
235
- var n = 1e4 > O.recentlyCreatedOwnerStacks++;
236
- return S(
230
+ var A, z = {}, Y = v.react_stack_bottom_frame.bind(
231
+ v,
232
+ l
233
+ )(), M = _(u(l)), L = {};
234
+ x.Fragment = w, x.jsx = function(e, r, n) {
235
+ var a = 1e4 > E.recentlyCreatedOwnerStacks++;
236
+ return j(
237
237
  e,
238
238
  r,
239
- t,
239
+ n,
240
240
  !1,
241
- n ? Error("react-stack-top-frame") : Y,
242
- n ? x(c(e)) : $
241
+ a ? Error("react-stack-top-frame") : Y,
242
+ a ? _(u(e)) : M
243
243
  );
244
- }, v.jsxs = function(e, r, t) {
245
- var n = 1e4 > O.recentlyCreatedOwnerStacks++;
246
- return S(
244
+ }, x.jsxs = function(e, r, n) {
245
+ var a = 1e4 > E.recentlyCreatedOwnerStacks++;
246
+ return j(
247
247
  e,
248
248
  r,
249
- t,
249
+ n,
250
250
  !0,
251
- n ? Error("react-stack-top-frame") : Y,
252
- n ? x(c(e)) : $
251
+ a ? Error("react-stack-top-frame") : Y,
252
+ a ? _(u(e)) : M
253
253
  );
254
254
  };
255
- })()), v;
255
+ })()), x;
256
256
  }
257
- var q;
258
- function oe() {
259
- return q || (q = 1, process.env.NODE_ENV === "production" ? T.exports = ne() : T.exports = ae()), T.exports;
257
+ var F;
258
+ function ie() {
259
+ return F || (F = 1, process.env.NODE_ENV === "production" ? k.exports = ae() : k.exports = oe()), k.exports;
260
260
  }
261
- var i = oe();
262
- const se = "_nav_10qgk_1", le = "_menu_10qgk_17", ue = "_toggle_10qgk_27", ce = "_open_10qgk_55", b = {
263
- nav: se,
264
- menu: le,
265
- toggle: ue,
266
- open: ce
267
- };
268
- function fe({ brand: l = "TOSA", links: f = [] }) {
269
- const [u, c] = te(!1);
270
- return /* @__PURE__ */ i.jsxs("nav", { className: b.nav, children: [
271
- /* @__PURE__ */ i.jsx("div", { className: b.logo, children: l }),
272
- /* @__PURE__ */ i.jsx("button", { className: b.toggle, onClick: () => c(!u), children: "☰" }),
273
- /* @__PURE__ */ i.jsx("ul", { className: `${b.menu} ${u ? b.open : ""}`, children: f.map((o, s) => /* @__PURE__ */ i.jsx("li", { children: o }, s)) })
261
+ var t = ie();
262
+ const c = (() => {
263
+ const s = document.createElement("style");
264
+ return s.textContent = `
265
+ * {
266
+ margin: 0;
267
+ padding: 0;
268
+ box-sizing: border-box;
269
+ }
270
+
271
+ .navbar {
272
+ position: sticky;
273
+ top: 0;
274
+ z-index: 1000;
275
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
276
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
277
+ backdrop-filter: blur(10px);
278
+ }
279
+
280
+ .navContainer {
281
+ max-width: 1200px;
282
+ margin: 0 auto;
283
+ display: flex;
284
+ justify-content: space-between;
285
+ align-items: center;
286
+ padding: 1rem 2rem;
287
+ }
288
+
289
+ .logo {
290
+ font-size: 1.8rem;
291
+ font-weight: 700;
292
+ letter-spacing: 2px;
293
+ background: linear-gradient(135deg, #00d8ff 0%, #0099cc 100%);
294
+ -webkit-background-clip: text;
295
+ -webkit-text-fill-color: transparent;
296
+ background-clip: text;
297
+ cursor: pointer;
298
+ transition: transform 0.3s ease;
299
+ }
300
+
301
+ .logo:hover {
302
+ transform: scale(1.05);
303
+ }
304
+
305
+ .navMenu {
306
+ display: flex;
307
+ list-style: none;
308
+ gap: 2.5rem;
309
+ align-items: center;
310
+ }
311
+
312
+ .navLink {
313
+ position: relative;
314
+ text-decoration: none;
315
+ color: #e0e0e0;
316
+ font-weight: 500;
317
+ font-size: 1rem;
318
+ padding: 0.5rem 0;
319
+ transition: color 0.3s ease;
320
+ }
321
+
322
+ .navLink::after {
323
+ content: '';
324
+ position: absolute;
325
+ bottom: 0;
326
+ left: 0;
327
+ width: 0;
328
+ height: 2px;
329
+ background: linear-gradient(90deg, #00d8ff, #0099cc);
330
+ transition: width 0.3s ease;
331
+ }
332
+
333
+ .navLink:hover {
334
+ color: #00d8ff;
335
+ }
336
+
337
+ .navLink:hover::after {
338
+ width: 100%;
339
+ }
340
+
341
+ .hamburger {
342
+ display: none;
343
+ flex-direction: column;
344
+ justify-content: space-between;
345
+ width: 28px;
346
+ height: 22px;
347
+ background: none;
348
+ border: none;
349
+ cursor: pointer;
350
+ padding: 0;
351
+ z-index: 1001;
352
+ }
353
+
354
+ .bar {
355
+ width: 100%;
356
+ height: 3px;
357
+ background: #00d8ff;
358
+ border-radius: 3px;
359
+ transition: all 0.3s ease;
360
+ }
361
+
362
+ .hamburger.active .bar:nth-child(1) {
363
+ transform: translateY(9.5px) rotate(45deg);
364
+ }
365
+
366
+ .hamburger.active .bar:nth-child(2) {
367
+ opacity: 0;
368
+ transform: translateX(-20px);
369
+ }
370
+
371
+ .hamburger.active .bar:nth-child(3) {
372
+ transform: translateY(-9.5px) rotate(-45deg);
373
+ }
374
+
375
+ .demoContent {
376
+ padding: 4rem 2rem;
377
+ max-width: 1200px;
378
+ margin: 0 auto;
379
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
380
+ }
381
+
382
+ .demoSection {
383
+ margin-bottom: 3rem;
384
+ padding: 3rem 2rem;
385
+ background: #f8f9fa;
386
+ border-radius: 12px;
387
+ scroll-margin-top: 80px;
388
+ }
389
+
390
+ .demoSection h2 {
391
+ color: #1a1a2e;
392
+ margin-bottom: 1rem;
393
+ font-size: 2rem;
394
+ }
395
+
396
+ .demoSection p {
397
+ color: #666;
398
+ line-height: 1.8;
399
+ font-size: 1.1rem;
400
+ }
401
+
402
+ @media (max-width: 768px) {
403
+ .hamburger {
404
+ display: flex;
405
+ }
406
+
407
+ .navMenu {
408
+ position: fixed;
409
+ top: 0;
410
+ right: 0;
411
+ height: 100vh;
412
+ width: 280px;
413
+ flex-direction: column;
414
+ justify-content: flex-start;
415
+ padding-top: 5rem;
416
+ gap: 0;
417
+ background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
418
+ box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
419
+ transform: translateX(100%);
420
+ transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
421
+ }
422
+
423
+ .navMenu.open {
424
+ transform: translateX(0);
425
+ }
426
+
427
+ .navMenu li {
428
+ width: 100%;
429
+ opacity: 0;
430
+ transform: translateX(50px);
431
+ }
432
+
433
+ .navMenu.open li {
434
+ animation: slideIn 0.4s forwards;
435
+ }
436
+
437
+ .navMenu.open li:nth-child(1) { animation-delay: 0.1s; }
438
+ .navMenu.open li:nth-child(2) { animation-delay: 0.2s; }
439
+ .navMenu.open li:nth-child(3) { animation-delay: 0.3s; }
440
+ .navMenu.open li:nth-child(4) { animation-delay: 0.4s; }
441
+
442
+ @keyframes slideIn {
443
+ to {
444
+ opacity: 1;
445
+ transform: translateX(0);
446
+ }
447
+ }
448
+
449
+ .navLink {
450
+ display: block;
451
+ padding: 1.2rem 2rem;
452
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
453
+ font-size: 1.1rem;
454
+ }
455
+
456
+ .navLink::after {
457
+ display: none;
458
+ }
459
+
460
+ .navLink:hover {
461
+ background: rgba(0, 216, 255, 0.1);
462
+ }
463
+ }
464
+
465
+ @media (max-width: 480px) {
466
+ .navContainer {
467
+ padding: 1rem 1.5rem;
468
+ }
469
+
470
+ .logo {
471
+ font-size: 1.5rem;
472
+ }
473
+
474
+ .navMenu {
475
+ width: 100%;
476
+ }
477
+ }
478
+ `, document.head.querySelector("[data-navbar-styles]") || (s.setAttribute("data-navbar-styles", ""), document.head.appendChild(s)), {
479
+ navbar: "navbar",
480
+ navContainer: "navContainer",
481
+ logo: "logo",
482
+ navMenu: "navMenu",
483
+ navLink: "navLink",
484
+ hamburger: "hamburger",
485
+ bar: "bar",
486
+ active: "active",
487
+ open: "open",
488
+ demoContent: "demoContent",
489
+ demoSection: "demoSection"
490
+ };
491
+ })();
492
+ function le({ brand: s = "TOSA", links: f = ["Home", "About", "Services", "Contact"] }) {
493
+ const [d, u] = ne(!1);
494
+ return /* @__PURE__ */ t.jsxs(t.Fragment, { children: [
495
+ /* @__PURE__ */ t.jsx("nav", { className: c.navbar, children: /* @__PURE__ */ t.jsxs("div", { className: c.navContainer, children: [
496
+ /* @__PURE__ */ t.jsx("div", { className: c.logo, children: s }),
497
+ /* @__PURE__ */ t.jsxs(
498
+ "button",
499
+ {
500
+ className: `${c.hamburger} ${d ? c.active : ""}`,
501
+ onClick: () => u(!d),
502
+ "aria-label": "Toggle menu",
503
+ "aria-expanded": d,
504
+ children: [
505
+ /* @__PURE__ */ t.jsx("span", { className: c.bar }),
506
+ /* @__PURE__ */ t.jsx("span", { className: c.bar }),
507
+ /* @__PURE__ */ t.jsx("span", { className: c.bar })
508
+ ]
509
+ }
510
+ ),
511
+ /* @__PURE__ */ t.jsx("ul", { className: `${c.navMenu} ${d ? c.open : ""}`, children: f.map((i, l) => /* @__PURE__ */ t.jsx("li", { children: /* @__PURE__ */ t.jsx(
512
+ "a",
513
+ {
514
+ href: `#${i.toLowerCase()}`,
515
+ className: c.navLink,
516
+ onClick: () => u(!1),
517
+ children: i
518
+ }
519
+ ) }, l)) })
520
+ ] }) }),
521
+ /* @__PURE__ */ t.jsx("div", { className: c.demoContent, children: f.map((i, l) => /* @__PURE__ */ t.jsxs("section", { id: i.toLowerCase(), className: c.demoSection, children: [
522
+ /* @__PURE__ */ t.jsx("h2", { children: i }),
523
+ /* @__PURE__ */ t.jsxs("p", { children: [
524
+ "This is the ",
525
+ i,
526
+ " 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."
527
+ ] })
528
+ ] }, l)) })
274
529
  ] });
275
530
  }
531
+ function ce() {
532
+ return /* @__PURE__ */ t.jsx("nav", { children: /* @__PURE__ */ t.jsx("h1", { children: "Hello cards" }) });
533
+ }
534
+ const m = (() => {
535
+ const s = document.createElement("style");
536
+ return s.textContent = `
537
+ * {
538
+ margin: 0;
539
+ padding: 0;
540
+ box-sizing: border-box;
541
+ }
542
+
543
+ .heroSection {
544
+ min-height: 100vh;
545
+ display: flex;
546
+ flex-direction: column;
547
+ justify-content: center;
548
+ align-items: center;
549
+ padding: 2rem;
550
+ background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
551
+ position: relative;
552
+ overflow: hidden;
553
+ }
554
+
555
+ .heroSection::before {
556
+ content: '';
557
+ position: absolute;
558
+ top: 0;
559
+ left: 0;
560
+ right: 0;
561
+ bottom: 0;
562
+ background:
563
+ radial-gradient(circle at 20% 50%, rgba(0, 216, 255, 0.1) 0%, transparent 50%),
564
+ radial-gradient(circle at 80% 80%, rgba(0, 153, 204, 0.1) 0%, transparent 50%);
565
+ pointer-events: none;
566
+ }
567
+
568
+ .heroContent {
569
+ max-width: 1200px;
570
+ text-align: center;
571
+ z-index: 1;
572
+ animation: fadeInUp 1s ease-out;
573
+ }
574
+
575
+ @keyframes fadeInUp {
576
+ from {
577
+ opacity: 0;
578
+ transform: translateY(30px);
579
+ }
580
+ to {
581
+ opacity: 1;
582
+ transform: translateY(0);
583
+ }
584
+ }
585
+
586
+ .heroTitle {
587
+ font-size: 4.5rem;
588
+ font-weight: 800;
589
+ color: #fff;
590
+ margin-bottom: 1.5rem;
591
+ line-height: 1.2;
592
+ background: linear-gradient(135deg, #fff 0%, #00d8ff 100%);
593
+ -webkit-background-clip: text;
594
+ -webkit-text-fill-color: transparent;
595
+ background-clip: text;
596
+ animation: fadeInUp 1s ease-out 0.2s backwards;
597
+ }
598
+
599
+ .heroSubtitle {
600
+ font-size: 1.3rem;
601
+ color: #b8b8b8;
602
+ margin-bottom: 3rem;
603
+ line-height: 1.8;
604
+ max-width: 700px;
605
+ margin-left: auto;
606
+ margin-right: auto;
607
+ animation: fadeInUp 1s ease-out 0.4s backwards;
608
+ }
609
+
610
+ .buttonGroup {
611
+ display: flex;
612
+ gap: 1.5rem;
613
+ justify-content: center;
614
+ flex-wrap: wrap;
615
+ animation: fadeInUp 1s ease-out 0.6s backwards;
616
+ }
617
+
618
+ .btnPrimary {
619
+ padding: 1rem 2.5rem;
620
+ font-size: 1.1rem;
621
+ font-weight: 600;
622
+ border: none;
623
+ border-radius: 50px;
624
+ cursor: pointer;
625
+ transition: all 0.3s ease;
626
+ background: linear-gradient(135deg, #00d8ff 0%, #0099cc 100%);
627
+ color: #fff;
628
+ box-shadow: 0 4px 15px rgba(0, 216, 255, 0.3);
629
+ position: relative;
630
+ overflow: hidden;
631
+ }
632
+
633
+ .btnPrimary::before {
634
+ content: '';
635
+ position: absolute;
636
+ top: 0;
637
+ left: -100%;
638
+ width: 100%;
639
+ height: 100%;
640
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
641
+ transition: left 0.5s ease;
642
+ }
643
+
644
+ .btnPrimary:hover::before {
645
+ left: 100%;
646
+ }
647
+
648
+ .btnPrimary:hover {
649
+ transform: translateY(-3px);
650
+ box-shadow: 0 6px 25px rgba(0, 216, 255, 0.5);
651
+ }
652
+
653
+ .btnPrimary:active {
654
+ transform: translateY(-1px);
655
+ }
656
+
657
+ .btnSecondary {
658
+ padding: 1rem 2.5rem;
659
+ font-size: 1.1rem;
660
+ font-weight: 600;
661
+ border: 2px solid #00d8ff;
662
+ border-radius: 50px;
663
+ cursor: pointer;
664
+ transition: all 0.3s ease;
665
+ background: transparent;
666
+ color: #00d8ff;
667
+ position: relative;
668
+ overflow: hidden;
669
+ }
670
+
671
+ .btnSecondary::before {
672
+ content: '';
673
+ position: absolute;
674
+ top: 50%;
675
+ left: 50%;
676
+ width: 0;
677
+ height: 0;
678
+ border-radius: 50%;
679
+ background: #00d8ff;
680
+ transform: translate(-50%, -50%);
681
+ transition: width 0.5s ease, height 0.5s ease;
682
+ z-index: -1;
683
+ }
684
+
685
+ .btnSecondary:hover::before {
686
+ width: 300px;
687
+ height: 300px;
688
+ }
689
+
690
+ .btnSecondary:hover {
691
+ color: #fff;
692
+ border-color: #00d8ff;
693
+ transform: translateY(-3px);
694
+ box-shadow: 0 6px 25px rgba(0, 216, 255, 0.3);
695
+ }
696
+
697
+ .btnSecondary:active {
698
+ transform: translateY(-1px);
699
+ }
700
+
701
+ @media (max-width: 768px) {
702
+ .heroTitle {
703
+ font-size: 3rem;
704
+ }
705
+
706
+ .heroSubtitle {
707
+ font-size: 1.1rem;
708
+ margin-bottom: 2rem;
709
+ }
710
+
711
+ .buttonGroup {
712
+ flex-direction: column;
713
+ gap: 1rem;
714
+ }
715
+
716
+ .btnPrimary,
717
+ .btnSecondary {
718
+ width: 100%;
719
+ max-width: 300px;
720
+ }
721
+ }
722
+
723
+ @media (max-width: 480px) {
724
+ .heroSection {
725
+ padding: 1.5rem;
726
+ }
727
+
728
+ .heroTitle {
729
+ font-size: 2.2rem;
730
+ }
731
+
732
+ .heroSubtitle {
733
+ font-size: 1rem;
734
+ }
735
+
736
+ .btnPrimary,
737
+ .btnSecondary {
738
+ padding: 0.9rem 2rem;
739
+ font-size: 1rem;
740
+ }
741
+ }
742
+ `, document.head.querySelector("[data-hero-styles]") || (s.setAttribute("data-hero-styles", ""), document.head.appendChild(s)), {
743
+ heroSection: "heroSection",
744
+ heroContent: "heroContent",
745
+ heroTitle: "heroTitle",
746
+ heroSubtitle: "heroSubtitle",
747
+ buttonGroup: "buttonGroup",
748
+ btnPrimary: "btnPrimary",
749
+ btnSecondary: "btnSecondary"
750
+ };
751
+ })();
276
752
  function de() {
277
- return /* @__PURE__ */ i.jsx("nav", { children: /* @__PURE__ */ i.jsx("h1", { children: "Hello cards" }) });
753
+ return /* @__PURE__ */ t.jsx("section", { className: m.heroSection, children: /* @__PURE__ */ t.jsxs("div", { className: m.heroContent, children: [
754
+ /* @__PURE__ */ t.jsx("h1", { className: m.heroTitle, children: "Welcome to the Future" }),
755
+ /* @__PURE__ */ t.jsx("p", { className: m.heroSubtitle, children: "Discover innovative solutions that transform your ideas into reality. We're here to help you build something extraordinary and take your vision to the next level." }),
756
+ /* @__PURE__ */ t.jsxs("div", { className: m.buttonGroup, children: [
757
+ /* @__PURE__ */ t.jsx("button", { className: m.btnPrimary, children: "Get Started" }),
758
+ /* @__PURE__ */ t.jsx("button", { className: m.btnSecondary, children: "Learn More" })
759
+ ] })
760
+ ] }) });
278
761
  }
279
762
  export {
280
- de as Card,
281
- fe as Navbar
763
+ ce as Card,
764
+ de as HeroSection,
765
+ le as Navbar
282
766
  };
package/dist/tosa.umd.js CHANGED
@@ -1,6 +1,426 @@
1
- (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:
1
+ (function(u,p){typeof exports=="object"&&typeof module<"u"?p(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],p):(u=typeof globalThis<"u"?globalThis:u||self,p(u.Tosa={},u.React))})(this,(function(u,p){"use strict";var k={exports:{}},g={};var P;function W(){if(P)return g;P=1;var s=Symbol.for("react.transitional.element"),b=Symbol.for("react.fragment");function d(f,i,l){var v=null;if(l!==void 0&&(v=""+l),i.key!==void 0&&(v=""+i.key),"key"in i){l={};for(var y in i)y!=="key"&&(l[y]=i[y])}else l=i;return i=l.ref,{$$typeof:s,type:f,key:v,ref:i!==void 0?i:null,props:l}}return g.Fragment=b,g.jsx=d,g.jsxs=d,g}var x={};var C;function G(){return C||(C=1,process.env.NODE_ENV!=="production"&&(function(){function s(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===se?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case E:return"Fragment";case K:return"Profiler";case Q:return"StrictMode";case ne:return"Suspense";case ae:return"SuspenseList";case ie: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 Z:return"Portal";case re:return e.displayName||"Context";case ee:return(e._context.displayName||"Context")+".Consumer";case te:var r=e.render;return e=e.displayName,e||(e=r.displayName||r.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case oe:return r=e.displayName||null,r!==null?r:s(e.type)||"Memo";case _:r=e._payload,e=e._init;try{return s(e(r))}catch{}}return null}function b(e){return""+e}function d(e){try{b(e);var r=!1}catch{r=!0}if(r){r=console;var n=r.error,a=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(r,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",a),b(e)}}function f(e){if(e===E)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===_)return"<...>";try{var r=s(e);return r?"<"+r+">":"<...>"}catch{return"<...>"}}function i(){var e=T.A;return e===null?null:e.getOwner()}function l(){return Error("react-stack-top-frame")}function v(e){if(L.call(e,"key")){var r=Object.getOwnPropertyDescriptor(e,"key").get;if(r&&r.isReactWarning)return!1}return e.key!==void 0}function y(e,r){function n(){I||(I=!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))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function H(){var e=s(this.type);return $[e]||($[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 B(e,r,n,a,S,j){var o=n.ref;return e={$$typeof:M,type:e,key:r,props:n,_owner:a},(o!==void 0?o:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:H}):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:S}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:j}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function A(e,r,n,a,S,j){var o=r.children;if(o!==void 0)if(a)if(le(o)){for(a=0;a<o.length;a++)z(o[a]);Object.freeze&&Object.freeze(o)}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 z(o);if(L.call(r,"key")){o=s(e);var h=Object.keys(r).filter(function(ce){return ce!=="key"});a=0<h.length?"{key: someKey, "+h.join(": ..., ")+": ...}":"{key: someKey}",D[o+a]||(h=0<h.length?"{"+h.join(": ..., ")+": ...}":"{}",console.error(`A props object containing a "key" prop is being spread into JSX:
2
2
  let props = %s;
3
3
  <%s {...props} />
4
4
  React keys must be passed directly to JSX without using spread:
5
5
  let props = %s;
6
- <%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"})}));
6
+ <%s key={someKey} {...props} />`,a,o,h,o),D[o+a]=!0)}if(o=null,n!==void 0&&(d(n),o=""+n),v(r)&&(d(r.key),o=""+r.key),"key"in r){n={};for(var N in r)N!=="key"&&(n[N]=r[N])}else n=r;return o&&y(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),B(e,o,n,i(),S,j)}function z(e){Y(e)?e._store&&(e._store.validated=1):typeof e=="object"&&e!==null&&e.$$typeof===_&&(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===M}var w=p,M=Symbol.for("react.transitional.element"),Z=Symbol.for("react.portal"),E=Symbol.for("react.fragment"),Q=Symbol.for("react.strict_mode"),K=Symbol.for("react.profiler"),ee=Symbol.for("react.consumer"),re=Symbol.for("react.context"),te=Symbol.for("react.forward_ref"),ne=Symbol.for("react.suspense"),ae=Symbol.for("react.suspense_list"),oe=Symbol.for("react.memo"),_=Symbol.for("react.lazy"),ie=Symbol.for("react.activity"),se=Symbol.for("react.client.reference"),T=w.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,L=Object.prototype.hasOwnProperty,le=Array.isArray,R=console.createTask?console.createTask:function(){return null};w={react_stack_bottom_frame:function(e){return e()}};var I,$={},F=w.react_stack_bottom_frame.bind(w,l)(),U=R(f(l)),D={};x.Fragment=E,x.jsx=function(e,r,n){var a=1e4>T.recentlyCreatedOwnerStacks++;return A(e,r,n,!1,a?Error("react-stack-top-frame"):F,a?R(f(e)):U)},x.jsxs=function(e,r,n){var a=1e4>T.recentlyCreatedOwnerStacks++;return A(e,r,n,!0,a?Error("react-stack-top-frame"):F,a?R(f(e)):U)}})()),x}var O;function X(){return O||(O=1,process.env.NODE_ENV==="production"?k.exports=W():k.exports=G()),k.exports}var t=X();const c=(()=>{const s=document.createElement("style");return s.textContent=`
7
+ * {
8
+ margin: 0;
9
+ padding: 0;
10
+ box-sizing: border-box;
11
+ }
12
+
13
+ .navbar {
14
+ position: sticky;
15
+ top: 0;
16
+ z-index: 1000;
17
+ background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
18
+ box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
19
+ backdrop-filter: blur(10px);
20
+ }
21
+
22
+ .navContainer {
23
+ max-width: 1200px;
24
+ margin: 0 auto;
25
+ display: flex;
26
+ justify-content: space-between;
27
+ align-items: center;
28
+ padding: 1rem 2rem;
29
+ }
30
+
31
+ .logo {
32
+ font-size: 1.8rem;
33
+ font-weight: 700;
34
+ letter-spacing: 2px;
35
+ background: linear-gradient(135deg, #00d8ff 0%, #0099cc 100%);
36
+ -webkit-background-clip: text;
37
+ -webkit-text-fill-color: transparent;
38
+ background-clip: text;
39
+ cursor: pointer;
40
+ transition: transform 0.3s ease;
41
+ }
42
+
43
+ .logo:hover {
44
+ transform: scale(1.05);
45
+ }
46
+
47
+ .navMenu {
48
+ display: flex;
49
+ list-style: none;
50
+ gap: 2.5rem;
51
+ align-items: center;
52
+ }
53
+
54
+ .navLink {
55
+ position: relative;
56
+ text-decoration: none;
57
+ color: #e0e0e0;
58
+ font-weight: 500;
59
+ font-size: 1rem;
60
+ padding: 0.5rem 0;
61
+ transition: color 0.3s ease;
62
+ }
63
+
64
+ .navLink::after {
65
+ content: '';
66
+ position: absolute;
67
+ bottom: 0;
68
+ left: 0;
69
+ width: 0;
70
+ height: 2px;
71
+ background: linear-gradient(90deg, #00d8ff, #0099cc);
72
+ transition: width 0.3s ease;
73
+ }
74
+
75
+ .navLink:hover {
76
+ color: #00d8ff;
77
+ }
78
+
79
+ .navLink:hover::after {
80
+ width: 100%;
81
+ }
82
+
83
+ .hamburger {
84
+ display: none;
85
+ flex-direction: column;
86
+ justify-content: space-between;
87
+ width: 28px;
88
+ height: 22px;
89
+ background: none;
90
+ border: none;
91
+ cursor: pointer;
92
+ padding: 0;
93
+ z-index: 1001;
94
+ }
95
+
96
+ .bar {
97
+ width: 100%;
98
+ height: 3px;
99
+ background: #00d8ff;
100
+ border-radius: 3px;
101
+ transition: all 0.3s ease;
102
+ }
103
+
104
+ .hamburger.active .bar:nth-child(1) {
105
+ transform: translateY(9.5px) rotate(45deg);
106
+ }
107
+
108
+ .hamburger.active .bar:nth-child(2) {
109
+ opacity: 0;
110
+ transform: translateX(-20px);
111
+ }
112
+
113
+ .hamburger.active .bar:nth-child(3) {
114
+ transform: translateY(-9.5px) rotate(-45deg);
115
+ }
116
+
117
+ .demoContent {
118
+ padding: 4rem 2rem;
119
+ max-width: 1200px;
120
+ margin: 0 auto;
121
+ font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
122
+ }
123
+
124
+ .demoSection {
125
+ margin-bottom: 3rem;
126
+ padding: 3rem 2rem;
127
+ background: #f8f9fa;
128
+ border-radius: 12px;
129
+ scroll-margin-top: 80px;
130
+ }
131
+
132
+ .demoSection h2 {
133
+ color: #1a1a2e;
134
+ margin-bottom: 1rem;
135
+ font-size: 2rem;
136
+ }
137
+
138
+ .demoSection p {
139
+ color: #666;
140
+ line-height: 1.8;
141
+ font-size: 1.1rem;
142
+ }
143
+
144
+ @media (max-width: 768px) {
145
+ .hamburger {
146
+ display: flex;
147
+ }
148
+
149
+ .navMenu {
150
+ position: fixed;
151
+ top: 0;
152
+ right: 0;
153
+ height: 100vh;
154
+ width: 280px;
155
+ flex-direction: column;
156
+ justify-content: flex-start;
157
+ padding-top: 5rem;
158
+ gap: 0;
159
+ background: linear-gradient(180deg, #1a1a2e 0%, #16213e 100%);
160
+ box-shadow: -4px 0 20px rgba(0, 0, 0, 0.3);
161
+ transform: translateX(100%);
162
+ transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
163
+ }
164
+
165
+ .navMenu.open {
166
+ transform: translateX(0);
167
+ }
168
+
169
+ .navMenu li {
170
+ width: 100%;
171
+ opacity: 0;
172
+ transform: translateX(50px);
173
+ }
174
+
175
+ .navMenu.open li {
176
+ animation: slideIn 0.4s forwards;
177
+ }
178
+
179
+ .navMenu.open li:nth-child(1) { animation-delay: 0.1s; }
180
+ .navMenu.open li:nth-child(2) { animation-delay: 0.2s; }
181
+ .navMenu.open li:nth-child(3) { animation-delay: 0.3s; }
182
+ .navMenu.open li:nth-child(4) { animation-delay: 0.4s; }
183
+
184
+ @keyframes slideIn {
185
+ to {
186
+ opacity: 1;
187
+ transform: translateX(0);
188
+ }
189
+ }
190
+
191
+ .navLink {
192
+ display: block;
193
+ padding: 1.2rem 2rem;
194
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
195
+ font-size: 1.1rem;
196
+ }
197
+
198
+ .navLink::after {
199
+ display: none;
200
+ }
201
+
202
+ .navLink:hover {
203
+ background: rgba(0, 216, 255, 0.1);
204
+ }
205
+ }
206
+
207
+ @media (max-width: 480px) {
208
+ .navContainer {
209
+ padding: 1rem 1.5rem;
210
+ }
211
+
212
+ .logo {
213
+ font-size: 1.5rem;
214
+ }
215
+
216
+ .navMenu {
217
+ width: 100%;
218
+ }
219
+ }
220
+ `,document.head.querySelector("[data-navbar-styles]")||(s.setAttribute("data-navbar-styles",""),document.head.appendChild(s)),{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:s="TOSA",links:b=["Home","About","Services","Contact"]}){const[d,f]=p.useState(!1);return t.jsxs(t.Fragment,{children:[t.jsx("nav",{className:c.navbar,children:t.jsxs("div",{className:c.navContainer,children:[t.jsx("div",{className:c.logo,children:s}),t.jsxs("button",{className:`${c.hamburger} ${d?c.active:""}`,onClick:()=>f(!d),"aria-label":"Toggle menu","aria-expanded":d,children:[t.jsx("span",{className:c.bar}),t.jsx("span",{className:c.bar}),t.jsx("span",{className:c.bar})]}),t.jsx("ul",{className:`${c.navMenu} ${d?c.open:""}`,children:b.map((i,l)=>t.jsx("li",{children:t.jsx("a",{href:`#${i.toLowerCase()}`,className:c.navLink,onClick:()=>f(!1),children:i})},l))})]})}),t.jsx("div",{className:c.demoContent,children:b.map((i,l)=>t.jsxs("section",{id:i.toLowerCase(),className:c.demoSection,children:[t.jsx("h2",{children:i}),t.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."]})]},l))})]})}function J(){return t.jsx("nav",{children:t.jsx("h1",{children:"Hello cards"})})}const m=(()=>{const s=document.createElement("style");return s.textContent=`
221
+ * {
222
+ margin: 0;
223
+ padding: 0;
224
+ box-sizing: border-box;
225
+ }
226
+
227
+ .heroSection {
228
+ min-height: 100vh;
229
+ display: flex;
230
+ flex-direction: column;
231
+ justify-content: center;
232
+ align-items: center;
233
+ padding: 2rem;
234
+ background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
235
+ position: relative;
236
+ overflow: hidden;
237
+ }
238
+
239
+ .heroSection::before {
240
+ content: '';
241
+ position: absolute;
242
+ top: 0;
243
+ left: 0;
244
+ right: 0;
245
+ bottom: 0;
246
+ background:
247
+ radial-gradient(circle at 20% 50%, rgba(0, 216, 255, 0.1) 0%, transparent 50%),
248
+ radial-gradient(circle at 80% 80%, rgba(0, 153, 204, 0.1) 0%, transparent 50%);
249
+ pointer-events: none;
250
+ }
251
+
252
+ .heroContent {
253
+ max-width: 1200px;
254
+ text-align: center;
255
+ z-index: 1;
256
+ animation: fadeInUp 1s ease-out;
257
+ }
258
+
259
+ @keyframes fadeInUp {
260
+ from {
261
+ opacity: 0;
262
+ transform: translateY(30px);
263
+ }
264
+ to {
265
+ opacity: 1;
266
+ transform: translateY(0);
267
+ }
268
+ }
269
+
270
+ .heroTitle {
271
+ font-size: 4.5rem;
272
+ font-weight: 800;
273
+ color: #fff;
274
+ margin-bottom: 1.5rem;
275
+ line-height: 1.2;
276
+ background: linear-gradient(135deg, #fff 0%, #00d8ff 100%);
277
+ -webkit-background-clip: text;
278
+ -webkit-text-fill-color: transparent;
279
+ background-clip: text;
280
+ animation: fadeInUp 1s ease-out 0.2s backwards;
281
+ }
282
+
283
+ .heroSubtitle {
284
+ font-size: 1.3rem;
285
+ color: #b8b8b8;
286
+ margin-bottom: 3rem;
287
+ line-height: 1.8;
288
+ max-width: 700px;
289
+ margin-left: auto;
290
+ margin-right: auto;
291
+ animation: fadeInUp 1s ease-out 0.4s backwards;
292
+ }
293
+
294
+ .buttonGroup {
295
+ display: flex;
296
+ gap: 1.5rem;
297
+ justify-content: center;
298
+ flex-wrap: wrap;
299
+ animation: fadeInUp 1s ease-out 0.6s backwards;
300
+ }
301
+
302
+ .btnPrimary {
303
+ padding: 1rem 2.5rem;
304
+ font-size: 1.1rem;
305
+ font-weight: 600;
306
+ border: none;
307
+ border-radius: 50px;
308
+ cursor: pointer;
309
+ transition: all 0.3s ease;
310
+ background: linear-gradient(135deg, #00d8ff 0%, #0099cc 100%);
311
+ color: #fff;
312
+ box-shadow: 0 4px 15px rgba(0, 216, 255, 0.3);
313
+ position: relative;
314
+ overflow: hidden;
315
+ }
316
+
317
+ .btnPrimary::before {
318
+ content: '';
319
+ position: absolute;
320
+ top: 0;
321
+ left: -100%;
322
+ width: 100%;
323
+ height: 100%;
324
+ background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
325
+ transition: left 0.5s ease;
326
+ }
327
+
328
+ .btnPrimary:hover::before {
329
+ left: 100%;
330
+ }
331
+
332
+ .btnPrimary:hover {
333
+ transform: translateY(-3px);
334
+ box-shadow: 0 6px 25px rgba(0, 216, 255, 0.5);
335
+ }
336
+
337
+ .btnPrimary:active {
338
+ transform: translateY(-1px);
339
+ }
340
+
341
+ .btnSecondary {
342
+ padding: 1rem 2.5rem;
343
+ font-size: 1.1rem;
344
+ font-weight: 600;
345
+ border: 2px solid #00d8ff;
346
+ border-radius: 50px;
347
+ cursor: pointer;
348
+ transition: all 0.3s ease;
349
+ background: transparent;
350
+ color: #00d8ff;
351
+ position: relative;
352
+ overflow: hidden;
353
+ }
354
+
355
+ .btnSecondary::before {
356
+ content: '';
357
+ position: absolute;
358
+ top: 50%;
359
+ left: 50%;
360
+ width: 0;
361
+ height: 0;
362
+ border-radius: 50%;
363
+ background: #00d8ff;
364
+ transform: translate(-50%, -50%);
365
+ transition: width 0.5s ease, height 0.5s ease;
366
+ z-index: -1;
367
+ }
368
+
369
+ .btnSecondary:hover::before {
370
+ width: 300px;
371
+ height: 300px;
372
+ }
373
+
374
+ .btnSecondary:hover {
375
+ color: #fff;
376
+ border-color: #00d8ff;
377
+ transform: translateY(-3px);
378
+ box-shadow: 0 6px 25px rgba(0, 216, 255, 0.3);
379
+ }
380
+
381
+ .btnSecondary:active {
382
+ transform: translateY(-1px);
383
+ }
384
+
385
+ @media (max-width: 768px) {
386
+ .heroTitle {
387
+ font-size: 3rem;
388
+ }
389
+
390
+ .heroSubtitle {
391
+ font-size: 1.1rem;
392
+ margin-bottom: 2rem;
393
+ }
394
+
395
+ .buttonGroup {
396
+ flex-direction: column;
397
+ gap: 1rem;
398
+ }
399
+
400
+ .btnPrimary,
401
+ .btnSecondary {
402
+ width: 100%;
403
+ max-width: 300px;
404
+ }
405
+ }
406
+
407
+ @media (max-width: 480px) {
408
+ .heroSection {
409
+ padding: 1.5rem;
410
+ }
411
+
412
+ .heroTitle {
413
+ font-size: 2.2rem;
414
+ }
415
+
416
+ .heroSubtitle {
417
+ font-size: 1rem;
418
+ }
419
+
420
+ .btnPrimary,
421
+ .btnSecondary {
422
+ padding: 0.9rem 2rem;
423
+ font-size: 1rem;
424
+ }
425
+ }
426
+ `,document.head.querySelector("[data-hero-styles]")||(s.setAttribute("data-hero-styles",""),document.head.appendChild(s)),{heroSection:"heroSection",heroContent:"heroContent",heroTitle:"heroTitle",heroSubtitle:"heroSubtitle",buttonGroup:"buttonGroup",btnPrimary:"btnPrimary",btnSecondary:"btnSecondary"}})();function V(){return t.jsx("section",{className:m.heroSection,children:t.jsxs("div",{className:m.heroContent,children:[t.jsx("h1",{className:m.heroTitle,children:"Welcome to the Future"}),t.jsx("p",{className:m.heroSubtitle,children:"Discover innovative solutions that transform your ideas into reality. We're here to help you build something extraordinary and take your vision to the next level."}),t.jsxs("div",{className:m.buttonGroup,children:[t.jsx("button",{className:m.btnPrimary,children:"Get Started"}),t.jsx("button",{className:m.btnSecondary,children:"Learn More"})]})]})})}u.Card=J,u.HeroSection=V,u.Navbar=q,Object.defineProperty(u,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sachin-tosa/tosa",
3
- "version": "1.0.3",
3
+ "version": "1.0.5",
4
4
  "description": "TOSA is a reusable React UI component library with responsive components like Navbar, Cards, Carousel, etc.",
5
5
  "author": "Sachin Ruhela",
6
6
  "license": "MIT",
package/dist/tosa.css DELETED
@@ -1 +0,0 @@
1
- ._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}}