tera-system-ui 0.0.21 → 0.0.23

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/tera-ui-context/TeraUiContext.d.ts

@@ -4,6 +4,7 @@ export type TeraUiContext = {
     supportLanguages?: AvailableLanguageTag[];
     language?: AvailableLanguageTag;
     sideNavHref?: string;
+    apiUrl?: string;
     isAstroEnv?: boolean;
 };
 export interface TeraUiContextProps extends TeraUiContext {

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'
+    },
+});