@nlabs/gothamjs
Version:
Platform
61 lines (60 loc) • 10.2 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { cn } from '@nlabs/utils';
import { useMemo } from 'react';
import { Controller, useFormContext } from 'react-hook-form';
import { getCheckedClasses } from '../../utils/colorUtils.js';
export const RadioField = ({ color = 'primary', defaultValue, label, name, optionClass = 'cursor-pointer relative size-4 appearance-none rounded-full border border-neutral/70 dark:border-neutral-dark/70 bg-white dark:bg-black before:absolute before:inset-1 before:rounded-full before:bg-white dark:before:bg-black not-checked:before:hidden focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-secondary disabled:border-black/40 dark:disabled:border-white/40 disabled:bg-white/50 dark:disabled:bg-black/50 disabled:before:bg-black/40 dark:disabled:before:bg-white/50 forced-colors:appearance-auto forced-colors:before:hidden', options })=>{
const { control, trigger } = useFormContext();
const optionClasses = useMemo(()=>cn(optionClass, getCheckedClasses(color)), [
color,
optionClass
]);
return /*#__PURE__*/ _jsx(Controller, {
control: control,
defaultValue: defaultValue,
name: name,
render: ({ field })=>/*#__PURE__*/ _jsx("fieldset", {
"aria-label": label,
children: /*#__PURE__*/ _jsx("div", {
className: "space-y-1",
children: options.map((option)=>/*#__PURE__*/ _jsxs("div", {
className: "flex items-start relative",
children: [
/*#__PURE__*/ _jsx("div", {
className: "flex h-6 items-center",
children: /*#__PURE__*/ _jsx("input", {
...field,
"aria-describedby": `${option.id || option.value}-description`,
checked: field.value === option.value,
className: optionClasses,
id: option.id || option.value,
name: name,
onChange: ()=>{
field.onChange(option.value);
trigger(name);
},
type: "radio"
})
}),
/*#__PURE__*/ _jsxs("div", {
className: "ml-3 text-sm/6",
children: [
option.label && /*#__PURE__*/ _jsx("label", {
htmlFor: option.id || option.value,
className: "font-medium text-gray-900 dark:text-white",
children: option.label
}),
option.description && /*#__PURE__*/ _jsx("p", {
id: `${option.id || option.value}-description`,
className: "text-gray-500 dark:text-white",
children: option.description
})
]
})
]
}, option.id || option.value))
})
})
});
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL1JhZGlvRmllbGQvUmFkaW9GaWVsZC50c3giXSwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtjbn0gZnJvbSAnQG5sYWJzL3V0aWxzJztcbmltcG9ydCB7dXNlTWVtbywgdHlwZSBGQ30gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtDb250cm9sbGVyLCB1c2VGb3JtQ29udGV4dH0gZnJvbSAncmVhY3QtaG9vay1mb3JtJztcblxuaW1wb3J0IHtnZXRDaGVja2VkQ2xhc3NlcywgdHlwZSBHb3RoYW1Db2xvcn0gZnJvbSAnLi4vLi4vdXRpbHMvY29sb3JVdGlscy5qcyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUmFkaW9GaWVsZEl0ZW0ge1xuICByZWFkb25seSBkZXNjcmlwdGlvbj86IHN0cmluZztcbiAgcmVhZG9ubHkgaWQ/OiBzdHJpbmc7XG4gIHJlYWRvbmx5IGxhYmVsOiBzdHJpbmc7XG4gIHJlYWRvbmx5IHZhbHVlOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgUmFkaW9GaWVsZFByb3BzIHtcbiAgcmVhZG9ubHkgY29sb3I/OiBHb3RoYW1Db2xvcjtcbiAgcmVhZG9ubHkgZGVmYXVsdFZhbHVlPzogc3RyaW5nO1xuICByZWFkb25seSBsYWJlbD86IHN0cmluZztcbiAgcmVhZG9ubHkgbmFtZTogc3RyaW5nO1xuICByZWFkb25seSBvcHRpb25DbGFzcz86IHN0cmluZztcbiAgcmVhZG9ubHkgb3B0aW9uczogUmFkaW9GaWVsZEl0ZW1bXTtcbn1cblxuZXhwb3J0IGNvbnN0IFJhZGlvRmllbGQ6IEZDPFJhZGlvRmllbGRQcm9wcz4gPSAoe1xuICBjb2xvciA9ICdwcmltYXJ5JyxcbiAgZGVmYXVsdFZhbHVlLFxuICBsYWJlbCxcbiAgbmFtZSxcbiAgb3B0aW9uQ2xhc3MgPSAnY3Vyc29yLXBvaW50ZXIgcmVsYXRpdmUgc2l6ZS00IGFwcGVhcmFuY2Utbm9uZSByb3VuZGVkLWZ1bGwgYm9yZGVyIGJvcmRlci1uZXV0cmFsLzcwIGRhcms6Ym9yZGVyLW5ldXRyYWwtZGFyay83MCBiZy13aGl0ZSBkYXJrOmJnLWJsYWNrIGJlZm9yZTphYnNvbHV0ZSBiZWZvcmU6aW5zZXQtMSBiZWZvcmU6cm91bmRlZC1mdWxsIGJlZm9yZTpiZy13aGl0ZSBkYXJrOmJlZm9yZTpiZy1ibGFjayBub3QtY2hlY2tlZDpiZWZvcmU6aGlkZGVuIGZvY3VzLXZpc2libGU6b3V0bGluZS0yIGZvY3VzLXZpc2libGU6b3V0bGluZS1vZmZzZXQtMiBmb2N1cy12aXNpYmxlOm91dGxpbmUtc2Vjb25kYXJ5IGRpc2FibGVkOmJvcmRlci1ibGFjay80MCBkYXJrOmRpc2FibGVkOmJvcmRlci13aGl0ZS80MCBkaXNhYmxlZDpiZy13aGl0ZS81MCBkYXJrOmRpc2FibGVkOmJnLWJsYWNrLzUwIGRpc2FibGVkOmJlZm9yZTpiZy1ibGFjay80MCBkYXJrOmRpc2FibGVkOmJlZm9yZTpiZy13aGl0ZS81MCBmb3JjZWQtY29sb3JzOmFwcGVhcmFuY2UtYXV0byBmb3JjZWQtY29sb3JzOmJlZm9yZTpoaWRkZW4nLFxuICBvcHRpb25zXG59KSA9PiB7XG4gIGNvbnN0IHtjb250cm9sLCB0cmlnZ2VyfSA9IHVzZUZvcm1Db250ZXh0KCk7XG4gIGNvbnN0IG9wdGlvbkNsYXNzZXMgPSB1c2VNZW1vKFxuICAgICgpID0+IGNuKG9wdGlvbkNsYXNzLCBnZXRDaGVja2VkQ2xhc3Nlcyhjb2xvcikpLFxuICAgIFtjb2xvciwgb3B0aW9uQ2xhc3NdXG4gICk7XG4gIHJldHVybiAoXG4gICAgPENvbnRyb2xsZXJcbiAgICAgIGNvbnRyb2w9e2NvbnRyb2x9XG4gICAgICBkZWZhdWx0VmFsdWU9e2RlZmF1bHRWYWx1ZX1cbiAgICAgIG5hbWU9e25hbWV9XG4gICAgICByZW5kZXI9eyh7ZmllbGR9KSA9PiAoXG4gICAgICAgIDxmaWVsZHNldCBhcmlhLWxhYmVsPXtsYWJlbH0+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJzcGFjZS15LTFcIj5cbiAgICAgICAgICAgIHtvcHRpb25zLm1hcCgob3B0aW9uKSA9PiAoXG4gICAgICAgICAgICAgIDxkaXYga2V5PXtvcHRpb24uaWQgfHwgb3B0aW9uLnZhbHVlfSBjbGFzc05hbWU9XCJmbGV4IGl0ZW1zLXN0YXJ0IHJlbGF0aXZlXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJmbGV4IGgtNiBpdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgICAgICAgICB7Li4uZmllbGR9XG4gICAgICAgICAgICAgICAgICAgIGFyaWEtZGVzY3JpYmVkYnk9e2Ake29wdGlvbi5pZCB8fCBvcHRpb24udmFsdWV9LWRlc2NyaXB0aW9uYH1cbiAgICAgICAgICAgICAgICAgICAgY2hlY2tlZD17ZmllbGQudmFsdWUgPT09IG9wdGlvbi52YWx1ZX1cbiAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtvcHRpb25DbGFzc2VzfVxuICAgICAgICAgICAgICAgICAgICBpZD17b3B0aW9uLmlkIHx8IG9wdGlvbi52YWx1ZX1cbiAgICAgICAgICAgICAgICAgICAgbmFtZT17bmFtZX1cbiAgICAgICAgICAgICAgICAgICAgb25DaGFuZ2U9eygpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICBmaWVsZC5vbkNoYW5nZShvcHRpb24udmFsdWUpO1xuICAgICAgICAgICAgICAgICAgICAgIHRyaWdnZXIobmFtZSk7XG4gICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICAgIHR5cGU9XCJyYWRpb1wiXG4gICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwibWwtMyB0ZXh0LXNtLzZcIj5cbiAgICAgICAgICAgICAgICAgIHtvcHRpb24ubGFiZWwgJiYgKFxuICAgICAgICAgICAgICAgICAgICA8bGFiZWwgaHRtbEZvcj17b3B0aW9uLmlkIHx8IG9wdGlvbi52YWx1ZX0gY2xhc3NOYW1lPVwiZm9udC1tZWRpdW0gdGV4dC1ncmF5LTkwMCBkYXJrOnRleHQtd2hpdGVcIj5cbiAgICAgICAgICAgICAgICAgICAgICB7b3B0aW9uLmxhYmVsfVxuICAgICAgICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICAgIHtvcHRpb24uZGVzY3JpcHRpb24gJiYgKFxuICAgICAgICAgICAgICAgICAgICA8cCBpZD17YCR7b3B0aW9uLmlkIHx8IG9wdGlvbi52YWx1ZX0tZGVzY3JpcHRpb25gfSBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktNTAwIGRhcms6dGV4dC13aGl0ZVwiPlxuICAgICAgICAgICAgICAgICAgICAgIHtvcHRpb24uZGVzY3JpcHRpb259XG4gICAgICAgICAgICAgICAgICAgIDwvcD5cbiAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgKSl9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZmllbGRzZXQ+XG4gICAgICApfVxuICAgIC8+XG4gICk7XG59O1xuIl0sIm5hbWVzIjpbImNuIiwidXNlTWVtbyIsIkNvbnRyb2xsZXIiLCJ1c2VGb3JtQ29udGV4dCIsImdldENoZWNrZWRDbGFzc2VzIiwiUmFkaW9GaWVsZCIsImNvbG9yIiwiZGVmYXVsdFZhbHVlIiwibGFiZWwiLCJuYW1lIiwib3B0aW9uQ2xhc3MiLCJvcHRpb25zIiwiY29udHJvbCIsInRyaWdnZXIiLCJvcHRpb25DbGFzc2VzIiwicmVuZGVyIiwiZmllbGQiLCJmaWVsZHNldCIsImFyaWEtbGFiZWwiLCJkaXYiLCJjbGFzc05hbWUiLCJtYXAiLCJvcHRpb24iLCJpbnB1dCIsImFyaWEtZGVzY3JpYmVkYnkiLCJpZCIsInZhbHVlIiwiY2hlY2tlZCIsIm9uQ2hhbmdlIiwidHlwZSIsImh0bWxGb3IiLCJkZXNjcmlwdGlvbiIsInAiXSwibWFwcGluZ3MiOiI7QUFBQSxTQUFRQSxFQUFFLFFBQU8sZUFBZTtBQUNoQyxTQUFRQyxPQUFPLFFBQWdCLFFBQVE7QUFDdkMsU0FBUUMsVUFBVSxFQUFFQyxjQUFjLFFBQU8sa0JBQWtCO0FBRTNELFNBQVFDLGlCQUFpQixRQUF5Qiw0QkFBNEI7QUFrQjlFLE9BQU8sTUFBTUMsYUFBa0MsQ0FBQyxFQUM5Q0MsUUFBUSxTQUFTLEVBQ2pCQyxZQUFZLEVBQ1pDLEtBQUssRUFDTEMsSUFBSSxFQUNKQyxjQUFjLCtpQkFBK2lCLEVBQzdqQkMsT0FBTyxFQUNSO0lBQ0MsTUFBTSxFQUFDQyxPQUFPLEVBQUVDLE9BQU8sRUFBQyxHQUFHVjtJQUMzQixNQUFNVyxnQkFBZ0JiLFFBQ3BCLElBQU1ELEdBQUdVLGFBQWFOLGtCQUFrQkUsU0FDeEM7UUFBQ0E7UUFBT0k7S0FBWTtJQUV0QixxQkFDRSxLQUFDUjtRQUNDVSxTQUFTQTtRQUNUTCxjQUFjQTtRQUNkRSxNQUFNQTtRQUNOTSxRQUFRLENBQUMsRUFBQ0MsS0FBSyxFQUFDLGlCQUNkLEtBQUNDO2dCQUFTQyxjQUFZVjswQkFDcEIsY0FBQSxLQUFDVztvQkFBSUMsV0FBVTs4QkFDWlQsUUFBUVUsR0FBRyxDQUFDLENBQUNDLHVCQUNaLE1BQUNIOzRCQUFvQ0MsV0FBVTs7OENBQzdDLEtBQUNEO29DQUFJQyxXQUFVOzhDQUNiLGNBQUEsS0FBQ0c7d0NBQ0UsR0FBR1AsS0FBSzt3Q0FDVFEsb0JBQWtCLEdBQUdGLE9BQU9HLEVBQUUsSUFBSUgsT0FBT0ksS0FBSyxDQUFDLFlBQVksQ0FBQzt3Q0FDNURDLFNBQVNYLE1BQU1VLEtBQUssS0FBS0osT0FBT0ksS0FBSzt3Q0FDckNOLFdBQVdOO3dDQUNYVyxJQUFJSCxPQUFPRyxFQUFFLElBQUlILE9BQU9JLEtBQUs7d0NBQzdCakIsTUFBTUE7d0NBQ05tQixVQUFVOzRDQUNSWixNQUFNWSxRQUFRLENBQUNOLE9BQU9JLEtBQUs7NENBQzNCYixRQUFRSjt3Q0FDVjt3Q0FDQW9CLE1BQUs7Ozs4Q0FHVCxNQUFDVjtvQ0FBSUMsV0FBVTs7d0NBQ1pFLE9BQU9kLEtBQUssa0JBQ1gsS0FBQ0E7NENBQU1zQixTQUFTUixPQUFPRyxFQUFFLElBQUlILE9BQU9JLEtBQUs7NENBQUVOLFdBQVU7c0RBQ2xERSxPQUFPZCxLQUFLOzt3Q0FHaEJjLE9BQU9TLFdBQVcsa0JBQ2pCLEtBQUNDOzRDQUFFUCxJQUFJLEdBQUdILE9BQU9HLEVBQUUsSUFBSUgsT0FBT0ksS0FBSyxDQUFDLFlBQVksQ0FBQzs0Q0FBRU4sV0FBVTtzREFDMURFLE9BQU9TLFdBQVc7Ozs7OzJCQXhCakJULE9BQU9HLEVBQUUsSUFBSUgsT0FBT0ksS0FBSzs7OztBQW1DakQsRUFBRSJ9