@atom-learning/components 3.1.1 → 3.2.0

package/dist/components/navigation-menu-vertical/NavigationMenuVertical.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavigationMenuVertical.styles.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts"],"sourcesContent":["import { focusVisibleStyleBlock } from '~/utilities'\nimport { resetButtonStyles, resetLinkStyles } from '~/utilities/style/reset'\n\nexport const navigationMenuVerticalItemStyles = {\n  ...resetButtonStyles,\n  ...resetLinkStyles,\n  cursor: 'pointer',\n  borderRadius: '$2',\n  display: 'flex',\n  alignItems: 'center',\n  p: '$2',\n  pl: `var(--navigation-menu-vertical-item-pl)`,\n  width: '100%',\n  '--navigation-menu-vertical-item-font-weight': 400,\n  '&[data-active]': {\n    background: '$accent2',\n    color: '$accent9',\n    '--navigation-menu-vertical-item-font-weight': 600\n  },\n  '&[data-state=open]': {\n    '--navigation-menu-vertical-item-font-weight': 600\n  },\n  '&[data-disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([data-disabled])': {\n    '&:hover': {\n      background: '$base2'\n    },\n    '&:active': {\n      background: '$base3'\n    },\n    '&:focus-visible': focusVisibleStyleBlock()\n  },\n  variants: {\n    size: {\n      md: {\n        minHeight: '$4'\n      },\n      lg: {\n        minHeight: '$5'\n      }\n    }\n  }\n}\n"],"names":["navigationMenuVerticalItemStyles","resetButtonStyles","resetLinkStyles","focusVisibleStyleBlock"],"mappings":"sYAGa,MAAAA,EAAmC,CAC9C,GAAGC,EACH,GAAGC,EACH,OAAQ,UACR,aAAc,KACd,QAAS,OACT,WAAY,SACZ,EAAG,KACH,GAAI,0CACJ,MAAO,OACP,8CAA+C,IAC/C,iBAAkB,CAChB,WAAY,WACZ,MAAO,WACP,8CAA+C,GACjD,EACA,qBAAsB,CACpB,8CAA+C,GACjD,EACA,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,UAAW,CACT,WAAY,QACd,EACA,WAAY,CACV,WAAY,QACd,EACA,kBAAmBC,GACrB,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,UAAW,IACb,EACA,GAAI,CACF,UAAW,IACb,CACF,CACF,CACF"}
+{"version":3,"file":"NavigationMenuVertical.styles.js","sources":["../../../src/components/navigation-menu-vertical/NavigationMenuVertical.styles.ts"],"sourcesContent":["import { focusVisibleStyleBlock } from '~/utilities'\nimport { resetButtonStyles, resetLinkStyles } from '~/utilities/style/reset'\n\nexport const navigationMenuVerticalItemStyles = {\n  ...resetButtonStyles,\n  ...resetLinkStyles,\n  cursor: 'pointer',\n  borderRadius: '$2',\n  display: 'flex',\n  alignItems: 'center',\n  p: '$2',\n  pl: `var(--navigation-menu-vertical-item-pl)`,\n  width: '100%',\n  color: '$text',\n  bg: '$background',\n  '--navigation-menu-vertical-item-font-weight': 400,\n  '&[data-active]': {\n    bg: '$backgroundSelected',\n    color: '$textSelected',\n    '--navigation-menu-vertical-item-font-weight': 600\n  },\n  '&[data-state=open]': {\n    '--navigation-menu-vertical-item-font-weight': 600\n  },\n  '&[data-disabled]': {\n    opacity: 0.3,\n    cursor: 'not-allowed'\n  },\n  '&:not([data-disabled])': {\n    '&:hover': {\n      bg: '$backgroundHover'\n    },\n    '&:active': {\n      bg: '$backgroundActive'\n    },\n    '&:focus-visible': focusVisibleStyleBlock()\n  },\n  variants: {\n    size: {\n      md: {\n        minHeight: '$4'\n      },\n      lg: {\n        minHeight: '$5'\n      }\n    }\n  }\n}\n"],"names":["navigationMenuVerticalItemStyles","resetButtonStyles","resetLinkStyles","focusVisibleStyleBlock"],"mappings":"4YAGaA,EAAmC,CAC9C,GAAGC,EACH,GAAGC,EACH,OAAQ,UACR,aAAc,KACd,QAAS,OACT,WAAY,SACZ,EAAG,KACH,GAAI,0CACJ,MAAO,OACP,MAAO,QACP,GAAI,cACJ,8CAA+C,IAC/C,iBAAkB,CAChB,GAAI,sBACJ,MAAO,gBACP,8CAA+C,GACjD,EACA,qBAAsB,CACpB,8CAA+C,GACjD,EACA,mBAAoB,CAClB,QAAS,GACT,OAAQ,aACV,EACA,yBAA0B,CACxB,UAAW,CACT,GAAI,kBACN,EACA,WAAY,CACV,GAAI,mBACN,EACA,kBAAmBC,EAAuB,CAC5C,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,UAAW,IACb,EACA,GAAI,CACF,UAAW,IACb,CACF,CACF,CACF"}

package/dist/components/navigation-menu-vertical/stitches.navigationMenuVertical.colorscheme.config.d.ts

@@ -0,0 +1,15 @@
+export declare const colorSchemes: {
+    light: string & {
+        className: string;
+        selector: string;
+    } & import("@stitches/react/types/stitches").ThemeTokens<{
+        colors: {
+            text: string;
+            background: string;
+            backgroundHover: string;
+            backgroundActive: string;
+            textSelected: string;
+            backgroundSelected: string;
+        };
+    }, "">;
+};

package/dist/components/navigation-menu-vertical/stitches.navigationMenuVertical.colorscheme.config.js

@@ -0,0 +1,2 @@
+import{createTheme as e}from"../../stitches.js";const c=e({colors:{text:"$foreground",background:"$base1",backgroundHover:"$base2",backgroundActive:"$base3",textSelected:"$accent9",backgroundSelected:"$accent2"}}),o={light:c};export{o as colorSchemes};
+//# sourceMappingURL=stitches.navigationMenuVertical.colorscheme.config.js.map

package/dist/components/navigation-menu-vertical/stitches.navigationMenuVertical.colorscheme.config.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"stitches.navigationMenuVertical.colorscheme.config.js","sources":["../../../src/components/navigation-menu-vertical/stitches.navigationMenuVertical.colorscheme.config.ts"],"sourcesContent":["import { createTheme } from '~/stitches'\n\nconst light = createTheme({\n  colors: {\n    text: '$foreground',\n    background: '$base1',\n    backgroundHover: '$base2',\n    backgroundActive: '$base3',\n    textSelected: '$accent9',\n    backgroundSelected: '$accent2'\n  }\n})\n\nexport const colorSchemes = {\n  light\n}\n"],"names":["light","createTheme","colorSchemes"],"mappings":"gDAEA,MAAMA,EAAQC,EAAY,CACxB,OAAQ,CACN,KAAM,cACN,WAAY,SACZ,gBAAiB,SACjB,iBAAkB,SAClB,aAAc,WACd,mBAAoB,UACtB,CACF,CAAC,EAEYC,EAAe,CAC1B,MAAAF,CACF"}

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"}