tera-system-ui 0.1.20 → 0.1.30

package/dist/components/dialog/dialog.scss

@@ -1,187 +1,187 @@
-@reference "tailwindcss/theme";
-
-
-.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%;
-    background: var(--color-neutral-token-1);
-    position: 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;
-        border-radius: 0;
-    }
-    &[size="auto"] {
-        width: fit-content;
-        max-width: 100vw;
-    }
-
-}
-
-dialog[open] {
-    display: inline-flex;
-}
-
-dialog {
-    --transition-duration: 0.2s;
-    transform: translateY(0px);
-    margin: auto;
-    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-
-    &[data-position="top"] {
-        position: fixed;
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%) translateY(0.5rem);
-        margin: 0;
-    }
-
-    &, &::backdrop {
-        transition: opacity var(--transition-duration) ease-out,
-        transform var(--transition-duration) ease-out,
-        display var(--transition-duration) allow-discrete,
-        overlay var(--transition-duration) allow-discrete,
-        box-shadow var(--transition-duration) ease-out;
-
-        opacity: 0;
-
-        will-change: transform, opacity, box-shadow;
-        backface-visibility: hidden;
-        -webkit-backface-visibility: hidden;
-    }
-
-
-    &[open] {
-        animation: slide-in var(--transition-duration) ease-out;
-        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 */
-        &::backdrop {
-            opacity: 1;
-        }
-
-        &[data-position="top"] {
-            animation: slide-in-top var(--transition-duration) ease-out;
-        }
-    }
-
-    &:not([open]) {
-        animation: slide-out var(--transition-duration) ease-out;
-        opacity: 0;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Subtle shadow for hidden state */
-        &::backdrop {
-            opacity: 0;
-        }
-
-        &[data-position="top"] {
-            animation: slide-out-top var(--transition-duration) ease-out;
-        }
-    }
-
-}
-
-@keyframes slide-in {
-    from {
-        transform: translateY(-40px);
-        opacity: 0;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-
-    }
-    to {
-        transform: translateY(0);
-        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 {
-    from {
-        transform: translateY(0);
-        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);
-        opacity: 0;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-    }
-}
-
-@keyframes slide-in-top {
-    from {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%) translateY(-40px);
-        opacity: 0;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-    }
-    to {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%) translateY(0.5rem);
-        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-top {
-    from {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%) translateY(0.5rem);
-        opacity: 1;
-        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.12);
-    }
-    to {
-        top: 0;
-        left: 50%;
-        transform: translateX(-50%) translateY(-40px);
-        opacity: 0;
-        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
-    }
-}
-
-dialog::backdrop {
-    backdrop-filter: blur(0.2rem);
-    background: --alpha(var(--color-neutral-token-13) / 20%);
-    transition: opacity var(--transition-duration) ease-out;
+@reference "tailwindcss/theme";
+
+
+.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%;
+    background: var(--color-neutral-token-1);
+    position: 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;
+        border-radius: 0;
+    }
+    &[size="auto"] {
+        width: fit-content;
+        max-width: 100vw;
+    }
+
+}
+
+dialog[open] {
+    display: inline-flex;
+}
+
+dialog {
+    --transition-duration: 0.2s;
+    transform: translateY(0px);
+    margin: auto;
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+
+    &[data-position="top"] {
+        position: fixed;
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(0.5rem);
+        margin: 0;
+    }
+
+    &, &::backdrop {
+        transition: opacity var(--transition-duration) ease-out,
+        transform var(--transition-duration) ease-out,
+        display var(--transition-duration) allow-discrete,
+        overlay var(--transition-duration) allow-discrete,
+        box-shadow var(--transition-duration) ease-out;
+
+        opacity: 0;
+
+        will-change: transform, opacity, box-shadow;
+        backface-visibility: hidden;
+        -webkit-backface-visibility: hidden;
+    }
+
+
+    &[open] {
+        animation: slide-in var(--transition-duration) ease-out;
+        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 */
+        &::backdrop {
+            opacity: 1;
+        }
+
+        &[data-position="top"] {
+            animation: slide-in-top var(--transition-duration) ease-out;
+        }
+    }
+
+    &:not([open]) {
+        animation: slide-out var(--transition-duration) ease-out;
+        opacity: 0;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* Subtle shadow for hidden state */
+        &::backdrop {
+            opacity: 0;
+        }
+
+        &[data-position="top"] {
+            animation: slide-out-top var(--transition-duration) ease-out;
+        }
+    }
+
+}
+
+@keyframes slide-in {
+    from {
+        transform: translateY(-40px);
+        opacity: 0;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+
+    }
+    to {
+        transform: translateY(0);
+        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 {
+    from {
+        transform: translateY(0);
+        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);
+        opacity: 0;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    }
+}
+
+@keyframes slide-in-top {
+    from {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(-40px);
+        opacity: 0;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    }
+    to {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(0.5rem);
+        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-top {
+    from {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(0.5rem);
+        opacity: 1;
+        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24), 0 8px 16px rgba(0, 0, 0, 0.12);
+    }
+    to {
+        top: 0;
+        left: 50%;
+        transform: translateX(-50%) translateY(-40px);
+        opacity: 0;
+        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+    }
+}
+
+dialog::backdrop {
+    backdrop-filter: blur(0.2rem);
+    background: --alpha(var(--color-neutral-token-13) / 20%);
+    transition: opacity var(--transition-duration) ease-out;
 }

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

@@ -1,5 +1,5 @@
 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>>;
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type DropdownMenuVariants = VariantProps<typeof styles>;
 export interface DropdownMenuProps extends DropdownMenuVariants {
     children?: any;

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

@@ -1,34 +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?.()}
+<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/DropdownMenuGroup.svelte

@@ -1,12 +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?.()}
+<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/DropdownMenuHeader.svelte

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

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

@@ -1,30 +1,30 @@
-<script lang="ts">
-    import {type DropdownMenuItemProps, getCtx} from "../DropdownMenu";
-    import {cn} from "../../../utils/utils";
-
-
-    let {children, class: className, onclick, href, linkProps, ...props}: DropdownMenuItemProps = $props()
-    let context = getCtx()
-</script>
-
-{#snippet button()}
-    <button
-            onclick={(e) => {
-            onclick?.(e)
-            context?.setOpen(false)
-        }}
-            role="menuitem"
-            data-dropdown-menu-item
-            class={cn('flex w-full items-center gap-2 px-2 py-2 rounded hover:bg-neutral-token-4 transition-all', className)}
-            {...props}>
-        {@render children?.()}
-    </button>
-{/snippet}
-
-{#if href}
-    <a href={href} data-no-translate {...linkProps}>
-        {@render button()}
-    </a>
-{:else }
-    {@render button()}
-{/if}
+<script lang="ts">
+    import {type DropdownMenuItemProps, getCtx} from "../DropdownMenu";
+    import {cn} from "../../../utils/utils";
+
+
+    let {children, class: className, onclick, href, linkProps, ...props}: DropdownMenuItemProps = $props()
+    let context = getCtx()
+</script>
+
+{#snippet button()}
+    <button
+            onclick={(e) => {
+            onclick?.(e)
+            context?.setOpen(false)
+        }}
+            role="menuitem"
+            data-dropdown-menu-item
+            class={cn('flex w-full items-center gap-2 px-2 py-2 rounded hover:bg-neutral-token-4 transition-all', className)}
+            {...props}>
+        {@render children?.()}
+    </button>
+{/snippet}
+
+{#if href}
+    <a href={href} data-no-translate {...linkProps}>
+        {@render button()}
+    </a>
+{:else }
+    {@render button()}
+{/if}

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

@@ -1,11 +1,11 @@
-<script lang="ts">
-    import {cn} from "../../../utils/utils";
-
-    let {children, class: className, ...props} = $props()
-</script>
-
-<div class={cn('border-b w-full', className)}
-     data-dropdown-menu-separator
-     {...props}>
-
+<script lang="ts">
+    import {cn} from "../../../utils/utils";
+
+    let {children, class: className, ...props} = $props()
+</script>
+
+<div class={cn('border-b w-full', className)}
+     data-dropdown-menu-separator
+     {...props}>
+
 </div>

package/dist/components/fonts/TeraFontMono.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
-    // Supports weights 100-700
-    import '@fontsource-variable/roboto-mono';
+<script lang="ts">
+    // Supports weights 100-700
+    import '@fontsource-variable/roboto-mono';
 </script>

package/dist/components/fonts/TeraFontSansSerif.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
-    // Supports weights 300-800
-    import '@fontsource-variable/open-sans';
+<script lang="ts">
+    // Supports weights 300-800
+    import '@fontsource-variable/open-sans';
 </script>

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

@@ -1,5 +1,5 @@
 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>>;
+export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type HeaderVariants = VariantProps<typeof styles>;
 export interface HeaderProps extends HeaderVariants {
     children: any;