@particle-academy/react-fancy 5.12.0 → 5.14.0

package/dist/chunk-IGU5YXRV.cjs

@@ -0,0 +1,138 @@
+'use strict';
+
+var chunk6BW5BQMN_cjs = require('./chunk-6BW5BQMN.cjs');
+var chunkPPLR2DNC_cjs = require('./chunk-PPLR2DNC.cjs');
+var chunkYLGTDBB2_cjs = require('./chunk-YLGTDBB2.cjs');
+var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
+var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
+var chunkOUOEQZHY_cjs = require('./chunk-OUOEQZHY.cjs');
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var sizeClasses = {
+  xs: "px-2 py-1 text-xs",
+  sm: "px-2.5 py-1.5 text-sm",
+  md: "px-3 py-2 text-sm",
+  lg: "px-4 py-2.5 text-base",
+  xl: "px-5 py-3 text-lg"
+};
+function MultiSwitch({
+  size = "md",
+  dirty,
+  error,
+  label,
+  description,
+  required,
+  disabled,
+  className,
+  id,
+  name,
+  list,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+  linear,
+  mode,
+  ...rest
+}) {
+  const resolvedOptions = list.map(chunkYLGTDBB2_cjs.resolveOption);
+  const fallback = defaultValue ?? resolvedOptions[0]?.value;
+  const resolvedMode = chunkL3V3BYVS_cjs.useFieldMode(mode);
+  const { showControl, interactive, enterEdit, exitEdit } = chunkKJ22KE56_cjs.useInlineEdit(resolvedMode, disabled);
+  const [value, setValue] = chunkOUOEQZHY_cjs.useControllableState(controlledValue, fallback, onValueChange);
+  const containerRef = react.useRef(null);
+  const itemRefs = react.useRef([]);
+  const [indicator, setIndicator] = react.useState(null);
+  const selectedIndex = resolvedOptions.findIndex(
+    (o) => o.value === value
+  );
+  const updateIndicator = react.useCallback(() => {
+    const container = containerRef.current;
+    const activeItem = itemRefs.current[selectedIndex];
+    if (!container || !activeItem) {
+      setIndicator(null);
+      return;
+    }
+    const containerRect = container.getBoundingClientRect();
+    const itemRect = activeItem.getBoundingClientRect();
+    setIndicator({
+      left: itemRect.left - containerRect.left,
+      width: itemRect.width
+    });
+  }, [selectedIndex]);
+  react.useEffect(() => {
+    updateIndicator();
+  }, [updateIndicator]);
+  const control = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(chunk6BW5BQMN_cjs.DisplayValue, { size, interactive, onActivate: enterEdit, children: resolvedOptions.find((o) => o.value === value)?.label }) : /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: containerRef,
+      ...rest,
+      "data-react-fancy-multi-switch": "",
+      role: "radiogroup",
+      id,
+      onBlur: (e) => {
+        if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+      },
+      className: chunk3Z6ALUWP_cjs.cn(
+        "relative inline-flex rounded-lg border border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800",
+        dirty && "ring-2 ring-amber-400/50",
+        error && "ring-2 ring-red-500/50",
+        disabled && "opacity-50 cursor-not-allowed",
+        className
+      ),
+      children: [
+        indicator && /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            className: "absolute top-0 bottom-0 rounded-lg bg-blue-600 transition-all duration-200 ease-out",
+            style: { left: indicator.left, width: indicator.width }
+          }
+        ),
+        resolvedOptions.map((option, index) => {
+          const isSelected = option.value === value;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "button",
+            {
+              ref: (el) => {
+                itemRefs.current[index] = el;
+              },
+              type: "button",
+              role: "radio",
+              "aria-checked": isSelected,
+              disabled: disabled || option.disabled,
+              autoFocus: interactive && (selectedIndex === -1 ? index === 0 : isSelected),
+              onClick: () => {
+                if (linear) {
+                  const nextIndex = (selectedIndex + 1) % resolvedOptions.length;
+                  setValue(resolvedOptions[nextIndex].value);
+                } else {
+                  setValue(option.value);
+                }
+              },
+              className: chunk3Z6ALUWP_cjs.cn(
+                "relative z-10 font-medium transition-colors duration-200",
+                sizeClasses[size],
+                isSelected ? "text-white" : "text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100",
+                (disabled || option.disabled) && "cursor-not-allowed"
+              ),
+              children: option.label
+            },
+            String(option.value)
+          );
+        }),
+        name && /* @__PURE__ */ jsxRuntime.jsx("input", { type: "hidden", name, value: String(value) })
+      ]
+    }
+  );
+  if (label || error || description) {
+    return /* @__PURE__ */ jsxRuntime.jsx(chunkPPLR2DNC_cjs.Field, { label, description, error, required, htmlFor: id, size, children: control });
+  }
+  return control;
+}
+MultiSwitch.displayName = "MultiSwitch";
+
+exports.MultiSwitch = MultiSwitch;
+//# sourceMappingURL=chunk-IGU5YXRV.cjs.map
+//# sourceMappingURL=chunk-IGU5YXRV.cjs.map

package/dist/chunk-IGU5YXRV.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/MultiSwitch/MultiSwitch.tsx"],"names":["resolveOption","useFieldMode","useInlineEdit","useControllableState","useRef","useState","useCallback","useEffect","DisplayValue","jsxs","cn","jsx","Field"],"mappings":"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","file":"chunk-IGU5YXRV.cjs","sourcesContent":["import { useRef, useState, useEffect, useCallback } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { Field } from \"../Field\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { resolveOption } from \"../inputs.utils\";\nimport type { Size } from \"../../../utils/types\";\nimport type { MultiSwitchProps } from \"./MultiSwitch.types\";\n\nconst sizeClasses: Record<Size, string> = {\n  xs: \"px-2 py-1 text-xs\",\n  sm: \"px-2.5 py-1.5 text-sm\",\n  md: \"px-3 py-2 text-sm\",\n  lg: \"px-4 py-2.5 text-base\",\n  xl: \"px-5 py-3 text-lg\",\n};\n\nexport function MultiSwitch<V = string>({\n  size = \"md\",\n  dirty,\n  error,\n  label,\n  description,\n  required,\n  disabled,\n  className,\n  id,\n  name,\n  list,\n  value: controlledValue,\n  defaultValue,\n  onValueChange,\n  linear,\n  mode,\n  ...rest\n}: MultiSwitchProps<V>) {\n  const resolvedOptions = list.map(resolveOption);\n  const fallback = defaultValue ?? resolvedOptions[0]?.value;\n  const resolvedMode = useFieldMode(mode);\n  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n  const [value, setValue] = useControllableState(controlledValue, fallback as V, onValueChange);\n\n  const containerRef = useRef<HTMLDivElement>(null);\n  const itemRefs = useRef<(HTMLButtonElement | null)[]>([]);\n  const [indicator, setIndicator] = useState<{ left: number; width: number } | null>(null);\n\n  const selectedIndex = resolvedOptions.findIndex(\n    (o) => o.value === value,\n  );\n\n  const updateIndicator = useCallback(() => {\n    const container = containerRef.current;\n    const activeItem = itemRefs.current[selectedIndex];\n    if (!container || !activeItem) {\n      setIndicator(null);\n      return;\n    }\n    const containerRect = container.getBoundingClientRect();\n    const itemRect = activeItem.getBoundingClientRect();\n    setIndicator({\n      left: itemRect.left - containerRect.left,\n      width: itemRect.width,\n    });\n  }, [selectedIndex]);\n\n  useEffect(() => {\n    updateIndicator();\n  }, [updateIndicator]);\n\n  const control = !showControl ? (\n    <DisplayValue size={size} interactive={interactive} onActivate={enterEdit}>\n      {resolvedOptions.find((o) => o.value === value)?.label}\n    </DisplayValue>\n  ) : (\n    <div\n      ref={containerRef}\n      {...rest}\n      data-react-fancy-multi-switch=\"\"\n      role=\"radiogroup\"\n      id={id}\n      onBlur={(e) => {\n        if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n      }}\n      className={cn(\n        \"relative inline-flex rounded-lg border border-zinc-300 bg-zinc-100 dark:border-zinc-700 dark:bg-zinc-800\",\n        dirty && \"ring-2 ring-amber-400/50\",\n        error && \"ring-2 ring-red-500/50\",\n        disabled && \"opacity-50 cursor-not-allowed\",\n        className,\n      )}\n    >\n      {indicator && (\n        <span\n          className=\"absolute top-0 bottom-0 rounded-lg bg-blue-600 transition-all duration-200 ease-out\"\n          style={{ left: indicator.left, width: indicator.width }}\n        />\n      )}\n      {resolvedOptions.map((option, index) => {\n        const isSelected = option.value === value;\n        return (\n          <button\n            key={String(option.value)}\n            ref={(el) => { itemRefs.current[index] = el; }}\n            type=\"button\"\n            role=\"radio\"\n            aria-checked={isSelected}\n            disabled={disabled || option.disabled}\n            autoFocus={interactive && (selectedIndex === -1 ? index === 0 : isSelected)}\n            onClick={() => {\n              if (linear) {\n                const nextIndex = (selectedIndex + 1) % resolvedOptions.length;\n                setValue(resolvedOptions[nextIndex].value as V);\n              } else {\n                setValue(option.value as V);\n              }\n            }}\n            className={cn(\n              \"relative z-10 font-medium transition-colors duration-200\",\n              sizeClasses[size],\n              isSelected\n                ? \"text-white\"\n                : \"text-zinc-600 hover:text-zinc-900 dark:text-zinc-400 dark:hover:text-zinc-100\",\n              (disabled || option.disabled) && \"cursor-not-allowed\",\n            )}\n          >\n            {option.label}\n          </button>\n        );\n      })}\n      {name && <input type=\"hidden\" name={name} value={String(value)} />}\n    </div>\n  );\n\n  if (label || error || description) {\n    return (\n      <Field label={label} description={description} error={error} required={required} htmlFor={id} size={size}>\n        {control}\n      </Field>\n    );\n  }\n\n  return control;\n}\n\nMultiSwitch.displayName = \"MultiSwitch\";\n"]}

package/dist/chunk-IGYIMS6J.js

@@ -0,0 +1,174 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { createContext, useState, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronDown } from 'lucide-react';
+
+var MenuContext = createContext(null);
+function useMenu() {
+  const ctx = useContext(MenuContext);
+  if (!ctx) {
+    throw new Error("useMenu must be used within a <Menu> component");
+  }
+  return ctx;
+}
+function MenuItem({
+  children,
+  href,
+  as: As,
+  icon,
+  active = false,
+  disabled = false,
+  badge,
+  onClick,
+  className,
+  ...rest
+}) {
+  const { orientation } = useMenu();
+  const isVertical = orientation === "vertical";
+  const isLink = Boolean(href || As);
+  const Tag = isLink ? As ?? "a" : "button";
+  const tagProps = isLink ? { ...href ? { href } : {}, onClick } : { type: "button", onClick };
+  return /* @__PURE__ */ jsxs(
+    Tag,
+    {
+      ...tagProps,
+      ...rest,
+      "data-react-fancy-menu-item": "",
+      "data-active": active || void 0,
+      "aria-current": active ? "page" : void 0,
+      "aria-disabled": disabled || void 0,
+      className: cn(
+        "flex items-center gap-2 rounded-md text-sm font-medium transition-colors",
+        "outline-none focus-visible:ring-2 focus-visible:ring-blue-500",
+        isVertical ? "w-full px-3 py-2" : "px-3 py-2",
+        active ? "bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100" : "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100",
+        disabled && "pointer-events-none opacity-50",
+        className
+      ),
+      children: [
+        icon && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "flex-1 truncate text-left", children }),
+        badge && /* @__PURE__ */ jsx("span", { className: "shrink-0", children: badge })
+      ]
+    }
+  );
+}
+MenuItem.displayName = "MenuItem";
+function MenuSubmenu({
+  children,
+  label,
+  icon,
+  defaultOpen = false,
+  className
+}) {
+  const [open, setOpen] = useState(defaultOpen);
+  const { orientation } = useMenu();
+  const isVertical = orientation === "vertical";
+  if (!isVertical) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        "data-react-fancy-menu-submenu": "",
+        className: cn("group relative", className),
+        children: [
+          /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              className: cn(
+                "flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+                "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
+                "dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100"
+              ),
+              children: [
+                icon && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
+                /* @__PURE__ */ jsx("span", { children: label }),
+                /* @__PURE__ */ jsx(ChevronDown, { className: "h-3.5 w-3.5 opacity-60" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: cn(
+                "invisible absolute left-0 top-full z-50 min-w-[180px] pt-1 opacity-0 transition-all",
+                "group-hover:visible group-hover:opacity-100"
+              ),
+              children: /* @__PURE__ */ jsx("div", { className: "rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900", children })
+            }
+          )
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxs("div", { "data-react-fancy-menu-submenu": "", className, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        onClick: () => setOpen((v) => !v),
+        className: cn(
+          "flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors",
+          "text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900",
+          "dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100"
+        ),
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: "flex h-5 w-5 shrink-0 items-center justify-center", children: icon }),
+          /* @__PURE__ */ jsx("span", { className: "flex-1 text-left", children: label }),
+          /* @__PURE__ */ jsx(
+            ChevronDown,
+            {
+              className: cn(
+                "h-3.5 w-3.5 opacity-60 transition-transform duration-200",
+                open && "rotate-180"
+              )
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn(
+          "grid transition-[grid-template-rows] duration-200",
+          open ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        ),
+        children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: "ml-4 border-l border-zinc-200 pl-2 pt-1 dark:border-zinc-700", children }) })
+      }
+    )
+  ] });
+}
+MenuSubmenu.displayName = "MenuSubmenu";
+function MenuGroup({ children, label, className }) {
+  return /* @__PURE__ */ jsxs("div", { "data-react-fancy-menu-group": "", className: cn("py-1", className), children: [
+    label && /* @__PURE__ */ jsx("p", { className: "mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500", children: label }),
+    children
+  ] });
+}
+MenuGroup.displayName = "MenuGroup";
+function MenuRoot({ children, orientation = "vertical", className }) {
+  const isVertical = orientation === "vertical";
+  return /* @__PURE__ */ jsx(MenuContext.Provider, { value: { orientation }, children: /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "data-react-fancy-menu": "",
+      "data-orientation": orientation,
+      className: cn(
+        "flex gap-0.5",
+        isVertical ? "flex-col" : "flex-row items-center",
+        className
+      ),
+      children
+    }
+  ) });
+}
+var Menu = Object.assign(MenuRoot, {
+  Item: MenuItem,
+  Submenu: MenuSubmenu,
+  Group: MenuGroup
+});
+
+export { Menu, useMenu };
+//# sourceMappingURL=chunk-IGYIMS6J.js.map
+//# sourceMappingURL=chunk-IGYIMS6J.js.map

package/dist/chunk-IGYIMS6J.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Menu/Menu.context.ts","../src/components/Menu/MenuItem.tsx","../src/components/Menu/MenuSubmenu.tsx","../src/components/Menu/MenuGroup.tsx","../src/components/Menu/Menu.tsx"],"names":["jsxs","jsx"],"mappings":"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","file":"chunk-IGYIMS6J.js","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { MenuContextValue } from \"./Menu.types\";\n\nexport const MenuContext = createContext<MenuContextValue | null>(null);\n\nexport function useMenu(): MenuContextValue {\n  const ctx = useContext(MenuContext);\n  if (!ctx) {\n    throw new Error(\"useMenu must be used within a <Menu> component\");\n  }\n  return ctx;\n}\n","import type { ElementType } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMenu } from \"./Menu.context\";\nimport type { MenuItemProps } from \"./Menu.types\";\n\nexport function MenuItem({\n  children,\n  href,\n  as: As,\n  icon,\n  active = false,\n  disabled = false,\n  badge,\n  onClick,\n  className,\n  ...rest\n}: MenuItemProps) {\n  const { orientation } = useMenu();\n  const isVertical = orientation === \"vertical\";\n\n  // See NavigableProps: link mode engages on `href` OR `as`, and `onClick`\n  // survives into it rather than being dropped.\n  const isLink = Boolean(href || As);\n  const Tag = isLink ? ((As ?? \"a\") as ElementType) : \"button\";\n  const tagProps = isLink\n    ? { ...(href ? { href } : {}), onClick }\n    : { type: \"button\" as const, onClick };\n\n  return (\n    <Tag\n      {...tagProps}\n      {...rest}\n      data-react-fancy-menu-item=\"\"\n      data-active={active || undefined}\n      aria-current={active ? \"page\" : undefined}\n      aria-disabled={disabled || undefined}\n      className={cn(\n        \"flex items-center gap-2 rounded-md text-sm font-medium transition-colors\",\n        \"outline-none focus-visible:ring-2 focus-visible:ring-blue-500\",\n        isVertical ? \"w-full px-3 py-2\" : \"px-3 py-2\",\n        active\n          ? \"bg-zinc-100 text-zinc-900 dark:bg-zinc-800 dark:text-zinc-100\"\n          : \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900 dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n        disabled && \"pointer-events-none opacity-50\",\n        className,\n      )}\n    >\n      {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n      <span className=\"flex-1 truncate text-left\">{children}</span>\n      {badge && <span className=\"shrink-0\">{badge}</span>}\n    </Tag>\n  );\n}\n\nMenuItem.displayName = \"MenuItem\";\n","import { useState } from \"react\";\nimport { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useMenu } from \"./Menu.context\";\nimport type { MenuSubmenuProps } from \"./Menu.types\";\n\nexport function MenuSubmenu({\n  children,\n  label,\n  icon,\n  defaultOpen = false,\n  className,\n}: MenuSubmenuProps) {\n  const [open, setOpen] = useState(defaultOpen);\n  const { orientation } = useMenu();\n  const isVertical = orientation === \"vertical\";\n\n  if (!isVertical) {\n    // Horizontal submenus use a hover-based dropdown\n    return (\n      <div\n        data-react-fancy-menu-submenu=\"\"\n        className={cn(\"group relative\", className)}\n      >\n        <button\n          type=\"button\"\n          className={cn(\n            \"flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n            \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n            \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n          )}\n        >\n          {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n          <span>{label}</span>\n          <ChevronDown className=\"h-3.5 w-3.5 opacity-60\" />\n        </button>\n        <div\n          className={cn(\n            \"invisible absolute left-0 top-full z-50 min-w-[180px] pt-1 opacity-0 transition-all\",\n            \"group-hover:visible group-hover:opacity-100\",\n          )}\n        >\n          <div className=\"rounded-lg border border-zinc-200 bg-white py-1 shadow-lg dark:border-zinc-700 dark:bg-zinc-900\">\n            {children}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  // Vertical submenus use accordion-style expand/collapse\n  return (\n    <div data-react-fancy-menu-submenu=\"\" className={className}>\n      <button\n        type=\"button\"\n        onClick={() => setOpen((v) => !v)}\n        className={cn(\n          \"flex w-full items-center gap-2 rounded-md px-3 py-2 text-sm font-medium transition-colors\",\n          \"text-zinc-600 hover:bg-zinc-50 hover:text-zinc-900\",\n          \"dark:text-zinc-400 dark:hover:bg-zinc-800/50 dark:hover:text-zinc-100\",\n        )}\n      >\n        {icon && <span className=\"flex h-5 w-5 shrink-0 items-center justify-center\">{icon}</span>}\n        <span className=\"flex-1 text-left\">{label}</span>\n        <ChevronDown\n          className={cn(\n            \"h-3.5 w-3.5 opacity-60 transition-transform duration-200\",\n            open && \"rotate-180\",\n          )}\n        />\n      </button>\n      <div\n        className={cn(\n          \"grid transition-[grid-template-rows] duration-200\",\n          open ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n        )}\n      >\n        <div className=\"overflow-hidden\">\n          <div className=\"ml-4 border-l border-zinc-200 pl-2 pt-1 dark:border-zinc-700\">\n            {children}\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n}\n\nMenuSubmenu.displayName = \"MenuSubmenu\";\n","import { cn } from \"../../utils/cn\";\nimport type { MenuGroupProps } from \"./Menu.types\";\n\nexport function MenuGroup({ children, label, className }: MenuGroupProps) {\n  return (\n    <div data-react-fancy-menu-group=\"\" className={cn(\"py-1\", className)}>\n      {label && (\n        <p className=\"mb-1 px-3 text-xs font-semibold uppercase tracking-wider text-zinc-400 dark:text-zinc-500\">\n          {label}\n        </p>\n      )}\n      {children}\n    </div>\n  );\n}\n\nMenuGroup.displayName = \"MenuGroup\";\n","import { cn } from \"../../utils/cn\";\nimport { MenuContext } from \"./Menu.context\";\nimport { MenuItem } from \"./MenuItem\";\nimport { MenuSubmenu } from \"./MenuSubmenu\";\nimport { MenuGroup } from \"./MenuGroup\";\nimport type { MenuProps } from \"./Menu.types\";\n\nfunction MenuRoot({ children, orientation = \"vertical\", className }: MenuProps) {\n  const isVertical = orientation === \"vertical\";\n\n  return (\n    <MenuContext.Provider value={{ orientation }}>\n      <nav\n        data-react-fancy-menu=\"\"\n        data-orientation={orientation}\n        className={cn(\n          \"flex gap-0.5\",\n          isVertical ? \"flex-col\" : \"flex-row items-center\",\n          className,\n        )}\n      >\n        {children}\n      </nav>\n    </MenuContext.Provider>\n  );\n}\n\nexport const Menu = Object.assign(MenuRoot, {\n  Item: MenuItem,\n  Submenu: MenuSubmenu,\n  Group: MenuGroup,\n});\n"]}

package/dist/chunk-IJ4I55QQ.cjs

@@ -0,0 +1,38 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var Eyebrow = react.forwardRef(
+  ({ num, label, aside, rule = false, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-eyebrow": "",
+        className: chunk3Z6ALUWP_cjs.cn(
+          "flex items-baseline gap-3 font-mono text-[11.5px] uppercase tracking-wider text-zinc-500 dark:text-zinc-400",
+          rule && "border-b border-zinc-200 pb-2 dark:border-zinc-800",
+          className
+        ),
+        ...props,
+        children: [
+          children ?? /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+            num != null && /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+              /* @__PURE__ */ jsxRuntime.jsx("b", { className: "font-medium text-zinc-900 dark:text-zinc-100", children: num }),
+              label != null && " \u2014 "
+            ] }),
+            label
+          ] }),
+          aside != null && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "ml-auto", children: aside })
+        ]
+      }
+    );
+  }
+);
+Eyebrow.displayName = "Eyebrow";
+
+exports.Eyebrow = Eyebrow;
+//# sourceMappingURL=chunk-IJ4I55QQ.cjs.map
+//# sourceMappingURL=chunk-IJ4I55QQ.cjs.map

package/dist/chunk-IJ4I55QQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Eyebrow/Eyebrow.tsx"],"names":["forwardRef","jsxs","cn","Fragment","jsx"],"mappings":";;;;;;AAkBO,IAAM,OAAA,GAAUA,gBAAA;AAAA,EACrB,CAAC,EAAE,GAAA,EAAK,KAAA,EAAO,KAAA,EAAO,IAAA,GAAO,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AAC3E,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,0BAAA,EAAyB,EAAA;AAAA,QACzB,SAAA,EAAWC,oBAAA;AAAA,UACT,6GAAA;AAAA,UACA,IAAA,IAAQ,oDAAA;AAAA,UACR;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH,QAAA,EAAA;AAAA,UAAA,QAAA,oCACE,MAAA,EAAA,EACE,QAAA,EAAA;AAAA,YAAA,GAAA,IAAO,wBACND,eAAA,CAAAE,mBAAA,EAAA,EACE,QAAA,EAAA;AAAA,8BAAAC,cAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8CAAA,EAAgD,QAAA,EAAA,GAAA,EAAI,CAAA;AAAA,cAChE,SAAS,IAAA,IAAQ;AAAA,aAAA,EACpB,CAAA;AAAA,YAED;AAAA,WAAA,EACH,CAAA;AAAA,UAKD,SAAS,IAAA,oBAAQA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,WAAW,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,KACrD;AAAA,EAEJ;AACF;AAEA,OAAA,CAAQ,WAAA,GAAc,SAAA","file":"chunk-IJ4I55QQ.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { EyebrowProps } from \"./Eyebrow.types\";\n\n/**\n * The mono running head that opens a section — `01 — SELECTED WORK`, optionally\n * over a hairline rule, with a second item pushed to the far end.\n *\n * Thirty-six surfaces in the Inspiration Gallery carry some version of this. It\n * is a small component for a reason: what they share is the STRUCTURE (a\n * numbered marker, a label, an optional trailing aside, an optional rule) while\n * every one of them restyles the type. So this owns the arrangement and the\n * uppercase mono default, and gets out of the way of `className`.\n *\n * `num` is emphasised rather than styled a fixed colour, because in half the\n * designs it is the only part of the line that is not muted — and expressing\n * that with a `<b>` keeps it meaningful when the styling is replaced wholesale.\n */\nexport const Eyebrow = forwardRef<HTMLDivElement, EyebrowProps>(\n  ({ num, label, aside, rule = false, className, children, ...props }, ref) => {\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-eyebrow=\"\"\n        className={cn(\n          \"flex items-baseline gap-3 font-mono text-[11.5px] uppercase tracking-wider text-zinc-500 dark:text-zinc-400\",\n          rule && \"border-b border-zinc-200 pb-2 dark:border-zinc-800\",\n          className,\n        )}\n        {...props}\n      >\n        {children ?? (\n          <span>\n            {num != null && (\n              <>\n                <b className=\"font-medium text-zinc-900 dark:text-zinc-100\">{num}</b>\n                {label != null && \" — \"}\n              </>\n            )}\n            {label}\n          </span>\n        )}\n\n        {/* `ml-auto` rather than `justify-between`, so a single-item eyebrow\n            still sits flush left instead of being centred by the gap. */}\n        {aside != null && <span className=\"ml-auto\">{aside}</span>}\n      </div>\n    );\n  },\n);\n\nEyebrow.displayName = \"Eyebrow\";\n"]}

package/dist/chunk-IXHZVFHX.cjs

@@ -0,0 +1,44 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var PullQuote = react.forwardRef(
+  ({ attribution, source, citeUrl, rule = false, className, children, ...props }, ref) => {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "blockquote",
+      {
+        ref,
+        cite: citeUrl,
+        "data-react-fancy-pull-quote": "",
+        className: chunk3Z6ALUWP_cjs.cn(
+          "m-0 text-2xl font-medium leading-snug tracking-tight text-zinc-900 dark:text-zinc-100",
+          rule && "border-y border-zinc-200 py-6 dark:border-zinc-800",
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx("p", { "data-react-fancy-pull-quote-text": "", className: "m-0", children }),
+          (attribution != null || source != null) && /* @__PURE__ */ jsxRuntime.jsxs(
+            "footer",
+            {
+              "data-react-fancy-pull-quote-attribution": "",
+              className: "mt-3 text-sm font-normal tracking-normal text-zinc-500 dark:text-zinc-400",
+              children: [
+                attribution != null && /* @__PURE__ */ jsxRuntime.jsx("cite", { className: "not-italic", children: attribution }),
+                attribution != null && source != null && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": true, children: " \xB7 " }),
+                source
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+PullQuote.displayName = "PullQuote";
+
+exports.PullQuote = PullQuote;
+//# sourceMappingURL=chunk-IXHZVFHX.cjs.map
+//# sourceMappingURL=chunk-IXHZVFHX.cjs.map

package/dist/chunk-IXHZVFHX.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/PullQuote/PullQuote.tsx"],"names":["forwardRef","jsxs","cn","jsx"],"mappings":";;;;;;AAmBO,IAAM,SAAA,GAAYA,gBAAA;AAAA,EACvB,CAAC,EAAE,WAAA,EAAa,MAAA,EAAQ,OAAA,EAAS,IAAA,GAAO,KAAA,EAAO,SAAA,EAAW,QAAA,EAAU,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACtF,IAAA,uBACEC,eAAA;AAAA,MAAC,YAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAM,OAAA;AAAA,QACN,6BAAA,EAA4B,EAAA;AAAA,QAC5B,SAAA,EAAWC,oBAAA;AAAA,UACT,uFAAA;AAAA,UACA,IAAA,IAAQ,oDAAA;AAAA,UACR;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEJ,QAAA,EAAA;AAAA,0BAAAC,cAAA,CAAC,GAAA,EAAA,EAAE,kCAAA,EAAiC,EAAA,EAAG,SAAA,EAAU,OAC9C,QAAA,EACH,CAAA;AAAA,UAAA,CAEE,WAAA,IAAe,IAAA,IAAQ,MAAA,IAAU,IAAA,qBACjCF,eAAA;AAAA,YAAC,QAAA;AAAA,YAAA;AAAA,cACC,yCAAA,EAAwC,EAAA;AAAA,cACxC,SAAA,EAAU,2EAAA;AAAA,cAET,QAAA,EAAA;AAAA,gBAAA,WAAA,IAAe,IAAA,oBAAQE,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,cAAc,QAAA,EAAA,WAAA,EAAY,CAAA;AAAA,gBACjE,WAAA,IAAe,QAAQ,MAAA,IAAU,IAAA,mCAAS,MAAA,EAAA,EAAK,aAAA,EAAW,MAAC,QAAA,EAAA,QAAA,EAAG,CAAA;AAAA,gBAC9D;AAAA;AAAA;AAAA;AACH;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,SAAA,CAAU,WAAA,GAAc,WAAA","file":"chunk-IXHZVFHX.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { PullQuoteProps } from \"./PullQuote.types\";\n\n/**\n * A pull quote — the oversized line lifted out of body copy, with optional\n * attribution and a rule-bracketed treatment.\n *\n * Twelve gallery styles build one. The reason this is a component rather than a\n * class is the same reason `<Kbd>` renders a real `<kbd>`: of the eight quote\n * elements in those styles, **one** was a `<blockquote>` — five were `<p>` and\n * two were `<div>` — and **none** used `<cite>` for the attribution. They all\n * look right and none of them says what it is.\n *\n * `citeUrl` maps to `<blockquote cite>`, which is the attribute's actual job\n * (the source URL) and is routinely confused with the visible `<cite>` element\n * (the work's title). Keeping them as separate props stops the two collapsing\n * into one another.\n */\nexport const PullQuote = forwardRef<HTMLQuoteElement, PullQuoteProps>(\n  ({ attribution, source, citeUrl, rule = false, className, children, ...props }, ref) => {\n    return (\n      <blockquote\n        ref={ref}\n        cite={citeUrl}\n        data-react-fancy-pull-quote=\"\"\n        className={cn(\n          \"m-0 text-2xl font-medium leading-snug tracking-tight text-zinc-900 dark:text-zinc-100\",\n          rule && \"border-y border-zinc-200 py-6 dark:border-zinc-800\",\n          className,\n        )}\n        {...props}\n      >\n        <p data-react-fancy-pull-quote-text=\"\" className=\"m-0\">\n          {children}\n        </p>\n\n        {(attribution != null || source != null) && (\n          <footer\n            data-react-fancy-pull-quote-attribution=\"\"\n            className=\"mt-3 text-sm font-normal tracking-normal text-zinc-500 dark:text-zinc-400\"\n          >\n            {attribution != null && <cite className=\"not-italic\">{attribution}</cite>}\n            {attribution != null && source != null && <span aria-hidden> · </span>}\n            {source}\n          </footer>\n        )}\n      </blockquote>\n    );\n  },\n);\n\nPullQuote.displayName = \"PullQuote\";\n"]}

package/dist/chunk-J2DI6RMR.cjs

@@ -0,0 +1,115 @@
+'use strict';
+
+var react = require('react');
+
+// src/hooks/use-floating-position.ts
+function getPosition(anchor, floating, placement, offset) {
+  let x = 0;
+  let y = 0;
+  const base = placement.split("-")[0];
+  const align = placement.split("-")[1];
+  switch (base) {
+    case "top":
+      x = anchor.left + anchor.width / 2 - floating.width / 2;
+      y = anchor.top - floating.height - offset;
+      break;
+    case "bottom":
+      x = anchor.left + anchor.width / 2 - floating.width / 2;
+      y = anchor.bottom + offset;
+      break;
+    case "left":
+      x = anchor.left - floating.width - offset;
+      y = anchor.top + anchor.height / 2 - floating.height / 2;
+      break;
+    case "right":
+      x = anchor.right + offset;
+      y = anchor.top + anchor.height / 2 - floating.height / 2;
+      break;
+  }
+  if (base === "top" || base === "bottom") {
+    if (align === "start") x = anchor.left;
+    else if (align === "end") x = anchor.right - floating.width;
+  }
+  if (base === "left" || base === "right") {
+    if (align === "start") y = anchor.top;
+    else if (align === "end") y = anchor.bottom - floating.height;
+  }
+  let finalPlacement = placement;
+  const vw = window.innerWidth;
+  const vh = window.innerHeight;
+  if (base === "bottom" && y + floating.height > vh) {
+    y = anchor.top - floating.height - offset;
+    finalPlacement = placement.replace("bottom", "top");
+  } else if (base === "top" && y < 0) {
+    y = anchor.bottom + offset;
+    finalPlacement = placement.replace("top", "bottom");
+  }
+  x = Math.max(4, Math.min(x, vw - floating.width - 4));
+  y = Math.max(4, Math.min(y, vh - floating.height - 4));
+  return { x, y, placement: finalPlacement };
+}
+function useFloatingPosition(anchorRef, floatingRef, options = {}) {
+  const { placement = "bottom", offset = 8, enabled = true } = options;
+  const [position, setPosition] = react.useState({
+    x: -9999,
+    y: -9999,
+    placement
+  });
+  const update = react.useCallback(() => {
+    const anchor = anchorRef.current;
+    const floating = floatingRef.current;
+    if (!anchor || !floating) return;
+    const anchorRect = anchor.getBoundingClientRect();
+    const floatingRect = floating.getBoundingClientRect();
+    const next = getPosition(anchorRect, floatingRect, placement, offset);
+    setPosition(
+      (prev) => prev.x === next.x && prev.y === next.y && prev.placement === next.placement ? prev : next
+    );
+  }, [anchorRef, floatingRef, placement, offset]);
+  react.useEffect(() => {
+    if (enabled) update();
+  });
+  react.useEffect(() => {
+    if (!enabled) return;
+    let raf = 0;
+    let ro = null;
+    const tick = () => {
+      const el = floatingRef.current;
+      if (el) {
+        update();
+        if (typeof ResizeObserver !== "undefined") {
+          ro = new ResizeObserver(() => update());
+          ro.observe(el);
+        }
+      } else {
+        raf = requestAnimationFrame(tick);
+      }
+    };
+    raf = requestAnimationFrame(tick);
+    return () => {
+      cancelAnimationFrame(raf);
+      ro?.disconnect();
+    };
+  }, [enabled, update, floatingRef]);
+  react.useEffect(() => {
+    if (!enabled) {
+      setPosition(
+        (prev) => prev.x === -9999 ? prev : { x: -9999, y: -9999, placement }
+      );
+    }
+  }, [enabled, placement]);
+  react.useEffect(() => {
+    if (!enabled) return;
+    window.addEventListener("scroll", update, true);
+    window.addEventListener("resize", update);
+    return () => {
+      window.removeEventListener("scroll", update, true);
+      window.removeEventListener("resize", update);
+    };
+  }, [update, enabled]);
+  return position;
+}
+
+exports.useFloatingPosition = useFloatingPosition;
+//# sourceMappingURL=chunk-J2DI6RMR.cjs.map
+//# sourceMappingURL=chunk-J2DI6RMR.cjs.map

package/dist/chunk-J2DI6RMR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-floating-position.ts"],"names":["useState","useCallback","useEffect"],"mappings":"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","file":"chunk-J2DI6RMR.cjs","sourcesContent":["import { useCallback, useEffect, useState, type RefObject } from \"react\";\nimport type { Placement } from \"../utils/types\";\n\ninterface FloatingPosition {\n  x: number;\n  y: number;\n  placement: Placement;\n}\n\ninterface UseFloatingPositionOptions {\n  placement?: Placement;\n  offset?: number;\n  enabled?: boolean;\n}\n\nfunction getPosition(\n  anchor: DOMRect,\n  floating: DOMRect,\n  placement: Placement,\n  offset: number,\n): FloatingPosition {\n  let x = 0;\n  let y = 0;\n  const base = placement.split(\"-\")[0] as \"top\" | \"bottom\" | \"left\" | \"right\";\n  const align = placement.split(\"-\")[1] as \"start\" | \"end\" | undefined;\n\n  switch (base) {\n    case \"top\":\n      x = anchor.left + anchor.width / 2 - floating.width / 2;\n      y = anchor.top - floating.height - offset;\n      break;\n    case \"bottom\":\n      x = anchor.left + anchor.width / 2 - floating.width / 2;\n      y = anchor.bottom + offset;\n      break;\n    case \"left\":\n      x = anchor.left - floating.width - offset;\n      y = anchor.top + anchor.height / 2 - floating.height / 2;\n      break;\n    case \"right\":\n      x = anchor.right + offset;\n      y = anchor.top + anchor.height / 2 - floating.height / 2;\n      break;\n  }\n\n  if (base === \"top\" || base === \"bottom\") {\n    if (align === \"start\") x = anchor.left;\n    else if (align === \"end\") x = anchor.right - floating.width;\n  }\n\n  if (base === \"left\" || base === \"right\") {\n    if (align === \"start\") y = anchor.top;\n    else if (align === \"end\") y = anchor.bottom - floating.height;\n  }\n\n  // Viewport clamping\n  let finalPlacement = placement;\n  const vw = window.innerWidth;\n  const vh = window.innerHeight;\n\n  if (base === \"bottom\" && y + floating.height > vh) {\n    y = anchor.top - floating.height - offset;\n    finalPlacement = placement.replace(\"bottom\", \"top\") as Placement;\n  } else if (base === \"top\" && y < 0) {\n    y = anchor.bottom + offset;\n    finalPlacement = placement.replace(\"top\", \"bottom\") as Placement;\n  }\n\n  x = Math.max(4, Math.min(x, vw - floating.width - 4));\n  y = Math.max(4, Math.min(y, vh - floating.height - 4));\n\n  return { x, y, placement: finalPlacement };\n}\n\nexport function useFloatingPosition(\n  anchorRef: RefObject<HTMLElement | null>,\n  floatingRef: RefObject<HTMLElement | null>,\n  options: UseFloatingPositionOptions = {},\n): FloatingPosition {\n  const { placement = \"bottom\", offset = 8, enabled = true } = options;\n  const [position, setPosition] = useState<FloatingPosition>({\n    x: -9999,\n    y: -9999,\n    placement,\n  });\n\n  const update = useCallback(() => {\n    const anchor = anchorRef.current;\n    const floating = floatingRef.current;\n    if (!anchor || !floating) return;\n\n    const anchorRect = anchor.getBoundingClientRect();\n    const floatingRect = floating.getBoundingClientRect();\n    const next = getPosition(anchorRect, floatingRect, placement, offset);\n    // Bail out when nothing changed so this can run after every commit\n    // (below) without causing an infinite render loop.\n    setPosition((prev) =>\n      prev.x === next.x && prev.y === next.y && prev.placement === next.placement\n        ? prev\n        : next,\n    );\n  }, [anchorRef, floatingRef, placement, offset]);\n\n  // Re-measure after every commit while open.\n  //\n  // The floating element mounts a frame or two AFTER `enabled` flips — its\n  // render is gated behind a state flip (e.g. useAnimation's `mounted`), so at\n  // the moment `enabled` turns true the floating ref is still null and a single\n  // measurement no-ops, leaving the popover parked at its off-screen sentinel.\n  //\n  // A passive effect with no deps runs after *every* commit — including the one\n  // that finally mounts the floating element — and, crucially, keeps running in\n  // hidden/background tabs where `requestAnimationFrame` is paused. The bail-out\n  // in `update` makes the steady-state calls free, so this both fixes the\n  // late-mount race and survives tab-visibility throttling.\n  useEffect(() => {\n    if (enabled) update();\n  });\n\n  // …but the per-commit effect ISN'T enough when the floating element mounts\n  // through a <Portal> whose own mount gate (SSR-safe; renders nothing until its\n  // useEffect runs) attaches the node WITHOUT re-rendering this hook's component.\n  // Then no commit happens here, the measurement never runs, and the popover\n  // stays parked at its off-screen sentinel until an unrelated scroll/resize\n  // fires `update()` — the \"menu only appears after I scroll\" bug. Poll with rAF\n  // until the node is actually in the DOM, measure it, then keep it observed for\n  // size changes (async content / lazily-loaded icons).\n  useEffect(() => {\n    if (!enabled) return;\n    let raf = 0;\n    let ro: ResizeObserver | null = null;\n    const tick = () => {\n      const el = floatingRef.current;\n      if (el) {\n        update();\n        if (typeof ResizeObserver !== \"undefined\") {\n          ro = new ResizeObserver(() => update());\n          ro.observe(el);\n        }\n      } else {\n        raf = requestAnimationFrame(tick);\n      }\n    };\n    raf = requestAnimationFrame(tick);\n    return () => {\n      cancelAnimationFrame(raf);\n      ro?.disconnect();\n    };\n  }, [enabled, update, floatingRef]);\n\n  // Park off-screen when closed so the next open re-measures from scratch.\n  useEffect(() => {\n    if (!enabled) {\n      setPosition((prev) =>\n        prev.x === -9999 ? prev : { x: -9999, y: -9999, placement },\n      );\n    }\n  }, [enabled, placement]);\n\n  // Reposition on scroll/resize while open.\n  useEffect(() => {\n    if (!enabled) return;\n\n    window.addEventListener(\"scroll\", update, true);\n    window.addEventListener(\"resize\", update);\n\n    return () => {\n      window.removeEventListener(\"scroll\", update, true);\n      window.removeEventListener(\"resize\", update);\n    };\n  }, [update, enabled]);\n\n  return position;\n}\n"]}