@nlabs/gothamjs
Version:
Platform
109 lines (108 loc) • 11.8 kB
JavaScript
import { cn } from "@nlabs/utils";
import { useMemo } from "react";
import { Controller, useFormContext } from "react-hook-form";
import { getCheckedClasses } from "../../utils/colorUtils";
import { jsx, jsxs } from "react/jsx-runtime";
const Checkbox = ({
color = "primary",
label,
defaultValue = false,
description,
error,
containerClass = "",
labelClass = "",
name,
optionClass = "",
id,
...props
}) => {
const { control, trigger } = useFormContext();
const optionClasses = useMemo(
() => cn(optionClass, getCheckedClasses(color)),
[color, optionClass]
);
const checkboxId = id || name || label.toLowerCase().replace(/\s+/g, "-");
const descriptionId = description ? `${checkboxId}-description` : void 0;
console.log({ defaultValue });
const baseCheckboxClasses = `
col-start-1 row-start-1 appearance-none rounded-sm border border-gray-300 bg-white
checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600
indeterminate:bg-indigo-600 focus-visible:outline-2 focus-visible:outline-offset-2
focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100
disabled:checked:bg-gray-100 forced-colors:appearance-auto
${error ? "border-red-300" : ""}
`.trim().replace(/\s+/g, " ");
return /* @__PURE__ */ jsx(
Controller,
{
control,
defaultValue,
name,
render: ({ field }) => /* @__PURE__ */ jsx("fieldset", { "aria-label": label, children: /* @__PURE__ */ jsxs("div", { className: `flex gap-3 ${containerClass}`, children: [
/* @__PURE__ */ jsx("div", { className: "flex h-6 shrink-0 items-center", children: /* @__PURE__ */ jsxs("div", { className: "group grid size-4 grid-cols-1", children: [
/* @__PURE__ */ jsx(
"input",
{
...props,
type: "checkbox",
id: checkboxId,
"aria-describedby": descriptionId,
className: `${baseCheckboxClasses} ${optionClasses}`,
checked: field.value,
onChange: (e) => {
field.onChange(e.target.checked);
trigger(name);
}
}
),
/* @__PURE__ */ jsxs(
"svg",
{
fill: "none",
viewBox: "0 0 14 14",
className: "pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-disabled:stroke-gray-950/25",
children: [
/* @__PURE__ */ jsx(
"path",
{
d: "M3 8L6 11L11 3.5",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
className: "opacity-0 group-has-checked:opacity-100"
}
),
/* @__PURE__ */ jsx(
"path",
{
d: "M3 7H11",
strokeWidth: 2,
strokeLinecap: "round",
strokeLinejoin: "round",
className: "opacity-0 group-has-indeterminate:opacity-100"
}
)
]
}
)
] }) }),
/* @__PURE__ */ jsxs("div", { className: "text-sm/6", children: [
/* @__PURE__ */ jsx(
"label",
{
htmlFor: checkboxId,
className: `font-medium text-gray-900 ${labelClass}`,
children: label
}
),
description && /* @__PURE__ */ jsx("p", { id: descriptionId, className: "text-gray-500", children: description }),
error && /* @__PURE__ */ jsx("p", { className: "text-red-600 mt-1", children: error })
] })
] }) })
}
);
};
export {
Checkbox
};
//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsiLi4vLi4vLi4vc3JjL2NvbXBvbmVudHMvQ2hlY2tib3gvQ2hlY2tib3gudHN4Il0sCiAgInNvdXJjZXNDb250ZW50IjogWyJpbXBvcnQge2NufSBmcm9tICdAbmxhYnMvdXRpbHMnO1xuaW1wb3J0IHt1c2VNZW1vLCB0eXBlIElucHV0SFRNTEF0dHJpYnV0ZXN9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7Q29udHJvbGxlciwgdXNlRm9ybUNvbnRleHR9IGZyb20gJ3JlYWN0LWhvb2stZm9ybSc7XG5pbXBvcnQge2dldENoZWNrZWRDbGFzc2VzfSBmcm9tICcuLi8uLi91dGlscy9jb2xvclV0aWxzJztcblxuZXhwb3J0IGludGVyZmFjZSBDaGVja2JveFByb3BzIGV4dGVuZHMgT21pdDxJbnB1dEhUTUxBdHRyaWJ1dGVzPEhUTUxJbnB1dEVsZW1lbnQ+LCAndHlwZScgfCAnY2xhc3NOYW1lJyB8ICdkZWZhdWx0VmFsdWUnPiB7XG4gIGNvbG9yPzogJ3ByaW1hcnknIHwgJ3NlY29uZGFyeScgfCAnZXJyb3InIHwgJ3N1Y2Nlc3MnIHwgJ3dhcm5pbmcnO1xuICBjb250YWluZXJDbGFzcz86IHN0cmluZztcbiAgZGVmYXVsdFZhbHVlPzogYm9vbGVhbjtcbiAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG4gIGVycm9yPzogc3RyaW5nO1xuICBsYWJlbDogc3RyaW5nO1xuICBsYWJlbENsYXNzPzogc3RyaW5nO1xuICBuYW1lOiBzdHJpbmc7XG4gIG9wdGlvbkNsYXNzPzogc3RyaW5nO1xufVxuXG5leHBvcnQgY29uc3QgQ2hlY2tib3ggPSAoe1xuICBjb2xvciA9ICdwcmltYXJ5JyxcbiAgbGFiZWwsXG4gIGRlZmF1bHRWYWx1ZSA9IGZhbHNlLFxuICBkZXNjcmlwdGlvbixcbiAgZXJyb3IsXG4gIGNvbnRhaW5lckNsYXNzID0gJycsXG4gIGxhYmVsQ2xhc3MgPSAnJyxcbiAgbmFtZSxcbiAgb3B0aW9uQ2xhc3MgPSAnJyxcbiAgaWQsXG4gIC4uLnByb3BzXG59OiBDaGVja2JveFByb3BzKSA9PiB7XG4gIGNvbnN0IHtjb250cm9sLCB0cmlnZ2VyfSA9IHVzZUZvcm1Db250ZXh0KCk7XG4gIGNvbnN0IG9wdGlvbkNsYXNzZXMgPSB1c2VNZW1vKFxuICAgICgpID0+IGNuKG9wdGlvbkNsYXNzLCBnZXRDaGVja2VkQ2xhc3Nlcyhjb2xvcikpLFxuICAgIFtjb2xvciwgb3B0aW9uQ2xhc3NdXG4gICk7XG4gIGNvbnN0IGNoZWNrYm94SWQgPSBpZCB8fCBuYW1lIHx8IGxhYmVsLnRvTG93ZXJDYXNlKCkucmVwbGFjZSgvXFxzKy9nLCAnLScpO1xuICBjb25zdCBkZXNjcmlwdGlvbklkID0gZGVzY3JpcHRpb24gPyBgJHtjaGVja2JveElkfS1kZXNjcmlwdGlvbmAgOiB1bmRlZmluZWQ7XG5cbiAgY29uc29sZS5sb2coe2RlZmF1bHRWYWx1ZX0pO1xuICBjb25zdCBiYXNlQ2hlY2tib3hDbGFzc2VzID0gYFxuICAgIGNvbC1zdGFydC0xIHJvdy1zdGFydC0xIGFwcGVhcmFuY2Utbm9uZSByb3VuZGVkLXNtIGJvcmRlciBib3JkZXItZ3JheS0zMDAgYmctd2hpdGVcbiAgICBjaGVja2VkOmJvcmRlci1pbmRpZ28tNjAwIGNoZWNrZWQ6YmctaW5kaWdvLTYwMCBpbmRldGVybWluYXRlOmJvcmRlci1pbmRpZ28tNjAwXG4gICAgaW5kZXRlcm1pbmF0ZTpiZy1pbmRpZ28tNjAwIGZvY3VzLXZpc2libGU6b3V0bGluZS0yIGZvY3VzLXZpc2libGU6b3V0bGluZS1vZmZzZXQtMlxuICAgIGZvY3VzLXZpc2libGU6b3V0bGluZS1pbmRpZ28tNjAwIGRpc2FibGVkOmJvcmRlci1ncmF5LTMwMCBkaXNhYmxlZDpiZy1ncmF5LTEwMFxuICAgIGRpc2FibGVkOmNoZWNrZWQ6YmctZ3JheS0xMDAgZm9yY2VkLWNvbG9yczphcHBlYXJhbmNlLWF1dG9cbiAgICAke2Vycm9yID8gJ2JvcmRlci1yZWQtMzAwJyA6ICcnfVxuICBgLnRyaW0oKS5yZXBsYWNlKC9cXHMrL2csICcgJyk7XG4gIHJldHVybiAoXG4gICAgPENvbnRyb2xsZXJcbiAgICAgIGNvbnRyb2w9e2NvbnRyb2x9XG4gICAgICBkZWZhdWx0VmFsdWU9e2RlZmF1bHRWYWx1ZX1cbiAgICAgIG5hbWU9e25hbWV9XG4gICAgICByZW5kZXI9eyh7ZmllbGR9KSA9PiAoXG4gICAgICAgIDxmaWVsZHNldCBhcmlhLWxhYmVsPXtsYWJlbH0+XG4gICAgICAgICAgPGRpdiBjbGFzc05hbWU9e2BmbGV4IGdhcC0zICR7Y29udGFpbmVyQ2xhc3N9YH0+XG4gICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImZsZXggaC02IHNocmluay0wIGl0ZW1zLWNlbnRlclwiPlxuICAgICAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT1cImdyb3VwIGdyaWQgc2l6ZS00IGdyaWQtY29scy0xXCI+XG4gICAgICAgICAgICAgICAgPGlucHV0XG4gICAgICAgICAgICAgICAgICB7Li4ucHJvcHN9XG4gICAgICAgICAgICAgICAgICB0eXBlPVwiY2hlY2tib3hcIlxuICAgICAgICAgICAgICAgICAgaWQ9e2NoZWNrYm94SWR9XG4gICAgICAgICAgICAgICAgICBhcmlhLWRlc2NyaWJlZGJ5PXtkZXNjcmlwdGlvbklkfVxuICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtgJHtiYXNlQ2hlY2tib3hDbGFzc2VzfSAke29wdGlvbkNsYXNzZXN9YH1cbiAgICAgICAgICAgICAgICAgIGNoZWNrZWQ9e2ZpZWxkLnZhbHVlfVxuICAgICAgICAgICAgICAgICAgb25DaGFuZ2U9eyhlKSA9PiB7XG4gICAgICAgICAgICAgICAgICAgIGZpZWxkLm9uQ2hhbmdlKGUudGFyZ2V0LmNoZWNrZWQpO1xuICAgICAgICAgICAgICAgICAgICB0cmlnZ2VyKG5hbWUpO1xuICAgICAgICAgICAgICAgICAgfX1cbiAgICAgICAgICAgICAgICAvPlxuICAgICAgICAgICAgICAgIDxzdmdcbiAgICAgICAgICAgICAgICAgIGZpbGw9XCJub25lXCJcbiAgICAgICAgICAgICAgICAgIHZpZXdCb3g9XCIwIDAgMTQgMTRcIlxuICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPVwicG9pbnRlci1ldmVudHMtbm9uZSBjb2wtc3RhcnQtMSByb3ctc3RhcnQtMSBzaXplLTMuNSBzZWxmLWNlbnRlciBqdXN0aWZ5LXNlbGYtY2VudGVyIHN0cm9rZS13aGl0ZSBncm91cC1oYXMtZGlzYWJsZWQ6c3Ryb2tlLWdyYXktOTUwLzI1XCJcbiAgICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgICAgICAgICBkPVwiTTMgOEw2IDExTDExIDMuNVwiXG4gICAgICAgICAgICAgICAgICAgIHN0cm9rZVdpZHRoPXsyfVxuICAgICAgICAgICAgICAgICAgICBzdHJva2VMaW5lY2FwPVwicm91bmRcIlxuICAgICAgICAgICAgICAgICAgICBzdHJva2VMaW5lam9pbj1cInJvdW5kXCJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPVwib3BhY2l0eS0wIGdyb3VwLWhhcy1jaGVja2VkOm9wYWNpdHktMTAwXCJcbiAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgICA8cGF0aFxuICAgICAgICAgICAgICAgICAgICBkPVwiTTMgN0gxMVwiXG4gICAgICAgICAgICAgICAgICAgIHN0cm9rZVdpZHRoPXsyfVxuICAgICAgICAgICAgICAgICAgICBzdHJva2VMaW5lY2FwPVwicm91bmRcIlxuICAgICAgICAgICAgICAgICAgICBzdHJva2VMaW5lam9pbj1cInJvdW5kXCJcbiAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPVwib3BhY2l0eS0wIGdyb3VwLWhhcy1pbmRldGVybWluYXRlOm9wYWNpdHktMTAwXCJcbiAgICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPC9zdmc+XG4gICAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgPC9kaXY+XG5cbiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwidGV4dC1zbS82XCI+XG4gICAgICAgICAgICAgIDxsYWJlbFxuICAgICAgICAgICAgICAgIGh0bWxGb3I9e2NoZWNrYm94SWR9XG4gICAgICAgICAgICAgICAgY2xhc3NOYW1lPXtgZm9udC1tZWRpdW0gdGV4dC1ncmF5LTkwMCAke2xhYmVsQ2xhc3N9YH1cbiAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgIHtsYWJlbH1cbiAgICAgICAgICAgICAgPC9sYWJlbD5cbiAgICAgICAgICAgICAge2Rlc2NyaXB0aW9uICYmIChcbiAgICAgICAgICAgICAgICA8cCBpZD17ZGVzY3JpcHRpb25JZH0gY2xhc3NOYW1lPVwidGV4dC1ncmF5LTUwMFwiPlxuICAgICAgICAgICAgICAgICAge2Rlc2NyaXB0aW9ufVxuICAgICAgICAgICAgICAgIDwvcD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgICAge2Vycm9yICYmIChcbiAgICAgICAgICAgICAgICA8cCBjbGFzc05hbWU9XCJ0ZXh0LXJlZC02MDAgbXQtMVwiPntlcnJvcn08L3A+XG4gICAgICAgICAgICAgICl9XG4gICAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgICA8L2Rpdj5cbiAgICAgICAgPC9maWVsZHNldD5cbiAgICAgICl9XG4gICAgLz5cbiAgKTtcbn07Il0sCiAgIm1hcHBpbmdzIjogIkFBQUEsU0FBUSxVQUFTO0FBQ2pCLFNBQVEsZUFBd0M7QUFDaEQsU0FBUSxZQUFZLHNCQUFxQjtBQUN6QyxTQUFRLHlCQUF3QjtBQXNEaEIsY0FZQSxZQVpBO0FBeENULE1BQU0sV0FBVyxDQUFDO0FBQUEsRUFDdkIsUUFBUTtBQUFBLEVBQ1I7QUFBQSxFQUNBLGVBQWU7QUFBQSxFQUNmO0FBQUEsRUFDQTtBQUFBLEVBQ0EsaUJBQWlCO0FBQUEsRUFDakIsYUFBYTtBQUFBLEVBQ2I7QUFBQSxFQUNBLGNBQWM7QUFBQSxFQUNkO0FBQUEsRUFDQSxHQUFHO0FBQ0wsTUFBcUI7QUFDbkIsUUFBTSxFQUFDLFNBQVMsUUFBTyxJQUFJLGVBQWU7QUFDMUMsUUFBTSxnQkFBZ0I7QUFBQSxJQUNwQixNQUFNLEdBQUcsYUFBYSxrQkFBa0IsS0FBSyxDQUFDO0FBQUEsSUFDOUMsQ0FBQyxPQUFPLFdBQVc7QUFBQSxFQUNyQjtBQUNBLFFBQU0sYUFBYSxNQUFNLFFBQVEsTUFBTSxZQUFZLEVBQUUsUUFBUSxRQUFRLEdBQUc7QUFDeEUsUUFBTSxnQkFBZ0IsY0FBYyxHQUFHLFVBQVUsaUJBQWlCO0FBRWxFLFVBQVEsSUFBSSxFQUFDLGFBQVksQ0FBQztBQUMxQixRQUFNLHNCQUFzQjtBQUFBO0FBQUE7QUFBQTtBQUFBO0FBQUE7QUFBQSxNQU14QixRQUFRLG1CQUFtQixFQUFFO0FBQUEsSUFDL0IsS0FBSyxFQUFFLFFBQVEsUUFBUSxHQUFHO0FBQzVCLFNBQ0U7QUFBQSxJQUFDO0FBQUE7QUFBQSxNQUNDO0FBQUEsTUFDQTtBQUFBLE1BQ0E7QUFBQSxNQUNBLFFBQVEsQ0FBQyxFQUFDLE1BQUssTUFDYixvQkFBQyxjQUFTLGNBQVksT0FDcEIsK0JBQUMsU0FBSSxXQUFXLGNBQWMsY0FBYyxJQUMxQztBQUFBLDRCQUFDLFNBQUksV0FBVSxrQ0FDYiwrQkFBQyxTQUFJLFdBQVUsaUNBQ2I7QUFBQTtBQUFBLFlBQUM7QUFBQTtBQUFBLGNBQ0UsR0FBRztBQUFBLGNBQ0osTUFBSztBQUFBLGNBQ0wsSUFBSTtBQUFBLGNBQ0osb0JBQWtCO0FBQUEsY0FDbEIsV0FBVyxHQUFHLG1CQUFtQixJQUFJLGFBQWE7QUFBQSxjQUNsRCxTQUFTLE1BQU07QUFBQSxjQUNmLFVBQVUsQ0FBQyxNQUFNO0FBQ2Ysc0JBQU0sU0FBUyxFQUFFLE9BQU8sT0FBTztBQUMvQix3QkFBUSxJQUFJO0FBQUEsY0FDZDtBQUFBO0FBQUEsVUFDRjtBQUFBLFVBQ0E7QUFBQSxZQUFDO0FBQUE7QUFBQSxjQUNDLE1BQUs7QUFBQSxjQUNMLFNBQVE7QUFBQSxjQUNSLFdBQVU7QUFBQSxjQUVWO0FBQUE7QUFBQSxrQkFBQztBQUFBO0FBQUEsb0JBQ0MsR0FBRTtBQUFBLG9CQUNGLGFBQWE7QUFBQSxvQkFDYixlQUFjO0FBQUEsb0JBQ2QsZ0JBQWU7QUFBQSxvQkFDZixXQUFVO0FBQUE7QUFBQSxnQkFDWjtBQUFBLGdCQUNBO0FBQUEsa0JBQUM7QUFBQTtBQUFBLG9CQUNDLEdBQUU7QUFBQSxvQkFDRixhQUFhO0FBQUEsb0JBQ2IsZUFBYztBQUFBLG9CQUNkLGdCQUFlO0FBQUEsb0JBQ2YsV0FBVTtBQUFBO0FBQUEsZ0JBQ1o7QUFBQTtBQUFBO0FBQUEsVUFDRjtBQUFBLFdBQ0YsR0FDRjtBQUFBLFFBRUEscUJBQUMsU0FBSSxXQUFVLGFBQ2I7QUFBQTtBQUFBLFlBQUM7QUFBQTtBQUFBLGNBQ0MsU0FBUztBQUFBLGNBQ1QsV0FBVyw2QkFBNkIsVUFBVTtBQUFBLGNBRWpEO0FBQUE7QUFBQSxVQUNIO0FBQUEsVUFDQyxlQUNDLG9CQUFDLE9BQUUsSUFBSSxlQUFlLFdBQVUsaUJBQzdCLHVCQUNIO0FBQUEsVUFFRCxTQUNDLG9CQUFDLE9BQUUsV0FBVSxxQkFBcUIsaUJBQU07QUFBQSxXQUU1QztBQUFBLFNBQ0YsR0FDRjtBQUFBO0FBQUEsRUFFSjtBQUVKOyIsCiAgIm5hbWVzIjogW10KfQo=