uisv 0.0.13 → 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;