uisv 0.0.13 → 0.0.14

package/dist/components/button/button.svelte

@@ -1,105 +0,0 @@
-<script lang="ts">
-	// import { FORM_LOADING_CONTEXT_KEY } from '../../utils/keys.js';
-	import { isSnippet, type ButtonProps, BUTTON_VARIANTS } from '../../index.js';
-
-	// let form_loading = getContext<{ value: boolean } | undefined>(FORM_LOADING_CONTEXT_KEY);
-	let {
-		ref = $bindable(),
-		size = 'md',
-		variant = 'solid',
-		color = 'primary',
-		iconposition = 'left',
-		children,
-		// active,
-		// activecolor,
-		// activevariant,
-		block,
-		label,
-		loadingauto,
-		onclick,
-		ui = {},
-		disabled,
-		href,
-		icon,
-		loading,
-		loadingicon,
-		target,
-		type,
-	}: ButtonProps = $props();
-
-	let internal_loading = $state(false);
-	const is_loading = $derived.by(() => {
-		if (loading) return true;
-		if (loadingauto) return internal_loading;
-		return false;
-	});
-
-	const classes = $derived(
-		BUTTON_VARIANTS({ variant, color, size, block, disabled: disabled || is_loading }),
-	);
-
-	const only_icon = $derived(!(children || label) && !!icon);
-
-	async function onClickWrapper(event: MouseEvent) {
-		if (!onclick) return;
-		internal_loading = true;
-
-		await onclick(event);
-
-		internal_loading = false;
-	}
-</script>
-
-{#if href}
-	<a
-		{href}
-		{target}
-		class={classes.base({
-			class: [only_icon ? 'px-0 aspect-square justify-center' : '', 'cursor-pointer', ui.base],
-		})}
-		onclick={onClickWrapper}
-	>
-		{@render Content()}
-	</a>
-{:else}
-	<button
-		{type}
-		disabled={disabled || is_loading}
-		class={classes.base({
-			class: [only_icon ? 'px-0 aspect-square justify-center' : '', ui.base],
-		})}
-		onclick={onClickWrapper}
-	>
-		{@render Content()}
-	</button>
-{/if}
-
-{#snippet Content()}
-	{#if iconposition === 'left'}
-		{@render Icon()}
-	{/if}
-
-	{#if label}
-		{label}
-	{:else}
-		{@render children?.()}
-	{/if}
-
-	{#if iconposition !== 'left'}
-		{@render Icon()}
-	{/if}
-{/snippet}
-
-{#snippet Icon()}
-	{@const IconCom = is_loading ? loadingicon || '-ph-lucide-loader-circle' : icon}
-
-	{#if IconCom}
-		{#if typeof IconCom === 'string'}
-			<div class={classes.icon({ class: [is_loading && 'animate-spin', IconCom, ui.icon] })}></div>
-		{:else if isSnippet(IconCom)}
-			{@render IconCom()}
-		{:else}
-			<IconCom />
-		{/if}
-	{/if}
-{/snippet}

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

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

package/dist/components/button/index.js

@@ -1,4 +0,0 @@
-import {} from 'svelte';
-import {} from '../../index.js';
-export * from './style.js';
-export { default as Button } from './button.svelte';

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

@@ -1,148 +0,0 @@
-export declare const BUTTON_VARIANTS: import("tailwind-variants").TVReturnType<{
-    color: {
-        primary: string;
-        surface: string;
-        error: string;
-        success: string;
-        info: string;
-        warning: string;
-    };
-    variant: {
-        link: string;
-        solid: string;
-        outline: string;
-        soft: string;
-        subtle: string;
-        ghost: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            icon: string;
-        };
-        sm: {
-            base: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            icon: string;
-        };
-        xl: {
-            base: string;
-            icon: string;
-        };
-    };
-    block: {
-        true: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-}, {
-    icon: string;
-    base: string;
-}, undefined, {
-    color: {
-        primary: string;
-        surface: string;
-        error: string;
-        success: string;
-        info: string;
-        warning: string;
-    };
-    variant: {
-        link: string;
-        solid: string;
-        outline: string;
-        soft: string;
-        subtle: string;
-        ghost: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            icon: string;
-        };
-        sm: {
-            base: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            icon: string;
-        };
-        xl: {
-            base: string;
-            icon: string;
-        };
-    };
-    block: {
-        true: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-}, {
-    icon: string;
-    base: string;
-}, import("tailwind-variants").TVReturnType<{
-    color: {
-        primary: string;
-        surface: string;
-        error: string;
-        success: string;
-        info: string;
-        warning: string;
-    };
-    variant: {
-        link: string;
-        solid: string;
-        outline: string;
-        soft: string;
-        subtle: string;
-        ghost: string;
-    };
-    size: {
-        xs: {
-            base: string;
-            icon: string;
-        };
-        sm: {
-            base: string;
-            icon: string;
-        };
-        md: {
-            base: string;
-            icon: string;
-        };
-        lg: {
-            base: string;
-            icon: string;
-        };
-        xl: {
-            base: string;
-            icon: string;
-        };
-    };
-    block: {
-        true: string;
-    };
-    disabled: {
-        true: string;
-        false: string;
-    };
-}, {
-    icon: string;
-    base: string;
-}, undefined, unknown, unknown, undefined>>;

package/dist/components/button/style.js

@@ -1,248 +0,0 @@
-import { tv } from 'tailwind-variants';
-export const BUTTON_VARIANTS = tv({
-    slots: {
-        icon: '',
-        base: 'transition flex-inline items-center font-sans',
-    },
-    variants: {
-        color: {
-            primary: '',
-            surface: '',
-            error: '',
-            success: '',
-            info: '',
-            warning: '',
-        },
-        variant: {
-            link: '',
-            solid: 'text-inverted',
-            outline: 'border',
-            soft: '',
-            subtle: 'border',
-            ghost: '',
-        },
-        size: {
-            xs: {
-                base: 'font-medium text-xs px-2 h-6 rounded gap-1',
-                icon: 'size-4',
-            },
-            sm: { base: 'font-medium text-xs px-2 h-7 rounded gap-1', icon: 'size-4' },
-            md: { base: 'font-medium text-sm rounded-md px-2 h-8 gap-2', icon: 'size-5' },
-            lg: { base: 'font-medium text-sm px-3 h-9 rounded-md gap-2', icon: 'size-6' },
-            xl: { base: 'font-medium px-3 h-10 rounded-md gap-2', icon: 'size-6' },
-        },
-        block: {
-            true: 'w-full',
-        },
-        disabled: {
-            true: 'cursor-not-allowed',
-            false: 'cursor-default',
-        },
-    },
-    compoundVariants: [
-        {
-            color: 'primary',
-            variant: 'solid',
-            class: 'bg-primary-500 hover:(bg-primary-400)',
-        },
-        {
-            color: 'surface',
-            variant: 'solid',
-            class: 'bg-surface-inverted text-inverted hover:(bg-toned)',
-        },
-        {
-            color: 'info',
-            variant: 'solid',
-            class: 'bg-info-500 hover:(bg-info-400)',
-        },
-        {
-            color: 'success',
-            variant: 'solid',
-            class: 'bg-success-500 hover:(bg-success-400)',
-        },
-        {
-            color: 'error',
-            variant: 'solid',
-            class: 'bg-error-500 hover:(bg-error-400)',
-        },
-        {
-            color: 'warning',
-            variant: 'solid',
-            class: 'bg-warning-500 hover:(bg-warning-400)',
-        },
-        {
-            color: 'primary',
-            variant: 'outline',
-            class: {
-                base: [
-                    'border-primary/50 text-primary-500 hover:(bg-primary-50)',
-                    'dark:hover:bg-primary-950',
-                ],
-            },
-        },
-        {
-            color: 'surface',
-            variant: 'outline',
-            class: {
-                base: [
-                    'border-surface-accented text-surface-inverted hover:bg-surface/10',
-                    'dark:hover:bg-surface-800',
-                ],
-            },
-        },
-        {
-            color: 'info',
-            variant: 'outline',
-            class: {
-                base: ['border-info/50 text-blue-500 hover:bg-info/10', 'dark:hover:bg-info-950'],
-            },
-        },
-        {
-            color: 'success',
-            variant: 'outline',
-            class: {
-                base: [
-                    'border-success/50 text-success-500 hover:bg-success/10',
-                    'dark:hover:bg-success-950',
-                ],
-            },
-        },
-        {
-            color: 'error',
-            variant: 'outline',
-            class: {
-                base: ['border-red/50 text-red-500 hover:bg-red/10', 'dark:hover:bg-red-950'],
-            },
-        },
-        {
-            color: 'warning',
-            variant: 'outline',
-            class: {
-                base: [
-                    'border-warning/50 text-warning-500 hover:(bg-warning/10)',
-                    'dark:hover:bg-warning-950',
-                ],
-            },
-        },
-        {
-            color: 'primary',
-            variant: 'soft',
-            class: 'bg-primary-50 text-primary-500 hover:(bg-primary-100)',
-        },
-        {
-            color: 'surface',
-            variant: 'soft',
-            class: 'bg-surface-100 text-surface-800 hover:(bg-surface-200)',
-        },
-        {
-            color: 'info',
-            variant: 'soft',
-            class: 'bg-blue-100 text-blue-500 hover:(bg-blue-50)',
-        },
-        {
-            color: 'success',
-            variant: 'soft',
-            class: 'bg-green-100 text-green-500 hover:(bg-green-50)',
-        },
-        {
-            color: 'error',
-            variant: 'soft',
-            class: 'bg-red-100 text-red-500 hover:(bg-red-50)',
-        },
-        {
-            color: 'warning',
-            variant: 'soft',
-            class: 'bg-yellow-100 text-yellow-500 hover:(bg-yellow-50)',
-        },
-        {
-            color: 'primary',
-            variant: 'subtle',
-            class: 'bg-primary-50 text-primary-500 border-primary-200 hover:(bg-primary-100)',
-        },
-        {
-            color: 'surface',
-            variant: 'subtle',
-            class: 'bg-surface-50 text-surface-800 border-surface-300 hover:(bg-surface-100)',
-        },
-        {
-            color: 'info',
-            variant: 'subtle',
-            class: 'bg-blue-50 text-blue-600 border-blue-200 hover:(bg-blue-100)',
-        },
-        {
-            color: 'success',
-            variant: 'subtle',
-            class: 'bg-green-100 text-green-600 border-green-300 hover:(bg-green-100)',
-        },
-        {
-            color: 'error',
-            variant: 'subtle',
-            class: 'bg-red-50 text-red-600 border-red-200 hover:(bg-red-100)',
-        },
-        {
-            color: 'warning',
-            variant: 'subtle',
-            class: 'bg-yellow-50 text-yellow-600 border-yellow-300 hover:(bg-yellow-100)',
-        },
-        {
-            color: 'primary',
-            variant: 'ghost',
-            class: 'text-primary-500 hover:(bg-primary-100)',
-        },
-        {
-            color: 'surface',
-            variant: 'ghost',
-            class: 'text-surface-inverted hover:(bg-surface-elevated text-surface-inverted)',
-        },
-        {
-            color: 'info',
-            variant: 'ghost',
-            class: 'text-blue-600 hover:(bg-blue-100)',
-        },
-        {
-            color: 'success',
-            variant: 'ghost',
-            class: 'text-green-600 hover:(bg-green-100)',
-        },
-        {
-            color: 'error',
-            variant: 'ghost',
-            class: 'text-red-600 hover:(bg-red-100)',
-        },
-        {
-            color: 'warning',
-            variant: 'ghost',
-            class: 'text-yellow-600 hover:(bg-yellow-100)',
-        },
-        {
-            color: 'primary',
-            variant: 'link',
-            class: 'text-primary-500 hover:(text-primary-400)',
-        },
-        {
-            color: 'surface',
-            variant: 'link',
-            class: 'text-muted hover:(text-surface-inverted)',
-        },
-        {
-            color: 'info',
-            variant: 'link',
-            class: 'text-blue-500 hover:(text-blue-400)',
-        },
-        {
-            color: 'success',
-            variant: 'link',
-            class: 'text-green-500 hover:(text-green-400)',
-        },
-        {
-            color: 'error',
-            variant: 'link',
-            class: 'text-red-500 hover:(text-red-400)',
-        },
-        {
-            color: 'warning',
-            variant: 'link',
-            class: 'text-yellow-500 hover:(text-yellow-400)',
-        },
-    ],
-});

package/dist/components/input/index.js

@@ -1,2 +0,0 @@
-export { default as Input } from './input.svelte';
-export * from './style.js';

package/dist/components/input/input.svelte

@@ -1,103 +0,0 @@
-<script lang="ts">
-	import { isComponent, isSnippet } from '../../utilities.svelte.js';
-	import { type InputProps, INPUT_VARIANTS } from './index.js';
-	import { maska } from 'maska/svelte';
-
-	let {
-		type,
-		value = $bindable(),
-		color = 'primary',
-		variant = 'outline',
-		size = 'md',
-		icon,
-		iconposition,
-		disabled,
-		highlight,
-		leading,
-		loading,
-		loadingicon = 'i-lucide-loader-circle',
-		required,
-		trailing,
-		mask,
-		ui = {},
-		...rest
-	}: InputProps = $props();
-	const id = $props.id();
-
-	const variants = $derived(
-		INPUT_VARIANTS({
-			size,
-			color,
-			variant,
-			highlight,
-			loading,
-			leading: !!leading || (!!icon && iconposition === 'leading') || loading,
-			trailing: !!trailing || (!!icon && iconposition === 'trailing'),
-			type: type === 'file' ? 'file' : undefined,
-		}),
-	);
-</script>
-
-<div class={variants.root({ class: ui.root })}>
-	{#if leading || (icon && iconposition === 'leading') || loading}
-		{@const TrailingIcon = loading ? loadingicon : icon}
-
-		<span class={variants.leading({ class: ui.leading })}>
-			{#if !!leading && !loading}
-				{#if typeof leading === 'string'}
-					{leading}
-				{:else if isSnippet(leading)}
-					{@render leading()}
-				{:else if isComponent(leading)}
-					{@const Leading = leading}
-					<Leading />
-				{/if}
-			{:else if typeof TrailingIcon === 'string'}
-				<div
-					class={variants.icon({
-						class: [loading && 'animate-spin', TrailingIcon, ui.icon],
-					})}
-				></div>
-			{:else if isSnippet(TrailingIcon)}
-				{@render TrailingIcon()}
-			{:else if isComponent(TrailingIcon)}
-				<TrailingIcon class={variants.icon({ class: [ui.icon] })} />
-			{/if}
-		</span>
-	{/if}
-
-	<input
-		{id}
-		{type}
-		{...rest}
-		class={variants.base({ class: [ui.base] })}
-		{...rest}
-		use:maska={mask}
-	/>
-
-	{#if trailing || (icon && iconposition === 'trailing')}
-		<span class={variants.trailing({ class: ui.trailing })}>
-			{#if !!trailing}
-				{#if typeof trailing === 'string'}
-					{trailing}
-				{:else if isSnippet(trailing)}
-					{@render trailing()}
-				{:else if isComponent(trailing)}
-					{@const Trailing = trailing}
-					<Trailing />
-				{/if}
-			{:else if typeof icon === 'string'}
-				<div
-					class={variants.icon({
-						class: [icon, ui.icon],
-					})}
-				></div>
-			{:else if isSnippet(icon)}
-				{@render icon()}
-			{:else if isComponent(icon)}
-				{@const Icon = icon}
-				<Icon class={variants.icon({ class: [ui.icon] })} />
-			{/if}
-		</span>
-	{/if}
-</div>

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

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