@holmdigital/components 1.1.0

package/dist/chunk-GK4BYT56.mjs

@@ -0,0 +1,117 @@
+// src/NavigationMenu/NavigationMenu.tsx
+import { useState, useRef, useEffect, forwardRef } from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var NavigationMenu = forwardRef(
+  ({ items, className, "aria-label": ariaLabel = "Main Navigation" }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        ref,
+        className: `flex items-center ${className || ""}`,
+        "aria-label": ariaLabel,
+        children: /* @__PURE__ */ jsx("ul", { className: "flex flex-wrap gap-2 m-0 p-0 list-none", children: items.map((item, index) => /* @__PURE__ */ jsx(MenuItem, { item }, index)) })
+      }
+    );
+  }
+);
+NavigationMenu.displayName = "NavigationMenu";
+var MenuItem = ({ item }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const containerRef = useRef(null);
+  const timeoutRef = useRef();
+  const hasChildren = item.children && item.children.length > 0;
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    if (isOpen) {
+      document.addEventListener("click", handleClickOutside);
+    }
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [isOpen]);
+  const handleKeyDown = (e) => {
+    if (e.key === "Escape" && isOpen) {
+      setIsOpen(false);
+      const trigger = containerRef.current?.querySelector("button");
+      trigger?.focus();
+    }
+  };
+  const handleMouseEnter = () => {
+    clearTimeout(timeoutRef.current);
+    setIsOpen(true);
+  };
+  const handleMouseLeave = () => {
+    timeoutRef.current = setTimeout(() => setIsOpen(false), 200);
+  };
+  return /* @__PURE__ */ jsx(
+    "li",
+    {
+      ref: containerRef,
+      className: "relative group",
+      onKeyDown: handleKeyDown,
+      onMouseEnter: hasChildren ? handleMouseEnter : void 0,
+      onMouseLeave: hasChildren ? handleMouseLeave : void 0,
+      children: hasChildren ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsxs(
+          "button",
+          {
+            onClick: () => setIsOpen(!isOpen),
+            "aria-expanded": isOpen,
+            "aria-haspopup": "true",
+            className: `
+                            flex items-center gap-1 px-4 py-2 rounded-md
+                            text-slate-700 font-medium hover:bg-slate-100 focus:bg-slate-100
+                            transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500
+                        `,
+            children: [
+              item.label,
+              /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  className: `w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`,
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ jsx("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          "ul",
+          {
+            className: `
+                            absolute top-full left-0 mt-1 min-w-[200px]
+                            bg-white border border-slate-200 rounded-lg shadow-xl
+                            py-2 z-50
+                            transform origin-top transition-all duration-200
+                            ${isOpen ? "opacity-100 scale-100 visible" : "opacity-0 scale-95 invisible"}
+                        `,
+            children: item.children?.map((child, idx) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+              "a",
+              {
+                href: child.href,
+                className: "block px-4 py-2 text-slate-700 hover:bg-slate-50 hover:text-primary-600 focus:bg-slate-50 focus:text-primary-600 focus:outline-none",
+                children: child.label
+              }
+            ) }, idx))
+          }
+        )
+      ] }) : /* @__PURE__ */ jsx(
+        "a",
+        {
+          href: item.href,
+          className: "block px-4 py-2 text-slate-700 font-medium rounded-md hover:bg-slate-100 focus:bg-slate-100 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500",
+          children: item.label
+        }
+      )
+    }
+  );
+};
+
+export {
+  NavigationMenu
+};

package/dist/chunk-HALLFO25.mjs

@@ -0,0 +1,22 @@
+import {
+  Dialog
+} from "./chunk-LZ42XDDI.mjs";
+
+// src/Modal/Modal.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var Modal = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(
+    Dialog,
+    {
+      ref,
+      ...props,
+      className: `max-w-2xl ${props.className || ""}`
+    }
+  );
+});
+Modal.displayName = "Modal";
+
+export {
+  Modal
+};

package/dist/chunk-LZ42XDDI.mjs

@@ -0,0 +1,105 @@
+// src/Dialog/Dialog.tsx
+import { useRef, useEffect, forwardRef, useImperativeHandle } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var CloseIcon = () => /* @__PURE__ */ 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__ */ jsx("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ jsx("path", { d: "m6 6 12 12" })
+    ]
+  }
+);
+var Dialog = forwardRef(
+  ({ isOpen, onClose, title, children, variant = "default", description, className, ...props }, ref) => {
+    const dialogRef = useRef(null);
+    useImperativeHandle(ref, () => dialogRef.current);
+    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]);
+    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__ */ 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__ */ jsxs("div", { className: "flex items-center justify-between px-6 py-4 border-b border-slate-100", children: [
+            /* @__PURE__ */ jsx("h2", { id: "dialog-title", className: `text-lg font-semibold ${variant === "alert" ? "text-red-600" : "text-slate-900"}`, children: title }),
+            /* @__PURE__ */ 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__ */ jsx(CloseIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "px-6 py-4", children: [
+            description && /* @__PURE__ */ jsx("p", { id: "dialog-desc", className: "text-sm text-slate-500 mb-4", children: description }),
+            children
+          ] })
+        ]
+      }
+    );
+  }
+);
+Dialog.displayName = "Dialog";
+
+export {
+  Dialog
+};

package/dist/chunk-MKKQLWGK.mjs

@@ -0,0 +1,35 @@
+// src/SkipLink/SkipLink.tsx
+import { forwardRef } from "react";
+import { jsx } from "react/jsx-runtime";
+var SkipLink = forwardRef(
+  ({ targetId = "main", className, style, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsx(
+      "a",
+      {
+        ref,
+        href: `#${targetId}`,
+        className: `
+                    fixed top-4 left-4 z-50 
+                    px-4 py-3 
+                    bg-white text-slate-900 font-medium 
+                    rounded-md shadow-lg ring-2 ring-slate-900
+                    transition-transform duration-200
+                    -translate-y-[150%] focus:translate-y-0
+                    ${className || ""}
+                `,
+        style: {
+          // Ensure it stays on top of everything
+          zIndex: 9999,
+          ...style
+        },
+        ...props,
+        children: children || "Hoppa till huvudinneh\xE5ll"
+      }
+    );
+  }
+);
+SkipLink.displayName = "SkipLink";
+
+export {
+  SkipLink
+};

package/dist/chunk-NDYRGXQ6.mjs

@@ -0,0 +1,93 @@
+// src/Button/Button.tsx
+import { forwardRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Button = 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__ */ jsxs(
+      "button",
+      {
+        ref,
+        style,
+        disabled: disabled || isLoading,
+        "aria-busy": isLoading,
+        tabIndex: props.tabIndex,
+        ...props,
+        children: [
+          isLoading ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { marginRight: "8px" }, children: "\u23F3" }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+export {
+  Button
+};

package/dist/chunk-NOE5QKC2.mjs

@@ -0,0 +1,58 @@
+// src/Checkbox/Checkbox.tsx
+import { forwardRef } from "react";
+import { Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var Checkbox = 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__ */ jsxs("div", { className: `flex items-start ${className}`, children: [
+      /* @__PURE__ */ jsx("div", { className: "flex items-center h-5", children: /* @__PURE__ */ jsxs("div", { className: "relative", children: [
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            id: generatedId,
+            type: "checkbox",
+            ref,
+            className: "peer sr-only",
+            checked,
+            onChange: handleChange,
+            disabled,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ 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__ */ jsx(Check, { className: `h-3.5 w-3.5 text-white transition-opacity ${checked ? "opacity-100" : "opacity-0"}`, strokeWidth: 3 })
+          }
+        )
+      ] }) }),
+      /* @__PURE__ */ 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";
+
+export {
+  Checkbox
+};

package/dist/chunk-PLT5CAFO.mjs

@@ -0,0 +1,86 @@
+// src/FormField/FormField.tsx
+import { forwardRef, useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var FormField = forwardRef(
+  ({
+    label,
+    error,
+    helpText,
+    required,
+    id,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const generatedId = 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__ */ jsxs("div", { style: containerStyle, className, children: [
+      /* @__PURE__ */ jsxs("label", { htmlFor: inputId, style: labelStyle, children: [
+        label,
+        required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "#dc3545", marginLeft: "4px" }, children: "*" }),
+        required && /* @__PURE__ */ jsx("span", { className: "sr-only", children: " (obligatoriskt)" })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id: inputId,
+          "aria-invalid": !!error,
+          "aria-describedby": describedBy || void 0,
+          "aria-required": required,
+          required,
+          style: inputStyle,
+          ...props
+        }
+      ),
+      error && /* @__PURE__ */ jsxs("div", { id: errorId, style: errorStyle, role: "alert", children: [
+        /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { marginRight: "4px" }, children: "\u26A0\uFE0F" }),
+        error
+      ] }),
+      helpText && /* @__PURE__ */ jsx("div", { id: helpTextId, style: helpStyle, children: helpText })
+    ] });
+  }
+);
+FormField.displayName = "FormField";
+
+export {
+  FormField
+};

package/dist/chunk-V2JYAFB7.mjs

@@ -0,0 +1,130 @@
+// src/Select/Select.tsx
+import { useState, useRef, useEffect, createContext, useContext } from "react";
+import { ChevronDown, Check } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var SelectContext = createContext(void 0);
+var Select = ({ value, onChange, children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+  const [highlightedIndex, setHighlightedIndex] = useState(-1);
+  const optionsRef = useRef([]);
+  const containerRef = useRef(null);
+  useEffect(() => {
+    const handleClickOutside = (event) => {
+      if (containerRef.current && !containerRef.current.contains(event.target)) {
+        setIsOpen(false);
+      }
+    };
+    document.addEventListener("mousedown", handleClickOutside);
+    return () => document.removeEventListener("mousedown", handleClickOutside);
+  }, []);
+  const handleKeyDown = (e) => {
+    if (!isOpen) {
+      if (e.key === "Enter" || e.key === " " || e.key === "ArrowDown") {
+        e.preventDefault();
+        setIsOpen(true);
+        setHighlightedIndex(0);
+      }
+      return;
+    }
+    switch (e.key) {
+      case "ArrowDown":
+        e.preventDefault();
+        setHighlightedIndex((prev) => Math.min(prev + 1, optionsRef.current.length - 1));
+        break;
+      case "ArrowUp":
+        e.preventDefault();
+        setHighlightedIndex((prev) => Math.max(prev - 1, 0));
+        break;
+      case "Enter":
+      case " ":
+        e.preventDefault();
+        if (highlightedIndex >= 0 && highlightedIndex < optionsRef.current.length) {
+          const option = optionsRef.current[highlightedIndex];
+          if (option) {
+            option.click();
+          }
+        }
+        break;
+      case "Escape":
+        e.preventDefault();
+        setIsOpen(false);
+        break;
+    }
+  };
+  return /* @__PURE__ */ jsx(SelectContext.Provider, { value: { value, onChange, isOpen, setIsOpen, highlightedIndex, setHighlightedIndex, optionsRef }, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative inline-block text-left w-full",
+      onKeyDown: handleKeyDown,
+      children
+    }
+  ) });
+};
+var SelectTrigger = ({ children, className = "", placeholder = "Select..." }) => {
+  const context = useContext(SelectContext);
+  if (!context) throw new Error("SelectTrigger must be used within Select");
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      onClick: () => context.setIsOpen(!context.isOpen),
+      "aria-haspopup": "listbox",
+      "aria-expanded": context.isOpen,
+      className: `flex items-center justify-between w-full px-4 py-2 text-sm bg-white border border-slate-300 rounded-md focus:outline-none focus:ring-2 focus:ring-slate-900 focus:border-transparent ${className}`,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: context.value ? "text-slate-900" : "text-slate-500", children: children || placeholder }),
+        /* @__PURE__ */ jsx(ChevronDown, { className: "w-4 h-4 ml-2 opacity-50" })
+      ]
+    }
+  );
+};
+var SelectContent = ({ children }) => {
+  const context = useContext(SelectContext);
+  useEffect(() => {
+    if (context && context.isOpen) {
+      context.optionsRef.current = [];
+    }
+  }, [context?.isOpen]);
+  if (!context || !context.isOpen) return null;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: "absolute z-10 w-full mt-1 bg-white border border-slate-200 rounded-md shadow-lg max-h-60 overflow-auto focus:outline-none",
+      role: "listbox",
+      children
+    }
+  );
+};
+var SelectItem = ({ value, children }) => {
+  const context = useContext(SelectContext);
+  if (!context) throw new Error("SelectItem must be used within Select");
+  const isSelected = context.value === value;
+  const index = context.optionsRef.current.length;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: (el) => {
+        context.optionsRef.current[index] = el;
+      },
+      role: "option",
+      "aria-selected": isSelected,
+      onClick: () => {
+        context.onChange(value);
+        context.setIsOpen(false);
+      },
+      className: `flex items-center justify-between px-4 py-2 text-sm cursor-pointer ${context.highlightedIndex === index ? "bg-slate-100" : ""} ${isSelected ? "bg-slate-50 text-slate-900 font-medium" : "text-slate-700"}`,
+      children: [
+        children,
+        isSelected && /* @__PURE__ */ jsx(Check, { className: "w-4 h-4 text-slate-900" })
+      ]
+    }
+  );
+};
+
+export {
+  Select,
+  SelectTrigger,
+  SelectContent,
+  SelectItem
+};

package/dist/chunk-W4ZHBRFT.mjs

@@ -0,0 +1,14 @@
+// src/Heading/Heading.tsx
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+var Heading = React.forwardRef(
+  ({ level, children, className, ...props }, ref) => {
+    const Tag = `h${level}`;
+    return /* @__PURE__ */ jsx(Tag, { ref, className, ...props, children });
+  }
+);
+Heading.displayName = "Heading";
+
+export {
+  Heading
+};