@antadesign/anta 0.1.1-dev.6 → 0.1.1-dev.8

package/dist/generate-stickers.mjs

@@ -0,0 +1,293 @@
+#!/usr/bin/env node
+/**
+ * generate-stickers.mjs — read a folder of per-sticker subfolders and emit
+ * one per-sticker TS module per mode (static + animated) under the chosen
+ * output folder, plus a barrel index that re-exports them.
+ *
+ * Expected source layout:
+ *
+ *   stickers/
+ *     coding/
+ *       coding.json   — Lottie animation (drives Sticker{Name}Animated)
+ *       coding.svg    — static pose (drives Sticker{Name})
+ *     vacation/
+ *       vacation.json
+ *       vacation.svg
+ *     …
+ *
+ *
+ * Collision detection — when `--internal` is NOT passed (i.e. consumer
+ * run), the generator warns if a generated name collides with one of
+ * anta's built-in stickers. Anta's own build passes `--internal`.
+ *
+ *   node scripts/generate-stickers.mjs --input ./stickers --output ./src/components/__generated__/stickers
+ */
+
+import fs from "node:fs";
+import path from "node:path";
+
+// Anta's built-in sticker names. Consumers who generate a same-named
+// sticker get a warning; their generated module will resolve to the same
+// import path and shadow ours. Keep this list in sync with the canonical
+// names under ./stickers/<name>/.
+const DEFAULT_BUILT_IN = [
+  "angry",
+  "ask",
+  "balance",
+  "butterfly",
+  "butterfly-snake",
+  "catch",
+  "clap",
+  "coding",
+  "cowboy",
+  "dance",
+  "detective",
+  "disapprove",
+  "distracted",
+  "dive",
+  "eat",
+  "facepalm",
+  "failed",
+  "found",
+  "grow",
+  "handstand",
+  "heart",
+  "hello",
+  "idea",
+  "laugh",
+  "love",
+  "nap",
+  "party",
+  "passed",
+  "peekaboo",
+  "pizza",
+  "puzzle",
+  "sad",
+  "scared",
+  "scroll",
+  "search",
+  "shield",
+  "shocked",
+  "sleep",
+  "stressed",
+  "suspicious",
+  "thanks",
+  "think",
+  "think-of-you",
+  "thumbs-up",
+  "vacation",
+  "wait",
+  "wink",
+  "work",
+  "zen",
+];
+
+function pascalCase(name) {
+  return name
+    .split(/[-_\s]+/)
+    .filter(Boolean)
+    .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+    .join("");
+}
+
+function componentName(base) {
+  return `Sticker${pascalCase(base)}`;
+}
+
+export async function generate({ input, output, internal = false } = {}) {
+  if (!input) throw new Error("generate-stickers: --input is required");
+  if (!output) throw new Error("generate-stickers: --output is required");
+
+  const inDir = path.resolve(input);
+  const outDir = path.resolve(output);
+  if (!fs.existsSync(inDir)) {
+    throw new Error(`generate-stickers: input folder not found: ${inDir}`);
+  }
+  fs.mkdirSync(outDir, { recursive: true });
+
+  // Each immediate subfolder of inDir is one sticker. The folder name is
+  // the canonical sticker name.
+  const subdirs = fs
+    .readdirSync(inDir, { withFileTypes: true })
+    .filter((d) => d.isDirectory())
+    .map((d) => d.name)
+    .sort();
+
+  if (subdirs.length === 0) {
+    console.warn(`generate-stickers: no sticker subfolders in ${inDir}`);
+  }
+
+  // Clear out previous generated files so renamed/removed stickers don't
+  // leave stale modules behind. Keep index.ts (about to be rewritten) and
+  // the per-sticker static + animated file names we're about to write.
+  // Naming convention: `<name>.ts` is the static (default) sticker;
+  // `<name>-animated.ts` is the Lottie-backed animated variant.
+  const keep = new Set([
+    "index.ts",
+    ...subdirs.flatMap((n) => [`${n}.ts`, `${n}-animated.ts`]),
+  ]);
+  for (const existing of fs.readdirSync(outDir)) {
+    if (!keep.has(existing) && /\.ts$/.test(existing)) {
+      fs.unlinkSync(path.join(outDir, existing));
+    }
+  }
+
+  const exports = [];
+  const skipped = [];
+  const builtInSet = internal ? new Set() : new Set(DEFAULT_BUILT_IN);
+  const collisions = [];
+
+  for (const name of subdirs) {
+    const subdir = path.join(inDir, name);
+    const lottiePath = path.join(subdir, `${name}.json`);
+    const svgPath = path.join(subdir, `${name}.svg`);
+    const hasLottie = fs.existsSync(lottiePath);
+    const hasSvg = fs.existsSync(svgPath) && fs.statSync(svgPath).size > 0;
+    if (!hasLottie && !hasSvg) {
+      skipped.push(`${name} (no ${name}.json or ${name}.svg)`);
+      continue;
+    }
+    if (builtInSet.has(name)) collisions.push(name);
+    const cname = componentName(name);
+    const animatedName = `${cname}Animated`;
+
+    // Static module — the default. Emitted whenever a non-empty SVG
+    // exists. Imports the `Sticker` runtime wrapper from the package
+    // root `@antadesign/anta` (same root specifier the icon codegen
+    // uses — no bespoke runtime subpath). Lives at `<name>.ts` so the
+    // import path matches the bare sticker name.
+    //
+    // Two exports: the JSX `Sticker{Name}` component (React/Preact),
+    // and the raw `svg` string (vanilla JS / non-JSX consumers, who
+    // assign it to an `<a-sticker>` element's `svg` attribute).
+    // Bundlers tree-shake the unused one.
+    if (hasSvg) {
+      const svg = fs.readFileSync(svgPath, "utf8");
+      const lines = [
+        "/* Auto-generated by @antadesign/anta. Do not edit by hand. */",
+        "",
+        "import { Sticker, type StickerProps } from '@antadesign/anta'",
+        "",
+        `export const svg = ${JSON.stringify(svg)}`,
+        "",
+        `export const ${cname} = (props: StickerProps) => Sticker({ ...props, svg })`,
+        "",
+      ];
+      fs.writeFileSync(path.join(outDir, `${name}.ts`), lines.join("\n"));
+    }
+
+    // Animated module — emitted whenever a Lottie JSON exists. Each
+    // module lives in `<name>-animated.ts` so importing only the static
+    // sticker (`<name>.ts`) never drags the Lottie payload. Bundlers
+    // tree-shake per-file when the barrel uses `export { … } from
+    // './foo'`. Imports the `StickerAnimated` runtime wrapper from the
+    // package root `@antadesign/anta`.
+    //
+    // The animation is exported as a JSON *string* (not the parsed
+    // object). `<a-sticker-animated>` receives it via its `animation`
+    // attribute and parses it once on set. Two exports: the JSX
+    // `Sticker{Name}Animated` component, and the raw `animationJson`
+    // string (vanilla JS / non-JSX consumers who call
+    // `el.setAttribute('animation', animationJson)`).
+    if (hasLottie) {
+      const lottieJson = fs.readFileSync(lottiePath, "utf8");
+      const lines = [
+        "/* Auto-generated by @antadesign/anta. Do not edit by hand. */",
+        "",
+        "import { StickerAnimated, type StickerAnimatedProps } from '@antadesign/anta'",
+        "",
+        `export const animationJson = ${JSON.stringify(lottieJson)}`,
+        "",
+        `export const ${animatedName} = (props: StickerAnimatedProps) => StickerAnimated({ ...props, animation: animationJson })`,
+        "",
+      ];
+      fs.writeFileSync(
+        path.join(outDir, `${name}-animated.ts`),
+        lines.join("\n"),
+      );
+    }
+
+    exports.push({
+      base: name,
+      componentName: cname,
+      hasLottie,
+      hasSvg,
+      animatedName,
+    });
+  }
+
+  // Barrel — alphabetical for stable diffs, side-effect free so unused
+  // stickers tree-shake. Each export references the correct per-mode
+  // file so importing only the static variant doesn't pull the animated
+  // module (and vice versa).
+  const reExports = [];
+  for (const {
+    base,
+    componentName,
+    hasLottie,
+    hasSvg,
+    animatedName,
+  } of exports) {
+    if (hasSvg) reExports.push(`export { ${componentName} } from './${base}'`);
+    if (hasLottie)
+      reExports.push(`export { ${animatedName} } from './${base}-animated'`);
+  }
+  const indexLines = [
+    "/* Auto-generated by @antadesign/anta. Do not edit by hand. */",
+    "",
+    "export type { StickerProps, StickerAnimatedProps } from '@antadesign/anta'",
+    "",
+    ...reExports,
+    "",
+  ];
+  fs.writeFileSync(path.join(outDir, "index.ts"), indexLines.join("\n"));
+
+  if (collisions.length > 0) {
+    console.warn(
+      `generate-stickers: ${collisions.length} sticker name(s) collide with Anta's built-in stickers: ` +
+        `${collisions.join(", ")}. ` +
+        `Consumers importing from \`@antadesign/anta/stickers\` get Anta's; your generated barrel exposes yours under its own import path.`,
+    );
+  }
+
+  console.log(
+    `generate-stickers: wrote ${exports.length} sticker${exports.length === 1 ? "" : "s"} to ${outDir}`,
+  );
+  if (skipped.length) {
+    console.warn(
+      `generate-stickers: skipped ${skipped.length} (${skipped.join(", ")})`,
+    );
+  }
+  return { stickers: exports };
+}
+
+function parseArgs(argv) {
+  const out = {};
+  for (let i = 0; i < argv.length; i++) {
+    const arg = argv[i];
+    if (arg.startsWith("--")) {
+      const key = arg.slice(2);
+      const next = argv[i + 1];
+      if (next && !next.startsWith("--")) {
+        out[key] = next;
+        i++;
+      } else {
+        out[key] = true;
+      }
+    }
+  }
+  return out;
+}
+
+const isMain = process.argv[1]?.endsWith("generate-stickers.mjs");
+if (isMain) {
+  const args = parseArgs(process.argv.slice(2));
+  generate({
+    input: args.input,
+    output: args.output,
+    internal: args.internal === true,
+  }).catch((e) => {
+    console.error(e.message);
+    process.exit(1);
+  });
+}

package/dist/index.d.ts

@@ -24,7 +24,15 @@ export { Title } from './components/Title';
 export type { TitleProps } from './components/Title';
 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

@@ -2,14 +2,22 @@ import { Progress } from "./components/Progress";
 import { Text } from "./components/Text";
 import { Title } from "./components/Title";
 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,
   ICON_SHAPES,
   ICON_SYNONYMS,
   Icon,
   Progress,
+  Sticker,
+  StickerAnimated,
   Text,
   Title,
+  Tooltip,
   configure
 };

package/dist/jsx-runtime.d.ts

@@ -22,7 +22,7 @@ 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, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, ATitleAttributes, AIconAttributes, AButtonAttributes, AStickerAttributes, AStickerAnimatedAttributes, ATooltipAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     type IntrinsicElements = React.JSX.IntrinsicElements & {
         'a-progress': AProgressAttributes;
@@ -33,5 +33,10 @@ export declare namespace JSX {
         'a-text': ATextAttributes;
         'a-title': ATitleAttributes;
         'a-icon': AIconAttributes;
+        'a-button': AButtonAttributes;
+        'a-button-label': BaseAttributes;
+        'a-sticker': AStickerAttributes;
+        'a-sticker-animated': AStickerAnimatedAttributes;
+        'a-tooltip': ATooltipAttributes;
     };
 }

package/dist/reset.css

@@ -72,6 +72,12 @@
     font-weight: 600;
   }
 
+  /* Keep inline `<code>` from inflating the line box of the prose it
+     sits in — `1em` pins its line height to its own font size. */
+  code {
+    line-height: 1em;
+  }
+
   /* Prose lists (ul, ol) get a tight 3ch left padding so markers
      hug the text, and items get a small bottom margin so
      consecutive ones breathe. Markers are toned all the way down
@@ -102,41 +108,38 @@
   /* 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([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. Other contexts (nav, headings) still override as needed. */
+  a:not([role="button"]),
+  a:not([role="button"]):link,
+  a:not([role="button"]):visited {
     color: var(--link-color);
     text-decoration: underline;
     text-decoration-style: solid;
-    text-decoration-color: color-mix(in oklch, currentColor 75%, transparent);
+    text-decoration-color: color-mix(in srgb, currentColor 75%, transparent);
     text-decoration-thickness: 0.5px;
     text-underline-offset: 3px;
   }
-  a:hover {
-    color: var(--link-color-hover);
-    /* Underline color set to the hover token directly (rather than
-       `currentColor`) so it repaints in lockstep with `color` — a
-       few browsers latch onto the old currentColor value
-       otherwise. */
-    text-decoration-color: var(--link-color-hover);
-    text-decoration-thickness: 1px;
-  }
-  a:active {
-    text-decoration-color: color-mix(in oklch, currentColor 75%, transparent);
-  }
-
-  /* Text selection — full-chroma brand color at 15% alpha. Using
-     OKLCH relative-color syntax (not `color-mix` with `transparent`)
-     keeps the chroma intact: mixing toward `transparent` interpolates
-     in OKLCH and pulls L/C toward zero, which washes the result out.
-     `calc(c * 1.5)` bumps the saturation modestly above the source
-     token so the highlight reads as clearly brand-coloured rather
-     than a neutral grey. No `color` override on the selection, so
-     the selected text keeps its original color and contrast is
-     preserved automatically. `--text-1-brand` inverts between light
-     and dark, so the effect tracks the active palette unaided. */
+  /* 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:not([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:not([role="button"]):active {
+    text-decoration-color: color-mix(in srgb, currentColor 75%, transparent);
+  }
+
+  /* Text selection — brand color at 15% alpha. */
   ::selection {
-    background: oklch(from var(--text-1-brand) l calc(c * 1.5) h / 0.15);
+    background: color-mix(in srgb, var(--text-1-brand), transparent 85%);
   }
 
   /* ───── Tables ───────────────────────────────────────────────── */