@antadesign/anta 0.1.1-dev.0 → 0.1.1-dev.2

package/dist/generate-icons.mjs

@@ -0,0 +1,181 @@
+#!/usr/bin/env node
+/**
+ * generate-icons.mjs — read a folder of SVGs, emit a CSS file with one
+ * `a-icon[shape="…"]` rule per icon and a `.d.ts` file that augments
+ * Anta's `IconShapes` interface so the new shapes flow into `IconShape`.
+ *
+ * Run from CLI:
+ *   node scripts/generate-icons.mjs --input <svg-folder> --output <out-folder> --name <basename>
+ *
+ * Or import programmatically:
+ *   import { generate } from '@antadesign/anta/generate-icons.mjs'
+ *   await generate({ input, output, name, builtInShapes })
+ *
+ * Defaults:
+ *   --name = "a-icon.shapes"
+ *   --output = "."
+ *   --input is required
+ */
+
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+// SVGs whose names match these get a "collision" warning so consumers
+// know they're shadowing a built-in. Anta passes its own list when
+// generating its own shapes; for consumers, we include the canonical
+// built-in names so generating a same-named shape is flagged.
+const DEFAULT_BUILT_IN = [
+  'chevron-down', 'chevron-up', 'chevron-left', 'chevron-right',
+  'check', 'x', 'info', 'warning-triangle', 'plus', 'minus', 'menu', 'copy',
+]
+
+function encodeSvg(svg) {
+  return svg
+    .replace(/"/g, "'")
+    .replace(/[\r\n%#()<>?[\\\]^`{|}]/g, encodeURIComponent)
+}
+
+// Removes `width=…` and `height=…` only from the root <svg> opening tag.
+// Child elements (e.g. <rect width="14"…>) are intentionally untouched.
+// Handles double-quoted, single-quoted, and unquoted attribute values.
+function stripDimensions(svg) {
+  return svg.replace(/<svg\b[^>]*>/i, (m) =>
+    m.replace(/\s(?:width|height)\s*=\s*("[^"]*"|'[^']*'|[^\s>]+)/g, '')
+  )
+}
+
+export async function generate({ input, output = '.', name = 'a-icon.shapes', internal = false } = {}) {
+  if (!input) throw new Error('generate-icons: --input is required')
+  const inDir = path.resolve(input)
+  const outDir = path.resolve(output)
+  if (!fs.existsSync(inDir)) throw new Error(`generate-icons: input folder not found: ${inDir}`)
+  fs.mkdirSync(outDir, { recursive: true })
+
+  const files = fs.readdirSync(inDir).filter((f) => f.endsWith('.svg')).sort()
+  if (files.length === 0) {
+    console.warn(`generate-icons: no .svg files in ${inDir}`)
+  }
+
+  const shapes = []
+  const cssLines = ['/* Auto-generated by scripts/generate-icons.mjs. Do not edit by hand. */', '']
+  // Built-in collision detection is for consumer runs only. Anta's own
+  // build passes --internal so it doesn't warn about every one of its
+  // own shapes "colliding" with itself.
+  const builtInSet = internal ? new Set() : new Set(DEFAULT_BUILT_IN)
+  const collisions = []
+
+  for (const file of files) {
+    const shape = path.parse(file).name
+    if (shapes.includes(shape)) {
+      console.warn(`generate-icons: duplicate shape name "${shape}" — skipping`)
+      continue
+    }
+    if (builtInSet.has(shape)) collisions.push(shape)
+    const raw = fs.readFileSync(path.join(inDir, file), 'utf8')
+    const encoded = encodeSvg(stripDimensions(raw)).trim()
+    cssLines.push(`a-icon[shape="${shape}"] {`)
+    cssLines.push(`  --icon: url("data:image/svg+xml,${encoded}");`)
+    cssLines.push('}')
+    cssLines.push('')
+    shapes.push(shape)
+  }
+
+  if (collisions.length > 0) {
+    console.warn(
+      `generate-icons: ${collisions.length} shape name(s) collide with Anta's built-in icons: ` +
+      `${collisions.join(', ')}. ` +
+      `The runtime CSS loaded last wins; import yours after \`@antadesign/anta/elements\` to override.`
+    )
+  }
+
+  // Optional synonyms — extra search keywords per shape. Read from
+  // `<input>/synonyms.json` if present; consumers/maintainers extend
+  // the list as their icon set grows. Format: { "shape-name": ["alt", "term"] }.
+  const synFile = path.join(inDir, 'synonyms.json')
+  /** @type {Record<string, string[]>} */
+  let synonyms = {}
+  if (fs.existsSync(synFile)) {
+    try {
+      const parsed = JSON.parse(fs.readFileSync(synFile, 'utf8'))
+      for (const [shape, list] of Object.entries(parsed)) {
+        if (!shapes.includes(shape)) {
+          console.warn(`generate-icons: synonyms.json references unknown shape "${shape}" — skipping`)
+          continue
+        }
+        if (!Array.isArray(list) || !list.every((v) => typeof v === 'string')) {
+          console.warn(`generate-icons: synonyms.json entry for "${shape}" is not a string array — skipping`)
+          continue
+        }
+        synonyms[shape] = list
+      }
+    } catch (e) {
+      console.warn(`generate-icons: failed to parse ${synFile}: ${e.message}`)
+    }
+  }
+
+  const cssPath = path.join(outDir, `${name}.css`)
+  const tsPath = path.join(outDir, `${name}.ts`)
+  fs.writeFileSync(cssPath, cssLines.join('\n'))
+
+  const synonymsEntries = Object.entries(synonyms)
+  const tsLines = [
+    '/* Auto-generated by scripts/generate-icons.mjs. Do not edit by hand. */',
+    '',
+    'export const ICON_SHAPES = [',
+    ...shapes.map((s) => `  '${s}',`),
+    "] as const",
+    '',
+    'export const ICON_SYNONYMS: Readonly<Record<string, readonly string[]>> = {',
+    ...synonymsEntries.map(([shape, list]) =>
+      `  '${shape}': [${list.map((v) => `'${v.replace(/'/g, "\\'")}'`).join(', ')}],`
+    ),
+    '}',
+    '',
+    "declare module '@antadesign/anta' {",
+    '  interface IconShapes {',
+    ...shapes.map((s) => `    '${s}': true`),
+    '  }',
+    '}',
+    '',
+    "export type IconShape = keyof import('@antadesign/anta').IconShapes",
+    '',
+  ]
+  fs.writeFileSync(tsPath, tsLines.join('\n'))
+
+  console.log(`generate-icons: wrote ${shapes.length} shape${shapes.length === 1 ? '' : 's'} to ${cssPath} and ${tsPath}`)
+  return { shapes, cssPath, tsPath }
+}
+
+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 = import.meta.url === `file://${process.argv[1]}` ||
+               import.meta.url === fileURLToPath(import.meta.url + '')
+if (isMain || process.argv[1]?.endsWith('generate-icons.mjs')) {
+  const args = parseArgs(process.argv.slice(2))
+  generate({
+    input: args.input,
+    output: args.output,
+    name: args.name,
+    internal: args.internal === true,
+  }).catch((e) => {
+    console.error(e.message)
+    process.exit(1)
+  })
+}

package/dist/index.d.ts

@@ -1,2 +1,36 @@
+/**
+ * @antadesign/anta — Antithesis Design System
+ *
+ * Portable UI components with web component internals and JSX wrappers.
+ * Works with React, Preact (via compat or `configure()`), or any custom JSX runtime.
+ *
+ * Import components from this entry point:
+ * ```ts
+ * import { Progress } from '@antadesign/anta'
+ * ```
+ *
+ * Register custom elements (client-side only):
+ * ```ts
+ * import '@antadesign/anta/elements'
+ * ```
+ *
+ * @packageDocumentation
+ */
 export { Progress } from './components/Progress';
+export type { ProgressProps } from './components/Progress';
+export { Text } from './components/Text';
+export type { TextProps } from './components/Text';
+export { Icon } from './components/Icon';
+export type { IconProps } from './components/Icon';
+export { ICON_SHAPES, ICON_SYNONYMS } from './elements/a-icon.shapes';
+export type { BaseProps, BaseAttributes } from './general_types';
 export { configure } from './jsx-runtime';
+/**
+ * Seed interface for the icon shape registry. The generated
+ * `a-icon.shapes.d.ts` augments this interface with one key per
+ * available shape; consumers can do the same with their own generated
+ * .d.ts files (TypeScript merges them by interface name).
+ */
+export interface IconShapes {
+}
+export type IconShape = keyof IconShapes;

package/dist/index.js

@@ -1,6 +1,13 @@
 import { Progress } from "./components/Progress";
+import { Text } from "./components/Text";
+import { Icon } from "./components/Icon";
+import { ICON_SHAPES, ICON_SYNONYMS } from "./elements/a-icon.shapes";
 import { configure } from "./jsx-runtime";
 export {
+  ICON_SHAPES,
+  ICON_SYNONYMS,
+  Icon,
   Progress,
+  Text,
   configure
 };

package/dist/jsx-runtime.d.ts

@@ -4,11 +4,25 @@ type JsxFunction = {
     h(type: ComponentType, props: Record<string, unknown> | null, ...children: unknown[]): unknown;
 }['h'];
 declare let _Fragment: ComponentType;
+/**
+ * Swap the underlying JSX factory used by all anta components.
+ *
+ * Not needed for React or Preact-with-compat — those work automatically.
+ * Call this before rendering any anta components when using Preact without
+ * compat aliasing, or a custom JSX runtime.
+ *
+ * @example Preact without compat
+ * ```ts
+ * import { configure } from '@antadesign/anta'
+ * import { h, Fragment } from 'preact'
+ * configure(h, Fragment)
+ * ```
+ */
 export declare function configure(jsx: JsxFunction, Fragment?: ComponentType): void;
 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, BaseAttributes } from './general_types';
+import type { AProgressAttributes, ATextAttributes, AIconAttributes, BaseAttributes } from './general_types';
 export declare namespace JSX {
     type IntrinsicElements = React.JSX.IntrinsicElements & {
         'a-progress': AProgressAttributes;
@@ -16,5 +30,7 @@ export declare namespace JSX {
         'a-progress-number': BaseAttributes;
         'a-progress-text': BaseAttributes;
         'a-progress-hint': BaseAttributes;
+        'a-text': ATextAttributes;
+        'a-icon': AIconAttributes;
     };
 }

package/package.json

@@ -1,29 +1,45 @@
 {
   "name": "@antadesign/anta",
-  "version": "0.1.1-dev.0",
+  "version": "0.1.1-dev.2",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
-  "files": ["dist"],
+  "files": [
+    "dist",
+    "NOTICES.md"
+  ],
+  "packageManager": "pnpm@8.13.1",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
       "default": "./dist/index.js"
     },
+    "./jsx-runtime": {
+      "types": "./dist/jsx-runtime.d.ts",
+      "default": "./dist/jsx-runtime.js"
+    },
     "./elements": {
       "types": "./dist/elements/index.d.ts",
       "default": "./dist/elements/index.js"
     },
+    "./elements/*": {
+      "types": "./dist/elements/*.d.ts",
+      "default": "./dist/elements/*.js"
+    },
+    "./anta_global_tokens.css": "./dist/anta_global_tokens.css",
+    "./generate-icons.mjs": "./dist/generate-icons.mjs",
     "./*": {
       "types": "./dist/*.d.ts",
       "default": "./dist/*"
     }
   },
   "scripts": {
-    "build": "pnpm run build:js && pnpm run build:types",
-    "build:js": "esbuild src/components/Progress.tsx src/index.ts src/jsx-runtime.ts src/general_types.ts src/anta_helpers.ts src/elements/index.ts src/elements/a-progress.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": "pnpm run build:js && pnpm run build:css && pnpm run build:types",
+    "build:css": "cp src/elements/a-progress.css src/elements/a-text.css src/elements/a-icon.css src/elements/a-icon.shapes.css dist/elements/ && cp src/components/Progress.module.css src/components/Text.module.css dist/components/ && cp src/anta_global_tokens.css dist/ && cp scripts/generate-icons.mjs dist/",
+    "build:js": "esbuild src/components/Progress.tsx src/components/Text.tsx src/components/Icon.tsx src/index.ts src/jsx-runtime.ts src/general_types.ts src/anta_helpers.ts src/elements/index.ts src/elements/a-progress.ts src/elements/a-text.ts src/elements/a-icon.ts src/elements/a-icon.shapes.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",
     "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",
     "clean": "rm -rf dist"
   },
   "devDependencies": {