tera-system-ui 0.1.64 → 0.1.66

package/dist/components/button/Button.js

@@ -1,13 +1,13 @@
 import { tv } from "tailwind-variants";
 export const styles = tv({
-    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',
+    base: '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',
     variants: {
         variant: {
-            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',
+            primary: 'bg-primary-600 text-white border border-primary-600 hover:bg-primary-500 hover:border-primary-500 active:scale-[0.97] shadow-sm hover:shadow-md hover:-translate-y-px',
+            default: 'bg-surface-control text-text-primary border border-border-default hover:text-interactive-hover hover:border-interactive-hover active:text-interactive-active active:border-interactive-active active:scale-[0.97]',
+            dashed: 'bg-surface-control text-text-primary border border-dashed border-border-default hover:text-interactive-hover hover:border-interactive-hover active:text-interactive-active active:border-interactive-active active:scale-[0.97]',
+            text: 'bg-transparent text-text-primary border border-transparent hover:bg-surface-hover active:bg-surface-hover',
+            link: 'bg-transparent text-interactive border border-transparent hover:text-interactive-hover active:text-interactive-active px-0',
         },
         size: {
             xs: 'h-5 px-1.5 gap-1 text-xs [&>svg]:size-3',
@@ -21,7 +21,7 @@ export const styles = tv({
             round: 'rounded-full',
         },
         disabled: {
-            true: 'bg-neutral-token-3 text-neutral-token-7 border-neutral-token-5 pointer-events-none shadow-none cursor-not-allowed',
+            true: 'bg-surface-sunken text-text-disabled border-border-default pointer-events-none shadow-none cursor-not-allowed',
         },
         loading: {
             true: 'cursor-wait pointer-events-none opacity-65'
@@ -42,35 +42,35 @@ export const styles = tv({
             variant: 'primary',
             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'
+            class: 'bg-error-default border-error-default hover:bg-error-hover hover:border-error-hover active:bg-error-active active:border-error-active'
         },
         // 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'
+            class: 'text-error-default border-error-default hover:text-error-hover hover:border-error-hover active:text-error-active active:border-error-active'
         },
         // 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'
+            class: 'text-error-default border-error-default hover:text-error-hover hover:border-error-hover active:text-error-active active:border-error-active'
         },
         // Text danger state
         {
             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'
+            class: 'text-error-default hover:bg-error-subtle active:bg-error-muted'
         },
         // Link danger state
         {
             variant: 'link',
             danger: true,
             disabled: false,
-            class: 'text-error-500 hover:text-error-400 active:text-error-600'
+            class: 'text-error-default hover:text-error-hover active:text-error-active'
         },
         // Text disabled state
         {

package/dist/components/button/Button.svelte

@@ -1,48 +1,21 @@
-<script lang="ts">
-    import {type ButtonProps, styles} from "./Button";
-
-    let {
-        children, disabled, variant = 'default', icon, size = 'md', shape = 'default', danger, loading, block, class: className,
-        ref = $bindable(),
-        onclick,
-        ...props
-    }: ButtonProps = $props();
-
-    let waveActive = $state(false);
-
-    // Check if user prefers reduced motion
-    const prefersReducedMotion = typeof window !== 'undefined'
-        ? window.matchMedia('(prefers-reduced-motion: reduce)').matches
-        : false;
-
-    function handleClick(e) {
-        if (prefersReducedMotion || disabled || loading) return;
-
-        onclick?.(e);
-        // Trigger wave animation
-        waveActive = false;
-        // Force reflow to restart animation
-        requestAnimationFrame(() => {
-            waveActive = true;
-        });
-    }
-
-    function handleAnimationEnd() {
-        waveActive = false;
-    }
+<script lang="ts">import { styles } from "./Button";
+let { children, disabled, variant = 'default', icon, size = 'md', shape = 'default', danger, loading, block, class: className, ref = $bindable(), onclick, ...props } = $props();
+function handleClick(e) {
+    if (disabled || loading)
+        return;
+    onclick?.(e);
+}
 </script>
 
 <button
         bind:this={ref}
         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 || 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">

package/dist/components/card/Card.d.ts

@@ -0,0 +1,68 @@
+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;
+        elevated: string;
+        bordered: string;
+        ghost: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    clickable: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+}, undefined, "relative bg-surface-raised rounded-container transition-[box-shadow,transform] ease-spring duration-200", {
+    variant: {
+        default: string;
+        elevated: string;
+        bordered: string;
+        ghost: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    clickable: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    variant: {
+        default: string;
+        elevated: string;
+        bordered: string;
+        ghost: string;
+    };
+    padding: {
+        none: string;
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    clickable: {
+        true: string;
+    };
+    loading: {
+        true: string;
+    };
+}, undefined, "relative bg-surface-raised rounded-container transition-[box-shadow,transform] ease-spring duration-200", unknown, unknown, undefined>>;
+type CardVariants = VariantProps<typeof styles>;
+export interface CardProps extends HTMLAttributes<HTMLDivElement>, CardVariants {
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+export {};

package/dist/components/card/Card.js

@@ -0,0 +1,28 @@
+import { tv } from "tailwind-variants";
+export const styles = tv({
+    base: 'relative bg-surface-raised rounded-container transition-[box-shadow,transform] ease-spring duration-200',
+    variants: {
+        variant: {
+            default: 'shadow-sm',
+            elevated: 'shadow-md',
+            bordered: 'border border-border-default shadow-none',
+            ghost: 'bg-transparent shadow-none',
+        },
+        padding: {
+            none: 'p-0',
+            sm: 'p-3',
+            md: 'p-5',
+            lg: 'p-7',
+        },
+        clickable: {
+            true: 'cursor-pointer hover:shadow-md hover:-translate-y-px active:scale-[0.99]',
+        },
+        loading: {
+            true: 'overflow-hidden',
+        },
+    },
+    defaultVariants: {
+        variant: 'default',
+        padding: 'md',
+    },
+});

package/dist/components/card/Card.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">import { styles } from './Card.js';
+let { children, class: className, variant, padding, clickable, loading, ref = $bindable(), onclick, ...props } = $props();
+</script>
+
+{#if clickable}
+    <button
+        bind:this={ref}
+        class={styles({ variant, padding, clickable, loading, className })}
+        {onclick}
+        {...props}
+    >
+        {#if loading}
+            <div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised/80 rounded-container">
+                <div class="size-6 rounded-full border-2 border-border-default border-t-interactive animate-spin"></div>
+            </div>
+        {/if}
+        {@render children?.()}
+    </button>
+{:else}
+    <div
+        bind:this={ref}
+        class={styles({ variant, padding, clickable, loading, className })}
+        {onclick}
+        {...props}
+    >
+        {#if loading}
+            <div class="absolute inset-0 z-10 flex items-center justify-center bg-surface-raised/80 rounded-container">
+                <div class="size-6 rounded-full border-2 border-border-default border-t-interactive animate-spin"></div>
+            </div>
+        {/if}
+        {@render children?.()}
+    </div>
+{/if}

package/dist/components/card/Card.svelte.d.ts

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

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

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

package/dist/components/card/index.js

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

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

@@ -1,11 +1,32 @@
+/**
+ * @component Checkbox - Accessible checkbox input with label and indeterminate support.
+ * Built on BitsUI Checkbox primitive.
+ */
 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 Omit<HTMLInputAttributes, 'size'>, CheckboxVariants {
-    children?: Snippet;
+export interface CheckboxProps extends CheckboxVariants {
+    /** Additional CSS classes for the root element. */
     class?: string;
-    ref?: HTMLInputElement | null;
+    /** Whether the checkbox is checked. Bindable. */
+    checked?: boolean;
+    /** Whether the checkbox shows an indeterminate (−) state. Bindable. */
+    indeterminate?: boolean;
+    /** Prevents user interaction and dims the control. */
+    disabled?: boolean;
+    /** Whether the checkbox must be checked before form submission. */
+    required?: boolean;
+    /** Name attribute used when submitting within a form. */
+    name?: string;
+    /** Value sent with the form when checked. */
+    value?: string;
+    /** Called when the checked state changes. */
+    onCheckedChange?: (checked: boolean) => void;
+    /** Additional content rendered next to the checkbox indicator. */
+    children?: Snippet;
+    /** Bindable reference to the root button element. */
+    ref?: HTMLButtonElement | null;
+    [key: string]: unknown;
 }
 export {};

package/dist/components/checkbox/Checkbox.js

@@ -1,3 +1,7 @@
+/**
+ * @component Checkbox - Accessible checkbox input with label and indeterminate support.
+ * Built on BitsUI Checkbox primitive.
+ */
 import { tv } from "tailwind-variants";
 export const styles = tv({
     base: '',

package/dist/components/checkbox/Checkbox.svelte

@@ -1,25 +1,22 @@
-<script lang="ts">
-    import { Checkbox as CheckboxPrimitive, type WithoutChildrenOrChild } from "bits-ui";
-    import { cn } from "../../utils";
-    import IconCheck from "@tabler/icons-svelte/icons/check"
-    import IconMinus from "@tabler/icons-svelte/icons/minus"
-
-    let {
-        ref = $bindable(null),
-        checked = $bindable(false),
-        indeterminate = $bindable(false),
-        class: className,
-        ...restProps
-    }: WithoutChildrenOrChild<CheckboxPrimitive.RootProps> = $props();
+<script lang="ts">import { Checkbox as CheckboxPrimitive } from "bits-ui";
+import { cn } from "../../utils/index.js";
+import IconCheck from "@tabler/icons-svelte/icons/check";
+import IconMinus from "@tabler/icons-svelte/icons/minus";
+let { ref = $bindable(null), checked = $bindable(false), indeterminate = $bindable(false), class: className, disabled, required, name, value, onCheckedChange, ...restProps } = $props();
 </script>
 
 <CheckboxPrimitive.Root
     bind:ref
+    {disabled}
+    {required}
+    {name}
+    {value}
+    {onCheckedChange}
     class={cn(
-        "peer box-content size-4 shrink-0 rounded border border-neutral-token-5 bg-neutral-token-1",
-        "transition-all duration-200",
+        "peer box-content size-4 shrink-0 rounded border border-border-default bg-surface-control",
+        "transition-[border-color,box-shadow,background-color] ease-ui duration-150",
         "hover:border-primary-500",
-        "focus-visible:outline-none focus-visible:shadow-[0_0_0_2px_rgba(59,130,246,0.1)]",
+        "focus-visible:outline-none focus-visible:shadow-focus",
         "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",

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

@@ -1,4 +1,4 @@
-import { Checkbox as CheckboxPrimitive } from "bits-ui";
-declare const Checkbox: import("svelte").Component<Omit<Omit<CheckboxPrimitive.RootProps, "child">, "children">, {}, "ref" | "checked" | "indeterminate">;
+import type { CheckboxProps } from './Checkbox.js';
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "ref" | "checked" | "indeterminate">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

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

@@ -1,11 +1,47 @@
-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 HTMLAttributes<HTMLDivElement>, ComboboxVariants {
-    children?: Snippet;
+/**
+ * @component Combobox - Searchable dropdown with single and multi-select support.
+ * Built on BitsUI Combobox primitive with client-side filtering.
+ */
+export interface ComboboxItem {
+    /** Unique value submitted or passed to onchange. */
+    value: string;
+    /** Human-readable label shown in the list and trigger. */
+    label: string;
+    /** Prevents selecting this item. */
+    disabled?: boolean;
+}
+export interface ComboboxProps {
+    /** Whether one or many items can be selected at once. */
+    type: 'single' | 'multiple';
+    /** List of selectable options. */
+    items: ComboboxItem[];
+    /** Currently selected value(s). Bindable. */
+    value?: string | string[];
+    /** Placeholder shown in the search input when nothing is selected. */
+    placeholder?: string;
+    /** Prevents all interaction. */
+    disabled?: boolean;
+    /** Whether keyboard navigation wraps at the list boundaries. */
+    loop?: boolean;
+    /** Allow deselecting the current value by clicking it again (single mode only). */
+    allowDeselect?: boolean;
+    /** Called when the selection changes. */
+    onchange?: (value: string | string[]) => void;
+    /** Additional CSS classes for the root container. */
     class?: string;
-    ref?: HTMLDivElement | null;
+    /** Bindable reference to the trigger element. */
+    ref?: HTMLElement | null;
+    /** Name for the hidden form input, enabling native form submission. */
+    name?: string;
+    /** Marks the field as required for form validation. */
+    required?: boolean;
+    /** Scroll alignment for the highlighted item. */
+    scrollAlignment?: 'nearest' | 'center';
+    /**
+     * When true (single mode only), whatever the user types becomes the
+     * combobox value directly — like a text input with suggestions.
+     * Selecting an item from the list still sets its item.value as normal.
+     */
+    freeInput?: boolean;
+    [key: string]: unknown;
 }
-export {};

package/dist/components/combobox/Combobox.js

@@ -1,7 +1,5 @@
-import { tv } from "tailwind-variants";
-export const styles = tv({
-    base: '',
-    variants: {},
-    compoundVariants: [],
-    defaultVariants: {},
-});
+/**
+ * @component Combobox - Searchable dropdown with single and multi-select support.
+ * Built on BitsUI Combobox primitive with client-side filtering.
+ */
+export {};