@placeholderco/placeholder-ui 1.0.11 → 2.0.0

package/dist/form/PasswordInput.svelte

@@ -1,252 +0,0 @@
-<script lang="ts">
-	import { type Snippet } from 'svelte';
-	import FormGroup from './FormGroup.svelte';
-	import Loader from '../ui/Loader.svelte';
-	import Icon from '../icon/Icon.svelte';
-	import { iconEye, iconEyeOff } from '../icon/index.js';
-
-	interface Props {
-		label?: string;
-		inputId?: string;
-		placeholder?: string;
-		required?: boolean;
-		autofocus?: boolean;
-		noAutocomplete?: boolean;
-		loading?: boolean;
-		groupClass?: string;
-		leftIconSvg?: string;
-		class?: string;
-		containerClass?: string;
-		disabled?: boolean;
-		value?: string;
-		visible?: boolean;
-		isFocused?: boolean;
-		showError?: boolean;
-		errorText?: string;
-		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
-		tooltipText?: string;
-		onenter?: (v: string) => void;
-		onchange?: (e: Event) => void;
-		oninput?: (e: Event) => void;
-		onkeydown?: (e: KeyboardEvent) => void;
-		onfocus?: (e: FocusEvent) => void;
-		onblur?: (e: FocusEvent) => void;
-		onVisibilityChange?: (visible: boolean) => void;
-		children?: Snippet;
-	}
-
-	let {
-		label = '',
-		inputId = undefined,
-		placeholder = undefined,
-		required = false,
-		autofocus = false,
-		noAutocomplete = false,
-		loading = false,
-		class: classes = '',
-		containerClass = '',
-		groupClass = '',
-		leftIconSvg = undefined,
-		disabled = false,
-		value = $bindable(''),
-		visible = $bindable(false),
-		isFocused = false,
-		showError = false,
-		errorText = '',
-		tooltipLocation = 'top',
-		tooltipText = undefined,
-		onenter = undefined,
-		onchange = undefined,
-		oninput = undefined,
-		onkeydown = undefined,
-		onfocus = undefined,
-		onblur = undefined,
-		onVisibilityChange = undefined,
-		children
-	}: Props = $props();
-
-	// Generate ID on client-side only to avoid hydration mismatches
-	let autoId = $state('');
-
-	$effect(() => {
-		if (!inputId && !label) {
-			autoId = Math.random().toString(36).substring(2, 8);
-		}
-	});
-
-	let id = $derived.by(() => {
-		if (inputId) return inputId;
-		if (label) return `input-${label.toLowerCase().replace(/ /g, '-')}`;
-		return autoId;
-	});
-
-	const inputType = $derived(visible ? 'text' : 'password');
-
-	const extraClasses: string[] = $derived.by(() => {
-		const classes = [];
-		if (leftIconSvg) classes.push('with-left-icon');
-		if (disabled) classes.push('disabled');
-		if (showError) classes.push('show-error');
-		return classes;
-	});
-
-	function toggleVisibility() {
-		visible = !visible;
-		onVisibilityChange?.(visible);
-	}
-</script>
-
-<div class="password-container {containerClass}">
-	<FormGroup {label} {required} {id} class={groupClass} {tooltipLocation} {tooltipText}>
-		<div class="password-input">
-			<!-- svelte-ignore a11y_autofocus -->
-			<input
-				class="password {classes} {extraClasses.join(' ')}"
-				type={inputType}
-				{id}
-				{placeholder}
-				{disabled}
-				{autofocus}
-				{required}
-				autocomplete={noAutocomplete ? 'off' : 'current-password'}
-				bind:value
-				onblur={() => {
-					isFocused = false;
-					onblur?.(new FocusEvent('blur'));
-				}}
-				onfocus={() => {
-					isFocused = true;
-					onfocus?.(new FocusEvent('focus'));
-				}}
-				{onchange}
-				{oninput}
-				onkeydown={(e) => {
-					if (e.key === 'Enter') {
-						onenter?.(value);
-					}
-					onkeydown?.(e);
-				}}
-			/>
-			{#if leftIconSvg && !loading}
-				<div class="left-icon">
-					<Icon svg={leftIconSvg} size="1.125em" />
-				</div>
-			{/if}
-			{#if loading}
-				<div class="loader-container">
-					<Loader sizeOverride="1.1rem" />
-				</div>
-			{:else}
-				<button
-					type="button"
-					class="visibility-toggle"
-					onclick={toggleVisibility}
-					tabindex={-1}
-					aria-label={visible ? 'Hide password' : 'Show password'}
-					{disabled}
-				>
-					<Icon svg={visible ? iconEyeOff : iconEye} size="1.125em" />
-				</button>
-			{/if}
-		</div>
-		{#if showError && errorText}
-			<div class="text-error">{errorText}</div>
-		{/if}
-		{@render children?.()}
-	</FormGroup>
-</div>
-
-<style>
-	.password-input {
-		position: relative;
-		display: flex;
-	}
-
-	.password {
-		width: 100%;
-		font-size: var(--pui-font-size-md);
-		line-height: var(--pui-line-height-normal);
-		padding: var(--pui-spacing-1) var(--pui-spacing-10) 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);
-		box-sizing: border-box;
-	}
-
-	.password.disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-		background: var(--pui-input-bg-disabled);
-	}
-
-	.password:focus {
-		border-color: var(--pui-input-border-focus);
-		outline: 2px solid transparent;
-		outline-offset: 2px;
-	}
-
-	.password:focus ~ .left-icon {
-		color: var(--pui-input-border-focus);
-	}
-
-	.with-left-icon {
-		padding-left: 2rem;
-	}
-
-	.left-icon {
-		position: absolute;
-		pointer-events: none;
-		top: 50%;
-		transform: translateY(-50%);
-		left: 0.5rem;
-		color: var(--pui-text-muted);
-	}
-
-	.visibility-toggle {
-		position: absolute;
-		right: 0.5rem;
-		top: 50%;
-		transform: translateY(-50%);
-		background: none;
-		border: none;
-		cursor: pointer;
-		padding: 0.25rem;
-		color: var(--pui-text-muted);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		border-radius: var(--pui-radius-sm);
-		transition: color var(--pui-transition-fast) var(--pui-ease-in-out);
-	}
-
-	.visibility-toggle:hover:not(:disabled) {
-		color: var(--pui-color-gray-700);
-	}
-
-	:global(.dark) .visibility-toggle:hover:not(:disabled) {
-		color: var(--pui-color-gray-300);
-	}
-
-	.visibility-toggle:disabled {
-		cursor: not-allowed;
-		opacity: 0.5;
-	}
-
-	.loader-container {
-		position: absolute;
-		right: 0.5rem;
-		top: 50%;
-		transform: translateY(-50%);
-	}
-
-	.show-error {
-		border-color: var(--pui-text-danger);
-	}
-
-	.text-error {
-		color: var(--pui-text-danger);
-		font-size: var(--pui-font-size-sm);
-		margin-top: var(--pui-spacing-1);
-	}
-</style>

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

@@ -1,33 +0,0 @@
-import { type Snippet } from 'svelte';
-interface Props {
-    label?: string;
-    inputId?: string;
-    placeholder?: string;
-    required?: boolean;
-    autofocus?: boolean;
-    noAutocomplete?: boolean;
-    loading?: boolean;
-    groupClass?: string;
-    leftIconSvg?: string;
-    class?: string;
-    containerClass?: string;
-    disabled?: boolean;
-    value?: string;
-    visible?: boolean;
-    isFocused?: boolean;
-    showError?: boolean;
-    errorText?: string;
-    tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
-    tooltipText?: string;
-    onenter?: (v: string) => void;
-    onchange?: (e: Event) => void;
-    oninput?: (e: Event) => void;
-    onkeydown?: (e: KeyboardEvent) => void;
-    onfocus?: (e: FocusEvent) => void;
-    onblur?: (e: FocusEvent) => void;
-    onVisibilityChange?: (visible: boolean) => void;
-    children?: Snippet;
-}
-declare const PasswordInput: import("svelte").Component<Props, {}, "value" | "visible">;
-type PasswordInput = ReturnType<typeof PasswordInput>;
-export default PasswordInput;

package/dist/form/Rating.svelte

@@ -1,235 +0,0 @@
-<script lang="ts">
-	import Icon from '../icon/Icon.svelte';
-	import { iconStar } from '../icon/index.js';
-	import FormGroup from './FormGroup.svelte';
-
-	interface Props {
-		label?: string;
-		value?: number;
-		count?: number;
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		color?: 'primary' | 'secondary' | 'accent' | 'warning';
-		emptySymbol?: string;
-		fullSymbol?: string;
-		readOnly?: boolean;
-		fractions?: 1 | 2 | 4;
-		highlightSelectedOnly?: boolean;
-		required?: boolean;
-		showError?: boolean;
-		errorText?: string;
-		class?: string;
-		onchange?: (value: number) => void;
-		onhover?: (value: number) => void;
-	}
-
-	let {
-		label = '',
-		value = $bindable(0),
-		count = 5,
-		size = 'md',
-		color = 'warning',
-		emptySymbol = undefined,
-		fullSymbol = undefined,
-		readOnly = false,
-		fractions = 1,
-		highlightSelectedOnly = false,
-		required = false,
-		showError = false,
-		errorText = '',
-		class: classes = '',
-		onchange,
-		onhover
-	}: Props = $props();
-
-	let hoverValue = $state(-1);
-
-	const displayValue = $derived(hoverValue >= 0 ? hoverValue : value);
-
-	const sizeMap: Record<string, string> = {
-		xs: '16px',
-		sm: '20px',
-		md: '24px',
-		lg: '32px',
-		xl: '40px'
-	};
-
-	const iconSize = $derived(sizeMap[size] || '24px');
-
-	function handleClick(index: number, fraction: number = 1) {
-		if (readOnly) return;
-		const newValue = index + fraction / fractions;
-		value = newValue;
-		onchange?.(newValue);
-	}
-
-	function handleMouseEnter(index: number, fraction: number = 1) {
-		if (readOnly) return;
-		const newHoverValue = index + fraction / fractions;
-		hoverValue = newHoverValue;
-		onhover?.(newHoverValue);
-	}
-
-	function handleMouseLeave() {
-		hoverValue = -1;
-	}
-
-	function getSymbolState(index: number): 'empty' | 'full' | 'partial' {
-		const currentValue = displayValue;
-		if (highlightSelectedOnly) {
-			return Math.ceil(currentValue) === index + 1 ? 'full' : 'empty';
-		}
-		if (currentValue >= index + 1) return 'full';
-		if (currentValue > index) return 'partial';
-		return 'empty';
-	}
-
-	function getPartialWidth(index: number): number {
-		const currentValue = displayValue;
-		if (currentValue <= index) return 0;
-		if (currentValue >= index + 1) return 100;
-		return (currentValue - index) * 100;
-	}
-</script>
-
-<FormGroup {label} {required} {showError} {errorText} class={classes}>
-	<div
-		class="rating size-{size} color-{color}"
-		class:read-only={readOnly}
-		role="slider"
-		tabindex={readOnly ? -1 : 0}
-		aria-valuenow={value}
-		aria-valuemin={0}
-		aria-valuemax={count}
-		aria-label={label || 'Rating'}
-		onmouseleave={handleMouseLeave}
-	>
-		{#each Array(count) as _, index (index)}
-			{@const state = getSymbolState(index)}
-			{@const partialWidth = getPartialWidth(index)}
-			<div class="rating-symbol-wrapper">
-				{#if fractions > 1}
-					<!-- Fractional rating with invisible click zones -->
-					{#each Array(fractions) as __, fractionIndex (fractionIndex)}
-						<button
-							type="button"
-							class="rating-fraction-zone"
-							style="width: {100 / fractions}%; left: {(fractionIndex / fractions) * 100}%;"
-							onclick={() => handleClick(index, fractionIndex + 1)}
-							onmouseenter={() => handleMouseEnter(index, fractionIndex + 1)}
-							disabled={readOnly}
-							aria-label="Rate {index + (fractionIndex + 1) / fractions}"
-						></button>
-					{/each}
-				{:else}
-					<button
-						type="button"
-						class="rating-button"
-						onclick={() => handleClick(index)}
-						onmouseenter={() => handleMouseEnter(index, 1)}
-						disabled={readOnly}
-						aria-label="Rate {index + 1}"
-					></button>
-				{/if}
-				<div class="rating-symbol empty">
-					<Icon svg={emptySymbol || iconStar} size={iconSize} />
-				</div>
-				<div class="rating-symbol full" style="width: {partialWidth}%;">
-					<Icon svg={fullSymbol || iconStar} size={iconSize} />
-				</div>
-			</div>
-		{/each}
-	</div>
-</FormGroup>
-
-<style>
-	.rating {
-		display: inline-flex;
-		gap: var(--pui-spacing-1);
-	}
-
-	.rating.read-only {
-		pointer-events: none;
-	}
-
-	.rating-symbol-wrapper {
-		position: relative;
-		cursor: pointer;
-	}
-
-	.read-only .rating-symbol-wrapper {
-		cursor: default;
-	}
-
-	.rating-button,
-	.rating-fraction-zone {
-		position: absolute;
-		top: 0;
-		height: 100%;
-		background: transparent;
-		border: none;
-		cursor: pointer;
-		z-index: 2;
-		padding: 0;
-	}
-
-	.rating-button {
-		left: 0;
-		width: 100%;
-	}
-
-	.rating-button:disabled,
-	.rating-fraction-zone:disabled {
-		cursor: default;
-	}
-
-	.rating-symbol {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		transition: transform var(--pui-transition-fast) var(--pui-ease-out);
-	}
-
-	.rating-symbol-wrapper:hover .rating-symbol {
-		transform: scale(1.1);
-	}
-
-	.read-only .rating-symbol-wrapper:hover .rating-symbol {
-		transform: none;
-	}
-
-	.rating-symbol.empty {
-		color: var(--pui-color-gray-300);
-	}
-
-	:global(.dark) .rating-symbol.empty {
-		color: var(--pui-color-dark-border);
-	}
-
-	.rating-symbol.full {
-		position: absolute;
-		top: 0;
-		left: 0;
-		overflow: hidden;
-		color: var(--rating-color, var(--pui-color-warning));
-	}
-
-	.rating-symbol.full :global(svg) {
-		fill: currentColor;
-	}
-
-	/* Colors */
-	.color-primary {
-		--rating-color: var(--pui-color-primary);
-	}
-	.color-secondary {
-		--rating-color: var(--pui-color-secondary);
-	}
-	.color-accent {
-		--rating-color: var(--pui-color-accent);
-	}
-	.color-warning {
-		--rating-color: var(--pui-color-warning);
-	}
-
-	/* Sizes via icon prop */
-</style>

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

@@ -1,21 +0,0 @@
-interface Props {
-    label?: string;
-    value?: number;
-    count?: number;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    color?: 'primary' | 'secondary' | 'accent' | 'warning';
-    emptySymbol?: string;
-    fullSymbol?: string;
-    readOnly?: boolean;
-    fractions?: 1 | 2 | 4;
-    highlightSelectedOnly?: boolean;
-    required?: boolean;
-    showError?: boolean;
-    errorText?: string;
-    class?: string;
-    onchange?: (value: number) => void;
-    onhover?: (value: number) => void;
-}
-declare const Rating: import("svelte").Component<Props, {}, "value">;
-type Rating = ReturnType<typeof Rating>;
-export default Rating;