tera-system-ui 0.1.18 → 0.1.30

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

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

package/dist/components/slider/Slider.svelte

@@ -1,189 +1,189 @@
-<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
-
-        const stopDragging = () => {
-            document.removeEventListener('pointermove', onDrag);
-            document.removeEventListener('touchmove', onDrag);
-            sliderHandle?.removeAttribute('data-state');
-            toggleToolTip(false);
-        };
-
-        slider.addEventListener('pointerdown', (e) => {
-            sliderHandle.setAttribute('data-state', 'dragging');
-            onDrag(e);
-            document.addEventListener('pointermove', onDrag);
-            document.addEventListener('pointerup', stopDragging, {once: true});
-
-            // Add mouseout listener to window
-            window.addEventListener('mouseout', (e) => {
-                if ((e.relatedTarget as HTMLElement)?.tagName === 'IFRAME') {  // Mouse left the window
-                    stopDragging();
-                }
-            });
-        });
-
-        // For touch support
-        slider.addEventListener('touchstart', (e) => {
-            sliderHandle.setAttribute('data-state', 'dragging');
-            onDrag(e);
-            document.addEventListener('touchmove', onDrag, {passive: false});
-            document.addEventListener('touchend', stopDragging, {once: true});
-        }, {passive: false});
-
-        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;
-        const totalSteps = (max - min) / step;
-        const stepSize = sliderWidth / totalSteps;
-
-        // Clamp position within the slider width
-        const clampedPosition = Math.max(0, Math.min(position, sliderWidth));
-        // Calculate steps with decimal precision
-        const stepCount = Math.round(clampedPosition / stepSize);
-
-        // Calculate the value with proper decimal precision
-        const value = min + (stepCount * step);
-        // Round to avoid floating-point precision errors
-        return Number(value.toFixed(10));
-    };
-
-    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>/*! tailwindcss v4.0.4 | 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)*1.5)calc(var(--spacing)*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)*3);height:calc(var(--spacing)*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>
+<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
+
+        const stopDragging = () => {
+            document.removeEventListener('pointermove', onDrag);
+            document.removeEventListener('touchmove', onDrag);
+            sliderHandle?.removeAttribute('data-state');
+            toggleToolTip(false);
+        };
+
+        slider.addEventListener('pointerdown', (e) => {
+            sliderHandle.setAttribute('data-state', 'dragging');
+            onDrag(e);
+            document.addEventListener('pointermove', onDrag);
+            document.addEventListener('pointerup', stopDragging, {once: true});
+
+            // Add mouseout listener to window
+            window.addEventListener('mouseout', (e) => {
+                if ((e.relatedTarget as HTMLElement)?.tagName === 'IFRAME') {  // Mouse left the window
+                    stopDragging();
+                }
+            });
+        });
+
+        // For touch support
+        slider.addEventListener('touchstart', (e) => {
+            sliderHandle.setAttribute('data-state', 'dragging');
+            onDrag(e);
+            document.addEventListener('touchmove', onDrag, {passive: false});
+            document.addEventListener('touchend', stopDragging, {once: true});
+        }, {passive: false});
+
+        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;
+        const totalSteps = (max - min) / step;
+        const stepSize = sliderWidth / totalSteps;
+
+        // Clamp position within the slider width
+        const clampedPosition = Math.max(0, Math.min(position, sliderWidth));
+        // Calculate steps with decimal precision
+        const stepCount = Math.round(clampedPosition / stepSize);
+
+        // Calculate the value with proper decimal precision
+        const value = min + (stepCount * step);
+        // Round to avoid floating-point precision errors
+        return Number(value.toFixed(10));
+    };
+
+    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>/*! 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>

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

@@ -5,19 +5,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, {
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}>, {
+}, undefined, "", {
     size: {
         sm: string;
         md: string;
@@ -29,19 +17,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "", import("tailwind-variants/dist/config").TVConfig<{
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}, {
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, "", unknown, unknown, undefined>>;
 type StarRatingVariants = VariantProps<typeof styles>;
 export interface StarRatingProps extends StarRatingVariants {
     children?: any;

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

@@ -1,83 +1,83 @@
-<script lang="ts">
-    import {type StarRatingProps, styles} from "./StarRating";
-
-    let {
-        children,
-        value = $bindable(),
-        onchange,
-        size = 'md',
-        ...props
-    }: StarRatingProps = $props();
-
-    let hoverRating = $state(0);
-
-    // Descriptive texts for each star rating
-    const descriptions = [
-        'Very Bad',
-        'Bad',
-        'Okay',
-        'Good',
-        'Excellent'
-    ];
-
-    // Sets the rating when a star is clicked
-    function setRating(v, e) {
-        if (value != v) {
-            value = v;
-        } else {
-            value = undefined
-        }
-
-        onchange?.(v)
-        // console.log('setRating', e.type)
-
-    }
-
-    // Updates hover state when hovering over a star
-    function setHover(v, e) {
-        hoverRating = v;
-        // console.log('setHover', v, e.type)
-    }
-
-    // Resets hover state when leaving the star area
-    function resetHover(e) {
-
-        hoverRating = 0;
-        // console.log('resetHover', e.type)
-    }
-
-</script>
-
-<div
-        tabindex="0"
-        role="radiogroup"
-        class="star-rating-container inline-flex items-center">
-    {#each Array(5) as _, index (index)}
-        <button role="radio"
-                tabindex="0"
-                aria-checked={(hoverRating || value) > index}
-                aria-posinset={index + 1}
-                aria-setsize="5"
-                data-rating-icon
-                data-hovering={hoverRating === (index + 1)}
-                aria-label=""
-                onpointerenter={(e) => setHover(index + 1, e)}
-                onpointerleave={resetHover}
-                ontouchendcapture={resetHover}
-                onclick={(e) => setRating(index + 1, e)}
-                class={styles({size})}>
-            <svg
-                    viewBox="64 64 896 896" focusable="true" data-icon="star" width="1em" height="1em"
-                    fill="currentColor"
-                    class="h-full w-full fill-inherit"
-                    aria-hidden="true">
-                <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
-            </svg>
-        </button>
-    {/each}
-</div>
-
-
+<script lang="ts">
+    import {type StarRatingProps, styles} from "./StarRating";
+
+    let {
+        children,
+        value = $bindable(),
+        onchange,
+        size = 'md',
+        ...props
+    }: StarRatingProps = $props();
+
+    let hoverRating = $state(0);
+
+    // Descriptive texts for each star rating
+    const descriptions = [
+        'Very Bad',
+        'Bad',
+        'Okay',
+        'Good',
+        'Excellent'
+    ];
+
+    // Sets the rating when a star is clicked
+    function setRating(v, e) {
+        if (value != v) {
+            value = v;
+        } else {
+            value = undefined
+        }
+
+        onchange?.(v)
+        // console.log('setRating', e.type)
+
+    }
+
+    // Updates hover state when hovering over a star
+    function setHover(v, e) {
+        hoverRating = v;
+        // console.log('setHover', v, e.type)
+    }
+
+    // Resets hover state when leaving the star area
+    function resetHover(e) {
+
+        hoverRating = 0;
+        // console.log('resetHover', e.type)
+    }
+
+</script>
+
+<div
+        tabindex="0"
+        role="radiogroup"
+        class="star-rating-container inline-flex items-center">
+    {#each Array(5) as _, index (index)}
+        <button role="radio"
+                tabindex="0"
+                aria-checked={(hoverRating || value) > index}
+                aria-posinset={index + 1}
+                aria-setsize="5"
+                data-rating-icon
+                data-hovering={hoverRating === (index + 1)}
+                aria-label=""
+                onpointerenter={(e) => setHover(index + 1, e)}
+                onpointerleave={resetHover}
+                ontouchendcapture={resetHover}
+                onclick={(e) => setRating(index + 1, e)}
+                class={styles({size})}>
+            <svg
+                    viewBox="64 64 896 896" focusable="true" data-icon="star" width="1em" height="1em"
+                    fill="currentColor"
+                    class="h-full w-full fill-inherit"
+                    aria-hidden="true">
+                <path d="M908.1 353.1l-253.9-36.9L540.7 86.1c-3.1-6.3-8.2-11.4-14.5-14.5-15.8-7.8-35-1.3-42.9 14.5L369.8 316.2l-253.9 36.9c-7 1-13.4 4.3-18.3 9.3a32.05 32.05 0 00.6 45.3l183.7 179.1-43.4 252.9a31.95 31.95 0 0046.4 33.7L512 754l227.1 119.4c6.2 3.3 13.4 4.4 20.3 3.2 17.4-3 29.1-19.5 26.1-36.9l-43.4-252.9 183.7-179.1c5-4.9 8.3-11.3 9.3-18.3 2.7-17.5-9.5-33.7-27-36.3z"></path>
+            </svg>
+        </button>
+    {/each}
+</div>
+
+
 <style>[data-rating-icon] {
   fill: var(--color-neutral-token-5);
   transition: all var(--duration-element-react);
@@ -93,4 +93,4 @@
 }
 [data-rating-icon][data-hovering=true] {
   transform: scale(1.1);
-}</style>
+}</style>

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

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