uisv 0.0.20 → 0.0.22

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/icon.svelte

@@ -46,8 +46,6 @@
 		},
 	);
 
-	$inspect(isComponent(name), name);
-
 	useStyle(() => css_style);
 </script>
 

package/dist/components/index.d.ts

@@ -55,3 +55,9 @@ 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';

package/dist/components/index.js

@@ -55,3 +55,9 @@ 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';

package/dist/components/input-number.svelte

@@ -7,9 +7,7 @@
 		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';
 
 	export type InputNumberProps = Omit<SvelteHTMLElements['input'], 'size' | 'value'> & {
@@ -38,10 +36,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>

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">;

package/dist/components/input-time.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import { type PropColor, type PropVariant } from '../index.js';
 	import type { Component, Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 	import { Time } from '../date.js';
 
 	export { default as InputTime } from './input-time.svelte';
@@ -45,11 +44,11 @@
 		value?: Time;
 		icon?: string | Snippet | Component;
 		ui?: {
-			root?: ClassNameValue;
-			leading?: ClassNameValue;
-			icon?: ClassNameValue;
-			trailing?: ClassNameValue;
-			segment?: ClassNameValue;
+			root?: ClassValue;
+			leading?: ClassValue;
+			icon?: ClassValue;
+			trailing?: ClassValue;
+			segment?: ClassValue;
 		};
 	};
 </script>
@@ -74,12 +73,12 @@
 		tv({
 			slots: {
 				root: 'inline-flex items-center rounded transition-all ring ring-inset ring-transparent',
-				leading: 'text-muted',
-				trailing: 'text-muted',
+				leading: 'text-label-muted',
+				trailing: 'text-label-muted',
 				icon: '',
 				segment: [
 					'rounded text-center outline-hidden transition-all focus:bg-surface-accented shrink',
-					'aria-[valuetext="Empty"]:text-dimmed data-[segment="literal"]:text-muted data-[segment="literal"]:px-1 data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75',
+					'aria-[valuetext="Empty"]:text-label-dimmed data-[segment="literal"]:text-label-muted data-[segment="literal"]:px-1 data-invalid:text-error data-disabled:cursor-not-allowed data-disabled:opacity-75',
 				],
 			},
 			variants: {
@@ -158,7 +157,7 @@
 					true: '',
 				},
 				type: {
-					file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none',
+					file: 'file:me-1.5 file:font-medium file:text-label-muted file:outline-none',
 				},
 			},
 			compoundVariants: [
@@ -175,7 +174,7 @@
 					variant: ['outline', 'subtle'],
 					highlight: true,
 					class: {
-						root: 'ring-surface-800 ring-2',
+						root: 'ring-surface-inverted ring-2',
 					},
 				},
 				{

package/dist/components/input-time.svelte.d.ts

@@ -1,6 +1,6 @@
 import { type PropColor, type PropVariant } from '../index.js';
 import type { Component, Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 import { Time } from '../date.js';
 export { default as InputTime } from './input-time.svelte';
 export type InputTimeProps = {
@@ -41,11 +41,11 @@ export type InputTimeProps = {
     value?: Time;
     icon?: string | Snippet | Component;
     ui?: {
-        root?: ClassNameValue;
-        leading?: ClassNameValue;
-        icon?: ClassNameValue;
-        trailing?: ClassNameValue;
-        segment?: ClassNameValue;
+        root?: ClassValue;
+        leading?: ClassValue;
+        icon?: ClassValue;
+        trailing?: ClassValue;
+        segment?: ClassValue;
     };
 };
 declare const InputTime: Component<InputTimeProps, {}, "value">;

package/dist/components/input.svelte

@@ -2,10 +2,9 @@
 	import { type PropColor, type PropVariant, isComponent, isSnippet } from '../index.js';
 	import type { Component, Snippet } from 'svelte';
 	import type { SvelteHTMLElements } from 'svelte/elements';
-	import type { ClassNameValue } from 'tailwind-merge';
 	import { maska } from 'maska/svelte';
 	import { type MaskInputOptions } from 'maska';
-	import { tv } from 'tailwind-variants';
+	import { tv, type ClassValue } from 'tailwind-variants';
 
 	export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
 		name?: string;
@@ -47,11 +46,11 @@
 		loadingicon?: string | Component;
 		mask?: string | MaskInputOptions;
 		ui?: {
-			root?: ClassNameValue;
-			base?: ClassNameValue;
-			leading?: ClassNameValue;
-			icon?: ClassNameValue;
-			trailing?: ClassNameValue;
+			root?: ClassValue;
+			base?: ClassValue;
+			leading?: ClassValue;
+			icon?: ClassValue;
+			trailing?: ClassValue;
 		};
 	};
 </script>
@@ -84,9 +83,9 @@
 		tv({
 			slots: {
 				root: 'inline-flex items-center rounded transition-all ring ring-inset ring-transparent',
-				base: 'appearance-none outline-none placeholder:text-muted',
-				leading: 'text-muted flex items-center',
-				trailing: 'text-muted flex items-center',
+				base: 'appearance-none outline-none placeholder:text-label-muted',
+				leading: 'text-label-muted flex items-center',
+				trailing: 'text-label-muted flex items-center',
 				icon: '',
 			},
 			variants: {
@@ -162,7 +161,7 @@
 					true: '',
 				},
 				type: {
-					file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none',
+					file: 'file:me-1.5 file:font-medium file:text-label-muted file:outline-none',
 				},
 			},
 			compoundVariants: [
@@ -177,7 +176,7 @@
 					color: 'surface',
 					variant: ['outline', 'subtle'],
 					class: {
-						root: 'focus-within:ring-surface-800 focus-within:ring-2',
+						root: 'focus-within:ring-surface-inverted focus-within:ring-2',
 					},
 				},
 				{

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

@@ -1,8 +1,8 @@
 import { type PropColor, type PropVariant } from '../index.js';
 import type { Component, Snippet } from 'svelte';
 import type { SvelteHTMLElements } from 'svelte/elements';
-import type { ClassNameValue } from 'tailwind-merge';
 import { type MaskInputOptions } from 'maska';
+import { type ClassValue } from 'tailwind-variants';
 export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
     name?: string;
     /**
@@ -43,11 +43,11 @@ export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
     loadingicon?: string | Component;
     mask?: string | MaskInputOptions;
     ui?: {
-        root?: ClassNameValue;
-        base?: ClassNameValue;
-        leading?: ClassNameValue;
-        icon?: ClassNameValue;
-        trailing?: ClassNameValue;
+        root?: ClassValue;
+        base?: ClassValue;
+        leading?: ClassValue;
+        icon?: ClassValue;
+        trailing?: ClassValue;
     };
 };
 declare const Input: Component<InputProps, {}, "value">;

package/dist/components/kbd.svelte

@@ -1,8 +1,7 @@
 <script module lang="ts">
 	import type { PropColor, PropVariant } 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 KbdProps = {
 		children?: Snippet;
@@ -10,7 +9,7 @@
 		color?: PropColor;
 		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
 		size?: 'sm' | 'md' | 'lg';
-		class?: ClassNameValue;
+		class?: ClassValue;
 	};
 
 	export const KBD_KEYS = {
@@ -110,7 +109,7 @@
 			{
 				color: 'surface',
 				variant: 'outline',
-				class: 'border-surface-600',
+				class: 'border-label-toned',
 			},
 			{
 				color: 'info',
@@ -142,7 +141,7 @@
 			{
 				color: 'surface',
 				variant: 'solid',
-				class: 'bg-surface-600 border-surface-700',
+				class: 'bg-label-toned border-label-highlighted',
 			},
 			{
 				color: 'info',
@@ -174,7 +173,7 @@
 			{
 				color: 'surface',
 				variant: 'soft',
-				class: 'bg-surface-100 text-surface-700',
+				class: 'bg-surface-elevated text-label-toned',
 			},
 			{
 				color: 'info',
@@ -206,7 +205,7 @@
 			{
 				color: 'surface',
 				variant: 'subtle',
-				class: 'bg-surface-100 border-surface-200 text-surface-700',
+				class: 'bg-surface-muted border-surface-accented text-label-toned',
 			},
 			{
 				color: 'info',

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

@@ -1,13 +1,13 @@
 import type { PropColor, PropVariant } from '../index.js';
 import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
+import { type ClassValue } from 'tailwind-variants';
 export type KbdProps = {
     children?: Snippet;
     value?: string;
     color?: PropColor;
     variant?: Exclude<PropVariant, 'none' | 'ghost'>;
     size?: 'sm' | 'md' | 'lg';
-    class?: ClassNameValue;
+    class?: ClassValue;
 };
 export declare const KBD_KEYS: {
     meta: string;

package/dist/components/modal.svelte

@@ -0,0 +1,189 @@
+<script module lang="ts">
+	import { Dialog, type DialogContentProps, type PortalProps } from 'bits-ui';
+	import { tv, type ClassValue } from 'tailwind-variants';
+	import { Button, isComponent, isSnippet, type ButtonProps } from '../index.js';
+	import type { Component, Snippet } from 'svelte';
+	import defu from 'defu';
+	import { fade, scale } from 'svelte/transition';
+	import { cubicIn } from 'svelte/easing';
+	import { app_icons } from '../contexts.js';
+
+	export type ModalProps = {
+		open?: boolean;
+		trigger?: ButtonProps;
+		ui?: {
+			overlay?: ClassValue;
+			content?: ClassValue;
+			header?: ClassValue;
+			body?: ClassValue;
+			footer?: ClassValue;
+			title?: ClassValue;
+			description?: ClassValue;
+		};
+		children?: Snippet;
+		title?: string | Snippet<[Record<string, unknown>]> | Component;
+		description?: string | Snippet<[Record<string, unknown>]> | Component;
+		footer?: Snippet<[{ close: () => void }]>;
+		close?: boolean | ButtonProps;
+		transition?: boolean;
+		overlay?: boolean;
+		fullscreen?: boolean;
+		dismissable?: boolean;
+		portal?: PortalProps;
+		content?: DialogContentProps;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		open = $bindable(false),
+		trigger,
+		ui = {},
+		children,
+		title,
+		description,
+		footer,
+		close = true,
+		transition = true,
+		overlay = true,
+		fullscreen,
+		dismissable = true,
+		portal,
+		content,
+	}: ModalProps = $props();
+
+	let content_element = $state<HTMLDivElement | null>(null);
+
+	const variants = $derived(
+		tv({
+			slots: {
+				content:
+					'z-[calc(var(--bits-dialog-depth)*10+11)] fixed bg-surface-base border border-surface-accented rounded-md divide-y divide-surface-accented flex flex-col overflow-hidden pointer-events-auto',
+				overlay: 'fixed inset-0 bg-surface-elevated/75 z-[calc(var(--bits-dialog-depth)*10+10)] ',
+				header: 'flex items-center gap-1.5 p-4 sm:px-6',
+				body: 'flex-1 p-4 sm:p-6 overflow-y-auto',
+				footer: 'flex items-center gap-1.5 p-4 sm:px-6',
+				title: 'text-label-highlighted font-semibold select-all',
+				description: 'mt-1 text-label-muted text-sm',
+			},
+			variants: {
+				fullscreen: {
+					true: {
+						content: 'inset-0',
+					},
+					false: {
+						content:
+							'-translate-1/2 top-1/2 left-1/2 max-h-[calc(100dvh-2rem)] sm:max-h-[calc(100dvh-4rem)] max-w-lg w-full',
+					},
+				},
+			},
+		})({ fullscreen }),
+	);
+</script>
+
+<Dialog.Root bind:open>
+	{#if trigger}
+		<Dialog.Trigger>
+			{#snippet child({ props })}
+				<Button {...props} {...trigger} />
+			{/snippet}
+		</Dialog.Trigger>
+	{/if}
+
+	<Dialog.Portal {...portal}>
+		<Dialog.Overlay forceMount>
+			{#snippet child({ props })}
+				{#if overlay && open}
+					<div
+						{...props}
+						class={variants.overlay({
+							class: [ui.overlay],
+						})}
+						transition:fade={{ duration: transition ? 200 : 0 }}
+					></div>
+				{/if}
+			{/snippet}
+		</Dialog.Overlay>
+
+		<Dialog.Content
+			{...content}
+			forceMount
+			escapeKeydownBehavior={dismissable ? 'close' : 'ignore'}
+			interactOutsideBehavior={dismissable ? 'close' : 'ignore'}
+			onInteractOutside={(e) => {
+				if (content_element?.contains(e.target as Node)) e.preventDefault();
+				if (content?.onInteractOutside) content.onInteractOutside(e);
+			}}
+		>
+			{#snippet child({ props })}
+				{#if open}
+					<div
+						bind:this={content_element}
+						{...props}
+						class={variants.content({ class: ui.content })}
+						transition:scale={{
+							duration: transition ? 200 : 0,
+							easing: cubicIn,
+							start: 0.95,
+							opacity: 0,
+						}}
+					>
+						{#if title || description}
+							<div class={variants.header({ class: ui.header })}>
+								<div class="flex-1">
+									{#if typeof title === 'string'}
+										<h1 class={variants.title({ class: ui.title })}>{title}</h1>
+									{:else if isSnippet(title)}
+										{@render title({ class: variants.title({ class: ui.title }) })}
+									{:else if isComponent(title)}
+										{@const Comp = title}
+
+										<Comp class={variants.title({ class: ui.title })} />
+									{/if}
+
+									{#if typeof description === 'string'}
+										<h1 class={variants.description({ class: ui.description })}>{description}</h1>
+									{:else if isSnippet(description)}
+										{@render description({
+											class: variants.description({ class: ui.description }),
+										})}
+									{:else if isComponent(title)}
+										{@const Comp = description}
+
+										<Comp class={variants.description({ class: ui.description })} />
+									{/if}
+								</div>
+
+								{#if close}
+									<Button
+										{...props}
+										{...defu(typeof close === 'boolean' ? {} : close, <ButtonProps>{
+											variant: 'ghost',
+											color: 'surface',
+											icon: app_icons.get().close,
+											onclick() {
+												open = false;
+											},
+										})}
+									/>
+								{/if}
+							</div>
+						{/if}
+
+						<div class={variants.body({ class: ui.body })}>
+							{@render children?.()}
+						</div>
+
+						{#if footer}
+							<div class={variants.footer({ class: ui.footer })}>
+								{@render footer({
+									close: () => (open = false),
+								})}
+							</div>
+						{/if}
+					</div>
+				{/if}
+			{/snippet}
+		</Dialog.Content>
+	</Dialog.Portal>
+</Dialog.Root>

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

@@ -0,0 +1,33 @@
+import { type DialogContentProps, type PortalProps } from 'bits-ui';
+import { type ClassValue } from 'tailwind-variants';
+import { type ButtonProps } from '../index.js';
+import type { Component, Snippet } from 'svelte';
+export type ModalProps = {
+    open?: boolean;
+    trigger?: ButtonProps;
+    ui?: {
+        overlay?: ClassValue;
+        content?: ClassValue;
+        header?: ClassValue;
+        body?: ClassValue;
+        footer?: ClassValue;
+        title?: ClassValue;
+        description?: ClassValue;
+    };
+    children?: Snippet;
+    title?: string | Snippet<[Record<string, unknown>]> | Component;
+    description?: string | Snippet<[Record<string, unknown>]> | Component;
+    footer?: Snippet<[{
+        close: () => void;
+    }]>;
+    close?: boolean | ButtonProps;
+    transition?: boolean;
+    overlay?: boolean;
+    fullscreen?: boolean;
+    dismissable?: boolean;
+    portal?: PortalProps;
+    content?: DialogContentProps;
+};
+declare const Modal: Component<ModalProps, {}, "open">;
+type Modal = ReturnType<typeof Modal>;
+export default Modal;

package/dist/components/p.svelte

@@ -2,8 +2,10 @@
 	import type { SvelteHTMLElements } from 'svelte/elements';
 	import { cn } from 'tailwind-variants';
 	const { children, class: classes }: SvelteHTMLElements['p'] = $props();
+
+	const classname = $derived(cn('my-5 leading-7 text-pretty', classes));
 </script>
 
-<p class={cn('my-5 leading-7 text-pretty', classes)}>
+<p class={classname}>
 	{@render children?.()}
 </p>