@nlabs/gothamjs
Version:
Platform
97 lines (96 loc) • 13.8 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';
export 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` : undefined;
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: control,
defaultValue: defaultValue,
name: 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
})
]
})
]
})
})
});
};
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi9Vc2Vycy9uaXRyb2c3L0RldmVsb3BtZW50L2dvdGhhbWpzL3NyYy9jb21wb25lbnRzL0NoZWNrYm94L0NoZWNrYm94LnRzeCJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQge2NufSBmcm9tICdAbmxhYnMvdXRpbHMnO1xuaW1wb3J0IHt1c2VNZW1vLCB0eXBlIElucHV0SFRNTEF0dHJpYnV0ZXN9IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7Q29udHJvbGxlciwgdXNlRm9ybUNvbnRleHR9IGZyb20gJ3JlYWN0LWhvb2stZm9ybSc7XG5pbXBvcnQge2dldENoZWNrZWRDbGFzc2VzfSBmcm9tICcuLi8uLi91dGlscy9jb2xvclV0aWxzJztcblxuZXhwb3J0IGludGVyZmFjZSBDaGVja2JveFByb3BzIGV4dGVuZHMgT21pdDxJbnB1dEhUTUxBdHRyaWJ1dGVzPEhUTUxJbnB1dEVsZW1lbnQ+LCAndHlwZScgfCAnY2xhc3NOYW1lJyB8ICdkZWZhdWx0VmFsdWUnPiB7XG4gIGNvbG9yPzogJ3ByaW1hcnknIHwgJ3NlY29uZGFyeScgfCAnZXJyb3InIHwgJ3N1Y2Nlc3MnIHwgJ3dhcm5pbmcnO1xuICBjb250YWluZXJDbGFzcz86IHN0cmluZztcbiAgZGVmYXVsdFZhbHVlPzogYm9vbGVhbjtcbiAgZGVzY3JpcHRpb24/OiBzdHJpbmc7XG4gIGVycm9yPzogc3RyaW5nO1xuICBsYWJlbDogc3RyaW5nO1xuICBsYWJlbENsYXNzPzogc3RyaW5nO1xuICBuYW1lOiBzdHJpbmc7XG4gIG9wdGlvbkNsYXNzPzogc3RyaW5nO1xufVxuXG5leHBvcnQgY29uc3QgQ2hlY2tib3ggPSAoe1xuICBjb2xvciA9ICdwcmltYXJ5JyxcbiAgbGFiZWwsXG4gIGRlZmF1bHRWYWx1ZSA9IGZhbHNlLFxuICBkZXNjcmlwdGlvbixcbiAgZXJyb3IsXG4gIGNvbnRhaW5lckNsYXNzID0gJycsXG4gIGxhYmVsQ2xhc3MgPSAnJyxcbiAgbmFtZSxcbiAgb3B0aW9uQ2xhc3MgPSAnJyxcbiAgaWQsXG4gIC4uLnByb3BzXG59OiBDaGVja2JveFByb3BzKSA9PiB7XG4gIGNvbnN0IHtjb250cm9sLCB0cmlnZ2VyfSA9IHVzZUZvcm1Db250ZXh0KCk7XG4gIGNvbnN0IG9wdGlvbkNsYXNzZXMgPSB1c2VNZW1vKFxuICAgICgpID0+IGNuKG9wdGlvbkNsYXNzLCBnZXRDaGVja2VkQ2xhc3Nlcyhjb2xvcikpLFxuICAgIFtjb2xvciwgb3B0aW9uQ2xhc3NdXG4gICk7XG4gIGNvbnN0IGNoZWNrYm94SWQgPSBpZCB8fCBuYW1lIHx8IGxhYmVsLnRvTG93ZXJDYXNlKCkucmVwbGFjZSgvXFxzKy9nLCAnLScpO1xuICBjb25zdCBkZXNjcmlwdGlvbklkID0gZGVzY3JpcHRpb24gPyBgJHtjaGVja2JveElkfS1kZXNjcmlwdGlvbmAgOiB1bmRlZmluZWQ7XG4gIGNvbnN0IGJhc2VDaGVja2JveENsYXNzZXMgPSBgXG4gICAgY29sLXN0YXJ0LTEgcm93LXN0YXJ0LTEgYXBwZWFyYW5jZS1ub25lIHJvdW5kZWQtc20gYm9yZGVyIGJvcmRlci1ncmF5LTMwMCBiZy13aGl0ZVxuICAgIGNoZWNrZWQ6Ym9yZGVyLWluZGlnby02MDAgY2hlY2tlZDpiZy1pbmRpZ28tNjAwIGluZGV0ZXJtaW5hdGU6Ym9yZGVyLWluZGlnby02MDBcbiAgICBpbmRldGVybWluYXRlOmJnLWluZGlnby02MDAgZm9jdXMtdmlzaWJsZTpvdXRsaW5lLTIgZm9jdXMtdmlzaWJsZTpvdXRsaW5lLW9mZnNldC0yXG4gICAgZm9jdXMtdmlzaWJsZTpvdXRsaW5lLWluZGlnby02MDAgZGlzYWJsZWQ6Ym9yZGVyLWdyYXktMzAwIGRpc2FibGVkOmJnLWdyYXktMTAwXG4gICAgZGlzYWJsZWQ6Y2hlY2tlZDpiZy1ncmF5LTEwMCBmb3JjZWQtY29sb3JzOmFwcGVhcmFuY2UtYXV0b1xuICAgICR7ZXJyb3IgPyAnYm9yZGVyLXJlZC0zMDAnIDogJyd9XG4gIGAudHJpbSgpLnJlcGxhY2UoL1xccysvZywgJyAnKTtcbiAgcmV0dXJuIChcbiAgICA8Q29udHJvbGxlclxuICAgICAgY29udHJvbD17Y29udHJvbH1cbiAgICAgIGRlZmF1bHRWYWx1ZT17ZGVmYXVsdFZhbHVlfVxuICAgICAgbmFtZT17bmFtZX1cbiAgICAgIHJlbmRlcj17KHtmaWVsZH0pID0+IChcbiAgICAgICAgPGZpZWxkc2V0IGFyaWEtbGFiZWw9e2xhYmVsfT5cbiAgICAgICAgICA8ZGl2IGNsYXNzTmFtZT17YGZsZXggZ2FwLTMgJHtjb250YWluZXJDbGFzc31gfT5cbiAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiZmxleCBoLTYgc2hyaW5rLTAgaXRlbXMtY2VudGVyXCI+XG4gICAgICAgICAgICAgIDxkaXYgY2xhc3NOYW1lPVwiZ3JvdXAgZ3JpZCBzaXplLTQgZ3JpZC1jb2xzLTFcIj5cbiAgICAgICAgICAgICAgICA8aW5wdXRcbiAgICAgICAgICAgICAgICAgIHsuLi5wcm9wc31cbiAgICAgICAgICAgICAgICAgIHR5cGU9XCJjaGVja2JveFwiXG4gICAgICAgICAgICAgICAgICBpZD17Y2hlY2tib3hJZH1cbiAgICAgICAgICAgICAgICAgIGFyaWEtZGVzY3JpYmVkYnk9e2Rlc2NyaXB0aW9uSWR9XG4gICAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2Ake2Jhc2VDaGVja2JveENsYXNzZXN9ICR7b3B0aW9uQ2xhc3Nlc31gfVxuICAgICAgICAgICAgICAgICAgY2hlY2tlZD17ZmllbGQudmFsdWV9XG4gICAgICAgICAgICAgICAgICBvbkNoYW5nZT17KGUpID0+IHtcbiAgICAgICAgICAgICAgICAgICAgZmllbGQub25DaGFuZ2UoZS50YXJnZXQuY2hlY2tlZCk7XG4gICAgICAgICAgICAgICAgICAgIHRyaWdnZXIobmFtZSk7XG4gICAgICAgICAgICAgICAgICB9fVxuICAgICAgICAgICAgICAgIC8+XG4gICAgICAgICAgICAgICAgPHN2Z1xuICAgICAgICAgICAgICAgICAgZmlsbD1cIm5vbmVcIlxuICAgICAgICAgICAgICAgICAgdmlld0JveD1cIjAgMCAxNCAxNFwiXG4gICAgICAgICAgICAgICAgICBjbGFzc05hbWU9XCJwb2ludGVyLWV2ZW50cy1ub25lIGNvbC1zdGFydC0xIHJvdy1zdGFydC0xIHNpemUtMy41IHNlbGYtY2VudGVyIGp1c3RpZnktc2VsZi1jZW50ZXIgc3Ryb2tlLXdoaXRlIGdyb3VwLWhhcy1kaXNhYmxlZDpzdHJva2UtZ3JheS05NTAvMjVcIlxuICAgICAgICAgICAgICAgID5cbiAgICAgICAgICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICAgICAgICAgIGQ9XCJNMyA4TDYgMTFMMTEgMy41XCJcbiAgICAgICAgICAgICAgICAgICAgc3Ryb2tlV2lkdGg9ezJ9XG4gICAgICAgICAgICAgICAgICAgIHN0cm9rZUxpbmVjYXA9XCJyb3VuZFwiXG4gICAgICAgICAgICAgICAgICAgIHN0cm9rZUxpbmVqb2luPVwicm91bmRcIlxuICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9XCJvcGFjaXR5LTAgZ3JvdXAtaGFzLWNoZWNrZWQ6b3BhY2l0eS0xMDBcIlxuICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICAgIDxwYXRoXG4gICAgICAgICAgICAgICAgICAgIGQ9XCJNMyA3SDExXCJcbiAgICAgICAgICAgICAgICAgICAgc3Ryb2tlV2lkdGg9ezJ9XG4gICAgICAgICAgICAgICAgICAgIHN0cm9rZUxpbmVjYXA9XCJyb3VuZFwiXG4gICAgICAgICAgICAgICAgICAgIHN0cm9rZUxpbmVqb2luPVwicm91bmRcIlxuICAgICAgICAgICAgICAgICAgICBjbGFzc05hbWU9XCJvcGFjaXR5LTAgZ3JvdXAtaGFzLWluZGV0ZXJtaW5hdGU6b3BhY2l0eS0xMDBcIlxuICAgICAgICAgICAgICAgICAgLz5cbiAgICAgICAgICAgICAgICA8L3N2Zz5cbiAgICAgICAgICAgICAgPC9kaXY+XG4gICAgICAgICAgICA8L2Rpdj5cblxuICAgICAgICAgICAgPGRpdiBjbGFzc05hbWU9XCJ0ZXh0LXNtLzZcIj5cbiAgICAgICAgICAgICAgPGxhYmVsXG4gICAgICAgICAgICAgICAgaHRtbEZvcj17Y2hlY2tib3hJZH1cbiAgICAgICAgICAgICAgICBjbGFzc05hbWU9e2Bmb250LW1lZGl1bSB0ZXh0LWdyYXktOTAwICR7bGFiZWxDbGFzc31gfVxuICAgICAgICAgICAgICA+XG4gICAgICAgICAgICAgICAge2xhYmVsfVxuICAgICAgICAgICAgICA8L2xhYmVsPlxuICAgICAgICAgICAgICB7ZGVzY3JpcHRpb24gJiYgKFxuICAgICAgICAgICAgICAgIDxwIGlkPXtkZXNjcmlwdGlvbklkfSBjbGFzc05hbWU9XCJ0ZXh0LWdyYXktNTAwXCI+XG4gICAgICAgICAgICAgICAgICB7ZGVzY3JpcHRpb259XG4gICAgICAgICAgICAgICAgPC9wPlxuICAgICAgICAgICAgICApfVxuICAgICAgICAgICAgICB7ZXJyb3IgJiYgKFxuICAgICAgICAgICAgICAgIDxwIGNsYXNzTmFtZT1cInRleHQtcmVkLTYwMCBtdC0xXCI+e2Vycm9yfTwvcD5cbiAgICAgICAgICAgICAgKX1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgIDwvZGl2PlxuICAgICAgICA8L2ZpZWxkc2V0PlxuICAgICAgKX1cbiAgICAvPlxuICApO1xufTsiXSwibmFtZXMiOlsiY24iLCJ1c2VNZW1vIiwiQ29udHJvbGxlciIsInVzZUZvcm1Db250ZXh0IiwiZ2V0Q2hlY2tlZENsYXNzZXMiLCJDaGVja2JveCIsImNvbG9yIiwibGFiZWwiLCJkZWZhdWx0VmFsdWUiLCJkZXNjcmlwdGlvbiIsImVycm9yIiwiY29udGFpbmVyQ2xhc3MiLCJsYWJlbENsYXNzIiwibmFtZSIsIm9wdGlvbkNsYXNzIiwiaWQiLCJwcm9wcyIsImNvbnRyb2wiLCJ0cmlnZ2VyIiwib3B0aW9uQ2xhc3NlcyIsImNoZWNrYm94SWQiLCJ0b0xvd2VyQ2FzZSIsInJlcGxhY2UiLCJkZXNjcmlwdGlvbklkIiwidW5kZWZpbmVkIiwiYmFzZUNoZWNrYm94Q2xhc3NlcyIsInRyaW0iLCJyZW5kZXIiLCJmaWVsZCIsImZpZWxkc2V0IiwiYXJpYS1sYWJlbCIsImRpdiIsImNsYXNzTmFtZSIsImlucHV0IiwidHlwZSIsImFyaWEtZGVzY3JpYmVkYnkiLCJjaGVja2VkIiwidmFsdWUiLCJvbkNoYW5nZSIsImUiLCJ0YXJnZXQiLCJzdmciLCJmaWxsIiwidmlld0JveCIsInBhdGgiLCJkIiwic3Ryb2tlV2lkdGgiLCJzdHJva2VMaW5lY2FwIiwic3Ryb2tlTGluZWpvaW4iLCJodG1sRm9yIiwicCJdLCJtYXBwaW5ncyI6IjtBQUFBLFNBQVFBLEVBQUUsUUFBTyxlQUFlO0FBQ2hDLFNBQVFDLE9BQU8sUUFBaUMsUUFBUTtBQUN4RCxTQUFRQyxVQUFVLEVBQUVDLGNBQWMsUUFBTyxrQkFBa0I7QUFDM0QsU0FBUUMsaUJBQWlCLFFBQU8seUJBQXlCO0FBY3pELE9BQU8sTUFBTUMsV0FBVyxDQUFDLEVBQ3ZCQyxRQUFRLFNBQVMsRUFDakJDLEtBQUssRUFDTEMsZUFBZSxLQUFLLEVBQ3BCQyxXQUFXLEVBQ1hDLEtBQUssRUFDTEMsaUJBQWlCLEVBQUUsRUFDbkJDLGFBQWEsRUFBRSxFQUNmQyxJQUFJLEVBQ0pDLGNBQWMsRUFBRSxFQUNoQkMsRUFBRSxFQUNGLEdBQUdDLE9BQ1c7SUFDZCxNQUFNLEVBQUNDLE9BQU8sRUFBRUMsT0FBTyxFQUFDLEdBQUdmO0lBQzNCLE1BQU1nQixnQkFBZ0JsQixRQUNwQixJQUFNRCxHQUFHYyxhQUFhVixrQkFBa0JFLFNBQ3hDO1FBQUNBO1FBQU9RO0tBQVk7SUFFdEIsTUFBTU0sYUFBYUwsTUFBTUYsUUFBUU4sTUFBTWMsV0FBVyxHQUFHQyxPQUFPLENBQUMsUUFBUTtJQUNyRSxNQUFNQyxnQkFBZ0JkLGNBQWMsR0FBR1csV0FBVyxZQUFZLENBQUMsR0FBR0k7SUFDbEUsTUFBTUMsc0JBQXNCLENBQUM7Ozs7OztJQU0zQixFQUFFZixRQUFRLG1CQUFtQixHQUFHO0VBQ2xDLENBQUMsQ0FBQ2dCLElBQUksR0FBR0osT0FBTyxDQUFDLFFBQVE7SUFDekIscUJBQ0UsS0FBQ3BCO1FBQ0NlLFNBQVNBO1FBQ1RULGNBQWNBO1FBQ2RLLE1BQU1BO1FBQ05jLFFBQVEsQ0FBQyxFQUFDQyxLQUFLLEVBQUMsaUJBQ2QsS0FBQ0M7Z0JBQVNDLGNBQVl2QjswQkFDcEIsY0FBQSxNQUFDd0I7b0JBQUlDLFdBQVcsQ0FBQyxXQUFXLEVBQUVyQixnQkFBZ0I7O3NDQUM1QyxLQUFDb0I7NEJBQUlDLFdBQVU7c0NBQ2IsY0FBQSxNQUFDRDtnQ0FBSUMsV0FBVTs7a0RBQ2IsS0FBQ0M7d0NBQ0UsR0FBR2pCLEtBQUs7d0NBQ1RrQixNQUFLO3dDQUNMbkIsSUFBSUs7d0NBQ0plLG9CQUFrQlo7d0NBQ2xCUyxXQUFXLEdBQUdQLG9CQUFvQixDQUFDLEVBQUVOLGVBQWU7d0NBQ3BEaUIsU0FBU1IsTUFBTVMsS0FBSzt3Q0FDcEJDLFVBQVUsQ0FBQ0M7NENBQ1RYLE1BQU1VLFFBQVEsQ0FBQ0MsRUFBRUMsTUFBTSxDQUFDSixPQUFPOzRDQUMvQmxCLFFBQVFMO3dDQUNWOztrREFFRixNQUFDNEI7d0NBQ0NDLE1BQUs7d0NBQ0xDLFNBQVE7d0NBQ1JYLFdBQVU7OzBEQUVWLEtBQUNZO2dEQUNDQyxHQUFFO2dEQUNGQyxhQUFhO2dEQUNiQyxlQUFjO2dEQUNkQyxnQkFBZTtnREFDZmhCLFdBQVU7OzBEQUVaLEtBQUNZO2dEQUNDQyxHQUFFO2dEQUNGQyxhQUFhO2dEQUNiQyxlQUFjO2dEQUNkQyxnQkFBZTtnREFDZmhCLFdBQVU7Ozs7Ozs7c0NBTWxCLE1BQUNEOzRCQUFJQyxXQUFVOzs4Q0FDYixLQUFDekI7b0NBQ0MwQyxTQUFTN0I7b0NBQ1RZLFdBQVcsQ0FBQywwQkFBMEIsRUFBRXBCLFlBQVk7OENBRW5ETDs7Z0NBRUZFLDZCQUNDLEtBQUN5QztvQ0FBRW5DLElBQUlRO29DQUFlUyxXQUFVOzhDQUM3QnZCOztnQ0FHSkMsdUJBQ0MsS0FBQ3dDO29DQUFFbEIsV0FBVTs4Q0FBcUJ0Qjs7Ozs7Ozs7QUFRbEQsRUFBRSJ9