@holmdigital/components 1.2.4 → 2.1.0

package/dist/chunk-6REI7HHO.mjs

@@ -0,0 +1,226 @@
+// src/TreeView/TreeView.tsx
+import { useState, useRef, useEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var TreeView = ({
+  data,
+  ariaLabel = "Tree View",
+  className = "",
+  onSelect
+}) => {
+  const [expandedIds, setExpandedIds] = useState(/* @__PURE__ */ new Set());
+  const [selectedId, setSelectedId] = useState(null);
+  const [focusedId, setFocusedId] = useState(data.length > 0 ? data[0].id : null);
+  const nodeRefs = useRef(/* @__PURE__ */ new Map());
+  const toggleExpand = (nodeId) => {
+    const newExpanded = new Set(expandedIds);
+    if (newExpanded.has(nodeId)) {
+      newExpanded.delete(nodeId);
+    } else {
+      newExpanded.add(nodeId);
+    }
+    setExpandedIds(newExpanded);
+  };
+  const getVisibleNodes = (nodes) => {
+    let visible = [];
+    for (const node of nodes) {
+      visible.push(node);
+      if (node.children && expandedIds.has(node.id)) {
+        visible = visible.concat(getVisibleNodes(node.children));
+      }
+    }
+    return visible;
+  };
+  const handleKeyDown = (e, node) => {
+    const visibleNodes = getVisibleNodes(data);
+    const currentIndex = visibleNodes.findIndex((n) => n.id === node.id);
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        if (currentIndex < visibleNodes.length - 1) {
+          const nextNode = visibleNodes[currentIndex + 1];
+          setFocusedId(nextNode.id);
+        }
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        if (currentIndex > 0) {
+          const prevNode = visibleNodes[currentIndex - 1];
+          setFocusedId(prevNode.id);
+        }
+        break;
+      }
+      case "ArrowRight": {
+        e.preventDefault();
+        if (node.children && !expandedIds.has(node.id)) {
+          toggleExpand(node.id);
+        } else if (node.children && expandedIds.has(node.id)) {
+          if (currentIndex < visibleNodes.length - 1) {
+            setFocusedId(visibleNodes[currentIndex + 1].id);
+          }
+        }
+        break;
+      }
+      case "ArrowLeft": {
+        e.preventDefault();
+        if (node.children && expandedIds.has(node.id)) {
+          toggleExpand(node.id);
+        } else {
+          const parent = findParent(data, node.id);
+          if (parent) {
+            setFocusedId(parent.id);
+          }
+        }
+        break;
+      }
+      case "Home": {
+        e.preventDefault();
+        if (visibleNodes.length > 0) {
+          setFocusedId(visibleNodes[0].id);
+        }
+        break;
+      }
+      case "End": {
+        e.preventDefault();
+        if (visibleNodes.length > 0) {
+          setFocusedId(visibleNodes[visibleNodes.length - 1].id);
+        }
+        break;
+      }
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        if (onSelect) onSelect(node);
+        setSelectedId(node.id);
+        if (node.children) {
+          toggleExpand(node.id);
+        }
+        break;
+      }
+    }
+  };
+  const findParent = (nodes, childId, parent = null) => {
+    for (const node of nodes) {
+      if (node.id === childId) return parent;
+      if (node.children) {
+        const found = findParent(node.children, childId, node);
+        if (found) return found;
+      }
+    }
+    return null;
+  };
+  useEffect(() => {
+    if (focusedId) {
+      const el = nodeRefs.current.get(focusedId);
+      if (el) el.focus();
+    }
+  }, [focusedId]);
+  const renderTree = (nodes, level = 1) => {
+    return /* @__PURE__ */ jsx("ul", { role: "group", style: { paddingLeft: level > 1 ? "1.5rem" : 0, listStyle: "none", margin: 0 }, children: nodes.map((node) => {
+      const isExpanded = expandedIds.has(node.id);
+      const hasChildren = node.children && node.children.length > 0;
+      return /* @__PURE__ */ jsxs("li", { role: "none", children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            ref: (el) => {
+              if (el) nodeRefs.current.set(node.id, el);
+              else nodeRefs.current.delete(node.id);
+            },
+            role: "treeitem",
+            "aria-expanded": hasChildren ? isExpanded : void 0,
+            "aria-selected": selectedId === node.id,
+            "aria-level": level,
+            tabIndex: focusedId === node.id ? 0 : -1,
+            onClick: () => {
+              setFocusedId(node.id);
+              setSelectedId(node.id);
+              if (hasChildren) toggleExpand(node.id);
+              if (onSelect) onSelect(node);
+            },
+            onKeyDown: (e) => handleKeyDown(e, node),
+            style: {
+              cursor: "pointer",
+              padding: "0.25rem 0.5rem",
+              borderRadius: "0.25rem",
+              outline: "none",
+              backgroundColor: selectedId === node.id ? "#e0f2fe" : "transparent",
+              // Sky-100
+              color: selectedId === node.id ? "#0369a1" : "inherit",
+              // Sky-700
+              border: focusedId === node.id ? "1px solid #0ea5e9" : "1px solid transparent",
+              // Sky-500
+              display: "flex",
+              alignItems: "center",
+              gap: "0.5rem"
+            },
+            children: [
+              hasChildren && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75rem", color: "#94a3b8" }, children: isExpanded ? "\u25BC" : "\u25B6" }),
+              !hasChildren && /* @__PURE__ */ jsx("span", { style: { width: "0.75rem" } }),
+              node.label
+            ]
+          }
+        ),
+        hasChildren && isExpanded && renderTree(node.children, level + 1)
+      ] }, node.id);
+    }) });
+  };
+  const styles = {
+    container: {
+      fontFamily: "system-ui, -apple-system, sans-serif",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.375rem",
+      padding: "1rem",
+      backgroundColor: "white"
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className, style: styles.container, children: /* @__PURE__ */ jsx("ul", { role: "tree", "aria-label": ariaLabel, style: { listStyle: "none", padding: 0, margin: 0 }, children: data.map((node) => {
+    const isExpanded = expandedIds.has(node.id);
+    const hasChildren = node.children && node.children.length > 0;
+    return /* @__PURE__ */ jsxs("li", { role: "none", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: (el) => {
+            if (el) nodeRefs.current.set(node.id, el);
+            else nodeRefs.current.delete(node.id);
+          },
+          role: "treeitem",
+          "aria-expanded": hasChildren ? isExpanded : void 0,
+          "aria-selected": selectedId === node.id,
+          "aria-level": 1,
+          tabIndex: focusedId === node.id ? 0 : -1,
+          onClick: () => {
+            setFocusedId(node.id);
+            setSelectedId(node.id);
+            if (hasChildren) toggleExpand(node.id);
+            if (onSelect) onSelect(node);
+          },
+          onKeyDown: (e) => handleKeyDown(e, node),
+          style: {
+            cursor: "pointer",
+            padding: "0.25rem 0.5rem",
+            borderRadius: "0.25rem",
+            outline: "none",
+            backgroundColor: selectedId === node.id ? "#e0f2fe" : "transparent",
+            color: selectedId === node.id ? "#0369a1" : "inherit",
+            border: focusedId === node.id ? "1px solid #0ea5e9" : "1px solid transparent",
+            display: "flex",
+            alignItems: "center",
+            gap: "0.5rem"
+          },
+          children: [
+            hasChildren && /* @__PURE__ */ jsx("span", { style: { fontSize: "0.75rem", color: "#94a3b8" }, children: isExpanded ? "\u25BC" : "\u25B6" }),
+            !hasChildren && /* @__PURE__ */ jsx("span", { style: { width: "0.75rem" } }),
+            node.label
+          ]
+        }
+      ),
+      hasChildren && isExpanded && renderTree(node.children, 2)
+    ] }, node.id);
+  }) }) });
+};
+
+export {
+  TreeView
+};

package/dist/chunk-EVNHLNS5.mjs

@@ -0,0 +1,125 @@
+// src/Pagination/Pagination.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Pagination = ({
+  currentPage,
+  totalPages,
+  onPageChange,
+  ariaLabel = "Pagination",
+  className = ""
+}) => {
+  if (totalPages <= 1) return null;
+  const getPageNumbers = () => {
+    const pages2 = [];
+    pages2.push(1);
+    const start = Math.max(2, currentPage - 1);
+    const end = Math.min(totalPages - 1, currentPage + 1);
+    if (start > 2) pages2.push("...");
+    for (let i = start; i <= end; i++) {
+      pages2.push(i);
+    }
+    if (end < totalPages - 1) pages2.push("...");
+    if (totalPages > 1) {
+      pages2.push(totalPages);
+    }
+    return Array.from(new Set(pages2));
+  };
+  const pages = getPageNumbers();
+  const styles = {
+    nav: {
+      display: "flex",
+      justifyContent: "center",
+      marginTop: "1.5rem",
+      marginBottom: "1.5rem",
+      fontFamily: "system-ui, -apple-system, sans-serif"
+    },
+    list: {
+      display: "flex",
+      listStyle: "none",
+      padding: 0,
+      margin: 0,
+      gap: "0.5rem",
+      alignItems: "center"
+    },
+    button: {
+      minWidth: "2.5rem",
+      height: "2.5rem",
+      display: "flex",
+      alignItems: "center",
+      justifyContent: "center",
+      border: "1px solid #cbd5e1",
+      backgroundColor: "white",
+      borderRadius: "0.375rem",
+      cursor: "pointer",
+      fontSize: "1rem",
+      color: "#1e293b",
+      padding: "0 0.75rem",
+      transition: "all 0.2s"
+    },
+    activeButton: {
+      backgroundColor: "#2563eb",
+      // Blue-600
+      color: "white",
+      borderColor: "#2563eb",
+      fontWeight: "bold"
+    },
+    disabledButton: {
+      opacity: 0.5,
+      cursor: "not-allowed",
+      backgroundColor: "#f1f5f9"
+    },
+    ellipsis: {
+      color: "#64748b",
+      padding: "0 0.5rem"
+    }
+  };
+  return /* @__PURE__ */ jsx("nav", { "aria-label": ariaLabel, className, style: styles.nav, children: /* @__PURE__ */ jsxs("ul", { style: styles.list, children: [
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onPageChange(currentPage - 1),
+        disabled: currentPage === 1,
+        "aria-disabled": currentPage === 1,
+        "aria-label": "Previous page",
+        style: {
+          ...styles.button,
+          ...currentPage === 1 ? styles.disabledButton : {}
+        },
+        children: "\u2190"
+      }
+    ) }),
+    pages.map((page, index) => /* @__PURE__ */ jsx("li", { children: page === "..." ? /* @__PURE__ */ jsx("span", { style: styles.ellipsis, children: "\u2026" }) : /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onPageChange(page),
+        "aria-current": currentPage === page ? "page" : void 0,
+        "aria-label": `Page ${page}`,
+        style: {
+          ...styles.button,
+          ...currentPage === page ? styles.activeButton : {}
+        },
+        children: page
+      }
+    ) }, `${page}-${index}`)),
+    /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: () => onPageChange(currentPage + 1),
+        disabled: currentPage === totalPages,
+        "aria-disabled": currentPage === totalPages,
+        "aria-label": "Next page",
+        style: {
+          ...styles.button,
+          ...currentPage === totalPages ? styles.disabledButton : {}
+        },
+        children: "\u2192"
+      }
+    ) })
+  ] }) });
+};
+
+export {
+  Pagination
+};

package/dist/chunk-HSUDZAQ6.mjs

@@ -0,0 +1,101 @@
+// src/DataTable/DataTable.tsx
+import { useState, useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function DataTable({
+  data,
+  columns,
+  caption,
+  className = ""
+}) {
+  const [sortConfig, setSortConfig] = useState({ key: null, direction: "ascending" });
+  const handleSort = (key) => {
+    let direction = "ascending";
+    if (sortConfig.key === key && sortConfig.direction === "ascending") {
+      direction = "descending";
+    }
+    setSortConfig({ key, direction });
+  };
+  const sortedData = useMemo(() => {
+    if (!sortConfig.key) return data;
+    return [...data].sort((a, b) => {
+      const aValue = a[sortConfig.key];
+      const bValue = b[sortConfig.key];
+      if (aValue < bValue) {
+        return sortConfig.direction === "ascending" ? -1 : 1;
+      }
+      if (aValue > bValue) {
+        return sortConfig.direction === "ascending" ? 1 : -1;
+      }
+      return 0;
+    });
+  }, [data, sortConfig]);
+  const styles = {
+    table: {
+      width: "100%",
+      borderCollapse: "collapse",
+      fontFamily: "system-ui, -apple-system, sans-serif",
+      marginBottom: "1rem"
+    },
+    caption: {
+      textAlign: "left",
+      fontWeight: "bold",
+      fontSize: "1.25rem",
+      marginBottom: "0.75rem",
+      color: "#1e293b"
+    },
+    th: {
+      textAlign: "left",
+      borderBottom: "2px solid #e2e8f0",
+      padding: "0.75rem",
+      fontWeight: 600,
+      color: "#475569",
+      backgroundColor: "#f8fafc"
+    },
+    td: {
+      padding: "0.75rem",
+      borderBottom: "1px solid #e2e8f0",
+      color: "#334155"
+    },
+    sortButton: {
+      background: "none",
+      border: "none",
+      font: "inherit",
+      fontWeight: 600,
+      cursor: "pointer",
+      padding: 0,
+      display: "inline-flex",
+      alignItems: "center",
+      gap: "0.5rem",
+      color: "inherit"
+    }
+  };
+  return /* @__PURE__ */ jsx("div", { className, style: { overflowX: "auto" }, children: /* @__PURE__ */ jsxs("table", { style: styles.table, children: [
+    /* @__PURE__ */ jsx("caption", { style: styles.caption, children: caption }),
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((column, index) => /* @__PURE__ */ jsx(
+      "th",
+      {
+        scope: "col",
+        "aria-sort": sortConfig.key === column.accessor ? sortConfig.direction : void 0,
+        style: styles.th,
+        children: column.sortable ? /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleSort(column.accessor),
+            style: styles.sortButton,
+            children: [
+              column.header,
+              sortConfig.key === column.accessor ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: sortConfig.direction === "ascending" ? "\u25B2" : "\u25BC" }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { opacity: 0.3 }, children: "\u2195" })
+            ]
+          }
+        ) : column.header
+      },
+      index
+    )) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: sortedData.map((row, rowIndex) => /* @__PURE__ */ jsx("tr", { children: columns.map((column, colIndex) => /* @__PURE__ */ jsx("td", { style: styles.td, children: column.render ? column.render(row) : String(row[column.accessor]) }, colIndex)) }, rowIndex)) })
+  ] }) });
+}
+
+export {
+  DataTable
+};

package/dist/{chunk-C5M6C7KT.mjs → chunk-MCEJNWZT.mjs}

@@ -10,7 +10,7 @@ var Tooltip = ({ children }) => {
   const id = useRef(`tooltip-${Math.random().toString(36).substr(2, 9)}`).current;
   return /* @__PURE__ */ jsx(TooltipContext.Provider, { value: { open, setOpen, id }, children: /* @__PURE__ */ jsx("div", { className: "relative inline-block group", onMouseLeave: () => setOpen(false), children }) });
 };
-var TooltipTrigger = ({ children, asChild = false, ...props }) => {
+var TooltipTrigger = ({ children, asChild: _asChild = false, ...props }) => {
   const context = useContext(TooltipContext);
   if (!context) throw new Error("TooltipTrigger must be used within Tooltip");
   const { setOpen, id } = context;

package/dist/{chunk-7V2LETZ6.mjs → chunk-MYXIUDCP.mjs}

@@ -77,7 +77,7 @@ var Button = forwardRef(
         disabled: disabled || isLoading,
         "aria-busy": isLoading,
         tabIndex: props.tabIndex,
-        ...props,
+        className,
         children: [
           isLoading ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { marginRight: "8px" }, children: "\u23F3" }) : null,
           children

package/dist/chunk-NECEXNCF.mjs

@@ -0,0 +1,57 @@
+// src/Card/Card.tsx
+import { jsx, jsxs } from "react/jsx-runtime";
+var Card = ({
+  title,
+  href,
+  children,
+  className = "",
+  as: Component = "div"
+}) => {
+  const styles = {
+    card: {
+      position: "relative",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.5rem",
+      padding: "1.5rem",
+      backgroundColor: "white",
+      boxShadow: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+      transition: "box-shadow 0.2s, transform 0.2s",
+      fontFamily: "system-ui, -apple-system, sans-serif"
+    },
+    title: {
+      marginTop: 0,
+      marginBottom: "0.75rem",
+      fontSize: "1.25rem",
+      fontWeight: 600,
+      color: "#1e293b"
+    },
+    link: {
+      textDecoration: "none",
+      color: "inherit"
+    },
+    stretchedLink: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      zIndex: 1,
+      content: "''"
+    },
+    content: {
+      color: "#475569",
+      lineHeight: 1.5
+    }
+  };
+  return /* @__PURE__ */ jsxs(Component, { className, style: styles.card, children: [
+    title && /* @__PURE__ */ jsx("h3", { style: styles.title, children: href ? /* @__PURE__ */ jsxs("a", { href, style: styles.link, children: [
+      /* @__PURE__ */ jsx("span", { style: styles.stretchedLink, "aria-hidden": "true" }),
+      title
+    ] }) : title }),
+    /* @__PURE__ */ jsx("div", { style: styles.content, children })
+  ] });
+};
+
+export {
+  Card
+};