@dbcdk/react-components 0.0.167 → 0.0.169

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

@@ -1,440 +0,0 @@
-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)}`
-  );
-  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

@@ -1,42 +0,0 @@
-'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 = 4,
-  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.d.ts

@@ -1,11 +0,0 @@
-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

@@ -1,36 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import styles from './SkeletonLoaderItem.module.css';
-
-function SkeletonLoaderItem({
-  height = 14,
-  width = "100%",
-  radius = 6,
-  speedSec = 4,
-  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

@@ -1,55 +0,0 @@
-.skeletonLoader {
-  --h: var(--skeleton-height, 14px);
-  --r: var(--border-radius-md, 6px);
-  --speed: var(--skeleton-speed, 1.2s);
-  --skeleton-base: var(--opac-bg-default);
-  --skeleton-sheen: var(--opac-bg-light);
-  --skeleton-sheen-soft: color-mix(in srgb, var(--skeleton-sheen) 60%, var(--skeleton-base));
-  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-base) 0%,
-    var(--skeleton-base) 34%,
-    var(--skeleton-sheen-soft) 45%,
-    var(--skeleton-sheen) 50%,
-    var(--skeleton-sheen-soft) 55%,
-    var(--skeleton-base) 66%,
-    var(--skeleton-base) 100%
-  );
-  background-size: 240% 100%;
-  animation: shimmer var(--speed) linear infinite;
-}
-
-.invert {
-  --skeleton-base: var(--opac-bg-default-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

@@ -1,46 +0,0 @@
-'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.d.ts

@@ -1,16 +0,0 @@
-import type { ComponentProps, ReactNode } from 'react';
-import { Button } from '../button/Button';
-interface SplitButtonItem {
-    label?: string;
-    onClick: (close?: () => void) => void;
-    icon?: ReactNode;
-    active?: boolean;
-}
-interface SplitButtonProps extends ComponentProps<typeof Button> {
-    onClick?: () => void;
-    icon?: ReactNode;
-    options: SplitButtonItem[];
-    children?: ReactNode;
-}
-export declare function SplitButton({ children, options, onClick, icon, ...rest }: SplitButtonProps): ReactNode;
-export {};

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

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