uisv 0.0.12 → 0.0.14

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

@@ -0,0 +1,49 @@
+import { type Component, type Snippet } from 'svelte';
+import { type PropColor } from '../index.js';
+import type { ClassNameValue } from 'tailwind-merge';
+export type ButtonProps = {
+    /** The underlying DOM element being rendered. You can bind to this to get a reference to the element. */
+    ref?: HTMLButtonElement | HTMLAnchorElement;
+    /** Where to display the linked URL, as the name for a browsing context. */
+    target?: null | '_blank' | '_parent' | '_self' | '_top' | (string & {});
+    /** Force the link to be active independent of the current route. */
+    disabled?: boolean;
+    /** The type of the button when not a link. */
+    type?: 'submit' | 'reset' | 'button' | null | undefined;
+    /** When true, the icon will be displayed on the right side. */
+    loadingicon?: string | Snippet | Component;
+    /** When true, the loading icon will be displayed. */
+    loading?: boolean;
+    /** The position of the icon, including the loading icon */
+    iconposition?: 'left' | 'right';
+    /** Icon when `loading` is `false` */
+    icon?: string | Snippet | Component;
+    /** Route Location the link should navigate to when clicked on. */
+    href?: string;
+    label?: string;
+    /**
+     * @defaultValue 'primary'
+     */
+    color?: PropColor;
+    /**
+     * @defaultValue 'solid'
+     */
+    variant?: 'link' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost';
+    /**
+     * @defaultValue 'md'
+     */
+    size?: 'md' | 'xs' | 'sm' | 'lg' | 'xl';
+    /** Render the button full width. */
+    block?: boolean;
+    /** Set loading state automatically based on the `@click` promise state */
+    loadingauto?: boolean;
+    onclick?: (event: MouseEvent) => void | Promise<void>;
+    ui?: {
+        base?: ClassNameValue;
+        icon?: ClassNameValue;
+    };
+    children?: Snippet;
+};
+declare const Button: Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/card.svelte

@@ -0,0 +1,70 @@
+<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-surface-900 text-surface-50',
+						header: 'border-transparent',
+						footer: 'border-transparent'
+					},
+					outline: {
+						base: 'border border-surface-300 divide-y divide-surface-300'
+					},
+					soft: {
+						base: 'bg-surface-50 divide-y divide-surface-300'
+					},
+					subtle: {
+						base: 'bg-surface-50 border-surface-300 border divide-y divide-surface-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

@@ -0,0 +1,17 @@
+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-group.svelte

@@ -0,0 +1,258 @@
+<script module lang="ts">
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+	import type { Component, Snippet } from 'svelte';
+	import { type PropColor, isComponent, isSnippet, Checkbox } from '../index.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: [],
+					},
+					surface: {
+						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: 'surface',
+					selected: true,
+					variant: ['table', 'card'],
+					class: {
+						checkbox: 'border-surface-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: 'surface',
+					selected: true,
+					variant: ['table'],
+					class: {
+						checkbox: 'bg-surface-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/checkbox-group.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ClassNameValue } from 'tailwind-merge';
+import type { Component, Snippet } from 'svelte';
+import { type PropColor } from '../index.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/checkbox.svelte

@@ -0,0 +1,175 @@
+<script module lang="ts">
+	import { type PropColor, isComponent, isSnippet } from '../index.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']
+					},
+					surface: {
+						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

@@ -0,0 +1,27 @@
+import { type PropColor } from '../index.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/chip.svelte

@@ -0,0 +1,82 @@
+<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 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'
+					},
+					surface: {
+						chip: 'bg-surface'
+					},
+					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>