@placeholderco/placeholder-ui 1.0.3 → 1.0.6

package/dist/ui/Progress.svelte

@@ -1,191 +1,191 @@
-<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>
+<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/RingProgress.svelte

@@ -1,141 +1,141 @@
-<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>
+<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>