uisv 0.0.12 → 0.0.13

package/dist/components/checkbox.svelte

@@ -0,0 +1,175 @@
+<script module lang="ts">
+	import { type PropColor, isComponent, isSnippet } from '../index.js';
+	import type { Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+	import type { Component } from 'vitest-browser-svelte';
+
+	export type CheckboxProps = {
+		value?: boolean | 'intermediate';
+		color?: PropColor;
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		disabled?: boolean;
+		icon?: string | Snippet | Component;
+		intermediateicon?: string | Snippet | Component;
+		label?: string | Snippet;
+		description?: string | Snippet;
+		required?: boolean;
+		indicator?: 'start' | 'end' | 'hidden';
+		as?: string;
+		ui?: {
+			root?: ClassNameValue;
+			container?: ClassNameValue;
+			icon?: ClassNameValue;
+			label?: ClassNameValue;
+			description?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(false),
+		color = 'primary',
+		size = 'md',
+		disabled,
+		icon = 'i-lucide-check',
+		intermediateicon = 'i-lucide-minus',
+		label,
+		description,
+		required,
+		indicator = 'start',
+		as = 'div',
+		ui = {}
+	}: CheckboxProps = $props();
+	const id = $props.id();
+
+	const classes = $derived.by(() =>
+		tv({
+			slots: {
+				root: 'relative flex-inline gap-2',
+				container:
+					'rounded-md border border-neutral-200 relative transition m-0.5 mr-0 grid place-items-center',
+				icon: 'pi text-white',
+				label: 'text-sm font-medium',
+				description: 'text-sm text-neutral-500'
+			},
+			variants: {
+				color: {
+					primary: {
+						container: [value && 'bg-primary-500 border-primary-500 text-primary-500']
+					},
+					surface: {
+						container: [value && 'bg-neutral-900 border-neutral-900 text-neutral-900']
+					},
+					info: {
+						container: [value && 'bg-info-500 border-info-500 text-info-500']
+					},
+					success: {
+						container: [value && 'bg-success-500 border-success-500 text-success-500']
+					},
+					warning: {
+						container: [value && 'bg-warning-500 border-warning-500 text-warning-500']
+					},
+					error: {
+						container: [value && 'bg-error-500 border-error-500 text-error-500']
+					}
+				},
+				size: {
+					xs: {
+						container: 'size-3',
+						icon: 'size-3'
+					},
+					sm: {
+						container: 'size-3.5',
+						icon: 'size-3.5'
+					},
+					md: {
+						container: 'size-4',
+						icon: 'size-4'
+					},
+					lg: {
+						container: 'size-4.5',
+						icon: 'size-4.5'
+					},
+					xl: {
+						container: 'size-5',
+						icon: 'size-5'
+					}
+				},
+				indicator: {
+					start: '',
+					end: {
+						root: 'flex-row-reverse'
+					},
+					hidden: {
+						container: 'hidden'
+					}
+				}
+			},
+			compoundVariants: []
+		})({ color, size, indicator })
+	);
+</script>
+
+<svelte:element
+	this={as}
+	data-state={value ? 'checked' : 'unchecked'}
+	class={classes.root({
+		class: [disabled && 'opacity-50', ui.root]
+	})}
+>
+	<button
+		{id}
+		aria-label="checkbox"
+		class={classes.container({ class: [ui.container] })}
+		onclick={() => {
+			if (disabled) return;
+			if (value === 'intermediate') return (value = true);
+			value = !value;
+		}}
+	>
+		{@render Icon(icon, [value !== true && 'opacity-0'])}
+		{@render Icon(intermediateicon, [value !== 'intermediate' && 'opacity-0'])}
+	</button>
+
+	{#if label}
+		<div class="flex flex-col justify-start">
+			<label
+				for={id}
+				class={classes.label({
+					class: [required ? 'after:content-["*"] after:text-error-500' : '', ui.label]
+				})}
+			>
+				{#if typeof label === 'string'}
+					{label}
+				{:else}
+					{@render label()}
+				{/if}
+			</label>
+
+			{#if description}
+				<div class={classes.description({ class: ui.description })}>
+					{#if typeof description === 'string'}
+						{description}
+					{:else}
+						{@render description()}
+					{/if}
+				</div>
+			{/if}
+		</div>
+	{/if}
+</svelte:element>
+
+{#snippet Icon(ico?: CheckboxProps['icon'], icon_class?: ClassNameValue)}
+	<div class={['absolute', icon_class]}>
+		{#if typeof ico === 'string'}
+			<div class={classes.icon({ class: [ico, ui.icon] })}></div>
+		{:else if isSnippet(ico)}
+			{@render ico()}
+		{:else if isComponent(ico)}
+			{@const Iconn = ico}
+			<Iconn />
+		{/if}
+	</div>
+{/snippet}

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

@@ -0,0 +1,27 @@
+import { type PropColor } from '../index.js';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { Component } from 'vitest-browser-svelte';
+export type CheckboxProps = {
+    value?: boolean | 'intermediate';
+    color?: PropColor;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    icon?: string | Snippet | Component;
+    intermediateicon?: string | Snippet | Component;
+    label?: string | Snippet;
+    description?: string | Snippet;
+    required?: boolean;
+    indicator?: 'start' | 'end' | 'hidden';
+    as?: string;
+    ui?: {
+        root?: ClassNameValue;
+        container?: ClassNameValue;
+        icon?: ClassNameValue;
+        label?: ClassNameValue;
+        description?: ClassNameValue;
+    };
+};
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "value">;
+type Checkbox = ReturnType<typeof Checkbox>;
+export default Checkbox;

package/dist/components/chip.svelte

@@ -0,0 +1,82 @@
+<script module lang="ts">
+	import type { PropColor } from '../index.js';
+	import type { Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type ChipProps = {
+		children: Snippet;
+		text?: string;
+		color?: PropColor;
+		position?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+		size?: number;
+		ui?: {
+			base?: ClassNameValue;
+			chip?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		children,
+		text,
+		color = 'primary',
+		position = 'top-right',
+		size = 8,
+		ui = {}
+	}: ChipProps = $props();
+
+	const classes = $derived.by(() =>
+		tv({
+			slots: {
+				base: 'relative inline-flex items-center justify-center shrink-0',
+				chip: [
+					'absolute rounded-full ring ring-white flex items-center justify-center text-white font-medium whitespace-nowrap',
+					'-translate-y-1/2 translate-x-1/2 px-0.5'
+				]
+			},
+			variants: {
+				color: {
+					primary: {
+						chip: 'bg-primary'
+					},
+					surface: {
+						chip: 'bg-surface'
+					},
+					success: {
+						chip: 'bg-success'
+					},
+					info: {
+						chip: 'bg-info'
+					},
+					warning: {
+						chip: 'bg-warning'
+					},
+					error: {
+						chip: 'bg-error'
+					}
+				},
+				position: {
+					'top-right': { chip: 'top-0 right-0' },
+					'bottom-right': { chip: 'bottom-0 right-0' },
+					'top-left': { chip: 'top-0 left-0' },
+					'bottom-left': { chip: 'bottom-0 left-0' }
+				}
+			}
+		})({ color, position })
+	);
+</script>
+
+<div class={classes.base({ class: [ui.base] })}>
+	{@render children()}
+
+	<span
+		class={classes.chip({ class: ui.chip })}
+		style:height="{size}px"
+		style:min-width="{size}px"
+		style:font-size="{size}px"
+	>
+		{text}
+	</span>
+</div>

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

@@ -0,0 +1,17 @@
+import type { PropColor } from '../index.js';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type ChipProps = {
+    children: Snippet;
+    text?: string;
+    color?: PropColor;
+    position?: 'top-left' | 'top-right' | 'bottom-right' | 'bottom-left';
+    size?: number;
+    ui?: {
+        base?: ClassNameValue;
+        chip?: ClassNameValue;
+    };
+};
+declare const Chip: import("svelte").Component<ChipProps, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

package/dist/components/color-picker.svelte

@@ -0,0 +1,48 @@
+<script module lang="ts">
+	import { ColorTranslator } from 'colortranslator';
+	import { tv } from 'tailwind-variants';
+
+	export type ColorPickerProps = {
+		throttle?: number;
+		disabled?: boolean;
+		value?: string;
+		format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+	};
+</script>
+
+<script lang="ts">
+	let {
+		throttle = 50,
+		disabled,
+		value = $bindable('#FFF'),
+		format = 'hex',
+		size = 'md',
+	}: ColorPickerProps = $props();
+
+	const translated = $derived(new ColorTranslator(value));
+
+	const classes = $derived(
+		tv({
+			slots: {
+				root: '',
+				picker: '',
+				select: '',
+				track: '',
+				thumb: '',
+			},
+			variants: {
+				size: {
+					xs: {},
+					sm: {},
+					md: {},
+					lg: {},
+					xl: {},
+				},
+			},
+		})({ size }),
+	);
+</script>
+
+<!-- linear-gradient(0deg,red,#f0f 17%,#00f 33%,#0ff,#0f0 67%,#ff0 83%,red) -->
+<div></div>

package/dist/components/color-picker.svelte.d.ts

@@ -0,0 +1,10 @@
+export type ColorPickerProps = {
+    throttle?: number;
+    disabled?: boolean;
+    value?: string;
+    format?: 'hex' | 'rgb' | 'hsl' | 'cmyk' | 'lab';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+};
+declare const ColorPicker: import("svelte").Component<ColorPickerProps, {}, "value">;
+type ColorPicker = ReturnType<typeof ColorPicker>;
+export default ColorPicker;

package/dist/components/h1.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes, ...rest }: SvelteHTMLElements['h1'] = $props();
+</script>
+
+<h1
+	{...rest}
+	class={cn(
+		'text-4xl font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)',
+		classes,
+	)}
+>
+	{@render children?.()}
+</h1>

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

@@ -0,0 +1,3 @@
+declare const H1: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type H1 = ReturnType<typeof H1>;
+export default H1;

package/dist/components/h2.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes, ...rest }: SvelteHTMLElements['h2'] = $props();
+</script>
+
+<h2
+	{...rest}
+	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)',
+		classes,
+	)}
+>
+	{@render children?.()}
+</h2>

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

@@ -0,0 +1,3 @@
+declare const H2: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type H2 = ReturnType<typeof H2>;
+export default H2;

package/dist/components/h3.svelte

@@ -0,0 +1,16 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes, ...rest }: SvelteHTMLElements['h3'] = $props();
+</script>
+
+<h3
+	{...rest}
+	class={cn(
+		'relative text-xl text-highlighted font-bold mt-8 mb-3 scroll-mt-[calc(32px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(32px+var(--ui-header-height))] [&>a]:focus-visible:outline-primary [&>a>code]:border-dashed hover:[&>a>code]:border-primary hover:[&>a>code]:text-primary [&>a>code]:text-lg/6 [&>a>code]:font-bold',
+		'[&>a>code]:transition-colors',
+		classes,
+	)}
+>
+	{@render children?.()}
+</h3>

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

@@ -0,0 +1,3 @@
+declare const H3: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type H3 = ReturnType<typeof H3>;
+export default H3;

package/dist/components/h4.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes, ...rest }: SvelteHTMLElements['h4'] = $props();
+</script>
+
+<h4
+	{...rest}
+	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)',
+		'[&>a]:focus-visible:outline-primary',
+		classes,
+	)}
+>
+	{@render children?.()}
+</h4>

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

@@ -0,0 +1,3 @@
+declare const H4: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type H4 = ReturnType<typeof H4>;
+export default H4;

package/dist/components/h5.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes, ...rest }: SvelteHTMLElements['h5'] = $props();
+</script>
+
+<h5
+	{...rest}
+	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)',
+		'[&>a]:focus-visible:outline-primary',
+		classes,
+	)}
+>
+	{@render children?.()}
+</h5>

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

@@ -0,0 +1,3 @@
+declare const H5: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type H5 = ReturnType<typeof H5>;
+export default H5;

package/dist/components/h6.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import { cn } from 'tailwind-variants';
+	const { children, class: classes, ...rest }: SvelteHTMLElements['h6'] = $props();
+</script>
+
+<h6
+	{...rest}
+	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)',
+		'[&>a]:focus-visible:outline-primary',
+		classes,
+	)}
+>
+	{@render children?.()}
+</h6>

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

@@ -0,0 +1,3 @@
+declare const H6: import("svelte").Component<import("svelte/elements").HTMLAttributes<HTMLHeadingElement>, {}, "">;
+type H6 = ReturnType<typeof H6>;
+export default H6;

package/dist/components/index.d.ts

@@ -0,0 +1,42 @@
+export * from './button/index.js';
+export * from './input/index.js';
+export * from './input-time/index.js';
+export * from './badge.svelte';
+export { default as Badge } from './badge.svelte';
+export * from './alert.svelte';
+export { default as Alert } from './alert.svelte';
+export * from './banner.svelte';
+export { default as Banner } from './banner.svelte';
+export * from './progress.svelte';
+export { default as Progress } from './progress.svelte';
+export * from './card.svelte';
+export { default as Card } from './card.svelte';
+export * from './chip.svelte';
+export { default as Chip } from './chip.svelte';
+export * from './switch.svelte';
+export { default as Switch } from './switch.svelte';
+export * from './slider.svelte';
+export { default as Slider } from './slider.svelte';
+export * from './checkbox.svelte';
+export { default as Checkbox } from './checkbox.svelte';
+export * from './checkbox-group.svelte';
+export { default as CheckboxGroup } from './checkbox-group.svelte';
+export { default as H1 } from './h1.svelte';
+export { default as H2 } from './h2.svelte';
+export { default as H3 } from './h3.svelte';
+export { default as H4 } from './h4.svelte';
+export { default as H5 } from './h5.svelte';
+export { default as H6 } from './h6.svelte';
+export { default as P } from './p.svelte';
+export * from './pin-input.svelte';
+export { default as PinInput } from './pin-input.svelte';
+export * from './accordion.svelte';
+export { default as Accordion } from './accordion.svelte';
+export * from './kbd.svelte';
+export { default as Kbd } from './kbd.svelte';
+export * from './tabs.svelte';
+export { default as Tabs } from './tabs.svelte';
+export * from './color-picker.svelte';
+export { default as ColorPicker } from './color-picker.svelte';
+export * from './select.svelte';
+export { default as Select } from './select.svelte';

package/dist/components/index.js

@@ -0,0 +1,42 @@
+export * from './button/index.js';
+export * from './input/index.js';
+export * from './input-time/index.js';
+export * from './badge.svelte';
+export { default as Badge } from './badge.svelte';
+export * from './alert.svelte';
+export { default as Alert } from './alert.svelte';
+export * from './banner.svelte';
+export { default as Banner } from './banner.svelte';
+export * from './progress.svelte';
+export { default as Progress } from './progress.svelte';
+export * from './card.svelte';
+export { default as Card } from './card.svelte';
+export * from './chip.svelte';
+export { default as Chip } from './chip.svelte';
+export * from './switch.svelte';
+export { default as Switch } from './switch.svelte';
+export * from './slider.svelte';
+export { default as Slider } from './slider.svelte';
+export * from './checkbox.svelte';
+export { default as Checkbox } from './checkbox.svelte';
+export * from './checkbox-group.svelte';
+export { default as CheckboxGroup } from './checkbox-group.svelte';
+export { default as H1 } from './h1.svelte';
+export { default as H2 } from './h2.svelte';
+export { default as H3 } from './h3.svelte';
+export { default as H4 } from './h4.svelte';
+export { default as H5 } from './h5.svelte';
+export { default as H6 } from './h6.svelte';
+export { default as P } from './p.svelte';
+export * from './pin-input.svelte';
+export { default as PinInput } from './pin-input.svelte';
+export * from './accordion.svelte';
+export { default as Accordion } from './accordion.svelte';
+export * from './kbd.svelte';
+export { default as Kbd } from './kbd.svelte';
+export * from './tabs.svelte';
+export { default as Tabs } from './tabs.svelte';
+export * from './color-picker.svelte';
+export { default as ColorPicker } from './color-picker.svelte';
+export * from './select.svelte';
+export { default as Select } from './select.svelte';

package/dist/components/input/index.d.ts

@@ -0,0 +1,54 @@
+import type { PropColor } from '../../index.js';
+import type { Component, Snippet } from 'svelte';
+import type { SvelteHTMLElements } from 'svelte/elements';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { MaskInputOptions } from 'maska';
+export { default as Input } from './input.svelte';
+export * from './style.js';
+export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
+    name?: string;
+    /**
+     * The placeholder text when the input is empty.
+     */
+    placeholder?: string;
+    /**
+     * @default primary
+     */
+    color?: PropColor;
+    /**
+     * @default outline
+     */
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    /**
+     * @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?: string;
+    icon?: string | Snippet | Component;
+    iconposition?: 'leading' | 'trailing';
+    leading?: string | Snippet | Component;
+    trailing?: string | Snippet | Component;
+    loading?: boolean;
+    loadingicon?: string | Snippet | Component;
+    mask?: string | MaskInputOptions;
+    ui?: {
+        root?: ClassNameValue;
+        base?: ClassNameValue;
+        leading?: ClassNameValue;
+        icon?: ClassNameValue;
+        trailing?: ClassNameValue;
+    };
+};

package/dist/components/input/index.js

@@ -0,0 +1,2 @@
+export { default as Input } from './input.svelte';
+export * from './style.js';