uisv 0.0.12 → 0.0.13

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

@@ -0,0 +1,88 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import { Popover, type PopoverContentProps } from 'bits-ui';
+import { type ButtonProps } from '../index.js';
+import type { PropColor } from '../index.js';
+export type PopoverContentSnippet = {
+    props: Record<string, unknown>;
+    open: boolean;
+    wrapperProps: Record<string, unknown>;
+};
+export type PopoverProps = {
+    /**
+     * The display mode of the popover.
+     */
+    mode?: 'hover' | 'click';
+    /**
+     * The props for the content of popover.
+     */
+    contentprops?: PopoverContentProps;
+    content?: Snippet<[PopoverContentSnippet]>;
+    children?: Snippet<[]>;
+    /**
+     * Snippet if you want to implement your own trigger button
+     */
+    trigger?: Snippet<[Record<string, unknown>]>;
+    /**
+     * Display an arrow alongside the popover.
+     */
+    arrow?: boolean;
+    /**
+     * Render the popover in a portal.
+     */
+    portal?: string | false | true | HTMLElement;
+    /**
+     * The reference (or anchor) element that is being referred to for positioning. If not provided will use the current component as anchor.
+     */
+    reference?: Element | {
+        getBoundingClientRect: () => DOMRect;
+        getClientRects: () => DOMRect[];
+        contextElement?: Element;
+    };
+    /**
+     * When `false`, the popover will not close when clicking outside or pressing escape.
+     */
+    dismissible?: boolean;
+    /**
+     * The open state of the popover when it is initially rendered. Use when you do not need to control its open state.
+     */
+    defaultopen?: boolean;
+    /**
+     * The controlled open state of the popover.
+     */
+    open?: boolean;
+    /**
+     * The modality of the popover. When set to `true`, interaction with outside elements will be disabled and only popover content will be visible to screen readers.
+     */
+    modal?: boolean;
+    /**
+     * The duration from when the mouse enters the trigger until the hover card opens.
+     */
+    opendelay?: number;
+    /**
+     * The duration from when the mouse leaves the trigger or content until the hover card closes.
+     */
+    closedelay?: number;
+    /**
+     *
+     */
+    ui?: {
+        content?: ClassNameValue;
+        arrow?: ClassNameValue;
+    };
+    /**
+     * @default `outline`
+     */
+    variant?: ButtonProps['variant'];
+    /**
+     * @default primary
+     */
+    color?: PropColor;
+    /**
+     *
+     */
+    class?: ClassNameValue;
+};
+declare const Popover: import("svelte").Component<PopoverProps, {}, "open">;
+type Popover = ReturnType<typeof Popover>;
+export default Popover;

package/dist/components/progress.svelte

@@ -0,0 +1,124 @@
+<script module lang="ts">
+	import type { PropColor } from '../index.js';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type ProgressProps = {
+		value?: number;
+		max?: number | string[];
+		animation?: 'swing' | 'carousel' | 'carousel-inverse' | 'elastic';
+		orientation?: 'horizontal' | 'veritcal';
+		color?: PropColor;
+		height?: number;
+		inverted?: boolean;
+		status?: boolean;
+		ui?: {
+			base?: ClassNameValue;
+			header?: ClassNameValue;
+			content?: ClassNameValue;
+			footer?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		max,
+		animation,
+		inverted,
+		status,
+		value,
+		orientation = 'horizontal',
+		color = 'primary',
+		height = '',
+		ui = {}
+	}: ProgressProps = $props();
+
+	const percentage = $derived.by(() => {
+		if (value === undefined) return null;
+		if (Array.isArray(max)) return (value / (max.length - 1)) * 100;
+
+		return (value / (max || 100)) * 100;
+	});
+	const indeterminate = $derived.by(() => {
+		if (value === undefined || percentage === null) return true;
+		if (value < 0) return true;
+		if (percentage > 100) return true;
+
+		return false;
+	});
+	const classes = $derived.by(() =>
+		tv({
+			slots: {
+				root: 'relative w-full rounded-full overflow-hidden bg-surface-300',
+				status: '',
+				indicator: 'absolute transition-all rounded-full',
+				steps: ''
+			},
+			variants: {
+				color: {
+					primary: {
+						indicator: 'bg-primary-500'
+					},
+					surface: {
+						indicator: 'bg-surface-500'
+					},
+					info: {
+						indicator: 'bg-info-500'
+					},
+					success: {
+						indicator: 'bg-success-500'
+					},
+					warning: {
+						indicator: 'bg-warning-500'
+					},
+					error: {
+						indicator: 'bg-error-500'
+					}
+				},
+				animation: {
+					swing: [indeterminate ? 'animate-[swing_2s_ease-in-out_infinite' : ''],
+					carousel: [indeterminate ? '' : ''],
+					'carousel-inverse': [indeterminate ? '' : ''],
+					elastic: [indeterminate ? '' : '']
+				}
+			},
+			compoundVariants: []
+		})({
+			color,
+			animation: animation ?? 'swing'
+		})
+	);
+</script>
+
+<div data-state-indeterminate={indeterminate}>
+	<div class={classes.root({ class: [ui.base] })} style:height={`${height || 8}px`}>
+		<span class={classes.indicator({ class: ['h-full left-0'] })} style:width={`${percentage}%`}>
+		</span>
+	</div>
+
+	{#if Array.isArray(max)}
+		<p
+			class={[
+				'text-right transition',
+				value && value > 0 && max[value] ? 'text-primary-500' : 'text-surface-500'
+			]}
+		>
+			{(value && max[value]) || max[0]}
+		</p>
+	{/if}
+</div>
+
+<style>
+	@keyframe swing {
+		0% {
+			width: 0%;
+		}
+		50% {
+			width: 100%;
+		}
+		100% {
+			width: 0%;
+		}
+	}
+</style>

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

@@ -0,0 +1,21 @@
+import type { PropColor } from '../index.js';
+import type { ClassNameValue } from 'tailwind-merge';
+export type ProgressProps = {
+    value?: number;
+    max?: number | string[];
+    animation?: 'swing' | 'carousel' | 'carousel-inverse' | 'elastic';
+    orientation?: 'horizontal' | 'veritcal';
+    color?: PropColor;
+    height?: number;
+    inverted?: boolean;
+    status?: boolean;
+    ui?: {
+        base?: ClassNameValue;
+        header?: ClassNameValue;
+        content?: ClassNameValue;
+        footer?: ClassNameValue;
+    };
+};
+declare const Progress: import("svelte").Component<ProgressProps, {}, "">;
+type Progress = ReturnType<typeof Progress>;
+export default Progress;

package/dist/components/select.svelte

@@ -0,0 +1,171 @@
+<script module lang="ts">
+	import type { PropColor } from '../index.js';
+	import { Select } from 'bits-ui';
+	import type { Component, Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+
+	export type SelectItem<T> =
+		| T
+		| {
+				icon?: string | Component;
+				label: string | Component;
+				value: T;
+		  };
+
+	export type SelectProps<T> = {
+		items: (SelectItem<T> | SelectItem<T>[])[];
+		defaultvalue?: T;
+		item?: Snippet<[{ item: SelectItem<T> }]>;
+		color?: PropColor;
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+		highlight?: boolean;
+		placeholder?: string;
+	} & (
+		| {
+				value?: T;
+				type?: 'single';
+		  }
+		| {
+				value?: T[];
+				type?: 'multiple';
+		  }
+	);
+</script>
+
+<script lang="ts" generics="T extends unknown">
+	let {
+		value = $bindable(),
+		items,
+		type = 'single',
+		defaultvalue,
+		item,
+		color = 'primary',
+		size = 'md',
+		variant = 'outline',
+		highlight,
+		placeholder,
+	}: SelectProps<T> = $props();
+
+	const classes = $derived(
+		tv({
+			slots: {
+				trigger: 'transition-all rounded w-48 flex items-center justify-between',
+			},
+			variants: {
+				color: {
+					primary: {
+						trigger: 'outline-primary focus:(border-primary)',
+					},
+					surface: {
+						trigger: 'outline-surface focus:(border-surface)',
+					},
+					info: {
+						trigger: 'outline-info focus:(border-info)',
+					},
+					success: {
+						trigger: 'outline-success focus:(border-success)',
+					},
+					warning: {
+						trigger: 'outline-warning focus:(border-warning)',
+					},
+					error: {
+						trigger: 'outline-error focus:(border-error)',
+					},
+				},
+				size: {
+					xs: {
+						trigger: 'h-6 px-1 text-xs gap-1',
+					},
+					sm: {
+						trigger: 'h-7 px-2 text-xs gap-1',
+					},
+					md: {
+						trigger: 'h-8 px-2 text-sm gap-2 ',
+					},
+					lg: {
+						trigger: 'h-9 px-3 text-sm gap-3',
+					},
+					xl: {
+						trigger: 'h-10 px-3 gap-4',
+					},
+				},
+				variant: {
+					outline: {
+						trigger: 'border border-surface-accented focus:(outline)',
+					},
+					soft: {
+						trigger: 'bg-surface-elevated',
+					},
+					subtle: {
+						trigger: 'bg-surface-elevated border border-surface-accented focus:(outline)',
+					},
+					ghost: {
+						trigger: 'hover:bg-surface-elevated',
+					},
+					none: {},
+				},
+				placeholder: {
+					true: { trigger: 'text-muted' },
+					false: {},
+				},
+				highlight: {
+					true: {
+						trigger: 'border',
+					},
+					false: {},
+				},
+			},
+			compoundVariants: [
+				{ color: 'primary', highlight: true, class: { trigger: 'border-primary-500' } },
+				{ color: 'surface', highlight: true, class: { trigger: 'border-surface-500' } },
+				{ color: 'info', highlight: true, class: { trigger: 'border-info-500' } },
+				{ color: 'success', highlight: true, class: { trigger: 'border-success-500' } },
+				{ color: 'warning', highlight: true, class: { trigger: 'border-warning-500' } },
+				{ color: 'error', highlight: true, class: { trigger: 'border-error-500' } },
+			],
+		})({ size, color, variant, placeholder: !!placeholder, highlight }),
+	);
+</script>
+
+{/* @ts-expect-error idek */ null}
+<Select.Root
+	{type}
+	bind:value={
+		() => {
+			if (type === 'single') return value as string | string[];
+			return value as string | string[];
+		},
+		(v) => (value = v as T | T[] | undefined)
+	}
+>
+	<Select.Trigger class={classes.trigger()}>
+		{value || placeholder}
+		<div class="i-lucide-chevron-down size-4"></div>
+	</Select.Trigger>
+	<Select.Portal>
+		<Select.Content class="bg-red">
+			<Select.ScrollUpButton />
+			<Select.Viewport>
+				{#each items as item, idx (idx)}
+					{#if Array.isArray(item)}
+						<Select.Group>
+							<Select.GroupHeading />
+
+							{#each item as group_item, gidx (gidx)}
+								<Select.Item value=""></Select.Item>
+							{/each}
+						</Select.Group>
+					{:else}
+						{@const is_object = typeof item === 'object' && item !== null && 'value' in item}
+						<Select.Item value={(is_object ? item.value : item) as string}>
+							{item}
+						</Select.Item>
+					{/if}
+				{/each}
+
+				<Select.ScrollDownButton />
+			</Select.Viewport>
+		</Select.Content>
+	</Select.Portal>
+</Select.Root>

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

@@ -0,0 +1,50 @@
+import type { PropColor } from '../index.js';
+import { Select } from 'bits-ui';
+import type { Component, Snippet } from 'svelte';
+export type SelectItem<T> = T | {
+    icon?: string | Component;
+    label: string | Component;
+    value: T;
+};
+export type SelectProps<T> = {
+    items: (SelectItem<T> | SelectItem<T>[])[];
+    defaultvalue?: T;
+    item?: Snippet<[{
+        item: SelectItem<T>;
+    }]>;
+    color?: PropColor;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    highlight?: boolean;
+    placeholder?: string;
+} & ({
+    value?: T;
+    type?: 'single';
+} | {
+    value?: T[];
+    type?: 'multiple';
+});
+declare function $$render<T extends unknown>(): {
+    props: SelectProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends unknown> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends unknown>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends unknown>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Select: $$IsomorphicComponent;
+type Select<T extends unknown> = InstanceType<typeof Select<T>>;
+export default Select;

package/dist/components/slider.svelte

@@ -0,0 +1,172 @@
+<script module lang="ts">
+	import { Slider } from 'bits-ui';
+	import type { PropColor } from '../index.js';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type SliderProps<T> = {
+		value?: T;
+		default?: number | number[];
+		color?: PropColor;
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		disabled?: boolean;
+		thumblabel?: boolean;
+		orientation?: 'vertical' | 'horizontal';
+		step?: number;
+		min?: number;
+		max?: number;
+		ui?: {
+			root?: ClassNameValue;
+			range?: ClassNameValue;
+			thumb?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts" generics="T extends number | number[]">
+	let {
+		value = $bindable(),
+		default: def_value = 0,
+		color = 'primary',
+		size = 'md',
+		disabled,
+		thumblabel,
+		orientation = 'horizontal',
+		step,
+		min,
+		max,
+		ui = {}
+	}: SliderProps<T> = $props();
+
+	const default_value = $derived.by(() => {
+		if (typeof def_value === 'number') return [def_value];
+
+		return def_value;
+	});
+	let slider_value = $derived({
+		get() {
+			if (typeof value === 'number') return [value];
+
+			return (value as number[]) ?? default_value;
+		},
+		set(v: number[]) {
+			value = (v?.length !== 1 ? v : v[0]) as T;
+		}
+	});
+	const thumbs = $derived(slider_value.get()?.length ?? 1);
+	const classes = $derived.by(() =>
+		tv({
+			slots: {
+				root: [
+					'relative w-full flex rounded-full bg-neutral-300',
+					orientation === 'horizontal' ? 'items-center' : 'justify-center mx-1'
+				],
+				range: [
+					'rounded-full bg-neutral-200 p-0.5 relative transition',
+					orientation === 'horizontal' ? 'h-full' : 'w-full'
+				],
+				thumb: 'bg-white rounded-full border-2 outline-none transition',
+				tick: ''
+			},
+			variants: {
+				color: {
+					primary: {
+						root: '',
+						range: 'bg-primary-500',
+						thumb: 'border-primary-500'
+					},
+					surface: {
+						range: ['bg-neutral-900'],
+						thumb: 'border-neutral-900'
+					},
+					info: {
+						range: ['bg-info-500'],
+						thumb: 'border-info-500'
+					},
+					success: {
+						range: ['bg-success-500'],
+						thumb: 'border-success-500'
+					},
+					warning: {
+						range: ['bg-warning-500'],
+						thumb: 'border-warning-500'
+					},
+					error: {
+						range: ['bg-error-500'],
+						thumb: 'border-error-500'
+					}
+				},
+				size: {
+					xs: {
+						root: [orientation === 'horizontal' ? 'h-1.5' : ''],
+						thumb: 'size-4',
+						tick: 'size-2.5'
+					},
+					sm: {
+						root: [orientation === 'horizontal' ? 'h-1.75' : ''],
+						thumb: 'size-4.5',
+						tick: 'size-3'
+					},
+					md: {
+						root: [orientation === 'horizontal' ? 'h-2' : 'w-2 h-48'],
+						thumb: 'size-5',
+						tick: 'size-3.5'
+					},
+					lg: {
+						root: [orientation === 'horizontal' ? 'h-2.5' : ''],
+						thumb: 'size-5.5',
+						tick: 'size-4'
+					},
+					xl: {
+						root: [orientation === 'horizontal' ? 'h-3' : 'w-3'],
+						thumb: 'size-6',
+						tick: 'size-4.5'
+					}
+				},
+				orientation: {
+					horizontal: {
+						root: '',
+						thumb: '',
+						tick: ''
+					},
+					vertical: {
+						root: '',
+						thumb: '',
+						tick: ''
+					}
+				}
+			},
+			compoundVariants: []
+		})({ color, size, orientation })
+	);
+</script>
+
+<Slider.Root
+	type="multiple"
+	bind:value={slider_value.get, slider_value.set}
+	{min}
+	{max}
+	{step}
+	{orientation}
+	{disabled}
+	class={classes.root({ class: [disabled ? 'opacity-75 cursor-not-allowed' : '', ui.root] })}
+>
+	<Slider.Range class={classes.range({ class: [ui.range] })} />
+
+	{#each { length: thumbs }, index (index)}
+		<Slider.Thumb {index} class={classes.thumb({ class: ['group', ui.thumb] })}>
+			{#if thumblabel}
+				<Slider.ThumbLabel
+					{index}
+					position="bottom"
+					class={[
+						'opacity-0 transition pointer-events-none text-sm shadow-md px-2 h-6 flex items-center rounded-md mt-1 border border-surface-200',
+						'data-[active=""]:(opacity-100) group-hover:(opacity-100)'
+					]}
+				>
+					{slider_value.get()[index]}
+				</Slider.ThumbLabel>
+			{/if}
+		</Slider.Thumb>
+	{/each}
+</Slider.Root>

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

@@ -0,0 +1,44 @@
+import { Slider } from 'bits-ui';
+import type { PropColor } from '../index.js';
+import type { ClassNameValue } from 'tailwind-merge';
+export type SliderProps<T> = {
+    value?: T;
+    default?: number | number[];
+    color?: PropColor;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    thumblabel?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    step?: number;
+    min?: number;
+    max?: number;
+    ui?: {
+        root?: ClassNameValue;
+        range?: ClassNameValue;
+        thumb?: ClassNameValue;
+    };
+};
+declare function $$render<T extends number | number[]>(): {
+    props: SliderProps<T>;
+    exports: {};
+    bindings: "value";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<T extends number | number[]> {
+    props(): ReturnType<typeof $$render<T>>['props'];
+    events(): ReturnType<typeof $$render<T>>['events'];
+    slots(): ReturnType<typeof $$render<T>>['slots'];
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends number | number[]>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends number | number[]>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const Slider: $$IsomorphicComponent;
+type Slider<T extends number | number[]> = InstanceType<typeof Slider<T>>;
+export default Slider;