@dbcdk/react-components 0.0.169 → 0.0.170

package/dist/components/split-pane/provider/SplitPaneContext.js

@@ -0,0 +1,121 @@
+import { jsx } from 'react/jsx-runtime';
+import React, { useRef, useState, useCallback, useEffect, useMemo } from 'react';
+
+const SplitPaneContext = React.createContext(null);
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function readStoredSize(key) {
+  try {
+    const raw = localStorage.getItem(key);
+    if (!raw) return null;
+    const num = Number(raw);
+    return Number.isFinite(num) ? num : null;
+  } catch {
+    return null;
+  }
+}
+function writeStoredSize(key, value) {
+  try {
+    localStorage.setItem(key, String(Math.round(value)));
+  } catch {
+  }
+}
+function removeStoredSize(key) {
+  try {
+    localStorage.removeItem(key);
+  } catch {
+  }
+}
+function useSplitPaneContext() {
+  const ctx = React.useContext(SplitPaneContext);
+  if (!ctx) throw new Error("SplitPane components must be used within <SplitPane />");
+  return ctx;
+}
+function SplitPaneProvider({
+  children,
+  direction,
+  initialPrimarySize,
+  minPrimarySize,
+  minSecondarySize,
+  storageKey
+}) {
+  const containerRef = useRef(null);
+  const [primarySize, setPrimarySize] = useState(initialPrimarySize);
+  const [manualPrimarySize, setManualPrimarySize] = useState(null);
+  const getMaxPrimary = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return null;
+    const rect = el.getBoundingClientRect();
+    const total = direction === "horizontal" ? rect.width : rect.height;
+    if (!Number.isFinite(total) || total <= 0) return null;
+    return Math.max(minPrimarySize, total - minSecondarySize);
+  }, [direction, minPrimarySize, minSecondarySize]);
+  useEffect(() => {
+    if (!storageKey) return;
+    const stored = readStoredSize(storageKey);
+    if (stored === null) return;
+    setManualPrimarySize(stored);
+    setPrimarySize(stored);
+  }, [storageKey]);
+  useEffect(() => {
+    const el = containerRef.current;
+    if (!el) return;
+    if (typeof ResizeObserver === "undefined") return;
+    const clampToContainer = () => {
+      const maxPrimary = getMaxPrimary();
+      if (maxPrimary === null) return;
+      const targetSize = manualPrimarySize != null ? manualPrimarySize : initialPrimarySize;
+      setPrimarySize(clamp(targetSize, minPrimarySize, maxPrimary));
+    };
+    clampToContainer();
+    const ro = new ResizeObserver(clampToContainer);
+    ro.observe(el);
+    return () => ro.disconnect();
+  }, [getMaxPrimary, initialPrimarySize, manualPrimarySize, minPrimarySize]);
+  useEffect(() => {
+    if (!storageKey) return;
+    if (manualPrimarySize === null) {
+      removeStoredSize(storageKey);
+      return;
+    }
+    writeStoredSize(storageKey, manualPrimarySize);
+  }, [manualPrimarySize, storageKey]);
+  const handleSizeChange = useCallback((newSize) => {
+    setManualPrimarySize(newSize);
+    setPrimarySize(newSize);
+  }, []);
+  const resetDefault = useCallback(() => {
+    setManualPrimarySize(null);
+    const maxPrimary = getMaxPrimary();
+    if (maxPrimary === null) {
+      setPrimarySize(initialPrimarySize);
+      return;
+    }
+    setPrimarySize(clamp(initialPrimarySize, minPrimarySize, maxPrimary));
+  }, [getMaxPrimary, initialPrimarySize, minPrimarySize]);
+  const value = useMemo(
+    () => ({
+      direction,
+      primarySize,
+      setPrimarySize: handleSizeChange,
+      resetDefault,
+      minPrimarySize,
+      minSecondarySize,
+      containerRef,
+      storageKey
+    }),
+    [
+      direction,
+      primarySize,
+      handleSizeChange,
+      resetDefault,
+      minPrimarySize,
+      minSecondarySize,
+      storageKey
+    ]
+  );
+  return /* @__PURE__ */ jsx(SplitPaneContext.Provider, { value, children });
+}
+
+export { SplitPaneContext, SplitPaneProvider, useSplitPaneContext };

package/dist/components/stack/Stack.cjs

@@ -0,0 +1,56 @@
+'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,
+  maxWidth,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const Tag = as != null ? as : "div";
+  const resolvedStyle = maxWidth != null ? {
+    ...maxWidth.base != null ? { "--max-width-base": maxWidth.base } : {},
+    ...maxWidth.md != null ? { "--max-width-md": maxWidth.md } : {},
+    ...maxWidth.lg != null ? { "--max-width-lg": maxWidth.lg } : {},
+    ...style
+  } : style;
+  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,
+    maxWidth != null ? styles__default.default.maxWidth : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxRuntime.jsx(Tag, { ref, className: classes, style: resolvedStyle, ...rest });
+});
+
+exports.Stack = Stack;

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

@@ -0,0 +1,26 @@
+import React, { ElementType } from 'react';
+import type { GridMaxWidth } from '../../components/grid/Grid';
+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';
+type StackOwnProps = {
+    direction?: StackDirection;
+    gap?: GapSize;
+    align?: StackAlign;
+    justify?: StackJustify;
+    grow?: boolean;
+    wrap?: boolean;
+    mobileDirection?: StackDirection;
+    mobileGap?: GapSize;
+    mobileAlign?: StackAlign;
+    mobileJustify?: StackJustify;
+    mobileWrap?: boolean;
+    maxWidth?: GridMaxWidth;
+};
+export type StackProps<C extends ElementType = 'div'> = StackOwnProps & {
+    as?: C;
+} & Omit<React.ComponentPropsWithRef<C>, keyof StackOwnProps | 'as'>;
+type StackComponent = <C extends ElementType = 'div'>(props: StackProps<C>) => React.ReactElement | null;
+export declare const Stack: StackComponent;
+export {};

package/dist/components/stack/Stack.js

@@ -0,0 +1,50 @@
+'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,
+  maxWidth,
+  className,
+  style,
+  ...rest
+}, ref) {
+  const Tag = as != null ? as : "div";
+  const resolvedStyle = maxWidth != null ? {
+    ...maxWidth.base != null ? { "--max-width-base": maxWidth.base } : {},
+    ...maxWidth.md != null ? { "--max-width-md": maxWidth.md } : {},
+    ...maxWidth.lg != null ? { "--max-width-lg": maxWidth.lg } : {},
+    ...style
+  } : style;
+  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,
+    maxWidth != null ? styles.maxWidth : void 0,
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Tag, { ref, className: classes, style: resolvedStyle, ...rest });
+});
+
+export { Stack };

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

@@ -0,0 +1,77 @@
+.maxWidth {
+  max-width: var(--max-width-base);
+}
+
+@media (min-width: 768px) {
+  .maxWidth {
+    max-width: var(--max-width-md, var(--max-width-base));
+  }
+}
+
+@media (min-width: 1200px) {
+  .maxWidth {
+    max-width: var(--max-width-lg, var(--max-width-md, var(--max-width-base)));
+  }
+}
+
+@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.d.ts

@@ -0,0 +1,10 @@
+import { ReactNode } from 'react';
+interface StatePageProps {
+    header?: string;
+    subheader?: ReactNode;
+    type: 'error' | 'empty' | 'info' | 'notfound';
+    children?: ReactNode;
+    actions?: ReactNode;
+}
+export declare function StatePage({ header, subheader, type, children, actions, }: StatePageProps): ReactNode;
+export {};

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;
+}