@rimelight/ui 0.0.33 → 0.0.34

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 (282) hide show
  1. package/README.md +157 -157
  2. package/package.json +105 -105
  3. package/src/components/astro/RLAAspectRatio.astro +2 -2
  4. package/src/components/astro/RLAButton.astro +141 -139
  5. package/src/components/astro/RLAChart.astro +19 -34
  6. package/src/components/astro/RLAHead.astro +427 -196
  7. package/src/components/astro/RLAHeader.astro +66 -59
  8. package/src/components/astro/RLAImage.astro +61 -19
  9. package/src/components/astro/RLALink.astro +22 -23
  10. package/src/components/astro/RLALinkGroup.astro +66 -4
  11. package/src/components/astro/RLALocaleSelector.astro +136 -113
  12. package/src/components/astro/RLAMain.astro +8 -3
  13. package/src/components/astro/RLAMarquee.astro +9 -2
  14. package/src/components/astro/RLANavigationMenu.astro +245 -56
  15. package/src/components/astro/RLAPagination.astro +2 -4
  16. package/src/components/astro/RLAProgress.astro +8 -2
  17. package/src/components/astro/RLASelect.astro +38 -24
  18. package/src/components/astro/RLASlideover.astro +66 -1
  19. package/src/components/astro/RLASlider.astro +14 -14
  20. package/src/components/astro/RLASplitter.astro +14 -2
  21. package/src/components/astro/RLAStickySurface.astro +9 -2
  22. package/src/components/vue/RLVCheckbox.vue +68 -68
  23. package/src/components/vue/RLVForm.vue +44 -44
  24. package/src/components/vue/RLVFormField.vue +58 -58
  25. package/src/components/vue/RLVInput.vue +93 -93
  26. package/src/components/vue/RLVPost.vue +63 -63
  27. package/src/components/vue/RLVPosts.vue +21 -21
  28. package/src/components/vue/RLVToast.vue +68 -68
  29. package/src/components/vue/RLVToaster.vue +29 -29
  30. package/src/composables/index.ts +3 -3
  31. package/src/composables/useHeaderStore.ts +13 -14
  32. package/src/composables/useScrollToTop.ts +62 -62
  33. package/src/composables/useToast.ts +43 -42
  34. package/src/config/index.ts +1 -0
  35. package/src/config/security.ts +220 -0
  36. package/src/integrations/ui.ts +199 -199
  37. package/src/middleware/security.ts +75 -15
  38. package/src/plugins/index.ts +2 -2
  39. package/src/plugins/starlightDocsApi/index.ts +272 -272
  40. package/src/presets/defaults.ts +297 -297
  41. package/src/presets/index.ts +683 -637
  42. package/src/styles/index.css +160 -160
  43. package/src/themes/3d-hover.theme.ts +13 -13
  44. package/src/themes/accordion.theme.ts +13 -13
  45. package/src/themes/alert.theme.ts +131 -125
  46. package/src/themes/app.theme.ts +13 -13
  47. package/src/themes/audio.theme.ts +13 -13
  48. package/src/themes/avatar.theme.ts +84 -84
  49. package/src/themes/badge.theme.ts +169 -163
  50. package/src/themes/banner.theme.ts +13 -13
  51. package/src/themes/browser-mockup.theme.ts +13 -13
  52. package/src/themes/button.theme.ts +224 -202
  53. package/src/themes/calendar.theme.ts +13 -13
  54. package/src/themes/card.theme.ts +42 -42
  55. package/src/themes/changelog.theme.ts +13 -13
  56. package/src/themes/chart.theme.ts +22 -22
  57. package/src/themes/chat-message.theme.ts +13 -13
  58. package/src/themes/chat-messages.theme.ts +13 -13
  59. package/src/themes/chat-palette.theme.ts +13 -13
  60. package/src/themes/chat-prompt-submit.theme.ts +13 -13
  61. package/src/themes/chat-prompt.theme.ts +13 -13
  62. package/src/themes/chat-reasoning.theme.ts +13 -13
  63. package/src/themes/chat-shimmer.theme.ts +13 -13
  64. package/src/themes/chat-tool.theme.ts +13 -13
  65. package/src/themes/chat.theme.ts +13 -13
  66. package/src/themes/checkbox.theme.ts +50 -50
  67. package/src/themes/chip.theme.ts +74 -74
  68. package/src/themes/color-picker.theme.ts +13 -13
  69. package/src/themes/command-palette.theme.ts +13 -13
  70. package/src/themes/compare.theme.ts +13 -13
  71. package/src/themes/confirm.theme.ts +48 -48
  72. package/src/themes/container.theme.ts +13 -13
  73. package/src/themes/context-menu.theme.ts +13 -13
  74. package/src/themes/dashboard-group.theme.ts +13 -13
  75. package/src/themes/dashboard-navbar.theme.ts +13 -13
  76. package/src/themes/dashboard-panel.theme.ts +13 -13
  77. package/src/themes/dashboard-resize-handle.theme.ts +13 -13
  78. package/src/themes/dashboard-search-button.theme.ts +13 -13
  79. package/src/themes/dashboard-search.theme.ts +13 -13
  80. package/src/themes/dashboard-sidebar-collapse.theme.ts +13 -13
  81. package/src/themes/dashboard-sidebar-toggle.theme.ts +13 -13
  82. package/src/themes/dashboard-sidebar.theme.ts +13 -13
  83. package/src/themes/dashboard-toolbar.theme.ts +13 -13
  84. package/src/themes/dock.theme.ts +13 -13
  85. package/src/themes/drawer.theme.ts +61 -61
  86. package/src/themes/dropdown-menu.theme.ts +29 -29
  87. package/src/themes/editor.theme.ts +13 -13
  88. package/src/themes/empty.theme.ts +13 -13
  89. package/src/themes/error.theme.ts +13 -13
  90. package/src/themes/field-group.theme.ts +24 -24
  91. package/src/themes/fieldset.theme.ts +13 -13
  92. package/src/themes/floating-action.theme.ts +13 -13
  93. package/src/themes/footer.theme.ts +30 -30
  94. package/src/themes/form.theme.ts +13 -13
  95. package/src/themes/gallery.theme.ts +13 -13
  96. package/src/themes/head.theme.ts +13 -13
  97. package/src/themes/header.theme.ts +45 -46
  98. package/src/themes/icon.theme.ts +23 -23
  99. package/src/themes/image.theme.ts +23 -19
  100. package/src/themes/input-date.theme.ts +13 -13
  101. package/src/themes/input-menu.theme.ts +35 -35
  102. package/src/themes/input-number.theme.ts +13 -13
  103. package/src/themes/input-tags.theme.ts +13 -13
  104. package/src/themes/input-time.theme.ts +13 -13
  105. package/src/themes/input.theme.ts +42 -42
  106. package/src/themes/kbd.theme.ts +95 -89
  107. package/src/themes/knob.theme.ts +13 -13
  108. package/src/themes/link-group.theme.ts +32 -32
  109. package/src/themes/link.theme.ts +13 -13
  110. package/src/themes/listbox.theme.ts +13 -13
  111. package/src/themes/locale-selector.theme.ts +49 -49
  112. package/src/themes/logo.theme.ts +13 -13
  113. package/src/themes/main.theme.ts +13 -13
  114. package/src/themes/megamenu.theme.ts +13 -13
  115. package/src/themes/meter.theme.ts +13 -13
  116. package/src/themes/navigation-menu.theme.ts +44 -27
  117. package/src/themes/page-aside.theme.ts +13 -13
  118. package/src/themes/page-body.theme.ts +13 -13
  119. package/src/themes/page-header.theme.ts +13 -13
  120. package/src/themes/page-section.theme.ts +187 -187
  121. package/src/themes/page.theme.ts +13 -13
  122. package/src/themes/password.theme.ts +13 -13
  123. package/src/themes/phone-mockup.theme.ts +13 -13
  124. package/src/themes/placeholder.theme.ts +15 -15
  125. package/src/themes/post.theme.ts +33 -33
  126. package/src/themes/pricing-plan.theme.ts +13 -13
  127. package/src/themes/pricing-table.theme.ts +13 -13
  128. package/src/themes/progress.theme.ts +38 -38
  129. package/src/themes/prose.theme.ts +13 -13
  130. package/src/themes/qr-code.theme.ts +13 -13
  131. package/src/themes/quote.theme.ts +13 -13
  132. package/src/themes/radio-group.theme.ts +13 -13
  133. package/src/themes/rating.theme.ts +13 -13
  134. package/src/themes/scroll-area.theme.ts +26 -26
  135. package/src/themes/scroll-to-top.theme.ts +52 -52
  136. package/src/themes/select.theme.ts +29 -29
  137. package/src/themes/separator.theme.ts +147 -147
  138. package/src/themes/sidebar.theme.ts +38 -38
  139. package/src/themes/skeleton.theme.ts +21 -21
  140. package/src/themes/slideover.theme.ts +4 -4
  141. package/src/themes/slider.theme.ts +36 -36
  142. package/src/themes/speed-dial.theme.ts +13 -13
  143. package/src/themes/spinner.theme.ts +34 -34
  144. package/src/themes/splitter.theme.ts +23 -23
  145. package/src/themes/spoiler.theme.ts +13 -13
  146. package/src/themes/stepper.theme.ts +13 -13
  147. package/src/themes/switch.theme.ts +67 -67
  148. package/src/themes/table-of-contents.theme.ts +48 -48
  149. package/src/themes/tabs.theme.ts +52 -52
  150. package/src/themes/textarea.theme.ts +27 -27
  151. package/src/themes/theme-selector.theme.ts +15 -15
  152. package/src/themes/timeline.theme.ts +13 -13
  153. package/src/themes/toast.theme.ts +31 -31
  154. package/src/themes/tooltip.theme.ts +28 -28
  155. package/src/themes/tour.theme.ts +13 -13
  156. package/src/themes/tree.theme.ts +13 -13
  157. package/src/themes/user.theme.ts +13 -13
  158. package/src/themes/video.theme.ts +17 -17
  159. package/src/themes/watermark.theme.ts +13 -13
  160. package/src/themes/window-mockup.theme.ts +13 -13
  161. package/src/types/components/3d-hover.ts +11 -11
  162. package/src/types/components/alert.ts +2 -2
  163. package/src/types/components/app.ts +11 -11
  164. package/src/types/components/audio.ts +11 -11
  165. package/src/types/components/avatar-group.ts +11 -11
  166. package/src/types/components/avatar.ts +60 -60
  167. package/src/types/components/badge.ts +2 -2
  168. package/src/types/components/banner.ts +11 -11
  169. package/src/types/components/browser-mockup.ts +11 -11
  170. package/src/types/components/button.ts +74 -81
  171. package/src/types/components/calendar.ts +11 -11
  172. package/src/types/components/changelog.ts +11 -11
  173. package/src/types/components/chart.ts +2 -1
  174. package/src/types/components/chat-message.ts +11 -11
  175. package/src/types/components/chat-messages.ts +11 -11
  176. package/src/types/components/chat-palette.ts +11 -11
  177. package/src/types/components/chat-prompt-submit.ts +11 -11
  178. package/src/types/components/chat-prompt.ts +11 -11
  179. package/src/types/components/chat-reasoning.ts +11 -11
  180. package/src/types/components/chat-shimmer.ts +11 -11
  181. package/src/types/components/chat-tool.ts +11 -11
  182. package/src/types/components/chat.ts +11 -11
  183. package/src/types/components/checkbox.ts +2 -2
  184. package/src/types/components/chip.ts +17 -17
  185. package/src/types/components/collapsible.ts +2 -1
  186. package/src/types/components/color-picker.ts +11 -11
  187. package/src/types/components/command-palette.ts +11 -11
  188. package/src/types/components/compare.ts +11 -11
  189. package/src/types/components/container.ts +17 -17
  190. package/src/types/components/context-menu.ts +11 -11
  191. package/src/types/components/dashboard-group.ts +11 -11
  192. package/src/types/components/dashboard-navbar.ts +11 -11
  193. package/src/types/components/dashboard-panel.ts +11 -11
  194. package/src/types/components/dashboard-resize-handle.ts +11 -11
  195. package/src/types/components/dashboard-search-button.ts +11 -11
  196. package/src/types/components/dashboard-search.ts +11 -11
  197. package/src/types/components/dashboard-sidebar-collapse.ts +11 -11
  198. package/src/types/components/dashboard-sidebar-toggle.ts +11 -11
  199. package/src/types/components/dashboard-sidebar.ts +11 -11
  200. package/src/types/components/dashboard-toolbar.ts +11 -11
  201. package/src/types/components/dock.ts +11 -11
  202. package/src/types/components/dropdown-menu.ts +2 -1
  203. package/src/types/components/editor.ts +11 -11
  204. package/src/types/components/empty.ts +11 -11
  205. package/src/types/components/error.ts +11 -11
  206. package/src/types/components/fieldset.ts +11 -11
  207. package/src/types/components/file-upload.ts +2 -1
  208. package/src/types/components/floating-action.ts +11 -11
  209. package/src/types/components/form.ts +19 -19
  210. package/src/types/components/gallery.ts +11 -11
  211. package/src/types/components/icon.ts +19 -19
  212. package/src/types/components/image.ts +32 -28
  213. package/src/types/components/index.ts +134 -135
  214. package/src/types/components/input-date.ts +11 -11
  215. package/src/types/components/input-menu.ts +44 -43
  216. package/src/types/components/input-number.ts +11 -11
  217. package/src/types/components/input-pin.ts +36 -35
  218. package/src/types/components/input-tags.ts +11 -11
  219. package/src/types/components/input-time.ts +11 -11
  220. package/src/types/components/input.ts +2 -2
  221. package/src/types/components/knob.ts +11 -11
  222. package/src/types/components/link-group.ts +45 -23
  223. package/src/types/components/link.ts +4 -0
  224. package/src/types/components/listbox.ts +11 -11
  225. package/src/types/components/locale-selector.ts +33 -33
  226. package/src/types/components/logo.ts +32 -31
  227. package/src/types/components/main.ts +17 -17
  228. package/src/types/components/megamenu.ts +11 -11
  229. package/src/types/components/meter.ts +11 -11
  230. package/src/types/components/modal.ts +39 -39
  231. package/src/types/components/navigation-menu.ts +59 -54
  232. package/src/types/components/page-aside.ts +11 -11
  233. package/src/types/components/page-body.ts +11 -11
  234. package/src/types/components/page-header.ts +11 -11
  235. package/src/types/components/page.ts +11 -11
  236. package/src/types/components/password.ts +11 -11
  237. package/src/types/components/phone-mockup.ts +5 -5
  238. package/src/types/components/pin-input.ts +11 -11
  239. package/src/types/components/popover.ts +23 -23
  240. package/src/types/components/post.ts +35 -35
  241. package/src/types/components/pricing-plan.ts +11 -11
  242. package/src/types/components/pricing-table.ts +11 -11
  243. package/src/types/components/progress.ts +33 -33
  244. package/src/types/components/prose.ts +11 -11
  245. package/src/types/components/qr-code.ts +11 -11
  246. package/src/types/components/radio-group.ts +11 -11
  247. package/src/types/components/rating.ts +11 -11
  248. package/src/types/components/scroll-area.ts +23 -23
  249. package/src/types/components/scroll-to-top.ts +2 -2
  250. package/src/types/components/select.ts +2 -1
  251. package/src/types/components/separator.ts +19 -19
  252. package/src/types/components/sidebar.ts +87 -72
  253. package/src/types/components/slideover.ts +31 -31
  254. package/src/types/components/slider.ts +2 -2
  255. package/src/types/components/speed-dial.ts +11 -11
  256. package/src/types/components/spinner.ts +25 -25
  257. package/src/types/components/splitter.ts +19 -19
  258. package/src/types/components/spoiler.ts +11 -11
  259. package/src/types/components/stepper.ts +11 -11
  260. package/src/types/components/sticky-surface.ts +19 -19
  261. package/src/types/components/switch.ts +41 -41
  262. package/src/types/components/table-of-contents.ts +17 -17
  263. package/src/types/components/tabs.ts +2 -1
  264. package/src/types/components/textarea.ts +2 -1
  265. package/src/types/components/theme-selector.ts +15 -15
  266. package/src/types/components/timeline.ts +11 -11
  267. package/src/types/components/toast.ts +2 -1
  268. package/src/types/components/tooltip.ts +23 -23
  269. package/src/types/components/tour.ts +11 -11
  270. package/src/types/components/tree.ts +11 -11
  271. package/src/types/components/user.ts +11 -11
  272. package/src/types/components/watermark.ts +11 -11
  273. package/src/types/components/window-mockup.ts +11 -11
  274. package/src/types/theme.ts +10 -0
  275. package/src/utils/docs.ts +215 -189
  276. package/src/utils/headerStack.ts +95 -95
  277. package/src/utils/index.ts +5 -5
  278. package/src/components/astro/RLABlogPost.astro +0 -7
  279. package/src/components/astro/RLABlogPosts.astro +0 -9
  280. package/src/components/astro/RLAPosts.astro +0 -23
  281. package/src/themes/posts.theme.ts +0 -13
  282. package/src/types/components/posts.ts +0 -11
@@ -1,13 +1,13 @@
1
- import { defineTheme } from "../utils/defineTheme"
2
-
3
- export const createSpoilerTheme = () =>
4
- defineTheme({
5
- slots: ["root"],
6
- base: {
7
- root: ""
8
- },
9
- variants: {},
10
- defaultVariants: {}
11
- })
12
-
13
- export default createSpoilerTheme()
1
+ import { defineTheme } from "../utils/defineTheme"
2
+
3
+ export const createSpoilerTheme = () =>
4
+ defineTheme({
5
+ slots: ["root"],
6
+ base: {
7
+ root: ""
8
+ },
9
+ variants: {},
10
+ defaultVariants: {}
11
+ })
12
+
13
+ export default createSpoilerTheme()
@@ -1,13 +1,13 @@
1
- import { defineTheme } from "../utils/defineTheme"
2
-
3
- export const createStepperTheme = () =>
4
- defineTheme({
5
- slots: ["root"],
6
- base: {
7
- root: ""
8
- },
9
- variants: {},
10
- defaultVariants: {}
11
- })
12
-
13
- export default createStepperTheme()
1
+ import { defineTheme } from "../utils/defineTheme"
2
+
3
+ export const createStepperTheme = () =>
4
+ defineTheme({
5
+ slots: ["root"],
6
+ base: {
7
+ root: ""
8
+ },
9
+ variants: {},
10
+ defaultVariants: {}
11
+ })
12
+
13
+ export default createStepperTheme()
@@ -1,67 +1,67 @@
1
- import { defaultColors } from "../presets/defaults"
2
- import { defineTheme } from "../utils/defineTheme"
3
-
4
- export const createSwitchTheme = (colors: string[] = defaultColors) =>
5
- defineTheme({
6
- slots: ["root", "input", "track", "thumb", "label"],
7
- base: {
8
- root: "inline-flex items-center gap-2 cursor-pointer select-none",
9
- input: "absolute opacity-0 size-0 pointer-events-none peer",
10
- track: [
11
- "inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-muted transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
12
- "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
13
- ],
14
- thumb:
15
- "pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 translate-x-0",
16
- label: "text-sm text-foreground leading-none"
17
- },
18
- variants: {
19
- color: Object.fromEntries(
20
- colors.map((color) => [
21
- color,
22
- {
23
- root: "rl-color-" + color,
24
- track: `peer-checked:bg-[var(--rl-bg)] focus-within:ring-[var(--rl-ring)]/50`
25
- }
26
- ])
27
- ),
28
- size: {
29
- sm: { track: "h-4 w-7", thumb: "size-3", label: "text-xs" },
30
- md: { track: "h-5 w-9", thumb: "size-4", label: "text-sm" },
31
- lg: { track: "h-6 w-11", thumb: "size-5", label: "text-base" }
32
- },
33
- checked: {
34
- true: { thumb: "translate-x-full" },
35
- false: { thumb: "translate-x-0" }
36
- },
37
- theme: {
38
- flat: { root: "rl-flat" },
39
- light: { root: "rl-light" },
40
- dark: { root: "rl-dark" }
41
- }
42
- },
43
- compoundVariants: [
44
- {
45
- size: "sm",
46
- checked: true,
47
- classNames: { thumb: "translate-x-3" }
48
- },
49
- {
50
- size: "md",
51
- checked: true,
52
- classNames: { thumb: "translate-x-4" }
53
- },
54
- {
55
- size: "lg",
56
- checked: true,
57
- classNames: { thumb: "translate-x-5" }
58
- }
59
- ],
60
- defaultVariants: {
61
- color: "primary",
62
- size: "md",
63
- checked: false
64
- }
65
- })
66
-
67
- export default createSwitchTheme()
1
+ import { defaultColors } from "../presets/defaults"
2
+ import { defineTheme } from "../utils/defineTheme"
3
+
4
+ export const createSwitchTheme = (colors: string[] = defaultColors) =>
5
+ defineTheme({
6
+ slots: ["root", "input", "track", "thumb", "label"],
7
+ base: {
8
+ root: "inline-flex items-center gap-2 cursor-pointer select-none",
9
+ input: "absolute opacity-0 size-0 pointer-events-none peer",
10
+ track: [
11
+ "inline-flex h-5 w-9 shrink-0 items-center rounded-full border-2 border-transparent bg-muted transition-all focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
12
+ "peer-disabled:cursor-not-allowed peer-disabled:opacity-50"
13
+ ],
14
+ thumb:
15
+ "pointer-events-none block size-4 rounded-full bg-background shadow-lg ring-0 transition-transform duration-200 translate-x-0",
16
+ label: "text-sm text-foreground leading-none"
17
+ },
18
+ variants: {
19
+ color: Object.fromEntries(
20
+ colors.map((color) => [
21
+ color,
22
+ {
23
+ root: "rl-color-" + color,
24
+ track: `peer-checked:bg-[var(--rl-bg)] focus-within:ring-[var(--rl-ring)]/50`
25
+ }
26
+ ])
27
+ ),
28
+ size: {
29
+ sm: { track: "h-4 w-7", thumb: "size-3", label: "text-xs" },
30
+ md: { track: "h-5 w-9", thumb: "size-4", label: "text-sm" },
31
+ lg: { track: "h-6 w-11", thumb: "size-5", label: "text-base" }
32
+ },
33
+ checked: {
34
+ true: { thumb: "translate-x-full" },
35
+ false: { thumb: "translate-x-0" }
36
+ },
37
+ theme: {
38
+ flat: { root: "rl-flat" },
39
+ light: { root: "rl-light" },
40
+ dark: { root: "rl-dark" }
41
+ }
42
+ },
43
+ compoundVariants: [
44
+ {
45
+ size: "sm",
46
+ checked: true,
47
+ classNames: { thumb: "translate-x-3" }
48
+ },
49
+ {
50
+ size: "md",
51
+ checked: true,
52
+ classNames: { thumb: "translate-x-4" }
53
+ },
54
+ {
55
+ size: "lg",
56
+ checked: true,
57
+ classNames: { thumb: "translate-x-5" }
58
+ }
59
+ ],
60
+ defaultVariants: {
61
+ color: "primary",
62
+ size: "md",
63
+ checked: false
64
+ }
65
+ })
66
+
67
+ export default createSwitchTheme()
@@ -1,48 +1,48 @@
1
- import { defineTheme } from "../utils/defineTheme"
2
-
3
- export const createTableOfContentsTheme = () =>
4
- defineTheme({
5
- slots: ["root", "media", "header", "title", "description", "content", "footer", "overlay"],
6
- base: {
7
- root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]",
8
- container:
9
- "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
10
- top: "",
11
- bottom: "hidden lg:flex lg:flex-col gap-6",
12
- trigger:
13
- "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
14
- title: "truncate",
15
- trailing: "ms-auto inline-flex gap-1.5 items-center",
16
- trailingIcon:
17
- "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
18
- content:
19
- "relative data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none",
20
- list: "min-w-0",
21
- listWithChildren: "ms-3",
22
- item: "min-w-0",
23
- itemWithChildren: "",
24
- link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
25
- linkText: "truncate",
26
- indicator: "",
27
- indicatorLine: "",
28
- indicatorActive: ""
29
- },
30
- variants: {
31
- interactive: {
32
- true: {
33
- root: "hover:shadow-md hover:-translate-y-0.5 cursor-pointer hover:border-primary/30"
34
- },
35
- false: { root: "" }
36
- },
37
- overlay: {
38
- true: { root: "relative aspect-square", content: "absolute inset-0 z-10" },
39
- false: { root: "" }
40
- }
41
- },
42
- defaultVariants: {
43
- interactive: false,
44
- overlay: false
45
- }
46
- })
47
-
48
- export default createTableOfContentsTheme()
1
+ import { defineTheme } from "../utils/defineTheme"
2
+
3
+ export const createTableOfContentsTheme = () =>
4
+ defineTheme({
5
+ slots: ["root", "media", "header", "title", "description", "content", "footer", "overlay"],
6
+ base: {
7
+ root: "sticky top-(--ui-header-height) z-10 bg-default/75 lg:bg-[initial] backdrop-blur -mx-4 px-4 sm:px-6 sm:-mx-6 lg:ms-0 overflow-y-auto max-h-[calc(100vh-var(--ui-header-height))]",
8
+ container:
9
+ "pt-4 sm:pt-6 pb-2.5 sm:pb-4.5 lg:py-8 border-b border-dashed border-default lg:border-0 flex flex-col",
10
+ top: "",
11
+ bottom: "hidden lg:flex lg:flex-col gap-6",
12
+ trigger:
13
+ "group text-sm font-semibold flex-1 flex items-center gap-1.5 py-1.5 -mt-1.5 focus-visible:outline-primary",
14
+ title: "truncate",
15
+ trailing: "ms-auto inline-flex gap-1.5 items-center",
16
+ trailingIcon:
17
+ "size-5 transform transition-transform duration-200 shrink-0 group-data-[state=open]:rotate-180 lg:hidden",
18
+ content:
19
+ "relative data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] overflow-hidden focus:outline-none",
20
+ list: "min-w-0",
21
+ listWithChildren: "ms-3",
22
+ item: "min-w-0",
23
+ itemWithChildren: "",
24
+ link: "group relative text-sm flex items-center focus-visible:outline-primary py-1",
25
+ linkText: "truncate",
26
+ indicator: "",
27
+ indicatorLine: "",
28
+ indicatorActive: ""
29
+ },
30
+ variants: {
31
+ interactive: {
32
+ true: {
33
+ root: "hover:shadow-md hover:-translate-y-0.5 cursor-pointer hover:border-primary/30"
34
+ },
35
+ false: { root: "" }
36
+ },
37
+ overlay: {
38
+ true: { root: "relative aspect-square", content: "absolute inset-0 z-10" },
39
+ false: { root: "" }
40
+ }
41
+ },
42
+ defaultVariants: {
43
+ interactive: false,
44
+ overlay: false
45
+ }
46
+ })
47
+
48
+ export default createTableOfContentsTheme()
@@ -1,52 +1,52 @@
1
- import { defineTheme } from "../utils/defineTheme"
2
-
3
- export const createTabsTheme = () =>
4
- defineTheme({
5
- slots: ["root", "list", "trigger", "content"],
6
- base: {
7
- root: "w-full flex flex-col gap-4",
8
- list: "inline-flex items-center justify-start rounded-md bg-muted p-1 text-muted-foreground",
9
- trigger:
10
- "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground cursor-pointer",
11
- content:
12
- "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
13
- },
14
- variants: {
15
- variant: {
16
- solid: {
17
- list: "bg-muted p-1 rounded-lg",
18
- trigger:
19
- "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
20
- },
21
- underline: {
22
- list: "bg-transparent border-b border-border rounded-none p-0 gap-4",
23
- trigger:
24
- "rounded-none border-b-2 border-transparent px-1 pb-3 pt-2 data-[state=active]:border-primary data-[state=active]:text-foreground hover:border-muted-foreground/30"
25
- },
26
- pills: {
27
- list: "bg-transparent p-0 gap-2",
28
- trigger:
29
- "rounded-full px-4 py-1.5 data-[state=active]:bg-primary data-[state=active]:text-white"
30
- }
31
- },
32
- orientation: {
33
- horizontal: { root: "flex-col", list: "w-full" },
34
- vertical: {
35
- root: "flex-row gap-6",
36
- list: "flex-col items-stretch h-full w-48 border-r border-border rounded-none bg-transparent"
37
- }
38
- },
39
- size: {
40
- sm: { trigger: "text-xs px-2.5 py-1" },
41
- md: { trigger: "text-sm px-3.5 py-1.5" },
42
- lg: { trigger: "text-base px-4.5 py-2" }
43
- }
44
- },
45
- defaultVariants: {
46
- variant: "solid",
47
- orientation: "horizontal",
48
- size: "md"
49
- }
50
- })
51
-
52
- export default createTabsTheme()
1
+ import { defineTheme } from "../utils/defineTheme"
2
+
3
+ export const createTabsTheme = () =>
4
+ defineTheme({
5
+ slots: ["root", "list", "trigger", "content"],
6
+ base: {
7
+ root: "w-full flex flex-col gap-4",
8
+ list: "inline-flex items-center justify-start rounded-md bg-muted p-1 text-muted-foreground",
9
+ trigger:
10
+ "inline-flex items-center justify-center whitespace-nowrap rounded-sm px-3 py-1.5 text-sm font-medium transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:text-foreground cursor-pointer",
11
+ content:
12
+ "mt-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
13
+ },
14
+ variants: {
15
+ variant: {
16
+ solid: {
17
+ list: "bg-muted p-1 rounded-lg",
18
+ trigger:
19
+ "data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm"
20
+ },
21
+ underline: {
22
+ list: "bg-transparent border-b border-border rounded-none p-0 gap-4",
23
+ trigger:
24
+ "rounded-none border-b-2 border-transparent px-1 pb-3 pt-2 data-[state=active]:border-primary data-[state=active]:text-foreground hover:border-muted-foreground/30"
25
+ },
26
+ pills: {
27
+ list: "bg-transparent p-0 gap-2",
28
+ trigger:
29
+ "rounded-full px-4 py-1.5 data-[state=active]:bg-primary data-[state=active]:text-white"
30
+ }
31
+ },
32
+ orientation: {
33
+ horizontal: { root: "flex-col", list: "w-full" },
34
+ vertical: {
35
+ root: "flex-row gap-6",
36
+ list: "flex-col items-stretch h-full w-48 border-r border-border rounded-none bg-transparent"
37
+ }
38
+ },
39
+ size: {
40
+ sm: { trigger: "text-xs px-2.5 py-1" },
41
+ md: { trigger: "text-sm px-3.5 py-1.5" },
42
+ lg: { trigger: "text-base px-4.5 py-2" }
43
+ }
44
+ },
45
+ defaultVariants: {
46
+ variant: "solid",
47
+ orientation: "horizontal",
48
+ size: "md"
49
+ }
50
+ })
51
+
52
+ export default createTabsTheme()
@@ -1,27 +1,27 @@
1
- import { defineTheme } from "../utils/defineTheme"
2
-
3
- export const createTextareaTheme = () =>
4
- defineTheme({
5
- slots: ["root", "textarea"],
6
- base: {
7
- root: "relative flex items-center w-full rounded-md border border-input bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
8
- textarea:
9
- "w-full bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]"
10
- },
11
- variants: {
12
- size: {
13
- sm: { textarea: "py-1.5 text-xs min-h-[60px]" },
14
- md: { textarea: "py-2 text-sm min-h-[80px]" },
15
- lg: { textarea: "py-2.5 text-base min-h-[100px]" }
16
- },
17
- error: {
18
- true: { root: "border-error-500 focus-within:ring-error-500/50" }
19
- }
20
- },
21
- defaultVariants: {
22
- size: "md",
23
- error: false
24
- }
25
- })
26
-
27
- export default createTextareaTheme()
1
+ import { defineTheme } from "../utils/defineTheme"
2
+
3
+ export const createTextareaTheme = () =>
4
+ defineTheme({
5
+ slots: ["root", "textarea"],
6
+ base: {
7
+ root: "relative flex items-center w-full rounded-md border border-input bg-background shadow-sm focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-2",
8
+ textarea:
9
+ "w-full bg-transparent px-3 py-2 text-sm outline-none placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 min-h-[80px]"
10
+ },
11
+ variants: {
12
+ size: {
13
+ sm: { textarea: "py-1.5 text-xs min-h-[60px]" },
14
+ md: { textarea: "py-2 text-sm min-h-[80px]" },
15
+ lg: { textarea: "py-2.5 text-base min-h-[100px]" }
16
+ },
17
+ error: {
18
+ true: { root: "border-error-500 focus-within:ring-error-500/50" }
19
+ }
20
+ },
21
+ defaultVariants: {
22
+ size: "md",
23
+ error: false
24
+ }
25
+ })
26
+
27
+ export default createTextareaTheme()
@@ -1,15 +1,15 @@
1
- import { defineTheme } from "../utils/defineTheme"
2
-
3
- export const createThemeSelectorTheme = () =>
4
- defineTheme({
5
- slots: ["root", "sun", "moon"],
6
- base: {
7
- root: "group rounded-full hover:bg-neutral-900/50 transition-colors inline-flex items-center justify-center text-neutral-400 hover:text-white cursor-pointer",
8
- sun: "hidden dark:block i-lucide-sun w-5 h-5 text-current",
9
- moon: "dark:hidden i-lucide-moon w-5 h-5 text-current"
10
- },
11
- variants: {},
12
- defaultVariants: {}
13
- })
14
-
15
- export default createThemeSelectorTheme()
1
+ import { defineTheme } from "../utils/defineTheme"
2
+
3
+ export const createThemeSelectorTheme = () =>
4
+ defineTheme({
5
+ slots: ["root", "sun", "moon"],
6
+ base: {
7
+ root: "group rounded-full hover:bg-neutral-900/50 transition-colors inline-flex items-center justify-center text-neutral-400 hover:text-white cursor-pointer",
8
+ sun: "hidden dark:block i-lucide-sun w-5 h-5 text-current",
9
+ moon: "dark:hidden i-lucide-moon w-5 h-5 text-current"
10
+ },
11
+ variants: {},
12
+ defaultVariants: {}
13
+ })
14
+
15
+ export default createThemeSelectorTheme()
@@ -1,13 +1,13 @@
1
- import { defineTheme } from "../utils/defineTheme"
2
-
3
- export const createTimelineTheme = () =>
4
- defineTheme({
5
- slots: ["root"],
6
- base: {
7
- root: ""
8
- },
9
- variants: {},
10
- defaultVariants: {}
11
- })
12
-
13
- export default createTimelineTheme()
1
+ import { defineTheme } from "../utils/defineTheme"
2
+
3
+ export const createTimelineTheme = () =>
4
+ defineTheme({
5
+ slots: ["root"],
6
+ base: {
7
+ root: ""
8
+ },
9
+ variants: {},
10
+ defaultVariants: {}
11
+ })
12
+
13
+ export default createTimelineTheme()
@@ -1,31 +1,31 @@
1
- import { defineTheme } from "../utils/defineTheme"
2
-
3
- export const createToastTheme = () =>
4
- defineTheme({
5
- slots: ["root", "title", "description", "action", "close"],
6
- base: {
7
- root: "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all border-border bg-background text-foreground",
8
- title: "text-sm font-semibold",
9
- description: "text-xs opacity-90",
10
- action:
11
- "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
12
- close:
13
- "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100"
14
- },
15
- variants: {
16
- variant: {
17
- default: { root: "bg-background border-border" },
18
- destructive: {
19
- root: "destructive group border-error-500/20 bg-error-500/10 text-error-700 dark:text-error-400"
20
- },
21
- success: {
22
- root: "border-success-500/20 bg-success-500/10 text-success-700 dark:text-success-400"
23
- }
24
- }
25
- },
26
- defaultVariants: {
27
- variant: "default"
28
- }
29
- })
30
-
31
- export default createToastTheme()
1
+ import { defineTheme } from "../utils/defineTheme"
2
+
3
+ export const createToastTheme = () =>
4
+ defineTheme({
5
+ slots: ["root", "title", "description", "action", "close"],
6
+ base: {
7
+ root: "group pointer-events-auto relative flex w-full items-center justify-between space-x-4 overflow-hidden rounded-md border p-6 pr-8 shadow-lg transition-all border-border bg-background text-foreground",
8
+ title: "text-sm font-semibold",
9
+ description: "text-xs opacity-90",
10
+ action:
11
+ "inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-xs font-medium ring-offset-background transition-colors hover:bg-secondary focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive",
12
+ close:
13
+ "absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 group-hover:opacity-100"
14
+ },
15
+ variants: {
16
+ variant: {
17
+ default: { root: "bg-background border-border" },
18
+ destructive: {
19
+ root: "destructive group border-error-500/20 bg-error-500/10 text-error-700 dark:text-error-400"
20
+ },
21
+ success: {
22
+ root: "border-success-500/20 bg-success-500/10 text-success-700 dark:text-success-400"
23
+ }
24
+ }
25
+ },
26
+ defaultVariants: {
27
+ variant: "default"
28
+ }
29
+ })
30
+
31
+ export default createToastTheme()
@@ -1,28 +1,28 @@
1
- import { defineTheme } from "../utils/defineTheme"
2
-
3
- export const createTooltipTheme = () =>
4
- defineTheme({
5
- slots: ["root", "trigger", "content"],
6
- base: {
7
- root: "relative inline-block group/tooltip",
8
- trigger: "",
9
- content: [
10
- "absolute z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md animate-in fade-in-0 zoom-in-95",
11
- "transition-all duration-150 invisible opacity-0 scale-95 origin-center pointer-events-none",
12
- "group-hover/tooltip:visible group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100"
13
- ]
14
- },
15
- variants: {
16
- placement: {
17
- top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-1.5" },
18
- bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-1.5" },
19
- left: { content: "right-full top-1/2 -translate-y-1/2 mr-1.5" },
20
- right: { content: "left-full top-1/2 -translate-y-1/2 ml-1.5" }
21
- }
22
- },
23
- defaultVariants: {
24
- placement: "top"
25
- }
26
- })
27
-
28
- export default createTooltipTheme()
1
+ import { defineTheme } from "../utils/defineTheme"
2
+
3
+ export const createTooltipTheme = () =>
4
+ defineTheme({
5
+ slots: ["root", "trigger", "content"],
6
+ base: {
7
+ root: "relative inline-block group/tooltip",
8
+ trigger: "",
9
+ content: [
10
+ "absolute z-50 overflow-hidden rounded-md bg-primary px-3 py-1.5 text-xs text-primary-foreground shadow-md animate-in fade-in-0 zoom-in-95",
11
+ "transition-all duration-150 invisible opacity-0 scale-95 origin-center pointer-events-none",
12
+ "group-hover/tooltip:visible group-hover/tooltip:opacity-100 group-hover/tooltip:scale-100"
13
+ ]
14
+ },
15
+ variants: {
16
+ placement: {
17
+ top: { content: "bottom-full left-1/2 -translate-x-1/2 mb-1.5" },
18
+ bottom: { content: "top-full left-1/2 -translate-x-1/2 mt-1.5" },
19
+ left: { content: "right-full top-1/2 -translate-y-1/2 mr-1.5" },
20
+ right: { content: "left-full top-1/2 -translate-y-1/2 ml-1.5" }
21
+ }
22
+ },
23
+ defaultVariants: {
24
+ placement: "top"
25
+ }
26
+ })
27
+
28
+ export default createTooltipTheme()
@@ -1,13 +1,13 @@
1
- import { defineTheme } from "../utils/defineTheme"
2
-
3
- export const createTourTheme = () =>
4
- defineTheme({
5
- slots: ["root"],
6
- base: {
7
- root: ""
8
- },
9
- variants: {},
10
- defaultVariants: {}
11
- })
12
-
13
- export default createTourTheme()
1
+ import { defineTheme } from "../utils/defineTheme"
2
+
3
+ export const createTourTheme = () =>
4
+ defineTheme({
5
+ slots: ["root"],
6
+ base: {
7
+ root: ""
8
+ },
9
+ variants: {},
10
+ defaultVariants: {}
11
+ })
12
+
13
+ export default createTourTheme()