tera-system-ui 0.0.12 → 0.0.13

package/dist/components/icons/IconTransform.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconTransform} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconTransform class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconTransform} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconTransform class={styles({...props})}/>
+

package/dist/components/icons/IconX.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconX} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconX class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconX} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconX class={styles({...props})}/>
+

package/dist/components/input/Input.svelte

@@ -1,25 +1,25 @@
-<script lang="ts">
-    import {type InputProps, styles} from "./Input";
-
-    let {
-        children,
-        class: className,
-        value = $bindable(),
-        ref = $bindable(),
-        size,
-        disabled,
-        variant = 'outlined',
-        prefix,
-        ...props
-    }: InputProps = $props();
-
-</script>
-
-<input
-        type="text"
-        bind:this={ref}
-        class={styles({ variant, disabled , size, className})}
-        {disabled}
-        {...props}
-        bind:value
+<script lang="ts">
+    import {type InputProps, styles} from "./Input";
+
+    let {
+        children,
+        class: className,
+        value = $bindable(),
+        ref = $bindable(),
+        size,
+        disabled,
+        variant = 'outlined',
+        prefix,
+        ...props
+    }: InputProps = $props();
+
+</script>
+
+<input
+        type="text"
+        bind:this={ref}
+        class={styles({ variant, disabled , size, className})}
+        {disabled}
+        {...props}
+        bind:value
 />

package/dist/components/language-picker-button/LanguagePickerButton.svelte

@@ -1,112 +1,112 @@
-<script lang="ts">
-    import {type LanguagePickerButtonProps} from "./LanguagePickerButton";
-    import {IconLanguage} from "../icons";
-    import {Dialog} from "../dialog";
-    import IconCheck from "../icons/IconCheck.svelte";
-    import {getGlobalContext} from "../tera-ui-context/global-context";
-    import * as m from '../../paraglide/messages.js'
-
-    let {
-        children,
-        onLangSelect,
-        ...props
-    }: LanguagePickerButtonProps & {
-        onLangSelect: (langCode: string) => void
-    } = $props();
-
-    let context = getGlobalContext()
-
-
-    const LANGUAGE_LIST = [
-        {
-            code: "en",
-            label: "English (US)",
-            flag: 'united states'
-        },
-        {
-            code: "de",
-            label: "Deutsch",
-            flag: 'germany'
-        },
-        {
-            code: "es",
-            label: "Español",
-            flag: 'spain'
-        },
-        {
-            code: "fr",
-            label: "Français",
-            flag: 'france'
-        },
-        {
-            code: "it",
-            label: "Italiano",
-            flag: 'italy'
-        },
-        {
-            code: "pt",
-            label: "Português",
-            flag: 'portugal'
-        },
-        {
-            code: "ru",
-            label: "Русский",
-            flag: 'russia'
-        },
-        {
-            code: "vi",
-            label: "Tiếng Việt",
-            flag: 'vietnam'
-        }
-        // @ts-ignore
-    ].filter(lang => context.supportLanguages!.includes(lang.code))
-
-
-    let currentLangItem = $derived(LANGUAGE_LIST.find(l => l.code === context.language)!)
-
-
-    function getFlagUrl(flag: string) {
-        if (flag === 'spain') {
-            return `${context.basePath ?? ''}/world-flags/${flag}.png`
-        }
-        return `${context.basePath ?? ''}/world-flags/${flag}.svg`
-    }
-
-    let openDialog = $state(false)
-</script>
-
-<!--add component here-->
-<button onclick={() => {openDialog = true}}
-        class="h-8 flex items-center bg-neutral-token-4 text-neutral-token-9 rounded-full ps-2 pe-1 hover:bg-neutral-token-5 transition-all duration-element-react">
-    <IconLanguage class="size-icon-xs"/>
-    <img class="size-6 flag-img" src={getFlagUrl(currentLangItem.flag)} alt={currentLangItem.flag}>
-</button>
-
-<Dialog bind:open={openDialog} class="text-neutral-token-13" size="xs" staticRender>
-    {#snippet header()}
-        {m.text_select_language()}
-    {/snippet}
-    <div class="grid grid-cols-1 mx-auto gap-2">
-        {#each LANGUAGE_LIST as lang}
-            <button class="w-full flex gap-1 items-center justify-between text-start px-1 py-1 pe-2 rounded-full bg-neutral-token-3"
-                    onclick={() => {
-                        onLangSelect?.(lang.code)
-                        openDialog = false
-                    }}
-                    data-selected={lang.code === context.language ? '' : undefined}>
-                <div class="flex items-center gap-2">
-                    <img class="size-8 flag-img" src={getFlagUrl(lang.flag)} alt={currentLangItem.flag} loading="lazy">
-                    {lang.label}
-                </div>
-                <div class="check">
-                    <IconCheck class="check size-icon-sm"/>
-                </div>
-            </button>
-        {/each}
-    </div>
-</Dialog>
-
-
+<script lang="ts">
+    import {type LanguagePickerButtonProps} from "./LanguagePickerButton";
+    import {IconLanguage} from "../icons";
+    import {Dialog} from "../dialog";
+    import IconCheck from "../icons/IconCheck.svelte";
+    import {getGlobalContext} from "../tera-ui-context/global-context";
+    import * as m from '../../paraglide/messages.js'
+
+    let {
+        children,
+        onLangSelect,
+        ...props
+    }: LanguagePickerButtonProps & {
+        onLangSelect: (langCode: string) => void
+    } = $props();
+
+    let context = getGlobalContext()
+
+
+    const LANGUAGE_LIST = [
+        {
+            code: "en",
+            label: "English (US)",
+            flag: 'united states'
+        },
+        {
+            code: "de",
+            label: "Deutsch",
+            flag: 'germany'
+        },
+        {
+            code: "es",
+            label: "Español",
+            flag: 'spain'
+        },
+        {
+            code: "fr",
+            label: "Français",
+            flag: 'france'
+        },
+        {
+            code: "it",
+            label: "Italiano",
+            flag: 'italy'
+        },
+        {
+            code: "pt",
+            label: "Português",
+            flag: 'portugal'
+        },
+        {
+            code: "ru",
+            label: "Русский",
+            flag: 'russia'
+        },
+        {
+            code: "vi",
+            label: "Tiếng Việt",
+            flag: 'vietnam'
+        }
+        // @ts-ignore
+    ].filter(lang => context.supportLanguages!.includes(lang.code))
+
+
+    let currentLangItem = $derived(LANGUAGE_LIST.find(l => l.code === context.language)!)
+
+
+    function getFlagUrl(flag: string) {
+        if (flag === 'spain') {
+            return `${context.basePath ?? ''}/world-flags/${flag}.png`
+        }
+        return `${context.basePath ?? ''}/world-flags/${flag}.svg`
+    }
+
+    let openDialog = $state(false)
+</script>
+
+<!--add component here-->
+<button onclick={() => {openDialog = true}}
+        class="h-8 flex items-center bg-neutral-token-4 text-neutral-token-9 rounded-full ps-2 pe-1 hover:bg-neutral-token-5 transition-all duration-element-react">
+    <IconLanguage class="size-icon-xs"/>
+    <img class="size-6 flag-img" src={getFlagUrl(currentLangItem.flag)} alt={currentLangItem.flag}>
+</button>
+
+<Dialog bind:open={openDialog} class="text-neutral-token-13" size="xs" staticRender>
+    {#snippet header()}
+        {m.text_select_language()}
+    {/snippet}
+    <div class="grid grid-cols-1 mx-auto gap-2">
+        {#each LANGUAGE_LIST as lang}
+            <button class="w-full flex gap-1 items-center justify-between text-start px-1 py-1 pe-2 rounded-full bg-neutral-token-3"
+                    onclick={() => {
+                        onLangSelect?.(lang.code)
+                        openDialog = false
+                    }}
+                    data-selected={lang.code === context.language ? '' : undefined}>
+                <div class="flex items-center gap-2">
+                    <img class="size-8 flag-img" src={getFlagUrl(lang.flag)} alt={currentLangItem.flag} loading="lazy">
+                    {lang.label}
+                </div>
+                <div class="check">
+                    <IconCheck class="check size-icon-sm"/>
+                </div>
+            </button>
+        {/each}
+    </div>
+</Dialog>
+
+
 <style>button .check {
   opacity: 0;
 }

package/dist/components/light-dark-toggle/LightDarkToggle.svelte

@@ -1,36 +1,36 @@
-<script lang="ts">
-    import {type LightDarkToggleProps} from "./LightDarkToggle";
-    import {Button} from "../button";
-    import IconSun from "../icons/IconSun.svelte";
-    import IconMoon from "../icons/IconMoon.svelte";
-
-    let {children, ...props}: LightDarkToggleProps = $props();
-
-    // $effect(() => {
-    //     const htmlElement = document.documentElement;
-    //     // Check for saved theme preference
-    //     const currentTheme = localStorage.getItem('theme');
-    //     if (currentTheme === 'dark') {
-    //         htmlElement.classList.add('dark');
-    //     } else {
-    //         htmlElement.classList.remove('dark');
-    //     }
-    // })
-
-    function toggleLightDarkTheme() {
-        const htmlElement = document.documentElement;
-
-        htmlElement.classList.toggle('dark');
-        const theme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
-        localStorage.setItem('theme', theme);
-    }
-</script>
-
-<!--add component here-->
-<Button variant="ghost" icon
-        onclick={toggleLightDarkTheme}>
-    <!-- Sun icon, animates out when in dark mode -->
-    <IconSun class="icon-sun dark:hidden"/>
-    <!-- Moon icon, animates in when in dark mode -->
-    <IconMoon class="icon-moon hidden dark:block"/>
-</Button>
+<script lang="ts">
+    import {type LightDarkToggleProps} from "./LightDarkToggle";
+    import {Button} from "../button";
+    import IconSun from "../icons/IconSun.svelte";
+    import IconMoon from "../icons/IconMoon.svelte";
+
+    let {children, ...props}: LightDarkToggleProps = $props();
+
+    // $effect(() => {
+    //     const htmlElement = document.documentElement;
+    //     // Check for saved theme preference
+    //     const currentTheme = localStorage.getItem('theme');
+    //     if (currentTheme === 'dark') {
+    //         htmlElement.classList.add('dark');
+    //     } else {
+    //         htmlElement.classList.remove('dark');
+    //     }
+    // })
+
+    function toggleLightDarkTheme() {
+        const htmlElement = document.documentElement;
+
+        htmlElement.classList.toggle('dark');
+        const theme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
+        localStorage.setItem('theme', theme);
+    }
+</script>
+
+<!--add component here-->
+<Button variant="ghost" icon
+        onclick={toggleLightDarkTheme}>
+    <!-- Sun icon, animates out when in dark mode -->
+    <IconSun class="icon-sun dark:hidden"/>
+    <!-- Moon icon, animates in when in dark mode -->
+    <IconMoon class="icon-moon hidden dark:block"/>
+</Button>

package/dist/components/popover/Popover.svelte

@@ -1,137 +1,137 @@
-<script lang="ts">
-    import {type PopoverProps} from "./Popover";
-    import {arrow, autoUpdate, computePosition, flip, offset, shift, size} from "@floating-ui/dom";
-    import {cn} from "../../utils/utils";
-
-    import {clickOutside} from "../../actions/clickOutside"
-    import {onDestroy, onMount} from "svelte";
-
-    let {
-        children,
-        triggerRef,
-        class: className,
-        open = $bindable(),
-        offset: offsetAmount = 3,
-        padding: paddingAmount = 12,
-        focusTriggerAfterClose = true,
-        flip: enableFlip = false,
-        autoTrigger = true,
-        ...props
-    }: PopoverProps = $props();
-
-    let hasOpenedYet = $state(false)
-
-    function togglePopover() {
-        open = !open;
-    }
-
-
-    function handleClickOutside(e) {
-        open = false
-    }
-
-    let popover = $state();
-    let arrowElement = $state();
-
-
-    function updatePosition() {
-        computePosition(triggerRef, popover, {
-            placement: 'bottom',
-            middleware: [
-                offset(offsetAmount),
-                size({
-                    apply({rects, elements}) {
-                        Object.assign(elements.floating.style, {
-                            minWidth: `${rects.reference.width}px`,
-                        });
-                    },
-                }),
-                enableFlip ? flip() : undefined,
-                shift({padding: paddingAmount}),
-                arrow({element: arrowElement}),
-            ],
-        }).then(({x, y, placement, middlewareData}) => {
-            Object.assign(popover.style, {
-                left: `${x}px`,
-                top: `${y}px`,
-            });
-            //
-            // // Accessing the data
-            // const {x: arrowX, y: arrowY} = middlewareData.arrow;
-            //
-            // const staticSide = {
-            //     top: 'bottom',
-            //     right: 'left',
-            //     bottom: 'top',
-            //     left: 'right',
-            // }[placement.split('-')[0]];
-            //
-            // Object.assign(arrowElement.style, {
-            //     left: arrowX != null ? `${arrowX}px` : '',
-            //     top: arrowY != null ? `${arrowY}px` : '',
-            //     right: '',
-            //     bottom: '',
-            //     [staticSide]: '-4px',
-            // });
-        });
-    }
-
-    onMount(() => {
-        if (autoTrigger)
-            triggerRef?.addEventListener("click", togglePopover);
-
-    })
-
-    onDestroy(() => {
-        if (autoTrigger)
-            triggerRef?.removeEventListener("click", togglePopover);
-
-    })
-
-    $effect(() => {
-        let cleanup: any
-
-        if (open) {
-            hasOpenedYet = true
-            updatePosition()
-
-            // Start auto updates.
-            cleanup = autoUpdate(
-                triggerRef,
-                popover,
-                updatePosition,
-            );
-        } else {
-            cleanup?.()
-            if (focusTriggerAfterClose && hasOpenedYet) {
-                try {
-                    triggerRef.focus()
-                } catch (e) {
-                    console.warn('Trigger element focus after close Popover error', e)
-                }
-            }
-        }
-
-        return () => {
-            cleanup?.()
-        }
-    })
-</script>
-
-<!-- Popover Content -->
-{#if open}
-    <div bind:this={popover}
-         class={cn("overflow-hidden absolute z-10 bg-neutral-token-1 shadow-2xl rounded-container border border-neutral-token-5", className)}
-         use:clickOutside={{exceptElement: triggerRef}}
-         onclick_outside={handleClickOutside}
-         {...props}
-    >
-        <!--    <div bind:this={arrowElement} class="size-2 absolute rotate-45 bg-inherit"></div>-->
-        {@render children?.()}
-    </div>
-{/if}
-
-
-<style>
-
+<script lang="ts">
+    import {type PopoverProps} from "./Popover";
+    import {arrow, autoUpdate, computePosition, flip, offset, shift, size} from "@floating-ui/dom";
+    import {cn} from "../../utils/utils";
+
+    import {clickOutside} from "../../actions/clickOutside"
+    import {onDestroy, onMount} from "svelte";
+
+    let {
+        children,
+        triggerRef,
+        class: className,
+        open = $bindable(),
+        offset: offsetAmount = 3,
+        padding: paddingAmount = 12,
+        focusTriggerAfterClose = true,
+        flip: enableFlip = false,
+        autoTrigger = true,
+        ...props
+    }: PopoverProps = $props();
+
+    let hasOpenedYet = $state(false)
+
+    function togglePopover() {
+        open = !open;
+    }
+
+
+    function handleClickOutside(e) {
+        open = false
+    }
+
+    let popover = $state();
+    let arrowElement = $state();
+
+
+    function updatePosition() {
+        computePosition(triggerRef, popover, {
+            placement: 'bottom',
+            middleware: [
+                offset(offsetAmount),
+                size({
+                    apply({rects, elements}) {
+                        Object.assign(elements.floating.style, {
+                            minWidth: `${rects.reference.width}px`,
+                        });
+                    },
+                }),
+                enableFlip ? flip() : undefined,
+                shift({padding: paddingAmount}),
+                arrow({element: arrowElement}),
+            ],
+        }).then(({x, y, placement, middlewareData}) => {
+            Object.assign(popover.style, {
+                left: `${x}px`,
+                top: `${y}px`,
+            });
+            //
+            // // Accessing the data
+            // const {x: arrowX, y: arrowY} = middlewareData.arrow;
+            //
+            // const staticSide = {
+            //     top: 'bottom',
+            //     right: 'left',
+            //     bottom: 'top',
+            //     left: 'right',
+            // }[placement.split('-')[0]];
+            //
+            // Object.assign(arrowElement.style, {
+            //     left: arrowX != null ? `${arrowX}px` : '',
+            //     top: arrowY != null ? `${arrowY}px` : '',
+            //     right: '',
+            //     bottom: '',
+            //     [staticSide]: '-4px',
+            // });
+        });
+    }
+
+    onMount(() => {
+        if (autoTrigger)
+            triggerRef?.addEventListener("click", togglePopover);
+
+    })
+
+    onDestroy(() => {
+        if (autoTrigger)
+            triggerRef?.removeEventListener("click", togglePopover);
+
+    })
+
+    $effect(() => {
+        let cleanup: any
+
+        if (open) {
+            hasOpenedYet = true
+            updatePosition()
+
+            // Start auto updates.
+            cleanup = autoUpdate(
+                triggerRef,
+                popover,
+                updatePosition,
+            );
+        } else {
+            cleanup?.()
+            if (focusTriggerAfterClose && hasOpenedYet) {
+                try {
+                    triggerRef.focus()
+                } catch (e) {
+                    console.warn('Trigger element focus after close Popover error', e)
+                }
+            }
+        }
+
+        return () => {
+            cleanup?.()
+        }
+    })
+</script>
+
+<!-- Popover Content -->
+{#if open}
+    <div bind:this={popover}
+         class={cn("overflow-hidden absolute z-10 bg-neutral-token-1 shadow-2xl rounded-container border border-neutral-token-5", className)}
+         use:clickOutside={{exceptElement: triggerRef}}
+         onclick_outside={handleClickOutside}
+         {...props}
+    >
+        <!--    <div bind:this={arrowElement} class="size-2 absolute rotate-45 bg-inherit"></div>-->
+        {@render children?.()}
+    </div>
+{/if}
+
+
+<style>
+
 </style>