uisv 0.0.13 → 0.0.15

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/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,6 +1,9 @@
-export * from './button/index.js';
-export * from './input/index.js';
-export * from './input-time/index.js';
+export * from './button.svelte';
+export { default as Button } from './button.svelte';
+export * from './badge.svelte';
+export { default as Input } from './input.svelte';
+export * from './badge.svelte';
+export { default as InputTime } from './input-time.svelte';
 export * from './badge.svelte';
 export { default as Badge } from './badge.svelte';
 export * from './alert.svelte';
@@ -40,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,6 +1,9 @@
-export * from './button/index.js';
-export * from './input/index.js';
-export * from './input-time/index.js';
+export * from './button.svelte';
+export { default as Button } from './button.svelte';
+export * from './badge.svelte';
+export { default as Input } from './input.svelte';
+export * from './badge.svelte';
+export { default as InputTime } from './input-time.svelte';
 export * from './badge.svelte';
 export { default as Badge } from './badge.svelte';
 export * from './alert.svelte';
@@ -40,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;

package/dist/components/input-time.svelte

@@ -0,0 +1,233 @@
+<script module lang="ts">
+	import { type PropColor, type PropVariant } from '../index.js';
+	import type { Component, Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+	import { Time } from '../date.js';
+
+	export { default as InputTime } from './input-time.svelte';
+
+	export type InputTimeProps = {
+		id?: string;
+		name?: string;
+		hourcycle?: 12 | 24;
+		max?: Time;
+		min?: Time;
+		/**
+		 * The placeholder text when the input is empty.
+		 */
+		placeholder?: string;
+		/**
+		 * @default primary
+		 */
+		color?: PropColor;
+		/**
+		 * @default outline
+		 */
+		variant?: Exclude<PropVariant, 'solid'>;
+		/**
+		 * @default md
+		 */
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		/**
+		 * @default off
+		 */
+		autocomplete?: 'on' | 'off';
+		/**
+		 * @default false
+		 */
+		autofocus?: boolean | number;
+		disabled?: boolean;
+		/**
+		 * Highlight the ring color like a focus state.
+		 */
+		highlight?: boolean;
+		value?: Time;
+		icon?: string | Snippet | Component;
+		ui?: {
+			root?: ClassNameValue;
+			leading?: ClassNameValue;
+			icon?: ClassNameValue;
+			trailing?: ClassNameValue;
+			segment?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	import { TimeField } from 'bits-ui';
+
+	let {
+		hourcycle = 12,
+		value = $bindable(),
+		color = 'primary',
+		variant = 'outline',
+		size = 'md',
+		icon,
+		disabled,
+		highlight,
+		ui = {},
+		...rest
+	}: InputTimeProps = $props();
+
+	const variants = $derived(
+		tv({
+			slots: {
+				root: 'inline-flex items-center rounded transition-all ring ring-inset ring-transparent',
+				leading: 'text-muted',
+				trailing: 'text-muted',
+				icon: '',
+				segment: [
+					'rounded text-center outline-hidden transition-all focus:bg-surface-accented shrink',
+					'aria-[valuetext="Empty"]:text-dimmed data-[segment="literal"]:(text-muted px-1) data-invalid:text-error data-disabled:(cursor-not-allowed opacity-75)',
+				],
+			},
+			variants: {
+				fieldGroup: {
+					horizontal: {
+						root: '',
+					},
+					vertical: {
+						root: '',
+					},
+				},
+				size: {
+					xs: {
+						root: 'px-2 h-6 text-xs',
+						leading: 'ps-2',
+						trailing: 'pe-2',
+						icon: 'size-4',
+						segment: 'px-1',
+					},
+					sm: {
+						root: 'px-2.5 h-7 text-xs',
+						leading: 'ps-2.5',
+						trailing: 'pe-2.5',
+						icon: 'size-4',
+						segment: 'px-1',
+					},
+					md: {
+						root: 'px-2.5 h-8 text-sm',
+						leading: 'ps-2.5',
+						trailing: 'pe-2.5',
+						icon: 'size-5',
+						segment: 'px-2',
+					},
+					lg: {
+						root: 'px-3 h-9 text-sm',
+						leading: 'ps-3',
+						trailing: 'pe-3',
+						icon: 'size-5',
+						segment: 'px-3',
+					},
+					xl: {
+						root: 'px-3 h-10 text-base',
+						leading: 'ps-3',
+						trailing: 'pe-3',
+						icon: 'size-6',
+						segment: 'px-3',
+					},
+				},
+				variant: {
+					outline: { root: 'ring ring-surface-accented' },
+					soft: {
+						root: 'bg-surface-muted hover:bg-surface-elevated focus-within:bg-surface-elevated',
+					},
+					subtle: { root: 'ring ring-accented' },
+					ghost: { root: 'hover:bg-surface-elevated focus-within:bg-surface-elevated' },
+					none: { root: '' },
+				},
+				color: {
+					primary: { root: '' },
+					surface: { root: '' },
+					info: { root: '' },
+					success: { root: '' },
+					warning: { root: '' },
+					error: { root: '' },
+				},
+				leading: {
+					false: { leading: 'hidden' },
+				},
+				trailing: {
+					false: { trailing: 'hidden' },
+				},
+				loading: {
+					true: '',
+				},
+				highlight: {
+					true: '',
+				},
+				type: {
+					file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none',
+				},
+			},
+			compoundVariants: [
+				{
+					color: 'primary',
+					variant: ['outline', 'subtle'],
+					highlight: true,
+					class: {
+						root: 'ring-primary-500 ring-2',
+					},
+				},
+				{
+					color: 'surface',
+					variant: ['outline', 'subtle'],
+					highlight: true,
+					class: {
+						root: 'ring-surface-800 ring-2',
+					},
+				},
+				{
+					color: 'info',
+					variant: ['outline', 'subtle'],
+					highlight: true,
+					class: {
+						root: 'ring-info-500 ring-2',
+					},
+				},
+				{
+					color: 'success',
+					variant: ['outline', 'subtle'],
+					highlight: true,
+					class: {
+						root: 'ring-success-500 ring-2',
+					},
+				},
+				{
+					color: 'warning',
+					variant: ['outline', 'subtle'],
+					highlight: true,
+					class: {
+						root: 'ring-warning-500 ring-2',
+					},
+				},
+				{
+					color: 'error',
+					variant: ['outline', 'subtle'],
+					highlight: true,
+					class: {
+						root: 'ring-error-500 ring-2',
+					},
+				},
+			],
+		})({
+			size,
+			color,
+			variant,
+			highlight,
+		}),
+	);
+</script>
+
+<TimeField.Root bind:value hourCycle={hourcycle}>
+	<TimeField.Input name="hello" class={variants.root({ class: ui.root })}>
+		{#snippet children({ segments })}
+			{#each segments as { part, value }, i (part + i)}
+				<TimeField.Segment {part} class={variants.segment({ class: ui.segment })}>
+					{value}
+				</TimeField.Segment>
+			{/each}
+		{/snippet}
+	</TimeField.Input>
+</TimeField.Root>

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

@@ -0,0 +1,53 @@
+import { type PropColor, type PropVariant } from '../index.js';
+import type { Component, Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import { Time } from '../date.js';
+export { default as InputTime } from './input-time.svelte';
+export type InputTimeProps = {
+    id?: string;
+    name?: string;
+    hourcycle?: 12 | 24;
+    max?: Time;
+    min?: Time;
+    /**
+     * The placeholder text when the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * @default primary
+     */
+    color?: PropColor;
+    /**
+     * @default outline
+     */
+    variant?: Exclude<PropVariant, 'solid'>;
+    /**
+     * @default md
+     */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /**
+     * @default off
+     */
+    autocomplete?: 'on' | 'off';
+    /**
+     * @default false
+     */
+    autofocus?: boolean | number;
+    disabled?: boolean;
+    /**
+     * Highlight the ring color like a focus state.
+     */
+    highlight?: boolean;
+    value?: Time;
+    icon?: string | Snippet | Component;
+    ui?: {
+        root?: ClassNameValue;
+        leading?: ClassNameValue;
+        icon?: ClassNameValue;
+        trailing?: ClassNameValue;
+        segment?: ClassNameValue;
+    };
+};
+declare const InputTime: Component<InputTimeProps, {}, "value">;
+type InputTime = ReturnType<typeof InputTime>;
+export default InputTime;