uisv 0.0.6 → 0.0.9

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

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

package/dist/components/h2.svelte

@@ -1,30 +0,0 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-
-	export type H2Props = {
-		children: Snippet;
-		ui?: { root?: ClassNameValue };
-	};
-</script>
-
-<script lang="ts">
-	const { children, ui = {} }: H2Props = $props();
-
-	const classes = $derived(
-		tv({
-			base: [
-				'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 text-primary)',
-				'[&>a>code]:(transition-colors text-xl/7 font-bold border-dashed)',
-				'[&>a]:focus-visible:outline-primary'
-			]
-		})({ class: ui.root })
-	);
-</script>
-
-<h1 class={classes}>
-	{@render children()}
-</h1>

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

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

package/dist/components/index.d.ts

@@ -1,30 +0,0 @@
-export * from './button.svelte';
-export { default as Button } from './button.svelte';
-export * from './badge.svelte';
-export { default as Badge } from './badge.svelte';
-export * from './alert.svelte';
-export { default as Alert } from './alert.svelte';
-export * from './banner.svelte';
-export { default as Banner } from './banner.svelte';
-export * from './progress.svelte';
-export { default as Progress } from './progress.svelte';
-export * from './card.svelte';
-export { default as Card } from './card.svelte';
-export * from './chip.svelte';
-export { default as Chip } from './chip.svelte';
-export * from './switch.svelte';
-export { default as Switch } from './switch.svelte';
-export * from './slider.svelte';
-export { default as Slider } from './slider.svelte';
-export * from './checkbox.svelte';
-export { default as Checkbox } from './checkbox.svelte';
-export * from './checkboxgroup.svelte';
-export { default as CheckboxGroup } from './checkboxgroup.svelte';
-export * from './h1.svelte';
-export { default as H1 } from './h1.svelte';
-export * from './h2.svelte';
-export { default as H2 } from './h2.svelte';
-export * from './p.svelte';
-export { default as P } from './p.svelte';
-export * from './pin-input.svelte';
-export { default as PinInput } from './pin-input.svelte';

package/dist/components/index.js

@@ -1,30 +0,0 @@
-export * from './button.svelte';
-export { default as Button } from './button.svelte';
-export * from './badge.svelte';
-export { default as Badge } from './badge.svelte';
-export * from './alert.svelte';
-export { default as Alert } from './alert.svelte';
-export * from './banner.svelte';
-export { default as Banner } from './banner.svelte';
-export * from './progress.svelte';
-export { default as Progress } from './progress.svelte';
-export * from './card.svelte';
-export { default as Card } from './card.svelte';
-export * from './chip.svelte';
-export { default as Chip } from './chip.svelte';
-export * from './switch.svelte';
-export { default as Switch } from './switch.svelte';
-export * from './slider.svelte';
-export { default as Slider } from './slider.svelte';
-export * from './checkbox.svelte';
-export { default as Checkbox } from './checkbox.svelte';
-export * from './checkboxgroup.svelte';
-export { default as CheckboxGroup } from './checkboxgroup.svelte';
-export * from './h1.svelte';
-export { default as H1 } from './h1.svelte';
-export * from './h2.svelte';
-export { default as H2 } from './h2.svelte';
-export * from './p.svelte';
-export { default as P } from './p.svelte';
-export * from './pin-input.svelte';
-export { default as PinInput } from './pin-input.svelte';

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 '../types.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 '../types.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 '../types.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 '../types.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;