@antadesign/anta 0.3.3 → 0.3.5

package/dist/anta_helpers.d.ts

@@ -22,10 +22,6 @@ export declare function nativeStateChange<D>(e: CustomEvent<D> | {
     event: CustomEvent<D>;
     detail?: D;
 };
-export declare const TABS_KIND: unique symbol;
-export declare function markTabsKind<F>(component: F & {
-    [TABS_KIND]?: "tab" | "panel";
-}, kind: "tab" | "panel"): F;
 /** 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,11 +16,6 @@ function nativeStateChange(e) {
   const event = "nativeEvent" in e ? e.nativeEvent : e;
   return { event, detail: event?.detail };
 }
-const TABS_KIND = Symbol.for("@antadesign/anta/tabs.kind");
-function markTabsKind(component, kind) {
-  component[TABS_KIND] = kind;
-  return component;
-}
 const NAMED_TONES = /* @__PURE__ */ new Set([
   "brand",
   "neutral",
@@ -112,12 +107,10 @@ export {
   HTMLElementBase,
   NAMED_TONES,
   SelectableChildElement,
-  TABS_KIND,
   anchorRect,
   hasChildren,
   isInsideOpenMenu,
   isMenuOpen,
-  markTabsKind,
   nativeStateChange,
   roundStyle,
   setMenuPresence,

package/dist/components/Calendar.d.ts

@@ -36,6 +36,11 @@ export interface CalendarProps extends Omit<BaseProps, "children" | "onChange">
     size?: "small" | "medium" | "large";
     /** Disable the whole calendar (not focusable or selectable). */
     disabled?: boolean;
+    /** Move keyboard focus onto the active day. Change this to a new value (e.g.
+     *  increment a counter) to focus the cursor cell — `InputDate` bumps it when
+     *  the calendar is opened from the field by keyboard (ArrowDown), so focus
+     *  lands in the grid. The initial value never focuses; only a change does. */
+    focusSignal?: number;
     /** Accessible name for the grid (defaults to the visible month heading). */
     "aria-label"?: string;
     /** Fired whenever the selection changes — event-first. `detail` is
@@ -56,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.
  *
@@ -76,5 +82,5 @@ export interface CalendarProps extends Omit<BaseProps, "children" | "onChange">
  * 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 declare const Calendar: ({ value, defaultValue, min, max, locale, name, size, disabled, focusSignal, onStateChange, onChange, onValueChange, className, style, "aria-label": ariaLabel, ...rest }: CalendarProps) => any;
 export {};

package/dist/components/Calendar.js

@@ -17,6 +17,7 @@ const Calendar = ({
   name,
   size,
   disabled,
+  focusSignal,
   onStateChange,
   onChange,
   onValueChange,
@@ -37,11 +38,26 @@ 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);
+    if (focusSignal !== void 0) setFocusReq({ iso: cursorIso, n: focusSignal });
+  }
   const minYear = minD ? minD.year : today.year - 3;
   const maxYear = maxD ? maxD.year : today.year + 3;
   const years = [];
@@ -67,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]);
@@ -186,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/InputDate.d.ts

@@ -45,8 +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. */
-    icon?: IconShape;
+    /** 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 | 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
@@ -67,10 +69,11 @@ export interface InputDateProps extends Omit<BaseProps, 'children'> {
  * `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. The trailing
- * calendar button opens a `Calendar` in a menu (a field click just types); 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`.
+ * 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).

package/dist/components/InputDate.js

@@ -17,7 +17,7 @@ import { Menu } from "./Menu";
 import { Calendar } from "./Calendar";
 import { Button } from "./Button";
 import { Icon } from "./Icon";
-import { Tabs } from "./Tabs";
+import { InputTime } from "./InputTime";
 import styles from "./InputDate.module.css";
 const InputDate = ({
   value,
@@ -67,46 +67,21 @@ const InputDate = ({
   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 [hourText, setHourText] = useState(curHourShown);
-  const [minuteText, setMinuteText] = useState(curM);
-  const meridiem = curMer;
+  const [focusNonce, setFocusNonce] = useState(0);
   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 withTime = (d) => `${d}T${String(h24).padStart(2, "0")}:${curM}`;
   const apply = (iso) => {
     setInvalid(false);
     if (iso === (current ?? "")) setText(fmt(iso));
@@ -118,24 +93,25 @@ const InputDate = ({
       setInvalid(false);
       if (current) commit("");
       else setText("");
-      return;
+      return true;
     }
     const parsed = time ? parseDateTimeInput(t, resolvedLocale, { min: minD, max: maxD }) : parseDateInput(t, resolvedLocale, { min: minD, max: maxD });
     if (!parsed) {
       setInvalid(true);
-      return;
+      return false;
     }
     const iso = time ? parsed.toString({ smallestUnit: "minute" }) : parsed.toString();
     apply(iso);
+    return true;
   };
-  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}`);
-  };
+  const parsedPreview = useMemo(() => {
+    const t = text.trim();
+    if (!t) return dateISO;
+    const parsed = time ? parseDateTimeInput(t, resolvedLocale, { min: minD, max: maxD }) : parseDateInput(t, resolvedLocale, { min: minD, max: maxD });
+    return parsed ? parsed.toString().slice(0, 10) : null;
+  }, [text, time, resolvedLocale, dateISO, min, max]);
+  const [previewISO, setPreviewISO] = useState(dateISO);
+  if (parsedPreview !== null && parsedPreview !== previewISO) setPreviewISO(parsedPreview);
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsx(
       Input,
@@ -147,127 +123,91 @@ const InputDate = ({
         round,
         disabled,
         clearable,
-        leading: icon ? /* @__PURE__ */ jsx(Icon, { shape: icon }) : void 0,
+        leading: icon === false ? void 0 : /* @__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) => {
-          if (e.target !== e.currentTarget) return;
-          resolve(e.currentTarget.value);
+        onChange: (e) => resolve(e.currentTarget.value),
+        onKeyDown: (e) => {
+          if (e.key === "ArrowDown" && !disabled) {
+            e.preventDefault();
+            if (!open) e.currentTarget.click();
+            setFocusNonce((n) => n + 1);
+          }
+          if (e.key === "Enter" && !disabled) {
+            e.preventDefault();
+            if (resolve(e.currentTarget.value)) setOpen(false);
+          }
         },
         className: cn(styles.dateField, className),
         style,
-        trailing: /* @__PURE__ */ jsxs(Fragment, { children: [
+        ...rest
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      Menu,
+      {
+        open,
+        placement: "bottom-start",
+        autoWidth: true,
+        className: styles.calendarMenu,
+        onStateChange: (_e, { next }) => setOpen(next),
+        children: /* @__PURE__ */ jsxs("div", { "data-menu-open": "", children: [
           /* @__PURE__ */ jsx(
-            Button,
+            Calendar,
             {
-              priority: "tertiary",
+              value: previewISO,
+              min,
+              max,
+              locale,
               size,
-              icon: "calendar-days",
-              "aria-label": "Open calendar",
-              "aria-haspopup": "dialog",
-              disabled
+              disabled,
+              focusSignal: focusNonce,
+              onStateChange: (_e, { next, reason }) => {
+                if (reason !== "user") return;
+                const d = next ?? "";
+                apply(time && d ? withTime(d) : d);
+                if (!time) setOpen(false);
+              }
             }
           ),
-          /* @__PURE__ */ jsx(
-            Menu,
-            {
-              open,
-              placement: "bottom-end",
-              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,
-                    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)
-                    }
-                  )
-                ] })
-              ] })
-            }
-          )
-        ] }),
-        ...rest
+          time && /* @__PURE__ */ jsxs("div", { className: styles.timeRow, children: [
+            /* @__PURE__ */ jsx(
+              InputTime,
+              {
+                size,
+                locale,
+                hour12,
+                disabled,
+                "aria-label": "Time",
+                value: hasTime ? `${String(h24).padStart(2, "0")}:${curM}` : "",
+                onValueChange: (e, { value: t }) => {
+                  const ev = "nativeEvent" in e ? e.nativeEvent : e;
+                  if (ev?.type !== "change") return;
+                  const base = dateISO || Temporal.Now.plainDateISO().toString();
+                  commit(t ? `${base}T${t}` : base);
+                }
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              Button,
+              {
+                priority: "tertiary",
+                size,
+                icon: "check",
+                "aria-label": "Done",
+                onClick: () => setOpen(false)
+              }
+            )
+          ] })
+        ] })
       }
     ),
     name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: current ?? "" }) : null

package/dist/components/InputDate.module.css

@@ -1 +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}
+.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)}.dateField::part(input){text-overflow:ellipsis}

package/dist/components/InputTime.d.ts

@@ -0,0 +1,105 @@
+import type { BaseProps, DOMEventHandlers } from '../general_types';
+import type { IconShape } from '../elements/a-icon.shapes';
+/** Convenience snapshot passed as the 2nd argument to `onValueChange`. */
+export interface InputTimeChangeAttrs {
+    /** Current value — 24-hour `"HH:mm"`, `''` when incomplete. */
+    value: string;
+    /** The field's `name`, for keyed updates: `s => ({ ...s, [name]: value })`. */
+    name?: string;
+    /** `true` when the value is empty / incomplete. */
+    empty: boolean;
+    /** Whether the field currently passes validation. `undefined` where
+     *  `ElementInternals` is unsupported. */
+    valid?: boolean;
+    /** Current validation message (`''` when valid). */
+    validationMessage: string;
+}
+export interface InputTimeProps extends BaseProps, DOMEventHandlers {
+    /** Extra content rendered under the field, above the hint (a no-box child like
+     *  a `<Tooltip>` takes no space and just anchors to the field). */
+    children?: React.ReactNode;
+    /** Field label, shown above the control and used as the segment group's
+     *  accessible name. */
+    label?: React.ReactNode;
+    /** Message below the field. `status` recolors it and prefixes a glyph. */
+    hint?: React.ReactNode;
+    /** Validation / feedback tone. Only `critical` marks the field invalid; the
+     *  others are advisory. Omit (or `neutral`) for a plain field. */
+    status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Glyph before the `hint` when `status` is set (per-status default; pass a
+     *  shape to override, or `false` to drop it). */
+    statusIcon?: IconShape | (string & {}) | false;
+    /** Custom accent colour — any literal CSS colour tints the resting + hover
+     *  border (focus ring stays `--focus-ring`); `status` overrides for validation. */
+    tone?: string;
+    /** Size variant. small=24px, medium=28px, large=32px tall.
+     *  @defaultValue medium */
+    size?: 'small' | 'medium' | 'large';
+    /** Controlled value — 24-hour `"HH:mm"`. Pair with `onValueChange`. */
+    value?: string;
+    /** Initial value for the uncontrolled case (24-hour `"HH:mm"`). */
+    defaultValue?: string;
+    /** BCP-47 locale driving the clock (12h vs 24h), segment order, separator, and
+     *  the AM/PM text.
+     *  @defaultValue navigator.language */
+    locale?: string;
+    /** Force the clock: `true` = 12-hour (AM/PM), `false` = 24-hour. Omit to follow
+     *  the locale. */
+    hour12?: boolean;
+    /** Earliest allowed time, 24-hour `"HH:mm"`. A complete value below it is
+     *  clamped up (on step / blur) and flagged `rangeUnderflow` for form validity. */
+    min?: string;
+    /** Latest allowed time, 24-hour `"HH:mm"`. A complete value above it is clamped
+     *  down (on step / blur) and flagged `rangeOverflow`. */
+    max?: string;
+    /** Form field name — the 24-hour value submits under this key. */
+    name?: string;
+    /** Disable the field. */
+    disabled?: boolean;
+    /** Mark the field required (drives native validity). */
+    required?: boolean;
+    /** Leading icon at the start of the field — the clock affordance. Pass another
+     *  shape to change it, or `false` to drop it.
+     *  @defaultValue clock */
+    icon?: IconShape | false;
+    /** Show a clear button once the field has a value. */
+    clearable?: boolean;
+    /** Dim the trailing adornments at rest; they brighten on hover / focus. */
+    dimActions?: boolean;
+    /** Content pinned to the end of the field (after the clear button). */
+    trailing?: React.ReactNode;
+    /** Fully-round the field, or a custom radius (`number` px / CSS length). */
+    round?: boolean | number | string;
+    /** Fires on every edit (`input`), with the native event + an `attrs` snapshot
+     *  (`value`, `name`, `empty`, `valid`, `validationMessage`). Also fires on
+     *  `change` (blur) and on clear. */
+    onValueChange?: (event: any, attrs: InputTimeChangeAttrs) => void;
+    /** Fires after the built-in clear button has cleared the field. */
+    onClearInput?: (e: CustomEvent) => void;
+    /** Fires when the field gains focus. */
+    onFocus?: (e: any) => void;
+    /** Fires when the field loses focus. */
+    onBlur?: (e: any) => void;
+}
+/**
+ * `<InputTime>` — a segmented wall-clock time field. One boxed input (matching
+ * the other inputs) with separate hour / minute / (12-hour) AM-PM sections that
+ * behave as one control: each is a `role="spinbutton"` — ↑/↓ steps with wrap,
+ * ←/→ moves between them, typing digits auto-advances, and AM/PM toggles with
+ * ↑/↓ or `a`/`p`. Renders an `<a-input-time>` web component that owns the
+ * segments, keyboard, and form value (via `ElementInternals`).
+ *
+ * The clock and layout follow the locale (`en-US` → 12-hour, most others 24),
+ * overridable with `hour12`. The value is a 24-hour `"HH:mm"` string; controlled
+ * (`value` + `onValueChange`) or uncontrolled (`defaultValue`), submitting under
+ * `name`.
+ *
+ * Requires `@antadesign/anta/elements` (client-side only). Reads
+ * `navigator.language` at render, so render client-side (not SSR-safe).
+ *
+ * @example
+ * ```tsx
+ * <InputTime label="Start" defaultValue="09:30" onValueChange={(_, { value }) => save(value)} />
+ * ```
+ */
+export declare const InputTime: ({ label, hint, status, statusIcon, tone, size, round, value, defaultValue, locale, hour12, min, max, name, disabled, required, icon, clearable, dimActions, trailing, onValueChange, onClearInput, children, className, style, ...rest }: InputTimeProps) => any;