tera-system-ui 0.1.50 → 0.1.63

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

@@ -1,15 +1,18 @@
 import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type SliderVariants = VariantProps<typeof styles>;
-export interface SliderProps extends SliderVariants {
-    children?: any;
+export interface SliderProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, SliderVariants {
+    children?: Snippet;
     class?: string;
     min: number;
     max: number;
     step: number;
     value: number;
-    showTicks: boolean;
-    onchange: (value: number) => void;
+    showTicks?: boolean;
+    onchange?: (value: number) => void;
+    ref?: HTMLDivElement | null;
 }
 export type SliderContextProps = {};
 export {};

package/dist/components/slider/Slider.svelte

@@ -61,9 +61,9 @@
 
     })
 
-    let tooltipInterval
+    let tooltipInterval: ReturnType<typeof setTimeout> | undefined;
 
-    function toggleToolTip(open) {
+    function toggleToolTip(open: boolean) {
         if (tooltipInterval) clearInterval(tooltipInterval)
 
         if (open) {
@@ -76,8 +76,8 @@
         }
     }
 
-    const calculateValue = (position) => {
-        const sliderWidth = sliderRail.offsetWidth;
+    const calculateValue = (position: number) => {
+        const sliderWidth = sliderRail?.offsetWidth || 0;
         const totalSteps = (max - min) / step;
         const stepSize = sliderWidth / totalSteps;
 
@@ -92,7 +92,7 @@
         return Number(value.toFixed(10));
     };
 
-    const onDrag = (event) => {
+    const onDrag = (event: PointerEvent | TouchEvent) => {
         event.preventDefault();
         event.stopPropagation();
         toggleToolTip(true)
@@ -100,10 +100,10 @@
         let position
 
         if (event.type.startsWith('touch')) {
-            const touch = event.touches[0];
-            position = touch.clientX - slider.getBoundingClientRect().left;
+            const touch = (event as TouchEvent).touches[0];
+            position = touch.clientX - (slider?.getBoundingClientRect().left || 0);
         } else {
-            position = event.clientX - slider.getBoundingClientRect().left;
+            position = (event as PointerEvent).clientX - (slider?.getBoundingClientRect().left || 0);
         }
         let newValue = calculateValue(position);
 
@@ -123,67 +123,42 @@
         updateSliderByValue(value)
     })
 
-    function updateSliderByValue(v: number) {
+    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}%`;
+        if (sliderHandle) sliderHandle.style.left = `${percentage}%`;
+        if (sliderTooltip) sliderTooltip.style.left = `${percentage}%`;
+        if (sliderTrack) 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 bind:this={slider} class="cursor-pointer w-full relative px-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 hover:bg-neutral-token-5 transition-colors duration-200">
+        <div data-slider-track bind:this={sliderTrack} class="rounded-full w-full h-full bg-neutral-token-13"></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"
+        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-2 outline-1 outline-neutral-token-1 border-neutral-token-13 size-4 shadow-sm"
     >
 
     </div>
 
     <div bind:this={sliderTooltip} data-slider-tooltip class="">
-       <span class="z-10 relative">
+       <span class="z-10 relative text-xs">
             {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>/*! tailwindcss v4.1.10 | MIT License | https://tailwindcss.com */
-.slider-handle{transition:all .2s ease-in-out,left}:is(.slider-handle:global([data-state="dragging"]),.slider-handle:hover,.slider-handle:focus,.slider-handle:active,.slider-handle:focus-visible){box-shadow:0 0 0 .35rem var(--color-primary-token-2);transform:scale(1.25)}[data-slider-tooltip]{pointer-events:none;border-radius:var(--radius-sm);width:fit-content;padding:calc(var(--spacing,.25rem)*1.5)calc(var(--spacing,.25rem)*1);background-color:var(--color-neutral-token-12);color:var(--color-neutral-token-1);z-index:10;opacity:0;transition:all .2s ease-in-out,left;position:absolute;left:50%;transform:translateY(-3rem)translate(-50%)scale(.9)}[data-slider-tooltip]:after{content:"";border-radius:var(--radius-sm);background-color:var(--color-neutral-token-12);width:calc(var(--spacing,.25rem)*3);height:calc(var(--spacing,.25rem)*3);position:absolute;bottom:-.15rem;left:50%;transform:translate(-50%)rotate(45deg)}[data-slider-tooltip]:global(.show){opacity:1;transform:translateY(-3.5rem)translate(-50%)scale(1)}</style>
+<style>/*! tailwindcss v4.1.18 | MIT License | https://tailwindcss.com */
+.slider-handle{transition:all .2s cubic-bezier(.645,.045,.355,1),left}:is(.slider-handle:global([data-state="dragging"]),.slider-handle:hover,.slider-handle:focus,.slider-handle:active,.slider-handle:focus-visible){border-width:2px;transform:scale(1.2);box-shadow:0 0 0 4px #3b82f61f}.slider-handle:focus-visible{outline:none}[data-slider-tooltip]{pointer-events:none;background-color:var(--color-neutral-token-12);width:fit-content;color:var(--color-neutral-token-1);z-index:10;border-radius:6px;padding:4px 8px;font-size:12px;line-height:1.5;position:absolute;left:50%}[data-slider-tooltip]:after{content:"";background-color:var(--color-neutral-token-12);border-radius:2px;width:8px;height:8px;position:absolute;bottom:-3px;left:50%;transform:translate(-50%)rotate(45deg)}[data-slider-tooltip]{opacity:0;transition:all .2s cubic-bezier(.645,.045,.355,1),left;transform:translateY(-2.5rem)translate(-50%)scale(.9)}[data-slider-tooltip]:global(.show){opacity:1;transform:translateY(-3rem)translate(-50%)scale(1)}</style>

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

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

package/dist/components/star-rating/StarRating.d.ts

@@ -1,4 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 export declare const styles: import("tailwind-variants").TVReturnType<{
     size: {
         sm: string;
@@ -19,10 +21,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "", unknown, unknown, undefined>>;
 type StarRatingVariants = VariantProps<typeof styles>;
-export interface StarRatingProps extends StarRatingVariants {
-    children?: any;
+export interface StarRatingProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, StarRatingVariants {
+    children?: Snippet;
     class?: string;
     value?: number;
     onchange?: (value: number) => void;
+    ref?: HTMLDivElement | null;
 }
 export {};

package/dist/components/star-rating/StarRating.svelte

@@ -78,16 +78,16 @@
 </div>
 
 
-<style>[data-rating-icon] {
-  fill: var(--color-neutral-token-5);
-  transition: all var(--duration-element-react);
-}
-[data-rating-icon]:first-child {
+<style>[data-rating-icon]:first-child {
   padding-left: 0;
 }
 [data-rating-icon]:last-child {
   padding-right: 0;
 }
+[data-rating-icon] {
+  fill: var(--color-neutral-token-5);
+  transition: all var(--duration-element-react);
+}
 [data-rating-icon][aria-checked=true] {
   fill: var(--color-yellow-400);
 }

package/dist/components/star-rating/index.d.ts

@@ -1 +1,2 @@
 export { default as StarRating } from './StarRating.svelte';
+export type { StarRatingProps } from './StarRating';

package/dist/components/switch/Switch.d.ts

@@ -1,8 +1,12 @@
 import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
 export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type SwitchVariants = VariantProps<typeof styles>;
-export interface SwitchProps extends SwitchVariants {
-    children?: any;
+export interface SwitchProps extends HTMLButtonAttributes, SwitchVariants {
+    children?: Snippet;
     class?: string;
+    checked?: boolean;
+    ref?: HTMLButtonElement | null;
 }
 export {};

package/dist/components/switch/Switch.svelte

@@ -17,19 +17,25 @@
         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",
+		"relative group peer h-[22px] w-11 shrink-0 cursor-pointer items-center rounded-full transition-all duration-200",
+		"focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_rgba(59,130,246,0.1)]",
+		"data-[state=checked]:bg-primary-600",
+		"data-[state=unchecked]:bg-neutral-token-5",
+		"disabled:cursor-not-allowed disabled:opacity-50",
+		"overflow-hidden",
 		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>
+    <!-- Internal line indicator (like Ant Design) -->
+    <div class="h-[10px] w-[1px] bg-neutral-1 absolute top-[6px] left-[9px] transition-all duration-200 group-data-[state=unchecked]:opacity-0 group-data-[state=checked]:opacity-100"></div>
+    <div class="size-[6px] border border-neutral-1/30 absolute top-2 right-[9px] rounded-full transition-all duration-200 group-data-[state=unchecked]:opacity-100 group-data-[state=checked]:opacity-0"></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)]"
+			"pointer-events-none block size-[18px] rounded-full bg-neutral-1 transition-transform duration-200",
+			"shadow-[0_2px_4px_rgba(0,0,0,0.2)]",
+			"data-[state=checked]:translate-x-[23px] data-[state=unchecked]:translate-x-[2px]"
 		)}
     />
 </SwitchPrimitive.Root>
 
-

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

@@ -1 +1,2 @@
 export { default as Switch } from './Switch.svelte';
+export type { SwitchProps } from './Switch';

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

@@ -1,11 +1,31 @@
-export type TabsProps = {
-    children?: any;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
+export type TabsProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
     value?: string;
     onchange?: (newTab: string) => void;
     class?: string;
+    ref?: HTMLDivElement | null;
+};
+export type TabsListProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+};
+export type TabsItemProps = HTMLButtonAttributes & {
+    children?: Snippet;
+    value: string;
+    class?: string;
+    ref?: HTMLButtonElement | null;
+};
+export type TabsContentProps = HTMLAttributes<HTMLDivElement> & {
+    children?: Snippet;
+    value: string;
+    class?: string;
+    ref?: HTMLDivElement | null;
 };
 export type TabsContext = {
-    currentTab: string;
+    currentTab: string | undefined;
 };
 export declare function createContext(props: {
     currentTab?: string;

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

@@ -2,3 +2,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';
+export type { TabsProps, TabsListProps, TabsItemProps, TabsContentProps } from './Tabs.svelte.js';

package/dist/components/tera-ui-context/TeraUiContext.d.ts

@@ -1,13 +1,11 @@
 import type { AvailableLanguageTag } from "../../i18n/language";
-export type TeraUiContext = {
+import type { Snippet } from "svelte";
+export interface TeraUiContextProps {
+    children?: Snippet;
+    class?: string;
     basePath?: string;
     supportLanguages?: AvailableLanguageTag[];
     language?: AvailableLanguageTag;
     sideNavHref?: string;
     apiUrl?: string;
-    isAstroEnv?: boolean;
-};
-export interface TeraUiContextProps extends TeraUiContext {
-    children?: any;
-    class?: string;
 }

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

@@ -1,7 +1,6 @@
 <script lang="ts">
     import {type TeraUiContextProps} from "./TeraUiContext";
     import {setGlobalContext} from "./global-context";
-    import {setLocale} from "../../paraglide/runtime";
 
     let {
         children,
@@ -22,7 +21,6 @@
     //     ...props
     // })
 
-    setLocale(language)
 </script>
 
 {@render children()}

package/dist/components/tera-ui-context/index.d.ts

@@ -1 +1,2 @@
 export { default as TeraUiContext } from './TeraUiContext.svelte';
+export type { TeraUiContextProps } from './TeraUiContext';

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

@@ -1,4 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLTextareaAttributes } from "svelte/elements";
 export declare const styles: import("tailwind-variants").TVReturnType<{
     variant: {
         outlined: string;
@@ -17,7 +19,11 @@ 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", {
+    status: {
+        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", {
     variant: {
         outlined: string;
         filled: string;
@@ -35,6 +41,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     allowClear: {
         true: string;
     };
+    status: {
+        error: string;
+        warning: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         outlined: string;
@@ -53,21 +63,25 @@ 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", unknown, unknown, undefined>>;
+    status: {
+        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>>;
 type TextAreaVariants = VariantProps<typeof styles>;
 export type AutoSizeConfig = boolean | {
     minRows?: number;
     maxRows?: number;
 };
-export interface TextAreaProps extends TextAreaVariants {
-    children?: any;
+export interface TextAreaProps extends Omit<HTMLTextareaAttributes, 'disabled' | 'rows' | 'prefix'>, TextAreaVariants {
+    children?: Snippet;
     class?: string;
     value?: string;
-    ref?: HTMLInputElement;
-    prefix?: any;
-    onchange?: (event: any) => void;
+    ref?: HTMLTextAreaElement | null;
     autoSize?: AutoSizeConfig;
-    rows?: any;
+    rows?: number;
     allowClear?: boolean;
+    showCount?: boolean;
+    maxLength?: number;
 }
 export {};

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

@@ -1,24 +1,28 @@
 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',
+    base: 'w-full inline-flex items-start rounded-md outline-none font-normal text-neutral-token-13 placeholder:text-neutral-token-7 resize-y',
     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',
+            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',
         },
         disabled: {
-            true: 'cursor-not-allowed opacity-70 text-neutral-token-10',
+            true: 'cursor-not-allowed bg-neutral-token-3 text-neutral-token-7 border-neutral-token-5 resize-none',
             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',
+            sm: 'px-3 py-1 text-sm min-h-[60px]',
+            md: 'px-3 py-1.5 text-sm min-h-[80px]',
+            lg: 'px-3 py-2 text-base min-h-[100px]',
         },
         allowClear: {
-            true: 'pr-5'
-        }
+            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)]',
+        },
     },
     compoundVariants: [
         {
@@ -30,6 +34,11 @@ export const styles = tv({
             variant: 'filled',
             disabled: true,
             class: 'hover:bg-neutral-token-3'
+        },
+        {
+            variant: 'borderless',
+            disabled: true,
+            class: 'hover:bg-transparent'
         }
     ],
     defaultVariants: {

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

@@ -8,30 +8,31 @@
         class: className,
         value = $bindable(),
         ref = $bindable(),
-        size,
+        size = 'md',
         disabled,
         variant = 'outlined',
         autoSize,
-        onchange,
-        prefix,
         rows,
         allowClear,
+        showCount,
+        maxLength,
+        status,
         ...props
     }: TextAreaProps = $props();
 
+    let textLength = $derived(value?.length || 0);
 
     function createAutoSizeTextarea(node: HTMLTextAreaElement, autoSize?: AutoSizeConfig) {
         if (!autoSize) {
-            return
+            return;
         }
-        let minRows: number | null = null
-        let maxRows: number | null = null
+        let minRows: number | null = null;
+        let maxRows: number | null = null;
         if (autoSize === true) {
-            minRows = 1
+            minRows = 1;
         } else {
-            minRows = Math.max(autoSize.minRows || 0, 1)
-            maxRows = autoSize.maxRows || null
-
+            minRows = Math.max(autoSize.minRows || 0, 1);
+            maxRows = autoSize.maxRows || null;
         }
 
         const updateSize = () => {
@@ -40,50 +41,55 @@
             const borderTopWidth = parseFloat(computedStyle.borderTopWidth);
             const borderBottomWidth = parseFloat(computedStyle.borderBottomWidth);
             const offset = borderTopWidth + borderBottomWidth;
-            const scrollHeight = node.scrollHeight + 4
+            const scrollHeight = node.scrollHeight + 4;
 
             const lineHeight = parseFloat(computedStyle.lineHeight);
-            const minHeight = minRows * lineHeight + offset;
+            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
-            };
+            value;
+            updateSize();
         });
     }
 
     function clearText() {
-        value = ''
+        value = '';
+        ref?.focus();
     }
-
-    $inspect('text-area', {value})
-
 </script>
 
-<div class="relative">
+<div class="relative w-full">
     <textarea
             bind:this={ref}
+            use:createAutoSizeTextarea={autoSize}
             style={autoSize ? "resize: none;" : ''}
-            class={styles({ variant, disabled , size, className, allowClear })}
+            class={styles({ variant, disabled , size, className, allowClear, status })}
             {disabled}
             rows={autoSize ? 1 : rows}
+            maxlength={maxLength}
             {...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"/>
+    {#if allowClear && value && !disabled}
+        <button
+                type="button"
+                onclick={clearText}
+                class="absolute top-2 right-2 text-neutral-token-7 hover:text-neutral-token-10 transition-colors z-10"
+                tabindex="-1"
+        >
+            <IconX class="size-3.5"/>
         </button>
     {/if}
+
+    {#if showCount}
+        <div class="absolute bottom-1 right-2 text-xs text-neutral-token-7 pointer-events-none">
+            {textLength}{#if maxLength}/{maxLength}{/if}
+        </div>
+    {/if}
 </div>

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

@@ -1 +1,2 @@
 export { default as TextArea } from './TextArea.svelte';
+export type { TextAreaProps, AutoSizeConfig } from './TextArea';

package/dist/components/user-avatar-with-menu/UserAvatarWithMenu.d.ts

@@ -1,11 +1,14 @@
 import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
 import type { UserData } from "../../types/user-data";
 export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type UserAvatarWithMenuVariants = VariantProps<typeof styles>;
-export interface UserAvatarWithMenuProps extends UserAvatarWithMenuVariants {
-    children?: any;
+export interface UserAvatarWithMenuProps extends HTMLAttributes<HTMLDivElement>, UserAvatarWithMenuVariants {
+    children?: Snippet;
     class?: string;
     user?: UserData;
     onLogout?: () => void;
+    ref?: HTMLDivElement | null;
 }
 export {};

package/dist/components/user-avatar-with-menu/index.d.ts

@@ -1 +1,2 @@
 export { default as UserAvatarWithMenu } from './UserAvatarWithMenu.svelte';
+export type { UserAvatarWithMenuProps } from './UserAvatarWithMenu';

package/dist/index.d.ts

@@ -24,3 +24,27 @@ export { Tabs, TabsList, TabsItem, TabsContent } from './components/tabs/index.j
 export { TeraUiContext } from './components/tera-ui-context/index.js';
 export { TextArea } from './components/text-area/index.js';
 export { UserAvatarWithMenu } from './components/user-avatar-with-menu/index.js';
+export type { AccordionProps, AccordionItemProps, AccordionContentProps, AccordionTriggerProps } from './components/accordion/index.js';
+export type { AvatarProps } from './components/avatar/index.js';
+export type { BrandLogoProps } from './components/brand-logo/index.js';
+export type { ButtonProps } from './components/button/index.js';
+export type { CheckboxProps } from './components/checkbox/index.js';
+export type { ComboboxProps } from './components/combobox/index.js';
+export type { DialogProps, DialogPropsAstro } from './components/dialog/index.js';
+export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuHeaderProps, DropdownMenuSeparatorProps } from './components/dropdown-menu/index.js';
+export type { HeaderProps } from './components/header/index.js';
+export type { InputProps } from './components/input/index.js';
+export type { LabelProps } from './components/label/index.js';
+export type { LanguagePickerButtonProps } from './components/language-picker-button/index.js';
+export type { LightDarkToggleProps } from './components/light-dark-toggle/index.js';
+export type { PopoverProps } from './components/popover/index.js';
+export type { PopoverResponsiveProps } from './components/popover-responsive/index.js';
+export type { SelectProps } from './components/select/index.js';
+export type { SideNavigationItem, SideNavigationProps } from './components/side-navigation/index.js';
+export type { SliderProps } from './components/slider/index.js';
+export type { StarRatingProps } from './components/star-rating/index.js';
+export type { SwitchProps } from './components/switch/index.js';
+export type { TabsProps, TabsListProps, TabsItemProps, TabsContentProps } from './components/tabs/index.js';
+export type { TeraUiContextProps } from './components/tera-ui-context/index.js';
+export type { TextAreaProps, AutoSizeConfig } from './components/text-area/index.js';
+export type { UserAvatarWithMenuProps } from './components/user-avatar-with-menu/index.js';