@kosdev-code/base-ui-components 0.1.0-dev.5596 → 0.1.0-dev.5605

package/components/molecules/form/components/form-input.d.ts

@@ -2,11 +2,11 @@ import { BaseFormFieldProps } from '../common/types';
 import { InputProps } from '../../../atoms';
 import { FieldPath, FieldValues } from 'react-hook-form';
 
-export type FormInputProps<T extends FieldValues = FieldValues, N extends FieldPath<T> = FieldPath<T>> = BaseFormFieldProps<T, N> & Pick<InputProps, "type" | "className" | "placeholder" | "prefixIconId" | "prefixIconColor" | "suffixIconColor" | "suffixIconId" | "autoFocus"> & {
+export type FormInputProps<T extends FieldValues = FieldValues, N extends FieldPath<T> = FieldPath<T>> = BaseFormFieldProps<T, N> & Pick<InputProps, "type" | "className" | "placeholder" | "prefixIconId" | "prefixIconColor" | "suffixIconColor" | "suffixIconId" | "suffixIcon" | "autoFocus"> & {
     autoTrim?: boolean;
     bold?: boolean;
 };
-export declare const FormInput: <T extends FieldValues = FieldValues, N extends FieldPath<T> = FieldPath<T>>(props: BaseFormFieldProps<T, N> & Pick<InputProps, "autoFocus" | "className" | "placeholder" | "type" | "prefixIconId" | "prefixIconColor" | "suffixIconColor" | "suffixIconId"> & {
+export declare const FormInput: <T extends FieldValues = FieldValues, N extends FieldPath<T> = FieldPath<T>>(props: BaseFormFieldProps<T, N> & Pick<InputProps, "autoFocus" | "className" | "placeholder" | "type" | "prefixIconId" | "prefixIconColor" | "suffixIconColor" | "suffixIcon" | "suffixIconId"> & {
     autoTrim?: boolean | undefined;
     bold?: boolean | undefined;
 } & import('react').RefAttributes<HTMLInputElement>) => import('react').ReactNode;

package/components/molecules/form/components/form-input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-input.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/libraries/base-ui-components/src/components/molecules/form/components/form-input.tsx"],"names":[],"mappings":";AAIA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,MAAM,cAAc,CACxB,CAAC,SAAS,WAAW,GAAG,WAAW,EACnC,CAAC,SAAS,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,IACnC,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC1B,IAAI,CACF,UAAU,EACR,MAAM,GACN,WAAW,GACX,aAAa,GACb,cAAc,GACd,iBAAiB,GACjB,iBAAiB,GACjB,cAAc,GACd,WAAW,CACd,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAuF7C,eAAO,MAAM,SAAS;;;iFAAoC,CAAC"}
+{"version":3,"file":"form-input.d.ts","sourceRoot":"","sources":["../../../../../../../../packages/libraries/base-ui-components/src/components/molecules/form/components/form-input.tsx"],"names":[],"mappings":";AAIA,OAAO,EAGL,KAAK,SAAS,EACd,KAAK,WAAW,EACjB,MAAM,iBAAiB,CAAC;AACzB,OAAO,EAAS,KAAK,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAKxD,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,MAAM,cAAc,CACxB,CAAC,SAAS,WAAW,GAAG,WAAW,EACnC,CAAC,SAAS,SAAS,CAAC,CAAC,CAAC,GAAG,SAAS,CAAC,CAAC,CAAC,IACnC,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,GAC1B,IAAI,CACF,UAAU,EACR,MAAM,GACN,WAAW,GACX,aAAa,GACb,cAAc,GACd,iBAAiB,GACjB,iBAAiB,GACjB,cAAc,GACd,YAAY,GACZ,WAAW,CACd,GAAG;IAAE,QAAQ,CAAC,EAAE,OAAO,CAAC;IAAC,IAAI,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAyF7C,eAAO,MAAM,SAAS;;;iFAAoC,CAAC"}

package/index.cjs

@@ -1308,7 +1308,7 @@
   width: 100%;
   border-bottom: ${sr("border-width")} solid
     ${sr("border-color")};
-`,[ne]=z(["input"]),It=d.forwardRef(({className:e,type:t,prefixIconId:o,prefixIconColor:n,prefixSize:r,isSmall:s,autoCapitalize:l="off",autoComplete:a="off",autoCorrect:u="off",suffixIconColor:h,suffixIcon:p,suffixIconId:f,suffixSize:m,onSuffixIconClick:x,onEnter:b,onKeyDown:y,onClear:w,...v},$)=>{const C=t==="password",[S,k]=d.useState(!1),[I,j]=d.useState(t),_=d.useCallback(()=>{j(S?"password":"text"),k(!S)},[S]),B=U=>{U.key==="Enter"&&(b==null||b()),y==null||y(U)};if(d.useEffect(()=>{j(t)},[t]),w&&C)throw new Error("Password inputs cannot have an onClear handler.");if(p&&C)throw new Error("Password inputs cannot have a suffix icon.");if(w&&p)throw new Error("Inputs with an onClear handler cannot have a suffix icon.");return i.jsx(M.ClassNames,{children:({cx:U})=>i.jsxs(Fd,{children:[i.jsx(Ad,{type:I,className:U(e,{isSmall:s,hasLeftIcon:!!o,hasRightIcon:!!C||!!f}),ref:$,autoCapitalize:C?"off":l,autoComplete:C?"current-password":a,autoCorrect:C?"off":u,onKeyDown:B,...v}),o&&i.jsx(Ld,{iconId:o,color:n||"black",size:r||"sm"}),(C||!!f||!!p||w&&!!v.value)&&i.jsx(Bd,{children:p||(f?i.jsx(F,{iconId:f,color:h??"black",size:m||"sm",onClick:x}):w?i.jsx(ie,{iconId:"Close",size:"sm",color:"black",onClick:w}):i.jsx(ie,{onClick:_,iconId:S?"Eye":"EyeInvisible",size:"sm",color:n??"black"}))})]})})}),Fd=g.div`
+`,[ne]=z(["input"]),It=d.forwardRef(({className:e,type:t,prefixIconId:o,prefixIconColor:n,prefixSize:r,isSmall:s,autoCapitalize:l="off",autoComplete:a="off",autoCorrect:u="off",suffixIconColor:h,suffixIcon:p,suffixIconId:f,suffixSize:m,onSuffixIconClick:x,onEnter:b,onKeyDown:y,onClear:w,...v},$)=>{const C=t==="password",[S,k]=d.useState(!1),[I,j]=d.useState(t),_=d.useCallback(()=>{j(S?"password":"text"),k(!S)},[S]),B=U=>{U.key==="Enter"&&(b==null||b()),y==null||y(U)};if(d.useEffect(()=>{j(t)},[t]),w&&C)throw new Error("Password inputs cannot have an onClear handler.");if(p&&C)throw new Error("Password inputs cannot have a suffix icon.");if(w&&p)throw new Error("Inputs with an onClear handler cannot have a suffix icon.");return i.jsx(M.ClassNames,{children:({cx:U})=>i.jsxs(Fd,{children:[i.jsx(Ad,{type:I,className:U(e,{isSmall:s,hasLeftIcon:!!o,hasRightIcon:!!C||!!f||!!p}),ref:$,autoCapitalize:C?"off":l,autoComplete:C?"current-password":a,autoCorrect:C?"off":u,onKeyDown:B,...v}),o&&i.jsx(Ld,{iconId:o,color:n||"black",size:r||"sm"}),(C||!!f||!!p||w&&!!v.value)&&i.jsx(Bd,{children:p||(f?i.jsx(F,{iconId:f,color:h??"black",size:m||"sm",onClick:x}):w?i.jsx(ie,{iconId:"Close",size:"sm",color:"black",onClick:w}):i.jsx(ie,{onClick:_,iconId:S?"Eye":"EyeInvisible",size:"sm",color:n??"black"}))})]})})}),Fd=g.div`
   width: 100%;
   height: fit-content;
   position: relative;
@@ -2126,7 +2126,7 @@
   -webkit-user-select: none;
 `,xp=g(_t)`
   max-height: 300px;
-`,yp=({name:e,disabled:t,label:o,handleError:n,children:r,placeholder:s,prefixIcon:l,prefixIconColor:a,className:u,readOnly:h,onSelectionChange:p,...f})=>{const{control:m}=q.useFormContext(),{field:{ref:x,...b},fieldState:{error:y}}=q.useController({name:e,control:m,rules:f,disabled:t}),w=d.useId(),{onChange:v}=b,$=d.useCallback(C=>{v(C),p&&p(C)},[v,p]);return i.jsx(M.ClassNames,{children:({cx:C})=>i.jsxs(nt,{children:[i.jsxs(Ue,{className:C({hasLabel:!!o}),children:[o&&i.jsx(Ce,{formItemId:w,isValid:!y,required:!!f.required,children:o}),i.jsx(ti,{disabled:t||h,onSelect:$,className:u,id:w,value:b.value,children:r})]}),!!n&&i.jsx(Ve,{handleError:n,name:e,hasLabel:!!o}),i.jsx(Dn,{ref:x,...b})]})})},vp=({name:e,disabled:t,label:o,placeholder:n,type:r,className:s,handleError:l,prefixIconId:a,prefixIconColor:u,suffixIconColor:h,suffixIconId:p,autoFocus:f,readOnly:m,bold:x,...b},y)=>{const{control:w}=q.useFormContext(),{field:{ref:v,...$},fieldState:{error:C}}=q.useController({name:e,control:w,rules:b,disabled:t}),S=d.useId(),k=O.useMergeRefs([v,y]);return i.jsx(M.ClassNames,{children:({cx:I})=>i.jsxs(nt,{children:[i.jsxs(Ue,{className:I({hasLabel:!!o}),children:[o&&i.jsx(Ce,{formItemId:S,isValid:!C,required:!!b.required,children:o}),i.jsx(It,{...$,onChange:j=>{b.autoTrim?$.onChange(j.target.value.trim()):$.onChange(j.target.value)},id:S,type:r,autoFocus:f,placeholder:n,ref:k,autoComplete:"off",prefixIconColor:u,prefixIconId:a,suffixIconId:p,suffixIconColor:h,className:I(s,"form-input"),"aria-invalid":!!C,readOnly:m})]}),!!l&&i.jsx(Ve,{handleError:l,name:e,hasLabel:!!o})]})})},En=$t(vp),kp=({areaField:e,name:t,disabled:o,readOnly:n,label:r,handleError:s,children:l,className:a,...u})=>{const{control:h}=q.useFormContext(),{field:p,fieldState:{error:f,...m}}=q.useController({name:t,control:h,rules:u,disabled:o}),x=d.useId(),b=e?ei:Ue;return i.jsx(M.ClassNames,{children:({cx:y})=>i.jsxs(nt,{className:a,children:[i.jsxs(b,{className:y("form-input-wrapper",{hasLabel:!!r}),children:[r&&i.jsx(Ce,{formItemId:x,isValid:!f,required:!!u.required,children:r}),l(p,{error:f,readOnly:n,...m})]}),!!s&&i.jsx(Ve,{handleError:s,name:t,hasLabel:!!r})]})})},wp=({name:e,disabled:t,label:o,className:n,handleError:r,readOnly:s,...l},a)=>{const{control:u}=q.useFormContext(),{field:{ref:h,...p},fieldState:{error:f}}=q.useController({name:e,control:u,rules:l,disabled:t}),m=d.useId(),x=O.useMergeRefs([h,a]),b=d.useCallback(y=>{y.target.blur(),p.onChange(y)},[p]);return i.jsx(M.ClassNames,{children:({cx:y})=>i.jsxs(nt,{children:[i.jsxs(Ue,{className:y({hasLabel:!!o}),children:[o&&i.jsx(Ce,{formItemId:m,isValid:!f,required:!!l.required,children:o}),i.jsx(jt,{checked:!!p.value,disabled:p.disabled||s,onChange:b,id:m,ref:x,className:y(n,"form-checkbox"),"aria-invalid":!!f})]}),!!r&&i.jsx(Ve,{handleError:r,name:e,hasLabel:!!o})]})})},Cp=$t(wp),[Pt]=z(["form"]),mr=({control:e,name:t,t:o,readOnly:n})=>{const{field:{onChange:r,value:s,disabled:l}}=q.useController({name:t,control:e,rules:{},disabled:!1}),a=d.useId();return i.jsxs($p,{children:[i.jsx(Sp,{isValid:!0,formItemId:a,children:(o==null?void 0:o(`access.${t==="locked"?"lock":"hide"}Label`))??t==="locked"?"Lock":"Hide"}),i.jsx(bo,{checked:s,readOnly:l||n,onChange:r,id:a})]})},$p=g.div`
+`,yp=({name:e,disabled:t,label:o,handleError:n,children:r,placeholder:s,prefixIcon:l,prefixIconColor:a,className:u,readOnly:h,onSelectionChange:p,...f})=>{const{control:m}=q.useFormContext(),{field:{ref:x,...b},fieldState:{error:y}}=q.useController({name:e,control:m,rules:f,disabled:t}),w=d.useId(),{onChange:v}=b,$=d.useCallback(C=>{v(C),p&&p(C)},[v,p]);return i.jsx(M.ClassNames,{children:({cx:C})=>i.jsxs(nt,{children:[i.jsxs(Ue,{className:C({hasLabel:!!o}),children:[o&&i.jsx(Ce,{formItemId:w,isValid:!y,required:!!f.required,children:o}),i.jsx(ti,{disabled:t||h,onSelect:$,className:u,id:w,value:b.value,children:r})]}),!!n&&i.jsx(Ve,{handleError:n,name:e,hasLabel:!!o}),i.jsx(Dn,{ref:x,...b})]})})},vp=({name:e,disabled:t,label:o,placeholder:n,type:r,className:s,handleError:l,prefixIconId:a,prefixIconColor:u,suffixIconColor:h,suffixIconId:p,suffixIcon:f,autoFocus:m,readOnly:x,bold:b,...y},w)=>{const{control:v}=q.useFormContext(),{field:{ref:$,...C},fieldState:{error:S}}=q.useController({name:e,control:v,rules:y,disabled:t}),k=d.useId(),I=O.useMergeRefs([$,w]);return i.jsx(M.ClassNames,{children:({cx:j})=>i.jsxs(nt,{children:[i.jsxs(Ue,{className:j({hasLabel:!!o}),children:[o&&i.jsx(Ce,{formItemId:k,isValid:!S,required:!!y.required,children:o}),i.jsx(It,{...C,onChange:_=>{y.autoTrim?C.onChange(_.target.value.trim()):C.onChange(_.target.value)},id:k,type:r,autoFocus:m,placeholder:n,ref:I,autoComplete:"off",prefixIconColor:u,prefixIconId:a,suffixIconId:p,suffixIconColor:h,suffixIcon:f,className:j(s,"form-input"),"aria-invalid":!!S,readOnly:x})]}),!!l&&i.jsx(Ve,{handleError:l,name:e,hasLabel:!!o})]})})},En=$t(vp),kp=({areaField:e,name:t,disabled:o,readOnly:n,label:r,handleError:s,children:l,className:a,...u})=>{const{control:h}=q.useFormContext(),{field:p,fieldState:{error:f,...m}}=q.useController({name:t,control:h,rules:u,disabled:o}),x=d.useId(),b=e?ei:Ue;return i.jsx(M.ClassNames,{children:({cx:y})=>i.jsxs(nt,{className:a,children:[i.jsxs(b,{className:y("form-input-wrapper",{hasLabel:!!r}),children:[r&&i.jsx(Ce,{formItemId:x,isValid:!f,required:!!u.required,children:r}),l(p,{error:f,readOnly:n,...m})]}),!!s&&i.jsx(Ve,{handleError:s,name:t,hasLabel:!!r})]})})},wp=({name:e,disabled:t,label:o,className:n,handleError:r,readOnly:s,...l},a)=>{const{control:u}=q.useFormContext(),{field:{ref:h,...p},fieldState:{error:f}}=q.useController({name:e,control:u,rules:l,disabled:t}),m=d.useId(),x=O.useMergeRefs([h,a]),b=d.useCallback(y=>{y.target.blur(),p.onChange(y)},[p]);return i.jsx(M.ClassNames,{children:({cx:y})=>i.jsxs(nt,{children:[i.jsxs(Ue,{className:y({hasLabel:!!o}),children:[o&&i.jsx(Ce,{formItemId:m,isValid:!f,required:!!l.required,children:o}),i.jsx(jt,{checked:!!p.value,disabled:p.disabled||s,onChange:b,id:m,ref:x,className:y(n,"form-checkbox"),"aria-invalid":!!f})]}),!!r&&i.jsx(Ve,{handleError:r,name:e,hasLabel:!!o})]})})},Cp=$t(wp),[Pt]=z(["form"]),mr=({control:e,name:t,t:o,readOnly:n})=>{const{field:{onChange:r,value:s,disabled:l}}=q.useController({name:t,control:e,rules:{},disabled:!1}),a=d.useId();return i.jsxs($p,{children:[i.jsx(Sp,{isValid:!0,formItemId:a,children:(o==null?void 0:o(`access.${t==="locked"?"lock":"hide"}Label`))??t==="locked"?"Lock":"Hide"}),i.jsx(bo,{checked:s,readOnly:l||n,onChange:r,id:a})]})},$p=g.div`
   display: flex;
   align-items: center;
   justify-content: flex-start;