tera-system-ui 0.1.20 → 0.1.32

package/dist/components/switch/Switch.svelte

@@ -1,35 +1,35 @@
-<script lang="ts">
-
-    import {Switch as SwitchPrimitive, type WithoutChildrenOrChild} from "bits-ui";
-    import {cn} from "../../utils";
-
-    let {
-        ref = $bindable(null),
-        class: className,
-        checked = $bindable(false),
-        ...restProps
-    }: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
-
-</script>
-
-<SwitchPrimitive.Root
-        {...restProps}
-        bind:checked
-        bind:ref
-        class={cn(
-		"relative focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input group peer h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
-        "overflow-clip",
-		className
-	)}
->
-    <div class="h-2 bg-neutral-1 w-[1px] absolute top-2 left-[0.7rem] transition-transform group-data-[state=unchecked]:-translate-x-6 group-data-[state=checked]:translate-x-0"></div>
-    <div class="size-2 border-[1px] border-neutral-token-7 absolute top-2 right-2 rounded-full transition-transform group-data-[state=unchecked]:translate-x-0 group-data-[state=checked]:translate-x-6"></div>
-    <SwitchPrimitive.Thumb
-            class={cn(
-			"bg-neutral-1 pointer-events-none block size-5 rounded-full ring-0 transition-transform t-0.5 data-[state=checked]:translate-x-[1.375rem] data-[state=unchecked]:translate-x-0.5",
-			"shadow-[0_2px_4px_rgba(0,0,0,0.2),0_2px_8px_rgba(0,0,0,0.2)]"
-		)}
-    />
-</SwitchPrimitive.Root>
-
-
+<script lang="ts">
+
+    import {Switch as SwitchPrimitive, type WithoutChildrenOrChild} from "bits-ui";
+    import {cn} from "../../utils";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        checked = $bindable(false),
+        ...restProps
+    }: WithoutChildrenOrChild<SwitchPrimitive.RootProps> = $props();
+
+</script>
+
+<SwitchPrimitive.Root
+        {...restProps}
+        bind:checked
+        bind:ref
+        class={cn(
+		"relative focus-visible:ring-ring focus-visible:ring-offset-background data-[state=checked]:bg-primary data-[state=unchecked]:bg-input group peer h-6 w-11 shrink-0 cursor-pointer items-center rounded-full transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+        "overflow-clip",
+		className
+	)}
+>
+    <div class="h-2 bg-neutral-1 w-[1px] absolute top-2 left-[0.7rem] transition-transform group-data-[state=unchecked]:-translate-x-6 group-data-[state=checked]:translate-x-0"></div>
+    <div class="size-2 border-[1px] border-neutral-token-7 absolute top-2 right-2 rounded-full transition-transform group-data-[state=unchecked]:translate-x-0 group-data-[state=checked]:translate-x-6"></div>
+    <SwitchPrimitive.Thumb
+            class={cn(
+			"bg-neutral-1 pointer-events-none block size-5 rounded-full ring-0 transition-transform t-0.5 data-[state=checked]:translate-x-[1.375rem] data-[state=unchecked]:translate-x-0.5",
+			"shadow-[0_2px_4px_rgba(0,0,0,0.2),0_2px_8px_rgba(0,0,0,0.2)]"
+		)}
+    />
+</SwitchPrimitive.Root>
+
+

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

@@ -1,16 +1,14 @@
-import { type VariantProps } from "tailwind-variants";
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{}, {}>, unknown, unknown, undefined>>;
-type TabsVariants = VariantProps<typeof styles>;
-export interface TabsProps extends TabsVariants {
+export type TabsProps = {
     children?: any;
-    class?: string;
     value?: string;
-    onchange?: (value: string) => void;
-}
+    onchange?: (newTab: string) => void;
+    class?: string;
+};
 export type TabsContext = {
-    currentTab?: string;
-    onchange: (value: string) => void;
+    currentTab: string;
 };
+export declare function createContext(props: {
+    currentTab?: string;
+    onchange?: (newTab: string) => void;
+}): void;
 export declare function getCtx(): TabsContext;
-export declare function createContext(context: TabsContext): void;
-export {};

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

@@ -1,26 +1,19 @@
-import { tv } from "tailwind-variants";
 import { getContext, setContext } from "svelte";
-export const styles = tv({
-    base: '',
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {},
-});
-const CONTEXT_NAME = 'Tabs';
-export function getCtx() {
-    return getContext(CONTEXT_NAME);
-}
-export function createContext(context) {
-    let currentTab = $state(context.currentTab);
-    setContext(CONTEXT_NAME, {
+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 (value !== currentTab) {
-                context.onchange(value);
+            if (currentTab !== value) {
                 currentTab = value;
+                props.onchange?.(value);
             }
-        },
+        }
     });
 }
+export function getCtx() {
+    return getContext(CONTEXT_KEY);
+}

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

@@ -1,33 +1,33 @@
-<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?.()}
+<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>

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

@@ -1,36 +1,36 @@
-<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 {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>
+

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

@@ -1,32 +1,32 @@
-<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);
-    }
+<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>

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

@@ -1,58 +1,58 @@
-<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>
+<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>

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

@@ -1,28 +1,28 @@
-<script lang="ts">
-    import {type TeraUiContextProps} from "./TeraUiContext";
-    import {setGlobalContext} from "./global-context";
-    import {setLanguageTag} from "../../paraglide/runtime";
-
-    let {
-        children,
-        supportLanguages = ['en'],
-        language = 'en',
-        ...props
-    }: TeraUiContextProps = $props();
-
-    setGlobalContext({
-        supportLanguages,
-        language,
-        ...props
-    })
-
-    // console.log('tera-system-ui', 'TeraUIContext props', {
-    //     supportLanguages,
-    //     language,
-    //     ...props
-    // })
-
-    setLanguageTag(language)
-</script>
-
-{@render children()}
+<script lang="ts">
+    import {type TeraUiContextProps} from "./TeraUiContext";
+    import {setGlobalContext} from "./global-context";
+    import {setLocale} from "../../paraglide/runtime";
+
+    let {
+        children,
+        supportLanguages = ['en'],
+        language = 'en',
+        ...props
+    }: TeraUiContextProps = $props();
+
+    setGlobalContext({
+        supportLanguages,
+        language,
+        ...props
+    })
+
+    // console.log('tera-system-ui', 'TeraUIContext props', {
+    //     supportLanguages,
+    //     language,
+    //     ...props
+    // })
+
+    setLocale(language)
+</script>
+
+{@render children()}

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

@@ -17,43 +17,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     allowClear: {
         true: string;
     };
-}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition ease-in-out ring-primary-token-5/50", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    allowClear: {
-        true: string;
-    };
-}, {
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    allowClear: {
-        true: string;
-    };
-}>, {
+}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition ease-in-out ring-primary-token-5/50", {
     variant: {
         outlined: string;
         filled: string;
@@ -89,43 +53,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     allowClear: {
         true: string;
     };
-}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition ease-in-out ring-primary-token-5/50", import("tailwind-variants/dist/config").TVConfig<{
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    allowClear: {
-        true: string;
-    };
-}, {
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    allowClear: {
-        true: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition ease-in-out ring-primary-token-5/50", unknown, unknown, undefined>>;
 type TextAreaVariants = VariantProps<typeof styles>;
 export type AutoSizeConfig = boolean | {
     minRows?: number;