@placeholderco/placeholder-ui 1.0.3 → 1.0.6

package/dist/form/Checkbox.svelte

@@ -1,201 +1,201 @@
-<script lang="ts">
-	interface Props {
-		label?: string;
-		required?: boolean;
-		class?: string;
-		inputId?: string;
-		disabled?: boolean;
-		showError?: boolean;
-		errorText?: string;
-		checked?: boolean;
-		onchange?: (e: boolean) => void;
-	}
-
-	let {
-		label,
-		required = false,
-		class: classes = '',
-		inputId = undefined,
-		disabled = false,
-		showError = false,
-		errorText = '',
-		checked = $bindable(false),
-		onchange = undefined
-	}: Props = $props();
-
-	const nonce = Math.random().toString(36).substring(2, 15);
-
-	const id = $derived(inputId ? inputId : label ? `input-${label}` : `input-${nonce}`);
-</script>
-
-<div class="checkbox-container {disabled ? 'disabled' : ''}">
-	<label for={id}>
-		<input
-			class="checkbox {showError && 'error'} {classes}"
-			type="checkbox"
-			{id}
-			{disabled}
-			bind:checked
-			onchange={() => onchange?.(checked)}
-		/>
-		<span class="label-text"
-			>{label}
-			{#if required}
-				<span class="required">*</span>
-			{/if}</span
-		>
-	</label>
-	{#if showError && errorText}
-		<div class="error-text">{errorText}</div>
-	{/if}
-</div>
-
-<style>
-	.checkbox-container {
-		display: flex;
-		align-items: center;
-		gap: var(--pui-spacing-1_5);
-	}
-
-	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 var(--pui-border-disabled);
-		transition: border-color var(--pui-transition-fast) var(--pui-ease-out);
-	}
-	:global(.dark) input:before {
-		border-color: var(--pui-color-gray-600);
-	}
-	input:checked:before {
-		border-color: var(--pui-color-primary);
-		transition: border-color var(--pui-transition-slower) var(--pui-ease-out);
-	}
-	:global(.dark) input:checked:before {
-		border-color: var(--pui-color-primary);
-	}
-
-	input:disabled:before {
-		border-color: var(--pui-border-disabled);
-		background-color: var(--pui-bg-disabled);
-		opacity: 0.5;
-	}
-	:global(.dark) input:disabled:before {
-		border-color: var(--pui-color-gray-600);
-		background-color: var(--pui-color-gray-600);
-	}
-	input:after {
-		content: '';
-		display: block;
-		position: absolute;
-		box-sizing: content-box;
-		top: 50%;
-		left: 50%;
-		transform-origin: 50% 50%;
-		background-color: var(--pui-color-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(--pui-color-primary);
-	}
-
-	input[type='checkbox']:before {
-		border-radius: var(--pui-radius-sm);
-	}
-	input[type='checkbox']:after {
-		width: 7px;
-		height: 14px;
-		border-radius: 0;
-		transform: translate(-50%, -85%) scale(0) rotate(45deg);
-		background-color: transparent;
-		box-shadow: 4px 4px 0px 0px var(--pui-color-primary);
-	}
-	:global(.dark) input[type='checkbox']:after {
-		box-shadow: 4px 4px 0px 0px var(--pui-color-primary);
-	}
-	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;
-	}
-	input[type='checkbox'].filled:before {
-		border-radius: var(--pui-radius-sm);
-		transition:
-			border-color var(--pui-transition-fast) var(--pui-ease-out),
-			background-color var(--pui-transition-fast) var(--pui-ease-out);
-	}
-	input[type='checkbox'].filled:checked:not(:disabled):before {
-		background-color: var(--pui-color-primary);
-	}
-	:global(.dark) input[type='checkbox'].filled:checked:not(:disabled):before {
-		background-color: var(--pui-color-primary);
-	}
-	input[type='checkbox'].filled:not(:disabled):after {
-		box-shadow: 4px 4px 0px 0px var(--pui-color-white);
-	}
-	@-webkit-keyframes toggleOnCheckbox {
-		0% {
-			opacity: 0;
-			transform: translate(-50%, -85%) scale(0) rotate(45deg);
-		}
-		70% {
-			opacity: 1;
-			transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
-		}
-		100% {
-			transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
-		}
-	}
-	@keyframes toggleOnCheckbox {
-		0% {
-			opacity: 0;
-			transform: translate(-50%, -85%) scale(0) rotate(45deg);
-		}
-		70% {
-			opacity: 1;
-			transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
-		}
-		100% {
-			transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
-		}
-	}
-
-	input.error:before {
-		border-color: var(--pui-text-danger) !important;
-	}
-
-	.error-text {
-		color: var(--pui-text-danger);
-	}
-</style>
+<script lang="ts">
+	interface Props {
+		label?: string;
+		required?: boolean;
+		class?: string;
+		inputId?: string;
+		disabled?: boolean;
+		showError?: boolean;
+		errorText?: string;
+		checked?: boolean;
+		onchange?: (e: boolean) => void;
+	}
+
+	let {
+		label,
+		required = false,
+		class: classes = '',
+		inputId = undefined,
+		disabled = false,
+		showError = false,
+		errorText = '',
+		checked = $bindable(false),
+		onchange = undefined
+	}: Props = $props();
+
+	const nonce = Math.random().toString(36).substring(2, 15);
+
+	const id = $derived(inputId ? inputId : label ? `input-${label}` : `input-${nonce}`);
+</script>
+
+<div class="checkbox-container {disabled ? 'disabled' : ''}">
+	<label for={id}>
+		<input
+			class="checkbox {showError && 'error'} {classes}"
+			type="checkbox"
+			{id}
+			{disabled}
+			bind:checked
+			onchange={() => onchange?.(checked)}
+		/>
+		<span class="label-text"
+			>{label}
+			{#if required}
+				<span class="required">*</span>
+			{/if}</span
+		>
+	</label>
+	{#if showError && errorText}
+		<div class="error-text">{errorText}</div>
+	{/if}
+</div>
+
+<style>
+	.checkbox-container {
+		display: flex;
+		align-items: center;
+		gap: var(--pui-spacing-1_5);
+	}
+
+	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 var(--pui-border-disabled);
+		transition: border-color var(--pui-transition-fast) var(--pui-ease-out);
+	}
+	:global(.dark) input:before {
+		border-color: var(--pui-color-gray-600);
+	}
+	input:checked:before {
+		border-color: var(--pui-color-primary);
+		transition: border-color var(--pui-transition-slower) var(--pui-ease-out);
+	}
+	:global(.dark) input:checked:before {
+		border-color: var(--pui-color-primary);
+	}
+
+	input:disabled:before {
+		border-color: var(--pui-border-disabled);
+		background-color: var(--pui-bg-disabled);
+		opacity: 0.5;
+	}
+	:global(.dark) input:disabled:before {
+		border-color: var(--pui-color-gray-600);
+		background-color: var(--pui-color-gray-600);
+	}
+	input:after {
+		content: '';
+		display: block;
+		position: absolute;
+		box-sizing: content-box;
+		top: 50%;
+		left: 50%;
+		transform-origin: 50% 50%;
+		background-color: var(--pui-color-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(--pui-color-primary);
+	}
+
+	input[type='checkbox']:before {
+		border-radius: var(--pui-radius-sm);
+	}
+	input[type='checkbox']:after {
+		width: 7px;
+		height: 14px;
+		border-radius: 0;
+		transform: translate(-50%, -85%) scale(0) rotate(45deg);
+		background-color: transparent;
+		box-shadow: 4px 4px 0px 0px var(--pui-color-primary);
+	}
+	:global(.dark) input[type='checkbox']:after {
+		box-shadow: 4px 4px 0px 0px var(--pui-color-primary);
+	}
+	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;
+	}
+	input[type='checkbox'].filled:before {
+		border-radius: var(--pui-radius-sm);
+		transition:
+			border-color var(--pui-transition-fast) var(--pui-ease-out),
+			background-color var(--pui-transition-fast) var(--pui-ease-out);
+	}
+	input[type='checkbox'].filled:checked:not(:disabled):before {
+		background-color: var(--pui-color-primary);
+	}
+	:global(.dark) input[type='checkbox'].filled:checked:not(:disabled):before {
+		background-color: var(--pui-color-primary);
+	}
+	input[type='checkbox'].filled:not(:disabled):after {
+		box-shadow: 4px 4px 0px 0px var(--pui-color-white);
+	}
+	@-webkit-keyframes toggleOnCheckbox {
+		0% {
+			opacity: 0;
+			transform: translate(-50%, -85%) scale(0) rotate(45deg);
+		}
+		70% {
+			opacity: 1;
+			transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
+		}
+		100% {
+			transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
+		}
+	}
+	@keyframes toggleOnCheckbox {
+		0% {
+			opacity: 0;
+			transform: translate(-50%, -85%) scale(0) rotate(45deg);
+		}
+		70% {
+			opacity: 1;
+			transform: translate(-50%, -85%) scale(0.9) rotate(45deg);
+		}
+		100% {
+			transform: translate(-50%, -85%) scale(0.8) rotate(45deg);
+		}
+	}
+
+	input.error:before {
+		border-color: var(--pui-text-danger) !important;
+	}
+
+	.error-text {
+		color: var(--pui-text-danger);
+	}
+</style>

package/dist/form/Chips.svelte

@@ -1,128 +1,128 @@
-<script lang="ts">
-	import type { ComboBoxItem } from '../models/ComboBoxItem.js';
-	import FormGroup from './FormGroup.svelte';
-	import { iconCheck } from '../icon/index.js';
-	import Button from '../ui/Button.svelte';
-
-	interface Props {
-		label: string;
-		options: ComboBoxItem[];
-		required?: boolean;
-		showError?: boolean;
-		errorText?: string;
-		class?: string;
-		containerClass?: string;
-		disabled?: boolean;
-		value?: string;
-		values?: string[];
-		multiple?: boolean;
-		deselectable?: boolean;
-		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
-		onchange?: (e: string | string[] | undefined) => void;
-	}
-
-	let {
-		label,
-		options,
-		required = false,
-		showError = false,
-		errorText = '',
-		class: classes = '',
-		containerClass = '',
-		disabled = false,
-		tooltipLocation = 'top',
-		value = $bindable(),
-		values = $bindable([]),
-		multiple = false,
-		deselectable = true,
-		onchange = undefined
-	}: Props = $props();
-
-	const nonce = Math.random().toString(36).substring(2, 15);
-	const randomName = $derived(label + nonce);
-
-	function handleChange(option: ComboBoxItem) {
-		if (!multiple) {
-			if (option.value === value) {
-				if (!deselectable) return;
-				value = undefined;
-			} else {
-				value = option.value;
-			}
-			onchange?.(value);
-		} else {
-			if (values.includes(option.value)) {
-				if (!deselectable) return;
-				values = values.filter((v) => v !== option.value);
-			} else {
-				values = [...values, option.value];
-			}
-			onchange?.(values.length > 0 ? values : undefined);
-		}
-	}
-</script>
-
-<div class="radio-container {containerClass}">
-	<FormGroup {label} class={classes} {required} {tooltipLocation}>
-		<div
-			class="
-        radio-options
-        {required ? 'radio-required' : ''}
-		{showError ? 'error' : ''}
-        {disabled ? 'disabled' : ''}"
-		>
-			{#each options as option}
-				{@const checked = multiple ? values.includes(option.value) : option.value === value}
-				<div class="flex">
-					{#if checked}
-						<Button class="chip checked" {disabled} onclick={() => handleChange(option)} svg={iconCheck} iconSize={'16px'}
-							>{option.label}</Button
-						>
-					{:else}
-						<Button class="chip" {disabled} onclick={() => handleChange(option)}
-							>{option.label}</Button
-						>
-					{/if}
-				</div>
-			{/each}
-		</div>
-		{#if showError && errorText}
-			<div class="error-text">{errorText}</div>
-		{/if}
-	</FormGroup>
-</div>
-
-<style>
-	.radio-options {
-		display: flex;
-		gap: var(--pui-spacing-2);
-		border-radius: var(--pui-radius-lg);
-	}
-
-	.radio-required {
-		padding: var(--pui-spacing-1);
-	}
-
-	.error {
-		border: 1px solid var(--pui-text-danger);
-	}
-
-	.error-text {
-		margin-top: var(--pui-spacing-1);
-		color: var(--pui-text-danger);
-	}
-
-	:global(.chip) {
-		padding: var(--pui-spacing-1) var(--pui-spacing-4) !important;
-		border-radius: var(--pui-radius-full) !important;
-	}
-
-	:global(.chip.checked) {
-		padding-left: var(--pui-spacing-1) !important;
-		padding-right: var(--pui-spacing-2) !important;
-	}
-
-	:global(.chip .button) {
-		gap: var(--pui-spacing-1);
-	}
-</style>
+<script lang="ts">
+	import type { ComboBoxItem } from '../models/ComboBoxItem.js';
+	import FormGroup from './FormGroup.svelte';
+	import { iconCheck } from '../icon/index.js';
+	import Button from '../ui/Button.svelte';
+
+	interface Props {
+		label: string;
+		options: ComboBoxItem[];
+		required?: boolean;
+		showError?: boolean;
+		errorText?: string;
+		class?: string;
+		containerClass?: string;
+		disabled?: boolean;
+		value?: string;
+		values?: string[];
+		multiple?: boolean;
+		deselectable?: boolean;
+		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
+		onchange?: (e: string | string[] | undefined) => void;
+	}
+
+	let {
+		label,
+		options,
+		required = false,
+		showError = false,
+		errorText = '',
+		class: classes = '',
+		containerClass = '',
+		disabled = false,
+		tooltipLocation = 'top',
+		value = $bindable(),
+		values = $bindable([]),
+		multiple = false,
+		deselectable = true,
+		onchange = undefined
+	}: Props = $props();
+
+	const nonce = Math.random().toString(36).substring(2, 15);
+	const randomName = $derived(label + nonce);
+
+	function handleChange(option: ComboBoxItem) {
+		if (!multiple) {
+			if (option.value === value) {
+				if (!deselectable) return;
+				value = undefined;
+			} else {
+				value = option.value;
+			}
+			onchange?.(value);
+		} else {
+			if (values.includes(option.value)) {
+				if (!deselectable) return;
+				values = values.filter((v) => v !== option.value);
+			} else {
+				values = [...values, option.value];
+			}
+			onchange?.(values.length > 0 ? values : undefined);
+		}
+	}
+</script>
+
+<div class="radio-container {containerClass}">
+	<FormGroup {label} class={classes} {required} {tooltipLocation}>
+		<div
+			class="
+        radio-options
+        {required ? 'radio-required' : ''}
+		{showError ? 'error' : ''}
+        {disabled ? 'disabled' : ''}"
+		>
+			{#each options as option}
+				{@const checked = multiple ? values.includes(option.value) : option.value === value}
+				<div class="flex">
+					{#if checked}
+						<Button class="chip checked" {disabled} onclick={() => handleChange(option)} svg={iconCheck} iconSize={'16px'}
+							>{option.label}</Button
+						>
+					{:else}
+						<Button class="chip" {disabled} onclick={() => handleChange(option)}
+							>{option.label}</Button
+						>
+					{/if}
+				</div>
+			{/each}
+		</div>
+		{#if showError && errorText}
+			<div class="error-text">{errorText}</div>
+		{/if}
+	</FormGroup>
+</div>
+
+<style>
+	.radio-options {
+		display: flex;
+		gap: var(--pui-spacing-2);
+		border-radius: var(--pui-radius-lg);
+	}
+
+	.radio-required {
+		padding: var(--pui-spacing-1);
+	}
+
+	.error {
+		border: 1px solid var(--pui-text-danger);
+	}
+
+	.error-text {
+		margin-top: var(--pui-spacing-1);
+		color: var(--pui-text-danger);
+	}
+
+	:global(.chip) {
+		padding: var(--pui-spacing-1) var(--pui-spacing-4) !important;
+		border-radius: var(--pui-radius-full) !important;
+	}
+
+	:global(.chip.checked) {
+		padding-left: var(--pui-spacing-1) !important;
+		padding-right: var(--pui-spacing-2) !important;
+	}
+
+	:global(.chip .button) {
+		gap: var(--pui-spacing-1);
+	}
+</style>