@alaarab/ogrid-react-inputs 2.5.5

package/dist/esm/index.js

@@ -0,0 +1 @@
+import*as C from'react';import {parseDate,formatDate,getCalendarGrid,MONTH_NAMES,DAY_NAMES,DEFAULT_MAX_STARS,clampRating,DEFAULT_COLOR_PALETTE,normalizeHex,DEFAULT_MIN,DEFAULT_MAX,DEFAULT_STEP,clampValue,snapToStep,getPercentage,parseTags,filterTagSuggestions,formatTags,isValidHex,isLightColor,getStarFill,getValueFromOffset,getTagColor,getRatingFromPosition}from'@alaarab/ogrid-inputs';import {jsxs,jsx}from'react/jsx-runtime';var ce={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",width:"280px",userSelect:"none"},pe={display:"flex",alignItems:"center",justifyContent:"space-between",marginBottom:"8px"},Z={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"14px",color:"inherit",lineHeight:1},ue={fontWeight:600,fontSize:"14px"},ge={display:"grid",gridTemplateColumns:"repeat(7, 1fr)",gap:"1px",textAlign:"center"},fe={padding:"4px 0",fontSize:"11px",fontWeight:600,color:"var(--ogrid-muted, #888)"},Se={padding:"6px 0",borderRadius:"4px",cursor:"pointer",fontSize:"13px",lineHeight:1,border:"none",background:"none",color:"inherit"},be={display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},ee={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500},me={display:"flex",gap:"6px",marginBottom:"8px"},ye={flex:1,padding:"4px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit"};function te(H){let{value:f,onValueChange:u,onCommit:S,onCancel:m}=H,b=C.useMemo(()=>f==null?null:parseDate(String(f)),[f]),i=new Date,[c,s]=C.useState(b?.year??i.getFullYear()),[x,p]=C.useState(b?.month??i.getMonth()),[P,v]=C.useState(b?formatDate(b.year,b.month,b.date):""),[R,E]=C.useState(P),[k,h]=C.useState(null),y=C.useRef(null),T=C.useMemo(()=>getCalendarGrid(c,x),[c,x]),D=()=>{x===0?(p(11),s(e=>e-1)):p(e=>e-1);},l=()=>{x===11?(p(0),s(e=>e+1)):p(e=>e+1);},t=(e,n,g)=>{let z=formatDate(e,n,g);v(z),E(z),u(z),setTimeout(()=>S(),0);},r=e=>{let n=e.target.value;E(n);let g=parseDate(n);g&&(v(formatDate(g.year,g.month,g.date)),s(g.year),p(g.month),u(n));},d=e=>{e.key==="Enter"&&(e.preventDefault(),e.stopPropagation(),u(R),S()),e.key==="Escape"&&(e.preventDefault(),e.stopPropagation(),m());},o=()=>{let e=new Date;t(e.getFullYear(),e.getMonth(),e.getDate());},a=()=>{v(""),E(""),u(""),S();};return C.useEffect(()=>{let e=y.current?.querySelector("input");e&&(e.focus(),e.select());},[]),C.useEffect(()=>{let e=g=>{g.key==="Escape"&&(g.preventDefault(),m());},n=y.current;if(n)return n.addEventListener("keydown",e),()=>n.removeEventListener("keydown",e)},[m]),jsxs("div",{ref:y,style:ce,onMouseDown:e=>e.stopPropagation(),children:[jsx("div",{style:me,children:jsx("input",{type:"text",value:R,onChange:r,onKeyDown:d,placeholder:"YYYY-MM-DD",style:ye})}),jsxs("div",{style:pe,children:[jsx("button",{type:"button",style:Z,onClick:D,"aria-label":"Previous month",children:"\u2039"}),jsxs("span",{style:ue,children:[MONTH_NAMES[x]," ",c]}),jsx("button",{type:"button",style:Z,onClick:l,"aria-label":"Next month",children:"\u203A"})]}),jsxs("div",{style:ge,children:[DAY_NAMES.map(e=>jsx("div",{style:fe,children:e},e)),T.flat().map(e=>{let n=formatDate(e.year,e.month,e.date),g=n===P,z=n===k,A={...Se};return e.isCurrentMonth||(A.color="var(--ogrid-muted, #ccc)"),e.isToday&&!g&&(A.fontWeight=700,A.color="var(--ogrid-accent, #0078d4)"),g?(A.background="var(--ogrid-accent, #0078d4)",A.color="#fff",A.fontWeight=600):z&&(A.background="var(--ogrid-bg-hover, #f0f0f0)"),jsx("button",{type:"button",style:A,onClick:()=>t(e.year,e.month,e.date),onMouseEnter:()=>h(n),onMouseLeave:()=>h(null),tabIndex:-1,children:e.date},n)})]}),jsxs("div",{style:be,children:[jsx("button",{type:"button",style:ee,onClick:o,children:"Today"}),jsx("button",{type:"button",style:ee,onClick:a,children:"Clear"})]})]})}var Re={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",userSelect:"none"},he={display:"flex",alignItems:"center",gap:"2px",justifyContent:"center",padding:"8px 0"},Ce={background:"none",border:"none",cursor:"pointer",padding:"2px",fontSize:"28px",lineHeight:1,transition:"transform 0.1s ease",color:"inherit"},Ee={textAlign:"center",fontSize:"12px",color:"var(--ogrid-muted, #888)",padding:"4px 0 0"},ke={display:"flex",justifyContent:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},we={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500};function ne(H){let{value:f,onValueChange:u,onCommit:S,onCancel:m,cellEditorParams:b}=H,i=b?.maxStars??DEFAULT_MAX_STARS,c=b?.allowHalf??false,s=C.useMemo(()=>{if(f==null||f==="")return 0;let l=Number(f);return isNaN(l)?0:clampRating(l,i)},[f,i]),[x,p]=C.useState(s),[P,v]=C.useState(null),R=C.useRef(null),E=P??x,k=(l,t)=>{let r=t.currentTarget.getBoundingClientRect(),d=t.clientX-r.left,o=r.width,a=getRatingFromPosition(l,d,o,c),e=clampRating(a,i);p(e),u(e),setTimeout(()=>S(),0);},h=(l,t)=>{let r=t.currentTarget.getBoundingClientRect(),d=t.clientX-r.left,o=r.width,a=getRatingFromPosition(l,d,o,c);v(clampRating(a,i));},y=()=>{v(null);},T=()=>{p(0),u(""),S();};C.useEffect(()=>{R.current?.focus();},[]),C.useEffect(()=>{let l=r=>{if(r.key==="Escape")r.preventDefault(),m();else if(r.key==="Enter")r.preventDefault(),S();else if(r.key==="ArrowRight"||r.key==="ArrowUp"){r.preventDefault();let d=c?.5:1;p(o=>{let a=clampRating(o+d,i);return u(a),a});}else if(r.key==="ArrowLeft"||r.key==="ArrowDown"){r.preventDefault();let d=c?.5:1;p(o=>{let a=clampRating(Math.max(0,o-d),i);return u(a||""),a});}},t=R.current;if(t)return t.addEventListener("keydown",l),()=>t.removeEventListener("keydown",l)},[m,S,u,i,c]);let D=l=>{let t=getStarFill(l,E,c),r,d;t==="full"||t==="half"?(r="\u2605",d="#F59E0B"):(r="\u2606",d="var(--ogrid-muted, #ccc)");let o={...Ce,color:d};return t==="half"?jsx("button",{type:"button",style:o,onClick:a=>k(l,a),onMouseMove:a=>h(l,a),tabIndex:-1,children:jsx("span",{style:{background:"linear-gradient(90deg, #F59E0B 50%, var(--ogrid-muted, #ccc) 50%)",WebkitBackgroundClip:"text",WebkitTextFillColor:"transparent",backgroundClip:"text"},children:"\u2605"})},l):jsx("button",{type:"button",style:o,onClick:a=>k(l,a),onMouseMove:a=>h(l,a),tabIndex:-1,children:r},l)};return jsxs("div",{ref:R,style:Re,onMouseDown:l=>l.stopPropagation(),tabIndex:0,children:[jsx("div",{style:he,onMouseLeave:y,children:Array.from({length:i},(l,t)=>D(t))}),jsx("div",{style:Ee,children:x>0?`${x} / ${i}`:"No rating"}),jsx("div",{style:ke,children:jsx("button",{type:"button",style:we,onClick:T,children:"Clear"})})]})}var Me={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",width:"240px",userSelect:"none"},Ie={display:"flex",gap:"6px",marginBottom:"10px",alignItems:"center"},Le={fontSize:"14px",fontWeight:600,color:"var(--ogrid-muted, #888)",lineHeight:1},He={flex:1,padding:"4px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit",fontFamily:"monospace",textTransform:"uppercase"},ze={width:"28px",height:"28px",borderRadius:"4px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",flexShrink:0},Ae={display:"grid",gridTemplateColumns:"repeat(5, 1fr)",gap:"6px",padding:"4px 0"},Be={width:"36px",height:"36px",borderRadius:"50%",border:"none",cursor:"pointer",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"14px",fontWeight:700,padding:0,transition:"transform 0.1s ease, box-shadow 0.1s ease"},Fe={display:"flex",justifyContent:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},Ne={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500};function ie(H){let{value:f,onValueChange:u,onCommit:S,onCancel:m,cellEditorParams:b}=H,i=b?.colors??DEFAULT_COLOR_PALETTE,c=b?.allowCustom??true,s=C.useMemo(()=>f==null||f===""?"":normalizeHex(String(f))??String(f),[f]),[x,p]=C.useState(s),[P,v]=C.useState(s.replace(/^#/,"")),[R,E]=C.useState(null),k=C.useRef(null),h=t=>{let r=normalizeHex(t)??t;p(r),v(r.replace(/^#/,"")),u(r),setTimeout(()=>S(),0);},y=t=>{let r=t.target.value.replace(/[^0-9A-Fa-f]/g,"").slice(0,6);v(r);let d="#"+r;if(isValidHex(d)){let o=normalizeHex(d);o&&(p(o),u(o));}},T=t=>{if(t.key==="Enter"){t.preventDefault(),t.stopPropagation();let r="#"+P;if(isValidHex(r)){let d=normalizeHex(r);d&&u(d);}S();}t.key==="Escape"&&(t.preventDefault(),t.stopPropagation(),m());},D=()=>{p(""),v(""),u(""),S();};C.useEffect(()=>{let t=k.current?.querySelector("input");t&&(t.focus(),t.select());},[]),C.useEffect(()=>{let t=d=>{d.key==="Escape"&&(d.preventDefault(),m());},r=k.current;if(r)return r.addEventListener("keydown",t),()=>r.removeEventListener("keydown",t)},[m]);let l=(t,r)=>{let d=normalizeHex(t)??t,o=x.toUpperCase()===d.toUpperCase(),a=R===t,e=isLightColor(t),n={...Be,backgroundColor:t,border:e?"1px solid var(--ogrid-border, rgba(0,0,0,0.2))":"1px solid transparent",transform:a?"scale(1.15)":"scale(1)",boxShadow:o?"0 0 0 2px var(--ogrid-accent, #0078d4)":"none",color:e?"#333":"#fff"};return jsx("button",{type:"button",style:n,onClick:()=>h(t),onMouseEnter:()=>E(t),onMouseLeave:()=>E(null),tabIndex:-1,"aria-label":t,children:o?"\u2713":""},`${t}-${r}`)};return jsxs("div",{ref:k,style:Me,onMouseDown:t=>t.stopPropagation(),children:[c&&jsxs("div",{style:Ie,children:[jsx("div",{style:{...ze,backgroundColor:x||"transparent"}}),jsx("span",{style:Le,children:"#"}),jsx("input",{type:"text",value:P,onChange:y,onKeyDown:T,placeholder:"000000",maxLength:6,style:He})]}),jsx("div",{style:Ae,children:i.map((t,r)=>l(t,r))}),jsx("div",{style:Fe,children:jsx("button",{type:"button",style:Ne,onClick:D,children:"Clear"})})]})}var _e={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px 16px",width:"280px",userSelect:"none"},Ye={display:"flex",alignItems:"center",gap:"12px",padding:"8px 0"},Xe={flex:1,position:"relative",height:"24px",display:"flex",alignItems:"center",cursor:"pointer"},$e={width:"100%",height:"6px",borderRadius:"3px",background:"var(--ogrid-border, rgba(0,0,0,0.15))",position:"relative",overflow:"hidden"},Oe={position:"absolute",top:0,left:0,height:"100%",borderRadius:"3px",background:"var(--ogrid-accent, #0078d4)",transition:"width 0.05s ease"},Ge={position:"absolute",top:"50%",width:"18px",height:"18px",borderRadius:"50%",background:"var(--ogrid-accent, #0078d4)",border:"2px solid var(--ogrid-bg, #fff)",boxShadow:"0 1px 4px rgba(0,0,0,0.3)",transform:"translate(-50%, -50%)",cursor:"grab",transition:"box-shadow 0.1s ease"},je={fontSize:"14px",fontWeight:600,minWidth:"40px",textAlign:"right",fontVariantNumeric:"tabular-nums"},qe={display:"flex",gap:"8px",alignItems:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},Je={fontSize:"12px",color:"var(--ogrid-muted, #888)"},Qe={flex:1,padding:"4px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit",textAlign:"right",fontVariantNumeric:"tabular-nums"},Ze={display:"flex",justifyContent:"space-between",fontSize:"11px",color:"var(--ogrid-muted, #888)",padding:"2px 0 0"};function le(H){let{value:f,onValueChange:u,onCommit:S,onCancel:m,cellEditorParams:b}=H,i=b?.min??DEFAULT_MIN,c=b?.max??DEFAULT_MAX,s=b?.step??DEFAULT_STEP,x=C.useMemo(()=>{if(f==null||f==="")return i;let o=Number(f);return isNaN(o)?i:clampValue(snapToStep(o,i,s),i,c)},[f,i,c,s]),[p,P]=C.useState(x),[v,R]=C.useState(String(x)),[E,k]=C.useState(false),h=C.useRef(null),y=C.useRef(null),T=getPercentage(p,i,c),D=C.useCallback(o=>{let a=clampValue(snapToStep(o,i,s),i,c);P(a),R(String(a)),u(a);},[i,c,s,u]),l=o=>{if(!y.current)return;let a=y.current.getBoundingClientRect(),e=o.clientX-a.left,n=getValueFromOffset(e,a.width,i,c,s);D(n);},t=o=>{o.preventDefault(),o.stopPropagation(),k(true);};C.useEffect(()=>{if(!E)return;let o=e=>{if(!y.current)return;let n=y.current.getBoundingClientRect(),g=e.clientX-n.left,z=getValueFromOffset(g,n.width,i,c,s);D(z);},a=()=>{k(false),setTimeout(()=>S(),0);};return document.addEventListener("mousemove",o),document.addEventListener("mouseup",a),()=>{document.removeEventListener("mousemove",o),document.removeEventListener("mouseup",a);}},[E,i,c,s,D,S]);let r=o=>{let a=o.target.value;R(a);let e=Number(a);if(!isNaN(e)){let n=clampValue(snapToStep(e,i,s),i,c);P(n),u(n);}},d=o=>{if(o.key==="Enter"){o.preventDefault(),o.stopPropagation();let a=Number(v);if(!isNaN(a)){let e=clampValue(snapToStep(a,i,s),i,c);u(e);}S();}o.key==="Escape"&&(o.preventDefault(),o.stopPropagation(),m());};return C.useEffect(()=>{let o=h.current?.querySelector("input");o&&(o.focus(),o.select());},[]),C.useEffect(()=>{let o=e=>{e.key==="Escape"&&(e.preventDefault(),m());},a=h.current;if(a)return a.addEventListener("keydown",o),()=>a.removeEventListener("keydown",o)},[m]),jsxs("div",{ref:h,style:_e,onMouseDown:o=>o.stopPropagation(),children:[jsxs("div",{style:Ye,children:[jsxs("div",{ref:y,style:Xe,onClick:l,children:[jsx("div",{style:$e,children:jsx("div",{style:{...Oe,width:`${T}%`}})}),jsx("div",{style:{...Ge,left:`${T}%`,cursor:E?"grabbing":"grab"},onMouseDown:t})]}),jsx("span",{style:je,children:p})]}),jsxs("div",{style:Ze,children:[jsx("span",{children:i}),jsx("span",{children:c})]}),jsxs("div",{style:qe,children:[jsx("span",{style:Je,children:"Value:"}),jsx("input",{type:"text",value:v,onChange:r,onKeyDown:d,style:Qe})]})]})}var rt={fontFamily:'-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',fontSize:"13px",background:"var(--ogrid-bg, #fff)",color:"var(--ogrid-fg, #242424)",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.12))",borderRadius:"8px",boxShadow:"var(--ogrid-shadow, 0 4px 16px rgba(0,0,0,0.15))",padding:"12px",width:"280px",userSelect:"none"},at={display:"flex",flexWrap:"wrap",gap:"4px",minHeight:"32px",padding:"4px 0"},it={display:"inline-flex",alignItems:"center",gap:"4px",padding:"3px 8px",borderRadius:"12px",fontSize:"12px",fontWeight:500,lineHeight:1.4,maxWidth:"200px",overflow:"hidden"},st={overflow:"hidden",textOverflow:"ellipsis",whiteSpace:"nowrap"},lt={background:"none",border:"none",cursor:"pointer",padding:"0 2px",fontSize:"14px",lineHeight:1,color:"inherit",opacity:.6,flexShrink:0},dt={width:"100%",padding:"6px 8px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.2))",borderRadius:"4px",fontSize:"13px",outline:"none",background:"var(--ogrid-bg, #fff)",color:"inherit",marginTop:"6px"},ct={maxHeight:"120px",overflowY:"auto",marginTop:"4px",border:"1px solid var(--ogrid-border, rgba(0,0,0,0.1))",borderRadius:"4px",background:"var(--ogrid-bg, #fff)"},pt={padding:"6px 10px",cursor:"pointer",fontSize:"12px",borderBottom:"1px solid var(--ogrid-border, rgba(0,0,0,0.04))"},ut={background:"var(--ogrid-bg-hover, #f0f0f0)"},gt={fontSize:"12px",color:"var(--ogrid-muted, #888)",fontStyle:"italic",padding:"4px 0"},ft={display:"flex",justifyContent:"space-between",alignItems:"center",marginTop:"8px",paddingTop:"8px",borderTop:"1px solid var(--ogrid-border, rgba(0,0,0,0.08))"},St={background:"none",border:"none",cursor:"pointer",padding:"4px 8px",borderRadius:"4px",fontSize:"12px",color:"var(--ogrid-accent, #0078d4)",fontWeight:500},bt={fontSize:"11px",color:"var(--ogrid-muted, #888)"};function de(H){let{value:f,onValueChange:u,onCommit:S,onCancel:m,cellEditorParams:b}=H,i=b?.suggestions,c=b?.allowCreate??true,[s,x]=C.useState(()=>parseTags(f)),[p,P]=C.useState(""),[v,R]=C.useState(-1),E=C.useRef(null),k=C.useRef(null),h=C.useMemo(()=>i?filterTagSuggestions(p,i,s):[],[p,i,s]),y=h.length>0&&p.length>0,T=C.useCallback(e=>{x(e),u(formatTags(e));},[u]),D=C.useCallback(e=>{let n=e.trim();if(!n||s.includes(n)||!c&&i&&!i.includes(n))return;let g=[...s,n];T(g),P(""),R(-1);},[s,c,i,T]),l=C.useCallback(e=>{let n=s.filter((g,z)=>z!==e);T(n);},[s,T]),t=e=>{P(e.target.value),R(-1);},r=e=>{e.key==="Enter"?(e.preventDefault(),e.stopPropagation(),y&&v>=0?D(h[v]):p.trim()?D(p):S()):e.key==="Escape"?(e.preventDefault(),e.stopPropagation(),m()):e.key===","||e.key==="Tab"?p.trim()&&(e.preventDefault(),D(p)):e.key==="Backspace"&&p===""&&s.length>0?l(s.length-1):e.key==="ArrowDown"&&y?(e.preventDefault(),R(n=>n<h.length-1?n+1:0)):e.key==="ArrowUp"&&y&&(e.preventDefault(),R(n=>n>0?n-1:h.length-1));},d=e=>{D(e),k.current?.focus();},o=()=>{T([]),P(""),u(""),S();};C.useEffect(()=>{k.current?.focus();},[]),C.useEffect(()=>{let e=g=>{g.key==="Escape"&&(g.preventDefault(),m());},n=E.current;if(n)return n.addEventListener("keydown",e),()=>n.removeEventListener("keydown",e)},[m]);let a=(e,n)=>{let g=getTagColor(e);return jsxs("span",{style:{...it,backgroundColor:g,color:"#333"},children:[jsx("span",{style:st,children:e}),jsx("button",{type:"button",style:lt,onClick:()=>l(n),tabIndex:-1,"aria-label":`Remove ${e}`,children:"\xD7"})]},`${e}-${n}`)};return jsxs("div",{ref:E,style:rt,onMouseDown:e=>e.stopPropagation(),children:[jsx("div",{style:at,children:s.length>0?s.map((e,n)=>a(e,n)):jsx("span",{style:gt,children:"No tags"})}),jsx("input",{ref:k,type:"text",value:p,onChange:t,onKeyDown:r,placeholder:c?"Type to add tag...":"Search tags...",style:dt}),y&&jsx("div",{style:ct,children:h.map((e,n)=>jsx("div",{style:{...pt,...n===v?ut:{}},onClick:()=>d(e),onMouseEnter:()=>R(n),children:e},e))}),jsxs("div",{style:ft,children:[jsxs("span",{style:bt,children:[s.length," tag",s.length!==1?"s":""]}),jsx("button",{type:"button",style:St,onClick:o,children:"Clear all"})]})]})}export{ie as ColorPickerEditor,te as DatePickerEditor,ne as RatingEditor,le as SliderEditor,de as TagsEditor};

package/dist/types/ColorPicker/ColorPickerEditor.d.ts

@@ -0,0 +1,18 @@
+/**
+ * ColorPickerEditor — Premium color swatch picker for OGrid.
+ *
+ * Usage:
+ *   import { ColorPickerEditor } from '@alaarab/ogrid-react-inputs';
+ *
+ *   const columns = [{
+ *     columnId: 'color',
+ *     cellEditor: ColorPickerEditor,
+ *     cellEditorPopup: true,
+ *     cellEditorParams: { allowCustom: true },
+ *   }];
+ *
+ * Implements ICellEditorProps<T> — works with cellEditorPopup: true.
+ */
+import * as React from 'react';
+import type { ICellEditorProps } from '@alaarab/ogrid-core';
+export declare function ColorPickerEditor<T>(props: ICellEditorProps<T>): React.ReactElement;

package/dist/types/ColorPicker/index.d.ts

@@ -0,0 +1 @@
+export { ColorPickerEditor } from './ColorPickerEditor';

package/dist/types/DatePicker/DatePickerEditor.d.ts

@@ -0,0 +1,17 @@
+/**
+ * DatePickerEditor — Premium calendar-based date picker for OGrid.
+ *
+ * Usage:
+ *   import { DatePickerEditor } from '@alaarab/ogrid-react-inputs';
+ *
+ *   const columns = [{
+ *     columnId: 'dueDate',
+ *     cellEditor: DatePickerEditor,
+ *     cellEditorPopup: true,
+ *   }];
+ *
+ * Implements ICellEditorProps<T> — works with cellEditorPopup: true.
+ */
+import * as React from 'react';
+import type { ICellEditorProps } from '@alaarab/ogrid-core';
+export declare function DatePickerEditor<T>(props: ICellEditorProps<T>): React.ReactElement;

package/dist/types/DatePicker/calendar-utils.d.ts

@@ -0,0 +1,2 @@
+export { getCalendarGrid, formatDate, parseDate, DAY_NAMES, MONTH_NAMES } from '@alaarab/ogrid-inputs';
+export type { CalendarDay } from '@alaarab/ogrid-inputs';

package/dist/types/DatePicker/index.d.ts

@@ -0,0 +1,3 @@
+export { DatePickerEditor } from './DatePickerEditor';
+export { getCalendarGrid, formatDate, parseDate, DAY_NAMES, MONTH_NAMES } from './calendar-utils';
+export type { CalendarDay } from './calendar-utils';

package/dist/types/Rating/RatingEditor.d.ts

@@ -0,0 +1,18 @@
+/**
+ * RatingEditor — Premium star-rating cell editor for OGrid.
+ *
+ * Usage:
+ *   import { RatingEditor } from '@alaarab/ogrid-react-inputs';
+ *
+ *   const columns = [{
+ *     columnId: 'priority',
+ *     cellEditor: RatingEditor,
+ *     cellEditorPopup: true,
+ *     cellEditorParams: { maxStars: 5, allowHalf: false },
+ *   }];
+ *
+ * Implements ICellEditorProps<T> — works with cellEditorPopup: true.
+ */
+import * as React from 'react';
+import type { ICellEditorProps } from '@alaarab/ogrid-core';
+export declare function RatingEditor<T>(props: ICellEditorProps<T>): React.ReactElement;

package/dist/types/Rating/index.d.ts

@@ -0,0 +1 @@
+export { RatingEditor } from './RatingEditor';

package/dist/types/Slider/SliderEditor.d.ts

@@ -0,0 +1,18 @@
+/**
+ * SliderEditor — Premium range slider cell editor for OGrid.
+ *
+ * Usage:
+ *   import { SliderEditor } from '@alaarab/ogrid-react-inputs';
+ *
+ *   const columns = [{
+ *     columnId: 'progress',
+ *     cellEditor: SliderEditor,
+ *     cellEditorPopup: true,
+ *     cellEditorParams: { min: 0, max: 100, step: 5 },
+ *   }];
+ *
+ * Implements ICellEditorProps<T> — works with cellEditorPopup: true.
+ */
+import * as React from 'react';
+import type { ICellEditorProps } from '@alaarab/ogrid-core';
+export declare function SliderEditor<T>(props: ICellEditorProps<T>): React.ReactElement;

package/dist/types/Slider/index.d.ts

@@ -0,0 +1 @@
+export { SliderEditor } from './SliderEditor';

package/dist/types/Tags/TagsEditor.d.ts

@@ -0,0 +1,19 @@
+/**
+ * TagsEditor — Premium multi-value tag/chip cell editor for OGrid.
+ *
+ * Usage:
+ *   import { TagsEditor } from '@alaarab/ogrid-react-inputs';
+ *
+ *   const columns = [{
+ *     columnId: 'labels',
+ *     cellEditor: TagsEditor,
+ *     cellEditorPopup: true,
+ *     cellEditorParams: { suggestions: ['Bug', 'Feature', 'Docs'], allowCreate: true },
+ *   }];
+ *
+ * Implements ICellEditorProps<T> — works with cellEditorPopup: true.
+ * Tags are stored as a comma-separated string.
+ */
+import * as React from 'react';
+import type { ICellEditorProps } from '@alaarab/ogrid-core';
+export declare function TagsEditor<T>(props: ICellEditorProps<T>): React.ReactElement;

package/dist/types/Tags/index.d.ts

@@ -0,0 +1 @@
+export { TagsEditor } from './TagsEditor';

package/dist/types/index.d.ts

@@ -0,0 +1,29 @@
+/**
+ * @alaarab/ogrid-react-inputs — Premium cell editors for OGrid.
+ *
+ * This package provides optional, opt-in cell editor components.
+ * Zero bundle impact when not installed.
+ *
+ * Available editors:
+ * - DatePickerEditor — Calendar-based date picker (use with cellEditorPopup: true)
+ * - RatingEditor — Star rating editor (use with cellEditorPopup: true)
+ * - ColorPickerEditor — Color swatch grid + hex input (use with cellEditorPopup: true)
+ * - SliderEditor — Range slider for numeric values (use with cellEditorPopup: true)
+ * - TagsEditor — Multi-value tag/chip editor (use with cellEditorPopup: true)
+ *
+ * Usage:
+ *   import { DatePickerEditor } from '@alaarab/ogrid-react-inputs';
+ *
+ *   const columns = [{
+ *     columnId: 'dueDate',
+ *     cellEditor: DatePickerEditor,
+ *     cellEditorPopup: true,
+ *   }];
+ */
+export { DatePickerEditor } from './DatePicker';
+export type { CalendarDay } from './DatePicker';
+export { RatingEditor } from './Rating';
+export { ColorPickerEditor } from './ColorPicker';
+export { SliderEditor } from './Slider';
+export { TagsEditor } from './Tags';
+export type { ICellEditorProps, CellEditorParams } from '@alaarab/ogrid-core';

package/package.json

@@ -0,0 +1,66 @@
+{
+  "name": "@alaarab/ogrid-react-inputs",
+  "version": "2.5.5",
+  "description": "OGrid React Inputs – Optional premium cell editors (DatePicker, and more). Zero impact when not installed.",
+  "main": "dist/esm/index.js",
+  "module": "dist/esm/index.js",
+  "types": "dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/esm/index.js",
+      "default": "./dist/esm/index.js"
+    }
+  },
+  "scripts": {
+    "build": "rimraf dist && tsup && tsc -p tsconfig.build.json",
+    "test": "jest"
+  },
+  "keywords": [
+    "ogrid",
+    "datepicker",
+    "cell-editor",
+    "react",
+    "typescript",
+    "grid",
+    "inputs"
+  ],
+  "author": "Ala Arab",
+  "license": "MIT",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "sideEffects": false,
+  "engines": {
+    "node": ">=18"
+  },
+  "dependencies": {
+    "@alaarab/ogrid-core": "2.5.5",
+    "@alaarab/ogrid-inputs": "2.5.5"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.1.0",
+    "@testing-library/user-event": "^14.5.2",
+    "@types/react": "^19.0.0",
+    "@types/react-dom": "^19.0.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/alaarab/ogrid.git",
+    "directory": "packages/react-inputs"
+  },
+  "homepage": "https://ogrid.dev",
+  "bugs": "https://github.com/alaarab/ogrid/issues"
+}