uisv 0.0.11 → 0.0.13

package/dist/components/accordion.svelte

@@ -0,0 +1,108 @@
+<script module lang="ts">
+	import { Accordion } from 'bits-ui';
+	import type { Component, Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type AccordionItem = {
+		label: string;
+		icon?: string | Snippet | Component;
+		trailingicon?: string | Snippet | Component;
+		content: string;
+		value?: string;
+		disabled?: boolean;
+	};
+	export type AccordionProps = {
+		value?: string | string[];
+		items: AccordionItem[];
+		collapsible?: boolean;
+		disabled?: boolean;
+		type?: 'single' | 'multiple';
+		trailingicon?: string | Snippet | Component;
+		leading?: Snippet<[{ item: AccordionItem; index: number; open: boolean }]>;
+		default?: Snippet<[{ item: AccordionItem; index: number; open: boolean }]>;
+		trailing?: Snippet<[{ item: AccordionItem; index: number; open: boolean }]>;
+		content?: Snippet<[{ item: AccordionItem; index: number; open: boolean }]>;
+		body?: Snippet<[{ item: AccordionItem; index: number; open: boolean }]>;
+		ui?: {
+			root?: ClassNameValue;
+			item?: ClassNameValue;
+			header?: ClassNameValue;
+			trigger?: ClassNameValue;
+			content?: ClassNameValue;
+			body?: ClassNameValue;
+			leadingicon?: ClassNameValue;
+			trailingicon?: ClassNameValue;
+			label?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(),
+		items,
+		collapsible = true,
+		disabled,
+		type = 'single',
+		trailingicon = 'i-lucide-baret-down',
+		leading,
+		default: defau,
+		trailing,
+		content,
+		body,
+		ui = {}
+	}: AccordionProps = $props();
+	const classes = $derived(
+		tv({
+			slots: {
+				root: 'w-full',
+				item: 'border-b border-default last:border-b-0',
+				header: 'flex',
+				trigger:
+					'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0',
+				content:
+					'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
+				body: 'text-sm pb-3.5',
+				leadingIcon: 'shrink-0 size-5',
+				trailingIcon:
+					'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
+				label: 'text-start break-words'
+			},
+			variants: {
+				disabled: {
+					true: {
+						trigger: 'cursor-not-allowed opacity-75'
+					}
+				}
+			}
+		})({
+			disabled
+		})
+	);
+</script>
+
+<Accordion.Root
+	class={classes.root({ class: ui.root })}
+	type="multiple"
+	bind:value={
+		() => {
+			if (!value) return;
+			if (Array.isArray(value)) return value;
+			return [value];
+		},
+		(val) => {
+			if (!val) return (value = val);
+			value = type === 'single' ? val[0] : val;
+		}
+	}
+>
+	{#each items as item, idx (idx)}
+		<Accordion.Item value="item-1">
+			<Accordion.Header>
+				<Accordion.Trigger>{item.label}</Accordion.Trigger>
+			</Accordion.Header>
+			<Accordion.Content>This is the collapsible content for this section.</Accordion.Content>
+		</Accordion.Item>
+	{/each}
+</Accordion.Root>

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

@@ -0,0 +1,58 @@
+import { Accordion } from 'bits-ui';
+import type { Component, Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type AccordionItem = {
+    label: string;
+    icon?: string | Snippet | Component;
+    trailingicon?: string | Snippet | Component;
+    content: string;
+    value?: string;
+    disabled?: boolean;
+};
+export type AccordionProps = {
+    value?: string | string[];
+    items: AccordionItem[];
+    collapsible?: boolean;
+    disabled?: boolean;
+    type?: 'single' | 'multiple';
+    trailingicon?: string | Snippet | Component;
+    leading?: Snippet<[{
+        item: AccordionItem;
+        index: number;
+        open: boolean;
+    }]>;
+    default?: Snippet<[{
+        item: AccordionItem;
+        index: number;
+        open: boolean;
+    }]>;
+    trailing?: Snippet<[{
+        item: AccordionItem;
+        index: number;
+        open: boolean;
+    }]>;
+    content?: Snippet<[{
+        item: AccordionItem;
+        index: number;
+        open: boolean;
+    }]>;
+    body?: Snippet<[{
+        item: AccordionItem;
+        index: number;
+        open: boolean;
+    }]>;
+    ui?: {
+        root?: ClassNameValue;
+        item?: ClassNameValue;
+        header?: ClassNameValue;
+        trigger?: ClassNameValue;
+        content?: ClassNameValue;
+        body?: ClassNameValue;
+        leadingicon?: ClassNameValue;
+        trailingicon?: ClassNameValue;
+        label?: ClassNameValue;
+    };
+};
+declare const Accordion: Component<AccordionProps, {}, "value">;
+type Accordion = ReturnType<typeof Accordion>;
+export default Accordion;

package/dist/components/alert.svelte

@@ -0,0 +1,271 @@
+<script module lang="ts">
+	import { type PropColor, isSnippet, type ButtonProps, Button } from '../index.js';
+	import type { Component, Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+	import { defu } from 'defu';
+
+	export type AlertProps = {
+		title?: string | Snippet;
+		description?: string | Snippet;
+		icon?: string | Snippet | Component;
+		color?: PropColor;
+		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		position?: 'bottom' | 'right';
+		actions?: ButtonProps[];
+		close?: boolean | ButtonProps;
+		ui?: {
+			base?: ClassNameValue;
+			icon?: ClassNameValue;
+			description?: ClassNameValue;
+			title?: ClassNameValue;
+		};
+		onclose?: () => void | Promise<void>;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		title,
+		description,
+		close,
+		icon,
+		actions = [],
+		color = 'primary',
+		variant = 'solid',
+		position = 'bottom',
+		ui = {},
+		onclose = () => {},
+	}: AlertProps = $props();
+
+	const close_props = $derived.by(() => {
+		return defu(typeof close === 'boolean' ? {} : close, {
+			icon: 'i-lucide-x',
+			variant: 'link',
+			color: variant === 'solid' ? 'surface' : color,
+			ui: {
+				icon: variant === 'solid' ? 'text-white' : '',
+			},
+		} as ButtonProps);
+	});
+	const classes = $derived.by(() =>
+		tv({
+			slots: {
+				base: 'flex gap-2 font-sans p-4 rounded-lg',
+				icon: 'pi size-6',
+				actions: '',
+				description: 'text-opacity-50 text-sm',
+				title: 'font-medium',
+			},
+			variants: {
+				color: {
+					primary: '',
+					surface: '',
+					info: '',
+					success: '',
+					warning: '',
+					error: '',
+				},
+				variant: {
+					solid: {
+						base: 'text-white',
+						description: 'text-white/90',
+					},
+					outline: 'border',
+					soft: '',
+					subtle: 'border',
+				},
+				position: {
+					right: {
+						base: '',
+					},
+					bottom: {
+						base: 'flex-col',
+					},
+				},
+			},
+			compoundVariants: [
+				{
+					variant: 'solid',
+					color: 'primary',
+					class: 'bg-primary-500',
+				},
+				{
+					variant: 'solid',
+					color: 'surface',
+					class: 'bg-surface-900',
+				},
+				{
+					variant: 'solid',
+					color: 'info',
+					class: 'bg-info-500',
+				},
+				{
+					variant: 'solid',
+					color: 'success',
+					class: 'bg-success-500',
+				},
+				{
+					variant: 'solid',
+					color: 'warning',
+					class: 'bg-warning-500',
+				},
+				{
+					variant: 'solid',
+					color: 'error',
+					class: 'bg-error-500',
+				},
+
+				{
+					variant: 'outline',
+					color: 'primary',
+					class: 'border-primary-300 text-primary-500',
+				},
+				{
+					variant: 'outline',
+					color: 'surface',
+					class: 'border-surface-300 text-surface-900',
+				},
+				{
+					variant: 'outline',
+					color: 'info',
+					class: 'border-info-300 text-info-500',
+				},
+				{
+					variant: 'outline',
+					color: 'success',
+					class: 'border-success-300 text-success-500',
+				},
+				{
+					variant: 'outline',
+					color: 'warning',
+					class: 'border-warning-300 text-warning-500',
+				},
+				{
+					variant: 'outline',
+					color: 'error',
+					class: 'border-error-300 text-error-500',
+				},
+
+				{
+					variant: 'soft',
+					color: 'primary',
+					class: 'bg-primary-100 text-primary-500',
+				},
+				{
+					variant: 'soft',
+					color: 'surface',
+					class: 'bg-surface-50 text-surface-900',
+				},
+				{
+					variant: 'soft',
+					color: 'info',
+					class: 'bg-info-50 text-info-500',
+				},
+				{
+					variant: 'soft',
+					color: 'success',
+					class: 'bg-success-50 text-success-500',
+				},
+				{
+					variant: 'soft',
+					color: 'warning',
+					class: 'bg-warning-50 text-warning-500',
+				},
+				{
+					variant: 'soft',
+					color: 'error',
+					class: 'bg-error-50 text-error-500',
+				},
+
+				{
+					variant: 'subtle',
+					color: 'primary',
+					class: 'bg-primary-100 text-primary-500 border-primary-300',
+				},
+				{
+					variant: 'subtle',
+					color: 'surface',
+					class: 'bg-surface-50 text-surface-900 border-surface-300',
+				},
+				{
+					variant: 'subtle',
+					color: 'info',
+					class: 'bg-info-50 text-info-500 border-info-300',
+				},
+				{
+					variant: 'subtle',
+					color: 'success',
+					class: 'bg-success-50 text-success-500 border-success-300',
+				},
+				{
+					variant: 'subtle',
+					color: 'warning',
+					class: 'bg-warning-50 text-warning-500 border-warning-300',
+				},
+				{
+					variant: 'subtle',
+					color: 'error',
+					class: 'bg-error-50 text-error-500  border-error-300',
+				},
+			],
+		})({ color, variant, position }),
+	);
+</script>
+
+<div class={classes.base({ class: [position === 'bottom' ? '' : 'flex', ui.base] })}>
+	<div class="flex gap-2 flex-grow">
+		{#if icon}
+			<div class="size-6">
+				{#if typeof icon === 'string'}
+					<div class={classes.icon({ class: [icon] })}></div>
+				{:else if isSnippet(icon)}
+					{@render icon()}
+				{:else}
+					{@const Icon = icon}
+					<Icon />
+				{/if}
+			</div>
+		{/if}
+
+		<div class="space-y-1 flex-grow">
+			{#if title}
+				<div class={classes.title({ class: [ui.title] })}>
+					{#if isSnippet(title)}
+						{@render title()}
+					{:else}
+						{title}
+					{/if}
+				</div>
+			{/if}
+
+			{#if description}
+				<div class={classes.description({ class: [ui.title] })}>
+					{#if isSnippet(description)}
+						{@render description()}
+					{:else}
+						{description}
+					{/if}
+				</div>
+			{/if}
+		</div>
+
+		{#if close}
+			<div>
+				<Button {...close_props} onclick={onclose} />
+			</div>
+		{/if}
+	</div>
+
+	{#if actions.length > 0}
+		<div class="flex gap-2 items-center pl-8">
+			{#each actions as action (action.label)}
+				<Button
+					{...defu(action, {
+						size: 'xs',
+					} as ButtonProps)}
+				/>
+			{/each}
+		</div>
+	{/if}
+</div>

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

@@ -0,0 +1,23 @@
+import { type PropColor, type ButtonProps } from '../index.js';
+import type { Component, Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type AlertProps = {
+    title?: string | Snippet;
+    description?: string | Snippet;
+    icon?: string | Snippet | Component;
+    color?: PropColor;
+    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    position?: 'bottom' | 'right';
+    actions?: ButtonProps[];
+    close?: boolean | ButtonProps;
+    ui?: {
+        base?: ClassNameValue;
+        icon?: ClassNameValue;
+        description?: ClassNameValue;
+        title?: ClassNameValue;
+    };
+    onclose?: () => void | Promise<void>;
+};
+declare const Alert: Component<AlertProps, {}, "">;
+type Alert = ReturnType<typeof Alert>;
+export default Alert;

package/dist/components/badge.svelte

@@ -0,0 +1,225 @@
+<script lang="ts" module>
+	import type { Component, Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+	import { type PropColor, isSnippet } from '../index.js';
+	import type { ClassNameValue } from 'tailwind-merge';
+
+	export type BadgeProps = {
+		label?: string;
+		color?: PropColor;
+		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		icon?: string | Snippet | Component;
+		trailingicon?: boolean;
+		children?: Snippet;
+		ui?: {
+			base?: ClassNameValue;
+			icon?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		icon,
+		label,
+		trailingicon,
+		color = 'primary',
+		size = 'md',
+		variant = 'solid',
+		ui = {},
+		children,
+	}: BadgeProps = $props();
+
+	const classes = $derived.by(() => {
+		return tv({
+			slots: { icon: '', base: 'flex-inline items-center font-sans' },
+			variants: {
+				color: {
+					primary: '',
+					surface: '',
+					error: '',
+					success: '',
+					info: '',
+					warning: '',
+				},
+				variant: {
+					link: '',
+					solid: 'text-white',
+					outline: 'border',
+					soft: '',
+					subtle: 'border',
+					ghost: '',
+				},
+				size: {
+					xs: {
+						base: 'font-medium text-[0.5rem] px-1 h-4 rounded gap-1',
+						icon: 'size-3',
+					},
+					sm: { base: 'font-medium text-[0.625rem] px-1 h-5 rounded gap-1', icon: 'size-3' },
+					md: { base: 'font-medium text-xs rounded-md px-2 h-6 gap-2', icon: 'size-4' },
+					lg: { base: 'font-medium text-sm px-2 h-7 rounded-md gap-2', icon: 'size-5' },
+					xl: { base: 'font-medium px-3 h-8 rounded-md gap-2', icon: 'size-5' },
+				},
+			},
+			compoundVariants: [
+				{
+					color: 'primary',
+					variant: 'solid',
+					class: 'bg-primary-400',
+				},
+				{
+					color: 'surface',
+					variant: 'solid',
+					class: 'bg-surface-900',
+				},
+				{
+					color: 'info',
+					variant: 'solid',
+					class: 'bg-blue-500',
+				},
+				{
+					color: 'success',
+					variant: 'solid',
+					class: 'bg-green-500',
+				},
+				{
+					color: 'error',
+					variant: 'solid',
+					class: 'bg-red-500',
+				},
+				{
+					color: 'warning',
+					variant: 'solid',
+					class: 'bg-yellow-500',
+				},
+
+				{
+					color: 'primary',
+					variant: 'outline',
+					class: 'border-primary-300 text-primary-400',
+				},
+				{
+					color: 'surface',
+					variant: 'outline',
+					class: 'border-surface-300 text-surface-900',
+				},
+				{
+					color: 'info',
+					variant: 'outline',
+					class: 'border-blue-300 text-blue-500',
+				},
+				{
+					color: 'success',
+					variant: 'outline',
+					class: 'border-green-300 text-green-500',
+				},
+				{
+					color: 'error',
+					variant: 'outline',
+					class: 'border-red-300 text-red-500',
+				},
+				{
+					color: 'warning',
+					variant: 'outline',
+					class: 'border-yellow-300 text-yellow-500',
+				},
+
+				{
+					color: 'primary',
+					variant: 'soft',
+					class: ' bg-primary-50 text-primary-500',
+				},
+				{
+					color: 'surface',
+					variant: 'soft',
+					class: 'bg-surface-100 text-surface-800',
+				},
+				{
+					color: 'info',
+					variant: 'soft',
+					class: 'bg-blue-100 text-blue-500',
+				},
+				{
+					color: 'success',
+					variant: 'soft',
+					class: 'bg-green-100 text-green-500',
+				},
+				{
+					color: 'error',
+					variant: 'soft',
+					class: 'bg-red-100 text-red-500',
+				},
+				{
+					color: 'warning',
+					variant: 'soft',
+					class: 'bg-yellow-100 text-yellow-500 ',
+				},
+
+				{
+					color: 'primary',
+					variant: 'subtle',
+					class: 'bg-primary-50 text-primary-500 border-primary-200 ',
+				},
+				{
+					color: 'surface',
+					variant: 'subtle',
+					class: 'bg-surface-100 text-surface-800 border-surface-300 ',
+				},
+				{
+					color: 'info',
+					variant: 'subtle',
+					class: 'bg-blue-50 text-blue-600 border-blue-200',
+				},
+				{
+					color: 'success',
+					variant: 'subtle',
+					class: 'bg-green-100 text-green-600 border-green-300',
+				},
+				{
+					color: 'error',
+					variant: 'subtle',
+					class: 'bg-red-50 text-red-600 border-red-200',
+				},
+				{
+					color: 'warning',
+					variant: 'subtle',
+					class: 'bg-yellow-50 text-yellow-600 border-yellow-300',
+				},
+			],
+		})({ variant, size, color });
+	});
+</script>
+
+<span
+	class={classes.base({
+		class: [icon && !(children || label) ? 'px-0 aspect-square justify-center' : '', ui.base],
+	})}
+>
+	{#if !trailingicon}
+		{@render Icon()}
+	{/if}
+
+	{#if label}
+		{label}
+	{:else}
+		{@render children?.()}
+	{/if}
+
+	{#if trailingicon}
+		{@render Icon()}
+	{/if}
+</span>
+
+{#snippet Icon()}
+	{#if icon}
+		{#if typeof icon === 'string'}
+			<div class={['pi', icon, classes.icon(), ui.icon]}></div>
+		{:else if isSnippet(icon)}
+			{@render icon()}
+		{:else}
+			{@const Icon = icon}
+			<Icon />
+		{/if}
+	{/if}
+{/snippet}

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

@@ -0,0 +1,19 @@
+import type { Component, Snippet } from 'svelte';
+import { type PropColor } from '../index.js';
+import type { ClassNameValue } from 'tailwind-merge';
+export type BadgeProps = {
+    label?: string;
+    color?: PropColor;
+    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    icon?: string | Snippet | Component;
+    trailingicon?: boolean;
+    children?: Snippet;
+    ui?: {
+        base?: ClassNameValue;
+        icon?: ClassNameValue;
+    };
+};
+declare const Badge: Component<BadgeProps, {}, "">;
+type Badge = ReturnType<typeof Badge>;
+export default Badge;