@webdevarif/dashui 1.2.3 → 1.2.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/index.d.mts +82 -1
  2. package/dist/index.d.ts +82 -1
  3. package/dist/index.js +382 -39
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +379 -39
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +89 -95
  8. package/dist/styles/animations.css +0 -13
  9. package/dist/styles/globals.css +0 -437
  10. package/dist/tokens/index.css +0 -11
  11. package/dist/tokens/primitives.css +0 -92
  12. package/dist/tokens/semantic-dark.css +0 -87
  13. package/dist/tokens/semantic-light.css +0 -116
  14. package/dist/tokens/storefront-schemes.css +0 -96
package/dist/tokens/primitives.css DELETED
@@ -1,92 +0,0 @@
1
- /**
2
- * @webdevarif/dashui — Primitive Tokens (Layer 1)
3
- * Raw values. Never use these directly in components.
4
- * Use semantic tokens instead.
5
- */
6
- :root {
7
- /* ─── Gray Scale ─── */
8
- --wd-gray-0: #FFFFFF;
9
- --wd-gray-50: #F9FAFB;
10
- --wd-gray-100: #F3F4F6;
11
- --wd-gray-200: #E5E7EB;
12
- --wd-gray-300: #D1D5DB;
13
- --wd-gray-400: #9CA3AF;
14
- --wd-gray-500: #6B7280;
15
- --wd-gray-600: #4B5563;
16
- --wd-gray-700: #374151;
17
- --wd-gray-800: #1F2937;
18
- --wd-gray-900: #111827;
19
- --wd-gray-950: #030712;
20
-
21
- /* ─── Brand (Indigo) ─── */
22
- --wd-brand-50: #EEF2FF;
23
- --wd-brand-100: #E0E7FF;
24
- --wd-brand-200: #C7D2FE;
25
- --wd-brand-300: #A5B4FC;
26
- --wd-brand-400: #818CF8;
27
- --wd-brand-500: #6366F1;
28
- --wd-brand-600: #4F46E5;
29
- --wd-brand-700: #4338CA;
30
- --wd-brand-800: #3730A3;
31
- --wd-brand-900: #312E81;
32
-
33
- /* ─── Status ─── */
34
- --wd-green-500: #16A34A;
35
- --wd-green-50: #F0FDF4;
36
- --wd-yellow-500: #D97706;
37
- --wd-yellow-50: #FFFBEB;
38
- --wd-red-500: #DC2626;
39
- --wd-red-50: #FEF2F2;
40
- --wd-blue-500: #2563EB;
41
- --wd-blue-50: #EFF6FF;
42
-
43
- /* ─── Spacing ─── */
44
- --wd-space-1: 0.25rem; /* 4px */
45
- --wd-space-2: 0.5rem; /* 8px */
46
- --wd-space-3: 0.75rem; /* 12px */
47
- --wd-space-4: 1rem; /* 16px */
48
- --wd-space-5: 1.25rem; /* 20px */
49
- --wd-space-6: 1.5rem; /* 24px */
50
- --wd-space-8: 2rem; /* 32px */
51
- --wd-space-10: 2.5rem; /* 40px */
52
- --wd-space-12: 3rem; /* 48px */
53
- --wd-space-16: 4rem; /* 64px */
54
-
55
- /* ─── Border Radius ─── */
56
- --wd-radius-sm: 4px;
57
- --wd-radius-md: 8px;
58
- --wd-radius-lg: 12px;
59
- --wd-radius-xl: 16px;
60
- --wd-radius-2xl: 20px;
61
- --wd-radius-full: 9999px;
62
-
63
- /* ─── Typography ─── */
64
- --wd-font-sans: 'Inter', system-ui, -apple-system, sans-serif;
65
- --wd-font-mono: 'JetBrains Mono', 'Fira Code', monospace;
66
-
67
- --wd-text-xs: 0.75rem; /* 12px */
68
- --wd-text-sm: 0.875rem; /* 14px */
69
- --wd-text-base: 1rem; /* 16px */
70
- --wd-text-lg: 1.125rem; /* 18px */
71
- --wd-text-xl: 1.25rem; /* 20px */
72
- --wd-text-2xl: 1.5rem; /* 24px */
73
- --wd-text-3xl: 1.875rem; /* 30px */
74
- --wd-text-4xl: 2.25rem; /* 36px */
75
-
76
- --wd-leading-tight: 1.25;
77
- --wd-leading-normal: 1.5;
78
- --wd-leading-relaxed: 1.75;
79
-
80
- /* ─── Shadows ─── */
81
- --wd-shadow-xs: 0 1px 2px rgba(0,0,0,0.05);
82
- --wd-shadow-sm: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06);
83
- --wd-shadow-md: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06);
84
- --wd-shadow-lg: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05);
85
- --wd-shadow-xl: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04);
86
-
87
- /* ─── Animation ─── */
88
- --wd-duration-fast: 100ms;
89
- --wd-duration-normal: 200ms;
90
- --wd-duration-slow: 300ms;
91
- --wd-ease-default: cubic-bezier(0.4, 0, 0.2, 1);
92
- }
package/dist/tokens/semantic-dark.css DELETED
@@ -1,87 +0,0 @@
1
- /**
2
- * @webdevarif/dashui — Semantic Tokens, Dark Mode (Layer 2)
3
- * Apply via: <html data-dashui-theme="dark">
4
- */
5
- [data-dashui-theme="dark"] {
6
-
7
- /* ─── Surfaces ─── */
8
- --wd-surface-page: #0A0A0A;
9
- --wd-surface-card: var(--wd-gray-900);
10
- --wd-surface-overlay: var(--wd-gray-800);
11
- --wd-surface-sunken: #050505;
12
- --wd-surface-raised: var(--wd-gray-800);
13
- --wd-surface-sidebar: var(--wd-gray-950);
14
-
15
- /* ─── Text ─── */
16
- --wd-text-primary: var(--wd-gray-50);
17
- --wd-text-secondary: var(--wd-gray-400);
18
- --wd-text-tertiary: var(--wd-gray-500);
19
- --wd-text-disabled: var(--wd-gray-700);
20
- --wd-text-inverse: var(--wd-gray-900);
21
- --wd-text-on-brand: #FFFFFF;
22
-
23
- /* ─── Brand ─── */
24
- --wd-brand: var(--wd-brand-400);
25
- --wd-brand-hover: var(--wd-brand-300);
26
- --wd-brand-active: var(--wd-brand-200);
27
- --wd-brand-subtle: rgba(99, 102, 241, 0.12);
28
- --wd-brand-muted: rgba(99, 102, 241, 0.20);
29
- --wd-brand-border: rgba(99, 102, 241, 0.30);
30
-
31
- /* ─── Border ─── */
32
- --wd-border: var(--wd-gray-800);
33
- --wd-border-strong: var(--wd-gray-700);
34
- --wd-border-focus: var(--wd-brand-400);
35
-
36
- /* ─── Interactive ─── */
37
- --wd-interactive-bg: var(--wd-gray-900);
38
- --wd-interactive-hover: var(--wd-gray-800);
39
- --wd-interactive-active: var(--wd-gray-700);
40
- --wd-interactive-selected: rgba(99, 102, 241, 0.15);
41
- --wd-interactive-selected-border: rgba(99, 102, 241, 0.40);
42
-
43
- /* ─── Button — Primary ─── */
44
- --wd-btn-primary-bg: var(--wd-brand-500);
45
- --wd-btn-primary-bg-hover: var(--wd-brand-400);
46
- --wd-btn-primary-bg-active: var(--wd-brand-300);
47
- --wd-btn-primary-text: #FFFFFF;
48
- --wd-btn-primary-border: var(--wd-brand-500);
49
-
50
- /* ─── Button — Secondary ─── */
51
- --wd-btn-secondary-bg: var(--wd-gray-800);
52
- --wd-btn-secondary-bg-hover: var(--wd-gray-700);
53
- --wd-btn-secondary-bg-active: var(--wd-gray-600);
54
- --wd-btn-secondary-text: var(--wd-gray-200);
55
- --wd-btn-secondary-border: var(--wd-gray-700);
56
-
57
- /* ─── Button — Ghost ─── */
58
- --wd-btn-ghost-bg: transparent;
59
- --wd-btn-ghost-bg-hover: var(--wd-gray-800);
60
- --wd-btn-ghost-text: var(--wd-gray-300);
61
-
62
- /* ─── Input ─── */
63
- --wd-input-bg: var(--wd-gray-900);
64
- --wd-input-bg-hover: var(--wd-gray-800);
65
- --wd-input-bg-focus: var(--wd-gray-900);
66
- --wd-input-bg-disabled: var(--wd-gray-950);
67
- --wd-input-text: var(--wd-gray-100);
68
- --wd-input-placeholder: var(--wd-gray-600);
69
- --wd-input-border: var(--wd-gray-700);
70
- --wd-input-border-focus: var(--wd-brand-400);
71
- --wd-input-border-error: #F87171;
72
-
73
- /* ─── Status ─── */
74
- --wd-status-success: #4ADE80;
75
- --wd-status-success-bg: rgba(22, 163, 74, 0.15);
76
- --wd-status-warning: #FCD34D;
77
- --wd-status-warning-bg: rgba(217, 119, 6, 0.15);
78
- --wd-status-error: #F87171;
79
- --wd-status-error-bg: rgba(220, 38, 38, 0.15);
80
- --wd-status-info: #60A5FA;
81
- --wd-status-info-bg: rgba(37, 99, 235, 0.15);
82
-
83
- /* ─── Shadows ─── */
84
- --wd-shadow-card: 0 1px 3px rgba(0,0,0,0.5);
85
- --wd-shadow-dropdown: 0 10px 15px rgba(0,0,0,0.6);
86
- --wd-shadow-modal: 0 20px 40px rgba(0,0,0,0.7);
87
- }
package/dist/tokens/semantic-light.css DELETED
@@ -1,116 +0,0 @@
1
- /**
2
- * @webdevarif/dashui — Semantic Tokens, Light Mode (Layer 2)
3
- * Apply via: <html data-dashui-theme="light"> (default)
4
- * Components use these variables, never primitives directly.
5
- */
6
- :root,
7
- [data-dashui-theme="light"] {
8
-
9
- /* ─── Surfaces ─── */
10
- --wd-surface-page: var(--wd-gray-50);
11
- --wd-surface-card: var(--wd-gray-0);
12
- --wd-surface-overlay: var(--wd-gray-0);
13
- --wd-surface-sunken: var(--wd-gray-100);
14
- --wd-surface-raised: var(--wd-gray-0);
15
- --wd-surface-sidebar: var(--wd-gray-0);
16
-
17
- /* ─── Text ─── */
18
- --wd-text-primary: var(--wd-gray-900);
19
- --wd-text-secondary: var(--wd-gray-600);
20
- --wd-text-tertiary: var(--wd-gray-400);
21
- --wd-text-disabled: var(--wd-gray-300);
22
- --wd-text-inverse: var(--wd-gray-0);
23
- --wd-text-on-brand: #FFFFFF;
24
-
25
- /* ─── Brand ─── */
26
- --wd-brand: var(--wd-brand-500);
27
- --wd-brand-hover: var(--wd-brand-600);
28
- --wd-brand-active: var(--wd-brand-700);
29
- --wd-brand-subtle: var(--wd-brand-50);
30
- --wd-brand-muted: var(--wd-brand-100);
31
- --wd-brand-border: var(--wd-brand-200);
32
-
33
- /* ─── Border ─── */
34
- --wd-border: var(--wd-gray-200);
35
- --wd-border-strong: var(--wd-gray-300);
36
- --wd-border-focus: var(--wd-brand-500);
37
-
38
- /* ─── Interactive ─── */
39
- --wd-interactive-bg: var(--wd-gray-0);
40
- --wd-interactive-hover: var(--wd-gray-50);
41
- --wd-interactive-active: var(--wd-gray-100);
42
- --wd-interactive-selected: var(--wd-brand-50);
43
- --wd-interactive-selected-border: var(--wd-brand-200);
44
-
45
- /* ─── Button — Primary ─── */
46
- --wd-btn-primary-bg: var(--wd-brand-500);
47
- --wd-btn-primary-bg-hover: var(--wd-brand-600);
48
- --wd-btn-primary-bg-active: var(--wd-brand-700);
49
- --wd-btn-primary-text: #FFFFFF;
50
- --wd-btn-primary-border: var(--wd-brand-500);
51
-
52
- /* ─── Button — Secondary ─── */
53
- --wd-btn-secondary-bg: var(--wd-gray-0);
54
- --wd-btn-secondary-bg-hover: var(--wd-gray-50);
55
- --wd-btn-secondary-bg-active: var(--wd-gray-100);
56
- --wd-btn-secondary-text: var(--wd-gray-700);
57
- --wd-btn-secondary-border: var(--wd-gray-300);
58
-
59
- /* ─── Button — Destructive ─── */
60
- --wd-btn-danger-bg: var(--wd-red-500);
61
- --wd-btn-danger-bg-hover: #B91C1C;
62
- --wd-btn-danger-text: #FFFFFF;
63
- --wd-btn-danger-border: var(--wd-red-500);
64
-
65
- /* ─── Button — Ghost ─── */
66
- --wd-btn-ghost-bg: transparent;
67
- --wd-btn-ghost-bg-hover: var(--wd-gray-100);
68
- --wd-btn-ghost-text: var(--wd-gray-700);
69
-
70
- /* ─── Input ─── */
71
- --wd-input-bg: var(--wd-gray-0);
72
- --wd-input-bg-hover: var(--wd-gray-50);
73
- --wd-input-bg-focus: var(--wd-gray-0);
74
- --wd-input-bg-disabled: var(--wd-gray-100);
75
- --wd-input-text: var(--wd-gray-900);
76
- --wd-input-placeholder: var(--wd-gray-400);
77
- --wd-input-border: var(--wd-gray-300);
78
- --wd-input-border-focus: var(--wd-brand-500);
79
- --wd-input-border-error: var(--wd-red-500);
80
-
81
- /* ─── Status ─── */
82
- --wd-status-success: var(--wd-green-500);
83
- --wd-status-success-bg: var(--wd-green-50);
84
- --wd-status-warning: var(--wd-yellow-500);
85
- --wd-status-warning-bg: var(--wd-yellow-50);
86
- --wd-status-error: var(--wd-red-500);
87
- --wd-status-error-bg: var(--wd-red-50);
88
- --wd-status-info: var(--wd-blue-500);
89
- --wd-status-info-bg: var(--wd-blue-50);
90
-
91
- /* ─── Shadows ─── */
92
- --wd-shadow-card: var(--wd-shadow-sm);
93
- --wd-shadow-dropdown: var(--wd-shadow-lg);
94
- --wd-shadow-modal: var(--wd-shadow-xl);
95
-
96
- /* ─── Radius (semantic) ─── */
97
- --wd-radius-btn: var(--wd-radius-md);
98
- --wd-radius-input: var(--wd-radius-md);
99
- --wd-radius-card: var(--wd-radius-lg);
100
- --wd-radius-badge: var(--wd-radius-full);
101
- --wd-radius-dialog: var(--wd-radius-xl);
102
-
103
- /* ─── Spacing (semantic) ─── */
104
- --wd-spacing-component-xs: var(--wd-space-2);
105
- --wd-spacing-component-sm: var(--wd-space-3);
106
- --wd-spacing-component-md: var(--wd-space-4);
107
- --wd-spacing-component-lg: var(--wd-space-6);
108
- --wd-spacing-layout-sm: var(--wd-space-6);
109
- --wd-spacing-layout-md: var(--wd-space-8);
110
- --wd-spacing-layout-lg: var(--wd-space-12);
111
-
112
- /* ─── Sidebar ─── */
113
- --wd-sidebar-width: 240px;
114
- --wd-sidebar-collapsed-width: 64px;
115
- --wd-topbar-height: 60px;
116
- }
package/dist/tokens/storefront-schemes.css DELETED
@@ -1,96 +0,0 @@
1
- /**
2
- * @webdevarif/dashui — Storefront Color Schemes (Layer 3)
3
- * For customer website sections/blocks.
4
- * Each section gets class="color-scheme-N"
5
- * Store brand color overrides --wd-scheme-brand via JS/API.
6
- */
7
-
8
- /* Scheme 1 — Light (default) */
9
- :root,
10
- .color-scheme-1 {
11
- --wd-scheme-bg: #FFFFFF;
12
- --wd-scheme-bg-rgb: 255 255 255;
13
- --wd-scheme-surface: #F9FAFB;
14
- --wd-scheme-text: #111827;
15
- --wd-scheme-text-rgb: 17 24 39;
16
- --wd-scheme-muted: #6B7280;
17
- --wd-scheme-heading: #030712;
18
- --wd-scheme-border: #E5E7EB;
19
- --wd-scheme-shadow: rgba(0,0,0,0.1);
20
-
21
- /* Brand — injected by store theme API */
22
- --wd-scheme-brand: #6366F1;
23
- --wd-scheme-brand-hover: #4F46E5;
24
- --wd-scheme-brand-text: #FFFFFF;
25
-
26
- /* Buttons */
27
- --wd-scheme-btn-primary-bg: var(--wd-scheme-brand);
28
- --wd-scheme-btn-primary-bg-hover: var(--wd-scheme-brand-hover);
29
- --wd-scheme-btn-primary-text: var(--wd-scheme-brand-text);
30
- --wd-scheme-btn-primary-border: var(--wd-scheme-brand);
31
-
32
- --wd-scheme-btn-secondary-bg: transparent;
33
- --wd-scheme-btn-secondary-bg-hover: #F9FAFB;
34
- --wd-scheme-btn-secondary-text: #111827;
35
- --wd-scheme-btn-secondary-border: #111827;
36
-
37
- /* Input */
38
- --wd-scheme-input-bg: #FFFFFF;
39
- --wd-scheme-input-text: #111827;
40
- --wd-scheme-input-border: #D1D5DB;
41
- }
42
-
43
- /* Scheme 2 — Dark */
44
- .color-scheme-2 {
45
- --wd-scheme-bg: #0A0A0A;
46
- --wd-scheme-bg-rgb: 10 10 10;
47
- --wd-scheme-surface: #141414;
48
- --wd-scheme-text: #F9FAFB;
49
- --wd-scheme-text-rgb: 249 250 251;
50
- --wd-scheme-muted: #9CA3AF;
51
- --wd-scheme-heading: #FFFFFF;
52
- --wd-scheme-border: #262626;
53
- --wd-scheme-shadow: rgba(0,0,0,0.5);
54
-
55
- --wd-scheme-btn-secondary-bg: transparent;
56
- --wd-scheme-btn-secondary-bg-hover: rgba(255,255,255,0.08);
57
- --wd-scheme-btn-secondary-text: #F9FAFB;
58
- --wd-scheme-btn-secondary-border: rgba(255,255,255,0.3);
59
-
60
- --wd-scheme-input-bg: #1A1A1A;
61
- --wd-scheme-input-text: #F9FAFB;
62
- --wd-scheme-input-border: #333333;
63
- }
64
-
65
- /* Scheme 3 — Brand/Accent Fill */
66
- .color-scheme-3 {
67
- --wd-scheme-bg: var(--wd-scheme-brand);
68
- --wd-scheme-surface: var(--wd-scheme-brand-hover);
69
- --wd-scheme-text: rgba(255,255,255,0.95);
70
- --wd-scheme-muted: rgba(255,255,255,0.70);
71
- --wd-scheme-heading: #FFFFFF;
72
- --wd-scheme-border: rgba(255,255,255,0.20);
73
-
74
- --wd-scheme-btn-primary-bg: #FFFFFF;
75
- --wd-scheme-btn-primary-bg-hover: #F0F0F0;
76
- --wd-scheme-btn-primary-text: var(--wd-scheme-brand);
77
- --wd-scheme-btn-primary-border: #FFFFFF;
78
-
79
- --wd-scheme-btn-secondary-bg: transparent;
80
- --wd-scheme-btn-secondary-bg-hover: rgba(255,255,255,0.15);
81
- --wd-scheme-btn-secondary-text: #FFFFFF;
82
- --wd-scheme-btn-secondary-border: rgba(255,255,255,0.5);
83
- }
84
-
85
- /* Scheme 4 — Soft/Tinted */
86
- .color-scheme-4 {
87
- --wd-scheme-bg: #F5F3FF;
88
- --wd-scheme-surface: #EDE9FE;
89
- --wd-scheme-text: #1E1B4B;
90
- --wd-scheme-muted: #6D28D9;
91
- --wd-scheme-heading: #0F0D2E;
92
- --wd-scheme-border: #DDD6FE;
93
- }
94
-
95
- /* Scheme 5–16: Reserved for user-defined schemes */
96
- /* Generated dynamically via API: GET /api/theme/{storeId}/styles.css */