uisv 0.0.21 → 0.0.22

package/dist/components/switch.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import { type PropColor, Icon } from '../index.js';
 	import type { Snippet, Component } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 
 	export type SwitchProps = {
 		value?: boolean;
@@ -17,11 +16,11 @@
 		description?: string | Snippet;
 		required?: boolean;
 		ui?: {
-			root?: ClassNameValue;
-			container?: ClassNameValue;
-			thumb?: ClassNameValue;
-			label?: ClassNameValue;
-			description?: ClassNameValue;
+			root?: ClassValue;
+			container?: ClassValue;
+			thumb?: ClassValue;
+			label?: ClassValue;
+			description?: ClassValue;
 		};
 	};
 </script>
@@ -42,18 +41,18 @@
 		ui = {},
 	}: SwitchProps = $props();
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				root: 'flex-inline gap-2',
-				container: 'rounded-full bg-neutral-200 p-0.5 relative transition',
+				container: 'rounded-full bg-surface-accented p-0.5 relative transition',
 				thumb: [
 					'bg-white block rounded-full absolute top-0.5 transition grid place-items-center',
-					value ? 'translate-x-full' : 'text-neutral-500',
+					value ? 'translate-x-full' : 'text-label-muted',
 				],
 				icon: 'pi',
 				label: 'text-sm',
-				description: 'text-sm text-neutral-500',
+				description: 'text-sm text-label-muted',
 			},
 			variants: {
 				color: {
@@ -61,7 +60,7 @@
 						container: ['', value && 'bg-primary-500 text-primary-500'],
 					},
 					surface: {
-						container: ['', value && 'bg-neutral-900 text-neutral-900'],
+						container: ['', value && 'bg-surface-inverted text-surface-inverted'],
 					},
 					info: {
 						container: ['', value && 'bg-info-500 text-info-500'],
@@ -111,23 +110,23 @@
 
 <div
 	data-state={value ? 'checked' : 'unchecked'}
-	class={classes.root({
+	class={variants.root({
 		class: [(loading || disabled) && 'opacity-50', ui.thumb],
 	})}
 >
 	<button
 		aria-label="switch"
 		data-state={value ? 'checked' : 'unchecked'}
-		class={classes.container({ class: [loading && 'cursor-not-allowed', ui.thumb] })}
+		class={variants.container({ class: [loading && 'cursor-not-allowed', ui.thumb] })}
 		onclick={() => {
 			if (loading || disabled) return;
 			value = !value;
 		}}
 	>
-		<span data-state={value ? 'checked' : 'unchecked'} class={classes.thumb({ class: ui.thumb })}>
+		<span data-state={value ? 'checked' : 'unchecked'} class={variants.thumb({ class: ui.thumb })}>
 			<Icon
 				name={loading ? loadingicon : value ? checkedicon : uncheckedicon}
-				class={classes.icon({ class: [loading && 'animate-spin'] })}
+				class={variants.icon({ class: [loading && 'animate-spin'] })}
 			/>
 		</span>
 	</button>
@@ -135,7 +134,7 @@
 	{#if label}
 		<span>
 			<div
-				class={classes.label({
+				class={variants.label({
 					class: [required ? 'after:content-["*"] after:text-error-500' : '', ui.thumb],
 				})}
 			>
@@ -147,7 +146,7 @@
 			</div>
 
 			{#if description}
-				<div class={classes.description({ class: ui.thumb })}>
+				<div class={variants.description({ class: ui.thumb })}>
 					{#if typeof description === 'string'}
 						{description}
 					{:else}
@@ -158,7 +157,3 @@
 		</span>
 	{/if}
 </div>
-
-{#snippet icon(ico?: SwitchProps['checkedicon'], icon_class?: ClassNameValue)}
-	<div class={['absolute', icon_class]}></div>
-{/snippet}

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

@@ -1,6 +1,6 @@
 import { type PropColor } from '../index.js';
 import type { Snippet, Component } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type SwitchProps = {
     value?: boolean;
     color?: PropColor;
@@ -14,11 +14,11 @@ export type SwitchProps = {
     description?: string | Snippet;
     required?: boolean;
     ui?: {
-        root?: ClassNameValue;
-        container?: ClassNameValue;
-        thumb?: ClassNameValue;
-        label?: ClassNameValue;
-        description?: ClassNameValue;
+        root?: ClassValue;
+        container?: ClassValue;
+        thumb?: ClassValue;
+        label?: ClassValue;
+        description?: ClassValue;
     };
 };
 declare const Switch: Component<SwitchProps, {}, "value">;

package/dist/components/tabs.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import { Tabs } from 'bits-ui';
 	import { isComponent, isSnippet, useElementRects, type PropColor } from '../index.js';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 	import { type Component, type Snippet } from 'svelte';
 	import { ElementRect } from 'runed';
 
@@ -24,12 +23,12 @@
 		disabled?: boolean;
 		orientation?: 'vertical' | 'horizontal';
 		ui?: {
-			root?: ClassNameValue;
-			item?: ClassNameValue;
-			list?: ClassNameValue;
-			content?: ClassNameValue;
-			icon?: ClassNameValue;
-			indicator?: ClassNameValue;
+			root?: ClassValue;
+			item?: ClassValue;
+			list?: ClassValue;
+			content?: ClassValue;
+			icon?: ClassValue;
+			indicator?: ClassValue;
 		};
 		[k: `content_${string}`]: Snippet<[{ item: TabItem; value: number }]>;
 	};
@@ -65,12 +64,12 @@
 		return result;
 	});
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				root: '',
 				list: 'flex relative p-1',
-				item: 'flex items-center justify-center text-muted data-[state="inactive"]:hover:text-highlighted font-medium z-1 transition-all',
+				item: 'flex items-center justify-center text-label-muted data-[state="inactive"]:hover:text-label-highlighted font-medium z-1 transition-all',
 				icon: '',
 				content: 'mt-2',
 				indicator: 'absolute z-0 transition-all duration-200 rounded-md w---width',
@@ -79,7 +78,7 @@
 				variant: {
 					pill: {
 						list: 'bg-surface-elevated rounded-lg',
-						item: 'flex-1 data-[state="active"]:text-inverted',
+						item: 'flex-1 data-[state="active"]:text-label-inverted',
 						trigger: 'flex-1',
 						indicator: 'rounded-md shadow-xs',
 					},
@@ -96,8 +95,8 @@
 						indicator: 'bg-primary-500',
 					},
 					surface: {
-						item: 'data-[variant="link"]:data-[state="active"]:text-surface-500',
-						indicator: 'bg-surface-900',
+						item: 'data-[variant="link"]:data-[state="active"]:text-label-muted',
+						indicator: 'bg-surface-inverted',
 					},
 					info: {
 						item: 'data-[variant="link"]:data-[state="active"]:text-info-500',
@@ -183,10 +182,10 @@
 <Tabs.Root
 	{disabled}
 	bind:value={() => value.toString(), (v) => (value = parseInt(v))}
-	class={classes.root({ class: ui.root })}
+	class={variants.root({ class: ui.root })}
 	{orientation}
 >
-	<Tabs.List bind:ref={container_el} class={classes.list({ class: ui.list })}>
+	<Tabs.List bind:ref={container_el} class={variants.list({ class: ui.list })}>
 		{#each items as item, idx (idx)}
 			{@const label = typeof item === 'string' ? item : item.label}
 
@@ -201,7 +200,7 @@
 					}
 				}
 				value={idx.toString()}
-				class={classes.item({ class: ui.item })}
+				class={variants.item({ class: ui.item })}
 				data-variant={variant}
 			>
 				{@render RenderIcon(typeof item === 'string' ? undefined : item.icon)}
@@ -211,7 +210,7 @@
 		{/each}
 
 		<span
-			class={classes.indicator({ class: ui.indicator })}
+			class={variants.indicator({ class: ui.indicator })}
 			style:--width="{rect.w}px"
 			style:--left="{rect.l}px"
 			style:--height="{rect.w}px"
@@ -221,7 +220,7 @@
 	{#each items as item, idx (idx)}
 		{#if typeof item === 'object' && item.content}
 			{@const Content = item.content}
-			<Tabs.Content value={idx.toString()} class={classes.content({ class: ui.content })}>
+			<Tabs.Content value={idx.toString()} class={variants.content({ class: ui.content })}>
 				{#if `content_${idx}` in rest}
 					{@render rest[`content_${idx}`]({ item, value: idx })}
 				{:else if typeof Content === 'string'}
@@ -238,8 +237,8 @@
 	{#if isSnippet(IconProp)}
 		{@render IconProp()}
 	{:else if isComponent(IconProp)}
-		<IconProp class={classes.icon({ class: ui.icon })} />
+		<IconProp class={variants.icon({ class: ui.icon })} />
 	{:else if typeof IconProp === 'string'}
-		<div class={classes.icon({ class: [IconProp, ui.icon] })}></div>
+		<div class={variants.icon({ class: [IconProp, ui.icon] })}></div>
 	{/if}
 {/snippet}

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

@@ -1,6 +1,6 @@
 import { Tabs } from 'bits-ui';
 import { type PropColor } from '../index.js';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 import { type Component, type Snippet } from 'svelte';
 export type TabItem = string | {
     label: string;
@@ -17,12 +17,12 @@ export type TabsProps = {
     disabled?: boolean;
     orientation?: 'vertical' | 'horizontal';
     ui?: {
-        root?: ClassNameValue;
-        item?: ClassNameValue;
-        list?: ClassNameValue;
-        content?: ClassNameValue;
-        icon?: ClassNameValue;
-        indicator?: ClassNameValue;
+        root?: ClassValue;
+        item?: ClassValue;
+        list?: ClassValue;
+        content?: ClassValue;
+        icon?: ClassValue;
+        indicator?: ClassValue;
     };
     [k: `content_${string}`]: Snippet<[{
         item: TabItem;

package/dist/components/tooltip.svelte

@@ -0,0 +1,94 @@
+<script module lang="ts">
+	import type { TooltipContentProps, TooltipArrowProps, PortalProps } from 'bits-ui';
+	import { Tooltip } from 'bits-ui';
+	import { type KbdProps, type ButtonProps, isSnippet, Button, Kbd } from '../index.js';
+	import type { Snippet } from 'svelte';
+	import { fly } from 'svelte/transition';
+	import { tv, type ClassValue } from 'tailwind-variants';
+
+	export type TooltipProps = {
+		children?: Snippet;
+		open?: boolean;
+		kbds?: KbdProps['value'][] | KbdProps[];
+		trigger?: ButtonProps | Snippet<[Record<string, unknown>]>;
+		disabled?: boolean;
+		portal?: PortalProps;
+		content?: TooltipContentProps;
+		ui?: {
+			content?: ClassValue;
+			wrapper?: ClassValue;
+			kbds?: ClassValue;
+			arrow?: ClassValue;
+		};
+		arrow?: boolean | TooltipArrowProps;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		children,
+		open = $bindable(false),
+		kbds,
+		trigger,
+		disabled,
+		portal,
+		content,
+		ui = {},
+		arrow,
+		...rest
+	}: TooltipProps = $props();
+
+	const variants = $derived(
+		tv({
+			slots: {
+				content: '',
+				wrapper: '',
+				kbds: '',
+				kbdsize: '',
+				arrow: '',
+			},
+		})(),
+	);
+</script>
+
+<Tooltip.Root bind:open disabled={!(children || kbds?.length) || disabled}>
+	{#if !!trigger}
+		<Tooltip.Trigger {...rest}>
+			{#snippet child({ props })}
+				{#if isSnippet(trigger)}
+					{@render trigger(props)}
+				{:else}
+					<Button {...props} {...trigger} />
+				{/if}
+			{/snippet}
+		</Tooltip.Trigger>
+	{/if}
+
+	<Tooltip.Portal {...portal}>
+		<Tooltip.Content {...content} forceMount>
+			{#snippet child({ props, wrapperProps })}
+				<div {...wrapperProps} class={variants.wrapper({ class: [ui.wrapper] })}>
+					<div {...props} class={variants.content({ class: [ui.content] })} transition:fly>
+						{@render children?.()}
+
+						{#if kbds?.length}
+							<span class={variants.kbds({ class: ui.kbds })}>
+								{#each kbds as kbd, idx (idx)}
+									<Kbd {...typeof kbd === 'string' ? { value: kbd } : kbd} />
+								{/each}
+							</span>
+						{/if}
+					</div>
+				</div>
+			{/snippet}
+			children
+
+			{#if arrow}
+				<Tooltip.Arrow
+					{...typeof arrow === 'boolean' ? {} : arrow}
+					class={variants.arrow({ class: ui.arrow })}
+				/>
+			{/if}
+		</Tooltip.Content>
+	</Tooltip.Portal>
+</Tooltip.Root>

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

@@ -0,0 +1,24 @@
+import type { TooltipContentProps, TooltipArrowProps, PortalProps } from 'bits-ui';
+import { Tooltip } from 'bits-ui';
+import { type KbdProps, type ButtonProps } from '../index.js';
+import type { Snippet } from 'svelte';
+import { type ClassValue } from 'tailwind-variants';
+export type TooltipProps = {
+    children?: Snippet;
+    open?: boolean;
+    kbds?: KbdProps['value'][] | KbdProps[];
+    trigger?: ButtonProps | Snippet<[Record<string, unknown>]>;
+    disabled?: boolean;
+    portal?: PortalProps;
+    content?: TooltipContentProps;
+    ui?: {
+        content?: ClassValue;
+        wrapper?: ClassValue;
+        kbds?: ClassValue;
+        arrow?: ClassValue;
+    };
+    arrow?: boolean | TooltipArrowProps;
+};
+declare const Tooltip: import("svelte").Component<TooltipProps, {}, "open">;
+type Tooltip = ReturnType<typeof Tooltip>;
+export default Tooltip;

package/dist/contexts.d.ts

@@ -0,0 +1,47 @@
+import { Context } from 'runed';
+export declare const app_icons: Context<Record<"arrowdown" | "arrowleft" | "arrowright" | "arrowup" | "caution" | "check" | "chevrondoubleleft" | "chevrondoubleright" | "chevrondown" | "chevronleft" | "chevronright" | "chevronup" | "close" | "copy" | "copycheck" | "dark" | "drag" | "ellipsis" | "error" | "external" | "eye" | "eyeoff" | "file" | "folder" | "folderopen" | "hash" | "info" | "light" | "loading" | "menu" | "minus" | "panelclose" | "panelopen" | "plus" | "reload" | "search" | "stop" | "success" | "system" | "tip" | "upload" | "warning", string>>;
+export type AppIcons = keyof typeof DEFAULT_ICONS;
+export declare const DEFAULT_ICONS: {
+    arrowdown: string;
+    arrowleft: string;
+    arrowright: string;
+    arrowup: string;
+    caution: string;
+    check: string;
+    chevrondoubleleft: string;
+    chevrondoubleright: string;
+    chevrondown: string;
+    chevronleft: string;
+    chevronright: string;
+    chevronup: string;
+    close: string;
+    copy: string;
+    copycheck: string;
+    dark: string;
+    drag: string;
+    ellipsis: string;
+    error: string;
+    external: string;
+    eye: string;
+    eyeoff: string;
+    file: string;
+    folder: string;
+    folderopen: string;
+    hash: string;
+    info: string;
+    light: string;
+    loading: string;
+    menu: string;
+    minus: string;
+    panelclose: string;
+    panelopen: string;
+    plus: string;
+    reload: string;
+    search: string;
+    stop: string;
+    success: string;
+    system: string;
+    tip: string;
+    upload: string;
+    warning: string;
+};

package/dist/contexts.js

@@ -0,0 +1,46 @@
+import { Context } from 'runed';
+export const app_icons = new Context('app-config');
+export const DEFAULT_ICONS = {
+    arrowdown: 'i-lucide:arrow-down',
+    arrowleft: 'i-lucide:arrow-left',
+    arrowright: 'i-lucide:arrow-right',
+    arrowup: 'i-lucide:arrow-up',
+    caution: 'i-lucide:circle-alert',
+    check: 'i-lucide:check',
+    chevrondoubleleft: 'i-lucide:chevron-double-left',
+    chevrondoubleright: 'i-lucide:chevron-double-right',
+    chevrondown: 'i-lucide:chevron-down',
+    chevronleft: 'i-lucide:chevron-left',
+    chevronright: 'i-lucide:chevron-right',
+    chevronup: 'i-lucide:chevron-up',
+    close: 'i-lucide:x',
+    copy: 'i-lucide:copy',
+    copycheck: 'i-lucide:circle-check',
+    dark: 'i-lucide:moon',
+    drag: 'i-lucide:grip-vertical',
+    ellipsis: 'i-lucide:ellipsis',
+    error: 'i-lucide:circle-x',
+    external: 'i-lucide:arrow-up-right',
+    eye: 'i-lucide:eye',
+    eyeoff: 'i-lucide:eye-slash',
+    file: 'i-lucide:file',
+    folder: 'i-lucide:folder',
+    folderopen: 'i-lucide:folder-open',
+    hash: 'i-lucide:hash',
+    info: 'i-lucide:info',
+    light: 'i-lucide:sun',
+    loading: 'i-lucide:loader-circle',
+    menu: 'i-lucide:list',
+    minus: 'i-lucide:minus',
+    panelclose: 'i-lucide:caret-left',
+    panelopen: 'i-lucide:caret-right',
+    plus: 'i-lucide:plus',
+    reload: 'i-lucide:arrow-counter-clockwise',
+    search: 'i-lucide:magnifying-glass',
+    stop: 'i-lucide:square',
+    success: 'i-lucide:check-circle',
+    system: 'i-lucide:monitor',
+    tip: 'i-lucide:lightbulb',
+    upload: 'i-lucide:upload',
+    warning: 'i-lucide:warning',
+};

package/dist/index.d.ts

@@ -2,3 +2,4 @@ export * from './components/index.js';
 export * from './utilities.svelte.js';
 export * from './types.js';
 export { ModeWatcher } from 'mode-watcher';
+export { toast, type ToastOptions } from 'svelte-sonner';

package/dist/index.js

@@ -2,3 +2,4 @@ export * from './components/index.js';
 export * from './utilities.svelte.js';
 export * from './types.js';
 export { ModeWatcher } from 'mode-watcher';
+export { toast } from 'svelte-sonner';

package/dist/mode.d.ts

@@ -1 +1,90 @@
+import { setMode } from 'mode-watcher';
+export type Mode = Parameters<typeof setMode>['0'];
+export type ThemeColors = {
+    dark: string;
+    light: string;
+} | undefined;
+export type ModeWatcherProps = {
+    /**
+     * Whether to automatically track operating system preferences
+     * and update the mode accordingly.
+     *
+     * @default `true`
+     */
+    track?: boolean;
+    /**
+     * The default mode to use instead of the user's preference.
+     *
+     * @default `"system"`
+     */
+    defaultMode?: Mode;
+    /**
+     * The default theme to use, which will be applied to the root `html` element
+     * and can be managed with the `setTheme` function.
+     *
+     * @example
+     * ```html
+     * <html data-theme="your-custom-theme"></html>
+     * ```
+     *
+     * @default `undefined`
+     */
+    defaultTheme?: string;
+    /**
+     * The theme colors to use for each mode.
+     */
+    themeColors?: ThemeColors;
+    /**
+     * Whether to disable transitions when updating the mode.
+     */
+    disableTransitions?: boolean;
+    /**
+     * The classname to add to the root `html` element when the mode is dark.
+     *
+     * @default `["dark"]`
+     */
+    darkClassNames?: string[];
+    /**
+     * The classname to add to the root `html` element when the mode is light.
+     *
+     * @default `[]`
+     */
+    lightClassNames?: string[];
+    /**
+     * Optionally provide a custom local storage key to use for storing the mode.
+     *
+     * @default `'mode-watcher-mode'`
+     */
+    modeStorageKey?: string;
+    /**
+     * Optionally provide a custom local storage key to use for storing the theme.
+     *
+     * @default `'mode-watcher-theme'`
+     */
+    themeStorageKey?: string;
+    /**
+     * An optional nonce to use for the injected script tag to allow-list mode-watcher
+     * if you are using a Content Security Policy.
+     *
+     * @default `undefined`
+     */
+    nonce?: string;
+    /**
+     * Whether to disable the injected script tag that sets the initial mode.
+     * Set this if you are manually injecting the script using a hook.
+     *
+     * @default `false`
+     */
+    disableHeadScriptInjection?: boolean;
+    /**
+     * Whether to run the mode changes synchronously instead of using
+     * an animation frame. If true, will have an impact on blocking performance
+     * due to blocking the main thread.
+     *
+     * Only applicable if `disableTransitions` is set to `true`.
+     *
+     * @default `false`
+     */
+    synchronousModeChanges?: boolean;
+};
 export * from 'mode-watcher';

package/dist/mode.js

@@ -1 +1,2 @@
+import { setMode } from 'mode-watcher';
 export * from 'mode-watcher';

package/dist/utilities.svelte.d.ts

@@ -11,7 +11,7 @@ export declare function isComponent(v: unknown): v is Component;
  * @param v - The value to check
  * @returns true if the value is a snippet, false otherwise
  */
-export declare function isSnippet(v: unknown): v is Snippet;
+export declare function isSnippet<T>(v: unknown): v is Snippet<[T]>;
 /**
  * Returns a reactive value holding the dom rect of `node`s.
  *