uisv 0.0.22 → 0.0.24

package/dist/components/button.svelte

@@ -4,7 +4,7 @@
 	// import { FORM_LOADING_CONTEXT_KEY } from '../utils/keys.js';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { tv, type ClassValue } from 'tailwind-variants';
-	import { app_icons } from '../contexts.js';
+	import { getAppContext } from '../contexts.js';
 
 	export type ButtonBaseProps = {
 		/** The underlying DOM element being rendered. You can bind to this to get a reference to the element. */
@@ -80,7 +80,7 @@
 		href,
 		icon,
 		loading,
-		loadingicon = app_icons.get().loading,
+		loadingicon = getAppContext().icons.loading,
 		type,
 		trailingicon,
 		leadingicon,
@@ -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,16 +1,17 @@
 <script module lang="ts">
-	import { type PropColor, isComponent, isSnippet } from '../index.js';
-	import type { Snippet } from 'svelte';
+	import { getAppContext } from '../contexts.js';
+	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;
@@ -32,8 +33,8 @@
 		color = 'primary',
 		size = 'md',
 		disabled,
-		icon = 'i-lucide-check',
-		intermediateicon = 'i-lucide-minus',
+		icon = getAppContext().icons.check,
+		intermediateicon = getAppContext().icons.minus,
 		label,
 		description,
 		required,
@@ -130,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}
@@ -161,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/collapsible.svelte

@@ -16,6 +16,8 @@
 </script>
 
 <script lang="ts">
+	import { getAppContext } from '../contexts.js';
+
 	let {
 		open = $bindable(false),
 		children,
@@ -40,7 +42,7 @@
 		{#snippet child({ props })}
 			<Button
 				{...props}
-				trailingicon="i-lucide-chevron-down"
+				trailingicon={getAppContext().icons.chevrondown}
 				{...rest}
 				block
 				ui={defu(ui, { trailingicon: 'ms-auto' })}

package/dist/components/index.d.ts

@@ -61,3 +61,8 @@ export * from './tooltip.svelte';
 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

@@ -61,3 +61,8 @@ export * from './tooltip.svelte';
 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/input-number.svelte

@@ -9,6 +9,7 @@
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { tv, type ClassValue } from 'tailwind-variants';
 	import { useId } from 'bits-ui';
+	import { getAppContext } from '../contexts.js';
 
 	export type InputNumberProps = Omit<SvelteHTMLElements['input'], 'size' | 'value'> & {
 		value?: number;
@@ -154,7 +155,7 @@
 	{#if increment}
 		<Button
 			variant="link"
-			icon="i-lucide:minus"
+			icon={getAppContext().icons.minus}
 			onclick={() => {
 				value = value === undefined ? 0 : value - 1;
 			}}
@@ -164,7 +165,7 @@
 	{#if increment}
 		<Button
 			variant="link"
-			icon="i-lucide:plus"
+			icon={getAppContext().icons.plus}
 			onclick={() => {
 				value = value === undefined ? 0 : value + 1;
 			}}

package/dist/components/input.svelte

@@ -1,10 +1,11 @@
 <script module lang="ts">
-	import { type PropColor, type PropVariant, isComponent, isSnippet } from '../index.js';
+	import { type PropColor, type PropVariant, isComponent, isSnippet, Icon } from '../index.js';
 	import type { Component, Snippet } from 'svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { maska } from 'maska/svelte';
 	import { type MaskInputOptions } from 'maska';
 	import { tv, type ClassValue } from 'tailwind-variants';
+	import { getAppContext } from '../contexts.js';
 
 	export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
 		name?: string;
@@ -56,8 +57,6 @@
 </script>
 
 <script lang="ts">
-	import Icon from './icon.svelte';
-
 	let {
 		type,
 		value = $bindable(),
@@ -70,7 +69,7 @@
 		highlight,
 		leading,
 		loading,
-		loadingicon = 'i-lucide-loader-circle',
+		loadingicon = getAppContext().icons.loading,
 		required,
 		trailing,
 		mask,
@@ -132,7 +131,7 @@
 					},
 				},
 				variant: {
-					outline: { root: 'ring ring-dimmed' },
+					outline: { root: 'ring ring-surface-accented' },
 					soft: {
 						root: 'bg-surface-muted hover:bg-surface-elevated focus-within:bg-surface-elevated',
 					},
@@ -223,7 +222,7 @@
 
 <div class={variants.root({ class: ui.root })}>
 	{#if leading || (icon && iconposition === 'leading') || loading}
-		{@const TrailingIcon = loading ? loadingicon : icon}
+		{@const leadingicon = loading ? loadingicon : icon}
 
 		<span class={variants.leading({ class: ui.leading })}>
 			{#if !!leading && !loading}
@@ -237,7 +236,7 @@
 				{/if}
 			{:else}
 				<Icon
-					name={TrailingIcon}
+					name={leadingicon}
 					class={variants.icon({ class: [loading ? 'animate-spin' : ''] })}
 				/>
 			{/if}
@@ -251,6 +250,7 @@
 		class={variants.base({ class: [ui.base] })}
 		{...rest}
 		use:maska={mask}
+		bind:value
 	/>
 
 	{#if trailing || (icon && iconposition === 'trailing')}
@@ -264,17 +264,8 @@
 				{:else if isSnippet(trailing)}
 					{@render 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] })} />
+			{:else}
+				<Icon name={icon} class={variants.icon({ class: [ui.icon] })} />
 			{/if}
 		</span>
 	{/if}

package/dist/components/kbd.svelte

@@ -57,16 +57,16 @@
 		return navigator.userAgent.match(/Macintosh;/);
 	});
 
-	const kbdKeysSpecificMap = $derived({
-		meta: macOS ? KBD_KEYS.command : 'Ctrl',
-		alt: macOS ? KBD_KEYS.command : 'Ctrl',
-		ctrl: macOS ? KBD_KEYS.option : 'Alt',
+	const kbdKeysSpecificMap = $derived.by(() => {
+		return {
+			meta: macOS?.length ? KBD_KEYS.command : 'Ctrl',
+			alt: macOS?.length ? KBD_KEYS.command : 'Ctrl',
+			ctrl: macOS?.length ? KBD_KEYS.option : 'Alt',
+		};
 	});
 
-	function getKey(value?: KbdKey | string) {
-		if (!value) {
-			return;
-		}
+	function getKey(value: KbdKey | string | undefined) {
+		if (!value) return;
 
 		if (['meta', 'alt', 'ctrl'].includes(value)) {
 			return kbdKeysSpecificMap[value as KbdSpecificKey];

package/dist/components/modal.svelte

@@ -6,7 +6,7 @@
 	import defu from 'defu';
 	import { fade, scale } from 'svelte/transition';
 	import { cubicIn } from 'svelte/easing';
-	import { app_icons } from '../contexts.js';
+	import { getAppContext } from '../contexts.js';
 
 	export type ModalProps = {
 		open?: boolean;
@@ -160,7 +160,7 @@
 										{...defu(typeof close === 'boolean' ? {} : close, <ButtonProps>{
 											variant: 'ghost',
 											color: 'surface',
-											icon: app_icons.get().close,
+											icon: getAppContext().icons.close,
 											onclick() {
 												open = false;
 											},