@antadesign/anta 0.3.2 → 0.3.4

package/dist/components/InputDate.d.ts

@@ -0,0 +1,89 @@
+import type { BaseProps } from '../general_types';
+import type { IconShape } from '../elements/a-icon.shapes';
+/** Snapshot passed as the 2nd argument to `onValueChange` — the new ISO value
+ *  (`''` when cleared) plus the field name (mirrors `Input` / `Calendar`). */
+export interface InputDateChangeAttrs {
+    value: string;
+    name?: string;
+}
+/** `<InputDate>` props — `Calendar`'s date surface plus `Input`'s field surface. */
+export interface InputDateProps extends Omit<BaseProps, 'children'> {
+    /** Controlled value — ISO `YYYY-MM-DD` (or `YYYY-MM-DDTHH:mm` with `time`), `''`
+     *  for empty. Pair with `onValueChange`; the field and calendar follow it and a
+     *  pick only *requests* a change. */
+    value?: string;
+    /** Initial value for the uncontrolled case. */
+    defaultValue?: string;
+    /** Earliest selectable date (ISO). Earlier days disable, and a typed date before
+     *  it stays uncommitted. */
+    min?: string;
+    /** Latest selectable date (ISO). */
+    max?: string;
+    /** BCP-47 locale driving the display format, the placeholder mask, parsing order,
+     *  and the calendar.
+     *  @defaultValue navigator.language */
+    locale?: string;
+    /** Form field name — the ISO value submits under this key. */
+    name?: string;
+    /** Field size. Also sizes the calendar and the time row.
+     *  @defaultValue medium */
+    size?: 'small' | 'medium' | 'large';
+    /** Disable the field and the calendar. */
+    disabled?: boolean;
+    /** Field label, above the control. */
+    label?: React.ReactNode;
+    /** Helper text under the field. Replaced by a format hint while the entry is
+     *  unrecognized. */
+    hint?: React.ReactNode;
+    /** Placeholder shown when empty.
+     *  @defaultValue the locale's format mask (e.g. `MM/DD/YYYY`, `MM/DD/YYYY HH:MM` with `time`) */
+    placeholder?: string;
+    /** Validation/feedback tone. An unrecognized entry forces `critical` until fixed.
+     *  @defaultValue neutral */
+    status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Round the field corners — `true` for fully round, or a number / CSS length. */
+    round?: boolean | number | string;
+    /** Show a clear button once the field has a value. */
+    clearable?: boolean;
+    /** Leading icon at the start of the field — the calendar affordance.
+     *  @defaultValue calendar-days */
+    icon?: IconShape;
+    /** Include a time. The value becomes ISO `YYYY-MM-DDTHH:mm`, the field parses a
+     *  trailing time after a space (`06/15/2026 14:30`, `… 2:30pm`), and the menu
+     *  shows a time row (hours : minutes, an AM/PM toggle in 12-hour locales, then a
+     *  Done button) under the calendar. Picking a day keeps the menu open so you can
+     *  set the time. */
+    time?: boolean;
+    /** Force the time cycle when `time` is on: `true` for 12-hour (AM/PM), `false`
+     *  for 24-hour. Omit to follow the locale (`en-US` → 12-hour, most others → 24). */
+    hour12?: boolean;
+    /** Fired after the value resolves (a recognized entry, a calendar pick, a time
+     *  change, or a clear), with the new ISO value (`''` when cleared) and a
+     *  `{ value, name }` snapshot. An unrecognized entry does not fire it. */
+    onValueChange?: (value: string, attrs: InputDateChangeAttrs) => void;
+}
+/**
+ * `<InputDate>` — a date (or date-time) field that replaces the native
+ * `type="date"` / `type="datetime-local"` input, **composed** from `Input` +
+ * `Menu` + `Calendar` (no `a-inputdate` element; the wrapper is the coordinator).
+ * The field accepts free text and resolves it on commit (blur / Enter) with a
+ * lenient, locale-aware parser, then rewrites the entry to the canonical format;
+ * an unrecognized entry marks the field `critical` and keeps the text. Clicking the
+ * field (or pressing ArrowDown) opens a `Calendar` in a menu; a leading calendar
+ * icon marks the affordance. Mouse-open keeps focus in the field so you can keep
+ * typing; ArrowDown moves focus into the grid. With `time`, a time row sits under
+ * the grid. The value is an ISO `YYYY-MM-DD` string, or `YYYY-MM-DDTHH:mm` with `time`.
+ *
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Requires `@antadesign/anta/elements` (client-side only).
+ *
+ * @remarks Not SSR-safe (it embeds `Calendar`): it reads the current date
+ * (`Temporal.Now`) and locale (`navigator.language`) at render, so server and
+ * client output diverge and hydration mismatches. Render it client-side only.
+ *
+ * @example
+ * ```tsx
+ * <InputDate label="Starts" time defaultValue="2026-06-15T09:00" onValueChange={(v) => save(v)} />
+ * ```
+ */
+export declare const InputDate: ({ value, defaultValue, min, max, locale, name, size, disabled, label, hint, placeholder, status, round, clearable, icon, time, hour12, onValueChange, className, style, ...rest }: InputDateProps) => any;

package/dist/components/InputDate.js

@@ -0,0 +1,273 @@
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import cn from "clsx";
+import { useMemo, useState } from "../jsx-runtime";
+import { Temporal } from "temporal-polyfill";
+import {
+  parseISODate,
+  parseDateInput,
+  formatDateInput,
+  dateFormatPattern,
+  parseDateTimeInput,
+  formatDateTimeInput,
+  dateTimeFormatPattern,
+  usesHour12
+} from "../calendar-core";
+import { Input } from "./Input";
+import { Menu } from "./Menu";
+import { Calendar } from "./Calendar";
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+import { Tabs } from "./Tabs";
+import styles from "./InputDate.module.css";
+const InputDate = ({
+  value,
+  defaultValue,
+  min,
+  max,
+  locale,
+  name,
+  size,
+  disabled,
+  label,
+  hint,
+  placeholder,
+  status,
+  round,
+  clearable,
+  icon,
+  time,
+  hour12,
+  onValueChange,
+  className,
+  style,
+  ...rest
+}) => {
+  const resolvedLocale = locale || (typeof navigator !== "undefined" ? navigator.language : "en-US");
+  const minD = parseISODate(min);
+  const maxD = parseISODate(max);
+  const twelveHour = time ? hour12 ?? usesHour12(resolvedLocale) : false;
+  const pattern = useMemo(
+    () => placeholder ?? (time ? dateTimeFormatPattern(resolvedLocale, twelveHour) : dateFormatPattern(resolvedLocale)),
+    [placeholder, time, resolvedLocale, twelveHour]
+  );
+  const fmt = (iso) => {
+    if (!iso) return "";
+    const d = parseISODate(iso.slice(0, 10));
+    if (!d) return "";
+    if (!time) return formatDateInput(d, resolvedLocale);
+    const hasT = iso.length >= 16 && iso[10] === "T";
+    const dt = d.toPlainDateTime(Temporal.PlainTime.from(hasT ? iso.slice(11, 16) : "00:00"));
+    return formatDateTimeInput(dt, resolvedLocale, twelveHour);
+  };
+  const normalize = (iso) => !iso || !time ? iso : iso.length <= 10 ? `${iso}T00:00` : iso.slice(0, 16);
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState(() => normalize(defaultValue));
+  const current = controlled ? value : internal;
+  const dateISO = current ? current.slice(0, 10) : "";
+  const hasTime = !!current && current.length >= 16 && current[10] === "T";
+  const h24 = hasTime ? parseInt(current.slice(11, 13), 10) || 0 : 0;
+  const curM = hasTime ? current.slice(14, 16) : "00";
+  const curMer = h24 < 12 ? "AM" : "PM";
+  const curHourShown = twelveHour ? String((h24 + 11) % 12 + 1).padStart(2, "0") : String(h24).padStart(2, "0");
+  const [text, setText] = useState(() => fmt(current));
+  const [open, setOpen] = useState(false);
+  const [invalid, setInvalid] = useState(false);
+  const [focusNonce, setFocusNonce] = useState(0);
+  const [hourText, setHourText] = useState(curHourShown);
+  const [minuteText, setMinuteText] = useState(curM);
+  const meridiem = curMer;
+  const [lastValue, setLastValue] = useState(current);
+  if (current !== lastValue) {
+    setLastValue(current);
+    setText(fmt(current));
+    setInvalid(false);
+  }
+  const [lastTime, setLastTime] = useState(`${h24}:${curM}`);
+  if (time && `${h24}:${curM}` !== lastTime) {
+    setLastTime(`${h24}:${curM}`);
+    setHourText(curHourShown);
+    setMinuteText(curM);
+  }
+  const commit = (iso) => {
+    if (!controlled) setInternal(iso || void 0);
+    onValueChange?.(iso, { value: iso, name });
+  };
+  const clampPad = (v, hi) => String(Math.min(Math.max(parseInt(String(v || "0"), 10) || 0, 0), hi)).padStart(2, "0");
+  const resolveHour = (raw, mer) => {
+    let n = parseInt(String(raw || "0"), 10) || 0;
+    if (!twelveHour) {
+      const h = Math.min(Math.max(n, 0), 23);
+      return { h24: h, shown: String(h).padStart(2, "0"), mer };
+    }
+    if (n === 0) return { h24: 0, shown: "12", mer: "AM" };
+    if (n > 23) n = 23;
+    if (n > 12) return { h24: n, shown: String(n - 12).padStart(2, "0"), mer: "PM" };
+    return { h24: mer === "AM" ? n % 12 : n % 12 + 12, shown: String(n).padStart(2, "0"), mer };
+  };
+  const withTime = (d) => {
+    const { h24: h } = resolveHour(hourText, meridiem);
+    return `${d}T${String(h).padStart(2, "0")}:${clampPad(minuteText, 59)}`;
+  };
+  const apply = (iso) => {
+    setInvalid(false);
+    if (iso === (current ?? "")) setText(fmt(iso));
+    else commit(iso);
+  };
+  const resolve = (raw) => {
+    const t = raw.trim();
+    if (!t) {
+      setInvalid(false);
+      if (current) commit("");
+      else setText("");
+      return;
+    }
+    const parsed = time ? parseDateTimeInput(t, resolvedLocale, { min: minD, max: maxD }) : parseDateInput(t, resolvedLocale, { min: minD, max: maxD });
+    if (!parsed) {
+      setInvalid(true);
+      return;
+    }
+    const iso = time ? parsed.toString({ smallestUnit: "minute" }) : parsed.toString();
+    apply(iso);
+  };
+  const commitTime = (hRaw, mRaw, mer) => {
+    const { h24: h, shown } = resolveHour(hRaw, mer);
+    const mm = clampPad(mRaw, 59);
+    setHourText(shown);
+    setMinuteText(mm);
+    const base = dateISO || Temporal.Now.plainDateISO().toString();
+    commit(`${base}T${String(h).padStart(2, "0")}:${mm}`);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        label,
+        hint: invalid ? `Unrecognized date. Try ${pattern}.` : hint,
+        status: invalid ? "critical" : status,
+        size,
+        round,
+        disabled,
+        clearable,
+        leading: /* @__PURE__ */ jsx(Icon, { shape: icon ?? "calendar-days" }),
+        value: text,
+        placeholder: pattern,
+        inputMode: time ? "text" : "numeric",
+        autoComplete: "off",
+        "aria-haspopup": "dialog",
+        "aria-expanded": open ? "true" : "false",
+        onInput: (e) => {
+          setText(e.currentTarget.value);
+          if (invalid) setInvalid(false);
+        },
+        onChange: (e) => resolve(e.currentTarget.value),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown" && !disabled) {
+            e.preventDefault();
+            if (!open) e.currentTarget.click();
+            setFocusNonce((n) => n + 1);
+          }
+        },
+        className: cn(styles.dateField, className),
+        style,
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        open,
+        placement: "bottom-start",
+        className: styles.calendarMenu,
+        onStateChange: (_e, { next }) => setOpen(next),
+        children: /* @__PURE__ */ jsxs("div", { "data-menu-open": "", children: [
+          /* @__PURE__ */ jsx(
+            Calendar,
+            {
+              value: dateISO,
+              min,
+              max,
+              locale,
+              size,
+              disabled,
+              focusSignal: focusNonce,
+              onStateChange: (_e, { next, reason }) => {
+                if (reason !== "user") return;
+                const d = next ?? "";
+                apply(time && d ? withTime(d) : d);
+                if (!time) setOpen(false);
+              }
+            }
+          ),
+          time && /* @__PURE__ */ jsxs("div", { className: styles.timeRow, children: [
+            /* @__PURE__ */ jsxs("div", { className: styles.time, role: "group", "aria-label": "Time", children: [
+              /* @__PURE__ */ jsx(Icon, { shape: "clock", "aria-hidden": "true", className: styles.clock }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  size,
+                  className: styles.timeField,
+                  value: hourText,
+                  placeholder: "HH",
+                  type: "number",
+                  inputMode: "numeric",
+                  "aria-label": "Hours",
+                  disabled,
+                  onInput: (e) => setHourText(e.currentTarget.value.replace(/\D/g, "").slice(0, 2)),
+                  onChange: (e) => commitTime(e.currentTarget.value, minuteText, meridiem)
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: styles.sep, "aria-hidden": "true", children: ":" }),
+              /* @__PURE__ */ jsx(
+                Input,
+                {
+                  size,
+                  className: styles.timeField,
+                  value: minuteText,
+                  placeholder: "MM",
+                  type: "number",
+                  inputMode: "numeric",
+                  "aria-label": "Minutes",
+                  disabled,
+                  onInput: (e) => setMinuteText(e.currentTarget.value.replace(/\D/g, "").slice(0, 2)),
+                  onChange: (e) => commitTime(hourText, e.currentTarget.value, meridiem)
+                }
+              ),
+              twelveHour && /* @__PURE__ */ jsx(
+                Tabs,
+                {
+                  className: styles.meridiem,
+                  size,
+                  priority: "primary",
+                  "aria-label": "AM or PM",
+                  options: [
+                    { value: "AM", label: "AM" },
+                    { value: "PM", label: "PM" }
+                  ],
+                  value: meridiem,
+                  onStateChange: (_e, { next }) => {
+                    if (next === "AM" || next === "PM") commitTime(hourText, minuteText, next);
+                  },
+                  disabled
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                priority: "tertiary",
+                size,
+                icon: "check",
+                "aria-label": "Done",
+                onClick: () => setOpen(false)
+              }
+            )
+          ] })
+        ] })
+      }
+    ),
+    name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current ?? "" }) : null
+  ] });
+};
+export {
+  InputDate
+};

package/dist/components/InputDate.module.css

@@ -0,0 +1 @@
+.calendarMenu{--menu-padding: 8px}.timeRow{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:6px;padding-top:8px;border-top:1px solid var(--border-3)}.time{display:flex;align-items:center;gap:4px}.clock{flex:none;color:var(--text-5);margin-inline-end:2px}.sep{color:var(--text-3);user-select:none}.timeField{width:2.25rem}.timeField[size=small]{width:2rem}.timeField[size=large]{width:2.5rem}.timeField::part(input){text-align:center;font-variant-numeric:tabular-nums;font-weight:500}.meridiem{margin-inline-start:4px;--tab-padding-x: 6px;--tabs-gap: 0px;--tab-padding-y: max(0px, calc((10px - var(--_pb)) / 2 - 2px))}.meridiem a-tab{font-weight:400}.dateField::part(input){text-overflow:ellipsis}

package/dist/components/Menu.d.ts

@@ -29,6 +29,10 @@ export interface MenuProps extends BaseProps {
      *  in response. Submenus are always uncontrolled regardless of this. See
      *  STATEFUL-COMPONENTS.md. */
     open?: boolean;
+    /** Round the menu: the container softens to a 20px radius and its items go
+     *  fully round. A `number` (px) or CSS length string tunes the container radius
+     *  only — items stay full pills. */
+    round?: boolean | number | string;
     /** Fired before the open state changes — on open, and on every dismiss (Esc,
      *  outside-click, scroll, selecting an item). `event` is the cancelable
      *  `statechange`; `detail.next`/`detail.prev` are the requested/previous open
@@ -40,6 +44,15 @@ export interface MenuProps extends BaseProps {
         next: boolean;
         prev: boolean;
     }) => void;
+    /** Combobox-mode cursor report (raw element event). Fires when the active
+     *  option changes as arrow keys move the cursor while focus stays in a
+     *  `[data-menu-search]` filter field; `detail.id` is the active option's `id`
+     *  (`null` when none). The reactive layer that owns the field reflects this
+     *  onto its `aria-activedescendant` — the element can't write that light-DOM
+     *  attribute itself. Passed straight through to the element. */
+    onactivedescendant?: (e: CustomEvent<{
+        id: string | null;
+    }>) => void;
     /** The menu's contents: `MenuItem`, `MenuSeparator`, `MenuGroup`, or any
      *  custom element. */
     children?: React.ReactNode;
@@ -70,4 +83,4 @@ export interface MenuProps extends BaseProps {
  * </Menu>
  * ```
  */
-export declare const Menu: ({ placement, context, coord, nohover, offset, open, onStateChange, className, children, ...rest }: MenuProps) => any;
+export declare const Menu: ({ placement, context, coord, nohover, offset, open, onStateChange, round, className, style, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -1,5 +1,5 @@
 import { jsx } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange } from "../anta_helpers";
+import { nativeStateChange, roundStyle } from "../anta_helpers";
 const Menu = ({
   placement,
   context,
@@ -8,7 +8,9 @@ const Menu = ({
   offset,
   open,
   onStateChange,
+  round,
   className,
+  style,
   children,
   ...rest
 }) => {
@@ -23,15 +25,17 @@ const Menu = ({
       state: open === void 0 ? void 0 : open ? "open" : "closed",
       onstatechange: onStateChange ? (e) => {
         const { event, detail } = nativeStateChange(e);
-        if (detail)
+        if (detail && (detail.next === "open" || detail.next === "closed"))
           onStateChange(event, {
             next: detail.next === "open",
             prev: detail.prev === "open"
           });
       } : void 0,
+      round: round ? "" : void 0,
       role: "menu",
       "aria-orientation": "vertical",
       class: className,
+      style: roundStyle(round, "--menu-round", style),
       ...rest,
       children
     }

package/dist/components/MenuItem.d.ts

@@ -3,8 +3,14 @@ import type { IconShape } from '../elements/a-icon.shapes';
 export interface MenuItemProps extends BaseProps {
     /** Leading icon shape. */
     icon?: IconShape;
-    /** The item's text. Omit and pass `children` for richer content. */
-    label?: string;
+    /** The item's text. Usually a string, but any node is accepted — e.g. a filtered
+     *  `Select` bolds the matched substring. Omit and pass `children` for richer
+     *  content. */
+    label?: React.ReactNode;
+    /** Secondary text under the label — explanatory copy, like `RadioGroup`'s
+     *  option `hint`. Requires `label` (it stacks in a column beneath it). Muted
+     *  (`--text-3`) and tracks the row's `tone`. A string, or any node. */
+    hint?: React.ReactNode;
     /** A trailing keyboard-shortcut hint, e.g. `"⌘E"`. */
     kbd?: string;
     /** A trailing icon. On a `submenu` item this **overrides** the default
@@ -13,10 +19,45 @@ export interface MenuItemProps extends BaseProps {
     iconTrailing?: IconShape;
     /** Disable the item: greyed out, not focusable for activation, no close. */
     disabled?: boolean;
-    /** Semantic tone — colors the label, icon, and hover tint. `critical` is the
-     *  destructive action; `neutral` (the default) is the standard gray.
+    /** Mark the item as selected. On a plain row (no `selectionIndicator`) this is
+     *  a persistent background tint, the same resting fill a pressed row shows. On a
+     *  checkable row (`selectionIndicator` set) it instead drives the leading
+     *  `checkbox` / `radio` indicator and the row's `aria-checked`. */
+    selected?: boolean;
+    /** Turn the row into a checkable item, driven by `selected` (the row stays the
+     *  control and carries `aria-checked`):
+     *  - `'checkbox'` → `role="menuitemcheckbox"`, a leading passive `<a-checkbox>`
+     *    (before `icon`); the tint is dropped (the box carries state).
+     *  - `'radio'` → `role="menuitemradio"`, a leading passive `<a-radio>`; tint dropped.
+     *  - `'check'` → `role="menuitemradio"`, a trailing check glyph on the selected
+     *    row *and* the background tint (the canonical single-select look).
+     *  Omit for a plain row (the default). */
+    selectionIndicator?: 'checkbox' | 'radio' | 'check';
+    /** Only meaningful with `selectionIndicator="checkbox"`: render the box in the
+     *  mixed state (`aria-checked="mixed"`) — e.g. a "Select all" row when some but
+     *  not all of its options are selected. */
+    indeterminate?: boolean;
+    /** Replace the built-in selection-indicator *visual* with your own node,
+     *  rendered at the **leading** edge (where the checkbox / radio sit). Pair with
+     *  `selectionIndicator` to keep the semantics — the row stays the control and
+     *  carries `role` + `aria-checked`; only the drawn mark changes. Suppresses the
+     *  built-in checkbox / radio and the trailing `check` glyph. The node is made
+     *  passive (aria-hidden, no pointer events) so the row owns the click. */
+    indicator?: React.ReactNode;
+    /** Semantic tone — colors the label, icon, and hover/selected tint (and the
+     *  `checkbox`/`radio` indicator, which adopts it). A named tone, or any literal
+     *  CSS color (`'#ff1493'`, `'rebeccapurple'`) for a one-off custom tone whose
+     *  hue + chroma are kept while the lightness is pinned to match the brand text.
+     *  `critical` is the destructive action; `neutral` (the default) is the standard
+     *  gray.
      *  @defaultValue neutral */
-    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Like `tone`, but applied only while the row is `selected` — an unselected row
+     *  stays neutral. The whole selected row (label, icon, tint, and the `checkbox` /
+     *  `radio` indicator) takes the tone. Same value set as `tone`; on a selected row
+     *  `toneSelected` wins over `tone` when both are set.
+     *  @defaultValue neutral */
+    toneSelected?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Marks this item as a submenu parent: adds the trailing chevron,
      *  `aria-haspopup="menu"`, and an `aria-expanded` baseline (kept in sync by
      *  the nested menu). Nest the flyout as a `<Menu>` child. */
@@ -32,7 +73,7 @@ export interface MenuItemProps extends BaseProps {
      *  `{ value, label }` detail. */
     onSelect?: (event: any, detail: {
         value?: string | number;
-        label?: string;
+        label?: React.ReactNode;
     }) => void;
     /** Item content. With `label` set, children are extra content — most
      *  notably the nested `<Menu>` for a submenu parent. */
@@ -58,4 +99,4 @@ export interface MenuItemProps extends BaseProps {
  * </MenuItem>
  * ```
  */
-export declare const MenuItem: ({ icon, label, kbd, iconTrailing, disabled, tone, submenu, value, onSelect, className, children, ...rest }: MenuItemProps) => any;
+export declare const MenuItem: ({ icon, label, hint, kbd, iconTrailing, disabled, selected, selectionIndicator, indeterminate, indicator, tone, toneSelected, submenu, value, onSelect, className, style, children, ...rest }: MenuItemProps) => any;

package/dist/components/MenuItem.js

@@ -1,46 +1,104 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { toneStyle } from "../anta_helpers";
 const MenuItem = ({
   icon,
   label,
+  hint,
   kbd,
   iconTrailing,
   disabled,
+  selected,
+  selectionIndicator,
+  indeterminate,
+  indicator,
   tone,
+  toneSelected,
   submenu,
   value,
   onSelect,
   className,
+  style,
   children,
   ...rest
 }) => {
+  const checkable = selectionIndicator === "checkbox" || selectionIndicator === "radio" || selectionIndicator === "check";
+  const role = selectionIndicator === "checkbox" ? "menuitemcheckbox" : selectionIndicator === "radio" || selectionIndicator === "check" ? "menuitemradio" : "menuitem";
+  const ariaChecked = !checkable ? void 0 : selectionIndicator === "checkbox" && indeterminate ? "mixed" : selected ? "true" : "false";
+  const keepTint = selected && (selectionIndicator === void 0 || selectionIndicator === "check");
+  const effectiveTone = selected && toneSelected || tone;
+  const toneAttr = effectiveTone && effectiveTone !== "neutral" ? effectiveTone : void 0;
   return /* @__PURE__ */ jsxs(
     "a-menu-item",
     {
-      role: "menuitem",
+      role,
       tabIndex: 0,
       disabled: disabled ? "" : void 0,
-      tone: tone && tone !== "neutral" ? tone : void 0,
+      selected: keepTint ? "" : void 0,
+      "aria-checked": ariaChecked,
+      tone: toneAttr,
+      style: toneStyle(effectiveTone, "--menu-item-tone-source", style),
       submenu: submenu ? "" : void 0,
       "aria-haspopup": submenu ? "menu" : void 0,
-      "aria-expanded": submenu ? "false" : void 0,
       "aria-disabled": disabled ? "true" : void 0,
-      onClick: disabled || !onSelect ? void 0 : (e) => {
-        if (submenu) return;
-        const t = e.target;
-        if (t?.closest?.("a-menu-item") !== e.currentTarget) return;
-        onSelect(e, { value, label });
-      },
+      onmenuselect: onSelect ? (e) => onSelect(e, { value, label }) : void 0,
       class: className,
       ...rest,
       children: [
+        indicator != null ? (
+          // `min-height: 1lh` makes the wrapper one text line tall and centres the node
+          // in it, so a small indicator aligns with the label's first line in a hinted
+          // (top-aligned) row instead of riding at the top.
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              "data-indicator": "",
+              style: { flex: "none", display: "inline-flex", alignItems: "center", minHeight: "1lh", pointerEvents: "none" },
+              children: indicator
+            }
+          )
+        ) : selectionIndicator === "checkbox" ? /* @__PURE__ */ jsx(
+          "a-checkbox",
+          {
+            "aria-hidden": "true",
+            state: indeterminate ? "indeterminate" : selected ? "checked" : "unchecked",
+            tone: toneAttr,
+            style: toneStyle(effectiveTone, "--checkbox-tone-source")
+          }
+        ) : selectionIndicator === "radio" ? (
+          // Real boolean, not the ''/undefined presence form: `a-radio` has a
+          // `selected` *property* setter (`applyState(!!on)`), so Preact routes the
+          // prop through it — `''` would read as false and never select. A boolean
+          // drives the property correctly and clears stale state on deselect. (The
+          // checkbox above is safe: its `state` is attribute-only, no property.)
+          /* @__PURE__ */ jsx(
+            "a-radio",
+            {
+              "aria-hidden": "true",
+              selected: !!selected,
+              tone: toneAttr,
+              style: toneStyle(effectiveTone, "--radio-tone-source")
+            }
+          )
+        ) : null,
         icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
-        label != null && /* @__PURE__ */ jsx("a-menu-item-label", { children: label }),
+        label != null && (hint != null ? (
+          // A hint stacks under the label in a column; the icon / kbd / trailing
+          // icon stay in the row (the item's `align-items: center` centers them
+          // against the two-line block).
+          /* @__PURE__ */ jsxs("a-menu-item-text", { children: [
+            /* @__PURE__ */ jsx("a-menu-item-label", { children: label }),
+            /* @__PURE__ */ jsx("a-menu-item-hint", { children: hint })
+          ] })
+        ) : /* @__PURE__ */ jsx("a-menu-item-label", { children: label })),
+        children,
         kbd && /* @__PURE__ */ jsx("kbd", { children: kbd }),
-        /* @__PURE__ */ (() => {
-          const trailing = submenu ? iconTrailing ?? "chevron-right" : iconTrailing;
+        (() => {
+          let trailing = submenu ? iconTrailing ?? "chevron-right" : iconTrailing;
+          if (!submenu && !iconTrailing && selectionIndicator === "check" && indicator == null)
+            trailing = selected ? "check" : "blank";
           return trailing ? /* @__PURE__ */ jsx("a-icon", { shape: trailing, "aria-hidden": "true" }) : null;
-        })(),
-        children
+        })()
       ]
     }
   );

package/dist/components/MenuSeparator.d.ts

@@ -1,14 +1,25 @@
 import type { BaseProps } from '../general_types';
 export interface MenuSeparatorProps extends BaseProps {
+    /** Optional caption. With content, the separator renders as a small muted text
+     *  row — a group / subsection name, or a utility message like `Loading…` — instead
+     *  of a line, and the wrapper flips it to an `aria-live="polite"` status region
+     *  (`role="status"`) so a changing message is announced. Empty, it's a plain divider. */
+    children?: React.ReactNode;
 }
 /**
- * MenuSeparator — a thin divider between groups of `MenuItem`s.
+ * MenuSeparator — a divider between groups of `MenuItem`s, or a small caption row.
+ *
+ * Empty, it's a thin line. Given text, it becomes a muted caption (a group name or
+ * a status message) and turns into an `aria-live="polite"` region — this is what
+ * `Select`'s `renderEmpty` uses for its "no results" / "loading" messages.
  *
  * @example
  * ```tsx
  * <MenuItem label="Edit" />
  * <MenuSeparator />
  * <MenuItem tone="critical" label="Delete" />
+ *
+ * <MenuSeparator>No results</MenuSeparator>
  * ```
  */
-export declare const MenuSeparator: ({ className, ...rest }: MenuSeparatorProps) => any;
+export declare const MenuSeparator: ({ className, children, ...rest }: MenuSeparatorProps) => any;