uisv 0.0.14 → 0.0.15

package/dist/components/kbd.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import type { PropColor } from '../index.js';
+	import type { PropColor, PropVariant } from '../index.js';
 	import type { Snippet } from 'svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
@@ -8,7 +8,7 @@
 		children?: Snippet;
 		value?: string;
 		color?: PropColor;
-		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		variant?: Exclude<PropVariant, 'none' | 'ghost'>;
 		size?: 'sm' | 'md' | 'lg';
 		class?: ClassNameValue;
 	};
@@ -35,7 +35,7 @@
 		pageup: '⇞',
 		pagedown: '⇟',
 		home: '↖',
-		end: '↘'
+		end: '↘',
 	};
 
 	export type KbdKey = keyof typeof KBD_KEYS;
@@ -49,7 +49,7 @@
 		color = 'primary',
 		variant = 'outline',
 		size = 'md',
-		class: klass
+		class: klass,
 	}: KbdProps = $props();
 
 	const macOS = $derived.by(() => {
@@ -61,7 +61,7 @@
 	const kbdKeysSpecificMap = $derived({
 		meta: macOS ? KBD_KEYS.command : 'Ctrl',
 		alt: macOS ? KBD_KEYS.command : 'Ctrl',
-		ctrl: macOS ? KBD_KEYS.option : 'Alt'
+		ctrl: macOS ? KBD_KEYS.option : 'Alt',
 	});
 
 	function getKey(value?: KbdKey | string) {
@@ -87,148 +87,148 @@
 				info: '',
 				success: '',
 				warning: '',
-				error: ''
+				error: '',
 			},
 			variant: {
 				solid: 'text-white border border-b-3 border-r-2',
 				outline: 'border border-b-3 border-r-2',
 				soft: '',
-				subtle: 'border border-b-3 border-r-2'
+				subtle: 'border border-b-3 border-r-2',
 			},
 			size: {
 				sm: 'h-4 min-w-4',
 				md: 'h-5 min-w-5',
-				lg: 'h-6 min-w-6'
-			}
+				lg: 'h-6 min-w-6',
+			},
 		},
 		compoundVariants: [
 			{
 				color: 'primary',
 				variant: 'outline',
-				class: 'border-primary text-primary'
+				class: 'border-primary text-primary',
 			},
 			{
 				color: 'surface',
 				variant: 'outline',
-				class: 'border-surface-600'
+				class: 'border-surface-600',
 			},
 			{
 				color: 'info',
 				variant: 'outline',
-				class: 'border-info text-info'
+				class: 'border-info text-info',
 			},
 			{
 				color: 'success',
 				variant: 'outline',
-				class: 'border-success text-success'
+				class: 'border-success text-success',
 			},
 			{
 				color: 'warning',
 				variant: 'outline',
-				class: 'border-warning text-warning'
+				class: 'border-warning text-warning',
 			},
 			{
 				color: 'error',
 				variant: 'outline',
-				class: 'border-error text-error'
+				class: 'border-error text-error',
 			},
 
 			// SOLID
 			{
 				color: 'primary',
 				variant: 'solid',
-				class: 'bg-primary border-primary-600'
+				class: 'bg-primary border-primary-600',
 			},
 			{
 				color: 'surface',
 				variant: 'solid',
-				class: 'bg-surface-600 border-surface-700'
+				class: 'bg-surface-600 border-surface-700',
 			},
 			{
 				color: 'info',
 				variant: 'solid',
-				class: 'bg-info border-info-600'
+				class: 'bg-info border-info-600',
 			},
 			{
 				color: 'success',
 				variant: 'solid',
-				class: 'bg-success border-success-600'
+				class: 'bg-success border-success-600',
 			},
 			{
 				color: 'warning',
 				variant: 'solid',
-				class: 'bg-warning border-warning-600'
+				class: 'bg-warning border-warning-600',
 			},
 			{
 				color: 'error',
 				variant: 'solid',
-				class: 'bg-error border-error-600'
+				class: 'bg-error border-error-600',
 			},
 
 			// SOFT
 			{
 				color: 'primary',
 				variant: 'soft',
-				class: 'bg-primary-100 text-primary'
+				class: 'bg-primary-100 text-primary',
 			},
 			{
 				color: 'surface',
 				variant: 'soft',
-				class: 'bg-surface-100 text-surface-700'
+				class: 'bg-surface-100 text-surface-700',
 			},
 			{
 				color: 'info',
 				variant: 'soft',
-				class: 'bg-info-100 text-info'
+				class: 'bg-info-100 text-info',
 			},
 			{
 				color: 'success',
 				variant: 'soft',
-				class: 'bg-success-100 text-success'
+				class: 'bg-success-100 text-success',
 			},
 			{
 				color: 'warning',
 				variant: 'soft',
-				class: 'bg-warning-100 text-warning'
+				class: 'bg-warning-100 text-warning',
 			},
 			{
 				color: 'error',
 				variant: 'soft',
-				class: 'bg-error-100 text-error'
+				class: 'bg-error-100 text-error',
 			},
 
 			// SUBTLE
 			{
 				color: 'primary',
 				variant: 'subtle',
-				class: 'bg-primary-100 border-primary-200 text-primary'
+				class: 'bg-primary-100 border-primary-200 text-primary',
 			},
 			{
 				color: 'surface',
 				variant: 'subtle',
-				class: 'bg-surface-100 border-surface-200 text-surface-700'
+				class: 'bg-surface-100 border-surface-200 text-surface-700',
 			},
 			{
 				color: 'info',
 				variant: 'subtle',
-				class: 'bg-info-100 border-info-200 text-info'
+				class: 'bg-info-100 border-info-200 text-info',
 			},
 			{
 				color: 'success',
 				variant: 'subtle',
-				class: 'bg-success-100 border-success-200 text-success'
+				class: 'bg-success-100 border-success-200 text-success',
 			},
 			{
 				color: 'warning',
 				variant: 'subtle',
-				class: 'bg-warning-100 border-warning-200 text-warning'
+				class: 'bg-warning-100 border-warning-200 text-warning',
 			},
 			{
 				color: 'error',
 				variant: 'subtle',
-				class: 'bg-error-100 border-error-200 text-error'
-			}
-		]
+				class: 'bg-error-100 border-error-200 text-error',
+			},
+		],
 	})({ color, variant, size, class: [klass] })}
 >
 	{#if value}

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

@@ -1,11 +1,11 @@
-import type { PropColor } from '../index.js';
+import type { PropColor, PropVariant } from '../index.js';
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 export type KbdProps = {
     children?: Snippet;
     value?: string;
     color?: PropColor;
-    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    variant?: Exclude<PropVariant, 'none' | 'ghost'>;
     size?: 'sm' | 'md' | 'lg';
     class?: ClassNameValue;
 };

package/dist/components/pin-input.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import type { PropColor } from '../index.js';
+	import type { PropColor, PropVariant } from '../index.js';
 	import { onMount } from 'svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
@@ -7,7 +7,7 @@
 	export type PinInputProps = {
 		value?: number[] | string[];
 		color?: PropColor;
-		variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+		variant?: Omit<PropVariant, 'solid'>;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		length?: number;
 		autofocus?: boolean | number;
@@ -36,7 +36,7 @@
 		'Tab',
 		'Shift',
 		'Control',
-		'Meta'
+		'Meta',
 	];
 
 	let {
@@ -54,7 +54,7 @@
 		placeholder,
 		required,
 		type = 'text',
-		ui = {}
+		ui = {},
 	}: PinInputProps = $props();
 	const internal_id = $props.id();
 	let input_els = $state<HTMLInputElement[]>([]);
@@ -69,60 +69,60 @@
 					info: '',
 					success: '',
 					warning: '',
-					error: ''
+					error: '',
 				},
 				size: {
 					xs: { root: '', cell: 'size-6' },
 					sm: { root: '', cell: 'size-7' },
 					md: { root: '', cell: 'size-8' },
 					lg: { root: '', cell: 'size-9' },
-					xl: { root: '', cell: 'size-10' }
+					xl: { root: '', cell: 'size-10' },
 				},
 				variant: {
 					outline: {
-						cell: 'border border-surface-300 focus:(border-2)'
+						cell: 'border border-surface-300 focus:(border-2)',
 					},
 					soft: {
-						cell: 'bg-surface-50 hover:(bg-surface-100) focus:(bg-surface-100)'
+						cell: 'bg-surface-50 hover:bg-surface-100 focus:bg-surface-100',
 					},
 					subtle: { cell: 'border border-surface-300 bg-surface-100 focus:(border-2)' },
-					ghost: { cell: 'hover:(bg-surface-100) focus:(bg-surface-100)' },
-					none: { cell: '' }
-				}
+					ghost: { cell: 'hover:bg-surface-100 focus:bg-surface-100' },
+					none: { cell: '' },
+				},
 			},
 			compoundVariants: [
 				{
 					variant: ['outline', 'subtle'],
 					color: 'primary',
-					class: { cell: 'focus:(border-primary-500)' }
+					class: { cell: 'focus:border-primary-500' },
 				},
 				{
 					variant: ['outline', 'subtle'],
 					color: 'surface',
-					class: { cell: 'focus:(border-surface-900)' }
+					class: { cell: 'focus:border-surface-900' },
 				},
 				{
 					variant: ['outline', 'subtle'],
 					color: 'info',
-					class: { cell: 'focus:(border-info-500)' }
+					class: { cell: 'focus:border-info-500' },
 				},
 				{
 					variant: ['outline', 'subtle'],
 					color: 'success',
-					class: { cell: 'focus:(border-success-500)' }
+					class: { cell: 'focus:border-success-500' },
 				},
 				{
 					variant: ['outline', 'subtle'],
 					color: 'warning',
-					class: { cell: 'focus:(border-warning-500)' }
+					class: { cell: 'focus:border-warning-500' },
 				},
 				{
 					variant: ['outline', 'subtle'],
 					color: 'error',
-					class: { cell: 'focus:(border-error-500)' }
-				}
-			]
-		})({ size, color, variant, class: ui.root })
+					class: { cell: 'focus:border-error-500' },
+				},
+			],
+		})({ size, color, variant, class: ui.root }),
 	);
 
 	onMount(() => {

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

@@ -1,9 +1,9 @@
-import type { PropColor } from '../index.js';
+import type { PropColor, PropVariant } from '../index.js';
 import type { ClassNameValue } from 'tailwind-merge';
 export type PinInputProps = {
     value?: number[] | string[];
     color?: PropColor;
-    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    variant?: Omit<PropVariant, 'solid'>;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     length?: number;
     autofocus?: boolean | number;

package/dist/components/placeholder.svelte

@@ -8,7 +8,7 @@
 <svg
 	{...rest}
 	class={cx(
-		'inset-0 w-full stroke-surface/10 border border-dashed border-surface rounded-md',
+		'inset-0 w-full stroke-surface-elevated border border-dashed border-surface-accented rounded-md',
 		klass,
 	)}
 	fill="none"

package/dist/components/select.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import type { PropColor } from '../index.js';
+	import type { PropColor, PropVariant } from '../index.js';
 	import { Select } from 'bits-ui';
 	import type { Component, Snippet } from 'svelte';
 	import { tv } from 'tailwind-variants';
@@ -18,7 +18,7 @@
 		item?: Snippet<[{ item: SelectItem<T> }]>;
 		color?: PropColor;
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+		variant?: Exclude<PropVariant, 'solid'>;
 		highlight?: boolean;
 		placeholder?: string;
 	} & (

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

@@ -1,4 +1,4 @@
-import type { PropColor } from '../index.js';
+import type { PropColor, PropVariant } from '../index.js';
 import { Select } from 'bits-ui';
 import type { Component, Snippet } from 'svelte';
 export type SelectItem<T> = T | {
@@ -14,7 +14,7 @@ export type SelectProps<T> = {
     }]>;
     color?: PropColor;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    variant?: Exclude<PropVariant, 'solid'>;
     highlight?: boolean;
     placeholder?: string;
 } & ({

package/dist/components/seperator.svelte

@@ -0,0 +1,212 @@
+<script module lang="ts">
+	import { Icon, 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 'svelte';
+
+	export type SeperatorProps = {
+		label?: string | Snippet<[ClassNameValue]> | Component;
+		icon?: string | Component;
+		color?: PropColor;
+		type?: 'dashed' | 'solid' | 'dotted';
+		children?: Snippet;
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		orientation?: 'horizontal' | 'vertical';
+		ui?: {
+			root?: ClassNameValue;
+			border?: ClassNameValue;
+			icon?: ClassNameValue;
+			label?: ClassNameValue;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		label,
+		icon,
+		children,
+		color = 'primary',
+		type = 'solid',
+		size = 'xs',
+		orientation = 'horizontal',
+		ui = {},
+	}: SeperatorProps = $props();
+
+	const variants = $derived(
+		tv({
+			slots: {
+				root: 'flex items-center justify-center text-center',
+				border: '',
+				icon: 'shrink-0 size-5',
+				label: 'text-sm',
+			},
+			variants: {
+				type: {
+					solid: {
+						border: 'border-solid',
+					},
+					dashed: {
+						border: 'border-dashed',
+					},
+					dotted: {
+						border: 'border-dotted',
+					},
+				},
+				size: {
+					xs: {
+						root: 'gap-3',
+					},
+					sm: {
+						root: 'gap-3',
+					},
+					md: {
+						root: 'gap-4',
+					},
+					lg: {
+						root: 'gap-5',
+					},
+					xl: {
+						root: 'gap-5',
+					},
+				},
+				color: {
+					primary: {
+						border: 'border-primary',
+						label: 'text-primary',
+						icon: 'text-primary',
+					},
+					surface: {
+						border: 'border-surface',
+						label: 'text-surface',
+						icon: 'text-surface',
+					},
+					info: {
+						border: 'border-info',
+						label: 'text-info',
+						icon: 'text-info',
+					},
+					success: {
+						border: 'border-success',
+						label: 'text-success',
+						icon: 'text-success',
+					},
+					warning: {
+						border: 'border-warning',
+						label: 'text-warning',
+						icon: 'text-warning',
+					},
+					error: {
+						border: 'border-error',
+						label: 'text-error',
+						icon: 'text-error',
+					},
+				},
+				orientation: {
+					horizontal: {
+						root: 'w-full flex-row',
+						border: 'w-full',
+					},
+					vertical: {
+						root: 'h-full flex-col',
+						border: 'h-full',
+					},
+				},
+			},
+			compoundVariants: [
+				{
+					orientation: 'horizontal',
+					size: 'xs',
+					class: {
+						border: 'border-t',
+					},
+				},
+				{
+					orientation: 'horizontal',
+					size: 'sm',
+					class: {
+						border: 'border-t-2',
+					},
+				},
+				{
+					orientation: 'horizontal',
+					size: 'md',
+					class: {
+						border: 'border-t-3',
+					},
+				},
+				{
+					orientation: 'horizontal',
+					size: 'lg',
+					class: {
+						border: 'border-t-4',
+					},
+				},
+				{
+					orientation: 'horizontal',
+					size: 'xl',
+					class: {
+						border: 'border-t-5',
+					},
+				},
+				{
+					orientation: 'vertical',
+					size: 'xs',
+					class: {
+						border: 'border-s',
+					},
+				},
+				{
+					orientation: 'vertical',
+					size: 'sm',
+					class: {
+						border: 'border-s-2',
+					},
+				},
+				{
+					orientation: 'vertical',
+					size: 'md',
+					class: {
+						border: 'border-s-3',
+					},
+				},
+				{
+					orientation: 'vertical',
+					size: 'lg',
+					class: {
+						border: 'border-s-4',
+					},
+				},
+				{
+					orientation: 'vertical',
+					size: 'xl',
+					class: {
+						border: 'border-s-5',
+					},
+				},
+			],
+		})({ size, type, color, orientation }),
+	);
+</script>
+
+<div class={variants.root({ class: ui.root })}>
+	<span class={variants.border({ class: ui.border })}></span>
+
+	{#if icon || label || children}
+		{#if icon}
+			<Icon name={icon} class={variants.icon({})} />
+		{:else if typeof label === 'string' && label.length > 0}
+			<span class={variants.label({ class: ui.label })}>{label}</span>
+		{:else if isSnippet(label)}
+			{@render label()}
+		{:else if isComponent(label)}
+			{@const Label = label}
+			<Label class={variants.label({ class: ui.label })} />
+		{:else}
+			{@render children?.()}
+		{/if}
+
+		<span class={variants.border({ class: ui.border })}></span>
+	{/if}
+</div>

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

@@ -0,0 +1,22 @@
+import { type PropColor } from '../index.js';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import type { Component } from 'svelte';
+export type SeperatorProps = {
+    label?: string | Snippet<[ClassNameValue]> | Component;
+    icon?: string | Component;
+    color?: PropColor;
+    type?: 'dashed' | 'solid' | 'dotted';
+    children?: Snippet;
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    orientation?: 'horizontal' | 'vertical';
+    ui?: {
+        root?: ClassNameValue;
+        border?: ClassNameValue;
+        icon?: ClassNameValue;
+        label?: ClassNameValue;
+    };
+};
+declare const Seperator: Component<SeperatorProps, {}, "">;
+type Seperator = ReturnType<typeof Seperator>;
+export default Seperator;

package/dist/date.d.ts

@@ -0,0 +1 @@
+export * from '@internationalized/date';

package/dist/date.js

@@ -0,0 +1 @@
+export * from '@internationalized/date';

package/dist/index.d.ts

@@ -2,3 +2,5 @@ export * from './components/index.js';
 export * from './utilities.svelte.js';
 export type PropColor = 'primary' | 'surface' | 'info' | 'success' | 'warning' | 'error';
 export declare const COLORS: PropColor[];
+export type PropVariant = 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+export type PropSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/utilities.svelte.d.ts

@@ -22,3 +22,10 @@ export declare const isSnippet: (v: unknown) => v is Snippet;
  * @returns an array of dom rects.
  */
 export declare function useElementRects(nodes: MaybeGetter<HTMLElement[]>, options?: ElementSizeOptions): DOMRect[];
+/**
+ * Inject reactive style element in head.
+ * @param css string
+ */
+export declare function useStyle(css: MaybeGetter<string>): {
+    id: string;
+};

package/dist/utilities.svelte.js

@@ -45,3 +45,23 @@ export function useElementRects(nodes, options = {}) {
     });
     return rects;
 }
+let uisv_usestyle_id = 0;
+/**
+ * Inject reactive style element in head.
+ * @param css string
+ */
+export function useStyle(css) {
+    const id = `uisv_styletag_${++uisv_usestyle_id}`;
+    let el = $state();
+    $effect(() => {
+        if (!el) {
+            el = (document.getElementById(id) || document.createElement('style'));
+            if (!el.isConnected) {
+                el.id = id;
+                document.head.appendChild(el);
+            }
+        }
+        el.textContent = extract(css);
+    });
+    return { id };
+}