zod-form-radix/dist/components/fields/EnumField.js

Radix UI integration for zod-form-kit

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
// React import not needed with new JSX transform
import * as SelectPrimitive from '@radix-ui/react-select';
import { Label } from '../label';
import { cn } from '../../lib/utils';
export function EnumField({ name, label, value = '', onChange, error, required, values, className = '' }) {
    return (_jsxs("div", { className: cn("space-y-2", className), children: [label && (_jsxs(Label, { htmlFor: name, children: [label, required && _jsx("span", { className: "text-red-500 ml-1", children: "*" })] })), _jsxs(SelectPrimitive.Root, { value: value, onValueChange: onChange, children: [_jsxs(SelectPrimitive.Trigger, { id: name, className: cn("flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50", error && "border-red-500 focus:ring-red-500"), children: [_jsx(SelectPrimitive.Value, { placeholder: "Select an option..." }), _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx("svg", { className: "h-4 w-4 opacity-50", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: _jsx("polyline", { points: "6,9 12,15 18,9" }) }) })] }), _jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Content, { className: "relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md", children: _jsx(SelectPrimitive.Viewport, { className: "p-1", children: values.map((option) => (_jsxs(SelectPrimitive.Item, { value: option, className: "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50", children: [_jsx(SelectPrimitive.ItemIndicator, { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", 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" }) }) }), _jsx(SelectPrimitive.ItemText, { children: option })] }, option))) }) }) })] }), error && (_jsx("p", { className: "text-sm text-red-500 mt-1", children: error }))] }));
}