silver-ui 0.4.0 → 0.5.0

package/dist/chunk-KVEXSDEM.js

@@ -0,0 +1,214 @@
+import { resolveDismissBehavior, useBackdropDismiss } from './chunk-BUYZZOOU.js';
+import { useScrollLock } from './chunk-PZHRFASW.js';
+import { mergeRefs } from './chunk-SGLIDI6R.js';
+import { sva } from './chunk-IAVZKGZS.js';
+import { cx } from './chunk-PPNETWIP.js';
+import { useRef, useEffect, useState, useCallback, useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+// src/components/Drawer/Drawer.recipe.ts
+var drawerRecipe = sva({
+  slots: ["root", "inner"],
+  base: {
+    root: {
+      position: "fixed",
+      p: 0,
+      borderWidth: 0,
+      bg: "bg",
+      color: "fg",
+      boxShadow: "xl",
+      flexDirection: "column",
+      overscrollBehavior: "contain",
+      _backdrop: {
+        bg: "overlay.scrim",
+        backdropFilter: "blur(2px)"
+      },
+      _focusVisible: {
+        outline: "none"
+      }
+    },
+    inner: {
+      display: "flex",
+      flexDirection: "column",
+      flex: "1 1 auto",
+      minH: 0,
+      overflow: "hidden"
+    }
+  },
+  variants: {
+    // When closed, the native <dialog> UA style (display: none) applies; opening
+    // switches on the flex column layout.
+    isOpen: {
+      true: { root: { display: "flex" } },
+      false: {}
+    },
+    placement: {
+      start: {
+        root: {
+          inset: 0,
+          marginInlineEnd: "auto",
+          h: "100dvh",
+          maxH: "100dvh",
+          borderRadius: 0,
+          borderInlineEndWidth: "default",
+          borderInlineEndStyle: "solid",
+          borderInlineEndColor: "border"
+        }
+      },
+      end: {
+        root: {
+          inset: 0,
+          marginInlineStart: "auto",
+          h: "100dvh",
+          maxH: "100dvh",
+          borderRadius: 0,
+          borderInlineStartWidth: "default",
+          borderInlineStartStyle: "solid",
+          borderInlineStartColor: "border"
+        }
+      },
+      top: {
+        root: {
+          inset: 0,
+          mb: "auto",
+          w: "100dvw",
+          maxW: "100dvw",
+          borderRadius: 0,
+          borderBlockEndWidth: "default",
+          borderBlockEndStyle: "solid",
+          borderBlockEndColor: "border"
+        }
+      },
+      bottom: {
+        root: {
+          inset: 0,
+          mt: "auto",
+          w: "100dvw",
+          maxW: "100dvw",
+          borderRadius: 0,
+          borderBlockStartWidth: "default",
+          borderBlockStartStyle: "solid",
+          borderBlockStartColor: "border"
+        }
+      }
+    }
+  },
+  defaultVariants: {
+    isOpen: false,
+    placement: "end"
+  }
+});
+function formatSize(value) {
+  return typeof value === "number" ? `${value}px` : value;
+}
+var DEFAULT_SIZES = {
+  start: 320,
+  end: 320,
+  top: "40vh",
+  bottom: "40vh"
+};
+function getSizeStyle(placement, size) {
+  const formatted = formatSize(size);
+  if (placement === "start" || placement === "end") {
+    return { width: formatted, maxWidth: "100dvw" };
+  }
+  return { height: formatted, maxHeight: "100dvh" };
+}
+function Drawer({
+  isOpen,
+  label,
+  onOpenChange,
+  placement = "end",
+  size,
+  dismissBehavior,
+  children,
+  className,
+  "data-testid": dataTestId,
+  style,
+  ref
+}) {
+  const dialogRef = useRef(null);
+  const triggerRef = useRef(null);
+  const { isBackdropDismissEnabled, isEscapeDismissEnabled } = resolveDismissBehavior(dismissBehavior);
+  const backdropDismiss = useBackdropDismiss({
+    isEnabled: isBackdropDismissEnabled,
+    onDismiss: () => onOpenChange(false)
+  });
+  useEffect(() => {
+    const dialog = dialogRef.current;
+    if (dialog == null) {
+      return;
+    }
+    if (isOpen) {
+      triggerRef.current = document.activeElement;
+      if (!dialog.open) {
+        dialog.showModal();
+      }
+      dialog.querySelector('[data-autofocus="true"], [autofocus]')?.focus();
+    } else if (dialog.open) {
+      dialog.close();
+      triggerRef.current?.focus();
+      triggerRef.current = null;
+    }
+  }, [isOpen]);
+  useScrollLock(isOpen);
+  const effectiveSize = size ?? DEFAULT_SIZES[placement];
+  const sizeStyle = getSizeStyle(placement, effectiveSize);
+  const classes = drawerRecipe({ isOpen, placement });
+  return (
+    // eslint-disable-next-line jsx-a11y-x/click-events-have-key-events, jsx-a11y-x/no-noninteractive-element-interactions -- native dialog backdrop clicks close the drawer
+    /* @__PURE__ */ jsx(
+      "dialog",
+      {
+        "aria-label": label,
+        className: cx(classes.root, className),
+        "data-testid": dataTestId,
+        onCancel: (event) => {
+          event.preventDefault();
+          if (isEscapeDismissEnabled) {
+            onOpenChange(false);
+          }
+        },
+        onClick: backdropDismiss.onClick,
+        onPointerDown: backdropDismiss.onPointerDown,
+        ref: mergeRefs(ref, dialogRef),
+        style: { ...sizeStyle, ...style },
+        children: /* @__PURE__ */ jsx("div", { className: classes.inner, children })
+      }
+    )
+  );
+}
+Drawer.displayName = "Drawer";
+function useDrawer(defaultOptions) {
+  const [isOpen, setIsOpen] = useState(false);
+  const [content, setContent] = useState(null);
+  const [callOptions, setCallOptions] = useState();
+  const show = useCallback(
+    (nextContent, nextOptions) => {
+      setContent(nextContent);
+      setCallOptions(nextOptions);
+      setIsOpen(true);
+    },
+    []
+  );
+  const hide = useCallback(() => setIsOpen(false), []);
+  const element = useMemo(
+    () => /* @__PURE__ */ jsx(
+      Drawer,
+      {
+        ...defaultOptions ?? {},
+        ...callOptions ?? {},
+        isOpen,
+        label: callOptions?.label ?? defaultOptions?.label ?? "Drawer",
+        onOpenChange: setIsOpen,
+        children: content
+      }
+    ),
+    [content, defaultOptions, isOpen, callOptions]
+  );
+  return { element, hide, isOpen, show };
+}
+
+export { Drawer, useDrawer };
+//# sourceMappingURL=chunk-KVEXSDEM.js.map
+//# sourceMappingURL=chunk-KVEXSDEM.js.map

package/dist/chunk-KVEXSDEM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Drawer/Drawer.recipe.ts","../src/components/Drawer/Drawer.tsx","../src/components/Drawer/useDrawer.tsx"],"names":["jsx"],"mappings":"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","file":"chunk-KVEXSDEM.js","sourcesContent":["import {sva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const drawerRecipe = sva({\n  slots: ['root', 'inner'],\n  base: {\n    root: {\n      position: 'fixed',\n      p: 0,\n      borderWidth: 0,\n      bg: 'bg',\n      color: 'fg',\n      boxShadow: 'xl',\n      flexDirection: 'column',\n      overscrollBehavior: 'contain',\n      _backdrop: {\n        bg: 'overlay.scrim',\n        backdropFilter: 'blur(2px)',\n      },\n      _focusVisible: {\n        outline: 'none',\n      },\n    },\n    inner: {\n      display: 'flex',\n      flexDirection: 'column',\n      flex: '1 1 auto',\n      minH: 0,\n      overflow: 'hidden',\n    },\n  },\n  variants: {\n    // When closed, the native <dialog> UA style (display: none) applies; opening\n    // switches on the flex column layout.\n    isOpen: {\n      true: {root: {display: 'flex'}},\n      false: {},\n    },\n    placement: {\n      start: {\n        root: {\n          inset: 0,\n          marginInlineEnd: 'auto',\n          h: '100dvh',\n          maxH: '100dvh',\n          borderRadius: 0,\n          borderInlineEndWidth: 'default',\n          borderInlineEndStyle: 'solid',\n          borderInlineEndColor: 'border',\n        },\n      },\n      end: {\n        root: {\n          inset: 0,\n          marginInlineStart: 'auto',\n          h: '100dvh',\n          maxH: '100dvh',\n          borderRadius: 0,\n          borderInlineStartWidth: 'default',\n          borderInlineStartStyle: 'solid',\n          borderInlineStartColor: 'border',\n        },\n      },\n      top: {\n        root: {\n          inset: 0,\n          mb: 'auto',\n          w: '100dvw',\n          maxW: '100dvw',\n          borderRadius: 0,\n          borderBlockEndWidth: 'default',\n          borderBlockEndStyle: 'solid',\n          borderBlockEndColor: 'border',\n        },\n      },\n      bottom: {\n        root: {\n          inset: 0,\n          mt: 'auto',\n          w: '100dvw',\n          maxW: '100dvw',\n          borderRadius: 0,\n          borderBlockStartWidth: 'default',\n          borderBlockStartStyle: 'solid',\n          borderBlockStartColor: 'border',\n        },\n      },\n    },\n  },\n  defaultVariants: {\n    isOpen: false,\n    placement: 'end',\n  },\n});\n\nexport type DrawerVariants = RecipeVariantProps<typeof drawerRecipe>;\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {useEffect, useRef} from 'react';\nimport {drawerRecipe} from 'components/Drawer/Drawer.recipe';\nimport {cx} from 'internal/cx';\nimport {\n  resolveDismissBehavior,\n  type DismissBehavior,\n} from 'internal/dismissBehavior';\nimport {mergeRefs} from 'internal/mergeRefs';\nimport {useBackdropDismiss} from 'internal/useBackdropDismiss';\nimport {useScrollLock} from 'internal/useScrollLock';\n\nexport type DrawerPlacement = 'start' | 'end' | 'top' | 'bottom';\nexport type DrawerDismissBehavior = DismissBehavior;\n\nexport interface DrawerProps {\n  /**\n   * Drawer body content.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the drawer.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the drawer.\n   */\n  'data-testid'?: string;\n  /**\n   * Controls whether Escape and backdrop clicks request dismissal. Pass a\n   * boolean to enable or disable both behaviors together.\n   * @default {isEscapeDismissEnabled: true, isBackdropDismissEnabled: true}\n   */\n  dismissBehavior?: DrawerDismissBehavior;\n  /**\n   * Whether the drawer is open.\n   */\n  isOpen: boolean;\n  /**\n   * Accessible label for the drawer.\n   */\n  label: string;\n  /**\n   * Called when the drawer requests an open-state change.\n   */\n  onOpenChange: (isOpen: boolean) => void;\n  /**\n   * Edge of the viewport the drawer slides in from.\n   * @default 'end'\n   */\n  placement?: DrawerPlacement;\n  /**\n   * Ref forwarded to the drawer element.\n   */\n  ref?: Ref<HTMLDialogElement>;\n  /**\n   * Width (start/end) or height (top/bottom) of the drawer.\n   */\n  size?: number | string;\n  /**\n   * Inline styles applied to the drawer.\n   */\n  style?: CSSProperties;\n}\n\nfunction formatSize(value: number | string): string {\n  return typeof value === 'number' ? `${value}px` : value;\n}\n\nconst DEFAULT_SIZES: Record<DrawerPlacement, number | string> = {\n  start: 320,\n  end: 320,\n  top: '40vh',\n  bottom: '40vh',\n};\n\nfunction getSizeStyle(\n  placement: DrawerPlacement,\n  size: number | string,\n): CSSProperties {\n  const formatted = formatSize(size);\n  if (placement === 'start' || placement === 'end') {\n    return {width: formatted, maxWidth: '100dvw'};\n  }\n  return {height: formatted, maxHeight: '100dvh'};\n}\n\n/**\n * A slide-in panel anchored to an edge of the viewport.\n */\nexport function Drawer({\n  isOpen,\n  label,\n  onOpenChange,\n  placement = 'end',\n  size,\n  dismissBehavior,\n  children,\n  className,\n  'data-testid': dataTestId,\n  style,\n  ref,\n}: DrawerProps): React.JSX.Element {\n  const dialogRef = useRef<HTMLDialogElement>(null);\n  const triggerRef = useRef<HTMLElement | null>(null);\n  const {isBackdropDismissEnabled, isEscapeDismissEnabled} =\n    resolveDismissBehavior(dismissBehavior);\n  const backdropDismiss = useBackdropDismiss<HTMLDialogElement>({\n    isEnabled: isBackdropDismissEnabled,\n    onDismiss: () => onOpenChange(false),\n  });\n\n  useEffect(() => {\n    const dialog = dialogRef.current;\n    if (dialog == null) {\n      return;\n    }\n\n    if (isOpen) {\n      triggerRef.current = document.activeElement as HTMLElement | null;\n      if (!dialog.open) {\n        dialog.showModal();\n      }\n      dialog\n        .querySelector<HTMLElement>('[data-autofocus=\"true\"], [autofocus]')\n        ?.focus();\n    } else if (dialog.open) {\n      dialog.close();\n      triggerRef.current?.focus();\n      triggerRef.current = null;\n    }\n  }, [isOpen]);\n\n  useScrollLock(isOpen);\n\n  const effectiveSize = size ?? DEFAULT_SIZES[placement];\n  const sizeStyle = getSizeStyle(placement, effectiveSize);\n  const classes = drawerRecipe({isOpen, placement});\n\n  return (\n    // eslint-disable-next-line jsx-a11y-x/click-events-have-key-events, jsx-a11y-x/no-noninteractive-element-interactions -- native dialog backdrop clicks close the drawer\n    <dialog\n      aria-label={label}\n      className={cx(classes.root, className)}\n      data-testid={dataTestId}\n      onCancel={event => {\n        event.preventDefault();\n        if (isEscapeDismissEnabled) {\n          onOpenChange(false);\n        }\n      }}\n      onClick={backdropDismiss.onClick}\n      onPointerDown={backdropDismiss.onPointerDown}\n      ref={mergeRefs(ref, dialogRef)}\n      style={{...sizeStyle, ...style}}>\n      <div className={classes.inner}>{children}</div>\n    </dialog>\n  );\n}\n\nDrawer.displayName = 'Drawer';\n","import {useCallback, useMemo, useState, type ReactNode} from 'react';\nimport {Drawer, type DrawerProps} from 'components/Drawer/Drawer';\n\nexport type DrawerOptions = Partial<\n  Omit<DrawerProps, 'children' | 'isOpen' | 'onOpenChange'>\n>;\n\nexport interface UseDrawerReturn {\n  element: ReactNode;\n  hide: () => void;\n  isOpen: boolean;\n  show: (content: ReactNode, options?: DrawerOptions) => void;\n}\n\nexport function useDrawer(defaultOptions?: DrawerOptions): UseDrawerReturn {\n  const [isOpen, setIsOpen] = useState(false);\n  const [content, setContent] = useState<ReactNode>(null);\n  // Options passed to the most recent `show()` call. Each call replaces these\n  // rather than merging, so per-call options never bleed into later calls.\n  // `defaultOptions` remains the baseline, applied beneath them below.\n  const [callOptions, setCallOptions] = useState<DrawerOptions | undefined>();\n\n  const show = useCallback(\n    (nextContent: ReactNode, nextOptions?: DrawerOptions) => {\n      setContent(nextContent);\n      setCallOptions(nextOptions);\n      setIsOpen(true);\n    },\n    [],\n  );\n\n  const hide = useCallback(() => setIsOpen(false), []);\n\n  const element = useMemo(\n    () => (\n      <Drawer\n        {...(defaultOptions ?? {})}\n        {...(callOptions ?? {})}\n        isOpen={isOpen}\n        label={callOptions?.label ?? defaultOptions?.label ?? 'Drawer'}\n        onOpenChange={setIsOpen}>\n        {content}\n      </Drawer>\n    ),\n    [content, defaultOptions, isOpen, callOptions],\n  );\n\n  return {element, hide, isOpen, show};\n}\n"]}

package/dist/{chunk-276LEL3G.cjs → chunk-KVJ27734.cjs}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunk2OXKEUKG_cjs = require('./chunk-2OXKEUKG.cjs');
+var chunkPKZSJX53_cjs = require('./chunk-PKZSJX53.cjs');
 var chunkJRBQKFVO_cjs = require('./chunk-JRBQKFVO.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
 var react = require('react');
@@ -79,7 +79,7 @@ function ButtonGroup({
     () => ({ isDisabled, orientation, size }),
     [isDisabled, orientation, size]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx(chunk2OXKEUKG_cjs.ButtonGroupContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+  return /* @__PURE__ */ jsxRuntime.jsx(chunkPKZSJX53_cjs.ButtonGroupContext, { value: contextValue, children: /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
       "aria-disabled": isDisabled || void 0,
@@ -97,5 +97,5 @@ function ButtonGroup({
 ButtonGroup.displayName = "ButtonGroup";
 
 exports.ButtonGroup = ButtonGroup;
-//# sourceMappingURL=chunk-276LEL3G.cjs.map
-//# sourceMappingURL=chunk-276LEL3G.cjs.map
+//# sourceMappingURL=chunk-KVJ27734.cjs.map
+//# sourceMappingURL=chunk-KVJ27734.cjs.map

package/dist/{chunk-276LEL3G.cjs.map → chunk-KVJ27734.cjs.map}

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/ButtonGroup/ButtonGroup.recipe.ts","../src/components/ButtonGroup/ButtonGroup.tsx"],"names":["cva","useMemo","jsx","ButtonGroupContext","cx"],"mappings":";;;;;;;;;AAEO,IAAM,oBAAoBA,qBAAA,CAAI;AAAA,EACnC,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,SAAA;AAAA,IACZ,SAAA,EAAW,SAAA;AAAA,IACX,qBAAA,EAAuB;AAAA,MACrB,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,mCAAA,EAAqC;AAAA,MACnC,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY;AAAA,QACV,aAAA,EAAe,KAAA;AAAA,QACf,iGAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,sBAAA,EAAwB,CAAA;AAAA,UACxB,sBAAA,EAAwB,SAAA;AAAA,UACxB,sBAAA,EAAwB,OAAA;AAAA,UACxB,sBAAA,EAAwB;AAAA,SAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOF,2GAAA,EACE;AAAA,UACE,oBAAA,EAAsB,CAAA;AAAA,UACtB,uBAAA,EAAyB;AAAA;AAC3B,OACJ;AAAA,MACA,QAAA,EAAU;AAAA,QACR,aAAA,EAAe,QAAA;AAAA,QACf,iGAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,oBAAA,EAAsB,CAAA;AAAA,UACtB,qBAAA,EAAuB,SAAA;AAAA,UACvB,qBAAA,EAAuB,OAAA;AAAA,UACvB,qBAAA,EAAuB;AAAA,SACzB;AAAA;AAAA;AAAA;AAAA,QAIF,2GAAA,EACE;AAAA,UACE,sBAAA,EAAwB,CAAA;AAAA,UACxB,uBAAA,EAAyB;AAAA;AAC3B;AACJ;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa;AAAA;AAEjB,CAAC,CAAA;ACLM,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,UAAA,GAAa,KAAA;AAAA,EACb,KAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAAwC;AACtC,EAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,IACnB,OAAO,EAAC,UAAA,EAAY,WAAA,EAAa,IAAA,EAAI,CAAA;AAAA,IACrC,CAAC,UAAA,EAAY,WAAA,EAAa,IAAI;AAAA,GAChC;AAEA,EAAA,uBACEC,cAAA,CAACC,oCAAA,EAAA,EAAmB,KAAA,EAAO,YAAA,EACzB,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,iBAAe,UAAA,IAAc,MAAA;AAAA,MAC7B,YAAA,EAAY,KAAA;AAAA,MACZ,WAAWE,oBAAA,CAAG,iBAAA,CAAkB,EAAC,WAAA,EAAY,GAAG,SAAS,CAAA;AAAA,MACzD,kBAAA,EAAkB,WAAA;AAAA,MAClB,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,IAAA,EAAK,OAAA;AAAA,MACL,KAAA;AAAA,MACC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-276LEL3G.cjs","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const buttonGroupRecipe = cva({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'stretch',\n    isolation: 'isolate',\n    '& :where(button, a)': {\n      position: 'relative',\n    },\n    '& :where(button, a):focus-visible': {\n      zIndex: 1,\n    },\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        flexDirection: 'row',\n        '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)':\n          {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            borderInlineStartWidth: 'default',\n            borderInlineStartStyle: 'solid',\n            borderInlineStartColor: 'border',\n          },\n        // `:has(~ :not([popover]))` rather than `:not(:last-child)` so that a\n        // trailing `[popover]` sibling (e.g. DropdownMenu's floating content,\n        // which is display:none but still counts for :last-child) does not\n        // strip the end radius from the last visible button in the group. The\n        // `:not([popover] *)` on the descendant clause keeps these joins from\n        // leaking onto buttons rendered inside a child's popover (menu items).\n        '& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)':\n          {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n      },\n      vertical: {\n        flexDirection: 'column',\n        '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)':\n          {\n            borderTopLeftRadius: 0,\n            borderTopRightRadius: 0,\n            borderBlockStartWidth: 'default',\n            borderBlockStartStyle: 'solid',\n            borderBlockStartColor: 'border',\n          },\n        // See the horizontal note above: skip trailing `[popover]` siblings so\n        // the last visible button keeps its bottom radius, and exclude popover\n        // descendants so menu items don't inherit the group joins.\n        '& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)':\n          {\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n      },\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n});\n\nexport type ButtonGroupVariants = RecipeVariantProps<typeof buttonGroupRecipe>;\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {useMemo} from 'react';\nimport {cx} from '../../internal/cx';\nimport type {ButtonSize} from '../Button/Button';\nimport {buttonGroupRecipe} from './ButtonGroup.recipe';\nimport {\n  ButtonGroupContext,\n  type ButtonGroupOrientation,\n} from './ButtonGroupContext';\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport interface ButtonGroupProps {\n  /**\n   * Direct children should be `<Button>` elements.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether all buttons in the group are disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Accessible label for the group.\n   */\n  label: string;\n  /**\n   * Orientation for layout. Default is `horizontal`.\n   */\n  orientation?: ButtonGroupOrientation;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Default size for Buttons in the group. Individual Buttons can override it.\n   */\n  size?: ButtonSize;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport function ButtonGroup({\n  children,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  label,\n  orientation = 'horizontal',\n  ref,\n  size = 'md',\n  style,\n}: ButtonGroupProps): React.JSX.Element {\n  const contextValue = useMemo(\n    () => ({isDisabled, orientation, size}),\n    [isDisabled, orientation, size],\n  );\n\n  return (\n    <ButtonGroupContext value={contextValue}>\n      <div\n        aria-disabled={isDisabled || undefined}\n        aria-label={label}\n        className={cx(buttonGroupRecipe({orientation}), className)}\n        data-orientation={orientation}\n        data-testid={dataTestId}\n        ref={ref}\n        role=\"group\"\n        style={style}>\n        {children}\n      </div>\n    </ButtonGroupContext>\n  );\n}\n\nButtonGroup.displayName = 'ButtonGroup';\n"]}
+{"version":3,"sources":["../src/components/ButtonGroup/ButtonGroup.recipe.ts","../src/components/ButtonGroup/ButtonGroup.tsx"],"names":["cva","useMemo","jsx","ButtonGroupContext","cx"],"mappings":";;;;;;;;;AAEO,IAAM,oBAAoBA,qBAAA,CAAI;AAAA,EACnC,IAAA,EAAM;AAAA,IACJ,OAAA,EAAS,aAAA;AAAA,IACT,UAAA,EAAY,SAAA;AAAA,IACZ,SAAA,EAAW,SAAA;AAAA,IACX,qBAAA,EAAuB;AAAA,MACrB,QAAA,EAAU;AAAA,KACZ;AAAA,IACA,mCAAA,EAAqC;AAAA,MACnC,MAAA,EAAQ;AAAA;AACV,GACF;AAAA,EACA,QAAA,EAAU;AAAA,IACR,WAAA,EAAa;AAAA,MACX,UAAA,EAAY;AAAA,QACV,aAAA,EAAe,KAAA;AAAA,QACf,iGAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,sBAAA,EAAwB,CAAA;AAAA,UACxB,sBAAA,EAAwB,SAAA;AAAA,UACxB,sBAAA,EAAwB,OAAA;AAAA,UACxB,sBAAA,EAAwB;AAAA,SAC1B;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAOF,2GAAA,EACE;AAAA,UACE,oBAAA,EAAsB,CAAA;AAAA,UACtB,uBAAA,EAAyB;AAAA;AAC3B,OACJ;AAAA,MACA,QAAA,EAAU;AAAA,QACR,aAAA,EAAe,QAAA;AAAA,QACf,iGAAA,EACE;AAAA,UACE,mBAAA,EAAqB,CAAA;AAAA,UACrB,oBAAA,EAAsB,CAAA;AAAA,UACtB,qBAAA,EAAuB,SAAA;AAAA,UACvB,qBAAA,EAAuB,OAAA;AAAA,UACvB,qBAAA,EAAuB;AAAA,SACzB;AAAA;AAAA;AAAA;AAAA,QAIF,2GAAA,EACE;AAAA,UACE,sBAAA,EAAwB,CAAA;AAAA,UACxB,uBAAA,EAAyB;AAAA;AAC3B;AACJ;AACF,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,WAAA,EAAa;AAAA;AAEjB,CAAC,CAAA;ACLM,SAAS,WAAA,CAAY;AAAA,EAC1B,QAAA;AAAA,EACA,SAAA;AAAA,EACA,aAAA,EAAe,UAAA;AAAA,EACf,UAAA,GAAa,KAAA;AAAA,EACb,KAAA;AAAA,EACA,WAAA,GAAc,YAAA;AAAA,EACd,GAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP;AACF,CAAA,EAAwC;AACtC,EAAA,MAAM,YAAA,GAAeC,aAAA;AAAA,IACnB,OAAO,EAAC,UAAA,EAAY,WAAA,EAAa,IAAA,EAAI,CAAA;AAAA,IACrC,CAAC,UAAA,EAAY,WAAA,EAAa,IAAI;AAAA,GAChC;AAEA,EAAA,uBACEC,cAAA,CAACC,oCAAA,EAAA,EAAmB,KAAA,EAAO,YAAA,EACzB,QAAA,kBAAAD,cAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,iBAAe,UAAA,IAAc,MAAA;AAAA,MAC7B,YAAA,EAAY,KAAA;AAAA,MACZ,WAAWE,oBAAA,CAAG,iBAAA,CAAkB,EAAC,WAAA,EAAY,GAAG,SAAS,CAAA;AAAA,MACzD,kBAAA,EAAkB,WAAA;AAAA,MAClB,aAAA,EAAa,UAAA;AAAA,MACb,GAAA;AAAA,MACA,IAAA,EAAK,OAAA;AAAA,MACL,KAAA;AAAA,MACC;AAAA;AAAA,GACH,EACF,CAAA;AAEJ;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-KVJ27734.cjs","sourcesContent":["import {cva, type RecipeVariantProps} from 'styled-system/css';\n\nexport const buttonGroupRecipe = cva({\n  base: {\n    display: 'inline-flex',\n    alignItems: 'stretch',\n    isolation: 'isolate',\n    '& :where(button, a)': {\n      position: 'relative',\n    },\n    '& :where(button, a):focus-visible': {\n      zIndex: 1,\n    },\n  },\n  variants: {\n    orientation: {\n      horizontal: {\n        flexDirection: 'row',\n        '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)':\n          {\n            borderTopLeftRadius: 0,\n            borderBottomLeftRadius: 0,\n            borderInlineStartWidth: 'default',\n            borderInlineStartStyle: 'solid',\n            borderInlineStartColor: 'border',\n          },\n        // `:has(~ :not([popover]))` rather than `:not(:last-child)` so that a\n        // trailing `[popover]` sibling (e.g. DropdownMenu's floating content,\n        // which is display:none but still counts for :last-child) does not\n        // strip the end radius from the last visible button in the group. The\n        // `:not([popover] *)` on the descendant clause keeps these joins from\n        // leaking onto buttons rendered inside a child's popover (menu items).\n        '& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)':\n          {\n            borderTopRightRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n      },\n      vertical: {\n        flexDirection: 'column',\n        '& > :not(:first-child):is(button, a), & > :not(:first-child) :where(button, a):not([popover] *)':\n          {\n            borderTopLeftRadius: 0,\n            borderTopRightRadius: 0,\n            borderBlockStartWidth: 'default',\n            borderBlockStartStyle: 'solid',\n            borderBlockStartColor: 'border',\n          },\n        // See the horizontal note above: skip trailing `[popover]` siblings so\n        // the last visible button keeps its bottom radius, and exclude popover\n        // descendants so menu items don't inherit the group joins.\n        '& > :has(~ :not([popover])):is(button, a), & > :has(~ :not([popover])) :where(button, a):not([popover] *)':\n          {\n            borderBottomLeftRadius: 0,\n            borderBottomRightRadius: 0,\n          },\n      },\n    },\n  },\n  defaultVariants: {\n    orientation: 'horizontal',\n  },\n});\n\nexport type ButtonGroupVariants = RecipeVariantProps<typeof buttonGroupRecipe>;\n","import type {CSSProperties, ReactNode, Ref} from 'react';\nimport {useMemo} from 'react';\nimport type {ButtonSize} from 'components/Button/Button';\nimport {buttonGroupRecipe} from 'components/ButtonGroup/ButtonGroup.recipe';\nimport {\n  ButtonGroupContext,\n  type ButtonGroupOrientation,\n} from 'components/ButtonGroup/ButtonGroupContext';\nimport {cx} from 'internal/cx';\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport interface ButtonGroupProps {\n  /**\n   * Direct children should be `<Button>` elements.\n   */\n  children: ReactNode;\n  /**\n   * Additional CSS class names applied to the root element.\n   */\n  className?: string;\n  /**\n   * Test ID applied to the root element.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether all buttons in the group are disabled.\n   */\n  isDisabled?: boolean;\n  /**\n   * Accessible label for the group.\n   */\n  label: string;\n  /**\n   * Orientation for layout. Default is `horizontal`.\n   */\n  orientation?: ButtonGroupOrientation;\n  /**\n   * Ref forwarded to the root element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * Default size for Buttons in the group. Individual Buttons can override it.\n   */\n  size?: ButtonSize;\n  /**\n   * Inline styles applied to the root element.\n   */\n  style?: CSSProperties;\n}\n\n/**\n * Groups related Buttons and propagates shared size, disabled state, and\n * orientation to child Buttons.\n */\nexport function ButtonGroup({\n  children,\n  className,\n  'data-testid': dataTestId,\n  isDisabled = false,\n  label,\n  orientation = 'horizontal',\n  ref,\n  size = 'md',\n  style,\n}: ButtonGroupProps): React.JSX.Element {\n  const contextValue = useMemo(\n    () => ({isDisabled, orientation, size}),\n    [isDisabled, orientation, size],\n  );\n\n  return (\n    <ButtonGroupContext value={contextValue}>\n      <div\n        aria-disabled={isDisabled || undefined}\n        aria-label={label}\n        className={cx(buttonGroupRecipe({orientation}), className)}\n        data-orientation={orientation}\n        data-testid={dataTestId}\n        ref={ref}\n        role=\"group\"\n        style={style}>\n        {children}\n      </div>\n    </ButtonGroupContext>\n  );\n}\n\nButtonGroup.displayName = 'ButtonGroup';\n"]}

package/dist/{chunk-G2WW52GO.cjs → chunk-L5JS6P62.cjs}

@@ -1,9 +1,9 @@
 'use strict';
 
-var chunkR37R7DEV_cjs = require('./chunk-R37R7DEV.cjs');
-var chunkQOKEU3DC_cjs = require('./chunk-QOKEU3DC.cjs');
-var chunkM26XECB2_cjs = require('./chunk-M26XECB2.cjs');
-var chunkJJ324PSZ_cjs = require('./chunk-JJ324PSZ.cjs');
+var chunk5XMWGK3O_cjs = require('./chunk-5XMWGK3O.cjs');
+var chunk3Z5PF75J_cjs = require('./chunk-3Z5PF75J.cjs');
+var chunk2MXK2SDR_cjs = require('./chunk-2MXK2SDR.cjs');
+var chunkQ4HAXT5C_cjs = require('./chunk-Q4HAXT5C.cjs');
 var chunkQAO6QMNQ_cjs = require('./chunk-QAO6QMNQ.cjs');
 var chunkRU6JG3FS_cjs = require('./chunk-RU6JG3FS.cjs');
 var chunkSPDVNY2Z_cjs = require('./chunk-SPDVNY2Z.cjs');
@@ -79,28 +79,35 @@ var styles = {
     borderWidth: "default",
     borderStyle: "solid",
     borderColor: "border"
-  }),
-  closeButtonWrapper: chunkRU6JG3FS_cjs.css({
-    position: "absolute",
-    w: "1px",
-    h: "1px",
-    overflow: "hidden",
-    clipPath: "inset(50%)"
   })
 };
 function usePopover({
   onShow,
   onHide,
-  hasLightDismiss = true,
+  isDismissable = true,
   hasAutoFocus = true,
   hasSurface = true,
   hasCloseButton = true,
   closeButtonLabel = "Close popover",
   label,
-  role = "dialog"
+  role = "dialog",
+  layerId
 } = {}) {
   const skipAutoFocusRef = react.useRef(false);
-  const layer = chunkJJ324PSZ_cjs.useLayer({ hasLightDismiss, onShow, onHide });
+  const isDismissingRef = react.useRef(false);
+  const handleHide = react.useCallback(() => {
+    isDismissingRef.current = true;
+    requestAnimationFrame(() => {
+      isDismissingRef.current = false;
+    });
+    onHide?.();
+  }, [onHide]);
+  const layer = chunkQ4HAXT5C_cjs.useLayer({
+    isDismissable,
+    id: layerId,
+    onShow,
+    onHide: handleHide
+  });
   const { containerRef: contentRef, focusFirst } = useFocusTrap({
     isActive: layer.isOpen,
     onEscape: layer.hide
@@ -122,6 +129,9 @@ function usePopover({
     [layer]
   );
   const toggle = react.useCallback(() => {
+    if (isDismissingRef.current) {
+      return;
+    }
     if (layer.isOpen) {
       layer.hide();
       return;
@@ -140,8 +150,8 @@ function usePopover({
             role,
             children: [
               children,
-              hasCloseButton ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: styles.closeButtonWrapper, children: /* @__PURE__ */ jsxRuntime.jsx(
-                chunkQOKEU3DC_cjs.Button,
+              hasCloseButton ? /* @__PURE__ */ jsxRuntime.jsx(chunk2MXK2SDR_cjs.VisuallyHidden, { children: /* @__PURE__ */ jsxRuntime.jsx(
+                chunk5XMWGK3O_cjs.Button,
                 {
                   icon: lucideReact.X,
                   isIconOnly: true,
@@ -236,7 +246,7 @@ function Popover({
   width,
   label,
   hasCloseButton,
-  hasLightDismiss,
+  isDismissable,
   closeButtonLabel,
   padding,
   ref,
@@ -244,21 +254,19 @@ function Popover({
   className,
   style,
   role,
+  id,
   "data-testid": dataTestId
 }) {
   const wrapperRef = react.useRef(null);
   const isControlled = isOpen !== void 0;
-  const lastHideTimeRef = react.useRef(0);
   const popover = usePopover({
     closeButtonLabel,
     hasAutoFocus,
     hasCloseButton,
-    hasLightDismiss,
+    isDismissable,
     label,
-    onHide: () => {
-      lastHideTimeRef.current = chunkR37R7DEV_cjs.nowMonotonicMilliseconds();
-      onOpenChange?.(false);
-    },
+    layerId: id,
+    onHide: () => onOpenChange?.(false),
     onShow: () => onOpenChange?.(true),
     role
   });
@@ -266,9 +274,6 @@ function Popover({
     if (!isEnabled) {
       return;
     }
-    if (chunkR37R7DEV_cjs.nowMonotonicMilliseconds() - lastHideTimeRef.current < 50) {
-      return;
-    }
     popover.toggle();
   }, [isEnabled, popover]);
   const handleTriggerKeyDown = react.useCallback(
@@ -311,7 +316,7 @@ function Popover({
     },
     [handleTriggerClick, handleTriggerKeyDown, popover.triggerProps]
   );
-  chunkJJ324PSZ_cjs.useIsomorphicLayoutEffect(() => {
+  chunkQ4HAXT5C_cjs.useIsomorphicLayoutEffect(() => {
     const anchor = anchorRef?.current ?? wrapperRef.current;
     if (anchor == null) {
       return;
@@ -329,7 +334,7 @@ function Popover({
       detach();
     };
   }, [anchorRef, attachTrigger, isEnabled, popover]);
-  chunkJJ324PSZ_cjs.useIsomorphicLayoutEffect(() => {
+  chunkQ4HAXT5C_cjs.useIsomorphicLayoutEffect(() => {
     if (!isControlled) {
       return;
     }
@@ -340,7 +345,7 @@ function Popover({
     }
   }, [isControlled, isOpen, popover]);
   const widthStyle = width == null ? void 0 : { width: typeof width === "number" ? `${width}px` : width };
-  const paddingStyle = padding != null && padding !== 0 ? { padding: chunkM26XECB2_cjs.token(`spacing.${padding}`) } : void 0;
+  const paddingStyle = padding != null && padding !== 0 ? { padding: chunk3Z5PF75J_cjs.token(`spacing.${padding}`) } : void 0;
   const popoverContent = popover.render(
     /* @__PURE__ */ jsxRuntime.jsx(
       "div",
@@ -371,5 +376,5 @@ Popover.displayName = "Popover";
 
 exports.Popover = Popover;
 exports.usePopover = usePopover;
-//# sourceMappingURL=chunk-G2WW52GO.cjs.map
-//# sourceMappingURL=chunk-G2WW52GO.cjs.map
+//# sourceMappingURL=chunk-L5JS6P62.cjs.map
+//# sourceMappingURL=chunk-L5JS6P62.cjs.map

package/dist/chunk-L5JS6P62.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/internal/useFocusTrap.ts","../src/components/Popover/usePopover.tsx","../src/components/Popover/Popover.tsx"],"names":["useRef","useCallback","useEffect","css","useLayer","jsxs","VisuallyHidden","jsx","Button","X","useMemo","styles","useIsomorphicLayoutEffect","token","cx","isReactNode","Fragment"],"mappings":"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","file":"chunk-L5JS6P62.cjs","sourcesContent":["import {useCallback, useEffect, useRef} from 'react';\n\nconst FOCUSABLE_SELECTOR =\n  'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex=\"-1\"]):not([disabled])';\n\nexport interface UseFocusTrapOptions {\n  isActive: boolean;\n  onEscape?: () => void;\n}\n\nexport interface UseFocusTrapReturn<T extends HTMLElement = HTMLElement> {\n  containerRef: React.RefObject<T | null>;\n  focusFirst: () => void;\n}\n\nfunction getFocusableElements(container: HTMLElement): HTMLElement[] {\n  return Array.from(\n    container.querySelectorAll<HTMLElement>(FOCUSABLE_SELECTOR),\n  );\n}\n\nfunction focusFirstDescendant(container: HTMLElement): void {\n  getFocusableElements(container)[0]?.focus();\n}\n\nfunction focusLastDescendant(container: HTMLElement): void {\n  const elements = getFocusableElements(container);\n  elements.at(-1)?.focus();\n}\n\nexport function useFocusTrap<T extends HTMLElement = HTMLElement>({\n  isActive,\n  onEscape,\n}: UseFocusTrapOptions): UseFocusTrapReturn<T> {\n  const containerRef = useRef<T>(null);\n\n  const focusFirst = useCallback(() => {\n    if (containerRef.current != null) {\n      focusFirstDescendant(containerRef.current);\n    }\n  }, []);\n\n  useEffect(() => {\n    if (!isActive) {\n      return;\n    }\n\n    const handleKeyDown = (event: KeyboardEvent) => {\n      const container = containerRef.current;\n      if (container == null) {\n        return;\n      }\n\n      if (event.key === 'Escape') {\n        event.preventDefault();\n        onEscape?.();\n        return;\n      }\n\n      if (event.key !== 'Tab') {\n        return;\n      }\n\n      const focusable = getFocusableElements(container);\n      if (focusable.length === 0) {\n        return;\n      }\n\n      const first = focusable[0];\n      const last = focusable.at(-1);\n      if (event.shiftKey && document.activeElement === first) {\n        event.preventDefault();\n        focusLastDescendant(container);\n      } else if (!event.shiftKey && document.activeElement === last) {\n        event.preventDefault();\n        focusFirstDescendant(container);\n      }\n    };\n\n    document.addEventListener('keydown', handleKeyDown);\n    return () => document.removeEventListener('keydown', handleKeyDown);\n  }, [isActive, onEscape]);\n\n  return {containerRef, focusFirst};\n}\n","import {X} from 'lucide-react';\nimport {\n  useCallback,\n  useEffect,\n  useMemo,\n  useRef,\n  type ReactNode,\n  type RefCallback,\n} from 'react';\nimport {Button} from 'components/Button';\nimport {VisuallyHidden} from 'internal';\nimport {useFocusTrap} from 'internal/useFocusTrap';\nimport {useLayer, type ContextRenderProps} from 'internal/useLayer';\nimport {css} from 'styled-system/css';\n\nexport type {LayerAlignment, LayerPlacement} from 'internal/useLayer';\n\nexport interface UsePopoverOptions {\n  /**\n   * Accessible label for the close button rendered when `hasCloseButton` is\n   * `true`. Defaults to `'Close popover'`.\n   */\n  closeButtonLabel?: string;\n  /**\n   * When `true`, focus moves to the first focusable element inside the popover\n   * when it opens. Defaults to `true`.\n   */\n  hasAutoFocus?: boolean;\n  /**\n   * When `true`, renders a visually hidden close button inside the popover so\n   * assistive technology users can dismiss it. Defaults to `true`.\n   */\n  hasCloseButton?: boolean;\n  /**\n   * When `true`, wraps the content in a styled surface (background, border,\n   * shadow). Set to `false` to render unstyled content. Defaults to `true`.\n   */\n  hasSurface?: boolean;\n  /**\n   * When `true`, the popover can be dismissed by clicking outside or pressing\n   * Escape. Defaults to `true`.\n   */\n  isDismissable?: boolean;\n  /**\n   * Accessible label applied to the popover content via `aria-label`.\n   */\n  label?: string;\n  /**\n   * Id applied to the underlying layer element. Falls back to a generated id.\n   * Supply this when another element needs a stable `aria-controls` reference\n   * to the popover.\n   */\n  layerId?: string;\n  /**\n   * Called after the popover is hidden, including via light dismiss.\n   */\n  onHide?: () => void;\n  /**\n   * Called after the popover is shown.\n   */\n  onShow?: () => void;\n  /**\n   * ARIA role for the popover content. Defaults to `'dialog'`; use `'menu'` for\n   * menu-style popovers.\n   */\n  role?: 'dialog' | 'menu';\n}\n\nexport interface UsePopoverReturn {\n  /**\n   * CSS anchor name tying the popover content to the trigger for positioning.\n   */\n  anchorId: string;\n  /**\n   * Ref attached to the popover content element.\n   */\n  contentRef: React.RefObject<HTMLDivElement | null>;\n  /**\n   * Hides the popover.\n   */\n  hide: () => void;\n  /**\n   * Id of the underlying layer element, matching `triggerProps['aria-controls']`.\n   */\n  id: string;\n  /**\n   * Whether the popover is currently open.\n   */\n  isOpen: boolean;\n  /**\n   * Renders the given children inside the popover layer.\n   */\n  render: (children: ReactNode, props?: ContextRenderProps) => ReactNode;\n  /**\n   * Shows the popover. Pass `isAutoFocusSkipped` to suppress moving focus into\n   * the content for this open.\n   */\n  show: (options?: {isAutoFocusSkipped?: boolean}) => void;\n  /**\n   * Toggles the popover between open and closed.\n   */\n  toggle: () => void;\n  /**\n   * ARIA props to spread onto the trigger element.\n   */\n  triggerProps: {\n    'aria-controls': string;\n    'aria-expanded': boolean;\n    'aria-haspopup': 'dialog' | 'menu';\n  };\n  /**\n   * Ref callback to attach to the trigger element for anchor positioning.\n   */\n  triggerRef: RefCallback<HTMLElement>;\n}\n\nconst styles = {\n  surface: css({\n    position: 'relative',\n    bg: 'bg',\n    borderRadius: 'md',\n    boxShadow: 'lg',\n    borderWidth: 'default',\n    borderStyle: 'solid',\n    borderColor: 'border',\n  }),\n} as const;\n\nexport function usePopover({\n  onShow,\n  onHide,\n  isDismissable = true,\n  hasAutoFocus = true,\n  hasSurface = true,\n  hasCloseButton = true,\n  closeButtonLabel = 'Close popover',\n  label,\n  role = 'dialog',\n  layerId,\n}: UsePopoverOptions = {}): UsePopoverReturn {\n  const skipAutoFocusRef = useRef(false);\n  // Guards against a light-dismiss close immediately re-opening the popover.\n  // When the trigger is clicked while the popover is open, the browser's native\n  // light dismiss closes it (firing `onHide`) *before* the trigger's own click\n  // handler runs `toggle()` — which would otherwise re-open it. The flag is\n  // cleared on the next animation frame: the browser never paints mid-gesture,\n  // so it is reliably still set when the spurious click arrives, yet cleared\n  // before any genuine later click.\n  const isDismissingRef = useRef(false);\n\n  const handleHide = useCallback(() => {\n    isDismissingRef.current = true;\n    requestAnimationFrame(() => {\n      isDismissingRef.current = false;\n    });\n    onHide?.();\n  }, [onHide]);\n\n  const layer = useLayer({\n    isDismissable,\n    id: layerId,\n    onShow,\n    onHide: handleHide,\n  });\n  const {containerRef: contentRef, focusFirst} = useFocusTrap<HTMLDivElement>({\n    isActive: layer.isOpen,\n    onEscape: layer.hide,\n  });\n\n  useEffect(() => {\n    if (!layer.isOpen) {\n      skipAutoFocusRef.current = false;\n      return;\n    }\n\n    if (hasAutoFocus && !skipAutoFocusRef.current) {\n      requestAnimationFrame(() => focusFirst());\n    }\n  }, [focusFirst, hasAutoFocus, layer.isOpen]);\n\n  const show = useCallback(\n    (options?: {isAutoFocusSkipped?: boolean}) => {\n      skipAutoFocusRef.current = options?.isAutoFocusSkipped ?? false;\n      layer.show();\n    },\n    [layer],\n  );\n\n  const toggle = useCallback(() => {\n    if (isDismissingRef.current) {\n      return;\n    }\n\n    if (layer.isOpen) {\n      layer.hide();\n      return;\n    }\n\n    show();\n  }, [layer, show]);\n\n  const render = useCallback(\n    (children: ReactNode, props?: ContextRenderProps): ReactNode => {\n      return layer.render(\n        <div\n          aria-label={label}\n          className={hasSurface ? styles.surface : undefined}\n          ref={contentRef}\n          role={role}>\n          {children}\n          {hasCloseButton ? (\n            <VisuallyHidden>\n              <Button\n                icon={X}\n                isIconOnly\n                label={closeButtonLabel}\n                onClick={layer.hide}\n                size=\"sm\"\n                variant=\"ghost\"\n              />\n            </VisuallyHidden>\n          ) : null}\n        </div>,\n        {\n          ...props,\n          className: props?.className,\n        },\n      );\n    },\n    [\n      closeButtonLabel,\n      contentRef,\n      hasCloseButton,\n      hasSurface,\n      label,\n      layer,\n      role,\n    ],\n  );\n\n  const triggerProps = useMemo(\n    () => ({\n      'aria-controls': layer.id,\n      'aria-expanded': layer.isOpen,\n      'aria-haspopup': role,\n    }),\n    [layer.id, layer.isOpen, role],\n  );\n\n  return useMemo(\n    () => ({\n      anchorId: layer.anchorId,\n      contentRef,\n      hide: layer.hide,\n      id: layer.id,\n      isOpen: layer.isOpen,\n      render,\n      show,\n      toggle,\n      triggerProps,\n      triggerRef: layer.ref,\n    }),\n    [\n      contentRef,\n      layer.anchorId,\n      layer.hide,\n      layer.id,\n      layer.isOpen,\n      layer.ref,\n      render,\n      show,\n      toggle,\n      triggerProps,\n    ],\n  );\n}\n","import {\n  useCallback,\n  useRef,\n  type CSSProperties,\n  type ReactNode,\n  type Ref,\n  type RefObject,\n} from 'react';\nimport {usePopover} from 'components/Popover/usePopover';\nimport {cx} from 'internal/cx';\nimport isReactNode from 'internal/isReactNode';\nimport type {SpacingToken} from 'internal/spacingTokens';\nimport {useIsomorphicLayoutEffect} from 'internal/useIsomorphicLayoutEffect';\nimport type {LayerAlignment, LayerPlacement} from 'internal/useLayer';\nimport {css} from 'styled-system/css';\nimport {token} from 'styled-system/tokens';\n\nexport interface PopoverProps {\n  /**\n   * Alignment along the placement axis.\n   * @default 'start'\n   */\n  alignment?: LayerAlignment;\n  /**\n   * External trigger element. When provided without children, Popover attaches\n   * click and ARIA behavior directly to this element.\n   */\n  anchorRef?: RefObject<HTMLElement | null>;\n  /**\n   * Trigger content. Must contain a `<button>` or `[role=\"button\"]`.\n   */\n  children?: ReactNode;\n  /**\n   * Additional CSS class names applied to the popover content.\n   */\n  className?: string;\n  /**\n   * Label for the hidden close button.\n   * @default 'Close popover'\n   */\n  closeButtonLabel?: string;\n  /**\n   * Content displayed inside the popover dialog.\n   */\n  content: ReactNode;\n  /**\n   * Test ID applied to the popover content.\n   */\n  'data-testid'?: string;\n  /**\n   * Whether to focus the first focusable item after opening.\n   * @default true\n   */\n  hasAutoFocus?: boolean;\n  /**\n   * Whether to include a keyboard-accessible close button.\n   * @default true\n   */\n  hasCloseButton?: boolean;\n  /**\n   * Id applied to the popover content element. Falls back to a generated id.\n   * Supply this when another element needs a stable `aria-controls` reference\n   * to the popover.\n   */\n  id?: string;\n  /**\n   * Whether clicking outside or pressing Escape closes the popover.\n   * @default true\n   */\n  isDismissable?: boolean;\n  /**\n   * Whether trigger interactions open the popover.\n   * @default true\n   */\n  isEnabled?: boolean;\n  /**\n   * Controlled open state.\n   */\n  isOpen?: boolean;\n  /**\n   * Accessible label for the popover dialog.\n   */\n  label?: string;\n  /**\n   * Callback fired when open state changes.\n   */\n  onOpenChange?: (isOpen: boolean) => void;\n  /**\n   * Inner padding of the popover content.\n   * @default 0\n   */\n  padding?: SpacingToken;\n  /**\n   * Position relative to the trigger.\n   * @default 'below'\n   */\n  placement?: LayerPlacement;\n  /**\n   * Ref forwarded to the popover content element.\n   */\n  ref?: Ref<HTMLDivElement>;\n  /**\n   * ARIA role for the floating content.\n   * @default 'dialog'\n   */\n  role?: 'dialog' | 'menu';\n  /**\n   * Inline styles applied to the popover content.\n   */\n  style?: CSSProperties;\n  /**\n   * Width of the popover content.\n   */\n  width?: number | string;\n}\n\nconst BUTTON_SELECTOR = 'button, [role=\"button\"]';\n\nconst styles = {\n  anchor: css({\n    display: 'inline-flex',\n  }),\n  content: css({}),\n  gap: {\n    above: css({mb: '1'}),\n    below: css({mt: '1'}),\n    start: css({mr: '1'}),\n    end: css({ml: '1'}),\n  },\n} as const;\n\nfunction findTriggerButton(element: HTMLElement): HTMLElement | null {\n  if (element.matches(BUTTON_SELECTOR)) {\n    return element;\n  }\n\n  return element.querySelector<HTMLElement>(BUTTON_SELECTOR);\n}\n\n/**\n * A click-triggered floating dialog anchored to a trigger element.\n */\nexport function Popover({\n  anchorRef,\n  children,\n  content,\n  placement = 'below',\n  alignment = 'start',\n  isOpen,\n  onOpenChange,\n  isEnabled = true,\n  width,\n  label,\n  hasCloseButton,\n  isDismissable,\n  closeButtonLabel,\n  padding,\n  ref,\n  hasAutoFocus,\n  className,\n  style,\n  role,\n  id,\n  'data-testid': dataTestId,\n}: PopoverProps): React.JSX.Element {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const isControlled = isOpen !== undefined;\n\n  const popover = usePopover({\n    closeButtonLabel,\n    hasAutoFocus,\n    hasCloseButton,\n    isDismissable,\n    label,\n    layerId: id,\n    onHide: () => onOpenChange?.(false),\n    onShow: () => onOpenChange?.(true),\n    role,\n  });\n\n  const handleTriggerClick = useCallback(() => {\n    if (!isEnabled) {\n      return;\n    }\n\n    popover.toggle();\n  }, [isEnabled, popover]);\n\n  const handleTriggerKeyDown = useCallback(\n    (event: KeyboardEvent) => {\n      if (event.key === 'Enter' || event.key === ' ') {\n        event.preventDefault();\n        handleTriggerClick();\n      }\n    },\n    [handleTriggerClick],\n  );\n\n  // ARIA and listeners are applied imperatively because the trigger button can\n  // be any element the consumer renders — nested anywhere inside `children`, or\n  // an entirely external element via `anchorRef` — so Popover cannot inject\n  // props through JSX. This is safe: React only reconciles attributes present\n  // in its own virtual DOM, so it never clobbers these imperatively-set ones on\n  // re-render. The only dynamic attribute, `aria-expanded`, stays in sync\n  // because `popover.triggerProps` is memoized on the open state, so this\n  // callback (and the effect below that re-runs it) re-applies the fresh value\n  // on every toggle. Keep `triggerProps` in the dep arrays or that sync breaks.\n  const attachTrigger = useCallback(\n    (button: HTMLElement) => {\n      button.setAttribute(\n        'aria-haspopup',\n        popover.triggerProps['aria-haspopup'],\n      );\n      button.setAttribute(\n        'aria-expanded',\n        String(popover.triggerProps['aria-expanded']),\n      );\n      button.setAttribute(\n        'aria-controls',\n        popover.triggerProps['aria-controls'],\n      );\n      button.addEventListener('click', handleTriggerClick);\n\n      const needsKeyDown =\n        button.tagName !== 'BUTTON' && button.getAttribute('role') === 'button';\n      if (needsKeyDown) {\n        button.addEventListener('keydown', handleTriggerKeyDown);\n      }\n\n      return () => {\n        button.removeAttribute('aria-haspopup');\n        button.removeAttribute('aria-expanded');\n        button.removeAttribute('aria-controls');\n        button.removeEventListener('click', handleTriggerClick);\n        if (needsKeyDown) {\n          button.removeEventListener('keydown', handleTriggerKeyDown);\n        }\n      };\n    },\n    [handleTriggerClick, handleTriggerKeyDown, popover.triggerProps],\n  );\n\n  useIsomorphicLayoutEffect(() => {\n    const anchor = anchorRef?.current ?? wrapperRef.current;\n    if (anchor == null) {\n      return;\n    }\n\n    popover.triggerRef(anchor);\n    const trigger = findTriggerButton(anchor);\n    if (trigger == null || !isEnabled) {\n      return () => {\n        popover.triggerRef(null);\n      };\n    }\n\n    const detach = attachTrigger(trigger);\n    return () => {\n      popover.triggerRef(null);\n      detach();\n    };\n  }, [anchorRef, attachTrigger, isEnabled, popover]);\n\n  useIsomorphicLayoutEffect(() => {\n    if (!isControlled) {\n      return;\n    }\n\n    if (isOpen === true && !popover.isOpen) {\n      popover.show();\n    } else if (isOpen === false && popover.isOpen) {\n      popover.hide();\n    }\n  }, [isControlled, isOpen, popover]);\n\n  const widthStyle =\n    width == null\n      ? undefined\n      : {width: typeof width === 'number' ? `${width}px` : width};\n\n  const paddingStyle =\n    padding != null && padding !== 0\n      ? {padding: token(`spacing.${padding}`)}\n      : undefined;\n\n  const popoverContent = popover.render(\n    <div\n      className={cx(styles.content, className)}\n      data-testid={dataTestId}\n      ref={ref}\n      style={{...paddingStyle, ...widthStyle, ...style}}>\n      {content}\n    </div>,\n    {\n      placement,\n      alignment,\n      className: styles.gap[placement],\n      style: {minWidth: 'anchor-size(width)'},\n    },\n  );\n\n  if (anchorRef != null && !isReactNode(children)) {\n    return <>{popoverContent}</>;\n  }\n\n  return (\n    <>\n      <div className={styles.anchor} ref={wrapperRef}>\n        {children}\n      </div>\n      {popoverContent}\n    </>\n  );\n}\n\nPopover.displayName = 'Popover';\n"]}