@aic-kits/react 0.15.1 → 0.15.3

package/dist/components/Button/index.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { ButtonProps } from './types';
-export declare const Button: ({ disabled, icon, color, textColor, loading, onClick, rightIcon, corner, variant, size, style, "data-testid": testId, text, ...rest }: ButtonProps) => React.ReactElement;
+export declare const Button: ({ disabled, icon, color, textColor, loading, onClick, rightIcon, corner, variant, size, style, "data-testid": testId, text, ...boxProps }: ButtonProps) => React.ReactElement;
 export * from './utils';

package/dist/components/Button/types.d.ts

@@ -1,6 +1,7 @@
 import { Icon } from '@phosphor-icons/react';
 import { ButtonCorner, ButtonSize, ButtonVariant, Color } from '../../theme';
-export interface ButtonProps {
+import { BoxProps } from '../Box';
+export interface ButtonProps extends BoxProps {
     /**
      * Disable state of button.
      */

package/dist/index.cjs

@@ -110,12 +110,12 @@ See https://s-c.sh/2BAXzed for more info.`),window[gi]+=1);const Os=n=>({none:0,
 `,Mx=({visible:n,variant:o,animationDuration:i,children:a,...l})=>{const d=oe(),[p,y]=h.useState(n),m=h.useDeferredValue(n),w=h.useDeferredValue(p),C=d.__hd__.skeleton.animation.transition.backgroundDuration,S=d.__hd__.skeleton.animation.transition.contentFadeDuration;return h.useEffect(()=>{let A;return m?y(!0):A=setTimeout(()=>{y(!1)},C),()=>{A&&clearTimeout(A)}},[C,m]),b.jsxs(k,{...l,position:"relative",overflow:"hidden",children:[b.jsx(k,{fw:!0,fh:!0,position:"relative",opacity:n?0:1,transition:`opacity ${S}ms ease-in-out`,children:a}),(n||m||p||w)&&b.jsx(k,{absoluteFill:!0,opacity:n&&p?1:0,transition:`opacity ${C}ms ease-in-out`,children:b.jsx(Fx,{$variant:o,$duration:i,$visible:!0})})]})},Bd=({visible:n=!0,variant:o="rectangle",children:i,animationDuration:a=1500,...l})=>b.jsx(Mx,{visible:n,variant:o,animationDuration:a,...l,children:i}),Wx=de.p.attrs(({as:n})=>({as:n||"p"}))(({$themeFontSize:n,$themeFontWeight:o,$themeColor:i,$themeTypeface:a,theme:l,$textAlign:d,$textTransform:p,$textDecoration:y})=>{const m=l,w=At(o,S=>m.__hd__.text.fontWeights[S]),C={fontSize:At(n,S=>`${m.__hd__.text.fontSizes[S]}px`),lineHeight:At(n,S=>`${m.__hd__.text.lineHeights[S]}px`),letterSpacing:At(n,S=>`${m.__hd__.text.fontSizes[S]*.03}px`)};return ks({...C,fontFamily:At(a,S=>m.fonts[S]),fontWeight:w,color:At(i,S=>m.colors[S]),textAlign:d,textTransform:p,textDecoration:y,margin:0})}),Fd=[{pattern:/<strong>(.*?)<\/strong>/g,props:{fontWeight:"bold"}}],kx=(n,o,i)=>{if(typeof n!="string")return n;let a=0;const l=[];return Fd.forEach(({pattern:d,props:p})=>{Array.from(n.matchAll(d)).forEach(m=>{const[w,C]=m,S=m.index;S>a&&l.push(n.slice(a,S)),l.push(h.createElement(o,{...i,...p,key:S},C)),a=S+w.length})}),a<n.length&&l.push(n.slice(a)),l},Dx=n=>function(i){const{useRichText:a=!1,children:l}=i;if(!a||typeof l!="string")return b.jsx(n,{...i,children:l});const d=kx(l.toString(),n,i);return b.jsx(n,{...i,children:d})};function jx({children:n,fontSize:o="medium",fontWeight:i="regular",color:a="grey900",typeface:l="neutral",textAlign:d,textTransform:p,textDecoration:y,"data-testid":m,as:w="p",...C},S){return b.jsx(Wx,{...C,$themeFontSize:o,$themeFontWeight:i,$themeColor:a,$themeTypeface:l,$textAlign:d,$textTransform:p,$textDecoration:y,ref:S,"data-testid":m,as:w,children:n})}const Nx=h.forwardRef(jx),Oe=Dx(Nx),Hx=()=>b.jsxs(k,{display:"flex",alignItems:"center",justifyContent:"center",gap:"2xs",children:[b.jsx(js,{art:zd,size:"sm",color:"grey600"}),b.jsx(Oe,{fontSize:"xs",color:"grey600",children:"Error"})]}),Zx=de.img`
   width: 100%;
   height: 100%;
-  object-fit: ${({objectFit:n})=>n};
-  object-position: ${({objectPosition:n})=>n};
-  aspect-ratio: ${({aspectRatio:n})=>n};
-  mix-blend-mode: ${({mixBlendMode:n})=>n};
-  image-rendering: ${({imageRendering:n})=>n};
-`,Md=({art:n,width:o,height:i,style:a,"data-testid":l,alt:d,fallback:p,useSkeleton:y=!0,objectFit:m,objectPosition:w,aspectRatio:C,mixBlendMode:S,imageRendering:A,...T})=>{const L=oe(),[$,B]=h.useState(!0),[P,F]=h.useState(!1),j=L.__hd__.art.defaultImageSize||L.__hd__.art.defaultSize,W=ke(L,o??j),H=ke(L,i??j),Z=T.r||T.radius||T.borderRadius||"md",D=zx(n);h.useEffect(()=>{!ge.isNil(D)&&D!==n&&(B(!0),F(!1))},[n,D]);const se=()=>{B(!1)},ne=()=>{F(!0),B(!1)};return b.jsx(k,{display:"flex",alignItems:"center",justifyContent:"center",width:W,height:H,overflow:"hidden",style:a,"data-testid":l,...T,children:b.jsxs(Bd,{visible:$,width:W,height:H,r:Z,children:[P&&b.jsxs(k,{width:W,height:H,r:Z,display:"flex",alignItems:"center",justifyContent:"center",bgColor:"grey200",children:[!$&&p,!$&&!p&&!d&&b.jsx(Oe,{fontSize:"xs",color:"grey600",children:p||d}),!$&&!p&&!d&&Hx()]}),!P&&(!En()||!y)&&b.jsx(Zx,{src:n,alt:ge.isString(d)?d:"Image",onLoad:se,onError:ne,"data-testid":l?`${l}-image`:void 0,objectFit:m,objectPosition:w,aspectRatio:C,mixBlendMode:S,imageRendering:A}),!P&&En()&&y&&d]})})},Wd=({art:n,width:o,height:i,style:a,"data-testid":l,...d})=>{const p=oe(),y=p.__hd__.art.defaultSvgSize||p.__hd__.art.defaultSize,m=ke(p,o??y),w=ke(p,i??y);return b.jsx(k,{display:"flex",alignItems:"center",justifyContent:"center",width:m,height:w,overflow:"hidden",style:a,"data-testid":l,dangerouslySetInnerHTML:{__html:n},...d})},Tt=n=>{const{art:o,type:i}=n;return i==="image"||ge.isString(o)&&Sd(o)?b.jsx(Md,{...n}):i==="svg"||ge.isString(o)&&Cd(o)?b.jsx(Wd,{...n}):i==="emoji"||ge.isString(o)&&wd(o)?b.jsx($d,{...n}):i==="icon"||ge.isString(o)&&bd(o)?b.jsx(js,{...n}):i==="brand"?b.jsx(Ed,{...n}):b.jsx(b.Fragment,{})};function kd(n){const[o,i]=h.useState(()=>(En(),!1));return h.useEffect(()=>{if(En())return;const a=window.matchMedia(n),l=d=>{i(d.matches)};return a.addEventListener?a.addEventListener("change",l):a.addListener(l),i(a.matches),()=>{a.removeEventListener?a.removeEventListener("change",l):a.removeListener(l)}},[n]),o}const Ux=(n="xl")=>{const[o,i]=h.useState(()=>(typeof window>"u"||!window.matchMedia,n));return h.useEffect(()=>{if(En())return;const l=["xl","lg","md","sm"].map(y=>({key:y,mql:window.matchMedia(`(min-width: ${wr[y]}px)`)})),d=()=>{for(const{key:y,mql:m}of l)if(m.matches)return y;return"xs"},p=()=>{i(d())};return p(),l.forEach(({mql:y})=>{y.addEventListener?y.addEventListener("change",p):y.addListener(p)}),()=>{l.forEach(({mql:y})=>{y.removeEventListener?y.removeEventListener("change",p):y.removeListener(p)})}},[]),o},Vx=de(k)`
+  object-fit: ${({$objectFit:n})=>n};
+  object-position: ${({$objectPosition:n})=>n};
+  aspect-ratio: ${({$aspectRatio:n})=>n};
+  mix-blend-mode: ${({$mixBlendMode:n})=>n};
+  image-rendering: ${({$imageRendering:n})=>n};
+`,Md=({art:n,width:o,height:i,style:a,"data-testid":l,alt:d,fallback:p,useSkeleton:y=!0,objectFit:m,objectPosition:w,aspectRatio:C,mixBlendMode:S,imageRendering:A,...T})=>{const L=oe(),[$,B]=h.useState(!0),[P,F]=h.useState(!1),j=L.__hd__.art.defaultImageSize||L.__hd__.art.defaultSize,W=ke(L,o??j),H=ke(L,i??j),Z=T.r||T.radius||T.borderRadius||"md",D=zx(n);h.useEffect(()=>{!ge.isNil(D)&&D!==n&&(B(!0),F(!1))},[n,D]);const se=()=>{B(!1)},ne=()=>{F(!0),B(!1)};return b.jsx(k,{display:"flex",alignItems:"center",justifyContent:"center",width:W,height:H,overflow:"hidden",style:a,"data-testid":l,...T,children:b.jsxs(Bd,{visible:$,width:W,height:H,r:Z,children:[P&&b.jsxs(k,{width:W,height:H,r:Z,display:"flex",alignItems:"center",justifyContent:"center",bgColor:"grey200",children:[!$&&p,!$&&!p&&!d&&b.jsx(Oe,{fontSize:"xs",color:"grey600",children:p||d}),!$&&!p&&!d&&Hx()]}),!P&&(!En()||!y)&&b.jsx(Zx,{src:n,alt:ge.isString(d)?d:"Image",onLoad:se,onError:ne,"data-testid":l?`${l}-image`:void 0,$objectFit:m,$objectPosition:w,$aspectRatio:C,$mixBlendMode:S,$imageRendering:A}),!P&&En()&&y&&d]})})},Wd=({art:n,width:o,height:i,style:a,"data-testid":l,...d})=>{const p=oe(),y=p.__hd__.art.defaultSvgSize||p.__hd__.art.defaultSize,m=ke(p,o??y),w=ke(p,i??y);return b.jsx(k,{display:"flex",alignItems:"center",justifyContent:"center",width:m,height:w,overflow:"hidden",style:a,"data-testid":l,dangerouslySetInnerHTML:{__html:n},...d})},Tt=n=>{const{art:o,type:i}=n;return i==="image"||ge.isString(o)&&Sd(o)?b.jsx(Md,{...n}):i==="svg"||ge.isString(o)&&Cd(o)?b.jsx(Wd,{...n}):i==="emoji"||ge.isString(o)&&wd(o)?b.jsx($d,{...n}):i==="icon"||ge.isString(o)&&bd(o)?b.jsx(js,{...n}):i==="brand"?b.jsx(Ed,{...n}):b.jsx(b.Fragment,{})};function kd(n){const[o,i]=h.useState(()=>(En(),!1));return h.useEffect(()=>{if(En())return;const a=window.matchMedia(n),l=d=>{i(d.matches)};return a.addEventListener?a.addEventListener("change",l):a.addListener(l),i(a.matches),()=>{a.removeEventListener?a.removeEventListener("change",l):a.removeListener(l)}},[n]),o}const Ux=(n="xl")=>{const[o,i]=h.useState(()=>(typeof window>"u"||!window.matchMedia,n));return h.useEffect(()=>{if(En())return;const l=["xl","lg","md","sm"].map(y=>({key:y,mql:window.matchMedia(`(min-width: ${wr[y]}px)`)})),d=()=>{for(const{key:y,mql:m}of l)if(m.matches)return y;return"xs"},p=()=>{i(d())};return p(),l.forEach(({mql:y})=>{y.addEventListener?y.addEventListener("change",p):y.addListener(p)}),()=>{l.forEach(({mql:y})=>{y.removeEventListener?y.removeEventListener("change",p):y.removeListener(p)})}},[]),o},Vx=de(k)`
   position: absolute;
   top: 0;
   left: 0;
@@ -215,7 +215,7 @@ See https://s-c.sh/2BAXzed for more info.`),window[gi]+=1);const Os=n=>({none:0,
       ${n==="text"?`color: ${o.colors.primary};`:""}
     `}
   }
-`,Cs=({disabled:n=!1,icon:o,color:i,textColor:a,loading:l=!1,onClick:d,rightIcon:p,corner:y="circle",variant:m="solid",size:w="md",style:C,"data-testid":S,text:A,...T})=>{var lt;const L=oe(),$=L.__hd__.button,B=$.defaultColor||"primary",P=i||B,F=((lt=$.variants)==null?void 0:lt[m])||{},j=$.sizes[w],W=n||l,H=h.useMemo(()=>W&&m==="solid"?"disabled":m==="solid"?P:F.bgColor||"transparent",[P,W,m,F.bgColor]),Z=h.useMemo(()=>ki(L,P,a,m,W),[L,P,a,m,W]),D=It=>{n||l||d==null||d(It)},se=m==="text"?"none":j.paddingHorizontal,ne=m==="text"?"none":j.paddingVertical,fe=j.fontSize,xe=j.iconSize,Xe=$.iconSpacing||"xs",Le=b.jsxs(k,{display:"flex",alignItems:"center",gap:Xe,children:[o&&b.jsx(iu,{$themePosition:"left",$iconSpacing:Xe,children:b.jsx(ou,{$themeColor:P,$themeTextColor:a,$variant:m,$disabled:W,$iconSize:xe,type:"icon",art:o,weight:j.iconWeight,size:xe})}),b.jsx(Kx,{$themeColor:P,$themeTextColor:a,$themeFontSize:fe,$themeFontWeight:j.fontWeight,$disabled:W,$variant:m,as:"span",children:A}),p&&b.jsx(iu,{$themePosition:"right",$iconSpacing:Xe,children:b.jsx(ou,{$themeColor:P,$themeTextColor:a,$variant:m,$disabled:W,$iconSize:xe,weight:j.iconWeight,type:"icon",art:p,size:xe})})]});return b.jsx(_t,{onClick:D,style:C,"data-testid":S,flex:T.flex,children:b.jsx(Hs,{$backgroundColor:H,$paddingHorizontal:se,$paddingVertical:ne,$borderRadius:$.squircleBorderRadii[y],$borderWidth:j.borderWidth,$disabled:W,$variant:m,$color:P,$size:w,children:b.jsx(Dd,{size:"small",color:Z,loading:l,display:"flex",alignItems:"center",justifyContent:"center",children:Le})})})},qx=de(k)`
+`,Cs=({disabled:n=!1,icon:o,color:i,textColor:a,loading:l=!1,onClick:d,rightIcon:p,corner:y="circle",variant:m="solid",size:w="md",style:C,"data-testid":S,text:A,...T})=>{var lt;const L=oe(),$=L.__hd__.button,B=$.defaultColor||"primary",P=i||B,F=((lt=$.variants)==null?void 0:lt[m])||{},j=$.sizes[w],W=n||l,H=h.useMemo(()=>W&&m==="solid"?"disabled":m==="solid"?P:F.bgColor||"transparent",[P,W,m,F.bgColor]),Z=h.useMemo(()=>ki(L,P,a,m,W),[L,P,a,m,W]),D=It=>{n||l||d==null||d(It)},se=m==="text"?"none":j.paddingHorizontal,ne=m==="text"?"none":j.paddingVertical,fe=j.fontSize,xe=j.iconSize,Xe=$.iconSpacing||"xs",Le=b.jsxs(k,{display:"flex",alignItems:"center",gap:Xe,children:[o&&b.jsx(iu,{$themePosition:"left",$iconSpacing:Xe,children:b.jsx(ou,{$themeColor:P,$themeTextColor:a,$variant:m,$disabled:W,$iconSize:xe,type:"icon",art:o,weight:j.iconWeight,size:xe})}),b.jsx(Kx,{$themeColor:P,$themeTextColor:a,$themeFontSize:fe,$themeFontWeight:j.fontWeight,$disabled:W,$variant:m,as:"span",children:A}),p&&b.jsx(iu,{$themePosition:"right",$iconSpacing:Xe,children:b.jsx(ou,{$themeColor:P,$themeTextColor:a,$variant:m,$disabled:W,$iconSize:xe,weight:j.iconWeight,type:"icon",art:p,size:xe})})]});return b.jsx(_t,{onClick:D,style:C,"data-testid":S,...T,children:b.jsx(Hs,{$backgroundColor:H,$paddingHorizontal:se,$paddingVertical:ne,$borderRadius:$.squircleBorderRadii[y],$borderWidth:j.borderWidth,$disabled:W,$variant:m,$color:P,$size:w,children:b.jsx(Dd,{size:"small",color:Z,loading:l,display:"flex",alignItems:"center",justifyContent:"center",children:Le})})})},qx=de(k)`
   background-color: ${({theme:n,$color:o})=>n.colors[o]};
   ${({$orientation:n,$thickness:o})=>n==="horizontal"?`
           height: ${o}px;