tera-system-ui 0.1.64 → 0.1.66

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 (273) hide show
  1. package/dist/COMPONENT_API.md +2 -539
  2. package/dist/components/accordion/Accordion.d.ts +24 -0
  3. package/dist/components/accordion/Accordion.js +4 -0
  4. package/dist/components/accordion/components/Accordion.svelte +2 -8
  5. package/dist/components/accordion/components/AccordionContent.svelte +5 -12
  6. package/dist/components/accordion/components/AccordionItem.svelte +3 -9
  7. package/dist/components/accordion/components/AccordionTrigger.svelte +5 -15
  8. package/dist/components/ai/ChatBubble.svelte +35 -0
  9. package/dist/components/ai/ChatBubble.svelte.d.ts +12 -0
  10. package/dist/components/ai/PromptInput.svelte +58 -0
  11. package/dist/components/ai/PromptInput.svelte.d.ts +13 -0
  12. package/dist/components/ai/StreamText.svelte +41 -0
  13. package/dist/components/ai/StreamText.svelte.d.ts +11 -0
  14. package/dist/components/ai/SuggestionChips.svelte +34 -0
  15. package/dist/components/ai/SuggestionChips.svelte.d.ts +10 -0
  16. package/dist/components/ai/ThinkingLoader.svelte +34 -0
  17. package/dist/components/ai/ThinkingLoader.svelte.d.ts +11 -0
  18. package/dist/components/ai/index.d.ts +5 -0
  19. package/dist/components/ai/index.js +5 -0
  20. package/dist/components/alert/Alert.svelte +47 -0
  21. package/dist/components/alert/Alert.svelte.d.ts +15 -0
  22. package/dist/components/alert/index.d.ts +1 -0
  23. package/dist/components/alert/index.js +1 -0
  24. package/dist/components/avatar/Avatar.svelte +9 -25
  25. package/dist/components/badge/Badge.d.ts +52 -0
  26. package/dist/components/badge/Badge.js +22 -0
  27. package/dist/components/badge/Badge.svelte +22 -0
  28. package/dist/components/badge/Badge.svelte.d.ts +4 -0
  29. package/dist/components/badge/index.d.ts +2 -0
  30. package/dist/components/badge/index.js +1 -0
  31. package/dist/components/brand-logo/BrandLogo.svelte +12 -10
  32. package/dist/components/button/Button.d.ts +2 -2
  33. package/dist/components/button/Button.js +12 -12
  34. package/dist/components/button/Button.svelte +7 -34
  35. package/dist/components/card/Card.d.ts +68 -0
  36. package/dist/components/card/Card.js +28 -0
  37. package/dist/components/card/Card.svelte +33 -0
  38. package/dist/components/card/Card.svelte.d.ts +4 -0
  39. package/dist/components/card/index.d.ts +2 -0
  40. package/dist/components/card/index.js +1 -0
  41. package/dist/components/checkbox/Checkbox.d.ts +25 -4
  42. package/dist/components/checkbox/Checkbox.js +4 -0
  43. package/dist/components/checkbox/Checkbox.svelte +13 -16
  44. package/dist/components/checkbox/Checkbox.svelte.d.ts +2 -2
  45. package/dist/components/combobox/Combobox.d.ts +45 -9
  46. package/dist/components/combobox/Combobox.js +5 -7
  47. package/dist/components/combobox/Combobox.svelte +226 -8
  48. package/dist/components/combobox/Combobox.svelte.d.ts +2 -2
  49. package/dist/components/combobox/index.d.ts +1 -1
  50. package/dist/components/command/components/command-empty.svelte +3 -8
  51. package/dist/components/command/components/command-group.svelte +3 -13
  52. package/dist/components/command/components/command-input.svelte +5 -13
  53. package/dist/components/command/components/command-item.svelte +3 -9
  54. package/dist/components/command/components/command-link-item.svelte +3 -8
  55. package/dist/components/command/components/command-list.svelte +3 -8
  56. package/dist/components/command/components/command-separator.svelte +3 -8
  57. package/dist/components/command/components/command-shortcut.svelte +2 -10
  58. package/dist/components/command/components/command.svelte +29 -42
  59. package/dist/components/date-range-picker/DateRangePicker.svelte +490 -0
  60. package/dist/components/date-range-picker/DateRangePicker.svelte.d.ts +4 -0
  61. package/dist/components/date-range-picker/DateRangePicker.types.d.ts +38 -0
  62. package/dist/components/date-range-picker/DateRangePicker.types.js +1 -0
  63. package/dist/components/date-range-picker/index.d.ts +2 -0
  64. package/dist/components/date-range-picker/index.js +1 -0
  65. package/dist/components/dialog/Dialog.d.ts +43 -121
  66. package/dist/components/dialog/Dialog.js +1 -39
  67. package/dist/components/dialog/Dialog.svelte +103 -113
  68. package/dist/components/dialog/Dialog.svelte.d.ts +1 -2
  69. package/dist/components/dialog/dialog.scss +21 -24
  70. package/dist/components/drawer/Drawer.svelte +63 -0
  71. package/dist/components/drawer/Drawer.svelte.d.ts +16 -0
  72. package/dist/components/drawer/index.d.ts +1 -0
  73. package/dist/components/drawer/index.js +1 -0
  74. package/dist/components/dropdown-menu/DropdownMenu.d.ts +51 -24
  75. package/dist/components/dropdown-menu/DropdownMenu.js +1 -15
  76. package/dist/components/dropdown-menu/components/DropdownMenu.svelte +36 -34
  77. package/dist/components/dropdown-menu/components/DropdownMenu.svelte.d.ts +1 -1
  78. package/dist/components/dropdown-menu/components/DropdownMenuGroup.svelte +8 -12
  79. package/dist/components/dropdown-menu/components/DropdownMenuGroup.svelte.d.ts +2 -4
  80. package/dist/components/dropdown-menu/components/DropdownMenuHeader.svelte +11 -12
  81. package/dist/components/dropdown-menu/components/DropdownMenuHeader.svelte.d.ts +2 -4
  82. package/dist/components/dropdown-menu/components/DropdownMenuItem.svelte +27 -30
  83. package/dist/components/dropdown-menu/components/DropdownMenuItem.svelte.d.ts +1 -1
  84. package/dist/components/dropdown-menu/components/DropdownMenuSeparator.svelte +9 -11
  85. package/dist/components/dropdown-menu/components/DropdownMenuSeparator.svelte.d.ts +2 -4
  86. package/dist/components/fonts/TeraFontMono.svelte +4 -4
  87. package/dist/components/fonts/TeraFontMono.svelte.d.ts +1 -0
  88. package/dist/components/fonts/TeraFontSansSerif.svelte +4 -4
  89. package/dist/components/fonts/TeraFontSansSerif.svelte.d.ts +1 -1
  90. package/dist/components/header/Header.svelte +6 -9
  91. package/dist/components/header/header.scss +1 -1
  92. package/dist/components/icons/IconArrowBigRightFilled.svelte +3 -7
  93. package/dist/components/icons/IconBook.svelte +3 -6
  94. package/dist/components/icons/IconBookmarkPlus.svelte +3 -6
  95. package/dist/components/icons/IconCalculator.svelte +3 -6
  96. package/dist/components/icons/IconCheck.svelte +3 -6
  97. package/dist/components/icons/IconChevronDown.svelte +3 -6
  98. package/dist/components/icons/IconCoin.svelte +3 -6
  99. package/dist/components/icons/IconCoinConvert.svelte +2 -5
  100. package/dist/components/icons/IconCopy.svelte +3 -6
  101. package/dist/components/icons/IconCopyCheckFilled.svelte +3 -6
  102. package/dist/components/icons/IconHamburger.svelte +3 -6
  103. package/dist/components/icons/IconLanguage.svelte +3 -6
  104. package/dist/components/icons/IconLoader2.svelte +3 -6
  105. package/dist/components/icons/IconLogout.svelte +3 -6
  106. package/dist/components/icons/IconMoon.svelte +3 -6
  107. package/dist/components/icons/IconPointFilled.svelte +3 -6
  108. package/dist/components/icons/IconSearch.svelte +3 -6
  109. package/dist/components/icons/IconSettings.svelte +3 -6
  110. package/dist/components/icons/IconSun.svelte +3 -6
  111. package/dist/components/icons/IconSwitchHorizontal.svelte +3 -6
  112. package/dist/components/icons/IconSwitchVertical.svelte +3 -6
  113. package/dist/components/icons/IconTransform.svelte +3 -6
  114. package/dist/components/icons/IconX.svelte +3 -6
  115. package/dist/components/input/Input.d.ts +2 -2
  116. package/dist/components/input/Input.js +10 -10
  117. package/dist/components/input/Input.svelte +10 -26
  118. package/dist/components/label/Label.d.ts +2 -2
  119. package/dist/components/label/Label.js +2 -2
  120. package/dist/components/label/Label.svelte +4 -12
  121. package/dist/components/language-picker-button/LanguagePickerButton.svelte +23 -42
  122. package/dist/components/light-dark-toggle/LightDarkToggle.svelte +21 -26
  123. package/dist/components/marketing/FeatureCard.svelte +37 -0
  124. package/dist/components/marketing/FeatureCard.svelte.d.ts +13 -0
  125. package/dist/components/marketing/PricingCard.svelte +48 -0
  126. package/dist/components/marketing/PricingCard.svelte.d.ts +15 -0
  127. package/dist/components/marketing/StatBlock.svelte +14 -0
  128. package/dist/components/marketing/StatBlock.svelte.d.ts +10 -0
  129. package/dist/components/marketing/TestimonialCard.svelte +24 -0
  130. package/dist/components/marketing/TestimonialCard.svelte.d.ts +12 -0
  131. package/dist/components/marketing/index.d.ts +4 -0
  132. package/dist/components/marketing/index.js +4 -0
  133. package/dist/components/popover/Popover.d.ts +32 -13
  134. package/dist/components/popover/Popover.js +1 -7
  135. package/dist/components/popover/Popover.svelte +40 -158
  136. package/dist/components/popover/Popover.svelte.d.ts +2 -2
  137. package/dist/components/popover-responsive/PopoverResponsive.d.ts +18 -7
  138. package/dist/components/popover-responsive/PopoverResponsive.js +1 -7
  139. package/dist/components/popover-responsive/PopoverResponsive.svelte +25 -87
  140. package/dist/components/popover-responsive/PopoverResponsive.svelte.d.ts +2 -11
  141. package/dist/components/select/Select.d.ts +60 -23
  142. package/dist/components/select/Select.js +14 -35
  143. package/dist/components/select/Select.svelte +157 -28
  144. package/dist/components/select/Select.svelte.d.ts +2 -3
  145. package/dist/components/select/index.d.ts +1 -1
  146. package/dist/components/side-navigation/SideNavigation.svelte +73 -96
  147. package/dist/components/side-navigation/SideNavigationItem.svelte +2 -2
  148. package/dist/components/side-navigation/SideNavigationLayout.svelte +3 -5
  149. package/dist/components/side-navigation/sidenav.scss +17 -13
  150. package/dist/components/skeleton/Skeleton.svelte +48 -0
  151. package/dist/components/skeleton/Skeleton.svelte.d.ts +12 -0
  152. package/dist/components/skeleton/index.d.ts +1 -0
  153. package/dist/components/skeleton/index.js +1 -0
  154. package/dist/components/slider/Slider.d.ts +25 -15
  155. package/dist/components/slider/Slider.js +1 -7
  156. package/dist/components/slider/Slider.svelte +38 -164
  157. package/dist/components/slider/Slider.svelte.d.ts +1 -1
  158. package/dist/components/spinner/Spinner.svelte +39 -0
  159. package/dist/components/spinner/Spinner.svelte.d.ts +10 -0
  160. package/dist/components/spinner/index.d.ts +1 -0
  161. package/dist/components/spinner/index.js +1 -0
  162. package/dist/components/star-rating/StarRating.svelte +33 -49
  163. package/dist/components/switch/Switch.d.ts +19 -4
  164. package/dist/components/switch/Switch.js +4 -0
  165. package/dist/components/switch/Switch.svelte +13 -17
  166. package/dist/components/switch/Switch.svelte.d.ts +2 -2
  167. package/dist/components/table/Table.svelte +68 -0
  168. package/dist/components/table/Table.svelte.d.ts +40 -0
  169. package/dist/components/table/index.d.ts +1 -0
  170. package/dist/components/table/index.js +1 -0
  171. package/dist/components/tabs/Tabs.svelte.d.ts +45 -16
  172. package/dist/components/tabs/Tabs.svelte.js +8 -18
  173. package/dist/components/tabs/components/Tabs.svelte +27 -33
  174. package/dist/components/tabs/components/Tabs.svelte.d.ts +1 -1
  175. package/dist/components/tabs/components/TabsContent.svelte +13 -36
  176. package/dist/components/tabs/components/TabsContent.svelte.d.ts +2 -5
  177. package/dist/components/tabs/components/TabsItem.svelte +43 -32
  178. package/dist/components/tabs/components/TabsItem.svelte.d.ts +2 -5
  179. package/dist/components/tabs/components/TabsList.svelte +90 -58
  180. package/dist/components/tabs/components/TabsList.svelte.d.ts +2 -4
  181. package/dist/components/tera-ui-context/TeraUiContext.svelte +13 -26
  182. package/dist/components/text-area/TextArea.d.ts +2 -2
  183. package/dist/components/text-area/TextArea.js +9 -9
  184. package/dist/components/text-area/TextArea.svelte +41 -65
  185. package/dist/components/toast/ToastContainer.svelte +50 -0
  186. package/dist/components/toast/ToastContainer.svelte.d.ts +18 -0
  187. package/dist/components/toast/index.d.ts +3 -0
  188. package/dist/components/toast/index.js +2 -0
  189. package/dist/components/toast/toast.svelte.d.ts +22 -0
  190. package/dist/components/toast/toast.svelte.js +18 -0
  191. package/dist/components/tooltip/Tooltip.d.ts +23 -0
  192. package/dist/components/tooltip/Tooltip.js +1 -0
  193. package/dist/components/tooltip/Tooltip.svelte +30 -0
  194. package/dist/components/tooltip/Tooltip.svelte.d.ts +4 -0
  195. package/dist/components/tooltip/index.d.ts +2 -0
  196. package/dist/components/tooltip/index.js +1 -0
  197. package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.svelte +48 -69
  198. package/dist/index.d.ts +19 -2
  199. package/dist/index.js +12 -0
  200. package/dist/llms/accordion.md +90 -0
  201. package/dist/llms/ai.md +110 -0
  202. package/dist/llms/alert.md +29 -0
  203. package/dist/llms/avatar.md +34 -0
  204. package/dist/llms/badge.md +31 -0
  205. package/dist/llms/brand-logo.md +30 -0
  206. package/dist/llms/button.md +37 -0
  207. package/dist/llms/card.md +32 -0
  208. package/dist/llms/checkbox.md +35 -0
  209. package/dist/llms/colors.md +161 -0
  210. package/dist/llms/combobox.md +40 -0
  211. package/dist/llms/command.md +7 -0
  212. package/dist/llms/date-range-picker.md +36 -0
  213. package/dist/llms/dialog.md +45 -0
  214. package/dist/llms/drawer.md +30 -0
  215. package/dist/llms/dropdown-menu.md +112 -0
  216. package/dist/llms/fonts.md +7 -0
  217. package/dist/llms/header.md +26 -0
  218. package/dist/llms/icons.md +43 -0
  219. package/dist/llms/index.md +65 -0
  220. package/dist/llms/input.md +37 -0
  221. package/dist/llms/label.md +30 -0
  222. package/dist/llms/language-picker-button.md +30 -0
  223. package/dist/llms/light-dark-toggle.md +26 -0
  224. package/dist/llms/marketing.md +95 -0
  225. package/dist/llms/popover-responsive.md +32 -0
  226. package/dist/llms/popover.md +40 -0
  227. package/dist/llms/select.md +44 -0
  228. package/dist/llms/side-navigation.md +30 -0
  229. package/dist/llms/skeleton.md +28 -0
  230. package/dist/llms/slider.md +36 -0
  231. package/dist/llms/spinner.md +25 -0
  232. package/dist/llms/star-rating.md +31 -0
  233. package/dist/llms/switch.md +33 -0
  234. package/dist/llms/table.md +30 -0
  235. package/dist/llms/tabs.md +92 -0
  236. package/dist/llms/tera-ui-context.md +30 -0
  237. package/dist/llms/text-area.md +39 -0
  238. package/dist/llms/toast.md +7 -0
  239. package/dist/llms/tooltip.md +32 -0
  240. package/dist/llms/user-avatar-with-menu.md +28 -0
  241. package/dist/paraglide/README.md +72 -3
  242. package/dist/paraglide/messages/text_account_settings.d.ts +14 -2
  243. package/dist/paraglide/messages/text_account_settings.js +53 -58
  244. package/dist/paraglide/messages/text_calces_documentation.d.ts +14 -2
  245. package/dist/paraglide/messages/text_calces_documentation.js +53 -58
  246. package/dist/paraglide/messages/text_calces_scientific_calculator.d.ts +14 -2
  247. package/dist/paraglide/messages/text_calces_scientific_calculator.js +53 -58
  248. package/dist/paraglide/messages/text_currency_converter.d.ts +14 -2
  249. package/dist/paraglide/messages/text_currency_converter.js +53 -58
  250. package/dist/paraglide/messages/text_logout.d.ts +14 -2
  251. package/dist/paraglide/messages/text_logout.js +53 -58
  252. package/dist/paraglide/messages/text_select_language.d.ts +14 -2
  253. package/dist/paraglide/messages/text_select_language.js +53 -58
  254. package/dist/paraglide/messages/text_unit_converter.d.ts +14 -2
  255. package/dist/paraglide/messages/text_unit_converter.js +53 -58
  256. package/dist/paraglide/registry.d.ts +13 -0
  257. package/dist/paraglide/registry.js +15 -0
  258. package/dist/paraglide/runtime.d.ts +243 -126
  259. package/dist/paraglide/runtime.js +473 -148
  260. package/dist/paraglide/server.d.ts +13 -20
  261. package/dist/paraglide/server.js +92 -40
  262. package/dist/stories/ComponentOverview.stories.svelte +533 -0
  263. package/dist/stories/ComponentOverview.stories.svelte.d.ts +6 -0
  264. package/dist/themes/tera-ui-base.css +242 -77
  265. package/dist/themes/theme-ai.css +100 -0
  266. package/dist/themes/theme-marketing.css +91 -0
  267. package/dist/themes/theme-professional.css +41 -0
  268. package/package.json +35 -29
  269. package/dist/tera-i18n/projects/tera-system-ui/project.inlang/.meta.json +0 -3
  270. package/dist/tera-i18n/projects/tera-system-ui/project.inlang/README.md +0 -103
  271. package/dist/tera-i18n/projects/tera-system-ui/project.inlang/project_id +0 -1
  272. package/dist/themes/tw-preset.cjs +0 -160
  273. package/dist/themes/tw-preset.d.cts +0 -157
package/dist/COMPONENT_API.md CHANGED
@@ -1,539 +1,2 @@
1
- # tera-system-ui Component Library
2
-
3
- Svelte 5 UI library built with Tailwind CSS and tailwind-variants.
4
-
5
- ## Quick Import
6
-
7
- ```typescript
8
- import { Button, Input, Dialog } from 'tera-system-ui';
9
- ```
10
-
11
- ## Setup
12
-
13
- Import base CSS in your app:
14
- ```typescript
15
- import 'tera-system-ui/lib/themes/tera-ui-base.css';
16
- ```
17
-
18
- Add dark mode class to html: `<html class="dark">` or use `LightDarkToggle` component.
19
-
20
- ---
21
-
22
- ## Core Patterns
23
-
24
- ### Variant Props
25
- All components use `variant`, `size`, and `disabled` props via tailwind-variants.
26
-
27
- ### Ref Forwarding
28
- All components expose `ref` prop for imperative access.
29
-
30
- ### Snippets
31
- Svelte 5 snippets via `children?: Snippet`.
32
-
33
- ### Dark Mode
34
- Toggle with `.dark` class on container. Components auto-adapt via CSS variables.
35
-
36
- ---
37
-
38
- ## Design Token System
39
-
40
- ### Color Tokens
41
-
42
- **Primary (Blue):**
43
- | Token | Light | Dark | Usage |
44
- |-------|-------|------|-------|
45
- | `--color-primary-50` | rgb(235, 243, 254) | rgb(25, 55, 103) | Lightest bg |
46
- | `--color-primary-100` | rgb(194, 216, 252) | rgb(32, 72, 135) | Hover bg |
47
- | `--color-primary-500` | rgb(59, 130, 246) | rgb(98, 155, 248) | Default |
48
- | `--color-primary-600` | rgb(54, 118, 224) | rgb(124, 171, 249) | Hover |
49
- | `--color-primary-700` | rgb(42, 92, 175) | rgb(165, 198, 251) | Active |
50
-
51
- **Neutral Tokens (for backgrounds/borders):**
52
- | Token | Light | Dark | Usage |
53
- |-------|-------|------|-------|
54
- | `--color-neutral-token-1` | rgb(255,255,255) | rgb(0,0,0) | Page bg |
55
- | `--color-neutral-token-3` | rgb(245,245,245) | rgb(31,31,31) | Input bg |
56
- | `--color-neutral-token-5` | rgb(217,217,217) | rgb(69,69,69) | Borders |
57
- | `--color-neutral-token-7` | rgb(140,140,140) | rgb(140,140,140) | Muted text |
58
- | `--color-neutral-token-13` | rgb(0,0,0) | rgb(255,255,255) | Text |
59
-
60
- **Semantic Colors:**
61
- - `--color-error-*`: Red (validation, danger actions)
62
- - `--color-warning-*`: Orange (warnings)
63
- - `--color-success-*`: Green (success states)
64
- - `--color-brand-*`: Brand blue
65
-
66
- ### Typography
67
-
68
- ```css
69
- --font-sans: "Open Sans Variable", system-ui, sans-serif;
70
- --font-mono: "Roboto Mono Variable", monospace;
71
- ```
72
-
73
- ### Spacing / Sizing
74
-
75
- ```css
76
- --tera-control-height-xs: 20px; /* Button xs */
77
- --tera-control-height-sm: 24px; /* Button sm */
78
- --tera-control-height-base: 32px; /* Button md */
79
- --tera-control-height-lg: 40px; /* Button lg */
80
- ```
81
-
82
- ### Border Radius
83
-
84
- ```css
85
- --tera-radius-sm: 2px;
86
- --tera-radius-base: 6px; /* Default */
87
- --tera-radius-lg: 8px;
88
- --border-radius-container: 0.5rem; /* Cards, dialogs */
89
- ```
90
-
91
- ### Transitions
92
-
93
- ```css
94
- --tera-transition-fast: 0.1s cubic-bezier(0.645, 0.045, 0.355, 1);
95
- --tera-transition-base: 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
96
- --tera-transition-slow: 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
97
- ```
98
-
99
- ### Shadows / Focus
100
-
101
- ```css
102
- --tera-focus-shadow: 0 0 0 2px rgba(59, 130, 246, 0.1);
103
- --tera-focus-shadow-error: 0 0 0 2px rgba(239, 68, 68, 0.1);
104
- --tera-focus-shadow-warning: 0 0 0 2px rgba(249, 115, 22, 0.1);
105
- --tera-focus-shadow-success: 0 0 0 2px rgba(34, 197, 94, 0.1);
106
- ```
107
-
108
- ### Header Height
109
-
110
- ```css
111
- --header-height: 3rem; /* Mobile */
112
- --header-height: 3.5rem; /* >= md breakpoint */
113
- ```
114
-
115
- ---
116
-
117
- ## Component Usage
118
-
119
- ### Button
120
- ```typescript
121
- import { Button, ButtonProps } from 'tera-system-ui';
122
- ```
123
- **Props:**
124
- - `variant?: 'primary' | 'default' | 'dashed' | 'text' | 'link'`
125
- - `size?: 'xs' | 'sm' | 'md' | 'lg'`
126
- - `shape?: 'default' | 'circle' | 'round'`
127
- - `disabled?: boolean`
128
- - `loading?: boolean`
129
- - `icon?: boolean` (removes padding for icon-only)
130
- - `danger?: boolean` (red variant for destructive actions)
131
- - `block?: boolean` (full width)
132
-
133
- **Example:**
134
- ```svelte
135
- <Button variant="primary" size="md" onclick={() => handleClick()}>
136
- Save
137
- </Button>
138
- <Button variant="danger" icon>
139
- <IconTrash />
140
- </Button>
141
- ```
142
-
143
- ### Input
144
- ```typescript
145
- import { Input, InputProps } from 'tera-system-ui';
146
- ```
147
- **Props:**
148
- - `variant?: 'outlined' | 'filled' | 'borderless'`
149
- - `size?: 'sm' | 'md' | 'lg'`
150
- - `disabled?: boolean`
151
- - `status?: 'error' | 'warning'`
152
- - `value?: string`
153
- - `prefix?: Snippet` (icon before input)
154
- - `suffix?: Snippet` (icon after input)
155
- - `allowClear?: boolean`
156
-
157
- **Example:**
158
- ```svelte
159
- <Input placeholder="Enter name" prefix={<IconSearch />} />
160
- <Input status="error" value={value} oninput={(e) => handleInput(e)} />
161
- ```
162
-
163
- ### Select
164
- ```typescript
165
- import { Select, SelectProps } from 'tera-system-ui';
166
- ```
167
- Same variants as Input. Uses native `<select>` with chevron icon.
168
-
169
- **Example:**
170
- ```svelte
171
- <Select value={selected} onchange={(e) => handleChange(e.target.value)}>
172
- <option value="a">Option A</option>
173
- <option value="b">Option B</option>
174
- </Select>
175
- ```
176
-
177
- ### Combobox
178
- ```typescript
179
- import { Combobox, ComboboxProps } from 'tera-system-ui';
180
- ```
181
- Wrapper for bits-ui command palette. No variant props.
182
-
183
- ### TextArea
184
- ```typescript
185
- import { TextArea, TextAreaProps, AutoSizeConfig } from 'tera-system-ui';
186
- ```
187
- **Props:**
188
- - `variant?: 'outlined' | 'filled' | 'borderless'`
189
- - `size?: 'sm' | 'md' | 'lg'`
190
- - `autoSize?: boolean | { minRows?: number, maxRows?: number }`
191
- - `allowClear?: boolean`
192
- - `showCount?: boolean`
193
- - `maxLength?: number`
194
-
195
- **Example:**
196
- ```svelte
197
- <TextArea placeholder="Description" autoSize={{ minRows: 2, maxRows: 6 }} />
198
- ```
199
-
200
- ### Checkbox
201
- ```typescript
202
- import { Checkbox, CheckboxProps } from 'tera-system-ui';
203
- ```
204
- **Example:**
205
- ```svelte
206
- <Checkbox checked={checked} onchange={() => toggle()}>
207
- Accept terms
208
- </Checkbox>
209
- ```
210
-
211
- ### Switch
212
- ```typescript
213
- import { Switch, SwitchProps } from 'tera-system-ui';
214
- ```
215
- **Props:** `checked?: boolean`
216
-
217
- **Example:**
218
- ```svelte
219
- <Switch checked={enabled} onchange={() => toggle()} />
220
- ```
221
-
222
- ### Slider
223
- ```typescript
224
- import { Slider, SliderProps } from 'tera-system-ui';
225
- ```
226
- **Props:** `min: number`, `max: number`, `step: number`, `value: number`, `showTicks?: boolean`, `onchange?: (value: number) => void`
227
-
228
- **Example:**
229
- ```svelte
230
- <Slider min={0} max={100} step={1} value={50} showTicks onchange={(v) => handleChange(v)} />
231
- ```
232
-
233
- ### StarRating
234
- ```typescript
235
- import { StarRating, StarRatingProps } from 'tera-system-ui';
236
- ```
237
- **Props:** `size?: 'sm' | 'md' | 'lg'`, `value?: number`, `onchange?: (value: number) => void`
238
-
239
- **Example:**
240
- ```svelte
241
- <StarRating value={4} onchange={(v) => setRating(v)} />
242
- ```
243
-
244
- ### Dialog
245
- ```typescript
246
- import { Dialog, DialogProps, DialogPropsAstro } from 'tera-system-ui';
247
- ```
248
- **Props:**
249
- - `open?: boolean`
250
- - `closeOnClickOutside?: boolean`
251
- - `closeButton?: boolean`
252
- - `position?: 'top' | 'center'`
253
- - `focusTriggerAfterClose?: boolean`
254
- - `header?: Snippet`
255
- - `footer?: Snippet`
256
- - `staticRender?: boolean` (render without open/close animation)
257
- - `triggerRef?: HTMLElement` (returns focus here on close)
258
- - `padding?: 'none'`
259
-
260
- **Example:**
261
- ```svelte
262
- <Dialog open={showDialog} onclose={() => showDialog = false}>
263
- {#snippet header()}Confirm Action{/snippet}
264
- Are you sure?
265
- {#snippet footer()}
266
- <Button onclick={() => showDialog = false}>Cancel</Button>
267
- <Button variant="primary" onclick={() => confirm()}>Confirm</Button>
268
- {/snippet}
269
- </Dialog>
270
- ```
271
-
272
- ### DropdownMenu
273
- ```typescript
274
- import { DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator } from 'tera-system-ui';
275
- ```
276
- **Props:** `triggerRef: HTMLElement`, `open?: boolean`
277
- **DropdownMenuItem:** `onclick?: (e: MouseEvent) => void`, `href?: string`, `linkProps?: HTMLAnchorAttributes`
278
-
279
- **Example:**
280
- ```svelte
281
- <DropdownMenu triggerRef={menuButton} open={open}>
282
- <DropdownMenuItem onclick={() => handleEdit()}>Edit</DropdownMenuItem>
283
- <DropdownMenuSeparator />
284
- <DropdownMenuItem onclick={() => handleDelete()} danger>Delete</DropdownMenuItem>
285
- </DropdownMenu>
286
- ```
287
-
288
- ### Accordion
289
- ```typescript
290
- import { Accordion, AccordionItem, AccordionContent, AccordionTrigger } from 'tera-system-ui';
291
- ```
292
- **Accordion Props:**
293
- - `type: 'multiple' | 'single'`
294
- - `value: string | string[]`
295
- - `onchange?: (value: string | string[]) => void`
296
- - `controlledValue?: boolean`
297
-
298
- **AccordionItem Props:** `value: string`
299
-
300
- **Example:**
301
- ```svelte
302
- <Accordion type="multiple" value={openItems} onchange={(v) => openItems = v}>
303
- <AccordionItem value="item1">
304
- <AccordionTrigger>What is tera-system-ui?</AccordionTrigger>
305
- <AccordionContent>A Svelte 5 component library.</AccordionContent>
306
- </AccordionItem>
307
- </Accordion>
308
- ```
309
-
310
- ### Tabs
311
- ```typescript
312
- import { Tabs, TabsList, TabsItem, TabsContent } from 'tera-system-ui';
313
- ```
314
- **Tabs Props:** `value?: string`, `onchange?: (newTab: string) => void`
315
- **TabsItem Props:** `value: string`
316
- **TabsContent Props:** `value: string`
317
-
318
- Uses Svelte context internally.
319
-
320
- **Example:**
321
- ```svelte
322
- <Tabs value={activeTab} onchange={(t) => activeTab = t}>
323
- <TabsList>
324
- <TabsItem value="tab1">Tab One</TabsItem>
325
- <TabsItem value="tab2">Tab Two</TabsItem>
326
- </TabsList>
327
- <TabsContent value="tab1">Content 1</TabsContent>
328
- <TabsContent value="tab2">Content 2</TabsContent>
329
- </Tabs>
330
- ```
331
-
332
- ### Popover
333
- ```typescript
334
- import { Popover, PopoverProps } from 'tera-system-ui';
335
- ```
336
- **Props:**
337
- - `triggerRef: HTMLElement`
338
- - `open?: boolean`
339
- - `offset?: number` (px from trigger)
340
- - `padding?: number` (px from edges)
341
- - `focusTriggerAfterClose?: boolean`
342
- - `flip?: boolean` (flip placement in viewport)
343
- - `autoTrigger?: boolean` (close on click outside)
344
-
345
- **Example:**
346
- ```svelte
347
- <Popover triggerRef={button} offset={8}>
348
- <div class="p-4">Popover content</div>
349
- </Popover>
350
- ```
351
-
352
- ### PopoverResponsive
353
- ```typescript
354
- import { PopoverResponsive, PopoverResponsiveProps } from 'tera-system-ui';
355
- ```
356
- Responsive popover that becomes full-screen on mobile.
357
-
358
- ### SideNavigation
359
- ```typescript
360
- import { SideNavigation, SideNavigationLayout, toggleSideNavigation, SideNavigationItem } from 'tera-system-ui';
361
- ```
362
- **SideNavigationItem:** `{ href: string, exactHref?: string, icon?: Snippet, title: string }`
363
- **SideNavigation Props:** `sideNavHref?: string`, `language?: string`, `items?: SideNavigationItem[]`, `bottomChildren?: Snippet`
364
-
365
- **Example:**
366
- ```svelte
367
- <SideNavigationLayout>
368
- <svelte:fragment slot="sidebar">
369
- <SideNavigation
370
- sideNavHref="/"
371
- items={[
372
- { href: '/dashboard', title: 'Dashboard', icon: IconDashboard },
373
- { href: '/settings', title: 'Settings', icon: IconSettings },
374
- ]}
375
- />
376
- </svelte:fragment>
377
- <main>Content</main>
378
- </SideNavigationLayout>
379
- ```
380
-
381
- ### Header
382
- ```typescript
383
- import { Header, HeaderProps } from 'tera-system-ui';
384
- ```
385
- **Props:** `onHamburgerClick?: () => void`
386
-
387
- **Example:**
388
- ```svelte
389
- <Header onHamburgerClick={() => toggleSideNav()} />
390
- ```
391
-
392
- ### Avatar
393
- ```typescript
394
- import { Avatar, AvatarProps } from 'tera-system-ui';
395
- ```
396
- **Props:**
397
- - `size?: 'sm' | 'md' | 'lg' | 'xl'`
398
- - `border?: boolean` (shows primary border)
399
- - `alt?: string`, `src?: string`
400
- - `userUid?: string`, `apiUrl?: string` (for fetching user image)
401
-
402
- **Example:**
403
- ```svelte
404
- <Avatar src={user.image} size="lg" border />
405
- ```
406
-
407
- ### BrandLogo
408
- ```typescript
409
- import { BrandLogo, BrandLogoProps } from 'tera-system-ui';
410
- ```
411
- **Props:** `theme?: 'light' | 'dark' | 'auto'`, `shape?: 'square'`
412
-
413
- ### Label
414
- ```typescript
415
- import { Label, LabelProps } from 'tera-system-ui';
416
- ```
417
- **Props:** `size?: 'sm' | 'md' | 'lg'`, `required?: boolean` (shows asterisk)
418
-
419
- **Example:**
420
- ```svelte
421
- <Label for="email" required>Email</Label>
422
- <Input id="email" />
423
- ```
424
-
425
- ### UserAvatarWithMenu
426
- ```typescript
427
- import { UserAvatarWithMenu, UserAvatarWithMenuProps } from 'tera-system-ui';
428
- ```
429
- **Props:** `user?: UserData`, `onLogout?: () => void`
430
-
431
- Combines Avatar with DropdownMenu for user account.
432
-
433
- ### LanguagePickerButton
434
- ```typescript
435
- import { LanguagePickerButton, LanguagePickerButtonProps } from 'tera-system-ui';
436
- ```
437
- **Props:** `language?: string`, `supportLanguages?: string[]`, `basePath?: string`, `open?: boolean`
438
-
439
- ### LightDarkToggle
440
- ```typescript
441
- import { LightDarkToggle, LightDarkToggleProps } from 'tera-system-ui';
442
- ```
443
- Toggle dark/light mode. Adds/removes `.dark` class from `<html>`.
444
-
445
- ### TeraUiContext
446
- ```typescript
447
- import { TeraUiContext, TeraUiContextProps } from 'tera-system-ui';
448
- ```
449
- Provides global config via Svelte context:
450
- - `basePath?: string`
451
- - `supportLanguages?: AvailableLanguageTag[]`
452
- - `language?: AvailableLanguageTag`
453
- - `sideNavHref?: string`
454
- - `apiUrl?: string`
455
-
456
- ### Fonts
457
- ```typescript
458
- import { TeraFontSansSerif, TeraFontMono } from 'tera-system-ui';
459
- ```
460
- Font components for Open Sans and Roboto Mono.
461
-
462
- ### Icons
463
- ```typescript
464
- import { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCoin, IconCoinConvert, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconLogout, IconMoon, IconPointFilled, IconSearch, IconSettings, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from 'tera-system-ui';
465
- ```
466
- Svelte icon components. All use currentColor stroke.
467
-
468
- **Example:**
469
- ```svelte
470
- <IconCheck class="stroke-green-500" />
471
- ```
472
-
473
- ### Command (bits-ui wrapper)
474
- ```typescript
475
- import { Command, CommandEmpty, CommandGroup, CommandItem, CommandLinkItem, CommandInput, CommandList, CommandSeparator, CommandShortcut, CommandLoading } from 'tera-system-ui';
476
- ```
477
- Searchable command palette (like Cmd+K).
478
-
479
- ---
480
-
481
- ## Types
482
-
483
- ### UserData
484
- ```typescript
485
- interface UserData {
486
- displayName?: string;
487
- profileImage?: any;
488
- username?: string;
489
- userUid?: string;
490
- email?: string;
491
- language?: string;
492
- jwtToken?: JwtToken;
493
- roleId?: string;
494
- reputation?: string;
495
- // ... additional fields
496
- }
497
- ```
498
-
499
- ---
500
-
501
- ## Styling Guidelines
502
-
503
- ### Tailwind Classes Using Tokens
504
- ```html
505
- <!-- Colors -->
506
- <div class="bg-primary-500 text-neutral-token-13 border-neutral-token-5" />
507
- <div class="bg-error-100 text-error-600" />
508
- <div class="bg-success-500 text-white" />
509
-
510
- <!-- Focus ring -->
511
- <div class="focus:shadow-[0_0_0_2px_rgba(59,130,246,0.1)]" />
512
-
513
- <!-- Heights match components -->
514
- <div class="h-8"> <!-- matches --tera-control-height-base -->
515
- <div class="h-10"> <!-- matches --tera-control-height-lg -->
516
-
517
- <!-- Border radius -->
518
- <div class="rounded-md"> <!-- --tera-radius-base -->
519
- <div class="rounded-container"> <!-- --border-radius-container -->
520
- ```
521
-
522
- ### Dark Mode
523
- ```html
524
- <!-- Manual -->
525
- <div class="dark:bg-neutral-token-1 dark:text-neutral-token-13" />
526
-
527
- <!-- Auto (uses :where(.dark, .dark *)) -->
528
- <div class="[&.dark]:bg-neutral-token-1" />
529
- ```
530
-
531
- ---
532
-
533
- ## Key Implementation Details
534
-
535
- - **Button wave effect**: `btn-wave` class + `data-variant` attribute triggers antd-style wave animation
536
- - **bits-ui**: Command, Combobox, DropdownMenu use bits-ui library
537
- - **Floating-ui**: Popover, DropdownMenu use floating-ui for positioning
538
- - **Svelte 5 runes**: Uses `$state`, `$derived`, `$effect` internally
539
- - **No default exports**: Always use named exports
1
+ Read file in /llms/index.md for installation instructions, setup, and basic usage of the Tera System UI component
2
+ library. Each component has its own guide linked in the Component Guides section.
package/dist/components/accordion/Accordion.d.ts CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @component Accordion - Collapsible content panels with single or multi-open support.
3
+ * Built on BitsUI Accordion primitive with full keyboard navigation.
4
+ */
1
5
  import { type VariantProps } from "tailwind-variants";
2
6
  import type { Snippet } from "svelte";
3
7
  import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
@@ -5,15 +9,30 @@ export declare const styles: import("tailwind-variants").TVReturnType<{}, undefi
5
9
  type AccordionVariants = VariantProps<typeof styles>;
6
10
  export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, AccordionVariants {
7
11
  children?: Snippet;
12
+ /** Additional CSS classes for the root element. */
8
13
  class?: string;
14
+ /** Whether only one item can be open at a time ('single') or many ('multiple'). */
9
15
  type: 'multiple' | 'single';
16
+ /** The currently open item value(s). Bindable. */
10
17
  value: string | string[];
18
+ /** Called when the open item(s) change. */
11
19
  onchange?: (value: string | string[]) => void;
20
+ /** Use controlled mode — manage value externally and pass it back via onchange. */
12
21
  controlledValue?: boolean;
22
+ /** Whether the entire accordion is disabled. */
23
+ disabled?: boolean;
24
+ /** Whether keyboard navigation wraps around at the first/last item. */
25
+ loop?: boolean;
26
+ /** Layout orientation — affects arrow-key navigation direction. */
27
+ orientation?: 'horizontal' | 'vertical';
28
+ /** Bindable reference to the root element. */
13
29
  ref?: HTMLDivElement | null;
14
30
  }
15
31
  export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
32
+ /** Unique identifier for this item — matched against the root `value`. */
16
33
  value: string;
34
+ /** Prevents the user from interacting with this specific item. */
35
+ disabled?: boolean;
17
36
  ref?: HTMLDivElement | null;
18
37
  children?: Snippet;
19
38
  }
@@ -23,6 +42,11 @@ export interface AccordionTriggerProps extends HTMLButtonAttributes {
23
42
  }
24
43
  export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
25
44
  children?: Snippet;
45
+ /**
46
+ * Keep the content mounted in the DOM even when the item is collapsed.
47
+ * Useful for Svelte transitions or preserving internal component state.
48
+ */
49
+ forceMount?: boolean;
26
50
  ref?: HTMLDivElement | null;
27
51
  }
28
52
  export {};
package/dist/components/accordion/Accordion.js CHANGED
@@ -1,3 +1,7 @@
1
+ /**
2
+ * @component Accordion - Collapsible content panels with single or multi-open support.
3
+ * Built on BitsUI Accordion primitive with full keyboard navigation.
4
+ */
1
5
  import { tv } from "tailwind-variants";
2
6
  export const styles = tv({
3
7
  base: '',
package/dist/components/accordion/components/Accordion.svelte CHANGED
@@ -1,11 +1,5 @@
1
- <script lang="ts">
2
- import {Accordion as AccordionPrimitive} from "bits-ui";
3
-
4
- let {
5
- ref = $bindable(null),
6
- value = $bindable(),
7
- ...restProps
8
- }: AccordionPrimitive.RootProps = $props();
1
+ <script lang="ts">import { Accordion as AccordionPrimitive } from "bits-ui";
2
+ let { ref = $bindable(null), value = $bindable(), ...restProps } = $props();
9
3
  </script>
10
4
 
11
5
  <AccordionPrimitive.Root
package/dist/components/accordion/components/AccordionContent.svelte CHANGED
@@ -1,22 +1,15 @@
1
- <script lang="ts">
2
- import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
3
- import {cn} from "../../../utils";
4
-
5
- let {
6
- ref = $bindable(null),
7
- class: className,
8
- children,
9
- ...restProps
10
- }: WithoutChild<AccordionPrimitive.ContentProps> = $props();
1
+ <script lang="ts">import { Accordion as AccordionPrimitive } from "bits-ui";
2
+ import { cn } from "../../../utils";
3
+ let { ref = $bindable(null), class: className, children, ...restProps } = $props();
11
4
  </script>
12
5
 
13
6
  <AccordionPrimitive.Content
14
7
  bind:ref
15
8
  class={cn(
16
- "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm transition-all pb-4",
9
+ "data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down overflow-hidden text-sm",
17
10
  className
18
11
  )}
19
12
  {...restProps}
20
13
  >
21
- {@render children?.()}
14
+ <div class="pb-4">{@render children?.()}</div>
22
15
  </AccordionPrimitive.Content>
package/dist/components/accordion/components/AccordionItem.svelte CHANGED
@@ -1,12 +1,6 @@
1
- <script lang="ts">
2
- import { Accordion as AccordionPrimitive } from "bits-ui";
3
- import {cn} from "../../../utils";
4
-
5
- let {
6
- ref = $bindable(null),
7
- class: className,
8
- ...restProps
9
- }: AccordionPrimitive.ItemProps = $props();
1
+ <script lang="ts">import { Accordion as AccordionPrimitive } from "bits-ui";
2
+ import { cn } from "../../../utils";
3
+ let { ref = $bindable(null), class: className, ...restProps } = $props();
10
4
  </script>
11
5
 
12
6
  <AccordionPrimitive.Item bind:ref class={cn("border-b", className)} {...restProps} />
package/dist/components/accordion/components/AccordionTrigger.svelte CHANGED
@@ -1,17 +1,7 @@
1
- <script lang="ts">
2
- import { Accordion as AccordionPrimitive, type WithoutChild } from "bits-ui";
3
- import { cn } from "../../../utils";
4
- import {IconChevronDown} from "../../icons";
5
-
6
- let {
7
- ref = $bindable(null),
8
- class: className,
9
- level = 3,
10
- children,
11
- ...restProps
12
- }: WithoutChild<AccordionPrimitive.TriggerProps> & {
13
- level?: AccordionPrimitive.HeaderProps["level"];
14
- } = $props();
1
+ <script lang="ts">import { Accordion as AccordionPrimitive } from "bits-ui";
2
+ import { cn } from "../../../utils";
3
+ import { IconChevronDown } from "../../icons";
4
+ let { ref = $bindable(null), class: className, level = 3, children, ...restProps } = $props();
15
5
  </script>
16
6
 
17
7
  <AccordionPrimitive.Header {level} class="flex">
@@ -24,6 +14,6 @@
24
14
  {...restProps}
25
15
  >
26
16
  {@render children?.()}
27
- <IconChevronDown class="size-4 shrink-0 transition-transform duration-200" />
17
+ <IconChevronDown class="size-4 shrink-0 transition-transform ease-ui duration-150" />
28
18
  </AccordionPrimitive.Trigger>
29
19
  </AccordionPrimitive.Header>