tera-system-ui 0.1.76 → 0.2.1

package/dist/components/marketing/PricingCard.svelte

@@ -1,48 +0,0 @@
-<script lang="ts">import { Badge } from '../badge/index.js';
-import { Button } from '../button/index.js';
-let { plan, price, period, description, features = [], cta, popular, variant = 'default', onclick, class: className = '', } = $props();
-const isFeatured = $derived(variant === 'featured');
-</script>
-
-<div
-    class="relative flex flex-col rounded-container overflow-hidden border transition-[box-shadow,transform] ease-spring duration-200
-        {isFeatured
-            ? 'shadow-lg border-transparent scale-[1.02]'
-            : 'shadow-sm border-border-default'} {className}"
->
-    <!-- Header -->
-    <div class="px-6 pt-6 pb-4 {isFeatured ? 'bg-primary-600 text-interactive-on' : 'bg-surface-raised'}">
-        <div class="flex items-start justify-between">
-            <h3 class="font-semibold text-base">{plan}</h3>
-            {#if popular}
-                <Badge variant="primary" size="sm">Popular</Badge>
-            {/if}
-        </div>
-        <div class="mt-3 flex items-end gap-1">
-            <span class="text-4xl font-bold">{price}</span>
-            <span class="text-sm mb-1 opacity-75">/{period}</span>
-        </div>
-        <p class="mt-1 text-sm opacity-80">{description}</p>
-    </div>
-
-    <!-- Features -->
-    <div class="flex-1 px-6 py-5 bg-surface-raised flex flex-col gap-3">
-        {#each features as feature (feature)}
-            <div class="flex items-start gap-2 text-sm">
-                <svg class="size-4 shrink-0 mt-0.5 text-interactive" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
-                    <path d="M2 8l4 4 8-8"/>
-                </svg>
-                <span class="text-text-secondary">{feature}</span>
-            </div>
-        {/each}
-    </div>
-
-    <!-- CTA -->
-    <div class="px-6 pb-6 bg-surface-raised">
-        <Button
-            variant={isFeatured ? 'primary' : 'default'}
-            block
-            {onclick}
-        >{cta}</Button>
-    </div>
-</div>

package/dist/components/marketing/PricingCard.svelte.d.ts

@@ -1,15 +0,0 @@
-type $$ComponentProps = {
-    plan: string;
-    price: string;
-    period: string;
-    description: string;
-    features: string[];
-    cta: string;
-    popular?: boolean;
-    variant?: 'default' | 'featured';
-    onclick?: () => void;
-    class?: string;
-};
-declare const PricingCard: import("svelte").Component<$$ComponentProps, {}, "">;
-type PricingCard = ReturnType<typeof PricingCard>;
-export default PricingCard;

package/dist/components/marketing/StatBlock.svelte

@@ -1,14 +0,0 @@
-<script lang="ts">import { Badge } from '../badge/index.js';
-let { value, label, trend, trendDirection = 'neutral', class: className = '', } = $props();
-const trendVariant = $derived(trendDirection === 'up' ? 'success' : trendDirection === 'down' ? 'error' : 'default');
-</script>
-
-<div class="flex flex-col gap-1 {className}">
-    <div class="flex items-end gap-2">
-        <span class="text-[2.5rem] font-bold leading-none text-text-primary">{value}</span>
-        {#if trend}
-            <Badge variant={trendVariant} size="sm" class="mb-1">{trend}</Badge>
-        {/if}
-    </div>
-    <span class="text-xs text-text-tertiary">{label}</span>
-</div>

package/dist/components/marketing/StatBlock.svelte.d.ts

@@ -1,10 +0,0 @@
-type $$ComponentProps = {
-    value: string;
-    label: string;
-    trend?: string;
-    trendDirection?: 'up' | 'down' | 'neutral';
-    class?: string;
-};
-declare const StatBlock: import("svelte").Component<$$ComponentProps, {}, "">;
-type StatBlock = ReturnType<typeof StatBlock>;
-export default StatBlock;

package/dist/components/marketing/TestimonialCard.svelte

@@ -1,24 +0,0 @@
-<script lang="ts">import { StarRating } from '../star-rating/index.js';
-import { Avatar } from '../avatar/index.js';
-let { quote, name, role, company, avatarSrc, rating, class: className = '', } = $props();
-</script>
-
-<div class="p-6 rounded-container border border-border-default bg-surface-raised {className}">
-    {#if rating}
-        <div class="mb-3">
-            <StarRating value={rating} readonly size="sm" />
-        </div>
-    {/if}
-
-    <p class="relative text-sm leading-relaxed text-text-secondary italic before:content-[open-quote] before:text-4xl before:text-interactive-subtle before:leading-none before:block before:-mb-3">
-        {quote}
-    </p>
-
-    <div class="mt-4 flex items-center gap-3">
-        <Avatar src={avatarSrc} fallback={name.slice(0, 2).toUpperCase()} size="sm" />
-        <div>
-            <p class="text-sm font-medium text-text-primary">{name}</p>
-            <p class="text-xs text-text-tertiary">{role}{company ? `, ${company}` : ''}</p>
-        </div>
-    </div>
-</div>

package/dist/components/marketing/TestimonialCard.svelte.d.ts

@@ -1,12 +0,0 @@
-type $$ComponentProps = {
-    quote: string;
-    name: string;
-    role: string;
-    company?: string;
-    avatarSrc?: string;
-    rating?: number;
-    class?: string;
-};
-declare const TestimonialCard: import("svelte").Component<$$ComponentProps, {}, "">;
-type TestimonialCard = ReturnType<typeof TestimonialCard>;
-export default TestimonialCard;

package/dist/components/marketing/index.d.ts

@@ -1,4 +0,0 @@
-export { default as FeatureCard } from './FeatureCard.svelte';
-export { default as StatBlock } from './StatBlock.svelte';
-export { default as PricingCard } from './PricingCard.svelte';
-export { default as TestimonialCard } from './TestimonialCard.svelte';

package/dist/components/marketing/index.js

@@ -1,4 +0,0 @@
-export { default as FeatureCard } from './FeatureCard.svelte';
-export { default as StatBlock } from './StatBlock.svelte';
-export { default as PricingCard } from './PricingCard.svelte';
-export { default as TestimonialCard } from './TestimonialCard.svelte';

package/dist/components/popover/Popover.d.ts

@@ -1,37 +0,0 @@
-/**
- * @component Popover - Floating panel anchored to a trigger element.
- * Built on BitsUI Popover primitive with portal rendering.
- */
-import type { Snippet } from "svelte";
-export interface PopoverProps {
-    children?: Snippet;
-    /** Snippet used as the clickable trigger that opens the popover. */
-    trigger?: Snippet;
-    /** Additional CSS classes for the popover content panel. */
-    class?: string;
-    /** Whether the popover is open. Bindable. */
-    open?: boolean;
-    /** Which side of the trigger the popover appears on. */
-    side?: 'top' | 'bottom' | 'left' | 'right';
-    /** Distance in pixels between the trigger and popover panel. */
-    sideOffset?: number;
-    /** Alignment of the popover relative to the trigger. */
-    align?: 'start' | 'center' | 'end';
-    /** Additional offset in pixels along the alignment axis. */
-    alignOffset?: number;
-    /** Whether clicking outside the popover closes it. */
-    closeOnClickOutside?: boolean;
-    /** Whether pressing Escape closes the popover. Defaults to true. */
-    closeOnEscape?: boolean;
-    /** Whether focus is trapped inside the popover content while open. */
-    trapFocus?: boolean;
-    /** Prevent the page from scrolling while the popover is open. */
-    preventScroll?: boolean;
-    /** Called when the user interacts outside the popover boundaries. */
-    onInteractOutside?: () => void;
-    /** ARIA role for the popover content element. */
-    role?: string;
-    /** Bindable reference to the popover content element. */
-    ref?: HTMLElement | null;
-    [key: string]: unknown;
-}

package/dist/components/popover/Popover.js

@@ -1 +0,0 @@
-export {};

package/dist/components/popover-responsive/PopoverResponsive.d.ts

@@ -1,22 +0,0 @@
-/**
- * @component PopoverResponsive - Shows a Popover on desktop and a Dialog on mobile.
- * Automatically switches at the 640 px breakpoint.
- */
-import type { Snippet } from "svelte";
-export interface PopoverResponsiveProps {
-    /** Content rendered inside the popover/dialog panel. */
-    children?: Snippet;
-    /** Snippet used as the clickable trigger. */
-    trigger?: Snippet;
-    /** Additional CSS classes for the content panel. */
-    class?: string;
-    /** Whether the panel is open. Bindable. */
-    open?: boolean;
-    /** Which side of the trigger the desktop popover appears on. */
-    side?: 'top' | 'bottom' | 'left' | 'right';
-    /** Distance in pixels between the trigger and popover (desktop only). */
-    sideOffset?: number;
-    /** Alignment of the popover relative to the trigger (desktop only). */
-    align?: 'start' | 'center' | 'end';
-    [key: string]: unknown;
-}

package/dist/components/popover-responsive/PopoverResponsive.js

@@ -1 +0,0 @@
-export {};

package/dist/components/select/Select.d.ts

@@ -1,106 +0,0 @@
-/**
- * @component Select - Dropdown select with flat or grouped options, keyboard navigation, and style variants.
- * Built on BitsUI Select primitive.
- */
-import type { VariantProps } from "tailwind-variants";
-export interface SelectOption {
-    /** Unique value submitted or passed to onchange. */
-    value: string;
-    /** Human-readable label shown in the list and trigger. */
-    label: string;
-    /** Prevents selecting this option. */
-    disabled?: boolean;
-}
-export interface SelectGroup {
-    /** Heading label displayed above the group's options. */
-    label: string;
-    /** Options belonging to this group. */
-    options: SelectOption[];
-}
-export declare const triggerStyles: import("tailwind-variants").TVReturnType<{
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    disabled: {
-        true: string;
-    };
-    status: {
-        error: string;
-        warning: string;
-    };
-}, undefined, "w-full inline-flex items-center justify-between gap-2 rounded-md outline-none font-normal text-left transition-[border-color,box-shadow,background-color] ease-ui duration-150", {
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    disabled: {
-        true: string;
-    };
-    status: {
-        error: string;
-        warning: string;
-    };
-}, undefined, import("tailwind-variants").TVReturnType<{
-    variant: {
-        outlined: string;
-        filled: string;
-        borderless: string;
-    };
-    size: {
-        sm: string;
-        md: string;
-        lg: string;
-    };
-    disabled: {
-        true: string;
-    };
-    status: {
-        error: string;
-        warning: string;
-    };
-}, undefined, "w-full inline-flex items-center justify-between gap-2 rounded-md outline-none font-normal text-left transition-[border-color,box-shadow,background-color] ease-ui duration-150", unknown, unknown, undefined>>;
-type TriggerVariants = VariantProps<typeof triggerStyles>;
-export interface SelectProps extends TriggerVariants {
-    /** Selection mode. Use 'multiple' to allow picking several options. */
-    type?: 'single' | 'multiple';
-    /** Flat list of options. Use `groups` instead for grouped options. */
-    options?: SelectOption[];
-    /** Grouped options — renders labeled sections. Takes precedence over `options`. */
-    groups?: SelectGroup[];
-    /**
-     * Currently selected value(s). Bindable.
-     * A string for type='single', a string[] for type='multiple'.
-     */
-    value?: string | string[];
-    /** Text shown in the trigger when nothing is selected. */
-    placeholder?: string;
-    /** Prevents all interaction. */
-    disabled?: boolean;
-    /** Whether keyboard navigation wraps from the last item to the first. */
-    loop?: boolean;
-    /** Allow deselecting the current value by clicking it again (single mode only). */
-    allowDeselect?: boolean;
-    /** Whether the select is required for form submission. */
-    required?: boolean;
-    /** Name attribute used when submitting within a form. */
-    name?: string;
-    /** Additional CSS classes for the trigger button. */
-    class?: string;
-    /** Called when the selected value changes. */
-    onchange?: (value: string | string[]) => void;
-    [key: string]: unknown;
-}
-export {};

package/dist/components/select/Select.js

@@ -1,24 +0,0 @@
-import { tv } from "tailwind-variants";
-export const triggerStyles = tv({
-    base: 'w-full inline-flex items-center justify-between gap-2 rounded-md outline-none font-normal text-left transition-[border-color,box-shadow,background-color] ease-ui duration-150',
-    variants: {
-        variant: {
-            outlined: 'border border-border-default bg-surface-control hover:border-interactive data-[state=open]:border-interactive-hover data-[state=open]:shadow-focus',
-            filled: 'bg-surface-sunken border border-transparent hover:bg-surface-hover data-[state=open]:bg-surface data-[state=open]:border-interactive-hover data-[state=open]:shadow-focus',
-            borderless: 'bg-transparent border-0 hover:bg-surface-raised',
-        },
-        size: {
-            sm: 'h-6  px-3 text-sm',
-            md: 'h-9  px-3 text-sm',
-            lg: 'h-10 px-3 text-base',
-        },
-        disabled: {
-            true: 'cursor-not-allowed bg-surface-sunken text-text-disabled border-border-default pointer-events-none',
-        },
-        status: {
-            error: 'border-error-default hover:border-error-hover data-[state=open]:border-error-default data-[state=open]:shadow-focus-error',
-            warning: 'border-warning-default hover:border-warning-hover data-[state=open]:border-warning-default data-[state=open]:shadow-focus-warning',
-        },
-    },
-    defaultVariants: { variant: 'outlined', size: 'md' },
-});

package/dist/components/side-navigation/SideNavigation.d.ts

@@ -1,72 +0,0 @@
-import { type VariantProps } from "tailwind-variants";
-import type { Snippet } from "svelte";
-import type { HTMLAttributes } from "svelte/elements";
-/**
- * App-shell sidebar navigation. Use `SideNavigationLayout` as the outermost wrapper of a page: it renders the fixed sidebar plus a content region for your `Header`, the page body, and optional bottom controls. `SideNavigation` is the bar itself and is normally driven through the layout. Wrap the app in `TeraUiContext` so `sideNavHref` (active route) and `language` are supplied globally, or pass them as props directly.
- *
- * The `items` prop is a single flat array that may MIX two shapes in any order: (1) a link item `{ href, title, icon?, exactHref? }` — a single navigable entry, where `exactHref` (falling back to `href`) is compared to the active route to apply the `selected` highlight; and (2) a group `{ id, title, items, defaultExpanded? }` — a collapsible section whose `items` are link items. A group renders a compact, fixed-height header (title + chevron, no icon) that expands/collapses its children; in the compact icon-only rail the header collapses to a thin divider so groups stay separated without large gaps, while keeping a stable height so items don't shift. Group children render with their own icons.
- *
- * Group expand/collapse state is PERSISTED to localStorage under the key `side-nav-group-state` (a JSON map of `{ [groupId]: boolean }`), keyed by the group's `id` — so `id` must be stable and unique. `defaultExpanded` only sets the initial state the first time a group `id` is seen (before any saved value exists). A group that contains the active route is always force-expanded on mount, regardless of saved state.
- *
- * If `items` is omitted, a built-in default navigation (calculator / converter / docs) is rendered. The sidebar's own expand vs. compact (icon-only) state is toggled by calling the exported `toggleSideNavigation()` (e.g. from a hamburger button) and is persisted at the xl breakpoint under localStorage key `side-nav-xl-state`; on smaller widths the bar is icon-only and temporarily expands on hover.
- *
- * Example: `<SideNavigationLayout items={[{ href: '/home', title: 'Home', icon: IconHome }, { id: 'tools', title: 'Tools', defaultExpanded: true, items: [{ href: '/calc', exactHref: '/calc', title: 'Calculator', icon: IconCalc }] }]}> <Header onHamburgerClick={toggleSideNavigation}>...</Header> <div>Page content</div> </SideNavigationLayout>`
- */
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
-type SideNavigationVariants = VariantProps<typeof styles>;
-/** A single navigable link in the sidebar. */
-export type SideNavigationItem = {
-    /** Destination URL for the link. */
-    href: string;
-    /** Route used for active-state matching; falls back to `href` when omitted. */
-    exactHref?: string;
-    /** Icon component (e.g. a Tabler icon) rendered before the title. */
-    icon?: any;
-    /** Visible label. */
-    title: string;
-};
-/** A collapsible section grouping several link items under a header. */
-export type SideNavigationGroup = {
-    /** Stable, unique key — used to persist this group's expanded state in localStorage. */
-    id: string;
-    /** Header label (the group header shows title + chevron only, no icon). */
-    title: string;
-    /** Initial expanded state the first time the group is seen (before any saved value). */
-    defaultExpanded?: boolean;
-    /** Child links shown when the group is expanded. */
-    items: SideNavigationItem[];
-};
-/** An entry in the `items` array: either a flat link item or a collapsible group. */
-export type SideNavigationEntry = SideNavigationItem | SideNavigationGroup;
-/** Type guard: true when an entry is a {@link SideNavigationGroup} (has an `items` array). */
-export declare function isSideNavigationGroup(entry: SideNavigationEntry): entry is SideNavigationGroup;
-export interface SideNavigationProps extends HTMLAttributes<HTMLElement>, SideNavigationVariants {
-    children?: Snippet;
-    class?: string;
-    /** Current active route, used to highlight the matching item. Usually supplied via TeraUiContext. */
-    sideNavHref?: string;
-    /** Active language code; localizes the built-in default nav links. Usually supplied via TeraUiContext. */
-    language?: string;
-    /** Navigation entries: a flat array mixing link items ({ href, title, icon?, exactHref? }) and collapsible groups ({ id, title, items, defaultExpanded? }). Omit to render the built-in default nav. */
-    items?: SideNavigationEntry[];
-    /** Snippet rendered pinned at the bottom of the sidebar (e.g. a theme toggle). */
-    bottomChildren?: Snippet;
-    ref?: HTMLElement | null;
-}
-export declare const SCREEN_BREAK_POINTS: {
-    sm: number;
-    md: number;
-    lg: number;
-    xl: number;
-};
-export declare function loadGroupStates(): Record<string, boolean>;
-export declare function saveGroupStates(states: Record<string, boolean>): void;
-export declare function saveXlSideNavState(state: string | undefined): void;
-export declare function loadXlSideNavState(): string | undefined;
-export declare function restoreSideNavStateForXl(): void;
-export declare const mainLayout: () => HTMLElement | null;
-export declare const getSideNavState: () => string | undefined;
-export declare const setSideNavState: (state: any) => void;
-export declare function getScreenWidth(): number;
-export declare function toggleSideNavigation(): void;
-export {};

package/dist/components/side-navigation/SideNavigation.js

@@ -1,91 +0,0 @@
-import { tv } from "tailwind-variants";
-/**
- * App-shell sidebar navigation. Use `SideNavigationLayout` as the outermost wrapper of a page: it renders the fixed sidebar plus a content region for your `Header`, the page body, and optional bottom controls. `SideNavigation` is the bar itself and is normally driven through the layout. Wrap the app in `TeraUiContext` so `sideNavHref` (active route) and `language` are supplied globally, or pass them as props directly.
- *
- * The `items` prop is a single flat array that may MIX two shapes in any order: (1) a link item `{ href, title, icon?, exactHref? }` — a single navigable entry, where `exactHref` (falling back to `href`) is compared to the active route to apply the `selected` highlight; and (2) a group `{ id, title, items, defaultExpanded? }` — a collapsible section whose `items` are link items. A group renders a compact, fixed-height header (title + chevron, no icon) that expands/collapses its children; in the compact icon-only rail the header collapses to a thin divider so groups stay separated without large gaps, while keeping a stable height so items don't shift. Group children render with their own icons.
- *
- * Group expand/collapse state is PERSISTED to localStorage under the key `side-nav-group-state` (a JSON map of `{ [groupId]: boolean }`), keyed by the group's `id` — so `id` must be stable and unique. `defaultExpanded` only sets the initial state the first time a group `id` is seen (before any saved value exists). A group that contains the active route is always force-expanded on mount, regardless of saved state.
- *
- * If `items` is omitted, a built-in default navigation (calculator / converter / docs) is rendered. The sidebar's own expand vs. compact (icon-only) state is toggled by calling the exported `toggleSideNavigation()` (e.g. from a hamburger button) and is persisted at the xl breakpoint under localStorage key `side-nav-xl-state`; on smaller widths the bar is icon-only and temporarily expands on hover.
- *
- * Example: `<SideNavigationLayout items={[{ href: '/home', title: 'Home', icon: IconHome }, { id: 'tools', title: 'Tools', defaultExpanded: true, items: [{ href: '/calc', exactHref: '/calc', title: 'Calculator', icon: IconCalc }] }]}> <Header onHamburgerClick={toggleSideNavigation}>...</Header> <div>Page content</div> </SideNavigationLayout>`
- */
-export const styles = tv({
-    base: '',
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {},
-});
-/** Type guard: true when an entry is a {@link SideNavigationGroup} (has an `items` array). */
-export function isSideNavigationGroup(entry) {
-    return Array.isArray(entry.items);
-}
-export const SCREEN_BREAK_POINTS = {
-    sm: 640,
-    md: 768,
-    lg: 1024,
-    xl: 1280,
-};
-const SIDE_NAV_XL_STATE_KEY = 'side-nav-xl-state';
-const SIDE_NAV_GROUP_STATE_KEY = 'side-nav-group-state';
-export function loadGroupStates() {
-    try {
-        const raw = localStorage.getItem(SIDE_NAV_GROUP_STATE_KEY);
-        return raw ? JSON.parse(raw) : {};
-    }
-    catch {
-        return {};
-    }
-}
-export function saveGroupStates(states) {
-    localStorage.setItem(SIDE_NAV_GROUP_STATE_KEY, JSON.stringify(states));
-}
-export function saveXlSideNavState(state) {
-    if (state === undefined) {
-        localStorage.removeItem(SIDE_NAV_XL_STATE_KEY);
-    }
-    else {
-        localStorage.setItem(SIDE_NAV_XL_STATE_KEY, state);
-    }
-}
-export function loadXlSideNavState() {
-    return localStorage.getItem(SIDE_NAV_XL_STATE_KEY) ?? undefined;
-}
-export function restoreSideNavStateForXl() {
-    const screenWidth = getScreenWidth();
-    if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
-        const saved = loadXlSideNavState();
-        setSideNavState(saved);
-    }
-}
-export const mainLayout = () => document?.getElementById('side-nav_main-layout');
-export const getSideNavState = () => {
-    return mainLayout()?.getAttribute('data-side-nav-state') || undefined;
-};
-export const setSideNavState = (state) => {
-    if (state !== undefined) {
-        mainLayout()?.setAttribute('data-side-nav-state', state);
-    }
-    else {
-        mainLayout()?.removeAttribute('data-side-nav-state');
-    }
-};
-export function getScreenWidth() {
-    return Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-}
-export function toggleSideNavigation() {
-    let screenWidth = getScreenWidth();
-    let currentSideNavState = getSideNavState();
-    let state;
-    if (screenWidth < SCREEN_BREAK_POINTS.md) {
-        state = currentSideNavState !== 'expand' ? "expand" : undefined;
-    }
-    else if (screenWidth >= SCREEN_BREAK_POINTS.md && screenWidth < SCREEN_BREAK_POINTS.xl) {
-        state = currentSideNavState !== 'expand' ? "expand" : undefined;
-    }
-    else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
-        state = currentSideNavState === undefined ? "compact" : undefined;
-        saveXlSideNavState(state);
-    }
-    setSideNavState(state);
-}

package/dist/components/side-navigation/SideNavigation.svelte

@@ -1,143 +0,0 @@
-<script lang="ts">import { onMount } from "svelte";
-import { mainLayout, SCREEN_BREAK_POINTS, setSideNavState, restoreSideNavStateForXl, isSideNavigationGroup, loadGroupStates, saveGroupStates, toggleSideNavigation } from "./SideNavigation";
-import { clickOutside } from "../../actions/clickOutside";
-import { Button } from "../button";
-import { IconCoinConvert, IconHamburger } from "../icons";
-import { BrandLogo } from "../brand-logo";
-import SideNavItem from "./SideNavigationItem.svelte";
-import SideNavGroup from "./SideNavigationGroup.svelte";
-import IconBook from "../icons/IconBook.svelte";
-import IconTransform from "../icons/IconTransform.svelte";
-import IconCalculator from "../icons/IconCalculator.svelte";
-import { m } from '../../paraglide/messages.js';
-import { getGlobalContext } from "../tera-ui-context/global-context";
-import { SupportedLanguage as CalculatorSupportedLanguage } from "../../tera-i18n/projects/tera-calculator/supported-language";
-import { SupportedLanguage as ConverterSupportedLanguage } from "../../tera-i18n/projects/tera-converter/supported-language";
-let { children, sideNavHref, language, items, bottomChildren, ...props } = $props();
-function handleClickOutside() {
-    let screenWidth = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
-    if (screenWidth < SCREEN_BREAK_POINTS.md) {
-        setSideNavState(undefined);
-    }
-    else if (screenWidth >= SCREEN_BREAK_POINTS.md && screenWidth < SCREEN_BREAK_POINTS.xl) {
-        setSideNavState(undefined);
-    }
-    else if (screenWidth >= SCREEN_BREAK_POINTS.xl) {
-    }
-}
-function handleHover(isHover) {
-    let temporaryExpand = isHover ? true : undefined;
-    if (temporaryExpand) {
-        mainLayout()?.setAttribute('data-side-nav-temporary-expand', temporaryExpand.toString());
-    }
-    else {
-        mainLayout()?.removeAttribute('data-side-nav-temporary-expand');
-    }
-}
-let globalContext = getGlobalContext();
-const resolvedSideNavHref = $derived(sideNavHref || globalContext?.sideNavHref);
-const resolvedLanguage = $derived(language || globalContext?.language || 'en');
-const langPath = $derived((resolvedLanguage === 'en') ? '' : `/${resolvedLanguage}`);
-const langForCalculator = $derived((resolvedLanguage && CalculatorSupportedLanguage.includes(resolvedLanguage)) ? resolvedLanguage : 'en');
-const langPathForCalculator = $derived((langForCalculator === 'en') ? '' : `/${langForCalculator}`);
-const langForConverter = $derived((resolvedLanguage && ConverterSupportedLanguage.includes(resolvedLanguage)) ? resolvedLanguage : 'en');
-const langPathForConverter = $derived((langForConverter === 'en') ? '' : `/${langForConverter}`);
-const NAV_ITEM = $derived(items ?? [
-    {
-        href: `/calculator${langPathForCalculator}`,
-        exactHref: '/calculator',
-        icon: IconCalculator,
-        title: m.text_calces_scientific_calculator(),
-    },
-    {
-        href: `/convert${langPathForConverter}`,
-        exactHref: '/convert',
-        icon: IconTransform,
-        title: m.text_unit_converter(),
-    },
-    {
-        href: `/convert${langPathForConverter}/currency`,
-        exactHref: '/convert/currency',
-        icon: IconCoinConvert,
-        title: m.text_currency_converter(),
-    },
-    {
-        href: '/docs/calculator-usages/calces',
-        icon: IconBook,
-        title: m.text_calces_documentation(),
-    },
-]);
-function isSelected(item) {
-    return (item.exactHref ?? item.href) === resolvedSideNavHref;
-}
-let groupStates = $state({});
-function toggleGroup(id) {
-    groupStates[id] = !groupStates[id];
-    saveGroupStates(groupStates);
-}
-onMount(() => {
-    restoreSideNavStateForXl();
-    const saved = loadGroupStates();
-    for (const entry of NAV_ITEM) {
-        if (!isSideNavigationGroup(entry))
-            continue;
-        const hasActiveChild = entry.items.some(isSelected);
-        if (entry.id in saved) {
-            groupStates[entry.id] = saved[entry.id];
-        }
-        else {
-            groupStates[entry.id] = entry.defaultExpanded ?? false;
-        }
-        // Force-expand the group containing the active route.
-        if (hasActiveChild) {
-            groupStates[entry.id] = true;
-        }
-    }
-});
-</script>
-
-<nav class="side-nav_main-side-bar grid grid-rows-[auto_1fr_auto]"
-     use:clickOutside
-     onclick_outside={handleClickOutside}
->
-    <div class="flex mt-2 gap-1 items-center">
-        <Button variant="ghost" ring={false}
-                aria-label="Toggle side navigation"
-                onclick={toggleSideNavigation}
-        >
-            <IconHamburger/>
-        </Button>
-        <div class="sm-hidden">
-            <BrandLogo/>
-        </div>
-    </div>
-    <ul class="mt-12"
-        onmouseenter={() => {
-                handleHover(true)
-             }}
-        onmouseleave={() => {
-                handleHover(false)
-             }}
-    >
-        {#each NAV_ITEM as entry (isSideNavigationGroup(entry) ? entry.id : entry.href)}
-            {#if isSideNavigationGroup(entry)}
-                <SideNavGroup
-                        group={entry}
-                        expanded={groupStates[entry.id]}
-                        onToggle={() => toggleGroup(entry.id)}
-                        {isSelected}
-                />
-            {:else}
-                <SideNavItem href={entry.href} class={isSelected(entry) ? 'selected' : ''}>
-                    {#snippet icon()}
-                        {#if entry.icon}
-                            <entry.icon/>
-                        {/if}
-                    {/snippet}
-                    {entry.title}
-                </SideNavItem>
-            {/if}
-        {/each}
-    </ul>
-    {@render bottomChildren?.()}
-</nav>

package/dist/components/side-navigation/SideNavigation.svelte.d.ts

@@ -1,4 +0,0 @@
-import { type SideNavigationProps } from "./SideNavigation";
-declare const SideNavigation: import("svelte").Component<SideNavigationProps, {}, "">;
-type SideNavigation = ReturnType<typeof SideNavigation>;
-export default SideNavigation;