mirror of
https://github.com/MBombeck/HealthLog.git
synced 2026-11-09 04:50:59 +00:00
Marc-André Bombeck
6c7fc7dc84
Audit-marathon close: 14 waves + W10 QA + reconcile. Perf fix (analytics 9 s -> 2-3 s), Zod multi-issue rollout (41 routes), Withings parked-state automation, mobile-UI WCAG 2.5.5 close, QoL i18n + offline banner + account delete, security PII drop + replay-injection scan. Migration 0075 required. Tests 4815 -> 5076.
44 lines
2.0 KiB
TypeScript
44 lines
2.0 KiB
TypeScript
"use client";
|
||
|
||
import * as React from "react";
|
||
import { Switch as SwitchPrimitive } from "radix-ui";
|
||
|
||
import { cn } from "@/lib/utils";
|
||
|
||
function Switch({
|
||
className,
|
||
size = "default",
|
||
...props
|
||
}: React.ComponentProps<typeof SwitchPrimitive.Root> & {
|
||
size?: "sm" | "default";
|
||
}) {
|
||
return (
|
||
<SwitchPrimitive.Root
|
||
data-slot="switch"
|
||
data-size={size}
|
||
className={cn(
|
||
// v1.4.43 W5-H1 — extend the WCAG 2.5.5 hit target to 44×44 px via
|
||
// a `::before` pseudo-element while leaving the visual track at
|
||
// 18×32 px. The same trick is used on Input (v1.4.34 IW-G). The
|
||
// wrapping `relative` and `before:absolute … before:inset-[-13px]`
|
||
// pair guarantees pointer events bubble up from the larger zone
|
||
// without disturbing layout. v1.4.43 W10 design-M1 — `-13px` (not
|
||
// `-12px`) takes the 18.4 px track + 26 px padding to 44.4 px and
|
||
// closes the 1.6 px vertical short fall to spec-strict 2.5.5.
|
||
"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 group/switch relative inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none before:absolute before:inset-[-13px] before:content-[''] 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",
|
||
className,
|
||
)}
|
||
{...props}
|
||
>
|
||
<SwitchPrimitive.Thumb
|
||
data-slot="switch-thumb"
|
||
className={cn(
|
||
"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=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-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0",
|
||
)}
|
||
/>
|
||
</SwitchPrimitive.Root>
|
||
);
|
||
}
|
||
|
||
export { Switch };
|