@dbcdk/react-components 0.0.167 → 0.0.169

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

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

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

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

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

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

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

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

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

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