@holmdigital/components 1.2.4 → 2.1.0

package/dist/ErrorSummary/ErrorSummary.js

@@ -0,0 +1,119 @@
+"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/ErrorSummary/ErrorSummary.tsx
+var ErrorSummary_exports = {};
+__export(ErrorSummary_exports, {
+  ErrorSummary: () => ErrorSummary
+});
+module.exports = __toCommonJS(ErrorSummary_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ErrorSummary = ({
+  errors,
+  title = "There is a problem",
+  focusOnMount = true,
+  className = ""
+}) => {
+  const headingRef = (0, import_react.useRef)(null);
+  (0, import_react.useEffect)(() => {
+    if (focusOnMount && errors.length > 0 && headingRef.current) {
+      headingRef.current.focus();
+    }
+  }, [focusOnMount, errors]);
+  if (errors.length === 0) {
+    return null;
+  }
+  const styles = {
+    container: {
+      border: "2px solid #dc2626",
+      // Red-600
+      borderRadius: "0.375rem",
+      padding: "1rem",
+      marginBottom: "1.5rem",
+      backgroundColor: "#fef2f2"
+      // Red-50
+    },
+    heading: {
+      color: "#991b1b",
+      // Red-800
+      fontWeight: "bold",
+      fontSize: "1.125rem",
+      marginBottom: "0.5rem",
+      outline: "none"
+      // Managed focus usually visually indicated by browser, but we can style if needed
+    },
+    list: {
+      listStyleType: "disc",
+      paddingLeft: "1.25rem",
+      margin: 0,
+      color: "#dc2626"
+      // Red-600
+    },
+    link: {
+      color: "#b91c1c",
+      // Red-700
+      textDecoration: "underline",
+      cursor: "pointer",
+      fontWeight: 500
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      className: `a11y-error-summary ${className}`,
+      role: "alert",
+      "aria-labelledby": "error-summary-title",
+      style: styles.container,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "h2",
+          {
+            id: "error-summary-title",
+            ref: headingRef,
+            tabIndex: -1,
+            style: styles.heading,
+            children: title
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("ul", { style: styles.list, children: errors.map((error, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("li", { style: { marginBottom: "0.25rem" }, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "a",
+          {
+            href: `#${error.id}`,
+            style: styles.link,
+            onClick: (e) => {
+              e.preventDefault();
+              const element = document.getElementById(error.id);
+              if (element) {
+                element.focus();
+                element.scrollIntoView({ behavior: "smooth", block: "center" });
+              }
+            },
+            children: error.message
+          }
+        ) }, index)) })
+      ]
+    }
+  );
+};
+ErrorSummary.displayName = "ErrorSummary";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ErrorSummary
+});

package/dist/ErrorSummary/ErrorSummary.mjs

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

package/dist/LiveRegion/LiveRegion.d.mts

@@ -0,0 +1,10 @@
+import React__default from 'react';
+
+type LiveRegionProps = {
+    message?: string;
+    ariaLive?: 'polite' | 'assertive';
+    clearAfter?: number;
+};
+declare const LiveRegion: React__default.FC<LiveRegionProps>;
+
+export { LiveRegion, type LiveRegionProps };

package/dist/LiveRegion/LiveRegion.d.ts

@@ -0,0 +1,10 @@
+import React__default from 'react';
+
+type LiveRegionProps = {
+    message?: string;
+    ariaLive?: 'polite' | 'assertive';
+    clearAfter?: number;
+};
+declare const LiveRegion: React__default.FC<LiveRegionProps>;
+
+export { LiveRegion, type LiveRegionProps };

package/dist/LiveRegion/LiveRegion.js

@@ -0,0 +1,69 @@
+"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/LiveRegion/LiveRegion.tsx
+var LiveRegion_exports = {};
+__export(LiveRegion_exports, {
+  LiveRegion: () => LiveRegion
+});
+module.exports = __toCommonJS(LiveRegion_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var LiveRegion = ({
+  message,
+  ariaLive = "polite",
+  clearAfter
+}) => {
+  const [announcement, setAnnouncement] = (0, import_react.useState)("");
+  const timeoutRef = (0, import_react.useRef)();
+  (0, import_react.useEffect)(() => {
+    if (message) {
+      if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      setAnnouncement(message);
+      if (clearAfter) {
+        timeoutRef.current = setTimeout(() => {
+          setAnnouncement("");
+        }, clearAfter);
+      }
+    }
+  }, [message, clearAfter]);
+  return /* @__PURE__ */ (0, import_jsx_runtime.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
+    }
+  );
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  LiveRegion
+});

package/dist/LiveRegion/LiveRegion.mjs

@@ -0,0 +1,6 @@
+import {
+  LiveRegion
+} from "../chunk-4UONERC6.mjs";
+export {
+  LiveRegion
+};

package/dist/Modal/Modal.d.mts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { DialogProps } from '../Dialog/Dialog.mjs';
 
-interface ModalProps extends Omit<DialogProps, 'variant'> {
-}
+type ModalProps = Omit<DialogProps, 'variant'>;
 declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDialogElement>>;
 
 export { Modal, type ModalProps };

package/dist/Modal/Modal.d.ts

@@ -1,8 +1,7 @@
 import * as React from 'react';
 import { DialogProps } from '../Dialog/Dialog.js';
 
-interface ModalProps extends Omit<DialogProps, 'variant'> {
-}
+type ModalProps = Omit<DialogProps, 'variant'>;
 declare const Modal: React.ForwardRefExoticComponent<ModalProps & React.RefAttributes<HTMLDialogElement>>;
 
 export { Modal, type ModalProps };

package/dist/MultiSelect/MultiSelect.d.mts

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

package/dist/MultiSelect/MultiSelect.d.ts

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

package/dist/MultiSelect/MultiSelect.js

@@ -0,0 +1,263 @@
+"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/MultiSelect/MultiSelect.tsx
+var MultiSelect_exports = {};
+__export(MultiSelect_exports, {
+  MultiSelect: () => MultiSelect
+});
+module.exports = __toCommonJS(MultiSelect_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var MultiSelect = ({
+  label,
+  description,
+  error,
+  options,
+  selected,
+  onChange,
+  placeholder = "Select items...",
+  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 [activeTokenIndex] = (0, import_react.useState)(-1);
+  const inputRef = (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 availableOptions = options.filter(
+    (option) => !selected.includes(option.value) && option.label.toLowerCase().includes(inputValue.toLowerCase())
+  );
+  const handleSelect = (value) => {
+    onChange([...selected, value]);
+    setInputValue("");
+    setIsOpen(false);
+    setFocusedIndex(-1);
+    inputRef.current?.focus();
+  };
+  const handleRemove = (value) => {
+    onChange(selected.filter((v) => v !== value));
+    inputRef.current?.focus();
+  };
+  const handleKeyDown = (e) => {
+    if (activeTokenIndex !== -1) {
+      handleTokenNavigation(e);
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setIsOpen(true);
+        setFocusedIndex((prev) => prev < availableOptions.length - 1 ? prev + 1 : 0);
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setIsOpen(true);
+        setFocusedIndex((prev) => prev > 0 ? prev - 1 : availableOptions.length - 1);
+        break;
+      case "Enter":
+        e.preventDefault();
+        if (isOpen && focusedIndex >= 0) {
+          handleSelect(availableOptions[focusedIndex].value);
+        }
+        break;
+      case "Escape":
+        setIsOpen(false);
+        break;
+      case "Backspace":
+        if (inputValue === "" && selected.length > 0) {
+          handleRemove(selected[selected.length - 1]);
+        }
+        break;
+      case "ArrowLeft":
+        if (inputValue === "" && selected.length > 0) {
+        }
+        break;
+    }
+  };
+  const handleTokenNavigation = (_e) => {
+  };
+  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"
+    },
+    inputWrapper: {
+      display: "flex",
+      flexWrap: "wrap",
+      gap: "0.5rem",
+      padding: "0.375rem",
+      border: `1px solid ${error ? "#dc2626" : "#cbd5e1"}`,
+      borderRadius: "0.375rem",
+      backgroundColor: "white",
+      minHeight: "2.5rem"
+    },
+    input: {
+      flex: 1,
+      minWidth: "120px",
+      border: "none",
+      outline: "none",
+      padding: "0.25rem",
+      fontSize: "1rem"
+    },
+    token: {
+      display: "inline-flex",
+      alignItems: "center",
+      backgroundColor: "#e2e8f0",
+      border: "1px solid #cbd5e1",
+      borderRadius: "0.25rem",
+      padding: "0.125rem 0.5rem",
+      fontSize: "0.875rem",
+      color: "#0f172a"
+    },
+    removeButton: {
+      marginLeft: "0.25rem",
+      border: "none",
+      background: "none",
+      cursor: "pointer",
+      padding: "0 0.125rem",
+      fontSize: "1rem",
+      lineHeight: 1,
+      color: "#64748b"
+    },
+    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"
+    }
+  };
+  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.jsxs)("div", { style: styles.inputWrapper, children: [
+      selected.map((value) => {
+        const option = options.find((o) => o.value === value);
+        return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { style: styles.token, children: [
+          option?.label || value,
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "button",
+            {
+              type: "button",
+              style: styles.removeButton,
+              onClick: () => handleRemove(value),
+              "aria-label": `Remove ${option?.label || value}`,
+              children: "\xD7"
+            }
+          )
+        ] }, value);
+      }),
+      /* @__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,
+          value: inputValue,
+          onChange: (e) => {
+            setInputValue(e.target.value);
+            setIsOpen(true);
+            setFocusedIndex(-1);
+          },
+          onKeyDown: handleKeyDown,
+          onFocus: () => setIsOpen(true),
+          placeholder: selected.length === 0 ? placeholder : "",
+          style: styles.input
+        }
+      )
+    ] }),
+    error && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: errorId, style: styles.error, role: "alert", children: error }),
+    isOpen && availableOptions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "ul",
+      {
+        id: listboxId,
+        role: "listbox",
+        "aria-label": label,
+        style: styles.listbox,
+        children: availableOptions.map((option, index) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "li",
+          {
+            id: `${id}-option-${index}`,
+            role: "option",
+            "aria-selected": false,
+            onClick: () => handleSelect(option.value),
+            onMouseEnter: () => setFocusedIndex(index),
+            style: {
+              ...styles.option,
+              ...focusedIndex === index ? styles.activeOption : {}
+            },
+            children: option.label
+          },
+          option.value
+        ))
+      }
+    )
+  ] });
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  MultiSelect
+});

package/dist/MultiSelect/MultiSelect.mjs

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

package/dist/Pagination/Pagination.d.mts

@@ -0,0 +1,12 @@
+import React__default from 'react';
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    ariaLabel?: string;
+    className?: string;
+}
+declare const Pagination: React__default.FC<PaginationProps>;
+
+export { Pagination, type PaginationProps };

package/dist/Pagination/Pagination.d.ts

@@ -0,0 +1,12 @@
+import React__default from 'react';
+
+interface PaginationProps {
+    currentPage: number;
+    totalPages: number;
+    onPageChange: (page: number) => void;
+    ariaLabel?: string;
+    className?: string;
+}
+declare const Pagination: React__default.FC<PaginationProps>;
+
+export { Pagination, type PaginationProps };