@antadesign/anta 0.3.1 → 0.3.3

package/dist/general_types.d.ts

@@ -13,6 +13,9 @@ export interface BaseProps {
     title?: string;
     /** Tab order. Set to `-1` to skip the element when tabbing. */
     tabIndex?: number;
+    /** React/Preact reconciliation key when rendered inside a list. Consumed by the
+     *  JSX runtime (not forwarded as a DOM attribute). */
+    key?: string | number | null;
     /** Any `data-*` attribute is forwarded to the rendered element. */
     [key: `data-${string}`]: unknown;
     /** Any `aria-*` attribute is forwarded to the rendered element. */
@@ -145,6 +148,9 @@ export interface AProgressAttributes extends BaseAttributes {
     /** Colour variant, or any literal CSS colour for a custom tone (derived in
      *  oklch). Named tones track light/dark automatically. */
     tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Fully-round track (`border-radius: 999px`), or a custom radius via a length
+     *  value (`round="6px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** ARIA role — the JSX wrapper sets this to `'progressbar'`. */
     role?: string;
     /** ARIA value-now (current). */
@@ -165,8 +171,9 @@ export interface AProgressAttributes extends BaseAttributes {
 export interface ATextAttributes extends BaseAttributes {
     /** Visual priority. Maps to text-1..text-5. */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-    /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
-    tone?: 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale;
+     *  the others apply the matching `--text-{N}-{tone}` palette. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
     /** Type scale. `small` = 13/16, `medium` (default) = 15/20, `large` = 17/24. */
     size?: 'small' | 'medium' | 'large';
     /** Render as inline-block instead of the default block. */
@@ -198,8 +205,9 @@ export interface ATitleAttributes extends BaseAttributes {
     level?: string;
     /** Visual priority. Maps to text-1..text-5. */
     priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
-    /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
-    tone?: 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale;
+     *  the others apply the matching `--text-{N}-{tone}` palette. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
     /** ARIA role — the JSX wrapper sets this to `'heading'`. */
     role?: string;
     /** ARIA heading level — the JSX wrapper sets this to match `level`. */
@@ -224,9 +232,9 @@ export interface ATagAttributes extends BaseAttributes {
     /** Size variant. `small` = 16px tall, `medium` (default) = 20px,
      *  `large` = 24px. */
     size?: 'small' | 'medium' | 'large';
-    /** Render in normal case instead of the default uppercase.
+    /** Render in all-caps instead of the default normal (mixed) case.
      *  Presence-based (`''` on, omit off). */
-    nocaps?: boolean | '';
+    allcaps?: boolean | '';
 }
 /**
  * Attributes for the `<a-expander>` collapsible disclosure.
@@ -258,6 +266,11 @@ export interface AExpanderAttributes extends BaseAttributes {
     /** Disables the header: not clickable or focusable, hover affordance
      *  off, text dimmed. The open state freezes as-is. Presence-based. */
     disabled?: boolean | '';
+    /** Round corners sized to half the folded (header) height — a pill when folded,
+     *  the same radius when expanded (the element measures the header and publishes
+     *  `--_expander-round-radius`). A length value (`round="12px"`) is a fixed radius
+     *  that overrides the measurement. Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** Semantic tone, or any literal CSS color for a one-off custom tone.
      *  Named tones re-point the text + filled surface palette; a custom
      *  color keeps its hue with lightness/chroma pinned. `'neutral'` is the
@@ -321,6 +334,17 @@ export interface ATooltipAttributes extends BaseAttributes {
     /** Make the bubble hoverable/clickable (pointer events on, stays open while
      *  hovered). Always pinned. Presence-based (`''` on, omit off). */
     interactive?: boolean | '';
+    /** Only show when the measured target is actually truncated/clipped (its text
+     *  overflows). UI-thread layout read, re-measured per show. Defaults to the
+     *  nearest Anta ellipsizing label part (`a-tab-label` / `a-button-label`) in the
+     *  anchor, then the anchor itself. Presence-based (`''` on, omit off). */
+    'truncated-only'?: boolean | '';
+    /** Round the bubble (20px radius), or a custom radius via a length value
+     *  (`round="12px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
+    /** CSS selector (resolved within the anchor) for the element whose overflow a
+     *  `truncated-only` tooltip measures. */
+    'truncated-selector'?: string;
     /** HTML `id`. */
     id?: string;
 }
@@ -335,16 +359,17 @@ export interface ATooltipAttributes extends BaseAttributes {
  * `@antadesign/anta`.
  */
 export interface ACheckboxAttributes extends BaseAttributes {
-    /** Colour variant, or any literal CSS color for a one-off custom tone.
-     *  Named tones track light/dark mode automatically via the theme-aware role
-     *  tokens. `'neutral'` is the default (same as omitting it). */
+    /** Mark colour in every state — checked fill *and* unselected box border — or any
+     *  literal CSS color for a one-off custom tone. Named tones track light/dark mode
+     *  automatically. `'neutral'` is the default (same as omitting it). The label + hint
+     *  stay neutral — recolour them in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Like `tone`, but coloured onto the checked mark only — the empty box stays
+     *  neutral grey. Same value set as `tone`; if both are set, `tone` governs the
+     *  off-state border and `tone-selected` the checked fill. */
+    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. `small` = 14px, `medium` (default) = 16px, `large` = 18px box. */
     size?: 'small' | 'medium' | 'large';
-    /** Visual priority. `primary` (default) fills the checked box with the tone
-     *  colour and draws a white checkmark; `secondary` keeps the box unfilled and
-     *  draws the border + checkmark in the tone colour (an outlined look). */
-    priority?: 'primary' | 'secondary';
     /** Controlled state — the element reflects changes to this attribute. Use this
      *  (driven from your store) for a controlled checkbox; use `default-state` for
      *  an uncontrolled one. */
@@ -354,6 +379,9 @@ export interface ACheckboxAttributes extends BaseAttributes {
     'default-state'?: 'checked' | 'unchecked' | 'indeterminate';
     /** Disabled state. Presence-based (`''` on, omit off). */
     disabled?: boolean | '';
+    /** Round the mark to a circle (`::before` `border-radius: 999px`), or a rounded
+     *  square via a length value (`round="5px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** Form field name — the key this checkbox submits under inside a `<form>`. */
     name?: string;
     /** Value submitted when checked. Defaults to `"on"`. */
@@ -414,6 +442,9 @@ export interface AInputAttributes extends BaseAttributes {
     /** Dim the leading/trailing adornments at rest (0.6); they brighten to full
      *  when the field is hovered or focused. Presence-based. */
     'dim-actions'?: boolean | '';
+    /** Fully-round field (`border-radius: 999px`), or a custom radius via a length
+     *  value (`round="10px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** Size variant. small=24px, medium (default)=28px, large=32px. */
     size?: 'small' | 'medium' | 'large';
     /** Single-line input type (ignored when multiline). `search` is intentionally
@@ -447,6 +478,60 @@ export interface AInputAttributes extends BaseAttributes {
     'aria-invalid'?: 'true' | 'false' | boolean;
     'aria-label'?: string;
 }
+/**
+ * Attributes for the `<a-calendar>` custom element — a **light-DOM,
+ * form-associated** month grid, and the **interaction authority** for it. The
+ * element is the grid (a flat 7-column CSS grid whose children are the weekday
+ * headers + day cells), owns the submitted form value, and **dispatches the
+ * selection (`statechange` / `change`) and navigation (`navigate`) events** plus
+ * manages keyboard focus — so it works for a vanilla consumer, not only via the
+ * wrapper. It does **not** build or mutate its own contents: whoever renders into
+ * it (the `Calendar` JSX wrapper, or a vanilla consumer using the exported
+ * `buildMonth` engine) fills it with day cells and *re-renders on its events* —
+ * the `<a-radio-group>` model. Controlled by the presence of `value` (a pick only
+ * *requests* a change); uncontrolled with `defaultvalue` (a pick self-applies).
+ * For the typed, batteries-included wrapper use `Calendar` from `@antadesign/anta`.
+ *
+ * `:state(filled)` is the styling hook for "has a selection".
+ */
+export interface ACalendarAttributes extends BaseAttributes {
+    /** Controlled selected date — ISO `YYYY-MM-DD`. Present → controlled (a pick
+     *  only requests a change). Mirrored to the owning form via `ElementInternals`. */
+    value?: string;
+    /** Uncontrolled initial date / reset baseline — ISO `YYYY-MM-DD`. */
+    defaultvalue?: string;
+    /** Form field name — the selected ISO date submits under this key. */
+    name?: string;
+    /** Disable the whole calendar. Presence-based (`''` on, omit off). */
+    disabled?: boolean | '';
+    /** Focus signal — `"<iso>#<nonce>"`. When it changes, the element focuses the
+     *  day cell whose `data-date` matches `<iso>` (set by the renderer after a
+     *  month-changing keyboard move). */
+    'data-focus'?: string;
+    /** Cancelable, bubbling `statechange` fired BEFORE a pick applies. `detail` is
+     *  `{ next, prev, reason }` — ISO strings (or `null`); `reason` ∈
+     *  `'user' | 'reset' | 'restore'`. `preventDefault()` vetoes a `'user'` pick in
+     *  uncontrolled mode. */
+    onstatechange?: (e: CustomEvent<{
+        next: string | null;
+        prev: string | null;
+        reason: 'user' | 'reset' | 'restore';
+    }>) => void;
+    /** Native `change`, fired AFTER a selection applies (uncontrolled) and on
+     *  reset/restore. */
+    onchange?: (e: Event) => void;
+    /** Keyboard navigation request — the element handles arrow / Home / End /
+     *  PageUp / PageDown, focuses the target cell when it's rendered, and emits this
+     *  bubbling `navigate` `CustomEvent` (`detail: { date }`, ISO) so the renderer can
+     *  move the roving tab stop and flip the displayed month when needed. */
+    onnavigate?: (e: CustomEvent<{
+        date: string;
+    }>) => void;
+    /** ARIA — `role="group"` and the accessible name are set by the renderer (the
+     *  `Calendar` wrapper wires `aria-labelledby` to the month heading). */
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
 /**
  * Attributes for the `<a-menu>` custom element. Placed immediately after the
  * trigger it anchors to (root menu), or nested inside an `<a-menu-item>`
@@ -467,6 +552,10 @@ export interface AMenuAttributes extends BaseAttributes {
      *  default; this opts out, making the submenu click-only. Presence-based
      *  (`''` on, omit off). */
     nohover?: boolean | '';
+    /** Round: container softens to a 20px radius and its items go fully round. A
+     *  length value (`round="12px"`) tunes the container radius only (items stay
+     *  pills). Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** Gap in pixels between the trigger and the menu. Defaults to 4. */
     offset?: number | string;
     /** Controlled open state (`'open'` / `'closed'`). Omit for uncontrolled;
@@ -494,9 +583,15 @@ export interface AMenuAttributes extends BaseAttributes {
 export interface AMenuItemAttributes extends BaseAttributes {
     /** Disabled state. Presence-based (`''` on, omit off). */
     disabled?: boolean | '';
-    /** Semantic tone. Colors the label, icon, and hover tint. `'neutral'`
-     *  (the default) is the same as omitting it. */
-    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Marks the item as selected — a persistent background tint (the same
+     *  resting look a pressed row shows), for building single- / multi-select
+     *  menus. Presence-based (`''` on, omit off). */
+    selected?: boolean | '';
+    /** Semantic tone. Colors the label, icon, and hover/selected tint. A named tone,
+     *  or any literal CSS color for a one-off custom tone (resolved through
+     *  `--menu-item-tone-source`, hue/chroma kept, lightness pinned to the brand
+     *  text). `'neutral'` (the default) is the same as omitting it. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Keep the menu open after this item is chosen (toggles / multi-select),
      *  instead of the default close-on-select. Presence-based (`''` on, omit
      *  off). The universal form is `data-menu-open` (works on any element). */
@@ -545,6 +640,9 @@ export interface AButtonAttributes extends BaseAttributes {
     disabled?: boolean | '';
     /** Toggled-on / pressed state. Presence-based (`''` on, omit off). */
     selected?: boolean | '';
+    /** Fully-round (pill / circle) — `border-radius: 999px` — or a custom radius via
+     *  a length value (`round="20px"`). Presence-based for the boolean form. */
+    round?: boolean | number | string;
     /** Submit/reset semantics. */
     type?: 'button' | 'submit' | 'reset';
     /** Associate with a form by id when not nested inside it. */
@@ -565,16 +663,17 @@ export interface AButtonAttributes extends BaseAttributes {
 export interface ARadioAttributes extends BaseAttributes {
     /** This option's identity / submitted value. */
     value?: string;
-    /** Colour variant, or any literal CSS color for a one-off custom tone.
-     *  Named tones track light/dark mode automatically via the theme-aware role
-     *  tokens. `'neutral'` is the default (same as omitting it). */
+    /** Mark colour in every state — selected ring fill + dot *and* unselected ring
+     *  border — or any literal CSS color for a one-off custom tone. Named tones track
+     *  light/dark mode. `'neutral'` is the default. The label + hint stay neutral —
+     *  recolour them in plain CSS via the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Like `tone`, but coloured onto the selected mark only — an unselected ring stays
+     *  neutral grey. Same value set as `tone`; if both are set, `tone` governs the
+     *  off-state border and `tone-selected` the selected fill. */
+    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size variant. small=14px, medium=16px, large=18px control. */
     size?: 'small' | 'medium' | 'large';
-    /** Visual priority. `primary` (default) fills the selected ring with the tone
-     *  colour and draws a white dot; `secondary` keeps the ring unfilled and draws
-     *  the border + dot in the tone colour (an outlined look). */
-    priority?: 'primary' | 'secondary';
     /** Disabled state. Presence-based (`''` on, omit off). */
     disabled?: boolean | '';
     /** Selected state — connect-time seed for the standalone render path (no
@@ -614,16 +713,16 @@ export interface ARadioGroupAttributes extends BaseAttributes {
     'default-state'?: string;
     /** Form field name — the group submits `name=value`. */
     name?: string;
-    /** Tone cascaded to children that don't set their own, or any literal CSS
-     *  color for a one-off custom tone. Inherits through CSS so every child
-     *  `<a-radio>` picks up the same fill curve. */
+    /** Mark tone cascaded to children that don't set their own, or any literal CSS
+     *  color for a one-off custom tone. Colours every child's ring fill + dot *and*
+     *  unselected border. The option text stays neutral — recolour it in plain CSS via
+     *  the `--text-N-{tone}` tokens. */
     tone?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Like `tone`, but coloured onto the selected option only — every unselected ring
+     *  stays neutral grey. Cascaded to children that don't set their own. */
+    'tone-selected'?: 'brand' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
     /** Size cascaded to children that don't set their own. */
     size?: 'small' | 'medium' | 'large';
-    /** Visual priority cascaded to children that don't set their own. `primary`
-     *  (default) fills the selected ring with the tone colour; `secondary` keeps it
-     *  unfilled and draws the border + dot in the tone colour (an outlined look). */
-    priority?: 'primary' | 'secondary';
     /** Validation/feedback tone for the group hint — same set as `<a-input>`'s
      *  `status`. Recolours `<a-radio-group-hint>`; omit for the neutral default. */
     status?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
@@ -656,3 +755,126 @@ export interface ARadioGroupAttributes extends BaseAttributes {
     'aria-label'?: string;
     'aria-labelledby'?: string;
 }
+/**
+ * Attributes for the `<a-tab>` custom element — one tab in a tablist. Presentational,
+ * the sibling of `<a-radio>`: the parent `<a-tabs>` owns selection, keyboard, and
+ * scrolling. The selected look comes from the element's `:state(selected)` (set by the
+ * tablist via the `selected` property), not a host attribute. There is no `Tab` web
+ * component to render directly — `Tabs` renders these from its `<Tab>` children, and
+ * hand-authors write `<a-tab>` directly inside an `<a-tabs>`. Wrap the visible label in
+ * `<a-tab-label>` (as `Tabs` does) so it carries the optical baseline nudge, truncates
+ * with an ellipsis when constrained, and keeps a sibling `<a-icon>` centered — exactly
+ * like `<a-button-label>`.
+ */
+export interface ATabAttributes extends BaseAttributes {
+    /** This tab's identity / the value reported when it's selected. */
+    value?: string;
+    /** Per-tab tone override (same vocabulary as `<a-tabs tone>`): colours this tab's
+     *  label + icons and, when selected, its indicator. Named tones tone the sliding
+     *  indicator too; a custom literal colour tones the indicator only in `noslide`.
+     *  Custom tones also set `--tabs-tone-source` on the tab (via the wrapper's style). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Selected state — connect-time seed for the standalone render path (no tablist).
+     *  In an `<a-tabs>`, the tablist drives `:state(selected)` directly and this
+     *  attribute is ignored. Presence-based (`''` on, omit off). */
+    selected?: boolean | '';
+    /** Disabled state. Presence-based (`''` on, omit off). */
+    disabled?: boolean | '';
+    /** Fully-round this tab's box (`--tab-radius: 999px`). `<a-tabs round>` sets it
+     *  strip-wide instead. Presence-based (`''` on, omit off) — no custom value. */
+    round?: boolean | '';
+    /** ARIA — `role="tab"` is set by the consumer (`Tabs` on each tab, or a hand-author),
+     *  and `aria-controls` points at the paired panel. `aria-selected` is published by
+     *  the element through `ElementInternals` (off the DOM), driven by the `selected`
+     *  property the tablist sets — not a DOM attribute. `tabindex` (inherited from
+     *  `BaseAttributes`) is set by `Tabs` — every enabled tab is its own tab stop
+     *  (`tabindex="0"`) — not by the element. */
+    role?: 'tab';
+    'aria-controls'?: string;
+    'aria-disabled'?: 'true' | 'false';
+}
+/**
+ * Attributes for the `<a-tabs>` custom element — the tablist + single-select
+ * coordinator. No shadow DOM: `<a-tab>` children are plain light-DOM, laid out by
+ * `a-tabs.css`, so the strip is restylable with ordinary CSS and usable hand-assembled.
+ * Unlike `<a-radio-group>` it is NOT form-associated (a tablist submits nothing), and
+ * the panels live outside it (siblings the `Tabs` wrapper shows/hides). The element
+ * coordinates **off-DOM only** — selection via each tab's `selected` property, focus via
+ * `internals.ariaActiveDescendantElement`, scroll via `scrollIntoView`. Roving
+ * `tabindex` (the JSX path) is rendered by the `Tabs` wrapper, not the element. For the
+ * typed JSX wrapper use `Tabs` from `@antadesign/anta`.
+ */
+export interface ATabsAttributes extends BaseAttributes {
+    /** Controlled selected value (the active tab's `value`). Present → controlled: the
+     *  element reflects changes to this attribute and a pick only dispatches
+     *  `statechange`. Absent → uncontrolled (seed with `default-state`). */
+    state?: string;
+    /** Uncontrolled initial selected value — read once on connect. */
+    'default-state'?: string;
+    /** Visual priority. `primary` (default) is the raised pill on a recessed track; `secondary`
+     *  keeps that sizing but drops the track (selected = subtle active background fill, no
+     *  border); `tertiary` is a bottom-underline under the selected tab only (no track, no rest
+     *  line). `tone` tints secondary + tertiary; primary stays neutral. */
+    priority?: 'primary' | 'secondary' | 'tertiary';
+    /** Tone applied to the selected indicator/label, or any literal CSS color for a
+     *  one-off custom tone (derived in oklch). `'neutral'` is the default. */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Size variant. small=24px, medium (default)=28px, large=32px tall — matching Button's
+     *  scale (the label leading runs a touch tighter, offset by 1px more block padding per side). */
+    size?: 'small' | 'medium' | 'large';
+    /** Layout + arrow-key axis. `'horizontal'` (default) ellipsizes labels when tabs
+     *  overflow (scrolling is opt-in via CSS); `'vertical'` stacks them. */
+    orientation?: 'horizontal' | 'vertical';
+    /** Disable the sliding indicator. By default the selected-tab indicator is a single
+     *  rectangle that animates between tabs via CSS anchor positioning; with `noslide` the
+     *  highlight is painted on each tab and snaps with no movement (also the automatic
+     *  fallback where anchor positioning isn't supported). Presence-based (`''` on, omit off). */
+    noslide?: boolean | '';
+    /** Disable the whole strip. Presence-based (`''` on, omit off). */
+    disabled?: boolean | '';
+    /** Fully-round tabs + sliding indicator (via `--tab-radius: 999px`) and the primary
+     *  track well. A length value (`round="10px"`) applies to the top-level track well
+     *  only (pills + indicator stay full). Presence-based for the boolean form. */
+    round?: boolean | number | string;
+    /** Fires whenever the active tab changes. `detail` carries `{ next, prev }` (values;
+     *  `null` = none). Cancelable: a synchronous `preventDefault()` vetoes the pick in
+     *  uncontrolled mode. All-lowercase to bind across both renderers (like
+     *  `<a-radio-group>`). */
+    onstatechange?: (e: CustomEvent<{
+        next: string | null;
+        prev: string | null;
+    }>) => void;
+    /** Native `change`, fired *after* a selection applies (post-apply counterpart to
+     *  `onstatechange`). Lowercase so both renderers bind the native event. */
+    onchange?: (e: Event) => void;
+    /** Strip focus enter / leave — wired from the bubbling `focusin` / `focusout` (focus
+     *  lands on a tab, not the tablist). The `Tabs` wrapper maps its `onFocus`/`onBlur`. */
+    onfocusin?: (e: FocusEvent) => void;
+    onfocusout?: (e: FocusEvent) => void;
+    /** ARIA — set by the `Tabs` wrapper (the element never touches these). */
+    role?: 'tablist';
+    'aria-orientation'?: 'horizontal' | 'vertical';
+    'aria-disabled'?: 'true' | 'false';
+    'aria-label'?: string;
+}
+/**
+ * Attributes for the `<a-tabpanel>` styled tag.
+ *
+ * `<a-tabpanel>` has no JS — it's a CSS-only styled element. The `Tabs` wrapper renders
+ * it, pairs it to its tab via id, and toggles visibility declaratively: `hidden`
+ * (display:none) or `data-hide="visibility"` (keeps the layout box), plus `inert` while
+ * hidden. Low-level attributes; for the typed JSX wrapper use `TabPanel` (inside `Tabs`)
+ * from `@antadesign/anta`.
+ */
+export interface ATabpanelAttributes extends BaseAttributes {
+    /** Hidden via `display:none`. Presence-based (`''` on, omit off). */
+    hidden?: boolean | '';
+    /** Hidden via `visibility:hidden` (keeps the layout box). The `Tabs` wrapper sets
+     *  this for `mounting="visibility"`. */
+    'data-hide'?: 'visibility';
+    /** Removes the hidden panel from focus + the a11y tree. Presence-based. */
+    inert?: boolean | '';
+    /** ARIA — set by the `Tabs` wrapper. */
+    role?: 'tabpanel';
+    'aria-labelledby'?: string;
+}

package/dist/index.d.ts

@@ -19,7 +19,7 @@
 export { Progress } from './components/Progress';
 export type { ProgressProps } from './components/Progress';
 export { Text } from './components/Text';
-export type { TextProps } from './components/Text';
+export type { TextProps, ExpandMode } from './components/Text';
 export { Title } from './components/Title';
 export type { TitleProps } from './components/Title';
 export { Tag } from './components/Tag';
@@ -45,8 +45,22 @@ export { Expander } from './components/Expander';
 export type { ExpanderProps } from './components/Expander';
 export { Input } from './components/Input';
 export type { InputProps, InputChangeAttrs } from './components/Input';
+export { Calendar } from './components/Calendar';
+export type { CalendarProps, CalendarChangeAttrs } from './components/Calendar';
+export { InputDate } from './components/InputDate';
+export type { InputDateProps, InputDateChangeAttrs } from './components/InputDate';
+export { buildMonth, getWeekdays, firstDayOfWeek, clampDate, isOutOfRange, parseISODate, parseDateInput, formatDateInput, dateFormatPattern, parseTimeInput, parseDateTimeInput, formatDateTimeInput, dateTimeFormatPattern, usesHour12, } from './calendar-core';
+export type { CalendarDay, CalendarWeekday, CalendarMonth, BuildMonthOptions, ParseDateOptions, } from './calendar-core';
 export { RadioGroup } from './components/RadioGroup';
 export type { RadioGroupProps, RadioOption } from './components/RadioGroup';
+export { Select } from './components/Select';
+export type { SelectProps, SelectCommonProps, SelectOption, SelectGroup, SelectSubmenu, SelectItem, SelectChangeAttrs, OptionState, TriggerState, EmptyState, } from './components/Select';
+export { Tabs } from './components/Tabs';
+export type { TabsProps, TabsMounting, TabsChangeAttrs } from './components/Tabs';
+export { Tab } from './components/Tab';
+export type { TabProps } from './components/Tab';
+export { TabPanel } from './components/TabPanel';
+export type { TabPanelProps } from './components/TabPanel';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
 export type { AntaIntrinsicElements } from './jsx-runtime';

package/dist/index.js

@@ -13,25 +13,67 @@ import { MenuSeparator } from "./components/MenuSeparator";
 import { MenuGroup } from "./components/MenuGroup";
 import { Expander } from "./components/Expander";
 import { Input } from "./components/Input";
+import { Calendar } from "./components/Calendar";
+import { InputDate } from "./components/InputDate";
+import {
+  buildMonth,
+  getWeekdays,
+  firstDayOfWeek,
+  clampDate,
+  isOutOfRange,
+  parseISODate,
+  parseDateInput,
+  formatDateInput,
+  dateFormatPattern,
+  parseTimeInput,
+  parseDateTimeInput,
+  formatDateTimeInput,
+  dateTimeFormatPattern,
+  usesHour12
+} from "./calendar-core";
 import { RadioGroup } from "./components/RadioGroup";
+import { Select } from "./components/Select";
+import { Tabs } from "./components/Tabs";
+import { Tab } from "./components/Tab";
+import { TabPanel } from "./components/TabPanel";
 import { configure } from "./jsx-runtime";
 export {
   Button,
+  Calendar,
   Checkbox,
   Expander,
   ICON_SHAPES,
   ICON_SYNONYMS,
   Icon,
   Input,
+  InputDate,
   Menu,
   MenuGroup,
   MenuItem,
   MenuSeparator,
   Progress,
   RadioGroup,
+  Select,
+  Tab,
+  TabPanel,
+  Tabs,
   Tag,
   Text,
   Title,
   Tooltip,
-  configure
+  buildMonth,
+  clampDate,
+  configure,
+  dateFormatPattern,
+  dateTimeFormatPattern,
+  firstDayOfWeek,
+  formatDateInput,
+  formatDateTimeInput,
+  getWeekdays,
+  isOutOfRange,
+  parseDateInput,
+  parseDateTimeInput,
+  parseISODate,
+  parseTimeInput,
+  usesHour12
 };

package/dist/jsx-runtime.d.ts

@@ -3,10 +3,11 @@ type ComponentType = string | Function | symbol;
 type JsxFunction = {
     h(type: ComponentType, props: Record<string, unknown> | null, ...children: unknown[]): unknown;
 }['h'];
-/** The two hooks the stateful wrappers (currently only `RadioGroup`) need. Typed
- *  loosely to stay renderer-agnostic — any React-compatible hook implementation. */
+/** The hooks the stateful wrappers need. Typed loosely to stay renderer-agnostic —
+ *  any React-compatible hook implementation. */
 type UseState = <S>(initial: S | (() => S)) => [S, (next: S | ((prev: S) => S)) => void];
 type UseId = () => string;
+type UseMemo = <T>(factory: () => T, deps: unknown[]) => T;
 declare let _Fragment: ComponentType;
 /**
  * Swap the underlying JSX factory (and, optionally, the hooks) used by all anta
@@ -15,32 +16,37 @@ declare let _Fragment: ComponentType;
  * Not needed for React or Preact-with-compat — those work automatically. Call this
  * before rendering any anta components when using Preact without compat aliasing,
  * or a custom JSX runtime. Pass `hooks` when your runtime's hooks don't resolve via
- * the `react` specifier (the stateful wrappers — `RadioGroup` — need `useState` /
- * `useId`); omit it and they default to whatever `react` resolves to.
+ * the `react` specifier (the stateful wrappers — `RadioGroup`, `Calendar`,
+ * `InputDate` — need `useState` / `useId` / `useMemo`); omit it and they default
+ * to whatever `react` resolves to.
  *
  * @example Preact without compat
  * ```ts
  * import { configure } from '@antadesign/anta'
  * import { h, Fragment } from 'preact'
- * import { useState, useId } from 'preact/hooks'
- * configure(h, Fragment, { useState, useId })
+ * import { useState, useId, useMemo } from 'preact/hooks'
+ * configure(h, Fragment, { useState, useId, useMemo })
  * ```
  */
 export declare function configure(jsx: JsxFunction, Fragment?: ComponentType, hooks?: {
     useState?: UseState;
     useId?: UseId;
+    useMemo?: UseMemo;
 }): void;
 /** Hooks indirection so wrappers depend on the configured renderer, not a hard
  *  `import … from 'react'`. Call these exactly like the React hooks. */
 export declare function useState<S>(initial: S | (() => S)): [S, (next: S | ((prev: S) => S)) => void];
 export declare function useId(): string;
+export declare function useMemo<T>(factory: () => T, deps: unknown[]): T;
 export declare function jsx(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export declare function jsxs(type: ComponentType, props: Record<string, unknown> | null, key?: string | number): unknown;
 export { _Fragment as Fragment };
-import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
+    interface IntrinsicAttributes extends React.JSX.IntrinsicAttributes {
+    }
 }
 export interface AntaIntrinsicElements {
     'a-progress': AProgressAttributes;
@@ -64,6 +70,7 @@ export interface AntaIntrinsicElements {
     'a-checkbox-hint': BaseAttributes;
     'a-tooltip': ATooltipAttributes;
     'a-input': AInputAttributes;
+    'a-calendar': ACalendarAttributes;
     'a-radio': ARadioAttributes;
     'a-radio-group': ARadioGroupAttributes;
     'a-radio-group-label': BaseAttributes;
@@ -74,7 +81,13 @@ export interface AntaIntrinsicElements {
     'a-menu': AMenuAttributes;
     'a-menu-item': AMenuItemAttributes;
     'a-menu-item-label': BaseAttributes;
+    'a-menu-item-hint': BaseAttributes;
+    'a-menu-item-text': BaseAttributes;
     'a-menu-separator': BaseAttributes;
     'a-menu-group': AMenuGroupAttributes;
     'a-menu-group-label': BaseAttributes;
+    'a-tabs': ATabsAttributes;
+    'a-tab': ATabAttributes;
+    'a-tab-label': BaseAttributes;
+    'a-tabpanel': ATabpanelAttributes;
 }

package/dist/jsx-runtime.js

@@ -3,11 +3,13 @@ let _jsx = React.createElement;
 let _Fragment = React.Fragment;
 let _useState = React.useState;
 let _useId = React.useId;
+let _useMemo = React.useMemo;
 function configure(jsx2, Fragment, hooks) {
   _jsx = jsx2;
   if (Fragment !== void 0) _Fragment = Fragment;
   if (hooks?.useState) _useState = hooks.useState;
   if (hooks?.useId) _useId = hooks.useId;
+  if (hooks?.useMemo) _useMemo = hooks.useMemo;
 }
 function useState(initial) {
   return _useState(initial);
@@ -15,6 +17,9 @@ function useState(initial) {
 function useId() {
   return _useId();
 }
+function useMemo(factory, deps) {
+  return _useMemo(factory, deps);
+}
 function jsx(type, props, key) {
   const { children, ...rest } = props ?? {};
   const p = key !== void 0 ? { ...rest, key } : rest;
@@ -37,5 +42,6 @@ export {
   jsx,
   jsxs,
   useId,
+  useMemo,
   useState
 };

package/dist/reset.css

@@ -1 +1 @@
-@layer anta{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}strong{font-weight:600}code{line-height:1em}code,kbd,samp,pre{letter-spacing:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:color-mix(in srgb,var(--text-1-brand),transparent 85%)}table{border-collapse:collapse;font-variant-numeric:tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}
+@layer anta{*,*:before,*:after{box-sizing:border-box}*{margin:0}img,picture,video,canvas,svg{display:block;max-width:100%}input,button,textarea,select{font:inherit}p,h1,h2,h3,h4,h5,h6{overflow-wrap:break-word}p{text-wrap:pretty}h1,h2,h3,h4,h5,h6{text-wrap:balance}h1,h2,h3,h4,h5,h6{color:var(--text-1);font-weight:584.62;letter-spacing:0}h1{font-size:28px;line-height:32px;margin-block:0 16px}h2{font-size:24px;line-height:28px;margin-block:32px 12px}h3{font-size:20px;line-height:24px;margin-block:24px 12px}h4{font-size:17px;line-height:20px;margin-block:20px 8px}h5{font-size:15px;line-height:20px;margin-block:16px 8px}h6{font-size:13px;line-height:16px;margin-block:16px 4px}strong{font-weight:600}code{line-height:1em}code,kbd,samp,pre{letter-spacing:0}ul,ol{padding-left:3ch}:is(ul,ol)>li{margin-bottom:.5em}:is(ul,ol)>li::marker{color:var(--text-5)}menu{list-style:none;padding:0;margin:0}menu>li{margin:0}a:not(:where([role=button])),a:not(:where([role=button])):link,a:not(:where([role=button])):visited{color:var(--link-color);text-decoration:underline;text-decoration-style:solid;text-decoration-color:color-mix(in srgb,currentColor 75%,transparent);text-decoration-thickness:.5px;text-underline-offset:3px}@media(hover:hover)and (pointer:fine){a:not(:where([role=button])):hover{color:var(--link-color-hover);text-decoration-thickness:1px}}a:not(:where([role=button])):active{text-decoration-color:color-mix(in srgb,currentColor 75%,transparent)}::selection{background:color-mix(in srgb,var(--text-1-brand),transparent 85%)}table{border-collapse:collapse;font-variant-numeric:lining-nums tabular-nums}caption{text-align:left;color:var(--text-3);padding-left:10px;margin-bottom:.25em}th,td{padding:5px 10px;text-align:left;vertical-align:top;border-bottom:1px solid var(--border-4)}thead th{font-weight:600}tfoot tr:last-child>:is(th,td),table:not(:has(tfoot)) tbody tr:last-child>:is(th,td){border-bottom:none}table[data-bordered]{border-collapse:separate;border-spacing:0;border:1px solid var(--border-4);border-radius:3px}table[data-bordered] :is(th,td){border-right:1px solid var(--border-4)}table[data-bordered] tr>:is(th,td):last-child{border-right:0}}