@zendir/ui 0.5.0 → 0.6.0

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

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

package/dist/react/theme/ThemeProvider.d.ts

@@ -1,325 +1,6 @@
 import { default as React, ReactNode } from 'react';
-
-export type ThemeVariant = 'astro' | 'purple-hue' | 'hybrid' | 'transparent' | 'transparent-bold' | 'transparent-minimal';
-export type ThemeMode = 'light' | 'dark';
-export interface ThemeColors {
-    background: {
-        base: string;
-        surface: string;
-        elevated: string;
-        overlay: string;
-    };
-    border: {
-        default: string;
-        muted: string;
-        focus: string;
-        /** Transparent theme: thin faded top-to-bottom border (box-shadow, use with border: 'none') */
-        fadedBoxShadow?: string;
-        /** Card border style (computed from theme – solid or transparent faded). Use ...tokens.colors.border.cardStyle */
-        cardStyle?: React.CSSProperties;
-        /** Card border for dashed/empty state. Use ...tokens.colors.border.cardStyleDashed */
-        cardStyleDashed?: React.CSSProperties;
-        /** Card border using default color (e.g. NavBall, EclipseTimer). Use ...tokens.colors.border.cardStyleDefault */
-        cardStyleDefault?: React.CSSProperties;
-    };
-    text: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-        /** Muted/placeholder text (alias for tertiary when not set) */
-        muted?: string;
-        inverse: string;
-    };
-    status: {
-        normal: string;
-        standby: string;
-        caution: string;
-        serious: string;
-        critical: string;
-        off: string;
-    };
-    semantic: {
-        success: string;
-        warning: string;
-        error: string;
-        info: string;
-    };
-    accent: {
-        primary: string;
-        secondary: string;
-        tertiary: string;
-    };
-    interactive: {
-        default: string;
-        hover: string;
-        active: string;
-        disabled: string;
-        /** Transparent theme: button/control bg (low opacity purple) when not hovered */
-        transparentDefault?: string;
-        /** Transparent theme: button/control bg on hover (higher opacity purple) */
-        transparentHover?: string;
-        /** Transparent theme: input field bg (semi-transparent purple tint) */
-        transparentInputBg?: string;
-    };
-}
-export interface ThemeAnimation {
-    /** Fast transitions (hover states) - 150ms */
-    fast: string;
-    /** Normal transitions (most interactions) - 250ms */
-    normal: string;
-    /** Slow transitions (page/mode changes) - 400ms */
-    slow: string;
-    /** Spring animation for playful interactions */
-    spring: string;
-    /** Easing function */
-    easing: {
-        default: string;
-        in: string;
-        out: string;
-        inOut: string;
-    };
-    /** Duration values in milliseconds */
-    duration: {
-        instant: number;
-        fast: number;
-        normal: number;
-        slow: number;
-    };
-}
-export interface ThemeFocus {
-    /** Focus ring color */
-    color: string;
-    /** Focus ring width */
-    width: string;
-    /** Focus ring offset */
-    offset: string;
-    /** Full focus ring CSS */
-    ring: string;
-    /** Focus ring style object */
-    style: React.CSSProperties;
-}
-/**
- * Astro UX Typography Style Token
- * Based on https://www.astrouxds.com/foundations/typography/
- */
-export interface TypographyStyle {
-    fontSize: string;
-    fontWeight: number;
-    letterSpacing: string;
-    lineHeight: string;
-}
-export interface ThemeTokens {
-    colors: ThemeColors;
-    spacing: {
-        /** 2px — micro adjustments, decorative offsets */
-        xxs: string;
-        /** 4px — tight gaps, icon padding */
-        xs: string;
-        /** 8px — compact spacing, small gaps */
-        sm: string;
-        /** 12px — form fields, compact cards (between sm and md) */
-        smd: string;
-        /** 16px — default card padding, section gaps */
-        md: string;
-        /** 20px — slightly generous spacing */
-        mdl: string;
-        /** 24px — generous spacing, content area padding */
-        lg: string;
-        /** 32px — large section gaps */
-        xl: string;
-        /** 48px — extra large spacing */
-        xxl: string;
-    };
-    borderRadius: {
-        none: string;
-        /** 1px — very subtle rounding */
-        xs: string;
-        /** 2px — small elements, badges, tooltips */
-        sm: string;
-        /** 4px — inputs, selects, standard controls */
-        md: string;
-        /** 8px — cards, containers */
-        lg: string;
-        /** 12px — prominent surfaces, modals */
-        xl: string;
-        /** 9999px — pills, fully rounded */
-        full: string;
-    };
-    /** Standardised element heights for interactive controls */
-    elementSize: {
-        /** 28px — compact controls */
-        sm: string;
-        /** 36px — default controls */
-        md: string;
-        /** 44px — prominent controls, touch targets */
-        lg: string;
-    };
-    typography: {
-        fontFamily: {
-            primary: string;
-            /** Optional heading face. Defaults to Sora, falls back to primary. */
-            heading?: string;
-            mono: string;
-        };
-        display: {
-            1: TypographyStyle;
-            2: TypographyStyle;
-        };
-        heading: {
-            1: TypographyStyle;
-            '1Bold': TypographyStyle;
-            2: TypographyStyle;
-            3: TypographyStyle;
-            4: TypographyStyle;
-            5: TypographyStyle;
-            6: TypographyStyle;
-        };
-        body: {
-            1: TypographyStyle;
-            '1Bold': TypographyStyle;
-            2: TypographyStyle;
-            '2Bold': TypographyStyle;
-            3: TypographyStyle;
-            '3Bold': TypographyStyle;
-        };
-        control: {
-            1: TypographyStyle;
-            '1Bold': TypographyStyle;
-        };
-        fontSize: {
-            micro: string;
-            xxs: string;
-            xs: string;
-            sm: string;
-            base: string;
-            md: string;
-            lg: string;
-            xl: string;
-            xxl: string;
-            xxxl: string;
-        };
-        fontWeight: {
-            light: number;
-            normal: number;
-            medium: number;
-            semibold: number;
-            bold: number;
-        };
-        lineHeight: {
-            tight: string;
-            normal: string;
-            relaxed: string;
-        };
-        letterSpacing: {
-            tight: string;
-            normal: string;
-            wide: string;
-        };
-    };
-    shadows: {
-        none: string;
-        sm: string;
-        md: string;
-        lg: string;
-        xl: string;
-        glow: (color: string) => string;
-    };
-    animation: ThemeAnimation;
-    focus: ThemeFocus;
-    /** Semantic layout tokens for consistent spacing across cards, forms, and sections */
-    layout: LayoutTokens;
-    /** Semantic border tokens for consistent element styling (derived from theme colors) */
-    borders: BorderTokens;
-}
-export interface LayoutTokens {
-    /** Card / panel container spacing */
-    card: {
-        /** Internal padding of card containers */
-        padding: string;
-        /** Gap between cards in grid layouts (desktop) */
-        gap: string;
-        /** Gap between cards in grid layouts (mobile / compact) */
-        gapCompact: string;
-        /** Card heading: icon size, title typography, gap — single system for all cards/charts */
-        heading: {
-            iconSize: number;
-            iconSizeCompact: number;
-            titleFontSize: string;
-            /** Smaller title for chart headers (e.g. Power Trends) so they match card visual weight */
-            titleFontSizeChart: string;
-            titleFontWeight: number;
-            gap: number;
-        };
-    };
-    /** Section heading spacing (heading + divider + content) */
-    section: {
-        /** Padding below heading text, above the divider border */
-        headerPaddingBottom: string;
-        /** Margin below the divider border, before content */
-        headerMarginBottom: string;
-        /** Padding above the first content element after heading */
-        contentPaddingTop: string;
-    };
-    /** Form and input field spacing */
-    form: {
-        /** Vertical gap between stacked form fields */
-        fieldGap: string;
-        /** Horizontal gap between side-by-side inline fields */
-        inlineGap: string;
-        /** Padding inside grouped / nested field containers */
-        groupPadding: string;
-        /** Gap between items within a field group */
-        groupGap: string;
-        /** Gap between label text and helper icons (e.g. tooltip) */
-        labelGap: string;
-    };
-    /** Nested surface / panel spacing (e.g. grouped fields within a card) */
-    surface: {
-        /** Internal padding of nested surfaces */
-        padding: string;
-        /** Border radius of nested surfaces */
-        borderRadius: string;
-        /** Gap between items in compact nested surfaces */
-        gap: string;
-    };
-}
-export interface BorderTokens {
-    /** Border widths — standardised across all interactive elements */
-    width: {
-        /** Thin (1px) — inputs, cards, dividers, dropdowns */
-        thin: string;
-        /** Medium (1.5px) — secondary buttons, emphasised inputs */
-        medium: string;
-        /** Thick (2px) — checkboxes, accent borders, active tabs */
-        thick: string;
-    };
-    /** Pre-computed input / control borders (width + style + color) */
-    input: {
-        /** Default resting state */
-        default: string;
-        /** Hover state (accent at 50% opacity) */
-        hover: string;
-        /** Focused state (full accent) */
-        focus: string;
-        /** Error / critical state */
-        error: string;
-    };
-    /** Focus ring box-shadow values for interactive elements */
-    focusRing: {
-        /** Standard ring for inputs and selects */
-        default: string;
-        /** Ring for buttons (double-ring pattern) */
-        button: string;
-        /** Subtle ring for checkboxes, tabs, toggles */
-        subtle: string;
-    };
-    /** Section divider border (headings, dialog headers/footers, tab bars) */
-    divider: string;
-    /** Dropdown / popover container border */
-    dropdown: string;
-    /** Separator line inside elements (unit separators, table rows) */
-    separator: string;
-}
+import { ThemeVariant, ThemeMode, ThemeColors, ThemeTokens, ThemeAnimation, ThemeFocus, LayoutTokens, BorderTokens } from './types';
+export type { ThemeVariant, ThemeMode, ThemeColors, ThemeTokens, ThemeAnimation, ThemeFocus, LayoutTokens, BorderTokens, };
 export interface ThemeContextValue {
     theme: ThemeVariant;
     mode: ThemeMode;