@holmdigital/components 1.2.4 → 2.1.0

package/dist/index.mjs

@@ -1,3 +1,6 @@
+import {
+  Pagination
+} from "./chunk-EVNHLNS5.mjs";
 import {
   RadioGroup
 } from "./chunk-YMSNGQN6.mjs";
@@ -22,28 +25,55 @@ import {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger
-} from "./chunk-C5M6C7KT.mjs";
+} from "./chunk-MCEJNWZT.mjs";
 import {
-  Button
-} from "./chunk-7V2LETZ6.mjs";
+  TreeView
+} from "./chunk-6REI7HHO.mjs";
+import {
+  ErrorSummary
+} from "./chunk-P2IXX552.mjs";
 import {
   FormField
 } from "./chunk-PLT5CAFO.mjs";
-import {
-  Checkbox
-} from "./chunk-NOE5QKC2.mjs";
 import {
   Heading
 } from "./chunk-2RP6SWY7.mjs";
+import {
+  LiveRegion
+} from "./chunk-4UONERC6.mjs";
 import {
   Modal
 } from "./chunk-Z4AIS75A.mjs";
 import {
   Dialog
 } from "./chunk-HIGQ6URZ.mjs";
+import {
+  MultiSelect
+} from "./chunk-VM3O36W4.mjs";
 import {
   NavigationMenu
 } from "./chunk-GK4BYT56.mjs";
+import {
+  AccessibilityStatement
+} from "./chunk-OFTOD72G.mjs";
+import {
+  Button
+} from "./chunk-MYXIUDCP.mjs";
+import {
+  Checkbox
+} from "./chunk-NOE5QKC2.mjs";
+import {
+  Card
+} from "./chunk-NECEXNCF.mjs";
+import {
+  Combobox
+} from "./chunk-OMSIXECN.mjs";
+import {
+  DataTable
+} from "./chunk-HSUDZAQ6.mjs";
+import {
+  DatePicker
+} from "./chunk-57NZTQBX.mjs";
 
 // src/Breadcrumbs/Breadcrumbs.tsx
 import React, { Children, isValidElement, cloneElement } from "react";
@@ -274,7 +304,203 @@ var TabsContent = ({ value, children, className }) => {
     }
   );
 };
+
+// src/ProgressBar/ProgressBar.tsx
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var ProgressBar = ({
+  value,
+  min = 0,
+  max = 100,
+  label,
+  showValueLabel = false,
+  valueText,
+  variant = "primary",
+  className = ""
+}) => {
+  const clampedValue = Math.min(Math.max(value, min), max);
+  const percentage = Math.round((clampedValue - min) / (max - min) * 100);
+  const getVariantColor = () => {
+    switch (variant) {
+      case "success":
+        return "#10B981";
+      // Green
+      case "warning":
+        return "#F59E0B";
+      // Amber
+      case "danger":
+        return "#EF4444";
+      // Red
+      default:
+        return "#2563EB";
+    }
+  };
+  const styles = {
+    container: {
+      width: "100%",
+      backgroundColor: "#E5E7EB",
+      // Gray-200
+      borderRadius: "9999px",
+      height: "1rem",
+      overflow: "hidden",
+      position: "relative"
+    },
+    bar: {
+      height: "100%",
+      backgroundColor: getVariantColor(),
+      width: `${percentage}%`,
+      transition: "width 0.3s ease-in-out",
+      borderRadius: "9999px"
+    },
+    labelFn: {
+      fontSize: "0.875rem",
+      color: "#374151",
+      marginBottom: "0.25rem",
+      display: "flex",
+      justifyContent: "space-between"
+    }
+  };
+  return /* @__PURE__ */ jsxs3("div", { className: `hd-progress-root ${className}`, children: [
+    /* @__PURE__ */ jsxs3("div", { style: styles.labelFn, id: `progress-label-${label.replace(/\s+/g, "-")}`, children: [
+      /* @__PURE__ */ jsx4("span", { className: "hd-progress-label-text", children: label }),
+      showValueLabel && /* @__PURE__ */ jsxs3("span", { children: [
+        percentage,
+        "%"
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx4(
+      "div",
+      {
+        role: "progressbar",
+        "aria-valuenow": clampedValue,
+        "aria-valuemin": min,
+        "aria-valuemax": max,
+        "aria-label": label,
+        "aria-valuetext": valueText,
+        style: styles.container,
+        children: /* @__PURE__ */ jsx4("div", { style: styles.bar })
+      }
+    )
+  ] });
+};
+
+// src/Skeleton/Skeleton.tsx
+import { Fragment, jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
+var Skeleton = ({
+  variant = "text",
+  width,
+  height,
+  animation = "pulse",
+  className = ""
+}) => {
+  const baseStyle = {
+    backgroundColor: "#E5E7EB",
+    // Gray-200
+    borderRadius: variant === "circular" ? "50%" : "4px",
+    display: "inline-block",
+    width: width ?? (variant === "text" ? "100%" : void 0),
+    height: height ?? (variant === "text" ? "1em" : void 0)
+  };
+  const getAnimationClass = () => {
+    switch (animation) {
+      case "pulse":
+        return "hd-skeleton-pulse";
+      case "wave":
+        return "hd-skeleton-wave";
+      default:
+        return "";
+    }
+  };
+  const styles = `
+    @keyframes hd-pulse {
+      0%, 100% { opacity: 1; }
+      50% { opacity: .5; }
+    }
+    @keyframes hd-wave {
+      0% { transform: translateX(-100%); }
+      100% { transform: translateX(100%); }
+    }
+    .hd-skeleton-pulse {
+      animation: hd-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
+    }
+    .hd-skeleton-wave {
+      position: relative;
+      overflow: hidden;
+    }
+    .hd-skeleton-wave::after {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
+      animation: hd-wave 1.6s linear infinite;
+    }
+  `;
+  return /* @__PURE__ */ jsxs4(Fragment, { children: [
+    /* @__PURE__ */ jsx5("style", { children: styles }),
+    /* @__PURE__ */ jsx5(
+      "span",
+      {
+        className: `hd-skeleton ${getAnimationClass()} ${className}`,
+        style: baseStyle,
+        "aria-hidden": "true"
+      }
+    )
+  ] });
+};
+
+// src/HelpText/HelpText.tsx
+import { Info, AlertCircle } from "lucide-react";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
+var HelpText = ({
+  id,
+  children,
+  variant = "default",
+  showIcon = false,
+  className = ""
+}) => {
+  const getColor = () => {
+    switch (variant) {
+      case "error":
+        return "#EF4444";
+      // Red-500
+      case "valid":
+        return "#10B981";
+      // Green-500
+      default:
+        return "#6B7280";
+    }
+  };
+  const style = {
+    fontSize: "0.875rem",
+    marginTop: "0.25rem",
+    color: getColor(),
+    display: "flex",
+    alignItems: "center",
+    gap: "0.25rem"
+  };
+  const Icon = () => {
+    if (!showIcon) return null;
+    if (variant === "error") return /* @__PURE__ */ jsx6(AlertCircle, { size: 14 });
+    if (variant === "default") return /* @__PURE__ */ jsx6(Info, { size: 14 });
+    return null;
+  };
+  return /* @__PURE__ */ jsxs5(
+    "div",
+    {
+      id,
+      className: `hd-help-text ${className}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsx6(Icon, {}),
+        /* @__PURE__ */ jsx6("span", { children })
+      ]
+    }
+  );
+};
 export {
+  AccessibilityStatement,
   Accordion,
   AccordionContent,
   AccordionItem,
@@ -282,17 +508,28 @@ export {
   BreadcrumbItem,
   Breadcrumbs,
   Button,
+  Card,
   Checkbox,
+  Combobox,
+  DataTable,
+  DatePicker,
   Dialog,
+  ErrorSummary,
   FormField,
   Heading,
+  HelpText,
+  LiveRegion,
   Modal,
+  MultiSelect,
   NavigationMenu,
+  Pagination,
+  ProgressBar,
   RadioGroup,
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
+  Skeleton,
   SkipLink,
   Switch,
   TabTrigger,
@@ -304,5 +541,6 @@ export {
   TooltipContent,
   TooltipProvider,
   TooltipTrigger,
+  TreeView,
   useToast
 };

package/package.json

@@ -1,11 +1,10 @@
 {
     "name": "@holmdigital/components",
     "author": "Holm Digital AB",
-    "version": "1.2.4",
+    "version": "2.1.0",
     "private": false,
     "publishConfig": {
-        "access": "public",
-        "registry": "https://registry.npmjs.org/"
+        "access": "public"
     },
     "description": "Prescriptive, accessible React components for regulatory compliance",
     "repository": {
@@ -73,6 +72,46 @@
         "./Heading": {
             "types": "./dist/Heading/Heading.d.ts",
             "import": "./dist/Heading/Heading.mjs"
+        },
+        "./AccessibilityStatement": {
+            "types": "./dist/AccessibilityStatement/AccessibilityStatement.d.ts",
+            "import": "./dist/AccessibilityStatement/AccessibilityStatement.mjs"
+        },
+        "./ErrorSummary": {
+            "types": "./dist/ErrorSummary/ErrorSummary.d.ts",
+            "import": "./dist/ErrorSummary/ErrorSummary.mjs"
+        },
+        "./Combobox": {
+            "types": "./dist/Combobox/Combobox.d.ts",
+            "import": "./dist/Combobox/Combobox.mjs"
+        },
+        "./DatePicker": {
+            "types": "./dist/DatePicker/DatePicker.d.ts",
+            "import": "./dist/DatePicker/DatePicker.mjs"
+        },
+        "./MultiSelect": {
+            "types": "./dist/MultiSelect/MultiSelect.d.ts",
+            "import": "./dist/MultiSelect/MultiSelect.mjs"
+        },
+        "./DataTable": {
+            "types": "./dist/DataTable/DataTable.d.ts",
+            "import": "./dist/DataTable/DataTable.mjs"
+        },
+        "./Pagination": {
+            "types": "./dist/Pagination/Pagination.d.ts",
+            "import": "./dist/Pagination/Pagination.mjs"
+        },
+        "./Card": {
+            "types": "./dist/Card/Card.d.ts",
+            "import": "./dist/Card/Card.mjs"
+        },
+        "./TreeView": {
+            "types": "./dist/TreeView/TreeView.d.ts",
+            "import": "./dist/TreeView/TreeView.mjs"
+        },
+        "./LiveRegion": {
+            "types": "./dist/LiveRegion/LiveRegion.d.ts",
+            "import": "./dist/LiveRegion/LiveRegion.mjs"
         }
     },
     "files": [
@@ -80,8 +119,8 @@
         "README.md"
     ],
     "scripts": {
-        "build": "tsup src/index.ts src/Button/Button.tsx src/FormField/FormField.tsx src/Dialog/Dialog.tsx src/Modal/Modal.tsx src/SkipLink/SkipLink.tsx src/NavigationMenu/NavigationMenu.tsx src/Checkbox/Checkbox.tsx src/RadioGroup/RadioGroup.tsx src/Select/Select.tsx src/Switch/Switch.tsx src/Toast/Toast.tsx src/Tooltip/Tooltip.tsx src/Heading/Heading.tsx --format cjs,esm --dts --clean --external react",
-        "dev": "tsup src/index.ts src/Button/Button.tsx src/FormField/FormField.tsx src/Dialog/Dialog.tsx src/Modal/Modal.tsx src/SkipLink/SkipLink.tsx src/NavigationMenu/NavigationMenu.tsx src/Checkbox/Checkbox.tsx src/RadioGroup/RadioGroup.tsx src/Select/Select.tsx src/Switch/Switch.tsx src/Toast/Toast.tsx src/Tooltip/Tooltip.tsx src/Heading/Heading.tsx --format cjs,esm --dts --watch --external react",
+        "build": "tsup src/index.ts src/Button/Button.tsx src/FormField/FormField.tsx src/Dialog/Dialog.tsx src/Modal/Modal.tsx src/SkipLink/SkipLink.tsx src/NavigationMenu/NavigationMenu.tsx src/Checkbox/Checkbox.tsx src/RadioGroup/RadioGroup.tsx src/Select/Select.tsx src/Switch/Switch.tsx src/Toast/Toast.tsx src/Tooltip/Tooltip.tsx src/Heading/Heading.tsx src/AccessibilityStatement/AccessibilityStatement.tsx src/ErrorSummary/ErrorSummary.tsx src/Combobox/Combobox.tsx src/DatePicker/DatePicker.tsx src/MultiSelect/MultiSelect.tsx src/DataTable/DataTable.tsx src/Pagination/Pagination.tsx src/Card/Card.tsx src/TreeView/TreeView.tsx src/LiveRegion/LiveRegion.tsx --format cjs,esm --dts --clean --external react --external @holmdigital/standards",
+        "dev": "tsup src/index.ts src/Button/Button.tsx src/FormField/FormField.tsx src/Dialog/Dialog.tsx src/Modal/Modal.tsx src/SkipLink/SkipLink.tsx src/NavigationMenu/NavigationMenu.tsx src/Checkbox/Checkbox.tsx src/RadioGroup/RadioGroup.tsx src/Select/Select.tsx src/Switch/Switch.tsx src/Toast/Toast.tsx src/Tooltip/Tooltip.tsx src/Heading/Heading.tsx src/AccessibilityStatement/AccessibilityStatement.tsx src/ErrorSummary/ErrorSummary.tsx src/Combobox/Combobox.tsx src/DatePicker/DatePicker.tsx src/MultiSelect/MultiSelect.tsx src/DataTable/DataTable.tsx src/Pagination/Pagination.tsx src/Card/Card.tsx src/TreeView/TreeView.tsx src/LiveRegion/LiveRegion.tsx --format cjs,esm --dts --watch --external react --external @holmdigital/standards",
         "lint": "eslint src --ext .ts,.tsx",
         "test": "vitest",
         "test:ci": "vitest run",
@@ -104,15 +143,18 @@
         "react-dom": ">=18.0.0"
     },
     "devDependencies": {
+        "@testing-library/react": "^16.3.2",
         "@types/react": "^18.2.0",
         "@types/react-dom": "^18.2.0",
+        "jsdom": "^28.0.0",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
-        "storybook": "^7.6.0",
+        "storybook": "^10.2.4",
         "tsup": "^8.3.5",
         "typescript": "^5.7.2"
     },
     "dependencies": {
+        "@holmdigital/standards": "^2.1.0",
         "lucide-react": "^0.556.0"
     }
 }