@dbcdk/react-components 0.0.4 → 0.0.6

package/dist/components/skeleton-loader/SkeletonLoader.js

@@ -1,268 +1,70 @@
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { SkeletonLoaderItem } from './skeleton-loader-item/SkeletonLoaderItem';
-
-function SkeletonLoader({
-  type,
-  rows = 3,
-  columns = 3,
-  variant = "default",
-  speedSec = 3
-}) {
-  const line = (width, height = 14, radius = 6) => /* @__PURE__ */ jsx(
-    SkeletonLoaderItem,
-    {
-      width,
-      height,
-      radius,
-      variant,
-      speedSec
-    },
-    `${String(width)}-${height}-${String(radius)}-${Math.random()}`
-  );
-  const pills = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(
-    SkeletonLoaderItem,
-    {
-      width: 80 + i % 3 * 30,
-      height: 30,
-      radius: 6,
-      variant,
-      speedSec,
-      ariaLabel: "Loading filter"
-    },
-    `pill-${i}`
-  ));
-  const textBlock = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsx(
-    SkeletonLoaderItem,
-    {
-      width: i === count - 1 ? "60%" : `${90 - i % 3 * 10}%`,
-      height: 12,
-      radius: 4,
-      variant,
-      speedSec,
-      ariaLabel: "Loading text line"
-    },
-    `text-${i}`
-  ));
-  const tableHeaderRow = () => /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-        gap: 12,
-        alignItems: "center",
-        width: "100%"
-      },
-      children: Array.from({ length: columns }).map((_, i) => /* @__PURE__ */ jsx(
-        SkeletonLoaderItem,
-        {
-          height: 20,
-          width: "90%",
-          radius: 6,
-          variant,
-          speedSec,
-          ariaLabel: "Loading table header"
-        },
-        `thead-${i}`
-      ))
-    }
-  );
-  const tableBodyRow = (rowIndex) => /* @__PURE__ */ jsx(
-    "div",
-    {
-      style: {
-        display: "grid",
-        gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
-        gap: 12,
-        alignItems: "center",
-        width: "100%"
-      },
-      children: Array.from({ length: columns }).map((_, colIndex) => /* @__PURE__ */ jsx(
-        SkeletonLoaderItem,
-        {
-          height: 20,
-          width: colIndex % 3 === 0 ? "93%" : colIndex % 3 === 1 ? "98%" : "90%",
-          radius: 4,
-          variant,
-          speedSec,
-          ariaLabel: "Loading table cell"
-        },
-        `tcell-${rowIndex}-${colIndex}`
-      ))
-    },
-    `trow-${rowIndex}`
-  );
-  const getSkeletonItems = () => {
-    switch (type) {
-      case "button": {
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: 12,
-              alignItems: "center",
-              justifyContent: "flex-start",
-              width: "100%",
-              flexWrap: "wrap"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                SkeletonLoaderItem,
-                {
-                  width: 120,
-                  height: 40,
-                  radius: 8,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading button"
-                }
-              ),
-              /* @__PURE__ */ jsx(
-                SkeletonLoaderItem,
-                {
-                  width: 96,
-                  height: 40,
-                  radius: 8,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading button"
-                }
-              )
-            ]
-          }
-        );
-      }
-      case "card": {
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              gap: 12,
-              width: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                SkeletonLoaderItem,
-                {
-                  width: "100%",
-                  height: 160,
-                  radius: 12,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading card media"
-                }
-              ),
-              line("60%", 16, 6),
-              textBlock(3),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-start" }, children: [
-                /* @__PURE__ */ jsx(
-                  SkeletonLoaderItem,
-                  {
-                    width: 100,
-                    height: 30,
-                    variant,
-                    speedSec,
-                    ariaLabel: "Loading action"
-                  }
-                ),
-                /* @__PURE__ */ jsx(
-                  SkeletonLoaderItem,
-                  {
-                    width: 72,
-                    height: 30,
-                    variant,
-                    speedSec,
-                    ariaLabel: "Loading action"
-                  }
-                )
-              ] })
-            ]
-          }
-        );
-      }
-      case "avatar": {
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: 12,
-              alignItems: "center",
-              width: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsx(
-                SkeletonLoaderItem,
-                {
-                  width: 48,
-                  height: 48,
-                  radius: "50%",
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading avatar"
-                }
-              ),
-              /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, flex: 1 }, children: [
-                line("40%", 14),
-                line("25%", 12)
-              ] })
-            ]
-          }
-        );
-      }
-      case "text": {
-        return /* @__PURE__ */ jsx("div", { style: { display: "flex", flexDirection: "column", gap: 10, width: "100%" }, children: textBlock(rows) });
-      }
-      case "table": {
-        return /* @__PURE__ */ jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 12, width: "100%" }, children: [
-          tableHeaderRow(),
-          Array.from({ length: rows }).map((_, r) => tableBodyRow(r))
-        ] });
-      }
-      case "filterbar": {
-        return /* @__PURE__ */ jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: 12,
-              flexWrap: "wrap",
-              width: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsx("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: pills(columns) }),
-              /* @__PURE__ */ jsx(
-                SkeletonLoaderItem,
-                {
-                  width: 240,
-                  height: 30,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading"
-                }
-              )
-            ]
-          }
-        );
-      }
-      default:
-        return null;
-    }
-  };
-  return /* @__PURE__ */ jsx(
-    "div",
-    {
-      role: "status",
-      "aria-label": "Loading content",
-      style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" },
-      children: getSkeletonItems()
-    }
-  );
+export function SkeletonLoader({ type, rows = 3, columns = 3, variant = 'default', speedSec = 3, }) {
+    const line = (width, height = 14, radius = 6) => (_jsx(SkeletonLoaderItem, { width: width, height: height, radius: radius, variant: variant, speedSec: speedSec }, `${String(width)}-${height}-${String(radius)}-${Math.random()}`));
+    const pills = (count) => Array.from({ length: count }).map((_, i) => (_jsx(SkeletonLoaderItem, { width: 80 + (i % 3) * 30, height: 30, radius: 6, variant: variant, speedSec: speedSec, ariaLabel: "Loading filter" }, `pill-${i}`)));
+    const textBlock = (count) => Array.from({ length: count }).map((_, i) => (_jsx(SkeletonLoaderItem, { width: i === count - 1 ? '60%' : `${90 - (i % 3) * 10}%`, height: 12, radius: 4, variant: variant, speedSec: speedSec, ariaLabel: "Loading text line" }, `text-${i}`)));
+    const tableHeaderRow = () => (_jsx("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            gap: 12,
+            alignItems: 'center',
+            width: '100%',
+        }, children: Array.from({ length: columns }).map((_, i) => (_jsx(SkeletonLoaderItem, { height: 20, width: "90%", radius: 6, variant: variant, speedSec: speedSec, ariaLabel: "Loading table header" }, `thead-${i}`))) }));
+    const tableBodyRow = (rowIndex) => (_jsx("div", { style: {
+            display: 'grid',
+            gridTemplateColumns: `repeat(${columns}, minmax(0, 1fr))`,
+            gap: 12,
+            alignItems: 'center',
+            width: '100%',
+        }, children: Array.from({ length: columns }).map((_, colIndex) => (_jsx(SkeletonLoaderItem, { height: 20, width: colIndex % 3 === 0 ? '93%' : colIndex % 3 === 1 ? '98%' : '90%', radius: 4, variant: variant, speedSec: speedSec, ariaLabel: "Loading table cell" }, `tcell-${rowIndex}-${colIndex}`))) }, `trow-${rowIndex}`));
+    const getSkeletonItems = () => {
+        switch (type) {
+            case 'button': {
+                return (_jsxs("div", { style: {
+                        display: 'flex',
+                        gap: 12,
+                        alignItems: 'center',
+                        justifyContent: 'flex-start',
+                        width: '100%',
+                        flexWrap: 'wrap',
+                    }, children: [_jsx(SkeletonLoaderItem, { width: 120, height: 40, radius: 8, variant: variant, speedSec: speedSec, ariaLabel: "Loading button" }), _jsx(SkeletonLoaderItem, { width: 96, height: 40, radius: 8, variant: variant, speedSec: speedSec, ariaLabel: "Loading button" })] }));
+            }
+            case 'card': {
+                return (_jsxs("div", { style: {
+                        display: 'flex',
+                        flexDirection: 'column',
+                        gap: 12,
+                        width: '100%',
+                    }, children: [_jsx(SkeletonLoaderItem, { width: "100%", height: 160, radius: 12, variant: variant, speedSec: speedSec, ariaLabel: "Loading card media" }), line('60%', 16, 6), textBlock(3), _jsxs("div", { style: { display: 'flex', gap: 12, justifyContent: 'flex-start' }, children: [_jsx(SkeletonLoaderItem, { width: 100, height: 30, variant: variant, speedSec: speedSec, ariaLabel: "Loading action" }), _jsx(SkeletonLoaderItem, { width: 72, height: 30, variant: variant, speedSec: speedSec, ariaLabel: "Loading action" })] })] }));
+            }
+            case 'avatar': {
+                return (_jsxs("div", { style: {
+                        display: 'flex',
+                        gap: 12,
+                        alignItems: 'center',
+                        width: '100%',
+                    }, children: [_jsx(SkeletonLoaderItem, { width: 48, height: 48, radius: "50%", variant: variant, speedSec: speedSec, ariaLabel: "Loading avatar" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 8, flex: 1 }, children: [line('40%', 14), line('25%', 12)] })] }));
+            }
+            case 'text': {
+                return (_jsx("div", { style: { display: 'flex', flexDirection: 'column', gap: 10, width: '100%' }, children: textBlock(rows) }));
+            }
+            case 'table': {
+                return (_jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: 12, width: '100%' }, children: [tableHeaderRow(), Array.from({ length: rows }).map((_, r) => tableBodyRow(r))] }));
+            }
+            case 'filterbar': {
+                return (_jsxs("div", { style: {
+                        display: 'flex',
+                        alignItems: 'center',
+                        justifyContent: 'space-between',
+                        gap: 12,
+                        flexWrap: 'wrap',
+                        width: '100%',
+                    }, children: [_jsx("div", { style: { display: 'flex', gap: 12, flexWrap: 'wrap' }, children: pills(columns) }), _jsx(SkeletonLoaderItem, { width: 240, height: 30, variant: variant, speedSec: speedSec, ariaLabel: "Loading" })] }));
+            }
+            default:
+                return null;
+        }
+    };
+    return (_jsx("div", { role: "status", "aria-label": "Loading content", style: { display: 'flex', flexDirection: 'column', gap: 16, width: '100%' }, children: getSkeletonItems() }));
 }
-
-export { SkeletonLoader };

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.js

@@ -1,36 +1,13 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styles from './SkeletonLoaderItem.module.css';
-
-function SkeletonLoaderItem({
-  height = 14,
-  width = "100%",
-  radius = 6,
-  speedSec = 3,
-  ariaLabel = "Loading",
-  variant = "default"
-}) {
-  const h = typeof height === "number" ? `${height}px` : height;
-  const w = typeof width === "number" ? `${width}px` : width;
-  const r = typeof radius === "number" ? `${radius}px` : radius;
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      className: `${styles.skeletonLoader} ${styles[variant]}`,
-      role: "status",
-      "aria-label": ariaLabel,
-      "aria-live": "polite",
-      style: {
-        ["--h"]: h,
-        ["--r"]: r,
-        ["--speed"]: `${speedSec}s`,
-        ["--width"]: w
-      },
-      children: [
-        /* @__PURE__ */ jsx("span", { className: styles.bar, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsx("span", { className: styles.srOnly, children: "Loading\u2026" })
-      ]
-    }
-  );
+export function SkeletonLoaderItem({ height = 14, width = '100%', radius = 6, speedSec = 3, ariaLabel = 'Loading', variant = 'default', }) {
+    const h = typeof height === 'number' ? `${height}px` : height;
+    const w = typeof width === 'number' ? `${width}px` : width;
+    const r = typeof radius === 'number' ? `${radius}px` : radius;
+    return (_jsxs("div", { className: `${styles.skeletonLoader} ${styles[variant]}`, role: "status", "aria-label": ariaLabel, "aria-live": "polite", style: {
+            ['--h']: h,
+            ['--r']: r,
+            ['--speed']: `${speedSec}s`,
+            ['--width']: w,
+        }, children: [_jsx("span", { className: styles.bar, "aria-hidden": "true" }), _jsx("span", { className: "srOnly", children: "Loading\u2026" })] }));
 }
-
-export { SkeletonLoaderItem };

package/dist/components/skeleton-loader/skeleton-loader-item/SkeletonLoaderItem.module.css

@@ -35,18 +35,6 @@
   border-radius: inherit;
 }
 
-.srOnly {
-  position: absolute;
-  inline-size: 1px;
-  block-size: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0 0 0 0);
-  white-space: nowrap;
-  border: 0;
-}
-
 @keyframes shimmer {
   0% {
     background-position: 200% 0;

package/dist/components/split-button/SplitButton.d.ts

@@ -1,14 +1,16 @@
+import type { ComponentProps, ReactNode } from 'react';
+import { Button } from '../button/Button';
 interface SplitButtonItem {
     label?: string;
     onClick: () => void;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     active?: boolean;
 }
-interface SplitButtonProps {
+interface SplitButtonProps extends ComponentProps<typeof Button> {
     onClick?: () => void;
-    icon?: React.ReactNode;
+    icon?: ReactNode;
     options: SplitButtonItem[];
-    children?: React.ReactNode;
+    children?: ReactNode;
 }
-export declare function SplitButton({ children, options, onClick, icon, }: SplitButtonProps): React.ReactNode;
+export declare function SplitButton({ children, options, onClick, icon, ...rest }: SplitButtonProps): ReactNode;
 export {};

package/dist/components/split-button/SplitButton.js

@@ -1,31 +1,8 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsxs as _jsxs, jsx as _jsx } from "react/jsx-runtime";
+import styles from './SplitButton.module.css';
 import { Button } from '../button/Button';
 import { Menu } from '../menu/Menu';
 import { Popover } from '../popover/Popover';
-import styles from './SplitButton.module.css';
-
-function SplitButton({
-  children,
-  options,
-  onClick,
-  icon
-}) {
-  return /* @__PURE__ */ jsxs("div", { className: styles.container, style: { display: "inline-flex", alignItems: "center" }, children: [
-    /* @__PURE__ */ jsxs(Button, { onClick, children: [
-      icon,
-      children
-    ] }),
-    /* @__PURE__ */ jsx(
-      Popover,
-      {
-        trigger: (onClick2, icon2) => /* @__PURE__ */ jsx("span", { className: styles.triggerContainer, children: /* @__PURE__ */ jsx(Button, { onClick: onClick2, children: icon2 }) }),
-        children: /* @__PURE__ */ jsx(Menu, { children: options.map((option) => /* @__PURE__ */ jsx(Menu.Item, { active: option.active, children: /* @__PURE__ */ jsxs("button", { onClick: option.onClick, children: [
-          option.icon,
-          option.label
-        ] }) }, option.label)) })
-      }
-    )
-  ] });
+export function SplitButton({ children, options, onClick, icon, ...rest }) {
+    return (_jsxs("div", { className: styles.container, style: { display: 'inline-flex', alignItems: 'center' }, children: [_jsxs(Button, { ...rest, onClick: onClick, children: [icon, children] }), _jsx(Popover, { trigger: (handleClick, icon) => (_jsx("span", { className: styles.triggerContainer, children: _jsx(Button, { ...rest, onClick: handleClick, children: icon }) })), children: _jsx(Menu, { children: options.map(option => (_jsx(Menu.Item, { active: option.active, children: _jsxs("button", { onClick: option.onClick, children: [option.icon, option.label] }) }, option.label))) }) })] }));
 }
-
-export { SplitButton };

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

@@ -0,0 +1,34 @@
+import React from 'react';
+import { SplitDirection } from './provider/SplitPaneContext';
+interface SplitPaneProps {
+    children: React.ReactNode;
+    initialPrimarySize?: number;
+    minPrimarySize?: number;
+    minSecondarySize?: number;
+    direction?: SplitDirection;
+    showDivider?: 'hover' | 'always' | 'never';
+    /**
+     * Gutter size (px). This is the space between panes and contains the resizer hit area.
+     * Example: 8 => 4px breathing room on each side if the divider line is centered.
+     */
+    gutterSize?: number;
+    /**
+     * If provided, primary size is persisted per key in localStorage.
+     * Only SplitPanes sharing the same key will share size.
+     */
+    storageKey?: string;
+}
+export declare function SplitPane({ children, initialPrimarySize, minPrimarySize, minSecondarySize, direction, showDivider, gutterSize, storageKey, }: SplitPaneProps): React.ReactNode;
+/**
+ * IMPORTANT:
+ * This component now renders ONLY the primary content (scrollable).
+ * The resizer lives in a dedicated <SplitPaneGutter /> so it never overlaps scrollbars.
+ */
+export declare function SplitPanePrimary({ children }: {
+    children: React.ReactNode;
+}): React.ReactNode;
+export declare function SplitPaneGutter(): React.ReactNode;
+export declare function SplitPaneSecondary({ children }: {
+    children: React.ReactNode;
+}): React.ReactNode;
+export {};

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

@@ -0,0 +1,78 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useRef } 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));
+}
+export function SplitPane({ children, initialPrimarySize = 300, minPrimarySize = 160, minSecondarySize = 160, direction = 'horizontal', showDivider = 'hover', gutterSize = 8, storageKey, }) {
+    return (_jsx(SplitPaneProvider, { direction: direction, initialPrimarySize: initialPrimarySize, minPrimarySize: minPrimarySize, minSecondarySize: minSecondarySize, storageKey: storageKey, children: _jsx(SplitPaneContainer, { showDivider: showDivider, gutterSize: gutterSize, children: children }) }));
+}
+function SplitPaneContainer({ children, showDivider, gutterSize, }) {
+    const { direction, primarySize, containerRef } = useSplitPaneContext();
+    return (_jsx("div", { ref: containerRef, className: styles.container, "data-direction": direction, "data-divider": showDivider, style: {
+            '--split-pane-primary-size': `${primarySize}px`,
+            '--split-pane-gutter': `${gutterSize}px`,
+        }, children: children }));
+}
+/**
+ * IMPORTANT:
+ * This component now renders ONLY the primary content (scrollable).
+ * The resizer lives in a dedicated <SplitPaneGutter /> so it never overlaps scrollbars.
+ */
+export function SplitPanePrimary({ children }) {
+    return _jsx("div", { className: styles.primary, children: children });
+}
+export function SplitPaneGutter() {
+    const { direction, primarySize, setPrimarySize, minPrimarySize, minSecondarySize, containerRef } = useSplitPaneContext();
+    const isDraggingRef = useRef(false);
+    const startPosRef = useRef(0);
+    const startSizeRef = useRef(primarySize);
+    useEffect(() => {
+        if (!window) {
+            return;
+        }
+        const onMove = (e) => {
+            if (!isDraggingRef.current)
+                return;
+            const el = containerRef.current;
+            if (!el)
+                return;
+            const rect = el.getBoundingClientRect();
+            const total = direction === 'horizontal' ? rect.width : rect.height;
+            const clientPos = direction === 'horizontal' ? e.clientX : e.clientY;
+            const delta = clientPos - startPosRef.current;
+            // Note: total includes gutter. That's fine because max clamps against secondary min.
+            const next = startSizeRef.current + delta;
+            const maxPrimary = Math.max(minPrimarySize, total - minSecondarySize);
+            setPrimarySize(clamp(next, minPrimarySize, maxPrimary));
+        };
+        const onUp = () => {
+            if (!isDraggingRef.current)
+                return;
+            isDraggingRef.current = false;
+            document.body.style.cursor = '';
+            document.body.style.userSelect = '';
+        };
+        window.addEventListener('mousemove', onMove);
+        window.addEventListener('mouseup', onUp);
+        return () => {
+            if (window) {
+                window.removeEventListener('mousemove', onMove);
+                window.removeEventListener('mouseup', onUp);
+            }
+        };
+    }, [containerRef, direction, minPrimarySize, minSecondarySize, setPrimarySize]);
+    const handleMouseDown = (event) => {
+        isDraggingRef.current = true;
+        startPosRef.current = direction === 'horizontal' ? event.clientX : event.clientY;
+        startSizeRef.current = primarySize;
+        document.body.style.cursor = direction === 'horizontal' ? 'col-resize' : 'row-resize';
+        document.body.style.userSelect = 'none';
+    };
+    return (_jsx("div", { className: styles.gutter, "aria-hidden": "true", children: _jsx("span", { className: styles.resizer, onMouseDown: handleMouseDown, role: "separator", "aria-orientation": direction === 'horizontal' ? 'vertical' : 'horizontal', "aria-valuenow": Math.round(primarySize), tabIndex: 0 }) }));
+}
+export function SplitPaneSecondary({ children }) {
+    return _jsx("div", { className: styles.secondary, children: children });
+}