tera-system-ui 0.0.16 → 0.0.18

package/dist/components/dialog/dialog.scss

@@ -1,113 +1,113 @@
-.dialog-box {
-    max-height: calc(100svh - 1rem);
-    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;
-
-}
-
-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: calc(100svh - 1rem);
+    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;
+
+}
+
+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/header/Header.svelte

@@ -1,36 +1,36 @@
-<script lang="ts">
-    import {type HeaderProps} from "./Header";
-    import {BrandLogo} from "../../components/brand-logo";
-    import './header.scss'
-    import {Button} from "../button";
-    import {IconHamburger} from "../icons";
-
-    let {children, onHamburgerClick, ...props}: HeaderProps & {} = $props();
-
-</script>
-
-<!--add component here-->
-<nav id="header-container"
-     class="flex z-40 w-full h-auto items-center justify-center sticky top-0 inset-x-0 backdrop-blur-lg data-[menu-open=true]:backdrop-blur-xl backdrop-saturate-150">
-    <header class="flex flex-wrap h-header-height w-full text-sm">
-        <nav class="w-full mx-auto px-4 pl-1 pr-2 md:pl-4 md:pe-4 flex items-center justify-between">
-            <div class="flex gap-1 items-center">
-                <Button class="md:hidden ring-0 focus:ring-0"
-                        icon
-                        variant="ghost"
-
-                        onclick={onHamburgerClick}>
-                    <IconHamburger/>
-                </Button>
-                <a href="/" class="header-brand-logo">
-                    <BrandLogo class="hidden md:block !h-icon-md"/>
-                    <BrandLogo class="md:hidden" shape="square"/>
-                </a>
-            </div>
-
-            <div class="flex gap-2 sm:gap-4 items-center">
-                {@render children?.()}
-            </div>
-        </nav>
-    </header>
-</nav>
+<script lang="ts">
+    import {type HeaderProps} from "./Header";
+    import {BrandLogo} from "../../components/brand-logo";
+    import './header.scss'
+    import {Button} from "../button";
+    import {IconHamburger} from "../icons";
+
+    let {children, onHamburgerClick, ...props}: HeaderProps & {} = $props();
+
+</script>
+
+<!--add component here-->
+<nav id="header-container"
+     class="flex z-40 w-full h-auto items-center justify-center sticky top-0 inset-x-0 backdrop-blur-lg data-[menu-open=true]:backdrop-blur-xl backdrop-saturate-150">
+    <header class="flex flex-wrap h-header-height w-full text-sm">
+        <nav class="w-full mx-auto px-4 pl-1 pr-2 md:pl-4 md:pe-4 flex items-center justify-between">
+            <div class="flex gap-1 items-center">
+                <Button class="md:hidden ring-0 focus:ring-0"
+                        icon
+                        variant="ghost"
+
+                        onclick={onHamburgerClick}>
+                    <IconHamburger/>
+                </Button>
+                <a href="/" class="header-brand-logo">
+                    <BrandLogo class="hidden md:block !h-icon-md"/>
+                    <BrandLogo class="md:hidden" shape="square"/>
+                </a>
+            </div>
+
+            <div class="flex gap-2 sm:gap-4 items-center">
+                {@render children?.()}
+            </div>
+        </nav>
+    </header>
+</nav>

package/dist/components/header/header.scss

@@ -1,20 +1,20 @@
-#header-container {
-  container-type: inline-size;
-
-  [data-name="brand-logo"] {
-    @apply h-icon-lg;
-  }
-}
-
-
-@container (min-width: theme(screens.md)) {
-  #header-container {
-    header {
-
-    }
-
-    [data-name="brand-logo"] {
-      @apply h-icon-xl;
-    }
-  }
+#header-container {
+  container-type: inline-size;
+
+  [data-name="brand-logo"] {
+    @apply h-icon-lg;
+  }
+}
+
+
+@container (min-width: theme(screens.md)) {
+  #header-container {
+    header {
+
+    }
+
+    [data-name="brand-logo"] {
+      @apply h-icon-xl;
+    }
+  }
 }

package/dist/components/icons/IconArrowBigRightFilled.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconArrowBigRightFilled} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconArrowBigRightFilled class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconArrowBigRightFilled} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconArrowBigRightFilled class={styles({...props})}/>
+

package/dist/components/icons/IconBook.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconBook} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconBook class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconBook} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconBook class={styles({...props})}/>
+

package/dist/components/icons/IconBookmarkPlus.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconBookmarkPlus} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconBookmarkPlus class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconBookmarkPlus} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconBookmarkPlus class={styles({...props})}/>
+

package/dist/components/icons/IconCalculator.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconCalculator} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconCalculator class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconCalculator} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconCalculator class={styles({...props})}/>
+

package/dist/components/icons/IconCheck.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconCheck} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconCheck class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconCheck} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconCheck class={styles({...props})}/>
+

package/dist/components/icons/IconChevronDown.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconChevronDown} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconChevronDown class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconChevronDown} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconChevronDown class={styles({...props})}/>
+

package/dist/components/icons/IconCopy.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconCopy} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconCopy class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconCopy} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconCopy class={styles({...props})}/>
+

package/dist/components/icons/IconCopyCheckFilled.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconCopyCheckFilled} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconCopyCheckFilled class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconCopyCheckFilled} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconCopyCheckFilled class={styles({...props})}/>
+

package/dist/components/icons/IconHamburger.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconMenu2} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconMenu2 class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconMenu2} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconMenu2 class={styles({...props})}/>
+

package/dist/components/icons/IconLanguage.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconLanguage} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconLanguage class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconLanguage} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconLanguage class={styles({...props})}/>
+

package/dist/components/icons/IconLoader2.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconLoader2} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconLoader2 class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconLoader2} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconLoader2 class={styles({...props})}/>
+

package/dist/components/icons/IconMoon.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconMoonStars} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconMoonStars class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconMoonStars} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconMoonStars class={styles({...props})}/>
+

package/dist/components/icons/IconPointFilled.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconPointFilled} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconPointFilled class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconPointFilled} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconPointFilled class={styles({...props})}/>
+

package/dist/components/icons/IconSearch.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconSearch} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconSearch class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconSearch} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconSearch class={styles({...props})}/>
+

package/dist/components/icons/IconSun.svelte

@@ -1,10 +1,10 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-    import {IconSunHigh} from "@tabler/icons-svelte";
-
-    let {children, ...props}: IconsProps = $props();
-
-</script>
-
-<IconSunHigh class={styles({...props})}/>
-
+<script lang="ts">
+    import {type IconsProps, styles} from "./Icons";
+    import {IconSunHigh} from "@tabler/icons-svelte";
+
+    let {children, ...props}: IconsProps = $props();
+
+</script>
+
+<IconSunHigh class={styles({...props})}/>
+