@zyncat/ui 0.8.0

package/dist/otp-field.js

@@ -0,0 +1,98 @@
+'use client';import { cx } from './chunk-QGNC7LH5.js';
+import './input.css';
+import { useRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function OtpField({
+  length = 6,
+  value = "",
+  onChange,
+  group,
+  error,
+  disabled,
+  size,
+  className = "",
+  style,
+  htmlProps
+}) {
+  const refs = useRef([]);
+  const chars = String(value).slice(0, length).padEnd(length).split("");
+  const emit = (s) => onChange && onChange(s.replace(/ +$/, "").slice(0, length));
+  const setAt = (i, ch) => {
+    const a = chars.slice();
+    a[i] = ch || " ";
+    emit(a.join(""));
+  };
+  const caretEnd = (el) => {
+    if (!el) return;
+    const n = el.value.length;
+    try {
+      el.setSelectionRange(n, n);
+    } catch {
+    }
+  };
+  const go = (j) => {
+    const el = refs.current[j];
+    if (el) {
+      el.focus();
+      caretEnd(el);
+    }
+  };
+  const cls = cx("otp", size === "sm" && "otp--sm", error && "is-error", className);
+  const cells = [];
+  for (let i = 0; i < length; i++) {
+    if (group && i > 0 && i % group === 0) cells.push(/* @__PURE__ */ jsx("span", { className: "otp__sep" }, `sep${i}`));
+    cells.push(
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: (el) => {
+            refs.current[i] = el;
+          },
+          className: "otp__slot",
+          inputMode: "numeric",
+          autoComplete: "one-time-code",
+          disabled,
+          "aria-invalid": error || void 0,
+          value: chars[i].trim(),
+          "data-filled": chars[i].trim() ? "true" : "false",
+          onFocus: (e) => caretEnd(e.target),
+          onMouseDown: (e) => {
+            e.preventDefault();
+            go(i);
+          },
+          onChange: (e) => {
+            const ch = e.target.value.replace(/[^\d]/g, "").slice(-1);
+            setAt(i, ch);
+            if (ch && i < length - 1) go(i + 1);
+          },
+          onKeyDown: (e) => {
+            if (e.key === "Backspace" && !chars[i].trim() && i > 0) {
+              e.preventDefault();
+              setAt(i - 1, "");
+              go(i - 1);
+            } else if (e.key === "ArrowLeft" && i > 0) {
+              e.preventDefault();
+              go(i - 1);
+            } else if (e.key === "ArrowRight" && i < length - 1) {
+              e.preventDefault();
+              go(i + 1);
+            }
+          },
+          onPaste: (e) => {
+            e.preventDefault();
+            const d = (e.clipboardData.getData("text") || "").replace(/[^\d]/g, "");
+            emit(chars.slice(0, i).join("") + d);
+            refs.current[Math.min(i + d.length, length - 1)]?.focus();
+          }
+        },
+        i
+      )
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { className: cls, style, ...htmlProps, children: cells });
+}
+
+export { OtpField };
+//# sourceMappingURL=otp-field.js.map
+//# sourceMappingURL=otp-field.js.map

package/dist/otp-field.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/primitives/input/OtpField.tsx"],"names":[],"mappings":"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","file":"otp-field.js","sourcesContent":["'use client';\n\nimport './input.css';\nimport { useRef } from 'react';\nimport type {\n  ChangeEvent,\n  ClipboardEvent,\n  CSSProperties,\n  FocusEvent,\n  HTMLAttributes,\n  KeyboardEvent,\n  MouseEvent,\n  ReactNode,\n} from 'react';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\ninterface OtpFieldOwnProps {\n  /** Number of slots. @default 6 */\n  length?: number;\n  /** Controlled value (digit string). */\n  value?: string;\n  /** Called with the next value string. */\n  onChange?: (value: string) => void;\n  /** Insert a separator every N slots (e.g. 3 - \"-------\"). */\n  group?: number;\n  /** Error state (red slots + ring). */\n  error?: boolean;\n  /** Disable every slot. */\n  disabled?: boolean;\n  /** Compact slot sizing. Only `sm`; omit for default. */\n  size?: 'sm';\n  /** Extra class(es) appended to the root wrapper. */\n  className?: string;\n  /** Inline styles merged onto the root wrapper. */\n  style?: CSSProperties;\n}\n\nexport interface OtpFieldProps extends OtpFieldOwnProps {\n  /** Standard <div> attributes (aria-*, data-*, ...) forwarded to the root wrapper. */\n  htmlProps?: Omit<HTMLAttributes<HTMLDivElement>, keyof OtpFieldOwnProps> & DataAttributes;\n}\n\nexport function OtpField({\n  length = 6,\n  value = '',\n  onChange,\n  group,\n  error,\n  disabled,\n  size,\n  className = '',\n  style,\n  htmlProps,\n}: OtpFieldProps) {\n  const refs = useRef<(HTMLInputElement | null)[]>([]);\n  const chars = String(value).slice(0, length).padEnd(length).split('');\n  const emit = (s: string) => onChange && onChange(s.replace(/ +$/, '').slice(0, length));\n  const setAt = (i: number, ch: string) => {\n    const a = chars.slice();\n    a[i] = ch || ' ';\n    emit(a.join(''));\n  };\n  const caretEnd = (el: HTMLInputElement | null) => {\n    if (!el) return;\n    const n = el.value.length;\n    try {\n      el.setSelectionRange(n, n);\n    } catch {}\n  };\n  const go = (j: number) => {\n    const el = refs.current[j];\n    if (el) {\n      el.focus();\n      caretEnd(el);\n    }\n  };\n\n  const cls = cx('otp', size === 'sm' && 'otp--sm', error && 'is-error', className);\n\n  const cells: ReactNode[] = [];\n  for (let i = 0; i < length; i++) {\n    if (group && i > 0 && i % group === 0) cells.push(<span key={`sep${i}`} className=\"otp__sep\" />);\n    cells.push(\n      <input\n        key={i}\n        ref={(el) => {\n          refs.current[i] = el;\n        }}\n        className=\"otp__slot\"\n        inputMode=\"numeric\"\n        autoComplete=\"one-time-code\"\n        disabled={disabled}\n        aria-invalid={error || undefined}\n        value={chars[i].trim()}\n        data-filled={chars[i].trim() ? 'true' : 'false'}\n        onFocus={(e: FocusEvent<HTMLInputElement>) => caretEnd(e.target)}\n        onMouseDown={(e: MouseEvent<HTMLInputElement>) => {\n          e.preventDefault();\n          go(i);\n        }}\n        onChange={(e: ChangeEvent<HTMLInputElement>) => {\n          const ch = e.target.value.replace(/[^\\d]/g, '').slice(-1);\n          setAt(i, ch);\n          if (ch && i < length - 1) go(i + 1);\n        }}\n        onKeyDown={(e: KeyboardEvent<HTMLInputElement>) => {\n          if (e.key === 'Backspace' && !chars[i].trim() && i > 0) {\n            e.preventDefault();\n            setAt(i - 1, '');\n            go(i - 1);\n          } else if (e.key === 'ArrowLeft' && i > 0) {\n            e.preventDefault();\n            go(i - 1);\n          } else if (e.key === 'ArrowRight' && i < length - 1) {\n            e.preventDefault();\n            go(i + 1);\n          }\n        }}\n        onPaste={(e: ClipboardEvent<HTMLInputElement>) => {\n          e.preventDefault();\n          const d = (e.clipboardData.getData('text') || '').replace(/[^\\d]/g, '');\n          emit(chars.slice(0, i).join('') + d);\n          refs.current[Math.min(i + d.length, length - 1)]?.focus();\n        }}\n      />,\n    );\n  }\n  return (\n    <div className={cls} style={style} {...htmlProps}>\n      {cells}\n    </div>\n  );\n}\n"]}

package/dist/overlay.css

@@ -0,0 +1,23 @@
+/* overlay.css - the modal shell geometry shared by dialog and sheet: a fixed
+   full-viewport layer, the scrim filling it, and the grid cell the panel
+   mounts in (min 0 + max 100% give a scroll constraint chain). Per-component
+   placement lives with each consumer (dialog.css, sheet.css); the popover
+   paints itself entirely from popover.css. */
+.overlay-layer {
+  position: fixed;
+  inset: 0;
+  display: grid;
+}
+.overlay-scrim {
+  position: absolute;
+  inset: 0;
+  background: var(--bg-overlay);
+}
+
+.overlay-panel {
+  position: relative;
+  display: grid;
+  outline: none;
+  min-width: 0;
+  min-height: 0;
+}

package/dist/pagination.css

@@ -0,0 +1,43 @@
+/* Pagination - cursor strip: layout, mono readout, square arrows + directional caret nudge (on Button vocabulary). */
+
+.pgn {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--space-3);
+}
+
+/* mono tabular readout; .pgn__range is the node Motion slides - keep it transformable (inline-block) */
+.pgn__readout {
+  font: var(--type-mono);
+  font-variant-numeric: tabular-nums;
+  color: var(--text-subtle);
+  white-space: nowrap;
+}
+.pgn__range {
+  display: inline-block;
+}
+.pgn__range b {
+  font-weight: var(--weight-medium);
+  color: var(--text-body);
+}
+
+/* arrows kept adjacent (not flanking the readout) so repeated paging needs no mouse travel and a growing readout never shifts them */
+.pgn__nav {
+  display: flex;
+  gap: var(--space-1);
+}
+.pgn__btn {
+  width: var(--control-height-sm);
+  padding: 0;
+}
+
+/* Caret nudges toward its direction on hover - a 1px optical cue. */
+.pgn__btn .icon {
+  transition: transform var(--duration-fast) var(--ease-standard);
+}
+.pgn__btn--prev:hover:not(:disabled) .icon {
+  transform: translateX(calc(var(--space-px) * -1));
+}
+.pgn__btn--next:hover:not(:disabled) .icon {
+  transform: translateX(var(--space-px));
+}

package/dist/pagination.d.ts

@@ -0,0 +1,29 @@
+import * as react from 'react';
+import { HTMLAttributes } from 'react';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+
+interface PaginationProps {
+    /** Accessible name for the nav landmark - name the list ("Posts"), not "pagination". @default 'Pagination' */
+    ariaLabel?: string;
+    /** Items currently shown, 1-based inclusive: `[from, to]` (e.g. `[26, 50]`). */
+    range: [number, number];
+    /** Total item count - render `of N` only when the API reports one; omit for endless lists. */
+    total?: number | null;
+    /** A previous cursor exists. @default false */
+    hasPrev?: boolean;
+    /** A next cursor exists. @default false */
+    hasNext?: boolean;
+    /** Fired when the previous arrow is pressed. */
+    onPrev?: () => void;
+    /** Fired when the next arrow is pressed. */
+    onNext?: () => void;
+    /** A page fetch is in flight: both arrows go inert, the clicked arrow carries the spinner. @default false */
+    loading?: boolean;
+    /** Extra class(es) merged onto the root element. */
+    className?: string;
+    /** Standard <nav> attributes (style, data-*, aria-*, ...) forwarded to the root. */
+    htmlProps?: Omit<HTMLAttributes<HTMLElement>, 'className'> & DataAttributes;
+}
+declare function Pagination({ ariaLabel, range, total, hasPrev, hasNext, onPrev, onNext, loading, className, htmlProps, }: PaginationProps): react.JSX.Element;
+
+export { Pagination, type PaginationProps };

package/dist/pagination.js

@@ -0,0 +1,107 @@
+'use client';import { tokenPx } from './chunk-UE63OOVG.js';
+import { animate } from './chunk-L3Q3VDIW.js';
+import { Icon } from './chunk-3SBCBYB7.js';
+import { UIMotion } from './chunk-S5ZTZANS.js';
+import { Button } from './chunk-U5QQZC3U.js';
+import { cx } from './chunk-QGNC7LH5.js';
+import './pagination.css';
+import { useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var pgnTravelPx = null;
+function pgnTravel() {
+  if (pgnTravelPx == null) pgnTravelPx = tokenPx("--space-2");
+  return pgnTravelPx;
+}
+function pgnFormat(n) {
+  return n.toLocaleString("en-US").replace(/,/g, "\u2009");
+}
+function Pagination({
+  ariaLabel = "Pagination",
+  range,
+  total = null,
+  hasPrev = false,
+  hasNext = false,
+  onPrev,
+  onNext,
+  loading = false,
+  className = "",
+  htmlProps
+}) {
+  const rangeRef = useRef(null);
+  const prevBtnRef = useRef(null);
+  const nextBtnRef = useRef(null);
+  const shownRef = useRef(range);
+  const lastDirRef = useRef(0);
+  const from = range[0];
+  const to = range[1];
+  useEffect(() => {
+    const pf = shownRef.current[0], pt = shownRef.current[1];
+    if (pf === from && pt === to) return;
+    const dir = from > pf ? 1 : -1;
+    shownRef.current = range;
+    if (rangeRef.current)
+      animate(rangeRef.current, { x: [dir * pgnTravel(), 0], opacity: [0, 1], timing: UIMotion.t.enter });
+  }, [from, to]);
+  useEffect(() => {
+    if (loading || document.activeElement !== document.body) return;
+    const d = lastDirRef.current;
+    if (d === 1 && !hasNext && hasPrev && prevBtnRef.current) prevBtnRef.current.focus();
+    if (d === -1 && !hasPrev && hasNext && nextBtnRef.current) nextBtnRef.current.focus();
+  }, [loading, hasPrev, hasNext]);
+  const prevBusy = loading && lastDirRef.current === -1;
+  const nextBusy = loading && lastDirRef.current === 1;
+  return /* @__PURE__ */ jsxs("nav", { className: cx("pgn", className), "aria-label": ariaLabel, "aria-busy": loading || void 0, ...htmlProps, children: [
+    /* @__PURE__ */ jsx("span", { className: "pgn__readout", "aria-live": "polite", children: /* @__PURE__ */ jsxs("span", { className: "pgn__range", ref: rangeRef, children: [
+      /* @__PURE__ */ jsxs("b", { children: [
+        pgnFormat(from),
+        "-",
+        pgnFormat(to)
+      ] }),
+      total != null ? /* @__PURE__ */ jsxs("span", { className: "pgn__total", children: [
+        " of ",
+        pgnFormat(total)
+      ] }) : null
+    ] }) }),
+    /* @__PURE__ */ jsxs("div", { className: "pgn__nav", children: [
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          ref: prevBtnRef,
+          className: "pgn__btn pgn__btn--prev",
+          loading: prevBusy,
+          disabled: !hasPrev || loading,
+          htmlProps: { "aria-label": "Previous page" },
+          onClick: () => {
+            lastDirRef.current = -1;
+            if (onPrev) onPrev();
+          },
+          children: /* @__PURE__ */ jsx(Icon, { name: "caret-left", size: "sm" })
+        }
+      ),
+      /* @__PURE__ */ jsx(
+        Button,
+        {
+          variant: "ghost",
+          size: "sm",
+          ref: nextBtnRef,
+          className: "pgn__btn pgn__btn--next",
+          loading: nextBusy,
+          disabled: !hasNext || loading,
+          htmlProps: { "aria-label": "Next page" },
+          onClick: () => {
+            lastDirRef.current = 1;
+            if (onNext) onNext();
+          },
+          children: /* @__PURE__ */ jsx(Icon, { name: "caret-right", size: "sm" })
+        }
+      )
+    ] })
+  ] });
+}
+
+export { Pagination };
+//# sourceMappingURL=pagination.js.map
+//# sourceMappingURL=pagination.js.map

package/dist/pagination.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/composites/pagination/Pagination.tsx"],"names":[],"mappings":"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","file":"pagination.js","sourcesContent":["'use client';\n\nimport './pagination.css';\nimport { useEffect, useRef, type HTMLAttributes } from 'react';\nimport { animate } from '../../../engine';\nimport { UIMotion } from '../../../tokens/motion-tokens';\nimport { tokenPx } from '../../internal/utils/token-px';\nimport { Icon } from '../../internal/icon/Icon';\nimport { Button } from '../../primitives/button/Button';\nimport type { DataAttributes } from '../../../dom-props';\nimport { cx } from '../../internal/utils/cx';\n\nexport interface PaginationProps {\n  /** Accessible name for the nav landmark - name the list (\"Posts\"), not \"pagination\". @default 'Pagination' */\n  ariaLabel?: string;\n  /** Items currently shown, 1-based inclusive: `[from, to]` (e.g. `[26, 50]`). */\n  range: [number, number];\n  /** Total item count - render `of N` only when the API reports one; omit for endless lists. */\n  total?: number | null;\n  /** A previous cursor exists. @default false */\n  hasPrev?: boolean;\n  /** A next cursor exists. @default false */\n  hasNext?: boolean;\n  /** Fired when the previous arrow is pressed. */\n  onPrev?: () => void;\n  /** Fired when the next arrow is pressed. */\n  onNext?: () => void;\n  /** A page fetch is in flight: both arrows go inert, the clicked arrow carries the spinner. @default false */\n  loading?: boolean;\n  /** Extra class(es) merged onto the root element. */\n  className?: string;\n  /** Standard <nav> attributes (style, data-*, aria-*, ...) forwarded to the root. */\n  htmlProps?: Omit<HTMLAttributes<HTMLElement>, 'className'> & DataAttributes;\n}\n\nlet pgnTravelPx: number | null = null;\nfunction pgnTravel() {\n  if (pgnTravelPx == null) pgnTravelPx = tokenPx('--space-2');\n  return pgnTravelPx;\n}\n\nfunction pgnFormat(n: number) {\n  return n.toLocaleString('en-US').replace(/,/g, '\\u2009');\n}\n\nexport function Pagination({\n  ariaLabel = 'Pagination',\n  range,\n  total = null,\n  hasPrev = false,\n  hasNext = false,\n  onPrev,\n  onNext,\n  loading = false,\n  className = '',\n  htmlProps,\n}: PaginationProps) {\n  const rangeRef = useRef<HTMLSpanElement>(null);\n  const prevBtnRef = useRef<HTMLButtonElement>(null);\n  const nextBtnRef = useRef<HTMLButtonElement>(null);\n  const shownRef = useRef<[number, number]>(range);\n  const lastDirRef = useRef(0);\n\n  const from = range[0];\n  const to = range[1];\n\n  useEffect(() => {\n    const pf = shownRef.current[0],\n      pt = shownRef.current[1];\n    if (pf === from && pt === to) return;\n    const dir = from > pf ? 1 : -1;\n    shownRef.current = range;\n    if (rangeRef.current)\n      animate(rangeRef.current, { x: [dir * pgnTravel(), 0], opacity: [0, 1], timing: UIMotion.t.enter });\n  }, [from, to]);\n\n  useEffect(() => {\n    if (loading || document.activeElement !== document.body) return;\n    const d = lastDirRef.current;\n    if (d === 1 && !hasNext && hasPrev && prevBtnRef.current) prevBtnRef.current.focus();\n    if (d === -1 && !hasPrev && hasNext && nextBtnRef.current) nextBtnRef.current.focus();\n  }, [loading, hasPrev, hasNext]);\n\n  const prevBusy = loading && lastDirRef.current === -1;\n  const nextBusy = loading && lastDirRef.current === 1;\n\n  return (\n    <nav className={cx('pgn', className)} aria-label={ariaLabel} aria-busy={loading || undefined} {...htmlProps}>\n      <span className=\"pgn__readout\" aria-live=\"polite\">\n        <span className=\"pgn__range\" ref={rangeRef}>\n          <b>\n            {pgnFormat(from)}-{pgnFormat(to)}\n          </b>\n          {total != null ? <span className=\"pgn__total\"> of {pgnFormat(total)}</span> : null}\n        </span>\n      </span>\n      <div className=\"pgn__nav\">\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          ref={prevBtnRef}\n          className=\"pgn__btn pgn__btn--prev\"\n          loading={prevBusy}\n          disabled={!hasPrev || loading}\n          htmlProps={{ 'aria-label': 'Previous page' }}\n          onClick={() => {\n            lastDirRef.current = -1;\n            if (onPrev) onPrev();\n          }}\n        >\n          <Icon name=\"caret-left\" size=\"sm\" />\n        </Button>\n        <Button\n          variant=\"ghost\"\n          size=\"sm\"\n          ref={nextBtnRef}\n          className=\"pgn__btn pgn__btn--next\"\n          loading={nextBusy}\n          disabled={!hasNext || loading}\n          htmlProps={{ 'aria-label': 'Next page' }}\n          onClick={() => {\n            lastDirRef.current = 1;\n            if (onNext) onNext();\n          }}\n        >\n          <Icon name=\"caret-right\" size=\"sm\" />\n        </Button>\n      </div>\n    </nav>\n  );\n}\n"]}

package/dist/popover.css

@@ -0,0 +1,69 @@
+/* popover.css - anchored panel paint: fixed coords from useAnchorPosition; entrance origin = arrow tip, else the aligned edge (inset --space-4), else center. */
+.overlay-popover {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: max-content;
+  outline: none;
+}
+
+.overlay-popover[data-align='start'] {
+  --ov-origin: var(--space-4);
+}
+.overlay-popover[data-align='center'] {
+  --ov-origin: 50%;
+}
+.overlay-popover[data-align='end'] {
+  --ov-origin: calc(100% - var(--space-4));
+}
+
+.overlay-popover[data-side='bottom'] {
+  transform-origin: var(--overlay-arrow-x, var(--ov-origin)) top;
+}
+.overlay-popover[data-side='top'] {
+  transform-origin: var(--overlay-arrow-x, var(--ov-origin)) bottom;
+}
+.overlay-popover[data-side='right'] {
+  transform-origin: left var(--overlay-arrow-y, var(--ov-origin));
+}
+.overlay-popover[data-side='left'] {
+  transform-origin: right var(--overlay-arrow-y, var(--ov-origin));
+}
+
+/* Arrow - a rotated square on the panel edge (--overlay-arrow-x/y); only its two outward edges keep the hairline, the panel covers the rest (must be opaque). */
+.overlay-popover__arrow {
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  background: var(--overlay-arrow-bg, var(--bg-surface-raised));
+  border: var(--border-hairline) solid var(--border-default);
+  pointer-events: none;
+}
+.overlay-popover[data-side='bottom'] .overlay-popover__arrow {
+  top: -5px;
+  left: var(--overlay-arrow-x, 50%);
+  transform: translateX(-50%) rotate(45deg);
+  border-right: none;
+  border-bottom: none;
+}
+.overlay-popover[data-side='top'] .overlay-popover__arrow {
+  bottom: -5px;
+  left: var(--overlay-arrow-x, 50%);
+  transform: translateX(-50%) rotate(45deg);
+  border-left: none;
+  border-top: none;
+}
+.overlay-popover[data-side='right'] .overlay-popover__arrow {
+  left: -5px;
+  top: var(--overlay-arrow-y, 50%);
+  transform: translateY(-50%) rotate(45deg);
+  border-right: none;
+  border-top: none;
+}
+.overlay-popover[data-side='left'] .overlay-popover__arrow {
+  right: -5px;
+  top: var(--overlay-arrow-y, 50%);
+  transform: translateY(-50%) rotate(45deg);
+  border-left: none;
+  border-bottom: none;
+}

package/dist/popover.d.ts

@@ -0,0 +1,35 @@
+import * as react from 'react';
+import { ReactElement, HTMLAttributes, ReactNode } from 'react';
+import { D as DisableableAnimation } from './timing-7JA_zQHP.js';
+import { D as DataAttributes } from './dom-props-C0jrllBw.js';
+import './motion-scale-Canq4stZ.js';
+
+interface PopoverProps {
+    /** Controlled open state. Omit to stay uncontrolled. */
+    open?: boolean;
+    /** Initial state when uncontrolled. Default false. */
+    defaultOpen?: boolean;
+    /** Fires whenever the open state changes. Pair with `open` for controlled use. */
+    onOpenChange?: (open: boolean) => void;
+    /** Cloned to toggle the panel; required as the anchor. */
+    trigger?: ReactElement | null;
+    /** Preferred side; flips to the opposite side when cramped. Default 'bottom'. */
+    side?: 'top' | 'bottom' | 'left' | 'right';
+    /** Cross-axis alignment against the trigger. Default 'start'. */
+    align?: 'start' | 'center' | 'end';
+    /** Caret tracking the trigger center. Default false. */
+    arrow?: boolean;
+    /** Esc + outside-press dismissal. Default true. */
+    dismissible?: boolean;
+    /** Base id for the panel; drives the trigger's `aria-controls`. Auto-generated when omitted. */
+    id?: string;
+    /** Standard attributes (className, style, data-*, ...) forwarded to the popover panel. */
+    htmlProps?: HTMLAttributes<HTMLDivElement> & DataAttributes;
+    /** Open/close timing - motion tokens only, or `null` to disable. @default open 'base'/'entrance', close 'fast'/'exit' */
+    animation?: DisableableAnimation;
+    /** The ENTIRE surface - paint AND semantics. Drive dismissal with `open`/`onOpenChange`. */
+    children: ReactNode;
+}
+declare function Popover({ open: controlledOpen, defaultOpen, onOpenChange, trigger, side, align, arrow, dismissible, id, htmlProps, animation, children, }: PopoverProps): react.JSX.Element;
+
+export { Popover, type PopoverProps };

package/dist/popover.js

@@ -0,0 +1,15 @@
+'use client';export { Popover } from './chunk-O4N2OBTR.js';
+import './chunk-EQ32F2QJ.js';
+import './chunk-LDC3RIYA.js';
+import './chunk-GY7JOPUQ.js';
+import './chunk-UE63OOVG.js';
+import './chunk-NEF5XAHG.js';
+import './chunk-MXOPCFWR.js';
+import './chunk-W3SHPKSB.js';
+import './chunk-L3Q3VDIW.js';
+import './chunk-MMRIQNEN.js';
+import './chunk-S5ZTZANS.js';
+import './chunk-VTJTGVZZ.js';
+import './chunk-QGNC7LH5.js';
+//# sourceMappingURL=popover.js.map
+//# sourceMappingURL=popover.js.map

package/dist/popover.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"popover.js"}