@dbcdk/react-components 0.0.167 → 0.0.169

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

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

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

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

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

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

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

@@ -1,24 +0,0 @@
-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 {};