@godxjp/ui 19.5.0 → 20.0.0

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 {};

package/dist/components/ui/hover-card.js

@@ -1,44 +1,200 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
+import { chain, mergeRefs } from "@react-aria/utils";
+import { Popover as AriaPopover } from "react-aria-components";
 import { cn } from "../../lib/utils.js";
+import { Slot } from "../../lib/slot.js";
+function toPlacement(side, align) {
+  if (align === "center") return side;
+  if (side === "top" || side === "bottom") return `${side} ${align}`;
+  return `${side} ${align === "start" ? "top" : "bottom"}`;
+}
+function toContainerPadding(padding) {
+  if (padding == null) return void 0;
+  if (typeof padding === "number") return padding;
+  const sides = Object.values(padding).filter(
+    (value) => typeof value === "number"
+  );
+  return sides.length ? Math.max(...sides) : void 0;
+}
+const HoverCardContext = React.createContext(null);
+function useHoverCard(component) {
+  const context = React.useContext(HoverCardContext);
+  if (!context) {
+    throw new Error(`\`${component}\` ph\u1EA3i n\u1EB1m trong \`HoverCard\`.`);
+  }
+  return context;
+}
 function HoverCard({
+  open,
+  defaultOpen,
+  onOpenChange,
   openDelay = 200,
   closeDelay = 100,
+  children
+}) {
+  const [uncontrolledOpen, setUncontrolledOpen] = React.useState(defaultOpen ?? false);
+  const triggerRef = React.useRef(null);
+  const openTimer = React.useRef(null);
+  const closeTimer = React.useRef(null);
+  const isOpen = open ?? uncontrolledOpen;
+  const setOpenImmediately = React.useCallback(
+    (next) => {
+      if (open === void 0) {
+        setUncontrolledOpen(next);
+      }
+      onOpenChange?.(next);
+    },
+    [open, onOpenChange]
+  );
+  const value = React.useMemo(() => {
+    const clearOpen = () => {
+      if (openTimer.current) clearTimeout(openTimer.current);
+      openTimer.current = null;
+    };
+    const clearClose = () => {
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    };
+    return {
+      open: isOpen,
+      triggerRef,
+      setOpenImmediately: (next) => {
+        clearOpen();
+        clearClose();
+        setOpenImmediately(next);
+      },
+      scheduleOpen: () => {
+        clearClose();
+        if (openTimer.current) return;
+        openTimer.current = setTimeout(() => {
+          openTimer.current = null;
+          setOpenImmediately(true);
+        }, openDelay);
+      },
+      scheduleClose: () => {
+        clearOpen();
+        if (closeTimer.current) return;
+        closeTimer.current = setTimeout(() => {
+          closeTimer.current = null;
+          setOpenImmediately(false);
+        }, closeDelay);
+      },
+      cancelClose: clearClose
+    };
+  }, [isOpen, setOpenImmediately, openDelay, closeDelay]);
+  React.useEffect(
+    () => () => {
+      if (openTimer.current) clearTimeout(openTimer.current);
+      if (closeTimer.current) clearTimeout(closeTimer.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsx(HoverCardContext.Provider, { value, children });
+}
+function HoverCardTrigger({
+  asChild,
+  onPointerEnter,
+  onPointerLeave,
+  onFocus,
+  onBlur,
+  ref,
   ...props
 }) {
+  const card = useHoverCard("HoverCardTrigger");
+  const Comp = asChild ? Slot : "a";
   return /* @__PURE__ */ jsx(
-    HoverCardPrimitive.Root,
+    Comp,
     {
-      "data-slot": "hover-card",
-      openDelay,
-      closeDelay,
-      ...props
+      "data-state": card.open ? "open" : "closed",
+      ...props,
+      ref: mergeRefs(ref, card.triggerRef),
+      onPointerEnter: chain(onPointerEnter, (event) => {
+        if (event.pointerType === "touch") return;
+        card.scheduleOpen();
+      }),
+      onPointerLeave: chain(onPointerLeave, (event) => {
+        if (event.pointerType === "touch") return;
+        card.scheduleClose();
+      }),
+      onFocus: chain(onFocus, () => card.setOpenImmediately(true)),
+      onBlur: chain(onBlur, () => card.setOpenImmediately(false))
+    }
+  );
+}
+function HoverCardContent({
+  className,
+  style,
+  children,
+  ref,
+  side = "bottom",
+  align = "center",
+  sideOffset = 4,
+  alignOffset,
+  avoidCollisions = true,
+  collisionPadding,
+  sticky: _sticky,
+  hideWhenDetached: _hideWhenDetached,
+  forceMount: _forceMount,
+  onPointerEnter,
+  onPointerLeave,
+  ...props
+}) {
+  const card = useHoverCard("HoverCardContent");
+  return /* @__PURE__ */ jsx(
+    AriaPopover,
+    {
+      isOpen: card.open,
+      onOpenChange: card.setOpenImmediately,
+      isNonModal: true,
+      triggerRef: card.triggerRef,
+      placement: toPlacement(side, align),
+      offset: sideOffset,
+      crossOffset: alignOffset,
+      shouldFlip: avoidCollisions,
+      containerPadding: toContainerPadding(collisionPadding),
+      render: (racProps, { isExiting }) => {
+        const {
+          className: _racClassName,
+          "data-rac": _rac,
+          ref: racRef,
+          style: racStyle,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...rest,
+            "data-slot": "hover-card-content",
+            "data-side": side,
+            "data-align": align,
+            "data-state": isExiting ? "closed" : "open",
+            ...props,
+            ref: mergeRefs(ref, racRef),
+            onPointerEnter: chain(onPointerEnter, () => card.cancelClose()),
+            onPointerLeave: chain(onPointerLeave, () => card.scheduleClose()),
+            className: cn(
+              // Match Popover/Tooltip: a directional fade+zoom+slide entrance so it doesn't pop abruptly.
+              "ui-hover-card-content origin-[var(--radix-hover-card-content-transform-origin)]",
+              "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+              "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
+              "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
+              "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
+              className
+            ),
+            style: {
+              ...racStyle,
+              "--radix-hover-card-content-transform-origin": "var(--trigger-anchor-point)",
+              ...style
+            },
+            children
+          }
+        );
+      }
     }
   );
 }
-const HoverCardTrigger = HoverCardPrimitive.Trigger;
-const HoverCardContent = React.forwardRef(({ className, align = "center", sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(HoverCardPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  HoverCardPrimitive.Content,
-  {
-    ref,
-    "data-slot": "hover-card-content",
-    align,
-    sideOffset,
-    className: cn(
-      // Match Popover/Tooltip: a directional fade+zoom+slide entrance so it doesn't pop abruptly.
-      "ui-hover-card-content origin-[var(--radix-hover-card-content-transform-origin)]",
-      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
-      "data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95",
-      "data-[side=bottom]:slide-in-from-top-2 data-[side=top]:slide-in-from-bottom-2",
-      "data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2",
-      className
-    ),
-    ...props
-  }
-) }));
-HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 export {
   HoverCard,
   HoverCardContent,

package/dist/components/ui/label.js

@@ -1,2 +1 @@
-"use client";
 export * from "../data-entry/label.js";

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

@@ -30,8 +30,8 @@ export type SegmentedProp = {
 };
 export type SegmentedProps = SegmentedProp;
 /**
- * Segmented — one-of-N from a small, closed, always-visible set. antd's `Segmented`
- * (docs/DESIGN-AUTHORITY.md names Ant Design the taxonomy authority) drawn on Radix's RadioGroup,
+ * Segmented — one-of-N from a small, closed, always-visible set. The established enterprise
+ * `Segmented` control (docs/DESIGN-AUTHORITY.md) drawn on Radix's RadioGroup,
  * which is this repo's authority for behaviour primitives.
  *
  * WHY NOT `ToggleGroup`. A ToggleGroup is a row of PRESSED buttons: `aria-pressed`, independently
@@ -42,7 +42,7 @@ export type SegmentedProps = SegmentedProp;
  * distinction and it is not a skin.
  *
  * The primitive gives roving tabindex, arrow-key traversal (RTL-aware), the radiogroup/radio roles
- * and the hidden input a native form submit needs. This file adds the antd geometry and nothing
+ * and the hidden input a native form submit needs. This file adds that geometry and nothing
  * else — the focus mark comes from `ui-focus-ring`, the ONE source in styles/focus-ring.css.
  */
 export declare const Segmented: React.ForwardRefExoticComponent<SegmentedProp & React.RefAttributes<HTMLDivElement>>;

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

@@ -2,8 +2,14 @@ import * as React from "react";
 export type { SeparatorProp, SeparatorProp as SeparatorProps, } from "../../props/components/layout.prop.js";
 /**
  * ACCESSIBILITY — the whole point of the labelled form is that the label is ANNOUNCED, exactly
- * ONCE. Without a label the rule stays `decorative` (Radix emits `role="none"`), which is right: a
- * section rule carries no information.
+ * ONCE. Without a label the rule stays `decorative` (`role="none"`), which is right: a section
+ * rule carries no information.
+ *
+ * SUBSTRATE — React Aria Components. Its `Separator` has no `decorative` prop: `useSeparator`
+ * emits `role="separator"` unconditionally (and `aria-orientation="vertical"` on the vertical
+ * rule), and it drops `children` entirely. Both are handled in the `render` override below, which
+ * is RAC's supported escape hatch for owning the element: it hands us the computed DOM props and
+ * the ref, and we decide what element carries them.
  */
 export declare const Separator: React.ForwardRefExoticComponent<Omit<React.HTMLAttributes<HTMLDivElement>, "children"> & {
     orientation?: import("../../props/index.js").OrientationProp;

package/dist/components/ui/separator.js

@@ -1,7 +1,6 @@
-"use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as SeparatorPrimitive from "@radix-ui/react-separator";
+import { Separator as AriaSeparator } from "react-aria-components";
 import { cn } from "../../lib/utils.js";
 const Separator = React.forwardRef(
   ({
@@ -24,24 +23,33 @@ const Separator = React.forwardRef(
     }
     const isDecorative = decorative ?? !labelled;
     return /* @__PURE__ */ jsx(
-      SeparatorPrimitive.Root,
+      AriaSeparator,
       {
         ref,
+        elementType: "div",
         "data-slot": "separator",
         "data-orientation": orientation,
         "data-tone": tone,
         "data-labelled": labelled ? "" : void 0,
         "data-label-align": labelled ? labelAlign : void 0,
         orientation,
-        decorative: isDecorative,
         "aria-label": labelled && !isDecorative ? label : void 0,
         className: cn("ui-separator", className),
         ...props,
-        children: labelled ? /* @__PURE__ */ jsxs(Fragment, { children: [
-          /* @__PURE__ */ jsx("span", { className: "ui-separator-rule", "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx("span", { className: "ui-separator-label", "aria-hidden": isDecorative ? void 0 : true, children: label }),
-          /* @__PURE__ */ jsx("span", { className: "ui-separator-rule", "aria-hidden": "true" })
-        ] }) : null
+        render: ({ role, "aria-orientation": ariaOrientation, ...domProps }) => /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: isDecorative ? "none" : role,
+            "aria-orientation": isDecorative ? void 0 : ariaOrientation,
+            ...props,
+            ...domProps,
+            children: labelled ? /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsx("span", { className: "ui-separator-rule", "aria-hidden": "true" }),
+              /* @__PURE__ */ jsx("span", { className: "ui-separator-label", "aria-hidden": isDecorative ? void 0 : true, children: label }),
+              /* @__PURE__ */ jsx("span", { className: "ui-separator-rule", "aria-hidden": "true" })
+            ] }) : null
+          }
+        )
       }
     );
   }