klip-components 0.22.0 → 0.23.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/dist/index.d.ts +9 -7
  2. package/dist/klip-components.cjs.js +1 -1
  3. package/dist/klip-components.es.js +490 -456
  4. package/dist/klip-components.umd.js +1 -1
  5. package/package.json +1 -1
package/dist/index.d.ts CHANGED
@@ -33,7 +33,7 @@ export declare interface BorderRadius {
33
33
  * // Link button
34
34
  * <Button variant="link" color="primary">Learn more</Button>
35
35
  */
36
- export declare const Button: default_2.FC<ButtonProps>;
36
+ export declare const Button: default_2.ForwardRefExoticComponent<ButtonProps & default_2.RefAttributes<HTMLButtonElement>>;
37
37
 
38
38
  /** Color type for semantic color options */
39
39
  export declare type ButtonColor = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';
@@ -69,6 +69,8 @@ export declare interface ButtonProps extends default_2.ButtonHTMLAttributes<HTML
69
69
  isOpen?: boolean;
70
70
  /** Whether to enable hover effects (defaults to true) */
71
71
  hover?: boolean;
72
+ /** Whether the button is in dark mode */
73
+ dark?: boolean;
72
74
  }
73
75
 
74
76
  export declare const ButtonSelect: default_2.FC<ButtonSelectProps>;
@@ -162,7 +164,7 @@ export declare type HtmlTextArea = Omit<default_2.TextareaHTMLAttributes<HTMLTex
162
164
  * A utility type to extract valid HTML attributes for an input element,
163
165
  * while omitting props that are explicitly handled by the Toggle component.
164
166
  */
165
- declare type HtmlToggle = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'checked' | 'onChange'>;
167
+ declare type HtmlToggle = Omit<default_2.InputHTMLAttributes<HTMLInputElement>, 'type' | 'size' | 'checked' | 'onChange'>;
166
168
 
167
169
  /**
168
170
  * A versatile input component with support for variants, labels, prefixes, and suffixes.
@@ -224,7 +226,7 @@ declare type HtmlToggle = Omit<React.InputHTMLAttributes<HTMLInputElement>, 'typ
224
226
  * />
225
227
  * );
226
228
  */
227
- export declare const Input: default_2.FC<InputProps>;
229
+ export declare const Input: default_2.ForwardRefExoticComponent<InputProps & default_2.RefAttributes<HTMLInputElement>>;
228
230
 
229
231
  export declare interface InputProps extends HtmlInput {
230
232
  /** Callback function invoked when the input value changes */
@@ -445,7 +447,7 @@ declare interface Props_2 {
445
447
  * );
446
448
  * };
447
449
  */
448
- declare const Range_2: default_2.FC<RangeProps>;
450
+ declare const Range_2: default_2.ForwardRefExoticComponent<RangeProps & default_2.RefAttributes<HTMLInputElement>>;
449
451
  export { Range_2 as Range }
450
452
 
451
453
  export declare interface RangeProps extends HtmlRange {
@@ -493,7 +495,7 @@ export declare interface RangeProps extends HtmlRange {
493
495
 
494
496
  export declare type RangeVariant = 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'ghost';
495
497
 
496
- export declare const Select: default_2.FC<SelectProps>;
498
+ export declare const Select: default_2.ForwardRefExoticComponent<SelectProps & default_2.RefAttributes<HTMLSelectElement>>;
497
499
 
498
500
  export declare interface SelectOption {
499
501
  value: string;
@@ -758,7 +760,7 @@ export declare interface TableRowProps extends default_2.HTMLAttributes<HTMLTabl
758
760
  * />
759
761
  * );
760
762
  */
761
- export declare const TextArea: default_2.FC<TextAreaProps>;
763
+ export declare const TextArea: default_2.ForwardRefExoticComponent<TextAreaProps & default_2.RefAttributes<HTMLTextAreaElement>>;
762
764
 
763
765
  export declare interface TextAreaProps extends HtmlTextArea {
764
766
  /** Callback function invoked when the textarea value changes */
@@ -848,7 +850,7 @@ export declare type ThemeOverride = {
848
850
  * );
849
851
  * };
850
852
  */
851
- export declare const Toggle: React.FC<ToggleProps>;
853
+ export declare const Toggle: default_2.ForwardRefExoticComponent<ToggleProps & default_2.RefAttributes<HTMLInputElement>>;
852
854
 
853
855
  export declare interface ToggleProps extends HtmlToggle {
854
856
  /** Color of the toggle when in the "on" state. */
package/dist/klip-components.cjs.js CHANGED
@@ -1 +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}))},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;
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"})}),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 CHANGED
@@ -93,344 +93,374 @@ const Spinner = ({ color = "currentColor", size = 24 }) => {
93
93
  /* @__PURE__ */ jsx("g", { className: "spinner_V8m1", children: /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9.5", fill: "none", strokeWidth: "3" }) })
94
94
  ] });
95
95
  };
96
- const Button = (_a) => {
97
- var _b = _a, {
98
- variant = "filled",
99
- color = "primary",
100
- size = "md",
101
- shape = "rectangle",
102
- startIcon,
103
- endIcon,
104
- className = "",
105
- children,
106
- loading,
107
- disabled,
108
- hover = true
109
- } = _b, props = __objRest(_b, [
110
- "variant",
111
- "color",
112
- "size",
113
- "shape",
114
- "startIcon",
115
- "endIcon",
116
- "className",
117
- "children",
118
- "loading",
119
- "disabled",
120
- "hover"
121
- ]);
122
- const variantClass = variant === "filled" ? `btn-${color}` : `btn-${variant}-${color}`;
123
- return /* @__PURE__ */ jsx(
124
- "button",
125
- __spreadProps(__spreadValues({
126
- className: cn(
127
- "btn",
128
- variantClass,
129
- `btn-${size}`,
130
- `btn-${shape}`,
96
+ const Button = React.forwardRef(
97
+ (_a, ref) => {
98
+ var _b = _a, {
99
+ variant = "filled",
100
+ color = "primary",
101
+ size = "md",
102
+ shape = "rectangle",
103
+ startIcon,
104
+ endIcon,
105
+ className = "",
106
+ children,
107
+ loading,
108
+ disabled,
109
+ hover = true,
110
+ dark = false
111
+ } = _b, props = __objRest(_b, [
112
+ "variant",
113
+ "color",
114
+ "size",
115
+ "shape",
116
+ "startIcon",
117
+ "endIcon",
118
+ "className",
119
+ "children",
120
+ "loading",
121
+ "disabled",
122
+ "hover",
123
+ "dark"
124
+ ]);
125
+ const variantClass = variant === "filled" ? `btn-${color}` : `btn-${variant}-${color}`;
126
+ return /* @__PURE__ */ jsx(
127
+ "button",
128
+ __spreadProps(__spreadValues({
129
+ ref,
130
+ className: cn(
131
+ "btn",
132
+ variantClass,
133
+ `btn-${size}`,
134
+ `btn-${shape}`,
135
+ {
136
+ "btn-loading": loading,
137
+ "btn-no-hover": !hover,
138
+ dark
139
+ },
140
+ className
141
+ ),
142
+ disabled: disabled || loading
143
+ }, props), {
144
+ children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
145
+ startIcon && /* @__PURE__ */ jsx("span", { className: "btn-icon-start", children: startIcon }),
146
+ children,
147
+ endIcon && /* @__PURE__ */ jsx("span", { className: "btn-icon-end", children: endIcon })
148
+ ] })
149
+ })
150
+ );
151
+ }
152
+ );
153
+ Button.displayName = "Button";
154
+ const Input = React.forwardRef(
155
+ (_c, ref) => {
156
+ var _d = _c, {
157
+ variant = "primary",
158
+ type = "text",
159
+ label,
160
+ prefix,
161
+ suffix,
162
+ helperText,
163
+ className,
164
+ labelClass,
165
+ helperTextClass,
166
+ onChange,
167
+ id,
168
+ hasError,
169
+ loading = false,
170
+ disabled,
171
+ readOnly = false,
172
+ dark = false
173
+ } = _d, props = __objRest(_d, [
174
+ "variant",
175
+ "type",
176
+ "label",
177
+ "prefix",
178
+ "suffix",
179
+ "helperText",
180
+ "className",
181
+ "labelClass",
182
+ "helperTextClass",
183
+ "onChange",
184
+ "id",
185
+ "hasError",
186
+ "loading",
187
+ "disabled",
188
+ "readOnly",
189
+ "dark"
190
+ ]);
191
+ const generatedId = React.useId();
192
+ const inputId = id || `input-${generatedId}`;
193
+ const handleChange = (e) => onChange == null ? void 0 : onChange(e.target.value);
194
+ const hasPrefix = !!prefix;
195
+ const hasSuffix = !!suffix;
196
+ const combinedClass = cn(
197
+ "form-field",
198
+ { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
199
+ { [`variant-${variant}`]: variant },
200
+ { loading },
201
+ { "read-only": readOnly },
202
+ className
203
+ );
204
+ return /* @__PURE__ */ jsxs("article", { className: cn("input-container", { dark }), children: [
205
+ label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: cn("input-label", labelClass), children: label }),
206
+ /* @__PURE__ */ jsxs("section", { className: cn("input-wrapper", { loading }), children: [
207
+ prefix && /* @__PURE__ */ jsx("article", { className: "input-prefix", children: prefix }),
208
+ /* @__PURE__ */ jsx(
209
+ "input",
210
+ __spreadValues({
211
+ ref,
212
+ id: inputId,
213
+ type,
214
+ className: combinedClass,
215
+ onChange: handleChange,
216
+ disabled: disabled || loading,
217
+ readOnly
218
+ }, props)
219
+ ),
220
+ loading ? /* @__PURE__ */ jsx("article", { className: "input-suffix", children: /* @__PURE__ */ jsx(Spinner, {}) }) : suffix && /* @__PURE__ */ jsx("article", { className: "input-suffix", children: suffix })
221
+ ] }),
222
+ helperText && /* @__PURE__ */ jsx(
223
+ "small",
131
224
  {
132
- "btn-loading": loading,
133
- "btn-no-hover": !hover
134
- },
135
- className
136
- ),
137
- disabled: disabled || loading
138
- }, props), {
139
- children: loading ? /* @__PURE__ */ jsx(Spinner, {}) : /* @__PURE__ */ jsxs(Fragment, { children: [
140
- startIcon && /* @__PURE__ */ jsx("span", { className: "btn-icon-start", children: startIcon }),
141
- children,
142
- endIcon && /* @__PURE__ */ jsx("span", { className: "btn-icon-end", children: endIcon })
143
- ] })
144
- })
145
- );
146
- };
147
- const Input = (_c) => {
148
- var _d = _c, {
149
- variant = "primary",
150
- type = "text",
151
- label,
152
- prefix,
153
- suffix,
154
- helperText,
155
- className,
156
- labelClass,
157
- helperTextClass,
158
- onChange,
159
- id,
160
- hasError,
161
- loading = false,
162
- disabled,
163
- readOnly = false,
164
- dark = false
165
- } = _d, props = __objRest(_d, [
166
- "variant",
167
- "type",
168
- "label",
169
- "prefix",
170
- "suffix",
171
- "helperText",
172
- "className",
173
- "labelClass",
174
- "helperTextClass",
175
- "onChange",
176
- "id",
177
- "hasError",
178
- "loading",
179
- "disabled",
180
- "readOnly",
181
- "dark"
182
- ]);
183
- const generatedId = React.useId();
184
- const inputId = id || `input-${generatedId}`;
185
- const handleChange = (e) => onChange == null ? void 0 : onChange(e.target.value);
186
- const hasPrefix = !!prefix;
187
- const hasSuffix = !!suffix;
188
- const combinedClass = cn(
189
- "form-field",
190
- { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
191
- { [`variant-${variant}`]: variant },
192
- { loading },
193
- { "read-only": readOnly },
194
- className
195
- );
196
- return /* @__PURE__ */ jsxs("article", { className: cn("input-container", { dark }), children: [
197
- label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, className: cn("input-label", labelClass), children: label }),
198
- /* @__PURE__ */ jsxs("section", { className: cn("input-wrapper", { loading }), children: [
199
- prefix && /* @__PURE__ */ jsx("article", { className: "input-prefix", children: prefix }),
200
- /* @__PURE__ */ jsx(
201
- "input",
202
- __spreadValues({
203
- id: inputId,
204
- type,
205
- className: combinedClass,
206
- onChange: handleChange,
207
- disabled: disabled || loading,
208
- readOnly
209
- }, props)
210
- ),
211
- loading ? /* @__PURE__ */ jsx("article", { className: "input-suffix", children: /* @__PURE__ */ jsx(Spinner, {}) }) : suffix && /* @__PURE__ */ jsx("article", { className: "input-suffix", children: suffix })
212
- ] }),
213
- helperText && /* @__PURE__ */ jsx(
214
- "small",
215
- {
216
- className: cn("input-helper-text", helperTextClass),
217
- style: { color: hasError ? "var(--color-danger)" : "inherit" },
218
- children: helperText
219
- }
220
- )
221
- ] });
222
- };
223
- const TextArea = (_e) => {
224
- var _f = _e, {
225
- variant = "primary",
226
- label,
227
- prefix,
228
- suffix,
229
- helperText,
230
- className,
231
- labelClass,
232
- helperTextClass,
233
- onChange,
234
- id,
235
- hasError,
236
- loading = false,
237
- disabled,
238
- rows = 4,
239
- resize = "vertical",
240
- readOnly = false,
241
- dark = false
242
- } = _f, props = __objRest(_f, [
243
- "variant",
244
- "label",
245
- "prefix",
246
- "suffix",
247
- "helperText",
248
- "className",
249
- "labelClass",
250
- "helperTextClass",
251
- "onChange",
252
- "id",
253
- "hasError",
254
- "loading",
255
- "disabled",
256
- "rows",
257
- "resize",
258
- "readOnly",
259
- "dark"
260
- ]);
261
- const generatedId = React.useId();
262
- const textareaId = id || `textarea-${generatedId}`;
263
- const handleChange = (e) => onChange == null ? void 0 : onChange(e.target.value);
264
- const hasPrefix = !!prefix;
265
- const hasSuffix = !!suffix;
266
- const combinedClass = cn(
267
- "form-field",
268
- "textarea-field",
269
- { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
270
- { [`variant-${variant}`]: variant },
271
- { loading },
272
- { [`resize-${resize}`]: resize },
273
- { "read-only": readOnly },
274
- className
275
- );
276
- return /* @__PURE__ */ jsxs("article", { className: cn("textarea-container", { dark }), children: [
277
- label && /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: cn("textarea-label", labelClass), children: label }),
278
- /* @__PURE__ */ jsxs("section", { className: cn("textarea-wrapper", { loading }), children: [
279
- prefix && /* @__PURE__ */ jsx("article", { className: "textarea-prefix", children: prefix }),
280
- /* @__PURE__ */ jsx(
281
- "textarea",
282
- __spreadValues({
283
- id: textareaId,
284
- className: combinedClass,
285
- onChange: handleChange,
286
- disabled: disabled || loading,
287
- rows,
288
- readOnly
289
- }, props)
290
- ),
291
- loading ? /* @__PURE__ */ jsx("article", { className: "textarea-suffix", children: /* @__PURE__ */ jsx(Spinner, {}) }) : suffix && /* @__PURE__ */ jsx("article", { className: "textarea-suffix", children: suffix })
292
- ] }),
293
- helperText && /* @__PURE__ */ jsx(
294
- "small",
295
- {
296
- className: cn("textarea-helper-text", helperTextClass),
297
- style: { color: hasError ? "var(--color-danger)" : "inherit" },
298
- children: helperText
299
- }
300
- )
301
- ] });
302
- };
225
+ className: cn("input-helper-text", helperTextClass),
226
+ style: { color: hasError ? "var(--color-danger)" : "inherit" },
227
+ children: helperText
228
+ }
229
+ )
230
+ ] });
231
+ }
232
+ );
233
+ Input.displayName = "Input";
234
+ const TextArea = React.forwardRef(
235
+ (_e, ref) => {
236
+ var _f = _e, {
237
+ variant = "primary",
238
+ label,
239
+ prefix,
240
+ suffix,
241
+ helperText,
242
+ className,
243
+ labelClass,
244
+ helperTextClass,
245
+ onChange,
246
+ id,
247
+ hasError,
248
+ loading = false,
249
+ disabled,
250
+ rows = 4,
251
+ resize = "vertical",
252
+ readOnly = false,
253
+ dark = false
254
+ } = _f, props = __objRest(_f, [
255
+ "variant",
256
+ "label",
257
+ "prefix",
258
+ "suffix",
259
+ "helperText",
260
+ "className",
261
+ "labelClass",
262
+ "helperTextClass",
263
+ "onChange",
264
+ "id",
265
+ "hasError",
266
+ "loading",
267
+ "disabled",
268
+ "rows",
269
+ "resize",
270
+ "readOnly",
271
+ "dark"
272
+ ]);
273
+ const generatedId = React.useId();
274
+ const textareaId = id || `textarea-${generatedId}`;
275
+ const handleChange = (e) => onChange == null ? void 0 : onChange(e.target.value);
276
+ const hasPrefix = !!prefix;
277
+ const hasSuffix = !!suffix;
278
+ const combinedClass = cn(
279
+ "form-field",
280
+ "textarea-field",
281
+ { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
282
+ { [`variant-${variant}`]: variant },
283
+ { loading },
284
+ { [`resize-${resize}`]: resize },
285
+ { "read-only": readOnly },
286
+ className
287
+ );
288
+ return /* @__PURE__ */ jsxs("article", { className: cn("textarea-container", { dark }), children: [
289
+ label && /* @__PURE__ */ jsx("label", { htmlFor: textareaId, className: cn("textarea-label", labelClass), children: label }),
290
+ /* @__PURE__ */ jsxs("section", { className: cn("textarea-wrapper", { loading }), children: [
291
+ prefix && /* @__PURE__ */ jsx("article", { className: "textarea-prefix", children: prefix }),
292
+ /* @__PURE__ */ jsx(
293
+ "textarea",
294
+ __spreadValues({
295
+ ref,
296
+ id: textareaId,
297
+ className: combinedClass,
298
+ onChange: handleChange,
299
+ disabled: disabled || loading,
300
+ rows,
301
+ readOnly
302
+ }, props)
303
+ ),
304
+ loading ? /* @__PURE__ */ jsx("article", { className: "textarea-suffix", children: /* @__PURE__ */ jsx(Spinner, {}) }) : suffix && /* @__PURE__ */ jsx("article", { className: "textarea-suffix", children: suffix })
305
+ ] }),
306
+ helperText && /* @__PURE__ */ jsx(
307
+ "small",
308
+ {
309
+ className: cn("textarea-helper-text", helperTextClass),
310
+ style: { color: hasError ? "var(--color-danger)" : "inherit" },
311
+ children: helperText
312
+ }
313
+ )
314
+ ] });
315
+ }
316
+ );
317
+ TextArea.displayName = "TextArea";
303
318
  const ArrowDownIcon = /* @__PURE__ */ jsx("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", children: /* @__PURE__ */ jsx(
304
319
  "path",
305
320
  {
306
321
  fill: "currentColor",
307
- 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"
322
+ 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"
308
323
  }
309
324
  ) });
310
- const Select = (_g) => {
311
- var _h = _g, {
312
- variant = "primary",
313
- label,
314
- prefix,
315
- suffix,
316
- helperText,
317
- className,
318
- labelClass,
319
- helperTextClass,
320
- onChange,
321
- id,
322
- hasError,
323
- loading = false,
324
- disabled,
325
- options = [],
326
- placeholder,
327
- children,
328
- value,
329
- readOnly = false,
330
- dark = false
331
- } = _h, props = __objRest(_h, [
332
- "variant",
333
- "label",
334
- "prefix",
335
- "suffix",
336
- "helperText",
337
- "className",
338
- "labelClass",
339
- "helperTextClass",
340
- "onChange",
341
- "id",
342
- "hasError",
343
- "loading",
344
- "disabled",
345
- "options",
346
- "placeholder",
347
- "children",
348
- "value",
349
- "readOnly",
350
- "dark"
351
- ]);
352
- const generatedId = React.useId();
353
- const selectId = id || `select-${generatedId}`;
354
- const handleChange = (e) => {
355
- if (!readOnly) {
356
- onChange == null ? void 0 : onChange(e.target.value);
357
- }
358
- };
359
- const hasPrefix = !!prefix;
360
- const hasSuffix = !!suffix || !loading;
361
- const combinedClass = cn(
362
- "form-field",
363
- { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
364
- { [`variant-${variant}`]: variant },
365
- { loading },
366
- { "read-only": readOnly },
367
- className
368
- );
369
- return /* @__PURE__ */ jsxs("article", { className: cn("select-container", { dark }), children: [
370
- label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: cn("select-label", labelClass), children: label }),
371
- /* @__PURE__ */ jsxs("section", { className: cn("select-wrapper", { loading }), children: [
372
- prefix && /* @__PURE__ */ jsx("article", { className: "select-prefix", children: prefix }),
325
+ const Select = React.forwardRef(
326
+ (_g, ref) => {
327
+ var _h = _g, {
328
+ variant = "primary",
329
+ label,
330
+ prefix,
331
+ suffix,
332
+ helperText,
333
+ className,
334
+ labelClass,
335
+ helperTextClass,
336
+ onChange,
337
+ id,
338
+ hasError,
339
+ loading = false,
340
+ disabled,
341
+ options = [],
342
+ placeholder,
343
+ children,
344
+ value,
345
+ readOnly = false,
346
+ dark = false
347
+ } = _h, props = __objRest(_h, [
348
+ "variant",
349
+ "label",
350
+ "prefix",
351
+ "suffix",
352
+ "helperText",
353
+ "className",
354
+ "labelClass",
355
+ "helperTextClass",
356
+ "onChange",
357
+ "id",
358
+ "hasError",
359
+ "loading",
360
+ "disabled",
361
+ "options",
362
+ "placeholder",
363
+ "children",
364
+ "value",
365
+ "readOnly",
366
+ "dark"
367
+ ]);
368
+ const generatedId = React.useId();
369
+ const selectId = id || `select-${generatedId}`;
370
+ const handleChange = (e) => {
371
+ if (!readOnly) {
372
+ onChange == null ? void 0 : onChange(e.target.value);
373
+ }
374
+ };
375
+ const hasPrefix = !!prefix;
376
+ const hasSuffix = !!suffix || !loading;
377
+ const combinedClass = cn(
378
+ "form-field",
379
+ { "has-prefix": hasPrefix, "has-suffix": hasSuffix },
380
+ { [`variant-${variant}`]: variant },
381
+ { loading },
382
+ { "read-only": readOnly },
383
+ className
384
+ );
385
+ return /* @__PURE__ */ jsxs("article", { className: cn("select-container", { dark }), children: [
386
+ label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, className: cn("select-label", labelClass), children: label }),
387
+ /* @__PURE__ */ jsxs("section", { className: cn("select-wrapper", { loading }), children: [
388
+ prefix && /* @__PURE__ */ jsx("article", { className: "select-prefix", children: prefix }),
389
+ /* @__PURE__ */ jsxs(
390
+ "select",
391
+ __spreadProps(__spreadValues({
392
+ ref,
393
+ id: selectId,
394
+ className: combinedClass,
395
+ onChange: handleChange,
396
+ disabled: disabled || loading,
397
+ value: value != null ? value : ""
398
+ }, props), {
399
+ children: [
400
+ placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
401
+ options.length > 0 ? options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)) : children
402
+ ]
403
+ })
404
+ ),
405
+ loading ? /* @__PURE__ */ jsx("article", { className: "select-suffix", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx("article", { className: "select-suffix", children: suffix || ArrowDownIcon })
406
+ ] }),
407
+ helperText && /* @__PURE__ */ jsx(
408
+ "small",
409
+ {
410
+ className: cn("select-helper-text", helperTextClass),
411
+ style: { color: hasError ? "var(--color-danger)" : "inherit" },
412
+ children: helperText
413
+ }
414
+ )
415
+ ] });
416
+ }
417
+ );
418
+ Select.displayName = "Select";
419
+ const Toggle = React.forwardRef(
420
+ (_i, ref) => {
421
+ var _j = _i, {
422
+ color = "var(--color-primary)",
423
+ size = "3.75rem",
424
+ checked = false,
425
+ onChange,
426
+ label,
427
+ labelPosition = "right",
428
+ className
429
+ } = _j, rest = __objRest(_j, [
430
+ "color",
431
+ "size",
432
+ "checked",
433
+ "onChange",
434
+ "label",
435
+ "labelPosition",
436
+ "className"
437
+ ]);
438
+ return /* @__PURE__ */ jsxs("label", { className: cn("switch-container", labelPosition, className), children: [
373
439
  /* @__PURE__ */ jsxs(
374
- "select",
375
- __spreadProps(__spreadValues({
376
- id: selectId,
377
- className: combinedClass,
378
- onChange: handleChange,
379
- disabled: disabled || loading,
380
- value: value != null ? value : ""
381
- }, props), {
440
+ "div",
441
+ {
442
+ className: "toggle-switch",
443
+ style: { "--switch-size": size, "--switch-color": color },
382
444
  children: [
383
- placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, hidden: true, children: placeholder }),
384
- options.length > 0 ? options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value)) : children
445
+ /* @__PURE__ */ jsx(
446
+ "input",
447
+ __spreadValues({
448
+ ref,
449
+ type: "checkbox",
450
+ role: "switch",
451
+ checked,
452
+ onChange: (e) => onChange == null ? void 0 : onChange(e.target.checked)
453
+ }, rest)
454
+ ),
455
+ /* @__PURE__ */ jsx("span", { className: "slider" })
385
456
  ]
386
- })
387
- ),
388
- loading ? /* @__PURE__ */ jsx("article", { className: "select-suffix", children: /* @__PURE__ */ jsx(Spinner, {}) }) : /* @__PURE__ */ jsx("article", { className: "select-suffix", children: suffix || ArrowDownIcon })
389
- ] }),
390
- helperText && /* @__PURE__ */ jsx(
391
- "small",
392
- {
393
- className: cn("select-helper-text", helperTextClass),
394
- style: { color: hasError ? "var(--color-danger)" : "inherit" },
395
- children: helperText
396
- }
397
- )
398
- ] });
399
- };
400
- const Toggle = (_i) => {
401
- var _j = _i, {
402
- color = "var(--color-primary)",
403
- size = "3.75rem",
404
- checked = false,
405
- onChange,
406
- label,
407
- labelPosition = "right",
408
- className
409
- } = _j, rest = __objRest(_j, [
410
- "color",
411
- "size",
412
- "checked",
413
- "onChange",
414
- "label",
415
- "labelPosition",
416
- "className"
417
- ]);
418
- return /* @__PURE__ */ jsxs("label", { className: cn("switch-container", labelPosition, className), children: [
419
- /* @__PURE__ */ jsxs("div", { className: "toggle-switch", style: { "--switch-size": size, "--switch-color": color }, children: [
420
- /* @__PURE__ */ jsx(
421
- "input",
422
- __spreadValues({
423
- type: "checkbox",
424
- role: "switch",
425
- checked,
426
- onChange: (e) => onChange == null ? void 0 : onChange(e.target.checked)
427
- }, rest)
457
+ }
428
458
  ),
429
- /* @__PURE__ */ jsx("span", { className: "slider" })
430
- ] }),
431
- label && /* @__PURE__ */ jsx("span", { className: "switch-label", children: label })
432
- ] });
433
- };
459
+ label && /* @__PURE__ */ jsx("span", { className: "switch-label", children: label })
460
+ ] });
461
+ }
462
+ );
463
+ Toggle.displayName = "Toggle";
434
464
  const ButtonSelect = ({
435
465
  options,
436
466
  value,
@@ -947,136 +977,140 @@ const Menu = Object.assign(MenuComponent, {
947
977
  Content: MenuContent,
948
978
  Item: MenuItem
949
979
  });
950
- const Range = (_w) => {
951
- var _x = _w, {
952
- variant = "primary",
953
- label,
954
- helperText,
955
- className,
956
- labelClass,
957
- rangeLabelClass,
958
- tickClass,
959
- helperTextClass,
960
- onChange,
961
- id,
962
- hasError,
963
- loading = false,
964
- disabled,
965
- min = 0,
966
- max = 100,
967
- step = 1,
968
- value = min,
969
- minLabel,
970
- maxLabel,
971
- showValue = false,
972
- showTicks = false,
973
- formatValue,
974
- dark = false
975
- } = _x, props = __objRest(_x, [
976
- "variant",
977
- "label",
978
- "helperText",
979
- "className",
980
- "labelClass",
981
- "rangeLabelClass",
982
- "tickClass",
983
- "helperTextClass",
984
- "onChange",
985
- "id",
986
- "hasError",
987
- "loading",
988
- "disabled",
989
- "min",
990
- "max",
991
- "step",
992
- "value",
993
- "minLabel",
994
- "maxLabel",
995
- "showValue",
996
- "showTicks",
997
- "formatValue",
998
- "dark"
999
- ]);
1000
- const generatedId = React.useId();
1001
- const rangeId = id || `range-${generatedId}`;
1002
- const [isInteracting, setIsInteracting] = React.useState(false);
1003
- const handleChange = (e) => {
1004
- const newValue = parseFloat(e.target.value);
1005
- onChange == null ? void 0 : onChange(newValue);
1006
- };
1007
- const handleMouseDown = () => {
1008
- setIsInteracting(true);
1009
- };
1010
- const handleMouseUp = () => {
1011
- setIsInteracting(false);
1012
- };
1013
- const handleTouchStart = () => {
1014
- setIsInteracting(true);
1015
- };
1016
- const handleTouchEnd = () => {
1017
- setIsInteracting(false);
1018
- };
1019
- const percentage = (value - min) / (max - min) * 100;
1020
- const ticks = React.useMemo(() => {
1021
- if (!showTicks) return [];
1022
- const tickCount = Math.floor((max - min) / step) + 1;
1023
- return Array.from({ length: tickCount }, (_, i) => min + i * step);
1024
- }, [showTicks, min, max, step]);
1025
- const displayValue = formatValue ? formatValue(value) : value;
1026
- const rangeClass = cn("range-input", { [`variant-${variant}`]: variant }, { loading }, className);
1027
- return /* @__PURE__ */ jsxs("article", { className: cn("range-container", { dark }), children: [
1028
- label && /* @__PURE__ */ jsx("label", { htmlFor: rangeId, className: cn("range-label", labelClass), children: label }),
1029
- /* @__PURE__ */ jsxs("section", { className: cn("range-wrapper", { loading }), children: [
1030
- loading && /* @__PURE__ */ jsx("article", { className: "range-spinner", children: /* @__PURE__ */ jsx(Spinner, {}) }),
1031
- /* @__PURE__ */ jsxs("div", { className: cn("range-input-wrapper", { "has-value-tooltip": showValue }), children: [
1032
- showValue && isInteracting && /* @__PURE__ */ jsx("div", { className: "range-value-tooltip", style: { left: `${percentage}%` }, children: displayValue }),
1033
- /* @__PURE__ */ jsx(
1034
- "input",
1035
- __spreadValues({
1036
- id: rangeId,
1037
- type: "range",
1038
- className: rangeClass,
1039
- onChange: handleChange,
1040
- onMouseDown: handleMouseDown,
1041
- onMouseUp: handleMouseUp,
1042
- onTouchStart: handleTouchStart,
1043
- onTouchEnd: handleTouchEnd,
1044
- disabled: disabled || loading,
1045
- min,
1046
- max,
1047
- step,
1048
- value,
1049
- style: {
1050
- background: `linear-gradient(to right,
1051
- 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%)`
1052
- }
1053
- }, props)
1054
- ),
1055
- showTicks && /* @__PURE__ */ jsx("div", { className: cn("range-ticks"), children: ticks.map((tick) => /* @__PURE__ */ jsx(
1056
- "span",
1057
- {
1058
- className: cn("range-tick", tickClass),
1059
- style: { left: `${(tick - min) / (max - min) * 100}%` },
1060
- children: tick
1061
- },
1062
- tick
1063
- )) })
980
+ const Range = React.forwardRef(
981
+ (_w, ref) => {
982
+ var _x = _w, {
983
+ variant = "primary",
984
+ label,
985
+ helperText,
986
+ className,
987
+ labelClass,
988
+ rangeLabelClass,
989
+ tickClass,
990
+ helperTextClass,
991
+ onChange,
992
+ id,
993
+ hasError,
994
+ loading = false,
995
+ disabled,
996
+ min = 0,
997
+ max = 100,
998
+ step = 1,
999
+ value = min,
1000
+ minLabel,
1001
+ maxLabel,
1002
+ showValue = false,
1003
+ showTicks = false,
1004
+ formatValue,
1005
+ dark = false
1006
+ } = _x, props = __objRest(_x, [
1007
+ "variant",
1008
+ "label",
1009
+ "helperText",
1010
+ "className",
1011
+ "labelClass",
1012
+ "rangeLabelClass",
1013
+ "tickClass",
1014
+ "helperTextClass",
1015
+ "onChange",
1016
+ "id",
1017
+ "hasError",
1018
+ "loading",
1019
+ "disabled",
1020
+ "min",
1021
+ "max",
1022
+ "step",
1023
+ "value",
1024
+ "minLabel",
1025
+ "maxLabel",
1026
+ "showValue",
1027
+ "showTicks",
1028
+ "formatValue",
1029
+ "dark"
1030
+ ]);
1031
+ const generatedId = React.useId();
1032
+ const rangeId = id || `range-${generatedId}`;
1033
+ const [isInteracting, setIsInteracting] = React.useState(false);
1034
+ const handleChange = (e) => {
1035
+ const newValue = parseFloat(e.target.value);
1036
+ onChange == null ? void 0 : onChange(newValue);
1037
+ };
1038
+ const handleMouseDown = () => {
1039
+ setIsInteracting(true);
1040
+ };
1041
+ const handleMouseUp = () => {
1042
+ setIsInteracting(false);
1043
+ };
1044
+ const handleTouchStart = () => {
1045
+ setIsInteracting(true);
1046
+ };
1047
+ const handleTouchEnd = () => {
1048
+ setIsInteracting(false);
1049
+ };
1050
+ const percentage = (value - min) / (max - min) * 100;
1051
+ const ticks = React.useMemo(() => {
1052
+ if (!showTicks) return [];
1053
+ const tickCount = Math.floor((max - min) / step) + 1;
1054
+ return Array.from({ length: tickCount }, (_, i) => min + i * step);
1055
+ }, [showTicks, min, max, step]);
1056
+ const displayValue = formatValue ? formatValue(value) : value;
1057
+ const rangeClass = cn("range-input", { [`variant-${variant}`]: variant }, { loading }, className);
1058
+ return /* @__PURE__ */ jsxs("article", { className: cn("range-container", { dark }), children: [
1059
+ label && /* @__PURE__ */ jsx("label", { htmlFor: rangeId, className: cn("range-label", labelClass), children: label }),
1060
+ /* @__PURE__ */ jsxs("section", { className: cn("range-wrapper", { loading }), children: [
1061
+ loading && /* @__PURE__ */ jsx("article", { className: "range-spinner", children: /* @__PURE__ */ jsx(Spinner, {}) }),
1062
+ /* @__PURE__ */ jsxs("div", { className: cn("range-input-wrapper", { "has-value-tooltip": showValue }), children: [
1063
+ showValue && isInteracting && /* @__PURE__ */ jsx("div", { className: "range-value-tooltip", style: { left: `${percentage}%` }, children: displayValue }),
1064
+ /* @__PURE__ */ jsx(
1065
+ "input",
1066
+ __spreadValues({
1067
+ ref,
1068
+ id: rangeId,
1069
+ type: "range",
1070
+ className: rangeClass,
1071
+ onChange: handleChange,
1072
+ onMouseDown: handleMouseDown,
1073
+ onMouseUp: handleMouseUp,
1074
+ onTouchStart: handleTouchStart,
1075
+ onTouchEnd: handleTouchEnd,
1076
+ disabled: disabled || loading,
1077
+ min,
1078
+ max,
1079
+ step,
1080
+ value,
1081
+ style: {
1082
+ background: `linear-gradient(to right,
1083
+ 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%)`
1084
+ }
1085
+ }, props)
1086
+ ),
1087
+ showTicks && /* @__PURE__ */ jsx("div", { className: cn("range-ticks"), children: ticks.map((tick) => /* @__PURE__ */ jsx(
1088
+ "span",
1089
+ {
1090
+ className: cn("range-tick", tickClass),
1091
+ style: { left: `${(tick - min) / (max - min) * 100}%` },
1092
+ children: tick
1093
+ },
1094
+ tick
1095
+ )) })
1096
+ ] }),
1097
+ (minLabel || maxLabel) && /* @__PURE__ */ jsxs("div", { className: cn("range-labels", rangeLabelClass), children: [
1098
+ /* @__PURE__ */ jsx("span", { className: "range-label-min", children: minLabel || "" }),
1099
+ /* @__PURE__ */ jsx("span", { className: "range-label-max", children: maxLabel || "" })
1100
+ ] })
1064
1101
  ] }),
1065
- (minLabel || maxLabel) && /* @__PURE__ */ jsxs("div", { className: cn("range-labels", rangeLabelClass), children: [
1066
- /* @__PURE__ */ jsx("span", { className: "range-label-min", children: minLabel || "" }),
1067
- /* @__PURE__ */ jsx("span", { className: "range-label-max", children: maxLabel || "" })
1068
- ] })
1069
- ] }),
1070
- helperText && /* @__PURE__ */ jsx(
1071
- "small",
1072
- {
1073
- className: cn("range-helper-text", helperTextClass),
1074
- style: { color: hasError ? "var(--color-danger)" : "inherit" },
1075
- children: helperText
1076
- }
1077
- )
1078
- ] });
1079
- };
1102
+ helperText && /* @__PURE__ */ jsx(
1103
+ "small",
1104
+ {
1105
+ className: cn("range-helper-text", helperTextClass),
1106
+ style: { color: hasError ? "var(--color-danger)" : "inherit" },
1107
+ children: helperText
1108
+ }
1109
+ )
1110
+ ] });
1111
+ }
1112
+ );
1113
+ Range.displayName = "Range";
1080
1114
  export {
1081
1115
  Button,
1082
1116
  ButtonSelect,
package/dist/klip-components.umd.js CHANGED
@@ -1 +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]),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"})});
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 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 CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "klip-components",
3
3
  "private": false,
4
- "version": "0.22.0",
4
+ "version": "0.23.0",
5
5
  "description": "A collection of reusable React components for Klip.",
6
6
  "type": "module",
7
7
  "main": "dist/klip-components.cjs.js",