tera-system-ui 0.1.50 → 0.1.63

package/dist/components/dropdown-menu/DropdownMenu.d.ts

@@ -1,11 +1,14 @@
 import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLAttributes, HTMLButtonAttributes, HTMLAnchorAttributes } from "svelte/elements";
 export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type DropdownMenuVariants = VariantProps<typeof styles>;
-export interface DropdownMenuProps extends DropdownMenuVariants {
-    children?: any;
+export interface DropdownMenuProps extends HTMLAttributes<HTMLDivElement>, DropdownMenuVariants {
+    children?: Snippet;
     class?: string;
-    triggerRef: any;
+    triggerRef: HTMLElement | null;
     open?: boolean;
+    ref?: HTMLDivElement | null;
 }
 export type DropdownMenuContext = {
     setOpen: (open: boolean) => void;
@@ -13,11 +16,26 @@ export type DropdownMenuContext = {
 };
 export declare function getCtx(): DropdownMenuContext;
 export declare function setCtx(context: DropdownMenuContext): void;
-export type DropdownMenuItemProps = {
-    children?: any;
+export interface DropdownMenuItemProps extends Omit<HTMLButtonAttributes & HTMLAnchorAttributes, 'class'> {
+    children?: Snippet;
     class?: string;
-    onclick?: (e: any) => void;
+    onclick?: (e: MouseEvent) => void;
     href?: string;
-    linkProps?: any;
-};
+    linkProps?: HTMLAnchorAttributes;
+    ref?: HTMLButtonElement | HTMLAnchorElement | null;
+}
+export interface DropdownMenuGroupProps extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+export interface DropdownMenuHeaderProps extends HTMLAttributes<HTMLDivElement> {
+    children?: Snippet;
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
+export interface DropdownMenuSeparatorProps extends HTMLAttributes<HTMLDivElement> {
+    class?: string;
+    ref?: HTMLDivElement | null;
+}
 export {};

package/dist/components/dropdown-menu/index.d.ts

@@ -3,3 +3,4 @@ export { default as DropdownMenuItem } from './components/DropdownMenuItem.svelt
 export { default as DropdownMenuGroup } from './components/DropdownMenuGroup.svelte';
 export { default as DropdownMenuHeader } from './components/DropdownMenuHeader.svelte';
 export { default as DropdownMenuSeparator } from './components/DropdownMenuSeparator.svelte';
+export type { DropdownMenuProps, DropdownMenuItemProps, DropdownMenuGroupProps, DropdownMenuHeaderProps, DropdownMenuSeparatorProps } from './DropdownMenu';

package/dist/components/header/Header.d.ts

@@ -1,8 +1,11 @@
 import { type VariantProps } from "tailwind-variants";
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+export declare const styles: import("tailwind-variants", { with: { "resolution-mode": "import" } }).TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants", { with: { "resolution-mode": "import" } }).TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type HeaderVariants = VariantProps<typeof styles>;
-export interface HeaderProps extends HeaderVariants {
-    children: any;
+export interface HeaderProps extends HTMLAttributes<HTMLElement>, HeaderVariants {
+    children?: Snippet;
     onHamburgerClick?: () => void;
+    ref?: HTMLElement | null;
 }
 export {};

package/dist/components/header/Header.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type HeaderProps } from "./Header";
 import './header.scss';
-declare const Header: import("svelte").Component<HeaderProps, {}, "">;
+declare const Header: import("svelte", { with: { "resolution-mode": "import" } }).Component<HeaderProps, {}, "">;
 type Header = ReturnType<typeof Header>;
 export default Header;

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

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

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

@@ -1,4 +1,6 @@
 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<{
     variant: {
         outlined: string;
@@ -14,7 +16,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react ring-primary-token-5/50", {
+    status: {
+        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", {
     variant: {
         outlined: string;
         filled: string;
@@ -29,6 +35,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
+    status: {
+        error: string;
+        warning: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         outlined: string;
@@ -44,13 +54,19 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react ring-primary-token-5/50", unknown, unknown, undefined>>;
+    status: {
+        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>>;
 type InputVariants = VariantProps<typeof styles>;
-export interface InputProps extends InputVariants {
-    children?: any;
+export interface InputProps extends Omit<HTMLInputAttributes, 'disabled' | 'size' | 'value' | 'prefix'>, InputVariants {
+    children?: Snippet;
     class?: string;
     value?: string;
-    ref?: HTMLInputElement;
-    prefix?: any;
+    ref?: HTMLInputElement | null;
+    prefix?: Snippet;
+    suffix?: Snippet;
+    allowClear?: boolean;
 }
 export {};

package/dist/components/input/Input.js

@@ -1,32 +1,41 @@
 import { tv } from "tailwind-variants";
 export const styles = tv({
-    base: 'relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react ring-primary-token-5/50',
+    base: 'w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-neutral-token-13 placeholder:text-neutral-token-7',
     variants: {
         variant: {
-            outlined: 'border border-neutral-token-5 bg-neutral-token-1 focus:border-primary-token-6 hover:border-primary-token-5 focus-visible:ring-2',
-            filled: 'bg-input border border-neutral-token-4 focus:bg-neutral-token-1 focus:border-primary-token-6 hover:bg-neutral-token-5 focus-visible:ring-2',
-            borderless: 'bg-neutral-token-1 border-0',
+            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',
         },
         disabled: {
-            true: 'cursor-not-allowed opacity-70 text-neutral-token-10',
+            true: 'cursor-not-allowed bg-neutral-token-3 text-neutral-token-7 border-neutral-token-5',
             false: 'cursor-text',
         },
         size: {
-            sm: 'h-6 px-2 text-sm',
-            md: 'h-8 px-3 text-base',
-            lg: 'h-10 px-3 text-lg',
+            sm: 'h-6 px-3 text-sm',
+            md: 'h-8 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)]',
         },
     },
     compoundVariants: [
         {
             variant: 'outlined',
             disabled: true,
-            class: 'hover:border-border'
+            class: 'hover:border-neutral-token-5'
         },
         {
             variant: 'filled',
             disabled: true,
-            class: 'hover:bg-input'
+            class: 'hover:bg-neutral-token-3'
+        },
+        {
+            variant: 'borderless',
+            disabled: true,
+            class: 'hover:bg-transparent'
         }
     ],
     defaultVariants: {

package/dist/components/input/Input.svelte

@@ -1,25 +1,58 @@
 <script lang="ts">
     import {type InputProps, styles} from "./Input";
+    import {IconX} from "../icons";
 
     let {
         children,
         class: className,
         value = $bindable(),
         ref = $bindable(),
-        size,
+        size = 'md',
         disabled,
         variant = 'outlined',
         prefix,
+        suffix,
+        allowClear,
+        status,
         ...props
     }: InputProps = $props();
 
+    function clearInput() {
+        value = '';
+        ref?.focus();
+    }
 </script>
 
-<input
-        type="text"
-        bind:this={ref}
-        class={styles({ variant, disabled , size, className})}
-        {disabled}
-        {...props}
-        bind:value
-/>
+<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">
+            {@render prefix()}
+        </span>
+    {/if}
+
+    <input
+            type="text"
+            bind:this={ref}
+            class={styles({ variant, disabled , size, status, className })}
+            class:pl-9={prefix}
+            class:pr-9={allowClear && value || suffix}
+            {disabled}
+            {...props}
+            bind:value
+    />
+
+    {#if allowClear && value && !disabled}
+        <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"
+                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">
+            {@render suffix()}
+        </span>
+    {/if}
+</div>

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

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

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

@@ -1,8 +1,38 @@
 import { type VariantProps } from "tailwind-variants";
-export declare const styles: import("tailwind-variants").TVReturnType<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
+import type { Snippet } from "svelte";
+import type { HTMLLabelAttributes } from "svelte/elements";
+export declare const styles: import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    required: {
+        true: string;
+    };
+}, undefined, "text-sm font-medium text-neutral-token-13 leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-50", {
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    required: {
+        true: string;
+    };
+}, undefined, import("tailwind-variants").TVReturnType<{
+    size: {
+        sm: string;
+        md: string;
+        lg: string;
+    };
+    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>>;
 type LabelVariants = VariantProps<typeof styles>;
-export interface LabelProps extends LabelVariants {
-    children?: any;
+export interface LabelProps extends HTMLLabelAttributes, LabelVariants {
+    children?: Snippet;
     class?: string;
+    ref?: HTMLLabelElement | null;
 }
 export {};

package/dist/components/label/Label.js

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

package/dist/components/label/Label.svelte

@@ -1,19 +1,19 @@
 <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
-    }: LabelPrimitive.RootProps = $props();
+    }: LabelProps = $props();
 </script>
 
 <LabelPrimitive.Root
-        bind:ref
-        class={cn(
-		"text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-		className
-	)}
-        {...restProps}
+    bind:ref
+    class={cn(styles({ size, required }), className)}
+    {...restProps}
 />

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

@@ -1,4 +1,4 @@
-import { Label as LabelPrimitive } from "bits-ui";
-declare const Label: import("svelte").Component<LabelPrimitive.RootProps, {}, "ref">;
+import { type LabelProps } from "./Label";
+declare const Label: import("svelte").Component<LabelProps, {}, "ref">;
 type Label = ReturnType<typeof Label>;
 export default Label;

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

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

package/dist/components/language-picker-button/LanguagePickerButton.d.ts

@@ -1,12 +1,15 @@
 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<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type LanguagePickerButtonVariants = VariantProps<typeof styles>;
-export interface LanguagePickerButtonProps extends LanguagePickerButtonVariants {
-    children?: any;
+export interface LanguagePickerButtonProps extends HTMLButtonAttributes, LanguagePickerButtonVariants {
+    children?: Snippet;
     class?: string;
     language?: string;
     supportLanguages?: string[];
     basePath?: string;
     open?: boolean;
+    ref?: HTMLButtonElement | null;
 }
 export {};

package/dist/components/language-picker-button/index.d.ts

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

package/dist/components/light-dark-toggle/LightDarkToggle.d.ts

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

package/dist/components/light-dark-toggle/index.d.ts

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

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

@@ -1,15 +1,18 @@
 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 PopoverVariants = VariantProps<typeof styles>;
-export interface PopoverProps extends PopoverVariants {
-    children?: any;
+export interface PopoverProps extends HTMLAttributes<HTMLDivElement>, PopoverVariants {
+    children?: Snippet;
     class?: string;
-    triggerRef: any;
+    triggerRef: HTMLElement | null;
     offset?: number;
     padding?: number;
     open?: boolean;
     focusTriggerAfterClose?: boolean;
     flip?: boolean;
     autoTrigger?: boolean;
+    ref?: HTMLDivElement | null;
 }
 export {};

package/dist/components/popover/Popover.js

@@ -1,5 +1,4 @@
 import { tv } from "tailwind-variants";
-import { shift } from "@floating-ui/dom";
 export const styles = tv({
     base: '',
     variants: {},

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

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

package/dist/components/popover-responsive/PopoverResponsive.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 PopoverResponsiveVariants = VariantProps<typeof styles>;
-export interface PopoverResponsiveProps extends PopoverResponsiveVariants {
-    children?: any;
+export interface PopoverResponsiveProps extends HTMLAttributes<HTMLDivElement>, PopoverResponsiveVariants {
+    children?: Snippet;
     class?: string;
+    ref?: HTMLDivElement | null;
 }
 export {};

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

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

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

@@ -1,4 +1,6 @@
 import { type VariantProps } from "tailwind-variants";
+import type { Snippet } from "svelte";
+import type { HTMLSelectAttributes } from "svelte/elements";
 export declare const styles: import("tailwind-variants").TVReturnType<{
     variant: {
         outlined: string;
@@ -14,7 +16,11 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react ring-primary-token-5/50", {
+    status: {
+        error: string;
+        warning: string;
+    };
+}, undefined, "w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-neutral-token-13 appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E)] bg-[length:16px] bg-[right_0.75rem_center] bg-no-repeat", {
     variant: {
         outlined: string;
         filled: string;
@@ -29,6 +35,10 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
+    status: {
+        error: string;
+        warning: string;
+    };
 }, undefined, import("tailwind-variants").TVReturnType<{
     variant: {
         outlined: string;
@@ -44,12 +54,16 @@ export declare const styles: import("tailwind-variants").TVReturnType<{
         md: string;
         lg: string;
     };
-}, undefined, "relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react ring-primary-token-5/50", unknown, unknown, undefined>>;
+    status: {
+        error: string;
+        warning: string;
+    };
+}, undefined, "w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-neutral-token-13 appearance-none bg-[url('data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E)] bg-[length:16px] bg-[right_0.75rem_center] bg-no-repeat", unknown, unknown, undefined>>;
 type SelectVariants = VariantProps<typeof styles>;
-export interface SelectProps extends SelectVariants {
-    children?: any;
+export interface SelectProps extends Omit<HTMLSelectAttributes, 'disabled' | 'size' | 'value'>, SelectVariants {
+    children?: Snippet;
     class?: string;
     value?: string;
-    ref?: HTMLInputElement;
+    ref?: HTMLSelectElement | null;
 }
 export {};

package/dist/components/select/Select.js

@@ -1,20 +1,24 @@
 import { tv } from "tailwind-variants";
 export const styles = tv({
-    base: 'relative w-full inline-flex items-center justify-center rounded outline-none transition-all duration-element-react ring-primary-token-5/50',
+    base: 'w-full inline-flex items-center justify-center rounded-md outline-none font-normal text-neutral-token-13 appearance-none bg-[url(\'data:image/svg+xml;charset=utf-8,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27 fill=%27none%27 stroke=%27currentColor%27 stroke-width=%272%27 stroke-linecap=%27round%27 stroke-linejoin=%27round%27%3E%3Cpolyline points=%276 9 12 15 18 9%27/%3E%3C/svg%3E)] bg-[length:16px] bg-[right_0.75rem_center] bg-no-repeat',
     variants: {
         variant: {
-            outlined: 'border border-neutral-token-5 bg-neutral-token-1 focus:border-primary-token-6 hover:border-primary-token-5 focus-visible:ring-2',
-            filled: 'bg-neutral-token-4 border border-neutral-token-4 focus:bg-neutral-token-1 focus:border-primary-token-6 hover:bg-neutral-token-4 focus-visible:ring-2',
-            borderless: 'bg-neutral-token-1 border-0',
+            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',
         },
         disabled: {
-            true: 'cursor-not-allowed opacity-70 text-neutral-token-10',
-            false: 'cursor-text',
+            true: 'cursor-not-allowed bg-neutral-token-3 text-neutral-token-7 border-neutral-token-5',
+            false: 'cursor-pointer',
         },
         size: {
-            sm: 'h-6 px-2 text-sm',
-            md: 'h-8 px-3 text-base',
-            lg: 'h-10 px-3 text-lg',
+            sm: 'h-6 px-3 pr-8 text-sm',
+            md: 'h-8 px-3 pr-8 text-sm',
+            lg: 'h-10 px-3 pr-10 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)]',
         },
     },
     compoundVariants: [
@@ -27,6 +31,11 @@ export const styles = tv({
             variant: 'filled',
             disabled: true,
             class: 'hover:bg-neutral-token-3'
+        },
+        {
+            variant: 'borderless',
+            disabled: true,
+            class: 'hover:bg-transparent'
         }
     ],
     defaultVariants: {

package/dist/components/select/Select.svelte

@@ -3,13 +3,26 @@
 
     import {type SelectProps, styles} from "./Select";
 
-    let {children, variant, disabled, size, class: className, value = $bindable(), ...props}: SelectProps = $props();
+    let {
+        children,
+        variant = 'outlined',
+        disabled,
+        size = 'md',
+        status,
+        class: className,
+        value = $bindable(),
+        ref = $bindable(),
+        ...props
+    }: SelectProps = $props();
 
 </script>
 
-<select {...props}
-        bind:value
-        class={"tera-select pr-3" + styles({ variant, disabled , size, className: className})}
+<select
+    bind:this={ref}
+    bind:value
+    class={styles({ variant, disabled, size, status, className })}
+    {disabled}
+    {...props}
 >
     {@render children?.()}
 </select>

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

@@ -1,5 +1,5 @@
 import './select.scss';
 import { type SelectProps } from "./Select";
-declare const Select: import("svelte").Component<SelectProps, {}, "value">;
+declare const Select: import("svelte").Component<SelectProps, {}, "value" | "ref">;
 type Select = ReturnType<typeof Select>;
 export default Select;

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

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

package/dist/components/side-navigation/SideNavigation.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<{}, undefined, "", {}, undefined, import("tailwind-variants").TVReturnType<{}, undefined, "", unknown, unknown, undefined>>;
 type SideNavigationVariants = VariantProps<typeof styles>;
 export type SideNavigationItem = {
@@ -7,13 +9,14 @@ export type SideNavigationItem = {
     icon?: any;
     title: string;
 };
-export interface SideNavigationProps extends SideNavigationVariants {
-    children?: any;
+export interface SideNavigationProps extends HTMLAttributes<HTMLElement>, SideNavigationVariants {
+    children?: Snippet;
     class?: string;
     sideNavHref?: string;
     language?: string;
     items?: SideNavigationItem[];
-    bottomChildren?: any;
+    bottomChildren?: Snippet;
+    ref?: HTMLElement | null;
 }
 export declare const SCREEN_BREAK_POINTS: {
     sm: number;

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

@@ -1,4 +1,4 @@
 export { default as SideNavigation } from './SideNavigation.svelte';
 export { default as SideNavigationLayout } from './SideNavigationLayout.svelte';
 export { toggleSideNavigation } from './SideNavigation';
-export type { SideNavigationItem } from "./SideNavigation";
+export type { SideNavigationItem, SideNavigationProps } from "./SideNavigation";