@dbcdk/react-components 0.0.5 → 0.0.7

package/dist/components/tooltip/Tooltip.js

@@ -1,177 +0,0 @@
-import { jsxs, jsx } from 'react/jsx-runtime';
-import { useId, useRef, useState, useEffect, useLayoutEffect, useMemo } from 'react';
-import { createPortal } from 'react-dom';
-import styles from './Tooltip.module.css';
-
-const VIEWPORT_PADDING = 8;
-function clamp(n, min, max) {
-  return Math.max(min, Math.min(n, max));
-}
-function computePosition(args) {
-  const { triggerRect, bubbleRect, placement, offset } = args;
-  switch (placement) {
-    case "top":
-      return {
-        left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
-        top: triggerRect.top - bubbleRect.height - offset
-      };
-    case "bottom":
-      return {
-        left: triggerRect.left + triggerRect.width / 2 - bubbleRect.width / 2,
-        top: triggerRect.bottom + offset
-      };
-    case "left":
-      return {
-        left: triggerRect.left - bubbleRect.width - offset,
-        top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2
-      };
-    case "right":
-      return {
-        left: triggerRect.right + offset,
-        top: triggerRect.top + triggerRect.height / 2 - bubbleRect.height / 2
-      };
-  }
-}
-function fitsViewport(pos, bubbleRect) {
-  const vw = window.innerWidth;
-  const vh = window.innerHeight;
-  const leftOk = pos.left >= VIEWPORT_PADDING;
-  const rightOk = pos.left + bubbleRect.width <= vw - VIEWPORT_PADDING;
-  const topOk = pos.top >= VIEWPORT_PADDING;
-  const bottomOk = pos.top + bubbleRect.height <= vh - VIEWPORT_PADDING;
-  return leftOk && rightOk && topOk && bottomOk;
-}
-function flippedPlacement(p) {
-  if (p === "top") return "bottom";
-  if (p === "bottom") return "top";
-  if (p === "left") return "right";
-  return "left";
-}
-const Tooltip = ({
-  children,
-  content,
-  placement = "top",
-  className,
-  open,
-  flip = true,
-  offset = 8,
-  ...rest
-}) => {
-  const id = useId();
-  const wrapperRef = useRef(null);
-  const bubbleRef = useRef(null);
-  const [internalOpen, setInternalOpen] = useState(false);
-  const [coords, setCoords] = useState({
-    top: 0,
-    left: 0,
-    placement,
-    visible: false
-  });
-  const isControlled = open !== void 0;
-  const isOpen = isControlled ? !!open : internalOpen;
-  useEffect(() => {
-    setCoords((c) => ({ ...c, placement }));
-  }, [placement]);
-  const recompute = () => {
-    const wrapper = wrapperRef.current;
-    const bubble = bubbleRef.current;
-    if (!wrapper || !bubble) return;
-    const triggerRect = wrapper.getBoundingClientRect();
-    const bubbleRect = bubble.getBoundingClientRect();
-    const candidates = flip ? [placement, flippedPlacement(placement)] : [placement];
-    let chosen = candidates[0];
-    let pos = computePosition({ triggerRect, bubbleRect, placement: chosen, offset });
-    if (flip && !fitsViewport(pos, bubbleRect) && candidates.length > 1) {
-      const alt = candidates[1];
-      const altPos = computePosition({ triggerRect, bubbleRect, placement: alt, offset });
-      if (fitsViewport(altPos, bubbleRect)) {
-        chosen = alt;
-        pos = altPos;
-      }
-    }
-    const vw = window.innerWidth;
-    const vh = window.innerHeight;
-    const clampedLeft = clamp(pos.left, VIEWPORT_PADDING, vw - bubbleRect.width - VIEWPORT_PADDING);
-    const clampedTop = clamp(pos.top, VIEWPORT_PADDING, vh - bubbleRect.height - VIEWPORT_PADDING);
-    setCoords({
-      left: clampedLeft,
-      top: clampedTop,
-      placement: chosen,
-      visible: true
-    });
-  };
-  useLayoutEffect(() => {
-    if (!isOpen) {
-      setCoords((c) => ({ ...c, visible: false }));
-      return;
-    }
-    const raf = requestAnimationFrame(() => recompute());
-    const onResize = () => recompute();
-    const onScroll = () => recompute();
-    window.addEventListener("resize", onResize);
-    window.addEventListener("scroll", onScroll, { passive: true, capture: true });
-    return () => {
-      cancelAnimationFrame(raf);
-      window.removeEventListener("resize", onResize);
-      window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("scroll", onScroll, true);
-      window.removeEventListener("scroll", onScroll);
-    };
-  }, [isOpen, placement, flip, offset, content]);
-  const onMouseEnter = () => {
-    if (!isControlled) setInternalOpen(true);
-  };
-  const onMouseLeave = () => {
-    if (!isControlled) setInternalOpen(false);
-  };
-  const onFocusIn = () => {
-    if (!isControlled) setInternalOpen(true);
-  };
-  const onFocusOut = () => {
-    if (!isControlled) setInternalOpen(false);
-  };
-  const rootClass = useMemo(
-    () => [styles.container, className].filter(Boolean).join(" "),
-    [className]
-  );
-  const [mounted, setMounted] = useState(false);
-  useEffect(() => setMounted(true), []);
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      ref: wrapperRef,
-      className: rootClass,
-      onMouseEnter,
-      onMouseLeave,
-      onFocusCapture: onFocusIn,
-      onBlurCapture: onFocusOut,
-      ...rest,
-      children: [
-        /* @__PURE__ */ jsx("div", { className: styles.trigger, "aria-describedby": id, tabIndex: 0, children }),
-        mounted && isOpen ? createPortal(
-          /* @__PURE__ */ jsx(
-            "div",
-            {
-              ref: bubbleRef,
-              id,
-              role: "tooltip",
-              className: styles.bubble,
-              "data-open": coords.visible ? "true" : "false",
-              "data-placement": coords.placement,
-              style: {
-                top: coords.top,
-                left: coords.left,
-                visibility: coords.visible ? "visible" : "hidden"
-              },
-              "aria-hidden": !coords.visible,
-              children: content
-            }
-          ),
-          document.body
-        ) : null
-      ]
-    }
-  );
-};
-
-export { Tooltip };

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

@@ -1,66 +0,0 @@
-.container {
-  display: inline-flex;
-}
-
-.trigger {
-  width: 100%;
-}
-.trigger:focus-visible {
-  outline: none;
-  box-shadow: var(--focus-ring);
-  border-radius: var(--border-radius-default);
-}
-
-.bubble {
-  position: fixed;
-  background: var(--color-fg-default);
-  color: var(--color-fg-on-strong);
-  font-size: var(--font-size-xs);
-  padding: var(--spacing-xxs) var(--spacing-sm);
-  border-radius: var(--border-radius-default);
-  line-height: var(--line-height-tight);
-  white-space: nowrap;
-  z-index: var(--z-tooltip);
-  pointer-events: none;
-
-  opacity: 0;
-  transform: translateY(-6px);
-  transition:
-    opacity var(--transition-fast),
-    transform var(--transition-fast);
-}
-
-.bubble[data-open='true'] {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-.bubble[data-placement='bottom'] {
-  transform: translateY(6px);
-}
-.bubble[data-placement='bottom'][data-open='true'] {
-  transform: translateY(0);
-}
-
-.bubble[data-placement='left'],
-.bubble[data-placement='right'] {
-  transform: translateX(6px);
-}
-.bubble[data-placement='left'] {
-  transform: translateX(-6px);
-}
-.bubble[data-placement='left'][data-open='true'],
-.bubble[data-placement='right'][data-open='true'] {
-  transform: translateX(0);
-}
-
-.bubble svg {
-  height: 20px;
-  width: 20px;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .bubble {
-    transition: none;
-  }
-}

package/dist/components/user-display/UserDisplay.cjs

@@ -1,28 +0,0 @@
-'use strict';
-
-var jsxRuntime = require('react/jsx-runtime');
-var Avatar = require('../avatar/Avatar');
-var styles = require('./UserDisplay.module.css');
-
-function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
-
-var styles__default = /*#__PURE__*/_interopDefault(styles);
-
-function UserDisplay({
-  id,
-  name,
-  email,
-  role,
-  avatarUrl
-}) {
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.container, children: [
-    /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx(Avatar.Avatar, { imgSrc: avatarUrl, imgAlt: name, fullName: name, size: "xl" }) }),
-    /* @__PURE__ */ jsxRuntime.jsxs("div", { className: styles__default.default.userInfo, children: [
-      /* @__PURE__ */ jsxRuntime.jsx("h4", { children: name }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: email }),
-      /* @__PURE__ */ jsxRuntime.jsx("p", { children: role })
-    ] })
-  ] });
-}
-
-exports.UserDisplay = UserDisplay;

package/dist/constants/severity.cjs

@@ -1,21 +0,0 @@
-'use strict';
-
-const SeverityBgColor = {
-  neutral: "var(--color-neutral-strong)",
-  brand: "var(--color-brand)",
-  success: "var(--color-status-success)",
-  error: "var(--color-status-error)",
-  info: "var(--color-status-info)",
-  warning: "var(--color-status-warning)"
-};
-const SeverityTextColor = {
-  neutral: "var(--color-neutral-strong-fg)",
-  brand: "var(--color-fg-on-brand)",
-  success: "var(--color-status-success-fg)",
-  error: "var(--color-status-error-fg)",
-  info: "var(--color-status-info-fg)",
-  warning: "var(--color-status-warning-fg)"
-};
-
-exports.SeverityBgColor = SeverityBgColor;
-exports.SeverityTextColor = SeverityTextColor;

package/dist/constants/severity.types.cjs

@@ -1,2 +0,0 @@
-'use strict';
-

package/dist/constants/sizes.cjs

@@ -1,11 +0,0 @@
-'use strict';
-
-const sizes = {
-  xs: "var(--component-size-xs)",
-  sm: "var(--component-size-sm)",
-  md: "var(--component-size-md)",
-  lg: "var(--component-size-lg)",
-  xl: "var(--component-size-xl)"
-};
-
-exports.sizes = sizes;

package/dist/hooks/usePagination.cjs

@@ -1,88 +0,0 @@
-'use strict';
-
-var react = require('react');
-
-function clamp(n, min, max) {
-  return Math.max(min, Math.min(max, n));
-}
-function usePagination({
-  data = [],
-  skip = 0,
-  take = 10,
-  state,
-  onStateChange,
-  resetOnDataChange = false
-}) {
-  const isControlled = state != null;
-  const [uncontrolled, setUncontrolled] = react.useState(() => ({
-    skip: Math.max(0, skip),
-    take: Math.max(1, take)
-  }));
-  const didInitRef = react.useRef(false);
-  react.useEffect(() => {
-    if (isControlled) return;
-    if (!didInitRef.current) {
-      didInitRef.current = true;
-      return;
-    }
-    setUncontrolled((prev) => ({
-      skip: prev.skip,
-      take: Math.max(1, take)
-    }));
-  }, [isControlled, take]);
-  const paginationState = isControlled ? state : uncontrolled;
-  const totalCount = data.length;
-  const safeTake = Math.max(1, paginationState.take);
-  const maxSkip = Math.max(
-    0,
-    totalCount === 0 ? 0 : Math.floor((totalCount - 1) / safeTake) * safeTake
-  );
-  const safeSkip = clamp(Math.max(0, paginationState.skip), 0, maxSkip);
-  const setPagination = react.useCallback(
-    (next) => {
-      const normalized = {
-        take: Math.max(1, next.take),
-        skip: Math.max(0, next.skip)
-      };
-      if (isControlled) onStateChange == null ? void 0 : onStateChange(normalized);
-      else setUncontrolled(normalized);
-    },
-    [isControlled, onStateChange]
-  );
-  const onPageChange = react.useCallback(
-    (pageEvent) => {
-      const nextTake = Math.max(1, pageEvent.take);
-      const nextSkip = Math.max(0, (pageEvent.page - 1) * nextTake);
-      setPagination({ skip: nextSkip, take: nextTake });
-    },
-    [setPagination]
-  );
-  const resetPage = react.useCallback(() => {
-    setPagination({ skip: 0, take: safeTake });
-  }, [setPagination, safeTake]);
-  react.useEffect(() => {
-    if (!resetOnDataChange) return;
-    resetPage();
-  }, [resetOnDataChange, data]);
-  const paginatedData = react.useMemo(() => {
-    return data.slice(safeSkip, safeSkip + safeTake);
-  }, [data, safeSkip, safeTake]);
-  const page = react.useMemo(() => Math.floor(safeSkip / safeTake) + 1, [safeSkip, safeTake]);
-  react.useEffect(() => {
-    if (isControlled) return;
-    if (safeSkip !== paginationState.skip) {
-      setUncontrolled((prev) => ({ ...prev, skip: safeSkip }));
-    }
-  }, [isControlled, safeSkip, paginationState.skip]);
-  return {
-    paginatedData,
-    paginationState: { skip: safeSkip, take: safeTake },
-    onPageChange,
-    setPagination,
-    resetPage,
-    page,
-    totalCount
-  };
-}
-
-exports.usePagination = usePagination;

package/dist/hooks/useSorting.cjs

@@ -1,118 +0,0 @@
-'use strict';
-
-var react = require('react');
-
-function defaultCompare(a, b, dir, nulls) {
-  const aNull = a == null;
-  const bNull = b == null;
-  if (aNull || bNull) {
-    if (aNull && bNull) return 0;
-    const order = nulls === "first" ? -1 : 1;
-    return aNull ? order : -order;
-  }
-  if (a instanceof Date && b instanceof Date) {
-    const diff2 = a.getTime() - b.getTime();
-    return dir === "asc" ? diff2 : -diff2;
-  }
-  if (typeof a === "number" && typeof b === "number") {
-    const diff2 = a - b;
-    return dir === "asc" ? diff2 : -diff2;
-  }
-  if (typeof a === "boolean" && typeof b === "boolean") {
-    const diff2 = Number(a) - Number(b);
-    return dir === "asc" ? diff2 : -diff2;
-  }
-  const aStr = String(a);
-  const bStr = String(b);
-  const diff = aStr.localeCompare(bStr, void 0, { numeric: true, sensitivity: "base" });
-  return dir === "asc" ? diff : -diff;
-}
-function stableSort(arr, cmp) {
-  return arr.map((item, idx) => ({ item, idx })).sort((x, y) => {
-    const c = cmp(x.item, y.item);
-    return c !== 0 ? c : x.idx - y.idx;
-  }).map((x) => x.item);
-}
-function useSorting({
-  data = [],
-  sortBy = null,
-  sortDirection = "asc",
-  state,
-  onStateChange,
-  columnComparators = {},
-  nulls = "last",
-  allowUnsort = true,
-  resetOnDataChange = false
-}) {
-  const isControlled = state != null;
-  const [uncontrolled, setUncontrolled] = react.useState(() => ({
-    sortBy,
-    sortDirection
-  }));
-  const sortState = isControlled ? state : uncontrolled;
-  const setSort = react.useCallback(
-    (next) => {
-      var _a, _b;
-      const normalized = {
-        sortBy: (_a = next.sortBy) != null ? _a : null,
-        sortDirection: (_b = next.sortDirection) != null ? _b : null
-      };
-      if (isControlled) onStateChange == null ? void 0 : onStateChange(normalized);
-      else setUncontrolled(normalized);
-    },
-    [isControlled, onStateChange]
-  );
-  const clearSort = react.useCallback(() => setSort({ sortBy: null, sortDirection: null }), [setSort]);
-  const onSortChange = react.useCallback(
-    (e) => {
-      var _a, _b;
-      const nextSortBy = (_a = e.sortBy) != null ? _a : null;
-      setSort(sortState);
-      const current = sortState;
-      if (nextSortBy == null) {
-        return clearSort();
-      }
-      if (current.sortBy === nextSortBy) {
-        const nextDir = current.sortDirection === "asc" ? "desc" : allowUnsort ? null : "asc";
-        return setSort({ sortBy: nextSortBy, sortDirection: nextDir });
-      }
-      return setSort({
-        sortBy: nextSortBy,
-        sortDirection: (_b = e.sortDirection) != null ? _b : "asc"
-      });
-    },
-    [allowUnsort, clearSort, setSort, sortState]
-  );
-  const didInitRef = react.useRef(false);
-  react.useEffect(() => {
-    if (!resetOnDataChange) return;
-    if (!didInitRef.current) {
-      didInitRef.current = true;
-      return;
-    }
-    clearSort();
-  }, [resetOnDataChange, data]);
-  const sortedData = react.useMemo(() => {
-    const { sortBy: sb, sortDirection: dir } = sortState;
-    if (!sb || !dir) return data;
-    const custom = columnComparators[sb];
-    const cmp = (a, b) => {
-      if (custom) return custom(a, b, dir);
-      const av = a[sb];
-      const bv = b[sb];
-      return defaultCompare(av, bv, dir, nulls);
-    };
-    return stableSort(data, cmp);
-  }, [data, sortState, columnComparators, nulls]);
-  const setSortRef = react.useRef(setSort);
-  setSortRef.current = setSort;
-  return {
-    sortedData,
-    sortState,
-    onSortChange,
-    setSort,
-    clearSort
-  };
-}
-
-exports.useSorting = useSorting;

package/dist/hooks/useTableData.cjs

@@ -1,52 +0,0 @@
-'use strict';
-
-var react = require('react');
-var usePagination = require('./usePagination');
-var useSorting = require('./useSorting');
-
-function useTableData({
-  data = [],
-  pagination,
-  sorting,
-  resetPageOnSortChange = true
-}) {
-  var _a, _b, _c, _d, _e, _f;
-  const s = useSorting.useSorting({
-    data,
-    sortBy: (_a = sorting == null ? void 0 : sorting.sortBy) != null ? _a : null,
-    sortDirection: (_b = sorting == null ? void 0 : sorting.direction) != null ? _b : null,
-    state: sorting == null ? void 0 : sorting.state,
-    onStateChange: sorting == null ? void 0 : sorting.onStateChange,
-    columnComparators: sorting == null ? void 0 : sorting.columnComparators,
-    nulls: (_c = sorting == null ? void 0 : sorting.nulls) != null ? _c : "last",
-    allowUnsort: (_d = sorting == null ? void 0 : sorting.allowUnsort) != null ? _d : true
-  });
-  const p = usePagination.usePagination({
-    data: s.sortedData,
-    skip: (_e = pagination == null ? void 0 : pagination.skip) != null ? _e : 0,
-    take: (_f = pagination == null ? void 0 : pagination.take) != null ? _f : 10,
-    state: pagination == null ? void 0 : pagination.state,
-    onStateChange: pagination == null ? void 0 : pagination.onStateChange
-  });
-  react.useEffect(() => {
-    if (!resetPageOnSortChange) return;
-    p.resetPage();
-  }, [resetPageOnSortChange, s.sortState.sortBy, s.sortState.sortDirection]);
-  const rows = react.useMemo(() => p.paginatedData, [p.paginatedData]);
-  return {
-    rows,
-    totalCount: s.sortedData.length,
-    pagination: {
-      state: p.paginationState,
-      onPageChange: p.onPageChange,
-      resetPage: p.resetPage
-    },
-    sorting: {
-      state: s.sortState,
-      onSortChange: s.onSortChange,
-      clearSort: s.clearSort
-    }
-  };
-}
-
-exports.useTableData = useTableData;

package/dist/hooks/useTableSelection.cjs

@@ -1,130 +0,0 @@
-'use strict';
-
-var react = require('react');
-
-function useTableSelection({
-  storageKey,
-  items,
-  getId,
-  initialSelectedIds = /* @__PURE__ */ new Set(),
-  totalItems,
-  onSelectionChange,
-  selectionMode = "single"
-}) {
-  const [selectedIds, setSelectedIds] = react.useState(initialSelectedIds);
-  const [selectedItemMap, setSelectedItemMap] = react.useState(() => /* @__PURE__ */ new Map());
-  const itemsById = react.useMemo(() => {
-    const m = /* @__PURE__ */ new Map();
-    for (const item of items) m.set(getId(item), item);
-    return m;
-  }, [items, getId]);
-  react.useEffect(() => {
-    const stored = window.localStorage.getItem(storageKey);
-    if (!stored) {
-      setSelectedIds(initialSelectedIds);
-      return;
-    }
-    try {
-      const parsed = JSON.parse(stored);
-      setSelectedIds(new Set(parsed));
-    } catch {
-      setSelectedIds(initialSelectedIds);
-    }
-  }, [storageKey]);
-  react.useEffect(() => {
-    setSelectedItemMap((prev) => {
-      const next = /* @__PURE__ */ new Map();
-      for (const id of selectedIds) {
-        const item = itemsById.get(id);
-        if (item !== void 0) next.set(id, item);
-      }
-      if (next.size === prev.size) {
-        let same = true;
-        for (const [id, item] of next) {
-          if (prev.get(id) !== item) {
-            same = false;
-            break;
-          }
-        }
-        if (same) return prev;
-      }
-      return next;
-    });
-  }, [selectedIds, itemsById]);
-  const selectedItems = react.useMemo(() => Array.from(selectedItemMap.values()), [selectedItemMap]);
-  const allSelected = react.useMemo(() => {
-    if (typeof totalItems !== "number") return false;
-    return totalItems > 0 && selectedIds.size === totalItems;
-  }, [selectedIds, totalItems]);
-  const anySelected = react.useMemo(() => selectedIds.size > 0, [selectedIds]);
-  react.useEffect(() => {
-    window.localStorage.setItem(storageKey, JSON.stringify(Array.from(selectedIds)));
-    onSelectionChange == null ? void 0 : onSelectionChange({ selectedIds, selectedItems });
-  }, [selectedIds, selectedItems, storageKey, onSelectionChange]);
-  const toggleId = react.useCallback(
-    (id) => {
-      setSelectedIds((prevIds) => {
-        const nextIds = new Set(prevIds);
-        const isSelected = nextIds.has(id);
-        if (isSelected) {
-          nextIds.delete(id);
-        } else {
-          if (selectionMode === "single") nextIds.clear();
-          nextIds.add(id);
-        }
-        return nextIds;
-      });
-      setSelectedItemMap((prevMap) => {
-        const nextMap = new Map(prevMap);
-        const isSelected = nextMap.has(id);
-        if (isSelected) {
-          nextMap.delete(id);
-        } else {
-          if (selectionMode === "single") nextMap.clear();
-          const item = itemsById.get(id);
-          if (item !== void 0) nextMap.set(id, item);
-        }
-        return nextMap;
-      });
-    },
-    [itemsById, selectionMode]
-  );
-  const toggleItem = react.useCallback(
-    (item) => {
-      toggleId(getId(item));
-    },
-    [toggleId, getId]
-  );
-  const toggleAll = react.useCallback(
-    (selected) => {
-      if (!selected) {
-        clearSelection();
-      } else {
-        const nextIds = /* @__PURE__ */ new Set();
-        for (const item of items) {
-          nextIds.add(getId(item));
-        }
-        setSelectedIds(nextIds);
-        return nextIds;
-      }
-    },
-    [allSelected, getId, items]
-  );
-  const clearSelection = react.useCallback(() => {
-    setSelectedIds(/* @__PURE__ */ new Set());
-    setSelectedItemMap(/* @__PURE__ */ new Map());
-  }, []);
-  return {
-    selectedIds,
-    selectedItems,
-    selectedItemMap,
-    toggleItem,
-    toggleId,
-    clearSelection,
-    allSelected,
-    anySelected,
-    toggleAll
-  };
-}
-
-exports.useTableSelection = useTableSelection;