@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/form/TextArea.svelte

@@ -1,43 +1,72 @@
 <script lang="ts">
 	import FormGroup from './FormGroup.svelte';
-	
-	interface Props {
+
+	const autoName = `textarea-${crypto.randomUUID()}`;
+
+	export interface TextAreaProps {
+		/** HTML name attribute for the textarea (falls back to label, then auto-generated) */
+		name?: string;
+		/** Label text displayed above the textarea */
 		label?: string;
+		/** Custom ID for the textarea element */
 		inputId?: string;
+		/** Placeholder text when textarea is empty */
 		placeholder?: string;
+		/** Mark field as required (shows asterisk) */
 		required?: boolean;
+		/** Auto-focus the textarea on mount */
 		autofocus?: boolean;
-		noAutocomplete?: boolean;
+		/** HTML autocomplete attribute for the input */
+		autocomplete?: string;
+		/** CSS classes for the FormGroup wrapper */
 		groupClass?: string;
+		/** Reference to the textarea DOM element */
 		textboxElement?: HTMLElement;
+		/** CSS classes for the textarea element */
 		class?: string;
+		/** CSS classes for the container element */
 		containerClass?: string;
+		/** Disable the textarea */
 		disabled?: boolean;
+		/** Textarea value (bindable) */
 		value?: string;
+		/** Height of the textarea (e.g., '200px', '10rem') */
+		height?: string;
+		/** Position of the tooltip */
 		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Tooltip text on hover */
 		tooltipText?: string;
-		onblur?: (e: FocusEvent) => void;
-		onfocus?: (e: FocusEvent) => void;
-		onchange?: (e: FocusEvent) => void;
-		oninput?: (e: FocusEvent) => void;
-		onkeydown?: (e: FocusEvent) => void;
-		onkeypress?: (e: FocusEvent) => void;
-		onkeyup?: (e: FocusEvent) => void;
+		/** Callback when textarea loses focus */
+		onblur?: (value: string, e: FocusEvent) => void;
+		/** Callback when textarea gains focus */
+		onfocus?: (value: string, e: FocusEvent) => void;
+		/** Callback when value changes */
+		onchange?: (e: Event) => void;
+		/** Callback on input event */
+		oninput?: (e: Event) => void;
+		/** Callback on keydown event */
+		onkeydown?: (e: KeyboardEvent) => void;
+		/** Callback on keypress event */
+		onkeypress?: (e: KeyboardEvent) => void;
+		/** Callback on keyup event */
+		onkeyup?: (e: KeyboardEvent) => void;
 	}
 
 	let {
+		name,
 		label = '',
 		inputId = undefined,
 		placeholder = undefined,
 		required = false,
 		autofocus = false,
-		noAutocomplete = false,
+		autocomplete = undefined,
 		class: classes = '',
 		containerClass = '',
 		groupClass = '',
 		textboxElement: textboxElement = undefined,
 		disabled = false,
 		value = $bindable(''),
+		height = undefined,
 		tooltipLocation = 'top',
 		tooltipText = undefined,
 		onblur = undefined,
@@ -46,8 +75,12 @@
 		oninput = undefined,
 		onkeydown = undefined,
 		onkeypress = undefined,
-		onkeyup = undefined,
-	}: Props = $props();
+		onkeyup = undefined
+	}: TextAreaProps = $props();
+
+	let resolvedName = $derived(
+		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
+	);
 
 	let showRequiredRing = $state(false);
 	const id = $derived(inputId ?? `input-${label.replaceAll(' ', '')}`);
@@ -61,20 +94,22 @@
             {showRequiredRing && '!border-required'}
             {classes}"
 			{id}
+			name={resolvedName}
 			{placeholder}
 			{disabled}
 			{autofocus}
 			{required}
-			autocomplete={!noAutocomplete ? 'on' : 'off'}
+			autocomplete={autocomplete as any}
+			style={height ? `height: ${height}` : undefined}
 			bind:value
 			bind:this={textboxElement}
-			{onblur}
-			{onfocus}
-			onchange={() => onchange?.(new FocusEvent('change'))}
-			oninput={() => oninput?.(new FocusEvent('input'))}
-			onkeydown={() => onkeydown?.(new FocusEvent('keydown'))}
-			onkeypress={() => onkeypress?.(new FocusEvent('keypress'))}
-			onkeyup={() => onkeyup?.(new FocusEvent('keyup'))}
+			onblur={(e) => onblur?.(value, e)}
+			onfocus={(e) => onfocus?.(value, e)}
+			{onchange}
+			{oninput}
+			{onkeydown}
+			{onkeypress}
+			{onkeyup}
 		></textarea>
 	</FormGroup>
 </div>
@@ -84,65 +119,65 @@
 		display: block;
 		width: 100%;
 		min-height: calc(2.25rem + 2px);
-		padding: var(--pui-spacing-2);
-		font-size: var(--pui-font-size-md);
-		font-weight: var(--pui-font-weight-normal);
-		line-height: var(--pui-line-height-normal);
-		color: var(--pui-input-text);
-		background-color: var(--pui-input-bg);
+		padding: 0.5rem;
+		font-size: 1rem;
+		font-weight: 400;
+		line-height: 1.5;
+		color: var(--text-base);
+		background-color: var(--input-bg-color);
 		background-image: none;
-		border: 1px solid var(--pui-input-border);
-		border-radius: var(--pui-radius-md);
+		border: 1px solid var(--border-color);
+		border-radius: 0.375rem;
 		appearance: none;
-		transition: border-color var(--pui-transition-fast) var(--pui-ease-in-out);
+		transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
 		resize: vertical;
 
 		&::placeholder {
-			color: var(--pui-text-placeholder);
+			color: #6c757d;
 			opacity: 1;
 		}
 
 		&:focus {
-			border-color: var(--pui-color-primary);
+			border-color: var(--ui-primary);
 			outline: 0;
 			box-shadow: none;
 		}
 
 		&:disabled {
-			background-color: var(--pui-bg-disabled);
-			opacity: 1;
+			background-color: var(--border-color);
+			opacity: 0.5;
 			cursor: not-allowed;
 		}
 	}
 
 	:global(.dark) textarea {
-		background-color: var(--pui-input-bg);
-		color: var(--pui-input-text);
-		border-color: var(--pui-input-border);
+		background-color: var(--input-bg-color);
+		color: var(--text-base);
+		border-color: var(--border-color);
 
 		&::placeholder {
-			color: var(--pui-text-placeholder);
+			color: #9ca3af;
 		}
 
 		&:focus {
-			border-color: var(--pui-color-secondary);
+			border-color: var(--ui-accent);
 		}
 
 		&:disabled {
-			background-color: var(--pui-bg-disabled);
-			color: var(--pui-input-text);
+			background-color: var(--border-color);
+			opacity: 0.5;
 		}
 	}
 
 	/* Fix for resize handle in dark mode */
 	:global(.dark) textarea::-webkit-resizer {
-		background-color: var(--pui-color-gray-700);
-		border-color: var(--pui-border-default);
+		background-color: #2f353b;
+		border-color: var(--border-color);
 	}
 
 	.loader {
 		position: absolute;
-		right: var(--pui-spacing-2);
-		top: var(--pui-spacing-2);
+		right: 8px;
+		top: 8px;
 	}
 </style>

package/dist/form/TextArea.svelte.d.ts

@@ -1,26 +1,51 @@
-interface Props {
+export interface TextAreaProps {
+    /** HTML name attribute for the textarea (falls back to label, then auto-generated) */
+    name?: string;
+    /** Label text displayed above the textarea */
     label?: string;
+    /** Custom ID for the textarea element */
     inputId?: string;
+    /** Placeholder text when textarea is empty */
     placeholder?: string;
+    /** Mark field as required (shows asterisk) */
     required?: boolean;
+    /** Auto-focus the textarea on mount */
     autofocus?: boolean;
-    noAutocomplete?: boolean;
+    /** HTML autocomplete attribute for the input */
+    autocomplete?: string;
+    /** CSS classes for the FormGroup wrapper */
     groupClass?: string;
+    /** Reference to the textarea DOM element */
     textboxElement?: HTMLElement;
+    /** CSS classes for the textarea element */
     class?: string;
+    /** CSS classes for the container element */
     containerClass?: string;
+    /** Disable the textarea */
     disabled?: boolean;
+    /** Textarea value (bindable) */
     value?: string;
+    /** Height of the textarea (e.g., '200px', '10rem') */
+    height?: string;
+    /** Position of the tooltip */
     tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Tooltip text on hover */
     tooltipText?: string;
-    onblur?: (e: FocusEvent) => void;
-    onfocus?: (e: FocusEvent) => void;
-    onchange?: (e: FocusEvent) => void;
-    oninput?: (e: FocusEvent) => void;
-    onkeydown?: (e: FocusEvent) => void;
-    onkeypress?: (e: FocusEvent) => void;
-    onkeyup?: (e: FocusEvent) => void;
+    /** Callback when textarea loses focus */
+    onblur?: (value: string, e: FocusEvent) => void;
+    /** Callback when textarea gains focus */
+    onfocus?: (value: string, e: FocusEvent) => void;
+    /** Callback when value changes */
+    onchange?: (e: Event) => void;
+    /** Callback on input event */
+    oninput?: (e: Event) => void;
+    /** Callback on keydown event */
+    onkeydown?: (e: KeyboardEvent) => void;
+    /** Callback on keypress event */
+    onkeypress?: (e: KeyboardEvent) => void;
+    /** Callback on keyup event */
+    onkeyup?: (e: KeyboardEvent) => void;
 }
-declare const TextArea: import("svelte").Component<Props, {}, "value">;
+declare const TextArea: import("svelte").Component<TextAreaProps, {}, "value">;
 type TextArea = ReturnType<typeof TextArea>;
 export default TextArea;

package/dist/form/Textbox.svelte

@@ -4,48 +4,83 @@
 	import Loader from '../ui/Loader.svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	interface Props {
+	const autoName = `textbox-${crypto.randomUUID()}`;
+
+	export interface TextboxProps {
+		/** HTML name attribute for the input (falls back to label, then auto-generated) */
+		name?: string;
+		/** Label text displayed above the input */
 		label?: string;
+		/** Custom ID for the input element */
 		inputId?: string;
+		/** Placeholder text when input is empty */
 		placeholder?: string;
+		/** Mark field as required (shows asterisk) */
 		required?: boolean;
+		/** Auto-focus the input on mount */
 		autofocus?: boolean;
-		noAutocomplete?: boolean;
-		preventPasswordSave?: boolean;
+		/** HTML autocomplete attribute for the input */
+		autocomplete?: string;
+		/** Show loading spinner inside the input */
 		loading?: boolean;
+		/** CSS classes for the FormGroup wrapper */
 		groupClass?: string;
+		/** Reference to the input DOM element (bindable) */
 		textboxElement?: HTMLElement;
+		/** SVG icon displayed on the left side */
 		leftIconSvg?: string;
+		/** CSS classes for the input element */
 		class?: string;
+		/** CSS classes for the container element */
 		containerClass?: string;
+		/** Disable the input */
 		disabled?: boolean;
+		/** Input value (bindable) */
 		value?: string;
+		/** Whether the input is currently focused */
 		isFocused?: boolean;
+		/** Show error state styling */
 		showError?: boolean;
+		/** Error message to display */
 		errorText?: string;
+		/** Position of the tooltip */
 		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Rich tooltip content using a Svelte snippet */
+		tooltipContent?: Snippet;
+		/** Tooltip text on hover */
 		tooltipText?: string;
-		onenter?: (v: string) => void;
+		/** Callback when Enter key is pressed */
+		onenter?: (value: string) => void;
+		/** Callback when value changes */
 		onchange?: (e: Event) => void;
+		/** Callback on input event */
 		oninput?: (e: Event) => void;
+		/** Callback on keydown event */
 		onkeydown?: (e: KeyboardEvent) => void;
+		/** Callback on keypress event */
 		onkeypress?: (e: KeyboardEvent) => void;
+		/** Callback on keyup event */
 		onkeyup?: (e: KeyboardEvent) => void;
-		onfocus?: (e: FocusEvent) => void;
-		onblur?: (e: FocusEvent) => void;
+		/** Callback when input gains focus */
+		onfocus?: (value: string, e: FocusEvent) => void;
+		/** Callback when input loses focus */
+		onblur?: (value: string, e: FocusEvent) => void;
+		/** Content to render on the right side of the input */
 		right?: Snippet;
+		/** Additional content below the input */
 		children?: Snippet;
-		type?: 'text' | 'password';
+		/** Input type */
+		type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
 	}
 
 	let {
+		name,
 		label = '',
 		inputId = undefined,
 		placeholder = undefined,
 		required = false,
 		autofocus = false,
-		noAutocomplete = false,
-		preventPasswordSave = false,
+		autocomplete = undefined,
 		loading = false,
 		class: classes = '',
 		containerClass = '',
@@ -58,6 +93,7 @@
 		showError = false,
 		errorText = '',
 		tooltipLocation = 'top',
+		tooltipContent = undefined,
 		tooltipText = undefined,
 		onenter = undefined,
 		onchange = undefined,
@@ -70,22 +106,18 @@
 		right,
 		children,
 		type = 'text'
-	}: Props = $props();
-
-	// Generate ID on client-side only to avoid hydration mismatches
-	let autoId = $state('');
+	}: TextboxProps = $props();
 
-	$effect(() => {
-		if (!inputId && !label) {
-			autoId = Math.random().toString(36).substring(2, 8);
-		}
-	});
+	let resolvedName = $derived(
+		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
+	);
 
 	let id = $derived.by(() => {
 		if (inputId) return inputId;
 		// convert label to lowercase, replace spaces with hyphens
 		if (label) return `input-${label.toLowerCase().replace(/ /g, '-')}`;
-		return autoId;
+		// generate 6 character random string
+		return Math.random().toString(36).substring(2, 8);
 	});
 
 	const extraClasses: string[] = $derived.by(() => {
@@ -97,36 +129,31 @@
 
 		return classes;
 	});
-
-	const autocompleteValue = $derived.by(() => {
-		if (noAutocomplete) return 'off';
-		if (type === 'password' && preventPasswordSave) return 'one-time-code';
-		return 'on';
-	});
 </script>
 
 <div class="textbox-container {containerClass}">
-	<FormGroup {label} {required} {id} class={groupClass} {tooltipLocation} {tooltipText}>
+	<FormGroup {label} {required} {id} class={groupClass} {tooltipLocation} {tooltipContent} {tooltipText}>
 		<div class="textbox-input">
 			<!-- svelte-ignore a11y_autofocus -->
 			<input
 				class="textbox {classes} {extraClasses.join(' ')}"
 				{type}
 				{id}
+				name={resolvedName}
 				{placeholder}
 				{disabled}
 				{autofocus}
 				{required}
-				autocomplete={autocompleteValue}
+				autocomplete={autocomplete as any}
 				bind:value
 				bind:this={textboxElement}
-				onblur={() => {
+				onblur={(e) => {
 					isFocused = false;
-					onblur?.(new FocusEvent('blur'));
+					onblur?.(value, e);
 				}}
-				onfocus={() => {
+				onfocus={(e) => {
 					isFocused = true;
-					onfocus?.(new FocusEvent('focus'));
+					onfocus?.(value, e);
 				}}
 				{onchange}
 				{oninput}
@@ -174,29 +201,30 @@
 
 	.textbox {
 		width: 100%;
-		font-size: var(--pui-font-size-md);
-		line-height: var(--pui-line-height-normal);
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
-		border: 1px solid var(--pui-input-border);
-		background-color: var(--pui-input-bg);
-		color: var(--pui-input-text);
-		border-radius: var(--pui-radius-base);
+		font-size: 1rem;
+		line-height: 1.5rem;
+		padding: 0.25rem;
+		border: 1px solid var(--border-color);
+		background-color: var(--input-bg-color);
+		color: var(--text-color);
+		border-radius: 0.25rem;
+		padding: 0.25rem 0.5rem;
 		box-sizing: border-box;
 	}
 
 	.textbox.disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
-		background: var(--pui-input-bg-disabled);
+		background: var(--border-color);
 	}
 
 	.textbox:focus {
-		border-color: var(--pui-input-border-focus);
+		border-color: var(--accent-color);
 		outline: 2px solid transparent;
-		outline-offset: var(--pui-focus-ring-offset);
+		outline-offset: 2px;
 
 		& ~ .left-icon {
-			color: var(--pui-input-border-focus);
+			color: var(--accent-color);
 		}
 	}
 
@@ -206,23 +234,28 @@
 	}
 
 	.with-left-icon {
-		padding-left: var(--pui-spacing-8);
+		padding-left: 2rem;
 	}
 
 	.left-icon {
+		/* absolute {isFocused ? 'text-accent' : 'text-neutral-500'}
+				pointer-events-none
+				top-1/2 -translate-y-1/2
+				left-4 -translate-x-1/2 */
+
 		position: absolute;
 		pointer-events: none;
 		top: 50%;
 		transform: translateY(-40%);
-		left: var(--pui-spacing-2);
-		color: var(--pui-text-muted);
+		left: 0.5rem;
+		color: rgb(115 115 115);
 	}
 
 	.show-error {
-		border-color: var(--pui-text-danger);
+		border-color: var(--danger-text);
 	}
 
 	.text-error {
-		color: var(--pui-text-danger);
+		color: var(--danger-text);
 	}
 </style>

package/dist/form/Textbox.svelte.d.ts

@@ -1,37 +1,70 @@
 import { type Snippet } from 'svelte';
-interface Props {
+export interface TextboxProps {
+    /** HTML name attribute for the input (falls back to label, then auto-generated) */
+    name?: string;
+    /** Label text displayed above the input */
     label?: string;
+    /** Custom ID for the input element */
     inputId?: string;
+    /** Placeholder text when input is empty */
     placeholder?: string;
+    /** Mark field as required (shows asterisk) */
     required?: boolean;
+    /** Auto-focus the input on mount */
     autofocus?: boolean;
-    noAutocomplete?: boolean;
-    preventPasswordSave?: boolean;
+    /** HTML autocomplete attribute for the input */
+    autocomplete?: string;
+    /** Show loading spinner inside the input */
     loading?: boolean;
+    /** CSS classes for the FormGroup wrapper */
     groupClass?: string;
+    /** Reference to the input DOM element (bindable) */
     textboxElement?: HTMLElement;
+    /** SVG icon displayed on the left side */
     leftIconSvg?: string;
+    /** CSS classes for the input element */
     class?: string;
+    /** CSS classes for the container element */
     containerClass?: string;
+    /** Disable the input */
     disabled?: boolean;
+    /** Input value (bindable) */
     value?: string;
+    /** Whether the input is currently focused */
     isFocused?: boolean;
+    /** Show error state styling */
     showError?: boolean;
+    /** Error message to display */
     errorText?: string;
+    /** Position of the tooltip */
     tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Rich tooltip content using a Svelte snippet */
+    tooltipContent?: Snippet;
+    /** Tooltip text on hover */
     tooltipText?: string;
-    onenter?: (v: string) => void;
+    /** Callback when Enter key is pressed */
+    onenter?: (value: string) => void;
+    /** Callback when value changes */
     onchange?: (e: Event) => void;
+    /** Callback on input event */
     oninput?: (e: Event) => void;
+    /** Callback on keydown event */
     onkeydown?: (e: KeyboardEvent) => void;
+    /** Callback on keypress event */
     onkeypress?: (e: KeyboardEvent) => void;
+    /** Callback on keyup event */
     onkeyup?: (e: KeyboardEvent) => void;
-    onfocus?: (e: FocusEvent) => void;
-    onblur?: (e: FocusEvent) => void;
+    /** Callback when input gains focus */
+    onfocus?: (value: string, e: FocusEvent) => void;
+    /** Callback when input loses focus */
+    onblur?: (value: string, e: FocusEvent) => void;
+    /** Content to render on the right side of the input */
     right?: Snippet;
+    /** Additional content below the input */
     children?: Snippet;
-    type?: 'text' | 'password';
+    /** Input type */
+    type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
 }
-declare const Textbox: import("svelte").Component<Props, {}, "value" | "textboxElement">;
+declare const Textbox: import("svelte").Component<TextboxProps, {}, "value" | "textboxElement">;
 type Textbox = ReturnType<typeof Textbox>;
 export default Textbox;