tera-system-ui 0.1.64 → 0.1.67

package/dist/components/ai/ChatBubble.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">let { role, content, avatar, timestamp, status = 'sent', class: className = '', } = $props();
+const isUser = $derived(role === 'user');
+export {};
+</script>
+
+<div
+    class="flex gap-2 animate-in slide-in-from-bottom-2 fade-in duration-300 ease-spring {isUser ? 'flex-row-reverse' : 'flex-row'} {className}"
+>
+    {#if avatar}
+        <div class="shrink-0 size-8">{@render avatar()}</div>
+    {/if}
+
+    <div class="flex flex-col gap-1 max-w-[75%] {isUser ? 'items-end' : 'items-start'}">
+        <div
+            class="px-4 py-2.5 text-sm leading-relaxed {isUser
+                ? 'bg-interactive-subtle text-text-primary rounded-2xl rounded-br-sm'
+                : 'bg-surface-raised text-text-primary rounded-2xl rounded-bl-sm border border-border-default'}"
+        >
+            {#if typeof content === 'string'}
+                {content}
+            {:else}
+                {@render content()}
+            {/if}
+        </div>
+
+        <div class="flex items-center gap-1.5 text-[10px] text-text-tertiary">
+            {#if timestamp}<span>{timestamp}</span>{/if}
+            {#if isUser && status === 'sending'}
+                <span class="italic">Sending…</span>
+            {:else if isUser && status === 'error'}
+                <span class="text-error-500">Failed to send</span>
+            {/if}
+        </div>
+    </div>
+</div>

package/dist/components/ai/ChatBubble.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { Snippet } from 'svelte';
+type $$ComponentProps = {
+    role: 'user' | 'assistant';
+    content: string | Snippet;
+    avatar?: Snippet;
+    timestamp?: string;
+    status?: 'sending' | 'sent' | 'error';
+    class?: string;
+};
+declare const ChatBubble: import("svelte").Component<$$ComponentProps, {}, "">;
+type ChatBubble = ReturnType<typeof ChatBubble>;
+export default ChatBubble;

package/dist/components/ai/PromptInput.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">import ThinkingLoader from './ThinkingLoader.svelte';
+import SuggestionChips from './SuggestionChips.svelte';
+let { value = $bindable(''), onsubmit, placeholder = 'Ask me anything…', maxLength, loading, disabled, suggestions = [], class: className = '', } = $props();
+function handleKeydown(e) {
+    if (e.key === 'Enter' && !e.shiftKey && !loading && value.trim()) {
+        e.preventDefault();
+        submit();
+    }
+}
+function submit() {
+    if (!value.trim() || loading)
+        return;
+    onsubmit?.(value);
+}
+function handleSuggestion(s) {
+    value = Array.isArray(s) ? s[0] : s;
+}
+</script>
+
+<div class="flex flex-col gap-2 {className}">
+    {#if suggestions.length > 0}
+        <SuggestionChips {suggestions} onSelect={handleSuggestion} />
+    {/if}
+
+    <div
+        class="relative flex items-end gap-2 border rounded bg-surface transition-[border-color,box-shadow] ease-ui duration-150
+            {loading ? 'border-interactive shadow-glow' : 'border-border-default focus-within:border-interactive focus-within:shadow-focus'}"
+    >
+        <textarea
+            class="flex-1 resize-none bg-transparent outline-none px-3 py-2.5 text-sm text-text-primary placeholder:text-text-tertiary min-h-[42px] max-h-40"
+            {placeholder}
+            maxlength={maxLength}
+            {disabled}
+            bind:value
+            onkeydown={handleKeydown}
+            rows={1}
+        ></textarea>
+
+        <div class="shrink-0 pb-2 pr-2">
+            {#if loading}
+                <ThinkingLoader size="sm" />
+            {:else}
+                <button
+                    type="button"
+                    class="size-7 rounded-full flex items-center justify-center transition-colors ease-ui duration-150
+                        {value.trim() ? 'bg-interactive text-interactive-on' : 'bg-surface-hover text-text-tertiary cursor-not-allowed'}"
+                    onclick={submit}
+                    disabled={!value.trim() || disabled}
+                    aria-label="Send"
+                >
+                    <svg class="size-3.5" viewBox="0 0 14 14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M7 12V2M2 7l5-5 5 5"/>
+                    </svg>
+                </button>
+            {/if}
+        </div>
+    </div>
+</div>

package/dist/components/ai/PromptInput.svelte.d.ts

@@ -0,0 +1,13 @@
+type $$ComponentProps = {
+    value?: string;
+    onsubmit?: (value: string) => void;
+    placeholder?: string;
+    maxLength?: number;
+    loading?: boolean;
+    disabled?: boolean;
+    suggestions?: string[];
+    class?: string;
+};
+declare const PromptInput: import("svelte").Component<$$ComponentProps, {}, "value">;
+type PromptInput = ReturnType<typeof PromptInput>;
+export default PromptInput;

package/dist/components/ai/StreamText.svelte

@@ -0,0 +1,41 @@
+<script lang="ts">"use strict";
+let { text, speed = 'normal', onComplete, cursor = true, class: className = '', } = $props();
+const msPerChar = { slow: 30, normal: 15, fast: 5 };
+let displayed = $state('');
+let done = $state(false);
+let timer;
+$effect(() => {
+    displayed = '';
+    done = false;
+    let i = 0;
+    clearInterval(timer);
+    timer = setInterval(() => {
+        if (i < text.length) {
+            displayed += text[i];
+            i++;
+        }
+        else {
+            clearInterval(timer);
+            done = true;
+            onComplete?.();
+        }
+    }, msPerChar[speed]);
+    return () => clearInterval(timer);
+});
+</script>
+
+<span aria-live="polite" class={className}>
+    {displayed}{#if cursor && !done}<span class="cursor-blink">|</span>{/if}
+</span>
+
+<style>
+    .cursor-blink {
+        animation: blink 530ms step-end infinite;
+        margin-left: 1px;
+    }
+
+    @keyframes blink {
+        0%, 100% { opacity: 1; }
+        50%       { opacity: 0; }
+    }
+</style>

package/dist/components/ai/StreamText.svelte.d.ts

@@ -0,0 +1,11 @@
+type StreamSpeed = 'slow' | 'normal' | 'fast';
+type $$ComponentProps = {
+    text: string;
+    speed?: StreamSpeed;
+    onComplete?: () => void;
+    cursor?: boolean;
+    class?: string;
+};
+declare const StreamText: import("svelte").Component<$$ComponentProps, {}, "">;
+type StreamText = ReturnType<typeof StreamText>;
+export default StreamText;

package/dist/components/ai/SuggestionChips.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">"use strict";
+let { suggestions, onSelect, label, multiple, class: className = '', } = $props();
+let selected = $state([]);
+function toggle(s) {
+    if (multiple) {
+        selected = selected.includes(s) ? selected.filter(x => x !== s) : [...selected, s];
+        onSelect?.(selected);
+    }
+    else {
+        selected = [s];
+        onSelect?.(s);
+    }
+}
+</script>
+
+<div class="flex flex-col gap-2 {className}">
+    {#if label}
+        <p class="text-xs text-text-tertiary">{label}</p>
+    {/if}
+    <div class="flex flex-wrap gap-2 overflow-x-auto">
+        {#each suggestions as s (s)}
+            <button
+                type="button"
+                class="inline-flex items-center px-3 py-1.5 rounded-full text-xs font-medium border transition-[background-color,border-color,color] ease-ui duration-150 whitespace-nowrap
+                    {selected.includes(s)
+                        ? 'bg-interactive-subtle border-interactive text-primary-700'
+                        : 'bg-surface-raised border-border-default text-text-secondary hover:bg-surface-hover hover:border-border-strong'}"
+                onclick={() => toggle(s)}
+            >
+                {s}
+            </button>
+        {/each}
+    </div>
+</div>

package/dist/components/ai/SuggestionChips.svelte.d.ts

@@ -0,0 +1,10 @@
+type $$ComponentProps = {
+    suggestions: string[];
+    onSelect?: (value: string | string[]) => void;
+    label?: string;
+    multiple?: boolean;
+    class?: string;
+};
+declare const SuggestionChips: import("svelte").Component<$$ComponentProps, {}, "">;
+type SuggestionChips = ReturnType<typeof SuggestionChips>;
+export default SuggestionChips;

package/dist/components/ai/ThinkingLoader.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">"use strict";
+let { variant = 'dots', size = 'md', label, class: className = '', } = $props();
+const dotSize = { sm: 'size-1.5', md: 'size-2' };
+</script>
+
+<div
+    class="inline-flex items-center gap-2 {className}"
+    aria-label="AI is thinking"
+    role="status"
+>
+    <div class="flex items-center gap-1">
+        {#each [0, 1, 2] as i (i)}
+            <span
+                class="rounded-full bg-interactive {dotSize[size]}"
+                style="animation: {variant === 'pulse' ? `pulse-dot 800ms ${i * 160}ms ease-in-out infinite` : `wave-dot 1.2s ${i * 150}ms ease-[var(--ease-spring)] infinite`}"
+            ></span>
+        {/each}
+    </div>
+    {#if label}
+        <span class="text-xs text-text-tertiary">{label}</span>
+    {/if}
+</div>
+
+<style>
+    @keyframes wave-dot {
+        0%, 100% { transform: translateY(0); }
+        40%       { transform: translateY(-6px); }
+    }
+
+    @keyframes pulse-dot {
+        0%, 100% { opacity: 0.3; }
+        50%       { opacity: 1; }
+    }
+</style>

package/dist/components/ai/ThinkingLoader.svelte.d.ts

@@ -0,0 +1,11 @@
+type ThinkingVariant = 'dots' | 'wave' | 'pulse';
+type ThinkingSize = 'sm' | 'md';
+type $$ComponentProps = {
+    variant?: ThinkingVariant;
+    size?: ThinkingSize;
+    label?: string;
+    class?: string;
+};
+declare const ThinkingLoader: import("svelte").Component<$$ComponentProps, {}, "">;
+type ThinkingLoader = ReturnType<typeof ThinkingLoader>;
+export default ThinkingLoader;

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

@@ -0,0 +1,5 @@
+export { default as ChatBubble } from './ChatBubble.svelte';
+export { default as StreamText } from './StreamText.svelte';
+export { default as ThinkingLoader } from './ThinkingLoader.svelte';
+export { default as SuggestionChips } from './SuggestionChips.svelte';
+export { default as PromptInput } from './PromptInput.svelte';

package/dist/components/ai/index.js

@@ -0,0 +1,5 @@
+export { default as ChatBubble } from './ChatBubble.svelte';
+export { default as StreamText } from './StreamText.svelte';
+export { default as ThinkingLoader } from './ThinkingLoader.svelte';
+export { default as SuggestionChips } from './SuggestionChips.svelte';
+export { default as PromptInput } from './PromptInput.svelte';

package/dist/components/alert/Alert.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">let { variant = 'info', title, description, closable, icon = true, children, class: className = '', ...props } = $props();
+let visible = $state(true);
+const config = {
+    info: { bg: 'bg-information-50', border: 'border-l-4 border-information-500', icon: 'ℹ', iconColor: 'text-information-600', textColor: 'text-information-900' },
+    success: { bg: 'bg-success-50', border: 'border-l-4 border-success-500', icon: '✓', iconColor: 'text-success-600', textColor: 'text-success-900' },
+    warning: { bg: 'bg-warning-50', border: 'border-l-4 border-warning-500', icon: '⚠', iconColor: 'text-warning-600', textColor: 'text-warning-900' },
+    error: { bg: 'bg-error-50', border: 'border-l-4 border-error-500', icon: '✕', iconColor: 'text-error-600', textColor: 'text-error-900' },
+};
+const c = $derived(config[variant]);
+export {};
+</script>
+
+{#if visible}
+    <div
+        role="alert"
+        class="{c.bg} {c.border} rounded p-4 flex gap-3 {className}"
+        {...props}
+    >
+        {#if icon}
+            <span class="shrink-0 font-bold text-base leading-none mt-0.5 {c.iconColor}">{c.icon}</span>
+        {/if}
+        <div class="flex-1 min-w-0">
+            {#if title}
+                <p class="font-medium text-sm {c.textColor} mb-0.5">{title}</p>
+            {/if}
+            {#if typeof description === 'string'}
+                <p class="text-sm {c.textColor} opacity-85">{description}</p>
+            {:else if description}
+                {@render description()}
+            {:else if children}
+                <div class="text-sm {c.textColor} opacity-85">{@render children()}</div>
+            {/if}
+        </div>
+        {#if closable}
+            <button
+                type="button"
+                class="shrink-0 hover:opacity-60 transition-opacity {c.iconColor}"
+                onclick={() => visible = false}
+                aria-label="Close"
+            >
+                <svg class="size-4" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.5">
+                    <path d="M4 4l8 8M12 4l-8 8"/>
+                </svg>
+            </button>
+        {/if}
+    </div>
+{/if}

package/dist/components/alert/Alert.svelte.d.ts

@@ -0,0 +1,15 @@
+import type { Snippet } from 'svelte';
+type AlertVariant = 'info' | 'success' | 'warning' | 'error';
+type $$ComponentProps = {
+    variant?: AlertVariant;
+    title?: string;
+    description?: string | Snippet;
+    closable?: boolean;
+    icon?: boolean;
+    children?: Snippet;
+    class?: string;
+    [key: string]: unknown;
+};
+declare const Alert: import("svelte").Component<$$ComponentProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

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

@@ -0,0 +1 @@
+export { default as Alert } from './Alert.svelte';

package/dist/components/alert/index.js

@@ -0,0 +1 @@
+export { default as Alert } from './Alert.svelte';

package/dist/components/avatar/Avatar.svelte

@@ -1,28 +1,12 @@
-<script lang="ts">
-    import {type AvatarProps, styles} from "./Avatar";
-    import {getUserAvatarUrl} from "../../internal/service/user.service";
-    import {cn} from "../../utils/utils";
-
-    let {
-        children,
-        alt = 'Avatar',
-        size = 'md',
-        src,
-        class: className,
-        border = true,
-        ref = $bindable(),
-        userUid,
-        apiUrl,
-        ...props
-    }: AvatarProps = $props();
-
-    let isError = $state()
-
-    function handleErrorImage() {
-        isError = true
-    }
-
-    let imgUrl = $derived(src ? src : userUid ? getUserAvatarUrl(userUid, apiUrl) : undefined)
+<script lang="ts">import { styles } from "./Avatar";
+import { getUserAvatarUrl } from "../../internal/service/user.service";
+import { cn } from "../../utils/utils";
+let { children, alt = 'Avatar', size = 'md', src, class: className, border = true, ref = $bindable(), userUid, apiUrl, ...props } = $props();
+let isError = $state();
+function handleErrorImage() {
+    isError = true;
+}
+let imgUrl = $derived(src ? src : userUid ? getUserAvatarUrl(userUid, apiUrl) : undefined);
 </script>
 
 <div bind:this={ref}

package/dist/components/badge/Badge.d.ts

@@ -0,0 +1,52 @@
+import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        primary: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, "inline-flex items-center gap-1 rounded-full font-medium select-none", {
+    variant: {
+        default: string;
+        primary: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        primary: string;
+        success: string;
+        error: string;
+        warning: string;
+        info: string;
+    };
+    size: {
+        sm: string;
+        md: string;
+    };
+}, undefined, "inline-flex items-center gap-1 rounded-full font-medium select-none", unknown, unknown, undefined>>;
+type BadgeVariants = VariantProps<typeof styles>;
+export interface BadgeProps extends HTMLAttributes<HTMLSpanElement>, BadgeVariants {
+    children?: Snippet;
+    class?: string;
+    dot?: boolean;
+    closable?: boolean;
+    onclose?: () => void;
+}
+export {};

package/dist/components/badge/Badge.js

@@ -0,0 +1,22 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: 'inline-flex items-center gap-1 rounded-full font-medium select-none',
+    variants: {
+        variant: {
+            default: 'bg-surface-sunken text-text-secondary border border-border-default',
+            primary: 'bg-interactive-subtle text-interactive-text border border-interactive-border',
+            success: 'bg-success-subtle text-success-text border border-success-border',
+            error: 'bg-error-subtle text-error-text border border-error-border',
+            warning: 'bg-warning-subtle text-warning-text border border-warning-border',
+            info: 'bg-information-subtle text-information-text border border-information-border',
+        },
+        size: {
+            sm: 'px-2 py-0.5 text-[10px] leading-none',
+            md: 'px-2.5 py-1 text-[11px] leading-none uppercase tracking-wider',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        size: 'md',
+    },
+});

package/dist/components/badge/Badge.svelte

@@ -0,0 +1,22 @@
+<script lang="ts">import { styles } from './Badge.js';
+let { children, class: className, variant, size, dot, closable, onclose, ...props } = $props();
+</script>
+
+<span class={styles({ variant, size, className })} {...props}>
+    {#if dot}
+        <span class="size-1.5 rounded-full bg-current opacity-70"></span>
+    {/if}
+    {@render children?.()}
+    {#if closable}
+        <button
+            type="button"
+            class="ml-0.5 hover:opacity-70 transition-opacity leading-none"
+            onclick={onclose}
+            aria-label="Remove"
+        >
+            <svg class="size-2.5" viewBox="0 0 10 10" fill="none" stroke="currentColor" stroke-width="1.5">
+                <path d="M2 2l6 6M8 2l-6 6"/>
+            </svg>
+        </button>
+    {/if}
+</span>

package/dist/components/badge/Badge.svelte.d.ts

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

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

@@ -0,0 +1,2 @@
+export { default as Badge } from './Badge.svelte';
+export type { BadgeProps } from './Badge.js';

package/dist/components/badge/index.js

@@ -0,0 +1 @@
+export { default as Badge } from './Badge.svelte';

package/dist/components/brand-logo/BrandLogo.svelte

@@ -1,34 +1,36 @@
-<script lang="ts">
-    import {type BrandLogoProps, styles} from "./BrandLogo";
-
-    let {children, theme, shape, ...props}: BrandLogoProps = $props();
+<script lang="ts">import { styles } from "./BrandLogo";
+let { children, theme, shape, ...props } = $props();
 </script>
 
+<style>
+    .main-part-container, .second-part { fill: var(--color-brand-token-5); }
+    .main-part { fill: #ffffff; }
+</style>
 
 {#if shape === 'square'}
     <svg data-name="brand-logo" data-shape="square" class={styles({ theme, shape, ...props })} viewBox="0 0 56 56" fill="none" xmlns="http://www.w3.org/2000/svg">
         <title>MathDa</title>
         <path class="main-part-container"
               d="M43.633 0H12.151C5.44017 0 0 5.46124 0 12.198V43.802C0 50.5388 5.44017 56 12.151 56H43.633C50.3438 56 55.784 50.5388 55.784 43.802V12.198C55.784 5.46124 50.3438 0 43.633 0Z"
-              fill="#006FEE"/>
+              />
         <path class="main-part"
               d="M45.2665 42.2831C45.2665 43.7491 45.0507 44.7986 44.6192 45.4316C44.4297 45.7286 44.1819 45.9836 43.8908 46.1813C43.5998 46.3789 43.2717 46.5149 42.9266 46.5809C42.1878 46.718 41.4377 46.7849 40.6864 46.7808H14.9979C14.2878 46.7828 13.5792 46.7158 12.882 46.5809C12.5384 46.5106 12.212 46.3728 11.9216 46.1756C11.6311 45.9783 11.3823 45.7255 11.1894 45.4316C10.7413 44.7986 10.5172 43.7158 10.5172 42.1833C10.4908 41.4202 10.5576 40.6568 10.7163 39.91C10.7998 39.5266 10.9699 39.1675 11.2134 38.8604C11.4337 38.6233 11.6664 38.3981 11.9104 38.1857L25.1536 27.8398V28.1398L11.9607 17.8446C11.6465 17.5676 11.3628 17.2577 11.1143 16.9201C10.8889 16.5714 10.7365 16.1803 10.6663 15.7707C10.5509 15.0856 10.5009 14.3911 10.5172 13.6965C10.5172 12.1972 10.7413 11.1311 11.1894 10.4981C11.3855 10.2018 11.6383 9.94764 11.9332 9.75032C12.228 9.55301 12.559 9.41649 12.9068 9.34871C13.6291 9.21312 14.3625 9.14619 15.0973 9.14883H40.7858C41.5041 9.1477 42.2209 9.21462 42.9266 9.34871C43.2717 9.41476 43.5998 9.55075 43.8909 9.74837C44.1819 9.94599 44.4297 10.2011 44.6192 10.4981C45.0507 11.1311 45.2665 12.2139 45.2665 13.7466C45.2665 15.2459 45.0425 16.3121 44.5943 16.9453C44.395 17.2439 44.1381 17.4994 43.8388 17.6968C43.5395 17.8942 43.2039 18.0295 42.8518 18.0947C42.1376 18.228 41.4126 18.2949 40.6861 18.2946L26.5468 18.2946L34.4635 24.1416L35.2091 24.7412C35.5821 25.0596 35.887 25.4506 36.1052 25.8906C36.4031 26.5482 36.5397 27.268 36.5035 27.9895C36.5376 28.719 36.4012 29.4464 36.1052 30.1136C35.8938 30.5583 35.5978 30.9572 35.234 31.288C34.9875 31.5014 34.7299 31.7015 34.4624 31.8876L26.5974 37.6853H40.7858C41.5041 37.6841 42.2209 37.7511 42.9266 37.8851C43.2717 37.9512 43.5998 38.0872 43.8908 38.2848C44.1819 38.4824 44.4297 38.7375 44.6192 39.0345C45.0507 39.6677 45.2665 40.7506 45.2665 42.2831Z"
-              fill="white"/>
+              />
     </svg>
 {:else }
     <svg data-name="brand-logo" class={styles({ theme, shape, ...props })} viewBox="0 0 228 56" fill="none" xmlns="http://www.w3.org/2000/svg">
         <title>MathDa</title>
         <path class="second-part"
               d="M159.288 47.077C157.705 47.077 156.563 46.8368 155.864 46.3562C155.197 45.9224 154.722 45.2472 154.538 44.4711C154.349 43.6531 154.257 42.8157 154.262 41.976V13.3107C154.261 12.5108 154.335 11.7125 154.483 10.9265C154.558 10.5391 154.709 10.1705 154.927 9.84207C155.145 9.51368 155.426 9.23209 155.753 9.01367C156.453 8.51466 157.65 8.28363 159.343 8.3206H168.843C171.386 8.30614 173.905 8.81566 176.244 9.81763C178.536 10.7967 180.625 12.1977 182.403 13.9483C184.184 15.698 185.61 17.7789 186.6 20.0751C187.616 22.4186 188.133 24.9491 188.119 27.5048C188.137 30.1145 187.62 32.7001 186.6 35.1008C184.604 39.7936 180.886 43.5358 176.217 45.5523C173.835 46.5776 171.268 47.0968 168.678 47.077H159.288ZM164.369 36.9305H168.843C170.456 36.9425 172.041 36.5111 173.427 35.683C174.803 34.8748 175.953 33.7304 176.769 32.3562C177.601 30.9577 178.031 29.3553 178.012 27.7265C178.029 26.0893 177.599 24.4787 176.769 23.0691C175.959 21.6828 174.808 20.528 173.427 19.7147C172.023 18.8816 170.419 18.4502 168.788 18.4671H164.369V36.9305ZM227.113 40.0909C227.665 41.1998 227.96 42.1424 227.996 42.9186C228.019 43.2913 227.967 43.6647 227.843 44.017C227.72 44.3693 227.528 44.6933 227.278 44.9701C226.763 45.5615 225.934 46.1529 224.793 46.7444C223.026 47.5945 221.663 47.8625 220.706 47.5483C219.748 47.2341 218.846 46.1714 217.999 44.3602L208.61 25.0651L199.331 44.4156C198.447 46.1529 197.527 47.1787 196.57 47.4929C195.612 47.8071 194.268 47.5391 192.538 46.6889C191.601 46.2777 190.749 45.6948 190.025 44.9701C189.768 44.6972 189.569 44.3745 189.441 44.0217C189.312 43.6689 189.257 43.2935 189.279 42.9186C189.316 42.1424 189.61 41.1998 190.163 40.0909L204.026 11.2592C204.465 10.3754 205.145 9.6351 205.987 9.12456C206.786 8.60816 207.715 8.32943 208.665 8.3206C209.3 8.31507 209.929 8.43763 210.516 8.68099C211.096 8.92763 211.629 9.27483 212.09 9.70673C212.577 10.1619 212.971 10.7081 213.25 11.3147L227.113 40.0909ZM199.883 39.0929L204.081 30.4434H213.194L217.392 39.0929H199.883Z"
-              fill="#006FEE"/>
+              />
         <path class="second-part"
               d="M82.863 48.2376C81.206 48.2376 79.9817 47.9604 79.1901 47.4059C78.3984 46.8514 78.021 46.2231 78.0578 45.5208H78.8311C78.5164 45.9068 78.1546 46.2514 77.754 46.5465C77.1049 47.0356 76.3887 47.4278 75.6276 47.7109C74.5837 48.0892 73.4784 48.2678 72.3689 48.2376C70.71 48.2371 69.0741 47.8479 67.5914 47.1009C66.0428 46.3275 64.6555 45.2642 63.5043 43.9683C62.3064 42.6358 61.3444 41.1075 60.6598 39.4495C59.9612 37.7725 59.6044 35.9721 59.6104 34.1544C59.6063 32.3638 59.9632 30.5909 60.6598 28.9425C61.3481 27.2967 62.3204 25.7857 63.5319 24.4792C64.6966 23.2052 66.0812 22.1533 67.619 21.3742C69.0912 20.6254 70.7186 20.236 72.3689 20.2376C73.4538 20.2072 74.5338 20.3958 75.5448 20.792C76.2987 21.0962 77.0055 21.5069 77.6436 22.0118C78.055 22.3262 78.418 22.6999 78.7206 23.1208H78.113C78.0831 22.6903 78.1732 22.26 78.3732 21.8781C78.5732 21.4962 78.8752 21.1777 79.2453 20.9584C80.0369 20.4409 81.2612 20.1821 82.9182 20.1821C84.5752 20.1821 85.7442 20.4316 86.4254 20.9307C87.0741 21.3794 87.5206 22.0667 87.6681 22.8435C87.8163 23.6295 87.8903 24.4278 87.8891 25.2277V43.2475C87.8903 44.0474 87.8163 44.8457 87.6681 45.6316C87.597 46.0133 87.4503 46.3767 87.2369 46.7005C87.0235 47.0243 86.7475 47.3019 86.4254 47.5168C85.7442 47.9973 84.5567 48.2376 82.863 48.2376ZM73.7497 38.2019C74.4254 38.2089 75.0881 38.0161 75.6552 37.6475C76.2269 37.2768 76.7007 36.7727 77.036 36.1782C77.3825 35.5807 77.5637 34.9012 77.5607 34.2099C77.5709 33.5089 77.3894 32.8185 77.036 32.2138C76.6897 31.6259 76.2064 31.1313 75.6276 30.7722C75.0312 30.4005 74.3412 30.208 73.6393 30.2178C72.929 30.2106 72.2308 30.4026 71.6233 30.7722C71.0231 31.1345 70.5206 31.639 70.1597 32.2415C69.7915 32.8514 69.6002 33.5523 69.6074 34.2653C69.6038 34.9557 69.8057 35.6315 70.1873 36.2059C70.5751 36.7984 71.0951 37.292 71.7062 37.6475C72.3246 38.0151 73.031 38.2067 73.7497 38.2019ZM109.098 48.3485C107.381 48.3803 105.668 48.1561 104.017 47.6831C102.682 47.2982 101.459 46.5943 100.454 45.6316C99.4834 44.655 98.7632 43.4563 98.3555 42.1386C97.8671 40.5406 97.6341 38.8751 97.6651 37.2039V15.691C97.6594 14.9001 97.7334 14.1106 97.886 13.3346C97.9661 12.9676 98.1201 12.6208 98.3385 12.3157C98.557 12.0106 98.8353 11.7535 99.1563 11.5604C99.8559 11.0983 101.034 10.8673 102.691 10.8673C104.311 10.8673 105.471 11.1168 106.171 11.6158C106.498 11.8342 106.779 12.1158 106.997 12.4442C107.215 12.7726 107.366 13.1412 107.441 13.5287C107.589 14.3146 107.663 15.1129 107.662 15.9128V36.7049C107.657 37.0487 107.684 37.3922 107.745 37.7307C107.78 37.9589 107.865 38.1765 107.993 38.3683C108.107 38.5184 108.26 38.6336 108.435 38.7009C108.666 38.7825 108.909 38.8201 109.153 38.8118C110.014 38.8033 110.874 38.8776 111.722 39.0336C112.08 39.0966 112.421 39.2324 112.725 39.4326C113.029 39.6328 113.289 39.8933 113.489 40.198C113.912 40.8264 114.124 41.8798 114.124 43.3584C114.124 45.0217 113.866 46.2046 113.351 46.9069C113.128 47.2339 112.842 47.5128 112.51 47.727C112.178 47.9413 111.807 48.0866 111.418 48.1544C110.651 48.2832 109.875 48.3481 109.098 48.3485ZM96.5052 20.5148H102.967L110.589 20.2376C111.377 20.2355 112.163 20.3097 112.937 20.4594C113.318 20.5375 113.68 20.6903 114.002 20.9091C114.324 21.128 114.6 21.4085 114.814 21.7346C115.312 22.4369 115.56 23.6382 115.56 25.3386C115.56 26.891 115.312 28.0184 114.814 28.7208C114.375 29.3828 113.705 29.8571 112.937 30.0514C112.15 30.24 111.343 30.3331 110.534 30.3287L103.52 30.1623H96.2843C95.0324 30.0884 94.1671 29.6818 93.6884 28.9425C93.2097 28.2033 92.9704 26.9835 92.9704 25.2831C92.9704 23.6937 93.2649 22.5016 93.8541 21.7069C94.4432 20.9122 95.3269 20.5148 96.5052 20.5148ZM125.502 48.3485C123.845 48.3485 122.667 48.099 121.967 47.6C121.64 47.3835 121.362 47.102 121.148 46.7729C120.934 46.4439 120.79 46.0743 120.724 45.6871C120.594 44.8991 120.53 44.1016 120.531 43.3029V12.4752C120.527 11.666 120.601 10.8583 120.752 10.0633C120.828 9.68369 120.98 9.32341 121.198 9.00419C121.416 8.68497 121.697 8.41342 122.022 8.2059C122.722 7.72537 123.9 7.48511 125.557 7.48511C127.214 7.48511 128.383 7.73461 129.064 8.23362C129.708 8.67506 130.154 9.35163 130.307 10.1188C130.458 10.9137 130.532 11.7214 130.528 12.5307V22.6217C131.211 22.0109 131.961 21.4807 132.765 21.0415C133.771 20.4887 134.904 20.2114 136.051 20.2376C138.305 20.2076 140.517 20.8544 142.403 22.095C144.299 23.3537 145.84 25.0819 146.876 27.1128C148.006 29.3241 148.575 31.7807 148.533 34.2653V43.3584C148.536 44.1492 148.462 44.9383 148.313 45.7148C148.159 46.4819 147.713 47.1585 147.07 47.6C146.389 48.099 145.201 48.3485 143.507 48.3485C141.887 48.3485 140.718 48.1082 140 47.6277C139.666 47.4205 139.378 47.146 139.155 46.8216C138.931 46.4971 138.777 46.1297 138.702 45.7425C138.551 44.9197 138.477 44.0843 138.481 43.2475V34.2099C138.502 33.4913 138.35 32.7782 138.039 32.1307C137.753 31.5662 137.312 31.0951 136.769 30.7722C136.164 30.426 135.477 30.2533 134.781 30.2732C133.782 30.2747 132.812 30.6059 132.019 31.2158C131.172 31.8442 130.675 32.565 130.528 33.3782V43.3584C130.529 44.1583 130.455 44.9566 130.307 45.7425C130.236 46.1242 130.089 46.4876 129.876 46.8114C129.662 47.1352 129.386 47.4128 129.064 47.6277C128.383 48.1082 127.196 48.3485 125.502 48.3485Z"
-              fill="#006FEE"/>
+              />
         <path class="main-part-container"
               d="M43.633 0H12.151C5.44017 0 0 5.46124 0 12.198V43.802C0 50.5388 5.44017 56 12.151 56H43.633C50.3438 56 55.784 50.5388 55.784 43.802V12.198C55.784 5.46124 50.3438 0 43.633 0Z"
-              fill="#006FEE"/>
+              />
         <path class="main-part"
               d="M45.2665 42.2831C45.2665 43.7491 45.0507 44.7986 44.6192 45.4316C44.4297 45.7286 44.1819 45.9836 43.8908 46.1813C43.5998 46.3789 43.2717 46.5149 42.9266 46.5809C42.1878 46.718 41.4377 46.7849 40.6864 46.7808H14.9979C14.2878 46.7828 13.5792 46.7158 12.882 46.5809C12.5384 46.5106 12.212 46.3728 11.9216 46.1756C11.6311 45.9783 11.3823 45.7255 11.1894 45.4316C10.7413 44.7986 10.5172 43.7158 10.5172 42.1833C10.4908 41.4202 10.5576 40.6568 10.7163 39.91C10.7998 39.5266 10.9699 39.1675 11.2134 38.8604C11.4337 38.6233 11.6664 38.3981 11.9104 38.1857L25.1536 27.8398V28.1398L11.9607 17.8446C11.6465 17.5676 11.3628 17.2577 11.1143 16.9201C10.8889 16.5714 10.7365 16.1803 10.6663 15.7707C10.5509 15.0856 10.5009 14.3911 10.5172 13.6965C10.5172 12.1972 10.7413 11.1311 11.1894 10.4981C11.3855 10.2018 11.6383 9.94764 11.9332 9.75032C12.228 9.55301 12.559 9.41649 12.9068 9.34871C13.6291 9.21312 14.3625 9.14619 15.0973 9.14883H40.7858C41.5041 9.1477 42.2209 9.21462 42.9266 9.34871C43.2717 9.41476 43.5998 9.55075 43.8909 9.74837C44.1819 9.94599 44.4297 10.2011 44.6192 10.4981C45.0507 11.1311 45.2665 12.2139 45.2665 13.7466C45.2665 15.2459 45.0425 16.3121 44.5943 16.9453C44.395 17.2439 44.1381 17.4994 43.8388 17.6968C43.5395 17.8942 43.2039 18.0295 42.8518 18.0947C42.1376 18.228 41.4126 18.2949 40.6861 18.2946L26.5468 18.2946L34.4635 24.1416L35.2091 24.7412C35.5821 25.0596 35.887 25.4506 36.1052 25.8906C36.4031 26.5482 36.5397 27.268 36.5035 27.9895C36.5376 28.719 36.4012 29.4464 36.1052 30.1136C35.8938 30.5583 35.5978 30.9572 35.234 31.288C34.9875 31.5014 34.7299 31.7015 34.4624 31.8876L26.5974 37.6853H40.7858C41.5041 37.6841 42.2209 37.7511 42.9266 37.8851C43.2717 37.9512 43.5998 38.0872 43.8908 38.2848C44.1819 38.4824 44.4297 38.7375 44.6192 39.0345C45.0507 39.6677 45.2665 40.7506 45.2665 42.2831Z"
-              fill="white"/>
+              />
     </svg>
 {/if}

package/dist/components/button/Button.d.ts

@@ -35,7 +35,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     block: {
         true: string;
     };
-}, undefined, "btn-wave relative overflow-visible rounded-md inline-flex items-center justify-center leading-tight [&>svg]:stroke-icon transition-all duration-200 select-none outline-none font-normal cursor-pointer", {
+}, undefined, "relative overflow-visible rounded-md inline-flex items-center justify-center leading-tight [&>svg]:stroke-icon select-none outline-none font-normal cursor-pointer transition-[background-color,border-color,box-shadow,transform,opacity] ease-ui duration-150", {
     variant: {
         primary: string;
         default: string;
@@ -103,7 +103,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     block: {
         true: string;
     };
-}, undefined, "btn-wave relative overflow-visible rounded-md inline-flex items-center justify-center leading-tight [&>svg]:stroke-icon transition-all duration-200 select-none outline-none font-normal cursor-pointer", unknown, unknown, undefined>>;
+}, undefined, "relative overflow-visible rounded-md inline-flex items-center justify-center leading-tight [&>svg]:stroke-icon select-none outline-none font-normal cursor-pointer transition-[background-color,border-color,box-shadow,transform,opacity] ease-ui duration-150", unknown, unknown, undefined>>;
 type ButtonVariants = VariantProps<typeof styles>;
 export interface ButtonProps extends Omit<HTMLButtonAttributes, 'disabled'>, ButtonVariants {
     children?: Snippet;