@godxjp/ui 20.0.0 → 20.1.0

package/dist/components/layout/flex.js

@@ -2,11 +2,16 @@
 import { jsx } from "react/jsx-runtime";
 import { mergeAriaIds } from "../../lib/field-a11y.js";
 import { cn } from "../../lib/utils.js";
-import { flexGapClass, padStyle } from "../../lib/variants.js";
+import { flexGapClass, padStyle, padStepToken } from "../../lib/variants.js";
 const toCssLength = (value) => typeof value === "number" ? `${value}px` : value;
 function Flex({
   as: Element = "div",
   direction = "row",
+  grow,
+  shrink,
+  surface,
+  bleed,
+  reveal,
   gap = "md",
   gapRaw,
   pad,
@@ -37,10 +42,24 @@ function Flex({
       "aria-describedby": mergeAriaIds(props["aria-describedby"], ariaErrorMessage)
     };
   }
+  const responsive = typeof direction === "object";
+  const axes = responsive ? direction : { base: direction };
+  const cssDirection = (axis) => axis === "col" ? "column" : axis;
+  const directionVars = responsive ? Object.fromEntries(
+    Object.entries(axes).map(([step, axis]) => [
+      `--flex-direction-${step}`,
+      cssDirection(axis)
+    ])
+  ) : {};
   return /* @__PURE__ */ jsx(
     Element,
     {
-      "data-direction": direction,
+      "data-direction": responsive ? "responsive" : direction,
+      "data-grow": grow ? "" : void 0,
+      "data-shrink": shrink === false ? "false" : void 0,
+      "data-surface": surface,
+      "data-reveal": reveal,
+      "data-list": Element === "ul" ? "disc" : Element === "ol" ? "decimal" : void 0,
       "data-align": align,
       "data-justify": justify,
       "data-wrap": wrap ? "true" : void 0,
@@ -53,6 +72,8 @@ function Flex({
       "data-pad-raw": padRaw === void 0 ? void 0 : "",
       style: {
         ...style,
+        ...directionVars,
+        ...bleed === void 0 ? void 0 : { marginInline: `calc(-1 * ${padStepToken(bleed)})` },
         ...gapRaw === void 0 ? void 0 : { gap: `${gapRaw}px` },
         ...width === void 0 ? void 0 : { inlineSize: toCssLength(width) },
         ...padStyle(pad, padRaw)

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

@@ -7,6 +7,8 @@ export { NavList } from "./nav-list.js";
 export type { NavListProp, NavListProps } from "./nav-list.js";
 export { AppShell } from "./app-shell.js";
 export type { AppShellProps } from "./app-shell.js";
+export { AppLauncher } from "./app-launcher.js";
+export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppLauncherProps, } from "./app-launcher.js";
 export { OrgSwitcher } from "./org-switcher.js";
 export type { OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, OrgSwitcherProps, } from "./org-switcher.js";
 export { AuthShell } from "./auth-shell.js";
@@ -54,3 +56,4 @@ export { LegalDocumentShell } from "./legal-document-shell.js";
 export type { LegalDocumentSectionProp, LegalDocumentShellProp, LegalDocumentShellProps, } from "./legal-document-shell.js";
 export { ServiceRolePanel } from "./service-role-panel.js";
 export type { ServiceRoleItemProp, ServiceRolePanelProp, ServiceRolePanelProps, } from "./service-role-panel.js";
+export { useAppShellNavigationMode } from "./app-shell.js";

package/dist/components/layout/index.js

@@ -3,6 +3,7 @@ import { Flex } from "./flex.js";
 import { ResizablePanel, ResizablePanelGroup, ResizableHandle } from "./resizable.js";
 import { NavList } from "./nav-list.js";
 import { AppShell } from "./app-shell.js";
+import { AppLauncher } from "./app-launcher.js";
 import { OrgSwitcher } from "./org-switcher.js";
 import { AuthShell } from "./auth-shell.js";
 import { AuthDivider } from "./auth-divider.js";
@@ -25,8 +26,10 @@ import { Separator } from "./separator.js";
 import { AspectRatio } from "./aspect-ratio.js";
 import { LegalDocumentShell } from "./legal-document-shell.js";
 import { ServiceRolePanel } from "./service-role-panel.js";
+import { useAppShellNavigationMode } from "./app-shell.js";
 export {
   AccountChip,
+  AppLauncher,
   AppShell,
   AspectRatio,
   AuthAccountSummary,
@@ -58,5 +61,6 @@ export {
   SplitPane,
   Topbar,
   TopbarItem,
-  createSidebarLink
+  createSidebarLink,
+  useAppShellNavigationMode
 };

package/dist/components/layout/org-switcher.js

@@ -3,6 +3,14 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Check, ChevronsUpDown, Loader2, RotateCcw } from "lucide-react";
 import { cn } from "../../lib/utils.js";
+import {
+  Dialog,
+  DialogBody,
+  DialogContent,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from "../feedback/dialog.js";
 import { Popover, PopoverContent, PopoverTrigger } from "../data-display/popover.js";
 import {
   Command,
@@ -163,7 +171,9 @@ function OrgSwitcher({
     [controlled, onOpenChange]
   );
   const compactViewport = useSheetResponsiveMode("auto") === "bottom";
-  const sheet = responsive === "sheet" || responsive === "auto" && compactViewport;
+  const responsivePair = responsive === "auto" || responsive === "dialog";
+  const sheet = responsive === "sheet" || responsivePair && compactViewport;
+  const dialog = responsive === "dialog" && !sheet;
   const current = organizations.find((organization) => organization.id === value);
   const fallbackName = current?.name ?? labels.title;
   const triggerLabel = labels.trigger(fallbackName);
@@ -210,6 +220,15 @@ function OrgSwitcher({
       )
     ] }) });
   }
+  if (dialog) {
+    return /* @__PURE__ */ jsx("div", { className: cn("ui-org-switcher", className), "data-collapsed": collapsed || void 0, children: /* @__PURE__ */ jsxs(Dialog, { open: resolvedOpen, onOpenChange: setOpen, children: [
+      /* @__PURE__ */ jsx(DialogTrigger, { asChild: true, children: trigger }),
+      /* @__PURE__ */ jsxs(DialogContent, { className: "ui-org-switcher-dialog", children: [
+        /* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: labels.title }) }),
+        /* @__PURE__ */ jsx(DialogBody, { children: panel })
+      ] })
+    ] }) });
+  }
   return /* @__PURE__ */ jsx("div", { className: cn("ui-org-switcher", className), "data-collapsed": collapsed || void 0, children: /* @__PURE__ */ jsxs(Popover, { open: resolvedOpen, onOpenChange: setOpen, children: [
     /* @__PURE__ */ jsx(PopoverTrigger, { asChild: true, children: trigger }),
     /* @__PURE__ */ jsx(PopoverContent, { align: "start", className: "ui-org-switcher-popover", "aria-label": labels.title, children: panel })

package/dist/components/layout/page-container.d.ts

@@ -2,7 +2,7 @@ import type { PageContainerProp, PageInsetProp } from "../../props/components/la
 export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react").JSX.Element;
-declare function PageContainerRoot({ title, subtitle, status, extra, toolbar, footer, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, density, variant, preset, headerLayout, headerScale, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
+declare function PageContainerRoot({ title, subtitle, status, extra, toolbar, footer, toolbarPad, footerPad, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, density, variant, preset, headerLayout, headerScale, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;
 export declare const PageContainer: typeof PageContainerRoot & {
     Inset: typeof PageContainerInset;
 };

package/dist/components/layout/page-container.js

@@ -4,7 +4,7 @@ import { useEffect, useRef, useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
-import { densityClass, pageContainerVariantClass } from "../../lib/variants.js";
+import { densityClass, pageContainerVariantClass, padStyle } from "../../lib/variants.js";
 function scrollParent(el) {
   let node = el?.parentElement ?? null;
   while (node) {
@@ -40,6 +40,8 @@ function PageContainerRoot({
   extra,
   toolbar,
   footer,
+  toolbarPad,
+  footerPad,
   breadcrumb,
   breadcrumbLabel,
   breadcrumbAriaLabel,
@@ -146,9 +148,9 @@ function PageContainerRoot({
             ]
           }
         ),
-        toolbar != null && /* @__PURE__ */ jsx("div", { className: "ui-page-toolbar", children: toolbar }),
+        toolbar != null && /* @__PURE__ */ jsx("div", { className: "ui-page-toolbar", style: padStyle(toolbarPad, void 0), children: toolbar }),
         children != null && /* @__PURE__ */ jsx("div", { className: "ui-page-body", children }),
-        footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", children: footer })
+        footer && /* @__PURE__ */ jsx("footer", { className: "ui-page-footer", style: padStyle(footerPad, void 0), children: footer })
       ]
     }
   );

package/dist/components/layout/responsive-grid.d.ts

@@ -1,12 +1,17 @@
 import type { ReactNode } from "react";
-import type { ResponsiveGridColumnsProp, ResponsiveGridPresetProp } from "../../props/components/layout.prop.js";
+import type { ResponsiveGridColumnsProp, ResponsiveGridFlowProp, ResponsiveGridPresetProp } from "../../props/components/layout.prop.js";
+import type { PadProp, PadRawProp } from "../../props/vocabulary/index.js";
 import type { GapProp } from "../../props/vocabulary/layout.prop.js";
 export type ResponsiveGridProps = {
+    pad?: PadProp;
+    padRaw?: PadRawProp;
     /** Gap between cells, the same steps as Flex. Default `md`. */
     gap?: GapProp;
     /** Optional structural class override. */
     className?: string;
     columns?: ResponsiveGridColumnsProp;
+    /** Keep collections in a horizontal sequence; pair with ScrollArea orientation="horizontal". */
+    flow?: ResponsiveGridFlowProp;
     /**
      * Named column geometry for a recognised collection shape — see `ResponsiveGridPresetProp`.
      * Wins over `columns` when both are set, so a caller migrating to a preset does not also need
@@ -15,4 +20,13 @@ export type ResponsiveGridProps = {
     preset?: ResponsiveGridPresetProp;
     children: ReactNode;
 };
-export declare function ResponsiveGrid({ columns, gap, preset, className, children, }: ResponsiveGridProps): import("react").JSX.Element;
+export declare function ResponsiveGrid({ columns, flow, gap, pad, padRaw, preset, className, children, }: ResponsiveGridProps): import("react").JSX.Element;
+export declare namespace ResponsiveGrid {
+    export { ResponsiveGridItem as Item };
+}
+/** A grid item owns its responsive span; no extra implicit columns on a narrow container. */
+export declare function ResponsiveGridItem({ span, children, className, }: {
+    span?: ResponsiveGridColumnsProp;
+    children?: ReactNode;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/components/layout/responsive-grid.js

@@ -1,4 +1,5 @@
 import { jsx } from "react/jsx-runtime";
+import { padStyle } from "../../lib/variants.js";
 import { cn } from "../../lib/utils.js";
 const RESPONSIVE_GRID_PRESET_COLUMNS = {
   "pricing-plans": { base: 1, sm: 3, md: 3, lg: 3 }
@@ -29,14 +30,40 @@ function toStyle(resolved) {
 }
 function ResponsiveGrid({
   columns = 4,
+  flow = "rows",
   gap,
+  pad,
+  padRaw,
   preset,
   className,
   children
 }) {
   const resolved = preset ? RESPONSIVE_GRID_PRESET_COLUMNS[preset] : resolveColumns(columns);
-  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx("div", { className: cn("ui-responsive-grid", className), "data-gap": gap, style: toStyle(resolved), children }) });
+  return /* @__PURE__ */ jsx("div", { className: "ui-responsive-grid-scope", children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("ui-responsive-grid", className),
+      "data-gap": gap,
+      "data-flow": flow === "columns" ? "columns" : void 0,
+      style: { ...toStyle(resolved), ...padStyle(pad, padRaw) },
+      "data-pad-raw": padRaw === void 0 ? void 0 : "",
+      children
+    }
+  ) });
 }
+function ResponsiveGridItem({
+  span = 1,
+  children,
+  className
+}) {
+  const steps = typeof span === "number" ? { base: 1, sm: span, md: span, lg: span } : resolveColumns(span);
+  const style = Object.fromEntries(
+    Object.entries(steps).map(([step, value]) => [`--responsive-grid-item-${step}`, value])
+  );
+  return /* @__PURE__ */ jsx("div", { className: cn("ui-responsive-grid-item", className), style, children });
+}
+ResponsiveGrid.Item = ResponsiveGridItem;
 export {
-  ResponsiveGrid
+  ResponsiveGrid,
+  ResponsiveGridItem
 };

package/dist/components/layout/topbar-item.d.ts

@@ -11,6 +11,9 @@ export type { TopbarItemProp, TopbarItemProp as TopbarItemProps, } from "../../p
  * file resolves, including nothing at all while the `--focus-outline` switch ships off.
  */
 export declare const TopbarItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
+    hideBelow?: import("../../props/index.js").BreakpointProp;
+    badge?: React.ReactNode;
+    badgeTone?: import("../../props/components/layout.prop.js").SidebarBadgeToneProp;
     asChild?: boolean;
     children?: React.ReactNode;
     className?: import("../../props/index.js").ClassNameProp;

package/dist/components/layout/topbar-item.js

@@ -1,17 +1,32 @@
-import { jsx } from "react/jsx-runtime";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "../../lib/slot.js";
 import { cn } from "../../lib/utils.js";
-const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, className, type, ...props }, ref) {
+const TopbarItem = React.forwardRef(function TopbarItem2({ asChild = false, className, type, hideBelow, badge, badgeTone, children, ...props }, ref) {
   const Comp = asChild ? Slot : "button";
+  const showBadge = !asChild && badge !== void 0 && badge !== "";
+  const badgeNode = showBadge ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "topbar-item-badge",
+      className: "ui-topbar-item-badge",
+      "data-tone": badgeTone === "destructive" ? "destructive" : void 0,
+      children: badge
+    }
+  ) : null;
   return /* @__PURE__ */ jsx(
     Comp,
     {
       ref,
       "data-slot": "topbar-item",
+      "data-hide-below": hideBelow,
       className: cn("ui-topbar-item ui-focus-ring", className),
       type: asChild ? void 0 : type ?? "button",
-      ...props
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        children,
+        badgeNode
+      ] })
     }
   );
 });

package/dist/components/layout/topbar.d.ts

@@ -4,4 +4,4 @@ export type { TopbarProp, TopbarProp as TopbarProps } from "../../props/componen
  * Topbar — a PURE SLOT bar. It positions three clusters (`start` / `center` / `end`) and owns the
  * bar's flex layout; it does NOT bake any chrome.
  */
-export declare function Topbar({ start, center, end, className, children, ...props }: TopbarProp): import("react").JSX.Element;
+export declare function Topbar({ start, center, end, className, children, height, pad, style, ...props }: TopbarProp): import("react").JSX.Element;

package/dist/components/layout/topbar.js

@@ -1,11 +1,32 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { padStyle } from "../../lib/variants.js";
 import { cn } from "../../lib/utils.js";
-function Topbar({ start, center, end, className, children, ...props }) {
-  return /* @__PURE__ */ jsx("div", { "data-slot": "topbar", className: cn("ui-topbar", className), ...props, children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
-    start != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-start", className: "ui-topbar-start", children: start }) : null,
-    center != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-center", className: "ui-topbar-center", children: center }) : null,
-    end != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-end", className: "ui-topbar-end", children: end }) : null
-  ] }) });
+function Topbar({
+  start,
+  center,
+  end,
+  className,
+  children,
+  height,
+  pad,
+  style,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-height": height,
+      style: { ...style, ...padStyle(pad, void 0) },
+      "data-slot": "topbar",
+      className: cn("ui-topbar", className),
+      ...props,
+      children: children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+        start != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-start", className: "ui-topbar-start", children: start }) : null,
+        center != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-center", className: "ui-topbar-center", children: center }) : null,
+        end != null ? /* @__PURE__ */ jsx("div", { "data-slot": "topbar-end", className: "ui-topbar-end", children: end }) : null
+      ] })
+    }
+  );
 }
 export {
   Topbar

package/dist/components/navigation/dropdown-menu.d.ts

@@ -1,5 +1,7 @@
 import * as React from "react";
 import { type MenuItemRenderProps, type PopoverProps, type PopoverRenderProps } from "react-aria-components";
+import type { DropdownMenuPlacementProp } from "../../props/components/navigation.prop.js";
+export type { DropdownMenuPlacementProp } from "../../props/components/navigation.prop.js";
 /**
  * Dịch trạng thái item của RAC sang bộ `data-*` mà Radix phát ra và CSS của kho đang bám.
  *
@@ -98,7 +100,17 @@ type DropdownMenuSubProps = React.PropsWithChildren<DropdownMenuSubPropsOwn>;
  * popover — nên thứ tự `<SubTrigger/>` rồi `<SubContent/>` của Radix ánh xạ thẳng.
  */
 export declare function DropdownMenuSub({ children }: DropdownMenuSubProps): React.JSX.Element;
+/**
+ * Width axis of the menu surface (gh#396) — the vocabulary `Select` already publishes, extended to
+ * the one member of the family that never got it. `"trigger"` matches the anchor, `"auto"` releases
+ * the floor and shrinks to the content, and `sm | md | lg` select the `--menu-content-width-*`
+ * ladder. Unset = today's `--dropdown-content-min-width`, so nothing moves.
+ */
+type DropdownMenuContentWidth = "trigger" | "auto" | "sm" | "md" | "lg";
 interface DropdownMenuContentPropsOwn {
+    placement?: DropdownMenuPlacementProp;
+    arrow?: boolean;
+    width?: DropdownMenuContentWidth;
     className?: string;
     side?: "top" | "right" | "bottom" | "left";
     align?: "start" | "center" | "end";
@@ -125,7 +137,7 @@ type DropdownMenuContentProps = React.PropsWithChildren<DropdownMenuContentProps
  * NGAY ở ý định đóng: đúng lớp lỗi gh#385, đã sửa ở thượng nguồn. Phép đo là
  * `src/components/__tests__/overlay-inert-release-385.test.tsx`.
  */
-export declare function DropdownMenuContent({ children, className, side, align, sideOffset, alignOffset, avoidCollisions, collisionPadding, loop, hideWhenDetached, sticky, forceMount, }: DropdownMenuContentProps): React.JSX.Element;
+export declare function DropdownMenuContent({ children, className, side, align, sideOffset, placement, arrow, width, alignOffset, avoidCollisions, collisionPadding, loop, hideWhenDetached, sticky, forceMount, }: DropdownMenuContentProps): React.JSX.Element;
 interface DropdownMenuItemPropsOwn {
     className?: string;
     inset?: boolean;
@@ -150,6 +162,17 @@ type DropdownMenuLabelProps = React.PropsWithChildren<DropdownMenuLabelPropsOwn>
  *
  * `Header` không đi qua `useRenderProps`, nên `props.children` trong `render` CHÍNH là children của
  * consumer — không có `Provider` chen vào như ở `MenuItem`. `Slot` vì thế nhận thẳng gói props.
+ *
+ * NHƯNG PHẢI RENDER RA `<div>`, KHÔNG PHẢI `<header>`. `<header>` mang vai trò ngầm `banner`, và
+ * `banner` không nằm trong danh sách con hợp lệ của `role="menu"` (axe: aria-required-children,
+ * ARIA 1.2 — menu chỉ nhận menuitem / menuitemcheckbox / menuitemradio / group / separator). Radix
+ * dựng `<div>`, vai trò `generic`, nên nó không bao giờ vấp lỗi này.
+ *
+ * `Header` vẫn được dùng chứ không thay bằng `<div>` trần: bộ dựng collection của RAC chỉ nhận các
+ * nút nó biết, một phần tử lạ đặt thẳng trong `Menu` sẽ bị nó bỏ. Nên giữ nút, đổi thẻ.
+ *
+ * Lỗi này ẩn suốt vì helper a11y dùng chung soi container của lần render, còn menu thì portal ra
+ * `document.body` — phép kiểm mang tên "open, fully-composed menu" thực chất soi một hộp rỗng.
  */
 export declare function DropdownMenuLabel({ children, className, inset, asChild }: DropdownMenuLabelProps): React.JSX.Element;
 interface DropdownMenuSeparatorProps {
@@ -166,6 +189,12 @@ interface DropdownMenuCheckboxItemPropsOwn {
     asChild?: boolean;
 }
 type DropdownMenuCheckboxItemProps = React.PropsWithChildren<DropdownMenuCheckboxItemPropsOwn>;
+/**
+ * Ở Radix mỗi CheckboxItem tự giữ `checked`. Ở RAC không có `isSelected` trên item: `aria-checked`
+ * và `role="menuitemcheckbox"` chỉ xuất hiện khi collection BAO QUANH khai báo `selectionMode`.
+ * Nên mỗi hàng độc lập được bọc trong một `MenuSection` một-phần-tử — đó là cái giá để giữ đúng
+ * vai trò ARIA mà consumer đang test.
+ */
 export declare function DropdownMenuCheckboxItem({ children, className, checked, onCheckedChange, disabled, textValue, asChild, }: DropdownMenuCheckboxItemProps): React.JSX.Element;
 interface DropdownMenuRadioItemPropsOwn {
     className?: string;
@@ -202,4 +231,3 @@ interface DropdownMenuSubContentPropsOwn {
 type DropdownMenuSubContentProps = React.PropsWithChildren<DropdownMenuSubContentPropsOwn>;
 export declare function DropdownMenuSubContent({ children, className, align, alignOffset, sideOffset, avoidCollisions, collisionPadding, loop, forceMount, hideWhenDetached, sticky, }: DropdownMenuSubContentProps): React.JSX.Element;
 export declare const DropdownMenuShortcut: ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => React.JSX.Element;
-export {};

package/dist/components/navigation/dropdown-menu.js

@@ -3,6 +3,7 @@ import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import {
   Header,
+  Button as AriaButton,
   Menu,
   MenuItem,
   MenuSection,
@@ -11,11 +12,20 @@ import {
   Popover,
   Pressable,
   Separator,
+  OverlayArrow,
   SubmenuTrigger
 } from "react-aria-components";
 import { Check, ChevronRight } from "lucide-react";
 import { cn } from "../../lib/utils.js";
 import { Slot } from "../../lib/slot.js";
+const DROPDOWN_MENU_PLACEMENT = {
+  top: { side: "top", align: "center" },
+  topStart: { side: "top", align: "start" },
+  topEnd: { side: "top", align: "end" },
+  bottom: { side: "bottom", align: "center" },
+  bottomStart: { side: "bottom", align: "start" },
+  bottomEnd: { side: "bottom", align: "end" }
+};
 function borrowedTag(children, asChild) {
   return asChild ? React.Children.only(children) : null;
 }
@@ -69,7 +79,16 @@ function DropdownMenuTrigger({ asChild, children, ...props }) {
       "data-state": dataState
     }) });
   }
-  return /* @__PURE__ */ jsx(Pressable, { children: /* @__PURE__ */ jsx("button", { type: "button", "data-slot": "dropdown-menu-trigger", "data-state": dataState, ...props, children }) });
+  return /* @__PURE__ */ jsx(
+    AriaButton,
+    {
+      ...props,
+      isDisabled: props.disabled,
+      "data-slot": "dropdown-menu-trigger",
+      "data-state": dataState,
+      children
+    }
+  );
 }
 function DropdownMenuPortal({ children }) {
   return /* @__PURE__ */ jsx(Fragment, { children });
@@ -110,6 +129,9 @@ function DropdownMenuContent({
   side,
   align,
   sideOffset = 4,
+  placement,
+  arrow,
+  width,
   alignOffset,
   avoidCollisions,
   collisionPadding,
@@ -122,12 +144,13 @@ function DropdownMenuContent({
   void sticky;
   void forceMount;
   const { modal } = React.useContext(DropdownMenuModalContext);
-  return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsx(
+  const anchor = placement ? DROPDOWN_MENU_PLACEMENT[placement] : void 0;
+  return /* @__PURE__ */ jsx(DropdownMenuPortal, { children: /* @__PURE__ */ jsxs(
     Popover,
     {
       "data-slot": "dropdown-menu-content",
       isNonModal: !modal,
-      placement: toPlacement(side, align),
+      placement: toPlacement(side ?? anchor?.side, align ?? anchor?.align),
       offset: sideOffset,
       crossOffset: alignOffset,
       shouldFlip: avoidCollisions,
@@ -138,9 +161,30 @@ function DropdownMenuContent({
       ),
       render: (props, state) => (
         // `role={undefined}`: một menu không phải một dialog — xem radixSurfaceState.
-        /* @__PURE__ */ jsx("div", { ...props, role: void 0, ...radixSurfaceState(state) })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            role: void 0,
+            ...radixSurfaceState(state),
+            "data-align": align ?? anchor?.align ?? "center",
+            "data-width": width
+          }
+        )
       ),
-      children: /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children })
+      children: [
+        /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children }),
+        arrow ? /* @__PURE__ */ jsx(OverlayArrow, { children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            "data-slot": "dropdown-menu-arrow",
+            className: "ui-dropdown-menu-arrow",
+            viewBox: "0 0 10 5",
+            "aria-hidden": "true",
+            children: /* @__PURE__ */ jsx("path", { d: "M0 0 L5 5 L10 0 Z" })
+          }
+        ) }) : null
+      ]
     }
   ) });
 }
@@ -195,7 +239,12 @@ function DropdownMenuLabel({ children, className, inset, asChild }) {
         {
           ...props
         }
-      ) : void 0,
+      ) : (props) => /* @__PURE__ */ jsx(
+        "div",
+        {
+          ...props
+        }
+      ),
       children
     }
   );
@@ -209,7 +258,6 @@ function DropdownMenuSeparator({ className }) {
     }
   );
 }
-const CHECKBOX_KEY = "checked-item";
 function DropdownMenuCheckboxItem({
   children,
   className,
@@ -219,20 +267,21 @@ function DropdownMenuCheckboxItem({
   textValue,
   asChild
 }) {
+  const checkboxKey = React.useId();
   const tag = borrowedTag(children, asChild);
   return /* @__PURE__ */ jsx(
     MenuSection,
     {
       selectionMode: "multiple",
       shouldCloseOnSelect: true,
-      selectedKeys: checked ? [CHECKBOX_KEY] : [],
+      selectedKeys: checked ? [checkboxKey] : [],
       onSelectionChange: (keys) => {
-        onCheckedChange?.(keys === "all" ? true : keys.has(CHECKBOX_KEY));
+        onCheckedChange?.(keys === "all" ? true : keys.has(checkboxKey));
       },
       children: /* @__PURE__ */ jsx(
         MenuItem,
         {
-          id: CHECKBOX_KEY,
+          id: checkboxKey,
           isDisabled: disabled,
           textValue,
           className: cn("ui-dropdown-menu-checkbox-item", className),
@@ -350,7 +399,15 @@ function DropdownMenuSubContent({
       ),
       render: (props, state) => (
         // `role={undefined}`: một menu không phải một dialog — xem radixSurfaceState.
-        /* @__PURE__ */ jsx("div", { ...props, role: void 0, ...radixSurfaceState(state) })
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            ...props,
+            role: void 0,
+            ...radixSurfaceState(state),
+            "data-align": align ?? "center"
+          }
+        )
       ),
       children: /* @__PURE__ */ jsx(Menu, { shouldFocusWrap: loop, children })
     }

package/dist/components/navigation/pagination.d.ts

@@ -1,6 +1,6 @@
 import * as React from "react";
 import type { PaginationProp } from "../../props/components/navigation.prop.js";
-export type { PaginationProp, PaginationProp as PaginationProps, } from "../../props/components/navigation.prop.js";
+export type { PaginationProp, PaginationProp as PaginationProps, PaginationSizeProp, PaginationAlignProp, } from "../../props/components/navigation.prop.js";
 declare const PaginationContent: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLUListElement> & React.RefAttributes<HTMLUListElement>>;
 declare const PaginationItem: React.ForwardRefExoticComponent<React.LiHTMLAttributes<HTMLLIElement> & React.RefAttributes<HTMLLIElement>>;
 declare const PaginationLink: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "type"> & {
@@ -22,5 +22,5 @@ declare const PaginationNext: React.ForwardRefExoticComponent<Omit<Omit<React.De
     disabled?: boolean;
     href?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
-export declare function Pagination({ ariaLabel, value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, hideOnSinglePage, simple, disabled, className, onValueChange, }: PaginationProp): React.JSX.Element | null;
+export declare function Pagination({ ariaLabel, value, total, pageSize, pageSizeOptions, showSizeChanger, showTotal, hideOnSinglePage, simple, showQuickJumper, size, align, responsive, disabled, className, onValueChange, }: PaginationProp): React.JSX.Element | null;
 export { PaginationContent, PaginationItem, PaginationLink, PaginationEllipsis, PaginationPrevious, PaginationNext, };