@holmdigital/components 1.2.4 → 2.1.0

package/dist/Combobox/Combobox.d.mts

@@ -0,0 +1,19 @@
+import React__default from 'react';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+}
+interface ComboboxProps {
+    label: string;
+    description?: string;
+    error?: string;
+    options: ComboboxOption[];
+    onChange: (value: string | null) => void;
+    value?: string | null;
+    placeholder?: string;
+    className?: string;
+}
+declare const Combobox: React__default.FC<ComboboxProps>;
+
+export { Combobox, type ComboboxOption, type ComboboxProps };

package/dist/Combobox/Combobox.d.ts

@@ -0,0 +1,19 @@
+import React__default from 'react';
+
+interface ComboboxOption {
+    value: string;
+    label: string;
+}
+interface ComboboxProps {
+    label: string;
+    description?: string;
+    error?: string;
+    options: ComboboxOption[];
+    onChange: (value: string | null) => void;
+    value?: string | null;
+    placeholder?: string;
+    className?: string;
+}
+declare const Combobox: React__default.FC<ComboboxProps>;
+
+export { Combobox, type ComboboxOption, type ComboboxProps };

package/dist/Combobox/Combobox.js

@@ -0,0 +1,271 @@
+"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/Combobox/Combobox.tsx
+var Combobox_exports = {};
+__export(Combobox_exports, {
+  Combobox: () => Combobox
+});
+module.exports = __toCommonJS(Combobox_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Combobox = ({
+  label,
+  description,
+  error,
+  options,
+  onChange,
+  value,
+  placeholder = "Type to search...",
+  className = ""
+}) => {
+  const [isOpen, setIsOpen] = (0, import_react.useState)(false);
+  const [inputValue, setInputValue] = (0, import_react.useState)("");
+  const [focusedIndex, setFocusedIndex] = (0, import_react.useState)(-1);
+  const inputRef = (0, import_react.useRef)(null);
+  const listboxRef = (0, import_react.useRef)(null);
+  const containerRef = (0, import_react.useRef)(null);
+  const id = (0, import_react.useId)();
+  const listboxId = `${id}-listbox`;
+  const labelId = `${id}-label`;
+  const descriptionId = `${id}-description`;
+  const errorId = `${id}-error`;
+  const filteredOptions = options.filter(
+    (option) => option.label.toLowerCase().includes(inputValue.toLowerCase())
+  );
+  (0, import_react.useEffect)(() => {
+    if (value) {
+      const selectedOption = options.find((o) => o.value === value);
+      if (selectedOption) {
+        setInputValue(selectedOption.label);
+      }
+    } else {
+      setInputValue("");
+    }
+  }, [value, options]);
+  (0, import_react.useEffect)(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        if (value) {
+          const selectedOption = options.find((o) => o.value === value);
+          if (selectedOption) setInputValue(selectedOption.label);
+        } else {
+          setInputValue("");
+        }
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, [value, options]);
+  const handleInputChange = (e) => {
+    setInputValue(e.target.value);
+    setIsOpen(true);
+    setFocusedIndex(-1);
+    if (e.target.value === "") {
+      onChange(null);
+    }
+  };
+  const handleOptionSelect = (option) => {
+    onChange(option.value);
+    setInputValue(option.label);
+    setIsOpen(false);
+    setFocusedIndex(-1);
+  };
+  const handleKeyDown = (e) => {
+    if (!isOpen && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+      setIsOpen(true);
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setFocusedIndex(
+          (prev) => prev < filteredOptions.length - 1 ? prev + 1 : 0
+        );
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setFocusedIndex(
+          (prev) => prev > 0 ? prev - 1 : filteredOptions.length - 1
+        );
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen && focusedIndex >= 0) {
+          handleOptionSelect(filteredOptions[focusedIndex]);
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setIsOpen(false);
+        setFocusedIndex(-1);
+        if (value) {
+          const selectedOption = options.find((o) => o.value === value);
+          if (selectedOption) setInputValue(selectedOption.label);
+        } else {
+          setInputValue("");
+        }
+        break;
+      case "Tab":
+        setIsOpen(false);
+        break;
+    }
+  };
+  const styles = {
+    container: {
+      position: "relative",
+      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: {
+      width: "100%",
+      padding: "0.5rem 0.75rem",
+      fontSize: "1rem",
+      border: `1px solid ${error ? "#dc2626" : "#cbd5e1"}`,
+      borderRadius: "0.375rem",
+      outline: "none",
+      boxSizing: "border-box"
+    },
+    listbox: {
+      position: "absolute",
+      top: "100%",
+      left: 0,
+      right: 0,
+      maxHeight: "200px",
+      overflowY: "auto",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.375rem",
+      backgroundColor: "white",
+      zIndex: 10,
+      marginTop: "0.25rem",
+      padding: 0,
+      listStyle: "none",
+      boxShadow: "0 4px 6px -1px rgb(0 0 0 / 0.1)"
+    },
+    option: {
+      padding: "0.5rem 0.75rem",
+      cursor: "pointer"
+    },
+    activeOption: {
+      backgroundColor: "#e2e8f0",
+      color: "#0f172a"
+    },
+    noResults: {
+      padding: "0.5rem 0.75rem",
+      color: "#64748b",
+      fontStyle: "italic"
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { ref: containerRef, className, style: styles.container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "label",
+      {
+        id: labelId,
+        htmlFor: id,
+        style: styles.label,
+        children: label
+      }
+    ),
+    description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: descriptionId, style: styles.description, children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        ref: inputRef,
+        id,
+        type: "text",
+        role: "combobox",
+        "aria-autocomplete": "list",
+        "aria-expanded": isOpen,
+        "aria-haspopup": "listbox",
+        "aria-controls": listboxId,
+        "aria-activedescendant": focusedIndex >= 0 ? `${id}-option-${focusedIndex}` : void 0,
+        "aria-invalid": !!error,
+        "aria-describedby": [
+          description ? descriptionId : null,
+          error ? errorId : null
+        ].filter(Boolean).join(" ") || void 0,
+        value: inputValue,
+        onChange: handleInputChange,
+        onKeyDown: handleKeyDown,
+        placeholder,
+        style: {
+          ...styles.input,
+          ...isOpen ? { borderColor: "#3b82f6", ring: "2px solid #93c5fd" } : {}
+        }
+      }
+    ),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: errorId, style: styles.error, role: "alert", children: error }),
+    isOpen && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "ul",
+      {
+        ref: listboxRef,
+        id: listboxId,
+        role: "listbox",
+        "aria-label": label,
+        style: styles.listbox,
+        children: filteredOptions.length > 0 ? filteredOptions.map((option, index) => {
+          const isSelected = value === option.value;
+          const isFocused = focusedIndex === index;
+          return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+            "li",
+            {
+              id: `${id}-option-${index}`,
+              role: "option",
+              "aria-selected": isSelected,
+              onClick: () => handleOptionSelect(option),
+              onMouseEnter: () => setFocusedIndex(index),
+              style: {
+                ...styles.option,
+                ...isFocused ? styles.activeOption : {},
+                ...isSelected ? { fontWeight: "bold" } : {}
+              },
+              children: [
+                option.label,
+                isSelected && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { float: "right" }, children: "\u2713" })
+              ]
+            },
+            option.value
+          );
+        }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { style: styles.noResults, children: "No results found" })
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Combobox
+});

package/dist/Combobox/Combobox.mjs

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

package/dist/DataTable/DataTable.d.mts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+interface Column<T> {
+    header: string;
+    accessor: keyof T;
+    sortable?: boolean;
+    render?: (item: T) => React__default.ReactNode;
+}
+interface DataTableProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    caption: string;
+    className?: string;
+}
+declare function DataTable<T>({ data, columns, caption, className }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { type Column, DataTable, type DataTableProps };

package/dist/DataTable/DataTable.d.ts

@@ -0,0 +1,18 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+interface Column<T> {
+    header: string;
+    accessor: keyof T;
+    sortable?: boolean;
+    render?: (item: T) => React__default.ReactNode;
+}
+interface DataTableProps<T> {
+    data: T[];
+    columns: Column<T>[];
+    caption: string;
+    className?: string;
+}
+declare function DataTable<T>({ data, columns, caption, className }: DataTableProps<T>): react_jsx_runtime.JSX.Element;
+
+export { type Column, DataTable, type DataTableProps };

package/dist/DataTable/DataTable.js

@@ -0,0 +1,125 @@
+"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/DataTable/DataTable.tsx
+var DataTable_exports = {};
+__export(DataTable_exports, {
+  DataTable: () => DataTable
+});
+module.exports = __toCommonJS(DataTable_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+function DataTable({
+  data,
+  columns,
+  caption,
+  className = ""
+}) {
+  const [sortConfig, setSortConfig] = (0, import_react.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 = (0, import_react.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__ */ (0, import_jsx_runtime.jsx)("div", { className, style: { overflowX: "auto" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("table", { style: styles.table, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("caption", { style: styles.caption, children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: columns.map((column, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "th",
+      {
+        scope: "col",
+        "aria-sort": sortConfig.key === column.accessor ? sortConfig.direction : void 0,
+        style: styles.th,
+        children: column.sortable ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: () => handleSort(column.accessor),
+            style: styles.sortButton,
+            children: [
+              column.header,
+              sortConfig.key === column.accessor ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", children: sortConfig.direction === "ascending" ? "\u25B2" : "\u25BC" }) : /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { opacity: 0.3 }, children: "\u2195" })
+            ]
+          }
+        ) : column.header
+      },
+      index
+    )) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tbody", { children: sortedData.map((row, rowIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("tr", { children: columns.map((column, colIndex) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("td", { style: styles.td, children: column.render ? column.render(row) : String(row[column.accessor]) }, colIndex)) }, rowIndex)) })
+  ] }) });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DataTable
+});

package/dist/DataTable/DataTable.mjs

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

package/dist/DatePicker/DatePicker.d.mts

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+interface DatePickerProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    description?: string;
+    error?: string;
+    className?: string;
+}
+declare const DatePicker: React__default.ForwardRefExoticComponent<DatePickerProps & React__default.RefAttributes<HTMLInputElement>>;
+
+export { DatePicker, type DatePickerProps };

package/dist/DatePicker/DatePicker.d.ts

@@ -0,0 +1,11 @@
+import React__default from 'react';
+
+interface DatePickerProps extends React__default.InputHTMLAttributes<HTMLInputElement> {
+    label: string;
+    description?: string;
+    error?: string;
+    className?: string;
+}
+declare const DatePicker: React__default.ForwardRefExoticComponent<DatePickerProps & React__default.RefAttributes<HTMLInputElement>>;
+
+export { DatePicker, type DatePickerProps };

package/dist/DatePicker/DatePicker.js

@@ -0,0 +1,110 @@
+"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/DatePicker/DatePicker.tsx
+var DatePicker_exports = {};
+__export(DatePicker_exports, {
+  DatePicker: () => DatePicker
+});
+module.exports = __toCommonJS(DatePicker_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var DatePicker = (0, import_react.forwardRef)(({
+  label,
+  description,
+  error,
+  className = "",
+  style,
+  id: providedId,
+  ...props
+}, ref) => {
+  const generatedId = (0, import_react.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__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { ...styles.container, ...style }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "label",
+      {
+        htmlFor: id,
+        style: styles.label,
+        children: label
+      }
+    ),
+    description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: descriptionId, style: styles.description, children: description }),
+    /* @__PURE__ */ (0, import_jsx_runtime.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__ */ (0, import_jsx_runtime.jsx)("div", { id: errorId, style: styles.error, role: "alert", children: error })
+  ] });
+});
+DatePicker.displayName = "DatePicker";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  DatePicker
+});

package/dist/DatePicker/DatePicker.mjs

@@ -0,0 +1,6 @@
+import {
+  DatePicker
+} from "../chunk-57NZTQBX.mjs";
+export {
+  DatePicker
+};

package/dist/ErrorSummary/ErrorSummary.d.mts

@@ -0,0 +1,14 @@
+import React__default from 'react';
+
+interface ErrorSummaryProps {
+    errors: Array<{
+        id: string;
+        message: string;
+    }>;
+    title?: string;
+    focusOnMount?: boolean;
+    className?: string;
+}
+declare const ErrorSummary: React__default.FC<ErrorSummaryProps>;
+
+export { ErrorSummary, type ErrorSummaryProps };

package/dist/ErrorSummary/ErrorSummary.d.ts

@@ -0,0 +1,14 @@
+import React__default from 'react';
+
+interface ErrorSummaryProps {
+    errors: Array<{
+        id: string;
+        message: string;
+    }>;
+    title?: string;
+    focusOnMount?: boolean;
+    className?: string;
+}
+declare const ErrorSummary: React__default.FC<ErrorSummaryProps>;
+
+export { ErrorSummary, type ErrorSummaryProps };