@blueshift-gg/ui-components 0.1.8 → 0.1.9

package/dist/Pagination.js

@@ -119,6 +119,7 @@ const Pagination = ({
               label: item.toString(),
               value: item.toString()
             })),
+            selectedItem: itemsPerPage?.toString(),
             size: "sm",
             handleChange: (value) => onItemsPerPageChange(Number(value))
           }

package/dist/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Pagination.tsx"],"names":["useWindowSize","jsxs","classNames","jsx","Dropdown","motion","Fragment","anticipate","CrosshairCorners","Icon"],"mappings":"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","file":"Pagination.js","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { anticipate, motion } from \"motion/react\";\nimport { Dropdown } from \"./Dropdown\";\nimport { useWindowSize } from \"usehooks-ts\";\n\nexport type PaginationProps = {\n  totalPages: number;\n  currentPage: number;\n  onPageChange: (page: number) => void;\n  itemsPerPage?: number;\n  itemsPerPageOptions?: number[];\n  onItemsPerPageChange: (itemsPerPage: number) => void;\n  className?: string;\n};\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  onPageChange,\n  onItemsPerPageChange,\n  className,\n  itemsPerPage,\n  itemsPerPageOptions,\n}: PaginationProps) => {\n  // Mobile detection using useWindowSize\n  const { width } = useWindowSize();\n  const isMobile = width < 768; // md breakpoint\n  // Generate page numbers with logic for showing max 6 pages on desktop, 4 on mobile\n  const generatePageNumbers = () => {\n    const pages: (number | \"divider\")[] = [];\n    const maxPages = isMobile ? 4 : 6;\n\n    if (totalPages <= maxPages) {\n      // Show all pages if within the limit\n      for (let i = 1; i <= totalPages; i++) {\n        pages.push(i);\n      }\n    } else {\n      // Complex logic for more than max pages\n      if (currentPage <= (isMobile ? 3 : 4)) {\n        // Show first pages + last page with divider\n        const firstPagesCount = isMobile ? 3 : 5;\n        for (let i = 1; i <= firstPagesCount; i++) {\n          pages.push(i);\n        }\n        pages.push(\"divider\");\n        pages.push(totalPages);\n      } else if (currentPage >= totalPages - (isMobile ? 2 : 3)) {\n        // Show first page + divider + last pages\n        const lastPagesCount = isMobile ? 3 : 5;\n        pages.push(1);\n        pages.push(\"divider\");\n        for (let i = totalPages - (lastPagesCount - 1); i <= totalPages; i++) {\n          pages.push(i);\n        }\n      } else {\n        // Show first page + divider + current page and surrounding + divider + last page\n        pages.push(1);\n        pages.push(\"divider\");\n        const surroundingCount = isMobile ? 1 : 1; // Show current page and 1 on each side\n        for (\n          let i = currentPage - surroundingCount;\n          i <= currentPage + surroundingCount;\n          i++\n        ) {\n          pages.push(i);\n        }\n        pages.push(\"divider\");\n        pages.push(totalPages);\n      }\n    }\n\n    return pages;\n  };\n\n  const pageNumbers = generatePageNumbers();\n\n  return (\n    <div\n      className={classNames(\n        \"flex flex-col sm:flex-row items-center w-full gap-6\",\n        itemsPerPageOptions ? \"justify-between\" : \"justify-center\"\n      )}\n    >\n      <div className={classNames(\"flex items-center gap-1\", className)}>\n        {/* Left control */}\n        <PaginationButton\n          label=\"\"\n          onClick={() => onPageChange(currentPage - 1)}\n          disabled={currentPage === 1}\n          isControl={true}\n          controlDirection=\"left\"\n        />\n\n        {/* Page numbers and dividers */}\n        {pageNumbers.map((page, index) => {\n          if (page === \"divider\") {\n            return (\n              <div\n                key={`divider-${index}`}\n                className=\"flex items-center justify-center w-[36px] h-[36px]\"\n              >\n                <div className=\"w-1 h-1 bg-shade-tertiary/15\" />\n              </div>\n            );\n          }\n\n          return (\n            <PaginationButton\n              key={page}\n              label={page.toString()}\n              onClick={() => onPageChange(page)}\n              disabled={false}\n              isActive={page === currentPage}\n            />\n          );\n        })}\n\n        {/* Right control */}\n        <PaginationButton\n          label=\"\"\n          onClick={() => onPageChange(currentPage + 1)}\n          disabled={currentPage === totalPages}\n          isControl={true}\n          controlDirection=\"right\"\n        />\n      </div>\n      <div className=\"relative\">\n        {itemsPerPageOptions && (\n          <Dropdown\n            label={`${itemsPerPage ? itemsPerPage : \"Items\"} items per page`}\n            items={itemsPerPageOptions.map((item) => ({\n              label: item.toString(),\n              value: item.toString(),\n            }))}\n            size=\"sm\"\n            handleChange={(value) => onItemsPerPageChange(Number(value))}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport type PaginationButtonProps = {\n  label: string;\n  onClick: () => void;\n  disabled: boolean;\n  isControl?: boolean;\n  isActive?: boolean;\n  controlDirection?: \"left\" | \"right\";\n};\n\nexport const PaginationButton = ({\n  label,\n  onClick,\n  disabled,\n  isControl = false,\n  isActive = false,\n  controlDirection = \"left\",\n}: PaginationButtonProps) => {\n  return (\n    <motion.button\n      disabled={disabled}\n      onClick={onClick}\n      className={classNames(\n        \"disabled:opacity-40 border border-border-light relative flex items-center transition-colors justify-center w-[36px] h-[36px] shadow-[inset_0px_0px_12px_rgba(173,185,210,0.15)] bg-background\",\n        isActive && \"text-brand-primary\",\n        !isActive &&\n          \"enabled:hover:bg-shade-tertiary/5 enabled:hover:text-shade-secondary\"\n      )}\n    >\n      {isActive && (\n        <>\n          <motion.div\n            className=\"absolute inset-0 bg-current/5 before:!inset-[-1px] gradient-border before:bg-brand-primary/25 shadow-current/25 shadow-[inset_0px_0px_12px]\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1] }}\n            transition={{ duration: 0.5, ease: anticipate }}\n          />\n          <CrosshairCorners\n            size={4}\n            variant=\"corners\"\n            corners={[\"bottom-right\"]}\n            className=\"text-current\"\n            animationDuration={0.85}\n            animationDelay={0}\n          />\n        </>\n      )}\n      {isControl ? (\n        <Icon\n          name={controlDirection === \"left\" ? \"ChevronLeft\" : \"ChevronRight\"}\n          size={14}\n        />\n      ) : (\n        <span className=\"font-mono\">{label}</span>\n      )}\n    </motion.button>\n  );\n};\n"]}
+{"version":3,"sources":["../src/Pagination.tsx"],"names":["useWindowSize","jsxs","classNames","jsx","Dropdown","motion","Fragment","anticipate","CrosshairCorners","Icon"],"mappings":"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","file":"Pagination.js","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { anticipate, motion } from \"motion/react\";\nimport { Dropdown } from \"./Dropdown\";\nimport { useWindowSize } from \"usehooks-ts\";\n\nexport type PaginationProps = {\n  totalPages: number;\n  currentPage: number;\n  onPageChange: (page: number) => void;\n  itemsPerPage?: number;\n  itemsPerPageOptions?: number[];\n  onItemsPerPageChange: (itemsPerPage: number) => void;\n  className?: string;\n};\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  onPageChange,\n  onItemsPerPageChange,\n  className,\n  itemsPerPage,\n  itemsPerPageOptions,\n}: PaginationProps) => {\n  // Mobile detection using useWindowSize\n  const { width } = useWindowSize();\n  const isMobile = width < 768; // md breakpoint\n  // Generate page numbers with logic for showing max 6 pages on desktop, 4 on mobile\n  const generatePageNumbers = () => {\n    const pages: (number | \"divider\")[] = [];\n    const maxPages = isMobile ? 4 : 6;\n\n    if (totalPages <= maxPages) {\n      // Show all pages if within the limit\n      for (let i = 1; i <= totalPages; i++) {\n        pages.push(i);\n      }\n    } else {\n      // Complex logic for more than max pages\n      if (currentPage <= (isMobile ? 3 : 4)) {\n        // Show first pages + last page with divider\n        const firstPagesCount = isMobile ? 3 : 5;\n        for (let i = 1; i <= firstPagesCount; i++) {\n          pages.push(i);\n        }\n        pages.push(\"divider\");\n        pages.push(totalPages);\n      } else if (currentPage >= totalPages - (isMobile ? 2 : 3)) {\n        // Show first page + divider + last pages\n        const lastPagesCount = isMobile ? 3 : 5;\n        pages.push(1);\n        pages.push(\"divider\");\n        for (let i = totalPages - (lastPagesCount - 1); i <= totalPages; i++) {\n          pages.push(i);\n        }\n      } else {\n        // Show first page + divider + current page and surrounding + divider + last page\n        pages.push(1);\n        pages.push(\"divider\");\n        const surroundingCount = isMobile ? 1 : 1; // Show current page and 1 on each side\n        for (\n          let i = currentPage - surroundingCount;\n          i <= currentPage + surroundingCount;\n          i++\n        ) {\n          pages.push(i);\n        }\n        pages.push(\"divider\");\n        pages.push(totalPages);\n      }\n    }\n\n    return pages;\n  };\n\n  const pageNumbers = generatePageNumbers();\n\n  return (\n    <div\n      className={classNames(\n        \"flex flex-col sm:flex-row items-center w-full gap-6\",\n        itemsPerPageOptions ? \"justify-between\" : \"justify-center\"\n      )}\n    >\n      <div className={classNames(\"flex items-center gap-1\", className)}>\n        {/* Left control */}\n        <PaginationButton\n          label=\"\"\n          onClick={() => onPageChange(currentPage - 1)}\n          disabled={currentPage === 1}\n          isControl={true}\n          controlDirection=\"left\"\n        />\n\n        {/* Page numbers and dividers */}\n        {pageNumbers.map((page, index) => {\n          if (page === \"divider\") {\n            return (\n              <div\n                key={`divider-${index}`}\n                className=\"flex items-center justify-center w-[36px] h-[36px]\"\n              >\n                <div className=\"w-1 h-1 bg-shade-tertiary/15\" />\n              </div>\n            );\n          }\n\n          return (\n            <PaginationButton\n              key={page}\n              label={page.toString()}\n              onClick={() => onPageChange(page)}\n              disabled={false}\n              isActive={page === currentPage}\n            />\n          );\n        })}\n\n        {/* Right control */}\n        <PaginationButton\n          label=\"\"\n          onClick={() => onPageChange(currentPage + 1)}\n          disabled={currentPage === totalPages}\n          isControl={true}\n          controlDirection=\"right\"\n        />\n      </div>\n      <div className=\"relative\">\n        {itemsPerPageOptions && (\n          <Dropdown\n            label={`${itemsPerPage ? itemsPerPage : \"Items\"} items per page`}\n            items={itemsPerPageOptions.map((item) => ({\n              label: item.toString(),\n              value: item.toString(),\n            }))}\n            selectedItem={itemsPerPage?.toString()}\n            size=\"sm\"\n            handleChange={(value) => onItemsPerPageChange(Number(value))}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport type PaginationButtonProps = {\n  label: string;\n  onClick: () => void;\n  disabled: boolean;\n  isControl?: boolean;\n  isActive?: boolean;\n  controlDirection?: \"left\" | \"right\";\n};\n\nexport const PaginationButton = ({\n  label,\n  onClick,\n  disabled,\n  isControl = false,\n  isActive = false,\n  controlDirection = \"left\",\n}: PaginationButtonProps) => {\n  return (\n    <motion.button\n      disabled={disabled}\n      onClick={onClick}\n      className={classNames(\n        \"disabled:opacity-40 border border-border-light relative flex items-center transition-colors justify-center w-[36px] h-[36px] shadow-[inset_0px_0px_12px_rgba(173,185,210,0.15)] bg-background\",\n        isActive && \"text-brand-primary\",\n        !isActive &&\n          \"enabled:hover:bg-shade-tertiary/5 enabled:hover:text-shade-secondary\"\n      )}\n    >\n      {isActive && (\n        <>\n          <motion.div\n            className=\"absolute inset-0 bg-current/5 before:!inset-[-1px] gradient-border before:bg-brand-primary/25 shadow-current/25 shadow-[inset_0px_0px_12px]\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1] }}\n            transition={{ duration: 0.5, ease: anticipate }}\n          />\n          <CrosshairCorners\n            size={4}\n            variant=\"corners\"\n            corners={[\"bottom-right\"]}\n            className=\"text-current\"\n            animationDuration={0.85}\n            animationDelay={0}\n          />\n        </>\n      )}\n      {isControl ? (\n        <Icon\n          name={controlDirection === \"left\" ? \"ChevronLeft\" : \"ChevronRight\"}\n          size={14}\n        />\n      ) : (\n        <span className=\"font-mono\">{label}</span>\n      )}\n    </motion.button>\n  );\n};\n"]}

package/dist/Pagination.mjs

@@ -113,6 +113,7 @@ const Pagination = ({
               label: item.toString(),
               value: item.toString()
             })),
+            selectedItem: itemsPerPage?.toString(),
             size: "sm",
             handleChange: (value) => onItemsPerPageChange(Number(value))
           }

package/dist/Pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/Pagination.tsx"],"names":[],"mappings":";;;;;;;;AAmBO,MAAM,aAAa,CAAC;AAAA,EACzB,UAAA;AAAA,EACA,WAAA;AAAA,EACA,YAAA;AAAA,EACA,oBAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA;AACF,CAAA,KAAuB;AAErB,EAAA,MAAM,EAAE,KAAA,EAAM,GAAI,aAAA,EAAc;AAChC,EAAA,MAAM,WAAW,KAAA,GAAQ,GAAA;AAEzB,EAAA,MAAM,sBAAsB,MAAM;AAChC,IAAA,MAAM,QAAgC,EAAC;AACvC,IAAA,MAAM,QAAA,GAAW,WAAW,CAAA,GAAI,CAAA;AAEhC,IAAA,IAAI,cAAc,QAAA,EAAU;AAE1B,MAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,IAAK,UAAA,EAAY,CAAA,EAAA,EAAK;AACpC,QAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AAAA,MACd;AAAA,IACF,CAAA,MAAO;AAEL,MAAA,IAAI,WAAA,KAAgB,QAAA,GAAW,CAAA,GAAI,CAAA,CAAA,EAAI;AAErC,QAAA,MAAM,eAAA,GAAkB,WAAW,CAAA,GAAI,CAAA;AACvC,QAAA,KAAA,IAAS,CAAA,GAAI,CAAA,EAAG,CAAA,IAAK,eAAA,EAAiB,CAAA,EAAA,EAAK;AACzC,UAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AAAA,QACd;AACA,QAAA,KAAA,CAAM,KAAK,SAAS,CAAA;AACpB,QAAA,KAAA,CAAM,KAAK,UAAU,CAAA;AAAA,MACvB,CAAA,MAAA,IAAW,WAAA,IAAe,UAAA,IAAc,QAAA,GAAW,IAAI,CAAA,CAAA,EAAI;AAEzD,QAAA,MAAM,cAAA,GAAiB,WAAW,CAAA,GAAI,CAAA;AACtC,QAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AACZ,QAAA,KAAA,CAAM,KAAK,SAAS,CAAA;AACpB,QAAA,KAAA,IAAS,IAAI,UAAA,IAAc,cAAA,GAAiB,CAAA,CAAA,EAAI,CAAA,IAAK,YAAY,CAAA,EAAA,EAAK;AACpE,UAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AAAA,QACd;AAAA,MACF,CAAA,MAAO;AAEL,QAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AACZ,QAAA,KAAA,CAAM,KAAK,SAAS,CAAA;AACpB,QAAA,MAAM,gBAAA,GAAmB,WAAW,CAAA,GAAI,CAAA;AACxC,QAAA,KAAA,IACM,IAAI,WAAA,GAAc,gBAAA,EACtB,CAAA,IAAK,WAAA,GAAc,kBACnB,CAAA,EAAA,EACA;AACA,UAAA,KAAA,CAAM,KAAK,CAAC,CAAA;AAAA,QACd;AACA,QAAA,KAAA,CAAM,KAAK,SAAS,CAAA;AACpB,QAAA,KAAA,CAAM,KAAK,UAAU,CAAA;AAAA,MACvB;AAAA,IACF;AAEA,IAAA,OAAO,KAAA;AAAA,EACT,CAAA;AAEA,EAAA,MAAM,cAAc,mBAAA,EAAoB;AAExC,EAAA,uBACE,IAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAA,EAAW,UAAA;AAAA,QACT,qDAAA;AAAA,QACA,sBAAsB,iBAAA,GAAoB;AAAA,OAC5C;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,UAAA,CAAW,yBAAA,EAA2B,SAAS,CAAA,EAE7D,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,EAAA;AAAA,cACN,OAAA,EAAS,MAAM,YAAA,CAAa,WAAA,GAAc,CAAC,CAAA;AAAA,cAC3C,UAAU,WAAA,KAAgB,CAAA;AAAA,cAC1B,SAAA,EAAW,IAAA;AAAA,cACX,gBAAA,EAAiB;AAAA;AAAA,WACnB;AAAA,UAGC,WAAA,CAAY,GAAA,CAAI,CAAC,IAAA,EAAM,KAAA,KAAU;AAChC,YAAA,IAAI,SAAS,SAAA,EAAW;AACtB,cAAA,uBACE,GAAA;AAAA,gBAAC,KAAA;AAAA,gBAAA;AAAA,kBAEC,SAAA,EAAU,oDAAA;AAAA,kBAEV,QAAA,kBAAA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,8BAAA,EAA+B;AAAA,iBAAA;AAAA,gBAHzC,WAAW,KAAK,CAAA;AAAA,eAIvB;AAAA,YAEJ;AAEA,YAAA,uBACE,GAAA;AAAA,cAAC,gBAAA;AAAA,cAAA;AAAA,gBAEC,KAAA,EAAO,KAAK,QAAA,EAAS;AAAA,gBACrB,OAAA,EAAS,MAAM,YAAA,CAAa,IAAI,CAAA;AAAA,gBAChC,QAAA,EAAU,KAAA;AAAA,gBACV,UAAU,IAAA,KAAS;AAAA,eAAA;AAAA,cAJd;AAAA,aAKP;AAAA,UAEJ,CAAC,CAAA;AAAA,0BAGD,GAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACC,KAAA,EAAM,EAAA;AAAA,cACN,OAAA,EAAS,MAAM,YAAA,CAAa,WAAA,GAAc,CAAC,CAAA;AAAA,cAC3C,UAAU,WAAA,KAAgB,UAAA;AAAA,cAC1B,SAAA,EAAW,IAAA;AAAA,cACX,gBAAA,EAAiB;AAAA;AAAA;AACnB,SAAA,EACF,CAAA;AAAA,wBACA,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,UAAA,EACZ,QAAA,EAAA,mBAAA,oBACC,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,KAAA,EAAO,CAAA,EAAG,YAAA,GAAe,YAAA,GAAe,OAAO,CAAA,eAAA,CAAA;AAAA,YAC/C,KAAA,EAAO,mBAAA,CAAoB,GAAA,CAAI,CAAC,IAAA,MAAU;AAAA,cACxC,KAAA,EAAO,KAAK,QAAA,EAAS;AAAA,cACrB,KAAA,EAAO,KAAK,QAAA;AAAS,aACvB,CAAE,CAAA;AAAA,YACF,IAAA,EAAK,IAAA;AAAA,YACL,cAAc,CAAC,KAAA,KAAU,oBAAA,CAAqB,MAAA,CAAO,KAAK,CAAC;AAAA;AAAA,SAC7D,EAEJ;AAAA;AAAA;AAAA,GACF;AAEJ;AAWO,MAAM,mBAAmB,CAAC;AAAA,EAC/B,KAAA;AAAA,EACA,OAAA;AAAA,EACA,QAAA;AAAA,EACA,SAAA,GAAY,KAAA;AAAA,EACZ,QAAA,GAAW,KAAA;AAAA,EACX,gBAAA,GAAmB;AACrB,CAAA,KAA6B;AAC3B,EAAA,uBACE,IAAA;AAAA,IAAC,MAAA,CAAO,MAAA;AAAA,IAAP;AAAA,MACC,QAAA;AAAA,MACA,OAAA;AAAA,MACA,SAAA,EAAW,UAAA;AAAA,QACT,+LAAA;AAAA,QACA,QAAA,IAAY,oBAAA;AAAA,QACZ,CAAC,QAAA,IACC;AAAA,OACJ;AAAA,MAEC,QAAA,EAAA;AAAA,QAAA,QAAA,oBACC,IAAA,CAAA,QAAA,EAAA,EACE,QAAA,EAAA;AAAA,0BAAA,GAAA;AAAA,YAAC,MAAA,CAAO,GAAA;AAAA,YAAP;AAAA,cACC,SAAA,EAAU,6IAAA;AAAA,cACV,OAAA,EAAS,EAAE,OAAA,EAAS,CAAA,EAAE;AAAA,cACtB,OAAA,EAAS,EAAE,OAAA,EAAS,CAAC,GAAG,CAAA,EAAG,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAA,EAAG,GAAA,EAAK,CAAC,CAAA,EAAE;AAAA,cAC3D,UAAA,EAAY,EAAE,QAAA,EAAU,GAAA,EAAK,MAAM,UAAA;AAAW;AAAA,WAChD;AAAA,0BACA,GAAA;AAAA,YAAC,gBAAA;AAAA,YAAA;AAAA,cACC,IAAA,EAAM,CAAA;AAAA,cACN,OAAA,EAAQ,SAAA;AAAA,cACR,OAAA,EAAS,CAAC,cAAc,CAAA;AAAA,cACxB,SAAA,EAAU,cAAA;AAAA,cACV,iBAAA,EAAmB,IAAA;AAAA,cACnB,cAAA,EAAgB;AAAA;AAAA;AAClB,SAAA,EACF,CAAA;AAAA,QAED,SAAA,mBACC,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAM,gBAAA,KAAqB,MAAA,GAAS,aAAA,GAAgB,cAAA;AAAA,YACpD,IAAA,EAAM;AAAA;AAAA,SACR,mBAEA,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAa,QAAA,EAAA,KAAA,EAAM;AAAA;AAAA;AAAA,GAEvC;AAEJ","file":"Pagination.mjs","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { anticipate, motion } from \"motion/react\";\nimport { Dropdown } from \"./Dropdown\";\nimport { useWindowSize } from \"usehooks-ts\";\n\nexport type PaginationProps = {\n  totalPages: number;\n  currentPage: number;\n  onPageChange: (page: number) => void;\n  itemsPerPage?: number;\n  itemsPerPageOptions?: number[];\n  onItemsPerPageChange: (itemsPerPage: number) => void;\n  className?: string;\n};\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  onPageChange,\n  onItemsPerPageChange,\n  className,\n  itemsPerPage,\n  itemsPerPageOptions,\n}: PaginationProps) => {\n  // Mobile detection using useWindowSize\n  const { width } = useWindowSize();\n  const isMobile = width < 768; // md breakpoint\n  // Generate page numbers with logic for showing max 6 pages on desktop, 4 on mobile\n  const generatePageNumbers = () => {\n    const pages: (number | \"divider\")[] = [];\n    const maxPages = isMobile ? 4 : 6;\n\n    if (totalPages <= maxPages) {\n      // Show all pages if within the limit\n      for (let i = 1; i <= totalPages; i++) {\n        pages.push(i);\n      }\n    } else {\n      // Complex logic for more than max pages\n      if (currentPage <= (isMobile ? 3 : 4)) {\n        // Show first pages + last page with divider\n        const firstPagesCount = isMobile ? 3 : 5;\n        for (let i = 1; i <= firstPagesCount; i++) {\n          pages.push(i);\n        }\n        pages.push(\"divider\");\n        pages.push(totalPages);\n      } else if (currentPage >= totalPages - (isMobile ? 2 : 3)) {\n        // Show first page + divider + last pages\n        const lastPagesCount = isMobile ? 3 : 5;\n        pages.push(1);\n        pages.push(\"divider\");\n        for (let i = totalPages - (lastPagesCount - 1); i <= totalPages; i++) {\n          pages.push(i);\n        }\n      } else {\n        // Show first page + divider + current page and surrounding + divider + last page\n        pages.push(1);\n        pages.push(\"divider\");\n        const surroundingCount = isMobile ? 1 : 1; // Show current page and 1 on each side\n        for (\n          let i = currentPage - surroundingCount;\n          i <= currentPage + surroundingCount;\n          i++\n        ) {\n          pages.push(i);\n        }\n        pages.push(\"divider\");\n        pages.push(totalPages);\n      }\n    }\n\n    return pages;\n  };\n\n  const pageNumbers = generatePageNumbers();\n\n  return (\n    <div\n      className={classNames(\n        \"flex flex-col sm:flex-row items-center w-full gap-6\",\n        itemsPerPageOptions ? \"justify-between\" : \"justify-center\"\n      )}\n    >\n      <div className={classNames(\"flex items-center gap-1\", className)}>\n        {/* Left control */}\n        <PaginationButton\n          label=\"\"\n          onClick={() => onPageChange(currentPage - 1)}\n          disabled={currentPage === 1}\n          isControl={true}\n          controlDirection=\"left\"\n        />\n\n        {/* Page numbers and dividers */}\n        {pageNumbers.map((page, index) => {\n          if (page === \"divider\") {\n            return (\n              <div\n                key={`divider-${index}`}\n                className=\"flex items-center justify-center w-[36px] h-[36px]\"\n              >\n                <div className=\"w-1 h-1 bg-shade-tertiary/15\" />\n              </div>\n            );\n          }\n\n          return (\n            <PaginationButton\n              key={page}\n              label={page.toString()}\n              onClick={() => onPageChange(page)}\n              disabled={false}\n              isActive={page === currentPage}\n            />\n          );\n        })}\n\n        {/* Right control */}\n        <PaginationButton\n          label=\"\"\n          onClick={() => onPageChange(currentPage + 1)}\n          disabled={currentPage === totalPages}\n          isControl={true}\n          controlDirection=\"right\"\n        />\n      </div>\n      <div className=\"relative\">\n        {itemsPerPageOptions && (\n          <Dropdown\n            label={`${itemsPerPage ? itemsPerPage : \"Items\"} items per page`}\n            items={itemsPerPageOptions.map((item) => ({\n              label: item.toString(),\n              value: item.toString(),\n            }))}\n            size=\"sm\"\n            handleChange={(value) => onItemsPerPageChange(Number(value))}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport type PaginationButtonProps = {\n  label: string;\n  onClick: () => void;\n  disabled: boolean;\n  isControl?: boolean;\n  isActive?: boolean;\n  controlDirection?: \"left\" | \"right\";\n};\n\nexport const PaginationButton = ({\n  label,\n  onClick,\n  disabled,\n  isControl = false,\n  isActive = false,\n  controlDirection = \"left\",\n}: PaginationButtonProps) => {\n  return (\n    <motion.button\n      disabled={disabled}\n      onClick={onClick}\n      className={classNames(\n        \"disabled:opacity-40 border border-border-light relative flex items-center transition-colors justify-center w-[36px] h-[36px] shadow-[inset_0px_0px_12px_rgba(173,185,210,0.15)] bg-background\",\n        isActive && \"text-brand-primary\",\n        !isActive &&\n          \"enabled:hover:bg-shade-tertiary/5 enabled:hover:text-shade-secondary\"\n      )}\n    >\n      {isActive && (\n        <>\n          <motion.div\n            className=\"absolute inset-0 bg-current/5 before:!inset-[-1px] gradient-border before:bg-brand-primary/25 shadow-current/25 shadow-[inset_0px_0px_12px]\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1] }}\n            transition={{ duration: 0.5, ease: anticipate }}\n          />\n          <CrosshairCorners\n            size={4}\n            variant=\"corners\"\n            corners={[\"bottom-right\"]}\n            className=\"text-current\"\n            animationDuration={0.85}\n            animationDelay={0}\n          />\n        </>\n      )}\n      {isControl ? (\n        <Icon\n          name={controlDirection === \"left\" ? \"ChevronLeft\" : \"ChevronRight\"}\n          size={14}\n        />\n      ) : (\n        <span className=\"font-mono\">{label}</span>\n      )}\n    </motion.button>\n  );\n};\n"]}
+{"version":3,"sources":["../src/Pagination.tsx"],"names":[],"mappings":"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","file":"Pagination.mjs","sourcesContent":["\"use client\";\n\nimport classNames from \"classnames\";\nimport { Icon } from \"./Icon\";\nimport { CrosshairCorners } from \"./CrossHair\";\nimport { anticipate, motion } from \"motion/react\";\nimport { Dropdown } from \"./Dropdown\";\nimport { useWindowSize } from \"usehooks-ts\";\n\nexport type PaginationProps = {\n  totalPages: number;\n  currentPage: number;\n  onPageChange: (page: number) => void;\n  itemsPerPage?: number;\n  itemsPerPageOptions?: number[];\n  onItemsPerPageChange: (itemsPerPage: number) => void;\n  className?: string;\n};\n\nexport const Pagination = ({\n  totalPages,\n  currentPage,\n  onPageChange,\n  onItemsPerPageChange,\n  className,\n  itemsPerPage,\n  itemsPerPageOptions,\n}: PaginationProps) => {\n  // Mobile detection using useWindowSize\n  const { width } = useWindowSize();\n  const isMobile = width < 768; // md breakpoint\n  // Generate page numbers with logic for showing max 6 pages on desktop, 4 on mobile\n  const generatePageNumbers = () => {\n    const pages: (number | \"divider\")[] = [];\n    const maxPages = isMobile ? 4 : 6;\n\n    if (totalPages <= maxPages) {\n      // Show all pages if within the limit\n      for (let i = 1; i <= totalPages; i++) {\n        pages.push(i);\n      }\n    } else {\n      // Complex logic for more than max pages\n      if (currentPage <= (isMobile ? 3 : 4)) {\n        // Show first pages + last page with divider\n        const firstPagesCount = isMobile ? 3 : 5;\n        for (let i = 1; i <= firstPagesCount; i++) {\n          pages.push(i);\n        }\n        pages.push(\"divider\");\n        pages.push(totalPages);\n      } else if (currentPage >= totalPages - (isMobile ? 2 : 3)) {\n        // Show first page + divider + last pages\n        const lastPagesCount = isMobile ? 3 : 5;\n        pages.push(1);\n        pages.push(\"divider\");\n        for (let i = totalPages - (lastPagesCount - 1); i <= totalPages; i++) {\n          pages.push(i);\n        }\n      } else {\n        // Show first page + divider + current page and surrounding + divider + last page\n        pages.push(1);\n        pages.push(\"divider\");\n        const surroundingCount = isMobile ? 1 : 1; // Show current page and 1 on each side\n        for (\n          let i = currentPage - surroundingCount;\n          i <= currentPage + surroundingCount;\n          i++\n        ) {\n          pages.push(i);\n        }\n        pages.push(\"divider\");\n        pages.push(totalPages);\n      }\n    }\n\n    return pages;\n  };\n\n  const pageNumbers = generatePageNumbers();\n\n  return (\n    <div\n      className={classNames(\n        \"flex flex-col sm:flex-row items-center w-full gap-6\",\n        itemsPerPageOptions ? \"justify-between\" : \"justify-center\"\n      )}\n    >\n      <div className={classNames(\"flex items-center gap-1\", className)}>\n        {/* Left control */}\n        <PaginationButton\n          label=\"\"\n          onClick={() => onPageChange(currentPage - 1)}\n          disabled={currentPage === 1}\n          isControl={true}\n          controlDirection=\"left\"\n        />\n\n        {/* Page numbers and dividers */}\n        {pageNumbers.map((page, index) => {\n          if (page === \"divider\") {\n            return (\n              <div\n                key={`divider-${index}`}\n                className=\"flex items-center justify-center w-[36px] h-[36px]\"\n              >\n                <div className=\"w-1 h-1 bg-shade-tertiary/15\" />\n              </div>\n            );\n          }\n\n          return (\n            <PaginationButton\n              key={page}\n              label={page.toString()}\n              onClick={() => onPageChange(page)}\n              disabled={false}\n              isActive={page === currentPage}\n            />\n          );\n        })}\n\n        {/* Right control */}\n        <PaginationButton\n          label=\"\"\n          onClick={() => onPageChange(currentPage + 1)}\n          disabled={currentPage === totalPages}\n          isControl={true}\n          controlDirection=\"right\"\n        />\n      </div>\n      <div className=\"relative\">\n        {itemsPerPageOptions && (\n          <Dropdown\n            label={`${itemsPerPage ? itemsPerPage : \"Items\"} items per page`}\n            items={itemsPerPageOptions.map((item) => ({\n              label: item.toString(),\n              value: item.toString(),\n            }))}\n            selectedItem={itemsPerPage?.toString()}\n            size=\"sm\"\n            handleChange={(value) => onItemsPerPageChange(Number(value))}\n          />\n        )}\n      </div>\n    </div>\n  );\n};\n\nexport type PaginationButtonProps = {\n  label: string;\n  onClick: () => void;\n  disabled: boolean;\n  isControl?: boolean;\n  isActive?: boolean;\n  controlDirection?: \"left\" | \"right\";\n};\n\nexport const PaginationButton = ({\n  label,\n  onClick,\n  disabled,\n  isControl = false,\n  isActive = false,\n  controlDirection = \"left\",\n}: PaginationButtonProps) => {\n  return (\n    <motion.button\n      disabled={disabled}\n      onClick={onClick}\n      className={classNames(\n        \"disabled:opacity-40 border border-border-light relative flex items-center transition-colors justify-center w-[36px] h-[36px] shadow-[inset_0px_0px_12px_rgba(173,185,210,0.15)] bg-background\",\n        isActive && \"text-brand-primary\",\n        !isActive &&\n          \"enabled:hover:bg-shade-tertiary/5 enabled:hover:text-shade-secondary\"\n      )}\n    >\n      {isActive && (\n        <>\n          <motion.div\n            className=\"absolute inset-0 bg-current/5 before:!inset-[-1px] gradient-border before:bg-brand-primary/25 shadow-current/25 shadow-[inset_0px_0px_12px]\"\n            initial={{ opacity: 0 }}\n            animate={{ opacity: [0, 1, 0.2, 1, 0.4, 1, 0.6, 1, 0.8, 1] }}\n            transition={{ duration: 0.5, ease: anticipate }}\n          />\n          <CrosshairCorners\n            size={4}\n            variant=\"corners\"\n            corners={[\"bottom-right\"]}\n            className=\"text-current\"\n            animationDuration={0.85}\n            animationDelay={0}\n          />\n        </>\n      )}\n      {isControl ? (\n        <Icon\n          name={controlDirection === \"left\" ? \"ChevronLeft\" : \"ChevronRight\"}\n          size={14}\n        />\n      ) : (\n        <span className=\"font-mono\">{label}</span>\n      )}\n    </motion.button>\n  );\n};\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blueshift-gg/ui-components",
-  "version": "0.1.8",
+  "version": "0.1.9",
   "private": false,
   "publishConfig": {
     "access": "public"
@@ -57,15 +57,6 @@
     "README.md",
     "LICENSE"
   ],
-  "scripts": {
-    "lint": "eslint . --max-warnings 0",
-    "generate:component": "turbo gen react-component",
-    "check-types": "tsc --noEmit",
-    "build": "tsup",
-    "prepublishOnly": "pnpm build",
-    "publish:dry-run": "npm publish --dry-run",
-    "publish:npm": "npm publish --access public"
-  },
   "devDependencies": {
     "@types/node": "^22.15.3",
     "@types/react": "19.1.0",
@@ -84,5 +75,13 @@
     "sonner": "^2.0.7",
     "tailwindcss": "^4.1.4",
     "usehooks-ts": "^3.1.1"
+  },
+  "scripts": {
+    "lint": "eslint . --max-warnings 0",
+    "generate:component": "turbo gen react-component",
+    "check-types": "tsc --noEmit",
+    "build": "tsup",
+    "publish:dry-run": "npm publish --dry-run",
+    "publish:npm": "npm publish --access public"
   }
-}
+}