tera-system-ui 0.0.3 → 0.0.6

package/dist/components/command/components/CommandInput.svelte

@@ -38,7 +38,10 @@
 
     function action(node: HTMLInputElement) {
         if (autofocus) {
-            sleep(10).then(() => node.focus());
+            sleep(200).then(() => {
+                node.focus()
+                console.log('CommandInput autofocus')
+            });
         }
     }
 

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

@@ -17,6 +17,12 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             dialog: string;
         };
     };
+    padding: {
+        none: {
+            dialogContainer: string;
+            body: string;
+        };
+    };
 }, {
     base: string;
     dialog: string;
@@ -42,6 +48,12 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             dialog: string;
         };
     };
+    padding: {
+        none: {
+            dialogContainer: string;
+            body: string;
+        };
+    };
 }, {
     size: {
         xs: {
@@ -60,6 +72,12 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             dialog: string;
         };
     };
+    padding: {
+        none: {
+            dialogContainer: string;
+            body: string;
+        };
+    };
 }>, {
     size: {
         xs: {
@@ -78,6 +96,12 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             dialog: string;
         };
     };
+    padding: {
+        none: {
+            dialogContainer: string;
+            body: string;
+        };
+    };
 }, {
     base: string;
     dialog: string;
@@ -103,6 +127,12 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             dialog: string;
         };
     };
+    padding: {
+        none: {
+            dialogContainer: string;
+            body: string;
+        };
+    };
 }, {
     base: string;
     dialog: string;
@@ -128,6 +158,12 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             dialog: string;
         };
     };
+    padding: {
+        none: {
+            dialogContainer: string;
+            body: string;
+        };
+    };
 }, {
     size: {
         xs: {
@@ -146,10 +182,26 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
             dialog: string;
         };
     };
+    padding: {
+        none: {
+            dialogContainer: string;
+            body: string;
+        };
+    };
 }>, unknown, unknown, undefined>>;
 type DialogVariants = VariantProps<typeof styles>;
 export interface DialogProps extends DialogVariants {
     children?: any;
     class?: string;
+    id?: string;
+    open?: boolean;
+    closeOnClickOutside?: boolean;
+    closeButton?: boolean;
+    header?: any;
+    footer?: any;
+    position?: 'top' | 'center';
+    staticRender?: boolean;
+    triggerRef?: HTMLElement;
+    focusTriggerAfterClose?: boolean;
 }
 export {};

package/dist/components/dialog/Dialog.js

@@ -25,6 +25,12 @@ export const styles = tv({
             full: {
                 dialog: 'w-screen !max-w-screen max-h-[100svh] !rounded-none'
             },
+        },
+        padding: {
+            none: {
+                dialogContainer: 'py-0',
+                body: 'px-0',
+            }
         }
     }
 });

package/dist/components/dialog/Dialog.svelte

@@ -3,6 +3,7 @@
     import IconX from "../icons/IconX.svelte";
     import {Button} from "../button";
     import './dialog.scss'
+    import {sleep} from "../../internal/helpers/sleep";
 
     let {
         children, open = $bindable(),
@@ -12,29 +13,42 @@
         header,
         footer,
         class: className,
+        position = 'center',
+        padding,
+        staticRender = false,
+        triggerRef,
+        focusTriggerAfterClose,
         ...props
-    }: DialogProps & {
-        id?: string
-        open?: boolean
-        closeOnClickOutside?: boolean
-        closeButton?: boolean,
-        header?: any,
-        footer?: any,
-    } = $props();
+    }: DialogProps = $props();
 
     let dialog;
 
+    let hasOpened = $state(false);
+
     // Watch for prop changes to open/close the dialog
     $effect(() => {
-        if (open) dialog?.showModal();
-        else dialog?.close();
-    })
+        if (open) {
+            stillAnimating = open
+            dialog?.showModal();
+
+            if (!hasOpened)
+                hasOpened = true
+        } else {
+            dialog?.close()
+            sleep(200).then(() => {
+                stillAnimating = open
+                console.log('stillAnimating', stillAnimating)
+            })
 
+            if (focusTriggerAfterClose && hasOpened && triggerRef) {
+                triggerRef.focus()
+            }
+        }
+    })
 
     // Close dialog on clicking outside (optional)
-    function handleClickOutside(event) {
-        if (closeOnClickOutside && event.target === dialog) {
-            open = false;
+    function handleClickOutside(e) {
+        if (closeOnClickOutside && e.target === dialog) {
             dialog?.close();
         }
     }
@@ -46,43 +60,48 @@
 
     // onmousedown={closeOnClickOutside ? 'event.target==this && this.close()' : ''}
 
-    const {base, dialog: dialogStyle, dialogContainer, header: headerStyle, body, footer: footerStyle} = styles({size})
+    const {base, dialog: dialogStyle, dialogContainer, header: headerStyle, body, footer: footerStyle} = styles({
+        size,
+        padding
+    })
+
+    let stillAnimating = $state()
+
 </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 staticRender || (!staticRender && (open || stillAnimating))}
+    <dialog class={dialogStyle() + ` ${className}`}
+            data-position={position}
+            bind:this={dialog}
+            onclose={handleClose}
+            onmousedown={handleClickOutside}
+    >
+        <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 z-10" icon
+                            variant="ghost"
+                            size="sm">
+                        <IconX/>
+                    </Button>
+                </form>
+            {/if}
 
-        {#if header}
-            <header class={headerStyle()}>
-                {@render header?.()}
-            </header>
-        {/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>
+            <main class={body()}>
+                {@render children?.()}
+            </main>
+            {#if footer}
+                <footer class={footerStyle()}>
+                    {@render footer?.()}
+                </footer>
+            {/if}
+        </div>
+    </dialog>
+{/if}

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

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

package/dist/components/dialog/dialog.scss

@@ -1,10 +1,11 @@
 .dialog-box {
-    max-height: min(calc(100svh - 3rem), 50rem);
+    max-height: min(calc(100svh - 2rem), 50rem);
     overflow-y: auto;
     overscroll-behavior: contain;
     display: grid;
     grid-template-rows: auto 1fr auto;
     @apply bg-neutral-token-1 relative;
+
 }
 
 dialog, dialog:modal {
@@ -13,14 +14,21 @@ dialog, dialog:modal {
 }
 
 dialog {
-    --transition-duration: 0.2s;
+    &[data-position="top"] {
+        position: fixed;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(-1rem);
+        margin: 0;
+    }
 
+
+    --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] {
@@ -31,8 +39,15 @@ dialog {
     }
 
     &:not([open]) {
+        transform: translateX(0) translateY(-40px);
+
+        &[data-position="top"] {
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%) translateY(-40px);
+        }
+
         opacity: 0;
-        transform: translateY(-40px) scale(1); /* Reset to initial closed position */
 
         &::backdrop {
             opacity: 0; /* Fade-out backdrop */
@@ -41,8 +56,13 @@ dialog {
 
     @starting-style {
         &[open] {
-            transform: translateY(-40px) scale(1);
+            transform: translateX(0) translateY(-40px);
 
+            &[data-position="top"] {
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%) translateY(-40px);
+            }
         }
 
         &[open],

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

@@ -81,7 +81,7 @@
     <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">
+<Dialog bind:open={openDialog} class="text-neutral-token-13" size="xs" staticRender>
     {#snippet header()}
         Select language
     {/snippet}

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

@@ -10,5 +10,6 @@ export interface PopoverProps extends PopoverVariants {
     open?: boolean;
     focusTriggerAfterClose?: boolean;
     flip?: boolean;
+    autoTrigger?: boolean;
 }
 export {};

package/dist/components/popover/Popover.svelte

@@ -4,13 +4,18 @@
     import {cn} from "../../utils/utils";
 
     import {clickOutside} from "../../actions/clickOutside"
+    import {onDestroy, onMount} from "svelte";
 
     let {
-        children, triggerRef, class: className, open = $bindable(),
+        children,
+        triggerRef,
+        class: className,
+        open = $bindable(),
         offset: offsetAmount = 3,
         padding: paddingAmount = 12,
         focusTriggerAfterClose = true,
         flip: enableFlip = false,
+        autoTrigger = true,
         ...props
     }: PopoverProps = $props();
 
@@ -71,12 +76,20 @@
         });
     }
 
+    onMount(() => {
+        if (autoTrigger)
+            triggerRef?.addEventListener("click", togglePopover);
+
+    })
+
+    onDestroy(() => {
+        if (autoTrigger)
+            triggerRef?.removeEventListener("click", togglePopover);
+
+    })
 
     $effect(() => {
         let cleanup: any
-        if (triggerRef) {
-            triggerRef.addEventListener("click", togglePopover);
-        }
 
         if (open) {
             hasOpenedYet = true
@@ -91,21 +104,16 @@
         } else {
             cleanup?.()
             if (focusTriggerAfterClose && hasOpenedYet) {
-                setTimeout(() => {
-                    try {
-                        triggerRef.focus()
-                    } catch (e) {
-                        console.warn('Trigger element focus after close Popover error', e)
-                    }
-                }, 100)
+                try {
+                    triggerRef.focus()
+                } catch (e) {
+                    console.warn('Trigger element focus after close Popover error', e)
+                }
             }
         }
 
         return () => {
             cleanup?.()
-            if (triggerRef) {
-                triggerRef.removeEventListener("click", togglePopover);
-            }
         }
     })
 </script>

package/dist/components/popover-responsive/PopoverResponsive.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 PopoverResponsiveVariants = VariantProps<typeof styles>;
+export interface PopoverResponsiveProps extends PopoverResponsiveVariants {
+    children?: any;
+    class?: string;
+}
+export {};

package/dist/components/popover-responsive/PopoverResponsive.js

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

package/dist/components/popover-responsive/PopoverResponsive.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">
+    import {type PopoverResponsiveProps} from "./PopoverResponsive";
+    import {Dialog, Popover} from "../..";
+    import {onMount} from "svelte";
+    import {getScreenWidth, SCREEN_BREAK_POINTS} from "../side-navigation/SideNavigation";
+
+    let {
+        children,
+        triggerRef,
+        class: className,
+        open = $bindable(),
+        offset = 3,
+        popoverPadding = 12,
+        focusTriggerAfterClose = true,
+        flip = false,
+        ...props
+    }: PopoverResponsiveProps & {
+        dialogPadding?: string,
+        popoverPadding?: number,
+        offset?: number,
+        open?: boolean,
+        focusTriggerAfterClose?: boolean,
+        flip?: boolean,
+        triggerRef?: HTMLElement,
+    } = $props();
+
+    let openPopover = $state(false)
+    let openDialog = $state(false)
+
+    $effect(() => {
+        open = openPopover || openDialog
+    })
+
+    $effect(() => {
+        toggleOpen(open)
+    })
+
+    function toggleOpen(open?: boolean) {
+        if (getScreenWidth() >= SCREEN_BREAK_POINTS.sm) {
+            if (open === undefined) {
+                openPopover = !(openDialog || openPopover)
+            } else {
+                openPopover = open
+            }
+            openDialog = false
+        } else {
+            if (open === undefined) {
+                openDialog = !(openDialog || openPopover)
+            } else {
+                openDialog = open
+            }
+            openPopover = false
+        }
+
+        console.log('toggleOpen Responsive Popover', open)
+    }
+
+    onMount(() => {
+        triggerRef?.addEventListener('click', () => {
+            toggleOpen()
+        })
+    })
+</script>
+
+
+<Popover bind:open={openPopover}
+         triggerRef={triggerRef}
+         autoTrigger={false}
+         padding={popoverPadding}
+         focusTriggerAfterClose={focusTriggerAfterClose}
+         offset={offset}
+         flip={flip}
+         class={className}
+         {...props}
+>
+    {@render children?.()}
+</Popover>
+
+<Dialog bind:open={openDialog}
+        position="top"
+        padding="none"
+        class={className}
+        triggerRef={triggerRef}
+        focusTriggerAfterClose={focusTriggerAfterClose}
+>
+    {@render children?.()}
+</Dialog>

package/dist/components/popover-responsive/PopoverResponsive.svelte.d.ts

@@ -0,0 +1,11 @@
+import { type PopoverResponsiveProps } from "./PopoverResponsive";
+declare const PopoverResponsive: import("svelte").Component<PopoverResponsiveProps & {
+    dialogPadding?: string;
+    popoverPadding?: number;
+    offset?: number;
+    open?: boolean;
+    focusTriggerAfterClose?: boolean;
+    flip?: boolean;
+    triggerRef?: HTMLElement;
+}, {}, "open">;
+export default PopoverResponsive;

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

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

package/dist/components/popover-responsive/index.js

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

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

@@ -5,7 +5,7 @@ export interface SideNavigationProps extends SideNavigationVariants {
     children?: any;
     class?: string;
 }
-export declare const BEAK_POINTS: {
+export declare const SCREEN_BREAK_POINTS: {
     sm: number;
     md: number;
     lg: number;
@@ -14,5 +14,6 @@ export declare const BEAK_POINTS: {
 export declare const mainLayout: () => HTMLElement | null;
 export declare const getSideNavState: () => string | undefined;
 export declare const setSideNavState: (state: any) => void;
+export declare function getScreenWidth(): number;
 export declare function toggleSideNavigation(): void;
 export {};

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

@@ -5,7 +5,7 @@ export const styles = tv({
     compoundVariants: [],
     defaultVariants: {},
 });
-export const BEAK_POINTS = {
+export const SCREEN_BREAK_POINTS = {
     sm: 640,
     md: 768,
     lg: 1024,
@@ -23,17 +23,20 @@ export const setSideNavState = (state) => {
         mainLayout()?.removeAttribute('data-side-nav-state');
     }
 };
+export function getScreenWidth() {
+    return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+}
 export function toggleSideNavigation() {
-    let screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
+    let screenWidth = getScreenWidth();
     let currentSideNavState = getSideNavState();
     let state;
-    if (screenWidth < BEAK_POINTS.md) {
+    if (screenWidth < SCREEN_BREAK_POINTS.md) {
         state = currentSideNavState == undefined ? "expand" : undefined;
     }
-    else if (screenWidth >= BEAK_POINTS.md && screenWidth < BEAK_POINTS.xl) {
+    else if (screenWidth >= SCREEN_BREAK_POINTS.md && screenWidth < SCREEN_BREAK_POINTS.xl) {
         state = currentSideNavState == undefined ? "expand" : undefined;
     }
-    else if (screenWidth >= BEAK_POINTS.xl) {
+    else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
         state = currentSideNavState == undefined ? "compact" : undefined;
     }
     setSideNavState(state);

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import {
-        BEAK_POINTS,
+        SCREEN_BREAK_POINTS,
         mainLayout,
         setSideNavState,
         type SideNavigationProps,
@@ -25,11 +25,11 @@
 
     function handleClickOutside() {
         let screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
-        if (screenWidth < BEAK_POINTS.md) {
+        if (screenWidth < SCREEN_BREAK_POINTS.md) {
             setSideNavState(undefined)
-        } else if (screenWidth >= BEAK_POINTS.md && screenWidth < BEAK_POINTS.xl) {
+        } else if (screenWidth >= SCREEN_BREAK_POINTS.md && screenWidth < SCREEN_BREAK_POINTS.xl) {
             setSideNavState(undefined)
-        } else if (screenWidth >= BEAK_POINTS.xl) {
+        } else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
 
         }
     }
@@ -99,7 +99,7 @@
         {#each NAV_ITEM as item}
             <SideNavItem href={item.href} class={isSelected(item.href) ? 'selected' : ''}>
                 {#snippet icon()}
-                    <svelte:component this={item.icon}/>
+                    <item.icon/>
                 {/snippet}
                 {item.title}
             </SideNavItem>

package/dist/index.d.ts

@@ -9,5 +9,6 @@ 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 { PopoverResponsive } from './components/popover-responsive';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
 export { TeraUiContext } from './components/tera-ui-context';

package/dist/index.js

@@ -9,5 +9,6 @@ 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 { PopoverResponsive } from './components/popover-responsive';
 export { SideNavigation, SideNavigationLayout, toggleSideNavigation } from './components/side-navigation';
 export { TeraUiContext } from './components/tera-ui-context';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "tera-system-ui",
-  "version": "0.0.3",
+  "version": "0.0.6",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -88,6 +88,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.6.12",
-    "@inlang/paraglide-sveltekit": "0.11.5"
+    "@inlang/paraglide-sveltekit": "0.11.5",
+    "@tabler/icons-svelte": "^3.21.0"
   }
 }