@placeholderco/placeholder-ui 1.0.11 → 2.0.0

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

@@ -1,13 +1,21 @@
-interface Props {
+export interface DateTimePickerProps {
+    /** Label text displayed above the picker */
     label?: string;
+    /** Disable the date/time picker */
     disabled?: boolean;
+    /** Mark field as required (shows asterisk) */
     required?: boolean;
+    /** CSS classes for the container element */
     containerClass?: string;
+    /** Selected date/time value in ISO format (bindable) */
     value?: string | undefined;
+    /** Minimum selectable date/time in ISO format */
     minDate?: string | undefined;
+    /** Maximum selectable date/time in ISO format */
     maxDate?: string | undefined;
+    /** Callback when selected date/time changes */
     onchange?: (date: string | undefined) => void;
 }
-declare const DateTimePicker: import("svelte").Component<Props, {}, "value">;
+declare const DateTimePicker: import("svelte").Component<DateTimePickerProps, {}, "value">;
 type DateTimePicker = ReturnType<typeof DateTimePicker>;
 export default DateTimePicker;

package/dist/form/FormGroup.svelte

@@ -1,20 +1,33 @@
-<script lang="ts">
-	import { Icon, iconInfoCircle } from '../icon/index.js';
-	import Tooltip from '../ui/Tooltip.svelte';
+<script module lang="ts">
 	import type { Snippet } from 'svelte';
 
-	interface Props {
+	export interface FormGroupProps {
+		/** Label text displayed above the form field */
 		label: string;
+		/** Mark field as required (shows asterisk) */
 		required?: boolean;
+		/** Custom ID for the form field */
 		id?: string;
+		/** Additional CSS classes */
 		class?: string;
+		/** Show error state styling */
 		showError?: boolean;
+		/** Error message to display */
 		errorText?: string;
+		/** Rich tooltip content using a Svelte snippet */
 		tooltipContent?: Snippet;
+		/** Simple tooltip text */
 		tooltipText?: string;
+		/** Position of the tooltip */
 		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Form field content */
 		children: Snippet;
 	}
+</script>
+
+<script lang="ts">
+	import { Icon, iconInfoCircle } from '../icon/index.js';
+	import Tooltip from '../ui/Tooltip.svelte';
 
 	let {
 		label,
@@ -27,7 +40,7 @@
 		tooltipText,
 		tooltipLocation = 'top',
 		children
-	}: Props = $props();
+	}: FormGroupProps = $props();
 
 	const computedId = $derived(id ?? `form-${label}`);
 </script>
@@ -56,13 +69,23 @@
 
 <style>
 	.label {
-		font-size: var(--pui-font-size-md);
-		line-height: var(--pui-line-height-normal);
+		display: flex;
+		align-items: center;
+		gap: 0.25rem;
+		font-size: 0.875rem;
+		line-height: 1.25rem;
+		font-weight: 500;
+		margin-bottom: 0.25rem;
+		color: var(--label-color, var(--bs-secondary, #6c757d));
+	}
+
+	.text-required {
+		color: var(--danger-text);
 	}
 
 	.error-text {
-		color: var(--pui-text-danger);
-		font-size: var(--pui-font-size-sm);
-		margin-top: var(--pui-spacing-1);
+		color: var(--danger-text);
+		font-size: 0.875rem;
+		margin-top: 0.25rem;
 	}
 </style>

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

@@ -1,16 +1,26 @@
 import type { Snippet } from 'svelte';
-interface Props {
+export interface FormGroupProps {
+    /** Label text displayed above the form field */
     label: string;
+    /** Mark field as required (shows asterisk) */
     required?: boolean;
+    /** Custom ID for the form field */
     id?: string;
+    /** Additional CSS classes */
     class?: string;
+    /** Show error state styling */
     showError?: boolean;
+    /** Error message to display */
     errorText?: string;
+    /** Rich tooltip content using a Svelte snippet */
     tooltipContent?: Snippet;
+    /** Simple tooltip text */
     tooltipText?: string;
+    /** Position of the tooltip */
     tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Form field content */
     children: Snippet;
 }
-declare const FormGroup: import("svelte").Component<Props, {}, "">;
+declare const FormGroup: import("svelte").Component<FormGroupProps, {}, "">;
 type FormGroup = ReturnType<typeof FormGroup>;
 export default FormGroup;

package/dist/form/Number.svelte

@@ -4,47 +4,83 @@
 	import Loader from '../ui/Loader.svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	interface Props {
+	const autoName = `number-${crypto.randomUUID()}`;
+
+	export interface NumberProps {
+		/** 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;
+		/** 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 */
 		numberElement?: 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?: number;
+		/** 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';
+		/** Minimum allowed value */
 		min?: number;
+		/** Maximum allowed value */
 		max?: number;
+		/** Increment/decrement step value */
 		step?: number;
-		onenter?: (v: number) => void;
+		/** Callback when Enter key is pressed */
+		onenter?: (value: number) => 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: number | undefined, e: FocusEvent) => void;
+		/** Callback when input loses focus */
+		onblur?: (value: number | undefined, e: FocusEvent) => void;
+		/** Content to render on the right side of the input */
 		right?: Snippet;
+		/** Additional content below the input */
 		children?: Snippet;
 	}
 
 	let {
+		name,
 		label = '',
 		inputId = undefined,
 		placeholder = undefined,
 		required = false,
 		autofocus = false,
-		noAutocomplete = false,
+		autocomplete = undefined,
 		loading = false,
 		class: classes = '',
 		containerClass = '',
@@ -70,7 +106,11 @@
 		onblur = undefined,
 		right,
 		children
-	}: Props = $props();
+	}: NumberProps = $props();
+
+	let resolvedName = $derived(
+		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
+	);
 
 	let id = $derived.by(() => {
 		if (inputId) return inputId;
@@ -121,6 +161,7 @@
 				class="number {classes} {extraClasses.join(' ')}"
 				type="number"
 				{id}
+				name={resolvedName}
 				{placeholder}
 				{disabled}
 				{autofocus}
@@ -128,16 +169,16 @@
 				{min}
 				{max}
 				{step}
-				autocomplete={!noAutocomplete ? 'on' : 'off'}
+				autocomplete={autocomplete as any}
 				bind:value
 				bind:this={numberElement}
-				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={handleChange}
 				{oninput}
@@ -185,29 +226,30 @@
 
 	.number {
 		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;
 	}
 
 	.number.disabled {
 		opacity: 0.5;
 		cursor: not-allowed;
-		background: var(--pui-bg-disabled);
+		background: var(--border-color);
 	}
 
 	.number: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);
 		}
 	}
 
@@ -217,7 +259,7 @@
 	}
 
 	.with-left-icon {
-		padding-left: var(--pui-spacing-8);
+		padding-left: 2rem;
 	}
 
 	.left-icon {
@@ -225,15 +267,15 @@
 		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>
+</style>

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

@@ -1,37 +1,70 @@
 import { type Snippet } from 'svelte';
-interface Props {
+export interface NumberProps {
+    /** 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;
+    /** 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 */
     numberElement?: 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?: number;
+    /** 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';
+    /** Minimum allowed value */
     min?: number;
+    /** Maximum allowed value */
     max?: number;
+    /** Increment/decrement step value */
     step?: number;
-    onenter?: (v: number) => void;
+    /** Callback when Enter key is pressed */
+    onenter?: (value: number) => 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: number | undefined, e: FocusEvent) => void;
+    /** Callback when input loses focus */
+    onblur?: (value: number | undefined, e: FocusEvent) => void;
+    /** Content to render on the right side of the input */
     right?: Snippet;
+    /** Additional content below the input */
     children?: Snippet;
 }
-declare const Number: import("svelte").Component<Props, {}, "value" | "numberElement">;
+declare const Number: import("svelte").Component<NumberProps, {}, "value" | "numberElement">;
 type Number = ReturnType<typeof Number>;
 export default Number;

package/dist/form/Radio.svelte

@@ -0,0 +1,174 @@
+<script lang="ts">
+	export interface RadioProps {
+		/** HTML name attribute for the radio input */
+		name?: string;
+		/** Label text displayed next to the radio */
+		label?: string;
+		/** Custom ID for the input element */
+		id?: string;
+		/** Additional CSS classes */
+		class?: string;
+		/** Disable the radio */
+		disabled?: boolean;
+		/** Whether the radio is checked (bindable) */
+		checked?: boolean;
+		/** When true, the radio state is controlled externally only. Clicking will call onchange but won't toggle the radio. */
+		controlled?: boolean;
+		/** Callback when checked state changes */
+		onchange?: (checked: boolean) => void;
+	}
+
+	const nonce = Math.random().toString(36).substring(2, 15);
+
+	let {
+		name,
+		label,
+		id = `radio-${nonce}`,
+		class: classes = '',
+		disabled = false,
+		checked = $bindable(false),
+		controlled = false,
+		onchange = undefined
+	}: RadioProps = $props();
+</script>
+
+<div class="radio-wrapper {disabled ? 'disabled' : ''}">
+	<label class={disabled ? 'cursor-not-allowed' : ''} for={id}>
+		<input
+			{id}
+			type="radio"
+			class="accent-accent {classes}"
+			{name}
+			{disabled}
+			{checked}
+			onchange={(e) => {
+				if (controlled) {
+					e.currentTarget.checked = checked;
+					onchange?.(!checked);
+				} else {
+					checked = e.currentTarget.checked;
+					onchange?.(checked);
+				}
+			}}
+		/>
+		{#if label}
+			{label}
+		{/if}
+	</label>
+</div>
+
+<style>
+	label {
+		display: flex;
+		flex-direction: row;
+		align-items: center;
+		user-select: none;
+		cursor: pointer;
+	}
+
+	.disabled label,
+	.disabled input {
+		cursor: not-allowed;
+	}
+
+	input {
+		position: relative !important;
+		-webkit-appearance: none;
+		-moz-appearance: none;
+		appearance: none;
+		margin: 8px;
+		box-sizing: content-box;
+		overflow: hidden;
+		cursor: pointer;
+	}
+
+	input:before {
+		content: '';
+		display: block;
+		box-sizing: content-box;
+		width: 16px;
+		height: 16px;
+		border: 2px solid #ccc;
+		transition: 0.2s border-color ease;
+	}
+
+	:global(.dark) input:before {
+		border-color: #666;
+	}
+	input:checked:before {
+		border-color: var(--ui-primary);
+		transition: 0.5s border-color ease;
+	}
+	:global(.dark) input:checked:before {
+		border-color: var(--ui-accent);
+	}
+
+	input:disabled:before {
+		border-color: #ccc;
+		background-color: #ccc;
+		opacity: 0.5;
+	}
+	:global(.dark) input:disabled:before {
+		border-color: #666;
+		background-color: #666;
+	}
+	input:after {
+		content: '';
+		display: block;
+		position: absolute;
+		box-sizing: content-box;
+		top: 50%;
+		left: 50%;
+		transform-origin: 50% 50%;
+		background-color: var(--ui-primary);
+		width: 16px;
+		height: 16px;
+		border-radius: 100vh;
+		transform: translate(-50%, -50%) scale(0);
+	}
+	input:disabled:after {
+		opacity: 0.5;
+	}
+	:global(.dark) input:after {
+		background-color: var(--ui-accent);
+	}
+	input[type='radio']:before {
+		border-radius: 100vh;
+	}
+	input[type='radio']:after {
+		width: 16px;
+		height: 16px;
+		border-radius: 100vh;
+		transform: translate(-50%, -50%) scale(0);
+	}
+	input[type='radio']:checked:after {
+		-webkit-animation: toggleOnRadio 0.2s ease forwards;
+		animation: toggleOnRadio 0.2s ease forwards;
+	}
+	@-webkit-keyframes toggleOnRadio {
+		0% {
+			opacity: 0;
+			transform: translate(-50%, -50%) scale(0);
+		}
+		70% {
+			opacity: 1;
+			transform: translate(-50%, -50%) scale(0.9);
+		}
+		100% {
+			transform: translate(-50%, -50%) scale(0.8);
+		}
+	}
+	@keyframes toggleOnRadio {
+		0% {
+			opacity: 0;
+			transform: translate(-50%, -50%) scale(0);
+		}
+		70% {
+			opacity: 1;
+			transform: translate(-50%, -50%) scale(0.9);
+		}
+		100% {
+			transform: translate(-50%, -50%) scale(0.8);
+		}
+	}
+</style>

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

@@ -0,0 +1,21 @@
+export interface RadioProps {
+    /** HTML name attribute for the radio input */
+    name?: string;
+    /** Label text displayed next to the radio */
+    label?: string;
+    /** Custom ID for the input element */
+    id?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** Disable the radio */
+    disabled?: boolean;
+    /** Whether the radio is checked (bindable) */
+    checked?: boolean;
+    /** When true, the radio state is controlled externally only. Clicking will call onchange but won't toggle the radio. */
+    controlled?: boolean;
+    /** Callback when checked state changes */
+    onchange?: (checked: boolean) => void;
+}
+declare const Radio: import("svelte").Component<RadioProps, {}, "checked">;
+type Radio = ReturnType<typeof Radio>;
+export default Radio;