@douglasneuroinformatics/libui 2.0.2 → 2.0.4

package/src/components/Drawer/Drawer.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { DrawerContent } from './DrawerContent.js';
+import { DrawerDescription } from './DrawerDescription.js';
+import { DrawerFooter } from './DrawerFooter.js';
+import { DrawerHeader } from './DrawerHeader.js';
+import { DrawerTitle } from './DrawerTitle.js';
+
+const DrawerRoot = ({ shouldScaleBackground = true, ...props }: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root shouldScaleBackground={shouldScaleBackground} {...props} />
+);
+
+export const Drawer = Object.assign(DrawerRoot, {
+  Close: DrawerPrimitive.Close,
+  Content: DrawerContent,
+  Description: DrawerDescription,
+  Footer: DrawerFooter,
+  Header: DrawerHeader,
+  Title: DrawerTitle,
+  Trigger: DrawerPrimitive.Trigger
+});

package/src/components/Drawer/DrawerContent.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '../../utils.js';
+
+export const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(function DrawerContent({ children, className, ...props }, ref) {
+  return (
+    <DrawerPrimitive.Portal>
+      <DrawerPrimitive.Overlay className={cn('fixed inset-0 z-50 bg-black/80', className)} ref={ref} {...props} />
+      <DrawerPrimitive.Content
+        className={cn(
+          'fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background',
+          className
+        )}
+        ref={ref}
+        {...props}
+      >
+        <div className="mx-auto mt-4 h-2 w-[100px] rounded-full bg-muted" />
+        {children}
+      </DrawerPrimitive.Content>
+    </DrawerPrimitive.Portal>
+  );
+});

package/src/components/Drawer/DrawerDescription.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '../../utils.js';
+
+export const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(function DrawerDescription({ className, ...props }, ref) {
+  return (
+    <DrawerPrimitive.Description className={cn('text-sm text-muted-foreground', className)} ref={ref} {...props} />
+  );
+});

package/src/components/Drawer/DrawerFooter.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const DrawerFooter = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />
+);

package/src/components/Drawer/DrawerHeader.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const DrawerHeader = ({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) => (
+  <div className={cn('grid gap-1.5 p-4 text-center sm:text-left', className)} {...props} />
+);

package/src/components/Drawer/DrawerTitle.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+
+import { Drawer as DrawerPrimitive } from 'vaul';
+
+import { cn } from '../../utils.js';
+
+export const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(function DrawerTitle({ className, ...props }, ref) {
+  return (
+    <DrawerPrimitive.Title
+      className={cn('text-lg font-semibold leading-none tracking-tight', className)}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/DropdownButton/DropdownButton.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+
+import { ChevronDownIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const DropdownButton = React.forwardRef<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement>>(
+  function DropdownButton({ children, className, ...props }, ref) {
+    return (
+      <button
+        className={cn(
+          'flex h-9 w-full items-center whitespace-nowrap rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-1 focus:ring-ring disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1',
+          children ? 'justify-between' : 'justify-end',
+          className
+        )}
+        ref={ref}
+        type="button"
+        {...props}
+      >
+        {children}
+        <ChevronDownIcon className="h-4 w-4 opacity-50" />
+      </button>
+    );
+  }
+);

package/src/components/DropdownMenu/DropdownMenu.tsx

@@ -0,0 +1,28 @@
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.js';
+import { DropdownMenuContent } from './DropdownMenuContent.js';
+import { DropdownMenuItem } from './DropdownMenuItem.js';
+import { DropdownMenuLabel } from './DropdownMenuLabel.js';
+import { DropdownMenuRadioItem } from './DropdownMenuRadioItem.js';
+import { DropdownMenuSeparator } from './DropdownMenuSeparator.js';
+import { DropdownMenuShortcut } from './DropdownMenuShortcut.js';
+import { DropdownMenuSubContent } from './DropdownMenuSubContent.js';
+import { DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.js';
+
+export const DropdownMenu = Object.assign(DropdownMenuPrimitive.Root.bind(null), {
+  CheckboxItem: DropdownMenuCheckboxItem,
+  Content: DropdownMenuContent,
+  Group: DropdownMenuPrimitive.Group,
+  Item: DropdownMenuItem,
+  Label: DropdownMenuLabel,
+  Portal: DropdownMenuPrimitive.Portal,
+  RadioGroup: DropdownMenuPrimitive.RadioGroup,
+  RadioItem: DropdownMenuRadioItem,
+  Separator: DropdownMenuSeparator,
+  Shortcut: DropdownMenuShortcut,
+  Sub: DropdownMenuPrimitive.Sub,
+  SubContent: DropdownMenuSubContent,
+  SubTrigger: DropdownMenuSubTrigger,
+  Trigger: DropdownMenuPrimitive.Trigger
+});

package/src/components/DropdownMenu/DropdownMenuCheckboxItem.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CheckIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const DropdownMenuCheckboxItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.CheckboxItem>
+>(function DropdownMenuCheckboxItem({ checked, children, className, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.CheckboxItem
+      checked={checked}
+      className={cn(
+        'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CheckIcon className="h-4 w-4" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.CheckboxItem>
+  );
+});

package/src/components/DropdownMenu/DropdownMenuContent.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../utils.js';
+
+export type DropdownMenuContentProps = React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Content> & {
+  widthFull?: boolean;
+};
+export const DropdownMenuContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Content>,
+  DropdownMenuContentProps
+>(function DropdownMenuContent({ className, sideOffset = 4, widthFull = false, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Portal>
+      <DropdownMenuPrimitive.Content
+        className={cn(
+          'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md',
+          'data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          widthFull && 'w-[var(--radix-dropdown-menu-trigger-width)]',
+          className
+        )}
+        ref={ref}
+        sideOffset={sideOffset}
+        {...props}
+      />
+    </DropdownMenuPrimitive.Portal>
+  );
+});

package/src/components/DropdownMenu/DropdownMenuItem.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../utils.js';
+
+export const DropdownMenuItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
+    inset?: boolean;
+  }
+>(function DropdownMenuItem({ className, inset, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Item
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        inset && 'pl-8',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/DropdownMenu/DropdownMenuLabel.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../utils.js';
+
+export const DropdownMenuLabel = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
+    inset?: boolean;
+  }
+>(function DropdownMenuLabel({ className, inset, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.Label
+      className={cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', className)}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/DropdownMenu/DropdownMenuRadioItem.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { CircleIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const DropdownMenuRadioItem = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.RadioItem>
+>(function DropdownMenuRadioItem({ children, className, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.RadioItem
+      className={cn(
+        'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+        <DropdownMenuPrimitive.ItemIndicator>
+          <CircleIcon className="h-4 w-4 fill-current" />
+        </DropdownMenuPrimitive.ItemIndicator>
+      </span>
+      {children}
+    </DropdownMenuPrimitive.RadioItem>
+  );
+});

package/src/components/DropdownMenu/DropdownMenuSeparator.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../utils.js';
+
+export const DropdownMenuSeparator = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Separator>
+>(function DropdownMenuSeparator({ className, ...props }, ref) {
+  return <DropdownMenuPrimitive.Separator className={cn('-mx-1 my-1 h-px bg-muted', className)} ref={ref} {...props} />;
+});

package/src/components/DropdownMenu/DropdownMenuShortcut.tsx

@@ -0,0 +1,7 @@
+import React from 'react';
+
+import { cn } from '../../utils.js';
+
+export const DropdownMenuShortcut = ({ className, ...props }: React.HTMLAttributes<HTMLSpanElement>) => {
+  return <span className={cn('ml-auto text-xs tracking-widest opacity-60', className)} {...props} />;
+};

package/src/components/DropdownMenu/DropdownMenuSubContent.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+
+import { cn } from '../../utils.js';
+
+export const DropdownMenuSubContent = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubContent>
+>(function DropdownMenuSubContent({ className, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.SubContent
+      className={cn(
+        'z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        className
+      )}
+      ref={ref}
+      {...props}
+    />
+  );
+});

package/src/components/DropdownMenu/DropdownMenuSubTrigger.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+
+import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
+import { ChevronRightIcon } from 'lucide-react';
+
+import { cn } from '../../utils.js';
+
+export const DropdownMenuSubTrigger = React.forwardRef<
+  React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
+  React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
+    inset?: boolean;
+  }
+>(function DropdownMenuSubTrigger({ children, className, inset, ...props }, ref) {
+  return (
+    <DropdownMenuPrimitive.SubTrigger
+      className={cn(
+        'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+        inset && 'pl-8',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto h-4 w-4" />
+    </DropdownMenuPrimitive.SubTrigger>
+  );
+});

package/src/components/ErrorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+import { ErrorBoundary as ReactErrorBoundary } from 'react-error-boundary';
+
+import { ErrorFallback } from '../ErrorFallback/ErrorFallback.js';
+
+export const ErrorBoundary: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  return <ReactErrorBoundary FallbackComponent={ErrorFallback}>{children}</ReactErrorBoundary>;
+};

package/src/components/ErrorFallback/ErrorFallback.tsx

@@ -0,0 +1,34 @@
+import React, { useEffect } from 'react';
+
+export type ErrorFallbackProps = {
+  error: {
+    message: string;
+  };
+};
+
+export const ErrorFallback = ({ error }: ErrorFallbackProps) => {
+  useEffect(() => {
+    console.error(error);
+  }, [error]);
+
+  return (
+    <div className="flex min-h-screen  flex-col items-center justify-center gap-1 p-3 text-center">
+      <h1 className="text-sm font-semibold uppercase tracking-wide text-muted-foreground">Unexpected Error</h1>
+      <h3 className="text-3xl font-extrabold tracking-tight sm:text-4xl md:text-5xl">Something Went Wrong</h3>
+      <p className="mt-2 max-w-prose text-sm text-muted-foreground sm:text-base">
+        We apologize for the inconvenience. Please contact us for further assistance.
+      </p>
+      <div className="mt-6">
+        <button
+          className="text-sky-800 underline-offset-4 hover:text-sky-700 hover:underline dark:text-sky-200 dark:hover:text-sky-300"
+          type="button"
+          onClick={() => {
+            window.location.assign(window.location.origin);
+          }}
+        >
+          Reload Page<span aria-hidden="true"> &rarr;</span>
+        </button>
+      </div>
+    </div>
+  );
+};

package/src/components/Form/BaseRadioField.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+
+import { cva } from 'class-variance-authority';
+import type { Simplify } from 'type-fest';
+
+import { Label } from '../Label/Label.js';
+import { RadioGroup } from '../RadioGroup/RadioGroup.js';
+import { FieldGroup } from './FieldGroup/FieldGroup.js';
+
+import type { BaseFieldComponentProps } from './types.js';
+
+const baseRadioFieldVariants = cva('flex', {
+  defaultVariants: {
+    orientation: 'vertical'
+  },
+  variants: {
+    orientation: {
+      horizontal: 'flex-col @3xl:flex-row @3xl:items-center @3xl:justify-between',
+      vertical: 'flex-col'
+    }
+  }
+});
+
+export type BaseRadioFieldProps<T extends string> = Simplify<
+  BaseFieldComponentProps<T> & {
+    description?: string;
+    label: string;
+    options: { [K in T]: string };
+    orientation?: 'horizontal' | 'vertical';
+  }
+>;
+
+export const BaseRadioField = <T extends string>({
+  description,
+  error,
+  label,
+  name,
+  options,
+  orientation = 'vertical',
+  setValue,
+  value
+}: BaseRadioFieldProps<T>) => {
+  const optionsCount = Object.keys(options).length;
+  return (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Label>{label}</Label>
+        <FieldGroup.Description description={description} />
+      </FieldGroup.Row>
+      <RadioGroup
+        className={baseRadioFieldVariants({ orientation: optionsCount > 5 ? 'vertical' : orientation })}
+        name={name}
+        value={value ?? ''}
+        onValueChange={(value) => setValue(value as T)}
+      >
+        {Object.keys(options).map((option) => (
+          <div className="flex items-center gap-2" key={option}>
+            <RadioGroup.Item id={`${name}-${option}`} value={option} />
+            <Label className="font-normal" htmlFor={`${name}-${option}`}>
+              {options[option as T]}
+            </Label>
+          </div>
+        ))}
+      </RadioGroup>
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};

package/src/components/Form/BooleanField/BooleanField.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+
+import { match } from 'ts-pattern';
+
+import { BooleanFieldCheckbox, type BooleanFieldCheckboxProps } from './BooleanFieldCheckbox.js';
+import { BooleanFieldRadio, type BooleanFieldRadioProps } from './BooleanFieldRadio.js';
+
+export type BooleanFieldProps = BooleanFieldCheckboxProps | BooleanFieldRadioProps;
+
+export const BooleanField = (props: BooleanFieldProps) => {
+  return match(props)
+    .with({ variant: 'radio' }, (props) => <BooleanFieldRadio {...props} />)
+    .with({ variant: 'checkbox' }, (props) => <BooleanFieldCheckbox {...props} />)
+    .exhaustive();
+};

package/src/components/Form/BooleanField/BooleanFieldCheckbox.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+
+import type { BooleanFormField } from '@douglasneuroinformatics/libui-form-types';
+import type { Simplify } from 'type-fest';
+
+import { Checkbox } from '../../Checkbox/Checkbox.js';
+import { Label } from '../../Label/Label.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+
+import type { BaseFieldComponentProps } from '../types.js';
+
+export type BooleanFieldCheckboxProps = Simplify<
+  BaseFieldComponentProps<boolean> & Omit<Extract<BooleanFormField, { variant: 'checkbox' }>, 'kind'>
+>;
+
+export const BooleanFieldCheckbox = ({ error, label, name, setValue, value }: BooleanFieldCheckboxProps) => {
+  return (
+    <FieldGroup>
+      <FieldGroup.Row>
+        <Checkbox
+          checked={value}
+          id={name}
+          name={name}
+          onCheckedChange={(value) => {
+            if (typeof value === 'boolean') {
+              setValue(value);
+            }
+          }}
+        />
+        <Label htmlFor={name}>{label}</Label>
+      </FieldGroup.Row>
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};

package/src/components/Form/BooleanField/BooleanFieldRadio.tsx

@@ -0,0 +1,59 @@
+import React, { useCallback } from 'react';
+
+import type { BooleanFormField } from '@douglasneuroinformatics/libui-form-types';
+import { useTranslation } from 'react-i18next';
+import { match } from 'ts-pattern';
+import type { Simplify } from 'type-fest';
+
+import { Label } from '../../Label/Label.js';
+import { RadioGroup } from '../../RadioGroup/RadioGroup.js';
+import { FieldGroup } from '../FieldGroup/FieldGroup.js';
+
+import type { BaseFieldComponentProps } from '../types.js';
+
+const stringifyBoolean = (value: boolean | undefined) =>
+  match(value)
+    .with(undefined, () => '')
+    .with(true, () => 'true' as const)
+    .with(false, () => 'false' as const)
+    .exhaustive();
+
+export type BooleanFieldRadioProps = Simplify<
+  BaseFieldComponentProps<boolean> & Omit<Extract<BooleanFormField, { variant: 'radio' }>, 'kind'>
+>;
+
+export const BooleanFieldRadio = ({ error, label, name, options, setValue, value }: BooleanFieldRadioProps) => {
+  const { t } = useTranslation('libui');
+
+  const handleValueChange = useCallback(
+    (value: string) => {
+      match(value)
+        .with('', () => setValue(undefined))
+        .with('true', () => setValue(true))
+        .with('false', () => setValue(false))
+        .otherwise((value) => console.error(`Unexpected value for boolean field '${name}': ${value}`));
+    },
+    [match, setValue]
+  );
+
+  return (
+    <FieldGroup>
+      <Label>{label}</Label>
+      <RadioGroup name={name} value={stringifyBoolean(value)} onValueChange={handleValueChange}>
+        <FieldGroup.Row>
+          <RadioGroup.Item id={`${name}-true`} value="true" />
+          <Label className="font-normal" htmlFor={`${name}-true`}>
+            {options?.true ?? t('form.radioLabels.true')}
+          </Label>
+        </FieldGroup.Row>
+        <FieldGroup.Row>
+          <RadioGroup.Item id={`${name}-false`} value="false" />
+          <Label className="font-normal" htmlFor={`${name}-false`}>
+            {options?.false ?? t('form.radioLabels.false')}
+          </Label>
+        </FieldGroup.Row>
+      </RadioGroup>
+      <FieldGroup.Error error={error} />
+    </FieldGroup>
+  );
+};