@infinityfx/fluid 1.4.0 → 1.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components/feedback/circular-progress.js +1 -1
- package/dist/components/input/calendar.js +1 -1
- package/dist/components/input/drop-zone.js +1 -1
- package/dist/components/input/toggle.js +1 -1
- package/dist/components/navigation/pagination.js +1 -1
- package/dist/types/src/components/input/calendar.d.ts +4 -2
- package/dist/types/src/components/navigation/pagination.d.ts +1 -1
- package/package.json +1 -1
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__rest as e}from"tslib";import{jsxs as r,jsx as i}from"react/jsx-runtime";import{combineClasses as o,classes as t}from"../../core/utils.js";import{Animatable as s}from"@infinityfx/lively";import{useLink as a}from"@infinityfx/lively/hooks";import{useEffect as l}from"react";import{createStyles as n}from"../../core/style.js";const c=n("circular-progress",{".wrapper":{position:"relative",width:"3.2em",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},".track":{stroke:"var(--f-clr-fg-100)",strokeWidth:"
|
|
2
|
+
import{__rest as e}from"tslib";import{jsxs as r,jsx as i}from"react/jsx-runtime";import{combineClasses as o,classes as t}from"../../core/utils.js";import{Animatable as s}from"@infinityfx/lively";import{useLink as a}from"@infinityfx/lively/hooks";import{useEffect as l}from"react";import{createStyles as n}from"../../core/style.js";const c=n("circular-progress",{".wrapper":{position:"relative",width:"3.2em",display:"flex",alignItems:"center",justifyContent:"center",flexShrink:0},".track":{stroke:"var(--f-clr-fg-100)",strokeWidth:"var(--width)",strokeLinecap:"round",strokeDasharray:1},".progress":{stroke:"var(--color, var(--f-clr-primary-100))",strokeWidth:"var(--width)",strokeLinecap:"round",transition:"background-color .3s"},".label":{position:"absolute",fontSize:"0.7em",fontWeight:600},".s__xsm":{fontSize:"var(--f-font-size-xsm)"},".s__sml":{fontSize:"var(--f-font-size-sml)"},".s__med":{fontSize:"var(--f-font-size-med)"},".s__lrg":{fontSize:"var(--f-font-size-lrg)"}});function f(n){var{children:f,cc:m={},size:d="med",slice:p=0,value:v,defaultValue:h=0,color:u}=n,g=e(n,["children","cc","size","slice","value","defaultValue","color"]);const k=o(c,m),y=void 0!==v?v:h,x=a(y*(1-p));return l((()=>x.set(y*(1-p),{duration:.3})),[y,p]),r("div",Object.assign({},g,{"aria-label":void 0,className:t(k.wrapper,k[`s__${d}`],g.className),children:[i("div",{className:k.label,children:f}),r("svg",{overflow:"visible",viewBox:"0 0 100 100",role:"progressbar","aria-valuenow":100*y,"aria-label":g["aria-label"],style:{rotate:90+180*p+"deg",width:"100%","--color":u,"--width":"10px"},children:[i("circle",{r:45,cx:50,cy:50,fill:"none",className:k.track,pathLength:1,style:{strokeDashoffset:p}}),i(s,{animate:{strokeLength:x},initial:{strokeDashoffset:1-x()},children:i("circle",{r:45,cx:50,cy:50,fill:"none",className:k.progress})})]})]}))}export{f as default};
|
|
3
3
|
//# sourceMappingURL=circular-progress.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__rest as e}from"tslib";import{jsxs as
|
|
2
|
+
import{__rest as e}from"tslib";import{jsxs as a,jsx as r}from"react/jsx-runtime";import{useRef as t,useState as o}from"react";import n from"./button.js";import{combineClasses as l,classes as i}from"../../core/utils.js";import{createStyles as d}from"../../core/style.js";import{Icon as s}from"../../core/icons.js";import c from"../feedback/halo.js";import{Animatable as g}from"@infinityfx/lively";import{useTrigger as m}from"@infinityfx/lively/hooks";import f from"./toggle.js";import{LayoutGroup as u}from"@infinityfx/lively/layout";function h(e,a){return e.getFullYear()===a.getFullYear()&&e.getMonth()===a.getMonth()&&e.getDate()===a.getDate()}function p(e,a){const r=new Date(e);return r.setDate(e.getDate()+a),r}const y=d("calendar",{".calendar":{backgroundColor:"var(--f-clr-fg-100)",borderRadius:"var(--f-radius-med)",padding:".6em"},".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)"},".calendar.round":{borderRadius:"var(--f-radius-xlg)"},".toggle":{fontWeight:600,flexGrow:1},".hidden":{opacity:0,pointerEvents:"none"},".header":{display:"flex",alignItems:"center",gap:".6em",marginBottom:".6em"},".header > *":{transition:"opacity .35s"},".content":{position:"relative",display:"grid"},".grid":{display:"flex",flexDirection:"column",rowGap:"var(--f-spacing-xxs)",gridArea:"1 / 1"},".row":{display:"flex",justifyContent:"space-around"},".label":{display:"flex",flexBasis:0,flexGrow:1,alignItems:"center",justifyContent:"center",fontWeight:600,fontSize:".85em",color:"var(--f-clr-grey-600)",marginBottom:"var(--f-spacing-xxs)"},".date":{position:"relative",border:"none",outline:"none",background:"transparent",fontSize:"1em",borderRadius:"var(--f-radius-sml)",color:"var(--f-clr-grey-300)",transition:"background-color .25s, color .25s",WebkitTapHighlightColor:"transparent"},".years.grid":{display:"grid",gridTemplateColumns:"1fr 1fr 1fr",zIndex:1,backgroundColor:"var(--f-clr-fg-100)"},".dates .date":{height:"2.2em",width:"2.2em"},".round .date":{borderRadius:"99px"},".date:enabled":{cursor:"pointer"},".date:disabled":{color:"var(--f-clr-grey-500)"},".date.unavailable":{textDecoration:"line-through"},".date.bold":{fontWeight:500},".date.bold:enabled":{color:"var(--f-clr-text-100)"},".date.today:enabled":{backgroundColor:"var(--f-clr-fg-200)"},".date.selected:enabled":{backgroundColor:"var(--f-clr-primary-100)",color:"var(--f-clr-text-200)"},".date.selected:disabled":{backgroundColor:"var(--f-clr-grey-100)",color:"var(--f-clr-grey-500)"}});function b(d){var{cc:b={},locale:v,size:x="med",round:w,defaultValue:D,value:k,onChange:C,disabled:j=!1,minDate:z,maxDate:M}=d,N=e(d,["cc","locale","size","round","defaultValue","value","onChange","disabled","minDate","maxDate"]);const A=l(y,b),S=m(),_=m(),F=t([]),[L,Y]=o(!1),[O,R]=void 0!==k?[k,C]:o(D),I=O||new Date,W=new Date(I.getFullYear(),I.getMonth(),1),B=p(W,1-(W.getDay()||7)),G=new Date(I);G.setMonth(I.getMonth()+1);const T=new Date(I);function V(e){null==R||R(e);const a=I.getMonth()-e.getMonth();a>0&&S(),a<0&&_()}T.setMonth(I.getMonth()-1);try{new Intl.Locale(v)}catch(e){v="en"}const E=Object.assign(Object.assign({},b),{size:x,round:w,compact:!0,disabled:!0===j,variant:"minimal"});return a("div",Object.assign({},N,{className:i(A.calendar,w&&A.round,A[`s__${x}`],N.className),children:[a("div",{className:A.header,children:[r(n,Object.assign({},E,{className:L?A.hidden:void 0,"aria-label":T.toLocaleString(v,{month:"long"}),onClick:()=>V(T),children:r(s,{type:"left"})})),a(f,Object.assign({},E,{variant:"default",checked:L,onChange:e=>Y(e.target.checked),className:A.toggle,children:[I.toLocaleString(v,{month:"long",year:"numeric"}),r(s,{type:"expand"})]})),r(n,Object.assign({},E,{className:L?A.hidden:void 0,"aria-label":G.toLocaleString(v,{month:"long"}),onClick:()=>V(G),children:r(s,{type:"right"})}))]}),a("div",{className:A.content,children:[r(u,{children:L&&r(g,{id:"years",animate:{opacity:[0,1],duration:.35},triggers:[{on:"mount"},{on:"unmount",reverse:!0}],children:r("div",{role:"grid",className:i(A.grid,A.years),children:r(u,{transition:{duration:.35,easing:"ease-out"},children:new Array(21).fill(0).map(((e,a)=>{const t=new Date(I),o=3*Math.round(t.getFullYear()/3);t.setFullYear(o+a-10);const n=new Date(t.getFullYear(),1,1),l=t.toLocaleString(v,{year:"numeric"}),d=!0===j||!!z&&z>n||!!M&&M<n;return r(g,{id:l,adaptive:!0,cachable:["y"],animate:{opacity:[0,1],duration:.25,easing:"ease-out",delay:.35+.05*Math.abs(3-Math.floor(a/3))},triggers:[{on:"mount"}],children:r(c,{color:"var(--f-clr-primary-300)",disabled:d,children:r("button",{type:"button",disabled:d,"aria-label":l,className:i(A.date,A.bold,t.getFullYear()===I.getFullYear()&&A.selected),onClick:()=>V(t),children:l})})},l)}))})})})}),a("div",{role:"grid",className:i(A.grid,A.dates),children:[r("div",{className:A.row,role:"row",children:new Array(7).fill(0).map(((e,a)=>r("div",{className:A.label,role:"columnheader",children:p(B,a).toLocaleString(v,{weekday:"narrow"})},a)))}),r(g,{animations:{left:{translate:["-8px 0px","0px 0px"],opacity:[0,1],duration:.25,easing:"ease-out"},right:{translate:["8px 0px","0px 0px"],opacity:[0,1],duration:.25,easing:"ease-out"}},stagger:.05,triggers:[{name:"left",on:S,immediate:!0},{name:"right",on:_,immediate:!0}],children:new Array(6).fill(0).map(((e,a)=>r("div",{className:A.row,role:"row",children:new Array(7).fill(0).map(((e,t)=>{const o=7*a+t,n=p(B,o),l=(Array.isArray(j)?j.some((e=>h(e,n))):j)||!!z&&z>n||!!M&&M<n;return r("div",{role:"gridcell",children:r(c,{color:"var(--f-clr-primary-300)",disabled:l,children:r("button",{ref:e=>{F.current[o]=e},type:"button",disabled:l,"aria-label":n.toLocaleDateString(v,{weekday:"long",month:"long",day:"numeric"}),className:i(A.date,n.getMonth()===I.getMonth()&&A.bold,h(new Date,n)&&A.today,h(I,n)&&A.selected,l&&Array.isArray(j)&&A.unavailable),onClick:()=>V(n),onKeyDown:e=>{var a;let r=null;switch(e.key){case"ArrowRight":r=o+1;break;case"ArrowLeft":r=o-1;break;case"ArrowDown":r=o+7;break;case"ArrowUp":r=o-7}null!==r&&(r<0&&V(T),r>=42&&V(G),r%=42,r=r<0?42+r:r,null===(a=F.current[r])||void 0===a||a.focus(),e.preventDefault())},children:n.getDate()})})},t)}))},a)))})]})]})]}))}export{b as default};
|
|
3
3
|
//# sourceMappingURL=calendar.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__rest as e}from"tslib";import{jsx as r,jsxs as o,Fragment as n}from"react/jsx-runtime";import{useRef as i,useState as a}from"react";import t from"./button.js";import l from"../../hooks/use-input-props.js";import{combineClasses as c,classes as s,combineRefs as d}from"../../core/utils.js";import{createStyles as p}from"../../core/style.js";import{Icon as f}from"../../core/icons.js";import"../feedback/progress-bar.js";import"../feedback/circular-progress.js";import v from"../feedback/spinner.js";import m from"../feedback/halo.js";import"../feedback/indicator.js";import"../feedback/skeleton.js";const g=p("drop-zone",{".zone":{overflow:"hidden",position:"relative",display:"grid",backgroundColor:"var(--f-clr-fg-100)",border:"dashed 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-med)",transition:"background-color .25s, border-color .25s, color .25s",userSelect:"none"},'.zone[aria-disabled="false"]':{cursor:"pointer"},".zone.hovering":{backgroundColor:"var(--f-clr-primary-600)",borderColor:"var(--f-clr-primary-100)"},".zone.filled":{borderStyle:"solid"},".zone.error, .zone.rejected":{borderColor:"var(--f-clr-error-100)",color:"var(--f-clr-error-100)"},".zone.rejected":{backgroundColor:"var(--f-clr-error-400)"},".zone.disabled":{color:"var(--f-clr-grey-500)"},".container":{display:"flex",flexDirection:"column",gridArea:"1 / 1"},".preview":{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--f-clr-bg-100)",padding:"var(--f-spacing-med)",flexGrow:1},".footer":{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"var(--f-spacing-sml)",gap:"var(--f-spacing-sml)"},".text":{display:"flex",alignItems:"baseline",gap:"var(--f-spacing-xsm)"},".annotation":{paddingTop:"var(--f-spacing-xxs)",color:"var(--f-clr-grey-600)",fontSize:"var(--f-font-size-xsm)"},".icon":{paddingBottom:"var(--f-spacing-sml)"},".image":{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover",zIndex:1},".container.centered":{alignItems:"center",justifyContent:"center",textAlign:"center",padding:"var(--f-spacing-lrg)"},".input":{position:"absolute",opacity:0,pointerEvents:"none"}});function u(e,r){const o=r?r.split(","):[];return!o.length||o.some((r=>e.type.includes(r.trim().replace(/\/\*$/,""))))}function b(p){var{cc:b={},loading:h=!1,error:y,text:x="Drop files or click to browse",annotation:j,icon:k,previewImages:
|
|
2
|
+
import{__rest as e}from"tslib";import{jsx as r,jsxs as o,Fragment as n}from"react/jsx-runtime";import{useRef as i,useState as a}from"react";import t from"./button.js";import l from"../../hooks/use-input-props.js";import{combineClasses as c,classes as s,combineRefs as d}from"../../core/utils.js";import{createStyles as p}from"../../core/style.js";import{Icon as f}from"../../core/icons.js";import"../feedback/progress-bar.js";import"../feedback/circular-progress.js";import v from"../feedback/spinner.js";import m from"../feedback/halo.js";import"../feedback/indicator.js";import"../feedback/skeleton.js";const g=p("drop-zone",{".zone":{overflow:"hidden",position:"relative",display:"grid",backgroundColor:"var(--f-clr-fg-100)",border:"dashed 1px var(--f-clr-fg-200)",borderRadius:"var(--f-radius-med)",transition:"background-color .25s, border-color .25s, color .25s",userSelect:"none",WebkitTapHighlightColor:"transparent"},'.zone[aria-disabled="false"]':{cursor:"pointer"},".zone.hovering":{backgroundColor:"var(--f-clr-primary-600)",borderColor:"var(--f-clr-primary-100)"},".zone.filled":{borderStyle:"solid"},".zone.error, .zone.rejected":{borderColor:"var(--f-clr-error-100)",color:"var(--f-clr-error-100)"},".zone.rejected":{backgroundColor:"var(--f-clr-error-400)"},".zone.disabled":{color:"var(--f-clr-grey-500)"},".container":{display:"flex",flexDirection:"column",gridArea:"1 / 1"},".preview":{position:"relative",display:"flex",alignItems:"center",justifyContent:"center",backgroundColor:"var(--f-clr-bg-100)",padding:"var(--f-spacing-med)",flexGrow:1},".footer":{display:"flex",alignItems:"center",justifyContent:"space-between",padding:"var(--f-spacing-sml)",gap:"var(--f-spacing-sml)"},".text":{display:"flex",alignItems:"baseline",gap:"var(--f-spacing-xsm)"},".annotation":{paddingTop:"var(--f-spacing-xxs)",color:"var(--f-clr-grey-600)",fontSize:"var(--f-font-size-xsm)"},".icon":{paddingBottom:"var(--f-spacing-sml)"},".image":{position:"absolute",inset:0,width:"100%",height:"100%",objectFit:"cover",zIndex:1},".container.centered":{alignItems:"center",justifyContent:"center",textAlign:"center",padding:"var(--f-spacing-lrg)"},".input":{position:"absolute",opacity:0,pointerEvents:"none"}});function u(e,r){const o=r?r.split(","):[];return!o.length||o.some((r=>e.type.includes(r.trim().replace(/\/\*$/,""))))}function b(p){var{cc:b={},loading:h=!1,error:y,text:x="Drop files or click to browse",annotation:j,icon:k,previewImages:C=!1,inputRef:z}=p,N=e(p,["cc","loading","error","text","annotation","icon","previewImages","inputRef"]);const w=c(g,b),D=i(null),[I,O]=a(!1),[R,T]=a(!1),[E,L]=a(null),[B,F]=l(N);function S(e){if(!D.current)return;const r=new DataTransfer;e&&r.items.add(e),L(e),D.current.files=r.files,D.current.dispatchEvent(new Event("change",{bubbles:!0}))}const $=!!(C&&E&&u(E,"image/*")),A=N.disabled||N.readOnly||h;return r(m,{color:"var(--f-clr-grey-300)",disabled:!!E||A,children:o("div",Object.assign({},F,{tabIndex:0,role:"button","aria-disabled":!!E||A,className:s(w.zone,I&&w.hovering,y&&w.error,R&&w.rejected,E&&w.filled,N.disabled&&w.disabled,N.className),onClick:e=>{var r;null===(r=N.onClick)||void 0===r||r.call(N,e),E||A||!D.current||D.current.click()},onDragOver:e=>{var r;null===(r=N.onDragOver)||void 0===r||r.call(N,e),e.preventDefault(),A||O(!0)},onDragLeave:e=>{var r;null===(r=N.onDragLeave)||void 0===r||r.call(N,e),O(!1)},onDrop:e=>{var r;if(null===(r=N.onDrop)||void 0===r||r.call(N,e),A)return;e.preventDefault(),O(!1);const o=e.dataTransfer.files[0];o&&!u(o,N.accept||"")?(T(!0),setTimeout((()=>T(!1)),250)):o&&S(o)},children:[h&&r("div",{className:s(w.container,w.centered),children:r(v,{})}),E&&!h&&r(n,{children:o("div",{className:w.container,children:[o("div",{className:w.preview,children:[r(f,{type:"file"}),$&&r("img",{src:URL.createObjectURL(E),className:w.image})]}),o("div",{className:w.footer,children:[o("div",{children:[r("div",{className:w.text,children:E.name}),r("div",{className:w.annotation,children:(U=E.size,(U/=1024)<1e3?`${U.toFixed(1)} KB`:`${(U/1024).toFixed(1)} MB`)})]}),r(t,{compact:!0,variant:"minimal",disabled:A,onClick:()=>S(null),children:r(f,{type:"close"})})]})]})}),o("div",{style:E||h?{opacity:0,pointerEvents:"none"}:void 0,className:s(w.container,w.centered),children:[r("div",{className:w.icon,children:k||r(f,{type:"upload"})}),r("div",{className:w.text,children:x}),j&&r("div",{className:w.annotation,children:j})]}),r("input",Object.assign({},B,{ref:d(D,z),type:"file",disabled:N.disabled||h,"aria-invalid":!!y,className:w.input,onChange:e=>{var r,o;null===(r=N.onChange)||void 0===r||r.call(N,e),L((null===(o=e.target.files)||void 0===o?void 0:o[0])||null)}}))]}))});var U}export{b as default};
|
|
3
3
|
//# sourceMappingURL=drop-zone.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
import{__rest as e}from"tslib";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{useState as
|
|
2
|
+
import{__rest as e}from"tslib";import{jsx as r,jsxs as a}from"react/jsx-runtime";import{useRef as t,useState as o}from"react";import i from"../feedback/halo.js";import n from"../../hooks/use-input-props.js";import{Animatable as c}from"@infinityfx/lively";import{combineClasses as l,classes as d}from"../../core/utils.js";import{createStyles as s}from"../../core/style.js";const m=s("toggle",{".input":{position:"absolute",opacity:0,inset:0,width:"100%",height:"100%",zIndex:2},".input:enabled":{cursor:"pointer"},".toggle":{position:"relative",display:"block",backgroundColor:"var(--f-clr-fg-100)",color:"var(--f-clr-text-100)",borderRadius:"var(--f-radius-sml)",transition:"background-color .25s, color .25s"},".toggle.round":{borderRadius:"999px"},".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)"},".v__minimal":{backgroundColor:"transparent"},".v__neutral":{backgroundColor:"var(--f-clr-fg-100)",border:"solid 1px var(--f-clr-fg-200)"},".content":{display:"flex",alignItems:"center",justifyContent:"center",gap:"var(--f-spacing-xsm)",gridArea:"1 / 1 / 1 / 1",lineHeight:1,padding:".8em"},".container":{display:"grid",overflow:"hidden",height:"100%"},".toggle.compact .content":{padding:".6em"},'.toggle[data-checked="true"]:not(.v__neutral)':{backgroundColor:"var(--f-clr-primary-100)",color:"var(--f-clr-text-200)"},'.v__neutral[data-checked="true"]':{backgroundColor:"var(--f-clr-fg-200)"},'.v__minimal[data-checked="true"]':{backgroundColor:"var(--f-clr-primary-300)"},'.toggle[data-checked="false"][data-disabled="true"]':{color:"var(--f-clr-grey-500)"},'.toggle[data-checked="true"][data-disabled="true"]':{backgroundColor:"var(--f-clr-grey-300)",color:"var(--f-clr-grey-100)"}});function g(s){var{children:g,cc:f={},size:u="med",compact:v=!1,round:p=!1,variant:h="default",checkedContent:b}=s,k=e(s,["children","cc","size","compact","round","variant","checkedContent"]);const _=l(m,f),x=t(null),[y,C]=void 0!==k.checked?[k.checked]:o(!!k.defaultChecked),[z,j]=n(k),N=[{on:y,immediate:!0},{on:!y,reverse:!0,immediate:!0}];return r(i,{disabled:k.disabled,color:"minimal"!==h||y?void 0:"var(--f-clr-primary-400)",target:x,children:a("div",Object.assign({},j,{className:d(_.toggle,p&&_.round,v&&_.compact,_[`s__${u}`],_[`v__${h}`],k.className),"data-checked":y,"data-disabled":!!k.disabled,children:[r("input",Object.assign({},z,{ref:x,type:"checkbox",className:_.input,onChange:e=>{var r;null==C||C(e.target.checked),null===(r=z.onChange)||void 0===r||r.call(z,e)}})),a("div",{className:_.container,children:[b?r(c,{animate:{translate:["0 0","0 -100%"],duration:.4},initial:{translate:y?"0 -100%":"0 0"},triggers:N,children:r("div",{className:_.content,children:g})}):r("div",{className:_.content,children:g}),b?r(c,{animate:{translate:["0 100%","0 0"],duration:.4},initial:{translate:y?"0 0":"0 100%"},triggers:N,children:r("div",{className:_.content,children:b})}):null]})]}))})}export{g as default};
|
|
3
3
|
//# sourceMappingURL=toggle.js.map
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
"use client";
|
|
2
|
-
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:
|
|
2
|
+
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",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 g(d){var{cc:g={},pages:h,defaultPage:v=0,page:y,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(),[T,$]=void 0!==y?[y,x]:t(v);function A(){const a=Math.min(h,3);return new Array(a).fill(0).map(((e,i)=>i?i<a-1?Math.min(Math.max(T,1),h-2):C?Math.max(Math.min(T+1,h-1),2):h-1:C?Math.min(Math.max(T-1,0),h-3):0))}const B=o(A()),I=a=>{B.current=A(),null==$||$(a),null==x||x(a),O()},L=T<1||R,P=T>=h-1||R;return e("div",Object.assign({},z,{style:Object.assign(Object.assign({},z.style),{"--color":j}),role:"navigation","aria-disabled":R,className:s(M.pagination,M[`s__${w}`],M[`v__${N}`],M[_],z.className),children:[C&&i(m,{disabled:L,children:i("button",{disabled:L,"aria-label":"1",className:M.button,onClick:()=>I(0),children:i(c,{type:"first"})})}),i(m,{disabled:L,children:i("button",{disabled:L,"aria-label":T+"",className:M.button,onClick:()=>I(T-1),children:i(c,{type:"left"})})}),!k&&i("div",{className:M.buttons,children:A().map(((a,r)=>{const t=B.current[r],o={gridColumn:r+1,gridRow:1};return e(n,{children:[i("div",{className:M.layer,style:o}),a===T&&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===T?"page":void 0,onClick:()=>I(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:P,children:i("button",{disabled:P,"aria-label":T+2+"",className:M.button,onClick:()=>I(T+1),children:i(c,{type:"right"})})}),C&&i(m,{disabled:P,children:i("button",{disabled:P,"aria-label":h+"",className:M.button,onClick:()=>I(h-1),children:i(c,{type:"last"})})})]}))}export{g as default};
|
|
3
3
|
//# sourceMappingURL=pagination.js.map
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { FluidSize, Selectors } from "../../../src/types";
|
|
2
|
-
export type CalendarSelectors = Selectors<'calendar' | '
|
|
2
|
+
export type CalendarSelectors = Selectors<'calendar' | 's__xsm' | 's__sml' | 's__med' | 's__lrg' | 'round' | 'header' | 'content' | 'grid' | 'row' | 'label' | 'date' | 'dates' | 'years' | 'unavailable' | 'bold' | 'today' | 'selected'>;
|
|
3
3
|
/**
|
|
4
4
|
* An input used for selecting a date.
|
|
5
5
|
*
|
|
6
6
|
* @see {@link https://fluid.infinityfx.dev/docs/components/calendar}
|
|
7
7
|
*/
|
|
8
|
-
export default function Calendar({ cc, locale, size, round, defaultValue, value, onChange, disabled, ...props }: {
|
|
8
|
+
export default function Calendar({ cc, locale, size, round, defaultValue, value, onChange, disabled, minDate, maxDate, ...props }: {
|
|
9
9
|
ref?: React.Ref<HTMLDivElement>;
|
|
10
10
|
cc?: CalendarSelectors;
|
|
11
11
|
locale?: Intl.LocalesArgument;
|
|
@@ -15,4 +15,6 @@ export default function Calendar({ cc, locale, size, round, defaultValue, value,
|
|
|
15
15
|
defaultValue?: Date;
|
|
16
16
|
onChange?: (value: Date) => void;
|
|
17
17
|
disabled?: boolean | Date[];
|
|
18
|
+
minDate?: Date;
|
|
19
|
+
maxDate?: Date;
|
|
18
20
|
} & Omit<React.HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'children' | 'onChange'>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { FluidSize, Selectors } from "../../../src/types";
|
|
2
|
-
export type PaginationSelectors = Selectors<'pagination'>;
|
|
2
|
+
export type PaginationSelectors = Selectors<'pagination' | 'pill' | 'square' | 'round' | 's__xsm' | 's__sml' | 's__med' | 's__lrg' | 'v__default' | 'v__neutral' | 'v__minimal' | 'buttons' | 'layer' | 'button' | 'selection' | 'indices'>;
|
|
3
3
|
/**
|
|
4
4
|
* A set of inputs used for navigation between pages.
|
|
5
5
|
*
|