@placeholderco/placeholder-ui 1.0.12 → 2.1.0

package/dist/form/TextArea.svelte

@@ -1,34 +1,54 @@
 <script lang="ts">
 	import FormGroup from './FormGroup.svelte';
 
-	const autoName = `textarea-${Math.random().toString(36).substring(2, 15)}`;
+	const autoName = `textarea-${crypto.randomUUID()}`;
 
-	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;
-		/** HTML autocomplete attribute */
+		/** 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;
+		/** 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;
 	}
 
@@ -56,7 +76,7 @@
 		onkeydown = undefined,
 		onkeypress = undefined,
 		onkeyup = undefined
-	}: Props = $props();
+	}: TextAreaProps = $props();
 
 	let resolvedName = $derived(
 		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
@@ -79,7 +99,7 @@
 			{disabled}
 			{autofocus}
 			{required}
-			autocomplete={autocomplete as AutoFill}
+			autocomplete={autocomplete as any}
 			style={height ? `height: ${height}` : undefined}
 			bind:value
 			bind:this={textboxElement}
@@ -99,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,31 +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;
-    /** HTML autocomplete attribute */
+    /** 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;
+    /** 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,44 +4,72 @@
 	import Loader from '../ui/Loader.svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	const autoName = `textbox-${Math.random().toString(36).substring(2, 15)}`;
+	const autoName = `textbox-${crypto.randomUUID()}`;
 
-	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;
 		/** HTML autocomplete attribute for the input */
 		autocomplete?: string;
-		preventPasswordSave?: boolean;
+		/** 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;
+		/** 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;
+		/** Input type */
 		type?: 'text' | 'password' | 'email' | 'number' | 'search' | 'tel' | 'url';
 	}
 
@@ -53,7 +81,6 @@
 		required = false,
 		autofocus = false,
 		autocomplete = undefined,
-		preventPasswordSave = false,
 		loading = false,
 		class: classes = '',
 		containerClass = '',
@@ -79,22 +106,18 @@
 		right,
 		children,
 		type = 'text'
-	}: Props = $props();
+	}: TextboxProps = $props();
 
-	// Generate ID on client-side only to avoid hydration mismatches
-	let autoId = $state('');
-
-	$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(() => {
@@ -106,20 +129,10 @@
 
 		return classes;
 	});
-
-	const resolvedName = $derived(
-		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
-	);
-
-	const autocompleteValue = $derived.by(() => {
-		if (autocomplete) return autocomplete;
-		if (type === 'password' && preventPasswordSave) return 'one-time-code';
-		return 'on';
-	});
 </script>
 
 <div class="textbox-container {containerClass}">
-	<FormGroup {label} {required} {id} class={groupClass} {tooltipLocation} {tooltipText} {tooltipContent}>
+	<FormGroup {label} {required} {id} class={groupClass} {tooltipLocation} {tooltipContent} {tooltipText}>
 		<div class="textbox-input">
 			<!-- svelte-ignore a11y_autofocus -->
 			<input
@@ -131,7 +144,7 @@
 				{disabled}
 				{autofocus}
 				{required}
-				autocomplete={autocompleteValue as AutoFill}
+				autocomplete={autocomplete as any}
 				bind:value
 				bind:this={textboxElement}
 				onblur={(e) => {
@@ -159,11 +172,16 @@
 				</div>
 			{/if}
 			{#if loading}
-				<div class="loader" class:loader-left={!!leftIconSvg}>
+				<div
+					class="absolute
+				top-1/2 -translate-y-1/2
+				-translate-x-1/2
+				{leftIconSvg ? 'left-4' : 'right-0'}"
+				>
 					<Loader sizeOverride="1.1rem" />
 				</div>
 			{:else}
-				<div class="right-slot">
+				<div class="contents">
 					{@render right?.()}
 				</div>
 			{/if}
@@ -183,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);
 		}
 	}
 
@@ -214,47 +233,29 @@
 		border-bottom-right-radius: 0;
 	}
 
-	.right-slot {
-		display: flex;
-	}
-
-	.right-slot :global(> *) {
-		border-top-left-radius: 0;
-		border-bottom-left-radius: 0;
-		border-left: none;
-	}
-
 	.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);
-	}
-
-	.loader {
-		position: absolute;
-		right: var(--pui-spacing-2);
-		top: 50%;
-		transform: translateY(-50%);
-		pointer-events: none;
-	}
-
-	.loader.loader-left {
-		right: auto;
-		left: var(--pui-spacing-2);
+		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,42 +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;
     /** HTML autocomplete attribute for the input */
     autocomplete?: string;
-    preventPasswordSave?: boolean;
+    /** 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;
+    /** 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;
+    /** 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;