@koide-labs/ui 0.0.0 → 0.0.1

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

@@ -0,0 +1,402 @@
+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-C1qXdi5T.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 '../../index28.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 d = t.useState("domReferenceElement"), f = t.context.dataRef, {
+    delay: u
+  } = s, a = he(), n = e.useRef(!1);
+  e.useEffect(() => {
+    const r = ye(d);
+    function c() {
+      const i = t.select("domReferenceElement");
+      !t.select("open") && Re(i) && i === Q(xe(i)) && (n.current = !0);
+    }
+    return r.addEventListener("blur", c), () => {
+      r.removeEventListener("blur", c);
+    };
+  }, [t, d]);
+  const p = e.useMemo(() => ({
+    onFocus(r) {
+      const {
+        nativeEvent: c
+      } = r, i = typeof u == "function" ? u() : u;
+      a.start(i ?? 0, () => {
+        t.setOpen(!0, G(L, c));
+      });
+    },
+    onBlur(r) {
+      n.current = !1;
+      const {
+        relatedTarget: c,
+        nativeEvent: i
+      } = r;
+      a.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, i));
+      });
+    }
+  }), [u, t, f, a]);
+  return e.useMemo(() => ({
+    reference: p
+  }), [p]);
+}
+function Fe(t) {
+  const {
+    open: s,
+    defaultOpen: d,
+    onOpenChange: f,
+    onOpenChangeComplete: u,
+    actionsRef: a
+  } = t, n = e.useRef(Z), p = e.useRef($), r = V((v) => {
+    n.current = v.delay ?? Z, p.current = v.closeDelay ?? $;
+  }), [c, i] = e.useState(null), [l, m] = e.useState(null), [w, h] = e.useState(), S = e.useRef(null), [C, T] = Ee({
+    controlled: s,
+    default: d,
+    name: "PreviewCard",
+    state: "open"
+  }), y = V(f), {
+    mounted: R,
+    setMounted: N,
+    transitionStatus: D
+  } = De(C), O = V(() => {
+    N(!1), u?.(!1);
+  });
+  ee({
+    enabled: !a,
+    open: C,
+    ref: S,
+    onComplete() {
+      C || O();
+    }
+  }), e.useImperativeHandle(a, () => ({
+    unmount: O
+  }), [O]);
+  const o = V((v, E) => {
+    const de = E.reason === J, Y = v && E.reason === L, ue = !v && (E.reason === Ne || E.reason === Oe);
+    if (y(v, E), E.isCanceled)
+      return;
+    function K() {
+      T(v);
+    }
+    de ? ve.flushSync(K) : K(), Y || ue ? 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()
+    })
+  }), ie = Ue(g, {
+    delay: _
+  }), ce = Pe(g), {
+    getReferenceProps: j,
+    getFloatingProps: W
+  } = Ce([b, ie, ce]), le = e.useMemo(() => ({
+    open: C,
+    setOpen: o,
+    mounted: R,
+    setMounted: N,
+    setTriggerElement: i,
+    positionerElement: l,
+    setPositionerElement: m,
+    popupRef: S,
+    triggerProps: j(),
+    popupProps: W(),
+    floatingRootContext: g,
+    instantType: M,
+    transitionStatus: D,
+    onOpenChangeComplete: u,
+    writeDelayRefs: r
+  }), [C, o, R, N, l, j, W, g, M, D, u, 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, d) {
+  const {
+    keepMounted: f = !1,
+    ...u
+  } = s, {
+    mounted: a
+  } = x();
+  return a || f ? /* @__PURE__ */ P(k.Provider, {
+    value: f,
+    children: /* @__PURE__ */ P(Ie, {
+      ref: d,
+      ...u
+    })
+  }) : null;
+});
+process.env.NODE_ENV !== "production" && (te.displayName = "PreviewCardPortal");
+const oe = /* @__PURE__ */ e.forwardRef(function(s, d) {
+  const {
+    render: f,
+    className: u,
+    delay: a,
+    closeDelay: n,
+    ...p
+  } = s, {
+    open: r,
+    triggerProps: c,
+    setTriggerElement: i,
+    writeDelayRefs: l
+  } = x();
+  Te(() => {
+    l({
+      delay: a,
+      closeDelay: n
+    });
+  });
+  const m = e.useMemo(() => ({
+    open: r
+  }), [r]);
+  return A("a", s, {
+    ref: [i, d],
+    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, d) {
+  const {
+    render: f,
+    className: u,
+    anchor: a,
+    positionMethod: n = "absolute",
+    side: p = "bottom",
+    align: r = "center",
+    sideOffset: c = 0,
+    alignOffset: i = 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: a,
+    floatingRootContext: N,
+    positionMethod: n,
+    mounted: R,
+    side: p,
+    sideOffset: c,
+    align: r,
+    alignOffset: i,
+    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, d],
+    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, d) {
+  const {
+    className: f,
+    render: u,
+    ...a
+  } = s, {
+    open: n,
+    transitionStatus: p,
+    popupRef: r,
+    onOpenChangeComplete: c,
+    popupProps: i
+  } = 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, d],
+    state: w,
+    props: [i, be(p), a],
+    stateAttributesMapping: ke
+  });
+});
+process.env.NODE_ENV !== "production" && (se.displayName = "PreviewCardPopup");
+const ae = /* @__PURE__ */ e.forwardRef(function(s, d) {
+  const {
+    render: f,
+    className: u,
+    ...a
+  } = s, {
+    open: n
+  } = x(), {
+    arrowRef: p,
+    side: r,
+    align: c,
+    arrowUncentered: i,
+    arrowStyles: l
+  } = ne(), m = e.useMemo(() => ({
+    open: n,
+    side: r,
+    align: c,
+    uncentered: i
+  }), [n, r, c, i]);
+  return A("div", s, {
+    state: m,
+    ref: [p, d],
+    props: [{
+      style: l,
+      "aria-hidden": !0
+    }, a],
+    stateAttributesMapping: U
+  });
+});
+process.env.NODE_ENV !== "production" && (ae.displayName = "PreviewCardArrow");
+const Be = {
+  "preview-card": "_preview-card_1o167_1"
+};
+function ct({
+  align: t,
+  side: s,
+  background: d,
+  trigger: f,
+  children: u,
+  className: a,
+  ...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: d }),
+            className: pe(
+              z.tooltip,
+              Be["preview-card"],
+              ge.transition_scale,
+              a
+            ),
+            children: [
+              /* @__PURE__ */ P(
+                ae,
+                {
+                  className: z.tooltip__arrow,
+                  children: /* @__PURE__ */ P(me, {})
+                }
+              ),
+              u
+            ]
+          }
+        )
+      }
+    ) })
+  ] });
+}
+export {
+  ct as PreviewCard
+};

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

@@ -0,0 +1,13 @@
+import { Radio as RadioPrimitive } from '@base-ui/react/radio';
+import { RadioGroup as RadioGroupPrimitive } from '@base-ui/react/radio-group';
+import { Color } from '../view';
+export declare function RadioGroup({ color, className, ...props }: RadioGroupPrimitive.Props & {
+    /** Optional color for child radio elements. Defaults to "primary". */
+    color?: Color;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function Radio({ color, label, className, ...props }: RadioPrimitive.Root.Props & {
+    /** Optional label. If one is provided, we wrap radio in a label element. Otherwise, we just return a standard radio. */
+    label?: string;
+    /** Optional color. Defaults to the radio group color, often primary. */
+    color?: Color;
+}): import("react/jsx-runtime").JSX.Element;