@dbcdk/react-components 0.0.102 → 0.0.104

package/dist/components/stack/Stack.cjs

@@ -0,0 +1,47 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var styles = require('./Stack.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+const Stack = react.forwardRef(function Stack2({
+  as,
+  direction,
+  gap,
+  align,
+  justify,
+  grow = false,
+  wrap = false,
+  mobileDirection,
+  mobileGap,
+  mobileAlign,
+  mobileJustify,
+  mobileWrap = false,
+  className,
+  ...rest
+}, ref) {
+  const Tag = as != null ? as : "div";
+  const classes = [
+    "dbc-flex",
+    direction === "column" ? "dbc-flex-column" : void 0,
+    gap ? `dbc-gap-${gap}` : void 0,
+    align ? `dbc-items-${align}` : void 0,
+    justify ? `dbc-justify-${justify}` : void 0,
+    grow ? "dbc-flex-grow" : void 0,
+    wrap ? "dbc-flex-wrap" : void 0,
+    mobileDirection ? styles__default.default[`mobileDirection${mobileDirection.charAt(0).toUpperCase()}${mobileDirection.slice(1)}`] : void 0,
+    mobileGap ? styles__default.default[`mobileGap${mobileGap.charAt(0).toUpperCase()}${mobileGap.slice(1)}`] : void 0,
+    mobileAlign ? styles__default.default[`mobileAlign${mobileAlign.charAt(0).toUpperCase()}${mobileAlign.slice(1)}`] : void 0,
+    mobileJustify ? styles__default.default[`mobileJustify${mobileJustify.charAt(0).toUpperCase()}${mobileJustify.slice(1)}`] : void 0,
+    mobileWrap ? styles__default.default.mobileWrap : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ref, className: classes, ...rest });
+});
+
+exports.Stack = Stack;

package/dist/components/stack/Stack.d.ts

@@ -1,5 +1,5 @@
 import React, { ElementType } from 'react';
-type GapSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg';
+type GapSize = 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl';
 type StackDirection = 'row' | 'column';
 type StackAlign = 'start' | 'center' | 'end';
 type StackJustify = 'start' | 'center' | 'end' | 'between';

package/dist/components/stack/Stack.js

@@ -0,0 +1,41 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { forwardRef } from 'react';
+import styles from './Stack.module.css';
+
+const Stack = forwardRef(function Stack2({
+  as,
+  direction,
+  gap,
+  align,
+  justify,
+  grow = false,
+  wrap = false,
+  mobileDirection,
+  mobileGap,
+  mobileAlign,
+  mobileJustify,
+  mobileWrap = false,
+  className,
+  ...rest
+}, ref) {
+  const Tag = as != null ? as : "div";
+  const classes = [
+    "dbc-flex",
+    direction === "column" ? "dbc-flex-column" : void 0,
+    gap ? `dbc-gap-${gap}` : void 0,
+    align ? `dbc-items-${align}` : void 0,
+    justify ? `dbc-justify-${justify}` : void 0,
+    grow ? "dbc-flex-grow" : void 0,
+    wrap ? "dbc-flex-wrap" : void 0,
+    mobileDirection ? styles[`mobileDirection${mobileDirection.charAt(0).toUpperCase()}${mobileDirection.slice(1)}`] : void 0,
+    mobileGap ? styles[`mobileGap${mobileGap.charAt(0).toUpperCase()}${mobileGap.slice(1)}`] : void 0,
+    mobileAlign ? styles[`mobileAlign${mobileAlign.charAt(0).toUpperCase()}${mobileAlign.slice(1)}`] : void 0,
+    mobileJustify ? styles[`mobileJustify${mobileJustify.charAt(0).toUpperCase()}${mobileJustify.slice(1)}`] : void 0,
+    mobileWrap ? styles.mobileWrap : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Tag, { ref, className: classes, ...rest });
+});
+
+export { Stack };

package/dist/components/stack/Stack.module.css

@@ -0,0 +1,61 @@
+@media (max-width: 767px) {
+  .mobileDirectionRow {
+    flex-direction: row;
+  }
+
+  .mobileDirectionColumn {
+    flex-direction: column;
+  }
+
+  .mobileGapXxs {
+    gap: var(--spacing-xxs);
+  }
+
+  .mobileGapXs {
+    gap: var(--spacing-xs);
+  }
+
+  .mobileGapSm {
+    gap: var(--spacing-sm);
+  }
+
+  .mobileGapMd {
+    gap: var(--spacing-md);
+  }
+
+  .mobileGapLg {
+    gap: var(--spacing-lg);
+  }
+
+  .mobileAlignStart {
+    align-items: flex-start;
+  }
+
+  .mobileAlignCenter {
+    align-items: center;
+  }
+
+  .mobileAlignEnd {
+    align-items: flex-end;
+  }
+
+  .mobileJustifyStart {
+    justify-content: flex-start;
+  }
+
+  .mobileJustifyCenter {
+    justify-content: center;
+  }
+
+  .mobileJustifyEnd {
+    justify-content: flex-end;
+  }
+
+  .mobileJustifyBetween {
+    justify-content: space-between;
+  }
+
+  .mobileWrap {
+    flex-wrap: wrap;
+  }
+}

package/dist/components/state-page/StatePage.cjs

@@ -0,0 +1,48 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var empty = require('./empty');
+var error = require('./error');
+var notFound = require('./notFound');
+var styles = require('./StatePage.module.css');
+var Headline = require('../headline/Headline');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function StatePage({
+  header,
+  subheader,
+  type,
+  children,
+  actions
+}) {
+  const illustration = react.useMemo(() => {
+    switch (type) {
+      case "error":
+        return /* @__PURE__ */ jsxRuntime.jsx(error.ErrorIllustration, {});
+      case "empty":
+        return /* @__PURE__ */ jsxRuntime.jsx(empty.EmptyIllustration, {});
+      case "notfound":
+        return /* @__PURE__ */ jsxRuntime.jsx(notFound.NotFoundIllustration, {});
+    }
+  }, [type]);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className: `dbc-flex dbc-flex-column dbc-gap-lg dbc-items-center dbc-justify-center ${styles__default.default.container}`,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.illustration, children: illustration }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md dbc-items-center", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(Headline.Headline, { disableMargin: true, size: 1, subheader, children: header }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { children }),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { className: "dbc-flex dbc-gap-sm dbc-justify-center", children: actions })
+        ] })
+      ]
+    }
+  );
+}
+
+exports.StatePage = StatePage;

package/dist/components/state-page/StatePage.js

@@ -0,0 +1,42 @@
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { useMemo } from 'react';
+import { EmptyIllustration } from './empty';
+import { ErrorIllustration } from './error';
+import { NotFoundIllustration } from './notFound';
+import styles from './StatePage.module.css';
+import { Headline } from '../headline/Headline';
+
+function StatePage({
+  header,
+  subheader,
+  type,
+  children,
+  actions
+}) {
+  const illustration = useMemo(() => {
+    switch (type) {
+      case "error":
+        return /* @__PURE__ */ jsx(ErrorIllustration, {});
+      case "empty":
+        return /* @__PURE__ */ jsx(EmptyIllustration, {});
+      case "notfound":
+        return /* @__PURE__ */ jsx(NotFoundIllustration, {});
+    }
+  }, [type]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `dbc-flex dbc-flex-column dbc-gap-lg dbc-items-center dbc-justify-center ${styles.container}`,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: styles.illustration, children: illustration }),
+        /* @__PURE__ */ jsxs("div", { className: "dbc-flex dbc-flex-column dbc-gap-md dbc-items-center", children: [
+          /* @__PURE__ */ jsx(Headline, { disableMargin: true, size: 1, subheader, children: header }),
+          /* @__PURE__ */ jsx("div", { children }),
+          /* @__PURE__ */ jsx("div", { className: "dbc-flex dbc-gap-sm dbc-justify-center", children: actions })
+        ] })
+      ]
+    }
+  );
+}
+
+export { StatePage };

package/dist/components/state-page/StatePage.module.css

@@ -0,0 +1,9 @@
+.container {
+  margin: auto;
+  height: 100%;
+}
+
+.illustration svg {
+  width: 200px;
+  height: auto;
+}