@holmdigital/components 1.1.0

package/README.md

@@ -0,0 +1,46 @@
+# @holmdigital/components
+
+> Prescriptive, accessible React components for regulatory compliance.
+
+These components are built to automatically solve common accessibility challenges found in regulatory audits. Using them ensures compliance "by default" for many WCAG criteria.
+
+## Installation
+
+```bash
+npm install @holmdigital/components
+```
+
+## Usage
+
+```tsx
+import { Button, FormField, Heading } from '@holmdigital/components';
+
+function App() {
+  return (
+    <form>
+      <Heading level={1}>Contact Us</Heading>
+      <FormField 
+        label="Email Address" 
+        type="email" 
+        required 
+        autoComplete="email" 
+        helpText="We'll never share your email."
+      />
+      
+      <Button variant="primary" type="submit">
+        Submit
+      </Button>
+    </form>
+  );
+}
+```
+
+## Compliance Features
+
+- **High Contrast**: Default styles meet WCAG AA requirements.
+- **Keyboard Navigation**: Full focus management and visible focus indicators.
+- **Screen Reader Support**: Correct ARIA attributes and labels built-in.
+
+## License
+
+MIT © Holm Digital AB

package/dist/Button/Button.js

@@ -0,0 +1,117 @@
+"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/Button/Button.tsx
+var Button_exports = {};
+__export(Button_exports, {
+  Button: () => Button
+});
+module.exports = __toCommonJS(Button_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Button = (0, import_react.forwardRef)(
+  ({
+    children,
+    variant = "primary",
+    size = "medium",
+    isLoading,
+    disabled,
+    className = "",
+    ...props
+  }, ref) => {
+    const baseStyles = {
+      display: "inline-flex",
+      alignItems: "center",
+      justifyContent: "center",
+      borderRadius: "4px",
+      border: "none",
+      cursor: disabled || isLoading ? "not-allowed" : "pointer",
+      fontFamily: "inherit",
+      fontWeight: "600",
+      transition: "all 0.2s ease",
+      // Garantera synlig fokusindikator (WCAG 2.4.7)
+      outlineOffset: "2px"
+    };
+    const variants = {
+      primary: {
+        background: "#0056b3",
+        // AA Large, AAA Normal mot vit text
+        color: "#ffffff"
+      },
+      secondary: {
+        background: "#f8f9fa",
+        color: "#212529",
+        border: "1px solid #dee2e6"
+      },
+      danger: {
+        background: "#dc3545",
+        color: "#ffffff"
+      },
+      ghost: {
+        background: "transparent",
+        color: "#0056b3"
+      }
+    };
+    const sizes = {
+      small: {
+        padding: "0.25rem 0.5rem",
+        fontSize: "0.875rem",
+        minHeight: "32px"
+        // OBS: Kan bryta mot 44px om inte hanteras med margin
+      },
+      medium: {
+        padding: "0.5rem 1rem",
+        fontSize: "1rem",
+        minHeight: "44px"
+        // Touch target safe
+      },
+      large: {
+        padding: "0.75rem 1.5rem",
+        fontSize: "1.25rem",
+        minHeight: "56px"
+      }
+    };
+    const style = {
+      ...baseStyles,
+      ...variants[variant],
+      ...sizes[size],
+      opacity: disabled || isLoading ? 0.65 : 1
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        ref,
+        style,
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading,
+        tabIndex: props.tabIndex,
+        ...props,
+        children: [
+          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { marginRight: "8px" }, children: "\u23F3" }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Button
+});

package/dist/Button/Button.mjs

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

package/dist/Checkbox/Checkbox.js

@@ -0,0 +1,82 @@
+"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/Checkbox/Checkbox.tsx
+var Checkbox_exports = {};
+__export(Checkbox_exports, {
+  Checkbox: () => Checkbox
+});
+module.exports = __toCommonJS(Checkbox_exports);
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var Checkbox = (0, import_react.forwardRef)(
+  ({ className = "", checked, onCheckedChange, onChange, label, disabled, id, ...props }, ref) => {
+    const handleChange = (e) => {
+      onCheckedChange?.(e.target.checked);
+      onChange?.(e);
+    };
+    const generatedId = id || `checkbox-${Math.random().toString(36).substr(2, 9)}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: `flex items-start ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex items-center h-5", children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "input",
+          {
+            id: generatedId,
+            type: "checkbox",
+            ref,
+            className: "peer sr-only",
+            checked,
+            onChange: handleChange,
+            disabled,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "div",
+          {
+            className: `
+                h-5 w-5 rounded border border-slate-300 bg-white shadow-sm transition-all
+                peer-focus:ring-2 peer-focus:ring-primary-500 peer-focus:ring-offset-2
+                peer-checked:bg-primary-600 peer-checked:border-primary-600
+                peer-disabled:cursor-not-allowed peer-disabled:opacity-50
+                hover:border-primary-400
+                flex items-center justify-center
+              `,
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Check, { className: `h-3.5 w-3.5 text-white transition-opacity ${checked ? "opacity-100" : "opacity-0"}`, strokeWidth: 3 })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "label",
+        {
+          htmlFor: generatedId,
+          className: `ml-3 text-sm font-medium ${disabled ? "text-slate-400" : "text-slate-700"} cursor-pointer select-none`,
+          children: label
+        }
+      )
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Checkbox
+});

package/dist/Checkbox/Checkbox.mjs

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

package/dist/Dialog/Dialog.js

@@ -0,0 +1,129 @@
+"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/Dialog/Dialog.tsx
+var Dialog_exports = {};
+__export(Dialog_exports, {
+  Dialog: () => Dialog
+});
+module.exports = __toCommonJS(Dialog_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+  "svg",
+  {
+    xmlns: "http://www.w3.org/2000/svg",
+    width: "24",
+    height: "24",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    className: "h-5 w-5",
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m6 6 12 12" })
+    ]
+  }
+);
+var Dialog = (0, import_react.forwardRef)(
+  ({ isOpen, onClose, title, children, variant = "default", description, className, ...props }, ref) => {
+    const dialogRef = (0, import_react.useRef)(null);
+    (0, import_react.useImperativeHandle)(ref, () => dialogRef.current);
+    (0, import_react.useEffect)(() => {
+      const dialog = dialogRef.current;
+      if (!dialog) return;
+      if (isOpen) {
+        if (!dialog.open) {
+          dialog.showModal();
+          document.body.style.overflow = "hidden";
+        }
+      } else {
+        if (dialog.open) {
+          dialog.close();
+          document.body.style.overflow = "";
+        }
+      }
+    }, [isOpen]);
+    (0, import_react.useEffect)(() => {
+      const dialog = dialogRef.current;
+      if (!dialog) return;
+      const handleClose = () => {
+        onClose();
+        document.body.style.overflow = "";
+      };
+      dialog.addEventListener("close", handleClose);
+      const handleBackdropClick = (e) => {
+        const rect = dialog.getBoundingClientRect();
+        const isInDialog = rect.top <= e.clientY && e.clientY <= rect.top + rect.height && rect.left <= e.clientX && e.clientX <= rect.left + rect.width;
+        if (!isInDialog) {
+          dialog.close();
+        }
+      };
+      dialog.addEventListener("click", handleBackdropClick);
+      return () => {
+        dialog.removeEventListener("close", handleClose);
+        dialog.removeEventListener("click", handleBackdropClick);
+      };
+    }, [onClose]);
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "dialog",
+      {
+        ref: dialogRef,
+        className: `
+          backdrop:bg-slate-900/50 backdrop:backdrop-blur-sm
+          open:animate-in open:fade-in-0 open:zoom-in-95
+          bg-white rounded-xl shadow-2xl ring-1 ring-slate-900/5 
+          w-full max-w-lg p-0
+          ${className || ""}
+        `,
+        "aria-labelledby": "dialog-title",
+        "aria-describedby": description ? "dialog-desc" : void 0,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-slate-100", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { id: "dialog-title", className: `text-lg font-semibold ${variant === "alert" ? "text-red-600" : "text-slate-900"}`, children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              "button",
+              {
+                onClick: () => {
+                  dialogRef.current?.close();
+                },
+                className: "p-1 rounded-md text-slate-400 hover:text-slate-500 hover:bg-slate-100 focus:outline-none focus:ring-2 focus:ring-primary-500 transition-colors",
+                "aria-label": "Close dialog",
+                children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(CloseIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "px-6 py-4", children: [
+            description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { id: "dialog-desc", className: "text-sm text-slate-500 mb-4", children: description }),
+            children
+          ] })
+        ]
+      }
+    );
+  }
+);
+Dialog.displayName = "Dialog";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Dialog
+});

package/dist/Dialog/Dialog.mjs

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

package/dist/FormField/FormField.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/FormField/FormField.tsx
+var FormField_exports = {};
+__export(FormField_exports, {
+  FormField: () => FormField
+});
+module.exports = __toCommonJS(FormField_exports);
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var FormField = (0, import_react.forwardRef)(
+  ({
+    label,
+    error,
+    helpText,
+    required,
+    id,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const generatedId = (0, import_react.useId)();
+    const inputId = id || `input-${generatedId}`;
+    const helpTextId = `help-${generatedId}`;
+    const errorId = `error-${generatedId}`;
+    const describedBy = [
+      helpText ? helpTextId : null,
+      error ? errorId : null
+    ].filter(Boolean).join(" ");
+    const containerStyle = {
+      display: "flex",
+      flexDirection: "column",
+      marginBottom: "1rem",
+      fontFamily: "system-ui, sans-serif",
+      ...style
+    };
+    const labelStyle = {
+      marginBottom: "0.5rem",
+      fontWeight: "600",
+      color: "#333"
+    };
+    const inputStyle = {
+      padding: "0.5rem",
+      borderRadius: "4px",
+      border: error ? "2px solid #dc3545" : "1px solid #ced4da",
+      fontSize: "1rem",
+      minHeight: "44px"
+      // Touch target
+    };
+    const errorStyle = {
+      color: "#dc3545",
+      fontSize: "0.875rem",
+      marginTop: "0.25rem",
+      display: "flex",
+      alignItems: "center"
+    };
+    const helpStyle = {
+      color: "#6c757d",
+      fontSize: "0.875rem",
+      marginTop: "0.25rem"
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: containerStyle, className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { htmlFor: inputId, style: labelStyle, children: [
+        label,
+        required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { color: "#dc3545", marginLeft: "4px" }, children: "*" }),
+        required && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "sr-only", children: " (obligatoriskt)" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+        "input",
+        {
+          ref,
+          id: inputId,
+          "aria-invalid": !!error,
+          "aria-describedby": describedBy || void 0,
+          "aria-required": required,
+          required,
+          style: inputStyle,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { id: errorId, style: errorStyle, role: "alert", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { "aria-hidden": "true", style: { marginRight: "4px" }, children: "\u26A0\uFE0F" }),
+        error
+      ] }),
+      helpText && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { id: helpTextId, style: helpStyle, children: helpText })
+    ] });
+  }
+);
+FormField.displayName = "FormField";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  FormField
+});

package/dist/FormField/FormField.mjs

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

package/dist/Heading/Heading.js

@@ -0,0 +1,48 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/Heading/Heading.tsx
+var Heading_exports = {};
+__export(Heading_exports, {
+  Heading: () => Heading
+});
+module.exports = __toCommonJS(Heading_exports);
+var import_react = __toESM(require("react"));
+var import_jsx_runtime = require("react/jsx-runtime");
+var Heading = import_react.default.forwardRef(
+  ({ level, children, className, ...props }, ref) => {
+    const Tag = `h${level}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(Tag, { ref, className, ...props, children });
+  }
+);
+Heading.displayName = "Heading";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  Heading
+});

package/dist/Heading/Heading.mjs

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