uisv 0.0.13 → 0.0.15

package/dist/components/button.svelte

@@ -0,0 +1,415 @@
+<script module lang="ts">
+	import { type Component, type Snippet } from 'svelte';
+	import { isComponent, type PropColor, type PropVariant } from '../index.js';
+	import type { ClassNameValue } from 'tailwind-merge';
+	// import { FORM_LOADING_CONTEXT_KEY } from '../utils/keys.js';
+	import { isSnippet } from '../index.js';
+	import { tv } from 'tailwind-variants';
+
+	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. */
+		// active?: boolean;
+		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;
+		leadingicon?: string | Snippet | Component;
+		trailingicon?: string | Snippet | Component;
+		/** Route Location the link should navigate to when clicked on. */
+		href?: string;
+		label?: string;
+		/**
+		 * @defaultValue 'primary'
+		 */
+		color?: PropColor;
+		// activecolor?: PropColor;
+		/**
+		 * @defaultValue 'solid'
+		 */
+		variant?: Exclude<PropVariant, 'none'> | 'link';
+		// activevariant?: ButtonVariant;
+		/**
+		 * @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;
+			leadingicon?: ClassNameValue;
+			trailingicon?: ClassNameValue;
+		};
+		children?: Snippet;
+	};
+</script>
+
+<script lang="ts">
+	// let form_loading = getContext<{ value: boolean } | undefined>(FORM_LOADING_CONTEXT_KEY);
+	let {
+		ref = $bindable(),
+		size = 'md',
+		variant = 'solid',
+		color = 'primary',
+		iconposition = 'left',
+		children,
+		// active,
+		// activecolor,
+		// activevariant,
+		block,
+		label,
+		loadingauto,
+		onclick,
+		ui = {},
+		disabled,
+		href,
+		icon,
+		loading,
+		loadingicon = 'i-lucide-loader-circle',
+		target,
+		type,
+		trailingicon,
+		leadingicon,
+	}: ButtonProps = $props();
+
+	let internal_loading = $state(false);
+	const is_loading = $derived.by(() => {
+		if (loading) return true;
+		if (loadingauto) return internal_loading;
+		return false;
+	});
+
+	const variants = $derived(
+		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-info-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-error/50 text-error-500 hover:bg-error/10', 'dark:hover:bg-error-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-info-100 text-info-500 hover:bg-info-50',
+				},
+				{
+					color: 'success',
+					variant: 'soft',
+					class: 'bg-success-100 text-success-500 hover:bg-success-50',
+				},
+				{
+					color: 'error',
+					variant: 'soft',
+					class: 'bg-error-100 text-error-500 hover:bg-error-50',
+				},
+				{
+					color: 'warning',
+					variant: 'soft',
+					class: 'bg-warning-100 text-warning-500 hover:bg-warning-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-info-50 text-info-600 border-info-200 hover:bg-info-100',
+				},
+				{
+					color: 'success',
+					variant: 'subtle',
+					class: 'bg-success-100 text-success-600 border-success-300 hover:bg-success-100',
+				},
+				{
+					color: 'error',
+					variant: 'subtle',
+					class: 'bg-error-50 text-error-600 border-error-200 hover:bg-error-100',
+				},
+				{
+					color: 'warning',
+					variant: 'subtle',
+					class: 'bg-warning-50 text-warning-600 border-warning-300 hover:bg-warning-100',
+				},
+
+				{
+					color: 'primary',
+					variant: 'ghost',
+					class: 'text-primary-500 hover:bg-primary-100',
+				},
+				{
+					color: 'surface',
+					variant: 'ghost',
+					class: 'text-surface-inverted hover-surface-elevated text-surface-inverted)',
+				},
+				{
+					color: 'info',
+					variant: 'ghost',
+					class: 'text-info-600 hover:bg-info-100',
+				},
+				{
+					color: 'success',
+					variant: 'ghost',
+					class: 'text-success-600 hover:bg-success-100',
+				},
+				{
+					color: 'error',
+					variant: 'ghost',
+					class: 'text-error-600 hover:bg-error-100',
+				},
+				{
+					color: 'warning',
+					variant: 'ghost',
+					class: 'text-warning-600 hover:bg-warning-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-info-500 hover:text-info-400',
+				},
+				{
+					color: 'success',
+					variant: 'link',
+					class: 'text-success-500 hover:text-success-400',
+				},
+				{
+					color: 'error',
+					variant: 'link',
+					class: 'text-error-500 hover:text-error-400',
+				},
+				{
+					color: 'warning',
+					variant: 'link',
+					class: 'text-warning-500 hover:text-warning-400',
+				},
+			],
+		})({ variant, color, size, block, disabled: disabled || is_loading }),
+	);
+
+	const only_icon = $derived(!(children || label) && !!icon);
+
+	async function onClickWrapper(event: MouseEvent) {
+		if (!onclick) return;
+		internal_loading = true;
+
+		await onclick(event);
+
+		internal_loading = false;
+	}
+</script>
+
+{#if href}
+	<a
+		{href}
+		{target}
+		class={variants.base({
+			class: [only_icon ? 'px-0 aspect-square justify-center' : '', 'cursor-pointer', ui.base],
+		})}
+		onclick={onClickWrapper}
+	>
+		{@render Content()}
+	</a>
+{:else}
+	<button
+		{type}
+		disabled={disabled || is_loading}
+		class={variants.base({
+			class: [only_icon ? 'px-0 aspect-square justify-center' : '', ui.base],
+		})}
+		onclick={onClickWrapper}
+	>
+		{@render Content()}
+	</button>
+{/if}
+
+{#snippet Content()}
+	{#if iconposition === 'left' || leadingicon}
+		{@render Icon(is_loading ? loadingicon : leadingicon || icon, ui.leadingicon)}
+	{/if}
+
+	{#if label}
+		{label}
+	{:else}
+		{@render children?.()}
+	{/if}
+
+	{#if iconposition !== 'left' || trailingicon}
+		{@render Icon(trailingicon || icon, ui.trailingicon)}
+	{/if}
+{/snippet}
+
+{#snippet Icon(IconProp?: string | Snippet | Component, classvalue?: ClassNameValue)}
+	{#if typeof IconProp === 'string'}
+		<div
+			class={variants.icon({
+				class: [is_loading && 'animate-spin', IconProp, ui.icon, classvalue],
+			})}
+		></div>
+	{:else if isSnippet(IconProp)}
+		{@render IconProp()}
+	{:else if isComponent(IconProp)}
+		<IconProp />
+	{/if}
+{/snippet}

package/dist/components/{button/index.d.ts → button.svelte.d.ts}

@@ -1,8 +1,6 @@
 import { type Component, type Snippet } from 'svelte';
-import { type PropColor } from '../../index.js';
+import { type PropColor, type PropVariant } from '../index.js';
 import type { ClassNameValue } from 'tailwind-merge';
-export * from './style.js';
-export { default as Button } from './button.svelte';
 export type ButtonProps = {
     /** The underlying DOM element being rendered. You can bind to this to get a reference to the element. */
     ref?: HTMLButtonElement | HTMLAnchorElement;
@@ -20,6 +18,8 @@ export type ButtonProps = {
     iconposition?: 'left' | 'right';
     /** Icon when `loading` is `false` */
     icon?: string | Snippet | Component;
+    leadingicon?: string | Snippet | Component;
+    trailingicon?: string | Snippet | Component;
     /** Route Location the link should navigate to when clicked on. */
     href?: string;
     label?: string;
@@ -30,7 +30,7 @@ export type ButtonProps = {
     /**
      * @defaultValue 'solid'
      */
-    variant?: 'link' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost';
+    variant?: Exclude<PropVariant, 'none'> | 'link';
     /**
      * @defaultValue 'md'
      */
@@ -43,6 +43,11 @@ export type ButtonProps = {
     ui?: {
         base?: ClassNameValue;
         icon?: ClassNameValue;
+        leadingicon?: ClassNameValue;
+        trailingicon?: ClassNameValue;
     };
     children?: Snippet;
 };
+declare const Button: Component<ButtonProps, {}, "ref">;
+type Button = ReturnType<typeof Button>;
+export default Button;

package/dist/components/calendar.svelte

@@ -0,0 +1,99 @@
+<script lang="ts" module>
+	import type { Component, Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+	import { type PropColor, type PropVariant, isSnippet } from '../index.js';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { type DateValue, today } from '../date.js';
+	import { Calendar, type CalendarRootProps } from 'bits-ui';
+
+	export type CalendarProps = CalendarRootProps & {
+		color?: PropColor;
+		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		ui?: {
+			base?: ClassNameValue;
+			icon?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		type,
+		value = $bindable(),
+		label,
+		trailingicon,
+		color = 'primary',
+		size = 'md',
+		variant = 'solid',
+		ui = {},
+		children,
+	}: CalendarProps = $props();
+
+	const classes = $derived.by(() => {
+		return tv({
+			slots: { icon: '', base: '' },
+			variants: {
+				color: {
+					primary: '',
+					surface: '',
+					error: '',
+					success: '',
+					info: '',
+					warning: '',
+				},
+				variant: {
+					link: '',
+					solid: '',
+					outline: '',
+					soft: '',
+					subtle: '',
+					ghost: '',
+				},
+				size: {
+					xs: {},
+					sm: {},
+					md: {},
+					lg: {},
+					xl: {},
+				},
+			},
+			compoundVariants: [],
+		})({ variant, size, color });
+	});
+</script>
+
+<Calendar.Root type={type as typeof type} bind:value>
+	{#snippet children({ months, weekdays })}
+		<Calendar.Header>
+			<Calendar.PrevButton />
+			<Calendar.Heading />
+			<Calendar.NextButton />
+		</Calendar.Header>
+
+		{#each months as month}
+			<Calendar.Grid>
+				<Calendar.GridHead>
+					<Calendar.GridRow>
+						{#each weekdays as day, idx (idx)}
+							<Calendar.HeadCell>
+								{day}
+							</Calendar.HeadCell>
+						{/each}
+					</Calendar.GridRow>
+				</Calendar.GridHead>
+				<Calendar.GridBody>
+					{#each month.weeks as weekDates, wdidx (wdidx)}
+						<Calendar.GridRow>
+							{#each weekDates as date, didx (didx)}
+								<Calendar.Cell {date} month={month.value}>
+									<Calendar.Day />
+								</Calendar.Cell>
+							{/each}
+						</Calendar.GridRow>
+					{/each}
+				</Calendar.GridBody>
+			</Calendar.Grid>
+		{/each}
+	{/snippet}
+</Calendar.Root>

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

@@ -0,0 +1,16 @@
+import type { Component } from 'svelte';
+import { type PropColor, type PropVariant } from '../index.js';
+import type { ClassNameValue } from 'tailwind-merge';
+import { Calendar, type CalendarRootProps } from 'bits-ui';
+export type CalendarProps = CalendarRootProps & {
+    color?: PropColor;
+    variant?: Exclude<PropVariant, 'none' | 'ghost'>;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    ui?: {
+        base?: ClassNameValue;
+        icon?: ClassNameValue;
+    };
+};
+declare const Calendar: Component<CalendarProps, {}, "value">;
+type Calendar = ReturnType<typeof Calendar>;
+export default Calendar;

package/dist/components/card.svelte

@@ -1,4 +1,5 @@
 <script module lang="ts">
+	import type { PropVariant } from '../index.js';
 	import type { Snippet } from 'svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
@@ -7,7 +8,7 @@
 		children: Snippet;
 		header?: Snippet;
 		footer?: Snippet;
-		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
 		ui?: {
 			base?: ClassNameValue;
 			header?: ClassNameValue;
@@ -26,28 +27,28 @@
 				base: 'rounded overflow-hidden',
 				header: 'p-4 sm:px-6',
 				content: 'p-4 sm:p-6',
-				footer: 'p-4 sm:px-6'
+				footer: 'p-4 sm:px-6',
 			},
 			variants: {
 				variant: {
 					solid: {
 						base: 'bg-surface-900 text-surface-50',
 						header: 'border-transparent',
-						footer: 'border-transparent'
+						footer: 'border-transparent',
 					},
 					outline: {
-						base: 'border border-surface-300 divide-y divide-surface-300'
+						base: 'border border-surface-300 divide-y divide-surface-300',
 					},
 					soft: {
-						base: 'bg-surface-50 divide-y divide-surface-300'
+						base: 'bg-surface-50 divide-y divide-surface-300',
 					},
 					subtle: {
-						base: 'bg-surface-50 border-surface-300 border divide-y divide-surface-300'
-					}
-				}
+						base: 'bg-surface-50 border-surface-300 border divide-y divide-surface-300',
+					},
+				},
 			},
-			compoundVariants: []
-		})({ variant })
+			compoundVariants: [],
+		})({ variant }),
 	);
 </script>
 

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

@@ -1,10 +1,11 @@
+import type { PropVariant } from '../index.js';
 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';
+    variant?: Exclude<PropVariant, 'none' | 'ghost'>;
     ui?: {
         base?: ClassNameValue;
         header?: ClassNameValue;

package/dist/components/collapsible.svelte

@@ -0,0 +1,76 @@
+<script module lang="ts">
+	import { type ButtonProps, Button } from '../index.js';
+	import { Collapsible } from 'bits-ui';
+	import { defu } from 'defu';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type CollapsibleProps = ButtonProps & {
+		open?: boolean;
+		disabled?: boolean;
+		class?: ClassNameValue;
+		ui?: {
+			root?: ClassNameValue;
+			content?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		open = $bindable(false),
+		children,
+		ui = {},
+		class: root_class,
+		...rest
+	}: CollapsibleProps = $props();
+
+	const variants = $derived(
+		tv({
+			slots: {
+				root: 'flex flex-col gap-2',
+				content:
+					'data-[state=open]:animate-[collapsible-down_200ms_ease-out] data-[state=closed]:animate-[collapsible-up_200ms_ease-out] space-y-2 overflow-hidden font-mono text-[15px] tracking-[0.01em] transition-all',
+			},
+		})(),
+	);
+</script>
+
+<Collapsible.Root bind:open class={variants.root({ class: [root_class, ui.root] })}>
+	<Collapsible.Trigger>
+		{#snippet child({ props })}
+			<Button
+				{...props}
+				trailingicon="i-lucide-chevron-down"
+				{...rest}
+				block
+				ui={defu(ui, { trailingicon: 'ms-auto' })}
+			/>
+		{/snippet}
+	</Collapsible.Trigger>
+	<Collapsible.Content class={variants.content({ class: ui.content })}>
+		{@render children?.()}
+	</Collapsible.Content>
+</Collapsible.Root>
+
+<style>
+	:global {
+		@keyframes collapsible-down {
+			from {
+				height: 0;
+			}
+			to {
+				height: var(--bits-collapsible-content-height);
+			}
+		}
+
+		@keyframes collapsible-up {
+			from {
+				height: var(--bits-collapsible-content-height);
+			}
+			to {
+				height: 0;
+			}
+		}
+	}
+</style>