stofli-ui/dist/components/checkbox/index.esm.js

Biblioteca moderna de componentes UI para React con Tailwind CSS y Framer Motion

'use client';
import{jsxs as e,jsx as r}from"react/jsx-runtime";import a,{useId as d}from"react";import{motion as i}from"framer-motion";import{clsx as n}from"clsx";import{twMerge as t}from"tailwind-merge";function o(){for(var e=[],r=0;r<arguments.length;r++)e[r]=arguments[r];return t(n(e))}var l=function(n){var t=n.checked,l=n.defaultChecked,c=void 0!==l&&l,b=n.disabled,s=void 0!==b&&b,u=n.required,h=void 0!==u&&u,g=n.label,k=n.name,m=n.value,p=n.size,v=void 0===p?"md":p,f=n.variant,x=void 0===f?"default":f,w=n.className,y=void 0===w?"":w,z=n.wrapperClassName,N=void 0===z?"":z,C=n.checkboxClassName,L=void 0===C?"":C,q=n.labelClassName,O=void 0===q?"":q,j=n.onChange,D=n.radius,B=void 0===D?"md":D,E=n.id,I=n.ariaLabel,M=n.ariaDescribedBy,F=n.errorMessage,K=d(),P="checkbox-".concat(K.replace(/:/g,"")),S=E||P,T="".concat(S,"-error"),W=a.useState(void 0===t?c:t),A=W[0],G=W[1];a.useEffect((function(){void 0!==t&&G(t)}),[t]);var H=function(){if(!s){var e=!A;void 0===t&&G(e),null==j||j(e)}},J=o("inline-flex items-center",!s&&"cursor-pointer",N),Q=o({sm:"h-4 w-4",md:"h-5 w-5",lg:"h-6 w-6"}[v],"border-2",{none:"rounded-none",sm:"rounded-[0.25rem]",md:"rounded-[0.375rem]",full:"rounded-full"}[B],"flex items-center justify-center","focus-visible:ring-2 focus-visible:ring-offset-2",A?{default:"bg-zinc-400 dark:bg-zinc-800 border-zinc-400 dark:border-zinc-800 text-neutral-50 dark:text-neutral-200",primary:"bg-blue-400 dark:bg-blue-800 border-blue-400 dark:border-blue-800 text-white ring-2 ring-blue-100 dark:ring-blue-900/20",secondary:"bg-purple-400 dark:bg-purple-800 border-purple-400 dark:border-purple-800 text-white ring-2 ring-purple-100 dark:ring-purple-900/20",success:"bg-green-400 dark:bg-green-800 border-green-400 dark:border-green-800 text-white ring-2 ring-green-100 dark:ring-green-900/20",warning:"bg-amber-400 dark:bg-amber-800 border-amber-400 dark:border-amber-800 text-white ring-2 ring-amber-100 dark:ring-amber-900/20",danger:"bg-red-400 dark:bg-red-800 border-red-400 dark:border-red-800 text-white ring-2 ring-red-100 dark:ring-red-900/20"}[x]:{default:"border-zinc-400 dark:border-zinc-800 bg-white dark:bg-zinc-900 hover:border-zinc-800 dark:hover:border-zinc-600",primary:"border-blue-400 dark:border-blue-800 bg-white dark:bg-zinc-900 hover:border-blue-600 dark:hover:border-blue-500",secondary:"border-purple-400 dark:border-purple-800 bg-white dark:bg-zinc-900 hover:border-purple-600 dark:hover:border-purple-500",success:"border-green-400 dark:border-green-800 bg-white dark:bg-zinc-900 hover:border-green-600 dark:hover:border-green-500",warning:"border-amber-400 dark:border-amber-800 bg-white dark:bg-zinc-900 hover:border-amber-600 dark:hover:border-amber-500",danger:"border-red-400 dark:border-red-800 bg-white dark:bg-zinc-900 hover:border-red-600 dark:hover:border-red-500"}[x],s&&"cursor-not-allowed opacity-50",F&&"border-red-500 dark:border-red-400",L),R=o("ml-2",{sm:"text-sm",md:"text-base",lg:"text-lg"}[v],s?"text-neutral-400 dark:text-neutral-600":"text-neutral-900 dark:text-neutral-100",O),U=o("w-[80%] h-[80%]","default"===x?"text-white dark:text-neutral-200":"text-white",y);return e("div",{className:J,onClick:H,onKeyDown:function(e){" "!==e.key&&"Enter"!==e.key||(e.preventDefault(),H())},role:"checkbox","aria-checked":A,tabIndex:s?-1:0,"aria-disabled":s,"aria-required":h,"aria-label":I||g,"aria-describedby":o(F?T:null,M),"aria-invalid":!!F,children:[e("div",{className:"relative",role:"presentation",children:[r("input",{type:"checkbox",id:S,className:"sr-only",checked:A,disabled:s,required:h,name:k,value:m,onChange:function(e){if(!s){var r=e.target.checked;void 0===t&&G(r),null==j||j(r)}},tabIndex:-1}),r(i.div,{className:Q,variants:{checked:{scale:[1,1.1,1],transition:{duration:.2,ease:[.4,0,.2,1]}},unchecked:{scale:1,transition:{duration:.2,ease:[.4,0,.2,1]}}},initial:"unchecked",animate:A?"checked":"unchecked",whileTap:s?void 0:{scale:.95},role:"presentation",children:r(i.svg,{className:U,viewBox:"0 0 24 24","aria-hidden":"true",children:r(i.path,{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:4,d:"M4 12l5 5L20 7",variants:{checked:{pathLength:1,opacity:1,transition:{pathLength:{duration:.2,ease:"easeOut"},opacity:{duration:.15,ease:"easeOut"}}},unchecked:{pathLength:0,opacity:0,transition:{pathLength:{duration:.2,ease:"easeOut",delay:.05},opacity:{duration:.2,ease:"easeOut"}}}},initial:"unchecked",animate:A?"checked":"unchecked"})})})]}),g&&e("label",{htmlFor:S,className:R,onClick:function(e){return e.stopPropagation()},children:[g,h&&r("span",{className:"text-red-500 ml-0.5","aria-hidden":"true",children:"*"}),h&&r("span",{className:"sr-only",children:"(requerido)"})]}),F&&r("div",{id:T,role:"alert",className:"text-red-500 dark:text-red-400 text-sm mt-1",children:F})]})};export{l as default};
//# sourceMappingURL=index.esm.js.map