@sabrenski/spire-ui 0.0.1

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 (237) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +233 -0
  3. package/dist/index.d.ts +4981 -0
  4. package/dist/spire-ui.css +1 -0
  5. package/dist/spire-ui.es.js +18403 -0
  6. package/dist/spire-ui.umd.js +45 -0
  7. package/package.json +83 -0
  8. package/src/components/Accordion/Accordion.test.ts +218 -0
  9. package/src/components/Accordion/AccordionContent.vue +112 -0
  10. package/src/components/Accordion/AccordionItem.vue +87 -0
  11. package/src/components/Accordion/AccordionRoot.vue +111 -0
  12. package/src/components/Accordion/AccordionTrigger.vue +125 -0
  13. package/src/components/Accordion/index.ts +11 -0
  14. package/src/components/Accordion/keys.ts +23 -0
  15. package/src/components/Avatar/Avatar.test.ts +181 -0
  16. package/src/components/Avatar/Avatar.vue +150 -0
  17. package/src/components/Avatar/index.ts +2 -0
  18. package/src/components/Badge/Badge.test.ts +141 -0
  19. package/src/components/Badge/Badge.vue +133 -0
  20. package/src/components/Badge/index.ts +2 -0
  21. package/src/components/BadgeContainer/BadgeContainer.test.ts +150 -0
  22. package/src/components/BadgeContainer/BadgeContainer.vue +90 -0
  23. package/src/components/BadgeContainer/index.ts +2 -0
  24. package/src/components/Breadcrumb/Breadcrumb.test.ts +342 -0
  25. package/src/components/Breadcrumb/BreadcrumbEllipsis.vue +96 -0
  26. package/src/components/Breadcrumb/BreadcrumbItem.vue +16 -0
  27. package/src/components/Breadcrumb/BreadcrumbLink.vue +67 -0
  28. package/src/components/Breadcrumb/BreadcrumbList.vue +20 -0
  29. package/src/components/Breadcrumb/BreadcrumbPage.vue +25 -0
  30. package/src/components/Breadcrumb/BreadcrumbRoot.vue +41 -0
  31. package/src/components/Breadcrumb/BreadcrumbSeparator.vue +63 -0
  32. package/src/components/Breadcrumb/index.ts +13 -0
  33. package/src/components/Breadcrumb/keys.ts +7 -0
  34. package/src/components/Button/Button.test.ts +231 -0
  35. package/src/components/Button/Button.vue +349 -0
  36. package/src/components/Button/index.ts +2 -0
  37. package/src/components/Callout/Callout.test.ts +260 -0
  38. package/src/components/Callout/Callout.vue +341 -0
  39. package/src/components/Callout/index.ts +2 -0
  40. package/src/components/Card/Card.test.ts +565 -0
  41. package/src/components/Card/Card.vue +209 -0
  42. package/src/components/Card/CardContent.vue +57 -0
  43. package/src/components/Card/CardFooter.vue +72 -0
  44. package/src/components/Card/CardHeader.vue +111 -0
  45. package/src/components/Card/CardImage.vue +124 -0
  46. package/src/components/Card/index.ts +14 -0
  47. package/src/components/Chart/BarChart.vue +208 -0
  48. package/src/components/Chart/BaseChart.vue +444 -0
  49. package/src/components/Chart/Chart.test.ts +359 -0
  50. package/src/components/Chart/DonutChart.vue +283 -0
  51. package/src/components/Chart/LineChart.vue +211 -0
  52. package/src/components/Chart/index.ts +20 -0
  53. package/src/components/Chart/useChartTheme.ts +192 -0
  54. package/src/components/Checkbox/Checkbox.test.ts +209 -0
  55. package/src/components/Checkbox/Checkbox.vue +285 -0
  56. package/src/components/Checkbox/index.ts +2 -0
  57. package/src/components/ChoiceChip/ChoiceChip.test.ts +142 -0
  58. package/src/components/ChoiceChip/ChoiceChip.vue +218 -0
  59. package/src/components/ChoiceChip/index.ts +2 -0
  60. package/src/components/ChoiceChipGroup/ChoiceChipGroup.test.ts +151 -0
  61. package/src/components/ChoiceChipGroup/ChoiceChipGroup.vue +70 -0
  62. package/src/components/ChoiceChipGroup/index.ts +2 -0
  63. package/src/components/ColorPicker/ColorArea.vue +159 -0
  64. package/src/components/ColorPicker/ColorPicker.test.ts +250 -0
  65. package/src/components/ColorPicker/ColorPicker.vue +339 -0
  66. package/src/components/ColorPicker/ColorSlider.vue +191 -0
  67. package/src/components/ColorPicker/index.ts +7 -0
  68. package/src/components/Combobox/Combobox.test.ts +891 -0
  69. package/src/components/Combobox/Combobox.vue +934 -0
  70. package/src/components/Combobox/index.ts +2 -0
  71. package/src/components/DataTable/DataTable.test.ts +1221 -0
  72. package/src/components/DataTable/DataTable.vue +1415 -0
  73. package/src/components/DataTable/index.ts +10 -0
  74. package/src/components/DatePicker/DatePicker.test.ts +625 -0
  75. package/src/components/DatePicker/DatePicker.vue +1586 -0
  76. package/src/components/DatePicker/index.ts +2 -0
  77. package/src/components/Drawer/Drawer.test.ts +336 -0
  78. package/src/components/Drawer/Drawer.vue +466 -0
  79. package/src/components/Drawer/index.ts +2 -0
  80. package/src/components/Dropdown/Dropdown.test.ts +607 -0
  81. package/src/components/Dropdown/Dropdown.vue +807 -0
  82. package/src/components/Dropdown/DropdownItem.vue +227 -0
  83. package/src/components/Dropdown/DropdownSeparator.vue +14 -0
  84. package/src/components/Dropdown/DropdownSub.vue +104 -0
  85. package/src/components/Dropdown/DropdownSubContent.vue +187 -0
  86. package/src/components/Dropdown/DropdownSubTrigger.vue +151 -0
  87. package/src/components/Dropdown/index.ts +14 -0
  88. package/src/components/EmptyState/EmptyState.test.ts +180 -0
  89. package/src/components/EmptyState/EmptyState.vue +137 -0
  90. package/src/components/EmptyState/index.ts +2 -0
  91. package/src/components/FileUpload/FileUpload.test.ts +1151 -0
  92. package/src/components/FileUpload/FileUpload.vue +1042 -0
  93. package/src/components/FileUpload/index.ts +2 -0
  94. package/src/components/Heading/Heading.test.ts +107 -0
  95. package/src/components/Heading/Heading.vue +67 -0
  96. package/src/components/Heading/index.ts +2 -0
  97. package/src/components/Icon/Icon.test.ts +157 -0
  98. package/src/components/Icon/Icon.vue +86 -0
  99. package/src/components/Icon/index.ts +2 -0
  100. package/src/components/Input/Input.test.ts +273 -0
  101. package/src/components/Input/Input.vue +388 -0
  102. package/src/components/Input/index.ts +2 -0
  103. package/src/components/Layout/Container.vue +67 -0
  104. package/src/components/Layout/Grid.vue +159 -0
  105. package/src/components/Layout/GridItem.vue +154 -0
  106. package/src/components/Layout/Layout.test.ts +202 -0
  107. package/src/components/Layout/Stack.vue +128 -0
  108. package/src/components/Layout/index.ts +9 -0
  109. package/src/components/Layout/keys.ts +7 -0
  110. package/src/components/Modal/Modal.test.ts +311 -0
  111. package/src/components/Modal/Modal.vue +336 -0
  112. package/src/components/Modal/index.ts +2 -0
  113. package/src/components/Pagination/Pagination.test.ts +303 -0
  114. package/src/components/Pagination/Pagination.vue +212 -0
  115. package/src/components/Pagination/index.ts +3 -0
  116. package/src/components/Pagination/utils.ts +86 -0
  117. package/src/components/Popover/Popover.test.ts +285 -0
  118. package/src/components/Popover/Popover.vue +441 -0
  119. package/src/components/Popover/index.ts +2 -0
  120. package/src/components/Progress/Progress.test.ts +361 -0
  121. package/src/components/Progress/Progress.vue +363 -0
  122. package/src/components/Progress/index.ts +7 -0
  123. package/src/components/Radio/Radio.test.ts +216 -0
  124. package/src/components/Radio/Radio.vue +214 -0
  125. package/src/components/Radio/index.ts +2 -0
  126. package/src/components/Rating/Rating.test.ts +319 -0
  127. package/src/components/Rating/Rating.vue +247 -0
  128. package/src/components/Rating/index.ts +2 -0
  129. package/src/components/SegmentedControl/SegmentedControl.test.ts +292 -0
  130. package/src/components/SegmentedControl/SegmentedControl.vue +288 -0
  131. package/src/components/SegmentedControl/index.ts +2 -0
  132. package/src/components/Select/Select.test.ts +589 -0
  133. package/src/components/Select/Select.vue +666 -0
  134. package/src/components/Select/index.ts +2 -0
  135. package/src/components/Sidebar/Sidebar.test.ts +301 -0
  136. package/src/components/Sidebar/SidebarGroup.vue +103 -0
  137. package/src/components/Sidebar/SidebarItem.vue +196 -0
  138. package/src/components/Sidebar/SidebarLayout.vue +42 -0
  139. package/src/components/Sidebar/SidebarRoot.vue +122 -0
  140. package/src/components/Sidebar/index.ts +11 -0
  141. package/src/components/Sidebar/keys.ts +14 -0
  142. package/src/components/Skeleton/Skeleton.test.ts +130 -0
  143. package/src/components/Skeleton/Skeleton.vue +104 -0
  144. package/src/components/Skeleton/index.ts +2 -0
  145. package/src/components/Slider/Slider.test.ts +416 -0
  146. package/src/components/Slider/Slider.vue +435 -0
  147. package/src/components/Slider/index.ts +2 -0
  148. package/src/components/Slider/utils.ts +91 -0
  149. package/src/components/Spinner/Spinner.test.ts +79 -0
  150. package/src/components/Spinner/Spinner.vue +159 -0
  151. package/src/components/Spinner/index.ts +2 -0
  152. package/src/components/SpireProvider/SpireProvider.vue +71 -0
  153. package/src/components/SpireProvider/index.ts +11 -0
  154. package/src/components/Stepper/Stepper.test.ts +221 -0
  155. package/src/components/Stepper/StepperContent.vue +51 -0
  156. package/src/components/Stepper/StepperItem.vue +89 -0
  157. package/src/components/Stepper/StepperRoot.vue +101 -0
  158. package/src/components/Stepper/StepperSeparator.vue +52 -0
  159. package/src/components/Stepper/StepperTrigger.vue +144 -0
  160. package/src/components/Stepper/index.ts +11 -0
  161. package/src/components/Stepper/keys.ts +27 -0
  162. package/src/components/Switch/Switch.test.ts +214 -0
  163. package/src/components/Switch/Switch.vue +235 -0
  164. package/src/components/Switch/index.ts +2 -0
  165. package/src/components/Tabs/Tabs.test.ts +363 -0
  166. package/src/components/Tabs/Tabs.vue +318 -0
  167. package/src/components/Tabs/index.ts +2 -0
  168. package/src/components/Text/Text.test.ts +154 -0
  169. package/src/components/Text/Text.vue +100 -0
  170. package/src/components/Text/index.ts +2 -0
  171. package/src/components/Textarea/Textarea.test.ts +432 -0
  172. package/src/components/Textarea/Textarea.vue +411 -0
  173. package/src/components/Textarea/index.ts +2 -0
  174. package/src/components/TimePicker/TimePicker.test.ts +352 -0
  175. package/src/components/TimePicker/TimePicker.vue +569 -0
  176. package/src/components/TimePicker/index.ts +2 -0
  177. package/src/components/Timeline/Timeline.test.ts +193 -0
  178. package/src/components/Timeline/Timeline.vue +111 -0
  179. package/src/components/Timeline/TimelineItem.vue +167 -0
  180. package/src/components/Timeline/index.ts +13 -0
  181. package/src/components/Timeline/keys.ts +21 -0
  182. package/src/components/Toast/ToastItem.test.ts +289 -0
  183. package/src/components/Toast/ToastItem.vue +370 -0
  184. package/src/components/Toast/ToastProvider.test.ts +158 -0
  185. package/src/components/Toast/ToastProvider.vue +181 -0
  186. package/src/components/Toast/index.ts +83 -0
  187. package/src/components/Toast/toastState.test.ts +165 -0
  188. package/src/components/Toast/toastState.ts +161 -0
  189. package/src/components/ToggleButton/ToggleButton.test.ts +166 -0
  190. package/src/components/ToggleButton/ToggleButton.vue +197 -0
  191. package/src/components/ToggleButton/index.ts +2 -0
  192. package/src/components/ToggleGroup/ToggleGroup.test.ts +181 -0
  193. package/src/components/ToggleGroup/ToggleGroup.vue +130 -0
  194. package/src/components/ToggleGroup/index.ts +2 -0
  195. package/src/components/Tooltip/Tooltip.test.ts +238 -0
  196. package/src/components/Tooltip/Tooltip.vue +217 -0
  197. package/src/components/Tooltip/index.ts +2 -0
  198. package/src/components/TreeView/TreeView.test.ts +357 -0
  199. package/src/components/TreeView/TreeView.vue +251 -0
  200. package/src/components/TreeView/TreeViewItem.vue +288 -0
  201. package/src/components/TreeView/index.ts +11 -0
  202. package/src/components/TreeView/keys.ts +35 -0
  203. package/src/composables/index.ts +12 -0
  204. package/src/composables/useClickOutside.ts +36 -0
  205. package/src/composables/useClipboard.ts +35 -0
  206. package/src/composables/useEventListener.ts +48 -0
  207. package/src/composables/useFocusTrap.ts +58 -0
  208. package/src/composables/useHoverReveal.ts +98 -0
  209. package/src/composables/useId.ts +10 -0
  210. package/src/composables/useMagnetic.ts +171 -0
  211. package/src/composables/useRelativePosition.ts +127 -0
  212. package/src/composables/useRipple.ts +146 -0
  213. package/src/composables/useScrollLock.ts +25 -0
  214. package/src/composables/useSpireConfig.ts +27 -0
  215. package/src/composables/useStagger.ts +224 -0
  216. package/src/config/icons.test.ts +115 -0
  217. package/src/config/icons.ts +170 -0
  218. package/src/index.ts +361 -0
  219. package/src/styles/depth.css +129 -0
  220. package/src/styles/effects.css +169 -0
  221. package/src/styles/fallback.css +152 -0
  222. package/src/styles/main.css +25 -0
  223. package/src/styles/mood.css +211 -0
  224. package/src/styles/motion.css +159 -0
  225. package/src/styles/reset.css +97 -0
  226. package/src/styles/theme.css +708 -0
  227. package/src/styles/tokens.css +183 -0
  228. package/src/utils/.gitkeep +0 -0
  229. package/src/utils/color.ts +277 -0
  230. package/src/utils/date.test.ts +522 -0
  231. package/src/utils/date.ts +380 -0
  232. package/src/utils/index.ts +23 -0
  233. package/src/utils/object.test.ts +80 -0
  234. package/src/utils/object.ts +25 -0
  235. package/src/utils/string.test.ts +64 -0
  236. package/src/utils/string.ts +32 -0
  237. package/src/utils/time.ts +156 -0
package/src/styles/depth.css ADDED
@@ -0,0 +1,129 @@
1
+ /**
2
+ * Depth System - Dimensionality Configuration
3
+ *
4
+ * Controls shadow intensity, spread, and highlight opacity via data-depth attribute.
5
+ * All depths are opt-in; default behavior (elevated) requires no attribute.
6
+ *
7
+ * Usage:
8
+ * <html data-depth="dimensional">
9
+ * <div data-depth="flat">...</div>
10
+ */
11
+
12
+ :root {
13
+ --depth-shadow-opacity: 0.1;
14
+ --depth-shadow-spread: 1;
15
+ --depth-highlight-opacity: 0.12;
16
+ --depth-inset-opacity: 0.06;
17
+ --depth-shadow-color: 0 0 0;
18
+ --depth-highlight-color: 1 0 0;
19
+ }
20
+
21
+ /**
22
+ * Flat
23
+ * Minimal, shadcn-like appearance with no shadows or highlights.
24
+ */
25
+ [data-depth='flat'] {
26
+ --depth-shadow-opacity: 0;
27
+ --depth-shadow-spread: 0;
28
+ --depth-highlight-opacity: 0;
29
+ --depth-inset-opacity: 0;
30
+
31
+ --shadow-sm: none;
32
+ --shadow-md: none;
33
+ --shadow-lg: none;
34
+ --shadow-xl: none;
35
+ --shadow-2xl: none;
36
+
37
+ /* Component tokens - resolved in depth context */
38
+ --card-shadow: var(--shadow-md);
39
+ --card-shadow-hover: var(--shadow-lg);
40
+ }
41
+
42
+ /**
43
+ * Subtle
44
+ * Soft, understated depth. Gentle shadows and minimal highlights.
45
+ */
46
+ [data-depth='subtle'] {
47
+ --depth-shadow-opacity: 0.03;
48
+ --depth-shadow-spread: 0.8;
49
+ --depth-highlight-opacity: 0.04;
50
+ --depth-inset-opacity: 0.02;
51
+
52
+ --shadow-sm: 0 1px 2px 0 oklch(var(--depth-shadow-color) / 0.02);
53
+ --shadow-md:
54
+ 0 1px 3px -1px oklch(var(--depth-shadow-color) / 0.03),
55
+ 0 1px 2px -1px oklch(var(--depth-shadow-color) / 0.02);
56
+ --shadow-lg:
57
+ 0 3px 6px -2px oklch(var(--depth-shadow-color) / 0.04),
58
+ 0 2px 3px -2px oklch(var(--depth-shadow-color) / 0.02);
59
+ --shadow-xl:
60
+ 0 6px 12px -4px oklch(var(--depth-shadow-color) / 0.04),
61
+ 0 3px 5px -3px oklch(var(--depth-shadow-color) / 0.02);
62
+ --shadow-2xl:
63
+ 0 10px 20px -6px oklch(var(--depth-shadow-color) / 0.05),
64
+ 0 5px 8px -4px oklch(var(--depth-shadow-color) / 0.03);
65
+
66
+ /* Component tokens - resolved in depth context */
67
+ --card-shadow: var(--shadow-md);
68
+ --card-shadow-hover: var(--shadow-lg);
69
+ }
70
+
71
+ /**
72
+ * Elevated (Default)
73
+ * Balanced depth with visible but soft shadows and highlights.
74
+ */
75
+ [data-depth='elevated'] {
76
+ --depth-shadow-opacity: 0.05;
77
+ --depth-shadow-spread: 1;
78
+ --depth-highlight-opacity: 0.08;
79
+ --depth-inset-opacity: 0.04;
80
+
81
+ --shadow-sm: 0 1px 2px 0 oklch(var(--depth-shadow-color) / 0.03);
82
+ --shadow-md:
83
+ 0 2px 4px -1px oklch(var(--depth-shadow-color) / 0.05),
84
+ 0 1px 2px -1px oklch(var(--depth-shadow-color) / 0.03);
85
+ --shadow-lg:
86
+ 0 4px 8px -2px oklch(var(--depth-shadow-color) / 0.06),
87
+ 0 2px 4px -2px oklch(var(--depth-shadow-color) / 0.03);
88
+ --shadow-xl:
89
+ 0 10px 18px -5px oklch(var(--depth-shadow-color) / 0.07),
90
+ 0 4px 8px -4px oklch(var(--depth-shadow-color) / 0.04);
91
+ --shadow-2xl:
92
+ 0 16px 32px -8px oklch(var(--depth-shadow-color) / 0.08),
93
+ 0 8px 12px -6px oklch(var(--depth-shadow-color) / 0.05);
94
+
95
+ /* Component tokens - resolved in depth context */
96
+ --card-shadow: var(--shadow-md);
97
+ --card-shadow-hover: var(--shadow-lg);
98
+ }
99
+
100
+ /**
101
+ * Dimensional
102
+ * Rich, premium feel with more pronounced but still soft shadows.
103
+ */
104
+ [data-depth='dimensional'] {
105
+ --depth-shadow-opacity: 0.08;
106
+ --depth-shadow-spread: 1.3;
107
+ --depth-highlight-opacity: 0.12;
108
+ --depth-inset-opacity: 0.06;
109
+
110
+ --shadow-sm:
111
+ 0 1px 2px 0 oklch(var(--depth-shadow-color) / 0.04),
112
+ 0 1px 3px 0 oklch(var(--depth-shadow-color) / 0.03);
113
+ --shadow-md:
114
+ 0 3px 6px -2px oklch(var(--depth-shadow-color) / 0.07),
115
+ 0 2px 3px -2px oklch(var(--depth-shadow-color) / 0.04);
116
+ --shadow-lg:
117
+ 0 6px 12px -3px oklch(var(--depth-shadow-color) / 0.08),
118
+ 0 3px 5px -3px oklch(var(--depth-shadow-color) / 0.04);
119
+ --shadow-xl:
120
+ 0 14px 24px -6px oklch(var(--depth-shadow-color) / 0.10),
121
+ 0 6px 10px -5px oklch(var(--depth-shadow-color) / 0.05);
122
+ --shadow-2xl:
123
+ 0 24px 48px -12px oklch(var(--depth-shadow-color) / 0.12),
124
+ 0 12px 20px -8px oklch(var(--depth-shadow-color) / 0.07);
125
+
126
+ /* Component tokens - resolved in depth context */
127
+ --card-shadow: var(--shadow-md);
128
+ --card-shadow-hover: var(--shadow-lg);
129
+ }
package/src/styles/effects.css ADDED
@@ -0,0 +1,169 @@
1
+ /**
2
+ * Effects System - Visual Effect Tokens
3
+ *
4
+ * Optional visual effects including inner glow focus, texture overlays,
5
+ * and gradient borders. Effects are opt-in via data-* attributes.
6
+ *
7
+ * Usage:
8
+ * <button data-focus-glow>Soft focus glow</button>
9
+ * <div data-texture="subtle">...</div>
10
+ */
11
+
12
+ :root {
13
+ --effect-focus-glow-color: var(--action-primary, var(--color-indigo-500));
14
+ --effect-focus-glow-opacity: 0.4;
15
+ --effect-focus-glow-spread: 3px;
16
+
17
+ --effect-gradient-border-from: oklch(1 0 0 / 0.1);
18
+ --effect-gradient-border-to: oklch(0 0 0 / 0.05);
19
+
20
+ --effect-texture-opacity: 0.03;
21
+
22
+ --effect-ripple-color: var(--color-white);
23
+ --effect-ripple-opacity: 0.25;
24
+ --effect-ripple-duration: 800ms;
25
+
26
+ --effect-hover-reveal-size: 150px;
27
+ --effect-hover-reveal-opacity: 0.08;
28
+ }
29
+
30
+ /**
31
+ * Focus Glow Effect
32
+ * Soft inner glow instead of standard outline ring.
33
+ * Apply to interactive elements with data-focus-glow attribute.
34
+ */
35
+ [data-focus-glow]:focus-visible {
36
+ outline: none;
37
+ box-shadow: inset 0 0 0 var(--effect-focus-glow-spread)
38
+ oklch(from var(--effect-focus-glow-color) l c h / var(--effect-focus-glow-opacity));
39
+ }
40
+
41
+ /**
42
+ * Texture Overlay
43
+ * Optional noise/grain texture for surfaces.
44
+ */
45
+ [data-texture='subtle']::before {
46
+ content: '';
47
+ position: absolute;
48
+ inset: 0;
49
+ opacity: var(--effect-texture-opacity);
50
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
51
+ pointer-events: none;
52
+ border-radius: inherit;
53
+ mix-blend-mode: overlay;
54
+ }
55
+
56
+ [data-texture='subtle'] {
57
+ position: relative;
58
+ }
59
+
60
+ [data-texture='medium']::before {
61
+ content: '';
62
+ position: absolute;
63
+ inset: 0;
64
+ opacity: calc(var(--effect-texture-opacity) * 2);
65
+ background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
66
+ pointer-events: none;
67
+ border-radius: inherit;
68
+ mix-blend-mode: overlay;
69
+ }
70
+
71
+ [data-texture='medium'] {
72
+ position: relative;
73
+ }
74
+
75
+ /**
76
+ * Gradient Border Utility
77
+ * Creates a subtle light-to-dark gradient border effect.
78
+ * Apply via data-gradient-border attribute.
79
+ */
80
+ [data-gradient-border] {
81
+ position: relative;
82
+ background-clip: padding-box;
83
+ }
84
+
85
+ [data-gradient-border]::before {
86
+ content: '';
87
+ position: absolute;
88
+ inset: 0;
89
+ border-radius: inherit;
90
+ padding: 1px;
91
+ background: linear-gradient(
92
+ to bottom,
93
+ var(--effect-gradient-border-from),
94
+ var(--effect-gradient-border-to)
95
+ );
96
+ mask:
97
+ linear-gradient(#fff 0 0) content-box,
98
+ linear-gradient(#fff 0 0);
99
+ mask-composite: exclude;
100
+ pointer-events: none;
101
+ }
102
+
103
+ /**
104
+ * Ripple Effect Container
105
+ * Provides CSS custom properties for JavaScript ripple effects.
106
+ * Used in conjunction with useRipple composable.
107
+ */
108
+ [data-ripple] {
109
+ position: relative;
110
+ overflow: hidden;
111
+ }
112
+
113
+ [data-ripple] .ui-ripple {
114
+ position: absolute;
115
+ border-radius: 50%;
116
+ background: oklch(from var(--effect-ripple-color) l c h / var(--effect-ripple-opacity));
117
+ transform: scale(0);
118
+ animation: ripple-expand var(--effect-ripple-duration) var(--ease-out) forwards;
119
+ pointer-events: none;
120
+ }
121
+
122
+ @keyframes ripple-expand {
123
+ to {
124
+ transform: scale(4);
125
+ opacity: 0;
126
+ }
127
+ }
128
+
129
+ /**
130
+ * Hover Reveal Gradient
131
+ * Radial gradient spotlight following cursor on interactive elements.
132
+ * Used in conjunction with useHoverReveal composable.
133
+ */
134
+ [data-hover-reveal] {
135
+ position: relative;
136
+ }
137
+
138
+ [data-hover-reveal]::after {
139
+ content: '';
140
+ position: absolute;
141
+ inset: 0;
142
+ border-radius: inherit;
143
+ opacity: 0;
144
+ background: radial-gradient(
145
+ var(--effect-hover-reveal-size) circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
146
+ oklch(1 0 0 / var(--effect-hover-reveal-opacity)),
147
+ transparent 40%
148
+ );
149
+ pointer-events: none;
150
+ transition: opacity var(--duration-fast) var(--ease-default);
151
+ }
152
+
153
+ [data-hover-reveal]:hover::after {
154
+ opacity: 1;
155
+ }
156
+
157
+ /**
158
+ * Dark Theme Effect Adjustments
159
+ */
160
+ [data-theme='dark'] {
161
+ --effect-focus-glow-color: var(--color-indigo-400);
162
+ --effect-focus-glow-opacity: 0.35;
163
+
164
+ --effect-gradient-border-from: oklch(1 0 0 / 0.08);
165
+ --effect-gradient-border-to: oklch(0 0 0 / 0.15);
166
+
167
+ --effect-hover-reveal-opacity: 0.18;
168
+ --effect-hover-reveal-size: 180px;
169
+ }
package/src/styles/fallback.css ADDED
@@ -0,0 +1,152 @@
1
+ /**
2
+ * OKLCH Fallbacks for Legacy Browsers
3
+ *
4
+ * Provides RGB equivalents for browsers that don't support oklch() color space.
5
+ * Safari <15.4, older Chrome/Firefox versions need these fallbacks.
6
+ *
7
+ * These are defined BEFORE tokens.css so modern browsers override with OKLCH values.
8
+ * The @supports rule ensures OKLCH-capable browsers skip these fallbacks entirely.
9
+ */
10
+
11
+ @supports not (color: oklch(0.5 0.2 270)) {
12
+ :root {
13
+ /* Stone Palette (Warm neutral, Hue ~60) */
14
+ --color-stone-50: #fafaf9;
15
+ --color-stone-100: #f5f5f4;
16
+ --color-stone-200: #e7e5e4;
17
+ --color-stone-300: #d6d3d1;
18
+ --color-stone-400: #a8a29e;
19
+ --color-stone-500: #78716c;
20
+ --color-stone-600: #57534e;
21
+ --color-stone-700: #44403c;
22
+ --color-stone-800: #292524;
23
+ --color-stone-900: #1c1917;
24
+ --color-stone-950: #0c0a09;
25
+
26
+ /* Indigo Palette (Rich primary, Hue ~275) */
27
+ --color-indigo-50: #eef2ff;
28
+ --color-indigo-100: #e0e7ff;
29
+ --color-indigo-200: #c7d2fe;
30
+ --color-indigo-300: #a5b4fc;
31
+ --color-indigo-400: #818cf8;
32
+ --color-indigo-500: #6366f1;
33
+ --color-indigo-600: #4f46e5;
34
+ --color-indigo-700: #4338ca;
35
+ --color-indigo-800: #3730a3;
36
+ --color-indigo-900: #312e81;
37
+
38
+ /* Primary Palette (defaults to Indigo) */
39
+ --color-primary-50: #eef2ff;
40
+ --color-primary-100: #e0e7ff;
41
+ --color-primary-200: #c7d2fe;
42
+ --color-primary-300: #a5b4fc;
43
+ --color-primary-400: #818cf8;
44
+ --color-primary-500: #6366f1;
45
+ --color-primary-600: #4f46e5;
46
+ --color-primary-700: #4338ca;
47
+ --color-primary-800: #3730a3;
48
+ --color-primary-900: #312e81;
49
+
50
+ /* Teal Palette (Success, Hue ~180) */
51
+ --color-teal-50: #f0fdfa;
52
+ --color-teal-100: #ccfbf1;
53
+ --color-teal-500: #14b8a6;
54
+ --color-teal-600: #0d9488;
55
+ --color-teal-700: #0f766e;
56
+
57
+ /* Coral Palette (Destructive, Hue ~20) */
58
+ --color-coral-50: #fff7ed;
59
+ --color-coral-100: #ffedd5;
60
+ --color-coral-500: #f97316;
61
+ --color-coral-600: #ea580c;
62
+ --color-coral-700: #c2410c;
63
+
64
+ /* Amber Palette (Warning, Hue ~70) */
65
+ --color-amber-50: #fffbeb;
66
+ --color-amber-100: #fef3c7;
67
+ --color-amber-500: #f59e0b;
68
+ --color-amber-600: #d97706;
69
+
70
+ /* Neutral */
71
+ --color-white: #ffffff;
72
+ --color-black: #000000;
73
+
74
+ /* Shadows with rgba fallback */
75
+ --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.03);
76
+ --shadow-md: 0 2px 4px -1px rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
77
+ --shadow-lg: 0 4px 8px -2px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.03);
78
+ --shadow-xl: 0 8px 16px -4px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
79
+ --shadow-2xl: 0 16px 32px -8px rgba(0, 0, 0, 0.08), 0 8px 12px -6px rgba(0, 0, 0, 0.05);
80
+
81
+ /* Chart colors */
82
+ --chart-5: #3b82f6;
83
+ --chart-6: #8b5cf6;
84
+ --chart-7: #ec4899;
85
+ --chart-8: #06b6d4;
86
+ }
87
+
88
+ /* Light Theme Semantic Fallbacks */
89
+ :root {
90
+ --bg-primary: #fafaf9;
91
+ --modal-backdrop: rgba(0, 0, 0, 0.5);
92
+ --input-ring: rgba(99, 102, 241, 0.2);
93
+ --input-ring-error: rgba(249, 115, 22, 0.2);
94
+ --input-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02);
95
+ --input-shadow-focus: inset 0 1px 1px rgba(0, 0, 0, 0.01);
96
+ --toggle-inset-shadow: rgba(0, 0, 0, 0.06);
97
+ }
98
+
99
+ /* Dark Theme Semantic Fallbacks */
100
+ [data-theme='dark'] {
101
+ --status-success-bg: #134e4a;
102
+ --status-warning-bg: #451a03;
103
+ --status-error-bg: #450a0a;
104
+ --status-info-bg: #1e1b4b;
105
+
106
+ --badge-success-bg: #134e4a;
107
+ --badge-success-border: #115e59;
108
+ --badge-warning-bg: #451a03;
109
+ --badge-warning-border: #78350f;
110
+ --badge-danger-bg: #450a0a;
111
+ --badge-danger-border: #7f1d1d;
112
+ --badge-info-bg: #1e1b4b;
113
+ --badge-info-border: #312e81;
114
+
115
+ --avatar-soft-bg: #1e1b4b;
116
+
117
+ --chip-bg-selected: #1e1b4b;
118
+ --chip-bg-selected-hover: #312e81;
119
+ --chip-bg-selected-active: #1e1b4b;
120
+
121
+ --combobox-chip-marked-bg: #1e1b4b;
122
+ --combobox-match-bg: #78350f;
123
+
124
+ --file-upload-active-bg: #1e1b4b;
125
+ --file-upload-active-icon-bg: #312e81;
126
+ --file-upload-error-bg: #450a0a;
127
+ --file-upload-remove-hover-bg: #450a0a;
128
+
129
+ --table-row-selected: #1e1b4b;
130
+ --dropdown-item-danger-hover: #450a0a;
131
+
132
+ --callout-info-bg: #1e1b4b;
133
+ --callout-info-border: #312e81;
134
+ --callout-success-bg: #134e4a;
135
+ --callout-success-border: #115e59;
136
+ --callout-warning-bg: #451a03;
137
+ --callout-warning-border: #78350f;
138
+ --callout-error-bg: #450a0a;
139
+ --callout-error-border: #7f1d1d;
140
+
141
+ --modal-backdrop: rgba(0, 0, 0, 0.7);
142
+ --input-ring: rgba(129, 140, 248, 0.25);
143
+ --input-ring-error: rgba(249, 115, 22, 0.25);
144
+ --toggle-inset-shadow: rgba(0, 0, 0, 0.15);
145
+
146
+ /* Dark chart colors */
147
+ --chart-5: #60a5fa;
148
+ --chart-6: #a78bfa;
149
+ --chart-7: #f472b6;
150
+ --chart-8: #22d3ee;
151
+ }
152
+ }
package/src/styles/main.css ADDED
@@ -0,0 +1,25 @@
1
+ /* Main CSS Entry Point - Import order matters */
2
+
3
+ @import './fallback.css';
4
+ @import './tokens.css';
5
+ @import './theme.css';
6
+ @import './mood.css';
7
+ @import './depth.css';
8
+ @import './motion.css';
9
+ @import './effects.css';
10
+ @import './reset.css';
11
+
12
+ /* Utility: Avatar Group (overlapping avatars) */
13
+ .ui-avatar-group {
14
+ display: flex;
15
+ flex-direction: row-reverse;
16
+ justify-content: flex-end;
17
+ }
18
+
19
+ .ui-avatar-group > * {
20
+ margin-left: -0.5rem;
21
+ }
22
+
23
+ .ui-avatar-group > *:last-child {
24
+ margin-left: 0;
25
+ }
package/src/styles/mood.css ADDED
@@ -0,0 +1,211 @@
1
+ /**
2
+ * Mood System - Color Personality Configuration
3
+ *
4
+ * Controls color temperature, saturation, and hue shifts via data-mood attribute.
5
+ * All moods are opt-in; default behavior (warm) requires no attribute.
6
+ *
7
+ * Each mood defines:
8
+ * 1. --color-primary-* palette (the mood's accent color)
9
+ * 2. Optional --color-stone-* overrides for neutral undertones
10
+ * 3. Optional --bg-primary override for canvas color
11
+ *
12
+ * Component tokens are derived from the primary palette in a shared rule below,
13
+ * eliminating duplication across mood definitions.
14
+ *
15
+ * Usage:
16
+ * <html data-mood="vibrant">
17
+ * <div data-mood="cool">...</div>
18
+ */
19
+
20
+ :root {
21
+ --mood-chroma-scale: 1;
22
+ --mood-warmth: 60;
23
+ --mood-hue-shift: 0;
24
+ }
25
+
26
+ /**
27
+ * Shared Component Token Derivations
28
+ *
29
+ * These tokens derive from --color-primary-* and are defined once for all moods.
30
+ * Each mood selector sets the primary palette, then these rules resolve the
31
+ * component tokens in that context.
32
+ */
33
+ [data-mood='warm'],
34
+ [data-mood='cool'],
35
+ [data-mood='vibrant'],
36
+ [data-mood='muted'],
37
+ [data-mood='earthy'] {
38
+ --action-primary: var(--color-primary-600);
39
+ --action-primary-hover: var(--color-primary-700);
40
+ --action-primary-active: var(--color-primary-800);
41
+ --ring-color: var(--color-primary-500);
42
+ --border-focus: var(--color-primary-500);
43
+ --checkbox-checked-bg: var(--color-primary-600);
44
+ --checkbox-checked-hover: var(--color-primary-700);
45
+ --switch-track-on: var(--color-primary-600);
46
+ --radio-checked: var(--color-primary-600);
47
+ --radio-checked-hover: var(--color-primary-700);
48
+ }
49
+
50
+ /**
51
+ * Warm (Default)
52
+ * Current warm stone/indigo palette. Primary = Indigo (hue 275)
53
+ */
54
+ [data-mood='warm'] {
55
+ --mood-chroma-scale: 1;
56
+ --mood-warmth: 60;
57
+ --mood-hue-shift: 0;
58
+
59
+ --bg-primary: oklch(0.995 0.003 60);
60
+
61
+ --color-primary-50: oklch(0.962 0.018 275);
62
+ --color-primary-100: oklch(0.930 0.034 275);
63
+ --color-primary-200: oklch(0.870 0.065 275);
64
+ --color-primary-300: oklch(0.785 0.115 275);
65
+ --color-primary-400: oklch(0.673 0.182 275);
66
+ --color-primary-500: oklch(0.585 0.233 275);
67
+ --color-primary-600: oklch(0.511 0.262 275);
68
+ --color-primary-700: oklch(0.457 0.240 275);
69
+ --color-primary-800: oklch(0.398 0.195 275);
70
+ --color-primary-900: oklch(0.359 0.144 275);
71
+ }
72
+
73
+ /**
74
+ * Cool
75
+ * Blue-gray undertones, professional and calm. Primary = Deep Blue (hue 250)
76
+ */
77
+ [data-mood='cool'] {
78
+ --mood-chroma-scale: 0.9;
79
+ --mood-warmth: 240;
80
+ --mood-hue-shift: -15;
81
+
82
+ --bg-primary: oklch(0.995 0.004 240);
83
+
84
+ --color-stone-50: oklch(0.985 0.008 240);
85
+ --color-stone-100: oklch(0.970 0.012 240);
86
+ --color-stone-200: oklch(0.923 0.016 240);
87
+ --color-stone-300: oklch(0.865 0.022 240);
88
+ --color-stone-400: oklch(0.706 0.032 240);
89
+ --color-stone-500: oklch(0.553 0.032 240);
90
+ --color-stone-600: oklch(0.444 0.030 240);
91
+ --color-stone-700: oklch(0.374 0.028 240);
92
+ --color-stone-800: oklch(0.268 0.025 240);
93
+ --color-stone-900: oklch(0.216 0.022 240);
94
+ --color-stone-950: oklch(0.147 0.020 240);
95
+
96
+ --color-primary-50: oklch(0.970 0.020 250);
97
+ --color-primary-100: oklch(0.940 0.040 250);
98
+ --color-primary-200: oklch(0.880 0.080 250);
99
+ --color-primary-300: oklch(0.790 0.140 250);
100
+ --color-primary-400: oklch(0.680 0.190 250);
101
+ --color-primary-500: oklch(0.585 0.220 250);
102
+ --color-primary-600: oklch(0.511 0.240 250);
103
+ --color-primary-700: oklch(0.457 0.220 250);
104
+ --color-primary-800: oklch(0.400 0.200 250);
105
+ --color-primary-900: oklch(0.350 0.150 250);
106
+ }
107
+
108
+ /**
109
+ * Vibrant
110
+ * Higher saturation, energetic and bold. Primary = Violet-Purple (hue 295)
111
+ */
112
+ [data-mood='vibrant'] {
113
+ --mood-chroma-scale: 1.25;
114
+ --mood-warmth: 55;
115
+ --mood-hue-shift: 5;
116
+
117
+ --bg-primary: oklch(0.995 0.005 55);
118
+
119
+ --color-stone-50: oklch(0.985 0.008 55);
120
+ --color-stone-100: oklch(0.970 0.012 55);
121
+ --color-stone-200: oklch(0.923 0.016 55);
122
+ --color-stone-300: oklch(0.865 0.024 55);
123
+ --color-stone-400: oklch(0.706 0.038 55);
124
+ --color-stone-500: oklch(0.553 0.038 55);
125
+ --color-stone-600: oklch(0.444 0.035 55);
126
+ --color-stone-700: oklch(0.374 0.032 55);
127
+ --color-stone-800: oklch(0.268 0.028 55);
128
+ --color-stone-900: oklch(0.216 0.025 55);
129
+ --color-stone-950: oklch(0.147 0.022 55);
130
+
131
+ --color-primary-50: oklch(0.970 0.030 295);
132
+ --color-primary-100: oklch(0.940 0.060 295);
133
+ --color-primary-200: oklch(0.880 0.120 295);
134
+ --color-primary-300: oklch(0.790 0.200 295);
135
+ --color-primary-400: oklch(0.700 0.260 295);
136
+ --color-primary-500: oklch(0.620 0.280 295);
137
+ --color-primary-600: oklch(0.550 0.300 295);
138
+ --color-primary-700: oklch(0.490 0.280 295);
139
+ --color-primary-800: oklch(0.430 0.260 295);
140
+ --color-primary-900: oklch(0.370 0.200 295);
141
+ }
142
+
143
+ /**
144
+ * Muted
145
+ * Desaturated, calm and subtle. Primary = Soft Purple (hue 270, low chroma)
146
+ */
147
+ [data-mood='muted'] {
148
+ --mood-chroma-scale: 0.7;
149
+ --mood-warmth: 60;
150
+ --mood-hue-shift: 0;
151
+
152
+ --bg-primary: oklch(0.995 0.001 60);
153
+
154
+ --color-stone-50: oklch(0.985 0.003 60);
155
+ --color-stone-100: oklch(0.970 0.005 60);
156
+ --color-stone-200: oklch(0.923 0.007 60);
157
+ --color-stone-300: oklch(0.865 0.011 60);
158
+ --color-stone-400: oklch(0.706 0.015 60);
159
+ --color-stone-500: oklch(0.553 0.015 60);
160
+ --color-stone-600: oklch(0.444 0.014 60);
161
+ --color-stone-700: oklch(0.374 0.012 60);
162
+ --color-stone-800: oklch(0.268 0.010 60);
163
+ --color-stone-900: oklch(0.216 0.009 60);
164
+ --color-stone-950: oklch(0.147 0.008 60);
165
+
166
+ --color-primary-50: oklch(0.965 0.012 270);
167
+ --color-primary-100: oklch(0.935 0.025 270);
168
+ --color-primary-200: oklch(0.875 0.050 270);
169
+ --color-primary-300: oklch(0.790 0.085 270);
170
+ --color-primary-400: oklch(0.680 0.110 270);
171
+ --color-primary-500: oklch(0.550 0.120 270);
172
+ --color-primary-600: oklch(0.480 0.140 270);
173
+ --color-primary-700: oklch(0.420 0.130 270);
174
+ --color-primary-800: oklch(0.360 0.115 270);
175
+ --color-primary-900: oklch(0.310 0.090 270);
176
+ }
177
+
178
+ /**
179
+ * Earthy
180
+ * Olive and terracotta undertones, organic and grounded. Primary = Teal-Green (hue 175)
181
+ */
182
+ [data-mood='earthy'] {
183
+ --mood-chroma-scale: 1;
184
+ --mood-warmth: 45;
185
+ --mood-hue-shift: -15;
186
+
187
+ --bg-primary: oklch(0.995 0.006 45);
188
+
189
+ --color-stone-50: oklch(0.985 0.010 45);
190
+ --color-stone-100: oklch(0.970 0.015 45);
191
+ --color-stone-200: oklch(0.923 0.022 42);
192
+ --color-stone-300: oklch(0.865 0.030 40);
193
+ --color-stone-400: oklch(0.706 0.042 38);
194
+ --color-stone-500: oklch(0.553 0.042 35);
195
+ --color-stone-600: oklch(0.444 0.038 35);
196
+ --color-stone-700: oklch(0.374 0.035 35);
197
+ --color-stone-800: oklch(0.268 0.030 35);
198
+ --color-stone-900: oklch(0.216 0.026 35);
199
+ --color-stone-950: oklch(0.147 0.022 35);
200
+
201
+ --color-primary-50: oklch(0.970 0.025 175);
202
+ --color-primary-100: oklch(0.940 0.050 175);
203
+ --color-primary-200: oklch(0.880 0.080 175);
204
+ --color-primary-300: oklch(0.790 0.110 175);
205
+ --color-primary-400: oklch(0.680 0.130 175);
206
+ --color-primary-500: oklch(0.600 0.150 175);
207
+ --color-primary-600: oklch(0.520 0.140 175);
208
+ --color-primary-700: oklch(0.450 0.130 175);
209
+ --color-primary-800: oklch(0.390 0.120 175);
210
+ --color-primary-900: oklch(0.330 0.100 175);
211
+ }