Accessible, themeable Jacaré components powered by signals — no virtual DOM.

Docs: https://jacarejs.github.io/ui/

Description (GitHub)

Official UI component library for Jacaré — accessible, themeable components powered by signals, with no virtual DOM

Install

yarn add @jacare/ui @jacare/core

Peer dependency: @jacare/core — always use the latest published release (minimum ^0.1.16).

Import the theme once at your app entry, then boot theme / density / motion preferences:

import '@jacare/ui/theme.css'
import { applyTheme, applyDensity, applyMotion } from '@jacare/ui/theme'

applyTheme('system')
applyDensity('comfortable')
applyMotion('system')

i18n

Simple translations (vue-i18n-like, much smaller). Keep one file per locale, then boot once:

src/
├── i18n.js
├── app.jcr
└── locales/
    ├── index.js
    ├── en.js
    └── pt-BR.js

// locales/en.js
export default { hello: 'Hello, {name}!', save: 'Save', app: { title: 'My app' } }

// locales/pt-BR.js
export default { hello: 'Olá, {name}!', save: 'Salvar', app: { title: 'Meu app' } }

// locales/index.js
import en from './en.js'
import ptBR from './pt-BR.js'
export const messages = { en, 'pt-BR': ptBR }

// i18n.js
import { createI18n, t, translate, setLocale } from '@jacare/ui/i18n'
import { messages } from './locales/index.js'

createI18n({ locale: 'en', fallbackLocale: 'en', messages })

translate('hello', { name: 'Heber' }) // Hello, Heber!
setLocale('pt-BR')

In .jcr views, t() is already reactive — no arrow:

<h1>${t('app.title')}</h1>
<Confirm :title=${t('confirm.title')} />

LocaleToggle switches locales; see the i18n docs.

Usage

import { pulse } from '@jacare/core'
import Button from '@jacare/ui/Button'
import Field from '@jacare/ui/Field'
import Card from '@jacare/ui/Card'

const name = pulse('')

export <view>
  <Card :title=${'Profile'}>
    <Field :label=${'Name'} bind-value=${name} />
    <Button :variant=${'primary'} on-press=${() => console.log(name())}>
      Save
    </Button>
  </Card>
</view>

Components ship as precompiled ESM modules (mount / render / resume). Your app still needs @jacare/vite-plugin (or the Jacaré CLI) to compile your own .jcr files.

Prefer deep imports such as @jacare/ui/Button — the same path used throughout the docs. The package barrel also re-exports named members.

Components

Full catalog with live demos: Components overview.

| Component | Role | |-----------|------| | Alert | Inline status banner | | AnimateOnScroll | Viewport enter/leave animations | | Autocomplete | Text field with filtered suggestions | | Avatar | Initials or image avatar | | Badge | Compact tone pills | | Button | Primary actions (press emit) | | Card | Elevated surface with optional title | | Cascader | Multi-level nested path picker | | Checkbox | Two-way boolean control | | ColorPicker | Hex + swatch color field | | ColorPickerPanel | Standalone color panel | | Compare | Before/after image slider | | Confirm | Modal confirmation (open model) | | DataTable | Sortable selectable data table | | DataView | List/grid cards with pagination | | Gallery | Thumbnails + lightbox viewer | | Hover | Hover/focus state wrapper | | MeterGroup | Segmented meter with legend | | OrderList | Reorderable selection list | | OrganizationChart | Hierarchical org chart | | Parallax | Scroll-linked background image | | ProgressCircle | Circular progress indicator | | Ripple | Pointer ripple wrapper | | DatePicker | Typed or calendar date / range picker | | DatePickerPanel | Inline calendar (single, range, or multiple) | | DateTimePicker | Composed DatePicker + TimePicker | | Dialog | Lightweight focus-trapped modal | | Divider | Horizontal / vertical rule | | Drawer | Side / bottom overlay panel | | Field | Labeled text input (model value) | | Flex | Full flexbox positioning | | Form / FormItem | Form layout and labeled rows | | Grid | CSS grid tracks for layout | | Icon | Stroke icon set (name, sizes, tones) | | Input | Text field with clear, sizes, affixes | | InputMask | Pattern mask (CPF, phone, CEP, card, custom) | | InputMoney | Currency amount with locale formatting | | InputNumber | Numeric stepper | | InputOtp | One-time code boxes | | InputTag | Tag chips from keyboard input | | Mention | Textarea with @ suggestions | | MessageBox | Alert / confirm / prompt dialogs | | Modal | Full modal with footer, sheet mobile, scroll lock | | Progress | Signal-driven progress bar | | Radio / RadioGroup | Single-choice controls | | Rate | Star rating | | Select / SelectV2 | Dropdown select (virtualized option) | | Skeleton / SkeletonItem | Loading placeholders with optional shimmer | | Slider | Continuous or range track | | Spinner | Indeterminate loading indicator | | Stack | Simple flex gap helper | | Statistic | Metrics with optional count-up | | Switch | Immediate on/off toggle | | Text | Typography helper | | Textarea | Multiline field with count | | ThemeScope / ThemeToggle | Scoped theme + light/dark/system control | | LocaleToggle | Switch active i18n locale | | TimePicker / TimeSelect | Time spinners and discrete lists | | Transfer | Move items between lists | | TreeSelect | Select a node from a tree | | Upload | File picker with list layouts | | VisuallyHidden | Hide visually, keep for AT |

Theme API

| Helper | Purpose | |--------|---------| | applyTheme('light' \| 'dark' \| 'system') | Resolve and apply data-j-theme | | applyDensity('compact' \| 'comfortable' \| 'spacious') | Scale control height/padding via --j-density | | applyMotion('system' \| 'full' \| 'reduce') | Honor or override reduced motion |

Core tokens live in @jacare/ui/theme.css (--j-primary, --j-surface, --j-font, --j-duration-*, --j-touch-target, --j-bp-*, --j-safe-*, …). Override any token on :root or a subtree. See the Theme, Token reference, and docs tools (Theme Editor, Density Preview, Motion Lab, Viewport Lab).

Local development

yarn install
yarn verify
yarn build
yarn test
yarn test:coverage
yarn docs:dev

| Script | Purpose | |--------|---------| | yarn verify | Compile every .jcr and validate contracts | | yarn build | Emit dist/ ESM + typings + theme | | yarn test | Vitest + happy-dom component tests | | yarn test:coverage | Unit tests with V8 coverage + thresholds | | yarn docs:dev | Documentation site (local) | | yarn docs:build | Build docs for GitHub Pages |

Coverage

Latest yarn test:coverage result (203 tests, all passing). Scoped to theme, i18n, internals (utils / mask / overlay / highlight), and docs helpers (nav-data, navigate, theme editor / labs). Large chart / QR / empty-image helpers are excluded from the threshold until dedicated unit suites land.

| Metric | Result | |--------|--------| | Statements | 100% (2876/2876) | | Branches | 100% (607/607) | | Functions | 100% (128/128) | | Lines | 100% (2876/2876) |

Thresholds in vitest.config.js: lines / functions / branches / statements 100%.

Live docs: https://jacarejs.github.io/ui/

Package layout

src/
  components/*.jcr   # 171 components (source of truth)
  theme/             # tokens + applyTheme / density / motion
  i18n/              # createI18n, LocaleToggle, en / pt-BR packs
  validation/        # createForm + rules
  feedback/          # message, notification, loading, message-box
  internal/          # utils, overlay, mask, highlight, charts, …
dist/                # published ESM build
docs/                # documentation site

Related

• Documentation
• Jacaré core
• Showcase
• Lab

License

MIT © Heber Almeida