20 lines
1.1 KiB
TypeScript
20 lines
1.1 KiB
TypeScript
import { cva } from "../lib/cva";
|
|
import { getMotionRecipeClassNames } from "../lib/motion";
|
|
|
|
export const checkboxVariants = cva(
|
|
[
|
|
"inline-flex size-5 shrink-0 items-center justify-center rounded-[var(--ui-control-radius)] border bg-[var(--ui-control-bg)] shadow-[var(--ui-control-shadow)] outline-none",
|
|
"[border-width:var(--ui-input-border-width)] border-[var(--ui-control-border)]",
|
|
"text-[var(--color-primary-foreground)] transition-[background-color,border-color,box-shadow,transform] duration-[var(--dur-fast)] ease-[var(--ease-standard)]",
|
|
"focus-visible:ring-2 focus-visible:ring-[var(--color-ring)] focus-visible:ring-offset-2 focus-visible:ring-offset-[var(--color-background)]",
|
|
"data-[state=checked]:border-[var(--color-primary)] data-[state=checked]:bg-[var(--color-primary)]",
|
|
"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-45",
|
|
"aria-[invalid=true]:border-[color-mix(in_oklch,var(--color-destructive)_42%,var(--color-border-strong))]",
|
|
getMotionRecipeClassNames("ring")
|
|
]
|
|
);
|
|
|
|
export const checkboxIndicatorVariants = cva([
|
|
"inline-flex items-center justify-center text-[0.8rem] leading-none"
|
|
]);
|