zod-form-radix
Version:
Radix UI integration for zod-form-kit
15 lines (14 loc) • 2.9 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// React import not needed with new JSX transform
import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
import * as SwitchPrimitive from '@radix-ui/react-switch';
// Using a simple checkmark instead of lucide-react for now
import { Label } from '../label';
import { cn } from '../../lib/utils';
export function BooleanField({ name, label, value = false, onChange, error, required, options = {}, className = '' }) {
const { variant = 'checkbox' } = options;
if (variant === 'switch') {
return (_jsxs("div", { className: cn("flex items-center space-x-2", className), children: [_jsx(SwitchPrimitive.Root, { id: name, name: name, checked: value, onCheckedChange: onChange, className: "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input", children: _jsx(SwitchPrimitive.Thumb, { className: "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0" }) }), label && (_jsxs(Label, { htmlFor: name, className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: [label, required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), error && (_jsx("p", { className: "text-sm text-red-500 mt-1", children: error }))] }));
}
return (_jsxs("div", { className: cn("flex items-center space-x-2", className), children: [_jsx(CheckboxPrimitive.Root, { id: name, name: name, checked: value, onCheckedChange: onChange, className: "peer h-4 w-4 shrink-0 rounded-sm border border-primary 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]:text-primary-foreground", children: _jsx(CheckboxPrimitive.Indicator, { className: "flex items-center justify-center text-current", children: _jsx("svg", { className: "h-4 w-4", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "20,6 9,17 4,12" }) }) }) }), label && (_jsxs(Label, { htmlFor: name, className: "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70", children: [label, required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), error && (_jsx("p", { className: "text-sm text-red-500 mt-1", children: error }))] }));
}