tera-system-ui 0.1.50 → 0.1.63

package/dist/components/accordion/Accordion.d.ts

@@ -1,26 +1,28 @@
 import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes } from "svelte/elements";
 export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type AccordionVariants = VariantProps<typeof styles>;
-export interface AccordionProps extends AccordionVariants {
-    children?: any;
+export interface AccordionProps extends Omit<HTMLAttributes<HTMLDivElement>, 'onchange'>, AccordionVariants {
+    children?: Snippet;
     class?: string;
     type: 'multiple' | 'single';
     value: string | string[];
-    onchange: (value: string | string[]) => void;
+    onchange?: (value: string | string[]) => void;
     controlledValue?: boolean;
-    ref?: HTMLDivElement;
+    ref?: HTMLDivElement | null;
 }
-export interface AccordionItemProps {
+export interface AccordionItemProps extends HTMLAttributes<HTMLDivElement> {
     value: string;
-    ref?: HTMLDivElement;
-    children?: any;
+    ref?: HTMLDivElement | null;
+    children?: Snippet;
 }
-export interface AccordionTriggerProps {
-    children?: any;
-    ref?: HTMLButtonElement;
+export interface AccordionTriggerProps extends HTMLButtonAttributes {
+    children?: Snippet;
+    ref?: HTMLButtonElement | null;
 }
-export interface AccordionContentProps {
-    children?: any;
-    ref?: HTMLDivElement;
+export interface AccordionContentProps extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    ref?: HTMLDivElement | null;
 }
 export {};

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

@@ -2,3 +2,4 @@ export { default as Accordion } from "./components/Accordion.svelte";
 export { default as AccordionItem } from "./components/AccordionItem.svelte";
 export { default as AccordionContent } from "./components/AccordionContent.svelte";
 export { default as AccordionTrigger } from "./components/AccordionTrigger.svelte";
+export type { AccordionProps, AccordionItemProps, AccordionContentProps, AccordionTriggerProps } from './Accordion';

package/dist/components/avatar/Avatar.d.ts

@@ -1,4 +1,6 @@
 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<{
     size: {
         sm: string;
@@ -31,12 +33,12 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     };
 }, undefined, "relative rounded-full object-cover bg-primary-token-1 select-none grid place-content-center leading-none font-bold overflow-clip hover:brightness-90", unknown, unknown, undefined>>;
 type AvatarVariants = VariantProps<typeof styles>;
-export interface AvatarProps extends AvatarVariants {
-    children?: any;
+export interface AvatarProps extends Omit<HTMLAttributes<HTMLDivElement>, 'size'>, AvatarVariants {
+    children?: Snippet;
     class?: string;
     alt?: string;
     src?: string;
-    ref?: any;
+    ref?: HTMLDivElement | null;
     userUid?: string;
     apiUrl?: string;
 }

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

@@ -1 +1,2 @@
 export { default as Avatar } from './Avatar.svelte';
+export type { AvatarProps } from './Avatar';

package/dist/components/brand-logo/BrandLogo.d.ts

@@ -1,4 +1,6 @@
 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<{
     theme: {
         light: string;
@@ -8,7 +10,7 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     shape: {
         square: string;
     };
-}, undefined, "h-icon-md [&>.second-part]:fill-brand-500", {
+}, undefined, "[&>.second-part]:fill-brand-500", {
     theme: {
         light: string;
         dark: string;
@@ -26,10 +28,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
     shape: {
         square: string;
     };
-}, undefined, "h-icon-md [&>.second-part]:fill-brand-500", unknown, unknown, undefined>>;
+}, undefined, "[&>.second-part]:fill-brand-500", unknown, unknown, undefined>>;
 type BrandLogoVariants = VariantProps<typeof styles>;
-export interface BrandLogoProps extends BrandLogoVariants {
-    children?: any;
+export interface BrandLogoProps extends HTMLAttributes<HTMLDivElement>, BrandLogoVariants {
+    children?: Snippet;
     class?: string;
+    ref?: HTMLDivElement | null;
 }
 export {};

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

@@ -1,6 +1,6 @@
 import { tv } from "tailwind-variants";
 export const styles = tv({
-    base: 'h-icon-md [&>.second-part]:fill-brand-500',
+    base: '[&>.second-part]:fill-brand-500',
     variants: {
         theme: {
             light: '',

package/dist/components/brand-logo/index.d.ts

@@ -1 +1,2 @@
 export { default as BrandLogo } from './BrandLogo.svelte';
+export type { BrandLogoProps } from './BrandLogo';

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

@@ -1,69 +1,113 @@
 import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLButtonAttributes } from "svelte/elements";
 export declare const styles: import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
-        secondary: string;
-        ghost: string;
+        default: string;
+        dashed: string;
+        text: string;
+        link: string;
     };
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
     };
+    shape: {
+        default: string;
+        circle: string;
+        round: string;
+    };
     disabled: {
         true: string;
     };
+    loading: {
+        true: string;
+    };
     icon: {
         true: string;
     };
-    dangerous: {
+    danger: {
+        true: string;
+    };
+    block: {
         true: string;
     };
-}, undefined, "relative font-medium overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon duration-element-react select-none focus-visible:ring-2 outline-none", {
+}, 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", {
     variant: {
         primary: string;
-        secondary: string;
-        ghost: string;
+        default: string;
+        dashed: string;
+        text: string;
+        link: string;
     };
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
     };
+    shape: {
+        default: string;
+        circle: string;
+        round: string;
+    };
     disabled: {
         true: string;
     };
+    loading: {
+        true: string;
+    };
     icon: {
         true: string;
     };
-    dangerous: {
+    danger: {
+        true: string;
+    };
+    block: {
         true: string;
     };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         primary: string;
-        secondary: string;
-        ghost: string;
+        default: string;
+        dashed: string;
+        text: string;
+        link: string;
     };
     size: {
+        xs: string;
         sm: string;
         md: string;
         lg: string;
     };
+    shape: {
+        default: string;
+        circle: string;
+        round: string;
+    };
     disabled: {
         true: string;
     };
+    loading: {
+        true: string;
+    };
     icon: {
         true: string;
     };
-    dangerous: {
+    danger: {
+        true: string;
+    };
+    block: {
         true: string;
     };
-}, undefined, "relative font-medium overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon duration-element-react select-none focus-visible:ring-2 outline-none", unknown, unknown, undefined>>;
+}, 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>>;
 type ButtonVariants = VariantProps<typeof styles>;
-export interface ButtonProps extends ButtonVariants {
-    children: any;
+export interface ButtonProps extends Omit<HTMLButtonAttributes, 'disabled'>, ButtonVariants {
+    children?: Snippet;
     class?: string;
-    onclick?: any;
+    ref?: HTMLButtonElement | null;
 }
 export {};

package/dist/components/button/Button.js

@@ -1,53 +1,94 @@
 import { tv } from "tailwind-variants";
 export const styles = tv({
-    base: 'relative font-medium overflow-clip rounded inline-flex items-center justify-center !leading-[0.1rem] [&>svg]:stroke-icon duration-element-react select-none focus-visible:ring-2 outline-none',
+    base: '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',
     variants: {
         variant: {
-            primary: 'bg-primary-700 text-neutral-1 border border-primary-700 hover:bg-primary-800 focus:ring-primary-token-9 [&:after]:bg-black',
-            secondary: 'bg-neutral-token-4 text-neutral-token-13 border-neutral-token-4 border hover:bg-neutral-token-5 focus:ring-neutral-token-7',
-            ghost: 'text-neutral-token-13 hover:bg-neutral-token-3 focus:ring-neutral-token-7',
+            primary: 'bg-primary-600 text-white border border-primary-600 hover:bg-primary-500 hover:border-primary-500 active:bg-primary-700 active:border-primary-700 shadow-sm',
+            default: 'bg-neutral-token-1 text-neutral-token-13 border border-neutral-token-5 hover:text-primary-600 hover:border-primary-600 active:text-primary-700 active:border-primary-700',
+            dashed: 'bg-neutral-token-1 text-neutral-token-13 border border-dashed border-neutral-token-5 hover:text-primary-600 hover:border-primary-600 active:text-primary-700 active:border-primary-700',
+            text: 'bg-transparent text-neutral-token-13 border border-transparent hover:bg-neutral-token-3 active:bg-neutral-token-4',
+            link: 'bg-transparent text-primary-600 border border-transparent hover:text-primary-500 active:text-primary-700 px-0',
         },
         size: {
-            sm: 'h-6 px-2 gap-1 text-sm [&>svg]:size-icon-xs',
-            md: 'h-8 px-3 gap-1.5 [&>svg]:size-icon-sm',
-            lg: 'h-10 px-3 gap-1.5 [&>svg]:size-icon-md',
+            xs: 'h-5 px-1.5 gap-1 text-xs [&>svg]:size-3',
+            sm: 'h-6 px-2 gap-1.5 text-sm [&>svg]:size-3.5',
+            md: 'h-8 px-4 gap-2 text-sm [&>svg]:size-4',
+            lg: 'h-10 px-4 gap-2 text-base [&>svg]:size-5',
+        },
+        shape: {
+            default: '',
+            circle: 'rounded-full px-0',
+            round: 'rounded-full',
         },
         disabled: {
-            true: 'bg-neutral-token-3 text-neutral-token-7 border border-neutral-token-3 pointer-events-none',
+            true: 'bg-neutral-token-3 text-neutral-token-7 border-neutral-token-5 pointer-events-none shadow-none cursor-not-allowed',
+        },
+        loading: {
+            true: 'cursor-wait pointer-events-none opacity-65'
         },
         icon: {
-            true: 'px-0 '
+            true: 'px-0'
         },
-        dangerous: {
+        danger: {
             true: ''
+        },
+        block: {
+            true: 'w-full'
         }
     },
     compoundVariants: [
+        // Primary danger state
         {
             variant: 'primary',
-            dangerous: true,
-            // @ts-ignore
-            disabled: [false, undefined],
-            class: 'bg-error-700 text-neutral-1 border border-error-700 hover:bg-error-800 focus:ring-error-400'
+            danger: true,
+            disabled: false,
+            class: 'bg-error-500 border-error-500 hover:bg-error-400 hover:border-error-400 active:bg-error-600 active:border-error-600'
+        },
+        // Default danger state
+        {
+            variant: 'default',
+            danger: true,
+            disabled: false,
+            class: 'text-error-500 border-error-500 hover:text-error-400 hover:border-error-400 active:text-error-600 active:border-error-600'
+        },
+        // Dashed danger state
+        {
+            variant: 'dashed',
+            danger: true,
+            disabled: false,
+            class: 'text-error-500 border-error-500 hover:text-error-400 hover:border-error-400 active:text-error-600 active:border-error-600'
         },
+        // Text danger state
         {
-            variant: 'secondary',
-            dangerous: true,
-            // @ts-ignore
-            disabled: [false, undefined],
-            class: 'bg-neutral-token-2 text-error-600 dark:text-error-200 border border-error-600 dark:border-error-500 hover:bg-neutral-token-3 focus:ring-error-500'
+            variant: 'text',
+            danger: true,
+            disabled: false,
+            class: 'text-error-500 hover:bg-error-50 dark:hover:bg-error-950 active:bg-error-100 dark:active:bg-error-900'
         },
+        // Link danger state
         {
-            variant: 'ghost',
-            dangerous: true,
-            // @ts-ignore
-            disabled: [false, undefined],
-            class: 'text-error-600 dark:text-error-100 hover:bg-neutral-token-3 focus:ring-error-400'
+            variant: 'link',
+            danger: true,
+            disabled: false,
+            class: 'text-error-500 hover:text-error-400 active:text-error-600'
         },
+        // Text disabled state
         {
-            variant: 'ghost',
+            variant: 'text',
             disabled: true,
-            class: 'border-transparent bg-transparent'
+            class: 'bg-transparent border-transparent'
+        },
+        // Link disabled state
+        {
+            variant: 'link',
+            disabled: true,
+            class: 'bg-transparent border-transparent'
+        },
+        // Icon size variants - circle and icon-only
+        {
+            size: 'xs',
+            icon: true,
+            class: 'size-5'
         },
         {
             size: 'sm',
@@ -64,9 +105,31 @@ export const styles = tv({
             icon: true,
             class: 'size-10'
         },
+        // Circle shape sizing
+        {
+            size: 'xs',
+            shape: 'circle',
+            class: 'size-5'
+        },
+        {
+            size: 'sm',
+            shape: 'circle',
+            class: 'size-6'
+        },
+        {
+            size: 'md',
+            shape: 'circle',
+            class: 'size-8'
+        },
+        {
+            size: 'lg',
+            shape: 'circle',
+            class: 'size-10'
+        },
     ],
     defaultVariants: {
-        variant: 'primary',
+        variant: 'default',
         size: 'md',
+        shape: 'default',
     },
 });

package/dist/components/button/Button.svelte

@@ -2,48 +2,53 @@
     import {type ButtonProps, styles} from "./Button";
 
     let {
-        children, disabled, variant = 'primary', icon, size, dangerous, class: className,
+        children, disabled, variant = 'default', icon, size = 'md', shape = 'default', danger, loading, block, class: className,
         ref = $bindable(),
+        onclick,
         ...props
-    }: ButtonProps & {ref: HTMLButtonElement}  = $props();
+    }: ButtonProps = $props();
 
-    $effect(() => {
-        ref.addEventListener('click', function (e) {
-            const ripple = document.createElement('span');
-            const size = Math.max(ref.clientWidth, ref.clientHeight);
-            const rect = ref.getBoundingClientRect();
-            const x = e.clientX - rect.left - size / 2;
-            const y = e.clientY - rect.top - size / 2;
+    let waveActive = $state(false);
 
-            ripple.style.width = ripple.style.height = `${size}px`;
-            ripple.style.left = `${x}px`;
-            ripple.style.top = `${y}px`;
+    // Check if user prefers reduced motion
+    const prefersReducedMotion = typeof window !== 'undefined'
+        ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
+        : false;
 
-            // Set ripple color based on data attribute
-            let rippleColor = 'bg-neutral-token-8/30';
-            if (variant === 'primary') {
-                rippleColor = 'bg-neutral-3/30';
-            }
-            ripple.style.backgroundColor = rippleColor
+    function handleClick(e) {
+        if (prefersReducedMotion || disabled || loading) return;
 
-
-            ripple.classList.add('ripple');
-            ripple.classList.add(rippleColor);
-            ref.appendChild(ripple);
-
-            // Remove the ripple after animation completes
-            ripple.addEventListener('animationend', () => {
-                ripple.remove();
-            });
+        onclick?.(e);
+        // Trigger wave animation
+        waveActive = false;
+        // Force reflow to restart animation
+        requestAnimationFrame(() => {
+            waveActive = true;
         });
-    })
+    }
+
+    function handleAnimationEnd() {
+        waveActive = false;
+    }
 </script>
 
 <button
         bind:this={ref}
-        class={styles({ disabled, variant, icon, size, dangerous, className })}
+        class={styles({ disabled: disabled || loading, variant, icon, size, shape, danger, block, className })}
+        class:wave-active={waveActive}
+        data-variant={variant}
+        data-danger={danger || undefined}
         {...props}
-        disabled={disabled}
+        disabled={disabled || loading}
+        aria-busy={loading}
+        onclick={handleClick}
+        onanimationend={handleAnimationEnd}
 >
+    {#if loading}
+        <svg class="animate-spin" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
+            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
+        </svg>
+    {/if}
     {@render children?.()}
 </button>

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

@@ -1,7 +1,4 @@
 import { type ButtonProps } from "./Button";
-type $$ComponentProps = ButtonProps & {
-    ref: HTMLButtonElement;
-};
-declare const Button: import("svelte").Component<$$ComponentProps, {}, "ref">;
+declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

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

@@ -1 +1,2 @@
 export { default as Button } from './Button.svelte';
+export type { ButtonProps } from './Button';

package/dist/components/checkbox/Checkbox.d.ts

@@ -1,8 +1,11 @@
 import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLInputAttributes } from "svelte/elements";
 export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type CheckboxVariants = VariantProps<typeof styles>;
-export interface CheckboxProps extends CheckboxVariants {
-    children?: any;
+export interface CheckboxProps extends Omit<HTMLInputAttributes, 'size'>, CheckboxVariants {
+    children?: Snippet;
     class?: string;
+    ref?: HTMLInputElement | null;
 }
 export {};

package/dist/components/checkbox/Checkbox.svelte

@@ -14,14 +14,21 @@
 </script>
 
 <CheckboxPrimitive.Root
-        bind:ref
-        class={cn(
-		"border-primary ring-offset-background focus-visible:ring-ring data-[state=checked]:bg-primary data-[state=indeterminate]:bg-primary data-[state=checked]:text-primary-foreground peer box-content size-4 shrink-0 rounded-sm border focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[disabled=true]:cursor-not-allowed data-[disabled=true]:opacity-50",
-		className
-	)}
-        bind:checked
-        bind:indeterminate
-        {...restProps}
+    bind:ref
+    class={cn(
+        "peer box-content size-4 shrink-0 rounded border border-neutral-token-5 bg-neutral-token-1",
+        "transition-all duration-200",
+        "hover:border-primary-500",
+        "focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_rgba(59,130,246,0.1)]",
+        "data-[state=checked]:bg-primary-600 data-[state=checked]:border-primary-600",
+        "data-[state=indeterminate]:bg-primary-600 data-[state=indeterminate]:border-primary-600",
+        "disabled:cursor-not-allowed disabled:bg-neutral-token-3 disabled:border-neutral-token-5 disabled:opacity-50",
+        "data-[disabled=true]:cursor-not-allowed data-[disabled=true]:bg-neutral-token-3 data-[disabled=true]:border-neutral-token-5 data-[disabled=true]:opacity-50",
+        className
+    )}
+    bind:checked
+    bind:indeterminate
+    {...restProps}
 >
     {#snippet children({ checked, indeterminate })}
         <div class="flex size-4 items-center justify-center">

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

@@ -1 +1,2 @@
 export { default as Checkbox } from './Checkbox.svelte';
+export type { CheckboxProps } from './Checkbox';

package/dist/components/combobox/Combobox.d.ts

@@ -1,8 +1,11 @@
 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<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type ComboboxVariants = VariantProps<typeof styles>;
-export interface ComboboxProps extends ComboboxVariants {
-    children?: any;
+export interface ComboboxProps extends HTMLAttributes<HTMLDivElement>, ComboboxVariants {
+    children?: Snippet;
     class?: string;
+    ref?: HTMLDivElement | null;
 }
 export {};

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

@@ -1 +1,2 @@
 export { default as Combobox } from './Combobox.svelte';
+export type { ComboboxProps } from './Combobox';

package/dist/components/dialog/Dialog.d.ts

@@ -1,4 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLDialogAttributes } from "svelte/elements";
 export declare const styles: import("tailwind-variants").TVReturnType<{
     size: {
         xs: {
@@ -116,14 +118,14 @@ type DialogPropsCommon = {
     bodyClass?: string;
     footerClass?: string;
 };
-export type DialogProps = DialogVariants & DialogPropsCommon & {
-    children?: any;
-    header?: any;
-    footer?: any;
+export type DialogProps = Omit<HTMLDialogAttributes, 'open'> & DialogVariants & DialogPropsCommon & {
+    children?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
     open?: boolean;
     staticRender?: boolean;
-    triggerRef?: HTMLElement;
-    ref?: any;
+    triggerRef?: HTMLElement | null;
+    ref?: HTMLDialogElement | null;
 };
 export type DialogPropsAstro = DialogVariants & DialogPropsCommon & {};
 export {};

package/dist/components/dialog/Dialog.svelte

@@ -85,7 +85,7 @@
         <button class=""></button>
         {#if (closeButton)}
             <form method="dialog">
-                <Button class="absolute right-1 top-1 [&>svg]:opacity-45 [&>svg]:hover:opacity-90 z-10" icon
+                <Button class="!absolute right-1 top-1 [&>svg]:opacity-45 [&>svg]:hover:opacity-90 z-10" icon
                         variant="ghost"
                         size="md">
                     <IconX/>

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

@@ -1 +1,2 @@
 export { default as Dialog } from './Dialog.svelte';
+export type { DialogProps, DialogPropsAstro } from './Dialog';