@iniguezmarc/design-system 0.0.14 → 0.0.17

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 (11) hide show
  1. package/dist/components/atoms/Button/BasicButton.d.ts +6 -2
  2. package/dist/components/atoms/Slider/BasicSlider.d.ts +15 -0
  3. package/dist/components/atoms/Slider/Slider.d.ts +3 -0
  4. package/dist/components/molecules/ControlPanel/BasicControlPanel.d.ts +15 -0
  5. package/dist/components/molecules/ControlPanel/ControlPanel.d.ts +3 -0
  6. package/dist/components/organisms/Grid/InteractiveGrid.d.ts +21 -0
  7. package/dist/components/organisms/Layout/SplitLayout.d.ts +23 -0
  8. package/dist/index.d.ts +5 -0
  9. package/dist/index.es.js +931 -508
  10. package/dist/index.umd.js +103 -63
  11. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,5 +1,5 @@
1
- import oe, { forwardRef as le, useState as M, useEffect as K } from "react";
2
- var W = { exports: {} }, A = {};
1
+ import I, { forwardRef as le, useState as C, useEffect as U, useRef as ie } from "react";
2
+ var q = { exports: {} }, M = {};
3
3
  /**
4
4
  * @license React
5
5
  * react-jsx-runtime.production.js
@@ -9,29 +9,29 @@ var W = { exports: {} }, A = {};
9
9
  * This source code is licensed under the MIT license found in the
10
10
  * LICENSE file in the root directory of this source tree.
11
11
  */
12
- var X;
13
- function ie() {
14
- if (X) return A;
15
- X = 1;
16
- var n = Symbol.for("react.transitional.element"), d = Symbol.for("react.fragment");
17
- function x(s, t, a) {
18
- var f = null;
19
- if (a !== void 0 && (f = "" + a), t.key !== void 0 && (f = "" + t.key), "key" in t) {
20
- a = {};
21
- for (var i in t)
22
- i !== "key" && (a[i] = t[i]);
23
- } else a = t;
24
- return t = a.ref, {
25
- $$typeof: n,
12
+ var re;
13
+ function ce() {
14
+ if (re) return M;
15
+ re = 1;
16
+ var o = Symbol.for("react.transitional.element"), l = Symbol.for("react.fragment");
17
+ function i(s, a, t) {
18
+ var x = null;
19
+ if (t !== void 0 && (x = "" + t), a.key !== void 0 && (x = "" + a.key), "key" in a) {
20
+ t = {};
21
+ for (var n in a)
22
+ n !== "key" && (t[n] = a[n]);
23
+ } else t = a;
24
+ return a = t.ref, {
25
+ $$typeof: o,
26
26
  type: s,
27
- key: f,
28
- ref: t !== void 0 ? t : null,
29
- props: a
27
+ key: x,
28
+ ref: a !== void 0 ? a : null,
29
+ props: t
30
30
  };
31
31
  }
32
- return A.Fragment = d, A.jsx = x, A.jsxs = x, A;
32
+ return M.Fragment = l, M.jsx = i, M.jsxs = i, M;
33
33
  }
34
- var O = {};
34
+ var D = {};
35
35
  /**
36
36
  * @license React
37
37
  * react-jsx-runtime.development.js
@@ -41,126 +41,126 @@ var O = {};
41
41
  * This source code is licensed under the MIT license found in the
42
42
  * LICENSE file in the root directory of this source tree.
43
43
  */
44
- var J;
45
- function ce() {
46
- return J || (J = 1, process.env.NODE_ENV !== "production" && function() {
47
- function n(r) {
44
+ var ae;
45
+ function de() {
46
+ return ae || (ae = 1, process.env.NODE_ENV !== "production" && function() {
47
+ function o(r) {
48
48
  if (r == null) return null;
49
49
  if (typeof r == "function")
50
- return r.$$typeof === ae ? null : r.displayName || r.name || null;
50
+ return r.$$typeof === L ? null : r.displayName || r.name || null;
51
51
  if (typeof r == "string") return r;
52
52
  switch (r) {
53
- case w:
53
+ case v:
54
54
  return "Fragment";
55
55
  case k:
56
56
  return "Profiler";
57
- case y:
57
+ case N:
58
58
  return "StrictMode";
59
- case R:
59
+ case w:
60
60
  return "Suspense";
61
- case P:
61
+ case E:
62
62
  return "SuspenseList";
63
- case te:
63
+ case F:
64
64
  return "Activity";
65
65
  }
66
66
  if (typeof r == "object")
67
67
  switch (typeof r.tag == "number" && console.error(
68
68
  "Received an unexpected object in getComponentNameFromType(). This is likely a bug in React. Please file an issue."
69
69
  ), r.$$typeof) {
70
- case v:
70
+ case p:
71
71
  return "Portal";
72
- case _:
72
+ case T:
73
73
  return r.displayName || "Context";
74
- case E:
74
+ case R:
75
75
  return (r._context.displayName || "Context") + ".Consumer";
76
- case T:
77
- var c = r.render;
78
- return r = r.displayName, r || (r = c.displayName || c.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
76
+ case _:
77
+ var b = r.render;
78
+ return r = r.displayName, r || (r = b.displayName || b.name || "", r = r !== "" ? "ForwardRef(" + r + ")" : "ForwardRef"), r;
79
+ case Y:
80
+ return b = r.displayName || null, b !== null ? b : o(r.type) || "Memo";
79
81
  case S:
80
- return c = r.displayName || null, c !== null ? c : n(r.type) || "Memo";
81
- case L:
82
- c = r._payload, r = r._init;
82
+ b = r._payload, r = r._init;
83
83
  try {
84
- return n(r(c));
84
+ return o(r(b));
85
85
  } catch {
86
86
  }
87
87
  }
88
88
  return null;
89
89
  }
90
- function d(r) {
90
+ function l(r) {
91
91
  return "" + r;
92
92
  }
93
- function x(r) {
93
+ function i(r) {
94
94
  try {
95
- d(r);
96
- var c = !1;
95
+ l(r);
96
+ var b = !1;
97
97
  } catch {
98
- c = !0;
98
+ b = !0;
99
99
  }
100
- if (c) {
101
- c = console;
102
- var p = c.error, $ = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
103
- return p.call(
104
- c,
100
+ if (b) {
101
+ b = console;
102
+ var j = b.error, $ = typeof Symbol == "function" && Symbol.toStringTag && r[Symbol.toStringTag] || r.constructor.name || "Object";
103
+ return j.call(
104
+ b,
105
105
  "The provided key is an unsupported type %s. This value must be coerced to a string before using it here.",
106
106
  $
107
- ), d(r);
107
+ ), l(r);
108
108
  }
109
109
  }
110
110
  function s(r) {
111
- if (r === w) return "<>";
112
- if (typeof r == "object" && r !== null && r.$$typeof === L)
111
+ if (r === v) return "<>";
112
+ if (typeof r == "object" && r !== null && r.$$typeof === S)
113
113
  return "<...>";
114
114
  try {
115
- var c = n(r);
116
- return c ? "<" + c + ">" : "<...>";
115
+ var b = o(r);
116
+ return b ? "<" + b + ">" : "<...>";
117
117
  } catch {
118
118
  return "<...>";
119
119
  }
120
120
  }
121
- function t() {
122
- var r = B.A;
121
+ function a() {
122
+ var r = A.A;
123
123
  return r === null ? null : r.getOwner();
124
124
  }
125
- function a() {
125
+ function t() {
126
126
  return Error("react-stack-top-frame");
127
127
  }
128
- function f(r) {
129
- if (F.call(r, "key")) {
130
- var c = Object.getOwnPropertyDescriptor(r, "key").get;
131
- if (c && c.isReactWarning) return !1;
128
+ function x(r) {
129
+ if (X.call(r, "key")) {
130
+ var b = Object.getOwnPropertyDescriptor(r, "key").get;
131
+ if (b && b.isReactWarning) return !1;
132
132
  }
133
133
  return r.key !== void 0;
134
134
  }
135
- function i(r, c) {
136
- function p() {
137
- V || (V = !0, console.error(
135
+ function n(r, b) {
136
+ function j() {
137
+ J || (J = !0, console.error(
138
138
  "%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)",
139
- c
139
+ b
140
140
  ));
141
141
  }
142
- p.isReactWarning = !0, Object.defineProperty(r, "key", {
143
- get: p,
142
+ j.isReactWarning = !0, Object.defineProperty(r, "key", {
143
+ get: j,
144
144
  configurable: !0
145
145
  });
146
146
  }
147
- function u() {
148
- var r = n(this.type);
149
- return H[r] || (H[r] = !0, console.error(
147
+ function c() {
148
+ var r = o(this.type);
149
+ return Z[r] || (Z[r] = !0, console.error(
150
150
  "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."
151
151
  )), r = this.props.ref, r !== void 0 ? r : null;
152
152
  }
153
- function g(r, c, p, $, C, Y) {
154
- var j = p.ref;
153
+ function g(r, b, j, $, B, G) {
154
+ var y = j.ref;
155
155
  return r = {
156
156
  $$typeof: h,
157
157
  type: r,
158
- key: c,
159
- props: p,
158
+ key: b,
159
+ props: j,
160
160
  _owner: $
161
- }, (j !== void 0 ? j : null) !== null ? Object.defineProperty(r, "ref", {
161
+ }, (y !== void 0 ? y : null) !== null ? Object.defineProperty(r, "ref", {
162
162
  enumerable: !1,
163
- get: u
163
+ get: c
164
164
  }) : Object.defineProperty(r, "ref", { enumerable: !1, value: null }), r._store = {}, Object.defineProperty(r._store, "validated", {
165
165
  configurable: !1,
166
166
  enumerable: !1,
@@ -175,33 +175,33 @@ function ce() {
175
175
  configurable: !1,
176
176
  enumerable: !1,
177
177
  writable: !0,
178
- value: C
178
+ value: B
179
179
  }), Object.defineProperty(r, "_debugTask", {
180
180
  configurable: !1,
181
181
  enumerable: !1,
182
182
  writable: !0,
183
- value: Y
183
+ value: G
184
184
  }), Object.freeze && (Object.freeze(r.props), Object.freeze(r)), r;
185
185
  }
186
- function b(r, c, p, $, C, Y) {
187
- var j = c.children;
188
- if (j !== void 0)
186
+ function f(r, b, j, $, B, G) {
187
+ var y = b.children;
188
+ if (y !== void 0)
189
189
  if ($)
190
- if (se(j)) {
191
- for ($ = 0; $ < j.length; $++)
192
- o(j[$]);
193
- Object.freeze && Object.freeze(j);
190
+ if (ne(y)) {
191
+ for ($ = 0; $ < y.length; $++)
192
+ d(y[$]);
193
+ Object.freeze && Object.freeze(y);
194
194
  } else
195
195
  console.error(
196
196
  "React.jsx: Static children should always be an array. You are likely explicitly calling React.jsxs or React.jsxDEV. Use the Babel transform instead."
197
197
  );
198
- else o(j);
199
- if (F.call(c, "key")) {
200
- j = n(r);
201
- var N = Object.keys(c).filter(function(ne) {
202
- return ne !== "key";
198
+ else d(y);
199
+ if (X.call(b, "key")) {
200
+ y = o(r);
201
+ var P = Object.keys(b).filter(function(oe) {
202
+ return oe !== "key";
203
203
  });
204
- $ = 0 < N.length ? "{key: someKey, " + N.join(": ..., ") + ": ...}" : "{key: someKey}", q[j + $] || (N = 0 < N.length ? "{" + N.join(": ..., ") + ": ...}" : "{}", console.error(
204
+ $ = 0 < P.length ? "{key: someKey, " + P.join(": ..., ") + ": ...}" : "{key: someKey}", ee[y + $] || (P = 0 < P.length ? "{" + P.join(": ..., ") + ": ...}" : "{}", console.error(
205
205
  `A props object containing a "key" prop is being spread into JSX:
206
206
  let props = %s;
207
207
  <%s {...props} />
@@ -209,340 +209,345 @@ React keys must be passed directly to JSX without using spread:
209
209
  let props = %s;
210
210
  <%s key={someKey} {...props} />`,
211
211
  $,
212
- j,
213
- N,
214
- j
215
- ), q[j + $] = !0);
212
+ y,
213
+ P,
214
+ y
215
+ ), ee[y + $] = !0);
216
216
  }
217
- if (j = null, p !== void 0 && (x(p), j = "" + p), f(c) && (x(c.key), j = "" + c.key), "key" in c) {
218
- p = {};
219
- for (var z in c)
220
- z !== "key" && (p[z] = c[z]);
221
- } else p = c;
222
- return j && i(
223
- p,
217
+ if (y = null, j !== void 0 && (i(j), y = "" + j), x(b) && (i(b.key), y = "" + b.key), "key" in b) {
218
+ j = {};
219
+ for (var H in b)
220
+ H !== "key" && (j[H] = b[H]);
221
+ } else j = b;
222
+ return y && n(
223
+ j,
224
224
  typeof r == "function" ? r.displayName || r.name || "Unknown" : r
225
225
  ), g(
226
226
  r,
227
+ y,
227
228
  j,
228
- p,
229
- t(),
230
- C,
231
- Y
229
+ a(),
230
+ B,
231
+ G
232
232
  );
233
233
  }
234
- function o(r) {
235
- m(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === L && (r._payload.status === "fulfilled" ? m(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
234
+ function d(r) {
235
+ m(r) ? r._store && (r._store.validated = 1) : typeof r == "object" && r !== null && r.$$typeof === S && (r._payload.status === "fulfilled" ? m(r._payload.value) && r._payload.value._store && (r._payload.value._store.validated = 1) : r._store && (r._store.validated = 1));
236
236
  }
237
237
  function m(r) {
238
238
  return typeof r == "object" && r !== null && r.$$typeof === h;
239
239
  }
240
- var l = oe, h = Symbol.for("react.transitional.element"), v = Symbol.for("react.portal"), w = Symbol.for("react.fragment"), y = Symbol.for("react.strict_mode"), k = Symbol.for("react.profiler"), E = Symbol.for("react.consumer"), _ = Symbol.for("react.context"), T = Symbol.for("react.forward_ref"), R = Symbol.for("react.suspense"), P = Symbol.for("react.suspense_list"), S = Symbol.for("react.memo"), L = Symbol.for("react.lazy"), te = Symbol.for("react.activity"), ae = Symbol.for("react.client.reference"), B = l.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, F = Object.prototype.hasOwnProperty, se = Array.isArray, I = console.createTask ? console.createTask : function() {
240
+ var u = I, h = Symbol.for("react.transitional.element"), p = Symbol.for("react.portal"), v = Symbol.for("react.fragment"), N = Symbol.for("react.strict_mode"), k = Symbol.for("react.profiler"), R = Symbol.for("react.consumer"), T = Symbol.for("react.context"), _ = Symbol.for("react.forward_ref"), w = Symbol.for("react.suspense"), E = Symbol.for("react.suspense_list"), Y = Symbol.for("react.memo"), S = Symbol.for("react.lazy"), F = Symbol.for("react.activity"), L = Symbol.for("react.client.reference"), A = u.__CLIENT_INTERNALS_DO_NOT_USE_OR_WARN_USERS_THEY_CANNOT_UPGRADE, X = Object.prototype.hasOwnProperty, ne = Array.isArray, V = console.createTask ? console.createTask : function() {
241
241
  return null;
242
242
  };
243
- l = {
243
+ u = {
244
244
  react_stack_bottom_frame: function(r) {
245
245
  return r();
246
246
  }
247
247
  };
248
- var V, H = {}, G = l.react_stack_bottom_frame.bind(
249
- l,
250
- a
251
- )(), U = I(s(a)), q = {};
252
- O.Fragment = w, O.jsx = function(r, c, p) {
253
- var $ = 1e4 > B.recentlyCreatedOwnerStacks++;
254
- return b(
248
+ var J, Z = {}, K = u.react_stack_bottom_frame.bind(
249
+ u,
250
+ t
251
+ )(), Q = V(s(t)), ee = {};
252
+ D.Fragment = v, D.jsx = function(r, b, j) {
253
+ var $ = 1e4 > A.recentlyCreatedOwnerStacks++;
254
+ return f(
255
255
  r,
256
- c,
257
- p,
256
+ b,
257
+ j,
258
258
  !1,
259
- $ ? Error("react-stack-top-frame") : G,
260
- $ ? I(s(r)) : U
259
+ $ ? Error("react-stack-top-frame") : K,
260
+ $ ? V(s(r)) : Q
261
261
  );
262
- }, O.jsxs = function(r, c, p) {
263
- var $ = 1e4 > B.recentlyCreatedOwnerStacks++;
264
- return b(
262
+ }, D.jsxs = function(r, b, j) {
263
+ var $ = 1e4 > A.recentlyCreatedOwnerStacks++;
264
+ return f(
265
265
  r,
266
- c,
267
- p,
266
+ b,
267
+ j,
268
268
  !0,
269
- $ ? Error("react-stack-top-frame") : G,
270
- $ ? I(s(r)) : U
269
+ $ ? Error("react-stack-top-frame") : K,
270
+ $ ? V(s(r)) : Q
271
271
  );
272
272
  };
273
- }()), O;
273
+ }()), D;
274
274
  }
275
- process.env.NODE_ENV === "production" ? W.exports = ie() : W.exports = ce();
276
- var e = W.exports;
277
- const de = ({
278
- src: n,
279
- alt: d = "Avatar",
280
- size: x = "md",
275
+ process.env.NODE_ENV === "production" ? q.exports = ce() : q.exports = de();
276
+ var e = q.exports;
277
+ const ue = ({
278
+ src: o,
279
+ alt: l = "Avatar",
280
+ size: i = "md",
281
281
  imageFit: s = "cover",
282
- customStyles: t = {},
283
- className: a = "",
284
- borderColor: f = "border-gray-200",
285
- darkBorderColor: i = "dark:border-gray-700",
286
- backgroundColor: u = "bg-gray-100",
282
+ customStyles: a = {},
283
+ className: t = "",
284
+ borderColor: x = "border-gray-200",
285
+ darkBorderColor: n = "dark:border-gray-700",
286
+ backgroundColor: c = "bg-gray-100",
287
287
  darkBackgroundColor: g = "dark:bg-gray-800",
288
- loading: b = "lazy"
288
+ loading: f = "lazy"
289
289
  }) => {
290
- const o = {
290
+ const d = {
291
291
  sm: "h-8 w-8",
292
292
  md: "h-12 w-12",
293
293
  lg: "h-16 w-16",
294
294
  xl: "h-32 w-32"
295
- }, m = s === "contain" ? "object-contain" : "object-cover", l = `border ${f} ${i}`, h = `${u} ${g}`;
295
+ }, m = s === "contain" ? "object-contain" : "object-cover", u = `border ${x} ${n}`, h = `${c} ${g}`;
296
296
  return /* @__PURE__ */ e.jsx("div", { className: `
297
297
  ds-avatar relative rounded-full overflow-hidden flex-shrink-0
298
- ${o[x]}
298
+ ${d[i]}
299
299
  ${h}
300
- ${l}
301
- ${t.container || ""}
302
- ${a}
300
+ ${u}
301
+ ${a.container || ""}
302
+ ${t}
303
303
  `, children: /* @__PURE__ */ e.jsx(
304
304
  "img",
305
305
  {
306
- src: n,
307
- alt: d,
308
- loading: b,
306
+ src: o,
307
+ alt: l,
308
+ loading: f,
309
309
  decoding: "async",
310
310
  className: `
311
311
  w-full h-full
312
312
  ${m}
313
- ${t.image || ""}
313
+ ${a.image || ""}
314
314
  `
315
315
  }
316
316
  ) });
317
- }, ee = ({
318
- label: n,
319
- variant: d = "primary",
320
- customStyles: x = {},
317
+ }, te = ({
318
+ label: o,
319
+ variant: l = "primary",
320
+ customStyles: i = {},
321
321
  className: s = "",
322
- endIcon: t,
322
+ endIcon: a,
323
323
  // Default Colors
324
- primaryColor: a = "bg-blue-100 text-blue-800",
325
- darkPrimaryColor: f = "dark:bg-blue-900/50 dark:text-blue-200",
326
- secondaryColor: i = "bg-gray-100 text-gray-800",
327
- darkSecondaryColor: u = "dark:bg-gray-700 dark:text-gray-300",
324
+ primaryColor: t = "bg-blue-100 text-blue-800",
325
+ darkPrimaryColor: x = "dark:bg-blue-900/50 dark:text-blue-200",
326
+ secondaryColor: n = "bg-gray-100 text-gray-800",
327
+ darkSecondaryColor: c = "dark:bg-gray-700 dark:text-gray-300",
328
328
  outlineColor: g = "border border-gray-300 text-gray-600 bg-transparent",
329
- darkOutlineColor: b = "dark:border-gray-600 dark:text-gray-400",
330
- successColor: o = "bg-green-100 text-green-800",
329
+ darkOutlineColor: f = "dark:border-gray-600 dark:text-gray-400",
330
+ successColor: d = "bg-green-100 text-green-800",
331
331
  darkSuccessColor: m = "dark:bg-green-900/50 dark:text-green-200"
332
332
  }) => {
333
- const l = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors gap-1", h = {
334
- primary: `${a} ${f}`,
335
- secondary: `${i} ${u}`,
336
- outline: `${g} ${b}`,
337
- success: `${o} ${m}`
333
+ const u = "inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium transition-colors gap-1", h = {
334
+ primary: `${t} ${x}`,
335
+ secondary: `${n} ${c}`,
336
+ outline: `${g} ${f}`,
337
+ success: `${d} ${m}`
338
338
  };
339
339
  return /* @__PURE__ */ e.jsxs("span", { className: `
340
340
  ds-badge
341
- ${l}
342
- ${h[d]}
343
- ${x.container || ""}
341
+ ${u}
342
+ ${h[l]}
343
+ ${i.container || ""}
344
344
  ${s}
345
345
  `, children: [
346
- /* @__PURE__ */ e.jsx("span", { className: x.label || "", children: n }),
347
- t && /* @__PURE__ */ e.jsx("span", { className: "flex items-center", children: t })
346
+ /* @__PURE__ */ e.jsx("span", { className: i.label || "", children: o }),
347
+ a && /* @__PURE__ */ e.jsx("span", { className: "flex items-center", children: a })
348
348
  ] });
349
- }, D = ({
350
- label: n,
351
- variant: d = "primary",
352
- size: x = "medium",
349
+ }, O = ({
350
+ label: o,
351
+ variant: l = "primary",
352
+ size: i = "medium",
353
353
  onClick: s,
354
- className: t = "",
355
- customStyles: a = {},
356
- href: f,
357
- target: i,
354
+ className: a = "",
355
+ customStyles: t = {},
356
+ href: x,
357
+ target: n,
358
358
  // Default Colors
359
- primaryColor: u = "bg-blue-600",
359
+ primaryColor: c = "bg-blue-600",
360
360
  primaryHoverColor: g = "hover:bg-blue-700",
361
- darkPrimaryColor: b = "dark:bg-blue-600",
362
- darkPrimaryHoverColor: o = "dark:hover:bg-blue-500",
361
+ darkPrimaryColor: f = "dark:bg-blue-600",
362
+ darkPrimaryHoverColor: d = "dark:hover:bg-blue-500",
363
363
  secondaryColor: m = "bg-gray-100",
364
- secondaryHoverColor: l = "hover:bg-gray-200",
364
+ secondaryHoverColor: u = "hover:bg-gray-200",
365
365
  darkSecondaryColor: h = "dark:bg-gray-800",
366
- darkSecondaryHoverColor: v = "dark:hover:bg-gray-700",
367
- outlineColor: w = "text-blue-600 border-blue-600",
368
- outlineHoverColor: y = "hover:bg-blue-50",
366
+ darkSecondaryHoverColor: p = "dark:hover:bg-gray-700",
367
+ outlineColor: v = "text-blue-600 border-blue-600",
368
+ outlineHoverColor: N = "hover:bg-blue-50",
369
369
  darkOutlineColor: k = "dark:text-blue-400 dark:border-blue-400",
370
- darkOutlineHoverColor: E = "dark:hover:bg-blue-950"
370
+ darkOutlineHoverColor: R = "dark:hover:bg-blue-950",
371
+ ghostColor: T = "text-gray-600 bg-transparent",
372
+ ghostHoverColor: _ = "hover:bg-gray-100",
373
+ darkGhostColor: w = "dark:text-gray-300",
374
+ darkGhostHoverColor: E = "dark:hover:bg-gray-800"
371
375
  }) => {
372
- const _ = "relative group inline-flex justify-center items-center font-bold rounded-lg cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 no-underline", T = {
373
- primary: `${u} text-white ${g} focus:ring-blue-500 border-2 border-transparent ${b} ${o}`,
374
- secondary: `${m} text-gray-800 ${l} focus:ring-gray-500 border-2 border-transparent ${h} dark:text-gray-100 ${v}`,
375
- outline: `bg-transparent ${w} border-2 ${y} focus:ring-blue-500 ${k} ${E}`
376
- }, R = {
376
+ const Y = "relative group inline-flex justify-center items-center font-bold rounded-lg cursor-pointer transition-all duration-200 focus:outline-none focus:ring-2 focus:ring-offset-2 no-underline", S = {
377
+ primary: `${c} text-white ${g} focus:ring-blue-500 border-2 border-transparent ${f} ${d}`,
378
+ secondary: `${m} text-gray-800 ${u} focus:ring-gray-500 border-2 border-transparent ${h} dark:text-gray-100 ${p}`,
379
+ outline: `bg-transparent ${v} border-2 ${N} focus:ring-blue-500 ${k} ${R}`,
380
+ ghost: `${T} border-2 border-transparent ${_} focus:ring-gray-500 ${w} ${E}`
381
+ }, F = {
377
382
  small: "px-3 py-1.5 text-sm",
378
383
  medium: "px-5 py-2.5 text-base",
379
384
  large: "px-8 py-3.5 text-lg"
380
- }, P = `${_} ${T[d]} ${R[x]} ${a.container || ""} ${t}`, S = /* @__PURE__ */ e.jsx("span", { className: `relative z-10 flex items-center justify-center gap-2 ${a.label || ""}`, children: n });
381
- return f ? /* @__PURE__ */ e.jsx(
385
+ }, L = `${Y} ${S[l]} ${F[i]} ${t.container || ""} ${a}`, A = /* @__PURE__ */ e.jsx("span", { className: `relative z-10 flex items-center justify-center gap-2 ${t.label || ""}`, children: o });
386
+ return x ? /* @__PURE__ */ e.jsx(
382
387
  "a",
383
388
  {
384
- href: f,
385
- className: P,
386
- target: i,
387
- rel: i === "_blank" ? "noopener noreferrer" : void 0,
389
+ href: x,
390
+ className: L,
391
+ target: n,
392
+ rel: n === "_blank" ? "noopener noreferrer" : void 0,
388
393
  onClick: s,
389
- children: S
394
+ children: A
390
395
  }
391
396
  ) : /* @__PURE__ */ e.jsx(
392
397
  "button",
393
398
  {
394
399
  type: "button",
395
- className: P,
400
+ className: L,
396
401
  onClick: s,
397
- children: S
402
+ children: A
398
403
  }
399
404
  );
400
405
  }, xe = le(({
401
- label: n,
402
- error: d,
403
- className: x,
406
+ label: o,
407
+ error: l,
408
+ className: i,
404
409
  customStyles: s = {},
405
- startIcon: t,
406
- endIcon: a,
410
+ startIcon: a,
411
+ endIcon: t,
407
412
  // Default Colors
408
- labelColor: f = "text-gray-700",
409
- darkLabelColor: i = "dark:text-gray-200",
410
- inputBgColor: u = "bg-white",
413
+ labelColor: x = "text-gray-700",
414
+ darkLabelColor: n = "dark:text-gray-200",
415
+ inputBgColor: c = "bg-white",
411
416
  darkInputBgColor: g = "dark:bg-gray-800",
412
- inputBorderColor: b = "border-gray-300",
413
- darkInputBorderColor: o = "dark:border-gray-600",
417
+ inputBorderColor: f = "border-gray-300",
418
+ darkInputBorderColor: d = "dark:border-gray-600",
414
419
  inputTextColor: m = "text-gray-900",
415
- darkInputTextColor: l = "dark:text-white",
420
+ darkInputTextColor: u = "dark:text-white",
416
421
  focusRingColor: h = "focus:ring-blue-500",
417
- errorBorderColor: v = "border-red-500",
418
- darkErrorBorderColor: w = "dark:border-red-500",
419
- errorTextColor: y = "text-red-500",
422
+ errorBorderColor: p = "border-red-500",
423
+ darkErrorBorderColor: v = "dark:border-red-500",
424
+ errorTextColor: N = "text-red-500",
420
425
  darkErrorTextColor: k = "dark:text-red-400",
421
- ...E
422
- }, _) => {
423
- const T = `
426
+ ...R
427
+ }, T) => {
428
+ const _ = `
424
429
  w-full py-2 border rounded-lg shadow-sm focus:outline-none focus:ring-2 transition-all
425
- ${t ? "pl-10" : "px-3"}
426
- ${a ? "pr-10" : "px-3"}
427
- ${u} ${g}
428
- ${m} ${l}
430
+ ${a ? "pl-10" : "px-3"}
431
+ ${t ? "pr-10" : "px-3"}
432
+ ${c} ${g}
433
+ ${m} ${u}
429
434
  ${h}
430
- `, R = d ? `${v} focus:ring-red-500 ${w}` : `${b} ${o}`;
431
- return /* @__PURE__ */ e.jsxs("div", { className: `w-full ${s.container || ""} ${x}`, children: [
432
- n && /* @__PURE__ */ e.jsx("label", { className: `block text-sm font-medium ${f} ${i} mb-1 ${s.label || ""}`, children: n }),
435
+ `, w = l ? `${p} focus:ring-red-500 ${v}` : `${f} ${d}`;
436
+ return /* @__PURE__ */ e.jsxs("div", { className: `w-full ${s.container || ""} ${i}`, children: [
437
+ o && /* @__PURE__ */ e.jsx("label", { className: `block text-sm font-medium ${x} ${n} mb-1 ${s.label || ""}`, children: o }),
433
438
  /* @__PURE__ */ e.jsxs("div", { className: "relative", children: [
434
- t && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none ${s.iconContainer || ""}`, children: t }),
439
+ a && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none ${s.iconContainer || ""}`, children: a }),
435
440
  /* @__PURE__ */ e.jsx(
436
441
  "input",
437
442
  {
438
- ref: _,
443
+ ref: T,
439
444
  className: `
440
- ${T}
441
- ${R}
445
+ ${_}
446
+ ${w}
442
447
  ${s.input || ""}
443
448
  `,
444
- ...E
449
+ ...R
445
450
  }
446
451
  ),
447
- a && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 right-0 pr-3 flex items-center ${s.iconContainer || ""}`, children: a })
452
+ t && /* @__PURE__ */ e.jsx("div", { className: `absolute inset-y-0 right-0 pr-3 flex items-center ${s.iconContainer || ""}`, children: t })
448
453
  ] }),
449
- d && /* @__PURE__ */ e.jsx("p", { className: `mt-1 text-xs ${y} ${k} ${s.error || ""}`, children: d })
454
+ l && /* @__PURE__ */ e.jsx("p", { className: `mt-1 text-xs ${N} ${k} ${s.error || ""}`, children: l })
450
455
  ] });
451
456
  });
452
457
  xe.displayName = "BasicInput";
453
- const re = ({
454
- isToggled: n,
455
- onToggle: d,
456
- iconOn: x,
458
+ const se = ({
459
+ isToggled: o,
460
+ onToggle: l,
461
+ iconOn: i,
457
462
  iconOff: s,
458
- imageOn: t,
459
- imageOff: a,
460
- imageFit: f = "contain",
461
- customStyles: i = {},
462
- className: u = "",
463
+ imageOn: a,
464
+ imageOff: t,
465
+ imageFit: x = "contain",
466
+ customStyles: n = {},
467
+ className: c = "",
463
468
  title: g
464
469
  }) => {
465
- const b = `w-6 h-6 ${i.icon || ""}`, o = () => {
466
- const m = f === "contain" ? "object-contain" : "object-cover";
467
- return n ? t ? /* @__PURE__ */ e.jsx("img", { src: t, alt: "Toggled On", className: `${b} ${m}` }) : x : a ? /* @__PURE__ */ e.jsx("img", { src: a, alt: "Toggled Off", className: `${b} ${m}` }) : s;
470
+ const f = `w-6 h-6 ${n.icon || ""}`, d = () => {
471
+ const m = x === "contain" ? "object-contain" : "object-cover";
472
+ return o ? a ? /* @__PURE__ */ e.jsx("img", { src: a, alt: "Toggled On", className: `${f} ${m}` }) : i : t ? /* @__PURE__ */ e.jsx("img", { src: t, alt: "Toggled Off", className: `${f} ${m}` }) : s;
468
473
  };
469
474
  return /* @__PURE__ */ e.jsx(
470
475
  "button",
471
476
  {
472
- onClick: d,
477
+ onClick: l,
473
478
  title: g,
474
479
  className: `
475
480
  p-2 rounded-full transition-all duration-300 ease-in-out
476
481
  focus:outline-none focus:ring-2 focus:ring-blue-500 hover:rotate-12 hover:scale-110 overflow-hidden
477
- ${n ? "bg-gray-800 text-white hover:bg-gray-700" : "bg-gray-200 text-gray-800 hover:bg-gray-300"}
478
- ${i.container || ""}
479
- ${u}
482
+ ${o ? "bg-gray-800 text-white hover:bg-gray-700" : "bg-gray-200 text-gray-800 hover:bg-gray-300"}
483
+ ${n.container || ""}
484
+ ${c}
480
485
  `,
481
- children: o()
486
+ children: d()
482
487
  }
483
488
  );
484
- }, Z = ({
485
- isDark: n,
486
- onToggle: d,
487
- iconSun: x,
489
+ }, z = ({
490
+ isDark: o,
491
+ onToggle: l,
492
+ iconSun: i,
488
493
  iconMoon: s,
489
- sunImage: t,
490
- moonImage: a,
491
- customStyles: f = {},
492
- ...i
494
+ sunImage: a,
495
+ moonImage: t,
496
+ customStyles: x = {},
497
+ ...n
493
498
  }) => {
494
- const [u, g] = M(!1);
495
- K(() => {
496
- const v = () => {
497
- const y = document.documentElement.classList.contains("dark");
498
- g(y);
499
+ const [c, g] = C(!1);
500
+ U(() => {
501
+ const p = () => {
502
+ const N = document.documentElement.classList.contains("dark");
503
+ g(N);
499
504
  };
500
- v();
501
- const w = new MutationObserver(v);
502
- return w.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => w.disconnect();
505
+ p();
506
+ const v = new MutationObserver(p);
507
+ return v.observe(document.documentElement, { attributes: !0, attributeFilter: ["class"] }), () => v.disconnect();
503
508
  }, []);
504
- const b = () => {
505
- const v = document.documentElement;
506
- v.classList.contains("dark") ? (v.classList.remove("dark"), localStorage.setItem("theme", "light")) : (v.classList.add("dark"), localStorage.setItem("theme", "dark")), d && d();
507
- }, o = n !== void 0 ? n : u, m = `w-6 h-6 ${f.icon || ""}`, l = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: m, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) }), h = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: m, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) });
509
+ const f = () => {
510
+ const p = document.documentElement;
511
+ p.classList.contains("dark") ? (p.classList.remove("dark"), localStorage.setItem("theme", "light")) : (p.classList.add("dark"), localStorage.setItem("theme", "dark")), l && l();
512
+ }, d = o !== void 0 ? o : c, m = `w-6 h-6 ${x.icon || ""}`, u = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: m, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M12 3v1m0 16v1m9-9h-1M4 12H3m15.364 6.364l-.707-.707M6.343 6.343l-.707-.707m12.728 0l-.707.707M6.343 17.657l-.707.707M16 12a4 4 0 11-8 0 4 4 0 018 0z" }) }), h = /* @__PURE__ */ e.jsx("svg", { xmlns: "http://www.w3.org/2000/svg", className: m, fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M20.354 15.354A9 9 0 018.646 3.646 9.003 9.003 0 0012 21a9.003 9.003 0 008.354-5.646z" }) });
508
513
  return /* @__PURE__ */ e.jsx(
509
- re,
514
+ se,
510
515
  {
511
- ...i,
512
- isToggled: o,
513
- onToggle: b,
514
- iconOn: x || l,
516
+ ...n,
517
+ isToggled: d,
518
+ onToggle: f,
519
+ iconOn: i || u,
515
520
  iconOff: s || h,
516
- imageOn: t,
517
- imageOff: a,
518
- customStyles: f,
519
- title: i.title || (o ? "Switch to light mode" : "Switch to dark mode")
521
+ imageOn: a,
522
+ imageOff: t,
523
+ customStyles: x,
524
+ title: n.title || (d ? "Switch to light mode" : "Switch to dark mode")
520
525
  }
521
526
  );
522
- }, Q = ({
523
- initialLanguage: n = "en",
524
- onLanguageChange: d,
525
- className: x = "",
527
+ }, W = ({
528
+ initialLanguage: o = "en",
529
+ onLanguageChange: l,
530
+ className: i = "",
526
531
  customStyles: s = {},
527
- englishColor: t = "!bg-transparent hover:!bg-gray-100 dark:hover:!bg-gray-800",
528
- englishBorderColor: a = "border-2 border-transparent",
529
- englishTextColor: f = "!text-gray-600 dark:!text-gray-300",
530
- spanishColor: i = "!bg-transparent hover:!bg-gray-100 dark:hover:!bg-gray-800",
531
- spanishBorderColor: u = "border-2 border-transparent",
532
+ englishColor: a = "!bg-transparent hover:!bg-gray-100 dark:hover:!bg-gray-800",
533
+ englishBorderColor: t = "border-2 border-transparent",
534
+ englishTextColor: x = "!text-gray-600 dark:!text-gray-300",
535
+ spanishColor: n = "!bg-transparent hover:!bg-gray-100 dark:hover:!bg-gray-800",
536
+ spanishBorderColor: c = "border-2 border-transparent",
532
537
  spanishTextColor: g = "!text-gray-600 dark:!text-gray-300",
533
- isDark: b = !1
538
+ isDark: f = !1
534
539
  }) => {
535
- const [o, m] = M(n === "es"), l = () => {
536
- const v = !o;
537
- m(v), d && d(v ? "es" : "en");
538
- }, h = o ? `${i} ${g} ${u}` : `${t} ${f} ${a}`;
539
- return /* @__PURE__ */ e.jsx("div", { className: b ? "dark" : "", children: /* @__PURE__ */ e.jsx(
540
- re,
540
+ const [d, m] = C(o === "es"), u = () => {
541
+ const p = !d;
542
+ m(p), l && l(p ? "es" : "en");
543
+ }, h = d ? `${n} ${g} ${c}` : `${a} ${x} ${t}`;
544
+ return /* @__PURE__ */ e.jsx("div", { className: f ? "dark" : "", children: /* @__PURE__ */ e.jsx(
545
+ se,
541
546
  {
542
- isToggled: o,
543
- onToggle: l,
544
- className: x,
545
- title: o ? "Switch to English" : "Cambiar a Español",
547
+ isToggled: d,
548
+ onToggle: u,
549
+ className: i,
550
+ title: d ? "Switch to English" : "Cambiar a Español",
546
551
  iconOn: /* @__PURE__ */ e.jsx("span", { className: "font-bold text-xs", children: "ES" }),
547
552
  iconOff: /* @__PURE__ */ e.jsx("span", { className: "font-bold text-xs", children: "EN" }),
548
553
  customStyles: {
@@ -551,20 +556,56 @@ const re = ({
551
556
  }
552
557
  }
553
558
  ) });
554
- }, ue = ({
555
- title: n,
556
- description: d,
557
- image: x,
559
+ }, ge = ({
560
+ label: o,
561
+ value: l,
562
+ onChange: i,
563
+ min: s = 0,
564
+ max: a = 100,
565
+ step: t = 1,
566
+ className: x = "",
567
+ customStyles: n = {},
568
+ disabled: c,
569
+ ...g
570
+ }) => /* @__PURE__ */ e.jsxs("div", { className: `flex flex-col gap-2 ${n.container || ""} ${x}`, children: [
571
+ o && /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center", children: [
572
+ /* @__PURE__ */ e.jsx("label", { className: `text-sm font-medium text-gray-700 dark:text-gray-300 ${n.label || ""}`, children: o }),
573
+ /* @__PURE__ */ e.jsx("span", { className: "text-xs text-gray-500 font-mono", children: l })
574
+ ] }),
575
+ /* @__PURE__ */ e.jsx(
576
+ "input",
577
+ {
578
+ type: "range",
579
+ min: s,
580
+ max: a,
581
+ step: t,
582
+ value: l,
583
+ onChange: (f) => i(Number(f.target.value)),
584
+ disabled: c,
585
+ className: `
586
+ w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer dark:bg-gray-700
587
+ accent-blue-600 dark:accent-blue-500
588
+ disabled:opacity-50 disabled:cursor-not-allowed
589
+ focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2 dark:focus:ring-offset-gray-900
590
+ ${n.input || ""}
591
+ `,
592
+ ...g
593
+ }
594
+ )
595
+ ] }), Ne = (o) => /* @__PURE__ */ e.jsx(ge, { ...o }), fe = ({
596
+ title: o,
597
+ description: l,
598
+ image: i,
558
599
  tags: s = [],
559
- orientation: t = "vertical",
560
- actionLabel: a = "View Project",
561
- projectUrl: f,
562
- linkTarget: i = "_self",
563
- onViewProject: u,
600
+ orientation: a = "vertical",
601
+ actionLabel: t = "View Project",
602
+ projectUrl: x,
603
+ linkTarget: n = "_self",
604
+ onViewProject: c,
564
605
  customStyles: g = {},
565
- className: b = ""
606
+ className: f = ""
566
607
  }) => {
567
- const o = t === "horizontal";
608
+ const d = a === "horizontal";
568
609
  return /* @__PURE__ */ e.jsxs("div", { className: `
569
610
  /* 1. IDENTIFIER CLASS */
570
611
  ds-card
@@ -572,7 +613,7 @@ const re = ({
572
613
  /* 2. BASE STRUCTURE */
573
614
  group w-full rounded-xl overflow-hidden border transition-all duration-300
574
615
  /* Switch layout based on orientation prop */
575
- ${o ? "flex flex-col md:flex-row" : "flex flex-col"}
616
+ ${d ? "flex flex-col md:flex-row" : "flex flex-col"}
576
617
 
577
618
  /* 3. LIGHT MODE (Default) */
578
619
  /* White background, gray border, black shadow on hover */
@@ -597,18 +638,18 @@ const re = ({
597
638
 
598
639
  /* 5. EXTERNAL INJECTIONS */
599
640
  ${g.container || ""}
600
- ${b}
641
+ ${f}
601
642
  `, children: [
602
643
  /* @__PURE__ */ e.jsxs("div", { className: `
603
644
  ds-card-image overflow-hidden relative
604
- ${o ? "w-full h-48 md:w-2/5 md:h-auto" : "w-full h-48"}
645
+ ${d ? "w-full h-48 md:w-2/5 md:h-auto" : "w-full h-48"}
605
646
  ${g.imageWrapper || ""}
606
647
  `, children: [
607
648
  /* @__PURE__ */ e.jsx(
608
649
  "img",
609
650
  {
610
- src: x,
611
- alt: n,
651
+ src: i,
652
+ alt: o,
612
653
  loading: "lazy",
613
654
  decoding: "async",
614
655
  className: "w-full h-full object-cover transition-transform duration-700 group-hover:scale-105"
@@ -621,20 +662,20 @@ const re = ({
621
662
  /* @__PURE__ */ e.jsx("h3", { className: `
622
663
  ds-card-title text-2xl font-bold mb-3 transition-colors text-gray-900 dark:text-white
623
664
  ${g.title || ""}
624
- `, children: n }),
665
+ `, children: o }),
625
666
  /* @__PURE__ */ e.jsx("p", { className: `
626
667
  ds-card-description mb-4 line-clamp-3 leading-relaxed transition-colors text-gray-600 dark:text-gray-300
627
668
  ${g.description || ""}
628
- `, children: d }),
629
- /* @__PURE__ */ e.jsx("div", { className: `ds-card-tags flex flex-wrap gap-2 mb-6 ${g.tagsContainer || ""}`, children: s.map((m) => /* @__PURE__ */ e.jsx(ee, { label: m, variant: "secondary" }, m)) })
669
+ `, children: l }),
670
+ /* @__PURE__ */ e.jsx("div", { className: `ds-card-tags flex flex-wrap gap-2 mb-6 ${g.tagsContainer || ""}`, children: s.map((m) => /* @__PURE__ */ e.jsx(te, { label: m, variant: "secondary" }, m)) })
630
671
  ] }),
631
672
  /* @__PURE__ */ e.jsx("div", { className: "ds-card-actions flex justify-start mt-auto", children: /* @__PURE__ */ e.jsx(
632
- D,
673
+ O,
633
674
  {
634
- label: a,
635
- onClick: u,
636
- href: f,
637
- target: i,
675
+ label: t,
676
+ onClick: c,
677
+ href: x,
678
+ target: n,
638
679
  size: "medium",
639
680
  variant: "primary"
640
681
  }
@@ -642,146 +683,172 @@ const re = ({
642
683
  ] })
643
684
  ] });
644
685
  }, me = ({
645
- title: n = "Featured Content",
646
- items: d,
647
- layout: x = "grid",
686
+ children: o,
687
+ title: l,
688
+ actions: i,
689
+ className: s = "",
690
+ customStyles: a = {}
691
+ }) => /* @__PURE__ */ e.jsxs(
692
+ "div",
693
+ {
694
+ className: `
695
+ bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700
696
+ rounded-xl shadow-sm overflow-hidden
697
+ ${a.container || ""} ${s}
698
+ `,
699
+ children: [
700
+ (l || i) && /* @__PURE__ */ e.jsxs("div", { className: `
701
+ px-4 py-3 border-b border-gray-100 dark:border-gray-700
702
+ flex justify-between items-center bg-gray-50/50 dark:bg-gray-900/50
703
+ ${a.header || ""}
704
+ `, children: [
705
+ l && /* @__PURE__ */ e.jsx("h3", { className: `text-sm font-semibold text-gray-900 dark:text-gray-100 ${a.title || ""}`, children: l }),
706
+ i && /* @__PURE__ */ e.jsx("div", { className: `flex items-center gap-2 ${a.actions || ""}`, children: i })
707
+ ] }),
708
+ /* @__PURE__ */ e.jsx("div", { className: `p-4 ${a.content || ""}`, children: o })
709
+ ]
710
+ }
711
+ ), ke = (o) => /* @__PURE__ */ e.jsx(me, { ...o }), he = ({
712
+ title: o = "Featured Content",
713
+ items: l,
714
+ layout: i = "grid",
648
715
  itemButtonLabel: s = "View Details",
649
- onItemClick: t,
650
- customStyles: a = {},
716
+ onItemClick: a,
717
+ customStyles: t = {},
651
718
  // Default Colors
652
- backgroundColor: f = "bg-gray-50",
653
- darkBackgroundColor: i = "dark:bg-gray-900",
654
- titleColor: u = "text-gray-900",
719
+ backgroundColor: x = "bg-gray-50",
720
+ darkBackgroundColor: n = "dark:bg-gray-900",
721
+ titleColor: c = "text-gray-900",
655
722
  darkTitleColor: g = "dark:text-white"
656
723
  }) => {
657
- const b = x === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" : "flex flex-col gap-12 max-w-4xl mx-auto";
724
+ const f = i === "grid" ? "grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8" : "flex flex-col gap-12 max-w-4xl mx-auto";
658
725
  return /* @__PURE__ */ e.jsx("section", { className: `
659
726
  py-16 px-4 transition-colors duration-300
660
- ${f} ${i}
661
- ${a.container || ""}
727
+ ${x} ${n}
728
+ ${t.container || ""}
662
729
  `, children: /* @__PURE__ */ e.jsxs("div", { className: "max-w-7xl mx-auto", children: [
663
- n && /* @__PURE__ */ e.jsxs("div", { className: "mb-12 text-start", children: [
730
+ o && /* @__PURE__ */ e.jsxs("div", { className: "mb-12 text-start", children: [
664
731
  /* @__PURE__ */ e.jsx("h2", { className: `
665
732
  text-4xl font-extrabold mb-4 tracking-tight transition-colors
666
- ${u} ${g}
667
- ${a.title || ""}
668
- `, children: n }),
733
+ ${c} ${g}
734
+ ${t.title || ""}
735
+ `, children: o }),
669
736
  /* @__PURE__ */ e.jsx("div", { className: "h-1.5 w-24 bg-blue-600 mx-auto rounded-full" })
670
737
  ] }),
671
- /* @__PURE__ */ e.jsx("div", { className: b, children: d.map((o) => /* @__PURE__ */ e.jsx(
672
- ue,
738
+ /* @__PURE__ */ e.jsx("div", { className: f, children: l.map((d) => /* @__PURE__ */ e.jsx(
739
+ fe,
673
740
  {
674
- title: o.title,
675
- description: o.description,
676
- image: o.image,
677
- tags: o.tags,
678
- projectUrl: o.url,
679
- orientation: x === "list" ? "horizontal" : "vertical",
741
+ title: d.title,
742
+ description: d.description,
743
+ image: d.image,
744
+ tags: d.tags,
745
+ projectUrl: d.url,
746
+ orientation: i === "list" ? "horizontal" : "vertical",
680
747
  actionLabel: s,
681
- onViewProject: () => t == null ? void 0 : t(o.id)
748
+ onViewProject: () => a == null ? void 0 : a(d.id)
682
749
  },
683
- o.id
750
+ d.id
684
751
  )) })
685
752
  ] }) });
686
753
  }, be = ({
687
- copyrightOwner: n,
688
- copyrightText: d = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
689
- socialLinks: x,
754
+ copyrightOwner: o,
755
+ copyrightText: l = `© ${(/* @__PURE__ */ new Date()).getFullYear()} All rights reserved.`,
756
+ socialLinks: i,
690
757
  secondaryLinks: s = [],
691
- customStyles: t = {},
758
+ customStyles: a = {},
692
759
  // Default Colors
693
- backgroundColor: a = "bg-gray-900",
694
- darkBackgroundColor: f = "dark:bg-black",
695
- borderColor: i = "border-gray-800",
696
- darkBorderColor: u = "dark:border-gray-800",
760
+ backgroundColor: t = "bg-gray-900",
761
+ darkBackgroundColor: x = "dark:bg-black",
762
+ borderColor: n = "border-gray-800",
763
+ darkBorderColor: c = "dark:border-gray-800",
697
764
  textColor: g = "text-white",
698
- darkTextColor: b = "dark:text-white",
699
- linksColor: o = "text-gray-400",
765
+ darkTextColor: f = "dark:text-white",
766
+ linksColor: d = "text-gray-400",
700
767
  linksHoverColor: m = "hover:text-white"
701
768
  }) => /* @__PURE__ */ e.jsx("footer", { className: `
702
769
  py-12 border-t transition-colors duration-300
703
- ${a} ${f}
704
- ${i} ${u}
705
- ${t.container || ""}
770
+ ${t} ${x}
771
+ ${n} ${c}
772
+ ${a.container || ""}
706
773
  `, children: /* @__PURE__ */ e.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col md:flex-row justify-between items-center gap-6", children: [
707
- /* @__PURE__ */ e.jsxs("div", { className: `text-center md:text-left ${t.text || ""}`, children: [
708
- /* @__PURE__ */ e.jsx("p", { className: `text-lg font-bold ${g} ${b}`, children: n }),
709
- /* @__PURE__ */ e.jsx("p", { className: `text-sm mt-1 ${o} opacity-80`, children: d })
774
+ /* @__PURE__ */ e.jsxs("div", { className: `text-center md:text-left ${a.text || ""}`, children: [
775
+ /* @__PURE__ */ e.jsx("p", { className: `text-lg font-bold ${g} ${f}`, children: o }),
776
+ /* @__PURE__ */ e.jsx("p", { className: `text-sm mt-1 ${d} opacity-80`, children: l })
710
777
  ] }),
711
- s.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "flex gap-6 flex-wrap justify-center", children: s.map((l) => /* @__PURE__ */ e.jsx(
778
+ s.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "flex gap-6 flex-wrap justify-center", children: s.map((u) => /* @__PURE__ */ e.jsx(
712
779
  "a",
713
780
  {
714
- href: l.href,
781
+ href: u.href,
715
782
  className: `
716
783
  text-sm transition-colors
717
- ${o} ${m}
718
- ${t.link || ""}
784
+ ${d} ${m}
785
+ ${a.link || ""}
719
786
  `,
720
- children: l.label
787
+ children: u.label
721
788
  },
722
- l.label
789
+ u.label
723
790
  )) }),
724
- /* @__PURE__ */ e.jsx("div", { className: "flex space-x-6", children: x.map((l) => /* @__PURE__ */ e.jsx(
791
+ /* @__PURE__ */ e.jsx("div", { className: "flex space-x-6", children: i.map((u) => /* @__PURE__ */ e.jsx(
725
792
  "a",
726
793
  {
727
- href: l.url,
794
+ href: u.url,
728
795
  target: "_blank",
729
796
  rel: "noopener noreferrer",
730
797
  className: `
731
798
  transition-colors text-sm font-medium uppercase tracking-wider
732
- ${o} ${m}
733
- ${t.link || ""}
799
+ ${d} ${m}
800
+ ${a.link || ""}
734
801
  `,
735
- children: l.platform
802
+ children: u.platform
736
803
  },
737
- l.platform
804
+ u.platform
738
805
  )) })
739
- ] }) }) }), he = ({
740
- greeting: n = "Hello",
741
- title: d,
742
- subtitle: x,
806
+ ] }) }) }), pe = ({
807
+ greeting: o = "Hello",
808
+ title: l,
809
+ subtitle: i,
743
810
  imageUrl: s,
744
- actions: t = [],
745
- customStyles: a = {},
811
+ actions: a = [],
812
+ customStyles: t = {},
746
813
  // Default Colors
747
- backgroundColor: f = "bg-white",
748
- darkBackgroundColor: i = "dark:bg-gray-900",
749
- greetingColor: u = "text-blue-600",
814
+ backgroundColor: x = "bg-white",
815
+ darkBackgroundColor: n = "dark:bg-gray-900",
816
+ greetingColor: c = "text-blue-600",
750
817
  darkGreetingColor: g = "dark:text-blue-400",
751
- titleColor: b = "text-gray-900",
752
- darkTitleColor: o = "dark:text-white",
818
+ titleColor: f = "text-gray-900",
819
+ darkTitleColor: d = "dark:text-white",
753
820
  subtitleColor: m = "text-gray-500",
754
- darkSubtitleColor: l = "dark:text-gray-400"
821
+ darkSubtitleColor: u = "dark:text-gray-400"
755
822
  }) => {
756
- const h = s ? "flex flex-col lg:flex-row items-center gap-12 lg:gap-16" : "flex flex-col items-center text-center max-w-4xl mx-auto", v = s ? "flex-1 text-center lg:text-left" : "w-full", w = s ? "justify-center lg:justify-start" : "justify-center";
823
+ const h = s ? "flex flex-col lg:flex-row items-center gap-12 lg:gap-16" : "flex flex-col items-center text-center max-w-4xl mx-auto", p = s ? "flex-1 text-center lg:text-left" : "w-full", v = s ? "justify-center lg:justify-start" : "justify-center";
757
824
  return /* @__PURE__ */ e.jsx("section", { className: `
758
825
  relative pt-32 pb-16 lg:pt-40 lg:pb-24 overflow-hidden transition-colors duration-300
759
- ${f} ${i}
760
- ${a.container || ""}
826
+ ${x} ${n}
827
+ ${t.container || ""}
761
828
  `, children: /* @__PURE__ */ e.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ e.jsxs("div", { className: h, children: [
762
- /* @__PURE__ */ e.jsxs("div", { className: `${v} ${a.content || ""}`, children: [
763
- n && /* @__PURE__ */ e.jsx("p", { className: `
829
+ /* @__PURE__ */ e.jsxs("div", { className: `${p} ${t.content || ""}`, children: [
830
+ o && /* @__PURE__ */ e.jsx("p", { className: `
764
831
  font-semibold tracking-wide uppercase text-sm mb-4
765
- ${u} ${g}
766
- `, children: n }),
832
+ ${c} ${g}
833
+ `, children: o }),
767
834
  /* @__PURE__ */ e.jsx("h1", { className: `
768
835
  text-4xl sm:text-5xl lg:text-6xl font-bold leading-tight mb-6 transition-colors
769
- ${b} ${o}
770
- ${a.title || ""}
771
- `, children: d }),
836
+ ${f} ${d}
837
+ ${t.title || ""}
838
+ `, children: l }),
772
839
  /* @__PURE__ */ e.jsx("p", { className: `
773
840
  text-lg sm:text-xl mb-8 leading-relaxed transition-colors
774
- ${m} ${l}
841
+ ${m} ${u}
775
842
  ${!s && "mx-auto max-w-2xl"}
776
- ${a.subtitle || ""}
777
- `, children: x }),
778
- t.length > 0 && /* @__PURE__ */ e.jsx("div", { className: `flex flex-col sm:flex-row gap-4 ${w}`, children: t.map((y, k) => /* @__PURE__ */ e.jsx(
779
- D,
843
+ ${t.subtitle || ""}
844
+ `, children: i }),
845
+ a.length > 0 && /* @__PURE__ */ e.jsx("div", { className: `flex flex-col sm:flex-row gap-4 ${v}`, children: a.map((N, k) => /* @__PURE__ */ e.jsx(
846
+ O,
780
847
  {
781
- label: y.label,
782
- variant: y.variant || "primary",
848
+ label: N.label,
849
+ variant: N.variant || "primary",
783
850
  size: "large",
784
- onClick: y.onClick,
851
+ onClick: N.onClick,
785
852
  className: "w-full sm:w-auto"
786
853
  },
787
854
  k
@@ -789,7 +856,7 @@ const re = ({
789
856
  ] }),
790
857
  s && /* @__PURE__ */ e.jsx("div", { className: `
791
858
  flex-1 w-full max-w-md lg:max-w-full relative
792
- ${a.imageWrapper || ""}
859
+ ${t.imageWrapper || ""}
793
860
  `, children: /* @__PURE__ */ e.jsxs("div", { className: "relative rounded-2xl overflow-hidden shadow-2xl dark:shadow-none dark:border dark:border-gray-800 aspect-[4/3] group", children: [
794
861
  /* @__PURE__ */ e.jsx("div", { className: "absolute inset-0 bg-gray-900/5 dark:bg-black/20 group-hover:bg-transparent transition-colors duration-500" }),
795
862
  /* @__PURE__ */ e.jsx(
@@ -803,19 +870,19 @@ const re = ({
803
870
  )
804
871
  ] }) })
805
872
  ] }) }) });
806
- }, fe = ({
807
- logo: n = "Marc.Dev",
808
- isLogoImage: d = !1,
809
- links: x,
873
+ }, ve = ({
874
+ logo: o = "Marc.Dev",
875
+ isLogoImage: l = !1,
876
+ links: i,
810
877
  actions: s = [],
811
- customStyles: t = {},
812
- isOpen: a = !1,
813
- isScrolled: f = !1,
814
- onToggleMenu: i,
815
- onLinkClick: u,
878
+ customStyles: a = {},
879
+ isOpen: t = !1,
880
+ isScrolled: x = !1,
881
+ onToggleMenu: n,
882
+ onLinkClick: c,
816
883
  onLogoClick: g,
817
- enableLanguageToggle: b = !1,
818
- language: o = "en",
884
+ enableLanguageToggle: f = !1,
885
+ language: d = "en",
819
886
  onLanguageChange: m
820
887
  }) => /* @__PURE__ */ e.jsxs(
821
888
  "nav",
@@ -823,55 +890,55 @@ const re = ({
823
890
  className: `
824
891
  fixed top-0 left-0 right-0 z-50 transition-all duration-300
825
892
 
826
- ${f || a ? "bg-white/90 dark:bg-gray-900/90 backdrop-blur-md shadow-sm border-b border-gray-100 dark:border-gray-800" : "bg-transparent"}
827
- ${t.container || ""}
893
+ ${x || t ? "bg-white/90 dark:bg-gray-900/90 backdrop-blur-md shadow-sm border-b border-gray-100 dark:border-gray-800" : "bg-transparent"}
894
+ ${a.container || ""}
828
895
  `,
829
896
  children: [
830
897
  /* @__PURE__ */ e.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center h-20", children: [
831
- /* @__PURE__ */ e.jsx("div", { className: `flex-shrink-0 cursor-pointer flex items-center ${t.logo || ""}`, onClick: g, children: d ? /* @__PURE__ */ e.jsx("img", { src: n, alt: "Logo", className: "h-8 w-auto" }) : /* @__PURE__ */ e.jsx("span", { className: "text-2xl font-bold text-gray-900 dark:text-white tracking-tighter hover:text-blue-600 dark:hover:text-blue-400 transition-colors", children: n }) }),
898
+ /* @__PURE__ */ e.jsx("div", { className: `flex-shrink-0 cursor-pointer flex items-center ${a.logo || ""}`, onClick: g, children: l ? /* @__PURE__ */ e.jsx("img", { src: o, alt: "Logo", className: "h-8 w-auto" }) : /* @__PURE__ */ e.jsx("span", { className: "text-2xl font-bold text-gray-900 dark:text-white tracking-tighter hover:text-blue-600 dark:hover:text-blue-400 transition-colors", children: o }) }),
832
899
  /* @__PURE__ */ e.jsxs("div", { className: "hidden md:flex space-x-8 items-center", children: [
833
- x.map((l) => /* @__PURE__ */ e.jsx(
900
+ i.map((u) => /* @__PURE__ */ e.jsx(
834
901
  "a",
835
902
  {
836
- href: l.href,
837
- onClick: (h) => u == null ? void 0 : u(h, l.href),
903
+ href: u.href,
904
+ onClick: (h) => c == null ? void 0 : c(h, u.href),
838
905
  className: `
839
906
  text-sm font-medium transition-colors
840
907
  hover:text-blue-600 dark:hover:text-blue-400
841
- ${l.active ? "text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}
842
- ${t.link || ""}
908
+ ${u.active ? "text-blue-600 dark:text-blue-400" : "text-gray-600 dark:text-gray-300"}
909
+ ${a.link || ""}
843
910
  `,
844
- children: l.label
911
+ children: u.label
845
912
  },
846
- l.label
913
+ u.label
847
914
  )),
848
915
  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 pl-6 border-l border-gray-200 dark:border-gray-700", children: [
849
- b && /* @__PURE__ */ e.jsx(
850
- Q,
916
+ f && /* @__PURE__ */ e.jsx(
917
+ W,
851
918
  {
852
- initialLanguage: o,
919
+ initialLanguage: d,
853
920
  onLanguageChange: m
854
921
  }
855
922
  ),
856
- /* @__PURE__ */ e.jsx(Z, {}),
857
- s.map((l, h) => /* @__PURE__ */ e.jsx(D, { ...l, size: "small" }, h))
923
+ /* @__PURE__ */ e.jsx(z, {}),
924
+ s.map((u, h) => /* @__PURE__ */ e.jsx(O, { ...u, size: "small" }, h))
858
925
  ] })
859
926
  ] }),
860
927
  /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 md:hidden", children: [
861
- b && /* @__PURE__ */ e.jsx(
862
- Q,
928
+ f && /* @__PURE__ */ e.jsx(
929
+ W,
863
930
  {
864
- initialLanguage: o,
931
+ initialLanguage: d,
865
932
  onLanguageChange: m
866
933
  }
867
934
  ),
868
- /* @__PURE__ */ e.jsx(Z, {}),
935
+ /* @__PURE__ */ e.jsx(z, {}),
869
936
  /* @__PURE__ */ e.jsx(
870
937
  "button",
871
938
  {
872
- onClick: i,
939
+ onClick: n,
873
940
  className: "p-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none",
874
- children: /* @__PURE__ */ e.jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: a ? /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) : /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
941
+ children: /* @__PURE__ */ e.jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: t ? /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) : /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
875
942
  }
876
943
  )
877
944
  ] })
@@ -883,120 +950,476 @@ const re = ({
883
950
  md:hidden absolute top-20 left-0 w-full
884
951
  bg-white dark:bg-gray-900 border-b border-gray-100 dark:border-gray-800
885
952
  shadow-xl transition-all duration-300 ease-in-out origin-top
886
- ${a ? "opacity-100 scale-y-100" : "opacity-0 scale-y-0 h-0 overflow-hidden"}
887
- ${t.mobileMenu || ""}
953
+ ${t ? "opacity-100 scale-y-100" : "opacity-0 scale-y-0 h-0 overflow-hidden"}
954
+ ${a.mobileMenu || ""}
888
955
  `,
889
956
  children: /* @__PURE__ */ e.jsxs("div", { className: "px-6 py-6 space-y-4 flex flex-col items-center", children: [
890
- x.map((l) => /* @__PURE__ */ e.jsx(
957
+ i.map((u) => /* @__PURE__ */ e.jsx(
891
958
  "a",
892
959
  {
893
- href: l.href,
894
- onClick: (h) => u == null ? void 0 : u(h, l.href),
960
+ href: u.href,
961
+ onClick: (h) => c == null ? void 0 : c(h, u.href),
895
962
  className: "block text-lg font-medium text-gray-800 dark:text-gray-200 hover:text-blue-600 dark:hover:text-blue-400 transition-colors",
896
- children: l.label
963
+ children: u.label
897
964
  },
898
- l.label
965
+ u.label
899
966
  )),
900
- s.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "pt-4 w-full flex flex-col gap-3", children: s.map((l, h) => /* @__PURE__ */ e.jsx(D, { ...l, size: "medium", className: "w-full" }, h)) })
967
+ s.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "pt-4 w-full flex flex-col gap-3", children: s.map((u, h) => /* @__PURE__ */ e.jsx(O, { ...u, size: "medium", className: "w-full" }, h)) })
901
968
  ] })
902
969
  }
903
970
  )
904
971
  ]
905
972
  }
906
- ), pe = (n) => {
907
- const [d, x] = M(!1), [s, t] = M(!1);
908
- K(() => {
909
- let i = !1;
910
- const u = () => {
911
- i || (window.requestAnimationFrame(() => {
912
- t(window.scrollY > 20), i = !1;
913
- }), i = !0);
973
+ ), Ee = (o) => {
974
+ const [l, i] = C(!1), [s, a] = C(!1);
975
+ U(() => {
976
+ let n = !1;
977
+ const c = () => {
978
+ n || (window.requestAnimationFrame(() => {
979
+ a(window.scrollY > 20), n = !1;
980
+ }), n = !0);
914
981
  };
915
- return window.addEventListener("scroll", u), () => window.removeEventListener("scroll", u);
982
+ return window.addEventListener("scroll", c), () => window.removeEventListener("scroll", c);
916
983
  }, []);
917
- const a = (i, u) => {
918
- i.preventDefault();
919
- const g = document.querySelector(u);
920
- g && (g.scrollIntoView({ behavior: "smooth" }), x(!1));
921
- }, f = () => {
984
+ const t = (n, c) => {
985
+ n.preventDefault();
986
+ const g = document.querySelector(c);
987
+ g && (g.scrollIntoView({ behavior: "smooth" }), i(!1));
988
+ }, x = () => {
922
989
  window.scrollTo({ top: 0, behavior: "smooth" });
923
990
  };
924
991
  return /* @__PURE__ */ e.jsx(
925
- fe,
992
+ ve,
926
993
  {
927
- ...n,
928
- isOpen: d,
994
+ ...o,
995
+ isOpen: l,
929
996
  isScrolled: s,
930
- onToggleMenu: () => x(!d),
931
- onLinkClick: a,
932
- onLogoClick: f
997
+ onToggleMenu: () => i(!l),
998
+ onLinkClick: t,
999
+ onLogoClick: x
933
1000
  }
934
1001
  );
935
- }, ve = ({
936
- title: n = "About Me",
937
- avatarUrl: d,
938
- bio: x,
1002
+ }, je = ({
1003
+ title: o = "About Me",
1004
+ avatarUrl: l,
1005
+ bio: i,
939
1006
  skillsTitle: s = "Tech Stack",
940
- skills: t = [],
941
- customStyles: a = {},
942
- id: f,
1007
+ skills: a = [],
1008
+ customStyles: t = {},
1009
+ id: x,
943
1010
  // Default Colors
944
- backgroundColor: i = "bg-white",
945
- darkBackgroundColor: u = "dark:bg-gray-900",
1011
+ backgroundColor: n = "bg-white",
1012
+ darkBackgroundColor: c = "dark:bg-gray-900",
946
1013
  borderColor: g = "border-gray-100",
947
- darkBorderColor: b = "dark:border-gray-800",
948
- titleColor: o = "text-gray-900",
1014
+ darkBorderColor: f = "dark:border-gray-800",
1015
+ titleColor: d = "text-gray-900",
949
1016
  darkTitleColor: m = "dark:text-white",
950
- textColor: l = "text-gray-600",
1017
+ textColor: u = "text-gray-600",
951
1018
  darkTextColor: h = "dark:text-gray-300"
952
1019
  }) => /* @__PURE__ */ e.jsx(
953
1020
  "section",
954
1021
  {
955
- id: f,
1022
+ id: x,
956
1023
  className: `
957
1024
  py-20 transition-colors duration-300
958
1025
  border-y
959
- ${i} ${u}
960
- ${g} ${b}
961
- ${a.container || ""}
1026
+ ${n} ${c}
1027
+ ${g} ${f}
1028
+ ${t.container || ""}
962
1029
  `,
963
- children: /* @__PURE__ */ e.jsxs("div", { className: `max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${a.contentWrapper || ""}`, children: [
964
- n && /* @__PURE__ */ e.jsxs("div", { className: "text-center mb-12", children: [
1030
+ children: /* @__PURE__ */ e.jsxs("div", { className: `max-w-4xl mx-auto px-4 sm:px-6 lg:px-8 ${t.contentWrapper || ""}`, children: [
1031
+ o && /* @__PURE__ */ e.jsxs("div", { className: "text-center mb-12", children: [
965
1032
  /* @__PURE__ */ e.jsx("h2", { className: `
966
1033
  text-3xl font-bold transition-colors
967
- ${o} ${m}
968
- ${a.title || ""}
969
- `, children: n }),
1034
+ ${d} ${m}
1035
+ ${t.title || ""}
1036
+ `, children: o }),
970
1037
  /* @__PURE__ */ e.jsx("div", { className: "mt-2 h-1 w-20 bg-blue-600 mx-auto rounded" })
971
1038
  ] }),
972
1039
  /* @__PURE__ */ e.jsxs("div", { className: "flex flex-col md:flex-row items-center gap-12", children: [
973
- /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsx(de, { src: d, size: "xl" }) }),
974
- /* @__PURE__ */ e.jsxs("div", { className: `text-lg leading-relaxed ${l} ${h} ${a.textWrapper || ""}`, children: [
975
- /* @__PURE__ */ e.jsx("p", { className: `mb-8 whitespace-pre-line ${a.bio || ""}`, children: x }),
976
- t.length > 0 && /* @__PURE__ */ e.jsxs("div", { children: [
1040
+ /* @__PURE__ */ e.jsx("div", { className: "flex-shrink-0", children: /* @__PURE__ */ e.jsx(ue, { src: l, size: "xl" }) }),
1041
+ /* @__PURE__ */ e.jsxs("div", { className: `text-lg leading-relaxed ${u} ${h} ${t.textWrapper || ""}`, children: [
1042
+ /* @__PURE__ */ e.jsx("p", { className: `mb-8 whitespace-pre-line ${t.bio || ""}`, children: i }),
1043
+ a.length > 0 && /* @__PURE__ */ e.jsxs("div", { children: [
977
1044
  s && /* @__PURE__ */ e.jsx("h3", { className: `
978
1045
  text-sm font-bold uppercase tracking-wide mb-3
979
- ${o} ${m}
980
- ${a.skillsTitle || ""}
1046
+ ${d} ${m}
1047
+ ${t.skillsTitle || ""}
981
1048
  `, children: s }),
982
- /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-2", children: t.map((v) => /* @__PURE__ */ e.jsx(ee, { label: v, variant: "secondary" }, v)) })
1049
+ /* @__PURE__ */ e.jsx("div", { className: "flex flex-wrap gap-2", children: a.map((p) => /* @__PURE__ */ e.jsx(te, { label: p, variant: "secondary" }, p)) })
983
1050
  ] })
984
1051
  ] })
985
1052
  ] })
986
1053
  ] })
987
1054
  }
988
- );
1055
+ ), we = ({
1056
+ logo: o = "Marc.Dev",
1057
+ isLogoImage: l = !1,
1058
+ links: i,
1059
+ actions: s = [],
1060
+ customStyles: a = {},
1061
+ isOpen: t = !1,
1062
+ onToggleMenu: x,
1063
+ onLinkClick: n,
1064
+ onLogoClick: c,
1065
+ enableLanguageToggle: g = !1,
1066
+ language: f = "en",
1067
+ onLanguageChange: d,
1068
+ // Default Colors
1069
+ backgroundColor: m = "bg-white",
1070
+ darkBackgroundColor: u = "dark:bg-gray-900",
1071
+ borderColor: h = "border-gray-100",
1072
+ darkBorderColor: p = "dark:border-gray-800",
1073
+ textColor: v = "text-gray-900",
1074
+ darkTextColor: N = "dark:text-white",
1075
+ activeLinkColor: k = "text-blue-600",
1076
+ darkActiveLinkColor: R = "dark:text-blue-400",
1077
+ hoverLinkColor: T = "hover:text-blue-600",
1078
+ darkHoverLinkColor: _ = "dark:hover:text-blue-400"
1079
+ }) => /* @__PURE__ */ e.jsxs(
1080
+ "nav",
1081
+ {
1082
+ className: `
1083
+ w-full border-b transition-colors duration-300
1084
+ ${m} ${u}
1085
+ ${h} ${p}
1086
+ ${a.container || ""}
1087
+ `,
1088
+ children: [
1089
+ /* @__PURE__ */ e.jsx("div", { className: "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8", children: /* @__PURE__ */ e.jsxs("div", { className: "flex justify-between items-center h-20", children: [
1090
+ /* @__PURE__ */ e.jsx("div", { className: `flex-shrink-0 cursor-pointer flex items-center ${a.logo || ""}`, onClick: c, children: l ? /* @__PURE__ */ e.jsx("img", { src: o, alt: "Logo", className: "h-8 w-auto" }) : /* @__PURE__ */ e.jsx("span", { className: `
1091
+ text-2xl font-bold tracking-tighter transition-colors
1092
+ ${v} ${N}
1093
+ ${T} ${_}
1094
+ `, children: o }) }),
1095
+ /* @__PURE__ */ e.jsxs("div", { className: "hidden md:flex space-x-8 items-center", children: [
1096
+ i.map((w) => /* @__PURE__ */ e.jsx(
1097
+ "a",
1098
+ {
1099
+ href: w.href,
1100
+ onClick: (E) => n == null ? void 0 : n(E, w.href),
1101
+ className: `
1102
+ text-sm font-medium transition-colors
1103
+ ${w.active ? `${k} ${R}` : "text-gray-600 dark:text-gray-300"}
1104
+ ${T} ${_}
1105
+ ${a.link || ""}
1106
+ `,
1107
+ children: w.label
1108
+ },
1109
+ w.label
1110
+ )),
1111
+ /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 pl-6 border-l border-gray-200 dark:border-gray-700", children: [
1112
+ g && /* @__PURE__ */ e.jsx(
1113
+ W,
1114
+ {
1115
+ initialLanguage: f,
1116
+ onLanguageChange: d
1117
+ }
1118
+ ),
1119
+ /* @__PURE__ */ e.jsx(z, {}),
1120
+ s.map((w, E) => /* @__PURE__ */ e.jsx(O, { ...w, size: "small" }, E))
1121
+ ] })
1122
+ ] }),
1123
+ /* @__PURE__ */ e.jsxs("div", { className: "flex items-center gap-4 md:hidden", children: [
1124
+ g && /* @__PURE__ */ e.jsx(
1125
+ W,
1126
+ {
1127
+ initialLanguage: f,
1128
+ onLanguageChange: d
1129
+ }
1130
+ ),
1131
+ /* @__PURE__ */ e.jsx(z, {}),
1132
+ /* @__PURE__ */ e.jsx(
1133
+ "button",
1134
+ {
1135
+ onClick: x,
1136
+ className: "p-2 rounded-md text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 transition-colors focus:outline-none",
1137
+ children: /* @__PURE__ */ e.jsx("svg", { className: "h-6 w-6", fill: "none", viewBox: "0 0 24 24", stroke: "currentColor", children: t ? /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M6 18L18 6M6 6l12 12" }) : /* @__PURE__ */ e.jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M4 6h16M4 12h16M4 18h16" }) })
1138
+ }
1139
+ )
1140
+ ] })
1141
+ ] }) }),
1142
+ /* @__PURE__ */ e.jsx(
1143
+ "div",
1144
+ {
1145
+ className: `
1146
+ md:hidden
1147
+ border-b border-gray-100 dark:border-gray-800
1148
+ transition-all duration-300 ease-in-out
1149
+ ${m} ${u}
1150
+ ${t ? "opacity-100 max-h-screen py-4" : "opacity-0 max-h-0 overflow-hidden"}
1151
+ ${a.mobileMenu || ""}
1152
+ `,
1153
+ children: /* @__PURE__ */ e.jsxs("div", { className: "px-6 space-y-4 flex flex-col items-center", children: [
1154
+ i.map((w) => /* @__PURE__ */ e.jsx(
1155
+ "a",
1156
+ {
1157
+ href: w.href,
1158
+ onClick: (E) => n == null ? void 0 : n(E, w.href),
1159
+ className: `
1160
+ block text-lg font-medium transition-colors
1161
+ text-gray-800 dark:text-gray-200
1162
+ ${T} ${_}
1163
+ `,
1164
+ children: w.label
1165
+ },
1166
+ w.label
1167
+ )),
1168
+ s.length > 0 && /* @__PURE__ */ e.jsx("div", { className: "pt-4 w-full flex flex-col gap-3", children: s.map((w, E) => /* @__PURE__ */ e.jsx(O, { ...w, size: "medium", className: "w-full" }, E)) })
1169
+ ] })
1170
+ }
1171
+ )
1172
+ ]
1173
+ }
1174
+ ), $e = [
1175
+ {
1176
+ id: "1",
1177
+ title: "E-commerce Dashboard",
1178
+ description: "Complete admin dashboard with real-time metrics and dark mode.",
1179
+ image: "https://images.unsplash.com/photo-1460925895917-afdab827c52f?auto=format&fit=crop&w=800&q=80",
1180
+ tags: ["React", "TypeScript", "Tailwind"],
1181
+ url: "https://google.com"
1182
+ },
1183
+ {
1184
+ id: "2",
1185
+ title: "Task App",
1186
+ description: "Kanban-style productivity app.",
1187
+ image: "https://images.unsplash.com/photo-1484480974693-6ca0a78fb36b?auto=format&fit=crop&w=800&q=80",
1188
+ tags: ["Next.js", "Supabase"],
1189
+ url: "#"
1190
+ },
1191
+ {
1192
+ id: "3",
1193
+ title: "Landing Page",
1194
+ description: "High-performance corporate website.",
1195
+ image: "https://images.unsplash.com/photo-1551288049-bebda4e38f71?auto=format&fit=crop&w=800&q=80",
1196
+ tags: ["Astro", "CSS"],
1197
+ url: "#"
1198
+ }
1199
+ ], Te = ({
1200
+ enableLanguageToggle: o = !1,
1201
+ language: l = "en",
1202
+ onLanguageChange: i,
1203
+ items: s = $e,
1204
+ text: a = {
1205
+ navbar: { contact: "Contact" },
1206
+ hero: {
1207
+ greeting: "Hi, I'm Marc",
1208
+ title: "I transform ideas into digital experiences.",
1209
+ subtitle: "Full Stack Developer passionate about clean code and scalable architecture.",
1210
+ viewProjects: "View Projects",
1211
+ downloadCv: "Download CV"
1212
+ },
1213
+ about: {
1214
+ title: "About Me",
1215
+ bio: `Hi, I'm Marc. I've been passionately developing software for several years.
1216
+ I specialize in the JavaScript/TypeScript ecosystem, building applications that only work well but feel good to use.`,
1217
+ skillsTitle: "Tech Stack"
1218
+ },
1219
+ projects: { title: "Featured Projects", viewCaseStudy: "View Case Study" },
1220
+ footer: { legalNotice: "Legal Notice" }
1221
+ }
1222
+ }) => {
1223
+ const t = () => {
1224
+ const n = document.createElement("a"), c = "/design-system/", g = c.endsWith("/") ? c + "cv.pdf" : c + "/cv.pdf";
1225
+ n.href = g, n.download = "Marc_Iniguez_CV.pdf", document.body.appendChild(n), n.click(), document.body.removeChild(n);
1226
+ }, x = () => {
1227
+ const g = `https://mail.google.com/mail/?view=cm&fs=1&to=marc@example.com&su=${encodeURIComponent("Hi Marc, I saw your portfolio")}`;
1228
+ window.open(g, "_blank");
1229
+ };
1230
+ return /* @__PURE__ */ e.jsxs("div", { className: "bg-gray-50 dark:bg-gray-900 min-h-screen font-sans transition-colors duration-300", children: [
1231
+ /* @__PURE__ */ e.jsx(
1232
+ we,
1233
+ {
1234
+ logo: "Marc.Dev",
1235
+ links: [],
1236
+ actions: [
1237
+ {
1238
+ label: a.navbar.contact,
1239
+ onClick: x,
1240
+ variant: "primary"
1241
+ }
1242
+ ],
1243
+ enableLanguageToggle: o,
1244
+ language: l,
1245
+ onLanguageChange: i
1246
+ }
1247
+ ),
1248
+ /* @__PURE__ */ e.jsxs("main", { children: [
1249
+ /* @__PURE__ */ e.jsx("div", { id: "home", children: /* @__PURE__ */ e.jsx(
1250
+ pe,
1251
+ {
1252
+ greeting: a.hero.greeting,
1253
+ title: a.hero.title,
1254
+ subtitle: a.hero.subtitle,
1255
+ actions: [
1256
+ {
1257
+ label: a.hero.viewProjects,
1258
+ variant: "primary",
1259
+ onClick: () => {
1260
+ var n;
1261
+ return (n = document.getElementById("projects")) == null ? void 0 : n.scrollIntoView({ behavior: "smooth" });
1262
+ }
1263
+ },
1264
+ {
1265
+ label: a.hero.downloadCv,
1266
+ variant: "secondary",
1267
+ onClick: t
1268
+ // 👈 Connected here
1269
+ }
1270
+ ]
1271
+ }
1272
+ ) }),
1273
+ /* @__PURE__ */ e.jsx(
1274
+ je,
1275
+ {
1276
+ id: "about",
1277
+ title: a.about.title,
1278
+ avatarUrl: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?fit=crop&w=300&h=300",
1279
+ bio: a.about.bio,
1280
+ skillsTitle: a.about.skillsTitle,
1281
+ skills: ["React", "TypeScript", "Tailwind CSS", "Node.js", "Git", "Docker", "Storybook"]
1282
+ }
1283
+ ),
1284
+ /* @__PURE__ */ e.jsx("div", { id: "projects", children: /* @__PURE__ */ e.jsx(
1285
+ he,
1286
+ {
1287
+ title: a.projects.title,
1288
+ items: s,
1289
+ layout: "grid",
1290
+ itemButtonLabel: a.projects.viewCaseStudy
1291
+ }
1292
+ ) })
1293
+ ] }),
1294
+ /* @__PURE__ */ e.jsx(
1295
+ be,
1296
+ {
1297
+ copyrightOwner: "Marc Iñiguez",
1298
+ socialLinks: [{ platform: "GitHub", url: "#" }],
1299
+ secondaryLinks: [{ label: a.footer.legalNotice, href: "#" }]
1300
+ }
1301
+ )
1302
+ ] });
1303
+ }, _e = ({
1304
+ leftContent: o,
1305
+ rightContent: l,
1306
+ initialLeftWidth: i = 30,
1307
+ minWidth: s = 20,
1308
+ className: a = "",
1309
+ customStyles: t = {}
1310
+ }) => {
1311
+ const [x, n] = I.useState(i), [c, g] = I.useState(!1), f = I.useRef(null), d = (m) => {
1312
+ m.preventDefault(), g(!0);
1313
+ };
1314
+ return I.useEffect(() => {
1315
+ const m = (h) => {
1316
+ if (!c || !f.current) return;
1317
+ const p = f.current.getBoundingClientRect(), v = (h.clientX - p.left) / p.width * 100;
1318
+ v >= s && v <= 100 - s && n(v);
1319
+ }, u = () => {
1320
+ g(!1);
1321
+ };
1322
+ return c && (document.addEventListener("mousemove", m), document.addEventListener("mouseup", u)), () => {
1323
+ document.removeEventListener("mousemove", m), document.removeEventListener("mouseup", u);
1324
+ };
1325
+ }, [c, s]), /* @__PURE__ */ e.jsxs(
1326
+ "div",
1327
+ {
1328
+ ref: f,
1329
+ className: `flex h-full w-full overflow-hidden ${a} ${t.container || ""}`,
1330
+ children: [
1331
+ /* @__PURE__ */ e.jsx(
1332
+ "div",
1333
+ {
1334
+ style: { width: `${x}%` },
1335
+ className: `h-full overflow-auto ${t.leftPanel || ""}`,
1336
+ children: o
1337
+ }
1338
+ ),
1339
+ /* @__PURE__ */ e.jsx(
1340
+ "div",
1341
+ {
1342
+ className: `w-1 cursor-col-resize bg-gray-200 hover:bg-blue-500 active:bg-blue-600 transition-colors z-10 flex flex-col justify-center items-center ${t.resizer || ""}`,
1343
+ onMouseDown: d,
1344
+ children: /* @__PURE__ */ e.jsx("div", { className: "h-8 w-1 bg-gray-400 rounded-full mx-auto" })
1345
+ }
1346
+ ),
1347
+ /* @__PURE__ */ e.jsx(
1348
+ "div",
1349
+ {
1350
+ style: { width: `${100 - x}%` },
1351
+ className: `h-full overflow-auto bg-gray-50 dark:bg-gray-900 ${t.rightPanel || ""}`,
1352
+ children: l
1353
+ }
1354
+ )
1355
+ ]
1356
+ }
1357
+ );
1358
+ }, Re = ({
1359
+ rows: o,
1360
+ cols: l,
1361
+ renderCell: i,
1362
+ onCellClick: s,
1363
+ onCellMouseEnter: a,
1364
+ onCellMouseDown: t,
1365
+ onCellMouseUp: x,
1366
+ className: n = "",
1367
+ gap: c = 1
1368
+ }) => {
1369
+ const g = ie(null), [f, d] = C(!1), m = (h, p, v) => {
1370
+ h.preventDefault(), d(!0), t == null || t(p, v), s == null || s(p, v);
1371
+ }, u = (h, p) => {
1372
+ f && (a == null || a(h, p));
1373
+ };
1374
+ return U(() => {
1375
+ const h = () => {
1376
+ f && (d(!1), x == null || x(-1, -1));
1377
+ };
1378
+ return window.addEventListener("mouseup", h), () => window.removeEventListener("mouseup", h);
1379
+ }, [f, x]), /* @__PURE__ */ e.jsx(
1380
+ "div",
1381
+ {
1382
+ ref: g,
1383
+ className: `grid select-none ${n}`,
1384
+ style: {
1385
+ display: "grid",
1386
+ gridTemplateRows: `repeat(${o}, 1fr)`,
1387
+ gridTemplateColumns: `repeat(${l}, 1fr)`,
1388
+ gap: `${c}px`,
1389
+ width: "100%",
1390
+ height: "100%"
1391
+ },
1392
+ onMouseLeave: () => f && d(!1),
1393
+ children: Array.from({ length: o }).map(
1394
+ (h, p) => Array.from({ length: l }).map((v, N) => /* @__PURE__ */ e.jsx(
1395
+ "div",
1396
+ {
1397
+ onMouseDown: (k) => m(k, p, N),
1398
+ onMouseEnter: () => u(p, N),
1399
+ children: i(p, N)
1400
+ },
1401
+ `${p}-${N}`
1402
+ ))
1403
+ )
1404
+ }
1405
+ );
1406
+ };
989
1407
  export {
990
- de as Avatar,
991
- ee as Badge,
992
- D as Button,
993
- me as ContentGrid,
1408
+ ue as Avatar,
1409
+ te as Badge,
1410
+ O as Button,
1411
+ he as ContentGrid,
1412
+ ke as ControlPanel,
994
1413
  be as Footer,
995
- he as Hero,
1414
+ pe as Hero,
996
1415
  xe as Input,
997
- Q as LanguageToggle,
998
- pe as Navbar,
999
- ve as ProfileSection,
1000
- ue as ProjectCard,
1001
- Z as ThemeToggle
1416
+ Re as InteractiveGrid,
1417
+ W as LanguageToggle,
1418
+ Ee as Navbar,
1419
+ Te as PortfolioPage,
1420
+ je as ProfileSection,
1421
+ fe as ProjectCard,
1422
+ Ne as Slider,
1423
+ _e as SplitLayout,
1424
+ z as ThemeToggle
1002
1425
  };