@frank-auth/react/dist/cjs/components/ui/checkbox/checkbox.cjs

Flexible and customizable React UI components for Frank Authentication

'use client';
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),A=require("../../../theme/context.cjs"),j=require("../../../theme/styled.cjs"),t=require("@emotion/react"),N=require("@emotion/styled"),x=require("react"),R=e=>e&&e.__esModule?e:{default:e},i=R(N),O=R(x),V=e=>{const{size:r="md"}=e;switch(r){case"sm":return t.css`
        width: 16px;
        height: 16px;
      `;case"md":return t.css`
        width: 20px;
        height: 20px;
      `;case"lg":return t.css`
        width: 24px;
        height: 24px;
      `;default:return t.css`
        width: 20px;
        height: 20px;
      `}},E=e=>{const{theme:r,radius:o="sm"}=e;switch(o){case"none":return t.css`
        border-radius: ${r.borderRadius.none};
      `;case"sm":return t.css`
        border-radius: ${r.borderRadius.sm};
      `;case"md":return t.css`
        border-radius: ${r.borderRadius.md};
      `;case"lg":return t.css`
        border-radius: ${r.borderRadius.lg};
      `;case"full":return t.css`
        border-radius: ${r.borderRadius.full};
      `;default:return t.css`
        border-radius: ${r.borderRadius.sm};
      `}},G=e=>{const{theme:r,color:o="primary",isInvalid:n,isDisabled:d,isChecked:u,isIndeterminate:g,isFocused:h}=e,p=j.getColorVariant(r,o,500),f=j.getColorVariant(r,o,600),c=r.colors.danger[500],a=n?c:p;return d?t.css`
      opacity: 0.5;
      cursor: not-allowed;
      background-color: ${r.colors.neutral[200]};
      border-color: ${r.colors.neutral[300]};
    `:u||g?t.css`
      background-color: ${a};
      border-color: ${a};
      color: ${r.colors.text.inverse};

      &:hover {
        background-color: ${n?c:f};
        border-color: ${n?c:f};
      }
    `:t.css`
    background-color: ${r.colors.background.primary};
    border-color: ${n?c:r.colors.border.primary};
    color: transparent;

    &:hover {
      border-color: ${n?c:r.colors.border.secondary};
    }

    ${h&&t.css`
      border-color: ${a};
      box-shadow: 0 0 0 2px ${a}20;
    `}
  `},J=i.default.label`
  display: inline-flex;
  align-items: flex-start;
  gap: ${e=>e.theme.spacing[2]};
  cursor: ${e=>e.isDisabled?"not-allowed":"pointer"};
  user-select: none;
  line-height: 1;
`,K=i.default.input`
  position: absolute;
  opacity: 0;
  pointer-events: none;
  margin: 0;
  width: 0;
  height: 0;
  top: 1px;
`,Q=i.default.div`
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 2px solid;
  transition: all ${e=>e.theme.transitions.normal};
  flex-shrink: 0;

  /* Improved alignment with text baseline */
  margin-top: ${e=>{switch(e.size){case"sm":return"1px";case"md":return"2px";case"lg":return"3px";default:return"2px"}}};

  ${V}
  ${E}
  ${G}

    /* Custom CSS prop */
  ${e=>e.css}
`,U=()=>s.jsx("svg",{width:"100%",height:"100%",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:s.jsx("polyline",{points:"20,6 9,17 4,12"})}),X=()=>s.jsx("svg",{width:"100%",height:"100%",viewBox:"0 0 24 24",fill:"none",stroke:"currentColor",strokeWidth:"3",strokeLinecap:"round",strokeLinejoin:"round","aria-hidden":"true",children:s.jsx("line",{x1:"5",y1:"12",x2:"19",y2:"12"})}),Y=i.default.div`
  width: ${e=>{switch(e.size){case"sm":return"10px";case"lg":return"16px";default:return"12px"}}};
  height: ${e=>{switch(e.size){case"sm":return"10px";case"lg":return"16px";default:return"12px"}}};
`,Z=i.default.div`
  display: flex;
  flex-direction: column;
  gap: ${e=>e.theme.spacing[1]};
  min-height: 0; /* Allows proper flex behavior */
`,ee=i.default.span`
  color: ${e=>e.theme.colors.text.primary};
  font-size: ${e=>{switch(e.size){case"sm":return e.theme.fontSizes.sm;case"lg":return e.theme.fontSizes.lg;default:return e.theme.fontSizes.base}}};
  font-weight: ${e=>e.theme.fontWeights.medium};
  line-height: ${e=>{switch(e.size){case"sm":return"1.25";case"lg":return"1.4";default:return"1.5"}}};
  margin: 0; /* Remove default margins */

  ${e=>e.isRequired&&t.css`
      &::after {
        content: " *";
        color: ${e.theme.colors.danger[500]};
      }
    `}
`,re=i.default.span`
  color: ${e=>e.theme.colors.text.secondary};
  font-size: ${e=>{switch(e.size){case"sm":return e.theme.fontSizes.xs;case"lg":return e.theme.fontSizes.sm;default:return e.theme.fontSizes.sm}}};
  line-height: ${e=>{switch(e.size){case"sm":return"1.3";case"lg":return"1.4";default:return"1.4"}}};
  margin: 0; /* Remove default margins */
`,z=O.default.forwardRef(({children:e,color:r="primary",size:o="md",radius:n="sm",description:d,isIndeterminate:u=!1,isInvalid:g=!1,isDisabled:h=!1,isRequired:p=!1,className:f,css:c,icon:a,checked:b,defaultChecked:S,onChange:I,onFocus:q,onBlur:_,isSelected:$,onValueChange:C,...L},F)=>{const{theme:m}=A.useTheme(),[W,B]=x.useState(S||!1),[T,w]=x.useState(!1),y=x.useRef(null);x.useImperativeHandle(F,()=>y.current);const k=$!==void 0?$:b!==void 0?b:W,D=l=>{const v=l.target.checked;b===void 0&&$===void 0&&B(v),C&&C(v),I?.(l)},H=l=>{w(!0),q?.(l)},M=l=>{w(!1),_?.(l)},P={color:r,size:o,radius:n,isInvalid:g,isDisabled:h,isChecked:k,isIndeterminate:u,isFocused:T,className:f,css:c};return s.jsxs(J,{theme:m,isDisabled:h,children:[s.jsxs(Q,{theme:m,...P,children:[s.jsx(K,{ref:y,type:"checkbox",checked:k,disabled:h,onChange:D,onFocus:H,onBlur:M,...L}),(k||u)&&s.jsx(Y,{size:o,children:a||(u?s.jsx(X,{}):s.jsx(U,{}))})]}),(e||d)&&s.jsxs(Z,{theme:m,children:[e&&s.jsx(ee,{theme:m,size:o,isRequired:p,children:e}),d&&s.jsx(re,{theme:m,size:o,children:d})]})]})});z.displayName="Checkbox";exports.Checkbox=z;
//# sourceMappingURL=checkbox.cjs.map