tera-system-ui 0.1.15 → 0.1.17

package/dist/components/tabs/{Tabs.d.ts → Tabs.svelte.d.ts}

@@ -5,13 +5,12 @@ export interface TabsProps extends TabsVariants {
     children?: any;
     class?: string;
     value?: string;
+    onchange?: (value: string) => void;
 }
 export type TabsContext = {
-    setValue: (value: string) => void;
-    getValue: () => string | undefined;
-    currentTab?: any;
-    state: any;
+    currentTab?: string;
+    onchange: (value: string) => void;
 };
 export declare function getCtx(): TabsContext;
-export declare function setCtx(context: TabsContext): void;
+export declare function createContext(context: TabsContext): void;
 export {};

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

@@ -0,0 +1,26 @@
+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, {
+        get currentTab() {
+            return currentTab;
+        },
+        set currentTab(value) {
+            if (value !== currentTab) {
+                context.onchange(value);
+                currentTab = value;
+            }
+        },
+    });
+}

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

@@ -1,48 +1,33 @@
 <script lang="ts">
-    import {setCtx, type TabsProps} from "../Tabs";
+    import {createContext, getCtx, type TabsProps} from "../Tabs.svelte";
     import {cn} from "../../../utils/utils";
-    import {createTabs} from "../tabs.svelte";
-    import {untrack} from "svelte";
 
     let {
         children,
         value = $bindable(),
         class: className,
+        onchange,
         ...props
     }: TabsProps = $props();
 
-
-    function setValue(v: string) {
-        // console.log('Change value', v)
-        value = v
-    }
-
-    function getValue() {
-        return value
+    function onTabChange(currentTab: string) {
+        onchange?.(currentTab)
+        value = currentTab
     }
 
-    let tabsState = createTabs(value)
-
-    setCtx({
-        setValue: setValue,
-        getValue: getValue,
+    createContext({
         currentTab: value,
-        state: tabsState
+        onchange: onTabChange
     })
 
-    $effect(() => {
-        value = tabsState.currentTab
-    })
+    const context = getCtx()
 
     $effect(() => {
-        tabsState.currentTab = value
+        context.currentTab = value
     })
-
-    let tabs = $state()
 </script>
 
-<div bind:this={tabs}
-     data-tabs-root
+<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/Tabs.svelte.d.ts

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

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {getCtx} from "../Tabs";
+    import {getCtx} from "../Tabs.svelte";
     import {cn} from "../../../utils/utils";
 
     let {
@@ -19,7 +19,7 @@
 <div
         role="tabpanel"
         data-value={value}
-        data-state={context.state.currentTab === value ? 'active' : 'inactive'}
+        data-state={context.currentTab === value ? 'active' : 'inactive'}
         class={cn("bg-neutral-token-1 overflow-auto", className)}>
     {@render children?.()}
 </div>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import {cn} from "../../../utils/utils";
-    import {getCtx} from "../Tabs";
+    import {getCtx} from "../Tabs.svelte";
 
     let {
         children,
@@ -16,10 +16,10 @@
 <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.state.currentTab ? 'active' : 'inactive'}
+            data-state={value === context.currentTab ? 'active' : 'inactive'}
             onclick={() => {
-            context.state.currentTab = value
-        }}
+                context.currentTab = value
+            }}
     >
         {@render children?.()}
     </button>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import {cn, consoleLog, observeVisibility} from "../../../utils/utils";
-    import {getCtx} from "../Tabs";
+    import {getCtx} from "../Tabs.svelte";
     import {onMount} from "svelte";
 
     let {
@@ -13,7 +13,7 @@
     let tabsList = $state()
 
     function updateIndicator() {
-        let button = tabsList?.querySelector(`button[data-value="${context.state.currentTab}"]`)
+        let button = tabsList?.querySelector(`button[data-value="${context.currentTab}"]`)
 
         const rect = button.getBoundingClientRect();
         const containerRect = tabsList.getBoundingClientRect();
@@ -24,21 +24,20 @@
         tabIndicator.style.left = `${left}px`;
         tabIndicator.style.width = `${width}px`;
 
-        consoleLog('TabList', 'tabIndicator', tabIndicator)
+        // consoleLog('TabList', 'tabIndicator', tabIndicator)
     }
 
 
     let context = getCtx()
 
     $effect(() => {
-        context.state.currentTab
+        context.currentTab
         updateIndicator();
     })
 
     onMount(() => {
         const stopObserving = observeVisibility(tabIndicator, (isVisible, entry) => {
             if (isVisible) {
-                consoleLog('Element is visible:', entry.target);
                 updateIndicator()
             }
         });

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tera-system-ui",
-	"version": "0.1.15",
+	"version": "0.1.17",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run customPrepublish && npm run generate-index && vite build && npm run package && npm run postpublish",

package/dist/components/tabs/Tabs.js

@@ -1,15 +0,0 @@
-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 setCtx(context) {
-    setContext(CONTEXT_NAME, context);
-}