tera-system-ui 0.0.20 → 0.0.22

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

@@ -0,0 +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?.()}
+</div>

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

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

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

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import {type DropdownMenuItemProps, getCtx} from "../DropdownMenu";
+    import {cn} from "../../../utils/utils";
+
+
+    let {children, class: className, onclick, href, ...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}>
+        {@render button()}
+    </a>
+{:else }
+    {@render button()}
+{/if}

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

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

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

@@ -0,0 +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}>
+
+</div>

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

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

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

@@ -0,0 +1,5 @@
+export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as DropdownMenuItem } from './components/DropdownMenuItem.svelte';
+export { default as DropdownMenuGroup } from './components/DropdownMenuGroup.svelte';
+export { default as DropdownMenuHeader } from './components/DropdownMenuHeader.svelte';
+export { default as DropdownMenuSeparator } from './components/DropdownMenuSeparator.svelte';

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

@@ -0,0 +1,5 @@
+export { default as DropdownMenu } from './components/DropdownMenu.svelte';
+export { default as DropdownMenuItem } from './components/DropdownMenuItem.svelte';
+export { default as DropdownMenuGroup } from './components/DropdownMenuGroup.svelte';
+export { default as DropdownMenuHeader } from './components/DropdownMenuHeader.svelte';
+export { default as DropdownMenuSeparator } from './components/DropdownMenuSeparator.svelte';

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/IconLogout.svelte

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

package/dist/components/icons/IconLogout.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconLogout } from "@tabler/icons-svelte";
+declare const IconLogout: import("svelte").Component<IconsProps, {}, "">;
+export default IconLogout;

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/IconSettings.svelte

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

package/dist/components/icons/IconSettings.svelte.d.ts

@@ -0,0 +1,4 @@
+import { type IconsProps } from "./Icons";
+import { IconSettings } from "@tabler/icons-svelte";
+declare const IconSettings: import("svelte").Component<IconsProps, {}, "">;
+export default IconSettings;

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})}/>
+

package/dist/components/icons/IconSwitchHorizontal.svelte

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

package/dist/components/icons/IconSwitchVertical.svelte

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

package/dist/components/icons/IconTransform.svelte

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