@infinityfx/fluid 1.3.4 → 1.4.0

package/dist/components/navigation/pagination.js

@@ -1,3 +1,3 @@
 "use client";
-import{__rest as i}from"tslib";import{jsxs as a,jsx as e,Fragment as n}from"react/jsx-runtime";import{useState as t}from"react";import r from"../input/button.js";import{combineClasses as l,classes as s}from"../../core/utils.js";import{createStyles as c}from"../../core/style.js";import{Icon as o}from"../../core/icons.js";const m=c("pagination",{".pagination":{display:"flex",gap:"var(--f-spacing-sml)"},".pagination > *":{minWidth:"2.6em",minHeight:"2.6em"}});function p(c){var{cc:p={},page:d,setPage:g,pages:b,compact:u,skipable:f,round:v,size:j,variant:h}=c,k=i(c,["cc","page","setPage","pages","compact","skipable","round","size","variant"]);const y=l(m,p),[O,C]=void 0!==d?[d,g]:t(0),x=i=>null==C?void 0:C(i),z={cc:p,round:v,size:j,variant:h};return a("div",Object.assign({},k,{className:s(y.pagination,k.className),children:[u&&f&&e(r,Object.assign({},z,{variant:"neutral"===h?h:"minimal",disabled:O<1,onClick:()=>x(0),"aria-label":"1",children:e(o,{type:"first"})})),e(r,Object.assign({},z,{disabled:O<1,onClick:()=>x(O-1),"aria-label":O+"",children:e(o,{type:"left"})})),!u&&e(n,{children:[0,O,b-1].map(((i,a)=>(1===a&&b>=3&&[0,b-1].includes(O)&&(i+=0===O?1:-1),1!==a&&O===i&&b<3||i<0||i>=b?null:e(r,Object.assign({},z,{variant:i===O?h:"minimal",onClick:()=>x(i),"aria-current":i===O?"page":void 0,children:i+1}),a))))}),e(r,Object.assign({},z,{disabled:O>=b-1,onClick:()=>x(O+1),"aria-label":O+2+"",children:e(o,{type:"right"})})),u&&f&&e(r,Object.assign({},z,{variant:"neutral"===h?h:"minimal",disabled:O>=b-1,onClick:()=>x(b-1),"aria-label":b+"",children:e(o,{type:"last"})}))]}))}export{p as default};
+import{__rest as a}from"tslib";import{jsxs as e,jsx as i}from"react/jsx-runtime";import{useId as r,useState as t,useRef as o,Fragment as n}from"react";import{combineClasses as l,classes as s}from"../../core/utils.js";import{createStyles as d}from"../../core/style.js";import{Icon as c}from"../../core/icons.js";import m from"../feedback/halo.js";import{Morph as u}from"@infinityfx/lively/layout";import{Animatable as b}from"@infinityfx/lively";import{useTrigger as f}from"@infinityfx/lively/hooks";const p=d("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"},".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 g(d){var{cc:g={},pages:h,defaultPage:y=0,page:v,onChange:x,compact:k,skipable:C,shape:_="square",size:w,variant:N,disabled:R,color:j}=d,z=a(d,["cc","pages","defaultPage","page","onChange","compact","skipable","shape","size","variant","disabled","color"]);const M=l(p,g),S=r(),O=f(),[$,A]=void 0!==v?[v,x]:t(y);function B(){const a=Math.min(h,3);return new Array(a).fill(0).map(((e,i)=>i?i<a-1?Math.min(Math.max($,1),h-2):C?Math.max(Math.min($+1,h-1),2):h-1:C?Math.min(Math.max($-1,0),h-3):0))}const I=o(B()),L=a=>{I.current=B(),null==A||A(a),null==x||x(a),O()},P=$<1||R,T=$>=h-1||R;return e("div",Object.assign({},z,{style:Object.assign(Object.assign({},z.style),{"--color":j}),"aria-disabled":R,className:s(M.pagination,M[`s__${w}`],M[`v__${N}`],M[_],z.className),children:[C&&i(m,{disabled:P,children:i("button",{disabled:P,"aria-label":"1",className:M.button,onClick:()=>L(0),children:i(c,{type:"first"})})}),i(m,{disabled:P,children:i("button",{disabled:P,"aria-label":$+"",className:M.button,onClick:()=>L($-1),children:i(c,{type:"left"})})}),!k&&i("div",{className:M.buttons,children:B().map(((a,r)=>{const t=I.current[r],o={gridColumn:r+1,gridRow:1};return e(n,{children:[i("div",{className:M.layer,style:o}),a===$&&i(u,{group:`${S}-pagination-selection`,cachable:["x"],transition:{duration:.35},children:i("div",{className:s(M.layer,M.selection),style:o})}),i(m,{disabled:R,children:i("button",{type:"button",disabled:R,className:s(M.button,M.index),style:o,"aria-current":a===$?"page":void 0,onClick:()=>L(a),children:i(b,{animations:{forward:{translate:["33.3% 0%","0% 0%"],duration:.35},back:{translate:["-33.3% 0%","0% 0%"],duration:.35}},triggers:[{name:"forward",on:t-a<0&&O,immediate:!0},{name:"back",on:t-a>0&&O,immediate:!0}],children:e("div",{className:M.indices,children:[i("span",{children:t+1}),i("span",{children:a+1}),i("span",{children:t+1})]})})})})]},r)}))}),i(m,{disabled:T,children:i("button",{disabled:T,"aria-label":$+2+"",className:M.button,onClick:()=>L($+1),children:i(c,{type:"right"})})}),C&&i(m,{disabled:T,children:i("button",{disabled:T,"aria-label":h+"",className:M.button,onClick:()=>L(h-1),children:i(c,{type:"last"})})})]}))}export{g as default};
 //# sourceMappingURL=pagination.js.map

package/dist/types/src/components/navigation/pagination.d.ts

@@ -5,15 +5,17 @@ export type PaginationSelectors = Selectors<'pagination'>;
  *
  * @see {@link https://fluid.infinityfx.dev/docs/components/pagination}
  */
-export default function Pagination({ cc, page, setPage, pages, compact, skipable, round, size, variant, ...props }: {
+export default function Pagination({ cc, pages, defaultPage, page, onChange, compact, skipable, shape, size, variant, disabled, color, ...props }: {
     ref?: React.Ref<HTMLDivElement>;
     cc?: PaginationSelectors;
-    page?: number;
-    setPage?: (page: number) => void;
     pages: number;
+    defaultPage?: number;
+    page?: number;
+    onChange?: (page: number) => void;
     compact?: boolean;
     skipable?: boolean;
-    round?: boolean;
+    shape?: 'square' | 'round' | 'pill';
     size?: FluidSize;
-    variant?: 'default' | 'neutral' | 'light';
-} & Omit<React.HTMLAttributes<HTMLDivElement>, 'children'>): import("react/jsx-runtime").JSX.Element;
+    variant?: 'default' | 'neutral' | 'minimal';
+    disabled?: boolean;
+} & Omit<React.HTMLAttributes<HTMLDivElement>, 'onChange' | 'children'>): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@infinityfx/fluid",
-	"version": "1.3.4",
+	"version": "1.4.0",
 	"type": "module",
 	"description": "React UI library, using zero-runtime CSS-in-JS.",
 	"main": "dist/index.js",