@godxjp/ui 19.6.0 → 20.1.0

package/dist/components/ui/accordion.js

@@ -1,45 +1,251 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as AccordionPrimitive from "@radix-ui/react-accordion";
+import { chain, mergeRefs } from "@react-aria/utils";
+import {
+  ButtonContext,
+  Disclosure,
+  DisclosureGroup,
+  DisclosureGroupStateContext,
+  DisclosurePanel,
+  DisclosureStateContext,
+  useSlottedContext
+} from "react-aria-components";
 import { ChevronDown } from "lucide-react";
 import { cn } from "../../lib/utils.js";
-const Accordion = AccordionPrimitive.Root;
-const AccordionItem = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AccordionPrimitive.Item,
-  {
-    ref,
-    "data-slot": "accordion-item",
-    className: cn("ui-accordion-item", className),
-    ...props
+import { Slot } from "../../lib/slot.js";
+const AccordionGroupContext = React.createContext({
+  orientation: "vertical"
+});
+const AccordionItemContext = React.createContext(null);
+function useAccordionItem(component) {
+  const item = React.useContext(AccordionItemContext);
+  const state = React.useContext(DisclosureStateContext);
+  if (!item || !state) {
+    throw new Error(`\`${component}\` ph\u1EA3i n\u1EB1m trong \`AccordionItem\`.`);
   }
-));
-AccordionItem.displayName = "AccordionItem";
-const AccordionTrigger = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(AccordionPrimitive.Header, { className: "ui-accordion-header", children: /* @__PURE__ */ jsxs(
-  AccordionPrimitive.Trigger,
-  {
-    ref,
-    "data-slot": "accordion-trigger",
-    className: cn("ui-accordion-trigger", className),
-    ...props,
-    children: [
-      children,
-      /* @__PURE__ */ jsx(ChevronDown, { className: "ui-accordion-chevron", "aria-hidden": "true" })
-    ]
+  return { item, state };
+}
+const TRIGGER_SELECTOR = '[data-slot="accordion-trigger"]:not([disabled])';
+function toArray(value) {
+  if (value === void 0) {
+    return [];
   }
-) }));
-AccordionTrigger.displayName = "AccordionTrigger";
-const AccordionContent = React.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsx(
-  AccordionPrimitive.Content,
-  {
+  return Array.isArray(value) ? value : [value];
+}
+function Accordion(accordionProps) {
+  const {
+    type,
+    value,
+    defaultValue,
+    onValueChange,
+    collapsible,
+    orientation = "vertical",
+    dir,
+    disabled,
+    onKeyDown,
+    children,
     ref,
-    "data-slot": "accordion-content",
-    className: cn("ui-accordion-content", className),
-    ...props,
-    children: /* @__PURE__ */ jsx("div", { className: "ui-accordion-content-inner", children })
+    ...props
+  } = accordionProps;
+  const [uncontrolled, setUncontrolled] = React.useState(() => toArray(defaultValue));
+  const isControlled = value !== void 0;
+  const expandedKeys = new Set(isControlled ? toArray(value) : uncontrolled);
+  function handleExpandedChange(keys) {
+    const next = [...keys].map(String);
+    if (type === "single" && !collapsible && next.length === 0) {
+      return;
+    }
+    if (!isControlled) {
+      setUncontrolled(next);
+    }
+    onValueChange?.(type === "multiple" ? next : next[0] ?? "");
+  }
+  function moveFocus(event) {
+    const from = event.target.closest?.(TRIGGER_SELECTOR);
+    if (!from) {
+      return;
+    }
+    const horizontal = orientation === "horizontal";
+    const forward = horizontal ? dir === "rtl" ? "ArrowLeft" : "ArrowRight" : "ArrowDown";
+    const backward = horizontal ? dir === "rtl" ? "ArrowRight" : "ArrowLeft" : "ArrowUp";
+    const triggers = [...event.currentTarget.querySelectorAll(TRIGGER_SELECTOR)];
+    const at = triggers.indexOf(from);
+    if (at < 0) {
+      return;
+    }
+    let to;
+    if (event.key === forward) {
+      to = (at + 1) % triggers.length;
+    } else if (event.key === backward) {
+      to = (at - 1 + triggers.length) % triggers.length;
+    } else if (event.key === "Home") {
+      to = 0;
+    } else if (event.key === "End") {
+      to = triggers.length - 1;
+    } else {
+      return;
+    }
+    event.preventDefault();
+    triggers[to].focus();
   }
-));
-AccordionContent.displayName = "AccordionContent";
+  return /* @__PURE__ */ jsx(
+    DisclosureGroup,
+    {
+      allowsMultipleExpanded: type === "multiple",
+      expandedKeys,
+      onExpandedChange: handleExpandedChange,
+      isDisabled: disabled,
+      render: (racProps) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            dir,
+            "data-orientation": orientation,
+            onKeyDown: chain(onKeyDown, moveFocus)
+          }
+        );
+      },
+      children: /* @__PURE__ */ jsx(AccordionGroupContext.Provider, { value: { orientation }, children })
+    }
+  );
+}
+function AccordionItem({
+  className,
+  disabled,
+  value,
+  children,
+  ref,
+  ...props
+}) {
+  const { orientation } = React.useContext(AccordionGroupContext);
+  const groupState = React.useContext(DisclosureGroupStateContext);
+  const isDisabled = Boolean(disabled || groupState?.isDisabled);
+  return /* @__PURE__ */ jsx(
+    Disclosure,
+    {
+      id: value,
+      isDisabled,
+      render: (racProps, { isExpanded }) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "accordion-item",
+            className: cn("ui-accordion-item", className),
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            "data-state": isExpanded ? "open" : "closed",
+            "data-disabled": isDisabled ? "" : void 0,
+            "data-orientation": orientation,
+            children: /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value: { orientation, isDisabled }, children })
+          }
+        );
+      }
+    }
+  );
+}
+function AccordionTrigger({
+  asChild,
+  className,
+  children,
+  onClick,
+  ...props
+}) {
+  const { item, state } = useAccordionItem("AccordionTrigger");
+  const trigger = useSlottedContext(ButtonContext, "trigger");
+  const Comp = asChild ? Slot : "button";
+  const dataState = state.isExpanded ? "open" : "closed";
+  const dataDisabled = item.isDisabled ? "" : void 0;
+  return /* @__PURE__ */ jsx(
+    "h3",
+    {
+      className: "ui-accordion-header",
+      "data-orientation": item.orientation,
+      "data-state": dataState,
+      "data-disabled": dataDisabled,
+      children: /* @__PURE__ */ jsxs(
+        Comp,
+        {
+          type: "button",
+          id: trigger?.id,
+          "aria-controls": state.isExpanded ? trigger?.["aria-controls"] : void 0,
+          "aria-expanded": state.isExpanded,
+          "data-slot": "accordion-trigger",
+          "data-state": dataState,
+          "data-disabled": dataDisabled,
+          "data-orientation": item.orientation,
+          disabled: item.isDisabled,
+          className: cn("ui-accordion-trigger", className),
+          ...props,
+          onClick: chain(onClick, () => {
+            if (!item.isDisabled) {
+              state.toggle();
+            }
+          }),
+          children: [
+            children,
+            /* @__PURE__ */ jsx(ChevronDown, { className: "ui-accordion-chevron", "aria-hidden": "true" })
+          ]
+        }
+      )
+    }
+  );
+}
+function AccordionContent({
+  className,
+  forceMount,
+  children,
+  ref,
+  ...props
+}) {
+  const { item, state } = useAccordionItem("AccordionContent");
+  return /* @__PURE__ */ jsx(
+    DisclosurePanel,
+    {
+      role: "region",
+      render: (racProps) => {
+        const {
+          className: _racClass,
+          "data-rac": _rac,
+          children: _racChildren,
+          ref: racRef,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            "data-slot": "accordion-content",
+            className: cn("ui-accordion-content", className),
+            ...props,
+            ...rest,
+            ref: mergeRefs(ref, racRef),
+            "data-state": state.isExpanded ? "open" : "closed",
+            "data-disabled": item.isDisabled ? "" : void 0,
+            "data-orientation": item.orientation,
+            children: state.isExpanded || forceMount ? /* @__PURE__ */ jsx("div", { className: "ui-accordion-content-inner", children }) : null
+          }
+        );
+      },
+      children: null
+    }
+  );
+}
 export {
   Accordion,
   AccordionContent,

package/dist/components/ui/aspect-ratio.d.ts

@@ -1,3 +1,24 @@
 import * as React from "react";
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
-export declare const AspectRatio: React.ForwardRefExoticComponent<Omit<AspectRatioPrimitive.AspectRatioProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+/**
+ * AspectRatio — hộp giữ tỉ lệ, dựng bằng thuộc tính CSS `aspect-ratio`.
+ *
+ * Radix dựng cái này bằng mẹo `padding-bottom` thời chưa có `aspect-ratio`: một
+ * div bọc `position: relative; width: 100%; padding-bottom: (100/ratio)%`, rồi
+ * div THẬT nằm trong nó ở `position: absolute; inset: 0`. Hai node, hai lớp
+ * định vị, chỉ để nói một câu mà CSS ngày nay nói được bằng một khai báo.
+ *
+ * Nên node bọc biến mất và `.ui-aspect-ratio` giờ LÀ hộp tỉ lệ. Kiểm trước khi
+ * đổi: không luật nào trong `src/styles/` bám vào `[data-radix-aspect-ratio-wrapper]`
+ * hay vào việc `.ui-aspect-ratio` phải là con của một node khác — luật duy nhất
+ * chạm tới nó là `.ui-aspect-ratio { overflow: clip; overflow-clip-margin }`
+ * trong `layout.css`, và nó bám vào CHÍNH node này, node vẫn còn.
+ *
+ * `position: relative` được giữ lại dù không còn cần cho mẹo padding: node bọc
+ * trước đây là containing block của mọi con `position: absolute` mà consumer
+ * đặt vào (một overlay, một badge góc). Bỏ nó đi thì những con ấy lặng lẽ nhảy
+ * ra neo vào tổ tiên định vị gần nhất ở ngoài.
+ */
+export declare const AspectRatio: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
+    asChild?: boolean;
+    ratio?: number;
+} & React.RefAttributes<HTMLDivElement>>;

package/dist/components/ui/aspect-ratio.js

@@ -1,19 +1,21 @@
-"use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as AspectRatioPrimitive from "@radix-ui/react-aspect-ratio";
+import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
-const AspectRatio = React.forwardRef(({ className, ratio = 16 / 9, ...props }, ref) => /* @__PURE__ */ jsx(
-  AspectRatioPrimitive.Root,
-  {
-    ref,
-    "data-slot": "aspect-ratio",
-    ratio,
-    className: cn("ui-aspect-ratio", className),
-    ...props
-  }
-));
-AspectRatio.displayName = AspectRatioPrimitive.Root.displayName;
+const AspectRatio = React.forwardRef(({ className, ratio = 16 / 9, style, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "aspect-ratio",
+      className: cn("ui-aspect-ratio", className),
+      style: { ...style, position: "relative", width: "100%", aspectRatio: `${ratio}` },
+      ...props
+    }
+  );
+});
+AspectRatio.displayName = "AspectRatio";
 export {
   AspectRatio
 };

package/dist/components/ui/avatar.d.ts

@@ -1,6 +1,31 @@
 import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import type { AvatarProp } from "../../props/components/data-display.prop.js";
-export declare const Avatar: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarProps & React.RefAttributes<HTMLSpanElement>, "ref"> & Pick<AvatarProp, "appearance" | "presence" | "presenceLabel" | "shape"> & React.RefAttributes<HTMLSpanElement>>;
-export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarImageProps & React.RefAttributes<HTMLImageElement>, "ref"> & React.RefAttributes<HTMLImageElement>>;
-export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<AvatarPrimitive.AvatarFallbackProps & React.RefAttributes<HTMLSpanElement>, "ref"> & React.RefAttributes<HTMLSpanElement>>;
+/**
+ * Trạng thái tải của ảnh trong avatar — chia sẻ giữa `AvatarImage` và
+ * `AvatarFallback` qua context, đúng như Radix làm.
+ *
+ * React Aria KHÔNG có avatar, nên đây là việc TỰ DỰNG. Nhưng phần cần dựng lại
+ * không phải cái vỏ `<span>` — mà là logic thật mà `@radix-ui/react-avatar` cầm:
+ * ảnh chỉ được vẽ khi đã tải XONG, fallback chỉ được vẽ khi ảnh CHƯA xong hoặc
+ * HỎNG, và `delayMs` giữ fallback im lặng đủ lâu để mạng nhanh không kịp nháy
+ * một khung initials trước khi ảnh về.
+ *
+ * Phép dò là một `new Image()` RỜI, không phải `onLoad`/`onError` trên chính
+ * thẻ được vẽ: thẻ chỉ tồn tại khi đã `loaded`, nên handler trên nó không bao
+ * giờ có cơ hội báo "đang tải" hay "hỏng". Đây cũng là lý do một `<img>` hỏng
+ * không bao giờ nằm trong DOM để trình duyệt vẽ biểu tượng ảnh vỡ lên trên
+ * fallback.
+ */
+type ImageLoadingStatus = "idle" | "loading" | "loaded" | "error";
+export declare const Avatar: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    asChild?: boolean;
+} & Pick<AvatarProp, "appearance" | "presence" | "presenceLabel" | "shape"> & React.RefAttributes<HTMLSpanElement>>;
+export declare const AvatarImage: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, "ref"> & {
+    asChild?: boolean;
+    onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+} & React.RefAttributes<HTMLImageElement>>;
+export declare const AvatarFallback: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & {
+    asChild?: boolean;
+    delayMs?: number;
+} & React.RefAttributes<HTMLSpanElement>>;
+export {};

package/dist/components/ui/avatar.js

@@ -1,9 +1,54 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffectEvent, useLayoutEffect } from "@react-aria/utils";
 import * as React from "react";
-import * as AvatarPrimitive from "@radix-ui/react-avatar";
 import { useTranslation } from "../../i18n/use-translation.js";
+import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
+const AvatarContext = React.createContext(null);
+function useAvatarContext(part) {
+  const context = React.useContext(AvatarContext);
+  if (context === null) {
+    throw new Error(`\`${part}\` must be used within \`Avatar\``);
+  }
+  return context;
+}
+function getImageLoadingStatus(image) {
+  if (!image.complete) {
+    return "loading";
+  }
+  return image.naturalWidth > 0 ? "loaded" : "error";
+}
+function useImageLoadingStatus(src, {
+  loadingStatus,
+  setLoadingStatus,
+  referrerPolicy,
+  crossOrigin
+}) {
+  useLayoutEffect(() => {
+    if (!src) {
+      setLoadingStatus("error");
+      return;
+    }
+    const image = new window.Image();
+    const handleLoad = (event) => setLoadingStatus(getImageLoadingStatus(event.currentTarget));
+    const handleError = () => setLoadingStatus("error");
+    image.addEventListener("load", handleLoad);
+    image.addEventListener("error", handleError);
+    if (referrerPolicy) {
+      image.referrerPolicy = referrerPolicy;
+    }
+    image.crossOrigin = crossOrigin ?? null;
+    image.src = src;
+    setLoadingStatus(getImageLoadingStatus(image));
+    return () => {
+      image.removeEventListener("load", handleLoad);
+      image.removeEventListener("error", handleError);
+      setLoadingStatus("idle");
+    };
+  }, [src, crossOrigin, referrerPolicy, setLoadingStatus]);
+  return loadingStatus;
+}
 const Avatar = React.forwardRef(
   ({
     className,
@@ -11,12 +56,19 @@ const Avatar = React.forwardRef(
     appearance = "default",
     presence,
     presenceLabel,
+    asChild = false,
     children,
     ...props
   }, ref) => {
     const { t } = useTranslation();
-    return /* @__PURE__ */ jsxs(
-      AvatarPrimitive.Root,
+    const [imageLoadingStatus, setImageLoadingStatus] = React.useState("idle");
+    const context = React.useMemo(
+      () => ({ imageLoadingStatus, setImageLoadingStatus }),
+      [imageLoadingStatus]
+    );
+    const Comp = asChild ? Slot : "span";
+    return /* @__PURE__ */ jsx(AvatarContext.Provider, { value: context, children: /* @__PURE__ */ jsxs(
+      Comp,
       {
         ref,
         "data-slot": "avatar",
@@ -30,30 +82,64 @@ const Avatar = React.forwardRef(
           presence !== void 0 ? /* @__PURE__ */ jsx("span", { "data-slot": "avatar-presence", "data-presence": presence, children: /* @__PURE__ */ jsx("span", { className: "sr-only", children: presenceLabel ?? t(`dataDisplay.avatar.presence.${presence}`) }) }) : null
         ]
       }
-    );
+    ) });
   }
 );
-Avatar.displayName = AvatarPrimitive.Root.displayName;
-const AvatarImage = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AvatarPrimitive.Image,
-  {
-    ref,
-    "data-slot": "avatar-image",
-    className: cn("ui-avatar-image", className),
-    ...props
-  }
-));
-AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-const AvatarFallback = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  AvatarPrimitive.Fallback,
-  {
-    ref,
-    "data-slot": "avatar-fallback",
-    className: cn("ui-avatar-fallback", className),
-    ...props
-  }
-));
-AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+Avatar.displayName = "Avatar";
+const AvatarImage = React.forwardRef(({ className, src, onLoadingStatusChange, asChild = false, ...props }, ref) => {
+  const { imageLoadingStatus, setImageLoadingStatus } = useAvatarContext("AvatarImage");
+  const status = useImageLoadingStatus(src, {
+    referrerPolicy: props.referrerPolicy,
+    crossOrigin: props.crossOrigin,
+    loadingStatus: imageLoadingStatus,
+    setLoadingStatus: setImageLoadingStatus
+  });
+  const handleLoadingStatusChange = useEffectEvent((next) => {
+    onLoadingStatusChange?.(next);
+  });
+  const previousStatus = React.useRef(status);
+  useLayoutEffect(() => {
+    const previous = previousStatus.current;
+    previousStatus.current = status;
+    if (status !== previous) {
+      handleLoadingStatusChange(status);
+    }
+  }, [status]);
+  const Comp = asChild ? Slot : "img";
+  return status === "loaded" ? /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "avatar-image",
+      className: cn("ui-avatar-image", className),
+      ...props,
+      src
+    }
+  ) : null;
+});
+AvatarImage.displayName = "AvatarImage";
+const AvatarFallback = React.forwardRef(({ className, delayMs, asChild = false, ...props }, ref) => {
+  const { imageLoadingStatus } = useAvatarContext("AvatarFallback");
+  const [canRender, setCanRender] = React.useState(delayMs === void 0);
+  React.useEffect(() => {
+    if (delayMs === void 0) {
+      return;
+    }
+    const timerId = window.setTimeout(() => setCanRender(true), delayMs);
+    return () => window.clearTimeout(timerId);
+  }, [delayMs]);
+  const Comp = asChild ? Slot : "span";
+  return canRender && imageLoadingStatus !== "loaded" ? /* @__PURE__ */ jsx(
+    Comp,
+    {
+      ref,
+      "data-slot": "avatar-fallback",
+      className: cn("ui-avatar-fallback", className),
+      ...props
+    }
+  ) : null;
+});
+AvatarFallback.displayName = "AvatarFallback";
 export {
   Avatar,
   AvatarFallback,

package/dist/components/ui/hover-card.d.ts

@@ -1,9 +1,47 @@
 import * as React from "react";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
+interface HoverCardProps {
+    /** Trạng thái mở, có kiểm soát. */
+    open?: boolean;
+    /** Trạng thái mở ban đầu khi không kiểm soát. */
+    defaultOpen?: boolean;
+    /** Gọi khi trạng thái mở/đóng đổi. */
+    onOpenChange?: (open: boolean) => void;
+    /** Thời gian rê chuột trước khi mở, tính bằng ms. */
+    openDelay?: number;
+    /** Thời gian sau khi con trỏ rời đi trước khi đóng, tính bằng ms. */
+    closeDelay?: number;
+}
 /**
  * HoverCard root. Defaults to a SNAPPY 200ms open / 100ms close (Radix's raw 700/300 default felt
  * laggy); consumers can still pass `openDelay`/`closeDelay`.
  */
-export declare function HoverCard({ openDelay, closeDelay, ...props }: React.ComponentProps<typeof HoverCardPrimitive.Root>): React.JSX.Element;
-export declare const HoverCardTrigger: React.ForwardRefExoticComponent<HoverCardPrimitive.HoverCardTriggerProps & React.RefAttributes<HTMLAnchorElement>>;
-export declare const HoverCardContent: React.ForwardRefExoticComponent<Omit<HoverCardPrimitive.HoverCardContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export declare function HoverCard({ open, defaultOpen, onOpenChange, openDelay, closeDelay, children, }: React.PropsWithChildren<HoverCardProps>): React.JSX.Element;
+interface HoverCardTriggerProps extends React.ComponentPropsWithRef<"a"> {
+    /** Mượn thẻ của con thay vì dựng `<a>` riêng. */
+    asChild?: boolean;
+}
+export declare function HoverCardTrigger({ asChild, onPointerEnter, onPointerLeave, onFocus, onBlur, ref, ...props }: HoverCardTriggerProps): React.JSX.Element;
+interface HoverCardContentProps extends React.ComponentPropsWithRef<"div"> {
+    /** Cạnh của trigger mà tấm thẻ bám vào. */
+    side?: Side;
+    /** Canh tấm thẻ theo cạnh của trigger. */
+    align?: Align;
+    /** Khoảng cách theo trục chính, tính bằng px. */
+    sideOffset?: number;
+    /** Khoảng cách theo trục phụ, tính bằng px. */
+    alignOffset?: number;
+    /** Lật tấm thẻ sang cạnh đối diện khi hết chỗ. */
+    avoidCollisions?: boolean;
+    /** Khoảng chừa với mép khung nhìn. RAC chỉ nhận một số; object lấy cạnh lớn nhất. */
+    collisionPadding?: number | Partial<Record<Side, number>>;
+    /** Không còn tác dụng trên nền RAC — giữ trong kiểu vì là API công khai. */
+    sticky?: "partial" | "always";
+    /** Không còn tác dụng trên nền RAC — giữ trong kiểu vì là API công khai. */
+    hideWhenDetached?: boolean;
+    /** Không còn tác dụng trên nền RAC — giữ trong kiểu vì là API công khai. */
+    forceMount?: true;
+}
+export declare function HoverCardContent({ className, style, children, ref, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, onPointerEnter, onPointerLeave, ...props }: HoverCardContentProps): React.JSX.Element;
+export {};