@dbcdk/react-components 0.0.167 → 0.0.169

package/dist/components/skeleton-loader/SkeletonLoader.cjs

@@ -1,442 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var SkeletonLoaderItem = require('./skeleton-loader-item/SkeletonLoaderItem');
-
-function SkeletonLoader({
-  type,
-  rows = 3,
-  columns = 3,
-  variant = "default",
-  speedSec = 3
-}) {
-  const resolvedRows = type === "dataPage" ? rows || 12 : rows;
-  const resolvedColumns = type === "dataPage" ? columns || 4 : columns;
-  const line = (width, height = 14, radius = 6) => /* @__PURE__ */ jsxRuntime.jsx(
-    SkeletonLoaderItem.SkeletonLoaderItem,
-    {
-      width,
-      height,
-      radius,
-      variant,
-      speedSec
-    },
-    `${String(width)}-${height}-${String(radius)}`
-  );
-  const pills = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    SkeletonLoaderItem.SkeletonLoaderItem,
-    {
-      width: 80 + i % 3 * 30,
-      height: 30,
-      radius: 6,
-      variant,
-      speedSec,
-      ariaLabel: "Loading filter"
-    },
-    `pill-${i}`
-  ));
-  const textBlock = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    SkeletonLoaderItem.SkeletonLoaderItem,
-    {
-      width: i === count - 1 ? "60%" : `${90 - i % 3 * 10}%`,
-      height: 12,
-      radius: 4,
-      variant,
-      speedSec,
-      ariaLabel: "Loading text line"
-    },
-    `text-${i}`
-  ));
-  const tableHeaderRow = () => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
-        gap: 12,
-        alignItems: "center",
-        width: "100%"
-      },
-      children: Array.from({ length: resolvedColumns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-        SkeletonLoaderItem.SkeletonLoaderItem,
-        {
-          height: 20,
-          width: "90%",
-          radius: 6,
-          variant,
-          speedSec,
-          ariaLabel: "Loading table header"
-        },
-        `thead-${i}`
-      ))
-    }
-  );
-  const tableBodyRow = (rowIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${resolvedColumns}, minmax(0, 1fr))`,
-        gap: 12,
-        alignItems: "center",
-        width: "100%"
-      },
-      children: Array.from({ length: resolvedColumns }).map((_, colIndex) => /* @__PURE__ */ jsxRuntime.jsx(
-        SkeletonLoaderItem.SkeletonLoaderItem,
-        {
-          height: 20,
-          width: colIndex % 3 === 0 ? "93%" : colIndex % 3 === 1 ? "98%" : "90%",
-          radius: 4,
-          variant,
-          speedSec,
-          ariaLabel: "Loading table cell"
-        },
-        `tcell-${rowIndex}-${colIndex}`
-      ))
-    },
-    `trow-${rowIndex}`
-  );
-  const inputFieldRow = (i) => {
-    const labelW = i % 3 === 0 ? "34%" : i % 3 === 1 ? "42%" : "28%";
-    return /* @__PURE__ */ jsxRuntime.jsxs(
-      "div",
-      {
-        style: { display: "flex", flexDirection: "column", gap: 8, width: "100%" },
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: {
-                display: "flex",
-                alignItems: "center",
-                justifyContent: "space-between",
-                gap: 12
-              },
-              children: /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: labelW,
-                  height: 10,
-                  radius: 4,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading label"
-                }
-              )
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SkeletonLoaderItem.SkeletonLoaderItem,
-            {
-              width: "100%",
-              height: 25,
-              radius: 8,
-              variant,
-              speedSec,
-              ariaLabel: "Loading input"
-            }
-          )
-        ]
-      },
-      `if-${i}`
-    );
-  };
-  const inputFieldList = (count) => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" }, children: [
-    Array.from({ length: count }).map((_, i) => inputFieldRow(i)),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 8 }, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SkeletonLoaderItem.SkeletonLoaderItem,
-        {
-          width: 110,
-          height: 30,
-          radius: 8,
-          variant,
-          speedSec,
-          ariaLabel: "Loading action"
-        }
-      ),
-      /* @__PURE__ */ jsxRuntime.jsx(
-        SkeletonLoaderItem.SkeletonLoaderItem,
-        {
-          width: 90,
-          height: 30,
-          radius: 8,
-          variant,
-          speedSec,
-          ariaLabel: "Loading action"
-        }
-      )
-    ] })
-  ] });
-  const squares = () => {
-    const gap = 12;
-    const squareSize = `min(calc((100% - ${(resolvedColumns - 1) * gap}px) / ${resolvedColumns}), calc((100% - ${(resolvedRows - 1) * gap}px) / ${resolvedRows}))`;
-    const gridTemplateColumns = resolvedColumns === 1 ? "repeat(1, 100%)" : `repeat(${resolvedColumns}, ${squareSize})`;
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "div",
-      {
-        style: {
-          display: "grid",
-          gridTemplateColumns,
-          gridTemplateRows: `repeat(${resolvedRows}, ${squareSize})`,
-          gap,
-          justifyContent: "center",
-          alignContent: "center",
-          width: "100%",
-          height: "100%",
-          minHeight: 0,
-          flexGrow: 1
-        },
-        children: Array.from({ length: resolvedRows * resolvedColumns }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-          SkeletonLoaderItem.SkeletonLoaderItem,
-          {
-            width: "100%",
-            height: "100%",
-            radius: 8,
-            variant,
-            speedSec,
-            ariaLabel: "Loading square"
-          },
-          `square-${i}`
-        ))
-      }
-    );
-  };
-  const filterbar = () => /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: 12,
-        flexWrap: "wrap",
-        width: "100%"
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: pills(resolvedColumns) }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          SkeletonLoaderItem.SkeletonLoaderItem,
-          {
-            width: 240,
-            height: 30,
-            variant,
-            speedSec,
-            ariaLabel: "Loading"
-          }
-        )
-      ]
-    }
-  );
-  const table = () => /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
-    tableHeaderRow(),
-    Array.from({ length: resolvedRows }).map((_, r) => tableBodyRow(r))
-  ] });
-  const dataPageHeader = () => /* @__PURE__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      style: {
-        display: "flex",
-        alignItems: "center",
-        justifyContent: "space-between",
-        gap: 16,
-        flexWrap: "wrap",
-        width: "100%"
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx(
-          SkeletonLoaderItem.SkeletonLoaderItem,
-          {
-            width: "32%",
-            height: 24,
-            radius: 6,
-            variant,
-            speedSec,
-            ariaLabel: "Loading page header"
-          }
-        ),
-        /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: { display: "flex", gap: 12, justifyContent: "flex-end", marginInlineStart: "auto" },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: 110,
-                  height: 36,
-                  radius: 8,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading action"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: 96,
-                  height: 36,
-                  radius: 8,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading action"
-                }
-              )
-            ]
-          }
-        )
-      ]
-    }
-  );
-  const getSkeletonItems = () => {
-    switch (type) {
-      case "button": {
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: 12,
-              alignItems: "center",
-              justifyContent: "flex-start",
-              width: "100%",
-              flexWrap: "wrap"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: 120,
-                  height: 40,
-                  radius: 8,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading button"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: 96,
-                  height: 40,
-                  radius: 8,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading button"
-                }
-              )
-            ]
-          }
-        );
-      }
-      case "card": {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SkeletonLoaderItem.SkeletonLoaderItem,
-            {
-              width: "100%",
-              height: 160,
-              radius: 12,
-              variant,
-              speedSec,
-              ariaLabel: "Loading card media"
-            }
-          ),
-          line("60%", 16, 6),
-          textBlock(3),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-start" }, children: [
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SkeletonLoaderItem.SkeletonLoaderItem,
-              {
-                width: 100,
-                height: 30,
-                variant,
-                speedSec,
-                ariaLabel: "Loading action"
-              }
-            ),
-            /* @__PURE__ */ jsxRuntime.jsx(
-              SkeletonLoaderItem.SkeletonLoaderItem,
-              {
-                width: 72,
-                height: 30,
-                variant,
-                speedSec,
-                ariaLabel: "Loading action"
-              }
-            )
-          ] })
-        ] });
-      }
-      case "avatar": {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, alignItems: "center", width: "100%" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            SkeletonLoaderItem.SkeletonLoaderItem,
-            {
-              width: 48,
-              height: 48,
-              radius: "50%",
-              variant,
-              speedSec,
-              ariaLabel: "Loading avatar"
-            }
-          ),
-          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, flex: 1 }, children: [
-            line("40%", 14),
-            line("25%", 12)
-          ] })
-        ] });
-      }
-      case "text": {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 10, width: "100%" }, children: textBlock(resolvedRows) });
-      }
-      case "table": {
-        return table();
-      }
-      case "filterbar": {
-        return filterbar();
-      }
-      case "inputFieldList": {
-        return inputFieldList(resolvedRows);
-      }
-      case "squares": {
-        return squares();
-      }
-      case "dataPage": {
-        return /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 24, width: "100%" }, children: [
-          /* @__PURE__ */ jsxRuntime.jsx(
-            "div",
-            {
-              style: {
-                paddingBottom: 16,
-                borderBottom: "var(--border-width-thin) solid var(--color-border-subtle)"
-              },
-              children: dataPageHeader()
-            }
-          ),
-          table()
-        ] });
-      }
-      default:
-        return null;
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "status",
-      "aria-label": "Loading content",
-      style: {
-        display: "flex",
-        flexGrow: 1,
-        flexDirection: "column",
-        gap: 16,
-        width: "100%",
-        height: type === "squares" ? "100%" : void 0
-      },
-      children: getSkeletonItems()
-    }
-  );
-}
-
-exports.SkeletonLoader = SkeletonLoader;

package/dist/components/skeleton-loader/SkeletonLoader.d.ts

@@ -1,9 +0,0 @@
-import React from 'react';
-export interface SkeletonLoaderProps {
-    type: 'button' | 'card' | 'avatar' | 'text' | 'table' | 'filterbar' | 'inputFieldList' | 'squares' | 'dataPage';
-    rows?: number;
-    columns?: number;
-    variant?: 'default' | 'invert';
-    speedSec?: number;
-}
-export declare function SkeletonLoader({ type, rows, columns, variant, speedSec, }: SkeletonLoaderProps): React.ReactNode;