@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/display/Alert.svelte

@@ -1,179 +0,0 @@
-<script lang="ts">
-  import type { Snippet } from "svelte";
-  import Icon from "../icon/Icon.svelte";
-  import { iconInfoCircle, iconAlertTriangle, iconCircleCheck, iconCircleX, iconX } from "../icon/index.js";
-
-  type AlertVariant = "default" | "secondary" | "success" | "warning" | "danger" | "info";
-
-  interface Props {
-    variant?: AlertVariant;
-    title?: string;
-    dismissible?: boolean;
-    children?: Snippet;
-    ondismiss?: () => void;
-    class?: string;
-  }
-
-  let { variant = "default", title, dismissible = false, children, ondismiss, class: className = "" }: Props = $props();
-
-  let visible = $state(true);
-
-  const icons: Record<AlertVariant, string> = {
-    default: iconInfoCircle,
-    secondary: iconInfoCircle,
-    info: iconInfoCircle,
-    success: iconCircleCheck,
-    warning: iconAlertTriangle,
-    danger: iconCircleX,
-  };
-
-  function dismiss() {
-    visible = false;
-    ondismiss?.();
-  }
-</script>
-
-{#if visible}
-  <div class="alert alert-{variant} {className}" role="alert">
-    <div class="alert-icon">
-      <Icon svg={icons[variant]} size="20px" />
-    </div>
-    <div class="alert-content">
-      {#if title}
-        <div class="alert-title">{title}</div>
-      {/if}
-      {#if children}
-        <div class="alert-message">
-          {@render children()}
-        </div>
-      {/if}
-    </div>
-    {#if dismissible}
-      <button class="alert-dismiss" onclick={dismiss} aria-label="Dismiss">
-        <Icon svg={iconX} size="16px" />
-      </button>
-    {/if}
-  </div>
-{/if}
-
-<style>
-  .alert {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--pui-spacing-3);
-    padding: var(--pui-spacing-4);
-    border-radius: var(--pui-radius-md);
-    border: 1px solid;
-  }
-
-  .alert-default {
-    background-color: rgba(122, 74, 153, 0.15);
-    color: rgb(122, 74, 153);
-    border-color: var(--pui-color-primary);
-  }
-
-  .alert-secondary {
-    background-color: var(--pui-color-gray-50);
-    border-color: var(--pui-color-gray-200);
-    color: var(--pui-color-gray-800);
-  }
-
-  .alert-info {
-    background-color: var(--pui-alert-info-bg);
-    border-color: var(--pui-alert-info-border);
-    color: var(--pui-color-info-dark, var(--pui-color-info));
-  }
-
-  .alert-success {
-    background-color: var(--pui-alert-success-bg);
-    border-color: var(--pui-alert-success-border);
-    color: var(--pui-color-success-dark, var(--pui-color-success));
-  }
-
-  .alert-warning {
-    background-color: var(--pui-alert-warning-bg);
-    border-color: var(--pui-alert-warning-border);
-    color: var(--pui-color-warning-dark, var(--pui-color-warning));
-  }
-
-  .alert-danger {
-    background-color: var(--pui-alert-danger-bg);
-    border-color: var(--pui-alert-danger-border);
-    color: var(--pui-color-danger, var(--pui-color-danger));
-  }
-
-  :global(.dark) .alert-default {
-    background-color: rgba(122, 74, 153, 0.15);
-    color: var(--pui-color-primary-light);
-    border-color: var(--pui-color-primary);
-  }
-
-  :global(.dark) .alert-secondary {
-    background-color: var(--pui-color-dark-200);
-    border-color: var(--pui-color-dark-border);
-    color: var(--pui-color-gray-100);
-  }
-
-  :global(.dark) .alert-info {
-    background-color: var(--pui-alert-info-bg);
-    border-color: var(--pui-alert-info-border);
-    color: #6edff6;
-  }
-
-  :global(.dark) .alert-success {
-    background-color: var(--pui-alert-success-bg);
-    border-color: var(--pui-alert-success-border);
-    color: #75b798;
-  }
-
-  :global(.dark) .alert-warning {
-    background-color: var(--pui-alert-warning-bg);
-    border-color: var(--pui-alert-warning-border);
-    color: #ffda6a;
-  }
-
-  :global(.dark) .alert-danger {
-    background-color: var(--pui-alert-danger-bg);
-    border-color: var(--pui-alert-danger-border);
-    color: #ea868f;
-  }
-
-  .alert-icon {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-  }
-
-  .alert-content {
-    flex: 1;
-    min-width: 0;
-  }
-
-  .alert-title {
-    font-weight: var(--pui-font-weight-semibold);
-    margin-bottom: var(--pui-spacing-1);
-  }
-
-  .alert-message {
-    line-height: var(--pui-line-height-relaxed);
-  }
-
-  .alert-dismiss {
-    flex-shrink: 0;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: none;
-    border: none;
-    cursor: pointer;
-    padding: var(--pui-spacing-1);
-    border-radius: var(--pui-radius-sm);
-    color: inherit;
-    opacity: 0.7;
-    transition: opacity var(--pui-transition-fast) var(--pui-ease-in-out);
-  }
-
-  .alert-dismiss:hover {
-    opacity: 1;
-  }
-</style>

package/dist/display/Alert.svelte.d.ts

@@ -1,13 +0,0 @@
-import type { Snippet } from "svelte";
-type AlertVariant = "default" | "secondary" | "success" | "warning" | "danger" | "info";
-interface Props {
-    variant?: AlertVariant;
-    title?: string;
-    dismissible?: boolean;
-    children?: Snippet;
-    ondismiss?: () => void;
-    class?: string;
-}
-declare const Alert: import("svelte").Component<Props, {}, "">;
-type Alert = ReturnType<typeof Alert>;
-export default Alert;

package/dist/form/FileInput.svelte

@@ -1,235 +0,0 @@
-<script lang="ts">
-	import FormGroup from './FormGroup.svelte';
-	import Icon from '../icon/Icon.svelte';
-	import { iconUpload, iconX } from '../icon/index.js';
-	import Button from '../ui/Button.svelte';
-
-	interface Props {
-		label?: string;
-		value?: File | File[] | null;
-		accept?: string;
-		multiple?: boolean;
-		disabled?: boolean;
-		placeholder?: string;
-		clearable?: boolean;
-		required?: boolean;
-		showError?: boolean;
-		errorText?: string;
-		size?: 'xs' | 'sm' | 'md' | 'lg';
-		variant?: 'default' | 'filled';
-		leftIcon?: string;
-		class?: string;
-		containerClass?: string;
-		tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
-		tooltipText?: string;
-		onchange?: (files: File | File[] | null) => void;
-	}
-
-	let {
-		label = '',
-		value = $bindable(null),
-		accept = '',
-		multiple = false,
-		disabled = false,
-		placeholder = 'Choose file',
-		clearable = true,
-		required = false,
-		showError = false,
-		errorText = '',
-		size = 'md',
-		variant = 'default',
-		leftIcon = undefined,
-		class: classes = '',
-		containerClass = '',
-		tooltipLocation = 'top',
-		tooltipText = undefined,
-		onchange
-	}: Props = $props();
-
-	let inputElement: HTMLInputElement;
-
-	const displayValue = $derived.by(() => {
-		if (!value) return '';
-		if (Array.isArray(value)) {
-			if (value.length === 0) return '';
-			if (value.length === 1) return value[0].name;
-			return `${value.length} files selected`;
-		}
-		return value.name;
-	});
-
-	function handleClick() {
-		if (disabled) return;
-		inputElement?.click();
-	}
-
-	function handleChange(e: Event) {
-		const target = e.target as HTMLInputElement;
-		const files = target.files;
-		if (!files || files.length === 0) {
-			value = null;
-		} else if (multiple) {
-			value = Array.from(files);
-		} else {
-			value = files[0];
-		}
-		onchange?.(value);
-	}
-
-	function handleClear(e: Event) {
-		e.stopPropagation();
-		value = null;
-		if (inputElement) {
-			inputElement.value = '';
-		}
-		onchange?.(null);
-	}
-</script>
-
-<div class="file-input-container {containerClass}">
-	<FormGroup
-		{label}
-		{required}
-		class={classes}
-		{tooltipLocation}
-		{tooltipText}
-		{showError}
-		{errorText}
-	>
-		<div class="file-input-wrapper size-{size} variant-{variant}" class:disabled>
-			<input
-				bind:this={inputElement}
-				type="file"
-				{accept}
-				{multiple}
-				{disabled}
-				class="file-input-hidden"
-				onchange={handleChange}
-			/>
-			<button type="button" class="file-input-button" onclick={handleClick} {disabled}>
-				<span class="file-input-icon">
-					<Icon svg={leftIcon || iconUpload} size="1.125em" />
-				</span>
-				<span class="file-input-text" class:placeholder={!displayValue}>
-					{displayValue || placeholder}
-				</span>
-			</button>
-			{#if clearable && value}
-				<button type="button" class="file-input-clear" onclick={handleClear} aria-label="Clear file">
-					<Icon svg={iconX} size="14px" />
-				</button>
-			{/if}
-		</div>
-	</FormGroup>
-</div>
-
-<style>
-	.file-input-container {
-		width: 100%;
-	}
-
-	.file-input-hidden {
-		display: none;
-	}
-
-	.file-input-wrapper {
-		display: flex;
-		align-items: center;
-		width: 100%;
-		border: 1px solid var(--pui-input-border);
-		background-color: var(--pui-input-bg);
-		border-radius: var(--pui-radius-base);
-		transition:
-			border-color var(--pui-transition-fast) var(--pui-ease-in-out),
-			box-shadow var(--pui-transition-fast) var(--pui-ease-in-out);
-	}
-
-	.file-input-wrapper:focus-within {
-		border-color: var(--pui-input-border-focus);
-	}
-
-	.file-input-wrapper.disabled {
-		opacity: 0.5;
-		cursor: not-allowed;
-		background: var(--pui-input-bg-disabled);
-	}
-
-	.variant-filled {
-		background-color: var(--pui-color-gray-100);
-		border-color: transparent;
-	}
-
-	:global(.dark) .variant-filled {
-		background-color: var(--pui-color-dark-200);
-	}
-
-	/* Sizes */
-	.size-xs .file-input-button {
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
-		font-size: var(--pui-font-size-xs);
-	}
-	.size-sm .file-input-button {
-		padding: var(--pui-spacing-1) var(--pui-spacing-2);
-		font-size: var(--pui-font-size-sm);
-	}
-	.size-md .file-input-button {
-		padding: var(--pui-spacing-2) var(--pui-spacing-3);
-		font-size: var(--pui-font-size-base);
-	}
-	.size-lg .file-input-button {
-		padding: var(--pui-spacing-3) var(--pui-spacing-4);
-		font-size: var(--pui-font-size-md);
-	}
-
-	.file-input-button {
-		display: flex;
-		align-items: center;
-		gap: var(--pui-spacing-2);
-		flex: 1;
-		background: none;
-		border: none;
-		cursor: pointer;
-		text-align: left;
-		color: var(--pui-input-text);
-		min-width: 0;
-	}
-
-	.file-input-button:disabled {
-		cursor: not-allowed;
-	}
-
-	.file-input-icon {
-		display: flex;
-		align-items: center;
-		color: var(--pui-text-muted);
-		flex-shrink: 0;
-	}
-
-	.file-input-text {
-		flex: 1;
-		overflow: hidden;
-		text-overflow: ellipsis;
-		white-space: nowrap;
-	}
-
-	.file-input-text.placeholder {
-		color: var(--pui-text-muted);
-	}
-
-	.file-input-clear {
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background: none;
-		border: none;
-		cursor: pointer;
-		padding: var(--pui-spacing-2);
-		color: var(--pui-text-muted);
-		border-radius: var(--pui-radius-sm);
-		transition: color var(--pui-transition-fast) var(--pui-ease-in-out);
-	}
-
-	.file-input-clear:hover {
-		color: var(--pui-color-danger);
-	}
-</style>

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

@@ -1,23 +0,0 @@
-interface Props {
-    label?: string;
-    value?: File | File[] | null;
-    accept?: string;
-    multiple?: boolean;
-    disabled?: boolean;
-    placeholder?: string;
-    clearable?: boolean;
-    required?: boolean;
-    showError?: boolean;
-    errorText?: string;
-    size?: 'xs' | 'sm' | 'md' | 'lg';
-    variant?: 'default' | 'filled';
-    leftIcon?: string;
-    class?: string;
-    containerClass?: string;
-    tooltipLocation?: 'top' | 'bottom' | 'left' | 'right';
-    tooltipText?: string;
-    onchange?: (files: File | File[] | null) => void;
-}
-declare const FileInput: import("svelte").Component<Props, {}, "value">;
-type FileInput = ReturnType<typeof FileInput>;
-export default FileInput;

package/dist/form/PasswordInput.svelte

@@ -1,253 +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;
-		/** 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;
-	}
-
-	let {
-		label = '',
-		inputId = undefined,
-		placeholder = undefined,
-		required = false,
-		autofocus = false,
-		autocomplete = undefined,
-		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={(autocomplete ?? 'current-password') as AutoFill}
-				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>