uisv 0.0.14 → 0.0.16

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

@@ -106,7 +106,7 @@
 					horizontal: {
 						container: 'flex-row',
 						checkbox:
-							'[&:not(:last-child)]:(-me-px ms-0) first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
+							'[&:not(:last-child)]:-me-px [&:not(:last-child)]:ms-0 first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
 					},
 					vertical: {
 						container: 'flex-col -space-y-px',

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>

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

@@ -0,0 +1,15 @@
+import { type ButtonProps } from '../index.js';
+import { Collapsible } from 'bits-ui';
+import type { ClassNameValue } from 'tailwind-merge';
+export type CollapsibleProps = ButtonProps & {
+    open?: boolean;
+    disabled?: boolean;
+    class?: ClassNameValue;
+    ui?: {
+        root?: ClassNameValue;
+        content?: ClassNameValue;
+    };
+};
+declare const Collapsible: import("svelte").Component<CollapsibleProps, {}, "open">;
+type Collapsible = ReturnType<typeof Collapsible>;
+export default Collapsible;

package/dist/components/h2.svelte

@@ -9,9 +9,9 @@
 	class={cn(
 		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
 		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
-		'[&>a]:(focus-visible:outline-primary)',
-		'[&>a>code]:(transition-colors border-dashed font-bold text-xl/7)',
-		'hover:[&>a>code]:(border-primary text-primary)',
+		'[&>a]:focus-visible:outline-primary',
+		'[&>a>code]:transition-colors [&>a>code]:border-dashed [&>a>code]:font-bold [&>a>code]:text-xl/7',
+		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
 		classes,
 	)}
 >

package/dist/components/h4.svelte

@@ -9,8 +9,8 @@
 	class={cn(
 		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
 		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
-		'hover:[&>a>code]:(border-primary text-primary)',
-		'[&>a>code]:(transition-colors text-xl/7 font-bold border-dashed)',
+		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
+		'[&>a>code]:transition-colors [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:border-dashed',
 		'[&>a]:focus-visible:outline-primary',
 		classes,
 	)}

package/dist/components/h5.svelte

@@ -9,8 +9,8 @@
 	class={cn(
 		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
 		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
-		'hover:[&>a>code]:(border-primary text-primary)',
-		'[&>a>code]:(transition-colors text-xl/7 font-bold border-dashed)',
+		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
+		'[&>a>code]:transition-colors [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:border-dashed',
 		'[&>a]:focus-visible:outline-primary',
 		classes,
 	)}

package/dist/components/h6.svelte

@@ -9,8 +9,8 @@
 	class={cn(
 		'relative text-2xl text-highlighted font-bold mt-12 mb-6',
 		'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
-		'hover:[&>a>code]:(border-primary text-primary)',
-		'[&>a>code]:(transition-colors text-xl/7 font-bold border-dashed)',
+		'hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary',
+		'[&>a>code]:transition-colors [&>a>code]:text-xl/7 [&>a>code]:font-bold [&>a>code]:border-dashed',
 		'[&>a]:focus-visible:outline-primary',
 		classes,
 	)}

package/dist/components/icon.svelte

@@ -0,0 +1,58 @@
+<script module lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import type { Component } from 'svelte';
+	import { useStyle, isComponent } from '../index.js';
+	import { useDebounce, watch } from 'runed';
+
+	export type IconProps = SvelteHTMLElements['base'] & {
+		name?: string | Component;
+	};
+</script>
+
+<script lang="ts">
+	let { class: classname, name, ...rest }: IconProps = $props();
+
+	let css_style = $state('');
+
+	const resolve = useDebounce(async () => {
+		if (typeof name !== 'string') return (css_style = '');
+		const url = `https://api.iconify.design/${name.replace(/^i-/, '')}.svg`;
+		let svg = await (await fetch(url)).text();
+		if (svg === 'Not found') return (css_style = '');
+		css_style = `@layer components {
+		.${name.replace(':', '\\:')} {
+   	        --un-icon: url('data:image/svg+xml,${svg
+							.replaceAll(/[\n\t]/g, '')
+							.replaceAll('"', '\"')
+							.replace('<', '%3C')
+							.replace('>', '%3E')}');
+    		display: inline-block;
+    		width: 1em;
+    		height: 1em;
+    		background-color: currentColor;
+    		-webkit-mask-image: var(--un-icon);
+    		mask-image: var(--un-icon);
+    		-webkit-mask-repeat: no-repeat;
+    		mask-repeat: no-repeat;
+    		-webkit-mask-size: 100% 100%;
+    		mask-size: 100% 100%;
+     	}
+	}`;
+	});
+
+	watch(
+		() => name,
+		() => {
+			resolve();
+		},
+	);
+
+	useStyle(() => css_style);
+</script>
+
+{#if typeof name === 'string' && name.length > 0}
+	<div {...rest as SvelteHTMLElements['div']} class={[name, classname]}></div>
+{:else if isComponent(name)}
+	{@const Icon = name}
+	<Icon {...rest} />
+{/if}

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

@@ -0,0 +1,8 @@
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { Component } from 'svelte';
+export type IconProps = SvelteHTMLElements['base'] & {
+    name?: string | Component;
+};
+declare const Icon: Component<IconProps, {}, "">;
+type Icon = ReturnType<typeof Icon>;
+export default Icon;

package/dist/components/index.d.ts

@@ -1,8 +1,8 @@
 export * from './button.svelte';
 export { default as Button } from './button.svelte';
-export * from './badge.svelte';
+export * from './input.svelte';
 export { default as Input } from './input.svelte';
-export * from './badge.svelte';
+export * from './input-time.svelte';
 export { default as InputTime } from './input-time.svelte';
 export * from './badge.svelte';
 export { default as Badge } from './badge.svelte';
@@ -43,3 +43,15 @@ export * from './color-picker.svelte';
 export { default as ColorPicker } from './color-picker.svelte';
 export * from './select.svelte';
 export { default as Select } from './select.svelte';
+export * from './collapsible.svelte';
+export { default as Collapsible } from './collapsible.svelte';
+export * from './placeholder.svelte';
+export { default as Placeholder } from './placeholder.svelte';
+export * from './seperator.svelte';
+export { default as Seperator } from './seperator.svelte';
+export * from './icon.svelte';
+export { default as Icon } from './icon.svelte';
+export * from './breadcrumb.svelte';
+export { default as Breadcrumb } from './breadcrumb.svelte';
+export * from './input-number.svelte';
+export { default as InputNumber } from './input-number.svelte';

package/dist/components/index.js

@@ -1,8 +1,8 @@
 export * from './button.svelte';
 export { default as Button } from './button.svelte';
-export * from './badge.svelte';
+export * from './input.svelte';
 export { default as Input } from './input.svelte';
-export * from './badge.svelte';
+export * from './input-time.svelte';
 export { default as InputTime } from './input-time.svelte';
 export * from './badge.svelte';
 export { default as Badge } from './badge.svelte';
@@ -43,3 +43,15 @@ export * from './color-picker.svelte';
 export { default as ColorPicker } from './color-picker.svelte';
 export * from './select.svelte';
 export { default as Select } from './select.svelte';
+export * from './collapsible.svelte';
+export { default as Collapsible } from './collapsible.svelte';
+export * from './placeholder.svelte';
+export { default as Placeholder } from './placeholder.svelte';
+export * from './seperator.svelte';
+export { default as Seperator } from './seperator.svelte';
+export * from './icon.svelte';
+export { default as Icon } from './icon.svelte';
+export * from './breadcrumb.svelte';
+export { default as Breadcrumb } from './breadcrumb.svelte';
+export * from './input-number.svelte';
+export { default as InputNumber } from './input-number.svelte';

package/dist/components/input-number.svelte

@@ -0,0 +1,175 @@
+<script module lang="ts">
+	import {
+		Button,
+		type ButtonProps,
+		type PropColor,
+		type PropSize,
+		type PropVariant,
+	} from '../index.js';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+	import Accordion from './accordion.svelte';
+	import { useId } from 'bits-ui';
+
+	export type InputNumberProps = Omit<SvelteHTMLElements['input'], 'size' | 'value'> & {
+		value?: number;
+		placeholder?: string;
+		color?: PropColor;
+		variant?: Exclude<PropVariant, 'solid'>;
+		size?: PropSize;
+		highlight?: boolean;
+		fixed?: boolean;
+		orientation?: 'vertical' | 'horizontal';
+		increment?: boolean | Omit<ButtonProps, 'href'>;
+		decrement?: boolean | Omit<ButtonProps, 'href'>;
+		autofocus?: boolean | number;
+		min?: number;
+		max?: number;
+		step?: number;
+		stepsnapping?: number;
+		disabled?: boolean;
+		required?: boolean;
+		id?: string;
+		name?: string;
+		format?: Intl.NumberFormatOptions;
+		wheelchange?: boolean;
+		invertwheelchange?: boolean;
+		focusonchange?: boolean;
+		autocomplete?: 'on' | 'off' | string;
+		ui?: {
+			root?: ClassNameValue;
+			base?: ClassNameValue;
+			increment?: ClassNameValue;
+			decrement?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(),
+		placeholder,
+		color = 'primary',
+		variant = 'outline',
+		size = 'md',
+		highlight,
+		fixed,
+		orientation = 'horizontal',
+		increment = true,
+		decrement = true,
+		autofocus,
+		min,
+		max,
+		step,
+		stepsnapping,
+		disabled,
+		required,
+		format,
+		wheelchange = true,
+		invertwheelchange,
+		focusonchange,
+		autocomplete,
+		ui = {},
+		...rest
+	}: InputNumberProps = $props();
+	const id = useId('uisv-in');
+
+	const variants = $derived(
+		tv({
+			slots: {
+				root: 'inline-flex relative items-center',
+				base: 'outline-none',
+				increment: '',
+				decrement: '',
+			},
+			variants: {
+				size: {
+					xs: {},
+					sm: {},
+					md: {},
+					lg: {},
+					xl: {},
+				},
+				variant: {
+					outline: {},
+					subtle: {},
+					soft: {},
+					ghost: {},
+					none: {},
+				},
+				color: {
+					primary: {},
+					surface: {},
+					info: {},
+					success: {},
+					warning: {},
+					error: {},
+				},
+				orientation: {
+					horizontal: {},
+					vertical: {},
+				},
+			},
+			compoundVariants: [
+				{
+					color: 'primary',
+					class: { base: 'bg-pimary-500' },
+				},
+			],
+		})({ color, size, orientation, variant }),
+	);
+
+	$effect(() => {
+		if (typeof value === 'string') value = parseInt(value) || undefined;
+	});
+</script>
+
+<div class={variants.root({ class: ui.root })}>
+	<input
+		{...rest}
+		{id}
+		tabindex="0"
+		bind:value
+		type="text"
+		inputmode="decimal"
+		{autocomplete}
+		autocorrect="off"
+		spellcheck="false"
+		{placeholder}
+		{max}
+		{min}
+		{step}
+		class={variants.base({ class: ui.base })}
+	/>
+
+	{#if orientation === 'horizontal'}
+		{@render crements()}
+	{:else}
+		<div class="flex flex-col position">
+			{@render crements()}
+		</div>
+	{/if}
+</div>
+
+{#snippet crements()}
+	{#if increment}
+		<Button
+			variant="link"
+			icon="i-lucide:minus"
+			onclick={() => {
+				value = value === undefined ? 0 : value - 1;
+			}}
+		/>
+	{/if}
+
+	{#if increment}
+		<Button
+			variant="link"
+			icon="i-lucide:plus"
+			onclick={() => {
+				value = value === undefined ? 0 : value + 1;
+			}}
+		/>
+	{/if}
+{/snippet}

package/dist/components/input-number.svelte.d.ts

@@ -0,0 +1,38 @@
+import { type ButtonProps, type PropColor, type PropSize, type PropVariant } from '../index.js';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+export type InputNumberProps = Omit<SvelteHTMLElements['input'], 'size' | 'value'> & {
+    value?: number;
+    placeholder?: string;
+    color?: PropColor;
+    variant?: Exclude<PropVariant, 'solid'>;
+    size?: PropSize;
+    highlight?: boolean;
+    fixed?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    increment?: boolean | Omit<ButtonProps, 'href'>;
+    decrement?: boolean | Omit<ButtonProps, 'href'>;
+    autofocus?: boolean | number;
+    min?: number;
+    max?: number;
+    step?: number;
+    stepsnapping?: number;
+    disabled?: boolean;
+    required?: boolean;
+    id?: string;
+    name?: string;
+    format?: Intl.NumberFormatOptions;
+    wheelchange?: boolean;
+    invertwheelchange?: boolean;
+    focusonchange?: boolean;
+    autocomplete?: 'on' | 'off' | string;
+    ui?: {
+        root?: ClassNameValue;
+        base?: ClassNameValue;
+        increment?: ClassNameValue;
+        decrement?: ClassNameValue;
+    };
+};
+declare const InputNumber: import("svelte").Component<InputNumberProps, {}, "value">;
+type InputNumber = ReturnType<typeof InputNumber>;
+export default InputNumber;