fix: stabilize settings controls

components/ui/checkbox.tsx

@@ -12,20 +12,27 @@ type CheckboxProps = Omit<KumoCheckboxProps, "checked" | "onCheckedChange"> & {
 };
 
 export function Checkbox({
+  "aria-label": ariaLabel,
+  "aria-labelledby": ariaLabelledBy,
   checked,
   className,
   defaultChecked = false,
+  label,
   name,
   onCheckedChange,
   ...props
 }: CheckboxProps): React.ReactElement {
+  const generatedId = React.useId().replace(/:/g, "");
+  const labelId = label ? `teatea-checkbox-label-${generatedId}` : undefined;
   const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
   const isControlled = checked !== undefined;
   const currentChecked = isControlled ? checked : uncontrolledChecked;
 
   return (
-    <span className="teatea-checkbox contents">
+    <span className="teatea-checkbox">
       <KumoCheckbox
+        aria-label={label ? undefined : ariaLabel}
+        aria-labelledby={ariaLabelledBy ?? labelId}
         checked={currentChecked}
         className={cn("teatea-checkbox-control", className)}
         onCheckedChange={(nextChecked) => {
@@ -37,6 +44,11 @@ export function Checkbox({
         }}
         {...props}
       />
+      {label ? (
+        <span className="min-w-0 flex-1" id={labelId}>
+          {label}
+        </span>
+      ) : null}
       {name && currentChecked ? <input name={name} type="hidden" value="on" /> : null}
     </span>
   );