Packages & exports
Hand-maintained reference. TSDoc→MDX auto-generation is deferred.
SINA is five small packages with hard boundaries (enforced by lint rules in the repo). Each layer may only know about the ones below it:
| Package | What it is | Runs | Never contains |
|---|---|---|---|
@sina-design-system/theme | Design tokens (--sina-*) + the CSS reset | CSS only | React, UI |
@sina-design-system/core | Headless, accessible primitives on Radix | Client (+ SSR) | Zod, domain vocabulary |
@sina-design-system/governance | The shared interception seam | Server (for enforcement) | React, UI, domain vocabulary |
@sina-design-system/fintech | The fintech Constitution, pure Zod rules | Server (for enforcement) | React, UI of any kind |
@sina-design-system/fintech-react | Governed components composing core + fintech | Client (+ SSR) | Zod (it composes schemas, never authors them) |
governance and fintech are plain TypeScript with no runtime restriction,
so they can execute in a browser; run them on the server when the result is
meant to be enforced (How it works).
theme
Ships ./reset.css (layered, so your styles always win) and the --sina-*
custom properties at ./css, also exported as ./theme.css so TypeScript
accepts the side-effect import. The token grammar, tiers, and scales live in
Tokens; what you may override lives in
Theming.
core
The primitive library. Every export is listed with live examples in the
Primitives gallery. Named exports only; per-primitive
prop types (ButtonProps, GapStep, SummaryItem, …) ship alongside.
Bundle size: the build preserves one module per component with
dependencies external, and only CSS is marked as a side effect, so a
tree-shaking bundler can drop what you don't import (chart.js only lands in
your bundle when you use a chart component). Measure your own bundle to
confirm; the package makes it possible, your bundler makes it happen.
governance
The domain-agnostic seam every constitution builds on:
| Export | Purpose |
|---|---|
InterceptionResult, Violation, Severity | The uniform contract; see the interception contract. |
intercept, ConstitutionRule | Runs a Zod schema + policy server-side, returns the contract. |
dispatch, dispatchAll, createRouter, pattern | The intent router: { intent, props } envelope → decision + mount. |
UNKNOWN_INTENT, SCHEMA_INVALID | Sentinels for an unrecognized verb / a failed parse. |
emitAudit, redact, setAuditSink, AuditEvent | The audit emit point; see the audit trail. |
The router resolves the mount outside the contract, so governance stays an optional escalation layer on a universal validate-then-mount.
fintech and fintech-react
fintech is the shipped Constitution: every intent verb, schema, threshold,
and cited standard. fintech-react renders the decisions it makes, the
governed components. Both are cataloged in Governed components & display
patterns; write your own rule in
Write a governance rule.
Versions
All five packages version together, in lockstep; see Releases & stability.