uisv 0.0.13 → 0.0.14

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

@@ -0,0 +1,54 @@
+import { type PropColor } from '../index.js';
+import type { Component, Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+import { Time } from '@internationalized/date';
+export { Time };
+export { default as InputTime } from './input-time.svelte';
+export type InputTimeProps = {
+    id?: string;
+    name?: string;
+    hourcycle?: 12 | 24;
+    max?: Time;
+    min?: Time;
+    /**
+     * 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?: Time;
+    icon?: string | Snippet | Component;
+    ui?: {
+        root?: ClassNameValue;
+        leading?: ClassNameValue;
+        icon?: ClassNameValue;
+        trailing?: ClassNameValue;
+        segment?: ClassNameValue;
+    };
+};
+declare const InputTime: Component<InputTimeProps, {}, "value">;
+type InputTime = ReturnType<typeof InputTime>;
+export default InputTime;

package/dist/components/input.svelte

@@ -0,0 +1,285 @@
+<script module lang="ts">
+	import { type PropColor, isComponent, isSnippet } from '../index.js';
+	import type { Component, Snippet } from 'svelte';
+	import type { SvelteHTMLElements } from 'svelte/elements';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { maska } from 'maska/svelte';
+	import { type MaskInputOptions } from 'maska';
+	import { tv } from 'tailwind-variants';
+
+	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;
+		};
+	};
+</script>
+
+<script lang="ts">
+	let {
+		type,
+		value = $bindable(),
+		color = 'primary',
+		variant = 'outline',
+		size = 'md',
+		icon,
+		iconposition,
+		disabled,
+		highlight,
+		leading,
+		loading,
+		loadingicon = 'i-lucide-loader-circle',
+		required,
+		trailing,
+		mask,
+		ui = {},
+		...rest
+	}: InputProps = $props();
+	const id = $props.id();
+
+	const variants = $derived(
+		tv({
+			slots: {
+				root: 'inline-flex items-center rounded transition-all ring ring-inset ring-transparent',
+				base: 'appearance-none outline-none placeholder:text-muted',
+				leading: 'text-muted',
+				trailing: 'text-muted',
+				icon: '',
+			},
+			variants: {
+				fieldGroup: {
+					horizontal: {
+						root: '',
+						base: '',
+					},
+					vertical: {
+						root: '',
+						base: '',
+					},
+				},
+				size: {
+					xs: {
+						base: 'px-2 py-1 text-xs gap-1',
+						leading: 'ps-2',
+						trailing: 'pe-2',
+						icon: 'size-4',
+					},
+					sm: {
+						base: 'px-2.5 py-1.5 text-xs gap-1.5',
+						leading: 'ps-2.5',
+						trailing: 'pe-2.5',
+						icon: 'size-4',
+					},
+					md: {
+						base: 'px-2.5 py-1.5 text-sm gap-1.5',
+						leading: 'ps-2.5',
+						trailing: 'pe-2.5',
+						icon: 'size-5',
+					},
+					lg: {
+						base: 'px-3 py-2 text-sm gap-2',
+						leading: 'ps-3',
+						trailing: 'pe-3',
+						icon: 'size-5',
+					},
+					xl: {
+						base: 'px-3 py-2 text-base gap-2',
+						leading: 'ps-3',
+						trailing: 'pe-3',
+						icon: 'size-6',
+					},
+				},
+				variant: {
+					outline: { root: 'ring ring-dimmed' },
+					soft: {
+						root: 'bg-surface-muted hover:bg-surface-elevated focus-within:bg-surface-elevated',
+					},
+					subtle: { root: 'ring ring-dimmed' },
+					ghost: { root: 'hover:bg-surface-elevated focus-within:bg-surface-elevated' },
+					none: { root: '' },
+				},
+				color: {
+					primary: { root: '' },
+					surface: { root: '' },
+					info: { root: '' },
+					success: { root: '' },
+					warning: { root: '' },
+					error: { root: '' },
+				},
+				leading: {
+					false: { leading: 'hidden' },
+				},
+				trailing: {
+					false: { trailing: 'hidden' },
+				},
+				loading: {
+					true: '',
+				},
+				highlight: {
+					true: '',
+				},
+				type: {
+					file: 'file:me-1.5 file:font-medium file:text-muted file:outline-none',
+				},
+			},
+			compoundVariants: [
+				{
+					color: 'primary',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-primary-500 ring-2)',
+					},
+				},
+				{
+					color: 'surface',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-surface-800 ring-2)',
+					},
+				},
+				{
+					color: 'info',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-info-500 ring-2)',
+					},
+				},
+				{
+					color: 'success',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-success-500 ring-2)',
+					},
+				},
+				{
+					color: 'warning',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-warning-500 ring-2)',
+					},
+				},
+				{
+					color: 'error',
+					variant: ['outline', 'subtle'],
+					class: {
+						root: 'focus-within:(ring-error-500 ring-2)',
+					},
+				},
+			],
+		})({
+			size,
+			color,
+			variant,
+			highlight,
+			loading,
+			leading: !!leading || (!!icon && iconposition === 'leading') || loading,
+			trailing: !!trailing || (!!icon && iconposition === 'trailing'),
+			type: type === 'file' ? 'file' : undefined,
+		}),
+	);
+</script>
+
+<div class={variants.root({ class: ui.root })}>
+	{#if leading || (icon && iconposition === 'leading') || loading}
+		{@const TrailingIcon = loading ? loadingicon : icon}
+
+		<span class={variants.leading({ class: ui.leading })}>
+			{#if !!leading && !loading}
+				{#if typeof leading === 'string'}
+					{leading}
+				{:else if isSnippet(leading)}
+					{@render leading()}
+				{:else if isComponent(leading)}
+					{@const Leading = leading}
+					<Leading />
+				{/if}
+			{:else if typeof TrailingIcon === 'string'}
+				<div
+					class={variants.icon({
+						class: [loading && 'animate-spin', TrailingIcon, ui.icon],
+					})}
+				></div>
+			{:else if isSnippet(TrailingIcon)}
+				{@render TrailingIcon()}
+			{:else if isComponent(TrailingIcon)}
+				<TrailingIcon class={variants.icon({ class: [ui.icon] })} />
+			{/if}
+		</span>
+	{/if}
+
+	<input
+		{id}
+		{type}
+		{...rest}
+		class={variants.base({ class: [ui.base] })}
+		{...rest}
+		use:maska={mask}
+	/>
+
+	{#if trailing || (icon && iconposition === 'trailing')}
+		<span class={variants.trailing({ class: ui.trailing })}>
+			{#if !!trailing}
+				{#if typeof trailing === 'string'}
+					{trailing}
+				{:else if isSnippet(trailing)}
+					{@render trailing()}
+				{:else if isComponent(trailing)}
+					{@const Trailing = trailing}
+					<Trailing />
+				{/if}
+			{:else if typeof icon === 'string'}
+				<div
+					class={variants.icon({
+						class: [icon, ui.icon],
+					})}
+				></div>
+			{:else if isSnippet(icon)}
+				{@render icon()}
+			{:else if isComponent(icon)}
+				{@const Icon = icon}
+				<Icon class={variants.icon({ class: [ui.icon] })} />
+			{/if}
+		</span>
+	{/if}
+</div>

package/dist/components/{input/index.d.ts → input.svelte.d.ts}

@@ -1,10 +1,8 @@
-import type { PropColor } from '../../index.js';
+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';
+import { type MaskInputOptions } from 'maska';
 export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
     name?: string;
     /**
@@ -52,3 +50,6 @@ export type InputProps = Omit<SvelteHTMLElements['input'], 'size'> & {
         trailing?: ClassNameValue;
     };
 };
+declare const Input: Component<InputProps, {}, "value">;
+type Input = ReturnType<typeof Input>;
+export default Input;

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/vite.d.ts

@@ -1,6 +1,7 @@
 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;
@@ -48,4 +49,4 @@ export type PluginOptions = {
      */
     icons?: Parameters<typeof presetIcons>[0];
 };
-export declare function uisv(options: PluginOptions): import("vite").Plugin<any>[][];
+export declare function uisv(options: PluginOptions): Plugin<any>[][];

package/dist/vite.js

@@ -3,8 +3,8 @@ import { transformerVariantGroup, transformerCompileClass, transformerDirectives
 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';
+import { dir, exists, write } from 'files';
+import { resolve } from 'node:path';
 export function uisv(options) {
     const _opts = defu(options, {
         colors: {
@@ -27,39 +27,18 @@ 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',
-    // 		},
-    // 	},
-    // 	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',
-    // 		},
-    // 	},
-    // });
+    const theme_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 = {}`));
+        },
+        resolveId(source, importer, options) {
+            if (source === '$build')
+                return resolve('node_modules/uisv/theme.js');
+        },
+    };
     return [
         uno_plugin({
             content: {
@@ -100,8 +79,6 @@ export function uisv(options) {
 						  background-color: var(--colors-inverted);
 						}
 
-
-
             .dark {
               ${variables}
             }
@@ -118,8 +95,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.14",
 	"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,71 @@
 	"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"
 		}
 	},
 	"peerDependencies": {
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^2.0.1",
-		"@eslint/js": "^9.39.2",
+		"@eslint/compat": "^2.0.2",
+		"@eslint/js": "^10.0.1",
 		"@iconify-json/logos": "^1.2.10",
-		"@iconify-json/lucide": "^1.2.84",
+		"@iconify-json/lucide": "^1.2.90",
 		"@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",
+		"@internationalized/date": "^3.11.0",
+		"@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",
+		"@types/node": "^25.2.3",
+		"@unocss/preset-web-fonts": "^66.6.0",
 		"@unocss/reset": "^66.6.0",
-		"@vitest/browser": "^4.0.17",
-		"bits-ui": "^2.15.4",
+		"@vitest/browser": "^4.0.18",
+		"bits-ui": "^2.15.5",
 		"carta-md": "^4.11.1",
-		"colortranslator": "^5.0.0",
 		"defu": "^6.1.4",
 		"doc-path": "^4.1.3",
-		"eslint": "^9.39.2",
+		"eslint": "^10.0.0",
 		"eslint-config-prettier": "^10.1.8",
-		"eslint-plugin-svelte": "^3.14.0",
+		"eslint-plugin-svelte": "^3.15.0",
 		"files": "^3.0.2",
-		"globals": "^16.5.0",
-		"maska": "^3.2.0",
-		"mdsvex": "^0.12.6",
+		"globals": "^17.3.0",
 		"mode-watcher": "^1.1.0",
-		"playwright": "^1.57.0",
-		"prettier": "^3.7.4",
+		"playwright": "^1.58.2",
+		"prettier": "^3.8.1",
 		"prettier-plugin-svelte": "^3.4.1",
-		"publint": "^0.3.16",
+		"publint": "^0.3.17",
 		"runed": "^0.37.1",
 		"scule": "^1.3.0",
-		"svelte": "^5.46.3",
-		"svelte-check": "^4.3.5",
+		"svelte": "^5.51.2",
+		"svelte-check": "^4.4.0",
 		"svelte-exmarkdown": "^5.0.2",
-		"tailwind-merge": "^3.4.0",
+		"tailwind-merge": "^3.4.1",
 		"tailwind-variants": "^3.2.2",
 		"theme-colors": "^0.1.0",
 		"typescript": "^5.9.3",
-		"typescript-eslint": "^8.53.0",
-		"unocss": "^66.5.12",
+		"typescript-eslint": "^8.55.0",
+		"unocss": "^66.6.0",
 		"unocss-preset-theme": "^0.14.1",
-		"unplugin-icons": "^22.5.0",
+		"unplugin-icons": "^23.0.1",
 		"vite": "^7.3.1",
-		"vitest": "^4.0.17",
-		"vitest-browser-svelte": "^2.0.1"
+		"vitest": "^4.0.18",
+		"vitest-browser-svelte": "^2.0.2"
+	},
+	"dependencies": {
+		"colortranslator": "^5.0.0",
+		"maska": "^3.2.0"
 	},
 	"keywords": [
 		"svelte",
 		"ui"
-	],
-	"pnpm": {
-		"onlyBuiltDependencies": [
-			"esbuild"
-		]
-	}
+	]
 }