@antadesign/anta 0.1.1-dev.7 → 0.2.0

package/dist/general_types.d.ts

@@ -76,7 +76,7 @@ export interface ATextAttributes extends BaseAttributes {
     /** 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. */
-    inline?: boolean | string;
+    inline?: boolean | '';
     /** Truncate to N lines with a trailing ellipsis. The attribute value
      *  carries the line count (e.g. `"1"`, `"3"`); the count is also
      *  available via the `--line-clamp` CSS custom property set inline. */
@@ -84,7 +84,7 @@ export interface ATextAttributes extends BaseAttributes {
     /** Marks the host as expandable when paired with `truncate`. Adds
      *  the fade-out mask; the JSX wrapper renders the chevron and owns
      *  the click/keyboard expansion logic. */
-    expandable?: boolean | string;
+    expandable?: boolean | '';
     /** ARIA disclosure state, mirrors the JSX wrapper's `expanded` flag. */
     'aria-expanded'?: boolean | 'true' | 'false';
 }
@@ -108,43 +108,23 @@ export interface ATitleAttributes extends BaseAttributes {
     'aria-level'?: number | string;
 }
 /**
- * Attributes for the `<a-sticker>` static sticker carrier.
+ * Attributes for the `<a-tag>` styled tag.
  *
- * The SVG payload is passed as the `svg` attribute — a markup string.
- * On change, the element writes it into its shadow DOM (no light-DOM
- * `<slot>`, so children aren't rendered). The JSX wrapper
- * (`Sticker{Name}`) sets it from the per-sticker module's inlined SVG.
- * Sizing comes from `--sticker-size`.
+ * `<a-tag>` has no JS — it's a CSS-only styled element. Low-level
+ * attributes; for the JSX wrapper use `Tag` from `@antadesign/anta`.
  */
-export interface AStickerAttributes extends BaseAttributes {
-    /** SVG markup string. On change the element drops it into its shadow
-     *  DOM (`innerHTML`). */
-    svg?: string;
-    role?: string;
-    'aria-label'?: string;
-    'aria-hidden'?: 'true' | 'false' | boolean;
-}
-/**
- * Attributes for the `<a-sticker-animated>` Lottie sticker carrier.
- *
- * The Lottie payload is passed as the `animation` attribute — a JSON
- * string. On change the element `JSON.parse`s it once and drives a
- * `lottie-web` player (SVG renderer) inside its shadow DOM. The JSX
- * wrapper (`Sticker{Name}Animated`) sets it from the per-sticker
- * module's inlined JSON. Sizing comes from the `--sticker-size` CSS
- * variable; `paused` controls playback.
- */
-export interface AStickerAnimatedAttributes extends BaseAttributes {
-    /** Lottie payload as a JSON string. The element parses it once on
-     *  change. */
-    animation?: string;
-    /** Present (any string value, including `""`) freezes the animation.
-     *  A numeric string is parsed as seconds and the player seeks to
-     *  that time before pausing. Omit to play. */
-    paused?: string | boolean | number;
-    role?: string;
-    'aria-label'?: string;
-    'aria-hidden'?: 'true' | 'false' | boolean;
+export interface ATagAttributes extends BaseAttributes {
+    /** Semantic tone, or any literal CSS color for a one-off custom tone.
+     *  Named tones map to the `--text-2-{tone}` / `--bg-4-{tone}` palette;
+     *  a custom color keeps its hue with lightness/chroma pinned.
+     *  `'neutral'` is the default gray (same as omitting it). */
+    tone?: 'neutral' | 'brand' | 'info' | 'success' | 'warning' | 'critical' | (string & {});
+    /** Size variant. `small` = 16px tall, `medium` (default) = 20px,
+     *  `large` = 24px. */
+    size?: 'small' | 'medium' | 'large';
+    /** Render in normal case instead of the default uppercase.
+     *  Presence-based (`''` on, omit off). */
+    nocaps?: boolean | '';
 }
 /**
  * Attributes for the `<a-icon>` custom element. `shape` is typed as
@@ -173,6 +153,25 @@ export interface AIconAttributes extends BaseAttributes {
     /** Hides decorative icons from screen readers. */
     'aria-hidden'?: 'true' | 'false' | boolean;
 }
+/**
+ * Attributes for the `<a-tooltip>` custom element. Placed as a child of the
+ * element it annotates (content as children). For the typed JSX wrapper use
+ * `Tooltip` from `@antadesign/anta`.
+ */
+export interface ATooltipAttributes extends BaseAttributes {
+    /** Show delay in milliseconds. Never use `0` — use ~`50`. Defaults to 250. */
+    delay?: number | string;
+    /** Preferred side; auto-flips when there's no room. Defaults to `'bottom'`. */
+    placement?: 'top' | 'bottom';
+    /** Pin under the anchor instead of following the cursor. Presence-based
+     *  (`''` on, omit off). */
+    static?: boolean | '';
+    /** Make the bubble hoverable/clickable (pointer events on, stays open while
+     *  hovered). Implies `static`. Presence-based (`''` on, omit off). */
+    interactive?: boolean | '';
+    /** HTML `id`. */
+    id?: string;
+}
 /**
  * Attributes for the `<a-button>` custom element. For the typed JSX
  * wrapper use `Button` from `@antadesign/anta`.
@@ -188,13 +187,13 @@ export interface AButtonAttributes extends BaseAttributes {
     size?: 'small' | 'medium' | 'large';
     /** Drop outer padding to zero. Only takes effect on `priority="quaternary"`.
      *  Presence-based: `''` (or any value) turns it on; omit to turn off. */
-    paddingless?: '' | 'true' | 'false' | boolean;
+    paddingless?: boolean | '';
     /** Loading state. Presence-based (`''` on, omit off). */
-    loading?: '' | 'true' | 'false' | boolean;
+    loading?: boolean | '';
     /** Disabled state. Presence-based (`''` on, omit off). */
-    disabled?: '' | 'true' | 'false' | boolean;
+    disabled?: boolean | '';
     /** Toggled-on / pressed state. Presence-based (`''` on, omit off). */
-    selected?: '' | 'true' | 'false' | boolean;
+    selected?: boolean | '';
     /** Submit/reset semantics. */
     type?: 'button' | 'submit' | 'reset';
     /** Associate with a form by id when not nested inside it. */

package/dist/index.d.ts

@@ -22,15 +22,15 @@ export { Text } from './components/Text';
 export type { TextProps } from './components/Text';
 export { Title } from './components/Title';
 export type { TitleProps } from './components/Title';
+export { Tag } from './components/Tag';
+export type { TagProps } from './components/Tag';
 export { Icon } from './components/Icon';
 export type { IconProps } from './components/Icon';
 export { Button } from './components/Button';
 export type { ButtonProps, BaseButtonProps, ContentMode, SubmitMode, PriorityMode, } from './components/Button';
 export { ICON_SHAPES, ICON_SYNONYMS } from './elements/a-icon.shapes';
-export { Sticker } from './components/Sticker';
-export type { StickerProps } from './components/Sticker';
-export { StickerAnimated } from './components/StickerAnimated';
-export type { StickerAnimatedProps } from './components/StickerAnimated';
+export { Tooltip } from './components/Tooltip';
+export type { TooltipProps } from './components/Tooltip';
 export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
 /**

package/dist/index.js

@@ -1,11 +1,11 @@
 import { Progress } from "./components/Progress";
 import { Text } from "./components/Text";
 import { Title } from "./components/Title";
+import { Tag } from "./components/Tag";
 import { Icon } from "./components/Icon";
 import { Button } from "./components/Button";
 import { ICON_SHAPES, ICON_SYNONYMS } from "./elements/a-icon.shapes";
-import { Sticker } from "./components/Sticker";
-import { StickerAnimated } from "./components/StickerAnimated";
+import { Tooltip } from "./components/Tooltip";
 import { configure } from "./jsx-runtime";
 export {
   Button,
@@ -13,9 +13,9 @@ export {
   ICON_SYNONYMS,
   Icon,
   Progress,
-  Sticker,
-  StickerAnimated,
+  Tag,
   Text,
   Title,
+  Tooltip,
   configure
 };

package/dist/jsx-runtime.d.ts

@@ -22,9 +22,9 @@ export declare function configure(jsx: JsxFunction, Fragment?: ComponentType): v
 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, AIconAttributes, AButtonAttributes, AStickerAttributes, AStickerAnimatedAttributes, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, ATagAttributes, AIconAttributes, AButtonAttributes, ATooltipAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
-    type IntrinsicElements = React.JSX.IntrinsicElements & {
+    interface IntrinsicElements extends React.JSX.IntrinsicElements {
         'a-progress': AProgressAttributes;
         'a-progress-label': BaseAttributes;
         'a-progress-number': BaseAttributes;
@@ -32,10 +32,12 @@ export declare namespace JSX {
         'a-progress-hint': BaseAttributes;
         'a-text': ATextAttributes;
         'a-title': ATitleAttributes;
+        'a-tag': ATagAttributes;
+        'a-tag-label': BaseAttributes;
+        'a-tag-value': BaseAttributes;
         'a-icon': AIconAttributes;
         'a-button': AButtonAttributes;
         'a-button-label': BaseAttributes;
-        'a-sticker': AStickerAttributes;
-        'a-sticker-animated': AStickerAnimatedAttributes;
-    };
+        'a-tooltip': ATooltipAttributes;
+    }
 }

package/dist/reset.css

@@ -108,9 +108,18 @@
   /* Global link defaults. Hairline underline at 75% alpha;
      underline goes to currentColor (100%) and 1px on hover. Color
      comes from --link-color tokens, which auto-flip in dark mode.
-     Components or specific contexts (nav, headings, buttons)
-     should override as needed. */
-  a, a:link, a:visited {
+     `:not(:where([role="button"]))` excludes anchor-buttons (`<a role="button">`,
+     e.g. `<Button href>`): `a:link`/`a:visited` are pseudo-classes with the
+     same (0,1,1) specificity as `a[role="button"]`, so without the exclusion
+     they'd tie and win on source order, giving buttons link colour +
+     underline. The `:where()` keeps the exclusion specificity-neutral so this
+     base rule stays at (0,0,1)/(0,1,1) — a bare `:not([role="button"])` would
+     add an attribute selector's weight and out-specify prose-link overrides
+     like `a-text a` / the <Button> prose-link rule, leaving their links stuck
+     on the global blue. Other contexts (nav, headings) still override as needed. */
+  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;
@@ -121,14 +130,14 @@
   /* Hover only on real-pointer devices — gating avoids the sticky hover
      color that lingers after a tap on touch screens. */
   @media (hover: hover) and (pointer: fine) {
-    a:hover {
+    a:not(:where([role="button"])):hover {
       color: var(--link-color-hover);
       /* Underline color is left as the resting hairline (the base rule's
          `currentColor` mix) — only the thickness grows on hover. */
       text-decoration-thickness: 1px;
     }
   }
-  a:active {
+  a:not(:where([role="button"])):active {
     text-decoration-color: color-mix(in srgb, currentColor 75%, transparent);
   }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.1.1-dev.7",
+  "version": "0.2.0",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -26,18 +26,17 @@
       "types": "./dist/elements/*.d.ts",
       "default": "./dist/elements/*.js"
     },
+    "./anta_helpers": {
+      "types": "./dist/anta_helpers.d.ts",
+      "default": "./dist/anta_helpers.js"
+    },
+    "./general_types": {
+      "types": "./dist/general_types.d.ts",
+      "default": "./dist/general_types.js"
+    },
     "./tokens.css": "./dist/tokens.css",
     "./reset.css": "./dist/reset.css",
     "./generate-icons.mjs": "./dist/generate-icons.mjs",
-    "./generate-stickers.mjs": "./dist/generate-stickers.mjs",
-    "./stickers": {
-      "types": "./dist/components/__generated__/stickers/index.d.ts",
-      "default": "./dist/components/__generated__/stickers/index.js"
-    },
-    "./stickers/*": {
-      "types": "./dist/components/__generated__/stickers/*.d.ts",
-      "default": "./dist/components/__generated__/stickers/*.js"
-    },
     "./*": {
       "types": "./dist/*.d.ts",
       "default": "./dist/*"
@@ -45,13 +44,13 @@
   },
   "scripts": {
     "build": "pnpm run build:js && pnpm run build:css && pnpm run build:types",
-    "build:css": "find src -name '*.css' | while IFS= read -r f; do d=\"dist/${f#src/}\"; mkdir -p \"$(dirname \"$d\")\"; cp \"$f\" \"$d\"; done && cp scripts/generate-icons.mjs scripts/generate-stickers.mjs dist/",
+    "build:css": "find src -name '*.css' | while IFS= read -r f; do d=\"dist/${f#src/}\"; mkdir -p \"$(dirname \"$d\")\"; cp \"$f\" \"$d\"; done && cp scripts/generate-icons.mjs dist/",
     "build:js": "esbuild $(find src \\( -name '*.ts' -o -name '*.tsx' \\) ! -name '*.d.ts') --outdir=dist --outbase=src --jsx=automatic --jsx-import-source=@antadesign/anta --format=esm --target=ES2022 --loader:.module.css=local-css --loader:.css=global-css",
     "build:types": "tsc -p src/tsconfig.json",
-    "dev": "nodemon -w src -e ts,tsx,css -x 'pnpm run build && pnpm --filter anta-site run docs' & pnpm --filter anta-site run dev & wait",
+    "dev": "echo $$ > .dev.pid; trap 'rm -f .dev.pid' EXIT; nodemon -w src -w stickers/src -e ts,tsx,css -x 'pnpm run build && pnpm --filter @antadesign/stickers run build && 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",
     "icons": "node scripts/generate-icons.mjs --input src/elements/icons --output src/elements --name a-icon.shapes --internal",
-    "stickers": "node scripts/generate-stickers.mjs --input src/elements/stickers --output src/components/__generated__/stickers --internal",
     "clean": "rm -rf dist",
     "prepare": "pnpm run build",
     "prepublishOnly": "pnpm run build"
@@ -64,7 +63,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.0",
-    "lottie-web": "^5.13.0"
+    "es-toolkit": "^1.47.0"
   },
   "peerDependencies": {
     "react": "^18.0.0 || ^19.0.0"