chakra-dayzed-datepicker - npm Package Compare versions

Comparing version 0.1.2 to 0.1.3

dist/chakra-dayzed-datepicker.cjs.development.js

@@ -57,20 +57,26 @@ 'use strict';
 var DatepickerBackBtns = function DatepickerBackBtns(props) {
+  var _props$styleConfigs;
+
   var calendars = props.calendars,
       getBackProps = props.getBackProps;
+  var customBtnProps = (_props$styleConfigs = props.styleConfigs) == null ? void 0 : _props$styleConfigs.dateNavBtnProps;
   return React__default["default"].createElement(React.Fragment, null, React__default["default"].createElement(react.Button, _extends({}, getBackProps({
     calendars: calendars,
     offset: 12
-  }), DefaultBtnStyle), '<<'), React__default["default"].createElement(react.Button, _extends({}, getBackProps({
+  }), DefaultBtnStyle, customBtnProps), '<<'), React__default["default"].createElement(react.Button, _extends({}, getBackProps({
     calendars: calendars
-  }), DefaultBtnStyle), '<'));
+  }), DefaultBtnStyle, customBtnProps), '<'));
 };
 var DatepickerForwardBtns = function DatepickerForwardBtns(props) {
+  var _props$styleConfigs2;
+
   var calendars = props.calendars,
       getForwardProps = props.getForwardProps;
+  var customBtnProps = (_props$styleConfigs2 = props.styleConfigs) == null ? void 0 : _props$styleConfigs2.dateNavBtnProps;
   return React__default["default"].createElement(React.Fragment, null, React__default["default"].createElement(react.Button, _extends({}, getForwardProps({
     calendars: calendars
-  }), DefaultBtnStyle), '>'), React__default["default"].createElement(react.Button, _extends({}, getForwardProps({
+  }), DefaultBtnStyle, customBtnProps), '>'), React__default["default"].createElement(react.Button, _extends({}, getForwardProps({
     calendars: calendars,
     offset: 12
-  }), DefaultBtnStyle), '>>'));
+  }), DefaultBtnStyle, customBtnProps), '>>'));
 };
@@ -80,2 +86,3 @@
   var dateObj = _ref.dateObj,
+      styleConfigs = _ref.styleConfigs,
       isInRange = _ref.isInRange,
@@ -89,4 +96,5 @@ renderProps = _ref.renderProps,
   var getDateProps = renderProps.getDateProps;
-  var bg = selected || isInRange ? 'purple.200' : 'transparent';
-  bg = !selectable ? 'red.200' : bg;
+  var customBtnProps = styleConfigs == null ? void 0 : styleConfigs.dayOfMonthBtnProps;
+  var bg = selected || isInRange ? (customBtnProps == null ? void 0 : customBtnProps.selectedBg) || 'purple.200' : 'transparent';
+  bg = !selectable ? (customBtnProps == null ? void 0 : customBtnProps.disabledBg) || 'red.200' : bg;
   var halfGap = 0.125; //default Chakra-gap-space-1 is 0.25rem
@@ -102,3 +110,2 @@
     variant: "outline",
-    borderColor: today ? 'blue.400' : 'transparent',
     bg: bg,
@@ -120,2 +127,4 @@ _hover: {
     }
+  }, customBtnProps, {
+    borderColor: today ? (customBtnProps == null ? void 0 : customBtnProps.borderColor) || 'blue.400' : 'transparent'
   }), selectable ? date.getDate() : 'X');
@@ -127,2 +136,3 @@ };
       configs = _ref.configs,
+      styleConfigs = _ref.styleConfigs,
       onMouseEnterHighlight = _ref.onMouseEnterHighlight,
@@ -149,3 +159,4 @@ isInRange = _ref.isInRange;
       calendars: calendars,
-      getBackProps: getBackProps
+      getBackProps: getBackProps,
+      styleConfigs: styleConfigs
     }), React__default["default"].createElement(react.Heading, {
@@ -156,3 +167,4 @@ size: "sm",
       calendars: calendars,
-      getForwardProps: getForwardProps
+      getForwardProps: getForwardProps,
+      styleConfigs: styleConfigs
     })), React__default["default"].createElement(react.Divider, null), React__default["default"].createElement(react.SimpleGrid, {
@@ -178,2 +190,3 @@ columns: 7,
           dateObj: dateObj,
+          styleConfigs: styleConfigs,
           renderProps: renderProps,
@@ -190,3 +203,3 @@ isInRange: isInRange && isInRange(date),
 
-var _excluded$1 = ["configs"];
+var _excluded$1 = ["configs", "styleConfigs"];
 var DefaultConfigs$1 = {
@@ -200,2 +213,3 @@ dateFormat: 'yyyy-MM-dd',
       configs = _ref$configs === void 0 ? DefaultConfigs$1 : _ref$configs,
+      styleConfigs = _ref.styleConfigs,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
@@ -267,10 +281,12 @@
     renderProps: dayzedData,
-    configs: configs
+    configs: configs,
+    styleConfigs: styleConfigs
   }))));
 };
 
-var _excluded = ["configs", "initDate", "id", "name"];
+var _excluded = ["configs", "styleConfigs", "initDate", "id", "name"];
 
 var RangeCalendarPanel = function RangeCalendarPanel(_ref) {
   var configs = _ref.configs,
+      styleConfigs = _ref.styleConfigs,
       selected = _ref.selected,
@@ -350,2 +366,3 @@ renderProps = _ref.renderProps;
     configs: configs,
+    styleConfigs: styleConfigs,
     isInRange: isInRange,
@@ -364,2 +381,4 @@ onMouseEnterHighlight: onMouseEnterHighlight
       configs = _ref2$configs === void 0 ? DefaultConfigs : _ref2$configs,
+      _ref2$styleConfigs = _ref2.styleConfigs,
+      styleConfigs = _ref2$styleConfigs === void 0 ? {} : _ref2$styleConfigs,
       _ref2$initDate = _ref2.initDate,
@@ -460,2 +479,3 @@ initDate = _ref2$initDate === void 0 ? new Date() : _ref2$initDate,
     configs: configs,
+    styleConfigs: styleConfigs,
     selected: selectedDates
@@ -462,0 +482,0 @@ }))));

dist/chakra-dayzed-datepicker.cjs.production.min.js

@@ -1,2 +0,2 @@
-"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@chakra-ui/react"),n=require("dayzed"),r=require("date-fns"),a=require("arrow-keys-react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),u=o(a);function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i.apply(this,arguments)}function c(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(a[n]=e[n]);return a}var d=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],s=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],f={variant:"ghost",size:"sm"},m=function(n){var r=n.calendars,a=n.getBackProps;return l.default.createElement(e.Fragment,null,l.default.createElement(t.Button,i({},a({calendars:r,offset:12}),f),"<<"),l.default.createElement(t.Button,i({},a({calendars:r}),f),"<"))},p=function(n){var r=n.calendars,a=n.getForwardProps;return l.default.createElement(e.Fragment,null,l.default.createElement(t.Button,i({},a({calendars:r}),f),">"),l.default.createElement(t.Button,i({},a({calendars:r,offset:12}),f),">>"))},g=function(e){var n=e.dateObj,r=n.date,a=n.selectable,o=n.today,u=n.selected||e.isInRange?"purple.200":"transparent";return u=a?u:"red.200",l.default.createElement(t.Button,i({},(0,e.renderProps.getDateProps)({dateObj:n,disabled:!a,onMouseEnter:e.onMouseEnter}),{disabled:!a,size:"sm",variant:"outline",borderColor:o?"blue.400":"transparent",bg:u,_hover:{bg:"purple.400"},_after:{content:"''",position:"absolute",top:"-0.125rem",left:"-0.125rem",bottom:"-0.125rem",right:"-0.125rem",borderWidth:"0.125rem",borderColor:"transparent"}}),a?r.getDate():"X")},v=function(e){var n=e.renderProps,r=e.configs,a=e.onMouseEnterHighlight,o=e.isInRange,u=n.calendars,i=n.getBackProps,c=n.getForwardProps;return u.length<=0?null:l.default.createElement(t.Stack,{className:"datepicker-calendar",direction:["column","column","row"]},u.map((function(e){return l.default.createElement(t.VStack,{key:""+e.month+e.year,height:"100%",borderWidth:"1px",padding:"5px 10px"},l.default.createElement(t.HStack,null,l.default.createElement(m,{calendars:u,getBackProps:i}),l.default.createElement(t.Heading,{size:"sm",textAlign:"center"},r.monthNames[e.month]," ",e.year),l.default.createElement(p,{calendars:u,getForwardProps:c})),l.default.createElement(t.Divider,null),l.default.createElement(t.SimpleGrid,{columns:7,spacing:1,textAlign:"center"},r.dayNames.map((function(n){return l.default.createElement(t.Box,{fontSize:"sm",fontWeight:"semibold",key:""+e.month+e.year+n},n)})),e.weeks.map((function(r,u){return r.map((function(r,i){var c=""+e.month+e.year+u+i;if(!r)return l.default.createElement(t.Box,{key:c});var d=r.date;return l.default.createElement(g,{key:c,dateObj:r,renderProps:n,isInRange:o&&o(d),onMouseEnter:function(){a&&a(d)}})}))}))))})))},h=["configs"],y={dateFormat:"yyyy-MM-dd",monthNames:d,dayNames:s},E=["configs","initDate","id","name"],b=function(n){var r=n.configs,a=n.selected,o=n.renderProps,c=e.useState(null),d=c[0],s=c[1],f=o.calendars,m=function(e){var t=document.activeElement,n=document.querySelectorAll("button");n.forEach((function(r,a){var o=a+e;r===t&&(o<=n.length-1&&o>=0?n[o].focus():n[0].focus())}))};return u.default.config({left:function(){m(-1)},right:function(){m(1)},up:function(){m(-7)},down:function(){m(7)}}),f.length>0?l.default.createElement(t.Flex,i({},u.default.events,{onMouseLeave:function(){s(null)}}),l.default.createElement(v,{renderProps:o,configs:r,isInRange:function(e){if(!Array.isArray(a)||null==a||!a.length)return!1;var t=a[0];return 2===a.length?t<e&&a[1]>e:d&&(t<e&&d>=e||e<t&&e>=d)},onMouseEnterHighlight:function(e){Array.isArray(a)&&null!=a&&a.length&&s(e)}})):null},D={dateFormat:"MM/dd/yyyy",monthNames:d,dayNames:s};exports.RangeDatepicker=function(a){var o=a.configs,u=void 0===o?D:o,i=a.initDate,d=void 0===i?new Date:i,s=a.id,f=a.name,m=c(a,E),p=m.selectedDates,g=m.minDate,v=m.maxDate,h=m.onDateChange,y=m.disabled,P=e.useRef(null),k=e.useRef(null),C=e.useState(!1),F=C[0],O=C[1];t.useOutsideClick({ref:P,handler:function(){return O(!1)}});var S=n.useDayzed({onDateSelected:function(e){var t=e.date;if(e.selectable){var n=[].concat(p);p.length?1===p.length?(p[0]<t?n.push(t):n.unshift(t),h(n)):2===n.length&&h([t]):(n.push(t),h(n))}},selected:p,monthsToDisplay:2,date:d,minDate:g,maxDate:v}),x=p[0]?""+r.format(p[0],u.dateFormat):"";return x+=p[1]?" - "+r.format(p[1],u.dateFormat):"",l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:F,onClose:function(){return O(!1)},initialFocusRef:k,isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,{id:s,autoComplete:"off",isDisabled:y,ref:k,onClick:function(){return O(!F)},name:f,value:x,onChange:function(e){return e.target.value}})),l.default.createElement(t.PopoverContent,{ref:P,width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(b,{renderProps:S,configs:u,selected:p}))))},exports.SingleDatepicker=function(a){var o=a.configs,u=void 0===o?y:o,i=c(a,h),d=i.date,s=i.name,f=i.disabled,m=i.onDateChange,p=i.id,g=e.useRef(null),E=e.useRef(null),b=e.useState(!1),D=b[0],P=b[1];t.useOutsideClick({ref:g,handler:function(){return P(!1)}});var k=n.useDayzed({showOutsideDays:!0,onDateSelected:function(e){var t=e.date;if(e.selectable)return t instanceof Date&&!isNaN(t.getTime())?(m(t),void P(!1)):void 0},selected:d});return l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:D,onClose:function(){return P(!1)},initialFocusRef:E,isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,{id:p,autoComplete:"off",isDisabled:f,ref:E,onClick:function(){return P(!D)},name:s,value:r.format(d,u.dateFormat),onChange:function(e){return e.target.value}})),l.default.createElement(t.PopoverContent,{ref:g,width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(v,{renderProps:k,configs:u}))))};
+"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("react"),t=require("@chakra-ui/react"),n=require("dayzed"),r=require("date-fns"),a=require("arrow-keys-react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var l=o(e),u=o(a);function i(){return i=Object.assign||function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var r in n)Object.prototype.hasOwnProperty.call(n,r)&&(e[r]=n[r])}return e},i.apply(this,arguments)}function s(e,t){if(null==e)return{};var n,r,a={},o=Object.keys(e);for(r=0;r<o.length;r++)t.indexOf(n=o[r])>=0||(a[n]=e[n]);return a}var d=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"],c=["Sun","Mon","Tue","Wed","Thu","Fri","Sat"],f={variant:"ghost",size:"sm"},m=function(n){var r,a=n.calendars,o=n.getBackProps,u=null==(r=n.styleConfigs)?void 0:r.dateNavBtnProps;return l.default.createElement(e.Fragment,null,l.default.createElement(t.Button,i({},o({calendars:a,offset:12}),f,u),"<<"),l.default.createElement(t.Button,i({},o({calendars:a}),f,u),"<"))},g=function(n){var r,a=n.calendars,o=n.getForwardProps,u=null==(r=n.styleConfigs)?void 0:r.dateNavBtnProps;return l.default.createElement(e.Fragment,null,l.default.createElement(t.Button,i({},o({calendars:a}),f,u),">"),l.default.createElement(t.Button,i({},o({calendars:a,offset:12}),f,u),">>"))},p=function(e){var n=e.dateObj,r=e.styleConfigs,a=n.date,o=n.selectable,u=n.today,s=null==r?void 0:r.dayOfMonthBtnProps,d=n.selected||e.isInRange?(null==s?void 0:s.selectedBg)||"purple.200":"transparent";return d=o?d:(null==s?void 0:s.disabledBg)||"red.200",l.default.createElement(t.Button,i({},(0,e.renderProps.getDateProps)({dateObj:n,disabled:!o,onMouseEnter:e.onMouseEnter}),{disabled:!o,size:"sm",variant:"outline",bg:d,_hover:{bg:"purple.400"},_after:{content:"''",position:"absolute",top:"-0.125rem",left:"-0.125rem",bottom:"-0.125rem",right:"-0.125rem",borderWidth:"0.125rem",borderColor:"transparent"}},s,{borderColor:u?(null==s?void 0:s.borderColor)||"blue.400":"transparent"}),o?a.getDate():"X")},v=function(e){var n=e.renderProps,r=e.configs,a=e.styleConfigs,o=e.onMouseEnterHighlight,u=e.isInRange,i=n.calendars,s=n.getBackProps,d=n.getForwardProps;return i.length<=0?null:l.default.createElement(t.Stack,{className:"datepicker-calendar",direction:["column","column","row"]},i.map((function(e){return l.default.createElement(t.VStack,{key:""+e.month+e.year,height:"100%",borderWidth:"1px",padding:"5px 10px"},l.default.createElement(t.HStack,null,l.default.createElement(m,{calendars:i,getBackProps:s,styleConfigs:a}),l.default.createElement(t.Heading,{size:"sm",textAlign:"center"},r.monthNames[e.month]," ",e.year),l.default.createElement(g,{calendars:i,getForwardProps:d,styleConfigs:a})),l.default.createElement(t.Divider,null),l.default.createElement(t.SimpleGrid,{columns:7,spacing:1,textAlign:"center"},r.dayNames.map((function(n){return l.default.createElement(t.Box,{fontSize:"sm",fontWeight:"semibold",key:""+e.month+e.year+n},n)})),e.weeks.map((function(r,i){return r.map((function(r,s){var d=""+e.month+e.year+i+s;if(!r)return l.default.createElement(t.Box,{key:d});var c=r.date;return l.default.createElement(p,{key:d,dateObj:r,styleConfigs:a,renderProps:n,isInRange:u&&u(c),onMouseEnter:function(){o&&o(c)}})}))}))))})))},y=["configs","styleConfigs"],h={dateFormat:"yyyy-MM-dd",monthNames:d,dayNames:c},E=["configs","styleConfigs","initDate","id","name"],b=function(n){var r=n.configs,a=n.styleConfigs,o=n.selected,s=n.renderProps,d=e.useState(null),c=d[0],f=d[1],m=s.calendars,g=function(e){var t=document.activeElement,n=document.querySelectorAll("button");n.forEach((function(r,a){var o=a+e;r===t&&(o<=n.length-1&&o>=0?n[o].focus():n[0].focus())}))};return u.default.config({left:function(){g(-1)},right:function(){g(1)},up:function(){g(-7)},down:function(){g(7)}}),m.length>0?l.default.createElement(t.Flex,i({},u.default.events,{onMouseLeave:function(){f(null)}}),l.default.createElement(v,{renderProps:s,configs:r,styleConfigs:a,isInRange:function(e){if(!Array.isArray(o)||null==o||!o.length)return!1;var t=o[0];return 2===o.length?t<e&&o[1]>e:c&&(t<e&&c>=e||e<t&&e>=c)},onMouseEnterHighlight:function(e){Array.isArray(o)&&null!=o&&o.length&&f(e)}})):null},C={dateFormat:"MM/dd/yyyy",monthNames:d,dayNames:c};exports.RangeDatepicker=function(a){var o=a.configs,u=void 0===o?C:o,i=a.styleConfigs,d=void 0===i?{}:i,c=a.initDate,f=void 0===c?new Date:c,m=a.id,g=a.name,p=s(a,E),v=p.selectedDates,y=p.minDate,h=p.maxDate,P=p.onDateChange,D=p.disabled,k=e.useRef(null),B=e.useRef(null),O=e.useState(!1),F=O[0],M=O[1];t.useOutsideClick({ref:k,handler:function(){return M(!1)}});var S=n.useDayzed({onDateSelected:function(e){var t=e.date;if(e.selectable){var n=[].concat(v);v.length?1===v.length?(v[0]<t?n.push(t):n.unshift(t),P(n)):2===n.length&&P([t]):(n.push(t),P(n))}},selected:v,monthsToDisplay:2,date:f,minDate:y,maxDate:h}),x=v[0]?""+r.format(v[0],u.dateFormat):"";return x+=v[1]?" - "+r.format(v[1],u.dateFormat):"",l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:F,onClose:function(){return M(!1)},initialFocusRef:B,isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,{id:m,autoComplete:"off",isDisabled:D,ref:B,onClick:function(){return M(!F)},name:g,value:x,onChange:function(e){return e.target.value}})),l.default.createElement(t.PopoverContent,{ref:k,width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(b,{renderProps:S,configs:u,styleConfigs:d,selected:v}))))},exports.SingleDatepicker=function(a){var o=a.configs,u=void 0===o?h:o,i=a.styleConfigs,d=s(a,y),c=d.date,f=d.name,m=d.disabled,g=d.onDateChange,p=d.id,E=e.useRef(null),b=e.useRef(null),C=e.useState(!1),P=C[0],D=C[1];t.useOutsideClick({ref:E,handler:function(){return D(!1)}});var k=n.useDayzed({showOutsideDays:!0,onDateSelected:function(e){var t=e.date;if(e.selectable)return t instanceof Date&&!isNaN(t.getTime())?(g(t),void D(!1)):void 0},selected:c});return l.default.createElement(t.Popover,{placement:"bottom-start",variant:"responsive",isOpen:P,onClose:function(){return D(!1)},initialFocusRef:b,isLazy:!0},l.default.createElement(t.PopoverTrigger,null,l.default.createElement(t.Input,{id:p,autoComplete:"off",isDisabled:m,ref:b,onClick:function(){return D(!P)},name:f,value:r.format(c,u.dateFormat),onChange:function(e){return e.target.value}})),l.default.createElement(t.PopoverContent,{ref:E,width:"100%"},l.default.createElement(t.PopoverBody,null,l.default.createElement(v,{renderProps:k,configs:u,styleConfigs:i}))))};
 //# sourceMappingURL=chakra-dayzed-datepicker.cjs.production.min.js.map

dist/chakra-dayzed-datepicker.esm.js

@@ -48,20 +48,26 @@ import React, { Fragment, useRef, useState } from 'react';
 var DatepickerBackBtns = function DatepickerBackBtns(props) {
+  var _props$styleConfigs;
+
   var calendars = props.calendars,
       getBackProps = props.getBackProps;
+  var customBtnProps = (_props$styleConfigs = props.styleConfigs) == null ? void 0 : _props$styleConfigs.dateNavBtnProps;
   return React.createElement(Fragment, null, React.createElement(Button, _extends({}, getBackProps({
     calendars: calendars,
     offset: 12
-  }), DefaultBtnStyle), '<<'), React.createElement(Button, _extends({}, getBackProps({
+  }), DefaultBtnStyle, customBtnProps), '<<'), React.createElement(Button, _extends({}, getBackProps({
     calendars: calendars
-  }), DefaultBtnStyle), '<'));
+  }), DefaultBtnStyle, customBtnProps), '<'));
 };
 var DatepickerForwardBtns = function DatepickerForwardBtns(props) {
+  var _props$styleConfigs2;
+
   var calendars = props.calendars,
       getForwardProps = props.getForwardProps;
+  var customBtnProps = (_props$styleConfigs2 = props.styleConfigs) == null ? void 0 : _props$styleConfigs2.dateNavBtnProps;
   return React.createElement(Fragment, null, React.createElement(Button, _extends({}, getForwardProps({
     calendars: calendars
-  }), DefaultBtnStyle), '>'), React.createElement(Button, _extends({}, getForwardProps({
+  }), DefaultBtnStyle, customBtnProps), '>'), React.createElement(Button, _extends({}, getForwardProps({
     calendars: calendars,
     offset: 12
-  }), DefaultBtnStyle), '>>'));
+  }), DefaultBtnStyle, customBtnProps), '>>'));
 };
@@ -71,2 +77,3 @@
   var dateObj = _ref.dateObj,
+      styleConfigs = _ref.styleConfigs,
       isInRange = _ref.isInRange,
@@ -80,4 +87,5 @@ renderProps = _ref.renderProps,
   var getDateProps = renderProps.getDateProps;
-  var bg = selected || isInRange ? 'purple.200' : 'transparent';
-  bg = !selectable ? 'red.200' : bg;
+  var customBtnProps = styleConfigs == null ? void 0 : styleConfigs.dayOfMonthBtnProps;
+  var bg = selected || isInRange ? (customBtnProps == null ? void 0 : customBtnProps.selectedBg) || 'purple.200' : 'transparent';
+  bg = !selectable ? (customBtnProps == null ? void 0 : customBtnProps.disabledBg) || 'red.200' : bg;
   var halfGap = 0.125; //default Chakra-gap-space-1 is 0.25rem
@@ -93,3 +101,2 @@
     variant: "outline",
-    borderColor: today ? 'blue.400' : 'transparent',
     bg: bg,
@@ -111,2 +118,4 @@ _hover: {
     }
+  }, customBtnProps, {
+    borderColor: today ? (customBtnProps == null ? void 0 : customBtnProps.borderColor) || 'blue.400' : 'transparent'
   }), selectable ? date.getDate() : 'X');
@@ -118,2 +127,3 @@ };
       configs = _ref.configs,
+      styleConfigs = _ref.styleConfigs,
       onMouseEnterHighlight = _ref.onMouseEnterHighlight,
@@ -140,3 +150,4 @@ isInRange = _ref.isInRange;
       calendars: calendars,
-      getBackProps: getBackProps
+      getBackProps: getBackProps,
+      styleConfigs: styleConfigs
     }), React.createElement(Heading, {
@@ -147,3 +158,4 @@ size: "sm",
       calendars: calendars,
-      getForwardProps: getForwardProps
+      getForwardProps: getForwardProps,
+      styleConfigs: styleConfigs
     })), React.createElement(Divider, null), React.createElement(SimpleGrid, {
@@ -169,2 +181,3 @@ columns: 7,
           dateObj: dateObj,
+          styleConfigs: styleConfigs,
           renderProps: renderProps,
@@ -181,3 +194,3 @@ isInRange: isInRange && isInRange(date),
 
-var _excluded$1 = ["configs"];
+var _excluded$1 = ["configs", "styleConfigs"];
 var DefaultConfigs$1 = {
@@ -191,2 +204,3 @@ dateFormat: 'yyyy-MM-dd',
       configs = _ref$configs === void 0 ? DefaultConfigs$1 : _ref$configs,
+      styleConfigs = _ref.styleConfigs,
       props = _objectWithoutPropertiesLoose(_ref, _excluded$1);
@@ -258,10 +272,12 @@
     renderProps: dayzedData,
-    configs: configs
+    configs: configs,
+    styleConfigs: styleConfigs
   }))));
 };
 
-var _excluded = ["configs", "initDate", "id", "name"];
+var _excluded = ["configs", "styleConfigs", "initDate", "id", "name"];
 
 var RangeCalendarPanel = function RangeCalendarPanel(_ref) {
   var configs = _ref.configs,
+      styleConfigs = _ref.styleConfigs,
       selected = _ref.selected,
@@ -341,2 +357,3 @@ renderProps = _ref.renderProps;
     configs: configs,
+    styleConfigs: styleConfigs,
     isInRange: isInRange,
@@ -355,2 +372,4 @@ onMouseEnterHighlight: onMouseEnterHighlight
       configs = _ref2$configs === void 0 ? DefaultConfigs : _ref2$configs,
+      _ref2$styleConfigs = _ref2.styleConfigs,
+      styleConfigs = _ref2$styleConfigs === void 0 ? {} : _ref2$styleConfigs,
       _ref2$initDate = _ref2.initDate,
@@ -451,2 +470,3 @@ initDate = _ref2$initDate === void 0 ? new Date() : _ref2$initDate,
     configs: configs,
+    styleConfigs: styleConfigs,
     selected: selectedDates
@@ -453,0 +473,0 @@ }))));

dist/components/calendarPanel.d.ts

 import { RenderProps } from 'dayzed';
 import React from 'react';
-interface CalendarPaneProps {
+import { DatepickerConfigs, DatepickerProps } from '../utils/commonTypes';
+interface CalendarPanelProps extends DatepickerProps {
     renderProps: RenderProps;
@@ -9,8 +10,3 @@ configs: DatepickerConfigs;
 }
-export interface DatepickerConfigs {
-    dateFormat: string;
-    monthNames: string[];
-    dayNames: string[];
-}
-export declare const CalendarPanel: React.FC<CalendarPaneProps>;
+export declare const CalendarPanel: React.FC<CalendarPanelProps>;
 export {};

dist/components/dateNavBtns.d.ts

 import { Calendar, GetBackForwardPropsOptions } from 'dayzed';
 import React from 'react';
-export interface DatepickerBackBtnsProps {
+import { DatepickerProps } from '../utils/commonTypes';
+export interface DatepickerBackBtnsProps extends DatepickerProps {
     calendars: Calendar[];
@@ -8,6 +9,6 @@ getBackProps: (data: GetBackForwardPropsOptions) => Record<string, any>;
 export declare const DatepickerBackBtns: React.FC<DatepickerBackBtnsProps>;
-export interface DatepickerForwardBtnsProps {
+export interface DatepickerForwardBtnsProps extends DatepickerProps {
     calendars: Calendar[];
     getForwardProps: (data: GetBackForwardPropsOptions) => Record<string, any>;
 }
-export declare const DatepickerForwardBtns: (props: DatepickerForwardBtnsProps) => JSX.Element;
+export declare const DatepickerForwardBtns: React.FC<DatepickerForwardBtnsProps>;

dist/components/dayOfMonth.d.ts

 import { DateObj, RenderProps } from 'dayzed';
 import React from 'react';
-interface DayOfMonthProps {
+import { DatepickerProps } from '../utils/commonTypes';
+interface DayOfMonthProps extends DatepickerProps {
     renderProps: RenderProps;
@@ -5,0 +6,0 @@ isInRange?: boolean | null;

dist/range.d.ts

 import React from 'react';
-import { DatepickerConfigs } from './components/calendarPanel';
-export interface RangeDatepickerProps {
+import { DatepickerConfigs, DatepickerProps } from './utils/commonTypes';
+export interface RangeDatepickerProps extends DatepickerProps {
     initDate?: Date;
@@ -5,0 +5,0 @@ selectedDates: Date[];

dist/single.d.ts

 import React from 'react';
-import { DatepickerConfigs } from './components/calendarPanel';
-export interface SingleDatepickerProps {
+import { DatepickerConfigs, DatepickerProps } from './utils/commonTypes';
+export interface SingleDatepickerProps extends DatepickerProps {
     date: Date;
@@ -5,0 +5,0 @@ configs?: DatepickerConfigs;

dist/utils/commonTypes.d.ts

 /// <reference types="react" />
+import { ButtonProps } from '@chakra-ui/button';
+import { BackgroundProps } from '@chakra-ui/react';
 import { DateObj } from 'dayzed';
 export declare type OnDateSelected = (selectedDate: DateObj, event: React.SyntheticEvent<Element, Event>) => void;
+export interface DatepickerProps {
+    styleConfigs?: StyleConfigs;
+}
+export interface DayOfMonthBtnStyleProps extends ButtonProps {
+    selectedBg?: BackgroundProps['bg'];
+    disabledBg?: BackgroundProps['bg'];
+}
+export interface StyleConfigs {
+    dateNavBtnProps?: ButtonProps;
+    dayOfMonthBtnProps?: DayOfMonthBtnStyleProps;
+}
+export interface DatepickerConfigs {
+    dateFormat: string;
+    monthNames: string[];
+    dayNames: string[];
+}

package.json

 {
-  "version": "0.1.2",
+  "version": "0.1.3",
   "license": "MIT",
@@ -60,3 +60,3 @@ "main": "dist/index.js",
   "devDependencies": {
-    "@chakra-ui/react": "^1.6.5",
+    "@chakra-ui/react": "^1.7.1",
     "@emotion/react": "^11.4.0",
@@ -63,0 +63,0 @@ "@emotion/styled": "^11.3.0",

README.md

 # A Simple Chakra Datepicker based on Dayzed.
 
-Every individual component is using Chakra UI. So it should respect all Chakra UI Configs without problem.
+[![npm version](https://badge.fury.io/js/chakra-dayzed-datepicker.svg)](https://badge.fury.io/js/chakra-dayzed-datepicker) ![Downloads](https://img.shields.io/npm/dm/chakra-dayzed-datepicker.svg)
 
+
+Every individual component is using Chakra UI. So it should respect all [Chakra UI](https://github.com/chakra-ui/chakra-ui) Configs without problem.
+
 <img src="https://user-images.githubusercontent.com/35160613/141594524-35a0c536-d9fd-4528-bd56-f647b98755be.gif" height="50%"/>
@@ -35,3 +38,2 @@ <img src="https://user-images.githubusercontent.com/35160613/141594549-31f55369-6e0e-4818-9351-6f515e3f1f84.gif" height="50%"/>
   const [selectedDates, setSelectedDates] = useState<Date[]>([new Date(), new Date()]);
-  const [date, setDate] = useState(new Date());
   
@@ -43,1 +45,20 @@ <RangeDatepicker
 ```
+### StyleConfigs: 
+`dateNavBtnProps` and `dayOfMonthBtnProps` extends from `ButtonProps` of Chakra-UI
+
+<br/>Example:
+```js
+  styleConfigs={{
+    dateNavBtnProps: {
+      colorScheme: "blue",
+      variant: "outline"
+    },
+    dayOfMonthBtnProps: {
+      borderColor: "red.300",
+      selectedBg: "blue.200",
+      _hover: {
+        bg: 'blue.400',
+      }
+    }
+  }}
+```

src/utils/commonTypes.ts

@@ -0,1 +1,3 @@
+import { ButtonProps } from '@chakra-ui/button';
+import { BackgroundProps } from '@chakra-ui/react';
 import { DateObj } from 'dayzed';
@@ -7,1 +9,21 @@
 ) => void;
+
+export interface DatepickerProps {
+  styleConfigs?: StyleConfigs;
+}
+
+export interface DayOfMonthBtnStyleProps extends ButtonProps {
+  selectedBg?: BackgroundProps['bg'];
+  disabledBg?: BackgroundProps['bg'];
+}
+
+export interface StyleConfigs {
+  dateNavBtnProps?: ButtonProps;
+  dayOfMonthBtnProps?: DayOfMonthBtnStyleProps;
+}
+
+export interface DatepickerConfigs {
+  dateFormat: string;
+  monthNames: string[];
+  dayNames: string[];
+}

Fixed alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

147563

increased by8.74%

Lines of code

1534

increased by8.1%

Number of lines in readme file

62

increased by47.62%

Number of medium supply chain risk alerts

0

decreased by-100%

No dependency changes