uisv 0.0.12 → 0.0.13

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;

package/dist/components/pin-input.svelte

@@ -0,0 +1,162 @@
+<script module lang="ts">
+	import type { PropColor } from '../index.js';
+	import { onMount } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type PinInputProps = {
+		value?: number[] | string[];
+		color?: PropColor;
+		variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		length?: number;
+		autofocus?: boolean | number;
+		id?: string;
+		mask?: boolean;
+		name?: string;
+		disabled?: boolean;
+		otp?: boolean;
+		placeholder?: string;
+		required?: boolean;
+		type?: 'text' | 'number';
+		ui?: { root?: ClassNameValue; cell?: ClassNameValue };
+	};
+</script>
+
+<script lang="ts">
+	const KEYS_TO_IGNORE = [
+		'ArrowLeft',
+		'ArrowRight',
+		'ArrowUp',
+		'ArrowDown',
+		'Home',
+		'End',
+		'Escape',
+		'Enter',
+		'Tab',
+		'Shift',
+		'Control',
+		'Meta'
+	];
+
+	let {
+		value = $bindable([]),
+		color = 'primary',
+		variant = 'outline',
+		size = 'md',
+		length = 5,
+		autofocus,
+		id,
+		mask,
+		name,
+		disabled,
+		otp,
+		placeholder,
+		required,
+		type = 'text',
+		ui = {}
+	}: PinInputProps = $props();
+	const internal_id = $props.id();
+	let input_els = $state<HTMLInputElement[]>([]);
+
+	const classes = $derived(
+		tv({
+			slots: { root: 'flex gap-2', cell: 'rounded text-center outline-none transition relative' },
+			variants: {
+				color: {
+					primary: '',
+					surface: '',
+					info: '',
+					success: '',
+					warning: '',
+					error: ''
+				},
+				size: {
+					xs: { root: '', cell: 'size-6' },
+					sm: { root: '', cell: 'size-7' },
+					md: { root: '', cell: 'size-8' },
+					lg: { root: '', cell: 'size-9' },
+					xl: { root: '', cell: 'size-10' }
+				},
+				variant: {
+					outline: {
+						cell: 'border border-surface-300 focus:(border-2)'
+					},
+					soft: {
+						cell: 'bg-surface-50 hover:(bg-surface-100) focus:(bg-surface-100)'
+					},
+					subtle: { cell: 'border border-surface-300 bg-surface-100 focus:(border-2)' },
+					ghost: { cell: 'hover:(bg-surface-100) focus:(bg-surface-100)' },
+					none: { cell: '' }
+				}
+			},
+			compoundVariants: [
+				{
+					variant: ['outline', 'subtle'],
+					color: 'primary',
+					class: { cell: 'focus:(border-primary-500)' }
+				},
+				{
+					variant: ['outline', 'subtle'],
+					color: 'surface',
+					class: { cell: 'focus:(border-surface-900)' }
+				},
+				{
+					variant: ['outline', 'subtle'],
+					color: 'info',
+					class: { cell: 'focus:(border-info-500)' }
+				},
+				{
+					variant: ['outline', 'subtle'],
+					color: 'success',
+					class: { cell: 'focus:(border-success-500)' }
+				},
+				{
+					variant: ['outline', 'subtle'],
+					color: 'warning',
+					class: { cell: 'focus:(border-warning-500)' }
+				},
+				{
+					variant: ['outline', 'subtle'],
+					color: 'error',
+					class: { cell: 'focus:(border-error-500)' }
+				}
+			]
+		})({ size, color, variant, class: ui.root })
+	);
+
+	onMount(() => {
+		if (!autofocus || input_els.length === 0) return;
+
+		input_els[0].focus();
+	});
+</script>
+
+<div id={id || internal_id} class={classes.root({ class: ui.root })}>
+	{#each { length }, i (i)}
+		<input
+			bind:this={input_els[i]}
+			bind:value={
+				() => (mask ? '•' : value[i]?.toString()?.slice(-1)),
+				(v: string) => {
+					try {
+						value[i] = type === 'text' ? v.slice(-1) : parseInt(v.slice(-1));
+
+						if (value[i] && input_els[i + 1]) input_els[i + 1].focus();
+					} catch {
+						return;
+					}
+				}
+			}
+			class={classes.cell({ class: ui.cell })}
+			onkeydown={(e) => {
+				if (KEYS_TO_IGNORE.includes(e.key)) e.preventDefault();
+				if (type === 'number' && isNaN(parseInt(e.key))) e.preventDefault();
+				const DIR: Record<string, number> = { ArrowLeft: -1, ArrowRight: 1 };
+				if (!DIR[e.key] || !input_els[i + DIR[e.key]]) return;
+				input_els[i + DIR[e.key]].focus();
+			}}
+			{placeholder}
+		/>
+	{/each}
+</div>

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

@@ -0,0 +1,25 @@
+import type { PropColor } from '../index.js';
+import type { ClassNameValue } from 'tailwind-merge';
+export type PinInputProps = {
+    value?: number[] | string[];
+    color?: PropColor;
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    length?: number;
+    autofocus?: boolean | number;
+    id?: string;
+    mask?: boolean;
+    name?: string;
+    disabled?: boolean;
+    otp?: boolean;
+    placeholder?: string;
+    required?: boolean;
+    type?: 'text' | 'number';
+    ui?: {
+        root?: ClassNameValue;
+        cell?: ClassNameValue;
+    };
+};
+declare const PinInput: import("svelte").Component<PinInputProps, {}, "value">;
+type PinInput = ReturnType<typeof PinInput>;
+export default PinInput;

package/dist/components/placeholder.svelte

@@ -0,0 +1,34 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cx } from 'tailwind-variants';
+
+	let { class: klass, ...rest }: SvelteHTMLElements['svg'] = $props();
+</script>
+
+<svg
+	{...rest}
+	class={cx(
+		'inset-0 w-full stroke-surface/10 border border-dashed border-surface rounded-md',
+		klass,
+	)}
+	fill="none"
+>
+	<defs>
+		<pattern
+			id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
+			x="0"
+			y="0"
+			width="10"
+			height="10"
+			patternUnits="userSpaceOnUse"
+		>
+			<path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3"> </path>
+		</pattern>
+	</defs>
+	<rect
+		stroke="none"
+		fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
+		width="100%"
+		height="100%"
+	></rect>
+</svg>

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

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

package/dist/components/popover.svelte

@@ -0,0 +1,151 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { Popover, type PopoverContentProps } from 'bits-ui';
+	import { cn, tv } from 'tailwind-variants';
+	import { type ButtonProps,Button } from '../index.js';
+	import type { PropColor } from '../index.js';
+
+	export type PopoverContentSnippet = {
+		props: Record<string, unknown>;
+		open: boolean;
+		wrapperProps: Record<string, unknown>;
+	};
+
+	export type PopoverProps = {
+		/**
+		 * The display mode of the popover.
+		 */
+		mode?: 'hover' | 'click';
+		/**
+		 * The props for the content of popover.
+		 */
+		contentprops?: PopoverContentProps;
+		content?: Snippet<[PopoverContentSnippet]>;
+		children?: Snippet<[]>;
+		/**
+		 * Snippet if you want to implement your own trigger button
+		 */
+		trigger?: Snippet<[Record<string, unknown>]>;
+		/**
+		 * Display an arrow alongside the popover.
+		 */
+		arrow?: boolean;
+		/**
+		 * Render the popover in a portal.
+		 */
+		portal?: string | false | true | HTMLElement;
+		/**
+		 * The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
+		 */
+		reference?:
+			| Element
+			| {
+					getBoundingClientRect: () => DOMRect;
+					getClientRects: () => DOMRect[];
+					contextElement?: Element;
+			  };
+		/**
+		 * When `false`, the popover will not close when clicking outside or pressing escape.
+		 */
+		dismissible?: boolean;
+		/**
+		 * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
+		 */
+		defaultopen?: boolean;
+		/**
+		 * The controlled open state of the popover.
+		 */
+		open?: boolean;
+		/**
+		 * The modality of the popover. When set to `true`, interaction with outside elements will be disabled and only popover content will be visible to screen readers.
+		 */
+		modal?: boolean;
+		/**
+		 * The duration from when the mouse enters the trigger until the hover card opens.
+		 */
+		opendelay?: number;
+		/**
+		 * The duration from when the mouse leaves the trigger or content until the hover card closes.
+		 */
+		closedelay?: number;
+		/**
+		 *
+		 */
+		ui?: {
+			content?: ClassNameValue;
+			arrow?: ClassNameValue;
+		};
+		/**
+		 * @default `outline`
+		 */
+		variant?: ButtonProps['variant'];
+		/**
+		 * @default primary
+		 */
+		color?: PropColor;
+		/**
+		 *
+		 */
+		class?: ClassNameValue;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		mode = 'click',
+		contentprops = { side: 'bottom', sideOffset: 8, collisionPadding: 8 },
+		content,
+		children,
+		trigger,
+		arrow = true,
+		portal = true,
+		reference,
+		dismissible = true,
+		defaultopen,
+		open = $bindable(false),
+		modal = false,
+		opendelay = 0,
+		closedelay = 0,
+		ui = {},
+		variant = 'outline',
+		color = 'primary',
+		class: klass,
+	}: PopoverProps = $props();
+
+	const classes = $derived(
+		tv({
+			slots: {
+				content:
+					'bg-default shadow-lg rounded-md ring ring-default data-[state=open]:animate-[scale-in_100ms_ease-out] data-[state=closed]:animate-[scale-out_100ms_ease-in] origin-(--reka-popover-content-transform-origin) focus:outline-none pointer-events-auto',
+				arrow: 'fill-default',
+			},
+		})({}),
+	);
+</script>
+
+<Popover.Root bind:open>
+	<Popover.Trigger>
+		{#snippet child({ props })}
+			{#if trigger}
+				{@render trigger(props)}
+			{:else}
+				<Button {...props} {variant} {color} ui={{ base: klass }} />
+			{/if}
+		{/snippet}
+	</Popover.Trigger>
+	<Popover.Portal>
+		<Popover.Overlay />
+		<Popover.Content {...contentprops} class={classes.content({ class: ui.content })}>
+			{#snippet child(props)}
+				{#if content}
+					{@render content(props)}
+				{:else}
+					{@render children?.()}
+				{/if}
+			{/snippet}
+
+			<Popover.Arrow />
+		</Popover.Content>
+	</Popover.Portal>
+</Popover.Root>