@antadesign/anta 0.1.0

package/README.md

@@ -0,0 +1,54 @@
+# Anta
+
+Portable UI component library. Framework-agnostic web components with JSX wrappers that work in React, Preact, or any custom JSX runtime.
+
+## Usage
+
+### React
+
+Works out of the box — no configuration needed.
+
+```tsx
+import { Progress } from 'anta'
+
+<Progress value={42} max={100} tone="info" />
+```
+
+### Preact (compat mode)
+
+If your project aliases `react` → `preact/compat`, anta works with no extra setup — same as React.
+
+### Preact (no compat)
+
+Call `configure()` before rendering any anta components:
+
+```ts
+import { configure } from 'anta'
+import { h, Fragment } from 'preact'
+
+configure(h, Fragment)
+```
+
+### Custom JSX runtime
+
+Pass any `h(type, props, ...children)` function:
+
+```ts
+import { configure } from 'anta'
+configure(myH, myFragment)
+```
+
+## Web components
+
+Anta components are built on custom elements with shadow DOM. Import `anta/elements` to auto-register them, or use individual register functions:
+
+```ts
+import 'anta/elements'           // auto-register all
+import { register_a_progress } from 'anta/elements'  // one at a time
+```
+
+Raw web components work without JSX:
+
+```html
+<a-progress value="42" max="100" tone="info"></a-progress>
+```

package/dist/anta_helpers.d.ts

@@ -0,0 +1 @@
+export declare function hasChildren(children: React.ReactNode): boolean;

package/dist/anta_helpers.js

@@ -0,0 +1,6 @@
+function hasChildren(children) {
+  return Array.isArray(children) ? children.length > 0 : children != null;
+}
+export {
+  hasChildren
+};

package/dist/components/Progress.d.ts

@@ -0,0 +1,12 @@
+import type { BaseProps } from "../general_types";
+interface ProgressProps extends BaseProps {
+    /** Current progress. Negative values are clamped to 0. */
+    value: number;
+    /** Upper bound of the range. Defaults to 100. Negative values are clamped to 0. */
+    max?: number;
+    tone?: 'neutral' | 'info';
+    label?: string;
+    hint?: string;
+}
+export declare const Progress: ({ value, max, tone, label, hint, className, children, ...rest }: ProgressProps) => any;
+export {};

package/dist/components/Progress.js

@@ -0,0 +1,26 @@
+import { jsx, jsxs } from "@antadesign/anta/jsx-runtime";
+import { hasChildren } from "../anta_helpers";
+const Progress = ({ value, max = 100, tone, label, hint, className, children, ...rest }) => {
+  const percent = max > 0 ? Math.round(Math.min(100, Math.max(0, value / max * 100))) : 0;
+  return /* @__PURE__ */ jsx(
+    "a-progress",
+    {
+      value,
+      max,
+      tone,
+      class: className,
+      ...rest,
+      children: hasChildren(children) ? children : /* @__PURE__ */ jsxs("a-progress-label", { children: [
+        /* @__PURE__ */ jsxs("a-progress-number", { children: [
+          percent,
+          "%"
+        ] }),
+        label != null && /* @__PURE__ */ jsx("a-progress-text", { children: label }),
+        hint != null && /* @__PURE__ */ jsx("a-progress-hint", { children: hint })
+      ] })
+    }
+  );
+};
+export {
+  Progress
+};

package/dist/components/Progress.module.css

@@ -0,0 +1,5 @@
+/*
+ * 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/elements/a-progress.css

@@ -0,0 +1,65 @@
+a-progress {
+  --progress-bg: hsla(300, 10%, 96%, 1);
+  --progress-border-color: hsla(300, 6%, 87%, 1);
+  --progress-indicator-bg: hsla(300, 7%, 92%, 1);
+  --progress-indicator-edge: linear-gradient(90deg, hsla(300, 6%, 87%, 0) 0%, hsla(300, 6%, 87%, 1) 100%);
+  --progress-label-color: var(--fg-1);
+
+  display: block;
+  container-type: inline-size;
+  padding: 4px 8px;
+  min-height: 8px;
+  background: var(--progress-bg);
+  border: 0px solid var(--progress-border-color);
+  border-radius: 0;
+}
+
+.dark a-progress {
+  --progress-bg: hsla(278, 8%, 9%, 1);
+  --progress-border-color: hsla(278, 8%, 23%, 1);
+  --progress-indicator-bg: hsla(278, 8%, 15%, 1);
+  --progress-indicator-edge: linear-gradient(90deg, hsla(278, 8%, 23%, 0) 0%, hsla(278, 8%, 23%, 1) 100%);
+}
+
+a-progress[tone="info"] {
+  --progress-bg: #E7F4FF;
+  --progress-border-color: #B8DCF6;
+  --progress-indicator-bg: #DBEDFA;
+  --progress-indicator-edge: linear-gradient(90deg, hsla(205, 79%, 85%, 0) 0%, hsla(205, 79%, 85%, 1) 100%);
+  --progress-label-color: var(--fg-1-blue);
+}
+
+.dark a-progress[tone="info"] {
+  --progress-bg: #021A2D;
+  --progress-border-color: #062F4C;
+  --progress-indicator-bg: #05253F;
+  --progress-indicator-edge: linear-gradient(90deg, hsla(207, 85%, 16%, 0) 0%, hsla(207, 85%, 16%, 1) 100%);
+}
+
+a-progress-label {
+  display: flex;
+  align-items: flex-start;
+  gap: 0.5ch;
+  font-variant-numeric: tabular-nums;
+  font-feature-settings: 'ss02', 'ss05';
+  letter-spacing: 0.03em;
+  font-size: 13px;
+  line-height: 16px;
+}
+
+a-progress-number {
+  flex-shrink: 0;
+  color: var(--progress-label-color);
+}
+
+a-progress-text {
+  flex: 1 1 auto;
+  min-width: 0;
+  color: var(--fg-2);
+}
+
+a-progress-hint {
+  flex-shrink: 0;
+  margin-left: auto;
+  color: var(--fg-3);
+}

package/dist/elements/a-progress.d.ts

@@ -0,0 +1,9 @@
+export declare class AProgressElement extends HTMLElement {
+    static observedAttributes: string[];
+    indicator: HTMLDivElement;
+    constructor();
+    connectedCallback(): void;
+    attributeChangedCallback(): void;
+    update(): void;
+}
+export declare function register_a_progress(): void;

package/dist/elements/a-progress.js

@@ -0,0 +1,64 @@
+class AProgressElement extends HTMLElement {
+  static observedAttributes = ["value", "max", "tone"];
+  indicator;
+  constructor() {
+    super();
+    const shadow = this.attachShadow({ mode: "open" });
+    const style = document.createElement("style");
+    style.textContent = `
+      :host {
+        display: block;
+        position: relative;
+        overflow: hidden;
+      }
+      .indicator {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: var(--_percent, 0%);
+        background: var(--progress-indicator-bg);
+        border-radius: 0;
+        transition: width 0.2s ease;
+      }
+      .indicator::after {
+        content: '';
+        position: absolute;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        width: 90px;
+        background: var(--progress-indicator-edge);
+      }
+      slot {
+        display: block;
+        position: relative;
+      }
+    `;
+    this.indicator = document.createElement("div");
+    this.indicator.className = "indicator";
+    const slot = document.createElement("slot");
+    shadow.append(style, this.indicator, slot);
+  }
+  connectedCallback() {
+    this.update();
+  }
+  attributeChangedCallback() {
+    this.update();
+  }
+  update() {
+    const value = Number(this.getAttribute("value") ?? 0);
+    const max = Number(this.getAttribute("max") ?? 100);
+    const percent = max > 0 ? Math.min(100, Math.max(0, value / max * 100)) : 0;
+    this.indicator.style.setProperty("--_percent", `${percent}%`);
+  }
+}
+function register_a_progress() {
+  if (!customElements.get("a-progress")) {
+    customElements.define("a-progress", AProgressElement);
+  }
+}
+export {
+  AProgressElement,
+  register_a_progress
+};

package/dist/elements/index.d.ts

@@ -0,0 +1,2 @@
+import './a-progress.css';
+export { AProgressElement, register_a_progress } from './a-progress';

package/dist/elements/index.js

@@ -0,0 +1,10 @@
+import { register_a_progress } from "./a-progress";
+import "./a-progress.css";
+import { AProgressElement, register_a_progress as register_a_progress2 } from "./a-progress";
+if (typeof customElements !== "undefined") {
+  register_a_progress();
+}
+export {
+  AProgressElement,
+  register_a_progress2 as register_a_progress
+};

package/dist/general_types.d.ts

@@ -0,0 +1,16 @@
+export interface BaseProps {
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export interface BaseAttributes {
+    class?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    children?: React.ReactNode;
+}
+export interface AProgressAttributes extends BaseAttributes {
+    value?: number | string;
+    max?: number | string;
+    tone?: 'neutral' | 'info';
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { Progress } from './components/Progress';
+export { configure } from './jsx-runtime';

package/dist/index.js

@@ -0,0 +1,6 @@
+import { Progress } from "./components/Progress";
+import { configure } from "./jsx-runtime";
+export {
+  Progress,
+  configure
+};

package/dist/jsx-runtime.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+type ComponentType = string | Function | symbol;
+type JsxFunction = {
+    h(type: ComponentType, props: Record<string, unknown> | null, ...children: unknown[]): unknown;
+}['h'];
+declare let _Fragment: ComponentType;
+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';
+export declare namespace JSX {
+    type IntrinsicElements = React.JSX.IntrinsicElements & {
+        'a-progress': AProgressAttributes;
+        'a-progress-label': BaseAttributes;
+        'a-progress-number': BaseAttributes;
+        'a-progress-text': BaseAttributes;
+        'a-progress-hint': BaseAttributes;
+    };
+}

package/dist/jsx-runtime.js

@@ -0,0 +1,29 @@
+import React from "react";
+let _jsx = React.createElement;
+let _Fragment = React.Fragment;
+function configure(jsx2, Fragment) {
+  _jsx = jsx2;
+  if (Fragment !== void 0) _Fragment = Fragment;
+}
+function jsx(type, props, key) {
+  const { children, ...rest } = props ?? {};
+  const p = key !== void 0 ? { ...rest, key } : rest;
+  if (children !== void 0) {
+    return _jsx(type, p, children);
+  }
+  return _jsx(type, p);
+}
+function jsxs(type, props, key) {
+  const { children, ...rest } = props ?? {};
+  const p = key !== void 0 ? { ...rest, key } : rest;
+  if (children !== void 0) {
+    return _jsx(type, p, ...children);
+  }
+  return _jsx(type, p);
+}
+export {
+  _Fragment as Fragment,
+  configure,
+  jsx,
+  jsxs
+};

package/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@antadesign/anta",
+  "version": "0.1.0",
+  "type": "module",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "default": "./dist/index.js"
+    },
+    "./elements": {
+      "types": "./dist/elements/index.d.ts",
+      "default": "./dist/elements/index.js"
+    },
+    "./*": {
+      "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:types": "tsc -p src/tsconfig.json",
+    "typecheck": "tsc --noEmit -p src/tsconfig.json",
+    "clean": "rm -rf dist"
+  },
+  "devDependencies": {
+    "@types/react": "^19.0.0",
+    "esbuild": "^0.25.0",
+    "typescript": "^5.7.0"
+  },
+  "dependencies": {
+    "classnames": "^2.5.0"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "pnpm": {
+    "onlyBuiltDependencies": [
+      "esbuild",
+      "sharp"
+    ]
+  }
+}