tera-system-ui 0.0.1

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

@@ -0,0 +1,122 @@
+<script lang="ts">
+    import {type LanguagePickerButtonProps} from "./LanguagePickerButton";
+    import {IconLanguage} from "../icons";
+    import {Dialog} from "../dialog";
+    import IconCheck from "../icons/IconCheck.svelte";
+
+    let {
+        children,
+        currentLangCode = 'en',
+        onLangSelect,
+        supportedLanguages = ['en'],
+        ...props
+    }: LanguagePickerButtonProps & {
+        currentLangCode: string,
+        supportedLanguages: string[],
+        onLangSelect: (langCode: string) => void
+    } = $props();
+
+    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'
+        }
+    ].filter(lang => supportedLanguages.includes(lang.code))
+
+    let currentLangItem = $derived(LANGUAGE_LIST.find(l => l.code === currentLangCode)!)
+
+    function getFlagUrl(flag: string) {
+        if (flag === 'spain') {
+            return `/world-flags/${flag}.png`
+        }
+        return `/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">
+    {#snippet header()}
+        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 === currentLangCode ? '' : undefined}>
+                <div class="flex items-center gap-2">
+                    <img class="size-12 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;
+}
+button:hover {
+  background-color: hsl(var(--tw---token-color-neutral-token-4));
+}
+button[data-selected] {
+  background-color: hsl(var(--tw---token-color-neutral-token-11));
+  color: hsl(var(--tw---token-color-neutral-token-1));
+}
+button[data-selected] .check {
+  opacity: 1;
+}
+
+.flag-img {
+  border-radius: 9999px;
+}</style>

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

@@ -0,0 +1,7 @@
+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/language-picker-button/index.d.ts

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

package/dist/components/language-picker-button/index.js

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

package/dist/components/light-dark-toggle/LightDarkToggle.d.ts

@@ -0,0 +1,8 @@
+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 LightDarkToggleVariants = VariantProps<typeof styles>;
+export interface LightDarkToggleProps extends LightDarkToggleVariants {
+    children?: any;
+    class?: string;
+}
+export {};

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

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

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

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

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

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

package/dist/components/light-dark-toggle/index.d.ts

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

package/dist/components/light-dark-toggle/index.js

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

package/dist/components/side-navigation/SideNavigation.d.ts

@@ -0,0 +1,18 @@
+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 SideNavigationVariants = VariantProps<typeof styles>;
+export interface SideNavigationProps extends SideNavigationVariants {
+    children?: any;
+    class?: string;
+}
+export declare const BEAK_POINTS: {
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+};
+export declare const mainLayout: () => HTMLElement | null;
+export declare const getSideNavState: () => string | undefined;
+export declare const setSideNavState: (state: any) => void;
+export declare function toggleSideNavigation(): void;
+export {};

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

@@ -0,0 +1,41 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: '',
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {},
+});
+export const BEAK_POINTS = {
+    sm: 640,
+    md: 768,
+    lg: 1024,
+    xl: 1280,
+};
+export const mainLayout = () => document?.getElementById('side-nav_main-layout');
+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);
+    }
+    else {
+        mainLayout()?.removeAttribute('data-side-nav-state');
+    }
+};
+export function toggleSideNavigation() {
+    let screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+    let currentSideNavState = getSideNavState();
+    let state;
+    if (screenWidth < BEAK_POINTS.md) {
+        state = currentSideNavState == undefined ? "expand" : undefined;
+    }
+    else if (screenWidth >= BEAK_POINTS.md && screenWidth < BEAK_POINTS.xl) {
+        state = currentSideNavState == undefined ? "expand" : undefined;
+    }
+    else if (screenWidth >= BEAK_POINTS.xl) {
+        state = currentSideNavState == undefined ? "compact" : undefined;
+    }
+    setSideNavState(state);
+}

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

@@ -0,0 +1,93 @@
+<script lang="ts">
+    import {
+        BEAK_POINTS,
+        mainLayout,
+        setSideNavState,
+        type SideNavigationProps,
+        toggleSideNavigation
+    } from "./SideNavigation";
+    import {clickOutside} from "./clickOutside"
+    import {Button} from "../button";
+    import {IconHamburger} from "../icons";
+    import {BrandLogo} from "../brand-logo";
+    import SideNavItem from "./SideNavigationItem.svelte";
+    import IconBook from "../icons/IconBook.svelte";
+    import IconTransform from "../icons/IconTransform.svelte";
+    import IconCalculator from "../icons/IconCalculator.svelte";
+    import {LightDarkToggle} from "../light-dark-toggle";
+
+    let {children, ...props}: SideNavigationProps = $props();
+
+    let temporaryExpand: any = undefined
+
+
+    function handleClickOutside() {
+        let screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
+        if (screenWidth < BEAK_POINTS.md) {
+            setSideNavState(undefined)
+        } else if (screenWidth >= BEAK_POINTS.md && screenWidth < BEAK_POINTS.xl) {
+            setSideNavState(undefined)
+        } else if (screenWidth >= BEAK_POINTS.xl) {
+
+        }
+    }
+
+    function handleHover(isHover: boolean) {
+        temporaryExpand = isHover ? true : undefined
+
+        if (temporaryExpand) {
+            mainLayout()?.setAttribute('data-side-nav-temporary-expand', temporaryExpand)
+        } else {
+            mainLayout()?.removeAttribute('data-side-nav-temporary-expand')
+        }
+    }
+
+</script>
+
+<nav class="side-nav_main-side-bar grid grid-rows-[auto_1fr_auto]"
+     use:clickOutside
+     onclick_outside={handleClickOutside}
+>
+    <div class="flex mt-2 gap-1 items-center">
+        <Button variant="ghost" class="ring-0 focus:ring-0"
+                onclick={toggleSideNavigation}
+        >
+            <IconHamburger/>
+        </Button>
+        <div class="sm-hidden">
+            <BrandLogo/>
+        </div>
+    </div>
+    <ul class="mt-12"
+        onmouseenter={() => {
+                handleHover(true)
+             }}
+        onmouseleave={() => {
+                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>
+    </ul>
+    <div>
+        <div class="w-[3rem] mb-8 flex justify-center">
+            <LightDarkToggle/>
+        </div>
+    </div>
+</nav>

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

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

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

@@ -0,0 +1,18 @@
+<script lang="ts">
+    const {class: className, href, children, icon} = $props()
+</script>
+
+<li class="{className + ' side-nav_item'}">
+    <a href="{href || '#'}" class="">
+        <div class="min-w-icon-sm z-10">
+            {@render icon?.()}
+        </div>
+        <div class="sm-hidden z-10">
+            {@render children?.()}
+        </div>
+    </a>
+</li>
+
+<style>
+
+</style>

package/dist/components/side-navigation/SideNavigationItem.svelte.d.ts

@@ -0,0 +1,7 @@
+declare const SideNavigationItem: import("svelte").Component<{
+    class: unknown;
+    href: unknown;
+    children: unknown;
+    icon: unknown;
+}, {}, "">;
+export default SideNavigationItem;

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import {SideNavigation} from "./";
+    import './sidenav.scss'
+
+    let {children} = $props()
+</script>
+
+<main
+        id="side-nav_main-layout"
+        class="side-nav_main-layout relative"
+        data-side-nav-state="compact"
+>
+    <SideNavigation/>
+
+    <section class="side-nav_main-content">
+        {@render children?.()}
+    </section>
+</main>
+

package/dist/components/side-navigation/SideNavigationLayout.svelte.d.ts

@@ -0,0 +1,5 @@
+import './sidenav.scss';
+declare const SideNavigationLayout: import("svelte").Component<{
+    children: unknown;
+}, {}, "">;
+export default SideNavigationLayout;

package/dist/components/side-navigation/clickOutside.d.ts

@@ -0,0 +1,4 @@
+/** Dispatch event on click outside of node */
+export declare function clickOutside(node: any): {
+    destroy(): void;
+};

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

@@ -0,0 +1,14 @@
+/** Dispatch event on click outside of node */
+export function clickOutside(node) {
+    const handleClick = (event) => {
+        if (node && !node.contains(event.target) && !event.defaultPrevented) {
+            node.dispatchEvent(new CustomEvent('click_outside', node));
+        }
+    };
+    document.addEventListener('click', handleClick, true);
+    return {
+        destroy() {
+            document.removeEventListener('click', handleClick, true);
+        }
+    };
+}

package/dist/components/side-navigation/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SideNavigation } from './SideNavigation.svelte';
+export { default as SideNavigationLayout } from './SideNavigationLayout.svelte';
+export { toggleSideNavigation } from './SideNavigation';

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

@@ -0,0 +1,3 @@
+export { default as SideNavigation } from './SideNavigation.svelte';
+export { default as SideNavigationLayout } from './SideNavigationLayout.svelte';
+export { toggleSideNavigation } from './SideNavigation';

package/dist/components/side-navigation/sidenav.scss

@@ -0,0 +1,149 @@
+:root {
+  --sidebar-width: 0;
+  --sidebar-transition-duration: 0.2s;
+  --sidebar-main-margin-left: 0;
+  --sidebar-border-width: 0;
+}
+
+.side-nav_main-layout {
+  transition: padding-left var(--sidebar-transition-duration);
+}
+
+.side-nav_main-side-bar {
+  container-type: inline-size;
+  z-index: 50;
+  width: var(--sidebar-width);
+  overflow-x: hidden;
+  border-right: var(--sidebar-border-width) solid theme('colors.neutral.token.5');
+  height: 100dvh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+
+  transition: width var(--sidebar-transition-duration);
+  background: theme('colors.neutral.token.1');
+
+  ul {
+    width: var(--sidebar-width);
+    transition: width var(--sidebar-transition-duration);
+  }
+
+}
+
+
+.sm-hidden {
+  opacity: 0;
+  transition: opacity var(--sidebar-transition-duration);
+}
+
+@container (min-width: 3rem) {
+  .sm-hidden {
+    opacity: 1;
+  }
+}
+
+.side-nav_main-content {
+  margin-left: var(--sidebar-main-margin-left);
+  transition: margin-left var(--sidebar-transition-duration);
+}
+
+
+.side-nav_main-layout {
+  &[data-side-nav-state="expand"], &[data-side-nav-temporary-expand="true"] {
+    --sidebar-width: 16.5rem;
+    --sidebar-border-width: 1px;
+    .header-brand-logo {
+      display: none;
+    }
+  }
+}
+
+@media (min-width: theme('screens.md')) {
+  :root {
+    --sidebar-main-margin-left: 3rem;
+    --sidebar-border-width: 1px;
+    --sidebar-width: 3rem;
+  }
+}
+
+@media (min-width: theme('screens.xl')) {
+  :root {
+    --sidebar-main-margin-left: var(--sidebar-width);
+    --sidebar-width: 16.5rem;
+  }
+  .header-brand-logo {
+    display: none;
+  }
+  .side-nav_main-layout {
+    &[data-side-nav-state="compact"] {
+      --sidebar-main-margin-left: 3rem;
+      --sidebar-width: 3rem;
+      .header-brand-logo {
+        display: block;
+      }
+    }
+
+    &[data-side-nav-temporary-expand="true"] {
+      --sidebar-width: 16.5rem;
+
+    }
+  }
+}
+
+
+.side-nav_item {
+  color: theme('colors.neutral.token.13');
+
+  a {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+    width: 100%;
+    position: relative;
+    white-space: nowrap;
+    @apply px-3 py-3 font-semibold;
+  }
+
+  svg {
+    &.icon {
+      min-width: 24px;
+    }
+  }
+
+  &.selected a {
+    //background-color: theme('colors.neutral.token.11');
+    color: theme('colors.neutral.token.1');
+    //@apply rounded-full;
+  }
+
+  &.selected {
+    a::after {
+      content: '';
+      position: absolute;
+      inset-inline: 0.25rem;
+      inset-block: 0.2rem;
+      background: theme('colors.neutral.token.11');
+      border-radius: theme('borderRadius.DEFAULT');
+      z-index: 0;
+    }
+  }
+
+  //&.selected {
+  //  a::after {
+  //    content: '';
+  //    position: absolute;
+  //    left: 0;
+  //    top: 0;
+  //    bottom: 0;
+  //    width: 4px;
+  //    height: 100%;
+  //    background: theme('colors.primary.token.4');
+  //    border-radius: 4px 0 0 4px;
+  //  }
+  //}
+
+  &:hover {
+    background-color: theme('colors.neutral.token.3');
+  }
+}

package/dist/index.d.ts

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

package/dist/index.js

@@ -0,0 +1,2 @@
+"use strict";
+// Reexport your entry components here

package/dist/utils/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/dist/utils/utils.js

@@ -0,0 +1,5 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+export function cn(...inputs) {
+    return twMerge(clsx(inputs));
+}