klip-components 0.21.4 → 0.22.0

package/dist/index.d.ts

@@ -251,6 +251,8 @@ export declare interface InputProps extends HtmlInput {
     loading?: boolean;
     /** Whether the input is read-only */
     readOnly?: boolean;
+    /** Whether the input is in dark mode */
+    dark?: boolean;
 }
 
 export declare type InputVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'ghost';
@@ -485,6 +487,8 @@ export declare interface RangeProps extends HtmlRange {
     showTicks?: boolean;
     /** Custom format function for displaying the value */
     formatValue?: (value: number) => string;
+    /** Whether the range is in dark mode */
+    dark?: boolean;
 }
 
 export declare type RangeVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'ghost';
@@ -524,6 +528,8 @@ export declare interface SelectProps extends HtmlSelect {
     placeholder?: string;
     /** Whether the select is read-only */
     readOnly?: boolean;
+    /** Whether the select is in dark mode */
+    dark?: boolean;
 }
 
 export declare type SelectVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'ghost';
@@ -781,6 +787,8 @@ export declare interface TextAreaProps extends HtmlTextArea {
     resize?: 'none' | 'both' | 'horizontal' | 'vertical';
     /** Whether the textarea is read-only */
     readOnly?: boolean;
+    /** Whether the textarea is in dark mode */
+    dark?: boolean;
 }
 
 export declare type TextAreaVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'ghost';

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}=a,v=c(a,["variant","color","size","shape","startIcon","endIcon","className","children","loading","disabled","hover"]);const j="filled"===r?`btn-${t}`:`btn-${r}-${t}`;return d.jsx("button",o(i({className:x("btn",j,`btn-${s}`,`btn-${l}`,{"btn-loading":m,"btn-no-hover":!b},u),disabled:g||m},v),{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]),w=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}))},C=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}))},k=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=w,O.Body=C,O.Footer=k,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}=a,w=c(a,["variant","type","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","readOnly"]);const C=h.useId(),k=b||`input-${C}`,T=x("form-field",{"has-prefix":!!l,"has-suffix":!!n},{[`variant-${r}`]:r},{loading:j},{"read-only":N},u);return d.jsxs("article",{className:"input-container",children:[s&&d.jsx("label",{htmlFor:k,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:k,type:t,className:T,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:w=1,value:C=y,minLabel:k,maxLabel:T,showValue:M=!1,showTicks:O=!1,formatValue:E}=a,$=c(a,["variant","label","helperText","className","labelClass","rangeLabelClass","tickClass","helperTextClass","onChange","id","hasError","loading","disabled","min","max","step","value","minLabel","maxLabel","showValue","showTicks","formatValue"]);const P=h.useId(),z=g||`range-${P}`,[S,A]=h.useState(!1),B=(C-y)/(N-y)*100,I=h.useMemo(()=>{if(!O)return[];const e=Math.floor((N-y)/w)+1;return Array.from({length:e},(e,a)=>y+a*w)},[O,y,N,w]),L=E?E(C):C,q=x("range-input",{[`variant-${r}`]:r},{loading:v},l);return d.jsxs("article",{className:"range-container",children:[t&&d.jsx("label",{htmlFor:z,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&&S&&d.jsx("div",{className:"range-value-tooltip",style:{left:`${B}%`},children:L}),d.jsx("input",i({id:z,type:"range",className:q,onChange:e=>{const a=parseFloat(e.target.value);null==m||m(a)},onMouseDown:()=>{A(!0)},onMouseUp:()=>{A(!1)},onTouchStart:()=>{A(!0)},onTouchEnd:()=>{A(!1)},disabled:j||v,min:y,max:N,step:w,value:C,style:{background:`linear-gradient(to right,\n                var(--range-fill-color, var(--color-${r})) 0%,                 var(--range-fill-color, var(--color-${r})) ${B}%,                 var(--range-track-color, #e5e7eb) ${B}%,                 var(--range-track-color, #e5e7eb) 100%)`}},$)),O&&d.jsx("div",{className:x("range-ticks"),children:I.map(e=>d.jsx("span",{className:x("range-tick",u),style:{left:(e-y)/(N-y)*100+"%"},children:e},e))})]}),(k||T)&&d.jsxs("div",{className:x("range-labels",o),children:[d.jsx("span",{className:"range-label-min",children:k||""}),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:w=[],placeholder:C,children:k,value:T,readOnly:M=!1}=a,O=c(a,["variant","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","options","placeholder","children","value","readOnly"]);const E=h.useId(),$=b||`select-${E}`,P=x("form-field",{"has-prefix":!!s,"has-suffix":!!l||!y},{[`variant-${r}`]:r},{loading:y},{"read-only":M},u);return d.jsxs("article",{className:"select-container",children:[t&&d.jsx("label",{htmlFor:$,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:$,className:P,onChange:e=>{M||null==g||g(e.target.value)},disabled:N||y,value:null!=T?T:""},O),{children:[C&&d.jsx("option",{value:"",disabled:!0,hidden:!0,children:C}),w.length>0?w.map(e=>d.jsx("option",{value:e.value,disabled:e.disabled,children:e.label},e.value)):k]})),y?d.jsx("article",{className:"select-suffix",children:d.jsx(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=C,exports.TableCell=M,exports.TableFooter=k,exports.TableHeader=w,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:w=!1}=a,C=c(a,["variant","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","rows","resize","readOnly"]);const k=h.useId(),T=g||`textarea-${k}`,M=x("form-field","textarea-field",{"has-prefix":!!s,"has-suffix":!!l},{[`variant-${r}`]:r},{loading:v},{[`resize-${N}`]:N},{"read-only":w},o);return d.jsxs("article",{className:"textarea-container",children:[t&&d.jsx("label",{htmlFor:T,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:T,className:M,onChange:e=>null==m?void 0:m(e.target.value),disabled:j||v,rows:y,readOnly:w},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"})}),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}=a,v=c(a,["variant","color","size","shape","startIcon","endIcon","className","children","loading","disabled","hover"]);const j="filled"===r?`btn-${t}`:`btn-${r}-${t}`;return d.jsx("button",o(i({className:x("btn",j,`btn-${s}`,`btn-${l}`,{"btn-loading":m,"btn-no-hover":!b},u),disabled:g||m},v),{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]),w=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}))},k=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=w,O.Body=k,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:w=!1}=a,k=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:w}),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},k)),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:w=1,value:k=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=(k-y)/(N-y)*100,L=h.useMemo(()=>{if(!O)return[];const e=Math.floor((N-y)/w)+1;return Array.from({length:e},(e,a)=>y+a*w)},[O,y,N,w]),q=E?E(k):k,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:w,value:k,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:w=[],placeholder:k,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:[k&&d.jsx("option",{value:"",disabled:!0,hidden:!0,children:k}),w.length>0?w.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=k,exports.TableCell=M,exports.TableFooter=C,exports.TableHeader=w,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:w=!1,dark:k=!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":w},o);return d.jsxs("article",{className:x("textarea-container",{dark:k}),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:w},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;

package/dist/klip-components.es.js

@@ -160,7 +160,8 @@ const Input = (_c) => {
     hasError,
     loading = false,
     disabled,
-    readOnly = false
+    readOnly = false,
+    dark = false
   } = _d, props = __objRest(_d, [
     "variant",
     "type",
@@ -176,7 +177,8 @@ const Input = (_c) => {
     "hasError",
     "loading",
     "disabled",
-    "readOnly"
+    "readOnly",
+    "dark"
   ]);
   const generatedId = React.useId();
   const inputId = id || `input-${generatedId}`;
@@ -191,7 +193,7 @@ const Input = (_c) => {
     { "read-only": readOnly },
     className
   );
-  return /* @__PURE__ */ jsxs("article", { className: "input-container", children: [
+  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 }),
@@ -235,7 +237,8 @@ const TextArea = (_e) => {
     disabled,
     rows = 4,
     resize = "vertical",
-    readOnly = false
+    readOnly = false,
+    dark = false
   } = _f, props = __objRest(_f, [
     "variant",
     "label",
@@ -252,7 +255,8 @@ const TextArea = (_e) => {
     "disabled",
     "rows",
     "resize",
-    "readOnly"
+    "readOnly",
+    "dark"
   ]);
   const generatedId = React.useId();
   const textareaId = id || `textarea-${generatedId}`;
@@ -269,7 +273,7 @@ const TextArea = (_e) => {
     { "read-only": readOnly },
     className
   );
-  return /* @__PURE__ */ jsxs("article", { className: "textarea-container", children: [
+  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 }),
@@ -322,7 +326,8 @@ const Select = (_g) => {
     placeholder,
     children,
     value,
-    readOnly = false
+    readOnly = false,
+    dark = false
   } = _h, props = __objRest(_h, [
     "variant",
     "label",
@@ -341,7 +346,8 @@ const Select = (_g) => {
     "placeholder",
     "children",
     "value",
-    "readOnly"
+    "readOnly",
+    "dark"
   ]);
   const generatedId = React.useId();
   const selectId = id || `select-${generatedId}`;
@@ -360,7 +366,7 @@ const Select = (_g) => {
     { "read-only": readOnly },
     className
   );
-  return /* @__PURE__ */ jsxs("article", { className: "select-container", children: [
+  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 }),
@@ -964,7 +970,8 @@ const Range = (_w) => {
     maxLabel,
     showValue = false,
     showTicks = false,
-    formatValue
+    formatValue,
+    dark = false
   } = _x, props = __objRest(_x, [
     "variant",
     "label",
@@ -987,7 +994,8 @@ const Range = (_w) => {
     "maxLabel",
     "showValue",
     "showTicks",
-    "formatValue"
+    "formatValue",
+    "dark"
   ]);
   const generatedId = React.useId();
   const rangeId = id || `range-${generatedId}`;
@@ -1016,7 +1024,7 @@ const Range = (_w) => {
   }, [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: "range-container", children: [
+  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, {}) }),

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}=r,b=u(r,["variant","color","size","shape","startIcon","endIcon","className","children","loading","disabled","hover"]);const j="filled"===t?`btn-${l}`:`btn-${t}-${l}`;return a.jsx("button",h(d({className:g("btn",j,`btn-${n}`,`btn-${s}`,{"btn-loading":p,"btn-no-hover":!f},c),disabled:x||p},b),{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="...",w=({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]),C=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}))},k=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=C,E.Body=k,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}=t,w=u(t,["variant","type","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","readOnly"]);const C=r.useId(),k=f||`input-${C}`,T=g("form-field",{"has-prefix":!!i,"has-suffix":!!o},{[`variant-${l}`]:l},{loading:j},{"read-only":N},h);return a.jsxs("article",{className:"input-container",children:[s&&a.jsx("label",{htmlFor:k,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:k,type:n,className:T,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=w({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:w=1,value:C=y,minLabel:k,maxLabel:T,showValue:M=!1,showTicks:O=!1,formatValue:E}=t,$=u(t,["variant","label","helperText","className","labelClass","rangeLabelClass","tickClass","helperTextClass","onChange","id","hasError","loading","disabled","min","max","step","value","minLabel","maxLabel","showValue","showTicks","formatValue"]);const P=r.useId(),z=x||`range-${P}`,[S,A]=r.useState(!1),R=(C-y)/(N-y)*100,B=r.useMemo(()=>{if(!O)return[];const e=Math.floor((N-y)/w)+1;return Array.from({length:e},(e,a)=>y+a*w)},[O,y,N,w]),I=E?E(C):C,L=g("range-input",{[`variant-${l}`]:l},{loading:b},i);return a.jsxs("article",{className:"range-container",children:[n&&a.jsx("label",{htmlFor:z,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&&S&&a.jsx("div",{className:"range-value-tooltip",style:{left:`${R}%`},children:I}),a.jsx("input",d({id:z,type:"range",className:L,onChange:e=>{const a=parseFloat(e.target.value);null==p||p(a)},onMouseDown:()=>{A(!0)},onMouseUp:()=>{A(!1)},onTouchStart:()=>{A(!0)},onTouchEnd:()=>{A(!1)},disabled:j||b,min:y,max:N,step:w,value:C,style:{background:`linear-gradient(to right,\n                var(--range-fill-color, var(--color-${l})) 0%,                 var(--range-fill-color, var(--color-${l})) ${R}%,                 var(--range-track-color, #e5e7eb) ${R}%,                 var(--range-track-color, #e5e7eb) 100%)`}},$)),O&&a.jsx("div",{className:g("range-ticks"),children:B.map(e=>a.jsx("span",{className:g("range-tick",h),style:{left:(e-y)/(N-y)*100+"%"},children:e},e))})]}),(k||T)&&a.jsxs("div",{className:g("range-labels",c),children:[a.jsx("span",{className:"range-label-min",children:k||""}),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:w=[],placeholder:C,children:k,value:T,readOnly:M=!1}=t,O=u(t,["variant","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","options","placeholder","children","value","readOnly"]);const E=r.useId(),$=f||`select-${E}`,P=g("form-field",{"has-prefix":!!s,"has-suffix":!!i||!j},{[`variant-${l}`]:l},{loading:j},{"read-only":M},c);return a.jsxs("article",{className:"select-container",children:[n&&a.jsx("label",{htmlFor:$,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:$,className:P,onChange:e=>{M||null==x||x(e.target.value)},disabled:N||j,value:null!=T?T:""},O),{children:[C&&a.jsx("option",{value:"",disabled:!0,hidden:!0,children:C}),w.length>0?w.map(e=>a.jsx("option",{value:e.value,disabled:e.disabled,children:e.label},e.value)):k]})),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=k,e.TableCell=O,e.TableFooter=T,e.TableHeader=C,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:w=!1}=t,C=u(t,["variant","label","prefix","suffix","helperText","className","labelClass","helperTextClass","onChange","id","hasError","loading","disabled","rows","resize","readOnly"]);const k=r.useId(),T=x||`textarea-${k}`,M=g("form-field","textarea-field",{"has-prefix":!!s,"has-suffix":!!i},{[`variant-${l}`]:l},{loading:b},{[`resize-${N}`]:N},{"read-only":w},c);return a.jsxs("article",{className:"textarea-container",children:[n&&a.jsx("label",{htmlFor:T,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:T,className:M,onChange:e=>null==p?void 0:p(e.target.value),disabled:j||b,rows:y,readOnly:w},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=w,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 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}=r,b=u(r,["variant","color","size","shape","startIcon","endIcon","className","children","loading","disabled","hover"]);const j="filled"===t?`btn-${l}`:`btn-${t}-${l}`;return a.jsx("button",h(d({className:g("btn",j,`btn-${n}`,`btn-${s}`,{"btn-loading":p,"btn-no-hover":!f},c),disabled:x||p},b),{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="...",w=({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]),k=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=k,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:w=!1}=t,k=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:w}),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},k)),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=w({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:w=1,value:k=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=(k-y)/(N-y)*100,I=r.useMemo(()=>{if(!O)return[];const e=Math.floor((N-y)/w)+1;return Array.from({length:e},(e,a)=>y+a*w)},[O,y,N,w]),L=E?E(k):k,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:w,value:k,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:w=[],placeholder:k,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:[k&&a.jsx("option",{value:"",disabled:!0,hidden:!0,children:k}),w.length>0?w.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=k,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:w=!1,dark:k=!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":w},c);return a.jsxs("article",{className:g("textarea-container",{dark:k}),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:w},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=w,Object.defineProperty(e,Symbol.toStringTag,{value:"Module"})});

package/package.json

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