@placeholderco/placeholder-ui 1.0.12 → 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,42 +4,72 @@
 	import Loader from '../ui/Loader.svelte';
 	import Icon from '../icon/Icon.svelte';
 
-	const autoName = `number-${Math.random().toString(36).substring(2, 15)}`;
+	const autoName = `number-${crypto.randomUUID()}`;
 
-	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;
-		/** HTML autocomplete attribute */
+		/** 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;
 	}
 
@@ -76,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;
@@ -86,10 +120,6 @@
 		return Math.random().toString(36).substring(2, 8);
 	});
 
-	const resolvedName = $derived(
-		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
-	);
-
 	const extraClasses: string[] = $derived.by(() => {
 		const classes = [];
 		if (right) classes.push('rounded-r-none');
@@ -139,16 +169,16 @@
 				{min}
 				{max}
 				{step}
-				autocomplete={(autocomplete ?? 'on') as AutoFill}
+				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}
@@ -167,7 +197,12 @@
 				</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}
@@ -191,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);
 		}
 	}
 
@@ -223,7 +259,7 @@
 	}
 
 	.with-left-icon {
-		padding-left: var(--pui-spacing-8);
+		padding-left: 2rem;
 	}
 
 	.left-icon {
@@ -231,28 +267,15 @@
 		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>
+</style>

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

@@ -1,40 +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;
-    /** HTML autocomplete attribute */
+    /** 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

@@ -76,7 +76,7 @@
 		-webkit-appearance: none;
 		-moz-appearance: none;
 		appearance: none;
-		margin: var(--pui-spacing-2);
+		margin: 8px;
 		box-sizing: content-box;
 		overflow: hidden;
 		cursor: pointer;
@@ -88,29 +88,29 @@
 		box-sizing: content-box;
 		width: 16px;
 		height: 16px;
-		border: 2px solid var(--pui-border-disabled);
-		transition: var(--pui-transition-fast) border-color var(--pui-ease-out);
+		border: 2px solid #ccc;
+		transition: 0.2s border-color ease;
 	}
 
 	:global(.dark) input:before {
-		border-color: var(--pui-color-gray-600);
+		border-color: #666;
 	}
 	input:checked:before {
-		border-color: var(--pui-color-primary);
-		transition: var(--pui-transition-slow) border-color var(--pui-ease-out);
+		border-color: var(--ui-primary);
+		transition: 0.5s border-color ease;
 	}
 	:global(.dark) input:checked:before {
-		border-color: var(--pui-color-secondary);
+		border-color: var(--ui-accent);
 	}
 
 	input:disabled:before {
-		border-color: var(--pui-border-disabled);
-		background-color: var(--pui-border-disabled);
+		border-color: #ccc;
+		background-color: #ccc;
 		opacity: 0.5;
 	}
 	:global(.dark) input:disabled:before {
-		border-color: var(--pui-color-gray-600);
-		background-color: var(--pui-color-gray-600);
+		border-color: #666;
+		background-color: #666;
 	}
 	input:after {
 		content: '';
@@ -120,30 +120,30 @@
 		top: 50%;
 		left: 50%;
 		transform-origin: 50% 50%;
-		background-color: var(--pui-color-primary);
+		background-color: var(--ui-primary);
 		width: 16px;
 		height: 16px;
-		border-radius: var(--pui-radius-full);
+		border-radius: 100vh;
 		transform: translate(-50%, -50%) scale(0);
 	}
 	input:disabled:after {
 		opacity: 0.5;
 	}
 	:global(.dark) input:after {
-		background-color: var(--pui-color-secondary);
+		background-color: var(--ui-accent);
 	}
 	input[type='radio']:before {
-		border-radius: var(--pui-radius-full);
+		border-radius: 100vh;
 	}
 	input[type='radio']:after {
 		width: 16px;
 		height: 16px;
-		border-radius: var(--pui-radius-full);
+		border-radius: 100vh;
 		transform: translate(-50%, -50%) scale(0);
 	}
 	input[type='radio']:checked:after {
-		-webkit-animation: toggleOnRadio var(--pui-transition-fast) ease forwards;
-		animation: toggleOnRadio var(--pui-transition-fast) ease forwards;
+		-webkit-animation: toggleOnRadio 0.2s ease forwards;
+		animation: toggleOnRadio 0.2s ease forwards;
 	}
 	@-webkit-keyframes toggleOnRadio {
 		0% {

package/dist/form/RadioGroup.svelte

@@ -3,23 +3,34 @@
 	import FormGroup from './FormGroup.svelte';
 	import Radio from './Radio.svelte';
 
-	interface Props {
+	export interface RadioGroupProps {
 		/** HTML name attribute for the radio group (falls back to label, then auto-generated) */
 		name?: string;
+		/** Label text displayed above the radio group */
 		label: string;
+		/** Available radio options */
 		options: ComboBoxItem[];
+		/** Mark field as required (shows asterisk) */
 		required?: boolean;
+		/** Show error state styling */
 		showError?: boolean;
+		/** Error message to display */
 		errorText?: string;
+		/** Additional CSS classes */
 		class?: string;
+		/** CSS classes for the container element */
 		containerClass?: string;
+		/** Disable all radio options */
 		disabled?: boolean;
 		/** When true, the radio state is controlled externally only. Clicking will call onchange but won't change the value. */
 		controlled?: boolean;
 		/** Display options vertically instead of horizontally */
 		vertical?: boolean;
+		/** Currently selected value (bindable) */
 		value?: string;
+		/** Position of the tooltip */
 		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Callback when selection changes */
 		onchange?: (e: string | undefined) => void;
 	}
 
@@ -32,17 +43,17 @@
 		errorText = '',
 		class: classes = '',
 		containerClass = '',
+		vertical = false,
 		disabled = false,
 		controlled = false,
-		vertical = false,
 		tooltipLocation = 'top',
 		value = $bindable(),
 		onchange = undefined
-	}: Props = $props();
+	}: RadioGroupProps = $props();
 
-	const nonce = Math.random().toString(36).substring(2, 15);
+	const autoName = `radio-${crypto.randomUUID()}`;
 	const resolvedName = $derived(
-		(name || label || `radio-${nonce}`).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
+		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
 	);
 
 	function handleChange(option: ComboBoxItem) {
@@ -86,12 +97,12 @@
 <style>
 	.radio-options {
 		display: flex;
-		gap: var(--pui-spacing-2);
-		border-radius: var(--pui-radius-lg);
+		gap: 0.5rem;
+		border-radius: 6px;
 	}
 
 	.radio-vertical.radio-options {
-		gap: var(--pui-spacing-1);
+		gap: 0.25rem;
 	}
 
 	.radio-vertical {
@@ -99,15 +110,15 @@
 	}
 
 	.radio-required {
-		padding: var(--pui-spacing-1);
+		padding: 0.25rem;
 	}
 
 	.error {
-		border: 1px solid var(--pui-text-danger);
+		border: 1px solid var(--danger-text);
 	}
 
 	.error-text {
-		margin-top: var(--pui-spacing-1);
-		color: var(--pui-text-danger);
+		margin-top: 0.25rem;
+		color: var(--danger-text);
 	}
 </style>

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

@@ -1,23 +1,34 @@
 import type { ComboBoxItem } from '../models/ComboBoxItem.js';
-interface Props {
+export interface RadioGroupProps {
     /** HTML name attribute for the radio group (falls back to label, then auto-generated) */
     name?: string;
+    /** Label text displayed above the radio group */
     label: string;
+    /** Available radio options */
     options: ComboBoxItem[];
+    /** Mark field as required (shows asterisk) */
     required?: boolean;
+    /** Show error state styling */
     showError?: boolean;
+    /** Error message to display */
     errorText?: string;
+    /** Additional CSS classes */
     class?: string;
+    /** CSS classes for the container element */
     containerClass?: string;
+    /** Disable all radio options */
     disabled?: boolean;
     /** When true, the radio state is controlled externally only. Clicking will call onchange but won't change the value. */
     controlled?: boolean;
     /** Display options vertically instead of horizontally */
     vertical?: boolean;
+    /** Currently selected value (bindable) */
     value?: string;
+    /** Position of the tooltip */
     tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Callback when selection changes */
     onchange?: (e: string | undefined) => void;
 }
-declare const RadioGroup: import("svelte").Component<Props, {}, "value">;
+declare const RadioGroup: import("svelte").Component<RadioGroupProps, {}, "value">;
 type RadioGroup = ReturnType<typeof RadioGroup>;
 export default RadioGroup;