@hadoku/task-ui-components 0.0.0-stage → 4.20.4

package/dist/components/ThemeIcons.js

@@ -0,0 +1,74 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+const iconProps = {
+  width: 20,
+  height: 20,
+  viewBox: "0 0 24 24",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round"
+};
+const SettingsIcon = () => /* @__PURE__ */ jsxs("svg", { ...iconProps, children: [
+  /* @__PURE__ */ jsx("rect", { x: "11", y: "1", width: "2", height: "3", fill: "currentColor" }),
+  /* @__PURE__ */ jsx("rect", { x: "16.5", y: "3.5", width: "3", height: "2", fill: "currentColor", transform: "rotate(45 18 4.5)" }),
+  /* @__PURE__ */ jsx("rect", { x: "19", y: "11", width: "3", height: "2", fill: "currentColor" }),
+  /* @__PURE__ */ jsx(
+    "rect",
+    {
+      x: "16.5",
+      y: "18.5",
+      width: "3",
+      height: "2",
+      fill: "currentColor",
+      transform: "rotate(-45 18 19.5)"
+    }
+  ),
+  /* @__PURE__ */ jsx("rect", { x: "11", y: "20", width: "2", height: "3", fill: "currentColor" }),
+  /* @__PURE__ */ jsx("rect", { x: "4.5", y: "18.5", width: "3", height: "2", fill: "currentColor", transform: "rotate(45 6 19.5)" }),
+  /* @__PURE__ */ jsx("rect", { x: "2", y: "11", width: "3", height: "2", fill: "currentColor" }),
+  /* @__PURE__ */ jsx("rect", { x: "4.5", y: "3.5", width: "3", height: "2", fill: "currentColor", transform: "rotate(-45 6 4.5)" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "7", fill: "currentColor" }),
+  /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "4", fill: "var(--color-bg-card)" })
+] });
+const TagIcon = () => /* @__PURE__ */ jsxs("svg", { ...iconProps, width: 16, height: 16, viewBox: "0 0 20 20", children: [
+  /* @__PURE__ */ jsx("path", { d: "M2 4 L12 4 L16 10 L12 16 L2 16 Z", fill: "currentColor" }),
+  /* @__PURE__ */ jsx("circle", { cx: "6", cy: "10", r: "1.5", fill: "white" })
+] });
+const CircleIcon = () => /* @__PURE__ */ jsx("svg", { ...iconProps, children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "8" }) });
+const SquareIcon = () => /* @__PURE__ */ jsx("svg", { ...iconProps, children: /* @__PURE__ */ jsx("rect", { x: "5", y: "5", width: "14", height: "14", rx: "2" }) });
+const TriangleIcon = () => /* @__PURE__ */ jsx("svg", { ...iconProps, children: /* @__PURE__ */ jsx("path", { d: "M12 5 L21 19 L3 19 Z" }) });
+const DiamondIcon = () => /* @__PURE__ */ jsx("svg", { ...iconProps, children: /* @__PURE__ */ jsx("path", { d: "M12 2 L22 12 L12 22 L2 12 Z" }) });
+const StarIcon = () => /* @__PURE__ */ jsx("svg", { ...iconProps, children: /* @__PURE__ */ jsx("polygon", { points: "12,2 15,10 23,10 17,15 19,23 12,18 5,23 7,15 1,10 9,10" }) });
+const HexagonIcon = () => /* @__PURE__ */ jsx("svg", { ...iconProps, children: /* @__PURE__ */ jsx("path", { d: "M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z" }) });
+const PentagonIcon = () => /* @__PURE__ */ jsx("svg", { ...iconProps, children: /* @__PURE__ */ jsx("path", { d: "M12 2 L22 9 L18 20 L6 20 L2 9 Z" }) });
+const OctagonIcon = () => /* @__PURE__ */ jsx("svg", { ...iconProps, children: /* @__PURE__ */ jsx("polygon", { points: "7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86" }) });
+const FALLBACK_ICONS = [
+  CircleIcon,
+  SquareIcon,
+  TriangleIcon,
+  DiamondIcon,
+  StarIcon,
+  HexagonIcon,
+  PentagonIcon,
+  OctagonIcon
+];
+function getFallbackIcon(index) {
+  const Icon = FALLBACK_ICONS[index % FALLBACK_ICONS.length];
+  return /* @__PURE__ */ jsx(Icon, {});
+}
+export {
+  CircleIcon,
+  DiamondIcon,
+  FALLBACK_ICONS,
+  HexagonIcon,
+  OctagonIcon,
+  PentagonIcon,
+  SettingsIcon,
+  SquareIcon,
+  StarIcon,
+  TagIcon,
+  TriangleIcon,
+  getFallbackIcon
+};
+//# sourceMappingURL=ThemeIcons.js.map

package/dist/components/ThemeIcons.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemeIcons.js","sources":["../../src/components/ThemeIcons.tsx"],"sourcesContent":["/**\n * Component icons - Simple monochrome SVG icons for theme picker\n * All icons use currentColor so they can be styled with CSS\n */\n\nimport React from 'react'\n\nconst iconProps = {\n  width: 20,\n  height: 20,\n  viewBox: '0 0 24 24',\n  fill: 'none',\n  stroke: 'currentColor',\n  strokeWidth: 2,\n  strokeLinecap: 'round' as const,\n  strokeLinejoin: 'round' as const\n}\n\nexport const SettingsIcon = () => (\n  <svg {...iconProps}>\n    {/* Gear teeth as rectangles */}\n    <rect x=\"11\" y=\"1\" width=\"2\" height=\"3\" fill=\"currentColor\" />\n    <rect x=\"16.5\" y=\"3.5\" width=\"3\" height=\"2\" fill=\"currentColor\" transform=\"rotate(45 18 4.5)\" />\n    <rect x=\"19\" y=\"11\" width=\"3\" height=\"2\" fill=\"currentColor\" />\n    <rect\n      x=\"16.5\"\n      y=\"18.5\"\n      width=\"3\"\n      height=\"2\"\n      fill=\"currentColor\"\n      transform=\"rotate(-45 18 19.5)\"\n    />\n    <rect x=\"11\" y=\"20\" width=\"2\" height=\"3\" fill=\"currentColor\" />\n    <rect x=\"4.5\" y=\"18.5\" width=\"3\" height=\"2\" fill=\"currentColor\" transform=\"rotate(45 6 19.5)\" />\n    <rect x=\"2\" y=\"11\" width=\"3\" height=\"2\" fill=\"currentColor\" />\n    <rect x=\"4.5\" y=\"3.5\" width=\"3\" height=\"2\" fill=\"currentColor\" transform=\"rotate(-45 6 4.5)\" />\n\n    {/* Outer ring */}\n    <circle cx=\"12\" cy=\"12\" r=\"7\" fill=\"currentColor\" />\n\n    {/* Center hole */}\n    <circle cx=\"12\" cy=\"12\" r=\"4\" fill=\"var(--color-bg-card)\" />\n  </svg>\n)\n\nexport const TagIcon = () => (\n  <svg {...iconProps} width={16} height={16} viewBox=\"0 0 20 20\">\n    {/* Tag body - rectangular shape pointing right */}\n    <path d=\"M2 4 L12 4 L16 10 L12 16 L2 16 Z\" fill=\"currentColor\" />\n    {/* Hole in tag */}\n    <circle cx=\"6\" cy=\"10\" r=\"1.5\" fill=\"white\" />\n  </svg>\n)\n\nexport const CircleIcon = () => (\n  <svg {...iconProps}>\n    <circle cx=\"12\" cy=\"12\" r=\"8\" />\n  </svg>\n)\n\nexport const SquareIcon = () => (\n  <svg {...iconProps}>\n    <rect x=\"5\" y=\"5\" width=\"14\" height=\"14\" rx=\"2\" />\n  </svg>\n)\n\nexport const TriangleIcon = () => (\n  <svg {...iconProps}>\n    <path d=\"M12 5 L21 19 L3 19 Z\" />\n  </svg>\n)\n\nexport const DiamondIcon = () => (\n  <svg {...iconProps}>\n    <path d=\"M12 2 L22 12 L12 22 L2 12 Z\" />\n  </svg>\n)\n\nexport const StarIcon = () => (\n  <svg {...iconProps}>\n    <polygon points=\"12,2 15,10 23,10 17,15 19,23 12,18 5,23 7,15 1,10 9,10\" />\n  </svg>\n)\n\nexport const HexagonIcon = () => (\n  <svg {...iconProps}>\n    <path d=\"M21 16V8a2 2 0 0 0-1-1.73l-7-4a2 2 0 0 0-2 0l-7 4A2 2 0 0 0 3 8v8a2 2 0 0 0 1 1.73l7 4a2 2 0 0 0 2 0l7-4A2 2 0 0 0 21 16z\" />\n  </svg>\n)\n\nexport const PentagonIcon = () => (\n  <svg {...iconProps}>\n    <path d=\"M12 2 L22 9 L18 20 L6 20 L2 9 Z\" />\n  </svg>\n)\n\nexport const OctagonIcon = () => (\n  <svg {...iconProps}>\n    <polygon points=\"7.86 2 16.14 2 22 7.86 22 16.14 16.14 22 7.86 22 2 16.14 2 7.86\" />\n  </svg>\n)\n\n/**\n * Fallback icon sets for themes - provides 8 distinct shapes\n * Use these when you don't have specific icons for your themes\n */\n\nexport const FALLBACK_ICONS = [\n  CircleIcon,\n  SquareIcon,\n  TriangleIcon,\n  DiamondIcon,\n  StarIcon,\n  HexagonIcon,\n  PentagonIcon,\n  OctagonIcon\n] as const\n\n/**\n * Get a fallback icon for a theme by index\n * Icons repeat after 8 themes to provide consistent differentiation\n */\n\nexport function getFallbackIcon(index: number) {\n  const Icon = FALLBACK_ICONS[index % FALLBACK_ICONS.length]\n  return <Icon />\n}\n"],"names":[],"mappings":"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"}

package/dist/components/ThemePicker.d.ts

@@ -0,0 +1,28 @@
+/**
+ * ThemePicker component
+ * A beautiful theme picker with light/dark variants for each theme family
+ * Designed to work with any theme system via configuration
+ */
+import React from 'react';
+import type { ThemePickerProps } from '../types';
+import '../theme-picker.css';
+/**
+ * ThemePicker - Dropdown theme selector with optional settings button
+ *
+ * @example
+ * ```tsx
+ * import { ThemePicker } from '@wolffm/task-ui-components'
+ * import '@wolffm/task-ui-components/theme-picker.css'
+ *
+ * <ThemePicker
+ *   currentTheme="dark"
+ *   isOpen={showPicker}
+ *   themeFamilies={MY_THEME_FAMILIES}
+ *   onThemeChange={setTheme}
+ *   onToggle={() => setShowPicker(!showPicker)}
+ *   onSettingsClick={() => openSettings()}
+ * />
+ * ```
+ */
+export declare function ThemePicker({ currentTheme, isOpen, themeFamilies, onThemeChange, onToggle, onSettingsClick, getThemeIcon, className, dropdownPlacement }: ThemePickerProps): React.JSX.Element;
+//# sourceMappingURL=ThemePicker.d.ts.map

package/dist/components/ThemePicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePicker.d.ts","sourceRoot":"","sources":["../../src/components/ThemePicker.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAA4C,MAAM,OAAO,CAAA;AAEhE,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,UAAU,CAAA;AAIhD,OAAO,qBAAqB,CAAA;AAE5B;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,YAAY,EACZ,MAAM,EACN,aAAa,EACb,aAAa,EACb,QAAQ,EACR,eAAe,EACf,YAAY,EACZ,SAAc,EACd,iBAA0B,EAC3B,EAAE,gBAAgB,qBA0GlB"}

package/dist/components/ThemePicker.js

@@ -0,0 +1,101 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useRef, useState, useLayoutEffect } from "react";
+import { Tooltip } from "./Tooltip.js";
+import { getFallbackIcon, SettingsIcon } from "./ThemeIcons.js";
+import { MoonIcon } from "@wolffm/themes";
+/* empty css                  */
+function ThemePicker({
+  currentTheme,
+  isOpen,
+  themeFamilies,
+  onThemeChange,
+  onToggle,
+  onSettingsClick,
+  getThemeIcon,
+  className = "",
+  dropdownPlacement = "auto"
+}) {
+  const dropdownRef = useRef(null);
+  const [resolvedPlacement, setResolvedPlacement] = useState("right");
+  useLayoutEffect(() => {
+    if (!isOpen) return;
+    if (dropdownPlacement !== "auto") {
+      setResolvedPlacement(dropdownPlacement);
+      return;
+    }
+    setResolvedPlacement("right");
+    const frameId = requestAnimationFrame(() => {
+      const el = dropdownRef.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      if (rect.right > window.innerWidth) {
+        setResolvedPlacement("left");
+      }
+    });
+    return () => cancelAnimationFrame(frameId);
+  }, [isOpen, dropdownPlacement]);
+  const currentIcon = getThemeIcon ? getThemeIcon(currentTheme) : /* @__PURE__ */ jsx(MoonIcon, {});
+  const openLeftClass = resolvedPlacement === "left" ? "theme-picker--open-left" : "";
+  return /* @__PURE__ */ jsxs("div", { className: `theme-picker ${openLeftClass} ${className}`.trim(), children: [
+    /* @__PURE__ */ jsx(Tooltip, { content: "Choose theme", children: /* @__PURE__ */ jsx(
+      "button",
+      {
+        className: "app-header__icon-btn theme-toggle-btn",
+        onClick: onToggle,
+        "aria-label": "Choose theme",
+        children: currentIcon
+      }
+    ) }),
+    isOpen && /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: dropdownRef,
+        className: "theme-picker__dropdown",
+        onClick: (e) => e.stopPropagation(),
+        children: /* @__PURE__ */ jsxs("div", { className: "theme-picker__main", children: [
+          /* @__PURE__ */ jsx("div", { className: "theme-picker__pills", children: themeFamilies.map((family, idx) => {
+            const lightIcon = family.lightIcon ?? getFallbackIcon(idx);
+            const darkIcon = family.darkIcon ?? getFallbackIcon(idx);
+            return /* @__PURE__ */ jsxs("div", { className: "theme-pill", children: [
+              /* @__PURE__ */ jsx(Tooltip, { content: family.lightLabel, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: `theme-pill__btn theme-pill__btn--light ${currentTheme === family.lightTheme ? "active" : ""}`,
+                  onClick: () => onThemeChange(family.lightTheme),
+                  "aria-label": family.lightLabel,
+                  children: /* @__PURE__ */ jsx("div", { className: "theme-pill__icon", children: lightIcon })
+                }
+              ) }),
+              /* @__PURE__ */ jsx(Tooltip, { content: family.darkLabel, children: /* @__PURE__ */ jsx(
+                "button",
+                {
+                  className: `theme-pill__btn theme-pill__btn--dark ${currentTheme === family.darkTheme ? "active" : ""}`,
+                  onClick: () => onThemeChange(family.darkTheme),
+                  "aria-label": family.darkLabel,
+                  children: /* @__PURE__ */ jsx("div", { className: "theme-pill__icon", children: darkIcon })
+                }
+              ) })
+            ] }, idx);
+          }) }),
+          onSettingsClick && /* @__PURE__ */ jsx(Tooltip, { content: "Settings", children: /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: "theme-picker__settings-icon",
+              onClick: () => {
+                onSettingsClick();
+                onToggle();
+              },
+              "aria-label": "Settings",
+              children: /* @__PURE__ */ jsx(SettingsIcon, {})
+            }
+          ) })
+        ] })
+      }
+    ),
+    isOpen && /* @__PURE__ */ jsx("div", { className: "theme-picker__overlay", onClick: onToggle })
+  ] });
+}
+export {
+  ThemePicker
+};
+//# sourceMappingURL=ThemePicker.js.map

package/dist/components/ThemePicker.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemePicker.js","sources":["../../src/components/ThemePicker.tsx"],"sourcesContent":["/**\n * ThemePicker component\n * A beautiful theme picker with light/dark variants for each theme family\n * Designed to work with any theme system via configuration\n */\n\nimport React, { useRef, useLayoutEffect, useState } from 'react'\nimport { Tooltip } from './Tooltip'\nimport type { ThemePickerProps } from '../types'\nimport { SettingsIcon, getFallbackIcon } from './ThemeIcons'\n// MoonIcon is a theme-family icon and lives with the theme model now.\nimport { MoonIcon } from '@wolffm/themes'\nimport '../theme-picker.css'\n\n/**\n * ThemePicker - Dropdown theme selector with optional settings button\n *\n * @example\n * ```tsx\n * import { ThemePicker } from '@wolffm/task-ui-components'\n * import '@wolffm/task-ui-components/theme-picker.css'\n *\n * <ThemePicker\n *   currentTheme=\"dark\"\n *   isOpen={showPicker}\n *   themeFamilies={MY_THEME_FAMILIES}\n *   onThemeChange={setTheme}\n *   onToggle={() => setShowPicker(!showPicker)}\n *   onSettingsClick={() => openSettings()}\n * />\n * ```\n */\nexport function ThemePicker({\n  currentTheme,\n  isOpen,\n  themeFamilies,\n  onThemeChange,\n  onToggle,\n  onSettingsClick,\n  getThemeIcon,\n  className = '',\n  dropdownPlacement = 'auto'\n}: ThemePickerProps) {\n  const dropdownRef = useRef<HTMLDivElement>(null)\n  const [resolvedPlacement, setResolvedPlacement] = useState<'left' | 'right'>('right')\n\n  // Edge detection: when 'auto', measure the dropdown after render and flip if it overflows\n  useLayoutEffect(() => {\n    if (!isOpen) return\n\n    if (dropdownPlacement !== 'auto') {\n      setResolvedPlacement(dropdownPlacement)\n      return\n    }\n\n    // Start with right (default), then check if it overflows\n    setResolvedPlacement('right')\n\n    // Use rAF to measure after the browser has laid out the dropdown\n    const frameId = requestAnimationFrame(() => {\n      const el = dropdownRef.current\n      if (!el) return\n      const rect = el.getBoundingClientRect()\n      if (rect.right > window.innerWidth) {\n        setResolvedPlacement('left')\n      }\n    })\n\n    return () => cancelAnimationFrame(frameId)\n  }, [isOpen, dropdownPlacement])\n\n  // Get icon for current theme (use provided function or fallback to MoonIcon)\n  const currentIcon = getThemeIcon ? getThemeIcon(currentTheme) : <MoonIcon />\n\n  const openLeftClass = resolvedPlacement === 'left' ? 'theme-picker--open-left' : ''\n\n  return (\n    <div className={`theme-picker ${openLeftClass} ${className}`.trim()}>\n      <Tooltip content=\"Choose theme\">\n        <button\n          className=\"app-header__icon-btn theme-toggle-btn\"\n          onClick={onToggle}\n          aria-label=\"Choose theme\"\n        >\n          {currentIcon}\n        </button>\n      </Tooltip>\n      {isOpen && (\n        <div\n          ref={dropdownRef}\n          className=\"theme-picker__dropdown\"\n          onClick={e => e.stopPropagation()}\n        >\n          <div className=\"theme-picker__main\">\n            <div className=\"theme-picker__pills\">\n              {themeFamilies.map((family, idx) => {\n                // Use provided icons or fallback to generic shapes\n                const lightIcon = family.lightIcon ?? getFallbackIcon(idx)\n                const darkIcon = family.darkIcon ?? getFallbackIcon(idx)\n\n                return (\n                  <div key={idx} className=\"theme-pill\">\n                    {/* Light variant button */}\n                    <Tooltip content={family.lightLabel}>\n                      <button\n                        className={`theme-pill__btn theme-pill__btn--light ${currentTheme === family.lightTheme ? 'active' : ''}`}\n                        onClick={() => onThemeChange(family.lightTheme)}\n                        aria-label={family.lightLabel}\n                      >\n                        <div className=\"theme-pill__icon\">{lightIcon}</div>\n                      </button>\n                    </Tooltip>\n\n                    {/* Dark variant button */}\n                    <Tooltip content={family.darkLabel}>\n                      <button\n                        className={`theme-pill__btn theme-pill__btn--dark ${currentTheme === family.darkTheme ? 'active' : ''}`}\n                        onClick={() => onThemeChange(family.darkTheme)}\n                        aria-label={family.darkLabel}\n                      >\n                        <div className=\"theme-pill__icon\">{darkIcon}</div>\n                      </button>\n                    </Tooltip>\n                  </div>\n                )\n              })}\n            </div>\n            {/* Settings button - separate column on the right */}\n            {onSettingsClick && (\n              <Tooltip content=\"Settings\">\n                <button\n                  className=\"theme-picker__settings-icon\"\n                  onClick={() => {\n                    onSettingsClick()\n                    onToggle() // Close picker after opening settings\n                  }}\n                  aria-label=\"Settings\"\n                >\n                  <SettingsIcon />\n                </button>\n              </Tooltip>\n            )}\n          </div>\n        </div>\n      )}\n      {isOpen && <div className=\"theme-picker__overlay\" onClick={onToggle} />}\n    </div>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/components/Toast.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Toast Notification Component
+ * Displays temporary notification messages with different types
+ */
+import React from 'react';
+export interface ToastProps {
+    message: string;
+    type?: 'success' | 'error' | 'info' | 'warning';
+    duration?: number;
+    onClose: () => void;
+}
+export declare function Toast({ message, type, duration, onClose }: ToastProps): React.JSX.Element;
+//# sourceMappingURL=Toast.d.ts.map

package/dist/components/Toast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.d.ts","sourceRoot":"","sources":["../../src/components/Toast.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAA8B,MAAM,OAAO,CAAA;AAElD,MAAM,WAAW,UAAU;IACzB,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,OAAO,EAAE,MAAM,IAAI,CAAA;CACpB;AAmBD,wBAAgB,KAAK,CAAC,EAAE,OAAO,EAAE,IAAa,EAAE,QAAe,EAAE,OAAO,EAAE,EAAE,UAAU,qBA4DrF"}

package/dist/components/Toast.js

@@ -0,0 +1,70 @@
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+const renderIcon = (children) => /* @__PURE__ */ jsx(
+  "svg",
+  {
+    className: "toast__icon",
+    width: "20",
+    height: "20",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: "2",
+    children
+  }
+);
+function Toast({ message, type = "info", duration = 3e3, onClose }) {
+  const [isVisible, setIsVisible] = useState(false);
+  useEffect(() => {
+    const showTimer = setTimeout(() => {
+      setIsVisible(true);
+    }, 50);
+    const hideTimer = setTimeout(() => {
+      setIsVisible(false);
+      setTimeout(onClose, 500);
+    }, duration);
+    return () => {
+      clearTimeout(showTimer);
+      clearTimeout(hideTimer);
+    };
+  }, [duration, onClose]);
+  const getIcon = () => {
+    switch (type) {
+      case "success":
+        return renderIcon(/* @__PURE__ */ jsx("path", { d: "M20 6L9 17l-5-5" }));
+      case "error":
+        return renderIcon(
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsx("line", { x1: "15", y1: "9", x2: "9", y2: "15" }),
+            /* @__PURE__ */ jsx("line", { x1: "9", y1: "9", x2: "15", y2: "15" })
+          ] })
+        );
+      case "warning":
+        return renderIcon(
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("path", { d: "M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" }),
+            /* @__PURE__ */ jsx("line", { x1: "12", y1: "9", x2: "12", y2: "13" }),
+            /* @__PURE__ */ jsx("line", { x1: "12", y1: "17", x2: "12.01", y2: "17" })
+          ] })
+        );
+      case "info":
+      default:
+        return renderIcon(
+          /* @__PURE__ */ jsxs(Fragment, { children: [
+            /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+            /* @__PURE__ */ jsx("line", { x1: "12", y1: "16", x2: "12", y2: "12" }),
+            /* @__PURE__ */ jsx("line", { x1: "12", y1: "8", x2: "12.01", y2: "8" })
+          ] })
+        );
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", { className: `toast toast--${type} ${isVisible ? "toast--visible" : ""}`, children: [
+    getIcon(),
+    /* @__PURE__ */ jsx("span", { className: "toast__message", children: message })
+  ] });
+}
+export {
+  Toast
+};
+//# sourceMappingURL=Toast.js.map

package/dist/components/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../src/components/Toast.tsx"],"sourcesContent":["/**\r\n * Toast Notification Component\r\n * Displays temporary notification messages with different types\r\n */\r\n\r\nimport React, { useEffect, useState } from 'react'\r\n\r\nexport interface ToastProps {\r\n  message: string\r\n  type?: 'success' | 'error' | 'info' | 'warning'\r\n  duration?: number\r\n  onClose: () => void\r\n}\r\n\r\n/**\r\n * Helper function to render SVG icon wrapper with consistent styling\r\n */\r\nconst renderIcon = (children: React.ReactNode) => (\r\n  <svg\r\n    className=\"toast__icon\"\r\n    width=\"20\"\r\n    height=\"20\"\r\n    viewBox=\"0 0 24 24\"\r\n    fill=\"none\"\r\n    stroke=\"currentColor\"\r\n    strokeWidth=\"2\"\r\n  >\r\n    {children}\r\n  </svg>\r\n)\r\n\r\nexport function Toast({ message, type = 'info', duration = 3000, onClose }: ToastProps) {\r\n  const [isVisible, setIsVisible] = useState(false)\r\n\r\n  useEffect(() => {\r\n    // Fade in with slight delay for smoother appearance\r\n    const showTimer = setTimeout(() => {\r\n      setIsVisible(true)\r\n    }, 50)\r\n\r\n    // Auto-dismiss after duration\r\n    const hideTimer = setTimeout(() => {\r\n      setIsVisible(false)\r\n      // Wait for fade-out animation before calling onClose\r\n      setTimeout(onClose, 500)\r\n    }, duration)\r\n\r\n    return () => {\r\n      clearTimeout(showTimer)\r\n      clearTimeout(hideTimer)\r\n    }\r\n  }, [duration, onClose])\r\n\r\n  const getIcon = () => {\r\n    switch (type) {\r\n      case 'success':\r\n        return renderIcon(<path d=\"M20 6L9 17l-5-5\" />)\r\n      case 'error':\r\n        return renderIcon(\r\n          <>\r\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n            <line x1=\"15\" y1=\"9\" x2=\"9\" y2=\"15\" />\r\n            <line x1=\"9\" y1=\"9\" x2=\"15\" y2=\"15\" />\r\n          </>\r\n        )\r\n      case 'warning':\r\n        return renderIcon(\r\n          <>\r\n            <path d=\"M10.29 3.86L1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z\" />\r\n            <line x1=\"12\" y1=\"9\" x2=\"12\" y2=\"13\" />\r\n            <line x1=\"12\" y1=\"17\" x2=\"12.01\" y2=\"17\" />\r\n          </>\r\n        )\r\n      case 'info':\r\n      default:\r\n        return renderIcon(\r\n          <>\r\n            <circle cx=\"12\" cy=\"12\" r=\"10\" />\r\n            <line x1=\"12\" y1=\"16\" x2=\"12\" y2=\"12\" />\r\n            <line x1=\"12\" y1=\"8\" x2=\"12.01\" y2=\"8\" />\r\n          </>\r\n        )\r\n    }\r\n  }\r\n\r\n  return (\r\n    <div className={`toast toast--${type} ${isVisible ? 'toast--visible' : ''}`}>\r\n      {getIcon()}\r\n      <span className=\"toast__message\">{message}</span>\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;AAiBA,MAAM,aAAa,CAAC,aAClB;AAAA,EAAC;AAAA,EAAA;AAAA,IACC,WAAU;AAAA,IACV,OAAM;AAAA,IACN,QAAO;AAAA,IACP,SAAQ;AAAA,IACR,MAAK;AAAA,IACL,QAAO;AAAA,IACP,aAAY;AAAA,IAEX;AAAA,EAAA;AACH;AAGK,SAAS,MAAM,EAAE,SAAS,OAAO,QAAQ,WAAW,KAAM,WAAuB;AACtF,QAAM,CAAC,WAAW,YAAY,IAAI,SAAS,KAAK;AAEhD,YAAU,MAAM;AAEd,UAAM,YAAY,WAAW,MAAM;AACjC,mBAAa,IAAI;AAAA,IACnB,GAAG,EAAE;AAGL,UAAM,YAAY,WAAW,MAAM;AACjC,mBAAa,KAAK;AAElB,iBAAW,SAAS,GAAG;AAAA,IACzB,GAAG,QAAQ;AAEX,WAAO,MAAM;AACX,mBAAa,SAAS;AACtB,mBAAa,SAAS;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,UAAU,OAAO,CAAC;AAEtB,QAAM,UAAU,MAAM;AACpB,YAAQ,MAAA;AAAA,MACN,KAAK;AACH,eAAO,WAAW,oBAAC,QAAA,EAAK,GAAE,mBAAkB,CAAE;AAAA,MAChD,KAAK;AACH,eAAO;AAAA,UACL,qBAAA,UAAA,EACE,UAAA;AAAA,YAAA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,YAC/B,oBAAC,UAAK,IAAG,MAAK,IAAG,KAAI,IAAG,KAAI,IAAG,KAAA,CAAK;AAAA,YACpC,oBAAC,UAAK,IAAG,KAAI,IAAG,KAAI,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,UAAA,EAAA,CACtC;AAAA,QAAA;AAAA,MAEJ,KAAK;AACH,eAAO;AAAA,UACL,qBAAA,UAAA,EACE,UAAA;AAAA,YAAA,oBAAC,QAAA,EAAK,GAAE,2FAAA,CAA2F;AAAA,YACnG,oBAAC,UAAK,IAAG,MAAK,IAAG,KAAI,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,YACrC,oBAAC,UAAK,IAAG,MAAK,IAAG,MAAK,IAAG,SAAQ,IAAG,KAAA,CAAK;AAAA,UAAA,EAAA,CAC3C;AAAA,QAAA;AAAA,MAEJ,KAAK;AAAA,MACL;AACE,eAAO;AAAA,UACL,qBAAA,UAAA,EACE,UAAA;AAAA,YAAA,oBAAC,YAAO,IAAG,MAAK,IAAG,MAAK,GAAE,MAAK;AAAA,YAC/B,oBAAC,UAAK,IAAG,MAAK,IAAG,MAAK,IAAG,MAAK,IAAG,KAAA,CAAK;AAAA,YACtC,oBAAC,UAAK,IAAG,MAAK,IAAG,KAAI,IAAG,SAAQ,IAAG,IAAA,CAAI;AAAA,UAAA,EAAA,CACzC;AAAA,QAAA;AAAA,IACF;AAAA,EAEN;AAEA,SACE,qBAAC,SAAI,WAAW,gBAAgB,IAAI,IAAI,YAAY,mBAAmB,EAAE,IACtE,UAAA;AAAA,IAAA,QAAA;AAAA,IACD,oBAAC,QAAA,EAAK,WAAU,kBAAkB,UAAA,QAAA,CAAQ;AAAA,EAAA,GAC5C;AAEJ;"}

package/dist/components/Toaster.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Toaster Container Component
+ * Manages and displays multiple toast notifications
+ */
+import React from 'react';
+import '../toaster.css';
+export interface ToastState {
+    id: number;
+    message: string;
+    type: 'success' | 'error' | 'info' | 'warning';
+    duration?: number;
+}
+export interface ToasterProps {
+    toasts: ToastState[];
+    onDismiss: (id: number) => void;
+    position?: 'top-left' | 'top-center' | 'top-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
+}
+export declare function Toaster({ toasts, onDismiss, position }: ToasterProps): React.JSX.Element;
+//# sourceMappingURL=Toaster.d.ts.map

package/dist/components/Toaster.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.d.ts","sourceRoot":"","sources":["../../src/components/Toaster.tsx"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,gBAAgB,CAAA;AAEvB,MAAM,WAAW,UAAU;IACzB,EAAE,EAAE,MAAM,CAAA;IACV,OAAO,EAAE,MAAM,CAAA;IACf,IAAI,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,CAAA;IAC9C,QAAQ,CAAC,EAAE,MAAM,CAAA;CAClB;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,UAAU,EAAE,CAAA;IACpB,SAAS,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAC/B,QAAQ,CAAC,EACL,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,eAAe,GACf,cAAc,CAAA;CACnB;AAED,wBAAgB,OAAO,CAAC,EAAE,MAAM,EAAE,SAAS,EAAE,QAA0B,EAAE,EAAE,YAAY,qBActF"}

package/dist/components/Toaster.js

@@ -0,0 +1,19 @@
+import { jsx } from "react/jsx-runtime";
+import { Toast } from "./Toast.js";
+/* empty css             */
+function Toaster({ toasts, onDismiss, position = "bottom-center" }) {
+  return /* @__PURE__ */ jsx("div", { className: `toast-container toast-container--${position}`, children: toasts.map((toast) => /* @__PURE__ */ jsx(
+    Toast,
+    {
+      message: toast.message,
+      type: toast.type,
+      duration: toast.duration,
+      onClose: () => onDismiss(toast.id)
+    },
+    toast.id
+  )) });
+}
+export {
+  Toaster
+};
+//# sourceMappingURL=Toaster.js.map

package/dist/components/Toaster.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toaster.js","sources":["../../src/components/Toaster.tsx"],"sourcesContent":["/**\r\n * Toaster Container Component\r\n * Manages and displays multiple toast notifications\r\n */\r\n\r\nimport React from 'react'\r\nimport { Toast } from './Toast'\r\nimport '../toaster.css'\r\n\r\nexport interface ToastState {\r\n  id: number\r\n  message: string\r\n  type: 'success' | 'error' | 'info' | 'warning'\r\n  duration?: number\r\n}\r\n\r\nexport interface ToasterProps {\r\n  toasts: ToastState[]\r\n  onDismiss: (id: number) => void\r\n  position?:\r\n    | 'top-left'\r\n    | 'top-center'\r\n    | 'top-right'\r\n    | 'bottom-left'\r\n    | 'bottom-center'\r\n    | 'bottom-right'\r\n}\r\n\r\nexport function Toaster({ toasts, onDismiss, position = 'bottom-center' }: ToasterProps) {\r\n  return (\r\n    <div className={`toast-container toast-container--${position}`}>\r\n      {toasts.map(toast => (\r\n        <Toast\r\n          key={toast.id}\r\n          message={toast.message}\r\n          type={toast.type}\r\n          duration={toast.duration}\r\n          onClose={() => onDismiss(toast.id)}\r\n        />\r\n      ))}\r\n    </div>\r\n  )\r\n}\r\n"],"names":[],"mappings":";;;AA4BO,SAAS,QAAQ,EAAE,QAAQ,WAAW,WAAW,mBAAiC;AACvF,SACE,oBAAC,SAAI,WAAW,oCAAoC,QAAQ,IACzD,UAAA,OAAO,IAAI,CAAA,UACV;AAAA,IAAC;AAAA,IAAA;AAAA,MAEC,SAAS,MAAM;AAAA,MACf,MAAM,MAAM;AAAA,MACZ,UAAU,MAAM;AAAA,MAChB,SAAS,MAAM,UAAU,MAAM,EAAE;AAAA,IAAA;AAAA,IAJ5B,MAAM;AAAA,EAAA,CAMd,GACH;AAEJ;"}

package/dist/components/Tooltip.d.ts

@@ -0,0 +1,49 @@
+/**
+ * Tooltip Component
+ * Themed replacement for `title=`. A native title tooltip is OS-drawn, waits
+ * about a second, never appears on keyboard focus and cannot be themed.
+ *
+ * Meets WCAG 1.4.13 (content on hover or focus): it shows on hover AND focus,
+ * Escape dismisses it, and the pointer can move onto the bubble without it
+ * closing. The child gets `aria-describedby`, so the text is announced —
+ * unless it is the child's own `aria-label`, which would read it twice. That
+ * is the common case for an icon button: the label names it, and the tooltip
+ * shows sighted users the same words.
+ *
+ * Like <Select>, the bubble is portalled into the anchor's theme scope (see
+ * themeScopeOf), so it keeps the theme's tokens and is placed correctly even
+ * under a transformed ancestor.
+ */
+import React from 'react';
+import '../tooltip.css';
+import { type TooltipPlacement } from '../lib/tooltipPlacement';
+export type { TooltipPlacement };
+export type TooltipVariant = 'inverse' | 'card' | 'primary';
+export interface TooltipProps {
+    content: React.ReactNode;
+    /** Preferred side; flips to the opposite one when it would leave the viewport. */
+    placement?: TooltipPlacement;
+    variant?: TooltipVariant;
+    /** Hover delay before showing, ms. Focus shows immediately. */
+    delay?: number;
+    /** Render the child alone, e.g. while a menu it belongs to is open. */
+    disabled?: boolean;
+    /** A single element. Tooltip attaches its ref and pointer/focus handlers to it
+     *  directly (composed with the child's own) and adds aria-describedby. */
+    children: React.ReactElement<AnchorProps>;
+}
+/** What Tooltip reads from, and adds to, its child. No wrapper element: a
+ *  wrapper — even `display: contents` — still changes the DOM tree, and with it
+ *  every `:last-child`, `>` and `+` selector aimed at the child. */
+interface AnchorProps {
+    'aria-describedby'?: string;
+    'aria-label'?: string;
+    ref?: React.Ref<HTMLElement>;
+    onPointerEnter?: React.PointerEventHandler<HTMLElement>;
+    onPointerLeave?: React.PointerEventHandler<HTMLElement>;
+    onPointerDown?: React.PointerEventHandler<HTMLElement>;
+    onFocus?: React.FocusEventHandler<HTMLElement>;
+    onBlur?: React.FocusEventHandler<HTMLElement>;
+}
+export declare function Tooltip({ content, placement, variant, delay, disabled, children }: TooltipProps): React.JSX.Element;
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/components/Tooltip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.d.ts","sourceRoot":"","sources":["../../src/components/Tooltip.tsx"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,KAA2E,MAAM,OAAO,CAAA;AAE/F,OAAO,gBAAgB,CAAA;AAEvB,OAAO,EAA6B,KAAK,gBAAgB,EAAE,MAAM,yBAAyB,CAAA;AAE1F,YAAY,EAAE,gBAAgB,EAAE,CAAA;AAChC,MAAM,MAAM,cAAc,GAAG,SAAS,GAAG,MAAM,GAAG,SAAS,CAAA;AAE3D,MAAM,WAAW,YAAY;IAC3B,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;IACxB,kFAAkF;IAClF,SAAS,CAAC,EAAE,gBAAgB,CAAA;IAC5B,OAAO,CAAC,EAAE,cAAc,CAAA;IACxB,+DAA+D;IAC/D,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,uEAAuE;IACvE,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB;8EAC0E;IAC1E,QAAQ,EAAE,KAAK,CAAC,YAAY,CAAC,WAAW,CAAC,CAAA;CAC1C;AAED;;oEAEoE;AACpE,UAAU,WAAW;IACnB,kBAAkB,CAAC,EAAE,MAAM,CAAA;IAC3B,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,GAAG,CAAC,EAAE,KAAK,CAAC,GAAG,CAAC,WAAW,CAAC,CAAA;IAC5B,cAAc,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;IACvD,cAAc,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;IACvD,aAAa,CAAC,EAAE,KAAK,CAAC,mBAAmB,CAAC,WAAW,CAAC,CAAA;IACtD,OAAO,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;IAC9C,MAAM,CAAC,EAAE,KAAK,CAAC,iBAAiB,CAAC,WAAW,CAAC,CAAA;CAC9C;AAWD,wBAAgB,OAAO,CAAC,EACtB,OAAO,EACP,SAAiB,EACjB,OAAgB,EAChB,KAAW,EACX,QAAgB,EAChB,QAAQ,EACT,EAAE,YAAY,qBA6Id"}

package/dist/components/Tooltip.js

@@ -0,0 +1,143 @@
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React, { useId, useState, useRef, useCallback, useEffect, useLayoutEffect } from "react";
+import { createPortal } from "react-dom";
+/* empty css             */
+import { themeScopeOf } from "../lib/themeScope.js";
+import { placeTooltip } from "../lib/tooltipPlacement.js";
+function childRefOf(child) {
+  if (!React.version.startsWith("18")) return child.props.ref;
+  return child.ref ?? void 0;
+}
+const HIDE_GRACE_MS = 120;
+function Tooltip({
+  content,
+  placement = "top",
+  variant = "card",
+  delay = 300,
+  disabled = false,
+  children
+}) {
+  const tipId = useId();
+  const [open, setOpen] = useState(false);
+  const [placed, setPlaced] = useState(null);
+  const [scope, setScope] = useState(null);
+  const anchorRef = useRef(null);
+  const bubbleRef = useRef(null);
+  const timer = useRef(void 0);
+  const show = useCallback((after) => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      setScope(themeScopeOf(anchorRef.current));
+      setOpen(true);
+    }, after);
+  }, []);
+  const hide = useCallback((after) => {
+    clearTimeout(timer.current);
+    timer.current = setTimeout(() => {
+      setOpen(false);
+      setPlaced(null);
+    }, after);
+  }, []);
+  useEffect(() => () => clearTimeout(timer.current), []);
+  const childRef = childRefOf(children);
+  const setAnchor = useCallback(
+    (node) => {
+      anchorRef.current = node;
+      if (typeof childRef === "function") childRef(node);
+      else if (childRef) childRef.current = node;
+    },
+    [childRef]
+  );
+  const place = useCallback(() => {
+    const target = anchorRef.current;
+    const bubble = bubbleRef.current;
+    if (!target || !bubble) return;
+    setPlaced(
+      placeTooltip(
+        placement,
+        target.getBoundingClientRect(),
+        bubble.offsetWidth,
+        bubble.offsetHeight
+      )
+    );
+  }, [placement]);
+  useLayoutEffect(() => {
+    if (open && scope) place();
+  }, [open, scope, place, content]);
+  useEffect(() => {
+    if (!open) return;
+    const onKey = (e) => {
+      if (e.key === "Escape") hide(0);
+    };
+    window.addEventListener("scroll", place, true);
+    window.addEventListener("resize", place);
+    document.addEventListener("keydown", onKey);
+    return () => {
+      window.removeEventListener("scroll", place, true);
+      window.removeEventListener("resize", place);
+      document.removeEventListener("keydown", onKey);
+    };
+  }, [open, place, hide]);
+  if (disabled || content == null || content === "") return children;
+  const visible = open && placed !== null;
+  const restatesLabel = typeof content === "string" && content === children.props["aria-label"];
+  const style = placed ? {
+    left: placed.left,
+    top: placed.top,
+    "--hdk-tooltip-arrow": `${placed.arrow}px`
+  } : { left: 0, top: 0 };
+  const own = children.props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    React.cloneElement(children, {
+      ref: setAnchor,
+      onPointerEnter: (e) => {
+        own.onPointerEnter?.(e);
+        if (e.pointerType === "mouse") show(delay);
+      },
+      onPointerLeave: (e) => {
+        own.onPointerLeave?.(e);
+        if (e.pointerType === "mouse") hide(HIDE_GRACE_MS);
+      },
+      // A press dismisses it, as it does a native title: the click usually
+      // opens something (a menu, a dialog) the bubble would sit on top of.
+      onPointerDown: (e) => {
+        own.onPointerDown?.(e);
+        hide(0);
+      },
+      onFocus: (e) => {
+        own.onFocus?.(e);
+        if (e.currentTarget.matches(":focus-visible")) show(0);
+      },
+      onBlur: (e) => {
+        own.onBlur?.(e);
+        hide(0);
+      },
+      "aria-describedby": [own["aria-describedby"], open && !restatesLabel ? tipId : null].filter(Boolean).join(" ") || void 0
+    }),
+    open && scope && createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: bubbleRef,
+          id: tipId,
+          role: "tooltip",
+          className: [
+            "hdk-tooltip",
+            `hdk-tooltip--${variant}`,
+            `hdk-tooltip--${placed?.side ?? placement}`,
+            visible && "hdk-tooltip--visible"
+          ].filter(Boolean).join(" "),
+          style,
+          onPointerEnter: () => clearTimeout(timer.current),
+          onPointerLeave: () => hide(HIDE_GRACE_MS),
+          children: content
+        }
+      ),
+      scope
+    )
+  ] });
+}
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../src/components/Tooltip.tsx"],"sourcesContent":["/**\n * Tooltip Component\n * Themed replacement for `title=`. A native title tooltip is OS-drawn, waits\n * about a second, never appears on keyboard focus and cannot be themed.\n *\n * Meets WCAG 1.4.13 (content on hover or focus): it shows on hover AND focus,\n * Escape dismisses it, and the pointer can move onto the bubble without it\n * closing. The child gets `aria-describedby`, so the text is announced —\n * unless it is the child's own `aria-label`, which would read it twice. That\n * is the common case for an icon button: the label names it, and the tooltip\n * shows sighted users the same words.\n *\n * Like <Select>, the bubble is portalled into the anchor's theme scope (see\n * themeScopeOf), so it keeps the theme's tokens and is placed correctly even\n * under a transformed ancestor.\n */\n\nimport React, { useCallback, useEffect, useId, useLayoutEffect, useRef, useState } from 'react'\nimport { createPortal } from 'react-dom'\nimport '../tooltip.css'\nimport { themeScopeOf } from '../lib/themeScope'\nimport { placeTooltip, type Placed, type TooltipPlacement } from '../lib/tooltipPlacement'\n\nexport type { TooltipPlacement }\nexport type TooltipVariant = 'inverse' | 'card' | 'primary'\n\nexport interface TooltipProps {\n  content: React.ReactNode\n  /** Preferred side; flips to the opposite one when it would leave the viewport. */\n  placement?: TooltipPlacement\n  variant?: TooltipVariant\n  /** Hover delay before showing, ms. Focus shows immediately. */\n  delay?: number\n  /** Render the child alone, e.g. while a menu it belongs to is open. */\n  disabled?: boolean\n  /** A single element. Tooltip attaches its ref and pointer/focus handlers to it\n   *  directly (composed with the child's own) and adds aria-describedby. */\n  children: React.ReactElement<AnchorProps>\n}\n\n/** What Tooltip reads from, and adds to, its child. No wrapper element: a\n *  wrapper — even `display: contents` — still changes the DOM tree, and with it\n *  every `:last-child`, `>` and `+` selector aimed at the child. */\ninterface AnchorProps {\n  'aria-describedby'?: string\n  'aria-label'?: string\n  ref?: React.Ref<HTMLElement>\n  onPointerEnter?: React.PointerEventHandler<HTMLElement>\n  onPointerLeave?: React.PointerEventHandler<HTMLElement>\n  onPointerDown?: React.PointerEventHandler<HTMLElement>\n  onFocus?: React.FocusEventHandler<HTMLElement>\n  onBlur?: React.FocusEventHandler<HTMLElement>\n}\n\n/** The child's own ref: a prop in React 19, on the element in React 18 (where\n *  reading it from props is always undefined, and in 19 `element.ref` warns). */\nfunction childRefOf(child: React.ReactElement<AnchorProps>): React.Ref<HTMLElement> | undefined {\n  if (!React.version.startsWith('18')) return child.props.ref\n  return (child as unknown as { ref?: React.Ref<HTMLElement> }).ref ?? undefined\n}\n\nconst HIDE_GRACE_MS = 120\n\nexport function Tooltip({\n  content,\n  placement = 'top',\n  variant = 'card',\n  delay = 300,\n  disabled = false,\n  children\n}: TooltipProps) {\n  const tipId = useId()\n  const [open, setOpen] = useState(false)\n  const [placed, setPlaced] = useState<Placed | null>(null)\n  const [scope, setScope] = useState<HTMLElement | null>(null)\n  const anchorRef = useRef<HTMLElement | null>(null)\n  const bubbleRef = useRef<HTMLDivElement>(null)\n  const timer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)\n\n  const show = useCallback((after: number) => {\n    clearTimeout(timer.current)\n    timer.current = setTimeout(() => {\n      setScope(themeScopeOf(anchorRef.current))\n      setOpen(true)\n    }, after)\n  }, [])\n\n  const hide = useCallback((after: number) => {\n    clearTimeout(timer.current)\n    timer.current = setTimeout(() => {\n      setOpen(false)\n      setPlaced(null)\n    }, after)\n  }, [])\n\n  useEffect(() => () => clearTimeout(timer.current), [])\n\n  const childRef = childRefOf(children)\n  const setAnchor = useCallback(\n    (node: HTMLElement | null) => {\n      anchorRef.current = node\n      if (typeof childRef === 'function') childRef(node)\n      else if (childRef) (childRef as React.MutableRefObject<HTMLElement | null>).current = node\n    },\n    [childRef]\n  )\n\n  const place = useCallback(() => {\n    const target = anchorRef.current\n    const bubble = bubbleRef.current\n    if (!target || !bubble) return\n    setPlaced(\n      placeTooltip(\n        placement,\n        target.getBoundingClientRect(),\n        bubble.offsetWidth,\n        bubble.offsetHeight\n      )\n    )\n  }, [placement])\n\n  useLayoutEffect(() => {\n    if (open && scope) place()\n  }, [open, scope, place, content])\n\n  useEffect(() => {\n    if (!open) return\n    const onKey = (e: KeyboardEvent) => {\n      if (e.key === 'Escape') hide(0)\n    }\n    window.addEventListener('scroll', place, true)\n    window.addEventListener('resize', place)\n    document.addEventListener('keydown', onKey)\n    return () => {\n      window.removeEventListener('scroll', place, true)\n      window.removeEventListener('resize', place)\n      document.removeEventListener('keydown', onKey)\n    }\n  }, [open, place, hide])\n\n  if (disabled || content == null || content === '') return children\n\n  const visible = open && placed !== null\n  const restatesLabel = typeof content === 'string' && content === children.props['aria-label']\n  const style: React.CSSProperties = placed\n    ? ({\n        left: placed.left,\n        top: placed.top,\n        '--hdk-tooltip-arrow': `${placed.arrow}px`\n      } as React.CSSProperties)\n    : { left: 0, top: 0 }\n\n  const own = children.props\n  return (\n    <>\n      {React.cloneElement(children, {\n        ref: setAnchor,\n        onPointerEnter: e => {\n          own.onPointerEnter?.(e)\n          if (e.pointerType === 'mouse') show(delay)\n        },\n        onPointerLeave: e => {\n          own.onPointerLeave?.(e)\n          if (e.pointerType === 'mouse') hide(HIDE_GRACE_MS)\n        },\n        // A press dismisses it, as it does a native title: the click usually\n        // opens something (a menu, a dialog) the bubble would sit on top of.\n        onPointerDown: e => {\n          own.onPointerDown?.(e)\n          hide(0)\n        },\n        onFocus: e => {\n          own.onFocus?.(e)\n          // Keyboard focus only — a mouse click focuses too, and the hover\n          // path already handles that pointer.\n          if (e.currentTarget.matches(':focus-visible')) show(0)\n        },\n        onBlur: e => {\n          own.onBlur?.(e)\n          hide(0)\n        },\n        'aria-describedby':\n          [own['aria-describedby'], open && !restatesLabel ? tipId : null]\n            .filter(Boolean)\n            .join(' ') || undefined\n      })}\n      {open &&\n        scope &&\n        createPortal(\n          <div\n            ref={bubbleRef}\n            id={tipId}\n            role=\"tooltip\"\n            className={[\n              'hdk-tooltip',\n              `hdk-tooltip--${variant}`,\n              `hdk-tooltip--${placed?.side ?? placement}`,\n              visible && 'hdk-tooltip--visible'\n            ]\n              .filter(Boolean)\n              .join(' ')}\n            style={style}\n            onPointerEnter={() => clearTimeout(timer.current)}\n            onPointerLeave={() => hide(HIDE_GRACE_MS)}\n          >\n            {content}\n          </div>,\n          scope\n        )}\n    </>\n  )\n}\n"],"names":[],"mappings":"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"}

package/dist/context-menu.css

@@ -0,0 +1,11 @@
+/**
+ * ContextMenu Component Styles
+ * Generic context menu with dynamic positioning
+ */
+
+.context-menu {
+  position: fixed;
+  left: var(--context-menu-x, 0);
+  top: var(--context-menu-y, 0);
+  z-index: var(--context-menu-z-index, 1000);
+}