uisv 0.0.12 → 0.0.14

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>

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

@@ -0,0 +1,88 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import { Popover, type PopoverContentProps } from 'bits-ui';
+import { type ButtonProps } 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;
+};
+declare const Popover: import("svelte").Component<PopoverProps, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/progress.svelte

@@ -0,0 +1,124 @@
+<script module lang="ts">
+	import type { PropColor } from '../index.js';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type ProgressProps = {
+		value?: number;
+		max?: number | string[];
+		animation?: 'swing' | 'carousel' | 'carousel-inverse' | 'elastic';
+		orientation?: 'horizontal' | 'veritcal';
+		color?: PropColor;
+		height?: number;
+		inverted?: boolean;
+		status?: boolean;
+		ui?: {
+			base?: ClassNameValue;
+			header?: ClassNameValue;
+			content?: ClassNameValue;
+			footer?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		max,
+		animation,
+		inverted,
+		status,
+		value,
+		orientation = 'horizontal',
+		color = 'primary',
+		height = '',
+		ui = {}
+	}: ProgressProps = $props();
+
+	const percentage = $derived.by(() => {
+		if (value === undefined) return null;
+		if (Array.isArray(max)) return (value / (max.length - 1)) * 100;
+
+		return (value / (max || 100)) * 100;
+	});
+	const indeterminate = $derived.by(() => {
+		if (value === undefined || percentage === null) return true;
+		if (value < 0) return true;
+		if (percentage > 100) return true;
+
+		return false;
+	});
+	const classes = $derived.by(() =>
+		tv({
+			slots: {
+				root: 'relative w-full rounded-full overflow-hidden bg-surface-300',
+				status: '',
+				indicator: 'absolute transition-all rounded-full',
+				steps: ''
+			},
+			variants: {
+				color: {
+					primary: {
+						indicator: 'bg-primary-500'
+					},
+					surface: {
+						indicator: 'bg-surface-500'
+					},
+					info: {
+						indicator: 'bg-info-500'
+					},
+					success: {
+						indicator: 'bg-success-500'
+					},
+					warning: {
+						indicator: 'bg-warning-500'
+					},
+					error: {
+						indicator: 'bg-error-500'
+					}
+				},
+				animation: {
+					swing: [indeterminate ? 'animate-[swing_2s_ease-in-out_infinite' : ''],
+					carousel: [indeterminate ? '' : ''],
+					'carousel-inverse': [indeterminate ? '' : ''],
+					elastic: [indeterminate ? '' : '']
+				}
+			},
+			compoundVariants: []
+		})({
+			color,
+			animation: animation ?? 'swing'
+		})
+	);
+</script>
+
+<div data-state-indeterminate={indeterminate}>
+	<div class={classes.root({ class: [ui.base] })} style:height={`${height || 8}px`}>
+		<span class={classes.indicator({ class: ['h-full left-0'] })} style:width={`${percentage}%`}>
+		</span>
+	</div>
+
+	{#if Array.isArray(max)}
+		<p
+			class={[
+				'text-right transition',
+				value && value > 0 && max[value] ? 'text-primary-500' : 'text-surface-500'
+			]}
+		>
+			{(value && max[value]) || max[0]}
+		</p>
+	{/if}
+</div>
+
+<style>
+	@keyframe swing {
+		0% {
+			width: 0%;
+		}
+		50% {
+			width: 100%;
+		}
+		100% {
+			width: 0%;
+		}
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import type { PropColor } from '../index.js';
+import type { ClassNameValue } from 'tailwind-merge';
+export type ProgressProps = {
+    value?: number;
+    max?: number | string[];
+    animation?: 'swing' | 'carousel' | 'carousel-inverse' | 'elastic';
+    orientation?: 'horizontal' | 'veritcal';
+    color?: PropColor;
+    height?: number;
+    inverted?: boolean;
+    status?: boolean;
+    ui?: {
+        base?: ClassNameValue;
+        header?: ClassNameValue;
+        content?: ClassNameValue;
+        footer?: ClassNameValue;
+    };
+};
+declare const Progress: import("svelte").Component<ProgressProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;