@antadesign/anta 0.2.0 → 0.2.2

package/README.md

@@ -10,7 +10,7 @@ This constraint shapes the architecture: the web components carry the core styli
 
 `@antadesign/anta` is an NPM package, so you can `npm install @antadesign/anta` or do that with `pnpm` / `bun`.
 
-Since Anta is in active development we suggest using the latest dev version: `"@antadesign/anta": "dev"` in your `package.json`. For production builds we suggest pinning to a stable version from npm.
+Use the latest version from npm, but **always pin an exact version** — `"@antadesign/anta": "0.2.0"` in your `package.json` — rather than a floating tag like `"latest"` or `"dev"`, which can change between installs.
 
 ### Usage
 
@@ -125,6 +125,45 @@ import { h, Fragment } from 'preact'
 configure(h, Fragment)
 ```
 
+### TypeScript: typing raw `<a-*>` tags in JSX
+
+If you only use the JSX wrappers (`<Button>`, `<Progress>`, …) you need no setup — they're typed like any React component. This section is only for writing the raw `<a-*>` tags directly in JSX.
+
+**Option A (preferred)** — point your JSX types at anta in `tsconfig.json`:
+
+```jsonc
+{ "compilerOptions": { "jsx": "react-jsx", "jsxImportSource": "@antadesign/anta" } }
+```
+
+Every `a-*` tag type-checks, all standard HTML tags keep working, and importing anything from `@antadesign/stickers` adds the sticker tags automatically.
+
+**Option B** — if you can't change `jsxImportSource` (a shared tsconfig, Emotion's `@emotion/react` source, an older `@types/react` without the `React.JSX` namespace), merge anta's tag map into your JSX namespace yourself. Anta exports it as a standalone interface, `AntaIntrinsicElements` — and `@antadesign/stickers` exports the matching `StickerIntrinsicElements` — so it's a single `extends` in any `.d.ts` covered by your tsconfig:
+
+```ts
+import type { AntaIntrinsicElements } from '@antadesign/anta'
+import type { StickerIntrinsicElements } from '@antadesign/stickers' // only if you use stickers
+
+declare global {
+  namespace JSX {
+    interface IntrinsicElements extends AntaIntrinsicElements, StickerIntrinsicElements {}
+  }
+}
+```
+
+On modern `@types/react` (≥18) with `jsx: "react-jsx"`, the JSX namespace is module-scoped and the global declaration above is silently ignored — target the `react` module instead:
+
+```ts
+import type { AntaIntrinsicElements } from '@antadesign/anta'
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements extends AntaIntrinsicElements {}
+  }
+}
+```
+
+Either way the tags stay fully typed — unknown `a-*` tags and wrong prop types are still errors. New tags arrive automatically when you upgrade anta; there's no per-tag list to maintain.
+
 ### Raw web components (no JSX)
 
 ```html

package/dist/components/Button.js

@@ -11,10 +11,13 @@ const wrapChildren = (kids) => {
   if (kids == null) return kids;
   const arr = Array.isArray(kids) ? kids : [kids];
   return arr.map((child, i) => {
-    const t = typeof child;
-    if (t === "string" || t === "number") {
-      return /* @__PURE__ */ jsx("a-button-label", { children: child }, i);
+    if (typeof child === "string") {
+      return child.trim() === "" ? null : /* @__PURE__ */ jsx("a-button-label", { children: child }, i);
     }
+    if (typeof child === "number") {
+      return Number.isNaN(child) ? null : /* @__PURE__ */ jsx("a-button-label", { children: child }, i);
+    }
+    if (child == null || typeof child === "boolean") return null;
     return child;
   });
 };

package/dist/components/Progress.module.css

@@ -1,5 +0,0 @@
-/*
- * Base layout is handled by the <a-progress> web component (display: block).
- * This module is reserved for conditional styles driven by JSX logic.
- * And in this case we usually start with .container style
- */

package/dist/components/Text.module.css

@@ -1,6 +0,0 @@
-/*
- * All Text layout — including truncation, the expandable fade mask,
- * and the chevron button — lives in the <a-text> web component's
- * shadow DOM. This module is reserved for any future JSX-driven
- * conditional styles.
- */

package/dist/components/Tooltip.d.ts

@@ -11,12 +11,14 @@ export interface TooltipProps extends BaseProps {
      *  side when there isn't room.
      *  @defaultValue bottom */
     placement?: 'top' | 'bottom';
-    /** Pin the bubble under the anchor instead of following the cursor. */
-    static?: boolean;
+    /** Follow the cursor instead of pinning under the anchor. The bubble is
+     *  pinned (anchored beneath the target) by default; pass `follow` for the
+     *  cursor-tracking behaviour, which fades by distance as the cursor leaves. */
+    follow?: boolean;
     /** Make the bubble hoverable and clickable — enables pointer events and
      *  keeps it open while the cursor is over it, so its content (links,
-     *  buttons) can be interacted with. Implies `static` (an interactive
-     *  bubble can't follow the cursor). */
+     *  buttons) can be interacted with. Always pinned (an interactive bubble
+     *  can't follow the cursor, even with `follow`). */
     interactive?: boolean;
 }
 /**
@@ -27,8 +29,8 @@ export interface TooltipProps extends BaseProps {
  * Shows on hover (after `delay`) and on keyboard focus; dismisses on mouse
  * leave, blur, Escape, or when the anchor scrolls away. On touch devices it
  * opens on press-and-hold (a tap never surfaces it) and lingers briefly after
- * release. Follows the cursor by default — pass `static` to pin it under the
- * anchor instead.
+ * release. Pinned under the anchor by default — pass `follow` to make it track
+ * the cursor instead.
  *
  * Requires `@antadesign/anta/elements` to be imported (client-side only)
  * to register the underlying custom element.
@@ -44,14 +46,22 @@ export interface TooltipProps extends BaseProps {
  * </button>
  * ```
  *
- * @example Pinned above, rich content
+ * @example Above the anchor, rich content
  * ```tsx
  * <span style={{ cursor: 'help' }}>
  *   Status
- *   <Tooltip placement="top" static>
+ *   <Tooltip placement="top">
  *     <strong>Healthy</strong> — last checked 2m ago
  *   </Tooltip>
  * </span>
  * ```
+ *
+ * @example Follow the cursor
+ * ```tsx
+ * <button>
+ *   Hover me
+ *   <Tooltip follow>Tracks the pointer</Tooltip>
+ * </button>
+ * ```
  */
-export declare const Tooltip: ({ delay, placement, static: isStatic, interactive, className, children, ...rest }: TooltipProps) => any;
+export declare const Tooltip: ({ delay, placement, follow, interactive, className, children, ...rest }: TooltipProps) => any;

package/dist/components/Tooltip.js

@@ -2,7 +2,7 @@ import { jsx } from "@antadesign/anta/jsx-runtime";
 const Tooltip = ({
   delay,
   placement,
-  static: isStatic,
+  follow,
   interactive,
   className,
   children,
@@ -13,7 +13,7 @@ const Tooltip = ({
     {
       delay: delay != null ? String(delay) : void 0,
       placement: placement === "top" ? "top" : void 0,
-      static: isStatic ? "" : void 0,
+      follow: follow ? "" : void 0,
       interactive: interactive ? "" : void 0,
       class: className,
       ...rest,