yt-uikit 0.8.3 → 0.8.4

package/dist/esm/index.js

@@ -1900,17 +1900,17 @@ import*as e from"react";import t,{forwardRef as n,useImperativeHandle as r,useRe
 `,Os=({themeColor:e,themeTextColor:n,disabledDates:r=[]})=>{const[o,i]=c(!1),[d,s]=Kt(ln),p=Xt(rn),u=t.useRef(null),m=d?new Date(d):null,f=Array.isArray(r)?r:[r],g=a((()=>{const e=new Date;return e.setDate(e.getDate()+1),e}),[]),h=a((e=>f.some((t=>t instanceof Date&&(e.getFullYear()===t.getFullYear()&&e.getMonth()===t.getMonth()&&e.getDate()===t.getDate())))),[f]),x=a((e=>{if(!e)return!1;const t=g(),n=new Date(e.getFullYear(),e.getMonth(),e.getDate());return n>=new Date(t.getFullYear(),t.getMonth(),t.getDate())&&!h(n)}),[g,h]);l((()=>{const e=e=>{u.current&&!u.current.contains(e.target)&&i(!1)};return o&&document.addEventListener("mousedown",e),()=>{document.removeEventListener("mousedown",e)}}),[o]),l((()=>{const e=x(m);p((t=>t.isDateValid!==e?{...t,isDateValid:e}:t))}),[m,x,p]);const y=a((({date:e,view:t})=>{if("month"===t){const t=g(),n=new Date(e.getFullYear(),e.getMonth(),e.getDate());if(n>=new Date(t.getFullYear(),t.getMonth(),t.getDate())&&!h(n)){const e=d?new Date(d):null;return e&&n.getFullYear()===e.getFullYear()&&n.getMonth()===e.getMonth()&&n.getDate()===e.getDate()?"active-date":"black-date"}}return null}),[g,d,h]);return t.createElement("div",{className:"custom-date-picker"},t.createElement("div",{className:"date-display",onClick:()=>i(!o)},t.createElement("span",{style:{fontSize:"12px"}},(b=d?new Date(d):null)?b.toLocaleDateString("en-GB",{day:"2-digit",month:"2-digit",year:"2-digit"}).replace(/\//g,"/"):"Select a date"),t.createElement(F,null)),o&&t.createElement("div",{className:"calendar-container",ref:u},t.createElement(As,{onChange:(e,t)=>{e instanceof Date&&!h(e)&&(s(e.toISOString()),i(!1));const n=x(e instanceof Date?e:null);p((e=>e.isDateValid!==n?{...e,isDateValid:n}:e))},value:d?new Date(d):null,className:"custom-calendar",minDate:g(),tileBackgroundColor:e,tileTextColor:n,tileHoverColor:Tn(e,.2),tileClassName:y,tileDisabled:({date:e,view:t})=>"month"===t&&h(e)})));var b};q(".shipment-container {\n  font-family: Arial, sans-serif;\n  max-width: 400px;\n  padding: 3px;\n  padding-bottom: 0;\n  background-color: #fff;\n  border-radius: 8px;\n  margin: 8px 1rem;\n}\n\n.shipment-header {\n  background-color: #f6efdd;\n  padding: 4px;\n  border-radius: 0px;\n  margin-bottom: 12px;\n}\n\n.shipment-header-text {\n  color: #ae8846;\n  font-size: 14px;\n  font-weight: 500;\n  text-align: center;\n  margin: 0;\n  line-height: normal;\n}\n\n.shipment-option {\n  border: 1px solid #e5e7eb;\n  border-radius: 8px;\n  padding: 12px;\n  margin-bottom: 8px;\n  cursor: pointer;\n  transition: all 0.3s ease;\n}\n\n.shipment-option:hover {\n  background-color: #f9fafb;\n}\n\n.shipment-option.selected {\n  border-color: #ae8846;\n  border-width: 1 1 0 2 px;\n  box-shadow: 0 0 0 1px #ae8846;\n}\n\n.option-content {\n  display: flex;\n  justify-content: space-between;\n  align-items: center;\n}\n\n.option-title {\n  font-size: 12px;\n  margin-bottom: 4px;\n  font-weight: 600;\n}\n\n.option-subtitle {\n  color: #6b7280;\n  font-size: 10px;\n}\n\n.checkmark {\n  color: #ae8846;\n  font-size: 20px;\n  font-weight: bold;\n}\n\n.availability-check {\n  margin-top: 8px;\n}\n\n.availability-title {\n  font-size: 12px;\n  color: #374151;\n  margin-bottom: 3px;\n  font-weight: 600;\n}\n\n.availability-input {\n  width: 98%;\n  padding: 2px;\n  border: none;\n  border-bottom: 2px solid #d1d5db;\n  border-radius: 0;\n  font-size: 12px;\n  transition: border-color 0.3s ease;\n  background: none;\n  outline: none;\n  font-weight: 500 !important;\n  box-shadow: none;\n  text-shadow: none;\n}\n\n.availability-input:focus {\n  outline: none;\n  border-color: #ae8846;\n  border: none;\n  border-bottom: 2px solid #000000;\n  border-radius: 0;\n  font-weight: 500 !important;\n  box-shadow: none;\n  text-shadow: none;\n}\n\n.availability-input:hover {\n  outline: none;\n  border-color: #ae8846;\n  border: none;\n  border-bottom: 2px solid #000000;\n  border-radius: 0;\n  font-weight: 500 !important;\n}\n\n.error-message {\n  background-color: #fee2e2;\n  color: #b91c1c;\n  padding: 6px;\n  border-bottom-left-radius: 6px;\n  border-bottom-right-radius: 6px;\n  font-size: 13px;\n  margin-top: 10px;\n  display: flex;\n  align-items: center;\n  margin-bottom: -12px;\n  margin-left: -12px;\n  margin-right: -12px;\n  line-height: normal;\n  justify-content: center;\n  text-align: center;\n}\n\n.error-icon {\n  margin-right: 8px;\n}\n\n.slot {\n  width: 98%;\n  margin-top: 4px;\n  padding: 4px;\n  display: flex;\n  justify-content: space-between;\n  align-items: left;\n  flex-direction: column;\n  border-bottom: 2px solid #e5e7eb;\n}\n\n.slot:focus {\n  outline: none;\n  border-color: #ae8846;\n  border: none;\n  border-bottom: 2px solid #000000;\n  border-radius: 0;\n}\n\n.slot:hover {\n  outline: none;\n  border-color: #ae8846;\n  border: none;\n  border-bottom: 2px solid #000000;\n  border-radius: 0;\n}\n\n.slot-label {\n  font-size: 12px;\n  margin-bottom: 4px;\n  color: #374151;\n  margin-left: -4px;\n  font-weight: 600;\n}\n\n.success-message {\n  background-color: #dcf6ee;\n  color: #307d66;\n  padding: 6px;\n  border-bottom-left-radius: 6px;\n  border-bottom-right-radius: 6px;\n  font-size: 13px;\n  margin-top: 6px;\n  display: flex;\n  align-items: center;\n  margin-bottom: -12px;\n  margin-left: -12px;\n  margin-right: -12px;\n  line-height: normal;\n  justify-content: center;\n}");const Fs=({title:e="Cart Item(s) available in NCR only",backgroundColor:n="#F6EFDD78",tag:r="NCR",postalCodeList:i=[110001,110002,110003,110004,110005],themeColor:d,themeTextColor:s,enableSlotPicker:p,deliveryHeaderTitle:u,deliveryAvailableText:m,deliveryNotAvailableText:f,disabledDates:g})=>{const[h,x]=c(!1),[y,b]=Kt(Lo),[v,w]=Kt(rn),[C,k]=Kt(an),E=Zt(on),T=o(null),S=a((e=>{const t=i.includes(e);x(!t),w((e=>({...e,isPostalCodeValid:t})))}),[i,w]);return l((()=>{k("specific")}),[]),l((()=>{void 0!==y&&S(y)}),[y,S]),l((()=>{!1===p&&w((e=>e.isDateValid?e:{...e,isDateValid:!0}))}),[p,w]),t.createElement("div",null,u&&t.createElement("div",{className:"shipment-header"},t.createElement("h2",{className:"shipment-header-text"},u)),t.createElement("div",{className:"availability-check",style:{border:`2px solid ${d||"black"}`,padding:"12px",borderRadius:"8px",margin:"8px 1rem"}},t.createElement("div",{className:"availability-title"},"Check Shipment Availability"),t.createElement("input",{className:"availability-input",type:"text",placeholder:"Enter Postal Code",value:y||"",onChange:e=>{const t=e.target.value;if(""===t)return b(void 0),x(!1),void w((e=>({...e,isPostalCodeValid:!1})));if(!/^\d+$/.test(t))return;const n=Number(t);b(n),x(!1),w((e=>({...e,isPostalCodeValid:!1}))),T.current&&clearTimeout(T.current),T.current=setTimeout((()=>{S(n)}),1e3)},onBlur:()=>{T.current&&clearTimeout(T.current),void 0!==y&&S(y)}}),h&&t.createElement("div",{className:"error-message"},f||"Cart items aren't available at your address"),v.isPostalCodeValid&&p&&t.createElement("div",{className:"slot"},t.createElement("label",{className:"slot-label"},"Select Delivery Slot"),t.createElement(Os,{themeColor:d,themeTextColor:s,disabledDates:g})),E&&t.createElement("div",{className:"success-message"},m||"Voila! Local delivery is available")))},Ms=({postalCodeList:e=[110001,110002,110003,110004,110005],themeColor:n,themeTextColor:r,enableSlotPicker:i,disabledDates:d})=>{const[s,p]=c("standard"),[u,m]=c(!1),[f,g]=Kt(Lo),[h,x]=Kt(rn),[y,b]=Kt(an),v=Zt(on),w=o(null),C=a((t=>{const n=e.includes(t);t?(m(!n),x((e=>({...e,isPostalCodeValid:n})))):x((e=>({...e,isPostalCodeValid:!1})))}),[e,x]);return l((()=>{b("delhi-ncr"===s?"specific":"standard"),f&&C(f)}),[s]),t.createElement("div",{className:"shipment-container"},t.createElement("div",{className:"shipment-header"},t.createElement("p",{className:"shipment-header-text"},"Cart Item(s) are available for standard shipment")),t.createElement("div",{className:"shipment-option "+("standard"===s?"selected":""),onClick:()=>p("standard")},t.createElement("div",{className:"option-content"},t.createElement("div",{className:"option-text"},t.createElement("div",{className:"option-title"},"Pan India"),t.createElement("div",{className:"option-subtitle"},"7-10 days")),"standard"===s&&t.createElement(lt,{className:"checkmark"}))),t.createElement("div",{className:"shipment-option "+("delhi-ncr"===s?"selected":""),onClick:()=>p("delhi-ncr")},t.createElement("div",{className:"option-content"},t.createElement("div",{className:"option-text"},t.createElement("div",{className:"option-title"},"Delhi NCR"),t.createElement("div",{className:"option-subtitle"},"Single day delivery")),"delhi-ncr"===s&&t.createElement(lt,{className:"checkmark"})),"delhi-ncr"===s&&t.createElement("div",{className:"availability-check"},t.createElement("div",{className:"availability-title"},"Check Product Availability"),t.createElement("input",{className:"availability-input",type:"text",placeholder:"Enter Postal Code",value:f,onChange:e=>{const t=e.target.value;if(""===t)return g(void 0),m(!1),void x((e=>({...e,isPostalCodeValid:!1})));if(!/^\d+$/.test(t))return;const n=Number(t);g(n),m(!1),x((e=>({...e,isPostalCodeValid:!1}))),w.current&&clearTimeout(w.current),w.current=setTimeout((()=>{C(n)}),1e3)},onBlur:()=>{w.current&&clearTimeout(w.current),C(f)}}),u&&t.createElement("div",{className:"error-message"},"Cart items aren't available on your selected pincode for quick shipment"),h.isPostalCodeValid&&i&&t.createElement("div",{className:"slot"},t.createElement("label",{className:"slot-label"},"Pick a Selivery Slot"),t.createElement(Os,{themeColor:n,themeTextColor:r,disabledDates:d})),v&&t.createElement("div",{className:"success-message"},"Voila! Local delivery is available"))))},Rs=nn("gift_wrap",!1);nn("gift_wrap_id","");const Ls=x.div`
   display: flex;
   flex-direction: column;
-  // margin-bottom: 20px;
-  margin: 16px;
+  margin-left: 16px;
+  margin-right: 16px;
 `,js=x.div`
   display: flex;
   justify-content: space-between;
   align-items: center;
   height: fit-content;
   padding: 6px 12px;
-  border-radius: 5px;
-  border-width: 2px;
-  border-color: lightgray;
+  border-radius: 5px !important;
+  border-width: 2px !important;
+  border-color: lightgray !important;
   // box-shadow: 0px 0px 2px 2px rgb(193, 193, 193);
 `,Vs=x.span`
   display: flex;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-uikit",
-  "version": "0.8.3",
+  "version": "0.8.4",
   "description": "YourToken UI Kit",
   "scripts": {
     "rollup": "tsc && rollup -c",