@atom-learning/components 5.16.1 → 5.17.0

package/dist/components/skeleton-loader/Skeleton.js

@@ -0,0 +1,2 @@
+import{keyframes as e,styled as t}from"../../stitches.js";import{Box as i}from"../box/Box.js";const a=e({"0%":{opacity:1},"50%":{opacity:.4},"100%":{opacity:1}}),o=t(i,{bg:"$grey300",size:"$6",animation:`${a} 2s ease-in-out 0.5s infinite`});o.displayName="Skeleton";export{o as SkeletonLoader};
+//# sourceMappingURL=Skeleton.js.map

package/dist/components/skeleton-loader/Skeleton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Skeleton.js","sources":["../../../src/components/skeleton-loader/Skeleton.tsx"],"sourcesContent":["import { keyframes, styled } from '~/stitches'\n\nimport { Box } from '../box'\n\nconst shimmer = keyframes({\n  '0%': { opacity: 1 },\n  '50%': { opacity: 0.4 },\n  '100%': { opacity: 1 }\n})\n\nexport const SkeletonLoader = styled(Box, {\n  bg: '$grey300',\n  size: '$6',\n  animation: `${shimmer} 2s ease-in-out 0.5s infinite`\n})\n\nSkeletonLoader.displayName = 'Skeleton'\n"],"names":["shimmer","keyframes","SkeletonLoader","styled","Box"],"mappings":"8FAIA,MAAMA,EAAUC,EAAU,CACxB,KAAM,CAAE,QAAS,CAAE,EACnB,MAAO,CAAE,QAAS,EAAI,EACtB,OAAQ,CAAE,QAAS,CAAE,CACvB,CAAC,EAEYC,EAAiBC,EAAOC,EAAK,CACxC,GAAI,WACJ,KAAM,KACN,UAAW,GAAGJ,gCAChB,CAAC,EAEDE,EAAe,YAAc"}

package/dist/components/skeleton-loader/SkeletonButton.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CSS } from '../../stitches';
+export declare const SkeletonButton: ({ css }: {
+    css?: CSS;
+}) => React.JSX.Element;

package/dist/components/skeleton-loader/SkeletonButton.js

@@ -0,0 +1,2 @@
+import t from"react";import{SkeletonLoader as o}from"./Skeleton.js";const r=({css:e})=>t.createElement(o,{css:{width:"10rem",height:"$3",borderRadius:"$0",...e}});export{r as SkeletonButton};
+//# sourceMappingURL=SkeletonButton.js.map

package/dist/components/skeleton-loader/SkeletonButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonButton.js","sources":["../../../src/components/skeleton-loader/SkeletonButton.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonButton = ({ css }: { css?: CSS }) => (\n  <SkeletonLoader\n    css={{\n      width: '10rem',\n      height: '$3',\n      borderRadius: '$0',\n      ...css\n    }}\n  />\n)\n"],"names":["SkeletonButton","css","React","SkeletonLoader"],"mappings":"oEAMO,MAAMA,EAAiB,CAAC,CAAE,IAAAC,CAAI,IACnCC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,MAAO,QACP,OAAQ,KACR,aAAc,KACd,GAAGF,CACL,CACF,CAAA"}

package/dist/components/skeleton-loader/SkeletonHeading.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+import { CSS } from '../../stitches';
+export declare const SkeletonHeading: ({ css }: {
+    css?: CSS;
+}) => React.JSX.Element;

package/dist/components/skeleton-loader/SkeletonHeading.js

@@ -0,0 +1,2 @@
+import t from"react";import{SkeletonLoader as o}from"./Skeleton.js";const r=({css:e})=>t.createElement(o,{css:{width:"calc(2 * $8)",height:"$2",borderRadius:"$3",...e}});export{r as SkeletonHeading};
+//# sourceMappingURL=SkeletonHeading.js.map

package/dist/components/skeleton-loader/SkeletonHeading.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonHeading.js","sources":["../../../src/components/skeleton-loader/SkeletonHeading.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonHeading = ({ css }: { css?: CSS }) => (\n  <SkeletonLoader\n    css={{\n      width: 'calc(2 * $8)',\n      height: '$2',\n      borderRadius: '$3',\n      ...css\n    }}\n  />\n)\n"],"names":["SkeletonHeading","css","React","SkeletonLoader"],"mappings":"oEAMO,MAAMA,EAAkB,CAAC,CAAE,IAAAC,CAAI,IACpCC,EAAA,cAACC,EAAA,CACC,IAAK,CACH,MAAO,eACP,OAAQ,KACR,aAAc,KACd,GAAGF,CACL,CACF,CAAA"}

package/dist/components/skeleton-loader/SkeletonTabs.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import { CSS } from '../../stitches';
+export declare const SkeletonTabs: ({ numberOfTabs, containerCss, tabCss }: {
+    numberOfTabs: number;
+    containerCss?: CSS;
+    tabCss?: CSS;
+}) => React.JSX.Element;

package/dist/components/skeleton-loader/SkeletonTabs.js

@@ -0,0 +1,2 @@
+import r from"react";import{Tile as s}from"../tile/Tile.js";import"../flex/Flex.js";import{SkeletonLoader as i}from"./Skeleton.js";const n=({numberOfTabs:t,containerCss:o,tabCss:a})=>r.createElement(s,{css:{p:"$24",flexDirection:"row",gap:"$4",...o}},Array.from({length:t},(e,m)=>`tab_${m}`).map(e=>r.createElement(i,{key:e,css:{width:"$8",height:"$2",borderRadius:"$0",...a}})));export{n as SkeletonTabs};
+//# sourceMappingURL=SkeletonTabs.js.map

package/dist/components/skeleton-loader/SkeletonTabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SkeletonTabs.js","sources":["../../../src/components/skeleton-loader/SkeletonTabs.tsx"],"sourcesContent":["import React from 'react'\n\nimport { CSS } from '~/stitches'\n\nimport { Tile } from '../tile'\nimport { SkeletonLoader } from './Skeleton'\n\nexport const SkeletonTabs = ({\n  numberOfTabs,\n  containerCss,\n  tabCss\n}: {\n  numberOfTabs: number\n  containerCss?: CSS\n  tabCss?: CSS\n}) => (\n  <Tile css={{ p: '$24', flexDirection: 'row', gap: '$4', ...containerCss }}>\n    {Array.from(\n      {\n        length: numberOfTabs\n      },\n      (_, index) => `tab_${index}`\n    ).map((key) => (\n      <SkeletonLoader\n        key={key}\n        css={{\n          width: '$8',\n          height: '$2',\n          borderRadius: '$0',\n          ...tabCss\n        }}\n      />\n    ))}\n  </Tile>\n)\n"],"names":["SkeletonTabs","numberOfTabs","containerCss","tabCss","React","Tile","_","index","key","SkeletonLoader"],"mappings":"mIAOO,MAAMA,EAAe,CAAC,CAC3B,aAAAC,EACA,aAAAC,EACA,OAAAC,CACF,IAKEC,EAAA,cAACC,EAAA,CAAK,IAAK,CAAE,EAAG,MAAO,cAAe,MAAO,IAAK,KAAM,GAAGH,CAAa,CAAA,EACrE,MAAM,KACL,CACE,OAAQD,CACV,EACA,CAACK,EAAGC,IAAU,OAAOA,GACvB,EAAE,IAAKC,GACLJ,EAAA,cAACK,EAAA,CACC,IAAKD,EACL,IAAK,CACH,MAAO,KACP,OAAQ,KACR,aAAc,KACd,GAAGL,CACL,CAAA,CACF,CACD,CACH"}

package/dist/components/skeleton-loader/index.d.ts

@@ -0,0 +1,4 @@
+export { SkeletonLoader as Loader } from './Skeleton';
+export { SkeletonHeading as Heading } from './SkeletonHeading';
+export { SkeletonButton as Button } from './SkeletonButton';
+export { SkeletonTabs as Tabs } from './SkeletonTabs';

package/dist/components/skeleton-loader/index.js

@@ -0,0 +1,2 @@
+import{SkeletonLoader as t}from"./Skeleton.js";import{SkeletonHeading as r}from"./SkeletonHeading.js";import{SkeletonButton as s}from"./SkeletonButton.js";import{SkeletonTabs as f}from"./SkeletonTabs.js";export{s as Button,r as Heading,t as Loader,f as Tabs};
+//# sourceMappingURL=index.js.map

package/dist/components/skeleton-loader/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}