@frank-auth/react
Version:
Flexible and customizable React UI components for Frank Authentication
159 lines (136 loc) • 6.52 kB
JavaScript
'use client';
;Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const l=require("react/jsx-runtime"),B=require("../../../theme/context.cjs"),D=require("../../../theme/styled.cjs"),o=require("@emotion/react"),P=require("@emotion/styled"),$=require("react"),v=r=>r&&r.__esModule?r:{default:r},m=v(P),V=v($),L=r=>{const{theme:e,variant:t="flat",color:p="primary",isInvalid:s,isFocused:u,isDisabled:n}=r,c=D.getColorVariant(e,p,500),a=e.colors.danger[500],i=s?a:c;switch(t){case"flat":return o.css`
background-color: ${e.colors.background.secondary};
border: 2px solid transparent;
&:hover:not(:disabled) {
background-color: ${e.colors.background.tertiary};
}
${u&&o.css`
background-color: ${e.colors.background.primary};
border-color: ${i};
`}
${s&&o.css`
border-color: ${a};
`}
${n&&o.css`
opacity: 0.5;
cursor: not-allowed;
`}
`;case"bordered":return o.css`
background-color: ${e.colors.background.primary};
border: 2px solid ${e.colors.border.primary};
&:hover:not(:disabled) {
border-color: ${e.colors.border.secondary};
}
${u&&o.css`
border-color: ${i};
`}
${s&&o.css`
border-color: ${a};
`}
${n&&o.css`
opacity: 0.5;
cursor: not-allowed;
background-color: ${e.colors.background.secondary};
`}
`;case"underlined":return o.css`
background-color: transparent;
border: none;
border-bottom: 2px solid ${e.colors.border.primary};
/* Fixed: Don't override border-radius here, let the radius function handle it */
&:hover:not(:disabled) {
border-bottom-color: ${e.colors.border.secondary};
}
${u&&o.css`
border-bottom-color: ${i};
`}
${s&&o.css`
border-bottom-color: ${a};
`}
${n&&o.css`
opacity: 0.5;
cursor: not-allowed;
`}
`;case"faded":return o.css`
background-color: ${e.colors.neutral[100]};
border: 2px solid ${e.colors.neutral[200]};
&:hover:not(:disabled) {
background-color: ${e.colors.neutral[50]};
border-color: ${e.colors.neutral[300]};
}
${u&&o.css`
background-color: ${e.colors.background.primary};
border-color: ${i};
`}
${s&&o.css`
border-color: ${a};
`}
${n&&o.css`
opacity: 0.5;
cursor: not-allowed;
`}
`;default:return o.css``}},N=r=>{const{theme:e,size:t="md"}=r;switch(t){case"sm":return o.css`
height: ${e.spacing[8]} ;
padding: 0 ${e.spacing[3]} ;
font-size: ${e.fontSizes.sm} ;
`;case"md":return o.css`
height: ${e.spacing[10]} ;
padding: 0 ${e.spacing[4]} ;
font-size: ${e.fontSizes.base} ;
`;case"lg":return o.css`
height: ${e.spacing[12]} ;
padding: 0 ${e.spacing[6]} ;
font-size: ${e.fontSizes.lg} ;
`;default:return o.css``}},O=r=>{const{theme:e,radius:t="md",variant:p}=r;if(p==="underlined"&&t==="md")return o.css`border-radius: 0 ;`;switch(t){case"none":return o.css`border-radius: ${e.borderRadius.none} ;`;case"sm":return o.css`border-radius: ${e.borderRadius.sm} ;`;case"md":return o.css`border-radius: ${e.borderRadius.md} ;`;case"lg":return o.css`border-radius: ${e.borderRadius.lg} ;`;case"full":return o.css`border-radius: ${e.borderRadius.full} ;`;default:return o.css`border-radius: ${e.borderRadius.md} ;`}},G=m.default.div`
position: relative;
display: flex;
align-items: center;
transition: all ${r=>r.theme.transitions.normal};
width: ${r=>r.fullWidth?"100%":"auto"};
/* Apply base styles first */
${L}
${N}
/* Apply radius styles last to ensure they take precedence */
${O}
/* Custom CSS prop - applied last */
${r=>r.css}
`,J=m.default.input`
flex: 1;
background: transparent;
border: none;
outline: none;
color: ${r=>r.theme.colors.text.primary};
font-family: inherit;
font-size: inherit;
padding: 0;
&::placeholder {
color: ${r=>r.theme.colors.text.tertiary};
}
&:disabled {
cursor: not-allowed;
}
`,K=m.default.div`
display: flex;
flex-direction: column;
gap: ${r=>r.theme.spacing[2]};
width: ${r=>r.fullWidth?"100%":"auto"};
`,Q=m.default.label`
color: ${r=>r.theme.colors.text.primary};
font-size: ${r=>{switch(r.size){case"sm":return r.theme.fontSizes.sm;case"lg":return r.theme.fontSizes.lg;default:return r.theme.fontSizes.base}}};
font-weight: ${r=>r.theme.fontWeights.medium};
${r=>r.isRequired&&o.css`
&::after {
content: ' *';
color: ${r.theme.colors.danger[500]};
}
`}
`,z=m.default.div`
font-size: ${r=>r.theme.fontSizes.sm};
color: ${r=>r.isError?r.theme.colors.danger[500]:r.theme.colors.text.secondary};
`,S=m.default.div`
display: flex;
align-items: center;
color: ${r=>r.theme.colors.text.tertiary};
${r=>r.position==="start"?o.css`margin-right: ${r.theme.spacing[2]};`:o.css`margin-left: ${r.theme.spacing[2]};`}
`,R=V.default.forwardRef(({variant:r="flat",color:e="primary",size:t="md",radius:p="md",label:s,placeholder:u,description:n,errorMessage:c,isInvalid:a=!1,isDisabled:i=!1,isRequired:w=!1,fullWidth:f=!1,startContent:h,endContent:g,className:I,css:j,labelPlacement:q="outside",onFocus:_,onBlur:C,...F},T)=>{const{theme:d}=B.useTheme(),[W,y]=$.useState(!1),x=$.useRef(null);$.useImperativeHandle(T,()=>x.current);const E=b=>{y(!0),_?.(b)},H=b=>{y(!1),C?.(b)},A={variant:r,color:e,size:t,radius:p,isInvalid:a||!!c,isDisabled:i,fullWidth:f,isFocused:W,className:I,css:j},k=l.jsxs(G,{theme:d,...A,children:[h&&l.jsx(S,{theme:d,position:"start",children:h}),l.jsx(J,{theme:d,ref:x,placeholder:u,disabled:i,onFocus:E,onBlur:H,...F}),g&&l.jsx(S,{theme:d,position:"end",children:g})]});return!s&&!n&&!c?k:l.jsxs(K,{theme:d,fullWidth:f,children:[s&&q==="outside"&&l.jsx(Q,{theme:d,isRequired:w,size:t,children:s}),k,(n||c)&&l.jsx(z,{theme:d,isError:!!c,children:c||n})]})});R.displayName="Input";exports.HelperText=z;exports.Input=R;
//# sourceMappingURL=input.cjs.map