uisv 0.0.12 → 0.0.14

package/dist/components/input.svelte

@@ -0,0 +1,285 @@
+<script module lang="ts">
+	import { type PropColor, 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';
+
+	export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
+		name?: string;
+		/**
+		 * The placeholder text when the input is empty.
+		 */
+		placeholder?: string;
+		/**
+		 * @default primary
+		 */
+		color?: PropColor;
+		/**
+		 * @default outline
+		 */
+		variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+		/**
+		 * @default md
+		 */
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		/**
+		 * @default off
+		 */
+		autocomplete?: 'on' | 'off';
+		/**
+		 * @default false
+		 */
+		autofocus?: boolean | number;
+		disabled?: boolean;
+		/**
+		 * Highlight the ring color like a focus state.
+		 */
+		highlight?: boolean;
+		value?: string;
+		icon?: string | Snippet | Component;
+		iconposition?: 'leading' | 'trailing';
+		leading?: string | Snippet | Component;
+		trailing?: string | Snippet | Component;
+		loading?: boolean;
+		loadingicon?: string | Snippet | Component;
+		mask?: string | MaskInputOptions;
+		ui?: {
+			root?: ClassNameValue;
+			base?: ClassNameValue;
+			leading?: ClassNameValue;
+			icon?: ClassNameValue;
+			trailing?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		type,
+		value = $bindable(),
+		color = 'primary',
+		variant = 'outline',
+		size = 'md',
+		icon,
+		iconposition,
+		disabled,
+		highlight,
+		leading,
+		loading,
+		loadingicon = 'i-lucide-loader-circle',
+		required,
+		trailing,
+		mask,
+		ui = {},
+		...rest
+	}: InputProps = $props();
+	const id = $props.id();
+
+	const variants = $derived(
+		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',
+				trailing: 'text-muted',
+				icon: '',
+			},
+			variants: {
+				fieldGroup: {
+					horizontal: {
+						root: '',
+						base: '',
+					},
+					vertical: {
+						root: '',
+						base: '',
+					},
+				},
+				size: {
+					xs: {
+						base: 'px-2 py-1 text-xs gap-1',
+						leading: 'ps-2',
+						trailing: 'pe-2',
+						icon: 'size-4',
+					},
+					sm: {
+						base: 'px-2.5 py-1.5 text-xs gap-1.5',
+						leading: 'ps-2.5',
+						trailing: 'pe-2.5',
+						icon: 'size-4',
+					},
+					md: {
+						base: 'px-2.5 py-1.5 text-sm gap-1.5',
+						leading: 'ps-2.5',
+						trailing: 'pe-2.5',
+						icon: 'size-5',
+					},
+					lg: {
+						base: 'px-3 py-2 text-sm gap-2',
+						leading: 'ps-3',
+						trailing: 'pe-3',
+						icon: 'size-5',
+					},
+					xl: {
+						base: 'px-3 py-2 text-base gap-2',
+						leading: 'ps-3',
+						trailing: 'pe-3',
+						icon: 'size-6',
+					},
+				},
+				variant: {
+					outline: { root: 'ring ring-dimmed' },
+					soft: {
+						root: 'bg-surface-muted hover:bg-surface-elevated focus-within:bg-surface-elevated',
+					},
+					subtle: { root: 'ring ring-dimmed' },
+					ghost: { root: 'hover:bg-surface-elevated focus-within:bg-surface-elevated' },
+					none: { root: '' },
+				},
+				color: {
+					primary: { root: '' },
+					surface: { root: '' },
+					info: { root: '' },
+					success: { root: '' },
+					warning: { root: '' },
+					error: { root: '' },
+				},
+				leading: {
+					false: { leading: 'hidden' },
+				},
+				trailing: {
+					false: { trailing: 'hidden' },
+				},
+				loading: {
+					true: '',
+				},
+				highlight: {
+					true: '',
+				},
+				type: {
+					file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none',
+				},
+			},
+			compoundVariants: [
+				{
+					color: 'primary',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-primary-500 ring-2)',
+					},
+				},
+				{
+					color: 'surface',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-surface-800 ring-2)',
+					},
+				},
+				{
+					color: 'info',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-info-500 ring-2)',
+					},
+				},
+				{
+					color: 'success',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-success-500 ring-2)',
+					},
+				},
+				{
+					color: 'warning',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-warning-500 ring-2)',
+					},
+				},
+				{
+					color: 'error',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-error-500 ring-2)',
+					},
+				},
+			],
+		})({
+			size,
+			color,
+			variant,
+			highlight,
+			loading,
+			leading: !!leading || (!!icon && iconposition === 'leading') || loading,
+			trailing: !!trailing || (!!icon && iconposition === 'trailing'),
+			type: type === 'file' ? 'file' : undefined,
+		}),
+	);
+</script>
+
+<div class={variants.root({ class: ui.root })}>
+	{#if leading || (icon && iconposition === 'leading') || loading}
+		{@const TrailingIcon = loading ? loadingicon : icon}
+
+		<span class={variants.leading({ class: ui.leading })}>
+			{#if !!leading && !loading}
+				{#if typeof leading === 'string'}
+					{leading}
+				{:else if isSnippet(leading)}
+					{@render leading()}
+				{:else if isComponent(leading)}
+					{@const Leading = leading}
+					<Leading />
+				{/if}
+			{:else if typeof TrailingIcon === 'string'}
+				<div
+					class={variants.icon({
+						class: [loading && 'animate-spin', TrailingIcon, ui.icon],
+					})}
+				></div>
+			{:else if isSnippet(TrailingIcon)}
+				{@render TrailingIcon()}
+			{:else if isComponent(TrailingIcon)}
+				<TrailingIcon class={variants.icon({ class: [ui.icon] })} />
+			{/if}
+		</span>
+	{/if}
+
+	<input
+		{id}
+		{type}
+		{...rest}
+		class={variants.base({ class: [ui.base] })}
+		{...rest}
+		use:maska={mask}
+	/>
+
+	{#if trailing || (icon && iconposition === 'trailing')}
+		<span class={variants.trailing({ class: ui.trailing })}>
+			{#if !!trailing}
+				{#if typeof trailing === 'string'}
+					{trailing}
+				{:else if isSnippet(trailing)}
+					{@render trailing()}
+				{:else if isComponent(trailing)}
+					{@const Trailing = trailing}
+					<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] })} />
+			{/if}
+		</span>
+	{/if}
+</div>

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

@@ -0,0 +1,55 @@
+import { type PropColor } 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';
+export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
+    name?: string;
+    /**
+     * The placeholder text when the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * @default primary
+     */
+    color?: PropColor;
+    /**
+     * @default outline
+     */
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    /**
+     * @default md
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * @default off
+     */
+    autocomplete?: 'on' | 'off';
+    /**
+     * @default false
+     */
+    autofocus?: boolean | number;
+    disabled?: boolean;
+    /**
+     * Highlight the ring color like a focus state.
+     */
+    highlight?: boolean;
+    value?: string;
+    icon?: string | Snippet | Component;
+    iconposition?: 'leading' | 'trailing';
+    leading?: string | Snippet | Component;
+    trailing?: string | Snippet | Component;
+    loading?: boolean;
+    loadingicon?: string | Snippet | Component;
+    mask?: string | MaskInputOptions;
+    ui?: {
+        root?: ClassNameValue;
+        base?: ClassNameValue;
+        leading?: ClassNameValue;
+        icon?: ClassNameValue;
+        trailing?: ClassNameValue;
+    };
+};
+declare const Input: Component<InputProps, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

package/dist/components/kbd.svelte

@@ -0,0 +1,239 @@
+<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';
+
+	export type KbdProps = {
+		children?: Snippet;
+		value?: string;
+		color?: PropColor;
+		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		size?: 'sm' | 'md' | 'lg';
+		class?: ClassNameValue;
+	};
+
+	export const KBD_KEYS = {
+		meta: '',
+		ctrl: '',
+		alt: '',
+		win: '⊞',
+		command: '⌘',
+		shift: '⇧',
+		control: '⌃',
+		option: '⌥',
+		enter: '↵',
+		delete: '⌦',
+		backspace: '⌫',
+		escape: 'Esc',
+		tab: '⇥',
+		capslock: '⇪',
+		arrowup: '↑',
+		arrowright: '→',
+		arrowdown: '↓',
+		arrowleft: '←',
+		pageup: '⇞',
+		pagedown: '⇟',
+		home: '↖',
+		end: '↘'
+	};
+
+	export type KbdKey = keyof typeof KBD_KEYS;
+	export type KbdSpecificKey = 'meta' | 'alt' | 'ctrl';
+</script>
+
+<script lang="ts">
+	const {
+		children,
+		value,
+		color = 'primary',
+		variant = 'outline',
+		size = 'md',
+		class: klass
+	}: KbdProps = $props();
+
+	const macOS = $derived.by(() => {
+		if (typeof navigator === 'undefined') return null;
+		if (!navigator.userAgent) return null;
+		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'
+	});
+
+	function getKey(value?: KbdKey | string) {
+		if (!value) {
+			return;
+		}
+
+		if (['meta', 'alt', 'ctrl'].includes(value)) {
+			return kbdKeysSpecificMap[value as KbdSpecificKey];
+		}
+
+		return KBD_KEYS[value as KbdKey] || value.toUpperCase();
+	}
+</script>
+
+<kbd
+	class={tv({
+		base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans text-xs',
+		variants: {
+			color: {
+				primary: '',
+				surface: '',
+				info: '',
+				success: '',
+				warning: '',
+				error: ''
+			},
+			variant: {
+				solid: 'text-white border border-b-3 border-r-2',
+				outline: 'border border-b-3 border-r-2',
+				soft: '',
+				subtle: 'border border-b-3 border-r-2'
+			},
+			size: {
+				sm: 'h-4 min-w-4',
+				md: 'h-5 min-w-5',
+				lg: 'h-6 min-w-6'
+			}
+		},
+		compoundVariants: [
+			{
+				color: 'primary',
+				variant: 'outline',
+				class: 'border-primary text-primary'
+			},
+			{
+				color: 'surface',
+				variant: 'outline',
+				class: 'border-surface-600'
+			},
+			{
+				color: 'info',
+				variant: 'outline',
+				class: 'border-info text-info'
+			},
+			{
+				color: 'success',
+				variant: 'outline',
+				class: 'border-success text-success'
+			},
+			{
+				color: 'warning',
+				variant: 'outline',
+				class: 'border-warning text-warning'
+			},
+			{
+				color: 'error',
+				variant: 'outline',
+				class: 'border-error text-error'
+			},
+
+			// SOLID
+			{
+				color: 'primary',
+				variant: 'solid',
+				class: 'bg-primary border-primary-600'
+			},
+			{
+				color: 'surface',
+				variant: 'solid',
+				class: 'bg-surface-600 border-surface-700'
+			},
+			{
+				color: 'info',
+				variant: 'solid',
+				class: 'bg-info border-info-600'
+			},
+			{
+				color: 'success',
+				variant: 'solid',
+				class: 'bg-success border-success-600'
+			},
+			{
+				color: 'warning',
+				variant: 'solid',
+				class: 'bg-warning border-warning-600'
+			},
+			{
+				color: 'error',
+				variant: 'solid',
+				class: 'bg-error border-error-600'
+			},
+
+			// SOFT
+			{
+				color: 'primary',
+				variant: 'soft',
+				class: 'bg-primary-100 text-primary'
+			},
+			{
+				color: 'surface',
+				variant: 'soft',
+				class: 'bg-surface-100 text-surface-700'
+			},
+			{
+				color: 'info',
+				variant: 'soft',
+				class: 'bg-info-100 text-info'
+			},
+			{
+				color: 'success',
+				variant: 'soft',
+				class: 'bg-success-100 text-success'
+			},
+			{
+				color: 'warning',
+				variant: 'soft',
+				class: 'bg-warning-100 text-warning'
+			},
+			{
+				color: 'error',
+				variant: 'soft',
+				class: 'bg-error-100 text-error'
+			},
+
+			// SUBTLE
+			{
+				color: 'primary',
+				variant: 'subtle',
+				class: 'bg-primary-100 border-primary-200 text-primary'
+			},
+			{
+				color: 'surface',
+				variant: 'subtle',
+				class: 'bg-surface-100 border-surface-200 text-surface-700'
+			},
+			{
+				color: 'info',
+				variant: 'subtle',
+				class: 'bg-info-100 border-info-200 text-info'
+			},
+			{
+				color: 'success',
+				variant: 'subtle',
+				class: 'bg-success-100 border-success-200 text-success'
+			},
+			{
+				color: 'warning',
+				variant: 'subtle',
+				class: 'bg-warning-100 border-warning-200 text-warning'
+			},
+			{
+				color: 'error',
+				variant: 'subtle',
+				class: 'bg-error-100 border-error-200 text-error'
+			}
+		]
+	})({ color, variant, size, class: [klass] })}
+>
+	{#if value}
+		{getKey(value)}
+	{:else}
+		{@render children?.()}
+	{/if}
+</kbd>

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

@@ -0,0 +1,40 @@
+import type { PropColor } from '../index.js';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type KbdProps = {
+    children?: Snippet;
+    value?: string;
+    color?: PropColor;
+    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    size?: 'sm' | 'md' | 'lg';
+    class?: ClassNameValue;
+};
+export declare const KBD_KEYS: {
+    meta: string;
+    ctrl: string;
+    alt: string;
+    win: string;
+    command: string;
+    shift: string;
+    control: string;
+    option: string;
+    enter: string;
+    delete: string;
+    backspace: string;
+    escape: string;
+    tab: string;
+    capslock: string;
+    arrowup: string;
+    arrowright: string;
+    arrowdown: string;
+    arrowleft: string;
+    pageup: string;
+    pagedown: string;
+    home: string;
+    end: string;
+};
+export type KbdKey = keyof typeof KBD_KEYS;
+export type KbdSpecificKey = 'meta' | 'alt' | 'ctrl';
+declare const Kbd: import("svelte").Component<KbdProps, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/p.svelte

@@ -0,0 +1,9 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes }: SvelteHTMLElements['p'] = $props();
+</script>
+
+<p class={cn('my-5 leading-7 text-pretty', classes)}>
+	{@render children?.()}
+</p>

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

@@ -0,0 +1,3 @@
+declare const P: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLParagraphElement>, {}, "">;
+type P = ReturnType<typeof P>;
+export default P;