@atom-learning/components 3.2.0 → 3.3.0-beta.0

package/dist/components/side-bar/SideBar.js

@@ -0,0 +1,2 @@
+import i from"react";import{useInteractOutside as f,useFocusWithin as B,useHover as y,usePress as g}from"react-aria";import{createTheme as w,styled as r}from"../../stitches.js";import{SideBarBrand as S,SideBarBrandLogo as E,SideBarBrandName as H,SideBarFooter as N,SideBarHeader as P,SideBarMain as W}from"./SideBarComponents.js";import{SideBarExpandableContext as k}from"./SideBarExpandableContext.js";const d="88px",l="256px",F=w({colors:{background:"white",border:"$grey200"}}),I=r("div",{height:"100svh",position:"sticky",top:"0",zIndex:1,variants:{type:{expandable:{width:d}}}}),D=r("div",{borderRight:"1px solid $border",boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0)",height:"100%",overflow:"hidden",willChange:"width","@allowMotion":{transition:"width 125ms ease-out, box-shadow 125ms ease-out"},variants:{type:{static:{},expandable:{}},isExpanded:{true:{width:l},false:{width:d}}},compoundVariants:[{isExpanded:!0,type:"expandable",css:{boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0.1)"}}]}),L=r("div",{bg:"$background",display:"flex",flexDirection:"column",height:"100%",width:l}),M=r("div",{bottom:0,left:0,position:"absolute",right:0,top:0,transition:"all",variants:{isVisible:{true:{visibility:"visible",transitionDelay:"0s"},false:{visibility:"hidden",transitionDelay:"50ms"}}}}),e=({className:p=F,children:h,type:t="expandable",...c})=>{const[o,a]=i.useState(t==="static"),s=i.useRef(null);f({ref:s,onInteractOutside:n=>a(!1)});const{focusWithinProps:m}=B({onFocusWithin:n=>a(!0),onBlurWithin:()=>a(!1)}),{hoverProps:x,isHovered:u}=y({onHoverStart:()=>a(!0),onHoverEnd:()=>a(!1)}),{pressProps:b}=g({onPress:n=>a(!0)}),v=t==="expandable"?{...m,...x,...b,ref:s}:{};return i.createElement(k.Provider,{value:{isExpanded:o}},i.createElement(I,{...c,className:p,type:t},i.createElement(D,{...v,isExpanded:o,type:t},i.createElement(L,null,h,t==="expandable"&&i.createElement(M,{isVisible:!u&&!o})))))};e.Brand=S,e.BrandLogo=E,e.BrandName=H,e.Footer=N,e.Header=P,e.Main=W,e.displayName="SideBar";export{e as SideBar};
+//# sourceMappingURL=SideBar.js.map

package/dist/components/side-bar/SideBar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport {\n  useFocusWithin,\n  useHover,\n  useInteractOutside,\n  usePress\n} from 'react-aria'\n\nimport { createTheme,styled } from '~/stitches'\n\nimport {\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader,\n  SideBarMain\n} from './SideBarComponents'\nimport { SideBarExpandableContext } from './SideBarExpandableContext'\n\nconst SIZE_COLLAPSED = '88px'\nconst SIZE_EXPANDED = '256px'\n\nconst light = createTheme({\n  colors: {\n    background: 'white',\n    border: '$grey200'\n  }\n})\n\nconst Root = styled('div', {\n  height: '100svh',\n  position: 'sticky',\n  top: '0',\n  zIndex: 1,\n  variants: {\n    type: {\n      expandable: { width: SIZE_COLLAPSED }\n    }\n  }\n})\n\nconst Wrapper = styled('div', {\n  borderRight: '1px solid $border',\n  boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0)',\n  height: '100%',\n  overflow: 'hidden',\n  willChange: 'width',\n  '@allowMotion': {\n    transition: 'width 125ms ease-out, box-shadow 125ms ease-out'\n  },\n  variants: {\n    type: {\n      static: {},\n      expandable: {}\n    },\n    isExpanded: {\n      true: { width: SIZE_EXPANDED },\n      false: { width: SIZE_COLLAPSED }\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      css: { boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0.1)' }\n    }\n  ]\n})\n\nconst Content = styled('div', {\n  bg: '$background',\n  display: 'flex',\n  flexDirection: 'column',\n  height: '100%',\n  width: SIZE_EXPANDED\n})\n\nconst PointerBlocker = styled('div', {\n  bottom: 0,\n  left: 0,\n  position: 'absolute',\n  right: 0,\n  top: 0,\n  transition: 'all',\n  variants: {\n    isVisible: {\n      true: { visibility: 'visible', transitionDelay: '0s' },\n      false: { visibility: 'hidden', transitionDelay: '50ms' }\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  type: 'expandable' | 'static'\n}\n\nexport const SideBar = ({\n  className = light,\n  children,\n  type = 'expandable',\n  ...props\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: (e) => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: (e) => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const { pressProps } = usePress({\n    onPress: (e) => setIsExpanded(true)\n  })\n\n  const expandableProps =\n    type === 'expandable'\n      ? { ...focusWithinProps, ...hoverProps, ...pressProps, ref }\n      : {}\n\n  return (\n    <SideBarExpandableContext.Provider value={{ isExpanded }}>\n      <Root {...props} className={className} type={type}>\n        <Wrapper {...expandableProps} isExpanded={isExpanded} type={type}>\n          <Content>\n            {children}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Wrapper>\n      </Root>\n    </SideBarExpandableContext.Provider>\n  )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Footer = SideBarFooter\nSideBar.Header = SideBarHeader\nSideBar.Main = SideBarMain\n\nSideBar.displayName = 'SideBar'\n"],"names":["SIZE_COLLAPSED","SIZE_EXPANDED","light","createTheme","Root","styled","Wrapper","Content","PointerBlocker","SideBar","className","children","type","props","isExpanded","setIsExpanded","React","ref","useInteractOutside","e","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","pressProps","usePress","expandableProps","SideBarExpandableContext","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarFooter","SideBarHeader","SideBarMain"],"mappings":"mZAoBA,MAAMA,EAAiB,OACjBC,EAAgB,QAEhBC,EAAQC,EAAY,CACxB,OAAQ,CACN,WAAY,QACZ,OAAQ,UACV,CACF,CAAC,EAEKC,EAAOC,EAAO,MAAO,CACzB,OAAQ,SACR,SAAU,SACV,IAAK,IACL,OAAQ,EACR,SAAU,CACR,KAAM,CACJ,WAAY,CAAE,MAAOL,CAAe,CACtC,CACF,CACF,CAAC,EAEKM,EAAUD,EAAO,MAAO,CAC5B,YAAa,oBACb,UAAW,qCACX,OAAQ,OACR,SAAU,SACV,WAAY,QACZ,eAAgB,CACd,WAAY,iDACd,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,GACR,WAAY,CAAA,CACd,EACA,WAAY,CACV,KAAM,CAAE,MAAOJ,CAAc,EAC7B,MAAO,CAAE,MAAOD,CAAe,CACjC,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,aACN,IAAK,CAAE,UAAW,sCAAuC,CAC3D,CACF,CACF,CAAC,EAEKO,EAAUF,EAAO,MAAO,CAC5B,GAAI,cACJ,QAAS,OACT,cAAe,SACf,OAAQ,OACR,MAAOJ,CACT,CAAC,EAEKO,EAAiBH,EAAO,MAAO,CACnC,OAAQ,EACR,KAAM,EACN,SAAU,WACV,MAAO,EACP,IAAK,EACL,WAAY,MACZ,SAAU,CACR,UAAW,CACT,KAAM,CAAE,WAAY,UAAW,gBAAiB,IAAK,EACrD,MAAO,CAAE,WAAY,SAAU,gBAAiB,MAAO,CACzD,CACF,CACF,CAAC,EAMYI,EAAU,CAAC,CACtB,UAAAC,EAAYR,EACZ,SAAAS,EACA,KAAAC,EAAO,gBACJC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAASJ,IAAS,QAAQ,EAC9DK,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAoBE,GAAMJ,EAAc,EAAK,CAC/C,CAAC,EACD,KAAM,CAAE,iBAAAK,CAAiB,EAAIC,EAAe,CAC1C,cAAgBF,GAAMJ,EAAc,EAAI,EACxC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAO,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMT,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EACK,CAAE,WAAAU,CAAW,EAAIC,EAAS,CAC9B,QAAUP,GAAMJ,EAAc,EAAI,CACpC,CAAC,EAEKY,EACJf,IAAS,aACL,CAAE,GAAGQ,EAAkB,GAAGE,EAAY,GAAGG,EAAY,IAAAR,CAAI,EACzD,CAAA,EAEN,OACED,EAAA,cAACY,EAAyB,SAAzB,CAAkC,MAAO,CAAE,WAAAd,CAAW,CACrDE,EAAAA,EAAA,cAACZ,EAAA,CAAM,GAAGS,EAAO,UAAWH,EAAW,KAAME,CAAAA,EAC3CI,EAAA,cAACV,EAAA,CAAS,GAAGqB,EAAiB,WAAYb,EAAY,KAAMF,CAC1DI,EAAAA,EAAA,cAACT,EAAA,KACEI,EACAC,IAAS,cACRI,EAAA,cAACR,EAAA,CAAe,UAAW,CAACe,GAAa,CAACT,CAAAA,CAAY,CAE1D,CACF,CACF,CACF,CAEJ,EAEAL,EAAQ,MAAQoB,EAChBpB,EAAQ,UAAYqB,EACpBrB,EAAQ,UAAYsB,EACpBtB,EAAQ,OAASuB,EACjBvB,EAAQ,OAASwB,EACjBxB,EAAQ,KAAOyB,EAEfzB,EAAQ,YAAc"}