@zentauri-ui/zentauri-components 2.1.5 → 2.1.6

package/dist/ui/pagination.js

@@ -2,33 +2,35 @@
 'use strict';
 
 var chunk2VUMVDR3_js = require('../chunk-2VUMVDR3.js');
-var chunkD2GISTDL_js = require('../chunk-D2GISTDL.js');
-var chunkNZSZE36T_js = require('../chunk-NZSZE36T.js');
+var chunk3W2UUKWP_js = require('../chunk-3W2UUKWP.js');
+var chunkVA6SB6NN_js = require('../chunk-VA6SB6NN.js');
 require('../chunk-FBUY6K6S.js');
+require('../chunk-NDF3HORF.js');
 require('../chunk-USLNTKVQ.js');
 require('../chunk-D7ATXPVI.js');
 require('../chunk-IEHY6KNM.js');
 require('../chunk-3MK7CWEX.js');
+require('../chunk-UJXFD4SK.js');
 require('../chunk-3EJCQXGV.js');
 require('../chunk-6KVTKYTB.js');
 require('../chunk-L7W4NRK6.js');
 require('../chunk-KWBGLH7G.js');
 require('../chunk-OH5VOGNW.js');
 require('../chunk-Y7BU5RC4.js');
-require('../chunk-NDF3HORF.js');
+require('../chunk-SRSRY5K2.js');
 require('../chunk-UG3GF2BD.js');
 require('../chunk-BZTAA3MK.js');
 require('../chunk-PZ25OHJE.js');
 require('../chunk-HOOZYA4N.js');
 require('../chunk-CJCOURVM.js');
 require('../chunk-22FJROCI.js');
-require('../chunk-UJXFD4SK.js');
+require('../chunk-KJMW7S5X.js');
 require('../chunk-3CYJQ6KF.js');
 require('../chunk-3453DQNL.js');
 require('../chunk-DYSXCJGL.js');
 require('../chunk-A7MU6SFI.js');
 require('../chunk-WGN2CBG6.js');
-require('../chunk-SRSRY5K2.js');
+require('../chunk-NYO3W5GY.js');
 require('../chunk-HNRCPZCK.js');
 require('../chunk-J2SUGU3X.js');
 require('../chunk-J5NTJVKX.js');
@@ -36,33 +38,32 @@ require('../chunk-UQQHB3OI.js');
 require('../chunk-BBM4BKSN.js');
 require('../chunk-Y5JAQEBF.js');
 require('../chunk-7DVECOO7.js');
-require('../chunk-KJMW7S5X.js');
 require('../chunk-YPYPWALR.js');
 require('../chunk-PP3L6M62.js');
 require('../chunk-BJDT7P2I.js');
+require('../chunk-PG7LQVU6.js');
 require('../chunk-NFUOJMNI.js');
 require('../chunk-UT6QG35L.js');
 require('../chunk-IR5SJ7AQ.js');
-require('../chunk-NYO3W5GY.js');
 var chunkZS5756ZC_js = require('../chunk-ZS5756ZC.js');
 require('../chunk-PZ5AY32C.js');
 var react = require('react');
 var classVarianceAuthority = require('class-variance-authority');
 var jsxRuntime = require('react/jsx-runtime');
 
-var paginationListVariants = classVarianceAuthority.cva(chunkNZSZE36T_js.zuiPaginationListBase, {
+var paginationListVariants = classVarianceAuthority.cva(chunkVA6SB6NN_js.zuiPaginationListBase, {
   variants: {
-    appearance: chunkNZSZE36T_js.zuiPaginationListAppearances,
-    size: chunkNZSZE36T_js.zuiPaginationListSizes
+    appearance: chunkVA6SB6NN_js.zuiPaginationListAppearances,
+    size: chunkVA6SB6NN_js.zuiPaginationListSizes
   },
   defaultVariants: {
     appearance: "default",
     size: "md"
   }
 });
-var paginationEllipsisVariants = classVarianceAuthority.cva(chunkNZSZE36T_js.zuiPaginationEllipsisBase, {
+var paginationEllipsisVariants = classVarianceAuthority.cva(chunkVA6SB6NN_js.zuiPaginationEllipsisBase, {
   variants: {
-    size: chunkNZSZE36T_js.zuiPaginationEllipsisSizes
+    size: chunkVA6SB6NN_js.zuiPaginationEllipsisSizes
   },
   defaultVariants: { size: "md" }
 });
@@ -127,10 +128,10 @@ var Pagination = ({
     return null;
   }
   const inactiveTriggerClass = chunkZS5756ZC_js.cn(
-    chunkD2GISTDL_js.buttonVariants({ appearance: "ghost", size }),
+    chunk3W2UUKWP_js.buttonVariants({ appearance: "ghost", size }),
     "bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10"
   );
-  const currentTriggerClass = chunkD2GISTDL_js.buttonVariants({ appearance, size });
+  const currentTriggerClass = chunk3W2UUKWP_js.buttonVariants({ appearance, size });
   const triggerFocusRing = "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950";
   const renderPageControl = (pageNumber) => {
     const isCurrent = pageNumber === currentPage;
@@ -173,7 +174,7 @@ var Pagination = ({
   const prevHref = getPageHref?.(chunkZS5756ZC_js.clampPage(currentPage - 1, pageCount));
   const nextHref = getPageHref?.(chunkZS5756ZC_js.clampPage(currentPage + 1, pageCount));
   const navTriggerClass = chunkZS5756ZC_js.cn(
-    chunkD2GISTDL_js.buttonVariants({ appearance: "outline", size }),
+    chunk3W2UUKWP_js.buttonVariants({ appearance: "outline", size }),
     "shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
   );
   return /* @__PURE__ */ jsxRuntime.jsx(

package/dist/ui/pagination.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/pagination/variants.ts","../../src/ui/pagination/pagination.tsx"],"names":["cva","zuiPaginationListBase","zuiPaginationListAppearances","zuiPaginationListSizes","zuiPaginationEllipsisBase","zuiPaginationEllipsisSizes","useId","usePagination","useCallback","cn","buttonVariants","jsx","clampPage","jsxs"],"mappings":"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","file":"pagination.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiPaginationEllipsisBase,\n  zuiPaginationEllipsisSizes,\n  zuiPaginationListAppearances,\n  zuiPaginationListBase,\n  zuiPaginationListSizes,\n} from \"../../design-system/pagination\";\n\nexport const paginationListVariants = cva(zuiPaginationListBase, {\n  variants: {\n    appearance: zuiPaginationListAppearances,\n    size: zuiPaginationListSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const paginationEllipsisVariants = cva(zuiPaginationEllipsisBase, {\n  variants: {\n    size: zuiPaginationEllipsisSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { useCallback, useId, type KeyboardEvent } from \"react\";\n\nimport { cn, clampPage } from \"../../lib/utils\";\nimport { buttonVariants } from \"../buttons/variants\";\n\nimport type { PaginationProps } from \"./types\";\nimport { usePagination } from \"../../hooks/usePagination\";\nimport { paginationEllipsisVariants, paginationListVariants } from \"./variants\";\n\nconst defaultPrevLabel = \"Previous page\";\nconst defaultNextLabel = \"Next page\";\nconst defaultEllipsisLabel = \"More pages\";\n\nexport const Pagination = ({\n  className,\n  appearance = \"default\",\n  size = \"md\",\n  pageCount,\n  page,\n  defaultPage = 1,\n  onPageChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  showPrevNext = true,\n  prevLabel = defaultPrevLabel,\n  nextLabel = defaultNextLabel,\n  ellipsisLabel = defaultEllipsisLabel,\n  getPageHref,\n  \"aria-label\": ariaLabel = \"Pagination\",\n  ref,\n  ...rest\n}: PaginationProps) => {\n  const id = useId();\n  const listId = `${id}-list`;\n\n  const { currentPage, items, setPage, goPrev, goNext, canGoPrev, canGoNext } =\n    usePagination({\n      pageCount,\n      page,\n      defaultPage,\n      siblingCount,\n      boundaryCount,\n      onPageChange,\n    });\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (pageCount <= 0) {\n        return;\n      }\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        event.preventDefault();\n        if (canGoNext) {\n          setPage(currentPage + 1);\n        }\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        event.preventDefault();\n        if (canGoPrev) {\n          setPage(currentPage - 1);\n        }\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        setPage(1);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        setPage(pageCount);\n      }\n    },\n    [canGoNext, canGoPrev, currentPage, pageCount, setPage],\n  );\n\n  if (pageCount <= 0) {\n    return null;\n  }\n\n  const inactiveTriggerClass = cn(\n    buttonVariants({ appearance: \"ghost\", size }),\n    \"bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10\",\n  );\n\n  const currentTriggerClass = buttonVariants({ appearance, size });\n\n  const triggerFocusRing =\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\";\n\n  const renderPageControl = (pageNumber: number) => {\n    const isCurrent = pageNumber === currentPage;\n    const href = getPageHref?.(pageNumber);\n    const shared = cn(\n      isCurrent ? currentTriggerClass : inactiveTriggerClass,\n      \"min-w-[2.25ch] shrink-0\",\n      triggerFocusRing,\n    );\n\n    if (href) {\n      return (\n        <a\n          data-slot=\"pagination-trigger\"\n          href={href}\n          aria-label={`Page ${pageNumber}`}\n          aria-current={isCurrent ? \"page\" : undefined}\n          className={shared}\n        >\n          {pageNumber}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"pagination-trigger\"\n        aria-label={`Page ${pageNumber}`}\n        aria-current={isCurrent ? \"page\" : undefined}\n        className={shared}\n        onClick={() => {\n          if (!isCurrent) {\n            setPage(pageNumber);\n          }\n        }}\n      >\n        {pageNumber}\n      </button>\n    );\n  };\n\n  const prevHref = getPageHref?.(clampPage(currentPage - 1, pageCount));\n  const nextHref = getPageHref?.(clampPage(currentPage + 1, pageCount));\n\n  const navTriggerClass = cn(\n    buttonVariants({ appearance: \"outline\", size }),\n    \"shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n  );\n\n  return (\n    <nav\n      ref={ref}\n      data-slot=\"pagination\"\n      aria-label={ariaLabel}\n      className={cn(\"w-full\", className)}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {showPrevNext ? (\n          getPageHref && prevHref && canGoPrev ? (\n            <a\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              href={prevHref}\n              className={navTriggerClass}\n            >\n              Prev\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              disabled={!canGoPrev}\n              className={navTriggerClass}\n              onClick={goPrev}\n            >\n              Prev\n            </button>\n          )\n        ) : null}\n\n        <ul\n          id={listId}\n          data-slot=\"pagination-list\"\n          className={paginationListVariants({ appearance, size })}\n        >\n          {items.map((item) => (\n            <li\n              key={item.type === \"page\" ? `page-${item.value}` : item.key}\n              data-slot=\"pagination-item\"\n              className=\"inline-flex items-center\"\n            >\n              {item.type === \"ellipsis\" ? (\n                <span\n                  data-slot=\"pagination-ellipsis\"\n                  className={paginationEllipsisVariants({ size })}\n                  role=\"img\"\n                  aria-label={ellipsisLabel}\n                >\n                  …\n                </span>\n              ) : (\n                renderPageControl(item.value)\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {showPrevNext ? (\n          getPageHref && nextHref && canGoNext ? (\n            <a\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              href={nextHref}\n              className={navTriggerClass}\n            >\n              Next\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              disabled={!canGoNext}\n              className={navTriggerClass}\n              onClick={goNext}\n            >\n              Next\n            </button>\n          )\n        ) : null}\n      </div>\n    </nav>\n  );\n};\n\nPagination.displayName = \"Pagination\";\n"]}
+{"version":3,"sources":["../../src/ui/pagination/variants.ts","../../src/ui/pagination/pagination.tsx"],"names":["cva","zuiPaginationListBase","zuiPaginationListAppearances","zuiPaginationListSizes","zuiPaginationEllipsisBase","zuiPaginationEllipsisSizes","useId","usePagination","useCallback","cn","buttonVariants","jsx","clampPage","jsxs"],"mappings":"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","file":"pagination.js","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiPaginationEllipsisBase,\n  zuiPaginationEllipsisSizes,\n  zuiPaginationListAppearances,\n  zuiPaginationListBase,\n  zuiPaginationListSizes,\n} from \"../../design-system/pagination\";\n\nexport const paginationListVariants = cva(zuiPaginationListBase, {\n  variants: {\n    appearance: zuiPaginationListAppearances,\n    size: zuiPaginationListSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const paginationEllipsisVariants = cva(zuiPaginationEllipsisBase, {\n  variants: {\n    size: zuiPaginationEllipsisSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { useCallback, useId, type KeyboardEvent } from \"react\";\n\nimport { cn, clampPage } from \"../../lib/utils\";\nimport { buttonVariants } from \"../buttons/variants\";\n\nimport type { PaginationProps } from \"./types\";\nimport { usePagination } from \"../../hooks/usePagination\";\nimport { paginationEllipsisVariants, paginationListVariants } from \"./variants\";\n\nconst defaultPrevLabel = \"Previous page\";\nconst defaultNextLabel = \"Next page\";\nconst defaultEllipsisLabel = \"More pages\";\n\nexport const Pagination = ({\n  className,\n  appearance = \"default\",\n  size = \"md\",\n  pageCount,\n  page,\n  defaultPage = 1,\n  onPageChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  showPrevNext = true,\n  prevLabel = defaultPrevLabel,\n  nextLabel = defaultNextLabel,\n  ellipsisLabel = defaultEllipsisLabel,\n  getPageHref,\n  \"aria-label\": ariaLabel = \"Pagination\",\n  ref,\n  ...rest\n}: PaginationProps) => {\n  const id = useId();\n  const listId = `${id}-list`;\n\n  const { currentPage, items, setPage, goPrev, goNext, canGoPrev, canGoNext } =\n    usePagination({\n      pageCount,\n      page,\n      defaultPage,\n      siblingCount,\n      boundaryCount,\n      onPageChange,\n    });\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (pageCount <= 0) {\n        return;\n      }\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        event.preventDefault();\n        if (canGoNext) {\n          setPage(currentPage + 1);\n        }\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        event.preventDefault();\n        if (canGoPrev) {\n          setPage(currentPage - 1);\n        }\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        setPage(1);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        setPage(pageCount);\n      }\n    },\n    [canGoNext, canGoPrev, currentPage, pageCount, setPage],\n  );\n\n  if (pageCount <= 0) {\n    return null;\n  }\n\n  const inactiveTriggerClass = cn(\n    buttonVariants({ appearance: \"ghost\", size }),\n    \"bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10\",\n  );\n\n  const currentTriggerClass = buttonVariants({ appearance, size });\n\n  const triggerFocusRing =\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\";\n\n  const renderPageControl = (pageNumber: number) => {\n    const isCurrent = pageNumber === currentPage;\n    const href = getPageHref?.(pageNumber);\n    const shared = cn(\n      isCurrent ? currentTriggerClass : inactiveTriggerClass,\n      \"min-w-[2.25ch] shrink-0\",\n      triggerFocusRing,\n    );\n\n    if (href) {\n      return (\n        <a\n          data-slot=\"pagination-trigger\"\n          href={href}\n          aria-label={`Page ${pageNumber}`}\n          aria-current={isCurrent ? \"page\" : undefined}\n          className={shared}\n        >\n          {pageNumber}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"pagination-trigger\"\n        aria-label={`Page ${pageNumber}`}\n        aria-current={isCurrent ? \"page\" : undefined}\n        className={shared}\n        onClick={() => {\n          if (!isCurrent) {\n            setPage(pageNumber);\n          }\n        }}\n      >\n        {pageNumber}\n      </button>\n    );\n  };\n\n  const prevHref = getPageHref?.(clampPage(currentPage - 1, pageCount));\n  const nextHref = getPageHref?.(clampPage(currentPage + 1, pageCount));\n\n  const navTriggerClass = cn(\n    buttonVariants({ appearance: \"outline\", size }),\n    \"shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n  );\n\n  return (\n    <nav\n      ref={ref}\n      data-slot=\"pagination\"\n      aria-label={ariaLabel}\n      className={cn(\"w-full\", className)}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {showPrevNext ? (\n          getPageHref && prevHref && canGoPrev ? (\n            <a\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              href={prevHref}\n              className={navTriggerClass}\n            >\n              Prev\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              disabled={!canGoPrev}\n              className={navTriggerClass}\n              onClick={goPrev}\n            >\n              Prev\n            </button>\n          )\n        ) : null}\n\n        <ul\n          id={listId}\n          data-slot=\"pagination-list\"\n          className={paginationListVariants({ appearance, size })}\n        >\n          {items.map((item) => (\n            <li\n              key={item.type === \"page\" ? `page-${item.value}` : item.key}\n              data-slot=\"pagination-item\"\n              className=\"inline-flex items-center\"\n            >\n              {item.type === \"ellipsis\" ? (\n                <span\n                  data-slot=\"pagination-ellipsis\"\n                  className={paginationEllipsisVariants({ size })}\n                  role=\"img\"\n                  aria-label={ellipsisLabel}\n                >\n                  …\n                </span>\n              ) : (\n                renderPageControl(item.value)\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {showPrevNext ? (\n          getPageHref && nextHref && canGoNext ? (\n            <a\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              href={nextHref}\n              className={navTriggerClass}\n            >\n              Next\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              disabled={!canGoNext}\n              className={navTriggerClass}\n              onClick={goNext}\n            >\n              Next\n            </button>\n          )\n        ) : null}\n      </div>\n    </nav>\n  );\n};\n\nPagination.displayName = \"Pagination\";\n"]}

package/dist/ui/pagination.mjs

@@ -1,33 +1,35 @@
 "use client";
 import { usePagination } from '../chunk-YNBJAFI2.mjs';
 export { usePagination } from '../chunk-YNBJAFI2.mjs';
-import { buttonVariants } from '../chunk-PAG5CTLN.mjs';
-import { zuiPaginationListBase, zuiPaginationListSizes, zuiPaginationListAppearances, zuiPaginationEllipsisBase, zuiPaginationEllipsisSizes } from '../chunk-BL6UVCV7.mjs';
+import { buttonVariants } from '../chunk-WWKAJHIV.mjs';
+import { zuiPaginationListBase, zuiPaginationListSizes, zuiPaginationListAppearances, zuiPaginationEllipsisBase, zuiPaginationEllipsisSizes } from '../chunk-A4IB3C23.mjs';
 import '../chunk-2NQKFH26.mjs';
+import '../chunk-ZBAKTM2R.mjs';
 import '../chunk-4ZBMDWWY.mjs';
 import '../chunk-YH6MOKHR.mjs';
 import '../chunk-T4ZLTKV2.mjs';
 import '../chunk-PUSCPBT2.mjs';
+import '../chunk-3VW4HMJT.mjs';
 import '../chunk-LRYKMXKI.mjs';
 import '../chunk-XFJIX2YP.mjs';
 import '../chunk-4WG3VNVL.mjs';
 import '../chunk-YPTHTFVF.mjs';
 import '../chunk-XY3TKIIH.mjs';
 import '../chunk-FX5KR2GP.mjs';
-import '../chunk-ZBAKTM2R.mjs';
+import '../chunk-EJ3UMMCS.mjs';
 import '../chunk-EE53BIXR.mjs';
 import '../chunk-YXU2MJMT.mjs';
 import '../chunk-3IE4IELX.mjs';
 import '../chunk-BUEI4RMR.mjs';
 import '../chunk-5AOVTY2X.mjs';
 import '../chunk-523VQLCW.mjs';
-import '../chunk-3VW4HMJT.mjs';
+import '../chunk-SS3T3BUL.mjs';
 import '../chunk-SCWQSQBJ.mjs';
 import '../chunk-ZPGYR2UP.mjs';
 import '../chunk-MBEQ4GQ7.mjs';
 import '../chunk-34LHS26H.mjs';
 import '../chunk-JEDMUBYI.mjs';
-import '../chunk-EJ3UMMCS.mjs';
+import '../chunk-YKTANA3H.mjs';
 import '../chunk-ENYZGL4R.mjs';
 import '../chunk-2VPXQ2LA.mjs';
 import '../chunk-GUB3RSPR.mjs';
@@ -35,14 +37,13 @@ import '../chunk-6ERBVFDA.mjs';
 import '../chunk-DOA4ESKS.mjs';
 import '../chunk-QX6PPTWL.mjs';
 import '../chunk-U64ISRUX.mjs';
-import '../chunk-SS3T3BUL.mjs';
 import '../chunk-TKAOHMVA.mjs';
 import '../chunk-HFQJRAG7.mjs';
 import '../chunk-NIVJFG5Z.mjs';
+import '../chunk-COCPCZMR.mjs';
 import '../chunk-ZJWOSRAS.mjs';
 import '../chunk-JOLSS7UY.mjs';
 import '../chunk-NGZTAVQO.mjs';
-import '../chunk-YKTANA3H.mjs';
 import { cn, clampPage } from '../chunk-4D54YOL6.mjs';
 import '../chunk-J5LGTIGS.mjs';
 import { useId, useCallback } from 'react';

package/dist/ui/pagination.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/ui/pagination/variants.ts","../../src/ui/pagination/pagination.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAUO,IAAM,sBAAA,GAAyB,IAAI,qBAAA,EAAuB;AAAA,EAC/D,QAAA,EAAU;AAAA,IACR,UAAA,EAAY,4BAAA;AAAA,IACZ,IAAA,EAAM;AAAA,GACR;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,UAAA,EAAY,SAAA;AAAA,IACZ,IAAA,EAAM;AAAA;AAEV,CAAC;AAEM,IAAM,0BAAA,GAA6B,IAAI,yBAAA,EAA2B;AAAA,EACvE,QAAA,EAAU;AAAA,IACR,IAAA,EAAM;AAAA,GACR;AAAA,EACA,eAAA,EAAiB,EAAE,IAAA,EAAM,IAAA;AAC3B,CAAC;ACfD,IAAM,gBAAA,GAAmB,eAAA;AACzB,IAAM,gBAAA,GAAmB,WAAA;AACzB,IAAM,oBAAA,GAAuB,YAAA;AAEtB,IAAM,aAAa,CAAC;AAAA,EACzB,SAAA;AAAA,EACA,UAAA,GAAa,SAAA;AAAA,EACb,IAAA,GAAO,IAAA;AAAA,EACP,SAAA;AAAA,EACA,IAAA;AAAA,EACA,WAAA,GAAc,CAAA;AAAA,EACd,YAAA;AAAA,EACA,YAAA,GAAe,CAAA;AAAA,EACf,aAAA,GAAgB,CAAA;AAAA,EAChB,YAAA,GAAe,IAAA;AAAA,EACf,SAAA,GAAY,gBAAA;AAAA,EACZ,SAAA,GAAY,gBAAA;AAAA,EACZ,aAAA,GAAgB,oBAAA;AAAA,EAChB,WAAA;AAAA,EACA,cAAc,SAAA,GAAY,YAAA;AAAA,EAC1B,GAAA;AAAA,EACA,GAAG;AACL,CAAA,KAAuB;AACrB,EAAA,MAAM,KAAK,KAAA,EAAM;AACjB,EAAA,MAAM,MAAA,GAAS,GAAG,EAAE,CAAA,KAAA,CAAA;AAEpB,EAAA,MAAM,EAAE,aAAa,KAAA,EAAO,OAAA,EAAS,QAAQ,MAAA,EAAQ,SAAA,EAAW,SAAA,EAAU,GACxE,aAAA,CAAc;AAAA,IACZ,SAAA;AAAA,IACA,IAAA;AAAA,IACA,WAAA;AAAA,IACA,YAAA;AAAA,IACA,aAAA;AAAA,IACA;AAAA,GACD,CAAA;AAEH,EAAA,MAAM,aAAA,GAAgB,WAAA;AAAA,IACpB,CAAC,KAAA,KAAsC;AACrC,MAAA,IAAI,aAAa,CAAA,EAAG;AAClB,QAAA;AAAA,MACF;AACA,MAAA,IAAI,KAAA,CAAM,GAAA,KAAQ,YAAA,IAAgB,KAAA,CAAM,QAAQ,WAAA,EAAa;AAC3D,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,IAAI,SAAA,EAAW;AACb,UAAA,OAAA,CAAQ,cAAc,CAAC,CAAA;AAAA,QACzB;AAAA,MACF,WAAW,KAAA,CAAM,GAAA,KAAQ,WAAA,IAAe,KAAA,CAAM,QAAQ,SAAA,EAAW;AAC/D,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,IAAI,SAAA,EAAW;AACb,UAAA,OAAA,CAAQ,cAAc,CAAC,CAAA;AAAA,QACzB;AAAA,MACF,CAAA,MAAA,IAAW,KAAA,CAAM,GAAA,KAAQ,MAAA,EAAQ;AAC/B,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,OAAA,CAAQ,CAAC,CAAA;AAAA,MACX,CAAA,MAAA,IAAW,KAAA,CAAM,GAAA,KAAQ,KAAA,EAAO;AAC9B,QAAA,KAAA,CAAM,cAAA,EAAe;AACrB,QAAA,OAAA,CAAQ,SAAS,CAAA;AAAA,MACnB;AAAA,IACF,CAAA;AAAA,IACA,CAAC,SAAA,EAAW,SAAA,EAAW,WAAA,EAAa,WAAW,OAAO;AAAA,GACxD;AAEA,EAAA,IAAI,aAAa,CAAA,EAAG;AAClB,IAAA,OAAO,IAAA;AAAA,EACT;AAEA,EAAA,MAAM,oBAAA,GAAuB,EAAA;AAAA,IAC3B,cAAA,CAAe,EAAE,UAAA,EAAY,OAAA,EAAS,MAAM,CAAA;AAAA,IAC5C;AAAA,GACF;AAEA,EAAA,MAAM,mBAAA,GAAsB,cAAA,CAAe,EAAE,UAAA,EAAY,MAAM,CAAA;AAE/D,EAAA,MAAM,gBAAA,GACJ,8IAAA;AAEF,EAAA,MAAM,iBAAA,GAAoB,CAAC,UAAA,KAAuB;AAChD,IAAA,MAAM,YAAY,UAAA,KAAe,WAAA;AACjC,IAAA,MAAM,IAAA,GAAO,cAAc,UAAU,CAAA;AACrC,IAAA,MAAM,MAAA,GAAS,EAAA;AAAA,MACb,YAAY,mBAAA,GAAsB,oBAAA;AAAA,MAClC,yBAAA;AAAA,MACA;AAAA,KACF;AAEA,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,uBACE,GAAA;AAAA,QAAC,GAAA;AAAA,QAAA;AAAA,UACC,WAAA,EAAU,oBAAA;AAAA,UACV,IAAA;AAAA,UACA,YAAA,EAAY,QAAQ,UAAU,CAAA,CAAA;AAAA,UAC9B,cAAA,EAAc,YAAY,MAAA,GAAS,MAAA;AAAA,UACnC,SAAA,EAAW,MAAA;AAAA,UAEV,QAAA,EAAA;AAAA;AAAA,OACH;AAAA,IAEJ;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,IAAA,EAAK,QAAA;AAAA,QACL,WAAA,EAAU,oBAAA;AAAA,QACV,YAAA,EAAY,QAAQ,UAAU,CAAA,CAAA;AAAA,QAC9B,cAAA,EAAc,YAAY,MAAA,GAAS,MAAA;AAAA,QACnC,SAAA,EAAW,MAAA;AAAA,QACX,SAAS,MAAM;AACb,UAAA,IAAI,CAAC,SAAA,EAAW;AACd,YAAA,OAAA,CAAQ,UAAU,CAAA;AAAA,UACpB;AAAA,QACF,CAAA;AAAA,QAEC,QAAA,EAAA;AAAA;AAAA,KACH;AAAA,EAEJ,CAAA;AAEA,EAAA,MAAM,WAAW,WAAA,GAAc,SAAA,CAAU,WAAA,GAAc,CAAA,EAAG,SAAS,CAAC,CAAA;AACpE,EAAA,MAAM,WAAW,WAAA,GAAc,SAAA,CAAU,WAAA,GAAc,CAAA,EAAG,SAAS,CAAC,CAAA;AAEpE,EAAA,MAAM,eAAA,GAAkB,EAAA;AAAA,IACtB,cAAA,CAAe,EAAE,UAAA,EAAY,SAAA,EAAW,MAAM,CAAA;AAAA,IAC9C;AAAA,GACF;AAEA,EAAA,uBACE,GAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,GAAA;AAAA,MACA,WAAA,EAAU,YAAA;AAAA,MACV,YAAA,EAAY,SAAA;AAAA,MACZ,SAAA,EAAW,EAAA,CAAG,QAAA,EAAU,SAAS,CAAA;AAAA,MACjC,SAAA,EAAW,aAAA;AAAA,MACV,GAAG,IAAA;AAAA,MAEJ,QAAA,kBAAA,IAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,mCAAA,EACZ,QAAA,EAAA;AAAA,QAAA,YAAA,GACC,WAAA,IAAe,YAAY,SAAA,mBACzB,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAU,iBAAA;AAAA,YACV,YAAA,EAAY,SAAA;AAAA,YACZ,IAAA,EAAM,QAAA;AAAA,YACN,SAAA,EAAW,eAAA;AAAA,YACZ,QAAA,EAAA;AAAA;AAAA,SAED,mBAEA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,WAAA,EAAU,iBAAA;AAAA,YACV,YAAA,EAAY,SAAA;AAAA,YACZ,UAAU,CAAC,SAAA;AAAA,YACX,SAAA,EAAW,eAAA;AAAA,YACX,OAAA,EAAS,MAAA;AAAA,YACV,QAAA,EAAA;AAAA;AAAA,SAED,GAEA,IAAA;AAAA,wBAEJ,GAAA;AAAA,UAAC,IAAA;AAAA,UAAA;AAAA,YACC,EAAA,EAAI,MAAA;AAAA,YACJ,WAAA,EAAU,iBAAA;AAAA,YACV,SAAA,EAAW,sBAAA,CAAuB,EAAE,UAAA,EAAY,MAAM,CAAA;AAAA,YAErD,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,qBACV,GAAA;AAAA,cAAC,IAAA;AAAA,cAAA;AAAA,gBAEC,WAAA,EAAU,iBAAA;AAAA,gBACV,SAAA,EAAU,0BAAA;AAAA,gBAET,QAAA,EAAA,IAAA,CAAK,SAAS,UAAA,mBACb,GAAA;AAAA,kBAAC,MAAA;AAAA,kBAAA;AAAA,oBACC,WAAA,EAAU,qBAAA;AAAA,oBACV,SAAA,EAAW,0BAAA,CAA2B,EAAE,IAAA,EAAM,CAAA;AAAA,oBAC9C,IAAA,EAAK,KAAA;AAAA,oBACL,YAAA,EAAY,aAAA;AAAA,oBACb,QAAA,EAAA;AAAA;AAAA,iBAED,GAEA,iBAAA,CAAkB,IAAA,CAAK,KAAK;AAAA,eAAA;AAAA,cAdzB,KAAK,IAAA,KAAS,MAAA,GAAS,QAAQ,IAAA,CAAK,KAAK,KAAK,IAAA,CAAK;AAAA,aAiB3D;AAAA;AAAA,SACH;AAAA,QAEC,YAAA,GACC,WAAA,IAAe,QAAA,IAAY,SAAA,mBACzB,GAAA;AAAA,UAAC,GAAA;AAAA,UAAA;AAAA,YACC,WAAA,EAAU,iBAAA;AAAA,YACV,YAAA,EAAY,SAAA;AAAA,YACZ,IAAA,EAAM,QAAA;AAAA,YACN,SAAA,EAAW,eAAA;AAAA,YACZ,QAAA,EAAA;AAAA;AAAA,SAED,mBAEA,GAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YACC,IAAA,EAAK,QAAA;AAAA,YACL,WAAA,EAAU,iBAAA;AAAA,YACV,YAAA,EAAY,SAAA;AAAA,YACZ,UAAU,CAAC,SAAA;AAAA,YACX,SAAA,EAAW,eAAA;AAAA,YACX,OAAA,EAAS,MAAA;AAAA,YACV,QAAA,EAAA;AAAA;AAAA,SAED,GAEA;AAAA,OAAA,EACN;AAAA;AAAA,GACF;AAEJ;AAEA,UAAA,CAAW,WAAA,GAAc,YAAA","file":"pagination.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiPaginationEllipsisBase,\n  zuiPaginationEllipsisSizes,\n  zuiPaginationListAppearances,\n  zuiPaginationListBase,\n  zuiPaginationListSizes,\n} from \"../../design-system/pagination\";\n\nexport const paginationListVariants = cva(zuiPaginationListBase, {\n  variants: {\n    appearance: zuiPaginationListAppearances,\n    size: zuiPaginationListSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const paginationEllipsisVariants = cva(zuiPaginationEllipsisBase, {\n  variants: {\n    size: zuiPaginationEllipsisSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { useCallback, useId, type KeyboardEvent } from \"react\";\n\nimport { cn, clampPage } from \"../../lib/utils\";\nimport { buttonVariants } from \"../buttons/variants\";\n\nimport type { PaginationProps } from \"./types\";\nimport { usePagination } from \"../../hooks/usePagination\";\nimport { paginationEllipsisVariants, paginationListVariants } from \"./variants\";\n\nconst defaultPrevLabel = \"Previous page\";\nconst defaultNextLabel = \"Next page\";\nconst defaultEllipsisLabel = \"More pages\";\n\nexport const Pagination = ({\n  className,\n  appearance = \"default\",\n  size = \"md\",\n  pageCount,\n  page,\n  defaultPage = 1,\n  onPageChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  showPrevNext = true,\n  prevLabel = defaultPrevLabel,\n  nextLabel = defaultNextLabel,\n  ellipsisLabel = defaultEllipsisLabel,\n  getPageHref,\n  \"aria-label\": ariaLabel = \"Pagination\",\n  ref,\n  ...rest\n}: PaginationProps) => {\n  const id = useId();\n  const listId = `${id}-list`;\n\n  const { currentPage, items, setPage, goPrev, goNext, canGoPrev, canGoNext } =\n    usePagination({\n      pageCount,\n      page,\n      defaultPage,\n      siblingCount,\n      boundaryCount,\n      onPageChange,\n    });\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (pageCount <= 0) {\n        return;\n      }\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        event.preventDefault();\n        if (canGoNext) {\n          setPage(currentPage + 1);\n        }\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        event.preventDefault();\n        if (canGoPrev) {\n          setPage(currentPage - 1);\n        }\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        setPage(1);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        setPage(pageCount);\n      }\n    },\n    [canGoNext, canGoPrev, currentPage, pageCount, setPage],\n  );\n\n  if (pageCount <= 0) {\n    return null;\n  }\n\n  const inactiveTriggerClass = cn(\n    buttonVariants({ appearance: \"ghost\", size }),\n    \"bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10\",\n  );\n\n  const currentTriggerClass = buttonVariants({ appearance, size });\n\n  const triggerFocusRing =\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\";\n\n  const renderPageControl = (pageNumber: number) => {\n    const isCurrent = pageNumber === currentPage;\n    const href = getPageHref?.(pageNumber);\n    const shared = cn(\n      isCurrent ? currentTriggerClass : inactiveTriggerClass,\n      \"min-w-[2.25ch] shrink-0\",\n      triggerFocusRing,\n    );\n\n    if (href) {\n      return (\n        <a\n          data-slot=\"pagination-trigger\"\n          href={href}\n          aria-label={`Page ${pageNumber}`}\n          aria-current={isCurrent ? \"page\" : undefined}\n          className={shared}\n        >\n          {pageNumber}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"pagination-trigger\"\n        aria-label={`Page ${pageNumber}`}\n        aria-current={isCurrent ? \"page\" : undefined}\n        className={shared}\n        onClick={() => {\n          if (!isCurrent) {\n            setPage(pageNumber);\n          }\n        }}\n      >\n        {pageNumber}\n      </button>\n    );\n  };\n\n  const prevHref = getPageHref?.(clampPage(currentPage - 1, pageCount));\n  const nextHref = getPageHref?.(clampPage(currentPage + 1, pageCount));\n\n  const navTriggerClass = cn(\n    buttonVariants({ appearance: \"outline\", size }),\n    \"shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n  );\n\n  return (\n    <nav\n      ref={ref}\n      data-slot=\"pagination\"\n      aria-label={ariaLabel}\n      className={cn(\"w-full\", className)}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {showPrevNext ? (\n          getPageHref && prevHref && canGoPrev ? (\n            <a\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              href={prevHref}\n              className={navTriggerClass}\n            >\n              Prev\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              disabled={!canGoPrev}\n              className={navTriggerClass}\n              onClick={goPrev}\n            >\n              Prev\n            </button>\n          )\n        ) : null}\n\n        <ul\n          id={listId}\n          data-slot=\"pagination-list\"\n          className={paginationListVariants({ appearance, size })}\n        >\n          {items.map((item) => (\n            <li\n              key={item.type === \"page\" ? `page-${item.value}` : item.key}\n              data-slot=\"pagination-item\"\n              className=\"inline-flex items-center\"\n            >\n              {item.type === \"ellipsis\" ? (\n                <span\n                  data-slot=\"pagination-ellipsis\"\n                  className={paginationEllipsisVariants({ size })}\n                  role=\"img\"\n                  aria-label={ellipsisLabel}\n                >\n                  …\n                </span>\n              ) : (\n                renderPageControl(item.value)\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {showPrevNext ? (\n          getPageHref && nextHref && canGoNext ? (\n            <a\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              href={nextHref}\n              className={navTriggerClass}\n            >\n              Next\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              disabled={!canGoNext}\n              className={navTriggerClass}\n              onClick={goNext}\n            >\n              Next\n            </button>\n          )\n        ) : null}\n      </div>\n    </nav>\n  );\n};\n\nPagination.displayName = \"Pagination\";\n"]}
+{"version":3,"sources":["../../src/ui/pagination/variants.ts","../../src/ui/pagination/pagination.tsx"],"names":[],"mappings":"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","file":"pagination.mjs","sourcesContent":["import { cva } from \"class-variance-authority\";\n\nimport {\n  zuiPaginationEllipsisBase,\n  zuiPaginationEllipsisSizes,\n  zuiPaginationListAppearances,\n  zuiPaginationListBase,\n  zuiPaginationListSizes,\n} from \"../../design-system/pagination\";\n\nexport const paginationListVariants = cva(zuiPaginationListBase, {\n  variants: {\n    appearance: zuiPaginationListAppearances,\n    size: zuiPaginationListSizes,\n  },\n  defaultVariants: {\n    appearance: \"default\",\n    size: \"md\",\n  },\n});\n\nexport const paginationEllipsisVariants = cva(zuiPaginationEllipsisBase, {\n  variants: {\n    size: zuiPaginationEllipsisSizes,\n  },\n  defaultVariants: { size: \"md\" },\n});\n","\"use client\";\n\nimport { useCallback, useId, type KeyboardEvent } from \"react\";\n\nimport { cn, clampPage } from \"../../lib/utils\";\nimport { buttonVariants } from \"../buttons/variants\";\n\nimport type { PaginationProps } from \"./types\";\nimport { usePagination } from \"../../hooks/usePagination\";\nimport { paginationEllipsisVariants, paginationListVariants } from \"./variants\";\n\nconst defaultPrevLabel = \"Previous page\";\nconst defaultNextLabel = \"Next page\";\nconst defaultEllipsisLabel = \"More pages\";\n\nexport const Pagination = ({\n  className,\n  appearance = \"default\",\n  size = \"md\",\n  pageCount,\n  page,\n  defaultPage = 1,\n  onPageChange,\n  siblingCount = 1,\n  boundaryCount = 1,\n  showPrevNext = true,\n  prevLabel = defaultPrevLabel,\n  nextLabel = defaultNextLabel,\n  ellipsisLabel = defaultEllipsisLabel,\n  getPageHref,\n  \"aria-label\": ariaLabel = \"Pagination\",\n  ref,\n  ...rest\n}: PaginationProps) => {\n  const id = useId();\n  const listId = `${id}-list`;\n\n  const { currentPage, items, setPage, goPrev, goNext, canGoPrev, canGoNext } =\n    usePagination({\n      pageCount,\n      page,\n      defaultPage,\n      siblingCount,\n      boundaryCount,\n      onPageChange,\n    });\n\n  const handleKeyDown = useCallback(\n    (event: KeyboardEvent<HTMLElement>) => {\n      if (pageCount <= 0) {\n        return;\n      }\n      if (event.key === \"ArrowRight\" || event.key === \"ArrowDown\") {\n        event.preventDefault();\n        if (canGoNext) {\n          setPage(currentPage + 1);\n        }\n      } else if (event.key === \"ArrowLeft\" || event.key === \"ArrowUp\") {\n        event.preventDefault();\n        if (canGoPrev) {\n          setPage(currentPage - 1);\n        }\n      } else if (event.key === \"Home\") {\n        event.preventDefault();\n        setPage(1);\n      } else if (event.key === \"End\") {\n        event.preventDefault();\n        setPage(pageCount);\n      }\n    },\n    [canGoNext, canGoPrev, currentPage, pageCount, setPage],\n  );\n\n  if (pageCount <= 0) {\n    return null;\n  }\n\n  const inactiveTriggerClass = cn(\n    buttonVariants({ appearance: \"ghost\", size }),\n    \"bg-white/[0.04] text-slate-900 dark:text-slate-200 hover:bg-white/10\",\n  );\n\n  const currentTriggerClass = buttonVariants({ appearance, size });\n\n  const triggerFocusRing =\n    \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\";\n\n  const renderPageControl = (pageNumber: number) => {\n    const isCurrent = pageNumber === currentPage;\n    const href = getPageHref?.(pageNumber);\n    const shared = cn(\n      isCurrent ? currentTriggerClass : inactiveTriggerClass,\n      \"min-w-[2.25ch] shrink-0\",\n      triggerFocusRing,\n    );\n\n    if (href) {\n      return (\n        <a\n          data-slot=\"pagination-trigger\"\n          href={href}\n          aria-label={`Page ${pageNumber}`}\n          aria-current={isCurrent ? \"page\" : undefined}\n          className={shared}\n        >\n          {pageNumber}\n        </a>\n      );\n    }\n\n    return (\n      <button\n        type=\"button\"\n        data-slot=\"pagination-trigger\"\n        aria-label={`Page ${pageNumber}`}\n        aria-current={isCurrent ? \"page\" : undefined}\n        className={shared}\n        onClick={() => {\n          if (!isCurrent) {\n            setPage(pageNumber);\n          }\n        }}\n      >\n        {pageNumber}\n      </button>\n    );\n  };\n\n  const prevHref = getPageHref?.(clampPage(currentPage - 1, pageCount));\n  const nextHref = getPageHref?.(clampPage(currentPage + 1, pageCount));\n\n  const navTriggerClass = cn(\n    buttonVariants({ appearance: \"outline\", size }),\n    \"shrink-0 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950\",\n  );\n\n  return (\n    <nav\n      ref={ref}\n      data-slot=\"pagination\"\n      aria-label={ariaLabel}\n      className={cn(\"w-full\", className)}\n      onKeyDown={handleKeyDown}\n      {...rest}\n    >\n      <div className=\"flex flex-wrap items-center gap-2\">\n        {showPrevNext ? (\n          getPageHref && prevHref && canGoPrev ? (\n            <a\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              href={prevHref}\n              className={navTriggerClass}\n            >\n              Prev\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-prev\"\n              aria-label={prevLabel}\n              disabled={!canGoPrev}\n              className={navTriggerClass}\n              onClick={goPrev}\n            >\n              Prev\n            </button>\n          )\n        ) : null}\n\n        <ul\n          id={listId}\n          data-slot=\"pagination-list\"\n          className={paginationListVariants({ appearance, size })}\n        >\n          {items.map((item) => (\n            <li\n              key={item.type === \"page\" ? `page-${item.value}` : item.key}\n              data-slot=\"pagination-item\"\n              className=\"inline-flex items-center\"\n            >\n              {item.type === \"ellipsis\" ? (\n                <span\n                  data-slot=\"pagination-ellipsis\"\n                  className={paginationEllipsisVariants({ size })}\n                  role=\"img\"\n                  aria-label={ellipsisLabel}\n                >\n                  …\n                </span>\n              ) : (\n                renderPageControl(item.value)\n              )}\n            </li>\n          ))}\n        </ul>\n\n        {showPrevNext ? (\n          getPageHref && nextHref && canGoNext ? (\n            <a\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              href={nextHref}\n              className={navTriggerClass}\n            >\n              Next\n            </a>\n          ) : (\n            <button\n              type=\"button\"\n              data-slot=\"pagination-next\"\n              aria-label={nextLabel}\n              disabled={!canGoNext}\n              className={navTriggerClass}\n              onClick={goNext}\n            >\n              Next\n            </button>\n          )\n        ) : null}\n      </div>\n    </nav>\n  );\n};\n\nPagination.displayName = \"Pagination\";\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zentauri-ui/zentauri-components",
-  "version": "2.1.5",
+  "version": "2.1.6",
   "description": "React + Tailwind UI kit with charts, ESM/CJS builds, per-entry exports, and a zentauri-components / zentauri-ui CLI to vendor UI or hook source into your app",
   "keywords": [
     "react",

package/src/design-system/audio-player.ts

@@ -0,0 +1,109 @@
+export const zuiAudioPlayerBase = [
+  "w-full",
+  "rounded-[var(--zui-audio-player-radius,var(--zui-radius,0.75rem))]",
+  "bg-[var(--zui-audio-player-bg,var(--zui-surface,#ffffff))] dark:bg-[var(--zui-audio-player-bg-dark,var(--zui-surface-dark,#0f172a))]",
+  "border border-[var(--zui-audio-player-border,var(--zui-border,#e2e8f0))] dark:border-[var(--zui-audio-player-border-dark,var(--zui-border-dark,#1e293b))]",
+  "shadow-[var(--zui-audio-player-shadow,var(--zui-shadow,0_1px_2px_#0f172a14))] dark:shadow-[var(--zui-audio-player-shadow-dark,var(--zui-shadow-dark,0_1px_2px_#0f172a1f))]",
+  "text-[color:var(--zui-audio-player-fg,var(--zui-fg,#0f172a))] dark:text-[color:var(--zui-audio-player-fg-dark,var(--zui-fg-dark,#f8fafc))]",
+] as const;
+
+export const zuiAudioPlayerAppearances = {
+  default:
+    "[--audio-fill:var(--zui-audio-player-default-fill,var(--zui-brand,#0f172a))] dark:[--audio-fill:var(--zui-audio-player-default-fill-dark,var(--zui-brand-dark,#f8fafc))]",
+  secondary:
+    "[--audio-fill:var(--zui-audio-player-secondary-fill,var(--zui-fg,#475569))] dark:[--audio-fill:var(--zui-audio-player-secondary-fill-dark,var(--zui-fg-dark,#94a3b8))]",
+  destructive:
+    "[--audio-fill:var(--zui-audio-player-destructive-fill,var(--zui-status-error,#dc2626))] dark:[--audio-fill:var(--zui-audio-player-destructive-fill-dark,var(--zui-status-error-dark,#ef4444))]",
+  blue: "[--audio-fill:var(--zui-audio-player-blue-fill,var(--zui-color-blue,#2563eb))] dark:[--audio-fill:var(--zui-audio-player-blue-fill-dark,var(--zui-color-blue-dark,#3b82f6))]",
+  cyan: "[--audio-fill:var(--zui-audio-player-cyan-fill,var(--zui-color-cyan,#0891b2))] dark:[--audio-fill:var(--zui-audio-player-cyan-fill-dark,var(--zui-color-cyan-dark,#22d3ee))]",
+  green:
+    "[--audio-fill:var(--zui-audio-player-green-fill,var(--zui-color-green,#16a34a))] dark:[--audio-fill:var(--zui-audio-player-green-fill-dark,var(--zui-color-green-dark,#22c55e))]",
+  lime: "[--audio-fill:var(--zui-audio-player-lime-fill,var(--zui-color-lime,#65a30d))] dark:[--audio-fill:var(--zui-audio-player-lime-fill-dark,var(--zui-color-lime-dark,#a3e635))]",
+  mint: "[--audio-fill:var(--zui-audio-player-mint-fill,var(--zui-color-mint,#10b981))] dark:[--audio-fill:var(--zui-audio-player-mint-fill-dark,var(--zui-color-mint-dark,#6ee7b7))]",
+  ocean:
+    "[--audio-fill:var(--zui-audio-player-ocean-fill,var(--zui-color-ocean,#0284c7))] dark:[--audio-fill:var(--zui-audio-player-ocean-fill-dark,var(--zui-color-ocean-dark,#38bdf8))]",
+  sapphire:
+    "[--audio-fill:var(--zui-audio-player-sapphire-fill,var(--zui-color-sapphire,#1d4ed8))] dark:[--audio-fill:var(--zui-audio-player-sapphire-fill-dark,var(--zui-color-sapphire-dark,#60a5fa))]",
+  lavender:
+    "[--audio-fill:var(--zui-audio-player-lavender-fill,var(--zui-color-lavender,#8b5cf6))] dark:[--audio-fill:var(--zui-audio-player-lavender-fill-dark,var(--zui-color-lavender-dark,#a78bfa))]",
+  ruby: "[--audio-fill:var(--zui-audio-player-ruby-fill,var(--zui-color-ruby,#be123c))] dark:[--audio-fill:var(--zui-audio-player-ruby-fill-dark,var(--zui-color-ruby-dark,#fb7185))]",
+  red: "[--audio-fill:var(--zui-audio-player-red-fill,var(--zui-color-red,#dc2626))] dark:[--audio-fill:var(--zui-audio-player-red-fill-dark,var(--zui-color-red-dark,#ef4444))]",
+  slate:
+    "[--audio-fill:var(--zui-audio-player-slate-fill,var(--zui-color-slate,#475569))] dark:[--audio-fill:var(--zui-audio-player-slate-fill-dark,var(--zui-color-slate-dark,#64748b))]",
+  zinc: "[--audio-fill:var(--zui-audio-player-zinc-fill,var(--zui-color-zinc,#52525b))] dark:[--audio-fill:var(--zui-audio-player-zinc-fill-dark,var(--zui-color-zinc-dark,#71717a))]",
+  royal:
+    "[--audio-fill:var(--zui-audio-player-royal-fill,var(--zui-color-royal,#4338ca))] dark:[--audio-fill:var(--zui-audio-player-royal-fill-dark,var(--zui-color-royal-dark,#818cf8))]",
+  electric:
+    "[--audio-fill:var(--zui-audio-player-electric-fill,var(--zui-color-electric,#0ea5e9))] dark:[--audio-fill:var(--zui-audio-player-electric-fill-dark,var(--zui-color-electric-dark,#38bdf8))]",
+  forest:
+    "[--audio-fill:var(--zui-audio-player-forest-fill,var(--zui-color-forest,#166534))] dark:[--audio-fill:var(--zui-audio-player-forest-fill-dark,var(--zui-color-forest-dark,#4ade80))]",
+  sunset:
+    "[--audio-fill:var(--zui-audio-player-sunset-fill,var(--zui-color-sunset,#ea580c))] dark:[--audio-fill:var(--zui-audio-player-sunset-fill-dark,var(--zui-color-sunset-dark,#fb923c))]",
+  magenta:
+    "[--audio-fill:var(--zui-audio-player-magenta-fill,var(--zui-color-magenta,#c026d3))] dark:[--audio-fill:var(--zui-audio-player-magenta-fill-dark,var(--zui-color-magenta-dark,#e879f9))]",
+  crimson:
+    "[--audio-fill:var(--zui-audio-player-crimson-fill,var(--zui-color-crimson,#b91c1c))] dark:[--audio-fill:var(--zui-audio-player-crimson-fill-dark,var(--zui-color-crimson-dark,#f87171))]",
+  emerald:
+    "[--audio-fill:var(--zui-audio-player-emerald-fill,var(--zui-color-emerald,#059669))] dark:[--audio-fill:var(--zui-audio-player-emerald-fill-dark,var(--zui-color-emerald-dark,#34d399))]",
+  indigo:
+    "[--audio-fill:var(--zui-audio-player-indigo-fill,var(--zui-color-indigo,#4f46e5))] dark:[--audio-fill:var(--zui-audio-player-indigo-fill-dark,var(--zui-color-indigo-dark,#6366f1))]",
+  purple:
+    "[--audio-fill:var(--zui-audio-player-purple-fill,var(--zui-color-purple,#7c3aed))] dark:[--audio-fill:var(--zui-audio-player-purple-fill-dark,var(--zui-color-purple-dark,#8b5cf6))]",
+  pink: "[--audio-fill:var(--zui-audio-player-pink-fill,var(--zui-color-pink,#db2777))] dark:[--audio-fill:var(--zui-audio-player-pink-fill-dark,var(--zui-color-pink-dark,#ec4899))]",
+  rose: "[--audio-fill:var(--zui-audio-player-rose-fill,var(--zui-color-rose,#e11d48))] dark:[--audio-fill:var(--zui-audio-player-rose-fill-dark,var(--zui-color-rose-dark,#f43f5e))]",
+  sky: "[--audio-fill:var(--zui-audio-player-sky-fill,var(--zui-color-sky,#0284c7))] dark:[--audio-fill:var(--zui-audio-player-sky-fill-dark,var(--zui-color-sky-dark,#38bdf8))]",
+  teal: "[--audio-fill:var(--zui-audio-player-teal-fill,var(--zui-color-teal,#0d9488))] dark:[--audio-fill:var(--zui-audio-player-teal-fill-dark,var(--zui-color-teal-dark,#2dd4bf))]",
+  yellow:
+    "[--audio-fill:var(--zui-audio-player-yellow-fill,var(--zui-color-yellow,#ca8a04))] dark:[--audio-fill:var(--zui-audio-player-yellow-fill-dark,var(--zui-color-yellow-dark,#eab308))]",
+  orange:
+    "[--audio-fill:var(--zui-audio-player-orange-fill,var(--zui-color-orange,#ea580c))] dark:[--audio-fill:var(--zui-audio-player-orange-fill-dark,var(--zui-color-orange-dark,#f97316))]",
+  "gradient-blue":
+    "[--audio-fill:var(--zui-audio-player-gradient-blue-fill,linear-gradient(90deg,#2563eb,#7c3aed))] dark:[--audio-fill:var(--zui-audio-player-gradient-blue-fill-dark,linear-gradient(90deg,#3b82f6,#8b5cf6))]",
+  "gradient-green":
+    "[--audio-fill:var(--zui-audio-player-gradient-green-fill,linear-gradient(90deg,#16a34a,#0d9488))] dark:[--audio-fill:var(--zui-audio-player-gradient-green-fill-dark,linear-gradient(90deg,#22c55e,#2dd4bf))]",
+  "gradient-red":
+    "[--audio-fill:var(--zui-audio-player-gradient-red-fill,linear-gradient(90deg,#dc2626,#db2777))] dark:[--audio-fill:var(--zui-audio-player-gradient-red-fill-dark,linear-gradient(90deg,#ef4444,#ec4899))]",
+  "gradient-yellow":
+    "[--audio-fill:var(--zui-audio-player-gradient-yellow-fill,linear-gradient(90deg,#ca8a04,#ea580c))] dark:[--audio-fill:var(--zui-audio-player-gradient-yellow-fill-dark,linear-gradient(90deg,#eab308,#f97316))]",
+  "gradient-purple":
+    "[--audio-fill:var(--zui-audio-player-gradient-purple-fill,linear-gradient(90deg,#7c3aed,#db2777))] dark:[--audio-fill:var(--zui-audio-player-gradient-purple-fill-dark,linear-gradient(90deg,#8b5cf6,#ec4899))]",
+  "gradient-teal":
+    "[--audio-fill:var(--zui-audio-player-gradient-teal-fill,linear-gradient(90deg,#0d9488,#0284c7))] dark:[--audio-fill:var(--zui-audio-player-gradient-teal-fill-dark,linear-gradient(90deg,#2dd4bf,#38bdf8))]",
+  "gradient-indigo":
+    "[--audio-fill:var(--zui-audio-player-gradient-indigo-fill,linear-gradient(90deg,#4f46e5,#7c3aed))] dark:[--audio-fill:var(--zui-audio-player-gradient-indigo-fill-dark,linear-gradient(90deg,#6366f1,#8b5cf6))]",
+  "gradient-pink":
+    "[--audio-fill:var(--zui-audio-player-gradient-pink-fill,linear-gradient(90deg,#db2777,#e11d48))] dark:[--audio-fill:var(--zui-audio-player-gradient-pink-fill-dark,linear-gradient(90deg,#ec4899,#f43f5e))]",
+  "gradient-orange":
+    "[--audio-fill:var(--zui-audio-player-gradient-orange-fill,linear-gradient(90deg,#ea580c,#ca8a04))] dark:[--audio-fill:var(--zui-audio-player-gradient-orange-fill-dark,linear-gradient(90deg,#f97316,#eab308))]",
+} as const;
+
+export const zuiAudioPlayerSizes = {
+  sm: "p-3 text-xs gap-2",
+  md: "p-4 text-sm gap-3",
+  lg: "p-5 text-base gap-4",
+} as const;
+
+export const zuiAudioPlayerShapes = {
+  flat: "rounded-none",
+  rounded: "rounded-xl",
+  pill: "rounded-3xl",
+} as const;
+
+export const zuiAudioPlayerTrackBase = [
+  "relative w-full overflow-hidden cursor-pointer",
+  "rounded-[inherit]",
+  "bg-[var(--zui-audio-player-track-bg,var(--zui-surface-muted,#0000001a))] dark:bg-[var(--zui-audio-player-track-bg-dark,var(--zui-surface-muted-dark,#ffffff1a))]",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--audio-fill,#0f172a)] focus-visible:ring-offset-2",
+] as const;
+
+export const zuiAudioPlayerTrackSizes = {
+  sm: "h-1",
+  md: "h-1.5",
+  lg: "h-2",
+} as const;
+
+export const zuiAudioPlayerBarBase =
+  "h-full origin-left [background:var(--audio-fill)] transition-[transform] will-change-transform" as const;
+
+export const zuiAudioPlayerTimeBase =
+  "tabular-nums font-mono text-[color:var(--zui-audio-player-time-fg,var(--zui-fg-muted,#64748b))] dark:text-[color:var(--zui-audio-player-time-fg-dark,var(--zui-fg-muted-dark,#94a3b8))]" as const;

package/src/design-system/index.ts

@@ -1,4 +1,5 @@
 export * from "./accordion";
+export * from "./audio-player";
 export * from "./alert";
 export * from "./animated-number";
 export * from "./avatar";