@atom-learning/components 3.9.0 → 3.10.0

package/package.json

@@ -4,7 +4,7 @@
   "main": "dist/index.cjs.js",
   "typings": "dist/index.d.ts",
   "module": "dist/index.js",
-  "version": "3.9.0",
+  "version": "3.10.0",
   "description": "",
   "files": [
     "dist"

package/dist/components/pagination/PaginationItem.d.ts

@@ -1,3 +0,0 @@
-import * as React from 'react';
-import type { IPaginationItemProps } from './types';
-export declare const PaginationItem: React.FC<IPaginationItemProps>;

package/dist/components/pagination/PaginationItem.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PaginationItem.js","sources":["../../../src/components/pagination/PaginationItem.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { styled } from '../../stitches'\nimport type { IPaginationItemProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n  alignItems: 'center',\n  border: '1px solid transparent',\n  borderRadius: '$0',\n  cursor: 'pointer',\n  fontFamily: '$body',\n  justifyContent: 'center',\n  whiteSpace: 'nowrap',\n  width: 'max-content',\n  display: 'flex',\n  flexDirection: 'column',\n  p: '0',\n  fontWeight: 400,\n  color: '$grey800',\n  bg: '$base1',\n  position: 'relative',\n  '&:not(:disabled)': {\n    '&:hover': {\n      color: '$accent10',\n      bg: '$base2'\n    },\n    '&:active': {\n      bg: '$base3',\n      color: '$grey1000'\n    },\n    '&:focus-visible': {\n      ...focusVisibleStyleBlock()\n    }\n  },\n  '&:disabled': {\n    opacity: '0.3',\n    cursor: 'not-allowed'\n  },\n  variants: {\n    size: {\n      md: {\n        width: '$4',\n        height: '$4'\n      }\n    },\n    selected: {\n      true: {\n        border: '1px solid $accent9',\n        color: '$accent9',\n        fontWeight: 600,\n        '&:not(:disabled)': {\n          '&:hover': {\n            borderColor: '$accent10',\n            color: '$accent10'\n          },\n          '&:active': {\n            borderColor: '$accent11',\n            fontColor: '$accent11'\n          }\n        }\n      }\n    },\n    indicated: {\n      true: {\n        fontWeight: 600,\n        color: '$accent9',\n        '&:after': {\n          content: '',\n          position: 'absolute',\n          bottom: '$1',\n          left: '50%',\n          transform: 'translateX(-50%)',\n          borderRadius: '$round',\n          size: '4px',\n          bg: '$accent9'\n        },\n        '&:not(:disabled)': {\n          '&:hover': {\n            color: '$accent10',\n            '&:after': {\n              bg: '$accent10'\n            }\n          },\n          '&:active': {\n            color: '$accent11',\n            '&:after': {\n              bg: '$accent11'\n            }\n          }\n        }\n      }\n    }\n  }\n})\n\nexport const PaginationItem: React.FC<IPaginationItemProps> = ({\n  pageNumber,\n  css\n}) => {\n  const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } =\n    usePagination()\n\n  const isIndicated = indicatedPages.includes(pageNumber)\n  const isDisabled = disabledPages.includes(pageNumber)\n\n  const isSelected = currentPage === pageNumber\n\n  const handleOnHover = () => {\n    if (isSelected || isDisabled) return\n    onItemHover?.(pageNumber)\n  }\n\n  return (\n    <StyledButton\n      selected={isSelected}\n      size=\"md\"\n      onClick={() => goToPage(pageNumber)}\n      css={css}\n      indicated={isIndicated}\n      disabled={isDisabled}\n      aria-current={isSelected && 'page'}\n      aria-disabled={isDisabled}\n      onMouseOver={handleOnHover}\n    >\n      {pageNumber}\n    </StyledButton>\n  )\n}\n"],"names":["StyledButton","styled","focusVisibleStyleBlock","PaginationItem","pageNumber","css","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","React"],"mappings":"0YAQA,MAAMA,EAAeC,EAAO,SAAU,CACpC,WAAY,SACZ,OAAQ,wBACR,aAAc,KACd,OAAQ,UACR,WAAY,QACZ,eAAgB,SAChB,WAAY,SACZ,MAAO,cACP,QAAS,OACT,cAAe,SACf,EAAG,IACH,WAAY,IACZ,MAAO,WACP,GAAI,SACJ,SAAU,WACV,mBAAoB,CAClB,UAAW,CACT,MAAO,YACP,GAAI,QACN,EACA,WAAY,CACV,GAAI,SACJ,MAAO,WACT,EACA,kBAAmB,CACjB,GAAGC,EAAuB,CAC5B,CACF,EACA,aAAc,CACZ,QAAS,MACT,OAAQ,aACV,EACA,SAAU,CACR,KAAM,CACJ,GAAI,CACF,MAAO,KACP,OAAQ,IACV,CACF,EACA,SAAU,CACR,KAAM,CACJ,OAAQ,qBACR,MAAO,WACP,WAAY,IACZ,mBAAoB,CAClB,UAAW,CACT,YAAa,YACb,MAAO,WACT,EACA,WAAY,CACV,YAAa,YACb,UAAW,WACb,CACF,CACF,CACF,EACA,UAAW,CACT,KAAM,CACJ,WAAY,IACZ,MAAO,WACP,UAAW,CACT,QAAS,GACT,SAAU,WACV,OAAQ,KACR,KAAM,MACN,UAAW,mBACX,aAAc,SACd,KAAM,MACN,GAAI,UACN,EACA,mBAAoB,CAClB,UAAW,CACT,MAAO,YACP,UAAW,CACT,GAAI,WACN,CACF,EACA,WAAY,CACV,MAAO,YACP,UAAW,CACT,GAAI,WACN,CACF,CACF,CACF,CACF,CACF,CACF,CAAC,EAEYC,EAAiD,CAAC,CAC7D,WAAAC,EACA,IAAAC,CACF,IAAM,CACJ,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,EAAAA,EAEIC,EAAcJ,EAAe,SAASJ,CAAU,EAChDS,EAAaJ,EAAc,SAASL,CAAU,EAE9CU,EAAaR,IAAgBF,EAOnC,OACEW,EAAA,cAACf,EAAA,CACC,SAAUc,EACV,KAAK,KACL,QAAS,IAAMP,EAASH,CAAU,EAClC,IAAKC,EACL,UAAWO,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAfkB,IAAM,CACtBC,GAAcD,GAClBH,GAAA,MAAAA,EAAcN,CAAAA,CAChB,CAcKA,EAAAA,CACH,CAEJ"}

package/dist/components/pagination/PaginationPages.d.ts

@@ -1,2 +0,0 @@
-/// <reference types="react" />
-export declare const PaginationPages: () => JSX.Element;

package/dist/components/pagination/PaginationPages.js

@@ -1,2 +0,0 @@
-import*as e from"react";import{Flex as i}from"../flex/Flex.js";import{PaginationItem as n}from"./PaginationItem.js";import{PaginationPopover as l}from"./PaginationPopover.js";import{usePagination as p}from"./usePagination.js";const g=()=>{const{pagesCount:a,paginationItems:t,paginationAlignment:m}=p(),r=a>t.length;return e.createElement(i,{gap:1},r&&m==="start"&&e.createElement(e.Fragment,null,e.createElement(n,{pageNumber:1}),e.createElement(l,null)),t==null?void 0:t.map(o=>e.createElement(n,{key:o,pageNumber:o})),r&&m==="end"&&e.createElement(e.Fragment,null,e.createElement(l,null),e.createElement(n,{pageNumber:a})))};export{g as PaginationPages};
-//# sourceMappingURL=PaginationPages.js.map

package/dist/components/pagination/PaginationPages.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"PaginationPages.js","sources":["../../../src/components/pagination/PaginationPages.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '../flex'\nimport { PaginationItem } from './PaginationItem'\nimport { PaginationPopover } from './PaginationPopover'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPages = () => {\n  const { pagesCount, paginationItems, paginationAlignment } = usePagination()\n\n  const isTruncated = pagesCount > paginationItems.length\n\n  return (\n    <Flex gap={1}>\n      {isTruncated && paginationAlignment === 'start' && (\n        <>\n          <PaginationItem pageNumber={1} />\n          <PaginationPopover />\n        </>\n      )}\n      {paginationItems?.map((pageNumber) => (\n        <PaginationItem key={pageNumber} pageNumber={pageNumber} />\n      ))}\n      {isTruncated && paginationAlignment === 'end' && (\n        <>\n          <PaginationPopover />\n          <PaginationItem pageNumber={pagesCount} />\n        </>\n      )}\n    </Flex>\n  )\n}\n"],"names":["PaginationPages","pagesCount","paginationItems","paginationAlignment","usePagination","isTruncated","React","Flex","PaginationItem","PaginationPopover","pageNumber"],"mappings":"kOAOO,MAAMA,EAAkB,IAAM,CACnC,KAAM,CAAE,WAAAC,EAAY,gBAAAC,EAAiB,oBAAAC,CAAoB,EAAIC,EAAAA,EAEvDC,EAAcJ,EAAaC,EAAgB,OAEjD,OACEI,EAAA,cAACC,EAAA,CAAK,IAAK,CACRF,EAAAA,GAAeF,IAAwB,SACtCG,EAAA,cAAAA,EAAA,SACEA,KAAAA,EAAA,cAACE,EAAA,CAAe,WAAY,CAAG,CAAA,EAC/BF,EAAA,cAACG,EAAA,IAAkB,CACrB,EAEDP,GAAA,KAAAA,OAAAA,EAAiB,IAAKQ,GACrBJ,EAAA,cAACE,EAAA,CAAe,IAAKE,EAAY,WAAYA,CAAAA,CAAY,GAE1DL,GAAeF,IAAwB,OACtCG,EAAA,cAAAA,EAAA,SAAA,KACEA,EAAA,cAACG,EAAA,IAAkB,EACnBH,EAAA,cAACE,EAAA,CAAe,WAAYP,CAAAA,CAAY,CAC1C,CAEJ,CAEJ"}