@zendir/ui 0.5.0 → 0.6.1

package/dist/react/shared/Skeleton.js

@@ -1,7 +1,20 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { memo } from "react";
 import { classNames } from "../utils/index.js";
-const SHIMMER_KEYFRAMES = `
+import { memo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/react/shared/Skeleton.tsx
+/**
+* @zendir/ui - Skeleton Components
+*
+* Loading skeleton components with Apple-style shimmer animation.
+* Used for loading states before data arrives.
+*
+* Features:
+* - Smooth shimmer animation
+* - Multiple variants (text, card, chart, circle)
+* - Respects reduced-motion preferences
+* - Matches component sizes for seamless transition
+*/
+var SHIMMER_KEYFRAMES = `
 @keyframes skeletonShimmer {
   0% {
     background-position: -200% 0;
@@ -11,314 +24,300 @@ const SHIMMER_KEYFRAMES = `
   }
 }
 `;
-const getShimmerStyle = (width, height) => ({
-  width: width ?? "100%",
-  height: height ?? 16,
-  backgroundColor: "var(--color-background-interactive-default, rgba(255,255,255,0.1))",
-  backgroundImage: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%)",
-  backgroundSize: "200% 100%",
-  backgroundRepeat: "no-repeat",
-  animation: "skeletonShimmer 1.5s ease-in-out infinite",
-  borderRadius: 4
+var getShimmerStyle = (width, height) => ({
+	width: width ?? "100%",
+	height: height ?? 16,
+	backgroundColor: "var(--color-background-interactive-default, rgba(255,255,255,0.1))",
+	backgroundImage: "linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%)",
+	backgroundSize: "200% 100%",
+	backgroundRepeat: "no-repeat",
+	animation: "skeletonShimmer 1.5s ease-in-out infinite",
+	borderRadius: 4
 });
-const SkeletonText = memo(function SkeletonText2({
-  lines = 1,
-  lastLineWidth = "80%",
-  lineHeight = 14,
-  gap = 8,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("zendir-skeleton-text", className),
-      role: "presentation",
-      "aria-hidden": "true",
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap
-      },
-      children: [
-        Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              ...getShimmerStyle(i === lines - 1 ? lastLineWidth : "100%", lineHeight)
-            }
-          },
-          i
-        )),
-        /* @__PURE__ */ jsx("style", { children: SHIMMER_KEYFRAMES })
-      ]
-    }
-  );
+/**
+* SkeletonText - Placeholder for text content
+*
+* @example
+* ```tsx
+* <SkeletonText lines={3} lastLineWidth="60%" />
+* ```
+*/
+var SkeletonText = memo(function SkeletonText({ lines = 1, lastLineWidth = "80%", lineHeight = 14, gap = 8, className = "" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-skeleton-text", className),
+		role: "presentation",
+		"aria-hidden": "true",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap
+		},
+		children: [Array.from({ length: lines }).map((_, i) => /* @__PURE__ */ jsx("div", { style: { ...getShimmerStyle(i === lines - 1 ? lastLineWidth : "100%", lineHeight) } }, i)), /* @__PURE__ */ jsx("style", { children: SHIMMER_KEYFRAMES })]
+	});
 });
-const SkeletonBox = memo(function SkeletonBox2({
-  width = "100%",
-  height = 100,
-  borderRadius = 4,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classNames("zendir-skeleton-box", className),
-      role: "presentation",
-      "aria-hidden": "true",
-      style: {
-        ...getShimmerStyle(width, height),
-        borderRadius
-      },
-      children: /* @__PURE__ */ jsx("style", { children: SHIMMER_KEYFRAMES })
-    }
-  );
+/**
+* SkeletonBox - Generic rectangular placeholder
+*
+* @example
+* ```tsx
+* <SkeletonBox width={200} height={100} />
+* ```
+*/
+var SkeletonBox = memo(function SkeletonBox({ width = "100%", height = 100, borderRadius = 4, className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames("zendir-skeleton-box", className),
+		role: "presentation",
+		"aria-hidden": "true",
+		style: {
+			...getShimmerStyle(width, height),
+			borderRadius
+		},
+		children: /* @__PURE__ */ jsx("style", { children: SHIMMER_KEYFRAMES })
+	});
 });
-const SkeletonCircle = memo(function SkeletonCircle2({
-  size = 40,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      className: classNames("zendir-skeleton-circle", className),
-      role: "presentation",
-      "aria-hidden": "true",
-      style: {
-        ...getShimmerStyle(size, size),
-        borderRadius: "50%",
-        flexShrink: 0
-      },
-      children: /* @__PURE__ */ jsx("style", { children: SHIMMER_KEYFRAMES })
-    }
-  );
+/**
+* SkeletonCircle - Circular placeholder (avatars, icons)
+*
+* @example
+* ```tsx
+* <SkeletonCircle size={48} />
+* ```
+*/
+var SkeletonCircle = memo(function SkeletonCircle({ size = 40, className = "" }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: classNames("zendir-skeleton-circle", className),
+		role: "presentation",
+		"aria-hidden": "true",
+		style: {
+			...getShimmerStyle(size, size),
+			borderRadius: "50%",
+			flexShrink: 0
+		},
+		children: /* @__PURE__ */ jsx("style", { children: SHIMMER_KEYFRAMES })
+	});
 });
-const SkeletonCard = memo(function SkeletonCard2({
-  height,
-  showHeader = true,
-  showContent = true,
-  contentLines = 3,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("zendir-skeleton-card", className),
-      role: "presentation",
-      "aria-label": "Loading...",
-      style: {
-        display: "flex",
-        flexDirection: "column",
-        gap: 16,
-        padding: 16,
-        minHeight: height,
-        backgroundColor: "var(--color-background-surface, #1b2d3e)",
-        borderRadius: 8,
-        border: "1px solid var(--color-border, rgba(255,255,255,0.1))"
-      },
-      children: [
-        showHeader && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 12 }, children: [
-          /* @__PURE__ */ jsx(SkeletonCircle, { size: 32 }),
-          /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
-            /* @__PURE__ */ jsx(SkeletonText, { lines: 1, lineHeight: 16 }),
-            /* @__PURE__ */ jsx("div", { style: { height: 6 } }),
-            /* @__PURE__ */ jsx(SkeletonText, { lines: 1, lineHeight: 12, lastLineWidth: "50%" })
-          ] })
-        ] }),
-        showContent && /* @__PURE__ */ jsx("div", { style: { flex: 1 }, children: /* @__PURE__ */ jsx(SkeletonText, { lines: contentLines, gap: 10, lineHeight: 12 }) }),
-        /* @__PURE__ */ jsx("style", { children: SHIMMER_KEYFRAMES })
-      ]
-    }
-  );
+/**
+* SkeletonCard - Card-shaped placeholder matching component cards
+*
+* @example
+* ```tsx
+* <SkeletonCard showHeader showContent contentLines={4} />
+* ```
+*/
+var SkeletonCard = memo(function SkeletonCard({ height, showHeader = true, showContent = true, contentLines = 3, className = "" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-skeleton-card", className),
+		role: "presentation",
+		"aria-label": "Loading...",
+		style: {
+			display: "flex",
+			flexDirection: "column",
+			gap: 16,
+			padding: 16,
+			minHeight: height,
+			backgroundColor: "var(--zendir-bg-surface, #1b2d3e)",
+			borderRadius: 8,
+			border: "1px solid var(--zendir-border-default, rgba(255,255,255,0.1))"
+		},
+		children: [
+			showHeader && /* @__PURE__ */ jsxs("div", {
+				style: {
+					display: "flex",
+					alignItems: "center",
+					gap: 12
+				},
+				children: [/* @__PURE__ */ jsx(SkeletonCircle, { size: 32 }), /* @__PURE__ */ jsxs("div", {
+					style: { flex: 1 },
+					children: [
+						/* @__PURE__ */ jsx(SkeletonText, {
+							lines: 1,
+							lineHeight: 16
+						}),
+						/* @__PURE__ */ jsx("div", { style: { height: 6 } }),
+						/* @__PURE__ */ jsx(SkeletonText, {
+							lines: 1,
+							lineHeight: 12,
+							lastLineWidth: "50%"
+						})
+					]
+				})]
+			}),
+			showContent && /* @__PURE__ */ jsx("div", {
+				style: { flex: 1 },
+				children: /* @__PURE__ */ jsx(SkeletonText, {
+					lines: contentLines,
+					gap: 10,
+					lineHeight: 12
+				})
+			}),
+			/* @__PURE__ */ jsx("style", { children: SHIMMER_KEYFRAMES })
+		]
+	});
 });
-const SkeletonChart = memo(function SkeletonChart2({
-  height = 200,
-  type = "line",
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("zendir-skeleton-chart", className),
-      role: "presentation",
-      "aria-label": "Loading chart...",
-      style: {
-        position: "relative",
-        height,
-        backgroundColor: "var(--color-background-surface, #1b2d3e)",
-        borderRadius: 8,
-        border: "1px solid var(--color-border, rgba(255,255,255,0.1))",
-        overflow: "hidden"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              inset: 16,
-              display: "flex",
-              alignItems: "flex-end",
-              justifyContent: "space-between",
-              gap: type === "bar" ? 8 : 0
-            },
-            children: type === "bar" ? (
-              // Bar chart skeleton
-              Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx(
-                "div",
-                {
-                  style: {
-                    ...getShimmerStyle(void 0, `${30 + Math.random() * 50}%`),
-                    flex: 1,
-                    borderRadius: "4px 4px 0 0"
-                  }
-                },
-                i
-              ))
-            ) : (
-              // Line/Area chart skeleton
-              /* @__PURE__ */ jsxs(
-                "svg",
-                {
-                  viewBox: "0 0 100 50",
-                  preserveAspectRatio: "none",
-                  style: {
-                    width: "100%",
-                    height: "100%"
-                  },
-                  children: [
-                    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", { id: "skeletonGradient", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
-                      /* @__PURE__ */ jsx("stop", { offset: "0%", stopColor: "rgba(255,255,255,0.05)", children: /* @__PURE__ */ jsx(
-                        "animate",
-                        {
-                          attributeName: "offset",
-                          values: "-0.5;1.5",
-                          dur: "1.5s",
-                          repeatCount: "indefinite"
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx("stop", { offset: "50%", stopColor: "rgba(255,255,255,0.1)", children: /* @__PURE__ */ jsx(
-                        "animate",
-                        {
-                          attributeName: "offset",
-                          values: "0;2",
-                          dur: "1.5s",
-                          repeatCount: "indefinite"
-                        }
-                      ) }),
-                      /* @__PURE__ */ jsx("stop", { offset: "100%", stopColor: "rgba(255,255,255,0.05)", children: /* @__PURE__ */ jsx(
-                        "animate",
-                        {
-                          attributeName: "offset",
-                          values: "0.5;2.5",
-                          dur: "1.5s",
-                          repeatCount: "indefinite"
-                        }
-                      ) })
-                    ] }) }),
-                    /* @__PURE__ */ jsx(
-                      "path",
-                      {
-                        d: "M0,40 Q15,35 25,30 T50,25 T75,20 T100,15 L100,50 L0,50 Z",
-                        fill: type === "area" ? "url(#skeletonGradient)" : "none",
-                        stroke: "url(#skeletonGradient)",
-                        strokeWidth: "2"
-                      }
-                    )
-                  ]
-                }
-              )
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              left: 4,
-              top: 16,
-              bottom: 16,
-              width: 24,
-              display: "flex",
-              flexDirection: "column",
-              justifyContent: "space-between"
-            },
-            children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(SkeletonBox, { width: 24, height: 8 }, i))
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: SHIMMER_KEYFRAMES })
-      ]
-    }
-  );
+/**
+* SkeletonChart - Chart placeholder with visualization hint
+*
+* @example
+* ```tsx
+* <SkeletonChart height={200} type="line" />
+* ```
+*/
+var SkeletonChart = memo(function SkeletonChart({ height = 200, type = "line", className = "" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-skeleton-chart", className),
+		role: "presentation",
+		"aria-label": "Loading chart...",
+		style: {
+			position: "relative",
+			height,
+			backgroundColor: "var(--zendir-bg-surface, #1b2d3e)",
+			borderRadius: 8,
+			border: "1px solid var(--zendir-border-default, rgba(255,255,255,0.1))",
+			overflow: "hidden"
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					position: "absolute",
+					inset: 16,
+					display: "flex",
+					alignItems: "flex-end",
+					justifyContent: "space-between",
+					gap: type === "bar" ? 8 : 0
+				},
+				children: type === "bar" ? Array.from({ length: 8 }).map((_, i) => /* @__PURE__ */ jsx("div", { style: {
+					...getShimmerStyle(void 0, `${30 + Math.random() * 50}%`),
+					flex: 1,
+					borderRadius: "4px 4px 0 0"
+				} }, i)) : /* @__PURE__ */ jsxs("svg", {
+					viewBox: "0 0 100 50",
+					preserveAspectRatio: "none",
+					style: {
+						width: "100%",
+						height: "100%"
+					},
+					children: [/* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsxs("linearGradient", {
+						id: "skeletonGradient",
+						x1: "0%",
+						y1: "0%",
+						x2: "100%",
+						y2: "0%",
+						children: [
+							/* @__PURE__ */ jsx("stop", {
+								offset: "0%",
+								stopColor: "rgba(255,255,255,0.05)",
+								children: /* @__PURE__ */ jsx("animate", {
+									attributeName: "offset",
+									values: "-0.5;1.5",
+									dur: "1.5s",
+									repeatCount: "indefinite"
+								})
+							}),
+							/* @__PURE__ */ jsx("stop", {
+								offset: "50%",
+								stopColor: "rgba(255,255,255,0.1)",
+								children: /* @__PURE__ */ jsx("animate", {
+									attributeName: "offset",
+									values: "0;2",
+									dur: "1.5s",
+									repeatCount: "indefinite"
+								})
+							}),
+							/* @__PURE__ */ jsx("stop", {
+								offset: "100%",
+								stopColor: "rgba(255,255,255,0.05)",
+								children: /* @__PURE__ */ jsx("animate", {
+									attributeName: "offset",
+									values: "0.5;2.5",
+									dur: "1.5s",
+									repeatCount: "indefinite"
+								})
+							})
+						]
+					}) }), /* @__PURE__ */ jsx("path", {
+						d: "M0,40 Q15,35 25,30 T50,25 T75,20 T100,15 L100,50 L0,50 Z",
+						fill: type === "area" ? "url(#skeletonGradient)" : "none",
+						stroke: "url(#skeletonGradient)",
+						strokeWidth: "2"
+					})]
+				})
+			}),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					position: "absolute",
+					left: 4,
+					top: 16,
+					bottom: 16,
+					width: 24,
+					display: "flex",
+					flexDirection: "column",
+					justifyContent: "space-between"
+				},
+				children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx(SkeletonBox, {
+					width: 24,
+					height: 8
+				}, i))
+			}),
+			/* @__PURE__ */ jsx("style", { children: SHIMMER_KEYFRAMES })
+		]
+	});
 });
-const Skeleton3D = memo(function Skeleton3D2({
-  height = 400,
-  className = ""
-}) {
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: classNames("zendir-skeleton-3d", className),
-      role: "presentation",
-      "aria-label": "Loading 3D view...",
-      style: {
-        position: "relative",
-        height,
-        backgroundColor: "var(--color-background-base, #101923)",
-        borderRadius: 8,
-        overflow: "hidden",
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "center"
-      },
-      children: [
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              width: Math.min(height * 0.5, 200),
-              height: Math.min(height * 0.5, 200),
-              borderRadius: "50%",
-              border: "2px solid rgba(255,255,255,0.1)",
-              backgroundImage: "linear-gradient(135deg, transparent 40%, rgba(77,172,255,0.1) 50%, transparent 60%)",
-              backgroundSize: "200% 200%",
-              animation: "skeleton3DSpin 3s linear infinite, skeletonShimmer 1.5s ease-in-out infinite"
-            }
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          "div",
-          {
-            style: {
-              position: "absolute",
-              bottom: 16,
-              left: 0,
-              right: 0,
-              textAlign: "center",
-              fontSize: 12,
-              color: "rgba(255,255,255,0.4)"
-            },
-            children: "Loading 3D Scene..."
-          }
-        ),
-        /* @__PURE__ */ jsx("style", { children: `
+/**
+* Skeleton3D - 3D viewer placeholder with sphere hint
+*
+* @example
+* ```tsx
+* <Skeleton3D height={400} />
+* ```
+*/
+var Skeleton3D = memo(function Skeleton3D({ height = 400, className = "" }) {
+	return /* @__PURE__ */ jsxs("div", {
+		className: classNames("zendir-skeleton-3d", className),
+		role: "presentation",
+		"aria-label": "Loading 3D view...",
+		style: {
+			position: "relative",
+			height,
+			backgroundColor: "var(--zendir-bg-base, #101923)",
+			borderRadius: 8,
+			overflow: "hidden",
+			display: "flex",
+			alignItems: "center",
+			justifyContent: "center"
+		},
+		children: [
+			/* @__PURE__ */ jsx("div", { style: {
+				width: Math.min(height * .5, 200),
+				height: Math.min(height * .5, 200),
+				borderRadius: "50%",
+				border: "2px solid rgba(255,255,255,0.1)",
+				backgroundImage: "linear-gradient(135deg, transparent 40%, rgba(77,172,255,0.1) 50%, transparent 60%)",
+				backgroundSize: "200% 200%",
+				animation: "skeleton3DSpin 3s linear infinite, skeletonShimmer 1.5s ease-in-out infinite"
+			} }),
+			/* @__PURE__ */ jsx("div", {
+				style: {
+					position: "absolute",
+					bottom: 16,
+					left: 0,
+					right: 0,
+					textAlign: "center",
+					fontSize: 12,
+					color: "rgba(255,255,255,0.4)"
+				},
+				children: "Loading 3D Scene..."
+			}),
+			/* @__PURE__ */ jsx("style", { children: `
         ${SHIMMER_KEYFRAMES}
         @keyframes skeleton3DSpin {
           from { transform: rotate(0deg); }
           to { transform: rotate(360deg); }
         }
       ` })
-      ]
-    }
-  );
+		]
+	});
 });
-export {
-  Skeleton3D,
-  SkeletonBox,
-  SkeletonCard,
-  SkeletonChart,
-  SkeletonCircle,
-  SkeletonText
-};
-//# sourceMappingURL=Skeleton.js.map
+//#endregion
+export { Skeleton3D, SkeletonBox, SkeletonCard, SkeletonChart, SkeletonCircle, SkeletonText };
+
+//# sourceMappingURL=Skeleton.js.map