modern-react-ui-components/dist/index.cjs.js

Modern React + TypeScript component library with Toaster, Input, and DatePicker components

"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),A="_toast_1bjuo_1",J="_slideIn_1bjuo_1",P="_content_1bjuo_31",U="_icon_1bjuo_45",K="_messageContainer_1bjuo_59",Q="_message_1bjuo_59",X="_subtitle_1bjuo_89",ee="_dismissButton_1bjuo_105",te="_success_1bjuo_153",ne="_failed_1bjuo_161",se="_info_1bjuo_169",ae="_attention_1bjuo_177",oe="_exiting_1bjuo_231",le="_slideOut_1bjuo_1",y={toast:A,slideIn:J,content:P,icon:U,messageContainer:K,message:Q,subtitle:X,dismissButton:ee,success:te,failed:ne,info:se,attention:ae,exiting:oe,slideOut:le},ce=({type:u})=>e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"24px",viewBox:"0 -960 960 960",width:"24px",fill:"#003134",className:y.icon,children:e.jsx("path",{d:"M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"})}),re=({onClick:u})=>e.jsx("button",{className:y.dismissButton,onClick:u,"aria-label":"Dismiss notification",type:"button",children:e.jsx("svg",{xmlns:"http://www.w3.org/2000/svg",height:"20px",viewBox:"0 -960 960 960",width:"20px",fill:"#003134",children:e.jsx("path",{d:"m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"})})}),Z=({type:u,message:M,subtitle:C,onDismiss:c,autoHide:d=!0,autoHideDelay:p=5e3,className:x})=>{g.useEffect(()=>{if(d&&c){const f=setTimeout(c,p);return()=>clearTimeout(f)}},[d,p,c]);const v=`${y.toast} ${y[u]} ${x||""}`;return e.jsxs("div",{className:v,role:"alert","aria-live":"polite",children:[e.jsxs("div",{className:y.content,children:[e.jsx(ce,{type:u}),e.jsxs("div",{className:y.messageContainer,children:[e.jsx("div",{className:y.message,children:M}),C&&e.jsx("div",{className:y.subtitle,children:C})]})]}),c&&e.jsx(re,{onClick:c})]})},ie="_container_n390d_1",de="_toastWrapper_n390d_19",_e="_top-right_n390d_33",ue="_top-left_n390d_43",he="_bottom-right_n390d_53",me="_bottom-left_n390d_65",ge="_topCenter_n390d_77",xe="_bottomCenter_n390d_89",be="_toast_n390d_19",H={container:ie,toastWrapper:de,"top-right":"_top-right_n390d_33",topRight:_e,"top-left":"_top-left_n390d_43",topLeft:ue,"bottom-right":"_bottom-right_n390d_53",bottomRight:he,"bottom-left":"_bottom-left_n390d_65",bottomLeft:me,topCenter:ge,bottomCenter:xe,toast:be},ve=({toasts:u,onDismiss:M,position:C="top-right"})=>e.jsx("div",{className:`${H.container} ${H[C]}`,children:u.map((c,d)=>e.jsx("div",{className:H.toastWrapper,style:{"--index":d,zIndex:1e3-d},children:e.jsx(Z,{...c,onDismiss:()=>M(c.id),className:H.toast})},c.id))}),fe="_container_bl000_1",je="_fullWidth_bl000_15",Ce="_label_bl000_23",pe="_labelDisabled_bl000_39",we="_required_bl000_47",ye="_input_bl000_59",Me="_small_bl000_91",Ne="_medium_bl000_105",De="_large_bl000_119",$e="_hover_bl000_143",Te="_focus_bl000_151",Ye="_active_bl000_159",ze="_error_bl000_167",Fe="_disabled_bl000_175",ke="_helperText_bl000_199",Se="_helperTextDisabled_bl000_215",Be="_errorText_bl000_223",h={container:fe,fullWidth:je,label:Ce,labelDisabled:pe,required:we,input:ye,small:Me,medium:Ne,large:De,default:"_default_bl000_135",hover:$e,focus:Te,active:Ye,error:ze,disabled:Fe,helperText:ke,helperTextDisabled:Se,errorText:Be},W=g.forwardRef(({value:u,onChange:M,placeholder:C,type:c="text",label:d,helperText:p,errorText:x,required:v=!1,disabled:f=!1,size:l="medium",state:N,fullWidth:b=!1,className:D,id:a,...r},Y)=>{const[I,k]=g.useState(!1),[O,z]=g.useState(!1),$=a||`input-${Date.now()}-${Math.random().toString(36).substr(2,9)}`,S=`${$}-helper`,B=`${$}-error`,F=N||(f?"disabled":x?"error":I?"focus":O?"hover":"default"),V=[h.input,h[l],h[F],b&&h.fullWidth,D].filter(Boolean).join(" "),G=[h.container,b&&h.fullWidth].filter(Boolean).join(" ");return e.jsxs("div",{className:G,children:[d&&e.jsxs("label",{htmlFor:$,className:`${h.label} ${F==="disabled"?h.labelDisabled:""}`,children:[d,v&&e.jsx("span",{className:h.required,"aria-label":"required",children:" *"})]}),e.jsx("input",{ref:Y,id:$,className:V,type:c,value:u,onChange:M,placeholder:C,required:v,disabled:f,onFocus:j=>{var _;k(!0),(_=r.onFocus)==null||_.call(r,j)},onBlur:j=>{var _;k(!1),(_=r.onBlur)==null||_.call(r,j)},onMouseEnter:j=>{var _;f||z(!0),(_=r.onMouseEnter)==null||_.call(r,j)},onMouseLeave:j=>{var _;z(!1),(_=r.onMouseLeave)==null||_.call(r,j)},"aria-describedby":[p&&S,x&&B].filter(Boolean).join(" ")||void 0,"aria-invalid":!!x,"aria-required":v,...r}),p&&!x&&e.jsx("span",{id:S,className:`${h.helperText} ${F==="disabled"?h.helperTextDisabled:""}`,children:p}),x&&e.jsx("span",{id:B,className:h.errorText,role:"alert",children:x})]})});W.displayName="Input";const qe="_container_xc1gz_1",He="_label_xc1gz_19",Ie="_inputContainer_xc1gz_35",Oe="_input_xc1gz_35",Ve="_disabled_xc1gz_97",Ge="_calendarIcon_xc1gz_111",Le="_dropdown_xc1gz_163",Re="_header_xc1gz_193",Ze="_navButton_xc1gz_211",We="_navButtons_xc1gz_247",Ee="_headerTitle_xc1gz_257",Ae="_headerText_xc1gz_307",Je="_chevron_xc1gz_317",Pe="_chevronOpen_xc1gz_329",Ue="_content_xc1gz_349",Ke="_calendarGrid_xc1gz_359",Qe="_weekHeader_xc1gz_371",Xe="_weekDay_xc1gz_385",et="_daysGrid_xc1gz_403",tt="_dayCell_xc1gz_415",nt="_otherMonth_xc1gz_457",st="_currentMonth_xc1gz_465",at="_selected_xc1gz_473",ot="_today_xc1gz_485",lt="_monthGrid_xc1gz_507",ct="_monthCell_xc1gz_519",rt="_yearGrid_xc1gz_573",it="_yearCell_xc1gz_585",n={container:qe,label:He,inputContainer:Ie,input:Oe,disabled:Ve,calendarIcon:Ge,dropdown:Le,header:Re,navButton:Ze,navButtons:We,headerTitle:Ee,headerText:Ae,chevron:Je,chevronOpen:Pe,content:Ue,calendarGrid:Ke,weekHeader:Qe,weekDay:Xe,daysGrid:et,dayCell:tt,otherMonth:nt,currentMonth:st,selected:at,today:ot,monthGrid:lt,monthCell:ct,yearGrid:rt,yearCell:it},dt=["January","February","March","April","May","June","July","August","September","October","November","December"],_t=["JAN","FEB","MAR","APR","MAY","JUN","JUL","AUG","SEP","OCT","NOV","DEC"],ut=["Su","Mo","Tu","We","Th","Fr","Sa"],ht=({label:u,placeholder:M="Placeholder",value:C,onChange:c,disabled:d=!1,required:p=!1,className:x})=>{const[v,f]=g.useState(!1),[l,N]=g.useState(new Date),[b,D]=g.useState("day"),[a,r]=g.useState(C||null),Y=g.useRef(null),I=g.useRef(null);g.useEffect(()=>{const s=t=>{Y.current&&!Y.current.contains(t.target)&&f(!1)};return document.addEventListener("mousedown",s),()=>document.removeEventListener("mousedown",s)},[]);const k=s=>{if(!s)return"";const t=String(s.getMonth()+1).padStart(2,"0"),w=String(s.getDate()).padStart(2,"0"),m=s.getFullYear();return`${t}/${w}/${m}`},O=s=>{r(s),c==null||c(s),f(!1)},z=()=>{d||f(!v)},$=s=>{const t=new Date(l);s==="prev"?t.setMonth(t.getMonth()-1):t.setMonth(t.getMonth()+1),N(t)},S=s=>{const t=new Date(l);s==="prev"?t.setFullYear(t.getFullYear()-1):t.setFullYear(t.getFullYear()+1),N(t)},B=s=>{const t=new Date(l);s==="prev"?t.setFullYear(t.getFullYear()-12):t.setFullYear(t.getFullYear()+12),N(t)},F=()=>{const s=new Date(l.getFullYear(),l.getMonth(),1),t=new Date(s);t.setDate(t.getDate()-s.getDay());const w=[],m=new Date;for(let i=0;i<42;i++){const o=new Date(t);o.setDate(t.getDate()+i);const T=o.getMonth()===l.getMonth(),q=a&&o.getDate()===a.getDate()&&o.getMonth()===a.getMonth()&&o.getFullYear()===a.getFullYear(),E=o.getDate()===m.getDate()&&o.getMonth()===m.getMonth()&&o.getFullYear()===m.getFullYear();w.push(e.jsx("button",{className:`${n.dayCell} ${T?n.currentMonth:n.otherMonth} ${q?n.selected:""} ${E?n.today:""}`,onClick:()=>O(o),children:o.getDate()},i))}return e.jsxs("div",{className:n.calendarGrid,children:[e.jsx("div",{className:n.weekHeader,children:ut.map(i=>e.jsx("div",{className:n.weekDay,children:i},i))}),e.jsx("div",{className:n.daysGrid,children:w})]})},V=()=>{const s=l.getFullYear(),t=a==null?void 0:a.getMonth(),w=a==null?void 0:a.getFullYear();return e.jsx("div",{className:n.monthGrid,children:_t.map((m,i)=>{const o=w===s&&t===i;return e.jsx("button",{className:`${n.monthCell} ${o?n.selected:""}`,onClick:()=>{const T=new Date(l);T.setMonth(i),N(T),D("day")},children:m},m)})})},G=()=>{const s=l.getFullYear(),t=Math.floor(s/12)*12,w=a==null?void 0:a.getFullYear(),m=[];for(let i=0;i<12;i++){const o=t+i,T=w===o;m.push(e.jsx("button",{className:`${n.yearCell} ${T?n.selected:""}`,onClick:()=>{const q=new Date(l);q.setFullYear(o),N(q),D("month")},children:o},o))}return e.jsx("div",{className:n.yearGrid,children:m})},j=()=>{switch(b){case"day":return`${dt[l.getMonth()]} ${l.getFullYear()}`;case"month":return l.getFullYear().toString();case"year":const s=l.getFullYear(),t=Math.floor(s/12)*12;return`${t} - ${t+11}`;default:return""}},_=()=>{b==="day"?D("month"):b==="month"&&D("year")},L=s=>{switch(b){case"day":$(s);break;case"month":S(s);break;case"year":B(s);break}},R=`datepicker-${Date.now()}`;return e.jsxs("div",{ref:Y,className:`${n.container} ${x||""}`,children:[u&&e.jsxs("label",{htmlFor:R,className:n.label,children:[u,p&&"*"]}),e.jsxs("div",{className:n.inputContainer,children:[e.jsx("input",{ref:I,id:R,type:"text",className:`${n.input} ${d?n.disabled:""}`,placeholder:M,value:a?k(a):"",onClick:z,readOnly:!0,disabled:d}),e.jsx("button",{type:"button",className:n.calendarIcon,onClick:z,disabled:d,"aria-label":"Open calendar",children:e.jsx("svg",{width:"24",height:"24",viewBox:"0 0 24 24",fill:"none",xmlns:"http://www.w3.org/2000/svg",children:e.jsx("path",{fillRule:"evenodd",clipRule:"evenodd",d:"M7 16C7 15.45 7.45 15 8 15C8.55 15 9 15.45 9 16C9 16.55 8.55 17 8 17C7.45 17 7 16.55 7 16ZM12 15H16C16.55 15 17 15.45 17 16C17 16.55 16.55 17 16 17H12C11.45 17 11 16.55 11 16C11 15.45 11.45 15 12 15ZM18 20H6C5.449 20 5 19.551 5 19V13H19V19C19 19.551 18.551 20 18 20ZM6 6H7V7C7 7.55 7.45 8 8 8C8.55 8 9 7.55 9 7V6H15V7C15 7.55 15.45 8 16 8C16.55 8 17 7.55 17 7V6H18C18.551 6 19 6.449 19 7V11H5V7C5 6.449 5.449 6 6 6ZM18 4H17V3C17 2.45 16.55 2 16 2C15.45 2 15 2.45 15 3V4H9V3C9 2.45 8.55 2 8 2C7.45 2 7 2.45 7 3V4H6C4.346 4 3 5.346 3 7V19C3 20.654 4.346 22 6 22H18C19.654 22 21 20.654 21 19V7C21 5.346 19.654 4 18 4Z",fill:"#003134"})})})]}),v&&e.jsxs("div",{className:n.dropdown,children:[e.jsxs("div",{className:n.header,children:[e.jsxs("button",{className:n.headerTitle,onClick:_,children:[e.jsx("span",{className:n.headerText,children:j()}),e.jsx("svg",{className:`${n.chevron} ${v?n.chevronOpen:""}`,width:"16",height:"16",viewBox:"0 0 24 24",fill:"none",children:e.jsx("path",{d:"M18 9L12 15L6 9",stroke:"#003134",strokeWidth:"2",strokeLinecap:"round",strokeLinejoin:"round"})})]}),e.jsxs("div",{className:n.navButtons,children:[e.jsx("button",{className:n.navButton,onClick:()=>L("prev"),children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z"})})}),e.jsx("button",{className:n.navButton,onClick:()=>L("next"),children:e.jsx("svg",{width:"16",height:"16",viewBox:"0 0 24 24",fill:"currentColor",children:e.jsx("path",{d:"M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"})})})]})]}),e.jsxs("div",{className:n.content,children:[b==="day"&&F(),b==="month"&&V(),b==="year"&&G()]})]})]})};exports.DatePicker=ht;exports.Input=W;exports.ToastContainer=ve;exports.Toaster=Z;