@placeholderco/placeholder-ui 1.0.12 → 2.1.0

package/dist/form/StringArrayBuilder.svelte

@@ -0,0 +1,249 @@
+<script module lang="ts">
+	export interface StringArrayBuilderProps {
+		/** Label text displayed above the builder */
+		label?: string;
+		/** Array of string values (bindable) */
+		items?: string[];
+		/** Placeholder for value input field */
+		placeholder?: string;
+		/** Additional CSS classes */
+		class?: string;
+		/** Callback when items change */
+		onchange?: (items: string[]) => void;
+	}
+</script>
+
+<script lang="ts">
+	import ActionIcon from '../ui/ActionIcon.svelte';
+	import Button from '../ui/Button.svelte';
+	import { iconPlus, iconTrash } from '../icon/index.js';
+	import FormGroup from './FormGroup.svelte';
+
+	let {
+		label = '',
+		items = $bindable([]),
+		placeholder = 'Value',
+		class: classes = '',
+		onchange
+	}: StringArrayBuilderProps = $props();
+
+	let newValue = $state('');
+	let valueInputEl: HTMLInputElement | undefined = $state(undefined);
+
+	function valueExists(value: string, excludeIndex: number | undefined = undefined): boolean {
+		return items.some((item, i) => item === value && i !== excludeIndex);
+	}
+
+	let isDuplicateNewValue = $derived(
+		newValue.trim() !== '' && valueExists(newValue.trim())
+	);
+
+	function addItem() {
+		const trimmed = newValue.trim();
+		if (!trimmed) return;
+		if (isDuplicateNewValue) return;
+
+		items = [...items, trimmed];
+		newValue = '';
+
+		notifyChange();
+
+		valueInputEl?.focus();
+	}
+
+	function removeItem(index: number) {
+		items = items.filter((_, i) => i !== index);
+		notifyChange();
+	}
+
+	function updateItem(index: number, newVal: string) {
+		if (valueExists(newVal, index)) return;
+
+		items = items.map((item, i) => (i === index ? newVal : item));
+		notifyChange();
+	}
+
+	function notifyChange() {
+		onchange?.(items);
+	}
+
+	function handleKeyDown(e: KeyboardEvent) {
+		if (e.key === 'Enter') {
+			e.preventDefault();
+			addItem();
+		}
+	}
+</script>
+
+<div class="string-array-builder {classes}">
+	{#if label}
+		<FormGroup {label}>
+			<div></div>
+		</FormGroup>
+	{/if}
+
+	<div class="builder-content">
+		<!-- Existing items -->
+		{#each items as item, index (index)}
+			<div class="item-row">
+				<div class="col-value">
+					<input
+						type="text"
+						class="item-input"
+						value={item}
+						oninput={(e) => updateItem(index, e.currentTarget.value)}
+						{placeholder}
+					/>
+				</div>
+				<div class="col-actions">
+					<ActionIcon
+						variant="danger-subtle"
+						svg={iconTrash}
+						size="1rem"
+						onclick={() => removeItem(index)}
+						tooltip="Remove item"
+					/>
+				</div>
+			</div>
+		{/each}
+
+		<!-- Add new item row -->
+		<div class="add-row">
+			<div class="col-value">
+				<input
+					bind:this={valueInputEl}
+					type="text"
+					class="item-input new-input"
+					class:error={isDuplicateNewValue}
+					value={newValue}
+					oninput={(e) => (newValue = e.currentTarget.value)}
+					{placeholder}
+					onkeydown={handleKeyDown}
+				/>
+			</div>
+			<div class="col-actions">
+				<ActionIcon
+					variant="auto-subtle"
+					svg={iconPlus}
+					size="1rem"
+					onclick={addItem}
+					disabled={!newValue.trim() || isDuplicateNewValue}
+					tooltip="Add item"
+				/>
+			</div>
+		</div>
+
+		{#if isDuplicateNewValue}
+			<div class="error-message">
+				Value "{newValue}" already exists
+			</div>
+		{/if}
+
+		<!-- Quick add button for mobile/convenience -->
+		{#if newValue.trim() && !isDuplicateNewValue}
+			<div class="quick-add">
+				<Button variant="auto-subtle" onclick={addItem}>
+					Add "{newValue}"
+				</Button>
+			</div>
+		{/if}
+	</div>
+
+	<!-- Summary -->
+	{#if items.length > 0}
+		<div class="summary">
+			<span class="summary-count">{items.length} item{items.length !== 1 ? 's' : ''}</span>
+		</div>
+	{/if}
+</div>
+
+<style>
+	.string-array-builder {
+		width: 100%;
+	}
+
+	.item-row,
+	.add-row {
+		display: grid;
+		grid-template-columns: 1fr 2.5rem;
+		gap: 0.5rem;
+		padding: 0.25rem 0;
+		align-items: center;
+	}
+
+	.col-actions {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+
+	.item-input {
+		width: 100%;
+		padding: 0.375rem 0.5rem;
+		border: 1px solid var(--border-color);
+		border-radius: 0.25rem;
+		background-color: var(--input-bg-color);
+		color: var(--text-color);
+		font-size: 0.875rem;
+		transition: border-color 0.15s;
+	}
+
+	.item-input:focus {
+		outline: none;
+		border-color: var(--accent-color);
+	}
+
+	.item-input::placeholder {
+		color: var(--placeholder-color);
+	}
+
+	.new-input {
+		background-color: transparent;
+	}
+
+	.item-input.error {
+		border-color: var(--danger-text);
+	}
+
+	.item-input.error:focus {
+		border-color: var(--danger-text);
+	}
+
+	.error-message {
+		padding: 0.375rem 0;
+		font-size: 0.75rem;
+		color: var(--danger-text);
+	}
+
+	.quick-add {
+		padding: 0.5rem 0;
+		display: flex;
+		justify-content: flex-end;
+	}
+
+	.summary {
+		display: flex;
+		gap: 1rem;
+		padding: 0.5rem 0;
+		font-size: 0.875rem;
+		color: var(--text-muted);
+		margin-top: 0.5rem;
+	}
+
+	.summary-count {
+		font-weight: 500;
+	}
+
+	@media (max-width: 480px) {
+		.item-row,
+		.add-row {
+			grid-template-columns: 1fr 2rem;
+			gap: 0.25rem;
+		}
+
+		.item-input {
+			padding: 0.25rem 0.375rem;
+			font-size: 0.8125rem;
+		}
+	}
+</style>

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

@@ -0,0 +1,15 @@
+export interface StringArrayBuilderProps {
+    /** Label text displayed above the builder */
+    label?: string;
+    /** Array of string values (bindable) */
+    items?: string[];
+    /** Placeholder for value input field */
+    placeholder?: string;
+    /** Additional CSS classes */
+    class?: string;
+    /** Callback when items change */
+    onchange?: (items: string[]) => void;
+}
+declare const StringArrayBuilder: import("svelte").Component<StringArrayBuilderProps, {}, "items">;
+type StringArrayBuilder = ReturnType<typeof StringArrayBuilder>;
+export default StringArrayBuilder;

package/dist/form/Switch.svelte

@@ -1,113 +1,171 @@
+<script module lang="ts">
+	import type { Snippet } from 'svelte';
+
+	export interface SwitchProps {
+		/** Label text displayed above the switch */
+		label?: string;
+		/** Mark field as required (shows asterisk) */
+		required?: boolean;
+		/** Whether the switch is on (bindable) */
+		checked: boolean;
+		/** Disable the switch */
+		disabled?: boolean;
+		/** CSS classes for the container element */
+		containerClass?: string;
+		/** CSS classes for the switch element */
+		switchClass?: string;
+		/** Custom ID for the switch element */
+		inputId?: string;
+		/** Callback when switch state changes */
+		onchange?: (value: boolean) => void;
+		/** Show error state styling */
+		showError?: boolean;
+		/** Error message to display */
+		errorText?: string;
+		/** Simple tooltip text */
+		tooltipText?: string;
+		/** Position of the tooltip */
+		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Rich tooltip content using a Svelte snippet */
+		tooltipContent?: Snippet;
+	}
+</script>
+
 <script lang="ts">
-    import FormGroup from "./FormGroup.svelte";
-
-    interface Props {
-        label: string;
-        required?: boolean;
-        checked: boolean;
-        disabled?: boolean;
-        containerClass?: string;
-        switchClass?: string;
-        onchange?: (value: boolean) => void;
-        showError?: boolean;
-    }
-
-    let {
-        label,
-        required = false,
-        checked = $bindable(),
-        disabled = false,
-        containerClass,
-        switchClass,
-        onchange,
-        showError,
-    }: Props = $props();
-
-    function handleClick(event: Event) {
-        const target = event.target as HTMLElement;
-        const state = target.getAttribute("aria-checked");
-        checked = !(state === "true");
-        onchange?.(checked);
-    }
+	import { Icon, iconInfoCircle } from '../icon/index.js';
+	import Tooltip from '../ui/Tooltip.svelte';
+
+	let {
+		label,
+		required = false,
+		checked = $bindable(),
+		disabled = false,
+		containerClass = '',
+		switchClass = '',
+		inputId = undefined,
+		onchange,
+		showError = false,
+		errorText = '',
+		tooltipText = undefined,
+		tooltipLocation = 'top',
+		tooltipContent = undefined
+	}: SwitchProps = $props();
+
+	const nonce = Math.random().toString(36).substring(2, 15);
+
+	const id = $derived(inputId ? inputId : label ? `switch-${label}` : `switch-${nonce}`);
+
+	function handleClick() {
+		if (disabled) return;
+		checked = !checked;
+		onchange?.(checked);
+	}
 </script>
 
-<div class="switch-container {containerClass}">
-    <FormGroup {required} {label}>
-        <div
-            class="switch-track {switchClass}"
-            class:error={showError}
-            class:disabled
-        >
-            <button
-                role="switch"
-                aria-checked={checked}
-                aria-labelledby="form-{label}"
-                onclick={handleClick}
-                {disabled}
-            ></button>
-        </div>
-    </FormGroup>
+<div class="switch-container {containerClass} {disabled ? 'disabled' : ''}">
+	<label for={id}>
+		<span class="label-text"
+			>{label}
+			{#if required}
+				<span class="required">*</span>
+			{/if}
+			{#if tooltipContent || tooltipText}
+				<Tooltip {tooltipContent} location={tooltipLocation} text={tooltipText}>
+					<Icon svg={iconInfoCircle} size="1em" stroke="var(--accent-color)" />
+				</Tooltip>
+			{/if}</span
+		>
+		<button
+			{id}
+			role="switch"
+			type="button"
+			aria-checked={checked}
+			aria-label={label || 'Toggle switch'}
+			onclick={handleClick}
+			class="switch {switchClass} {showError ? 'error' : ''} {disabled ? 'disabled' : ''}"
+			{disabled}
+		>
+		</button>
+	</label>
+	{#if showError && errorText}
+		<div class="error-text">{errorText}</div>
+	{/if}
 </div>
 
 <style>
-    .switch-container {
-        --switch-track-color: var(--pui-border-disabled);
-    }
-
-    :global(.dark) .switch-container {
-        --switch-track-color: var(--pui-color-gray-600);
-    }
-
-    .switch-track {
-        display: flex;
-        align-items: center;
-    }
-
-    button {
-        width: 3em;
-        height: 1.6em;
-        position: relative;
-        margin: 0 0 0 var(--pui-spacing-2);
-        padding: 0;
-        background: var(--switch-track-color);
-        border: none;
-        border-radius: var(--pui-radius-3xl);
-        cursor: pointer;
-        transition: background-color var(--pui-transition-fast)
-            var(--pui-ease-in-out);
-    }
-
-    button::before {
-        content: "";
-        position: absolute;
-        width: 1.3em;
-        height: 1.3em;
-        top: 0.15em;
-        right: 1.5em;
-        background: var(--pui-color-white);
-        border-radius: var(--pui-radius-full);
-        transition: transform var(--pui-transition-slow) var(--pui-ease-in-out);
-    }
-
-    button[aria-checked="true"] {
-        background-color: var(--pui-color-primary);
-    }
-
-    button[aria-checked="true"]::before {
-        transform: translateX(1.3em);
-    }
-
-    button:focus-visible {
-        outline: 2px solid var(--pui-color-primary);
-        outline-offset: var(--pui-focus-ring-offset);
-    }
-
-    .disabled button {
-        opacity: 0.5;
-        cursor: not-allowed;
-    }
-
-    .error button {
-        outline: 1px solid var(--pui-text-danger);
-    }
+	:root .switch-container {
+		--accent-color: var(--ui-primary);
+		--gray: #ccc;
+	}
+
+	:global(.dark) .switch-container {
+		--accent-color: var(--ui-primary);
+		--gray: #444;
+	}
+
+	label {
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		user-select: none;
+		cursor: pointer;
+	}
+
+	.disabled label {
+		cursor: not-allowed;
+	}
+
+	.switch {
+		width: 3em;
+		height: 1.6em;
+		position: relative;
+		margin: 4px 0 0 0;
+		background: var(--gray);
+		border: none;
+		border-radius: 1.5em;
+		cursor: pointer;
+	}
+
+	.switch::before {
+		content: '';
+		position: absolute;
+		width: 1.3em;
+		height: 1.3em;
+		background: #fff;
+		top: 0.13em;
+		right: 1.5em;
+		border-radius: 100%;
+		transition: transform 0.3s;
+	}
+
+	.switch[aria-checked='true'] {
+		background-color: var(--ui-primary);
+	}
+
+	.switch[aria-checked='true']::before {
+		transform: translateX(1.3em);
+		transition: transform 0.3s;
+	}
+
+	.switch:focus {
+		outline: 1px solid var(--ui-primary);
+		outline-offset: 2px;
+	}
+
+	.switch.disabled {
+		cursor: not-allowed;
+		opacity: 0.5;
+	}
+
+	.switch.error {
+		outline: 1px solid var(--danger-text);
+	}
+
+	.required {
+		color: var(--danger-text);
+	}
+
+	.error-text {
+		color: var(--danger-text);
+	}
 </style>

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

@@ -1,13 +1,32 @@
-interface Props {
-    label: string;
+import type { Snippet } from 'svelte';
+export interface SwitchProps {
+    /** Label text displayed above the switch */
+    label?: string;
+    /** Mark field as required (shows asterisk) */
     required?: boolean;
+    /** Whether the switch is on (bindable) */
     checked: boolean;
+    /** Disable the switch */
     disabled?: boolean;
+    /** CSS classes for the container element */
     containerClass?: string;
+    /** CSS classes for the switch element */
     switchClass?: string;
+    /** Custom ID for the switch element */
+    inputId?: string;
+    /** Callback when switch state changes */
     onchange?: (value: boolean) => void;
+    /** Show error state styling */
     showError?: boolean;
+    /** Error message to display */
+    errorText?: string;
+    /** Simple tooltip text */
+    tooltipText?: string;
+    /** Position of the tooltip */
+    tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Rich tooltip content using a Svelte snippet */
+    tooltipContent?: Snippet;
 }
-declare const Switch: import("svelte").Component<Props, {}, "checked">;
+declare const Switch: import("svelte").Component<SwitchProps, {}, "checked">;
 type Switch = ReturnType<typeof Switch>;
 export default Switch;