@core / ui

1.0.1 ▾

1.0.1

인증됨MIT

GitHub

네이티브 요소 기반 React 접근성 UI: 필드, 버튼, 표, 탭, 대화상자, 알림, AA 명/암 토큰

코드파일 5개컨텍스트약 403토큰검사 통과

설치

$genpm add @core/ui

포함 내용

src/lib/ui/에 소스 코드, 파일 5개. (19.2kB)
src/lib/ui/AGENTS.md에 AI 규칙, 그리고 IDE 규칙 파일.

README

이 패키지에는 README가 없습니다.

약 403토큰→ src/lib/ui/AGENTS.md→ .cursor/rules/genpm-core-ui.mdc

이것이 AI가 src/lib/ui에서 작업할 때 읽는 내용 그대로입니다. 그 외에는 컨텍스트에 아무것도 추가되지 않습니다.

@core/ui — rules for AI agents

Purpose

Small accessible component set for React built on native elements (no UI library): Button, TextField, TextareaField, SelectField, Checkbox, Field (label + help + error wiring), DataTable (with aria-sort), Pagination, Tabs (WAI-ARIA, arrow keys), Dialog (native <dialog>), Alert, Badge, Card, Toasts, Spinner, Skeleton. Styling lives in ui.css as CSS variables (light/dark, WCAG AA contrast) and ui-* classes. Used by @core/admin, @core/blocks and the kits.

Map

index.ts — all components and cx().
components.ts — implementation. ui.css — tokens and styles.

Integration

Import the stylesheet once in the root layout: import '@/lib/ui/ui.css' and add className="ui-root" to <body>.
Use components: <TextField label="Email" type="email" required error={errors.email} />, <Button variant="primary" loading={saving}>Save</Button>.
Theme: change --ui-* variables in your CSS; force a theme with <html data-theme="dark">.
Verify: tab through a form; every control has a visible focus ring and a label.

Conventions

Every field gets a visible label (use hideLabel only when context makes it obvious); errors go in error, not in placeholders.
Interactive elements are real <button>/<a>/inputs; don't add click handlers to <div>.
Pass translated labels to Pagination and dismissLabel to Toasts.

Don't

Don't lower contrast below 4.5:1 when changing tokens, or remove the focus outline.
Don't add app-specific components here; keep them in your app or kit.

# @core/ui — rules for AI agents

## Purpose
Small accessible component set for React built on native elements (no UI library): `Button`, `TextField`,
`TextareaField`, `SelectField`, `Checkbox`, `Field` (label + help + error wiring), `DataTable` (with `aria-sort`),
`Pagination`, `Tabs` (WAI-ARIA, arrow keys), `Dialog` (native `<dialog>`), `Alert`, `Badge`, `Card`, `Toasts`,
`Spinner`, `Skeleton`. Styling lives in `ui.css` as CSS variables (light/dark, WCAG AA contrast) and `ui-*` classes.
Used by @core/admin, @core/blocks and the kits.

## Map
- `index.ts` — all components and `cx()`.
- `components.ts` — implementation. `ui.css` — tokens and styles.

## Integration
1. Import the stylesheet once in the root layout: `import '@/lib/ui/ui.css'` and add `className="ui-root"` to `<body>`.
2. Use components: `<TextField label="Email" type="email" required error={errors.email} />`, `<Button variant="primary" loading={saving}>Save</Button>`.
3. Theme: change `--ui-*` variables in your CSS; force a theme with `<html data-theme="dark">`.
4. Verify: tab through a form; every control has a visible focus ring and a label.

## Conventions
- Every field gets a visible label (use `hideLabel` only when context makes it obvious); errors go in `error`, not in placeholders.
- Interactive elements are real `<button>`/`<a>`/inputs; don't add click handlers to `<div>`.
- Pass translated `labels` to `Pagination` and `dismissLabel` to `Toasts`.

## Don't
- Don't lower contrast below 4.5:1 when changing tokens, or remove the focus outline.
- Don't add app-specific components here; keep them in your app or kit.