mirror of
https://github.com/diegosouzapw/OmniRoute.git
synced 2026-08-07 07:42:13 +03:00
2c09f5c0c3
Grid wallpaper opacity tuned up so it's actually visible on the dense dashboard: light 0.045->0.07, dark 0.035->0.06 (the site's 0.045/0.035 read as invisible behind the cards/chrome that cover most of the viewport). Focus-ring reconcile (design.md C6): the form controls (Input, Select, Textarea, Toggle, Checkbox) now focus on the accent (violet) ring to match the global --focus-ring, instead of the red ring-primary that collided with the red error state. Error rings stay red. Guard test updated (grid opacity + new C6 assertion). Build verified: --grid-line compiles to #00000012 / #ffffff0f and focus:ring-accent/30 + focus:border-accent/50 utilities are generated.
39 lines
1.1 KiB
TypeScript
39 lines
1.1 KiB
TypeScript
"use client";
|
|
|
|
import { cn } from "@/shared/utils/cn";
|
|
|
|
interface CheckboxProps extends React.InputHTMLAttributes<HTMLInputElement> {
|
|
label?: React.ReactNode;
|
|
}
|
|
|
|
/**
|
|
* Checkbox — token-driven native checkbox (brand accent + keyboard focus ring).
|
|
* Replaces the ad-hoc `<input type="checkbox" style={{ accentColor: "#6366f1" }}>`
|
|
* pattern scattered across the dashboard. Optional `label` wraps it in a clickable row.
|
|
*/
|
|
export default function Checkbox({ label, className, id, ...props }: CheckboxProps) {
|
|
const box = (
|
|
<input
|
|
type="checkbox"
|
|
id={id}
|
|
className={cn(
|
|
"h-4 w-4 shrink-0 cursor-pointer rounded-[4px] accent-[var(--color-accent)]",
|
|
"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-accent/30",
|
|
"disabled:cursor-not-allowed disabled:opacity-50",
|
|
className
|
|
)}
|
|
{...props}
|
|
/>
|
|
);
|
|
if (!label) return box;
|
|
return (
|
|
<label
|
|
htmlFor={id}
|
|
className="inline-flex items-center gap-2 cursor-pointer text-sm text-text-main"
|
|
>
|
|
{box}
|
|
<span>{label}</span>
|
|
</label>
|
|
);
|
|
}
|