tera-system-ui 0.0.20 → 0.0.22

package/dist/components/dialog/Dialog.astro

@@ -1,63 +1,63 @@
----
-import {type DialogPropsAstro, styles} from "./Dialog";
-import IconX from "../icons/IconX.svelte";
-import {Button} from "../button";
-import './dialog.scss'
-
-const {
-    closeOnClickOutside = true,
-    closeButton = true,
-    size = 'sm',
-    class: className,
-    position = 'center',
-    padding,
-    focusTriggerAfterClose,
-    ...props
-}: DialogPropsAstro = Astro.props
-
-const {base, dialog: dialogStyle, dialogContainer, header: headerStyle, body, footer: footerStyle} = styles({
-    size,
-    padding
-})
-
-const hasHeaderSlot = !!Astro.slots["header"];
-const hasFooterSlot = !!Astro.slots["footer"];
----
-
-<dialog class={dialogStyle() + ` ${className}`}
-        data-position={position}
-        onmousedown={closeOnClickOutside ? 'event.target==this && this.close()' : ''}
-        size={size}
-        {...props}
->
-    <button class=""></button>
-
-    {closeButton &&
-            <form method="dialog">
-                <Button class="absolute right-1 top-1 [&>svg]:opacity-45 [&>svg]:hover:opacity-90 z-10"
-                        icon={true}
-                        client:idle
-                        variant="ghost"
-                        size="sm">
-                    <IconX/>
-                </Button>
-            </form>
-    }
-
-    <div class={"dialog-box " + dialogContainer()}>
-        {hasHeaderSlot &&
-                <header class={headerStyle()}>
-                    <slot name="header"/>
-                </header>
-        }
-
-        <main class={body()}>
-            <slot/>
-        </main>
-        {hasFooterSlot &&
-                <footer class={footerStyle()}>
-                    <slot name="footer"/>
-                </footer>
-        }
-    </div>
-</dialog>
+---
+import {type DialogPropsAstro, styles} from "./Dialog";
+import IconX from "../icons/IconX.svelte";
+import {Button} from "../button";
+import './dialog.scss'
+
+const {
+    closeOnClickOutside = true,
+    closeButton = true,
+    size = 'sm',
+    class: className,
+    position = 'center',
+    padding,
+    focusTriggerAfterClose,
+    ...props
+}: DialogPropsAstro = Astro.props
+
+const {base, dialog: dialogStyle, dialogContainer, header: headerStyle, body, footer: footerStyle} = styles({
+    size,
+    padding
+})
+
+const hasHeaderSlot = !!Astro.slots["header"];
+const hasFooterSlot = !!Astro.slots["footer"];
+---
+
+<dialog class={dialogStyle() + ` ${className}`}
+        data-position={position}
+        onmousedown={closeOnClickOutside ? 'event.target==this && this.close()' : ''}
+        size={size}
+        {...props}
+>
+    <button class=""></button>
+
+    {closeButton &&
+            <form method="dialog">
+                <Button class="absolute right-1 top-1 [&>svg]:opacity-45 [&>svg]:hover:opacity-90 z-10"
+                        icon={true}
+                        client:idle
+                        variant="ghost"
+                        size="sm">
+                    <IconX/>
+                </Button>
+            </form>
+    }
+
+    <div class={"dialog-box " + dialogContainer()}>
+        {hasHeaderSlot &&
+                <header class={headerStyle()}>
+                    <slot name="header"/>
+                </header>
+        }
+
+        <main class={body()}>
+            <slot/>
+        </main>
+        {hasFooterSlot &&
+                <footer class={footerStyle()}>
+                    <slot name="footer"/>
+                </footer>
+        }
+    </div>
+</dialog>

package/dist/components/dialog/Dialog.svelte

@@ -1,110 +1,110 @@
-<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";
-
-    let {
-        children, open = $bindable(),
-        closeOnClickOutside = true,
-        closeButton = true,
-        size = 'sm',
-        header,
-        footer,
-        class: className,
-        position = 'center',
-        padding,
-        staticRender = false,
-        triggerRef,
-        focusTriggerAfterClose,
-        ...props
-    }: DialogProps = $props();
-
-    let dialog;
-
-    let hasOpened = $state(false);
-
-    // Watch for prop changes to open/close the dialog
-    $effect(() => {
-        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(e) {
-        if (closeOnClickOutside && e.target === dialog) {
-            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,
-        padding
-    })
-
-    let stillAnimating = $state()
-
-</script>
-
-{#if staticRender || (!staticRender && (open || stillAnimating))}
-    <dialog class={dialogStyle() + ` ${className}`}
-            data-position={position}
-            bind:this={dialog}
-            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="sm">
-                    <IconX/>
-                </Button>
-            </form>
-        {/if}
-
-        <div class={"dialog-box " + dialogContainer()}>
-            {#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>
+<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";
+
+    let {
+        children, open = $bindable(),
+        closeOnClickOutside = true,
+        closeButton = true,
+        size = 'sm',
+        header,
+        footer,
+        class: className,
+        position = 'center',
+        padding,
+        staticRender = false,
+        triggerRef,
+        focusTriggerAfterClose,
+        ...props
+    }: DialogProps = $props();
+
+    let dialog;
+
+    let hasOpened = $state(false);
+
+    // Watch for prop changes to open/close the dialog
+    $effect(() => {
+        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(e) {
+        if (closeOnClickOutside && e.target === dialog) {
+            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,
+        padding
+    })
+
+    let stillAnimating = $state()
+
+</script>
+
+{#if staticRender || (!staticRender && (open || stillAnimating))}
+    <dialog class={dialogStyle() + ` ${className}`}
+            data-position={position}
+            bind:this={dialog}
+            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="sm">
+                    <IconX/>
+                </Button>
+            </form>
+        {/if}
+
+        <div class={"dialog-box " + dialogContainer()}>
+            {#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>
 {/if}

package/dist/components/dialog/dialog.scss

@@ -1,116 +1,116 @@
-.dialog-box {
-    max-height: min(calc(100svh - 1rem), 55rem);
-    overflow-y: auto;
-    overscroll-behavior: contain;
-    display: grid;
-    grid-template-rows: auto 1fr auto;
-    width: 100%;
-    @apply bg-neutral-token-1 relative top-0 left-0 bottom-0;
-
-    main {
-        overflow: auto;
-    }
-}
-
-dialog, dialog:modal {
-    max-height: 100svh;
-    width: 100%;
-    height: fit-content;
-}
-
-dialog {
-    &[size="xs"] {
-        width: 24rem;
-        max-width: min(calc(100vw - 1rem), 24rem);
-    }
-    &[size="sm"] {
-        width: 30rem;
-        max-width: min(calc(100vw - 1rem), 30rem);
-    }
-
-    &[size="md"] {
-        width: 40rem;
-        max-width: min(calc(100vw - 1rem), 40rem);
-    }
-
-    &[size="lg"] {
-        width: 50rem;
-        max-width: min(calc(100vw - 1rem), 50rem);
-    }
-
-    &[size="full"] {
-        width: 100vw;
-        max-width: 100vw;
-        @apply rounded-none;
-    }
-
-}
-
-dialog[open] {
-    //@apply grid place-content-center grid-cols-1;
-    @apply inline-flex;
-}
-
-dialog {
-    &[data-position="top"] {
-        position: fixed;
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%) translateY(0.5rem);
-        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] {
-        opacity: 1;
-        &::backdrop {
-            opacity: 1;
-        }
-    }
-
-    &:not([open]) {
-        transform: translateX(0) translateY(-40px);
-
-        &[data-position="top"] {
-            top: 0;
-            left: 50%;
-            transform: translateX(-50%) translateY(-40px);
-        }
-
-        opacity: 0;
-
-        &::backdrop {
-            opacity: 0; /* Fade-out backdrop */
-        }
-    }
-
-    @starting-style {
-        &[open] {
-            transform: translateX(0) translateY(-40px);
-
-            &[data-position="top"] {
-                top: 0;
-                left: 50%;
-                transform: translateX(-50%) translateY(-40px);
-            }
-        }
-
-        &[open],
-        &[open]::backdrop {
-            opacity: 0;
-        }
-    }
-}
-
-
-dialog::backdrop {
-    @apply backdrop-blur-[0.2rem] bg-neutral-token-13/20;
+.dialog-box {
+    max-height: min(calc(100svh - 1rem), 55rem);
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    width: 100%;
+    @apply bg-neutral-token-1 relative top-0 left-0 bottom-0;
+
+    main {
+        overflow: auto;
+    }
+}
+
+dialog, dialog:modal {
+    max-height: 100svh;
+    width: 100%;
+    height: fit-content;
+}
+
+dialog {
+    &[size="xs"] {
+        width: 24rem;
+        max-width: min(calc(100vw - 1rem), 24rem);
+    }
+    &[size="sm"] {
+        width: 30rem;
+        max-width: min(calc(100vw - 1rem), 30rem);
+    }
+
+    &[size="md"] {
+        width: 40rem;
+        max-width: min(calc(100vw - 1rem), 40rem);
+    }
+
+    &[size="lg"] {
+        width: 50rem;
+        max-width: min(calc(100vw - 1rem), 50rem);
+    }
+
+    &[size="full"] {
+        width: 100vw;
+        max-width: 100vw;
+        @apply rounded-none;
+    }
+
+}
+
+dialog[open] {
+    //@apply grid place-content-center grid-cols-1;
+    @apply inline-flex;
+}
+
+dialog {
+    &[data-position="top"] {
+        position: fixed;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(0.5rem);
+        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] {
+        opacity: 1;
+        &::backdrop {
+            opacity: 1;
+        }
+    }
+
+    &:not([open]) {
+        transform: translateX(0) translateY(-40px);
+
+        &[data-position="top"] {
+            top: 0;
+            left: 50%;
+            transform: translateX(-50%) translateY(-40px);
+        }
+
+        opacity: 0;
+
+        &::backdrop {
+            opacity: 0; /* Fade-out backdrop */
+        }
+    }
+
+    @starting-style {
+        &[open] {
+            transform: translateX(0) translateY(-40px);
+
+            &[data-position="top"] {
+                top: 0;
+                left: 50%;
+                transform: translateX(-50%) translateY(-40px);
+            }
+        }
+
+        &[open],
+        &[open]::backdrop {
+            opacity: 0;
+        }
+    }
+}
+
+
+dialog::backdrop {
+    @apply backdrop-blur-[0.2rem] bg-neutral-token-13/20;
 }

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -0,0 +1,22 @@
+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 DropdownMenuVariants = VariantProps<typeof styles>;
+export interface DropdownMenuProps extends DropdownMenuVariants {
+    children?: any;
+    class?: string;
+    triggerRef: any;
+    open?: boolean;
+}
+export type DropdownMenuContext = {
+    setOpen: (open: boolean) => void;
+    getOpen: () => boolean;
+};
+export declare function getCtx(): DropdownMenuContext;
+export declare function setCtx(context: DropdownMenuContext): void;
+export type DropdownMenuItemProps = {
+    children?: any;
+    class?: string;
+    onclick?: (e: any) => void;
+    href?: string;
+};
+export {};

package/dist/components/dropdown-menu/DropdownMenu.js

@@ -0,0 +1,15 @@
+import { tv } from "tailwind-variants";
+import { getContext, setContext } from "svelte";
+export const styles = tv({
+    base: '',
+    variants: {},
+    compoundVariants: [],
+    defaultVariants: {},
+});
+const CONTEXT_NAME = 'DropdownMenu';
+export function getCtx() {
+    return getContext(CONTEXT_NAME);
+}
+export function setCtx(context) {
+    setContext(CONTEXT_NAME, context);
+}

package/dist/components/dropdown-menu/components/DropdownMenu.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+    import {type DropdownMenuProps, setCtx} from "../DropdownMenu";
+    import {Popover} from "../../popover";
+
+    let {
+        children,
+        open = $bindable(),
+        triggerRef,
+
+        ...props
+    }: DropdownMenuProps = $props();
+
+    function setOpen(o: boolean) {
+        open = o;
+    }
+
+    setCtx({
+        setOpen,
+        getOpen: () => !!open
+    })
+
+</script>
+
+<Popover
+        triggerRef={triggerRef}
+        offset={4}
+        bind:open
+        class=""
+        flip="true"
+        role="menu"
+        {...props}
+>
+    {@render children?.()}
+</Popover>

package/dist/components/dropdown-menu/components/DropdownMenu.svelte.d.ts

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

package/dist/components/dropdown-menu/components/DropdownMenuGroup.svelte

@@ -0,0 +1,12 @@
+<script lang="ts">
+    import {cn} from "../../../utils/utils";
+
+    let {children, class: className, ...props} = $props()
+</script>
+
+<div class={cn('p-1', className)}
+     data-dropdown-menu-group
+     role="group"
+     {...props}>
+    {@render children?.()}
+</div>

package/dist/components/dropdown-menu/components/DropdownMenuGroup.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const DropdownMenuGroup: import("svelte").Component<{
+    children: unknown;
+    class: unknown;
+} & Record<string, unknown>, {}, "">;
+export default DropdownMenuGroup;