@nlabs/gothamjs
Version:
Platform
54 lines (53 loc) • 8.4 kB
JavaScript
import { cn } from "@nlabs/utils";
import { useMemo } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { getCheckedClasses } from "../../utils/colorUtils.js";
import { jsx, jsxs } from "react/jsx-runtime";
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,
defaultValue,
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,
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)) }) })
}
);
};
export {
RadioField
};
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvUmFkaW9GaWVsZC9SYWRpb0ZpZWxkLnRzeCJdLAogICJzb3VyY2VzQ29udGVudCI6IFsiaW1wb3J0IHtjbn0gZnJvbSAnQG5sYWJzL3V0aWxzJztcbmltcG9ydCB7dXNlTWVtbywgdHlwZSBGQ30gZnJvbSAncmVhY3QnO1xuaW1wb3J0IHtDb250cm9sbGVyLCB1c2VGb3JtQ29udGV4dH0gZnJvbSAncmVhY3QtaG9vay1mb3JtJztcblxuaW1wb3J0IHtnZXRDaGVja2VkQ2xhc3NlcywgdHlwZSBHb3RoYW1Db2xvcn0gZnJvbSAnLi4vLi4vdXRpbHMvY29sb3JVdGlscy5qcyc7XG5cbmV4cG9ydCBpbnRlcmZhY2UgUmFkaW9GaWVsZEl0ZW0ge1xuICByZWFkb25seSBkZXNjcmlwdGlvbj86IHN0cmluZztcbiAgcmVhZG9ubHkgaWQ/OiBzdHJpbmc7XG4gIHJlYWRvbmx5IGxhYmVsOiBzdHJpbmc7XG4gIHJlYWRvbmx5IHZhbHVlOiBzdHJpbmc7XG59XG5cbmV4cG9ydCBpbnRlcmZhY2UgUmFkaW9GaWVsZFByb3BzIHtcbiAgcmVhZG9ubHkgY29sb3I/OiBHb3RoYW1Db2xvcjtcbiAgcmVhZG9ubHkgZGVmYXVsdFZhbHVlPzogc3RyaW5nO1xuICByZWFkb25seSBsYWJlbD86IHN0cmluZztcbiAgcmVhZG9ubHkgbmFtZTogc3RyaW5nO1xuICByZWFkb25seSBvcHRpb25DbGFzcz86IHN0cmluZztcbiAgcmVhZG9ubHkgb3B0aW9uczogUmFkaW9GaWVsZEl0ZW1bXTtcbn1cblxuZXhwb3J0IGNvbnN0IFJhZGlvRmllbGQ6IEZDPFJhZGlvRmllbGRQcm9wcz4gPSAoe1xuICBjb2xvciA9ICdwcmltYXJ5JyxcbiAgZGVmYXVsdFZhbHVlLFxuICBsYWJlbCxcbiAgbmFtZSxcbiAgb3B0aW9uQ2xhc3MgPSAnY3Vyc29yLXBvaW50ZXIgcmVsYXRpdmUgc2l6ZS00IGFwcGVhcmFuY2Utbm9uZSByb3VuZGVkLWZ1bGwgYm9yZGVyIGJvcmRlci1uZXV0cmFsLzcwIGRhcms6Ym9yZGVyLW5ldXRyYWwtZGFyay83MCBiZy13aGl0ZSBkYXJrOmJnLWJsYWNrIGJlZm9yZTphYnNvbHV0ZSBiZWZvcmU6aW5zZXQtMSBiZWZvcmU6cm91bmRlZC1mdWxsIGJlZm9yZTpiZy13aGl0ZSBkYXJrOmJlZm9yZTpiZy1ibGFjayBub3QtY2hlY2tlZDpiZWZvcmU6aGlkZGVuIGZvY3VzLXZpc2libGU6b3V0bGluZS0yIGZvY3VzLXZpc2libGU6b3V0bGluZS1vZmZzZXQtMiBmb2N1cy12aXNpYmxlOm91dGxpbmUtc2Vjb25kYXJ5IGRpc2FibGVkOmJvcmRlci1ibGFjay80MCBkYXJrOmRpc2FibGVkOmJvcmRlci13aGl0ZS80MCBkaXNhYmxlZDpiZy13aGl0ZS81MCBkYXJrOmRpc2FibGVkOmJnLWJsYWNrLzUwIGRpc2FibGVkOmJlZm9yZTpiZy1ibGFjay80MCBkYXJrOmRpc2FibGVkOmJlZm9yZTpiZy13aGl0ZS81MCBmb3JjZWQtY29sb3JzOmFwcGVhcmFuY2UtYXV0byBmb3JjZWQtY29sb3JzOmJlZm9yZTpoaWRkZW4nLFxuICBvcHRpb25zXG59KSA9PiB7XG4gIGNvbnN0IHtjb250cm9sLCB0cmlnZ2VyfSA9IHVzZUZvcm1Db250ZXh0KCk7XG4gIGNvbnN0IG9wdGlvbkNsYXNzZXMgPSB1c2VNZW1vKFxuICAgICgpID0+IGNuKG9wdGlvbkNsYXNzLCBnZXRDaGVja2VkQ2xhc3Nlcyhjb2xvcikpLFxuICAgIFtjb2xvciwgb3B0aW9uQ2xhc3NdXG4gICk7XG4gIHJldHVybiAoXG4gICAgPENvbnRyb2xsZXJcbiAgICAgIGNvbnRyb2w9e2NvbnRyb2x9XG4gICAgICBkZWZhdWx0VmFsdWU9e2RlZmF1bHRWYWx1ZX1cbiAgICAgIG5hbWU9e25hbWV9XG4gICAgICByZW5kZXI9eyh7ZmllbGR9KSA9PiAoXG4gICAgICAgIDxmaWVsZHNldCBhcmlhLWxhYmVsPXtsYWJlbH0+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJzcGFjZS15LTFcIj5cbiAgICAgICAgICAgIHtvcHRpb25zLm1hcCgob3B0aW9uKSA9PiAoXG4gICAgICAgICAgICAgIDxkaXYga2V5PXtvcHRpb24uaWQgfHwgb3B0aW9uLnZhbHVlfSBjbGFzc05hbWU9XCJmbGV4IGl0ZW1zLXN0YXJ0IHJlbGF0aXZlXCI+XG4gICAgICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJmbGV4IGgtNiBpdGVtcy1jZW50ZXJcIj5cbiAgICAgICAgICAgICAgICAgIDxpbnB1dFxuICAgICAgICAgICAgICAgICAgICB7Li4uZmllbGR9XG4gICAgICAgICAgICAgICAgICAgIGFyaWEtZGVzY3JpYmVkYnk9e2Ake29wdGlvbi5pZCB8fCBvcHRpb24udmFsdWV9LWRlc2NyaXB0aW9uYH1cbiAgICAgICAgICAgICAgICAgICAgY2hlY2tlZD17ZmllbGQudmFsdWUgPT09IG9wdGlvbi52YWx1ZX1cbiAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtvcHRpb25DbGFzc2VzfVxuICAgICAgICAgICAgICAgICAgICBpZD17b3B0aW9uLmlkIHx8IG9wdGlvbi52YWx1ZX1cbiAgICAgICAgICAgICAgICAgICAgbmFtZT17bmFtZX1cbiAgICAgICAgICAgICAgICAgICAgb25DaGFuZ2U9eygpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgICBmaWVsZC5vbkNoYW5nZShvcHRpb24udmFsdWUpO1xuICAgICAgICAgICAgICAgICAgICAgIHRyaWdnZXIobmFtZSk7XG4gICAgICAgICAgICAgICAgICAgIH19XG4gICAgICAgICAgICAgICAgICAgIHR5cGU9XCJyYWRpb1wiXG4gICAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwibWwtMyB0ZXh0LXNtLzZcIj5cbiAgICAgICAgICAgICAgICAgIHtvcHRpb24ubGFiZWwgJiYgKFxuICAgICAgICAgICAgICAgICAgICA8bGFiZWwgaHRtbEZvcj17b3B0aW9uLmlkIHx8IG9wdGlvbi52YWx1ZX0gY2xhc3NOYW1lPVwiZm9udC1tZWRpdW0gdGV4dC1ncmF5LTkwMCBkYXJrOnRleHQtd2hpdGVcIj5cbiAgICAgICAgICAgICAgICAgICAgICB7b3B0aW9uLmxhYmVsfVxuICAgICAgICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAgICAgIHtvcHRpb24uZGVzY3JpcHRpb24gJiYgKFxuICAgICAgICAgICAgICAgICAgICA8cCBpZD17YCR7b3B0aW9uLmlkIHx8IG9wdGlvbi52YWx1ZX0tZGVzY3JpcHRpb25gfSBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktNTAwIGRhcms6dGV4dC13aGl0ZVwiPlxuICAgICAgICAgICAgICAgICAgICAgIHtvcHRpb24uZGVzY3JpcHRpb259XG4gICAgICAgICAgICAgICAgICAgIDwvcD5cbiAgICAgICAgICAgICAgICAgICl9XG4gICAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgKSl9XG4gICAgICAgICAgPC9kaXY+XG4gICAgICAgIDwvZmllbGRzZXQ+XG4gICAgICApfVxuICAgIC8+XG4gICk7XG59O1xuIl0sCiAgIm1hcHBpbmdzIjogIkFBQUEsU0FBUSxVQUFTO0FBQ2pCLFNBQVEsZUFBdUI7QUFDL0IsU0FBUSxZQUFZLHNCQUFxQjtBQUV6QyxTQUFRLHlCQUEwQztBQTBDaEMsY0FjRixZQWRFO0FBeEJYLE1BQU0sYUFBa0MsQ0FBQztBQUFBLEVBQzlDLFFBQVE7QUFBQSxFQUNSO0FBQUEsRUFDQTtBQUFBLEVBQ0E7QUFBQSxFQUNBLGNBQWM7QUFBQSxFQUNkO0FBQ0YsTUFBTTtBQUNKLFFBQU0sRUFBQyxTQUFTLFFBQU8sSUFBSSxlQUFlO0FBQzFDLFFBQU0sZ0JBQWdCO0FBQUEsSUFDcEIsTUFBTSxHQUFHLGFBQWEsa0JBQWtCLEtBQUssQ0FBQztBQUFBLElBQzlDLENBQUMsT0FBTyxXQUFXO0FBQUEsRUFDckI7QUFDQSxTQUNFO0FBQUEsSUFBQztBQUFBO0FBQUEsTUFDQztBQUFBLE1BQ0E7QUFBQSxNQUNBO0FBQUEsTUFDQSxRQUFRLENBQUMsRUFBQyxNQUFLLE1BQ2Isb0JBQUMsY0FBUyxjQUFZLE9BQ3BCLDhCQUFDLFNBQUksV0FBVSxhQUNaLGtCQUFRLElBQUksQ0FBQyxXQUNaLHFCQUFDLFNBQW9DLFdBQVUsNkJBQzdDO0FBQUEsNEJBQUMsU0FBSSxXQUFVLHlCQUNiO0FBQUEsVUFBQztBQUFBO0FBQUEsWUFDRSxHQUFHO0FBQUEsWUFDSixvQkFBa0IsR0FBRyxPQUFPLE1BQU0sT0FBTyxLQUFLO0FBQUEsWUFDOUMsU0FBUyxNQUFNLFVBQVUsT0FBTztBQUFBLFlBQ2hDLFdBQVc7QUFBQSxZQUNYLElBQUksT0FBTyxNQUFNLE9BQU87QUFBQSxZQUN4QjtBQUFBLFlBQ0EsVUFBVSxNQUFNO0FBQ2Qsb0JBQU0sU0FBUyxPQUFPLEtBQUs7QUFDM0Isc0JBQVEsSUFBSTtBQUFBLFlBQ2Q7QUFBQSxZQUNBLE1BQUs7QUFBQTtBQUFBLFFBQ1AsR0FDRjtBQUFBLFFBQ0EscUJBQUMsU0FBSSxXQUFVLGtCQUNaO0FBQUEsaUJBQU8sU0FDTixvQkFBQyxXQUFNLFNBQVMsT0FBTyxNQUFNLE9BQU8sT0FBTyxXQUFVLDZDQUNsRCxpQkFBTyxPQUNWO0FBQUEsVUFFRCxPQUFPLGVBQ04sb0JBQUMsT0FBRSxJQUFJLEdBQUcsT0FBTyxNQUFNLE9BQU8sS0FBSyxnQkFBZ0IsV0FBVSxpQ0FDMUQsaUJBQU8sYUFDVjtBQUFBLFdBRUo7QUFBQSxXQTNCUSxPQUFPLE1BQU0sT0FBTyxLQTRCOUIsQ0FDRCxHQUNILEdBQ0Y7QUFBQTtBQUFBLEVBRUo7QUFFSjsiLAogICJuYW1lcyI6IFtdCn0K