Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 | 105x 105x 105x 105x 29x 4x 4x 1x 1x 3x 3x | import * as CheckboxPrimitive from "@radix-ui/react-checkbox"; import { Check } from "lucide-react"; import * as React from "react"; import { DependencyWrapperProps } from "shared-types"; import { cn } from "@/utils"; const CheckboxComponent = React.forwardRef< React.ElementRef<typeof CheckboxPrimitive.Root>, React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> & DependencyWrapperProps & { id: string; className?: string; label?: string; value?: string; styledLabel?: React.ReactNode; description?: string; optionlabelClassName?: string; } >(({ className, ...props }, ref) => { return ( <div className="items-top flex space-x-2"> <CheckboxPrimitive.Root ref={ref} id={props.id} aria-describedby={props.description ? `${props.id}-description` : undefined} className={cn( "peer h-7 w-7 my-2 shrink-0 rounded-sm border-black border-2 ring-offset-background focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:border-primary data-[state=checked]:text-primary-foreground", className, )} {...props} > <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-white")}> <Check className="h-4 w-4 stroke-[6px]" /> </CheckboxPrimitive.Indicator> </CheckboxPrimitive.Root> <div className="grid gap-1.5 leading-none"> {!!(props.label || props.styledLabel) && ( <label htmlFor={props.id} className={cn( "mt-2.5 text-md font-normal leading-normal peer-disabled:cursor-not-allowed peer-disabled:opacity-70", props.optionlabelClassName, )} > {props.label || props.styledLabel} </label> )} {!!props.description && ( <p id={`${props.id}-description`} className="text-sm text-muted-foreground"> {props.description} </p> )} </div> </div> ); }); CheckboxComponent.displayName = CheckboxPrimitive.Root.displayName; export const Checkbox = CheckboxComponent; type CheckboxGroupProps = { value: string[]; onChange: (value: string[]) => void; options: { label: string; value: string; id: string }[]; legend?: string; }; export const CheckboxGroup = (props: CheckboxGroupProps) => { const [srMessage, setSrMessage] = React.useState(""); return ( <> <div aria-live="assertive" role="status" className="sr-only"> {srMessage} </div> <fieldset className="flex flex-col gap-2"> {props.legend && <legend className="text-md font-semibold mb-2">{props.legend}</legend>} {props.options.map((OPT) => ( <Checkbox key={OPT.id} id={OPT.id} label={OPT.label} checked={props.value.includes(OPT.value)} onCheckedChange={(c) => { const filtered = props.value.filter((f) => f !== OPT.value); if (!c) { setSrMessage(`${OPT.label}. unchecked, checkbox`); return props.onChange(filtered); } setSrMessage(`${OPT.label}, checked, checkbox`); props.onChange([...filtered, OPT.value]); }} aria-live="off" /> ))} </fieldset> </> ); }; |