klip-components 0.18.2 → 0.19.0

package/dist/index.d.ts

@@ -18,22 +18,20 @@ export declare interface BorderRadius {
  * Supports all standard HTML button attributes and provides additional customization through props.
  *
  * @example
- * // New API - filled primary button
+ * // Filled primary button
  * <Button variant="filled" color="primary">Click me</Button>
  *
  * @example
- * // New API - outline danger button
+ * // Outline danger button
  * <Button variant="outline" color="danger">Delete</Button>
  *
  * @example
- * // New API - ghost button
+ * // Ghost button
  * <Button variant="ghost" color="secondary">Cancel</Button>
  *
  * @example
- * // Legacy API (deprecated but still supported)
- * <Button variant="primary">Click me</Button>
- * <Button variant="outline">Outline</Button>
- * <Button variant="danger">Delete</Button>
+ * // Link button
+ * <Button variant="link" color="primary">Learn more</Button>
  */
 export declare const Button: default_2.FC<ButtonProps>;
 
@@ -47,13 +45,11 @@ export declare type ButtonColor = 'primary' | 'secondary' | 'success' | 'danger'
 export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTMLButtonElement> {
     /**
      * Visual style variant of the button.
-     * Use 'filled', 'outline', 'ghost', or 'link' for new API.
      * @default 'filled'
      */
-    variant?: ButtonVariantNew | ButtonVariant;
+    variant?: ButtonVariantNew;
     /**
      * Color scheme for the button.
-     * Only applies when using new variant API ('filled', 'outline', 'ghost').
      * @default 'primary'
      */
     color?: ButtonColor;
@@ -96,12 +92,6 @@ export declare type ButtonShape = 'rectangle' | 'pill' | 'square' | 'circle';
 
 export declare type ButtonSize = 'sm' | 'md' | 'lg';
 
-/**
- * @deprecated Use ButtonVariantNew instead. This type will be removed in a future version.
- * Old variant type that combined both visual style and color.
- */
-export declare type ButtonVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'link' | 'outline' | 'ghost' | 'icon';
-
 /** New variant type that represents only the visual style */
 export declare type ButtonVariantNew = 'filled' | 'outline' | 'ghost' | 'link';
 
@@ -357,7 +347,9 @@ export declare interface PaginationProps {
     /** Size of the pagination buttons */
     size?: 'sm' | 'md' | 'lg';
     /** Variant of the pagination buttons */
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost';
+    variant?: 'filled' | 'outline' | 'ghost';
+    /** Color of the pagination buttons */
+    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
     /** Additional CSS class */
     className?: string;
     /** Whether pagination buttons should be disabled */

package/dist/klip-components.cjs.js

@@ -1 +1 @@
-"use strict";var e=Object.defineProperty,t=Object.defineProperties,r=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,l=(t,r,n)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[r]=n,i=(e,t)=>{for(var r in t||(t={}))a.call(t,r)&&l(e,r,t[r]);if(n)for(var r of n(t))s.call(t,r)&&l(e,r,t[r]);return e},o=(e,n)=>t(e,r(n)),c=(e,t)=>{var r={};for(var l in e)a.call(e,l)&&t.indexOf(l)<0&&(r[l]=e[l]);if(null!=e&&n)for(var l of n(e))t.indexOf(l)<0&&s.call(e,l)&&(r[l]=e[l]);return r};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),h=require("react");function u(e){var t,r,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(r=u(e[t]))&&(n&&(n+=" "),n+=r)}else for(r in e)e[r]&&(n&&(n+=" "),n+=r);return n}function p(){for(var e,t,r=0,n="",a=arguments.length;r<a;r++)(e=arguments[r])&&(t=u(e))&&(n&&(n+=" "),n+=t);return n}function m(...e){const t=e.join(" ").split(" ").filter(Boolean);return[...new Set(t)].join(" ")}function x(...e){return m(p(...e))}const f=({width:e=24,height:t=24})=>d.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:t,viewBox:"0 0 24 24",children:d.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m15 6l-6 6l6 6"})}),g=({width:e=24,height:t=24})=>d.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:t,viewBox:"0 0 24 24",children:d.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m9 6l6 6l-6 6"})}),b=({color:e="currentColor",size:t=24})=>d.jsxs("svg",{width:t,height:t,stroke:e,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:[d.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        "}),d.jsx("g",{className:"spinner_V8m1",children:d.jsx("circle",{cx:"12",cy:"12",r:"9.5",fill:"none",strokeWidth:"3"})})]}),v={primary:{variant:"filled",color:"primary"},secondary:{variant:"filled",color:"secondary"},success:{variant:"filled",color:"success"},danger:{variant:"filled",color:"danger"},warning:{variant:"filled",color:"warning"},info:{variant:"filled",color:"info"},link:{variant:"link",color:"primary"},outline:{variant:"outline",color:"primary"},ghost:{variant:"ghost",color:"primary"}},y=e=>{var t=e,{variant:r="filled",color:n="primary",size:a="md",shape:s="rectangle",startIcon:l,endIcon:h,className:u="",children:p,loading:m,disabled:f,hover:g=!0}=t,y=c(t,["variant","color","size","shape","startIcon","endIcon","className","children","loading","disabled","hover"]);let j=r,w=n;if((e=>Object.keys(v).includes(e))(r)){process.env.NODE_ENV;const e=v[r];j=e.variant,w=e.color}const N="filled"===j?`btn-${w}`:`btn-${j}-${w}`;return d.jsx("button",o(i({className:x("btn",N,`btn-${a}`,`btn-${s}`,{"btn-loading":m,"btn-no-hover":!g},u),disabled:f||m},y),{children:m?d.jsx(b,{}):d.jsxs(d.Fragment,{children:[l&&d.jsx("span",{className:"btn-icon-start",children:l}),p,h&&d.jsx("span",{className:"btn-icon-end",children:h})]})}))},j=d.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",children:d.jsx("path",{fill:"currentColor",d:"M12 14.975q-.2 0-.375-.062T11.3 14.7l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213t-.375.062"})}),w="...",N=({currentPage:e,totalPages:t,siblingCount:r=1})=>h.useMemo(()=>{if(t<=7)return Array.from({length:t},(e,t)=>t+1);const n=Math.max(e-r,1),a=Math.min(e+r,t),s=n>2,l=a<t-1;if(!s&&!l)return Array.from({length:t},(e,t)=>t+1);if(!s&&l){const e=3+2*r;return[...Array.from({length:e},(e,t)=>t+1),w,t]}if(s&&!l){const e=3+2*r;return[1,w,...Array.from({length:e},(r,n)=>t-e+n+1)]}return[1,w,...Array.from({length:a-n+1},(e,t)=>n+t),w,t]},[e,t,r]),k=e=>{var t=e,{className:r="",children:n}=t,a=c(t,["className","children"]);return d.jsx("thead",o(i({className:x("table-header",r)},a),{children:n}))},C=e=>{var t=e,{className:r="",children:n}=t,a=c(t,["className","children"]);return d.jsx("tbody",o(i({className:x("table-body",r)},a),{children:n}))},M=e=>{var t=e,{className:r="",children:n}=t,a=c(t,["className","children"]);return d.jsx("tfoot",o(i({className:x("table-footer",r)},a),{children:n}))},T=e=>{var t=e,{className:r="",selected:n=!1,children:a}=t,s=c(t,["className","selected","children"]);return d.jsx("tr",o(i({className:x("table-row",{"table-row-selected":n},r)},s),{children:a}))},P=e=>{var t=e,{className:r="",header:n=!1,align:a="left",minWidth:s,maxWidth:l,width:h,children:u,style:p}=t,m=c(t,["className","header","align","minWidth","maxWidth","width","children","style"]);const f=n?"th":"td",g=i(i(i(i({},s&&{minWidth:s}),l&&{maxWidth:l}),h&&{width:h}),p);return d.jsx(f,o(i({className:x("table-cell",`table-cell-${a}`,{"table-cell-header":n},r),style:Object.keys(g).length>0?g:p},m),{children:u}))},E=e=>{var t=e,{className:r="",variant:n="default",dense:a=!1,children:s}=t,l=c(t,["className","variant","dense","children"]);const h=d.jsx("table",o(i({className:x("table",`table-${n}`,{"table-dense":a},r)},l),{children:s}));return d.jsx("div",{className:"table-responsive",children:h})};E.Header=k,E.Body=C,E.Footer=M,E.Row=T,E.Cell=P;const O=h.createContext(void 0),S=()=>{const e=h.useContext(O);if(void 0===e)throw new Error("useMenuContext must be used within a MenuContextProvider");return e},z=({children:e,menuPosition:t="bottom-left"})=>{const[r,n]=h.useState(!1),[a,s]=h.useState({x:0,y:0}),l=h.useRef(null),i=h.useRef(null),o=h.useCallback((e,r)=>{const n=10,a=(null==r?void 0:r.width)||200,s=(null==r?void 0:r.height)||150,l=window.innerWidth,i=window.innerHeight;let o=0,c=0;switch(t){case"bottom-left":default:o=e.left,c=e.bottom+n;break;case"bottom-right":o=e.right-a,c=e.bottom+n;break;case"bottom-center":o=e.left+e.width/2-a/2,c=e.bottom+n;break;case"top-left":o=e.left,c=e.top-15-s;break;case"top-right":o=e.right-a,c=e.top-15-s;break;case"top-center":o=e.left+e.width/2-a/2,c=e.top-15-s;break;case"left-top":o=e.left-15-a,c=e.top;break;case"left-bottom":o=e.left-15-a,c=e.bottom-s;break;case"left-center":o=e.left-15-a,c=e.top+e.height/2-s/2;break;case"right-top":o=e.right+n,c=e.top;break;case"right-bottom":o=e.right+n,c=e.bottom-s;break;case"right-center":o=e.right+n,c=e.top+e.height/2-s/2}return o=Math.max(n,Math.min(o,l-a-n)),c=Math.max(n,Math.min(c,i-s-n)),{x:o,y:c}},[t]),c=h.useCallback(()=>{var e;if(!l.current)return;const t=l.current.getBoundingClientRect(),r=null==(e=i.current)?void 0:e.getBoundingClientRect();s(o(t,r))},[o]),u=()=>n(!1);return h.useEffect(()=>{if(r&&l.current){const e=()=>{var e;const t=l.current.getBoundingClientRect(),r=null==(e=i.current)?void 0:e.getBoundingClientRect();s(o(t,r))};e();const t=setTimeout(e,50);return()=>clearTimeout(t)}},[r,o]),h.useEffect(()=>{const e=e=>{i.current&&i.current.contains(e.target)||l.current&&l.current.contains(e.target)||u()};if(r)return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[r]),h.useEffect(()=>{const e=e=>{"Escape"===e.key&&r&&u()};if(r)return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r]),d.jsx(O.Provider,{value:{isOpen:r,position:a,menuPosition:t,triggerRef:l,contentRef:i,openMenu:()=>{l.current&&n(!0)},closeMenu:u,repositionMenu:c},children:e})},A=({children:e,className:t,style:r={}})=>{const{isOpen:n,position:a,contentRef:s,closeMenu:l}=S(),[o,c]=h.useState(!1),[u,p]=h.useState(!1);h.useEffect(()=>{if(n){p(!0);const e=setTimeout(()=>{if(c(!0),s.current){const e=s.current.querySelector('[role="menuitem"]:not([disabled])');e&&e.focus()}},10);return()=>clearTimeout(e)}c(!1);const e=setTimeout(()=>p(!1),150);return()=>clearTimeout(e)},[n,s]);return u?d.jsx("article",{ref:s,className:x("menu-content",{"menu-content--open":o},t),style:i({left:`${a.x}px`,top:`${a.y}px`,opacity:o?1:0,transition:"opacity 0.15s ease-in-out"},r),role:"menu","aria-orientation":"vertical",onKeyDown:e=>{var t,r;if(!s.current)return;const n=Array.from(s.current.querySelectorAll('[role="menuitem"]:not([disabled])')),a=n.findIndex(e=>e===document.activeElement);switch(e.key){case"ArrowDown":e.preventDefault();null==(t=n[a<n.length-1?a+1:0])||t.focus();break;case"ArrowUp":e.preventDefault();null==(r=n[a>0?a-1:n.length-1])||r.focus();break;case"Escape":e.preventDefault(),l()}},tabIndex:-1,children:h.Children.map(e,e=>h.isValidElement(e)?h.cloneElement(e,{closeMenu:l}):e)}):null},B=({children:e,onClick:t,closeMenu:r,disabled:n=!1,className:a,style:s={}})=>{const l=()=>{n||(t&&t(),r&&r())};return d.jsx("button",{onClick:l,onKeyDown:e=>{n||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),l())},disabled:n,className:x("menu-item",{"menu-item--disabled":n},a),style:s,role:"menuitem",type:"button",tabIndex:n?-1:0,"aria-disabled":n,children:e})},$=({children:e,className:t,style:r={}})=>{const{triggerRef:n,isOpen:a,openMenu:s,closeMenu:l}=S();return d.jsx("section",{ref:n,onClick:()=>{a?l():s()},className:x("menu-trigger",t),style:r,children:h.cloneElement(e,{isOpen:a})})},q=Object.assign(({children:e,className:t,style:r={},position:n="bottom-left"})=>d.jsx(z,{menuPosition:n,children:d.jsx("div",{className:x("menu-container",t),style:r,children:e})}),{Trigger:$,Content:A,Item:B});exports.Button=y,exports.ButtonSelect=({options:e,value:t,onChange:r,disabled:n=!1,multiple:a=!1})=>{const s=e=>Array.isArray(t)?t.includes(e):e===t;return d.jsx("div",{className:"button-select "+(n?"disabled":""),children:e.map(({value:e,child:l})=>d.jsx("button",{className:"button-select-option "+(s(e)?"selected":""),onClick:()=>(e=>{if(n)return;if(!a)return void r(e);const s=Array.isArray(t)?t:[],l=s.includes(e)?s.filter(t=>t!==e):[...s,e];r(l)})(e),disabled:n,type:"button",children:l},e))})},exports.ChevronLeft=f,exports.ChevronRight=g,exports.DOTS=w,exports.Input=e=>{var t=e,{variant:r="primary",type:n="text",label:a,prefix:s,suffix:l,helperText:o,className:u,labelClass:p,helperTextClass:m,onChange:f,id:g,hasError:v,loading:y=!1,disabled:j}=t,w=c(t,["variant","type","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled"]);const N=h.useId(),k=g||`input-${N}`,C=x("form-field",{"has-prefix":!!s,"has-suffix":!!l},{[`variant-${r}`]:r},{loading:y},u);return d.jsxs("article",{className:"input-container",children:[a&&d.jsx("label",{htmlFor:k,className:x("input-label",p),children:a}),d.jsxs("section",{className:x("input-wrapper",{loading:y}),children:[s&&d.jsx("article",{className:"input-prefix",children:s}),d.jsx("input",i({id:k,type:n,className:C,onChange:e=>null==f?void 0:f(e.target.value),disabled:j||y},w)),y?d.jsx("article",{className:"input-suffix",children:d.jsx(b,{})}):l&&d.jsx("article",{className:"input-suffix",children:l})]}),o&&d.jsx("small",{className:x("input-helper-text",m),style:{color:v?"var(--color-danger)":"inherit"},children:o})]})},exports.Menu=q,exports.MenuContent=A,exports.MenuContextProvider=z,exports.MenuItem=B,exports.MenuTrigger=$,exports.Pagination=({currentPage:e,totalPages:t,onPageChange:r,siblingCount:n=1,hidePrevButton:a=!1,hideNextButton:s=!1,size:l="md",variant:i="secondary",className:o="",disabled:c=!1,mobile:h=!1})=>{const u=N({currentPage:e,totalPages:t,siblingCount:n});if(0===e||0===t)return null;const p=()=>{e<t&&!c&&r(e+1)},m=()=>{e>1&&!c&&r(e-1)},b=u[u.length-1];return h?d.jsxs("article",{className:x("pagination","pagination--mobile",o),"aria-label":"pagination navigation",children:[!a&&d.jsx(y,{variant:i,size:l,onClick:m,disabled:1===e||c,"aria-label":"Go to previous page",shape:"square",children:d.jsx(f,{})}),d.jsxs("span",{className:"pagination__page-indicator","aria-live":"polite",children:[e," / ",t," pages"]}),!s&&d.jsx(y,{variant:i,size:l,onClick:p,disabled:e===b||c,"aria-label":"Go to next page",shape:"square",children:d.jsx(g,{})})]}):d.jsxs("article",{className:x("pagination",o),"aria-label":"pagination navigation",children:[!a&&d.jsx(y,{variant:i,size:l,onClick:m,disabled:1===e||c,"aria-label":"Go to previous page",shape:"square",children:d.jsx(f,{})}),u.map((n,a)=>n===w?d.jsx(y,{variant:i,size:l,"aria-label":"More pages",shape:"square",disabled:c,hover:!1,children:"…"},a):d.jsx(y,{variant:n===e?"primary":i,size:l,onClick:()=>!c&&r(n),disabled:c||1===t,"aria-label":n===e?`Current page, page ${n}`:`Go to page ${n}`,"aria-current":n===e?"page":void 0,shape:"square",children:n},a)),!s&&d.jsx(y,{variant:i,size:l,onClick:p,disabled:e===b||c,"aria-label":"Go to next page",shape:"square",children:d.jsx(g,{})})]})},exports.Select=e=>{var t=e,{variant:r="primary",label:n,prefix:a,suffix:s,helperText:l,className:u,labelClass:p,helperTextClass:m,onChange:f,id:g,hasError:v,loading:y=!1,disabled:w,options:N=[],placeholder:k,children:C}=t,M=c(t,["variant","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","options","placeholder","children"]);const T=h.useId(),P=g||`select-${T}`,E=x("form-field",{"has-prefix":!!a,"has-suffix":!!s||!y},{[`variant-${r}`]:r},{loading:y},u);return d.jsxs("article",{className:"select-container",children:[n&&d.jsx("label",{htmlFor:P,className:x("select-label",p),children:n}),d.jsxs("section",{className:x("select-wrapper",{loading:y}),children:[a&&d.jsx("article",{className:"select-prefix",children:a}),d.jsxs("select",o(i({id:P,className:E,onChange:e=>null==f?void 0:f(e.target.value),disabled:w||y},M),{children:[k&&d.jsx("option",{value:"",disabled:!0,hidden:!0,children:k}),N.length>0?N.map(e=>d.jsx("option",{value:e.value,disabled:e.disabled,children:e.label},e.value)):C]})),y?d.jsx("article",{className:"select-suffix",children:d.jsx(b,{})}):d.jsx("article",{className:"select-suffix",children:s||j})]}),l&&d.jsx("small",{className:x("select-helper-text",m),style:{color:v?"var(--color-danger)":"inherit"},children:l})]})},exports.Spinner=b,exports.Table=E,exports.TableBody=C,exports.TableCell=P,exports.TableFooter=M,exports.TableHeader=k,exports.TableRow=T,exports.Toggle=e=>{var t=e,{color:r="var(--color-primary)",size:n="3.75rem",checked:a=!1,onChange:s,label:l,labelPosition:o="right",className:h}=t,u=c(t,["color","size","checked","onChange","label","labelPosition","className"]);return d.jsxs("label",{className:x("switch-container",o,h),children:[d.jsxs("div",{className:"toggle-switch",style:{"--switch-size":n,"--switch-color":r},children:[d.jsx("input",i({type:"checkbox",role:"switch",checked:a,onChange:e=>null==s?void 0:s(e.target.checked)},u)),d.jsx("span",{className:"slider"})]}),l&&d.jsx("span",{className:"switch-label",children:l})]})},exports.clsx=p,exports.cn=x,exports.mergeClasses=m,exports.useMenuContext=S,exports.usePagination=N;
+"use strict";var e=Object.defineProperty,t=Object.defineProperties,r=Object.getOwnPropertyDescriptors,n=Object.getOwnPropertySymbols,a=Object.prototype.hasOwnProperty,s=Object.prototype.propertyIsEnumerable,l=(t,r,n)=>r in t?e(t,r,{enumerable:!0,configurable:!0,writable:!0,value:n}):t[r]=n,i=(e,t)=>{for(var r in t||(t={}))a.call(t,r)&&l(e,r,t[r]);if(n)for(var r of n(t))s.call(t,r)&&l(e,r,t[r]);return e},o=(e,n)=>t(e,r(n)),c=(e,t)=>{var r={};for(var l in e)a.call(e,l)&&t.indexOf(l)<0&&(r[l]=e[l]);if(null!=e&&n)for(var l of n(e))t.indexOf(l)<0&&s.call(e,l)&&(r[l]=e[l]);return r};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),h=require("react");function u(e){var t,r,n="";if("string"==typeof e||"number"==typeof e)n+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(r=u(e[t]))&&(n&&(n+=" "),n+=r)}else for(r in e)e[r]&&(n&&(n+=" "),n+=r);return n}function p(){for(var e,t,r=0,n="",a=arguments.length;r<a;r++)(e=arguments[r])&&(t=u(e))&&(n&&(n+=" "),n+=t);return n}function m(...e){const t=e.join(" ").split(" ").filter(Boolean);return[...new Set(t)].join(" ")}function x(...e){return m(p(...e))}const f=({width:e=24,height:t=24})=>d.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:t,viewBox:"0 0 24 24",children:d.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m15 6l-6 6l6 6"})}),b=({width:e=24,height:t=24})=>d.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:t,viewBox:"0 0 24 24",children:d.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m9 6l6 6l-6 6"})}),g=({color:e="currentColor",size:t=24})=>d.jsxs("svg",{width:t,height:t,stroke:e,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:[d.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        "}),d.jsx("g",{className:"spinner_V8m1",children:d.jsx("circle",{cx:"12",cy:"12",r:"9.5",fill:"none",strokeWidth:"3"})})]}),v=e=>{var t=e,{variant:r="filled",color:n="primary",size:a="md",shape:s="rectangle",startIcon:l,endIcon:h,className:u="",children:p,loading:m,disabled:f,hover:b=!0}=t,v=c(t,["variant","color","size","shape","startIcon","endIcon","className","children","loading","disabled","hover"]);const j="filled"===r?`btn-${n}`:`btn-${r}-${n}`;return d.jsx("button",o(i({className:x("btn",j,`btn-${a}`,`btn-${s}`,{"btn-loading":m,"btn-no-hover":!b},u),disabled:f||m},v),{children:m?d.jsx(g,{}):d.jsxs(d.Fragment,{children:[l&&d.jsx("span",{className:"btn-icon-start",children:l}),p,h&&d.jsx("span",{className:"btn-icon-end",children:h})]})}))},j=d.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",children:d.jsx("path",{fill:"currentColor",d:"M12 14.975q-.2 0-.375-.062T11.3 14.7l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213t-.375.062"})}),y="...",w=({currentPage:e,totalPages:t,siblingCount:r=1})=>h.useMemo(()=>{if(t<=7)return Array.from({length:t},(e,t)=>t+1);const n=Math.max(e-r,1),a=Math.min(e+r,t),s=n>2,l=a<t-1;if(!s&&!l)return Array.from({length:t},(e,t)=>t+1);if(!s&&l){const e=3+2*r;return[...Array.from({length:e},(e,t)=>t+1),y,t]}if(s&&!l){const e=3+2*r;return[1,y,...Array.from({length:e},(r,n)=>t-e+n+1)]}return[1,y,...Array.from({length:a-n+1},(e,t)=>n+t),y,t]},[e,t,r]),N=e=>{var t=e,{className:r="",children:n}=t,a=c(t,["className","children"]);return d.jsx("thead",o(i({className:x("table-header",r)},a),{children:n}))},C=e=>{var t=e,{className:r="",children:n}=t,a=c(t,["className","children"]);return d.jsx("tbody",o(i({className:x("table-body",r)},a),{children:n}))},k=e=>{var t=e,{className:r="",children:n}=t,a=c(t,["className","children"]);return d.jsx("tfoot",o(i({className:x("table-footer",r)},a),{children:n}))},M=e=>{var t=e,{className:r="",selected:n=!1,children:a}=t,s=c(t,["className","selected","children"]);return d.jsx("tr",o(i({className:x("table-row",{"table-row-selected":n},r)},s),{children:a}))},T=e=>{var t=e,{className:r="",header:n=!1,align:a="left",minWidth:s,maxWidth:l,width:h,children:u,style:p}=t,m=c(t,["className","header","align","minWidth","maxWidth","width","children","style"]);const f=n?"th":"td",b=i(i(i(i({},s&&{minWidth:s}),l&&{maxWidth:l}),h&&{width:h}),p);return d.jsx(f,o(i({className:x("table-cell",`table-cell-${a}`,{"table-cell-header":n},r),style:Object.keys(b).length>0?b:p},m),{children:u}))},P=e=>{var t=e,{className:r="",variant:n="default",dense:a=!1,children:s}=t,l=c(t,["className","variant","dense","children"]);const h=d.jsx("table",o(i({className:x("table",`table-${n}`,{"table-dense":a},r)},l),{children:s}));return d.jsx("div",{className:"table-responsive",children:h})};P.Header=N,P.Body=C,P.Footer=k,P.Row=M,P.Cell=T;const E=h.createContext(void 0),O=()=>{const e=h.useContext(E);if(void 0===e)throw new Error("useMenuContext must be used within a MenuContextProvider");return e},S=({children:e,menuPosition:t="bottom-left"})=>{const[r,n]=h.useState(!1),[a,s]=h.useState({x:0,y:0}),l=h.useRef(null),i=h.useRef(null),o=h.useCallback((e,r)=>{const n=10,a=(null==r?void 0:r.width)||200,s=(null==r?void 0:r.height)||150,l=window.innerWidth,i=window.innerHeight;let o=0,c=0;switch(t){case"bottom-left":default:o=e.left,c=e.bottom+n;break;case"bottom-right":o=e.right-a,c=e.bottom+n;break;case"bottom-center":o=e.left+e.width/2-a/2,c=e.bottom+n;break;case"top-left":o=e.left,c=e.top-15-s;break;case"top-right":o=e.right-a,c=e.top-15-s;break;case"top-center":o=e.left+e.width/2-a/2,c=e.top-15-s;break;case"left-top":o=e.left-15-a,c=e.top;break;case"left-bottom":o=e.left-15-a,c=e.bottom-s;break;case"left-center":o=e.left-15-a,c=e.top+e.height/2-s/2;break;case"right-top":o=e.right+n,c=e.top;break;case"right-bottom":o=e.right+n,c=e.bottom-s;break;case"right-center":o=e.right+n,c=e.top+e.height/2-s/2}return o=Math.max(n,Math.min(o,l-a-n)),c=Math.max(n,Math.min(c,i-s-n)),{x:o,y:c}},[t]),c=h.useCallback(()=>{var e;if(!l.current)return;const t=l.current.getBoundingClientRect(),r=null==(e=i.current)?void 0:e.getBoundingClientRect();s(o(t,r))},[o]),u=()=>n(!1);return h.useEffect(()=>{if(r&&l.current){const e=()=>{var e;const t=l.current.getBoundingClientRect(),r=null==(e=i.current)?void 0:e.getBoundingClientRect();s(o(t,r))};e();const t=setTimeout(e,50);return()=>clearTimeout(t)}},[r,o]),h.useEffect(()=>{const e=e=>{i.current&&i.current.contains(e.target)||l.current&&l.current.contains(e.target)||u()};if(r)return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[r]),h.useEffect(()=>{const e=e=>{"Escape"===e.key&&r&&u()};if(r)return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[r]),d.jsx(E.Provider,{value:{isOpen:r,position:a,menuPosition:t,triggerRef:l,contentRef:i,openMenu:()=>{l.current&&n(!0)},closeMenu:u,repositionMenu:c},children:e})},z=({children:e,className:t,style:r={}})=>{const{isOpen:n,position:a,contentRef:s,closeMenu:l}=O(),[o,c]=h.useState(!1),[u,p]=h.useState(!1);h.useEffect(()=>{if(n){p(!0);const e=setTimeout(()=>{if(c(!0),s.current){const e=s.current.querySelector('[role="menuitem"]:not([disabled])');e&&e.focus()}},10);return()=>clearTimeout(e)}c(!1);const e=setTimeout(()=>p(!1),150);return()=>clearTimeout(e)},[n,s]);return u?d.jsx("article",{ref:s,className:x("menu-content",{"menu-content--open":o},t),style:i({left:`${a.x}px`,top:`${a.y}px`,opacity:o?1:0,transition:"opacity 0.15s ease-in-out"},r),role:"menu","aria-orientation":"vertical",onKeyDown:e=>{var t,r;if(!s.current)return;const n=Array.from(s.current.querySelectorAll('[role="menuitem"]:not([disabled])')),a=n.findIndex(e=>e===document.activeElement);switch(e.key){case"ArrowDown":e.preventDefault();null==(t=n[a<n.length-1?a+1:0])||t.focus();break;case"ArrowUp":e.preventDefault();null==(r=n[a>0?a-1:n.length-1])||r.focus();break;case"Escape":e.preventDefault(),l()}},tabIndex:-1,children:h.Children.map(e,e=>h.isValidElement(e)?h.cloneElement(e,{closeMenu:l}):e)}):null},A=({children:e,onClick:t,closeMenu:r,disabled:n=!1,className:a,style:s={}})=>{const l=()=>{n||(t&&t(),r&&r())};return d.jsx("button",{onClick:l,onKeyDown:e=>{n||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),l())},disabled:n,className:x("menu-item",{"menu-item--disabled":n},a),style:s,role:"menuitem",type:"button",tabIndex:n?-1:0,"aria-disabled":n,children:e})},B=({children:e,className:t,style:r={}})=>{const{triggerRef:n,isOpen:a,openMenu:s,closeMenu:l}=O();return d.jsx("section",{ref:n,onClick:()=>{a?l():s()},className:x("menu-trigger",t),style:r,children:h.cloneElement(e,{isOpen:a})})},$=Object.assign(({children:e,className:t,style:r={},position:n="bottom-left"})=>d.jsx(S,{menuPosition:n,children:d.jsx("div",{className:x("menu-container",t),style:r,children:e})}),{Trigger:B,Content:z,Item:A});exports.Button=v,exports.ButtonSelect=({options:e,value:t,onChange:r,disabled:n=!1,multiple:a=!1})=>{const s=e=>Array.isArray(t)?t.includes(e):e===t;return d.jsx("div",{className:"button-select "+(n?"disabled":""),children:e.map(({value:e,child:l})=>d.jsx("button",{className:"button-select-option "+(s(e)?"selected":""),onClick:()=>(e=>{if(n)return;if(!a)return void r(e);const s=Array.isArray(t)?t:[],l=s.includes(e)?s.filter(t=>t!==e):[...s,e];r(l)})(e),disabled:n,type:"button",children:l},e))})},exports.ChevronLeft=f,exports.ChevronRight=b,exports.DOTS=y,exports.Input=e=>{var t=e,{variant:r="primary",type:n="text",label:a,prefix:s,suffix:l,helperText:o,className:u,labelClass:p,helperTextClass:m,onChange:f,id:b,hasError:v,loading:j=!1,disabled:y}=t,w=c(t,["variant","type","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled"]);const N=h.useId(),C=b||`input-${N}`,k=x("form-field",{"has-prefix":!!s,"has-suffix":!!l},{[`variant-${r}`]:r},{loading:j},u);return d.jsxs("article",{className:"input-container",children:[a&&d.jsx("label",{htmlFor:C,className:x("input-label",p),children:a}),d.jsxs("section",{className:x("input-wrapper",{loading:j}),children:[s&&d.jsx("article",{className:"input-prefix",children:s}),d.jsx("input",i({id:C,type:n,className:k,onChange:e=>null==f?void 0:f(e.target.value),disabled:y||j},w)),j?d.jsx("article",{className:"input-suffix",children:d.jsx(g,{})}):l&&d.jsx("article",{className:"input-suffix",children:l})]}),o&&d.jsx("small",{className:x("input-helper-text",m),style:{color:v?"var(--color-danger)":"inherit"},children:o})]})},exports.Menu=$,exports.MenuContent=z,exports.MenuContextProvider=S,exports.MenuItem=A,exports.MenuTrigger=B,exports.Pagination=({currentPage:e,totalPages:t,onPageChange:r,siblingCount:n=1,hidePrevButton:a=!1,hideNextButton:s=!1,size:l="md",variant:i="ghost",color:o="secondary",className:c="",disabled:h=!1,mobile:u=!1})=>{const p=w({currentPage:e,totalPages:t,siblingCount:n});if(0===e||0===t)return null;const m=()=>{e<t&&!h&&r(e+1)},g=()=>{e>1&&!h&&r(e-1)},j=p[p.length-1];return u?d.jsxs("article",{className:x("pagination","pagination--mobile",c),"aria-label":"pagination navigation",children:[!a&&d.jsx(v,{variant:i,color:o,size:l,onClick:g,disabled:1===e||h,"aria-label":"Go to previous page",shape:"square",children:d.jsx(f,{})}),d.jsxs("span",{className:"pagination__page-indicator","aria-live":"polite",children:[e," / ",t," pages"]}),!s&&d.jsx(v,{variant:i,color:o,size:l,onClick:m,disabled:e===j||h,"aria-label":"Go to next page",shape:"square",children:d.jsx(b,{})})]}):d.jsxs("article",{className:x("pagination",c),"aria-label":"pagination navigation",children:[!a&&d.jsx(v,{variant:i,color:o,size:l,onClick:g,disabled:1===e||h,"aria-label":"Go to previous page",shape:"square",children:d.jsx(f,{})}),p.map((n,a)=>n===y?d.jsx(v,{variant:i,color:o,size:l,"aria-label":"More pages",shape:"square",disabled:h,hover:!1,children:"…"},a):d.jsx(v,{variant:n===e?"filled":i,color:n===e?"primary":o,size:l,onClick:()=>!h&&r(n),disabled:h||1===t,"aria-label":n===e?`Current page, page ${n}`:`Go to page ${n}`,"aria-current":n===e?"page":void 0,shape:"square",children:n},a)),!s&&d.jsx(v,{variant:i,color:o,size:l,onClick:m,disabled:e===j||h,"aria-label":"Go to next page",shape:"square",children:d.jsx(b,{})})]})},exports.Select=e=>{var t=e,{variant:r="primary",label:n,prefix:a,suffix:s,helperText:l,className:u,labelClass:p,helperTextClass:m,onChange:f,id:b,hasError:v,loading:y=!1,disabled:w,options:N=[],placeholder:C,children:k}=t,M=c(t,["variant","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","options","placeholder","children"]);const T=h.useId(),P=b||`select-${T}`,E=x("form-field",{"has-prefix":!!a,"has-suffix":!!s||!y},{[`variant-${r}`]:r},{loading:y},u);return d.jsxs("article",{className:"select-container",children:[n&&d.jsx("label",{htmlFor:P,className:x("select-label",p),children:n}),d.jsxs("section",{className:x("select-wrapper",{loading:y}),children:[a&&d.jsx("article",{className:"select-prefix",children:a}),d.jsxs("select",o(i({id:P,className:E,onChange:e=>null==f?void 0:f(e.target.value),disabled:w||y},M),{children:[C&&d.jsx("option",{value:"",disabled:!0,hidden:!0,children:C}),N.length>0?N.map(e=>d.jsx("option",{value:e.value,disabled:e.disabled,children:e.label},e.value)):k]})),y?d.jsx("article",{className:"select-suffix",children:d.jsx(g,{})}):d.jsx("article",{className:"select-suffix",children:s||j})]}),l&&d.jsx("small",{className:x("select-helper-text",m),style:{color:v?"var(--color-danger)":"inherit"},children:l})]})},exports.Spinner=g,exports.Table=P,exports.TableBody=C,exports.TableCell=T,exports.TableFooter=k,exports.TableHeader=N,exports.TableRow=M,exports.Toggle=e=>{var t=e,{color:r="var(--color-primary)",size:n="3.75rem",checked:a=!1,onChange:s,label:l,labelPosition:o="right",className:h}=t,u=c(t,["color","size","checked","onChange","label","labelPosition","className"]);return d.jsxs("label",{className:x("switch-container",o,h),children:[d.jsxs("div",{className:"toggle-switch",style:{"--switch-size":n,"--switch-color":r},children:[d.jsx("input",i({type:"checkbox",role:"switch",checked:a,onChange:e=>null==s?void 0:s(e.target.checked)},u)),d.jsx("span",{className:"slider"})]}),l&&d.jsx("span",{className:"switch-label",children:l})]})},exports.clsx=p,exports.cn=x,exports.mergeClasses=m,exports.useMenuContext=O,exports.usePagination=w;

package/dist/klip-components.es.js

@@ -93,24 +93,10 @@ const Spinner = ({ color = "currentColor", size = 24 }) => {
     /* @__PURE__ */ jsx("g", { className: "spinner_V8m1", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9.5", fill: "none", strokeWidth: "3" }) })
   ] });
 };
-const DEPRECATED_VARIANT_MAP = {
-  primary: { variant: "filled", color: "primary" },
-  secondary: { variant: "filled", color: "secondary" },
-  success: { variant: "filled", color: "success" },
-  danger: { variant: "filled", color: "danger" },
-  warning: { variant: "filled", color: "warning" },
-  info: { variant: "filled", color: "info" },
-  link: { variant: "link", color: "primary" },
-  outline: { variant: "outline", color: "primary" },
-  ghost: { variant: "ghost", color: "primary" }
-};
-const isLegacyVariant = (variant) => {
-  return Object.keys(DEPRECATED_VARIANT_MAP).includes(variant);
-};
 const Button = (_a) => {
   var _b = _a, {
-    variant: variantProp = "filled",
-    color: colorProp = "primary",
+    variant = "filled",
+    color = "primary",
     size = "md",
     shape = "rectangle",
     startIcon,
@@ -133,18 +119,6 @@ const Button = (_a) => {
     "disabled",
     "hover"
   ]);
-  let variant = variantProp;
-  let color = colorProp;
-  if (isLegacyVariant(variantProp)) {
-    if (process.env.NODE_ENV === "development") {
-      console.warn(
-        `[Button] The variant="${variantProp}" API is deprecated and will be removed in a future version. Use variant="${DEPRECATED_VARIANT_MAP[variantProp].variant}" color="${DEPRECATED_VARIANT_MAP[variantProp].color}" instead.`
-      );
-    }
-    const mapped = DEPRECATED_VARIANT_MAP[variantProp];
-    variant = mapped.variant;
-    color = mapped.color;
-  }
   const variantClass = variant === "filled" ? `btn-${color}` : `btn-${variant}-${color}`;
   return /* @__PURE__ */ jsx(
     "button",
@@ -430,7 +404,8 @@ const Pagination = ({
   hidePrevButton = false,
   hideNextButton = false,
   size = "md",
-  variant = "secondary",
+  variant = "ghost",
+  color = "secondary",
   className = "",
   disabled = false,
   mobile = false
@@ -458,6 +433,7 @@ const Pagination = ({
         Button,
         {
           variant,
+          color,
           size,
           onClick: onPrevious,
           disabled: currentPage === 1 || disabled,
@@ -476,6 +452,7 @@ const Pagination = ({
         Button,
         {
           variant,
+          color,
           size,
           onClick: onNext,
           disabled: currentPage === lastPage || disabled,
@@ -491,6 +468,7 @@ const Pagination = ({
       Button,
       {
         variant,
+        color,
         size,
         onClick: onPrevious,
         disabled: currentPage === 1 || disabled,
@@ -505,6 +483,7 @@ const Pagination = ({
           Button,
           {
             variant,
+            color,
             size,
             "aria-label": "More pages",
             shape: "square",
@@ -518,7 +497,8 @@ const Pagination = ({
       return /* @__PURE__ */ jsx(
         Button,
         {
-          variant: pageNumber === currentPage ? "primary" : variant,
+          variant: pageNumber === currentPage ? "filled" : variant,
+          color: pageNumber === currentPage ? "primary" : color,
           size,
           onClick: () => !disabled && onPageChange(pageNumber),
           disabled: disabled || totalPages === 1,
@@ -534,6 +514,7 @@ const Pagination = ({
       Button,
       {
         variant,
+        color,
         size,
         onClick: onNext,
         disabled: currentPage === lastPage || disabled,

package/dist/klip-components.umd.js

@@ -1 +1 @@
-!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KlipComponents={},e.React,e.React)}(this,function(e,t,n){"use strict";var r=Object.defineProperty,a=Object.defineProperties,s=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,c=(e,t,n)=>t in e?r(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,d=(e,t)=>{for(var n in t||(t={}))i.call(t,n)&&c(e,n,t[n]);if(l)for(var n of l(t))o.call(t,n)&&c(e,n,t[n]);return e},u=(e,t)=>a(e,s(t)),h=(e,t)=>{var n={};for(var r in e)i.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&l)for(var r of l(e))t.indexOf(r)<0&&o.call(e,r)&&(n[r]=e[r]);return n};function m(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(n=m(e[t]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function p(){for(var e,t,n=0,r="",a=arguments.length;n<a;n++)(e=arguments[n])&&(t=m(e))&&(r&&(r+=" "),r+=t);return r}function f(...e){const t=e.join(" ").split(" ").filter(Boolean);return[...new Set(t)].join(" ")}function g(...e){return f(p(...e))}const b=({width:e=24,height:n=24})=>t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:n,viewBox:"0 0 24 24",children:t.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m15 6l-6 6l6 6"})}),x=({width:e=24,height:n=24})=>t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:n,viewBox:"0 0 24 24",children:t.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m9 6l6 6l-6 6"})}),v=({color:e="currentColor",size:n=24})=>t.jsxs("svg",{width:n,height:n,stroke:e,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:[t.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        "}),t.jsx("g",{className:"spinner_V8m1",children:t.jsx("circle",{cx:"12",cy:"12",r:"9.5",fill:"none",strokeWidth:"3"})})]}),y={primary:{variant:"filled",color:"primary"},secondary:{variant:"filled",color:"secondary"},success:{variant:"filled",color:"success"},danger:{variant:"filled",color:"danger"},warning:{variant:"filled",color:"warning"},info:{variant:"filled",color:"info"},link:{variant:"link",color:"primary"},outline:{variant:"outline",color:"primary"},ghost:{variant:"ghost",color:"primary"}},j=e=>{var n=e,{variant:r="filled",color:a="primary",size:s="md",shape:l="rectangle",startIcon:i,endIcon:o,className:c="",children:m,loading:p,disabled:f,hover:b=!0}=n,x=h(n,["variant","color","size","shape","startIcon","endIcon","className","children","loading","disabled","hover"]);let j=r,w=a;if((e=>Object.keys(y).includes(e))(r)){process.env.NODE_ENV;const e=y[r];j=e.variant,w=e.color}const N="filled"===j?`btn-${w}`:`btn-${j}-${w}`;return t.jsx("button",u(d({className:g("btn",N,`btn-${s}`,`btn-${l}`,{"btn-loading":p,"btn-no-hover":!b},c),disabled:f||p},x),{children:p?t.jsx(v,{}):t.jsxs(t.Fragment,{children:[i&&t.jsx("span",{className:"btn-icon-start",children:i}),m,o&&t.jsx("span",{className:"btn-icon-end",children:o})]})}))},w=t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",children:t.jsx("path",{fill:"currentColor",d:"M12 14.975q-.2 0-.375-.062T11.3 14.7l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213t-.375.062"})}),N="...",k=({currentPage:e,totalPages:t,siblingCount:r=1})=>n.useMemo(()=>{if(t<=7)return Array.from({length:t},(e,t)=>t+1);const n=Math.max(e-r,1),a=Math.min(e+r,t),s=n>2,l=a<t-1;if(!s&&!l)return Array.from({length:t},(e,t)=>t+1);if(!s&&l){const e=3+2*r;return[...Array.from({length:e},(e,t)=>t+1),N,t]}if(s&&!l){const e=3+2*r;return[1,N,...Array.from({length:e},(n,r)=>t-e+r+1)]}return[1,N,...Array.from({length:a-n+1},(e,t)=>n+t),N,t]},[e,t,r]),C=e=>{var n=e,{className:r="",children:a}=n,s=h(n,["className","children"]);return t.jsx("thead",u(d({className:g("table-header",r)},s),{children:a}))},T=e=>{var n=e,{className:r="",children:a}=n,s=h(n,["className","children"]);return t.jsx("tbody",u(d({className:g("table-body",r)},s),{children:a}))},M=e=>{var n=e,{className:r="",children:a}=n,s=h(n,["className","children"]);return t.jsx("tfoot",u(d({className:g("table-footer",r)},s),{children:a}))},P=e=>{var n=e,{className:r="",selected:a=!1,children:s}=n,l=h(n,["className","selected","children"]);return t.jsx("tr",u(d({className:g("table-row",{"table-row-selected":a},r)},l),{children:s}))},E=e=>{var n=e,{className:r="",header:a=!1,align:s="left",minWidth:l,maxWidth:i,width:o,children:c,style:m}=n,p=h(n,["className","header","align","minWidth","maxWidth","width","children","style"]);const f=a?"th":"td",b=d(d(d(d({},l&&{minWidth:l}),i&&{maxWidth:i}),o&&{width:o}),m);return t.jsx(f,u(d({className:g("table-cell",`table-cell-${s}`,{"table-cell-header":a},r),style:Object.keys(b).length>0?b:m},p),{children:c}))},O=e=>{var n=e,{className:r="",variant:a="default",dense:s=!1,children:l}=n,i=h(n,["className","variant","dense","children"]);const o=t.jsx("table",u(d({className:g("table",`table-${a}`,{"table-dense":s},r)},i),{children:l}));return t.jsx("div",{className:"table-responsive",children:o})};O.Header=C,O.Body=T,O.Footer=M,O.Row=P,O.Cell=E;const S=n.createContext(void 0),z=()=>{const e=n.useContext(S);if(void 0===e)throw new Error("useMenuContext must be used within a MenuContextProvider");return e},A=({children:e,menuPosition:r="bottom-left"})=>{const[a,s]=n.useState(!1),[l,i]=n.useState({x:0,y:0}),o=n.useRef(null),c=n.useRef(null),d=n.useCallback((e,t)=>{const n=10,a=(null==t?void 0:t.width)||200,s=(null==t?void 0:t.height)||150,l=window.innerWidth,i=window.innerHeight;let o=0,c=0;switch(r){case"bottom-left":default:o=e.left,c=e.bottom+n;break;case"bottom-right":o=e.right-a,c=e.bottom+n;break;case"bottom-center":o=e.left+e.width/2-a/2,c=e.bottom+n;break;case"top-left":o=e.left,c=e.top-15-s;break;case"top-right":o=e.right-a,c=e.top-15-s;break;case"top-center":o=e.left+e.width/2-a/2,c=e.top-15-s;break;case"left-top":o=e.left-15-a,c=e.top;break;case"left-bottom":o=e.left-15-a,c=e.bottom-s;break;case"left-center":o=e.left-15-a,c=e.top+e.height/2-s/2;break;case"right-top":o=e.right+n,c=e.top;break;case"right-bottom":o=e.right+n,c=e.bottom-s;break;case"right-center":o=e.right+n,c=e.top+e.height/2-s/2}return o=Math.max(n,Math.min(o,l-a-n)),c=Math.max(n,Math.min(c,i-s-n)),{x:o,y:c}},[r]),u=n.useCallback(()=>{var e;if(!o.current)return;const t=o.current.getBoundingClientRect(),n=null==(e=c.current)?void 0:e.getBoundingClientRect();i(d(t,n))},[d]),h=()=>s(!1);return n.useEffect(()=>{if(a&&o.current){const e=()=>{var e;const t=o.current.getBoundingClientRect(),n=null==(e=c.current)?void 0:e.getBoundingClientRect();i(d(t,n))};e();const t=setTimeout(e,50);return()=>clearTimeout(t)}},[a,d]),n.useEffect(()=>{const e=e=>{c.current&&c.current.contains(e.target)||o.current&&o.current.contains(e.target)||h()};if(a)return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[a]),n.useEffect(()=>{const e=e=>{"Escape"===e.key&&a&&h()};if(a)return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[a]),t.jsx(S.Provider,{value:{isOpen:a,position:l,menuPosition:r,triggerRef:o,contentRef:c,openMenu:()=>{o.current&&s(!0)},closeMenu:h,repositionMenu:u},children:e})},B=({children:e,className:r,style:a={}})=>{const{isOpen:s,position:l,contentRef:i,closeMenu:o}=z(),[c,u]=n.useState(!1),[h,m]=n.useState(!1);n.useEffect(()=>{if(s){m(!0);const e=setTimeout(()=>{if(u(!0),i.current){const e=i.current.querySelector('[role="menuitem"]:not([disabled])');e&&e.focus()}},10);return()=>clearTimeout(e)}u(!1);const e=setTimeout(()=>m(!1),150);return()=>clearTimeout(e)},[s,i]);return h?t.jsx("article",{ref:i,className:g("menu-content",{"menu-content--open":c},r),style:d({left:`${l.x}px`,top:`${l.y}px`,opacity:c?1:0,transition:"opacity 0.15s ease-in-out"},a),role:"menu","aria-orientation":"vertical",onKeyDown:e=>{var t,n;if(!i.current)return;const r=Array.from(i.current.querySelectorAll('[role="menuitem"]:not([disabled])')),a=r.findIndex(e=>e===document.activeElement);switch(e.key){case"ArrowDown":e.preventDefault();null==(t=r[a<r.length-1?a+1:0])||t.focus();break;case"ArrowUp":e.preventDefault();null==(n=r[a>0?a-1:r.length-1])||n.focus();break;case"Escape":e.preventDefault(),o()}},tabIndex:-1,children:n.Children.map(e,e=>n.isValidElement(e)?n.cloneElement(e,{closeMenu:o}):e)}):null},R=({children:e,onClick:n,closeMenu:r,disabled:a=!1,className:s,style:l={}})=>{const i=()=>{a||(n&&n(),r&&r())};return t.jsx("button",{onClick:i,onKeyDown:e=>{a||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),i())},disabled:a,className:g("menu-item",{"menu-item--disabled":a},s),style:l,role:"menuitem",type:"button",tabIndex:a?-1:0,"aria-disabled":a,children:e})},$=({children:e,className:r,style:a={}})=>{const{triggerRef:s,isOpen:l,openMenu:i,closeMenu:o}=z();return t.jsx("section",{ref:s,onClick:()=>{l?o():i()},className:g("menu-trigger",r),style:a,children:n.cloneElement(e,{isOpen:l})})},q=Object.assign(({children:e,className:n,style:r={},position:a="bottom-left"})=>t.jsx(A,{menuPosition:a,children:t.jsx("div",{className:g("menu-container",n),style:r,children:e})}),{Trigger:$,Content:B,Item:R});e.Button=j,e.ButtonSelect=({options:e,value:n,onChange:r,disabled:a=!1,multiple:s=!1})=>{const l=e=>Array.isArray(n)?n.includes(e):e===n;return t.jsx("div",{className:"button-select "+(a?"disabled":""),children:e.map(({value:e,child:i})=>t.jsx("button",{className:"button-select-option "+(l(e)?"selected":""),onClick:()=>(e=>{if(a)return;if(!s)return void r(e);const t=Array.isArray(n)?n:[],l=t.includes(e)?t.filter(t=>t!==e):[...t,e];r(l)})(e),disabled:a,type:"button",children:i},e))})},e.ChevronLeft=b,e.ChevronRight=x,e.DOTS=N,e.Input=e=>{var r=e,{variant:a="primary",type:s="text",label:l,prefix:i,suffix:o,helperText:c,className:u,labelClass:m,helperTextClass:p,onChange:f,id:b,hasError:x,loading:y=!1,disabled:j}=r,w=h(r,["variant","type","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled"]);const N=n.useId(),k=b||`input-${N}`,C=g("form-field",{"has-prefix":!!i,"has-suffix":!!o},{[`variant-${a}`]:a},{loading:y},u);return t.jsxs("article",{className:"input-container",children:[l&&t.jsx("label",{htmlFor:k,className:g("input-label",m),children:l}),t.jsxs("section",{className:g("input-wrapper",{loading:y}),children:[i&&t.jsx("article",{className:"input-prefix",children:i}),t.jsx("input",d({id:k,type:s,className:C,onChange:e=>null==f?void 0:f(e.target.value),disabled:j||y},w)),y?t.jsx("article",{className:"input-suffix",children:t.jsx(v,{})}):o&&t.jsx("article",{className:"input-suffix",children:o})]}),c&&t.jsx("small",{className:g("input-helper-text",p),style:{color:x?"var(--color-danger)":"inherit"},children:c})]})},e.Menu=q,e.MenuContent=B,e.MenuContextProvider=A,e.MenuItem=R,e.MenuTrigger=$,e.Pagination=({currentPage:e,totalPages:n,onPageChange:r,siblingCount:a=1,hidePrevButton:s=!1,hideNextButton:l=!1,size:i="md",variant:o="secondary",className:c="",disabled:d=!1,mobile:u=!1})=>{const h=k({currentPage:e,totalPages:n,siblingCount:a});if(0===e||0===n)return null;const m=()=>{e<n&&!d&&r(e+1)},p=()=>{e>1&&!d&&r(e-1)},f=h[h.length-1];return u?t.jsxs("article",{className:g("pagination","pagination--mobile",c),"aria-label":"pagination navigation",children:[!s&&t.jsx(j,{variant:o,size:i,onClick:p,disabled:1===e||d,"aria-label":"Go to previous page",shape:"square",children:t.jsx(b,{})}),t.jsxs("span",{className:"pagination__page-indicator","aria-live":"polite",children:[e," / ",n," pages"]}),!l&&t.jsx(j,{variant:o,size:i,onClick:m,disabled:e===f||d,"aria-label":"Go to next page",shape:"square",children:t.jsx(x,{})})]}):t.jsxs("article",{className:g("pagination",c),"aria-label":"pagination navigation",children:[!s&&t.jsx(j,{variant:o,size:i,onClick:p,disabled:1===e||d,"aria-label":"Go to previous page",shape:"square",children:t.jsx(b,{})}),h.map((a,s)=>a===N?t.jsx(j,{variant:o,size:i,"aria-label":"More pages",shape:"square",disabled:d,hover:!1,children:"…"},s):t.jsx(j,{variant:a===e?"primary":o,size:i,onClick:()=>!d&&r(a),disabled:d||1===n,"aria-label":a===e?`Current page, page ${a}`:`Go to page ${a}`,"aria-current":a===e?"page":void 0,shape:"square",children:a},s)),!l&&t.jsx(j,{variant:o,size:i,onClick:m,disabled:e===f||d,"aria-label":"Go to next page",shape:"square",children:t.jsx(x,{})})]})},e.Select=e=>{var r=e,{variant:a="primary",label:s,prefix:l,suffix:i,helperText:o,className:c,labelClass:m,helperTextClass:p,onChange:f,id:b,hasError:x,loading:y=!1,disabled:j,options:N=[],placeholder:k,children:C}=r,T=h(r,["variant","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","options","placeholder","children"]);const M=n.useId(),P=b||`select-${M}`,E=g("form-field",{"has-prefix":!!l,"has-suffix":!!i||!y},{[`variant-${a}`]:a},{loading:y},c);return t.jsxs("article",{className:"select-container",children:[s&&t.jsx("label",{htmlFor:P,className:g("select-label",m),children:s}),t.jsxs("section",{className:g("select-wrapper",{loading:y}),children:[l&&t.jsx("article",{className:"select-prefix",children:l}),t.jsxs("select",u(d({id:P,className:E,onChange:e=>null==f?void 0:f(e.target.value),disabled:j||y},T),{children:[k&&t.jsx("option",{value:"",disabled:!0,hidden:!0,children:k}),N.length>0?N.map(e=>t.jsx("option",{value:e.value,disabled:e.disabled,children:e.label},e.value)):C]})),y?t.jsx("article",{className:"select-suffix",children:t.jsx(v,{})}):t.jsx("article",{className:"select-suffix",children:i||w})]}),o&&t.jsx("small",{className:g("select-helper-text",p),style:{color:x?"var(--color-danger)":"inherit"},children:o})]})},e.Spinner=v,e.Table=O,e.TableBody=T,e.TableCell=E,e.TableFooter=M,e.TableHeader=C,e.TableRow=P,e.Toggle=e=>{var n=e,{color:r="var(--color-primary)",size:a="3.75rem",checked:s=!1,onChange:l,label:i,labelPosition:o="right",className:c}=n,u=h(n,["color","size","checked","onChange","label","labelPosition","className"]);return t.jsxs("label",{className:g("switch-container",o,c),children:[t.jsxs("div",{className:"toggle-switch",style:{"--switch-size":a,"--switch-color":r},children:[t.jsx("input",d({type:"checkbox",role:"switch",checked:s,onChange:e=>null==l?void 0:l(e.target.checked)},u)),t.jsx("span",{className:"slider"})]}),i&&t.jsx("span",{className:"switch-label",children:i})]})},e.clsx=p,e.cn=g,e.mergeClasses=f,e.useMenuContext=z,e.usePagination=k,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("react/jsx-runtime"),require("react")):"function"==typeof define&&define.amd?define(["exports","react/jsx-runtime","react"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).KlipComponents={},e.React,e.React)}(this,function(e,t,n){"use strict";var r=Object.defineProperty,a=Object.defineProperties,s=Object.getOwnPropertyDescriptors,l=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,o=Object.prototype.propertyIsEnumerable,c=(e,t,n)=>t in e?r(e,t,{enumerable:!0,configurable:!0,writable:!0,value:n}):e[t]=n,d=(e,t)=>{for(var n in t||(t={}))i.call(t,n)&&c(e,n,t[n]);if(l)for(var n of l(t))o.call(t,n)&&c(e,n,t[n]);return e},h=(e,t)=>a(e,s(t)),u=(e,t)=>{var n={};for(var r in e)i.call(e,r)&&t.indexOf(r)<0&&(n[r]=e[r]);if(null!=e&&l)for(var r of l(e))t.indexOf(r)<0&&o.call(e,r)&&(n[r]=e[r]);return n};function m(e){var t,n,r="";if("string"==typeof e||"number"==typeof e)r+=e;else if("object"==typeof e)if(Array.isArray(e)){var a=e.length;for(t=0;t<a;t++)e[t]&&(n=m(e[t]))&&(r&&(r+=" "),r+=n)}else for(n in e)e[n]&&(r&&(r+=" "),r+=n);return r}function p(){for(var e,t,n=0,r="",a=arguments.length;n<a;n++)(e=arguments[n])&&(t=m(e))&&(r&&(r+=" "),r+=t);return r}function f(...e){const t=e.join(" ").split(" ").filter(Boolean);return[...new Set(t)].join(" ")}function b(...e){return f(p(...e))}const g=({width:e=24,height:n=24})=>t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:n,viewBox:"0 0 24 24",children:t.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m15 6l-6 6l6 6"})}),x=({width:e=24,height:n=24})=>t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:n,viewBox:"0 0 24 24",children:t.jsx("path",{fill:"none",stroke:"currentColor",strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:"2",d:"m9 6l6 6l-6 6"})}),v=({color:e="currentColor",size:n=24})=>t.jsxs("svg",{width:n,height:n,stroke:e,viewBox:"0 0 24 24",xmlns:"http://www.w3.org/2000/svg",children:[t.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        "}),t.jsx("g",{className:"spinner_V8m1",children:t.jsx("circle",{cx:"12",cy:"12",r:"9.5",fill:"none",strokeWidth:"3"})})]}),j=e=>{var n=e,{variant:r="filled",color:a="primary",size:s="md",shape:l="rectangle",startIcon:i,endIcon:o,className:c="",children:m,loading:p,disabled:f,hover:g=!0}=n,x=u(n,["variant","color","size","shape","startIcon","endIcon","className","children","loading","disabled","hover"]);const j="filled"===r?`btn-${a}`:`btn-${r}-${a}`;return t.jsx("button",h(d({className:b("btn",j,`btn-${s}`,`btn-${l}`,{"btn-loading":p,"btn-no-hover":!g},c),disabled:f||p},x),{children:p?t.jsx(v,{}):t.jsxs(t.Fragment,{children:[i&&t.jsx("span",{className:"btn-icon-start",children:i}),m,o&&t.jsx("span",{className:"btn-icon-end",children:o})]})}))},y=t.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:"16",height:"16",viewBox:"0 0 24 24",children:t.jsx("path",{fill:"currentColor",d:"M12 14.975q-.2 0-.375-.062T11.3 14.7l-4.6-4.6q-.275-.275-.275-.7t.275-.7t.7-.275t.7.275l3.9 3.9l3.9-3.9q.275-.275.7-.275t.7.275t.275.7t-.275.7l-4.6 4.6q-.15.15-.325.213t-.375.062"})}),w="...",N=({currentPage:e,totalPages:t,siblingCount:r=1})=>n.useMemo(()=>{if(t<=7)return Array.from({length:t},(e,t)=>t+1);const n=Math.max(e-r,1),a=Math.min(e+r,t),s=n>2,l=a<t-1;if(!s&&!l)return Array.from({length:t},(e,t)=>t+1);if(!s&&l){const e=3+2*r;return[...Array.from({length:e},(e,t)=>t+1),w,t]}if(s&&!l){const e=3+2*r;return[1,w,...Array.from({length:e},(n,r)=>t-e+r+1)]}return[1,w,...Array.from({length:a-n+1},(e,t)=>n+t),w,t]},[e,t,r]),C=e=>{var n=e,{className:r="",children:a}=n,s=u(n,["className","children"]);return t.jsx("thead",h(d({className:b("table-header",r)},s),{children:a}))},k=e=>{var n=e,{className:r="",children:a}=n,s=u(n,["className","children"]);return t.jsx("tbody",h(d({className:b("table-body",r)},s),{children:a}))},T=e=>{var n=e,{className:r="",children:a}=n,s=u(n,["className","children"]);return t.jsx("tfoot",h(d({className:b("table-footer",r)},s),{children:a}))},M=e=>{var n=e,{className:r="",selected:a=!1,children:s}=n,l=u(n,["className","selected","children"]);return t.jsx("tr",h(d({className:b("table-row",{"table-row-selected":a},r)},l),{children:s}))},P=e=>{var n=e,{className:r="",header:a=!1,align:s="left",minWidth:l,maxWidth:i,width:o,children:c,style:m}=n,p=u(n,["className","header","align","minWidth","maxWidth","width","children","style"]);const f=a?"th":"td",g=d(d(d(d({},l&&{minWidth:l}),i&&{maxWidth:i}),o&&{width:o}),m);return t.jsx(f,h(d({className:b("table-cell",`table-cell-${s}`,{"table-cell-header":a},r),style:Object.keys(g).length>0?g:m},p),{children:c}))},E=e=>{var n=e,{className:r="",variant:a="default",dense:s=!1,children:l}=n,i=u(n,["className","variant","dense","children"]);const o=t.jsx("table",h(d({className:b("table",`table-${a}`,{"table-dense":s},r)},i),{children:l}));return t.jsx("div",{className:"table-responsive",children:o})};E.Header=C,E.Body=k,E.Footer=T,E.Row=M,E.Cell=P;const O=n.createContext(void 0),S=()=>{const e=n.useContext(O);if(void 0===e)throw new Error("useMenuContext must be used within a MenuContextProvider");return e},z=({children:e,menuPosition:r="bottom-left"})=>{const[a,s]=n.useState(!1),[l,i]=n.useState({x:0,y:0}),o=n.useRef(null),c=n.useRef(null),d=n.useCallback((e,t)=>{const n=10,a=(null==t?void 0:t.width)||200,s=(null==t?void 0:t.height)||150,l=window.innerWidth,i=window.innerHeight;let o=0,c=0;switch(r){case"bottom-left":default:o=e.left,c=e.bottom+n;break;case"bottom-right":o=e.right-a,c=e.bottom+n;break;case"bottom-center":o=e.left+e.width/2-a/2,c=e.bottom+n;break;case"top-left":o=e.left,c=e.top-15-s;break;case"top-right":o=e.right-a,c=e.top-15-s;break;case"top-center":o=e.left+e.width/2-a/2,c=e.top-15-s;break;case"left-top":o=e.left-15-a,c=e.top;break;case"left-bottom":o=e.left-15-a,c=e.bottom-s;break;case"left-center":o=e.left-15-a,c=e.top+e.height/2-s/2;break;case"right-top":o=e.right+n,c=e.top;break;case"right-bottom":o=e.right+n,c=e.bottom-s;break;case"right-center":o=e.right+n,c=e.top+e.height/2-s/2}return o=Math.max(n,Math.min(o,l-a-n)),c=Math.max(n,Math.min(c,i-s-n)),{x:o,y:c}},[r]),h=n.useCallback(()=>{var e;if(!o.current)return;const t=o.current.getBoundingClientRect(),n=null==(e=c.current)?void 0:e.getBoundingClientRect();i(d(t,n))},[d]),u=()=>s(!1);return n.useEffect(()=>{if(a&&o.current){const e=()=>{var e;const t=o.current.getBoundingClientRect(),n=null==(e=c.current)?void 0:e.getBoundingClientRect();i(d(t,n))};e();const t=setTimeout(e,50);return()=>clearTimeout(t)}},[a,d]),n.useEffect(()=>{const e=e=>{c.current&&c.current.contains(e.target)||o.current&&o.current.contains(e.target)||u()};if(a)return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[a]),n.useEffect(()=>{const e=e=>{"Escape"===e.key&&a&&u()};if(a)return document.addEventListener("keydown",e),()=>document.removeEventListener("keydown",e)},[a]),t.jsx(O.Provider,{value:{isOpen:a,position:l,menuPosition:r,triggerRef:o,contentRef:c,openMenu:()=>{o.current&&s(!0)},closeMenu:u,repositionMenu:h},children:e})},A=({children:e,className:r,style:a={}})=>{const{isOpen:s,position:l,contentRef:i,closeMenu:o}=S(),[c,h]=n.useState(!1),[u,m]=n.useState(!1);n.useEffect(()=>{if(s){m(!0);const e=setTimeout(()=>{if(h(!0),i.current){const e=i.current.querySelector('[role="menuitem"]:not([disabled])');e&&e.focus()}},10);return()=>clearTimeout(e)}h(!1);const e=setTimeout(()=>m(!1),150);return()=>clearTimeout(e)},[s,i]);return u?t.jsx("article",{ref:i,className:b("menu-content",{"menu-content--open":c},r),style:d({left:`${l.x}px`,top:`${l.y}px`,opacity:c?1:0,transition:"opacity 0.15s ease-in-out"},a),role:"menu","aria-orientation":"vertical",onKeyDown:e=>{var t,n;if(!i.current)return;const r=Array.from(i.current.querySelectorAll('[role="menuitem"]:not([disabled])')),a=r.findIndex(e=>e===document.activeElement);switch(e.key){case"ArrowDown":e.preventDefault();null==(t=r[a<r.length-1?a+1:0])||t.focus();break;case"ArrowUp":e.preventDefault();null==(n=r[a>0?a-1:r.length-1])||n.focus();break;case"Escape":e.preventDefault(),o()}},tabIndex:-1,children:n.Children.map(e,e=>n.isValidElement(e)?n.cloneElement(e,{closeMenu:o}):e)}):null},B=({children:e,onClick:n,closeMenu:r,disabled:a=!1,className:s,style:l={}})=>{const i=()=>{a||(n&&n(),r&&r())};return t.jsx("button",{onClick:i,onKeyDown:e=>{a||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),i())},disabled:a,className:b("menu-item",{"menu-item--disabled":a},s),style:l,role:"menuitem",type:"button",tabIndex:a?-1:0,"aria-disabled":a,children:e})},R=({children:e,className:r,style:a={}})=>{const{triggerRef:s,isOpen:l,openMenu:i,closeMenu:o}=S();return t.jsx("section",{ref:s,onClick:()=>{l?o():i()},className:b("menu-trigger",r),style:a,children:n.cloneElement(e,{isOpen:l})})},$=Object.assign(({children:e,className:n,style:r={},position:a="bottom-left"})=>t.jsx(z,{menuPosition:a,children:t.jsx("div",{className:b("menu-container",n),style:r,children:e})}),{Trigger:R,Content:A,Item:B});e.Button=j,e.ButtonSelect=({options:e,value:n,onChange:r,disabled:a=!1,multiple:s=!1})=>{const l=e=>Array.isArray(n)?n.includes(e):e===n;return t.jsx("div",{className:"button-select "+(a?"disabled":""),children:e.map(({value:e,child:i})=>t.jsx("button",{className:"button-select-option "+(l(e)?"selected":""),onClick:()=>(e=>{if(a)return;if(!s)return void r(e);const t=Array.isArray(n)?n:[],l=t.includes(e)?t.filter(t=>t!==e):[...t,e];r(l)})(e),disabled:a,type:"button",children:i},e))})},e.ChevronLeft=g,e.ChevronRight=x,e.DOTS=w,e.Input=e=>{var r=e,{variant:a="primary",type:s="text",label:l,prefix:i,suffix:o,helperText:c,className:h,labelClass:m,helperTextClass:p,onChange:f,id:g,hasError:x,loading:j=!1,disabled:y}=r,w=u(r,["variant","type","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled"]);const N=n.useId(),C=g||`input-${N}`,k=b("form-field",{"has-prefix":!!i,"has-suffix":!!o},{[`variant-${a}`]:a},{loading:j},h);return t.jsxs("article",{className:"input-container",children:[l&&t.jsx("label",{htmlFor:C,className:b("input-label",m),children:l}),t.jsxs("section",{className:b("input-wrapper",{loading:j}),children:[i&&t.jsx("article",{className:"input-prefix",children:i}),t.jsx("input",d({id:C,type:s,className:k,onChange:e=>null==f?void 0:f(e.target.value),disabled:y||j},w)),j?t.jsx("article",{className:"input-suffix",children:t.jsx(v,{})}):o&&t.jsx("article",{className:"input-suffix",children:o})]}),c&&t.jsx("small",{className:b("input-helper-text",p),style:{color:x?"var(--color-danger)":"inherit"},children:c})]})},e.Menu=$,e.MenuContent=A,e.MenuContextProvider=z,e.MenuItem=B,e.MenuTrigger=R,e.Pagination=({currentPage:e,totalPages:n,onPageChange:r,siblingCount:a=1,hidePrevButton:s=!1,hideNextButton:l=!1,size:i="md",variant:o="ghost",color:c="secondary",className:d="",disabled:h=!1,mobile:u=!1})=>{const m=N({currentPage:e,totalPages:n,siblingCount:a});if(0===e||0===n)return null;const p=()=>{e<n&&!h&&r(e+1)},f=()=>{e>1&&!h&&r(e-1)},v=m[m.length-1];return u?t.jsxs("article",{className:b("pagination","pagination--mobile",d),"aria-label":"pagination navigation",children:[!s&&t.jsx(j,{variant:o,color:c,size:i,onClick:f,disabled:1===e||h,"aria-label":"Go to previous page",shape:"square",children:t.jsx(g,{})}),t.jsxs("span",{className:"pagination__page-indicator","aria-live":"polite",children:[e," / ",n," pages"]}),!l&&t.jsx(j,{variant:o,color:c,size:i,onClick:p,disabled:e===v||h,"aria-label":"Go to next page",shape:"square",children:t.jsx(x,{})})]}):t.jsxs("article",{className:b("pagination",d),"aria-label":"pagination navigation",children:[!s&&t.jsx(j,{variant:o,color:c,size:i,onClick:f,disabled:1===e||h,"aria-label":"Go to previous page",shape:"square",children:t.jsx(g,{})}),m.map((a,s)=>a===w?t.jsx(j,{variant:o,color:c,size:i,"aria-label":"More pages",shape:"square",disabled:h,hover:!1,children:"…"},s):t.jsx(j,{variant:a===e?"filled":o,color:a===e?"primary":c,size:i,onClick:()=>!h&&r(a),disabled:h||1===n,"aria-label":a===e?`Current page, page ${a}`:`Go to page ${a}`,"aria-current":a===e?"page":void 0,shape:"square",children:a},s)),!l&&t.jsx(j,{variant:o,color:c,size:i,onClick:p,disabled:e===v||h,"aria-label":"Go to next page",shape:"square",children:t.jsx(x,{})})]})},e.Select=e=>{var r=e,{variant:a="primary",label:s,prefix:l,suffix:i,helperText:o,className:c,labelClass:m,helperTextClass:p,onChange:f,id:g,hasError:x,loading:j=!1,disabled:w,options:N=[],placeholder:C,children:k}=r,T=u(r,["variant","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","options","placeholder","children"]);const M=n.useId(),P=g||`select-${M}`,E=b("form-field",{"has-prefix":!!l,"has-suffix":!!i||!j},{[`variant-${a}`]:a},{loading:j},c);return t.jsxs("article",{className:"select-container",children:[s&&t.jsx("label",{htmlFor:P,className:b("select-label",m),children:s}),t.jsxs("section",{className:b("select-wrapper",{loading:j}),children:[l&&t.jsx("article",{className:"select-prefix",children:l}),t.jsxs("select",h(d({id:P,className:E,onChange:e=>null==f?void 0:f(e.target.value),disabled:w||j},T),{children:[C&&t.jsx("option",{value:"",disabled:!0,hidden:!0,children:C}),N.length>0?N.map(e=>t.jsx("option",{value:e.value,disabled:e.disabled,children:e.label},e.value)):k]})),j?t.jsx("article",{className:"select-suffix",children:t.jsx(v,{})}):t.jsx("article",{className:"select-suffix",children:i||y})]}),o&&t.jsx("small",{className:b("select-helper-text",p),style:{color:x?"var(--color-danger)":"inherit"},children:o})]})},e.Spinner=v,e.Table=E,e.TableBody=k,e.TableCell=P,e.TableFooter=T,e.TableHeader=C,e.TableRow=M,e.Toggle=e=>{var n=e,{color:r="var(--color-primary)",size:a="3.75rem",checked:s=!1,onChange:l,label:i,labelPosition:o="right",className:c}=n,h=u(n,["color","size","checked","onChange","label","labelPosition","className"]);return t.jsxs("label",{className:b("switch-container",o,c),children:[t.jsxs("div",{className:"toggle-switch",style:{"--switch-size":a,"--switch-color":r},children:[t.jsx("input",d({type:"checkbox",role:"switch",checked:s,onChange:e=>null==l?void 0:l(e.target.checked)},h)),t.jsx("span",{className:"slider"})]}),i&&t.jsx("span",{className:"switch-label",children:i})]})},e.clsx=p,e.cn=b,e.mergeClasses=f,e.useMenuContext=S,e.usePagination=N,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "klip-components",
   "private": false,
-  "version": "0.18.2",
+  "version": "0.19.0",
   "description": "A collection of reusable React components for Klip.",
   "type": "module",
   "main": "dist/klip-components.cjs.js",