@atom-learning/components 6.0.0-beta.1 → 6.0.0-beta.10

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

@@ -1,2 +1,2 @@
-import t from"react";import{useInteractOutside as f,useFocusWithin as v,useHover as y}from"react-aria";import{createTheme as B,styled as r}from"../../stitches.js";import{SideBarBrand as g,SideBarBrandLogo as S,SideBarBrandName as w,SideBarHeader as E,SideBarBody as H,SideBarFooter as N}from"./SideBarComponents.js";import{SideBarContext as $}from"./SideBarContext.js";const n="5.5rem",D="16rem",F=B({colors:{background:"white",text:"$grey800",border:"$grey200"}}),I=r("div",{position:"sticky",zIndex:1,variants:{type:{static:{},expandable:{width:n}}}}),W=r("div",{bg:"$background",borderRight:"1px solid $border",boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0)",display:"flex",flexDirection:"column",height:"100%",overflow:"hidden",willChange:"width","@allowMotion":{transition:"width 125ms ease-out, box-shadow 125ms ease-out"},variants:{type:{static:{},expandable:{}},isExpanded:{true:{width:D},false:{width:n}}},compoundVariants:[{isExpanded:!0,type:"expandable",css:{boxShadow:"4px 0 4px -2px rgba(31, 31, 31, 0.1)"}}]}),k=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:l=F,children:p,type:a="expandable",offset:s="0px",css:c,...h})=>{const[o,i]=t.useState(a==="static"),d=t.useRef(null);f({ref:d,onInteractOutside:()=>i(!1)});const{focusWithinProps:m}=v({onFocusWithin:()=>i(!0),onBlurWithin:()=>i(!1)}),{hoverProps:x,isHovered:u}=y({onHoverStart:()=>i(!0),onHoverEnd:()=>i(!1)}),b=a==="expandable"?{...m,...x,onTouchEnd:()=>i(!0),ref:d}:{};return t.createElement($.Provider,{value:{isExpanded:o}},t.createElement(I,{...h,className:l,css:{height:`calc(100svh - ${s})`,top:s,...c},type:a},t.createElement(W,{...b,isExpanded:o,type:a},p,a==="expandable"&&t.createElement(k,{isVisible:!u&&!o}))))};e.Brand=g,e.BrandLogo=S,e.BrandName=w,e.Header=E,e.Body=H,e.Footer=N,e.displayName="SideBar";export{e as SideBar};
+import x from"clsx";import a from"react";import{useInteractOutside as v,useFocusWithin as B,useHover as y}from"react-aria";import{styled as i,Theme as g}from"../../styled.js";import{SideBarBrand as w,SideBarBrandLogo as E,SideBarBrandName as S,SideBarHeader as _,SideBarBody as H,SideBarFooter as N}from"./SideBarComponents.js";import{SideBarContext as k}from"./SideBarContext.js";const F={"--background":"white","--text":"var(--color-grey-800)","--border":"var(--color-grey-200)"},W=i("div",{base:["sticky","z-1"],variants:{type:{static:[],expandable:["w-22"]}}}),P=i("div",{base:["bg-(--background)","border-r","border-r-(--border)","shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]","flex","flex-col","h-full","overflow-hidden","will-change-width","motion-safe:duration-125","motion-safe:ease-out","motion-safe:transition-[shadow,width]"],variants:{type:{static:[],expandable:[]},isExpanded:{true:["w-[16rem]"],false:["w-22"]}},compoundVariants:[{isExpanded:!0,type:"expandable",class:["shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]"]}]}),T=i("div",{base:["bottom-0","left-0","absolute","right-0","top-0","transition-all"],variants:{isVisible:{true:["delay-0","visible"],false:["delay-50","invisible"]}}}),e=({theme:d,className:n,children:l,type:t="expandable",offset:p="0px",style:c,...m})=>{const[o,r]=a.useState(t==="static"),s=a.useRef(null);v({ref:s,onInteractOutside:()=>r(!1)});const{focusWithinProps:f}=B({onFocusWithin:()=>r(!0),onBlurWithin:()=>r(!1)}),{hoverProps:u,isHovered:b}=y({onHoverStart:()=>r(!0),onHoverEnd:()=>r(!1)}),h=t==="expandable"?{...f,...u,onTouchEnd:()=>r(!0),ref:s}:{};return a.createElement(k.Provider,{value:{isExpanded:o}},a.createElement(g,{theme:d||F},a.createElement(W,{...m,style:{...c,"--offset":p},type:t,className:x("h-[calc(100svh-var(--offset))]","top-(--offset)",n)},a.createElement(P,{...h,isExpanded:o,type:t},l,t==="expandable"&&a.createElement(T,{isVisible:!b&&!o})))))};e.Brand=w,e.BrandLogo=E,e.BrandName=S,e.Header=_,e.Body=H,e.Footer=N,e.displayName="SideBar";export{e as SideBar};
 //# sourceMappingURL=SideBar.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { createTheme, styled } from '~/stitches'\n\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst SIZE_COLLAPSED = '5.5rem'\nconst SIZE_EXPANDED = '16rem'\n\nconst light = createTheme({\n  colors: {\n    background: 'white',\n    text: '$grey800',\n    border: '$grey200'\n  }\n})\n\nconst Root = styled('div', {\n  position: 'sticky',\n  zIndex: 1,\n  variants: {\n    type: {\n      static: {},\n      expandable: { width: SIZE_COLLAPSED }\n    }\n  }\n})\n\nconst Content = styled('div', {\n  bg: '$background',\n  borderRight: '1px solid $border',\n  boxShadow: '4px 0 4px -2px rgba(31, 31, 31, 0)',\n  display: 'flex',\n  flexDirection: 'column',\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 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  offset?: number | string\n}\n\nexport const SideBar = ({\n  className = light,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  css,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  return (\n    <SideBarContext.Provider value={{ isExpanded }}>\n      <Root\n        {...rest}\n        className={className}\n        css={{ height: `calc(100svh - ${offset})`, top: offset, ...css }}\n        type={type}\n      >\n        <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n          {children}\n          {/**\n           * When the SideBar is collapsed, ensure that the initial tap event\n           * is used to expand the nav first before making the items available\n           */}\n          {type === 'expandable' && (\n            <PointerBlocker isVisible={!isHovered && !isExpanded} />\n          )}\n        </Content>\n      </Root>\n    </SideBarContext.Provider>\n  )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"names":["SIZE_COLLAPSED","SIZE_EXPANDED","light","createTheme","Root","styled","Content","PointerBlocker","SideBar","className","children","type","offset","css","rest","isExpanded","setIsExpanded","React","ref","useInteractOutside","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"iXAeA,MAAMA,EAAiB,SACjBC,EAAgB,QAEhBC,EAAQC,EAAY,CACxB,OAAQ,CACN,WAAY,QACZ,KAAM,WACN,OAAQ,UACV,CACF,CAAC,EAEKC,EAAOC,EAAO,MAAO,CACzB,SAAU,SACV,OAAQ,EACR,SAAU,CACR,KAAM,CACJ,OAAQ,CACR,EAAA,WAAY,CAAE,MAAOL,CAAe,CACtC,CACF,CACF,CAAC,EAEKM,EAAUD,EAAO,MAAO,CAC5B,GAAI,cACJ,YAAa,oBACb,UAAW,qCACX,QAAS,OACT,cAAe,SACf,OAAQ,OACR,SAAU,SACV,WAAY,QACZ,eAAgB,CACd,WAAY,iDACd,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,CAAA,EACR,WAAY,CACd,CAAA,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,EAAiBF,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,EAMYG,EAAU,CAAC,CACtB,UAAAC,EAAYP,EACZ,SAAAQ,EACA,KAAAC,EAAO,aACP,OAAAC,EAAS,MACT,IAAAC,KACGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAASN,IAAS,QAAQ,EAC9DO,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAmB,IAAMF,EAAc,EAAK,CAC9C,CAAC,EACD,KAAM,CAAE,iBAAAI,CAAiB,EAAIC,EAAe,CAC1C,cAAe,IAAML,EAAc,EAAI,EACvC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAM,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMR,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKS,EACJd,IAAS,aACL,CACE,GAAGS,EACH,GAAGE,EAPT,WAAY,IAAMN,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,CAEN,EAAA,OACED,EAAA,cAACS,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAX,CAAW,CAC3CE,EAAAA,EAAA,cAACb,EAAA,CACE,GAAGU,EACJ,UAAWL,EACX,IAAK,CAAE,OAAQ,iBAAiBG,KAAW,IAAKA,EAAQ,GAAGC,CAAI,EAC/D,KAAMF,GAENM,EAAA,cAACX,EAAA,CAAS,GAAGmB,EAAiB,WAAYV,EAAY,KAAMJ,CAAAA,EACzDD,EAKAC,IAAS,cACRM,EAAA,cAACV,EAAA,CAAe,UAAW,CAACgB,GAAa,CAACR,CAAAA,CAAY,CAE1D,CACF,CACF,CAEJ,EAEAP,EAAQ,MAAQmB,EAChBnB,EAAQ,UAAYoB,EACpBpB,EAAQ,UAAYqB,EACpBrB,EAAQ,OAASsB,EACjBtB,EAAQ,KAAOuB,EACfvB,EAAQ,OAASwB,EAEjBxB,EAAQ,YAAc"}
+{"version":3,"file":"SideBar.js","sources":["../../../src/components/side-bar/SideBar.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport React from 'react'\nimport { useFocusWithin, useHover, useInteractOutside } from 'react-aria'\n\nimport { styled, Theme } from '~/styled'\n\nimport {\n  SideBarBody,\n  SideBarBrand,\n  SideBarBrandLogo,\n  SideBarBrandName,\n  SideBarFooter,\n  SideBarHeader\n} from './SideBarComponents'\nimport { SideBarContext } from './SideBarContext'\n\nconst light = {\n  '--background': 'white',\n  '--text': 'var(--color-grey-800)',\n  '--border': 'var(--color-grey-200)'\n}\n\nconst Root = styled('div', {\n  base: ['sticky', 'z-1'],\n  variants: {\n    type: {\n      static: [],\n      expandable: ['w-22']\n    }\n  }\n})\n\nconst Content = styled('div', {\n  base: [\n    'bg-(--background)',\n    'border-r',\n    'border-r-(--border)',\n    'shadow-[4px_0_4px_-2px_rgba(31,31,31,0)]',\n    'flex',\n    'flex-col',\n    'h-full',\n    'overflow-hidden',\n    'will-change-width',\n    'motion-safe:duration-125',\n    'motion-safe:ease-out',\n    'motion-safe:transition-[shadow,width]'\n  ],\n  variants: {\n    type: {\n      static: [],\n      expandable: []\n    },\n    isExpanded: {\n      true: ['w-[16rem]'],\n      false: ['w-22']\n    }\n  },\n  compoundVariants: [\n    {\n      isExpanded: true,\n      type: 'expandable',\n      class: ['shadow-[4px_0_4px_-2px_rgba(31,31,31,0.1)]']\n    }\n  ]\n})\n\nconst PointerBlocker = styled('div', {\n  base: [\n    'bottom-0',\n    'left-0',\n    'absolute',\n    'right-0',\n    'top-0',\n    'transition-all'\n  ],\n  variants: {\n    isVisible: {\n      true: ['delay-0', 'visible'],\n      false: ['delay-50', 'invisible']\n    }\n  }\n})\n\ntype SideBarProps = React.ComponentProps<typeof Root> & {\n  className?: string\n  offset?: number | string\n} & React.ComponentProps<typeof Theme>\n\nexport const SideBar = ({\n  theme,\n  className,\n  children,\n  type = 'expandable',\n  offset = '0px',\n  style,\n  ...rest\n}: SideBarProps) => {\n  const [isExpanded, setIsExpanded] = React.useState(type === 'static')\n  const ref = React.useRef<HTMLDivElement>(null)\n\n  useInteractOutside({\n    ref,\n    onInteractOutside: () => setIsExpanded(false)\n  })\n  const { focusWithinProps } = useFocusWithin({\n    onFocusWithin: () => setIsExpanded(true),\n    onBlurWithin: () => setIsExpanded(false)\n  })\n  const { hoverProps, isHovered } = useHover({\n    onHoverStart: () => setIsExpanded(true),\n    onHoverEnd: () => setIsExpanded(false)\n  })\n  const touchProps = {\n    onTouchEnd: () => setIsExpanded(true)\n  }\n\n  const expandableProps =\n    type === 'expandable'\n      ? {\n          ...focusWithinProps,\n          ...hoverProps,\n          ...touchProps,\n          ref\n        }\n      : {}\n\n  return (\n    <SideBarContext.Provider value={{ isExpanded }}>\n      <Theme theme={theme || light}>\n        <Root\n          {...rest}\n          style={{ ...style, '--offset': offset }}\n          type={type}\n          className={clsx(\n            'h-[calc(100svh-var(--offset))]',\n            'top-(--offset)',\n            className\n          )}\n        >\n          <Content {...expandableProps} isExpanded={isExpanded} type={type}>\n            {children}\n            {/**\n             * When the SideBar is collapsed, ensure that the initial tap event\n             * is used to expand the nav first before making the items available\n             */}\n            {type === 'expandable' && (\n              <PointerBlocker isVisible={!isHovered && !isExpanded} />\n            )}\n          </Content>\n        </Root>\n      </Theme>\n    </SideBarContext.Provider>\n  )\n}\n\nSideBar.Brand = SideBarBrand\nSideBar.BrandLogo = SideBarBrandLogo\nSideBar.BrandName = SideBarBrandName\nSideBar.Header = SideBarHeader\nSideBar.Body = SideBarBody\nSideBar.Footer = SideBarFooter\n\nSideBar.displayName = 'SideBar'\n"],"names":["light","Root","styled","Content","PointerBlocker","SideBar","theme","className","children","type","offset","style","rest","isExpanded","setIsExpanded","React","ref","useInteractOutside","focusWithinProps","useFocusWithin","hoverProps","isHovered","useHover","expandableProps","SideBarContext","Theme","clsx","SideBarBrand","SideBarBrandLogo","SideBarBrandName","SideBarHeader","SideBarBody","SideBarFooter"],"mappings":"6XAgBA,MAAMA,EAAQ,CACZ,eAAgB,QAChB,SAAU,wBACV,WAAY,uBACd,EAEMC,EAAOC,EAAO,MAAO,CACzB,KAAM,CAAC,SAAU,KAAK,EACtB,SAAU,CACR,KAAM,CACJ,OAAQ,CAAA,EACR,WAAY,CAAC,MAAM,CACrB,CACF,CACF,CAAC,EAEKC,EAAUD,EAAO,MAAO,CAC5B,KAAM,CACJ,oBACA,WACA,sBACA,2CACA,OACA,WACA,SACA,kBACA,oBACA,2BACA,uBACA,uCACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,CACR,EAAA,WAAY,CACd,CAAA,EACA,WAAY,CACV,KAAM,CAAC,WAAW,EAClB,MAAO,CAAC,MAAM,CAChB,CACF,EACA,iBAAkB,CAChB,CACE,WAAY,GACZ,KAAM,aACN,MAAO,CAAC,4CAA4C,CACtD,CACF,CACF,CAAC,EAEKE,EAAiBF,EAAO,MAAO,CACnC,KAAM,CACJ,WACA,SACA,WACA,UACA,QACA,gBACF,EACA,SAAU,CACR,UAAW,CACT,KAAM,CAAC,UAAW,SAAS,EAC3B,MAAO,CAAC,WAAY,WAAW,CACjC,CACF,CACF,CAAC,EAOYG,EAAU,CAAC,CACtB,MAAAC,EACA,UAAAC,EACA,SAAAC,EACA,KAAAC,EAAO,aACP,OAAAC,EAAS,MACT,MAAAC,EACA,GAAGC,CACL,IAAoB,CAClB,KAAM,CAACC,EAAYC,CAAa,EAAIC,EAAM,SAASN,IAAS,QAAQ,EAC9DO,EAAMD,EAAM,OAAuB,IAAI,EAE7CE,EAAmB,CACjB,IAAAD,EACA,kBAAmB,IAAMF,EAAc,EAAK,CAC9C,CAAC,EACD,KAAM,CAAE,iBAAAI,CAAiB,EAAIC,EAAe,CAC1C,cAAe,IAAML,EAAc,EAAI,EACvC,aAAc,IAAMA,EAAc,EAAK,CACzC,CAAC,EACK,CAAE,WAAAM,EAAY,UAAAC,CAAU,EAAIC,EAAS,CACzC,aAAc,IAAMR,EAAc,EAAI,EACtC,WAAY,IAAMA,EAAc,EAAK,CACvC,CAAC,EAKKS,EACJd,IAAS,aACL,CACE,GAAGS,EACH,GAAGE,EAPT,WAAY,IAAMN,EAAc,EAAI,EAS9B,IAAAE,CACF,EACA,CAAA,EAEN,OACED,EAAA,cAACS,EAAe,SAAf,CAAwB,MAAO,CAAE,WAAAX,CAAW,CAAA,EAC3CE,EAAA,cAACU,EAAA,CAAM,MAAOnB,GAASN,GACrBe,EAAA,cAACd,EAAA,CACE,GAAGW,EACJ,MAAO,CAAE,GAAGD,EAAO,WAAYD,CAAO,EACtC,KAAMD,EACN,UAAWiB,EACT,iCACA,iBACAnB,CACF,CAEAQ,EAAAA,EAAA,cAACZ,EAAA,CAAS,GAAGoB,EAAiB,WAAYV,EAAY,KAAMJ,GACzDD,EAKAC,IAAS,cACRM,EAAA,cAACX,EAAA,CAAe,UAAW,CAACiB,GAAa,CAACR,CAAY,CAAA,CAE1D,CACF,CACF,CACF,CAEJ,EAEAR,EAAQ,MAAQsB,EAChBtB,EAAQ,UAAYuB,EACpBvB,EAAQ,UAAYwB,EACpBxB,EAAQ,OAASyB,EACjBzB,EAAQ,KAAO0B,EACf1B,EAAQ,OAAS2B,EAEjB3B,EAAQ,YAAc"}