@saas-ui/layout
Version:
Saas UI Layout components for Chakra UI
3 lines (2 loc) • 5.17 kB
JavaScript
import*as e from"react";import{useStyleConfig as t,Divider as a,chakra as r,createStylesContext as n,forwardRef as s,Icon as o,useMultiStyleConfig as i,omitThemingProps as l,Heading as c,Text as m,ButtonGroup as p,Spinner as d,Link as y}from"@chakra-ui/react";import{__DEV__ as f,cx as u}from"@chakra-ui/utils";import{motion as h,AnimatePresence as E}from"framer-motion";import{useLink as N}from"@saas-ui/provider";function _(){return _=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var a=arguments[t];for(var r in a)Object.prototype.hasOwnProperty.call(a,r)&&(e[r]=a[r])}return e},_.apply(this,arguments)}function b(e,t){if(null==e)return{};var a,r,n={},s=Object.keys(e);for(r=0;r<s.length;r++)t.indexOf(a=s[r])>=0||(n[a]=e[a]);return n}const v=["label","orientation"],x=n=>{const{label:s,orientation:o}=n,i=b(n,v),l=t("Divider",n),c=l.borderColor,m=_({content:'""',position:"relative",display:"inline-block"},"vertical"===o?{borderLeftWidth:"1px",borderColor:c,height:"50%",left:NaN}:{borderBottomWidth:"1px",borderColor:c,width:"50%",top:"50%"}),p=_({display:"flex",flexDirection:"vertical"===o?"column":"row",alignItems:"center",whiteSpace:"nowrap",color:c,_before:m,_after:m,fontSize:"md"},l,{border:0,borderLeftWidth:0,borderBottomWidth:0}),d=_({display:"inline-block",flexShrink:0,mx:2,overflow:"hidden",whiteSpace:"nowrap",textOverflow:"ellipsis"},"vertical"===o?{writingMode:"vertical-rl",textOrientation:"mixed"}:{});/*#__PURE__*/return e.createElement(a,_({as:s||"vertical"===o?"div":"hr",orientation:o,role:"separator"},i,{__css:p}),s&&/*#__PURE__*/e.createElement(r.span,{__css:d},s))};f&&(x.displayName="Divider");const g=["children","spacing","icon","title","description","actions","footer"],S=["children","spacing"],k=["spacing"],[w,C]=n("EmptyState"),L=t=>{const{children:a,spacing:n,icon:s,title:o,description:i,actions:l,footer:c}=t,m=b(t,g);/*#__PURE__*/return e.createElement(O,m,/*#__PURE__*/e.createElement(I,{spacing:n},s&&/*#__PURE__*/e.createElement(z,{as:s}),/*#__PURE__*/e.createElement(r.div,null,o&&/*#__PURE__*/e.createElement(D,null,o),i&&/*#__PURE__*/e.createElement(j,null,i)),a,l&&/*#__PURE__*/e.createElement(W,null,l),c&&/*#__PURE__*/e.createElement(B,null,c)))};f&&(L.displayName="EmptyState");const O=t=>{const{children:a}=t,n=b(t,S),s=i("EmptyState",t),o=l(n),c=_({display:"flex",flex:1,flexDirection:"column",alignItems:"center",justifyContent:"center"},s.container);/*#__PURE__*/return e.createElement(w,{value:s},/*#__PURE__*/e.createElement(r.div,_({},o,{__css:c,className:u("saas-empty-state",t.className)}),a))};f&&(O.displayName="EmptyStateContainer");const z=s((t,a)=>{const r=_({boxSize:10},C().icon);/*#__PURE__*/return e.createElement(o,_({ref:a,role:"presentation",sx:r},t,{className:u("saas-empty-state__icon",t.className)}))});f&&(z.displayName="EmptyStateIcon");const D=t=>{const a=_({mb:1},C().title);/*#__PURE__*/return e.createElement(c,_({sx:a,size:"md"},t,{className:u("saas-empty-state__title",t.className)}))};f&&(D.displayName="EmptyStateTitle");const j=t=>{const a=_({color:"muted",fontSize:"md"},C().description);/*#__PURE__*/return e.createElement(m,_({sx:a},t,{className:u("saas-empty-state__description",t.className)}))};f&&(j.displayName="EmptyStateDescription");const I=t=>{const a=b(t,k),n=_({},C().body);/*#__PURE__*/return e.createElement(r.div,_({__css:n},a,{className:u("saas-empty-state__body",t.className)}))};f&&(I.displayName="EmptyStateBody");const W=t=>{const a=C();/*#__PURE__*/return e.createElement(p,_({sx:a.actions},t,{className:u("saas-empty-state__actions",t.className)}))};f&&(W.displayName="EmptyStateActions");const B=t=>{const a=C();/*#__PURE__*/return e.createElement(r.footer,_({__css:a.footer},t,{className:u("saas-empty-state__footer",t.className)}))};f&&(B.displayName="EmptyStateFooter");const M=["children","isLoading","variant","size","colorScheme","color","emptyColor","thickness","speed","label","spinner","spacing"],T=r(h.div),A=a=>{const n=t("Loader",a),{children:s,isLoading:o=!0,size:i,colorScheme:l,color:c,emptyColor:m,thickness:p,speed:y,label:f,spinner:h,spacing:N=2}=a,v=b(a,M),x={size:i,colorScheme:l,color:c,emptyColor:m,thickness:p,speed:y,label:f},g=_({display:"flex",flexDirection:"column",alignItems:"center",justifyContent:"center","& > *:not(style) ~ *:not(style)":{marginTop:N}},n),S=e.useMemo(()=>!o,[]);let k=s;return"string"==typeof s&&(k=/*#__PURE__*/e.createElement(r.div,null,s)),/*#__PURE__*/e.createElement(E,null,o&&/*#__PURE__*/e.createElement(T,_({initial:{opacity:S?0:1},animate:{opacity:1},exit:{opacity:0}},v,{__css:g,className:u("saas-loader",a.className)}),h||/*#__PURE__*/e.createElement(d,x),k))};f&&(A.displayName="Loader");const F=A,P=["href"],q=s((t,a)=>{const r=N(),{href:n}=t,s=b(t,P),o=/*#__PURE__*/e.createElement(y,_({ref:a,href:n},s));return r?/*#__PURE__*/e.createElement(r,{href:n},o):o});f&&(q.displayName="Link");export{x as Divider,L as EmptyState,W as EmptyStateActions,I as EmptyStateBody,O as EmptyStateContainer,j as EmptyStateDescription,B as EmptyStateFooter,z as EmptyStateIcon,D as EmptyStateTitle,q as Link,A as Loader,F as Loading};
//# sourceMappingURL=index.modern.mjs.map