react-bootstrap-plugins 1.0.3 → 2.0.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 (71) hide show
  1. package/README.md +39 -270
  2. package/dist/DatePicker.cjs +2 -2
  3. package/dist/DatePicker.d.cts +57 -0
  4. package/dist/DatePicker.d.ts +54 -42
  5. package/dist/DatePicker.js +2 -2
  6. package/dist/Label.cjs +2 -2
  7. package/dist/Label.d.cts +15 -0
  8. package/dist/Label.d.ts +12 -13
  9. package/dist/Label.js +2 -2
  10. package/dist/SearchSelect.cjs +2 -2
  11. package/dist/SearchSelect.d.cts +40 -0
  12. package/dist/SearchSelect.d.ts +37 -25
  13. package/dist/SearchSelect.js +2 -2
  14. package/dist/TableLoading.cjs +2 -0
  15. package/dist/TableLoading.d.cts +13 -0
  16. package/dist/TableLoading.d.ts +13 -0
  17. package/dist/TableLoading.js +2 -0
  18. package/dist/chunk-2Q4NZKMX.cjs +2 -0
  19. package/dist/chunk-5IOLZUVD.cjs +2 -0
  20. package/dist/chunk-7LXLWNUR.js +2 -0
  21. package/dist/chunk-AWU5XGMI.cjs +2 -0
  22. package/dist/chunk-ES5ABK5L.js +2 -0
  23. package/dist/chunk-GZ2D7HTS.cjs +2 -0
  24. package/dist/chunk-HYB5IGJK.js +2 -0
  25. package/dist/chunk-NPQQDBFB.cjs +2 -0
  26. package/dist/chunk-RR7TBRGI.js +2 -0
  27. package/dist/chunk-ZCAQ7S2A.js +2 -0
  28. package/dist/css/datepicker.css +1 -299
  29. package/dist/css/plugins.css +1 -0
  30. package/dist/index.cjs +2 -2
  31. package/dist/index.d.cts +5 -0
  32. package/dist/index.d.ts +5 -10
  33. package/dist/index.js +2 -2
  34. package/docs/DATEPICKER.md +157 -0
  35. package/docs/LABEL.md +89 -0
  36. package/docs/SEARCHSELECT.md +123 -0
  37. package/docs/TABLELOADING.md +98 -0
  38. package/package.json +29 -10
  39. package/dist/DatePicker.cjs.map +0 -1
  40. package/dist/DatePicker.js.map +0 -1
  41. package/dist/Label.cjs.map +0 -1
  42. package/dist/Label.js.map +0 -1
  43. package/dist/SearchSelect.cjs.map +0 -1
  44. package/dist/SearchSelect.js.map +0 -1
  45. package/dist/chunk-46AJ2Q5H.js +0 -2
  46. package/dist/chunk-46AJ2Q5H.js.map +0 -1
  47. package/dist/chunk-4ISYCPRB.cjs +0 -2
  48. package/dist/chunk-4ISYCPRB.cjs.map +0 -1
  49. package/dist/chunk-CZV7QBHA.cjs +0 -2
  50. package/dist/chunk-CZV7QBHA.cjs.map +0 -1
  51. package/dist/chunk-DIUGH74M.js +0 -2
  52. package/dist/chunk-DIUGH74M.js.map +0 -1
  53. package/dist/chunk-F3KMQZXU.js +0 -2
  54. package/dist/chunk-F3KMQZXU.js.map +0 -1
  55. package/dist/chunk-HBS6VOGV.cjs +0 -2
  56. package/dist/chunk-HBS6VOGV.cjs.map +0 -1
  57. package/dist/chunk-NOGRIWSU.js +0 -2
  58. package/dist/chunk-NOGRIWSU.js.map +0 -1
  59. package/dist/chunk-QQNPKA7A.cjs +0 -2
  60. package/dist/chunk-QQNPKA7A.cjs.map +0 -1
  61. package/dist/index.cjs.map +0 -1
  62. package/dist/index.js.map +0 -1
  63. package/src/components/DatePicker.d.ts +0 -45
  64. package/src/components/DatePicker.jsx +0 -690
  65. package/src/components/Label.d.ts +0 -16
  66. package/src/components/Label.jsx +0 -21
  67. package/src/components/SearchSelect.d.ts +0 -28
  68. package/src/components/SearchSelect.jsx +0 -152
  69. package/src/css/datepicker.css +0 -299
  70. package/src/index.js +0 -15
  71. package/src/lib/cn.js +0 -35
@@ -0,0 +1,2 @@
1
+ function i(...r){let e=[];for(let n of r)if(n){if(typeof n=="string")e.push(n);else if(Array.isArray(n)){let s=i(...n);s&&e.push(s);}else if(typeof n=="object")for(let[s,t]of Object.entries(n))t&&e.push(s);}return e.join(" ")}export{i as a};//# sourceMappingURL=chunk-RR7TBRGI.js.map
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9saWIvY24udHMiXSwibmFtZXMiOlsiY24iLCJhcmdzIiwiY2xhc3NlcyIsImFyZyIsIm5lc3RlZCIsImtleSIsInZhbHVlIl0sIm1hcHBpbmdzIjoiQUFjTyxTQUFTQSxDQUFBQSxDQUFBQSxHQUFNQyxDQUFBQSxDQUF1QixDQUMzQyxJQUFNQyxDQUFBQSxDQUFvQixFQUFDLENBRTNCLElBQUEsSUFBV0MsQ0FBQUEsSUFBT0YsQ0FBQUEsQ0FDaEIsR0FBS0UsQ0FBQUEsQ0FBQUEsQ0FFTCxHQUFJLE9BQU9BLENBQUFBLEVBQVEsUUFBQSxDQUNqQkQsQ0FBQUEsQ0FBUSxJQUFBLENBQUtDLENBQUcsQ0FBQSxDQUFBLEtBQUEsR0FDUCxLQUFBLENBQU0sT0FBQSxDQUFRQSxDQUFHLENBQUEsQ0FBRyxDQUM3QixJQUFNQyxDQUFBQSxDQUFTSixDQUFBQSxDQUFHLEdBQUdHLENBQUcsQ0FBQSxDQUNwQkMsQ0FBQUEsRUFBUUYsQ0FBQUEsQ0FBUSxJQUFBLENBQUtFLENBQU0sRUFDakMsQ0FBQSxLQUFBLEdBQVcsT0FBT0QsQ0FBQUEsRUFBUSxRQUFBLENBQ3hCLElBQUEsR0FBVyxDQUFDRSxDQUFBQSxDQUFLQyxDQUFLLENBQUEsR0FBSyxNQUFBLENBQU8sT0FBQSxDQUFRSCxDQUFHLENBQUEsQ0FDdkNHLENBQUFBLEVBQU9KLENBQUFBLENBQVEsSUFBQSxDQUFLRyxDQUFHLEVBQUEsQ0FLakMsT0FBT0gsQ0FBQUEsQ0FBUSxJQUFBLENBQUssR0FBRyxDQUN6QiIsImZpbGUiOiJjaHVuay1SUjdUQlJHSS5qcyIsInNvdXJjZXNDb250ZW50IjpbInR5cGUgQ25BcmcgPSBzdHJpbmcgfCBmYWxzZSB8IG51bGwgfCB1bmRlZmluZWQgfCBDbkFyZ1tdIHwgUmVjb3JkPHN0cmluZywgYm9vbGVhbiB8IHVuZGVmaW5lZCB8IG51bGw+XG5cbi8qKlxuICogVXRpbGl0eSBmb3IgY29uZGl0aW9uYWxseSBqb2luaW5nIENTUyBjbGFzcyBuYW1lcyB0b2dldGhlci5cbiAqIEZpbHRlcnMgb3V0IGZhbHN5IHZhbHVlcyBhbmQgam9pbnMgd2l0aCBzcGFjZS5cbiAqXG4gKiBAZXhhbXBsZVxuICogY24oJ2J0bicsIGlzQWN0aXZlICYmICdidG4tcHJpbWFyeScsICdweC0zJylcbiAqIC8vID0+ICdidG4gYnRuLXByaW1hcnkgcHgtMydcbiAqXG4gKiBAZXhhbXBsZVxuICogY24oJ2Jhc2UtY2xhc3MnLCB7ICdhY3RpdmUnOiBpc0FjdGl2ZSwgJ2Rpc2FibGVkJzogaXNEaXNhYmxlZCB9KVxuICogLy8gPT4gJ2Jhc2UtY2xhc3MgYWN0aXZlJyAgKHdoZW4gaXNBY3RpdmU9dHJ1ZSwgaXNEaXNhYmxlZD1mYWxzZSlcbiAqL1xuZXhwb3J0IGZ1bmN0aW9uIGNuKC4uLmFyZ3M6IENuQXJnW10pOiBzdHJpbmcge1xuICBjb25zdCBjbGFzc2VzOiBzdHJpbmdbXSA9IFtdXG5cbiAgZm9yIChjb25zdCBhcmcgb2YgYXJncykge1xuICAgIGlmICghYXJnKSBjb250aW51ZVxuXG4gICAgaWYgKHR5cGVvZiBhcmcgPT09ICdzdHJpbmcnKSB7XG4gICAgICBjbGFzc2VzLnB1c2goYXJnKVxuICAgIH0gZWxzZSBpZiAoQXJyYXkuaXNBcnJheShhcmcpKSB7XG4gICAgICBjb25zdCBuZXN0ZWQgPSBjbiguLi5hcmcpXG4gICAgICBpZiAobmVzdGVkKSBjbGFzc2VzLnB1c2gobmVzdGVkKVxuICAgIH0gZWxzZSBpZiAodHlwZW9mIGFyZyA9PT0gJ29iamVjdCcpIHtcbiAgICAgIGZvciAoY29uc3QgW2tleSwgdmFsdWVdIG9mIE9iamVjdC5lbnRyaWVzKGFyZykpIHtcbiAgICAgICAgaWYgKHZhbHVlKSBjbGFzc2VzLnB1c2goa2V5KVxuICAgICAgfVxuICAgIH1cbiAgfVxuXG4gIHJldHVybiBjbGFzc2VzLmpvaW4oJyAnKVxufVxuIl19
@@ -0,0 +1,2 @@
1
+ import {a}from'./chunk-RR7TBRGI.js';import*as t from'react';import {jsxs,jsx}from'react/jsx-runtime';var H=({className:y,options:r=[],labelKey:d="label",valueKey:m="value",placeholder:x="Select...",value:f=null,onChange:p,id:g="filterable-select",name:E,disabled:h=false,...N},s)=>{let[L,l]=t.useState(false),[S,c]=t.useState(""),i=t.useRef(null),R=r.length>0&&(typeof r[0]=="string"||typeof r[0]=="number"||typeof r[0]=="boolean"),o=e=>R?String(e):e?.[d]||"",u=e=>R?e:e?.[m]??null,T=r.find(e=>u(e)===f);t.useEffect(()=>{c(T!==void 0?o(T):"");},[f,r,d,m]);let v=r.filter(e=>o(e).toLowerCase().includes(S.toLowerCase()));t.useEffect(()=>{let e=a=>{i.current&&!i.current.contains(a.target)&&l(false);};return document.addEventListener("mousedown",e),()=>document.removeEventListener("mousedown",e)},[]);let k=e=>{let a=u(e);c(o(e)),l(false),p&&p({target:{value:a,name:E||g}});};return jsxs("div",{ref:e=>{i.current=e,typeof s=="function"?s(e):s&&(s.current=e);},className:a("searchselect-wrapper position-relative ",y),style:{minWidth:0},...N,children:[jsx("input",{id:g,type:"text",className:"form-select",placeholder:x,value:S,disabled:h,onChange:e=>{c(e.target.value),l(true);},onFocus:()=>l(true),style:{cursor:"text",borderRadius:"inherit"}}),L&&!h&&jsx("ul",{className:"dropdown-menu show w-100 overflow-x-hidden",style:{maxHeight:"200px",marginTop:"2px",zIndex:1050,borderRadius:"0.375rem",boxShadow:"0 0.5rem 1rem rgba(0,0,0,0.15)"},children:v.length>0?v.map((e,a)=>{let C=u(e)??`option-${a}`;return jsx("li",{children:jsx("button",{type:"button",className:"dropdown-item text-truncate",onClick:()=>k(e),children:o(e)})},C)}):jsx("li",{children:jsx("span",{className:"dropdown-item disabled text-muted",style:{cursor:"default"},children:"No options found"})})})]})},w=t.forwardRef(H);w.displayName="SearchSelect";var D=w;export{w as a,D as b};//# sourceMappingURL=chunk-ZCAQ7S2A.js.map
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uL3NyYy9jb21wb25lbnRzL1NlYXJjaFNlbGVjdC50c3giXSwibmFtZXMiOlsiU2VhcmNoU2VsZWN0SW5uZXIiLCJjbGFzc05hbWUiLCJvcHRpb25zIiwibGFiZWxLZXkiLCJ2YWx1ZUtleSIsInBsYWNlaG9sZGVyIiwidmFsdWUiLCJvbkNoYW5nZSIsImlkIiwibmFtZSIsImRpc2FibGVkIiwicHJvcHMiLCJyZWYiLCJpc09wZW4iLCJzZXRJc09wZW4iLCJzZWFyY2hUZXJtIiwic2V0U2VhcmNoVGVybSIsIndyYXBwZXJSZWYiLCJpc1ByaW1pdGl2ZUFycmF5IiwiZ2V0TGFiZWwiLCJvcHRpb24iLCJnZXRWYWx1ZSIsInNlbGVjdGVkT3B0aW9uIiwib3B0IiwiZmlsdGVyZWRPcHRpb25zIiwiaGFuZGxlQ2xpY2tPdXRzaWRlIiwiZXZlbnQiLCJoYW5kbGVTZWxlY3QiLCJzZWxlY3RlZFZhbHVlIiwianN4cyIsIm5vZGUiLCJjbiIsImpzeCIsImluZGV4Iiwia2V5IiwiU2VhcmNoU2VsZWN0IiwiU2VhcmNoU2VsZWN0X2RlZmF1bHQiXSwibWFwcGluZ3MiOiJxR0FtQ0EsSUFBTUEsRUFBb0IsQ0FBSyxDQUMzQixVQUFBQyxDQUFBQSxDQUNBLE9BQUEsQ0FBQUMsRUFBVSxFQUFDLENBQ1gsU0FBQUMsQ0FBQUEsQ0FBVyxPQUFBLENBQ1gsUUFBQSxDQUFBQyxDQUFBQSxDQUFXLFFBQ1gsV0FBQSxDQUFBQyxDQUFBQSxDQUFjLFlBQ2QsS0FBQSxDQUFBQyxDQUFBQSxDQUFRLEtBQ1IsUUFBQSxDQUFBQyxDQUFBQSxDQUNBLEdBQUFDLENBQUFBLENBQUssbUJBQUEsQ0FDTCxLQUFBQyxDQUFBQSxDQUNBLFFBQUEsQ0FBQUMsRUFBVyxLQUFBLENBQ1gsR0FBR0MsQ0FDTCxDQUFBLENBQStEQyxDQUFBQSxHQUE0QyxDQUN6RyxHQUFNLENBQUNDLENBQUFBLENBQVFDLENBQVMsRUFBVSxDQUFBLENBQUEsUUFBQSxDQUFTLEtBQUssRUFDMUMsQ0FBQ0MsQ0FBQUEs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WkNBUTdTMkEuanMiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgKiBhcyBSZWFjdCBmcm9tICdyZWFjdCdcbmltcG9ydCB7IGNuIH0gZnJvbSAnLi4vbGliL2NuLmpzJ1xuXG5leHBvcnQgaW50ZXJmYWNlIFNlYXJjaFNlbGVjdFByb3BzPFQgPSB1bmtub3duPiB7XG4gIC8qKiBBZGRpdGlvbmFsIENTUyBjbGFzc2VzIG9uIHRoZSB3cmFwcGVyICovXG4gIGNsYXNzTmFtZT86IHN0cmluZ1xuICAvKiogU2VsZWN0YWJsZSBvcHRpb25zIOKAlCBwcmltaXRpdmVzIChzdHJpbmd8bnVtYmVyfGJvb2xlYW4pIG9yIG9iamVjdHMgKi9cbiAgb3B0aW9ucz86IFRbXVxuICAvKiogS2V5IGZvciBkaXNwbGF5IHRleHQgd2hlbiBvcHRpb25zIGFyZSBvYmplY3RzIChkZWZhdWx0ICdsYWJlbCcpICovXG4gIGxhYmVsS2V5Pzogc3RyaW5nXG4gIC8qKiBLZXkgZm9yIHRoZSB2YWx1ZSB3aGVuIG9wdGlvbnMgYXJlIG9iamVjdHMgKGRlZmF1bHQgJ3ZhbHVlJykgKi9cbiAgdmFsdWVLZXk/OiBzdHJpbmdcbiAgLyoqIFBsYWNlaG9sZGVyIHRleHQgKGRlZmF1bHQgJ1NlbGVjdC4uLicpICovXG4gIHBsYWNlaG9sZGVyPzogc3RyaW5nXG4gIC8qKiBDdXJyZW50bHkgc2VsZWN0ZWQgdmFsdWUgKi9cbiAgdmFsdWU/OiBUIHwgbnVsbFxuICAvKiogQ2FsbGVkIHdpdGggc3ludGhldGljIGV2ZW50OyBlLnRhcmdldC52YWx1ZSBpcyB0aGUgc2VsZWN0ZWQgdmFsdWUsIGUudGFyZ2V0Lm5hbWUgaXMgdGhlIGlucHV0IG5hbWUgKi9cbiAgb25DaGFuZ2U/OiAoZTogeyB0YXJnZXQ6IHsgdmFsdWU6IFQgfCBudWxsOyBuYW1lOiBzdHJpbmcgfSB9KSA9PiB2b2lkXG4gIC8qKiBJbnB1dCBlbGVtZW50IElEICovXG4gIGlkPzogc3RyaW5nXG4gIC8qKiBJbnB1dCBuYW1lIGF0dHJpYnV0ZSDigJQgc3VyZmFjZXMgYXMgZS50YXJnZXQubmFtZSBpbiBvbkNoYW5nZSAqL1xuICBuYW1lPzogc3RyaW5nXG4gIC8qKiBEaXNhYmxlIHRoZSBpbnB1dCAqL1xuICBkaXNhYmxlZD86IGJvb2xlYW5cbn1cblxuLyoqXG4gKiBBIGZpbHRlcmFibGUsIHNlYXJjaGFibGUgc2VsZWN0IGRyb3Bkb3duIHN0eWxlZCB3aXRoIEJvb3RzdHJhcCA1LlxuICogU3VwcG9ydHMgYm90aCBwcmltaXRpdmUgYXJyYXlzIGFuZCBvYmplY3QgYXJyYXlzIHdpdGggY29uZmlndXJhYmxlIGxhYmVsL3ZhbHVlIGtleXMuXG4gKi9cbmludGVyZmFjZSBTZWFyY2hTZWxlY3RDb21wb25lbnQge1xuICA8VD4ocHJvcHM6IFNlYXJjaFNlbGVjdFByb3BzPFQ+ICYgUmVhY3QuUmVmQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4pOiBSZWFjdC5SZWFjdEVsZW1lbnQgfCBudWxsXG4gIGRpc3BsYXlOYW1lPzogc3RyaW5nXG59XG5cbmNvbnN0IFNlYXJjaFNlbGVjdElubmVyID0gPFQsPih7XG4gICAgY2xhc3NOYW1lLFxuICAgIG9wdGlvbnMgPSBbXSBhcyBUW10sXG4gICAgbGFiZWxLZXkgPSAnbGFiZWwnLFxuICAgIHZhbHVlS2V5ID0gJ3ZhbHVlJyxcbiAgICBwbGFjZWhvbGRlciA9ICdTZWxlY3QuLi4nLFxuICAgIHZhbHVlID0gbnVsbCxcbiAgICBvbkNoYW5nZSxcbiAgICBpZCA9ICdmaWx0ZXJhYmxlLXNlbGVjdCcsXG4gICAgbmFtZSxcbiAgICBkaXNhYmxlZCA9IGZhbHNlLFxuICAgIC4uLnByb3BzXG4gIH06IFNlYXJjaFNlbGVjdFByb3BzPFQ+ICYgUmVhY3QuUmVmQXR0cmlidXRlczxIVE1MRGl2RWxlbWVudD4sIHJlZjogUmVhY3QuRm9yd2FyZGVkUmVmPEhUTUxEaXZFbGVtZW50PikgPT4ge1xuICAgIGNvbnN0IFtpc09wZW4sIHNldElzT3Blbl0gPSBSZWFjdC51c2VTdGF0ZShmYWxzZSlcbiAgICBjb25zdCBbc2VhcmNoVGVybSwgc2V0U2VhcmNoVGVybV0gPSBSZWFjdC51c2VTdGF0ZSgnJylcbiAgICBjb25zdCB3cmFwcGVyUmVmID0gUmVhY3QudXNlUmVmPEhUTUxEaXZFbGVtZW50PihudWxsKVxuXG4gICAgLy8gQVVUTy1ERVRFQ1Q6IHByaW1pdGl2ZXMgdnMgb2JqZWN0c1xuICAgIGNvbnN0IGlzUHJpbWl0aXZlQXJyYXkgPSBvcHRpb25zLmxlbmd0aCA+IDAgJiZcbiAgICAgICh0eXBlb2Ygb3B0aW9uc1swXSA9PT0gJ3N0cmluZycgfHwgdHlwZW9mIG9wdGlvbnNbMF0gPT09ICdudW1iZXInIHx8IHR5cGVvZiBvcHRpb25zWzBdID09PSAnYm9vbGVhbicpXG5cbiAgICBjb25zdCBnZXRMYWJlbCA9IChvcHRpb246IFQpOiBzdHJpbmcgPT4ge1xuICAgICAgaWYgKGlzUHJpbWl0aXZlQXJyYXkpIHJldHVybiBTdHJpbmcob3B0aW9uKVxuICAgICAgcmV0dXJuIChvcHRpb24gYXMgUmVjb3JkPHN0cmluZywgdW5rbm93bj4pPy5bbGFiZWxLZXldIGFzIHN0cmluZyB8fCAnJ1xuICAgIH1cblxuICAgIGNvbnN0IGdldFZhbHVlID0gKG9wdGlvbjogVCk6IFQgfCBudWxsID0+IHtcbiAgICAgIGlmIChpc1ByaW1pdGl2ZUFycmF5KSByZXR1cm4gb3B0aW9uXG4gICAgICByZXR1cm4gKChvcHRpb24gYXMgUmVjb3JkPHN0cmluZywgdW5rbm93bj4pPy5bdmFsdWVLZXldIGFzIFQpID8/IG51bGxcbiAgICB9XG5cbiAgICBjb25zdCBzZWxlY3RlZE9wdGlvbiA9IG9wdGlvbnMuZmluZChvcHQgPT4gZ2V0VmFsdWUob3B0KSA9PT0gdmFsdWUpXG5cbiAgICAvLyBTeW5jIGlucHV0IHdoZW4gdmFsdWUgY2hhbmdlcyBleHRlcm5hbGx5XG4gICAgUmVhY3QudXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGlmIChzZWxlY3RlZE9wdGlvbiAhPT0gdW5kZWZpbmVkKSB7XG4gICAgICAgIHNldFNlYXJjaFRlcm0oZ2V0TGFiZWwoc2VsZWN0ZWRPcHRpb24pKVxuICAgICAgfSBlbHNlIHtcbiAgICAgICAgc2V0U2VhcmNoVGVybSgnJylcbiAgICAgIH1cbiAgICB9LCBbdmFsdWUsIG9wdGlvbnMsIGxhYmVsS2V5LCB2YWx1ZUtleV0pXG5cbiAgICAvLyBGaWx0ZXIgb3B0aW9uc1xuICAgIGNvbnN0IGZpbHRlcmVkT3B0aW9ucyA9IG9wdGlvbnMuZmlsdGVyKG9wdGlvbiA9PlxuICAgICAgZ2V0TGFiZWwob3B0aW9uKS50b0xvd2VyQ2FzZSgpLmluY2x1ZGVzKHNlYXJjaFRlcm0udG9Mb3dlckNhc2UoKSlcbiAgICApXG5cbiAgICAvLyBDbGljayBvdXRzaWRlIHRvIGNsb3NlXG4gICAgUmVhY3QudXNlRWZmZWN0KCgpID0+IHtcbiAgICAgIGNvbnN0IGhhbmRsZUNsaWNrT3V0c2lkZSA9IChldmVudDogTW91c2VFdmVudCkgPT4ge1xuICAgICAgICBpZiAod3JhcHBlclJlZi5jdXJyZW50ICYmICF3cmFwcGVyUmVmLmN1cnJlbnQuY29udGFpbnMoZXZlbnQudGFyZ2V0IGFzIE5vZGUpKSB7XG4gICAgICAgICAgc2V0SXNPcGVuKGZhbHNlKVxuICAgICAgICB9XG4gICAgICB9XG4gICAgICBkb2N1bWVudC5hZGRFdmVudExpc3RlbmVyKCdtb3VzZWRvd24nLCBoYW5kbGVDbGlja091dHNpZGUpXG4gICAgICByZXR1cm4gKCkgPT4gZG9jdW1lbnQucmVtb3ZlRXZlbnRMaXN0ZW5lcignbW91c2Vkb3duJywgaGFuZGxlQ2xpY2tPdXRzaWRlKVxuICAgIH0sIFtdKVxuXG4gICAgY29uc3QgaGFuZGxlU2VsZWN0ID0gKG9wdGlvbjogVCkgPT4ge1xuICAgICAgY29uc3Qgc2VsZWN0ZWRWYWx1ZSA9IGdldFZhbHVlKG9wdGlvbilcbiAgICAgIHNldFNlYXJjaFRlcm0oZ2V0TGFiZWwob3B0aW9uKSlcbiAgICAgIHNldElzT3BlbihmYWxzZSlcbiAgICAgIGlmIChvbkNoYW5nZSkgb25DaGFuZ2UoeyB0YXJnZXQ6IHsgdmFsdWU6IHNlbGVjdGVkVmFsdWUsIG5hbWU6IG5hbWUgfHwgaWQgfSB9KVxuICAgIH1cblxuICAgIHJldHVybiAoXG4gICAgICA8ZGl2XG4gICAgICAgIHJlZj17KG5vZGUpID0+IHtcbiAgICAgICAgICB3cmFwcGVyUmVmLmN1cnJlbnQgPSBub2RlXG4gICAgICAgICAgaWYgKHR5cGVvZiByZWYgPT09ICdmdW5jdGlvbicpIHJlZihub2RlKVxuICAgICAgICAgIGVsc2UgaWYgKHJlZikgcmVmLmN1cnJlbnQgPSBub2RlXG4gICAgICAgIH19XG4gICAgICAgIGNsYXNzTmFtZT17Y24oJ3NlYXJjaHNlbGVjdC13cmFwcGVyIHBvc2l0aW9uLXJlbGF0aXZlICcsIGNsYXNzTmFtZSl9XG4gICAgICAgIHN0eWxlPXt7IG1pbldpZHRoOiAwIH19XG4gICAgICAgIHsuLi5wcm9wc31cbiAgICAgID5cbiAgICAgICAgPGlucHV0XG4gICAgICAgICAgaWQ9e2lkfVxuICAgICAgICAgIHR5cGU9XCJ0ZXh0XCJcbiAgICAgICAgICBjbGFzc05hbWU9XCJmb3JtLXNlbGVjdFwiXG4gICAgICAgICAgcGxhY2Vob2xkZXI9e3BsYWNlaG9sZGVyfVxuICAgICAgICAgIHZhbHVlPXtzZWFyY2hUZXJtfVxuICAgICAgICAgIGRpc2FibGVkPXtkaXNhYmxlZH1cbiAgICAgICAgICBvbkNoYW5nZT17KGUpID0+IHtcbiAgICAgICAgICAgIHNldFNlYXJjaFRlcm0oZS50YXJnZXQudmFsdWUpXG4gICAgICAgICAgICBzZXRJc09wZW4odHJ1ZSlcbiAgICAgICAgICB9fVxuICAgICAgICAgIG9uRm9jdXM9eygpID0+IHNldElzT3Blbih0cnVlKX1cbiAgICAgICAgICBzdHlsZT17eyBjdXJzb3I6ICd0ZXh0JywgYm9yZGVyUmFkaXVzOiAnaW5oZXJpdCcgfX1cbiAgICAgICAgLz5cblxuICAgICAgICB7aXNPcGVuICYmICFkaXNhYmxlZCAmJiAoXG4gICAgICAgICAgPHVsXG4gICAgICAgICAgICBjbGFzc05hbWU9XCJkcm9wZG93bi1tZW51IHNob3cgdy0xMDAgb3ZlcmZsb3cteC1oaWRkZW5cIlxuICAgICAgICAgICAgc3R5bGU9e3tcbiAgICAgICAgICAgICAgbWF4SGVpZ2h0OiAnMjAwcHgnLFxuICAgICAgICAgICAgICBtYXJnaW5Ub3A6ICcycHgnLFxuICAgICAgICAgICAgICB6SW5kZXg6IDEwNTAsXG4gICAgICAgICAgICAgIGJvcmRlclJhZGl1czogJzAuMzc1cmVtJyxcbiAgICAgICAgICAgICAgYm94U2hhZG93OiAnMCAwLjVyZW0gMXJlbSByZ2JhKDAsMCwwLDAuMTUpJyxcbiAgICAgICAgICAgIH19XG4gICAgICAgICAgPlxuICAgICAgICAgICAge2ZpbHRlcmVkT3B0aW9ucy5sZW5ndGggPiAwID8gKFxuICAgICAgICAgICAgICBmaWx0ZXJlZE9wdGlvbnMubWFwKChvcHRpb24sIGluZGV4KSA9PiB7XG4gICAgICAgICAgICAgICAgY29uc3Qga2V5ID0gKGdldFZhbHVlKG9wdGlvbikgYXMgc3RyaW5nIHwgbnVtYmVyKSA/PyBgb3B0aW9uLSR7aW5kZXh9YFxuICAgICAgICAgICAgICAgIHJldHVybiAoXG4gICAgICAgICAgICAgICAgICA8bGkga2V5PXtrZXl9PlxuICAgICAgICAgICAgICAgICAgICA8YnV0dG9uXG4gICAgICAgICAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXG4gICAgICAgICAgICAgICAgICAgICAgY2xhc3NOYW1lPVwiZHJvcGRvd24taXRlbSB0ZXh0LXRydW5jYXRlXCJcbiAgICAgICAgICAgICAgICAgICAgICBvbkNsaWNrPXsoKSA9PiBoYW5kbGVTZWxlY3Qob3B0aW9uKX1cbiAgICAgICAgICAgICAgICAgICAgPlxuICAgICAgICAgICAgICAgICAgICAgIHtnZXRMYWJlbChvcHRpb24pfVxuICAgICAgICAgICAgICAgICAgICA8L2J1dHRvbj5cbiAgICAgICAgICAgICAgICAgIDwvbGk+XG4gICAgICAgICAgICAgICAgKVxuICAgICAgICAgICAgICB9KVxuICAgICAgICAgICAgKSA6IChcbiAgICAgICAgICAgICAgPGxpPlxuICAgICAgICAgICAgICAgIDxzcGFuIGNsYXNzTmFtZT1cImRyb3Bkb3duLWl0ZW0gZGlzYWJsZWQgdGV4dC1tdXRlZFwiIHN0eWxlPXt7IGN1cnNvcjogJ2RlZmF1bHQnIH19PlxuICAgICAgICAgICAgICAgICAgTm8gb3B0aW9ucyBmb3VuZFxuICAgICAgICAgICAgICAgIDwvc3Bhbj5cbiAgICAgICAgICAgICAgPC9saT5cbiAgICAgICAgICAgICl9XG4gICAgICAgICAgPC91bD5cbiAgICAgICAgKX1cbiAgICAgIDwvZGl2PlxuICAgIClcbiAgfVxuXG5jb25zdCBTZWFyY2hTZWxlY3QgPSBSZWFjdC5mb3J3YXJkUmVmKFNlYXJjaFNlbGVjdElubmVyKSBhcyBTZWFyY2hTZWxlY3RDb21wb25lbnRcblNlYXJjaFNlbGVjdC5kaXNwbGF5TmFtZSA9ICdTZWFyY2hTZWxlY3QnXG5cbmV4cG9ydCBkZWZhdWx0IFNlYXJjaFNlbGVjdFxuZXhwb3J0IHsgU2VhcmNoU2VsZWN0IH1cbiJdfQ==
@@ -1,299 +1 @@
1
- /* ==========================================================================
2
- Custom DatePicker — Bootstrap 5 design tokens
3
- Zero dependencies. Calendar grid + time picker + year picker + datetime combo.
4
- Popover is portaled to document.body — positioning is set inline by JS.
5
- ========================================================================== */
6
-
7
- /* --- Popover container --- */
8
- .datepicker-popover {
9
- border-radius: var(--bs-border-radius, 0.375rem);
10
- box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
11
- user-select: none;
12
- -webkit-user-select: none;
13
- }
14
-
15
- .datepicker-popover--wide {
16
- min-width: 420px;
17
- }
18
-
19
- /* --- Calendar panel --- */
20
- .datepicker-calendar {
21
- min-width: 260px;
22
- }
23
-
24
- /* 7-column day-of-week header + day grid */
25
- .datepicker-days-header,
26
- .datepicker-days-grid {
27
- display: grid;
28
- grid-template-columns: repeat(7, 1fr);
29
- gap: 2px;
30
- }
31
-
32
- /* Day-of-week label */
33
- .datepicker-day-label {
34
- font-size: 0.7rem;
35
- font-weight: 600;
36
- color: var(--bs-secondary-color, #6c757d);
37
- text-transform: uppercase;
38
- text-align: center;
39
- padding: 2px 0;
40
- width: 34px;
41
- }
42
-
43
- /* Individual day cell */
44
- .datepicker-day {
45
- width: 34px;
46
- height: 34px;
47
- display: flex;
48
- align-items: center;
49
- justify-content: center;
50
- font-size: 0.8rem;
51
- font-weight: 400;
52
- color: var(--bs-body-color, #212529);
53
- background: transparent;
54
- border: none;
55
- border-radius: var(--bs-border-radius-sm, 0.25rem);
56
- cursor: pointer;
57
- transition: background-color 0.15s ease-in-out, color 0.15s ease-in-out;
58
- padding: 0;
59
- margin: 0 auto;
60
- }
61
-
62
- .datepicker-day:hover:not(:disabled):not(.datepicker-day--selected) {
63
- background-color: var(--bs-primary-bg-subtle, #cfe2ff);
64
- }
65
-
66
- /* Today */
67
- .datepicker-day--today {
68
- font-weight: 700;
69
- border: 1px solid var(--bs-border-color, #dee2e6);
70
- }
71
-
72
- /* Selected (Bootstrap primary) */
73
- .datepicker-day--selected {
74
- background-color: var(--bs-primary, #0d6efd) !important;
75
- color: #fff !important;
76
- font-weight: 600;
77
- }
78
-
79
- /* Outside current month */
80
- .datepicker-day--outside {
81
- color: var(--bs-tertiary-color, #adb5bd);
82
- opacity: 0.45;
83
- pointer-events: none;
84
- }
85
-
86
- /* Disabled (outside min/max range) */
87
- .datepicker-day--disabled {
88
- color: var(--bs-tertiary-color, #adb5bd);
89
- opacity: 0.35;
90
- cursor: not-allowed;
91
- pointer-events: none;
92
- }
93
-
94
- /* --- Year picker --- */
95
- .datepicker-year-picker {
96
- min-width: 260px;
97
- }
98
-
99
- /* 4-column year grid */
100
- .datepicker-year-grid {
101
- display: grid;
102
- grid-template-columns: repeat(4, 1fr);
103
- gap: 6px;
104
- }
105
-
106
- .datepicker-year-cell {
107
- font-size: 0.85rem;
108
- padding: 6px 4px;
109
- text-align: center;
110
- }
111
-
112
- /* --- Time panel --- */
113
- .datepicker-time {
114
- min-width: 120px;
115
- }
116
-
117
- /* Three-column scrollable time picker */
118
- .datepicker-time-col {
119
- display: flex;
120
- flex-direction: column;
121
- align-items: center;
122
- flex: 0 0 auto;
123
- width: 52px;
124
- }
125
-
126
- .datepicker-time-col-label {
127
- font-size: 0.6rem;
128
- font-weight: 600;
129
- color: var(--bs-secondary-color, #6c757d);
130
- text-transform: uppercase;
131
- letter-spacing: 0.04em;
132
- margin-bottom: 2px;
133
- user-select: none;
134
- -webkit-user-select: none;
135
- }
136
-
137
- .datepicker-time-col-scroll {
138
- display: flex;
139
- flex-direction: column;
140
- align-items: center;
141
- gap: 1px;
142
- overflow-y: scroll;
143
- scrollbar-width: none; /* Firefox */
144
- -ms-overflow-style: none; /* IE/Edge */
145
- height: 220px;
146
- scroll-behavior: smooth;
147
- }
148
-
149
- .datepicker-time-col-scroll::-webkit-scrollbar {
150
- display: none; /* Chrome/Safari/Opera */
151
- }
152
-
153
- .datepicker-time-item {
154
- width: 44px;
155
- height: 30px;
156
- display: flex;
157
- align-items: center;
158
- justify-content: center;
159
- font-size: 0.82rem;
160
- font-weight: 500;
161
- color: var(--bs-body-color, #212529);
162
- background: transparent;
163
- border: none;
164
- border-radius: var(--bs-border-radius-sm, 0.25rem);
165
- cursor: pointer;
166
- transition: background-color 0.1s ease, color 0.1s ease;
167
- padding: 0;
168
- flex-shrink: 0;
169
- }
170
-
171
- .datepicker-time-item:hover {
172
- background-color: var(--bs-primary-bg-subtle, #cfe2ff);
173
- }
174
-
175
- .datepicker-time-item.active {
176
- background-color: var(--bs-primary, #0d6efd);
177
- color: #fff;
178
- font-weight: 600;
179
- }
180
-
181
- /* AM/PM items — slightly taller since only 2 */
182
- .datepicker-time-item--ampm {
183
- height: 36px;
184
- width: 46px;
185
- font-size: 0.78rem;
186
- }
187
-
188
- .datepicker-time-separator {
189
- font-size: 1.1rem;
190
- font-weight: 600;
191
- color: var(--bs-body-color, #212529);
192
- align-self: center;
193
- margin-top: 14px;
194
- flex: 0 0 auto;
195
- }
196
-
197
- /* Footer bar (Today/Now + Clear) */
198
- .datepicker-footer {
199
- border-bottom-left-radius: var(--bs-border-radius, 0.375rem);
200
- border-bottom-right-radius: var(--bs-border-radius, 0.375rem);
201
- }
202
-
203
- /* --- Dark mode --- */
204
- [data-bs-theme="dark"] .datepicker-popover {
205
- background-color: var(--bs-body-bg, #212529);
206
- border-color: var(--bs-border-color, #495057);
207
- }
208
-
209
- [data-bs-theme="dark"] .datepicker-day:hover:not(:disabled):not(.datepicker-day--selected) {
210
- background-color: var(--bs-primary-bg-subtle, #2c3e50);
211
- }
212
-
213
- [data-bs-theme="dark"] .datepicker-time-item:hover {
214
- background-color: var(--bs-primary-bg-subtle, #2c3e50);
215
- }
216
-
217
- [data-bs-theme="dark"] .datepicker-time-item.active {
218
- background-color: var(--bs-primary, #0d6efd);
219
- color: #fff;
220
- }
221
-
222
- [data-bs-theme="dark"] .datepicker-footer {
223
- border-top-color: var(--bs-border-color, #495057);
224
- }
225
-
226
- /* ==========================================================================
227
- Mobile responsive — adapts layout and sizing for small screens
228
- ========================================================================== */
229
-
230
- @media (max-width: 575.98px) {
231
- /* Popover: never wider than the viewport */
232
- .datepicker-popover {
233
- max-width: calc(100vw - 8px) !important;
234
- overflow-x: hidden;
235
- }
236
-
237
- /* Stack calendar + time vertically in datetime mode */
238
- .datepicker-popover--wide .d-flex.flex-row {
239
- flex-direction: column !important;
240
- }
241
-
242
- /* Hide vertical divider between calendar and time */
243
- .datepicker-popover--wide .vr {
244
- display: none;
245
- }
246
-
247
- /* Slightly smaller day cells to fit narrow screens */
248
- .datepicker-day {
249
- width: 28px;
250
- height: 28px;
251
- font-size: 0.72rem;
252
- }
253
-
254
- .datepicker-day-label {
255
- width: 28px;
256
- font-size: 0.62rem;
257
- }
258
-
259
- /* Reduce calendar min-width */
260
- .datepicker-calendar,
261
- .datepicker-year-picker {
262
- min-width: 210px;
263
- }
264
-
265
- /* Time columns — stack more compactly */
266
- .datepicker-time-col-scroll {
267
- height: 200px;
268
- }
269
-
270
- .datepicker-time-item {
271
- width: 38px;
272
- height: 26px;
273
- font-size: 0.75rem;
274
- }
275
-
276
- .datepicker-time-item--ampm {
277
- width: 40px;
278
- height: 32px;
279
- }
280
-
281
- .datepicker-time-separator {
282
- font-size: 1rem;
283
- margin-top: 12px;
284
- }
285
-
286
- /* Increase touch target for footer buttons */
287
- .datepicker-footer .btn {
288
- font-size: 0.8rem;
289
- padding: 6px 8px;
290
- min-height: 34px;
291
- }
292
-
293
- /* Year grid cells — slightly roomier for tap */
294
- .datepicker-year-cell {
295
- font-size: 0.8rem;
296
- padding: 8px 4px;
297
- min-height: 34px;
298
- }
299
- }
1
+ .input-group>.datepicker-wrapper,.input-group>.searchselect-wrapper{flex:auto;width:1%;min-width:0;position:relative}.input-group>.datepicker-wrapper:not(:first-child) .form-control,.input-group>.searchselect-wrapper:not(:first-child) .form-select{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.datepicker-wrapper:not(:last-child) .form-control,.input-group>.searchselect-wrapper:not(:last-child) .form-select{border-top-right-radius:0;border-bottom-right-radius:0}.datepicker-popover{border-radius:var(--bs-border-radius,.375rem);-webkit-user-select:none;user-select:none;box-shadow:0 .5rem 1rem #00000026}.datepicker-popover--wide{min-width:420px}.datepicker-calendar{min-width:260px}.datepicker-days-header,.datepicker-days-grid{grid-template-columns:repeat(7,1fr);gap:2px;display:grid}.datepicker-day-label{color:var(--bs-secondary-color,#6c757d);text-transform:uppercase;text-align:center;width:34px;padding:2px 0;font-size:.7rem;font-weight:600}.datepicker-day{width:34px;height:34px;color:var(--bs-body-color,#212529);border-radius:var(--bs-border-radius-sm,.25rem);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0 auto;padding:0;font-size:.8rem;font-weight:400;transition:background-color .15s ease-in-out,color .15s ease-in-out;display:flex}.datepicker-day:hover:not(:disabled):not(.datepicker-day--selected){background-color:var(--bs-primary-bg-subtle,#cfe2ff)}.datepicker-day--today{border:1px solid var(--bs-border-color,#dee2e6);font-weight:700}.datepicker-day--selected{font-weight:600;background-color:var(--bs-primary,#0d6efd)!important;color:#fff!important}.datepicker-day--outside{color:var(--bs-tertiary-color,#adb5bd);opacity:.45;pointer-events:none}.datepicker-day--disabled{color:var(--bs-tertiary-color,#adb5bd);opacity:.35;cursor:not-allowed;pointer-events:none}.datepicker-year-picker{min-width:260px}.datepicker-year-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.datepicker-year-cell{text-align:center;padding:6px 4px;font-size:.85rem}.datepicker-time{min-width:120px}.datepicker-time-col{flex-direction:column;flex:none;align-items:center;width:52px;display:flex}.datepicker-time-col-label{color:var(--bs-secondary-color,#6c757d);text-transform:uppercase;letter-spacing:.04em;-webkit-user-select:none;user-select:none;margin-bottom:2px;font-size:.6rem;font-weight:600}.datepicker-time-col-scroll{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;flex-direction:column;align-items:center;gap:1px;height:220px;display:flex;overflow-y:scroll}.datepicker-time-col-scroll::-webkit-scrollbar{display:none}.datepicker-time-item{width:44px;height:30px;color:var(--bs-body-color,#212529);border-radius:var(--bs-border-radius-sm,.25rem);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.82rem;font-weight:500;transition:background-color .1s,color .1s;display:flex}.datepicker-time-item:hover{background-color:var(--bs-primary-bg-subtle,#cfe2ff)}.datepicker-time-item.active{background-color:var(--bs-primary,#0d6efd);color:#fff;font-weight:600}.datepicker-time-item--ampm{width:46px;height:36px;font-size:.78rem}.datepicker-time-separator{color:var(--bs-body-color,#212529);flex:none;align-self:center;margin-top:14px;font-size:1.1rem;font-weight:600}.datepicker-footer{border-bottom-left-radius:var(--bs-border-radius,.375rem);border-bottom-right-radius:var(--bs-border-radius,.375rem)}[data-bs-theme=dark] .datepicker-popover{background-color:var(--bs-body-bg,#212529);border-color:var(--bs-border-color,#495057)}[data-bs-theme=dark] .datepicker-day:hover:not(:disabled):not(.datepicker-day--selected),[data-bs-theme=dark] .datepicker-time-item:hover{background-color:var(--bs-primary-bg-subtle,#2c3e50)}[data-bs-theme=dark] .datepicker-time-item.active{background-color:var(--bs-primary,#0d6efd);color:#fff}[data-bs-theme=dark] .datepicker-footer{border-top-color:var(--bs-border-color,#495057)}@media (max-width:575.98px){.datepicker-popover{overflow-x:hidden;max-width:calc(100vw - 8px)!important}.datepicker-popover--wide .d-flex.flex-row{flex-direction:column!important}.datepicker-popover--wide .vr{display:none}.datepicker-day{width:28px;height:28px;font-size:.72rem}.datepicker-day-label{width:28px;font-size:.62rem}.datepicker-calendar,.datepicker-year-picker{min-width:210px}.datepicker-time-col-scroll{height:200px}.datepicker-time-item{width:38px;height:26px;font-size:.75rem}.datepicker-time-item--ampm{width:40px;height:32px}.datepicker-time-separator{margin-top:12px;font-size:1rem}.datepicker-footer .btn{min-height:34px;padding:6px 8px;font-size:.8rem}.datepicker-year-cell{min-height:34px;padding:8px 4px;font-size:.8rem}}
@@ -0,0 +1 @@
1
+ .input-group>.datepicker-wrapper,.input-group>.searchselect-wrapper{flex:auto;width:1%;min-width:0;position:relative}.input-group>.datepicker-wrapper:not(:first-child) .form-control,.input-group>.searchselect-wrapper:not(:first-child) .form-select{border-top-left-radius:0;border-bottom-left-radius:0}.input-group>.datepicker-wrapper:not(:last-child) .form-control,.input-group>.searchselect-wrapper:not(:last-child) .form-select{border-top-right-radius:0;border-bottom-right-radius:0}.datepicker-popover{border-radius:var(--bs-border-radius,.375rem);-webkit-user-select:none;user-select:none;box-shadow:0 .5rem 1rem #00000026}.datepicker-popover--wide{min-width:420px}.datepicker-calendar{min-width:260px}.datepicker-days-header,.datepicker-days-grid{grid-template-columns:repeat(7,1fr);gap:2px;display:grid}.datepicker-day-label{color:var(--bs-secondary-color,#6c757d);text-transform:uppercase;text-align:center;width:34px;padding:2px 0;font-size:.7rem;font-weight:600}.datepicker-day{width:34px;height:34px;color:var(--bs-body-color,#212529);border-radius:var(--bs-border-radius-sm,.25rem);cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;margin:0 auto;padding:0;font-size:.8rem;font-weight:400;transition:background-color .15s ease-in-out,color .15s ease-in-out;display:flex}.datepicker-day:hover:not(:disabled):not(.datepicker-day--selected){background-color:var(--bs-primary-bg-subtle,#cfe2ff)}.datepicker-day--today{border:1px solid var(--bs-border-color,#dee2e6);font-weight:700}.datepicker-day--selected{font-weight:600;background-color:var(--bs-primary,#0d6efd)!important;color:#fff!important}.datepicker-day--outside{color:var(--bs-tertiary-color,#adb5bd);opacity:.45;pointer-events:none}.datepicker-day--disabled{color:var(--bs-tertiary-color,#adb5bd);opacity:.35;cursor:not-allowed;pointer-events:none}.datepicker-year-picker{min-width:260px}.datepicker-year-grid{grid-template-columns:repeat(4,1fr);gap:6px;display:grid}.datepicker-year-cell{text-align:center;padding:6px 4px;font-size:.85rem}.datepicker-time{min-width:120px}.datepicker-time-col{flex-direction:column;flex:none;align-items:center;width:52px;display:flex}.datepicker-time-col-label{color:var(--bs-secondary-color,#6c757d);text-transform:uppercase;letter-spacing:.04em;-webkit-user-select:none;user-select:none;margin-bottom:2px;font-size:.6rem;font-weight:600}.datepicker-time-col-scroll{scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;flex-direction:column;align-items:center;gap:1px;height:220px;display:flex;overflow-y:scroll}.datepicker-time-col-scroll::-webkit-scrollbar{display:none}.datepicker-time-item{width:44px;height:30px;color:var(--bs-body-color,#212529);border-radius:var(--bs-border-radius-sm,.25rem);cursor:pointer;background:0 0;border:none;flex-shrink:0;justify-content:center;align-items:center;padding:0;font-size:.82rem;font-weight:500;transition:background-color .1s,color .1s;display:flex}.datepicker-time-item:hover{background-color:var(--bs-primary-bg-subtle,#cfe2ff)}.datepicker-time-item.active{background-color:var(--bs-primary,#0d6efd);color:#fff;font-weight:600}.datepicker-time-item--ampm{width:46px;height:36px;font-size:.78rem}.datepicker-time-separator{color:var(--bs-body-color,#212529);flex:none;align-self:center;margin-top:14px;font-size:1.1rem;font-weight:600}.datepicker-footer{border-bottom-left-radius:var(--bs-border-radius,.375rem);border-bottom-right-radius:var(--bs-border-radius,.375rem)}[data-bs-theme=dark] .datepicker-popover{background-color:var(--bs-body-bg,#212529);border-color:var(--bs-border-color,#495057)}[data-bs-theme=dark] .datepicker-day:hover:not(:disabled):not(.datepicker-day--selected),[data-bs-theme=dark] .datepicker-time-item:hover{background-color:var(--bs-primary-bg-subtle,#2c3e50)}[data-bs-theme=dark] .datepicker-time-item.active{background-color:var(--bs-primary,#0d6efd);color:#fff}[data-bs-theme=dark] .datepicker-footer{border-top-color:var(--bs-border-color,#495057)}@media (max-width:575.98px){.datepicker-popover{overflow-x:hidden;max-width:calc(100vw - 8px)!important}.datepicker-popover--wide .d-flex.flex-row{flex-direction:column!important}.datepicker-popover--wide .vr{display:none}.datepicker-day{width:28px;height:28px;font-size:.72rem}.datepicker-day-label{width:28px;font-size:.62rem}.datepicker-calendar,.datepicker-year-picker{min-width:210px}.datepicker-time-col-scroll{height:200px}.datepicker-time-item{width:38px;height:26px;font-size:.75rem}.datepicker-time-item--ampm{width:40px;height:32px}.datepicker-time-separator{margin-top:12px;font-size:1rem}.datepicker-footer .btn{min-height:34px;padding:6px 8px;font-size:.8rem}.datepicker-year-cell{min-height:34px;padding:8px 4px;font-size:.8rem}}
package/dist/index.cjs CHANGED
@@ -1,2 +1,2 @@
1
- 'use strict';var chunk4ISYCPRB_cjs=require('./chunk-4ISYCPRB.cjs'),chunkHBS6VOGV_cjs=require('./chunk-HBS6VOGV.cjs');require('./chunk-QQNPKA7A.cjs');var chunkCZV7QBHA_cjs=require('./chunk-CZV7QBHA.cjs');Object.defineProperty(exports,"DatePicker",{enumerable:true,get:function(){return chunk4ISYCPRB_cjs.a}});Object.defineProperty(exports,"SearchSelect",{enumerable:true,get:function(){return chunkHBS6VOGV_cjs.a}});Object.defineProperty(exports,"Label",{enumerable:true,get:function(){return chunkCZV7QBHA_cjs.a}});//# sourceMappingURL=index.cjs.map
2
- //# sourceMappingURL=index.cjs.map
1
+ 'use strict';var chunkGZ2D7HTS_cjs=require('./chunk-GZ2D7HTS.cjs'),chunkAWU5XGMI_cjs=require('./chunk-AWU5XGMI.cjs');require('./chunk-NPQQDBFB.cjs');var chunk2Q4NZKMX_cjs=require('./chunk-2Q4NZKMX.cjs'),chunk5IOLZUVD_cjs=require('./chunk-5IOLZUVD.cjs');Object.defineProperty(exports,"DatePicker",{enumerable:true,get:function(){return chunkGZ2D7HTS_cjs.a}});Object.defineProperty(exports,"SearchSelect",{enumerable:true,get:function(){return chunkAWU5XGMI_cjs.a}});Object.defineProperty(exports,"Label",{enumerable:true,get:function(){return chunk2Q4NZKMX_cjs.a}});Object.defineProperty(exports,"TableLoading",{enumerable:true,get:function(){return chunk5IOLZUVD_cjs.a}});//# sourceMappingURL=index.cjs.map
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJpbmRleC5janMifQ==
@@ -0,0 +1,5 @@
1
+ export { DatePicker, DatePickerChangeEvent, DatePickerProps } from './DatePicker.cjs';
2
+ export { SearchSelect, SearchSelectProps } from './SearchSelect.cjs';
3
+ export { Label, LabelProps } from './Label.cjs';
4
+ export { TableLoading, TableLoadingProps } from './TableLoading.cjs';
5
+ import 'react';
package/dist/index.d.ts CHANGED
@@ -1,10 +1,5 @@
1
- // Generated by scripts/copy-types.mjs do not edit by hand.
2
-
3
- export { DatePicker } from './DatePicker.js'
4
- export type { DatePickerProps } from './DatePicker.js'
5
-
6
- export { default as SearchSelect } from './SearchSelect.js'
7
- export type { SearchSelectProps } from './SearchSelect.js'
8
-
9
- export { Label } from './Label.js'
10
- export type { LabelProps } from './Label.js'
1
+ export { DatePicker, DatePickerChangeEvent, DatePickerProps } from './DatePicker.js';
2
+ export { SearchSelect, SearchSelectProps } from './SearchSelect.js';
3
+ export { Label, LabelProps } from './Label.js';
4
+ export { TableLoading, TableLoadingProps } from './TableLoading.js';
5
+ import 'react';
package/dist/index.js CHANGED
@@ -1,2 +1,2 @@
1
- export{a as DatePicker}from'./chunk-DIUGH74M.js';export{a as SearchSelect}from'./chunk-NOGRIWSU.js';import'./chunk-46AJ2Q5H.js';export{a as Label}from'./chunk-F3KMQZXU.js';//# sourceMappingURL=index.js.map
2
- //# sourceMappingURL=index.js.map
1
+ export{a as DatePicker}from'./chunk-ES5ABK5L.js';export{a as SearchSelect}from'./chunk-ZCAQ7S2A.js';import'./chunk-RR7TBRGI.js';export{a as Label}from'./chunk-HYB5IGJK.js';export{a as TableLoading}from'./chunk-7LXLWNUR.js';//# sourceMappingURL=index.js.map
2
+ //# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IiIsImZpbGUiOiJpbmRleC5qcyJ9
@@ -0,0 +1,157 @@
1
+ # DatePicker
2
+
3
+ > A fully-featured date, time, and datetime picker with Bootstrap 5 styling. Popover is rendered via React Portal — no z-index stacking issues with modals or sidebars.
4
+
5
+ ---
6
+
7
+ ## Import
8
+
9
+ ```js
10
+ // Default import (recommended for single-component tree-shaking)
11
+ import DatePicker from 'react-bootstrap-plugins/DatePicker'
12
+
13
+ // Named import from individual entry point
14
+ import { DatePicker } from 'react-bootstrap-plugins/DatePicker'
15
+
16
+ // Barrel import
17
+ import { DatePicker } from 'react-bootstrap-plugins'
18
+
19
+ // Required CSS (import once, anywhere in your app)
20
+ import 'react-bootstrap-plugins/css/plugins.css'
21
+ ```
22
+
23
+ ---
24
+
25
+ ## Basic Usage
26
+
27
+ ```jsx
28
+ import { useState } from 'react'
29
+ import { DatePicker } from 'react-bootstrap-plugins'
30
+ import 'react-bootstrap-plugins/css/plugins.css'
31
+
32
+ function MyForm() {
33
+ const [date, setDate] = useState(null)
34
+
35
+ return (
36
+ <DatePicker
37
+ value={date}
38
+ onChange={(e) => setDate(e.target.value)}
39
+ placeholderText="Pick a date"
40
+ />
41
+ )
42
+ }
43
+ ```
44
+
45
+ ---
46
+
47
+ ## Props
48
+
49
+ | Prop | Type | Default | Description |
50
+ |---|---|---|---|
51
+ | `mode` | `'date'` \| `'time'` \| `'datetime'` | `'date'` | Picker mode |
52
+ | `value` | `Date` \| `string` \| `null` | — | Currently selected value |
53
+ | `selected` | `Date` \| `null` | — | Alias for `value` |
54
+ | `onChange` | `(e) => void` | — | Synthetic event; `e.target.value` is formatted string, `e.target.name` is the input name |
55
+ | `dateFormat` | `string` | — | Custom format. Tokens: `yyyy`, `MM`, `dd`, `hh`, `mm`, `aa` |
56
+ | `placeholderText` | `string` | Auto | Placeholder when empty |
57
+ | `size` | `'sm'` \| `'lg'` | — | Bootstrap input size variant |
58
+ | `isClearable` | `boolean` | `false` | Show clear button |
59
+ | `disabled` | `boolean` | `false` | Disable the input |
60
+ | `minDate` | `Date` | — | Earliest selectable date |
61
+ | `maxDate` | `Date` | — | Latest selectable date |
62
+ | `timeIntervals` | `number` | `5` | Minute step in time picker |
63
+ | `timezone` | `string` | `'Kampala'` | Timezone label |
64
+ | `className` | `string` | — | Additional CSS classes on the input |
65
+ | `id` | `string` | — | Input element ID |
66
+ | `name` | `string` | — | Input name attribute — surfaces as `e.target.name` in `onChange` |
67
+
68
+ ---
69
+
70
+ ## Examples
71
+
72
+ ### Date mode (default)
73
+
74
+ ```jsx
75
+ <DatePicker
76
+ name="dob"
77
+ value={birthDate}
78
+ onChange={(e) => setBirthDate(e.target.value)}
79
+ maxDate={new Date()}
80
+ isClearable
81
+ />
82
+ // e.target.value → "2026-06-29"
83
+ // e.target.name → "dob"
84
+ ```
85
+
86
+ ### Time mode
87
+
88
+ ```jsx
89
+ <DatePicker
90
+ mode="time"
91
+ value={startTime}
92
+ onChange={(e) => setStartTime(e.target.value)}
93
+ timeIntervals={15}
94
+ />
95
+ // e.target.value → "02:30 PM"
96
+ ```
97
+
98
+ ### Datetime mode
99
+
100
+ ```jsx
101
+ <DatePicker
102
+ mode="datetime"
103
+ value={appointmentDateTime}
104
+ onChange={(e) => setAppointmentDateTime(e.target.value)}
105
+ dateFormat="dd/MM/yyyy hh:mm aa"
106
+ />
107
+ // e.target.value → "29/06/2026 02:30 PM"
108
+ ```
109
+
110
+ ### With Bootstrap form layout
111
+
112
+ ```jsx
113
+ <div className="mb-3">
114
+ <label htmlFor="eventDate" className="form-label">Event Date</label>
115
+ <DatePicker
116
+ id="eventDate"
117
+ name="eventDate"
118
+ value={eventDate}
119
+ onChange={(e) => setEventDate(e.target.value)}
120
+ minDate={new Date()}
121
+ className="form-control-lg"
122
+ />
123
+ </div>
124
+ ```
125
+
126
+ ---
127
+
128
+ ## CSS Import
129
+
130
+ DatePicker requires a small CSS file for its popover calendar layout. Import it **once** in your app:
131
+
132
+ ```js
133
+ // Recommended — uses the package exports map
134
+ import 'react-bootstrap-plugins/css/plugins.css'
135
+ ```
136
+
137
+ For troubleshooting CSS import issues, see the [main README](./README.md#css-imports).
138
+
139
+ ---
140
+
141
+ ## Dark Mode
142
+
143
+ The DatePicker respects Bootstrap 5's dark mode. Set `data-bs-theme="dark"` on any parent element and the popover calendar adapts automatically.
144
+
145
+ ---
146
+
147
+ ## Bundle Size
148
+
149
+ ~5.5 KB (min+gzip, including CSS).
150
+
151
+ ---
152
+
153
+ ## See Also
154
+
155
+ - [SearchSelect](./SEARCHSELECT.md) — Filterable, searchable select dropdown
156
+ - [Label](./LABEL.md) — Bootstrap-styled form label with required indicator
157
+ - [Main README](../README.md) — Package overview, installation, and general info
package/docs/LABEL.md ADDED
@@ -0,0 +1,89 @@
1
+ # Label
2
+
3
+ > A simple Bootstrap-styled form label with a required field indicator.
4
+
5
+ ---
6
+
7
+ ## Import
8
+
9
+ ```js
10
+ // Default import (recommended for single-component tree-shaking)
11
+ import Label from 'react-bootstrap-plugins/Label'
12
+
13
+ // Named import from individual entry point
14
+ import { Label } from 'react-bootstrap-plugins/Label'
15
+
16
+ // Barrel import
17
+ import { Label } from 'react-bootstrap-plugins'
18
+ ```
19
+
20
+ ---
21
+
22
+ ## Basic Usage
23
+
24
+ ```jsx
25
+ import { Label } from 'react-bootstrap-plugins'
26
+
27
+ <Label hf="studentName" label="Student Name" />
28
+ // Renders: <label for="studentName">Student Name <b class="text-danger">*</b></label>
29
+ ```
30
+
31
+ ---
32
+
33
+ ## Props
34
+
35
+ | Prop | Type | Default | Description |
36
+ |---|---|---|---|
37
+ | `hf` | `string` | `'default'` | `htmlFor` attribute — matches input `id` |
38
+ | `label` | `string` | `'Title'` | Label text |
39
+ | `required` | `boolean` | `true` | Show red asterisk |
40
+ | `className` | `string` | — | Additional CSS classes |
41
+
42
+ ---
43
+
44
+ ## Examples
45
+
46
+ ### With required indicator
47
+
48
+ ```jsx
49
+ <Label hf="email" label="Email Address" required />
50
+ ```
51
+
52
+ ### Optional field (no asterisk)
53
+
54
+ ```jsx
55
+ <Label hf="middleName" label="Middle Name" required={false} />
56
+ ```
57
+
58
+ ### With Bootstrap grid
59
+
60
+ ```jsx
61
+ <div className="mb-3 row">
62
+ <div className="col-sm-3">
63
+ <Label hf="phone" label="Phone Number" className="col-form-label" />
64
+ </div>
65
+ <div className="col-sm-9">
66
+ <input id="phone" type="tel" className="form-control" />
67
+ </div>
68
+ </div>
69
+ ```
70
+
71
+ ---
72
+
73
+ ## Dark Mode
74
+
75
+ The Label respects Bootstrap 5's dark mode. Set `data-bs-theme="dark"` on any parent element.
76
+
77
+ ---
78
+
79
+ ## Bundle Size
80
+
81
+ ~0.3 KB (min+gzip).
82
+
83
+ ---
84
+
85
+ ## See Also
86
+
87
+ - [DatePicker](./DATEPICKER.md) — Date, time, and datetime picker
88
+ - [SearchSelect](./SEARCHSELECT.md) — Filterable, searchable select dropdown
89
+ - [Main README](../README.md) — Package overview, installation, and general info