tera-system-ui 0.1.64 → 0.1.67

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

@@ -1,131 +1,53 @@
-import { type VariantProps } from "tailwind-variants";
+/**
+ * @component Dialog - Modal dialog with header/footer snippet slots, size variants, and focus management.
+ * Built on BitsUI Dialog primitive.
+ */
 import type { Snippet } from "svelte";
-import type { HTMLDialogAttributes } from "svelte/elements";
-export declare const styles: import("tailwind-variants").TVReturnType<{
-    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;
-        };
-    };
-}, {
-    base: string;
-    dialog: string;
-    dialogContainer: string;
-    header: string;
-    body: string;
-    footer: string;
-}, undefined, {
-    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;
-        };
-    };
-}, {
-    base: string;
-    dialog: string;
-    dialogContainer: string;
-    header: string;
-    body: string;
-    footer: string;
-}, import("tailwind-variants").TVReturnType<{
-    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;
-        };
-    };
-}, {
-    base: string;
-    dialog: string;
-    dialogContainer: string;
-    header: string;
-    body: string;
-    footer: string;
-}, undefined, unknown, unknown, undefined>>;
-type DialogVariants = VariantProps<typeof styles>;
-type DialogPropsCommon = {
+export type DialogProps = {
+    children?: Snippet;
+    /** Snippet rendered in the dialog header area. */
+    header?: Snippet;
+    /** Snippet rendered in the dialog footer area. */
+    footer?: Snippet;
+    /** Whether the dialog is open. Bindable. */
+    open?: boolean;
+    /** Additional CSS classes for the dialog content panel. */
     class?: string;
-    id?: string;
+    /** Controls the maximum width of the dialog panel. */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'full' | 'auto';
+    /** Vertical alignment of the dialog on screen. */
+    position?: 'top' | 'center';
+    /** Set to 'none' to remove internal padding. */
+    padding?: 'none' | undefined;
+    /** Whether clicking the backdrop closes the dialog. */
     closeOnClickOutside?: boolean;
+    /** Whether to render a close (×) button in the header. */
     closeButton?: boolean;
-    position?: 'top' | 'center';
+    /**
+     * When true the dialog DOM is kept alive after close — children preserve
+     * internal state between open/close cycles.
+     */
+    staticRender?: boolean;
+    /** Prevent the page from scrolling while the dialog is open. */
+    preventScroll?: boolean;
+    /** Called after the open or close animation has fully completed.
+     * Note: This callback only fires when the internal component mutates the open state, not when the state is changed by outside)
+     */
+    onOpenChangeComplete?: (open: boolean) => void;
+    /** Element to return focus to when the dialog closes. */
+    triggerRef?: HTMLElement | null;
+    /** Focus triggerRef after close (default true when triggerRef is provided). */
     focusTriggerAfterClose?: boolean;
-    padding?: 'none' | undefined;
+    /** Additional classes applied to the outer container div. */
     containerClass?: string;
+    /** Additional classes applied to the header region. */
     headerClass?: string;
+    /** Additional classes applied to the body/content region. */
     bodyClass?: string;
+    /** Additional classes applied to the footer region. */
     footerClass?: string;
+    /** Bindable reference to the dialog content element. */
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
 };
-export type DialogProps = Omit<HTMLDialogAttributes, 'open'> & DialogVariants & DialogPropsCommon & {
-    children?: Snippet;
-    header?: Snippet;
-    footer?: Snippet;
-    open?: boolean;
-    staticRender?: boolean;
-    triggerRef?: HTMLElement | null;
-    ref?: HTMLDialogElement | null;
-};
-export type DialogPropsAstro = DialogVariants & DialogPropsCommon & {};
-export {};
+export type DialogPropsAstro = Omit<DialogProps, 'children' | 'open' | 'ref'>;

package/dist/components/dialog/Dialog.js

@@ -1,39 +1 @@
-import { tv } from "tailwind-variants";
-export const styles = tv({
-    slots: {
-        base: '',
-        dialog: 'bg-transparent text-inherit',
-        dialogContainer: 'py-4 rounded-container',
-        header: 'font-bold px-4 mb-2',
-        body: 'px-4',
-        footer: 'mt-3 px-4 flex items-center justify-end gap-2.5'
-    },
-    variants: {
-        size: {
-            xs: {
-                dialog: ''
-            },
-            sm: {
-                dialog: ''
-            },
-            md: {
-                dialog: ''
-            },
-            lg: {
-                dialog: ''
-            },
-            full: {
-                dialog: ''
-            },
-            auto: {
-                dialog: ''
-            }
-        },
-        padding: {
-            none: {
-                dialogContainer: 'py-0',
-                body: 'px-0',
-            }
-        }
-    }
-});
+export {};

package/dist/components/dialog/Dialog.svelte

@@ -1,113 +1,103 @@
-<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}
+<script lang="ts">import { Dialog as DialogPrimitive } from 'bits-ui';
+import IconX from '../icons/IconX.svelte';
+import { cn } from '../../utils/index.js';
+let { children, open = $bindable(false), ref = $bindable(null), closeOnClickOutside = true, closeButton = true, size = 'sm', header, footer, class: className, position = 'center', padding, staticRender = false, preventScroll, onOpenChangeComplete, triggerRef, focusTriggerAfterClose = true, containerClass, headerClass, bodyClass, footerClass, ...props } = $props();
+const sizeClass = {
+    xs: 'max-w-[24rem]',
+    sm: 'max-w-[30rem]',
+    md: 'max-w-[40rem]',
+    lg: 'max-w-[50rem]',
+    full: 'max-w-full w-screen rounded-none',
+    auto: 'w-fit',
+};
+const isFull = $derived(size === 'full');
+const paddingClass = $derived(padding === 'none'
+    ? { container: 'py-0', body: 'px-0' }
+    : { container: 'py-4', body: 'px-4' });
+function handleCloseAutoFocus(e) {
+    if (triggerRef && focusTriggerAfterClose) {
+        e.preventDefault();
+        triggerRef.focus();
+    }
+}
+</script>
+
+<DialogPrimitive.Root bind:open onOpenChangeComplete={onOpenChangeComplete}>
+    <DialogPrimitive.Portal>
+        <!-- Backdrop -->
+        <DialogPrimitive.Overlay
+            class="fixed inset-0 z-50 bg-overlay backdrop-blur-[4px]
+                animate-in fade-in duration-200
+                data-[state=closed]:animate-out data-[state=closed]:fade-out
+                data-[state=closed]:hidden"
+        />
+
+        <!--
+            We use the `child` snippet (bits-ui "asChild" pattern) so that bits-ui gates its
+            internal <ScrollLock> on `open.current`. Without this, the `children` branch renders
+            <ScrollLock> unconditionally — with forceMount the lock never releases, leaving
+            `document.body { pointer-events:none; overflow:hidden }` active even when closed.
+        -->
+        <DialogPrimitive.Content
+            bind:ref
+            forceMount={staticRender || undefined}
+            interactOutsideBehavior={closeOnClickOutside ? 'close' : 'ignore'}
+            preventScroll={preventScroll}
+            onCloseAutoFocus={handleCloseAutoFocus}
+            {...props}
+        >
+            {#snippet child({ props: contentProps })}
+                <div
+                    {...contentProps}
+                    inert={staticRender && !open ? true : undefined}
+                    class={cn(
+                        contentProps.class,
+                        'fixed z-50 w-full bg-surface shadow-lg border-border-default',
+                        'flex flex-col overflow-hidden',
+                        isFull
+                            ? 'inset-0 h-screen border-0'
+                            : [
+                                'rounded-container',
+                                'max-h-[min(calc(100svh-2rem),55rem)]',
+                                position === 'top'
+                                    ? 'top-4 left-1/2 -translate-x-1/2'
+                                    : 'top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2',
+                            ].join(' '),
+                        sizeClass[size ?? 'sm'],
+                        'animate-in fade-in zoom-in-95 duration-[250ms] ease-spring',
+                        'data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95 data-[state=closed]:duration-200',
+                        staticRender && 'data-[state=closed]:hidden',
+                        className
+                    )}
+                >
+                    {#if closeButton}
+                        <DialogPrimitive.Close
+                            class="absolute right-2 top-2 z-10 size-8 flex items-center justify-center rounded hover:bg-surface-hover text-text-tertiary hover:text-text-primary transition-colors"
+                            aria-label="Close"
+                        >
+                            <IconX class="size-4"/>
+                        </DialogPrimitive.Close>
+                    {/if}
+
+                    <div class={cn(paddingClass.container, 'grid grid-rows-[auto_1fr_auto] h-full overflow-hidden', containerClass)}>
+                        {#if header}
+                            <header class={cn('font-bold px-4 mb-2', headerClass)}>
+                                {@render header()}
+                            </header>
+                        {/if}
+
+                        <main class={cn('overflow-auto', paddingClass.body, bodyClass)}>
+                            {@render children?.()}
+                        </main>
+
+                        {#if footer}
+                            <footer class={cn('mt-3 px-4 flex items-center justify-end gap-2.5', footerClass)}>
+                                {@render footer()}
+                            </footer>
+                        {/if}
+                    </div>
+                </div>
+            {/snippet}
+        </DialogPrimitive.Content>
+    </DialogPrimitive.Portal>
+</DialogPrimitive.Root>

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

@@ -1,5 +1,4 @@
-import { type DialogProps } from "./Dialog";
-import './dialog.scss';
+import type { DialogProps } from './Dialog.js';
 declare const Dialog: import("svelte").Component<DialogProps, {}, "ref" | "open">;
 type Dialog = ReturnType<typeof Dialog>;
 export default Dialog;

package/dist/components/dialog/dialog.scss

@@ -8,7 +8,8 @@
     display: grid;
     grid-template-rows: auto 1fr auto;
     width: 100%;
-    background: var(--color-neutral-token-1);
+    background: var(--color-surface);
+    border-radius: var(--border-radius-container);
     position: relative;
     top: 0;
     left: 0;
@@ -62,10 +63,12 @@ dialog[open] {
 }
 
 dialog {
-    --transition-duration: 0.2s;
+    --transition-duration: 0.25s;
+    --transition-easing: var(--ease-spring);
     transform: translateY(0px);
     margin: auto;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    box-shadow: var(--shadow-lg);
+    border-radius: var(--border-radius-container);
 
     &[data-position="top"] {
         position: fixed;
@@ -76,11 +79,11 @@ dialog {
     }
 
     &, &::backdrop {
-        transition: opacity var(--transition-duration) ease-out,
-        transform var(--transition-duration) ease-out,
+        transition: opacity var(--transition-duration) var(--transition-easing),
+        transform var(--transition-duration) var(--transition-easing),
         display var(--transition-duration) allow-discrete,
         overlay var(--transition-duration) allow-discrete,
-        box-shadow var(--transition-duration) ease-out;
+        box-shadow var(--transition-duration) var(--transition-easing);
 
         opacity: 0;
 
@@ -91,58 +94,52 @@ dialog {
 
 
     &[open] {
-        animation: slide-in var(--transition-duration) ease-out;
+        animation: dialog-enter var(--transition-duration) var(--transition-easing);
         opacity: 1;
-        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.12); /* Ant Design-inspired shadow */
+        box-shadow: var(--shadow-lg);
         &::backdrop {
             opacity: 1;
         }
 
         &[data-position="top"] {
-            animation: slide-in-top var(--transition-duration) ease-out;
+            animation: slide-in-top var(--transition-duration) var(--transition-easing);
         }
     }
 
     &:not([open]) {
-        animation: slide-out var(--transition-duration) ease-out;
+        animation: dialog-exit var(--transition-duration) var(--ease-ui);
         opacity: 0;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Subtle shadow for hidden state */
+        box-shadow: var(--shadow-sm);
         &::backdrop {
             opacity: 0;
         }
 
         &[data-position="top"] {
-            animation: slide-out-top var(--transition-duration) ease-out;
+            animation: slide-out-top var(--transition-duration) var(--ease-ui);
         }
     }
 
 }
 
-@keyframes slide-in {
+@keyframes dialog-enter {
     from {
-        transform: translateY(-40px);
+        transform: scale(0.95);
         opacity: 0;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-
     }
     to {
-        transform: translateY(0);
+        transform: scale(1);
         opacity: 1;
-        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.12);
-
     }
 }
 
-@keyframes slide-out {
+@keyframes dialog-exit {
     from {
-        transform: translateY(0);
+        transform: scale(1);
         opacity: 1;
-        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.12);
     }
     to {
-        transform: translateY(-40px);
+        transform: scale(0.95);
         opacity: 0;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
     }
 }
 

package/dist/components/drawer/Drawer.svelte

@@ -0,0 +1,63 @@
+<script lang="ts">let { open = $bindable(false), side = 'right', size = 'md', closeOnClickOutside = true, header, footer, children, onclose, } = $props();
+const sizeMap = {
+    sm: '320px', md: '480px', lg: '640px', full: '100%',
+};
+const slideFrom = {
+    left: 'translate-x-[-100%]',
+    right: 'translate-x-[100%]',
+    bottom: 'translate-y-[100%]',
+};
+const drawerClass = $derived(side === 'bottom'
+    ? `fixed bottom-0 left-0 right-0 max-h-[85vh] rounded-t-[20px]`
+    : side === 'left'
+        ? `fixed left-0 top-0 bottom-0 w-[${sizeMap[size]}] max-w-full`
+        : `fixed right-0 top-0 bottom-0 w-[${sizeMap[size]}] max-w-full`);
+function close() {
+    open = false;
+    onclose?.();
+}
+export {};
+</script>
+
+{#if open}
+    <!-- Backdrop -->
+    <div
+        role="presentation"
+        class="fixed inset-0 z-40 bg-overlay backdrop-blur-[4px] animate-in fade-in duration-200"
+        onclick={() => closeOnClickOutside && close()}
+        onkeydown={(e) => e.key === 'Escape' && closeOnClickOutside && close()}
+    ></div>
+
+    <!-- Drawer panel -->
+    <div
+        class="{drawerClass} z-50 flex flex-col bg-surface shadow-lg border border-border-default animate-in duration-300 ease-spring {side === 'bottom' ? 'slide-in-from-bottom' : side === 'left' ? 'slide-in-from-left' : 'slide-in-from-right'}"
+        role="dialog"
+        aria-modal="true"
+    >
+        {#if header}
+            <header class="flex items-center justify-between px-5 py-4 border-b border-border-default shrink-0">
+                {@render header()}
+                <button
+                    type="button"
+                    onclick={close}
+                    class="text-text-tertiary hover:text-text-primary transition-colors ml-auto"
+                    aria-label="Close drawer"
+                >
+                    <svg class="size-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                        <path d="M4 4l8 8M12 4l-8 8"/>
+                    </svg>
+                </button>
+            </header>
+        {/if}
+
+        <main class="flex-1 overflow-y-auto p-5">
+            {@render children?.()}
+        </main>
+
+        {#if footer}
+            <footer class="px-5 py-4 border-t border-border-default shrink-0">
+                {@render footer()}
+            </footer>
+        {/if}
+    </div>
+{/if}

package/dist/components/drawer/Drawer.svelte.d.ts

@@ -0,0 +1,16 @@
+import type { Snippet } from 'svelte';
+type DrawerSide = 'left' | 'right' | 'bottom';
+type DrawerSize = 'sm' | 'md' | 'lg' | 'full';
+type $$ComponentProps = {
+    open?: boolean;
+    side?: DrawerSide;
+    size?: DrawerSize;
+    closeOnClickOutside?: boolean;
+    header?: Snippet;
+    footer?: Snippet;
+    children?: Snippet;
+    onclose?: () => void;
+};
+declare const Drawer: import("svelte").Component<$$ComponentProps, {}, "open">;
+type Drawer = ReturnType<typeof Drawer>;
+export default Drawer;

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

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

package/dist/components/drawer/index.js

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