tera-system-ui 0.0.2 → 0.0.5

package/dist/components/icons/IconChevronDown.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconChevronDown } from "@tabler/icons-svelte";
+declare const IconChevronDown: import("svelte").Component<IconsProps, {}, "">;
+export default IconChevronDown;

package/dist/components/icons/IconCopy.svelte

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

package/dist/components/icons/IconCopy.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconCopy } from "@tabler/icons-svelte";
+declare const IconCopy: import("svelte").Component<IconsProps, {}, "">;
+export default IconCopy;

package/dist/components/icons/IconCopyCheckFilled.svelte

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

package/dist/components/icons/IconCopyCheckFilled.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconCopyCheckFilled } from "@tabler/icons-svelte";
+declare const IconCopyCheckFilled: import("svelte").Component<IconsProps, {}, "">;
+export default IconCopyCheckFilled;

package/dist/components/icons/IconLoader2.svelte

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

package/dist/components/icons/IconLoader2.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconLoader2 } from "@tabler/icons-svelte";
+declare const IconLoader2: import("svelte").Component<IconsProps, {}, "">;
+export default IconLoader2;

package/dist/components/icons/IconPointFilled.svelte

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

package/dist/components/icons/IconPointFilled.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconPointFilled } from "@tabler/icons-svelte";
+declare const IconPointFilled: import("svelte").Component<IconsProps, {}, "">;
+export default IconPointFilled;

package/dist/components/icons/IconSearch.svelte

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

package/dist/components/icons/IconSearch.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconSearch } from "@tabler/icons-svelte";
+declare const IconSearch: import("svelte").Component<IconsProps, {}, "">;
+export default IconSearch;

package/dist/components/icons/IconSwitchHorizontal.svelte

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

package/dist/components/icons/IconSwitchHorizontal.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconSwitchHorizontal } from "@tabler/icons-svelte";
+declare const IconSwitchHorizontal: import("svelte").Component<IconsProps, {}, "">;
+export default IconSwitchHorizontal;

package/dist/components/icons/IconSwitchVertical.svelte

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

package/dist/components/icons/IconSwitchVertical.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconSwitchVertical } from "@tabler/icons-svelte";
+declare const IconSwitchVertical: import("svelte").Component<IconsProps, {}, "">;
+export default IconSwitchVertical;

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

@@ -1,2 +1,19 @@
+export { default as IconArrowBigRightFilled } from './IconArrowBigRightFilled.svelte';
+export { default as IconBook } from './IconBook.svelte';
+export { default as IconBookmarkPlus } from './IconBookmarkPlus.svelte';
+export { default as IconCalculator } from './IconCalculator.svelte';
+export { default as IconCheck } from './IconCheck.svelte';
+export { default as IconChevronDown } from './IconChevronDown.svelte';
+export { default as IconCopy } from './IconCopy.svelte';
+export { default as IconCopyCheckFilled } from './IconCopyCheckFilled.svelte';
 export { default as IconHamburger } from './IconHamburger.svelte';
 export { default as IconLanguage } from './IconLanguage.svelte';
+export { default as IconLoader2 } from './IconLoader2.svelte';
+export { default as IconMoon } from './IconMoon.svelte';
+export { default as IconPointFilled } from './IconPointFilled.svelte';
+export { default as IconSearch } from './IconSearch.svelte';
+export { default as IconSun } from './IconSun.svelte';
+export { default as IconSwitchHorizontal } from './IconSwitchHorizontal.svelte';
+export { default as IconSwitchVertical } from './IconSwitchVertical.svelte';
+export { default as IconTransform } from './IconTransform.svelte';
+export { default as IconX } from './IconX.svelte';

package/dist/components/icons/index.js

@@ -1,2 +1,19 @@
+export { default as IconArrowBigRightFilled } from './IconArrowBigRightFilled.svelte';
+export { default as IconBook } from './IconBook.svelte';
+export { default as IconBookmarkPlus } from './IconBookmarkPlus.svelte';
+export { default as IconCalculator } from './IconCalculator.svelte';
+export { default as IconCheck } from './IconCheck.svelte';
+export { default as IconChevronDown } from './IconChevronDown.svelte';
+export { default as IconCopy } from './IconCopy.svelte';
+export { default as IconCopyCheckFilled } from './IconCopyCheckFilled.svelte';
 export { default as IconHamburger } from './IconHamburger.svelte';
 export { default as IconLanguage } from './IconLanguage.svelte';
+export { default as IconLoader2 } from './IconLoader2.svelte';
+export { default as IconMoon } from './IconMoon.svelte';
+export { default as IconPointFilled } from './IconPointFilled.svelte';
+export { default as IconSearch } from './IconSearch.svelte';
+export { default as IconSun } from './IconSun.svelte';
+export { default as IconSwitchHorizontal } from './IconSwitchHorizontal.svelte';
+export { default as IconSwitchVertical } from './IconSwitchVertical.svelte';
+export { default as IconTransform } from './IconTransform.svelte';
+export { default as IconX } from './IconX.svelte';

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

@@ -0,0 +1,116 @@
+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;
+    };
+}, 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;
+    };
+}>, {
+    variant: {
+        outlined: string;
+        filled: string;
+        borderless: string;
+    };
+    disabled: {
+        true: string;
+        false: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+        lg: 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;
+    };
+}, 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>>;
+type InputVariants = VariantProps<typeof styles>;
+export interface InputProps extends InputVariants {
+    children?: any;
+    class?: string;
+    value?: string;
+    ref?: HTMLInputElement;
+    prefix?: any;
+}
+export {};

package/dist/components/input/Input.js

@@ -0,0 +1,36 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: 'relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react 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: 'h-6 px-2 text-sm',
+            md: 'h-8 px-3 text-base',
+            lg: 'h-10 px-3 text-lg',
+        },
+    },
+    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'
+    },
+});

package/dist/components/input/Input.svelte

@@ -1,14 +1,25 @@
 <script lang="ts">
-    import {type InputProps, styles} from "./input";
+    import {type InputProps, styles} from "./Input";
+
+    let {
+        children,
+        class: className,
+        value = $bindable(),
+        ref = $bindable(),
+        size,
+        disabled,
+        variant = 'outlined',
+        prefix,
+        ...props
+    }: InputProps = $props();
 
-    // Define component props with inferred types
-    export let size: InputProps['size'] = 'md';
-    export let placeholder: string = '';
-    export let value: string = '';
 </script>
 
 <input
-        class={styles({ size })}
-        placeholder={placeholder}
+        type="text"
+        bind:this={ref}
+        class={styles({ variant, disabled , size, className})}
+        {disabled}
+        {...props}
         bind:value
-/>
+/>

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

@@ -1,23 +1,3 @@
-import { type InputProps } from "./input";
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: Props & {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}
-declare const Input: $$__sveltets_2_IsomorphicComponent<{
-    size?: InputProps["size"];
-    placeholder?: string;
-    value?: string;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Input = InstanceType<typeof Input>;
+import { type InputProps } from "./Input";
+declare const Input: import("svelte").Component<InputProps, {}, "ref" | "value">;
 export default Input;

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

@@ -3,19 +3,19 @@
     import {IconLanguage} from "../icons";
     import {Dialog} from "../dialog";
     import IconCheck from "../icons/IconCheck.svelte";
+    import {getGlobalContext} from "../tera-ui-context/global-context";
 
     let {
         children,
-        currentLangCode = 'en',
         onLangSelect,
-        supportedLanguages = ['en'],
         ...props
     }: LanguagePickerButtonProps & {
-        currentLangCode: string,
-        supportedLanguages: string[],
         onLangSelect: (langCode: string) => void
     } = $props();
 
+    let context = getGlobalContext()
+
+
     const LANGUAGE_LIST = [
         {
             code: "en",
@@ -57,15 +57,18 @@
             label: "Tiếng Việt",
             flag: 'vietnam'
         }
-    ].filter(lang => supportedLanguages.includes(lang.code))
+        // @ts-ignore
+    ].filter(lang => context.supportLanguages!.includes(lang.code))
+
+
+    let currentLangItem = $derived(LANGUAGE_LIST.find(l => l.code === context.language)!)
 
-    let currentLangItem = $derived(LANGUAGE_LIST.find(l => l.code === currentLangCode)!)
 
     function getFlagUrl(flag: string) {
         if (flag === 'spain') {
-            return `/world-flags/${flag}.png`
+            return `${context.basePath ?? ''}/world-flags/${flag}.png`
         }
-        return `/world-flags/${flag}.svg`
+        return `${context.basePath ?? ''}/world-flags/${flag}.svg`
     }
 
     let openDialog = $state(false)
@@ -89,9 +92,9 @@
                         onLangSelect?.(lang.code)
                         openDialog = false
                     }}
-                    data-selected={lang.code === currentLangCode ? '' : undefined}>
+                    data-selected={lang.code === context.language ? '' : undefined}>
                 <div class="flex items-center gap-2">
-                    <img class="size-12 flag-img" src={getFlagUrl(lang.flag)} alt={currentLangItem.flag} loading="lazy">
+                    <img class="size-8 flag-img" src={getFlagUrl(lang.flag)} alt={currentLangItem.flag} loading="lazy">
                     {lang.label}
                 </div>
                 <div class="check">

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

@@ -1,7 +1,5 @@
 import { type LanguagePickerButtonProps } from "./LanguagePickerButton";
 declare const LanguagePickerButton: import("svelte").Component<LanguagePickerButtonProps & {
-    currentLangCode: string;
-    supportedLanguages: string[];
     onLangSelect: (langCode: string) => void;
 }, {}, "">;
 export default LanguagePickerButton;

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

@@ -6,16 +6,16 @@
 
     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');
-        }
-    })
+    // $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;

package/dist/components/popover/Popover.d.ts

@@ -0,0 +1,15 @@
+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 PopoverVariants = VariantProps<typeof styles>;
+export interface PopoverProps extends PopoverVariants {
+    children?: any;
+    class?: string;
+    triggerRef: any;
+    offset?: number;
+    padding?: number;
+    open?: boolean;
+    focusTriggerAfterClose?: boolean;
+    flip?: boolean;
+    autoTrigger?: boolean;
+}
+export {};

package/dist/components/popover/Popover.js

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

package/dist/components/popover/Popover.svelte

@@ -0,0 +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>
+
+</style>

package/dist/components/popover/Popover.svelte.d.ts

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

package/dist/components/popover/index.d.ts

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

package/dist/components/popover/index.js

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