@koide-labs/ui 0.0.15 → 0.1.1

package/dist/components/preview-card/index.js

@@ -1,403 +1,5 @@
 "use client";
-import { jsx as P, jsxs as q } from "react/jsx-runtime";
-import { c as pe } from "../../clsx-OuTLNxxd.js";
-import { Surface as fe } from "../surface/index.js";
-import { t as z, T as me } from "../../tooltip-arrow-cs6vjjqZ.js";
-import { d as Pe, e as Ce, f as we, p as U, t as ge } from "../../transitions.module-CWX8e5cx.js";
-import * as e from "react";
-import * as ve from "react-dom";
-import { u as Ee } from "../../useControlled-Du4sJyMj.js";
-import { u as V } from "../../useStableCallback-CkTrVkNX.js";
-import { f as F } from "../../formatErrorMessage-BqPuTBN-.js";
-import { d as ye, i as Re } from "../../floating-ui.utils.dom-C7FS5id0.js";
-import { u as he } from "../../useTimeout-CflX-kz3.js";
-import { c as G, b as L, t as J, a as Ne, e as Oe } from "../../createBaseUIEventDetails-D8M2Yl-a.js";
-import { h as Q, f as X, d as xe } from "../../element-CZEOj04G.js";
-import { a as ee, t as Se } from "../../useOpenChangeComplete-Dse9kY9E.js";
-import { u as De } from "../../useTransitionStatus-CUfcuGAV.js";
-import { u as Me, a as _e, g as be } from "../../getDisabledMountTransitionStyles-YfHPge6T.js";
-import { u as Ve, s as Ae } from "../../safePolygon-DWy1dGKJ.js";
-import { u as Te } from "../../useIsoLayoutEffect-CIDbvm3Q.js";
-import { u as A } from "../../useRenderElement-DwToLA61.js";
-import { F as Ie } from "../../FloatingPortalLite-DVyq6YhV.js";
-import { P as Le } from "../../FloatingPortal-tWyuKRSN.js";
-import '../../index29.css';const H = /* @__PURE__ */ e.createContext(void 0);
-process.env.NODE_ENV !== "production" && (H.displayName = "PreviewCardRootContext");
-function x() {
-  const t = e.useContext(H);
-  if (t === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: PreviewCardRootContext is missing. PreviewCard parts must be placed within <PreviewCard.Root>." : F(50));
-  return t;
-}
-const Z = 600, $ = 300;
-function Ue(t, s = {}) {
-  const u = t.useState("domReferenceElement"), f = t.context.dataRef, {
-    delay: d
-  } = s, i = he(), n = e.useRef(!1);
-  e.useEffect(() => {
-    const r = ye(u);
-    function c() {
-      const a = t.select("domReferenceElement");
-      !t.select("open") && Re(a) && a === Q(xe(a)) && (n.current = !0);
-    }
-    return r.addEventListener("blur", c), () => {
-      r.removeEventListener("blur", c);
-    };
-  }, [t, u]);
-  const p = e.useMemo(() => ({
-    onFocus(r) {
-      const {
-        nativeEvent: c
-      } = r, a = typeof d == "function" ? d() : d;
-      i.start(a ?? 0, () => {
-        t.setOpen(!0, G(L, c));
-      });
-    },
-    onBlur(r) {
-      n.current = !1;
-      const {
-        relatedTarget: c,
-        nativeEvent: a
-      } = r;
-      i.start(0, () => {
-        const l = t.select("domReferenceElement"), m = Q(l ? l.ownerDocument : document);
-        !c && m === l || X(f.current.floatingContext?.refs.floating.current, m) || X(l, m) || t.setOpen(!1, G(L, a));
-      });
-    }
-  }), [d, t, f, i]);
-  return e.useMemo(() => ({
-    reference: p
-  }), [p]);
-}
-function Fe(t) {
-  const {
-    open: s,
-    defaultOpen: u,
-    onOpenChange: f,
-    onOpenChangeComplete: d,
-    actionsRef: i
-  } = t, n = e.useRef(Z), p = e.useRef($), r = V((v) => {
-    n.current = v.delay ?? Z, p.current = v.closeDelay ?? $;
-  }), [c, a] = e.useState(null), [l, m] = e.useState(null), [w, h] = e.useState(), S = e.useRef(null), [C, T] = Ee({
-    controlled: s,
-    default: u,
-    name: "PreviewCard",
-    state: "open"
-  }), y = V(f), {
-    mounted: R,
-    setMounted: N,
-    transitionStatus: D
-  } = De(C), O = V(() => {
-    N(!1), d?.(!1);
-  });
-  ee({
-    enabled: !i,
-    open: C,
-    ref: S,
-    onComplete() {
-      C || O();
-    }
-  }), e.useImperativeHandle(i, () => ({
-    unmount: O
-  }), [O]);
-  const o = V((v, E) => {
-    const ue = E.reason === J, Y = v && E.reason === L, de = !v && (E.reason === Ne || E.reason === Oe);
-    if (y(v, E), E.isCanceled)
-      return;
-    function K() {
-      T(v);
-    }
-    ue ? ve.flushSync(K) : K(), Y || de ? h(Y ? "focus" : "dismiss") : E.reason === J && h(void 0);
-  }), g = Me({
-    elements: {
-      reference: c,
-      floating: l
-    },
-    open: C,
-    onOpenChange: o
-  }), M = w, _ = () => n.current, I = () => p.current, b = Ve(g, {
-    mouseOnly: !0,
-    move: !1,
-    handleClose: Ae(),
-    restMs: _,
-    delay: () => ({
-      close: I()
-    })
-  }), ae = Ue(g, {
-    delay: _
-  }), ce = Pe(g), {
-    getReferenceProps: j,
-    getFloatingProps: W
-  } = Ce([b, ae, ce]), le = e.useMemo(() => ({
-    open: C,
-    setOpen: o,
-    mounted: R,
-    setMounted: N,
-    setTriggerElement: a,
-    positionerElement: l,
-    setPositionerElement: m,
-    popupRef: S,
-    triggerProps: j(),
-    popupProps: W(),
-    floatingRootContext: g,
-    instantType: M,
-    transitionStatus: D,
-    onOpenChangeComplete: d,
-    writeDelayRefs: r
-  }), [C, o, R, N, l, j, W, g, M, D, d, r]);
-  return /* @__PURE__ */ P(H.Provider, {
-    value: le,
-    children: t.children
-  });
-}
-const k = /* @__PURE__ */ e.createContext(void 0);
-process.env.NODE_ENV !== "production" && (k.displayName = "PreviewCardPortalContext");
-function He() {
-  const t = e.useContext(k);
-  if (t === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: <PreviewCard.Portal> is missing." : F(48));
-  return t;
-}
-const te = /* @__PURE__ */ e.forwardRef(function(s, u) {
-  const {
-    keepMounted: f = !1,
-    ...d
-  } = s, {
-    mounted: i
-  } = x();
-  return i || f ? /* @__PURE__ */ P(k.Provider, {
-    value: f,
-    children: /* @__PURE__ */ P(Ie, {
-      ref: u,
-      ...d
-    })
-  }) : null;
-});
-process.env.NODE_ENV !== "production" && (te.displayName = "PreviewCardPortal");
-const oe = /* @__PURE__ */ e.forwardRef(function(s, u) {
-  const {
-    render: f,
-    className: d,
-    delay: i,
-    closeDelay: n,
-    ...p
-  } = s, {
-    open: r,
-    triggerProps: c,
-    setTriggerElement: a,
-    writeDelayRefs: l
-  } = x();
-  Te(() => {
-    l({
-      delay: i,
-      closeDelay: n
-    });
-  });
-  const m = e.useMemo(() => ({
-    open: r
-  }), [r]);
-  return A("a", s, {
-    ref: [a, u],
-    state: m,
-    props: [c, p],
-    stateAttributesMapping: we
-  });
-});
-process.env.NODE_ENV !== "production" && (oe.displayName = "PreviewCardTrigger");
-const B = /* @__PURE__ */ e.createContext(void 0);
-process.env.NODE_ENV !== "production" && (B.displayName = "PreviewCardPositionerContext");
-function ne() {
-  const t = e.useContext(B);
-  if (t === void 0)
-    throw new Error(process.env.NODE_ENV !== "production" ? "Base UI: <PreviewCard.Popup> and <PreviewCard.Arrow> must be used within the <PreviewCard.Positioner> component" : F(49));
-  return t;
-}
-const re = /* @__PURE__ */ e.forwardRef(function(s, u) {
-  const {
-    render: f,
-    className: d,
-    anchor: i,
-    positionMethod: n = "absolute",
-    side: p = "bottom",
-    align: r = "center",
-    sideOffset: c = 0,
-    alignOffset: a = 0,
-    collisionBoundary: l = "clipping-ancestors",
-    collisionPadding: m = 5,
-    arrowPadding: w = 5,
-    sticky: h = !1,
-    disableAnchorTracking: S = !1,
-    collisionAvoidance: C = Le,
-    ...T
-  } = s, {
-    open: y,
-    mounted: R,
-    floatingRootContext: N,
-    setPositionerElement: D
-  } = x(), O = He(), o = _e({
-    anchor: i,
-    floatingRootContext: N,
-    positionMethod: n,
-    mounted: R,
-    side: p,
-    sideOffset: c,
-    align: r,
-    alignOffset: a,
-    arrowPadding: w,
-    collisionBoundary: l,
-    collisionPadding: m,
-    sticky: h,
-    disableAnchorTracking: S,
-    keepMounted: O,
-    collisionAvoidance: C
-  }), g = e.useMemo(() => {
-    const b = {};
-    return y || (b.pointerEvents = "none"), {
-      role: "presentation",
-      hidden: !R,
-      style: {
-        ...o.positionerStyles,
-        ...b
-      }
-    };
-  }, [y, R, o.positionerStyles]), M = e.useMemo(() => ({
-    open: y,
-    side: o.side,
-    align: o.align,
-    anchorHidden: o.anchorHidden
-  }), [y, o.side, o.align, o.anchorHidden]), _ = e.useMemo(() => ({
-    side: o.side,
-    align: o.align,
-    arrowRef: o.arrowRef,
-    arrowUncentered: o.arrowUncentered,
-    arrowStyles: o.arrowStyles
-  }), [o.side, o.align, o.arrowRef, o.arrowUncentered, o.arrowStyles]), I = A("div", s, {
-    state: M,
-    ref: [D, u],
-    props: [g, T],
-    stateAttributesMapping: U
-  });
-  return /* @__PURE__ */ P(B.Provider, {
-    value: _,
-    children: I
-  });
-});
-process.env.NODE_ENV !== "production" && (re.displayName = "PreviewCardPositioner");
-const ke = {
-  ...U,
-  ...Se
-}, se = /* @__PURE__ */ e.forwardRef(function(s, u) {
-  const {
-    className: f,
-    render: d,
-    ...i
-  } = s, {
-    open: n,
-    transitionStatus: p,
-    popupRef: r,
-    onOpenChangeComplete: c,
-    popupProps: a
-  } = x(), {
-    side: l,
-    align: m
-  } = ne();
-  ee({
-    open: n,
-    ref: r,
-    onComplete() {
-      n && c?.(!0);
-    }
-  });
-  const w = e.useMemo(() => ({
-    open: n,
-    side: l,
-    align: m,
-    transitionStatus: p
-  }), [n, l, m, p]);
-  return A("div", s, {
-    ref: [r, u],
-    state: w,
-    props: [a, be(p), i],
-    stateAttributesMapping: ke
-  });
-});
-process.env.NODE_ENV !== "production" && (se.displayName = "PreviewCardPopup");
-const ie = /* @__PURE__ */ e.forwardRef(function(s, u) {
-  const {
-    render: f,
-    className: d,
-    ...i
-  } = s, {
-    open: n
-  } = x(), {
-    arrowRef: p,
-    side: r,
-    align: c,
-    arrowUncentered: a,
-    arrowStyles: l
-  } = ne(), m = e.useMemo(() => ({
-    open: n,
-    side: r,
-    align: c,
-    uncentered: a
-  }), [n, r, c, a]);
-  return A("div", s, {
-    state: m,
-    ref: [p, u],
-    props: [{
-      style: l,
-      "aria-hidden": !0
-    }, i],
-    stateAttributesMapping: U
-  });
-});
-process.env.NODE_ENV !== "production" && (ie.displayName = "PreviewCardArrow");
-const Be = {
-  "preview-card": "_preview-card_1o167_1"
-};
-function ct({
-  align: t,
-  side: s,
-  background: u,
-  trigger: f,
-  children: d,
-  className: i,
-  ...n
-}) {
-  return /* @__PURE__ */ q(Fe, { ...n, children: [
-    f ? /* @__PURE__ */ P(oe, { render: f }) : null,
-    /* @__PURE__ */ P(te, { children: /* @__PURE__ */ P(
-      re,
-      {
-        align: t,
-        side: s,
-        sideOffset: 8,
-        children: /* @__PURE__ */ q(
-          se,
-          {
-            render: /* @__PURE__ */ P(fe, { background: u }),
-            className: pe(
-              z.tooltip,
-              Be["preview-card"],
-              ge.transition_scale,
-              i
-            ),
-            children: [
-              /* @__PURE__ */ P(
-                ie,
-                {
-                  className: z.tooltip__arrow,
-                  children: /* @__PURE__ */ P(me, {})
-                }
-              ),
-              d
-            ]
-          }
-        )
-      }
-    ) })
-  ] });
-}
+import { PreviewCard as i } from "./preview-card.js";
 export {
-  ct as PreviewCard
+  i as PreviewCard
 };

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

@@ -0,0 +1,21 @@
+import { PreviewCard as PreviewCardPrimitive } from '@base-ui/react/preview-card';
+import { ReactElement, ReactNode } from 'react';
+import { Background } from '../surface';
+interface PreviewCardProps extends 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;
+}
+declare function PreviewCard({ align, side, background, trigger, children, className, ...props }: PreviewCardProps): import("react/jsx-runtime").JSX.Element;
+export { PreviewCard };
+export declare namespace PreviewCard {
+    type Props = PreviewCardProps;
+}