@placeholderco/placeholder-ui 1.0.12 → 2.0.0

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

@@ -1,34 +0,0 @@
-import { type Snippet } from 'svelte';
-interface Props {
-    label?: string;
-    inputId?: string;
-    placeholder?: string;
-    required?: boolean;
-    autofocus?: boolean;
-    /** HTML autocomplete attribute */
-    autocomplete?: string;
-    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;

package/dist/styles/components.css

@@ -1,199 +0,0 @@
-/**
- * Component Variables
- * Component-specific CSS variables for fine-grained customization.
- */
-
-:root {
-	/* ============================================
-	 * FORM INPUTS
-	 * ============================================ */
-	--pui-input-bg: var(--pui-color-white);
-	--pui-input-bg-disabled: var(--pui-color-gray-200);
-	--pui-input-border: var(--pui-border-default);
-	--pui-input-border-focus: var(--pui-color-primary);
-	--pui-input-border-error: var(--pui-color-danger);
-	--pui-input-placeholder: var(--pui-text-placeholder);
-	--pui-input-text: var(--pui-text-primary);
-	--pui-input-padding-y: var(--pui-spacing-1);
-	--pui-input-padding-x: var(--pui-spacing-2);
-	--pui-input-font-size: var(--pui-font-size-md);
-	--pui-input-border-radius: var(--pui-radius-base);
-	--pui-input-border-width: 1px;
-
-	/* ============================================
-	 * BUTTON
-	 * ============================================ */
-	--pui-btn-padding-y: var(--pui-spacing-2);
-	--pui-btn-padding-x: var(--pui-spacing-4);
-	--pui-btn-font-size: var(--pui-font-size-base);
-	--pui-btn-font-weight: var(--pui-font-weight-semibold);
-	--pui-btn-border-radius: var(--pui-radius-md);
-	--pui-btn-border-width: 1px;
-
-	/* ============================================
-	 * PAPER
-	 * ============================================ */
-	--pui-paper-bg: var(--pui-bg-surface);
-	--pui-paper-shadow: var(--pui-shadow-sm);
-	--pui-paper-radius: var(--pui-radius-base);
-	--pui-paper-padding: var(--pui-spacing-3);
-	--pui-paper-title-bg: rgb(252, 252, 252);
-	--pui-paper-title-border: rgb(229, 231, 235);
-	--pui-paper-body-bg: var(--pui-color-white);
-
-	/* ============================================
-	 * DIALOG
-	 * ============================================ */
-	--pui-dialog-backdrop: var(--pui-bg-overlay-dark);
-	--pui-dialog-bg: var(--pui-bg-page);
-	--pui-dialog-radius: var(--pui-radius-base);
-	--pui-dialog-shadow: var(--pui-shadow-lg);
-	--pui-dialog-sm-width: 20rem;
-	--pui-dialog-md-width: 30rem;
-	--pui-dialog-lg-width: 40rem;
-	--pui-dialog-xl-width: 50rem;
-
-	/* ============================================
-	 * DRAWER
-	 * ============================================ */
-	--pui-drawer-bg: var(--pui-bg-page);
-	--pui-drawer-shadow: var(--pui-shadow-lg);
-	--pui-drawer-width: 400px;
-	--pui-drawer-max-width: 90vw;
-
-	/* ============================================
-	 * SIDENAV
-	 * ============================================ */
-	--pui-sidenav-width: 260px;
-	--pui-sidenav-collapsed-width: 60px;
-	--pui-sidenav-bg: var(--pui-bg-surface);
-	--pui-sidenav-border: var(--pui-border-default);
-	--pui-sidenav-item-hover-bg: rgba(var(--pui-color-primary-rgb), 0.08);
-	--pui-sidenav-item-active-bg: rgba(var(--pui-color-secondary-rgb), 0.2);
-	--pui-sidenav-item-active-border: var(--pui-color-secondary);
-
-	/* ============================================
-	 * NAVBAR
-	 * ============================================ */
-	--pui-navbar-height: 60px;
-	--pui-navbar-bg: var(--pui-bg-surface);
-	--pui-navbar-border: var(--pui-border-default);
-
-	/* ============================================
-	 * DROPDOWN
-	 * ============================================ */
-	--pui-dropdown-bg: var(--pui-bg-surface);
-	--pui-dropdown-border: var(--pui-border-default);
-	--pui-dropdown-radius: var(--pui-radius-md);
-	--pui-dropdown-shadow: var(--pui-shadow-md);
-	--pui-dropdown-item-hover-bg: var(--pui-bg-surface-raised);
-	--pui-dropdown-item-active-bg: rgba(var(--pui-color-secondary-rgb), 0.15);
-
-	/* ============================================
-	 * POPOVER
-	 * ============================================ */
-	--pui-popover-bg: var(--pui-bg-surface);
-	--pui-popover-border: var(--pui-border-default);
-	--pui-popover-radius: var(--pui-radius-md);
-	--pui-popover-shadow: var(--pui-shadow-md);
-
-	/* ============================================
-	 * TOOLTIP
-	 * ============================================ */
-	--pui-tooltip-bg: var(--pui-color-gray-900);
-	--pui-tooltip-text: var(--pui-color-white);
-	--pui-tooltip-radius: var(--pui-radius-base);
-
-	/* ============================================
-	 * BADGE
-	 * ============================================ */
-	--pui-badge-padding-y: var(--pui-spacing-0_5);
-	--pui-badge-padding-x: var(--pui-spacing-2);
-	--pui-badge-font-size: var(--pui-font-size-xs);
-	--pui-badge-radius: var(--pui-radius-full);
-
-	/* ============================================
-	 * TABLE
-	 * ============================================ */
-	--pui-table-bg: var(--pui-bg-surface);
-	--pui-table-border: var(--pui-border-subtle);
-	--pui-table-radius: var(--pui-radius-base);
-	--pui-table-header-bg: var(--pui-bg-surface-raised);
-	--pui-table-row-hover-bg: var(--pui-bg-surface-raised);
-
-	/* ============================================
-	 * TABS
-	 * ============================================ */
-	--pui-tabs-border: var(--pui-border-default);
-	--pui-tab-hover-bg: var(--pui-bg-surface-raised);
-	--pui-tab-active-border: var(--pui-color-secondary);
-
-	/* ============================================
-	 * ALERT
-	 * ============================================ */
-	--pui-alert-radius: var(--pui-radius-md);
-	--pui-alert-info-bg: rgba(28, 126, 214, 0.1);
-	--pui-alert-info-border: var(--pui-color-info);
-	--pui-alert-success-bg: rgba(55, 178, 77, 0.1);
-	--pui-alert-success-border: var(--pui-color-success);
-	--pui-alert-warning-bg: rgba(252, 196, 25, 0.1);
-	--pui-alert-warning-border: var(--pui-color-warning);
-	--pui-alert-danger-bg: var(--pui-color-danger-subtle);
-	--pui-alert-danger-border: var(--pui-color-danger);
-
-	/* ============================================
-	 * AVATAR
-	 * ============================================ */
-	--pui-avatar-bg: var(--pui-color-gray-300);
-	--pui-avatar-text: var(--pui-color-gray-700);
-	--pui-avatar-radius: var(--pui-radius-full);
-
-	/* ============================================
-	 * LOADER
-	 * ============================================ */
-	--pui-loader-color: var(--pui-color-primary);
-	--pui-loader-size: 2rem;
-
-	/* ============================================
-	 * SWITCH
-	 * ============================================ */
-	--pui-switch-width: 2.5rem;
-	--pui-switch-height: 1.5rem;
-	--pui-switch-bg: var(--pui-color-gray-300);
-	--pui-switch-bg-checked: var(--pui-color-secondary);
-	--pui-switch-thumb-bg: var(--pui-color-white);
-
-	/* ============================================
-	 * CHECKBOX & RADIO
-	 * ============================================ */
-	--pui-check-size: 1.125rem;
-	--pui-check-bg: var(--pui-input-bg);
-	--pui-check-border: var(--pui-input-border);
-	--pui-check-bg-checked: var(--pui-color-primary);
-	--pui-check-icon-color: var(--pui-color-primary);
-
-	/* ============================================
-	 * DATEPICKER
-	 * ============================================ */
-	--pui-datepicker-bg: var(--pui-bg-surface);
-	--pui-datepicker-border: var(--pui-border-default);
-	--pui-datepicker-shadow: var(--pui-shadow-md);
-	--pui-datepicker-day-selected-bg: var(--pui-color-secondary);
-	--pui-datepicker-day-selected-text: var(--pui-color-primary);
-	--pui-datepicker-day-today-border: var(--pui-color-accent);
-
-	/* ============================================
-	 * PAGINATION
-	 * ============================================ */
-	--pui-pagination-item-hover-bg: var(--pui-bg-surface-raised);
-	--pui-pagination-item-active-bg: var(--pui-color-primary);
-	--pui-pagination-item-active-text: var(--pui-color-white);
-
-	/* ============================================
-	 * TOAST
-	 * ============================================ */
-	--pui-toast-bg: var(--pui-bg-surface);
-	--pui-toast-border: var(--pui-border-default);
-	--pui-toast-radius: var(--pui-radius-md);
-	--pui-toast-shadow: var(--pui-shadow-lg);
-}

package/dist/styles/dark.css

@@ -1,146 +0,0 @@
-/**
- * Dark Theme Overrides
- * Override variables when .dark class is applied to the document.
- */
-
-.dark {
-	/* ============================================
-	 * SURFACE COLORS
-	 * ============================================ */
-	--pui-bg-page: var(--pui-color-dark-100);
-	--pui-bg-surface: var(--pui-color-dark-400);
-	--pui-bg-surface-raised: var(--pui-color-dark-200);
-	--pui-bg-surface-sunken: var(--pui-color-dark-400);
-
-	/* ============================================
-	 * TEXT COLORS
-	 * ============================================ */
-	--pui-text-primary: var(--pui-color-off-white);
-	--pui-text-secondary: rgb(180, 180, 180);
-	--pui-text-muted: rgb(140, 140, 140);
-	--pui-text-disabled: rgb(100, 100, 100);
-	--pui-text-placeholder: rgb(115, 115, 115);
-	--pui-text-danger: var(--pui-color-danger-lighter);
-
-	/* ============================================
-	 * BORDER COLORS
-	 * ============================================ */
-	--pui-border-default: var(--pui-color-dark-border);
-	--pui-border-subtle: var(--pui-color-dark-border-subtle);
-	--pui-border-strong: rgb(75, 80, 90);
-
-	/* ============================================
-	 * ACCENT COLORS
-	 * ============================================ */
-	--pui-accent-color-rgb: var(--pui-color-secondary-rgb);
-	--pui-accent-color: var(--pui-color-secondary);
-	--pui-accent-text-color: var(--pui-color-black);
-
-	/* ============================================
-	 * SCROLLBAR
-	 * ============================================ */
-	--pui-scrollbar-track: var(--pui-color-dark-500);
-	--pui-scrollbar-thumb-border: var(--pui-color-black);
-
-	/* ============================================
-	 * FORM INPUTS
-	 * ============================================ */
-	--pui-input-bg: var(--pui-color-dark-200);
-	--pui-input-bg-disabled: var(--pui-color-dark-border);
-
-	/* ============================================
-	 * PAPER
-	 * ============================================ */
-	--pui-paper-title-bg: var(--pui-color-dark-400);
-	--pui-paper-title-border: var(--pui-color-dark-border-subtle);
-	--pui-paper-body-bg: var(--pui-color-dark-300);
-
-	/* ============================================
-	 * DIALOG
-	 * ============================================ */
-	--pui-dialog-backdrop: rgba(0, 0, 0, 0.75);
-
-	/* ============================================
-	 * SIDENAV
-	 * ============================================ */
-	--pui-sidenav-item-hover-bg: rgba(var(--pui-color-primary-rgb), 0.2);
-	--pui-sidenav-item-active-bg: rgba(var(--pui-color-primary-rgb), 0.3);
-	--pui-sidenav-item-active-border: var(--pui-color-primary);
-
-	/* ============================================
-	 * DROPDOWN
-	 * ============================================ */
-	--pui-dropdown-item-hover-bg: var(--pui-color-dark-200);
-	--pui-dropdown-item-active-bg: rgba(var(--pui-color-secondary-rgb), 0.2);
-
-	/* ============================================
-	 * TOOLTIP
-	 * ============================================ */
-	--pui-tooltip-bg: var(--pui-color-gray-100);
-	--pui-tooltip-text: var(--pui-color-gray-900);
-
-	/* ============================================
-	 * TABLE
-	 * ============================================ */
-	--pui-table-header-bg: var(--pui-color-dark-400);
-	--pui-table-row-hover-bg: var(--pui-color-dark-200);
-
-	/* ============================================
-	 * TABS
-	 * ============================================ */
-	--pui-tab-hover-bg: var(--pui-color-dark-200);
-
-	/* ============================================
-	 * ALERT
-	 * ============================================ */
-	--pui-alert-info-bg: #032830;
-	--pui-alert-info-border: #087990;
-	--pui-alert-success-bg: #051b11;
-	--pui-alert-success-border: #0f5132;
-	--pui-alert-warning-bg: #332701;
-	--pui-alert-warning-border: #997404;
-	--pui-alert-danger-bg: #2c0b0e;
-	--pui-alert-danger-border: #842029;
-
-	/* ============================================
-	 * AVATAR
-	 * ============================================ */
-	--pui-avatar-bg: var(--pui-color-gray-700);
-	--pui-avatar-text: var(--pui-color-gray-200);
-
-	/* ============================================
-	 * LOADER
-	 * ============================================ */
-	--pui-loader-color: var(--pui-color-secondary);
-
-	/* ============================================
-	 * SELECT
-	 * ============================================ */
-	--pui-select-option-hover-bg: var(--pui-color-dark-200);
-	--pui-select-option-selected-bg: rgba(var(--pui-color-secondary-rgb), 0.2);
-
-	/* ============================================
-	 * DATEPICKER
-	 * ============================================ */
-	--pui-datepicker-day-hover-bg: var(--pui-color-dark-200);
-
-	/* ============================================
-	 * PAGINATION
-	 * ============================================ */
-	--pui-pagination-item-hover-bg: var(--pui-color-dark-200);
-	--pui-pagination-item-active-bg: var(--pui-color-secondary);
-	--pui-pagination-item-active-text: var(--pui-color-black);
-
-	/* ============================================
-	 * INTERACTIVE STATES
-	 * ============================================ */
-	--pui-bg-hover: rgba(255, 255, 255, 0.06);
-	--pui-bg-active: rgba(255, 255, 255, 0.1);
-
-	/* ============================================
-	 * DISABLED STATES
-	 * ============================================ */
-	--pui-border-disabled: #666;
-	--pui-bg-disabled: #444;
-	--pui-text-on-disabled: var(--pui-color-gray-600);
-}