@atom-learning/components 3.14.0 → 3.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (29) hide show
  1. package/CHANGELOG.md +15 -4
  2. package/dist/components/chip-toggle-group/ChipToggleGroupRoot.d.ts +1 -1
  3. package/dist/components/chip-toggle-group/ChipToggleGroupRoot.js +1 -1
  4. package/dist/components/chip-toggle-group/ChipToggleGroupRoot.js.map +1 -1
  5. package/dist/components/pagination/Pagination.js +1 -1
  6. package/dist/components/pagination/Pagination.js.map +1 -1
  7. package/dist/components/pagination/PaginationPage.d.ts +1 -1
  8. package/dist/components/pagination/PaginationPage.js +1 -1
  9. package/dist/components/pagination/PaginationPage.js.map +1 -1
  10. package/dist/components/pagination/PaginationPopover.js +1 -1
  11. package/dist/components/pagination/PaginationPopover.js.map +1 -1
  12. package/dist/components/pagination/types.d.ts +1 -0
  13. package/dist/components/tile-toggle-group/TileToggleGroupRoot.d.ts +1 -1
  14. package/dist/components/tile-toggle-group/TileToggleGroupRoot.js +1 -1
  15. package/dist/components/tile-toggle-group/TileToggleGroupRoot.js.map +1 -1
  16. package/dist/components/toggle-group/ToggleGroupRoot.d.ts +3 -2
  17. package/dist/components/toggle-group/ToggleGroupRoot.js +1 -1
  18. package/dist/components/toggle-group/ToggleGroupRoot.js.map +1 -1
  19. package/dist/components/toggle-group/index.d.ts +6 -2
  20. package/dist/docgen.json +1 -1
  21. package/dist/index.cjs.js +1 -1
  22. package/dist/index.cjs.js.map +1 -1
  23. package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.d.ts +8 -0
  24. package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.js +2 -0
  25. package/dist/utilities/radix-overrides/toggle-group/ToggleGroupRoot.js.map +1 -0
  26. package/dist/utilities/radix-overrides/toggle-group/index.d.ts +6 -0
  27. package/dist/utilities/radix-overrides/toggle-group/index.js +2 -0
  28. package/dist/utilities/radix-overrides/toggle-group/index.js.map +1 -0
  29. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,11 +1,22 @@
1
- # [3.14.0](https://github.com/Atom-Learning/components/compare/v3.13.0...v3.14.0) (2024-03-07)
1
+ # [3.16.0](https://github.com/Atom-Learning/components/compare/v3.15.0...v3.16.0) (2024-03-19)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * added additional headings to docs page ([716c175](https://github.com/Atom-Learning/components/commit/716c175565335d658f202bef53c54aa520772cfc))
7
+ * changed colours back to accent to not break colour themes ([5aeac06](https://github.com/Atom-Learning/components/commit/5aeac0621810781c3c0f0d167aea51e4c81037af))
8
+ * changed default text colours to use textSubtle rather than grey ([755609c](https://github.com/Atom-Learning/components/commit/755609c1ae5c780070e2a54f115ca7adcb5d551c))
9
+ * correctly formatted the docs page in admin ([c6fcca8](https://github.com/Atom-Learning/components/commit/c6fcca860325c25175507a53c135374bb2d4a888))
10
+ * made sure popover is closed after selecting a page ([be0c84c](https://github.com/Atom-Learning/components/commit/be0c84c0f39887e39cbca4bb6aab98f12ff6a032))
11
+ * replaced white with token ([ae0bf0e](https://github.com/Atom-Learning/components/commit/ae0bf0e15f634e0eadc1bf35f4dcd0388f0ed818))
12
+ * selected indicated didnt 100% match designs ([fb4f8ff](https://github.com/Atom-Learning/components/commit/fb4f8ff4ff8e01bb8bee3c7c361cf22a0294f6b5))
13
+ * updated colours to work with base/accent, fixed indicated and selected state ([e152eba](https://github.com/Atom-Learning/components/commit/e152eba2b6a1fea4fa3c81748e2466903510ca92))
2
14
 
3
15
 
4
16
  ### Features
5
17
 
6
- * added custom popover view, updated tests ([ad03065](https://github.com/Atom-Learning/components/commit/ad030656ee0228c9403d9a4411b1e17cc1fca180))
7
- * refactored to export popover and use children directly in Pagination ([2b6df8b](https://github.com/Atom-Learning/components/commit/2b6df8b96cf46608b66fce4fc2bb8725318e6abd))
8
- * update test to reflect actual use case with icon and text ([de77f38](https://github.com/Atom-Learning/components/commit/de77f38ee622422199141c4da99924e135e810de))
18
+ * changed indicated style from dot to coloured background ([ad8dea6](https://github.com/Atom-Learning/components/commit/ad8dea68ab28f85018138bff12e07380fb8a2663))
19
+ * updated pagination docs ([6019baa](https://github.com/Atom-Learning/components/commit/6019baad7be9a9086992908b4b8d732134ffdd1d))
9
20
 
10
21
  # [1.4.0](https://github.com/Atom-Learning/components/compare/v1.3.0...v1.4.0) (2022-04-11)
11
22
 
@@ -1,6 +1,6 @@
1
- import * as ToggleGroup from '@radix-ui/react-toggle-group';
2
1
  import * as React from 'react';
3
2
  import { ChipGroup } from '../../components/chip';
3
+ import { ToggleGroup } from '../../utilities/radix-overrides/toggle-group';
4
4
  declare type TChipToggleGroupRootProps = React.ComponentProps<typeof ChipGroup> & React.ComponentProps<typeof ToggleGroup.Root>;
5
5
  export declare const ChipToggleGroupRoot: React.ForwardRefExoticComponent<TChipToggleGroupRootProps>;
6
6
  export {};
@@ -1,2 +1,2 @@
1
- import*as e from"@radix-ui/react-toggle-group";import*as o from"react";import"../chip/Chip.js";import{ChipGroup as i}from"../chip/ChipGroup.js";const p=o.forwardRef((r,t)=>o.createElement(i,{ref:t,as:e.Root,orientation:"horizontal",...r}));export{p as ChipToggleGroupRoot};
1
+ import*as o from"react";import"../chip/Chip.js";import{ChipGroup as e}from"../chip/ChipGroup.js";import{ToggleGroup as p}from"../../utilities/radix-overrides/toggle-group/index.js";const i=o.forwardRef((r,t)=>o.createElement(e,{ref:t,as:p.Root,orientation:"horizontal",...r}));export{i as ChipToggleGroupRoot};
2
2
  //# sourceMappingURL=ChipToggleGroupRoot.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ChipToggleGroupRoot.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { ChipGroup } from '~/components/chip'\n\ntype TChipToggleGroupRootProps = React.ComponentProps<typeof ChipGroup> &\n React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const ChipToggleGroupRoot: React.ForwardRefExoticComponent<TChipToggleGroupRootProps> =\n React.forwardRef((props, ref) => {\n return (\n <ChipGroup\n ref={ref}\n as={ToggleGroup.Root}\n orientation=\"horizontal\"\n {...props}\n />\n )\n })\n"],"names":["ChipToggleGroupRoot","React","props","ref","ChipGroup","ToggleGroup"],"mappings":"gJAQO,MAAMA,EACXC,EAAM,WAAW,CAACC,EAAOC,IAErBF,EAAA,cAACG,EAAA,CACC,IAAKD,EACL,GAAIE,EAAY,KAChB,YAAY,aACX,GAAGH,EACN,CAEH"}
1
+ {"version":3,"file":"ChipToggleGroupRoot.js","sources":["../../../src/components/chip-toggle-group/ChipToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ChipGroup } from '~/components/chip'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TChipToggleGroupRootProps = React.ComponentProps<typeof ChipGroup> &\n React.ComponentProps<typeof ToggleGroup.Root>\n\nexport const ChipToggleGroupRoot: React.ForwardRefExoticComponent<TChipToggleGroupRootProps> =\n React.forwardRef((props, ref) => {\n return (\n <ChipGroup\n ref={ref}\n as={ToggleGroup.Root}\n orientation=\"horizontal\"\n {...props}\n />\n )\n })\n"],"names":["ChipToggleGroupRoot","React","props","ref","ChipGroup","ToggleGroup"],"mappings":"qLAQa,MAAAA,EACXC,EAAM,WAAW,CAACC,EAAOC,IAErBF,EAAA,cAACG,EAAA,CACC,IAAKD,EACL,GAAIE,EAAY,KAChB,YAAY,aACX,GAAGH,EACN,CAEH"}
@@ -1,2 +1,2 @@
1
- import*as e from"react";import{ColorScheme as P}from"../../experiments/color-scheme/ColorScheme.js";import{Flex as p}from"../flex/Flex.js";import{VisibleElementsAmount as b}from"./pagination.constants.js";import{PaginationProvider as u}from"./pagination-context/PaginationContext.js";import{PaginationItems as C}from"./PaginationItems.js";import{PaginationPopover as E}from"./PaginationPopover.js";const t=({colorScheme:a,onSelectedPageChange:n,selectedPage:i,visibleElementsCount:l=b.LESS,pagesCount:o,indicatedPages:r=[],disabledPages:m=[],onItemHover:s=()=>null,labels:g={},children:c,...d})=>o?e.createElement(u,{onSelectedPageChange:n,selectedPage:i,visibleElementsCount:l,pagesCount:o,indicatedPages:r,disabledPages:m,onItemHover:s,labels:g},e.createElement(P,{base:"grey1",accent:"primary1",...a,asChild:!0},c||e.createElement(p,{gap:1,...d},e.createElement(C,null)))):null,f=Object.assign(t,{Popover:E});t.displayName="Pagination";export{f as Pagination};
1
+ import*as e from"react";import{ColorScheme as P}from"../../experiments/color-scheme/ColorScheme.js";import{Flex as p}from"../flex/Flex.js";import{VisibleElementsAmount as b}from"./pagination.constants.js";import{PaginationProvider as u}from"./pagination-context/PaginationContext.js";import{PaginationItems as C}from"./PaginationItems.js";import{PaginationPopover as E}from"./PaginationPopover.js";const t=({colorScheme:a,onSelectedPageChange:n,selectedPage:i,visibleElementsCount:l=b.LESS,pagesCount:o,indicatedPages:r=[],disabledPages:m=[],onItemHover:s=()=>null,labels:g={},children:c,...d})=>o?e.createElement(u,{onSelectedPageChange:n,selectedPage:i,visibleElementsCount:l,pagesCount:o,indicatedPages:r,disabledPages:m,onItemHover:s,labels:g},e.createElement(P,{base:"grey1",accent:"primary1",...a,asChild:!0},e.createElement(p,{gap:1,...d},c||e.createElement(C,null)))):null,f=Object.assign(t,{Popover:E});t.displayName="Pagination";export{f as Pagination};
2
2
  //# sourceMappingURL=Pagination.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme'\nimport { Flex } from '../flex'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n colorScheme,\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children,\n ...rest\n}: PaginationProps) => {\n if (!pagesCount) return null\n\n const paginationProviderProps: PaginationProviderProps = {\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount,\n pagesCount,\n indicatedPages,\n disabledPages,\n onItemHover,\n labels\n }\n\n return (\n <PaginationProvider {...paginationProviderProps}>\n <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n {children || (\n <Flex gap={1} {...rest}>\n <PaginationItems />\n </Flex>\n )}\n </ColorScheme>\n </PaginationProvider>\n )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"names":["PaginationComponent","colorScheme","onSelectedPageChange","selectedPage","visibleElementsCount","VisibleElementsAmount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","rest","React","PaginationProvider","ColorScheme","Flex","PaginationItems","Pagination","PaginationPopover"],"mappings":"8YAUA,MAAMA,EAAsB,CAAC,CAC3B,YAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBC,EAAsB,KAC7C,WAAAC,EACA,eAAAC,EAAiB,GACjB,cAAAC,EAAgB,GAChB,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,CAAA,EACT,SAAAC,KACGC,CACL,IACON,EAcHO,EAAA,cAACC,EAAA,CAXD,qBAAAZ,EACA,aAAAC,EACA,qBAAAC,EACA,WAAAE,EACA,eAAAC,EACA,cAAAC,EACA,YAAAC,EACA,OAAAC,CAKEG,EAAAA,EAAA,cAACE,EAAA,CAAY,KAAK,QAAQ,OAAO,WAAY,GAAGd,EAAa,QAAO,EAAA,EACjEU,GACCE,EAAA,cAACG,EAAA,CAAK,IAAK,EAAI,GAAGJ,CAChBC,EAAAA,EAAA,cAACI,EAAA,IAAgB,CACnB,CAEJ,CACF,EAtBsB,KA0BbC,EAAa,OAAO,OAAOlB,EAAqB,CAC3D,QAASmB,CACX,CAAC,EAEDnB,EAAoB,YAAc"}
1
+ {"version":3,"file":"Pagination.js","sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme'\nimport { Flex } from '../flex'\nimport { VisibleElementsAmount } from './pagination.constants'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { PaginationItems } from './PaginationItems'\nimport { PaginationPopover } from './PaginationPopover'\nimport type { PaginationProps, PaginationProviderProps } from './types'\n\nconst PaginationComponent = ({\n colorScheme,\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount = VisibleElementsAmount.LESS,\n pagesCount,\n indicatedPages = [],\n disabledPages = [],\n onItemHover = () => null,\n labels = {},\n children,\n ...rest\n}: PaginationProps) => {\n if (!pagesCount) return null\n\n const paginationProviderProps: PaginationProviderProps = {\n onSelectedPageChange,\n selectedPage,\n visibleElementsCount,\n pagesCount,\n indicatedPages,\n disabledPages,\n onItemHover,\n labels\n }\n\n return (\n <PaginationProvider {...paginationProviderProps}>\n <ColorScheme base=\"grey1\" accent=\"primary1\" {...colorScheme} asChild>\n <Flex gap={1} {...rest}>\n {children || <PaginationItems />}\n </Flex>\n </ColorScheme>\n </PaginationProvider>\n )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"names":["PaginationComponent","colorScheme","onSelectedPageChange","selectedPage","visibleElementsCount","VisibleElementsAmount","pagesCount","indicatedPages","disabledPages","onItemHover","labels","children","rest","React","PaginationProvider","ColorScheme","Flex","PaginationItems","Pagination","PaginationPopover"],"mappings":"8YAUA,MAAMA,EAAsB,CAAC,CAC3B,YAAAC,EACA,qBAAAC,EACA,aAAAC,EACA,qBAAAC,EAAuBC,EAAsB,KAC7C,WAAAC,EACA,eAAAC,EAAiB,GACjB,cAAAC,EAAgB,GAChB,YAAAC,EAAc,IAAM,KACpB,OAAAC,EAAS,CAAA,EACT,SAAAC,KACGC,CACL,IACON,EAcHO,EAAA,cAACC,EAAA,CAXD,qBAAAZ,EACA,aAAAC,EACA,qBAAAC,EACA,WAAAE,EACA,eAAAC,EACA,cAAAC,EACA,YAAAC,EACA,OAAAC,CAKEG,EAAAA,EAAA,cAACE,EAAA,CAAY,KAAK,QAAQ,OAAO,WAAY,GAAGd,EAAa,QAAO,EAAA,EAClEY,EAAA,cAACG,EAAA,CAAK,IAAK,EAAI,GAAGJ,CAAAA,EACfD,GAAYE,EAAA,cAACI,EAAA,IAAgB,CAChC,CACF,CACF,EApBsB,KAwBbC,EAAa,OAAO,OAAOlB,EAAqB,CAC3D,QAASmB,CACX,CAAC,EAEDnB,EAAoB,YAAc"}
@@ -1,3 +1,3 @@
1
1
  /// <reference types="react" />
2
2
  import type { PaginationPageProps } from './types';
3
- export declare const PaginationPage: ({ pageNumber, css }: PaginationPageProps) => JSX.Element;
3
+ export declare const PaginationPage: ({ pageNumber, css, onClick }: PaginationPageProps) => JSX.Element;
@@ -1,2 +1,2 @@
1
- import*as d from"react";import{styled as b}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as g}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{usePagination as m}from"./usePagination.js";const p=b("button",{alignItems:"center",border:"1px solid transparent",borderRadius:"$0",cursor:"pointer",fontFamily:"$body",justifyContent:"center",whiteSpace:"nowrap",width:"max-content",display:"flex",flexDirection:"column",p:"0",fontWeight:400,color:"$grey800",bg:"$base1",position:"relative","&:not(:disabled)":{"&:hover":{color:"$accent10",bg:"$base2"},"&:active":{bg:"$base3",color:"$grey1000"},"&:focus-visible":{...g()}},"&:disabled":{opacity:"0.3",cursor:"not-allowed"},variants:{size:{md:{width:"$4",height:"$4"}},selected:{true:{border:"1px solid $accent9",color:"$accent9",fontWeight:600,"&:not(:disabled)":{"&:hover":{borderColor:"$accent10",color:"$accent10"},"&:active":{borderColor:"$accent11",fontColor:"$accent11"}}}},indicated:{true:{fontWeight:600,color:"$accent9","&:after":{content:"",position:"absolute",bottom:"$1",left:"50%",transform:"translateX(-50%)",borderRadius:"$round",size:"4px",bg:"$accent9"},"&:not(:disabled)":{"&:hover":{color:"$accent10","&:after":{bg:"$accent10"}},"&:active":{color:"$accent11","&:after":{bg:"$accent11"}}}}}}}),u=({pageNumber:e,css:a})=>{const{currentPage:c,goToPage:i,indicatedPages:n,disabledPages:s,onItemHover:r}=m(),l=n.includes(e),o=s.includes(e),t=c===e;return d.createElement(p,{selected:t,size:"md",onClick:()=>i(e),css:a,indicated:l,disabled:o,"aria-current":t&&"page","aria-disabled":o,onMouseOver:()=>{t||o||r==null||r(e)}},e)};export{u as PaginationPage};
1
+ import*as m from"react";import{styled as u}from"../../stitches.js";import"../../utilities/css-wrapper/CSSWrapper.js";import"../../utilities/no-overflow-wrapper/NoOverflowWrapper.js";import"color2k";import{focusVisibleStyleBlock as h}from"../../utilities/style/focus-visible-style-block.js";import"../../utilities/style/keyframe-animations.js";import{disabledStyle as $}from"../../utilities/style/disabledStyle.js";import{usePagination as f}from"./usePagination.js";const v=u("button",{alignItems:"center",border:"1px solid transparent",borderRadius:"$0",cursor:"pointer",fontFamily:"$body",justifyContent:"center",whiteSpace:"nowrap",width:"max-content",display:"flex",flexDirection:"column",p:"0",fontWeight:400,color:"$textSubtle",bg:"$base1",position:"relative","&:not(:disabled)":{"&:hover":{color:"$textRegular",bg:"$base2"},"&:active":{color:"$textBold",bg:"$base3"},"&:focus-visible":{...h()}},"&[disabled]":{...$,pointerEvents:"none"},variants:{size:{md:{width:"$4",height:"$4"}},selected:{true:{border:"1px solid $accent9",color:"$accent9",fontWeight:600,"&:not(:disabled)":{"&:hover":{borderColor:"$accent10",color:"$accent10"},"&:active":{borderColor:"$accent11",fontColor:"$accent11"}}}},indicated:{true:{fontWeight:600,color:"white",bg:"$accent9","&:not(:disabled)":{"&:hover":{color:"white",bg:"$accent10"},"&:active":{color:"white",bg:"$accent11"}}}}},compoundVariants:[{selected:!0,indicated:!0,css:{fontWeight:600,color:"white",bg:"$accent9",boxShadow:"$colors$accent9 0px 0px 0px 1px","&:not(:focus-visible)":{borderColor:"white !important"},"&:not(:disabled)":{"&:hover":{color:"white",bg:"$accent10"},"&:active":{color:"white",bg:"$accent11"}}}}]}),x=({pageNumber:e,css:c,onClick:i})=>{const{currentPage:n,goToPage:a,indicatedPages:l,disabledPages:s,onItemHover:r}=f(),d=l.includes(e),o=s.includes(e),t=n===e,b=()=>{t||o||r==null||r(e)},p=g=>{i==null||i(),a(g)};return m.createElement(v,{selected:t,size:"md",onClick:()=>p(e),css:c,indicated:d,disabled:o,"aria-current":t&&"page","aria-disabled":o,onMouseOver:b},e)};export{x as PaginationPage};
2
2
  //# sourceMappingURL=PaginationPage.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PaginationPage.js","sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { focusVisibleStyleBlock } from '~/utilities'\n\nimport { styled } from '../../stitches'\nimport type { PaginationPageProps } 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 PaginationPage = ({ pageNumber, css }: PaginationPageProps) => {\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","PaginationPage","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,EAAiB,CAAC,CAAE,WAAAC,EAAY,IAAAC,CAAI,IAA2B,CAC1E,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"}
1
+ {"version":3,"file":"PaginationPage.js","sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { disabledStyle, focusVisibleStyleBlock } from '~/utilities'\n\nimport { styled } from '../../stitches'\nimport type { PaginationPageProps } 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: '$textSubtle',\n bg: '$base1',\n position: 'relative',\n\n '&:not(:disabled)': {\n '&:hover': {\n color: '$textRegular',\n bg: '$base2'\n },\n '&:active': {\n color: '$textBold',\n bg: '$base3'\n },\n '&:focus-visible': {\n ...focusVisibleStyleBlock()\n }\n },\n '&[disabled]': {\n ...disabledStyle,\n pointerEvents: 'none'\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: 'white',\n bg: '$accent9',\n '&:not(:disabled)': {\n '&:hover': {\n color: 'white',\n bg: '$accent10'\n },\n '&:active': {\n color: 'white',\n bg: '$accent11'\n }\n }\n }\n }\n },\n\n compoundVariants: [\n {\n selected: true,\n indicated: true,\n css: {\n fontWeight: 600,\n color: 'white',\n bg: '$accent9',\n boxShadow: '$colors$accent9 0px 0px 0px 1px',\n '&:not(:focus-visible)': {\n borderColor: 'white !important'\n },\n '&:not(:disabled)': {\n '&:hover': {\n color: 'white',\n bg: '$accent10'\n },\n '&:active': {\n color: 'white',\n bg: '$accent11'\n }\n }\n }\n }\n ]\n})\n\nexport const PaginationPage = ({\n pageNumber,\n css,\n onClick\n}: PaginationPageProps) => {\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 const handleOnClick = (pageNumber) => {\n onClick?.()\n goToPage(pageNumber)\n }\n\n return (\n <StyledButton\n selected={isSelected}\n size=\"md\"\n onClick={() => handleOnClick(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","disabledStyle","PaginationPage","pageNumber","css","onClick","currentPage","goToPage","indicatedPages","disabledPages","onItemHover","usePagination","isIndicated","isDisabled","isSelected","handleOnHover","handleOnClick","React"],"mappings":"idAQA,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,cACP,GAAI,SACJ,SAAU,WAEV,mBAAoB,CAClB,UAAW,CACT,MAAO,eACP,GAAI,QACN,EACA,WAAY,CACV,MAAO,YACP,GAAI,QACN,EACA,kBAAmB,CACjB,GAAGC,GACL,CACF,EACA,cAAe,CACb,GAAGC,EACH,cAAe,MACjB,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,QACP,GAAI,WACJ,mBAAoB,CAClB,UAAW,CACT,MAAO,QACP,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,WACN,CACF,CACF,CACF,CACF,EAEA,iBAAkB,CAChB,CACE,SAAU,GACV,UAAW,GACX,IAAK,CACH,WAAY,IACZ,MAAO,QACP,GAAI,WACJ,UAAW,kCACX,wBAAyB,CACvB,YAAa,kBACf,EACA,mBAAoB,CAClB,UAAW,CACT,MAAO,QACP,GAAI,WACN,EACA,WAAY,CACV,MAAO,QACP,GAAI,WACN,CACF,CACF,CACF,CACF,CACF,CAAC,EAEYC,EAAiB,CAAC,CAC7B,WAAAC,EACA,IAAAC,EACA,QAAAC,CACF,IAA2B,CACzB,KAAM,CAAE,YAAAC,EAAa,SAAAC,EAAU,eAAAC,EAAgB,cAAAC,EAAe,YAAAC,CAAY,EACxEC,EAAc,EAEVC,EAAcJ,EAAe,SAASL,CAAU,EAChDU,EAAaJ,EAAc,SAASN,CAAU,EAE9CW,EAAaR,IAAgBH,EAE7BY,EAAgB,IAAM,CACtBD,GAAcD,GAClBH,GAAA,MAAAA,EAAcP,CAAAA,CAChB,EAEMa,EAAiBb,GAAe,CACpCE,GAAA,MAAAA,EAAAA,EACAE,EAASJ,CAAU,CACrB,EAEA,OACEc,EAAA,cAACnB,EAAA,CACC,SAAUgB,EACV,KAAK,KACL,QAAS,IAAME,EAAcb,CAAU,EACvC,IAAKC,EACL,UAAWQ,EACX,SAAUC,EACV,eAAcC,GAAc,OAC5B,gBAAeD,EACf,YAAaE,CAAAA,EAEZZ,CACH,CAEJ"}
@@ -1,2 +1,2 @@
1
- import{Ellypsis as a}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as l}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as s}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as c}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import{PaginationPage as g}from"./PaginationPage.js";import{usePagination as f}from"./usePagination.js";const u=({children:m})=>{const{pagesCount:e,labels:i}=f(),p=Array.from({length:e},(o,n)=>n+1);return t.createElement(r,null,t.createElement(r.Trigger,{asChild:!0},m||t.createElement(l,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(c,{is:a}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(s,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:1,justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(g,{key:o,pageNumber:o,css:{bg:"$white"}})))))};export{u as PaginationPopover};
1
+ import{Ellypsis as s}from"@atom-learning/icons";import t from"react";import"../accordion/Accordion.js";import{ActionIcon as c}from"../action-icon/ActionIcon.js";import"../alert-dialog/AlertDialog.js";import"../alert-dialog/alert-context/AlertContext.js";import"../avatar/Avatar.js";import"../badge/Badge.js";import"../banner/banner-regular/BannerRegular.js";import"../banner/banner-slim/BannerSlim.js";import"../box/Box.js";import"../button/Button.js";import"../carousel/Carousel.js";import"../checkbox/Checkbox.js";import"../checkbox-group/CheckboxGroup.js";import"../checkbox-tree/CheckboxTree.js";import"../checkbox-field/CheckboxField.js";import"../chip/Chip.js";import"../chip/ChipGroup.js";import"../chip-dismissible-group/index.js";import"../chip-toggle-group/index.js";import"../combobox/Combobox.js";import"../create-password-field/CreatePasswordField.js";import"../data-table/DataTableContext.js";import"../data-table/DataTable.js";import"../date-field/DateField.js";import"../date-input/DateInput.js";import"../dialog/Dialog.js";import"../dismissible/index.js";import"../dismissible-group/index.js";import"../divider/Divider.js";import"../drawer/Drawer.js";import"../dropdown-menu/DropdownMenu.js";import"../empty-state/EmptyState.js";import"../field-wrapper/FieldWrapper.js";import"../field-wrapper/InlineFieldWrapper.js";import"../file-input/FileInput.js";import{Flex as g}from"../flex/Flex.js";import"../form/Form.js";import"dlv";import"react-hook-form";import"../grid/Grid.js";import"../heading/Heading.js";import{Icon as f}from"../icon/Icon.js";import"../image/Image.js";import"../inline-message/InlineMessage.js";import"../input/Input.js";import"../input-field/InputField.js";import"../label/Label.js";import"../link/Link.js";import"../list/List.js";import"../loader/Loader.js";import"../markdown-content/MarkdownContent.js";import"../navigation/NavigationMenu.js";import"../navigation-menu-vertical/NavigationMenuVertical.js";import"../notification-badge/NotificationBadge.js";import"../number-input/NumberInput.js";import"../number-input-field/NumberInputField.js";import"./Pagination.js";import"../password-field/PasswordField.js";import"../password-input/PasswordInput.js";import{Popover as r}from"../popover/Popover.js";import"../progress-bar/ProgressBar.js";import"../radio-button/RadioButton.js";import"../radio-button/RadioButtonGroup.js";import"../radio-button-field/RadioButtonField.js";import"../radio-card/RadioCard.js";import"@radix-ui/react-radio-group";import"../search-field/SearchField.js";import"../search-input/SearchInput.js";import"../section-message/SectionMessage.js";import"../select/Select.js";import"../select-field/SelectField.js";import"../side-bar/SideBar.js";import"../side-bar/SideBarContext.js";import"../slider/Slider.js";import"../slider-field/SliderField.js";import"../sortable/SortableHandle.js";import"../sortable/SortableItem.js";import"../sortable/SortableRoot.js";import"../spacer/Spacer.js";import"../stack-content/StackContent.js";import"../stepper/Stepper.js";import"../switch/Switch.js";import"../table/Table.js";import"../tabs/Tabs.js";import"../text/Text.js";import"../textarea/Textarea.js";import"../textarea-field/TextareaField.js";import"../tile/Tile.js";import"../tile-interactive/TileInteractive.js";import"../tile-toggle-group/index.js";import"../toast/Toast.js";import"../toast/ToastProvider.js";import"../toggle-group/ToggleGroupButton.js";import"../toggle-group/ToggleGroupItem.js";import"../toggle-group/ToggleGroupRoot.js";import"../tooltip/Tooltip.js";import"../top-bar/TopBar.js";import"../tree/Tree.js";import"../video/Video.js";import{PaginationPage as u}from"./PaginationPage.js";import{usePagination as d}from"./usePagination.js";const E=({children:e})=>{const{pagesCount:n,labels:i}=d(),p=Array.from({length:n},(o,l)=>l+1),[a,m]=t.useState(!1);return t.createElement(r,{open:a,onOpenChange:m,defaultOpen:!1},t.createElement(r.Trigger,{asChild:!0},e||t.createElement(c,{hasTooltip:!1,size:"md",theme:"neutral",label:(i==null?void 0:i.popoverTriggerLabel)||"Open pagination popover","data-testid":"pagination_popover_trigger"},t.createElement(f,{is:s}))),t.createElement(r.Content,{size:"md",showCloseButton:!1,css:{p:0}},t.createElement(g,{css:{p:"$4",display:"flex",flexWrap:"wrap",gap:"$1",justifyContent:"center"}},p==null?void 0:p.map(o=>t.createElement(u,{key:o,pageNumber:o,onClick:()=>m(!1)})))))};export{E as PaginationPopover};
2
2
  //# sourceMappingURL=PaginationPopover.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n children\n}: React.PropsWithChildren<unknown>) => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n return (\n <Popover>\n <Popover.Trigger asChild>\n {children || (\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n )}\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n <Flex\n css={{\n p: '$4',\n display: 'flex',\n flexWrap: 'wrap',\n gap: 1,\n justifyContent: 'center'\n }}\n >\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n css={{ bg: '$white' }}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"8nHAOO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEA,OACEC,EAAA,cAACC,EAAA,KACCD,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,IACrBR,GACCO,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOP,GAAA,YAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZK,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,GAC7DD,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,EACL,eAAgB,QAClB,CAECR,EAAAA,GAAA,YAAAA,EAAiB,IAAKS,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,IAAK,CAAE,GAAI,QAAS,CAAA,CACtB,CAGN,CAAA,CACF,CACF,CAEJ"}
1
+ {"version":3,"file":"PaginationPopover.js","sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon, Flex, Icon, Popover } from '..'\nimport { PaginationPage } from './PaginationPage'\nimport { usePagination } from './usePagination'\n\nexport const PaginationPopover = ({\n children\n}: React.PropsWithChildren<unknown>) => {\n const { pagesCount, labels } = usePagination()\n const paginationItems = Array.from(\n { length: pagesCount },\n (_, index) => index + 1\n )\n\n const [isOpen, setIsOpen] = React.useState<boolean>(false)\n\n return (\n <Popover open={isOpen} onOpenChange={setIsOpen} defaultOpen={false}>\n <Popover.Trigger asChild>\n {children || (\n <ActionIcon\n hasTooltip={false}\n size=\"md\"\n theme=\"neutral\"\n label={labels?.popoverTriggerLabel || 'Open pagination popover'}\n data-testid=\"pagination_popover_trigger\"\n >\n <Icon is={Ellypsis} />\n </ActionIcon>\n )}\n </Popover.Trigger>\n <Popover.Content size=\"md\" showCloseButton={false} css={{ p: 0 }}>\n <Flex\n css={{\n p: '$4',\n display: 'flex',\n flexWrap: 'wrap',\n gap: '$1',\n justifyContent: 'center'\n }}\n >\n {paginationItems?.map((pageNumber) => {\n return (\n <PaginationPage\n key={pageNumber}\n pageNumber={pageNumber}\n onClick={() => setIsOpen(false)}\n />\n )\n })}\n </Flex>\n </Popover.Content>\n </Popover>\n )\n}\n"],"names":["PaginationPopover","children","pagesCount","labels","usePagination","paginationItems","_","index","isOpen","setIsOpen","React","Popover","ActionIcon","Icon","Ellypsis","Flex","pageNumber","PaginationPage"],"mappings":"8nHAOO,MAAMA,EAAoB,CAAC,CAChC,SAAAC,CACF,IAAwC,CACtC,KAAM,CAAE,WAAAC,EAAY,OAAAC,CAAO,EAAIC,EAAc,EACvCC,EAAkB,MAAM,KAC5B,CAAE,OAAQH,CAAW,EACrB,CAACI,EAAGC,IAAUA,EAAQ,CACxB,EAEM,CAACC,EAAQC,CAAS,EAAIC,EAAM,SAAkB,EAAK,EAEzD,OACEA,EAAA,cAACC,EAAA,CAAQ,KAAMH,EAAQ,aAAcC,EAAW,YAAa,EAC3DC,EAAAA,EAAA,cAACC,EAAQ,QAAR,CAAgB,QAAO,EAAA,EACrBV,GACCS,EAAA,cAACE,EAAA,CACC,WAAY,GACZ,KAAK,KACL,MAAM,UACN,OAAOT,GAAA,KAAAA,OAAAA,EAAQ,sBAAuB,0BACtC,cAAY,4BAEZO,EAAAA,EAAA,cAACG,EAAA,CAAK,GAAIC,CAAAA,CAAU,CACtB,CAEJ,EACAJ,EAAA,cAACC,EAAQ,QAAR,CAAgB,KAAK,KAAK,gBAAiB,GAAO,IAAK,CAAE,EAAG,CAAE,CAC7DD,EAAAA,EAAA,cAACK,EAAA,CACC,IAAK,CACH,EAAG,KACH,QAAS,OACT,SAAU,OACV,IAAK,KACL,eAAgB,QAClB,GAECV,GAAA,KAAA,OAAAA,EAAiB,IAAKW,GAEnBN,EAAA,cAACO,EAAA,CACC,IAAKD,EACL,WAAYA,EACZ,QAAS,IAAMP,EAAU,EAAK,EAChC,CAGN,CAAA,CACF,CACF,CAEJ"}
@@ -20,6 +20,7 @@ export declare type TVisibleElementsCount = 6 | 8;
20
20
  export interface PaginationPageProps {
21
21
  pageNumber: number;
22
22
  css?: CSS;
23
+ onClick?: () => void;
23
24
  }
24
25
  export interface PaginationContextValue extends BasePaginationProps {
25
26
  currentPage: number;
@@ -1,6 +1,6 @@
1
- import * as ToggleGroup from '@radix-ui/react-toggle-group';
2
1
  import * as React from 'react';
3
2
  import { TileGroup } from '../../components/tile';
3
+ import { ToggleGroup } from '../../utilities/radix-overrides/toggle-group';
4
4
  declare type TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> & React.ComponentProps<typeof ToggleGroup.Root>;
5
5
  export declare const TileToggleGroupRoot: React.ForwardRefExoticComponent<TTileToggleGroupRootProps>;
6
6
  export {};
@@ -1,2 +1,2 @@
1
- import*as i from"@radix-ui/react-toggle-group";import*as r from"react";import"../tile/Tile.js";import{TileGroup as a}from"../tile/TileGroup.js";const n=o=>o==="horizontal"?"row":o==="vertical"?"column":void 0,p=r.forwardRef((o,t)=>{const e=n(o.orientation);return r.createElement(a,{ref:t,as:i.Root,direction:e,gap:"2",wrap:"wrap",...o})});export{p as TileToggleGroupRoot};
1
+ import*as r from"react";import"../tile/Tile.js";import{TileGroup as i}from"../tile/TileGroup.js";import{ToggleGroup as n}from"../../utilities/radix-overrides/toggle-group/index.js";const p=o=>o==="horizontal"?"row":o==="vertical"?"column":void 0,a=r.forwardRef((o,t)=>{const e=p(o.orientation);return r.createElement(i,{ref:t,as:n.Root,direction:e,gap:"2",wrap:"wrap",...o})});export{a as TileToggleGroupRoot};
2
2
  //# sourceMappingURL=TileToggleGroupRoot.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"TileToggleGroupRoot.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { TileGroup } from '~/components/tile'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> &\n React.ComponentProps<typeof ToggleGroup.Root>\n\nconst orientationToDirection = (orientation) =>\n orientation === 'horizontal'\n ? 'row'\n : orientation === 'vertical'\n ? 'column'\n : undefined\n\nexport const TileToggleGroupRoot: React.ForwardRefExoticComponent<TTileToggleGroupRootProps> =\n React.forwardRef((props, ref) => {\n const direction = orientationToDirection(props.orientation)\n return (\n <TileGroup\n ref={ref}\n as={ToggleGroup.Root}\n direction={direction}\n gap=\"2\"\n wrap=\"wrap\"\n {...props}\n />\n )\n })\n"],"names":["orientationToDirection","orientation","TileToggleGroupRoot","React","props","ref","direction","TileGroup","ToggleGroup"],"mappings":"gJAQA,MAAMA,EAA0BC,GAC9BA,IAAgB,aACZ,MACAA,IAAgB,WAChB,SACA,OAEOC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAQ,CAC/B,MAAMC,EAAYN,EAAuBI,EAAM,WAAW,EAC1D,OACED,EAAA,cAACI,EAAA,CACC,IAAKF,EACL,GAAIG,EAAY,KAChB,UAAWF,EACX,IAAI,IACJ,KAAK,OACJ,GAAGF,CACN,CAAA,CAEJ,CAAC"}
1
+ {"version":3,"file":"TileToggleGroupRoot.js","sources":["../../../src/components/tile-toggle-group/TileToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { TileGroup } from '~/components/tile'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\ntype TTileToggleGroupRootProps = React.ComponentProps<typeof TileGroup> &\n React.ComponentProps<typeof ToggleGroup.Root>\n\nconst orientationToDirection = (orientation) =>\n orientation === 'horizontal'\n ? 'row'\n : orientation === 'vertical'\n ? 'column'\n : undefined\n\nexport const TileToggleGroupRoot: React.ForwardRefExoticComponent<TTileToggleGroupRootProps> =\n React.forwardRef((props, ref) => {\n const direction = orientationToDirection(props.orientation)\n return (\n <TileGroup\n ref={ref}\n as={ToggleGroup.Root}\n direction={direction}\n gap=\"2\"\n wrap=\"wrap\"\n {...props}\n />\n )\n })\n"],"names":["orientationToDirection","orientation","TileToggleGroupRoot","React","props","ref","direction","TileGroup","ToggleGroup"],"mappings":"qLAQA,MAAMA,EAA0BC,GAC9BA,IAAgB,aACZ,MACAA,IAAgB,WAChB,SACA,OAEOC,EACXC,EAAM,WAAW,CAACC,EAAOC,IAAQ,CAC/B,MAAMC,EAAYN,EAAuBI,EAAM,WAAW,EAC1D,OACED,EAAA,cAACI,EAAA,CACC,IAAKF,EACL,GAAIG,EAAY,KAChB,UAAWF,EACX,IAAI,IACJ,KAAK,OACJ,GAAGF,CACN,CAAA,CAEJ,CAAC"}
@@ -1,11 +1,12 @@
1
- import * as ToggleGroup from '@radix-ui/react-toggle-group';
2
1
  import * as React from 'react';
3
2
  import { Flex } from '../../components/flex';
4
3
  declare type RootType = {
5
4
  orientation?: 'horizontal' | 'vertical';
6
5
  isFullWidth?: boolean;
7
6
  };
8
- export declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<(ToggleGroup.ToggleGroupSingleProps | ToggleGroup.ToggleGroupMultipleProps) & React.RefAttributes<HTMLDivElement>>, {
7
+ export declare const StyledRoot: import("@stitches/react/types/styled-component").StyledComponent<React.ForwardRefExoticComponent<((import("@radix-ui/react-toggle-group").ToggleGroupSingleProps | import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps) & React.RefAttributes<HTMLDivElement>) & {
8
+ disableDeselect?: boolean | undefined;
9
+ }>, {
9
10
  isFullWidth?: boolean | "true" | undefined;
10
11
  hasGap?: boolean | "true" | "false" | undefined;
11
12
  direction?: "row" | "column" | undefined;
@@ -1,2 +1,2 @@
1
- import*as c from"@radix-ui/react-toggle-group";import*as r from"react";import{Flex as f}from"../flex/Flex.js";import{styled as m}from"../../stitches.js";import{StyledItem as t}from"./ToggleGroupItem.js";const s=m(c.Root,{width:"fit-content",variants:{isFullWidth:{true:{width:"100%",[`& ${t}`]:{flexBasis:0,flexGrow:1}}},hasGap:{true:{[`& ${t}`]:{borderRadius:"$0"}},false:{borderRadius:"$0",bg:"white",[`& ${t}`]:{bg:"transparent",borderRadius:0,position:"relative","&:not(:last-child)::before":{content:"",position:"absolute"}}}},direction:{column:{},row:{}}},compoundVariants:[{hasGap:!1,direction:"row",css:{[`& ${t}`]:{"&:not(:last-child)::before":{top:"-1px",height:"calc(100% + 2px)",width:"1px",right:"0",transform:"translateX(150%)"},"&:not(:first-child)":{borderLeftColor:"transparent"},"&:not(:last-child)":{borderRightColor:"transparent"},"&:first-child":{borderTopLeftRadius:"$0",borderBottomLeftRadius:"$0"},"&:last-child":{borderTopRightRadius:"$0",borderBottomRightRadius:"$0"}}}},{hasGap:!1,direction:"column",css:{[`& ${t}`]:{"&:not(:last-child)::before":{bottom:0,left:"-1px",height:"1px",width:"calc(100% + 2px)",transform:"translateY(150%)"},"&:first-child":{borderTopLeftRadius:"$0",borderTopRightRadius:"$0"},"&:last-child":{borderBottomLeftRadius:"$0",borderBottomRightRadius:"$0"},"&:not(:first-child)":{borderTopColor:"transparent"},"&:not(:last-child)":{borderBottomColor:"transparent"}}}}]}),u=o=>o==="horizontal"?"row":"column",b=r.forwardRef(({orientation:o="horizontal",gap:i,isFullWidth:d,children:n,wrap:l,...p},h)=>{const e=typeof i=="number",a=u(o);return r.createElement(s,{ref:h,direction:a,hasGap:e,isFullWidth:d,orientation:o,...p},r.createElement(f,{direction:a,gap:e?i:void 0,wrap:l||"nowrap"},n))});export{s as StyledRoot,b as ToggleGroupRoot};
1
+ import*as r from"react";import{Flex as c}from"../flex/Flex.js";import{styled as f}from"../../stitches.js";import{ToggleGroup as m}from"../../utilities/radix-overrides/toggle-group/index.js";import{StyledItem as t}from"./ToggleGroupItem.js";const d=f(m.Root,{width:"fit-content",variants:{isFullWidth:{true:{width:"100%",[`& ${t}`]:{flexBasis:0,flexGrow:1}}},hasGap:{true:{[`& ${t}`]:{borderRadius:"$0"}},false:{borderRadius:"$0",bg:"white",[`& ${t}`]:{bg:"transparent",borderRadius:0,position:"relative","&:not(:last-child)::before":{content:"",position:"absolute"}}}},direction:{column:{},row:{}}},compoundVariants:[{hasGap:!1,direction:"row",css:{[`& ${t}`]:{"&:not(:last-child)::before":{top:"-1px",height:"calc(100% + 2px)",width:"1px",right:"0",transform:"translateX(150%)"},"&:not(:first-child)":{borderLeftColor:"transparent"},"&:not(:last-child)":{borderRightColor:"transparent"},"&:first-child":{borderTopLeftRadius:"$0",borderBottomLeftRadius:"$0"},"&:last-child":{borderTopRightRadius:"$0",borderBottomRightRadius:"$0"}}}},{hasGap:!1,direction:"column",css:{[`& ${t}`]:{"&:not(:last-child)::before":{bottom:0,left:"-1px",height:"1px",width:"calc(100% + 2px)",transform:"translateY(150%)"},"&:first-child":{borderTopLeftRadius:"$0",borderTopRightRadius:"$0"},"&:last-child":{borderBottomLeftRadius:"$0",borderBottomRightRadius:"$0"},"&:not(:first-child)":{borderTopColor:"transparent"},"&:not(:last-child)":{borderBottomColor:"transparent"}}}}]}),u=o=>o==="horizontal"?"row":"column",b=r.forwardRef(({orientation:o="horizontal",gap:i,isFullWidth:s,children:n,wrap:l,...p},h)=>{const e=typeof i=="number",a=u(o);return r.createElement(d,{ref:h,direction:a,hasGap:e,isFullWidth:s,orientation:o,...p},r.createElement(c,{direction:a,gap:e?i:void 0,wrap:l||"nowrap"},n))});export{d as StyledRoot,b as ToggleGroupRoot};
2
2
  //# sourceMappingURL=ToggleGroupRoot.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"ToggleGroupRoot.js","sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as ToggleGroup from '@radix-ui/react-toggle-group'\nimport * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/stitches'\n\nimport { StyledItem } from './ToggleGroupItem'\n\ntype RootType = {\n orientation?: 'horizontal' | 'vertical'\n isFullWidth?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n width: 'fit-content',\n variants: {\n isFullWidth: {\n true: {\n width: '100%',\n [`& ${StyledItem}`]: {\n flexBasis: 0,\n flexGrow: 1\n }\n }\n },\n hasGap: {\n true: {\n [`& ${StyledItem}`]: { borderRadius: '$0' }\n },\n false: {\n borderRadius: '$0',\n bg: 'white',\n [`& ${StyledItem}`]: {\n bg: 'transparent',\n borderRadius: 0,\n position: 'relative',\n '&:not(:last-child)::before': {\n content: '',\n position: 'absolute'\n }\n }\n }\n },\n direction: {\n column: {},\n row: {}\n }\n },\n compoundVariants: [\n {\n hasGap: false,\n direction: 'row',\n css: {\n [`& ${StyledItem}`]: {\n '&:not(:last-child)::before': {\n top: '-1px',\n height: 'calc(100% + 2px)',\n width: '1px',\n right: '0',\n transform: 'translateX(150%)'\n },\n '&:not(:first-child)': {\n borderLeftColor: 'transparent'\n },\n '&:not(:last-child)': {\n borderRightColor: 'transparent'\n },\n '&:first-child': {\n borderTopLeftRadius: '$0',\n borderBottomLeftRadius: '$0'\n },\n '&:last-child': {\n borderTopRightRadius: '$0',\n borderBottomRightRadius: '$0'\n }\n }\n }\n },\n {\n hasGap: false,\n direction: 'column',\n css: {\n [`& ${StyledItem}`]: {\n '&:not(:last-child)::before': {\n bottom: 0,\n left: '-1px',\n height: '1px',\n width: 'calc(100% + 2px)',\n transform: 'translateY(150%)'\n },\n '&:first-child': {\n borderTopLeftRadius: '$0',\n borderTopRightRadius: '$0'\n },\n '&:last-child': {\n borderBottomLeftRadius: '$0',\n borderBottomRightRadius: '$0'\n },\n '&:not(:first-child)': {\n borderTopColor: 'transparent'\n },\n '&:not(:last-child)': {\n borderBottomColor: 'transparent'\n }\n }\n }\n }\n ]\n})\n\nconst orientationToDirection = (orientation) =>\n orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<\n Pick<React.ComponentProps<typeof Flex>, 'gap' | 'wrap'> &\n React.ComponentProps<typeof StyledRoot> &\n RootType\n> = React.forwardRef(\n (\n { orientation = 'horizontal', gap, isFullWidth, children, wrap, ...rest },\n ref\n ) => {\n const hasGap = typeof gap === 'number'\n const direction = orientationToDirection(orientation)\n return (\n <StyledRoot\n ref={ref}\n direction={direction}\n hasGap={hasGap}\n isFullWidth={isFullWidth}\n orientation={orientation}\n {...rest}\n >\n <Flex\n direction={direction}\n gap={hasGap ? gap : undefined}\n wrap={wrap || 'nowrap'}\n >\n {children}\n </Flex>\n </StyledRoot>\n )\n }\n)\n"],"names":["StyledRoot","styled","ToggleGroup","StyledItem","orientationToDirection","orientation","ToggleGroupRoot","React","gap","isFullWidth","children","wrap","rest","ref","hasGap","direction","Flex"],"mappings":"2MAaa,MAAAA,EAAaC,EAAOC,EAAY,KAAM,CACjD,MAAO,cACP,SAAU,CACR,YAAa,CACX,KAAM,CACJ,MAAO,OACP,CAAC,KAAKC,KAAe,CACnB,UAAW,EACX,SAAU,CACZ,CACF,CACF,EACA,OAAQ,CACN,KAAM,CACJ,CAAC,KAAKA,KAAe,CAAE,aAAc,IAAK,CAC5C,EACA,MAAO,CACL,aAAc,KACd,GAAI,QACJ,CAAC,KAAKA,KAAe,CACnB,GAAI,cACJ,aAAc,EACd,SAAU,WACV,6BAA8B,CAC5B,QAAS,GACT,SAAU,UACZ,CACF,CACF,CACF,EACA,UAAW,CACT,OAAQ,CAAC,EACT,IAAK,CAAA,CACP,CACF,EACA,iBAAkB,CAChB,CACE,OAAQ,GACR,UAAW,MACX,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,IAAK,OACL,OAAQ,mBACR,MAAO,MACP,MAAO,IACP,UAAW,kBACb,EACA,sBAAuB,CACrB,gBAAiB,aACnB,EACA,qBAAsB,CACpB,iBAAkB,aACpB,EACA,gBAAiB,CACf,oBAAqB,KACrB,uBAAwB,IAC1B,EACA,eAAgB,CACd,qBAAsB,KACtB,wBAAyB,IAC3B,CACF,CACF,CACF,EACA,CACE,OAAQ,GACR,UAAW,SACX,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,OAAQ,EACR,KAAM,OACN,OAAQ,MACR,MAAO,mBACP,UAAW,kBACb,EACA,gBAAiB,CACf,oBAAqB,KACrB,qBAAsB,IACxB,EACA,eAAgB,CACd,uBAAwB,KACxB,wBAAyB,IAC3B,EACA,sBAAuB,CACrB,eAAgB,aAClB,EACA,qBAAsB,CACpB,kBAAmB,aACrB,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAA0BC,GAC9BA,IAAgB,aAAe,MAAQ,SAE5BC,EAITC,EAAM,WACR,CACE,CAAE,YAAAF,EAAc,aAAc,IAAAG,EAAK,YAAAC,EAAa,SAAAC,EAAU,KAAAC,KAASC,CAAK,EACxEC,IACG,CACH,MAAMC,EAAS,OAAON,GAAQ,SACxBO,EAAYX,EAAuBC,CAAW,EACpD,OACEE,EAAA,cAACP,EAAA,CACC,IAAKa,EACL,UAAWE,EACX,OAAQD,EACR,YAAaL,EACb,YAAaJ,EACZ,GAAGO,CAEJL,EAAAA,EAAA,cAACS,EAAA,CACC,UAAWD,EACX,IAAKD,EAASN,EAAM,OACpB,KAAMG,GAAQ,QAAA,EAEbD,CACH,CACF,CAEJ,CACF"}
1
+ {"version":3,"file":"ToggleGroupRoot.js","sources":["../../../src/components/toggle-group/ToggleGroupRoot.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { Flex } from '~/components/flex'\nimport { styled } from '~/stitches'\nimport { ToggleGroup } from '~/utilities/radix-overrides/toggle-group'\n\nimport { StyledItem } from './ToggleGroupItem'\n\ntype RootType = {\n orientation?: 'horizontal' | 'vertical'\n isFullWidth?: boolean\n}\n\nexport const StyledRoot = styled(ToggleGroup.Root, {\n width: 'fit-content',\n variants: {\n isFullWidth: {\n true: {\n width: '100%',\n [`& ${StyledItem}`]: {\n flexBasis: 0,\n flexGrow: 1\n }\n }\n },\n hasGap: {\n true: {\n [`& ${StyledItem}`]: { borderRadius: '$0' }\n },\n false: {\n borderRadius: '$0',\n bg: 'white',\n [`& ${StyledItem}`]: {\n bg: 'transparent',\n borderRadius: 0,\n position: 'relative',\n '&:not(:last-child)::before': {\n content: '',\n position: 'absolute'\n }\n }\n }\n },\n direction: {\n column: {},\n row: {}\n }\n },\n compoundVariants: [\n {\n hasGap: false,\n direction: 'row',\n css: {\n [`& ${StyledItem}`]: {\n '&:not(:last-child)::before': {\n top: '-1px',\n height: 'calc(100% + 2px)',\n width: '1px',\n right: '0',\n transform: 'translateX(150%)'\n },\n '&:not(:first-child)': {\n borderLeftColor: 'transparent'\n },\n '&:not(:last-child)': {\n borderRightColor: 'transparent'\n },\n '&:first-child': {\n borderTopLeftRadius: '$0',\n borderBottomLeftRadius: '$0'\n },\n '&:last-child': {\n borderTopRightRadius: '$0',\n borderBottomRightRadius: '$0'\n }\n }\n }\n },\n {\n hasGap: false,\n direction: 'column',\n css: {\n [`& ${StyledItem}`]: {\n '&:not(:last-child)::before': {\n bottom: 0,\n left: '-1px',\n height: '1px',\n width: 'calc(100% + 2px)',\n transform: 'translateY(150%)'\n },\n '&:first-child': {\n borderTopLeftRadius: '$0',\n borderTopRightRadius: '$0'\n },\n '&:last-child': {\n borderBottomLeftRadius: '$0',\n borderBottomRightRadius: '$0'\n },\n '&:not(:first-child)': {\n borderTopColor: 'transparent'\n },\n '&:not(:last-child)': {\n borderBottomColor: 'transparent'\n }\n }\n }\n }\n ]\n})\n\nconst orientationToDirection = (orientation) =>\n orientation === 'horizontal' ? 'row' : 'column'\n\nexport const ToggleGroupRoot: React.ForwardRefExoticComponent<\n Pick<React.ComponentProps<typeof Flex>, 'gap' | 'wrap'> &\n React.ComponentProps<typeof StyledRoot> &\n RootType\n> = React.forwardRef(\n (\n { orientation = 'horizontal', gap, isFullWidth, children, wrap, ...rest },\n ref\n ) => {\n const hasGap = typeof gap === 'number'\n const direction = orientationToDirection(orientation)\n return (\n <StyledRoot\n ref={ref}\n direction={direction}\n hasGap={hasGap}\n isFullWidth={isFullWidth}\n orientation={orientation}\n {...rest}\n >\n <Flex\n direction={direction}\n gap={hasGap ? gap : undefined}\n wrap={wrap || 'nowrap'}\n >\n {children}\n </Flex>\n </StyledRoot>\n )\n }\n)\n"],"names":["StyledRoot","styled","ToggleGroup","StyledItem","orientationToDirection","orientation","ToggleGroupRoot","React","gap","isFullWidth","children","wrap","rest","ref","hasGap","direction","Flex"],"mappings":"gPAaO,MAAMA,EAAaC,EAAOC,EAAY,KAAM,CACjD,MAAO,cACP,SAAU,CACR,YAAa,CACX,KAAM,CACJ,MAAO,OACP,CAAC,KAAKC,KAAe,CACnB,UAAW,EACX,SAAU,CACZ,CACF,CACF,EACA,OAAQ,CACN,KAAM,CACJ,CAAC,KAAKA,KAAe,CAAE,aAAc,IAAK,CAC5C,EACA,MAAO,CACL,aAAc,KACd,GAAI,QACJ,CAAC,KAAKA,KAAe,CACnB,GAAI,cACJ,aAAc,EACd,SAAU,WACV,6BAA8B,CAC5B,QAAS,GACT,SAAU,UACZ,CACF,CACF,CACF,EACA,UAAW,CACT,OAAQ,CACR,EAAA,IAAK,CAAA,CACP,CACF,EACA,iBAAkB,CAChB,CACE,OAAQ,GACR,UAAW,MACX,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,IAAK,OACL,OAAQ,mBACR,MAAO,MACP,MAAO,IACP,UAAW,kBACb,EACA,sBAAuB,CACrB,gBAAiB,aACnB,EACA,qBAAsB,CACpB,iBAAkB,aACpB,EACA,gBAAiB,CACf,oBAAqB,KACrB,uBAAwB,IAC1B,EACA,eAAgB,CACd,qBAAsB,KACtB,wBAAyB,IAC3B,CACF,CACF,CACF,EACA,CACE,OAAQ,GACR,UAAW,SACX,IAAK,CACH,CAAC,KAAKA,KAAe,CACnB,6BAA8B,CAC5B,OAAQ,EACR,KAAM,OACN,OAAQ,MACR,MAAO,mBACP,UAAW,kBACb,EACA,gBAAiB,CACf,oBAAqB,KACrB,qBAAsB,IACxB,EACA,eAAgB,CACd,uBAAwB,KACxB,wBAAyB,IAC3B,EACA,sBAAuB,CACrB,eAAgB,aAClB,EACA,qBAAsB,CACpB,kBAAmB,aACrB,CACF,CACF,CACF,CACF,CACF,CAAC,EAEKC,EAA0BC,GAC9BA,IAAgB,aAAe,MAAQ,SAE5BC,EAITC,EAAM,WACR,CACE,CAAE,YAAAF,EAAc,aAAc,IAAAG,EAAK,YAAAC,EAAa,SAAAC,EAAU,KAAAC,KAASC,CAAK,EACxEC,IACG,CACH,MAAMC,EAAS,OAAON,GAAQ,SACxBO,EAAYX,EAAuBC,CAAW,EACpD,OACEE,EAAA,cAACP,EACC,CAAA,IAAKa,EACL,UAAWE,EACX,OAAQD,EACR,YAAaL,EACb,YAAaJ,EACZ,GAAGO,CAAAA,EAEJL,EAAA,cAACS,EAAA,CACC,UAAWD,EACX,IAAKD,EAASN,EAAM,OACpB,KAAMG,GAAQ,QAAA,EAEbD,CACH,CACF,CAEJ,CACF"}
@@ -1339,7 +1339,9 @@ export declare const ToggleGroup: {
1339
1339
  marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
1340
1340
  };
1341
1341
  }> | undefined;
1342
- }, "gap" | "wrap"> & ((Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement>, "direction" | "css" | "isFullWidth" | "hasGap"> & import("@stitches/react/types/styled-component").TransformProps<{
1342
+ }, "gap" | "wrap"> & ((Omit<import("@radix-ui/react-toggle-group").ToggleGroupSingleProps & import("react").RefAttributes<HTMLDivElement> & {
1343
+ disableDeselect?: boolean | undefined;
1344
+ }, "direction" | "css" | "isFullWidth" | "hasGap"> & import("@stitches/react/types/styled-component").TransformProps<{
1343
1345
  isFullWidth?: boolean | "true" | undefined;
1344
1346
  hasGap?: boolean | "true" | "false" | undefined;
1345
1347
  direction?: "row" | "column" | undefined;
@@ -1675,7 +1677,9 @@ export declare const ToggleGroup: {
1675
1677
  marginBottom: string | number | import("@stitches/react/types/css-util").WithScaleValue<"space">;
1676
1678
  };
1677
1679
  }> | undefined;
1678
- }) | (Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & import("react").RefAttributes<HTMLDivElement>, "direction" | "css" | "isFullWidth" | "hasGap"> & import("@stitches/react/types/styled-component").TransformProps<{
1680
+ }) | (Omit<import("@radix-ui/react-toggle-group").ToggleGroupMultipleProps & import("react").RefAttributes<HTMLDivElement> & {
1681
+ disableDeselect?: boolean | undefined;
1682
+ }, "direction" | "css" | "isFullWidth" | "hasGap"> & import("@stitches/react/types/styled-component").TransformProps<{
1679
1683
  isFullWidth?: boolean | "true" | undefined;
1680
1684
  hasGap?: boolean | "true" | "false" | undefined;
1681
1685
  direction?: "row" | "column" | undefined;