@marianmeres/stuic 2.22.0 → 2.23.0

package/dist/components/Skeleton/Skeleton.svelte

@@ -0,0 +1,127 @@
+<script lang="ts" module>
+	import type { HTMLAttributes } from "svelte/elements";
+
+	export interface Props extends Omit<
+		HTMLAttributes<HTMLDivElement>,
+		"children" | "class"
+	> {
+		/** Shape variant */
+		variant?: "text" | "circle" | "rectangle";
+		/** Width (e.g., "100%", "200px") */
+		width?: string;
+		/** Height (e.g., "1rem", "40px") */
+		height?: string;
+		/** Shorthand for circle size (sets both width & height) */
+		size?: string;
+		/** Number of text lines (for text variant) */
+		lines?: number;
+		/** Gap between lines (for text variant) */
+		gap?: string;
+		/** Last line width (for text variant) */
+		lastLineWidth?: string;
+		/** Animation style */
+		animation?: "shimmer" | "pulse" | "none";
+		/** Animation duration */
+		duration?: string;
+		/** Border radius (boolean for default, string for custom) */
+		rounded?: boolean | string;
+		/** Accessibility label */
+		ariaLabel?: string;
+		/** Bindable element reference */
+		el?: HTMLDivElement;
+		/** CSS class */
+		class?: string | string[];
+	}
+</script>
+
+<script lang="ts">
+	import "./index.css";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import { prefersReducedMotion } from "../../utils/prefers-reduced-motion.svelte.js";
+
+	let {
+		variant = "rectangle",
+		width,
+		height,
+		size,
+		lines = 1,
+		gap = "0.5rem",
+		lastLineWidth = "75%",
+		animation = "shimmer",
+		duration = "1.5s",
+		rounded = true,
+		ariaLabel,
+		el = $bindable(),
+		class: classProp = "",
+		...restProps
+	}: Props = $props();
+
+	const reduceMotion = prefersReducedMotion();
+
+	const effectiveAnimation = $derived(reduceMotion.current ? "none" : animation);
+
+	const baseClass = $derived(
+		twMerge(
+			"block bg-neutral-200 dark:bg-neutral-700",
+			effectiveAnimation === "shimmer" && "stuic-skeleton-shimmer",
+			effectiveAnimation === "pulse" && "stuic-skeleton-pulse",
+			variant === "circle" && "stuic-skeleton-circle",
+			rounded === true && variant !== "circle" && "rounded",
+			classProp
+		)
+	);
+
+	const baseStyle = $derived.by(() => {
+		const styles: string[] = [];
+		if (duration) styles.push(`--skeleton-duration: ${duration}`);
+		if (variant === "circle" && size) {
+			styles.push(`width: ${size}`, `height: ${size}`);
+		} else {
+			if (width) styles.push(`width: ${width}`);
+			if (height) styles.push(`height: ${height}`);
+		}
+		if (typeof rounded === "string") {
+			styles.push(`border-radius: ${rounded}`);
+		}
+		return styles.join("; ");
+	});
+</script>
+
+{#if variant === "text" && lines > 1}
+	<div
+		bind:this={el}
+		role="status"
+		aria-busy="true"
+		aria-label={ariaLabel}
+		class="stuic-skeleton-text-container"
+		style:gap
+		{...restProps}
+	>
+		{#each Array(lines) as _, i}
+			{@const isLast = i === lines - 1}
+			<div
+				class={baseClass}
+				style="{baseStyle}; width: {isLast
+					? lastLineWidth
+					: width || '100%'}; height: {height || '1rem'}"
+			></div>
+		{/each}
+		{#if ariaLabel}
+			<span class="sr-only">{ariaLabel}</span>
+		{/if}
+	</div>
+{:else}
+	<div
+		bind:this={el}
+		role="status"
+		aria-busy="true"
+		aria-label={ariaLabel}
+		class={baseClass}
+		style={baseStyle}
+		{...restProps}
+	>
+		{#if ariaLabel}
+			<span class="sr-only">{ariaLabel}</span>
+		{/if}
+	</div>
+{/if}

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

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from "svelte/elements";
+export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" | "class"> {
+    /** Shape variant */
+    variant?: "text" | "circle" | "rectangle";
+    /** Width (e.g., "100%", "200px") */
+    width?: string;
+    /** Height (e.g., "1rem", "40px") */
+    height?: string;
+    /** Shorthand for circle size (sets both width & height) */
+    size?: string;
+    /** Number of text lines (for text variant) */
+    lines?: number;
+    /** Gap between lines (for text variant) */
+    gap?: string;
+    /** Last line width (for text variant) */
+    lastLineWidth?: string;
+    /** Animation style */
+    animation?: "shimmer" | "pulse" | "none";
+    /** Animation duration */
+    duration?: string;
+    /** Border radius (boolean for default, string for custom) */
+    rounded?: boolean | string;
+    /** Accessibility label */
+    ariaLabel?: string;
+    /** Bindable element reference */
+    el?: HTMLDivElement;
+    /** CSS class */
+    class?: string | string[];
+}
+import "./index.css";
+declare const Skeleton: import("svelte").Component<Props, {}, "el">;
+type Skeleton = ReturnType<typeof Skeleton>;
+export default Skeleton;

package/dist/components/Skeleton/index.css

@@ -0,0 +1,62 @@
+/* Define CSS custom properties for use in gradients */
+:root {
+	--skeleton-base: #e5e5e5;
+	--skeleton-highlight: #f5f5f5;
+}
+
+.dark {
+	--skeleton-base: #404040;
+	--skeleton-highlight: #525252;
+}
+
+.stuic-skeleton-circle {
+	border-radius: 50%;
+}
+
+.stuic-skeleton-text-container {
+	display: flex;
+	flex-direction: column;
+}
+
+/* Shimmer animation */
+@keyframes skeleton-shimmer {
+	0% {
+		background-position: -200% 0;
+	}
+	100% {
+		background-position: 200% 0;
+	}
+}
+
+.stuic-skeleton-shimmer {
+	background: linear-gradient(
+		90deg,
+		var(--skeleton-base) 25%,
+		var(--skeleton-highlight) 50%,
+		var(--skeleton-base) 75%
+	);
+	background-size: 200% 100%;
+	animation: skeleton-shimmer var(--skeleton-duration, 1.5s) ease-in-out infinite;
+}
+
+/* Pulse animation */
+@keyframes skeleton-pulse {
+	0%, 100% {
+		opacity: 1;
+	}
+	50% {
+		opacity: 0.4;
+	}
+}
+
+.stuic-skeleton-pulse {
+	animation: skeleton-pulse var(--skeleton-duration, 1.5s) ease-in-out infinite;
+}
+
+/* Reduced motion */
+@media (prefers-reduced-motion: reduce) {
+	.stuic-skeleton-shimmer,
+	.stuic-skeleton-pulse {
+		animation: none;
+	}
+}

package/dist/components/Skeleton/index.d.ts

@@ -0,0 +1 @@
+export { default as Skeleton, type Props as SkeletonProps } from "./Skeleton.svelte";

package/dist/components/Skeleton/index.js

@@ -0,0 +1 @@
+export { default as Skeleton } from "./Skeleton.svelte";

package/dist/components/Switch/Switch.svelte

@@ -97,7 +97,7 @@
 	class={twMerge(
 		"stuic-switch",
 		`m-2 
-		relative inline-flex flex-shrink-0 items-center
+		relative inline-flex shrink-0 items-center
 		rounded-full cursor-pointer
 
 		transition-colors duration-100

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";
 export * from "./components/Notifications/index.js";
 export * from "./components/Progress/index.js";
+export * from "./components/Skeleton/index.js";
 export * from "./components/SlidingPanels/index.js";
 export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";

package/dist/index.js

@@ -41,6 +41,7 @@ export * from "./components/Modal/index.js";
 export * from "./components/ModalDialog/index.js";
 export * from "./components/Notifications/index.js";
 export * from "./components/Progress/index.js";
+export * from "./components/Skeleton/index.js";
 export * from "./components/SlidingPanels/index.js";
 export * from "./components/Spinner/index.js";
 export * from "./components/Switch/index.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@marianmeres/stuic",
-  "version": "2.22.0",
+  "version": "2.23.0",
   "files": [
     "dist",
     "!dist/**/*.test.*",