@core / ui

1.0.1 ▾

1.0.1

인증됨MIT

GitHub

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

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

약 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.

.genpmignore 적용 후 주입될 정확한 트리입니다. 고정 대상:

src/lib/ui/index.ts읽기 전용 · 9955ea1

// @core/ui — componentes base. Importa también los estilos: `import './lib/ui/ui.css'` (o cópialos a tu CSS global).
export {
  Alert,
  Badge,
  Button,
  type ButtonProps,
  Card,
  Checkbox,
  type Column,
  cx,
  DataTable,
  Dialog,
  Field,
  type FieldIds,
  Pagination,
  SelectField,
  Skeleton,
  Spinner,
  Tabs,
  TextareaField,
  TextField,
  type Toast,
  Toasts,
  useToasts,
  VisuallyHidden,
} from './components.ts';