@atom-learning/components 4.0.0-beta.9 → 4.0.0

package/dist/components/top-bar/TopBar.js

@@ -1,2 +1,2 @@
-import o from"react";import{styled as t}from"../../stitches.js";import{useWindowScrollPosition as n}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as d}from"../divider/Divider.js";import{Flex as c}from"../flex/Flex.js";import{colorSchemes as l}from"./stitches.topBar.colorscheme.config.js";import{TopBarActionIcon as p}from"./TopBarActionIcon.js";import{TopBarBrandLogo as e,TopBarBrand as h,TopBarBrandName as g}from"./TopBarBrand.js";const B=()=>o.createElement(d,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),x=t("div",{bg:"$background",position:"sticky",display:"flex",alignItems:"center",width:"100vw",top:"0",zIndex:1,borderBottom:"1px solid $borderBottom",transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1);"}},size:{md:{height:"$6",[`& ${e}`]:{'&[src$=".svg"]':{height:24,width:"auto"}}},lg:{height:"$7",[`& ${e}`]:{'&[src$=".svg"]':{height:32,width:"auto"}}}}}}),$=t(c,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),r=({size:i="md",className:a=l.light,...s})=>{const{y:m}=n();return o.createElement(x,{className:a,hasScrolled:!!m,size:i},o.createElement($,{...s}))},f=Object.assign(r,{Brand:h,BrandLogo:e,BrandName:g,ActionIcon:p,Divider:B});r.displayName="TopBar";export{f as TopBar};
+import o from"react";import{styled as e}from"../../stitches.js";import{useWindowScrollPosition as n}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as s}from"../divider/Divider.js";import{Flex as d}from"../flex/Flex.js";import{colorSchemes as c}from"./stitches.topBar.colorscheme.config.js";import{TopBarActionIcon as l}from"./TopBarActionIcon.js";import{TopBarBrand as p,TopBarBrandLogo as g,TopBarBrandName as h}from"./TopBarBrand.js";const x=()=>o.createElement(s,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),B=e("div",{bg:"$background",position:"sticky",display:"flex",alignItems:"center",width:"100vw",top:"0",zIndex:1,borderBottom:"1px solid $borderBottom",transition:"box-shadow .2s ease-out",variants:{hasScrolled:{true:{boxShadow:"0px 4px 4px -2px rgba(31, 31, 31, 0.1);"}},size:{md:{height:"$6"},lg:{height:"$7"}}}}),f=e(d,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),r=({size:t="md",className:i=c.light,...a})=>{const{y:m}=n();return o.createElement(B,{className:i,hasScrolled:!!m,size:t},o.createElement(f,{...a}))},b=Object.assign(r,{Brand:p,BrandLogo:g,BrandName:h,ActionIcon:l,Divider:x});r.displayName="TopBar";export{b as TopBar};
 //# sourceMappingURL=TopBar.js.map

package/dist/components/top-bar/TopBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { useWindowScrollPosition } from '~/utilities/hooks/useWindowScrollPosition'\n\nimport { Divider } from '../divider'\nimport { Flex } from '../flex'\nimport { colorSchemes as topBarColorSchemes } from './stitches.topBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n  <Divider orientation=\"vertical\" css={{ height: '$2', bg: '$divider' }} />\n)\n\nconst StyledRoot = styled('div', {\n  bg: '$background',\n  position: 'sticky',\n  display: 'flex',\n  alignItems: 'center',\n  width: '100vw',\n  top: '0',\n  zIndex: 1,\n  borderBottom: '1px solid $borderBottom',\n  transition: 'box-shadow .2s ease-out',\n  variants: {\n    hasScrolled: {\n      true: {\n        boxShadow: '0px 4px 4px -2px rgba(31, 31, 31, 0.1);'\n      }\n    },\n    size: {\n      md: {\n        height: '$6',\n        [`& ${TopBarBrandLogo}`]: {\n          '&[src$=\".svg\"]': {\n            height: 24,\n            width: 'auto'\n          }\n        }\n      },\n      lg: {\n        height: '$7',\n        [`& ${TopBarBrandLogo}`]: {\n          '&[src$=\".svg\"]': {\n            height: 32,\n            width: 'auto'\n          }\n        }\n      }\n    }\n  }\n})\n\nconst Container = styled(Flex, {\n  alignItems: 'center',\n  height: '$4',\n  mx: '$4',\n  width: '100%',\n  '@md': {\n    mx: '$5'\n  }\n})\n\ntype StyledRootProps = React.ComponentProps<typeof StyledRoot>\n\ninterface TopBarProps extends StyledRootProps {\n  css?: CSS\n  className?: string\n}\n\nconst TopBarComponent = ({\n  size = 'md',\n  className = topBarColorSchemes['light'],\n  ...props\n}: TopBarProps) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <StyledRoot\n      className={className}\n      hasScrolled={!!scrollPositionY}\n      size={size}\n    >\n      <Container {...props} />\n    </StyledRoot>\n  )\n}\n\nexport const TopBar = Object.assign(TopBarComponent, {\n  Brand: TopBarBrand,\n  BrandLogo: TopBarBrandLogo,\n  BrandName: TopBarBrandName,\n  ActionIcon: TopBarActionIcon,\n  Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","TopBarBrandLogo","Container","Flex","TopBarComponent","size","className","topBarColorSchemes","props","scrollPositionY","useWindowScrollPosition","TopBar","TopBarBrand","TopBarBrandName","TopBarActionIcon"],"mappings":"2cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,EAAG,EAGnEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,cACJ,SAAU,SACV,QAAS,OACT,WAAY,SACZ,MAAO,QACP,IAAK,IACL,OAAQ,EACR,aAAc,0BACd,WAAY,0BACZ,SAAU,CACR,YAAa,CACX,KAAM,CACJ,UAAW,yCACb,CACF,EACA,KAAM,CACJ,GAAI,CACF,OAAQ,KACR,CAAC,KAAKC,KAAoB,CACxB,iBAAkB,CAChB,OAAQ,GACR,MAAO,MACT,CACF,CACF,EACA,GAAI,CACF,OAAQ,KACR,CAAC,KAAKA,KAAoB,CACxB,iBAAkB,CAChB,OAAQ,GACR,MAAO,MACT,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAAYF,EAAOG,EAAM,CAC7B,WAAY,SACZ,OAAQ,KACR,GAAI,KACJ,MAAO,OACP,MAAO,CACL,GAAI,IACN,CACF,CAAC,EASKC,EAAkB,CAAC,CACvB,KAAAC,EAAO,KACP,UAAAC,EAAYC,EAAmB,SAC5BC,CACL,IAAmB,CACjB,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAAwB,EAEvD,OACEb,EAAA,cAACE,EAAA,CACC,UAAWO,EACX,YAAa,CAAC,CAACG,EACf,KAAMJ,CAAAA,EAENR,EAAA,cAACK,EAAA,CAAW,GAAGM,CAAO,CAAA,CACxB,CAEJ,EAEaG,EAAS,OAAO,OAAOP,EAAiB,CACnD,MAAOQ,EACP,UAAWX,EACX,UAAWY,EACX,WAAYC,EACZ,QAASlB,CACX,CAAC,EAEDQ,EAAgB,YAAc"}
+{"version":3,"file":"TopBar.js","sources":["../../../src/components/top-bar/TopBar.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS, styled } from '~/stitches'\nimport { useWindowScrollPosition } from '~/utilities/hooks/useWindowScrollPosition'\n\nimport { Divider } from '../divider'\nimport { Flex } from '../flex'\nimport { colorSchemes as topBarColorSchemes } from './stitches.topBar.colorscheme.config'\nimport { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\nconst TopBarDivider = () => (\n  <Divider orientation=\"vertical\" css={{ height: '$2', bg: '$divider' }} />\n)\n\nconst StyledRoot = styled('div', {\n  bg: '$background',\n  position: 'sticky',\n  display: 'flex',\n  alignItems: 'center',\n  width: '100vw',\n  top: '0',\n  zIndex: 1,\n  borderBottom: '1px solid $borderBottom',\n  transition: 'box-shadow .2s ease-out',\n  variants: {\n    hasScrolled: {\n      true: { boxShadow: '0px 4px 4px -2px rgba(31, 31, 31, 0.1);' }\n    },\n    size: {\n      md: { height: '$6' },\n      lg: { height: '$7' }\n    }\n  }\n})\n\nconst Container = styled(Flex, {\n  alignItems: 'center',\n  height: '$4',\n  mx: '$4',\n  width: '100%',\n  '@md': {\n    mx: '$5'\n  }\n})\n\ntype StyledRootProps = React.ComponentProps<typeof StyledRoot>\n\ninterface TopBarProps extends StyledRootProps {\n  css?: CSS\n  className?: string\n}\n\nconst TopBarComponent = ({\n  size = 'md',\n  className = topBarColorSchemes['light'],\n  ...props\n}: TopBarProps) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <StyledRoot\n      className={className}\n      hasScrolled={!!scrollPositionY}\n      size={size}\n    >\n      <Container {...props} />\n    </StyledRoot>\n  )\n}\n\nexport const TopBar = Object.assign(TopBarComponent, {\n  Brand: TopBarBrand,\n  BrandLogo: TopBarBrandLogo,\n  BrandName: TopBarBrandName,\n  ActionIcon: TopBarActionIcon,\n  Divider: TopBarDivider\n})\n\nTopBarComponent.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","Container","Flex","TopBarComponent","size","className","topBarColorSchemes","props","scrollPositionY","useWindowScrollPosition","TopBar","TopBarBrand","TopBarBrandLogo","TopBarBrandName","TopBarActionIcon"],"mappings":"2cAWA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,UAAW,CAAG,CAAA,EAGnEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,cACJ,SAAU,SACV,QAAS,OACT,WAAY,SACZ,MAAO,QACP,IAAK,IACL,OAAQ,EACR,aAAc,0BACd,WAAY,0BACZ,SAAU,CACR,YAAa,CACX,KAAM,CAAE,UAAW,yCAA0C,CAC/D,EACA,KAAM,CACJ,GAAI,CAAE,OAAQ,IAAK,EACnB,GAAI,CAAE,OAAQ,IAAK,CACrB,CACF,CACF,CAAC,EAEKC,EAAYD,EAAOE,EAAM,CAC7B,WAAY,SACZ,OAAQ,KACR,GAAI,KACJ,MAAO,OACP,MAAO,CACL,GAAI,IACN,CACF,CAAC,EASKC,EAAkB,CAAC,CACvB,KAAAC,EAAO,KACP,UAAAC,EAAYC,EAAmB,SAC5BC,CACL,IAAmB,CACjB,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAAAA,EAE/B,OACEZ,EAAA,cAACE,EAAA,CACC,UAAWM,EACX,YAAa,CAAC,CAACG,EACf,KAAMJ,CAENP,EAAAA,EAAA,cAACI,EAAA,CAAW,GAAGM,CAAO,CAAA,CACxB,CAEJ,EAEaG,EAAS,OAAO,OAAOP,EAAiB,CACnD,MAAOQ,EACP,UAAWC,EACX,UAAWC,EACX,WAAYC,EACZ,QAASlB,CACX,CAAC,EAEDO,EAAgB,YAAc"}

package/dist/components/top-bar/TopBarActionIcon.d.ts

@@ -1,6 +1,6 @@
 import React from 'react';
 import { ActionIcon } from '../action-icon';
-declare type TopBarActionIconProps = Omit<React.ComponentProps<typeof ActionIcon>, 'size' | 'children'> & {
+type TopBarActionIconProps = Omit<React.ComponentProps<typeof ActionIcon>, 'size' | 'children'> & {
     icon: React.FC<React.SVGProps<SVGSVGElement>>;
     label: string;
 };