uisv 0.0.7 → 0.0.9

package/dist/components/kbd.svelte

@@ -1,239 +0,0 @@
-<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: '',
-				secondary: '',
-				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: 'secondary',
-				variant: 'outline',
-				class: 'border-secondary-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: 'secondary',
-				variant: 'solid',
-				class: 'bg-secondary-600 border-secondary-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: 'secondary',
-				variant: 'soft',
-				class: 'bg-secondary-100 text-secondary-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: 'secondary',
-				variant: 'subtle',
-				class: 'bg-secondary-100 border-secondary-200 text-secondary-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

@@ -1,40 +0,0 @@
-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

@@ -1,22 +0,0 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-
-	export type ParagraphProps = {
-		children: Snippet;
-		ui?: { root?: ClassNameValue };
-	};
-</script>
-
-<script lang="ts">
-	const { children, ui = {} }: ParagraphProps = $props();
-</script>
-
-<p
-	class={tv({
-		base: 'my-5 leading-7 text-pretty'
-	})({ class: ui.root })}
->
-	{@render children()}
-</p>

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

@@ -1,11 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-export type ParagraphProps = {
-    children: Snippet;
-    ui?: {
-        root?: ClassNameValue;
-    };
-};
-declare const P: import("svelte").Component<ParagraphProps, {}, "">;
-type P = ReturnType<typeof P>;
-export default P;

package/dist/components/pin-input.svelte

@@ -1,162 +0,0 @@
-<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: '',
-					secondary: '',
-					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-secondary-300 focus:(border-2)'
-					},
-					soft: {
-						cell: 'bg-secondary-50 hover:(bg-secondary-100) focus:(bg-secondary-100)'
-					},
-					subtle: { cell: 'border border-secondary-300 bg-secondary-100 focus:(border-2)' },
-					ghost: { cell: 'hover:(bg-secondary-100) focus:(bg-secondary-100)' },
-					none: { cell: '' }
-				}
-			},
-			compoundVariants: [
-				{
-					variant: ['outline', 'subtle'],
-					color: 'primary',
-					class: { cell: 'focus:(border-primary-500)' }
-				},
-				{
-					variant: ['outline', 'subtle'],
-					color: 'secondary',
-					class: { cell: 'focus:(border-secondary-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

@@ -1,25 +0,0 @@
-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

@@ -1,32 +0,0 @@
-<script lang="ts">
-	import type { ClassNameValue } from 'tailwind-merge';
-
-	let { class: klass }: { class?: ClassNameValue } = $props();
-</script>
-
-<svg
-	class={[
-		'inset-0 w-full stroke-secondary/10 border border-dashed border-secondary 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

@@ -1,7 +0,0 @@
-import type { ClassNameValue } from 'tailwind-merge';
-type $$ComponentProps = {
-    class?: ClassNameValue;
-};
-declare const Placeholder: import("svelte").Component<$$ComponentProps, {}, "">;
-type Placeholder = ReturnType<typeof Placeholder>;
-export default Placeholder;

package/dist/components/progress.svelte

@@ -1,124 +0,0 @@
-<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-secondary-300',
-				status: '',
-				indicator: 'absolute transition-all rounded-full',
-				steps: ''
-			},
-			variants: {
-				color: {
-					primary: {
-						indicator: 'bg-primary-500'
-					},
-					secondary: {
-						indicator: 'bg-secondary-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-secondary-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

@@ -1,21 +0,0 @@
-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;