@sachin-tosa/tosa 1.0.5 → 1.0.6

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 (3) hide show
  1. package/dist/tosa.es.js +494 -208
  2. package/dist/tosa.umd.js +220 -31
  3. package/package.json +1 -1
package/dist/tosa.es.js CHANGED
@@ -1,122 +1,122 @@
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
1
+ import ne, { useState as G, useEffect as oe } from "react";
2
+ var S = { exports: {} }, w = {};
3
+ var F;
4
+ function ie() {
5
+ if (F) return w;
6
+ F = 1;
7
+ var a = /* @__PURE__ */ Symbol.for("react.transitional.element"), m = /* @__PURE__ */ Symbol.for("react.fragment");
8
+ function u(f, s, c) {
9
+ var b = null;
10
+ if (c !== void 0 && (b = "" + c), s.key !== void 0 && (b = "" + s.key), "key" in s) {
11
+ c = {};
12
+ for (var g in s)
13
+ g !== "key" && (c[g] = s[g]);
14
+ } else c = s;
15
+ return s = c.ref, {
16
+ $$typeof: a,
17
+ type: f,
18
+ key: b,
19
+ ref: s !== void 0 ? s : null,
20
+ props: c
21
21
  };
22
22
  }
23
- return g.Fragment = f, g.jsx = d, g.jsxs = d, g;
23
+ return w.Fragment = m, w.jsx = u, w.jsxs = u, w;
24
24
  }
25
- var x = {};
26
- var I;
27
- function oe() {
28
- return I || (I = 1, process.env.NODE_ENV !== "production" && (function() {
29
- function s(e) {
25
+ var y = {};
26
+ var W;
27
+ function se() {
28
+ return W || (W = 1, process.env.NODE_ENV !== "production" && (function() {
29
+ function a(e) {
30
30
  if (e == null) return null;
31
31
  if (typeof e == "function")
32
- return e.$$typeof === K ? null : e.displayName || e.name || null;
32
+ return e.$$typeof === re ? null : e.displayName || e.name || null;
33
33
  if (typeof e == "string") return e;
34
34
  switch (e) {
35
- case w:
35
+ case _:
36
36
  return "Fragment";
37
- case q:
37
+ case J:
38
38
  return "Profiler";
39
- case G:
39
+ case X:
40
40
  return "StrictMode";
41
- case H:
41
+ case Z:
42
42
  return "Suspense";
43
- case B:
44
- return "SuspenseList";
45
43
  case Q:
44
+ return "SuspenseList";
45
+ case ee:
46
46
  return "Activity";
47
47
  }
48
48
  if (typeof e == "object")
49
49
  switch (typeof e.tag == "number" && console.error(
50
50
  "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
51
51
  ), e.$$typeof) {
52
- case W:
52
+ case q:
53
53
  return "Portal";
54
- case J:
54
+ case H:
55
55
  return e.displayName || "Context";
56
- case X:
57
- return (e._context.displayName || "Context") + ".Consumer";
58
56
  case V:
57
+ return (e._context.displayName || "Context") + ".Consumer";
58
+ case B:
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 Z:
62
- return r = e.displayName || null, r !== null ? r : s(e.type) || "Memo";
63
- case S:
61
+ case K:
62
+ return r = e.displayName || null, r !== null ? r : a(e.type) || "Memo";
63
+ case j:
64
64
  r = e._payload, e = e._init;
65
65
  try {
66
- return s(e(r));
66
+ return a(e(r));
67
67
  } catch {
68
68
  }
69
69
  }
70
70
  return null;
71
71
  }
72
- function f(e) {
72
+ function m(e) {
73
73
  return "" + e;
74
74
  }
75
- function d(e) {
75
+ function u(e) {
76
76
  try {
77
- f(e);
77
+ m(e);
78
78
  var r = !1;
79
79
  } catch {
80
80
  r = !0;
81
81
  }
82
82
  if (r) {
83
83
  r = console;
84
- var n = r.error, a = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
84
+ var n = r.error, o = typeof Symbol == "function" && Symbol.toStringTag && e[Symbol.toStringTag] || e.constructor.name || "Object";
85
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
- a
89
- ), f(e);
88
+ o
89
+ ), m(e);
90
90
  }
91
91
  }
92
- function u(e) {
93
- if (e === w) return "<>";
94
- if (typeof e == "object" && e !== null && e.$$typeof === S)
92
+ function f(e) {
93
+ if (e === _) return "<>";
94
+ if (typeof e == "object" && e !== null && e.$$typeof === j)
95
95
  return "<...>";
96
96
  try {
97
- var r = s(e);
97
+ var r = a(e);
98
98
  return r ? "<" + r + ">" : "<...>";
99
99
  } catch {
100
100
  return "<...>";
101
101
  }
102
102
  }
103
- function i() {
104
- var e = E.A;
103
+ function s() {
104
+ var e = T.A;
105
105
  return e === null ? null : e.getOwner();
106
106
  }
107
- function l() {
107
+ function c() {
108
108
  return Error("react-stack-top-frame");
109
109
  }
110
- function p(e) {
111
- if (O.call(e, "key")) {
110
+ function b(e) {
111
+ if ($.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 h(e, r) {
117
+ function g(e, r) {
118
118
  function n() {
119
- A || (A = !0, console.error(
119
+ Y || (Y = !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
  ));
@@ -126,23 +126,23 @@ function oe() {
126
126
  configurable: !0
127
127
  });
128
128
  }
129
- function U() {
130
- var e = s(this.type);
131
- return z[e] || (z[e] = !0, console.error(
129
+ function d() {
130
+ var e = a(this.type);
131
+ return L[e] || (L[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 D(e, r, n, a, y, T) {
136
- var o = n.ref;
135
+ function h(e, r, n, o, E, N) {
136
+ var i = n.ref;
137
137
  return e = {
138
- $$typeof: C,
138
+ $$typeof: z,
139
139
  type: e,
140
140
  key: r,
141
141
  props: n,
142
- _owner: a
143
- }, (o !== void 0 ? o : null) !== null ? Object.defineProperty(e, "ref", {
142
+ _owner: o
143
+ }, (i !== void 0 ? i : null) !== null ? Object.defineProperty(e, "ref", {
144
144
  enumerable: !1,
145
- get: U
145
+ get: d
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,111 +157,111 @@ function oe() {
157
157
  configurable: !1,
158
158
  enumerable: !1,
159
159
  writable: !0,
160
- value: y
160
+ value: E
161
161
  }), Object.defineProperty(e, "_debugTask", {
162
162
  configurable: !1,
163
163
  enumerable: !1,
164
164
  writable: !0,
165
- value: T
165
+ value: N
166
166
  }), Object.freeze && (Object.freeze(e.props), Object.freeze(e)), e;
167
167
  }
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);
168
+ function P(e, r, n, o, E, N) {
169
+ var i = r.children;
170
+ if (i !== void 0)
171
+ if (o)
172
+ if (te(i)) {
173
+ for (o = 0; o < i.length; o++)
174
+ A(i[o]);
175
+ Object.freeze && Object.freeze(i);
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 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";
180
+ else A(i);
181
+ if ($.call(r, "key")) {
182
+ i = a(e);
183
+ var v = Object.keys(r).filter(function(ae) {
184
+ return ae !== "key";
185
185
  });
186
- a = 0 < b.length ? "{key: someKey, " + b.join(": ..., ") + ": ...}" : "{key: someKey}", L[o + a] || (b = 0 < b.length ? "{" + b.join(": ..., ") + ": ...}" : "{}", console.error(
186
+ o = 0 < v.length ? "{key: someKey, " + v.join(": ..., ") + ": ...}" : "{key: someKey}", D[i + o] || (v = 0 < v.length ? "{" + v.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
- a,
194
193
  o,
195
- b,
196
- o
197
- ), L[o + a] = !0);
194
+ i,
195
+ v,
196
+ i
197
+ ), D[i + o] = !0);
198
198
  }
199
- if (o = null, n !== void 0 && (d(n), o = "" + n), p(r) && (d(r.key), o = "" + r.key), "key" in r) {
199
+ if (i = null, n !== void 0 && (u(n), i = "" + n), b(r) && (u(r.key), i = "" + r.key), "key" in r) {
200
200
  n = {};
201
- for (var R in r)
202
- R !== "key" && (n[R] = r[R]);
201
+ for (var C in r)
202
+ C !== "key" && (n[C] = r[C]);
203
203
  } else n = r;
204
- return o && h(
204
+ return i && g(
205
205
  n,
206
206
  typeof e == "function" ? e.displayName || e.name || "Unknown" : e
207
- ), D(
207
+ ), h(
208
208
  e,
209
- o,
209
+ i,
210
210
  n,
211
- i(),
212
- y,
213
- T
211
+ s(),
212
+ E,
213
+ N
214
214
  );
215
215
  }
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));
216
+ function A(e) {
217
+ O(e) ? e._store && (e._store.validated = 1) : typeof e == "object" && e !== null && e.$$typeof === j && (e._payload.status === "fulfilled" ? O(e._payload.value) && e._payload.value._store && (e._payload.value._store.validated = 1) : e._store && (e._store.validated = 1));
218
218
  }
219
- function P(e) {
220
- return typeof e == "object" && e !== null && e.$$typeof === C;
219
+ function O(e) {
220
+ return typeof e == "object" && e !== null && e.$$typeof === z;
221
221
  }
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() {
222
+ var k = ne, z = /* @__PURE__ */ Symbol.for("react.transitional.element"), q = /* @__PURE__ */ Symbol.for("react.portal"), _ = /* @__PURE__ */ Symbol.for("react.fragment"), X = /* @__PURE__ */ Symbol.for("react.strict_mode"), J = /* @__PURE__ */ Symbol.for("react.profiler"), V = /* @__PURE__ */ Symbol.for("react.consumer"), H = /* @__PURE__ */ Symbol.for("react.context"), B = /* @__PURE__ */ Symbol.for("react.forward_ref"), Z = /* @__PURE__ */ Symbol.for("react.suspense"), Q = /* @__PURE__ */ Symbol.for("react.suspense_list"), K = /* @__PURE__ */ Symbol.for("react.memo"), j = /* @__PURE__ */ Symbol.for("react.lazy"), ee = /* @__PURE__ */ Symbol.for("react.activity"), re = /* @__PURE__ */ Symbol.for("react.client.reference"), T = k.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, $ = Object.prototype.hasOwnProperty, te = Array.isArray, R = console.createTask ? console.createTask : function() {
223
223
  return null;
224
224
  };
225
- v = {
225
+ k = {
226
226
  react_stack_bottom_frame: function(e) {
227
227
  return e();
228
228
  }
229
229
  };
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(
230
+ var Y, L = {}, I = k.react_stack_bottom_frame.bind(
231
+ k,
232
+ c
233
+ )(), M = R(f(c)), D = {};
234
+ y.Fragment = _, y.jsx = function(e, r, n) {
235
+ var o = 1e4 > T.recentlyCreatedOwnerStacks++;
236
+ return P(
237
237
  e,
238
238
  r,
239
239
  n,
240
240
  !1,
241
- a ? Error("react-stack-top-frame") : Y,
242
- a ? _(u(e)) : M
241
+ o ? Error("react-stack-top-frame") : I,
242
+ o ? R(f(e)) : M
243
243
  );
244
- }, x.jsxs = function(e, r, n) {
245
- var a = 1e4 > E.recentlyCreatedOwnerStacks++;
246
- return j(
244
+ }, y.jsxs = function(e, r, n) {
245
+ var o = 1e4 > T.recentlyCreatedOwnerStacks++;
246
+ return P(
247
247
  e,
248
248
  r,
249
249
  n,
250
250
  !0,
251
- a ? Error("react-stack-top-frame") : Y,
252
- a ? _(u(e)) : M
251
+ o ? Error("react-stack-top-frame") : I,
252
+ o ? R(f(e)) : M
253
253
  );
254
254
  };
255
- })()), x;
255
+ })()), y;
256
256
  }
257
- var F;
258
- function ie() {
259
- return F || (F = 1, process.env.NODE_ENV === "production" ? k.exports = ae() : k.exports = oe()), k.exports;
257
+ var U;
258
+ function le() {
259
+ return U || (U = 1, process.env.NODE_ENV === "production" ? S.exports = ie() : S.exports = se()), S.exports;
260
260
  }
261
- var t = ie();
262
- const c = (() => {
263
- const s = document.createElement("style");
264
- return s.textContent = `
261
+ var t = le();
262
+ const p = (() => {
263
+ const a = document.createElement("style");
264
+ return a.textContent = `
265
265
  * {
266
266
  margin: 0;
267
267
  padding: 0;
@@ -372,33 +372,8 @@ const c = (() => {
372
372
  transform: translateY(-9.5px) rotate(-45deg);
373
373
  }
374
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
-
375
+
376
+
402
377
  @media (max-width: 768px) {
403
378
  .hamburger {
404
379
  display: flex;
@@ -475,7 +450,7 @@ const c = (() => {
475
450
  width: 100%;
476
451
  }
477
452
  }
478
- `, document.head.querySelector("[data-navbar-styles]") || (s.setAttribute("data-navbar-styles", ""), document.head.appendChild(s)), {
453
+ `, document.head.querySelector("[data-navbar-styles]") || (a.setAttribute("data-navbar-styles", ""), document.head.appendChild(a)), {
479
454
  navbar: "navbar",
480
455
  navContainer: "navContainer",
481
456
  logo: "logo",
@@ -484,56 +459,44 @@ const c = (() => {
484
459
  hamburger: "hamburger",
485
460
  bar: "bar",
486
461
  active: "active",
487
- open: "open",
488
- demoContent: "demoContent",
489
- demoSection: "demoSection"
462
+ open: "open"
490
463
  };
491
464
  })();
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)) })
529
- ] });
465
+ function de({ brand: a = "TOSA", links: m = ["Home", "About", "Services", "Contact"] }) {
466
+ const [u, f] = G(!1);
467
+ return /* @__PURE__ */ t.jsx(t.Fragment, { children: /* @__PURE__ */ t.jsx("nav", { className: p.navbar, children: /* @__PURE__ */ t.jsxs("div", { className: p.navContainer, children: [
468
+ /* @__PURE__ */ t.jsx("div", { className: p.logo, children: a }),
469
+ /* @__PURE__ */ t.jsxs(
470
+ "button",
471
+ {
472
+ className: `${p.hamburger} ${u ? p.active : ""}`,
473
+ onClick: () => f(!u),
474
+ "aria-label": "Toggle menu",
475
+ "aria-expanded": u,
476
+ children: [
477
+ /* @__PURE__ */ t.jsx("span", { className: p.bar }),
478
+ /* @__PURE__ */ t.jsx("span", { className: p.bar }),
479
+ /* @__PURE__ */ t.jsx("span", { className: p.bar })
480
+ ]
481
+ }
482
+ ),
483
+ /* @__PURE__ */ t.jsx("ul", { className: `${p.navMenu} ${u ? p.open : ""}`, children: m.map((s, c) => /* @__PURE__ */ t.jsx("li", { children: /* @__PURE__ */ t.jsx(
484
+ "a",
485
+ {
486
+ href: `#${s.toLowerCase()}`,
487
+ className: p.navLink,
488
+ onClick: () => f(!1),
489
+ children: s
490
+ }
491
+ ) }, c)) })
492
+ ] }) }) });
530
493
  }
531
- function ce() {
494
+ function ue() {
532
495
  return /* @__PURE__ */ t.jsx("nav", { children: /* @__PURE__ */ t.jsx("h1", { children: "Hello cards" }) });
533
496
  }
534
- const m = (() => {
535
- const s = document.createElement("style");
536
- return s.textContent = `
497
+ const x = (() => {
498
+ const a = document.createElement("style");
499
+ return a.textContent = `
537
500
  * {
538
501
  margin: 0;
539
502
  padding: 0;
@@ -739,7 +702,7 @@ const m = (() => {
739
702
  font-size: 1rem;
740
703
  }
741
704
  }
742
- `, document.head.querySelector("[data-hero-styles]") || (s.setAttribute("data-hero-styles", ""), document.head.appendChild(s)), {
705
+ `, document.head.querySelector("[data-hero-styles]") || (a.setAttribute("data-hero-styles", ""), document.head.appendChild(a)), {
743
706
  heroSection: "heroSection",
744
707
  heroContent: "heroContent",
745
708
  heroTitle: "heroTitle",
@@ -749,18 +712,341 @@ const m = (() => {
749
712
  btnSecondary: "btnSecondary"
750
713
  };
751
714
  })();
752
- function de() {
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" })
715
+ function fe() {
716
+ return /* @__PURE__ */ t.jsx("section", { className: x.heroSection, children: /* @__PURE__ */ t.jsxs("div", { className: x.heroContent, children: [
717
+ /* @__PURE__ */ t.jsx("h1", { className: x.heroTitle, children: "Welcome to the Future" }),
718
+ /* @__PURE__ */ t.jsx("p", { className: x.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." }),
719
+ /* @__PURE__ */ t.jsxs("div", { className: x.buttonGroup, children: [
720
+ /* @__PURE__ */ t.jsx("button", { className: x.btnPrimary, children: "Get Started" }),
721
+ /* @__PURE__ */ t.jsx("button", { className: x.btnSecondary, children: "Learn More" })
759
722
  ] })
760
723
  ] }) });
761
724
  }
725
+ const l = (() => {
726
+ const a = document.createElement("style");
727
+ return a.textContent = `
728
+ * {
729
+ margin: 0;
730
+ padding: 0;
731
+ box-sizing: border-box;
732
+ }
733
+
734
+ .carouselContainer {
735
+ position: relative;
736
+ width: 100%;
737
+ max-width: 1200px;
738
+ margin: 0 auto;
739
+ padding: 2rem;
740
+ overflow: hidden;
741
+ }
742
+
743
+ .carousel {
744
+ position: relative;
745
+ width: 100%;
746
+ height: 500px;
747
+ border-radius: 20px;
748
+ overflow: hidden;
749
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
750
+ }
751
+
752
+ .slideWrapper {
753
+ position: relative;
754
+ width: 100%;
755
+ height: 100%;
756
+ }
757
+
758
+ .slide {
759
+ position: absolute;
760
+ top: 0;
761
+ left: 0;
762
+ width: 100%;
763
+ height: 100%;
764
+ opacity: 0;
765
+ transition: opacity 1s ease-in-out;
766
+ display: flex;
767
+ align-items: center;
768
+ justify-content: center;
769
+ }
770
+
771
+ .slide.active {
772
+ opacity: 1;
773
+ z-index: 1;
774
+ }
775
+
776
+ .slideImage {
777
+ width: 100%;
778
+ height: 100%;
779
+ object-fit: cover;
780
+ }
781
+
782
+ .slideContent {
783
+ position: absolute;
784
+ bottom: 0;
785
+ left: 0;
786
+ right: 0;
787
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
788
+ padding: 3rem 2rem 2rem;
789
+ color: #fff;
790
+ z-index: 2;
791
+ }
792
+
793
+ .slideTitle {
794
+ font-size: 2.5rem;
795
+ font-weight: 700;
796
+ margin-bottom: 0.5rem;
797
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
798
+ }
799
+
800
+ .slideDescription {
801
+ font-size: 1.1rem;
802
+ color: #e0e0e0;
803
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
804
+ }
805
+
806
+ .arrow {
807
+ position: absolute;
808
+ top: 50%;
809
+ transform: translateY(-50%);
810
+ background: rgba(0, 216, 255, 0.8);
811
+ border: none;
812
+ color: #fff;
813
+ width: 50px;
814
+ height: 50px;
815
+ border-radius: 50%;
816
+ cursor: pointer;
817
+ z-index: 10;
818
+ transition: all 0.3s ease;
819
+ display: flex;
820
+ align-items: center;
821
+ justify-content: center;
822
+ font-size: 1.5rem;
823
+ backdrop-filter: blur(10px);
824
+ }
825
+
826
+ .arrow:hover {
827
+ background: rgba(0, 216, 255, 1);
828
+ transform: translateY(-50%) scale(1.1);
829
+ box-shadow: 0 5px 20px rgba(0, 216, 255, 0.5);
830
+ }
831
+
832
+ .arrow:active {
833
+ transform: translateY(-50%) scale(0.95);
834
+ }
835
+
836
+ .arrowLeft {
837
+ left: 20px;
838
+ }
839
+
840
+ .arrowRight {
841
+ right: 20px;
842
+ }
843
+
844
+ .dots {
845
+ position: absolute;
846
+ bottom: 20px;
847
+ left: 50%;
848
+ transform: translateX(-50%);
849
+ display: flex;
850
+ gap: 10px;
851
+ z-index: 10;
852
+ }
853
+
854
+ .dot {
855
+ width: 12px;
856
+ height: 12px;
857
+ border-radius: 50%;
858
+ background: rgba(255, 255, 255, 0.5);
859
+ border: 2px solid rgba(255, 255, 255, 0.8);
860
+ cursor: pointer;
861
+ transition: all 0.3s ease;
862
+ }
863
+
864
+ .dot:hover {
865
+ background: rgba(255, 255, 255, 0.8);
866
+ transform: scale(1.2);
867
+ }
868
+
869
+ .dot.active {
870
+ background: #00d8ff;
871
+ border-color: #00d8ff;
872
+ transform: scale(1.3);
873
+ }
874
+
875
+ @media (max-width: 768px) {
876
+ .carousel {
877
+ height: 400px;
878
+ border-radius: 15px;
879
+ }
880
+
881
+ .slideTitle {
882
+ font-size: 1.8rem;
883
+ }
884
+
885
+ .slideDescription {
886
+ font-size: 1rem;
887
+ }
888
+
889
+ .arrow {
890
+ width: 40px;
891
+ height: 40px;
892
+ font-size: 1.2rem;
893
+ }
894
+
895
+ .arrowLeft {
896
+ left: 10px;
897
+ }
898
+
899
+ .arrowRight {
900
+ right: 10px;
901
+ }
902
+
903
+ .slideContent {
904
+ padding: 2rem 1.5rem 1.5rem;
905
+ }
906
+ }
907
+
908
+ @media (max-width: 480px) {
909
+ .carouselContainer {
910
+ padding: 1rem;
911
+ }
912
+
913
+ .carousel {
914
+ height: 300px;
915
+ border-radius: 10px;
916
+ }
917
+
918
+ .slideTitle {
919
+ font-size: 1.4rem;
920
+ }
921
+
922
+ .slideDescription {
923
+ font-size: 0.9rem;
924
+ }
925
+
926
+ .arrow {
927
+ width: 35px;
928
+ height: 35px;
929
+ font-size: 1rem;
930
+ }
931
+
932
+ .dots {
933
+ bottom: 15px;
934
+ }
935
+
936
+ .dot {
937
+ width: 10px;
938
+ height: 10px;
939
+ }
940
+ }
941
+ `, document.head.querySelector("[data-carousel-styles]") || (a.setAttribute("data-carousel-styles", ""), document.head.appendChild(a)), {
942
+ carouselContainer: "carouselContainer",
943
+ carousel: "carousel",
944
+ slideWrapper: "slideWrapper",
945
+ slide: "slide",
946
+ active: "active",
947
+ slideImage: "slideImage",
948
+ slideContent: "slideContent",
949
+ slideTitle: "slideTitle",
950
+ slideDescription: "slideDescription",
951
+ arrow: "arrow",
952
+ arrowLeft: "arrowLeft",
953
+ arrowRight: "arrowRight",
954
+ dots: "dots",
955
+ dot: "dot"
956
+ };
957
+ })();
958
+ function pe({
959
+ slides: a = [
960
+ {
961
+ image: "https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?w=1200",
962
+ title: "Mountain Adventure",
963
+ description: "Explore the breathtaking beauty of nature"
964
+ },
965
+ {
966
+ image: "https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200",
967
+ title: "Ocean Views",
968
+ description: "Discover serene coastal landscapes"
969
+ },
970
+ {
971
+ image: "https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1200",
972
+ title: "Forest Trails",
973
+ description: "Journey through lush green forests"
974
+ },
975
+ {
976
+ image: "https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1200",
977
+ title: "Sunset Paradise",
978
+ description: "Experience magical golden hour moments"
979
+ }
980
+ ],
981
+ autoPlay: m = !0,
982
+ autoPlayInterval: u = 5e3
983
+ }) {
984
+ const [f, s] = G(0), c = () => {
985
+ s((d) => (d + 1) % a.length);
986
+ }, b = () => {
987
+ s((d) => (d - 1 + a.length) % a.length);
988
+ }, g = (d) => {
989
+ s(d);
990
+ };
991
+ return oe(() => {
992
+ if (m) {
993
+ const d = setInterval(c, u);
994
+ return () => clearInterval(d);
995
+ }
996
+ }, [f, m, u]), /* @__PURE__ */ t.jsx("div", { className: l.carouselContainer, children: /* @__PURE__ */ t.jsxs("div", { className: l.carousel, children: [
997
+ /* @__PURE__ */ t.jsx("div", { className: l.slideWrapper, children: a.map((d, h) => /* @__PURE__ */ t.jsxs(
998
+ "div",
999
+ {
1000
+ className: `${l.slide} ${h === f ? l.active : ""}`,
1001
+ children: [
1002
+ /* @__PURE__ */ t.jsx(
1003
+ "img",
1004
+ {
1005
+ src: d.image,
1006
+ alt: d.title,
1007
+ className: l.slideImage
1008
+ }
1009
+ ),
1010
+ /* @__PURE__ */ t.jsxs("div", { className: l.slideContent, children: [
1011
+ /* @__PURE__ */ t.jsx("h2", { className: l.slideTitle, children: d.title }),
1012
+ /* @__PURE__ */ t.jsx("p", { className: l.slideDescription, children: d.description })
1013
+ ] })
1014
+ ]
1015
+ },
1016
+ h
1017
+ )) }),
1018
+ /* @__PURE__ */ t.jsx(
1019
+ "button",
1020
+ {
1021
+ className: `${l.arrow} ${l.arrowLeft}`,
1022
+ onClick: b,
1023
+ "aria-label": "Previous slide",
1024
+ children: "‹"
1025
+ }
1026
+ ),
1027
+ /* @__PURE__ */ t.jsx(
1028
+ "button",
1029
+ {
1030
+ className: `${l.arrow} ${l.arrowRight}`,
1031
+ onClick: c,
1032
+ "aria-label": "Next slide",
1033
+ children: "›"
1034
+ }
1035
+ ),
1036
+ /* @__PURE__ */ t.jsx("div", { className: l.dots, children: a.map((d, h) => /* @__PURE__ */ t.jsx(
1037
+ "button",
1038
+ {
1039
+ className: `${l.dot} ${h === f ? l.active : ""}`,
1040
+ onClick: () => g(h),
1041
+ "aria-label": `Go to slide ${h + 1}`
1042
+ },
1043
+ h
1044
+ )) })
1045
+ ] }) });
1046
+ }
762
1047
  export {
763
- ce as Card,
764
- de as HeroSection,
765
- le as Navbar
1048
+ ue as Card,
1049
+ pe as Carousal,
1050
+ fe as HeroSection,
1051
+ de as Navbar
766
1052
  };
package/dist/tosa.umd.js CHANGED
@@ -1,9 +1,9 @@
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:
1
+ (function(m,g){typeof exports=="object"&&typeof module<"u"?g(exports,require("react")):typeof define=="function"&&define.amd?define(["exports","react"],g):(m=typeof globalThis<"u"?globalThis:m||self,g(m.Tosa={},m.React))})(this,(function(m,g){"use strict";var E={exports:{}},k={};var O;function J(){if(O)return k;O=1;var a=Symbol.for("react.transitional.element"),h=Symbol.for("react.fragment");function u(f,s,c){var v=null;if(c!==void 0&&(v=""+c),s.key!==void 0&&(v=""+s.key),"key"in s){c={};for(var w in s)w!=="key"&&(c[w]=s[w])}else c=s;return s=c.ref,{$$typeof:a,type:f,key:v,ref:s!==void 0?s:null,props:c}}return k.Fragment=h,k.jsx=u,k.jsxs=u,k}var S={};var z;function V(){return z||(z=1,process.env.NODE_ENV!=="production"&&(function(){function a(e){if(e==null)return null;if(typeof e=="function")return e.$$typeof===ce?null:e.displayName||e.name||null;if(typeof e=="string")return e;switch(e){case j:return"Fragment";case te:return"Profiler";case ee:return"StrictMode";case oe:return"Suspense";case ie:return"SuspenseList";case le: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 K:return"Portal";case ae:return e.displayName||"Context";case re:return(e._context.displayName||"Context")+".Consumer";case ne:var t=e.render;return e=e.displayName,e||(e=t.displayName||t.name||"",e=e!==""?"ForwardRef("+e+")":"ForwardRef"),e;case se:return t=e.displayName||null,t!==null?t:a(e.type)||"Memo";case R:t=e._payload,e=e._init;try{return a(e(t))}catch{}}return null}function h(e){return""+e}function u(e){try{h(e);var t=!1}catch{t=!0}if(t){t=console;var n=t.error,o=typeof Symbol=="function"&&Symbol.toStringTag&&e[Symbol.toStringTag]||e.constructor.name||"Object";return n.call(t,"The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",o),h(e)}}function f(e){if(e===j)return"<>";if(typeof e=="object"&&e!==null&&e.$$typeof===R)return"<...>";try{var t=a(e);return t?"<"+t+">":"<...>"}catch{return"<...>"}}function s(){var e=N.A;return e===null?null:e.getOwner()}function c(){return Error("react-stack-top-frame")}function v(e){if(D.call(e,"key")){var t=Object.getOwnPropertyDescriptor(e,"key").get;if(t&&t.isReactWarning)return!1}return e.key!==void 0}function w(e,t){function n(){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)",t))}n.isReactWarning=!0,Object.defineProperty(e,"key",{get:n,configurable:!0})}function d(){var e=a(this.type);return W[e]||(W[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,t,n,o,_,P){var i=n.ref;return e={$$typeof:$,type:e,key:t,props:n,_owner:o},(i!==void 0?i:null)!==null?Object.defineProperty(e,"ref",{enumerable:!1,get:d}):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:_}),Object.defineProperty(e,"_debugTask",{configurable:!1,enumerable:!1,writable:!0,value:P}),Object.freeze&&(Object.freeze(e.props),Object.freeze(e)),e}function L(e,t,n,o,_,P){var i=t.children;if(i!==void 0)if(o)if(de(i)){for(o=0;o<i.length;o++)I(i[o]);Object.freeze&&Object.freeze(i)}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 I(i);if(D.call(t,"key")){i=a(e);var y=Object.keys(t).filter(function(ue){return ue!=="key"});o=0<y.length?"{key: someKey, "+y.join(": ..., ")+": ...}":"{key: someKey}",X[i+o]||(y=0<y.length?"{"+y.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} />`,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=`
6
+ <%s key={someKey} {...props} />`,o,i,y,i),X[i+o]=!0)}if(i=null,n!==void 0&&(u(n),i=""+n),v(t)&&(u(t.key),i=""+t.key),"key"in t){n={};for(var A in t)A!=="key"&&(n[A]=t[A])}else n=t;return i&&w(n,typeof e=="function"?e.displayName||e.name||"Unknown":e),b(e,i,n,s(),_,P)}function I(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===$}var T=g,$=Symbol.for("react.transitional.element"),K=Symbol.for("react.portal"),j=Symbol.for("react.fragment"),ee=Symbol.for("react.strict_mode"),te=Symbol.for("react.profiler"),re=Symbol.for("react.consumer"),ae=Symbol.for("react.context"),ne=Symbol.for("react.forward_ref"),oe=Symbol.for("react.suspense"),ie=Symbol.for("react.suspense_list"),se=Symbol.for("react.memo"),R=Symbol.for("react.lazy"),le=Symbol.for("react.activity"),ce=Symbol.for("react.client.reference"),N=T.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE,D=Object.prototype.hasOwnProperty,de=Array.isArray,C=console.createTask?console.createTask:function(){return null};T={react_stack_bottom_frame:function(e){return e()}};var F,W={},U=T.react_stack_bottom_frame.bind(T,c)(),G=C(f(c)),X={};S.Fragment=j,S.jsx=function(e,t,n){var o=1e4>N.recentlyCreatedOwnerStacks++;return L(e,t,n,!1,o?Error("react-stack-top-frame"):U,o?C(f(e)):G)},S.jsxs=function(e,t,n){var o=1e4>N.recentlyCreatedOwnerStacks++;return L(e,t,n,!0,o?Error("react-stack-top-frame"):U,o?C(f(e)):G)}})()),S}var Y;function q(){return Y||(Y=1,process.env.NODE_ENV==="production"?E.exports=J():E.exports=V()),E.exports}var r=q();const p=(()=>{const a=document.createElement("style");return a.textContent=`
7
7
  * {
8
8
  margin: 0;
9
9
  padding: 0;
@@ -114,33 +114,8 @@ React keys must be passed directly to JSX without using spread:
114
114
  transform: translateY(-9.5px) rotate(-45deg);
115
115
  }
116
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
-
117
+
118
+
144
119
  @media (max-width: 768px) {
145
120
  .hamburger {
146
121
  display: flex;
@@ -217,7 +192,7 @@ React keys must be passed directly to JSX without using spread:
217
192
  width: 100%;
218
193
  }
219
194
  }
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=`
195
+ `,document.head.querySelector("[data-navbar-styles]")||(a.setAttribute("data-navbar-styles",""),document.head.appendChild(a)),{navbar:"navbar",navContainer:"navContainer",logo:"logo",navMenu:"navMenu",navLink:"navLink",hamburger:"hamburger",bar:"bar",active:"active",open:"open"}})();function H({brand:a="TOSA",links:h=["Home","About","Services","Contact"]}){const[u,f]=g.useState(!1);return r.jsx(r.Fragment,{children:r.jsx("nav",{className:p.navbar,children:r.jsxs("div",{className:p.navContainer,children:[r.jsx("div",{className:p.logo,children:a}),r.jsxs("button",{className:`${p.hamburger} ${u?p.active:""}`,onClick:()=>f(!u),"aria-label":"Toggle menu","aria-expanded":u,children:[r.jsx("span",{className:p.bar}),r.jsx("span",{className:p.bar}),r.jsx("span",{className:p.bar})]}),r.jsx("ul",{className:`${p.navMenu} ${u?p.open:""}`,children:h.map((s,c)=>r.jsx("li",{children:r.jsx("a",{href:`#${s.toLowerCase()}`,className:p.navLink,onClick:()=>f(!1),children:s})},c))})]})})})}function B(){return r.jsx("nav",{children:r.jsx("h1",{children:"Hello cards"})})}const x=(()=>{const a=document.createElement("style");return a.textContent=`
221
196
  * {
222
197
  margin: 0;
223
198
  padding: 0;
@@ -423,4 +398,218 @@ React keys must be passed directly to JSX without using spread:
423
398
  font-size: 1rem;
424
399
  }
425
400
  }
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"})}));
401
+ `,document.head.querySelector("[data-hero-styles]")||(a.setAttribute("data-hero-styles",""),document.head.appendChild(a)),{heroSection:"heroSection",heroContent:"heroContent",heroTitle:"heroTitle",heroSubtitle:"heroSubtitle",buttonGroup:"buttonGroup",btnPrimary:"btnPrimary",btnSecondary:"btnSecondary"}})();function Z(){return r.jsx("section",{className:x.heroSection,children:r.jsxs("div",{className:x.heroContent,children:[r.jsx("h1",{className:x.heroTitle,children:"Welcome to the Future"}),r.jsx("p",{className:x.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."}),r.jsxs("div",{className:x.buttonGroup,children:[r.jsx("button",{className:x.btnPrimary,children:"Get Started"}),r.jsx("button",{className:x.btnSecondary,children:"Learn More"})]})]})})}const l=(()=>{const a=document.createElement("style");return a.textContent=`
402
+ * {
403
+ margin: 0;
404
+ padding: 0;
405
+ box-sizing: border-box;
406
+ }
407
+
408
+ .carouselContainer {
409
+ position: relative;
410
+ width: 100%;
411
+ max-width: 1200px;
412
+ margin: 0 auto;
413
+ padding: 2rem;
414
+ overflow: hidden;
415
+ }
416
+
417
+ .carousel {
418
+ position: relative;
419
+ width: 100%;
420
+ height: 500px;
421
+ border-radius: 20px;
422
+ overflow: hidden;
423
+ box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
424
+ }
425
+
426
+ .slideWrapper {
427
+ position: relative;
428
+ width: 100%;
429
+ height: 100%;
430
+ }
431
+
432
+ .slide {
433
+ position: absolute;
434
+ top: 0;
435
+ left: 0;
436
+ width: 100%;
437
+ height: 100%;
438
+ opacity: 0;
439
+ transition: opacity 1s ease-in-out;
440
+ display: flex;
441
+ align-items: center;
442
+ justify-content: center;
443
+ }
444
+
445
+ .slide.active {
446
+ opacity: 1;
447
+ z-index: 1;
448
+ }
449
+
450
+ .slideImage {
451
+ width: 100%;
452
+ height: 100%;
453
+ object-fit: cover;
454
+ }
455
+
456
+ .slideContent {
457
+ position: absolute;
458
+ bottom: 0;
459
+ left: 0;
460
+ right: 0;
461
+ background: linear-gradient(to top, rgba(0, 0, 0, 0.8) 0%, transparent 100%);
462
+ padding: 3rem 2rem 2rem;
463
+ color: #fff;
464
+ z-index: 2;
465
+ }
466
+
467
+ .slideTitle {
468
+ font-size: 2.5rem;
469
+ font-weight: 700;
470
+ margin-bottom: 0.5rem;
471
+ text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
472
+ }
473
+
474
+ .slideDescription {
475
+ font-size: 1.1rem;
476
+ color: #e0e0e0;
477
+ text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
478
+ }
479
+
480
+ .arrow {
481
+ position: absolute;
482
+ top: 50%;
483
+ transform: translateY(-50%);
484
+ background: rgba(0, 216, 255, 0.8);
485
+ border: none;
486
+ color: #fff;
487
+ width: 50px;
488
+ height: 50px;
489
+ border-radius: 50%;
490
+ cursor: pointer;
491
+ z-index: 10;
492
+ transition: all 0.3s ease;
493
+ display: flex;
494
+ align-items: center;
495
+ justify-content: center;
496
+ font-size: 1.5rem;
497
+ backdrop-filter: blur(10px);
498
+ }
499
+
500
+ .arrow:hover {
501
+ background: rgba(0, 216, 255, 1);
502
+ transform: translateY(-50%) scale(1.1);
503
+ box-shadow: 0 5px 20px rgba(0, 216, 255, 0.5);
504
+ }
505
+
506
+ .arrow:active {
507
+ transform: translateY(-50%) scale(0.95);
508
+ }
509
+
510
+ .arrowLeft {
511
+ left: 20px;
512
+ }
513
+
514
+ .arrowRight {
515
+ right: 20px;
516
+ }
517
+
518
+ .dots {
519
+ position: absolute;
520
+ bottom: 20px;
521
+ left: 50%;
522
+ transform: translateX(-50%);
523
+ display: flex;
524
+ gap: 10px;
525
+ z-index: 10;
526
+ }
527
+
528
+ .dot {
529
+ width: 12px;
530
+ height: 12px;
531
+ border-radius: 50%;
532
+ background: rgba(255, 255, 255, 0.5);
533
+ border: 2px solid rgba(255, 255, 255, 0.8);
534
+ cursor: pointer;
535
+ transition: all 0.3s ease;
536
+ }
537
+
538
+ .dot:hover {
539
+ background: rgba(255, 255, 255, 0.8);
540
+ transform: scale(1.2);
541
+ }
542
+
543
+ .dot.active {
544
+ background: #00d8ff;
545
+ border-color: #00d8ff;
546
+ transform: scale(1.3);
547
+ }
548
+
549
+ @media (max-width: 768px) {
550
+ .carousel {
551
+ height: 400px;
552
+ border-radius: 15px;
553
+ }
554
+
555
+ .slideTitle {
556
+ font-size: 1.8rem;
557
+ }
558
+
559
+ .slideDescription {
560
+ font-size: 1rem;
561
+ }
562
+
563
+ .arrow {
564
+ width: 40px;
565
+ height: 40px;
566
+ font-size: 1.2rem;
567
+ }
568
+
569
+ .arrowLeft {
570
+ left: 10px;
571
+ }
572
+
573
+ .arrowRight {
574
+ right: 10px;
575
+ }
576
+
577
+ .slideContent {
578
+ padding: 2rem 1.5rem 1.5rem;
579
+ }
580
+ }
581
+
582
+ @media (max-width: 480px) {
583
+ .carouselContainer {
584
+ padding: 1rem;
585
+ }
586
+
587
+ .carousel {
588
+ height: 300px;
589
+ border-radius: 10px;
590
+ }
591
+
592
+ .slideTitle {
593
+ font-size: 1.4rem;
594
+ }
595
+
596
+ .slideDescription {
597
+ font-size: 0.9rem;
598
+ }
599
+
600
+ .arrow {
601
+ width: 35px;
602
+ height: 35px;
603
+ font-size: 1rem;
604
+ }
605
+
606
+ .dots {
607
+ bottom: 15px;
608
+ }
609
+
610
+ .dot {
611
+ width: 10px;
612
+ height: 10px;
613
+ }
614
+ }
615
+ `,document.head.querySelector("[data-carousel-styles]")||(a.setAttribute("data-carousel-styles",""),document.head.appendChild(a)),{carouselContainer:"carouselContainer",carousel:"carousel",slideWrapper:"slideWrapper",slide:"slide",active:"active",slideImage:"slideImage",slideContent:"slideContent",slideTitle:"slideTitle",slideDescription:"slideDescription",arrow:"arrow",arrowLeft:"arrowLeft",arrowRight:"arrowRight",dots:"dots",dot:"dot"}})();function Q({slides:a=[{image:"https://images.unsplash.com/photo-1497436072909-60f360e1d4b1?w=1200",title:"Mountain Adventure",description:"Explore the breathtaking beauty of nature"},{image:"https://images.unsplash.com/photo-1506905925346-21bda4d32df4?w=1200",title:"Ocean Views",description:"Discover serene coastal landscapes"},{image:"https://images.unsplash.com/photo-1469474968028-56623f02e42e?w=1200",title:"Forest Trails",description:"Journey through lush green forests"},{image:"https://images.unsplash.com/photo-1470071459604-3b5ec3a7fe05?w=1200",title:"Sunset Paradise",description:"Experience magical golden hour moments"}],autoPlay:h=!0,autoPlayInterval:u=5e3}){const[f,s]=g.useState(0),c=()=>{s(d=>(d+1)%a.length)},v=()=>{s(d=>(d-1+a.length)%a.length)},w=d=>{s(d)};return g.useEffect(()=>{if(h){const d=setInterval(c,u);return()=>clearInterval(d)}},[f,h,u]),r.jsx("div",{className:l.carouselContainer,children:r.jsxs("div",{className:l.carousel,children:[r.jsx("div",{className:l.slideWrapper,children:a.map((d,b)=>r.jsxs("div",{className:`${l.slide} ${b===f?l.active:""}`,children:[r.jsx("img",{src:d.image,alt:d.title,className:l.slideImage}),r.jsxs("div",{className:l.slideContent,children:[r.jsx("h2",{className:l.slideTitle,children:d.title}),r.jsx("p",{className:l.slideDescription,children:d.description})]})]},b))}),r.jsx("button",{className:`${l.arrow} ${l.arrowLeft}`,onClick:v,"aria-label":"Previous slide",children:"‹"}),r.jsx("button",{className:`${l.arrow} ${l.arrowRight}`,onClick:c,"aria-label":"Next slide",children:"›"}),r.jsx("div",{className:l.dots,children:a.map((d,b)=>r.jsx("button",{className:`${l.dot} ${b===f?l.active:""}`,onClick:()=>w(b),"aria-label":`Go to slide ${b+1}`},b))})]})})}m.Card=B,m.Carousal=Q,m.HeroSection=Z,m.Navbar=H,Object.defineProperty(m,Symbol.toStringTag,{value:"Module"})}));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sachin-tosa/tosa",
3
- "version": "1.0.5",
3
+ "version": "1.0.6",
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",