@dbcdk/react-components 0.0.2 → 0.0.3

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

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

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

@@ -0,0 +1,268 @@
+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 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(${columns}, minmax(0, 1fr))`,
+        gap: 12,
+        alignItems: "center",
+        width: "100%"
+      },
+      children: Array.from({ length: columns }).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(${columns}, minmax(0, 1fr))`,
+        gap: 12,
+        alignItems: "center",
+        width: "100%"
+      },
+      children: Array.from({ length: columns }).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 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(rows) });
+      }
+      case "table": {
+        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
+          tableHeaderRow(),
+          Array.from({ length: rows }).map((_, r) => tableBodyRow(r))
+        ] });
+      }
+      case "filterbar": {
+        return /* @__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(columns) }),
+              /* @__PURE__ */ jsx(
+                SkeletonLoaderItem,
+                {
+                  width: 240,
+                  height: 30,
+                  variant,
+                  speedSec,
+                  ariaLabel: "Loading"
+                }
+              )
+            ]
+          }
+        );
+      }
+      default:
+        return null;
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading content",
+      style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" },
+      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: styles__default.default.srOnly, children: "Loading\u2026" })
+      ]
+    }
+  );
+}
+
+exports.SkeletonLoaderItem = SkeletonLoaderItem;

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+type SkeletonItemProps = {
+    height?: number | string;
+    width?: number | string;
+    radius?: number | string;
+    speedSec?: number;
+    ariaLabel?: string;
+    variant?: 'default' | 'invert';
+};
+export declare function SkeletonLoaderItem({ height, width, radius, speedSec, ariaLabel, variant, }: SkeletonItemProps): React.ReactNode;
+export {};

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: styles.srOnly, children: "Loading\u2026" })
+      ]
+    }
+  );
+}
+
+export { SkeletonLoaderItem };

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

@@ -0,0 +1,63 @@
+.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;
+}
+
+.srOnly {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0 0 0 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+@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,37 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Button = require('../button/Button');
+var Menu = require('../menu/Menu');
+var Popover = require('../popover/Popover');
+var styles = require('./SplitButton.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function SplitButton({
+  children,
+  options,
+  onClick,
+  icon
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, style: { display: "inline-flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { onClick, children: [
+      icon,
+      children
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Popover.Popover,
+      {
+        trigger: (onClick2, icon2) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.triggerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { onClick: onClick2, children: icon2 }) }),
+        children: /* @__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, children: [
+          option.icon,
+          option.label
+        ] }) }, option.label)) })
+      }
+    )
+  ] });
+}
+
+exports.SplitButton = SplitButton;

package/dist/components/split-button/SplitButton.d.ts

@@ -0,0 +1,14 @@
+interface SplitButtonItem {
+    label?: string;
+    onClick: () => void;
+    icon?: React.ReactNode;
+    active?: boolean;
+}
+interface SplitButtonProps {
+    onClick?: () => void;
+    icon?: React.ReactNode;
+    options: SplitButtonItem[];
+    children?: React.ReactNode;
+}
+export declare function SplitButton({ children, options, onClick, icon, }: SplitButtonProps): React.ReactNode;
+export {};

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

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Button } from '../button/Button';
+import { Menu } from '../menu/Menu';
+import { Popover } from '../popover/Popover';
+import styles from './SplitButton.module.css';
+
+function SplitButton({
+  children,
+  options,
+  onClick,
+  icon
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: styles.container, style: { display: "inline-flex", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsxs(Button, { onClick, children: [
+      icon,
+      children
+    ] }),
+    /* @__PURE__ */ jsx(
+      Popover,
+      {
+        trigger: (onClick2, icon2) => /* @__PURE__ */ jsx("span", { className: styles.triggerContainer, children: /* @__PURE__ */ jsx(Button, { onClick: onClick2, children: icon2 }) }),
+        children: /* @__PURE__ */ jsx(Menu, { children: options.map((option) => /* @__PURE__ */ jsx(Menu.Item, { active: option.active, children: /* @__PURE__ */ jsxs("button", { onClick: option.onClick, 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-md);
+  border-end-start-radius: var(--border-radius-md);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.triggerContainer button {
+  border-start-end-radius: var(--border-radius-md);
+  border-end-end-radius: var(--border-radius-md);
+  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);
+}