tera-system-ui 0.1.63 → 0.1.66

package/dist/components/icons/IconMoon.svelte

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

package/dist/components/icons/IconPointFilled.svelte

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

package/dist/components/icons/IconSearch.svelte

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

package/dist/components/icons/IconSettings.svelte

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

package/dist/components/icons/IconSun.svelte

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

package/dist/components/icons/IconSwitchHorizontal.svelte

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

package/dist/components/icons/IconSwitchVertical.svelte

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

package/dist/components/icons/IconTransform.svelte

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

package/dist/components/icons/IconX.svelte

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

package/dist/components/input/Input.d.ts

@@ -20,7 +20,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         error: string;
         warning: string;
     };
-}, undefined, "w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-neutral-token-13 placeholder:text-neutral-token-7", {
+}, undefined, "w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-text-primary placeholder:text-text-tertiary transition-[border-color,box-shadow,background-color] ease-ui duration-150", {
     variant: {
         outlined: string;
         filled: string;
@@ -58,7 +58,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         error: string;
         warning: string;
     };
-}, undefined, "w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-neutral-token-13 placeholder:text-neutral-token-7", unknown, unknown, undefined>>;
+}, undefined, "w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-text-primary placeholder:text-text-tertiary transition-[border-color,box-shadow,background-color] ease-ui duration-150", unknown, unknown, undefined>>;
 type InputVariants = VariantProps<typeof styles>;
 export interface InputProps extends Omit<HTMLInputAttributes, 'disabled' | 'size' | 'value' | 'prefix'>, InputVariants {
     children?: Snippet;

package/dist/components/input/Input.js

@@ -1,36 +1,36 @@
 import { tv } from "tailwind-variants";
 export const styles = tv({
-    base: 'w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-neutral-token-13 placeholder:text-neutral-token-7',
+    base: 'w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-text-primary placeholder:text-text-tertiary transition-[border-color,box-shadow,background-color] ease-ui duration-150',
     variants: {
         variant: {
-            outlined: 'border border-neutral-token-5 bg-neutral-token-1 hover:border-primary-500 focus:border-primary-600 focus:shadow-[0_0_0_2px_rgba(59,130,246,0.1)] transition-all duration-200',
-            filled: 'bg-neutral-token-3 border border-transparent hover:bg-neutral-token-4 focus:bg-neutral-token-1 focus:border-primary-600 focus:shadow-[0_0_0_2px_rgba(59,130,246,0.1)] transition-all duration-200',
-            borderless: 'bg-transparent border-0 hover:bg-neutral-token-2 focus:bg-neutral-token-2 transition-all duration-200',
+            outlined: 'border border-border-default bg-surface-control hover:border-interactive focus:border-interactive-hover focus:shadow-focus',
+            filled: 'bg-surface-sunken border border-transparent hover:bg-surface-hover focus:bg-surface focus:border-interactive-hover focus:shadow-focus',
+            borderless: 'bg-transparent border-0 hover:bg-surface-raised focus:bg-surface-raised',
         },
         disabled: {
-            true: 'cursor-not-allowed bg-neutral-token-3 text-neutral-token-7 border-neutral-token-5',
+            true: 'cursor-not-allowed bg-surface-sunken text-text-disabled border-border-default',
             false: 'cursor-text',
         },
         size: {
             sm: 'h-6 px-3 text-sm',
-            md: 'h-8 px-3 text-sm',
+            md: 'h-9 px-3 text-sm',
             lg: 'h-10 px-3 text-base',
         },
         status: {
-            error: 'border-error-500 hover:border-error-400 focus:border-error-500 focus:shadow-[0_0_0_2px_rgba(239,68,68,0.1)]',
-            warning: 'border-warning-500 hover:border-warning-400 focus:border-warning-500 focus:shadow-[0_0_0_2px_rgba(249,115,22,0.1)]',
+            error: 'border-error-default hover:border-error-hover focus:border-error-default focus:shadow-focus-error',
+            warning: 'border-warning-default hover:border-warning-hover focus:border-warning-default focus:shadow-focus-warning',
         },
     },
     compoundVariants: [
         {
             variant: 'outlined',
             disabled: true,
-            class: 'hover:border-neutral-token-5'
+            class: 'hover:border-border-default'
         },
         {
             variant: 'filled',
             disabled: true,
-            class: 'hover:bg-neutral-token-3'
+            class: 'hover:bg-surface-sunken'
         },
         {
             variant: 'borderless',

package/dist/components/input/Input.svelte

@@ -1,31 +1,15 @@
-<script lang="ts">
-    import {type InputProps, styles} from "./Input";
-    import {IconX} from "../icons";
-
-    let {
-        children,
-        class: className,
-        value = $bindable(),
-        ref = $bindable(),
-        size = 'md',
-        disabled,
-        variant = 'outlined',
-        prefix,
-        suffix,
-        allowClear,
-        status,
-        ...props
-    }: InputProps = $props();
-
-    function clearInput() {
-        value = '';
-        ref?.focus();
-    }
+<script lang="ts">import { styles } from "./Input";
+import { IconX } from "../icons";
+let { children, class: className, value = $bindable(), ref = $bindable(), size = 'md', disabled, variant = 'outlined', prefix, suffix, allowClear, status, ...props } = $props();
+function clearInput() {
+    value = '';
+    ref?.focus();
+}
 </script>
 
 <div class="relative inline-flex w-full">
     {#if prefix}
-        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-token-7 pointer-events-none">
+        <span class="absolute left-3 top-1/2 -translate-y-1/2 text-text-tertiary pointer-events-none">
             {@render prefix()}
         </span>
     {/if}
@@ -45,13 +29,13 @@
         <button
                 type="button"
                 onclick={clearInput}
-                class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-token-7 hover:text-neutral-token-10 transition-colors"
+                class="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary hover:text-neutral-token-10 transition-colors"
                 tabindex="-1"
         >
             <IconX class="size-3.5"/>
         </button>
     {:else if suffix}
-        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-neutral-token-7 pointer-events-none">
+        <span class="absolute right-3 top-1/2 -translate-y-1/2 text-text-tertiary pointer-events-none">
             {@render suffix()}
         </span>
     {/if}

package/dist/components/label/Label.d.ts

@@ -10,7 +10,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     required: {
         true: string;
     };
-}, undefined, "text-sm font-medium text-neutral-token-13 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50", {
+}, undefined, "text-sm font-medium text-text-primary leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50", {
     size: {
         sm: string;
         md: string;
@@ -28,7 +28,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     required: {
         true: string;
     };
-}, undefined, "text-sm font-medium text-neutral-token-13 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50", unknown, unknown, undefined>>;
+}, undefined, "text-sm font-medium text-text-primary leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50", unknown, unknown, undefined>>;
 type LabelVariants = VariantProps<typeof styles>;
 export interface LabelProps extends HTMLLabelAttributes, LabelVariants {
     children?: Snippet;

package/dist/components/label/Label.js

@@ -1,6 +1,6 @@
 import { tv } from "tailwind-variants";
 export const styles = tv({
-    base: 'text-sm font-medium text-neutral-token-13 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+    base: 'text-sm font-medium text-text-primary leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
     variants: {
         size: {
             sm: 'text-xs',
@@ -8,7 +8,7 @@ export const styles = tv({
             lg: 'text-base',
         },
         required: {
-            true: "after:content-['*'] after:ml-0.5 after:text-error-500",
+            true: "after:content-['*'] after:ml-0.5 after:text-error-default",
         },
     },
     compoundVariants: [],

package/dist/components/label/Label.svelte

@@ -1,15 +1,7 @@
-<script lang="ts">
-    import { Label as LabelPrimitive } from "bits-ui";
-    import { cn } from "../../utils";
-    import { type LabelProps, styles } from "./Label";
-
-    let {
-        ref = $bindable(null),
-        class: className,
-        size = 'md',
-        required,
-        ...restProps
-    }: LabelProps = $props();
+<script lang="ts">import { Label as LabelPrimitive } from "bits-ui";
+import { cn } from "../../utils";
+import { styles } from "./Label";
+let { ref = $bindable(null), class: className, size = 'md', required, ...restProps } = $props();
 </script>
 
 <LabelPrimitive.Root

package/dist/components/language-picker-button/LanguagePickerButton.svelte

@@ -1,43 +1,24 @@
-<script lang="ts">
-    import {type LanguagePickerButtonProps} from "./LanguagePickerButton";
-    import {IconLanguage} from "../icons";
-    import {Dialog} from "../dialog";
-    import IconCheck from "../icons/IconCheck.svelte";
-    import {getGlobalContext} from "../tera-ui-context/global-context";
-    import {m} from '../../paraglide/messages.js'
-    import {ALL_LANGUAGE_LIST} from "../../tera-i18n/projects/common/all-language-data";
-    import {cn} from "../../utils";
-
-    let {
-        children,
-        onLangSelect,
-        open = $bindable(false),
-        language,
-        supportLanguages,
-        basePath,
-        ...props
-    }: LanguagePickerButtonProps & {
-        onLangSelect: (langCode: string) => void
-    } = $props();
-
-    let context = getGlobalContext()
-
-    supportLanguages = supportLanguages ?? context.supportLanguages!;
-    language = language ?? context.language
-    basePath = basePath ?? context.basePath
-
-
-    let currentLangItem = $derived(ALL_LANGUAGE_LIST.find(l => l.code === language)!)
-    let langList = $derived([currentLangItem, ...ALL_LANGUAGE_LIST.filter(lang => supportLanguages!.includes(lang.code) && lang.code !== language)])
-
-
-    function getFlagUrl(flag: string) {
-        if (flag === 'spain') {
-            return `${basePath ?? ''}/world-flags/${flag}.png`
-        }
-        return `${basePath ?? ''}/world-flags/${flag}.svg`
-    }
-
+<script lang="ts">import {} from "./LanguagePickerButton";
+import { IconLanguage } from "../icons";
+import { Dialog } from "../dialog";
+import IconCheck from "../icons/IconCheck.svelte";
+import { getGlobalContext } from "../tera-ui-context/global-context";
+import { m } from '../../paraglide/messages.js';
+import { ALL_LANGUAGE_LIST } from "../../tera-i18n/projects/common/all-language-data";
+import { cn } from "../../utils";
+let { children, onLangSelect, open = $bindable(false), language, supportLanguages, basePath, ...props } = $props();
+let context = getGlobalContext();
+const resolvedSupportLanguages = $derived(supportLanguages ?? context.supportLanguages ?? ['en']);
+const resolvedLanguage = $derived(language ?? context.language ?? 'en');
+const resolvedBasePath = $derived(basePath ?? context.basePath ?? '');
+let currentLangItem = $derived(ALL_LANGUAGE_LIST.find(l => l.code === resolvedLanguage));
+let langList = $derived([currentLangItem, ...ALL_LANGUAGE_LIST.filter(lang => resolvedSupportLanguages.includes(lang.code) && lang.code !== resolvedLanguage)]);
+function getFlagUrl(flag) {
+    if (flag === 'spain') {
+        return `${resolvedBasePath}/world-flags/${flag}.png`;
+    }
+    return `${resolvedBasePath}/world-flags/${flag}.svg`;
+}
 </script>
 
 <!--add component here-->
@@ -58,13 +39,13 @@
                 })
         }
     >
-        {#each langList as lang}
+        {#each langList as lang (lang.code)}
             <button class="w-[80vw] sm:w-full flex gap-1 items-center justify-between text-start px-1 py-1 pe-2 rounded-full bg-neutral-token-3 sm:max-w-[40rem]"
                     onclick={() => {
                         onLangSelect?.(lang.code)
                         open = false
                     }}
-                    data-selected={lang.code === language ? '' : undefined}>
+                    data-selected={lang.code === resolvedLanguage ? '' : undefined}>
                 <div class="flex items-center gap-2">
                     <img class="size-8 flag-img" src={getFlagUrl(lang.flag)} alt={currentLangItem?.flag} loading="lazy">
                     {lang.label}

package/dist/components/light-dark-toggle/LightDarkToggle.svelte

@@ -1,29 +1,24 @@
-<script lang="ts">
-    import {type LightDarkToggleProps} from "./LightDarkToggle";
-    import {Button} from "../button";
-    import IconSun from "../icons/IconSun.svelte";
-    import IconMoon from "../icons/IconMoon.svelte";
-
-    let {children, ...props}: LightDarkToggleProps = $props();
-
-    // $effect(() => {
-    //     const htmlElement = document.documentElement;
-    //     // Check for saved theme preference
-    //     const currentTheme = localStorage.getItem('theme');
-    //     if (currentTheme === 'dark') {
-    //         htmlElement.classList.add('dark');
-    //     } else {
-    //         htmlElement.classList.remove('dark');
-    //     }
-    // })
-
-    function toggleLightDarkTheme() {
-        const htmlElement = document.documentElement;
-
-        htmlElement.classList.toggle('dark');
-        const theme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
-        localStorage.setItem('theme', theme);
-    }
+<script lang="ts">import {} from "./LightDarkToggle";
+import { Button } from "../button";
+import IconSun from "../icons/IconSun.svelte";
+import IconMoon from "../icons/IconMoon.svelte";
+let { children, ...props } = $props();
+// $effect(() => {
+//     const htmlElement = document.documentElement;
+//     // Check for saved theme preference
+//     const currentTheme = localStorage.getItem('theme');
+//     if (currentTheme === 'dark') {
+//         htmlElement.classList.add('dark');
+//     } else {
+//         htmlElement.classList.remove('dark');
+//     }
+// })
+function toggleLightDarkTheme() {
+    const htmlElement = document.documentElement;
+    htmlElement.classList.toggle('dark');
+    const theme = htmlElement.classList.contains('dark') ? 'dark' : 'light';
+    localStorage.setItem('theme', theme);
+}
 </script>
 
 <!--add component here-->

package/dist/components/marketing/FeatureCard.svelte

@@ -0,0 +1,37 @@
+<script lang="ts">let { icon, title, description, variant = 'default', href, class: className = '', } = $props();
+const variantClass = {
+    default: 'bg-surface-raised shadow-sm border border-transparent',
+    elevated: 'bg-surface-raised shadow-md border border-transparent',
+    bordered: 'bg-surface-raised border border-border-default',
+    'gradient-border': 'bg-surface-raised border-2 border-transparent gradient-border-card',
+};
+const tag = $derived(href ? 'a' : 'div');
+export {};
+</script>
+
+<svelte:element
+    this={tag}
+    href={href}
+    class="block p-6 rounded-container transition-[box-shadow,transform] ease-spring duration-300 hover:shadow-md hover:-translate-y-0.5 {variantClass[variant]} {className}"
+>
+    {#if icon}
+        <div class="mb-4 size-12 flex items-center justify-center rounded-xl bg-interactive-subtle text-interactive">
+            {@render icon()}
+        </div>
+    {/if}
+
+    <h3 class="font-semibold text-base text-text-primary mb-1.5">{title}</h3>
+
+    {#if description}
+        <p class="text-sm text-text-secondary leading-relaxed">{description}</p>
+    {/if}
+</svelte:element>
+
+<style>
+    .gradient-border-card {
+        background-image: linear-gradient(var(--color-surface-raised), var(--color-surface-raised)),
+                          conic-gradient(from 0deg, var(--color-primary-500), #7C3AED, var(--color-primary-500));
+        background-origin: border-box;
+        background-clip: padding-box, border-box;
+    }
+</style>

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

@@ -0,0 +1,13 @@
+import type { Snippet } from 'svelte';
+type FeatureVariant = 'default' | 'elevated' | 'bordered' | 'gradient-border';
+type $$ComponentProps = {
+    icon?: Snippet;
+    title: string;
+    description?: string;
+    variant?: FeatureVariant;
+    href?: string;
+    class?: string;
+};
+declare const FeatureCard: import("svelte").Component<$$ComponentProps, {}, "">;
+type FeatureCard = ReturnType<typeof FeatureCard>;
+export default FeatureCard;

package/dist/components/marketing/PricingCard.svelte

@@ -0,0 +1,48 @@
+<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

@@ -0,0 +1,15 @@
+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

@@ -0,0 +1,14 @@
+<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

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,24 @@
+<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

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,4 @@
+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';