klip-components 0.22.1 → 0.23.0

package/dist/index.d.ts

@@ -33,7 +33,7 @@ export declare interface BorderRadius {
  * // Link button
  * <Button variant="link" color="primary">Learn more</Button>
  */
-export declare const Button: default_2.FC<ButtonProps>;
+export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
 
 /** Color type for semantic color options */
 export declare type ButtonColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
@@ -164,7 +164,7 @@ export declare type HtmlTextArea = Omit<default_2.TextareaHTMLAttributes<HTMLTex
  * A utility type to extract valid HTML attributes for an input element,
  * while omitting props that are explicitly handled by the Toggle component.
  */
-declare type HtmlToggle = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'checked' | 'onChange'>;
+declare type HtmlToggle = Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'checked' | 'onChange'>;
 
 /**
  * A versatile input component with support for variants, labels, prefixes, and suffixes.
@@ -226,7 +226,7 @@ declare type HtmlToggle = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'typ
  *   />
  * );
  */
-export declare const Input: default_2.FC<InputProps>;
+export declare const Input: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
 
 export declare interface InputProps extends HtmlInput {
     /** Callback function invoked when the input value changes */
@@ -447,7 +447,7 @@ declare interface Props_2 {
  *   );
  * };
  */
-declare const Range_2: default_2.FC<RangeProps>;
+declare const Range_2: default_2.ForwardRefExoticComponent<RangeProps & default_2.RefAttributes<HTMLInputElement>>;
 export { Range_2 as Range }
 
 export declare interface RangeProps extends HtmlRange {
@@ -495,7 +495,7 @@ export declare interface RangeProps extends HtmlRange {
 
 export declare type RangeVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'ghost';
 
-export declare const Select: default_2.FC<SelectProps>;
+export declare const Select: default_2.ForwardRefExoticComponent<SelectProps & default_2.RefAttributes<HTMLSelectElement>>;
 
 export declare interface SelectOption {
     value: string;
@@ -760,7 +760,7 @@ export declare interface TableRowProps extends default_2.HTMLAttributes<HTMLTabl
  *   />
  * );
  */
-export declare const TextArea: default_2.FC<TextAreaProps>;
+export declare const TextArea: default_2.ForwardRefExoticComponent<TextAreaProps & default_2.RefAttributes<HTMLTextAreaElement>>;
 
 export declare interface TextAreaProps extends HtmlTextArea {
     /** Callback function invoked when the textarea value changes */
@@ -850,7 +850,7 @@ export declare type ThemeOverride = {
  *   );
  * };
  */
-export declare const Toggle: React.FC<ToggleProps>;
+export declare const Toggle: default_2.ForwardRefExoticComponent<ToggleProps & default_2.RefAttributes<HTMLInputElement>>;
 
 export declare interface ToggleProps extends HtmlToggle {
     /** Color of the toggle when in the "on" state. */

package/dist/klip-components.cjs.js

@@ -1 +1 @@
-"use strict";var e=Object.defineProperty,a=Object.defineProperties,r=Object.getOwnPropertyDescriptors,t=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,n=(a,r,t)=>r in a?e(a,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[r]=t,i=(e,a)=>{for(var r in a||(a={}))s.call(a,r)&&n(e,r,a[r]);if(t)for(var r of t(a))l.call(a,r)&&n(e,r,a[r]);return e},o=(e,t)=>a(e,r(t)),c=(e,a)=>{var r={};for(var n in e)s.call(e,n)&&a.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&t)for(var n of t(e))a.indexOf(n)<0&&l.call(e,n)&&(r[n]=e[n]);return r};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),h=require("react");function u(e){var a,r,t="";if("string"==typeof e||"number"==typeof e)t+=e;else if("object"==typeof e)if(Array.isArray(e)){var s=e.length;for(a=0;a<s;a++)e[a]&&(r=u(e[a]))&&(t&&(t+=" "),t+=r)}else for(r in e)e[r]&&(t&&(t+=" "),t+=r);return t}function p(){for(var e,a,r=0,t="",s=arguments.length;r<s;r++)(e=arguments[r])&&(a=u(e))&&(t&&(t+=" "),t+=a);return t}function m(...e){const a=e.join(" ").split(" ").filter(Boolean);return[...new Set(a)].join(" ")}function x(...e){return m(p(...e))}const g=({width:e=24,height:a=24})=>d.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:a,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:a=24})=>d.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:a,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"})}),f=({color:e="currentColor",size:a=24})=>d.jsxs("svg",{width:a,height:a,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 a=e,{variant:r="filled",color:t="primary",size:s="md",shape:l="rectangle",startIcon:n,endIcon:h,className:u="",children:p,loading:m,disabled:g,hover:b=!0,dark:v=!1}=a,j=c(a,["variant","color","size","shape","startIcon","endIcon","className","children","loading","disabled","hover","dark"]);const y="filled"===r?`btn-${t}`:`btn-${r}-${t}`;return d.jsx("button",o(i({className:x("btn",y,`btn-${s}`,`btn-${l}`,{"btn-loading":m,"btn-no-hover":!b,dark:v},u),disabled:g||m},j),{children:m?d.jsx(f,{}):d.jsxs(d.Fragment,{children:[n&&d.jsx("span",{className:"btn-icon-start",children:n}),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="...",N=({currentPage:e,totalPages:a,siblingCount:r=1})=>h.useMemo(()=>{if(a<=7)return Array.from({length:a},(e,a)=>a+1);const t=Math.max(e-r,1),s=Math.min(e+r,a),l=t>2,n=s<a-1;if(!l&&!n)return Array.from({length:a},(e,a)=>a+1);if(!l&&n){const e=3+2*r;return[...Array.from({length:e},(e,a)=>a+1),y,a]}if(l&&!n){const e=3+2*r;return[1,y,...Array.from({length:e},(r,t)=>a-e+t+1)]}return[1,y,...Array.from({length:s-t+1},(e,a)=>t+a),y,a]},[e,a,r]),k=e=>{var a=e,{className:r="",children:t}=a,s=c(a,["className","children"]);return d.jsx("thead",o(i({className:x("table-header",r)},s),{children:t}))},w=e=>{var a=e,{className:r="",children:t}=a,s=c(a,["className","children"]);return d.jsx("tbody",o(i({className:x("table-body",r)},s),{children:t}))},C=e=>{var a=e,{className:r="",children:t}=a,s=c(a,["className","children"]);return d.jsx("tfoot",o(i({className:x("table-footer",r)},s),{children:t}))},T=e=>{var a=e,{className:r="",selected:t=!1,children:s}=a,l=c(a,["className","selected","children"]);return d.jsx("tr",o(i({className:x("table-row",{"table-row-selected":t},r)},l),{children:s}))},M=e=>{var a=e,{className:r="",header:t=!1,align:s="left",minWidth:l,maxWidth:n,width:h,children:u,style:p}=a,m=c(a,["className","header","align","minWidth","maxWidth","width","children","style"]);const g=t?"th":"td",b=i(i(i(i({},l&&{minWidth:l}),n&&{maxWidth:n}),h&&{width:h}),p);return d.jsx(g,o(i({className:x("table-cell",`table-cell-${s}`,{"table-cell-header":t},r),style:Object.keys(b).length>0?b:p},m),{children:u}))},O=e=>{var a=e,{className:r="",variant:t="default",dense:s=!1,children:l}=a,n=c(a,["className","variant","dense","children"]);const h=d.jsx("table",o(i({className:x("table",`table-${t}`,{"table-dense":s},r)},n),{children:l}));return d.jsx("div",{className:"table-responsive",children:h})};O.Header=k,O.Body=w,O.Footer=C,O.Row=T,O.Cell=M;const E=h.createContext(void 0),$=()=>{const e=h.useContext(E);if(void 0===e)throw new Error("useMenuContext must be used within a MenuContextProvider");return e},P=({children:e,menuPosition:a="bottom-left"})=>{const[r,t]=h.useState(!1),[s,l]=h.useState({x:0,y:0}),n=h.useRef(null),i=h.useRef(null),o=h.useCallback((e,r)=>{const t=10,s=(null==r?void 0:r.width)||200,l=(null==r?void 0:r.height)||150,n=window.innerWidth,i=window.innerHeight;let o=0,c=0;switch(a){case"bottom-left":default:o=e.left,c=e.bottom+t;break;case"bottom-right":o=e.right-s,c=e.bottom+t;break;case"bottom-center":o=e.left+e.width/2-s/2,c=e.bottom+t;break;case"top-left":o=e.left,c=e.top-15-l;break;case"top-right":o=e.right-s,c=e.top-15-l;break;case"top-center":o=e.left+e.width/2-s/2,c=e.top-15-l;break;case"left-top":o=e.left-15-s,c=e.top;break;case"left-bottom":o=e.left-15-s,c=e.bottom-l;break;case"left-center":o=e.left-15-s,c=e.top+e.height/2-l/2;break;case"right-top":o=e.right+t,c=e.top;break;case"right-bottom":o=e.right+t,c=e.bottom-l;break;case"right-center":o=e.right+t,c=e.top+e.height/2-l/2}return o=Math.max(t,Math.min(o,n-s-t)),c=Math.max(t,Math.min(c,i-l-t)),{x:o,y:c}},[a]),c=h.useCallback(()=>{var e;if(!n.current)return;const a=n.current.getBoundingClientRect(),r=null==(e=i.current)?void 0:e.getBoundingClientRect();l(o(a,r))},[o]),u=()=>t(!1);return h.useEffect(()=>{if(r&&n.current){const e=()=>{var e;const a=n.current.getBoundingClientRect(),r=null==(e=i.current)?void 0:e.getBoundingClientRect();l(o(a,r))};e();const a=setTimeout(e,50);return()=>clearTimeout(a)}},[r,o]),h.useEffect(()=>{const e=e=>{i.current&&i.current.contains(e.target)||n.current&&n.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:s,menuPosition:a,triggerRef:n,contentRef:i,openMenu:()=>{n.current&&t(!0)},closeMenu:u,repositionMenu:c},children:e})},z=({children:e,className:a,style:r={}})=>{const{isOpen:t,position:s,contentRef:l,closeMenu:n}=$(),[o,c]=h.useState(!1),[u,p]=h.useState(!1);h.useEffect(()=>{if(t){p(!0);const e=setTimeout(()=>{if(c(!0),l.current){const e=l.current.querySelector('[role="menuitem"]:not([disabled])');e&&e.focus()}},10);return()=>clearTimeout(e)}c(!1);const e=setTimeout(()=>p(!1),150);return()=>clearTimeout(e)},[t,l]);return u?d.jsx("article",{ref:l,className:x("menu-content",{"menu-content--open":o},a),style:i({left:`${s.x}px`,top:`${s.y}px`,opacity:o?1:0,transition:"opacity 0.15s ease-in-out"},r),role:"menu","aria-orientation":"vertical",onKeyDown:e=>{var a,r;if(!l.current)return;const t=Array.from(l.current.querySelectorAll('[role="menuitem"]:not([disabled])')),s=t.findIndex(e=>e===document.activeElement);switch(e.key){case"ArrowDown":e.preventDefault();null==(a=t[s<t.length-1?s+1:0])||a.focus();break;case"ArrowUp":e.preventDefault();null==(r=t[s>0?s-1:t.length-1])||r.focus();break;case"Escape":e.preventDefault(),n()}},tabIndex:-1,children:h.Children.map(e,e=>h.isValidElement(e)?h.cloneElement(e,{closeMenu:n}):e)}):null},S=({children:e,onClick:a,closeMenu:r,disabled:t=!1,className:s,style:l={}})=>{const n=()=>{t||(a&&a(),r&&r())};return d.jsx("button",{onClick:n,onKeyDown:e=>{t||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n())},disabled:t,className:x("menu-item",{"menu-item--disabled":t},s),style:l,role:"menuitem",type:"button",tabIndex:t?-1:0,"aria-disabled":t,children:e})},A=({children:e,className:a,style:r={}})=>{const{triggerRef:t,isOpen:s,openMenu:l,closeMenu:n}=$();return d.jsx("section",{ref:t,onClick:()=>{s?n():l()},className:x("menu-trigger",a),style:r,children:h.cloneElement(e,{isOpen:s})})},B=Object.assign(({children:e,className:a,style:r={},position:t="bottom-left"})=>d.jsx(P,{menuPosition:t,children:d.jsx("div",{className:x("menu-container",a),style:r,children:e})}),{Trigger:A,Content:z,Item:S});exports.Button=v,exports.ButtonSelect=({options:e,value:a,onChange:r,disabled:t=!1,multiple:s=!1})=>{const l=e=>Array.isArray(a)?a.includes(e):e===a;return d.jsx("div",{className:"button-select "+(t?"disabled":""),children:e.map(({value:e,child:n})=>d.jsx("button",{className:"button-select-option "+(l(e)?"selected":""),onClick:()=>(e=>{if(t)return;if(!s)return void r(e);const l=Array.isArray(a)?a:[],n=l.includes(e)?l.filter(a=>a!==e):[...l,e];r(n)})(e),disabled:t,type:"button",children:n},e))})},exports.ChevronLeft=g,exports.ChevronRight=b,exports.DOTS=y,exports.Input=e=>{var a=e,{variant:r="primary",type:t="text",label:s,prefix:l,suffix:n,helperText:o,className:u,labelClass:p,helperTextClass:m,onChange:g,id:b,hasError:v,loading:j=!1,disabled:y,readOnly:N=!1,dark:k=!1}=a,w=c(a,["variant","type","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","readOnly","dark"]);const C=h.useId(),T=b||`input-${C}`,M=x("form-field",{"has-prefix":!!l,"has-suffix":!!n},{[`variant-${r}`]:r},{loading:j},{"read-only":N},u);return d.jsxs("article",{className:x("input-container",{dark:k}),children:[s&&d.jsx("label",{htmlFor:T,className:x("input-label",p),children:s}),d.jsxs("section",{className:x("input-wrapper",{loading:j}),children:[l&&d.jsx("article",{className:"input-prefix",children:l}),d.jsx("input",i({id:T,type:t,className:M,onChange:e=>null==g?void 0:g(e.target.value),disabled:y||j,readOnly:N},w)),j?d.jsx("article",{className:"input-suffix",children:d.jsx(f,{})}):n&&d.jsx("article",{className:"input-suffix",children:n})]}),o&&d.jsx("small",{className:x("input-helper-text",m),style:{color:v?"var(--color-danger)":"inherit"},children:o})]})},exports.Menu=B,exports.MenuContent=z,exports.MenuContextProvider=P,exports.MenuItem=S,exports.MenuTrigger=A,exports.Pagination=({currentPage:e,totalPages:a,onPageChange:r,siblingCount:t=1,hidePrevButton:s=!1,hideNextButton:l=!1,size:n="md",variant:i="ghost",color:o="secondary",className:c="",disabled:h=!1,mobile:u=!1})=>{const p=N({currentPage:e,totalPages:a,siblingCount:t});if(0===e||0===a)return null;const m=()=>{e<a&&!h&&r(e+1)},f=()=>{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:[!s&&d.jsx(v,{variant:i,color:o,size:n,onClick:f,disabled:1===e||h,"aria-label":"Go to previous page",shape:"square",children:d.jsx(g,{})}),d.jsxs("span",{className:"pagination__page-indicator","aria-live":"polite",children:[e," / ",a," pages"]}),!l&&d.jsx(v,{variant:i,color:o,size:n,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:[!s&&d.jsx(v,{variant:i,color:o,size:n,onClick:f,disabled:1===e||h,"aria-label":"Go to previous page",shape:"square",children:d.jsx(g,{})}),p.map((t,s)=>t===y?d.jsx(v,{variant:i,color:o,size:n,"aria-label":"More pages",shape:"square",disabled:h,hover:!1,children:"…"},s):d.jsx(v,{variant:t===e?"filled":i,color:t===e?"primary":o,size:n,onClick:()=>!h&&r(t),disabled:h||1===a,"aria-label":t===e?`Current page, page ${t}`:`Go to page ${t}`,"aria-current":t===e?"page":void 0,shape:"square",children:t},s)),!l&&d.jsx(v,{variant:i,color:o,size:n,onClick:m,disabled:e===j||h,"aria-label":"Go to next page",shape:"square",children:d.jsx(b,{})})]})},exports.Range=e=>{var a=e,{variant:r="primary",label:t,helperText:s,className:l,labelClass:n,rangeLabelClass:o,tickClass:u,helperTextClass:p,onChange:m,id:g,hasError:b,loading:v=!1,disabled:j,min:y=0,max:N=100,step:k=1,value:w=y,minLabel:C,maxLabel:T,showValue:M=!1,showTicks:O=!1,formatValue:E,dark:$=!1}=a,P=c(a,["variant","label","helperText","className","labelClass","rangeLabelClass","tickClass","helperTextClass","onChange","id","hasError","loading","disabled","min","max","step","value","minLabel","maxLabel","showValue","showTicks","formatValue","dark"]);const z=h.useId(),S=g||`range-${z}`,[A,B]=h.useState(!1),I=(w-y)/(N-y)*100,L=h.useMemo(()=>{if(!O)return[];const e=Math.floor((N-y)/k)+1;return Array.from({length:e},(e,a)=>y+a*k)},[O,y,N,k]),q=E?E(w):w,R=x("range-input",{[`variant-${r}`]:r},{loading:v},l);return d.jsxs("article",{className:x("range-container",{dark:$}),children:[t&&d.jsx("label",{htmlFor:S,className:x("range-label",n),children:t}),d.jsxs("section",{className:x("range-wrapper",{loading:v}),children:[v&&d.jsx("article",{className:"range-spinner",children:d.jsx(f,{})}),d.jsxs("div",{className:x("range-input-wrapper",{"has-value-tooltip":M}),children:[M&&A&&d.jsx("div",{className:"range-value-tooltip",style:{left:`${I}%`},children:q}),d.jsx("input",i({id:S,type:"range",className:R,onChange:e=>{const a=parseFloat(e.target.value);null==m||m(a)},onMouseDown:()=>{B(!0)},onMouseUp:()=>{B(!1)},onTouchStart:()=>{B(!0)},onTouchEnd:()=>{B(!1)},disabled:j||v,min:y,max:N,step:k,value:w,style:{background:`linear-gradient(to right,\n                var(--range-fill-color, var(--color-${r})) 0%,                 var(--range-fill-color, var(--color-${r})) ${I}%,                 var(--range-track-color, #e5e7eb) ${I}%,                 var(--range-track-color, #e5e7eb) 100%)`}},P)),O&&d.jsx("div",{className:x("range-ticks"),children:L.map(e=>d.jsx("span",{className:x("range-tick",u),style:{left:(e-y)/(N-y)*100+"%"},children:e},e))})]}),(C||T)&&d.jsxs("div",{className:x("range-labels",o),children:[d.jsx("span",{className:"range-label-min",children:C||""}),d.jsx("span",{className:"range-label-max",children:T||""})]})]}),s&&d.jsx("small",{className:x("range-helper-text",p),style:{color:b?"var(--color-danger)":"inherit"},children:s})]})},exports.Select=e=>{var a=e,{variant:r="primary",label:t,prefix:s,suffix:l,helperText:n,className:u,labelClass:p,helperTextClass:m,onChange:g,id:b,hasError:v,loading:y=!1,disabled:N,options:k=[],placeholder:w,children:C,value:T,readOnly:M=!1,dark:O=!1}=a,E=c(a,["variant","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","options","placeholder","children","value","readOnly","dark"]);const $=h.useId(),P=b||`select-${$}`,z=x("form-field",{"has-prefix":!!s,"has-suffix":!!l||!y},{[`variant-${r}`]:r},{loading:y},{"read-only":M},u);return d.jsxs("article",{className:x("select-container",{dark:O}),children:[t&&d.jsx("label",{htmlFor:P,className:x("select-label",p),children:t}),d.jsxs("section",{className:x("select-wrapper",{loading:y}),children:[s&&d.jsx("article",{className:"select-prefix",children:s}),d.jsxs("select",o(i({id:P,className:z,onChange:e=>{M||null==g||g(e.target.value)},disabled:N||y,value:null!=T?T:""},E),{children:[w&&d.jsx("option",{value:"",disabled:!0,hidden:!0,children:w}),k.length>0?k.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(f,{})}):d.jsx("article",{className:"select-suffix",children:l||j})]}),n&&d.jsx("small",{className:x("select-helper-text",m),style:{color:v?"var(--color-danger)":"inherit"},children:n})]})},exports.Spinner=f,exports.Table=O,exports.TableBody=w,exports.TableCell=M,exports.TableFooter=C,exports.TableHeader=k,exports.TableRow=T,exports.TextArea=e=>{var a=e,{variant:r="primary",label:t,prefix:s,suffix:l,helperText:n,className:o,labelClass:u,helperTextClass:p,onChange:m,id:g,hasError:b,loading:v=!1,disabled:j,rows:y=4,resize:N="vertical",readOnly:k=!1,dark:w=!1}=a,C=c(a,["variant","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","rows","resize","readOnly","dark"]);const T=h.useId(),M=g||`textarea-${T}`,O=x("form-field","textarea-field",{"has-prefix":!!s,"has-suffix":!!l},{[`variant-${r}`]:r},{loading:v},{[`resize-${N}`]:N},{"read-only":k},o);return d.jsxs("article",{className:x("textarea-container",{dark:w}),children:[t&&d.jsx("label",{htmlFor:M,className:x("textarea-label",u),children:t}),d.jsxs("section",{className:x("textarea-wrapper",{loading:v}),children:[s&&d.jsx("article",{className:"textarea-prefix",children:s}),d.jsx("textarea",i({id:M,className:O,onChange:e=>null==m?void 0:m(e.target.value),disabled:j||v,rows:y,readOnly:k},C)),v?d.jsx("article",{className:"textarea-suffix",children:d.jsx(f,{})}):l&&d.jsx("article",{className:"textarea-suffix",children:l})]}),n&&d.jsx("small",{className:x("textarea-helper-text",p),style:{color:b?"var(--color-danger)":"inherit"},children:n})]})},exports.Toggle=e=>{var a=e,{color:r="var(--color-primary)",size:t="3.75rem",checked:s=!1,onChange:l,label:n,labelPosition:o="right",className:h}=a,u=c(a,["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":t,"--switch-color":r},children:[d.jsx("input",i({type:"checkbox",role:"switch",checked:s,onChange:e=>null==l?void 0:l(e.target.checked)},u)),d.jsx("span",{className:"slider"})]}),n&&d.jsx("span",{className:"switch-label",children:n})]})},exports.clsx=p,exports.cn=x,exports.mergeClasses=m,exports.useMenuContext=$,exports.usePagination=N;
+"use strict";var e=Object.defineProperty,a=Object.defineProperties,r=Object.getOwnPropertyDescriptors,t=Object.getOwnPropertySymbols,s=Object.prototype.hasOwnProperty,l=Object.prototype.propertyIsEnumerable,n=(a,r,t)=>r in a?e(a,r,{enumerable:!0,configurable:!0,writable:!0,value:t}):a[r]=t,i=(e,a)=>{for(var r in a||(a={}))s.call(a,r)&&n(e,r,a[r]);if(t)for(var r of t(a))l.call(a,r)&&n(e,r,a[r]);return e},o=(e,t)=>a(e,r(t)),c=(e,a)=>{var r={};for(var n in e)s.call(e,n)&&a.indexOf(n)<0&&(r[n]=e[n]);if(null!=e&&t)for(var n of t(e))a.indexOf(n)<0&&l.call(e,n)&&(r[n]=e[n]);return r};Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const d=require("react/jsx-runtime"),h=require("react");function u(e){var a,r,t="";if("string"==typeof e||"number"==typeof e)t+=e;else if("object"==typeof e)if(Array.isArray(e)){var s=e.length;for(a=0;a<s;a++)e[a]&&(r=u(e[a]))&&(t&&(t+=" "),t+=r)}else for(r in e)e[r]&&(t&&(t+=" "),t+=r);return t}function p(){for(var e,a,r=0,t="",s=arguments.length;r<s;r++)(e=arguments[r])&&(a=u(e))&&(t&&(t+=" "),t+=a);return t}function m(...e){const a=e.join(" ").split(" ").filter(Boolean);return[...new Set(a)].join(" ")}function x(...e){return m(p(...e))}const g=({width:e=24,height:a=24})=>d.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:a,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"})}),f=({width:e=24,height:a=24})=>d.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",width:e,height:a,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:a=24})=>d.jsxs("svg",{width:a,height:a,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=h.forwardRef((e,a)=>{var r=e,{variant:t="filled",color:s="primary",size:l="md",shape:n="rectangle",startIcon:h,endIcon:u,className:p="",children:m,loading:g,disabled:f,hover:v=!0,dark:j=!1}=r,y=c(r,["variant","color","size","shape","startIcon","endIcon","className","children","loading","disabled","hover","dark"]);const N="filled"===t?`btn-${s}`:`btn-${t}-${s}`;return d.jsx("button",o(i({ref:a,className:x("btn",N,`btn-${l}`,`btn-${n}`,{"btn-loading":g,"btn-no-hover":!v,dark:j},p),disabled:f||g},y),{children:g?d.jsx(b,{}):d.jsxs(d.Fragment,{children:[h&&d.jsx("span",{className:"btn-icon-start",children:h}),m,u&&d.jsx("span",{className:"btn-icon-end",children:u})]})}))});v.displayName="Button";const j=h.forwardRef((e,a)=>{var r=e,{variant:t="primary",type:s="text",label:l,prefix:n,suffix:o,helperText:u,className:p,labelClass:m,helperTextClass:g,onChange:f,id:v,hasError:j,loading:y=!1,disabled:N,readOnly:w=!1,dark:k=!1}=r,C=c(r,["variant","type","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","readOnly","dark"]);const T=h.useId(),M=v||`input-${T}`,O=x("form-field",{"has-prefix":!!n,"has-suffix":!!o},{[`variant-${t}`]:t},{loading:y},{"read-only":w},p);return d.jsxs("article",{className:x("input-container",{dark:k}),children:[l&&d.jsx("label",{htmlFor:M,className:x("input-label",m),children:l}),d.jsxs("section",{className:x("input-wrapper",{loading:y}),children:[n&&d.jsx("article",{className:"input-prefix",children:n}),d.jsx("input",i({ref:a,id:M,type:s,className:O,onChange:e=>null==f?void 0:f(e.target.value),disabled:N||y,readOnly:w},C)),y?d.jsx("article",{className:"input-suffix",children:d.jsx(b,{})}):o&&d.jsx("article",{className:"input-suffix",children:o})]}),u&&d.jsx("small",{className:x("input-helper-text",g),style:{color:j?"var(--color-danger)":"inherit"},children:u})]})});j.displayName="Input";const y=h.forwardRef((e,a)=>{var r=e,{variant:t="primary",label:s,prefix:l,suffix:n,helperText:o,className:u,labelClass:p,helperTextClass:m,onChange:g,id:f,hasError:v,loading:j=!1,disabled:y,rows:N=4,resize:w="vertical",readOnly:k=!1,dark:C=!1}=r,T=c(r,["variant","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","rows","resize","readOnly","dark"]);const M=h.useId(),O=f||`textarea-${M}`,E=x("form-field","textarea-field",{"has-prefix":!!l,"has-suffix":!!n},{[`variant-${t}`]:t},{loading:j},{[`resize-${w}`]:w},{"read-only":k},u);return d.jsxs("article",{className:x("textarea-container",{dark:C}),children:[s&&d.jsx("label",{htmlFor:O,className:x("textarea-label",p),children:s}),d.jsxs("section",{className:x("textarea-wrapper",{loading:j}),children:[l&&d.jsx("article",{className:"textarea-prefix",children:l}),d.jsx("textarea",i({ref:a,id:O,className:E,onChange:e=>null==g?void 0:g(e.target.value),disabled:y||j,rows:N,readOnly:k},T)),j?d.jsx("article",{className:"textarea-suffix",children:d.jsx(b,{})}):n&&d.jsx("article",{className:"textarea-suffix",children:n})]}),o&&d.jsx("small",{className:x("textarea-helper-text",m),style:{color:v?"var(--color-danger)":"inherit"},children:o})]})});y.displayName="TextArea";const N=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\n       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=h.forwardRef((e,a)=>{var r=e,{variant:t="primary",label:s,prefix:l,suffix:n,helperText:u,className:p,labelClass:m,helperTextClass:g,onChange:f,id:v,hasError:j,loading:y=!1,disabled:w,options:k=[],placeholder:C,children:T,value:M,readOnly:O=!1,dark:E=!1}=r,$=c(r,["variant","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","options","placeholder","children","value","readOnly","dark"]);const P=h.useId(),R=v||`select-${P}`,S=x("form-field",{"has-prefix":!!l,"has-suffix":!!n||!y},{[`variant-${t}`]:t},{loading:y},{"read-only":O},p);return d.jsxs("article",{className:x("select-container",{dark:E}),children:[s&&d.jsx("label",{htmlFor:R,className:x("select-label",m),children:s}),d.jsxs("section",{className:x("select-wrapper",{loading:y}),children:[l&&d.jsx("article",{className:"select-prefix",children:l}),d.jsxs("select",o(i({ref:a,id:R,className:S,onChange:e=>{O||null==f||f(e.target.value)},disabled:w||y,value:null!=M?M:""},$),{children:[C&&d.jsx("option",{value:"",disabled:!0,hidden:!0,children:C}),k.length>0?k.map(e=>d.jsx("option",{value:e.value,disabled:e.disabled,children:e.label},e.value)):T]})),y?d.jsx("article",{className:"select-suffix",children:d.jsx(b,{})}):d.jsx("article",{className:"select-suffix",children:n||N})]}),u&&d.jsx("small",{className:x("select-helper-text",g),style:{color:j?"var(--color-danger)":"inherit"},children:u})]})});w.displayName="Select";const k=h.forwardRef((e,a)=>{var r=e,{color:t="var(--color-primary)",size:s="3.75rem",checked:l=!1,onChange:n,label:o,labelPosition:h="right",className:u}=r,p=c(r,["color","size","checked","onChange","label","labelPosition","className"]);return d.jsxs("label",{className:x("switch-container",h,u),children:[d.jsxs("div",{className:"toggle-switch",style:{"--switch-size":s,"--switch-color":t},children:[d.jsx("input",i({ref:a,type:"checkbox",role:"switch",checked:l,onChange:e=>null==n?void 0:n(e.target.checked)},p)),d.jsx("span",{className:"slider"})]}),o&&d.jsx("span",{className:"switch-label",children:o})]})});k.displayName="Toggle";const C="...",T=({currentPage:e,totalPages:a,siblingCount:r=1})=>h.useMemo(()=>{if(a<=7)return Array.from({length:a},(e,a)=>a+1);const t=Math.max(e-r,1),s=Math.min(e+r,a),l=t>2,n=s<a-1;if(!l&&!n)return Array.from({length:a},(e,a)=>a+1);if(!l&&n){const e=3+2*r;return[...Array.from({length:e},(e,a)=>a+1),C,a]}if(l&&!n){const e=3+2*r;return[1,C,...Array.from({length:e},(r,t)=>a-e+t+1)]}return[1,C,...Array.from({length:s-t+1},(e,a)=>t+a),C,a]},[e,a,r]),M=e=>{var a=e,{className:r="",children:t}=a,s=c(a,["className","children"]);return d.jsx("thead",o(i({className:x("table-header",r)},s),{children:t}))},O=e=>{var a=e,{className:r="",children:t}=a,s=c(a,["className","children"]);return d.jsx("tbody",o(i({className:x("table-body",r)},s),{children:t}))},E=e=>{var a=e,{className:r="",children:t}=a,s=c(a,["className","children"]);return d.jsx("tfoot",o(i({className:x("table-footer",r)},s),{children:t}))},$=e=>{var a=e,{className:r="",selected:t=!1,children:s}=a,l=c(a,["className","selected","children"]);return d.jsx("tr",o(i({className:x("table-row",{"table-row-selected":t},r)},l),{children:s}))},P=e=>{var a=e,{className:r="",header:t=!1,align:s="left",minWidth:l,maxWidth:n,width:h,children:u,style:p}=a,m=c(a,["className","header","align","minWidth","maxWidth","width","children","style"]);const g=t?"th":"td",f=i(i(i(i({},l&&{minWidth:l}),n&&{maxWidth:n}),h&&{width:h}),p);return d.jsx(g,o(i({className:x("table-cell",`table-cell-${s}`,{"table-cell-header":t},r),style:Object.keys(f).length>0?f:p},m),{children:u}))},R=e=>{var a=e,{className:r="",variant:t="default",dense:s=!1,children:l}=a,n=c(a,["className","variant","dense","children"]);const h=d.jsx("table",o(i({className:x("table",`table-${t}`,{"table-dense":s},r)},n),{children:l}));return d.jsx("div",{className:"table-responsive",children:h})};R.Header=M,R.Body=O,R.Footer=E,R.Row=$,R.Cell=P;const S=h.createContext(void 0),z=()=>{const e=h.useContext(S);if(void 0===e)throw new Error("useMenuContext must be used within a MenuContextProvider");return e},A=({children:e,menuPosition:a="bottom-left"})=>{const[r,t]=h.useState(!1),[s,l]=h.useState({x:0,y:0}),n=h.useRef(null),i=h.useRef(null),o=h.useCallback((e,r)=>{const t=10,s=(null==r?void 0:r.width)||200,l=(null==r?void 0:r.height)||150,n=window.innerWidth,i=window.innerHeight;let o=0,c=0;switch(a){case"bottom-left":default:o=e.left,c=e.bottom+t;break;case"bottom-right":o=e.right-s,c=e.bottom+t;break;case"bottom-center":o=e.left+e.width/2-s/2,c=e.bottom+t;break;case"top-left":o=e.left,c=e.top-15-l;break;case"top-right":o=e.right-s,c=e.top-15-l;break;case"top-center":o=e.left+e.width/2-s/2,c=e.top-15-l;break;case"left-top":o=e.left-15-s,c=e.top;break;case"left-bottom":o=e.left-15-s,c=e.bottom-l;break;case"left-center":o=e.left-15-s,c=e.top+e.height/2-l/2;break;case"right-top":o=e.right+t,c=e.top;break;case"right-bottom":o=e.right+t,c=e.bottom-l;break;case"right-center":o=e.right+t,c=e.top+e.height/2-l/2}return o=Math.max(t,Math.min(o,n-s-t)),c=Math.max(t,Math.min(c,i-l-t)),{x:o,y:c}},[a]),c=h.useCallback(()=>{var e;if(!n.current)return;const a=n.current.getBoundingClientRect(),r=null==(e=i.current)?void 0:e.getBoundingClientRect();l(o(a,r))},[o]),u=()=>t(!1);return h.useEffect(()=>{if(r&&n.current){const e=()=>{var e;const a=n.current.getBoundingClientRect(),r=null==(e=i.current)?void 0:e.getBoundingClientRect();l(o(a,r))};e();const a=setTimeout(e,50);return()=>clearTimeout(a)}},[r,o]),h.useEffect(()=>{const e=e=>{i.current&&i.current.contains(e.target)||n.current&&n.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(S.Provider,{value:{isOpen:r,position:s,menuPosition:a,triggerRef:n,contentRef:i,openMenu:()=>{n.current&&t(!0)},closeMenu:u,repositionMenu:c},children:e})},B=({children:e,className:a,style:r={}})=>{const{isOpen:t,position:s,contentRef:l,closeMenu:n}=z(),[o,c]=h.useState(!1),[u,p]=h.useState(!1);h.useEffect(()=>{if(t){p(!0);const e=setTimeout(()=>{if(c(!0),l.current){const e=l.current.querySelector('[role="menuitem"]:not([disabled])');e&&e.focus()}},10);return()=>clearTimeout(e)}c(!1);const e=setTimeout(()=>p(!1),150);return()=>clearTimeout(e)},[t,l]);return u?d.jsx("article",{ref:l,className:x("menu-content",{"menu-content--open":o},a),style:i({left:`${s.x}px`,top:`${s.y}px`,opacity:o?1:0,transition:"opacity 0.15s ease-in-out"},r),role:"menu","aria-orientation":"vertical",onKeyDown:e=>{var a,r;if(!l.current)return;const t=Array.from(l.current.querySelectorAll('[role="menuitem"]:not([disabled])')),s=t.findIndex(e=>e===document.activeElement);switch(e.key){case"ArrowDown":e.preventDefault();null==(a=t[s<t.length-1?s+1:0])||a.focus();break;case"ArrowUp":e.preventDefault();null==(r=t[s>0?s-1:t.length-1])||r.focus();break;case"Escape":e.preventDefault(),n()}},tabIndex:-1,children:h.Children.map(e,e=>h.isValidElement(e)?h.cloneElement(e,{closeMenu:n}):e)}):null},I=({children:e,onClick:a,closeMenu:r,disabled:t=!1,className:s,style:l={}})=>{const n=()=>{t||(a&&a(),r&&r())};return d.jsx("button",{onClick:n,onKeyDown:e=>{t||"Enter"!==e.key&&" "!==e.key||(e.preventDefault(),n())},disabled:t,className:x("menu-item",{"menu-item--disabled":t},s),style:l,role:"menuitem",type:"button",tabIndex:t?-1:0,"aria-disabled":t,children:e})},L=({children:e,className:a,style:r={}})=>{const{triggerRef:t,isOpen:s,openMenu:l,closeMenu:n}=z();return d.jsx("section",{ref:t,onClick:()=>{s?n():l()},className:x("menu-trigger",a),style:r,children:h.cloneElement(e,{isOpen:s})})},q=Object.assign(({children:e,className:a,style:r={},position:t="bottom-left"})=>d.jsx(A,{menuPosition:t,children:d.jsx("div",{className:x("menu-container",a),style:r,children:e})}),{Trigger:L,Content:B,Item:I}),D=h.forwardRef((e,a)=>{var r=e,{variant:t="primary",label:s,helperText:l,className:n,labelClass:o,rangeLabelClass:u,tickClass:p,helperTextClass:m,onChange:g,id:f,hasError:v,loading:j=!1,disabled:y,min:N=0,max:w=100,step:k=1,value:C=N,minLabel:T,maxLabel:M,showValue:O=!1,showTicks:E=!1,formatValue:$,dark:P=!1}=r,R=c(r,["variant","label","helperText","className","labelClass","rangeLabelClass","tickClass","helperTextClass","onChange","id","hasError","loading","disabled","min","max","step","value","minLabel","maxLabel","showValue","showTicks","formatValue","dark"]);const S=h.useId(),z=f||`range-${S}`,[A,B]=h.useState(!1),I=(C-N)/(w-N)*100,L=h.useMemo(()=>{if(!E)return[];const e=Math.floor((w-N)/k)+1;return Array.from({length:e},(e,a)=>N+a*k)},[E,N,w,k]),q=$?$(C):C,D=x("range-input",{[`variant-${t}`]:t},{loading:j},n);return d.jsxs("article",{className:x("range-container",{dark:P}),children:[s&&d.jsx("label",{htmlFor:z,className:x("range-label",o),children:s}),d.jsxs("section",{className:x("range-wrapper",{loading:j}),children:[j&&d.jsx("article",{className:"range-spinner",children:d.jsx(b,{})}),d.jsxs("div",{className:x("range-input-wrapper",{"has-value-tooltip":O}),children:[O&&A&&d.jsx("div",{className:"range-value-tooltip",style:{left:`${I}%`},children:q}),d.jsx("input",i({ref:a,id:z,type:"range",className:D,onChange:e=>{const a=parseFloat(e.target.value);null==g||g(a)},onMouseDown:()=>{B(!0)},onMouseUp:()=>{B(!1)},onTouchStart:()=>{B(!0)},onTouchEnd:()=>{B(!1)},disabled:y||j,min:N,max:w,step:k,value:C,style:{background:`linear-gradient(to right,\n                  var(--range-fill-color, var(--color-${t})) 0%,                   var(--range-fill-color, var(--color-${t})) ${I}%,                   var(--range-track-color, #e5e7eb) ${I}%,                   var(--range-track-color, #e5e7eb) 100%)`}},R)),E&&d.jsx("div",{className:x("range-ticks"),children:L.map(e=>d.jsx("span",{className:x("range-tick",p),style:{left:(e-N)/(w-N)*100+"%"},children:e},e))})]}),(T||M)&&d.jsxs("div",{className:x("range-labels",u),children:[d.jsx("span",{className:"range-label-min",children:T||""}),d.jsx("span",{className:"range-label-max",children:M||""})]})]}),l&&d.jsx("small",{className:x("range-helper-text",m),style:{color:v?"var(--color-danger)":"inherit"},children:l})]})});D.displayName="Range",exports.Button=v,exports.ButtonSelect=({options:e,value:a,onChange:r,disabled:t=!1,multiple:s=!1})=>{const l=e=>Array.isArray(a)?a.includes(e):e===a;return d.jsx("div",{className:"button-select "+(t?"disabled":""),children:e.map(({value:e,child:n})=>d.jsx("button",{className:"button-select-option "+(l(e)?"selected":""),onClick:()=>(e=>{if(t)return;if(!s)return void r(e);const l=Array.isArray(a)?a:[],n=l.includes(e)?l.filter(a=>a!==e):[...l,e];r(n)})(e),disabled:t,type:"button",children:n},e))})},exports.ChevronLeft=g,exports.ChevronRight=f,exports.DOTS=C,exports.Input=j,exports.Menu=q,exports.MenuContent=B,exports.MenuContextProvider=A,exports.MenuItem=I,exports.MenuTrigger=L,exports.Pagination=({currentPage:e,totalPages:a,onPageChange:r,siblingCount:t=1,hidePrevButton:s=!1,hideNextButton:l=!1,size:n="md",variant:i="ghost",color:o="secondary",className:c="",disabled:h=!1,mobile:u=!1})=>{const p=T({currentPage:e,totalPages:a,siblingCount:t});if(0===e||0===a)return null;const m=()=>{e<a&&!h&&r(e+1)},b=()=>{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:[!s&&d.jsx(v,{variant:i,color:o,size:n,onClick:b,disabled:1===e||h,"aria-label":"Go to previous page",shape:"square",children:d.jsx(g,{})}),d.jsxs("span",{className:"pagination__page-indicator","aria-live":"polite",children:[e," / ",a," pages"]}),!l&&d.jsx(v,{variant:i,color:o,size:n,onClick:m,disabled:e===j||h,"aria-label":"Go to next page",shape:"square",children:d.jsx(f,{})})]}):d.jsxs("article",{className:x("pagination",c),"aria-label":"pagination navigation",children:[!s&&d.jsx(v,{variant:i,color:o,size:n,onClick:b,disabled:1===e||h,"aria-label":"Go to previous page",shape:"square",children:d.jsx(g,{})}),p.map((t,s)=>t===C?d.jsx(v,{variant:i,color:o,size:n,"aria-label":"More pages",shape:"square",disabled:h,hover:!1,children:"…"},s):d.jsx(v,{variant:t===e?"filled":i,color:t===e?"primary":o,size:n,onClick:()=>!h&&r(t),disabled:h||1===a,"aria-label":t===e?`Current page, page ${t}`:`Go to page ${t}`,"aria-current":t===e?"page":void 0,shape:"square",children:t},s)),!l&&d.jsx(v,{variant:i,color:o,size:n,onClick:m,disabled:e===j||h,"aria-label":"Go to next page",shape:"square",children:d.jsx(f,{})})]})},exports.Range=D,exports.Select=w,exports.Spinner=b,exports.Table=R,exports.TableBody=O,exports.TableCell=P,exports.TableFooter=E,exports.TableHeader=M,exports.TableRow=$,exports.TextArea=y,exports.Toggle=k,exports.clsx=p,exports.cn=x,exports.mergeClasses=m,exports.useMenuContext=z,exports.usePagination=T;

package/dist/klip-components.es.js

@@ -93,347 +93,374 @@ 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 Button = (_a) => {
-  var _b = _a, {
-    variant = "filled",
-    color = "primary",
-    size = "md",
-    shape = "rectangle",
-    startIcon,
-    endIcon,
-    className = "",
-    children,
-    loading,
-    disabled,
-    hover = true,
-    dark = false
-  } = _b, props = __objRest(_b, [
-    "variant",
-    "color",
-    "size",
-    "shape",
-    "startIcon",
-    "endIcon",
-    "className",
-    "children",
-    "loading",
-    "disabled",
-    "hover",
-    "dark"
-  ]);
-  const variantClass = variant === "filled" ? `btn-${color}` : `btn-${variant}-${color}`;
-  return /* @__PURE__ */ jsx(
-    "button",
-    __spreadProps(__spreadValues({
-      className: cn(
-        "btn",
-        variantClass,
-        `btn-${size}`,
-        `btn-${shape}`,
+const Button = React.forwardRef(
+  (_a, ref) => {
+    var _b = _a, {
+      variant = "filled",
+      color = "primary",
+      size = "md",
+      shape = "rectangle",
+      startIcon,
+      endIcon,
+      className = "",
+      children,
+      loading,
+      disabled,
+      hover = true,
+      dark = false
+    } = _b, props = __objRest(_b, [
+      "variant",
+      "color",
+      "size",
+      "shape",
+      "startIcon",
+      "endIcon",
+      "className",
+      "children",
+      "loading",
+      "disabled",
+      "hover",
+      "dark"
+    ]);
+    const variantClass = variant === "filled" ? `btn-${color}` : `btn-${variant}-${color}`;
+    return /* @__PURE__ */ jsx(
+      "button",
+      __spreadProps(__spreadValues({
+        ref,
+        className: cn(
+          "btn",
+          variantClass,
+          `btn-${size}`,
+          `btn-${shape}`,
+          {
+            "btn-loading": loading,
+            "btn-no-hover": !hover,
+            dark
+          },
+          className
+        ),
+        disabled: disabled || loading
+      }, props), {
+        children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          startIcon && /* @__PURE__ */ jsx("span", { className: "btn-icon-start", children: startIcon }),
+          children,
+          endIcon && /* @__PURE__ */ jsx("span", { className: "btn-icon-end", children: endIcon })
+        ] })
+      })
+    );
+  }
+);
+Button.displayName = "Button";
+const Input = React.forwardRef(
+  (_c, ref) => {
+    var _d = _c, {
+      variant = "primary",
+      type = "text",
+      label,
+      prefix,
+      suffix,
+      helperText,
+      className,
+      labelClass,
+      helperTextClass,
+      onChange,
+      id,
+      hasError,
+      loading = false,
+      disabled,
+      readOnly = false,
+      dark = false
+    } = _d, props = __objRest(_d, [
+      "variant",
+      "type",
+      "label",
+      "prefix",
+      "suffix",
+      "helperText",
+      "className",
+      "labelClass",
+      "helperTextClass",
+      "onChange",
+      "id",
+      "hasError",
+      "loading",
+      "disabled",
+      "readOnly",
+      "dark"
+    ]);
+    const generatedId = React.useId();
+    const inputId = id || `input-${generatedId}`;
+    const handleChange = (e) => onChange == null ? void 0 : onChange(e.target.value);
+    const hasPrefix = !!prefix;
+    const hasSuffix = !!suffix;
+    const combinedClass = cn(
+      "form-field",
+      { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
+      { [`variant-${variant}`]: variant },
+      { loading },
+      { "read-only": readOnly },
+      className
+    );
+    return /* @__PURE__ */ jsxs("article", { className: cn("input-container", { dark }), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: cn("input-label", labelClass), children: label }),
+      /* @__PURE__ */ jsxs("section", { className: cn("input-wrapper", { loading }), children: [
+        prefix && /* @__PURE__ */ jsx("article", { className: "input-prefix", children: prefix }),
+        /* @__PURE__ */ jsx(
+          "input",
+          __spreadValues({
+            ref,
+            id: inputId,
+            type,
+            className: combinedClass,
+            onChange: handleChange,
+            disabled: disabled || loading,
+            readOnly
+          }, props)
+        ),
+        loading ? /* @__PURE__ */ jsx("article", { className: "input-suffix", children: /* @__PURE__ */ jsx(Spinner, {}) }) : suffix && /* @__PURE__ */ jsx("article", { className: "input-suffix", children: suffix })
+      ] }),
+      helperText && /* @__PURE__ */ jsx(
+        "small",
         {
-          "btn-loading": loading,
-          "btn-no-hover": !hover,
-          dark
-        },
-        className
-      ),
-      disabled: disabled || loading
-    }, props), {
-      children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
-        startIcon && /* @__PURE__ */ jsx("span", { className: "btn-icon-start", children: startIcon }),
-        children,
-        endIcon && /* @__PURE__ */ jsx("span", { className: "btn-icon-end", children: endIcon })
-      ] })
-    })
-  );
-};
-const Input = (_c) => {
-  var _d = _c, {
-    variant = "primary",
-    type = "text",
-    label,
-    prefix,
-    suffix,
-    helperText,
-    className,
-    labelClass,
-    helperTextClass,
-    onChange,
-    id,
-    hasError,
-    loading = false,
-    disabled,
-    readOnly = false,
-    dark = false
-  } = _d, props = __objRest(_d, [
-    "variant",
-    "type",
-    "label",
-    "prefix",
-    "suffix",
-    "helperText",
-    "className",
-    "labelClass",
-    "helperTextClass",
-    "onChange",
-    "id",
-    "hasError",
-    "loading",
-    "disabled",
-    "readOnly",
-    "dark"
-  ]);
-  const generatedId = React.useId();
-  const inputId = id || `input-${generatedId}`;
-  const handleChange = (e) => onChange == null ? void 0 : onChange(e.target.value);
-  const hasPrefix = !!prefix;
-  const hasSuffix = !!suffix;
-  const combinedClass = cn(
-    "form-field",
-    { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
-    { [`variant-${variant}`]: variant },
-    { loading },
-    { "read-only": readOnly },
-    className
-  );
-  return /* @__PURE__ */ jsxs("article", { className: cn("input-container", { dark }), children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: cn("input-label", labelClass), children: label }),
-    /* @__PURE__ */ jsxs("section", { className: cn("input-wrapper", { loading }), children: [
-      prefix && /* @__PURE__ */ jsx("article", { className: "input-prefix", children: prefix }),
-      /* @__PURE__ */ jsx(
-        "input",
-        __spreadValues({
-          id: inputId,
-          type,
-          className: combinedClass,
-          onChange: handleChange,
-          disabled: disabled || loading,
-          readOnly
-        }, props)
-      ),
-      loading ? /* @__PURE__ */ jsx("article", { className: "input-suffix", children: /* @__PURE__ */ jsx(Spinner, {}) }) : suffix && /* @__PURE__ */ jsx("article", { className: "input-suffix", children: suffix })
-    ] }),
-    helperText && /* @__PURE__ */ jsx(
-      "small",
-      {
-        className: cn("input-helper-text", helperTextClass),
-        style: { color: hasError ? "var(--color-danger)" : "inherit" },
-        children: helperText
-      }
-    )
-  ] });
-};
-const TextArea = (_e) => {
-  var _f = _e, {
-    variant = "primary",
-    label,
-    prefix,
-    suffix,
-    helperText,
-    className,
-    labelClass,
-    helperTextClass,
-    onChange,
-    id,
-    hasError,
-    loading = false,
-    disabled,
-    rows = 4,
-    resize = "vertical",
-    readOnly = false,
-    dark = false
-  } = _f, props = __objRest(_f, [
-    "variant",
-    "label",
-    "prefix",
-    "suffix",
-    "helperText",
-    "className",
-    "labelClass",
-    "helperTextClass",
-    "onChange",
-    "id",
-    "hasError",
-    "loading",
-    "disabled",
-    "rows",
-    "resize",
-    "readOnly",
-    "dark"
-  ]);
-  const generatedId = React.useId();
-  const textareaId = id || `textarea-${generatedId}`;
-  const handleChange = (e) => onChange == null ? void 0 : onChange(e.target.value);
-  const hasPrefix = !!prefix;
-  const hasSuffix = !!suffix;
-  const combinedClass = cn(
-    "form-field",
-    "textarea-field",
-    { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
-    { [`variant-${variant}`]: variant },
-    { loading },
-    { [`resize-${resize}`]: resize },
-    { "read-only": readOnly },
-    className
-  );
-  return /* @__PURE__ */ jsxs("article", { className: cn("textarea-container", { dark }), children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: cn("textarea-label", labelClass), children: label }),
-    /* @__PURE__ */ jsxs("section", { className: cn("textarea-wrapper", { loading }), children: [
-      prefix && /* @__PURE__ */ jsx("article", { className: "textarea-prefix", children: prefix }),
-      /* @__PURE__ */ jsx(
-        "textarea",
-        __spreadValues({
-          id: textareaId,
-          className: combinedClass,
-          onChange: handleChange,
-          disabled: disabled || loading,
-          rows,
-          readOnly
-        }, props)
-      ),
-      loading ? /* @__PURE__ */ jsx("article", { className: "textarea-suffix", children: /* @__PURE__ */ jsx(Spinner, {}) }) : suffix && /* @__PURE__ */ jsx("article", { className: "textarea-suffix", children: suffix })
-    ] }),
-    helperText && /* @__PURE__ */ jsx(
-      "small",
-      {
-        className: cn("textarea-helper-text", helperTextClass),
-        style: { color: hasError ? "var(--color-danger)" : "inherit" },
-        children: helperText
-      }
-    )
-  ] });
-};
+          className: cn("input-helper-text", helperTextClass),
+          style: { color: hasError ? "var(--color-danger)" : "inherit" },
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+Input.displayName = "Input";
+const TextArea = React.forwardRef(
+  (_e, ref) => {
+    var _f = _e, {
+      variant = "primary",
+      label,
+      prefix,
+      suffix,
+      helperText,
+      className,
+      labelClass,
+      helperTextClass,
+      onChange,
+      id,
+      hasError,
+      loading = false,
+      disabled,
+      rows = 4,
+      resize = "vertical",
+      readOnly = false,
+      dark = false
+    } = _f, props = __objRest(_f, [
+      "variant",
+      "label",
+      "prefix",
+      "suffix",
+      "helperText",
+      "className",
+      "labelClass",
+      "helperTextClass",
+      "onChange",
+      "id",
+      "hasError",
+      "loading",
+      "disabled",
+      "rows",
+      "resize",
+      "readOnly",
+      "dark"
+    ]);
+    const generatedId = React.useId();
+    const textareaId = id || `textarea-${generatedId}`;
+    const handleChange = (e) => onChange == null ? void 0 : onChange(e.target.value);
+    const hasPrefix = !!prefix;
+    const hasSuffix = !!suffix;
+    const combinedClass = cn(
+      "form-field",
+      "textarea-field",
+      { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
+      { [`variant-${variant}`]: variant },
+      { loading },
+      { [`resize-${resize}`]: resize },
+      { "read-only": readOnly },
+      className
+    );
+    return /* @__PURE__ */ jsxs("article", { className: cn("textarea-container", { dark }), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: cn("textarea-label", labelClass), children: label }),
+      /* @__PURE__ */ jsxs("section", { className: cn("textarea-wrapper", { loading }), children: [
+        prefix && /* @__PURE__ */ jsx("article", { className: "textarea-prefix", children: prefix }),
+        /* @__PURE__ */ jsx(
+          "textarea",
+          __spreadValues({
+            ref,
+            id: textareaId,
+            className: combinedClass,
+            onChange: handleChange,
+            disabled: disabled || loading,
+            rows,
+            readOnly
+          }, props)
+        ),
+        loading ? /* @__PURE__ */ jsx("article", { className: "textarea-suffix", children: /* @__PURE__ */ jsx(Spinner, {}) }) : suffix && /* @__PURE__ */ jsx("article", { className: "textarea-suffix", children: suffix })
+      ] }),
+      helperText && /* @__PURE__ */ jsx(
+        "small",
+        {
+          className: cn("textarea-helper-text", helperTextClass),
+          style: { color: hasError ? "var(--color-danger)" : "inherit" },
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+TextArea.displayName = "TextArea";
 const ArrowDownIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", children: /* @__PURE__ */ 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"
+    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\n       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"
   }
 ) });
-const Select = (_g) => {
-  var _h = _g, {
-    variant = "primary",
-    label,
-    prefix,
-    suffix,
-    helperText,
-    className,
-    labelClass,
-    helperTextClass,
-    onChange,
-    id,
-    hasError,
-    loading = false,
-    disabled,
-    options = [],
-    placeholder,
-    children,
-    value,
-    readOnly = false,
-    dark = false
-  } = _h, props = __objRest(_h, [
-    "variant",
-    "label",
-    "prefix",
-    "suffix",
-    "helperText",
-    "className",
-    "labelClass",
-    "helperTextClass",
-    "onChange",
-    "id",
-    "hasError",
-    "loading",
-    "disabled",
-    "options",
-    "placeholder",
-    "children",
-    "value",
-    "readOnly",
-    "dark"
-  ]);
-  const generatedId = React.useId();
-  const selectId = id || `select-${generatedId}`;
-  const handleChange = (e) => {
-    if (!readOnly) {
-      onChange == null ? void 0 : onChange(e.target.value);
-    }
-  };
-  const hasPrefix = !!prefix;
-  const hasSuffix = !!suffix || !loading;
-  const combinedClass = cn(
-    "form-field",
-    { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
-    { [`variant-${variant}`]: variant },
-    { loading },
-    { "read-only": readOnly },
-    className
-  );
-  return /* @__PURE__ */ jsxs("article", { className: cn("select-container", { dark }), children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: cn("select-label", labelClass), children: label }),
-    /* @__PURE__ */ jsxs("section", { className: cn("select-wrapper", { loading }), children: [
-      prefix && /* @__PURE__ */ jsx("article", { className: "select-prefix", children: prefix }),
+const Select = React.forwardRef(
+  (_g, ref) => {
+    var _h = _g, {
+      variant = "primary",
+      label,
+      prefix,
+      suffix,
+      helperText,
+      className,
+      labelClass,
+      helperTextClass,
+      onChange,
+      id,
+      hasError,
+      loading = false,
+      disabled,
+      options = [],
+      placeholder,
+      children,
+      value,
+      readOnly = false,
+      dark = false
+    } = _h, props = __objRest(_h, [
+      "variant",
+      "label",
+      "prefix",
+      "suffix",
+      "helperText",
+      "className",
+      "labelClass",
+      "helperTextClass",
+      "onChange",
+      "id",
+      "hasError",
+      "loading",
+      "disabled",
+      "options",
+      "placeholder",
+      "children",
+      "value",
+      "readOnly",
+      "dark"
+    ]);
+    const generatedId = React.useId();
+    const selectId = id || `select-${generatedId}`;
+    const handleChange = (e) => {
+      if (!readOnly) {
+        onChange == null ? void 0 : onChange(e.target.value);
+      }
+    };
+    const hasPrefix = !!prefix;
+    const hasSuffix = !!suffix || !loading;
+    const combinedClass = cn(
+      "form-field",
+      { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
+      { [`variant-${variant}`]: variant },
+      { loading },
+      { "read-only": readOnly },
+      className
+    );
+    return /* @__PURE__ */ jsxs("article", { className: cn("select-container", { dark }), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: cn("select-label", labelClass), children: label }),
+      /* @__PURE__ */ jsxs("section", { className: cn("select-wrapper", { loading }), children: [
+        prefix && /* @__PURE__ */ jsx("article", { className: "select-prefix", children: prefix }),
+        /* @__PURE__ */ jsxs(
+          "select",
+          __spreadProps(__spreadValues({
+            ref,
+            id: selectId,
+            className: combinedClass,
+            onChange: handleChange,
+            disabled: disabled || loading,
+            value: value != null ? value : ""
+          }, props), {
+            children: [
+              placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
+              options.length > 0 ? options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)) : children
+            ]
+          })
+        ),
+        loading ? /* @__PURE__ */ jsx("article", { className: "select-suffix", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx("article", { className: "select-suffix", children: suffix || ArrowDownIcon })
+      ] }),
+      helperText && /* @__PURE__ */ jsx(
+        "small",
+        {
+          className: cn("select-helper-text", helperTextClass),
+          style: { color: hasError ? "var(--color-danger)" : "inherit" },
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+Select.displayName = "Select";
+const Toggle = React.forwardRef(
+  (_i, ref) => {
+    var _j = _i, {
+      color = "var(--color-primary)",
+      size = "3.75rem",
+      checked = false,
+      onChange,
+      label,
+      labelPosition = "right",
+      className
+    } = _j, rest = __objRest(_j, [
+      "color",
+      "size",
+      "checked",
+      "onChange",
+      "label",
+      "labelPosition",
+      "className"
+    ]);
+    return /* @__PURE__ */ jsxs("label", { className: cn("switch-container", labelPosition, className), children: [
       /* @__PURE__ */ jsxs(
-        "select",
-        __spreadProps(__spreadValues({
-          id: selectId,
-          className: combinedClass,
-          onChange: handleChange,
-          disabled: disabled || loading,
-          value: value != null ? value : ""
-        }, props), {
+        "div",
+        {
+          className: "toggle-switch",
+          style: { "--switch-size": size, "--switch-color": color },
           children: [
-            placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
-            options.length > 0 ? options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)) : children
+            /* @__PURE__ */ jsx(
+              "input",
+              __spreadValues({
+                ref,
+                type: "checkbox",
+                role: "switch",
+                checked,
+                onChange: (e) => onChange == null ? void 0 : onChange(e.target.checked)
+              }, rest)
+            ),
+            /* @__PURE__ */ jsx("span", { className: "slider" })
           ]
-        })
-      ),
-      loading ? /* @__PURE__ */ jsx("article", { className: "select-suffix", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx("article", { className: "select-suffix", children: suffix || ArrowDownIcon })
-    ] }),
-    helperText && /* @__PURE__ */ jsx(
-      "small",
-      {
-        className: cn("select-helper-text", helperTextClass),
-        style: { color: hasError ? "var(--color-danger)" : "inherit" },
-        children: helperText
-      }
-    )
-  ] });
-};
-const Toggle = (_i) => {
-  var _j = _i, {
-    color = "var(--color-primary)",
-    size = "3.75rem",
-    checked = false,
-    onChange,
-    label,
-    labelPosition = "right",
-    className
-  } = _j, rest = __objRest(_j, [
-    "color",
-    "size",
-    "checked",
-    "onChange",
-    "label",
-    "labelPosition",
-    "className"
-  ]);
-  return /* @__PURE__ */ jsxs("label", { className: cn("switch-container", labelPosition, className), children: [
-    /* @__PURE__ */ jsxs("div", { className: "toggle-switch", style: { "--switch-size": size, "--switch-color": color }, children: [
-      /* @__PURE__ */ jsx(
-        "input",
-        __spreadValues({
-          type: "checkbox",
-          role: "switch",
-          checked,
-          onChange: (e) => onChange == null ? void 0 : onChange(e.target.checked)
-        }, rest)
+        }
       ),
-      /* @__PURE__ */ jsx("span", { className: "slider" })
-    ] }),
-    label && /* @__PURE__ */ jsx("span", { className: "switch-label", children: label })
-  ] });
-};
+      label && /* @__PURE__ */ jsx("span", { className: "switch-label", children: label })
+    ] });
+  }
+);
+Toggle.displayName = "Toggle";
 const ButtonSelect = ({
   options,
   value,
@@ -950,136 +977,140 @@ const Menu = Object.assign(MenuComponent, {
   Content: MenuContent,
   Item: MenuItem
 });
-const Range = (_w) => {
-  var _x = _w, {
-    variant = "primary",
-    label,
-    helperText,
-    className,
-    labelClass,
-    rangeLabelClass,
-    tickClass,
-    helperTextClass,
-    onChange,
-    id,
-    hasError,
-    loading = false,
-    disabled,
-    min = 0,
-    max = 100,
-    step = 1,
-    value = min,
-    minLabel,
-    maxLabel,
-    showValue = false,
-    showTicks = false,
-    formatValue,
-    dark = false
-  } = _x, props = __objRest(_x, [
-    "variant",
-    "label",
-    "helperText",
-    "className",
-    "labelClass",
-    "rangeLabelClass",
-    "tickClass",
-    "helperTextClass",
-    "onChange",
-    "id",
-    "hasError",
-    "loading",
-    "disabled",
-    "min",
-    "max",
-    "step",
-    "value",
-    "minLabel",
-    "maxLabel",
-    "showValue",
-    "showTicks",
-    "formatValue",
-    "dark"
-  ]);
-  const generatedId = React.useId();
-  const rangeId = id || `range-${generatedId}`;
-  const [isInteracting, setIsInteracting] = React.useState(false);
-  const handleChange = (e) => {
-    const newValue = parseFloat(e.target.value);
-    onChange == null ? void 0 : onChange(newValue);
-  };
-  const handleMouseDown = () => {
-    setIsInteracting(true);
-  };
-  const handleMouseUp = () => {
-    setIsInteracting(false);
-  };
-  const handleTouchStart = () => {
-    setIsInteracting(true);
-  };
-  const handleTouchEnd = () => {
-    setIsInteracting(false);
-  };
-  const percentage = (value - min) / (max - min) * 100;
-  const ticks = React.useMemo(() => {
-    if (!showTicks) return [];
-    const tickCount = Math.floor((max - min) / step) + 1;
-    return Array.from({ length: tickCount }, (_, i) => min + i * step);
-  }, [showTicks, min, max, step]);
-  const displayValue = formatValue ? formatValue(value) : value;
-  const rangeClass = cn("range-input", { [`variant-${variant}`]: variant }, { loading }, className);
-  return /* @__PURE__ */ jsxs("article", { className: cn("range-container", { dark }), children: [
-    label && /* @__PURE__ */ jsx("label", { htmlFor: rangeId, className: cn("range-label", labelClass), children: label }),
-    /* @__PURE__ */ jsxs("section", { className: cn("range-wrapper", { loading }), children: [
-      loading && /* @__PURE__ */ jsx("article", { className: "range-spinner", children: /* @__PURE__ */ jsx(Spinner, {}) }),
-      /* @__PURE__ */ jsxs("div", { className: cn("range-input-wrapper", { "has-value-tooltip": showValue }), children: [
-        showValue && isInteracting && /* @__PURE__ */ jsx("div", { className: "range-value-tooltip", style: { left: `${percentage}%` }, children: displayValue }),
-        /* @__PURE__ */ jsx(
-          "input",
-          __spreadValues({
-            id: rangeId,
-            type: "range",
-            className: rangeClass,
-            onChange: handleChange,
-            onMouseDown: handleMouseDown,
-            onMouseUp: handleMouseUp,
-            onTouchStart: handleTouchStart,
-            onTouchEnd: handleTouchEnd,
-            disabled: disabled || loading,
-            min,
-            max,
-            step,
-            value,
-            style: {
-              background: `linear-gradient(to right,
-                var(--range-fill-color, var(--color-${variant})) 0%,                 var(--range-fill-color, var(--color-${variant})) ${percentage}%,                 var(--range-track-color, #e5e7eb) ${percentage}%,                 var(--range-track-color, #e5e7eb) 100%)`
-            }
-          }, props)
-        ),
-        showTicks && /* @__PURE__ */ jsx("div", { className: cn("range-ticks"), children: ticks.map((tick) => /* @__PURE__ */ jsx(
-          "span",
-          {
-            className: cn("range-tick", tickClass),
-            style: { left: `${(tick - min) / (max - min) * 100}%` },
-            children: tick
-          },
-          tick
-        )) })
+const Range = React.forwardRef(
+  (_w, ref) => {
+    var _x = _w, {
+      variant = "primary",
+      label,
+      helperText,
+      className,
+      labelClass,
+      rangeLabelClass,
+      tickClass,
+      helperTextClass,
+      onChange,
+      id,
+      hasError,
+      loading = false,
+      disabled,
+      min = 0,
+      max = 100,
+      step = 1,
+      value = min,
+      minLabel,
+      maxLabel,
+      showValue = false,
+      showTicks = false,
+      formatValue,
+      dark = false
+    } = _x, props = __objRest(_x, [
+      "variant",
+      "label",
+      "helperText",
+      "className",
+      "labelClass",
+      "rangeLabelClass",
+      "tickClass",
+      "helperTextClass",
+      "onChange",
+      "id",
+      "hasError",
+      "loading",
+      "disabled",
+      "min",
+      "max",
+      "step",
+      "value",
+      "minLabel",
+      "maxLabel",
+      "showValue",
+      "showTicks",
+      "formatValue",
+      "dark"
+    ]);
+    const generatedId = React.useId();
+    const rangeId = id || `range-${generatedId}`;
+    const [isInteracting, setIsInteracting] = React.useState(false);
+    const handleChange = (e) => {
+      const newValue = parseFloat(e.target.value);
+      onChange == null ? void 0 : onChange(newValue);
+    };
+    const handleMouseDown = () => {
+      setIsInteracting(true);
+    };
+    const handleMouseUp = () => {
+      setIsInteracting(false);
+    };
+    const handleTouchStart = () => {
+      setIsInteracting(true);
+    };
+    const handleTouchEnd = () => {
+      setIsInteracting(false);
+    };
+    const percentage = (value - min) / (max - min) * 100;
+    const ticks = React.useMemo(() => {
+      if (!showTicks) return [];
+      const tickCount = Math.floor((max - min) / step) + 1;
+      return Array.from({ length: tickCount }, (_, i) => min + i * step);
+    }, [showTicks, min, max, step]);
+    const displayValue = formatValue ? formatValue(value) : value;
+    const rangeClass = cn("range-input", { [`variant-${variant}`]: variant }, { loading }, className);
+    return /* @__PURE__ */ jsxs("article", { className: cn("range-container", { dark }), children: [
+      label && /* @__PURE__ */ jsx("label", { htmlFor: rangeId, className: cn("range-label", labelClass), children: label }),
+      /* @__PURE__ */ jsxs("section", { className: cn("range-wrapper", { loading }), children: [
+        loading && /* @__PURE__ */ jsx("article", { className: "range-spinner", children: /* @__PURE__ */ jsx(Spinner, {}) }),
+        /* @__PURE__ */ jsxs("div", { className: cn("range-input-wrapper", { "has-value-tooltip": showValue }), children: [
+          showValue && isInteracting && /* @__PURE__ */ jsx("div", { className: "range-value-tooltip", style: { left: `${percentage}%` }, children: displayValue }),
+          /* @__PURE__ */ jsx(
+            "input",
+            __spreadValues({
+              ref,
+              id: rangeId,
+              type: "range",
+              className: rangeClass,
+              onChange: handleChange,
+              onMouseDown: handleMouseDown,
+              onMouseUp: handleMouseUp,
+              onTouchStart: handleTouchStart,
+              onTouchEnd: handleTouchEnd,
+              disabled: disabled || loading,
+              min,
+              max,
+              step,
+              value,
+              style: {
+                background: `linear-gradient(to right,
+                  var(--range-fill-color, var(--color-${variant})) 0%,                   var(--range-fill-color, var(--color-${variant})) ${percentage}%,                   var(--range-track-color, #e5e7eb) ${percentage}%,                   var(--range-track-color, #e5e7eb) 100%)`
+              }
+            }, props)
+          ),
+          showTicks && /* @__PURE__ */ jsx("div", { className: cn("range-ticks"), children: ticks.map((tick) => /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn("range-tick", tickClass),
+              style: { left: `${(tick - min) / (max - min) * 100}%` },
+              children: tick
+            },
+            tick
+          )) })
+        ] }),
+        (minLabel || maxLabel) && /* @__PURE__ */ jsxs("div", { className: cn("range-labels", rangeLabelClass), children: [
+          /* @__PURE__ */ jsx("span", { className: "range-label-min", children: minLabel || "" }),
+          /* @__PURE__ */ jsx("span", { className: "range-label-max", children: maxLabel || "" })
+        ] })
       ] }),
-      (minLabel || maxLabel) && /* @__PURE__ */ jsxs("div", { className: cn("range-labels", rangeLabelClass), children: [
-        /* @__PURE__ */ jsx("span", { className: "range-label-min", children: minLabel || "" }),
-        /* @__PURE__ */ jsx("span", { className: "range-label-max", children: maxLabel || "" })
-      ] })
-    ] }),
-    helperText && /* @__PURE__ */ jsx(
-      "small",
-      {
-        className: cn("range-helper-text", helperTextClass),
-        style: { color: hasError ? "var(--color-danger)" : "inherit" },
-        children: helperText
-      }
-    )
-  ] });
-};
+      helperText && /* @__PURE__ */ jsx(
+        "small",
+        {
+          className: cn("range-helper-text", helperTextClass),
+          style: { color: hasError ? "var(--color-danger)" : "inherit" },
+          children: helperText
+        }
+      )
+    ] });
+  }
+);
+Range.displayName = "Range";
 export {
   Button,
   ButtonSelect,

package/dist/klip-components.umd.js

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

package/package.json

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