premium-react-loaders 1.0.0

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

@@ -0,0 +1,14 @@
+import { SkeletonTextProps } from '../../types';
+/**
+ * SkeletonText - Multi-line text skeleton loader
+ *
+ * Renders multiple skeleton lines to mimic text content while loading.
+ *
+ * @example
+ * ```tsx
+ * <SkeletonText lines={3} />
+ * <SkeletonText lines={5} gap={8} />
+ * ```
+ */
+export declare const SkeletonText: import('react').ForwardRefExoticComponent<SkeletonTextProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SkeletonText.d.ts.map

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

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

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

@@ -0,0 +1,8 @@
+export { Skeleton } from './Skeleton';
+export { SkeletonText } from './SkeletonText';
+export { SkeletonAvatar } from './SkeletonAvatar';
+export { SkeletonImage } from './SkeletonImage';
+export { SkeletonCard } from './SkeletonCard';
+export { SkeletonList } from './SkeletonList';
+export { SkeletonTable } from './SkeletonTable';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +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"}

package/dist/components/spinner/SpinnerBars.d.ts

@@ -0,0 +1,14 @@
+import { SpinnerBarsProps } from '../../types';
+/**
+ * SpinnerBars - Vertical bars with wave animation
+ *
+ * A spinner with vertical bars that animate in a wave pattern.
+ *
+ * @example
+ * ```tsx
+ * <SpinnerBars size={40} color="#3b82f6" />
+ * <SpinnerBars size={32} barCount={5} speed="fast" />
+ * ```
+ */
+export declare const SpinnerBars: import('react').ForwardRefExoticComponent<SpinnerBarsProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SpinnerBars.d.ts.map

package/dist/components/spinner/SpinnerBars.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerBars.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerBars.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAoDvB,CAAC"}

package/dist/components/spinner/SpinnerCircle.d.ts

@@ -0,0 +1,14 @@
+import { SpinnerCircleProps } from '../../types';
+/**
+ * SpinnerCircle - Basic rotating circle spinner
+ *
+ * A simple, elegant circular spinner with a partial arc that rotates continuously.
+ *
+ * @example
+ * ```tsx
+ * <SpinnerCircle size={40} color="#3b82f6" />
+ * <SpinnerCircle size={24} thickness={3} speed="fast" />
+ * ```
+ */
+export declare const SpinnerCircle: import('react').ForwardRefExoticComponent<SpinnerCircleProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SpinnerCircle.d.ts.map

package/dist/components/spinner/SpinnerCircle.d.ts.map

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

package/dist/components/spinner/SpinnerDots.d.ts

@@ -0,0 +1,14 @@
+import { SpinnerDotsProps } from '../../types';
+/**
+ * SpinnerDots - Multiple dots rotating around center
+ *
+ * A spinner with multiple dots arranged in a circle that rotates continuously.
+ *
+ * @example
+ * ```tsx
+ * <SpinnerDots size={40} color="#3b82f6" />
+ * <SpinnerDots size={48} dotCount={8} dotSize={6} />
+ * ```
+ */
+export declare const SpinnerDots: import('react').ForwardRefExoticComponent<SpinnerDotsProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SpinnerDots.d.ts.map

package/dist/components/spinner/SpinnerDots.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerDots.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerDots.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAkEvB,CAAC"}

package/dist/components/spinner/SpinnerGrid.d.ts

@@ -0,0 +1,14 @@
+import { SpinnerGridProps } from '../../types';
+/**
+ * SpinnerGrid - Grid of fading squares
+ *
+ * A spinner with a grid of squares that fade in and out in a pattern.
+ *
+ * @example
+ * ```tsx
+ * <SpinnerGrid size={40} color="#3b82f6" />
+ * <SpinnerGrid size={48} gridSize={4} />
+ * ```
+ */
+export declare const SpinnerGrid: import('react').ForwardRefExoticComponent<SpinnerGridProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SpinnerGrid.d.ts.map

package/dist/components/spinner/SpinnerGrid.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerGrid.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerGrid.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GAgEvB,CAAC"}

package/dist/components/spinner/SpinnerRing.d.ts

@@ -0,0 +1,14 @@
+import { SpinnerRingProps } from '../../types';
+/**
+ * SpinnerRing - Border-only rotating spinner
+ *
+ * A ring-style spinner with a transparent center and colored border.
+ *
+ * @example
+ * ```tsx
+ * <SpinnerRing size={40} color="#8b5cf6" />
+ * <SpinnerRing size={32} thickness={3} speed="slow" />
+ * ```
+ */
+export declare const SpinnerRing: import('react').ForwardRefExoticComponent<SpinnerRingProps & import('react').RefAttributes<HTMLDivElement>>;
+//# sourceMappingURL=SpinnerRing.d.ts.map

package/dist/components/spinner/SpinnerRing.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerRing.d.ts","sourceRoot":"","sources":["../../../src/components/spinner/SpinnerRing.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAG/C;;;;;;;;;;GAUG;AACH,eAAO,MAAM,WAAW,6GA0CvB,CAAC"}

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

@@ -0,0 +1,6 @@
+export { SpinnerCircle } from './SpinnerCircle';
+export { SpinnerRing } from './SpinnerRing';
+export { SpinnerDots } from './SpinnerDots';
+export { SpinnerBars } from './SpinnerBars';
+export { SpinnerGrid } from './SpinnerGrid';
+//# sourceMappingURL=index.d.ts.map

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

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

package/dist/index.cjs

@@ -0,0 +1,47 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+;/* empty css         */
+const classNames = require("./index3.cjs");
+const colors = require("./index4.cjs");
+const Skeleton = require("./index5.cjs");
+const SkeletonText = require("./index6.cjs");
+const SkeletonAvatar = require("./index7.cjs");
+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 version = "1.0.0";
+exports.cn = classNames.cn;
+exports.getAnimationDuration = colors.getAnimationDuration;
+exports.normalizeSize = colors.normalizeSize;
+exports.Skeleton = Skeleton.Skeleton;
+exports.SkeletonText = SkeletonText.SkeletonText;
+exports.SkeletonAvatar = SkeletonAvatar.SkeletonAvatar;
+exports.SkeletonImage = SkeletonImage.SkeletonImage;
+exports.SkeletonCard = SkeletonCard.SkeletonCard;
+exports.SkeletonList = SkeletonList.SkeletonList;
+exports.SkeletonTable = SkeletonTable.SkeletonTable;
+exports.SpinnerCircle = SpinnerCircle.SpinnerCircle;
+exports.SpinnerRing = SpinnerRing.SpinnerRing;
+exports.SpinnerDots = SpinnerDots.SpinnerDots;
+exports.SpinnerBars = SpinnerBars.SpinnerBars;
+exports.SpinnerGrid = SpinnerGrid.SpinnerGrid;
+exports.ProgressBar = ProgressBar.ProgressBar;
+exports.ProgressCircle = ProgressCircle.ProgressCircle;
+exports.ProgressRing = ProgressRing.ProgressRing;
+exports.PulseDots = PulseDots.PulseDots;
+exports.PulseWave = PulseWave.PulseWave;
+exports.PulseBars = PulseBars.PulseBars;
+exports.version = version;
+//# sourceMappingURL=index.cjs.map

package/dist/index.cjs.map

@@ -0,0 +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;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/index.d.ts

@@ -0,0 +1,6 @@
+export * from './components';
+export type * from './types';
+export { cn } from './utils/classNames';
+export { getAnimationDuration, normalizeSize } from './utils/colors';
+export declare const version = "1.0.0";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,oBAAoB,CAAC;AAG5B,cAAc,cAAc,CAAC;AAG7B,mBAAmB,SAAS,CAAC;AAG7B,OAAO,EAAE,EAAE,EAAE,MAAM,oBAAoB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAGrE,eAAO,MAAM,OAAO,UAAU,CAAC"}

package/dist/index.js

@@ -0,0 +1,47 @@
+/* empty css       */
+import { cn } from "./index3.js";
+import { getAnimationDuration, normalizeSize } from "./index4.js";
+import { Skeleton } from "./index5.js";
+import { SkeletonText } from "./index6.js";
+import { SkeletonAvatar } from "./index7.js";
+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";
+const version = "1.0.0";
+export {
+  ProgressBar,
+  ProgressCircle,
+  ProgressRing,
+  PulseBars,
+  PulseDots,
+  PulseWave,
+  Skeleton,
+  SkeletonAvatar,
+  SkeletonCard,
+  SkeletonImage,
+  SkeletonList,
+  SkeletonTable,
+  SkeletonText,
+  SpinnerBars,
+  SpinnerCircle,
+  SpinnerDots,
+  SpinnerGrid,
+  SpinnerRing,
+  cn,
+  getAnimationDuration,
+  normalizeSize,
+  version
+};
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +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;"}

package/dist/index10.cjs

@@ -0,0 +1,58 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Skeleton = require("./index5.cjs");
+const colors = require("./index4.cjs");
+const classNames = require("./index3.cjs");
+const SkeletonList = react.forwardRef(
+  ({
+    items = 3,
+    itemHeight = "3rem",
+    gap = "0.75rem",
+    width = "100%",
+    animate = true,
+    baseColor,
+    highlightColor,
+    borderRadius = "0.5rem",
+    className,
+    style,
+    testId = "skeleton-list",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("flex flex-col", className),
+        style: {
+          gap: colors.normalizeSize(gap),
+          ...style
+        },
+        role: "status",
+        "aria-label": "Loading list...",
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsx(
+          Skeleton.Skeleton,
+          {
+            width,
+            height: itemHeight,
+            variant: "rounded",
+            borderRadius,
+            animate,
+            baseColor,
+            highlightColor
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+SkeletonList.displayName = "SkeletonList";
+exports.SkeletonList = SkeletonList;
+//# sourceMappingURL=index10.cjs.map

package/dist/index10.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index10.cjs","sources":["../src/components/skeleton/SkeletonList.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonListProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonList - List skeleton loader\n *\n * A skeleton loader for list items with customizable count, item height, and spacing.\n *\n * @example\n * ```tsx\n * <SkeletonList items={5} />\n * <SkeletonList items={3} itemHeight={60} gap={12} />\n * ```\n */\nexport const SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n  (\n    {\n      items = 3,\n      itemHeight = '3rem',\n      gap = '0.75rem',\n      width = '100%',\n      animate = true,\n      baseColor,\n      highlightColor,\n      borderRadius = '0.5rem',\n      className,\n      style,\n      testId = 'skeleton-list',\n      visible = true,\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('flex flex-col', className)}\n        style={{\n          gap: normalizeSize(gap),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label=\"Loading list...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: items }).map((_, index) => (\n          <Skeleton\n            key={index}\n            width={width}\n            height={itemHeight}\n            variant=\"rounded\"\n            borderRadius={borderRadius}\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nSkeletonList.displayName = 'SkeletonList';\n"],"names":["forwardRef","jsx","cn","normalizeSize","Skeleton"],"mappings":";;;;;;;AAgBO,MAAM,eAAeA,MAAAA;AAAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,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,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAKC,OAAAA,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC,GAAG,UACrCF,2BAAAA;AAAAA,UAACG,SAAAA;AAAAA,UAAA;AAAA,YAEC;AAAA,YACA,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAPK;AAAA,QAAA,CASR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;;"}

package/dist/index10.js

@@ -0,0 +1,58 @@
+import { jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Skeleton } from "./index5.js";
+import { normalizeSize } from "./index4.js";
+import { cn } from "./index3.js";
+const SkeletonList = forwardRef(
+  ({
+    items = 3,
+    itemHeight = "3rem",
+    gap = "0.75rem",
+    width = "100%",
+    animate = true,
+    baseColor,
+    highlightColor,
+    borderRadius = "0.5rem",
+    className,
+    style,
+    testId = "skeleton-list",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("flex flex-col", className),
+        style: {
+          gap: normalizeSize(gap),
+          ...style
+        },
+        role: "status",
+        "aria-label": "Loading list...",
+        "aria-busy": "true",
+        ...rest,
+        children: Array.from({ length: items }).map((_, index) => /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            width,
+            height: itemHeight,
+            variant: "rounded",
+            borderRadius,
+            animate,
+            baseColor,
+            highlightColor
+          },
+          index
+        ))
+      }
+    );
+  }
+);
+SkeletonList.displayName = "SkeletonList";
+export {
+  SkeletonList
+};
+//# sourceMappingURL=index10.js.map

package/dist/index10.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index10.js","sources":["../src/components/skeleton/SkeletonList.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonListProps } from '../../types';\nimport { cn, normalizeSize } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonList - List skeleton loader\n *\n * A skeleton loader for list items with customizable count, item height, and spacing.\n *\n * @example\n * ```tsx\n * <SkeletonList items={5} />\n * <SkeletonList items={3} itemHeight={60} gap={12} />\n * ```\n */\nexport const SkeletonList = forwardRef<HTMLDivElement, SkeletonListProps>(\n  (\n    {\n      items = 3,\n      itemHeight = '3rem',\n      gap = '0.75rem',\n      width = '100%',\n      animate = true,\n      baseColor,\n      highlightColor,\n      borderRadius = '0.5rem',\n      className,\n      style,\n      testId = 'skeleton-list',\n      visible = true,\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('flex flex-col', className)}\n        style={{\n          gap: normalizeSize(gap),\n          ...style,\n        }}\n        role=\"status\"\n        aria-label=\"Loading list...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {Array.from({ length: items }).map((_, index) => (\n          <Skeleton\n            key={index}\n            width={width}\n            height={itemHeight}\n            variant=\"rounded\"\n            borderRadius={borderRadius}\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n      </div>\n    );\n  }\n);\n\nSkeletonList.displayName = 'SkeletonList';\n"],"names":[],"mappings":";;;;;AAgBO,MAAM,eAAe;AAAA,EAC1B,CACE;AAAA,IACE,QAAQ;AAAA,IACR,aAAa;AAAA,IACb,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA,eAAe;AAAA,IACf;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,iBAAiB,SAAS;AAAA,QACxC,OAAO;AAAA,UACL,KAAK,cAAc,GAAG;AAAA,UACtB,GAAG;AAAA,QAAA;AAAA,QAEL,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAEH,UAAA,MAAM,KAAK,EAAE,QAAQ,OAAO,EAAE,IAAI,CAAC,GAAG,UACrC;AAAA,UAAC;AAAA,UAAA;AAAA,YAEC;AAAA,YACA,QAAQ;AAAA,YACR,SAAQ;AAAA,YACR;AAAA,YACA;AAAA,YACA;AAAA,YACA;AAAA,UAAA;AAAA,UAPK;AAAA,QAAA,CASR;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,aAAa,cAAc;"}

package/dist/index11.cjs

@@ -0,0 +1,55 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const Skeleton = require("./index5.cjs");
+const classNames = require("./index3.cjs");
+const SkeletonTable = react.forwardRef(
+  ({
+    rows = 5,
+    columns = 3,
+    showHeader = true,
+    animate = true,
+    baseColor,
+    highlightColor,
+    className,
+    style,
+    testId = "skeleton-table",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const renderRow = (isHeader = false) => /* @__PURE__ */ jsxRuntime.jsx("div", { className: "grid gap-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
+      Skeleton.Skeleton,
+      {
+        width: "100%",
+        height: isHeader ? "1.5rem" : "1.25rem",
+        variant: "text",
+        animate,
+        baseColor,
+        highlightColor
+      },
+      colIndex
+    )) });
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("flex flex-col gap-3", className),
+        style,
+        role: "status",
+        "aria-label": "Loading table...",
+        "aria-busy": "true",
+        ...rest,
+        children: [
+          showHeader && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "border-b border-gray-200 pb-2", children: renderRow(true) }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsxRuntime.jsx("div", { children: renderRow(false) }, rowIndex)) })
+        ]
+      }
+    );
+  }
+);
+SkeletonTable.displayName = "SkeletonTable";
+exports.SkeletonTable = SkeletonTable;
+//# sourceMappingURL=index11.cjs.map

package/dist/index11.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index11.cjs","sources":["../src/components/skeleton/SkeletonTable.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTableProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonTable - Table skeleton loader\n *\n * A skeleton loader for table layouts with rows and columns.\n *\n * @example\n * ```tsx\n * <SkeletonTable rows={5} columns={4} />\n * <SkeletonTable rows={3} columns={3} showHeader={true} />\n * ```\n */\nexport const SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n  (\n    {\n      rows = 5,\n      columns = 3,\n      showHeader = true,\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-table',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const renderRow = (isHeader: boolean = false) => (\n      <div className=\"grid gap-4\" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n        {Array.from({ length: columns }).map((_, colIndex) => (\n          <Skeleton\n            key={colIndex}\n            width=\"100%\"\n            height={isHeader ? '1.5rem' : '1.25rem'}\n            variant=\"text\"\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n      </div>\n    );\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex flex-col gap-3', className)}\n        style={style}\n        role=\"status\"\n        aria-label=\"Loading table...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {/* Header */}\n        {showHeader && (\n          <div className=\"border-b border-gray-200 pb-2\">\n            {renderRow(true)}\n          </div>\n        )}\n\n        {/* Rows */}\n        <div className=\"space-y-3\">\n          {Array.from({ length: rows }).map((_, rowIndex) => (\n            <div key={rowIndex}>\n              {renderRow(false)}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSkeletonTable.displayName = 'SkeletonTable';\n"],"names":["forwardRef","jsx","Skeleton","jsxs","cn"],"mappings":";;;;;;AAgBO,MAAM,gBAAgBA,MAAAA;AAAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,CAAC,WAAoB,UACrCC,2BAAAA,IAAC,SAAI,WAAU,cAAa,OAAO,EAAE,qBAAqB,UAAU,OAAO,SAAA,GACxE,UAAA,MAAM,KAAK,EAAE,QAAQ,QAAA,CAAS,EAAE,IAAI,CAAC,GAAG,aACvCA,2BAAAA;AAAAA,MAACC,SAAAA;AAAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,QAAQ,WAAW,WAAW;AAAA,QAC9B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MANK;AAAA,IAAA,CAQR,GACH;AAGF,WACEC,2BAAAA;AAAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAWC,WAAAA,GAAG,uBAAuB,SAAS;AAAA,QAC9C;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,6CACE,OAAA,EAAI,WAAU,iCACZ,UAAA,UAAU,IAAI,GACjB;AAAA,UAIFH,2BAAAA,IAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,MAAM,EAAE,IAAI,CAAC,GAAG,aACpCA,2BAAAA,IAAC,OAAA,EACE,oBAAU,KAAK,KADR,QAEV,CACD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;;"}

package/dist/index11.js

@@ -0,0 +1,55 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Skeleton } from "./index5.js";
+import { cn } from "./index3.js";
+const SkeletonTable = forwardRef(
+  ({
+    rows = 5,
+    columns = 3,
+    showHeader = true,
+    animate = true,
+    baseColor,
+    highlightColor,
+    className,
+    style,
+    testId = "skeleton-table",
+    visible = true,
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    const renderRow = (isHeader = false) => /* @__PURE__ */ jsx("div", { className: "grid gap-4", style: { gridTemplateColumns: `repeat(${columns}, 1fr)` }, children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsx(
+      Skeleton,
+      {
+        width: "100%",
+        height: isHeader ? "1.5rem" : "1.25rem",
+        variant: "text",
+        animate,
+        baseColor,
+        highlightColor
+      },
+      colIndex
+    )) });
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: cn("flex flex-col gap-3", className),
+        style,
+        role: "status",
+        "aria-label": "Loading table...",
+        "aria-busy": "true",
+        ...rest,
+        children: [
+          showHeader && /* @__PURE__ */ jsx("div", { className: "border-b border-gray-200 pb-2", children: renderRow(true) }),
+          /* @__PURE__ */ jsx("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, rowIndex) => /* @__PURE__ */ jsx("div", { children: renderRow(false) }, rowIndex)) })
+        ]
+      }
+    );
+  }
+);
+SkeletonTable.displayName = "SkeletonTable";
+export {
+  SkeletonTable
+};
+//# sourceMappingURL=index11.js.map

package/dist/index11.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index11.js","sources":["../src/components/skeleton/SkeletonTable.tsx"],"sourcesContent":["import { forwardRef } from 'react';\nimport { SkeletonTableProps } from '../../types';\nimport { cn } from '../../utils';\nimport { Skeleton } from './Skeleton';\n\n/**\n * SkeletonTable - Table skeleton loader\n *\n * A skeleton loader for table layouts with rows and columns.\n *\n * @example\n * ```tsx\n * <SkeletonTable rows={5} columns={4} />\n * <SkeletonTable rows={3} columns={3} showHeader={true} />\n * ```\n */\nexport const SkeletonTable = forwardRef<HTMLDivElement, SkeletonTableProps>(\n  (\n    {\n      rows = 5,\n      columns = 3,\n      showHeader = true,\n      animate = true,\n      baseColor,\n      highlightColor,\n      className,\n      style,\n      testId = 'skeleton-table',\n      visible = true,\n      ...rest\n    },\n    ref\n  ) => {\n    if (!visible) return null;\n\n    const renderRow = (isHeader: boolean = false) => (\n      <div className=\"grid gap-4\" style={{ gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n        {Array.from({ length: columns }).map((_, colIndex) => (\n          <Skeleton\n            key={colIndex}\n            width=\"100%\"\n            height={isHeader ? '1.5rem' : '1.25rem'}\n            variant=\"text\"\n            animate={animate}\n            baseColor={baseColor}\n            highlightColor={highlightColor}\n          />\n        ))}\n      </div>\n    );\n\n    return (\n      <div\n        ref={ref}\n        data-testid={testId}\n        className={cn('flex flex-col gap-3', className)}\n        style={style}\n        role=\"status\"\n        aria-label=\"Loading table...\"\n        aria-busy=\"true\"\n        {...rest}\n      >\n        {/* Header */}\n        {showHeader && (\n          <div className=\"border-b border-gray-200 pb-2\">\n            {renderRow(true)}\n          </div>\n        )}\n\n        {/* Rows */}\n        <div className=\"space-y-3\">\n          {Array.from({ length: rows }).map((_, rowIndex) => (\n            <div key={rowIndex}>\n              {renderRow(false)}\n            </div>\n          ))}\n        </div>\n      </div>\n    );\n  }\n);\n\nSkeletonTable.displayName = 'SkeletonTable';\n"],"names":[],"mappings":";;;;AAgBO,MAAM,gBAAgB;AAAA,EAC3B,CACE;AAAA,IACE,OAAO;AAAA,IACP,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU;AAAA,IACV;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,SAAS;AAAA,IACT,UAAU;AAAA,IACV,GAAG;AAAA,EAAA,GAEL,QACG;AACH,QAAI,CAAC,QAAS,QAAO;AAErB,UAAM,YAAY,CAAC,WAAoB,UACrC,oBAAC,SAAI,WAAU,cAAa,OAAO,EAAE,qBAAqB,UAAU,OAAO,SAAA,GACxE,UAAA,MAAM,KAAK,EAAE,QAAQ,QAAA,CAAS,EAAE,IAAI,CAAC,GAAG,aACvC;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,OAAM;AAAA,QACN,QAAQ,WAAW,WAAW;AAAA,QAC9B,SAAQ;AAAA,QACR;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,MANK;AAAA,IAAA,CAQR,GACH;AAGF,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,eAAa;AAAA,QACb,WAAW,GAAG,uBAAuB,SAAS;AAAA,QAC9C;AAAA,QACA,MAAK;AAAA,QACL,cAAW;AAAA,QACX,aAAU;AAAA,QACT,GAAG;AAAA,QAGH,UAAA;AAAA,UAAA,kCACE,OAAA,EAAI,WAAU,iCACZ,UAAA,UAAU,IAAI,GACjB;AAAA,UAIF,oBAAC,SAAI,WAAU,aACZ,gBAAM,KAAK,EAAE,QAAQ,MAAM,EAAE,IAAI,CAAC,GAAG,aACpC,oBAAC,OAAA,EACE,oBAAU,KAAK,KADR,QAEV,CACD,EAAA,CACH;AAAA,QAAA;AAAA,MAAA;AAAA,IAAA;AAAA,EAGN;AACF;AAEA,cAAc,cAAc;"}

package/dist/index12.cjs

@@ -0,0 +1,63 @@
+"use strict";
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const jsxRuntime = require("react/jsx-runtime");
+const react = require("react");
+const colors = require("./index4.cjs");
+const classNames = require("./index3.cjs");
+const SpinnerCircle = react.forwardRef(
+  ({
+    size = 40,
+    color = "#3b82f6",
+    thickness = 4,
+    speed = "normal",
+    className,
+    style,
+    testId = "spinner-circle",
+    visible = true,
+    ariaLabel = "Loading...",
+    ...rest
+  }, ref) => {
+    if (!visible) return null;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-testid": testId,
+        className: classNames.cn("inline-flex items-center justify-center", className),
+        style,
+        role: "status",
+        "aria-label": ariaLabel,
+        "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"
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+SpinnerCircle.displayName = "SpinnerCircle";
+exports.SpinnerCircle = SpinnerCircle;
+//# sourceMappingURL=index12.cjs.map

package/dist/index12.cjs.map

@@ -0,0 +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;;"}