uisv 0.0.5 → 0.0.6

package/README.md

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

package/dist/components/button.svelte

@@ -1,5 +1,10 @@
 <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 { isSnippet } from '../utils/common.js';
+	import { tv } from 'tailwind-variants';
+	import type { PropColor } from '../types.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 +35,7 @@
 		/**
 		 * @defaultValue 'solid'
 		 */
-		variant?: ButtonVariant;
+		variant?: 'link' | 'solid' | 'outline' | 'soft' | 'subtle' | 'ghost';
 		// activevariant?: ButtonVariant;
 		/**
 		 * @defaultValue 'md'
@@ -42,21 +47,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 +91,7 @@
 		tv({
 			slots: {
 				icon: '',
-				base: 'transition flex items-center font-sans'
+				base: 'transition flex-inline items-center font-sans'
 			},
 			variants: {
 				color: {
@@ -126,7 +124,8 @@
 					true: 'w-full'
 				},
 				disabled: {
-					true: 'cursor-not-allowed'
+					true: 'cursor-not-allowed',
+					false: 'cursor-pointer'
 				}
 			},
 			compoundVariants: [
@@ -333,7 +332,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 +343,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 +373,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 '../types.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/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,11 @@ 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';

package/dist/components/index.js

@@ -20,3 +20,11 @@ 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';

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 '../types.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 '../types.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/switch.svelte

@@ -122,6 +122,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/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.6",
 	"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",