tera-system-ui 0.0.22 → 0.0.24

package/dist/components/dialog/Dialog.astro

@@ -11,6 +11,7 @@ const {
     class: className,
     position = 'center',
     padding,
+    containerClass,
     focusTriggerAfterClose,
     ...props
 }: DialogPropsAstro = Astro.props
@@ -44,7 +45,7 @@ const hasFooterSlot = !!Astro.slots["footer"];
             </form>
     }
 
-    <div class={"dialog-box " + dialogContainer()}>
+    <div class={"dialog-box " + dialogContainer({className: containerClass})}>
         {hasHeaderSlot &&
                 <header class={headerStyle()}>
                     <slot name="header"/>

package/dist/components/dialog/Dialog.d.ts

@@ -198,6 +198,7 @@ type DialogPropsCommon = {
     position?: 'top' | 'center';
     focusTriggerAfterClose?: boolean;
     padding?: 'none' | undefined;
+    containerClass?: string;
 };
 export type DialogProps = DialogVariants & DialogPropsCommon & {
     children?: any;
@@ -206,6 +207,7 @@ export type DialogProps = DialogVariants & DialogPropsCommon & {
     open?: boolean;
     staticRender?: boolean;
     triggerRef?: HTMLElement;
+    ref?: any;
 };
 export type DialogPropsAstro = DialogVariants & DialogPropsCommon & {};
 export {};

package/dist/components/dialog/Dialog.svelte

@@ -7,6 +7,7 @@
 
     let {
         children, open = $bindable(),
+        ref = $bindable(),
         closeOnClickOutside = true,
         closeButton = true,
         size = 'sm',
@@ -18,23 +19,22 @@
         staticRender = false,
         triggerRef,
         focusTriggerAfterClose,
+        containerClass,
         ...props
     }: DialogProps = $props();
 
-    let dialog;
-
     let hasOpened = $state(false);
 
     // Watch for prop changes to open/close the dialog
     $effect(() => {
         if (open) {
             stillAnimating = open
-            dialog?.showModal();
+            ref?.showModal();
 
             if (!hasOpened)
                 hasOpened = true
         } else {
-            dialog?.close()
+            ref?.close()
             sleep(200).then(() => {
                 stillAnimating = open
                 console.log('stillAnimating', stillAnimating)
@@ -48,8 +48,8 @@
 
     // Close dialog on clicking outside (optional)
     function handleClickOutside(e) {
-        if (closeOnClickOutside && e.target === dialog) {
-            dialog?.close();
+        if (closeOnClickOutside && e.target === ref) {
+            ref?.close();
         }
     }
 
@@ -72,7 +72,7 @@
 {#if staticRender || (!staticRender && (open || stillAnimating))}
     <dialog class={dialogStyle() + ` ${className}`}
             data-position={position}
-            bind:this={dialog}
+            bind:this={ref}
             onclose={handleClose}
             onmousedown={handleClickOutside}
             size={size}
@@ -90,7 +90,7 @@
             </form>
         {/if}
 
-        <div class={"dialog-box " + dialogContainer()}>
+        <div class={"dialog-box " + dialogContainer({className: containerClass})}>
             {#if header}
                 <header class={headerStyle()}>
                     {@render header?.()}

package/dist/components/dialog/Dialog.svelte.d.ts

@@ -1,4 +1,4 @@
 import { type DialogProps } from "./Dialog";
 import './dialog.scss';
-declare const Dialog: import("svelte").Component<DialogProps, {}, "open">;
+declare const Dialog: import("svelte").Component<DialogProps, {}, "ref" | "open">;
 export default Dialog;

package/dist/components/slider/Slider.d.ts

@@ -0,0 +1,9 @@
+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 SliderVariants = VariantProps<typeof styles>;
+export interface SliderProps extends SliderVariants {
+    children?: any;
+    class?: string;
+}
+export type SliderContextProps = {};
+export {};

package/dist/components/slider/Slider.js

@@ -0,0 +1,7 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: '',
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {},
+});

package/dist/components/slider/Slider.svelte

@@ -0,0 +1,228 @@
+<script lang="ts">
+    import {type SliderProps} from "./Slider";
+
+    let {
+        children,
+        min = 0,
+        max = 100,
+        step = 1,
+        value = $bindable(),
+        showTicks = false,
+        onchange,
+        ...props
+    }: SliderProps = $props();
+
+
+    let slider = $state<HTMLElement>()
+    let sliderHandle = $state<HTMLElement>()
+    let sliderTrack = $state<HTMLElement>()
+    let sliderRail = $state<HTMLElement>()
+    let sliderTooltip = $state<HTMLElement>()
+
+
+    $effect(() => {
+        if (!slider || !sliderHandle || !sliderTrack || !sliderRail) return
+        slider.addEventListener('pointerdown', (e) => {
+            sliderHandle.setAttribute('data-state', 'dragging');
+            onDrag(e)
+            document.addEventListener('pointermove', onDrag);
+            document.addEventListener('pointerup', () => {
+                document.removeEventListener('pointermove', onDrag);
+                sliderHandle.removeAttribute('data-state');
+                toggleToolTip(false)
+
+            }, {once: true});
+        });
+
+        // For touch support
+        slider.addEventListener('touchstart', (e) => {
+            sliderHandle.setAttribute('data-state', 'dragging');
+            onDrag(e)
+            document.addEventListener('touchmove', onDrag);
+            document.addEventListener('touchend', () => {
+                document.removeEventListener('touchmove', onDrag);
+                toggleToolTip(false)
+                sliderHandle.removeAttribute('data-state');
+            }, {once: true});
+        });
+
+        sliderHandle.addEventListener('pointerenter', (e) => {
+            toggleToolTip(true)
+            sliderHandle.addEventListener('pointerleave', (e) => {
+                toggleToolTip(false)
+            }, {once: true});
+        })
+
+    })
+
+    let tooltipInterval
+
+    function toggleToolTip(open) {
+        if (tooltipInterval) clearInterval(tooltipInterval)
+
+        if (open) {
+            sliderTooltip.classList.add('show');
+        } else {
+            tooltipInterval = setTimeout(() => {
+                sliderTooltip.classList.remove('show');
+            }, 300)
+
+        }
+    }
+
+    const calculateValue = (position) => {
+        const sliderWidth = sliderRail.offsetWidth;
+
+        // calculate step size in px
+        const stepSize = sliderWidth / ((max - min) / step)
+
+        // Clamp position within the slider width
+        const clampedPosition = Math.max(0, Math.min(position, sliderWidth));
+        // Calculate nearest step position
+        const stepCount = Math.round(clampedPosition / stepSize);
+
+        console.log(stepCount)
+        return min + stepCount
+    };
+
+    const onDrag = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        toggleToolTip(true)
+
+        let position
+
+        if (event.type.startsWith('touch')) {
+            const touch = event.touches[0];
+            position = touch.clientX - slider.getBoundingClientRect().left;
+        } else {
+            position = event.clientX - slider.getBoundingClientRect().left;
+        }
+        let newValue = calculateValue(position);
+
+        if (newValue !== value) {
+            value = newValue;
+            onchange?.(value);
+        }
+
+        updateSliderByValue(newValue)
+    };
+
+
+    $effect(() => {
+        if (value == undefined) {
+            value = min
+        }
+        updateSliderByValue(value)
+    })
+
+    function updateSliderByValue(v: number) {
+        const percentage = ((value - min) / (max - min)) * 100
+
+        // Update the position of the handle and track width
+        sliderHandle.style.left = `${percentage}%`;
+        sliderTooltip.style.left = `${percentage}%`;
+        sliderTrack.style.width = `${percentage}%`;
+    }
+</script>
+
+
+<div bind:this={slider} class="cursor-pointer w-full relative mx-1 py-2.5">
+    <div data-slider-rail bind:this={sliderRail} class="w-full h-1.5 bg-neutral-token-4 rounded-full overflow-hidden">
+        <div data-slider-track bind:this={sliderTrack} class="rounded-full w-full h-full bg-primary-token-4"></div>
+    </div>
+
+    <div
+            bind:this={sliderHandle}
+            data-slider-handle
+            tabindex="0"
+            role="slider"
+            aria-valuemin={`${(min ?? 0)}`}
+            aria-valuemax={`${(max ?? 0)}`}
+            aria-valuenow={`${(value ?? 0)}`}
+            aria-orientation="horizontal"
+            class="slider-handle  -translate-x-1/2 absolute top-1/2 -translate-y-1/2 rounded-full bg-neutral-token-1 border-[3px] border-primary-token-5  size-4"
+    >
+
+    </div>
+
+    <div bind:this={sliderTooltip} data-slider-tooltip class="">
+       <span class="z-10 relative">
+            {value}
+       </span>
+    </div>
+
+    <!--    <input-->
+    <!--            type="range"-->
+    <!--            min={min}-->
+    <!--            max={max}-->
+    <!--            step={step}-->
+    <!--            oninput={(event) => {-->
+    <!--              value = event.target.value;-->
+    <!--              handleChange(event);-->
+    <!--            }}-->
+    <!--            class="w-full appearance-none bg-gray-300 rounded-lg h-2 focus:outline-none focus:ring-2 focus:ring-blue-500 transition"-->
+    <!--    />-->
+
+    <!--    {#if showTicks}-->
+    <!--        <div class="relative mt-2 flex justify-between text-xs text-gray-500">-->
+    <!--            {#each ticks as tick}-->
+    <!--                <div class="flex-1">-->
+    <!--                    <div-->
+    <!--                            class="h-2 w-0.5 bg-gray-400 mx-auto"-->
+    <!--                            style="transform: translateX(-50%);"-->
+    <!--                    ></div>-->
+    <!--                </div>-->
+    <!--            {/each}-->
+    <!--        </div>-->
+    <!--    {/if}-->
+</div>
+
+<style>.slider-handle {
+  transition: all 0.2s ease-in-out, left 0s;
+}
+.slider-handle:global([data-state="dragging"]), .slider-handle:hover, .slider-handle:focus, .slider-handle:active, .slider-handle:focus-visible {
+  --tw-scale-x: 1.25;
+  --tw-scale-y: 1.25;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-color: hsl(var(--tw---token-color-primary-token-7));
+  --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
+  --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(0.35rem + var(--tw-ring-offset-width)) var(--tw-ring-color);
+  box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
+  --tw-ring-color: hsl(var(--tw---token-color-primary-token-2));
+}
+
+[data-slider-tooltip] {
+  position: absolute;
+  left: 50%;
+  z-index: 10;
+  width: -moz-fit-content;
+  width: fit-content;
+  border-radius: var(--border-radius-base);
+  background-color: hsl(var(--tw---token-color-neutral-token-12));
+  padding-left: 0.375rem;
+  padding-right: 0.375rem;
+  padding-top: 0.25rem;
+  padding-bottom: 0.25rem;
+  color: hsl(var(--tw---token-color-neutral-token-1));
+  transition: all 0.2s ease-in-out, left 0s;
+  opacity: 0;
+  transform: translateY(-3rem) translateX(-50%) scale(0.9);
+}
+[data-slider-tooltip]:after {
+  content: "";
+  position: absolute;
+  bottom: -0.15rem;
+  left: 50%;
+  width: 0.75rem;
+  height: 0.75rem;
+  --tw-translate-x: -50%;
+  --tw-rotate: 45deg;
+  transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
+  border-radius: 0.125rem;
+  background-color: hsl(var(--tw---token-color-neutral-token-12));
+}
+[data-slider-tooltip]:global(.show) {
+  opacity: 1;
+  transform: translateY(-3.5rem) translateX(-50%) scale(1);
+}</style>

package/dist/components/slider/Slider.svelte.d.ts

@@ -0,0 +1,3 @@
+import { type SliderProps } from "./Slider";
+declare const Slider: import("svelte").Component<SliderProps, {}, "value">;
+export default Slider;

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

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

package/dist/components/slider/index.js

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

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

@@ -0,0 +1,17 @@
+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 {
+    children?: any;
+    class?: string;
+    value?: string;
+}
+export type TabsContext = {
+    setValue: (value: string) => void;
+    getValue: () => string | undefined;
+    currentTab?: any;
+    state: any;
+};
+export declare function getCtx(): TabsContext;
+export declare function setCtx(context: TabsContext): void;
+export {};

package/dist/components/tabs/Tabs.js

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

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

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

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

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

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import {getCtx} from "../Tabs";
+    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.state.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/TabsContent.svelte.d.ts

@@ -0,0 +1,6 @@
+declare const TabsContent: import("svelte").Component<{
+    children: unknown;
+    class: unknown;
+    value: unknown;
+} & Record<string, unknown>, {}, "">;
+export default TabsContent;

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

@@ -0,0 +1,32 @@
+<script lang="ts">
+    import {cn} from "../../../utils/utils";
+    import {getCtx} from "../Tabs";
+
+    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.state.currentTab ? 'active' : 'inactive'}
+            onclick={() => {
+            context.state.currentTab = value
+        }}
+    >
+        {@render children?.()}
+    </button>
+</div>
+
+<style>
+    button[data-state="active"] {
+    color: hsl(var(--tw---token-color-primary-token-6))
+}
+</style>

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

@@ -0,0 +1,6 @@
+declare const TabsItem: import("svelte").Component<{
+    children: unknown;
+    class: unknown;
+    value: unknown;
+} & Record<string, unknown>, {}, "">;
+export default TabsItem;

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

@@ -0,0 +1,42 @@
+<script lang="ts">
+    import {cn} from "../../../utils/utils";
+    import {getCtx} from "../Tabs";
+
+    let {
+        children,
+        class: className,
+        ...props
+    } = $props();
+
+    let tabIndicator = $state()
+    let tabsList = $state()
+
+    function updateIndicator(button) {
+        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`;
+    }
+
+
+    let context = getCtx()
+
+    $effect(() => {
+        let tabButton = tabsList?.querySelector(`button[data-value="${context.state.currentTab}"]`)
+        updateIndicator(tabButton);
+    })
+</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/tabs/components/TabsList.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const TabsList: import("svelte").Component<{
+    children: unknown;
+    class: unknown;
+} & Record<string, unknown>, {}, "">;
+export default TabsList;

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

@@ -0,0 +1,4 @@
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as TabsList } from './components/TabsList.svelte';
+export { default as TabsItem } from './components/TabsItem.svelte';
+export { default as TabsContent } from './components/TabsContent.svelte';

package/dist/components/tabs/index.js

@@ -0,0 +1,4 @@
+export { default as Tabs } from './components/Tabs.svelte';
+export { default as TabsList } from './components/TabsList.svelte';
+export { default as TabsItem } from './components/TabsItem.svelte';
+export { default as TabsContent } from './components/TabsContent.svelte';

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

@@ -0,0 +1,3 @@
+export declare function createTabs(initTab?: string): {
+    currentTab: string | undefined;
+};

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

@@ -0,0 +1,11 @@
+export function createTabs(initTab) {
+    let currentTab = $state(initTab);
+    return {
+        get currentTab() {
+            return currentTab;
+        },
+        set currentTab(v) {
+            currentTab = v;
+        }
+    };
+}

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

@@ -0,0 +1,145 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    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", 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;
+    };
+}>, {
+    variant: {
+        outlined: string;
+        filled: string;
+        borderless: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    allowClear: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    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", 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>>;
+type TextAreaVariants = VariantProps<typeof styles>;
+export type AutoSizeConfig = boolean | {
+    minRows?: number;
+    maxRows?: number;
+};
+export interface TextAreaProps extends TextAreaVariants {
+    children?: any;
+    class?: string;
+    value?: string;
+    ref?: HTMLInputElement;
+    prefix?: any;
+    onchange?: (event: any) => void;
+    autoSize?: AutoSizeConfig;
+    rows?: any;
+    allowClear?: boolean;
+}
+export {};

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

@@ -0,0 +1,39 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: 'relative w-full inline-flex items-center justify-center rounded outline-none transition ease-in-out ring-primary-token-5/50',
+    variants: {
+        variant: {
+            outlined: 'border border-neutral-token-5 bg-transparent focus:border-primary-token-6 hover:border-primary-token-5 focus-visible:ring-2',
+            filled: 'bg-neutral-token-3 border border-neutral-token-3 focus:bg-transparent focus:border-primary-token-6 hover:bg-neutral-token-4 focus-visible:ring-2',
+            borderless: 'bg-transparent border-0',
+        },
+        disabled: {
+            true: 'cursor-not-allowed opacity-70 text-neutral-token-10',
+            false: 'cursor-text',
+        },
+        size: {
+            sm: 'px-2 pt-0.5 pb-0.5 text-sm',
+            md: 'px-3 pt-1 pb-0.5 text-base',
+            lg: 'px-3 pt-1 pb-0.5 text-lg',
+        },
+        allowClear: {
+            true: 'pr-5'
+        }
+    },
+    compoundVariants: [
+        {
+            variant: 'outlined',
+            disabled: true,
+            class: 'hover:border-neutral-token-5'
+        },
+        {
+            variant: 'filled',
+            disabled: true,
+            class: 'hover:bg-neutral-token-3'
+        }
+    ],
+    defaultVariants: {
+        variant: 'outlined',
+        size: 'md'
+    },
+});

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

@@ -0,0 +1,89 @@
+<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,
+        disabled,
+        variant = 'outlined',
+        autoSize,
+        onchange,
+        prefix,
+        rows,
+        allowClear,
+        ...props
+    }: TextAreaProps = $props();
+
+
+    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(() => {
+            // setup goes here
+            value
+            updateSize();
+
+            return () => {
+                // teardown goes here
+            };
+        });
+    }
+
+    function clearText() {
+        value = ''
+    }
+
+</script>
+
+<div class="relative">
+    <textarea
+            use:createAutoSizeTextarea={autoSize}
+            onchange={onchange}
+            bind:this={ref}
+            style={autoSize ? "resize: none;" : ''}
+            class={styles({ variant, disabled , size, className, allowClear })}
+            {disabled}
+            rows={autoSize ? 1 : rows}
+            {...props}
+            bind:value
+    >
+    </textarea>
+
+    {#if allowClear && value}
+        <button onclick={clearText}
+                class="absolute top-2 right-2 bg-neutral-token-6 text-neutral-token-1 hover:bg-neutral-token-8 size-3 grid place-content-center rounded-full">
+            <IconX class="size-2.5"/>
+        </button>
+    {/if}
+</div>

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

@@ -0,0 +1,3 @@
+import { type TextAreaProps } from "./TextArea";
+declare const TextArea: import("svelte").Component<TextAreaProps, {}, "ref" | "value">;
+export default TextArea;

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

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

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

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

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

@@ -13,14 +13,14 @@
 
     let {children, user, onLogout,...props}: UserAvatarWithMenuProps = $props();
 
-    let shortUserName = extractShortUsernameFromEmail(user.email)
+    let shortUserName = extractShortUsernameFromEmail(user?.email)
     let triggerRef = $state()
-    let open = $state(true)
+    let open = $state(false)
 </script>
 
 
 {#if user}
-    <button bind:this={triggerRef}>
+    <button class="rounded-full focus-visible:ring-0" bind:this={triggerRef}>
         <Avatar
             userUid={user.userUid}
         >

package/dist/index.d.ts

@@ -13,5 +13,8 @@ export { LightDarkToggle } from './components/light-dark-toggle';
 export { Popover } from './components/popover';
 export { PopoverResponsive } from './components/popover-responsive';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
+export { Slider } from './components/slider';
+export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs';
 export { TeraUiContext } from './components/tera-ui-context';
+export { TextArea } from './components/text-area';
 export { UserAvatarWithMenu } from './components/user-avatar-with-menu';

package/dist/index.js

@@ -13,5 +13,8 @@ export { LightDarkToggle } from './components/light-dark-toggle';
 export { Popover } from './components/popover';
 export { PopoverResponsive } from './components/popover-responsive';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
+export { Slider } from './components/slider';
+export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs';
 export { TeraUiContext } from './components/tera-ui-context';
+export { TextArea } from './components/text-area';
 export { UserAvatarWithMenu } from './components/user-avatar-with-menu';

package/dist/themes/tera-ui-base.css

@@ -1,10 +1,8 @@
-/* Default base style */
+@import "scrollbar.scss"; /* Default base style */
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
-@import "scrollbar.scss";
-
 .ripple {
     position: absolute;
     border-radius: 50%;
@@ -50,7 +48,7 @@ body {
         -ms-overflow-style: none !important;  /* IE and Edge */
         scrollbar-width: none !important;  /* Firefox */
     }
-    
+
     .skeleton {
         @apply animate-pulse bg-neutral-token-4 rounded h-4 w-full;
     }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "tera-system-ui",
-  "version": "0.0.22",
+  "version": "0.0.24",
   "scripts": {
     "dev": "vite dev",
-    "build": "vite build && npm run package",
+    "build": "npm run customPrepublish && npm run generate-index && vite build && npm run package && npm run postpublish",
     "preview": "vite preview",
     "package": "svelte-kit sync && svelte-package && publint",
     "customPrepublish": "node ./scripts/prepublish.js",
@@ -60,39 +60,39 @@
     "svelte": "^5.0.0"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^3.2.1",
-    "@storybook/addon-essentials": "^8.3.6",
-    "@storybook/addon-interactions": "^8.3.6",
-    "@storybook/addon-links": "^8.3.6",
+    "@chromatic-com/storybook": "^3.2.2",
+    "@storybook/addon-essentials": "^8.4.4",
+    "@storybook/addon-interactions": "^8.4.4",
+    "@storybook/addon-links": "^8.4.4",
     "@storybook/addon-styling": "^1.3.7",
     "@storybook/addon-svelte-csf": "^5.0.0-next.8",
-    "@storybook/addon-themes": "^8.3.6",
-    "@storybook/addon-viewport": "^8.3.6",
-    "@storybook/blocks": "^8.3.6",
-    "@storybook/svelte": "^8.3.6",
-    "@storybook/sveltekit": "^8.3.6",
-    "@storybook/test": "^8.3.6",
+    "@storybook/addon-themes": "^8.4.4",
+    "@storybook/addon-viewport": "^8.4.4",
+    "@storybook/blocks": "^8.4.4",
+    "@storybook/svelte": "^8.4.4",
+    "@storybook/sveltekit": "^8.4.4",
+    "@storybook/test": "^8.4.4",
     "@sveltejs/adapter-auto": "^3.3.1",
-    "@sveltejs/kit": "^2.7.3",
+    "@sveltejs/kit": "^2.8.1",
     "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "@sveltejs/vite-plugin-svelte": "^4.0.1",
     "npx": "^10.2.2",
     "publint": "^0.2.12",
-    "sass-embedded": "^1.80.5",
-    "storybook": "^8.3.6",
-    "svelte": "^5.1.6",
-    "svelte-check": "^4.0.5",
-    "tailwindcss": "^3.4.14",
+    "sass-embedded": "^1.81.0",
+    "storybook": "^8.4.4",
+    "svelte": "^5.2.1",
+    "svelte-check": "^4.0.8",
+    "tailwindcss": "^3.4.15",
     "typescript": "^5.6.3",
-    "vite": "^5.4.10"
+    "vite": "^5.4.11"
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.12",
     "@inlang/paraglide-sveltekit": "0.11.5",
-    "@tabler/icons-svelte": "^3.21.0",
+    "@tabler/icons-svelte": "^3.22.0",
     "clsx": "^2.1.1",
     "autoprefixer": "^10.4.20",
     "@inlang/paraglide-js": "1.11.3",
-    "tailwind-variants": "^0.2.1"
+    "tailwind-variants": "^0.3.0"
   }
 }