@placeholderco/placeholder-ui 1.0.12 → 2.0.0

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

@@ -1,28 +1,77 @@
-import type { ComboBoxItem, FetchFunctionType, SearchFunctionType } from "../models/ComboBoxItem.js";
-import { type Snippet } from "svelte";
-interface Props {
+import type { ComboBoxGroup, ComboBoxItem, FetchFunctionType, RetrieveLabelFunctionType, SearchFunctionType } from '../models/ComboBoxItem.js';
+import type { Snippet } from 'svelte';
+export interface AutocompleteMultiProps {
+    /** HTML name attribute for the input */
+    name?: string;
+    /** Label text displayed above the input */
     label?: string;
+    /** Array of selected values (bindable) */
     values?: string[];
+    /**
+     * Array of full selected item objects (bindable). Can be passed initially to preset
+     * the selection with known labels — no `values` or retrieveLabelFunction needed.
+     */
     rawValues?: ComboBoxItem[];
+    /** Placeholder text when nothing is selected */
     placeholder?: string;
+    /** Mark field as required (shows asterisk) */
+    required?: boolean;
+    /** CSS classes for the control element */
     class?: string;
+    /** CSS classes for the container element */
+    containerClass?: string;
+    /** CSS classes for the FormGroup wrapper */
+    groupClass?: string;
+    /** Disable the input */
     disabled?: boolean;
-    required?: boolean;
+    /** Show error state styling */
     showError?: boolean;
+    /** Error message to display */
     errorText?: string;
+    /** Auto-focus the input on mount */
     autofocus?: boolean;
-    showNoResultsMessage?: boolean;
+    /** Auto-focus on every dialog open */
+    autofocusDialog?: boolean;
+    /** Hide "no results" message when search finds nothing */
+    hideNoResults?: boolean;
+    /** Close the dropdown after selecting an option */
+    closeOnSelection?: boolean;
+    /**
+     * Offer to add the typed text as a new chip when it doesn't match an existing option.
+     * On by default — set to `false` to restrict selection to the provided options.
+     */
+    allowAdd?: boolean;
+    /** Builds the label shown for the "add new value" suggestion (default: `Add "<value>"`) */
+    addItemLabel?: (value: string) => string;
+    /** Text shown while loading options */
     loadingText?: string;
+    /** SVG icon displayed on the left side */
+    leftIconSvg?: string;
+    /** Static list of autocomplete options */
     options?: ComboBoxItem[];
-    fetchFunction?: FetchFunctionType;
-    searchFunction?: SearchFunctionType;
-    tooltipLocation?: "top" | "bottom" | "left" | "right";
+    /** Options organized into groups */
+    groupedOptions?: ComboBoxGroup[];
+    /** Position of the tooltip */
+    tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Async function to fetch all options */
+    fetchFunction?: FetchFunctionType | null;
+    /** Async function to search/filter options based on input */
+    searchFunction?: SearchFunctionType | null;
+    /** Async function to retrieve labels for values */
+    retrieveLabelFunction?: RetrieveLabelFunctionType | null;
+    /** Rich tooltip content using a Svelte snippet */
     tooltipContent?: Snippet;
+    /** Simple tooltip text */
     tooltipText?: string;
+    /** Callback when Enter is pressed with the current filter text */
+    enterPressed?: (e: string) => void;
+    /** Callback when selection changes (returns value strings) */
     onchange?: (e: string[]) => void;
+    /** Callback when selection changes (returns full item objects) */
     onchangeRaw?: (e: ComboBoxItem[]) => void;
-    onCreate?: (value: string) => void;
+    /** Callback when the user chooses to add the typed value as a new item */
+    onItemAdded?: (value: string) => void;
 }
-declare const AutocompleteMulti: import("svelte").Component<Props, {}, "values" | "rawValues">;
+declare const AutocompleteMulti: import("svelte").Component<AutocompleteMultiProps, {}, "values" | "rawValues">;
 type AutocompleteMulti = ReturnType<typeof AutocompleteMulti>;
 export default AutocompleteMulti;

package/dist/form/Checkbox.svelte

@@ -1,33 +1,45 @@
-<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 {
-		/** HTML name attribute for the checkbox */
+	export interface CheckboxProps {
+		/** HTML name attribute for the checkbox (falls back to label, then auto-generated) */
 		name?: string;
+		/** Label text displayed next to the checkbox */
 		label?: string;
+		/** Mark field as required (shows asterisk) */
 		required?: boolean;
+		/** Additional CSS classes */
 		class?: string;
+		/** Custom ID for the input element */
 		inputId?: string;
+		/** Disable the checkbox */
 		disabled?: boolean;
+		/** Show error state styling */
 		showError?: boolean;
+		/** Error message to display */
 		errorText?: string;
+		/** Whether the checkbox is checked (bindable) */
 		checked?: boolean;
 		/** When true, the checkbox state is controlled externally only. Clicking will call onchange but won't toggle the checkbox. */
 		controlled?: boolean;
 		/** Whether the checkbox is in an indeterminate state */
 		indeterminate?: boolean;
+		/** Callback when checked state changes */
 		onchange?: (e: boolean) => void;
 		/** Accessible label for screen readers (use when no visible label) */
 		ariaLabel?: string;
-		/** Rich tooltip content using a Svelte snippet */
-		tooltipContent?: Snippet;
 		/** 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 { Icon, iconInfoCircle } from '../icon/index.js';
+	import Tooltip from '../ui/Tooltip.svelte';
 
 	let {
 		name,
@@ -43,14 +55,16 @@
 		indeterminate = false,
 		onchange = undefined,
 		ariaLabel = undefined,
-		tooltipContent,
-		tooltipText,
-		tooltipLocation = 'top'
-	}: Props = $props();
+		tooltipText = undefined,
+		tooltipLocation = 'top',
+		tooltipContent = undefined
+	}: CheckboxProps = $props();
 
+	const autoName = `checkbox-${crypto.randomUUID()}`;
 	const nonce = Math.random().toString(36).substring(2, 15);
-	const resolvedName = $derived(
-		(name || label || `checkbox-${nonce}`).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
+
+	let resolvedName = $derived(
+		(name || label || autoName).replace(/[^a-zA-Z0-9_\-:.]/g, '_')
 	);
 
 	const id = $derived(inputId ? inputId : label ? `input-${label}` : `input-${nonce}`);
@@ -64,7 +78,7 @@
 		{#if controlled}
 			<input
 				bind:this={inputEl}
-				class="checkbox {showError && 'error'} {classes}"
+				class="checkbox text-base accent-accent mr-1 {showError && 'error'} {classes}"
 				type="checkbox"
 				{id}
 				name={resolvedName}
@@ -79,7 +93,7 @@
 		{:else}
 			<input
 				bind:this={inputEl}
-				class="checkbox {showError && 'error'} {classes}"
+				class="checkbox text-base accent-accent mr-1 {showError && 'error'} {classes}"
 				type="checkbox"
 				{id}
 				name={resolvedName}
@@ -96,7 +110,7 @@
 			{/if}
 			{#if tooltipContent || tooltipText}
 				<Tooltip {tooltipContent} location={tooltipLocation} text={tooltipText}>
-					<Icon svg={iconInfoCircle} size="1em" />
+					<Icon svg={iconInfoCircle} size="1em" stroke="var(--accent-color)" />
 				</Tooltip>
 			{/if}</span
 		>
@@ -107,12 +121,6 @@
 </div>
 
 <style>
-	.checkbox-container {
-		display: flex;
-		align-items: center;
-		gap: var(--pui-spacing-1_5);
-	}
-
 	label {
 		display: flex;
 		flex-direction: row;
@@ -143,28 +151,28 @@
 		box-sizing: content-box;
 		width: 16px;
 		height: 16px;
-		border: 2px solid var(--pui-border-disabled);
-		transition: border-color var(--pui-transition-fast) 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: border-color var(--pui-transition-slower) 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-primary);
+		border-color: var(--ui-accent);
 	}
 
 	input:disabled:before {
-		border-color: var(--pui-border-disabled);
-		background-color: var(--pui-bg-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: '';
@@ -174,7 +182,7 @@
 		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: 100vh;
@@ -184,11 +192,11 @@
 		opacity: 0.5;
 	}
 	:global(.dark) input:after {
-		background-color: var(--pui-color-primary);
+		background-color: var(--ui-accent);
 	}
 
 	input[type='checkbox']:before {
-		border-radius: var(--pui-radius-sm);
+		border-radius: 4px;
 	}
 	input[type='checkbox']:after {
 		width: 7px;
@@ -196,49 +204,46 @@
 		border-radius: 0;
 		transform: translate(-50%, -85%) scale(0) rotate(45deg);
 		background-color: transparent;
-		box-shadow: 4px 4px 0px 0px var(--pui-color-primary);
+		box-shadow: 4px 4px 0px 0px var(--ui-primary);
 	}
 	:global(.dark) input[type='checkbox']:after {
-		box-shadow: 4px 4px 0px 0px var(--pui-color-primary);
+		box-shadow: 4px 4px 0px 0px var(--ui-accent);
 	}
 	input[type='checkbox']:checked:after {
-		-webkit-animation: toggleOnCheckbox var(--pui-transition-fast) var(--pui-ease-out) forwards;
-		animation: toggleOnCheckbox var(--pui-transition-fast) var(--pui-ease-out) forwards;
+		-webkit-animation: toggleOnCheckbox 0.2s ease forwards;
+		animation: toggleOnCheckbox 0.2s ease forwards;
 	}
-
-	/* Indeterminate state */
 	input[type='checkbox']:indeterminate:before {
-		border-color: var(--pui-color-primary);
+		border-color: var(--ui-primary);
 	}
 	:global(.dark) input[type='checkbox']:indeterminate:before {
-		border-color: var(--pui-color-secondary);
+		border-color: var(--ui-accent);
 	}
 	input[type='checkbox']:indeterminate:after {
 		width: 10px;
 		height: 2px;
 		border-radius: 1px;
-		background-color: var(--pui-color-primary);
+		background-color: var(--ui-primary);
 		box-shadow: none;
 		transform: translate(-50%, -50%) scale(1);
 	}
 	:global(.dark) input[type='checkbox']:indeterminate:after {
-		background-color: var(--pui-color-secondary);
+		background-color: var(--ui-accent);
 	}
-
 	input[type='checkbox'].filled:before {
-		border-radius: var(--pui-radius-sm);
+		border-radius: 4px;
 		transition:
-			border-color var(--pui-transition-fast) var(--pui-ease-out),
-			background-color var(--pui-transition-fast) var(--pui-ease-out);
+			0.2s border-color ease,
+			0.2s background-color ease;
 	}
 	input[type='checkbox'].filled:checked:not(:disabled):before {
-		background-color: var(--pui-color-primary);
+		background-color: var(--ui-primary);
 	}
 	:global(.dark) input[type='checkbox'].filled:checked:not(:disabled):before {
-		background-color: var(--pui-color-primary);
+		background-color: var(--ui-accent);
 	}
 	input[type='checkbox'].filled:not(:disabled):after {
-		box-shadow: 4px 4px 0px 0px var(--pui-color-white);
+		box-shadow: 4px 4px 0px 0px white;
 	}
 	@-webkit-keyframes toggleOnCheckbox {
 		0% {
@@ -268,10 +273,10 @@
 	}
 
 	input.error:before {
-		border-color: var(--pui-text-danger) !important;
+		border-color: var(--danger-text) !important;
 	}
 
 	.error-text {
-		color: var(--pui-text-danger);
+		color: var(--danger-text);
 	}
 </style>

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

@@ -1,29 +1,38 @@
 import type { Snippet } from 'svelte';
-interface Props {
-    /** HTML name attribute for the checkbox */
+export interface CheckboxProps {
+    /** HTML name attribute for the checkbox (falls back to label, then auto-generated) */
     name?: string;
+    /** Label text displayed next to the checkbox */
     label?: string;
+    /** Mark field as required (shows asterisk) */
     required?: boolean;
+    /** Additional CSS classes */
     class?: string;
+    /** Custom ID for the input element */
     inputId?: string;
+    /** Disable the checkbox */
     disabled?: boolean;
+    /** Show error state styling */
     showError?: boolean;
+    /** Error message to display */
     errorText?: string;
+    /** Whether the checkbox is checked (bindable) */
     checked?: boolean;
     /** When true, the checkbox state is controlled externally only. Clicking will call onchange but won't toggle the checkbox. */
     controlled?: boolean;
     /** Whether the checkbox is in an indeterminate state */
     indeterminate?: boolean;
+    /** Callback when checked state changes */
     onchange?: (e: boolean) => void;
     /** Accessible label for screen readers (use when no visible label) */
     ariaLabel?: string;
-    /** Rich tooltip content using a Svelte snippet */
-    tooltipContent?: Snippet;
     /** 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 Checkbox: import("svelte").Component<Props, {}, "checked">;
+declare const Checkbox: import("svelte").Component<CheckboxProps, {}, "checked">;
 type Checkbox = ReturnType<typeof Checkbox>;
 export default Checkbox;

package/dist/form/Chips.svelte

@@ -5,7 +5,8 @@
 	import { iconCheck } from '../icon/index.js';
 	import Button from '../ui/Button.svelte';
 
-	interface Props {
+	export interface ChipsProps {
+		/** Label text displayed above the chips */
 		label?: string;
 		/** Visual style variant for chips */
 		variant?: ButtonVariant;
@@ -13,18 +14,31 @@
 		selectedVariant?: ButtonVariant;
 		/** Visual style variant for deselected chips (overrides variant for unselected state) */
 		deselectedVariant?: ButtonVariant;
+		/** Available chip 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 chips */
 		disabled?: boolean;
+		/** Selected value for single selection mode (bindable) */
 		value?: string;
+		/** Selected values for multiple selection mode (bindable) */
 		values?: string[];
+		/** Allow selecting multiple chips */
 		multiple?: boolean;
+		/** Allow deselecting the current selection */
 		deselectable?: boolean;
+		/** Position of the tooltip */
 		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		/** Callback when selection changes */
 		onchange?: (e: string | string[] | undefined) => void;
 	}
 
@@ -46,7 +60,7 @@
 		multiple = false,
 		deselectable = true,
 		onchange = undefined
-	}: Props = $props();
+	}: ChipsProps = $props();
 
 	const nonce = Math.random().toString(36).substring(2, 15);
 	const randomName = $derived(label + nonce);
@@ -70,6 +84,8 @@
 			onchange?.(values.length > 0 ? values : undefined);
 		}
 	}
+
+
 </script>
 
 <div class="radio-container {containerClass}">
@@ -109,34 +125,34 @@
 <style>
 	.radio-options {
 		display: flex;
-		gap: var(--pui-spacing-2);
-		border-radius: var(--pui-radius-lg);
+		gap: 0.5rem;
+		border-radius: 6px;
 	}
 
 	.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);
 	}
 
 	:global(.chip) {
-		padding: var(--pui-spacing-1) var(--pui-spacing-4) !important;
-		border-radius: var(--pui-radius-full) !important;
+		padding: 0.25rem 1rem !important;
+		border-radius: 5rem !important;
 	}
 
 	:global(.chip.checked) {
-		padding-left: var(--pui-spacing-1) !important;
-		padding-right: var(--pui-spacing-2) !important;
+		padding-left: 0.3rem !important;
+		padding-right: 0.5rem !important;
 	}
 
 	:global(.chip .button) {
-		gap: var(--pui-spacing-1);
+		gap: 0.25rem;
 	}
 </style>

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

@@ -1,6 +1,7 @@
 import type { ComboBoxItem } from '../models/ComboBoxItem.js';
 import type { ButtonVariant } from '../ui/ButtonVariant.js';
-interface Props {
+export interface ChipsProps {
+    /** Label text displayed above the chips */
     label?: string;
     /** Visual style variant for chips */
     variant?: ButtonVariant;
@@ -8,20 +9,33 @@ interface Props {
     selectedVariant?: ButtonVariant;
     /** Visual style variant for deselected chips (overrides variant for unselected state) */
     deselectedVariant?: ButtonVariant;
+    /** Available chip 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 chips */
     disabled?: boolean;
+    /** Selected value for single selection mode (bindable) */
     value?: string;
+    /** Selected values for multiple selection mode (bindable) */
     values?: string[];
+    /** Allow selecting multiple chips */
     multiple?: boolean;
+    /** Allow deselecting the current selection */
     deselectable?: boolean;
+    /** Position of the tooltip */
     tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+    /** Callback when selection changes */
     onchange?: (e: string | string[] | undefined) => void;
 }
-declare const Chips: import("svelte").Component<Props, {}, "value" | "values">;
+declare const Chips: import("svelte").Component<ChipsProps, {}, "value" | "values">;
 type Chips = ReturnType<typeof Chips>;
 export default Chips;

package/dist/form/ComboBox.svelte

@@ -8,7 +8,7 @@
 		loading: boolean;
 		open: boolean;
 		htmlElement?: HTMLElement | undefined;
-		showNoResultsMessage: boolean;
+		hideNoResults: boolean;
 		loadingText: string;
 		onselection: (value: ComboBoxItem) => void;
 		onkeydown?: (e: KeyboardEvent) => boolean;
@@ -20,7 +20,7 @@
 		loading,
 		open,
 		htmlElement,
-		showNoResultsMessage,
+		hideNoResults,
 		loadingText,
 		onselection: onSelection,
 		onkeydown
@@ -72,7 +72,7 @@
 		{:else if error}
 			<div class="error">{error}</div>
 		{:else if value && options?.length === 0}
-			{#if showNoResultsMessage}
+			{#if !hideNoResults}
 				<div class="no-results">No results found</div>
 			{/if}
 		{:else}
@@ -104,21 +104,32 @@
 {/if}
 
 <style>
+	/* .item {
+		&:hover,
+		&.selected {
+			@apply bg-main-border;
+			@apply text-accent;
+		}
+	} */
+
 	.combobox {
 		position: absolute;
 		width: 100%;
-		z-index: var(--pui-z-dropdown);
-		border-radius: var(--pui-radius-base);
+		z-index: 50;
+		border-radius: 0.25rem;
 		overflow: hidden;
-		border: 1px solid var(--pui-border-default);
-		background-color: var(--pui-input-bg);
+		border: 1px solid var(--main-border-color);
+		background-color: var(--input-bg-color);
+		/* absolute w-full z-50 rounded overflow-hidden
+			border border-main-border bg-input */
 	}
 
 	.combobox-panel {
 		overflow: auto;
 		max-height: 20rem;
-		border: 1px solid var(--pui-border-default);
+		border: 1px solid var(--border-color);
 		border-top: none;
+		/* max-h-80 overflow-auto */
 	}
 
 	.combobox-item {
@@ -127,32 +138,31 @@
 		align-items: center;
 		text-align: left;
 		background-color: transparent;
-		color: var(--pui-text-primary);
+		color: var(--text-color);
 		border: none;
-		font-size: var(--pui-font-size-md);
+		font-size: 1rem;
 		cursor: pointer;
-		gap: var(--pui-spacing-2);
+		gap: 0.5rem;
+		/* item w-full flex items-center text-left */
 	}
 
 	.p-2 {
-		padding: var(--pui-spacing-2);
+		padding: 0.5rem;
 	}
 
-	.error,
-	.loading,
-	.no-results {
-		padding: var(--pui-spacing-2);
+	.error, .loading, .no-results {
+		padding: 0.5rem;
 	}
 
 	.no-results {
-		color: var(--pui-text-primary);
-		border: 1px solid var(--pui-border-default);
+		color: var(--text-color);
+		border: 1px solid var(--border-color);
 		border-top: none;
 	}
 
 	.combobox-item.selected,
 	.combobox-item:hover {
-		background-color: var(--pui-bg-hover);
-		color: var(--pui-accent-color);
+		background-color: var(--border-color);
+		color: rgb(var(--accent-color-rgb));
 	}
 </style>

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

@@ -5,7 +5,7 @@ interface Props {
     loading: boolean;
     open: boolean;
     htmlElement?: HTMLElement | undefined;
-    showNoResultsMessage: boolean;
+    hideNoResults: boolean;
     loadingText: string;
     onselection: (value: ComboBoxItem) => void;
     onkeydown?: (e: KeyboardEvent) => boolean;