@holmdigital/components 1.1.0

package/dist/index.js

@@ -0,0 +1,1256 @@
+"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/index.ts
+var index_exports = {};
+__export(index_exports, {
+  Accordion: () => Accordion,
+  AccordionContent: () => AccordionContent,
+  AccordionItem: () => AccordionItem,
+  AccordionTrigger: () => AccordionTrigger,
+  BreadcrumbItem: () => BreadcrumbItem,
+  Breadcrumbs: () => Breadcrumbs,
+  Button: () => Button,
+  Checkbox: () => Checkbox,
+  Dialog: () => Dialog,
+  FormField: () => FormField,
+  Heading: () => Heading,
+  Modal: () => Modal,
+  NavigationMenu: () => NavigationMenu,
+  RadioGroup: () => RadioGroup,
+  Select: () => Select,
+  SelectContent: () => SelectContent,
+  SelectItem: () => SelectItem,
+  SelectTrigger: () => SelectTrigger,
+  SkipLink: () => SkipLink,
+  Switch: () => Switch,
+  TabTrigger: () => TabTrigger,
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  ToastProvider: () => ToastProvider,
+  Tooltip: () => Tooltip,
+  TooltipContent: () => TooltipContent,
+  TooltipProvider: () => TooltipProvider,
+  TooltipTrigger: () => TooltipTrigger,
+  useToast: () => useToast
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/Button/Button.tsx
+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";
+
+// src/FormField/FormField.tsx
+var import_react2 = require("react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var FormField = (0, import_react2.forwardRef)(
+  ({
+    label,
+    error,
+    helpText,
+    required,
+    id,
+    className = "",
+    style,
+    ...props
+  }, ref) => {
+    const generatedId = (0, import_react2.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_runtime2.jsxs)("div", { style: containerStyle, className, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("label", { htmlFor: inputId, style: labelStyle, children: [
+        label,
+        required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", style: { color: "#dc3545", marginLeft: "4px" }, children: "*" }),
+        required && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "sr-only", children: " (obligatoriskt)" })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime2.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_runtime2.jsxs)("div", { id: errorId, style: errorStyle, role: "alert", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { "aria-hidden": "true", style: { marginRight: "4px" }, children: "\u26A0\uFE0F" }),
+        error
+      ] }),
+      helpText && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { id: helpTextId, style: helpStyle, children: helpText })
+    ] });
+  }
+);
+FormField.displayName = "FormField";
+
+// src/Dialog/Dialog.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CloseIcon = () => /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)("path", { d: "M18 6 6 18" }),
+      /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("path", { d: "m6 6 12 12" })
+    ]
+  }
+);
+var Dialog = (0, import_react3.forwardRef)(
+  ({ isOpen, onClose, title, children, variant = "default", description, className, ...props }, ref) => {
+    const dialogRef = (0, import_react3.useRef)(null);
+    (0, import_react3.useImperativeHandle)(ref, () => dialogRef.current);
+    (0, import_react3.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_react3.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_runtime3.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_runtime3.jsxs)("div", { className: "flex items-center justify-between px-6 py-4 border-b border-slate-100", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("h2", { id: "dialog-title", className: `text-lg font-semibold ${variant === "alert" ? "text-red-600" : "text-slate-900"}`, children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.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_runtime3.jsx)(CloseIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "px-6 py-4", children: [
+            description && /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("p", { id: "dialog-desc", className: "text-sm text-slate-500 mb-4", children: description }),
+            children
+          ] })
+        ]
+      }
+    );
+  }
+);
+Dialog.displayName = "Dialog";
+
+// src/Modal/Modal.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Modal = (0, import_react4.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    Dialog,
+    {
+      ref,
+      ...props,
+      className: `max-w-2xl ${props.className || ""}`
+    }
+  );
+});
+Modal.displayName = "Modal";
+
+// src/SkipLink/SkipLink.tsx
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var SkipLink = (0, import_react5.forwardRef)(
+  ({ targetId = "main", className, style, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.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";
+
+// src/NavigationMenu/NavigationMenu.tsx
+var import_react6 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var NavigationMenu = (0, import_react6.forwardRef)(
+  ({ items, className, "aria-label": ariaLabel = "Main Navigation" }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "nav",
+      {
+        ref,
+        className: `flex items-center ${className || ""}`,
+        "aria-label": ariaLabel,
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("ul", { className: "flex flex-wrap gap-2 m-0 p-0 list-none", children: items.map((item, index) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(MenuItem, { item }, index)) })
+      }
+    );
+  }
+);
+NavigationMenu.displayName = "NavigationMenu";
+var MenuItem = ({ item }) => {
+  const [isOpen, setIsOpen] = (0, import_react6.useState)(false);
+  const containerRef = (0, import_react6.useRef)(null);
+  const timeoutRef = (0, import_react6.useRef)();
+  const hasChildren = item.children && item.children.length > 0;
+  (0, import_react6.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__ */ (0, import_jsx_runtime6.jsx)(
+    "li",
+    {
+      ref: containerRef,
+      className: "relative group",
+      onKeyDown: handleKeyDown,
+      onMouseEnter: hasChildren ? handleMouseEnter : void 0,
+      onMouseLeave: hasChildren ? handleMouseLeave : void 0,
+      children: hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.jsx)(
+                "svg",
+                {
+                  className: `w-4 h-4 transition-transform ${isOpen ? "rotate-180" : ""}`,
+                  fill: "none",
+                  viewBox: "0 0 24 24",
+                  stroke: "currentColor",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { strokeLinecap: "round", strokeLinejoin: "round", strokeWidth: 2, d: "M19 9l-7 7-7-7" })
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime6.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__ */ (0, import_jsx_runtime6.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
+        }
+      )
+    }
+  );
+};
+
+// src/Checkbox/Checkbox.tsx
+var import_react7 = require("react");
+var import_lucide_react = require("lucide-react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var Checkbox = (0, import_react7.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_runtime7.jsxs)("div", { className: `flex items-start ${className}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex items-center h-5", children: /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            id: generatedId,
+            type: "checkbox",
+            ref,
+            className: "peer sr-only",
+            checked,
+            onChange: handleChange,
+            disabled,
+            ...props
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime7.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_runtime7.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_runtime7.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";
+
+// src/RadioGroup/RadioGroup.tsx
+var import_react8 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var RadioGroup = (0, import_react8.forwardRef)(
+  ({ name, options, value, onChange, orientation = "vertical", className = "", label }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      "div",
+      {
+        ref,
+        className: `${className}`,
+        role: "radiogroup",
+        "aria-labelledby": label ? `${name}-label` : void 0,
+        children: [
+          label && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { id: `${name}-label`, className: "text-sm font-medium text-slate-900 mb-2", children: label }),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `flex ${orientation === "vertical" ? "flex-col space-y-3" : "flex-row space-x-6"}`, children: options.map((option) => {
+            const optionId = `${name}-${option.value}`;
+            const isChecked = value === option.value;
+            return /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "flex items-center", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative flex items-center justify-center", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "input",
+                  {
+                    id: optionId,
+                    name,
+                    type: "radio",
+                    value: option.value,
+                    checked: isChecked,
+                    disabled: option.disabled,
+                    onChange: (e) => {
+                      if (e.target.checked) {
+                        onChange?.(option.value);
+                      }
+                    },
+                    className: "peer sr-only"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "div",
+                  {
+                    className: `
+                      h-5 w-5 rounded-full 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:border-primary-600 peer-checked:bg-white
+                      peer-disabled:cursor-not-allowed peer-disabled:opacity-50
+                      hover:border-primary-400
+                    `,
+                    "aria-hidden": "true"
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                  "div",
+                  {
+                    className: `
+                      absolute h-2.5 w-2.5 rounded-full bg-primary-600 transition-transform duration-200 scale-0
+                      ${isChecked ? "scale-100" : ""}
+                    `
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+                "label",
+                {
+                  htmlFor: optionId,
+                  className: `ml-3 text-sm font-medium ${option.disabled ? "text-slate-400" : "text-slate-700"} cursor-pointer select-none`,
+                  children: option.label
+                }
+              )
+            ] }, option.value);
+          }) })
+        ]
+      }
+    );
+  }
+);
+RadioGroup.displayName = "RadioGroup";
+
+// src/Breadcrumbs/Breadcrumbs.tsx
+var import_react9 = __toESM(require("react"));
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var BreadcrumbItem = ({ href, isCurrent, children, className, ...props }) => {
+  if (isCurrent) {
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { className: `flex items-center text-slate-900 font-semibold ${className || ""}`, "aria-current": "page", ...props, children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { className: `flex items-center text-slate-500 hover:text-slate-700 transition-colors ${className || ""}`, ...props, children: href ? /* @__PURE__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.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__ */ (0, import_jsx_runtime9.jsx)("path", { d: "m9 18 6-6-6-6" }) });
+  const items = import_react9.Children.toArray(children).filter(import_react9.isValidElement);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("nav", { "aria-label": "Breadcrumb", className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("ol", { className: "flex items-center flex-wrap", children: items.map((child, index) => {
+    const isLast = index === items.length - 1;
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_react9.default.Fragment, { children: [
+      (0, import_react9.cloneElement)(child, {
+        isCurrent: isLast || child.props.isCurrent
+      }),
+      !isLast && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("li", { "aria-hidden": "true", className: "flex items-center select-none", children: separatorIcon })
+    ] }, index);
+  }) }) });
+};
+
+// src/Accordion/Accordion.tsx
+var import_react10 = __toESM(require("react"));
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var ChevronIcon = ({ className }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+  "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__ */ (0, import_jsx_runtime10.jsx)("path", { d: "m6 9 6 6 6-6" })
+  }
+);
+var AccordionContext = (0, import_react10.createContext)(void 0);
+var Accordion = ({ type = "single", defaultValue, children, className }) => {
+  const [openItems, setOpenItems] = (0, import_react10.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__ */ (0, import_jsx_runtime10.jsx)(AccordionContext.Provider, { value: { openItems, toggleItem }, children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `space-y-1 ${className || ""}`, children }) });
+};
+var AccordionItem = ({ value, children, className }) => {
+  const context = (0, import_react10.useContext)(AccordionContext);
+  if (!context) throw new Error("AccordionItem must be used within an Accordion");
+  const isOpen = context.openItems.includes(value);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: `border border-slate-200 rounded-lg overflow-hidden ${className || ""}`, children: import_react10.default.Children.map(children, (child) => {
+    if (import_react10.default.isValidElement(child)) {
+      return import_react10.default.cloneElement(child, {
+        ...child.props,
+        value,
+        // Pass value down to Trigger and Content
+        isOpen
+      });
+    }
+    return child;
+  }) });
+};
+var AccordionTrigger = ({ children, className, value, isOpen, ...props }) => {
+  const context = (0, import_react10.useContext)(AccordionContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(
+    "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__ */ (0, import_jsx_runtime10.jsx)(ChevronIcon, { className: `h-4 w-4 text-slate-500 transition-transform duration-200 ${isOpen ? "rotate-180" : ""}` })
+      ]
+    }
+  );
+};
+var AccordionContent = ({ children, className, value, isOpen }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    "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
+var import_react11 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var TabsContext = (0, import_react11.createContext)(void 0);
+var Tabs = ({
+  defaultValue,
+  value,
+  onValueChange,
+  orientation = "horizontal",
+  activationMode = "automatic",
+  children,
+  className
+}) => {
+  const [baseId] = (0, import_react11.useState)(() => Math.random().toString(36).substr(2, 9));
+  const [internalValue, setInternalValue] = (0, import_react11.useState)(defaultValue || "");
+  const isControlled = value !== void 0;
+  const activeTab = isControlled ? value : internalValue;
+  const setActiveTab = (newValue) => {
+    if (!isControlled) {
+      setInternalValue(newValue);
+    }
+    onValueChange?.(newValue);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(TabsContext.Provider, { value: { activeTab, setActiveTab, orientation, activationMode, baseId }, children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)("div", { className: `flex ${orientation === "vertical" ? "flex-col md:flex-row gap-4" : "flex-col"} ${className || ""}`, children }) });
+};
+var TabsList = ({ children, className, ariaLabel }) => {
+  const context = (0, import_react11.useContext)(TabsContext);
+  if (!context) throw new Error("TabsList must be used within Tabs");
+  const listRef = (0, import_react11.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__ */ (0, import_jsx_runtime11.jsx)(
+    "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 = (0, import_react11.useContext)(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__ */ (0, import_jsx_runtime11.jsx)(
+    "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 = (0, import_react11.useContext)(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__ */ (0, import_jsx_runtime11.jsx)(
+    "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
+    }
+  );
+};
+
+// src/Select/Select.tsx
+var import_react12 = require("react");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var SelectContext = (0, import_react12.createContext)(void 0);
+var Select = ({ value, onChange, children }) => {
+  const [isOpen, setIsOpen] = (0, import_react12.useState)(false);
+  const [highlightedIndex, setHighlightedIndex] = (0, import_react12.useState)(-1);
+  const optionsRef = (0, import_react12.useRef)([]);
+  const containerRef = (0, import_react12.useRef)(null);
+  (0, import_react12.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__ */ (0, import_jsx_runtime12.jsx)(SelectContext.Provider, { value: { value, onChange, isOpen, setIsOpen, highlightedIndex, setHighlightedIndex, optionsRef }, children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "div",
+    {
+      ref: containerRef,
+      className: "relative inline-block text-left w-full",
+      onKeyDown: handleKeyDown,
+      children
+    }
+  ) });
+};
+var SelectTrigger = ({ children, className = "", placeholder = "Select..." }) => {
+  const context = (0, import_react12.useContext)(SelectContext);
+  if (!context) throw new Error("SelectTrigger must be used within Select");
+  return /* @__PURE__ */ (0, import_jsx_runtime12.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__ */ (0, import_jsx_runtime12.jsx)("span", { className: context.value ? "text-slate-900" : "text-slate-500", children: children || placeholder }),
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react2.ChevronDown, { className: "w-4 h-4 ml-2 opacity-50" })
+      ]
+    }
+  );
+};
+var SelectContent = ({ children }) => {
+  const context = (0, import_react12.useContext)(SelectContext);
+  (0, import_react12.useEffect)(() => {
+    if (context && context.isOpen) {
+      context.optionsRef.current = [];
+    }
+  }, [context?.isOpen]);
+  if (!context || !context.isOpen) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime12.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 = (0, import_react12.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__ */ (0, import_jsx_runtime12.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__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react2.Check, { className: "w-4 h-4 text-slate-900" })
+      ]
+    }
+  );
+};
+
+// src/Switch/Switch.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var Switch = ({ checked, onCheckedChange, disabled = false, label, id }) => {
+  const generatedId = id || `switch-${Math.random().toString(36).substr(2, 9)}`;
+  const handleClick = () => {
+    if (!disabled) {
+      onCheckedChange(!checked);
+    }
+  };
+  const handleKeyDown = (e) => {
+    if (disabled) return;
+    if (e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      onCheckedChange(!checked);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex items-center gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "button",
+      {
+        type: "button",
+        role: "switch",
+        "aria-checked": checked,
+        id: generatedId,
+        disabled,
+        onClick: handleClick,
+        onKeyDown: handleKeyDown,
+        className: `
+                    relative inline-flex h-6 w-11 items-center rounded-full transition-colors focus:outline-none focus:ring-2 focus:ring-slate-900 focus:ring-offset-2
+                    ${checked ? "bg-primary-600" : "bg-slate-200"}
+                    ${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"}
+                `,
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+          "span",
+          {
+            className: `
+                        inline-block h-4 w-4 transform rounded-full bg-white transition-transform
+                        ${checked ? "translate-x-6" : "translate-x-1"}
+                    `
+          }
+        )
+      }
+    ),
+    label && /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "label",
+      {
+        htmlFor: generatedId,
+        className: `text-sm font-medium text-slate-700 cursor-pointer ${disabled ? "opacity-50 cursor-not-allowed" : ""}`,
+        onClick: handleClick,
+        children: label
+      }
+    )
+  ] });
+};
+
+// src/Toast/Toast.tsx
+var import_react13 = require("react");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var ToastContext = (0, import_react13.createContext)(void 0);
+var ToastProvider = ({ children }) => {
+  const [toasts, setToasts] = (0, import_react13.useState)([]);
+  const addToast = (0, import_react13.useCallback)((toast) => {
+    const id = Math.random().toString(36).substr(2, 9);
+    setToasts((prev) => [...prev, { ...toast, id }]);
+  }, []);
+  const removeToast = (0, import_react13.useCallback)((id) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(ToastContext.Provider, { value: { toasts, addToast, removeToast }, children: [
+    children,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToastViewport, {})
+  ] });
+};
+var useToast = () => {
+  const context = (0, import_react13.useContext)(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a ToastProvider");
+  }
+  return context;
+};
+var ToastViewport = () => {
+  const { toasts, removeToast } = useToast();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      className: "fixed bottom-0 right-0 z-50 p-4 w-full md:max-w-sm flex flex-col gap-2",
+      role: "region",
+      "aria-label": "Notifications",
+      children: toasts.map((toast) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ToastItem, { toast, onRemove: () => removeToast(toast.id) }, toast.id))
+    }
+  );
+};
+var ToastItem = ({ toast, onRemove }) => {
+  (0, import_react13.useEffect)(() => {
+    if (toast.duration === Infinity) return;
+    const timer = setTimeout(() => {
+      onRemove();
+    }, toast.duration || 5e3);
+    return () => clearTimeout(timer);
+  }, [toast, onRemove]);
+  const icons = {
+    info: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.Info, { className: "w-5 h-5 text-blue-500" }),
+    success: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.CheckCircle, { className: "w-5 h-5 text-green-500" }),
+    warning: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.AlertTriangle, { className: "w-5 h-5 text-amber-500" }),
+    error: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.AlertCircle, { className: "w-5 h-5 text-red-500" })
+  };
+  const bgColors = {
+    info: "bg-white border-blue-100",
+    success: "bg-white border-green-100",
+    warning: "bg-white border-amber-100",
+    error: "bg-white border-red-100"
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "div",
+    {
+      role: "alert",
+      className: `
+                flex items-start gap-3 p-4 rounded-lg shadow-lg border transition-all animate-in slide-in-from-right-full fade-in duration-300
+                ${bgColors[toast.type || "info"]}
+            `,
+      children: [
+        icons[toast.type || "info"],
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("h4", { className: "text-sm font-medium text-slate-900", children: toast.title }),
+          toast.description && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-sm text-slate-600 mt-1", children: toast.description }),
+          toast.action && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+            "button",
+            {
+              onClick: toast.action.onClick,
+              className: "mt-2 text-sm font-medium text-slate-900 underline hover:no-underline",
+              children: toast.action.label
+            }
+          )
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+          "button",
+          {
+            onClick: onRemove,
+            className: "text-slate-400 hover:text-slate-900 transition-colors",
+            "aria-label": "Close",
+            children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_lucide_react3.X, { className: "w-4 h-4" })
+          }
+        )
+      ]
+    }
+  );
+};
+
+// src/Tooltip/Tooltip.tsx
+var import_react14 = __toESM(require("react"));
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var TooltipContext = (0, import_react14.createContext)(void 0);
+var TooltipProvider = ({ children }) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_jsx_runtime15.Fragment, { children });
+};
+var Tooltip = ({ children }) => {
+  const [open, setOpen] = (0, import_react14.useState)(false);
+  const id = (0, import_react14.useRef)(`tooltip-${Math.random().toString(36).substr(2, 9)}`).current;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipContext.Provider, { value: { open, setOpen, id }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative inline-block group", onMouseLeave: () => setOpen(false), children }) });
+};
+var TooltipTrigger = ({ children, asChild = false, ...props }) => {
+  const context = (0, import_react14.useContext)(TooltipContext);
+  if (!context) throw new Error("TooltipTrigger must be used within Tooltip");
+  const { setOpen, id } = context;
+  const handleOpen = () => setOpen(true);
+  const handleClose = () => setOpen(false);
+  if (import_react14.default.isValidElement(children)) {
+    return import_react14.default.cloneElement(children, {
+      "aria-describedby": context.open ? id : void 0,
+      onMouseEnter: (e) => {
+        handleOpen();
+        children.props.onMouseEnter?.(e);
+      },
+      onMouseLeave: (e) => {
+        handleClose();
+        children.props.onMouseLeave?.(e);
+      },
+      onFocus: (e) => {
+        handleOpen();
+        children.props.onFocus?.(e);
+      },
+      onBlur: (e) => {
+        handleClose();
+        children.props.onBlur?.(e);
+      },
+      ...props
+    });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "span",
+    {
+      "aria-describedby": context.open ? id : void 0,
+      onMouseEnter: handleOpen,
+      onMouseLeave: handleClose,
+      onFocus: handleOpen,
+      onBlur: handleClose,
+      tabIndex: 0,
+      className: "cursor-default",
+      ...props,
+      children
+    }
+  );
+};
+var TooltipContent = ({ children, className = "" }) => {
+  const context = (0, import_react14.useContext)(TooltipContext);
+  if (!context) throw new Error("TooltipContent must be used within Tooltip");
+  if (!context.open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(
+    "div",
+    {
+      id: context.id,
+      role: "tooltip",
+      className: `
+                absolute z-50 px-3 py-2 text-sm font-medium text-white bg-slate-900 rounded shadow-lg
+                bottom-full left-1/2 transform -translate-x-1/2 mb-2 whitespace-nowrap
+                animate-in fade-in zoom-in-95 duration-200
+                ${className}
+            `,
+      children: [
+        children,
+        /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "absolute w-2 h-2 bg-slate-900 transform rotate-45 left-1/2 -translate-x-1/2 -bottom-1" })
+      ]
+    }
+  );
+};
+
+// src/Heading/Heading.tsx
+var import_react15 = __toESM(require("react"));
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var Heading = import_react15.default.forwardRef(
+  ({ level, children, className, ...props }, ref) => {
+    const Tag = `h${level}`;
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Tag, { ref, className, ...props, children });
+  }
+);
+Heading.displayName = "Heading";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  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
+});