@dbcdk/react-components 0.0.167 → 0.0.169

package/dist/components/overlay/side-panel/SidePanel.d.ts

@@ -1,25 +0,0 @@
-import React, { type HTMLAttributes, type ReactNode } from 'react';
-import { Severity } from '../../../constants/severity.types';
-interface SidePanelProps {
-    children?: ReactNode;
-    header: ReactNode;
-    subheader?: ReactNode;
-    headerAddition?: ReactNode;
-    actions?: ReactNode;
-    onClose: (event?: React.MouseEvent<HTMLButtonElement> | React.MouseEvent<HTMLDivElement>) => void;
-    isOpen: boolean;
-    showBackdrop?: boolean;
-    severity?: Severity;
-    showHeaderMarker?: boolean;
-    width?: number | string;
-    /**
-     * Optional details pane (separate column).
-     */
-    details?: ReactNode;
-    detailsHeader?: ReactNode;
-    detailsWidth?: number | string;
-    onCloseDetails?: () => void;
-    detailsHeaderAddition?: ReactNode;
-}
-export declare function SidePanel({ isOpen, onClose, children, header, subheader, headerAddition, actions, showBackdrop, severity, showHeaderMarker, width, details, detailsHeader, detailsWidth, onCloseDetails, detailsHeaderAddition, ...props }: SidePanelProps & HTMLAttributes<HTMLElement>): ReactNode;
-export {};

package/dist/components/overlay/side-panel/SidePanel.js

@@ -1,167 +0,0 @@
-import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
-import { X } from 'lucide-react';
-import { useState, useRef, useEffect } from 'react';
-import { createPortal } from 'react-dom';
-import { Button } from '../../../components/button/Button';
-import { Headline } from '../../../components/headline/Headline';
-import { MOTION_MS } from '../../../styles/animation';
-import styles from './SidePanel.module.css';
-
-function SidePanel({
-  isOpen,
-  onClose,
-  children,
-  header,
-  subheader,
-  headerAddition,
-  actions,
-  showBackdrop = true,
-  severity,
-  showHeaderMarker = true,
-  width = "400px",
-  details,
-  detailsHeader = "Output",
-  detailsWidth = "420px",
-  onCloseDetails,
-  detailsHeaderAddition,
-  ...props
-}) {
-  const [mounted, setMounted] = useState(false);
-  const [shouldRender, setShouldRender] = useState(isOpen);
-  const [isActive, setIsActive] = useState(false);
-  const panelRef = useRef(null);
-  useEffect(() => setMounted(true), []);
-  useEffect(() => {
-    if (isOpen) setShouldRender(true);
-  }, [isOpen]);
-  useEffect(() => {
-    if (!isOpen) return;
-    const handleKeyDown = (e) => {
-      if (e.key === "Escape") {
-        e.stopPropagation();
-        onClose();
-      }
-    };
-    document.addEventListener("keydown", handleKeyDown);
-    return () => {
-      document.removeEventListener("keydown", handleKeyDown);
-    };
-  }, [isOpen, onClose]);
-  useEffect(() => {
-    if (!shouldRender) return;
-    if (!isOpen) {
-      setIsActive(false);
-      return;
-    }
-    const raf = requestAnimationFrame(() => setIsActive(true));
-    return () => cancelAnimationFrame(raf);
-  }, [isOpen, shouldRender]);
-  useEffect(() => {
-    if (!shouldRender) return;
-    const el = panelRef.current;
-    if (!el) return;
-    const onTransitionEnd = (e) => {
-      if (e.target !== el) return;
-      if (e.propertyName !== "transform") return;
-      if (!isOpen) setShouldRender(false);
-    };
-    el.addEventListener("transitionend", onTransitionEnd);
-    return () => el.removeEventListener("transitionend", onTransitionEnd);
-  }, [isOpen, shouldRender]);
-  if (!mounted) return null;
-  if (!shouldRender) return null;
-  const hasDetails = Boolean(details);
-  return createPortal(
-    /* @__PURE__ */ jsxs(Fragment, { children: [
-      showBackdrop && /* @__PURE__ */ jsx(
-        "div",
-        {
-          className: `${styles.backdrop} ${isActive ? styles.backdropOpen : ""}`,
-          onClick: (e) => {
-            e.stopPropagation();
-            onClose(e);
-          }
-        }
-      ),
-      /* @__PURE__ */ jsxs(
-        "div",
-        {
-          ref: panelRef,
-          ...props,
-          className: `${styles.sidePanel} ${isActive ? styles.open : ""} ${hasDetails ? styles.withDetails : styles.noDetails}`,
-          style: {
-            "--side-panel-width": width,
-            "--details-width": detailsWidth,
-            "--panel-dur": MOTION_MS.panelSlide + "ms"
-          },
-          "data-cy": "details-panel",
-          role: "dialog",
-          "aria-modal": "true",
-          children: [
-            hasDetails ? /* @__PURE__ */ jsxs("aside", { className: styles.detailsCol, "data-cy": "details-panel-details", children: [
-              /* @__PURE__ */ jsxs("div", { className: styles.detailsHeader, children: [
-                /* @__PURE__ */ jsx("div", { className: styles.detailsTitle, children: detailsHeader }),
-                /* @__PURE__ */ jsxs("div", { className: styles.detailsHeaderActions, children: [
-                  detailsHeaderAddition,
-                  onCloseDetails ? /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      type: "button",
-                      size: "sm",
-                      variant: "outlined",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onCloseDetails();
-                      },
-                      children: "Luk"
-                    }
-                  ) : null
-                ] })
-              ] }),
-              /* @__PURE__ */ jsx("div", { className: styles.detailsContent, children: details })
-            ] }) : null,
-            /* @__PURE__ */ jsxs("section", { className: styles.mainCol, "data-cy": "details-panel-main", children: [
-              /* @__PURE__ */ jsx("div", { className: styles.header, children: /* @__PURE__ */ jsxs("div", { className: "dbc-flex dbc-justify-between", children: [
-                /* @__PURE__ */ jsx(
-                  Headline,
-                  {
-                    size: 2,
-                    disableMargin: true,
-                    severity,
-                    marker: showHeaderMarker,
-                    subheader,
-                    children: header
-                  }
-                ),
-                /* @__PURE__ */ jsxs("span", { className: "dbc-flex dbc-items-center dbc-gap-xs", children: [
-                  headerAddition,
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      type: "button",
-                      size: "md",
-                      shape: "round",
-                      variant: "inline",
-                      onClick: (e) => {
-                        e.stopPropagation();
-                        onClose(e);
-                      },
-                      "aria-label": "Luk panel",
-                      "data-cy": "side-panel-close-button",
-                      children: /* @__PURE__ */ jsx(X, {})
-                    }
-                  )
-                ] })
-              ] }) }),
-              /* @__PURE__ */ jsx("div", { className: styles.content, "data-cy": "details-panel-content", children }),
-              actions && /* @__PURE__ */ jsx("div", { className: styles.actions, children: actions })
-            ] })
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
-}
-
-export { SidePanel };

package/dist/components/overlay/side-panel/SidePanel.module.css

@@ -1,177 +0,0 @@
-.sidePanel {
-  --col-pad: var(--spacing-md);
-
-  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1); /* smooth spring-ish without overshoot */
-
-  /* Shadow + edge */
-  --shadow-opacity: 0.22;
-  --edge-opacity: 0.12;
-
-  box-sizing: border-box;
-  padding: 0;
-  height: 100vh;
-
-  position: fixed;
-  right: 0;
-  top: 0;
-
-  background-color: var(--color-bg-surface);
-  z-index: var(--z-drawer);
-
-  transform: translate3d(100%, 0, 0);
-  transition: transform var(--panel-dur) var(--panel-ease);
-  will-change: transform;
-
-  display: grid;
-  gap: var(--spacing-md);
-  align-items: stretch;
-
-  overflow: hidden;
-  pointer-events: auto;
-
-  /* Make pseudo-elements layer properly */
-  isolation: isolate;
-}
-
-/* “Lift” layer: drop-shadow + edge highlight (both fade in) */
-.sidePanel::before {
-  content: '';
-  position: absolute;
-  inset: 0;
-  pointer-events: none;
-  z-index: -1; /* behind content but within isolated stacking context */
-
-  /* 1) drop-shadow = smoother than animating box-shadow
-     2) edge gradient = premium depth cue */
-  filter: drop-shadow(0 16px 32px rgba(0, 0, 0, var(--shadow-opacity)));
-  opacity: 0;
-
-  /* Edge highlight from the left edge (panel’s leading edge) */
-  background: linear-gradient(
-    90deg,
-    rgba(255, 255, 255, var(--edge-opacity)),
-    rgba(255, 255, 255, 0) 36%
-  );
-
-  transition: opacity var(--panel-dur) var(--panel-ease);
-
-  will-change: opacity;
-}
-
-/* Optional: super subtle “sheen” right as it settles (feels snappy) */
-.sidePanel.open::before {
-  opacity: 1;
-}
-
-.sidePanel.open {
-  transform: translate3d(0, 0, 0);
-}
-
-/* MAIN TRACK WIDTH = content + padding*2 */
-.sidePanel.noDetails {
-  grid-template-columns: calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2));
-  width: calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2));
-}
-
-/* when details show, main track stays the same; panel grows */
-.sidePanel.withDetails {
-  grid-template-columns:
-    calc(var(--side-panel-width, 400px) + (var(--col-pad) * 2))
-    calc(var(--details-width, 420px) + (var(--col-pad) * 2));
-
-  width: calc(
-    (var(--side-panel-width, 400px) + (var(--col-pad) * 2)) +
-      (var(--details-width, 420px) + (var(--col-pad) * 2)) + var(--spacing-md)
-  );
-}
-
-/* columns get the padding */
-.mainCol,
-.detailsCol {
-  box-sizing: border-box;
-  padding: 0 var(--col-pad);
-
-  min-width: 0;
-  min-height: 0;
-
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-md);
-}
-
-.header {
-  padding: var(--spacing-md) 0;
-}
-
-.content {
-  flex: 1;
-  min-height: 0;
-  overflow: auto;
-  font-size: var(--font-size-sm);
-}
-
-.actions {
-  padding: var(--spacing-md) 0;
-  display: flex;
-  justify-content: flex-end;
-  gap: var(--spacing-sm);
-  min-width: 0;
-}
-
-/* details styling */
-.detailsCol {
-  border: 1px solid var(--color-border-subtle);
-  border-radius: var(--border-radius-md);
-  overflow: hidden;
-  background: var(--color-bg-surface);
-}
-
-.detailsHeader {
-  padding: var(--spacing-sm) 0;
-  border-bottom: 1px solid var(--color-border-subtle);
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--spacing-sm);
-}
-
-.detailsTitle {
-  font-weight: 600;
-}
-
-.detailsHeaderActions {
-  display: flex;
-  align-items: center;
-  gap: var(--spacing-sm);
-}
-
-.detailsContent {
-  padding: var(--spacing-md) 0;
-  overflow: auto;
-  min-height: 0;
-  flex: 1 1 auto;
-}
-
-/* Backdrop with a nice fade */
-.backdrop {
-  position: fixed;
-  inset: 0;
-  background-color: rgba(0, 0, 0, 0.45);
-  z-index: var(--z-backdrop-drawer);
-
-  opacity: 0;
-  transition: opacity var(--panel-dur) var(--panel-ease);
-  will-change: opacity;
-}
-
-.backdropOpen {
-  opacity: 1;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .sidePanel,
-  .sidePanel::before,
-  .backdrop {
-    transition: none !important;
-  }
-}

package/dist/components/overlay/side-panel/useSidePanel.cjs

@@ -1,16 +0,0 @@
-'use strict';
-
-var react = require('react');
-
-function useSidePanel(initialOpen = false) {
-  const [isOpen, setIsOpen] = react.useState(initialOpen);
-  const openSidePanel = () => setIsOpen(true);
-  const closeSidePanel = () => setIsOpen(false);
-  return {
-    isOpen,
-    openSidePanel,
-    closeSidePanel
-  };
-}
-
-exports.useSidePanel = useSidePanel;

package/dist/components/overlay/side-panel/useSidePanel.d.ts

@@ -1,5 +0,0 @@
-export declare function useSidePanel(initialOpen?: boolean): {
-    isOpen: boolean;
-    openSidePanel: () => void;
-    closeSidePanel: () => void;
-};

package/dist/components/overlay/side-panel/useSidePanel.js

@@ -1,14 +0,0 @@
-import { useState } from 'react';
-
-function useSidePanel(initialOpen = false) {
-  const [isOpen, setIsOpen] = useState(initialOpen);
-  const openSidePanel = () => setIsOpen(true);
-  const closeSidePanel = () => setIsOpen(false);
-  return {
-    isOpen,
-    openSidePanel,
-    closeSidePanel
-  };
-}
-
-export { useSidePanel };

package/dist/components/overlay/tooltip/Tooltip.cjs

@@ -1,56 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var useTooltipTrigger = require('./useTooltipTrigger');
-
-function mergeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === "function") ref(node);
-      else ref.current = node;
-    }
-  };
-}
-function composeHandlers(childHandler, tooltipHandler) {
-  return (event) => {
-    childHandler == null ? void 0 : childHandler(event);
-    tooltipHandler == null ? void 0 : tooltipHandler(event);
-  };
-}
-function Tooltip({
-  children,
-  content,
-  placement = "top",
-  open,
-  offset = 8,
-  delayOpenMs,
-  delayCloseMs
-}) {
-  var _a;
-  const { triggerProps } = useTooltipTrigger.useTooltipTrigger({
-    content,
-    placement,
-    offset,
-    open,
-    delayOpenMs,
-    delayCloseMs
-  });
-  if (!content) return /* @__PURE__ */ jsxRuntime.jsx(jsxRuntime.Fragment, { children });
-  const child = children;
-  const childProps = child.props;
-  const childRef = (_a = childProps.ref) != null ? _a : child.ref;
-  return react.cloneElement(child, {
-    ...childProps,
-    ref: mergeRefs(childRef, triggerProps.ref),
-    onPointerEnter: composeHandlers(childProps.onPointerEnter, triggerProps.onPointerEnter),
-    onPointerLeave: composeHandlers(childProps.onPointerLeave, triggerProps.onPointerLeave),
-    onPointerDown: composeHandlers(childProps.onPointerDown, triggerProps.onPointerDown),
-    onFocus: composeHandlers(childProps.onFocus, triggerProps.onFocus),
-    onBlur: composeHandlers(childProps.onBlur, triggerProps.onBlur),
-    "aria-describedby": [childProps["aria-describedby"], triggerProps["aria-describedby"]].filter(Boolean).join(" ") || void 0
-  });
-}
-
-exports.Tooltip = Tooltip;

package/dist/components/overlay/tooltip/Tooltip.d.ts

@@ -1,12 +0,0 @@
-import { type ReactElement, type ReactNode } from 'react';
-import { TooltipPlacement } from './TooltipProvider';
-export interface TooltipProps {
-    children: ReactElement;
-    content: ReactNode;
-    placement?: TooltipPlacement;
-    open?: boolean;
-    offset?: number;
-    delayOpenMs?: number;
-    delayCloseMs?: number;
-}
-export declare function Tooltip({ children, content, placement, open, offset, delayOpenMs, delayCloseMs, }: TooltipProps): ReactElement;

package/dist/components/overlay/tooltip/Tooltip.js

@@ -1,54 +0,0 @@
-import { jsx, Fragment } from 'react/jsx-runtime';
-import { cloneElement } from 'react';
-import { useTooltipTrigger } from './useTooltipTrigger';
-
-function mergeRefs(...refs) {
-  return (node) => {
-    for (const ref of refs) {
-      if (!ref) continue;
-      if (typeof ref === "function") ref(node);
-      else ref.current = node;
-    }
-  };
-}
-function composeHandlers(childHandler, tooltipHandler) {
-  return (event) => {
-    childHandler == null ? void 0 : childHandler(event);
-    tooltipHandler == null ? void 0 : tooltipHandler(event);
-  };
-}
-function Tooltip({
-  children,
-  content,
-  placement = "top",
-  open,
-  offset = 8,
-  delayOpenMs,
-  delayCloseMs
-}) {
-  var _a;
-  const { triggerProps } = useTooltipTrigger({
-    content,
-    placement,
-    offset,
-    open,
-    delayOpenMs,
-    delayCloseMs
-  });
-  if (!content) return /* @__PURE__ */ jsx(Fragment, { children });
-  const child = children;
-  const childProps = child.props;
-  const childRef = (_a = childProps.ref) != null ? _a : child.ref;
-  return cloneElement(child, {
-    ...childProps,
-    ref: mergeRefs(childRef, triggerProps.ref),
-    onPointerEnter: composeHandlers(childProps.onPointerEnter, triggerProps.onPointerEnter),
-    onPointerLeave: composeHandlers(childProps.onPointerLeave, triggerProps.onPointerLeave),
-    onPointerDown: composeHandlers(childProps.onPointerDown, triggerProps.onPointerDown),
-    onFocus: composeHandlers(childProps.onFocus, triggerProps.onFocus),
-    onBlur: composeHandlers(childProps.onBlur, triggerProps.onBlur),
-    "aria-describedby": [childProps["aria-describedby"], triggerProps["aria-describedby"]].filter(Boolean).join(" ") || void 0
-  });
-}
-
-export { Tooltip };

package/dist/components/overlay/tooltip/Tooltip.module.css

@@ -1,104 +0,0 @@
-/* Layout neutral wrapper */
-.container {
-  display: contents;
-}
-
-/* Measurable trigger box without forcing full width */
-.trigger {
-  display: inline-flex;
-  align-items: center;
-  max-width: 100%;
-}
-
-.trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-  border-radius: var(--border-radius-default);
-}
-
-/* Bubble */
-.bubble {
-  position: fixed;
-  z-index: var(--z-tooltip);
-  pointer-events: none;
-  background: var(--color-fg-default);
-  color: var(--color-fg-on-strong);
-  font-size: var(--font-size-xs);
-  line-height: var(--line-height-tight);
-  padding: var(--spacing-xxs) var(--spacing-sm);
-  border-radius: var(--border-radius-default);
-
-  /*
-    - Don't let it run wild horizontally
-    - But don't clip: allow wrap
-    - Keep some relation to viewport
-  */
-  max-width: min(360px, calc(100vw - 16px));
-  white-space: normal;
-  overflow-wrap: break-word; /* wrap long words nicely */
-  word-break: normal;
-
-  /*
-    If your tooltips often include URLs/IDs, consider 'anywhere' instead:
-    overflow-wrap: anywhere;
-  */
-
-  /* Optional: nicer shadow than box-shadow for rounded bubble */
-  filter: drop-shadow(0 6px 16px rgba(0, 0, 0, 0.22));
-
-  /* Hidden by default */
-  opacity: 0;
-  visibility: hidden;
-
-  /* Base transform gets overridden by placement rules below */
-  transform: translate3d(0, 0, 0);
-
-  transition:
-    opacity var(--transition-fast),
-    transform var(--transition-fast),
-    visibility 0s linear var(--transition-fast);
-}
-
-.bubble[data-open='true'] {
-  opacity: 1;
-  visibility: visible;
-  transition:
-    opacity var(--transition-fast),
-    transform var(--transition-fast),
-    visibility 0s;
-}
-
-/* Placement-based motion (so it “comes from” the trigger) */
-.bubble[data-placement='top'] {
-  transform: translate3d(0, -6px, 0);
-}
-.bubble[data-placement='bottom'] {
-  transform: translate3d(0, 6px, 0);
-}
-.bubble[data-placement='left'] {
-  transform: translate3d(-6px, 0, 0);
-}
-.bubble[data-placement='right'] {
-  transform: translate3d(6px, 0, 0);
-}
-
-/* Open state resets transform to 0 for all placements */
-.bubble[data-open='true'][data-placement='top'],
-.bubble[data-open='true'][data-placement='bottom'],
-.bubble[data-open='true'][data-placement='left'],
-.bubble[data-open='true'][data-placement='right'] {
-  transform: translate3d(0, 0, 0);
-}
-
-.bubble svg {
-  height: 20px;
-  width: 20px;
-  flex: 0 0 auto;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bubble {
-    transition: none;
-    transform: none;
-  }
-}