@antadesign/anta 0.3.2 → 0.3.3

package/dist/components/Button.js

@@ -1,5 +1,5 @@
 import { Fragment, jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { toneStyle, wrapLabel } from "../anta_helpers";
+import { toneStyle, roundStyle, wrapLabel } from "../anta_helpers";
 const Button = ({
   priority,
   tone,
@@ -12,6 +12,7 @@ const Button = ({
   loading,
   disabled,
   selected,
+  round,
   href,
   type,
   form,
@@ -21,7 +22,7 @@ const Button = ({
   ...rest
 }) => {
   const toneAttr = tone || void 0;
-  const computedStyle = toneStyle(toneAttr, "--button-tone-source", style);
+  const computedStyle = roundStyle(round, "--button-round", toneStyle(toneAttr, "--button-tone-source", style));
   const isIconOnly = icon != null && label == null && children == null && iconTrailing == null;
   const sharedAttrs = {
     // `<a-button>` is a custom element with no implicit ARIA role, so AT would
@@ -41,6 +42,7 @@ const Button = ({
     // presence (`[disabled]`, not `[disabled="true"]`), so any present form
     // works. (ARIA attributes below stay string-valued — ARIA needs "true".)
     paddingless: paddingless ? "" : void 0,
+    round: round ? "" : void 0,
     loading: loading ? "" : void 0,
     disabled: disabled ? "" : void 0,
     selected: selected ? "" : void 0,
@@ -68,6 +70,7 @@ const Button = ({
       "a",
       {
         href,
+        "data-anta": "",
         ...sharedAttrs,
         ...rest,
         children: inner

package/dist/components/Calendar.d.ts

@@ -0,0 +1,80 @@
+import type { BaseProps } from "../general_types";
+type StateReason = "user" | "reset" | "restore";
+type StateDetail = {
+    next: string | null;
+    prev: string | null;
+    reason: StateReason;
+};
+type StateChangeEvent = CustomEvent<StateDetail>;
+/** Snapshot passed as the 2nd argument to `onValueChange` — the new ISO date plus
+ *  the field name (mirrors `Input` / `RadioGroup`). */
+export interface CalendarChangeAttrs {
+    value: string | null;
+    name?: string;
+}
+/** Public props for `<Calendar>` — the single-date month grid. */
+export interface CalendarProps extends Omit<BaseProps, "children" | "onChange"> {
+    /** Controlled selected date — ISO `YYYY-MM-DD`. When provided, the consumer owns
+     *  selection: the grid follows this prop and a pick only *requests* a change via
+     *  `onStateChange`. Leave undefined for uncontrolled. */
+    value?: string;
+    /** Initial selected date for the uncontrolled case (ISO `YYYY-MM-DD`). */
+    defaultValue?: string;
+    /** Earliest selectable date (ISO `YYYY-MM-DD`) — earlier days render disabled. */
+    min?: string;
+    /** Latest selectable date (ISO `YYYY-MM-DD`) — later days render disabled. */
+    max?: string;
+    /** BCP-47 locale tag driving first-day-of-week, weekday, and month names.
+     *  @defaultValue navigator.language */
+    locale?: string;
+    /** Form field name — the selected ISO date submits under this key. */
+    name?: string;
+    /** Size of the whole calendar — scales the day cells, the chevrons, and the
+     *  weekday / month-heading type together (uses Button's `small` / `medium` /
+     *  `large` scale).
+     *  @defaultValue 'medium' */
+    size?: "small" | "medium" | "large";
+    /** Disable the whole calendar (not focusable or selectable). */
+    disabled?: boolean;
+    /** Accessible name for the grid (defaults to the visible month heading). */
+    "aria-label"?: string;
+    /** Fired whenever the selection changes — event-first. `detail` is
+     *  `{ next, prev, reason }`: `next` / `prev` are ISO date strings (`null` = none);
+     *  `reason` is `'user'` | `'reset'` | `'restore'`. A `'user'` pick fires *before*
+     *  applying and is **cancelable** — `event.preventDefault()` vetoes it
+     *  (uncontrolled), or in controlled mode answer by updating `value`. `'reset'` /
+     *  `'restore'` are not cancelable. */
+    onStateChange?: (event: StateChangeEvent, detail: StateDetail) => void;
+    /** Fired *after* the selection changes (post-apply). Not cancelable; for a
+     *  controlled calendar it fires once you've updated `value`. */
+    onChange?: (event: Event) => void;
+    /** Like `onChange`, but with a `{ value, name }` snapshot — the ergonomic
+     *  "just give me the new date" callback (mirrors `Input`). */
+    onValueChange?: (event: Event, attrs: CalendarChangeAttrs) => void;
+}
+/**
+ * `<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
+ * (`@antadesign/anta` exports `buildMonth` & friends), and the value is an ISO
+ * `YYYY-MM-DD` string.
+ *
+ * The grid lives in a form-associated `<a-calendar>` element (which owns the
+ * submitted value + reset/restore); the wrapper owns view-month, selection,
+ * keyboard, and roving `tabindex` — the `RadioGroup` model. The month switcher
+ * is a sibling rendered *outside* the grid, so it can be extended (month/year
+ * pickers) independently.
+ *
+ * Controlled (`value` + `onStateChange`) or uncontrolled (`defaultValue`).
+ * Requires `@antadesign/anta/elements` (client-side only).
+ *
+ * @remarks Not SSR-safe. It reads the current date (`Temporal.Now`) and locale
+ * (`navigator.language`) at render, so a server render and the client render
+ * disagree on the highlighted "today" and on localized labels, causing a
+ * hydration mismatch. Render it client-side only (Astro `client:only`, or a
+ * dynamic import inside `useEffect`).
+ */
+export declare const Calendar: ({ value, defaultValue, min, max, locale, name, size, disabled, onStateChange, onChange, onValueChange, className, style, "aria-label": ariaLabel, ...rest }: CalendarProps) => any;
+export {};

package/dist/components/Calendar.js

@@ -0,0 +1,220 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import cn from "clsx";
+import { Temporal } from "temporal-polyfill";
+import { useId, useMemo, useState } from "../jsx-runtime";
+import { nativeStateChange } from "../anta_helpers";
+import { Button } from "./Button";
+import { Menu } from "./Menu";
+import { MenuItem } from "./MenuItem";
+import { Tooltip } from "./Tooltip";
+import { buildMonth, clampDate, parseISODate } from "../calendar-core";
+const Calendar = ({
+  value,
+  defaultValue,
+  min,
+  max,
+  locale,
+  name,
+  size,
+  disabled,
+  onStateChange,
+  onChange,
+  onValueChange,
+  className,
+  style,
+  "aria-label": ariaLabel,
+  ...rest
+}) => {
+  const controlled = value !== void 0;
+  const resolvedLocale = locale || (typeof navigator !== "undefined" ? navigator.language : "en-US");
+  const minD = parseISODate(min);
+  const maxD = parseISODate(max);
+  const today = Temporal.Now.plainDateISO();
+  const [internalSelected, setInternalSelected] = useState(
+    () => parseISODate(defaultValue)
+  );
+  const selected = controlled ? parseISODate(value) : internalSelected;
+  const [cursor, setCursor] = useState(
+    () => clampDate(parseISODate(value ?? defaultValue) ?? today, minD, maxD)
+  );
+  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 minYear = minD ? minD.year : today.year - 3;
+  const maxYear = maxD ? maxD.year : today.year + 3;
+  const years = [];
+  for (let y = minYear; y <= maxYear; y++) years.push(y);
+  const monthNames = useMemo(
+    () => Array.from(
+      { length: 12 },
+      (_, i) => Temporal.PlainDate.from({ year: 2e3, month: i + 1, day: 1 }).toLocaleString(resolvedLocale, {
+        month: "long"
+      })
+    ),
+    [resolvedLocale]
+  );
+  const monthOutOfRange = (y, m) => minD != null && (y < minD.year || y === minD.year && m < minD.month) || maxD != null && (y > maxD.year || y === maxD.year && m > maxD.month);
+  const moveCursorByMonth = (delta) => {
+    if (disabled) return;
+    setCursor((c) => clampDate(c.add({ months: delta }), minD, maxD));
+  };
+  const pickMonth = (y, m) => {
+    if (disabled) return;
+    setCursor((c) => clampDate(c.with({ year: y, month: m }), minD, maxD));
+  };
+  const jumpItems = useMemo(() => {
+    const monthItem = (y, i) => {
+      const m = i + 1;
+      return /* @__PURE__ */ jsx(
+        MenuItem,
+        {
+          label: monthNames[i],
+          selectionIndicator: "check",
+          selected: y === cursor.year && m === cursor.month,
+          disabled: monthOutOfRange(y, m) || void 0,
+          "data-menu-open": "",
+          onSelect: () => {
+            pickMonth(y, m);
+            setJumpOpen(false);
+          }
+        },
+        `${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" }),
+      /* @__PURE__ */ jsx(Menu, { children: monthNames.map((_, i) => monthItem(y, i)) })
+    ] }, y));
+  }, [monthNames, cursor.year, cursor.month, minYear, maxYear, min, max, disabled]);
+  const onElementStateChange = (raw) => {
+    const { event, detail } = nativeStateChange(raw);
+    if (!detail) return;
+    onStateChange?.(event, detail);
+    if (detail.reason === "user" && (controlled || event.defaultPrevented)) return;
+    const next = parseISODate(detail.next);
+    if (!controlled) setInternalSelected(next);
+    setCursor(clampDate(next ?? cursor, minD, maxD));
+  };
+  const onElementChange = (raw) => {
+    const e = "nativeEvent" in raw ? raw.nativeEvent : raw;
+    onChange?.(e);
+    onValueChange?.(e, { value: e?.target?.value || null, name });
+  };
+  const onNavigate = (raw) => {
+    if (disabled) return;
+    const { detail } = nativeStateChange(raw);
+    const next = parseISODate(detail?.date ?? null);
+    if (!next) return;
+    const clamped = clampDate(next, minD, maxD);
+    setCursor(clamped);
+    setFocusReq((p) => ({ iso: clamped.toString(), n: (p?.n ?? 0) + 1 }));
+  };
+  const prevDisabled = disabled || minD != null && Temporal.PlainDate.compare(cursor.with({ day: 1 }).subtract({ days: 1 }), minD) < 0;
+  const nextDisabled = disabled || maxD != null && Temporal.PlainDate.compare(cursor.with({ day: 1 }).add({ months: 1 }), maxD) > 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("anta-calendar", className),
+      "data-size": size && size !== "medium" ? size : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      style,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { "data-part": "header", children: [
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              priority: "tertiary",
+              icon: "chevron-left",
+              size,
+              "aria-label": "Previous month",
+              disabled: prevDisabled,
+              onClick: () => moveCursorByMonth(-1)
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              id: headingId,
+              "data-part": "heading",
+              priority: "tertiary",
+              size,
+              "aria-live": "polite",
+              "aria-label": `${month.heading} \u2014 choose month and year`,
+              disabled: disabled || prevDisabled && nextDisabled,
+              children: month.heading
+            }
+          ),
+          /* @__PURE__ */ jsx(Menu, { placement: "bottom", open: jumpOpen, onStateChange: (_e, { next }) => setJumpOpen(next), children: jumpItems }),
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              priority: "tertiary",
+              icon: "chevron-right",
+              size,
+              "aria-label": "Next month",
+              disabled: nextDisabled,
+              onClick: () => moveCursorByMonth(1)
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "a-calendar",
+          {
+            role: "group",
+            "aria-labelledby": headingId,
+            "aria-label": ariaLabel,
+            name,
+            value: controlled ? value : void 0,
+            defaultvalue: !controlled ? defaultValue : void 0,
+            disabled: disabled ? "" : void 0,
+            "data-focus": focusReq ? `${focusReq.iso}#${focusReq.n}` : void 0,
+            onstatechange: onElementStateChange,
+            onchange: onElementChange,
+            onnavigate: onNavigate,
+            children: [
+              month.weekdays.map((w, i) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  "data-part": "weekday",
+                  "data-weekend": w.weekend ? "" : void 0,
+                  "aria-hidden": "true",
+                  children: w.narrow
+                },
+                `wd${i}`
+              )),
+              month.weeks.flat().map((d) => {
+                const variant = d.today && !d.selected ? { priority: "secondary" } : { priority: "tertiary", selected: d.selected };
+                return /* @__PURE__ */ jsxs(
+                  Button,
+                  {
+                    ...variant,
+                    size,
+                    disabled: disabled || d.disabled,
+                    tabIndex: d.iso === cursorIso ? 0 : -1,
+                    "aria-label": d.label,
+                    "aria-current": d.today ? "date" : void 0,
+                    "data-part": "day-cell",
+                    "data-date": d.iso,
+                    "data-today": d.today ? "" : void 0,
+                    "data-outside": d.outside ? "" : void 0,
+                    children: [
+                      d.day,
+                      d.today && /* @__PURE__ */ jsx(Tooltip, { children: "Today" })
+                    ]
+                  },
+                  d.iso
+                );
+              })
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  Calendar
+};

package/dist/components/Checkbox.d.ts

@@ -42,25 +42,30 @@ export interface CheckboxProps extends BaseProps {
     defaultChecked?: CheckboxValue;
     /** Disable the checkbox (no interaction, dropped from the tab order). */
     disabled?: boolean;
+    /** Round the checkbox mark to a circle (`border-radius: 999px` on the box). Pass
+     *  a `number` (px) or a CSS length string for a rounded-square mark instead. */
+    round?: boolean | number | string;
     /** Form field name. Inside a `<form>` the checkbox submits under this name,
      *  contributing `value` when checked — like a native checkbox. */
     name?: string;
     /** Value submitted with the form when checked — like a native checkbox.
      *  @defaultValue "on" */
     value?: string;
-    /** Colour of the **mark** — the checked-box fill and the unselected box border.
-     *  A named tone or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`) for a
-     *  one-off custom tone. Named tones track light/dark mode automatically via the
-     *  theme-aware role tokens; a custom colour keeps its hue + chroma and pins
-     *  lightness to the fill curve. The label + hint stay neutral — use `toneText`
-     *  to recolour those.
+    /** Colour of the **mark** in every state — the checked-box fill *and* the
+     *  unselected box border. A named tone or any literal CSS color (`'#ff1493'`,
+     *  `'rebeccapurple'`) for a one-off custom tone. Named tones track light/dark mode
+     *  automatically; a custom colour keeps its hue + chroma and pins lightness to the
+     *  fill curve. Use `toneSelected` instead to tone only the checked mark and leave
+     *  the empty box neutral. The label + hint stay neutral — recolour them in plain
+     *  CSS via the theme-aware `--text-N-{tone}` tokens.
      *  @defaultValue 'neutral' */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
-    /** Colour of the **text** — the label and hint — independent of `tone`. A named
-     *  tone or any literal CSS color. Named tones track light/dark via the theme-aware
-     *  `--text-*` role tokens. Omit to leave the text neutral.
+    /** Like `tone`, but coloured onto the **checked mark only** — the empty box stays
+     *  neutral grey until it's checked. Prefer this over `tone` when a resting tinted
+     *  border would read as a validation state. Same value set as `tone`; if both are
+     *  set, `tone` governs the off-state border and `toneSelected` the checked fill.
      *  @defaultValue 'neutral' */
-    toneText?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    toneSelected?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. small=14px, medium=16px, large=18px box.
      *  @defaultValue 'medium' */
     size?: 'small' | 'medium' | 'large';
@@ -94,5 +99,5 @@ export interface CheckboxProps extends BaseProps {
  * <Checkbox defaultChecked label="Remember me" hint="On this device" />
  * ```
  */
-export declare const Checkbox: ({ checked, defaultChecked, disabled, tone, toneText, size, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: CheckboxProps) => any;
+export declare const Checkbox: ({ checked, defaultChecked, disabled, tone, toneSelected, size, round, onStateChange, onChange, onValueChange, label, hint, className, style, children, tabIndex, ...rest }: CheckboxProps) => any;
 export {};

package/dist/components/Checkbox.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle } from "../anta_helpers";
+import { nativeStateChange, toneStyle, roundStyle } from "../anta_helpers";
 const valueToState = (v) => v === "indeterminate" ? "indeterminate" : v ? "checked" : "unchecked";
 const stateToValue = (s) => s === "indeterminate" ? "indeterminate" : s === "checked";
 const checkboxAttrsOf = (el) => ({
@@ -13,8 +13,9 @@ const Checkbox = ({
   defaultChecked,
   disabled,
   tone,
-  toneText,
+  toneSelected,
   size,
+  round,
   onStateChange,
   onChange,
   onValueChange,
@@ -26,10 +27,14 @@ const Checkbox = ({
   tabIndex,
   ...rest
 }) => {
-  const computedStyle = toneStyle(
-    toneText,
-    "--checkbox-tone-text-source",
-    toneStyle(tone, "--checkbox-tone-source", style)
+  const computedStyle = roundStyle(
+    round,
+    "--checkbox-round",
+    toneStyle(
+      toneSelected,
+      "--checkbox-tone-source",
+      toneStyle(tone, "--checkbox-tone-source", style)
+    )
   );
   const explicitAriaLabel = rest["aria-label"];
   const ariaLabel = (typeof explicitAriaLabel === "string" ? explicitAriaLabel : void 0) ?? label ?? (typeof children === "string" ? children : void 0);
@@ -59,8 +64,9 @@ const Checkbox = ({
       "default-state": defaultStateAttr,
       disabled: disabled ? "" : void 0,
       tone: tone && tone !== "neutral" ? tone : void 0,
-      "tone-text": toneText && toneText !== "neutral" ? toneText : void 0,
+      "tone-selected": toneSelected && toneSelected !== "neutral" ? toneSelected : void 0,
       size: size && size !== "medium" ? size : void 0,
+      round: round ? "" : void 0,
       tabIndex: disabled ? -1 : tabIndex ?? 0,
       onstatechange,
       onchange,

package/dist/components/Expander.d.ts

@@ -38,6 +38,12 @@ export interface ExpanderProps extends Omit<BaseProps, "title"> {
      *  expander keeps it open. `actions` stay live; disable them
      *  separately if needed. */
     disabled?: boolean;
+    /** Round corners sized to half the folded (header) height: a pill when folded,
+     *  and — when expanded — the same corner radius rather than a bigger stadium.
+     *  The element measures the header, so it tracks custom header content. Pass a
+     *  `number` (px) or CSS length string for a *fixed* radius that overrides the
+     *  measurement (and skips it) in both states. */
+    round?: boolean | number | string;
     /** Controlled open state. When provided, the consumer owns open/close:
      *  the expander only follows this prop, and clicking the summary just
      *  requests a change via `onStateChange` (so a toggle can be rejected by
@@ -71,4 +77,4 @@ export interface ExpanderProps extends Omit<BaseProps, "title"> {
  * giving real controlled semantics (a consumer can reject a toggle). See
  * STATEFUL-COMPONENTS.md.
  */
-export declare const Expander: ({ title, level, tone, priority, outdent, actions, disabled, open, defaultOpen, onStateChange, className, style, children, ...rest }: ExpanderProps) => any;
+export declare const Expander: ({ title, level, tone, priority, outdent, actions, disabled, round, open, defaultOpen, onStateChange, className, style, children, ...rest }: ExpanderProps) => any;

package/dist/components/Expander.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle } from "../anta_helpers";
+import { nativeStateChange, toneStyle, roundStyle } from "../anta_helpers";
 const Expander = ({
   title,
   level,
@@ -8,6 +8,7 @@ const Expander = ({
   outdent,
   actions,
   disabled,
+  round,
   open,
   defaultOpen,
   onStateChange,
@@ -17,7 +18,7 @@ const Expander = ({
   ...rest
 }) => {
   const controlled = open !== void 0;
-  const computedStyle = toneStyle(tone, "--expander-tone-source", style);
+  const computedStyle = roundStyle(round, "--expander-round", toneStyle(tone, "--expander-tone-source", style));
   const titleNode = typeof title === "object" && title !== null ? /* @__PURE__ */ jsx("span", { slot: "title", style: { display: "contents" }, children: title }) : /* @__PURE__ */ jsx("a-expander-summary", { slot: "title", children: title });
   return /* @__PURE__ */ jsxs(
     "a-expander",
@@ -28,6 +29,7 @@ const Expander = ({
       tone: tone && tone !== "neutral" ? tone : void 0,
       priority: priority && priority !== "secondary" ? priority : void 0,
       outdent: outdent ? "" : void 0,
+      round: round ? "" : void 0,
       disabled: disabled ? "" : void 0,
       onstatechange: onStateChange ? (e) => {
         const { event, detail } = nativeStateChange(e);

package/dist/components/Input.d.ts

@@ -47,7 +47,7 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     tone?: string;
     /** Size variant. small=24px, medium=28px, large=32px tall; the type scale and
      *  icon track the size (small 13/16 + 14px icon · medium 15/20 + 16px ·
-     *  large 17/24 + 18px).
+     *  large 17/22 + 18px).
      *  @defaultValue medium */
     size?: 'small' | 'medium' | 'large';
     /** Controlled value. Pair with `onChange` / `onInput`. */
@@ -74,10 +74,14 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
     /** Content pinned to the end of the field (e.g. icons, buttons), after the
      *  clear button when `clearable`. */
     trailing?: React.ReactNode;
-    /** Single-line input type. Ignored when `multiline`. (`search` is omitted
-     *  deliberately — it triggers browser-injected clear/search affordances.)
+    /** Single-line input type. Ignored when `multiline`. `search` is a
+     *  **wrapper-only** shorthand: it defaults a leading search icon and a clear
+     *  button (both overridable — pass your own `leading`, or `clearable={false}`)
+     *  and sets `inputmode="search"`, but the DOM input stays `type="text"`. The
+     *  native `search` type never reaches the element, so the browser's own
+     *  clear/search affordances never appear — Anta owns that chrome.
      *  @defaultValue text */
-    type?: 'text' | 'email' | 'password' | 'tel' | 'url' | 'number';
+    type?: 'text' | 'search' | 'email' | 'password' | 'tel' | 'url' | 'number';
     /** Native autocomplete token. Overrides the value derived from `type`
      *  (`email` / `tel` / `url`) — set it for the cases `type` can't express, e.g.
      *  `username`, `current-password`, `new-password`, `one-time-code`, or `off`. */
@@ -98,6 +102,10 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
      *  when the field is hovered or focused (a quiet-until-engaged affordance for
      *  trailing actions). */
     dimActions?: boolean;
+    /** Fully-round the field (`border-radius: 999px`). Pass a `number` (px) or a CSS
+     *  length string for a custom radius. The `clearable` × button always rounds to
+     *  a circle to match (it isn't sized by a custom field value). */
+    round?: boolean | number | string;
     /** Toggle native spell-checking. */
     spellCheck?: boolean;
     /** Max input length. */
@@ -156,4 +164,4 @@ export interface InputProps extends BaseProps, DOMEventHandlers {
  * <Input label="Email" type="email" placeholder="you@example.com" clearable />
  * ```
  */
-export declare const Input: ({ label, hint, status, statusIcon, tone, size, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;
+export declare const Input: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, multiline, rows, maxRows, clearable, leading, trailing, type, autoComplete, inputMode, name, placeholder, disabled, readOnly, required, dimActions, spellCheck, maxLength, minLength, pattern, min, max, step, onInput, onChange, onValueChange, onClearClick, onClearInput, children, className, style, ...rest }: InputProps) => any;

package/dist/components/Input.js

@@ -1,5 +1,5 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { nativeStateChange, toneStyle } from "../anta_helpers";
+import { nativeStateChange, toneStyle, roundStyle } from "../anta_helpers";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
 const presence = (on) => on ? "" : void 0;
@@ -20,7 +20,8 @@ const INPUTMODE_BY_TYPE = {
   email: "email",
   tel: "tel",
   url: "url",
-  number: "numeric"
+  number: "numeric",
+  search: "search"
 };
 const STATUS_ICON = {
   critical: "warning-diamond",
@@ -36,6 +37,7 @@ const Input = ({
   statusIcon,
   tone,
   size,
+  round,
   value,
   defaultValue,
   multiline,
@@ -72,10 +74,15 @@ const Input = ({
 }) => {
   const statusTone = status && status !== "neutral" ? status : void 0;
   const glyph = statusIcon === void 0 ? statusTone ? STATUS_ICON[statusTone] : void 0 : statusIcon;
+  const isSearch = type === "search";
+  const nativeType = isSearch ? void 0 : type;
+  const resolvedLeading = leading ?? (isSearch ? /* @__PURE__ */ jsx(Icon, { shape: "search" }) : void 0);
+  const resolvedClearable = isSearch ? clearable ?? true : clearable;
   return /* @__PURE__ */ jsxs(
     "a-input",
     {
       size: size && size !== "medium" ? size : void 0,
+      round: round ? "" : void 0,
       value,
       defaultvalue: defaultValue,
       multiline: presence(multiline || rows != null),
@@ -83,7 +90,7 @@ const Input = ({
       maxrows: maxRows != null ? String(maxRows) : void 0,
       status: statusTone,
       tone: tone || void 0,
-      type: !multiline && rows == null ? type : void 0,
+      type: !multiline && rows == null ? nativeType : void 0,
       name,
       placeholder,
       disabled: presence(disabled),
@@ -111,12 +118,12 @@ const Input = ({
       onclearclick: onClearClick ? (e) => onClearClick(nativeStateChange(e).event) : void 0,
       onclearinput: onClearInput ? (e) => onClearInput(nativeStateChange(e).event) : void 0,
       class: className,
-      style: toneStyle(tone, "--input-tone-source", style),
+      style: roundStyle(round, "--input-round", toneStyle(tone, "--input-tone-source", style)),
       ...rest,
       children: [
         label != null && (isStringish(label) ? /* @__PURE__ */ jsx("span", { slot: "label", children: label }) : /* @__PURE__ */ jsx("span", { slot: "label", style: { display: "contents" }, children: label })),
-        leading != null && /* @__PURE__ */ jsx("span", { slot: "leading", style: { display: "contents" }, children: leading }),
-        clearable && // A real <a-button> (light DOM → fully styled, keyboard-focusable) in
+        resolvedLeading != null && /* @__PURE__ */ jsx("span", { slot: "leading", style: { display: "contents" }, children: resolvedLeading }),
+        resolvedClearable && // A real <a-button> (light DOM → fully styled, keyboard-focusable) in
         // the element's `clear` slot — the element owns its visibility (shown
         // only when filled + editable). It fires the bubbling `clearrequest`
         // event via a-button's global listener, so clearing works even without
@@ -130,6 +137,7 @@ const Input = ({
           {
             priority: "tertiary",
             size,
+            round: !!round,
             icon: "x",
             "aria-label": "Clear",
             "data-custom-event": "clearrequest"