react-smart-loading-effects 1.0.0

package/dist/index.mjs

@@ -0,0 +1,469 @@
+import { memo, useState, useEffect } from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+// src/components/SmartLoader.tsx
+
+// src/styles/tokens.ts
+var tokens = {
+  radius: "8px",
+  radiusFull: "9999px",
+  bg: "#f3f4f6",
+  shimmer: "#e5e7eb",
+  spacing: {
+    sm: 12,
+    md: 16,
+    lg: 24
+  },
+  shadow: "0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)",
+  shadowMd: "0 4px 12px rgba(0, 0, 0, 0.06)"
+};
+var QUERY = "(prefers-reduced-motion: reduce)";
+function useReducedMotion() {
+  const [reducedMotion, setReducedMotion] = useState(() => {
+    if (typeof window === "undefined") return false;
+    return window.matchMedia(QUERY).matches;
+  });
+  useEffect(() => {
+    const mediaQuery = window.matchMedia(QUERY);
+    const onChange = (event) => {
+      setReducedMotion(event.matches);
+    };
+    mediaQuery.addEventListener("change", onChange);
+    return () => mediaQuery.removeEventListener("change", onChange);
+  }, []);
+  return reducedMotion;
+}
+function toCssSize(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+var Skeleton = memo(function Skeleton2({
+  width,
+  height,
+  borderRadius = tokens.radius,
+  animated = true,
+  className,
+  style
+}) {
+  const reducedMotion = useReducedMotion();
+  const showAnimation = animated && !reducedMotion;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: [
+        "rsle-skeleton",
+        showAnimation ? "rsle-skeleton--animated" : "",
+        className
+      ].filter(Boolean).join(" "),
+      style: {
+        width: toCssSize(width),
+        height: toCssSize(height),
+        borderRadius: toCssSize(borderRadius),
+        flexShrink: 0,
+        ...style
+      }
+    }
+  );
+});
+var CardLoader = memo(function CardLoader2({
+  animated = true,
+  width,
+  height,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width,
+        height,
+        background: "#fff",
+        borderRadius: tokens.radius,
+        boxShadow: tokens.shadowMd,
+        overflow: "hidden",
+        display: "flex",
+        flexDirection: "column"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { position: "relative", width: "100%", paddingBottom: "56.25%" }, children: /* @__PURE__ */ jsx(
+          Skeleton,
+          {
+            width: "100%",
+            height: "100%",
+            animated,
+            borderRadius: 0,
+            style: { position: "absolute", inset: 0 }
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { style: { padding: tokens.spacing.md, display: "flex", flexDirection: "column", gap: tokens.spacing.sm }, children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: "70%", height: 20, animated }),
+          /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 14, animated }),
+          /* @__PURE__ */ jsx(Skeleton, { width: "85%", height: 14, animated }),
+          /* @__PURE__ */ jsx(Skeleton, { width: 100, height: 32, borderRadius: tokens.radius, animated, style: { marginTop: 4 } })
+        ] })
+      ]
+    }
+  );
+});
+var DashboardLoader = memo(function DashboardLoader2({
+  animated = true,
+  width = "100%",
+  height,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width,
+        height,
+        display: "flex",
+        gap: tokens.spacing.md
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              width: 56,
+              flexShrink: 0,
+              display: "flex",
+              flexDirection: "column",
+              gap: tokens.spacing.sm,
+              padding: tokens.spacing.sm,
+              background: "#fff",
+              borderRadius: tokens.radius,
+              boxShadow: tokens.shadow
+            },
+            children: Array.from({ length: 5 }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 32, animated }, `nav-${i}`))
+          }
+        ),
+        /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: tokens.spacing.md }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "repeat(4, 1fr)",
+                gap: tokens.spacing.md
+              },
+              children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    background: "#fff",
+                    borderRadius: tokens.radius,
+                    boxShadow: tokens.shadow,
+                    padding: tokens.spacing.md,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: tokens.spacing.sm
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Skeleton, { width: "50%", height: 12, animated }),
+                    /* @__PURE__ */ jsx(Skeleton, { width: "70%", height: 28, animated }),
+                    /* @__PURE__ */ jsx(Skeleton, { width: "40%", height: 10, animated })
+                  ]
+                },
+                `kpi-${i}`
+              ))
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "grid",
+                gridTemplateColumns: "1fr 1fr",
+                gap: tokens.spacing.md,
+                flex: 1
+              },
+              children: Array.from({ length: 2 }).map((_, i) => /* @__PURE__ */ jsxs(
+                "div",
+                {
+                  style: {
+                    background: "#fff",
+                    borderRadius: tokens.radius,
+                    boxShadow: tokens.shadow,
+                    padding: tokens.spacing.md,
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: tokens.spacing.sm,
+                    minHeight: 180
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Skeleton, { width: "40%", height: 16, animated }),
+                    /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: "100%", animated, style: { flex: 1, minHeight: 120 } })
+                  ]
+                },
+                `chart-${i}`
+              ))
+            }
+          )
+        ] })
+      ]
+    }
+  );
+});
+var ListLoader = memo(function ListLoader2({
+  rows = 5,
+  animated = true,
+  width = "100%",
+  height,
+  className
+}) {
+  const safeRows = Math.max(1, rows);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        width,
+        height,
+        background: "#fff",
+        borderRadius: tokens.radius,
+        boxShadow: tokens.shadow,
+        overflow: "hidden"
+      },
+      children: Array.from({ length: safeRows }).map((_, i) => /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            display: "flex",
+            alignItems: "center",
+            gap: tokens.spacing.md,
+            padding: tokens.spacing.md,
+            borderBottom: i < safeRows - 1 ? "1px solid #f5f5f5" : void 0
+          },
+          children: [
+            /* @__PURE__ */ jsx(Skeleton, { width: 40, height: 40, borderRadius: tokens.radiusFull, animated }),
+            /* @__PURE__ */ jsxs("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: 8 }, children: [
+              /* @__PURE__ */ jsx(Skeleton, { width: "60%", height: 16, animated }),
+              /* @__PURE__ */ jsx(Skeleton, { width: "85%", height: 12, animated })
+            ] })
+          ]
+        },
+        `item-${i}`
+      ))
+    }
+  );
+});
+var ProfileLoader = memo(function ProfileLoader2({
+  animated = true,
+  width = "100%",
+  height,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width,
+        height,
+        background: "#fff",
+        borderRadius: tokens.radius,
+        boxShadow: tokens.shadowMd,
+        padding: tokens.spacing.lg,
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        gap: tokens.spacing.md
+      },
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: 96, height: 96, borderRadius: tokens.radiusFull, animated }),
+        /* @__PURE__ */ jsx(Skeleton, { width: 180, height: 24, animated }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              width: "100%",
+              maxWidth: 320,
+              display: "flex",
+              flexDirection: "column",
+              gap: tokens.spacing.sm,
+              alignItems: "center"
+            },
+            children: [
+              /* @__PURE__ */ jsx(Skeleton, { width: "100%", height: 14, animated }),
+              /* @__PURE__ */ jsx(Skeleton, { width: "90%", height: 14, animated }),
+              /* @__PURE__ */ jsx(Skeleton, { width: "75%", height: 14, animated })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+var STYLE_ID = "react-smart-loading-effects-styles";
+var CSS = `
+@keyframes rsle-shimmer {
+  0% { transform: translateX(-100%); }
+  100% { transform: translateX(100%); }
+}
+.rsle-skeleton {
+  position: relative;
+  overflow: hidden;
+  background-color: var(--rsle-bg, ${tokens.bg});
+}
+.rsle-skeleton--animated::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background: linear-gradient(
+    90deg,
+    transparent 0%,
+    var(--rsle-shimmer, ${tokens.shimmer}) 50%,
+    transparent 100%
+  );
+  transform: translateX(-100%);
+  animation: rsle-shimmer 1.5s ease-in-out infinite;
+  will-change: transform;
+}
+`;
+function ShimmerStyles() {
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(STYLE_ID)) return;
+    const style = document.createElement("style");
+    style.id = STYLE_ID;
+    style.textContent = CSS;
+    document.head.appendChild(style);
+  }, []);
+  return null;
+}
+var TableLoader = memo(function TableLoader2({
+  rows = 5,
+  columns = 4,
+  animated = true,
+  width = "100%",
+  height,
+  className
+}) {
+  const safeRows = Math.max(1, rows);
+  const safeColumns = Math.max(1, columns);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className,
+      style: {
+        width,
+        height,
+        overflowX: "auto",
+        background: "#fff",
+        borderRadius: tokens.radius,
+        boxShadow: tokens.shadow,
+        border: "1px solid #f0f0f0"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: `repeat(${safeColumns}, minmax(80px, 1fr))`,
+              gap: tokens.spacing.sm,
+              padding: tokens.spacing.md,
+              borderBottom: "1px solid #f0f0f0"
+            },
+            children: Array.from({ length: safeColumns }).map((_, i) => /* @__PURE__ */ jsx(Skeleton, { width: "80%", height: 16, animated }, `header-${i}`))
+          }
+        ),
+        Array.from({ length: safeRows }).map((_, rowIndex) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateColumns: `repeat(${safeColumns}, minmax(80px, 1fr))`,
+              gap: tokens.spacing.sm,
+              padding: tokens.spacing.md,
+              borderBottom: rowIndex < safeRows - 1 ? "1px solid #f5f5f5" : void 0
+            },
+            children: Array.from({ length: safeColumns }).map((_2, colIndex) => /* @__PURE__ */ jsx(
+              Skeleton,
+              {
+                width: colIndex === 0 ? "90%" : "70%",
+                height: 14,
+                animated
+              },
+              `cell-${rowIndex}-${colIndex}`
+            ))
+          },
+          `row-${rowIndex}`
+        ))
+      ]
+    }
+  );
+});
+var LINE_WIDTHS = ["100%", "92%", "78%", "100%", "88%", "65%"];
+var TextLoader = memo(function TextLoader2({
+  rows = 6,
+  animated = true,
+  width = "100%",
+  height,
+  className
+}) {
+  const safeRows = Math.max(1, rows);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className,
+      style: {
+        width,
+        height,
+        display: "flex",
+        flexDirection: "column",
+        gap: tokens.spacing.sm
+      },
+      children: Array.from({ length: safeRows }).map((_, i) => /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          width: LINE_WIDTHS[i % LINE_WIDTHS.length],
+          height: 14,
+          animated
+        },
+        `line-${i}`
+      ))
+    }
+  );
+});
+var LOADERS = {
+  card: CardLoader,
+  table: TableLoader,
+  dashboard: DashboardLoader,
+  profile: ProfileLoader,
+  list: ListLoader,
+  text: TextLoader
+};
+var SmartLoader = memo(function SmartLoader2({
+  type,
+  rows,
+  columns,
+  animated = true,
+  width,
+  height,
+  className
+}) {
+  const Loader = LOADERS[type];
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(ShimmerStyles, {}),
+    /* @__PURE__ */ jsx("div", { role: "status", "aria-busy": "true", "aria-label": "Loading", children: /* @__PURE__ */ jsx(
+      Loader,
+      {
+        rows,
+        columns,
+        animated,
+        width,
+        height,
+        className
+      }
+    ) })
+  ] });
+});
+
+export { CardLoader, DashboardLoader, ListLoader, ProfileLoader, Skeleton, SmartLoader, TableLoader, TextLoader, useReducedMotion };
+//# sourceMappingURL=index.mjs.map
+//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/styles/tokens.ts","../src/hooks/useReducedMotion.ts","../src/components/Skeleton.tsx","../src/components/CardLoader.tsx","../src/components/DashboardLoader.tsx","../src/components/ListLoader.tsx","../src/components/ProfileLoader.tsx","../src/components/ShimmerStyles.tsx","../src/components/TableLoader.tsx","../src/components/TextLoader.tsx","../src/components/SmartLoader.tsx"],"names":["Skeleton","memo","CardLoader","jsx","DashboardLoader","jsxs","ListLoader","ProfileLoader","useEffect","TableLoader","_","TextLoader","SmartLoader"],"mappings":"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","file":"index.mjs","sourcesContent":["export const tokens = {\n  radius: \"8px\",\n  radiusFull: \"9999px\",\n  bg: \"#f3f4f6\",\n  shimmer: \"#e5e7eb\",\n  spacing: {\n    sm: 12,\n    md: 16,\n    lg: 24,\n  },\n  shadow: \"0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04)\",\n  shadowMd: \"0 4px 12px rgba(0, 0, 0, 0.06)\",\n} as const;\n","import { useEffect, useState } from \"react\";\n\nconst QUERY = \"(prefers-reduced-motion: reduce)\";\n\nexport function useReducedMotion(): boolean {\n  const [reducedMotion, setReducedMotion] = useState(() => {\n    if (typeof window === \"undefined\") return false;\n    return window.matchMedia(QUERY).matches;\n  });\n\n  useEffect(() => {\n    const mediaQuery = window.matchMedia(QUERY);\n    const onChange = (event: MediaQueryListEvent) => {\n      setReducedMotion(event.matches);\n    };\n\n    mediaQuery.addEventListener(\"change\", onChange);\n    return () => mediaQuery.removeEventListener(\"change\", onChange);\n  }, []);\n\n  return reducedMotion;\n}\n","import { memo, type CSSProperties } from \"react\";\nimport { useReducedMotion } from \"../hooks/useReducedMotion\";\nimport { tokens } from \"../styles/tokens\";\n\nexport interface SkeletonProps {\n  width?: number | string;\n  height?: number | string;\n  borderRadius?: number | string;\n  animated?: boolean;\n  className?: string;\n  style?: CSSProperties;\n}\n\nfunction toCssSize(value: number | string | undefined): string | undefined {\n  if (value === undefined) return undefined;\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nexport const Skeleton = memo(function Skeleton({\n  width,\n  height,\n  borderRadius = tokens.radius,\n  animated = true,\n  className,\n  style,\n}: SkeletonProps) {\n  const reducedMotion = useReducedMotion();\n  const showAnimation = animated && !reducedMotion;\n\n  return (\n    <div\n      aria-hidden=\"true\"\n      className={[\n        \"rsle-skeleton\",\n        showAnimation ? \"rsle-skeleton--animated\" : \"\",\n        className,\n      ]\n        .filter(Boolean)\n        .join(\" \")}\n      style={{\n        width: toCssSize(width),\n        height: toCssSize(height),\n        borderRadius: toCssSize(borderRadius),\n        flexShrink: 0,\n        ...style,\n      }}\n    />\n  );\n});\n","import { memo } from \"react\";\nimport type { LoaderCommonProps } from \"../types\";\nimport { tokens } from \"../styles/tokens\";\nimport { Skeleton } from \"./Skeleton\";\n\nexport const CardLoader = memo(function CardLoader({\n  animated = true,\n  width,\n  height,\n  className,\n}: LoaderCommonProps) {\n  return (\n    <div\n      className={className}\n      style={{\n        width,\n        height,\n        background: \"#fff\",\n        borderRadius: tokens.radius,\n        boxShadow: tokens.shadowMd,\n        overflow: \"hidden\",\n        display: \"flex\",\n        flexDirection: \"column\",\n      }}\n    >\n      <div style={{ position: \"relative\", width: \"100%\", paddingBottom: \"56.25%\" }}>\n        <Skeleton\n          width=\"100%\"\n          height=\"100%\"\n          animated={animated}\n          borderRadius={0}\n          style={{ position: \"absolute\", inset: 0 }}\n        />\n      </div>\n      <div style={{ padding: tokens.spacing.md, display: \"flex\", flexDirection: \"column\", gap: tokens.spacing.sm }}>\n        <Skeleton width=\"70%\" height={20} animated={animated} />\n        <Skeleton width=\"100%\" height={14} animated={animated} />\n        <Skeleton width=\"85%\" height={14} animated={animated} />\n        <Skeleton width={100} height={32} borderRadius={tokens.radius} animated={animated} style={{ marginTop: 4 }} />\n      </div>\n    </div>\n  );\n});\n","import { memo } from \"react\";\nimport type { LoaderCommonProps } from \"../types\";\nimport { tokens } from \"../styles/tokens\";\nimport { Skeleton } from \"./Skeleton\";\n\nexport const DashboardLoader = memo(function DashboardLoader({\n  animated = true,\n  width = \"100%\",\n  height,\n  className,\n}: LoaderCommonProps) {\n  return (\n    <div\n      className={className}\n      style={{\n        width,\n        height,\n        display: \"flex\",\n        gap: tokens.spacing.md,\n      }}\n    >\n      <div\n        style={{\n          width: 56,\n          flexShrink: 0,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: tokens.spacing.sm,\n          padding: tokens.spacing.sm,\n          background: \"#fff\",\n          borderRadius: tokens.radius,\n          boxShadow: tokens.shadow,\n        }}\n      >\n        {Array.from({ length: 5 }).map((_, i) => (\n          <Skeleton key={`nav-${i}`} width=\"100%\" height={32} animated={animated} />\n        ))}\n      </div>\n\n      <div style={{ flex: 1, display: \"flex\", flexDirection: \"column\", gap: tokens.spacing.md }}>\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: \"repeat(4, 1fr)\",\n            gap: tokens.spacing.md,\n          }}\n        >\n          {Array.from({ length: 4 }).map((_, i) => (\n            <div\n              key={`kpi-${i}`}\n              style={{\n                background: \"#fff\",\n                borderRadius: tokens.radius,\n                boxShadow: tokens.shadow,\n                padding: tokens.spacing.md,\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: tokens.spacing.sm,\n              }}\n            >\n              <Skeleton width=\"50%\" height={12} animated={animated} />\n              <Skeleton width=\"70%\" height={28} animated={animated} />\n              <Skeleton width=\"40%\" height={10} animated={animated} />\n            </div>\n          ))}\n        </div>\n\n        <div\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: \"1fr 1fr\",\n            gap: tokens.spacing.md,\n            flex: 1,\n          }}\n        >\n          {Array.from({ length: 2 }).map((_, i) => (\n            <div\n              key={`chart-${i}`}\n              style={{\n                background: \"#fff\",\n                borderRadius: tokens.radius,\n                boxShadow: tokens.shadow,\n                padding: tokens.spacing.md,\n                display: \"flex\",\n                flexDirection: \"column\",\n                gap: tokens.spacing.sm,\n                minHeight: 180,\n              }}\n            >\n              <Skeleton width=\"40%\" height={16} animated={animated} />\n              <Skeleton width=\"100%\" height=\"100%\" animated={animated} style={{ flex: 1, minHeight: 120 }} />\n            </div>\n          ))}\n        </div>\n      </div>\n    </div>\n  );\n});\n","import { memo } from \"react\";\nimport type { LoaderCommonProps } from \"../types\";\nimport { tokens } from \"../styles/tokens\";\nimport { Skeleton } from \"./Skeleton\";\n\nexport const ListLoader = memo(function ListLoader({\n  rows = 5,\n  animated = true,\n  width = \"100%\",\n  height,\n  className,\n}: LoaderCommonProps) {\n  const safeRows = Math.max(1, rows);\n\n  return (\n    <div\n      className={className}\n      style={{\n        width,\n        height,\n        background: \"#fff\",\n        borderRadius: tokens.radius,\n        boxShadow: tokens.shadow,\n        overflow: \"hidden\",\n      }}\n    >\n      {Array.from({ length: safeRows }).map((_, i) => (\n        <div\n          key={`item-${i}`}\n          style={{\n            display: \"flex\",\n            alignItems: \"center\",\n            gap: tokens.spacing.md,\n            padding: tokens.spacing.md,\n            borderBottom: i < safeRows - 1 ? \"1px solid #f5f5f5\" : undefined,\n          }}\n        >\n          <Skeleton width={40} height={40} borderRadius={tokens.radiusFull} animated={animated} />\n          <div style={{ flex: 1, display: \"flex\", flexDirection: \"column\", gap: 8 }}>\n            <Skeleton width=\"60%\" height={16} animated={animated} />\n            <Skeleton width=\"85%\" height={12} animated={animated} />\n          </div>\n        </div>\n      ))}\n    </div>\n  );\n});\n","import { memo } from \"react\";\nimport type { LoaderCommonProps } from \"../types\";\nimport { tokens } from \"../styles/tokens\";\nimport { Skeleton } from \"./Skeleton\";\n\nexport const ProfileLoader = memo(function ProfileLoader({\n  animated = true,\n  width = \"100%\",\n  height,\n  className,\n}: LoaderCommonProps) {\n  return (\n    <div\n      className={className}\n      style={{\n        width,\n        height,\n        background: \"#fff\",\n        borderRadius: tokens.radius,\n        boxShadow: tokens.shadowMd,\n        padding: tokens.spacing.lg,\n        display: \"flex\",\n        flexDirection: \"column\",\n        alignItems: \"center\",\n        gap: tokens.spacing.md,\n      }}\n    >\n      <Skeleton width={96} height={96} borderRadius={tokens.radiusFull} animated={animated} />\n      <Skeleton width={180} height={24} animated={animated} />\n      <div\n        style={{\n          width: \"100%\",\n          maxWidth: 320,\n          display: \"flex\",\n          flexDirection: \"column\",\n          gap: tokens.spacing.sm,\n          alignItems: \"center\",\n        }}\n      >\n        <Skeleton width=\"100%\" height={14} animated={animated} />\n        <Skeleton width=\"90%\" height={14} animated={animated} />\n        <Skeleton width=\"75%\" height={14} animated={animated} />\n      </div>\n    </div>\n  );\n});\n","import { useEffect } from \"react\";\nimport { tokens } from \"../styles/tokens\";\n\nconst STYLE_ID = \"react-smart-loading-effects-styles\";\n\nconst CSS = `\n@keyframes rsle-shimmer {\n  0% { transform: translateX(-100%); }\n  100% { transform: translateX(100%); }\n}\n.rsle-skeleton {\n  position: relative;\n  overflow: hidden;\n  background-color: var(--rsle-bg, ${tokens.bg});\n}\n.rsle-skeleton--animated::after {\n  content: \"\";\n  position: absolute;\n  inset: 0;\n  background: linear-gradient(\n    90deg,\n    transparent 0%,\n    var(--rsle-shimmer, ${tokens.shimmer}) 50%,\n    transparent 100%\n  );\n  transform: translateX(-100%);\n  animation: rsle-shimmer 1.5s ease-in-out infinite;\n  will-change: transform;\n}\n`;\n\nexport function ShimmerStyles() {\n  useEffect(() => {\n    if (typeof document === \"undefined\") return;\n    if (document.getElementById(STYLE_ID)) return;\n\n    const style = document.createElement(\"style\");\n    style.id = STYLE_ID;\n    style.textContent = CSS;\n    document.head.appendChild(style);\n  }, []);\n\n  return null;\n}\n","import { memo } from \"react\";\nimport type { LoaderCommonProps } from \"../types\";\nimport { tokens } from \"../styles/tokens\";\nimport { Skeleton } from \"./Skeleton\";\n\nexport const TableLoader = memo(function TableLoader({\n  rows = 5,\n  columns = 4,\n  animated = true,\n  width = \"100%\",\n  height,\n  className,\n}: LoaderCommonProps) {\n  const safeRows = Math.max(1, rows);\n  const safeColumns = Math.max(1, columns);\n\n  return (\n    <div\n      className={className}\n      style={{\n        width,\n        height,\n        overflowX: \"auto\",\n        background: \"#fff\",\n        borderRadius: tokens.radius,\n        boxShadow: tokens.shadow,\n        border: \"1px solid #f0f0f0\",\n      }}\n    >\n      <div\n        style={{\n          display: \"grid\",\n          gridTemplateColumns: `repeat(${safeColumns}, minmax(80px, 1fr))`,\n          gap: tokens.spacing.sm,\n          padding: tokens.spacing.md,\n          borderBottom: \"1px solid #f0f0f0\",\n        }}\n      >\n        {Array.from({ length: safeColumns }).map((_, i) => (\n          <Skeleton key={`header-${i}`} width=\"80%\" height={16} animated={animated} />\n        ))}\n      </div>\n      {Array.from({ length: safeRows }).map((_, rowIndex) => (\n        <div\n          key={`row-${rowIndex}`}\n          style={{\n            display: \"grid\",\n            gridTemplateColumns: `repeat(${safeColumns}, minmax(80px, 1fr))`,\n            gap: tokens.spacing.sm,\n            padding: tokens.spacing.md,\n            borderBottom: rowIndex < safeRows - 1 ? \"1px solid #f5f5f5\" : undefined,\n          }}\n        >\n          {Array.from({ length: safeColumns }).map((_, colIndex) => (\n            <Skeleton\n              key={`cell-${rowIndex}-${colIndex}`}\n              width={colIndex === 0 ? \"90%\" : \"70%\"}\n              height={14}\n              animated={animated}\n            />\n          ))}\n        </div>\n      ))}\n    </div>\n  );\n});\n","import { memo } from \"react\";\nimport type { LoaderCommonProps } from \"../types\";\nimport { tokens } from \"../styles/tokens\";\nimport { Skeleton } from \"./Skeleton\";\n\nconst LINE_WIDTHS = [\"100%\", \"92%\", \"78%\", \"100%\", \"88%\", \"65%\"];\n\nexport const TextLoader = memo(function TextLoader({\n  rows = 6,\n  animated = true,\n  width = \"100%\",\n  height,\n  className,\n}: LoaderCommonProps) {\n  const safeRows = Math.max(1, rows);\n\n  return (\n    <div\n      className={className}\n      style={{\n        width,\n        height,\n        display: \"flex\",\n        flexDirection: \"column\",\n        gap: tokens.spacing.sm,\n      }}\n    >\n      {Array.from({ length: safeRows }).map((_, i) => (\n        <Skeleton\n          key={`line-${i}`}\n          width={LINE_WIDTHS[i % LINE_WIDTHS.length]}\n          height={14}\n          animated={animated}\n        />\n      ))}\n    </div>\n  );\n});\n","import { memo } from \"react\";\nimport type { SmartLoaderProps } from \"../types\";\nimport { CardLoader } from \"./CardLoader\";\nimport { DashboardLoader } from \"./DashboardLoader\";\nimport { ListLoader } from \"./ListLoader\";\nimport { ProfileLoader } from \"./ProfileLoader\";\nimport { ShimmerStyles } from \"./ShimmerStyles\";\nimport { TableLoader } from \"./TableLoader\";\nimport { TextLoader } from \"./TextLoader\";\n\nconst LOADERS = {\n  card: CardLoader,\n  table: TableLoader,\n  dashboard: DashboardLoader,\n  profile: ProfileLoader,\n  list: ListLoader,\n  text: TextLoader,\n} as const;\n\nexport const SmartLoader = memo(function SmartLoader({\n  type,\n  rows,\n  columns,\n  animated = true,\n  width,\n  height,\n  className,\n}: SmartLoaderProps) {\n  const Loader = LOADERS[type];\n\n  return (\n    <>\n      <ShimmerStyles />\n      <div role=\"status\" aria-busy=\"true\" aria-label=\"Loading\">\n        <Loader\n          rows={rows}\n          columns={columns}\n          animated={animated}\n          width={width}\n          height={height}\n          className={className}\n        />\n      </div>\n    </>\n  );\n});\n"]}

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "react-smart-loading-effects",
+  "version": "1.0.0",
+  "description": "Beautiful React skeleton loaders with shimmer animation — card, table, dashboard, profile, list, and text loading placeholders. Zero config, TypeScript, Next.js ready.",
+  "keywords": [
+    "react",
+    "react-skeleton",
+    "react-loading",
+    "skeleton-loader",
+    "skeleton-screen",
+    "loading-skeleton",
+    "shimmer",
+    "shimmer-loader",
+    "loading-placeholder",
+    "loading-state",
+    "placeholder",
+    "react-placeholder",
+    "nextjs",
+    "nextjs-skeleton",
+    "typescript",
+    "ui-loader",
+    "skeleton-ui"
+  ],
+  "license": "MIT",
+  "homepage": "https://www.npmjs.com/package/react-smart-loading-effects",
+  "author": "Your Name",
+  "type": "commonjs",
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "docs"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "prepublishOnly": "npm run build",
+    "demo": "npm run dev --prefix demo",
+    "demo:build": "npm run build --prefix demo",
+    "demo:gif": "node scripts/capture-loader-gifs.mjs"
+  },
+  "devDependencies": {
+    "playwright": "^1.52.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "react": "^19.2.4",
+    "react-dom": "^19.2.4",
+    "tsup": "^8.5.1",
+    "typescript": "^6.0.2"
+  }
+}