@comitor/ui 2.0.0 → 3.0.0

package/dist/components/ui/action-bar-constants.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Nhãn mặc định của `ActionBar`.
+ *
+ * Module **CỐ Ý không có `"use client"`** — xem `src/chart/chart-colors.ts` để biết lý do đầy đủ:
+ * mọi export của một file `"use client"` đến tay Server Component dưới dạng client-reference
+ * proxy, đọc ra `undefined` mà KHÔNG throw, KHÔNG warning.
+ *
+ * ⚠ Barrel `src/index.ts` xuất module này TRỰC TIẾP. `action-bar.tsx` chỉ được `import`, KHÔNG
+ * được `export` lại (re-export qua file client là vô hiệu, và đụng tên với `export *`).
+ */
+/**
+ * Toàn bộ chuỗi hiển thị và chuỗi a11y của `ActionBar`. Theo `ComitorLocaleProvider` (mặc định
+ * tiếng Anh, bảng tiếng Việt dựng sẵn); truyền một phần qua prop `labels` của `ActionBar` để đè.
+ *
+ * Khoá có số chèn vào là HÀM: nối chuỗi ở phía app là cách chắc chắn sai trật tự từ ở ngôn ngữ khác.
+ */
+interface ActionBarLabels {
+    /** `aria-label` của thanh (`role="toolbar"`) — prop `aria-label` của `ActionBar` vẫn thắng. */
+    toolbar: string;
+    /** Dòng đếm `ActionBarSelection` hiện khi có prop `count` ("3 selected" / "Đã chọn 3"). */
+    selected: (count: number) => string;
+    /**
+     * Tên cho trình đọc màn hình của `ActionBarClose` — nút chỉ có icon X. Đóng thanh ở khuôn dùng
+     * chuẩn là BỎ CHỌN (app xoá vùng chọn trong `onOpenChange(false)`), nên tên nói đúng việc đó.
+     */
+    close: string;
+}
+/**
+ * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:
+ * `comitorMessagesVi.actionBar`. Component không đọc thẳng hằng này — nó đọc bảng của
+ * `ComitorLocaleProvider`; hằng ở đây để app trải ra khi tự dựng nhãn.
+ */
+declare const DEFAULT_ACTION_BAR_LABELS: ActionBarLabels;
+
+export { type ActionBarLabels, DEFAULT_ACTION_BAR_LABELS };

package/dist/components/ui/action-bar-constants.js

@@ -0,0 +1,6 @@
+import { actionBarEn } from "../../i18n/namespaces/action-bar.js";
+const DEFAULT_ACTION_BAR_LABELS = { ...actionBarEn };
+export {
+  DEFAULT_ACTION_BAR_LABELS
+};
+//# sourceMappingURL=action-bar-constants.js.map

package/dist/components/ui/action-bar-constants.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/ui/action-bar-constants.ts"],"sourcesContent":["/**\n * Nhãn mặc định của `ActionBar`.\n *\n * Module **CỐ Ý không có `\"use client\"`** — xem `src/chart/chart-colors.ts` để biết lý do đầy đủ:\n * mọi export của một file `\"use client\"` đến tay Server Component dưới dạng client-reference\n * proxy, đọc ra `undefined` mà KHÔNG throw, KHÔNG warning.\n *\n * ⚠ Barrel `src/index.ts` xuất module này TRỰC TIẾP. `action-bar.tsx` chỉ được `import`, KHÔNG\n * được `export` lại (re-export qua file client là vô hiệu, và đụng tên với `export *`).\n */\n\nimport { actionBarEn } from \"../../i18n/namespaces/action-bar.js\";\n\n/**\n * Toàn bộ chuỗi hiển thị và chuỗi a11y của `ActionBar`. Theo `ComitorLocaleProvider` (mặc định\n * tiếng Anh, bảng tiếng Việt dựng sẵn); truyền một phần qua prop `labels` của `ActionBar` để đè.\n *\n * Khoá có số chèn vào là HÀM: nối chuỗi ở phía app là cách chắc chắn sai trật tự từ ở ngôn ngữ khác.\n */\nexport interface ActionBarLabels {\n  /** `aria-label` của thanh (`role=\"toolbar\"`) — prop `aria-label` của `ActionBar` vẫn thắng. */\n  toolbar: string;\n  /** Dòng đếm `ActionBarSelection` hiện khi có prop `count` (\"3 selected\" / \"Đã chọn 3\"). */\n  selected: (count: number) => string;\n  /**\n   * Tên cho trình đọc màn hình của `ActionBarClose` — nút chỉ có icon X. Đóng thanh ở khuôn dùng\n   * chuẩn là BỎ CHỌN (app xoá vùng chọn trong `onOpenChange(false)`), nên tên nói đúng việc đó.\n   */\n  close: string;\n}\n\n/**\n * Nhãn TIẾNG ANH mặc định (từ `3.0.0`; trước đó là tiếng Việt). Bảng tiếng Việt:\n * `comitorMessagesVi.actionBar`. Component không đọc thẳng hằng này — nó đọc bảng của\n * `ComitorLocaleProvider`; hằng ở đây để app trải ra khi tự dựng nhãn.\n */\nexport const DEFAULT_ACTION_BAR_LABELS: ActionBarLabels = { ...actionBarEn };\n"],"mappings":"AAWA,SAAS,mBAAmB;AAyBrB,MAAM,4BAA6C,EAAE,GAAG,YAAY;","names":[]}

package/dist/components/ui/action-bar.d.ts

@@ -0,0 +1,68 @@
+import * as React from 'react';
+import { ActionBarLabels } from './action-bar-constants.js';
+import { Button } from './button.js';
+import 'class-variance-authority/types';
+import 'class-variance-authority';
+
+type Direction = "ltr" | "rtl";
+type Orientation = "horizontal" | "vertical";
+interface DivProps extends React.ComponentProps<"div"> {
+    asChild?: boolean;
+}
+interface ActionBarProps extends DivProps {
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onEscapeKeyDown?: (event: KeyboardEvent) => void;
+    align?: "start" | "center" | "end";
+    alignOffset?: number;
+    side?: "top" | "bottom";
+    sideOffset?: number;
+    portalContainer?: Element | DocumentFragment | null;
+    dir?: Direction;
+    orientation?: Orientation;
+    loop?: boolean;
+    /**
+     * Chuỗi hiển thị và chuỗi a11y (tên thanh, dòng "N selected", tên nút đóng). Không truyền thì
+     * theo namespace `actionBar` của `ComitorLocaleProvider` (mặc định tiếng Anh); truyền một phần
+     * là đủ.
+     *
+     * ⚠ Thêm so với thượng nguồn: bản gốc không có chuỗi nào — thanh `role="toolbar"` không tên và
+     * nút đóng chỉ chứa `<X />` là một nút KHÔNG TÊN với trình đọc màn hình.
+     */
+    labels?: Partial<ActionBarLabels>;
+}
+declare function ActionBar(props: ActionBarProps): React.JSX.Element | null;
+interface ActionBarSelectionProps extends DivProps {
+    /**
+     * Số mục đang chọn. Có giá trị thì phần tử tự in `labels.selected(count)` ("3 selected") TRƯỚC
+     * `children` — nên `children` chỉ còn là dấu ngăn + nút đóng.
+     *
+     * ⚠ Thêm so với thượng nguồn: bản gốc để app tự viết chữ ("{n} selected"), tức chuỗi hiển thị
+     * không đi qua `labels`. Bỏ qua khi `asChild` (Slot chỉ nhận đúng MỘT phần tử con).
+     */
+    count?: number;
+}
+declare function ActionBarSelection(props: ActionBarSelectionProps): React.JSX.Element;
+declare function ActionBarGroup(props: DivProps): React.JSX.Element;
+interface ActionBarItemProps extends Omit<React.ComponentProps<typeof Button>, "onSelect"> {
+    onSelect?: (event: Event) => void;
+}
+declare function ActionBarItem(props: ActionBarItemProps): React.JSX.Element;
+interface ActionBarCloseProps extends React.ComponentProps<"button"> {
+    asChild?: boolean;
+}
+/**
+ * Nút đóng thanh (thường là "bỏ chọn"). Không truyền `children` thì vẽ icon X.
+ *
+ * ⚠ Khác thượng nguồn: có tên cho trình đọc màn hình — `aria-label` mặc định `labels.close`
+ * ("Clear selection"). Bản gốc chỉ render `children`, và khuôn dùng của chính thượng nguồn là
+ * `<ActionBarClose><X /></ActionBarClose>`: một nút KHÔNG TÊN. Nếu `children` là CHỮ nhìn thấy
+ * được thì truyền `aria-label` trùng với chữ đó (WCAG 2.5.3), hoặc `aria-label={undefined}`.
+ */
+declare function ActionBarClose(props: ActionBarCloseProps): React.JSX.Element;
+interface ActionBarSeparatorProps extends DivProps {
+    orientation?: Orientation;
+}
+declare function ActionBarSeparator(props: ActionBarSeparatorProps): React.JSX.Element;
+
+export { ActionBar, ActionBarClose, type ActionBarCloseProps, ActionBarGroup, ActionBarItem, type ActionBarItemProps, type ActionBarProps, ActionBarSelection, type ActionBarSelectionProps, ActionBarSeparator, type ActionBarSeparatorProps };

package/dist/components/ui/action-bar.js

@@ -0,0 +1,522 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useDirection } from "@radix-ui/react-direction";
+import { Slot } from "@radix-ui/react-slot";
+import { X } from "lucide-react";
+import * as React from "react";
+import * as ReactDOM from "react-dom";
+import { useComitorLabels } from "../../i18n/locale-provider.js";
+import { cn } from "../../lib/cn.js";
+import { useComposedRefs } from "../../lib/compose-refs.js";
+import { useAsRef } from "../../lib/use-as-ref.js";
+import { useIsomorphicLayoutEffect } from "../../lib/use-isomorphic-layout-effect.js";
+import { Button } from "./button.js";
+const ROOT_NAME = "ActionBar";
+const GROUP_NAME = "ActionBarGroup";
+const ITEM_NAME = "ActionBarItem";
+const CLOSE_NAME = "ActionBarClose";
+const SELECTION_NAME = "ActionBarSelection";
+const SEPARATOR_NAME = "ActionBarSeparator";
+const ITEM_SELECT = "actionbar.itemSelect";
+const ENTRY_FOCUS = "actionbarFocusGroup.onEntryFocus";
+const EVENT_OPTIONS = { bubbles: false, cancelable: true };
+function focusFirst(candidates, preventScroll = false) {
+  const PREVIOUSLY_FOCUSED_ELEMENT = document.activeElement;
+  for (const candidateRef of candidates) {
+    const candidate = candidateRef.current;
+    if (!candidate) continue;
+    if (candidate === PREVIOUSLY_FOCUSED_ELEMENT) return;
+    candidate.focus({ preventScroll });
+    if (document.activeElement !== PREVIOUSLY_FOCUSED_ELEMENT) return;
+  }
+}
+function wrapArray(array, startIndex) {
+  return array.map((_, index) => array[(startIndex + index) % array.length]);
+}
+function getDirectionAwareKey(key, dir) {
+  if (dir !== "rtl") return key;
+  return key === "ArrowLeft" ? "ArrowRight" : key === "ArrowRight" ? "ArrowLeft" : key;
+}
+const ActionBarContext = React.createContext(null);
+function useActionBarContext(consumerName) {
+  const context = React.useContext(ActionBarContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`${ROOT_NAME}\``);
+  }
+  return context;
+}
+const FocusContext = React.createContext(null);
+function useFocusContext(consumerName) {
+  const context = React.useContext(FocusContext);
+  if (!context) {
+    throw new Error(`\`${consumerName}\` ph\u1EA3i n\u1EB1m b\xEAn trong \`FocusProvider\``);
+  }
+  return context;
+}
+function ActionBar(props) {
+  const {
+    open = false,
+    onOpenChange,
+    onEscapeKeyDown,
+    side = "bottom",
+    alignOffset = 0,
+    align = "center",
+    sideOffset = 16,
+    portalContainer: portalContainerProp,
+    dir: dirProp,
+    orientation = "horizontal",
+    loop = true,
+    labels: labelsProp,
+    className,
+    style,
+    ref,
+    asChild,
+    ...rootProps
+  } = props;
+  const [mounted, setMounted] = React.useState(false);
+  const rootRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, rootRef);
+  const propsRef = useAsRef({
+    onEscapeKeyDown,
+    onOpenChange
+  });
+  const dir = useDirection(dirProp);
+  const labels = useComitorLabels("actionBar", labelsProp);
+  useIsomorphicLayoutEffect(() => {
+    setMounted(true);
+  }, []);
+  React.useEffect(() => {
+    if (!open) return;
+    const ownerDocument = rootRef.current?.ownerDocument ?? document;
+    function onKeyDown(event) {
+      if (event.key !== "Escape" || event.defaultPrevented || event.isComposing) return;
+      propsRef.current.onEscapeKeyDown?.(event);
+      if (!event.defaultPrevented) {
+        propsRef.current.onOpenChange?.(false);
+      }
+    }
+    ownerDocument.addEventListener("keydown", onKeyDown);
+    return () => ownerDocument.removeEventListener("keydown", onKeyDown);
+  }, [open, propsRef]);
+  const contextValue = React.useMemo(
+    () => ({
+      onOpenChange,
+      dir,
+      orientation,
+      loop,
+      labels
+    }),
+    [onOpenChange, dir, orientation, loop, labels]
+  );
+  const portalContainer = portalContainerProp ?? (mounted ? globalThis.document?.body : null);
+  if (!portalContainer || !open) return null;
+  const RootPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(ActionBarContext.Provider, { value: contextValue, children: ReactDOM.createPortal(
+    /* @__PURE__ */ jsx(
+      RootPrimitive,
+      {
+        role: "toolbar",
+        "aria-label": labels.toolbar,
+        "aria-orientation": orientation,
+        "data-slot": "action-bar",
+        "data-side": side,
+        "data-align": align,
+        "data-orientation": orientation,
+        dir,
+        ...rootProps,
+        ref: composedRef,
+        className: cn(
+          /*
+           * ⚠ Khác thượng nguồn: mặt nổi đi qua bộ token `popover` + `shadow-overlay` như mọi lớp
+           * nổi của gói (Popover, DropdownMenu). Bản gốc `bg-card shadow-lg` — `shadow-lg` là
+           * bóng mặc định của Tailwind, không có bản dark của gói (xem CLAUDE.md "Bóng").
+           */
+          "fixed z-50 rounded-lg border bg-popover text-popover-foreground shadow-overlay outline-none",
+          "animate-in duration-250 fade-in-0 zoom-in-95 [animation-timing-function:cubic-bezier(0.16,1,0.3,1)]",
+          "data-[side=bottom]:slide-in-from-bottom-4 data-[side=top]:slide-in-from-top-4",
+          "motion-reduce:animate-none motion-reduce:transition-none",
+          /*
+           * ⚠ Khác thượng nguồn: chặn bề rộng theo khung nhìn và cho hàng ngang XUỐNG DÒNG. Bản gốc
+           * không có giới hạn nào — đo ở 375px: thanh rộng 413px, bắt đầu ở x = −19px, hai mép bị
+           * cắt và "Đã chọn 3" vỡ thành 3 dòng. Xuống dòng chứ không cuộn ngang: vùng cuộn sẽ cắt
+           * mất vòng focus của các nút ở mép.
+           */
+          "max-w-[calc(100vw-1rem)]",
+          orientation === "horizontal" ? "flex flex-row flex-wrap items-center gap-2 px-2 py-1.5" : "flex flex-col items-start gap-2 px-1.5 py-2",
+          className
+        ),
+        style: {
+          [side]: `${sideOffset}px`,
+          ...align === "center" && {
+            left: "50%",
+            translate: "-50% 0"
+          },
+          ...align === "start" && { left: `${alignOffset}px` },
+          ...align === "end" && { right: `${alignOffset}px` },
+          ...style
+        }
+      }
+    ),
+    portalContainer
+  ) });
+}
+function ActionBarSelection(props) {
+  const { className, asChild, count, children, ...selectionProps } = props;
+  const { labels } = useActionBarContext(SELECTION_NAME);
+  const SelectionPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    SelectionPrimitive,
+    {
+      "data-slot": "action-bar-selection",
+      ...selectionProps,
+      className: cn(
+        "flex shrink-0 items-center gap-1 whitespace-nowrap rounded-sm border px-2 py-1 text-sm font-medium tabular-nums",
+        className
+      ),
+      children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
+        count !== void 0 && labels.selected(count),
+        children
+      ] })
+    }
+  );
+}
+function ActionBarGroup(props) {
+  const {
+    onBlur: onBlurProp,
+    onFocus: onFocusProp,
+    onMouseDown: onMouseDownProp,
+    className,
+    asChild,
+    ref,
+    ...groupProps
+  } = props;
+  const [tabStopId, setTabStopId] = React.useState(null);
+  const [isTabbingBackOut, setIsTabbingBackOut] = React.useState(false);
+  const [focusableItemCount, setFocusableItemCount] = React.useState(0);
+  const groupRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, groupRef);
+  const isClickFocusRef = React.useRef(false);
+  const itemsRef = React.useRef(/* @__PURE__ */ new Map());
+  const { dir, orientation } = useActionBarContext(GROUP_NAME);
+  const onItemFocus = React.useCallback((tabStopId2) => {
+    setTabStopId(tabStopId2);
+  }, []);
+  const onItemShiftTab = React.useCallback(() => {
+    setIsTabbingBackOut(true);
+  }, []);
+  const onFocusableItemAdd = React.useCallback(() => {
+    setFocusableItemCount((prevCount) => prevCount + 1);
+  }, []);
+  const onFocusableItemRemove = React.useCallback(() => {
+    setFocusableItemCount((prevCount) => prevCount - 1);
+  }, []);
+  const onItemRegister = React.useCallback((item) => {
+    itemsRef.current.set(item.id, item);
+  }, []);
+  const onItemUnregister = React.useCallback((id) => {
+    itemsRef.current.delete(id);
+  }, []);
+  const getItems = React.useCallback(() => {
+    return Array.from(itemsRef.current.values()).filter((item) => item.ref.current).sort((a, b) => {
+      const elementA = a.ref.current;
+      const elementB = b.ref.current;
+      if (!elementA || !elementB) return 0;
+      const position = elementA.compareDocumentPosition(elementB);
+      if (position & Node.DOCUMENT_POSITION_FOLLOWING) {
+        return -1;
+      }
+      if (position & Node.DOCUMENT_POSITION_PRECEDING) {
+        return 1;
+      }
+      return 0;
+    });
+  }, []);
+  const onBlur = React.useCallback(
+    (event) => {
+      onBlurProp?.(event);
+      if (event.defaultPrevented) return;
+      setIsTabbingBackOut(false);
+    },
+    [onBlurProp]
+  );
+  const onFocus = React.useCallback(
+    (event) => {
+      onFocusProp?.(event);
+      if (event.defaultPrevented) return;
+      const isKeyboardFocus = !isClickFocusRef.current;
+      if (event.target === event.currentTarget && isKeyboardFocus && !isTabbingBackOut) {
+        const entryFocusEvent = new CustomEvent(ENTRY_FOCUS, EVENT_OPTIONS);
+        event.currentTarget.dispatchEvent(entryFocusEvent);
+        if (!entryFocusEvent.defaultPrevented) {
+          const items = Array.from(itemsRef.current.values()).filter((item) => !item.disabled);
+          const currentItem = items.find((item) => item.id === tabStopId);
+          const candidateItems = [currentItem, ...items].filter(Boolean);
+          const candidateRefs = candidateItems.map((item) => item.ref);
+          focusFirst(candidateRefs, false);
+        }
+      }
+      isClickFocusRef.current = false;
+    },
+    [onFocusProp, isTabbingBackOut, tabStopId]
+  );
+  const onMouseDown = React.useCallback(
+    (event) => {
+      onMouseDownProp?.(event);
+      if (event.defaultPrevented) return;
+      isClickFocusRef.current = true;
+    },
+    [onMouseDownProp]
+  );
+  const focusContextValue = React.useMemo(
+    () => ({
+      tabStopId,
+      onItemFocus,
+      onItemShiftTab,
+      onFocusableItemAdd,
+      onFocusableItemRemove,
+      onItemRegister,
+      onItemUnregister,
+      getItems
+    }),
+    [
+      tabStopId,
+      onItemFocus,
+      onItemShiftTab,
+      onFocusableItemAdd,
+      onFocusableItemRemove,
+      onItemRegister,
+      onItemUnregister,
+      getItems
+    ]
+  );
+  const GroupPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(FocusContext.Provider, { value: focusContextValue, children: /* @__PURE__ */ jsx(
+    GroupPrimitive,
+    {
+      role: "group",
+      "data-slot": "action-bar-group",
+      "data-orientation": orientation,
+      dir,
+      tabIndex: isTabbingBackOut || focusableItemCount === 0 ? -1 : 0,
+      ...groupProps,
+      ref: composedRef,
+      className: cn(
+        "flex gap-2 outline-none",
+        orientation === "horizontal" ? "items-center" : "w-full flex-col items-start",
+        className
+      ),
+      onBlur,
+      onFocus,
+      onMouseDown
+    }
+  ) });
+}
+function ActionBarItem(props) {
+  const {
+    onSelect,
+    onClick: onClickProp,
+    onFocus: onFocusProp,
+    onKeyDown: onKeyDownProp,
+    onMouseDown: onMouseDownProp,
+    className,
+    disabled,
+    ref,
+    ...itemProps
+  } = props;
+  const itemRef = React.useRef(null);
+  const composedRef = useComposedRefs(ref, itemRef);
+  const isMouseClickRef = React.useRef(false);
+  const { onOpenChange, dir, orientation, loop } = useActionBarContext(ITEM_NAME);
+  const focusContext = useFocusContext(ITEM_NAME);
+  const itemId = React.useId();
+  const isTabStop = focusContext.tabStopId === itemId;
+  useIsomorphicLayoutEffect(() => {
+    focusContext.onItemRegister({
+      id: itemId,
+      ref: itemRef,
+      disabled: !!disabled
+    });
+    if (!disabled) {
+      focusContext.onFocusableItemAdd();
+    }
+    return () => {
+      focusContext.onItemUnregister(itemId);
+      if (!disabled) {
+        focusContext.onFocusableItemRemove();
+      }
+    };
+  }, [focusContext, itemId, disabled]);
+  const onClick = React.useCallback(
+    (event) => {
+      onClickProp?.(event);
+      if (event.defaultPrevented) return;
+      const item = itemRef.current;
+      if (!item) return;
+      const itemSelectEvent = new CustomEvent(ITEM_SELECT, {
+        bubbles: true,
+        cancelable: true
+      });
+      item.addEventListener(ITEM_SELECT, (event2) => onSelect?.(event2), {
+        once: true
+      });
+      item.dispatchEvent(itemSelectEvent);
+      if (!itemSelectEvent.defaultPrevented) {
+        onOpenChange?.(false);
+      }
+    },
+    [onClickProp, onOpenChange, onSelect]
+  );
+  const onFocus = React.useCallback(
+    (event) => {
+      onFocusProp?.(event);
+      if (event.defaultPrevented) return;
+      focusContext.onItemFocus(itemId);
+      isMouseClickRef.current = false;
+    },
+    [onFocusProp, focusContext, itemId]
+  );
+  const onKeyDown = React.useCallback(
+    (event) => {
+      onKeyDownProp?.(event);
+      if (event.defaultPrevented) return;
+      if (event.key === "Tab" && event.shiftKey) {
+        focusContext.onItemShiftTab();
+        return;
+      }
+      if (event.target !== event.currentTarget) return;
+      const key = getDirectionAwareKey(event.key, dir);
+      let focusIntent;
+      if (orientation === "horizontal") {
+        if (key === "ArrowLeft") focusIntent = "prev";
+        else if (key === "ArrowRight") focusIntent = "next";
+        else if (key === "Home") focusIntent = "first";
+        else if (key === "End") focusIntent = "last";
+      } else {
+        if (key === "ArrowUp") focusIntent = "prev";
+        else if (key === "ArrowDown") focusIntent = "next";
+        else if (key === "Home") focusIntent = "first";
+        else if (key === "End") focusIntent = "last";
+      }
+      if (focusIntent !== void 0) {
+        if (event.metaKey || event.ctrlKey || event.altKey || event.shiftKey) return;
+        event.preventDefault();
+        const items = focusContext.getItems().filter((item) => !item.disabled);
+        let candidateRefs = items.map((item) => item.ref);
+        if (focusIntent === "last") {
+          candidateRefs.reverse();
+        } else if (focusIntent === "prev" || focusIntent === "next") {
+          if (focusIntent === "prev") candidateRefs.reverse();
+          const currentIndex = candidateRefs.findIndex((ref2) => ref2.current === event.currentTarget);
+          candidateRefs = loop ? wrapArray(candidateRefs, currentIndex + 1) : candidateRefs.slice(currentIndex + 1);
+        }
+        queueMicrotask(() => focusFirst(candidateRefs));
+      }
+    },
+    [onKeyDownProp, focusContext, dir, orientation, loop]
+  );
+  const onMouseDown = React.useCallback(
+    (event) => {
+      onMouseDownProp?.(event);
+      if (event.defaultPrevented) return;
+      isMouseClickRef.current = true;
+      if (disabled) {
+        event.preventDefault();
+      } else {
+        focusContext.onItemFocus(itemId);
+      }
+    },
+    [onMouseDownProp, focusContext, itemId, disabled]
+  );
+  return /* @__PURE__ */ jsx(
+    Button,
+    {
+      type: "button",
+      "data-slot": "action-bar-item",
+      variant: "secondary",
+      size: "sm",
+      disabled,
+      tabIndex: isTabStop ? 0 : -1,
+      ...itemProps,
+      className: cn(
+        /*
+         * ⚠ Khác thượng nguồn: `Button` của gói KHÔNG tự đặt cỡ `svg` con (khác shadcn gốc), nên
+         * `<Copy />` trần trong mục ra 24px giữa một nút cao 32px. Đặt cỡ ở đây, đúng như
+         * `DropdownMenuItem`/`CommandItem` của gói — không thêm luật đó vào `Button` (CHANGELOG 2.0.0).
+         */
+        "[&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        orientation === "vertical" && "w-full",
+        className
+      ),
+      ref: composedRef,
+      onClick,
+      onFocus,
+      onKeyDown,
+      onMouseDown
+    }
+  );
+}
+function ActionBarClose(props) {
+  const { asChild, className, onClick, children, ...closeProps } = props;
+  const { onOpenChange, labels } = useActionBarContext(CLOSE_NAME);
+  const onCloseClick = React.useCallback(
+    (event) => {
+      onClick?.(event);
+      if (event.defaultPrevented) return;
+      onOpenChange?.(false);
+    },
+    [onOpenChange, onClick]
+  );
+  const ClosePrimitive = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsx(
+    ClosePrimitive,
+    {
+      type: "button",
+      "aria-label": labels.close,
+      "data-slot": "action-bar-close",
+      ...closeProps,
+      className: cn(
+        /*
+         * ⚠ Khác thượng nguồn: cùng khuôn với nút đóng của `Dialog` — `text-muted-foreground` →
+         * `hover:text-foreground`, vòng focus `ring-ring/50` có `ring-offset`. Bản gốc
+         * `opacity-70 hover:opacity-100` và `focus-visible:border-ring` (nút không có viền nên
+         * dòng đó không vẽ gì).
+         * ⚠ Và vùng bấm: icon 14px trần là 14×14px, dưới mức 24×24 của WCAG 2.5.8. `p-[5px]` nâng
+         * vùng bấm lên 24px, `-m-[5px]` trả lại đúng chừng đó để chip chứa nó không phình ra.
+         */
+        "-m-[5px] rounded-xs p-[5px] text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+        className
+      ),
+      onClick: onCloseClick,
+      children: children ?? (asChild ? null : /* @__PURE__ */ jsx(X, { "aria-hidden": "true" }))
+    }
+  );
+}
+function ActionBarSeparator(props) {
+  const { orientation: orientationProp, asChild, className, ...separatorProps } = props;
+  const context = useActionBarContext(SEPARATOR_NAME);
+  const orientation = orientationProp ?? context.orientation;
+  const SeparatorPrimitive = asChild ? Slot : "div";
+  return /* @__PURE__ */ jsx(
+    SeparatorPrimitive,
+    {
+      "aria-hidden": "true",
+      "data-orientation": orientation,
+      "data-slot": "action-bar-separator",
+      ...separatorProps,
+      className: cn(
+        "bg-border in-data-[slot=action-bar-selection]:ml-0.5 in-data-[slot=action-bar-selection]:h-4 in-data-[slot=action-bar-selection]:w-px",
+        orientation === "horizontal" ? "h-6 w-px" : "h-px w-full",
+        className
+      )
+    }
+  );
+}
+export {
+  ActionBar,
+  ActionBarClose,
+  ActionBarGroup,
+  ActionBarItem,
+  ActionBarSelection,
+  ActionBarSeparator
+};
+//# sourceMappingURL=action-bar.js.map