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

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":";;;;;;AAwDA,SAAS,WAAW,OAA4E;AAC9F,MAAI,CAAC,MAAM,QAAQ,WAAW,IAAI,EAAG,QAAO,MAAM,MAAM;AACxD,SAAQ,MAAsD,OAAO;AACvE;AAEA,MAAM,gBAAgB;AAEf,SAAS,QAAQ;AAAA,EACtB;AAAA,EACA,YAAY;AAAA,EACZ,UAAU;AAAA,EACV,QAAQ;AAAA,EACR,WAAW;AAAA,EACX;AACF,GAAiB;AACf,QAAM,QAAQ,MAAA;AACd,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAwB,IAAI;AACxD,QAAM,CAAC,OAAO,QAAQ,IAAI,SAA6B,IAAI;AAC3D,QAAM,YAAY,OAA2B,IAAI;AACjD,QAAM,YAAY,OAAuB,IAAI;AAC7C,QAAM,QAAQ,OAAkD,MAAS;AAEzE,QAAM,OAAO,YAAY,CAAC,UAAkB;AAC1C,iBAAa,MAAM,OAAO;AAC1B,UAAM,UAAU,WAAW,MAAM;AAC/B,eAAS,aAAa,UAAU,OAAO,CAAC;AACxC,cAAQ,IAAI;AAAA,IACd,GAAG,KAAK;AAAA,EACV,GAAG,CAAA,CAAE;AAEL,QAAM,OAAO,YAAY,CAAC,UAAkB;AAC1C,iBAAa,MAAM,OAAO;AAC1B,UAAM,UAAU,WAAW,MAAM;AAC/B,cAAQ,KAAK;AACb,gBAAU,IAAI;AAAA,IAChB,GAAG,KAAK;AAAA,EACV,GAAG,CAAA,CAAE;AAEL,YAAU,MAAM,MAAM,aAAa,MAAM,OAAO,GAAG,CAAA,CAAE;AAErD,QAAM,WAAW,WAAW,QAAQ;AACpC,QAAM,YAAY;AAAA,IAChB,CAAC,SAA6B;AAC5B,gBAAU,UAAU;AACpB,UAAI,OAAO,aAAa,WAAY,UAAS,IAAI;AAAA,eACxC,SAAW,UAAwD,UAAU;AAAA,IACxF;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAGX,QAAM,QAAQ,YAAY,MAAM;AAC9B,UAAM,SAAS,UAAU;AACzB,UAAM,SAAS,UAAU;AACzB,QAAI,CAAC,UAAU,CAAC,OAAQ;AACxB;AAAA,MACE;AAAA,QACE;AAAA,QACA,OAAO,sBAAA;AAAA,QACP,OAAO;AAAA,QACP,OAAO;AAAA,MAAA;AAAA,IACT;AAAA,EAEJ,GAAG,CAAC,SAAS,CAAC;AAEd,kBAAgB,MAAM;AACpB,QAAI,QAAQ,MAAO,OAAA;AAAA,EACrB,GAAG,CAAC,MAAM,OAAO,OAAO,OAAO,CAAC;AAEhC,YAAU,MAAM;AACd,QAAI,CAAC,KAAM;AACX,UAAM,QAAQ,CAAC,MAAqB;AAClC,UAAI,EAAE,QAAQ,SAAU,MAAK,CAAC;AAAA,IAChC;AACA,WAAO,iBAAiB,UAAU,OAAO,IAAI;AAC7C,WAAO,iBAAiB,UAAU,KAAK;AACvC,aAAS,iBAAiB,WAAW,KAAK;AAC1C,WAAO,MAAM;AACX,aAAO,oBAAoB,UAAU,OAAO,IAAI;AAChD,aAAO,oBAAoB,UAAU,KAAK;AAC1C,eAAS,oBAAoB,WAAW,KAAK;AAAA,IAC/C;AAAA,EACF,GAAG,CAAC,MAAM,OAAO,IAAI,CAAC;AAEtB,MAAI,YAAY,WAAW,QAAQ,YAAY,GAAI,QAAO;AAE1D,QAAM,UAAU,QAAQ,WAAW;AACnC,QAAM,gBAAgB,OAAO,YAAY,YAAY,YAAY,SAAS,MAAM,YAAY;AAC5F,QAAM,QAA6B,SAC9B;AAAA,IACC,MAAM,OAAO;AAAA,IACb,KAAK,OAAO;AAAA,IACZ,uBAAuB,GAAG,OAAO,KAAK;AAAA,EAAA,IAExC,EAAE,MAAM,GAAG,KAAK,EAAA;AAEpB,QAAM,MAAM,SAAS;AACrB,SACE,qBAAA,UAAA,EACG,UAAA;AAAA,IAAA,MAAM,aAAa,UAAU;AAAA,MAC5B,KAAK;AAAA,MACL,gBAAgB,CAAA,MAAK;AACnB,YAAI,iBAAiB,CAAC;AACtB,YAAI,EAAE,gBAAgB,QAAS,MAAK,KAAK;AAAA,MAC3C;AAAA,MACA,gBAAgB,CAAA,MAAK;AACnB,YAAI,iBAAiB,CAAC;AACtB,YAAI,EAAE,gBAAgB,QAAS,MAAK,aAAa;AAAA,MACnD;AAAA;AAAA;AAAA,MAGA,eAAe,CAAA,MAAK;AAClB,YAAI,gBAAgB,CAAC;AACrB,aAAK,CAAC;AAAA,MACR;AAAA,MACA,SAAS,CAAA,MAAK;AACZ,YAAI,UAAU,CAAC;AAGf,YAAI,EAAE,cAAc,QAAQ,gBAAgB,QAAQ,CAAC;AAAA,MACvD;AAAA,MACA,QAAQ,CAAA,MAAK;AACX,YAAI,SAAS,CAAC;AACd,aAAK,CAAC;AAAA,MACR;AAAA,MACA,oBACE,CAAC,IAAI,kBAAkB,GAAG,QAAQ,CAAC,gBAAgB,QAAQ,IAAI,EAC5D,OAAO,OAAO,EACd,KAAK,GAAG,KAAK;AAAA,IAAA,CACnB;AAAA,IACA,QACC,SACA;AAAA,MACE;AAAA,QAAC;AAAA,QAAA;AAAA,UACC,KAAK;AAAA,UACL,IAAI;AAAA,UACJ,MAAK;AAAA,UACL,WAAW;AAAA,YACT;AAAA,YACA,gBAAgB,OAAO;AAAA,YACvB,gBAAgB,QAAQ,QAAQ,SAAS;AAAA,YACzC,WAAW;AAAA,UAAA,EAEV,OAAO,OAAO,EACd,KAAK,GAAG;AAAA,UACX;AAAA,UACA,gBAAgB,MAAM,aAAa,MAAM,OAAO;AAAA,UAChD,gBAAgB,MAAM,KAAK,aAAa;AAAA,UAEvC,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,MAEH;AAAA,IAAA;AAAA,EACF,GACJ;AAEJ;"}

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);
+}

package/dist/controls.css

@@ -0,0 +1,137 @@
+/* Themed fallbacks for the browser's own control styling, for
+ * @wolffm/task-ui-components.
+ *
+ *   import '@wolffm/task-ui-components/controls.css'
+ *   <html class="hdk-controls">
+ *
+ * hadoku_site puts `hdk-controls` on <html>, which covers every
+ * micro-frontend. Every selector is wrapped in `:where()`, so all of it has
+ * ZERO specificity: it only fills in where an app styled nothing. An app's
+ * own rule for the same property — any selector at all — wins, whatever order
+ * the sheets load in. An author rule of any specificity still beats the
+ * browser's stylesheet, which is all this needs to.
+ *
+ * What it covers, each the browser default it replaces:
+ *   - focus ring        Chrome's two-tone `outline: auto`  -> the accent
+ *   - links             -webkit-link blue / visited purple -> the text around it
+ *   - checkbox, radio, range, progress  system blue        -> accent-color
+ *   - text selection    system highlight                   -> the accent tint
+ *   - placeholder       darkgray                           -> tertiary text
+ *   - <summary> marker  text-colour triangle               -> secondary text
+ *   - file picker       OS "Choose file" button            -> a soft button
+ *   - number spinners   OS up/down arrows                  -> removed (arrow keys
+ *                       still step; <NumberInput> is the themed stepper)
+ *   - text fields and textarea, buttons, a select's closed box: the system
+ *     field/button chrome -> the theme's card surface and border
+ *
+ * The open list of a <select> is not CSS-reachable at all; installSelectMenus()
+ * replaces it. Date and time pickers stay OS-drawn: apps own those.
+ *
+ * Everything sits in `@layer hdk-fallbacks`. A rule in a cascade layer loses
+ * to every unlayered rule and to every layer declared after it — whatever
+ * either's specificity — and Tailwind ships its utilities in layers. Unlayered,
+ * even a zero-specificity rule here would beat `bg-primary`. The page must
+ * declare the layer FIRST, before any other, so it ranks lowest:
+ *
+ *   @layer hdk-fallbacks, base, theme, utilities;
+ *
+ * hadoku_site's global.css does that. A sheet that never names it just gets
+ * these rules below its own unlayered ones, which is also correct.
+ */
+
+@layer hdk-fallbacks {
+  /* accent-color inherits, so it is declared once per theme scope rather than
+   * per element: an app's accent-color on a container still reaches its
+   * children, and a nested [data-theme] still resolves its own accent. */
+  :where(.hdk-controls),
+  :where(.hdk-controls [data-theme]) {
+    accent-color: var(--color-primary);
+  }
+
+  :where(.hdk-controls) :where(:focus-visible) {
+    outline: 2px solid var(--color-primary);
+    outline-offset: 2px;
+  }
+
+  /* The browser colours a link directly rather than letting it inherit, so a
+   * link nobody styled is blue on any surface. `inherit` is what an app means
+   * when it styles the surface and not the link (Tailwind's preflight does the
+   * same); the underline keeps it reading as a link. */
+  :where(.hdk-controls) :where(a:any-link) {
+    color: inherit;
+  }
+
+  :where(.hdk-controls) ::selection {
+    background-color: var(--color-primary-bg);
+    color: var(--color-on-primary-bg);
+  }
+
+  :where(.hdk-controls) ::placeholder {
+    color: var(--color-text-tertiary);
+    opacity: 1;
+  }
+
+  :where(.hdk-controls) :where(summary)::marker {
+    color: var(--color-text-secondary);
+  }
+
+  :where(.hdk-controls) :where(input[type='file'])::file-selector-button {
+    margin-inline-end: 8px;
+    padding: 4px 10px;
+    font: inherit;
+    font-weight: var(--font-weight-semibold);
+    color: var(--color-on-neutral-bg);
+    background-color: var(--color-neutral-bg);
+    border: 1px solid transparent;
+    border-radius: var(--hdk-radius);
+    cursor: pointer;
+  }
+
+  :where(.hdk-controls) :where(input[type='file'])::file-selector-button:hover {
+    border-color: var(--color-neutral);
+  }
+
+  :where(.hdk-controls) :where(input[type='number']) {
+    appearance: textfield;
+  }
+
+  :where(.hdk-controls) :where(input[type='number'])::-webkit-inner-spin-button,
+  :where(.hdk-controls) :where(input[type='number'])::-webkit-outer-spin-button {
+    appearance: none;
+    margin: 0;
+  }
+
+  /* Field chrome: only the properties that make up the system look. No padding,
+   * radius, font or size: those decide layout and shape, and an app that
+   * styled a field's background but not its padding must not see it move. */
+  :where(.hdk-controls)
+    :where(
+      input:not(
+        [type='checkbox'],
+        [type='radio'],
+        [type='range'],
+        [type='file'],
+        [type='color'],
+        [type='button'],
+        [type='submit'],
+        [type='reset'],
+        [type='image']
+      ),
+      textarea,
+      select
+    ) {
+    color: var(--color-text);
+    background-color: var(--color-bg-card);
+    border: 1px solid var(--color-border);
+  }
+
+  :where(.hdk-controls)
+    :where(button, input[type='button'], input[type='submit'], input[type='reset']) {
+    /* inherit, not a token: an app that coloured a button's surface and not
+     * its text, or draws with currentColor inside it, keeps the colour it
+     * had from the page instead of jumping to the neutral tint's ink. */
+    color: inherit;
+    background-color: var(--color-neutral-bg);
+    border: 1px solid transparent;
+  }
+}

package/dist/hooks/useReducedMotion.d.ts

@@ -0,0 +1,7 @@
+/**
+ * useReducedMotion Hook
+ * Detects if the user prefers reduced motion
+ * Returns true if animations should be disabled or simplified
+ */
+export declare function useReducedMotion(): boolean;
+//# sourceMappingURL=useReducedMotion.d.ts.map

package/dist/hooks/useReducedMotion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReducedMotion.d.ts","sourceRoot":"","sources":["../../src/hooks/useReducedMotion.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAIH,wBAAgB,gBAAgB,IAAI,OAAO,CA2B1C"}

package/dist/hooks/useReducedMotion.js

@@ -0,0 +1,25 @@
+import { useState, useEffect } from "react";
+function useReducedMotion() {
+  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return false;
+    return window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+  });
+  useEffect(() => {
+    if (typeof window === "undefined" || !window.matchMedia) return;
+    const mediaQuery = window.matchMedia("(prefers-reduced-motion: reduce)");
+    const handleChange = (event) => {
+      setPrefersReducedMotion(event.matches);
+    };
+    if (mediaQuery.addEventListener) {
+      mediaQuery.addEventListener("change", handleChange);
+      return () => mediaQuery.removeEventListener("change", handleChange);
+    }
+    mediaQuery.addListener(handleChange);
+    return () => mediaQuery.removeListener(handleChange);
+  }, []);
+  return prefersReducedMotion;
+}
+export {
+  useReducedMotion
+};
+//# sourceMappingURL=useReducedMotion.js.map

package/dist/hooks/useReducedMotion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useReducedMotion.js","sources":["../../src/hooks/useReducedMotion.ts"],"sourcesContent":["/**\r\n * useReducedMotion Hook\r\n * Detects if the user prefers reduced motion\r\n * Returns true if animations should be disabled or simplified\r\n */\r\n\r\nimport { useState, useEffect } from 'react'\r\n\r\nexport function useReducedMotion(): boolean {\r\n  const [prefersReducedMotion, setPrefersReducedMotion] = useState(() => {\r\n    // SSR and jsdom have no matchMedia: default to false.\r\n    if (typeof window === 'undefined' || !window.matchMedia) return false\r\n    return window.matchMedia('(prefers-reduced-motion: reduce)').matches\r\n  })\r\n\r\n  useEffect(() => {\r\n    if (typeof window === 'undefined' || !window.matchMedia) return\r\n    const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)')\r\n\r\n    const handleChange = (event: MediaQueryListEvent) => {\r\n      setPrefersReducedMotion(event.matches)\r\n    }\r\n\r\n    // Modern browsers\r\n    if (mediaQuery.addEventListener) {\r\n      mediaQuery.addEventListener('change', handleChange)\r\n      return () => mediaQuery.removeEventListener('change', handleChange)\r\n    }\r\n\r\n    // Fallback for older browsers\r\n    mediaQuery.addListener(handleChange)\r\n    return () => mediaQuery.removeListener(handleChange)\r\n  }, [])\r\n\r\n  return prefersReducedMotion\r\n}\r\n"],"names":[],"mappings":";AAQO,SAAS,mBAA4B;AAC1C,QAAM,CAAC,sBAAsB,uBAAuB,IAAI,SAAS,MAAM;AAErE,QAAI,OAAO,WAAW,eAAe,CAAC,OAAO,WAAY,QAAO;AAChE,WAAO,OAAO,WAAW,kCAAkC,EAAE;AAAA,EAC/D,CAAC;AAED,YAAU,MAAM;AACd,QAAI,OAAO,WAAW,eAAe,CAAC,OAAO,WAAY;AACzD,UAAM,aAAa,OAAO,WAAW,kCAAkC;AAEvE,UAAM,eAAe,CAAC,UAA+B;AACnD,8BAAwB,MAAM,OAAO;AAAA,IACvC;AAGA,QAAI,WAAW,kBAAkB;AAC/B,iBAAW,iBAAiB,UAAU,YAAY;AAClD,aAAO,MAAM,WAAW,oBAAoB,UAAU,YAAY;AAAA,IACpE;AAGA,eAAW,YAAY,YAAY;AACnC,WAAO,MAAM,WAAW,eAAe,YAAY;AAAA,EACrD,GAAG,CAAA,CAAE;AAEL,SAAO;AACT;"}

package/dist/hooks/useToast.d.ts

@@ -0,0 +1,18 @@
+/**
+ * useToast hook
+ * Manages toast notification state and display
+ */
+export interface ToastState {
+    id: number;
+    message: string;
+    type: 'success' | 'error' | 'info' | 'warning';
+    duration?: number;
+}
+export interface UseToastReturn {
+    toasts: ToastState[];
+    showToast: (message: string, type?: 'success' | 'error' | 'info' | 'warning', duration?: number) => void;
+    dismissToast: (id: number) => void;
+    clearAll: () => void;
+}
+export declare function useToast(): UseToastReturn;
+//# sourceMappingURL=useToast.d.ts.map

package/dist/hooks/useToast.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.d.ts","sourceRoot":"","sources":["../../src/hooks/useToast.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAIH,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,cAAc;IAC7B,MAAM,EAAE,UAAU,EAAE,CAAA;IACpB,SAAS,EAAE,CACT,OAAO,EAAE,MAAM,EACf,IAAI,CAAC,EAAE,SAAS,GAAG,OAAO,GAAG,MAAM,GAAG,SAAS,EAC/C,QAAQ,CAAC,EAAE,MAAM,KACd,IAAI,CAAA;IACT,YAAY,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAA;IAClC,QAAQ,EAAE,MAAM,IAAI,CAAA;CACrB;AAID,wBAAgB,QAAQ,IAAI,cAAc,CA6BzC"}

package/dist/hooks/useToast.js

@@ -0,0 +1,28 @@
+import { useState, useCallback } from "react";
+let toastIdCounter = 0;
+function useToast() {
+  const [toasts, setToasts] = useState([]);
+  const showToast = useCallback(
+    (message, type = "info", duration = 3e3) => {
+      const id = ++toastIdCounter;
+      setToasts((prev) => [...prev, { id, message, type, duration }]);
+    },
+    []
+  );
+  const dismissToast = useCallback((id) => {
+    setToasts((prev) => prev.filter((toast) => toast.id !== id));
+  }, []);
+  const clearAll = useCallback(() => {
+    setToasts([]);
+  }, []);
+  return {
+    toasts,
+    showToast,
+    dismissToast,
+    clearAll
+  };
+}
+export {
+  useToast
+};
+//# sourceMappingURL=useToast.js.map

package/dist/hooks/useToast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useToast.js","sources":["../../src/hooks/useToast.ts"],"sourcesContent":["/**\r\n * useToast hook\r\n * Manages toast notification state and display\r\n */\r\n\r\nimport { useState, useCallback } from 'react'\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 UseToastReturn {\r\n  toasts: ToastState[]\r\n  showToast: (\r\n    message: string,\r\n    type?: 'success' | 'error' | 'info' | 'warning',\r\n    duration?: number\r\n  ) => void\r\n  dismissToast: (id: number) => void\r\n  clearAll: () => void\r\n}\r\n\r\nlet toastIdCounter = 0\r\n\r\nexport function useToast(): UseToastReturn {\r\n  const [toasts, setToasts] = useState<ToastState[]>([])\r\n\r\n  const showToast = useCallback(\r\n    (\r\n      message: string,\r\n      type: 'success' | 'error' | 'info' | 'warning' = 'info',\r\n      duration: number = 3000\r\n    ) => {\r\n      const id = ++toastIdCounter\r\n      setToasts(prev => [...prev, { id, message, type, duration }])\r\n    },\r\n    []\r\n  )\r\n\r\n  const dismissToast = useCallback((id: number) => {\r\n    setToasts(prev => prev.filter(toast => toast.id !== id))\r\n  }, [])\r\n\r\n  const clearAll = useCallback(() => {\r\n    setToasts([])\r\n  }, [])\r\n\r\n  return {\r\n    toasts,\r\n    showToast,\r\n    dismissToast,\r\n    clearAll\r\n  }\r\n}\r\n"],"names":[],"mappings":";AAyBA,IAAI,iBAAiB;AAEd,SAAS,WAA2B;AACzC,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAuB,CAAA,CAAE;AAErD,QAAM,YAAY;AAAA,IAChB,CACE,SACA,OAAiD,QACjD,WAAmB,QAChB;AACH,YAAM,KAAK,EAAE;AACb,gBAAU,CAAA,SAAQ,CAAC,GAAG,MAAM,EAAE,IAAI,SAAS,MAAM,SAAA,CAAU,CAAC;AAAA,IAC9D;AAAA,IACA,CAAA;AAAA,EAAC;AAGH,QAAM,eAAe,YAAY,CAAC,OAAe;AAC/C,cAAU,UAAQ,KAAK,OAAO,WAAS,MAAM,OAAO,EAAE,CAAC;AAAA,EACzD,GAAG,CAAA,CAAE;AAEL,QAAM,WAAW,YAAY,MAAM;AACjC,cAAU,CAAA,CAAE;AAAA,EACd,GAAG,CAAA,CAAE;AAEL,SAAO;AAAA,IACL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA;AAEJ;"}

package/dist/icon-btn.css

@@ -0,0 +1,64 @@
+/* The round 32px icon button on the AppHeader bar — the theme picker trigger,
+ * the settings gear, and any link an app puts in the actions row.
+ *
+ * Defined ONCE. The picker and the gear each used to carry their own copy and
+ * the two had already drifted (padding 8px vs --hdk-space-sm, a ring on every
+ * mouse click vs on :focus-visible, a min-size on one only). `.theme-toggle-btn`
+ * and `.settings-toggle-btn` survive as hooks with no values of their own.
+ *
+ * Lives in its own file because ThemePicker renders outside the header too
+ * (HadokuThemePicker on a video overlay), so its trigger cannot depend on
+ * app-header.css. The chain is app-header.css -> theme-picker.css -> this.
+ *
+ * Works on an <a>: child apps ship without a preflight, so a bare anchor would
+ * render UA blue, visited purple and underlined. */
+
+.app-header__icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  box-sizing: border-box;
+  width: 32px;
+  height: 32px;
+  min-width: 32px;
+  min-height: 32px;
+  padding: 0;
+  margin: 0;
+  border: none;
+  border-radius: 50%;
+  background: none;
+  color: var(--color-text);
+  font: inherit;
+  font-size: var(--hdk-text-lg);
+  line-height: 1;
+  text-decoration: none;
+  cursor: pointer;
+  opacity: 0.7;
+  transition:
+    background-color var(--transition-fast),
+    opacity var(--transition-fast);
+}
+
+/* Same colour visited or not, and no hover recolour from a host stylesheet's
+ * `a:hover` — the hover signal is the background below. */
+.app-header__icon-btn:link,
+.app-header__icon-btn:visited,
+.app-header__icon-btn:hover,
+.app-header__icon-btn:active {
+  color: var(--color-text);
+  text-decoration: none;
+}
+
+.app-header__icon-btn:hover {
+  background-color: var(--color-primary-hover);
+  opacity: 1;
+}
+
+/* :focus-visible, not :focus — :focus rings on every mouse click. Full
+ * opacity too, so a keyboard user never lands on the dimmed resting state. */
+.app-header__icon-btn:focus-visible {
+  outline: none;
+  opacity: 1;
+  box-shadow: 0 0 0 2px var(--color-primary);
+}

package/dist/index.d.ts

@@ -0,0 +1,49 @@
+/**
+ * @wolffm/task-ui-components
+ * Reusable UI components for task management applications
+ * Production-ready and fully typed
+ *
+ * 2.2.0 — AppHeader + ConnectedSettings (with a `children` extension slot).
+ */
+export { HadokuThemePicker } from './components/HadokuThemePicker';
+export { AppHeader } from './components/AppHeader';
+export { ConnectedSettings } from './components/ConnectedSettings';
+export { HadokuThemeProvider, useHadokuTheme, useHadokuThemeOptional } from '@wolffm/themes';
+export type { HadokuThemeValue, HadokuThemeProviderProps } from '@wolffm/themes';
+export { Toast } from './components/Toast';
+export { Toaster } from './components/Toaster';
+export { Modal } from './components/Modal';
+export { ContextMenu } from './components/ContextMenu';
+export { LoadingSkeleton } from './components/LoadingSkeleton';
+export { SettingsModal } from './components/SettingsModal';
+export { Button } from './components/Button';
+export { Select, NativeSelect } from './components/Select';
+export { NumberInput } from './components/NumberInput';
+export { Tooltip } from './components/Tooltip';
+export { installTitleTooltips } from './lib/titleTooltips';
+export type { TitleTooltipOptions } from './lib/titleTooltips';
+export { installSelectMenus } from './lib/selectMenus';
+export { BentoGrid } from './components/BentoGrid';
+export { BentoCard } from './components/BentoCard';
+export { useToast } from './hooks/useToast';
+export { useReducedMotion } from './hooks/useReducedMotion';
+export { SettingsIcon, TagIcon, CircleIcon, SquareIcon, TriangleIcon, DiamondIcon, StarIcon, HexagonIcon, PentagonIcon, OctagonIcon, FALLBACK_ICONS, getFallbackIcon } from './components/ThemeIcons';
+export { SunIcon, MoonIcon, StrawberryIcon, WaveIcon, ZapIcon, CoffeeIcon, FlowerIcon, HeartIcon, LeafIcon, LanternIcon } from '@wolffm/themes';
+export type { ThemeName, ThemeFamily, DropdownPlacement, ThemeMode } from './types';
+export type { AppHeaderProps } from './components/AppHeader';
+export type { ConnectedSettingsProps } from './components/ConnectedSettings';
+export type { ContentLevelState, Identity, SignIn, SignInResult, Tier } from './lib/settingsClient';
+export { loadSignIn, switchKeyHref } from './lib/settingsClient';
+export type { ToastProps } from './components/Toast';
+export type { ToasterProps, ToastState } from './components/Toaster';
+export type { UseToastReturn } from './hooks/useToast';
+export type { ModalProps } from './components/Modal';
+export type { ContextMenuProps, ContextMenuItem } from './components/ContextMenu';
+export type { LoadingSkeletonProps } from './components/LoadingSkeleton';
+export type { ButtonProps, ButtonVariant, ButtonFamily, ButtonSize, ButtonShape } from './components/Button';
+export type { SelectProps, SelectOption, SelectVariant, SelectSize, NativeSelectProps } from './components/Select';
+export type { TooltipProps, TooltipPlacement, TooltipVariant } from './components/Tooltip';
+export type { SettingsModalProps, SettingsSection, SettingsField, SettingsToggleField, SettingsTextInputField, SettingsPasswordField, SettingsSelectField, SettingsButtonField, SettingsCustomField } from './components/SettingsModal';
+export type { BentoGridProps, BentoColumns } from './components/BentoGrid';
+export type { BentoCardProps, CardSize } from './components/BentoCard';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"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"}