premium-react-loaders 1.0.0 → 1.0.1

package/README.md

@@ -1,13 +1,21 @@
 # Premium React Loaders
 
-A comprehensive collection of **18 premium, production-ready loading components** for React applications. Built with TypeScript and Tailwind CSS for maximum flexibility and customization.
+A comprehensive collection of **20 premium, production-ready loading components** for React applications. Built with TypeScript and Tailwind CSS for maximum flexibility and customization.
 
 [![npm version](https://img.shields.io/npm/v/premium-react-loaders.svg)](https://www.npmjs.com/package/premium-react-loaders)
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg)](https://opensource.org/licenses/MIT)
 
+## Demo
+
+🚀 **[Interactive Demo](https://premium-react-loaders.ishansasika.dev/)** - Playground with live controls and component customization
+
+📚 **[Storybook Documentation](https://docs.premium-react-loaders.ishansasika.dev/)** - Detailed component documentation and examples
+
+See all 20 components in action with interactive examples and customization options.
+
 ## Features
 
-- **18 Premium Components** across 4 categories (Skeleton, Spinner, Progress, Pulse)
+- **20 Premium Components** across 5 categories (Skeleton, Spinner, Progress, Pulse, Overlay)
 - **Full TypeScript Support** with exported type definitions
 - **Tailwind CSS Integration** for easy customization
 - **Tree-shakeable** - only bundle what you use
@@ -87,7 +95,7 @@ function App() {
 
 ## Component Categories
 
-### Skeleton Loaders (7 components)
+### Skeleton Loaders (8 components)
 
 Placeholder components that mimic content layout while loading:
 
@@ -98,6 +106,7 @@ Placeholder components that mimic content layout while loading:
 - **SkeletonCard** - Card layout with avatar + text
 - **SkeletonList** - List of skeleton items
 - **SkeletonTable** - Table skeleton with rows/columns
+- **SkeletonPage** - Pre-built full page layouts (default, dashboard, article, profile)
 
 ### Spinner Loaders (5 components)
 
@@ -125,6 +134,12 @@ Bouncing, pulsing, wave animations:
 - **PulseWave** - Wave pattern bars
 - **PulseBars** - Equalizer-style pulsing bars
 
+### Overlay Components (1 component)
+
+Wrapper component for displaying loaders over content:
+
+- **LoaderOverlay** - Displays any loader over content with backdrop (full-screen or container-relative)
+
 ## Usage Examples
 
 ### Skeleton Components
@@ -222,6 +237,37 @@ import { PulseDots, PulseWave, PulseBars } from 'premium-react-loaders';
 <PulseBars barCount={4} speed="fast" />
 ```
 
+### New in v1.0.1
+
+```tsx
+import { LoaderOverlay, SkeletonPage, SpinnerCircle } from 'premium-react-loaders';
+
+// Page skeleton for full page loading
+<SkeletonPage variant="dashboard" />
+<SkeletonPage variant="article" />
+<SkeletonPage variant="profile" />
+
+// Loader overlay over content
+<LoaderOverlay
+  loading={isLoading}
+  loader={<SpinnerCircle size={50} />}
+  blur
+>
+  <YourContent />
+</LoaderOverlay>
+
+// Full-screen overlay with custom backdrop
+<LoaderOverlay
+  loading={isLoading}
+  loader={<SpinnerCircle />}
+  position="fixed"
+  backdropOpacity={0.8}
+  backdropColor="#000000"
+>
+  <YourApp />
+</LoaderOverlay>
+```
+
 ## Customization
 
 All components support multiple customization methods:

package/dist/components/index.d.ts

@@ -2,4 +2,5 @@ export * from './skeleton';
 export * from './spinner';
 export * from './progress';
 export * from './pulse';
+export * from './overlay';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAC;AAG3B,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,SAAS,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AACA,cAAc,YAAY,CAAC;AAG3B,cAAc,WAAW,CAAC;AAG1B,cAAc,YAAY,CAAC;AAG3B,cAAc,SAAS,CAAC;AAGxB,cAAc,WAAW,CAAC"}

package/dist/components/overlay/LoaderOverlay.d.ts

@@ -0,0 +1,28 @@
+import { LoaderOverlayProps } from '../../types';
+/**
+ * LoaderOverlay - Overlay wrapper for displaying loaders over content
+ *
+ * A flexible overlay component that displays a loader over content during loading states.
+ * Supports both full-screen and container-relative positioning.
+ *
+ * @example
+ * ```tsx
+ * // Full screen overlay
+ * <LoaderOverlay loading={isLoading} loader={<SpinnerCircle />}>
+ *   <YourContent />
+ * </LoaderOverlay>
+ *
+ * // Container overlay with custom backdrop
+ * <LoaderOverlay
+ *   loading={isLoading}
+ *   loader={<SpinnerRing />}
+ *   position="absolute"
+ *   backdropOpacity={0.7}
+ *   blur
+ * >
+ *   <YourContent />
+ * </LoaderOverlay>
+ * ```
+ */
+export declare const LoaderOverlay: import('react').ForwardRefExoticComponent<LoaderOverlayProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=LoaderOverlay.d.ts.map

package/dist/components/overlay/LoaderOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/LoaderOverlay.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAGjD;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,eAAO,MAAM,aAAa,+GA+DzB,CAAC"}

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

@@ -0,0 +1,2 @@
+export { LoaderOverlay } from './LoaderOverlay';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/overlay/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/overlay/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/components/skeleton/SkeletonPage.d.ts

@@ -0,0 +1,16 @@
+import { SkeletonPageProps } from '../../types';
+/**
+ * SkeletonPage - Pre-built page loading skeleton
+ *
+ * A ready-to-use skeleton layout for full page loading states.
+ * Displays a common page structure with header, navigation, and content sections.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonPage />
+ * <SkeletonPage variant="dashboard" />
+ * <SkeletonPage variant="article" animate={false} />
+ * ```
+ */
+export declare const SkeletonPage: import('react').ForwardRefExoticComponent<SkeletonPageProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SkeletonPage.d.ts.map

package/dist/components/skeleton/SkeletonPage.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonPage.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/SkeletonPage.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,iBAAiB,EAAE,MAAM,aAAa,CAAC;AAMhD;;;;;;;;;;;;GAYG;AACH,eAAO,MAAM,YAAY,8GA+LxB,CAAC"}

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

@@ -5,4 +5,5 @@ export { SkeletonImage } from './SkeletonImage';
 export { SkeletonCard } from './SkeletonCard';
 export { SkeletonList } from './SkeletonList';
 export { SkeletonTable } from './SkeletonTable';
+export { SkeletonPage } from './SkeletonPage';
 //# sourceMappingURL=index.d.ts.map

package/dist/components/skeleton/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/skeleton/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAClD,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAChD,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/index.cjs

@@ -10,17 +10,19 @@ const SkeletonImage = require("./index8.cjs");
 const SkeletonCard = require("./index9.cjs");
 const SkeletonList = require("./index10.cjs");
 const SkeletonTable = require("./index11.cjs");
-const SpinnerCircle = require("./index12.cjs");
-const SpinnerRing = require("./index13.cjs");
-const SpinnerDots = require("./index14.cjs");
-const SpinnerBars = require("./index15.cjs");
-const SpinnerGrid = require("./index16.cjs");
-const ProgressBar = require("./index17.cjs");
-const ProgressCircle = require("./index18.cjs");
-const ProgressRing = require("./index19.cjs");
-const PulseDots = require("./index20.cjs");
-const PulseWave = require("./index21.cjs");
-const PulseBars = require("./index22.cjs");
+const SkeletonPage = require("./index12.cjs");
+const SpinnerCircle = require("./index13.cjs");
+const SpinnerRing = require("./index14.cjs");
+const SpinnerDots = require("./index15.cjs");
+const SpinnerBars = require("./index16.cjs");
+const SpinnerGrid = require("./index17.cjs");
+const ProgressBar = require("./index18.cjs");
+const ProgressCircle = require("./index19.cjs");
+const ProgressRing = require("./index20.cjs");
+const PulseDots = require("./index21.cjs");
+const PulseWave = require("./index22.cjs");
+const PulseBars = require("./index23.cjs");
+const LoaderOverlay = require("./index24.cjs");
 const version = "1.0.0";
 exports.cn = classNames.cn;
 exports.getAnimationDuration = colors.getAnimationDuration;
@@ -32,6 +34,7 @@ exports.SkeletonImage = SkeletonImage.SkeletonImage;
 exports.SkeletonCard = SkeletonCard.SkeletonCard;
 exports.SkeletonList = SkeletonList.SkeletonList;
 exports.SkeletonTable = SkeletonTable.SkeletonTable;
+exports.SkeletonPage = SkeletonPage.SkeletonPage;
 exports.SpinnerCircle = SpinnerCircle.SpinnerCircle;
 exports.SpinnerRing = SpinnerRing.SpinnerRing;
 exports.SpinnerDots = SpinnerDots.SpinnerDots;
@@ -43,5 +46,6 @@ exports.ProgressRing = ProgressRing.ProgressRing;
 exports.PulseDots = PulseDots.PulseDots;
 exports.PulseWave = PulseWave.PulseWave;
 exports.PulseBars = PulseBars.PulseBars;
+exports.LoaderOverlay = LoaderOverlay.LoaderOverlay;
 exports.version = version;
 //# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.0.0';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.cjs","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.0.0';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.js

@@ -8,19 +8,22 @@ import { SkeletonImage } from "./index8.js";
 import { SkeletonCard } from "./index9.js";
 import { SkeletonList } from "./index10.js";
 import { SkeletonTable } from "./index11.js";
-import { SpinnerCircle } from "./index12.js";
-import { SpinnerRing } from "./index13.js";
-import { SpinnerDots } from "./index14.js";
-import { SpinnerBars } from "./index15.js";
-import { SpinnerGrid } from "./index16.js";
-import { ProgressBar } from "./index17.js";
-import { ProgressCircle } from "./index18.js";
-import { ProgressRing } from "./index19.js";
-import { PulseDots } from "./index20.js";
-import { PulseWave } from "./index21.js";
-import { PulseBars } from "./index22.js";
+import { SkeletonPage } from "./index12.js";
+import { SpinnerCircle } from "./index13.js";
+import { SpinnerRing } from "./index14.js";
+import { SpinnerDots } from "./index15.js";
+import { SpinnerBars } from "./index16.js";
+import { SpinnerGrid } from "./index17.js";
+import { ProgressBar } from "./index18.js";
+import { ProgressCircle } from "./index19.js";
+import { ProgressRing } from "./index20.js";
+import { PulseDots } from "./index21.js";
+import { PulseWave } from "./index22.js";
+import { PulseBars } from "./index23.js";
+import { LoaderOverlay } from "./index24.js";
 const version = "1.0.0";
 export {
+  LoaderOverlay,
   ProgressBar,
   ProgressCircle,
   ProgressRing,
@@ -32,6 +35,7 @@ export {
   SkeletonCard,
   SkeletonImage,
   SkeletonList,
+  SkeletonPage,
   SkeletonTable,
   SkeletonText,
   SpinnerBars,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.0.0';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;"}
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["// Import styles\nimport './styles/index.css';\n\n// Component exports\nexport * from './components';\n\n// Type exports\nexport type * from './types';\n\n// Utility exports\nexport { cn } from './utils/classNames';\nexport { getAnimationDuration, normalizeSize } from './utils/colors';\n\n// Version\nexport const version = '1.0.0';\n"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAcO,MAAM,UAAU;"}

package/dist/index12.cjs

@@ -2,62 +2,151 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
 const react = require("react");
-const colors = require("./index4.cjs");
+const Skeleton = require("./index5.cjs");
+const SkeletonText = require("./index6.cjs");
+const SkeletonAvatar = require("./index7.cjs");
 const classNames = require("./index3.cjs");
-const SpinnerCircle = react.forwardRef(
+const SkeletonPage = react.forwardRef(
   ({
-    size = 40,
-    color = "#3b82f6",
-    thickness = 4,
-    speed = "normal",
+    variant = "default",
+    animate = true,
+    baseColor = "#e0e0e0",
+    highlightColor = "#f5f5f5",
     className,
     style,
-    testId = "spinner-circle",
+    testId = "skeleton-page",
     visible = true,
-    ariaLabel = "Loading...",
     ...rest
   }, ref) => {
     if (!visible) return null;
+    const commonProps = {
+      animate,
+      baseColor,
+      highlightColor
+    };
+    const renderDefault = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between border-b pb-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 200, height: 32, ...commonProps }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 100, height: 36, borderRadius: 6, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonAvatar.SkeletonAvatar, { size: 40, ...commonProps })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 3, ...commonProps }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 120, borderRadius: 8, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 120, borderRadius: 8, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 120, borderRadius: 8, ...commonProps })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 5, ...commonProps })
+      ] })
+    ] });
+    const renderDashboard = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 180, height: 28, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 120, height: 36, borderRadius: 6, ...commonProps })
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid grid-cols-4 gap-4", children: [...Array(4)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border rounded-lg space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 100, height: 16, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 80, height: 32, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 60, height: 12, ...commonProps })
+        ] }, i)) })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 300, borderRadius: 8, ...commonProps }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-3", children: [
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 20, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 20, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 20, ...commonProps })
+        ] }),
+        [...Array(5)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-4", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 16, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 16, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 16, ...commonProps })
+        ] }, i))
+      ] })
+    ] });
+    const renderArticle = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "max-w-3xl mx-auto space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: "80%", height: 40, ...commonProps }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonAvatar.SkeletonAvatar, { size: 48, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2 flex-1", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 120, height: 16, ...commonProps }),
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 180, height: 14, ...commonProps })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 400, borderRadius: 8, ...commonProps }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-4", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 4, ...commonProps }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 200, borderRadius: 8, ...commonProps }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 6, ...commonProps }),
+        /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 250, borderRadius: 8, ...commonProps }),
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 4, ...commonProps })
+      ] })
+    ] });
+    const renderProfile = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-6", children: [
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-6 border-b pb-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx(SkeletonAvatar.SkeletonAvatar, { size: 120, ...commonProps }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 200, height: 32, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 20, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 2, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 100, height: 36, borderRadius: 6, ...commonProps }),
+            /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 100, height: 36, borderRadius: 6, ...commonProps })
+          ] })
+        ] })
+      ] }),
+      /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "grid grid-cols-3 gap-6", children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-4", children: /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "space-y-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 100, height: 20, ...commonProps }),
+          [...Array(4)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 16, ...commonProps }, i))
+        ] }) }),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: "col-span-2 space-y-4", children: [...Array(3)].map((_, i) => /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "p-4 border rounded-lg space-y-3", children: [
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-center gap-3", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(SkeletonAvatar.SkeletonAvatar, { size: 40, ...commonProps }),
+            /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex-1 space-y-2", children: [
+              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 150, height: 16, ...commonProps }),
+              /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { width: 100, height: 12, ...commonProps })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsxRuntime.jsx(SkeletonText.SkeletonText, { lines: 2, ...commonProps }),
+          /* @__PURE__ */ jsxRuntime.jsx(Skeleton.Skeleton, { height: 200, borderRadius: 6, ...commonProps })
+        ] }, i)) })
+      ] })
+    ] });
+    const renderContent = () => {
+      switch (variant) {
+        case "dashboard":
+          return renderDashboard();
+        case "article":
+          return renderArticle();
+        case "profile":
+          return renderProfile();
+        default:
+          return renderDefault();
+      }
+    };
     return /* @__PURE__ */ jsxRuntime.jsx(
       "div",
       {
         ref,
         "data-testid": testId,
-        className: classNames.cn("inline-flex items-center justify-center", className),
+        className: classNames.cn("w-full p-6", className),
         style,
         role: "status",
-        "aria-label": ariaLabel,
+        "aria-label": "Loading page...",
         "aria-busy": "true",
         ...rest,
-        children: /* @__PURE__ */ jsxRuntime.jsx(
-          "svg",
-          {
-            className: "animate-spinner-rotate",
-            style: {
-              width: colors.normalizeSize(size),
-              height: colors.normalizeSize(size),
-              animationDuration: colors.getAnimationDuration(speed)
-            },
-            viewBox: "0 0 50 50",
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              "circle",
-              {
-                cx: "25",
-                cy: "25",
-                r: 25 - thickness * 2,
-                fill: "none",
-                stroke: color,
-                strokeWidth: thickness,
-                strokeDasharray: "80, 200",
-                strokeLinecap: "round"
-              }
-            )
-          }
-        )
+        children: renderContent()
       }
     );
   }
 );
-SpinnerCircle.displayName = "SpinnerCircle";
-exports.SpinnerCircle = SpinnerCircle;
+SkeletonPage.displayName = "SkeletonPage";
+exports.SkeletonPage = SkeletonPage;
 //# sourceMappingURL=index12.cjs.map

package/dist/index12.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"index12.cjs","sources":["../src/components/spinner/SpinnerCircle.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SpinnerCircleProps } from '../../types';\nimport { cn, normalizeSize, getAnimationDuration } from '../../utils';\n\n/**\n * SpinnerCircle - Basic rotating circle spinner\n *\n * A simple, elegant circular spinner with a partial arc that rotates continuously.\n *\n * @example\n * ```tsx\n * <SpinnerCircle size={40} color=\"#3b82f6\" />\n * <SpinnerCircle size={24} thickness={3} speed=\"fast\" />\n * ```\n */\nexport const SpinnerCircle = forwardRef<HTMLDivElement, SpinnerCircleProps>(\n  (\n    {\n      size = 40,\n      color = '#3b82f6',\n      thickness = 4,\n      speed = 'normal',\n      className,\n      style,\n      testId = 'spinner-circle',\n      visible = true,\n      ariaLabel = 'Loading...',\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('inline-flex items-center justify-center', className)}\n        style={style}\n        role=\"status\"\n        aria-label={ariaLabel}\n        aria-busy=\"true\"\n        {...rest}\n      >\n        <svg\n          className=\"animate-spinner-rotate\"\n          style={{\n            width: normalizeSize(size),\n            height: normalizeSize(size),\n            animationDuration: getAnimationDuration(speed),\n          }}\n          viewBox=\"0 0 50 50\"\n        >\n          <circle\n            cx=\"25\"\n            cy=\"25\"\n            r={25 - thickness * 2}\n            fill=\"none\"\n            stroke={color}\n            strokeWidth={thickness}\n            strokeDasharray=\"80, 200\"\n            strokeLinecap=\"round\"\n          />\n        </svg>\n      </div>\n    );\n  }\n);\n\nSpinnerCircle.displayName = 'SpinnerCircle';\n"],"names":["forwardRef","jsx","cn","normalizeSize","getAnimationDuration"],"mappings":";;;;;;AAeO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,QAAQ;AAAA,IACR,YAAY;AAAA,IACZ,QAAQ;AAAA,IACR;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,2CAA2C,SAAS;AAAA,QAClE;AAAA,QACA,MAAK;AAAA,QACL,cAAY;AAAA,QACZ,aAAU;AAAA,QACT,GAAG;AAAA,QAEJ,UAAAD,2BAAAA;AAAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAU;AAAA,YACV,OAAO;AAAA,cACL,OAAOE,OAAAA,cAAc,IAAI;AAAA,cACzB,QAAQA,OAAAA,cAAc,IAAI;AAAA,cAC1B,mBAAmBC,OAAAA,qBAAqB,KAAK;AAAA,YAAA;AAAA,YAE/C,SAAQ;AAAA,YAER,UAAAH,2BAAAA;AAAAA,cAAC;AAAA,cAAA;AAAA,gBACC,IAAG;AAAA,gBACH,IAAG;AAAA,gBACH,GAAG,KAAK,YAAY;AAAA,gBACpB,MAAK;AAAA,gBACL,QAAQ;AAAA,gBACR,aAAa;AAAA,gBACb,iBAAgB;AAAA,gBAChB,eAAc;AAAA,cAAA;AAAA,YAAA;AAAA,UAChB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;"}
+{"version":3,"file":"index12.cjs","sources":["../src/components/skeleton/SkeletonPage.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonPageProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\nimport { SkeletonText } from './SkeletonText';\nimport { SkeletonAvatar } from './SkeletonAvatar';\n\n/**\n * SkeletonPage - Pre-built page loading skeleton\n *\n * A ready-to-use skeleton layout for full page loading states.\n * Displays a common page structure with header, navigation, and content sections.\n *\n * @example\n * ```tsx\n * <SkeletonPage />\n * <SkeletonPage variant=\"dashboard\" />\n * <SkeletonPage variant=\"article\" animate={false} />\n * ```\n */\nexport const SkeletonPage = forwardRef<HTMLDivElement, SkeletonPageProps>(\n  (\n    {\n      variant = 'default',\n      animate = true,\n      baseColor = '#e0e0e0',\n      highlightColor = '#f5f5f5',\n      className,\n      style,\n      testId = 'skeleton-page',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const commonProps = {\n      animate,\n      baseColor,\n      highlightColor,\n    };\n\n    const renderDefault = () => (\n      <div className=\"space-y-6\">\n        {/* Header */}\n        <div className=\"flex items-center justify-between border-b pb-4\">\n          <Skeleton width={200} height={32} {...commonProps} />\n          <div className=\"flex items-center gap-4\">\n            <Skeleton width={100} height={36} borderRadius={6} {...commonProps} />\n            <SkeletonAvatar size={40} {...commonProps} />\n          </div>\n        </div>\n\n        {/* Content */}\n        <div className=\"space-y-4\">\n          <SkeletonText lines={3} {...commonProps} />\n          <div className=\"grid grid-cols-3 gap-4\">\n            <Skeleton height={120} borderRadius={8} {...commonProps} />\n            <Skeleton height={120} borderRadius={8} {...commonProps} />\n            <Skeleton height={120} borderRadius={8} {...commonProps} />\n          </div>\n          <SkeletonText lines={5} {...commonProps} />\n        </div>\n      </div>\n    );\n\n    const renderDashboard = () => (\n      <div className=\"space-y-6\">\n        {/* Header with stats */}\n        <div className=\"space-y-4\">\n          <div className=\"flex items-center justify-between\">\n            <Skeleton width={180} height={28} {...commonProps} />\n            <Skeleton width={120} height={36} borderRadius={6} {...commonProps} />\n          </div>\n          <div className=\"grid grid-cols-4 gap-4\">\n            {[...Array(4)].map((_, i) => (\n              <div key={i} className=\"p-4 border rounded-lg space-y-2\">\n                <Skeleton width={100} height={16} {...commonProps} />\n                <Skeleton width={80} height={32} {...commonProps} />\n                <Skeleton width={60} height={12} {...commonProps} />\n              </div>\n            ))}\n          </div>\n        </div>\n\n        {/* Chart area */}\n        <Skeleton height={300} borderRadius={8} {...commonProps} />\n\n        {/* Table */}\n        <div className=\"space-y-3\">\n          <div className=\"flex gap-4\">\n            <Skeleton width={150} height={20} {...commonProps} />\n            <Skeleton width={150} height={20} {...commonProps} />\n            <Skeleton width={150} height={20} {...commonProps} />\n          </div>\n          {[...Array(5)].map((_, i) => (\n            <div key={i} className=\"flex gap-4\">\n              <Skeleton width={150} height={16} {...commonProps} />\n              <Skeleton width={150} height={16} {...commonProps} />\n              <Skeleton width={150} height={16} {...commonProps} />\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n\n    const renderArticle = () => (\n      <div className=\"max-w-3xl mx-auto space-y-6\">\n        {/* Article header */}\n        <div className=\"space-y-4\">\n          <Skeleton width=\"80%\" height={40} {...commonProps} />\n          <div className=\"flex items-center gap-3\">\n            <SkeletonAvatar size={48} {...commonProps} />\n            <div className=\"space-y-2 flex-1\">\n              <Skeleton width={120} height={16} {...commonProps} />\n              <Skeleton width={180} height={14} {...commonProps} />\n            </div>\n          </div>\n        </div>\n\n        {/* Featured image */}\n        <Skeleton height={400} borderRadius={8} {...commonProps} />\n\n        {/* Article content */}\n        <div className=\"space-y-4\">\n          <SkeletonText lines={4} {...commonProps} />\n          <Skeleton height={200} borderRadius={8} {...commonProps} />\n          <SkeletonText lines={6} {...commonProps} />\n          <Skeleton height={250} borderRadius={8} {...commonProps} />\n          <SkeletonText lines={4} {...commonProps} />\n        </div>\n      </div>\n    );\n\n    const renderProfile = () => (\n      <div className=\"space-y-6\">\n        {/* Profile header */}\n        <div className=\"flex items-start gap-6 border-b pb-6\">\n          <SkeletonAvatar size={120} {...commonProps} />\n          <div className=\"flex-1 space-y-3\">\n            <Skeleton width={200} height={32} {...commonProps} />\n            <Skeleton width={150} height={20} {...commonProps} />\n            <SkeletonText lines={2} {...commonProps} />\n            <div className=\"flex gap-3\">\n              <Skeleton width={100} height={36} borderRadius={6} {...commonProps} />\n              <Skeleton width={100} height={36} borderRadius={6} {...commonProps} />\n            </div>\n          </div>\n        </div>\n\n        {/* Profile content grid */}\n        <div className=\"grid grid-cols-3 gap-6\">\n          {/* Left sidebar */}\n          <div className=\"space-y-4\">\n            <div className=\"space-y-2\">\n              <Skeleton width={100} height={20} {...commonProps} />\n              {[...Array(4)].map((_, i) => (\n                <Skeleton key={i} height={16} {...commonProps} />\n              ))}\n            </div>\n          </div>\n\n          {/* Main content */}\n          <div className=\"col-span-2 space-y-4\">\n            {[...Array(3)].map((_, i) => (\n              <div key={i} className=\"p-4 border rounded-lg space-y-3\">\n                <div className=\"flex items-center gap-3\">\n                  <SkeletonAvatar size={40} {...commonProps} />\n                  <div className=\"flex-1 space-y-2\">\n                    <Skeleton width={150} height={16} {...commonProps} />\n                    <Skeleton width={100} height={12} {...commonProps} />\n                  </div>\n                </div>\n                <SkeletonText lines={2} {...commonProps} />\n                <Skeleton height={200} borderRadius={6} {...commonProps} />\n              </div>\n            ))}\n          </div>\n        </div>\n      </div>\n    );\n\n    const renderContent = () => {\n      switch (variant) {\n        case 'dashboard':\n          return renderDashboard();\n        case 'article':\n          return renderArticle();\n        case 'profile':\n          return renderProfile();\n        default:\n          return renderDefault();\n      }\n    };\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('w-full p-6', className)}\n        style={style}\n        role=\"status\"\n        aria-label=\"Loading page...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {renderContent()}\n      </div>\n    );\n  }\n);\n\nSkeletonPage.displayName = 'SkeletonPage';\n"],"names":["forwardRef","jsxs","jsx","Skeleton","SkeletonAvatar","SkeletonText","cn"],"mappings":";;;;;;;;AAoBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,UAAU;AAAA,IACV,UAAU;AAAA,IACV,YAAY;AAAA,IACZ,iBAAiB;AAAA,IACjB;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,cAAc;AAAA,MAClB;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAGF,UAAM,gBAAgB,MACpBC,gCAAC,OAAA,EAAI,WAAU,aAEb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,mDACb,UAAA;AAAA,QAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,QACnDF,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAAC,2BAAAA,IAACC,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAI,cAAc,GAAI,GAAG,aAAa;AAAA,UACpED,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,IAAK,GAAG,YAAA,CAAa;AAAA,QAAA,EAAA,CAC7C;AAAA,MAAA,GACF;AAAA,MAGAH,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAC,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,QACzCJ,2BAAAA,KAAC,OAAA,EAAI,WAAU,0BACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,yCACxDA,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,yCACxDA,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,YAAA,CAAa;AAAA,QAAA,GAC3D;AAAA,QACAD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,MAAA,EAAA,CAC3C;AAAA,IAAA,GACF;AAGF,UAAM,kBAAkB,MACtBJ,gCAAC,OAAA,EAAI,WAAU,aAEb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,qCACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,UACnDD,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAI,cAAc,GAAI,GAAG,YAAA,CAAa;AAAA,QAAA,GACtE;AAAA,uCACC,OAAA,EAAI,WAAU,0BACZ,UAAA,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,MACrBF,2BAAAA,KAAC,OAAA,EAAY,WAAU,mCACrB,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,IAAI,QAAQ,IAAK,GAAG,aAAa;AAAA,yCACjDA,SAAAA,UAAA,EAAS,OAAO,IAAI,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,QAAA,EAAA,GAH1C,CAIV,CACD,EAAA,CACH;AAAA,MAAA,GACF;AAAA,qCAGCA,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,MAGzDF,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,QAAA,GACrD;AAAA,QACC,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,MACrBF,2BAAAA,KAAC,OAAA,EAAY,WAAU,cACrB,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,QAAA,EAAA,GAH3C,CAIV,CACD;AAAA,MAAA,EAAA,CACH;AAAA,IAAA,GACF;AAGF,UAAM,gBAAgB,MACpBF,gCAAC,OAAA,EAAI,WAAU,+BAEb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAC,+BAACC,SAAAA,YAAS,OAAM,OAAM,QAAQ,IAAK,GAAG,aAAa;AAAA,QACnDF,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,UAAAC,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,IAAK,GAAG,YAAA,CAAa;AAAA,UAC3CH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,YAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,2CAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,UAAA,EAAA,CACrD;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,GACF;AAAA,qCAGCA,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,MAGzDF,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,QAAAC,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,uCACxCF,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,QACzDD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,uCACxCF,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,aAAa;AAAA,QACzDD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,MAAA,EAAA,CAC3C;AAAA,IAAA,GACF;AAGF,UAAM,gBAAgB,MACpBJ,gCAAC,OAAA,EAAI,WAAU,aAEb,UAAA;AAAA,MAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,wCACb,UAAA;AAAA,QAAAC,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,KAAM,GAAG,YAAA,CAAa;AAAA,QAC5CH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,yCAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,UACnDD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,UACzCJ,2BAAAA,KAAC,OAAA,EAAI,WAAU,cACb,UAAA;AAAA,YAAAC,2BAAAA,IAACC,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAI,cAAc,GAAI,GAAG,aAAa;AAAA,YACpED,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAI,cAAc,GAAI,GAAG,YAAA,CAAa;AAAA,UAAA,EAAA,CACtE;AAAA,QAAA,EAAA,CACF;AAAA,MAAA,GACF;AAAA,MAGAF,2BAAAA,KAAC,OAAA,EAAI,WAAU,0BAEb,UAAA;AAAA,QAAAC,2BAAAA,IAAC,SAAI,WAAU,aACb,UAAAD,2BAAAA,KAAC,OAAA,EAAI,WAAU,aACb,UAAA;AAAA,UAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,UAClD,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,qCACpBA,SAAAA,UAAA,EAAiB,QAAQ,IAAK,GAAG,YAAA,GAAnB,CAAgC,CAChD;AAAA,QAAA,EAAA,CACH,EAAA,CACF;AAAA,uCAGC,OAAA,EAAI,WAAU,wBACZ,UAAA,CAAC,GAAG,MAAM,CAAC,CAAC,EAAE,IAAI,CAAC,GAAG,MACrBF,2BAAAA,KAAC,OAAA,EAAY,WAAU,mCACrB,UAAA;AAAA,UAAAA,2BAAAA,KAAC,OAAA,EAAI,WAAU,2BACb,UAAA;AAAA,YAAAC,2BAAAA,IAACE,eAAAA,gBAAA,EAAe,MAAM,IAAK,GAAG,YAAA,CAAa;AAAA,YAC3CH,2BAAAA,KAAC,OAAA,EAAI,WAAU,oBACb,UAAA;AAAA,cAAAC,+BAACC,SAAAA,YAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,aAAa;AAAA,6CAClDA,SAAAA,UAAA,EAAS,OAAO,KAAK,QAAQ,IAAK,GAAG,YAAA,CAAa;AAAA,YAAA,EAAA,CACrD;AAAA,UAAA,GACF;AAAA,UACAD,2BAAAA,IAACG,aAAAA,cAAA,EAAa,OAAO,GAAI,GAAG,YAAA,CAAa;AAAA,yCACxCF,SAAAA,UAAA,EAAS,QAAQ,KAAK,cAAc,GAAI,GAAG,YAAA,CAAa;AAAA,QAAA,EAAA,GATjD,CAUV,CACD,EAAA,CACH;AAAA,MAAA,EAAA,CACF;AAAA,IAAA,GACF;AAGF,UAAM,gBAAgB,MAAM;AAC1B,cAAQ,SAAA;AAAA,QACN,KAAK;AACH,iBAAO,gBAAA;AAAA,QACT,KAAK;AACH,iBAAO,cAAA;AAAA,QACT,KAAK;AACH,iBAAO,cAAA;AAAA,QACT;AACE,iBAAO,cAAA;AAAA,MAAc;AAAA,IAE3B;AAEA,WACED,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWI,WAAAA,GAAG,cAAc,SAAS;AAAA,QACrC;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,cAAA;AAAA,MAAc;AAAA,IAAA;AAAA,EAGrB;AACF;AAEA,aAAa,cAAc;;"}