uisv 0.0.14 → 0.0.16

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/components/slider.svelte

@@ -35,7 +35,7 @@
 		step,
 		min,
 		max,
-		ui = {}
+		ui = {},
 	}: SliderProps<T> = $props();
 
 	const default_value = $derived.by(() => {
@@ -51,7 +51,7 @@
 		},
 		set(v: number[]) {
 			value = (v?.length !== 1 ? v : v[0]) as T;
-		}
+		},
 	});
 	const thumbs = $derived(slider_value.get()?.length ?? 1);
 	const classes = $derived.by(() =>
@@ -59,85 +59,85 @@
 			slots: {
 				root: [
 					'relative w-full flex rounded-full bg-neutral-300',
-					orientation === 'horizontal' ? 'items-center' : 'justify-center mx-1'
+					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'
+					orientation === 'horizontal' ? 'h-full' : 'w-full',
 				],
 				thumb: 'bg-white rounded-full border-2 outline-none transition',
-				tick: ''
+				tick: '',
 			},
 			variants: {
 				color: {
 					primary: {
 						root: '',
 						range: 'bg-primary-500',
-						thumb: 'border-primary-500'
+						thumb: 'border-primary-500',
 					},
 					surface: {
 						range: ['bg-neutral-900'],
-						thumb: 'border-neutral-900'
+						thumb: 'border-neutral-900',
 					},
 					info: {
 						range: ['bg-info-500'],
-						thumb: 'border-info-500'
+						thumb: 'border-info-500',
 					},
 					success: {
 						range: ['bg-success-500'],
-						thumb: 'border-success-500'
+						thumb: 'border-success-500',
 					},
 					warning: {
 						range: ['bg-warning-500'],
-						thumb: 'border-warning-500'
+						thumb: 'border-warning-500',
 					},
 					error: {
 						range: ['bg-error-500'],
-						thumb: 'border-error-500'
-					}
+						thumb: 'border-error-500',
+					},
 				},
 				size: {
 					xs: {
 						root: [orientation === 'horizontal' ? 'h-1.5' : ''],
 						thumb: 'size-4',
-						tick: 'size-2.5'
+						tick: 'size-2.5',
 					},
 					sm: {
 						root: [orientation === 'horizontal' ? 'h-1.75' : ''],
 						thumb: 'size-4.5',
-						tick: 'size-3'
+						tick: 'size-3',
 					},
 					md: {
 						root: [orientation === 'horizontal' ? 'h-2' : 'w-2 h-48'],
 						thumb: 'size-5',
-						tick: 'size-3.5'
+						tick: 'size-3.5',
 					},
 					lg: {
 						root: [orientation === 'horizontal' ? 'h-2.5' : ''],
 						thumb: 'size-5.5',
-						tick: 'size-4'
+						tick: 'size-4',
 					},
 					xl: {
 						root: [orientation === 'horizontal' ? 'h-3' : 'w-3'],
 						thumb: 'size-6',
-						tick: 'size-4.5'
-					}
+						tick: 'size-4.5',
+					},
 				},
 				orientation: {
 					horizontal: {
 						root: '',
 						thumb: '',
-						tick: ''
+						tick: '',
 					},
 					vertical: {
 						root: '',
 						thumb: '',
-						tick: ''
-					}
-				}
+						tick: '',
+					},
+				},
 			},
-			compoundVariants: []
-		})({ color, size, orientation })
+			compoundVariants: [],
+		})({ color, size, orientation }),
 	);
 </script>
 
@@ -161,7 +161,7 @@
 					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)'
+						'data-[active=""]:opacity-100 group-hover:opacity-100',
 					]}
 				>
 					{slider_value.get()[index]}

package/dist/components/switch.svelte

@@ -1,9 +1,8 @@
 <script module lang="ts">
-	import { type PropColor, isComponent, isSnippet } from '../index.js';
-	import type { Snippet } from 'svelte';
+	import { type PropColor, Icon } from '../index.js';
+	import type { Snippet, Component } from 'svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
-	import type { Component } from 'vitest-browser-svelte';
 
 	export type SwitchProps = {
 		value?: boolean;
@@ -11,9 +10,9 @@
 		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 		disabled?: boolean;
 		loading?: boolean;
-		loadingicon?: string | Snippet | Component;
-		uncheckedicon?: string | Snippet | Component;
-		checkedicon?: string | Snippet | Component;
+		loadingicon?: string | Component;
+		uncheckedicon?: string | Component;
+		checkedicon?: string | Component;
 		label?: string | Snippet;
 		description?: string | Snippet;
 		required?: boolean;
@@ -121,18 +120,15 @@
 		data-state={value ? 'checked' : 'unchecked'}
 		class={classes.container({ class: [loading && 'cursor-not-allowed', ui.thumb] })}
 		onclick={() => {
-			console.log('click');
-			if (loading) return;
+			if (loading || disabled) return;
 			value = !value;
 		}}
 	>
 		<span data-state={value ? 'checked' : 'unchecked'} class={classes.thumb({ class: ui.thumb })}>
-			{@render Icon(uncheckedicon, [(loading || value) && 'opacity-0'])}
-			{@render Icon(checkedicon, [(loading || !value) && 'opacity-0'])}
-			{@render Icon(loadingicon || 'i-lucide-loader-circle', [
-				'animate-spin',
-				!loading && 'opacity-0',
-			])}
+			<Icon
+				name={loading ? loadingicon : value ? checkedicon : uncheckedicon}
+				class={classes.icon({ class: [loading && 'animate-spin'] })}
+			/>
 		</span>
 	</button>
 
@@ -163,18 +159,6 @@
 	{/if}
 </div>
 
-{#snippet Icon(ico?: SwitchProps['checkedicon'], icon_class?: ClassNameValue)}
-	<div class={['absolute', icon_class]}>
-		{#if typeof ico === 'string'}
-			<div
-				data-state={value ? 'checked' : 'unchecked'}
-				class={classes.icon({ class: [ico] })}
-			></div>
-		{:else if isSnippet(ico)}
-			{@render ico()}
-		{:else if isComponent(ico)}
-			{@const Iconn = ico}
-			<Iconn />
-		{/if}
-	</div>
+{#snippet icon(ico?: SwitchProps['checkedicon'], icon_class?: ClassNameValue)}
+	<div class={['absolute', icon_class]}></div>
 {/snippet}

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

@@ -1,16 +1,15 @@
 import { type PropColor } from '../index.js';
-import type { Snippet } from 'svelte';
+import type { Snippet, Component } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
-import type { Component } from 'vitest-browser-svelte';
 export type SwitchProps = {
     value?: boolean;
     color?: PropColor;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
     disabled?: boolean;
     loading?: boolean;
-    loadingicon?: string | Snippet | Component;
-    uncheckedicon?: string | Snippet | Component;
-    checkedicon?: string | Snippet | Component;
+    loadingicon?: string | Component;
+    uncheckedicon?: string | Component;
+    checkedicon?: string | Component;
     label?: string | Snippet;
     description?: string | Snippet;
     required?: boolean;
@@ -22,6 +21,6 @@ export type SwitchProps = {
         description?: ClassNameValue;
     };
 };
-declare const Switch: import("svelte").Component<SwitchProps, {}, "value">;
+declare const Switch: Component<SwitchProps, {}, "value">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;

package/dist/components/tabs.svelte

@@ -70,7 +70,7 @@
 			slots: {
 				root: '',
 				list: 'flex relative p-1',
-				item: 'flex items-center justify-center text-muted data-[state="inactive"]:hover:(text-highlighted) font-medium z-1 transition-all',
+				item: 'flex items-center justify-center text-muted data-[state="inactive"]:hover:text-highlighted font-medium z-1 transition-all',
 				icon: '',
 				content: 'mt-2',
 				indicator: 'absolute z-0 transition-all duration-200 rounded-md w---width',
@@ -79,7 +79,7 @@
 				variant: {
 					pill: {
 						list: 'bg-surface-elevated rounded-lg',
-						item: 'flex-1 data-[state="active"]:(text-inverted)',
+						item: 'flex-1 data-[state="active"]:text-inverted',
 						trigger: 'flex-1',
 						indicator: 'rounded-md shadow-xs',
 					},

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

@@ -1,4 +1,3 @@
 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 * from './types.js';

package/dist/index.js

@@ -1,3 +1,3 @@
 export * from './components/index.js';
 export * from './utilities.svelte.js';
-export const COLORS = ['primary', 'surface', 'info', 'success', 'warning', 'error'];
+export * from './types.js';

package/dist/types.d.ts

@@ -0,0 +1,3 @@
+export type PropColor = 'primary' | 'surface' | 'info' | 'success' | 'warning' | 'error';
+export type PropVariant = 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+export type PropSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utilities.svelte.d.ts

@@ -5,13 +5,13 @@ import { type MaybeGetter, type ElementSizeOptions } from 'runed';
  * @param v - The value to check
  * @returns true if the value is a component, false otherwise
  */
-export declare const isComponent: (v: unknown) => v is Component;
+export declare function isComponent(v: unknown): v is Component;
 /**
  * Checks if a value is a Svelte snippet
  * @param v - The value to check
  * @returns true if the value is a snippet, false otherwise
  */
-export declare const isSnippet: (v: unknown) => v is Snippet;
+export declare function isSnippet(v: unknown): v is Snippet;
 /**
  * Returns a reactive value holding the dom rect of `node`s.
  *
@@ -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

@@ -4,17 +4,17 @@ import { extract, useMutationObserver, useResizeObserver, } from 'runed';
  * @param v - The value to check
  * @returns true if the value is a component, false otherwise
  */
-export const isComponent = (v) => {
+export function isComponent(v) {
     return typeof v === 'function' || (typeof v === 'object' && v !== null && !('$$render' in v));
-};
+}
 /**
  * Checks if a value is a Svelte snippet
  * @param v - The value to check
  * @returns true if the value is a snippet, false otherwise
  */
-export const isSnippet = (v) => {
+export function isSnippet(v) {
     return typeof v === 'object' && v !== null && '$$render' in v;
-};
+}
 /**
  * Returns a reactive value holding the dom rect of `node`s.
  *
@@ -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 };
+}

package/dist/vite.d.ts

@@ -1,7 +1,6 @@
 import { presetIcons } from 'unocss';
 import { type WebFontsOptions } from '@unocss/preset-web-fonts';
 import type { PropColor } from './index.js';
-import type { Plugin } from 'vite';
 export type Colors = Record<string, string | Record<string, string>>;
 export type NestedObject<K extends string, V> = {
     [key in K]: NestedObject<K, V> | V;
@@ -11,7 +10,7 @@ export type PluginOptions = {
      * Colors as UnoCSS color name, hex color, or UnoCSS theme color object
      * @example
      * {
-     *  primary: 'orange',
+     *  primary: '#FF3E00',
      *  surface: 'neutral',
      *  info: '#00F',
      *  success: '#0F0',
@@ -49,4 +48,4 @@ export type PluginOptions = {
      */
     icons?: Parameters<typeof presetIcons>[0];
 };
-export declare function uisv(options: PluginOptions): Plugin<any>[][];
+export declare function uisv(options: PluginOptions): import("vite").Plugin<any>[][];