@placeholderco/placeholder-ui 1.0.12 → 2.0.0

package/dist/ui/LoadingOverlay.svelte

@@ -1,53 +0,0 @@
-<script lang="ts">
-	import Loader from './Loader.svelte';
-
-	interface Props {
-		visible?: boolean;
-		loaderSize?: string;
-		overlayOpacity?: number;
-		blur?: number;
-		zIndex?: number;
-		class?: string;
-	}
-
-	let {
-		visible = false,
-		loaderSize = '40px',
-		overlayOpacity = 0.75,
-		blur = 0,
-		zIndex = 30,
-		class: classes = ''
-	}: Props = $props();
-</script>
-
-{#if visible}
-	<div
-		class="loading-overlay {classes}"
-		style="--overlay-opacity: {overlayOpacity}; --overlay-blur: {blur}px; --overlay-z-index: {zIndex};"
-		aria-busy="true"
-		aria-live="polite"
-	>
-		<Loader sizeOverride={loaderSize} />
-	</div>
-{/if}
-
-<style>
-	.loading-overlay {
-		position: absolute;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
-		display: flex;
-		align-items: center;
-		justify-content: center;
-		background-color: rgba(255, 255, 255, var(--overlay-opacity, 0.75));
-		backdrop-filter: blur(var(--overlay-blur, 0));
-		z-index: var(--overlay-z-index, 30);
-		border-radius: inherit;
-	}
-
-	:global(.dark) .loading-overlay {
-		background-color: rgba(0, 0, 0, var(--overlay-opacity, 0.75));
-	}
-</style>

package/dist/ui/LoadingOverlay.svelte.d.ts

@@ -1,11 +0,0 @@
-interface Props {
-    visible?: boolean;
-    loaderSize?: string;
-    overlayOpacity?: number;
-    blur?: number;
-    zIndex?: number;
-    class?: string;
-}
-declare const LoadingOverlay: import("svelte").Component<Props, {}, "">;
-type LoadingOverlay = ReturnType<typeof LoadingOverlay>;
-export default LoadingOverlay;

package/dist/ui/Progress.svelte

@@ -1,191 +0,0 @@
-<script lang="ts">
-	interface Props {
-		value?: number;
-		max?: number;
-		size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-		color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger';
-		striped?: boolean;
-		animated?: boolean;
-		label?: string;
-		showValue?: boolean;
-		radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
-		class?: string;
-	}
-
-	let {
-		value = 0,
-		max = 100,
-		size = 'md',
-		color = 'primary',
-		striped = false,
-		animated = false,
-		label = undefined,
-		showValue = false,
-		radius = 'full',
-		class: classes = ''
-	}: Props = $props();
-
-	const percentage = $derived(Math.min(100, Math.max(0, (value / max) * 100)));
-	const displayValue = $derived(showValue ? `${Math.round(percentage)}%` : '');
-</script>
-
-<div class="progress-wrapper {classes}">
-	{#if label}
-		<div class="progress-label">
-			<span>{label}</span>
-			{#if showValue}
-				<span class="progress-value">{displayValue}</span>
-			{/if}
-		</div>
-	{/if}
-	<div
-		class="progress size-{size} radius-{radius}"
-		role="progressbar"
-		aria-valuenow={value}
-		aria-valuemin={0}
-		aria-valuemax={max}
-	>
-		<div
-			class="progress-bar color-{color}"
-			class:striped
-			class:animated={animated && striped}
-			style="width: {percentage}%"
-		>
-			{#if showValue && !label}
-				<span class="progress-bar-label">{displayValue}</span>
-			{/if}
-		</div>
-	</div>
-</div>
-
-<style>
-	.progress-wrapper {
-		width: 100%;
-	}
-
-	.progress-label {
-		display: flex;
-		justify-content: space-between;
-		align-items: center;
-		margin-bottom: var(--pui-spacing-1);
-		font-size: var(--pui-font-size-sm);
-		color: var(--pui-text-secondary);
-	}
-
-	:global(.dark) .progress-label {
-		color: var(--pui-color-gray-300);
-	}
-
-	.progress-value {
-		font-weight: var(--pui-font-weight-medium);
-	}
-
-	.progress {
-		width: 100%;
-		background-color: var(--pui-color-gray-200);
-		overflow: hidden;
-	}
-
-	:global(.dark) .progress {
-		background-color: var(--pui-color-dark-border);
-	}
-
-	/* Sizes */
-	.size-xs {
-		height: 4px;
-	}
-	.size-sm {
-		height: 6px;
-	}
-	.size-md {
-		height: 8px;
-	}
-	.size-lg {
-		height: 12px;
-	}
-	.size-xl {
-		height: 16px;
-	}
-
-	/* Radius */
-	.radius-none {
-		border-radius: 0;
-	}
-	.radius-sm {
-		border-radius: var(--pui-radius-sm);
-	}
-	.radius-md {
-		border-radius: var(--pui-radius-md);
-	}
-	.radius-lg {
-		border-radius: var(--pui-radius-lg);
-	}
-	.radius-full {
-		border-radius: var(--pui-radius-full);
-	}
-
-	.progress-bar {
-		height: 100%;
-		border-radius: inherit;
-		transition: width var(--pui-transition-slow) var(--pui-ease-out);
-		display: flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	.progress-bar-label {
-		font-size: var(--pui-font-size-xs);
-		font-weight: var(--pui-font-weight-medium);
-		color: var(--pui-color-white);
-		padding: 0 var(--pui-spacing-2);
-		white-space: nowrap;
-	}
-
-	/* Colors */
-	.color-primary {
-		background-color: var(--pui-color-primary);
-	}
-	.color-secondary {
-		background-color: var(--pui-color-secondary);
-	}
-	.color-accent {
-		background-color: var(--pui-color-accent);
-	}
-	.color-success {
-		background-color: var(--pui-color-success);
-	}
-	.color-warning {
-		background-color: var(--pui-color-warning);
-	}
-	.color-danger {
-		background-color: var(--pui-color-danger);
-	}
-
-	/* Striped */
-	.striped {
-		background-image: linear-gradient(
-			45deg,
-			rgba(255, 255, 255, 0.15) 25%,
-			transparent 25%,
-			transparent 50%,
-			rgba(255, 255, 255, 0.15) 50%,
-			rgba(255, 255, 255, 0.15) 75%,
-			transparent 75%,
-			transparent
-		);
-		background-size: 1rem 1rem;
-	}
-
-	.animated {
-		animation: progress-stripes 1s linear infinite;
-	}
-
-	@keyframes progress-stripes {
-		from {
-			background-position: 1rem 0;
-		}
-		to {
-			background-position: 0 0;
-		}
-	}
-</style>

package/dist/ui/Progress.svelte.d.ts

@@ -1,15 +0,0 @@
-interface Props {
-    value?: number;
-    max?: number;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger';
-    striped?: boolean;
-    animated?: boolean;
-    label?: string;
-    showValue?: boolean;
-    radius?: 'none' | 'sm' | 'md' | 'lg' | 'full';
-    class?: string;
-}
-declare const Progress: import("svelte").Component<Props, {}, "">;
-type Progress = ReturnType<typeof Progress>;
-export default Progress;

package/dist/ui/RingProgress.svelte

@@ -1,141 +0,0 @@
-<script lang="ts">
-	import type { Snippet } from 'svelte';
-
-	interface Section {
-		value: number;
-		color: string;
-	}
-
-	interface Props {
-		value?: number;
-		size?: number;
-		thickness?: number;
-		roundCaps?: boolean;
-		color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | string;
-		sections?: Section[];
-		label?: Snippet;
-		class?: string;
-	}
-
-	let {
-		value = 0,
-		size = 120,
-		thickness = 8,
-		roundCaps = true,
-		color = 'primary',
-		sections = [],
-		label,
-		class: classes = ''
-	}: Props = $props();
-
-	const radius = $derived((size - thickness) / 2);
-	const circumference = $derived(2 * Math.PI * radius);
-	const center = $derived(size / 2);
-
-	// Color mapping
-	const colorMap: Record<string, string> = {
-		primary: 'var(--pui-color-primary)',
-		secondary: 'var(--pui-color-secondary)',
-		accent: 'var(--pui-color-accent)',
-		success: 'var(--pui-color-success)',
-		warning: 'var(--pui-color-warning)',
-		danger: 'var(--pui-color-danger)'
-	};
-
-	const strokeColor = $derived(colorMap[color] || color);
-
-	// Calculate sections or single value
-	const computedSections = $derived.by(() => {
-		if (sections.length > 0) {
-			return sections;
-		}
-		return [{ value: Math.min(100, Math.max(0, value)), color: strokeColor }];
-	});
-
-	// Calculate stroke dash arrays for each section
-	const sectionData = $derived.by(() => {
-		let offset = 0;
-		return computedSections.map((section) => {
-			const sectionLength = (section.value / 100) * circumference;
-			const data = {
-				dashArray: `${sectionLength} ${circumference - sectionLength}`,
-				dashOffset: -offset + circumference * 0.25, // Start from top
-				color: colorMap[section.color] || section.color
-			};
-			offset += sectionLength;
-			return data;
-		});
-	});
-</script>
-
-<div class="ring-progress {classes}" style="width: {size}px; height: {size}px;">
-	<svg width={size} height={size} viewBox="0 0 {size} {size}">
-		<!-- Background circle -->
-		<circle
-			cx={center}
-			cy={center}
-			r={radius}
-			fill="none"
-			stroke="var(--ring-progress-bg, var(--pui-color-gray-200))"
-			stroke-width={thickness}
-		/>
-		<!-- Progress sections -->
-		{#each sectionData as section}
-			<circle
-				cx={center}
-				cy={center}
-				r={radius}
-				fill="none"
-				stroke={section.color}
-				stroke-width={thickness}
-				stroke-dasharray={section.dashArray}
-				stroke-dashoffset={section.dashOffset}
-				stroke-linecap={roundCaps ? 'round' : 'butt'}
-				class="progress-ring"
-			/>
-		{/each}
-	</svg>
-	{#if label}
-		<div class="ring-label">
-			{@render label()}
-		</div>
-	{/if}
-</div>
-
-<style>
-	.ring-progress {
-		position: relative;
-		display: inline-flex;
-		align-items: center;
-		justify-content: center;
-	}
-
-	:global(.dark) .ring-progress {
-		--ring-progress-bg: var(--pui-color-dark-border);
-	}
-
-	svg {
-		transform: rotate(-90deg);
-	}
-
-	.progress-ring {
-		transition:
-			stroke-dasharray var(--pui-transition-slow) var(--pui-ease-out),
-			stroke-dashoffset var(--pui-transition-slow) var(--pui-ease-out);
-	}
-
-	.ring-label {
-		position: absolute;
-		top: 50%;
-		left: 50%;
-		transform: translate(-50%, -50%);
-		text-align: center;
-		font-size: var(--pui-font-size-lg);
-		font-weight: var(--pui-font-weight-semibold);
-		color: var(--pui-text-primary);
-	}
-
-	:global(.dark) .ring-label {
-		color: var(--pui-color-gray-100);
-	}
-</style>

package/dist/ui/RingProgress.svelte.d.ts

@@ -1,18 +0,0 @@
-import type { Snippet } from 'svelte';
-interface Section {
-    value: number;
-    color: string;
-}
-interface Props {
-    value?: number;
-    size?: number;
-    thickness?: number;
-    roundCaps?: boolean;
-    color?: 'primary' | 'secondary' | 'accent' | 'success' | 'warning' | 'danger' | string;
-    sections?: Section[];
-    label?: Snippet;
-    class?: string;
-}
-declare const RingProgress: import("svelte").Component<Props, {}, "">;
-type RingProgress = ReturnType<typeof RingProgress>;
-export default RingProgress;

package/dist/ui/Skeleton.svelte

@@ -1,85 +0,0 @@
-<script lang="ts">
-	interface Props {
-		width?: string;
-		height?: string;
-		circle?: boolean;
-		radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-		animate?: boolean;
-		visible?: boolean;
-		class?: string;
-	}
-
-	let {
-		width = '100%',
-		height = '1rem',
-		circle = false,
-		radius = 'md',
-		animate = true,
-		visible = true,
-		class: classes = ''
-	}: Props = $props();
-
-	const computedRadius = $derived(circle ? 'full' : radius);
-	const computedHeight = $derived(circle && !height ? width : height);
-</script>
-
-{#if visible}
-	<div
-		class="skeleton radius-{computedRadius} {classes}"
-		class:animate
-		class:circle
-		style="width: {width}; height: {computedHeight};"
-		aria-hidden="true"
-	></div>
-{/if}
-
-<style>
-	.skeleton {
-		background-color: var(--pui-color-gray-200);
-		display: block;
-	}
-
-	:global(.dark) .skeleton {
-		background-color: var(--pui-color-dark-border);
-	}
-
-	.circle {
-		aspect-ratio: 1;
-	}
-
-	/* Radius */
-	.radius-none {
-		border-radius: 0;
-	}
-	.radius-sm {
-		border-radius: var(--pui-radius-sm);
-	}
-	.radius-md {
-		border-radius: var(--pui-radius-md);
-	}
-	.radius-lg {
-		border-radius: var(--pui-radius-lg);
-	}
-	.radius-xl {
-		border-radius: var(--pui-radius-xl);
-	}
-	.radius-full {
-		border-radius: var(--pui-radius-full);
-	}
-
-	.animate {
-		animation: skeleton-pulse 1.5s ease-in-out infinite;
-	}
-
-	@keyframes skeleton-pulse {
-		0% {
-			opacity: 1;
-		}
-		50% {
-			opacity: 0.4;
-		}
-		100% {
-			opacity: 1;
-		}
-	}
-</style>

package/dist/ui/Skeleton.svelte.d.ts

@@ -1,12 +0,0 @@
-interface Props {
-    width?: string;
-    height?: string;
-    circle?: boolean;
-    radius?: 'none' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
-    animate?: boolean;
-    visible?: boolean;
-    class?: string;
-}
-declare const Skeleton: import("svelte").Component<Props, {}, "">;
-type Skeleton = ReturnType<typeof Skeleton>;
-export default Skeleton;