@antadesign/anta 0.2.1 → 0.3.0

package/dist/components/Input.js

@@ -0,0 +1,150 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { nativeStateChange, toneStyle } from "../anta_helpers";
+import { Button } from "./Button";
+import { Icon } from "./Icon";
+const presence = (on) => on ? "" : void 0;
+const isStringish = (n) => typeof n === "string" || typeof n === "number";
+const attrsOf = (e) => {
+  const el = e?.target ?? {};
+  const value = el.value ?? "";
+  return {
+    value,
+    name: el.getAttribute?.("name") ?? void 0,
+    empty: !value,
+    valid: el.validity ? el.validity.valid : void 0,
+    validationMessage: el.validationMessage ?? ""
+  };
+};
+const AUTOCOMPLETE_BY_TYPE = { email: "email", tel: "tel", url: "url" };
+const INPUTMODE_BY_TYPE = {
+  email: "email",
+  tel: "tel",
+  url: "url",
+  number: "numeric"
+};
+const STATUS_ICON = {
+  critical: "warning-diamond",
+  warning: "warning-triangle",
+  success: "circle-check",
+  info: "info",
+  brand: "circle-small-solid"
+};
+const Input = ({
+  label,
+  hint,
+  status,
+  statusIcon,
+  tone,
+  size,
+  value,
+  defaultValue,
+  multiline,
+  rows,
+  maxRows,
+  clearable,
+  leading,
+  trailing,
+  type,
+  autoComplete,
+  inputMode,
+  name,
+  placeholder,
+  disabled,
+  readOnly,
+  required,
+  dimActions,
+  spellCheck,
+  maxLength,
+  minLength,
+  pattern,
+  min,
+  max,
+  step,
+  onInput,
+  onChange,
+  onAnyChange,
+  onClearClick,
+  onClearInput,
+  children,
+  className,
+  style,
+  ...rest
+}) => {
+  const statusTone = status && status !== "neutral" ? status : void 0;
+  const glyph = statusIcon === void 0 ? statusTone ? STATUS_ICON[statusTone] : void 0 : statusIcon;
+  return /* @__PURE__ */ jsxs(
+    "a-input",
+    {
+      size: size && size !== "medium" ? size : void 0,
+      value,
+      defaultvalue: defaultValue,
+      multiline: presence(multiline || rows != null),
+      rows: rows != null ? String(rows) : void 0,
+      maxrows: maxRows != null ? String(maxRows) : void 0,
+      status: statusTone,
+      tone: tone || void 0,
+      type: !multiline && rows == null ? type : void 0,
+      name,
+      placeholder,
+      disabled: presence(disabled),
+      readonly: presence(readOnly),
+      required: presence(required),
+      "dim-actions": presence(dimActions),
+      autocomplete: autoComplete ?? (!multiline && rows == null && type ? AUTOCOMPLETE_BY_TYPE[type] : void 0),
+      inputmode: inputMode ?? (!multiline && rows == null && type ? INPUTMODE_BY_TYPE[type] : void 0),
+      spellcheck: spellCheck != null ? spellCheck ? "true" : "false" : void 0,
+      maxlength: maxLength != null ? String(maxLength) : void 0,
+      minlength: minLength != null ? String(minLength) : void 0,
+      pattern,
+      min,
+      max,
+      step,
+      "aria-invalid": status === "critical" ? "true" : void 0,
+      oninput: onInput || onAnyChange ? (e) => {
+        onInput?.(e);
+        onAnyChange?.(e, attrsOf(e));
+      } : void 0,
+      onchange: onChange || onAnyChange ? (e) => {
+        onChange?.(e);
+        onAnyChange?.(e, attrsOf(e));
+      } : void 0,
+      onclearclick: onClearClick ? (e) => onClearClick(nativeStateChange(e).event) : void 0,
+      onclearinput: onClearInput ? (e) => onClearInput(nativeStateChange(e).event) : void 0,
+      class: className,
+      style: toneStyle(tone, "--input-tone-source", style),
+      ...rest,
+      children: [
+        label != null && (isStringish(label) ? /* @__PURE__ */ jsx("span", { slot: "label", children: label }) : /* @__PURE__ */ jsx("span", { slot: "label", style: { display: "contents" }, children: label })),
+        leading != null && /* @__PURE__ */ jsx("span", { slot: "leading", style: { display: "contents" }, children: leading }),
+        clearable && // A real <a-button> (light DOM → fully styled, keyboard-focusable) in
+        // the element's `clear` slot — the element owns its visibility (shown
+        // only when filled + editable). It fires the bubbling `clearrequest`
+        // event via a-button's global listener, so clearing works even without
+        // framework hydration; the element turns that into clearclick→clear().
+        // CONTRACT: the `data-custom-event` value below MUST match `CLEAR_TRIGGER`
+        // in the element (src/elements/a-input.ts). The string is duplicated, not
+        // shared — importing the element module here would self-register it and
+        // break the wrapper/element decoupling. Rename in both places.
+        /* @__PURE__ */ jsx("span", { slot: "clear", style: { display: "contents" }, children: /* @__PURE__ */ jsx(
+          Button,
+          {
+            priority: "tertiary",
+            size,
+            icon: "x",
+            "aria-label": "Clear",
+            "data-custom-event": "clearrequest"
+          }
+        ) }),
+        trailing != null && /* @__PURE__ */ jsx("span", { slot: "trailing", style: { display: "contents" }, children: trailing }),
+        hint != null && /* @__PURE__ */ jsxs("span", { slot: "hint", style: { display: "contents" }, children: [
+          glyph && /* @__PURE__ */ jsx(Icon, { shape: glyph, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx("span", { children: hint })
+        ] }),
+        children
+      ]
+    }
+  );
+};
+export {
+  Input
+};

package/dist/components/Menu.d.ts

@@ -0,0 +1,70 @@
+import type { BaseProps } from '../general_types';
+export interface MenuProps extends BaseProps {
+    /** Preferred placement relative to the trigger. The cross-axis suffix
+     *  (`-start` / `-end`) aligns the left / right edges; no suffix (`bottom` /
+     *  `top`) centers the menu on the trigger. The menu auto-flips vertically and
+     *  clamps horizontally when there isn't room.
+     *  @defaultValue bottom-start */
+    placement?: 'bottom-start' | 'bottom-end' | 'top-start' | 'top-end' | 'bottom' | 'top';
+    /** Open on right-click (the `contextmenu` event) of the trigger region
+     *  instead of a left click, positioned at the pointer. */
+    context?: boolean;
+    /** Open at the pointer coordinates rather than aligned to the trigger box.
+     *  Pairs naturally with `context`; on its own it positions a left-click
+     *  menu at the cursor. */
+    coord?: boolean;
+    /** For a submenu (a `<Menu>` nested inside a `MenuItem`): also open it on
+     *  hover (with intent timing), not only on click. No effect on a root menu. */
+    hover?: boolean;
+    /** Gap in pixels between the trigger and the menu.
+     *  @defaultValue 4 */
+    offset?: number;
+    /** Controlled open state. Omit for the default **uncontrolled** menu (it
+     *  opens/closes itself via its triggers). Pass a boolean to **control** it:
+     *  the menu's visibility follows `open`, and user dismiss (Esc, outside-click,
+     *  select) fires `onStateChange` *without* self-closing — you update `open`
+     *  in response. Submenus are always uncontrolled regardless of this. See
+     *  STATEFUL-COMPONENTS.md. */
+    open?: boolean;
+    /** Fired before the open state changes — on open, and on every dismiss (Esc,
+     *  outside-click, scroll, selecting an item). `event` is the cancelable
+     *  `statechange`; `detail.next`/`detail.prev` are the requested/previous open
+     *  state (booleans). It's the declarative way to observe a menu, and the
+     *  handler you pair with `open` to drive a controlled menu (apply
+     *  `detail.next` to `open`). Uncontrolled, `event.preventDefault()` vetoes the
+     *  transition (e.g. keep the menu open). */
+    onStateChange?: (event: CustomEvent, detail: {
+        next: boolean;
+        prev: boolean;
+    }) => void;
+    /** The menu's contents: `MenuItem`, `MenuSeparator`, `MenuGroup`, or any
+     *  custom element. */
+    children?: React.ReactNode;
+}
+/**
+ * Menu — a dropdown / context menu that anchors to any target and "just
+ * works". Place `<Menu>` immediately after the trigger element (a button,
+ * say); it opens on click by default. For a whole-area right-click menu, put
+ * it after the region and pass `context`.
+ *
+ * Open state is uncontrolled by default — listen for `onStateChange`
+ * (`detail: { next, prev }`) to observe it, or pass `open` to control it. You
+ * can also grab a `ref` and call `.open()` / `.close()` / `.toggle()`.
+ * Selecting a `MenuItem` closes the menu;
+ * arbitrary injected content does not. Add `data-menu-open` to any item /
+ * container to keep it open, or `data-menu-close` to a custom element to let it
+ * close.
+ *
+ * Requires `@antadesign/anta/elements` to be imported (client-side only).
+ *
+ * @example Dropdown from a button
+ * ```tsx
+ * <a-button>Actions</a-button>
+ * <Menu>
+ *   <MenuItem icon="edit" label="Edit" kbd="⌘E" onSelect={onEdit} />
+ *   <MenuSeparator />
+ *   <MenuItem tone="critical" icon="trash" label="Delete" onSelect={onDelete} />
+ * </Menu>
+ * ```
+ */
+export declare const Menu: ({ placement, context, coord, hover, offset, open, onStateChange, className, children, ...rest }: MenuProps) => any;

package/dist/components/Menu.js

@@ -0,0 +1,42 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+import { nativeStateChange } from "../anta_helpers";
+const Menu = ({
+  placement,
+  context,
+  coord,
+  hover,
+  offset,
+  open,
+  onStateChange,
+  className,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsx(
+    "a-menu",
+    {
+      placement: placement && placement !== "bottom-start" ? placement : void 0,
+      context: context ? "" : void 0,
+      coord: coord ? "" : void 0,
+      hover: hover ? "" : void 0,
+      offset: offset != null ? String(offset) : void 0,
+      state: open === void 0 ? void 0 : open ? "open" : "closed",
+      onstatechange: onStateChange ? (e) => {
+        const { event, detail } = nativeStateChange(e);
+        if (detail)
+          onStateChange(event, {
+            next: detail.next === "open",
+            prev: detail.prev === "open"
+          });
+      } : void 0,
+      role: "menu",
+      "aria-orientation": "vertical",
+      class: className,
+      ...rest,
+      children
+    }
+  );
+};
+export {
+  Menu
+};

package/dist/components/MenuGroup.d.ts

@@ -0,0 +1,24 @@
+import type { BaseProps } from '../general_types';
+export interface MenuGroupProps extends BaseProps {
+    /** The section heading shown above the grouped items (also the group's
+     *  accessible name). */
+    label?: string;
+    /** The grouped `MenuItem`s. */
+    children?: React.ReactNode;
+}
+/**
+ * MenuGroup — a titled section that organises related `MenuItem`s. Keyboard
+ * navigation flattens items across groups, skipping the heading.
+ *
+ * Add `data-menu-open` to keep the menu open after any item in the group is
+ * chosen (it forwards to the element).
+ *
+ * @example
+ * ```tsx
+ * <MenuGroup label="Edit">
+ *   <MenuItem icon="copy" label="Copy" />
+ *   <MenuItem icon="cut" label="Cut" />
+ * </MenuGroup>
+ * ```
+ */
+export declare const MenuGroup: ({ label, className, children, ...rest }: MenuGroupProps) => any;

package/dist/components/MenuGroup.js

@@ -0,0 +1,19 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+const MenuGroup = ({ label, className, children, ...rest }) => {
+  return /* @__PURE__ */ jsxs(
+    "a-menu-group",
+    {
+      role: "group",
+      "aria-label": label,
+      class: className,
+      ...rest,
+      children: [
+        label != null && /* @__PURE__ */ jsx("a-menu-group-label", { "aria-hidden": "true", children: label }),
+        children
+      ]
+    }
+  );
+};
+export {
+  MenuGroup
+};

package/dist/components/MenuItem.d.ts

@@ -0,0 +1,50 @@
+import type { BaseProps } from '../general_types';
+import type { IconShape } from '../elements/a-icon.shapes';
+export interface MenuItemProps extends BaseProps {
+    /** Leading icon shape. */
+    icon?: IconShape;
+    /** The item's text. Omit and pass `children` for richer content. */
+    label?: string;
+    /** A trailing keyboard-shortcut hint, e.g. `"⌘E"`. */
+    kbd?: string;
+    /** A trailing icon (ignored when `submenu` is set — the chevron takes its
+     *  place). */
+    iconTrailing?: IconShape;
+    /** Disable the item: greyed out, not focusable for activation, no close. */
+    disabled?: boolean;
+    /** Semantic tone — colors the label, icon, and hover tint. `critical` is the
+     *  destructive action; `neutral` (the default) is the standard gray.
+     *  @defaultValue neutral */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical';
+    /** Marks this item as a submenu parent: adds the trailing chevron,
+     *  `aria-haspopup="menu"`, and an `aria-expanded` baseline (kept in sync by
+     *  the nested menu). Nest the flyout as a `<Menu>` child. */
+    submenu?: boolean;
+    /** Convenience activation handler — fires on click / Enter / Space unless
+     *  the item is disabled. (Mapped to the underlying click.) */
+    onSelect?: (e: any) => void;
+    /** Item content. With `label` set, children are extra content — most
+     *  notably the nested `<Menu>` for a submenu parent. */
+    children?: React.ReactNode;
+}
+/**
+ * MenuItem — a single selectable row inside a `Menu`. Composes a leading
+ * `icon`, a `label` (or `children`), an optional trailing `kbd` hint, and an
+ * optional trailing icon. For a submenu, set `submenu` and nest a
+ * `<Menu>` as a child — a chevron is added automatically.
+ *
+ * Selecting an item closes the menu; add `data-menu-open` to keep it open
+ * (toggles / multi-select) — it forwards to the element.
+ *
+ * @example
+ * ```tsx
+ * <MenuItem icon="copy" label="Duplicate" kbd="⌘D" onSelect={dup} />
+ * <MenuItem label="Word wrap" data-menu-open onSelect={toggleWrap} />
+ * <MenuItem label="Share" submenu>
+ *   <Menu hover>
+ *     <MenuItem label="Copy link" onSelect={copyLink} />
+ *   </Menu>
+ * </MenuItem>
+ * ```
+ */
+export declare const MenuItem: ({ icon, label, kbd, iconTrailing, disabled, tone, submenu, onSelect, className, children, ...rest }: MenuItemProps) => any;

package/dist/components/MenuItem.js

@@ -0,0 +1,41 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+const MenuItem = ({
+  icon,
+  label,
+  kbd,
+  iconTrailing,
+  disabled,
+  tone,
+  submenu,
+  onSelect,
+  className,
+  children,
+  ...rest
+}) => {
+  return /* @__PURE__ */ jsxs(
+    "a-menu-item",
+    {
+      role: "menuitem",
+      tabIndex: 0,
+      disabled: disabled ? "" : void 0,
+      tone: tone && tone !== "neutral" ? tone : void 0,
+      submenu: submenu ? "" : void 0,
+      "aria-haspopup": submenu ? "menu" : void 0,
+      "aria-expanded": submenu ? "false" : void 0,
+      "aria-disabled": disabled ? "true" : void 0,
+      onClick: disabled ? void 0 : onSelect,
+      class: className,
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsx("a-icon", { shape: icon, "aria-hidden": "true" }),
+        label != null && /* @__PURE__ */ jsx("a-menu-item-label", { children: label }),
+        kbd && /* @__PURE__ */ jsx("kbd", { children: kbd }),
+        submenu ? /* @__PURE__ */ jsx("a-icon", { shape: "chevron-right", "aria-hidden": "true" }) : iconTrailing && /* @__PURE__ */ jsx("a-icon", { shape: iconTrailing, "aria-hidden": "true" }),
+        children
+      ]
+    }
+  );
+};
+export {
+  MenuItem
+};

package/dist/components/MenuSeparator.d.ts

@@ -0,0 +1,14 @@
+import type { BaseProps } from '../general_types';
+export interface MenuSeparatorProps extends BaseProps {
+}
+/**
+ * MenuSeparator — a thin divider between groups of `MenuItem`s.
+ *
+ * @example
+ * ```tsx
+ * <MenuItem label="Edit" />
+ * <MenuSeparator />
+ * <MenuItem tone="critical" label="Delete" />
+ * ```
+ */
+export declare const MenuSeparator: ({ className, ...rest }: MenuSeparatorProps) => any;

package/dist/components/MenuSeparator.js

@@ -0,0 +1,7 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+const MenuSeparator = ({ className, ...rest }) => {
+  return /* @__PURE__ */ jsx("a-menu-separator", { role: "separator", class: className, ...rest });
+};
+export {
+  MenuSeparator
+};

package/dist/components/Progress.d.ts

@@ -5,12 +5,18 @@ export interface ProgressProps extends BaseProps {
     /** Upper bound of the range.
      *  @defaultValue 100 */
     max?: number;
-    /** Color variant. `'info'` applies a blue tint.
-     *  @defaultValue neutral */
-    tone?: 'neutral' | 'info';
-    /** Text label displayed after the percentage. */
+    /** Colour variant, or any literal CSS colour for a one-off custom tone (the
+     *  surface / indicator / text are derived from it in oklch). Named tones track
+     *  light/dark automatically.
+     *  @defaultValue 'neutral' */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Text label displayed after the percentage. When you provide custom
+     *  `children` (which replace the default label row), `label` is no longer
+     *  rendered — but it still supplies the progressbar's accessible name, so
+     *  pass it for screen readers to announce more than the bare percentage. */
     label?: string;
-    /** Right-aligned hint text (e.g. "3 of 7"). */
+    /** Right-aligned hint text (e.g. "3 of 7"). Like `label`, it's not rendered
+     *  when custom `children` are provided but still feeds the accessible name. */
     hint?: string;
 }
 /**
@@ -40,4 +46,4 @@ export interface ProgressProps extends BaseProps {
  * <Progress value={75} tone="info" label="Processing" />
  * ```
  */
-export declare const Progress: ({ value, max, tone, label, hint, className, children, ...rest }: ProgressProps) => any;
+export declare const Progress: ({ value, max, tone, label, hint, className, style, children, ...rest }: ProgressProps) => any;

package/dist/components/Progress.js

@@ -1,19 +1,22 @@
 import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
-import { hasChildren } from "../anta_helpers";
-const Progress = ({ value, max = 100, tone, label, hint, className, children, ...rest }) => {
+import { hasChildren, toneStyle } from "../anta_helpers";
+const Progress = ({ value, max = 100, tone, label, hint, className, style, children, ...rest }) => {
   const percent = max > 0 ? Math.round(Math.min(100, Math.max(0, value / max * 100))) : 0;
+  const clampedValue = max > 0 ? Math.min(max, Math.max(0, value)) : 0;
   const ariaLabel = [label, `${percent}%`, hint].filter(Boolean).join(" \xB7 ") || void 0;
   return /* @__PURE__ */ jsx(
     "a-progress",
     {
       value,
       max,
-      tone,
+      tone: tone && tone !== "neutral" ? tone : void 0,
       role: "progressbar",
-      "aria-valuenow": value,
+      "aria-valuenow": clampedValue,
+      "aria-valuemin": 0,
       "aria-valuemax": max,
       "aria-label": ariaLabel,
       class: className,
+      style: toneStyle(tone, "--progress-tone-source", style),
       ...rest,
       children: hasChildren(children) ? children : /* @__PURE__ */ jsxs("a-progress-label", { children: [
         /* @__PURE__ */ jsxs("a-progress-number", { children: [

package/dist/components/Radio.d.ts

@@ -0,0 +1,37 @@
+import type { BaseProps } from "../general_types";
+/** Public props for a single `<Radio>` option. */
+export interface RadioProps extends BaseProps {
+    /** This option's value — its identity within the group and the value
+     *  submitted when it's selected. */
+    value: string;
+    /** Disable just this option. */
+    disabled?: boolean;
+    /** Semantic tone, or any literal CSS color (`'#ff1493'`, `'rebeccapurple'`)
+     *  for a one-off custom tone. Named tones track light/dark mode automatically;
+     *  a custom colour keeps its hue + chroma and pins lightness to the brand
+     *  fill curve. Defaults to the group's tone (or `brand`).
+     *  @defaultValue 'brand' */
+    tone?: "brand" | "neutral" | "info" | "success" | "warning" | "critical" | (string & {});
+    /** Size variant. Defaults to the group's size (or `medium`); set it here to
+     *  override a single option.
+     *  @defaultValue 'medium' */
+    size?: "small" | "medium" | "large";
+    /** The label. Plain text, or any nodes (e.g. text + an info `<Icon>`). */
+    children?: React.ReactNode;
+}
+/**
+ * `<Radio>` — one option in a `<RadioGroup>`.
+ *
+ * A pure, stateless pass-through to `<a-radio>`: selection, keyboard, roving
+ * tabindex, and form value are all owned by the enclosing `<a-radio-group>`
+ * (see `<RadioGroup>`), so this wrapper only maps props to attributes and
+ * projects the label. Renders nothing interactive on its own — use it inside a
+ * `<RadioGroup>`.
+ *
+ * `role="radio"` and `aria-disabled` are set here. `aria-checked` is **not** —
+ * `<a-radio>` publishes it through `ElementInternals` (off the DOM), driven by
+ * the `selected` property the enclosing `<RadioGroup>` sets.
+ *
+ * Requires `@antadesign/anta/elements` to be imported (client-side only).
+ */
+export declare const Radio: ({ value, disabled, tone, size, className, style, children, ...rest }: RadioProps) => any;

package/dist/components/Radio.js

@@ -0,0 +1,33 @@
+import { jsx } from "@antadesign/anta/jsx-runtime";
+const NAMED_TONES = /* @__PURE__ */ new Set(["brand", "neutral", "info", "success", "warning", "critical"]);
+const Radio = ({
+  value,
+  disabled,
+  tone,
+  size,
+  className,
+  style,
+  children,
+  ...rest
+}) => {
+  const isCustomTone = tone != null && !NAMED_TONES.has(tone);
+  const computedStyle = isCustomTone ? { ...style, ["--radio-tone-source"]: tone } : style;
+  return /* @__PURE__ */ jsx(
+    "a-radio",
+    {
+      role: "radio",
+      "aria-disabled": disabled ? "true" : void 0,
+      ...rest,
+      value,
+      tone: tone && tone !== "brand" ? tone : void 0,
+      size: size && size !== "medium" ? size : void 0,
+      disabled: disabled ? "" : void 0,
+      class: className,
+      style: computedStyle,
+      children
+    }
+  );
+};
+export {
+  Radio
+};