uisv 0.0.7 → 0.0.10

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "uisv",
-	"version": "0.0.7",
+	"version": "0.0.10",
 	"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 && npm run prepack",
+		"build": "vite build && bun prepack",
 		"preview": "vite preview",
 		"prepare": "svelte-kit sync || echo ''",
 		"prepack": "svelte-kit sync && svelte-package && publint",
@@ -43,48 +43,59 @@
 		"svelte": "^5.0.0"
 	},
 	"devDependencies": {
-		"@eslint/compat": "^1.2.5",
-		"@eslint/js": "^9.22.0",
-		"@iconify-json/logos": "^1.2.9",
-		"@iconify-json/lucide": "^1.2.68",
-		"@iconify-json/solar": "^1.2.4",
-		"@sveltejs/adapter-auto": "^6.0.0",
-		"@sveltejs/kit": "^2.22.0",
-		"@sveltejs/package": "^2.0.0",
-		"@sveltejs/vite-plugin-svelte": "^6.0.0",
-		"@tailwindcss/vite": "^4.1.13",
-		"@types/node": "^22",
-		"@unocss/preset-web-fonts": "^66.5.2",
-		"@unocss/reset": "^66.5.1",
-		"@vitest/browser": "^3.2.3",
-		"bits-ui": "^2.11.0",
+		"@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",
+		"@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",
+		"colortranslator": "^5.0.0",
 		"defu": "^6.1.4",
-		"eslint": "^9.22.0",
-		"eslint-config-prettier": "^10.0.1",
-		"eslint-plugin-svelte": "^3.0.0",
-		"globals": "^16.0.0",
-		"mdsvex": "^0.12.3",
+		"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.53.0",
-		"prettier": "^3.4.2",
-		"prettier-plugin-svelte": "^3.3.3",
-		"publint": "^0.3.2",
+		"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.0.0",
-		"svelte-check": "^4.0.0",
-		"tailwind-merge": "^3.3.1",
-		"tailwind-variants": "^3.1.1",
+		"svelte": "^5.46.3",
+		"svelte-check": "^4.3.5",
+		"svelte-exmarkdown": "^5.0.2",
+		"tailwind-merge": "^3.4.0",
+		"tailwind-variants": "^3.2.2",
 		"theme-colors": "^0.1.0",
-		"typescript": "^5.0.0",
-		"typescript-eslint": "^8.20.0",
-		"unocss": "^66.5.1",
-		"unplugin-icons": "^22.3.0",
-		"vite": "^7.0.4",
-		"vitest": "^3.2.3",
-		"vitest-browser-svelte": "^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"
 	},
 	"keywords": [
-		"svelte"
+		"svelte",
+		"ui"
 	],
 	"pnpm": {
 		"onlyBuiltDependencies": [

package/dist/components/accordion.svelte

@@ -1,108 +0,0 @@
-<script module lang="ts">
-	import { Accordion } from 'bits-ui';
-	import type { Component, Snippet } from 'svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-
-	export type AccordionItem = {
-		label: string;
-		icon?: string | Snippet | Component;
-		trailingicon?: string | Snippet | Component;
-		content: string;
-		value?: string;
-		disabled?: boolean;
-	};
-	export type AccordionProps = {
-		value?: string | string[];
-		items: AccordionItem[];
-		collapsible?: boolean;
-		disabled?: boolean;
-		type?: 'single' | 'multiple';
-		trailingicon?: string | Snippet | Component;
-		leading?: Snippet<[{ item: AccordionItem; index: number; open: boolean }]>;
-		default?: Snippet<[{ item: AccordionItem; index: number; open: boolean }]>;
-		trailing?: Snippet<[{ item: AccordionItem; index: number; open: boolean }]>;
-		content?: Snippet<[{ item: AccordionItem; index: number; open: boolean }]>;
-		body?: Snippet<[{ item: AccordionItem; index: number; open: boolean }]>;
-		ui?: {
-			root?: ClassNameValue;
-			item?: ClassNameValue;
-			header?: ClassNameValue;
-			trigger?: ClassNameValue;
-			content?: ClassNameValue;
-			body?: ClassNameValue;
-			leadingicon?: ClassNameValue;
-			trailingicon?: ClassNameValue;
-			label?: ClassNameValue;
-		};
-	};
-</script>
-
-<script lang="ts">
-	let {
-		value = $bindable(),
-		items,
-		collapsible = true,
-		disabled,
-		type = 'single',
-		trailingicon = 'i-lucide-baret-down',
-		leading,
-		default: defau,
-		trailing,
-		content,
-		body,
-		ui = {}
-	}: AccordionProps = $props();
-	const classes = $derived(
-		tv({
-			slots: {
-				root: 'w-full',
-				item: 'border-b border-default last:border-b-0',
-				header: 'flex',
-				trigger:
-					'group flex-1 flex items-center gap-1.5 font-medium text-sm py-3.5 focus-visible:outline-primary min-w-0',
-				content:
-					'data-[state=open]:animate-[accordion-down_200ms_ease-out] data-[state=closed]:animate-[accordion-up_200ms_ease-out] overflow-hidden focus:outline-none',
-				body: 'text-sm pb-3.5',
-				leadingIcon: 'shrink-0 size-5',
-				trailingIcon:
-					'shrink-0 size-5 ms-auto group-data-[state=open]:rotate-180 transition-transform duration-200',
-				label: 'text-start break-words'
-			},
-			variants: {
-				disabled: {
-					true: {
-						trigger: 'cursor-not-allowed opacity-75'
-					}
-				}
-			}
-		})({
-			disabled
-		})
-	);
-</script>
-
-<Accordion.Root
-	class={classes.root({ class: ui.root })}
-	type="multiple"
-	bind:value={
-		() => {
-			if (!value) return;
-			if (Array.isArray(value)) return value;
-			return [value];
-		},
-		(val) => {
-			if (!val) return (value = val);
-			value = type === 'single' ? val[0] : val;
-		}
-	}
->
-	{#each items as item, idx (idx)}
-		<Accordion.Item value="item-1">
-			<Accordion.Header>
-				<Accordion.Trigger>{item.label}</Accordion.Trigger>
-			</Accordion.Header>
-			<Accordion.Content>This is the collapsible content for this section.</Accordion.Content>
-		</Accordion.Item>
-	{/each}
-</Accordion.Root>

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

@@ -1,58 +0,0 @@
-import { Accordion } from 'bits-ui';
-import type { Component, Snippet } from 'svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-export type AccordionItem = {
-    label: string;
-    icon?: string | Snippet | Component;
-    trailingicon?: string | Snippet | Component;
-    content: string;
-    value?: string;
-    disabled?: boolean;
-};
-export type AccordionProps = {
-    value?: string | string[];
-    items: AccordionItem[];
-    collapsible?: boolean;
-    disabled?: boolean;
-    type?: 'single' | 'multiple';
-    trailingicon?: string | Snippet | Component;
-    leading?: Snippet<[{
-        item: AccordionItem;
-        index: number;
-        open: boolean;
-    }]>;
-    default?: Snippet<[{
-        item: AccordionItem;
-        index: number;
-        open: boolean;
-    }]>;
-    trailing?: Snippet<[{
-        item: AccordionItem;
-        index: number;
-        open: boolean;
-    }]>;
-    content?: Snippet<[{
-        item: AccordionItem;
-        index: number;
-        open: boolean;
-    }]>;
-    body?: Snippet<[{
-        item: AccordionItem;
-        index: number;
-        open: boolean;
-    }]>;
-    ui?: {
-        root?: ClassNameValue;
-        item?: ClassNameValue;
-        header?: ClassNameValue;
-        trigger?: ClassNameValue;
-        content?: ClassNameValue;
-        body?: ClassNameValue;
-        leadingicon?: ClassNameValue;
-        trailingicon?: ClassNameValue;
-        label?: ClassNameValue;
-    };
-};
-declare const Accordion: Component<AccordionProps, {}, "value">;
-type Accordion = ReturnType<typeof Accordion>;
-export default Accordion;

package/dist/components/alert.svelte

@@ -1,272 +0,0 @@
-<script module lang="ts">
-	import { type PropColor, isSnippet } from '../index.js';
-	import type { Component, Snippet } from 'svelte';
-	import Button, { type ButtonProps } from './button.svelte';
-	import type { ClassNameValue } from 'tailwind-merge';
-	import { tv } from 'tailwind-variants';
-	import { defu } from 'defu';
-
-	export type AlertProps = {
-		title?: string | Snippet;
-		description?: string | Snippet;
-		icon?: string | Snippet | Component;
-		color?: PropColor;
-		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
-		position?: 'bottom' | 'right';
-		actions?: ButtonProps[];
-		close?: boolean | ButtonProps;
-		ui?: {
-			base?: ClassNameValue;
-			icon?: ClassNameValue;
-			description?: ClassNameValue;
-			title?: ClassNameValue;
-		};
-		onclose?: () => void | Promise<void>;
-	};
-</script>
-
-<script lang="ts">
-	let {
-		title,
-		description,
-		close,
-		icon,
-		actions = [],
-		color = 'primary',
-		variant = 'solid',
-		position = 'bottom',
-		ui = {},
-		onclose = () => {}
-	}: AlertProps = $props();
-
-	const close_props = $derived.by(() => {
-		return defu(typeof close === 'boolean' ? {} : close, {
-			icon: 'i-lucide-x',
-			variant: 'link',
-			color: variant === 'solid' ? 'secondary' : color,
-			ui: {
-				icon: variant === 'solid' ? 'text-white' : ''
-			}
-		} as ButtonProps);
-	});
-	const classes = $derived.by(() =>
-		tv({
-			slots: {
-				base: 'flex gap-2 font-sans p-4 rounded-lg',
-				icon: 'pi size-6',
-				actions: '',
-				description: 'text-opacity-50 text-sm',
-				title: 'font-medium'
-			},
-			variants: {
-				color: {
-					primary: '',
-					secondary: '',
-					info: '',
-					success: '',
-					warning: '',
-					error: ''
-				},
-				variant: {
-					solid: {
-						base: 'text-white',
-						description: 'text-white/90'
-					},
-					outline: 'border',
-					soft: '',
-					subtle: 'border'
-				},
-				position: {
-					right: {
-						base: ''
-					},
-					bottom: {
-						base: 'flex-col'
-					}
-				}
-			},
-			compoundVariants: [
-				{
-					variant: 'solid',
-					color: 'primary',
-					class: 'bg-primary-500'
-				},
-				{
-					variant: 'solid',
-					color: 'secondary',
-					class: 'bg-secondary-900'
-				},
-				{
-					variant: 'solid',
-					color: 'info',
-					class: 'bg-info-500'
-				},
-				{
-					variant: 'solid',
-					color: 'success',
-					class: 'bg-success-500'
-				},
-				{
-					variant: 'solid',
-					color: 'warning',
-					class: 'bg-warning-500'
-				},
-				{
-					variant: 'solid',
-					color: 'error',
-					class: 'bg-error-500'
-				},
-
-				{
-					variant: 'outline',
-					color: 'primary',
-					class: 'border-primary-300 text-primary-500'
-				},
-				{
-					variant: 'outline',
-					color: 'secondary',
-					class: 'border-secondary-300 text-secondary-900'
-				},
-				{
-					variant: 'outline',
-					color: 'info',
-					class: 'border-info-300 text-info-500'
-				},
-				{
-					variant: 'outline',
-					color: 'success',
-					class: 'border-success-300 text-success-500'
-				},
-				{
-					variant: 'outline',
-					color: 'warning',
-					class: 'border-warning-300 text-warning-500'
-				},
-				{
-					variant: 'outline',
-					color: 'error',
-					class: 'border-error-300 text-error-500'
-				},
-
-				{
-					variant: 'soft',
-					color: 'primary',
-					class: 'bg-primary-100 text-primary-500'
-				},
-				{
-					variant: 'soft',
-					color: 'secondary',
-					class: 'bg-secondary-50 text-secondary-900'
-				},
-				{
-					variant: 'soft',
-					color: 'info',
-					class: 'bg-info-50 text-info-500'
-				},
-				{
-					variant: 'soft',
-					color: 'success',
-					class: 'bg-success-50 text-success-500'
-				},
-				{
-					variant: 'soft',
-					color: 'warning',
-					class: 'bg-warning-50 text-warning-500'
-				},
-				{
-					variant: 'soft',
-					color: 'error',
-					class: 'bg-error-50 text-error-500'
-				},
-
-				{
-					variant: 'subtle',
-					color: 'primary',
-					class: 'bg-primary-100 text-primary-500 border-primary-300'
-				},
-				{
-					variant: 'subtle',
-					color: 'secondary',
-					class: 'bg-secondary-50 text-secondary-900 border-secondary-300'
-				},
-				{
-					variant: 'subtle',
-					color: 'info',
-					class: 'bg-info-50 text-info-500 border-info-300'
-				},
-				{
-					variant: 'subtle',
-					color: 'success',
-					class: 'bg-success-50 text-success-500 border-success-300'
-				},
-				{
-					variant: 'subtle',
-					color: 'warning',
-					class: 'bg-warning-50 text-warning-500 border-warning-300'
-				},
-				{
-					variant: 'subtle',
-					color: 'error',
-					class: 'bg-error-50 text-error-500  border-error-300'
-				}
-			]
-		})({ color, variant, position })
-	);
-</script>
-
-<div class={classes.base({ class: [position === 'bottom' ? '' : 'flex', ui.base] })}>
-	<div class="flex gap-2 flex-grow">
-		{#if icon}
-			<div class="size-6">
-				{#if typeof icon === 'string'}
-					<div class={classes.icon({ class: [icon] })}></div>
-				{:else if isSnippet(icon)}
-					{@render icon()}
-				{:else}
-					{@const Icon = icon}
-					<Icon />
-				{/if}
-			</div>
-		{/if}
-
-		<div class="space-y-1 flex-grow">
-			{#if title}
-				<div class={classes.title({ class: [ui.title] })}>
-					{#if isSnippet(title)}
-						{@render title()}
-					{:else}
-						{title}
-					{/if}
-				</div>
-			{/if}
-
-			{#if description}
-				<div class={classes.description({ class: [ui.title] })}>
-					{#if isSnippet(description)}
-						{@render description()}
-					{:else}
-						{description}
-					{/if}
-				</div>
-			{/if}
-		</div>
-
-		{#if close}
-			<div>
-				<Button {...close_props} onclick={onclose} />
-			</div>
-		{/if}
-	</div>
-
-	{#if actions.length > 0}
-		<div class="flex gap-2 items-center pl-8">
-			{#each actions as action (action.label)}
-				<Button
-					{...defu(action, {
-						size: 'xs'
-					} as ButtonProps)}
-				/>
-			{/each}
-		</div>
-	{/if}
-</div>

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

@@ -1,24 +0,0 @@
-import { type PropColor } from '../index.js';
-import type { Component, Snippet } from 'svelte';
-import { type ButtonProps } from './button.svelte';
-import type { ClassNameValue } from 'tailwind-merge';
-export type AlertProps = {
-    title?: string | Snippet;
-    description?: string | Snippet;
-    icon?: string | Snippet | Component;
-    color?: PropColor;
-    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
-    position?: 'bottom' | 'right';
-    actions?: ButtonProps[];
-    close?: boolean | ButtonProps;
-    ui?: {
-        base?: ClassNameValue;
-        icon?: ClassNameValue;
-        description?: ClassNameValue;
-        title?: ClassNameValue;
-    };
-    onclose?: () => void | Promise<void>;
-};
-declare const Alert: Component<AlertProps, {}, "">;
-type Alert = ReturnType<typeof Alert>;
-export default Alert;