klip-components 0.10.0 → 0.11.0

package/dist/index.d.ts

@@ -355,6 +355,8 @@ export declare interface PaginationProps {
     className?: string;
     /** Whether pagination buttons should be disabled */
     disabled?: boolean;
+    /** Enable mobile view with only arrows and page indicator */
+    mobile?: boolean;
 }
 
 declare interface Props {

package/dist/klip-components.cjs.js

@@ -1 +1 @@
-"use strict";var e=Object.defineProperty,r=Object.defineProperties,n=Object.getOwnPropertyDescriptors,a=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,t=Object.prototype.propertyIsEnumerable,i=(r,n,a)=>n in r?e(r,n,{enumerable:!0,configurable:!0,writable:!0,value:a}):r[n]=a,l=(e,r)=>{for(var n in r||(r={}))s.call(r,n)&&i(e,n,r[n]);if(a)for(var n of a(r))t.call(r,n)&&i(e,n,r[n]);return e},o=(e,r)=>{var n={};for(var i in e)s.call(e,i)&&r.indexOf(i)<0&&(n[i]=e[i]);if(null!=e&&a)for(var i of a(e))r.indexOf(i)<0&&t.call(e,i)&&(n[i]=e[i]);return n};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),d=require("react");function h(e){var r,n,a="";if("string"==typeof e||"number"==typeof e)a+=e;else if("object"==typeof e)if(Array.isArray(e)){var s=e.length;for(r=0;r<s;r++)e[r]&&(n=h(e[r]))&&(a&&(a+=" "),a+=n)}else for(n in e)e[n]&&(a&&(a+=" "),a+=n);return a}function p(){for(var e,r,n=0,a="",s=arguments.length;n<s;n++)(e=arguments[n])&&(r=h(e))&&(a&&(a+=" "),a+=r);return a}function u(...e){const r=e.join(" ").split(" ").filter(Boolean);return[...new Set(r)].join(" ")}function g(...e){return u(p(...e))}const x=({width:e=24,height:r=24})=>c.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:r,viewBox:"0 0 24 24",children:c.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m15 6l-6 6l6 6"})}),f=({width:e=24,height:r=24})=>c.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:r,viewBox:"0 0 24 24",children:c.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m9 6l6 6l-6 6"})}),m=({color:e="currentColor",size:r=24})=>c.jsxs("svg",{width:r,height:r,stroke:e,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:[c.jsx("style",{children:"\n          .spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}\n          .spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}\n          @keyframes spinner_zKoa{100%{transform:rotate(360deg)}}\n          @keyframes spinner_YpZS{\n            0%{stroke-dasharray:0 150;stroke-dashoffset:0}\n            47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}\n            95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}\n          }\n        "}),c.jsx("g",{className:"spinner_V8m1",children:c.jsx("circle",{cx:"12",cy:"12",r:"9.5",fill:"none",strokeWidth:"3"})})]}),b=e=>{var a,s,t=e,{variant:i="primary",size:d="md",shape:h="rectangle",startIcon:p,endIcon:u,className:x="",children:f,loading:b,disabled:j}=t,v=o(t,["variant","size","shape","startIcon","endIcon","className","children","loading","disabled"]);return c.jsx("button",(a=l({className:g("btn",`btn-${i}`,`btn-${d}`,`btn-${h}`,{"btn-loading":b},x),disabled:j||b},v),s={children:b?c.jsx(m,{}):c.jsxs(c.Fragment,{children:[p&&c.jsx("span",{className:"btn-icon-start",children:p}),f,u&&c.jsx("span",{className:"btn-icon-end",children:u})]})},r(a,n(s))))},j="...",v=({currentPage:e,totalPages:r,siblingCount:n=1})=>d.useMemo(()=>{if(r<=7)return Array.from({length:r},(e,r)=>r+1);const a=Math.max(e-n,1),s=Math.min(e+n,r),t=a>2,i=s<r-1;if(!t&&!i)return Array.from({length:r},(e,r)=>r+1);if(!t&&i){const e=3+2*n;return[...Array.from({length:e},(e,r)=>r+1),j,r]}if(t&&!i){const e=3+2*n;return[1,j,...Array.from({length:e},(n,a)=>r-e+a+1)]}return[1,j,...Array.from({length:s-a+1},(e,r)=>a+r),j,r]},[e,r,n]);exports.Button=b,exports.ButtonSelect=({options:e,value:r,onChange:n,disabled:a=!1,multiple:s=!1})=>{const t=e=>Array.isArray(r)?r.includes(e):e===r;return c.jsx("div",{className:"button-select "+(a?"disabled":""),children:e.map(({value:e,child:i})=>c.jsx("button",{className:"button-select-option "+(t(e)?"selected":""),onClick:()=>(e=>{if(a)return;if(!s)return void n(e);const t=Array.isArray(r)?r:[],i=t.includes(e)?t.filter(r=>r!==e):[...t,e];n(i)})(e),disabled:a,type:"button",children:i},e))})},exports.ChevronLeft=x,exports.ChevronRight=f,exports.DOTS=j,exports.Input=e=>{var r=e,{variant:n="primary",type:a="text",label:s,prefix:t,suffix:i,helperText:h,className:p,labelClass:u,helperTextClass:x,onChange:f,id:b,hasError:j,loading:v=!1,disabled:y}=r,w=o(r,["variant","type","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled"]);const k=d.useId(),N=b||`input-${k}`,C=g("form-field",{"has-prefix":!!t,"has-suffix":!!i},{[`variant-${n}`]:n},{loading:v},p);return c.jsxs("article",{className:"input-container",children:[s&&c.jsx("label",{htmlFor:N,className:g("input-label",u),children:s}),c.jsxs("section",{className:g("input-wrapper",{loading:v}),children:[t&&c.jsx("article",{className:"input-prefix",children:t}),c.jsx("input",l({id:N,type:a,className:C,onChange:e=>null==f?void 0:f(e.target.value),disabled:y||v},w)),v?c.jsx("article",{className:"input-suffix",children:c.jsx(m,{})}):i&&c.jsx("article",{className:"input-suffix",children:i})]}),h&&c.jsx("small",{className:g("input-helper-text",x),style:{color:j?"var(--color-danger)":"inherit"},children:h})]})},exports.Pagination=({currentPage:e,totalPages:r,onPageChange:n,siblingCount:a=1,hidePrevButton:s=!1,hideNextButton:t=!1,size:i="md",variant:l="secondary",className:o="",disabled:d=!1})=>{const h=v({currentPage:e,totalPages:r,siblingCount:a});if(0===e||0===r||h.length<2)return null;const p=h[h.length-1];return c.jsxs("article",{className:g("pagination",o),"aria-label":"pagination navigation",children:[!s&&c.jsx(b,{variant:l,size:i,onClick:()=>{e>1&&!d&&n(e-1)},disabled:1===e||d,"aria-label":"Go to previous page",shape:"square",children:c.jsx(x,{})}),h.map((r,a)=>r===j?c.jsx(b,{variant:l,size:i,"aria-label":"More pages",shape:"square",disabled:d,children:"…"},a):c.jsx(b,{variant:r===e?"primary":l,size:i,onClick:()=>!d&&n(r),disabled:d,"aria-label":r===e?`Current page, page ${r}`:`Go to page ${r}`,"aria-current":r===e?"page":void 0,shape:"square",children:r},a)),!t&&c.jsx(b,{variant:l,size:i,onClick:()=>{e<r&&!d&&n(e+1)},disabled:e===p||d,"aria-label":"Go to next page",shape:"square",children:c.jsx(f,{})})]})},exports.Spinner=m,exports.Toggle=e=>{var r=e,{color:n="var(--color-primary)",size:a="3.75rem",checked:s=!1,onChange:t,label:i,labelPosition:d="right",className:h}=r,p=o(r,["color","size","checked","onChange","label","labelPosition","className"]);return c.jsxs("label",{className:g("switch-container",d,h),children:[c.jsxs("div",{className:"toggle-switch",style:{"--switch-size":a,"--switch-color":n},children:[c.jsx("input",l({type:"checkbox",role:"switch",checked:s,onChange:e=>null==t?void 0:t(e.target.checked)},p)),c.jsx("span",{className:"slider"})]}),i&&c.jsx("span",{className:"switch-label",children:i})]})},exports.clsx=p,exports.cn=g,exports.mergeClasses=u,exports.usePagination=v;
+"use strict";var e=Object.defineProperty,r=Object.defineProperties,a=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,t=(r,a,n)=>a in r?e(r,a,{enumerable:!0,configurable:!0,writable:!0,value:n}):r[a]=n,l=(e,r)=>{for(var a in r||(r={}))s.call(r,a)&&t(e,a,r[a]);if(n)for(var a of n(r))i.call(r,a)&&t(e,a,r[a]);return e},o=(e,r)=>{var a={};for(var t in e)s.call(e,t)&&r.indexOf(t)<0&&(a[t]=e[t]);if(null!=e&&n)for(var t of n(e))r.indexOf(t)<0&&i.call(e,t)&&(a[t]=e[t]);return a};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const c=require("react/jsx-runtime"),d=require("react");function p(e){var r,a,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var s=e.length;for(r=0;r<s;r++)e[r]&&(a=p(e[r]))&&(n&&(n+=" "),n+=a)}else for(a in e)e[a]&&(n&&(n+=" "),n+=a);return n}function h(){for(var e,r,a=0,n="",s=arguments.length;a<s;a++)(e=arguments[a])&&(r=p(e))&&(n&&(n+=" "),n+=r);return n}function u(...e){const r=e.join(" ").split(" ").filter(Boolean);return[...new Set(r)].join(" ")}function g(...e){return u(h(...e))}const x=({width:e=24,height:r=24})=>c.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:r,viewBox:"0 0 24 24",children:c.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m15 6l-6 6l6 6"})}),f=({width:e=24,height:r=24})=>c.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:r,viewBox:"0 0 24 24",children:c.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m9 6l6 6l-6 6"})}),m=({color:e="currentColor",size:r=24})=>c.jsxs("svg",{width:r,height:r,stroke:e,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:[c.jsx("style",{children:"\n          .spinner_V8m1{transform-origin:center;animation:spinner_zKoa 2s linear infinite}\n          .spinner_V8m1 circle{stroke-linecap:round;animation:spinner_YpZS 1.5s ease-in-out infinite}\n          @keyframes spinner_zKoa{100%{transform:rotate(360deg)}}\n          @keyframes spinner_YpZS{\n            0%{stroke-dasharray:0 150;stroke-dashoffset:0}\n            47.5%{stroke-dasharray:42 150;stroke-dashoffset:-16}\n            95%,100%{stroke-dasharray:42 150;stroke-dashoffset:-59}\n          }\n        "}),c.jsx("g",{className:"spinner_V8m1",children:c.jsx("circle",{cx:"12",cy:"12",r:"9.5",fill:"none",strokeWidth:"3"})})]}),b=e=>{var n,s,i=e,{variant:t="primary",size:d="md",shape:p="rectangle",startIcon:h,endIcon:u,className:x="",children:f,loading:b,disabled:j}=i,v=o(i,["variant","size","shape","startIcon","endIcon","className","children","loading","disabled"]);return c.jsx("button",(n=l({className:g("btn",`btn-${t}`,`btn-${d}`,`btn-${p}`,{"btn-loading":b},x),disabled:j||b},v),s={children:b?c.jsx(m,{}):c.jsxs(c.Fragment,{children:[h&&c.jsx("span",{className:"btn-icon-start",children:h}),f,u&&c.jsx("span",{className:"btn-icon-end",children:u})]})},r(n,a(s))))},j="...",v=({currentPage:e,totalPages:r,siblingCount:a=1})=>d.useMemo(()=>{if(r<=7)return Array.from({length:r},(e,r)=>r+1);const n=Math.max(e-a,1),s=Math.min(e+a,r),i=n>2,t=s<r-1;if(!i&&!t)return Array.from({length:r},(e,r)=>r+1);if(!i&&t){const e=3+2*a;return[...Array.from({length:e},(e,r)=>r+1),j,r]}if(i&&!t){const e=3+2*a;return[1,j,...Array.from({length:e},(a,n)=>r-e+n+1)]}return[1,j,...Array.from({length:s-n+1},(e,r)=>n+r),j,r]},[e,r,a]);exports.Button=b,exports.ButtonSelect=({options:e,value:r,onChange:a,disabled:n=!1,multiple:s=!1})=>{const i=e=>Array.isArray(r)?r.includes(e):e===r;return c.jsx("div",{className:"button-select "+(n?"disabled":""),children:e.map(({value:e,child:t})=>c.jsx("button",{className:"button-select-option "+(i(e)?"selected":""),onClick:()=>(e=>{if(n)return;if(!s)return void a(e);const i=Array.isArray(r)?r:[],t=i.includes(e)?i.filter(r=>r!==e):[...i,e];a(t)})(e),disabled:n,type:"button",children:t},e))})},exports.ChevronLeft=x,exports.ChevronRight=f,exports.DOTS=j,exports.Input=e=>{var r=e,{variant:a="primary",type:n="text",label:s,prefix:i,suffix:t,helperText:p,className:h,labelClass:u,helperTextClass:x,onChange:f,id:b,hasError:j,loading:v=!1,disabled:y}=r,w=o(r,["variant","type","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled"]);const k=d.useId(),N=b||`input-${k}`,C=g("form-field",{"has-prefix":!!i,"has-suffix":!!t},{[`variant-${a}`]:a},{loading:v},h);return c.jsxs("article",{className:"input-container",children:[s&&c.jsx("label",{htmlFor:N,className:g("input-label",u),children:s}),c.jsxs("section",{className:g("input-wrapper",{loading:v}),children:[i&&c.jsx("article",{className:"input-prefix",children:i}),c.jsx("input",l({id:N,type:n,className:C,onChange:e=>null==f?void 0:f(e.target.value),disabled:y||v},w)),v?c.jsx("article",{className:"input-suffix",children:c.jsx(m,{})}):t&&c.jsx("article",{className:"input-suffix",children:t})]}),p&&c.jsx("small",{className:g("input-helper-text",x),style:{color:j?"var(--color-danger)":"inherit"},children:p})]})},exports.Pagination=({currentPage:e,totalPages:r,onPageChange:a,siblingCount:n=1,hidePrevButton:s=!1,hideNextButton:i=!1,size:t="md",variant:l="secondary",className:o="",disabled:d=!1,mobile:p=!1})=>{const h=v({currentPage:e,totalPages:r,siblingCount:n});if(0===e||0===r)return null;const u=()=>{e<r&&!d&&a(e+1)},m=()=>{e>1&&!d&&a(e-1)},y=h[h.length-1];return p?c.jsxs("article",{className:g("pagination","pagination--mobile",o),"aria-label":"pagination navigation",children:[!s&&c.jsx(b,{variant:l,size:t,onClick:m,disabled:1===e||d,"aria-label":"Go to previous page",shape:"square",children:c.jsx(x,{})}),c.jsxs("span",{className:"pagination__page-indicator","aria-live":"polite",children:[e," / ",r," pages"]}),!i&&c.jsx(b,{variant:l,size:t,onClick:u,disabled:e===y||d,"aria-label":"Go to next page",shape:"square",children:c.jsx(f,{})})]}):c.jsxs("article",{className:g("pagination",o),"aria-label":"pagination navigation",children:[!s&&c.jsx(b,{variant:l,size:t,onClick:m,disabled:1===e||d,"aria-label":"Go to previous page",shape:"square",children:c.jsx(x,{})}),h.map((n,s)=>n===j?c.jsx(b,{variant:l,size:t,"aria-label":"More pages",shape:"square",disabled:d,children:"…"},s):c.jsx(b,{variant:n===e?"primary":l,size:t,onClick:()=>!d&&a(n),disabled:d||1===r,"aria-label":n===e?`Current page, page ${n}`:`Go to page ${n}`,"aria-current":n===e?"page":void 0,shape:"square",children:n},s)),!i&&c.jsx(b,{variant:l,size:t,onClick:u,disabled:e===y||d,"aria-label":"Go to next page",shape:"square",children:c.jsx(f,{})})]})},exports.Spinner=m,exports.Toggle=e=>{var r=e,{color:a="var(--color-primary)",size:n="3.75rem",checked:s=!1,onChange:i,label:t,labelPosition:d="right",className:p}=r,h=o(r,["color","size","checked","onChange","label","labelPosition","className"]);return c.jsxs("label",{className:g("switch-container",d,p),children:[c.jsxs("div",{className:"toggle-switch",style:{"--switch-size":n,"--switch-color":a},children:[c.jsx("input",l({type:"checkbox",role:"switch",checked:s,onChange:e=>null==i?void 0:i(e.target.checked)},h)),c.jsx("span",{className:"slider"})]}),t&&c.jsx("span",{className:"switch-label",children:t})]})},exports.clsx=h,exports.cn=g,exports.mergeClasses=u,exports.usePagination=v;