tera-system-ui 0.0.41 → 0.0.44

package/dist/components/dialog/Dialog.js

@@ -4,7 +4,7 @@ export const styles = tv({
         base: '',
         dialog: 'bg-transparent text-inherit',
         dialogContainer: 'py-4 rounded-container',
-        header: 'font-semibold px-4 mb-2',
+        header: 'font-bold px-4 mb-2',
         body: 'px-4',
         footer: 'mt-3 px-4 flex items-center justify-end gap-2.5'
     },

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

@@ -27,6 +27,6 @@
 
 <style>
     button[data-state="active"] {
-    color: hsl(var(--tw---token-color-primary-token-6))
+    color: hsl(var(--tw---token-color-primary-token-5))
 }
 </style>

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

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

package/dist/utils/index.d.ts

@@ -0,0 +1 @@
+export { cn, observeVisibility } from './utils';

package/dist/utils/index.js

@@ -0,0 +1 @@
+export { cn, observeVisibility } from './utils';

package/dist/utils/utils.d.ts

@@ -1,2 +1,4 @@
 import { type ClassValue } from "clsx";
 export declare function cn(...inputs: ClassValue[]): string;
+export declare function consoleLog(...params: any[]): void;
+export declare function observeVisibility(element: HTMLElement, callback: any): () => void;

package/dist/utils/utils.js

@@ -3,3 +3,22 @@ import { twMerge } from "tailwind-merge";
 export function cn(...inputs) {
     return twMerge(clsx(inputs));
 }
+export function consoleLog(...params) {
+    console.log('tera-system-ui', ...params);
+}
+export function observeVisibility(element, callback) {
+    if (!element) {
+        throw new Error("Invalid element provided.");
+    }
+    // Create an Intersection Observer
+    const observer = new IntersectionObserver((entries) => {
+        entries.forEach((entry) => {
+            // Check if the element is visible
+            callback(entry.isIntersecting, entry);
+        });
+    });
+    // Start observing the element
+    observer.observe(element);
+    // Return a function to stop observing
+    return () => observer.disconnect();
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "tera-system-ui",
-	"version": "0.0.41",
+	"version": "0.0.44",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "npm run customPrepublish && npm run generate-index && vite build && npm run package && npm run postpublish",
@@ -38,6 +38,10 @@
 			"svelte": "./dist/index.js",
 			"default": "./dist/index.js"
 		},
+		"./utils": {
+			"types": "./dist/utils/index.d.ts",
+			"default": "./dist/utils/index.js"
+		},
 		"./i18n": {
 			"types": "./dist/i18n/index.d.ts",
 			"svelte": "./dist/i18n/index.js",