@antadesign/anta 0.3.2 → 0.3.4

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
@@ -326,6 +339,9 @@ export interface ATooltipAttributes extends BaseAttributes {
      *  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;
@@ -343,15 +359,15 @@ export interface ATooltipAttributes extends BaseAttributes {
  * `@antadesign/anta`.
  */
 export interface ACheckboxAttributes extends BaseAttributes {
-    /** Mark colour (checked fill + unselected box border), 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).
-     *  The label + hint stay neutral — use `tone-text` for those. */
+    /** 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 & {});
-    /** Text colour (label + hint), independent of `tone`. A named tone or any literal
-     *  CSS color; named tones track light/dark via the `--text-*` role tokens. Omit
-     *  (or `'neutral'`) to leave the text neutral. */
-    'tone-text'?: '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';
     /** Controlled state — the element reflects changes to this attribute. Use this
@@ -363,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"`. */
@@ -423,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
@@ -456,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>`
@@ -476,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;
@@ -492,6 +572,15 @@ export interface AMenuAttributes extends BaseAttributes {
         next: 'open' | 'closed';
         prev: 'open' | 'closed';
     }>) => void;
+    /** Combobox-mode cursor report — fired when the active option changes (arrow
+     *  keys, or the list re-filtering), with `detail.id` the active option's `id`
+     *  (`null` when none). The element owns the keyboard cursor but must NOT write
+     *  `aria-activedescendant` on the (light-DOM) filter field itself; the reactive
+     *  layer that owns the field (e.g. `Select`) listens here and reflects it.
+     *  All-lowercase so React/Preact bind it to the CustomEvent. */
+    onactivedescendant?: (e: CustomEvent<{
+        id: string | null;
+    }>) => void;
     /** ARIA role — the JSX wrapper sets this to `'menu'`. */
     role?: string;
     'aria-orientation'?: 'vertical' | 'horizontal';
@@ -503,9 +592,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). */
@@ -516,10 +611,20 @@ export interface AMenuItemAttributes extends BaseAttributes {
     /** ARIA role — `'menuitem'`. */
     role?: string;
     'aria-haspopup'?: 'menu' | 'true' | 'false' | boolean;
-    /** Submenu-parent expanded state. Render `'false'` as the resting baseline;
-     *  the nested `<a-menu>` element reflects the live open state. */
+    /** Available for hand-authored markup, but the `MenuItem` wrapper does NOT set
+     *  it: keeping it in sync would need a light-DOM mutation (desyncs the
+     *  worker-thread reactive model) or reactive state for one attribute, and a
+     *  static value would lie once the submenu opens. `aria-haspopup` announces the
+     *  submenu; the open branch's visual rides the nested `<a-menu>`'s `:state(open)`. */
     'aria-expanded'?: 'true' | 'false' | boolean;
     'aria-disabled'?: 'true' | 'false' | boolean;
+    /** Fired when this row is genuinely activated (click / Enter / Space). The
+     *  parent `<a-menu>` owns click delegation and dispatches this — already
+     *  filtered so it never fires on a submenu parent or from a bubbled child
+     *  click — so the `MenuItem` wrapper's `onSelect` needs no DOM traversal. It's
+     *  a `MouseEvent`, carrying the modifier keys (e.g. `altKey`). All-lowercase so
+     *  React/Preact bind it to the CustomEvent. */
+    onmenuselect?: (e: MouseEvent) => void;
 }
 /**
  * Attributes for the `<a-menu-group>` styled element. For the typed JSX
@@ -554,6 +659,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. */
@@ -574,15 +682,15 @@ export interface AButtonAttributes extends BaseAttributes {
 export interface ARadioAttributes extends BaseAttributes {
     /** This option's identity / submitted value. */
     value?: string;
-    /** Mark colour (selected ring fill + dot, unselected ring border), or any literal
-     *  CSS color for a one-off custom tone. Named tones track light/dark mode via the
-     *  theme-aware role tokens. `'neutral'` is the default. The label + hint stay
-     *  neutral — use `tone-text` for those. */
+    /** 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 & {});
-    /** Text colour (label + hint), independent of `tone`. A named tone or any literal
-     *  CSS color; named tones track light/dark via the `--text-*` role tokens. Omit
-     *  (or `'neutral'`) to leave the text neutral. */
-    'tone-text'?: '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';
     /** Disabled state. Presence-based (`''` on, omit off). */
@@ -625,13 +733,13 @@ export interface ARadioGroupAttributes extends BaseAttributes {
     /** Form field name — the group submits `name=value`. */
     name?: string;
     /** Mark 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. The option text stays neutral —
-     *  use `tone-text`. */
+     *  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 & {});
-    /** Text tone cascaded to children's label + hint, independent of `tone`. A named
-     *  tone or any literal CSS color. Omit (or `'neutral'`) to leave the text neutral. */
-    'tone-text'?: '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';
     /** Validation/feedback tone for the group hint — same set as `<a-input>`'s
@@ -691,6 +799,9 @@ export interface ATabAttributes extends BaseAttributes {
     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`
@@ -740,6 +851,10 @@ export interface ATabsAttributes extends BaseAttributes {
     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
@@ -771,14 +886,15 @@ export interface ATabsAttributes extends BaseAttributes {
  * 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. */
+    /** Pairs the panel with the tab of the same value. The element reads its
+     *  `<a-tabs>` and shows itself when this is the active value. */
+    value?: string;
+    /** How the panel hides while inactive: omit for `display:none` (removed from
+     *  layout + the a11y tree), or `'visibility'` to keep its layout box. The
+     *  element toggles its own `:state(active)`; this only picks the hide style. */
+    'hide-mode'?: 'display' | 'visibility';
+    /** ARIA — set statically by the `TabPanel` wrapper. `aria-labelledby` is NOT an
+     *  attribute here: the element points at its tab off-DOM via
+     *  `internals.ariaLabelledByElements`. */
     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,12 +45,18 @@ 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, optionsWithSelection } from './components/Select';
+export type { SelectProps, SelectCommonProps, SelectOption, SelectGroup, SelectSubmenu, SelectItem, SelectChangeAttrs, OptionState, TriggerState, EmptyState, SelectionState, SelectedOption, SelectedGroup, SelectedSubmenu, SelectedItem, } 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 type { TabsProps, TabOption, TabsChangeAttrs } from './components/Tabs';
 export { TabPanel } from './components/TabPanel';
 export type { TabPanelProps } from './components/TabPanel';
 export type { BaseProps, BaseAttributes } from './general_types';

package/dist/index.js

@@ -13,31 +13,66 @@ 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, optionsWithSelection } 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,
-  Tab,
+  Select,
   TabPanel,
   Tabs,
   Tag,
   Text,
   Title,
   Tooltip,
-  configure
+  buildMonth,
+  clampDate,
+  configure,
+  dateFormatPattern,
+  dateTimeFormatPattern,
+  firstDayOfWeek,
+  formatDateInput,
+  formatDateTimeInput,
+  getWeekdays,
+  isOutOfRange,
+  optionsWithSelection,
+  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, ATabsAttributes, ATabAttributes, ATabpanelAttributes, 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,6 +81,8 @@ 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;

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}}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.3.2",
+  "version": "0.3.4",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -52,6 +52,7 @@
     "dev": "echo $$ > .dev.pid; trap 'rm -f .dev.pid' EXIT; nodemon -w src -w stickers/src -e ts,tsx,css -x 'pnpm run build:dev && pnpm --filter @antadesign/stickers run build:dev && pnpm --filter anta-site run docs' & pnpm --filter anta-site run dev & wait",
     "stop": "node scripts/dev-stop.mjs",
     "typecheck": "tsc --noEmit -p src/tsconfig.json",
+    "lint": "node scripts/lint-getters.mjs",
     "icons": "node scripts/generate-icons.mjs --input src/elements/icons --output src/elements --name a-icon.shapes --internal",
     "clean": "rm -rf dist",
     "prepare": "pnpm run build",
@@ -65,7 +66,8 @@
   },
   "dependencies": {
     "clsx": "^2.1.0",
-    "es-toolkit": "1.47.0"
+    "es-toolkit": "1.47.0",
+    "temporal-polyfill": "^1.0.1"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"