uisv 0.0.21 → 0.0.23

package/dist/components/checkbox.svelte

@@ -1,8 +1,8 @@
 <script module lang="ts">
+	import { getAppContext } from '../contexts.js';
 	import { type PropColor, isComponent, isSnippet } from '../index.js';
 	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 	import type { Component } from 'vitest-browser-svelte';
 
 	export type CheckboxProps = {
@@ -18,11 +18,11 @@
 		indicator?: 'start' | 'end' | 'hidden';
 		as?: string;
 		ui?: {
-			root?: ClassNameValue;
-			container?: ClassNameValue;
-			icon?: ClassNameValue;
-			label?: ClassNameValue;
-			description?: ClassNameValue;
+			root?: ClassValue;
+			container?: ClassValue;
+			icon?: ClassValue;
+			label?: ClassValue;
+			description?: ClassValue;
 		};
 	};
 </script>
@@ -33,96 +33,98 @@
 		color = 'primary',
 		size = 'md',
 		disabled,
-		icon = 'i-lucide-check',
-		intermediateicon = 'i-lucide-minus',
+		icon = getAppContext().icons.check,
+		intermediateicon = getAppContext().icons.minus,
 		label,
 		description,
 		required,
 		indicator = 'start',
 		as = 'div',
-		ui = {}
+		ui = {},
 	}: CheckboxProps = $props();
 	const id = $props.id();
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				root: 'relative flex-inline gap-2',
 				container:
-					'rounded-md border border-neutral-200 relative transition m-0.5 mr-0 grid place-items-center',
+					'rounded-md border border-surface-accented relative transition m-0.5 mr-0 grid place-items-center',
 				icon: 'pi text-white',
 				label: 'text-sm font-medium',
-				description: 'text-sm text-neutral-500'
+				description: 'text-sm text-label-muted',
 			},
 			variants: {
 				color: {
 					primary: {
-						container: [value && 'bg-primary-500 border-primary-500 text-primary-500']
+						container: [value && 'bg-primary-500 border-primary-500 text-primary-500'],
 					},
 					surface: {
-						container: [value && 'bg-neutral-900 border-neutral-900 text-neutral-900']
+						container: [
+							value && 'bg-surface-inverted border-surface-inverted text-surface-inverted',
+						],
 					},
 					info: {
-						container: [value && 'bg-info-500 border-info-500 text-info-500']
+						container: [value && 'bg-info-500 border-info-500 text-info-500'],
 					},
 					success: {
-						container: [value && 'bg-success-500 border-success-500 text-success-500']
+						container: [value && 'bg-success-500 border-success-500 text-success-500'],
 					},
 					warning: {
-						container: [value && 'bg-warning-500 border-warning-500 text-warning-500']
+						container: [value && 'bg-warning-500 border-warning-500 text-warning-500'],
 					},
 					error: {
-						container: [value && 'bg-error-500 border-error-500 text-error-500']
-					}
+						container: [value && 'bg-error-500 border-error-500 text-error-500'],
+					},
 				},
 				size: {
 					xs: {
 						container: 'size-3',
-						icon: 'size-3'
+						icon: 'size-3',
 					},
 					sm: {
 						container: 'size-3.5',
-						icon: 'size-3.5'
+						icon: 'size-3.5',
 					},
 					md: {
 						container: 'size-4',
-						icon: 'size-4'
+						icon: 'size-4',
 					},
 					lg: {
 						container: 'size-4.5',
-						icon: 'size-4.5'
+						icon: 'size-4.5',
 					},
 					xl: {
 						container: 'size-5',
-						icon: 'size-5'
-					}
+						icon: 'size-5',
+					},
 				},
 				indicator: {
 					start: '',
 					end: {
-						root: 'flex-row-reverse'
+						root: 'flex-row-reverse',
 					},
 					hidden: {
-						container: 'hidden'
-					}
-				}
+						container: 'hidden',
+					},
+				},
 			},
-			compoundVariants: []
-		})({ color, size, indicator })
+			compoundVariants: [],
+		})({ color, size, indicator }),
 	);
 </script>
 
 <svelte:element
 	this={as}
 	data-state={value ? 'checked' : 'unchecked'}
-	class={classes.root({
-		class: [disabled && 'opacity-50', ui.root]
+	class={variants.root({
+		class: [disabled && 'opacity-50', ui.root],
 	})}
 >
 	<button
 		{id}
 		aria-label="checkbox"
-		class={classes.container({ class: [ui.container] })}
+		class={variants.container({ class: [ui.container] })}
 		onclick={() => {
 			if (disabled) return;
 			if (value === 'intermediate') return (value = true);
@@ -137,8 +139,8 @@
 		<div class="flex flex-col justify-start">
 			<label
 				for={id}
-				class={classes.label({
-					class: [required ? 'after:content-["*"] after:text-error-500' : '', ui.label]
+				class={variants.label({
+					class: [required ? 'after:content-["*"] after:text-error-500' : '', ui.label],
 				})}
 			>
 				{#if typeof label === 'string'}
@@ -149,7 +151,7 @@
 			</label>
 
 			{#if description}
-				<div class={classes.description({ class: ui.description })}>
+				<div class={variants.description({ class: ui.description })}>
 					{#if typeof description === 'string'}
 						{description}
 					{:else}
@@ -161,10 +163,10 @@
 	{/if}
 </svelte:element>
 
-{#snippet Icon(ico?: CheckboxProps['icon'], icon_class?: ClassNameValue)}
+{#snippet Icon(ico?: CheckboxProps['icon'], icon_class?: ClassValue)}
 	<div class={['absolute', icon_class]}>
 		{#if typeof ico === 'string'}
-			<div class={classes.icon({ class: [ico, ui.icon] })}></div>
+			<div class={variants.icon({ class: [ico, ui.icon] })}></div>
 		{:else if isSnippet(ico)}
 			{@render ico()}
 		{:else if isComponent(ico)}

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

@@ -1,6 +1,6 @@
 import { type PropColor } from '../index.js';
 import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 import type { Component } from 'vitest-browser-svelte';
 export type CheckboxProps = {
     value?: boolean | 'intermediate';
@@ -15,11 +15,11 @@ export type CheckboxProps = {
     indicator?: 'start' | 'end' | 'hidden';
     as?: string;
     ui?: {
-        root?: ClassNameValue;
-        container?: ClassNameValue;
-        icon?: ClassNameValue;
-        label?: ClassNameValue;
-        description?: ClassNameValue;
+        root?: ClassValue;
+        container?: ClassValue;
+        icon?: ClassValue;
+        label?: ClassValue;
+        description?: ClassValue;
     };
 };
 declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value">;

package/dist/components/chip.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import type { PropColor } from '../index.js';
 	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 
 	export type ChipProps = {
 		children: Snippet;
@@ -11,8 +10,8 @@
 		position?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
 		size?: number;
 		ui?: {
-			base?: ClassNameValue;
-			chip?: ClassNameValue;
+			base?: ClassValue;
+			chip?: ClassValue;
 		};
 	};
 </script>
@@ -27,12 +26,12 @@
 		ui = {},
 	}: ChipProps = $props();
 
-	const classes = $derived.by(() =>
+	const variants = $derived.by(() =>
 		tv({
 			slots: {
 				base: 'relative inline-flex items-center justify-center shrink-0',
 				chip: [
-					'absolute rounded-full ring ring-inverted flex items-center justify-center text-inverted font-medium whitespace-nowrap',
+					'absolute rounded-full ring ring-inverted flex items-center justify-center text-label-inverted font-medium whitespace-nowrap',
 					'-translate-y-1/2 translate-x-1/2 px-0.5',
 				],
 			},
@@ -68,11 +67,11 @@
 	);
 </script>
 
-<div class={classes.base({ class: [ui.base] })}>
+<div class={variants.base({ class: [ui.base] })}>
 	{@render children()}
 
 	<span
-		class={classes.chip({ class: ui.chip })}
+		class={variants.chip({ class: ui.chip })}
 		style:height="{size}px"
 		style:min-width="{size}px"
 		style:font-size="{size}px"

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

@@ -1,6 +1,6 @@
 import type { PropColor } from '../index.js';
 import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type ChipProps = {
     children: Snippet;
     text?: string;
@@ -8,8 +8,8 @@ export type ChipProps = {
     position?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
     size?: number;
     ui?: {
-        base?: ClassNameValue;
-        chip?: ClassNameValue;
+        base?: ClassValue;
+        chip?: ClassValue;
     };
 };
 declare const Chip: import("svelte").Component<ChipProps, {}, "">;

package/dist/components/collapsible.svelte

@@ -2,21 +2,22 @@
 	import { type ButtonProps, Button } from '../index.js';
 	import { Collapsible } from 'bits-ui';
 	import { defu } from 'defu';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 
 	export type CollapsibleProps = ButtonProps & {
 		open?: boolean;
 		disabled?: boolean;
-		class?: ClassNameValue;
+		class?: ClassValue;
 		ui?: {
-			root?: ClassNameValue;
-			content?: ClassNameValue;
+			root?: ClassValue;
+			content?: ClassValue;
 		};
 	};
 </script>
 
 <script lang="ts">
+	import { getAppContext } from '../contexts.js';
+
 	let {
 		open = $bindable(false),
 		children,
@@ -41,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/collapsible.svelte.d.ts

@@ -1,13 +1,13 @@
 import { type ButtonProps } from '../index.js';
 import { Collapsible } from 'bits-ui';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type CollapsibleProps = ButtonProps & {
     open?: boolean;
     disabled?: boolean;
-    class?: ClassNameValue;
+    class?: ClassValue;
     ui?: {
-        root?: ClassNameValue;
-        content?: ClassNameValue;
+        root?: ClassValue;
+        content?: ClassValue;
     };
 };
 declare const Collapsible: import("svelte").Component<CollapsibleProps, {}, "open">;

package/dist/components/color-picker.svelte

@@ -22,7 +22,7 @@
 
 	const translated = $derived(new ColorTranslator(value));
 
-	const classes = $derived(
+	const variants = $derived(
 		tv({
 			slots: {
 				root: '',

package/dist/components/h1.svelte

@@ -2,14 +2,15 @@
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 	const { children, class: classes, ...rest }: SvelteHTMLElements['h1'] = $props();
+
+	const classname = $derived(
+		cn(
+			'text-4xl font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
+			classes,
+		),
+	);
 </script>
 
-<h1
-	{...rest}
-	class={cn(
-		'text-4xl font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
-		classes,
-	)}
->
+<h1 {...rest} class={classname}>
 	{@render children?.()}
 </h1>

package/dist/components/h2.svelte

@@ -2,18 +2,19 @@
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 	const { children, class: classes, ...rest }: SvelteHTMLElements['h2'] = $props();
+
+	const classname = $derived(
+		cn(
+			'relative text-2xl text-label-highlighted font-bold mt-12 mb-6',
+			'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
+			'[&>a]:focus-visible:outline-primary',
+			'[&>a>code]:transition-colors [&>a>code]:border-dashed [&>a>code]:font-bold [&>a>code]:text-xl/7',
+			'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
+			classes,
+		),
+	);
 </script>
 
-<h2
-	{...rest}
-	class={cn(
-		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
-		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
-		'[&>a]:focus-visible:outline-primary',
-		'[&>a>code]:transition-colors [&>a>code]:border-dashed [&>a>code]:font-bold [&>a>code]:text-xl/7',
-		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
-		classes,
-	)}
->
+<h2 {...rest} class={classname}>
 	{@render children?.()}
 </h2>

package/dist/components/h3.svelte

@@ -2,15 +2,16 @@
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 	const { children, class: classes, ...rest }: SvelteHTMLElements['h3'] = $props();
+
+	const classname = $derived(
+		cn(
+			'relative text-xl text-label-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
+			'[&>a>code]:transition-colors',
+			classes,
+		),
+	);
 </script>
 
-<h3
-	{...rest}
-	class={cn(
-		'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
-		'[&>a>code]:transition-colors',
-		classes,
-	)}
->
+<h3 {...rest} class={classname}>
 	{@render children?.()}
 </h3>

package/dist/components/h4.svelte

@@ -2,18 +2,19 @@
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 	const { children, class: classes, ...rest }: SvelteHTMLElements['h4'] = $props();
+
+	const classname = $derived(
+		cn(
+			'relative text-2xl text-label-highlighted font-bold mt-12 mb-6',
+			'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
+			'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
+			'[&>a>code]:transition-colors [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:border-dashed',
+			'[&>a]:focus-visible:outline-primary',
+			classes,
+		),
+	);
 </script>
 
-<h4
-	{...rest}
-	class={cn(
-		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
-		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
-		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
-		'[&>a>code]:transition-colors [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:border-dashed',
-		'[&>a]:focus-visible:outline-primary',
-		classes,
-	)}
->
+<h4 {...rest} class={classname}>
 	{@render children?.()}
 </h4>

package/dist/components/h5.svelte

@@ -2,18 +2,19 @@
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 	const { children, class: classes, ...rest }: SvelteHTMLElements['h5'] = $props();
+
+	const classname = $derived(
+		cn(
+			'relative text-2xl text-label-highlighted font-bold mt-12 mb-6',
+			'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
+			'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
+			'[&>a>code]:transition-colors [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:border-dashed',
+			'[&>a]:focus-visible:outline-primary',
+			classes,
+		),
+	);
 </script>
 
-<h5
-	{...rest}
-	class={cn(
-		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
-		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
-		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
-		'[&>a>code]:transition-colors [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:border-dashed',
-		'[&>a]:focus-visible:outline-primary',
-		classes,
-	)}
->
+<h5 {...rest} class={classname}>
 	{@render children?.()}
 </h5>

package/dist/components/h6.svelte

@@ -2,18 +2,19 @@
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 	const { children, class: classes, ...rest }: SvelteHTMLElements['h6'] = $props();
+
+	const classname = $derived(
+		cn(
+			'relative text-2xl text-label-highlighted font-bold mt-12 mb-6',
+			'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
+			'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
+			'[&>a>code]:transition-colors [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:border-dashed',
+			'[&>a]:focus-visible:outline-primary',
+			classes,
+		),
+	);
 </script>
 
-<h6
-	{...rest}
-	class={cn(
-		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
-		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
-		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
-		'[&>a>code]:transition-colors [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:border-dashed',
-		'[&>a]:focus-visible:outline-primary',
-		classes,
-	)}
->
+<h6 {...rest} class={classname}>
 	{@render children?.()}
 </h6>

package/dist/components/index.d.ts

@@ -55,3 +55,10 @@ export * from './breadcrumb.svelte';
 export { default as Breadcrumb } from './breadcrumb.svelte';
 export * from './input-number.svelte';
 export { default as InputNumber } from './input-number.svelte';
+export * from './modal.svelte';
+export { default as Modal } from './modal.svelte';
+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';

package/dist/components/index.js

@@ -55,3 +55,10 @@ export * from './breadcrumb.svelte';
 export { default as Breadcrumb } from './breadcrumb.svelte';
 export * from './input-number.svelte';
 export { default as InputNumber } from './input-number.svelte';
+export * from './modal.svelte';
+export { default as Modal } from './modal.svelte';
+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';

package/dist/components/input-number.svelte

@@ -7,10 +7,9 @@
 		type PropVariant,
 	} from '../index.js';
 	import type { SvelteHTMLElements } from 'svelte/elements';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-	import Accordion from './accordion.svelte';
+	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;
@@ -38,10 +37,10 @@
 		focusonchange?: boolean;
 		autocomplete?: 'on' | 'off' | string;
 		ui?: {
-			root?: ClassNameValue;
-			base?: ClassNameValue;
-			increment?: ClassNameValue;
-			decrement?: ClassNameValue;
+			root?: ClassValue;
+			base?: ClassValue;
+			increment?: ClassValue;
+			decrement?: ClassValue;
 		};
 	};
 </script>
@@ -156,7 +155,7 @@
 	{#if increment}
 		<Button
 			variant="link"
-			icon="i-lucide:minus"
+			icon={getAppContext().icons.minus}
 			onclick={() => {
 				value = value === undefined ? 0 : value - 1;
 			}}
@@ -166,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-number.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type ButtonProps, type PropColor, type PropSize, type PropVariant } from '../index.js';
 import type { SvelteHTMLElements } from 'svelte/elements';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type InputNumberProps = Omit<SvelteHTMLElements['input'], 'size' | 'value'> & {
     value?: number;
     placeholder?: string;
@@ -27,10 +27,10 @@ export type InputNumberProps = Omit<SvelteHTMLElements['input'], 'size' | 'value
     focusonchange?: boolean;
     autocomplete?: 'on' | 'off' | string;
     ui?: {
-        root?: ClassNameValue;
-        base?: ClassNameValue;
-        increment?: ClassNameValue;
-        decrement?: ClassNameValue;
+        root?: ClassValue;
+        base?: ClassValue;
+        increment?: ClassValue;
+        decrement?: ClassValue;
     };
 };
 declare const InputNumber: import("svelte").Component<InputNumberProps, {}, "value">;