remco/EpicNext-Cms
1
1 Fork 0
Code Issues Pull Requests 1 Actions Packages Projects Releases Wiki Activity

Fix checkbox and switch styles after Base UI migration.
Local Build and Deploy / deploy (push) Successful in 1m2s
Details

Browse Source 
Co-authored-by: Cursor <[email protected]>
This commit is contained in:
SimoandCursor committed 2026-07-17 18:35:44 +02:00
1 parent 25f01b61b3
commit d2c33145a2
2 files changed
+33 -6
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

src/components/ui/checkbox.tsx
+11 -3
View File
@@ -10,16 +10,24 @@ function Checkbox({ className, ...props }: CheckboxPrimitive.Root.Props) {
<CheckboxPrimitive.Root
data-slot="checkbox"
className={cn(
"peer border-input dark:bg-input/30 data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary data-checked:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
"peer relative size-4 shrink-0 rounded-[4px] border shadow-xs outline-none transition-colors",
"border-input bg-background text-transparent",
"hover:border-primary/60",
"data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground",
"data-indeterminate:border-primary data-indeterminate:bg-primary data-indeterminate:text-primary-foreground",
"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/40",
"aria-invalid:border-destructive aria-invalid:ring-destructive/20",
"disabled:cursor-not-allowed disabled:opacity-50",
className,
)}
{...props}
>
<CheckboxPrimitive.Indicator
data-slot="checkbox-indicator"
className="grid place-content-center text-current transition-none"
className="flex size-full items-center justify-center text-current"
keepMounted={false}
>
<CheckIcon className="size-3.5" />
<CheckIcon className="size-3 stroke-[3]" aria-hidden />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
);
src/components/ui/switch.tsx
+22 -3
View File
@@ -1,6 +1,7 @@
"use client";
import { Switch as SwitchPrimitive } from "@base-ui/react/switch";
import { CheckIcon } from "lucide-react";
import { cn } from "@/lib/utils";
@@ -16,7 +17,13 @@ function Switch({
data-slot="switch"
data-size={size}
className={cn(
"peer data-checked:bg-primary data-unchecked:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-unchecked:bg-input/80 group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6",
"peer group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs outline-none transition-colors",
"bg-input hover:bg-input/80",
"data-checked:bg-primary data-checked:hover:bg-primary/90",
"focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/40",
"disabled:cursor-not-allowed disabled:opacity-50",
"data-[size=default]:h-5 data-[size=default]:w-9",
"data-[size=sm]:h-4 data-[size=sm]:w-7",
className,
)}
{...props}
@@ -24,9 +31,21 @@ function Switch({
<SwitchPrimitive.Thumb
data-slot="switch-thumb"
className={cn(
"bg-background dark:data-unchecked:bg-foreground dark:data-checked:bg-primary-foreground pointer-events-none block rounded-full ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-checked:translate-x-[calc(100%-2px)] data-unchecked:translate-x-0",
"pointer-events-none absolute top-1/2 flex -translate-y-1/2 items-center justify-center rounded-full bg-background text-primary shadow-sm ring-0 transition-[left,colors]",
"left-0.5 data-checked:left-[calc(100%-1.125rem)]",
"group-data-[size=default]/switch:size-4",
"group-data-[size=sm]/switch:size-3 group-data-[size=sm]/switch:data-checked:left-[calc(100%-0.875rem)]",
)}
/>
>
<CheckIcon
aria-hidden
className={cn(
"size-2.5 stroke-[3] opacity-0 transition-opacity",
"group-data-checked/switch:opacity-100",
"group-data-[size=sm]/switch:size-2",
)}
/>
</SwitchPrimitive.Thumb>
</SwitchPrimitive.Root>
);
}