tera-system-ui 0.1.64 → 0.1.67
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.
- package/dist/COMPONENT_API.md +2 -539
- package/dist/components/accordion/Accordion.d.ts +24 -0
- package/dist/components/accordion/Accordion.js +4 -0
- package/dist/components/accordion/components/Accordion.svelte +2 -8
- package/dist/components/accordion/components/AccordionContent.svelte +5 -12
- package/dist/components/accordion/components/AccordionItem.svelte +3 -9
- package/dist/components/accordion/components/AccordionTrigger.svelte +5 -15
- package/dist/components/ai/ChatBubble.svelte +35 -0
- package/dist/components/ai/ChatBubble.svelte.d.ts +12 -0
- package/dist/components/ai/PromptInput.svelte +58 -0
- package/dist/components/ai/PromptInput.svelte.d.ts +13 -0
- package/dist/components/ai/StreamText.svelte +41 -0
- package/dist/components/ai/StreamText.svelte.d.ts +11 -0
- package/dist/components/ai/SuggestionChips.svelte +34 -0
- package/dist/components/ai/SuggestionChips.svelte.d.ts +10 -0
- package/dist/components/ai/ThinkingLoader.svelte +34 -0
- package/dist/components/ai/ThinkingLoader.svelte.d.ts +11 -0
- package/dist/components/ai/index.d.ts +5 -0
- package/dist/components/ai/index.js +5 -0
- package/dist/components/alert/Alert.svelte +47 -0
- package/dist/components/alert/Alert.svelte.d.ts +15 -0
- package/dist/components/alert/index.d.ts +1 -0
- package/dist/components/alert/index.js +1 -0
- package/dist/components/avatar/Avatar.svelte +9 -25
- package/dist/components/badge/Badge.d.ts +52 -0
- package/dist/components/badge/Badge.js +22 -0
- package/dist/components/badge/Badge.svelte +22 -0
- package/dist/components/badge/Badge.svelte.d.ts +4 -0
- package/dist/components/badge/index.d.ts +2 -0
- package/dist/components/badge/index.js +1 -0
- package/dist/components/brand-logo/BrandLogo.svelte +12 -10
- package/dist/components/button/Button.d.ts +2 -2
- package/dist/components/button/Button.js +12 -12
- package/dist/components/button/Button.svelte +7 -34
- package/dist/components/card/Card.d.ts +68 -0
- package/dist/components/card/Card.js +28 -0
- package/dist/components/card/Card.svelte +33 -0
- package/dist/components/card/Card.svelte.d.ts +4 -0
- package/dist/components/card/index.d.ts +2 -0
- package/dist/components/card/index.js +1 -0
- package/dist/components/checkbox/Checkbox.d.ts +25 -4
- package/dist/components/checkbox/Checkbox.js +4 -0
- package/dist/components/checkbox/Checkbox.svelte +13 -16
- package/dist/components/checkbox/Checkbox.svelte.d.ts +2 -2
- package/dist/components/combobox/Combobox.d.ts +45 -9
- package/dist/components/combobox/Combobox.js +5 -7
- package/dist/components/combobox/Combobox.svelte +226 -8
- package/dist/components/combobox/Combobox.svelte.d.ts +2 -2
- package/dist/components/combobox/index.d.ts +1 -1
- package/dist/components/command/components/command-empty.svelte +3 -8
- package/dist/components/command/components/command-group.svelte +3 -13
- package/dist/components/command/components/command-input.svelte +5 -13
- package/dist/components/command/components/command-item.svelte +3 -9
- package/dist/components/command/components/command-link-item.svelte +3 -8
- package/dist/components/command/components/command-list.svelte +3 -8
- package/dist/components/command/components/command-separator.svelte +3 -8
- package/dist/components/command/components/command-shortcut.svelte +2 -10
- package/dist/components/command/components/command.svelte +29 -42
- package/dist/components/date-range-picker/DateRangePicker.svelte +490 -0
- package/dist/components/date-range-picker/DateRangePicker.svelte.d.ts +4 -0
- package/dist/components/date-range-picker/DateRangePicker.types.d.ts +38 -0
- package/dist/components/date-range-picker/DateRangePicker.types.js +1 -0
- package/dist/components/date-range-picker/index.d.ts +2 -0
- package/dist/components/date-range-picker/index.js +1 -0
- package/dist/components/dialog/Dialog.d.ts +43 -121
- package/dist/components/dialog/Dialog.js +1 -39
- package/dist/components/dialog/Dialog.svelte +103 -113
- package/dist/components/dialog/Dialog.svelte.d.ts +1 -2
- package/dist/components/dialog/dialog.scss +21 -24
- package/dist/components/drawer/Drawer.svelte +63 -0
- package/dist/components/drawer/Drawer.svelte.d.ts +16 -0
- package/dist/components/drawer/index.d.ts +1 -0
- package/dist/components/drawer/index.js +1 -0
- package/dist/components/dropdown-menu/DropdownMenu.d.ts +51 -24
- package/dist/components/dropdown-menu/DropdownMenu.js +1 -15
- package/dist/components/dropdown-menu/components/DropdownMenu.svelte +36 -34
- package/dist/components/dropdown-menu/components/DropdownMenu.svelte.d.ts +1 -1
- package/dist/components/dropdown-menu/components/DropdownMenuGroup.svelte +8 -12
- package/dist/components/dropdown-menu/components/DropdownMenuGroup.svelte.d.ts +2 -4
- package/dist/components/dropdown-menu/components/DropdownMenuHeader.svelte +11 -12
- package/dist/components/dropdown-menu/components/DropdownMenuHeader.svelte.d.ts +2 -4
- package/dist/components/dropdown-menu/components/DropdownMenuItem.svelte +27 -30
- package/dist/components/dropdown-menu/components/DropdownMenuItem.svelte.d.ts +1 -1
- package/dist/components/dropdown-menu/components/DropdownMenuSeparator.svelte +9 -11
- package/dist/components/dropdown-menu/components/DropdownMenuSeparator.svelte.d.ts +2 -4
- package/dist/components/fonts/TeraFontMono.svelte +4 -4
- package/dist/components/fonts/TeraFontMono.svelte.d.ts +1 -0
- package/dist/components/fonts/TeraFontSansSerif.svelte +4 -4
- package/dist/components/fonts/TeraFontSansSerif.svelte.d.ts +1 -1
- package/dist/components/header/Header.svelte +6 -9
- package/dist/components/header/header.scss +1 -1
- package/dist/components/icons/IconArrowBigRightFilled.svelte +3 -7
- package/dist/components/icons/IconBook.svelte +3 -6
- package/dist/components/icons/IconBookmarkPlus.svelte +3 -6
- package/dist/components/icons/IconCalculator.svelte +3 -6
- package/dist/components/icons/IconCheck.svelte +3 -6
- package/dist/components/icons/IconChevronDown.svelte +3 -6
- package/dist/components/icons/IconCoin.svelte +3 -6
- package/dist/components/icons/IconCoinConvert.svelte +2 -5
- package/dist/components/icons/IconCopy.svelte +3 -6
- package/dist/components/icons/IconCopyCheckFilled.svelte +3 -6
- package/dist/components/icons/IconHamburger.svelte +3 -6
- package/dist/components/icons/IconLanguage.svelte +3 -6
- package/dist/components/icons/IconLoader2.svelte +3 -6
- package/dist/components/icons/IconLogout.svelte +3 -6
- package/dist/components/icons/IconMoon.svelte +3 -6
- package/dist/components/icons/IconPointFilled.svelte +3 -6
- package/dist/components/icons/IconSearch.svelte +3 -6
- package/dist/components/icons/IconSettings.svelte +3 -6
- package/dist/components/icons/IconSun.svelte +3 -6
- package/dist/components/icons/IconSwitchHorizontal.svelte +3 -6
- package/dist/components/icons/IconSwitchVertical.svelte +3 -6
- package/dist/components/icons/IconTransform.svelte +3 -6
- package/dist/components/icons/IconX.svelte +3 -6
- package/dist/components/input/Input.d.ts +2 -2
- package/dist/components/input/Input.js +10 -10
- package/dist/components/input/Input.svelte +10 -26
- package/dist/components/label/Label.d.ts +2 -2
- package/dist/components/label/Label.js +2 -2
- package/dist/components/label/Label.svelte +4 -12
- package/dist/components/language-picker-button/LanguagePickerButton.svelte +23 -42
- package/dist/components/light-dark-toggle/LightDarkToggle.svelte +21 -26
- package/dist/components/marketing/FeatureCard.svelte +37 -0
- package/dist/components/marketing/FeatureCard.svelte.d.ts +13 -0
- package/dist/components/marketing/PricingCard.svelte +48 -0
- package/dist/components/marketing/PricingCard.svelte.d.ts +15 -0
- package/dist/components/marketing/StatBlock.svelte +14 -0
- package/dist/components/marketing/StatBlock.svelte.d.ts +10 -0
- package/dist/components/marketing/TestimonialCard.svelte +24 -0
- package/dist/components/marketing/TestimonialCard.svelte.d.ts +12 -0
- package/dist/components/marketing/index.d.ts +4 -0
- package/dist/components/marketing/index.js +4 -0
- package/dist/components/popover/Popover.d.ts +32 -13
- package/dist/components/popover/Popover.js +1 -7
- package/dist/components/popover/Popover.svelte +40 -158
- package/dist/components/popover/Popover.svelte.d.ts +2 -2
- package/dist/components/popover-responsive/PopoverResponsive.d.ts +18 -7
- package/dist/components/popover-responsive/PopoverResponsive.js +1 -7
- package/dist/components/popover-responsive/PopoverResponsive.svelte +25 -87
- package/dist/components/popover-responsive/PopoverResponsive.svelte.d.ts +2 -11
- package/dist/components/select/Select.d.ts +60 -23
- package/dist/components/select/Select.js +14 -35
- package/dist/components/select/Select.svelte +157 -28
- package/dist/components/select/Select.svelte.d.ts +2 -3
- package/dist/components/select/index.d.ts +1 -1
- package/dist/components/side-navigation/SideNavigation.svelte +73 -96
- package/dist/components/side-navigation/SideNavigationItem.svelte +2 -2
- package/dist/components/side-navigation/SideNavigationLayout.svelte +3 -5
- package/dist/components/side-navigation/sidenav.scss +17 -13
- package/dist/components/skeleton/Skeleton.svelte +48 -0
- package/dist/components/skeleton/Skeleton.svelte.d.ts +12 -0
- package/dist/components/skeleton/index.d.ts +1 -0
- package/dist/components/skeleton/index.js +1 -0
- package/dist/components/slider/Slider.d.ts +25 -15
- package/dist/components/slider/Slider.js +1 -7
- package/dist/components/slider/Slider.svelte +38 -164
- package/dist/components/slider/Slider.svelte.d.ts +1 -1
- package/dist/components/spinner/Spinner.svelte +39 -0
- package/dist/components/spinner/Spinner.svelte.d.ts +10 -0
- package/dist/components/spinner/index.d.ts +1 -0
- package/dist/components/spinner/index.js +1 -0
- package/dist/components/star-rating/StarRating.svelte +33 -49
- package/dist/components/switch/Switch.d.ts +19 -4
- package/dist/components/switch/Switch.js +4 -0
- package/dist/components/switch/Switch.svelte +13 -17
- package/dist/components/switch/Switch.svelte.d.ts +2 -2
- package/dist/components/table/Table.svelte +68 -0
- package/dist/components/table/Table.svelte.d.ts +40 -0
- package/dist/components/table/index.d.ts +1 -0
- package/dist/components/table/index.js +1 -0
- package/dist/components/tabs/Tabs.svelte.d.ts +45 -16
- package/dist/components/tabs/Tabs.svelte.js +8 -18
- package/dist/components/tabs/components/Tabs.svelte +27 -33
- package/dist/components/tabs/components/Tabs.svelte.d.ts +1 -1
- package/dist/components/tabs/components/TabsContent.svelte +13 -36
- package/dist/components/tabs/components/TabsContent.svelte.d.ts +2 -5
- package/dist/components/tabs/components/TabsItem.svelte +43 -32
- package/dist/components/tabs/components/TabsItem.svelte.d.ts +2 -5
- package/dist/components/tabs/components/TabsList.svelte +90 -58
- package/dist/components/tabs/components/TabsList.svelte.d.ts +2 -4
- package/dist/components/tera-ui-context/TeraUiContext.svelte +13 -26
- package/dist/components/text-area/TextArea.d.ts +2 -2
- package/dist/components/text-area/TextArea.js +9 -9
- package/dist/components/text-area/TextArea.svelte +41 -65
- package/dist/components/toast/ToastContainer.svelte +50 -0
- package/dist/components/toast/ToastContainer.svelte.d.ts +18 -0
- package/dist/components/toast/index.d.ts +3 -0
- package/dist/components/toast/index.js +2 -0
- package/dist/components/toast/toast.svelte.d.ts +22 -0
- package/dist/components/toast/toast.svelte.js +18 -0
- package/dist/components/tooltip/Tooltip.d.ts +23 -0
- package/dist/components/tooltip/Tooltip.js +1 -0
- package/dist/components/tooltip/Tooltip.svelte +30 -0
- package/dist/components/tooltip/Tooltip.svelte.d.ts +4 -0
- package/dist/components/tooltip/index.d.ts +2 -0
- package/dist/components/tooltip/index.js +1 -0
- package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.svelte +48 -69
- package/dist/index.d.ts +19 -2
- package/dist/index.js +12 -0
- package/dist/llms/accordion.md +90 -0
- package/dist/llms/ai.md +110 -0
- package/dist/llms/alert.md +29 -0
- package/dist/llms/avatar.md +34 -0
- package/dist/llms/badge.md +31 -0
- package/dist/llms/brand-logo.md +30 -0
- package/dist/llms/button.md +37 -0
- package/dist/llms/card.md +32 -0
- package/dist/llms/checkbox.md +35 -0
- package/dist/llms/colors.md +161 -0
- package/dist/llms/combobox.md +40 -0
- package/dist/llms/command.md +7 -0
- package/dist/llms/date-range-picker.md +36 -0
- package/dist/llms/dialog.md +45 -0
- package/dist/llms/drawer.md +30 -0
- package/dist/llms/dropdown-menu.md +112 -0
- package/dist/llms/fonts.md +7 -0
- package/dist/llms/header.md +26 -0
- package/dist/llms/icons.md +43 -0
- package/dist/llms/index.md +65 -0
- package/dist/llms/input.md +37 -0
- package/dist/llms/label.md +30 -0
- package/dist/llms/language-picker-button.md +30 -0
- package/dist/llms/light-dark-toggle.md +26 -0
- package/dist/llms/marketing.md +95 -0
- package/dist/llms/popover-responsive.md +32 -0
- package/dist/llms/popover.md +40 -0
- package/dist/llms/select.md +44 -0
- package/dist/llms/side-navigation.md +30 -0
- package/dist/llms/skeleton.md +28 -0
- package/dist/llms/slider.md +36 -0
- package/dist/llms/spinner.md +25 -0
- package/dist/llms/star-rating.md +31 -0
- package/dist/llms/switch.md +33 -0
- package/dist/llms/table.md +30 -0
- package/dist/llms/tabs.md +92 -0
- package/dist/llms/tera-ui-context.md +30 -0
- package/dist/llms/text-area.md +39 -0
- package/dist/llms/toast.md +7 -0
- package/dist/llms/tooltip.md +32 -0
- package/dist/llms/user-avatar-with-menu.md +28 -0
- package/dist/paraglide/README.md +72 -3
- package/dist/paraglide/messages/_index.d.ts +105 -7
- package/dist/paraglide/messages/_index.js +437 -7
- package/dist/paraglide/messages/ar.d.ts +23 -0
- package/dist/paraglide/messages/ar.js +38 -0
- package/dist/paraglide/messages/bg.d.ts +23 -0
- package/dist/paraglide/messages/bg.js +38 -0
- package/dist/paraglide/messages/bn.d.ts +23 -0
- package/dist/paraglide/messages/bn.js +38 -0
- package/dist/paraglide/messages/ca.d.ts +23 -0
- package/dist/paraglide/messages/ca.js +38 -0
- package/dist/paraglide/messages/cs.d.ts +23 -0
- package/dist/paraglide/messages/cs.js +38 -0
- package/dist/paraglide/messages/da.d.ts +23 -0
- package/dist/paraglide/messages/da.js +38 -0
- package/dist/paraglide/messages/de.d.ts +23 -0
- package/dist/paraglide/messages/de.js +38 -0
- package/dist/paraglide/messages/el.d.ts +23 -0
- package/dist/paraglide/messages/el.js +38 -0
- package/dist/paraglide/messages/en.d.ts +23 -0
- package/dist/paraglide/messages/en.js +38 -0
- package/dist/paraglide/messages/es.d.ts +23 -0
- package/dist/paraglide/messages/es.js +38 -0
- package/dist/paraglide/messages/fi.d.ts +23 -0
- package/dist/paraglide/messages/fi.js +38 -0
- package/dist/paraglide/messages/fr.d.ts +23 -0
- package/dist/paraglide/messages/fr.js +38 -0
- package/dist/paraglide/messages/he.d.ts +23 -0
- package/dist/paraglide/messages/he.js +38 -0
- package/dist/paraglide/messages/hi.d.ts +23 -0
- package/dist/paraglide/messages/hi.js +38 -0
- package/dist/paraglide/messages/hu.d.ts +23 -0
- package/dist/paraglide/messages/hu.js +38 -0
- package/dist/paraglide/messages/id.d.ts +23 -0
- package/dist/paraglide/messages/id.js +38 -0
- package/dist/paraglide/messages/it.d.ts +23 -0
- package/dist/paraglide/messages/it.js +38 -0
- package/dist/paraglide/messages/ja.d.ts +23 -0
- package/dist/paraglide/messages/ja.js +38 -0
- package/dist/paraglide/messages/ko.d.ts +23 -0
- package/dist/paraglide/messages/ko.js +38 -0
- package/dist/paraglide/messages/lt.d.ts +23 -0
- package/dist/paraglide/messages/lt.js +38 -0
- package/dist/paraglide/messages/lv.d.ts +23 -0
- package/dist/paraglide/messages/lv.js +38 -0
- package/dist/paraglide/messages/ms.d.ts +23 -0
- package/dist/paraglide/messages/ms.js +38 -0
- package/dist/paraglide/messages/nl.d.ts +23 -0
- package/dist/paraglide/messages/nl.js +38 -0
- package/dist/paraglide/messages/no.d.ts +23 -0
- package/dist/paraglide/messages/no.js +38 -0
- package/dist/paraglide/messages/pl.d.ts +23 -0
- package/dist/paraglide/messages/pl.js +38 -0
- package/dist/paraglide/messages/pt.d.ts +23 -0
- package/dist/paraglide/messages/pt.js +38 -0
- package/dist/paraglide/messages/ro.d.ts +23 -0
- package/dist/paraglide/messages/ro.js +38 -0
- package/dist/paraglide/messages/ru.d.ts +23 -0
- package/dist/paraglide/messages/ru.js +38 -0
- package/dist/paraglide/messages/sk.d.ts +23 -0
- package/dist/paraglide/messages/sk.js +38 -0
- package/dist/paraglide/messages/sl.d.ts +23 -0
- package/dist/paraglide/messages/sl.js +38 -0
- package/dist/paraglide/messages/sq.d.ts +23 -0
- package/dist/paraglide/messages/sq.js +38 -0
- package/dist/paraglide/messages/sr.d.ts +23 -0
- package/dist/paraglide/messages/sr.js +38 -0
- package/dist/paraglide/messages/sv.d.ts +23 -0
- package/dist/paraglide/messages/sv.js +38 -0
- package/dist/paraglide/messages/sw.d.ts +23 -0
- package/dist/paraglide/messages/sw.js +38 -0
- package/dist/paraglide/messages/ta.d.ts +23 -0
- package/dist/paraglide/messages/ta.js +38 -0
- package/dist/paraglide/messages/te.d.ts +23 -0
- package/dist/paraglide/messages/te.js +38 -0
- package/dist/paraglide/messages/th.d.ts +23 -0
- package/dist/paraglide/messages/th.js +38 -0
- package/dist/paraglide/messages/tl.d.ts +23 -0
- package/dist/paraglide/messages/tl.js +38 -0
- package/dist/paraglide/messages/tr.d.ts +23 -0
- package/dist/paraglide/messages/tr.js +38 -0
- package/dist/paraglide/messages/uk.d.ts +23 -0
- package/dist/paraglide/messages/uk.js +38 -0
- package/dist/paraglide/messages/vi.d.ts +23 -0
- package/dist/paraglide/messages/vi.js +38 -0
- package/dist/paraglide/messages/zh-CN.d.ts +23 -0
- package/dist/paraglide/messages/zh-CN.js +38 -0
- package/dist/paraglide/messages/zh-TW.d.ts +23 -0
- package/dist/paraglide/messages/zh-TW.js +38 -0
- package/dist/paraglide/registry.d.ts +13 -0
- package/dist/paraglide/registry.js +15 -0
- package/dist/paraglide/runtime.d.ts +243 -126
- package/dist/paraglide/runtime.js +473 -148
- package/dist/paraglide/server.d.ts +13 -20
- package/dist/paraglide/server.js +92 -40
- package/dist/stories/ComponentOverview.stories.svelte +533 -0
- package/dist/stories/ComponentOverview.stories.svelte.d.ts +6 -0
- package/dist/themes/tera-ui-base.css +664 -470
- package/dist/themes/theme-ai.css +100 -0
- package/dist/themes/theme-marketing.css +91 -0
- package/dist/themes/theme-professional.css +41 -0
- package/package.json +35 -29
- package/dist/paraglide/messages/text_account_settings.d.ts +0 -4
- package/dist/paraglide/messages/text_account_settings.js +0 -239
- package/dist/paraglide/messages/text_calces_documentation.d.ts +0 -4
- package/dist/paraglide/messages/text_calces_documentation.js +0 -239
- package/dist/paraglide/messages/text_calces_scientific_calculator.d.ts +0 -4
- package/dist/paraglide/messages/text_calces_scientific_calculator.js +0 -239
- package/dist/paraglide/messages/text_currency_converter.d.ts +0 -4
- package/dist/paraglide/messages/text_currency_converter.js +0 -239
- package/dist/paraglide/messages/text_logout.d.ts +0 -4
- package/dist/paraglide/messages/text_logout.js +0 -239
- package/dist/paraglide/messages/text_select_language.d.ts +0 -4
- package/dist/paraglide/messages/text_select_language.js +0 -239
- package/dist/paraglide/messages/text_unit_converter.d.ts +0 -4
- package/dist/paraglide/messages/text_unit_converter.js +0 -239
- package/dist/tera-i18n/projects/tera-system-ui/project.inlang/.meta.json +0 -3
- package/dist/tera-i18n/projects/tera-system-ui/project.inlang/README.md +0 -103
- package/dist/tera-i18n/projects/tera-system-ui/project.inlang/project_id +0 -1
- package/dist/themes/tw-preset.cjs +0 -160
- package/dist/themes/tw-preset.d.cts +0 -157
package/dist/COMPONENT_API.md
CHANGED
|
@@ -1,539 +1,2 @@
|
|
|
1
|
-
|
|
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.
|
|
@@ -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 {};
|
|
@@ -1,11 +1,5 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
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
|
|
@@ -1,22 +1,15 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
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
|
|
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>
|
|
@@ -1,12 +1,6 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
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} />
|
|
@@ -1,17 +1,7 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
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-
|
|
17
|
+
<IconChevronDown class="size-4 shrink-0 transition-transform ease-ui duration-150" />
|
|
28
18
|
</AccordionPrimitive.Trigger>
|
|
29
19
|
</AccordionPrimitive.Header>
|