6344a513ce
Second step of the visual-redesign (tokens -> primitives -> surfaces): a small set of shared, token-driven primitives in @trails-cool/ui so both apps compose from one styled vocabulary instead of hand-rolling bg-white/text-gray-* per screen. - @trails-cool/ui now ships React components (Button variants+sizes, Badge tones, Card raised/subtle, Input) plus a tiny cn() helper. React is a peer dep; package builds with no bundling step. - Co-located jsdom unit tests (@testing-library/react) assert roles, token classes, variant switching, and behavior — run in the existing Unit Tests gate, cross-platform, no snapshot baseline needed. - Tailwind @source directive in both apps' styles.css so the package's token utility classes get generated. - Dev-only /dev/ui gallery route in the planner renders every primitive in all states — a zero-dependency stand-in for Storybook. Excluded from production builds (NODE_ENV guard in routes.ts). No app surfaces are refactored yet; adopting the primitives in the topbar/sidebar/etc. is the surface task groups. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
21 lines
633 B
TypeScript
21 lines
633 B
TypeScript
import type { HTMLAttributes } from "react";
|
|
import { cn } from "./cn.ts";
|
|
|
|
export type BadgeTone = "neutral" | "accent" | "stop";
|
|
|
|
export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
tone?: BadgeTone;
|
|
}
|
|
|
|
const base =
|
|
"inline-flex items-center gap-1 rounded-full px-2 py-0.5 text-xs font-medium";
|
|
|
|
const tones: Record<BadgeTone, string> = {
|
|
neutral: "bg-bg-subtle text-text-md",
|
|
accent: "bg-accent-bg text-accent",
|
|
stop: "bg-stop-bg text-stop",
|
|
};
|
|
|
|
export function Badge({ tone = "neutral", className, ...props }: BadgeProps) {
|
|
return <span className={cn(base, tones[tone], className)} {...props} />;
|
|
}
|