@atom-learning/components 6.6.0-beta.1 → 6.6.0-beta.2

package/dist/components/pagination/Pagination.js

@@ -1,35 +1,36 @@
-import { ColorScheme as e } from "../../experiments/color-scheme/ColorScheme.js";
-import { VisibleElementsAmount as t } from "./pagination.constants.js";
-import { PaginationProvider as n } from "./pagination-context/PaginationContext.js";
-import { PaginationPopover as r } from "./PaginationPopover.js";
-import { PaginationItems as i } from "./PaginationItems.js";
-import a from "clsx";
-import * as o from "react";
+import { ColorScheme } from "../../experiments/color-scheme/ColorScheme.js";
+import { VisibleElementsAmount } from "./pagination.constants.js";
+import { PaginationProvider } from "./pagination-context/PaginationContext.js";
+import { PaginationPopover } from "./PaginationPopover.js";
+import { PaginationItems } from "./PaginationItems.js";
+import clsx from "clsx";
+import * as React$1 from "react";
 //#region src/components/pagination/Pagination.tsx
-var s = ({ colorScheme: r, onSelectedPageChange: s, selectedPage: c, visibleElementsCount: l = t.LESS, pagesCount: u, indicatedPages: d = [], disabledPages: f = [], onItemHover: p = () => null, labels: m = {}, children: h, ...g }) => {
-	if (!u) return null;
-	let _ = {
-		onSelectedPageChange: s,
-		selectedPage: c,
-		visibleElementsCount: l,
-		pagesCount: u,
-		indicatedPages: d,
-		disabledPages: f,
-		onItemHover: p,
-		labels: m
+var PaginationComponent = ({ colorScheme, onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children, ...rest }) => {
+	if (!pagesCount) return null;
+	const paginationProviderProps = {
+		onSelectedPageChange,
+		selectedPage,
+		visibleElementsCount,
+		pagesCount,
+		indicatedPages,
+		disabledPages,
+		onItemHover,
+		labels
 	};
-	return /* @__PURE__ */ o.createElement(n, _, /* @__PURE__ */ o.createElement(e, {
+	return /* @__PURE__ */ React$1.createElement(PaginationProvider, paginationProviderProps, /* @__PURE__ */ React$1.createElement(ColorScheme, {
 		base: "grey1",
 		accent: "primary1",
-		...r,
-		asChild: !0
-	}, /* @__PURE__ */ o.createElement("div", {
-		className: a("flex", "gap-1", g.className),
-		...g
-	}, h || /* @__PURE__ */ o.createElement(i, null))));
-}, c = Object.assign(s, { Popover: r });
-s.displayName = "Pagination";
+		...colorScheme,
+		asChild: true
+	}, /* @__PURE__ */ React$1.createElement("div", {
+		className: clsx("flex", "gap-1", rest.className),
+		...rest
+	}, children || /* @__PURE__ */ React$1.createElement(PaginationItems, null))));
+};
+var Pagination = Object.assign(PaginationComponent, { Popover: PaginationPopover });
+PaginationComponent.displayName = "Pagination";
 //#endregion
-export { c as Pagination };
+export { Pagination };
 
 //# sourceMappingURL=Pagination.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\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        <div className={clsx('flex', 'gap-1', rest.className)} {...rest}>\n          {children || <PaginationItems />}\n        </div>\n      </ColorScheme>\n    </PaginationProvider>\n  )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n  Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AAUA,IAAM,KAAuB,EAC3B,gBACA,yBACA,iBACA,0BAAuB,EAAsB,MAC7C,eACA,oBAAiB,EAAE,EACnB,mBAAgB,EAAE,EAClB,uBAAoB,MACpB,YAAS,EAAE,EACX,aACA,GAAG,QACkB;AACrB,KAAI,CAAC,EAAY,QAAO;CAExB,IAAM,IAAmD;EACvD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,QACE,kBAAA,cAAC,GAAuB,GACtB,kBAAA,cAAC,GAAD;EAAa,MAAK;EAAQ,QAAO;EAAW,GAAI;EAAa,SAAA;EAI/C,EAHZ,kBAAA,cAAC,OAAD;EAAK,WAAW,EAAK,QAAQ,SAAS,EAAK,UAAU;EAAE,GAAI;EAErD,EADH,KAAY,kBAAA,cAAC,GAAA,KAAkB,CAC5B,CACM,CACK;GAIZ,IAAa,OAAO,OAAO,GAAqB,EAC3D,SAAS,GACV,CAAC;AAEF,EAAoB,cAAc"}
+{"version":3,"file":"Pagination.js","names":[],"sources":["../../../src/components/pagination/Pagination.tsx"],"sourcesContent":["import clsx from 'clsx'\nimport * as React from 'react'\n\nimport { ColorScheme } from '../../experiments/color-scheme/ColorScheme'\nimport { PaginationProvider } from './pagination-context/PaginationContext'\nimport { VisibleElementsAmount } from './pagination.constants'\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        <div className={clsx('flex', 'gap-1', rest.className)} {...rest}>\n          {children || <PaginationItems />}\n        </div>\n      </ColorScheme>\n    </PaginationProvider>\n  )\n}\n\nexport const Pagination = Object.assign(PaginationComponent, {\n  Popover: PaginationPopover\n})\n\nPaginationComponent.displayName = 'Pagination'\n"],"mappings":";;;;;;;;AAUA,IAAM,uBAAuB,EAC3B,aACA,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,EAAE,EACnB,gBAAgB,EAAE,EAClB,oBAAoB,MACpB,SAAS,EAAE,EACX,UACA,GAAG,WACkB;AACrB,KAAI,CAAC,WAAY,QAAO;CAExB,MAAM,0BAAmD;EACvD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;AAED,QACE,wBAAA,cAAC,oBAAuB,yBACtB,wBAAA,cAAC,aAAD;EAAa,MAAK;EAAQ,QAAO;EAAW,GAAI;EAAa,SAAA;EAI/C,EAHZ,wBAAA,cAAC,OAAD;EAAK,WAAW,KAAK,QAAQ,SAAS,KAAK,UAAU;EAAE,GAAI;EAErD,EADH,YAAY,wBAAA,cAAC,iBAAA,KAAkB,CAC5B,CACM,CACK;;AAIzB,IAAa,aAAa,OAAO,OAAO,qBAAqB,EAC3D,SAAS,mBACV,CAAC;AAEF,oBAAoB,cAAc"}

package/dist/components/pagination/PaginationItems.js

@@ -1,26 +1,26 @@
-import { GO_TO_NEXT_PAGE as e, GO_TO_PREVIOUS_PAGE as t, VIEW_ALL_POPOVER as n } from "./pagination.constants.js";
-import { usePagination as r } from "./usePagination.js";
-import { PaginationNextButton as i } from "./PaginationNextButton.js";
-import { PaginationPage as a } from "./PaginationPage.js";
-import { PaginationPopover as o } from "./PaginationPopover.js";
-import { PaginationPreviousButton as s } from "./PaginationPreviousButton.js";
-import * as c from "react";
+import { GO_TO_NEXT_PAGE, GO_TO_PREVIOUS_PAGE, VIEW_ALL_POPOVER } from "./pagination.constants.js";
+import { usePagination } from "./usePagination.js";
+import { PaginationNextButton } from "./PaginationNextButton.js";
+import { PaginationPage } from "./PaginationPage.js";
+import { PaginationPopover } from "./PaginationPopover.js";
+import { PaginationPreviousButton } from "./PaginationPreviousButton.js";
+import * as React$1 from "react";
 //#region src/components/pagination/PaginationItems.tsx
-var l = () => {
-	let { paginationItems: l } = r();
-	return /* @__PURE__ */ c.createElement(c.Fragment, null, l.map((r, l) => {
-		switch (r) {
-			case n: return /* @__PURE__ */ c.createElement(o, { key: r + l });
-			case t: return /* @__PURE__ */ c.createElement(s, { key: r });
-			case e: return /* @__PURE__ */ c.createElement(i, { key: r });
-			default: return /* @__PURE__ */ c.createElement(a, {
-				key: r,
-				pageNumber: r
+var PaginationItems = () => {
+	const { paginationItems } = usePagination();
+	return /* @__PURE__ */ React$1.createElement(React$1.Fragment, null, paginationItems.map((paginationItem, i) => {
+		switch (paginationItem) {
+			case VIEW_ALL_POPOVER: return /* @__PURE__ */ React$1.createElement(PaginationPopover, { key: paginationItem + i });
+			case GO_TO_PREVIOUS_PAGE: return /* @__PURE__ */ React$1.createElement(PaginationPreviousButton, { key: paginationItem });
+			case GO_TO_NEXT_PAGE: return /* @__PURE__ */ React$1.createElement(PaginationNextButton, { key: paginationItem });
+			default: return /* @__PURE__ */ React$1.createElement(PaginationPage, {
+				key: paginationItem,
+				pageNumber: paginationItem
 			});
 		}
 	}));
 };
 //#endregion
-export { l as PaginationItems };
+export { PaginationItems };
 
 //# sourceMappingURL=PaginationItems.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationItems.js","names":[],"sources":["../../../src/components/pagination/PaginationItems.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPage } from './PaginationPage'\nimport { PaginationPopover } from './PaginationPopover'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport { usePagination } from './usePagination'\n\nexport const PaginationItems = (): JSX.Element => {\n  const { paginationItems } = usePagination()\n\n  return (\n    <>\n      {paginationItems.map((paginationItem, i) => {\n        switch (paginationItem) {\n          case VIEW_ALL_POPOVER:\n            return <PaginationPopover key={paginationItem + i} />\n          case GO_TO_PREVIOUS_PAGE:\n            return <PaginationPreviousButton key={paginationItem} />\n          case GO_TO_NEXT_PAGE:\n            return <PaginationNextButton key={paginationItem} />\n          default:\n            return (\n              <PaginationPage\n                key={paginationItem}\n                pageNumber={paginationItem}\n              />\n            )\n        }\n      })}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAaA,IAAa,UAAqC;CAChD,IAAM,EAAE,uBAAoB,GAAe;AAE3C,QACE,kBAAA,cAAA,EAAA,UAAA,MACG,EAAgB,KAAK,GAAgB,MAAM;AAC1C,UAAQ,GAAR;GACE,KAAK,EACH,QAAO,kBAAA,cAAC,GAAD,EAAmB,KAAK,IAAiB,GAAK,CAAA;GACvD,KAAK,EACH,QAAO,kBAAA,cAAC,GAAD,EAA0B,KAAK,GAAkB,CAAA;GAC1D,KAAK,EACH,QAAO,kBAAA,cAAC,GAAD,EAAsB,KAAK,GAAkB,CAAA;GACtD,QACE,QACE,kBAAA,cAAC,GAAD;IACE,KAAK;IACL,YAAY;IACZ,CAAA;;GAGR,CACD"}
+{"version":3,"file":"PaginationItems.js","names":[],"sources":["../../../src/components/pagination/PaginationItems.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport {\n  GO_TO_NEXT_PAGE,\n  GO_TO_PREVIOUS_PAGE,\n  VIEW_ALL_POPOVER\n} from './pagination.constants'\nimport { PaginationNextButton } from './PaginationNextButton'\nimport { PaginationPage } from './PaginationPage'\nimport { PaginationPopover } from './PaginationPopover'\nimport { PaginationPreviousButton } from './PaginationPreviousButton'\nimport { usePagination } from './usePagination'\n\nexport const PaginationItems = (): JSX.Element => {\n  const { paginationItems } = usePagination()\n\n  return (\n    <>\n      {paginationItems.map((paginationItem, i) => {\n        switch (paginationItem) {\n          case VIEW_ALL_POPOVER:\n            return <PaginationPopover key={paginationItem + i} />\n          case GO_TO_PREVIOUS_PAGE:\n            return <PaginationPreviousButton key={paginationItem} />\n          case GO_TO_NEXT_PAGE:\n            return <PaginationNextButton key={paginationItem} />\n          default:\n            return (\n              <PaginationPage\n                key={paginationItem}\n                pageNumber={paginationItem}\n              />\n            )\n        }\n      })}\n    </>\n  )\n}\n"],"mappings":";;;;;;;;AAaA,IAAa,wBAAqC;CAChD,MAAM,EAAE,oBAAoB,eAAe;AAE3C,QACE,wBAAA,cAAA,QAAA,UAAA,MACG,gBAAgB,KAAK,gBAAgB,MAAM;AAC1C,UAAQ,gBAAR;GACE,KAAK,iBACH,QAAO,wBAAA,cAAC,mBAAD,EAAmB,KAAK,iBAAiB,GAAK,CAAA;GACvD,KAAK,oBACH,QAAO,wBAAA,cAAC,0BAAD,EAA0B,KAAK,gBAAkB,CAAA;GAC1D,KAAK,gBACH,QAAO,wBAAA,cAAC,sBAAD,EAAsB,KAAK,gBAAkB,CAAA;GACtD,QACE,QACE,wBAAA,cAAC,gBAAD;IACE,KAAK;IACL,YAAY;IACZ,CAAA;;GAGR,CACD"}

package/dist/components/pagination/PaginationNextButton.js

@@ -1,23 +1,25 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { ActionIcon as n } from "../action-icon/ActionIcon.js";
-import { usePagination as r } from "./usePagination.js";
-import * as i from "react";
-import { ChevronRight as a } from "@atom-learning/icons";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { usePagination } from "./usePagination.js";
+import * as React$1 from "react";
+import { ChevronRight } from "@atom-learning/icons";
 //#region src/components/pagination/PaginationNextButton.tsx
-var o = e(n, { base: ["ml-1", "disabled:opacity-30"] }), s = (e) => {
-	let { goToNextPage: n, labels: s, nextAvailablePage: c } = r(), l = !c;
-	return /* @__PURE__ */ i.createElement(o, {
-		hasTooltip: !1,
+var StyledActionIcon = styled(ActionIcon, { base: ["ml-1", "disabled:opacity-30"] });
+var PaginationNextButton = (props) => {
+	const { goToNextPage, labels, nextAvailablePage } = usePagination();
+	const isDisabled = !nextAvailablePage;
+	return /* @__PURE__ */ React$1.createElement(StyledActionIcon, {
+		hasTooltip: false,
 		size: "md",
 		theme: "neutral",
-		onClick: n,
-		disabled: l,
-		...e,
-		label: s?.nextPageButtonLabel || "Next page"
-	}, /* @__PURE__ */ i.createElement(t, { is: a }));
+		onClick: goToNextPage,
+		disabled: isDisabled,
+		...props,
+		label: labels?.nextPageButtonLabel || "Next page"
+	}, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronRight }));
 };
 //#endregion
-export { s as PaginationNextButton };
+export { PaginationNextButton };
 
 //# sourceMappingURL=PaginationNextButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationNextButton.js","names":[],"sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['ml-1', 'disabled:opacity-30']\n})\n\nexport const PaginationNextButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToNextPage, labels, nextAvailablePage } = usePagination()\n\n  const isDisabled = !nextAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToNextPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.nextPageButtonLabel || 'Next page'}\n    >\n      <Icon is={ChevronRight} />\n    </StyledActionIcon>\n  )\n}\n"],"mappings":";;;;;;;AASA,IAAM,IAAmB,EAAO,GAAY,EAC1C,MAAM,CAAC,QAAQ,sBAAsB,EACtC,CAAC,EAEW,KACX,MACG;CACH,IAAM,EAAE,iBAAc,WAAQ,yBAAsB,GAAe,EAE7D,IAAa,CAAC;AAEpB,QACE,kBAAA,cAAC,GAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UAAU;EACV,GAAI;EACJ,OAAO,GAAQ,uBAAuB;EAGrB,EADjB,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAgB,CAAA,CACT"}
+{"version":3,"file":"PaginationNextButton.js","names":[],"sources":["../../../src/components/pagination/PaginationNextButton.tsx"],"sourcesContent":["import { ChevronRight } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['ml-1', 'disabled:opacity-30']\n})\n\nexport const PaginationNextButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToNextPage, labels, nextAvailablePage } = usePagination()\n\n  const isDisabled = !nextAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToNextPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.nextPageButtonLabel || 'Next page'}\n    >\n      <Icon is={ChevronRight} />\n    </StyledActionIcon>\n  )\n}\n"],"mappings":";;;;;;;AASA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,sBAAsB,EACtC,CAAC;AAEF,IAAa,wBACX,UACG;CACH,MAAM,EAAE,cAAc,QAAQ,sBAAsB,eAAe;CAEnE,MAAM,aAAa,CAAC;AAEpB,QACE,wBAAA,cAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UAAU;EACV,GAAI;EACJ,OAAO,QAAQ,uBAAuB;EAGrB,EADjB,wBAAA,cAAC,MAAD,EAAM,IAAI,cAAgB,CAAA,CACT"}

package/dist/components/pagination/PaginationPage.js

@@ -1,9 +1,38 @@
-import { styled as e } from "../../styled.js";
-import { usePagination as t } from "./usePagination.js";
-import * as n from "react";
+import { styled } from "../../styled.js";
+import { usePagination } from "./usePagination.js";
+import * as React$1 from "react";
 //#region src/components/pagination/PaginationPage.tsx
-var r = e("button", {
-	base: /* @__PURE__ */ "items-center.border.border-transparent.rounded-sm.cursor-pointer.font-body.justify-center.whitespace-nowrap.w-max.flex.flex-col.p-0.font-normal.text-text-subtle.bg-(--base-1).relative.not-disabled:active:bg-(--base-3).not-disabled:active:text-(--text-bold).not-disabled:focus-visible:outline-none.not-disabled:focus-visible:relative.not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px].not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px].not-disabled:focus-visible:z-1.not-disabled:hover:bg-(--base-2).not-disabled:hover:text-text-regular.disabled:cursor-not-allowed.disabled:opacity-30.disabled:pointer-events-none".split("."),
+var StyledButton = styled("button", {
+	base: [
+		"items-center",
+		"border",
+		"border-transparent",
+		"rounded-sm",
+		"cursor-pointer",
+		"font-body",
+		"justify-center",
+		"whitespace-nowrap",
+		"w-max",
+		"flex",
+		"flex-col",
+		"p-0",
+		"font-normal",
+		"text-text-subtle",
+		"bg-(--base-1)",
+		"relative",
+		"not-disabled:active:bg-(--base-3)",
+		"not-disabled:active:text-(--text-bold)",
+		"not-disabled:focus-visible:outline-none",
+		"not-disabled:focus-visible:relative",
+		"not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]",
+		"not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]",
+		"not-disabled:focus-visible:z-1",
+		"not-disabled:hover:bg-(--base-2)",
+		"not-disabled:hover:text-text-regular",
+		"disabled:cursor-not-allowed",
+		"disabled:opacity-30",
+		"disabled:pointer-events-none"
+	],
 	variants: {
 		size: { md: ["size-10"] },
 		selected: { true: [
@@ -27,8 +56,8 @@ var r = e("button", {
 		] }
 	},
 	compoundVariants: [{
-		selected: !0,
-		indicated: !0,
+		selected: true,
+		indicated: true,
 		class: [
 			"bg-(--accent-9)",
 			"font-semibold",
@@ -41,25 +70,33 @@ var r = e("button", {
 			"text-white"
 		]
 	}]
-}), i = ({ pageNumber: e, className: i, onClick: a }) => {
-	let { currentPage: o, goToPage: s, indicatedPages: c, disabledPages: l, onItemHover: u } = t(), d = c.includes(e), f = l.includes(e), p = o === e, m = () => {
-		p || f || u?.(e);
-	}, h = (e) => {
-		a?.(), s(e);
+});
+var PaginationPage = ({ pageNumber, className, onClick }) => {
+	const { currentPage, goToPage, indicatedPages, disabledPages, onItemHover } = usePagination();
+	const isIndicated = indicatedPages.includes(pageNumber);
+	const isDisabled = disabledPages.includes(pageNumber);
+	const isSelected = currentPage === pageNumber;
+	const handleOnHover = () => {
+		if (isSelected || isDisabled) return;
+		onItemHover?.(pageNumber);
 	};
-	return /* @__PURE__ */ n.createElement(r, {
-		selected: p,
+	const handleOnClick = (pageNumber) => {
+		onClick?.();
+		goToPage(pageNumber);
+	};
+	return /* @__PURE__ */ React$1.createElement(StyledButton, {
+		selected: isSelected,
 		size: "md",
-		onClick: () => h(e),
-		className: i,
-		indicated: d,
-		disabled: f,
-		"aria-current": p && "page",
-		"aria-disabled": f,
-		onMouseOver: m
-	}, e);
+		onClick: () => handleOnClick(pageNumber),
+		className,
+		indicated: isIndicated,
+		disabled: isDisabled,
+		"aria-current": isSelected && "page",
+		"aria-disabled": isDisabled,
+		onMouseOver: handleOnHover
+	}, pageNumber);
 };
 //#endregion
-export { i as PaginationPage };
+export { PaginationPage };
 
 //# sourceMappingURL=PaginationPage.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationPage.js","names":[],"sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n  base: [\n    'items-center',\n    'border',\n    'border-transparent',\n    'rounded-sm',\n    'cursor-pointer',\n    'font-body',\n    'justify-center',\n    'whitespace-nowrap',\n    'w-max',\n    'flex',\n    'flex-col',\n    'p-0',\n    'font-normal',\n    'text-text-subtle',\n    'bg-(--base-1)',\n    'relative',\n    'not-disabled:active:bg-(--base-3)',\n    'not-disabled:active:text-(--text-bold)',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-(--base-2)',\n    'not-disabled:hover:text-text-regular',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      md: ['size-10']\n    },\n    selected: {\n      true: [\n        'border',\n        'border-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:border-(--accent-11)',\n        'not-disabled:active:text-(--accent-11)',\n        'not-disabled:hover:border-(--accent-10)',\n        'not-disabled:hover:text-(--accent-10)',\n        'text-(--accent-9)'\n      ]\n    },\n    indicated: {\n      true: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'text-white'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      indicated: true,\n      class: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'not-focus-visible:border-white!',\n        'shadow-[var(--accent-9)_0px_0px_0px_1px]',\n        'text-white'\n      ]\n    }\n  ]\n})\n\nexport const PaginationPage = ({\n  pageNumber,\n  className,\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      className={className}\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"],"mappings":";;;;AAOA,IAAM,IAAe,EAAO,UAAU;CACpC,MAAM,kqBA6BL;CACD,UAAU;EACR,MAAM,EACJ,IAAI,CAAC,UAAU,EAChB;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACD,WAAW,EACT,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,UAAU;EACV,WAAW;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,CACF;CACF,CAAC,EAEW,KAAkB,EAC7B,eACA,cACA,iBACyB;CACzB,IAAM,EAAE,gBAAa,aAAU,mBAAgB,kBAAe,mBAC5D,GAAe,EAEX,IAAc,EAAe,SAAS,EAAW,EACjD,IAAa,EAAc,SAAS,EAAW,EAE/C,IAAa,MAAgB,GAE7B,UAAsB;AACtB,OAAc,KAClB,IAAc,EAAW;IAGrB,KAAiB,MAAe;AAEpC,EADA,KAAW,EACX,EAAS,EAAW;;AAGtB,QACE,kBAAA,cAAC,GAAD;EACE,UAAU;EACV,MAAK;EACL,eAAe,EAAc,EAAW;EAC7B;EACX,WAAW;EACX,UAAU;EACV,gBAAc,KAAc;EAC5B,iBAAe;EACf,aAAa;EAGA,EADZ,EACY"}
+{"version":3,"file":"PaginationPage.js","names":[],"sources":["../../../src/components/pagination/PaginationPage.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport type { PaginationPageProps } from './types'\nimport { usePagination } from './usePagination'\n\nconst StyledButton = styled('button', {\n  base: [\n    'items-center',\n    'border',\n    'border-transparent',\n    'rounded-sm',\n    'cursor-pointer',\n    'font-body',\n    'justify-center',\n    'whitespace-nowrap',\n    'w-max',\n    'flex',\n    'flex-col',\n    'p-0',\n    'font-normal',\n    'text-text-subtle',\n    'bg-(--base-1)',\n    'relative',\n    'not-disabled:active:bg-(--base-3)',\n    'not-disabled:active:text-(--text-bold)',\n    'not-disabled:focus-visible:outline-none',\n    'not-disabled:focus-visible:relative',\n    'not-disabled:focus-visible:shadow-[var(--color-primary-800)_0px_0px_0px_4px]',\n    'not-disabled:focus-visible:shadow-[white_0px_0px_0px_2px]',\n    'not-disabled:focus-visible:z-1',\n    'not-disabled:hover:bg-(--base-2)',\n    'not-disabled:hover:text-text-regular',\n    'disabled:cursor-not-allowed',\n    'disabled:opacity-30',\n    'disabled:pointer-events-none'\n  ],\n  variants: {\n    size: {\n      md: ['size-10']\n    },\n    selected: {\n      true: [\n        'border',\n        'border-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:border-(--accent-11)',\n        'not-disabled:active:text-(--accent-11)',\n        'not-disabled:hover:border-(--accent-10)',\n        'not-disabled:hover:text-(--accent-10)',\n        'text-(--accent-9)'\n      ]\n    },\n    indicated: {\n      true: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'text-white'\n      ]\n    }\n  },\n  compoundVariants: [\n    {\n      selected: true,\n      indicated: true,\n      class: [\n        'bg-(--accent-9)',\n        'font-semibold',\n        'not-disabled:active:bg-(--accent-11)',\n        'not-disabled:active:text-white',\n        'not-disabled:hover:bg-(--accent-10)',\n        'not-disabled:hover:text-white',\n        'not-focus-visible:border-white!',\n        'shadow-[var(--accent-9)_0px_0px_0px_1px]',\n        'text-white'\n      ]\n    }\n  ]\n})\n\nexport const PaginationPage = ({\n  pageNumber,\n  className,\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      className={className}\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"],"mappings":";;;;AAOA,IAAM,eAAe,OAAO,UAAU;CACpC,MAAM;EACJ;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD;CACD,UAAU;EACR,MAAM,EACJ,IAAI,CAAC,UAAU,EAChB;EACD,UAAU,EACR,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACD,WAAW,EACT,MAAM;GACJ;GACA;GACA;GACA;GACA;GACA;GACA;GACD,EACF;EACF;CACD,kBAAkB,CAChB;EACE,UAAU;EACV,WAAW;EACX,OAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;EACF,CACF;CACF,CAAC;AAEF,IAAa,kBAAkB,EAC7B,YACA,WACA,cACyB;CACzB,MAAM,EAAE,aAAa,UAAU,gBAAgB,eAAe,gBAC5D,eAAe;CAEjB,MAAM,cAAc,eAAe,SAAS,WAAW;CACvD,MAAM,aAAa,cAAc,SAAS,WAAW;CAErD,MAAM,aAAa,gBAAgB;CAEnC,MAAM,sBAAsB;AAC1B,MAAI,cAAc,WAAY;AAC9B,gBAAc,WAAW;;CAG3B,MAAM,iBAAiB,eAAe;AACpC,aAAW;AACX,WAAS,WAAW;;AAGtB,QACE,wBAAA,cAAC,cAAD;EACE,UAAU;EACV,MAAK;EACL,eAAe,cAAc,WAAW;EAC7B;EACX,WAAW;EACX,UAAU;EACV,gBAAc,cAAc;EAC5B,iBAAe;EACf,aAAa;EAGA,EADZ,WACY"}

package/dist/components/pagination/PaginationPopover.js

@@ -1,34 +1,38 @@
-import { Icon as e } from "../icon/Icon.js";
-import { ActionIcon as t } from "../action-icon/ActionIcon.js";
-import { usePagination as n } from "./usePagination.js";
-import { PaginationPage as r } from "./PaginationPage.js";
-import { Popover as i } from "../popover/Popover.js";
-import a from "react";
-import { Ellypsis as o } from "@atom-learning/icons";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { usePagination } from "./usePagination.js";
+import { PaginationPage } from "./PaginationPage.js";
+import { Popover } from "../popover/Popover.js";
+import React from "react";
+import { Ellypsis } from "@atom-learning/icons";
 //#region src/components/pagination/PaginationPopover.tsx
-var s = ({ children: s }) => {
-	let { pagesCount: c, labels: l } = n(), u = Array.from({ length: c }, (e, t) => t + 1), [d, f] = a.useState(!1);
-	return /* @__PURE__ */ a.createElement(i, {
-		open: d,
-		onOpenChange: f,
-		defaultOpen: !1
-	}, /* @__PURE__ */ a.createElement(i.Trigger, { asChild: !0 }, s || /* @__PURE__ */ a.createElement(t, {
-		hasTooltip: !1,
+var PaginationPopover = ({ children }) => {
+	const { pagesCount, labels } = usePagination();
+	const paginationItems = Array.from({ length: pagesCount }, (_, index) => index + 1);
+	const [isOpen, setIsOpen] = React.useState(false);
+	return /* @__PURE__ */ React.createElement(Popover, {
+		open: isOpen,
+		onOpenChange: setIsOpen,
+		defaultOpen: false
+	}, /* @__PURE__ */ React.createElement(Popover.Trigger, { asChild: true }, children || /* @__PURE__ */ React.createElement(ActionIcon, {
+		hasTooltip: false,
 		size: "md",
 		theme: "neutral",
-		label: l?.popoverTriggerLabel || "Open pagination popover",
+		label: labels?.popoverTriggerLabel || "Open pagination popover",
 		"data-testid": "pagination_popover_trigger"
-	}, /* @__PURE__ */ a.createElement(e, { is: o }))), /* @__PURE__ */ a.createElement(i.Content, {
+	}, /* @__PURE__ */ React.createElement(Icon, { is: Ellypsis }))), /* @__PURE__ */ React.createElement(Popover.Content, {
 		size: "md",
-		showCloseButton: !1,
+		showCloseButton: false,
 		className: "p-0"
-	}, /* @__PURE__ */ a.createElement("div", { className: "flex flex-wrap justify-center gap-1 p-4" }, u?.map((e) => /* @__PURE__ */ a.createElement(r, {
-		key: e,
-		pageNumber: e,
-		onClick: () => f(!1)
-	})))));
+	}, /* @__PURE__ */ React.createElement("div", { className: "flex flex-wrap justify-center gap-1 p-4" }, paginationItems?.map((pageNumber) => {
+		return /* @__PURE__ */ React.createElement(PaginationPage, {
+			key: pageNumber,
+			pageNumber,
+			onClick: () => setIsOpen(false)
+		});
+	}))));
 };
 //#endregion
-export { s as PaginationPopover };
+export { PaginationPopover };
 
 //# sourceMappingURL=PaginationPopover.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationPopover.js","names":[],"sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Popover } from '../popover/Popover'\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} className=\"p-0\">\n        <div className=\"flex flex-wrap justify-center gap-1 p-4\">\n          {paginationItems?.map((pageNumber) => {\n            return (\n              <PaginationPage\n                key={pageNumber}\n                pageNumber={pageNumber}\n                onClick={() => setIsOpen(false)}\n              />\n            )\n          })}\n        </div>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;AASA,IAAa,KAAqB,EAChC,kBACsC;CACtC,IAAM,EAAE,eAAY,cAAW,GAAe,EACxC,IAAkB,MAAM,KAC5B,EAAE,QAAQ,GAAY,GACrB,GAAG,MAAU,IAAQ,EACvB,EAEK,CAAC,GAAQ,KAAa,EAAM,SAAkB,GAAM;AAE1D,QACE,kBAAA,cAAC,GAAD;EAAS,MAAM;EAAQ,cAAc;EAAW,aAAa;EA2BnD,EA1BR,kBAAA,cAAC,EAAQ,SAAT,EAAiB,SAAA,IAYC,EAXf,KACC,kBAAA,cAAC,GAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,OAAO,GAAQ,uBAAuB;EACtC,eAAY;EAGD,EADX,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAY,CAAA,CACX,CAEC,EAClB,kBAAA,cAAC,EAAQ,SAAT;EAAiB,MAAK;EAAK,iBAAiB;EAAO,WAAU;EAY3C,EAXhB,kBAAA,cAAC,OAAD,EAAK,WAAU,2CAUT,EATH,GAAiB,KAAK,MAEnB,kBAAA,cAAC,GAAD;EACE,KAAK;EACO;EACZ,eAAe,EAAU,GAAM;EAC/B,CAAA,CAEJ,CACE,CACU,CACV"}
+{"version":3,"file":"PaginationPopover.js","names":[],"sources":["../../../src/components/pagination/PaginationPopover.tsx"],"sourcesContent":["import { Ellypsis } from '@atom-learning/icons'\nimport React from 'react'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { Popover } from '../popover/Popover'\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} className=\"p-0\">\n        <div className=\"flex flex-wrap justify-center gap-1 p-4\">\n          {paginationItems?.map((pageNumber) => {\n            return (\n              <PaginationPage\n                key={pageNumber}\n                pageNumber={pageNumber}\n                onClick={() => setIsOpen(false)}\n              />\n            )\n          })}\n        </div>\n      </Popover.Content>\n    </Popover>\n  )\n}\n"],"mappings":";;;;;;;;AASA,IAAa,qBAAqB,EAChC,eACsC;CACtC,MAAM,EAAE,YAAY,WAAW,eAAe;CAC9C,MAAM,kBAAkB,MAAM,KAC5B,EAAE,QAAQ,YAAY,GACrB,GAAG,UAAU,QAAQ,EACvB;CAED,MAAM,CAAC,QAAQ,aAAa,MAAM,SAAkB,MAAM;AAE1D,QACE,sBAAA,cAAC,SAAD;EAAS,MAAM;EAAQ,cAAc;EAAW,aAAa;EA2BnD,EA1BR,sBAAA,cAAC,QAAQ,SAAT,EAAiB,SAAA,MAYC,EAXf,YACC,sBAAA,cAAC,YAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,OAAO,QAAQ,uBAAuB;EACtC,eAAY;EAGD,EADX,sBAAA,cAAC,MAAD,EAAM,IAAI,UAAY,CAAA,CACX,CAEC,EAClB,sBAAA,cAAC,QAAQ,SAAT;EAAiB,MAAK;EAAK,iBAAiB;EAAO,WAAU;EAY3C,EAXhB,sBAAA,cAAC,OAAD,EAAK,WAAU,2CAUT,EATH,iBAAiB,KAAK,eAAe;AACpC,SACE,sBAAA,cAAC,gBAAD;GACE,KAAK;GACO;GACZ,eAAe,UAAU,MAAM;GAC/B,CAAA;GAEJ,CACE,CACU,CACV"}

package/dist/components/pagination/PaginationPreviousButton.js

@@ -1,23 +1,25 @@
-import { styled as e } from "../../styled.js";
-import { Icon as t } from "../icon/Icon.js";
-import { ActionIcon as n } from "../action-icon/ActionIcon.js";
-import { usePagination as r } from "./usePagination.js";
-import * as i from "react";
-import { ChevronLeft as a } from "@atom-learning/icons";
+import { styled } from "../../styled.js";
+import { Icon } from "../icon/Icon.js";
+import { ActionIcon } from "../action-icon/ActionIcon.js";
+import { usePagination } from "./usePagination.js";
+import * as React$1 from "react";
+import { ChevronLeft } from "@atom-learning/icons";
 //#region src/components/pagination/PaginationPreviousButton.tsx
-var o = e(n, { base: ["mr-1", "disabled:opacity-30"] }), s = (e) => {
-	let { goToPreviousPage: n, labels: s, previousAvailablePage: c } = r(), l = !c;
-	return /* @__PURE__ */ i.createElement(o, {
-		hasTooltip: !1,
+var StyledActionIcon = styled(ActionIcon, { base: ["mr-1", "disabled:opacity-30"] });
+var PaginationPreviousButton = (props) => {
+	const { goToPreviousPage, labels, previousAvailablePage } = usePagination();
+	const isDisabled = !previousAvailablePage;
+	return /* @__PURE__ */ React$1.createElement(StyledActionIcon, {
+		hasTooltip: false,
 		size: "md",
 		theme: "neutral",
-		onClick: n,
-		disabled: l,
-		...e,
-		label: s?.previousPageButtonLabel || "Previous page"
-	}, /* @__PURE__ */ i.createElement(t, { is: a }));
+		onClick: goToPreviousPage,
+		disabled: isDisabled,
+		...props,
+		label: labels?.previousPageButtonLabel || "Previous page"
+	}, /* @__PURE__ */ React$1.createElement(Icon, { is: ChevronLeft }));
 };
 //#endregion
-export { s as PaginationPreviousButton };
+export { PaginationPreviousButton };
 
 //# sourceMappingURL=PaginationPreviousButton.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"PaginationPreviousButton.js","names":[],"sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['mr-1', 'disabled:opacity-30']\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n  const isDisabled = !previousAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"mappings":";;;;;;;AASA,IAAM,IAAmB,EAAO,GAAY,EAC1C,MAAM,CAAC,QAAQ,sBAAsB,EACtC,CAAC,EAEW,KACX,MACG;CACH,IAAM,EAAE,qBAAkB,WAAQ,6BAA0B,GAAe,EAErE,IAAa,CAAC;AAEpB,QACE,kBAAA,cAAC,GAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UAAU;EACV,GAAI;EACJ,OAAO,GAAQ,2BAA2B;EAGzB,EADjB,kBAAA,cAAC,GAAD,EAAM,IAAI,GAAe,CAAA,CACR"}
+{"version":3,"file":"PaginationPreviousButton.js","names":[],"sources":["../../../src/components/pagination/PaginationPreviousButton.tsx"],"sourcesContent":["import { ChevronLeft } from '@atom-learning/icons'\nimport * as React from 'react'\n\nimport { styled } from '~/styled'\n\nimport { ActionIcon } from '../action-icon/ActionIcon'\nimport { Icon } from '../icon/Icon'\nimport { usePagination } from './usePagination'\n\nconst StyledActionIcon = styled(ActionIcon, {\n  base: ['mr-1', 'disabled:opacity-30']\n})\n\nexport const PaginationPreviousButton = (\n  props: Partial<React.ComponentProps<typeof StyledActionIcon>>\n) => {\n  const { goToPreviousPage, labels, previousAvailablePage } = usePagination()\n\n  const isDisabled = !previousAvailablePage\n\n  return (\n    <StyledActionIcon\n      hasTooltip={false}\n      size=\"md\"\n      theme=\"neutral\"\n      onClick={goToPreviousPage}\n      disabled={isDisabled}\n      {...props}\n      label={labels?.previousPageButtonLabel || 'Previous page'}\n    >\n      <Icon is={ChevronLeft} />\n    </StyledActionIcon>\n  )\n}\n"],"mappings":";;;;;;;AASA,IAAM,mBAAmB,OAAO,YAAY,EAC1C,MAAM,CAAC,QAAQ,sBAAsB,EACtC,CAAC;AAEF,IAAa,4BACX,UACG;CACH,MAAM,EAAE,kBAAkB,QAAQ,0BAA0B,eAAe;CAE3E,MAAM,aAAa,CAAC;AAEpB,QACE,wBAAA,cAAC,kBAAD;EACE,YAAY;EACZ,MAAK;EACL,OAAM;EACN,SAAS;EACT,UAAU;EACV,GAAI;EACJ,OAAO,QAAQ,2BAA2B;EAGzB,EADjB,wBAAA,cAAC,MAAD,EAAM,IAAI,aAAe,CAAA,CACR"}

package/dist/components/pagination/pagination-context/PaginationContext.js

@@ -1,8 +1,8 @@
-import { VisibleElementsAmount as e } from "../pagination.constants.js";
-import { findNextAvailablePage as t, findPreviousAvailablePage as n, getPaginationElementsToRender as r } from "../pagination.helper.js";
-import * as i from "react";
+import { VisibleElementsAmount } from "../pagination.constants.js";
+import { findNextAvailablePage, findPreviousAvailablePage, getPaginationElementsToRender } from "../pagination.helper.js";
+import * as React$1 from "react";
 //#region src/components/pagination/pagination-context/PaginationContext.tsx
-var a = i.createContext({
+var PaginationContext = React$1.createContext({
 	goToPage: () => null,
 	goToPreviousPage: () => null,
 	goToNextPage: () => null,
@@ -13,43 +13,55 @@ var a = i.createContext({
 	labels: {},
 	indicatedPages: [],
 	disabledPages: []
-}), o = ({ onSelectedPageChange: o, selectedPage: s, visibleElementsCount: c = e.LESS, pagesCount: l, indicatedPages: u = [], disabledPages: d = [], onItemHover: f = () => null, labels: p = {}, children: m }) => {
-	let [h, g] = i.useState(1), _ = s || h, v = i.useCallback((e) => {
-		g(e), o?.(e);
-	}, [o]), y = n(_ - 1, d), b = i.useCallback(() => {
-		y && v(y);
-	}, [v, y]), x = t(_ + 1, d, l), S = i.useCallback(() => {
-		x && v(x);
-	}, [v, x]), C = r(_, l, c), w = i.useMemo(() => ({
-		goToNextPage: S,
-		goToPreviousPage: b,
-		goToPage: v,
-		currentPage: _,
-		paginationItems: C,
-		indicatedPages: u,
-		disabledPages: d,
-		pagesCount: l,
-		onItemHover: f,
-		previousAvailablePage: y,
-		nextAvailablePage: x,
-		labels: p
-	}), [
-		S,
-		b,
-		v,
-		_,
-		u,
-		C,
-		d,
-		l,
-		f,
-		y,
-		x,
-		p
+});
+var PaginationProvider = ({ onSelectedPageChange, selectedPage, visibleElementsCount = VisibleElementsAmount.LESS, pagesCount, indicatedPages = [], disabledPages = [], onItemHover = () => null, labels = {}, children }) => {
+	const [internalCurrentPage, setInternalCurrentPage] = React$1.useState(1);
+	const currentPage = selectedPage || internalCurrentPage;
+	const goToPage = React$1.useCallback((pageNumber) => {
+		setInternalCurrentPage(pageNumber);
+		onSelectedPageChange?.(pageNumber);
+	}, [onSelectedPageChange]);
+	const previousAvailablePage = findPreviousAvailablePage(currentPage - 1, disabledPages);
+	const goToPreviousPage = React$1.useCallback(() => {
+		if (previousAvailablePage) goToPage(previousAvailablePage);
+	}, [goToPage, previousAvailablePage]);
+	const nextAvailablePage = findNextAvailablePage(currentPage + 1, disabledPages, pagesCount);
+	const goToNextPage = React$1.useCallback(() => {
+		if (nextAvailablePage) goToPage(nextAvailablePage);
+	}, [goToPage, nextAvailablePage]);
+	const paginationItems = getPaginationElementsToRender(currentPage, pagesCount, visibleElementsCount);
+	const value = React$1.useMemo(() => {
+		return {
+			goToNextPage,
+			goToPreviousPage,
+			goToPage,
+			currentPage,
+			paginationItems,
+			indicatedPages,
+			disabledPages,
+			pagesCount,
+			onItemHover,
+			previousAvailablePage,
+			nextAvailablePage,
+			labels
+		};
+	}, [
+		goToNextPage,
+		goToPreviousPage,
+		goToPage,
+		currentPage,
+		indicatedPages,
+		paginationItems,
+		disabledPages,
+		pagesCount,
+		onItemHover,
+		previousAvailablePage,
+		nextAvailablePage,
+		labels
 	]);
-	return /* @__PURE__ */ i.createElement(a.Provider, { value: w }, m);
+	return /* @__PURE__ */ React$1.createElement(PaginationContext.Provider, { value }, children);
 };
 //#endregion
-export { a as PaginationContext, o as PaginationProvider };
+export { PaginationContext, PaginationProvider };
 
 //# sourceMappingURL=PaginationContext.js.map

package/dist/components/pagination/pagination-context/PaginationContext.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationContext.js","names":[],"sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n  findNextAvailablePage,\n  findPreviousAvailablePage,\n  getPaginationElementsToRender\n} from '../pagination.helper'\nimport type { PaginationContextValue, PaginationProviderProps } from '../types'\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n  goToPage: () => null,\n  goToPreviousPage: () => null,\n  goToNextPage: () => null,\n  currentPage: 1,\n  pagesCount: 0,\n  onItemHover: () => null,\n  paginationItems: [],\n  labels: {},\n  indicatedPages: [],\n  disabledPages: []\n})\n\nexport const PaginationProvider = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children\n}: React.PropsWithChildren<PaginationProviderProps>) => {\n  const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n  const currentPage = selectedPage || internalCurrentPage\n\n  const goToPage = React.useCallback(\n    (pageNumber: number) => {\n      setInternalCurrentPage(pageNumber)\n      onSelectedPageChange?.(pageNumber)\n    },\n    [onSelectedPageChange]\n  )\n\n  const previousPage = currentPage - 1\n  const previousAvailablePage = findPreviousAvailablePage(\n    previousPage,\n    disabledPages\n  )\n\n  const goToPreviousPage = React.useCallback(() => {\n    if (previousAvailablePage) goToPage(previousAvailablePage)\n  }, [goToPage, previousAvailablePage])\n\n  const nextPage = currentPage + 1\n  const nextAvailablePage = findNextAvailablePage(\n    nextPage,\n    disabledPages,\n    pagesCount\n  )\n  const goToNextPage = React.useCallback(() => {\n    if (nextAvailablePage) goToPage(nextAvailablePage)\n  }, [goToPage, nextAvailablePage])\n\n  const paginationItems = getPaginationElementsToRender(\n    currentPage,\n    pagesCount,\n    visibleElementsCount\n  )\n\n  const value = React.useMemo(() => {\n    return {\n      goToNextPage,\n      goToPreviousPage,\n      goToPage,\n      currentPage,\n      paginationItems,\n      indicatedPages,\n      disabledPages,\n      pagesCount,\n      onItemHover,\n      previousAvailablePage,\n      nextAvailablePage,\n      labels\n    }\n  }, [\n    goToNextPage,\n    goToPreviousPage,\n    goToPage,\n    currentPage,\n    indicatedPages,\n    paginationItems,\n    disabledPages,\n    pagesCount,\n    onItemHover,\n    previousAvailablePage,\n    nextAvailablePage,\n    labels\n  ])\n\n  return (\n    <PaginationContext.Provider value={value}>\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n"],"mappings":";;;;AAUA,IAAa,IAAoB,EAAM,cAAsC;CAC3E,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB,EAAE;CACnB,QAAQ,EAAE;CACV,gBAAgB,EAAE;CAClB,eAAe,EAAE;CAClB,CAAC,EAEW,KAAsB,EACjC,yBACA,iBACA,0BAAuB,EAAsB,MAC7C,eACA,oBAAiB,EAAE,EACnB,mBAAgB,EAAE,EAClB,uBAAoB,MACpB,YAAS,EAAE,EACX,kBACsD;CACtD,IAAM,CAAC,GAAqB,KAA0B,EAAM,SAAS,EAAE,EAEjE,IAAc,KAAgB,GAE9B,IAAW,EAAM,aACpB,MAAuB;AAEtB,EADA,EAAuB,EAAW,EAClC,IAAuB,EAAW;IAEpC,CAAC,EAAqB,CACvB,EAGK,IAAwB,EADT,IAAc,GAGjC,EACD,EAEK,IAAmB,EAAM,kBAAkB;AAC/C,EAAI,KAAuB,EAAS,EAAsB;IACzD,CAAC,GAAU,EAAsB,CAAC,EAG/B,IAAoB,EADT,IAAc,GAG7B,GACA,EACD,EACK,IAAe,EAAM,kBAAkB;AAC3C,EAAI,KAAmB,EAAS,EAAkB;IACjD,CAAC,GAAU,EAAkB,CAAC,EAE3B,IAAkB,EACtB,GACA,GACA,EACD,EAEK,IAAQ,EAAM,eACX;EACL;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,GACA;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,kBAAA,cAAC,EAAkB,UAAnB,EAAmC,UAEN,EAD1B,EAC0B"}
+{"version":3,"file":"PaginationContext.js","names":[],"sources":["../../../../src/components/pagination/pagination-context/PaginationContext.tsx"],"sourcesContent":["import * as React from 'react'\n\nimport { VisibleElementsAmount } from '../pagination.constants'\nimport {\n  findNextAvailablePage,\n  findPreviousAvailablePage,\n  getPaginationElementsToRender\n} from '../pagination.helper'\nimport type { PaginationContextValue, PaginationProviderProps } from '../types'\n\nexport const PaginationContext = React.createContext<PaginationContextValue>({\n  goToPage: () => null,\n  goToPreviousPage: () => null,\n  goToNextPage: () => null,\n  currentPage: 1,\n  pagesCount: 0,\n  onItemHover: () => null,\n  paginationItems: [],\n  labels: {},\n  indicatedPages: [],\n  disabledPages: []\n})\n\nexport const PaginationProvider = ({\n  onSelectedPageChange,\n  selectedPage,\n  visibleElementsCount = VisibleElementsAmount.LESS,\n  pagesCount,\n  indicatedPages = [],\n  disabledPages = [],\n  onItemHover = () => null,\n  labels = {},\n  children\n}: React.PropsWithChildren<PaginationProviderProps>) => {\n  const [internalCurrentPage, setInternalCurrentPage] = React.useState(1)\n\n  const currentPage = selectedPage || internalCurrentPage\n\n  const goToPage = React.useCallback(\n    (pageNumber: number) => {\n      setInternalCurrentPage(pageNumber)\n      onSelectedPageChange?.(pageNumber)\n    },\n    [onSelectedPageChange]\n  )\n\n  const previousPage = currentPage - 1\n  const previousAvailablePage = findPreviousAvailablePage(\n    previousPage,\n    disabledPages\n  )\n\n  const goToPreviousPage = React.useCallback(() => {\n    if (previousAvailablePage) goToPage(previousAvailablePage)\n  }, [goToPage, previousAvailablePage])\n\n  const nextPage = currentPage + 1\n  const nextAvailablePage = findNextAvailablePage(\n    nextPage,\n    disabledPages,\n    pagesCount\n  )\n  const goToNextPage = React.useCallback(() => {\n    if (nextAvailablePage) goToPage(nextAvailablePage)\n  }, [goToPage, nextAvailablePage])\n\n  const paginationItems = getPaginationElementsToRender(\n    currentPage,\n    pagesCount,\n    visibleElementsCount\n  )\n\n  const value = React.useMemo(() => {\n    return {\n      goToNextPage,\n      goToPreviousPage,\n      goToPage,\n      currentPage,\n      paginationItems,\n      indicatedPages,\n      disabledPages,\n      pagesCount,\n      onItemHover,\n      previousAvailablePage,\n      nextAvailablePage,\n      labels\n    }\n  }, [\n    goToNextPage,\n    goToPreviousPage,\n    goToPage,\n    currentPage,\n    indicatedPages,\n    paginationItems,\n    disabledPages,\n    pagesCount,\n    onItemHover,\n    previousAvailablePage,\n    nextAvailablePage,\n    labels\n  ])\n\n  return (\n    <PaginationContext.Provider value={value}>\n      {children}\n    </PaginationContext.Provider>\n  )\n}\n"],"mappings":";;;;AAUA,IAAa,oBAAoB,QAAM,cAAsC;CAC3E,gBAAgB;CAChB,wBAAwB;CACxB,oBAAoB;CACpB,aAAa;CACb,YAAY;CACZ,mBAAmB;CACnB,iBAAiB,EAAE;CACnB,QAAQ,EAAE;CACV,gBAAgB,EAAE;CAClB,eAAe,EAAE;CAClB,CAAC;AAEF,IAAa,sBAAsB,EACjC,sBACA,cACA,uBAAuB,sBAAsB,MAC7C,YACA,iBAAiB,EAAE,EACnB,gBAAgB,EAAE,EAClB,oBAAoB,MACpB,SAAS,EAAE,EACX,eACsD;CACtD,MAAM,CAAC,qBAAqB,0BAA0B,QAAM,SAAS,EAAE;CAEvE,MAAM,cAAc,gBAAgB;CAEpC,MAAM,WAAW,QAAM,aACpB,eAAuB;AACtB,yBAAuB,WAAW;AAClC,yBAAuB,WAAW;IAEpC,CAAC,qBAAqB,CACvB;CAGD,MAAM,wBAAwB,0BADT,cAAc,GAGjC,cACD;CAED,MAAM,mBAAmB,QAAM,kBAAkB;AAC/C,MAAI,sBAAuB,UAAS,sBAAsB;IACzD,CAAC,UAAU,sBAAsB,CAAC;CAGrC,MAAM,oBAAoB,sBADT,cAAc,GAG7B,eACA,WACD;CACD,MAAM,eAAe,QAAM,kBAAkB;AAC3C,MAAI,kBAAmB,UAAS,kBAAkB;IACjD,CAAC,UAAU,kBAAkB,CAAC;CAEjC,MAAM,kBAAkB,8BACtB,aACA,YACA,qBACD;CAED,MAAM,QAAQ,QAAM,cAAc;AAChC,SAAO;GACL;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACA;GACD;IACA;EACD;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACD,CAAC;AAEF,QACE,wBAAA,cAAC,kBAAkB,UAAnB,EAAmC,OAEN,EAD1B,SAC0B"}

package/dist/components/pagination/pagination.constants.js

@@ -1,8 +1,13 @@
 //#region src/components/pagination/pagination.constants.ts
-var e = /* @__PURE__ */ function(e) {
-	return e[e.LESS = 6] = "LESS", e[e.MORE = 8] = "MORE", e;
-}({}), t = "VIEW_ALL_POPOVER", n = "GO_TO_PREVIOUS_PAGE", r = "GO_TO_NEXT_PAGE";
+var VisibleElementsAmount = /* @__PURE__ */ function(VisibleElementsAmount) {
+	VisibleElementsAmount[VisibleElementsAmount["LESS"] = 6] = "LESS";
+	VisibleElementsAmount[VisibleElementsAmount["MORE"] = 8] = "MORE";
+	return VisibleElementsAmount;
+}({});
+var VIEW_ALL_POPOVER = "VIEW_ALL_POPOVER";
+var GO_TO_PREVIOUS_PAGE = "GO_TO_PREVIOUS_PAGE";
+var GO_TO_NEXT_PAGE = "GO_TO_NEXT_PAGE";
 //#endregion
-export { r as GO_TO_NEXT_PAGE, n as GO_TO_PREVIOUS_PAGE, t as VIEW_ALL_POPOVER, e as VisibleElementsAmount };
+export { GO_TO_NEXT_PAGE, GO_TO_PREVIOUS_PAGE, VIEW_ALL_POPOVER, VisibleElementsAmount };
 
 //# sourceMappingURL=pagination.constants.js.map