@holmdigital/components 1.2.4 → 2.1.0

package/dist/Pagination/Pagination.js

@@ -0,0 +1,149 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Pagination/Pagination.tsx
+var Pagination_exports = {};
+__export(Pagination_exports, {
+  Pagination: () => Pagination
+});
+module.exports = __toCommonJS(Pagination_exports);
+var import_jsx_runtime = require("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__ */ (0, import_jsx_runtime.jsx)("nav", { "aria-label": ariaLabel, className, style: styles.nav, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("ul", { style: styles.list, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("li", { children: page === "..." ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: styles.ellipsis, children: "\u2026" }) : /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime.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"
+      }
+    ) })
+  ] }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Pagination
+});

package/dist/Pagination/Pagination.mjs

@@ -0,0 +1,6 @@
+import {
+  Pagination
+} from "../chunk-EVNHLNS5.mjs";
+export {
+  Pagination
+};

package/dist/Tooltip/Tooltip.d.mts

@@ -8,7 +8,7 @@ interface TooltipProps {
     children: React__default.ReactNode;
 }
 declare const Tooltip: ({ children }: TooltipProps) => react_jsx_runtime.JSX.Element;
-declare const TooltipTrigger: ({ children, asChild, ...props }: React__default.HTMLAttributes<HTMLElement> & {
+declare const TooltipTrigger: ({ children, asChild: _asChild, ...props }: React__default.HTMLAttributes<HTMLElement> & {
     asChild?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 declare const TooltipContent: ({ children, className }: {

package/dist/Tooltip/Tooltip.d.ts

@@ -8,7 +8,7 @@ interface TooltipProps {
     children: React__default.ReactNode;
 }
 declare const Tooltip: ({ children }: TooltipProps) => react_jsx_runtime.JSX.Element;
-declare const TooltipTrigger: ({ children, asChild, ...props }: React__default.HTMLAttributes<HTMLElement> & {
+declare const TooltipTrigger: ({ children, asChild: _asChild, ...props }: React__default.HTMLAttributes<HTMLElement> & {
     asChild?: boolean;
 }) => react_jsx_runtime.JSX.Element;
 declare const TooltipContent: ({ children, className }: {

package/dist/Tooltip/Tooltip.js

@@ -47,7 +47,7 @@ var Tooltip = ({ children }) => {
   const id = (0, import_react.useRef)(`tooltip-${Math.random().toString(36).substr(2, 9)}`).current;
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(TooltipContext.Provider, { value: { open, setOpen, id }, children: /* @__PURE__ */ (0, import_jsx_runtime.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 = (0, import_react.useContext)(TooltipContext);
   if (!context) throw new Error("TooltipTrigger must be used within Tooltip");
   const { setOpen, id } = context;

package/dist/Tooltip/Tooltip.mjs

@@ -3,7 +3,7 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
-} from "../chunk-C5M6C7KT.mjs";
+} from "../chunk-MCEJNWZT.mjs";
 export {
   Tooltip,
   TooltipContent,

package/dist/TreeView/TreeView.d.mts

@@ -0,0 +1,16 @@
+import React__default from 'react';
+
+interface TreeNode {
+    id: string;
+    label: string;
+    children?: TreeNode[];
+}
+interface TreeViewProps {
+    data: TreeNode[];
+    ariaLabel?: string;
+    className?: string;
+    onSelect?: (node: TreeNode) => void;
+}
+declare const TreeView: React__default.FC<TreeViewProps>;
+
+export { type TreeNode, TreeView, type TreeViewProps };

package/dist/TreeView/TreeView.d.ts

@@ -0,0 +1,16 @@
+import React__default from 'react';
+
+interface TreeNode {
+    id: string;
+    label: string;
+    children?: TreeNode[];
+}
+interface TreeViewProps {
+    data: TreeNode[];
+    ariaLabel?: string;
+    className?: string;
+    onSelect?: (node: TreeNode) => void;
+}
+declare const TreeView: React__default.FC<TreeViewProps>;
+
+export { type TreeNode, TreeView, type TreeViewProps };

package/dist/TreeView/TreeView.js

@@ -0,0 +1,250 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/TreeView/TreeView.tsx
+var TreeView_exports = {};
+__export(TreeView_exports, {
+  TreeView: () => TreeView
+});
+module.exports = __toCommonJS(TreeView_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var TreeView = ({
+  data,
+  ariaLabel = "Tree View",
+  className = "",
+  onSelect
+}) => {
+  const [expandedIds, setExpandedIds] = (0, import_react.useState)(/* @__PURE__ */ new Set());
+  const [selectedId, setSelectedId] = (0, import_react.useState)(null);
+  const [focusedId, setFocusedId] = (0, import_react.useState)(data.length > 0 ? data[0].id : null);
+  const nodeRefs = (0, import_react.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;
+  };
+  (0, import_react.useEffect)(() => {
+    if (focusedId) {
+      const el = nodeRefs.current.get(focusedId);
+      if (el) el.focus();
+    }
+  }, [focusedId]);
+  const renderTree = (nodes, level = 1) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("li", { role: "none", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "0.75rem", color: "#94a3b8" }, children: isExpanded ? "\u25BC" : "\u25B6" }),
+              !hasChildren && /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { className, style: styles.container, children: /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsxs)("li", { role: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("span", { style: { fontSize: "0.75rem", color: "#94a3b8" }, children: isExpanded ? "\u25BC" : "\u25B6" }),
+            !hasChildren && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { width: "0.75rem" } }),
+            node.label
+          ]
+        }
+      ),
+      hasChildren && isExpanded && renderTree(node.children, 2)
+    ] }, node.id);
+  }) }) });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  TreeView
+});

package/dist/TreeView/TreeView.mjs

@@ -0,0 +1,6 @@
+import {
+  TreeView
+} from "../chunk-6REI7HHO.mjs";
+export {
+  TreeView
+};

package/dist/chunk-4UONERC6.mjs

@@ -0,0 +1,45 @@
+// src/LiveRegion/LiveRegion.tsx
+import { useEffect, useState, useRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var LiveRegion = ({
+  message,
+  ariaLive = "polite",
+  clearAfter
+}) => {
+  const [announcement, setAnnouncement] = useState("");
+  const timeoutRef = useRef();
+  useEffect(() => {
+    if (message) {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      setAnnouncement(message);
+      if (clearAfter) {
+        timeoutRef.current = setTimeout(() => {
+          setAnnouncement("");
+        }, clearAfter);
+      }
+    }
+  }, [message, clearAfter]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-live": ariaLive,
+      "aria-atomic": "true",
+      style: {
+        position: "absolute",
+        width: 1,
+        height: 1,
+        padding: 0,
+        margin: -1,
+        overflow: "hidden",
+        clip: "rect(0, 0, 0, 0)",
+        whiteSpace: "nowrap",
+        border: 0
+      },
+      children: announcement
+    }
+  );
+};
+
+export {
+  LiveRegion
+};

package/dist/chunk-57NZTQBX.mjs

@@ -0,0 +1,86 @@
+// src/DatePicker/DatePicker.tsx
+import { useId, forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DatePicker = forwardRef(({
+  label,
+  description,
+  error,
+  className = "",
+  style,
+  id: providedId,
+  ...props
+}, ref) => {
+  const generatedId = useId();
+  const id = providedId || generatedId;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const styles = {
+    container: {
+      marginBottom: "1rem",
+      fontFamily: "system-ui, -apple-system, sans-serif"
+    },
+    label: {
+      display: "block",
+      fontWeight: 600,
+      marginBottom: "0.25rem",
+      color: "#1e293b"
+    },
+    description: {
+      fontSize: "0.875rem",
+      color: "#64748b",
+      marginBottom: "0.5rem"
+    },
+    error: {
+      fontSize: "0.875rem",
+      color: "#dc2626",
+      marginTop: "0.25rem"
+    },
+    input: {
+      display: "block",
+      width: "100%",
+      padding: "0.5rem 0.75rem",
+      fontSize: "1rem",
+      lineHeight: 1.5,
+      color: "#0f172a",
+      backgroundColor: "#ffffff",
+      border: `1px solid ${error ? "#dc2626" : "#cbd5e1"}`,
+      borderRadius: "0.375rem",
+      outline: "none",
+      boxSizing: "border-box",
+      minHeight: "2.5rem"
+      // Ensure touch target size
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...styles.container, ...style }, children: [
+    /* @__PURE__ */ jsx(
+      "label",
+      {
+        htmlFor: id,
+        style: styles.label,
+        children: label
+      }
+    ),
+    description && /* @__PURE__ */ jsx("div", { id: descriptionId, style: styles.description, children: description }),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref,
+        id,
+        type: "date",
+        "aria-invalid": !!error,
+        "aria-describedby": [
+          description ? descriptionId : null,
+          error ? errorId : null
+        ].filter(Boolean).join(" ") || void 0,
+        style: styles.input,
+        ...props
+      }
+    ),
+    error && /* @__PURE__ */ jsx("div", { id: errorId, style: styles.error, role: "alert", children: error })
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+
+export {
+  DatePicker
+};