@astryxdesign/core 0.0.0-bootstrap.0 → 0.1.0-canary.0b5b49f

package/dist/Pagination/index.js

@@ -0,0 +1,11 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Pagination component and types
+ * @output Public API for Pagination module
+ * @position Barrel export; consumed by packages/core/src/index.ts
+ */
+export { Pagination, generatePageRange } from "./Pagination.js";

package/dist/Popover/Popover.d.ts

@@ -0,0 +1,175 @@
+/**
+ * @file Popover.tsx
+ * @input Uses React, usePopover hook
+ * @output Exports Popover component for click-triggered popovers
+ * @position Layer component; declarative wrapper around usePopover hook
+ *
+ * For hover-triggered overlays, use HoverCard instead.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Popover/Popover.test.tsx
+ * - /packages/core/src/Popover/index.ts
+ * - /apps/storybook/stories/Popover.stories.tsx
+ * - /packages/cli/templates/blocks/components/Popover/ (showcase blocks)
+ */
+import React, { type ReactElement, type ReactNode } from 'react';
+import type { BaseProps } from '../BaseProps';
+import type { LayerAlignment, LayerPlacement } from '../Layer/useLayer';
+/**
+ * Props passed to render-prop children for explicit trigger wiring.
+ */
+export interface PopoverTriggerRenderProps {
+    /** Ref callback — attach to the trigger element for anchor positioning. */
+    ref: (el: HTMLElement | null) => void;
+    /** Toggle the popover open/closed. */
+    onClick: () => void;
+    /** ARIA attribute: indicates the element triggers a dialog. */
+    'aria-haspopup': 'dialog';
+    /** ARIA attribute: whether the popover is currently open. */
+    'aria-expanded': boolean;
+    /** ARIA attribute: ID of the controlled popover element. */
+    'aria-controls': string;
+}
+export interface PopoverProps extends Pick<BaseProps, 'xstyle' | 'className' | 'style'> {
+    /**
+     * The trigger element. Accepts either:
+     *
+     * **ReactNode (automatic mode):** Must contain a `<button>` or
+     * `[role="button"]` element — the popover locates it and applies
+     * click/keydown handlers and ARIA attributes automatically.
+     * Components that consume `InteractiveRoleContext` (e.g., Token)
+     * will render as a button automatically when placed here.
+     *
+     * **Render function (explicit mode):** Receives `PopoverTriggerRenderProps`
+     * with ref, onClick, and ARIA attributes. The consumer is responsible
+     * for attaching these to their trigger element. Use this for custom
+     * triggers or third-party components.
+     *
+     * The trigger is rendered inside an anchor wrapper used for CSS anchor
+     * positioning. The wrapper is stable (no pressed-state transforms),
+     * preventing popover position jitter.
+     *
+     * When `anchorRef` is provided, children can be omitted and the popover
+     * attaches to the external ref element as a sibling.
+     *
+     * @example
+     * ```
+     * <Popover content={...}><Button label="Open" /></Popover>
+     * <Popover content={...}><Token label="Filter" /></Popover>
+     * <Popover content={...}>
+     *   {(triggerProps) => <MyCustomTrigger {...triggerProps} />}
+     * </Popover>
+     * ```
+     */
+    children?: ReactNode | ((props: PopoverTriggerRenderProps) => ReactNode);
+    /**
+     * External ref to use as the popover anchor.
+     * When provided (and no children), the popover attaches to this element
+     * instead of wrapping children. The referenced element must be a
+     * `<button>` or `[role="button"]` — the popover applies click/keydown
+     * handlers and ARIA attributes to it directly.
+     */
+    anchorRef?: React.RefObject<HTMLElement>;
+    /**
+     * Content to display inside the popover.
+     */
+    content: ReactNode;
+    /**
+     * Position placement relative to the trigger.
+     * Uses CSS anchor positioning via useLayer.
+     * @default 'below'
+     */
+    placement?: LayerPlacement;
+    /**
+     * Alignment along the placement axis.
+     * @default 'start'
+     */
+    alignment?: LayerAlignment;
+    /**
+     * Whether the popover is open (controlled mode).
+     * Omit for uncontrolled behavior.
+     */
+    isOpen?: boolean;
+    /**
+     * Callback fired when the popover visibility changes.
+     */
+    onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Whether the popover is enabled.
+     * When false, trigger interactions are ignored.
+     * @default true
+     */
+    isEnabled?: boolean;
+    /**
+     * Width of the popover container.
+     * Numbers are px, strings used as-is.
+     * @default 'auto'
+     */
+    width?: number | string;
+    /**
+     * Accessible label for the popover dialog.
+     * Recommended for accessibility (used as aria-label on the dialog).
+     */
+    label?: string;
+    /**
+     * Whether to include a hidden close button for accessibility.
+     * The button appears when keyboard users tab past the last element.
+     * @default true
+     */
+    hasCloseButton?: boolean;
+    /**
+     * Label for the hidden close button.
+     * @default "Close popover"
+     */
+    closeButtonLabel?: string;
+    /**
+     * Whether to auto-focus the first focusable element when the popover opens.
+     * Set to `false` for inline showcases or documentation previews.
+     * @default true
+     */
+    hasAutoFocus?: boolean;
+    /**
+     * Test ID for the popover container.
+     */
+    'data-testid'?: string;
+}
+/**
+ * A click-triggered popover for displaying interactive content anchored to a trigger.
+ *
+ * Implements the button + dialog ARIA pattern. The trigger must contain a
+ * `<button>` or `[role="button"]` element — the popover finds it and applies
+ * click/keydown handlers and ARIA attributes automatically.
+ *
+ * Uses an inline-flex wrapper as the CSS anchor for stable positioning
+ * (immune to pressed-state transforms like `:active { scale(0.98) }`).
+ *
+ * Focus is trapped inside the popover when open.
+ * Supports light dismiss (click outside or Escape to close).
+ *
+ * For hover-triggered overlays, use {@link HoverCard} instead.
+ *
+ * @example
+ * ```
+ * <Popover label="Settings" content={<SettingsPanel />} placement="below">
+ *   <Button label="Settings" />
+ * </Popover>
+ * <Popover
+ *   isOpen={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   label="Filter"
+ *   content={<FilterForm />}>
+ *   <Button label="Filter" />
+ * </Popover>
+ * <Popover
+ *   anchorRef={myButtonRef}
+ *   label="Actions"
+ *   content={<ActionMenu />}
+ *   placement="below"
+ * />
+ * ```
+ */
+export declare function Popover({ children, anchorRef, content, placement, alignment, isOpen, onOpenChange, isEnabled, width, label, hasCloseButton, closeButtonLabel, hasAutoFocus, xstyle, className, style, 'data-testid': testId, }: PopoverProps): ReactElement;
+export declare namespace Popover {
+    var displayName: string;
+}
+//# sourceMappingURL=Popover.d.ts.map

package/dist/Popover/Popover.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Popover.d.ts","sourceRoot":"","sources":["../../src/Popover/Popover.tsx"],"names":[],"mappings":"AAIA;;;;;;;;;;;;;GAaG;AAEH,OAAO,KAAK,EAAE,EAGZ,KAAK,YAAY,EACjB,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAIf,OAAO,KAAK,EAAC,SAAS,EAAC,MAAM,cAAc,CAAC;AAE5C,OAAO,KAAK,EAAC,cAAc,EAAE,cAAc,EAAC,MAAM,mBAAmB,CAAC;AA4BtE;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,2EAA2E;IAC3E,GAAG,EAAE,CAAC,EAAE,EAAE,WAAW,GAAG,IAAI,KAAK,IAAI,CAAC;IACtC,sCAAsC;IACtC,OAAO,EAAE,MAAM,IAAI,CAAC;IACpB,+DAA+D;IAC/D,eAAe,EAAE,QAAQ,CAAC;IAC1B,6DAA6D;IAC7D,eAAe,EAAE,OAAO,CAAC;IACzB,4DAA4D;IAC5D,eAAe,EAAE,MAAM,CAAC;CACzB;AAED,MAAM,WAAW,YAAa,SAAQ,IAAI,CACxC,SAAS,EACT,QAAQ,GAAG,WAAW,GAAG,OAAO,CACjC;IACC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;OA6BG;IACH,QAAQ,CAAC,EAAE,SAAS,GAAG,CAAC,CAAC,KAAK,EAAE,yBAAyB,KAAK,SAAS,CAAC,CAAC;IAEzE;;;;;;OAMG;IACH,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC,CAAC;IAEzC;;OAEG;IACH,OAAO,EAAE,SAAS,CAAC;IAEnB;;;;OAIG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,SAAS,CAAC,EAAE,cAAc,CAAC;IAE3B;;;OAGG;IACH,MAAM,CAAC,EAAE,OAAO,CAAC;IAEjB;;OAEG;IACH,YAAY,CAAC,EAAE,CAAC,MAAM,EAAE,OAAO,KAAK,IAAI,CAAC;IAEzC;;;;OAIG;IACH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAExB;;;OAGG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;;OAIG;IACH,cAAc,CAAC,EAAE,OAAO,CAAC;IAEzB;;;OAGG;IACH,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B;;;;OAIG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IAEvB;;OAEG;IACH,aAAa,CAAC,EAAE,MAAM,CAAC;CACxB;AAsCD;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAkCG;AACH,wBAAgB,OAAO,CAAC,EACtB,QAAQ,EACR,SAAS,EACT,OAAO,EACP,SAAmB,EACnB,SAAmB,EACnB,MAAM,EACN,YAAY,EACZ,SAAgB,EAChB,KAAK,EACL,KAAK,EACL,cAAc,EACd,gBAAgB,EAChB,YAAY,EACZ,MAAM,EACN,SAAS,EACT,KAAK,EACL,aAAa,EAAE,MAAM,GACtB,EAAE,YAAY,GAAG,YAAY,CA+Q7B;yBAjSe,OAAO"}

package/dist/Popover/Popover.js

@@ -0,0 +1,354 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file Popover.tsx
+ * @input Uses React, usePopover hook
+ * @output Exports Popover component for click-triggered popovers
+ * @position Layer component; declarative wrapper around usePopover hook
+ *
+ * For hover-triggered overlays, use HoverCard instead.
+ *
+ * SYNC: When modified, update these files to stay in sync:
+ * - /packages/core/src/Popover/Popover.test.tsx
+ * - /packages/core/src/Popover/index.ts
+ * - /apps/storybook/stories/Popover.stories.tsx
+ * - /packages/cli/templates/blocks/components/Popover/ (showcase blocks)
+ */
+import React, { useCallback, useRef } from 'react';
+import { useIsomorphicLayoutEffect } from "../hooks/useIsomorphicLayoutEffect.js";
+import * as stylex from '@stylexjs/stylex';
+import { mergeProps } from "../utils/index.js";
+import { usePopover } from "./usePopover.js";
+import { layerAnimations } from "../Layer/layerAnimations.stylex.js";
+import "../theme/tokens.stylex.js";
+import { spacingVars } from "../theme/tokens.stylex.js";
+import { InteractiveRoleContext } from "../InteractiveRoleContext/InteractiveRoleContext.js";
+import { themeProps } from "../utils/themeProps.js";
+
+// =============================================================================
+// Helpers
+// =============================================================================
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+const BUTTON_SELECTOR = 'button, [role="button"]';
+
+/**
+ * Find the trigger button inside a container element.
+ * Looks for `<button>` or `[role="button"]` — either the element itself
+ * or the first matching descendant.
+ */
+function findTriggerButton(el) {
+  if (el.matches(BUTTON_SELECTOR)) {
+    return el;
+  }
+  return el.querySelector(BUTTON_SELECTOR);
+}
+
+// =============================================================================
+// Types
+// =============================================================================
+
+/**
+ * Props passed to render-prop children for explicit trigger wiring.
+ */
+
+// =============================================================================
+// Styles
+// =============================================================================
+
+const styles = {
+  contentPadding: {
+    kLKAdn: "x1vlblms",
+    kGO01o: "xvmdzux",
+    kZCmMZ: "x126nfab",
+    kwRFfy: "x1t818jl",
+    $$css: true
+  },
+  gap: {
+    keoZOQ: "xcsaf9d",
+    k1K539: "x14cgwvg",
+    $$css: true
+  },
+  customWidth: width => [{
+    kzqmXN: (typeof width === 'number' ? `${width}px` : width) != null ? "x5lhr3w" : typeof width === 'number' ? `${width}px` : width,
+    $$css: true
+  }, {
+    "--x-width": (val => typeof val === "number" ? val + "px" : val != null ? val : undefined)(typeof width === 'number' ? `${width}px` : width)
+  }],
+  matchTrigger: {
+    k7Eaqz: "xrzjruh",
+    $$css: true
+  }
+};
+
+// =============================================================================
+// Component
+// =============================================================================
+
+/**
+ * A click-triggered popover for displaying interactive content anchored to a trigger.
+ *
+ * Implements the button + dialog ARIA pattern. The trigger must contain a
+ * `<button>` or `[role="button"]` element — the popover finds it and applies
+ * click/keydown handlers and ARIA attributes automatically.
+ *
+ * Uses an inline-flex wrapper as the CSS anchor for stable positioning
+ * (immune to pressed-state transforms like `:active { scale(0.98) }`).
+ *
+ * Focus is trapped inside the popover when open.
+ * Supports light dismiss (click outside or Escape to close).
+ *
+ * For hover-triggered overlays, use {@link HoverCard} instead.
+ *
+ * @example
+ * ```
+ * <Popover label="Settings" content={<SettingsPanel />} placement="below">
+ *   <Button label="Settings" />
+ * </Popover>
+ * <Popover
+ *   isOpen={isOpen}
+ *   onOpenChange={setIsOpen}
+ *   label="Filter"
+ *   content={<FilterForm />}>
+ *   <Button label="Filter" />
+ * </Popover>
+ * <Popover
+ *   anchorRef={myButtonRef}
+ *   label="Actions"
+ *   content={<ActionMenu />}
+ *   placement="below"
+ * />
+ * ```
+ */
+export function Popover({
+  children,
+  anchorRef,
+  content,
+  placement = 'below',
+  alignment = 'start',
+  isOpen,
+  onOpenChange,
+  isEnabled = true,
+  width,
+  label,
+  hasCloseButton,
+  closeButtonLabel,
+  hasAutoFocus,
+  xstyle,
+  className,
+  style,
+  'data-testid': testId
+}) {
+  const wrapperRef = useRef(null);
+  const isControlled = isOpen !== undefined;
+  // Track when the popover was last hidden by light dismiss to prevent
+  // the trigger click from immediately re-opening it.
+  const lastHideTimeRef = useRef(0);
+  const handlePopoverShow = useCallback(() => {
+    onOpenChange?.(true);
+  }, [onOpenChange]);
+  const handlePopoverHide = useCallback(() => {
+    lastHideTimeRef.current = Date.now();
+    onOpenChange?.(false);
+  }, [onOpenChange]);
+  const popover = usePopover({
+    dialogLabel: label,
+    hasLightDismiss: true,
+    hasCloseButton,
+    closeButtonLabel,
+    hasAutoFocus,
+    onShow: handlePopoverShow,
+    onHide: handlePopoverHide
+  });
+
+  // Shared handler for click events on the trigger button.
+  const handleTriggerClick = useCallback(() => {
+    if (!isEnabled) {
+      return;
+    }
+    // If the popover was just closed by light dismiss (clicking outside),
+    // the trigger click fires in the same event — skip re-opening.
+    if (Date.now() - lastHideTimeRef.current < 50) {
+      return;
+    }
+    popover.toggle();
+  }, [isEnabled, popover]);
+
+  // Shared handler for keydown events on role="button" elements.
+  // Native <button> synthesizes click on Enter/Space, but role="button"
+  // does not — we need to handle it explicitly.
+  const handleTriggerKeyDown = useCallback(e => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      handleTriggerClick();
+    }
+  }, [handleTriggerClick]);
+
+  /**
+   * Attach click/keydown handlers and ARIA attributes to a trigger button.
+   * Used by both sibling mode and children mode.
+   */
+  const attachTrigger = useCallback(button => {
+    // ARIA attributes
+    button.setAttribute('aria-haspopup', popover.triggerProps['aria-haspopup']);
+    button.setAttribute('aria-expanded', String(popover.triggerProps['aria-expanded']));
+    button.setAttribute('aria-controls', popover.triggerProps['aria-controls']);
+
+    // Event handlers
+    button.addEventListener('click', handleTriggerClick);
+    // Only add keydown for role="button" — native <button> already
+    // synthesizes click events for Enter/Space.
+    const needsKeyDown = button.tagName !== 'BUTTON' && button.getAttribute('role') === 'button';
+    if (needsKeyDown) {
+      button.addEventListener('keydown', handleTriggerKeyDown);
+    }
+    return () => {
+      button.removeAttribute('aria-haspopup');
+      button.removeAttribute('aria-expanded');
+      button.removeAttribute('aria-controls');
+      button.removeEventListener('click', handleTriggerClick);
+      if (needsKeyDown) {
+        button.removeEventListener('keydown', handleTriggerKeyDown);
+      }
+    };
+  }, [popover, handleTriggerClick, handleTriggerKeyDown]);
+
+  // Sibling mode: attach to external anchorRef
+  useIsomorphicLayoutEffect(() => {
+    if (!anchorRef) {
+      return;
+    }
+    const el = anchorRef.current;
+    if (!el) {
+      return;
+    }
+    const button = findTriggerButton(el);
+    if (!button) {
+      console.warn('Popover: anchorRef must reference a <button> or [role="button"] element. ' + 'The popover trigger implements the button + dialog ARIA pattern.');
+    }
+    if (!button) {
+      return;
+    }
+
+    // Set up anchor positioning on the anchorRef element itself
+    popover.triggerRef(el);
+
+    // Attach handlers + ARIA to the button
+    const detach = attachTrigger(button);
+    return () => {
+      popover.triggerRef(null);
+      detach();
+    };
+  }, [anchorRef, popover, attachTrigger]);
+
+  // Children mode: use wrapper as CSS anchor, find button inside for
+  // ARIA + event handlers.
+  useIsomorphicLayoutEffect(() => {
+    if (anchorRef) {
+      return;
+    } // Skip if using anchorRef mode
+    if (typeof children === 'function') {
+      return;
+    } // Skip if using render prop mode
+
+    const wrapper = wrapperRef.current;
+    if (!wrapper) {
+      return;
+    }
+
+    // Use the wrapper as the CSS anchor — it doesn't receive pressed-state
+    // transforms, so the anchor position stays stable.
+    popover.triggerRef(wrapper);
+
+    // Find the button inside the wrapper
+    const button = findTriggerButton(wrapper);
+    if (!button) {
+      console.warn('Popover: children must contain a <button> or [role="button"] element. ' + 'The popover trigger implements the button + dialog ARIA pattern.');
+    }
+    if (!button) {
+      return;
+    }
+    const detach = attachTrigger(button);
+    return () => {
+      popover.triggerRef(null);
+      detach();
+    };
+  }, [anchorRef, popover, attachTrigger]);
+
+  // Sync controlled state
+  useIsomorphicLayoutEffect(() => {
+    if (!isControlled) {
+      return;
+    }
+    if (isOpen && !popover.isOpen) {
+      popover.show();
+    } else if (!isOpen && popover.isOpen) {
+      popover.hide();
+    }
+  }, [isOpen, isControlled, popover]);
+
+  // Determine popover xstyle
+  const popoverXstyle = width ? styles.customWidth(width) : styles.matchTrigger;
+
+  // Sibling mode: render only the popover (no wrapper needed)
+  if (anchorRef && children == null) {
+    return /*#__PURE__*/_jsx(_Fragment, {
+      children: popover.render(/*#__PURE__*/_jsx("div", {
+        "data-testid": testId,
+        ...mergeProps(themeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
+        children: content
+      }), {
+        placement,
+        alignment,
+        xstyle: [popoverXstyle, styles.gap, layerAnimations[placement]]
+      })
+    });
+  }
+
+  // Render prop mode: children is a function — pass trigger props directly
+  const isRenderProp = typeof children === 'function';
+  if (isRenderProp) {
+    const triggerProps = {
+      ref: popover.triggerRef,
+      onClick: handleTriggerClick,
+      'aria-haspopup': 'dialog',
+      'aria-expanded': popover.isOpen,
+      'aria-controls': popover.id
+    };
+    return /*#__PURE__*/_jsxs(_Fragment, {
+      children: [children(triggerProps), popover.render(/*#__PURE__*/_jsx("div", {
+        "data-testid": testId,
+        ...mergeProps(themeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
+        children: content
+      }), {
+        placement,
+        alignment,
+        xstyle: [popoverXstyle, styles.gap, layerAnimations[placement]]
+      })]
+    });
+  }
+
+  // Automatic mode: wrap children in context + anchor wrapper
+  return /*#__PURE__*/_jsxs(_Fragment, {
+    children: [/*#__PURE__*/_jsx(InteractiveRoleContext, {
+      value: "button",
+      children: /*#__PURE__*/_jsx("div", {
+        ref: wrapperRef,
+        ...{
+          className: "x3nfvp2"
+        },
+        children: children
+      })
+    }), popover.render(/*#__PURE__*/_jsx("div", {
+      "data-testid": testId,
+      ...mergeProps(themeProps('popover'), stylex.props(styles.contentPadding, xstyle), className, style),
+      children: content
+    }), {
+      placement,
+      alignment,
+      xstyle: [popoverXstyle, styles.gap, layerAnimations[placement]]
+    })]
+  });
+}
+Popover.displayName = 'Popover';

package/dist/Popover/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @file index.ts
+ * @input Popover component and hook
+ * @output Exports all Popover module public API
+ * @position Entry point for Popover module
+ *
+ * SYNC: When adding new Popover files, update exports here
+ */
+export { usePopover } from './usePopover';
+export type { UsePopoverOptions, UsePopoverReturn } from './usePopover';
+export { Popover } from './Popover';
+export type { PopoverProps, PopoverTriggerRenderProps } from './Popover';
+//# sourceMappingURL=index.d.ts.map

package/dist/Popover/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/Popover/index.ts"],"names":[],"mappings":"AAIA;;;;;;;GAOG;AAGH,OAAO,EAAC,UAAU,EAAC,MAAM,cAAc,CAAC;AACxC,YAAY,EAAC,iBAAiB,EAAE,gBAAgB,EAAC,MAAM,cAAc,CAAC;AAGtE,OAAO,EAAC,OAAO,EAAC,MAAM,WAAW,CAAC;AAClC,YAAY,EAAC,YAAY,EAAE,yBAAyB,EAAC,MAAM,WAAW,CAAC"}

package/dist/Popover/index.js

@@ -0,0 +1,17 @@
+// Copyright (c) Meta Platforms, Inc. and affiliates.
+
+'use client';
+
+/**
+ * @file index.ts
+ * @input Popover component and hook
+ * @output Exports all Popover module public API
+ * @position Entry point for Popover module
+ *
+ * SYNC: When adding new Popover files, update exports here
+ */
+
+// Popover hook
+export { usePopover } from "./usePopover.js";
+// Popover component
+export { Popover } from "./Popover.js";