@holmdigital/components 1.1.0

package/dist/index.mjs

@@ -0,0 +1,308 @@
+import {
+  NavigationMenu
+} from "./chunk-GK4BYT56.mjs";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger
+} from "./chunk-V2JYAFB7.mjs";
+import {
+  SkipLink
+} from "./chunk-MKKQLWGK.mjs";
+import {
+  Switch
+} from "./chunk-5RKBS475.mjs";
+import {
+  ToastProvider,
+  useToast
+} from "./chunk-2MJRKHPL.mjs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger
+} from "./chunk-C5M6C7KT.mjs";
+import {
+  Button
+} from "./chunk-NDYRGXQ6.mjs";
+import {
+  Checkbox
+} from "./chunk-NOE5QKC2.mjs";
+import {
+  Heading
+} from "./chunk-W4ZHBRFT.mjs";
+import {
+  FormField
+} from "./chunk-PLT5CAFO.mjs";
+import {
+  Modal
+} from "./chunk-HALLFO25.mjs";
+import {
+  Dialog
+} from "./chunk-LZ42XDDI.mjs";
+import {
+  RadioGroup
+} from "./chunk-YMSNGQN6.mjs";
+
+// src/Breadcrumbs/Breadcrumbs.tsx
+import React, { Children, isValidElement, cloneElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var BreadcrumbItem = ({ href, isCurrent, children, className, ...props }) => {
+  if (isCurrent) {
+    return /* @__PURE__ */ jsx("li", { className: `flex items-center text-slate-900 font-semibold ${className || ""}`, "aria-current": "page", ...props, children });
+  }
+  return /* @__PURE__ */ jsx("li", { className: `flex items-center text-slate-500 hover:text-slate-700 transition-colors ${className || ""}`, ...props, children: href ? /* @__PURE__ */ jsx("a", { href, className: "hover:underline focus:outline-none focus:ring-2 focus:ring-primary-500 rounded-sm", children }) : children });
+};
+var Breadcrumbs = ({ separator, children, className, ...props }) => {
+  const separatorIcon = separator || /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", className: "text-slate-400 mx-2", children: /* @__PURE__ */ jsx("path", { d: "m9 18 6-6-6-6" }) });
+  const items = Children.toArray(children).filter(isValidElement);
+  return /* @__PURE__ */ jsx("nav", { "aria-label": "Breadcrumb", className, ...props, children: /* @__PURE__ */ jsx("ol", { className: "flex items-center flex-wrap", children: items.map((child, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+      cloneElement(child, {
+        isCurrent: isLast || child.props.isCurrent
+      }),
+      !isLast && /* @__PURE__ */ jsx("li", { "aria-hidden": "true", className: "flex items-center select-none", children: separatorIcon })
+    ] }, index);
+  }) }) });
+};
+
+// src/Accordion/Accordion.tsx
+import React2, { createContext, useContext, useState } from "react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var ChevronIcon = ({ className }) => /* @__PURE__ */ jsx2(
+  "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,
+    children: /* @__PURE__ */ jsx2("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+var AccordionContext = createContext(void 0);
+var Accordion = ({ type = "single", defaultValue, children, className }) => {
+  const [openItems, setOpenItems] = useState(() => {
+    if (Array.isArray(defaultValue)) return defaultValue;
+    if (defaultValue) return [defaultValue];
+    return [];
+  });
+  const toggleItem = (value) => {
+    setOpenItems((prev) => {
+      if (type === "single") {
+        return prev.includes(value) ? [] : [value];
+      }
+      return prev.includes(value) ? prev.filter((item) => item !== value) : [...prev, value];
+    });
+  };
+  return /* @__PURE__ */ jsx2(AccordionContext.Provider, { value: { openItems, toggleItem }, children: /* @__PURE__ */ jsx2("div", { className: `space-y-1 ${className || ""}`, children }) });
+};
+var AccordionItem = ({ value, children, className }) => {
+  const context = useContext(AccordionContext);
+  if (!context) throw new Error("AccordionItem must be used within an Accordion");
+  const isOpen = context.openItems.includes(value);
+  return /* @__PURE__ */ jsx2("div", { className: `border border-slate-200 rounded-lg overflow-hidden ${className || ""}`, children: React2.Children.map(children, (child) => {
+    if (React2.isValidElement(child)) {
+      return React2.cloneElement(child, {
+        ...child.props,
+        value,
+        // Pass value down to Trigger and Content
+        isOpen
+      });
+    }
+    return child;
+  }) });
+};
+var AccordionTrigger = ({ children, className, value, isOpen, ...props }) => {
+  const context = useContext(AccordionContext);
+  return /* @__PURE__ */ jsxs2(
+    "button",
+    {
+      type: "button",
+      className: `w-full flex items-center justify-between px-4 py-3 text-left font-medium text-slate-900 bg-white hover:bg-slate-50 transition-colors focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-inset ${className || ""}`,
+      onClick: () => value && context?.toggleItem(value),
+      "aria-expanded": isOpen,
+      "aria-controls": `accordion-content-${value}`,
+      id: `accordion-trigger-${value}`,
+      ...props,
+      children: [
+        children,
+        /* @__PURE__ */ jsx2(ChevronIcon, { className: `h-4 w-4 text-slate-500 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` })
+      ]
+    }
+  );
+};
+var AccordionContent = ({ children, className, value, isOpen }) => {
+  return /* @__PURE__ */ jsx2(
+    "div",
+    {
+      id: `accordion-content-${value}`,
+      role: "region",
+      "aria-labelledby": `accordion-trigger-${value}`,
+      hidden: !isOpen,
+      className: `px-4 py-3 bg-white text-slate-600 border-t border-slate-100 text-sm leading-relaxed ${!isOpen ? "hidden" : ""} ${className || ""}`,
+      children
+    }
+  );
+};
+
+// src/Tabs/Tabs.tsx
+import { createContext as createContext2, useContext as useContext2, useState as useState2, useRef } from "react";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var TabsContext = createContext2(void 0);
+var Tabs = ({
+  defaultValue,
+  value,
+  onValueChange,
+  orientation = "horizontal",
+  activationMode = "automatic",
+  children,
+  className
+}) => {
+  const [baseId] = useState2(() => Math.random().toString(36).substr(2, 9));
+  const [internalValue, setInternalValue] = useState2(defaultValue || "");
+  const isControlled = value !== void 0;
+  const activeTab = isControlled ? value : internalValue;
+  const setActiveTab = (newValue) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ jsx3(TabsContext.Provider, { value: { activeTab, setActiveTab, orientation, activationMode, baseId }, children: /* @__PURE__ */ jsx3("div", { className: `flex ${orientation === "vertical" ? "flex-col md:flex-row gap-4" : "flex-col"} ${className || ""}`, children }) });
+};
+var TabsList = ({ children, className, ariaLabel }) => {
+  const context = useContext2(TabsContext);
+  if (!context) throw new Error("TabsList must be used within Tabs");
+  const listRef = useRef(null);
+  const handleKeyDown = (e) => {
+    const list = listRef.current;
+    if (!list) return;
+    const tabs = Array.from(list.querySelectorAll('[role="tab"]:not([disabled])'));
+    const index = tabs.indexOf(document.activeElement);
+    if (index === -1) return;
+    let nextIndex = index;
+    const lastIndex = tabs.length - 1;
+    switch (e.key) {
+      case "ArrowLeft":
+      case "ArrowUp":
+        nextIndex = index === 0 ? lastIndex : index - 1;
+        break;
+      case "ArrowRight":
+      case "ArrowDown":
+        nextIndex = index === lastIndex ? 0 : index + 1;
+        break;
+      case "Home":
+        nextIndex = 0;
+        break;
+      case "End":
+        nextIndex = lastIndex;
+        break;
+      default:
+        return;
+    }
+    e.preventDefault();
+    const nextTab = tabs[nextIndex];
+    nextTab.focus();
+    if (context.activationMode === "automatic") {
+      nextTab.click();
+    }
+  };
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      ref: listRef,
+      role: "tablist",
+      "aria-orientation": context.orientation,
+      "aria-label": ariaLabel,
+      className: `flex ${context.orientation === "vertical" ? "flex-col border-r border-slate-200" : "border-b border-slate-200"} ${className || ""}`,
+      onKeyDown: handleKeyDown,
+      tabIndex: -1,
+      children
+    }
+  );
+};
+var TabTrigger = ({ value, children, className, ...props }) => {
+  const context = useContext2(TabsContext);
+  if (!context) throw new Error("TabTrigger must be used within Tabs");
+  const isActive = context.activeTab === value;
+  const triggerId = `tab-${context.baseId}-${value}`;
+  const contentId = `content-${context.baseId}-${value}`;
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      id: triggerId,
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-controls": contentId,
+      tabIndex: isActive ? 0 : -1,
+      onClick: () => context.setActiveTab(value),
+      className: `
+                px-4 py-2 text-sm font-medium transition-colors focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500
+                ${context.orientation === "horizontal" ? "border-b-2" : "border-r-2 text-left"}
+                ${isActive ? `border-primary-500 text-primary-600 bg-primary-50/50` : `border-transparent text-slate-500 hover:text-slate-700 hover:bg-slate-50`}
+                ${className || ""}
+            `,
+      ...props,
+      children
+    }
+  );
+};
+var TabsContent = ({ value, children, className }) => {
+  const context = useContext2(TabsContext);
+  if (!context) throw new Error("TabsContent must be used within Tabs");
+  const isActive = context.activeTab === value;
+  const triggerId = `tab-${context.baseId}-${value}`;
+  const contentId = `content-${context.baseId}-${value}`;
+  if (!isActive) return null;
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      id: contentId,
+      role: "tabpanel",
+      "aria-labelledby": triggerId,
+      tabIndex: 0,
+      className: `py-4 focus:outline-none focus-visible:ring-2 focus-visible:ring-primary-500 rounded-md ${className || ""}`,
+      children
+    }
+  );
+};
+export {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  BreadcrumbItem,
+  Breadcrumbs,
+  Button,
+  Checkbox,
+  Dialog,
+  FormField,
+  Heading,
+  Modal,
+  NavigationMenu,
+  RadioGroup,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SkipLink,
+  Switch,
+  TabTrigger,
+  Tabs,
+  TabsContent,
+  TabsList,
+  ToastProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  useToast
+};

package/package.json

@@ -0,0 +1,113 @@
+{
+    "name": "@holmdigital/components",
+    "author": "Holm Digital AB",
+    "version": "1.1.0",
+    "private": false,
+    "publishConfig": {
+        "access": "public",
+        "registry": "https://registry.npmjs.org/"
+    },
+    "description": "Prescriptive, accessible React components for regulatory compliance",
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/holmdigital/a11y-hd.git",
+        "directory": "packages/components"
+    },
+    "main": "./dist/index.js",
+    "module": "./dist/index.mjs",
+    "types": "./dist/index.d.ts",
+    "exports": {
+        ".": {
+            "import": "./dist/index.mjs",
+            "require": "./dist/index.js",
+            "types": "./dist/index.d.ts"
+        },
+        "./Button": {
+            "import": "./dist/Button/Button.mjs",
+            "types": "./dist/Button/Button.d.ts"
+        },
+        "./FormField": {
+            "import": "./dist/FormField/FormField.mjs",
+            "types": "./dist/FormField/FormField.d.ts"
+        },
+        "./Dialog": {
+            "import": "./dist/Dialog/Dialog.mjs",
+            "types": "./dist/Dialog/Dialog.d.ts"
+        },
+        "./Modal": {
+            "import": "./dist/Modal/Modal.mjs",
+            "types": "./dist/Modal/Modal.d.ts"
+        },
+        "./SkipLink": {
+            "import": "./dist/SkipLink/SkipLink.mjs",
+            "types": "./dist/SkipLink/SkipLink.d.ts"
+        },
+        "./NavigationMenu": {
+            "import": "./dist/NavigationMenu/NavigationMenu.mjs",
+            "types": "./dist/NavigationMenu/NavigationMenu.d.ts"
+        },
+        "./Checkbox": {
+            "import": "./dist/Checkbox/Checkbox.mjs",
+            "types": "./dist/Checkbox/Checkbox.d.ts"
+        },
+        "./RadioGroup": {
+            "import": "./dist/RadioGroup/RadioGroup.mjs",
+            "types": "./dist/RadioGroup/RadioGroup.d.ts"
+        },
+        "./Select": {
+            "import": "./dist/Select/Select.mjs",
+            "types": "./dist/Select/Select.d.ts"
+        },
+        "./Switch": {
+            "import": "./dist/Switch/Switch.mjs",
+            "types": "./dist/Switch/Switch.d.ts"
+        },
+        "./Toast": {
+            "import": "./dist/Toast/Toast.mjs",
+            "types": "./dist/Toast/Toast.d.ts"
+        },
+        "./Tooltip": {
+            "import": "./dist/Tooltip/Tooltip.mjs",
+            "types": "./dist/Tooltip/Tooltip.d.ts"
+        },
+        "./Heading": {
+            "import": "./dist/Heading/Heading.mjs",
+            "types": "./dist/Heading/Heading.d.ts"
+        }
+    },
+    "files": [
+        "dist",
+        "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",
+        "lint": "eslint src --ext .ts,.tsx",
+        "storybook": "storybook dev -p 6006",
+        "build-storybook": "storybook build"
+    },
+    "keywords": [
+        "react",
+        "components",
+        "accessibility",
+        "a11y",
+        "wcag",
+        "design-system"
+    ],
+    "peerDependencies": {
+        "react": ">=18.0.0",
+        "react-dom": ">=18.0.0"
+    },
+    "devDependencies": {
+        "@types/react": "^18.2.0",
+        "@types/react-dom": "^18.2.0",
+        "react": "^18.2.0",
+        "react-dom": "^18.2.0",
+        "storybook": "^7.6.0",
+        "tsup": "^8.3.5",
+        "typescript": "^5.7.2"
+    },
+    "dependencies": {
+        "lucide-react": "^0.556.0"
+    }
+}