uisv 0.0.23 → 0.0.24

package/dist/components/accordion.svelte

@@ -64,8 +64,8 @@
 				content:
 					'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
 				body: 'text-sm pb-3.5',
-				leadingIcon: 'shrink-0 size-5',
-				trailingIcon:
+				leadingicon: 'shrink-0 size-5',
+				trailingicon:
 					'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
 				label: 'text-start break-words',
 			},
@@ -82,23 +82,9 @@
 	);
 </script>
 
-<Accordion.Root
-	class={variants.root({ class: ui.root })}
-	type="multiple"
-	bind:value={
-		() => {
-			if (!value) return;
-			if (Array.isArray(value)) return value;
-			return [value];
-		},
-		(val) => {
-			if (!val) return (value = val);
-			value = type === 'single' ? val[0] : val;
-		}
-	}
->
+<Accordion.Root class={variants.root({ class: ui.root })} {type} bind:value>
 	{#each items as item, idx (idx)}
-		<Accordion.Item value="item-1">
+		<Accordion.Item value="item-{idx}">
 			<Accordion.Header>
 				<Accordion.Trigger>{item.label}</Accordion.Trigger>
 			</Accordion.Header>

package/dist/components/alert.svelte

@@ -18,7 +18,6 @@
 		icon?: string | Snippet | Component;
 		color?: PropColor;
 		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
-		position?: 'bottom' | 'right';
 		actions?: ButtonProps[];
 		close?: boolean | ButtonProps;
 		ui?: {
@@ -27,7 +26,8 @@
 			description?: ClassValue;
 			title?: ClassValue;
 		};
-		onclose?: () => void | Promise<void>;
+		onclose?: () => unknown | Promise<() => unknown>;
+		orientation?: 'horizontal' | 'vertical';
 	};
 </script>
 
@@ -40,29 +40,19 @@
 		actions = [],
 		color = 'primary',
 		variant = 'solid',
-		position = 'bottom',
 		ui = {},
 		onclose = () => {},
+		orientation = 'vertical',
 	}: AlertProps = $props();
 
-	const close_props = $derived.by(() => {
-		return defu(typeof close === 'boolean' ? {} : close, {
-			icon: getAppContext().icons.close,
-			variant: 'link',
-			color: variant === 'solid' ? 'surface' : color,
-			ui: {
-				icon: variant === 'solid' ? 'text-white' : '',
-			},
-		} as ButtonProps);
-	});
 	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				base: 'flex gap-2 font-sans p-4 rounded-lg',
-				icon: 'pi size-6',
-				actions: '',
-				description: 'text-opacity-50 text-sm',
-				title: 'font-medium',
+				icon: 'pi size-5',
+				actions: 'flex flex-wrap gap-1.5 shrink-0',
+				description: 'opacity-90 mt-1 text-sm',
+				title: 'font-medium font-sm',
 			},
 			variants: {
 				color: {
@@ -75,20 +65,16 @@
 				},
 				variant: {
 					solid: {
-						base: 'text-white',
-						description: 'text-white/90',
+						base: 'text-surface-base',
+						description: 'text-surface-base/90',
 					},
-					outline: 'border',
+					outline: 'ring ring-inset',
 					soft: '',
-					subtle: 'border',
+					subtle: 'ring ring-inset',
 				},
-				position: {
-					right: {
-						base: '',
-					},
-					bottom: {
-						base: 'flex-col',
-					},
+				orientation: {
+					horizontal: '',
+					vertical: 'flex-col',
 				},
 			},
 			compoundVariants: [
@@ -126,38 +112,38 @@
 				{
 					variant: 'outline',
 					color: 'primary',
-					class: 'border-primary-300 text-primary-500',
+					class: 'ring-primary/50 text-primary-500',
 				},
 				{
 					variant: 'outline',
 					color: 'surface',
-					class: 'border-surface-accented text-surface-inverted',
+					class: 'ring-surface-accented text-surface-inverted',
 				},
 				{
 					variant: 'outline',
 					color: 'info',
-					class: 'border-info-300 text-info-500',
+					class: 'ring-info/50 text-info-500',
 				},
 				{
 					variant: 'outline',
 					color: 'success',
-					class: 'border-success-300 text-success-500',
+					class: 'ring-success/50 text-success-500',
 				},
 				{
 					variant: 'outline',
 					color: 'warning',
-					class: 'border-warning-300 text-warning-500',
+					class: 'ring-warning/50 text-warning-500',
 				},
 				{
 					variant: 'outline',
 					color: 'error',
-					class: 'border-error-300 text-error-500',
+					class: 'ring-error/50 text-error-500',
 				},
 
 				{
 					variant: 'soft',
 					color: 'primary',
-					class: 'bg-primary-100 text-primary-500',
+					class: 'bg-primary/10 text-primary-500',
 				},
 				{
 					variant: 'soft',
@@ -167,61 +153,61 @@
 				{
 					variant: 'soft',
 					color: 'info',
-					class: 'bg-info-50 text-info-500',
+					class: 'bg-info/10 text-info-500',
 				},
 				{
 					variant: 'soft',
 					color: 'success',
-					class: 'bg-success-50 text-success-500',
+					class: 'bg-success/10 text-success-500',
 				},
 				{
 					variant: 'soft',
 					color: 'warning',
-					class: 'bg-warning-50 text-warning-500',
+					class: 'bg-warning/10 text-warning-500',
 				},
 				{
 					variant: 'soft',
 					color: 'error',
-					class: 'bg-error-50 text-error-500',
+					class: 'bg-error/10 text-error-500',
 				},
 
 				{
 					variant: 'subtle',
 					color: 'primary',
-					class: 'bg-primary-100 text-primary-500 border-primary-300',
+					class: 'bg-primary/10 text-primary/50 ring-primary-300',
 				},
 				{
 					variant: 'subtle',
 					color: 'surface',
-					class: 'bg-surface-muted text-surface-inverted border-surface-accented',
+					class: 'bg-surface-muted text-surface-inverted ring-surface-accented',
 				},
 				{
 					variant: 'subtle',
 					color: 'info',
-					class: 'bg-info-50 text-info-500 border-info-300',
+					class: 'bg-info/10 text-info-500 ring-info/50',
 				},
 				{
 					variant: 'subtle',
 					color: 'success',
-					class: 'bg-success-50 text-success-500 border-success-300',
+					class: 'bg-success/10 text-success-500 ring-success/50',
 				},
 				{
 					variant: 'subtle',
 					color: 'warning',
-					class: 'bg-warning-50 text-warning-500 border-warning-300',
+					class: 'bg-warning/10 text-warning-500 ring-warning/50',
 				},
 				{
 					variant: 'subtle',
 					color: 'error',
-					class: 'bg-error-50 text-error-500  border-error-300',
+					class: 'bg-error/10 text-error-500  ring-error/50',
 				},
 			],
-		})({ color, variant, position }),
+		})({ color, variant, orientation }),
 	);
 </script>
 
-<div class={variants.base({ class: [position === 'bottom' ? '' : 'flex', ui.base] })}>
-	<div class="flex gap-2 grow">
+<div class={variants.base({ class: [ui.base] })}>
+	<div class="flex gap-2 flex-1">
 		{#if isSnippet(icon)}
 			{@render icon()}
 		{:else}
@@ -250,22 +236,39 @@
 			{/if}
 		</div>
 
+		{#if orientation === 'horizontal'}
+			{@render actions_snippet()}
+		{/if}
+
 		{#if close}
 			<div>
-				<Button {...close_props} onclick={onclose} />
+				<Button
+					{...defu(typeof close === 'boolean' ? {} : close, {
+						icon: getAppContext().icons.close,
+						variant: 'link',
+						color: 'surface',
+						onclick: onclose,
+					} as ButtonProps)}
+				/>
 			</div>
 		{/if}
 	</div>
 
-	{#if actions.length > 0}
+	{#if orientation === 'vertical'}
+		{@render actions_snippet()}
+	{/if}
+</div>
+
+{#snippet actions_snippet()}
+	{#if actions.length}
 		<div class="flex gap-2 items-center pl-8">
-			{#each actions as action (action.label)}
+			{#each actions as action, idx (idx)}
 				<Button
-					{...defu(action, {
+					{...defu(action, <ButtonProps>{
 						size: 'xs',
-					} as ButtonProps)}
+					})}
 				/>
 			{/each}
 		</div>
 	{/if}
-</div>
+{/snippet}

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

@@ -7,7 +7,6 @@ export type AlertProps = {
     icon?: string | Snippet | Component;
     color?: PropColor;
     variant?: Exclude<PropVariant, 'none' | 'ghost'>;
-    position?: 'bottom' | 'right';
     actions?: ButtonProps[];
     close?: boolean | ButtonProps;
     ui?: {
@@ -16,7 +15,8 @@ export type AlertProps = {
         description?: ClassValue;
         title?: ClassValue;
     };
-    onclose?: () => void | Promise<void>;
+    onclose?: () => unknown | Promise<() => unknown>;
+    orientation?: 'horizontal' | 'vertical';
 };
 declare const Alert: Component<AlertProps, {}, "">;
 type Alert = ReturnType<typeof Alert>;

package/dist/components/badge.svelte

@@ -9,9 +9,11 @@
 		color?: PropColor;
 		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		icon?: string | Snippet | Component;
-		trailingicon?: boolean;
+		icon?: string | Component;
+		iconposition?: 'leading' | 'trailing';
 		children?: Snippet;
+		leading?: Snippet;
+		trailing?: Snippet;
 		ui?: {
 			base?: ClassValue;
 			icon?: ClassValue;
@@ -23,12 +25,14 @@
 	let {
 		icon,
 		label,
-		trailingicon,
+		iconposition = 'leading',
 		color = 'primary',
 		size = 'md',
 		variant = 'solid',
 		ui = {},
 		children,
+		leading,
+		trailing,
 	}: BadgeProps = $props();
 
 	const variants = $derived.by(() => {
@@ -45,7 +49,7 @@
 				},
 				variant: {
 					link: '',
-					solid: 'text-white',
+					solid: 'text-label-inverted',
 					outline: 'border',
 					soft: '',
 					subtle: 'border',
@@ -196,12 +200,10 @@
 		class: [icon && !(children || label) ? 'px-0 aspect-square justify-center' : '', ui.base],
 	})}
 >
-	{#if !trailingicon}
-		{#if isSnippet(icon)}
-			{@render icon()}
-		{:else}
-			<Icon name={icon} class={variants.icon({ class: ui.icon })} />
-		{/if}
+	{#if leading}
+		{@render leading()}
+	{:else if iconposition === 'leading'}
+		<Icon name={icon} class={variants.icon({ class: ui.icon })} />
 	{/if}
 
 	{#if label}
@@ -210,11 +212,9 @@
 		{@render children?.()}
 	{/if}
 
-	{#if trailingicon}
-		{#if isSnippet(icon)}
-			{@render icon()}
-		{:else}
-			<Icon name={icon} class={variants.icon({ class: ui.icon })} />
-		{/if}
+	{#if trailing}
+		{@render trailing()}
+	{:else if iconposition === 'trailing'}
+		<Icon name={icon} class={variants.icon({ class: ui.icon })} />
 	{/if}
 </span>

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

@@ -6,9 +6,11 @@ export type BadgeProps = {
     color?: PropColor;
     variant?: Exclude<PropVariant, 'none' | 'ghost'>;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    icon?: string | Snippet | Component;
-    trailingicon?: boolean;
+    icon?: string | Component;
+    iconposition?: 'leading' | 'trailing';
     children?: Snippet;
+    leading?: Snippet;
+    trailing?: Snippet;
     ui?: {
         base?: ClassValue;
         icon?: ClassValue;

package/dist/components/banner.svelte

@@ -14,7 +14,7 @@
 
 	export type BannerProps = {
 		title: string | Snippet;
-		icon?: string | Snippet | Component;
+		icon?: string | Component;
 		color?: PropColor;
 		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
 		actions?: ButtonProps[];
@@ -27,7 +27,7 @@
 			description?: ClassValue;
 			title?: ClassValue;
 		};
-		onclose?: () => void | Promise<void>;
+		onclose?: () => void | Promise<() => void>;
 	};
 </script>
 
@@ -208,11 +208,7 @@
 	class={variants.base({ class: [ui.base] })}
 >
 	<div class="flex grow gap-2 text-sm items-center">
-		{#if isSnippet(icon)}
-			{@render icon()}
-		{:else}
-			<Icon name={icon} class={variants.icon({ class: ui.icon })} />
-		{/if}
+		<Icon name={icon} class={variants.icon({ class: ui.icon })} />
 
 		<div class={variants.title({ class: [ui.title] })}>
 			{#if isSnippet(title)}
@@ -222,13 +218,13 @@
 			{/if}
 		</div>
 
-		{#if actions.length > 0}
-			{#each actions as action (action.label)}
+		{#if actions.length}
+			{#each actions as action, idx (idx)}
 				<Button
-					{...defu(action, {
+					{...defu(action, <ButtonProps>{
 						size: 'xs',
 						color: 'surface',
-					} as ButtonProps)}
+					})}
 				/>
 			{/each}
 		{/if}
@@ -237,15 +233,15 @@
 	{#if close}
 		<div>
 			<Button
-				{...defu<ButtonProps, [ButtonProps]>(typeof close === 'boolean' ? {} : close, {
+				{...defu(typeof close === 'boolean' ? {} : close, <ButtonProps>{
 					icon: getAppContext().icons.close,
 					variant: 'ghost',
 					color: 'surface',
 					ui: {
 						icon: variant === 'solid' ? 'text-label-inverted' : '',
 					},
+					onclick: onclose,
 				})}
-				onclick={onclose}
 			/>
 		</div>
 	{/if}

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

@@ -3,7 +3,7 @@ import type { Component, Snippet } from 'svelte';
 import { type ClassValue } from 'tailwind-variants';
 export type BannerProps = {
     title: string | Snippet;
-    icon?: string | Snippet | Component;
+    icon?: string | Component;
     color?: PropColor;
     variant?: Exclude<PropVariant, 'none' | 'ghost'>;
     actions?: ButtonProps[];
@@ -16,7 +16,7 @@ export type BannerProps = {
         description?: ClassValue;
         title?: ClassValue;
     };
-    onclose?: () => void | Promise<void>;
+    onclose?: () => void | Promise<() => void>;
 };
 declare const Banner: Component<BannerProps, {}, "">;
 type Banner = ReturnType<typeof Banner>;

package/dist/components/button.svelte

@@ -94,7 +94,7 @@
 		return false;
 	});
 
-	const classnames = $derived(
+	const variants = $derived(
 		tv({
 			slots: {
 				icon: '',
@@ -124,7 +124,7 @@
 					},
 					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' },
+					lg: { base: 'font-medium text-sm px-3 h-9 rounded-md gap-2', icon: 'size-5' },
 					xl: { base: 'font-medium px-3 h-10 rounded-md gap-2', icon: 'size-6' },
 				},
 				block: {
@@ -353,14 +353,14 @@
 
 <svelte:element
 	this={href ? 'a' : 'button'}
+	bind:this={ref}
 	type={href ? undefined : type}
 	href={href && !disabled ? href : undefined}
 	disabled={disabled || is_loading}
 	aria-disabled={href ? disabled : undefined}
 	role={href && disabled ? 'link' : undefined}
 	tabindex={href && disabled ? -1 : 0}
-	bind:this={ref}
-	class={classnames.base({
+	class={variants.base({
 		class: [only_icon && 'px-0 aspect-square justify-center', href && 'cursor-pointer', ui.base],
 	})}
 	onclick={onClickWrapper}
@@ -369,7 +369,9 @@
 	{#if iconposition === 'leading' || leadingicon || loading}
 		<Icon
 			name={is_loading ? loadingicon : leadingicon || icon}
-			class={[ui.leadingicon, loading && 'animate-spin', iconposition === 'leading' && ui.icon]}
+			class={variants.icon({
+				class: [ui.leadingicon, loading && 'animate-spin', iconposition === 'leading' && ui.icon],
+			})}
 		/>
 	{/if}
 
@@ -382,7 +384,7 @@
 	{#if iconposition === 'trailing' || trailingicon}
 		<Icon
 			name={trailingicon || icon}
-			class={[ui.trailingicon, iconposition === 'trailing' && ui.icon]}
+			class={variants.icon({ class: [ui.trailingicon, iconposition === 'trailing' && ui.icon] })}
 		/>
 	{/if}
 </svelte:element>

package/dist/components/card.svelte

@@ -63,7 +63,7 @@
 	</div>
 
 	{#if footer}
-		<div class={variants.header({ class: [ui.header] })}>
+		<div class={variants.footer({ class: [ui.footer] })}>
 			{@render footer()}
 		</div>
 	{/if}

package/dist/components/checkbox-group.svelte

@@ -3,18 +3,16 @@
 	import type { Component, Snippet } from 'svelte';
 	import { type PropColor, isComponent, isSnippet, Checkbox } from '../index.js';
 
-	/* eslint @typescript-eslint/no-explicit-any: 0 */
-
 	export type CheckboxGroupProps = {
 		color?: PropColor;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		icon?: string | Snippet | Component;
+		icon?: string | Component;
 		required?: boolean;
 		indicator?: 'start' | 'end' | 'hidden';
-		value?: any[];
+		value?: string[];
 		valuekey?: string;
 		variant?: 'list' | 'card' | 'table';
-		items: Array<any>;
+		items: Array<string>;
 		labelkey?: string;
 		descriptionkey?: string;
 		legend?: string | Snippet | Component;

package/dist/components/checkbox-group.svelte.d.ts

@@ -4,13 +4,13 @@ import { type PropColor } from '../index.js';
 export type CheckboxGroupProps = {
     color?: PropColor;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    icon?: string | Snippet | Component;
+    icon?: string | Component;
     required?: boolean;
     indicator?: 'start' | 'end' | 'hidden';
-    value?: any[];
+    value?: string[];
     valuekey?: string;
     variant?: 'list' | 'card' | 'table';
-    items: Array<any>;
+    items: Array<string>;
     labelkey?: string;
     descriptionkey?: string;
     legend?: string | Snippet | Component;

package/dist/components/checkbox.svelte

@@ -1,17 +1,17 @@
 <script module lang="ts">
 	import { getAppContext } from '../contexts.js';
-	import { type PropColor, isComponent, isSnippet } from '../index.js';
-	import type { Snippet } from 'svelte';
+	import { type PropColor } from '../index.js';
+	import type { Snippet, Component } from 'svelte';
 	import { tv, type ClassValue } from 'tailwind-variants';
-	import type { Component } from 'vitest-browser-svelte';
+	import Icon from './icon.svelte';
 
 	export type CheckboxProps = {
 		value?: boolean | 'intermediate';
 		color?: PropColor;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		disabled?: boolean;
-		icon?: string | Snippet | Component;
-		intermediateicon?: string | Snippet | Component;
+		icon?: string | Component;
+		intermediateicon?: string | Component;
 		label?: string | Snippet;
 		description?: string | Snippet;
 		required?: boolean;
@@ -131,8 +131,10 @@
 			value = !value;
 		}}
 	>
-		{@render Icon(icon, [value !== true && 'opacity-0'])}
-		{@render Icon(intermediateicon, [value !== 'intermediate' && 'opacity-0'])}
+		<Icon
+			name={value === 'intermediate' ? intermediateicon : value !== true ? icon : undefined}
+			class={variants.icon({ class: [ui.icon] })}
+		/>
 	</button>
 
 	{#if label}
@@ -162,16 +164,3 @@
 		</div>
 	{/if}
 </svelte:element>
-
-{#snippet Icon(ico?: CheckboxProps['icon'], icon_class?: ClassValue)}
-	<div class={['absolute', icon_class]}>
-		{#if typeof ico === 'string'}
-			<div class={variants.icon({ class: [ico, ui.icon] })}></div>
-		{:else if isSnippet(ico)}
-			{@render ico()}
-		{:else if isComponent(ico)}
-			{@const Iconn = ico}
-			<Iconn />
-		{/if}
-	</div>
-{/snippet}

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

@@ -1,14 +1,13 @@
 import { type PropColor } from '../index.js';
-import type { Snippet } from 'svelte';
+import type { Snippet, Component } from 'svelte';
 import { type ClassValue } from 'tailwind-variants';
-import type { Component } from 'vitest-browser-svelte';
 export type CheckboxProps = {
     value?: boolean | 'intermediate';
     color?: PropColor;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     disabled?: boolean;
-    icon?: string | Snippet | Component;
-    intermediateicon?: string | Snippet | Component;
+    icon?: string | Component;
+    intermediateicon?: string | Component;
     label?: string | Snippet;
     description?: string | Snippet;
     required?: boolean;
@@ -22,6 +21,6 @@ export type CheckboxProps = {
         description?: ClassValue;
     };
 };
-declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value">;
+declare const Checkbox: Component<CheckboxProps, {}, "value">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/components/index.d.ts

@@ -62,3 +62,7 @@ export { default as Tooltip } from './tooltip.svelte';
 export * from './app.svelte';
 export { default as App } from './app.svelte';
 export * from './toast.svelte.js';
+export * from './popover.svelte';
+export { default as Popover } from './popover.svelte';
+export * from './radio-group.svelte';
+export { default as RadioGroup } from './radio-group.svelte';

package/dist/components/index.js

@@ -62,3 +62,7 @@ export { default as Tooltip } from './tooltip.svelte';
 export * from './app.svelte';
 export { default as App } from './app.svelte';
 export * from './toast.svelte.js';
+export * from './popover.svelte';
+export { default as Popover } from './popover.svelte';
+export * from './radio-group.svelte';
+export { default as RadioGroup } from './radio-group.svelte';