tera-system-ui 0.1.20 → 0.1.30

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

@@ -33,61 +33,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     header: string;
     body: string;
     footer: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    size: {
-        xs: {
-            dialog: string;
-        };
-        sm: {
-            dialog: string;
-        };
-        md: {
-            dialog: string;
-        };
-        lg: {
-            dialog: string;
-        };
-        full: {
-            dialog: string;
-        };
-        auto: {
-            dialog: string;
-        };
-    };
-    padding: {
-        none: {
-            dialogContainer: string;
-            body: string;
-        };
-    };
-}, {
-    size: {
-        xs: {
-            dialog: string;
-        };
-        sm: {
-            dialog: string;
-        };
-        md: {
-            dialog: string;
-        };
-        lg: {
-            dialog: string;
-        };
-        full: {
-            dialog: string;
-        };
-        auto: {
-            dialog: string;
-        };
-    };
-    padding: {
-        none: {
-            dialogContainer: string;
-            body: string;
-        };
-    };
-}>, {
+}, undefined, {
     size: {
         xs: {
             dialog: string;
@@ -155,61 +101,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     header: string;
     body: string;
     footer: string;
-}, undefined, import("tailwind-variants/dist/config").TVConfig<{
-    size: {
-        xs: {
-            dialog: string;
-        };
-        sm: {
-            dialog: string;
-        };
-        md: {
-            dialog: string;
-        };
-        lg: {
-            dialog: string;
-        };
-        full: {
-            dialog: string;
-        };
-        auto: {
-            dialog: string;
-        };
-    };
-    padding: {
-        none: {
-            dialogContainer: string;
-            body: string;
-        };
-    };
-}, {
-    size: {
-        xs: {
-            dialog: string;
-        };
-        sm: {
-            dialog: string;
-        };
-        md: {
-            dialog: string;
-        };
-        lg: {
-            dialog: string;
-        };
-        full: {
-            dialog: string;
-        };
-        auto: {
-            dialog: string;
-        };
-    };
-    padding: {
-        none: {
-            dialogContainer: string;
-            body: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
+}, undefined, unknown, unknown, undefined>>;
 type DialogVariants = VariantProps<typeof styles>;
 type DialogPropsCommon = {
     class?: string;

package/dist/components/dialog/Dialog.svelte

@@ -1,113 +1,113 @@
-<script lang="ts">
-    import {type DialogProps, styles} from "./Dialog";
-    import IconX from "../icons/IconX.svelte";
-    import {Button} from "../button";
-    import './dialog.scss'
-    import {sleep} from "../../internal/helpers/sleep";
-    import {cn} from "../../utils";
-
-    let {
-        children, open = $bindable(),
-        ref = $bindable(),
-        closeOnClickOutside = true,
-        closeButton = true,
-        size = 'sm',
-        header,
-        footer,
-        class: className,
-        position = 'center',
-        padding,
-        staticRender = false,
-        triggerRef,
-        focusTriggerAfterClose,
-        containerClass,
-        headerClass,
-        bodyClass,
-        footerClass,
-        ...props
-    }: DialogProps = $props();
-
-    let hasOpened = $state(false);
-
-    // Watch for prop changes to open/close the dialog
-    $effect(() => {
-        if (open) {
-            stillAnimating = open
-            ref?.showModal();
-
-            if (!hasOpened)
-                hasOpened = true
-        } else {
-            ref?.close()
-            sleep(200).then(() => {
-                stillAnimating = open
-            })
-
-            if (focusTriggerAfterClose && hasOpened && triggerRef) {
-                triggerRef.focus()
-            }
-        }
-    })
-
-    // Close dialog on clicking outside (optional)
-    function handleClickOutside(e) {
-        if (closeOnClickOutside && e.target === ref) {
-            ref?.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,
-        padding
-    })
-
-    let stillAnimating = $state()
-
-</script>
-
-{#if staticRender || (!staticRender && (open || stillAnimating))}
-    <dialog class={dialogStyle() + ` ${className}`}
-            data-position={position}
-            bind:this={ref}
-            onclose={handleClose}
-            onmousedown={handleClickOutside}
-            size={size}
-
-            {...props}
-    >
-        <button class=""></button>
-        {#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="md">
-                    <IconX/>
-                </Button>
-            </form>
-        {/if}
-
-        <div class={"dialog-box " + dialogContainer({className: containerClass})}>
-            {#if header}
-                <header class={cn(headerStyle(), headerClass)}>
-                    {@render header?.()}
-                </header>
-            {/if}
-
-            <main class={cn(body(), bodyClass)}>
-                {@render children?.()}
-            </main>
-            {#if footer}
-                <footer class={cn(footerStyle(), footerClass)}>
-                    {@render footer?.()}
-                </footer>
-            {/if}
-        </div>
-    </dialog>
+<script lang="ts">
+    import {type DialogProps, styles} from "./Dialog";
+    import IconX from "../icons/IconX.svelte";
+    import {Button} from "../button";
+    import './dialog.scss'
+    import {sleep} from "../../internal/helpers/sleep";
+    import {cn} from "../../utils";
+
+    let {
+        children, open = $bindable(),
+        ref = $bindable(),
+        closeOnClickOutside = true,
+        closeButton = true,
+        size = 'sm',
+        header,
+        footer,
+        class: className,
+        position = 'center',
+        padding,
+        staticRender = false,
+        triggerRef,
+        focusTriggerAfterClose,
+        containerClass,
+        headerClass,
+        bodyClass,
+        footerClass,
+        ...props
+    }: DialogProps = $props();
+
+    let hasOpened = $state(false);
+
+    // Watch for prop changes to open/close the dialog
+    $effect(() => {
+        if (open) {
+            stillAnimating = open
+            ref?.showModal();
+
+            if (!hasOpened)
+                hasOpened = true
+        } else {
+            ref?.close()
+            sleep(200).then(() => {
+                stillAnimating = open
+            })
+
+            if (focusTriggerAfterClose && hasOpened && triggerRef) {
+                triggerRef.focus()
+            }
+        }
+    })
+
+    // Close dialog on clicking outside (optional)
+    function handleClickOutside(e) {
+        if (closeOnClickOutside && e.target === ref) {
+            ref?.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,
+        padding
+    })
+
+    let stillAnimating = $state()
+
+</script>
+
+{#if staticRender || (!staticRender && (open || stillAnimating))}
+    <dialog class={dialogStyle() + ` ${className}`}
+            data-position={position}
+            bind:this={ref}
+            onclose={handleClose}
+            onmousedown={handleClickOutside}
+            size={size}
+
+            {...props}
+    >
+        <button class=""></button>
+        {#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="md">
+                    <IconX/>
+                </Button>
+            </form>
+        {/if}
+
+        <div class={"dialog-box " + dialogContainer({className: containerClass})}>
+            {#if header}
+                <header class={cn(headerStyle(), headerClass)}>
+                    {@render header?.()}
+                </header>
+            {/if}
+
+            <main class={cn(body(), bodyClass)}>
+                {@render children?.()}
+            </main>
+            {#if footer}
+                <footer class={cn(footerStyle(), footerClass)}>
+                    {@render footer?.()}
+                </footer>
+            {/if}
+        </div>
+    </dialog>
 {/if}