uisv 0.0.5 → 0.0.7

package/README.md

@@ -1,3 +1,6 @@
+> [!WARNING]
+> This project is heavily WIP
+
 # uisv
 
 ui library for the rest of us

package/dist/components/accordion.svelte

@@ -0,0 +1,108 @@
+<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

@@ -0,0 +1,58 @@
+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,12 +1,10 @@
 <script module lang="ts">
-	import type { PropColor } from '../types.js';
+	import { type PropColor, isSnippet } from '../index.js';
 	import type { Component, Snippet } from 'svelte';
-	import type { ButtonProps } from './button.svelte';
+	import Button, { type ButtonProps } from './button.svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
-	import { isSnippet } from '../utils/common.js';
 	import { defu } from 'defu';
-	import Button from './button.svelte';
 
 	export type AlertProps = {
 		title?: string | Snippet;

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

@@ -1,6 +1,6 @@
-import type { PropColor } from '../types.js';
+import { type PropColor } from '../index.js';
 import type { Component, Snippet } from 'svelte';
-import type { ButtonProps } from './button.svelte';
+import { type ButtonProps } from './button.svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 export type AlertProps = {
     title?: string | Snippet;

package/dist/components/badge.svelte

@@ -19,7 +19,7 @@
 <script lang="ts">
 	import { tv } from 'tailwind-variants';
 	import { isSnippet } from '../utils/common.js';
-	import type { PropColor } from '../types.js';
+	import type { PropColor } from '../index.js';
 	import type { ClassNameValue } from 'tailwind-merge';
 
 	let {

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

@@ -12,7 +12,7 @@ export type BadgeProps = {
         icon?: ClassNameValue;
     };
 };
-import type { PropColor } from '../types.js';
+import type { PropColor } from '../index.js';
 import type { ClassNameValue } from 'tailwind-merge';
 declare const Badge: Component<BadgeProps, {}, "">;
 type Badge = ReturnType<typeof Badge>;

package/dist/components/banner.svelte

@@ -1,13 +1,11 @@
 <script module lang="ts">
-	import type { PropColor } from '../types.js';
+	import { isSnippet, type PropColor } from '../index.js';
 	import type { Component, Snippet } from 'svelte';
-	import type { ButtonProps } from './button.svelte';
+	import Button, { type ButtonProps } from './button.svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
-	import { isSnippet } from '../utils/common.js';
 	import { defu } from 'defu';
 	import { useId } from 'bits-ui';
-	import Button from './button.svelte';
 
 	export type BannerProps = {
 		title: string | Snippet;

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

@@ -1,6 +1,6 @@
-import type { PropColor } from '../types.js';
+import { type PropColor } from '../index.js';
 import type { Component, Snippet } from 'svelte';
-import type { ButtonProps } from './button.svelte';
+import { type ButtonProps } from './button.svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 export type BannerProps = {
     title: string | Snippet;

package/dist/components/button.svelte

@@ -1,5 +1,9 @@
 <script lang="ts" module>
-	export type ButtonVariant = 'link' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost';
+	// import { FORM_LOADING_CONTEXT_KEY } from '../utils/keys.js';
+	import { type Component, type Snippet } from 'svelte';
+	import { tv } from 'tailwind-variants';
+	import { type PropColor, isSnippet } from '../index.js';
+	import type { ClassNameValue } from 'tailwind-merge';
 
 	export type ButtonProps = {
 		/** The underlying DOM element being rendered. You can bind to this to get a reference to the element. */
@@ -30,7 +34,7 @@
 		/**
 		 * @defaultValue 'solid'
 		 */
-		variant?: ButtonVariant;
+		variant?: 'link' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost';
 		// activevariant?: ButtonVariant;
 		/**
 		 * @defaultValue 'md'
@@ -42,21 +46,14 @@
 		loadingauto?: boolean;
 		onclick?: (event: MouseEvent) => void | Promise<void>;
 		ui?: {
-			base?: ClassValue;
-			icon?: ClassValue;
+			base?: ClassNameValue;
+			icon?: ClassNameValue;
 		};
 		children?: Snippet;
 	};
 </script>
 
 <script lang="ts">
-	// import { FORM_LOADING_CONTEXT_KEY } from '../utils/keys.js';
-	import { type Component, type Snippet } from 'svelte';
-	import { isSnippet } from '../utils/common.js';
-	import { tv } from 'tailwind-variants';
-	import type { ClassValue } from 'svelte/elements';
-	import type { PropColor } from '../types.js';
-
 	// let form_loading = getContext<{ value: boolean } | undefined>(FORM_LOADING_CONTEXT_KEY);
 	let {
 		ref = $bindable(),
@@ -93,7 +90,7 @@
 		tv({
 			slots: {
 				icon: '',
-				base: 'transition flex items-center font-sans'
+				base: 'transition flex-inline items-center font-sans'
 			},
 			variants: {
 				color: {
@@ -126,7 +123,8 @@
 					true: 'w-full'
 				},
 				disabled: {
-					true: 'cursor-not-allowed'
+					true: 'cursor-not-allowed',
+					false: 'cursor-pointer'
 				}
 			},
 			compoundVariants: [
@@ -333,7 +331,9 @@
 	<a
 		{href}
 		{target}
-		class={[classes.base(), !children && icon ? 'px-0 aspect-square' : '', ui.base]}
+		class={classes.base({
+			class: [!children && icon ? 'px-0 aspect-square justify-center' : '', ui.base]
+		})}
 		onclick={onClickWrapper}
 	>
 		{@render Content()}
@@ -342,7 +342,9 @@
 	<button
 		{type}
 		disabled={disabled || is_loading}
-		class={[classes.base(), !children && icon ? 'px-0 aspect-square' : '', ui.base]}
+		class={classes.base({
+			class: [!children && icon ? 'px-0 aspect-square justify-center' : '', ui.base]
+		})}
 		onclick={onClickWrapper}
 	>
 		{@render Content()}
@@ -370,7 +372,9 @@
 
 	{#if IconCom}
 		{#if typeof IconCom === 'string'}
-			<div class={['pi', IconCom, is_loading ? 'animate-spin' : '', classes.icon(), ui.icon]}></div>
+			<div
+				class={classes.icon({ class: ['pi', IconCom, is_loading && 'animate-spin', ui.icon] })}
+			></div>
 		{:else if isSnippet(IconCom)}
 			{@render IconCom()}
 		{:else}

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

@@ -1,4 +1,6 @@
-export type ButtonVariant = 'link' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost';
+import { type Component, type Snippet } from 'svelte';
+import { type PropColor } from '../index.js';
+import type { ClassNameValue } from 'tailwind-merge';
 export type ButtonProps = {
     /** The underlying DOM element being rendered. You can bind to this to get a reference to the element. */
     ref?: HTMLButtonElement | HTMLAnchorElement;
@@ -26,7 +28,7 @@ export type ButtonProps = {
     /**
      * @defaultValue 'solid'
      */
-    variant?: ButtonVariant;
+    variant?: 'link' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost';
     /**
      * @defaultValue 'md'
      */
@@ -37,14 +39,11 @@ export type ButtonProps = {
     loadingauto?: boolean;
     onclick?: (event: MouseEvent) => void | Promise<void>;
     ui?: {
-        base?: ClassValue;
-        icon?: ClassValue;
+        base?: ClassNameValue;
+        icon?: ClassNameValue;
     };
     children?: Snippet;
 };
-import { type Component, type Snippet } from 'svelte';
-import type { ClassValue } from 'svelte/elements';
-import type { PropColor } from '../types.js';
 declare const Button: Component<ButtonProps, {}, "ref">;
 type Button = ReturnType<typeof Button>;
 export default Button;

package/dist/components/checkbox.svelte

@@ -1,6 +1,5 @@
 <script module lang="ts">
-	import type { PropColor } from '../types.js';
-	import { isComponent, isSnippet } from '../utils/common.js';
+	import { type PropColor, isComponent, isSnippet } from '../index.js';
 	import type { Snippet } from 'svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';

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

@@ -1,4 +1,4 @@
-import type { PropColor } from '../types.js';
+import { type PropColor } from '../index.js';
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { Component } from 'vitest-browser-svelte';

package/dist/components/checkboxgroup.svelte

@@ -1,10 +1,9 @@
 <script module lang="ts">
-	import { isComponent, isSnippet } from '../utils/common.js';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
 	import { Checkbox } from './index.js';
 	import type { Component, Snippet } from 'svelte';
-	import type { PropColor } from '../types.js';
+	import { type PropColor, isComponent, isSnippet } from '../index.js';
 
 	/* eslint @typescript-eslint/no-explicit-any: 0 */
 

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

@@ -1,6 +1,6 @@
 import type { ClassNameValue } from 'tailwind-merge';
 import type { Component, Snippet } from 'svelte';
-import type { PropColor } from '../types.js';
+import { type PropColor } from '../index.js';
 export type CheckboxGroupProps = {
     color?: PropColor;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';

package/dist/components/chip.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import type { PropColor } from '../types.js';
+	import type { PropColor } from '../index.js';
 	import type { Snippet } from 'svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';

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

@@ -1,4 +1,4 @@
-import type { PropColor } from '../types.js';
+import type { PropColor } from '../index.js';
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 export type ChipProps = {

package/dist/components/h1.svelte

@@ -0,0 +1,28 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type H1Props = {
+		children: Snippet;
+		ui?: { root?: ClassNameValue };
+	};
+</script>
+
+<script lang="ts">
+	const { children, ui = {} }: H1Props = $props();
+
+	const classes = $derived(
+		tv({
+			variants: {
+				slots: {
+					root: 'text-4xl text-highlighted font-bold mb-8 scroll-mt-[calc(45px+var(--ui-header-height))] lg:scroll-mt-(--ui-header-height)'
+				}
+			}
+		})({ class: ui.root })
+	);
+</script>
+
+<h1 class={classes}>
+	{@render children()}
+</h1>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type H1Props = {
+    children: Snippet;
+    ui?: {
+        root?: ClassNameValue;
+    };
+};
+declare const H1: import("svelte").Component<H1Props, {}, "">;
+type H1 = ReturnType<typeof H1>;
+export default H1;

package/dist/components/h2.svelte

@@ -0,0 +1,30 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type H2Props = {
+		children: Snippet;
+		ui?: { root?: ClassNameValue };
+	};
+</script>
+
+<script lang="ts">
+	const { children, ui = {} }: H2Props = $props();
+
+	const classes = $derived(
+		tv({
+			base: [
+				'relative text-2xl text-highlighted font-bold mt-12 mb-6',
+				'scroll-mt-[calc(48px+45px+var(--ui-header-height))] lg:scroll-mt-[calc(48px+var(--ui-header-height))]',
+				'hover:[&>a>code]:(border-primary text-primary)',
+				'[&>a>code]:(transition-colors text-xl/7 font-bold border-dashed)',
+				'[&>a]:focus-visible:outline-primary'
+			]
+		})({ class: ui.root })
+	);
+</script>
+
+<h1 class={classes}>
+	{@render children()}
+</h1>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type H2Props = {
+    children: Snippet;
+    ui?: {
+        root?: ClassNameValue;
+    };
+};
+declare const H2: import("svelte").Component<H2Props, {}, "">;
+type H2 = ReturnType<typeof H2>;
+export default H2;

package/dist/components/index.d.ts

@@ -20,3 +20,15 @@ export * from './checkbox.svelte';
 export { default as Checkbox } from './checkbox.svelte';
 export * from './checkboxgroup.svelte';
 export { default as CheckboxGroup } from './checkboxgroup.svelte';
+export * from './h1.svelte';
+export { default as H1 } from './h1.svelte';
+export * from './h2.svelte';
+export { default as H2 } from './h2.svelte';
+export * from './p.svelte';
+export { default as P } from './p.svelte';
+export * from './pin-input.svelte';
+export { default as PinInput } from './pin-input.svelte';
+export * from './accordion.svelte';
+export { default as Accordion } from './accordion.svelte';
+export * from './kbd.svelte';
+export { default as KBD } from './kbd.svelte';

package/dist/components/index.js

@@ -20,3 +20,15 @@ export * from './checkbox.svelte';
 export { default as Checkbox } from './checkbox.svelte';
 export * from './checkboxgroup.svelte';
 export { default as CheckboxGroup } from './checkboxgroup.svelte';
+export * from './h1.svelte';
+export { default as H1 } from './h1.svelte';
+export * from './h2.svelte';
+export { default as H2 } from './h2.svelte';
+export * from './p.svelte';
+export { default as P } from './p.svelte';
+export * from './pin-input.svelte';
+export { default as PinInput } from './pin-input.svelte';
+export * from './accordion.svelte';
+export { default as Accordion } from './accordion.svelte';
+export * from './kbd.svelte';
+export { default as KBD } from './kbd.svelte';

package/dist/components/kbd.svelte

@@ -0,0 +1,239 @@
+<script module lang="ts">
+	import type { PropColor } from '../index.js';
+	import type { Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type KbdProps = {
+		children?: Snippet;
+		value?: string;
+		color?: PropColor;
+		variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+		size?: 'sm' | 'md' | 'lg';
+		class?: ClassNameValue;
+	};
+
+	export const KBD_KEYS = {
+		meta: '',
+		ctrl: '',
+		alt: '',
+		win: '⊞',
+		command: '⌘',
+		shift: '⇧',
+		control: '⌃',
+		option: '⌥',
+		enter: '↵',
+		delete: '⌦',
+		backspace: '⌫',
+		escape: 'Esc',
+		tab: '⇥',
+		capslock: '⇪',
+		arrowup: '↑',
+		arrowright: '→',
+		arrowdown: '↓',
+		arrowleft: '←',
+		pageup: '⇞',
+		pagedown: '⇟',
+		home: '↖',
+		end: '↘'
+	};
+
+	export type KbdKey = keyof typeof KBD_KEYS;
+	export type KbdSpecificKey = 'meta' | 'alt' | 'ctrl';
+</script>
+
+<script lang="ts">
+	const {
+		children,
+		value,
+		color = 'primary',
+		variant = 'outline',
+		size = 'md',
+		class: klass
+	}: KbdProps = $props();
+
+	const macOS = $derived.by(() => {
+		if (typeof navigator === 'undefined') return null;
+		if (!navigator.userAgent) return null;
+		return navigator.userAgent.match(/Macintosh;/);
+	});
+
+	const kbdKeysSpecificMap = $derived({
+		meta: macOS ? KBD_KEYS.command : 'Ctrl',
+		alt: macOS ? KBD_KEYS.command : 'Ctrl',
+		ctrl: macOS ? KBD_KEYS.option : 'Alt'
+	});
+
+	function getKey(value?: KbdKey | string) {
+		if (!value) {
+			return;
+		}
+
+		if (['meta', 'alt', 'ctrl'].includes(value)) {
+			return kbdKeysSpecificMap[value as KbdSpecificKey];
+		}
+
+		return KBD_KEYS[value as KbdKey] || value.toUpperCase();
+	}
+</script>
+
+<kbd
+	class={tv({
+		base: 'inline-flex items-center justify-center px-1 rounded-sm font-medium font-sans text-xs',
+		variants: {
+			color: {
+				primary: '',
+				secondary: '',
+				info: '',
+				success: '',
+				warning: '',
+				error: ''
+			},
+			variant: {
+				solid: 'text-white border border-b-3 border-r-2',
+				outline: 'border border-b-3 border-r-2',
+				soft: '',
+				subtle: 'border border-b-3 border-r-2'
+			},
+			size: {
+				sm: 'h-4 min-w-4',
+				md: 'h-5 min-w-5',
+				lg: 'h-6 min-w-6'
+			}
+		},
+		compoundVariants: [
+			{
+				color: 'primary',
+				variant: 'outline',
+				class: 'border-primary text-primary'
+			},
+			{
+				color: 'secondary',
+				variant: 'outline',
+				class: 'border-secondary-600'
+			},
+			{
+				color: 'info',
+				variant: 'outline',
+				class: 'border-info text-info'
+			},
+			{
+				color: 'success',
+				variant: 'outline',
+				class: 'border-success text-success'
+			},
+			{
+				color: 'warning',
+				variant: 'outline',
+				class: 'border-warning text-warning'
+			},
+			{
+				color: 'error',
+				variant: 'outline',
+				class: 'border-error text-error'
+			},
+
+			// SOLID
+			{
+				color: 'primary',
+				variant: 'solid',
+				class: 'bg-primary border-primary-600'
+			},
+			{
+				color: 'secondary',
+				variant: 'solid',
+				class: 'bg-secondary-600 border-secondary-700'
+			},
+			{
+				color: 'info',
+				variant: 'solid',
+				class: 'bg-info border-info-600'
+			},
+			{
+				color: 'success',
+				variant: 'solid',
+				class: 'bg-success border-success-600'
+			},
+			{
+				color: 'warning',
+				variant: 'solid',
+				class: 'bg-warning border-warning-600'
+			},
+			{
+				color: 'error',
+				variant: 'solid',
+				class: 'bg-error border-error-600'
+			},
+
+			// SOFT
+			{
+				color: 'primary',
+				variant: 'soft',
+				class: 'bg-primary-100 text-primary'
+			},
+			{
+				color: 'secondary',
+				variant: 'soft',
+				class: 'bg-secondary-100 text-secondary-700'
+			},
+			{
+				color: 'info',
+				variant: 'soft',
+				class: 'bg-info-100 text-info'
+			},
+			{
+				color: 'success',
+				variant: 'soft',
+				class: 'bg-success-100 text-success'
+			},
+			{
+				color: 'warning',
+				variant: 'soft',
+				class: 'bg-warning-100 text-warning'
+			},
+			{
+				color: 'error',
+				variant: 'soft',
+				class: 'bg-error-100 text-error'
+			},
+
+			// SUBTLE
+			{
+				color: 'primary',
+				variant: 'subtle',
+				class: 'bg-primary-100 border-primary-200 text-primary'
+			},
+			{
+				color: 'secondary',
+				variant: 'subtle',
+				class: 'bg-secondary-100 border-secondary-200 text-secondary-700'
+			},
+			{
+				color: 'info',
+				variant: 'subtle',
+				class: 'bg-info-100 border-info-200 text-info'
+			},
+			{
+				color: 'success',
+				variant: 'subtle',
+				class: 'bg-success-100 border-success-200 text-success'
+			},
+			{
+				color: 'warning',
+				variant: 'subtle',
+				class: 'bg-warning-100 border-warning-200 text-warning'
+			},
+			{
+				color: 'error',
+				variant: 'subtle',
+				class: 'bg-error-100 border-error-200 text-error'
+			}
+		]
+	})({ color, variant, size, class: [klass] })}
+>
+	{#if value}
+		{getKey(value)}
+	{:else}
+		{@render children?.()}
+	{/if}
+</kbd>

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

@@ -0,0 +1,40 @@
+import type { PropColor } from '../index.js';
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type KbdProps = {
+    children?: Snippet;
+    value?: string;
+    color?: PropColor;
+    variant?: 'solid' | 'outline' | 'soft' | 'subtle';
+    size?: 'sm' | 'md' | 'lg';
+    class?: ClassNameValue;
+};
+export declare const KBD_KEYS: {
+    meta: string;
+    ctrl: string;
+    alt: string;
+    win: string;
+    command: string;
+    shift: string;
+    control: string;
+    option: string;
+    enter: string;
+    delete: string;
+    backspace: string;
+    escape: string;
+    tab: string;
+    capslock: string;
+    arrowup: string;
+    arrowright: string;
+    arrowdown: string;
+    arrowleft: string;
+    pageup: string;
+    pagedown: string;
+    home: string;
+    end: string;
+};
+export type KbdKey = keyof typeof KBD_KEYS;
+export type KbdSpecificKey = 'meta' | 'alt' | 'ctrl';
+declare const Kbd: import("svelte").Component<KbdProps, {}, "">;
+type Kbd = ReturnType<typeof Kbd>;
+export default Kbd;

package/dist/components/p.svelte

@@ -0,0 +1,22 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type ParagraphProps = {
+		children: Snippet;
+		ui?: { root?: ClassNameValue };
+	};
+</script>
+
+<script lang="ts">
+	const { children, ui = {} }: ParagraphProps = $props();
+</script>
+
+<p
+	class={tv({
+		base: 'my-5 leading-7 text-pretty'
+	})({ class: ui.root })}
+>
+	{@render children()}
+</p>

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

@@ -0,0 +1,11 @@
+import type { Snippet } from 'svelte';
+import type { ClassNameValue } from 'tailwind-merge';
+export type ParagraphProps = {
+    children: Snippet;
+    ui?: {
+        root?: ClassNameValue;
+    };
+};
+declare const P: import("svelte").Component<ParagraphProps, {}, "">;
+type P = ReturnType<typeof P>;
+export default P;

package/dist/components/pin-input.svelte

@@ -0,0 +1,162 @@
+<script module lang="ts">
+	import type { PropColor } from '../index.js';
+	import { onMount } from 'svelte';
+	import type { ClassNameValue } from 'tailwind-merge';
+	import { tv } from 'tailwind-variants';
+
+	export type PinInputProps = {
+		value?: number[] | string[];
+		color?: PropColor;
+		variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+		length?: number;
+		autofocus?: boolean | number;
+		id?: string;
+		mask?: boolean;
+		name?: string;
+		disabled?: boolean;
+		otp?: boolean;
+		placeholder?: string;
+		required?: boolean;
+		type?: 'text' | 'number';
+		ui?: { root?: ClassNameValue; cell?: ClassNameValue };
+	};
+</script>
+
+<script lang="ts">
+	const KEYS_TO_IGNORE = [
+		'ArrowLeft',
+		'ArrowRight',
+		'ArrowUp',
+		'ArrowDown',
+		'Home',
+		'End',
+		'Escape',
+		'Enter',
+		'Tab',
+		'Shift',
+		'Control',
+		'Meta'
+	];
+
+	let {
+		value = $bindable([]),
+		color = 'primary',
+		variant = 'outline',
+		size = 'md',
+		length = 5,
+		autofocus,
+		id,
+		mask,
+		name,
+		disabled,
+		otp,
+		placeholder,
+		required,
+		type = 'text',
+		ui = {}
+	}: PinInputProps = $props();
+	const internal_id = $props.id();
+	let input_els = $state<HTMLInputElement[]>([]);
+
+	const classes = $derived(
+		tv({
+			slots: { root: 'flex gap-2', cell: 'rounded text-center outline-none transition relative' },
+			variants: {
+				color: {
+					primary: '',
+					secondary: '',
+					info: '',
+					success: '',
+					warning: '',
+					error: ''
+				},
+				size: {
+					xs: { root: '', cell: 'size-6' },
+					sm: { root: '', cell: 'size-7' },
+					md: { root: '', cell: 'size-8' },
+					lg: { root: '', cell: 'size-9' },
+					xl: { root: '', cell: 'size-10' }
+				},
+				variant: {
+					outline: {
+						cell: 'border border-secondary-300 focus:(border-2)'
+					},
+					soft: {
+						cell: 'bg-secondary-50 hover:(bg-secondary-100) focus:(bg-secondary-100)'
+					},
+					subtle: { cell: 'border border-secondary-300 bg-secondary-100 focus:(border-2)' },
+					ghost: { cell: 'hover:(bg-secondary-100) focus:(bg-secondary-100)' },
+					none: { cell: '' }
+				}
+			},
+			compoundVariants: [
+				{
+					variant: ['outline', 'subtle'],
+					color: 'primary',
+					class: { cell: 'focus:(border-primary-500)' }
+				},
+				{
+					variant: ['outline', 'subtle'],
+					color: 'secondary',
+					class: { cell: 'focus:(border-secondary-900)' }
+				},
+				{
+					variant: ['outline', 'subtle'],
+					color: 'info',
+					class: { cell: 'focus:(border-info-500)' }
+				},
+				{
+					variant: ['outline', 'subtle'],
+					color: 'success',
+					class: { cell: 'focus:(border-success-500)' }
+				},
+				{
+					variant: ['outline', 'subtle'],
+					color: 'warning',
+					class: { cell: 'focus:(border-warning-500)' }
+				},
+				{
+					variant: ['outline', 'subtle'],
+					color: 'error',
+					class: { cell: 'focus:(border-error-500)' }
+				}
+			]
+		})({ size, color, variant, class: ui.root })
+	);
+
+	onMount(() => {
+		if (!autofocus || input_els.length === 0) return;
+
+		input_els[0].focus();
+	});
+</script>
+
+<div id={id || internal_id} class={classes.root({ class: ui.root })}>
+	{#each { length }, i (i)}
+		<input
+			bind:this={input_els[i]}
+			bind:value={
+				() => (mask ? '•' : value[i]?.toString()?.slice(-1)),
+				(v: string) => {
+					try {
+						value[i] = type === 'text' ? v.slice(-1) : parseInt(v.slice(-1));
+
+						if (value[i] && input_els[i + 1]) input_els[i + 1].focus();
+					} catch {
+						return;
+					}
+				}
+			}
+			class={classes.cell({ class: ui.cell })}
+			onkeydown={(e) => {
+				if (KEYS_TO_IGNORE.includes(e.key)) e.preventDefault();
+				if (type === 'number' && isNaN(parseInt(e.key))) e.preventDefault();
+				const DIR: Record<string, number> = { ArrowLeft: -1, ArrowRight: 1 };
+				if (!DIR[e.key] || !input_els[i + DIR[e.key]]) return;
+				input_els[i + DIR[e.key]].focus();
+			}}
+			{placeholder}
+		/>
+	{/each}
+</div>

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

@@ -0,0 +1,25 @@
+import type { PropColor } from '../index.js';
+import type { ClassNameValue } from 'tailwind-merge';
+export type PinInputProps = {
+    value?: number[] | string[];
+    color?: PropColor;
+    variant?: 'outline' | 'soft' | 'subtle' | 'ghost' | 'none';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    length?: number;
+    autofocus?: boolean | number;
+    id?: string;
+    mask?: boolean;
+    name?: string;
+    disabled?: boolean;
+    otp?: boolean;
+    placeholder?: string;
+    required?: boolean;
+    type?: 'text' | 'number';
+    ui?: {
+        root?: ClassNameValue;
+        cell?: ClassNameValue;
+    };
+};
+declare const PinInput: import("svelte").Component<PinInputProps, {}, "value">;
+type PinInput = ReturnType<typeof PinInput>;
+export default PinInput;

package/dist/components/progress.svelte

@@ -1,5 +1,5 @@
 <script module lang="ts">
-	import type { PropColor } from '../types.js';
+	import type { PropColor } from '../index.js';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
 

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

@@ -1,4 +1,4 @@
-import type { PropColor } from '../types.js';
+import type { PropColor } from '../index.js';
 import type { ClassNameValue } from 'tailwind-merge';
 export type ProgressProps = {
     value?: number;

package/dist/components/slider.svelte

@@ -1,6 +1,6 @@
 <script module lang="ts">
 	import { Slider } from 'bits-ui';
-	import type { PropColor } from '../types.js';
+	import type { PropColor } from '../index.js';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
 

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

@@ -1,5 +1,5 @@
 import { Slider } from 'bits-ui';
-import type { PropColor } from '../types.js';
+import type { PropColor } from '../index.js';
 import type { ClassNameValue } from 'tailwind-merge';
 export type SliderProps<T> = {
     value?: T;

package/dist/components/switch.svelte

@@ -1,6 +1,5 @@
 <script module lang="ts">
-	import type { PropColor } from '../types.js';
-	import { isComponent, isSnippet } from '../utils/common.js';
+	import { type PropColor, isComponent, isSnippet } from '../index.js';
 	import type { Snippet } from 'svelte';
 	import type { ClassNameValue } from 'tailwind-merge';
 	import { tv } from 'tailwind-variants';
@@ -122,6 +121,7 @@
 		data-state={value ? 'checked' : 'unchecked'}
 		class={classes.container({ class: [loading && 'cursor-not-allowed', ui.thumb] })}
 		onclick={() => {
+			console.log('click');
 			if (loading) return;
 			value = !value;
 		}}

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

@@ -1,4 +1,4 @@
-import type { PropColor } from '../types.js';
+import { type PropColor } from '../index.js';
 import type { Snippet } from 'svelte';
 import type { ClassNameValue } from 'tailwind-merge';
 import type { Component } from 'vitest-browser-svelte';

package/dist/index.d.ts

@@ -1,2 +1,4 @@
 export * from './components/index.js';
-export * from './types.js';
+export * from './utils/common.js';
+export type PropColor = 'primary' | 'secondary' | 'info' | 'success' | 'warning' | 'error';
+export declare const COLORS: PropColor[];

package/dist/index.js

@@ -1,2 +1,3 @@
 export * from './components/index.js';
-export * from './types.js';
+export * from './utils/common.js';
+export const COLORS = ['primary', 'secondary', 'info', 'success', 'warning', 'error'];

package/dist/utils/common.d.ts

@@ -1,5 +1,4 @@
 import type { Snippet, Component } from 'svelte';
-export declare const tv: import("tailwind-variants").TV;
 /**
  * Checks if a value is a Svelte snippet
  * @param v - The value to check (should be Snippet | Component)

package/dist/utils/common.js

@@ -1,5 +1,3 @@
-import { createTV } from 'tailwind-variants';
-export const tv = createTV({});
 /**
  * Checks if a value is a Svelte snippet
  * @param v - The value to check (should be Snippet | Component)

package/dist/vite.js

@@ -24,7 +24,7 @@ export function uisv(options) {
         uno_plugin({
             theme: {
                 radius: {
-                    base: `${_opts.radius || 0.25}rem`
+                    base: `${_opts.radius || 0.375}rem`
                 }
             },
             preflights: [

package/package.json

@@ -1,10 +1,10 @@
 {
 	"name": "uisv",
-	"version": "0.0.5",
+	"version": "0.0.7",
 	"description": "ui library for the rest of us",
 	"license": "MIT",
 	"repository": "ui-sv/uisv",
-	"homepage": "https://github.com/ui-sv/uisv",
+	"homepage": "https://uisv.pages.dev",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -45,6 +45,7 @@
 	"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",
@@ -57,13 +58,13 @@
 		"@unocss/reset": "^66.5.1",
 		"@vitest/browser": "^3.2.3",
 		"bits-ui": "^2.11.0",
-		"carta-md": "^4.11.1",
 		"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",
+		"mode-watcher": "^1.1.0",
 		"playwright": "^1.53.0",
 		"prettier": "^3.4.2",
 		"prettier-plugin-svelte": "^3.3.3",
@@ -73,7 +74,6 @@
 		"svelte-check": "^4.0.0",
 		"tailwind-merge": "^3.3.1",
 		"tailwind-variants": "^3.1.1",
-		"tailwindcss": "^4.1.13",
 		"theme-colors": "^0.1.0",
 		"typescript": "^5.0.0",
 		"typescript-eslint": "^8.20.0",

package/dist/types.d.ts

@@ -1,7 +0,0 @@
-declare module '#theme/button' {
-	import button from './theme/button.ts';
-
-	export default ReturnType<typeof button>;
-}
-
-export {};

package/dist/types.js

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

package/dist/utils/keys.d.ts

@@ -1,8 +0,0 @@
-export declare const FORM_OPTION_CONTEXT_KEY: unique symbol;
-export declare const FORM_BUS_CONTEXT_KEY: unique symbol;
-export declare const FORM_STATE_CONTEXT_KEY: unique symbol;
-export declare const FORM_FIELD_CONTEXT_KEY: unique symbol;
-export declare const FORM_TID_CONTEXT_KEY: unique symbol;
-export declare const FORM_INPUTS_CONTEXT_KEY: unique symbol;
-export declare const FORM_LOADING_CONTEXT_KEY: unique symbol;
-export declare const FORM_ERRORS_CONTEXT_KEY: unique symbol;

package/dist/utils/keys.js

@@ -1,8 +0,0 @@
-export const FORM_OPTION_CONTEXT_KEY = Symbol('uisv.form-options');
-export const FORM_BUS_CONTEXT_KEY = Symbol('uisv.form-events');
-export const FORM_STATE_CONTEXT_KEY = Symbol('uisv.form-state');
-export const FORM_FIELD_CONTEXT_KEY = Symbol('uisv.form-field');
-export const FORM_TID_CONTEXT_KEY = Symbol('uisv.input-id');
-export const FORM_INPUTS_CONTEXT_KEY = Symbol('uisv.form-inputs');
-export const FORM_LOADING_CONTEXT_KEY = Symbol('uisv.form-loading');
-export const FORM_ERRORS_CONTEXT_KEY = Symbol('uisv.form-errors');

package/dist/utils/types.d.ts

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

package/dist/utils/types.js

@@ -1 +0,0 @@
-"use strict";