uisv 0.0.11 → 0.0.13

package/dist/components/banner.svelte

@@ -0,0 +1,254 @@
+<script module lang="ts">
+	import { isSnippet, type PropColor, type ButtonProps, Button } from '../index.js';
+	import type { Component, Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+	import { defu } from 'defu';
+	import { useId } from 'bits-ui';
+
+	export type BannerProps = {
+		title: string | Snippet;
+		icon?: string | Snippet | Component;
+		color?: PropColor;
+		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		actions?: ButtonProps[];
+		close?: boolean | ButtonProps;
+		href?: string;
+		target?: string;
+		ui?: {
+			base?: ClassNameValue;
+			icon?: ClassNameValue;
+			description?: ClassNameValue;
+			title?: ClassNameValue;
+		};
+		onclose?: () => void | Promise<void>;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		title,
+		close,
+		icon,
+		href,
+		target,
+		actions = [],
+		color = 'primary',
+		variant = 'solid',
+		ui = {},
+		onclose = () => {},
+	}: BannerProps = $props();
+	const id = useId();
+
+	const close_props = $derived.by(() => {
+		return defu(typeof close === 'boolean' ? {} : close, {
+			icon: 'i-lucide-x',
+			variant: 'link',
+			color: variant === 'solid' ? 'surface' : color,
+			ui: {
+				icon: variant === 'solid' ? 'text-white' : '',
+			},
+		} as ButtonProps);
+	});
+	const classes = $derived.by(() =>
+		tv({
+			slots: {
+				base: 'flex items-center gap-2 font-sans p-4',
+				icon: 'pi size-6',
+				actions: '',
+				title: '',
+			},
+			variants: {
+				color: {
+					primary: '',
+					surface: '',
+					info: '',
+					success: '',
+					warning: '',
+					error: '',
+				},
+				variant: {
+					solid: {
+						base: 'text-white',
+						description: 'text-white/90',
+					},
+					outline: 'border',
+					soft: '',
+					subtle: 'border',
+				},
+			},
+			compoundVariants: [
+				{
+					variant: 'solid',
+					color: 'primary',
+					class: 'bg-primary-500',
+				},
+				{
+					variant: 'solid',
+					color: 'surface',
+					class: 'bg-surface-900',
+				},
+				{
+					variant: 'solid',
+					color: 'info',
+					class: 'bg-info-500',
+				},
+				{
+					variant: 'solid',
+					color: 'success',
+					class: 'bg-success-500',
+				},
+				{
+					variant: 'solid',
+					color: 'warning',
+					class: 'bg-warning-500',
+				},
+				{
+					variant: 'solid',
+					color: 'error',
+					class: 'bg-error-500',
+				},
+
+				{
+					variant: 'outline',
+					color: 'primary',
+					class: 'border-primary-300 text-primary-500',
+				},
+				{
+					variant: 'outline',
+					color: 'surface',
+					class: 'border-surface-300 text-surface-900',
+				},
+				{
+					variant: 'outline',
+					color: 'info',
+					class: 'border-info-300 text-info-500',
+				},
+				{
+					variant: 'outline',
+					color: 'success',
+					class: 'border-success-300 text-success-500',
+				},
+				{
+					variant: 'outline',
+					color: 'warning',
+					class: 'border-warning-300 text-warning-500',
+				},
+				{
+					variant: 'outline',
+					color: 'error',
+					class: 'border-error-300 text-error-500',
+				},
+
+				{
+					variant: 'soft',
+					color: 'primary',
+					class: 'bg-primary-100 text-primary-500',
+				},
+				{
+					variant: 'soft',
+					color: 'surface',
+					class: 'bg-surface-50 text-surface-900',
+				},
+				{
+					variant: 'soft',
+					color: 'info',
+					class: 'bg-info-50 text-info-500',
+				},
+				{
+					variant: 'soft',
+					color: 'success',
+					class: 'bg-success-50 text-success-500',
+				},
+				{
+					variant: 'soft',
+					color: 'warning',
+					class: 'bg-warning-50 text-warning-500',
+				},
+				{
+					variant: 'soft',
+					color: 'error',
+					class: 'bg-error-50 text-error-500',
+				},
+
+				{
+					variant: 'subtle',
+					color: 'primary',
+					class: 'bg-primary-100 text-primary-500 border-primary-300',
+				},
+				{
+					variant: 'subtle',
+					color: 'surface',
+					class: 'bg-surface-50 text-surface-900 border-surface-300',
+				},
+				{
+					variant: 'subtle',
+					color: 'info',
+					class: 'bg-info-50 text-info-500 border-info-300',
+				},
+				{
+					variant: 'subtle',
+					color: 'success',
+					class: 'bg-success-50 text-success-500 border-success-300',
+				},
+				{
+					variant: 'subtle',
+					color: 'warning',
+					class: 'bg-warning-50 text-warning-500 border-warning-300',
+				},
+				{
+					variant: 'subtle',
+					color: 'error',
+					class: 'bg-error-50 text-error-500  border-error-300',
+				},
+			],
+		})({ color, variant }),
+	);
+</script>
+
+<svelte:element
+	this={href ? 'a' : 'button'}
+	{href}
+	{target}
+	class={classes.base({ class: [ui.base] })}
+>
+	<div class="flex flex-grow gap-2 text-sm items-center">
+		{#if icon}
+			<div class="size-6">
+				{#if typeof icon === 'string'}
+					<div class={classes.icon({ class: [icon] })}></div>
+				{:else if isSnippet(icon)}
+					{@render icon()}
+				{:else}
+					{@const Icon = icon}
+					<Icon />
+				{/if}
+			</div>
+		{/if}
+
+		<div class={classes.title({ class: [ui.title] })}>
+			{#if isSnippet(title)}
+				{@render title()}
+			{:else}
+				{title}
+			{/if}
+		</div>
+
+		{#if actions.length > 0}
+			{#each actions as action (action.label)}
+				<Button
+					{...defu(action, {
+						size: 'xs',
+						color: 'surface',
+					} as ButtonProps)}
+				/>
+			{/each}
+		{/if}
+	</div>
+
+	{#if close}
+		<div>
+			<Button {...close_props} onclick={onclose} />
+		</div>
+	{/if}
+</svelte:element>

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

@@ -0,0 +1,23 @@
+import { type PropColor, type ButtonProps } from '../index.js';
+import type { Component, Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type BannerProps = {
+    title: string | Snippet;
+    icon?: string | Snippet | Component;
+    color?: PropColor;
+    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    actions?: ButtonProps[];
+    close?: boolean | ButtonProps;
+    href?: string;
+    target?: string;
+    ui?: {
+        base?: ClassNameValue;
+        icon?: ClassNameValue;
+        description?: ClassNameValue;
+        title?: ClassNameValue;
+    };
+    onclose?: () => void | Promise<void>;
+};
+declare const Banner: Component<BannerProps, {}, "">;
+type Banner = ReturnType<typeof Banner>;
+export default Banner;

package/dist/components/button/button.svelte

@@ -0,0 +1,105 @@
+<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

@@ -0,0 +1,4 @@
+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.d.ts

@@ -0,0 +1,48 @@
+import { type Component, type Snippet } from 'svelte';
+import { type PropColor } from '../../index.js';
+import type { ClassNameValue } from 'tailwind-merge';
+export * from './style.js';
+export { default as Button } from './button.svelte';
+export type ButtonProps = {
+    /** The underlying DOM element being rendered. You can bind to this to get a reference to the element. */
+    ref?: HTMLButtonElement | HTMLAnchorElement;
+    /** Where to display the linked URL, as the name for a browsing context. */
+    target?: null | '_blank' | '_parent' | '_self' | '_top' | (string & {});
+    /** Force the link to be active independent of the current route. */
+    disabled?: boolean;
+    /** The type of the button when not a link. */
+    type?: 'submit' | 'reset' | 'button' | null | undefined;
+    /** When true, the icon will be displayed on the right side. */
+    loadingicon?: string | Snippet | Component;
+    /** When true, the loading icon will be displayed. */
+    loading?: boolean;
+    /** The position of the icon, including the loading icon */
+    iconposition?: 'left' | 'right';
+    /** Icon when `loading` is `false` */
+    icon?: string | Snippet | Component;
+    /** Route Location the link should navigate to when clicked on. */
+    href?: string;
+    label?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: PropColor;
+    /**
+     * @defaultValue 'solid'
+     */
+    variant?: 'link' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost';
+    /**
+     * @defaultValue 'md'
+     */
+    size?: 'md' | 'xs' | 'sm' | 'lg' | 'xl';
+    /** Render the button full width. */
+    block?: boolean;
+    /** Set loading state automatically based on the `@click` promise state */
+    loadingauto?: boolean;
+    onclick?: (event: MouseEvent) => void | Promise<void>;
+    ui?: {
+        base?: ClassNameValue;
+        icon?: ClassNameValue;
+    };
+    children?: Snippet;
+};

package/dist/components/button/index.js

@@ -0,0 +1,4 @@
+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

@@ -0,0 +1,148 @@
+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>>;