@antadesign/anta 0.3.12 → 0.3.14

package/dist/elements/a-toast.js

@@ -0,0 +1,283 @@
+import { HTMLElementBase, installDismissTrigger } from "../anta_helpers";
+import "./a-toast.css";
+const EXIT_MS = 220;
+const DEFAULT_DURATION = 5e3;
+const DISMISS_ATTR = "data-toast-dismiss";
+class AToastElement extends HTMLElementBase {
+  // `leaving` triggers the exit; `rev` (bumped on an in-place update) restarts
+  // the timer. `duration` is read on demand, not observed.
+  static observedAttributes = ["leaving", "rev"];
+  /** Off-DOM state channel — drives `:state(leaving)` for the exit fade. */
+  #internals;
+  /** The content slot. Also the element the `--toast-remaining` countdown
+   *  animates on, so slotted content can inherit the value (see SHADOW_STYLE). */
+  #slot;
+  /** A DOM node handed in via the `content` property (the wrapper's DOM-node
+   *  branch). String / JSX content arrives as slotted children instead. */
+  #content;
+  /** The content node we last slotted, so an in-place update can swap or clear it
+   *  without touching the reconciler's own children. */
+  #slotted;
+  #timer;
+  #exitTimer;
+  /** Time left on the auto-dismiss timer (ms), tracked across pause/resume. */
+  #remaining = 0;
+  /** When the current run started, for computing remaining on pause. */
+  #startedAt = 0;
+  #leaving = false;
+  // Independent pause holds — the countdown runs only when BOTH are false.
+  #hovered = false;
+  #focused = false;
+  constructor() {
+    super();
+    try {
+      this.#internals = this.attachInternals?.();
+    } catch (err) {
+      console.warn("a-toast: ElementInternals unavailable \u2014 exit fade disabled.", err);
+    }
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.#slot = document.createElement("slot");
+    shadow.append(style, this.#slot);
+    installDismissTrigger(this, DISMISS_ATTR, () => this.dismiss());
+  }
+  connectedCallback() {
+    this.#applyContent();
+    this.addEventListener("pointerenter", this.#onPointerEnter);
+    this.addEventListener("pointerleave", this.#onPointerLeave);
+    this.addEventListener("focusin", this.#onFocusIn);
+    this.addEventListener("focusout", this.#onFocusOut);
+    if (this.hasAttribute("leaving")) {
+      this.dismiss();
+      return;
+    }
+    this.#startTimer();
+  }
+  disconnectedCallback() {
+    this.#clearTimer();
+    if (this.#exitTimer != null) {
+      this.view.clearTimeout(this.#exitTimer);
+      this.#exitTimer = void 0;
+    }
+    this.removeEventListener("pointerenter", this.#onPointerEnter);
+    this.removeEventListener("pointerleave", this.#onPointerLeave);
+    this.removeEventListener("focusin", this.#onFocusIn);
+    this.removeEventListener("focusout", this.#onFocusOut);
+  }
+  attributeChangedCallback(name) {
+    if (name === "leaving") {
+      if (this.hasAttribute("leaving")) {
+        if (this.isConnected) this.dismiss();
+      } else if (this.#leaving) {
+        this.#revive();
+      }
+    } else if (name === "rev") {
+      if (this.isConnected) this.restart();
+    }
+  }
+  /** Cancel a pending exit and bring the toast back (an upsert landed during the
+   *  exit window). */
+  #revive() {
+    if (this.#exitTimer != null) {
+      this.view.clearTimeout(this.#exitTimer);
+      this.#exitTimer = void 0;
+    }
+    this.#leaving = false;
+    this.#internals?.states.delete("leaving");
+    this.#startTimer();
+  }
+  /** A live DOM node to show as the content (set by the wrapper's DOM-node
+   *  branch). Paired getter/setter so React 19's property assignment works. */
+  get content() {
+    return this.#content ?? null;
+  }
+  set content(node) {
+    this.#content = node ?? void 0;
+    this.#applyContent();
+  }
+  /** Slot the content node into our own light DOM. Only ever touches the node WE
+   *  slotted (tracked in `#slotted`), never the reconciler's children: it removes
+   *  the previous node and appends the new one, or removes it when `content` goes
+   *  null (an in-place update swapping DOM-node content for a string / JSX — else
+   *  the stale node would stack under the new content). String / JSX content
+   *  arrives as reconciler-owned children, so `#content` is undefined and this
+   *  only clears any node we had slotted. */
+  #applyContent() {
+    if (this.#content === this.#slotted) return;
+    if (this.#slotted?.parentNode === this) this.removeChild(this.#slotted);
+    this.#slotted = this.#content;
+    if (this.#content) this.append(this.#content);
+  }
+  /** Auto-dismiss delay in ms. Empty / non-positive falls back to the 5000ms
+   *  default; `Infinity` is sticky (never auto-dismisses). */
+  get #duration() {
+    const a = this.getAttribute("duration");
+    if (a == null) return DEFAULT_DURATION;
+    const n = Number(a);
+    if (n === Infinity) return Infinity;
+    return Number.isFinite(n) && n > 0 ? n : DEFAULT_DURATION;
+  }
+  /** Paused while either hold is active. */
+  get #paused() {
+    return this.#hovered || this.#focused;
+  }
+  #startTimer() {
+    this.#remaining = this.#duration;
+    this.#startCountdown();
+    this.#armIfActive();
+  }
+  /** Set up (or restart) the display countdown that drives `--toast-remaining`
+   *  1 → 0 on the slot over `duration`; slotted content inherits it. It's display
+   *  only — the auto-dismiss above is the real JS timer — so it degrades to a
+   *  static full bar where custom-property animation is unsupported. Sticky
+   *  (`Infinity` duration) runs no countdown; the var stays at its initial 1. */
+  #startCountdown() {
+    if (Number.isFinite(this.#duration)) {
+      this.#slot.style.animation = `toast-remaining ${this.#duration}ms linear forwards`;
+      this.#eachCountdown((a) => {
+        a.currentTime = 0;
+      });
+      if (this.#paused || this.#leaving) this.#pauseCountdown();
+    } else {
+      this.#slot.style.animation = "";
+    }
+  }
+  /** Run `fn` for the `--toast-remaining` animation on the slot, if present.
+   *  Guarded — `getAnimations` / animation control may be absent in a partial
+   *  runtime, and the countdown is non-essential (never let it break the toast). */
+  #eachCountdown(fn) {
+    try {
+      for (const a of this.#slot.getAnimations?.() ?? []) {
+        if (a.animationName === "toast-remaining") fn(a);
+      }
+    } catch {
+    }
+  }
+  #pauseCountdown() {
+    this.#eachCountdown((a) => a.pause());
+  }
+  #playCountdown() {
+    this.#eachCountdown((a) => a.play());
+  }
+  /** Start (or resume) the dismiss timer only when it should be running: a finite
+   *  duration (a non-finite one is sticky), not leaving, not paused, not already
+   *  running. */
+  #armIfActive() {
+    if (this.#timer != null || this.#leaving || this.#paused || !Number.isFinite(this.#duration)) return;
+    if (this.#remaining <= 0) {
+      this.dismiss();
+      return;
+    }
+    this.#startedAt = Date.now();
+    this.#timer = this.view.setTimeout(() => {
+      this.#timer = void 0;
+      this.dismiss();
+    }, this.#remaining);
+    this.#playCountdown();
+  }
+  #clearTimer() {
+    if (this.#timer != null) {
+      this.view.clearTimeout(this.#timer);
+      this.#timer = void 0;
+    }
+  }
+  /** Freeze the timer, banking the time left, and freeze the display countdown
+   *  with it. Idempotent. */
+  #pause() {
+    if (this.#timer == null) return;
+    this.#remaining -= Date.now() - this.#startedAt;
+    this.#clearTimer();
+    this.#pauseCountdown();
+  }
+  #onPointerEnter = () => {
+    this.#hovered = true;
+    this.#pause();
+  };
+  #onPointerLeave = () => {
+    this.#hovered = false;
+    this.#armIfActive();
+  };
+  #onFocusIn = () => {
+    this.#focused = true;
+    this.#pause();
+  };
+  #onFocusOut = () => {
+    this.#focused = false;
+    this.#armIfActive();
+  };
+  #reducedMotion() {
+    return this.view.matchMedia?.("(prefers-reduced-motion: reduce)").matches ?? false;
+  }
+  /** How long to wait after starting the exit before emitting `dismiss` (node
+   *  removal). Read from the computed `--toast-dur` token so it tracks a consumer
+   *  override and the removal fires exactly when the fade ends — instead of a
+   *  fixed 220ms that desyncs from a changed `--toast-dur`. 0 under reduced motion
+   *  (the shadow transition is gated off there); `EXIT_MS` if it can't be read. */
+  #exitDuration() {
+    if (this.#reducedMotion()) return 0;
+    const raw = this.view.getComputedStyle?.(this).getPropertyValue("--toast-dur").trim();
+    if (raw) {
+      const n = parseFloat(raw);
+      if (Number.isFinite(n)) return raw.endsWith("ms") ? n : n * 1e3;
+    }
+    return EXIT_MS;
+  }
+  /** Restart the auto-dismiss timer from the current `duration` (an in-place
+   *  update). If the toast is currently paused, the fresh time is banked and the
+   *  countdown stays paused until hover / focus releases. */
+  restart() {
+    if (this.#leaving) return;
+    this.#clearTimer();
+    this.#startTimer();
+  }
+  /** Play the exit (shadow only), then emit a bubbling `dismiss`. The owner
+   *  removes the node on that event — the element never removes itself.
+   *  Idempotent. */
+  dismiss() {
+    if (this.#leaving) return;
+    this.#leaving = true;
+    this.#clearTimer();
+    this.#pauseCountdown();
+    this.#internals?.states.add("leaving");
+    const wait = this.#exitDuration();
+    this.#exitTimer = this.view.setTimeout(() => {
+      this.#exitTimer = void 0;
+      this.dispatchEvent(new CustomEvent("dismiss", { bubbles: true, composed: true }));
+    }, wait);
+  }
+}
+const SHADOW_STYLE = `
+  :host { display: block; opacity: 1; translate: 0 0; }
+  :host(:state(leaving)) { opacity: 0; }
+
+  @starting-style {
+    :host { opacity: 0; translate: 0 12px; }
+  }
+
+  @media (prefers-reduced-motion: no-preference) {
+    :host {
+      transition:
+        opacity var(--toast-dur, 220ms) ease,
+        translate var(--toast-dur, 220ms) ease;
+    }
+  }
+
+  slot { display: block; }
+
+  @keyframes toast-remaining {
+    from { --toast-remaining: 1; }
+    to { --toast-remaining: 0; }
+  }
+`;
+function register_a_toast() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-toast")) {
+    customElements.define("a-toast", AToastElement);
+  }
+}
+register_a_toast();
+export {
+  AToastElement,
+  register_a_toast
+};

package/dist/elements/a-toaster.css

@@ -0,0 +1 @@
+@layer anta{a-toaster{--toaster-inset: 16px;--toaster-gap: 12px;--toaster-width: 380px}a-toaster:not(:defined){display:none}}

package/dist/elements/a-toaster.d.ts

@@ -0,0 +1,30 @@
+import { HTMLElementBase } from '../anta_helpers';
+import './a-toaster.css';
+/**
+ * `<a-toaster>` — a viewport-anchored notification region. One instance hosts all
+ * six placement zones; each `<a-toast>` routes to a corner/edge by its `slot`
+ * attribute (`slot="bottom-right"`, …). The `<Toaster>` wrapper keeps it mounted
+ * and renders its `<a-toast>` children through the reconciler; this element only
+ * lays them out — it touches its own shadow and reads its children, never a host
+ * or light-DOM write.
+ *
+ * Shadow structure:
+ *
+ *   <div part="region" popover="manual">   ← top-layer, viewport-covering, click-through
+ *     <slot name="top-left">    …           ← one flex column per zone, pinned to its edge
+ *     <slot name="bottom-right"> …
+ *
+ * The region is a `popover` so it renders in the top layer and escapes any
+ * transformed / clipping ancestor of wherever `<Toaster>` is mounted. It's shown
+ * only while it holds at least one toast (`showPopover`) and hidden when empty
+ * (`hidePopover`), so it never sits in the top layer for nothing. Natural
+ * top-layer ordering stands: a dialog or menu opened afterward can cover it (by
+ * design — toasts don't force themselves above modals).
+ */
+export declare class AToasterElement extends HTMLElementBase {
+    #private;
+    constructor();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}
+export declare function register_a_toaster(): void;

package/dist/elements/a-toaster.js

@@ -0,0 +1,98 @@
+import { HTMLElementBase } from "../anta_helpers";
+import { TOAST_PLACEMENTS } from "../toaster";
+import "./a-toaster.css";
+const ZONES = TOAST_PLACEMENTS;
+class AToasterElement extends HTMLElementBase {
+  #region;
+  #shown = false;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = SHADOW_STYLE;
+    this.#region = document.createElement("div");
+    this.#region.className = "region";
+    this.#region.setAttribute("part", "region");
+    this.#region.setAttribute("popover", "manual");
+    for (const zone of ZONES) {
+      const slot = document.createElement("slot");
+      slot.name = zone;
+      this.#region.append(slot);
+    }
+    this.#region.addEventListener("slotchange", this.#syncVisibility);
+    shadow.append(style, this.#region);
+  }
+  connectedCallback() {
+    this.#syncVisibility();
+  }
+  disconnectedCallback() {
+    this.#shown = false;
+  }
+  /** Show the region while it holds a toast, hide it when empty. A child count
+   *  read + a shadow popover toggle — no host or light-DOM mutation. */
+  #syncVisibility = () => {
+    const region = this.#region;
+    if (typeof region.showPopover !== "function") return;
+    const has = this.childElementCount > 0;
+    if (has && !this.#shown) {
+      if (!this.isConnected) return;
+      try {
+        region.showPopover();
+        this.#shown = true;
+      } catch {
+      }
+    } else if (!has && this.#shown) {
+      try {
+        if (region.matches(":popover-open")) region.hidePopover();
+      } catch {
+      }
+      this.#shown = false;
+    }
+  };
+}
+const SHADOW_STYLE = `
+  :host { display: contents; }
+
+  .region {
+    position: fixed;
+    inset: 0;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    background: transparent;
+    overflow: visible;
+    pointer-events: none;
+    width: auto;
+    height: auto;
+  }
+  .region:popover-open { display: block; }
+
+  slot {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    gap: var(--toaster-gap, 12px);
+    width: min(var(--toaster-width, 380px), calc(100vw - 2 * var(--toaster-inset, 16px)));
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+
+  ::slotted(*) { pointer-events: auto; }
+
+  slot[name^="top-"] { top: var(--toaster-inset, 16px); flex-direction: column-reverse; }
+  slot[name^="bottom-"] { bottom: var(--toaster-inset, 16px); flex-direction: column; }
+  slot[name$="-left"] { left: var(--toaster-inset, 16px); }
+  slot[name$="-right"] { right: var(--toaster-inset, 16px); }
+  slot[name$="-center"] { left: 50%; transform: translateX(-50%); }
+`;
+function register_a_toaster() {
+  if (typeof customElements === "undefined") return;
+  if (!customElements.get("a-toaster")) {
+    customElements.define("a-toaster", AToasterElement);
+  }
+}
+register_a_toaster();
+export {
+  AToasterElement,
+  register_a_toaster
+};

package/dist/elements/a-tooltip.js

@@ -4,7 +4,7 @@ import "./a-tooltip.css";
 const MARGIN = 4;
 const CURSOR_SIZE = 16;
 const PADDING_X = 8;
-const DEFAULT_DELAY = 250;
+const DEFAULT_DELAY = 300;
 const FADE_MS = 150;
 const GRACE_MS = 300;
 const CLOSE_DELAY = 120;

package/dist/elements/index.d.ts

@@ -35,5 +35,6 @@ export { ATabsElement, register_a_tabs } from './a-tabs';
 export { ATabPanelElement, register_a_tabpanel } from './a-tabpanel';
 export { ADialogElement, register_a_dialog } from './a-dialog';
 export { ACardElement, register_a_card } from './a-card';
+export { ABannerElement, register_a_banner } from './a-banner';
 import './a-title.css';
 import './a-tag.css';

package/dist/elements/index.js

@@ -20,9 +20,11 @@ import { ATabsElement, register_a_tabs } from "./a-tabs";
 import { ATabPanelElement, register_a_tabpanel } from "./a-tabpanel";
 import { ADialogElement, register_a_dialog } from "./a-dialog";
 import { ACardElement, register_a_card } from "./a-card";
+import { ABannerElement, register_a_banner } from "./a-banner";
 import "./a-title.css";
 import "./a-tag.css";
 export {
+  ABannerElement,
   AButtonElement,
   ACalendarElement,
   ACardElement,
@@ -45,6 +47,7 @@ export {
   ATabsElement,
   ATextElement,
   ATooltipElement,
+  register_a_banner,
   register_a_button,
   register_a_calendar,
   register_a_card,

package/dist/general_types.d.ts

@@ -1,9 +1,12 @@
 import type { IconShape } from './elements/a-icon.shapes';
 /** Common props for JSX component wrappers. */
 export interface BaseProps {
-    /** CSS class name. Merged with any internal classes by the component. */
+    /** CSS class on the component's root element (merged with the component's own
+     *  classes). Use it directly for layout and positioning — grid/flex placement,
+     *  margins, alignment — rather than wrapping the component in a `<div>`/`<span>`. */
     className?: string;
-    /** Inline styles applied to the root element. */
+    /** Inline styles on the component's root element. Set layout/positioning here
+     *  (or via `className`) directly on the component instead of adding a wrapper. */
     style?: React.CSSProperties;
     /** Child elements. When provided, replaces the component's default label/content. */
     children?: React.ReactNode;
@@ -172,8 +175,8 @@ export interface AProgressAttributes extends BaseAttributes {
  * from `@antadesign/anta`.
  */
 export interface ATextAttributes extends BaseAttributes {
-    /** Visual priority. Maps to text-1..text-5. */
-    priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
+    /** Visual priority. Maps to text-1..text-4. */
+    priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
     /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale; a named
      *  tone applies the matching `--text-{N}-{tone}` palette; any literal CSS color
      *  is a custom tone (hue kept, lightness/chroma pinned per priority in oklch). */
@@ -207,8 +210,8 @@ export interface ATextAttributes extends BaseAttributes {
 export interface ATitleAttributes extends BaseAttributes {
     /** Heading level as a string attribute, '1'-'6'. */
     level?: string;
-    /** Visual priority. Maps to text-1..text-5. */
-    priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
+    /** Visual priority. Maps to text-1..text-4. */
+    priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary';
     /** Color tint. `neutral` (default) is the untinted `--text-{N}` scale; a named
      *  tone applies the matching `--text-{N}-{tone}` palette; any literal CSS color
      *  is a custom tone (hue kept, lightness/chroma pinned per priority in oklch). */
@@ -374,7 +377,7 @@ export interface AIconAttributes extends BaseAttributes {
  * `Tooltip` from `@antadesign/anta`.
  */
 export interface ATooltipAttributes extends BaseAttributes {
-    /** Show delay in milliseconds. Never use `0` — use ~`50`. Defaults to 250. */
+    /** Show delay in milliseconds. Never use `0` — use ~`50`. Defaults to 300. */
     delay?: number | string;
     /** Preferred side; auto-flips when there's no room. Defaults to `'bottom'`. */
     placement?: 'top' | 'bottom';
@@ -635,8 +638,8 @@ export interface ACalendarAttributes extends BaseAttributes {
  */
 export interface AMenuAttributes extends BaseAttributes {
     /** Preferred placement relative to the trigger; auto-flips / clamps.
-     *  Defaults to `'bottom-start'`. */
-    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom' | 'top';
+     *  Defaults to `'bottom-start'`. `right` / `left` place the menu beside the trigger. */
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom' | 'top' | 'right-start' | 'right-end' | 'left-start' | 'left-end' | 'right' | 'left';
     /** Open on right-click of the trigger region, positioned at the pointer.
      *  Presence-based (`''` on, omit off). */
     context?: boolean | '';
@@ -1078,3 +1081,43 @@ export interface ACardAttributes extends BaseAttributes {
      *  chain the element derives in link mode. */
     'aria-label'?: string;
 }
+/**
+ * Attributes for the `<a-banner>` custom element — a full-width, dismissible
+ * message strip (borderless by default; opt into a rule via `border-bottom-width` /
+ * `border-width`, the Progress pattern). Slots (light-DOM children): `message`
+ * (leading), the default slot (middle content), `actions` (trailing), and `close`
+ * (the ✕ button). The element exposes `::part(message | content | actions | close)`,
+ * and `:state(open)` / `:state(closed)` as visibility hooks (the external
+ * sheet collapses the host on `:state(closed)`). Low-level attributes; for the
+ * typed JSX wrapper use `Banner` from `@antadesign/anta`.
+ */
+export interface ABannerAttributes extends BaseAttributes {
+    /** Controlled visibility (`'open'` / `'closed'`). Present → controlled: the
+     *  attribute is the source of truth, the ✕ dismiss only dispatches the cancelable
+     *  `statechange` event, and the consumer answers by updating it. Absent →
+     *  uncontrolled (use `default-state`). The `<Banner>` wrapper presents this as
+     *  `dismissed` (closed = dismissed). See STATEFUL-COMPONENTS.md. */
+    state?: 'open' | 'closed';
+    /** Initial visibility for the uncontrolled mode (`'open'` / `'closed'`), read
+     *  once at connect. A banner is shown by default, so omit / `'open'` shows it;
+     *  `'closed'` starts it dismissed. */
+    'default-state'?: 'open' | 'closed';
+    /** Semantic tone, or any literal CSS color for a one-off custom tone. Named tones
+     *  re-point the surface + text + border colour (used if you opt into a border); a
+     *  custom color keeps its hue with lightness/chroma pinned. `'neutral'` is the
+     *  default (same as omitting it). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Rounded corners for a standalone banner — `border-radius: 999px` (clamps to a
+     *  stadium), or a custom radius via a length value (`round="12px"`). Borderless
+     *  like the default. Presence-based for the boolean form. */
+    round?: boolean | number | string;
+    /** Fires before visibility changes — the element dispatches a `cancelable`
+     *  `statechange` `CustomEvent` whose `detail` is `{ next, prev }` in the
+     *  `'open'|'closed'` vocabulary (a dismiss is always `next: 'closed'`).
+     *  Uncontrolled, `preventDefault()` vetoes the transition. All-lowercase so both
+     *  renderers bind it (React 19 keeps the case after `on`; Preact lowercases). */
+    onstatechange?: (e: CustomEvent<{
+        next: 'open' | 'closed';
+        prev: 'open' | 'closed';
+    }>) => void;
+}

package/dist/index.d.ts

@@ -63,7 +63,7 @@ export type { CalendarDay, CalendarWeekday, CalendarMonth, BuildMonthOptions, Pa
 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 type { SelectProps, SelectCommonProps, OptionValue, SelectOption, SelectGroup, SelectSubmenu, SelectItem, SelectChangeAttrs, OptionState, TriggerState, EmptyState, SelectionState, SelectedOption, SelectedGroup, SelectedSubmenu, SelectedItem, } from './components/Select';
 export { SelectFaceted } from './components/SelectFaceted';
 export type { SelectFacetedProps, SelectFacet, SelectFacetSingle, SelectFacetMultiple, SelectFacetText, SelectFacetCustom, SelectFacetCustomContext, SelectFacetedValue, SelectFacetedChangeAttrs, SelectFacetedTriggerState, } from './components/SelectFaceted';
 export { Tabs } from './components/Tabs';
@@ -74,6 +74,8 @@ export { Dialog } from './components/Dialog';
 export type { DialogProps } from './components/Dialog';
 export { Card } from './components/Card';
 export type { CardProps } from './components/Card';
+export { Banner } from './components/Banner';
+export type { BannerProps } from './components/Banner';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
 export type { AntaIntrinsicElements } from './jsx-runtime';

package/dist/index.js

@@ -42,8 +42,10 @@ import { Tabs } from "./components/Tabs";
 import { TabPanel } from "./components/TabPanel";
 import { Dialog } from "./components/Dialog";
 import { Card } from "./components/Card";
+import { Banner } from "./components/Banner";
 import { configure } from "./jsx-runtime";
 export {
+  Banner,
   Button,
   ButtonCopy,
   Calendar,

package/dist/jsx-runtime.d.ts

@@ -41,7 +41,7 @@ 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, ACopyAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AExpanderAttributes, AIconAttributes, AButtonAttributes, ACopyAttributes, ACheckboxAttributes, ATooltipAttributes, AInputAttributes, AInputTimeAttributes, ACalendarAttributes, ARadioAttributes, ARadioGroupAttributes, AMenuAttributes, AMenuItemAttributes, AMenuGroupAttributes, ATabsAttributes, ATabAttributes, ATabpanelAttributes, ADialogAttributes, ACardAttributes, ABannerAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     interface IntrinsicElements extends React.JSX.IntrinsicElements, AntaIntrinsicElements {
     }
@@ -94,4 +94,6 @@ export interface AntaIntrinsicElements {
     'a-tabpanel': ATabpanelAttributes;
     'a-dialog': ADialogAttributes;
     'a-card': ACardAttributes;
+    'a-banner': ABannerAttributes;
+    'a-banner-message': BaseAttributes;
 }

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 oklch,var(--focus-ring) 20%,transparent)}.dark ::selection{background:color-mix(in oklch,var(--focus-ring) 30%,transparent)}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}}
+@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}dfn{font-style:normal;text-decoration:underline dotted;text-underline-offset:3px;text-decoration-color:color-mix(in oklch,currentColor 50%,transparent)}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 oklch,var(--focus-ring) 20%,transparent)}.dark ::selection{background:color-mix(in oklch,var(--focus-ring) 30%,transparent)}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}}