@koide-labs/ui 0.0.0 → 0.0.1

package/dist/components/popover/index.js

@@ -0,0 +1,636 @@
+import { jsx as u, jsxs as Y } from "react/jsx-runtime";
+import { c as Re } from "../../clsx-OuTLNxxd.js";
+import { Heading as be } from "../heading/index.js";
+import { Surface as Se } from "../surface/index.js";
+import { Text as ye } from "../text/index.js";
+import { t as ae, T as Oe } from "../../tooltip-arrow-C1qXdi5T.js";
+import { View as Ie } from "../view/index.js";
+import { R as xe, P as Ne, c as x, h as Me, d as Fe, e as de, u as _e, i as ke, f as we, j as Ae, k as De, p as ee, t as He } from "../../transitions.module-CWX8e5cx.js";
+import * as n from "react";
+import { u as Ve, a as Be, b as Le, I as Ue, F as Ge } from "../../InternalBackdrop-jYAiOJ8v.js";
+import { f as q } from "../../formatErrorMessage-BqPuTBN-.js";
+import * as Q from "react-dom";
+import { T as Ke } from "../../useTimeout-CflX-kz3.js";
+import { a as je, u as K } from "../../useRenderElement-DwToLA61.js";
+import { u as ze } from "../../useOnMount-VRW6CK2u.js";
+import { j as Ye, C as We, k as qe, i as Je, l as Qe, b as Xe, F as ce, h as Ze, P as $e } from "../../FloatingPortal-tWyuKRSN.js";
+import { p as et, c as tt, u as ot, a as nt, b as st, d as rt } from "../../useSyncedFloatingRootContext-Dorsv-jf.js";
+import { t as J, a as X, e as it, f as Z, c as $, i as at } from "../../createBaseUIEventDetails-D8M2Yl-a.js";
+import { u as ct } from "../../useRole-oDBdbuwQ.js";
+import { u as pe } from "../../useStableCallback-CkTrVkNX.js";
+import { u as pt } from "../../useButton-DfIwsdb8.js";
+import { u as te } from "../../useBaseUiId-B7WyxtIE.js";
+import { u as ut, a as lt } from "../../useHoverReferenceInteraction-SfOBPoXM.js";
+import { s as dt } from "../../safePolygon-DWy1dGKJ.js";
+import { f as ft } from "../../element-CZEOj04G.js";
+import { i as mt } from "../../inertValue-BCYGsdmf.js";
+import { u as oe } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
+import { a as gt, g as fe, b as vt } from "../../getDisabledMountTransitionStyles-YfHPge6T.js";
+import { u as ht, a as Pt, t as Et } from "../../useOpenChangeComplete-Dse9kY9E.js";
+import { i as Ct } from "../../floating-ui.utils.dom-C7FS5id0.js";
+import { u as Tt } from "../../usePopupAutoResize-CNR6Ekmx.js";
+import { u as Rt } from "../../DirectionContext-C2o_MF_i.js";
+import { C as bt } from "../../composite-C9L5QmZL.js";
+import { u as St } from "../../ToolbarRootContext-CvvL0Tk1.js";
+import '../../index29.css';const ne = /* @__PURE__ */ n.createContext(void 0);
+process.env.NODE_ENV !== "production" && (ne.displayName = "PopoverRootContext");
+function V(t) {
+  const s = n.useContext(ne);
+  if (s === void 0 && !t)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: PopoverRootContext is missing. Popover parts must be placed within <Popover.Root>." : q(47));
+  return s;
+}
+function yt() {
+  return {
+    ...tt(),
+    disabled: !1,
+    modal: !1,
+    instantType: void 0,
+    openMethod: null,
+    openChangeReason: null,
+    titleElementId: void 0,
+    descriptionElementId: void 0,
+    stickIfOpen: !0,
+    nested: !1,
+    openOnHover: !1,
+    closeDelay: 0
+  };
+}
+const Ot = {
+  ...et,
+  disabled: x((t) => t.disabled),
+  instantType: x((t) => t.instantType),
+  openMethod: x((t) => t.openMethod),
+  openChangeReason: x((t) => t.openChangeReason),
+  modal: x((t) => t.modal),
+  stickIfOpen: x((t) => t.stickIfOpen),
+  titleElementId: x((t) => t.titleElementId),
+  descriptionElementId: x((t) => t.descriptionElementId),
+  openOnHover: x((t) => t.openOnHover),
+  closeDelay: x((t) => t.closeDelay)
+};
+class se extends xe {
+  constructor(s) {
+    const o = {
+      ...yt(),
+      ...s
+    };
+    o.open && s?.mounted === void 0 && (o.mounted = !0), super(o, {
+      popupRef: /* @__PURE__ */ n.createRef(),
+      backdropRef: /* @__PURE__ */ n.createRef(),
+      internalBackdropRef: /* @__PURE__ */ n.createRef(),
+      onOpenChange: void 0,
+      onOpenChangeComplete: void 0,
+      triggerFocusTargetRef: /* @__PURE__ */ n.createRef(),
+      beforeContentFocusGuardRef: /* @__PURE__ */ n.createRef(),
+      stickIfOpenTimeout: new Ke(),
+      triggerElements: new Ne()
+    }, Ot);
+  }
+  setOpen = (s, o) => {
+    const f = o.reason === J, P = o.reason === X && o.event.detail === 0, i = !s && (o.reason === it || o.reason == null);
+    if (o.preventUnmountOnClose = () => {
+      this.set("preventUnmountingOnClose", !0);
+    }, this.context.onOpenChange?.(s, o), o.isCanceled)
+      return;
+    const a = {
+      open: s,
+      nativeEvent: o.event,
+      reason: o.reason,
+      nested: this.state.nested,
+      triggerElement: o.trigger
+    };
+    this.state.floatingRootContext.context.events?.emit("openchange", a);
+    const e = () => {
+      const m = {
+        open: s,
+        openChangeReason: o.reason
+      }, r = o.trigger?.id ?? null;
+      (r || s) && (m.activeTriggerId = r, m.activeTriggerElement = o.trigger ?? null), this.update(m);
+    };
+    f ? (this.set("stickIfOpen", !0), this.context.stickIfOpenTimeout.start(Ye, () => {
+      this.set("stickIfOpen", !1);
+    }), Q.flushSync(e)) : e(), P || i ? this.set("instantType", P ? "click" : "dismiss") : o.reason === Z ? this.set("instantType", "focus") : this.set("instantType", void 0);
+  };
+  static useStore(s, o) {
+    const f = je(() => s ?? new se(o)).current;
+    return ze(f.disposeEffect), f;
+  }
+  disposeEffect = () => this.context.stickIfOpenTimeout.disposeEffect();
+}
+function ue({
+  props: t
+}) {
+  const {
+    children: s,
+    open: o,
+    defaultOpen: f = !1,
+    onOpenChange: P,
+    onOpenChangeComplete: i,
+    modal: a = !1,
+    handle: l,
+    triggerId: e,
+    defaultTriggerId: m = null
+  } = t, r = se.useStore(l?.store, {
+    open: o ?? f,
+    modal: a,
+    activeTriggerId: e !== void 0 ? e : m
+  });
+  r.useControlledProp("open", o, f), r.useControlledProp("activeTriggerId", e, m);
+  const v = r.useState("open"), R = r.useState("positionerElement"), N = r.useState("payload"), M = r.useState("openChangeReason");
+  r.useContextCallback("onOpenChange", P), r.useContextCallback("onOpenChangeComplete", i);
+  const {
+    openMethod: p,
+    triggerProps: h,
+    reset: k
+  } = Ve(v);
+  ot(r);
+  const {
+    forceUnmount: c
+  } = nt(v, r, () => {
+    r.update({
+      stickIfOpen: !0,
+      openChangeReason: null
+    }), k();
+  });
+  Be(v && a === !0 && M !== J && p !== "touch", R), n.useEffect(() => {
+    v || r.context.stickIfOpenTimeout.clear();
+  }, [r, v]);
+  const F = n.useCallback((H) => {
+    const S = $(H);
+    return S.preventUnmountOnClose = () => {
+      r.set("preventUnmountingOnClose", !0);
+    }, S;
+  }, [r]), E = n.useCallback(() => {
+    r.setOpen(!1, F(at));
+  }, [r, F]);
+  n.useImperativeHandle(t.actionsRef, () => ({
+    unmount: c,
+    close: E
+  }), [c, E]);
+  const O = st({
+    popupStore: r,
+    onOpenChange: r.setOpen
+  }), I = Fe(O, {
+    outsidePressEvent: {
+      // Ensure `aria-hidden` on outside elements is removed immediately
+      // on outside press when trapping focus.
+      mouse: a === "trap-focus" ? "sloppy" : "intentional",
+      touch: "sloppy"
+    }
+  }), C = ct(O), {
+    getReferenceProps: w,
+    getFloatingProps: _,
+    getTriggerProps: b
+  } = de([I, C]), B = n.useMemo(() => w(h), [w, h]), A = n.useMemo(() => b(h), [b, h]), L = n.useMemo(() => _(), [_]);
+  r.useSyncedValues({
+    modal: a,
+    openMethod: p,
+    activeTriggerProps: B,
+    inactiveTriggerProps: A,
+    popupProps: L,
+    floatingRootContext: O,
+    nested: _e() != null
+  });
+  const D = n.useMemo(() => ({
+    store: r
+  }), [r]);
+  return /* @__PURE__ */ u(ne.Provider, {
+    value: D,
+    children: typeof s == "function" ? s({
+      payload: N
+    }) : s
+  });
+}
+function It(t) {
+  return V(!0) ? /* @__PURE__ */ u(ue, {
+    props: t
+  }) : /* @__PURE__ */ u(Me, {
+    children: /* @__PURE__ */ u(ue, {
+      props: t
+    })
+  });
+}
+const xt = 300, me = /* @__PURE__ */ n.forwardRef(function(s, o) {
+  const {
+    render: f,
+    className: P,
+    disabled: i = !1,
+    nativeButton: a = !0,
+    handle: l,
+    payload: e,
+    openOnHover: m = !1,
+    delay: r = xt,
+    closeDelay: v = 0,
+    id: R,
+    ...N
+  } = s, M = V(!0), p = l?.store ?? M?.store;
+  if (!p)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: <Popover.Trigger> must be either used within a <Popover.Root> component or provided with a handle." : q(74));
+  const h = te(R), k = p.useState("isTriggerActive", h), c = p.useState("floatingRootContext"), F = p.useState("isOpenedByTrigger", h), E = n.useRef(null), {
+    registerTrigger: O,
+    isMountedByThisTrigger: I
+  } = rt(h, E, p, {
+    payload: e,
+    disabled: i,
+    openOnHover: m,
+    closeDelay: v
+  }), C = p.useState("openChangeReason"), w = p.useState("stickIfOpen"), _ = p.useState("openMethod"), b = ut(c, {
+    enabled: c != null && m && (_ !== "touch" || C !== X),
+    mouseOnly: !0,
+    move: !1,
+    handleClose: dt(),
+    restMs: r,
+    delay: {
+      close: v
+    },
+    triggerElementRef: E,
+    isActiveTrigger: k
+  }), B = Le(c, {
+    enabled: c != null,
+    stickIfOpen: w
+  }), A = de([B]), L = p.useState("triggerProps", I), D = n.useMemo(() => ({
+    disabled: i,
+    open: F
+  }), [i, F]), {
+    getButtonProps: H,
+    buttonRef: S
+  } = pt({
+    disabled: i,
+    native: a
+  }), G = n.useMemo(() => ({
+    open(d) {
+      return d && C === X ? ke.open(d) : we.open(d);
+    }
+  }), [C]), T = K("button", s, {
+    state: D,
+    ref: [S, o, O, E],
+    props: [A.getReferenceProps(), b, L, {
+      [We]: "",
+      id: h
+    }, N, H],
+    stateAttributesMapping: G
+  }), U = n.useRef(null), j = pe((d) => {
+    Q.flushSync(() => {
+      p.setOpen(!1, $(Z, d.nativeEvent, d.currentTarget));
+    }), qe(U.current)?.focus();
+  }), z = pe((d) => {
+    const g = p.select("positionerElement");
+    if (g && Je(d, g))
+      p.context.beforeContentFocusGuardRef.current?.focus();
+    else {
+      Q.flushSync(() => {
+        p.setOpen(!1, $(Z, d.nativeEvent, d.currentTarget));
+      });
+      let y = Qe(E.current);
+      for (; y !== null && ft(g, y) || y?.hasAttribute("aria-hidden"); ) {
+        const W = y;
+        if (y = Xe(y), y === W)
+          break;
+      }
+      y?.focus();
+    }
+  });
+  return k ? /* @__PURE__ */ Y(n.Fragment, {
+    children: [/* @__PURE__ */ u(ce, {
+      ref: U,
+      onFocus: j
+    }), /* @__PURE__ */ u(n.Fragment, {
+      children: T
+    }, h), /* @__PURE__ */ u(ce, {
+      ref: p.context.triggerFocusTargetRef,
+      onFocus: z
+    })]
+  }) : /* @__PURE__ */ u(n.Fragment, {
+    children: T
+  }, h);
+});
+process.env.NODE_ENV !== "production" && (me.displayName = "PopoverTrigger");
+const re = /* @__PURE__ */ n.createContext(void 0);
+process.env.NODE_ENV !== "production" && (re.displayName = "PopoverPortalContext");
+function Nt() {
+  const t = n.useContext(re);
+  if (t === void 0)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: <Popover.Portal> is missing." : q(45));
+  return t;
+}
+const ge = /* @__PURE__ */ n.forwardRef(function(s, o) {
+  const {
+    keepMounted: f = !1,
+    ...P
+  } = s, {
+    store: i
+  } = V();
+  return i.useState("mounted") || f ? /* @__PURE__ */ u(re.Provider, {
+    value: f,
+    children: /* @__PURE__ */ u(Ze, {
+      ref: o,
+      ...P,
+      renderGuards: !1
+    })
+  }) : null;
+});
+process.env.NODE_ENV !== "production" && (ge.displayName = "PopoverPortal");
+const ie = /* @__PURE__ */ n.createContext(void 0);
+process.env.NODE_ENV !== "production" && (ie.displayName = "PopoverPositionerContext");
+function ve() {
+  const t = n.useContext(ie);
+  if (!t)
+    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: PopoverPositionerContext is missing. PopoverPositioner parts must be placed within <Popover.Positioner>." : q(46));
+  return t;
+}
+const he = /* @__PURE__ */ n.forwardRef(function(s, o) {
+  const {
+    render: f,
+    className: P,
+    anchor: i,
+    positionMethod: a = "absolute",
+    side: l = "bottom",
+    align: e = "center",
+    sideOffset: m = 0,
+    alignOffset: r = 0,
+    collisionBoundary: v = "clipping-ancestors",
+    collisionPadding: R = 5,
+    arrowPadding: N = 5,
+    sticky: M = !1,
+    disableAnchorTracking: p = !1,
+    collisionAvoidance: h = $e,
+    ...k
+  } = s, {
+    store: c
+  } = V(), F = Nt(), E = Ae(), O = c.useState("floatingRootContext"), I = c.useState("mounted"), C = c.useState("open"), w = c.useState("openChangeReason"), _ = c.useState("activeTriggerElement"), b = c.useState("modal"), B = c.useState("positionerElement"), A = c.useState("instantType"), L = c.useState("transitionStatus"), D = n.useRef(null), H = ht(B, !1, !1), S = gt({
+    anchor: i,
+    floatingRootContext: O,
+    positionMethod: a,
+    mounted: I,
+    side: l,
+    sideOffset: m,
+    align: e,
+    alignOffset: r,
+    arrowPadding: N,
+    collisionBoundary: v,
+    collisionPadding: R,
+    sticky: M,
+    disableAnchorTracking: p,
+    keepMounted: F,
+    nodeId: E,
+    collisionAvoidance: h,
+    adaptiveOrigin: vt
+  }), G = n.useMemo(() => {
+    const g = {};
+    return C || (g.pointerEvents = "none"), {
+      role: "presentation",
+      hidden: !I,
+      style: {
+        ...S.positionerStyles,
+        ...g
+      }
+    };
+  }, [C, I, S.positionerStyles]), T = n.useMemo(() => ({
+    props: G,
+    ...S
+  }), [G, S]), U = O?.select("domReferenceElement");
+  oe(() => {
+    const g = U, y = D.current;
+    if (g && (D.current = g), y && g && g !== y) {
+      c.set("instantType", void 0);
+      const W = new AbortController();
+      return H(() => {
+        c.set("instantType", "trigger-change");
+      }, W.signal), () => {
+        W.abort();
+      };
+    }
+  }, [U, H, c]);
+  const j = n.useMemo(() => ({
+    open: C,
+    side: T.side,
+    align: T.align,
+    anchorHidden: T.anchorHidden,
+    instant: A
+  }), [C, T.side, T.align, T.anchorHidden, A]), z = n.useCallback((g) => {
+    c.set("positionerElement", g);
+  }, [c]), d = K("div", s, {
+    state: j,
+    props: [T.props, fe(L), k],
+    ref: [o, z],
+    stateAttributesMapping: ee
+  });
+  return /* @__PURE__ */ Y(ie.Provider, {
+    value: T,
+    children: [I && b === !0 && w !== J && /* @__PURE__ */ u(Ue, {
+      ref: c.context.internalBackdropRef,
+      inert: mt(!C),
+      cutout: _
+    }), /* @__PURE__ */ u(De, {
+      id: E,
+      children: d
+    })]
+  });
+});
+process.env.NODE_ENV !== "production" && (he.displayName = "PopoverPositioner");
+const Mt = {
+  ...ee,
+  ...Et
+}, Pe = /* @__PURE__ */ n.forwardRef(function(s, o) {
+  const {
+    className: f,
+    render: P,
+    initialFocus: i,
+    finalFocus: a,
+    ...l
+  } = s, {
+    store: e
+  } = V(), m = ve(), r = St() != null, v = Rt(), R = e.useState("open"), N = e.useState("openMethod"), M = e.useState("instantType"), p = e.useState("transitionStatus"), h = e.useState("popupProps"), k = e.useState("titleElementId"), c = e.useState("descriptionElementId"), F = e.useState("modal"), E = e.useState("mounted"), O = e.useState("openChangeReason"), I = e.useState("popupElement"), C = e.useState("payload"), w = e.useState("positionerElement"), _ = e.useState("activeTriggerElement"), b = e.useState("floatingRootContext");
+  Pt({
+    open: R,
+    ref: e.context.popupRef,
+    onComplete() {
+      R && e.context.onOpenChangeComplete?.(!0);
+    }
+  });
+  const B = e.useState("disabled"), A = e.useState("openOnHover"), L = e.useState("closeDelay");
+  lt(b, {
+    enabled: A && !B,
+    closeDelay: L
+  });
+  function D(d) {
+    return d === "touch" ? e.context.popupRef.current : !0;
+  }
+  const H = i === void 0 ? D : i, S = n.useMemo(() => ({
+    open: R,
+    side: m.side,
+    align: m.align,
+    instant: M,
+    transitionStatus: p
+  }), [R, m.side, m.align, M, p]), G = n.useCallback((d) => {
+    e.set("popupElement", d);
+  }, [e]);
+  function T() {
+    b.context.events.emit("measure-layout");
+  }
+  function U(d, g) {
+    b.context.events.emit("measure-layout-complete", {
+      previousDimensions: d,
+      nextDimensions: g
+    });
+  }
+  const j = n.useCallback(() => e.context.triggerElements.size > 1, [e]);
+  Tt({
+    popupElement: I,
+    positionerElement: w,
+    mounted: E,
+    content: C,
+    enabled: j,
+    onMeasureLayout: T,
+    onMeasureLayoutComplete: U,
+    side: m.side,
+    direction: v
+  });
+  const z = K("div", s, {
+    state: S,
+    ref: [o, e.context.popupRef, G],
+    props: [h, {
+      "aria-labelledby": k,
+      "aria-describedby": c,
+      onKeyDown(d) {
+        r && bt.has(d.key) && d.stopPropagation();
+      }
+    }, fe(p), l],
+    stateAttributesMapping: Mt
+  });
+  return /* @__PURE__ */ u(Ge, {
+    context: b,
+    openInteractionType: N,
+    modal: F === "trap-focus",
+    disabled: !E || O === J,
+    initialFocus: H,
+    returnFocus: a,
+    restoreFocus: "popup",
+    previousFocusableElement: Ct(_) ? _ : void 0,
+    nextFocusableElement: e.context.triggerFocusTargetRef,
+    beforeContentFocusGuardRef: e.context.beforeContentFocusGuardRef,
+    children: z
+  });
+});
+process.env.NODE_ENV !== "production" && (Pe.displayName = "PopoverPopup");
+const Ee = /* @__PURE__ */ n.forwardRef(function(s, o) {
+  const {
+    className: f,
+    render: P,
+    ...i
+  } = s, {
+    store: a
+  } = V(), l = a.useState("open"), {
+    arrowRef: e,
+    side: m,
+    align: r,
+    arrowUncentered: v,
+    arrowStyles: R
+  } = ve(), N = n.useMemo(() => ({
+    open: l,
+    side: m,
+    align: r,
+    uncentered: v
+  }), [l, m, r, v]);
+  return K("div", s, {
+    state: N,
+    ref: [o, e],
+    props: [{
+      style: R,
+      "aria-hidden": !0
+    }, i],
+    stateAttributesMapping: ee
+  });
+});
+process.env.NODE_ENV !== "production" && (Ee.displayName = "PopoverArrow");
+const Ce = /* @__PURE__ */ n.forwardRef(function(s, o) {
+  const {
+    render: f,
+    className: P,
+    ...i
+  } = s, {
+    store: a
+  } = V(), l = te(i.id);
+  return oe(() => (a.set("titleElementId", l), () => {
+    a.set("titleElementId", void 0);
+  }), [a, l]), K("h2", s, {
+    ref: o,
+    props: [{
+      id: l
+    }, i]
+  });
+});
+process.env.NODE_ENV !== "production" && (Ce.displayName = "PopoverTitle");
+const Te = /* @__PURE__ */ n.forwardRef(function(s, o) {
+  const {
+    render: f,
+    className: P,
+    ...i
+  } = s, {
+    store: a
+  } = V(), l = te(i.id);
+  return oe(() => (a.set("descriptionElementId", l), () => {
+    a.set("descriptionElementId", void 0);
+  }), [a, l]), K("p", s, {
+    ref: o,
+    props: [{
+      id: l
+    }, i]
+  });
+});
+process.env.NODE_ENV !== "production" && (Te.displayName = "PopoverDescription");
+const Ft = "_popover_lm3eb_1", _t = "_popover__header_lm3eb_6", le = {
+  popover: Ft,
+  popover__header: _t
+};
+function lo({
+  align: t,
+  side: s,
+  title: o,
+  description: f,
+  background: P = "root",
+  trigger: i,
+  className: a,
+  children: l,
+  ...e
+}) {
+  return /* @__PURE__ */ Y(It, { ...e, children: [
+    i ? /* @__PURE__ */ u(me, { render: i }) : null,
+    /* @__PURE__ */ u(ge, { children: /* @__PURE__ */ u(he, { align: t, side: s, sideOffset: 8, children: /* @__PURE__ */ Y(
+      Pe,
+      {
+        render: /* @__PURE__ */ u(Se, { background: P }),
+        className: Re(
+          ae.tooltip,
+          le.popover,
+          He.transition_scale,
+          a
+        ),
+        children: [
+          /* @__PURE__ */ u(Ee, { className: ae.tooltip__arrow, children: /* @__PURE__ */ u(Oe, {}) }),
+          o || f ? /* @__PURE__ */ Y(Ie, { className: le.popover__header, children: [
+            o ? /* @__PURE__ */ u(
+              Ce,
+              {
+                render: /* @__PURE__ */ u(be, { level: 2, size: "2xl" }),
+                children: o
+              }
+            ) : null,
+            f ? /* @__PURE__ */ u(
+              Te,
+              {
+                render: /* @__PURE__ */ u(ye, { color: "dimmer" }),
+                children: f
+              }
+            ) : null
+          ] }) : null,
+          l
+        ]
+      }
+    ) }) })
+  ] });
+}
+export {
+  lo as Popover
+};

package/dist/components/preview-card/index.d.ts

@@ -0,0 +1,17 @@
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+import { ReactElement, ReactNode } from 'react';
+import { Background } from '../surface';
+export type PreviewCardProps = PreviewCardPrimitive.Root.Props & Pick<PreviewCardPrimitive.Positioner.Props, "align" | "side"> & {
+    /**
+     * Specify trigger to open preview.
+     * You should use an Anchor component.
+     */
+    trigger?: ReactElement;
+    /** Surface background preview card should use. Defaults to "root". */
+    background?: Background;
+    /** Apply styles to preview card content. */
+    className?: string;
+    /** Preview card content */
+    children?: ReactNode;
+};
+export declare function PreviewCard({ align, side, background, trigger, children, className, ...props }: PreviewCardProps): import("react/jsx-runtime").JSX.Element;