@antadesign/anta 0.3.4 → 0.3.6

package/dist/anta_helpers.d.ts

@@ -22,6 +22,16 @@ export declare function nativeStateChange<D>(e: CustomEvent<D> | {
     event: CustomEvent<D>;
     detail?: D;
 };
+export declare const IS_MAC: boolean;
+/** Default row hint teaching the Alt/⌥-click "select only this" accelerator on
+ *  bulk-select rows (`Select` multiple, `SelectFaceted` multiple facets). Shared
+ *  so the wording stays identical across both. */
+export declare const ISOLATE_HINT: string;
+/** Parse an open/closed `state` / `default-state` attribute — the shared
+ *  open-state vocabulary (`a-dialog`, `a-expander`, …). Anything but the literal
+ *  `'open'` is `'closed'`, so an absent / malformed attribute reads closed. Kept
+ *  here so the two elements can't drift on how the token is parsed. */
+export declare function parseOpenState(v: string | null): 'open' | 'closed';
 /** The six named tones every toned component shares. Anything else is a literal
  *  CSS colour the element resolves through its `--{component}-tone-source` var. */
 export declare const NAMED_TONES: Set<string>;

package/dist/anta_helpers.js

@@ -16,6 +16,11 @@ function nativeStateChange(e) {
   const event = "nativeEvent" in e ? e.nativeEvent : e;
   return { event, detail: event?.detail };
 }
+const IS_MAC = typeof navigator !== "undefined" && /Mac|iPhone|iPad/i.test(navigator.userAgent || "");
+const ISOLATE_HINT = IS_MAC ? "\u2325+Click to select only this" : "Alt+Click to select only this";
+function parseOpenState(v) {
+  return v === "open" ? "open" : "closed";
+}
 const NAMED_TONES = /* @__PURE__ */ new Set([
   "brand",
   "neutral",
@@ -105,6 +110,8 @@ class SelectableChildElement extends HTMLElementBase {
 }
 export {
   HTMLElementBase,
+  ISOLATE_HINT,
+  IS_MAC,
   NAMED_TONES,
   SelectableChildElement,
   anchorRect,
@@ -112,6 +119,7 @@ export {
   isInsideOpenMenu,
   isMenuOpen,
   nativeStateChange,
+  parseOpenState,
   roundStyle,
   setMenuPresence,
   toneStyle,

package/dist/components/Calendar.d.ts

@@ -61,8 +61,9 @@ export interface CalendarProps extends Omit<BaseProps, "children" | "onChange">
  * `<Calendar>` — a single-date month grid you pick a day from, **composed from
  * Anta components in light DOM** (nothing is hidden in a shadow root): days and
  * the prev/next chevrons are `<Button>`s, so they inherit the design system's
- * states for free — a selected day is literally a `secondary` Button in its
- * `selected` state. All date math runs on the Temporal engine
+ * states for free — a selected day is literally a `tertiary` Button in its
+ * `selected` state, toned `brand` so the active date reads in the brand color.
+ * All date math runs on the Temporal engine
  * (`@antadesign/anta` exports `buildMonth` & friends), and the value is an ISO
  * `YYYY-MM-DD` string.
  *

package/dist/components/Calendar.js

@@ -38,11 +38,21 @@ const Calendar = ({
   const [cursor, setCursor] = useState(
     () => clampDate(parseISODate(value ?? defaultValue) ?? today, minD, maxD)
   );
+  const [lastSyncedValue, setLastSyncedValue] = useState(value);
+  let effectiveCursor = cursor;
+  if (value !== lastSyncedValue) {
+    setLastSyncedValue(value);
+    const d = parseISODate(value);
+    if (d) {
+      effectiveCursor = clampDate(d, minD, maxD);
+      setCursor(effectiveCursor);
+    }
+  }
   const [focusReq, setFocusReq] = useState(null);
   const [jumpOpen, setJumpOpen] = useState(false);
   const headingId = useId();
-  const month = buildMonth({ anchor: cursor, locale: resolvedLocale, min: minD, max: maxD, selected, today });
-  const cursorIso = cursor.toString();
+  const month = buildMonth({ anchor: effectiveCursor, locale: resolvedLocale, min: minD, max: maxD, selected, today });
+  const cursorIso = effectiveCursor.toString();
   const [lastFocusSignal, setLastFocusSignal] = useState(focusSignal);
   if (focusSignal !== lastFocusSignal) {
     setLastFocusSignal(focusSignal);
@@ -73,24 +83,25 @@ const Calendar = ({
   const jumpItems = useMemo(() => {
     const monthItem = (y, i) => {
       const m = i + 1;
+      const isCurrent = y === cursor.year && m === cursor.month;
       return /* @__PURE__ */ jsx(
         MenuItem,
         {
           label: monthNames[i],
-          selectionIndicator: "check",
-          selected: y === cursor.year && m === cursor.month,
+          selected: isCurrent,
           disabled: monthOutOfRange(y, m) || void 0,
           "data-menu-open": "",
           onSelect: () => {
             pickMonth(y, m);
             setJumpOpen(false);
-          }
+          },
+          children: isCurrent && /* @__PURE__ */ jsx("span", { className: "jump-dot", "aria-hidden": "true" })
         },
         `${y}-${m}`
       );
     };
     return years.length === 1 ? monthNames.map((_, i) => monthItem(years[0], i)) : years.map((y) => /* @__PURE__ */ jsxs(MenuItem, { submenu: true, label: String(y), selected: y === cursor.year, children: [
-      y === cursor.year && /* @__PURE__ */ jsx("span", { className: "year-dot", "aria-hidden": "true" }),
+      y === cursor.year && /* @__PURE__ */ jsx("span", { className: "jump-dot", "aria-hidden": "true" }),
       /* @__PURE__ */ jsx(Menu, { children: monthNames.map((_, i) => monthItem(y, i)) })
     ] }, y));
   }, [monthNames, cursor.year, cursor.month, minYear, maxYear, min, max, disabled]);
@@ -192,7 +203,7 @@ const Calendar = ({
                 `wd${i}`
               )),
               month.weeks.flat().map((d) => {
-                const variant = d.today && !d.selected ? { priority: "secondary" } : { priority: "tertiary", selected: d.selected };
+                const variant = d.today && !d.selected ? { priority: "secondary" } : { priority: "tertiary", selected: d.selected, tone: d.selected ? "brand" : void 0 };
                 return /* @__PURE__ */ jsxs(
                   Button,
                   {

package/dist/components/Dialog.d.ts

@@ -0,0 +1,92 @@
+import type { BaseProps } from "../general_types";
+/** Public props for the `<Dialog>` modal / drawer. `header` and `footer` are the
+ *  chrome zones; `children` is the (scrollable) body. */
+export interface DialogProps extends Omit<BaseProps, "title"> {
+    /** Header content: a title, or any node. Rendered in the top zone. Omit for a
+     *  chromeless dialog with only a body. */
+    header?: React.ReactNode;
+    /** Footer content, usually the action buttons. Rendered in the bottom zone as
+     *  a right-aligned row (wraps under pressure). Omit for none. */
+    footer?: React.ReactNode;
+    /** The dialog body. Scrolls when it overflows the available height. */
+    children?: React.ReactNode;
+    /** Placement. `center` (the default) is a centered modal; `left` / `right` /
+     *  `top` / `bottom` turn it into an edge drawer (full height for left/right,
+     *  full width for top/bottom); `fullscreen` fills the whole viewport with no
+     *  edge gap or corner radius.
+     *  @defaultValue 'center' */
+    position?: "center" | "left" | "right" | "top" | "bottom" | "fullscreen";
+    /** Whether the top-right ✕ button is present. It's one way to close the dialog,
+     *  alongside Esc, the backdrop, a `data-dialog-close` / footer action, and your
+     *  own code; `false` just removes the ✕, it doesn't make the dialog un-closable.
+     *  @defaultValue true */
+    closable?: boolean;
+    /** Turn off light-dismiss: a backdrop click and Esc no longer close the dialog.
+     *  It stays closable through explicit controls (the ✕ when `closable`, a footer
+     *  action, your own code); `persistent` isn't "un-closable", it stops an
+     *  accidental click or stray Esc from dismissing. For an alert / confirm that
+     *  should be answered deliberately. Omit for the default dismissible behavior. */
+    persistent?: boolean;
+    /** Corner radius. A side keyword — `'top'` / `'right'` / `'bottom'` / `'left'` —
+     *  rounds only that edge's two corners (at `--dialog-radius`), which pairs with
+     *  a drawer's exposed edge (a bottom sheet → `'top'`, a right drawer → `'left'`).
+     *  A `number` (px) or CSS string rounds all corners at that value; the string
+     *  may be a full `border-radius` shorthand (`'12px 12px 0 0'`). `true` rounds all
+     *  corners at `--dialog-radius`. Omit for the position default: `center` is
+     *  rounded, drawers and `fullscreen` are square. */
+    round?: boolean | number | "top" | "right" | "bottom" | "left" | (string & {});
+    /** Controlled open state. When provided, the consumer owns open/close: the
+     *  dialog only follows this prop, and every user dismiss (Esc, backdrop, close
+     *  button) *requests* a change via `onStateChange` (reject by not updating).
+     *  Leave undefined for uncontrolled. */
+    open?: boolean;
+    /** Initial open state for the uncontrolled case (read once on mount). */
+    defaultOpen?: boolean;
+    /** Uncontrolled trigger name. Any element with `data-dialog-open="{name}"`
+     *  opens this dialog, `data-dialog-close="{name}"` closes it. A convenience for
+     *  triggers rendered elsewhere; ignored in controlled mode. */
+    name?: string;
+    /** Fired before the open state changes, on every user open or dismiss.
+     *  `event` is the cancelable `statechange`: call `event.preventDefault()` to
+     *  veto an *uncontrolled* transition. `detail.next` is the requested open
+     *  state, `detail.prev` the current one (booleans). In controlled mode, apply
+     *  `detail.next` to `open` to accept, or do nothing to reject. */
+    onStateChange?: (event: CustomEvent, detail: {
+        next: boolean;
+        prev: boolean;
+    }) => void;
+}
+/**
+ * `<Dialog>` — a modal dialog (or edge drawer, via `position`), built on a
+ * native `<dialog>` inside `<a-dialog>` — so the top layer, focus trap, focus
+ * return, backdrop, and Esc all come from the platform.
+ *
+ * A pure, stateless pass-through: the element owns all interaction (open/close,
+ * dismiss, focus), so the wrapper holds no state and grabs no ref — it only maps
+ * props to attributes and drops content into the `header` / body / `footer` /
+ * `close` slots.
+ *
+ * Uncontrolled (`defaultOpen`, or the `name` trigger convenience): the element
+ * owns open/close. Controlled (`open` + `onStateChange`): the wrapper emits
+ * `state="open"|"closed"`; the element treats the attribute as the source of
+ * truth, and every user dismiss only *requests* a change (a consumer can reject
+ * it). See STATEFUL-COMPONENTS.md.
+ *
+ * Requires `@antadesign/anta/elements` to be imported (client-side only) to
+ * register the underlying custom element.
+ *
+ * @example Controlled
+ * ```tsx
+ * const [open, setOpen] = useState(false)
+ * <Button onClick={() => setOpen(true)}>Open</Button>
+ * <Dialog
+ *   open={open}
+ *   onStateChange={(_e, { next }) => setOpen(next)}
+ *   header="Delete project?"
+ *   footer={<><Button onClick={() => setOpen(false)}>Cancel</Button><Button priority="primary" tone="critical">Delete</Button></>}
+ * >
+ *   This action cannot be undone.
+ * </Dialog>
+ * ```
+ */
+export declare const Dialog: ({ header, footer, position, closable, persistent, round, open, defaultOpen, name, onStateChange, className, style, children, ...rest }: DialogProps) => any;

package/dist/components/Dialog.js

@@ -0,0 +1,71 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { nativeStateChange, roundStyle } from "../anta_helpers";
+import { Button } from "./Button";
+const ROUND_SIDES = /* @__PURE__ */ new Set(["top", "right", "bottom", "left"]);
+const Dialog = ({
+  header,
+  footer,
+  position,
+  closable,
+  persistent,
+  round,
+  open,
+  defaultOpen,
+  name,
+  onStateChange,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const controlled = open !== void 0;
+  const roundSide = typeof round === "string" && ROUND_SIDES.has(round) ? round : void 0;
+  return /* @__PURE__ */ jsxs(
+    "a-dialog",
+    {
+      state: controlled ? open ? "open" : "closed" : void 0,
+      "default-state": !controlled && defaultOpen ? "open" : void 0,
+      position: position && position !== "center" ? position : void 0,
+      persistent: persistent ? "" : void 0,
+      round: roundSide ?? (round ? "" : void 0),
+      name: !controlled ? name : void 0,
+      onstatechange: onStateChange ? (e) => {
+        const { event, detail } = nativeStateChange(e);
+        if (detail)
+          onStateChange(event, {
+            next: detail.next === "open",
+            prev: detail.prev === "open"
+          });
+      } : void 0,
+      class: className,
+      style: roundStyle(roundSide ? void 0 : round, "--dialog-round", style),
+      ...rest,
+      children: [
+        closable !== false && // A real <a-button> (light DOM → fully styled, keyboard-focusable) in the
+        // element's `close` slot. It fires the bubbling `closerequest` event via
+        // a-button's global listener, so closing works even without framework
+        // hydration; the element turns that into a close request.
+        // CONTRACT: `data-custom-event` below MUST match `CLOSE_TRIGGER` in the
+        // element (src/elements/a-dialog.ts). Duplicated, not shared — importing
+        // the element module here would self-register it and break the
+        // wrapper/element decoupling. Rename in both places.
+        /* @__PURE__ */ jsx("span", { slot: "close", style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            priority: "tertiary",
+            size: "large",
+            icon: "x",
+            "aria-label": "Close",
+            "data-custom-event": "closerequest"
+          }
+        ) }),
+        header != null && /* @__PURE__ */ jsx("div", { slot: "header", children: header }),
+        children,
+        footer != null && /* @__PURE__ */ jsx("span", { slot: "footer", style: { display: "contents" }, children: footer })
+      ]
+    }
+  );
+};
+export {
+  Dialog
+};

package/dist/components/Input.d.ts

@@ -146,6 +146,9 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     onFocus?: (e: any) => void;
     /** Fires when the field loses focus. */
     onBlur?: (e: any) => void;
+    /** ARIA `role` for the field — e.g. `combobox` when the input drives a
+     *  suggestion `listbox` (see `InputAutocomplete`). Left unset by default. */
+    role?: string;
 }
 /**
  * `<Input>` — a text field. Renders an `<a-input>` web component whose real

package/dist/components/InputAutocomplete.d.ts

@@ -0,0 +1,69 @@
+import type { BaseProps } from '../general_types';
+import type { IconShape } from '../elements/a-icon.shapes';
+import type { SelectOption } from './Select';
+export interface InputAutocompleteProps extends Omit<BaseProps, 'children'> {
+    /** The suggestions: bare strings or `SelectOption`s (`value` / `label` / `hint` /
+     *  `icon` / `tone` / `disabled`). A flat list; picking one fills the field. */
+    suggestions: (string | SelectOption)[];
+    /** Controlled value: the field's text, a **free** string not constrained to a
+     *  suggestion. Leave undefined for uncontrolled. */
+    value?: string;
+    /** Initial value for the uncontrolled case (the wrapper then owns it). */
+    defaultValue?: string;
+    /** Fires as the text changes (typing, picking a suggestion, or clearing) with
+     *  the new field text. */
+    onValueChange?: (value: string) => void;
+    /** Fires only when a suggestion is chosen, with that option. */
+    onSelect?: (option: SelectOption) => void;
+    /** How suggestions match the text. `true` uses the built-in case-insensitive
+     *  substring match on `value` / `label` / `hint`; a function `(option, query) =>
+     *  boolean` does custom matching; `false` shows `suggestions` verbatim so you
+     *  can filter them yourself (async / remote).
+     *  @defaultValue true */
+    filter?: boolean | ((option: SelectOption, query: string) => boolean);
+    /** Placeholder text. */
+    placeholder?: string;
+    /** Field size.
+     *  @defaultValue medium */
+    size?: 'small' | 'medium' | 'large';
+    /** Validation status. */
+    status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Status icon override, or `false` to drop it. */
+    statusIcon?: IconShape | (string & {}) | false;
+    /** Custom accent colour — a named tone or any CSS colour. */
+    tone?: string;
+    /** Show a clear button while the field has text. */
+    clearable?: boolean;
+    /** Form field name. */
+    name?: string;
+    /** Disable the field. */
+    disabled?: boolean;
+    /** Field label. */
+    label?: React.ReactNode;
+    /** Hint under the field. */
+    hint?: React.ReactNode;
+    /** Leading adornment inside the field. */
+    leading?: React.ReactNode;
+    /** Trailing adornment inside the field. */
+    trailing?: React.ReactNode;
+}
+/**
+ * `<InputAutocomplete>` — a text field whose value is a free string, with a
+ * suggestion dropdown that assists without constraining. Typing something not in
+ * the list is valid and stays the value; picking a suggestion just fills the
+ * field. For a value that MUST be one of the options, use `Select` with `filter`.
+ *
+ * Controlled (`value` + `onValueChange`) or uncontrolled (`defaultValue`).
+ * Requires `@antadesign/anta/elements` (client-side only).
+ *
+ * @example
+ * ```tsx
+ * <InputAutocomplete
+ *   label="City"
+ *   suggestions={['Berlin', 'Bogotá', 'Boston']}
+ *   value={city}
+ *   onValueChange={setCity}
+ * />
+ * ```
+ */
+export declare const InputAutocomplete: (props: InputAutocompleteProps) => any;

package/dist/components/InputAutocomplete.js

@@ -0,0 +1,95 @@
+import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { useState, useMemo, useId } from "../jsx-runtime";
+import { nativeStateChange } from "../anta_helpers";
+import { normalizeOpt, matchQueryRegex, matchesQuery, highlight } from "./select-options";
+import { Input } from "./Input";
+import { Menu } from "./Menu";
+import { MenuItem } from "./MenuItem";
+const InputAutocomplete = (props) => {
+  const {
+    suggestions,
+    value,
+    defaultValue,
+    onValueChange,
+    onSelect,
+    filter = true,
+    ...rest
+  } = props;
+  const rid = useId();
+  const controlled = value !== void 0;
+  const [internal, setInternal] = useState(defaultValue ?? "");
+  const text = controlled ? value : internal;
+  const [open, setOpen] = useState(false);
+  const [activeId, setActiveId] = useState(null);
+  const options = useMemo(() => suggestions.map(normalizeOpt), [suggestions]);
+  const custom = typeof filter === "function";
+  const queryRe = filter !== false && !custom ? matchQueryRegex(text) : null;
+  const visible = custom ? options.filter((o) => filter(o, text)) : options.filter((o) => matchesQuery(o, queryRe));
+  const menuOpen = open && visible.length > 0;
+  const setText = (next) => {
+    if (!controlled) setInternal(next);
+    onValueChange?.(next);
+  };
+  const pick = (opt) => {
+    setText(opt.value);
+    onSelect?.(opt);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      Input,
+      {
+        ...rest,
+        value: text,
+        "data-menu-search": "",
+        role: "combobox",
+        "aria-haspopup": "listbox",
+        "aria-controls": `${rid}-list`,
+        "aria-expanded": menuOpen ? "true" : "false",
+        "aria-autocomplete": "list",
+        "aria-activedescendant": menuOpen && activeId ? activeId : void 0,
+        onFocus: () => setOpen(true),
+        onInput: (e) => {
+          setText(e.currentTarget.value);
+          setOpen(true);
+        },
+        onKeyDown: (e) => {
+          if (e.key === "Enter") setOpen(false);
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        id: `${rid}-list`,
+        role: "listbox",
+        open: menuOpen,
+        onStateChange: (_e, { next }) => {
+          setOpen(next);
+          if (!next) setActiveId(null);
+        },
+        onactivedescendant: (e) => setActiveId(nativeStateChange(e).detail?.id ?? null),
+        children: visible.map((opt, i) => /* @__PURE__ */ jsx(
+          MenuItem,
+          {
+            id: `${rid}-o${i}`,
+            role: "option",
+            "aria-selected": activeId === `${rid}-o${i}` ? "true" : "false",
+            icon: opt.icon,
+            label: highlight(opt.label ?? opt.value, queryRe),
+            hint: opt.hint ? highlight(opt.hint, queryRe) : opt.hint,
+            tone: opt.tone,
+            disabled: opt.disabled,
+            value: opt.value,
+            onMouseDown: (e) => e.preventDefault(),
+            onSelect: () => pick(opt)
+          },
+          `${rid}-${opt.value}-${i}`
+        ))
+      }
+    )
+  ] });
+};
+export {
+  InputAutocomplete
+};

package/dist/components/InputDate.d.ts

@@ -45,9 +45,10 @@ export interface InputDateProps extends Omit<BaseProps, 'children'> {
     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.
+    /** Leading icon at the start of the field — the calendar affordance. Pass
+     *  another shape to change it, or `false` to drop it.
      *  @defaultValue calendar-days */
-    icon?: IconShape;
+    icon?: IconShape | false;
     /** 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