uisv 0.0.2 → 0.0.4

package/dist/components/card.svelte

@@ -1,70 +0,0 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-
-	export type CardProps = {
-		children: Snippet;
-		header?: Snippet;
-		footer?: Snippet;
-		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
-		ui?: {
-			base?: ClassNameValue;
-			header?: ClassNameValue;
-			content?: ClassNameValue;
-			footer?: ClassNameValue;
-		};
-	};
-</script>
-
-<script lang="ts">
-	let { header, children, footer, variant = 'solid', ui = {} }: CardProps = $props();
-
-	const classes = $derived.by(() =>
-		tv({
-			slots: {
-				base: 'rounded overflow-hidden',
-				header: 'p-4 sm:px-6',
-				content: 'p-4 sm:p-6',
-				footer: 'p-4 sm:px-6'
-			},
-			variants: {
-				variant: {
-					solid: {
-						base: 'bg-secondary-900 text-secondary-50',
-						header: 'border-transparent',
-						footer: 'border-transparent'
-					},
-					outline: {
-						base: 'border border-secondary-300 divide-y divide-secondary-300'
-					},
-					soft: {
-						base: 'bg-secondary-50 divide-y divide-secondary-300'
-					},
-					subtle: {
-						base: 'bg-secondary-50 border-secondary-300 border divide-y divide-secondary-300'
-					}
-				}
-			},
-			compoundVariants: []
-		})({ variant })
-	);
-</script>
-
-<div class={classes.base({ class: [ui.base] })}>
-	{#if header}
-		<div class={classes.header({ class: [ui.header] })}>
-			{@render header()}
-		</div>
-	{/if}
-
-	<div class={classes.content({ class: ui.content })}>
-		{@render children()}
-	</div>
-
-	{#if footer}
-		<div class={classes.header({ class: [ui.header] })}>
-			{@render footer()}
-		</div>
-	{/if}
-</div>

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

@@ -1,17 +0,0 @@
-import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-export type CardProps = {
-    children: Snippet;
-    header?: Snippet;
-    footer?: Snippet;
-    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
-    ui?: {
-        base?: ClassNameValue;
-        header?: ClassNameValue;
-        content?: ClassNameValue;
-        footer?: ClassNameValue;
-    };
-};
-declare const Card: import("svelte").Component<CardProps, {}, "">;
-type Card = ReturnType<typeof Card>;
-export default Card;

package/dist/components/chip.svelte

@@ -1,82 +0,0 @@
-<script module lang="ts">
-	import type { PropColor } from '../types.js';
-	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-
-	export type ChipProps = {
-		children: Snippet;
-		text?: string;
-		color?: PropColor;
-		position?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
-		size?: number;
-		ui?: {
-			base?: ClassNameValue;
-			chip?: ClassNameValue;
-		};
-	};
-</script>
-
-<script lang="ts">
-	let {
-		children,
-		text,
-		color = 'primary',
-		position = 'top-right',
-		size = 8,
-		ui = {}
-	}: ChipProps = $props();
-
-	const classes = $derived.by(() =>
-		tv({
-			slots: {
-				base: 'relative inline-flex items-center justify-center shrink-0',
-				chip: [
-					'absolute rounded-full ring ring-white flex items-center justify-center text-white font-medium whitespace-nowrap',
-					'-translate-y-1/2 translate-x-1/2 px-0.5'
-				]
-			},
-			variants: {
-				color: {
-					primary: {
-						chip: 'bg-primary'
-					},
-					secondary: {
-						chip: 'bg-secondary'
-					},
-					success: {
-						chip: 'bg-success'
-					},
-					info: {
-						chip: 'bg-info'
-					},
-					warning: {
-						chip: 'bg-warning'
-					},
-					error: {
-						chip: 'bg-error'
-					}
-				},
-				position: {
-					'top-right': { chip: 'top-0 right-0' },
-					'bottom-right': { chip: 'bottom-0 right-0' },
-					'top-left': { chip: 'top-0 left-0' },
-					'bottom-left': { chip: 'bottom-0 left-0' }
-				}
-			}
-		})({ color, position })
-	);
-</script>
-
-<div class={classes.base({ class: [ui.base] })}>
-	{@render children()}
-
-	<span
-		class={classes.chip({ class: ui.chip })}
-		style:height="{size}px"
-		style:min-width="{size}px"
-		style:font-size="{size}px"
-	>
-		{text}
-	</span>
-</div>

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

@@ -1,17 +0,0 @@
-import type { PropColor } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-export type ChipProps = {
-    children: Snippet;
-    text?: string;
-    color?: PropColor;
-    position?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
-    size?: number;
-    ui?: {
-        base?: ClassNameValue;
-        chip?: ClassNameValue;
-    };
-};
-declare const Chip: import("svelte").Component<ChipProps, {}, "">;
-type Chip = ReturnType<typeof Chip>;
-export default Chip;

package/dist/components/index.d.ts

@@ -1,16 +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';

package/dist/components/index.js

@@ -1,16 +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';

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;

package/dist/components/switch.svelte

@@ -1,180 +0,0 @@
-<script module lang="ts">
-	import type { PropColor } from '../types.js';
-	import { isComponent, isSnippet } from '../utils/common.js';
-	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-	import type { Component } from 'vitest-browser-svelte';
-
-	export type SwitchProps = {
-		value?: boolean;
-		color?: PropColor;
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		disabled?: boolean;
-		loading?: boolean;
-		loadingicon?: string | Snippet | Component;
-		uncheckedicon?: string | Snippet | Component;
-		checkedicon?: string | Snippet | Component;
-		label?: string | Snippet;
-		description?: string | Snippet;
-		required?: boolean;
-		ui?: {
-			root?: ClassNameValue;
-			container?: ClassNameValue;
-			thumb?: ClassNameValue;
-			label?: ClassNameValue;
-			description?: ClassNameValue;
-		};
-	};
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(false),
-		color = 'primary',
-		size = 'md',
-		disabled,
-		loading,
-		loadingicon = 'i-lucide-loader-circle',
-		uncheckedicon,
-		checkedicon,
-		label,
-		description,
-		required,
-		ui = {}
-	}: SwitchProps = $props();
-
-	const classes = $derived.by(() =>
-		tv({
-			slots: {
-				root: 'flex-inline gap-2',
-				container: 'rounded-full bg-neutral-200 p-0.5 relative transition',
-				thumb: [
-					'bg-white block rounded-full absolute top-0.5 transition grid place-items-center',
-					value ? 'translate-x-full' : 'text-neutral-500'
-				],
-				icon: 'pi',
-				label: 'text-sm',
-				description: 'text-sm text-neutral-500'
-			},
-			variants: {
-				color: {
-					primary: {
-						container: ['', value && 'bg-primary-500 text-primary-500']
-					},
-					secondary: {
-						container: ['', value && 'bg-neutral-900 text-neutral-900']
-					},
-					info: {
-						container: ['', value && 'bg-info-500 text-info-500']
-					},
-					success: {
-						container: ['', value && 'bg-success-500 text-success-500']
-					},
-					warning: {
-						container: ['', value && 'bg-warning-500 text-warning-500']
-					},
-					error: {
-						container: ['', value && 'bg-error-500 text-error-500']
-					}
-				},
-				size: {
-					xs: {
-						container: 'w-7 min-w-7 h-4',
-						thumb: 'size-3',
-						icon: 'size-2.5'
-					},
-					sm: {
-						container: 'w-8 min-w-8 h-4.5',
-						thumb: 'size-3.5',
-						icon: 'size-3'
-					},
-					md: {
-						container: 'w-9 min-w-9 h-5',
-						thumb: 'size-4',
-						icon: 'size-3.5'
-					},
-					lg: {
-						container: 'w-10 min-w-10 h-5.5',
-						thumb: 'size-4.5',
-						icon: 'size-4'
-					},
-					xl: {
-						container: 'w-11  min-w-11 h-6',
-						thumb: 'size-5',
-						icon: 'size-4.5'
-					}
-				}
-			},
-			compoundVariants: []
-		})({ color, size })
-	);
-</script>
-
-<div
-	data-state={value ? 'checked' : 'unchecked'}
-	class={classes.root({
-		class: [(loading || disabled) && 'opacity-50', ui.thumb]
-	})}
->
-	<button
-		aria-label="switch"
-		data-state={value ? 'checked' : 'unchecked'}
-		class={classes.container({ class: [loading && 'cursor-not-allowed', ui.thumb] })}
-		onclick={() => {
-			if (loading) return;
-			value = !value;
-		}}
-	>
-		<span data-state={value ? 'checked' : 'unchecked'} class={classes.thumb({ class: ui.thumb })}>
-			{@render Icon(uncheckedicon, [(loading || value) && 'opacity-0'])}
-			{@render Icon(checkedicon, [(loading || !value) && 'opacity-0'])}
-			{@render Icon(loadingicon || 'i-lucide-loader-circle', [
-				'animate-spin',
-				!loading && 'opacity-0'
-			])}
-		</span>
-	</button>
-
-	{#if label}
-		<span>
-			<div
-				class={classes.label({
-					class: [required ? 'after:content-["*"] after:text-error-500' : '', ui.thumb]
-				})}
-			>
-				{#if typeof label === 'string'}
-					{label}
-				{:else}
-					{@render label()}
-				{/if}
-			</div>
-
-			{#if description}
-				<div class={classes.description({ class: ui.thumb })}>
-					{#if typeof description === 'string'}
-						{description}
-					{:else}
-						{@render description()}
-					{/if}
-				</div>
-			{/if}
-		</span>
-	{/if}
-</div>
-
-{#snippet Icon(ico?: SwitchProps['checkedicon'], icon_class?: ClassNameValue)}
-	<div class={['absolute', icon_class]}>
-		{#if typeof ico === 'string'}
-			<div
-				data-state={value ? 'checked' : 'unchecked'}
-				class={classes.icon({ class: [ico] })}
-			></div>
-		{:else if isSnippet(ico)}
-			{@render ico()}
-		{:else if isComponent(ico)}
-			{@const Iconn = ico}
-			<Iconn />
-		{/if}
-	</div>
-{/snippet}

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

@@ -1,27 +0,0 @@
-import type { PropColor } from '../types.js';
-import type { Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-import type { Component } from 'vitest-browser-svelte';
-export type SwitchProps = {
-    value?: boolean;
-    color?: PropColor;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    disabled?: boolean;
-    loading?: boolean;
-    loadingicon?: string | Snippet | Component;
-    uncheckedicon?: string | Snippet | Component;
-    checkedicon?: string | Snippet | Component;
-    label?: string | Snippet;
-    description?: string | Snippet;
-    required?: boolean;
-    ui?: {
-        root?: ClassNameValue;
-        container?: ClassNameValue;
-        thumb?: ClassNameValue;
-        label?: ClassNameValue;
-        description?: ClassNameValue;
-    };
-};
-declare const Switch: import("svelte").Component<SwitchProps, {}, "value">;
-type Switch = ReturnType<typeof Switch>;
-export default Switch;

package/dist/index.d.ts

@@ -1,2 +0,0 @@
-export * from './components/index.js';
-export * from './types.js';

package/dist/index.js

@@ -1,2 +0,0 @@
-export * from './components/index.js';
-export * from './types.js';

package/dist/types.d.ts

@@ -1,7 +0,0 @@
-declare module '#theme/button' {
-	import button from './theme/button.ts';
-
-	export default ReturnType<typeof button>;
-}
-
-export {};

package/dist/types.js

@@ -1 +0,0 @@
-export {};

package/dist/utils/common.d.ts

@@ -1,14 +0,0 @@
-import type { Snippet, Component } from 'svelte';
-export declare const tv: import("tailwind-variants").TV;
-/**
- * Checks if a value is a Svelte snippet
- * @param v - The value to check (should be Snippet | Component)
- * @returns true if the value is a snippet, false otherwise
- */
-export declare const isSnippet: (v: unknown) => v is Snippet;
-/**
- * Checks if a value is a Svelte component
- * @param v - The value to check (should be Snippet | Component)
- * @returns true if the value is a component, false otherwise
- */
-export declare const isComponent: (v: unknown) => v is Component;

package/dist/utils/common.js

@@ -1,18 +0,0 @@
-import { createTV } from 'tailwind-variants';
-export const tv = createTV({});
-/**
- * Checks if a value is a Svelte snippet
- * @param v - The value to check (should be Snippet | Component)
- * @returns true if the value is a snippet, false otherwise
- */
-export const isSnippet = (v) => {
-    return typeof v === 'object' && v !== null && '$$render' in v;
-};
-/**
- * Checks if a value is a Svelte component
- * @param v - The value to check (should be Snippet | Component)
- * @returns true if the value is a component, false otherwise
- */
-export const isComponent = (v) => {
-    return typeof v === 'function' || (typeof v === 'object' && v !== null && !('$$render' in v));
-};

package/dist/utils/keys.d.ts

@@ -1,8 +0,0 @@
-export declare const FORM_OPTION_CONTEXT_KEY: unique symbol;
-export declare const FORM_BUS_CONTEXT_KEY: unique symbol;
-export declare const FORM_STATE_CONTEXT_KEY: unique symbol;
-export declare const FORM_FIELD_CONTEXT_KEY: unique symbol;
-export declare const FORM_TID_CONTEXT_KEY: unique symbol;
-export declare const FORM_INPUTS_CONTEXT_KEY: unique symbol;
-export declare const FORM_LOADING_CONTEXT_KEY: unique symbol;
-export declare const FORM_ERRORS_CONTEXT_KEY: unique symbol;