tera-system-ui 0.1.64 → 0.1.67

package/dist/components/tabs/Tabs.svelte.js

@@ -1,19 +1,9 @@
+/**
+ * @component Tabs - Tabbed content panels with line and iOS segmented variants.
+ * Parts: Tabs, TabsList, TabsItem, TabsContent.
+ * Built on BitsUI Tabs primitive.
+ */
 import { getContext, setContext } from "svelte";
-const CONTEXT_KEY = 'tabs-context';
-export function createContext(props) {
-    let currentTab = $state(props.currentTab);
-    setContext(CONTEXT_KEY, {
-        get currentTab() {
-            return currentTab;
-        },
-        set currentTab(value) {
-            if (currentTab !== value) {
-                currentTab = value;
-                props.onchange?.(value);
-            }
-        }
-    });
-}
-export function getCtx() {
-    return getContext(CONTEXT_KEY);
-}
+const TABS_CTX = 'tera-tabs-ctx';
+export const setTabsContext = (ctx) => setContext(TABS_CTX, ctx);
+export const getTabsContext = () => getContext(TABS_CTX) ?? { variant: 'line', orientation: 'horizontal' };

package/dist/components/tabs/components/Tabs.svelte

@@ -1,33 +1,27 @@
-<script lang="ts">
-    import {createContext, getCtx, type TabsProps} from "../Tabs.svelte";
-    import {cn} from "../../../utils/utils";
-
-    let {
-        children,
-        value = $bindable(),
-        class: className,
-        onchange,
-        ...props
-    }: TabsProps = $props();
-
-    function onTabChange(currentTab: string) {
-        onchange?.(currentTab)
-        value = currentTab
-    }
-
-    createContext({
-        currentTab: value,
-        onchange: onTabChange
-    })
-
-    const context = getCtx()
-
-    $effect(() => {
-        context.currentTab = value
-    })
-</script>
-
-<div data-tabs-root
-     class={cn("grid grid-rows-[auto_1fr] max-h-full gap-2", className)}>
-    {@render children?.()}
-</div>
+<script lang="ts">import { Tabs as TabsPrimitive } from 'bits-ui';
+import { cn } from '../../../utils/utils.js';
+import { setTabsContext } from '../Tabs.svelte.js';
+let { children, value = $bindable(null), class: className, variant = 'line', onchange, activationMode, orientation = 'horizontal', loop, ...props } = $props();
+// Pass getter objects so consumers read the current value reactively
+setTabsContext({
+    get variant() { return variant; },
+    get orientation() { return orientation; }
+});
+const isVertical = $derived(orientation === 'vertical');
+</script>
+
+<TabsPrimitive.Root
+    bind:value
+    onValueChange={onchange}
+    {activationMode}
+    {orientation}
+    {loop}
+    class={cn(
+        isVertical ? 'grid grid-cols-[auto_1fr]' : 'grid grid-rows-[auto_1fr]',
+        'max-h-full gap-2',
+        className
+    )}
+    {...props}
+>
+    {@render children?.()}
+</TabsPrimitive.Root>

package/dist/components/tabs/components/Tabs.svelte.d.ts

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

package/dist/components/tabs/components/TabsContent.svelte

@@ -1,36 +1,13 @@
-<script lang="ts">
-    import {getCtx} from "../Tabs.svelte";
-    import {cn} from "../../../utils/utils";
-
-    let {
-        children,
-        class: className,
-        value,
-        ...props
-    } = $props();
-
-    let context = getCtx()
-
-    $effect(() => {
-        // console.log(context.state.currentTab)
-    })
-</script>
-
-<div
-        role="tabpanel"
-        data-value={value}
-        data-state={context.currentTab === value ? 'active' : 'inactive'}
-        class={cn("bg-neutral-token-1 overflow-auto", className)}>
-    {@render children?.()}
-</div>
-
-<style>
-    [data-state="active"] {
-        display: block;
-    }
-    [data-state="inactive"] {
-        display: none;
-    }
-
-</style>
-
+<script lang="ts">import { Tabs as TabsPrimitive } from 'bits-ui';
+import { cn } from '../../../utils/utils.js';
+let { children, class: className, value, ref = $bindable(null), ...props } = $props();
+</script>
+
+<TabsPrimitive.Content
+    bind:ref
+    {value}
+    class={cn('overflow-auto', className)}
+    {...props}
+>
+    {@render children?.()}
+</TabsPrimitive.Content>

package/dist/components/tabs/components/TabsContent.svelte.d.ts

@@ -1,7 +1,4 @@
-declare const TabsContent: import("svelte").Component<{
-    children: any;
-    class: any;
-    value: any;
-} & Record<string, any>, {}, "">;
+import type { TabsContentProps } from '../Tabs.svelte.js';
+declare const TabsContent: import("svelte").Component<TabsContentProps, {}, "ref">;
 type TabsContent = ReturnType<typeof TabsContent>;
 export default TabsContent;

package/dist/components/tabs/components/TabsItem.svelte

@@ -1,32 +1,43 @@
-<script lang="ts">
-    import {cn} from "../../../utils/utils";
-    import {getCtx} from "../Tabs.svelte";
-
-    let {
-        children,
-        class: className,
-        value,
-        ...props
-    } = $props();
-
-    let context = getCtx()
-
-</script>
-
-<div>
-    <button class={cn("tab-button font-semibold px-2.5 py-1.5 text-neutral-token-8 hover:text-primary-token-4")}
-            data-value={value}
-            data-state={value === context.currentTab ? 'active' : 'inactive'}
-            onclick={() => {
-                context.currentTab = value
-            }}
-    >
-        {@render children?.()}
-    </button>
-</div>
-
-<style>
-    button[data-state="active"] {
-        color: var(--color-primary-token-7);
-    }
-</style>
+<script lang="ts">import { Tabs as TabsPrimitive } from 'bits-ui';
+import { cn } from '../../../utils/utils.js';
+import { getTabsContext } from '../Tabs.svelte.js';
+let { children, class: className, value, ref = $bindable(null), ...props } = $props();
+const ctx = getTabsContext();
+const variant = $derived(ctx.variant);
+</script>
+
+{#if variant === 'ios'}
+    <!-- iOS: flex-1 equal width, no bg hover (pill handles visual feedback) -->
+    <TabsPrimitive.Trigger
+        bind:ref
+        {value}
+        class={cn(
+            'relative z-10 flex-1 px-4 py-1.5 text-sm font-semibold text-center rounded-full select-none',
+            'text-text-secondary',
+            'data-[state=active]:text-text-primary',
+            'transition-colors ease-ui duration-150',
+            'outline-none focus-visible:shadow-focus',
+            className
+        )}
+        {...props}
+    >
+        {@render children?.()}
+    </TabsPrimitive.Trigger>
+{:else}
+    <!-- Default line style -->
+    <TabsPrimitive.Trigger
+        bind:ref
+        {value}
+        class={cn(
+            'tab-button font-semibold px-2.5 py-1.5 rounded',
+            'text-text-secondary hover:text-primary-token-4 hover:bg-surface-hover',
+            'transition-[color,background-color] ease-ui duration-150',
+            'data-[state=active]:text-primary-token-7',
+            'outline-none focus-visible:shadow-focus',
+            className
+        )}
+        {...props}
+    >
+        {@render children?.()}
+    </TabsPrimitive.Trigger>
+{/if}

package/dist/components/tabs/components/TabsItem.svelte.d.ts

@@ -1,7 +1,4 @@
-declare const TabsItem: import("svelte").Component<{
-    children: any;
-    class: any;
-    value: any;
-} & Record<string, any>, {}, "">;
+import { type TabsItemProps } from '../Tabs.svelte.js';
+declare const TabsItem: import("svelte").Component<TabsItemProps, {}, "ref">;
 type TabsItem = ReturnType<typeof TabsItem>;
 export default TabsItem;

package/dist/components/tabs/components/TabsList.svelte

@@ -1,58 +1,90 @@
-<script lang="ts">
-    import {cn, consoleLog, observeVisibility} from "../../../utils/utils";
-    import {getCtx} from "../Tabs.svelte";
-    import {onMount} from "svelte";
-
-    let {
-        children,
-        class: className,
-        ...props
-    } = $props();
-
-    let tabIndicator = $state()
-    let tabsList = $state()
-
-    function updateIndicator() {
-        if (!tabsList) return;
-
-        let button = tabsList.querySelector(`button[data-value="${context.currentTab}"]`)
-
-        const rect = button.getBoundingClientRect();
-        const containerRect = tabsList.getBoundingClientRect();
-
-        const left = rect.left - containerRect.left;
-        const width = rect.width;
-
-        tabIndicator.style.left = `${left}px`;
-        tabIndicator.style.width = `${width}px`;
-
-        // consoleLog('TabList', 'tabIndicator', tabIndicator)
-    }
-
-
-    let context = getCtx()
-
-    $effect(() => {
-        updateIndicator();
-    })
-
-    onMount(() => {
-        const stopObserving = observeVisibility(tabIndicator, (isVisible, entry) => {
-            if (isVisible) {
-                updateIndicator()
-            }
-        });
-
-        return () => stopObserving()
-    })
-</script>
-
-<div bind:this={tabsList}
-     data-tabs-list
-     role="tablist"
-     data-orientation="horizontal"
-     class={cn("relative flex gap-2 items-end border-b border-neutral-token-5")}>
-
-    {@render children?.()}
-    <div bind:this={tabIndicator} class="absolute bottom-0 h-0.5 bg-primary-token-5 transition-all duration-300"></div>
-</div>
+<script lang="ts">import { Tabs as TabsPrimitive } from 'bits-ui';
+import { cn } from '../../../utils/utils.js';
+import { getTabsContext } from '../Tabs.svelte.js';
+let { children, class: className, ref = $bindable(null), ...props } = $props();
+const ctx = getTabsContext();
+const variant = $derived(ctx.variant);
+const orientation = $derived(ctx.orientation);
+const isVertical = $derived(orientation === 'vertical');
+let tabsList = $state(null);
+let tabIndicator = $state(null);
+function updateIndicator() {
+    if (!tabsList || !tabIndicator)
+        return;
+    const active = tabsList.querySelector('[data-state="active"]');
+    if (!active)
+        return;
+    const containerRect = tabsList.getBoundingClientRect();
+    const rect = active.getBoundingClientRect();
+    if (isVertical) {
+        tabIndicator.style.top = `${rect.top - containerRect.top}px`;
+        tabIndicator.style.height = `${rect.height}px`;
+        tabIndicator.style.left = '';
+        tabIndicator.style.width = '';
+    }
+    else {
+        tabIndicator.style.left = `${rect.left - containerRect.left}px`;
+        tabIndicator.style.width = `${rect.width}px`;
+        tabIndicator.style.top = '';
+        tabIndicator.style.height = '';
+    }
+}
+$effect(() => {
+    if (!tabsList)
+        return;
+    // Initial position (rAF lets the browser settle before measuring)
+    requestAnimationFrame(updateIndicator);
+    // React to BitsUI's data-state attribute changes on trigger buttons
+    const mo = new MutationObserver(() => requestAnimationFrame(updateIndicator));
+    mo.observe(tabsList, { attributes: true, attributeFilter: ['data-state'], subtree: true });
+    // Reposition on container resize (e.g. responsive layout shift)
+    const ro = new ResizeObserver(() => requestAnimationFrame(updateIndicator));
+    ro.observe(tabsList);
+    return () => {
+        mo.disconnect();
+        ro.disconnect();
+    };
+});
+</script>
+
+{#if variant === 'ios'}
+    <!-- iOS segmented control: gray pill container, sliding white background — horizontal only -->
+    <TabsPrimitive.List
+        bind:ref={tabsList}
+        class={cn('relative flex bg-neutral-token-3 p-1 rounded-full', className)}
+        {...props}
+    >
+        {@render children?.()}
+        <!-- Sliding white pill (background layer) -->
+        <div
+            bind:this={tabIndicator}
+            class="absolute inset-y-1 rounded-full bg-surface shadow-sm transition-[left,width] duration-200 ease-spring pointer-events-none"
+        ></div>
+    </TabsPrimitive.List>
+{:else if isVertical}
+    <!-- Vertical line style: right-side accent bar indicator -->
+    <TabsPrimitive.List
+        bind:ref={tabsList}
+        class={cn('relative flex flex-col gap-1 border-r border-border-default', className)}
+        {...props}
+    >
+        {@render children?.()}
+        <div
+            bind:this={tabIndicator}
+            class="absolute right-0 w-0.5 rounded-full bg-primary-token-5 transition-[top,height] duration-150 ease-ui pointer-events-none"
+        ></div>
+    </TabsPrimitive.List>
+{:else}
+    <!-- Default horizontal line style: underline indicator -->
+    <TabsPrimitive.List
+        bind:ref={tabsList}
+        class={cn('relative flex gap-2 items-end border-b border-border-default', className)}
+        {...props}
+    >
+        {@render children?.()}
+        <div
+            bind:this={tabIndicator}
+            class="absolute bottom-0 h-0.5 rounded-full bg-primary-token-5 transition-[left,width] duration-150 ease-ui pointer-events-none"
+        ></div>
+    </TabsPrimitive.List>
+{/if}

package/dist/components/tabs/components/TabsList.svelte.d.ts

@@ -1,6 +1,4 @@
-declare const TabsList: import("svelte").Component<{
-    children: any;
-    class: any;
-} & Record<string, any>, {}, "">;
+import { type TabsListProps } from '../Tabs.svelte.js';
+declare const TabsList: import("svelte").Component<TabsListProps, {}, "ref">;
 type TabsList = ReturnType<typeof TabsList>;
 export default TabsList;

package/dist/components/tera-ui-context/TeraUiContext.svelte

@@ -1,26 +1,13 @@
-<script lang="ts">
-    import {type TeraUiContextProps} from "./TeraUiContext";
-    import {setGlobalContext} from "./global-context";
-
-    let {
-        children,
-        supportLanguages = ['en'],
-        language = 'en',
-        ...props
-    }: TeraUiContextProps = $props();
-
-    setGlobalContext({
-        supportLanguages,
-        language,
-        ...props
-    })
-
-    // console.log('tera-system-ui', 'TeraUIContext props', {
-    //     supportLanguages,
-    //     language,
-    //     ...props
-    // })
-
-</script>
-
-{@render children()}
+<script lang="ts">import { untrack } from 'svelte';
+import {} from "./TeraUiContext";
+import { setGlobalContext } from "./global-context";
+let { children, supportLanguages = ['en'], language = 'en', ...props } = $props();
+// setContext must be called once during init — untrack signals this is intentional
+setGlobalContext(untrack(() => ({
+    supportLanguages,
+    language,
+    ...props
+})));
+</script>
+
+{@render children()}

package/dist/components/text-area/TextArea.d.ts

@@ -23,7 +23,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         error: string;
         warning: string;
     };
-}, undefined, "w-full inline-flex items-start rounded-md outline-none font-normal text-neutral-token-13 placeholder:text-neutral-token-7 resize-y", {
+}, undefined, "w-full inline-flex items-start rounded-md outline-none font-normal text-text-primary placeholder:text-text-tertiary resize-y transition-[border-color,box-shadow,background-color,height] ease-ui duration-150", {
     variant: {
         outlined: string;
         filled: string;
@@ -67,7 +67,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         error: string;
         warning: string;
     };
-}, undefined, "w-full inline-flex items-start rounded-md outline-none font-normal text-neutral-token-13 placeholder:text-neutral-token-7 resize-y", unknown, unknown, undefined>>;
+}, undefined, "w-full inline-flex items-start rounded-md outline-none font-normal text-text-primary placeholder:text-text-tertiary resize-y transition-[border-color,box-shadow,background-color,height] ease-ui duration-150", unknown, unknown, undefined>>;
 type TextAreaVariants = VariantProps<typeof styles>;
 export type AutoSizeConfig = boolean | {
     minRows?: number;

package/dist/components/text-area/TextArea.js

@@ -1,14 +1,14 @@
 import { tv } from "tailwind-variants";
 export const styles = tv({
-    base: 'w-full inline-flex items-start rounded-md outline-none font-normal text-neutral-token-13 placeholder:text-neutral-token-7 resize-y',
+    base: 'w-full inline-flex items-start rounded-md outline-none font-normal text-text-primary placeholder:text-text-tertiary resize-y transition-[border-color,box-shadow,background-color,height] ease-ui duration-150',
     variants: {
         variant: {
-            outlined: 'border border-neutral-token-5 bg-neutral-token-1 hover:border-primary-500 focus:border-primary-600 focus:shadow-[0_0_0_2px_rgba(59,130,246,0.1)] transition-all duration-200',
-            filled: 'bg-neutral-token-3 border border-transparent hover:bg-neutral-token-4 focus:bg-neutral-token-1 focus:border-primary-600 focus:shadow-[0_0_0_2px_rgba(59,130,246,0.1)] transition-all duration-200',
-            borderless: 'bg-transparent border-0 hover:bg-neutral-token-2 focus:bg-neutral-token-2 transition-all duration-200',
+            outlined: 'border border-border-default bg-surface hover:border-interactive focus:border-interactive-hover focus:shadow-focus',
+            filled: 'bg-surface-sunken border border-transparent hover:bg-surface-hover focus:bg-surface focus:border-interactive-hover focus:shadow-focus',
+            borderless: 'bg-transparent border-0 hover:bg-surface-raised focus:bg-surface-raised',
         },
         disabled: {
-            true: 'cursor-not-allowed bg-neutral-token-3 text-neutral-token-7 border-neutral-token-5 resize-none',
+            true: 'cursor-not-allowed bg-surface-sunken text-text-disabled border-border-default resize-none',
             false: 'cursor-text',
         },
         size: {
@@ -20,20 +20,20 @@ export const styles = tv({
             true: 'pr-9'
         },
         status: {
-            error: 'border-error-500 hover:border-error-400 focus:border-error-500 focus:shadow-[0_0_0_2px_rgba(239,68,68,0.1)]',
-            warning: 'border-warning-500 hover:border-warning-400 focus:border-warning-500 focus:shadow-[0_0_0_2px_rgba(249,115,22,0.1)]',
+            error: 'border-error-default hover:border-error-hover focus:border-error-default focus:shadow-focus-error',
+            warning: 'border-warning-default hover:border-warning-hover focus:border-warning-default focus:shadow-focus-warning',
         },
     },
     compoundVariants: [
         {
             variant: 'outlined',
             disabled: true,
-            class: 'hover:border-neutral-token-5'
+            class: 'hover:border-border-default'
         },
         {
             variant: 'filled',
             disabled: true,
-            class: 'hover:bg-neutral-token-3'
+            class: 'hover:bg-surface-sunken'
         },
         {
             variant: 'borderless',

package/dist/components/text-area/TextArea.svelte

@@ -1,80 +1,56 @@
-<script lang="ts">
-    import {type AutoSizeConfig, type TextAreaProps} from "./TextArea";
-    import {styles} from "./TextArea";
-    import {IconX} from "../icons";
-
-    let {
-        children,
-        class: className,
-        value = $bindable(),
-        ref = $bindable(),
-        size = 'md',
-        disabled,
-        variant = 'outlined',
-        autoSize,
-        rows,
-        allowClear,
-        showCount,
-        maxLength,
-        status,
-        ...props
-    }: TextAreaProps = $props();
-
-    let textLength = $derived(value?.length || 0);
-
-    function createAutoSizeTextarea(node: HTMLTextAreaElement, autoSize?: AutoSizeConfig) {
-        if (!autoSize) {
-            return;
-        }
-        let minRows: number | null = null;
-        let maxRows: number | null = null;
-        if (autoSize === true) {
-            minRows = 1;
-        } else {
-            minRows = Math.max(autoSize.minRows || 0, 1);
-            maxRows = autoSize.maxRows || null;
-        }
-
-        const updateSize = () => {
-            node.style.height = 'auto';
-            const computedStyle = window.getComputedStyle(node);
-            const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
-            const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
-            const offset = borderTopWidth + borderBottomWidth;
-            const scrollHeight = node.scrollHeight + 4;
-
-            const lineHeight = parseFloat(computedStyle.lineHeight);
-            const minHeight = minRows! * lineHeight + offset;
-            const maxHeight = maxRows ? maxRows * lineHeight : null;
-
-            node.style.height = `${Math.max(minHeight, Math.min(scrollHeight, maxHeight ?? scrollHeight))}px`;
-        };
-
-        $effect(() => {
-            value;
-            updateSize();
-        });
-    }
-
-    function clearText() {
-        value = '';
-        ref?.focus();
-    }
+<script lang="ts">import {} from "./TextArea";
+import { styles } from "./TextArea";
+import { IconX } from "../icons";
+let { children, class: className, value = $bindable(), ref = $bindable(), size = 'md', disabled, variant = 'outlined', autoSize, rows, allowClear, showCount, maxLength, status, ...props } = $props();
+let textLength = $derived(value?.length || 0);
+function createAutoSizeTextarea(node, autoSize) {
+    if (!autoSize) {
+        return;
+    }
+    let minRows = null;
+    let maxRows = null;
+    if (autoSize === true) {
+        minRows = 1;
+    }
+    else {
+        minRows = Math.max(autoSize.minRows || 0, 1);
+        maxRows = autoSize.maxRows || null;
+    }
+    const updateSize = () => {
+        node.style.height = 'auto';
+        const computedStyle = window.getComputedStyle(node);
+        const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
+        const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
+        const offset = borderTopWidth + borderBottomWidth;
+        const scrollHeight = node.scrollHeight;
+        const lineHeight = parseFloat(computedStyle.lineHeight);
+        const minHeight = minRows * lineHeight + offset;
+        const maxHeight = maxRows ? maxRows * lineHeight : null;
+        node.style.height = `${Math.max(minHeight, Math.min(scrollHeight, maxHeight ?? scrollHeight))}px`;
+    };
+    $effect(() => {
+        value;
+        updateSize();
+    });
+}
+function clearText() {
+    value = '';
+    ref?.focus();
+}
 </script>
 
 <div class="relative w-full">
     <textarea
             bind:this={ref}
             use:createAutoSizeTextarea={autoSize}
-            style={autoSize ? "resize: none;" : ''}
+            style={autoSize ? "resize: none; transition-property: border-color, box-shadow, background-color;" : ''}
             class={styles({ variant, disabled , size, className, allowClear, status })}
             {disabled}
             rows={autoSize ? 1 : rows}
             maxlength={maxLength}
             {...props}
             bind:value
-    >
-    </textarea>
+    ></textarea>
 
     {#if allowClear && value && !disabled}
         <button