@refraction-ui/react 0.23.1 → 0.23.3

package/dist/index.cjs

@@ -872,8 +872,6 @@ var Keys = {
   ArrowDown: "ArrowDown",
   ArrowLeft: "ArrowLeft",
   ArrowRight: "ArrowRight",
-  Home: "Home",
-  End: "End",
   Backspace: "Backspace"};
 function createKeyboardHandler(handlers) {
   return (event) => {
@@ -10714,14 +10712,14 @@ function createCookieConsent(config3 = {}) {
   const categories = config3.categories ?? DEFAULT_CATEGORIES;
   const storage = config3.storage;
   const key = config3.storageKey ?? DEFAULT_KEY;
-  const version = config3.version;
+  const version2 = config3.version;
   let preferences = baseline(categories);
   let consented = false;
   const raw = storage?.get(key) ?? null;
   if (raw) {
     try {
       const parsed = JSON.parse(raw);
-      if ((parsed.version ?? void 0) === version) {
+      if ((parsed.version ?? void 0) === version2) {
         preferences = { ...baseline(categories), ...parsed.preferences };
         for (const c of categories) if (c.required) preferences[c.id] = true;
         consented = true;
@@ -10740,7 +10738,7 @@ function createCookieConsent(config3 = {}) {
     for (const l2 of listeners) l2();
   }
   function persist() {
-    storage?.set(key, JSON.stringify({ version, preferences }));
+    storage?.set(key, JSON.stringify({ version: version2, preferences }));
     config3.onChange?.({ ...preferences });
   }
   function save(next) {
@@ -11514,11 +11512,10 @@ function Dialog({
     },
     [isControlled, onOpenChange]
   );
-  const apiRef = React52__namespace.useRef(null);
-  if (apiRef.current === null) {
-    apiRef.current = createDialog({ open, modal });
-  }
-  const api = apiRef.current;
+  const id = React52__namespace.useId();
+  const contentId = `rfr-dialog-content-${id}`;
+  const titleId = `rfr-dialog-title-${id}`;
+  const descriptionId = `rfr-dialog-desc-${id}`;
   const [hasTitle, setHasTitle] = React52__namespace.useState(false);
   const [hasDescription, setHasDescription] = React52__namespace.useState(false);
   const ctx = React52__namespace.useMemo(
@@ -11526,38 +11523,66 @@ function Dialog({
       open,
       onOpenChange: handleOpenChange,
       modal,
-      contentId: api.ids.content,
-      titleId: api.ids.title,
-      descriptionId: api.ids.description,
+      contentId,
+      titleId,
+      descriptionId,
       hasTitle,
       hasDescription,
       setHasTitle,
       setHasDescription
     }),
-    [open, handleOpenChange, modal, api.ids.content, api.ids.title, api.ids.description, hasTitle, hasDescription]
+    [open, handleOpenChange, modal, contentId, titleId, descriptionId, hasTitle, hasDescription]
   );
   return React52__namespace.createElement(DialogContext.Provider, { value: ctx }, children);
 }
 var DialogTrigger = React52__namespace.forwardRef(
-  function DialogTrigger2({ onClick, children, ...props }, ref) {
+  function DialogTrigger2({ asChild = false, onClick, children, ...props }, ref) {
     const { open, onOpenChange, contentId } = useDialogContext();
-    const handleClick = (e) => {
-      onOpenChange(!open);
-      onClick?.(e);
+    const handleClick = (event) => {
+      onClick?.(event);
+      if (!event.defaultPrevented) onOpenChange(!open);
     };
-    return React52__namespace.createElement(
-      "button",
-      {
-        ref,
-        type: "button",
-        "aria-expanded": open,
-        "aria-controls": contentId,
-        "aria-haspopup": "dialog",
-        onClick: handleClick,
-        ...props
-      },
-      children
-    );
+    const triggerProps = {
+      type: "button",
+      "aria-expanded": open,
+      "aria-controls": contentId,
+      "aria-haspopup": "dialog",
+      ...props,
+      onClick: handleClick
+    };
+    if (asChild) {
+      if (!React52__namespace.isValidElement(children)) {
+        devWarn("dialog-trigger-asChild-child", "DialogTrigger: `asChild` expects a single React element child; rendering nothing.");
+        return null;
+      }
+      const child = children;
+      const childRef = React52__namespace.version.startsWith("18.") ? child.ref : child.props.ref;
+      return React52__namespace.cloneElement(child, {
+        ...triggerProps,
+        className: cn(props.className, child.props.className),
+        onClick: (event) => {
+          child.props.onClick?.(event);
+          if (!event.defaultPrevented) handleClick(event);
+        },
+        ref: (node) => {
+          const outerCleanup = typeof ref === "function" ? ref(node) : void 0;
+          if (ref && typeof ref !== "function") ref.current = node;
+          const childCleanup = typeof childRef === "function" ? childRef(node) : void 0;
+          if (childRef && typeof childRef !== "function") childRef.current = node;
+          if (typeof outerCleanup === "function" || typeof childCleanup === "function") {
+            return () => {
+              if (typeof outerCleanup === "function") outerCleanup();
+              else if (typeof ref === "function") ref(null);
+              else if (ref) ref.current = null;
+              if (typeof childCleanup === "function") childCleanup();
+              else if (typeof childRef === "function") childRef(null);
+              else if (childRef) childRef.current = null;
+            };
+          }
+        }
+      });
+    }
+    return React52__namespace.createElement("button", { ref, ...triggerProps }, children);
   }
 );
 var DialogOverlay = React52__namespace.forwardRef(
@@ -11590,10 +11615,6 @@ function containsElement(node, type) {
 var DialogContent = React52__namespace.forwardRef(
   function DialogContent2({ className, children, onKeyDown, ...props }, ref) {
     const { open, onOpenChange, modal, contentId, titleId, descriptionId, hasTitle, hasDescription } = useDialogContext();
-    React52__namespace.useMemo(
-      () => createDialog({ open, modal }),
-      [open, modal]
-    );
     const handleKeyDown = (e) => {
       const handler = createKeyboardHandler({
         Escape: (ev) => {
@@ -11699,88 +11720,6 @@ var DialogClose = React52__namespace.forwardRef(
 );
 
 // ../dropdown-menu/dist/index.js
-function createDropdownMenu(props = {}) {
-  const { open: controlledOpen, defaultOpen = false, onOpenChange } = props;
-  const machine = createMachine({
-    initial: controlledOpen ?? defaultOpen ? "open" : "closed",
-    states: {
-      closed: { on: { OPEN: "open" } },
-      open: { on: { CLOSE: "closed" } }
-    }
-  });
-  const contentId = generateId("rfr-dropdown-menu");
-  function isOpen() {
-    if (controlledOpen !== void 0) return controlledOpen;
-    return machine.matches("open");
-  }
-  function openMenu() {
-    machine.send("OPEN");
-    onOpenChange?.(true);
-  }
-  function closeMenu() {
-    machine.send("CLOSE");
-    onOpenChange?.(false);
-  }
-  function toggleMenu() {
-    if (isOpen()) {
-      closeMenu();
-    } else {
-      openMenu();
-    }
-  }
-  function getItemProps(item) {
-    return {
-      role: "menuitem",
-      tabIndex: item.disabled ? -1 : 0,
-      "data-disabled": item.disabled ? "" : void 0,
-      "aria-disabled": item.disabled || void 0
-    };
-  }
-  const keyboardHandlers = {
-    [Keys.Escape]: (e) => {
-      e.preventDefault();
-      closeMenu();
-    },
-    [Keys.ArrowDown]: (e) => {
-      e.preventDefault();
-    },
-    [Keys.ArrowUp]: (e) => {
-      e.preventDefault();
-    },
-    [Keys.Enter]: (e) => {
-      e.preventDefault();
-    },
-    [Keys.Home]: (e) => {
-      e.preventDefault();
-    },
-    [Keys.End]: (e) => {
-      e.preventDefault();
-    }
-  };
-  const triggerProps = {
-    "aria-expanded": isOpen(),
-    "aria-controls": contentId,
-    "aria-haspopup": "menu"
-  };
-  const contentProps = {
-    role: "menu",
-    id: contentId,
-    "data-state": isOpen() ? "open" : "closed"
-  };
-  return {
-    state: { open: isOpen() },
-    triggerProps,
-    contentProps,
-    getItemProps,
-    open: openMenu,
-    close: closeMenu,
-    toggle: toggleMenu,
-    keyboardHandlers,
-    ids: {
-      content: contentId
-    }
-  };
-}
 var menuContentVariants = cva({
   base: "z-50 rounded-md border bg-popover shadow-md"
 });
@@ -11819,20 +11758,16 @@ function DropdownMenu({
     },
     [isControlled, onOpenChange]
   );
-  const apiRef = React52__namespace.useRef(null);
-  if (apiRef.current === null) {
-    apiRef.current = createDropdownMenu({ open });
-  }
-  const api = apiRef.current;
+  const contentId = `rfr-dropdown-menu-${React52__namespace.useId()}`;
   const triggerRef = React52__namespace.useRef(null);
   const ctx = React52__namespace.useMemo(
     () => ({
       open,
       onOpenChange: handleOpenChange,
-      contentId: api.ids.content,
+      contentId,
       triggerRef
     }),
-    [open, handleOpenChange, api.ids.content]
+    [open, handleOpenChange, contentId]
   );
   return React52__namespace.createElement(DropdownMenuContext.Provider, { value: ctx }, children);
 }
@@ -14643,92 +14578,6 @@ var SkeletonText = React52__namespace.forwardRef(
 );
 
 // ../tabs/dist/index.js
-function createTabs(props = {}) {
-  const {
-    value: controlledValue,
-    defaultValue = "",
-    onValueChange,
-    orientation = "horizontal"
-  } = props;
-  let uncontrolledValue = controlledValue ?? defaultValue;
-  const idPrefix = generateId("rfr-tabs");
-  function getActiveValue() {
-    if (controlledValue !== void 0) return controlledValue;
-    return uncontrolledValue;
-  }
-  function select(value) {
-    uncontrolledValue = value;
-    onValueChange?.(value);
-  }
-  function getTabId(value) {
-    return `${idPrefix}-tab-${value}`;
-  }
-  function getPanelId(value) {
-    return `${idPrefix}-panel-${value}`;
-  }
-  function getTabProps(value) {
-    const isSelected = getActiveValue() === value;
-    return {
-      role: "tab",
-      "aria-selected": isSelected,
-      "aria-controls": getPanelId(value),
-      tabIndex: isSelected ? 0 : -1,
-      id: getTabId(value),
-      "data-state": isSelected ? "active" : "inactive"
-    };
-  }
-  function getPanelProps(value) {
-    const isSelected = getActiveValue() === value;
-    return {
-      role: "tabpanel",
-      "aria-labelledby": getTabId(value),
-      id: getPanelId(value),
-      hidden: !isSelected || void 0,
-      tabIndex: 0,
-      "data-state": isSelected ? "active" : "inactive"
-    };
-  }
-  const listProps = {
-    role: "tablist",
-    "aria-orientation": orientation
-  };
-  const keyboardHandlers = orientation === "horizontal" ? {
-    [Keys.ArrowLeft]: (e) => {
-      e.preventDefault();
-    },
-    [Keys.ArrowRight]: (e) => {
-      e.preventDefault();
-    },
-    [Keys.Home]: (e) => {
-      e.preventDefault();
-    },
-    [Keys.End]: (e) => {
-      e.preventDefault();
-    }
-  } : {
-    [Keys.ArrowUp]: (e) => {
-      e.preventDefault();
-    },
-    [Keys.ArrowDown]: (e) => {
-      e.preventDefault();
-    },
-    [Keys.Home]: (e) => {
-      e.preventDefault();
-    },
-    [Keys.End]: (e) => {
-      e.preventDefault();
-    }
-  };
-  return {
-    state: { activeValue: getActiveValue() },
-    listProps,
-    getTabProps,
-    getPanelProps,
-    select,
-    keyboardHandlers,
-    idPrefix
-  };
-}
 function getNextTabIndex(current, key, count, orientation = "horizontal") {
   if (count === 0) return null;
   const prev = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
@@ -14780,11 +14629,7 @@ var Tabs = React52__namespace.forwardRef(
       },
       [isControlled, onValueChange]
     );
-    const apiRef = React52__namespace.useRef(null);
-    if (apiRef.current === null) {
-      apiRef.current = createTabs({ value, orientation });
-    }
-    const api = apiRef.current;
+    const idPrefix = `rfr-tabs-${React52__namespace.useId()}`;
     const [panels, setPanels] = React52__namespace.useState(() => /* @__PURE__ */ new Set());
     const registerPanel = React52__namespace.useCallback((panelValue) => {
       setPanels((prev) => prev.has(panelValue) ? prev : new Set(prev).add(panelValue));
@@ -14805,11 +14650,11 @@ var Tabs = React52__namespace.forwardRef(
         value,
         onValueChange: handleValueChange,
         orientation,
-        idPrefix: api.idPrefix,
+        idPrefix,
         panels: allPanels,
         registerPanel
       }),
-      [value, handleValueChange, orientation, api.idPrefix, allPanels, registerPanel]
+      [value, handleValueChange, orientation, idPrefix, allPanels, registerPanel]
     );
     return React52__namespace.createElement(
       "div",
@@ -17170,13 +17015,13 @@ function createVersionSelector(props) {
     id: contentId
   };
   function getOptionProps(value) {
-    const version = versions.find((v2) => v2.value === value);
+    const version2 = versions.find((v2) => v2.value === value);
     const base = {
       role: "option",
       "aria-selected": selectedVersion === value,
       "data-value": value
     };
-    if (version?.isLatest) {
+    if (version2?.isLatest) {
       return { ...base, "data-latest": "true" };
     }
     return base;
@@ -18829,9 +18674,23 @@ var Avatar2 = React52__namespace.forwardRef(
 var AvatarImage = React52__namespace.forwardRef(
   function AvatarImage2({ className, src, alt = "", onLoad, onError, ...props }, ref) {
     const { imageError, setImageLoaded, setImageError } = React52__namespace.useContext(AvatarContext);
+    const imageRef = React52__namespace.useRef(null);
+    const mergedRef = React52__namespace.useCallback((node) => {
+      imageRef.current = node;
+      if (typeof ref === "function") {
+        const cleanup = ref(node);
+        if (typeof cleanup === "function") {
+          return () => {
+            imageRef.current = null;
+            cleanup();
+          };
+        }
+      } else if (ref) ref.current = node;
+    }, [ref]);
     React52__namespace.useEffect(() => {
-      setImageLoaded(false);
-      setImageError(false);
+      const image = imageRef.current;
+      setImageLoaded(!!image?.complete && image.naturalWidth > 0);
+      setImageError(!!image?.complete && image.naturalWidth === 0);
     }, [src, setImageLoaded, setImageError]);
     const handleLoad = (e) => {
       setImageLoaded(true);
@@ -18845,7 +18704,7 @@ var AvatarImage = React52__namespace.forwardRef(
     return /* @__PURE__ */ jsxRuntime.jsx(
       "img",
       {
-        ref,
+        ref: mergedRef,
         className: cn(avatarImageVariants(), className),
         src,
         alt,
@@ -30475,7 +30334,7 @@ function createPageHeader(props = {}) {
   };
 }
 var pageHeaderClass = "flex flex-wrap items-start justify-between gap-4";
-var pageHeaderTextClass = "flex min-w-0 flex-1 flex-col gap-1";
+var pageHeaderTextClass = "flex min-w-0 basis-64 grow flex-col gap-1";
 var pageHeaderKickerClass = "break-words text-[11px] uppercase tracking-wider text-muted-foreground";
 var pageHeaderTitleClass = "break-words text-xl font-semibold text-foreground";
 var pageHeaderDescriptionClass = "max-w-prose text-sm text-muted-foreground";