uisv 0.0.14 → 0.0.15

package/dist/components/alert.svelte

@@ -1,5 +1,11 @@
 <script module lang="ts">
-	import { type PropColor, isSnippet, type ButtonProps, Button } from '../index.js';
+	import {
+		type PropColor,
+		isSnippet,
+		type ButtonProps,
+		Button,
+		type PropVariant,
+	} from '../index.js';
 	import type { Component, Snippet } from 'svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
@@ -10,7 +16,7 @@
 		description?: string | Snippet;
 		icon?: string | Snippet | Component;
 		color?: PropColor;
-		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
 		position?: 'bottom' | 'right';
 		actions?: ButtonProps[];
 		close?: boolean | ButtonProps;

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

@@ -1,4 +1,4 @@
-import { type PropColor, type ButtonProps } from '../index.js';
+import { type PropColor, type ButtonProps, type PropVariant } from '../index.js';
 import type { Component, Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 export type AlertProps = {
@@ -6,7 +6,7 @@ export type AlertProps = {
     description?: string | Snippet;
     icon?: string | Snippet | Component;
     color?: PropColor;
-    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    variant?: Exclude<PropVariant, 'none' | 'ghost'>;
     position?: 'bottom' | 'right';
     actions?: ButtonProps[];
     close?: boolean | ButtonProps;

package/dist/components/badge.svelte

@@ -1,13 +1,13 @@
 <script lang="ts" module>
 	import type { Component, Snippet } from 'svelte';
 	import { tv } from 'tailwind-variants';
-	import { type PropColor, isSnippet } from '../index.js';
+	import { type PropColor, type PropVariant, isSnippet } from '../index.js';
 	import type { ClassNameValue } from 'tailwind-merge';
 
 	export type BadgeProps = {
 		label?: string;
 		color?: PropColor;
-		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		icon?: string | Snippet | Component;
 		trailingicon?: boolean;
@@ -76,22 +76,22 @@
 				{
 					color: 'info',
 					variant: 'solid',
-					class: 'bg-blue-500',
+					class: 'bg-info-500',
 				},
 				{
 					color: 'success',
 					variant: 'solid',
-					class: 'bg-green-500',
+					class: 'bg-success-500',
 				},
 				{
 					color: 'error',
 					variant: 'solid',
-					class: 'bg-red-500',
+					class: 'bg-error-500',
 				},
 				{
 					color: 'warning',
 					variant: 'solid',
-					class: 'bg-yellow-500',
+					class: 'bg-warning-500',
 				},
 
 				{
@@ -107,22 +107,22 @@
 				{
 					color: 'info',
 					variant: 'outline',
-					class: 'border-blue-300 text-blue-500',
+					class: 'border-info-300 text-info-500',
 				},
 				{
 					color: 'success',
 					variant: 'outline',
-					class: 'border-green-300 text-green-500',
+					class: 'border-green-300 text-success-500',
 				},
 				{
 					color: 'error',
 					variant: 'outline',
-					class: 'border-red-300 text-red-500',
+					class: 'border-error-300 text-error-500',
 				},
 				{
 					color: 'warning',
 					variant: 'outline',
-					class: 'border-yellow-300 text-yellow-500',
+					class: 'border-warning-300 text-warning-500',
 				},
 
 				{
@@ -138,22 +138,22 @@
 				{
 					color: 'info',
 					variant: 'soft',
-					class: 'bg-blue-100 text-blue-500',
+					class: 'bg-info-100 text-info-500',
 				},
 				{
 					color: 'success',
 					variant: 'soft',
-					class: 'bg-green-100 text-green-500',
+					class: 'bg-success-100 text-success-500',
 				},
 				{
 					color: 'error',
 					variant: 'soft',
-					class: 'bg-red-100 text-red-500',
+					class: 'bg-error-100 text-error-500',
 				},
 				{
 					color: 'warning',
 					variant: 'soft',
-					class: 'bg-yellow-100 text-yellow-500 ',
+					class: 'bg-warning-100 text-warning-500 ',
 				},
 
 				{
@@ -169,22 +169,22 @@
 				{
 					color: 'info',
 					variant: 'subtle',
-					class: 'bg-blue-50 text-blue-600 border-blue-200',
+					class: 'bg-info-50 text-info-600 border-info-200',
 				},
 				{
 					color: 'success',
 					variant: 'subtle',
-					class: 'bg-green-100 text-green-600 border-green-300',
+					class: 'bg-success-100 text-success-600 border-success-300',
 				},
 				{
 					color: 'error',
 					variant: 'subtle',
-					class: 'bg-red-50 text-red-600 border-red-200',
+					class: 'bg-error-50 text-error-600 border-error-200',
 				},
 				{
 					color: 'warning',
 					variant: 'subtle',
-					class: 'bg-yellow-50 text-yellow-600 border-yellow-300',
+					class: 'bg-warning-50 text-warning-600 border-warning-300',
 				},
 			],
 		})({ variant, size, color });

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

@@ -1,10 +1,10 @@
 import type { Component, Snippet } from 'svelte';
-import { type PropColor } from '../index.js';
+import { type PropColor, type PropVariant } from '../index.js';
 import type { ClassNameValue } from 'tailwind-merge';
 export type BadgeProps = {
     label?: string;
     color?: PropColor;
-    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    variant?: Exclude<PropVariant, 'none' | 'ghost'>;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     icon?: string | Snippet | Component;
     trailingicon?: boolean;

package/dist/components/banner.svelte

@@ -1,5 +1,11 @@
 <script module lang="ts">
-	import { isSnippet, type PropColor, type ButtonProps, Button } from '../index.js';
+	import {
+		isSnippet,
+		type PropColor,
+		type ButtonProps,
+		Button,
+		type PropVariant,
+	} from '../index.js';
 	import type { Component, Snippet } from 'svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
@@ -10,7 +16,7 @@
 		title: string | Snippet;
 		icon?: string | Snippet | Component;
 		color?: PropColor;
-		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
 		actions?: ButtonProps[];
 		close?: boolean | ButtonProps;
 		href?: string;

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

@@ -1,11 +1,11 @@
-import { type PropColor, type ButtonProps } from '../index.js';
+import { type PropColor, type ButtonProps, type PropVariant } 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';
+    variant?: Exclude<PropVariant, 'none' | 'ghost'>;
     actions?: ButtonProps[];
     close?: boolean | ButtonProps;
     href?: string;

package/dist/components/breadcrumb.svelte

@@ -0,0 +1,75 @@
+<script module lang="ts">
+	import type { Component, Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { Button, Icon, type ButtonProps } from './index.js';
+	import { tv } from 'tailwind-variants';
+	import { isSnippet } from '../utilities.svelte.js';
+
+	export type BreadcrumbItem = Omit<ButtonProps, 'label'> & {
+		label?: string;
+		icon?: string | Component;
+		snippet?: string;
+		[key: string]: any;
+	};
+
+	export type BreadcrumbProps = {
+		items: BreadcrumbItem[];
+		seperator?: string | Component | Snippet;
+		labelkey?: string;
+		[key: string]: any | Snippet<[BreadcrumbItem]>;
+	};
+</script>
+
+<script lang="ts" generics="T extends BreadcrumbItem">
+	let {
+		items,
+		labelkey = 'label',
+		seperator = 'i-lucide:chevron-right',
+		...rest
+	}: BreadcrumbProps = $props();
+
+	const variants = $derived(
+		tv({
+			slots: {
+				root: '',
+				list: 'flex items-center',
+				item: '',
+				seperator: '',
+			},
+			variants: {},
+		})(),
+	);
+</script>
+
+<nav class={variants.root({})}>
+	<ol class={variants.list({})}>
+		{#each items as item, idx (idx)}
+			<li class={variants.item({})}>
+				{#if item.snippet}
+					{@const render = rest[item.snippet]}
+
+					{#if isSnippet(render)}
+						{@render (render as Snippet<[BreadcrumbItem]>)(item)}
+					{/if}
+				{:else}
+					<Button
+						label={item[labelkey]}
+						icon={item.icon}
+						href={item.href}
+						variant="link"
+						color="surface"
+						{...item}
+					/>
+				{/if}
+			</li>
+
+			{#if idx < items.length - 1}
+				{#if isSnippet(seperator)}
+					{@render seperator()}
+				{:else}
+					<Icon name={seperator} class={variants.seperator({})} />
+				{/if}
+			{/if}
+		{/each}
+	</ol>
+</nav>

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

@@ -0,0 +1,38 @@
+import type { Component, Snippet } from 'svelte';
+import { type ButtonProps } from './index.js';
+export type BreadcrumbItem = Omit<ButtonProps, 'label'> & {
+    label?: string;
+    icon?: string | Component;
+    snippet?: string;
+    [key: string]: any;
+};
+export type BreadcrumbProps = {
+    items: BreadcrumbItem[];
+    seperator?: string | Component | Snippet;
+    labelkey?: string;
+    [key: string]: any | Snippet<[BreadcrumbItem]>;
+};
+declare function $$render<T extends BreadcrumbItem>(): {
+    props: BreadcrumbProps;
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends BreadcrumbItem> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends BreadcrumbItem>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends BreadcrumbItem>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Breadcrumb: $$IsomorphicComponent;
+type Breadcrumb<T extends BreadcrumbItem> = InstanceType<typeof Breadcrumb<T>>;
+export default Breadcrumb;

package/dist/components/button.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	import { type Component, type Snippet } from 'svelte';
-	import { type PropColor } from '../index.js';
+	import { isComponent, type PropColor, type PropVariant } from '../index.js';
 	import type { ClassNameValue } from 'tailwind-merge';
 	// import { FORM_LOADING_CONTEXT_KEY } from '../utils/keys.js';
 	import { isSnippet } from '../index.js';
@@ -24,6 +24,8 @@
 		iconposition?: 'left' | 'right';
 		/** Icon when `loading` is `false` */
 		icon?: string | Snippet | Component;
+		leadingicon?: string | Snippet | Component;
+		trailingicon?: string | Snippet | Component;
 		/** Route Location the link should navigate to when clicked on. */
 		href?: string;
 		label?: string;
@@ -35,7 +37,7 @@
 		/**
 		 * @defaultValue 'solid'
 		 */
-		variant?: 'link' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost';
+		variant?: Exclude<PropVariant, 'none'> | 'link';
 		// activevariant?: ButtonVariant;
 		/**
 		 * @defaultValue 'md'
@@ -49,6 +51,8 @@
 		ui?: {
 			base?: ClassNameValue;
 			icon?: ClassNameValue;
+			leadingicon?: ClassNameValue;
+			trailingicon?: ClassNameValue;
 		};
 		children?: Snippet;
 	};
@@ -75,9 +79,11 @@
 		href,
 		icon,
 		loading,
-		loadingicon,
+		loadingicon = 'i-lucide-loader-circle',
 		target,
 		type,
+		trailingicon,
+		leadingicon,
 	}: ButtonProps = $props();
 
 	let internal_loading = $state(false);
@@ -132,32 +138,32 @@
 				{
 					color: 'primary',
 					variant: 'solid',
-					class: 'bg-primary-500 hover:(bg-primary-400)',
+					class: 'bg-primary-500 hover:bg-primary-400',
 				},
 				{
 					color: 'surface',
 					variant: 'solid',
-					class: 'bg-surface-inverted text-inverted hover:(bg-toned)',
+					class: 'bg-surface-inverted text-inverted hover:bg-toned',
 				},
 				{
 					color: 'info',
 					variant: 'solid',
-					class: 'bg-info-500 hover:(bg-info-400)',
+					class: 'bg-info-500 hover:bg-info-400',
 				},
 				{
 					color: 'success',
 					variant: 'solid',
-					class: 'bg-success-500 hover:(bg-success-400)',
+					class: 'bg-success-500 hover:bg-success-400',
 				},
 				{
 					color: 'error',
 					variant: 'solid',
-					class: 'bg-error-500 hover:(bg-error-400)',
+					class: 'bg-error-500 hover:bg-error-400',
 				},
 				{
 					color: 'warning',
 					variant: 'solid',
-					class: 'bg-warning-500 hover:(bg-warning-400)',
+					class: 'bg-warning-500 hover:bg-warning-400',
 				},
 
 				{
@@ -165,7 +171,7 @@
 					variant: 'outline',
 					class: {
 						base: [
-							'border-primary/50 text-primary-500 hover:(bg-primary-50)',
+							'border-primary/50 text-primary-500 hover:bg-primary-50',
 							'dark:hover:bg-primary-950',
 						],
 					},
@@ -184,7 +190,7 @@
 					color: 'info',
 					variant: 'outline',
 					class: {
-						base: ['border-info/50 text-blue-500 hover:bg-info/10', 'dark:hover:bg-info-950'],
+						base: ['border-info/50 text-info-500 hover:bg-info/10', 'dark:hover:bg-info-950'],
 					},
 				},
 				{
@@ -201,7 +207,7 @@
 					color: 'error',
 					variant: 'outline',
 					class: {
-						base: ['border-red/50 text-red-500 hover:bg-red/10', 'dark:hover:bg-red-950'],
+						base: ['border-error/50 text-error-500 hover:bg-error/10', 'dark:hover:bg-error-950'],
 					},
 				},
 				{
@@ -209,7 +215,7 @@
 					variant: 'outline',
 					class: {
 						base: [
-							'border-warning/50 text-warning-500 hover:(bg-warning/10)',
+							'border-warning/50 text-warning-500 hover:bg-warning/10',
 							'dark:hover:bg-warning-950',
 						],
 					},
@@ -218,125 +224,125 @@
 				{
 					color: 'primary',
 					variant: 'soft',
-					class: 'bg-primary-50 text-primary-500 hover:(bg-primary-100)',
+					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)',
+					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)',
+					class: 'bg-info-100 text-info-500 hover:bg-info-50',
 				},
 				{
 					color: 'success',
 					variant: 'soft',
-					class: 'bg-green-100 text-green-500 hover:(bg-green-50)',
+					class: 'bg-success-100 text-success-500 hover:bg-success-50',
 				},
 				{
 					color: 'error',
 					variant: 'soft',
-					class: 'bg-red-100 text-red-500 hover:(bg-red-50)',
+					class: 'bg-error-100 text-error-500 hover:bg-error-50',
 				},
 				{
 					color: 'warning',
 					variant: 'soft',
-					class: 'bg-yellow-100 text-yellow-500 hover:(bg-yellow-50)',
+					class: 'bg-warning-100 text-warning-500 hover:bg-warning-50',
 				},
 
 				{
 					color: 'primary',
 					variant: 'subtle',
-					class: 'bg-primary-50 text-primary-500 border-primary-200 hover:(bg-primary-100)',
+					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)',
+					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)',
+					class: 'bg-info-50 text-info-600 border-info-200 hover:bg-info-100',
 				},
 				{
 					color: 'success',
 					variant: 'subtle',
-					class: 'bg-green-100 text-green-600 border-green-300 hover:(bg-green-100)',
+					class: 'bg-success-100 text-success-600 border-success-300 hover:bg-success-100',
 				},
 				{
 					color: 'error',
 					variant: 'subtle',
-					class: 'bg-red-50 text-red-600 border-red-200 hover:(bg-red-100)',
+					class: 'bg-error-50 text-error-600 border-error-200 hover:bg-error-100',
 				},
 				{
 					color: 'warning',
 					variant: 'subtle',
-					class: 'bg-yellow-50 text-yellow-600 border-yellow-300 hover:(bg-yellow-100)',
+					class: 'bg-warning-50 text-warning-600 border-warning-300 hover:bg-warning-100',
 				},
 
 				{
 					color: 'primary',
 					variant: 'ghost',
-					class: 'text-primary-500 hover:(bg-primary-100)',
+					class: 'text-primary-500 hover:bg-primary-100',
 				},
 				{
 					color: 'surface',
 					variant: 'ghost',
-					class: 'text-surface-inverted hover:(bg-surface-elevated text-surface-inverted)',
+					class: 'text-surface-inverted hover-surface-elevated text-surface-inverted)',
 				},
 				{
 					color: 'info',
 					variant: 'ghost',
-					class: 'text-blue-600 hover:(bg-blue-100)',
+					class: 'text-info-600 hover:bg-info-100',
 				},
 				{
 					color: 'success',
 					variant: 'ghost',
-					class: 'text-green-600 hover:(bg-green-100)',
+					class: 'text-success-600 hover:bg-success-100',
 				},
 				{
 					color: 'error',
 					variant: 'ghost',
-					class: 'text-red-600 hover:(bg-red-100)',
+					class: 'text-error-600 hover:bg-error-100',
 				},
 				{
 					color: 'warning',
 					variant: 'ghost',
-					class: 'text-yellow-600 hover:(bg-yellow-100)',
+					class: 'text-warning-600 hover:bg-warning-100',
 				},
 
 				{
 					color: 'primary',
 					variant: 'link',
-					class: 'text-primary-500 hover:(text-primary-400)',
+					class: 'text-primary-500 hover:text-primary-400',
 				},
 				{
 					color: 'surface',
 					variant: 'link',
-					class: 'text-muted hover:(text-surface-inverted)',
+					class: 'text-muted hover:text-surface-inverted',
 				},
 				{
 					color: 'info',
 					variant: 'link',
-					class: 'text-blue-500 hover:(text-blue-400)',
+					class: 'text-info-500 hover:text-info-400',
 				},
 				{
 					color: 'success',
 					variant: 'link',
-					class: 'text-green-500 hover:(text-green-400)',
+					class: 'text-success-500 hover:text-success-400',
 				},
 				{
 					color: 'error',
 					variant: 'link',
-					class: 'text-red-500 hover:(text-red-400)',
+					class: 'text-error-500 hover:text-error-400',
 				},
 				{
 					color: 'warning',
 					variant: 'link',
-					class: 'text-yellow-500 hover:(text-yellow-400)',
+					class: 'text-warning-500 hover:text-warning-400',
 				},
 			],
 		})({ variant, color, size, block, disabled: disabled || is_loading }),
@@ -379,8 +385,8 @@
 {/if}
 
 {#snippet Content()}
-	{#if iconposition === 'left'}
-		{@render Icon()}
+	{#if iconposition === 'left' || leadingicon}
+		{@render Icon(is_loading ? loadingicon : leadingicon || icon, ui.leadingicon)}
 	{/if}
 
 	{#if label}
@@ -389,21 +395,21 @@
 		{@render children?.()}
 	{/if}
 
-	{#if iconposition !== 'left'}
-		{@render Icon()}
+	{#if iconposition !== 'left' || trailingicon}
+		{@render Icon(trailingicon || icon, ui.trailingicon)}
 	{/if}
 {/snippet}
 
-{#snippet Icon()}
-	{@const IconCom = is_loading ? loadingicon || '-ph-lucide-loader-circle' : icon}
-
-	{#if IconCom}
-		{#if typeof IconCom === 'string'}
-			<div class={variants.icon({ class: [is_loading && 'animate-spin', IconCom, ui.icon] })}></div>
-		{:else if isSnippet(IconCom)}
-			{@render IconCom()}
-		{:else}
-			<IconCom />
-		{/if}
+{#snippet Icon(IconProp?: string | Snippet | Component, classvalue?: ClassNameValue)}
+	{#if typeof IconProp === 'string'}
+		<div
+			class={variants.icon({
+				class: [is_loading && 'animate-spin', IconProp, ui.icon, classvalue],
+			})}
+		></div>
+	{:else if isSnippet(IconProp)}
+		{@render IconProp()}
+	{:else if isComponent(IconProp)}
+		<IconProp />
 	{/if}
 {/snippet}

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

@@ -1,5 +1,5 @@
 import { type Component, type Snippet } from 'svelte';
-import { type PropColor } from '../index.js';
+import { type PropColor, type PropVariant } from '../index.js';
 import type { ClassNameValue } from 'tailwind-merge';
 export type ButtonProps = {
     /** The underlying DOM element being rendered. You can bind to this to get a reference to the element. */
@@ -18,6 +18,8 @@ export type ButtonProps = {
     iconposition?: 'left' | 'right';
     /** Icon when `loading` is `false` */
     icon?: string | Snippet | Component;
+    leadingicon?: string | Snippet | Component;
+    trailingicon?: string | Snippet | Component;
     /** Route Location the link should navigate to when clicked on. */
     href?: string;
     label?: string;
@@ -28,7 +30,7 @@ export type ButtonProps = {
     /**
      * @defaultValue 'solid'
      */
-    variant?: 'link' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost';
+    variant?: Exclude<PropVariant, 'none'> | 'link';
     /**
      * @defaultValue 'md'
      */
@@ -41,6 +43,8 @@ export type ButtonProps = {
     ui?: {
         base?: ClassNameValue;
         icon?: ClassNameValue;
+        leadingicon?: ClassNameValue;
+        trailingicon?: ClassNameValue;
     };
     children?: Snippet;
 };