@infinityfx/fluid/dist/components/navigation/pagination.js

React UI library, using zero-runtime CSS-in-JS.

"use client";
import{jsxs as a,jsx as r}from"react/jsx-runtime";import{useId as e,useState as i,useRef as t,Fragment as o}from"react";import{combineClasses as n,classes as l}from"../../core/utils.js";import{createStyles as s}from"../../core/style.js";import{Icon as d}from"../../core/icons.js";import c from"../feedback/halo.js";import{Morph as m}from"@infinityfx/lively/layout";import{Animatable as u}from"@infinityfx/lively";import{useTrigger as b}from"@infinityfx/lively/hooks";const f=s("pagination",{".pagination":{display:"flex",gap:"var(--f-spacing-xsm)"},".pill":{gap:"var(--f-spacing-xxs)"},".s__xsm":{fontSize:"var(--f-font-size-xxs)"},".s__sml":{fontSize:"var(--f-font-size-xsm)"},".s__med":{fontSize:"var(--f-font-size-sml)"},".s__lrg":{fontSize:"var(--f-font-size-med)"},".buttons":{display:"grid",gap:"inherit",gridAutoFlow:"column"},".buttons .layer":{width:"100%",height:"100%",borderRadius:"var(--f-radius-sml)",transition:"background-color .35s"},".pagination:not(.v__minimal) .layer":{backgroundColor:"var(--f-clr-fg-100)"},'.pagination[aria-disabled="true"] .layer':{backgroundColor:"var(--f-clr-grey-100)"},".button":{overflow:"hidden",position:"relative",border:"none",outline:"none",background:"none",color:"var(--f-clr-text-100)",width:"2.6em",height:"2.6em",display:"flex",alignItems:"center",justifyContent:"center",borderRadius:"var(--f-radius-sml)",fontWeight:500,transition:"background-color .35s, color .35s",WebkitTapHighlightColor:"transparent"},".buttons .button":{backgroundColor:"transparent !important"},".pagination:not(.v__minimal) .button:enabled":{backgroundColor:"var(--f-clr-fg-100)"},".button:enabled":{cursor:"pointer"},".button:disabled":{backgroundColor:"var(--f-clr-grey-100)",color:"var(--f-clr-grey-500)"},'.button[aria-current="page"]':{color:"var(--f-clr-text-200)"},".pagination .layer.selection":{backgroundColor:"var(--color, var(--f-clr-primary-100))",boxShadow:"var(--f-shadow-sml)"},".v__neutral .layer.selection":{backgroundColor:"var(--f-clr-text-100)"},'.pagination[aria-disabled="true"] .layer.selection':{backgroundColor:"var(--f-clr-grey-200)"},".round .button":{borderRadius:"99px"},".round .layer":{borderRadius:"99px"},".pill > .button:first-child":{borderTopLeftRadius:"1.3em",borderBottomLeftRadius:"1.3em"},".pill > .button:last-child":{borderTopRightRadius:"1.3em",borderBottomRightRadius:"1.3em"},".indices":{width:"7.8em",height:"2.6em",display:"flex"},".indices > *":{width:"2.6em",height:"2.6em",display:"flex",alignItems:"center",justifyContent:"center"}});function p({cc:s={},pages:p,defaultPage:g=0,page:h,onChange:y,compact:v,skipable:x,shape:k="square",size:C,variant:_,disabled:w,color:N,...R}){const z=n(f,s),j=e(),M=b(),[S,T]=void 0!==h?[h,y]:i(g);function $(){const a=Math.min(p,3);return new Array(a).fill(0).map(((r,e)=>e?e<a-1?Math.min(Math.max(S,1),p-2):x?Math.max(Math.min(S+1,p-1),2):p-1:x?Math.min(Math.max(S-1,0),p-3):0))}const A=t($()),B=a=>{A.current=$(),T?.(a),y?.(a),M()},I=S<1||w,L=S>=p-1||w;return a("div",{...R,style:{...R.style,"--color":N},role:"navigation","aria-disabled":w,className:l(z.pagination,z[`s__${C}`],z[`v__${_}`],z[k],R.className),children:[x&&r(c,{disabled:I,children:r("button",{disabled:I,"aria-label":"1",className:z.button,onClick:()=>B(0),children:r(d,{type:"first"})})}),r(c,{disabled:I,children:r("button",{disabled:I,"aria-label":S+"",className:z.button,onClick:()=>B(S-1),children:r(d,{type:"left"})})}),!v&&r("div",{className:z.buttons,children:$().map(((e,i)=>{const t=void 0!==A.current[i]?A.current[i]:e,n={gridColumn:i+1,gridRow:1};return a(o,{children:[r("div",{className:z.layer,style:n}),e===S&&r(m,{group:`${j}-pagination-selection`,cachable:["x"],transition:{duration:.35},children:r("div",{className:l(z.layer,z.selection),style:n})}),r(c,{disabled:w,children:r("button",{type:"button",disabled:w,className:l(z.button,z.index),style:n,"aria-current":e===S?"page":void 0,onClick:()=>B(e),children:r(u,{animations:{forward:{translate:["33.3% 0%","0% 0%"],duration:.35},back:{translate:["-33.3% 0%","0% 0%"],duration:.35}},triggers:[{name:"forward",on:t-e<0&&M,immediate:!0},{name:"back",on:t-e>0&&M,immediate:!0}],children:a("div",{className:z.indices,children:[r("span",{children:t+1}),r("span",{children:e+1}),r("span",{children:t+1})]})})})})]},i)}))}),r(c,{disabled:L,children:r("button",{disabled:L,"aria-label":S+2+"",className:z.button,onClick:()=>B(S+1),children:r(d,{type:"right"})})}),x&&r(c,{disabled:L,children:r("button",{disabled:L,"aria-label":p+"",className:z.button,onClick:()=>B(p-1),children:r(d,{type:"last"})})})]})}export{p as default};
//# sourceMappingURL=pagination.js.map