uisv 0.0.13 → 0.0.15

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

@@ -4,7 +4,6 @@
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
 	import { type Component, type Snippet } from 'svelte';
-	import Icon from '@iconify/svelte';
 	import { ElementRect } from 'runed';
 
 	export type TabItem =
@@ -241,6 +240,6 @@
 	{:else if isComponent(IconProp)}
 		<IconProp class={classes.icon({ class: ui.icon })} />
 	{:else if typeof IconProp === 'string'}
-		<Icon icon={IconProp} class={classes.icon({ class: ui.icon })} />
+		<div class={classes.icon({ class: [IconProp, ui.icon] })}></div>
 	{/if}
 {/snippet}

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 };
+}

package/dist/vite.d.ts

@@ -10,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',

package/dist/vite.js

@@ -1,14 +1,25 @@
 import uno_plugin from 'unocss/vite';
-import { transformerVariantGroup, transformerCompileClass, transformerDirectives, presetWebFonts, presetIcons, presetWind4, definePreset, } from 'unocss';
+import { transformerVariantGroup, transformerCompileClass, transformerDirectives, presetWebFonts, presetIcons, presetWind4, } from 'unocss';
 import {} from '@unocss/preset-web-fonts';
 import { defu } from 'defu';
 import { getColors } from 'theme-colors';
-import { presetTheme } from 'unocss-preset-theme';
-import { evaluatePath } from 'doc-path';
 export function uisv(options) {
     const _opts = defu(options, {
         colors: {
-            primary: 'orange',
+            primary: {
+                DEFAULT: '#FF3E00',
+                50: '#FFECE5',
+                100: '#FFD8CC',
+                200: '#FFB299',
+                300: '#FF8B66',
+                400: '#FF6533',
+                500: '#FF3E00',
+                600: '#CC3200',
+                700: '#992500',
+                800: '#661900',
+                900: '#330C00',
+                950: '#1A0600',
+            },
             surface: 'neutral',
             info: 'blue',
             success: 'green',
@@ -27,39 +38,17 @@ export function uisv(options) {
             },
         },
     });
-    // const semantics_preset = semantics({
-    // 	colors: _opts.colors,
-    // 	light: {
-    // 		base: 'surface.700',
-    // 		dimmed: 'surface.400',
-    // 		muted: 'surface.500',
-    // 		toned: 'surface.600',
-    // 		highlighted: 'surface.900',
-    // 		inverted: 'white',
-    // 		surface: {
-    // 			base: 'white',
-    // 			muted: 'surface.50',
-    // 			elevated: 'surface.100',
-    // 			accented: 'surface.200',
-    // 			inverted: 'surface.900',
-    // 		},
+    // const theme_plugin: Plugin = {
+    // 	name: 'vite-plugin-uisv',
+    // 	enforce: 'pre',
+    // 	async configResolved() {
+    // 		const path = resolve('node_modules/uisv/theme.js');
+    // 		console.log(await write(path, `export const button = {}`));
     // 	},
-    // 	dark: {
-    // 		base: 'surface.700',
-    // 		dimmed: 'surface.400',
-    // 		muted: 'surface.500',
-    // 		toned: 'surface.600',
-    // 		highlighted: 'surface.900',
-    // 		inverted: 'white',
-    // 		surface: {
-    // 			base: 'surface.900',
-    // 			muted: 'surface.800',
-    // 			elevated: 'surface.800',
-    // 			accented: 'surface.700',
-    // 			inverted: 'white',
-    // 		},
+    // 	resolveId(source, importer, options) {
+    // 		if (source === '$build') return resolve('node_modules/uisv/theme.js');
     // 	},
-    // });
+    // };
     return [
         uno_plugin({
             content: {
@@ -100,8 +89,6 @@ export function uisv(options) {
 						  background-color: var(--colors-inverted);
 						}
 
-
-
             .dark {
               ${variables}
             }
@@ -118,8 +105,6 @@ export function uisv(options) {
                 }),
                 presetWebFonts(_opts.fonts),
                 presetIcons(_opts.icons),
-                // semantics_preset,
-                // theme_preset,
             ],
             transformers: [transformerVariantGroup(), transformerCompileClass(), transformerDirectives()],
             extendTheme: (theme) => {

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "uisv",
-	"version": "0.0.13",
+	"version": "0.0.15",
 	"description": "ui library for the rest of us",
 	"license": "MIT",
 	"repository": "ui-sv/uisv",
 	"homepage": "https://uisv.pages.dev",
 	"scripts": {
 		"dev": "vite dev",
-		"build": "vite build && prepack",
+		"build": "vite build && npm run prepack",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"prepack": "svelte-kit sync && svelte-package && publint",
@@ -32,74 +32,66 @@
 	"exports": {
 		".": {
 			"types": "./dist/index.d.ts",
-			"svelte": "./dist/index.js"
+			"svelte": "./dist/index.js",
+			"default": "./dist/index.js"
 		},
 		"./vite": {
 			"types": "./dist/vite.d.ts",
-			"svelte": "./dist/vite.js"
+			"svelte": "./dist/vite.js",
+			"default": "./dist/vite.js"
+		},
+		"./date": {
+			"types": "./dist/date.d.ts",
+			"svelte": "./dist/date.js",
+			"default": "./dist/date.js"
 		}
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^2.0.1",
-		"@eslint/js": "^9.39.2",
-		"@iconify-json/logos": "^1.2.10",
-		"@iconify-json/lucide": "^1.2.84",
-		"@iconify-json/solar": "^1.2.5",
-		"@iconify/svelte": "^5.2.1",
-		"@internationalized/date": "^3.10.1",
-		"@sveltejs/adapter-auto": "^7.0.0",
-		"@sveltejs/kit": "^2.49.4",
+		"@eslint/compat": "^2.0.2",
+		"@eslint/js": "^10.0.1",
+		"@iconify-json/lucide": "^1.2.90",
+		"@sveltejs/adapter-auto": "^7.0.1",
+		"@sveltejs/kit": "^2.52.0",
 		"@sveltejs/package": "^2.5.7",
 		"@sveltejs/vite-plugin-svelte": "^6.2.4",
-		"@tailwindcss/vite": "^4.1.18",
-		"@types/node": "^25.0.7",
-		"@unocss/preset-web-fonts": "^66.5.12",
-		"@unocss/reset": "^66.6.0",
-		"@vitest/browser": "^4.0.17",
-		"bits-ui": "^2.15.4",
-		"carta-md": "^4.11.1",
+		"@types/node": "^25.2.3",
+		"@vitest/browser": "^4.0.18",
+		"eslint": "^10.0.0",
+		"eslint-config-prettier": "^10.1.8",
+		"eslint-plugin-svelte": "^3.15.0",
+		"globals": "^17.3.0",
+		"playwright": "^1.58.2",
+		"prettier": "^3.8.1",
+		"prettier-plugin-svelte": "^3.4.1",
+		"publint": "^0.3.17",
+		"svelte": "^5.51.2",
+		"svelte-check": "^4.4.0",
+		"typescript": "^5.9.3",
+		"typescript-eslint": "^8.55.0",
+		"vite": "^7.3.1",
+		"vitest": "^4.0.18",
+		"vitest-browser-svelte": "^2.0.2"
+	},
+	"dependencies": {
+		"@internationalized/date": "^3.11.0",
+		"@unocss/preset-web-fonts": "^66.6.0",
+		"bits-ui": "^2.16.2",
 		"colortranslator": "^5.0.0",
 		"defu": "^6.1.4",
-		"doc-path": "^4.1.3",
-		"eslint": "^9.39.2",
-		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.14.0",
-		"files": "^3.0.2",
-		"globals": "^16.5.0",
 		"maska": "^3.2.0",
-		"mdsvex": "^0.12.6",
 		"mode-watcher": "^1.1.0",
-		"playwright": "^1.57.0",
-		"prettier": "^3.7.4",
-		"prettier-plugin-svelte": "^3.4.1",
-		"publint": "^0.3.16",
 		"runed": "^0.37.1",
 		"scule": "^1.3.0",
-		"svelte": "^5.46.3",
-		"svelte-check": "^4.3.5",
-		"svelte-exmarkdown": "^5.0.2",
-		"tailwind-merge": "^3.4.0",
+		"tailwind-merge": "^3.5.0",
 		"tailwind-variants": "^3.2.2",
 		"theme-colors": "^0.1.0",
-		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.53.0",
-		"unocss": "^66.5.12",
-		"unocss-preset-theme": "^0.14.1",
-		"unplugin-icons": "^22.5.0",
-		"vite": "^7.3.1",
-		"vitest": "^4.0.17",
-		"vitest-browser-svelte": "^2.0.1"
+		"unocss": "^66.6.0"
 	},
 	"keywords": [
 		"svelte",
 		"ui"
-	],
-	"pnpm": {
-		"onlyBuiltDependencies": [
-			"esbuild"
-		]
-	}
+	]
 }

package/dist/components/button/button.svelte

@@ -1,105 +0,0 @@
-<script lang="ts">
-	// import { FORM_LOADING_CONTEXT_KEY } from '../../utils/keys.js';
-	import { isSnippet, type ButtonProps, BUTTON_VARIANTS } from '../../index.js';
-
-	// let form_loading = getContext<{ value: boolean } | undefined>(FORM_LOADING_CONTEXT_KEY);
-	let {
-		ref = $bindable(),
-		size = 'md',
-		variant = 'solid',
-		color = 'primary',
-		iconposition = 'left',
-		children,
-		// active,
-		// activecolor,
-		// activevariant,
-		block,
-		label,
-		loadingauto,
-		onclick,
-		ui = {},
-		disabled,
-		href,
-		icon,
-		loading,
-		loadingicon,
-		target,
-		type,
-	}: ButtonProps = $props();
-
-	let internal_loading = $state(false);
-	const is_loading = $derived.by(() => {
-		if (loading) return true;
-		if (loadingauto) return internal_loading;
-		return false;
-	});
-
-	const classes = $derived(
-		BUTTON_VARIANTS({ variant, color, size, block, disabled: disabled || is_loading }),
-	);
-
-	const only_icon = $derived(!(children || label) && !!icon);
-
-	async function onClickWrapper(event: MouseEvent) {
-		if (!onclick) return;
-		internal_loading = true;
-
-		await onclick(event);
-
-		internal_loading = false;
-	}
-</script>
-
-{#if href}
-	<a
-		{href}
-		{target}
-		class={classes.base({
-			class: [only_icon ? 'px-0 aspect-square justify-center' : '', 'cursor-pointer', ui.base],
-		})}
-		onclick={onClickWrapper}
-	>
-		{@render Content()}
-	</a>
-{:else}
-	<button
-		{type}
-		disabled={disabled || is_loading}
-		class={classes.base({
-			class: [only_icon ? 'px-0 aspect-square justify-center' : '', ui.base],
-		})}
-		onclick={onClickWrapper}
-	>
-		{@render Content()}
-	</button>
-{/if}
-
-{#snippet Content()}
-	{#if iconposition === 'left'}
-		{@render Icon()}
-	{/if}
-
-	{#if label}
-		{label}
-	{:else}
-		{@render children?.()}
-	{/if}
-
-	{#if iconposition !== 'left'}
-		{@render Icon()}
-	{/if}
-{/snippet}
-
-{#snippet Icon()}
-	{@const IconCom = is_loading ? loadingicon || '-ph-lucide-loader-circle' : icon}
-
-	{#if IconCom}
-		{#if typeof IconCom === 'string'}
-			<div class={classes.icon({ class: [is_loading && 'animate-spin', IconCom, ui.icon] })}></div>
-		{:else if isSnippet(IconCom)}
-			{@render IconCom()}
-		{:else}
-			<IconCom />
-		{/if}
-	{/if}
-{/snippet}

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

@@ -1,4 +0,0 @@
-import { type ButtonProps } from '../../index.js';
-declare const Button: import("svelte").Component<ButtonProps, {}, "ref">;
-type Button = ReturnType<typeof Button>;
-export default Button;

package/dist/components/button/index.js

@@ -1,4 +0,0 @@
-import {} from 'svelte';
-import {} from '../../index.js';
-export * from './style.js';
-export { default as Button } from './button.svelte';