@dbcdk/react-components 0.0.103 → 0.0.105

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

@@ -0,0 +1,440 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { SkeletonLoaderItem } from './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__ */ jsx(
+    SkeletonLoaderItem,
+    {
+      width,
+      height,
+      radius,
+      variant,
+      speedSec
+    },
+    `${String(width)}-${height}-${String(radius)}-${Math.random()}`
+  );
+  const pills = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(
+    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__ */ jsx(
+    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__ */ 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__ */ jsx(
+        SkeletonLoaderItem,
+        {
+          height: 20,
+          width: "90%",
+          radius: 6,
+          variant,
+          speedSec,
+          ariaLabel: "Loading table header"
+        },
+        `thead-${i}`
+      ))
+    }
+  );
+  const tableBodyRow = (rowIndex) => /* @__PURE__ */ 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__ */ jsx(
+        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__ */ jsxs(
+      "div",
+      {
+        style: { display: "flex", flexDirection: "column", gap: 8, width: "100%" },
+        children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                display: "flex",
+                alignItems: "center",
+                justifyContent: "space-between",
+                gap: 12
+              },
+              children: /* @__PURE__ */ jsx(
+                SkeletonLoaderItem,
+                {
+                  width: labelW,
+                  height: 10,
+                  radius: 4,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading label"
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            SkeletonLoaderItem,
+            {
+              width: "100%",
+              height: 25,
+              radius: 8,
+              variant,
+              speedSec,
+              ariaLabel: "Loading input"
+            }
+          )
+        ]
+      },
+      `if-${i}`
+    );
+  };
+  const inputFieldList = (count) => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" }, children: [
+    Array.from({ length: count }).map((_, i) => inputFieldRow(i)),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-end", marginTop: 8 }, children: [
+      /* @__PURE__ */ jsx(
+        SkeletonLoaderItem,
+        {
+          width: 110,
+          height: 30,
+          radius: 8,
+          variant,
+          speedSec,
+          ariaLabel: "Loading action"
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        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__ */ 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__ */ jsx(
+          SkeletonLoaderItem,
+          {
+            width: "100%",
+            height: "100%",
+            radius: 8,
+            variant,
+            speedSec,
+            ariaLabel: "Loading square"
+          },
+          `square-${i}`
+        ))
+      }
+    );
+  };
+  const filterbar = () => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        flexWrap: "wrap",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: pills(resolvedColumns) }),
+        /* @__PURE__ */ jsx(
+          SkeletonLoaderItem,
+          {
+            width: 240,
+            height: 30,
+            variant,
+            speedSec,
+            ariaLabel: "Loading"
+          }
+        )
+      ]
+    }
+  );
+  const table = () => /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
+    tableHeaderRow(),
+    Array.from({ length: resolvedRows }).map((_, r) => tableBodyRow(r))
+  ] });
+  const dataPageHeader = () => /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 16,
+        flexWrap: "wrap",
+        width: "100%"
+      },
+      children: [
+        /* @__PURE__ */ jsx(
+          SkeletonLoaderItem,
+          {
+            width: "32%",
+            height: 24,
+            radius: 6,
+            variant,
+            speedSec,
+            ariaLabel: "Loading page header"
+          }
+        ),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: { display: "flex", gap: 12, justifyContent: "flex-end", marginInlineStart: "auto" },
+            children: [
+              /* @__PURE__ */ jsx(
+                SkeletonLoaderItem,
+                {
+                  width: 110,
+                  height: 36,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading action"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SkeletonLoaderItem,
+                {
+                  width: 96,
+                  height: 36,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading action"
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+  const getSkeletonItems = () => {
+    switch (type) {
+      case "button": {
+        return /* @__PURE__ */ jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              gap: 12,
+              alignItems: "center",
+              justifyContent: "flex-start",
+              width: "100%",
+              flexWrap: "wrap"
+            },
+            children: [
+              /* @__PURE__ */ jsx(
+                SkeletonLoaderItem,
+                {
+                  width: 120,
+                  height: 40,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading button"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                SkeletonLoaderItem,
+                {
+                  width: 96,
+                  height: 40,
+                  radius: 8,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading button"
+                }
+              )
+            ]
+          }
+        );
+      }
+      case "card": {
+        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
+          /* @__PURE__ */ jsx(
+            SkeletonLoaderItem,
+            {
+              width: "100%",
+              height: 160,
+              radius: 12,
+              variant,
+              speedSec,
+              ariaLabel: "Loading card media"
+            }
+          ),
+          line("60%", 16, 6),
+          textBlock(3),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-start" }, children: [
+            /* @__PURE__ */ jsx(
+              SkeletonLoaderItem,
+              {
+                width: 100,
+                height: 30,
+                variant,
+                speedSec,
+                ariaLabel: "Loading action"
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SkeletonLoaderItem,
+              {
+                width: 72,
+                height: 30,
+                variant,
+                speedSec,
+                ariaLabel: "Loading action"
+              }
+            )
+          ] })
+        ] });
+      }
+      case "avatar": {
+        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, alignItems: "center", width: "100%" }, children: [
+          /* @__PURE__ */ jsx(
+            SkeletonLoaderItem,
+            {
+              width: 48,
+              height: 48,
+              radius: "50%",
+              variant,
+              speedSec,
+              ariaLabel: "Loading avatar"
+            }
+          ),
+          /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, flex: 1 }, children: [
+            line("40%", 14),
+            line("25%", 12)
+          ] })
+        ] });
+      }
+      case "text": {
+        return /* @__PURE__ */ 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__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 24, width: "100%" }, children: [
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              style: {
+                paddingBottom: 16,
+                borderBottom: "var(--border-width-thin) solid var(--color-border-subtle)"
+              },
+              children: dataPageHeader()
+            }
+          ),
+          table()
+        ] });
+      }
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ 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()
+    }
+  );
+}
+
+export { SkeletonLoader };

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.cjs

@@ -0,0 +1,42 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./SkeletonLoaderItem.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function SkeletonLoaderItem({
+  height = 14,
+  width = "100%",
+  radius = 6,
+  speedSec = 3,
+  ariaLabel = "Loading",
+  variant = "default"
+}) {
+  const h = typeof height === "number" ? `${height}px` : height;
+  const w = typeof width === "number" ? `${width}px` : width;
+  const r = typeof radius === "number" ? `${radius}px` : radius;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `${styles__default.default.skeletonLoader} ${styles__default.default[variant]}`,
+      role: "status",
+      "aria-label": ariaLabel,
+      "aria-live": "polite",
+      style: {
+        ["--h"]: h,
+        ["--r"]: r,
+        ["--speed"]: `${speedSec}s`,
+        ["--width"]: w
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.bar, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "srOnly", children: "Loading\u2026" })
+      ]
+    }
+  );
+}
+
+exports.SkeletonLoaderItem = SkeletonLoaderItem;

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.js

@@ -0,0 +1,36 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './SkeletonLoaderItem.module.css';
+
+function SkeletonLoaderItem({
+  height = 14,
+  width = "100%",
+  radius = 6,
+  speedSec = 3,
+  ariaLabel = "Loading",
+  variant = "default"
+}) {
+  const h = typeof height === "number" ? `${height}px` : height;
+  const w = typeof width === "number" ? `${width}px` : width;
+  const r = typeof radius === "number" ? `${radius}px` : radius;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `${styles.skeletonLoader} ${styles[variant]}`,
+      role: "status",
+      "aria-label": ariaLabel,
+      "aria-live": "polite",
+      style: {
+        ["--h"]: h,
+        ["--r"]: r,
+        ["--speed"]: `${speedSec}s`,
+        ["--width"]: w
+      },
+      children: [
+        /* @__PURE__ */ jsx("span", { className: styles.bar, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { className: "srOnly", children: "Loading\u2026" })
+      ]
+    }
+  );
+}
+
+export { SkeletonLoaderItem };

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.module.css

@@ -0,0 +1,51 @@
+.skeletonLoader {
+  --h: var(--skeleton-height, 14px);
+  --r: var(--border-radius-md, 6px);
+  --speed: var(--skeleton-speed, 1.2s);
+  --skeleton-base: var(--opac-bg-dark);
+  --skeleton-sheen: var(--opac-bg-default);
+  position: relative;
+  display: block;
+  inline-size: var(--width, 100%);
+  block-size: var(--h);
+  width: var(--width, 100%);
+  height: var(--h);
+  overflow: hidden;
+  border-radius: var(--r);
+  background: linear-gradient(
+    90deg,
+    var(--skeleton-sheen) 0%,
+    var(--skeleton-base) 45%,
+    var(--skeleton-sheen) 60%,
+    var(--skeleton-base) 100%
+  );
+  background-size: 200% 100%;
+  animation: shimmer var(--speed) linear infinite;
+}
+
+.invert {
+  --skeleton-base: var(--opac-bg-dark-invert);
+  --skeleton-sheen: var(--opac-bg-light-invert);
+}
+
+.bar {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  border-radius: inherit;
+}
+
+@keyframes shimmer {
+  0% {
+    background-position: 200% 0;
+  }
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .skeletonLoader {
+    animation: none;
+  }
+}

package/dist/components/split-button/SplitButton.cjs

@@ -0,0 +1,46 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./SplitButton.module.css');
+var Button = require('../button/Button');
+var Menu = require('../menu/Menu');
+var Popover = require('../popover/Popover');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function SplitButton({
+  children,
+  options,
+  onClick,
+  icon,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, style: { display: "inline-flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { ...rest, onClick, children: [
+      icon,
+      children
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Popover,
+      {
+        trigger: (handleClick, icon2) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.triggerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { ...rest, onClick: handleClick, children: icon2 }) }),
+        children: (close) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: option.active, children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            onClick: () => {
+              option.onClick(close);
+            },
+            children: [
+              option.icon,
+              option.label
+            ]
+          }
+        ) }, option.label)) })
+      }
+    )
+  ] });
+}
+
+exports.SplitButton = SplitButton;

package/dist/components/split-button/SplitButton.js

@@ -0,0 +1,40 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './SplitButton.module.css';
+import { Button } from '../button/Button';
+import { Menu } from '../menu/Menu';
+import { Popover } from '../popover/Popover';
+
+function SplitButton({
+  children,
+  options,
+  onClick,
+  icon,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, style: { display: "inline-flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs(Button, { ...rest, onClick, children: [
+      icon,
+      children
+    ] }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        trigger: (handleClick, icon2) => /* @__PURE__ */ jsx("span", { className: styles.triggerContainer, children: /* @__PURE__ */ jsx(Button, { ...rest, onClick: handleClick, children: icon2 }) }),
+        children: (close) => /* @__PURE__ */ jsx(Menu, { children: options.map((option) => /* @__PURE__ */ jsx(Menu.Item, { active: option.active, children: /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => {
+              option.onClick(close);
+            },
+            children: [
+              option.icon,
+              option.label
+            ]
+          }
+        ) }, option.label)) })
+      }
+    )
+  ] });
+}
+
+export { SplitButton };

package/dist/components/split-button/SplitButton.module.css

@@ -0,0 +1,32 @@
+.container {
+  display: inline-flex;
+}
+
+.container > button:first-child {
+  border-start-start-radius: var(--border-radius-default);
+  border-end-start-radius: var(--border-radius-default);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.triggerContainer button {
+  border-start-end-radius: var(--border-radius-default);
+  border-end-end-radius: var(--border-radius-default);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  padding-block: 0;
+  padding-inline: var(--spacing-xs);
+}
+
+.triggerContainer button {
+  margin-inline-start: -1px;
+}
+.triggerContainer button:not(:hover) {
+  border-inline-start-color: transparent;
+}
+
+.container > button:first-child:focus-visible,
+.triggerContainer button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}