uisv 0.0.12 → 0.0.13

package/dist/components/button/style.js

@@ -0,0 +1,248 @@
+import { tv } from 'tailwind-variants';
+export const BUTTON_VARIANTS = tv({
+    slots: {
+        icon: '',
+        base: 'transition flex-inline items-center font-sans',
+    },
+    variants: {
+        color: {
+            primary: '',
+            surface: '',
+            error: '',
+            success: '',
+            info: '',
+            warning: '',
+        },
+        variant: {
+            link: '',
+            solid: 'text-inverted',
+            outline: 'border',
+            soft: '',
+            subtle: 'border',
+            ghost: '',
+        },
+        size: {
+            xs: {
+                base: 'font-medium text-xs px-2 h-6 rounded gap-1',
+                icon: 'size-4',
+            },
+            sm: { base: 'font-medium text-xs px-2 h-7 rounded gap-1', icon: 'size-4' },
+            md: { base: 'font-medium text-sm rounded-md px-2 h-8 gap-2', icon: 'size-5' },
+            lg: { base: 'font-medium text-sm px-3 h-9 rounded-md gap-2', icon: 'size-6' },
+            xl: { base: 'font-medium px-3 h-10 rounded-md gap-2', icon: 'size-6' },
+        },
+        block: {
+            true: 'w-full',
+        },
+        disabled: {
+            true: 'cursor-not-allowed',
+            false: 'cursor-default',
+        },
+    },
+    compoundVariants: [
+        {
+            color: 'primary',
+            variant: 'solid',
+            class: 'bg-primary-500 hover:(bg-primary-400)',
+        },
+        {
+            color: 'surface',
+            variant: 'solid',
+            class: 'bg-surface-inverted text-inverted hover:(bg-toned)',
+        },
+        {
+            color: 'info',
+            variant: 'solid',
+            class: 'bg-info-500 hover:(bg-info-400)',
+        },
+        {
+            color: 'success',
+            variant: 'solid',
+            class: 'bg-success-500 hover:(bg-success-400)',
+        },
+        {
+            color: 'error',
+            variant: 'solid',
+            class: 'bg-error-500 hover:(bg-error-400)',
+        },
+        {
+            color: 'warning',
+            variant: 'solid',
+            class: 'bg-warning-500 hover:(bg-warning-400)',
+        },
+        {
+            color: 'primary',
+            variant: 'outline',
+            class: {
+                base: [
+                    'border-primary/50 text-primary-500 hover:(bg-primary-50)',
+                    'dark:hover:bg-primary-950',
+                ],
+            },
+        },
+        {
+            color: 'surface',
+            variant: 'outline',
+            class: {
+                base: [
+                    'border-surface-accented text-surface-inverted hover:bg-surface/10',
+                    'dark:hover:bg-surface-800',
+                ],
+            },
+        },
+        {
+            color: 'info',
+            variant: 'outline',
+            class: {
+                base: ['border-info/50 text-blue-500 hover:bg-info/10', 'dark:hover:bg-info-950'],
+            },
+        },
+        {
+            color: 'success',
+            variant: 'outline',
+            class: {
+                base: [
+                    'border-success/50 text-success-500 hover:bg-success/10',
+                    'dark:hover:bg-success-950',
+                ],
+            },
+        },
+        {
+            color: 'error',
+            variant: 'outline',
+            class: {
+                base: ['border-red/50 text-red-500 hover:bg-red/10', 'dark:hover:bg-red-950'],
+            },
+        },
+        {
+            color: 'warning',
+            variant: 'outline',
+            class: {
+                base: [
+                    'border-warning/50 text-warning-500 hover:(bg-warning/10)',
+                    'dark:hover:bg-warning-950',
+                ],
+            },
+        },
+        {
+            color: 'primary',
+            variant: 'soft',
+            class: 'bg-primary-50 text-primary-500 hover:(bg-primary-100)',
+        },
+        {
+            color: 'surface',
+            variant: 'soft',
+            class: 'bg-surface-100 text-surface-800 hover:(bg-surface-200)',
+        },
+        {
+            color: 'info',
+            variant: 'soft',
+            class: 'bg-blue-100 text-blue-500 hover:(bg-blue-50)',
+        },
+        {
+            color: 'success',
+            variant: 'soft',
+            class: 'bg-green-100 text-green-500 hover:(bg-green-50)',
+        },
+        {
+            color: 'error',
+            variant: 'soft',
+            class: 'bg-red-100 text-red-500 hover:(bg-red-50)',
+        },
+        {
+            color: 'warning',
+            variant: 'soft',
+            class: 'bg-yellow-100 text-yellow-500 hover:(bg-yellow-50)',
+        },
+        {
+            color: 'primary',
+            variant: 'subtle',
+            class: 'bg-primary-50 text-primary-500 border-primary-200 hover:(bg-primary-100)',
+        },
+        {
+            color: 'surface',
+            variant: 'subtle',
+            class: 'bg-surface-50 text-surface-800 border-surface-300 hover:(bg-surface-100)',
+        },
+        {
+            color: 'info',
+            variant: 'subtle',
+            class: 'bg-blue-50 text-blue-600 border-blue-200 hover:(bg-blue-100)',
+        },
+        {
+            color: 'success',
+            variant: 'subtle',
+            class: 'bg-green-100 text-green-600 border-green-300 hover:(bg-green-100)',
+        },
+        {
+            color: 'error',
+            variant: 'subtle',
+            class: 'bg-red-50 text-red-600 border-red-200 hover:(bg-red-100)',
+        },
+        {
+            color: 'warning',
+            variant: 'subtle',
+            class: 'bg-yellow-50 text-yellow-600 border-yellow-300 hover:(bg-yellow-100)',
+        },
+        {
+            color: 'primary',
+            variant: 'ghost',
+            class: 'text-primary-500 hover:(bg-primary-100)',
+        },
+        {
+            color: 'surface',
+            variant: 'ghost',
+            class: 'text-surface-inverted hover:(bg-surface-elevated text-surface-inverted)',
+        },
+        {
+            color: 'info',
+            variant: 'ghost',
+            class: 'text-blue-600 hover:(bg-blue-100)',
+        },
+        {
+            color: 'success',
+            variant: 'ghost',
+            class: 'text-green-600 hover:(bg-green-100)',
+        },
+        {
+            color: 'error',
+            variant: 'ghost',
+            class: 'text-red-600 hover:(bg-red-100)',
+        },
+        {
+            color: 'warning',
+            variant: 'ghost',
+            class: 'text-yellow-600 hover:(bg-yellow-100)',
+        },
+        {
+            color: 'primary',
+            variant: 'link',
+            class: 'text-primary-500 hover:(text-primary-400)',
+        },
+        {
+            color: 'surface',
+            variant: 'link',
+            class: 'text-muted hover:(text-surface-inverted)',
+        },
+        {
+            color: 'info',
+            variant: 'link',
+            class: 'text-blue-500 hover:(text-blue-400)',
+        },
+        {
+            color: 'success',
+            variant: 'link',
+            class: 'text-green-500 hover:(text-green-400)',
+        },
+        {
+            color: 'error',
+            variant: 'link',
+            class: 'text-red-500 hover:(text-red-400)',
+        },
+        {
+            color: 'warning',
+            variant: 'link',
+            class: 'text-yellow-500 hover:(text-yellow-400)',
+        },
+    ],
+});

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;