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

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

@@ -0,0 +1,2 @@
+import{styled as o}from"../../stitches.js";import{Image as r}from"../image/Image.js";import{Text as e}from"../text/Text.js";const d=o("div",{borderBottom:"1px solid $border",p:"$4",width:"100%"}),t=o("div",{flexGrow:1,overflowY:"auto",overflowX:"hidden",p:"$4",width:"100%"}),i=o("div",{borderTop:"1px solid $border",p:"$4",width:"100%"}),a=o("a",{alignItems:"center",color:"$tonal400",display:"flex",textDecoration:"none","&:hover, &:focus":{textDecoration:"none"}}),n=r,l=o(e,{color:"$tonal400"});export{a as SideBarBrand,n as SideBarBrandLogo,l as SideBarBrandName,i as SideBarFooter,d as SideBarHeader,t as SideBarMain};
+//# sourceMappingURL=SideBarComponents.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideBarComponents.js","sources":["../../../src/components/side-bar/SideBarComponents.tsx"],"sourcesContent":["import { styled } from '~/stitches'\n\nimport { Image } from '../image'\nimport { Text } from '../text'\n\nexport const SideBarHeader = styled('div', {\n  borderBottom: '1px solid $border',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarMain = styled('div', {\n  flexGrow: 1,\n  overflowY: 'auto',\n  overflowX: 'hidden',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarFooter = styled('div', {\n  borderTop: '1px solid $border',\n  p: '$4',\n  width: '100%'\n})\n\nexport const SideBarBrand = styled('a', {\n  alignItems: 'center',\n  color: '$tonal400',\n  display: 'flex',\n  textDecoration: 'none',\n  '&:hover, &:focus': {\n    textDecoration: 'none'\n  }\n})\n\nexport const SideBarBrandLogo = Image\n\nexport const SideBarBrandName = styled(Text, {\n  color: '$tonal400'\n})\n"],"names":["SideBarHeader","styled","SideBarMain","SideBarFooter","SideBarBrand","SideBarBrandLogo","Image","SideBarBrandName","Text"],"mappings":"4HAKa,MAAAA,EAAgBC,EAAO,MAAO,CACzC,aAAc,oBACd,EAAG,KACH,MAAO,MACT,CAAC,EAEYC,EAAcD,EAAO,MAAO,CACvC,SAAU,EACV,UAAW,OACX,UAAW,SACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYE,EAAgBF,EAAO,MAAO,CACzC,UAAW,oBACX,EAAG,KACH,MAAO,MACT,CAAC,EAEYG,EAAeH,EAAO,IAAK,CACtC,WAAY,SACZ,MAAO,YACP,QAAS,OACT,eAAgB,OAChB,mBAAoB,CAClB,eAAgB,MAClB,CACF,CAAC,EAEYI,EAAmBC,EAEnBC,EAAmBN,EAAOO,EAAM,CAC3C,MAAO,WACT,CAAC"}

package/dist/components/side-bar/SideBarExpandableContext.d.ts

@@ -0,0 +1,7 @@
+import * as React from 'react';
+export declare const SideBarExpandableContext: React.Context<{
+    isExpanded?: boolean | undefined;
+}>;
+export declare const useExpandableSidebar: () => {
+    isExpanded?: boolean | undefined;
+};

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

@@ -0,0 +1,2 @@
+import*as e from"react";const t=e.createContext({isExpanded:void 0}),a=()=>e.useContext(t);export{t as SideBarExpandableContext,a as useExpandableSidebar};
+//# sourceMappingURL=SideBarExpandableContext.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SideBarExpandableContext.js","sources":["../../../src/components/side-bar/SideBarExpandableContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nexport const SideBarExpandableContext = React.createContext<{\n  isExpanded?: boolean\n}>({\n  isExpanded: undefined\n})\n\nexport const useExpandableSidebar = () =>\n  React.useContext(SideBarExpandableContext)\n"],"names":["SideBarExpandableContext","React","useExpandableSidebar"],"mappings":"wBAEa,MAAAA,EAA2BC,EAAM,cAE3C,CACD,WAAY,MACd,CAAC,EAEYC,EAAuB,IAClCD,EAAM,WAAWD,CAAwB"}

package/dist/components/side-bar/index.d.ts

@@ -0,0 +1,2 @@
+export { SideBar } from './SideBar';
+export { useExpandableSidebar } from './SideBarExpandableContext';

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

@@ -335,6 +335,7 @@ declare const StyledRoot: import("@stitches/react/types/styled-component").Style
 declare type StyledRootProps = React.ComponentProps<typeof StyledRoot>;
 interface TopBarProps extends StyledRootProps {
     css?: CSS;
+    className?: string;
 }
 export declare const TopBar: React.FC<TopBarProps> & TopBarSubComponents;
 export {};

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

@@ -1,2 +1,2 @@
-import t from"react";import{styled as r}from"../../stitches.js";import{useWindowScrollPosition as s}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as d}from"../divider/Divider.js";import{Flex as m}from"../flex/Flex.js";import{TopBarActionIcon as l}from"./TopBarActionIcon.js";import{TopBarBrandLogo as e,TopBarBrand as p,TopBarBrandName as h}from"./TopBarBrand.js";const c=()=>t.createElement(d,{orientation:"vertical",css:{height:"$2",bg:"$tonal100"}}),g=r("div",{bg:"white",position:"sticky",display:"flex",alignItems:"center",width:"100vw",top:"0",zIndex:1,borderBottom:"1px solid $tonal100",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"}}}}}}),x=r(m,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),o=({size:i="md",...a})=>{const{y:n}=s();return t.createElement(g,{hasScrolled:!!n,size:i},t.createElement(x,{...a}))};o.Brand=p,o.BrandLogo=e,o.BrandName=h,o.ActionIcon=l,o.Divider=c,o.displayName="TopBar";export{o as TopBar};
+import r from"react";import{styled as e}from"../../stitches.js";import{useWindowScrollPosition as d}from"../../utilities/hooks/useWindowScrollPosition.js";import{Divider as n}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 t,TopBarBrand as h,TopBarBrandName as g}from"./TopBarBrand.js";const B=()=>r.createElement(n,{orientation:"vertical",css:{height:"$2",bg:"$divider"}}),x=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",[`& ${t}`]:{'&[src$=".svg"]':{height:24,width:"auto"}}},lg:{height:"$7",[`& ${t}`]:{'&[src$=".svg"]':{height:32,width:"auto"}}}}}}),$=e(c,{alignItems:"center",height:"$4",mx:"$4",width:"100%","@md":{mx:"$5"}}),o=({size:i="md",className:a=l.light,...m})=>{const{y:s}=d();return r.createElement(x,{className:a,hasScrolled:!!s,size:i},r.createElement($,{...m}))};o.Brand=h,o.BrandLogo=t,o.BrandName=g,o.ActionIcon=p,o.Divider=B,o.displayName="TopBar";export{o 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 { 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"}