uisv 0.0.12 → 0.0.14

package/dist/components/tabs.svelte

@@ -0,0 +1,245 @@
+<script module lang="ts">
+	import { Tabs } from 'bits-ui';
+	import { isComponent, isSnippet, useElementRects, type PropColor } from '../index.js';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+	import { type Component, type Snippet } from 'svelte';
+	import { ElementRect } from 'runed';
+
+	export type TabItem =
+		| string
+		| {
+				label: string;
+				icon?: string | Component | Snippet;
+				iconposition?: 'before' | 'after';
+				content?: string | Component;
+		  };
+
+	export type TabsProps = {
+		value?: number;
+		items: TabItem[];
+		color?: PropColor;
+		variant?: 'link' | 'pill';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		disabled?: boolean;
+		orientation?: 'vertical' | 'horizontal';
+		ui?: {
+			root?: ClassNameValue;
+			item?: ClassNameValue;
+			list?: ClassNameValue;
+			content?: ClassNameValue;
+			icon?: ClassNameValue;
+			indicator?: ClassNameValue;
+		};
+		[k: `content_${string}`]: Snippet<[{ item: TabItem; value: number }]>;
+	};
+</script>
+
+<script lang="ts">
+	let {
+		value = $bindable(0),
+		items = [],
+		color = 'primary',
+		variant = 'pill',
+		size = 'md',
+		disabled,
+		orientation = 'horizontal',
+		ui = {},
+		...rest
+	}: TabsProps = $props();
+
+	let container_el = $state<HTMLElement | null>(null);
+	const container_rect = new ElementRect(() => container_el);
+	let item_els = $state<HTMLElement[]>([]);
+	const rects = useElementRects(() => item_els);
+	const rect = $derived.by(() => {
+		const result = { w: 0, h: 0, l: 0, t: 0 };
+
+		if (rects[value]) {
+			result.w = rects[value].width;
+			result.l = rects[value].left - container_rect.left;
+			result.h = rects[value].height;
+			result.t = rects[value].top - container_rect.top;
+		}
+
+		return result;
+	});
+
+	const classes = $derived.by(() =>
+		tv({
+			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',
+				icon: '',
+				content: 'mt-2',
+				indicator: 'absolute z-0 transition-all duration-200 rounded-md w---width',
+			},
+			variants: {
+				variant: {
+					pill: {
+						list: 'bg-surface-elevated rounded-lg',
+						item: 'flex-1 data-[state="active"]:(text-inverted)',
+						trigger: 'flex-1',
+						indicator: 'rounded-md shadow-xs',
+					},
+					link: {
+						list: 'border-b border-surface-accented',
+						item: '',
+						indicator: 'rounded-full -bottom-px',
+						trigger: 'focus:outline-none',
+					},
+				},
+				color: {
+					primary: {
+						item: 'data-[variant="link"]:data-[state="active"]:text-primary-500',
+						indicator: 'bg-primary-500',
+					},
+					surface: {
+						item: 'data-[variant="link"]:data-[state="active"]:text-surface-500',
+						indicator: 'bg-surface-900',
+					},
+					info: {
+						item: 'data-[variant="link"]:data-[state="active"]:text-info-500',
+						indicator: 'bg-info-500',
+					},
+					success: {
+						item: 'data-[variant="link"]:data-[state="active"]:text-success-500',
+						indicator: 'bg-success-500',
+					},
+					warning: {
+						item: 'data-[variant="link"]:data-[state="active"]:text-warning-500',
+						indicator: 'bg-warning-500',
+					},
+					error: {
+						item: 'data-[variant="link"]:data-[state="active"]:text-error-500',
+						indicator: 'bg-error-500',
+					},
+				},
+				size: {
+					xs: {
+						list: 'text-xs',
+						item: 'min-h-6 gap-1 px-2',
+						icon: 'size-4',
+					},
+					sm: {
+						list: 'text-xs',
+						item: 'min-h-7 gap-1 px-3',
+						icon: 'size-4',
+					},
+					md: {
+						list: 'text-sm',
+						item: 'min-h-8 gap-2 px-4',
+						icon: 'size-5',
+					},
+					lg: {
+						list: 'text-sm',
+						item: 'min-h-9 gap-2 px-4',
+						icon: 'size-5',
+					},
+					xl: {
+						list: '',
+						item: 'min-h-10 gap-4 px-5',
+						icon: 'size-6',
+					},
+				},
+				orientation: {
+					horizontal: {
+						indicator: 'h-px left---left',
+					},
+					vertical: {
+						root: '',
+						list: 'flex-col',
+						indicator: 'h-(--height) top-(--top)',
+					},
+				},
+			},
+			compoundVariants: [
+				{ size: 'xs', variant: 'pill', class: { indicator: 'h-6' } },
+				{ size: 'sm', variant: 'pill', class: { indicator: 'h-7' } },
+				{ size: 'md', variant: 'pill', class: { indicator: 'h-8' } },
+				{ size: 'lg', variant: 'pill', class: { indicator: 'h-9' } },
+				{ size: 'xl', variant: 'pill', class: { indicator: 'h-10' } },
+				{
+					size: 'xs',
+					variant: 'link',
+					orientation: 'vertical',
+					class: { indicator: 'h-6' },
+				},
+				{ size: 'sm', variant: 'link', orientation: 'vertical', class: { indicator: 'h-7' } },
+				{ size: 'md', variant: 'link', orientation: 'vertical', class: { indicator: 'h-8' } },
+				{ size: 'lg', variant: 'link', orientation: 'vertical', class: { indicator: 'h-9' } },
+				{ size: 'xl', variant: 'link', orientation: 'vertical', class: { indicator: 'h-10' } },
+				{
+					orientation: 'vertical',
+					variant: 'link',
+					class: { list: 'border-b-0 border-l', indicator: 'w-px -left-px' },
+				},
+			],
+		})({ color, size, orientation, variant }),
+	);
+</script>
+
+<Tabs.Root
+	{disabled}
+	bind:value={() => value.toString(), (v) => (value = parseInt(v))}
+	class={classes.root({ class: ui.root })}
+	{orientation}
+>
+	<Tabs.List bind:ref={container_el} class={classes.list({ class: ui.list })}>
+		{#each items as item, idx (idx)}
+			{@const label = typeof item === 'string' ? item : item.label}
+
+			<Tabs.Trigger
+				bind:ref={
+					() => {
+						if (item_els[idx]) return item_els[idx];
+						if (typeof document !== 'undefined') return document.createElement('div');
+					},
+					(v) => {
+						if (v) item_els[idx] = v;
+					}
+				}
+				value={idx.toString()}
+				class={classes.item({ class: ui.item })}
+				data-variant={variant}
+			>
+				{@render RenderIcon(typeof item === 'string' ? undefined : item.icon)}
+
+				{label}
+			</Tabs.Trigger>
+		{/each}
+
+		<span
+			class={classes.indicator({ class: ui.indicator })}
+			style:--width="{rect.w}px"
+			style:--left="{rect.l}px"
+			style:--height="{rect.w}px"
+			style:--top="{rect.t}px"
+		></span>
+	</Tabs.List>
+	{#each items as item, idx (idx)}
+		{#if typeof item === 'object' && item.content}
+			{@const Content = item.content}
+			<Tabs.Content value={idx.toString()} class={classes.content({ class: ui.content })}>
+				{#if `content_${idx}` in rest}
+					{@render rest[`content_${idx}`]({ item, value: idx })}
+				{:else if typeof Content === 'string'}
+					{Content}
+				{:else if isComponent(Content)}
+					<Content />
+				{/if}
+			</Tabs.Content>
+		{/if}
+	{/each}
+</Tabs.Root>
+
+{#snippet RenderIcon(IconProp?: string | Component | Snippet)}
+	{#if isSnippet(IconProp)}
+		{@render IconProp()}
+	{:else if isComponent(IconProp)}
+		<IconProp class={classes.icon({ class: ui.icon })} />
+	{:else if typeof IconProp === 'string'}
+		<div class={classes.icon({ class: [IconProp, ui.icon] })}></div>
+	{/if}
+{/snippet}

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

@@ -0,0 +1,34 @@
+import { Tabs } from 'bits-ui';
+import { type PropColor } from '../index.js';
+import type { ClassNameValue } from 'tailwind-merge';
+import { type Component, type Snippet } from 'svelte';
+export type TabItem = string | {
+    label: string;
+    icon?: string | Component | Snippet;
+    iconposition?: 'before' | 'after';
+    content?: string | Component;
+};
+export type TabsProps = {
+    value?: number;
+    items: TabItem[];
+    color?: PropColor;
+    variant?: 'link' | 'pill';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    disabled?: boolean;
+    orientation?: 'vertical' | 'horizontal';
+    ui?: {
+        root?: ClassNameValue;
+        item?: ClassNameValue;
+        list?: ClassNameValue;
+        content?: ClassNameValue;
+        icon?: ClassNameValue;
+        indicator?: ClassNameValue;
+    };
+    [k: `content_${string}`]: Snippet<[{
+        item: TabItem;
+        value: number;
+    }]>;
+};
+declare const Tabs: Component<TabsProps, {}, "value">;
+type Tabs = ReturnType<typeof Tabs>;
+export default Tabs;

package/dist/index.d.ts

@@ -0,0 +1,4 @@
+export * from './components/index.js';
+export * from './utilities.svelte.js';
+export type PropColor = 'primary' | 'surface' | 'info' | 'success' | 'warning' | 'error';
+export declare const COLORS: PropColor[];

package/dist/index.js

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

package/dist/utilities.svelte.d.ts

@@ -0,0 +1,24 @@
+import type { Component, Snippet } from 'svelte';
+import { type MaybeGetter, type ElementSizeOptions } from 'runed';
+/**
+ * Checks if a value is a Svelte component
+ * @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;
+/**
+ * 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;
+/**
+ * Returns a reactive value holding the dom rect of `node`s.
+ *
+ * Accepts an `options` object with the following properties:
+ * - `initialSize`: The initial size of the element. Defaults to `{ width: 0, height: 0 }`.
+ * - `box`: The box model to use. Can be either `"content-box"` or `"border-box"`. Defaults to `"border-box"`.
+ *
+ * @returns an array of dom rects.
+ */
+export declare function useElementRects(nodes: MaybeGetter<HTMLElement[]>, options?: ElementSizeOptions): DOMRect[];

package/dist/utilities.svelte.js

@@ -0,0 +1,47 @@
+import { extract, useMutationObserver, useResizeObserver, } from 'runed';
+/**
+ * Checks if a value is a Svelte component
+ * @param v - The value to check
+ * @returns true if the value is a component, false otherwise
+ */
+export const 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) => {
+    return typeof v === 'object' && v !== null && '$$render' in v;
+};
+/**
+ * Returns a reactive value holding the dom rect of `node`s.
+ *
+ * Accepts an `options` object with the following properties:
+ * - `initialSize`: The initial size of the element. Defaults to `{ width: 0, height: 0 }`.
+ * - `box`: The box model to use. Can be either `"content-box"` or `"border-box"`. Defaults to `"border-box"`.
+ *
+ * @returns an array of dom rects.
+ */
+export function useElementRects(nodes, options = {}) {
+    const rects = $state(extract(nodes).map((v) => v.getBoundingClientRect()));
+    const elements = $derived(extract(nodes));
+    const update = () => {
+        if (!elements || elements.length === 0)
+            return;
+        elements.forEach((el, idx) => (rects[idx] = el.getBoundingClientRect()));
+    };
+    $effect(() => {
+        const stops = [];
+        elements.forEach((v) => {
+            stops.push(useResizeObserver(() => v, update, { window: options.window }).stop);
+            stops.push(useMutationObserver(() => v, update, {
+                attributeFilter: ['style', 'class'],
+                window: options.window,
+            }).stop);
+        });
+        return () => stops.forEach((v) => v());
+    });
+    return rects;
+}

package/dist/vite.d.ts

@@ -0,0 +1,52 @@
+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;
+};
+export type PluginOptions = {
+    /**
+     * Colors as UnoCSS color name, hex color, or UnoCSS theme color object
+     * @example
+     * {
+     *  primary: 'orange',
+     *  surface: 'neutral',
+     *  info: '#00F',
+     *  success: '#0F0',
+     *  warning: 'FF0',
+     *  error: {
+     *    50: '#fef2f2';
+     *    100: '#fee2e2';
+     *    200: '#fecaca';
+     *    300: '#fca5a5';
+     *    400: '#f87171';
+     *    500: '#ef4444';
+     *    600: '#dc2626';
+     *    700: '#b91c1c';
+     *    800: '#991b1b';
+     *    900: '#7f1d1d';
+     *    950: '#450a0a';
+     *  }
+     * }
+     */
+    colors?: Partial<Record<PropColor, string | Record<number, string>>>;
+    /**
+     * UnoCSS theme object for shared configuration between rules
+     */
+    theme?: object;
+    /**
+     * Options for the UnoCSS web fonts preset
+     */
+    fonts?: WebFontsOptions;
+    /**
+     * Corner radius for every* component
+     */
+    radius?: number;
+    /**
+     * Options for the UnoCSS icon preset
+     */
+    icons?: Parameters<typeof presetIcons>[0];
+};
+export declare function uisv(options: PluginOptions): Plugin<any>[][];

package/dist/vite.js

@@ -0,0 +1,132 @@
+import uno_plugin from 'unocss/vite';
+import { transformerVariantGroup, transformerCompileClass, transformerDirectives, presetWebFonts, presetIcons, presetWind4, definePreset, } from 'unocss';
+import {} from '@unocss/preset-web-fonts';
+import { defu } from 'defu';
+import { getColors } from 'theme-colors';
+import { dir, exists, write } from 'files';
+import { resolve } from 'node:path';
+export function uisv(options) {
+    const _opts = defu(options, {
+        colors: {
+            primary: 'orange',
+            surface: 'neutral',
+            info: 'blue',
+            success: 'green',
+            warning: 'yellow',
+            error: 'red',
+        },
+        fonts: {
+            fonts: {
+                sans: 'Public Sans:400,500,600',
+            },
+        },
+        icons: {},
+        theme: {
+            radius: {
+                base: `${options.radius || 0.375}rem`,
+            },
+        },
+    });
+    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: {
+                pipeline: {
+                    include: [
+                        // the default
+                        /\.(vue|svelte|[jt]sx|vine.ts|mdx?|astro|elm|php|phtml|marko|html)($|\?)/,
+                        // include js/ts files
+                        'src/**/*.{js,ts}',
+                    ],
+                },
+            },
+            theme: _opts.theme,
+            preflights: [
+                {
+                    getCSS({ theme }) {
+                        if (!('colors' in theme) || typeof theme.colors !== 'object')
+                            return;
+                        const colors = theme.colors;
+                        if (typeof colors.surface !== 'object')
+                            return '';
+                        const variables = `
+              --colors-DEFAULT: ${colors.surface['200']};
+      				--colors-dimmed: ${colors.surface['500']};
+      				--colors-muted: ${colors.surface['400']};
+      				--colors-toned: ${colors.surface['300']};
+      				--colors-highlighted: white;
+      				--colors-inverted: ${colors.surface['900']};
+
+      				--colors-surface-DEFAULT: ${colors.surface['900']};
+      				--colors-surface-muted: ${colors.surface['800']};
+      				--colors-surface-elevated: ${colors.surface['800']};
+      				--colors-surface-accented: ${colors.surface['700']};
+      				--colors-surface-inverted: white;
+            `;
+                        return `
+						body {
+						  background-color: var(--colors-inverted);
+						}
+
+            .dark {
+              ${variables}
+            }
+            `;
+                    },
+                },
+            ],
+            presets: [
+                presetWind4({
+                    dark: 'media',
+                    preflights: {
+                        reset: true,
+                    },
+                }),
+                presetWebFonts(_opts.fonts),
+                presetIcons(_opts.icons),
+            ],
+            transformers: [transformerVariantGroup(), transformerCompileClass(), transformerDirectives()],
+            extendTheme: (theme) => {
+                if (!('colors' in theme) || typeof theme.colors !== 'object')
+                    theme.colors = {};
+                const colors = theme.colors;
+                for (const [color, value] of Object.entries(_opts.colors)) {
+                    if (typeof value !== 'string') {
+                        colors[color] = value;
+                        continue;
+                    }
+                    const in_theme = colors[value];
+                    colors[color] = in_theme ? in_theme : getColors(value);
+                }
+                if (typeof colors.surface === 'object') {
+                    colors['DEFAULT'] = colors.surface['700'];
+                    colors['dimmed'] = colors.surface['400'];
+                    colors['muted'] = colors.surface['500'];
+                    colors['toned'] = colors.surface['600'];
+                    colors['highlighted'] = colors.surface['900'];
+                    colors['inverted'] = 'white';
+                    colors['surface'] = defu(colors.surface, {
+                        DEFAULT: 'white',
+                        muted: colors.surface['50'],
+                        elevated: colors.surface['100'],
+                        accented: colors.surface['200'],
+                        inverted: colors.surface['900'],
+                    });
+                }
+                if (theme.colors)
+                    theme.colors = colors;
+            },
+        }),
+    ];
+}

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "uisv",
-	"version": "0.0.12",
+	"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 && bun 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"
-		]
-	}
+	]
 }