@vitinnczk/onyx-ui 0.0.0-stage → 0.2.0

package/dist/components/Link/Link.d.ts

@@ -0,0 +1,23 @@
+import { ElementType } from 'react';
+import { PolymorphicComponent, PolymorphicPropsWithRef } from '../../utils/polymorphic.js';
+export type LinkVariant = 'default' | 'muted' | 'inherit';
+export interface LinkOwnProps {
+    /**
+     * `inherit` takes the color of the surrounding text and relies on the underline.
+     * @default 'default'
+     */
+    variant?: LinkVariant;
+    /**
+     * Opens the link in a new tab, adds a safe `rel` and tells every user about it.
+     * @default false
+     */
+    external?: boolean;
+    /**
+     * Text announced after the link text when `external`.
+     * @default '(opens in a new tab)'
+     */
+    externalLabel?: string;
+}
+export type LinkProps<As extends ElementType = 'a'> = PolymorphicPropsWithRef<As, LinkOwnProps>;
+/** Text link. Use `as` to render a router link while keeping the styles. */
+export declare const Link: PolymorphicComponent<"a", LinkOwnProps>;

package/dist/components/Link/Link.js

@@ -0,0 +1,27 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { ExternalLinkIcon as t } from "../Icon/icons.js";
+import { VisuallyHidden as n } from "../VisuallyHidden/VisuallyHidden.js";
+import r from "./Link.module.js";
+import { forwardRef as i } from "react";
+import { Fragment as a, jsx as o, jsxs as s } from "react/jsx-runtime";
+// src/components/Link/Link.tsx
+var c = i(function({ as: i = "a", variant: c = "default", external: l = !1, externalLabel: u = "(opens in a new tab)", className: d, children: f, ...p }, m) {
+	return /* @__PURE__ */ s(i, {
+		ref: m,
+		className: e(r.link, r[c], d),
+		...l && {
+			target: "_blank",
+			rel: "noopener noreferrer"
+		},
+		...p,
+		children: [f, l && /* @__PURE__ */ s(a, { children: [
+			" ",
+			/* @__PURE__ */ o(t, { className: r.externalIcon }),
+			/* @__PURE__ */ o(n, { children: u })
+		] })]
+	});
+});
+export { c as Link };
+
+//# sourceMappingURL=Link.js.map

package/dist/components/Link/Link.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.js","names":["styles","_Fragment","Link_module_default","Link","forwardRef","Component","props","cn","variant","className","external","children","Fragment","ExternalLinkIcon","VisuallyHidden","externalLabel"],"sources":["../../../src/components/Link/Link.tsx"],"sourcesContent":["import { forwardRef, type ElementType } from 'react';\nimport { cn } from '@/utils/cn';\nimport type {\n  PolymorphicComponent,\n  PolymorphicProps,\n  PolymorphicPropsWithRef,\n} from '@/utils/polymorphic';\nimport { ExternalLinkIcon } from '../Icon';\nimport { VisuallyHidden } from '../VisuallyHidden';\nimport styles from './Link.module.css';\n\nexport type LinkVariant = 'default' | 'muted' | 'inherit';\n\nexport interface LinkOwnProps {\n  /**\n   * `inherit` takes the color of the surrounding text and relies on the underline.\n   * @default 'default'\n   */\n  variant?: LinkVariant;\n  /**\n   * Opens the link in a new tab, adds a safe `rel` and tells every user about it.\n   * @default false\n   */\n  external?: boolean;\n  /**\n   * Text announced after the link text when `external`.\n   * @default '(opens in a new tab)'\n   */\n  externalLabel?: string;\n}\n\nexport type LinkProps<As extends ElementType = 'a'> = PolymorphicPropsWithRef<As, LinkOwnProps>;\n\n/** Text link. Use `as` to render a router link while keeping the styles. */\nexport const Link = forwardRef<HTMLAnchorElement, PolymorphicProps<'a', LinkOwnProps>>(\n  function Link(\n    {\n      as: Component = 'a',\n      variant = 'default',\n      external = false,\n      externalLabel = '(opens in a new tab)',\n      className,\n      children,\n      ...props\n    },\n    ref,\n  ) {\n    return (\n      <Component\n        ref={ref}\n        className={cn(styles.link, styles[variant], className)}\n        {...(external && { target: '_blank', rel: 'noopener noreferrer' })}\n        {...props}\n      >\n        {children}\n        {external && (\n          <>\n            {' '}\n            <ExternalLinkIcon className={styles.externalIcon} />\n            <VisuallyHidden>{externalLabel}</VisuallyHidden>\n          </>\n        )}\n      </Component>\n    );\n  },\n) as PolymorphicComponent<'a', LinkOwnProps>;\n"],"mappings":";;;;;;;;AAkCA,IAAaG,IAAOC,EAClB,SACE,EACE,IAAIC,IAAY,KAChB,aAAU,WACV,cAAW,IACX,mBAAgB,wBAChB,cACA,aACA,GAAGC,KAEL,GACA;CACA,OACE,kBAACD,GAAD;EACO;EACL,WAAWE,EAAGP,EAAO,MAAMA,EAAOQ,IAAUC,CAAS;EACrD,GAAKC,KAAY;GAAE,QAAQ;GAAU,KAAK;EAAsB;EAChE,GAAIJ;EAJN,UAAA,CAMGK,GACAD,KACC,kBAAAT,GAAA,EAAA,UAAA;GACG;GACD,kBAACY,GAAD,EAAkB,WAAWb,EAAO,aAAe,CAAA;GACnD,kBAACc,GAAD,EAAA,UAAiBC,EAA8B,CAAA;EAC/C,EAAA,CAAA,CAEK;;AAEf,CACF"}

package/dist/components/Link/Link.module.js

@@ -0,0 +1,11 @@
+// src/components/Link/Link.module.css
+var e = "onyx-link-Ly-e3 onyx-focusRing-qmcYD", t = "onyx-muted-fS2v1", n = "onyx-inherit-5mXEJ", r = "onyx-externalIcon-5jtwn", i = {
+	link: e,
+	default: "onyx-default-RuJIr",
+	muted: t,
+	inherit: n,
+	externalIcon: r
+};
+export { i as default, r as externalIcon, n as inherit, e as link, t as muted };
+
+//# sourceMappingURL=Link.module.js.map

package/dist/components/Link/Link.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Link.module.js","names":["link","muted","inherit","externalIcon","Link_module_default","\"default\""],"sources":["../../../src/components/Link/Link.module.css"],"sourcesContent":[".link {\n  composes: focusRing from '../../styles/focus-ring.module.css';\n  text-decoration-line: underline;\n  text-decoration-thickness: var(--border-width-thin);\n  text-underline-offset: 0.2em;\n  cursor: pointer;\n  border-radius: var(--radius-sm);\n  transition-timing-function: var(--easing-standard);\n  transition-duration: var(--duration-fast);\n  transition-property: color, text-decoration-color, text-decoration-thickness;\n}\n\n.link:hover {\n  text-decoration-thickness: var(--border-width-thick);\n}\n\n.default {\n  color: var(--color-primary-text);\n}\n\n.default:active {\n  color: var(--color-text);\n}\n\n.muted {\n  color: var(--color-text-muted);\n}\n\n.muted:hover {\n  color: var(--color-text);\n}\n\n.inherit {\n  color: inherit;\n}\n\n.externalIcon {\n  font-size: 0.875em;\n}\n"],"mappings":""}

package/dist/components/Link/index.d.ts

@@ -0,0 +1,2 @@
+export { Link } from './Link.js';
+export type { LinkOwnProps, LinkProps, LinkVariant } from './Link.js';

package/dist/components/Modal/DialogSurface.d.ts

@@ -0,0 +1,39 @@
+import { ReactNode, RefObject } from 'react';
+export interface DialogOptions {
+    /** Heading of the dialog, which also names it. */
+    title: ReactNode;
+    /** Text below the title that describes the dialog, linked with `aria-describedby`. */
+    description?: ReactNode;
+    /** Content of the dialog. */
+    children?: ReactNode;
+    /** Actions shown at the bottom, usually buttons. */
+    footer?: ReactNode;
+    /**
+     * Use `alertdialog` for urgent confirmations that need an answer.
+     * @default 'dialog'
+     */
+    role?: 'dialog' | 'alertdialog';
+    /** @default true */
+    closeOnOverlayClick?: boolean;
+    /** @default true */
+    closeOnEscape?: boolean;
+    /** Element focused on open. Defaults to the first focusable element. */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /** @default false */
+    hideCloseButton?: boolean;
+    /**
+     * Accessible name of the close button.
+     * @default 'Close'
+     */
+    closeLabel?: string;
+    /** Class of the dialog panel. */
+    className?: string;
+}
+interface DialogSurfaceProps extends DialogOptions {
+    open: boolean;
+    onClose: () => void;
+    panelClassName?: string;
+    rootClassName?: string;
+}
+export declare const DialogSurface: import('react').ForwardRefExoticComponent<DialogSurfaceProps & import('react').RefAttributes<HTMLDivElement>>;
+export {};

package/dist/components/Modal/DialogSurface.js

@@ -0,0 +1,69 @@
+"use client";
+import { cn as e } from "../../utils/cn.js";
+import { CloseIcon as t } from "../Icon/icons.js";
+import { IconButton as n } from "../IconButton/IconButton.js";
+import { mergeRefs as r } from "../../utils/mergeRefs.js";
+import { useClickOutside as i } from "../../hooks/useClickOutside.js";
+import { useEscapeKey as a } from "../../hooks/useEscapeKey.js";
+import { useFocusTrap as o } from "../../hooks/useFocusTrap.js";
+import { useScrollLock as s } from "../../hooks/useScrollLock.js";
+import { Portal as c } from "../Portal/Portal.js";
+import l from "./DialogSurface.module.js";
+import { forwardRef as u, useId as d, useMemo as f, useRef as p } from "react";
+import { jsx as m, jsxs as h } from "react/jsx-runtime";
+// src/components/Modal/DialogSurface.tsx
+var g = u(function({ open: u, onClose: g, title: _, description: v, children: y, footer: b, role: x = "dialog", closeOnOverlayClick: S = !0, closeOnEscape: C = !0, initialFocus: w, hideCloseButton: T = !1, closeLabel: E = "Close", className: D, panelClassName: O, rootClassName: k }, A) {
+	let j = d(), M = `${j}-title`, N = `${j}-description`, P = p(null), F = p(null), I = f(() => r(P, A), [A]), L = v != null;
+	return o(P, {
+		enabled: u,
+		initialFocus: w
+	}), s({ enabled: u }), a(g, { enabled: u && C }), i(P, (e) => {
+		e.target === F.current && g();
+	}, { enabled: u && S }), u ? /* @__PURE__ */ m(c, { children: /* @__PURE__ */ h("div", {
+		className: e(l.root, k),
+		children: [/* @__PURE__ */ m("div", {
+			ref: F,
+			className: l.backdrop,
+			"aria-hidden": "true"
+		}), /* @__PURE__ */ h("div", {
+			ref: I,
+			role: x,
+			"aria-modal": "true",
+			"aria-labelledby": M,
+			"aria-describedby": L ? N : void 0,
+			tabIndex: -1,
+			className: e(l.panel, O, D),
+			children: [
+				/* @__PURE__ */ h("header", {
+					className: l.header,
+					children: [/* @__PURE__ */ m("h2", {
+						id: M,
+						className: l.title,
+						children: _
+					}), !T && /* @__PURE__ */ m(n, {
+						label: E,
+						size: "sm",
+						className: l.close,
+						onClick: g,
+						children: /* @__PURE__ */ m(t, {})
+					})]
+				}),
+				/* @__PURE__ */ h("div", {
+					className: l.body,
+					children: [L && /* @__PURE__ */ m("p", {
+						id: N,
+						className: l.description,
+						children: v
+					}), y]
+				}),
+				b !== void 0 && /* @__PURE__ */ m("footer", {
+					className: l.footer,
+					children: b
+				})
+			]
+		})]
+	}) }) : null;
+});
+export { g as DialogSurface };
+
+//# sourceMappingURL=DialogSurface.js.map

package/dist/components/Modal/DialogSurface.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogSurface.js","names":["styles","DialogSurface_module_default","DialogSurface","forwardRef","id","useId","titleId","descriptionId","panel","useRef","backdrop","attachPanel","useMemo","mergeRefs","ref","hasDescription","description","useFocusTrap","open","useScrollLock","useEscapeKey","onClose","closeOnEscape","useClickOutside","event","closeOnOverlayClick","Portal","cn","rootClassName","panelClassName","className","title","hideCloseButton","IconButton","closeLabel","CloseIcon","children","footer"],"sources":["../../../src/components/Modal/DialogSurface.tsx"],"sourcesContent":["import { forwardRef, useId, useMemo, useRef, type ReactNode, type RefObject } from 'react';\nimport { useClickOutside } from '@/hooks/useClickOutside';\nimport { useEscapeKey } from '@/hooks/useEscapeKey';\nimport { useFocusTrap } from '@/hooks/useFocusTrap';\nimport { useScrollLock } from '@/hooks/useScrollLock';\nimport { cn } from '@/utils/cn';\nimport { mergeRefs } from '@/utils/mergeRefs';\nimport { CloseIcon } from '../Icon';\nimport { IconButton } from '../IconButton';\nimport { Portal } from '../Portal';\nimport styles from './DialogSurface.module.css';\n\nexport interface DialogOptions {\n  /** Heading of the dialog, which also names it. */\n  title: ReactNode;\n  /** Text below the title that describes the dialog, linked with `aria-describedby`. */\n  description?: ReactNode;\n  /** Content of the dialog. */\n  children?: ReactNode;\n  /** Actions shown at the bottom, usually buttons. */\n  footer?: ReactNode;\n  /**\n   * Use `alertdialog` for urgent confirmations that need an answer.\n   * @default 'dialog'\n   */\n  role?: 'dialog' | 'alertdialog';\n  /** @default true */\n  closeOnOverlayClick?: boolean;\n  /** @default true */\n  closeOnEscape?: boolean;\n  /** Element focused on open. Defaults to the first focusable element. */\n  initialFocus?: RefObject<HTMLElement | null>;\n  /** @default false */\n  hideCloseButton?: boolean;\n  /**\n   * Accessible name of the close button.\n   * @default 'Close'\n   */\n  closeLabel?: string;\n  /** Class of the dialog panel. */\n  className?: string;\n}\n\ninterface DialogSurfaceProps extends DialogOptions {\n  open: boolean;\n  onClose: () => void;\n  panelClassName?: string;\n  rootClassName?: string;\n}\n\nexport const DialogSurface = forwardRef<HTMLDivElement, DialogSurfaceProps>(function DialogSurface(\n  {\n    open,\n    onClose,\n    title,\n    description,\n    children,\n    footer,\n    role = 'dialog',\n    closeOnOverlayClick = true,\n    closeOnEscape = true,\n    initialFocus,\n    hideCloseButton = false,\n    closeLabel = 'Close',\n    className,\n    panelClassName,\n    rootClassName,\n  },\n  ref,\n) {\n  const id = useId();\n  const titleId = `${id}-title`;\n  const descriptionId = `${id}-description`;\n  const panel = useRef<HTMLDivElement>(null);\n  const backdrop = useRef<HTMLDivElement>(null);\n  const attachPanel = useMemo(() => mergeRefs(panel, ref), [ref]);\n  const hasDescription = description !== undefined && description !== null;\n\n  useFocusTrap(panel, { enabled: open, initialFocus });\n  useScrollLock({ enabled: open });\n  useEscapeKey(onClose, { enabled: open && closeOnEscape });\n  useClickOutside(\n    panel,\n    (event) => {\n      if (event.target === backdrop.current) onClose();\n    },\n    { enabled: open && closeOnOverlayClick },\n  );\n\n  if (!open) return null;\n\n  return (\n    <Portal>\n      <div className={cn(styles.root, rootClassName)}>\n        <div ref={backdrop} className={styles.backdrop} aria-hidden=\"true\" />\n        <div\n          ref={attachPanel}\n          role={role}\n          aria-modal=\"true\"\n          aria-labelledby={titleId}\n          aria-describedby={hasDescription ? descriptionId : undefined}\n          tabIndex={-1}\n          className={cn(styles.panel, panelClassName, className)}\n        >\n          <header className={styles.header}>\n            <h2 id={titleId} className={styles.title}>\n              {title}\n            </h2>\n            {!hideCloseButton && (\n              <IconButton label={closeLabel} size=\"sm\" className={styles.close} onClick={onClose}>\n                <CloseIcon />\n              </IconButton>\n            )}\n          </header>\n          <div className={styles.body}>\n            {hasDescription && (\n              <p id={descriptionId} className={styles.description}>\n                {description}\n              </p>\n            )}\n            {children}\n          </div>\n          {footer !== undefined && <footer className={styles.footer}>{footer}</footer>}\n        </div>\n      </div>\n    </Portal>\n  );\n});\n"],"mappings":";;;;;;;;;;;;;;AAkDA,IAAaE,IAAgBC,EAA+C,SAC1E,EACE,SACA,YACA,UACA,gBACA,aACA,WACA,UAAO,UACP,yBAAsB,IACtB,mBAAgB,IAChB,iBACA,qBAAkB,IAClB,gBAAa,SACb,cACA,mBACA,oBAEF,GACA;CACA,IAAMC,IAAKC,EAAM,GACXC,IAAU,GAAGF,EAAG,SAChBG,IAAgB,GAAGH,EAAG,eACtBI,IAAQC,EAAuB,IAAI,GACnCC,IAAWD,EAAuB,IAAI,GACtCE,IAAcC,QAAcC,EAAUL,GAAOM,CAAG,GAAG,CAACA,CAAG,CAAC,GACxDC,IAAiBC,KAA6C;CAepE,OAbAC,EAAaT,GAAO;EAAE,SAASU;EAAM;CAAa,CAAC,GACnDC,EAAc,EAAE,SAASD,EAAK,CAAC,GAC/BE,EAAaC,GAAS,EAAE,SAASH,KAAQI,EAAc,CAAC,GACxDC,EACEf,IACC,MAAU;EACT,AAAIgB,EAAM,WAAWd,EAAS,WAASW,EAAQ;CACjD,GACA,EAAE,SAASH,KAAQO,EAAoB,CACzC,GAEKP,IAGH,kBAACQ,GAAD,EAAA,UACE,kBAAC,OAAD;EAAK,WAAWC,EAAG3B,EAAO,MAAM4B,CAAa;EAA7C,UAAA,CACE,kBAAC,OAAD;GAAK,KAAKlB;GAAU,WAAWV,EAAO;GAAU,eAAY;EAAQ,CAAA,GACpE,kBAAC,OAAD;GACE,KAAKW;GACC;GACN,cAAW;GACX,mBAAiBL;GACjB,oBAAkBS,IAAiBR,IAAgB,KAAA;GACnD,UAAU;GACV,WAAWoB,EAAG3B,EAAO,OAAO6B,GAAgBC,CAAS;GAPvD,UAAA;IASE,kBAAC,UAAD;KAAQ,WAAW9B,EAAO;KAA1B,UAAA,CACE,kBAAC,MAAD;MAAI,IAAIM;MAAS,WAAWN,EAAO;MAChC,UAAA+B;KACC,CAAA,GACH,CAACC,KACA,kBAACC,GAAD;MAAY,OAAOC;MAAY,MAAK;MAAK,WAAWlC,EAAO;MAAO,SAASqB;MACzE,UAAA,kBAACc,GAAD,CAAY,CAAA;KACF,CAAA,CAER;;IACR,kBAAC,OAAD;KAAK,WAAWnC,EAAO;KAAvB,UAAA,CACGe,KACC,kBAAC,KAAD;MAAG,IAAIR;MAAe,WAAWP,EAAO;MACrC,UAAAgB;KACA,CAAA,GAEJoB,CACE;;IACJC,MAAW,KAAA,KAAa,kBAAC,UAAD;KAAQ,WAAWrC,EAAO;KAAS,UAAAqC;IAAe,CAAA;GACxE;EACF,CAAA,CAAA;CACC,CAAA,EAAA,CAAA,IApCQ;AAsCpB,CAAC"}

package/dist/components/Modal/DialogSurface.module.js

@@ -0,0 +1,16 @@
+// src/components/Modal/DialogSurface.module.css
+var e = "onyx-root-t1dl-", t = "onyx-backdrop-VCObC", n = "onyx-fade-in-vHYBw", r = "onyx-panel-kvRPN", i = "onyx-header-lv6WX", a = "onyx-title-lB-A8", o = "onyx-close-5HTP4", s = "onyx-body-Sllai", c = "onyx-description--yJR3", l = "onyx-footer-duSFf", u = {
+	root: e,
+	backdrop: t,
+	fadeIn: n,
+	panel: r,
+	header: i,
+	title: a,
+	close: o,
+	body: s,
+	description: c,
+	footer: l
+};
+export { t as backdrop, s as body, o as close, u as default, c as description, n as fadeIn, l as footer, i as header, r as panel, e as root, a as title };
+
+//# sourceMappingURL=DialogSurface.module.js.map

package/dist/components/Modal/DialogSurface.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogSurface.module.js","names":["root","backdrop","fadeIn","panel","header","title","close","body","description","footer","DialogSurface_module_default"],"sources":["../../../src/components/Modal/DialogSurface.module.css"],"sourcesContent":[".root {\n  position: fixed;\n  inset: 0;\n  z-index: var(--z-index-modal);\n  display: flex;\n}\n\n.backdrop {\n  position: absolute;\n  inset: 0;\n  background-color: var(--color-backdrop);\n  animation: fade-in var(--duration-normal) var(--easing-enter);\n}\n\n.panel {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  max-height: 100%;\n  color: var(--color-text);\n  background-color: var(--color-surface-raised);\n  box-shadow: var(--shadow-xl);\n  outline: none;\n}\n\n.panel:focus-visible {\n  outline: var(--focus-ring-width) solid var(--color-focus);\n  outline-offset: calc(var(--focus-ring-width) * -1);\n}\n\n.header {\n  display: flex;\n  flex-shrink: 0;\n  gap: var(--space-3);\n  align-items: flex-start;\n  justify-content: space-between;\n  padding: var(--space-5) var(--space-5) var(--space-3) var(--space-6);\n}\n\n.title {\n  margin: 0;\n  padding-top: var(--space-1);\n  font-size: var(--font-size-lg);\n  font-weight: var(--font-weight-semibold);\n  line-height: var(--line-height-snug);\n}\n\n.close {\n  flex-shrink: 0;\n}\n\n.body {\n  display: grid;\n  flex: 1;\n  gap: var(--space-4);\n  align-content: start;\n  min-height: 0;\n  padding: 0 var(--space-6) var(--space-6);\n  overflow-y: auto;\n  font-size: var(--font-size-sm);\n  line-height: var(--line-height-normal);\n}\n\n.description {\n  margin: 0;\n  color: var(--color-text-muted);\n}\n\n.footer {\n  display: flex;\n  flex-shrink: 0;\n  flex-wrap: wrap;\n  gap: var(--space-3);\n  justify-content: flex-end;\n  padding: var(--space-4) var(--space-6);\n  border-top: var(--border-width-thin) solid var(--color-border);\n}\n\n@keyframes fade-in {\n  from {\n    opacity: 0;\n  }\n}\n"],"mappings":""}

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,34 @@
+import { MouseEvent, ReactElement } from 'react';
+import { DialogOptions } from './DialogSurface.js';
+export type ModalSize = 'sm' | 'md' | 'lg' | 'full';
+export interface DialogStateProps {
+    /** Open state, for a controlled dialog. */
+    open?: boolean;
+    /** @default false */
+    defaultOpen?: boolean;
+    /** Called when the dialog asks to open or close. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Element that opens the dialog when clicked, usually a `Button`. Focus returns to it when the
+     * dialog closes. Leave it out to control `open` yourself.
+     */
+    trigger?: ReactElement<{
+        onClick?: (event: MouseEvent<HTMLElement>) => void;
+    }>;
+}
+export interface ModalProps extends DialogOptions, DialogStateProps {
+    /** @default 'md' */
+    size?: ModalSize;
+}
+export declare function useDialogState({ open, defaultOpen, onOpenChange, trigger, }: DialogStateProps): {
+    isOpen: boolean;
+    close: () => void;
+    triggerElement: ReactElement<{
+        onClick?: (event: MouseEvent<HTMLElement>) => void;
+    }, string | import('react').JSXElementConstructor<any>> | null;
+};
+/**
+ * Dialog centered over the page. Focus moves into it and stays there, the page behind stops
+ * scrolling, and focus returns to the element that opened it on close.
+ */
+export declare const Modal: import('react').ForwardRefExoticComponent<ModalProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/components/Modal/Modal.js

@@ -0,0 +1,44 @@
+"use client";
+import { useControllableState as e } from "../../hooks/useControllableState.js";
+import { cn as t } from "../../utils/cn.js";
+import { DialogSurface as n } from "./DialogSurface.js";
+import r from "./Modal.module.js";
+import { cloneElement as i, forwardRef as a, isValidElement as o } from "react";
+import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
+// src/components/Modal/Modal.tsx
+function u({ open: t, defaultOpen: n = !1, onOpenChange: r, trigger: a }) {
+	let [s, c] = e({
+		value: t,
+		defaultValue: n,
+		onChange: r
+	});
+	return {
+		isOpen: s,
+		close: () => c(!1),
+		triggerElement: o(a) ? i(a, {
+			"aria-haspopup": "dialog",
+			onClick: (e) => {
+				a.props.onClick?.(e), e.defaultPrevented || c(!0);
+			}
+		}) : null
+	};
+}
+var d = a(function({ open: e, defaultOpen: i, onOpenChange: a, trigger: o, size: d = "md", ...f }, p) {
+	let { isOpen: m, close: h, triggerElement: g } = u({
+		open: e,
+		defaultOpen: i,
+		onOpenChange: a,
+		trigger: o
+	});
+	return /* @__PURE__ */ l(s, { children: [g, /* @__PURE__ */ c(n, {
+		ref: p,
+		open: m,
+		onClose: h,
+		rootClassName: r.root,
+		panelClassName: t(r.panel, r[d]),
+		...f
+	})] });
+});
+export { d as Modal, u as useDialogState };
+
+//# sourceMappingURL=Modal.js.map

package/dist/components/Modal/Modal.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.js","names":["_Fragment","styles","Modal_module_default","useDialogState","isOpen","setOpen","useControllableState","open","defaultOpen","onOpenChange","isValidElement","trigger","cloneElement","event","Modal","forwardRef","props","Fragment","triggerElement","DialogSurface","close","cn","size"],"sources":["../../../src/components/Modal/Modal.tsx"],"sourcesContent":["import {\n  cloneElement,\n  forwardRef,\n  isValidElement,\n  type MouseEvent,\n  type ReactElement,\n} from 'react';\nimport { useControllableState } from '@/hooks/useControllableState';\nimport { cn } from '@/utils/cn';\nimport { DialogSurface, type DialogOptions } from './DialogSurface';\nimport styles from './Modal.module.css';\n\nexport type ModalSize = 'sm' | 'md' | 'lg' | 'full';\n\nexport interface DialogStateProps {\n  /** Open state, for a controlled dialog. */\n  open?: boolean;\n  /** @default false */\n  defaultOpen?: boolean;\n  /** Called when the dialog asks to open or close. */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Element that opens the dialog when clicked, usually a `Button`. Focus returns to it when the\n   * dialog closes. Leave it out to control `open` yourself.\n   */\n  trigger?: ReactElement<{ onClick?: (event: MouseEvent<HTMLElement>) => void }>;\n}\n\nexport interface ModalProps extends DialogOptions, DialogStateProps {\n  /** @default 'md' */\n  size?: ModalSize;\n}\n\nexport function useDialogState({\n  open,\n  defaultOpen = false,\n  onOpenChange,\n  trigger,\n}: DialogStateProps) {\n  const [isOpen, setOpen] = useControllableState({\n    value: open,\n    defaultValue: defaultOpen,\n    onChange: onOpenChange,\n  });\n\n  const triggerElement = isValidElement(trigger)\n    ? cloneElement(trigger, {\n        'aria-haspopup': 'dialog',\n        onClick: (event: MouseEvent<HTMLElement>) => {\n          trigger.props.onClick?.(event);\n          if (!event.defaultPrevented) setOpen(true);\n        },\n      } as object)\n    : null;\n\n  return { isOpen, close: () => setOpen(false), triggerElement };\n}\n\n/**\n * Dialog centered over the page. Focus moves into it and stays there, the page behind stops\n * scrolling, and focus returns to the element that opened it on close.\n */\nexport const Modal = forwardRef<HTMLDivElement, ModalProps>(function Modal(\n  { open, defaultOpen, onOpenChange, trigger, size = 'md', ...props },\n  ref,\n) {\n  const { isOpen, close, triggerElement } = useDialogState({\n    open,\n    defaultOpen,\n    onOpenChange,\n    trigger,\n  });\n\n  return (\n    <>\n      {triggerElement}\n      <DialogSurface\n        ref={ref}\n        open={isOpen}\n        onClose={close}\n        rootClassName={styles.root}\n        panelClassName={cn(styles.panel, styles[size])}\n        {...props}\n      />\n    </>\n  );\n});\n"],"mappings":";;;;;;;;AAiCA,SAAgBG,EAAe,EAC7B,SACA,iBAAc,IACd,iBACA,cACmB;CACnB,IAAM,CAACC,GAAQC,KAAWC,EAAqB;EAC7C,OAAOC;EACP,cAAcC;EACd,UAAUC;CACZ,CAAC;CAYD,OAAO;EAAE;EAAQ,aAAaJ,EAAQ,EAAK;EAAG,gBAVvBK,EAAeC,CAAO,IACzCC,EAAaD,GAAS;GACpB,iBAAiB;GACjB,UAAU,MAAmC;IAE3C,AADAA,EAAQ,MAAM,UAAUE,CAAK,GACxBA,EAAM,oBAAkBR,EAAQ,EAAI;GAC3C;EACF,CAAW,IACX;CAEyD;AAC/D;AAMA,IAAaS,IAAQC,EAAuC,SAC1D,EAAE,SAAM,gBAAa,iBAAc,YAAS,UAAO,MAAM,GAAGC,KAC5D,GACA;CACA,IAAM,EAAE,WAAQ,UAAO,sBAAmBb,EAAe;EACvD;EACA;EACA;EACA;CACF,CAAC;CAED,OACE,kBAAAH,GAAA,EAAA,UAAA,CACGkB,GACD,kBAACC,GAAD;EACO;EACL,MAAMf;EACN,SAASgB;EACT,eAAenB,EAAO;EACtB,gBAAgBoB,EAAGpB,EAAO,OAAOA,EAAOqB,EAAK;EAC7C,GAAIN;CACL,CAAA,CACD,EAAA,CAAA;AAEN,CAAC"}

package/dist/components/Modal/Modal.module.js

@@ -0,0 +1,13 @@
+// src/components/Modal/Modal.module.css
+var e = "onyx-root-ytPLl", t = "onyx-panel-lp9I7", n = "onyx-modal-in-dIaud", r = "onyx-sm-K5k3W", i = "onyx-md-gvyR7", a = "onyx-lg-BgB1a", o = "onyx-full-z-yai", s = {
+	root: e,
+	panel: t,
+	modalIn: n,
+	sm: r,
+	md: i,
+	lg: a,
+	full: o
+};
+export { s as default, o as full, a as lg, i as md, n as modalIn, t as panel, e as root, r as sm };
+
+//# sourceMappingURL=Modal.module.js.map

package/dist/components/Modal/Modal.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.module.js","names":["root","panel","modalIn","sm","md","lg","full","Modal_module_default"],"sources":["../../../src/components/Modal/Modal.module.css"],"sourcesContent":[".root {\n  align-items: center;\n  justify-content: center;\n  padding: var(--space-4);\n}\n\n.panel {\n  width: 100%;\n  border-radius: var(--radius-xl);\n  animation: modal-in var(--duration-normal) var(--easing-enter);\n}\n\n.sm {\n  max-width: var(--size-overlay-sm);\n}\n\n.md {\n  max-width: var(--size-overlay-md);\n}\n\n.lg {\n  max-width: var(--size-overlay-lg);\n}\n\n.full {\n  max-width: none;\n  height: 100%;\n}\n\n@keyframes modal-in {\n  from {\n    opacity: 0;\n    scale: 0.96;\n  }\n}\n\n@media (width < 640px) {\n  .root {\n    align-items: flex-end;\n    padding: 0;\n  }\n\n  .panel {\n    max-width: none;\n    border-end-start-radius: 0;\n    border-end-end-radius: 0;\n  }\n\n  .full {\n    border-radius: 0;\n  }\n}\n"],"mappings":""}

package/dist/components/Modal/index.d.ts

@@ -0,0 +1,3 @@
+export { Modal } from './Modal.js';
+export type { DialogStateProps, ModalProps, ModalSize } from './Modal.js';
+export type { DialogOptions } from './DialogSurface.js';

package/dist/components/Pagination/Pagination.d.ts

@@ -0,0 +1,46 @@
+import { HTMLAttributes } from 'react';
+export type PaginationItem = number | 'ellipsis';
+/**
+ * Pages to show: the first and last `boundaryCount` pages, `siblingCount` pages around the
+ * current one and `'ellipsis'` for the gaps. The number of items stays the same while the
+ * current page changes, so the buttons do not jump around.
+ */
+export declare function getPaginationItems(page: number, count: number, siblingCount?: number, boundaryCount?: number): PaginationItem[];
+export interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {
+    /** Number of pages. */
+    totalPages: number;
+    /** Current page, starting at 1, for a controlled pagination. */
+    page?: number;
+    /** @default 1 */
+    defaultPage?: number;
+    /** Called with the page the user chose. */
+    onPageChange?: (page: number) => void;
+    /**
+     * Pages shown on each side of the current page.
+     * @default 1
+     */
+    siblingCount?: number;
+    /**
+     * Pages always shown at the start and the end.
+     * @default 1
+     */
+    boundaryCount?: number;
+    /** @default 'md' */
+    size?: 'sm' | 'md';
+    /**
+     * Accessible name of the navigation landmark.
+     * @default 'Pagination'
+     */
+    'aria-label'?: string;
+    /** @default 'Previous page' */
+    previousLabel?: string;
+    /** @default 'Next page' */
+    nextLabel?: string;
+    /**
+     * Accessible name of each page button.
+     * @default (page) => `Page ${page}`
+     */
+    getPageLabel?: (page: number) => string;
+}
+/** Moves between the pages of a long list. */
+export declare const Pagination: import('react').ForwardRefExoticComponent<PaginationProps & import('react').RefAttributes<HTMLElement>>;

package/dist/components/Pagination/Pagination.js

@@ -0,0 +1,71 @@
+"use client";
+import { useControllableState as e } from "../../hooks/useControllableState.js";
+import { cn as t } from "../../utils/cn.js";
+import { ChevronLeftIcon as n, ChevronRightIcon as r } from "../Icon/icons.js";
+import i from "./Pagination.module.js";
+import { forwardRef as a } from "react";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+// src/components/Pagination/Pagination.tsx
+function c(e, t, n = 1, r = 1) {
+	let i = (e, t) => Array.from({ length: Math.max(t - e + 1, 0) }, (t, n) => e + n), a = i(1, Math.min(r, t)), o = i(Math.max(t - r + 1, r + 1), t), s = Math.max(Math.min(e - n, t - r - n * 2 - 1), r + 2), c = Math.min(Math.max(e + n, r + n * 2 + 2), (o[0] ?? t + 1) - 2);
+	return [
+		...a,
+		...s > r + 2 ? ["ellipsis"] : r + 1 < t - r ? [r + 1] : [],
+		...i(s, c),
+		...c < t - r - 1 ? ["ellipsis"] : t - r > r ? [t - r] : [],
+		...o
+	];
+}
+var l = a(function({ totalPages: a, page: l, defaultPage: u = 1, onPageChange: d, siblingCount: f = 1, boundaryCount: p = 1, size: m = "md", "aria-label": h = "Pagination", previousLabel: g = "Previous page", nextLabel: _ = "Next page", getPageLabel: v = (e) => `Page ${e}`, className: y, ...b }, x) {
+	let [S, C] = e({
+		value: l,
+		defaultValue: u,
+		onChange: d
+	}), w = Math.max(a, 1), T = Math.min(Math.max(S, 1), w);
+	return /* @__PURE__ */ o("nav", {
+		ref: x,
+		"aria-label": h,
+		className: t(i.pagination, i[m], y),
+		...b,
+		children: /* @__PURE__ */ s("ul", {
+			className: i.list,
+			children: [
+				/* @__PURE__ */ o("li", { children: /* @__PURE__ */ o("button", {
+					type: "button",
+					"aria-label": g,
+					className: t(i.button, i.step),
+					"aria-disabled": T <= 1 || void 0,
+					onClick: () => {
+						T > 1 && C(T - 1);
+					},
+					children: /* @__PURE__ */ o(n, { className: i.icon })
+				}) }),
+				c(T, w, f, p).map((e, t) => e === "ellipsis" ? /* @__PURE__ */ o("li", {
+					className: i.ellipsis,
+					"aria-hidden": "true",
+					children: "…"
+				}, `ellipsis-${t}`) : /* @__PURE__ */ o("li", { children: /* @__PURE__ */ o("button", {
+					type: "button",
+					"aria-label": v(e),
+					"aria-current": e === T ? "page" : void 0,
+					className: i.button,
+					onClick: () => C(e),
+					children: e
+				}) }, e)),
+				/* @__PURE__ */ o("li", { children: /* @__PURE__ */ o("button", {
+					type: "button",
+					"aria-label": _,
+					className: t(i.button, i.step),
+					"aria-disabled": T >= w || void 0,
+					onClick: () => {
+						T < w && C(T + 1);
+					},
+					children: /* @__PURE__ */ o(r, { className: i.icon })
+				}) })
+			]
+		})
+	});
+});
+export { l as Pagination, c as getPaginationItems };
+
+//# sourceMappingURL=Pagination.js.map

package/dist/components/Pagination/Pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.js","names":["styles","Pagination_module_default","getPaginationItems","range","end","start","index","startPages","boundaryCount","count","endPages","siblingsStart","page","siblingCount","siblingsEnd","Pagination","forwardRef","ariaLabel","value","props","current","setCurrent","useControllableState","defaultPage","onPageChange","total","totalPages","active","cn","size","className","previousLabel","ChevronLeftIcon","item","getPageLabel","nextLabel","ChevronRightIcon"],"sources":["../../../src/components/Pagination/Pagination.tsx"],"sourcesContent":["import { forwardRef, type HTMLAttributes } from 'react';\nimport { useControllableState } from '@/hooks/useControllableState';\nimport { cn } from '@/utils/cn';\nimport { ChevronLeftIcon, ChevronRightIcon } from '../Icon';\nimport styles from './Pagination.module.css';\n\nexport type PaginationItem = number | 'ellipsis';\n\n/**\n * Pages to show: the first and last `boundaryCount` pages, `siblingCount` pages around the\n * current one and `'ellipsis'` for the gaps. The number of items stays the same while the\n * current page changes, so the buttons do not jump around.\n */\nexport function getPaginationItems(\n  page: number,\n  count: number,\n  siblingCount = 1,\n  boundaryCount = 1,\n): PaginationItem[] {\n  const range = (start: number, end: number) =>\n    Array.from({ length: Math.max(end - start + 1, 0) }, (_, index) => start + index);\n\n  const startPages = range(1, Math.min(boundaryCount, count));\n  const endPages = range(Math.max(count - boundaryCount + 1, boundaryCount + 1), count);\n  const siblingsStart = Math.max(\n    Math.min(page - siblingCount, count - boundaryCount - siblingCount * 2 - 1),\n    boundaryCount + 2,\n  );\n  const siblingsEnd = Math.min(\n    Math.max(page + siblingCount, boundaryCount + siblingCount * 2 + 2),\n    (endPages[0] ?? count + 1) - 2,\n  );\n\n  return [\n    ...startPages,\n    ...(siblingsStart > boundaryCount + 2\n      ? (['ellipsis'] as const)\n      : boundaryCount + 1 < count - boundaryCount\n        ? [boundaryCount + 1]\n        : []),\n    ...range(siblingsStart, siblingsEnd),\n    ...(siblingsEnd < count - boundaryCount - 1\n      ? (['ellipsis'] as const)\n      : count - boundaryCount > boundaryCount\n        ? [count - boundaryCount]\n        : []),\n    ...endPages,\n  ];\n}\n\nexport interface PaginationProps extends Omit<HTMLAttributes<HTMLElement>, 'onChange'> {\n  /** Number of pages. */\n  totalPages: number;\n  /** Current page, starting at 1, for a controlled pagination. */\n  page?: number;\n  /** @default 1 */\n  defaultPage?: number;\n  /** Called with the page the user chose. */\n  onPageChange?: (page: number) => void;\n  /**\n   * Pages shown on each side of the current page.\n   * @default 1\n   */\n  siblingCount?: number;\n  /**\n   * Pages always shown at the start and the end.\n   * @default 1\n   */\n  boundaryCount?: number;\n  /** @default 'md' */\n  size?: 'sm' | 'md';\n  /**\n   * Accessible name of the navigation landmark.\n   * @default 'Pagination'\n   */\n  'aria-label'?: string;\n  /** @default 'Previous page' */\n  previousLabel?: string;\n  /** @default 'Next page' */\n  nextLabel?: string;\n  /**\n   * Accessible name of each page button.\n   * @default (page) => `Page ${page}`\n   */\n  getPageLabel?: (page: number) => string;\n}\n\n/** Moves between the pages of a long list. */\nexport const Pagination = forwardRef<HTMLElement, PaginationProps>(function Pagination(\n  {\n    totalPages,\n    page,\n    defaultPage = 1,\n    onPageChange,\n    siblingCount = 1,\n    boundaryCount = 1,\n    size = 'md',\n    'aria-label': ariaLabel = 'Pagination',\n    previousLabel = 'Previous page',\n    nextLabel = 'Next page',\n    getPageLabel = (value) => `Page ${value}`,\n    className,\n    ...props\n  },\n  ref,\n) {\n  const [current, setCurrent] = useControllableState({\n    value: page,\n    defaultValue: defaultPage,\n    onChange: onPageChange,\n  });\n  const total = Math.max(totalPages, 1);\n  const active = Math.min(Math.max(current, 1), total);\n\n  return (\n    <nav\n      ref={ref}\n      aria-label={ariaLabel}\n      className={cn(styles.pagination, styles[size], className)}\n      {...props}\n    >\n      <ul className={styles.list}>\n        <li>\n          <button\n            type=\"button\"\n            aria-label={previousLabel}\n            className={cn(styles.button, styles.step)}\n            aria-disabled={active <= 1 || undefined}\n            onClick={() => {\n              if (active > 1) setCurrent(active - 1);\n            }}\n          >\n            <ChevronLeftIcon className={styles.icon} />\n          </button>\n        </li>\n        {getPaginationItems(active, total, siblingCount, boundaryCount).map((item, index) =>\n          item === 'ellipsis' ? (\n            <li key={`ellipsis-${index}`} className={styles.ellipsis} aria-hidden=\"true\">\n              …\n            </li>\n          ) : (\n            <li key={item}>\n              <button\n                type=\"button\"\n                aria-label={getPageLabel(item)}\n                aria-current={item === active ? 'page' : undefined}\n                className={styles.button}\n                onClick={() => setCurrent(item)}\n              >\n                {item}\n              </button>\n            </li>\n          ),\n        )}\n        <li>\n          <button\n            type=\"button\"\n            aria-label={nextLabel}\n            className={cn(styles.button, styles.step)}\n            aria-disabled={active >= total || undefined}\n            onClick={() => {\n              if (active < total) setCurrent(active + 1);\n            }}\n          >\n            <ChevronRightIcon className={styles.icon} />\n          </button>\n        </li>\n      </ul>\n    </nav>\n  );\n});\n"],"mappings":"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"}

package/dist/components/Pagination/Pagination.module.js

@@ -0,0 +1,13 @@
+// src/components/Pagination/Pagination.module.css
+var e = "onyx-pagination-icb-v", t = "onyx-sm-I5fYv", n = "onyx-list-9X-O7", r = "onyx-button---Saq onyx-focusRing-qmcYD", i = "onyx-step-B5YFK", a = "onyx-icon-2iCyv", o = "onyx-ellipsis-V294k", s = {
+	pagination: e,
+	sm: t,
+	list: n,
+	button: r,
+	step: i,
+	icon: a,
+	ellipsis: o
+};
+export { r as button, s as default, o as ellipsis, a as icon, n as list, e as pagination, t as sm, i as step };
+
+//# sourceMappingURL=Pagination.module.js.map

package/dist/components/Pagination/Pagination.module.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pagination.module.js","names":["pagination","sm","list","button","step","icon","ellipsis","Pagination_module_default"],"sources":["../../../src/components/Pagination/Pagination.module.css"],"sourcesContent":[".pagination {\n  --pagination-size: var(--size-control-md);\n}\n\n.sm {\n  --pagination-size: var(--size-control-sm);\n}\n\n.list {\n  display: flex;\n  flex-wrap: wrap;\n  gap: var(--space-1);\n  align-items: center;\n  margin: 0;\n  padding: 0;\n  list-style: none;\n}\n\n.button {\n  composes: focusRing from '../../styles/focus-ring.module.css';\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--pagination-size);\n  height: var(--pagination-size);\n  padding-inline: var(--space-2);\n  font: inherit;\n  font-size: var(--font-size-sm);\n  font-weight: var(--font-weight-medium);\n  font-variant-numeric: tabular-nums;\n  color: var(--color-text);\n  cursor: pointer;\n  background: transparent;\n  border: var(--border-width-thin) solid transparent;\n  border-radius: var(--radius-md);\n  transition-timing-function: var(--easing-standard);\n  transition-duration: var(--duration-fast);\n  transition-property: background-color, border-color, color;\n}\n\n.button:hover:not([aria-disabled='true'], [aria-current='page']) {\n  background-color: var(--color-state-hover);\n}\n\n.button:active:not([aria-disabled='true'], [aria-current='page']) {\n  background-color: var(--color-state-active);\n}\n\n.button[aria-current='page'] {\n  color: var(--color-on-primary);\n  cursor: default;\n  background-color: var(--color-primary);\n}\n\n.button[aria-disabled='true'] {\n  color: var(--color-text-disabled);\n  cursor: not-allowed;\n}\n\n.step {\n  border-color: var(--color-border);\n}\n\n.icon {\n  font-size: var(--size-icon-sm);\n}\n\n:dir(rtl) .icon {\n  scale: -1 1;\n}\n\n.ellipsis {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  min-width: var(--pagination-size);\n  color: var(--color-text-muted);\n}\n\n@media (pointer: coarse) {\n  .pagination {\n    --pagination-size: var(--size-touch-target);\n  }\n}\n"],"mappings":""}

package/dist/components/Pagination/index.d.ts

@@ -0,0 +1,2 @@
+export { getPaginationItems, Pagination } from './Pagination.js';
+export type { PaginationItem, PaginationProps } from './Pagination.js';

package/dist/components/Popover/Popover.d.ts

@@ -0,0 +1,46 @@
+import { MouseEvent, ReactElement, ReactNode, RefObject } from 'react';
+import { Placement } from '../../utils/floating.js';
+export type PopoverPlacement = Placement;
+export interface PopoverProps {
+    /** Element that toggles the popover, usually a `Button`. It must accept a ref. */
+    trigger: ReactElement<{
+        onClick?: (event: MouseEvent<HTMLElement>) => void;
+    }>;
+    /** Content of the popover. It can be interactive. */
+    children: ReactNode;
+    /** Heading that names the popover. Without it, pass `aria-label`. */
+    title?: ReactNode;
+    /** Accessible name when there is no `title`. */
+    'aria-label'?: string;
+    /** @default 'bottom-start' */
+    placement?: PopoverPlacement;
+    /** Open state, for a controlled popover. */
+    open?: boolean;
+    /** @default false */
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Element focused on open. Defaults to the first focusable element, then the popover. */
+    initialFocus?: RefObject<HTMLElement | null>;
+    /**
+     * Shows a close button in the corner.
+     * @default false
+     */
+    showClose?: boolean;
+    /**
+     * Accessible name of the close button.
+     * @default 'Close'
+     */
+    closeLabel?: string;
+    /**
+     * Gap between the trigger and the popover, in pixels.
+     * @default 8
+     */
+    offset?: number;
+    /** Class of the popover panel. */
+    className?: string;
+}
+/**
+ * Non-modal dialog anchored to a trigger. Focus moves into it on open; Escape, a click outside
+ * or tabbing out closes it, and Escape returns focus to the trigger.
+ */
+export declare const Popover: import('react').ForwardRefExoticComponent<PopoverProps & import('react').RefAttributes<HTMLDivElement>>;