tera-system-ui 0.0.1 → 0.0.3

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/popover/Popover.d.ts

@@ -0,0 +1,14 @@
+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;
+}
+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,129 @@
+<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"
+
+    let {
+        children, triggerRef, class: className, open = $bindable(),
+        offset: offsetAmount = 3,
+        padding: paddingAmount = 12,
+        focusTriggerAfterClose = true,
+        flip: enableFlip = false,
+        ...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',
+            // });
+        });
+    }
+
+
+    $effect(() => {
+        let cleanup: any
+        if (triggerRef) {
+            triggerRef.addEventListener("click", togglePopover);
+        }
+
+        if (open) {
+            hasOpenedYet = true
+            updatePosition()
+
+            // Start auto updates.
+            cleanup = autoUpdate(
+                triggerRef,
+                popover,
+                updatePosition,
+            );
+        } else {
+            cleanup?.()
+            if (focusTriggerAfterClose && hasOpenedYet) {
+                setTimeout(() => {
+                    try {
+                        triggerRef.focus()
+                    } catch (e) {
+                        console.warn('Trigger element focus after close Popover error', e)
+                    }
+                }, 100)
+            }
+        }
+
+        return () => {
+            cleanup?.()
+            if (triggerRef) {
+                triggerRef.removeEventListener("click", togglePopover);
+            }
+        }
+    })
+</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';

package/dist/components/side-navigation/SideNavigation.js

@@ -16,7 +16,6 @@ export const getSideNavState = () => {
     return mainLayout()?.getAttribute('data-side-nav-state') || undefined;
 };
 export const setSideNavState = (state) => {
-    console.log(mainLayout());
     if (state !== undefined) {
         mainLayout()?.setAttribute('data-side-nav-state', state);
     }

package/dist/components/side-navigation/SideNavigation.svelte

@@ -6,7 +6,7 @@
         type SideNavigationProps,
         toggleSideNavigation
     } from "./SideNavigation";
-    import {clickOutside} from "./clickOutside"
+    import {clickOutside} from "../../actions/clickOutside"
     import {Button} from "../button";
     import {IconHamburger} from "../icons";
     import {BrandLogo} from "../brand-logo";
@@ -16,6 +16,8 @@
     import IconCalculator from "../icons/IconCalculator.svelte";
     import {LightDarkToggle} from "../light-dark-toggle";
 
+    import {getGlobalContext} from "../tera-ui-context/global-context";
+
     let {children, ...props}: SideNavigationProps = $props();
 
     let temporaryExpand: any = undefined
@@ -42,6 +44,34 @@
         }
     }
 
+    let globalContext = getGlobalContext()
+
+
+
+    function isSelected(href: string) {
+        const pathname = globalContext?.sideNavHref
+        return pathname?.startsWith(href)
+    }
+
+
+
+    const NAV_ITEM = [
+        {
+            href: '/calculator',
+            icon: IconCalculator,
+            title: 'CalcES Scientific Calculator',
+        },
+        {
+            href: '/convert',
+            icon: IconTransform,
+            title: 'Unit Converter',
+        },
+        {
+            href: '/docs/calculator-usages/calces',
+            icon: IconBook,
+            title: 'CalcES Documentation',
+        },
+    ]
 </script>
 
 <nav class="side-nav_main-side-bar grid grid-rows-[auto_1fr_auto]"
@@ -49,7 +79,7 @@
      onclick_outside={handleClickOutside}
 >
     <div class="flex mt-2 gap-1 items-center">
-        <Button variant="ghost" class="ring-0 focus:ring-0"
+        <Button variant="ghost" ring={false}
                 onclick={toggleSideNavigation}
         >
             <IconHamburger/>
@@ -66,24 +96,14 @@
                 handleHover(false)
              }}
     >
-        <SideNavItem href="/calculator" class="selected">
-            {#snippet icon()}
-                <IconCalculator/>
-            {/snippet}
-            CalcES Scientific Calculator
-        </SideNavItem>
-        <SideNavItem href="/convert" class="">
-            {#snippet icon()}
-                <IconTransform/>
-            {/snippet}
-            Unit Converter
-        </SideNavItem>
-        <SideNavItem href="/docs/calculator-usages/calces">
-            {#snippet icon()}
-                <IconBook/>
-            {/snippet}
-            CalcES Documentation
-        </SideNavItem>
+        {#each NAV_ITEM as item}
+            <SideNavItem href={item.href} class={isSelected(item.href) ? 'selected' : ''}>
+                {#snippet icon()}
+                    <svelte:component this={item.icon}/>
+                {/snippet}
+                {item.title}
+            </SideNavItem>
+        {/each}
     </ul>
     <div>
         <div class="w-[3rem] mb-8 flex justify-center">

package/dist/components/tera-ui-context/TeraUiContext.d.ts

@@ -0,0 +1,11 @@
+import type { AvailableLanguageTag } from "../../i18n/language";
+export type TeraUiContext = {
+    basePath?: string;
+    supportLanguages?: AvailableLanguageTag[];
+    language?: AvailableLanguageTag;
+    sideNavHref?: string;
+};
+export interface TeraUiContextProps extends TeraUiContext {
+    children?: any;
+    class?: string;
+}

package/dist/components/tera-ui-context/TeraUiContext.js

@@ -0,0 +1 @@
+export {};

package/dist/components/tera-ui-context/TeraUiContext.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+    import {type TeraUiContextProps} from "./TeraUiContext";
+    import {setGlobalContext} from "./global-context";
+
+
+    let {
+        children,
+        supportLanguages = ['en'],
+        language = 'en',
+        ...props
+    }: TeraUiContextProps = $props();
+
+
+    setGlobalContext({
+        supportLanguages,
+        language,
+        ...props
+    })
+</script>
+
+{@render children()}

package/dist/components/tera-ui-context/TeraUiContext.svelte.d.ts

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

package/dist/components/tera-ui-context/global-context.d.ts

@@ -0,0 +1,3 @@
+import type { TeraUiContext } from "./TeraUiContext";
+export declare function setGlobalContext(data: TeraUiContext): void;
+export declare function getGlobalContext(): TeraUiContext;

package/dist/components/tera-ui-context/global-context.js

@@ -0,0 +1,15 @@
+import { getContext, setContext } from "svelte";
+export function setGlobalContext(data) {
+    setContext('globalContext', data);
+}
+export function getGlobalContext() {
+    let context = getContext('globalContext');
+    if (!context) {
+        console.warn('tera-system-ui', 'Not set global context yet!', 'Using default context data');
+        return {
+            language: 'en',
+            supportLanguages: ['en']
+        };
+    }
+    return context;
+}

package/dist/components/tera-ui-context/index.d.ts

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

package/dist/components/tera-ui-context/index.js

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

package/dist/i18n/index.d.ts

@@ -0,0 +1 @@
+export { type AvailableLanguageTag, availableLanguageTags } from './language';

package/dist/i18n/index.js

@@ -0,0 +1 @@
+export { availableLanguageTags } from './language';

package/dist/i18n/language.d.ts

@@ -0,0 +1,2 @@
+export type AvailableLanguageTag = "de" | "en" | "es" | "fr" | "pt" | "vi" | "ru" | "it";
+export declare const availableLanguageTags: AvailableLanguageTag[];

package/dist/i18n/language.js

@@ -0,0 +1,10 @@
+export const availableLanguageTags = [
+    "de",
+    "en",
+    "es",
+    "fr",
+    "pt",
+    "vi",
+    "ru",
+    "it",
+];

package/dist/i18n.d.ts

@@ -0,0 +1 @@
+export declare const i18n: any;

package/dist/i18n.js

@@ -0,0 +1,4 @@
+// file initialized by the Paraglide-SvelteKit CLI - Feel free to edit it
+import { createI18n } from "@inlang/paraglide-sveltekit";
+import * as runtime from "./paraglide/runtime.js";
+export const i18n = createI18n(runtime);

package/dist/index.d.ts

@@ -1 +1,13 @@
-export {};
+export { BrandLogo } from './components/brand-logo';
+export { Button } from './components/button';
+export { Combobox } from './components/combobox';
+export { Command } from './components/command';
+export { Dialog } from './components/dialog';
+export { Header } from './components/header';
+export { IconArrowBigRightFilled, IconBook, IconBookmarkPlus, IconCalculator, IconCheck, IconChevronDown, IconCopy, IconCopyCheckFilled, IconHamburger, IconLanguage, IconLoader2, IconMoon, IconPointFilled, IconSearch, IconSun, IconSwitchHorizontal, IconSwitchVertical, IconTransform, IconX } from './components/icons';
+export { Input } from './components/input';
+export { LanguagePickerButton } from './components/language-picker-button';
+export { LightDarkToggle } from './components/light-dark-toggle';
+export { Popover } from './components/popover';
+export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
+export { TeraUiContext } from './components/tera-ui-context';