@zendir/ui 0.1.0

package/dist/react/shared/Skeleton.js

@@ -0,0 +1,324 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { memo } from "react";
+import { classNames } from "../utils/index.js";
+const SHIMMER_KEYFRAMES = `
+@keyframes skeletonShimmer {
+  0% {
+    background-position: -200% 0;
+  }
+  100% {
+    background-position: 200% 0;
+  }
+}
+`;
+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
+});
+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 })
+      ]
+    }
+  );
+});
+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 })
+    }
+  );
+});
+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 })
+    }
+  );
+});
+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 })
+      ]
+    }
+  );
+});
+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 })
+      ]
+    }
+  );
+});
+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: `
+        ${SHIMMER_KEYFRAMES}
+        @keyframes skeleton3DSpin {
+          from { transform: rotate(0deg); }
+          to { transform: rotate(360deg); }
+        }
+      ` })
+      ]
+    }
+  );
+});
+export {
+  Skeleton3D,
+  SkeletonBox,
+  SkeletonCard,
+  SkeletonChart,
+  SkeletonCircle,
+  SkeletonText
+};
+//# sourceMappingURL=Skeleton.js.map

package/dist/react/shared/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../src/react/shared/Skeleton.tsx"],"sourcesContent":["/**\r\n * @zendir/ui - Skeleton Components\r\n * \r\n * Loading skeleton components with Apple-style shimmer animation.\r\n * Used for loading states before data arrives.\r\n * \r\n * Features:\r\n * - Smooth shimmer animation\r\n * - Multiple variants (text, card, chart, circle)\r\n * - Respects reduced-motion preferences\r\n * - Matches component sizes for seamless transition\r\n */\r\n\r\nimport React, { memo } from 'react';\r\nimport { classNames } from '../utils';\r\n\r\n// ============================================================================\r\n// Shared Styles\r\n// ============================================================================\r\n\r\nconst SHIMMER_KEYFRAMES = `\r\n@keyframes skeletonShimmer {\r\n  0% {\r\n    background-position: -200% 0;\r\n  }\r\n  100% {\r\n    background-position: 200% 0;\r\n  }\r\n}\r\n`;\r\n\r\nconst getShimmerStyle = (width?: string | number, height?: string | number): React.CSSProperties => ({\r\n  width: width ?? '100%',\r\n  height: height ?? 16,\r\n  backgroundColor: 'var(--color-background-interactive-default, rgba(255,255,255,0.1))',\r\n  backgroundImage: 'linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.08) 50%, transparent 100%)',\r\n  backgroundSize: '200% 100%',\r\n  backgroundRepeat: 'no-repeat',\r\n  animation: 'skeletonShimmer 1.5s ease-in-out infinite',\r\n  borderRadius: 4,\r\n});\r\n\r\n// ============================================================================\r\n// SkeletonText\r\n// ============================================================================\r\n\r\nexport interface SkeletonTextProps {\r\n  /** Number of lines to render */\r\n  lines?: number;\r\n  /** Width of the last line (as percentage or px) */\r\n  lastLineWidth?: string | number;\r\n  /** Height of each line */\r\n  lineHeight?: number;\r\n  /** Gap between lines */\r\n  gap?: number;\r\n  /** Custom className */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * SkeletonText - Placeholder for text content\r\n * \r\n * @example\r\n * ```tsx\r\n * <SkeletonText lines={3} lastLineWidth=\"60%\" />\r\n * ```\r\n */\r\nexport const SkeletonText = memo(function SkeletonText({\r\n  lines = 1,\r\n  lastLineWidth = '80%',\r\n  lineHeight = 14,\r\n  gap = 8,\r\n  className = '',\r\n}: SkeletonTextProps): React.ReactElement {\r\n  return (\r\n    <div\r\n      className={classNames('zendir-skeleton-text', className)}\r\n      role=\"presentation\"\r\n      aria-hidden=\"true\"\r\n      style={{\r\n        display: 'flex',\r\n        flexDirection: 'column',\r\n        gap,\r\n      }}\r\n    >\r\n      {Array.from({ length: lines }).map((_, i) => (\r\n        <div\r\n          key={i}\r\n          style={{\r\n            ...getShimmerStyle(i === lines - 1 ? lastLineWidth : '100%', lineHeight),\r\n          }}\r\n        />\r\n      ))}\r\n      <style>{SHIMMER_KEYFRAMES}</style>\r\n    </div>\r\n  );\r\n});\r\n\r\n// ============================================================================\r\n// SkeletonBox\r\n// ============================================================================\r\n\r\nexport interface SkeletonBoxProps {\r\n  /** Width of the box */\r\n  width?: string | number;\r\n  /** Height of the box */\r\n  height?: string | number;\r\n  /** Border radius */\r\n  borderRadius?: number;\r\n  /** Custom className */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * SkeletonBox - Generic rectangular placeholder\r\n * \r\n * @example\r\n * ```tsx\r\n * <SkeletonBox width={200} height={100} />\r\n * ```\r\n */\r\nexport const SkeletonBox = memo(function SkeletonBox({\r\n  width = '100%',\r\n  height = 100,\r\n  borderRadius = 4,\r\n  className = '',\r\n}: SkeletonBoxProps): React.ReactElement {\r\n  return (\r\n    <div\r\n      className={classNames('zendir-skeleton-box', className)}\r\n      role=\"presentation\"\r\n      aria-hidden=\"true\"\r\n      style={{\r\n        ...getShimmerStyle(width, height),\r\n        borderRadius,\r\n      }}\r\n    >\r\n      <style>{SHIMMER_KEYFRAMES}</style>\r\n    </div>\r\n  );\r\n});\r\n\r\n// ============================================================================\r\n// SkeletonCircle\r\n// ============================================================================\r\n\r\nexport interface SkeletonCircleProps {\r\n  /** Diameter of the circle */\r\n  size?: number;\r\n  /** Custom className */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * SkeletonCircle - Circular placeholder (avatars, icons)\r\n * \r\n * @example\r\n * ```tsx\r\n * <SkeletonCircle size={48} />\r\n * ```\r\n */\r\nexport const SkeletonCircle = memo(function SkeletonCircle({\r\n  size = 40,\r\n  className = '',\r\n}: SkeletonCircleProps): React.ReactElement {\r\n  return (\r\n    <div\r\n      className={classNames('zendir-skeleton-circle', className)}\r\n      role=\"presentation\"\r\n      aria-hidden=\"true\"\r\n      style={{\r\n        ...getShimmerStyle(size, size),\r\n        borderRadius: '50%',\r\n        flexShrink: 0,\r\n      }}\r\n    >\r\n      <style>{SHIMMER_KEYFRAMES}</style>\r\n    </div>\r\n  );\r\n});\r\n\r\n// ============================================================================\r\n// SkeletonCard\r\n// ============================================================================\r\n\r\nexport interface SkeletonCardProps {\r\n  /** Card height */\r\n  height?: number;\r\n  /** Show header placeholder */\r\n  showHeader?: boolean;\r\n  /** Show content lines */\r\n  showContent?: boolean;\r\n  /** Number of content lines */\r\n  contentLines?: number;\r\n  /** Custom className */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * SkeletonCard - Card-shaped placeholder matching component cards\r\n * \r\n * @example\r\n * ```tsx\r\n * <SkeletonCard showHeader showContent contentLines={4} />\r\n * ```\r\n */\r\nexport const SkeletonCard = memo(function SkeletonCard({\r\n  height,\r\n  showHeader = true,\r\n  showContent = true,\r\n  contentLines = 3,\r\n  className = '',\r\n}: SkeletonCardProps): React.ReactElement {\r\n  return (\r\n    <div\r\n      className={classNames('zendir-skeleton-card', className)}\r\n      role=\"presentation\"\r\n      aria-label=\"Loading...\"\r\n      style={{\r\n        display: 'flex',\r\n        flexDirection: 'column',\r\n        gap: 16,\r\n        padding: 16,\r\n        minHeight: height,\r\n        backgroundColor: 'var(--color-background-surface, #1b2d3e)',\r\n        borderRadius: 8,\r\n        border: '1px solid var(--color-border, rgba(255,255,255,0.1))',\r\n      }}\r\n    >\r\n      {/* Header */}\r\n      {showHeader && (\r\n        <div style={{ display: 'flex', alignItems: 'center', gap: 12 }}>\r\n          <SkeletonCircle size={32} />\r\n          <div style={{ flex: 1 }}>\r\n            <SkeletonText lines={1} lineHeight={16} />\r\n            <div style={{ height: 6 }} />\r\n            <SkeletonText lines={1} lineHeight={12} lastLineWidth=\"50%\" />\r\n          </div>\r\n        </div>\r\n      )}\r\n\r\n      {/* Content */}\r\n      {showContent && (\r\n        <div style={{ flex: 1 }}>\r\n          <SkeletonText lines={contentLines} gap={10} lineHeight={12} />\r\n        </div>\r\n      )}\r\n\r\n      <style>{SHIMMER_KEYFRAMES}</style>\r\n    </div>\r\n  );\r\n});\r\n\r\n// ============================================================================\r\n// SkeletonChart\r\n// ============================================================================\r\n\r\nexport interface SkeletonChartProps {\r\n  /** Chart height */\r\n  height?: number;\r\n  /** Chart type visualization */\r\n  type?: 'line' | 'bar' | 'area';\r\n  /** Custom className */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * SkeletonChart - Chart placeholder with visualization hint\r\n * \r\n * @example\r\n * ```tsx\r\n * <SkeletonChart height={200} type=\"line\" />\r\n * ```\r\n */\r\nexport const SkeletonChart = memo(function SkeletonChart({\r\n  height = 200,\r\n  type = 'line',\r\n  className = '',\r\n}: SkeletonChartProps): React.ReactElement {\r\n  return (\r\n    <div\r\n      className={classNames('zendir-skeleton-chart', className)}\r\n      role=\"presentation\"\r\n      aria-label=\"Loading chart...\"\r\n      style={{\r\n        position: 'relative',\r\n        height,\r\n        backgroundColor: 'var(--color-background-surface, #1b2d3e)',\r\n        borderRadius: 8,\r\n        border: '1px solid var(--color-border, rgba(255,255,255,0.1))',\r\n        overflow: 'hidden',\r\n      }}\r\n    >\r\n      {/* Chart area */}\r\n      <div\r\n        style={{\r\n          position: 'absolute',\r\n          inset: 16,\r\n          display: 'flex',\r\n          alignItems: 'flex-end',\r\n          justifyContent: 'space-between',\r\n          gap: type === 'bar' ? 8 : 0,\r\n        }}\r\n      >\r\n        {type === 'bar' ? (\r\n          // Bar chart skeleton\r\n          Array.from({ length: 8 }).map((_, i) => (\r\n            <div\r\n              key={i}\r\n              style={{\r\n                ...getShimmerStyle(undefined, `${30 + Math.random() * 50}%`),\r\n                flex: 1,\r\n                borderRadius: '4px 4px 0 0',\r\n              }}\r\n            />\r\n          ))\r\n        ) : (\r\n          // Line/Area chart skeleton\r\n          <svg\r\n            viewBox=\"0 0 100 50\"\r\n            preserveAspectRatio=\"none\"\r\n            style={{\r\n              width: '100%',\r\n              height: '100%',\r\n            }}\r\n          >\r\n            <defs>\r\n              <linearGradient id=\"skeletonGradient\" x1=\"0%\" y1=\"0%\" x2=\"100%\" y2=\"0%\">\r\n                <stop offset=\"0%\" stopColor=\"rgba(255,255,255,0.05)\">\r\n                  <animate\r\n                    attributeName=\"offset\"\r\n                    values=\"-0.5;1.5\"\r\n                    dur=\"1.5s\"\r\n                    repeatCount=\"indefinite\"\r\n                  />\r\n                </stop>\r\n                <stop offset=\"50%\" stopColor=\"rgba(255,255,255,0.1)\">\r\n                  <animate\r\n                    attributeName=\"offset\"\r\n                    values=\"0;2\"\r\n                    dur=\"1.5s\"\r\n                    repeatCount=\"indefinite\"\r\n                  />\r\n                </stop>\r\n                <stop offset=\"100%\" stopColor=\"rgba(255,255,255,0.05)\">\r\n                  <animate\r\n                    attributeName=\"offset\"\r\n                    values=\"0.5;2.5\"\r\n                    dur=\"1.5s\"\r\n                    repeatCount=\"indefinite\"\r\n                  />\r\n                </stop>\r\n              </linearGradient>\r\n            </defs>\r\n            <path\r\n              d=\"M0,40 Q15,35 25,30 T50,25 T75,20 T100,15 L100,50 L0,50 Z\"\r\n              fill={type === 'area' ? 'url(#skeletonGradient)' : 'none'}\r\n              stroke=\"url(#skeletonGradient)\"\r\n              strokeWidth=\"2\"\r\n            />\r\n          </svg>\r\n        )}\r\n      </div>\r\n\r\n      {/* Axis labels */}\r\n      <div\r\n        style={{\r\n          position: 'absolute',\r\n          left: 4,\r\n          top: 16,\r\n          bottom: 16,\r\n          width: 24,\r\n          display: 'flex',\r\n          flexDirection: 'column',\r\n          justifyContent: 'space-between',\r\n        }}\r\n      >\r\n        {Array.from({ length: 4 }).map((_, i) => (\r\n          <SkeletonBox key={i} width={24} height={8} />\r\n        ))}\r\n      </div>\r\n\r\n      <style>{SHIMMER_KEYFRAMES}</style>\r\n    </div>\r\n  );\r\n});\r\n\r\n// ============================================================================\r\n// Skeleton3D\r\n// ============================================================================\r\n\r\nexport interface Skeleton3DProps {\r\n  /** Container height */\r\n  height?: number;\r\n  /** Custom className */\r\n  className?: string;\r\n}\r\n\r\n/**\r\n * Skeleton3D - 3D viewer placeholder with sphere hint\r\n * \r\n * @example\r\n * ```tsx\r\n * <Skeleton3D height={400} />\r\n * ```\r\n */\r\nexport const Skeleton3D = memo(function Skeleton3D({\r\n  height = 400,\r\n  className = '',\r\n}: Skeleton3DProps): React.ReactElement {\r\n  return (\r\n    <div\r\n      className={classNames('zendir-skeleton-3d', className)}\r\n      role=\"presentation\"\r\n      aria-label=\"Loading 3D view...\"\r\n      style={{\r\n        position: 'relative',\r\n        height,\r\n        backgroundColor: 'var(--color-background-base, #101923)',\r\n        borderRadius: 8,\r\n        overflow: 'hidden',\r\n        display: 'flex',\r\n        alignItems: 'center',\r\n        justifyContent: 'center',\r\n      }}\r\n    >\r\n      {/* Spinning sphere hint */}\r\n      <div\r\n        style={{\r\n          width: Math.min(height * 0.5, 200),\r\n          height: Math.min(height * 0.5, 200),\r\n          borderRadius: '50%',\r\n          border: '2px solid rgba(255,255,255,0.1)',\r\n          backgroundImage: 'linear-gradient(135deg, transparent 40%, rgba(77,172,255,0.1) 50%, transparent 60%)',\r\n          backgroundSize: '200% 200%',\r\n          animation: 'skeleton3DSpin 3s linear infinite, skeletonShimmer 1.5s ease-in-out infinite',\r\n        }}\r\n      />\r\n\r\n      {/* Loading text */}\r\n      <div\r\n        style={{\r\n          position: 'absolute',\r\n          bottom: 16,\r\n          left: 0,\r\n          right: 0,\r\n          textAlign: 'center',\r\n          fontSize: 12,\r\n          color: 'rgba(255,255,255,0.4)',\r\n        }}\r\n      >\r\n        Loading 3D Scene...\r\n      </div>\r\n\r\n      <style>{`\r\n        ${SHIMMER_KEYFRAMES}\r\n        @keyframes skeleton3DSpin {\r\n          from { transform: rotate(0deg); }\r\n          to { transform: rotate(360deg); }\r\n        }\r\n      `}</style>\r\n    </div>\r\n  );\r\n});\r\n"],"names":["SkeletonText","SkeletonBox","SkeletonCircle","SkeletonCard","SkeletonChart","Skeleton3D"],"mappings":"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"}

package/dist/react/shared/index.d.ts

@@ -0,0 +1,12 @@
+/**
+ * @zendir/ui - Shared Components
+ *
+ * Foundation components used across the SDK:
+ * - Error handling
+ * - Loading states
+ * - Common patterns
+ */
+export { ErrorBoundary, withErrorBoundary } from './ErrorBoundary';
+export type { ErrorBoundaryProps } from './ErrorBoundary';
+export { SkeletonText, SkeletonBox, SkeletonCircle, SkeletonCard, SkeletonChart, Skeleton3D, } from './Skeleton';
+export type { SkeletonTextProps, SkeletonBoxProps, SkeletonCircleProps, SkeletonCardProps, SkeletonChartProps, Skeleton3DProps, } from './Skeleton';