@placeholderco/placeholder-ui 1.0.3 → 1.0.6

package/dist/ui/Skeleton.svelte

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