tera-system-ui 0.0.23 → 0.0.25

package/dist/components/slider/Slider.svelte

@@ -1,183 +1,183 @@
-<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>
-
+<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;
 }
@@ -225,4 +225,4 @@
 [data-slider-tooltip]:global(.show) {
   opacity: 1;
   transform: translateY(-3.5rem) translateX(-50%) scale(1);
-}</style>
+}</style>

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

@@ -0,0 +1,10 @@
+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 StarRatingVariants = VariantProps<typeof styles>;
+export interface StarRatingProps extends StarRatingVariants {
+    children?: any;
+    class?: string;
+    value?: number;
+    onchange?: (value: number) => void;
+}
+export {};

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

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

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

@@ -0,0 +1,88 @@
+<script lang="ts">
+    import {type StarRatingProps, styles} from "./StarRating";
+    import {cn} from "../../utils/utils";
+
+    let {
+        children,
+        value = $bindable(),
+        onchange,
+        ...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 class="inline-flex items-center">
+    {#each Array(5) as _, index (index)}
+        <button
+                data-rating-icon
+                data-highlight={(hoverRating || value) > index}
+                data-hovering={hoverRating === (index + 1)}
+                aria-label=""
+                onpointerenter={(e) => setHover(index + 1, e)}
+                onpointerleave={resetHover}
+                ontouchendcapture={resetHover}
+                onclick={(e) => setRating(index + 1, e)}
+                class={cn(" h-6 px-1 ")}>
+            <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 global>[data-rating-icon] {
+    fill: hsl(var(--tw---token-color-neutral-token-5));
+    transition-property: all;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms
+}
+[data-rating-icon][data-highlight=true] {
+    fill: #facc15
+}
+[data-rating-icon][data-hovering=true] {
+    --tw-scale-x: 1.1;
+    --tw-scale-y: 1.1;
+    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))
+}</style>

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

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

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

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

package/dist/components/star-rating/index.js

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

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

@@ -1,48 +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?.()}
+<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/TabsContent.svelte

@@ -1,36 +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"] {
+<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"] {
+}
+    [data-state="inactive"] {
     display: none
-}
-
-</style>
-
+}
+
+</style>
+