@godxjp/ui 19.5.0 → 20.0.0

package/dist/components/feedback/sheet.d.ts

@@ -1,5 +1,4 @@
 import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { type VariantProps } from "class-variance-authority";
 import type { SheetResponsiveProp } from "../../props/components/feedback.prop.js";
 import type { ToneProp, WidthProp } from "../../props/vocabulary/index.js";
@@ -12,18 +11,58 @@ export type SheetPresentation = "side" | "bottom";
  * viewport is at or below `--sheet-responsive-breakpoint-width`.
  */
 export declare function useSheetResponsiveMode(responsive?: SheetResponsiveProp): SheetPresentation;
-export declare function Sheet(props: React.ComponentProps<typeof DialogPrimitive.Root>): React.JSX.Element;
-export declare function SheetTrigger(props: React.ComponentProps<typeof DialogPrimitive.Trigger>): React.JSX.Element;
-export declare function SheetClose(props: React.ComponentProps<typeof DialogPrimitive.Close>): React.JSX.Element;
-export declare function SheetPortal(props: React.ComponentProps<typeof DialogPrimitive.Portal>): React.JSX.Element;
-export declare const SheetOverlay: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogOverlayProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+export interface SheetProps {
+    /** 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ở đổi. */
+    onOpenChange?: (open: boolean) => void;
+    /**
+     * Giữ tên prop của Radix. RAC không có kiểu overlay không-modal: `Modal` LUÔN khoá cuộn và ẩn
+     * nền khỏi trình đọc màn hình, nên `modal={false}` không còn tắt được điều đó.
+     */
+    modal?: boolean;
+    children?: React.ReactNode;
+}
+export declare function Sheet({ open, defaultOpen, onOpenChange, modal: _modal, children }: SheetProps): React.JSX.Element;
+export interface SheetTriggerProps extends React.ComponentPropsWithRef<"button"> {
+    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
+    asChild?: boolean;
+}
+export declare function SheetTrigger({ asChild, onClick, ...props }: SheetTriggerProps): React.JSX.Element;
+export interface SheetCloseProps extends React.ComponentPropsWithRef<"button"> {
+    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
+    asChild?: boolean;
+}
+export declare function SheetClose({ asChild, onClick, ...props }: SheetCloseProps): React.JSX.Element;
+export interface SheetPortalProps {
+    /** Giữ tên prop của Radix; RAC tự portal ra `document.body` từ `ModalOverlay`. */
+    forceMount?: true;
+    children?: React.ReactNode;
+}
+export declare function SheetPortal({ children }: SheetPortalProps): React.JSX.Element;
+export interface SheetOverlayProps extends React.ComponentPropsWithRef<"div"> {
+    /** Giữ tên prop của Radix. */
+    forceMount?: true;
+}
+/**
+ * Không dựng gì — xem đầu tệp. Màn nền là `ModalOverlay` bên trong `SheetContent`, và nó vẫn mang
+ * `data-slot="sheet-overlay"` + `.ui-sheet-overlay` như trước.
+ */
+export declare function SheetOverlay(_props: SheetOverlayProps): null;
+export declare namespace SheetOverlay {
+    var displayName: string;
+}
 declare const sheetVariants: (props?: ({
     side?: "bottom" | "left" | "right" | "top" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
-export interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>, VariantProps<typeof sheetVariants> {
+export interface SheetContentProps extends React.ComponentPropsWithRef<"section">, VariantProps<typeof sheetVariants> {
     showCloseButton?: boolean;
     /** Optional semantic class for the owned backdrop (for a shell-specific overlay token). */
     overlayClassName?: string;
+    /** Giữ tên prop của Radix; RAC tự portal ra `document.body` từ `ModalOverlay`. */
+    forceMount?: true;
     /**
      * Desired panel size for side left/right (Ant Drawer `width`). Omit to keep the canonical drawer
      * default from `--sheet-width-default`.
@@ -35,9 +74,12 @@ export interface SheetContentProps extends React.ComponentPropsWithoutRef<typeof
      */
     responsive?: SheetResponsiveProp;
 }
-export declare const SheetContent: React.ForwardRefExoticComponent<SheetContentProps & React.RefAttributes<HTMLDivElement>>;
+export declare function SheetContent({ side, className, children, showCloseButton, overlayClassName, forceMount: _forceMount, width, responsive, style, ref, ...props }: SheetContentProps): React.JSX.Element;
+export declare namespace SheetContent {
+    var displayName: string;
+}
 export interface SheetHeaderProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
-    /** Header title (Ant Drawer-style). Rendered as the Radix-bound SheetTitle (accessible name). */
+    /** Header title (Ant Drawer-style). Rendered as the bound SheetTitle (accessible name). */
     title?: React.ReactNode;
     /** Secondary line under the title (rendered as SheetDescription). */
     subtitle?: React.ReactNode;
@@ -49,5 +91,5 @@ export interface SheetHeaderProps extends Omit<React.HTMLAttributes<HTMLDivEleme
 export declare const SheetHeader: ({ className, title, subtitle, extra, tone, children, ...props }: SheetHeaderProps) => React.JSX.Element;
 export declare const SheetBody: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
 export declare const SheetFooter: ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => React.JSX.Element;
-export declare const SheetTitle: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogTitleProps & React.RefAttributes<HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
-export declare const SheetDescription: React.ForwardRefExoticComponent<Omit<DialogPrimitive.DialogDescriptionProps & React.RefAttributes<HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;
+export declare const SheetTitle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, "ref"> & React.RefAttributes<HTMLHeadingElement>>;
+export declare const SheetDescription: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, "ref"> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/feedback/sheet.js

@@ -1,12 +1,15 @@
 "use client";
-import { jsx, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { chain, mergeRefs } from "@react-aria/utils";
+import { Dialog as RacDialog, Modal, ModalOverlay } from "react-aria-components";
 import { cva } from "class-variance-authority";
 import { X } from "lucide-react";
 import { useMediaQuery } from "../../lib/hooks.js";
 import { cn } from "../../lib/utils.js";
+import { Slot } from "../../lib/slot.js";
 import { overlayHeaderToneClass } from "./overlay-header-tone.js";
+import { useOverlayCloseFocus } from "./overlay-close-focus.js";
 import { useTranslation } from "../../i18n/use-translation.js";
 const toCssLength = (v) => typeof v === "number" ? `${v}px` : v;
 const SHEET_BREAKPOINT_TOKEN = "--sheet-responsive-breakpoint-width";
@@ -36,33 +39,74 @@ function useSheetResponsiveMode(responsive = "side") {
   if (responsive === "side" || responsive === "bottom") return responsive;
   return compact ? "bottom" : "side";
 }
-function Sheet(props) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Root, { "data-slot": "sheet", ...props });
+const SheetOpenContext = React.createContext(null);
+function useSheetOpenState(component) {
+  const state = React.useContext(SheetOpenContext);
+  if (!state) {
+    throw new Error(`\`${component}\` ph\u1EA3i n\u1EB1m trong \`Sheet\`.`);
+  }
+  return state;
+}
+const SheetLabelContext = React.createContext(null);
+function Sheet({ open, defaultOpen, onOpenChange, modal: _modal, children }) {
+  const [uncontrolled, setUncontrolled] = React.useState(defaultOpen ?? false);
+  const isOpen = open ?? uncontrolled;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (next === isOpen) {
+        return;
+      }
+      if (open === void 0) {
+        setUncontrolled(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isOpen, open, onOpenChange]
+  );
+  const state = React.useMemo(() => ({ isOpen, setOpen }), [isOpen, setOpen]);
+  return /* @__PURE__ */ jsx(SheetOpenContext.Provider, { value: state, children });
+}
+function SheetTrigger({ asChild, onClick, ...props }) {
+  const state = useSheetOpenState("SheetTrigger");
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: "button",
+      "data-slot": "sheet-trigger",
+      "aria-haspopup": "dialog",
+      "aria-expanded": state.isOpen,
+      "data-state": state.isOpen ? "open" : "closed",
+      ...props,
+      onClick: chain(onClick, () => {
+        state.setOpen(!state.isOpen);
+      })
+    }
+  );
 }
-function SheetTrigger(props) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
+function SheetClose({ asChild, onClick, ...props }) {
+  const state = useSheetOpenState("SheetClose");
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    Comp,
+    {
+      type: "button",
+      "data-slot": "sheet-close",
+      ...props,
+      onClick: chain(onClick, () => {
+        state.setOpen(false);
+      })
+    }
+  );
 }
-function SheetClose(props) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Close, { "data-slot": "sheet-close", ...props });
+function SheetPortal({ children }) {
+  return /* @__PURE__ */ jsx(Fragment, { children });
 }
-function SheetPortal(props) {
-  return /* @__PURE__ */ jsx(DialogPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
+function SheetOverlay(_props) {
+  return null;
 }
-const SheetOverlay = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Overlay,
-  {
-    ref,
-    "data-slot": "sheet-overlay",
-    className: cn(
-      // Scrim colour comes from the shared --overlay-background token (see dialog-layout.css),
-      // so a service tints every overlay's backdrop from one knob instead of a baked bg-black/50.
-      "ui-sheet-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed",
-      className
-    ),
-    ...props
-  }
-));
-SheetOverlay.displayName = DialogPrimitive.Overlay.displayName;
+SheetOverlay.displayName = "SheetOverlay";
+const SHEET_OVERLAY_CLASS = "ui-sheet-overlay data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0 fixed";
 const sheetVariants = cva(
   "ui-sheet-panel fixed flex flex-col gap-[var(--space-chrome-gap)] bg-background px-[var(--sheet-pad-x)] py-[var(--sheet-pad-y)] transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500",
   {
@@ -82,35 +126,50 @@ const sheetVariants = cva(
     defaultVariants: { side: "right" }
   }
 );
-const SheetContent = React.forwardRef(
-  ({
-    side = "right",
-    className,
-    children,
-    showCloseButton = true,
-    overlayClassName,
-    width,
-    responsive = "side",
-    style,
-    ...props
-  }, ref) => {
-    const { t } = useTranslation();
-    const presentation = useSheetResponsiveMode(responsive);
-    const resolvedSide = presentation === "bottom" ? "bottom" : side;
-    const bottomSheet = responsive !== "side" && presentation === "bottom";
-    const horizontal = resolvedSide === "left" || resolvedSide === "right";
-    const widthSet = width != null && horizontal;
-    const mergedStyle = widthSet ? { ...style, ["--sheet-width"]: toCssLength(width) } : style;
-    return /* @__PURE__ */ jsxs(SheetPortal, { children: [
-      /* @__PURE__ */ jsx(SheetOverlay, { className: overlayClassName }),
-      /* @__PURE__ */ jsxs(
-        DialogPrimitive.Content,
+function SheetContent({
+  side = "right",
+  className,
+  children,
+  showCloseButton = true,
+  overlayClassName,
+  forceMount: _forceMount,
+  width,
+  responsive = "side",
+  style,
+  ref,
+  ...props
+}) {
+  const { t } = useTranslation();
+  const state = useSheetOpenState("SheetContent");
+  const presentation = useSheetResponsiveMode(responsive);
+  const titleId = React.useId();
+  const descriptionId = React.useId();
+  const labels = React.useMemo(() => ({ titleId, descriptionId }), [titleId, descriptionId]);
+  const resolvedSide = presentation === "bottom" ? "bottom" : side;
+  const bottomSheet = responsive !== "side" && presentation === "bottom";
+  const horizontal = resolvedSide === "left" || resolvedSide === "right";
+  const widthSet = width != null && horizontal;
+  const mergedStyle = widthSet ? { ...style, ["--sheet-width"]: toCssLength(width) } : style;
+  const dataState = state.isOpen ? "open" : "closed";
+  useOverlayCloseFocus(state.isOpen);
+  return /* @__PURE__ */ jsx(
+    ModalOverlay,
+    {
+      isOpen: state.isOpen,
+      onOpenChange: state.setOpen,
+      isDismissable: true,
+      "data-slot": "sheet-overlay",
+      "data-state": dataState,
+      className: cn(SHEET_OVERLAY_CLASS, overlayClassName),
+      children: /* @__PURE__ */ jsx(Modal, { className: "contents", children: /* @__PURE__ */ jsx(
+        RacDialog,
         {
-          ref,
+          "aria-labelledby": props["aria-labelledby"] ?? titleId,
+          "aria-describedby": props["aria-describedby"] ?? descriptionId,
           "data-slot": "sheet-content",
+          "data-state": dataState,
           "data-responsive": responsive,
           "data-side": resolvedSide,
-          style: mergedStyle,
           className: cn(
             sheetVariants({ side: resolvedSide }),
             // `width` caps at the viewport: full-width panel on a small screen, capped on a large one.
@@ -120,13 +179,15 @@ const SheetContent = React.forwardRef(
             bottomSheet && "max-h-[var(--sheet-bottom-max-height)]",
             className
           ),
-          ...props,
-          children: [
+          render: (racProps) => {
+            const { "data-rac": _rac, ref: racRef, ...rest } = racProps;
+            return /* @__PURE__ */ jsx("section", { ...rest, ...props, style: mergedStyle, ref: mergeRefs(ref, racRef) });
+          },
+          children: /* @__PURE__ */ jsxs(SheetLabelContext.Provider, { value: labels, children: [
             children,
             showCloseButton ? /* @__PURE__ */ jsxs(
-              DialogPrimitive.Close,
+              SheetClose,
               {
-                "data-slot": "sheet-close",
                 className: "ui-sheet-close ui-focus-ring disabled:pointer-events-none",
                 children: [
                   /* @__PURE__ */ jsx(X, { className: "ui-sheet-close-icon", "aria-hidden": "true" }),
@@ -134,13 +195,13 @@ const SheetContent = React.forwardRef(
                 ]
               }
             ) : null
-          ]
+          ] })
         }
-      )
-    ] });
-  }
-);
-SheetContent.displayName = DialogPrimitive.Content.displayName;
+      ) })
+    }
+  );
+}
+SheetContent.displayName = "SheetContent";
 const SheetHeader = ({
   className,
   title,
@@ -191,7 +252,7 @@ const SheetBody = ({ className, ...props }) => (
   )
 );
 const SheetFooter = ({ className, ...props }) => (
-  // Pinned action bar (Ant Design Drawer footer): sticks to the bottom, full-bleed top border, actions
+  // Pinned action bar (the Drawer footer convention): sticks to the bottom, full-bleed top border, actions
   // RIGHT-aligned (primary rightmost). A destructive / clear / reset action goes far-LEFT — give it
   // `className="me-auto"`. See cardinal rule "Drawer & dialog footer layout".
   // Owns its full vertical padding (symmetric 16/16) via `py-4`; `-mb-6` cancels SheetContent's
@@ -208,26 +269,34 @@ const SheetFooter = ({ className, ...props }) => (
     }
   )
 );
-const SheetTitle = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Title,
-  {
-    ref,
-    "data-slot": "sheet-title",
-    className: cn("ui-sheet-title", className),
-    ...props
-  }
-));
-SheetTitle.displayName = DialogPrimitive.Title.displayName;
-const SheetDescription = React.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
-  DialogPrimitive.Description,
-  {
-    ref,
-    "data-slot": "sheet-description",
-    className: cn("ui-sheet-description", className),
-    ...props
-  }
-));
-SheetDescription.displayName = DialogPrimitive.Description.displayName;
+const SheetTitle = React.forwardRef(({ className, ...props }, ref) => {
+  const labels = React.useContext(SheetLabelContext);
+  return /* @__PURE__ */ jsx(
+    "h2",
+    {
+      ref,
+      id: labels?.titleId,
+      "data-slot": "sheet-title",
+      className: cn("ui-sheet-title", className),
+      ...props
+    }
+  );
+});
+SheetTitle.displayName = "SheetTitle";
+const SheetDescription = React.forwardRef(({ className, ...props }, ref) => {
+  const labels = React.useContext(SheetLabelContext);
+  return /* @__PURE__ */ jsx(
+    "p",
+    {
+      ref,
+      id: labels?.descriptionId,
+      "data-slot": "sheet-description",
+      className: cn("ui-sheet-description", className),
+      ...props
+    }
+  );
+});
+SheetDescription.displayName = "SheetDescription";
 export {
   Sheet,
   SheetBody,

package/dist/components/feedback/tooltip.d.ts

@@ -1,10 +1,54 @@
 import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+type Side = "top" | "right" | "bottom" | "left";
+type Align = "start" | "center" | "end";
+interface TooltipProviderProps {
+    /** Delay mở dùng chung cho mọi `Tooltip` bên trong, tính bằng ms. */
+    delayDuration?: number;
+    /** Không còn tác dụng trên nền RAC — cửa sổ warm-up là biến toàn cục, cứng ở 500ms. */
+    skipDelayDuration?: number;
+    /** Không còn tác dụng trên nền RAC — tooltip của React Aria luôn giữ mở khi rê lên nội dung. */
+    disableHoverableContent?: boolean;
+}
 /** Opt-in provider for tuning delay across a subtree. Each <Tooltip> already self-provides. */
-export declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
-/** Self-contained tooltip — no app-level provider needed. Controllable via `open`/`onOpenChange`. */
-export declare function Tooltip({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Root> & {
+export declare function TooltipProvider({ delayDuration, skipDelayDuration: _skipDelayDuration, disableHoverableContent: _disableHoverableContent, children, }: React.PropsWithChildren<TooltipProviderProps>): React.JSX.Element;
+interface TooltipProps {
+    /** 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;
+    /** Delay mở riêng cho tooltip này; thắng giá trị của `TooltipProvider`. */
     delayDuration?: number;
-}): React.JSX.Element;
-export declare const TooltipTrigger: React.ForwardRefExoticComponent<TooltipPrimitive.TooltipTriggerProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const TooltipContent: React.ForwardRefExoticComponent<Omit<TooltipPrimitive.TooltipContentProps & React.RefAttributes<HTMLDivElement>, "ref"> & React.RefAttributes<HTMLDivElement>>;
+    /** Không còn tác dụng trên nền RAC — tooltip của React Aria luôn giữ mở khi rê lên nội dung. */
+    disableHoverableContent?: boolean;
+}
+/** Self-contained tooltip — no app-level provider needed. Controllable via `open`/`onOpenChange`. */
+export declare function Tooltip({ open, defaultOpen, onOpenChange, delayDuration, disableHoverableContent: _disableHoverableContent, children, }: React.PropsWithChildren<TooltipProps>): React.JSX.Element;
+interface TooltipTriggerProps extends React.ComponentPropsWithRef<"button"> {
+    /** Mượn thẻ của con thay vì dựng `<button>` riêng. */
+    asChild?: boolean;
+}
+export declare function TooltipTrigger({ asChild, children, ...props }: TooltipTriggerProps): React.JSX.Element;
+interface TooltipContentProps extends React.ComponentPropsWithRef<"div"> {
+    /** Cạnh của trigger mà tooltip bám vào. */
+    side?: Side;
+    /** Canh tooltip 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 tooltip 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 TooltipContent({ className, style, children, ref, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, sticky: _sticky, hideWhenDetached: _hideWhenDetached, forceMount: _forceMount, ...props }: TooltipContentProps): React.JSX.Element;
+export {};

package/dist/components/feedback/tooltip.js

@@ -1,39 +1,121 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import * as React from "react";
-import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { mergeRefs } from "@react-aria/utils";
+import {
+  Focusable,
+  Tooltip as AriaTooltip,
+  TooltipTrigger as AriaTooltipTrigger,
+  TooltipTriggerStateContext
+} from "react-aria-components";
 import { cn } from "../../lib/utils.js";
+import { Slot } from "../../lib/slot.js";
+const DEFAULT_DELAY_DURATION = 200;
+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 TooltipDelayContext = React.createContext(void 0);
 function TooltipProvider({
-  delayDuration = 200,
-  ...props
+  delayDuration = DEFAULT_DELAY_DURATION,
+  skipDelayDuration: _skipDelayDuration,
+  disableHoverableContent: _disableHoverableContent,
+  children
 }) {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, ...props });
+  return /* @__PURE__ */ jsx(TooltipDelayContext.Provider, { value: delayDuration, children });
 }
 function Tooltip({
-  delayDuration = 200,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration,
+  disableHoverableContent: _disableHoverableContent,
+  children
+}) {
+  const providedDelay = React.useContext(TooltipDelayContext);
+  return /* @__PURE__ */ jsx(
+    AriaTooltipTrigger,
+    {
+      delay: delayDuration ?? providedDelay ?? DEFAULT_DELAY_DURATION,
+      isOpen: open,
+      defaultOpen,
+      onOpenChange,
+      children
+    }
+  );
+}
+function TooltipTrigger({ asChild, children, ...props }) {
+  const state = React.useContext(TooltipTriggerStateContext);
+  const Comp = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(Focusable, { children: /* @__PURE__ */ jsx(Comp, { type: "button", "data-state": state?.isOpen ? "delayed-open" : "closed", ...props, children }) });
+}
+function TooltipContent({
+  className,
+  style,
+  children,
+  ref,
+  side = "top",
+  align = "center",
+  sideOffset = 6,
+  alignOffset,
+  avoidCollisions = true,
+  collisionPadding,
+  sticky: _sticky,
+  hideWhenDetached: _hideWhenDetached,
+  forceMount: _forceMount,
   ...props
 }) {
-  return /* @__PURE__ */ jsx(TooltipPrimitive.Provider, { delayDuration, children: /* @__PURE__ */ jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) });
+  return /* @__PURE__ */ jsx(
+    AriaTooltip,
+    {
+      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,
+          children: _racChildren,
+          ...rest
+        } = racProps;
+        return /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...rest,
+            "data-slot": "tooltip-content",
+            "data-side": side,
+            "data-align": align,
+            "data-state": isExiting ? "closed" : "delayed-open",
+            ...props,
+            ref: mergeRefs(ref, racRef),
+            className: cn(
+              "ui-tooltip-content",
+              "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0",
+              "data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1",
+              "data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1",
+              className
+            ),
+            style: { ...racStyle, ...style },
+            children
+          }
+        );
+      }
+    }
+  );
 }
-const TooltipTrigger = TooltipPrimitive.Trigger;
-const TooltipContent = React.forwardRef(({ className, sideOffset = 6, children, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
-  TooltipPrimitive.Content,
-  {
-    ref,
-    "data-slot": "tooltip-content",
-    sideOffset,
-    className: cn(
-      "ui-tooltip-content",
-      "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0",
-      "data-[side=bottom]:slide-in-from-top-1 data-[side=top]:slide-in-from-bottom-1",
-      "data-[side=left]:slide-in-from-right-1 data-[side=right]:slide-in-from-left-1",
-      className
-    ),
-    ...props,
-    children
-  }
-) }));
-TooltipContent.displayName = TooltipPrimitive.Content.displayName;
 export {
   Tooltip,
   TooltipContent,

package/dist/components/general/button.js

@@ -1,7 +1,7 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { Slot } from "@radix-ui/react-slot";
+import { Slot } from "../../lib/slot.js";
 import { cva } from "class-variance-authority";
 import { Loader2 } from "lucide-react";
 import { cn } from "../../lib/utils.js";
@@ -12,7 +12,7 @@ const buttonVariants = cva("ui-button", {
       // Colour is the TOKEN LAYER's (`.ui-button--default` in styles/control.css), not a utility's.
       // The three utilities that used to sit here — `bg-primary text-primary-foreground
       // hover:bg-primary/90` — restated the fill the components layer already declares and, being
-      // utilities, out-ranked it: the hover step this library generates from antd's algorithm
+      // utilities, out-ranked it: the hover step this library takes from the derived tier
       // (`--primary-hover`) could never take effect while `hover:bg-primary/90` was emitted here.
       default: "ui-button--default",
       destructive: "ui-button--destructive bg-destructive text-destructive-foreground",

package/dist/components/general/logo.d.ts

@@ -45,6 +45,23 @@ export interface LogoProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, "
      * readable wordmark sits beside it.
      */
     label?: string;
+    /**
+     * Mượn thẻ của con làm GỐC của logo thay vì dựng `<span>` — cách để cả cái logo trở thành một
+     * LIÊN KẾT (`<a>`, hay `<Link>` của router).
+     *
+     * Vì sao cần một prop chứ không phải bọc ngoài: `.ui-logo-lockup` là `display: inline-flex`, nên
+     * bọc nó trong một `<a>` thường (`display: inline`) đặt lockup lên một line box và phần descender
+     * của strut đội thêm vài px vào ô mark — logo bị nhích lên trong thanh trên. Consumer chỉ còn
+     * cách viết `className="flex"` lên thẻ `<a>`, thứ `ui-audit` chặn đúng theo luật
+     * `no-utility-layout` (đo ở godx-chat, 08/09/2026). Với `asChild`, chính thẻ của consumer MANG
+     * `.ui-logo-lockup`, nên không còn phần tử trung gian nào để canh.
+     *
+     * Đúng MỘT con, và ruột của nó bị bỏ qua: nội dung của logo vẫn do `glyph`/`mark`/`wordmark`
+     * quyết định.
+     */
+    asChild?: boolean;
+    /** Chỉ dùng cùng `asChild`: đúng một phần tử để đi mượn. */
+    children?: React.ReactNode;
 }
 /**
  * The band the glyph's ink actually occupies, as the (top edge, bottom edge) of the UNION of every