@camtomlabs/malix-design-system 0.1.2

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 (56) hide show
  1. package/LICENSE +7 -0
  2. package/README.md +38 -0
  3. package/package.json +49 -0
  4. package/src/components/Accordion.tsx +52 -0
  5. package/src/components/Avatar.tsx +18 -0
  6. package/src/components/Badge.tsx +27 -0
  7. package/src/components/Banner.tsx +75 -0
  8. package/src/components/Breadcrumb.tsx +58 -0
  9. package/src/components/Button.tsx +47 -0
  10. package/src/components/Card.tsx +34 -0
  11. package/src/components/ChatInput.tsx +53 -0
  12. package/src/components/Checkbox.tsx +85 -0
  13. package/src/components/CreditsIndicator.tsx +41 -0
  14. package/src/components/DataTable.tsx +75 -0
  15. package/src/components/DateInput.tsx +57 -0
  16. package/src/components/Divider.tsx +12 -0
  17. package/src/components/Dropzone.tsx +94 -0
  18. package/src/components/EmptyState.tsx +65 -0
  19. package/src/components/FileCard.tsx +78 -0
  20. package/src/components/FilterTabs.tsx +49 -0
  21. package/src/components/FlyoutMenu.tsx +36 -0
  22. package/src/components/GlassPopover.tsx +38 -0
  23. package/src/components/Header.tsx +22 -0
  24. package/src/components/Input.tsx +18 -0
  25. package/src/components/InputGroup.tsx +37 -0
  26. package/src/components/LanguageSelector.tsx +81 -0
  27. package/src/components/Modal.tsx +104 -0
  28. package/src/components/OnboardingPopover.tsx +61 -0
  29. package/src/components/OperationStatus.tsx +73 -0
  30. package/src/components/Overlay.tsx +66 -0
  31. package/src/components/Pagination.tsx +89 -0
  32. package/src/components/Pill.tsx +19 -0
  33. package/src/components/PricingCard.tsx +74 -0
  34. package/src/components/ProgressBar.tsx +47 -0
  35. package/src/components/Radio.tsx +56 -0
  36. package/src/components/SectionHeader.tsx +32 -0
  37. package/src/components/SegmentedControl.tsx +42 -0
  38. package/src/components/Select.tsx +62 -0
  39. package/src/components/SelectGroup.tsx +32 -0
  40. package/src/components/SelectionCard.tsx +47 -0
  41. package/src/components/SidebarItem.tsx +27 -0
  42. package/src/components/SidebarPanel.tsx +84 -0
  43. package/src/components/SplitPane.tsx +85 -0
  44. package/src/components/StatCard.tsx +64 -0
  45. package/src/components/StatusDot.tsx +26 -0
  46. package/src/components/Stepper.tsx +40 -0
  47. package/src/components/TabBar.tsx +45 -0
  48. package/src/components/Textarea.tsx +43 -0
  49. package/src/components/Toggle.tsx +50 -0
  50. package/src/components/Tooltip.tsx +33 -0
  51. package/src/components/UserProfilePopover.tsx +100 -0
  52. package/src/components/ValidationAlert.tsx +72 -0
  53. package/src/index.ts +177 -0
  54. package/src/styles.css +3237 -0
  55. package/src/tokens.css +165 -0
  56. package/src/tokens.registry.json +75 -0
package/src/tokens.css ADDED
@@ -0,0 +1,165 @@
1
+ :root {
2
+ /* ── Backgrounds ────────────────────────────── */
3
+ --malix-background-main: #ffffff;
4
+ --malix-surface: #ffffff;
5
+ --malix-surface-secondary: #f9fafb;
6
+ --malix-surface-hover: #f3f4f6;
7
+
8
+ /* ── Foreground / text ─────────────────────── */
9
+ --malix-foreground: #111827;
10
+ --malix-foreground-secondary: #6b7280;
11
+ --malix-foreground-tertiary: #9ca3af;
12
+ --malix-foreground-disabled: #d1d5db;
13
+
14
+ /* ── Borders ───────────────────────────────── */
15
+ --malix-border: #e5e7eb;
16
+ --malix-border-strong: #d1d5db;
17
+ --malix-border-focus: #004a7c;
18
+ --malix-overlay: #00000066;
19
+
20
+ /* ── Primary CTA ───────────────────────────── */
21
+ --malix-cta-primary-bg: #004a7c;
22
+ --malix-primary-hover: #003a63;
23
+ --malix-primary-active: #002e4f;
24
+ --malix-primary-foreground: #ffffff;
25
+ --malix-primary-light: #e6f0f7;
26
+
27
+ /* ── Semantic colors ───────────────────────── */
28
+ --malix-success: #059669;
29
+ --malix-success-light: #ecfdf5;
30
+ --malix-success-foreground: #065f46;
31
+
32
+ --malix-warning: #d97706;
33
+ --malix-warning-light: #fffbeb;
34
+ --malix-warning-foreground: #92400e;
35
+
36
+ --malix-error: #dc2626;
37
+ --malix-error-light: #fef2f2;
38
+ --malix-error-foreground: #991b1b;
39
+
40
+ --malix-info: #2563eb;
41
+ --malix-info-light: #eff6ff;
42
+ --malix-info-foreground: #1e40af;
43
+
44
+ /* ── Glass / morphism ──────────────────────── */
45
+ --malix-glass-bg: #f3f3f3b3;
46
+ --malix-glass-border: #ffffff66;
47
+ --malix-glass-blur: 20px;
48
+
49
+ /* ── Sidebar ───────────────────────────────── */
50
+ --malix-sidebar-bg: #fbfbfb;
51
+ --malix-sidebar-hover-bg: #fbfbfb;
52
+ --malix-sidebar-active-bg: #e6f0f7;
53
+
54
+ /* ── Spacing ───────────────────────────────── */
55
+ --malix-space-xs: 4px;
56
+ --malix-space-sm: 8px;
57
+ --malix-space-md: 12px;
58
+ --malix-space-lg: 16px;
59
+ --malix-space-xl: 24px;
60
+ --malix-space-2xl: 32px;
61
+ --malix-space-3xl: 48px;
62
+
63
+ /* ── Radii ─────────────────────────────────── */
64
+ --malix-radius-sm: 4px;
65
+ --malix-radius-md: 8px;
66
+ --malix-radius-lg: 12px;
67
+ --malix-radius-xl: 16px;
68
+ --malix-radius-pill: 9999px;
69
+
70
+ /* ── Typography ────────────────────────────── */
71
+ --malix-text-xs: 12px;
72
+ --malix-text-sm: 13px;
73
+ --malix-text-base: 14px;
74
+ --malix-text-lg: 16px;
75
+ --malix-text-xl: 20px;
76
+ --malix-text-2xl: 24px;
77
+
78
+ --malix-font-body: Inter, sans-serif;
79
+ --malix-font-heading: Inter, sans-serif;
80
+
81
+ --malix-weight-normal: 400;
82
+ --malix-weight-medium: 500;
83
+ --malix-weight-semibold: 600;
84
+ --malix-weight-bold: 700;
85
+
86
+ /* ── Shadows (matching Pencil elevation levels) */
87
+ --malix-shadow-btn-primary: 0 1px 2px #00000015, 0 2px 4px #004a7c40;
88
+ --malix-shadow-btn-secondary: 0 4px 4px #b8b8b84d;
89
+ --malix-shadow-input: 0 1px 2px #0000000a;
90
+ --malix-shadow-depth: 0 4px 12px color-mix(in srgb, var(--malix-foreground) 12%, transparent);
91
+ --malix-shadow-card-l1: 0 1px 3px #0000000f, 0 1px 2px #0000000a;
92
+ --malix-shadow-card-l2: 0 4px 6px -1px #0000001a, 0 2px 4px -2px #0000000f;
93
+ --malix-shadow-card-l3: 0 10px 15px -3px #0000001a, 0 4px 6px -4px #0000000f;
94
+ --malix-shadow-overlay: 0 10px 25px #0000001a;
95
+ --malix-shadow-tooltip: 0 4px 8px #00000026;
96
+ --malix-shadow-sidebar: 1px 0 3px #0000000a;
97
+ --malix-shadow-header: 0 1px 3px #0000000a;
98
+ }
99
+
100
+ /* ── Dark Mode ───────────────────────────────── */
101
+ .dark, [data-theme="dark"] {
102
+ /* ── Backgrounds ────────────────────────────── */
103
+ --malix-background-main: #010510;
104
+ --malix-surface: #000413;
105
+ --malix-surface-secondary: #1c232d;
106
+ --malix-surface-hover: #475569;
107
+
108
+ /* ── Foreground / text ─────────────────────── */
109
+ --malix-foreground: #F9FAFB;
110
+ --malix-foreground-secondary: #dfdfdf;
111
+ --malix-foreground-tertiary: #6B7280;
112
+ --malix-foreground-disabled: #475569;
113
+
114
+ /* ── Borders ───────────────────────────────── */
115
+ --malix-border: #334155;
116
+ --malix-border-strong: #475569;
117
+ --malix-border-focus: #60A5FA;
118
+ --malix-overlay: #00000099;
119
+
120
+ /* ── Primary CTA ───────────────────────────── */
121
+ --malix-cta-primary-bg: #005ce8;
122
+ --malix-primary-hover: #0351cf;
123
+ --malix-primary-active: #1037a3;
124
+ --malix-primary-foreground: #FFFFFF;
125
+ --malix-primary-light: #082b59;
126
+
127
+ /* ── Semantic colors ───────────────────────── */
128
+ --malix-success: #34D399;
129
+ --malix-success-light: #064E3B;
130
+ --malix-success-foreground: #6EE7B7;
131
+
132
+ --malix-warning: #ffb700;
133
+ --malix-warning-light: #441b02;
134
+ --malix-warning-foreground: #ffcf57;
135
+
136
+ --malix-error: #ff9595;
137
+ --malix-error-light: #7F1D1D;
138
+ --malix-error-foreground: #ff9d9d;
139
+
140
+ --malix-info: #47a8ff;
141
+ --malix-info-light: #1E3A5F;
142
+ --malix-info-foreground: #93C5FD;
143
+
144
+ /* ── Glass / morphism ──────────────────────── */
145
+ --malix-glass-bg: #1E293BCC;
146
+ --malix-glass-border: #47556966;
147
+
148
+ /* ── Sidebar ───────────────────────────────── */
149
+ --malix-sidebar-bg: #010510;
150
+ --malix-sidebar-hover-bg: #1e2632;
151
+ --malix-sidebar-active-bg: #1c232d;
152
+
153
+ /* ── Shadows (dark mode) ───────────────────── */
154
+ --malix-shadow-btn-primary: 0 1px 2px #00000025, 0 2px 4px #60A5FA40;
155
+ --malix-shadow-btn-secondary: 0 4px 4px #0000004d;
156
+ --malix-shadow-input: 0 1px 2px #00000020;
157
+ --malix-shadow-depth: 0 4px 12px #00000040;
158
+ --malix-shadow-card-l1: 0 1px 3px #0000002a, 0 1px 2px #00000020;
159
+ --malix-shadow-card-l2: 0 4px 6px -1px #00000033, 0 2px 4px -2px #00000025;
160
+ --malix-shadow-card-l3: 0 10px 15px -3px #00000040, 0 4px 6px -4px #00000030;
161
+ --malix-shadow-overlay: 0 10px 25px #00000040;
162
+ --malix-shadow-tooltip: 0 4px 8px #00000040;
163
+ --malix-shadow-sidebar: 1px 0 3px #00000020;
164
+ --malix-shadow-header: 0 1px 3px #00000020;
165
+ }
package/src/tokens.registry.json ADDED
@@ -0,0 +1,75 @@
1
+ {
2
+ "version": 1,
3
+ "tokens": [
4
+ "--malix-background-main",
5
+ "--malix-surface",
6
+ "--malix-surface-secondary",
7
+ "--malix-surface-hover",
8
+ "--malix-foreground",
9
+ "--malix-foreground-secondary",
10
+ "--malix-foreground-tertiary",
11
+ "--malix-foreground-disabled",
12
+ "--malix-border",
13
+ "--malix-border-strong",
14
+ "--malix-border-focus",
15
+ "--malix-overlay",
16
+ "--malix-cta-primary-bg",
17
+ "--malix-primary-hover",
18
+ "--malix-primary-active",
19
+ "--malix-primary-foreground",
20
+ "--malix-primary-light",
21
+ "--malix-success",
22
+ "--malix-success-light",
23
+ "--malix-success-foreground",
24
+ "--malix-warning",
25
+ "--malix-warning-light",
26
+ "--malix-warning-foreground",
27
+ "--malix-error",
28
+ "--malix-error-light",
29
+ "--malix-error-foreground",
30
+ "--malix-info",
31
+ "--malix-info-light",
32
+ "--malix-info-foreground",
33
+ "--malix-glass-bg",
34
+ "--malix-glass-border",
35
+ "--malix-glass-blur",
36
+ "--malix-sidebar-bg",
37
+ "--malix-sidebar-hover-bg",
38
+ "--malix-sidebar-active-bg",
39
+ "--malix-space-xs",
40
+ "--malix-space-sm",
41
+ "--malix-space-md",
42
+ "--malix-space-lg",
43
+ "--malix-space-xl",
44
+ "--malix-space-2xl",
45
+ "--malix-space-3xl",
46
+ "--malix-radius-sm",
47
+ "--malix-radius-md",
48
+ "--malix-radius-lg",
49
+ "--malix-radius-xl",
50
+ "--malix-radius-pill",
51
+ "--malix-text-xs",
52
+ "--malix-text-sm",
53
+ "--malix-text-base",
54
+ "--malix-text-lg",
55
+ "--malix-text-xl",
56
+ "--malix-text-2xl",
57
+ "--malix-font-body",
58
+ "--malix-font-heading",
59
+ "--malix-weight-normal",
60
+ "--malix-weight-medium",
61
+ "--malix-weight-semibold",
62
+ "--malix-weight-bold",
63
+ "--malix-shadow-btn-primary",
64
+ "--malix-shadow-btn-secondary",
65
+ "--malix-shadow-input",
66
+ "--malix-shadow-depth",
67
+ "--malix-shadow-card-l1",
68
+ "--malix-shadow-card-l2",
69
+ "--malix-shadow-card-l3",
70
+ "--malix-shadow-overlay",
71
+ "--malix-shadow-tooltip",
72
+ "--malix-shadow-sidebar",
73
+ "--malix-shadow-header"
74
+ ]
75
+ }