@refraction-ui/react 0.23.2 → 0.23.3

package/dist/internal/page-header/index.d.ts

@@ -21,8 +21,8 @@ declare function createPageHeader(props?: PageHeaderProps): PageHeaderAPI;
  * on narrow screens. Carries no outer margin — the page layout spaces it.
  */
 declare const pageHeaderClass = "flex flex-wrap items-start justify-between gap-4";
-/** Text cluster (kicker, title, description). */
-declare const pageHeaderTextClass = "flex min-w-0 flex-1 flex-col gap-1";
+/** Give text a preferred width so actions wrap before squeezing the heading. */
+declare const pageHeaderTextClass = "flex min-w-0 basis-64 grow flex-col gap-1";
 /** Small uppercase eyebrow above the title. */
 declare const pageHeaderKickerClass = "break-words text-[11px] uppercase tracking-wider text-muted-foreground";
 /** Title — app-sized, not a marketing display size. */

package/dist/react-avatar.js

@@ -117,9 +117,23 @@ var Avatar = React.forwardRef(
 var AvatarImage = React.forwardRef(
   function AvatarImage2({ className, src, alt = "", onLoad, onError, ...props }, ref) {
     const { imageError, setImageLoaded, setImageError } = React.useContext(AvatarContext);
+    const imageRef = React.useRef(null);
+    const mergedRef = React.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]);
     React.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);
@@ -133,7 +147,7 @@ var AvatarImage = React.forwardRef(
     return /* @__PURE__ */ jsx(
       "img",
       {
-        ref,
+        ref: mergedRef,
         className: cn(avatarImageVariants(), className),
         src,
         alt,

package/dist/react-avatar.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../avatar/src/avatar.ts", "../../avatar/src/avatar.styles.ts", "../../react-avatar/src/avatar.tsx"],
-  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/** Outline of the avatar. */\nexport type AvatarShape = 'circle' | 'square'\n\nexport type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'\n\nexport interface AvatarProps {\n  src?: string\n  alt?: string\n  fallback?: string\n  size?: AvatarSize\n}\n\nexport interface AvatarAPI {\n  /** ARIA attributes to spread on the root element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n  /** Image ARIA props */\n  imageProps: {\n    alt: string\n    role: string\n  }\n  /** Fallback text (initials) */\n  fallbackText: string\n  /** Current state */\n  state: {\n    size: AvatarSize\n    hasSrc: boolean\n  }\n}\n\n/**\n * Extract initials from a name or fallback string.\n * Takes first letter of first two words, uppercased.\n */\nexport function getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/)\n  if (parts.length === 0 || parts[0] === '') return ''\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n}\n\nexport function createAvatar(props: AvatarProps = {}): AvatarAPI {\n  const { src, alt = '', fallback = '', size = 'md' } = props\n\n  // role=\"img\" makes its children presentational, so it is only applied when\n  // the avatar itself has a name; otherwise the inner <img alt> / fallback\n  // text stays exposed.\n  const ariaProps: Partial<AccessibilityProps> = {}\n  if (alt) {\n    ariaProps.role = 'img'\n    ariaProps['aria-label'] = alt\n  }\n\n  const fallbackText = fallback ? getInitials(fallback) : (alt ? getInitials(alt) : '')\n\n  const dataAttributes: Record<string, string> = {\n    'data-slot': 'avatar',\n  }\n\n  return {\n    ariaProps,\n    dataAttributes,\n    imageProps: {\n      alt,\n      role: 'img',\n    },\n    fallbackText,\n    state: {\n      size,\n      hasSrc: !!src,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const avatarTokens: TokenContract = {\n  name: 'avatar',\n  tokens: {\n    bg: { variable: '--rfr-avatar-bg', fallback: 'hsl(var(--muted))' },\n    fg: { variable: '--rfr-avatar-fg', fallback: 'hsl(var(--muted-foreground))' },\n    border: { variable: '--rfr-avatar-border', fallback: 'hsl(var(--border))' },\n  },\n}\n\nexport const avatarVariants = cva({\n  base: 'relative flex shrink-0 overflow-hidden',\n  variants: {\n    shape: {\n      circle: 'rounded-full',\n      square: 'rounded-md',\n    },\n    size: {\n      xs: 'h-6 w-6',\n      sm: 'h-8 w-8',\n      md: 'h-10 w-10',\n      lg: 'h-12 w-12',\n      xl: 'h-16 w-16',\n    },\n  },\n  defaultVariants: {\n    shape: 'circle',\n    size: 'md',\n  },\n})\n\nexport const avatarImageVariants = cva({\n  base: 'aspect-square h-full w-full object-cover',\n})\n\nexport const avatarFallbackVariants = cva({\n  base: 'flex h-full w-full items-center justify-center rounded-[inherit] bg-muted text-muted-foreground',\n  variants: {\n    size: {\n      xs: 'text-xs',\n      sm: 'text-xs',\n      md: 'text-sm',\n      lg: 'text-base',\n      xl: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createAvatar,\n  avatarVariants,\n  avatarImageVariants,\n  avatarFallbackVariants,\n  type AvatarSize,\n  type AvatarShape,\n} from '@refraction-ui/avatar'\nimport { cn } from '@refraction-ui/shared'\n\n/* ─── Context ──────────────────────────────────────────────────── */\ninterface AvatarContextValue {\n  size: AvatarSize\n  imageLoaded: boolean\n  imageError: boolean\n  setImageLoaded: (loaded: boolean) => void\n  setImageError: (error: boolean) => void\n}\n\nconst AvatarContext = React.createContext<AvatarContextValue>({\n  size: 'md',\n  imageLoaded: false,\n  imageError: false,\n  setImageLoaded: () => {},\n  setImageError: () => {},\n})\n\n/* ─── Avatar (root) ────────────────────────────────────────────── */\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: AvatarSize\n  /** `circle` (default) or `square` (rounded corners) — e.g. for teams and organisations. */\n  shape?: AvatarShape\n}\n\n/**\n * Avatar -- circular image with fallback support.\n * Compound component: use Avatar > AvatarImage + AvatarFallback.\n */\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar({ size = 'md', shape = 'circle', className, children, ...props }, ref) {\n    const [imageLoaded, setImageLoaded] = React.useState(false)\n    const [imageError, setImageError] = React.useState(false)\n\n    const api = createAvatar({ size, alt: props['aria-label'] })\n\n    return (\n      <AvatarContext.Provider value={{ size, imageLoaded, imageError, setImageLoaded, setImageError }}>\n        <span\n          ref={ref}\n          className={cn(avatarVariants({ size, shape }), className)}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          {children}\n        </span>\n      </AvatarContext.Provider>\n    )\n  },\n)\n\n/* ─── AvatarImage ──────────────────────────────────────────────── */\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}\n\nexport const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(\n  function AvatarImage({ className, src, alt = '', onLoad, onError, ...props }, ref) {\n    const { imageError, setImageLoaded, setImageError } = React.useContext(AvatarContext)\n\n    React.useEffect(() => {\n      setImageLoaded(false)\n      setImageError(false)\n    }, [src, setImageLoaded, setImageError])\n\n    const handleLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(true)\n      onLoad?.(e)\n    }\n\n    const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageError(true)\n      onError?.(e)\n    }\n\n    if (imageError) return null\n\n    return (\n      <img\n        ref={ref}\n        className={cn(avatarImageVariants(), className)}\n        src={src}\n        alt={alt}\n        onLoad={handleLoad}\n        onError={handleError}\n        {...props}\n      />\n    )\n  },\n)\n\n/* ─── AvatarFallback ───────────────────────────────────────────── */\nexport interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(\n  function AvatarFallback({ className, children, ...props }, ref) {\n    const { size, imageLoaded, imageError } = React.useContext(AvatarContext)\n\n    if (imageLoaded && !imageError) return null\n\n    return (\n      <span\n        ref={ref}\n        className={cn(avatarFallbackVariants({ size }), className)}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n\n/** Outline of the avatar. */\nexport type AvatarShape = 'circle' | 'square'\n\nexport type AvatarLoadingStatus = 'idle' | 'loading' | 'loaded' | 'error'\n\nexport interface AvatarProps {\n  src?: string\n  alt?: string\n  fallback?: string\n  size?: AvatarSize\n}\n\nexport interface AvatarAPI {\n  /** ARIA attributes to spread on the root element */\n  ariaProps: Partial<AccessibilityProps>\n  /** Data attributes for CSS styling hooks */\n  dataAttributes: Record<string, string>\n  /** Image ARIA props */\n  imageProps: {\n    alt: string\n    role: string\n  }\n  /** Fallback text (initials) */\n  fallbackText: string\n  /** Current state */\n  state: {\n    size: AvatarSize\n    hasSrc: boolean\n  }\n}\n\n/**\n * Extract initials from a name or fallback string.\n * Takes first letter of first two words, uppercased.\n */\nexport function getInitials(name: string): string {\n  const parts = name.trim().split(/\\s+/)\n  if (parts.length === 0 || parts[0] === '') return ''\n  if (parts.length === 1) return parts[0].charAt(0).toUpperCase()\n  return (parts[0].charAt(0) + parts[parts.length - 1].charAt(0)).toUpperCase()\n}\n\nexport function createAvatar(props: AvatarProps = {}): AvatarAPI {\n  const { src, alt = '', fallback = '', size = 'md' } = props\n\n  // role=\"img\" makes its children presentational, so it is only applied when\n  // the avatar itself has a name; otherwise the inner <img alt> / fallback\n  // text stays exposed.\n  const ariaProps: Partial<AccessibilityProps> = {}\n  if (alt) {\n    ariaProps.role = 'img'\n    ariaProps['aria-label'] = alt\n  }\n\n  const fallbackText = fallback ? getInitials(fallback) : (alt ? getInitials(alt) : '')\n\n  const dataAttributes: Record<string, string> = {\n    'data-slot': 'avatar',\n  }\n\n  return {\n    ariaProps,\n    dataAttributes,\n    imageProps: {\n      alt,\n      role: 'img',\n    },\n    fallbackText,\n    state: {\n      size,\n      hasSrc: !!src,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const avatarTokens: TokenContract = {\n  name: 'avatar',\n  tokens: {\n    bg: { variable: '--rfr-avatar-bg', fallback: 'hsl(var(--muted))' },\n    fg: { variable: '--rfr-avatar-fg', fallback: 'hsl(var(--muted-foreground))' },\n    border: { variable: '--rfr-avatar-border', fallback: 'hsl(var(--border))' },\n  },\n}\n\nexport const avatarVariants = cva({\n  base: 'relative flex shrink-0 overflow-hidden',\n  variants: {\n    shape: {\n      circle: 'rounded-full',\n      square: 'rounded-md',\n    },\n    size: {\n      xs: 'h-6 w-6',\n      sm: 'h-8 w-8',\n      md: 'h-10 w-10',\n      lg: 'h-12 w-12',\n      xl: 'h-16 w-16',\n    },\n  },\n  defaultVariants: {\n    shape: 'circle',\n    size: 'md',\n  },\n})\n\nexport const avatarImageVariants = cva({\n  base: 'aspect-square h-full w-full object-cover',\n})\n\nexport const avatarFallbackVariants = cva({\n  base: 'flex h-full w-full items-center justify-center rounded-[inherit] bg-muted text-muted-foreground',\n  variants: {\n    size: {\n      xs: 'text-xs',\n      sm: 'text-xs',\n      md: 'text-sm',\n      lg: 'text-base',\n      xl: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createAvatar,\n  avatarVariants,\n  avatarImageVariants,\n  avatarFallbackVariants,\n  type AvatarSize,\n  type AvatarShape,\n} from '@refraction-ui/avatar'\nimport { cn } from '@refraction-ui/shared'\n\n/* ─── Context ──────────────────────────────────────────────────── */\ninterface AvatarContextValue {\n  size: AvatarSize\n  imageLoaded: boolean\n  imageError: boolean\n  setImageLoaded: (loaded: boolean) => void\n  setImageError: (error: boolean) => void\n}\n\nconst AvatarContext = React.createContext<AvatarContextValue>({\n  size: 'md',\n  imageLoaded: false,\n  imageError: false,\n  setImageLoaded: () => {},\n  setImageError: () => {},\n})\n\n/* ─── Avatar (root) ────────────────────────────────────────────── */\nexport interface AvatarProps extends React.HTMLAttributes<HTMLSpanElement> {\n  size?: AvatarSize\n  /** `circle` (default) or `square` (rounded corners) — e.g. for teams and organisations. */\n  shape?: AvatarShape\n}\n\n/**\n * Avatar -- circular image with fallback support.\n * Compound component: use Avatar > AvatarImage + AvatarFallback.\n */\nexport const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(\n  function Avatar({ size = 'md', shape = 'circle', className, children, ...props }, ref) {\n    const [imageLoaded, setImageLoaded] = React.useState(false)\n    const [imageError, setImageError] = React.useState(false)\n\n    const api = createAvatar({ size, alt: props['aria-label'] })\n\n    return (\n      <AvatarContext.Provider value={{ size, imageLoaded, imageError, setImageLoaded, setImageError }}>\n        <span\n          ref={ref}\n          className={cn(avatarVariants({ size, shape }), className)}\n          {...api.ariaProps}\n          {...api.dataAttributes}\n          {...props}\n        >\n          {children}\n        </span>\n      </AvatarContext.Provider>\n    )\n  },\n)\n\n/* ─── AvatarImage ──────────────────────────────────────────────── */\nexport interface AvatarImageProps extends React.ImgHTMLAttributes<HTMLImageElement> {}\n\nexport const AvatarImage = React.forwardRef<HTMLImageElement, AvatarImageProps>(\n  function AvatarImage({ className, src, alt = '', onLoad, onError, ...props }, ref) {\n    const { imageError, setImageLoaded, setImageError } = React.useContext(AvatarContext)\n\n    const imageRef = React.useRef<HTMLImageElement | null>(null)\n    const mergedRef = React.useCallback((node: HTMLImageElement | null) => {\n      imageRef.current = node\n      if (typeof ref === 'function') {\n        const cleanup: unknown = ref(node)\n        if (typeof cleanup === 'function') {\n          return () => {\n            imageRef.current = null\n            cleanup()\n          }\n        }\n      } else if (ref) ref.current = node\n    }, [ref])\n\n    React.useEffect(() => {\n      // SSR images may finish before hydration installs event handlers. Read\n      // the native result instead of erasing a cached success or failure.\n      const image = imageRef.current\n      setImageLoaded(!!image?.complete && image.naturalWidth > 0)\n      setImageError(!!image?.complete && image.naturalWidth === 0)\n    }, [src, setImageLoaded, setImageError])\n\n    const handleLoad = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageLoaded(true)\n      onLoad?.(e)\n    }\n\n    const handleError = (e: React.SyntheticEvent<HTMLImageElement>) => {\n      setImageError(true)\n      onError?.(e)\n    }\n\n    if (imageError) return null\n\n    return (\n      <img\n        ref={mergedRef}\n        className={cn(avatarImageVariants(), className)}\n        src={src}\n        alt={alt}\n        onLoad={handleLoad}\n        onError={handleError}\n        {...props}\n      />\n    )\n  },\n)\n\n/* ─── AvatarFallback ───────────────────────────────────────────── */\nexport interface AvatarFallbackProps extends React.HTMLAttributes<HTMLSpanElement> {}\n\nexport const AvatarFallback = React.forwardRef<HTMLSpanElement, AvatarFallbackProps>(\n  function AvatarFallback({ className, children, ...props }, ref) {\n    const { size, imageLoaded, imageError } = React.useContext(AvatarContext)\n\n    if (imageLoaded && !imageError) return null\n\n    return (\n      <span\n        ref={ref}\n        className={cn(avatarFallbackVariants({ size }), className)}\n        {...props}\n      >\n        {children}\n      </span>\n    )\n  },\n)\n"],
+  "mappings": "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",
   "names": ["Avatar", "AvatarImage", "AvatarFallback"]
 }

package/dist/react-dialog.js

@@ -1,5 +1,4 @@
 import {
-  createDialog,
   dialogContentVariants,
   overlayStyles
 } from "./chunk-4ACSHPCM.js";
@@ -43,11 +42,10 @@ function Dialog({
     },
     [isControlled, onOpenChange]
   );
-  const apiRef = React.useRef(null);
-  if (apiRef.current === null) {
-    apiRef.current = createDialog({ open, modal });
-  }
-  const api = apiRef.current;
+  const id = React.useId();
+  const contentId = `rfr-dialog-content-${id}`;
+  const titleId = `rfr-dialog-title-${id}`;
+  const descriptionId = `rfr-dialog-desc-${id}`;
   const [hasTitle, setHasTitle] = React.useState(false);
   const [hasDescription, setHasDescription] = React.useState(false);
   const ctx = React.useMemo(
@@ -55,38 +53,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 React.createElement(DialogContext.Provider, { value: ctx }, children);
 }
 var DialogTrigger = React.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 React.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 (!React.isValidElement(children)) {
+        devWarn("dialog-trigger-asChild-child", "DialogTrigger: `asChild` expects a single React element child; rendering nothing.");
+        return null;
+      }
+      const child = children;
+      const childRef = React.version.startsWith("18.") ? child.ref : child.props.ref;
+      return React.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 React.createElement("button", { ref, ...triggerProps }, children);
   }
 );
 var DialogOverlay = React.forwardRef(
@@ -119,10 +145,6 @@ function containsElement(node, type) {
 var DialogContent = React.forwardRef(
   function DialogContent2({ className, children, onKeyDown, ...props }, ref) {
     const { open, onOpenChange, modal, contentId, titleId, descriptionId, hasTitle, hasDescription } = useDialogContext();
-    React.useMemo(
-      () => createDialog({ open, modal }),
-      [open, modal]
-    );
     const handleKeyDown = (e) => {
       const handler = createKeyboardHandler({
         Escape: (ev) => {

package/dist/react-dialog.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../react-dialog/src/dialog.tsx"],
-  "sourcesContent": ["import * as React from 'react'\nimport * as ReactDOM from 'react-dom'\nimport {\n  createDialog,\n  overlayStyles,\n  dialogContentVariants,\n  type DialogProps as CoreDialogProps,\n} from '@refraction-ui/dialog'\nimport { cn, createKeyboardHandler, devWarn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface DialogContextValue {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  modal: boolean\n  contentId: string\n  titleId: string\n  descriptionId: string\n  /** Whether a DialogTitle / DialogDescription is mounted — only then is it referenced. */\n  hasTitle: boolean\n  hasDescription: boolean\n  setHasTitle: (present: boolean) => void\n  setHasDescription: (present: boolean) => void\n}\n\nconst DialogContext = React.createContext<DialogContextValue | null>(null)\n\nfunction useDialogContext(): DialogContextValue {\n  const ctx = React.useContext(DialogContext)\n  if (!ctx) {\n    devWarn(\n      'react-dialog/context-outside-provider',\n      'Dialog compound components (DialogTrigger/DialogContent/DialogTitle/etc.) must be rendered inside a <Dialog>. The missing DialogContext makes this throw.',\n    )\n    throw new Error('Dialog compound components must be used within <Dialog>')\n  }\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// Dialog (root provider)\n// ---------------------------------------------------------------------------\n\nexport interface DialogProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  modal?: boolean\n  children?: React.ReactNode\n}\n\nexport function Dialog({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  modal = true,\n  children,\n}: DialogProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(next)\n      }\n      onOpenChange?.(next)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  // Use the headless core to get stable IDs\n  const apiRef = React.useRef<ReturnType<typeof createDialog> | null>(null)\n  if (apiRef.current === null) {\n    apiRef.current = createDialog({ open, modal })\n  }\n  const api = apiRef.current\n  const [hasTitle, setHasTitle] = React.useState(false)\n  const [hasDescription, setHasDescription] = React.useState(false)\n\n  const ctx = React.useMemo<DialogContextValue>(\n    () => ({\n      open,\n      onOpenChange: handleOpenChange,\n      modal,\n      contentId: api.ids.content,\n      titleId: api.ids.title,\n      descriptionId: api.ids.description,\n      hasTitle,\n      hasDescription,\n      setHasTitle,\n      setHasDescription,\n    }),\n    [open, handleOpenChange, modal, api.ids.content, api.ids.title, api.ids.description, hasTitle, hasDescription],\n  )\n\n  return React.createElement(DialogContext.Provider, { value: ctx }, children)\n}\n\n// ---------------------------------------------------------------------------\n// DialogTrigger\n// ---------------------------------------------------------------------------\n\nexport interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n}\n\nexport const DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(\n  function DialogTrigger({ onClick, children, ...props }, ref) {\n    const { open, onOpenChange, contentId } = useDialogContext()\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onOpenChange(!open)\n      onClick?.(e)\n    }\n\n    return React.createElement(\n      'button',\n      {\n        ref,\n        type: 'button',\n        'aria-expanded': open,\n        'aria-controls': contentId,\n        'aria-haspopup': 'dialog',\n        onClick: handleClick,\n        ...props,\n      },\n      children,\n    )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DialogOverlay\n// ---------------------------------------------------------------------------\n\nexport interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlayProps>(\n  function DialogOverlay({ className, onClick, ...props }, ref) {\n    const { open, onOpenChange } = useDialogContext()\n\n    if (!open) return null\n\n    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      // Only close if clicking the overlay itself, not children\n      if (e.target === e.currentTarget) {\n        onOpenChange(false)\n      }\n      onClick?.(e)\n    }\n\n    return React.createElement('div', {\n      ref,\n      className: cn(overlayStyles, className),\n      'data-state': open ? 'open' : 'closed',\n      onClick: handleClick,\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DialogContent\n// ---------------------------------------------------------------------------\n\nexport interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Whether `type` appears in the element tree — covers the first and server\n * render, before a mounted DialogTitle/DialogDescription has registered.\n * Parts nested inside custom components are found once they mount.\n */\nfunction containsElement(node: React.ReactNode, type: React.ElementType): boolean {\n  let found = false\n  React.Children.forEach(node, (child) => {\n    if (found || !React.isValidElement<{ children?: React.ReactNode }>(child)) return\n    found = child.type === type || containsElement(child.props.children, type)\n  })\n  return found\n}\n\nexport const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent({ className, children, onKeyDown, ...props }, ref) {\n    const { open, onOpenChange, modal, contentId, titleId, descriptionId, hasTitle, hasDescription } =\n      useDialogContext()\n\n    const api = React.useMemo(\n      () => createDialog({ open, modal }),\n      [open, modal],\n    )\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const handler = createKeyboardHandler({\n        Escape: (ev) => {\n          ev.preventDefault()\n          onOpenChange(false)\n        },\n      })\n      handler(e.nativeEvent)\n      onKeyDown?.(e)\n    }\n\n    if (!open) return null\n\n    const content = React.createElement(\n      'div',\n      {\n        ref,\n        role: 'dialog',\n        'aria-modal': modal,\n        // Reference only parts that exist: an id pointing at nothing leaves the\n        // dialog unnamed while looking labelled.\n        'aria-labelledby': hasTitle || containsElement(children, DialogTitle) ? titleId : undefined,\n        'aria-describedby':\n          hasDescription || containsElement(children, DialogDescription) ? descriptionId : undefined,\n        id: contentId,\n        className: cn(dialogContentVariants(), className),\n        onKeyDown: handleKeyDown,\n        tabIndex: -1,\n        ...props,\n      },\n      children,\n    )\n\n    // Render via portal if document is available (client-side)\n    if (typeof document !== 'undefined') {\n      return ReactDOM.createPortal(content, document.body)\n    }\n\n    // SSR fallback: render inline\n    return content\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DialogHeader\n// ---------------------------------------------------------------------------\n\nexport interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      className: cn('flex flex-col space-y-1.5 text-center sm:text-left', className),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DialogFooter\n// ---------------------------------------------------------------------------\n\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n  function DialogFooter({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      className: cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n        className,\n      ),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DialogTitle\n// ---------------------------------------------------------------------------\n\nexport interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(\n  function DialogTitle({ className, ...props }, ref) {\n    const { titleId, setHasTitle } = useDialogContext()\n    React.useEffect(() => {\n      setHasTitle(true)\n      return () => setHasTitle(false)\n    }, [setHasTitle])\n\n    return React.createElement('h2', {\n      ref,\n      id: titleId,\n      className: cn('text-lg font-semibold leading-none tracking-tight', className),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DialogDescription\n// ---------------------------------------------------------------------------\n\nexport interface DialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport const DialogDescription = React.forwardRef<\n  HTMLParagraphElement,\n  DialogDescriptionProps\n>(function DialogDescription({ className, ...props }, ref) {\n  const { descriptionId, setHasDescription } = useDialogContext()\n  React.useEffect(() => {\n    setHasDescription(true)\n    return () => setHasDescription(false)\n  }, [setHasDescription])\n\n  return React.createElement('p', {\n    ref,\n    id: descriptionId,\n    className: cn('text-sm text-muted-foreground', className),\n    ...props,\n  })\n})\n\n// ---------------------------------------------------------------------------\n// DialogClose\n// ---------------------------------------------------------------------------\n\nexport interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport const DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>(\n  function DialogClose({ onClick, children, ...props }, ref) {\n    const { onOpenChange } = useDialogContext()\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onOpenChange(false)\n      onClick?.(e)\n    }\n\n    return React.createElement(\n      'button',\n      {\n        ref,\n        type: 'button',\n        onClick: handleClick,\n        ...props,\n      },\n      children,\n    )\n  },\n)\n"],
-  "mappings": ";;;;;;;;;;;;;;AA4BA,IAAM,gBAAsB,oBAAyC,IAAI;AAEzE,SAAS,mBAAuC;AAC9C,QAAM,MAAY,iBAAW,aAAa;AAC1C,MAAI,CAAC,KAAK;AACR;MACE;MACA;IAAA;AAEF,UAAM,IAAI,MAAM,yDAAyD;EAC3E;AACA,SAAO;AACT;AAcO,SAAS,OAAO;EACrB,MAAM;EACN,cAAc;EACd;EACA,QAAQ;EACR;AACF,GAAgB;AACd,QAAM,CAAC,kBAAkB,mBAAmB,IAAU,eAAS,WAAW;AAC1E,QAAM,eAAe,mBAAmB;AACxC,QAAM,OAAO,eAAe,iBAAiB;AAE7C,QAAM,mBAAyB;IAC7B,CAAC,SAAkB;AACjB,UAAI,CAAC,cAAc;AACjB,4BAAoB,IAAI;MAC1B;AACA,qBAAe,IAAI;IACrB;IACA,CAAC,cAAc,YAAY;EAAA;AAI7B,QAAM,SAAe,aAA+C,IAAI;AACxE,MAAI,OAAO,YAAY,MAAM;AAC3B,WAAO,UAAU,aAAa,EAAE,MAAM,MAAA,CAAO;EAC/C;AACA,QAAM,MAAM,OAAO;AACnB,QAAM,CAAC,UAAU,WAAW,IAAU,eAAS,KAAK;AACpD,QAAM,CAAC,gBAAgB,iBAAiB,IAAU,eAAS,KAAK;AAEhE,QAAM,MAAY;IAChB,OAAO;MACL;MACA,cAAc;MACd;MACA,WAAW,IAAI,IAAI;MACnB,SAAS,IAAI,IAAI;MACjB,eAAe,IAAI,IAAI;MACvB;MACA;MACA;MACA;IAAA;IAEF,CAAC,MAAM,kBAAkB,OAAO,IAAI,IAAI,SAAS,IAAI,IAAI,OAAO,IAAI,IAAI,aAAa,UAAU,cAAc;EAAA;AAG/G,SAAa,oBAAc,cAAc,UAAU,EAAE,OAAO,IAAA,GAAO,QAAQ;AAC7E;AAUO,IAAM,gBAAsB;EACjC,SAASA,eAAc,EAAE,SAAS,UAAU,GAAG,MAAA,GAAS,KAAK;AAC3D,UAAM,EAAE,MAAM,cAAc,UAAA,IAAc,iBAAA;AAE1C,UAAM,cAAc,CAAC,MAA2C;AAC9D,mBAAa,CAAC,IAAI;AAClB,gBAAU,CAAC;IACb;AAEA,WAAa;MACX;MACA;QACE;QACA,MAAM;QACN,iBAAiB;QACjB,iBAAiB;QACjB,iBAAiB;QACjB,SAAS;QACT,GAAG;MAAA;MAEL;IAAA;EAEJ;AACF;AAQO,IAAM,gBAAsB;EACjC,SAASC,eAAc,EAAE,WAAW,SAAS,GAAG,MAAA,GAAS,KAAK;AAC5D,UAAM,EAAE,MAAM,aAAA,IAAiB,iBAAA;AAE/B,QAAI,CAAC,KAAM,QAAO;AAElB,UAAM,cAAc,CAAC,MAAwC;AAE3D,UAAI,EAAE,WAAW,EAAE,eAAe;AAChC,qBAAa,KAAK;MACpB;AACA,gBAAU,CAAC;IACb;AAEA,WAAa,oBAAc,OAAO;MAChC;MACA,WAAW,GAAG,eAAe,SAAS;MACtC,cAAc,OAAO,SAAS;MAC9B,SAAS;MACT,GAAG;IAAA,CACJ;EACH;AACF;AAaA,SAAS,gBAAgB,MAAuB,MAAkC;AAChF,MAAI,QAAQ;AACN,EAAA,eAAS,QAAQ,MAAM,CAAC,UAAU;AACtC,QAAI,SAAS,CAAO,qBAA+C,KAAK,EAAG;AAC3E,YAAQ,MAAM,SAAS,QAAQ,gBAAgB,MAAM,MAAM,UAAU,IAAI;EAC3E,CAAC;AACD,SAAO;AACT;AAEO,IAAM,gBAAsB;EACjC,SAASC,eAAc,EAAE,WAAW,UAAU,WAAW,GAAG,MAAA,GAAS,KAAK;AACxE,UAAM,EAAE,MAAM,cAAc,OAAO,WAAW,SAAS,eAAe,UAAU,eAAA,IAC9E,iBAAA;AAEgB,IAAA;MAChB,MAAM,aAAa,EAAE,MAAM,MAAA,CAAO;MAClC,CAAC,MAAM,KAAK;IAAA;AAGd,UAAM,gBAAgB,CAAC,MAA2C;AAChE,YAAM,UAAU,sBAAsB;QACpC,QAAQ,CAAC,OAAO;AACd,aAAG,eAAA;AACH,uBAAa,KAAK;QACpB;MAAA,CACD;AACD,cAAQ,EAAE,WAAW;AACrB,kBAAY,CAAC;IACf;AAEA,QAAI,CAAC,KAAM,QAAO;AAElB,UAAM,UAAgB;MACpB;MACA;QACE;QACA,MAAM;QACN,cAAc;;;QAGd,mBAAmB,YAAY,gBAAgB,UAAU,WAAW,IAAI,UAAU;QAClF,oBACE,kBAAkB,gBAAgB,UAAU,iBAAiB,IAAI,gBAAgB;QACnF,IAAI;QACJ,WAAW,GAAG,sBAAA,GAAyB,SAAS;QAChD,WAAW;QACX,UAAU;QACV,GAAG;MAAA;MAEL;IAAA;AAIF,QAAI,OAAO,aAAa,aAAa;AACnC,aAAgB,sBAAa,SAAS,SAAS,IAAI;IACrD;AAGA,WAAO;EACT;AACF;AAQO,IAAM,eAAqB;EAChC,SAASC,cAAa,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAClD,WAAa,oBAAc,OAAO;MAChC;MACA,WAAW,GAAG,sDAAsD,SAAS;MAC7E,GAAG;IAAA,CACJ;EACH;AACF;AAQO,IAAM,eAAqB;EAChC,SAASC,cAAa,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AAClD,WAAa,oBAAc,OAAO;MAChC;MACA,WAAW;QACT;QACA;MAAA;MAEF,GAAG;IAAA,CACJ;EACH;AACF;AAQO,IAAM,cAAoB;EAC/B,SAASC,aAAY,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACjD,UAAM,EAAE,SAAS,YAAA,IAAgB,iBAAA;AAC3B,IAAA,gBAAU,MAAM;AACpB,kBAAY,IAAI;AAChB,aAAO,MAAM,YAAY,KAAK;IAChC,GAAG,CAAC,WAAW,CAAC;AAEhB,WAAa,oBAAc,MAAM;MAC/B;MACA,IAAI;MACJ,WAAW,GAAG,qDAAqD,SAAS;MAC5E,GAAG;IAAA,CACJ;EACH;AACF;AAQO,IAAM,oBAA0B,iBAGrC,SAASC,mBAAkB,EAAE,WAAW,GAAG,MAAA,GAAS,KAAK;AACzD,QAAM,EAAE,eAAe,kBAAA,IAAsB,iBAAA;AACvC,EAAA,gBAAU,MAAM;AACpB,sBAAkB,IAAI;AACtB,WAAO,MAAM,kBAAkB,KAAK;EACtC,GAAG,CAAC,iBAAiB,CAAC;AAEtB,SAAa,oBAAc,KAAK;IAC9B;IACA,IAAI;IACJ,WAAW,GAAG,iCAAiC,SAAS;IACxD,GAAG;EAAA,CACJ;AACH,CAAC;AAQM,IAAM,cAAoB;EAC/B,SAASC,aAAY,EAAE,SAAS,UAAU,GAAG,MAAA,GAAS,KAAK;AACzD,UAAM,EAAE,aAAA,IAAiB,iBAAA;AAEzB,UAAM,cAAc,CAAC,MAA2C;AAC9D,mBAAa,KAAK;AAClB,gBAAU,CAAC;IACb;AAEA,WAAa;MACX;MACA;QACE;QACA,MAAM;QACN,SAAS;QACT,GAAG;MAAA;MAEL;IAAA;EAEJ;AACF;",
+  "sourcesContent": ["import * as React from 'react'\nimport * as ReactDOM from 'react-dom'\nimport {\n  overlayStyles,\n  dialogContentVariants,\n} from '@refraction-ui/dialog'\nimport { cn, createKeyboardHandler, devWarn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface DialogContextValue {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  modal: boolean\n  contentId: string\n  titleId: string\n  descriptionId: string\n  /** Whether a DialogTitle / DialogDescription is mounted — only then is it referenced. */\n  hasTitle: boolean\n  hasDescription: boolean\n  setHasTitle: (present: boolean) => void\n  setHasDescription: (present: boolean) => void\n}\n\nconst DialogContext = React.createContext<DialogContextValue | null>(null)\n\nfunction useDialogContext(): DialogContextValue {\n  const ctx = React.useContext(DialogContext)\n  if (!ctx) {\n    devWarn(\n      'react-dialog/context-outside-provider',\n      'Dialog compound components (DialogTrigger/DialogContent/DialogTitle/etc.) must be rendered inside a <Dialog>. The missing DialogContext makes this throw.',\n    )\n    throw new Error('Dialog compound components must be used within <Dialog>')\n  }\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// Dialog (root provider)\n// ---------------------------------------------------------------------------\n\nexport interface DialogProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  modal?: boolean\n  children?: React.ReactNode\n}\n\nexport function Dialog({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  modal = true,\n  children,\n}: DialogProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(next)\n      }\n      onOpenChange?.(next)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  // React's tree-derived IDs survive SSR requests and client hydration.\n  const id = React.useId()\n  const contentId = `rfr-dialog-content-${id}`\n  const titleId = `rfr-dialog-title-${id}`\n  const descriptionId = `rfr-dialog-desc-${id}`\n  const [hasTitle, setHasTitle] = React.useState(false)\n  const [hasDescription, setHasDescription] = React.useState(false)\n\n  const ctx = React.useMemo<DialogContextValue>(\n    () => ({\n      open,\n      onOpenChange: handleOpenChange,\n      modal,\n      contentId,\n      titleId,\n      descriptionId,\n      hasTitle,\n      hasDescription,\n      setHasTitle,\n      setHasDescription,\n    }),\n    [open, handleOpenChange, modal, contentId, titleId, descriptionId, hasTitle, hasDescription],\n  )\n\n  return React.createElement(DialogContext.Provider, { value: ctx }, children)\n}\n\n// ---------------------------------------------------------------------------\n// DialogTrigger\n// ---------------------------------------------------------------------------\n\nexport interface DialogTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  asChild?: boolean\n}\n\nexport const DialogTrigger = React.forwardRef<HTMLButtonElement, DialogTriggerProps>(\n  function DialogTrigger({ asChild = false, onClick, children, ...props }, ref) {\n    const { open, onOpenChange, contentId } = useDialogContext()\n\n    const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {\n      onClick?.(event)\n      if (!event.defaultPrevented) onOpenChange(!open)\n    }\n    const triggerProps = {\n      type: 'button' as const,\n      'aria-expanded': open,\n      'aria-controls': contentId,\n      'aria-haspopup': 'dialog' as const,\n      ...props,\n      onClick: handleClick,\n    }\n\n    if (asChild) {\n      if (!React.isValidElement(children)) {\n        devWarn('dialog-trigger-asChild-child', 'DialogTrigger: `asChild` expects a single React element child; rendering nothing.')\n        return null\n      }\n      const child = children as React.ReactElement<React.ButtonHTMLAttributes<HTMLButtonElement> & {\n        ref?: React.Ref<HTMLButtonElement>\n      }> & { ref?: React.Ref<HTMLButtonElement> }\n      // React 19 moved ref into props; reading element.ref there emits a warning.\n      const childRef = React.version.startsWith('18.') ? child.ref : child.props.ref\n      return React.cloneElement(child, {\n        ...triggerProps,\n        className: cn(props.className, child.props.className),\n        onClick: (event: React.MouseEvent<HTMLButtonElement>) => {\n          child.props.onClick?.(event)\n          if (!event.defaultPrevented) handleClick(event)\n        },\n        ref: (node: HTMLButtonElement | null) => {\n          const outerCleanup: unknown = typeof ref === 'function' ? ref(node) : undefined\n          if (ref && typeof ref !== 'function') ref.current = node\n          const childCleanup: unknown = typeof childRef === 'function' ? childRef(node) : undefined\n          if (childRef && typeof childRef !== 'function') childRef.current = node\n          if (typeof outerCleanup === 'function' || typeof childCleanup === 'function') {\n            return () => {\n              if (typeof outerCleanup === 'function') outerCleanup()\n              else if (typeof ref === 'function') ref(null)\n              else if (ref) ref.current = null\n              if (typeof childCleanup === 'function') childCleanup()\n              else if (typeof childRef === 'function') childRef(null)\n              else if (childRef) childRef.current = null\n            }\n          }\n        },\n      })\n    }\n\n    return React.createElement('button', { ref, ...triggerProps }, children)\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DialogOverlay\n// ---------------------------------------------------------------------------\n\nexport interface DialogOverlayProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DialogOverlay = React.forwardRef<HTMLDivElement, DialogOverlayProps>(\n  function DialogOverlay({ className, onClick, ...props }, ref) {\n    const { open, onOpenChange } = useDialogContext()\n\n    if (!open) return null\n\n    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      // Only close if clicking the overlay itself, not children\n      if (e.target === e.currentTarget) {\n        onOpenChange(false)\n      }\n      onClick?.(e)\n    }\n\n    return React.createElement('div', {\n      ref,\n      className: cn(overlayStyles, className),\n      'data-state': open ? 'open' : 'closed',\n      onClick: handleClick,\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DialogContent\n// ---------------------------------------------------------------------------\n\nexport interface DialogContentProps extends React.HTMLAttributes<HTMLDivElement> {}\n\n/**\n * Whether `type` appears in the element tree — covers the first and server\n * render, before a mounted DialogTitle/DialogDescription has registered.\n * Parts nested inside custom components are found once they mount.\n */\nfunction containsElement(node: React.ReactNode, type: React.ElementType): boolean {\n  let found = false\n  React.Children.forEach(node, (child) => {\n    if (found || !React.isValidElement<{ children?: React.ReactNode }>(child)) return\n    found = child.type === type || containsElement(child.props.children, type)\n  })\n  return found\n}\n\nexport const DialogContent = React.forwardRef<HTMLDivElement, DialogContentProps>(\n  function DialogContent({ className, children, onKeyDown, ...props }, ref) {\n    const { open, onOpenChange, modal, contentId, titleId, descriptionId, hasTitle, hasDescription } =\n      useDialogContext()\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const handler = createKeyboardHandler({\n        Escape: (ev) => {\n          ev.preventDefault()\n          onOpenChange(false)\n        },\n      })\n      handler(e.nativeEvent)\n      onKeyDown?.(e)\n    }\n\n    if (!open) return null\n\n    const content = React.createElement(\n      'div',\n      {\n        ref,\n        role: 'dialog',\n        'aria-modal': modal,\n        // Reference only parts that exist: an id pointing at nothing leaves the\n        // dialog unnamed while looking labelled.\n        'aria-labelledby': hasTitle || containsElement(children, DialogTitle) ? titleId : undefined,\n        'aria-describedby':\n          hasDescription || containsElement(children, DialogDescription) ? descriptionId : undefined,\n        id: contentId,\n        className: cn(dialogContentVariants(), className),\n        onKeyDown: handleKeyDown,\n        tabIndex: -1,\n        ...props,\n      },\n      children,\n    )\n\n    // Render via portal if document is available (client-side)\n    if (typeof document !== 'undefined') {\n      return ReactDOM.createPortal(content, document.body)\n    }\n\n    // SSR fallback: render inline\n    return content\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DialogHeader\n// ---------------------------------------------------------------------------\n\nexport interface DialogHeaderProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DialogHeader = React.forwardRef<HTMLDivElement, DialogHeaderProps>(\n  function DialogHeader({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      className: cn('flex flex-col space-y-1.5 text-center sm:text-left', className),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DialogFooter\n// ---------------------------------------------------------------------------\n\nexport interface DialogFooterProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DialogFooter = React.forwardRef<HTMLDivElement, DialogFooterProps>(\n  function DialogFooter({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      className: cn(\n        'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',\n        className,\n      ),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DialogTitle\n// ---------------------------------------------------------------------------\n\nexport interface DialogTitleProps extends React.HTMLAttributes<HTMLHeadingElement> {}\n\nexport const DialogTitle = React.forwardRef<HTMLHeadingElement, DialogTitleProps>(\n  function DialogTitle({ className, ...props }, ref) {\n    const { titleId, setHasTitle } = useDialogContext()\n    React.useEffect(() => {\n      setHasTitle(true)\n      return () => setHasTitle(false)\n    }, [setHasTitle])\n\n    return React.createElement('h2', {\n      ref,\n      id: titleId,\n      className: cn('text-lg font-semibold leading-none tracking-tight', className),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DialogDescription\n// ---------------------------------------------------------------------------\n\nexport interface DialogDescriptionProps extends React.HTMLAttributes<HTMLParagraphElement> {}\n\nexport const DialogDescription = React.forwardRef<\n  HTMLParagraphElement,\n  DialogDescriptionProps\n>(function DialogDescription({ className, ...props }, ref) {\n  const { descriptionId, setHasDescription } = useDialogContext()\n  React.useEffect(() => {\n    setHasDescription(true)\n    return () => setHasDescription(false)\n  }, [setHasDescription])\n\n  return React.createElement('p', {\n    ref,\n    id: descriptionId,\n    className: cn('text-sm text-muted-foreground', className),\n    ...props,\n  })\n})\n\n// ---------------------------------------------------------------------------\n// DialogClose\n// ---------------------------------------------------------------------------\n\nexport interface DialogCloseProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {}\n\nexport const DialogClose = React.forwardRef<HTMLButtonElement, DialogCloseProps>(\n  function DialogClose({ onClick, children, ...props }, ref) {\n    const { onOpenChange } = useDialogContext()\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onOpenChange(false)\n      onClick?.(e)\n    }\n\n    return React.createElement(\n      'button',\n      {\n        ref,\n        type: 'button',\n        onClick: handleClick,\n        ...props,\n      },\n      children,\n    )\n  },\n)\n"],
+  "mappings": "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",
   "names": ["DialogTrigger", "DialogOverlay", "DialogContent", "DialogHeader", "DialogFooter", "DialogTitle", "DialogDescription", "DialogClose"]
 }

package/dist/react-dropdown-menu.js

@@ -1,11 +1,8 @@
 import {
-  Keys,
   cn,
   createKeyboardHandler,
-  createMachine,
   cva,
-  devWarn,
-  generateId
+  devWarn
 } from "./chunk-75BKRTPO.js";
 
 // ../react-dropdown-menu/dist/index.js
@@ -13,88 +10,6 @@ import * as React from "react";
 import * as ReactDOM from "react-dom";
 
 // ../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"
 });
@@ -133,20 +48,16 @@ function DropdownMenu({
     },
     [isControlled, onOpenChange]
   );
-  const apiRef = React.useRef(null);
-  if (apiRef.current === null) {
-    apiRef.current = createDropdownMenu({ open });
-  }
-  const api = apiRef.current;
+  const contentId = `rfr-dropdown-menu-${React.useId()}`;
   const triggerRef = React.useRef(null);
   const ctx = React.useMemo(
     () => ({
       open,
       onOpenChange: handleOpenChange,
-      contentId: api.ids.content,
+      contentId,
       triggerRef
     }),
-    [open, handleOpenChange, api.ids.content]
+    [open, handleOpenChange, contentId]
   );
   return React.createElement(DropdownMenuContext.Provider, { value: ctx }, children);
 }

package/dist/react-dropdown-menu.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../dropdown-menu/src/dropdown-menu.ts", "../../dropdown-menu/src/dropdown-menu.styles.ts", "../../react-dropdown-menu/src/dropdown-menu.tsx"],
-  "sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { createMachine, Keys, generateId } from '@refraction-ui/shared'\n\nexport interface DropdownMenuProps {\n  /** Whether the menu is open (controlled) */\n  open?: boolean\n  /** Whether the menu starts open (uncontrolled) */\n  defaultOpen?: boolean\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void\n}\n\nexport interface MenuItemProps {\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Callback when the item is selected */\n  onSelect?: () => void\n}\n\nexport interface DropdownMenuState {\n  open: boolean\n}\n\nexport interface DropdownMenuAPI {\n  /** Current menu state */\n  state: DropdownMenuState\n  /** ARIA attributes for the trigger button */\n  triggerProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** ARIA attributes for the menu content */\n  contentProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** Factory for menu item props */\n  getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown>\n  /** Open the menu */\n  open(): void\n  /** Close the menu */\n  close(): void\n  /** Toggle the menu */\n  toggle(): void\n  /** Keyboard handlers for the menu */\n  keyboardHandlers: KeyboardHandlerMap\n  /** Generated IDs for aria linking */\n  ids: {\n    content: string\n  }\n}\n\nexport function createDropdownMenu(props: DropdownMenuProps = {}): DropdownMenuAPI {\n  const { open: controlledOpen, defaultOpen = false, onOpenChange } = props\n\n  const machine = createMachine<'open' | 'closed', 'OPEN' | 'CLOSE'>({\n    initial: controlledOpen ?? defaultOpen ? 'open' : 'closed',\n    states: {\n      closed: { on: { OPEN: 'open' } },\n      open: { on: { CLOSE: 'closed' } },\n    },\n  })\n\n  const contentId = generateId('rfr-dropdown-menu')\n\n  function isOpen(): boolean {\n    if (controlledOpen !== undefined) return controlledOpen\n    return machine.matches('open')\n  }\n\n  function openMenu(): void {\n    machine.send('OPEN')\n    onOpenChange?.(true)\n  }\n\n  function closeMenu(): void {\n    machine.send('CLOSE')\n    onOpenChange?.(false)\n  }\n\n  function toggleMenu(): void {\n    if (isOpen()) {\n      closeMenu()\n    } else {\n      openMenu()\n    }\n  }\n\n  function getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown> {\n    return {\n      role: 'menuitem',\n      tabIndex: item.disabled ? -1 : 0,\n      'data-disabled': item.disabled ? '' : undefined,\n      'aria-disabled': item.disabled || undefined,\n    }\n  }\n\n  const keyboardHandlers: KeyboardHandlerMap = {\n    [Keys.Escape]: (e: KeyboardEvent) => {\n      e.preventDefault()\n      closeMenu()\n    },\n    [Keys.ArrowDown]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.ArrowUp]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.Enter]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.Home]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.End]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n  }\n\n  const triggerProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    'aria-expanded': isOpen(),\n    'aria-controls': contentId,\n    'aria-haspopup': 'menu',\n  }\n\n  const contentProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    role: 'menu',\n    id: contentId,\n    'data-state': isOpen() ? 'open' : 'closed',\n  }\n\n  return {\n    state: { open: isOpen() },\n    triggerProps,\n    contentProps,\n    getItemProps,\n    open: openMenu,\n    close: closeMenu,\n    toggle: toggleMenu,\n    keyboardHandlers,\n    ids: {\n      content: contentId,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const menuContentVariants = cva({\n  base: 'z-50 rounded-md border bg-popover shadow-md',\n})\n\nexport const menuItemVariants = cva({\n  base: 'relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n})\n", "import * as React from 'react'\nimport * as ReactDOM from 'react-dom'\nimport {\n  createDropdownMenu,\n  menuContentVariants,\n  menuItemVariants,\n  type DropdownMenuProps as CoreDropdownMenuProps,\n  type MenuItemProps as CoreMenuItemProps,\n} from '@refraction-ui/dropdown-menu'\nimport { cn, createKeyboardHandler, devWarn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface DropdownMenuContextValue {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  contentId: string\n  /** The trigger element, so the portalled content can anchor to it. */\n  triggerRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst DropdownMenuContext = React.createContext<DropdownMenuContextValue | null>(null)\n\nfunction useDropdownMenuContext(): DropdownMenuContextValue {\n  const ctx = React.useContext(DropdownMenuContext)\n  if (!ctx) {\n    devWarn(\n      'react-dropdown-menu/context-outside-provider',\n      'DropdownMenu compound components (DropdownMenuTrigger/DropdownMenuContent/DropdownMenuItem/etc.) must be rendered inside a <DropdownMenu>. The missing DropdownMenuContext makes this throw.',\n    )\n    throw new Error('DropdownMenu compound components must be used within <DropdownMenu>')\n  }\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// DropdownMenu (root provider)\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  children?: React.ReactNode\n}\n\nexport function DropdownMenu({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: DropdownMenuProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(next)\n      }\n      onOpenChange?.(next)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  // Use the headless core to get stable IDs\n  const apiRef = React.useRef<ReturnType<typeof createDropdownMenu> | null>(null)\n  if (apiRef.current === null) {\n    apiRef.current = createDropdownMenu({ open })\n  }\n  const api = apiRef.current\n\n  const triggerRef = React.useRef<HTMLElement | null>(null)\n\n  const ctx = React.useMemo<DropdownMenuContextValue>(\n    () => ({\n      open,\n      onOpenChange: handleOpenChange,\n      contentId: api.ids.content,\n      triggerRef,\n    }),\n    [open, handleOpenChange, api.ids.content],\n  )\n\n  return React.createElement(DropdownMenuContext.Provider, { value: ctx }, children)\n}\n\n// ---------------------------------------------------------------------------\n// DropdownMenuTrigger\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Merge the trigger's props/behavior onto the child element instead of\n   * rendering a `<button>` around it (Radix-style `asChild`). Use it with\n   * styled triggers like `<Button>` — otherwise you'd nest a button in a\n   * button (invalid HTML and a hydration error). */\n  asChild?: boolean\n}\n\nexport const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(\n  function DropdownMenuTrigger({ asChild = false, onClick, children, ...props }, ref) {\n    const { open, onOpenChange, contentId, triggerRef } = useDropdownMenuContext()\n    const setRefs = (node: HTMLButtonElement | null) => {\n      triggerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    }\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onOpenChange(!open)\n      onClick?.(e)\n    }\n\n    const triggerProps = {\n      type: 'button' as const,\n      'aria-expanded': open,\n      'aria-controls': contentId,\n      'aria-haspopup': 'menu' as const,\n      onClick: handleClick,\n      ...props,\n    }\n\n    if (asChild) {\n      if (!React.isValidElement(children)) {\n        devWarn(\n          'dropdown-menu-trigger-asChild-child',\n          'DropdownMenuTrigger: `asChild` expects a single React element child; rendering nothing.',\n        )\n        return null\n      }\n      const child = children as React.ReactElement<\n        Record<string, unknown>\n      > & { ref?: React.Ref<HTMLButtonElement> }\n      const childOnClick = child.props.onClick as\n        | ((e: React.MouseEvent<HTMLButtonElement>) => void)\n        | undefined\n      const childRef = child.ref\n      const mergedProps = {\n        ...triggerProps,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n          childOnClick?.(e)\n          if (!e.defaultPrevented) handleClick(e)\n        },\n        ref: (node: HTMLButtonElement | null) => {\n          setRefs(node)\n          if (typeof childRef === 'function') childRef(node)\n          else if (childRef) childRef.current = node\n        },\n      }\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      return React.cloneElement(child, mergedProps as any)\n    }\n\n    return React.createElement('button', { ref: setRefs, ...triggerProps }, children)\n  },\n)\n\n// ---------------------------------------------------------------------------\n// Positioning\n// ---------------------------------------------------------------------------\n\nexport type DropdownMenuAlign = 'start' | 'center' | 'end'\n\nconst DEFAULT_SIDE_OFFSET = 4\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\n/**\n * Fixed-position coordinates that place a menu under its trigger, aligned to\n * the trigger's start, centre or end edge. Pure, so it is unit-testable.\n */\nexport function computeMenuPosition(\n  trigger: { top: number; bottom: number; left: number; right: number; width: number },\n  contentWidth: number,\n  align: DropdownMenuAlign,\n  sideOffset: number,\n): React.CSSProperties {\n  const left =\n    align === 'end'\n      ? trigger.right - contentWidth\n      : align === 'center'\n        ? trigger.left + trigger.width / 2 - contentWidth / 2\n        : trigger.left\n  return { position: 'fixed', top: trigger.bottom + sideOffset, left: Math.max(0, left), minWidth: trigger.width }\n}\n\n// ---------------------------------------------------------------------------\n// DropdownMenuContent\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Horizontal alignment to the trigger. Defaults to `start`. */\n  align?: DropdownMenuAlign\n  /** Gap between trigger and menu in px. Defaults to 4. */\n  sideOffset?: number\n}\n\nexport const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContentProps>(\n  function DropdownMenuContent(\n    { className, children, onKeyDown, align = 'start', sideOffset = DEFAULT_SIDE_OFFSET, style, ...props },\n    forwardedRef,\n  ) {\n    const { open, onOpenChange, contentId, triggerRef } = useDropdownMenuContext()\n    const contentRef = React.useRef<HTMLDivElement | null>(null)\n    const ref = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        contentRef.current = node\n        if (typeof forwardedRef === 'function') forwardedRef(node)\n        else if (forwardedRef) forwardedRef.current = node\n      },\n      [forwardedRef],\n    )\n    const [position, setPosition] = React.useState<React.CSSProperties | null>(null)\n\n    // The content is portalled to <body>, so anchor it to the trigger with\n    // fixed coordinates, and follow the trigger on scroll / resize.\n    useIsomorphicLayoutEffect(() => {\n      if (!open) return\n      const update = () => {\n        const trigger = triggerRef.current\n        const content = contentRef.current\n        if (!trigger) return\n        setPosition(\n          computeMenuPosition(trigger.getBoundingClientRect(), content?.offsetWidth ?? 0, align, sideOffset),\n        )\n      }\n      update()\n      window.addEventListener('resize', update)\n      window.addEventListener('scroll', update, true)\n      return () => {\n        window.removeEventListener('resize', update)\n        window.removeEventListener('scroll', update, true)\n      }\n    }, [open, align, sideOffset, triggerRef])\n\n    // Close on a pointer press outside the menu and its trigger.\n    React.useEffect(() => {\n      if (!open) return\n      const onPointerDown = (event: PointerEvent) => {\n        const target = event.target as Node\n        if (contentRef.current?.contains(target) || triggerRef.current?.contains(target)) return\n        onOpenChange(false)\n      }\n      document.addEventListener('pointerdown', onPointerDown)\n      return () => document.removeEventListener('pointerdown', onPointerDown)\n    }, [open, onOpenChange, triggerRef])\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const handler = createKeyboardHandler({\n        Escape: (ev) => {\n          ev.preventDefault()\n          onOpenChange(false)\n        },\n      })\n      handler(e.nativeEvent)\n      onKeyDown?.(e)\n    }\n\n    if (!open) return null\n\n    const content = React.createElement(\n      'div',\n      {\n        ref,\n        role: 'menu',\n        id: contentId,\n        'data-state': open ? 'open' : 'closed',\n        className: cn(menuContentVariants(), className),\n        style: position ? { ...position, ...style } : style,\n        'data-align': align,\n        onKeyDown: handleKeyDown,\n        tabIndex: -1,\n        ...props,\n      },\n      children,\n    )\n\n    // Render via portal if document is available (client-side)\n    if (typeof document !== 'undefined') {\n      return ReactDOM.createPortal(content, document.body)\n    }\n\n    // SSR fallback: render inline\n    return content\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuItem\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  disabled?: boolean\n  onSelect?: () => void\n}\n\nexport const DropdownMenuItem = React.forwardRef<HTMLDivElement, DropdownMenuItemProps>(\n  function DropdownMenuItem({ className, disabled, onSelect, onClick, children, ...props }, ref) {\n    const { onOpenChange } = useDropdownMenuContext()\n\n    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n      onSelect?.()\n      onOpenChange(false)\n      onClick?.(e)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        onSelect?.()\n        onOpenChange(false)\n      }\n    }\n\n    return React.createElement(\n      'div',\n      {\n        ref,\n        role: 'menuitem',\n        tabIndex: disabled ? -1 : 0,\n        'data-disabled': disabled ? '' : undefined,\n        'aria-disabled': disabled || undefined,\n        className: cn(menuItemVariants(), className),\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        ...props,\n      },\n      children,\n    )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuSeparator\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DropdownMenuSeparator = React.forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(\n  function DropdownMenuSeparator({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      role: 'separator',\n      className: cn('-mx-1 my-1 h-px bg-muted', className),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuLabel\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DropdownMenuLabel = React.forwardRef<HTMLDivElement, DropdownMenuLabelProps>(\n  function DropdownMenuLabel({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      className: cn('px-2 py-1.5 text-sm font-semibold', className),\n      ...props,\n    })\n  },\n)\n"],
-  "mappings": "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",
+  "sourcesContent": ["import type { AccessibilityProps, KeyboardHandlerMap } from '@refraction-ui/shared'\nimport { createMachine, Keys, generateId } from '@refraction-ui/shared'\n\nexport interface DropdownMenuProps {\n  /** Whether the menu is open (controlled) */\n  open?: boolean\n  /** Whether the menu starts open (uncontrolled) */\n  defaultOpen?: boolean\n  /** Callback when open state changes */\n  onOpenChange?: (open: boolean) => void\n}\n\nexport interface MenuItemProps {\n  /** Whether the item is disabled */\n  disabled?: boolean\n  /** Callback when the item is selected */\n  onSelect?: () => void\n}\n\nexport interface DropdownMenuState {\n  open: boolean\n}\n\nexport interface DropdownMenuAPI {\n  /** Current menu state */\n  state: DropdownMenuState\n  /** ARIA attributes for the trigger button */\n  triggerProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** ARIA attributes for the menu content */\n  contentProps: Partial<AccessibilityProps> & Record<string, unknown>\n  /** Factory for menu item props */\n  getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown>\n  /** Open the menu */\n  open(): void\n  /** Close the menu */\n  close(): void\n  /** Toggle the menu */\n  toggle(): void\n  /** Keyboard handlers for the menu */\n  keyboardHandlers: KeyboardHandlerMap\n  /** Generated IDs for aria linking */\n  ids: {\n    content: string\n  }\n}\n\nexport function createDropdownMenu(props: DropdownMenuProps = {}): DropdownMenuAPI {\n  const { open: controlledOpen, defaultOpen = false, onOpenChange } = props\n\n  const machine = createMachine<'open' | 'closed', 'OPEN' | 'CLOSE'>({\n    initial: controlledOpen ?? defaultOpen ? 'open' : 'closed',\n    states: {\n      closed: { on: { OPEN: 'open' } },\n      open: { on: { CLOSE: 'closed' } },\n    },\n  })\n\n  const contentId = generateId('rfr-dropdown-menu')\n\n  function isOpen(): boolean {\n    if (controlledOpen !== undefined) return controlledOpen\n    return machine.matches('open')\n  }\n\n  function openMenu(): void {\n    machine.send('OPEN')\n    onOpenChange?.(true)\n  }\n\n  function closeMenu(): void {\n    machine.send('CLOSE')\n    onOpenChange?.(false)\n  }\n\n  function toggleMenu(): void {\n    if (isOpen()) {\n      closeMenu()\n    } else {\n      openMenu()\n    }\n  }\n\n  function getItemProps(item: MenuItemProps): Partial<AccessibilityProps> & Record<string, unknown> {\n    return {\n      role: 'menuitem',\n      tabIndex: item.disabled ? -1 : 0,\n      'data-disabled': item.disabled ? '' : undefined,\n      'aria-disabled': item.disabled || undefined,\n    }\n  }\n\n  const keyboardHandlers: KeyboardHandlerMap = {\n    [Keys.Escape]: (e: KeyboardEvent) => {\n      e.preventDefault()\n      closeMenu()\n    },\n    [Keys.ArrowDown]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.ArrowUp]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.Enter]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.Home]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n    [Keys.End]: (e: KeyboardEvent) => {\n      e.preventDefault()\n    },\n  }\n\n  const triggerProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    'aria-expanded': isOpen(),\n    'aria-controls': contentId,\n    'aria-haspopup': 'menu',\n  }\n\n  const contentProps: Partial<AccessibilityProps> & Record<string, unknown> = {\n    role: 'menu',\n    id: contentId,\n    'data-state': isOpen() ? 'open' : 'closed',\n  }\n\n  return {\n    state: { open: isOpen() },\n    triggerProps,\n    contentProps,\n    getItemProps,\n    open: openMenu,\n    close: closeMenu,\n    toggle: toggleMenu,\n    keyboardHandlers,\n    ids: {\n      content: contentId,\n    },\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\n\nexport const menuContentVariants = cva({\n  base: 'z-50 rounded-md border bg-popover shadow-md',\n})\n\nexport const menuItemVariants = cva({\n  base: 'relative flex cursor-default items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',\n})\n", "import * as React from 'react'\nimport * as ReactDOM from 'react-dom'\nimport {\n  menuContentVariants,\n  menuItemVariants,\n  type DropdownMenuProps as CoreDropdownMenuProps,\n  type MenuItemProps as CoreMenuItemProps,\n} from '@refraction-ui/dropdown-menu'\nimport { cn, createKeyboardHandler, devWarn } from '@refraction-ui/shared'\n\n// ---------------------------------------------------------------------------\n// Context\n// ---------------------------------------------------------------------------\n\ninterface DropdownMenuContextValue {\n  open: boolean\n  onOpenChange: (open: boolean) => void\n  contentId: string\n  /** The trigger element, so the portalled content can anchor to it. */\n  triggerRef: React.MutableRefObject<HTMLElement | null>\n}\n\nconst DropdownMenuContext = React.createContext<DropdownMenuContextValue | null>(null)\n\nfunction useDropdownMenuContext(): DropdownMenuContextValue {\n  const ctx = React.useContext(DropdownMenuContext)\n  if (!ctx) {\n    devWarn(\n      'react-dropdown-menu/context-outside-provider',\n      'DropdownMenu compound components (DropdownMenuTrigger/DropdownMenuContent/DropdownMenuItem/etc.) must be rendered inside a <DropdownMenu>. The missing DropdownMenuContext makes this throw.',\n    )\n    throw new Error('DropdownMenu compound components must be used within <DropdownMenu>')\n  }\n  return ctx\n}\n\n// ---------------------------------------------------------------------------\n// DropdownMenu (root provider)\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuProps {\n  open?: boolean\n  defaultOpen?: boolean\n  onOpenChange?: (open: boolean) => void\n  children?: React.ReactNode\n}\n\nexport function DropdownMenu({\n  open: controlledOpen,\n  defaultOpen = false,\n  onOpenChange,\n  children,\n}: DropdownMenuProps) {\n  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen)\n  const isControlled = controlledOpen !== undefined\n  const open = isControlled ? controlledOpen : uncontrolledOpen\n\n  const handleOpenChange = React.useCallback(\n    (next: boolean) => {\n      if (!isControlled) {\n        setUncontrolledOpen(next)\n      }\n      onOpenChange?.(next)\n    },\n    [isControlled, onOpenChange],\n  )\n\n  // React IDs agree across SSR and hydration, unlike the core's process counter.\n  const contentId = `rfr-dropdown-menu-${React.useId()}`\n\n  const triggerRef = React.useRef<HTMLElement | null>(null)\n\n  const ctx = React.useMemo<DropdownMenuContextValue>(\n    () => ({\n      open,\n      onOpenChange: handleOpenChange,\n      contentId,\n      triggerRef,\n    }),\n    [open, handleOpenChange, contentId],\n  )\n\n  return React.createElement(DropdownMenuContext.Provider, { value: ctx }, children)\n}\n\n// ---------------------------------------------------------------------------\n// DropdownMenuTrigger\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuTriggerProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /** Merge the trigger's props/behavior onto the child element instead of\n   * rendering a `<button>` around it (Radix-style `asChild`). Use it with\n   * styled triggers like `<Button>` — otherwise you'd nest a button in a\n   * button (invalid HTML and a hydration error). */\n  asChild?: boolean\n}\n\nexport const DropdownMenuTrigger = React.forwardRef<HTMLButtonElement, DropdownMenuTriggerProps>(\n  function DropdownMenuTrigger({ asChild = false, onClick, children, ...props }, ref) {\n    const { open, onOpenChange, contentId, triggerRef } = useDropdownMenuContext()\n    const setRefs = (node: HTMLButtonElement | null) => {\n      triggerRef.current = node\n      if (typeof ref === 'function') ref(node)\n      else if (ref) ref.current = node\n    }\n\n    const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {\n      onOpenChange(!open)\n      onClick?.(e)\n    }\n\n    const triggerProps = {\n      type: 'button' as const,\n      'aria-expanded': open,\n      'aria-controls': contentId,\n      'aria-haspopup': 'menu' as const,\n      onClick: handleClick,\n      ...props,\n    }\n\n    if (asChild) {\n      if (!React.isValidElement(children)) {\n        devWarn(\n          'dropdown-menu-trigger-asChild-child',\n          'DropdownMenuTrigger: `asChild` expects a single React element child; rendering nothing.',\n        )\n        return null\n      }\n      const child = children as React.ReactElement<\n        Record<string, unknown>\n      > & { ref?: React.Ref<HTMLButtonElement> }\n      const childOnClick = child.props.onClick as\n        | ((e: React.MouseEvent<HTMLButtonElement>) => void)\n        | undefined\n      const childRef = child.ref\n      const mergedProps = {\n        ...triggerProps,\n        onClick: (e: React.MouseEvent<HTMLButtonElement>) => {\n          childOnClick?.(e)\n          if (!e.defaultPrevented) handleClick(e)\n        },\n        ref: (node: HTMLButtonElement | null) => {\n          setRefs(node)\n          if (typeof childRef === 'function') childRef(node)\n          else if (childRef) childRef.current = node\n        },\n      }\n      // eslint-disable-next-line @typescript-eslint/no-explicit-any\n      return React.cloneElement(child, mergedProps as any)\n    }\n\n    return React.createElement('button', { ref: setRefs, ...triggerProps }, children)\n  },\n)\n\n// ---------------------------------------------------------------------------\n// Positioning\n// ---------------------------------------------------------------------------\n\nexport type DropdownMenuAlign = 'start' | 'center' | 'end'\n\nconst DEFAULT_SIDE_OFFSET = 4\n\nconst useIsomorphicLayoutEffect = typeof window !== 'undefined' ? React.useLayoutEffect : React.useEffect\n\n/**\n * Fixed-position coordinates that place a menu under its trigger, aligned to\n * the trigger's start, centre or end edge. Pure, so it is unit-testable.\n */\nexport function computeMenuPosition(\n  trigger: { top: number; bottom: number; left: number; right: number; width: number },\n  contentWidth: number,\n  align: DropdownMenuAlign,\n  sideOffset: number,\n): React.CSSProperties {\n  const left =\n    align === 'end'\n      ? trigger.right - contentWidth\n      : align === 'center'\n        ? trigger.left + trigger.width / 2 - contentWidth / 2\n        : trigger.left\n  return { position: 'fixed', top: trigger.bottom + sideOffset, left: Math.max(0, left), minWidth: trigger.width }\n}\n\n// ---------------------------------------------------------------------------\n// DropdownMenuContent\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuContentProps extends React.HTMLAttributes<HTMLDivElement> {\n  /** Horizontal alignment to the trigger. Defaults to `start`. */\n  align?: DropdownMenuAlign\n  /** Gap between trigger and menu in px. Defaults to 4. */\n  sideOffset?: number\n}\n\nexport const DropdownMenuContent = React.forwardRef<HTMLDivElement, DropdownMenuContentProps>(\n  function DropdownMenuContent(\n    { className, children, onKeyDown, align = 'start', sideOffset = DEFAULT_SIDE_OFFSET, style, ...props },\n    forwardedRef,\n  ) {\n    const { open, onOpenChange, contentId, triggerRef } = useDropdownMenuContext()\n    const contentRef = React.useRef<HTMLDivElement | null>(null)\n    const ref = React.useCallback(\n      (node: HTMLDivElement | null) => {\n        contentRef.current = node\n        if (typeof forwardedRef === 'function') forwardedRef(node)\n        else if (forwardedRef) forwardedRef.current = node\n      },\n      [forwardedRef],\n    )\n    const [position, setPosition] = React.useState<React.CSSProperties | null>(null)\n\n    // The content is portalled to <body>, so anchor it to the trigger with\n    // fixed coordinates, and follow the trigger on scroll / resize.\n    useIsomorphicLayoutEffect(() => {\n      if (!open) return\n      const update = () => {\n        const trigger = triggerRef.current\n        const content = contentRef.current\n        if (!trigger) return\n        setPosition(\n          computeMenuPosition(trigger.getBoundingClientRect(), content?.offsetWidth ?? 0, align, sideOffset),\n        )\n      }\n      update()\n      window.addEventListener('resize', update)\n      window.addEventListener('scroll', update, true)\n      return () => {\n        window.removeEventListener('resize', update)\n        window.removeEventListener('scroll', update, true)\n      }\n    }, [open, align, sideOffset, triggerRef])\n\n    // Close on a pointer press outside the menu and its trigger.\n    React.useEffect(() => {\n      if (!open) return\n      const onPointerDown = (event: PointerEvent) => {\n        const target = event.target as Node\n        if (contentRef.current?.contains(target) || triggerRef.current?.contains(target)) return\n        onOpenChange(false)\n      }\n      document.addEventListener('pointerdown', onPointerDown)\n      return () => document.removeEventListener('pointerdown', onPointerDown)\n    }, [open, onOpenChange, triggerRef])\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      const handler = createKeyboardHandler({\n        Escape: (ev) => {\n          ev.preventDefault()\n          onOpenChange(false)\n        },\n      })\n      handler(e.nativeEvent)\n      onKeyDown?.(e)\n    }\n\n    if (!open) return null\n\n    const content = React.createElement(\n      'div',\n      {\n        ref,\n        role: 'menu',\n        id: contentId,\n        'data-state': open ? 'open' : 'closed',\n        className: cn(menuContentVariants(), className),\n        style: position ? { ...position, ...style } : style,\n        'data-align': align,\n        onKeyDown: handleKeyDown,\n        tabIndex: -1,\n        ...props,\n      },\n      children,\n    )\n\n    // Render via portal if document is available (client-side)\n    if (typeof document !== 'undefined') {\n      return ReactDOM.createPortal(content, document.body)\n    }\n\n    // SSR fallback: render inline\n    return content\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuItem\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuItemProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'onSelect'> {\n  disabled?: boolean\n  onSelect?: () => void\n}\n\nexport const DropdownMenuItem = React.forwardRef<HTMLDivElement, DropdownMenuItemProps>(\n  function DropdownMenuItem({ className, disabled, onSelect, onClick, children, ...props }, ref) {\n    const { onOpenChange } = useDropdownMenuContext()\n\n    const handleClick = (e: React.MouseEvent<HTMLDivElement>) => {\n      if (disabled) return\n      onSelect?.()\n      onOpenChange(false)\n      onClick?.(e)\n    }\n\n    const handleKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {\n      if (disabled) return\n      if (e.key === 'Enter' || e.key === ' ') {\n        e.preventDefault()\n        onSelect?.()\n        onOpenChange(false)\n      }\n    }\n\n    return React.createElement(\n      'div',\n      {\n        ref,\n        role: 'menuitem',\n        tabIndex: disabled ? -1 : 0,\n        'data-disabled': disabled ? '' : undefined,\n        'aria-disabled': disabled || undefined,\n        className: cn(menuItemVariants(), className),\n        onClick: handleClick,\n        onKeyDown: handleKeyDown,\n        ...props,\n      },\n      children,\n    )\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuSeparator\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuSeparatorProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DropdownMenuSeparator = React.forwardRef<HTMLDivElement, DropdownMenuSeparatorProps>(\n  function DropdownMenuSeparator({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      role: 'separator',\n      className: cn('-mx-1 my-1 h-px bg-muted', className),\n      ...props,\n    })\n  },\n)\n\n// ---------------------------------------------------------------------------\n// DropdownMenuLabel\n// ---------------------------------------------------------------------------\n\nexport interface DropdownMenuLabelProps extends React.HTMLAttributes<HTMLDivElement> {}\n\nexport const DropdownMenuLabel = React.forwardRef<HTMLDivElement, DropdownMenuLabelProps>(\n  function DropdownMenuLabel({ className, ...props }, ref) {\n    return React.createElement('div', {\n      ref,\n      className: cn('px-2 py-1.5 text-sm font-semibold', className),\n      ...props,\n    })\n  },\n)\n"],
+  "mappings": "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",
   "names": ["DropdownMenuTrigger", "DropdownMenuContent", "content", "DropdownMenuItem", "DropdownMenuSeparator", "DropdownMenuLabel"]
 }

package/dist/react-page-header.js

@@ -15,7 +15,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";

package/dist/react-page-header.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../page-header/src/page-header.ts", "../../page-header/src/page-header.styles.ts", "../../react-page-header/src/page-header.tsx"],
-  "sourcesContent": ["/** Heading element used for the page title. */\nexport type PageHeaderTitleLevel = 'h1' | 'h2' | 'h3'\n\nexport interface PageHeaderProps {\n  /** Whether an actions slot will be rendered. */\n  hasActions?: boolean\n}\n\nexport interface PageHeaderAPI {\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic data attributes for a PageHeader — the heading\n * cluster at the top of an application page (kicker, title, description and a\n * trailing actions row). Unlike SectionHead (a centred marketing heading) it is\n * sized for dense app chrome and never centres.\n */\nexport function createPageHeader(props: PageHeaderProps = {}): PageHeaderAPI {\n  return {\n    dataAttributes: {\n      'data-slot': 'page-header',\n      'data-has-actions': props.hasActions ? 'true' : 'false',\n    },\n  }\n}\n", "/**\n * Root: text cluster on the leading edge, actions on the trailing edge; wraps\n * on narrow screens. Carries no outer margin — the page layout spaces it.\n */\nexport const pageHeaderClass = 'flex flex-wrap items-start justify-between gap-4'\n\n/** Text cluster (kicker, title, description). */\nexport const pageHeaderTextClass = 'flex min-w-0 flex-1 flex-col gap-1'\n\n/** Small uppercase eyebrow above the title. */\nexport const pageHeaderKickerClass =\n  'break-words text-[11px] uppercase tracking-wider text-muted-foreground'\n\n/** Title — app-sized, not a marketing display size. */\nexport const pageHeaderTitleClass = 'break-words text-xl font-semibold text-foreground'\n\n/** Supporting copy under the title, capped at a readable measure. */\nexport const pageHeaderDescriptionClass = 'max-w-prose text-sm text-muted-foreground'\n\n/** Trailing actions row. */\nexport const pageHeaderActionsClass = 'flex flex-none flex-wrap items-center gap-2'\n", "import * as React from 'react'\nimport {\n  createPageHeader,\n  pageHeaderClass,\n  pageHeaderTextClass,\n  pageHeaderKickerClass,\n  pageHeaderTitleClass,\n  pageHeaderDescriptionClass,\n  pageHeaderActionsClass,\n  type PageHeaderTitleLevel,\n} from '@refraction-ui/page-header'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { PageHeaderTitleLevel }\n\nexport interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {\n  /** Optional eyebrow rendered above the title. */\n  kicker?: React.ReactNode\n  /** The page title (required). */\n  title: React.ReactNode\n  /** Optional supporting copy under the title. */\n  description?: React.ReactNode\n  /** Optional actions (buttons, menus) on the trailing edge. */\n  actions?: React.ReactNode\n  /** Heading element for the title. Defaults to `h1`. */\n  as?: PageHeaderTitleLevel\n}\n\n/**\n * PageHeader — the heading cluster at the top of an application page: kicker,\n * title, description and a trailing actions row. Renders a `<header>`.\n */\nexport const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(function PageHeader(\n  { kicker, title, description, actions, as: Title = 'h1', className, ...props },\n  ref,\n) {\n  const { dataAttributes } = createPageHeader({ hasActions: actions != null })\n  return (\n    <header ref={ref} className={cn(pageHeaderClass, className)} {...dataAttributes} {...props}>\n      <div className={pageHeaderTextClass}>\n        {kicker != null && <p className={pageHeaderKickerClass}>{kicker}</p>}\n        <Title className={pageHeaderTitleClass}>{title}</Title>\n        {description != null && <div className={pageHeaderDescriptionClass}>{description}</div>}\n      </div>\n      {actions != null && <div className={pageHeaderActionsClass}>{actions}</div>}\n    </header>\n  )\n})\n"],
+  "sourcesContent": ["/** Heading element used for the page title. */\nexport type PageHeaderTitleLevel = 'h1' | 'h2' | 'h3'\n\nexport interface PageHeaderProps {\n  /** Whether an actions slot will be rendered. */\n  hasActions?: boolean\n}\n\nexport interface PageHeaderAPI {\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Build the framework-agnostic data attributes for a PageHeader — the heading\n * cluster at the top of an application page (kicker, title, description and a\n * trailing actions row). Unlike SectionHead (a centred marketing heading) it is\n * sized for dense app chrome and never centres.\n */\nexport function createPageHeader(props: PageHeaderProps = {}): PageHeaderAPI {\n  return {\n    dataAttributes: {\n      'data-slot': 'page-header',\n      'data-has-actions': props.hasActions ? 'true' : 'false',\n    },\n  }\n}\n", "/**\n * Root: text cluster on the leading edge, actions on the trailing edge; wraps\n * on narrow screens. Carries no outer margin — the page layout spaces it.\n */\nexport const pageHeaderClass = 'flex flex-wrap items-start justify-between gap-4'\n\n/** Give text a preferred width so actions wrap before squeezing the heading. */\nexport const pageHeaderTextClass = 'flex min-w-0 basis-64 grow flex-col gap-1'\n\n/** Small uppercase eyebrow above the title. */\nexport const pageHeaderKickerClass =\n  'break-words text-[11px] uppercase tracking-wider text-muted-foreground'\n\n/** Title — app-sized, not a marketing display size. */\nexport const pageHeaderTitleClass = 'break-words text-xl font-semibold text-foreground'\n\n/** Supporting copy under the title, capped at a readable measure. */\nexport const pageHeaderDescriptionClass = 'max-w-prose text-sm text-muted-foreground'\n\n/** Trailing actions row. */\nexport const pageHeaderActionsClass = 'flex flex-none flex-wrap items-center gap-2'\n", "import * as React from 'react'\nimport {\n  createPageHeader,\n  pageHeaderClass,\n  pageHeaderTextClass,\n  pageHeaderKickerClass,\n  pageHeaderTitleClass,\n  pageHeaderDescriptionClass,\n  pageHeaderActionsClass,\n  type PageHeaderTitleLevel,\n} from '@refraction-ui/page-header'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { PageHeaderTitleLevel }\n\nexport interface PageHeaderProps extends Omit<React.HTMLAttributes<HTMLElement>, 'title'> {\n  /** Optional eyebrow rendered above the title. */\n  kicker?: React.ReactNode\n  /** The page title (required). */\n  title: React.ReactNode\n  /** Optional supporting copy under the title. */\n  description?: React.ReactNode\n  /** Optional actions (buttons, menus) on the trailing edge. */\n  actions?: React.ReactNode\n  /** Heading element for the title. Defaults to `h1`. */\n  as?: PageHeaderTitleLevel\n}\n\n/**\n * PageHeader — the heading cluster at the top of an application page: kicker,\n * title, description and a trailing actions row. Renders a `<header>`.\n */\nexport const PageHeader = React.forwardRef<HTMLElement, PageHeaderProps>(function PageHeader(\n  { kicker, title, description, actions, as: Title = 'h1', className, ...props },\n  ref,\n) {\n  const { dataAttributes } = createPageHeader({ hasActions: actions != null })\n  return (\n    <header ref={ref} className={cn(pageHeaderClass, className)} {...dataAttributes} {...props}>\n      <div className={pageHeaderTextClass}>\n        {kicker != null && <p className={pageHeaderKickerClass}>{kicker}</p>}\n        <Title className={pageHeaderTitleClass}>{title}</Title>\n        {description != null && <div className={pageHeaderDescriptionClass}>{description}</div>}\n      </div>\n      {actions != null && <div className={pageHeaderActionsClass}>{actions}</div>}\n    </header>\n  )\n})\n"],
   "mappings": ";;;;;;;;AAmBO,SAAS,iBAAiB,QAAyB,CAAA,GAAmB;AAC3E,SAAO;IACL,gBAAgB;MACd,aAAa;MACb,oBAAoB,MAAM,aAAa,SAAS;IAAA;EAClD;AAEJ;ACtBO,IAAM,kBAAkB;AAGxB,IAAM,sBAAsB;AAG5B,IAAM,wBACX;AAGK,IAAM,uBAAuB;AAG7B,IAAM,6BAA6B;AAGnC,IAAM,yBAAyB;;;;ACY/B,IAAM,aAAmB,iBAAyC,SAASA,YAChF,EAAE,QAAQ,OAAO,aAAa,SAAS,IAAI,QAAQ,MAAM,WAAW,GAAG,MAAA,GACvE,KACA;AACA,QAAM,EAAE,eAAA,IAAmB,iBAAiB,EAAE,YAAY,WAAW,KAAA,CAAM;AAC3E,SACE,qBAAC,UAAA,EAAO,KAAU,WAAW,GAAG,iBAAiB,SAAS,GAAI,GAAG,gBAAiB,GAAG,OACnF,UAAA;IAAA,qBAAC,OAAA,EAAI,WAAW,qBACb,UAAA;MAAA,UAAU,QAAQ,oBAAC,KAAA,EAAE,WAAW,uBAAwB,UAAA,OAAA,CAAO;MAChE,oBAAC,OAAA,EAAM,WAAW,sBAAuB,UAAA,MAAA,CAAM;MAC9C,eAAe,QAAQ,oBAAC,OAAA,EAAI,WAAW,4BAA6B,UAAA,YAAA,CAAY;IAAA,EAAA,CACnF;IACC,WAAW,QAAQ,oBAAC,OAAA,EAAI,WAAW,wBAAyB,UAAA,QAAA,CAAQ;EAAA,EAAA,CACvE;AAEJ,CAAC;",
   "names": ["PageHeader"]
 }