@dbcdk/react-components 0.0.5 → 0.0.6

package/dist/components/sidebar/providers/SidebarProvider.cjs

@@ -1,179 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var nestedFiltering = require('../../../utils/arrays/nested-filtering');
-
-const findParentItem = (navItem, items, prevPath) => {
-  var _a;
-  for (const currentItem of items) {
-    let path = prevPath || `.${currentItem.href}`;
-    if ((_a = currentItem.children) == null ? void 0 : _a.some((child) => (child == null ? void 0 : child.href) === navItem)) {
-      return path;
-    } else if (currentItem.children) {
-      path = findParentItem(navItem, currentItem.children, path);
-      if (path) {
-        return path;
-      }
-    }
-  }
-  return "";
-};
-const SidebarContext = react.createContext({
-  defaultExpanded: null,
-  expandedItems: /* @__PURE__ */ new Set(),
-  activeQuery: "",
-  areItemsCollapsed: false,
-  setActiveQuery: () => {
-  },
-  triggerExpandAll: () => {
-  },
-  setItemsCollapsed: () => {
-  },
-  resetExpandAll: () => {
-  },
-  activeLink: "",
-  setActiveLink: () => {
-  },
-  isSidebarCollapsed: false,
-  handleSidebarCollapseChange: () => {
-  }
-});
-const SIDEBAR_COLLAPSED_STORAGE_KEY = "sidebar-is-collapsed";
-const SIDEBAR_BREAKPOINT = 1024;
-const getBreakpoint = (width) => width < SIDEBAR_BREAKPOINT ? "small" : "large";
-function SidebarProvider({
-  children,
-  items,
-  initialCollapsed = false,
-  initialSidebarCollapsed
-}) {
-  const [defaultExpanded, setDefaultExpanded] = react.useState(null);
-  const [activeQuery, setActiveQuery] = react.useState("");
-  const [areItemsCollapsed, setItemsCollapsed] = react.useState(initialCollapsed);
-  const [activeHref, setActiveHref] = react.useState("");
-  const [expandedItems, setExpandedItems] = react.useState(/* @__PURE__ */ new Set());
-  const [isSidebarCollapsed, setSidebarCollapsed] = react.useState(
-    initialSidebarCollapsed != null ? initialSidebarCollapsed : false
-  );
-  const [breakpoint, setBreakpoint] = react.useState(null);
-  const hasExplicitInitialSidebarCollapsed = initialSidebarCollapsed !== void 0;
-  const triggerExpandAll = react.useCallback(() => setDefaultExpanded(true), []);
-  const resetExpandAll = react.useCallback(() => setDefaultExpanded(null), []);
-  const setActiveLink = react.useCallback((href) => setActiveHref(href), []);
-  react.useEffect(() => {
-    const path = findParentItem(activeHref, items);
-    setExpandedItems(new Set(path.split(".").filter(Boolean)));
-  }, [activeHref]);
-  const filteredItems = react.useMemo(() => {
-    return activeQuery ? nestedFiltering.nestedFiltering(items, {
-      keys: ["label", "tags"],
-      includeParents: true,
-      mode: "OR",
-      query: activeQuery
-    }) : items;
-  }, [items, activeQuery]);
-  react.useEffect(() => {
-    if (activeQuery) {
-      triggerExpandAll();
-    }
-  }, [activeQuery, triggerExpandAll]);
-  react.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const currentBreakpoint = getBreakpoint(window.innerWidth);
-    setBreakpoint(currentBreakpoint);
-    if (hasExplicitInitialSidebarCollapsed) {
-      const value2 = initialSidebarCollapsed != null ? initialSidebarCollapsed : false;
-      setSidebarCollapsed(value2);
-      try {
-        window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(value2));
-      } catch {
-      }
-      return;
-    }
-    try {
-      const stored = window.localStorage.getItem(SIDEBAR_COLLAPSED_STORAGE_KEY);
-      if (stored !== null) {
-        const parsed = JSON.parse(stored);
-        setSidebarCollapsed(Boolean(parsed));
-        return;
-      }
-    } catch {
-    }
-    const defaultCollapsed = currentBreakpoint === "small";
-    setSidebarCollapsed(defaultCollapsed);
-  }, [hasExplicitInitialSidebarCollapsed, initialSidebarCollapsed]);
-  const persistCollapsed = react.useCallback((collapsed) => {
-    if (typeof window === "undefined") return;
-    try {
-      window.localStorage.setItem(SIDEBAR_COLLAPSED_STORAGE_KEY, JSON.stringify(collapsed));
-    } catch {
-    }
-  }, []);
-  const handleSidebarCollapseChange = react.useCallback(
-    (collapsed) => {
-      setSidebarCollapsed(collapsed);
-      persistCollapsed(collapsed);
-    },
-    [persistCollapsed]
-  );
-  react.useEffect(() => {
-    if (typeof window === "undefined") return;
-    const onResize = () => {
-      const nextBreakpoint = getBreakpoint(window.innerWidth);
-      setBreakpoint((prev) => {
-        if (prev === null) {
-          return nextBreakpoint;
-        }
-        if (prev === nextBreakpoint) {
-          return prev;
-        }
-        const autoCollapsed = nextBreakpoint === "small";
-        setSidebarCollapsed(autoCollapsed);
-        persistCollapsed(autoCollapsed);
-        return nextBreakpoint;
-      });
-    };
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
-  }, [persistCollapsed]);
-  const value = react.useMemo(
-    () => ({
-      defaultExpanded,
-      expandedItems,
-      filteredItems,
-      activeQuery,
-      areItemsCollapsed,
-      setActiveQuery,
-      triggerExpandAll,
-      resetExpandAll,
-      setItemsCollapsed,
-      activeLink: activeHref,
-      setActiveLink,
-      isSidebarCollapsed,
-      handleSidebarCollapseChange
-    }),
-    [
-      defaultExpanded,
-      expandedItems,
-      filteredItems,
-      activeQuery,
-      areItemsCollapsed,
-      setActiveQuery,
-      triggerExpandAll,
-      resetExpandAll,
-      setItemsCollapsed,
-      activeHref,
-      setActiveLink,
-      isSidebarCollapsed,
-      handleSidebarCollapseChange
-    ]
-  );
-  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value, children });
-}
-function useSidebar() {
-  return react.useContext(SidebarContext);
-}
-
-exports.SidebarProvider = SidebarProvider;
-exports.useSidebar = useSidebar;

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

@@ -1,270 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var SkeletonLoaderItem = require('./skeleton-loader-item/SkeletonLoaderItem');
-
-function SkeletonLoader({
-  type,
-  rows = 3,
-  columns = 3,
-  variant = "default",
-  speedSec = 3
-}) {
-  const line = (width, height = 14, radius = 6) => /* @__PURE__ */ jsxRuntime.jsx(
-    SkeletonLoaderItem.SkeletonLoaderItem,
-    {
-      width,
-      height,
-      radius,
-      variant,
-      speedSec
-    },
-    `${String(width)}-${height}-${String(radius)}-${Math.random()}`
-  );
-  const pills = (count) => Array.from({ length: count }).map((_, i) => /* @__PURE__ */ jsxRuntime.jsx(
-    SkeletonLoaderItem.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__ */ jsxRuntime.jsx(
-    SkeletonLoaderItem.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__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        SkeletonLoaderItem.SkeletonLoaderItem,
-        {
-          height: 20,
-          width: "90%",
-          radius: 6,
-          variant,
-          speedSec,
-          ariaLabel: "Loading table header"
-        },
-        `thead-${i}`
-      ))
-    }
-  );
-  const tableBodyRow = (rowIndex) => /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsx(
-        SkeletonLoaderItem.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__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: 12,
-              alignItems: "center",
-              justifyContent: "flex-start",
-              width: "100%",
-              flexWrap: "wrap"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: 120,
-                  height: 40,
-                  radius: 8,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading button"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: 96,
-                  height: 40,
-                  radius: 8,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading button"
-                }
-              )
-            ]
-          }
-        );
-      }
-      case "card": {
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              flexDirection: "column",
-              gap: 12,
-              width: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: "100%",
-                  height: 160,
-                  radius: 12,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading card media"
-                }
-              ),
-              line("60%", 16, 6),
-              textBlock(3),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", gap: 12, justifyContent: "flex-start" }, children: [
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SkeletonLoaderItem.SkeletonLoaderItem,
-                  {
-                    width: 100,
-                    height: 30,
-                    variant,
-                    speedSec,
-                    ariaLabel: "Loading action"
-                  }
-                ),
-                /* @__PURE__ */ jsxRuntime.jsx(
-                  SkeletonLoaderItem.SkeletonLoaderItem,
-                  {
-                    width: 72,
-                    height: 30,
-                    variant,
-                    speedSec,
-                    ariaLabel: "Loading action"
-                  }
-                )
-              ] })
-            ]
-          }
-        );
-      }
-      case "avatar": {
-        return /* @__PURE__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              gap: 12,
-              alignItems: "center",
-              width: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: 48,
-                  height: 48,
-                  radius: "50%",
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading avatar"
-                }
-              ),
-              /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, flex: 1 }, children: [
-                line("40%", 14),
-                line("25%", 12)
-              ] })
-            ]
-          }
-        );
-      }
-      case "text": {
-        return /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", flexDirection: "column", gap: 10, width: "100%" }, children: textBlock(rows) });
-      }
-      case "table": {
-        return /* @__PURE__ */ jsxRuntime.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__ */ jsxRuntime.jsxs(
-          "div",
-          {
-            style: {
-              display: "flex",
-              alignItems: "center",
-              justifyContent: "space-between",
-              gap: 12,
-              flexWrap: "wrap",
-              width: "100%"
-            },
-            children: [
-              /* @__PURE__ */ jsxRuntime.jsx("div", { style: { display: "flex", gap: 12, flexWrap: "wrap" }, children: pills(columns) }),
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SkeletonLoaderItem.SkeletonLoaderItem,
-                {
-                  width: 240,
-                  height: 30,
-                  variant,
-                  speedSec,
-                  ariaLabel: "Loading"
-                }
-              )
-            ]
-          }
-        );
-      }
-      default:
-        return null;
-    }
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      role: "status",
-      "aria-label": "Loading content",
-      style: { display: "flex", flexDirection: "column", gap: 16, width: "100%" },
-      children: getSkeletonItems()
-    }
-  );
-}
-
-exports.SkeletonLoader = SkeletonLoader;

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

@@ -1,42 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var styles = require('./SkeletonLoaderItem.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-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__ */ jsxRuntime.jsxs(
-    "div",
-    {
-      className: `${styles__default.default.skeletonLoader} ${styles__default.default[variant]}`,
-      role: "status",
-      "aria-label": ariaLabel,
-      "aria-live": "polite",
-      style: {
-        ["--h"]: h,
-        ["--r"]: r,
-        ["--speed"]: `${speedSec}s`,
-        ["--width"]: w
-      },
-      children: [
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.bar, "aria-hidden": "true" }),
-        /* @__PURE__ */ jsxRuntime.jsx("span", { className: "srOnly", children: "Loading\u2026" })
-      ]
-    }
-  );
-}
-
-exports.SkeletonLoaderItem = SkeletonLoaderItem;

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

@@ -1,37 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Button = require('../button/Button');
-var Menu = require('../menu/Menu');
-var Popover = require('../popover/Popover');
-var styles = require('./SplitButton.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function SplitButton({
-  children,
-  options,
-  onClick,
-  icon
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, style: { display: "inline-flex", alignItems: "center" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Button.Button, { onClick, children: [
-      icon,
-      children
-    ] }),
-    /* @__PURE__ */ jsxRuntime.jsx(
-      Popover.Popover,
-      {
-        trigger: (onClick2, icon2) => /* @__PURE__ */ jsxRuntime.jsx("span", { className: styles__default.default.triggerContainer, children: /* @__PURE__ */ jsxRuntime.jsx(Button.Button, { onClick: onClick2, children: icon2 }) }),
-        children: /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu, { children: options.map((option) => /* @__PURE__ */ jsxRuntime.jsx(Menu.Menu.Item, { active: option.active, children: /* @__PURE__ */ jsxRuntime.jsxs("button", { onClick: option.onClick, children: [
-          option.icon,
-          option.label
-        ] }) }, option.label)) })
-      }
-    )
-  ] });
-}
-
-exports.SplitButton = SplitButton;

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

@@ -1,123 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var react = require('react');
-var styles = require('./SplitPane.module.css');
-var SplitPaneContext = require('./provider/SplitPaneContext');
-
-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 = 8,
-  storageKey
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    SplitPaneContext.SplitPaneProvider,
-    {
-      direction,
-      initialPrimarySize,
-      minPrimarySize,
-      minSecondarySize,
-      storageKey,
-      children: /* @__PURE__ */ jsxRuntime.jsx(SplitPaneContainer, { showDivider, gutterSize, children })
-    }
-  );
-}
-function SplitPaneContainer({
-  children,
-  showDivider,
-  gutterSize
-}) {
-  const { direction, primarySize, containerRef } = SplitPaneContext.useSplitPaneContext();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "div",
-    {
-      ref: containerRef,
-      className: styles__default.default.container,
-      "data-direction": direction,
-      "data-divider": showDivider,
-      style: {
-        "--split-pane-primary-size": `${primarySize}px`,
-        "--split-pane-gutter": `${gutterSize}px`
-      },
-      children
-    }
-  );
-}
-function SplitPanePrimary({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.primary, children });
-}
-function SplitPaneGutter() {
-  const { direction, primarySize, setPrimarySize, minPrimarySize, minSecondarySize, containerRef } = SplitPaneContext.useSplitPaneContext();
-  const isDraggingRef = react.useRef(false);
-  const startPosRef = react.useRef(0);
-  const startSizeRef = react.useRef(primarySize);
-  react.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;
-      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 /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.gutter, "aria-hidden": "true", children: /* @__PURE__ */ jsxRuntime.jsx(
-    "span",
-    {
-      className: styles__default.default.resizer,
-      onMouseDown: handleMouseDown,
-      role: "separator",
-      "aria-orientation": direction === "horizontal" ? "vertical" : "horizontal",
-      "aria-valuenow": Math.round(primarySize),
-      tabIndex: 0
-    }
-  ) });
-}
-function SplitPaneSecondary({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles__default.default.secondary, children });
-}
-
-exports.SplitPane = SplitPane;
-exports.SplitPaneGutter = SplitPaneGutter;
-exports.SplitPanePrimary = SplitPanePrimary;
-exports.SplitPaneSecondary = SplitPaneSecondary;