softable-pixels-web 1.0.0

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 (17) hide show
  1. package/README.md +22 -0
  2. package/dist/TabSwitch-D6OPAUjC.js +304 -0
  3. package/dist/TabSwitch-D6OPAUjC.js.map +1 -0
  4. package/dist/ThemeContext-CRXby8a0.js +539 -0
  5. package/dist/ThemeContext-CRXby8a0.js.map +1 -0
  6. package/dist/index-CZOu4S--.d.ts +69 -0
  7. package/dist/index-jFi4YRO5.d.ts +277 -0
  8. package/dist/index.d.ts +3 -0
  9. package/dist/index.js +4 -0
  10. package/dist/mask-modules.d.ts +144 -0
  11. package/dist/mask-modules.js +705 -0
  12. package/dist/mask-modules.js.map +1 -0
  13. package/dist/tab-switch.d.ts +2 -0
  14. package/dist/tab-switch.js +3 -0
  15. package/dist/theme-context.d.ts +2 -0
  16. package/dist/theme-context.js +3 -0
  17. package/package.json +67 -0
package/dist/ThemeContext-CRXby8a0.js ADDED
@@ -0,0 +1,539 @@
1
+ import { createContext, useContext, useEffect, useMemo, useState } from "react";
2
+ import { jsx } from "react/jsx-runtime";
3
+
4
+ //#region src/utils/functions/deepMerge.ts
5
+ function deepMerge(base, override) {
6
+ if (override === void 0) return clone(base);
7
+ if (!isPlainObject(base) || !isPlainObject(override)) return clone(override);
8
+ const result = Array.isArray(base) ? [] : {};
9
+ const baseKeys = Object.keys(base);
10
+ const overrideKeys = Object.keys(override);
11
+ const allKeys = Array.from(new Set([...baseKeys, ...overrideKeys]));
12
+ for (const k of allKeys) {
13
+ const baseVal = base[k];
14
+ const overrideVal = override[k];
15
+ if (overrideVal === void 0) {
16
+ result[k] = clone(baseVal);
17
+ continue;
18
+ }
19
+ if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {
20
+ result[k] = deepMerge(baseVal, overrideVal);
21
+ continue;
22
+ }
23
+ result[k] = clone(overrideVal);
24
+ }
25
+ return result;
26
+ }
27
+ function isPlainObject(x) {
28
+ return !!x && typeof x === "object" && !Array.isArray(x);
29
+ }
30
+ function clone(v) {
31
+ if (v === void 0 || v === null) return v;
32
+ if (Array.isArray(v)) return v.map((item) => clone(item));
33
+ if (isPlainObject(v)) {
34
+ const out = {};
35
+ for (const k of Object.keys(v)) out[k] = clone(v[k]);
36
+ return out;
37
+ }
38
+ return v;
39
+ }
40
+
41
+ //#endregion
42
+ //#region src/contexts/ThemeContext/constants.ts
43
+ const defaultThemes = {
44
+ light: {
45
+ colors: {
46
+ primary: "#0EB24C",
47
+ secondary: "#6C6C6C",
48
+ success: "#0EB24C",
49
+ warning: "#f59e0b",
50
+ error: "#ef4444",
51
+ info: "#06b6d4",
52
+ background: "#FFFFFF",
53
+ surface: "#FBFBFB",
54
+ border: {
55
+ primary: "#E8E8E9",
56
+ secondary: "#E8E8E9"
57
+ },
58
+ text: {
59
+ primary: "#222222",
60
+ secondary: "#6C6C6C",
61
+ disabled: "#A0A0A0",
62
+ inverse: "#FFFFFF"
63
+ }
64
+ },
65
+ spacing: {
66
+ xs: 4,
67
+ sm: 8,
68
+ md: 16,
69
+ lg: 24,
70
+ xl: 32,
71
+ "2xl": 48
72
+ },
73
+ borderRadius: {
74
+ none: 0,
75
+ sm: 4,
76
+ md: 6,
77
+ lg: 8,
78
+ full: 9999
79
+ },
80
+ fontSize: {
81
+ xs: 12,
82
+ sm: 14,
83
+ md: 16,
84
+ lg: 18,
85
+ xl: 20,
86
+ "2xl": 24
87
+ },
88
+ fontWeight: {
89
+ normal: 400,
90
+ medium: 500,
91
+ semibold: 600,
92
+ bold: 700
93
+ },
94
+ shadows: {
95
+ sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)",
96
+ md: "0 4px 6px -1px rgba(0, 0, 0, 0.10)",
97
+ lg: "0 10px 15px -3px rgba(0, 0, 0, 0.10)",
98
+ xl: "0 20px 25px -5px rgba(0, 0, 0, 0.10)"
99
+ }
100
+ },
101
+ dark: {
102
+ colors: {
103
+ primary: "#0EB24C",
104
+ secondary: "#C7CFD8",
105
+ success: "#0EB24C",
106
+ warning: "#f59e0b",
107
+ error: "#ef4444",
108
+ info: "#06b6d4",
109
+ background: "#090909",
110
+ surface: "#090909",
111
+ border: {
112
+ primary: "#27282D",
113
+ secondary: "#27282D"
114
+ },
115
+ text: {
116
+ primary: "#ECECEC",
117
+ secondary: "#C7CFD8",
118
+ disabled: "#8B93A0",
119
+ inverse: "#090909"
120
+ }
121
+ },
122
+ spacing: {
123
+ xs: 4,
124
+ sm: 8,
125
+ md: 16,
126
+ lg: 24,
127
+ xl: 32,
128
+ "2xl": 48
129
+ },
130
+ borderRadius: {
131
+ none: 0,
132
+ sm: 4,
133
+ md: 6,
134
+ lg: 8,
135
+ full: 9999
136
+ },
137
+ fontSize: {
138
+ xs: 12,
139
+ sm: 14,
140
+ md: 16,
141
+ lg: 18,
142
+ xl: 20,
143
+ "2xl": 24
144
+ },
145
+ fontWeight: {
146
+ normal: 400,
147
+ medium: 500,
148
+ semibold: 600,
149
+ bold: 700
150
+ },
151
+ shadows: {
152
+ sm: "0 1px 2px 0 rgba(0, 0, 0, 0.35)",
153
+ md: "0 4px 6px -1px rgba(0, 0, 0, 0.45)",
154
+ lg: "0 10px 15px -3px rgba(0, 0, 0, 0.50)",
155
+ xl: "0 20px 25px -5px rgba(0, 0, 0, 0.55)"
156
+ }
157
+ }
158
+ };
159
+
160
+ //#endregion
161
+ //#region src/contexts/ThemeContext/utils/general.ts
162
+ /** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */
163
+ /**
164
+ * applyThemeClass(themeName)
165
+ * -------------------------
166
+ * Applies the light/dark mode class to the `<html>` element.
167
+ *
168
+ * Tailwind’s dark mode (in the common "class" strategy) typically relies on a
169
+ * `.dark` class. This function toggles ONLY the `dark` class:
170
+ *
171
+ * - themeName `"dark"` => adds `.dark`
172
+ * - themeName `"light"` => removes `.dark`
173
+ *
174
+ * SSR:
175
+ * - No-op on the server (when `document` is undefined).
176
+ */
177
+ function applyThemeClass(themeName) {
178
+ if (typeof document === "undefined") return;
179
+ document.documentElement.classList.toggle("dark", themeName === "dark");
180
+ }
181
+ /**
182
+ * applyCssVars(vars)
183
+ * ------------------
184
+ * Injects CSS variables into the document root (`<html>`).
185
+ *
186
+ * This is how the library exposes theme tokens as CSS variables.
187
+ * Components can then use `var(--px-...)` in styles.
188
+ *
189
+ * Example:
190
+ * ```ts
191
+ * applyCssVars({ '--px-bg': '#fff', '--px-text-primary': '#111' })
192
+ * ```
193
+ *
194
+ * Behavior:
195
+ * - Ignores `null` / `undefined` values.
196
+ * - Converts all values to string before applying.
197
+ *
198
+ * SSR:
199
+ * - No-op on the server (when `document` is undefined).
200
+ */
201
+ function applyCssVars(vars) {
202
+ if (typeof document === "undefined") return;
203
+ const root = document.documentElement;
204
+ for (const [key, value] of Object.entries(vars)) {
205
+ if (value == null) continue;
206
+ root.style.setProperty(key, String(value));
207
+ }
208
+ }
209
+ /**
210
+ * getSystemThemeName()
211
+ * --------------------
212
+ * Returns the current OS/browser color scheme preference.
213
+ *
214
+ * It reads `prefers-color-scheme: dark` using `window.matchMedia`.
215
+ *
216
+ * Returns:
217
+ * - `"dark"` if the user prefers dark mode
218
+ * - `"light"` otherwise
219
+ *
220
+ * SSR:
221
+ * - Returns `"light"` on the server (safe default).
222
+ */
223
+ function getSystemThemeName() {
224
+ if (typeof window === "undefined") return "light";
225
+ return window.matchMedia?.("(prefers-color-scheme: dark)").matches ?? false ? "dark" : "light";
226
+ }
227
+ /**
228
+ * watchSystemTheme(onChange)
229
+ * --------------------------
230
+ * Subscribes to changes in OS/browser theme preference.
231
+ *
232
+ * Use this when your selected mode is `"system"` so the app immediately reacts
233
+ * when the user changes their OS theme.
234
+ *
235
+ * - Calls `onChange('light' | 'dark')` whenever the preference changes.
236
+ * - Returns an `unsubscribe()` function.
237
+ *
238
+ * Implementation details:
239
+ * - Uses `matchMedia('(prefers-color-scheme: dark)')`.
240
+ * - Supports both modern `addEventListener('change', ...)` and legacy Safari
241
+ * `addListener(...)` APIs.
242
+ *
243
+ * SSR:
244
+ * - Returns a no-op unsubscribe function on the server.
245
+ */
246
+ function watchSystemTheme(onChange) {
247
+ if (typeof window === "undefined") return () => {};
248
+ const mq = window.matchMedia("(prefers-color-scheme: dark)");
249
+ const handler = () => onChange(mq.matches ? "dark" : "light");
250
+ handler();
251
+ if (mq.addEventListener) {
252
+ mq.addEventListener("change", handler);
253
+ return () => mq.removeEventListener("change", handler);
254
+ }
255
+ mq.addListener(handler);
256
+ return () => mq.removeListener(handler);
257
+ }
258
+ /**
259
+ * Resolves an effective theme name from a mode.
260
+ */
261
+ function resolveName(mode) {
262
+ if (mode !== "system") return mode;
263
+ return getSystemThemeName();
264
+ }
265
+ /**
266
+ * Builds a registry of user theme patches.
267
+ */
268
+ function buildRegistry(userThemes) {
269
+ return {
270
+ light: {},
271
+ dark: {},
272
+ ...userThemes ?? {}
273
+ };
274
+ }
275
+ /**
276
+ * Builds the final resolved theme tokens.
277
+ */
278
+ function buildTheme(registry, resolvedName, override) {
279
+ return deepMerge(deepMerge(resolvedName === "dark" ? defaultThemes.dark : defaultThemes.light, registry[resolvedName] ?? registry.light), override);
280
+ }
281
+ function isThemeMode(value) {
282
+ return typeof value === "string" && value.length > 0;
283
+ }
284
+ function getLocalStorageSafe() {
285
+ if (typeof window === "undefined") return null;
286
+ try {
287
+ return window.localStorage;
288
+ } catch {
289
+ return null;
290
+ }
291
+ }
292
+
293
+ //#endregion
294
+ //#region src/contexts/ThemeContext/utils/themeToCSSVars.ts
295
+ /**
296
+ * themeToCssVars(theme)
297
+ * ---------------------
298
+ * Converts a resolved `ThemeTokens` object into a CSS variable map (`CSSVarMap`).
299
+ *
300
+ * The ThemeProvider uses this function to inject `--px-*` variables into the
301
+ * document root (`<html>`). Components can then rely on stable CSS variables,
302
+ * making them framework-agnostic and compatible with Tailwind (via `.dark`).
303
+ *
304
+ * Why CSS variables?
305
+ * - They are fast (native to the browser)
306
+ * - They work across any styling strategy (inline styles, CSS modules, Tailwind, etc.)
307
+ * - They enable dynamic theme switching without rerendering every component
308
+ *
309
+ * Requirements / Assumptions:
310
+ * - The input `theme` must be **fully resolved** (i.e. complete `ThemeTokens`).
311
+ * The ThemeProvider is responsible for merging partial theme patches on top
312
+ * of a complete base theme (light/dark defaults).
313
+ *
314
+ * Variable naming:
315
+ * - All variables are prefixed with `--px-` to avoid collisions.
316
+ * - Tokens are grouped by category (colors, surfaces, borders, text, spacing, radius, typography, shadows).
317
+ *
318
+ * Notes:
319
+ * - Spacing/radius/fontSize tokens are stored as numbers (e.g. `16`), which is valid
320
+ * for CSS variables. When consuming them, you can:
321
+ * - append `px` in JS (`${var}px`), or
322
+ * - store them as strings here (e.g. `"16px"`) if you prefer.
323
+ *
324
+ * Example usage (component styles):
325
+ * ```ts
326
+ * const styles = {
327
+ * background: 'var(--px-bg)',
328
+ * color: 'var(--px-text-primary)',
329
+ * borderColor: 'var(--px-border-primary)',
330
+ * }
331
+ * ```
332
+ *
333
+ * Example usage (Tailwind config / CSS):
334
+ * ```css
335
+ * .card {
336
+ * background: var(--px-surface);
337
+ * color: var(--px-text-primary);
338
+ * border: 1px solid var(--px-border-primary);
339
+ * }
340
+ * ```
341
+ */
342
+ function themeToCssVars(theme) {
343
+ return {
344
+ "--px-color-primary": theme.colors.primary,
345
+ "--px-color-secondary": theme.colors.secondary,
346
+ "--px-color-success": theme.colors.success,
347
+ "--px-color-warning": theme.colors.warning,
348
+ "--px-color-error": theme.colors.error,
349
+ "--px-color-info": theme.colors.info,
350
+ "--px-bg": theme.colors.background,
351
+ "--px-surface": theme.colors.surface,
352
+ "--px-border-primary": theme.colors.border.primary,
353
+ "--px-border-secondary": theme.colors.border.secondary,
354
+ "--px-text-primary": theme.colors.text.primary,
355
+ "--px-text-secondary": theme.colors.text.secondary,
356
+ "--px-text-disabled": theme.colors.text.disabled,
357
+ "--px-text-inverse": theme.colors.text.inverse,
358
+ "--px-space-xs": theme.spacing.xs,
359
+ "--px-space-sm": theme.spacing.sm,
360
+ "--px-space-md": theme.spacing.md,
361
+ "--px-space-lg": theme.spacing.lg,
362
+ "--px-space-xl": theme.spacing.xl,
363
+ "--px-space-2xl": theme.spacing["2xl"],
364
+ "--px-radius-none": theme.borderRadius.none,
365
+ "--px-radius-sm": theme.borderRadius.sm,
366
+ "--px-radius-md": theme.borderRadius.md,
367
+ "--px-radius-lg": theme.borderRadius.lg,
368
+ "--px-radius-full": theme.borderRadius.full,
369
+ "--px-fs-xs": theme.fontSize.xs,
370
+ "--px-fs-sm": theme.fontSize.sm,
371
+ "--px-fs-md": theme.fontSize.md,
372
+ "--px-fs-lg": theme.fontSize.lg,
373
+ "--px-fs-xl": theme.fontSize.xl,
374
+ "--px-fs-2xl": theme.fontSize["2xl"],
375
+ "--px-fw-normal": theme.fontWeight.normal,
376
+ "--px-fw-medium": theme.fontWeight.medium,
377
+ "--px-fw-semibold": theme.fontWeight.semibold,
378
+ "--px-fw-bold": theme.fontWeight.bold,
379
+ "--px-shadow-sm": theme.shadows.sm,
380
+ "--px-shadow-md": theme.shadows.md,
381
+ "--px-shadow-lg": theme.shadows.lg,
382
+ "--px-shadow-xl": theme.shadows.xl
383
+ };
384
+ }
385
+
386
+ //#endregion
387
+ //#region src/contexts/ThemeContext/index.tsx
388
+ /** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */
389
+ /**
390
+ * Theme Context
391
+ * -------------
392
+ * Internal context used by `ThemeProvider` and consumed by `useTheme()`.
393
+ *
394
+ * The value is always non-null inside a `<ThemeProvider />`.
395
+ */
396
+ const ThemeContext = createContext(null);
397
+ /**
398
+ * ThemeProvider
399
+ * -------------
400
+ * Provides theme state + resolved theme tokens to your app.
401
+ */
402
+ const ThemeProvider = ({ themes, children, override, persistence, persist = false, defaultMode = "system", storageKey = "px-theme" }) => {
403
+ /**
404
+ * Registry of user patches (stable unless `themes` changes).
405
+ */
406
+ const registry = useMemo(() => buildRegistry(themes), [themes]);
407
+ /**
408
+ * Selected mode (with optional persistence).
409
+ *
410
+ * Priority:
411
+ * 1) `persistence` adapter (advanced)
412
+ * 2) `persist === true` + localStorage (quick)
413
+ * 3) `defaultMode`
414
+ */
415
+ const [mode, setMode] = useState(() => {
416
+ if (persistence) try {
417
+ return persistence.get() ?? defaultMode;
418
+ } catch {
419
+ return defaultMode;
420
+ }
421
+ if (persist) {
422
+ const ls = getLocalStorageSafe();
423
+ if (!ls) return defaultMode;
424
+ const raw = ls.getItem(storageKey);
425
+ return isThemeMode(raw) ? raw : defaultMode;
426
+ }
427
+ return defaultMode;
428
+ });
429
+ /**
430
+ * Loading flag (mainly useful if consumers want to wait for first mount).
431
+ */
432
+ const [isLoading, setLoading] = useState(true);
433
+ useEffect(() => {
434
+ setLoading(false);
435
+ }, []);
436
+ /**
437
+ * Resolved name is the actual currently applied theme name.
438
+ * If `mode === "system"`, it becomes "light" or "dark".
439
+ */
440
+ const resolvedName = useMemo(() => {
441
+ if (typeof window === "undefined") return mode === "system" ? "light" : mode;
442
+ return resolveName(mode);
443
+ }, [mode]);
444
+ /**
445
+ * Build final resolved theme tokens (always complete).
446
+ */
447
+ const theme = useMemo(() => buildTheme(registry, resolvedName, override), [
448
+ registry,
449
+ resolvedName,
450
+ override
451
+ ]);
452
+ /**
453
+ * Keep in sync with OS when mode === "system".
454
+ */
455
+ useEffect(() => {
456
+ if (typeof window === "undefined") return;
457
+ if (mode !== "system") return;
458
+ return watchSystemTheme(() => {
459
+ setMode("system");
460
+ });
461
+ }, [mode]);
462
+ /**
463
+ * Apply theme effects:
464
+ * - toggles `.dark` class on <html> (Tailwind)
465
+ * - injects --px-* variables on <html>
466
+ */
467
+ useEffect(() => {
468
+ if (typeof window === "undefined") return;
469
+ applyThemeClass(resolvedName === "dark" ? "dark" : "light");
470
+ applyCssVars(themeToCssVars(theme));
471
+ }, [resolvedName, theme]);
472
+ /**
473
+ * Persist mode changes (optional).
474
+ *
475
+ * We persist the selected `mode` (including "system"), not the resolvedName.
476
+ *
477
+ * Priority:
478
+ * - If `persistence` exists, use it.
479
+ * - Else if `persist === true`, use localStorage.
480
+ */
481
+ useEffect(() => {
482
+ if (persistence) {
483
+ try {
484
+ persistence.set(mode);
485
+ } catch {}
486
+ return;
487
+ }
488
+ if (!persist) return;
489
+ const ls = getLocalStorageSafe();
490
+ if (!ls) return;
491
+ try {
492
+ ls.setItem(storageKey, mode);
493
+ } catch {}
494
+ }, [
495
+ mode,
496
+ persist,
497
+ storageKey,
498
+ persistence
499
+ ]);
500
+ /**
501
+ * Sets the selected theme mode.
502
+ */
503
+ function setTheme(next) {
504
+ setMode(next);
505
+ }
506
+ /**
507
+ * Toggles between two theme names (defaults to "light" and "dark").
508
+ */
509
+ function toggleTheme(a = "light", b = "dark") {
510
+ setMode(resolvedName === a ? b : a);
511
+ }
512
+ return /* @__PURE__ */ jsx(ThemeContext.Provider, {
513
+ value: {
514
+ mode,
515
+ resolvedName,
516
+ theme,
517
+ isLoading,
518
+ setTheme,
519
+ toggleTheme
520
+ },
521
+ children
522
+ });
523
+ };
524
+ /**
525
+ * useTheme()
526
+ *
527
+ * Returns the current theme context.
528
+ *
529
+ * @throws If called outside of `<ThemeProvider />`.
530
+ */
531
+ function useTheme() {
532
+ const ctx = useContext(ThemeContext);
533
+ if (!ctx) throw new Error("useTheme must be used within a ThemeProvider");
534
+ return ctx;
535
+ }
536
+
537
+ //#endregion
538
+ export { useTheme as n, ThemeProvider as t };
539
+ //# sourceMappingURL=ThemeContext-CRXby8a0.js.map
package/dist/ThemeContext-CRXby8a0.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"ThemeContext-CRXby8a0.js","names":["result: any","out: any","defaultThemes: ThemeRegistry","ThemeProvider: React.FC<ThemeProviderProps>"],"sources":["../src/utils/functions/deepMerge.ts","../src/contexts/ThemeContext/constants.ts","../src/contexts/ThemeContext/utils/general.ts","../src/contexts/ThemeContext/utils/themeToCSSVars.ts","../src/contexts/ThemeContext/index.tsx"],"sourcesContent":["/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nexport type DeepPartial<T> = {\n [P in keyof T]?: T[P] extends Array<infer U>\n ? Array<DeepPartial<U>>\n : T[P] extends object\n ? DeepPartial<T[P]>\n : T[P]\n}\n\nexport function deepMerge<T>(base: T, override?: DeepPartial<T>): T {\n if (override === undefined) return clone(base)\n\n if (!isPlainObject(base) || !isPlainObject(override)) {\n return clone(override as T)\n }\n\n const result: any = Array.isArray(base) ? [] : {}\n\n const baseKeys = Object.keys(base as any) as (keyof T)[]\n const overrideKeys = Object.keys(override as any) as (keyof T)[]\n\n const allKeys = Array.from(new Set([...baseKeys, ...overrideKeys]))\n\n for (const k of allKeys) {\n const baseVal = (base as any)[k]\n const overrideVal = (override as any)[k]\n\n if (overrideVal === undefined) {\n result[k] = clone(baseVal)\n continue\n }\n\n if (isPlainObject(baseVal) && isPlainObject(overrideVal)) {\n result[k] = deepMerge(baseVal, overrideVal)\n continue\n }\n\n result[k] = clone(overrideVal)\n }\n\n return result as T\n}\n\nfunction isPlainObject(x: any): x is Record<string, any> {\n return !!x && typeof x === 'object' && !Array.isArray(x)\n}\n\nfunction clone<T>(v: T): T {\n if (v === undefined || v === null) return v\n if (Array.isArray(v)) return v.map(item => clone(item)) as unknown as T\n if (isPlainObject(v)) {\n const out: any = {}\n for (const k of Object.keys(v)) out[k] = clone((v as any)[k])\n return out\n }\n return v\n}\n","// theme/defaultThemes.ts\nimport type { ThemeRegistry } from './types'\n\nexport const defaultThemes: ThemeRegistry = {\n light: {\n colors: {\n primary: '#0EB24C', // --color-brand-primary\n secondary: '#6C6C6C', // foreground-secondary\n success: '#0EB24C',\n warning: '#f59e0b',\n error: '#ef4444',\n info: '#06b6d4',\n\n background: '#FFFFFF', // --background\n surface: '#FBFBFB', // --background-secondary\n border: {\n primary: '#E8E8E9',\n secondary: '#E8E8E9'\n }, // --border-primary\n\n text: {\n primary: '#222222', // --foreground-primary\n secondary: '#6C6C6C', // --foreground-secondary\n disabled: '#A0A0A0',\n inverse: '#FFFFFF'\n }\n },\n\n spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32, '2xl': 48 },\n borderRadius: { none: 0, sm: 4, md: 6, lg: 8, full: 9999 },\n fontSize: { xs: 12, sm: 14, md: 16, lg: 18, xl: 20, '2xl': 24 },\n fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700 },\n shadows: {\n sm: '0 1px 2px 0 rgba(0, 0, 0, 0.05)',\n md: '0 4px 6px -1px rgba(0, 0, 0, 0.10)',\n lg: '0 10px 15px -3px rgba(0, 0, 0, 0.10)',\n xl: '0 20px 25px -5px rgba(0, 0, 0, 0.10)'\n }\n },\n\n dark: {\n colors: {\n primary: '#0EB24C', // brand se mantém (ou pode clarear depois)\n secondary: '#C7CFD8', // foreground-secondary dark\n success: '#0EB24C',\n warning: '#f59e0b',\n error: '#ef4444',\n info: '#06b6d4',\n\n background: '#090909', // --background dark\n surface: '#090909', // --background-secondary dark\n border: {\n primary: '#27282D',\n secondary: '#27282D'\n }, // --border-primary dark\n\n text: {\n primary: '#ECECEC', // --foreground-primary dark\n secondary: '#C7CFD8', // --foreground-secondary dark\n disabled: '#8B93A0',\n inverse: '#090909'\n }\n },\n\n spacing: { xs: 4, sm: 8, md: 16, lg: 24, xl: 32, '2xl': 48 },\n borderRadius: { none: 0, sm: 4, md: 6, lg: 8, full: 9999 },\n fontSize: { xs: 12, sm: 14, md: 16, lg: 18, xl: 20, '2xl': 24 },\n fontWeight: { normal: 400, medium: 500, semibold: 600, bold: 700 },\n shadows: {\n sm: '0 1px 2px 0 rgba(0, 0, 0, 0.35)',\n md: '0 4px 6px -1px rgba(0, 0, 0, 0.45)',\n lg: '0 10px 15px -3px rgba(0, 0, 0, 0.50)',\n xl: '0 20px 25px -5px rgba(0, 0, 0, 0.55)'\n }\n }\n}\n","// Utils\n/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\nimport { deepMerge } from '@utils/functions'\nimport { defaultThemes } from '../constants'\n\n// Types\nimport type { ThemeMode, ThemeRegistry, ThemeTokens } from '../types'\n\n/**\n * Theme Utilities\n * ===============\n * Small DOM utilities used by the ThemeProvider to:\n * - toggle dark mode class for Tailwind compatibility\n * - inject CSS variables (`--px-*`) into the document root\n * - read/watch the OS/browser theme preference (`prefers-color-scheme`)\n *\n * These helpers are:\n * - **client-safe** (guarded for SSR)\n * - **framework-agnostic** (only touch `documentElement`)\n * - **tiny** (no dependencies)\n */\n\n/**\n * CSSVarMap\n * ---------\n * A map of CSS custom properties to be applied on the document root.\n *\n * Notes:\n * - Keys must be valid CSS variable names (e.g. `\"--px-bg\"`, `\"--px-text-primary\"`).\n * - Values can be strings or numbers.\n * - If you store numbers (e.g. 16), you decide at consumption time whether it means px.\n *\n * You can keep it generic:\n * Record<`--${string}`, string | number>\n *\n * Or restrict to your library prefix:\n * Record<`--px-${string}`, string | number>\n */\nexport type CSSVarMap = Partial<Record<`--${string}`, string | number>>\n\n/**\n * applyThemeClass(themeName)\n * -------------------------\n * Applies the light/dark mode class to the `<html>` element.\n *\n * Tailwind’s dark mode (in the common \"class\" strategy) typically relies on a\n * `.dark` class. This function toggles ONLY the `dark` class:\n *\n * - themeName `\"dark\"` => adds `.dark`\n * - themeName `\"light\"` => removes `.dark`\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyThemeClass(themeName: 'light' | 'dark') {\n if (typeof document === 'undefined') return\n const root = document.documentElement\n root.classList.toggle('dark', themeName === 'dark')\n}\n\n/**\n * applyCssVars(vars)\n * ------------------\n * Injects CSS variables into the document root (`<html>`).\n *\n * This is how the library exposes theme tokens as CSS variables.\n * Components can then use `var(--px-...)` in styles.\n *\n * Example:\n * ```ts\n * applyCssVars({ '--px-bg': '#fff', '--px-text-primary': '#111' })\n * ```\n *\n * Behavior:\n * - Ignores `null` / `undefined` values.\n * - Converts all values to string before applying.\n *\n * SSR:\n * - No-op on the server (when `document` is undefined).\n */\nexport function applyCssVars(vars: CSSVarMap) {\n if (typeof document === 'undefined') return\n const root = document.documentElement\n\n for (const [key, value] of Object.entries(vars)) {\n if (value == null) continue\n root.style.setProperty(key, String(value))\n }\n}\n\n/**\n * getSystemThemeName()\n * --------------------\n * Returns the current OS/browser color scheme preference.\n *\n * It reads `prefers-color-scheme: dark` using `window.matchMedia`.\n *\n * Returns:\n * - `\"dark\"` if the user prefers dark mode\n * - `\"light\"` otherwise\n *\n * SSR:\n * - Returns `\"light\"` on the server (safe default).\n */\nexport function getSystemThemeName(): 'light' | 'dark' {\n if (typeof window === 'undefined') return 'light'\n const prefersDark =\n window.matchMedia?.('(prefers-color-scheme: dark)').matches ?? false\n return prefersDark ? 'dark' : 'light'\n}\n\n/**\n * watchSystemTheme(onChange)\n * --------------------------\n * Subscribes to changes in OS/browser theme preference.\n *\n * Use this when your selected mode is `\"system\"` so the app immediately reacts\n * when the user changes their OS theme.\n *\n * - Calls `onChange('light' | 'dark')` whenever the preference changes.\n * - Returns an `unsubscribe()` function.\n *\n * Implementation details:\n * - Uses `matchMedia('(prefers-color-scheme: dark)')`.\n * - Supports both modern `addEventListener('change', ...)` and legacy Safari\n * `addListener(...)` APIs.\n *\n * SSR:\n * - Returns a no-op unsubscribe function on the server.\n */\nexport function watchSystemTheme(onChange: (name: 'light' | 'dark') => void) {\n if (typeof window === 'undefined') return () => {}\n\n const mq = window.matchMedia('(prefers-color-scheme: dark)')\n\n const handler = () => onChange(mq.matches ? 'dark' : 'light')\n\n // Optional: sync immediately on subscribe\n handler()\n\n // Modern browsers\n if (mq.addEventListener) {\n mq.addEventListener('change', handler)\n return () => mq.removeEventListener('change', handler)\n }\n\n // Legacy Safari\n mq.addListener(handler as any)\n return () => mq.removeListener(handler as any)\n}\n\n/**\n * Resolves an effective theme name from a mode.\n */\nexport function resolveName(mode: ThemeMode): string {\n if (mode !== 'system') return mode\n return getSystemThemeName()\n}\n\n/**\n * Builds a registry of user theme patches.\n */\nexport function buildRegistry(\n userThemes?: Partial<ThemeRegistry>\n): ThemeRegistry {\n return {\n light: {},\n dark: {},\n ...(userThemes ?? {})\n } as ThemeRegistry\n}\n\n/**\n * Builds the final resolved theme tokens.\n */\nexport function buildTheme(\n registry: ThemeRegistry,\n resolvedName: string,\n override?: Partial<ThemeTokens>\n): ThemeTokens {\n const base: ThemeTokens =\n resolvedName === 'dark'\n ? (defaultThemes.dark as ThemeTokens)\n : (defaultThemes.light as ThemeTokens)\n\n const selectedPatch = (registry[resolvedName] ?? registry.light) as any\n\n const merged = deepMerge(base, selectedPatch)\n return deepMerge(merged, override)\n}\n\nexport function isThemeMode(value: unknown): value is ThemeMode {\n return typeof value === 'string' && value.length > 0\n}\n\nexport function getLocalStorageSafe(): Storage | null {\n if (typeof window === 'undefined') return null\n try {\n return window.localStorage\n } catch {\n return null\n }\n}\n","// Types\nimport type { CSSVarMap } from './general'\nimport type { ThemeTokens } from '../types'\n\n/**\n * themeToCssVars(theme)\n * ---------------------\n * Converts a resolved `ThemeTokens` object into a CSS variable map (`CSSVarMap`).\n *\n * The ThemeProvider uses this function to inject `--px-*` variables into the\n * document root (`<html>`). Components can then rely on stable CSS variables,\n * making them framework-agnostic and compatible with Tailwind (via `.dark`).\n *\n * Why CSS variables?\n * - They are fast (native to the browser)\n * - They work across any styling strategy (inline styles, CSS modules, Tailwind, etc.)\n * - They enable dynamic theme switching without rerendering every component\n *\n * Requirements / Assumptions:\n * - The input `theme` must be **fully resolved** (i.e. complete `ThemeTokens`).\n * The ThemeProvider is responsible for merging partial theme patches on top\n * of a complete base theme (light/dark defaults).\n *\n * Variable naming:\n * - All variables are prefixed with `--px-` to avoid collisions.\n * - Tokens are grouped by category (colors, surfaces, borders, text, spacing, radius, typography, shadows).\n *\n * Notes:\n * - Spacing/radius/fontSize tokens are stored as numbers (e.g. `16`), which is valid\n * for CSS variables. When consuming them, you can:\n * - append `px` in JS (`${var}px`), or\n * - store them as strings here (e.g. `\"16px\"`) if you prefer.\n *\n * Example usage (component styles):\n * ```ts\n * const styles = {\n * background: 'var(--px-bg)',\n * color: 'var(--px-text-primary)',\n * borderColor: 'var(--px-border-primary)',\n * }\n * ```\n *\n * Example usage (Tailwind config / CSS):\n * ```css\n * .card {\n * background: var(--px-surface);\n * color: var(--px-text-primary);\n * border: 1px solid var(--px-border-primary);\n * }\n * ```\n */\nexport function themeToCssVars(theme: ThemeTokens): CSSVarMap {\n return {\n /**\n * Colors (semantic)\n * -----------------\n * Brand + intent colors. Prefer using these instead of raw palette values.\n */\n '--px-color-primary': theme.colors.primary,\n '--px-color-secondary': theme.colors.secondary,\n '--px-color-success': theme.colors.success,\n '--px-color-warning': theme.colors.warning,\n '--px-color-error': theme.colors.error,\n '--px-color-info': theme.colors.info,\n\n /**\n * Surfaces\n * --------\n * Neutral surfaces for layouts and elevated containers.\n */\n '--px-bg': theme.colors.background,\n '--px-surface': theme.colors.surface,\n\n /**\n * Borders\n * -------\n * Divider and outline colors.\n */\n '--px-border-primary': theme.colors.border.primary,\n '--px-border-secondary': theme.colors.border.secondary,\n\n /**\n * Text\n * ----\n * Text colors for different emphasis levels.\n */\n '--px-text-primary': theme.colors.text.primary,\n '--px-text-secondary': theme.colors.text.secondary,\n '--px-text-disabled': theme.colors.text.disabled,\n '--px-text-inverse': theme.colors.text.inverse,\n\n /**\n * Spacing scale\n * -------------\n * Numeric spacing tokens (commonly used as px in the component factories).\n */\n '--px-space-xs': theme.spacing.xs,\n '--px-space-sm': theme.spacing.sm,\n '--px-space-md': theme.spacing.md,\n '--px-space-lg': theme.spacing.lg,\n '--px-space-xl': theme.spacing.xl,\n '--px-space-2xl': theme.spacing['2xl'],\n\n /**\n * Border radius scale\n * -------------------\n * Numeric radius tokens (commonly used as px).\n */\n '--px-radius-none': theme.borderRadius.none,\n '--px-radius-sm': theme.borderRadius.sm,\n '--px-radius-md': theme.borderRadius.md,\n '--px-radius-lg': theme.borderRadius.lg,\n '--px-radius-full': theme.borderRadius.full,\n\n /**\n * Typography scale\n * ----------------\n * Font sizes and font weights.\n */\n '--px-fs-xs': theme.fontSize.xs,\n '--px-fs-sm': theme.fontSize.sm,\n '--px-fs-md': theme.fontSize.md,\n '--px-fs-lg': theme.fontSize.lg,\n '--px-fs-xl': theme.fontSize.xl,\n '--px-fs-2xl': theme.fontSize['2xl'],\n\n '--px-fw-normal': theme.fontWeight.normal,\n '--px-fw-medium': theme.fontWeight.medium,\n '--px-fw-semibold': theme.fontWeight.semibold,\n '--px-fw-bold': theme.fontWeight.bold,\n\n /**\n * Shadows\n * -------\n * CSS shadow strings for elevation.\n */\n '--px-shadow-sm': theme.shadows.sm,\n '--px-shadow-md': theme.shadows.md,\n '--px-shadow-lg': theme.shadows.lg,\n '--px-shadow-xl': theme.shadows.xl\n }\n}\n","/** biome-ignore-all lint/suspicious/noExplicitAny: <Not needed> */\n\n// External Libraries\nimport { useMemo, useState, useEffect, useContext, createContext } from 'react'\n\n// Utils\nimport {\n buildTheme,\n isThemeMode,\n resolveName,\n applyCssVars,\n buildRegistry,\n themeToCssVars,\n applyThemeClass,\n watchSystemTheme,\n getLocalStorageSafe\n} from './utils'\n\n// Types\nimport type { ThemeMode, ThemeContextData, ThemeProviderProps } from './types'\n\nexport * from './types'\n\n/**\n * Theme Context\n * -------------\n * Internal context used by `ThemeProvider` and consumed by `useTheme()`.\n *\n * The value is always non-null inside a `<ThemeProvider />`.\n */\nconst ThemeContext = createContext<ThemeContextData | null>(null)\n\n/**\n * ThemeProvider\n * -------------\n * Provides theme state + resolved theme tokens to your app.\n */\nexport const ThemeProvider: React.FC<ThemeProviderProps> = ({\n themes,\n children,\n override,\n persistence,\n persist = false,\n defaultMode = 'system',\n storageKey = 'px-theme'\n}) => {\n /**\n * Registry of user patches (stable unless `themes` changes).\n */\n const registry = useMemo(() => buildRegistry(themes), [themes])\n\n /**\n * Selected mode (with optional persistence).\n *\n * Priority:\n * 1) `persistence` adapter (advanced)\n * 2) `persist === true` + localStorage (quick)\n * 3) `defaultMode`\n */\n const [mode, setMode] = useState<ThemeMode>(() => {\n // 1) advanced adapter\n if (persistence) {\n try {\n const saved = persistence.get()\n return (saved ?? defaultMode) as ThemeMode\n } catch {\n return defaultMode\n }\n }\n\n // 2) quick localStorage mode\n if (persist) {\n const ls = getLocalStorageSafe()\n if (!ls) return defaultMode\n const raw = ls.getItem(storageKey)\n return isThemeMode(raw) ? raw : defaultMode\n }\n\n // 3) fallback\n return defaultMode\n })\n\n /**\n * Loading flag (mainly useful if consumers want to wait for first mount).\n */\n const [isLoading, setLoading] = useState(true)\n\n useEffect(() => {\n setLoading(false)\n }, [])\n\n /**\n * Resolved name is the actual currently applied theme name.\n * If `mode === \"system\"`, it becomes \"light\" or \"dark\".\n */\n const resolvedName = useMemo(() => {\n if (typeof window === 'undefined') return mode === 'system' ? 'light' : mode\n return resolveName(mode)\n }, [mode])\n\n /**\n * Build final resolved theme tokens (always complete).\n */\n const theme = useMemo(\n () => buildTheme(registry, resolvedName, override),\n [registry, resolvedName, override]\n )\n\n /**\n * Keep in sync with OS when mode === \"system\".\n */\n useEffect(() => {\n if (typeof window === 'undefined') return\n if (mode !== 'system') return\n\n return watchSystemTheme(() => {\n setMode('system')\n })\n }, [mode])\n\n /**\n * Apply theme effects:\n * - toggles `.dark` class on <html> (Tailwind)\n * - injects --px-* variables on <html>\n */\n useEffect(() => {\n if (typeof window === 'undefined') return\n applyThemeClass(resolvedName === 'dark' ? 'dark' : 'light')\n applyCssVars(themeToCssVars(theme))\n }, [resolvedName, theme])\n\n /**\n * Persist mode changes (optional).\n *\n * We persist the selected `mode` (including \"system\"), not the resolvedName.\n *\n * Priority:\n * - If `persistence` exists, use it.\n * - Else if `persist === true`, use localStorage.\n */\n useEffect(() => {\n // advanced adapter\n if (persistence) {\n try {\n persistence.set(mode)\n } catch {\n // ignore\n }\n return\n }\n\n // quick localStorage mode\n if (!persist) return\n const ls = getLocalStorageSafe()\n if (!ls) return\n\n try {\n ls.setItem(storageKey, mode)\n } catch {\n // ignore\n }\n }, [mode, persist, storageKey, persistence])\n\n /**\n * Sets the selected theme mode.\n */\n function setTheme(next: ThemeMode) {\n setMode(next)\n }\n\n /**\n * Toggles between two theme names (defaults to \"light\" and \"dark\").\n */\n function toggleTheme(a: string = 'light', b: string = 'dark') {\n setMode(resolvedName === a ? b : a)\n }\n\n return (\n <ThemeContext.Provider\n value={{ mode, resolvedName, theme, isLoading, setTheme, toggleTheme }}\n >\n {children}\n </ThemeContext.Provider>\n )\n}\n\n/**\n * useTheme()\n *\n * Returns the current theme context.\n *\n * @throws If called outside of `<ThemeProvider />`.\n */\nexport function useTheme(): ThemeContextData {\n const ctx = useContext(ThemeContext)\n if (!ctx) throw new Error('useTheme must be used within a ThemeProvider')\n return ctx\n}\n"],"mappings":"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"}
package/dist/index-CZOu4S--.d.ts ADDED
@@ -0,0 +1,69 @@
1
+ import { CSSProperties, ReactNode } from "react";
2
+ import * as react_jsx_runtime0 from "react/jsx-runtime";
3
+
4
+ //#region src/hooks/useThemedStyles/types/styleProps.d.ts
5
+ type Space = number | string;
6
+ type Size = number | string;
7
+ interface MarginProps {
8
+ m?: Space;
9
+ mx?: Space;
10
+ my?: Space;
11
+ mt?: Space;
12
+ mr?: Space;
13
+ mb?: Space;
14
+ ml?: Space;
15
+ }
16
+ interface PaddingProps {
17
+ p?: Space;
18
+ px?: Space;
19
+ py?: Space;
20
+ pt?: Space;
21
+ pr?: Space;
22
+ pb?: Space;
23
+ pl?: Space;
24
+ }
25
+ interface TextProps {
26
+ fontSize?: number | string;
27
+ fontWeight?: React.CSSProperties['fontWeight'];
28
+ lineHeight?: number | string;
29
+ textAlign?: React.CSSProperties['textAlign'];
30
+ }
31
+ interface LayoutProps {
32
+ w?: Size;
33
+ h?: Size;
34
+ minW?: Size;
35
+ maxW?: Size;
36
+ minH?: Size;
37
+ maxH?: Size;
38
+ }
39
+ type CommonStyleProps = MarginProps & PaddingProps & TextProps & LayoutProps;
40
+ //#endregion
41
+ //#region src/components/toolkit/TabSwitch/styles.d.ts
42
+ declare function createTabSwitchStyles<T>(props: TabSwitchProps<T>): {
43
+ container: CSSProperties;
44
+ };
45
+ //#endregion
46
+ //#region src/components/toolkit/TabSwitch/types.d.ts
47
+ interface SwitchOption<T> {
48
+ value: T;
49
+ label: string;
50
+ disabled?: boolean;
51
+ icon?: ReactNode;
52
+ }
53
+ interface TabSwitchProps<T> extends CommonStyleProps {
54
+ currentValue: T;
55
+ options: SwitchOption<T>[];
56
+ disabled?: boolean;
57
+ fitContent?: boolean;
58
+ layoutId?: string;
59
+ selectedLabelColor?: string;
60
+ variant?: 'default' | 'underline';
61
+ styles?: Partial<ReturnType<typeof createTabSwitchStyles>>;
62
+ onChange: (value: T) => void;
63
+ }
64
+ //#endregion
65
+ //#region src/components/toolkit/TabSwitch/index.d.ts
66
+ declare function TabSwitch<T>(props: TabSwitchProps<T>): react_jsx_runtime0.JSX.Element;
67
+ //#endregion
68
+ export { SwitchOption as n, TabSwitchProps as r, TabSwitch as t };
69
+ //# sourceMappingURL=index-CZOu4S--.d.ts.map