tera-system-ui 0.1.64 → 0.1.67

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

@@ -1,41 +1,68 @@
-import { type VariantProps } from "tailwind-variants";
+/**
+ * @component DropdownMenu - Contextual popup menu anchored to a trigger element.
+ * Parts: DropdownMenu, DropdownMenuItem, DropdownMenuGroup, DropdownMenuHeader, DropdownMenuSeparator.
+ * Built on BitsUI DropdownMenu primitive.
+ */
 import type { Snippet } from "svelte";
-import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
-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 HTMLAttributes<HTMLDivElement>, DropdownMenuVariants {
+export interface DropdownMenuProps {
     children?: Snippet;
+    /** Snippet used as the clickable trigger that opens the menu. */
+    trigger?: Snippet;
+    /** Additional CSS classes for the menu content panel. */
     class?: string;
-    triggerRef: HTMLElement | null;
+    /** Whether the menu is open. Bindable. */
     open?: boolean;
-    ref?: HTMLDivElement | null;
+    /** Which side of the trigger the menu appears on. */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Alignment of the menu relative to the trigger. */
+    align?: 'start' | 'center' | 'end';
+    /** Distance in pixels between the trigger and menu panel. */
+    sideOffset?: number;
+    /** Whether keyboard navigation wraps from the last item back to the first. */
+    loop?: boolean;
+    /** Prevent the page from scrolling while the menu is open. */
+    preventScroll?: boolean;
+    /** Bindable reference to the menu content element. */
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
 }
-export type DropdownMenuContext = {
-    setOpen: (open: boolean) => void;
-    getOpen: () => boolean;
-};
-export declare function getCtx(): DropdownMenuContext;
-export declare function setCtx(context: DropdownMenuContext): void;
-export interface DropdownMenuItemProps extends Omit<HTMLButtonAttributes & HTMLAnchorAttributes, 'class'> {
+export interface DropdownMenuItemProps {
     children?: Snippet;
+    /** Additional CSS classes for the item. */
     class?: string;
-    onclick?: (e: MouseEvent) => void;
+    /** Renders the item in a destructive/danger visual style. */
+    danger?: boolean;
+    /** Prevents selecting this item. */
+    disabled?: boolean;
+    /** When set, renders the item as an anchor link instead of a button. */
     href?: string;
-    linkProps?: HTMLAnchorAttributes;
-    ref?: HTMLButtonElement | HTMLAnchorElement | null;
+    /** Called when the item is clicked. */
+    onclick?: (e: MouseEvent) => void;
+    /** Whether selecting this item closes the menu. Defaults to true. */
+    closeOnSelect?: boolean;
+    /** Alternative text value for typeahead matching — defaults to the item's text content. */
+    textValue?: string;
+    /** Bindable reference to the item element. */
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
 }
-export interface DropdownMenuGroupProps extends HTMLAttributes<HTMLDivElement> {
+export interface DropdownMenuGroupProps {
     children?: Snippet;
+    /** Additional CSS classes for the group wrapper. */
     class?: string;
-    ref?: HTMLDivElement | null;
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
 }
-export interface DropdownMenuHeaderProps extends HTMLAttributes<HTMLDivElement> {
+export interface DropdownMenuHeaderProps {
     children?: Snippet;
+    /** Additional CSS classes for the header. */
     class?: string;
-    ref?: HTMLDivElement | null;
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
 }
-export interface DropdownMenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {
+export interface DropdownMenuSeparatorProps {
+    /** Additional CSS classes for the separator line. */
     class?: string;
-    ref?: HTMLDivElement | null;
+    ref?: HTMLElement | null;
+    [key: string]: unknown;
 }
-export {};

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

@@ -1,15 +1 @@
-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);
-}
+export {};

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

@@ -1,34 +1,36 @@
-<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>
+<script lang="ts">import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import { cn } from '../../../utils/utils.js';
+let { children, trigger, class: className, open = $bindable(false), side = 'bottom', sideOffset = 4, align = 'start', loop, preventScroll, ...props } = $props();
+</script>
+
+<DropdownMenuPrimitive.Root bind:open>
+    {#if trigger}
+        <DropdownMenuPrimitive.Trigger>
+            {#snippet child({ props: triggerProps })}
+                <span {...triggerProps} class="inline-flex">
+                    {@render trigger()}
+                </span>
+            {/snippet}
+        </DropdownMenuPrimitive.Trigger>
+    {/if}
+
+    <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Content
+            {side}
+            {sideOffset}
+            {align}
+            {loop}
+            {preventScroll}
+            {...props}
+            class={cn(
+                'z-50 min-w-[10rem] overflow-hidden p-1',
+                'bg-surface rounded-container border border-border-default shadow-md',
+                'animate-in fade-in zoom-in-95 duration-150',
+                'data-[state=closed]:animate-out data-[state=closed]:fade-out data-[state=closed]:zoom-out-95',
+                className
+            )}
+        >
+            {@render children?.()}
+        </DropdownMenuPrimitive.Content>
+    </DropdownMenuPrimitive.Portal>
+</DropdownMenuPrimitive.Root>

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

@@ -1,4 +1,4 @@
-import { type DropdownMenuProps } from "../DropdownMenu";
+import type { DropdownMenuProps } from '../DropdownMenu.js';
 declare const DropdownMenu: import("svelte").Component<DropdownMenuProps, {}, "open">;
 type DropdownMenu = ReturnType<typeof DropdownMenu>;
 export default DropdownMenu;

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

@@ -1,12 +1,8 @@
-<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>
+<script lang="ts">import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import { cn } from '../../../utils/utils.js';
+let { children, class: className, ...props } = $props();
+</script>
+
+<DropdownMenuPrimitive.Group class={cn('py-1', className)} {...props}>
+    {@render children?.()}
+</DropdownMenuPrimitive.Group>

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

@@ -1,6 +1,4 @@
-declare const DropdownMenuGroup: import("svelte").Component<{
-    children: any;
-    class: any;
-} & Record<string, any>, {}, "">;
+import type { DropdownMenuGroupProps } from '../DropdownMenu.js';
+declare const DropdownMenuGroup: import("svelte").Component<DropdownMenuGroupProps, {}, "">;
 type DropdownMenuGroup = ReturnType<typeof DropdownMenuGroup>;
 export default DropdownMenuGroup;

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

@@ -1,12 +1,11 @@
-<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>
+<script lang="ts">import { cn } from '../../../utils/utils.js';
+let { children, class: className, ...props } = $props();
+</script>
+
+<div
+    class={cn('px-2 py-1.5 text-xs font-semibold text-text-tertiary uppercase tracking-wider', className)}
+    role="presentation"
+    {...props}
+>
+    {@render children?.()}
+</div>

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

@@ -1,6 +1,4 @@
-declare const DropdownMenuHeader: import("svelte").Component<{
-    children: any;
-    class: any;
-} & Record<string, any>, {}, "">;
+import type { DropdownMenuHeaderProps } from '../DropdownMenu.js';
+declare const DropdownMenuHeader: import("svelte").Component<DropdownMenuHeaderProps, {}, "">;
 type DropdownMenuHeader = ReturnType<typeof DropdownMenuHeader>;
 export default DropdownMenuHeader;

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

@@ -1,30 +1,27 @@
-<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 { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import { cn } from '../../../utils/utils.js';
+let { children, class: className, danger, disabled, onclick, href, closeOnSelect, textValue, ...props } = $props();
+function handleSelect() {
+    onclick?.(new MouseEvent('click'));
+    if (href)
+        window.location.assign(href);
+}
+</script>
+
+<DropdownMenuPrimitive.Item
+    {disabled}
+    {textValue}
+    closeOnSelect={closeOnSelect}
+    onSelect={handleSelect}
+    class={cn(
+        'flex w-full cursor-pointer items-center gap-2 px-2 py-2 rounded text-sm outline-none select-none',
+        'transition-colors ease-ui duration-100',
+        'data-[highlighted]:bg-surface-hover',
+        'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        danger ? 'text-error-500 data-[highlighted]:bg-error-50' : 'text-text-primary',
+        className
+    )}
+    {...props}
+>
+    {@render children?.()}
+</DropdownMenuPrimitive.Item>

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

@@ -1,4 +1,4 @@
-import { type DropdownMenuItemProps } from "../DropdownMenu";
+import type { DropdownMenuItemProps } from '../DropdownMenu.js';
 declare const DropdownMenuItem: import("svelte").Component<DropdownMenuItemProps, {}, "">;
 type DropdownMenuItem = ReturnType<typeof DropdownMenuItem>;
 export default DropdownMenuItem;

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

@@ -1,11 +1,9 @@
-<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>
+<script lang="ts">import { DropdownMenu as DropdownMenuPrimitive } from 'bits-ui';
+import { cn } from '../../../utils/utils.js';
+let { class: className, ...props } = $props();
+</script>
+
+<DropdownMenuPrimitive.Separator
+    class={cn('-mx-1 my-1 h-px bg-border-default', className)}
+    {...props}
+/>

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

@@ -1,6 +1,4 @@
-declare const DropdownMenuSeparator: import("svelte").Component<{
-    children: any;
-    class: any;
-} & Record<string, any>, {}, "">;
+import type { DropdownMenuSeparatorProps } from '../DropdownMenu.js';
+declare const DropdownMenuSeparator: import("svelte").Component<DropdownMenuSeparatorProps, {}, "">;
 type DropdownMenuSeparator = ReturnType<typeof DropdownMenuSeparator>;
 export default DropdownMenuSeparator;

package/dist/components/fonts/TeraFontMono.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
-    // Supports weights 100-700
-    import '@fontsource-variable/roboto-mono';
-</script>
+<script lang="ts">// Geist Mono first (modern, preferred), fallback to Roboto Mono Variable
+import '@fontsource/geist-mono';
+import '@fontsource-variable/roboto-mono';
+</script>

package/dist/components/fonts/TeraFontMono.svelte.d.ts

@@ -1,3 +1,4 @@
+import '@fontsource/geist-mono';
 import '@fontsource-variable/roboto-mono';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/components/fonts/TeraFontSansSerif.svelte

@@ -1,4 +1,4 @@
-<script lang="ts">
-    // Supports weights 300-800
-    import '@fontsource-variable/open-sans';
-</script>
+<script lang="ts">// Inter Variable — modern, sharp screen rendering, strong numeral rendering
+// Supports weights 100–900
+import '@fontsource-variable/inter';
+</script>

package/dist/components/fonts/TeraFontSansSerif.svelte.d.ts

@@ -1,4 +1,4 @@
-import '@fontsource-variable/open-sans';
+import '@fontsource-variable/inter';
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

package/dist/components/header/Header.svelte

@@ -1,12 +1,9 @@
-<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 lang="ts">import {} from "./Header";
+import { BrandLogo } from "../../components/brand-logo";
+import './header.scss';
+import { Button } from "../button";
+import { IconHamburger } from "../icons";
+let { children, onHamburgerClick, ...props } = $props();
 </script>
 
 <!--add component here-->

package/dist/components/header/header.scss

@@ -7,7 +7,7 @@
 }
 
 
-@container (min-width: theme(--breakpoint-md)) {
+@container (min-width: 48rem) {
   #header-container {
     header {
 

package/dist/components/icons/IconArrowBigRightFilled.svelte

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

package/dist/components/icons/IconBook.svelte

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

package/dist/components/icons/IconBookmarkPlus.svelte

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

package/dist/components/icons/IconCalculator.svelte

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

package/dist/components/icons/IconCheck.svelte

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

package/dist/components/icons/IconChevronDown.svelte

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

package/dist/components/icons/IconCoin.svelte

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

package/dist/components/icons/IconCoinConvert.svelte

@@ -1,8 +1,5 @@
-<script lang="ts">
-    import {type IconsProps, styles} from "./Icons";
-
-    let {children, ...props}: IconsProps = $props();
-
+<script lang="ts">import { styles } from "./Icons";
+let { children, ...props } = $props();
 </script>
 
 <svg width="24" height="24" viewBox="0 0 24 24" class={styles({...props})} fill="none" xmlns="http://www.w3.org/2000/svg">

package/dist/components/icons/IconCopy.svelte

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

package/dist/components/icons/IconCopyCheckFilled.svelte

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

package/dist/components/icons/IconHamburger.svelte

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

package/dist/components/icons/IconLanguage.svelte

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

package/dist/components/icons/IconLoader2.svelte

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

package/dist/components/icons/IconLogout.svelte

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