@composy/approval-core

Framework-agnostic approval UI runtime for LDesign.

Features

• Native TypeScript components for approval panels, timelines, status flows, countersign, transfer, extra-sign, urge, statistics, and document cards.
• DOM classes are namespaced with ldesign-approval-*.
• Component CSS variables are namespaced with --ldesign-approval-* and bridge to @composy/color-core / @composy/size-core generated --ld-* tokens.
• Build outputs include es, esm, lib, and dist with dist/index.min.js.

Install

pnpm add @composy/approval-core @composy/color-core @composy/size-core

Usage

import { createApprovalPanel } from '@composy/approval-core';

const panel = createApprovalPanel({
  container: '#approval-root',
  actions: ['approve', 'reject', 'transfer', 'delegate', 'extra-sign-after', 'urge'],
  currentNode: {
    id: 'finance',
    name: 'Finance review',
    status: 'processing',
    assignee: { id: 'u-1', name: 'Ada' },
  },
  candidates: [
    { id: 'u-2', name: 'Grace', department: 'Finance' },
  ],
  onSubmit: (action, opinion) => console.log(action, opinion),
  onTransfer: (person, reason) => console.log(person, reason),
  onExtraSign: (type, persons, reason) => console.log(type, persons, reason),
});

panel.setActiveAction('transfer');
panel.setCandidates([{ id: 'u-3', name: 'Lin' }]);

Styling Contract

• Do not target unprefixed classes. Public DOM classes use ldesign-approval-*.
• Colors must come from @composy/color-core variables such as --ld-primary-default, --ld-bg-surface, and --ld-text-primary.
• Spacing, radius, font, border width, and fixed dimensions must come from @composy/size-core variables such as --ld-spacing-md, --ld-radius-md, and --ld-px-24.

Scripts

pnpm run type-check
pnpm run build

License

MIT