@atom-learning/components 3.1.2 → 3.2.0

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 { TopBarActionIcon } from './TopBarActionIcon'\nimport { TopBarBrand, TopBarBrandLogo, TopBarBrandName } from './TopBarBrand'\n\ninterface TopBarSubComponents {\n  Brand: typeof TopBarBrand\n  BrandLogo: typeof TopBarBrandLogo\n  BrandName: typeof TopBarBrandName\n  ActionIcon: typeof TopBarActionIcon\n  Divider: typeof TopBarDivider\n}\n\nconst TopBarDivider = () => (\n  <Divider orientation=\"vertical\" css={{ height: '$2', bg: '$tonal100' }} />\n)\n\nconst StyledRoot = styled('div', {\n  bg: 'white',\n  position: 'sticky',\n  display: 'flex',\n  alignItems: 'center',\n  width: '100vw',\n  top: '0',\n  zIndex: 1,\n  borderBottom: '1px solid $tonal100',\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}\n\nexport const TopBar: React.FC<TopBarProps> & TopBarSubComponents = ({\n  size = 'md',\n  ...props\n}) => {\n  const { y: scrollPositionY } = useWindowScrollPosition()\n\n  return (\n    <StyledRoot hasScrolled={!!scrollPositionY} size={size}>\n      <Container {...props} />\n    </StyledRoot>\n  )\n}\n\nTopBar.Brand = TopBarBrand\nTopBar.BrandLogo = TopBarBrandLogo\nTopBar.BrandName = TopBarBrandName\nTopBar.ActionIcon = TopBarActionIcon\nTopBar.Divider = TopBarDivider\n\nTopBar.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","TopBarBrandLogo","Container","Flex","TopBar","size","props","scrollPositionY","useWindowScrollPosition","TopBarBrand","TopBarBrandName","TopBarActionIcon"],"mappings":"oYAkBA,MAAMA,EAAgB,IACpBC,EAAA,cAACC,EAAA,CAAQ,YAAY,WAAW,IAAK,CAAE,OAAQ,KAAM,GAAI,WAAY,CAAA,CAAG,EAGpEC,EAAaC,EAAO,MAAO,CAC/B,GAAI,QACJ,SAAU,SACV,QAAS,OACT,WAAY,SACZ,MAAO,QACP,IAAK,IACL,OAAQ,EACR,aAAc,sBACd,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,EAQYC,EAAsD,CAAC,CAClE,KAAAC,EAAO,QACJC,CACL,IAAM,CACJ,KAAM,CAAE,EAAGC,CAAgB,EAAIC,IAE/B,OACEX,EAAA,cAACE,EAAA,CAAW,YAAa,CAAC,CAACQ,EAAiB,KAAMF,GAChDR,EAAA,cAACK,EAAA,CAAW,GAAGI,EAAO,CACxB,CAEJ,EAEAF,EAAO,MAAQK,EACfL,EAAO,UAAYH,EACnBG,EAAO,UAAYM,EACnBN,EAAO,WAAaO,EACpBP,EAAO,QAAUR,EAEjBQ,EAAO,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\ninterface TopBarSubComponents {\n  Brand: typeof TopBarBrand\n  BrandLogo: typeof TopBarBrandLogo\n  BrandName: typeof TopBarBrandName\n  ActionIcon: typeof TopBarActionIcon\n  Divider: typeof TopBarDivider\n}\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\nexport const TopBar: React.FC<TopBarProps> & TopBarSubComponents = ({\n  size = 'md',\n  className = topBarColorSchemes['light'],\n  ...props\n}) => {\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\nTopBar.Brand = TopBarBrand\nTopBar.BrandLogo = TopBarBrandLogo\nTopBar.BrandName = TopBarBrandName\nTopBar.ActionIcon = TopBarActionIcon\nTopBar.Divider = TopBarDivider\n\nTopBar.displayName = 'TopBar'\n"],"names":["TopBarDivider","React","Divider","StyledRoot","styled","TopBarBrandLogo","Container","Flex","TopBar","size","className","topBarColorSchemes","props","scrollPositionY","useWindowScrollPosition","TopBarBrand","TopBarBrandName","TopBarActionIcon"],"mappings":"2cAmBA,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,EASYC,EAAsD,CAAC,CAClE,KAAAC,EAAO,KACP,UAAAC,EAAYC,EAAmB,SAC5BC,CACL,IAAM,CACJ,KAAM,CAAE,EAAGC,CAAgB,EAAIC,EAE/B,EAAA,OACEb,EAAA,cAACE,EAAA,CACC,UAAWO,EACX,YAAa,CAAC,CAACG,EACf,KAAMJ,CAENR,EAAAA,EAAA,cAACK,EAAA,CAAW,GAAGM,CAAO,CAAA,CACxB,CAEJ,EAEAJ,EAAO,MAAQO,EACfP,EAAO,UAAYH,EACnBG,EAAO,UAAYQ,EACnBR,EAAO,WAAaS,EACpBT,EAAO,QAAUR,EAEjBQ,EAAO,YAAc"}

package/dist/components/top-bar/stitches.topBar.colorscheme.config.d.ts

@@ -0,0 +1,12 @@
+export declare const colorSchemes: {
+    light: string & {
+        className: string;
+        selector: string;
+    } & import("@stitches/react/types/stitches").ThemeTokens<{
+        colors: {
+            background: string;
+            divider: string;
+            borderBottom: string;
+        };
+    }, "">;
+};

package/dist/components/top-bar/stitches.topBar.colorscheme.config.js

@@ -0,0 +1,2 @@
+import{createTheme as e}from"../../stitches.js";const o=e({colors:{background:"white",divider:"$grey200",borderBottom:"$grey200"}}),r={light:o};export{r as colorSchemes};
+//# sourceMappingURL=stitches.topBar.colorscheme.config.js.map

package/dist/components/top-bar/stitches.topBar.colorscheme.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stitches.topBar.colorscheme.config.js","sources":["../../../src/components/top-bar/stitches.topBar.colorscheme.config.ts"],"sourcesContent":["import { createTheme } from '~/stitches'\n\nconst light = createTheme({\n  colors: {\n    background: 'white',\n    divider: '$grey200',\n    borderBottom: '$grey200'\n  }\n})\n\nexport const colorSchemes = {\n  light\n}\n"],"names":["light","createTheme","colorSchemes"],"mappings":"gDAEA,MAAMA,EAAQC,EAAY,CACxB,OAAQ,CACN,WAAY,QACZ,QAAS,WACT,aAAc,UAChB,CACF,CAAC,EAEYC,EAAe,CAC1B,MAAAF,CACF"}