d2b4ff2018
Скилл переносится из ~/.claude/skills/aura-design в репозиторий обвязки: SKILL.md, справочники reference/ и набор kit/ (токены, base.css, компоненты React, оболочка AppShell, тест токенов, test-setup, примеры входа). install.sh ставит его в ~/.claude/skills/aura-design, --check его видит. tests/test-aura-design.sh проверяет структуру и инварианты набора. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
16 lines
990 B
TypeScript
16 lines
990 B
TypeScript
import { cloneElement, useId, type ReactElement, type ReactNode } from "react";
|
|
|
|
// подпись над контролом; связь через htmlFor/id, подсказка и ошибка — через aria-describedby (имя поля — только подпись)
|
|
export function Field({ label, hint, error, children }: { label: string; hint?: ReactNode; error?: ReactNode; children: ReactElement<Record<string, unknown>> }) {
|
|
const id = useId();
|
|
const described = [hint && `${id}-hint`, error && `${id}-err`].filter(Boolean).join(" ") || undefined;
|
|
return (
|
|
<div className="ui-field">
|
|
<label className="ui-field__label" htmlFor={id}>{label}</label>
|
|
{cloneElement(children, { id, "aria-describedby": described, ...(error ? { "aria-invalid": "true" } : {}) })}
|
|
{hint && <span className="ui-field__hint" id={`${id}-hint`}>{hint}</span>}
|
|
{error && <span className="ui-field__error" id={`${id}-err`} role="alert">{error}</span>}
|
|
</div>
|
|
);
|
|
}
|