tera-system-ui 0.1.20 → 0.1.30

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/icons/transform";
-
-    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/icons/transform";
+
+    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/icons/x";
-
-    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/icons/x";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconX class={styles({...props})}/>
+

package/dist/components/icons/Icons.d.ts

@@ -4,17 +4,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         filled: string;
         default: string;
     };
-}, undefined, "stroke-icon", import("tailwind-variants/dist/config").TVConfig<{
-    style: {
-        filled: string;
-        default: string;
-    };
-}, {
-    style: {
-        filled: string;
-        default: string;
-    };
-}>, {
+}, undefined, "stroke-icon", {
     style: {
         filled: string;
         default: string;
@@ -24,17 +14,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         filled: string;
         default: string;
     };
-}, undefined, "stroke-icon", import("tailwind-variants/dist/config").TVConfig<{
-    style: {
-        filled: string;
-        default: string;
-    };
-}, {
-    style: {
-        filled: string;
-        default: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, "stroke-icon", unknown, unknown, undefined>>;
 type IconsVariants = VariantProps<typeof styles>;
 export interface IconsProps extends IconsVariants {
     children?: any;

package/dist/components/input/Input.d.ts

@@ -14,37 +14,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react 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;
-    };
-}, {
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}>, {
+}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react ring-primary-token-5/50", {
     variant: {
         outlined: string;
         filled: string;
@@ -74,37 +44,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react 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;
-    };
-}, {
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react ring-primary-token-5/50", unknown, unknown, undefined>>;
 type InputVariants = VariantProps<typeof styles>;
 export interface InputProps extends InputVariants {
     children?: any;

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/label/Label.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 LabelVariants = VariantProps<typeof styles>;
 export interface LabelProps extends LabelVariants {
     children?: any;

package/dist/components/label/Label.svelte

@@ -1,19 +1,19 @@
-<script lang="ts">
-    import { Label as LabelPrimitive } from "bits-ui";
-    import { cn } from "../../utils";
-
-    let {
-        ref = $bindable(null),
-        class: className,
-        ...restProps
-    }: LabelPrimitive.RootProps = $props();
-</script>
-
-<LabelPrimitive.Root
-        bind:ref
-        class={cn(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-		className
-	)}
-        {...restProps}
+<script lang="ts">
+    import { Label as LabelPrimitive } from "bits-ui";
+    import { cn } from "../../utils";
+
+    let {
+        ref = $bindable(null),
+        class: className,
+        ...restProps
+    }: LabelPrimitive.RootProps = $props();
+</script>
+
+<LabelPrimitive.Root
+        bind:ref
+        class={cn(
+		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+		className
+	)}
+        {...restProps}
 />

package/dist/components/language-picker-button/LanguagePickerButton.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 LanguagePickerButtonVariants = VariantProps<typeof styles>;
 export interface LanguagePickerButtonProps extends LanguagePickerButtonVariants {
     children?: any;

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

@@ -1,83 +1,83 @@
-<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'
-    import {ALL_LANGUAGE_LIST} from "../../tera-i18n/projects/common/all-language-data";
-    import {cn} from "../../utils";
-
-    let {
-        children,
-        onLangSelect,
-        open = $bindable(false),
-        language,
-        supportLanguages,
-        basePath,
-        ...props
-    }: LanguagePickerButtonProps & {
-        onLangSelect: (langCode: string) => void
-    } = $props();
-
-    let context = getGlobalContext()
-
-    supportLanguages = supportLanguages ?? context.supportLanguages!;
-    language = language ?? context.language
-    basePath = basePath ?? context.basePath
-
-
-    let currentLangItem = $derived(ALL_LANGUAGE_LIST.find(l => l.code === language)!)
-    let langList = $derived([currentLangItem, ...ALL_LANGUAGE_LIST.filter(lang => supportLanguages!.includes(lang.code) && lang.code !== language)])
-
-
-    function getFlagUrl(flag: string) {
-        if (flag === 'spain') {
-            return `${basePath ?? ''}/world-flags/${flag}.png`
-        }
-        return `${basePath ?? ''}/world-flags/${flag}.svg`
-    }
-
-</script>
-
-<!--add component here-->
-<button onclick={() => {open = 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" loading="lazy" src={getFlagUrl(currentLangItem?.flag)} alt={currentLangItem?.flag}>
-</button>
-
-<Dialog bind:open={open} class="text-neutral-token-13" size="auto">
-    {#snippet header()}
-        {m.text_select_language()}
-    {/snippet}
-    <div class={cn("grid grid-cols-1 gap-2 sm:grid-cols-2 mx-auto",
-                {
-                    "sm:grid-cols-3 sm:gap-3": langList.length > 10 && langList.length <= 20,
-                    "sm:grid-cols-3 md:grid-cols-4 sm:gap-3": langList.length > 20 ,
-                })
-        }
-    >
-        {#each langList as lang}
-            <button class="w-[80vw] sm:w-full flex gap-1 items-center justify-between text-start px-1 py-1 pe-2 rounded-full bg-neutral-token-3 sm:max-w-[40rem]"
-                    onclick={() => {
-                        onLangSelect?.(lang.code)
-                        open = false
-                    }}
-                    data-selected={lang.code === 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 {m} from '../../paraglide/messages.js'
+    import {ALL_LANGUAGE_LIST} from "../../tera-i18n/projects/common/all-language-data";
+    import {cn} from "../../utils";
+
+    let {
+        children,
+        onLangSelect,
+        open = $bindable(false),
+        language,
+        supportLanguages,
+        basePath,
+        ...props
+    }: LanguagePickerButtonProps & {
+        onLangSelect: (langCode: string) => void
+    } = $props();
+
+    let context = getGlobalContext()
+
+    supportLanguages = supportLanguages ?? context.supportLanguages!;
+    language = language ?? context.language
+    basePath = basePath ?? context.basePath
+
+
+    let currentLangItem = $derived(ALL_LANGUAGE_LIST.find(l => l.code === language)!)
+    let langList = $derived([currentLangItem, ...ALL_LANGUAGE_LIST.filter(lang => supportLanguages!.includes(lang.code) && lang.code !== language)])
+
+
+    function getFlagUrl(flag: string) {
+        if (flag === 'spain') {
+            return `${basePath ?? ''}/world-flags/${flag}.png`
+        }
+        return `${basePath ?? ''}/world-flags/${flag}.svg`
+    }
+
+</script>
+
+<!--add component here-->
+<button onclick={() => {open = 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" loading="lazy" src={getFlagUrl(currentLangItem?.flag)} alt={currentLangItem?.flag}>
+</button>
+
+<Dialog bind:open={open} class="text-neutral-token-13" size="auto">
+    {#snippet header()}
+        {m.text_select_language()}
+    {/snippet}
+    <div class={cn("grid grid-cols-1 gap-2 sm:grid-cols-2 mx-auto",
+                {
+                    "sm:grid-cols-3 sm:gap-3": langList.length > 10 && langList.length <= 20,
+                    "sm:grid-cols-3 md:grid-cols-4 sm:gap-3": langList.length > 20 ,
+                })
+        }
+    >
+        {#each langList as lang}
+            <button class="w-[80vw] sm:w-full flex gap-1 items-center justify-between text-start px-1 py-1 pe-2 rounded-full bg-neutral-token-3 sm:max-w-[40rem]"
+                    onclick={() => {
+                        onLangSelect?.(lang.code)
+                        open = false
+                    }}
+                    data-selected={lang.code === 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.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 LightDarkToggleVariants = VariantProps<typeof styles>;
 export interface LightDarkToggleProps extends LightDarkToggleVariants {
     children?: any;

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

@@ -1,38 +1,38 @@
-<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
-        aria-label="Toggle light/dark mode"
-        {...props}
-        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
+        aria-label="Toggle light/dark mode"
+        {...props}
+        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.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 PopoverVariants = VariantProps<typeof styles>;
 export interface PopoverProps extends PopoverVariants {
     children?: any;