@dbcdk/react-components 0.0.169 → 0.0.171

package/dist/components/split-button/SplitButton.module.css

@@ -0,0 +1,32 @@
+.container {
+  display: inline-flex;
+}
+
+.container > button:first-child {
+  border-start-start-radius: var(--border-radius-default);
+  border-end-start-radius: var(--border-radius-default);
+  border-start-end-radius: 0;
+  border-end-end-radius: 0;
+}
+
+.triggerContainer button {
+  border-start-end-radius: var(--border-radius-default);
+  border-end-end-radius: var(--border-radius-default);
+  border-start-start-radius: 0;
+  border-end-start-radius: 0;
+  padding-block: 0;
+  padding-inline: var(--spacing-xs);
+}
+
+.triggerContainer button {
+  margin-inline-start: -1px;
+}
+.triggerContainer button:not(:hover) {
+  border-inline-start-color: transparent;
+}
+
+.container > button:first-child:focus-visible,
+.triggerContainer button:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}

package/dist/components/split-pane/SplitPane.cjs

@@ -0,0 +1,191 @@
+'use client';
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var SplitPaneContext = require('./provider/SplitPaneContext');
+var styles = require('./SplitPane.module.css');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var styles__default = /*#__PURE__*/_interopDefault(styles);
+
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function SplitPane({
+  children,
+  initialPrimarySize = 300,
+  minPrimarySize = 160,
+  minSecondarySize = 160,
+  direction = "horizontal",
+  showDivider = "hover",
+  gutterSize = 16,
+  storageKey,
+  fillViewport = false
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    SplitPaneContext.SplitPaneProvider,
+    {
+      direction,
+      initialPrimarySize,
+      minPrimarySize,
+      minSecondarySize,
+      storageKey,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        SplitPaneContainer,
+        {
+          showDivider,
+          gutterSize,
+          fillViewport,
+          children
+        }
+      )
+    }
+  );
+}
+function SplitPaneContainer({
+  children,
+  showDivider,
+  gutterSize,
+  fillViewport
+}) {
+  const { direction, primarySize, containerRef } = SplitPaneContext.useSplitPaneContext();
+  const style = react.useMemo(
+    () => ({
+      "--split-pane-primary-size": `${primarySize}px`,
+      "--split-pane-gutter": `${gutterSize}px`
+    }),
+    [primarySize, gutterSize]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: styles__default.default.container,
+      "data-direction": direction,
+      "data-divider": showDivider,
+      "data-fill-viewport": fillViewport,
+      style,
+      children
+    }
+  );
+}
+function SplitPanePrimary({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.primary, children });
+}
+function SplitPaneSecondary({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.secondary, children });
+}
+function SplitPaneGutter() {
+  const {
+    direction,
+    primarySize,
+    setPrimarySize,
+    minPrimarySize,
+    minSecondarySize,
+    containerRef,
+    resetDefault
+  } = SplitPaneContext.useSplitPaneContext();
+  const draggingRef = react.useRef(false);
+  const pointerIdRef = react.useRef(null);
+  const startPosRef = react.useRef(0);
+  const startSizeRef = react.useRef(primarySize);
+  const maxPrimaryRef = react.useRef(Infinity);
+  const getClientPos = react.useCallback(
+    (e) => direction === "horizontal" ? e.clientX : e.clientY,
+    [direction]
+  );
+  const computeClamp = react.useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return { maxPrimary: Infinity, total: 0 };
+    const rect = el.getBoundingClientRect();
+    const total = direction === "horizontal" ? rect.width : rect.height;
+    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize);
+    return { maxPrimary: maxPrimary2, total };
+  }, [containerRef, direction, minPrimarySize, minSecondarySize]);
+  const onPointerDown = react.useCallback(
+    (e) => {
+      const el = containerRef.current;
+      if (!el) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      const { maxPrimary: maxPrimary2 } = computeClamp();
+      maxPrimaryRef.current = maxPrimary2;
+      draggingRef.current = true;
+      pointerIdRef.current = e.pointerId;
+      startPosRef.current = getClientPos(e);
+      startSizeRef.current = primarySize;
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
+    },
+    [computeClamp, containerRef, direction, getClientPos, primarySize]
+  );
+  const onPointerMove = react.useCallback(
+    (e) => {
+      if (!draggingRef.current) return;
+      if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) return;
+      const delta = getClientPos(e) - startPosRef.current;
+      const next = startSizeRef.current + delta;
+      const maxPrimary2 = maxPrimaryRef.current;
+      setPrimarySize(clamp(next, minPrimarySize, maxPrimary2));
+    },
+    [getClientPos, minPrimarySize, setPrimarySize]
+  );
+  const endDrag = react.useCallback(() => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    pointerIdRef.current = null;
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+  const onPointerUp = react.useCallback(() => endDrag(), [endDrag]);
+  const onPointerCancel = react.useCallback(() => endDrag(), [endDrag]);
+  const onKeyDown = react.useCallback(
+    (e) => {
+      const { maxPrimary: maxPrimary2 } = computeClamp();
+      const step = e.shiftKey ? 32 : 8;
+      let next = null;
+      if (direction === "horizontal") {
+        if (e.key === "ArrowLeft") next = primarySize - step;
+        if (e.key === "ArrowRight") next = primarySize + step;
+      } else {
+        if (e.key === "ArrowUp") next = primarySize - step;
+        if (e.key === "ArrowDown") next = primarySize + step;
+      }
+      if (e.key === "Home") next = minPrimarySize;
+      if (e.key === "End") next = maxPrimary2;
+      if (next === null) return;
+      e.preventDefault();
+      setPrimarySize(clamp(next, minPrimarySize, maxPrimary2));
+    },
+    [computeClamp, direction, minPrimarySize, primarySize, setPrimarySize]
+  );
+  const ariaOrientation = direction === "horizontal" ? "vertical" : "horizontal";
+  const [maxPrimary, setMaxPrimary] = react.useState(Infinity);
+  react.useEffect(() => {
+    setMaxPrimary(computeClamp().maxPrimary);
+  }, [computeClamp]);
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.gutter, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      className: styles__default.default.resizer,
+      role: "separator",
+      "aria-orientation": ariaOrientation,
+      "aria-valuemin": Math.round(minPrimarySize),
+      "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : void 0,
+      "aria-valuenow": Math.round(primarySize),
+      tabIndex: 0,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      onDoubleClick: resetDefault,
+      onKeyDown
+    }
+  ) });
+}
+
+exports.SplitPane = SplitPane;
+exports.SplitPaneGutter = SplitPaneGutter;
+exports.SplitPanePrimary = SplitPanePrimary;
+exports.SplitPaneSecondary = SplitPaneSecondary;

package/dist/components/split-pane/SplitPane.d.ts

@@ -0,0 +1,21 @@
+import type { JSX, ReactNode } from 'react';
+import type { SplitDirection } from './provider/SplitPaneContext';
+export interface SplitPaneProps {
+    children: ReactNode;
+    initialPrimarySize?: number;
+    minPrimarySize?: number;
+    minSecondarySize?: number;
+    direction?: SplitDirection;
+    showDivider?: 'hover' | 'always' | 'never';
+    gutterSize?: number;
+    storageKey?: string;
+    fillViewport?: boolean;
+}
+export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, fillViewport, }: SplitPaneProps): JSX.Element;
+export declare function SplitPanePrimary({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+export declare function SplitPaneSecondary({ children }: {
+    children: ReactNode;
+}): JSX.Element;
+export declare function SplitPaneGutter(): JSX.Element;

package/dist/components/split-pane/SplitPane.js

@@ -0,0 +1,182 @@
+'use client';
+import { jsx } from 'react/jsx-runtime';
+import { useMemo, useRef, useCallback, useState, useEffect } from 'react';
+import { SplitPaneProvider, useSplitPaneContext } from './provider/SplitPaneContext';
+import styles from './SplitPane.module.css';
+
+function clamp(n, min, max) {
+  return Math.max(min, Math.min(max, n));
+}
+function SplitPane({
+  children,
+  initialPrimarySize = 300,
+  minPrimarySize = 160,
+  minSecondarySize = 160,
+  direction = "horizontal",
+  showDivider = "hover",
+  gutterSize = 16,
+  storageKey,
+  fillViewport = false
+}) {
+  return /* @__PURE__ */ jsx(
+    SplitPaneProvider,
+    {
+      direction,
+      initialPrimarySize,
+      minPrimarySize,
+      minSecondarySize,
+      storageKey,
+      children: /* @__PURE__ */ jsx(
+        SplitPaneContainer,
+        {
+          showDivider,
+          gutterSize,
+          fillViewport,
+          children
+        }
+      )
+    }
+  );
+}
+function SplitPaneContainer({
+  children,
+  showDivider,
+  gutterSize,
+  fillViewport
+}) {
+  const { direction, primarySize, containerRef } = useSplitPaneContext();
+  const style = useMemo(
+    () => ({
+      "--split-pane-primary-size": `${primarySize}px`,
+      "--split-pane-gutter": `${gutterSize}px`
+    }),
+    [primarySize, gutterSize]
+  );
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: styles.container,
+      "data-direction": direction,
+      "data-divider": showDivider,
+      "data-fill-viewport": fillViewport,
+      style,
+      children
+    }
+  );
+}
+function SplitPanePrimary({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: styles.primary, children });
+}
+function SplitPaneSecondary({ children }) {
+  return /* @__PURE__ */ jsx("div", { className: styles.secondary, children });
+}
+function SplitPaneGutter() {
+  const {
+    direction,
+    primarySize,
+    setPrimarySize,
+    minPrimarySize,
+    minSecondarySize,
+    containerRef,
+    resetDefault
+  } = useSplitPaneContext();
+  const draggingRef = useRef(false);
+  const pointerIdRef = useRef(null);
+  const startPosRef = useRef(0);
+  const startSizeRef = useRef(primarySize);
+  const maxPrimaryRef = useRef(Infinity);
+  const getClientPos = useCallback(
+    (e) => direction === "horizontal" ? e.clientX : e.clientY,
+    [direction]
+  );
+  const computeClamp = useCallback(() => {
+    const el = containerRef.current;
+    if (!el) return { maxPrimary: Infinity, total: 0 };
+    const rect = el.getBoundingClientRect();
+    const total = direction === "horizontal" ? rect.width : rect.height;
+    const maxPrimary2 = Math.max(minPrimarySize, total - minSecondarySize);
+    return { maxPrimary: maxPrimary2, total };
+  }, [containerRef, direction, minPrimarySize, minSecondarySize]);
+  const onPointerDown = useCallback(
+    (e) => {
+      const el = containerRef.current;
+      if (!el) return;
+      e.currentTarget.setPointerCapture(e.pointerId);
+      const { maxPrimary: maxPrimary2 } = computeClamp();
+      maxPrimaryRef.current = maxPrimary2;
+      draggingRef.current = true;
+      pointerIdRef.current = e.pointerId;
+      startPosRef.current = getClientPos(e);
+      startSizeRef.current = primarySize;
+      document.body.style.userSelect = "none";
+      document.body.style.cursor = direction === "horizontal" ? "col-resize" : "row-resize";
+    },
+    [computeClamp, containerRef, direction, getClientPos, primarySize]
+  );
+  const onPointerMove = useCallback(
+    (e) => {
+      if (!draggingRef.current) return;
+      if (pointerIdRef.current !== null && e.pointerId !== pointerIdRef.current) return;
+      const delta = getClientPos(e) - startPosRef.current;
+      const next = startSizeRef.current + delta;
+      const maxPrimary2 = maxPrimaryRef.current;
+      setPrimarySize(clamp(next, minPrimarySize, maxPrimary2));
+    },
+    [getClientPos, minPrimarySize, setPrimarySize]
+  );
+  const endDrag = useCallback(() => {
+    if (!draggingRef.current) return;
+    draggingRef.current = false;
+    pointerIdRef.current = null;
+    document.body.style.cursor = "";
+    document.body.style.userSelect = "";
+  }, []);
+  const onPointerUp = useCallback(() => endDrag(), [endDrag]);
+  const onPointerCancel = useCallback(() => endDrag(), [endDrag]);
+  const onKeyDown = useCallback(
+    (e) => {
+      const { maxPrimary: maxPrimary2 } = computeClamp();
+      const step = e.shiftKey ? 32 : 8;
+      let next = null;
+      if (direction === "horizontal") {
+        if (e.key === "ArrowLeft") next = primarySize - step;
+        if (e.key === "ArrowRight") next = primarySize + step;
+      } else {
+        if (e.key === "ArrowUp") next = primarySize - step;
+        if (e.key === "ArrowDown") next = primarySize + step;
+      }
+      if (e.key === "Home") next = minPrimarySize;
+      if (e.key === "End") next = maxPrimary2;
+      if (next === null) return;
+      e.preventDefault();
+      setPrimarySize(clamp(next, minPrimarySize, maxPrimary2));
+    },
+    [computeClamp, direction, minPrimarySize, primarySize, setPrimarySize]
+  );
+  const ariaOrientation = direction === "horizontal" ? "vertical" : "horizontal";
+  const [maxPrimary, setMaxPrimary] = useState(Infinity);
+  useEffect(() => {
+    setMaxPrimary(computeClamp().maxPrimary);
+  }, [computeClamp]);
+  return /* @__PURE__ */ jsx("div", { className: styles.gutter, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: styles.resizer,
+      role: "separator",
+      "aria-orientation": ariaOrientation,
+      "aria-valuemin": Math.round(minPrimarySize),
+      "aria-valuemax": Number.isFinite(maxPrimary) ? Math.round(maxPrimary) : void 0,
+      "aria-valuenow": Math.round(primarySize),
+      tabIndex: 0,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel,
+      onDoubleClick: resetDefault,
+      onKeyDown
+    }
+  ) });
+}
+
+export { SplitPane, SplitPaneGutter, SplitPanePrimary, SplitPaneSecondary };

package/dist/components/split-pane/SplitPane.module.css

@@ -0,0 +1,118 @@
+.container {
+  display: flex;
+  inline-size: 100%;
+  overflow: hidden;
+  min-inline-size: 0;
+  min-block-size: 0;
+}
+
+.container[data-fill-viewport='true'] {
+  block-size: 100%;
+  max-block-size: 100%;
+  height: 100%;
+  max-height: 100%;
+}
+
+.container[data-direction='horizontal'] {
+  flex-direction: row;
+}
+
+.container[data-direction='vertical'] {
+  flex-direction: column;
+}
+
+/* ===== Primary pane ===== */
+.primary {
+  flex: 0 0 var(--split-pane-primary-size, 300px);
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===== Secondary pane ===== */
+.secondary {
+  flex: 1 1 auto;
+  min-inline-size: 0;
+  min-block-size: 0;
+  overflow: auto;
+  display: flex;
+  flex-direction: column;
+}
+
+/* ===== Gutter (spacing + hit area wrapper) ===== */
+.gutter {
+  position: relative;
+  flex: 0 0 var(--split-pane-gutter, 8px);
+  background: transparent;
+  z-index: 1;
+}
+
+.container[data-direction='vertical'] .gutter {
+  inline-size: 100%;
+  block-size: var(--split-pane-gutter, 8px);
+}
+
+/* ===== Resizer (interaction element) ===== */
+.resizer {
+  position: absolute;
+  inset: 0;
+  cursor: col-resize;
+  user-select: none;
+  touch-action: none;
+  outline: none;
+}
+
+.container[data-direction='vertical'] .resizer {
+  cursor: row-resize;
+}
+
+/* Focus ring for keyboard resizing */
+.resizer:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+
+/* ===== Divider line ===== */
+.resizer::after {
+  content: '';
+  position: absolute;
+  inset-block: 0;
+  inset-inline: 50%;
+  inline-size: var(--border-width-thin);
+  background-color: var(--color-border-subtle);
+  opacity: 0;
+  transform: translateX(-50%);
+  transition:
+    opacity var(--transition-fast) var(--ease-standard),
+    background-color var(--transition-fast) var(--ease-standard);
+}
+
+/* Vertical divider */
+.container[data-direction='vertical'] .resizer::after {
+  inset-inline: 0;
+  inset-block: 50%;
+  inline-size: 100%;
+  block-size: var(--border-width-thin);
+  transform: translateY(-50%);
+}
+
+/* ===== Divider visibility modes ===== */
+.container[data-divider='hover'] .resizer:hover::after,
+.container[data-divider='hover'] .resizer:active::after {
+  opacity: 1;
+  background-color: var(--color-border-strong);
+}
+
+.container[data-divider='always'] .resizer::after {
+  opacity: 1;
+}
+
+.container[data-divider='never'] .resizer::after {
+  display: none;
+}
+
+.container[data-divider='hover'] .resizer:active::after,
+.container[data-divider='always'] .resizer:active::after {
+  background-color: var(--color-brand);
+}

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

@@ -0,0 +1,129 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var React = require('react');
+
+function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
+
+var React__default = /*#__PURE__*/_interopDefault(React);
+
+const SplitPaneContext = React__default.default.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__default.default.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 = React.useRef(null);
+  const [primarySize, setPrimarySize] = React.useState(initialPrimarySize);
+  const [manualPrimarySize, setManualPrimarySize] = React.useState(null);
+  const getMaxPrimary = React.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]);
+  React.useEffect(() => {
+    if (!storageKey) return;
+    const stored = readStoredSize(storageKey);
+    if (stored === null) return;
+    setManualPrimarySize(stored);
+    setPrimarySize(stored);
+  }, [storageKey]);
+  React.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]);
+  React.useEffect(() => {
+    if (!storageKey) return;
+    if (manualPrimarySize === null) {
+      removeStoredSize(storageKey);
+      return;
+    }
+    writeStoredSize(storageKey, manualPrimarySize);
+  }, [manualPrimarySize, storageKey]);
+  const handleSizeChange = React.useCallback((newSize) => {
+    setManualPrimarySize(newSize);
+    setPrimarySize(newSize);
+  }, []);
+  const resetDefault = React.useCallback(() => {
+    setManualPrimarySize(null);
+    const maxPrimary = getMaxPrimary();
+    if (maxPrimary === null) {
+      setPrimarySize(initialPrimarySize);
+      return;
+    }
+    setPrimarySize(clamp(initialPrimarySize, minPrimarySize, maxPrimary));
+  }, [getMaxPrimary, initialPrimarySize, minPrimarySize]);
+  const value = React.useMemo(
+    () => ({
+      direction,
+      primarySize,
+      setPrimarySize: handleSizeChange,
+      resetDefault,
+      minPrimarySize,
+      minSecondarySize,
+      containerRef,
+      storageKey
+    }),
+    [
+      direction,
+      primarySize,
+      handleSizeChange,
+      resetDefault,
+      minPrimarySize,
+      minSecondarySize,
+      storageKey
+    ]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(SplitPaneContext.Provider, { value, children });
+}
+
+exports.SplitPaneContext = SplitPaneContext;
+exports.SplitPaneProvider = SplitPaneProvider;
+exports.useSplitPaneContext = useSplitPaneContext;

package/dist/components/split-pane/provider/SplitPaneContext.d.ts

@@ -0,0 +1,24 @@
+import React from 'react';
+export type SplitDirection = 'horizontal' | 'vertical';
+export interface SplitPaneContextValue {
+    direction: SplitDirection;
+    primarySize: number;
+    setPrimarySize: (newSize: number) => void;
+    minPrimarySize: number;
+    minSecondarySize: number;
+    containerRef: React.RefObject<HTMLDivElement | null>;
+    storageKey?: string;
+    resetDefault: () => void;
+}
+export declare const SplitPaneContext: React.Context<SplitPaneContextValue | null>;
+export declare function useSplitPaneContext(): SplitPaneContextValue;
+type SplitPaneProviderProps = {
+    children: React.ReactNode;
+    direction: SplitDirection;
+    initialPrimarySize: number;
+    minPrimarySize: number;
+    minSecondarySize: number;
+    storageKey?: string;
+};
+export declare function SplitPaneProvider({ children, direction, initialPrimarySize, minPrimarySize, minSecondarySize, storageKey, }: SplitPaneProviderProps): React.ReactNode;
+export {};