@dbcdk/react-components 0.0.1 → 0.0.3

package/dist/components/chip/Chip.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./Chip.module.css');
+var Icon = require('../icon/Icon');
+var lucideReact = require('lucide-react');
+var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Chip({
+  children,
+  severity = "neutral",
+  loading,
+  disableIcon = true,
+  fullWidth = false,
+  size = "md",
+  customIcon,
+  onClose
+}) {
+  const [chipWidth, setChipWidth] = react.useState(void 0);
+  const chipRef = react.useRef(null);
+  react.useEffect(() => {
+    if (chipRef.current) {
+      setChipWidth(`${chipRef.current.offsetWidth}px`);
+    }
+  }, [loading]);
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { width: chipWidth != null ? chipWidth : "100px", height: "26px", radius: "25px" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: chipRef,
+      className: `${styles__default.default.container} ${styles__default.default[severity]} ${fullWidth ? styles__default.default.fullWidth : ""} ${styles__default.default[size]}`,
+      children: [
+        severity && !disableIcon && /* @__PURE__ */ jsxRuntime.jsx(Icon.Icon, { severity }),
+        customIcon,
+        children,
+        onClose && /* @__PURE__ */ jsxRuntime.jsx("button", { onClick: onClose, className: styles__default.default.close, children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, {}) })
+      ]
+    }
+  );
+}
+
+exports.Chip = Chip;

package/dist/components/chip/Chip.d.ts

@@ -0,0 +1,13 @@
+import { Severity } from '@/constants/severity.types';
+interface ChipProps {
+    children: React.ReactNode;
+    severity?: Severity;
+    disableIcon?: boolean;
+    customIcon?: React.ReactNode;
+    loading?: boolean;
+    fullWidth?: boolean;
+    onClose?: () => void;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function Chip({ children, severity, loading, disableIcon, fullWidth, size, customIcon, onClose, }: ChipProps): JSX.Element;
+export {};

package/dist/components/chip/Chip.js

@@ -0,0 +1,43 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useState, useRef, useEffect } from 'react';
+import styles from './Chip.module.css';
+import { Icon } from '../icon/Icon';
+import { X } from 'lucide-react';
+import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+
+function Chip({
+  children,
+  severity = "neutral",
+  loading,
+  disableIcon = true,
+  fullWidth = false,
+  size = "md",
+  customIcon,
+  onClose
+}) {
+  const [chipWidth, setChipWidth] = useState(void 0);
+  const chipRef = useRef(null);
+  useEffect(() => {
+    if (chipRef.current) {
+      setChipWidth(`${chipRef.current.offsetWidth}px`);
+    }
+  }, [loading]);
+  if (loading) {
+    return /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: chipWidth != null ? chipWidth : "100px", height: "26px", radius: "25px" });
+  }
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: chipRef,
+      className: `${styles.container} ${styles[severity]} ${fullWidth ? styles.fullWidth : ""} ${styles[size]}`,
+      children: [
+        severity && !disableIcon && /* @__PURE__ */ jsx(Icon, { severity }),
+        customIcon,
+        children,
+        onClose && /* @__PURE__ */ jsx("button", { onClick: onClose, className: styles.close, children: /* @__PURE__ */ jsx(X, {}) })
+      ]
+    }
+  );
+}
+
+export { Chip };

package/dist/components/chip/Chip.module.css

@@ -0,0 +1,97 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-inline-sm);
+  white-space: nowrap;
+
+  background-color: var(--opac-bg-default);
+  color: var(--color-text);
+
+  border-radius: var(--border-radius-rounded);
+  border: var(--border-width-thin) solid transparent;
+
+  padding-block: calc(var(--spacing-xxs) + var(--density));
+  padding-inline: var(--spacing-md);
+
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  font-weight: var(--font-weight-regular);
+
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    color var(--transition-fast) var(--ease-standard),
+    border-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+.container:hover {
+  background-color: var(--opac-bg-dark);
+}
+
+.container svg {
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
+}
+
+.sm {
+  padding-block: calc(var(--spacing-2xs) + var(--density));
+  padding-inline: var(--spacing-xs);
+  font-size: var(--font-size-xs);
+}
+
+.container.invert {
+  background-color: var(--opac-bg-default-invert);
+  color: var(--color-text-inverse);
+}
+
+/* Status variants */
+.container.success {
+  background-color: var(--color-bg-success);
+  color: var(--color-success);
+}
+.container.warning {
+  background-color: var(--color-bg-warning);
+  color: var(--color-warning);
+}
+.container.error {
+  background-color: var(--color-bg-error);
+  color: var(--color-error);
+}
+.container.info {
+  background-color: var(--color-bg-info);
+  color: var(--color-info);
+}
+
+/* Brand variant */
+.container.brand {
+  background-color: var(--color-primary);
+  color: var(--color-text-on-primary);
+}
+
+/* Full width */
+.fullWidth {
+  inline-size: 100%;
+  justify-content: center;
+}
+
+.close {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  cursor: pointer;
+  color: inherit;
+
+  inline-size: var(--icon-size);
+  block-size: var(--icon-size);
+  border-radius: var(--border-radius-round);
+  transition: background-color var(--transition-fast) var(--ease-standard);
+}
+.close:hover {
+  background-color: var(--color-surface-hover);
+}
+.close:focus-visible {
+  box-shadow: var(--focus-ring);
+  outline: none;
+}

package/dist/components/circle/Circle.cjs

@@ -0,0 +1,18 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var styles = require('./Circle.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function Circle({ severity, children, glow }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.container, children: [
+    /* @__PURE__ */ jsxRuntime.jsx("span", { "data-glow": glow, className: `${styles__default.default.circle} ${styles__default.default[severity]}` }),
+    children,
+    " "
+  ] });
+}
+
+exports.Circle = Circle;

package/dist/components/circle/Circle.d.ts

@@ -0,0 +1,8 @@
+import { Severity } from '@/constants/severity.types';
+interface CircleProps {
+    severity: Severity;
+    children?: React.ReactNode;
+    glow?: boolean;
+}
+export declare function Circle({ severity, children, glow }: CircleProps): JSX.Element;
+export {};

package/dist/components/circle/Circle.js

@@ -0,0 +1,12 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import styles from './Circle.module.css';
+
+function Circle({ severity, children, glow }) {
+  return /* @__PURE__ */ jsxs("span", { className: styles.container, children: [
+    /* @__PURE__ */ jsx("span", { "data-glow": glow, className: `${styles.circle} ${styles[severity]}` }),
+    children,
+    " "
+  ] });
+}
+
+export { Circle };

package/dist/components/circle/Circle.module.css

@@ -0,0 +1,62 @@
+.container {
+  display: inline-flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--spacing-xs);
+  white-space: nowrap;
+  font-family: var(--font-family);
+  font-size: var(--font-size-sm);
+  color: var(--color-text);
+}
+
+.circle {
+  display: inline-block;
+  inline-size: var(--component-size-xs);
+  block-size: var(--component-size-xs);
+  border-radius: var(--border-radius-round);
+  flex-shrink: 0;
+
+  transition:
+    background-color var(--transition-fast) var(--ease-standard),
+    box-shadow var(--transition-fast) var(--ease-standard);
+}
+
+/* Density modifier (optional) */
+.container[data-density='compact'] .circle {
+  inline-size: calc(var(--component-size-xs) - 4px);
+  block-size: calc(var(--component-size-xs) - 4px);
+}
+
+/* Status variants */
+.brand {
+  background-color: var(--color-primary);
+}
+.success {
+  background-color: var(--color-success);
+}
+.warning {
+  background-color: var(--color-warning);
+}
+.error {
+  background-color: var(--color-error);
+}
+.info {
+  background-color: var(--color-info);
+}
+
+.brand[data-glow='true'] {
+  box-shadow: 0 0 0 2px var(--color-bg-primary);
+}
+
+.success[data-glow='true'] {
+  box-shadow: 0 0 0 2px var(--color-bg-success);
+}
+.warning[data-glow='true'] {
+  box-shadow: 0 0 0 2px var(--color-bg-warning);
+}
+.error[data-glow='true'] {
+  box-shadow: 0 0 0 2px var(--color-bg-error);
+}
+.info[data-glow='true'] {
+  box-shadow: 0 0 0 2px var(--color-bg-info);
+}

package/dist/components/clear-button/ClearButton.cjs

@@ -0,0 +1,26 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+var Button = require('../button/Button');
+var styles = require('./ClearButton.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function ClearButton({ onClick, absolute }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: `${styles__default.default.clearButton} ${absolute ? styles__default.default.absolute : ""}`, children: /* @__PURE__ */ jsxRuntime.jsx(
+    Button.Button,
+    {
+      variant: "inline",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(lucideReact.X, { size: 20 })
+    }
+  ) });
+}
+
+exports.ClearButton = ClearButton;

package/dist/components/clear-button/ClearButton.d.ts

@@ -0,0 +1,6 @@
+interface ClearButtonProps {
+    onClick: () => void;
+    absolute?: boolean;
+}
+export declare function ClearButton({ onClick, absolute }: ClearButtonProps): React.ReactNode;
+export {};

package/dist/components/clear-button/ClearButton.js

@@ -0,0 +1,20 @@
+import { jsx } from 'react/jsx-runtime';
+import { X } from 'lucide-react';
+import { Button } from '../button/Button';
+import styles from './ClearButton.module.css';
+
+function ClearButton({ onClick, absolute }) {
+  return /* @__PURE__ */ jsx("span", { className: `${styles.clearButton} ${absolute ? styles.absolute : ""}`, children: /* @__PURE__ */ jsx(
+    Button,
+    {
+      variant: "inline",
+      onClick: (e) => {
+        e.stopPropagation();
+        onClick();
+      },
+      children: /* @__PURE__ */ jsx(X, { size: 20 })
+    }
+  ) });
+}
+
+export { ClearButton };

package/dist/components/clear-button/ClearButton.module.css

@@ -0,0 +1,16 @@
+.clearButton button {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-text-muted);
+  &:hover {
+    color: var(--color-text);
+  }
+}
+
+.clearButton.absolute button {
+  position: absolute;
+  right: var(--spacing-md);
+  top: 50%;
+  transform: translateY(-50%);
+}

package/dist/components/data-summary/DataSummary.cjs

@@ -0,0 +1,49 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var Headline = require('../headline/Headline');
+var styles = require('./DataSummary.module.css');
+var SkeletonLoaderItem = require('../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function DataSummary({
+  title,
+  data,
+  loading,
+  variant = "default",
+  headerMarker,
+  headerIcon,
+  severity,
+  size
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: `${styles__default.default.container} ${styles__default.default[variant]}`, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      Headline.Headline,
+      {
+        severity,
+        marker: headerMarker,
+        icon: headerIcon,
+        size: 2,
+        disableMargin: true,
+        children: title
+      }
+    ),
+    loading && /* @__PURE__ */ jsxRuntime.jsx("table", { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, {}) }),
+      /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx(SkeletonLoaderItem.SkeletonLoaderItem, { width: "100%" }) })
+    ] }, index)) }) }),
+    data && data.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("table", { children: /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.map((item, index) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+      /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsxs("span", { className: styles__default.default.label, children: [
+        item.icon,
+        item.label,
+        ":"
+      ] }) }, index),
+      /* @__PURE__ */ jsxRuntime.jsx("td", { children: /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.value, children: item.value }) })
+    ] })) }) })
+  ] });
+}
+
+exports.DataSummary = DataSummary;

package/dist/components/data-summary/DataSummary.d.ts

@@ -0,0 +1,19 @@
+import { Severity } from '@/constants/severity.types';
+interface DataSummaryItem {
+    label: string;
+    value: React.ReactNode;
+    icon?: React.ReactNode;
+}
+interface DataSummaryProps {
+    title: string;
+    value: string | number;
+    data: DataSummaryItem[];
+    loading?: boolean;
+    variant?: 'default' | 'primary';
+    headerMarker?: boolean;
+    headerIcon?: React.ReactNode;
+    severity?: Severity;
+    size?: 'sm' | 'md' | 'lg';
+}
+export declare function DataSummary({ title, data, loading, variant, headerMarker, headerIcon, severity, size, }: DataSummaryProps): JSX.Element;
+export {};

package/dist/components/data-summary/DataSummary.js

@@ -0,0 +1,43 @@
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Headline } from '../headline/Headline';
+import styles from './DataSummary.module.css';
+import { SkeletonLoaderItem } from '../skeleton-loader/skeleton-loader-item/SkeletonLoaderItem';
+
+function DataSummary({
+  title,
+  data,
+  loading,
+  variant = "default",
+  headerMarker,
+  headerIcon,
+  severity,
+  size
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: `${styles.container} ${styles[variant]}`, children: [
+    /* @__PURE__ */ jsx(
+      Headline,
+      {
+        severity,
+        marker: headerMarker,
+        icon: headerIcon,
+        size: 2,
+        disableMargin: true,
+        children: title
+      }
+    ),
+    loading && /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: Array.from({ length: 4 }).map((_, index) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(SkeletonLoaderItem, {}) }),
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx(SkeletonLoaderItem, { width: "100%" }) })
+    ] }, index)) }) }),
+    data && data.length > 0 && /* @__PURE__ */ jsx("table", { children: /* @__PURE__ */ jsx("tbody", { children: data.map((item, index) => /* @__PURE__ */ jsxs("tr", { children: [
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsxs("span", { className: styles.label, children: [
+        item.icon,
+        item.label,
+        ":"
+      ] }) }, index),
+      /* @__PURE__ */ jsx("td", { children: /* @__PURE__ */ jsx("span", { className: styles.value, children: item.value }) })
+    ] })) }) })
+  ] });
+}
+
+export { DataSummary };

package/dist/components/data-summary/DataSummary.module.css

@@ -0,0 +1,51 @@
+.container {
+  padding: var(--spacing-lg);
+  display: inline-flex;
+  flex-direction: column;
+  gap: var(--spacing-sm);
+}
+
+.default {
+  background-color: var(--opac-bg-default);
+}
+
+.primary {
+  background-color: var(--color-primary);
+  color: var(--color-text-on-primary);
+}
+
+.label {
+  font-weight: 500;
+  padding-right: var(--spacing-sm);
+  color: var(--color-text-secondary);
+}
+
+.label,
+.value {
+  display: flex;
+  align-items: center;
+  gap: 5px;
+}
+
+.container table td:first-child {
+  width: 1px;
+  white-space: nowrap;
+  padding-right: 10px;
+}
+.container table td {
+  vertical-align: top;
+  padding: 5px 0px;
+}
+
+.container table ul {
+  margin: 0;
+  padding: 0;
+}
+
+.container ul li {
+  list-style-position: inside;
+}
+.container svg {
+  height: 14px;
+  width: auto;
+}