tera-system-ui 0.1.63 → 0.1.66

package/dist/components/toast/ToastContainer.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">import { toast } from './toast.svelte.js';
+const accentColor = {
+    success: 'bg-success-500',
+    error: 'bg-error-500',
+    info: 'bg-information-500',
+    warning: 'bg-warning-500',
+};
+const iconSymbol = {
+    success: '✓', error: '✕', info: 'ℹ', warning: '⚠',
+};
+</script>
+
+<div
+    aria-live="polite"
+    aria-label="Notifications"
+    class="fixed bottom-4 right-4 z-[9999] flex flex-col gap-2 max-sm:right-1/2 max-sm:translate-x-1/2"
+>
+    {#each toast.items as item (item.id)}
+        <div
+            class="flex items-start gap-3 min-w-[280px] max-w-sm bg-surface-raised rounded-container shadow-lg border border-border-default overflow-hidden animate-in slide-in-from-bottom-4 fade-in duration-300 ease-spring"
+        >
+            <div class="w-1 self-stretch shrink-0 {accentColor[item.variant]}"></div>
+            <div class="flex-1 py-3 pr-3">
+                <p class="text-sm font-medium text-text-primary flex items-center gap-1.5">
+                    <span class="text-xs">{iconSymbol[item.variant]}</span>
+                    {item.message}
+                </p>
+                {#if item.description}
+                    <p class="text-xs text-text-secondary mt-0.5">{item.description}</p>
+                {/if}
+                {#if item.action}
+                    <button
+                        class="mt-1.5 text-xs font-semibold text-interactive hover:underline"
+                        onclick={item.action.onclick}
+                    >{item.action.label}</button>
+                {/if}
+            </div>
+            <button
+                type="button"
+                class="p-3 text-text-tertiary hover:text-text-primary transition-colors"
+                onclick={() => toast.remove(item.id)}
+                aria-label="Close"
+            >
+                <svg class="size-3.5" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <path d="M2 2l10 10M12 2l-10 10"/>
+                </svg>
+            </button>
+        </div>
+    {/each}
+</div>

package/dist/components/toast/ToastContainer.svelte.d.ts

@@ -0,0 +1,18 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ToastContainer: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ToastContainer = InstanceType<typeof ToastContainer>;
+export default ToastContainer;

package/dist/components/toast/index.d.ts

@@ -0,0 +1,3 @@
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { toast } from './toast.svelte.js';
+export type { ToastItem, ToastVariant } from './toast.svelte.js';

package/dist/components/toast/index.js

@@ -0,0 +1,2 @@
+export { default as ToastContainer } from './ToastContainer.svelte';
+export { toast } from './toast.svelte.js';

package/dist/components/toast/toast.svelte.d.ts

@@ -0,0 +1,22 @@
+export type ToastVariant = 'success' | 'error' | 'info' | 'warning';
+export interface ToastItem {
+    id: string;
+    variant: ToastVariant;
+    message: string;
+    description?: string;
+    duration?: number;
+    action?: {
+        label: string;
+        onclick: () => void;
+    };
+}
+declare function remove(id: string): void;
+export declare const toast: {
+    readonly items: ToastItem[];
+    success: (msg: string, opts?: Omit<ToastItem, "id" | "variant" | "message">) => void;
+    error: (msg: string, opts?: Omit<ToastItem, "id" | "variant" | "message">) => void;
+    info: (msg: string, opts?: Omit<ToastItem, "id" | "variant" | "message">) => void;
+    warning: (msg: string, opts?: Omit<ToastItem, "id" | "variant" | "message">) => void;
+    remove: typeof remove;
+};
+export {};

package/dist/components/toast/toast.svelte.js

@@ -0,0 +1,18 @@
+let items = $state([]);
+function add(variant, message, opts = {}) {
+    const id = crypto.randomUUID();
+    const item = { id, variant, message, duration: 4000, ...opts };
+    items = [...items.slice(-2), item];
+    setTimeout(() => remove(id), item.duration);
+}
+function remove(id) {
+    items = items.filter(t => t.id !== id);
+}
+export const toast = {
+    get items() { return items; },
+    success: (msg, opts) => add('success', msg, opts),
+    error: (msg, opts) => add('error', msg, opts),
+    info: (msg, opts) => add('info', msg, opts),
+    warning: (msg, opts) => add('warning', msg, opts),
+    remove,
+};

package/dist/components/tooltip/Tooltip.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @component Tooltip - Floating label shown on hover or keyboard focus.
+ * Built on BitsUI Tooltip primitive with portal rendering.
+ */
+import type { Snippet } from "svelte";
+export interface TooltipProps {
+    /** Tooltip content — a plain string or a Svelte snippet for rich markup. */
+    content: string | Snippet;
+    /** Which side of the trigger the tooltip appears on. */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Alignment of the tooltip along the chosen side. */
+    align?: 'start' | 'center' | 'end';
+    /** Distance in pixels between the trigger element and the tooltip panel. */
+    sideOffset?: number;
+    /** Delay in milliseconds before the tooltip appears after hover/focus. */
+    delay?: number;
+    /** Prevents the tooltip from ever opening. */
+    disabled?: boolean;
+    /** The element that triggers the tooltip on hover/focus. */
+    children?: Snippet;
+    /** Additional CSS classes for the trigger wrapper span. */
+    class?: string;
+}

package/dist/components/tooltip/Tooltip.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tooltip/Tooltip.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">import { Tooltip as TooltipPrimitive } from 'bits-ui';
+let { content, side = 'top', align = 'center', sideOffset = 6, delay = 500, disabled, children, class: className = '', } = $props();
+</script>
+
+<TooltipPrimitive.Provider delayDuration={delay}>
+    <TooltipPrimitive.Root {disabled}>
+        <TooltipPrimitive.Trigger class="inline-flex {className}">
+            {@render children?.()}
+        </TooltipPrimitive.Trigger>
+
+        <TooltipPrimitive.Portal>
+            <TooltipPrimitive.Content
+                {side}
+                {align}
+                {sideOffset}
+                class="z-50 max-w-[200px] px-2.5 py-1.5 text-[10px] leading-tight rounded
+                    bg-neutral-token-11 text-neutral-token-1 shadow-md
+                    animate-in fade-in zoom-in-95 duration-150
+                    data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95"
+            >
+                {#if typeof content === 'string'}
+                    {content}
+                {:else}
+                    {@render content()}
+                {/if}
+                <TooltipPrimitive.Arrow class="text-neutral-token-13" />
+            </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+    </TooltipPrimitive.Root>
+</TooltipPrimitive.Provider>

package/dist/components/tooltip/Tooltip.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TooltipProps } from './Tooltip.js';
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/components/tooltip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Tooltip } from './Tooltip.svelte';
+export type { TooltipProps } from './Tooltip.js';

package/dist/components/tooltip/index.js

@@ -0,0 +1 @@
+export { default as Tooltip } from './Tooltip.svelte';

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.svelte

@@ -1,69 +1,48 @@
-<script lang="ts">
-    import {type UserAvatarWithMenuProps} from "./UserAvatarWithMenu";
-    import {Avatar} from "../avatar";
-    import {
-        DropdownMenu,
-        DropdownMenuGroup,
-        DropdownMenuHeader,
-        DropdownMenuItem,
-        DropdownMenuSeparator
-    } from "../dropdown-menu";
-    import {IconLogout, IconSettings} from "../icons";
-    import {extractShortUsernameFromEmail} from "../../internal/service/user.service";
-    import {m} from '../../paraglide/messages.js'
-
-    let {children, user, onLogout, ...props}: UserAvatarWithMenuProps = $props();
-
-    let shortUserName = extractShortUsernameFromEmail(user?.email)
-    let triggerRef = $state()
-    let open = $state(false)
-</script>
-
-
-{#if user}
-    <button class="rounded-full focus-visible:ring-0" bind:this={triggerRef}>
-        <Avatar
-                userUid={user.userUid}
-        >
-            {shortUserName}
-        </Avatar>
-    </button>
-
-    <DropdownMenu
-            bind:open
-            triggerRef={triggerRef}
-            class="!min-w-[14rem]"
-    >
-        <DropdownMenuHeader>
-            <div class="grid grid-cols-[auto_1fr] gap-2 overflow-hidden break-all items-center">
-                <Avatar border={false}
-                        size="lg"
-                        userUid={user.userUid}
-                >
-                    {shortUserName}
-                </Avatar>
-                {#if user.email}
-                    {user.email}
-                {/if}
-            </div>
-
-        </DropdownMenuHeader>
-        <DropdownMenuSeparator/>
-
-        <DropdownMenuGroup>
-            <DropdownMenuItem
-                    href="/account-settings"
-            >
-                <IconSettings/>
-                {m.text_account_settings()}
-            </DropdownMenuItem>
-        </DropdownMenuGroup>
-        <DropdownMenuSeparator/>
-        <DropdownMenuGroup>
-            <DropdownMenuItem onclick={onLogout}>
-                <IconLogout/>
-                {m.text_logout()}
-            </DropdownMenuItem>
-        </DropdownMenuGroup>
-    </DropdownMenu>
-{/if}
+<script lang="ts">import {} from "./UserAvatarWithMenu";
+import { Avatar } from "../avatar";
+import { DropdownMenu, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuItem, DropdownMenuSeparator } from "../dropdown-menu";
+import { IconLogout, IconSettings } from "../icons";
+import { extractShortUsernameFromEmail } from "../../internal/service/user.service";
+import { m } from '../../paraglide/messages.js';
+let { children, user, onLogout, ...props } = $props();
+let shortUserName = $derived(extractShortUsernameFromEmail(user?.email));
+</script>
+
+{#if user}
+    <DropdownMenu align="end" class="!min-w-[14rem]">
+        {#snippet trigger()}
+            <button class="rounded-full focus-visible:ring-0 focus-visible:outline-none cursor-pointer">
+                <Avatar userUid={user.userUid}>
+                    {shortUserName}
+                </Avatar>
+            </button>
+        {/snippet}
+
+        <DropdownMenuHeader>
+            <div class="grid grid-cols-[auto_1fr] gap-2 overflow-hidden break-all items-center">
+                <Avatar border={false} size="lg" userUid={user.userUid}>
+                    {shortUserName}
+                </Avatar>
+                {#if user.email}
+                    {user.email}
+                {/if}
+            </div>
+        </DropdownMenuHeader>
+        <DropdownMenuSeparator/>
+
+        <DropdownMenuGroup>
+            <DropdownMenuItem href="/account-settings">
+                <IconSettings/>
+                {m.text_account_settings()}
+            </DropdownMenuItem>
+        </DropdownMenuGroup>
+        <DropdownMenuSeparator/>
+
+        <DropdownMenuGroup>
+            <DropdownMenuItem onclick={onLogout}>
+                <IconLogout/>
+                {m.text_logout()}
+            </DropdownMenuItem>
+        </DropdownMenuGroup>
+    </DropdownMenu>
+{/if}

package/dist/index.d.ts

@@ -1,10 +1,16 @@
 export { Accordion, AccordionItem, AccordionContent, AccordionTrigger } from './components/accordion/index.js';
+export { ChatBubble, StreamText, ThinkingLoader, SuggestionChips, PromptInput } from './components/ai/index.js';
+export { Alert } from './components/alert/index.js';
 export { Avatar } from './components/avatar/index.js';
+export { Badge } from './components/badge/index.js';
 export { BrandLogo } from './components/brand-logo/index.js';
 export { Button } from './components/button/index.js';
+export { Card } from './components/card/index.js';
 export { Checkbox } from './components/checkbox/index.js';
 export { Combobox } from './components/combobox/index.js';
+export { DateRangePicker } from './components/date-range-picker/index.js';
 export { Dialog } from './components/dialog/index.js';
+export { Drawer } from './components/drawer/index.js';
 export { DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator } from './components/dropdown-menu/index.js';
 export { TeraFontSansSerif, TeraFontMono } from './components/fonts/index.js';
 export { Header } from './components/header/index.js';
@@ -13,23 +19,32 @@ export { Input } from './components/input/index.js';
 export { Label } from './components/label/index.js';
 export { LanguagePickerButton } from './components/language-picker-button/index.js';
 export { LightDarkToggle } from './components/light-dark-toggle/index.js';
+export { FeatureCard, StatBlock, PricingCard, TestimonialCard } from './components/marketing/index.js';
 export { Popover } from './components/popover/index.js';
 export { PopoverResponsive } from './components/popover-responsive/index.js';
 export { Select } from './components/select/index.js';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation/index.js';
+export { Skeleton } from './components/skeleton/index.js';
 export { Slider } from './components/slider/index.js';
+export { Spinner } from './components/spinner/index.js';
 export { StarRating } from './components/star-rating/index.js';
 export { Switch } from './components/switch/index.js';
+export { Table } from './components/table/index.js';
 export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs/index.js';
 export { TeraUiContext } from './components/tera-ui-context/index.js';
 export { TextArea } from './components/text-area/index.js';
+export { ToastContainer, toast } from './components/toast/index.js';
+export { Tooltip } from './components/tooltip/index.js';
 export { UserAvatarWithMenu } from './components/user-avatar-with-menu/index.js';
 export type { AccordionProps, AccordionItemProps, AccordionContentProps, AccordionTriggerProps } from './components/accordion/index.js';
 export type { AvatarProps } from './components/avatar/index.js';
+export type { BadgeProps } from './components/badge/index.js';
 export type { BrandLogoProps } from './components/brand-logo/index.js';
 export type { ButtonProps } from './components/button/index.js';
+export type { CardProps } from './components/card/index.js';
 export type { CheckboxProps } from './components/checkbox/index.js';
-export type { ComboboxProps } from './components/combobox/index.js';
+export type { ComboboxProps, ComboboxItem } from './components/combobox/index.js';
+export type { DateRangePickerProps } from './components/date-range-picker/index.js';
 export type { DialogProps, DialogPropsAstro } from './components/dialog/index.js';
 export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuHeaderProps, DropdownMenuSeparatorProps } from './components/dropdown-menu/index.js';
 export type { HeaderProps } from './components/header/index.js';
@@ -39,7 +54,7 @@ export type { LanguagePickerButtonProps } from './components/language-picker-but
 export type { LightDarkToggleProps } from './components/light-dark-toggle/index.js';
 export type { PopoverProps } from './components/popover/index.js';
 export type { PopoverResponsiveProps } from './components/popover-responsive/index.js';
-export type { SelectProps } from './components/select/index.js';
+export type { SelectProps, SelectOption } from './components/select/index.js';
 export type { SideNavigationItem, SideNavigationProps } from './components/side-navigation/index.js';
 export type { SliderProps } from './components/slider/index.js';
 export type { StarRatingProps } from './components/star-rating/index.js';
@@ -47,4 +62,6 @@ export type { SwitchProps } from './components/switch/index.js';
 export type { TabsProps, TabsListProps, TabsItemProps, TabsContentProps } from './components/tabs/index.js';
 export type { TeraUiContextProps } from './components/tera-ui-context/index.js';
 export type { TextAreaProps, AutoSizeConfig } from './components/text-area/index.js';
+export type { ToastItem, ToastVariant } from './components/toast/index.js';
+export type { TooltipProps } from './components/tooltip/index.js';
 export type { UserAvatarWithMenuProps } from './components/user-avatar-with-menu/index.js';

package/dist/index.js

@@ -1,10 +1,16 @@
 export { Accordion, AccordionItem, AccordionContent, AccordionTrigger } from './components/accordion/index.js';
+export { ChatBubble, StreamText, ThinkingLoader, SuggestionChips, PromptInput } from './components/ai/index.js';
+export { Alert } from './components/alert/index.js';
 export { Avatar } from './components/avatar/index.js';
+export { Badge } from './components/badge/index.js';
 export { BrandLogo } from './components/brand-logo/index.js';
 export { Button } from './components/button/index.js';
+export { Card } from './components/card/index.js';
 export { Checkbox } from './components/checkbox/index.js';
 export { Combobox } from './components/combobox/index.js';
+export { DateRangePicker } from './components/date-range-picker/index.js';
 export { Dialog } from './components/dialog/index.js';
+export { Drawer } from './components/drawer/index.js';
 export { DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator } from './components/dropdown-menu/index.js';
 export { TeraFontSansSerif, TeraFontMono } from './components/fonts/index.js';
 export { Header } from './components/header/index.js';
@@ -13,14 +19,20 @@ export { Input } from './components/input/index.js';
 export { Label } from './components/label/index.js';
 export { LanguagePickerButton } from './components/language-picker-button/index.js';
 export { LightDarkToggle } from './components/light-dark-toggle/index.js';
+export { FeatureCard, StatBlock, PricingCard, TestimonialCard } from './components/marketing/index.js';
 export { Popover } from './components/popover/index.js';
 export { PopoverResponsive } from './components/popover-responsive/index.js';
 export { Select } from './components/select/index.js';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation/index.js';
+export { Skeleton } from './components/skeleton/index.js';
 export { Slider } from './components/slider/index.js';
+export { Spinner } from './components/spinner/index.js';
 export { StarRating } from './components/star-rating/index.js';
 export { Switch } from './components/switch/index.js';
+export { Table } from './components/table/index.js';
 export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs/index.js';
 export { TeraUiContext } from './components/tera-ui-context/index.js';
 export { TextArea } from './components/text-area/index.js';
+export { ToastContainer, toast } from './components/toast/index.js';
+export { Tooltip } from './components/tooltip/index.js';
 export { UserAvatarWithMenu } from './components/user-avatar-with-menu/index.js';

package/dist/llms/accordion.md

@@ -0,0 +1,90 @@
+# Accordion
+
+Collapsible accordion with single or multi-open support. Parts: Accordion, AccordionItem, AccordionTrigger, AccordionContent.
+
+Built on BitsUI Accordion primitive with full keyboard navigation.
+
+## Import
+
+  import { Accordion, AccordionItem, AccordionTrigger, AccordionContent } from 'tera-system-ui';
+  import { Accordion } from 'tera-system-ui/accordion';  // subpath
+
+## Accordion
+
+### Props
+
+  Name                      Type                                    Required
+  ──────────────────────────────────────────────────────────────────────────
+  children                  Snippet                                 optional  
+  class                     string                                  optional  Additional CSS classes for the root element.
+  type                      'multiple' | 'single'                   required  Whether only one item can be open at a time ('single') or many ('multiple').
+  value                     string | string[]                       required  The currently open item value(s). Bindable.
+  onchange                  (value: string | string[]) => void      optional  Called when the open item(s) change.
+  controlledValue           boolean                                 optional  Use controlled mode — manage value externally and pass it back via onchange.
+  disabled                  boolean                                 optional  Whether the entire accordion is disabled.
+  loop                      boolean                                 optional  Whether keyboard navigation wraps around at the first/last item.
+  orientation               'horizontal' | 'vertical'               optional  Layout orientation — affects arrow-key navigation direction.
+  ref                       HTMLDivElement                          optional  Bindable reference to the root element.
+
+### Usage
+
+  <script>
+    import { Accordion } from 'tera-system-ui';
+  </script>
+
+  <Accordion>Content</Accordion>
+  <Accordion onchange={(v) => console.log(v)} />
+
+## AccordionItem
+
+### Props
+
+  Name                      Type                                    Required
+  ──────────────────────────────────────────────────────────────────────────
+  value                     string                                  required  Unique identifier for this item — matched against the root `value`.
+  disabled                  boolean                                 optional  Prevents the user from interacting with this specific item.
+  ref                       HTMLDivElement                          optional  (bindable)
+  children                  Snippet                                 optional  
+
+### Usage
+
+  <script>
+    import { AccordionItem } from 'tera-system-ui';
+  </script>
+
+  <AccordionItem>Content</AccordionItem>
+
+## AccordionTrigger
+
+### Props
+
+  Name                      Type                                    Required
+  ──────────────────────────────────────────────────────────────────────────
+  children                  Snippet                                 optional  
+  ref                       HTMLButtonElement                       optional  (bindable)
+
+### Usage
+
+  <script>
+    import { AccordionTrigger } from 'tera-system-ui';
+  </script>
+
+  <AccordionTrigger>Content</AccordionTrigger>
+
+## AccordionContent
+
+### Props
+
+  Name                      Type                                    Required
+  ──────────────────────────────────────────────────────────────────────────
+  children                  Snippet                                 optional  
+  forceMount                boolean                                 optional  Keep the content mounted in the DOM even when the item is collapsed. Useful for Svelte transitions or preserving internal component state.
+  ref                       HTMLDivElement                          optional  (bindable)
+
+### Usage
+
+  <script>
+    import { AccordionContent } from 'tera-system-ui';
+  </script>
+
+  <AccordionContent>Content</AccordionContent>

package/dist/llms/ai.md

@@ -0,0 +1,110 @@
+# ChatBubble
+
+AI chat UI components: ChatBubble, PromptInput, StreamText, SuggestionChips, ThinkingLoader.
+
+## Import
+
+  import { ChatBubble, PromptInput, StreamText, SuggestionChips, ThinkingLoader } from 'tera-system-ui';
+
+## ChatBubble
+
+### Props
+
+  Name                      Type                                    Required
+  ──────────────────────────────────────────────────────────────────────────
+  role                      'user' | 'assistant'                    required  
+  content                   string | Snippet                        required  
+  avatar                    Snippet                                 optional  
+  timestamp                 string                                  optional  
+  status                    'sending' | 'sent' | 'error'            optional  
+  class                     string                                  optional  
+
+### Usage
+
+  <script>
+    import { ChatBubble } from 'tera-system-ui';
+  </script>
+
+  <ChatBubble />
+
+## PromptInput
+
+### Props
+
+  Name                      Type                                    Required
+  ──────────────────────────────────────────────────────────────────────────
+  value                     string                                  optional  
+  onsubmit                  (value: string) => void                 optional  
+  placeholder               string                                  optional  
+  maxLength                 number                                  optional  
+  loading                   boolean                                 optional  
+  disabled                  boolean                                 optional  
+  suggestions               string[]                                optional  
+  class                     string                                  optional  
+
+### Usage
+
+  <script>
+    import { PromptInput } from 'tera-system-ui';
+  </script>
+
+  <PromptInput />
+
+## StreamText
+
+### Props
+
+  Name                      Type                                    Required
+  ──────────────────────────────────────────────────────────────────────────
+  text                      string                                  required  
+  speed                     StreamSpeed                             optional  
+  onComplete                () => void                              optional  
+  cursor                    boolean                                 optional  
+  class                     string                                  optional  
+
+### Usage
+
+  <script>
+    import { StreamText } from 'tera-system-ui';
+  </script>
+
+  <StreamText />
+
+## SuggestionChips
+
+### Props
+
+  Name                      Type                                    Required
+  ──────────────────────────────────────────────────────────────────────────
+  suggestions               string[]                                required  
+  onSelect                  (value: string | string[]) => void      optional  
+  label                     string                                  optional  
+  multiple                  boolean                                 optional  
+  class                     string                                  optional  
+
+### Usage
+
+  <script>
+    import { SuggestionChips } from 'tera-system-ui';
+  </script>
+
+  <SuggestionChips />
+
+## ThinkingLoader
+
+### Props
+
+  Name                      Type                                    Required
+  ──────────────────────────────────────────────────────────────────────────
+  variant                   ThinkingVariant                         optional  
+  size                      ThinkingSize                            optional  
+  label                     string                                  optional  
+  class                     string                                  optional  
+
+### Usage
+
+  <script>
+    import { ThinkingLoader } from 'tera-system-ui';
+  </script>
+
+  <ThinkingLoader />