tera-system-ui 0.0.1

package/dist/components/dialog/Dialog.svelte

@@ -0,0 +1,154 @@
+<script lang="ts">
+    import {type DialogProps, styles} from "./Dialog";
+    import IconX from "../icons/IconX.svelte";
+    import {Button} from "../button";
+
+    let {
+        children, open = $bindable(),
+        closeOnClickOutside = true,
+        closeButton = true,
+        size = 'sm',
+        header,
+        footer,
+        class: className,
+        ...props
+    }: DialogProps & {
+        id?: string
+        open?: boolean
+        closeOnClickOutside?: boolean
+        closeButton?: boolean,
+        header?: any,
+        footer?: any,
+    } = $props();
+
+    let dialog;
+
+    // Watch for prop changes to open/close the dialog
+    $effect(() => {
+        if (open) dialog?.showModal();
+        else dialog?.close();
+    })
+
+
+    // Close dialog on clicking outside (optional)
+    function handleClickOutside(event) {
+        if (closeOnClickOutside && event.target === dialog) {
+            open = false;
+            dialog?.close();
+        }
+    }
+
+    // Emit close event when dialog is closed
+    function handleClose() {
+        open = false;
+    }
+
+    // onmousedown={closeOnClickOutside ? 'event.target==this && this.close()' : ''}
+
+    const {base, dialog: dialogStyle, dialogContainer, header: headerStyle, body, footer: footerStyle} = styles({size})
+</script>
+
+<dialog class={dialogStyle() + ` ${className}`}
+        bind:this={dialog}
+        onclose={handleClose}
+        data-onclose="asdf"
+        onmousedown={(e) => {
+            if (closeOnClickOutside && e.target === dialog) {
+                dialog?.close();
+            }
+        }}
+>
+    <button class=""></button>
+    <div class={"dialog-box " + dialogContainer()}>
+        {#if (closeButton)}
+            <form method="dialog">
+                <Button class="absolute right-1 top-1 [&>svg]:opacity-45 [&>svg]:hover:opacity-90" icon variant="ghost"
+                        size="md">
+                    <IconX/>
+                </Button>
+            </form>
+        {/if}
+
+        {#if header}
+            <header class={headerStyle()}>
+                {@render header?.()}
+            </header>
+        {/if}
+
+        <main class={body()}>
+            {@render children?.()}
+        </main>
+        {#if footer}
+            <footer class={footerStyle()}>
+                {@render footer?.()}
+            </footer>
+        {/if}
+    </div>
+</dialog>
+
+
+<style>
+    .dialog-box {
+        max-height: min(calc(100svh - 3rem), 50rem);
+        overflow-y: auto;
+        overscroll-behavior: contain;
+        display: grid;
+        grid-template-rows: auto 1fr auto;
+        position: relative;
+        background-color: hsl(var(--tw---token-color-neutral-token-1));
+    }
+
+    dialog, dialog:modal {
+        max-width: calc(100vw - 1rem);
+        max-height: 100svh;
+    }
+
+    dialog {
+        --transition-duration: 0.2s;
+
+        transform: translateY(0px);
+
+        &, &::backdrop {
+            transition: display var(--transition-duration) allow-discrete, overlay var(--transition-duration) allow-discrete, opacity var(--transition-duration), transform var(--transition-duration) allow-discrete;
+            opacity: 0;
+
+        }
+
+        &[open] {
+            opacity: 1;
+            &::backdrop {
+                opacity: 1;
+            }
+        }
+
+        &:not([open]) {
+            opacity: 0;
+            transform: translateY(60px) scale(0.9); /* Reset to initial closed position */
+
+            &::backdrop {
+                opacity: 0; /* Fade-out backdrop */
+            }
+        }
+
+        @starting-style {
+            &[open] {
+                transform: translateY(-60px) scale(0.9);
+
+            }
+
+            &[open],
+            &[open]::backdrop {
+                opacity: 0;
+            }
+        }
+    }
+
+
+    dialog::backdrop {
+        background-color: hsl(var(--tw---token-color-neutral-token-13) / 0.2);
+        --tw-backdrop-blur: blur(0.2rem);
+        -webkit-backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+        backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
+}
+
+</style>

package/dist/components/dialog/Dialog.svelte.d.ts

@@ -0,0 +1,10 @@
+import { type DialogProps } from "./Dialog";
+declare const Dialog: import("svelte").Component<DialogProps & {
+    id?: string;
+    open?: boolean;
+    closeOnClickOutside?: boolean;
+    closeButton?: boolean;
+    header?: any;
+    footer?: any;
+}, {}, "open">;
+export default Dialog;

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

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

package/dist/components/dialog/index.js

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

package/dist/components/header/Header.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 HeaderVariants = VariantProps<typeof styles>;
+export interface HeaderProps extends HeaderVariants {
+    children: any;
+    onHamburgerClick?: () => void;
+}
+export {};

package/dist/components/header/Header.js

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

package/dist/components/header/Header.svelte

@@ -0,0 +1,36 @@
+<script lang="ts">
+    import {type HeaderProps} from "./Header";
+    import {BrandLogo} from "../../components/brand-logo";
+    import './header.scss'
+    import {Button} from "../button";
+    import {IconHamburger} from "../icons";
+
+    let {children, onHamburgerClick, ...props}: HeaderProps & {} = $props();
+
+</script>
+
+<!--add component here-->
+<nav id="header-container"
+     class="flex z-40 w-full h-auto items-center justify-center sticky top-0 inset-x-0 backdrop-blur-lg data-[menu-open=true]:backdrop-blur-xl backdrop-saturate-150">
+    <header class="flex flex-wrap h-header-height w-full text-sm">
+        <nav class="w-full mx-auto px-4 pl-1 pr-2 md:pl-4 md:pe-4 flex items-center justify-between">
+            <div class="flex gap-1 items-center">
+                <Button class="md:hidden ring-0 focus:ring-0"
+                        icon
+                        variant="ghost"
+
+                        onclick={onHamburgerClick}>
+                    <IconHamburger/>
+                </Button>
+                <a href="/" class="header-brand-logo">
+                    <BrandLogo class="hidden md:block !h-icon-md"/>
+                    <BrandLogo class="md:hidden" shape="square"/>
+                </a>
+            </div>
+
+            <div class="flex gap-2 sm:gap-4 items-center">
+                {@render children?.()}
+            </div>
+        </nav>
+    </header>
+</nav>

package/dist/components/header/Header.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type HeaderProps } from "./Header";
+import './header.scss';
+declare const Header: import("svelte").Component<HeaderProps, {}, "">;
+export default Header;

package/dist/components/header/header.scss

@@ -0,0 +1,20 @@
+#header-container {
+  container-type: inline-size;
+
+  [data-name="brand-logo"] {
+    @apply h-icon-lg;
+  }
+}
+
+
+@container (min-width: theme(screens.md)) {
+  #header-container {
+    header {
+
+    }
+
+    [data-name="brand-logo"] {
+      @apply h-icon-xl;
+    }
+  }
+}

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

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

package/dist/components/header/index.js

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

package/dist/components/icons/IconBook.svelte

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

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

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

package/dist/components/icons/IconCalculator.svelte

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

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

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

package/dist/components/icons/IconCheck.svelte

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

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

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

package/dist/components/icons/IconHamburger.svelte

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

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

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

package/dist/components/icons/IconLanguage.svelte

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

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

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

package/dist/components/icons/IconMoon.svelte

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

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

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

package/dist/components/icons/IconSun.svelte

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

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

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

package/dist/components/icons/IconTransform.svelte

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

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

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

package/dist/components/icons/IconX.svelte

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

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

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

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

@@ -0,0 +1,43 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    style: {
+        filled: string;
+        default: string;
+    };
+}, undefined, "stroke-icon", import("tailwind-variants/dist/config").TVConfig<{
+    style: {
+        filled: string;
+        default: string;
+    };
+}, {
+    style: {
+        filled: string;
+        default: string;
+    };
+}>, {
+    style: {
+        filled: string;
+        default: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    style: {
+        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>>;
+type IconsVariants = VariantProps<typeof styles>;
+export interface IconsProps extends IconsVariants {
+    children?: any;
+    class?: string;
+}
+export {};

package/dist/components/icons/Icons.js

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

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

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

package/dist/components/icons/index.js

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

package/dist/components/input/Input.svelte

@@ -0,0 +1,14 @@
+<script lang="ts">
+    import {type InputProps, styles} from "./input";
+
+    // 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}
+        bind:value
+/>

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

@@ -0,0 +1,23 @@
+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>;
+export default Input;

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

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

package/dist/components/input/index.js

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

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

@@ -0,0 +1,49 @@
+import { type VariantProps } from "tailwind-variants";
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "border rounded focus:outline-none focus:ring-2 transition-shadow", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, undefined, "border rounded focus:outline-none focus:ring-2 transition-shadow", import("tailwind-variants/dist/config").TVConfig<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}, {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+}>, unknown, unknown, undefined>>;
+type InputVariants = VariantProps<typeof styles>;
+export interface InputProps extends InputVariants {
+    children: any;
+}
+export {};

package/dist/components/input/input.js

@@ -0,0 +1,14 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: 'border rounded focus:outline-none focus:ring-2 transition-shadow', // Base styles
+    variants: {
+        size: {
+            sm: 'px-2 py-1 text-sm', // Small size styles
+            md: 'px-3 py-2 text-base', // Medium size styles
+            lg: 'px-4 py-3 text-lg', // Large size styles
+        },
+    },
+    defaultVariants: {
+        size: 'md',
+    },
+});

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

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

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