uisv 0.0.6 → 0.0.9

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/checkbox.svelte

@@ -1,176 +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 CheckboxProps = {
-		value?: boolean | 'intermediate';
-		color?: PropColor;
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		disabled?: boolean;
-		icon?: string | Snippet | Component;
-		intermediateicon?: string | Snippet | Component;
-		label?: string | Snippet;
-		description?: string | Snippet;
-		required?: boolean;
-		indicator?: 'start' | 'end' | 'hidden';
-		as?: string;
-		ui?: {
-			root?: ClassNameValue;
-			container?: ClassNameValue;
-			icon?: ClassNameValue;
-			label?: ClassNameValue;
-			description?: ClassNameValue;
-		};
-	};
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(false),
-		color = 'primary',
-		size = 'md',
-		disabled,
-		icon = 'i-lucide-check',
-		intermediateicon = 'i-lucide-minus',
-		label,
-		description,
-		required,
-		indicator = 'start',
-		as = 'div',
-		ui = {}
-	}: CheckboxProps = $props();
-	const id = $props.id();
-
-	const classes = $derived.by(() =>
-		tv({
-			slots: {
-				root: 'relative flex-inline gap-2',
-				container:
-					'rounded-md border border-neutral-200 relative transition m-0.5 mr-0 grid place-items-center',
-				icon: 'pi text-white',
-				label: 'text-sm font-medium',
-				description: 'text-sm text-neutral-500'
-			},
-			variants: {
-				color: {
-					primary: {
-						container: [value && 'bg-primary-500 border-primary-500 text-primary-500']
-					},
-					secondary: {
-						container: [value && 'bg-neutral-900 border-neutral-900 text-neutral-900']
-					},
-					info: {
-						container: [value && 'bg-info-500 border-info-500 text-info-500']
-					},
-					success: {
-						container: [value && 'bg-success-500 border-success-500 text-success-500']
-					},
-					warning: {
-						container: [value && 'bg-warning-500 border-warning-500 text-warning-500']
-					},
-					error: {
-						container: [value && 'bg-error-500 border-error-500 text-error-500']
-					}
-				},
-				size: {
-					xs: {
-						container: 'size-3',
-						icon: 'size-3'
-					},
-					sm: {
-						container: 'size-3.5',
-						icon: 'size-3.5'
-					},
-					md: {
-						container: 'size-4',
-						icon: 'size-4'
-					},
-					lg: {
-						container: 'size-4.5',
-						icon: 'size-4.5'
-					},
-					xl: {
-						container: 'size-5',
-						icon: 'size-5'
-					}
-				},
-				indicator: {
-					start: '',
-					end: {
-						root: 'flex-row-reverse'
-					},
-					hidden: {
-						container: 'hidden'
-					}
-				}
-			},
-			compoundVariants: []
-		})({ color, size, indicator })
-	);
-</script>
-
-<svelte:element
-	this={as}
-	data-state={value ? 'checked' : 'unchecked'}
-	class={classes.root({
-		class: [disabled && 'opacity-50', ui.root]
-	})}
->
-	<button
-		{id}
-		aria-label="checkbox"
-		class={classes.container({ class: [ui.container] })}
-		onclick={() => {
-			if (disabled) return;
-			if (value === 'intermediate') return (value = true);
-			value = !value;
-		}}
-	>
-		{@render Icon(icon, [value !== true && 'opacity-0'])}
-		{@render Icon(intermediateicon, [value !== 'intermediate' && 'opacity-0'])}
-	</button>
-
-	{#if label}
-		<div class="flex flex-col justify-start">
-			<label
-				for={id}
-				class={classes.label({
-					class: [required ? 'after:content-["*"] after:text-error-500' : '', ui.label]
-				})}
-			>
-				{#if typeof label === 'string'}
-					{label}
-				{:else}
-					{@render label()}
-				{/if}
-			</label>
-
-			{#if description}
-				<div class={classes.description({ class: ui.description })}>
-					{#if typeof description === 'string'}
-						{description}
-					{:else}
-						{@render description()}
-					{/if}
-				</div>
-			{/if}
-		</div>
-	{/if}
-</svelte:element>
-
-{#snippet Icon(ico?: CheckboxProps['icon'], icon_class?: ClassNameValue)}
-	<div class={['absolute', icon_class]}>
-		{#if typeof ico === 'string'}
-			<div class={classes.icon({ class: [ico, ui.icon] })}></div>
-		{:else if isSnippet(ico)}
-			{@render ico()}
-		{:else if isComponent(ico)}
-			{@const Iconn = ico}
-			<Iconn />
-		{/if}
-	</div>
-{/snippet}

package/dist/components/checkbox.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 CheckboxProps = {
-    value?: boolean | 'intermediate';
-    color?: PropColor;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    disabled?: boolean;
-    icon?: string | Snippet | Component;
-    intermediateicon?: string | Snippet | Component;
-    label?: string | Snippet;
-    description?: string | Snippet;
-    required?: boolean;
-    indicator?: 'start' | 'end' | 'hidden';
-    as?: string;
-    ui?: {
-        root?: ClassNameValue;
-        container?: ClassNameValue;
-        icon?: ClassNameValue;
-        label?: ClassNameValue;
-        description?: ClassNameValue;
-    };
-};
-declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value">;
-type Checkbox = ReturnType<typeof Checkbox>;
-export default Checkbox;

package/dist/components/checkboxgroup.svelte

@@ -1,260 +0,0 @@
-<script module lang="ts">
-	import { isComponent, isSnippet } from '../utils/common.js';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-	import { Checkbox } from './index.js';
-	import type { Component, Snippet } from 'svelte';
-	import type { PropColor } from '../types.js';
-
-	/* eslint @typescript-eslint/no-explicit-any: 0 */
-
-	export type CheckboxGroupProps = {
-		color?: PropColor;
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		icon?: string | Snippet | Component;
-		required?: boolean;
-		indicator?: 'start' | 'end' | 'hidden';
-		value?: any[];
-		valuekey?: string;
-		variant?: 'list' | 'card' | 'table';
-		items: Array<any>;
-		labelkey?: string;
-		descriptionkey?: string;
-		legend?: string | Snippet | Component;
-		orientation?: 'horizontal' | 'vertical';
-		ui?: {
-			root?: ClassNameValue;
-			container?: ClassNameValue;
-			checkbox?: ClassNameValue;
-		};
-	};
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable([]),
-		valuekey = 'value',
-		color = 'primary',
-		size = 'md',
-		variant = 'list',
-		items = [],
-		labelkey = 'label',
-		descriptionkey = 'description',
-		legend,
-		orientation = 'horizontal',
-		ui = {},
-		...props
-	}: CheckboxGroupProps = $props();
-
-	const classes = $derived.by(() =>
-		tv({
-			slots: {
-				root: '',
-				container: 'flex',
-				checkbox: ''
-			},
-			variants: {
-				color: {
-					primary: {
-						container: []
-					},
-					secondary: {
-						container: []
-					},
-					info: {
-						container: []
-					},
-					success: {
-						container: []
-					},
-					warning: {
-						container: []
-					},
-					error: {
-						container: []
-					}
-				},
-				size: {
-					xs: {
-						container: '',
-						icon: 'size-3'
-					},
-					sm: {
-						container: '',
-						icon: 'size-3.5'
-					},
-					md: {
-						container: '',
-						icon: 'size-4'
-					},
-					lg: {
-						container: '',
-						icon: 'size-4.5'
-					},
-					xl: {
-						container: '',
-						icon: 'size-5'
-					}
-				},
-				variant: {
-					list: { container: 'gap-2' },
-					card: { container: 'gap-2', checkbox: 'p-4 rounded-lg border border-neutral-200' },
-					table: {
-						container: 'gap-0 ',
-						checkbox: 'border border-neutral-200 p-4 data-[state=checked]:z-1'
-					}
-				},
-				orientation: {
-					horizontal: {
-						container: 'flex-row',
-						checkbox:
-							'[&:not(:last-child)]:(-me-px ms-0) first-of-type:rounded-s-lg last-of-type:rounded-e-lg'
-					},
-					vertical: {
-						container: 'flex-col -space-y-px'
-					}
-				},
-				selected: { true: '', false: '' }
-			},
-			compoundVariants: [
-				{
-					color: 'primary',
-					selected: true,
-					variant: ['table', 'card'],
-					class: {
-						checkbox: 'border-primary-500'
-					}
-				},
-				{
-					color: 'secondary',
-					selected: true,
-					variant: ['table', 'card'],
-					class: {
-						checkbox: 'border-secondary-500'
-					}
-				},
-				{
-					color: 'info',
-					selected: true,
-					variant: ['table', 'card'],
-					class: {
-						checkbox: 'border-info-500'
-					}
-				},
-				{
-					color: 'success',
-					selected: true,
-					variant: ['table', 'card'],
-					class: {
-						checkbox: 'border-success-500'
-					}
-				},
-				{
-					color: 'warning',
-					selected: true,
-					variant: ['table', 'card'],
-					class: {
-						checkbox: 'border-warning-500'
-					}
-				},
-				{
-					color: 'error',
-					selected: true,
-					variant: ['table', 'card'],
-					class: {
-						checkbox: 'border-error-500'
-					}
-				},
-
-				{
-					color: 'primary',
-					selected: true,
-					variant: ['table'],
-					class: {
-						checkbox: 'bg-primary-100'
-					}
-				},
-				{
-					color: 'secondary',
-					selected: true,
-					variant: ['table'],
-					class: {
-						checkbox: 'bg-secondary-100'
-					}
-				},
-				{
-					color: 'info',
-					selected: true,
-					variant: ['table'],
-					class: {
-						checkbox: 'bg-info-100'
-					}
-				},
-				{
-					color: 'success',
-					selected: true,
-					variant: ['table'],
-					class: {
-						checkbox: 'bg-success-100'
-					}
-				},
-				{
-					color: 'warning',
-					selected: true,
-					variant: ['table'],
-					class: {
-						checkbox: 'bg-warning-100'
-					}
-				},
-				{
-					color: 'error',
-					selected: true,
-					variant: ['table'],
-					class: {
-						checkbox: 'bg-error-100'
-					}
-				}
-			]
-		})({ color, size, variant, orientation })
-	);
-</script>
-
-<div class={classes.root({ class: [ui.root] })}>
-	{#if typeof legend === 'string'}
-		<legend>{legend}</legend>
-	{:else if isSnippet(legend)}
-		{@render legend()}
-	{:else if isComponent(legend)}
-		{@const Legend = legend}
-		<Legend />
-	{/if}
-
-	<fieldset class={classes.container({ class: [ui.container] })}>
-		{#each items as item, index (index)}
-			{@const key = typeof item === 'object' ? item[valuekey] : item}
-
-			<Checkbox
-				{...props}
-				{color}
-				as={variant === 'list' ? 'div' : 'label'}
-				ui={{
-					root: classes.checkbox({
-						class: [ui.checkbox],
-						selected: value.includes(key)
-					})
-				}}
-				bind:value={
-					() => value.includes(key),
-					(v) => {
-						if (v) return value.push(key);
-						const index = value.findIndex((x) => x === key);
-						if (index < 0) return;
-						value.splice(index, 1);
-					}
-				}
-				description={typeof item === 'object' ? item[descriptionkey] : undefined}
-				label={typeof item === 'object' ? item[labelkey] : item}
-			/>
-		{/each}
-	</fieldset>
-</div>

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

@@ -1,26 +0,0 @@
-import type { ClassNameValue } from 'tailwind-merge';
-import type { Component, Snippet } from 'svelte';
-import type { PropColor } from '../types.js';
-export type CheckboxGroupProps = {
-    color?: PropColor;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    icon?: string | Snippet | Component;
-    required?: boolean;
-    indicator?: 'start' | 'end' | 'hidden';
-    value?: any[];
-    valuekey?: string;
-    variant?: 'list' | 'card' | 'table';
-    items: Array<any>;
-    labelkey?: string;
-    descriptionkey?: string;
-    legend?: string | Snippet | Component;
-    orientation?: 'horizontal' | 'vertical';
-    ui?: {
-        root?: ClassNameValue;
-        container?: ClassNameValue;
-        checkbox?: ClassNameValue;
-    };
-};
-declare const Checkboxgroup: Component<CheckboxGroupProps, {}, "value">;
-type Checkboxgroup = ReturnType<typeof Checkboxgroup>;
-export default Checkboxgroup;

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/h1.svelte

@@ -1,28 +0,0 @@
-<script module lang="ts">
-	import type { Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-
-	export type H1Props = {
-		children: Snippet;
-		ui?: { root?: ClassNameValue };
-	};
-</script>
-
-<script lang="ts">
-	const { children, ui = {} }: H1Props = $props();
-
-	const classes = $derived(
-		tv({
-			variants: {
-				slots: {
-					root: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)'
-				}
-			}
-		})({ class: ui.root })
-	);
-</script>
-
-<h1 class={classes}>
-	{@render children()}
-</h1>