@antadesign/anta 0.1.1-dev.1 → 0.1.1-dev.4

package/dist/general_types.d.ts

@@ -1,16 +1,90 @@
+/** Common props for JSX component wrappers. */
 export interface BaseProps {
+    /** CSS class name. Merged with any internal classes by the component. */
     className?: string;
+    /** Inline styles applied to the root element. */
     style?: React.CSSProperties;
+    /** Child elements. When provided, replaces the component's default label/content. */
     children?: React.ReactNode;
 }
+/** Attributes for intrinsic custom elements (`<a-*>` tags) in JSX. */
 export interface BaseAttributes {
+    /** HTML `class` attribute (standard DOM). */
     class?: string;
+    /** React/Preact-style class name. Alias for `class`. */
     className?: string;
+    /** Inline styles applied to the element. */
     style?: React.CSSProperties;
     children?: React.ReactNode;
+    /** Tab order. Set to `0` to make the element keyboard-focusable. */
+    tabIndex?: number;
+    /** ARIA role override. */
+    role?: string;
+    /** Keydown handler — used for keyboard-driven interactions. */
+    onKeyDown?: (e: any) => void;
+    /** Click handler — used for mouse / tap activation. */
+    onClick?: (e: any) => void;
 }
+/**
+ * Attributes for the `<a-progress>` custom element.
+ *
+ * These are the low-level web component attributes. For the JSX wrapper with
+ * typed props and computed labels, use `Progress` from `@antadesign/anta`.
+ */
 export interface AProgressAttributes extends BaseAttributes {
+    /** Current progress value. */
     value?: number | string;
+    /** Maximum value. Defaults to 100. */
     max?: number | string;
+    /** Color variant. `'neutral'` is the default gray; `'info'` is blue. */
     tone?: 'neutral' | 'info';
+    /** ARIA role — the JSX wrapper sets this to `'progressbar'`. */
+    role?: string;
+    /** ARIA value-now (current). */
+    'aria-valuenow'?: number | string;
+    /** ARIA value-max. */
+    'aria-valuemax'?: number | string;
+    /** ARIA value-min (defaults to 0). */
+    'aria-valuemin'?: number | string;
+    /** ARIA accessible name. */
+    'aria-label'?: string;
+}
+/**
+ * Attributes for the `<a-text>` custom element.
+ *
+ * Low-level web component attributes; for the JSX wrapper use `Text`
+ * from `@antadesign/anta`.
+ */
+export interface ATextAttributes extends BaseAttributes {
+    /** Visual priority. Maps to text-1..text-5. */
+    priority?: 'primary' | 'secondary' | 'tertiary' | 'quaternary' | 'quinary';
+    /** Color tint. Applies the matching `--text-{N}-{tone}` palette. */
+    tone?: 'brand' | 'success' | 'critical' | 'warning' | 'info';
+    /** Render as inline-block instead of the default block. */
+    inline?: boolean | string;
+    /** 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. */
+    truncate?: boolean | string | number;
+    /** 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;
+    /** ARIA disclosure state, mirrors the JSX wrapper's `expanded` flag. */
+    'aria-expanded'?: boolean | 'true' | 'false';
+}
+/**
+ * Attributes for the `<a-icon>` custom element. The `shape` attribute
+ * value is typed as `string` here so the element accepts any consumer's
+ * generated shapes. The JSX wrapper (`Icon`) narrows it to `IconShape`.
+ */
+export interface AIconAttributes extends BaseAttributes {
+    /** Which icon to render. */
+    shape?: string;
+    /** ARIA role — the JSX wrapper sets `'img'` when a label is provided. */
+    role?: string;
+    /** ARIA accessible name when the icon carries meaning. */
+    'aria-label'?: string;
+    /** Hides decorative icons from screen readers. */
+    'aria-hidden'?: 'true' | 'false' | boolean;
 }

package/dist/generate-icons.mjs

@@ -0,0 +1,193 @@
+#!/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 = []
+  // Anta's per-element CSS lives in `@layer anta`. Consumer-generated
+  // icon sets default to the same so they sort alongside Anta's
+  // built-ins; consumers who want their icons unlayered can post-
+  // process the output.
+  const cssLines = [
+    '/* Auto-generated by scripts/generate-icons.mjs. Do not edit by hand. */',
+    '',
+    '@layer anta {',
+    '',
+  ]
+  // 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}`)
+    }
+  }
+
+  // Close the `@layer anta {` block opened at the top of cssLines.
+  cssLines.push('}')
+
+  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/dist/reset.css

@@ -0,0 +1,115 @@
+/* Anta's reset + typography defaults. All rules live in `@layer anta`
+   so consumer-owned components (in `@layer components`) and utility
+   frameworks (in `@layer utilities`) can override on demand. The
+   layer-order declaration in `tokens.css` (`@layer base, anta,
+   components, utilities;`) keeps Anta above any preflight resets in
+   `@layer base` so a Tailwind import doesn't wipe Anta's typography. */
+
+@layer anta {
+  /* ───── Structural reset ─────────────────────────────────────── */
+
+  /* Modern box-sizing — pads and borders count inside the declared
+     width/height. Universal selectors so `::before` / `::after`
+     pseudo-elements follow the host. */
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
+  /* Zero out browser-default margins on every element. Apps build
+     up their own spacing from explicit values rather than fighting
+     the user-agent stylesheet. */
+  * {
+    margin: 0;
+  }
+
+  /* Replaced elements as block-level by default + cap to their
+     container so a misplaced large image doesn't blow out the
+     layout. Consumers re-inline them with `display: inline-block`
+     where needed. */
+  img, picture, video, canvas, svg {
+    display: block;
+    max-width: 100%;
+  }
+
+  /* Inherit typography into form controls — by default browsers
+     reset font on these. */
+  input, button, textarea, select {
+    font: inherit;
+  }
+
+  /* Wrap long words rather than overflow; `text-wrap: pretty`
+     balances widows on paragraphs, `text-wrap: balance` evens
+     headlines across lines. */
+  p, h1, h2, h3, h4, h5, h6 {
+    overflow-wrap: break-word;
+  }
+  p {
+    text-wrap: pretty;
+  }
+  h1, h2, h3, h4, h5, h6 {
+    text-wrap: balance;
+  }
+
+  /* ───── Typography defaults — Anta opinion ───────────────────── */
+
+  h1, h2, h3, h4, h5, h6 {
+    font-weight: 600;
+  }
+
+  strong {
+    font-weight: 600;
+  }
+
+  /* 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
+     to --text-5 since they are visual scaffolding, not content. */
+  ul, ol {
+    padding-left: 3ch;
+  }
+  :is(ul, ol) > li {
+    margin-bottom: 0.5em;
+  }
+  :is(ul, ol) > li::marker {
+    color: var(--text-5);
+  }
+
+  /* `<menu>` is for command/option lists, not prose. By default
+     browsers render it like a `<ul>` (disc markers, 40px padding);
+     strip all of that so it's a clean semantic container ready to
+     be styled. */
+  menu {
+    list-style: none;
+    padding: 0;
+    margin: 0;
+  }
+  menu > li {
+    margin: 0;
+  }
+
+  /* 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 {
+    color: var(--link-color);
+    text-decoration: underline;
+    text-decoration-style: solid;
+    text-decoration-color: color-mix(in oklch, 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);
+  }
+}