hplx-react-elements-dev 1.1.9 → 1.1.11

package/dist/esm/datePicker/SingleDatePicker.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import "react-date-range/dist/styles.css";
+import "react-date-range/dist/theme/default.css";
+import "./SingleDatePickerCss.css";
+import { SingleDatePickerProps } from "../types";
+declare const SingleDatePicker: React.FC<SingleDatePickerProps>;
+export default SingleDatePicker;

package/dist/esm/index.css

@@ -1059,6 +1059,529 @@
   padding: 0.833em;
 }
 
+.single-date-picker .rdrCalendarWrapper {
+  display: flex;
+  align-items: flex-start;
+  padding: 0px;
+  position: unset;
+  width: 254px;
+  height: 314px !important;
+  box-shadow: 0px 20px 24px -4px #ffffff14,
+    0px 8px 8px -4px rgba(255, 255, 255, 0.03) !important;
+  background: #fcfcfd !important;
+  border-radius: 8.673px;
+  border: 1px solid #d0d5dd;
+}
+
+.single-date-picker .rdrDateDisplayWrapper {
+  background-color: rgb(24, 86, 193) !important;
+}
+
+.single-date-picker .rdrDateDisplay {
+  margin: 0.833em;
+}
+
+.single-date-picker .rdrDateDisplayItem {
+  border-radius: 4px;
+  background-color: rgb(255, 255, 255);
+  box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.21) !important;
+  border: 1px solid transparent;
+}
+
+.single-date-picker .rdrDateDisplayItem input {
+  cursor: pointer;
+  height: 2.5em;
+  line-height: 2.5em;
+  border: 0px;
+  background: transparent;
+  width: 100%;
+  color: #849095;
+}
+
+.single-date-picker .rdrDateDisplayItemActive {
+  border-color: currentColor;
+}
+
+.single-date-picker .rdrDateDisplayItemActive input {
+  color: #7d888d;
+}
+
+.single-date-picker .rdrMonth {
+  width: 252px;
+}
+.single-date-picker .rdrMonthAndYearWrapper {
+  align-items: center;
+  padding: 34px 0 34px 0 !important;
+  margin: 0 !important;
+  background-color: #f2f4f7;
+  border-radius: 8.673px 8.673px 0 0;
+  width: 252px;
+  height: 24px;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+  text-align: center;
+  color: #344054;
+  flex: none;
+  flex-grow: 0;
+}
+
+.single-date-picker .rdrMonthAndYearPickers {
+  font-weight: 600;
+}
+
+.single-date-picker .rdrMonthAndYearPickers select {
+  appearance: none;
+  -webkit-appearance: none;
+  border: 0;
+  background: transparent;
+  padding: 10px 0px 10px 0px !important;
+  border-radius: 4px;
+  font-size: 20px;
+  font-weight: 400;
+  outline: 0;
+  color: #1570ef;
+  background-position: right 8px center !important;
+  cursor: pointer;
+  text-align: center;
+}
+
+.single-date-picker .rdrMonthAndYearPickers select:hover {
+  background-color: rgba(255, 255, 255, 0.07) !important;
+}
+
+.single-date-picker .rdrMonthPicker {
+  margin: 0 10px 0 0 !important;
+}
+
+.single-date-picker .rdrYearPicker {
+  margin: 0 0 0 0px !important;
+}
+
+.single-date-picker .rdrNextPrevButton {
+  display: block;
+  width: 20px !important;
+  height: 20px !important;
+  margin: 0 9px 0 9px;
+  padding: 0;
+  border: 0;
+  border-radius: 5px;
+  background: #f2f4f7;
+}
+
+.single-date-picker .rdrNextPrevButton:hover {
+  background: #f2f4f7 !important;
+}
+
+.single-date-picker .rdrNextPrevButton i {
+  display: block;
+  width: 0 !important;
+  height: 0 !important;
+  padding: 0;
+  text-align: center;
+  border-style: solid;
+  transform: translate(-3px, 0px);
+}
+
+.single-date-picker .rdrPprevButton i {
+  content: "" !important;
+  width: 10px !important;
+  height: 10px !important;
+  border-top: solid 1px #1570ef !important;
+  border-right: solid 1px #1570ef !important;
+  transform: rotate(-135deg) !important;
+}
+
+.single-date-picker .rdrNextButton i {
+  border-color: transparent transparent transparent transparent !important;
+  content: "" !important;
+  width: 10px !important;
+  height: 10px !important;
+  border-bottom: solid 1px #1570ef !important;
+  border-right: solid 1px #1570ef !important;
+  transform: rotate(-45deg) !important;
+}
+
+.single-date-picker .rdrWeekDays {
+  padding: 0 0.833em;
+}
+
+.single-date-picker .rdrMonth {
+  padding: 0 0.833em 1.666em 0.833em;
+}
+
+.single-date-picker .rdrMonth .rdrWeekDays {
+  padding: 0;
+}
+
+.single-date-picker
+  .rdrMonths.rdrMonthsVertical
+  .rdrMonth:first-child
+  .rdrMonthName {
+  display: none;
+}
+
+.single-date-picker .rdrWeekDay {
+  width: 24px !important;
+  height: 20px !important;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400;
+  font-size: 14px;
+  line-height: 20px !important;
+  margin-top: 10px !important;
+  margin-bottom: 10px !important;
+  text-align: center;
+  color: #475467 !important;
+}
+
+.single-date-picker .rdrDay {
+  background: transparent;
+  width: 33px !important;
+  height: 30px !important;
+  -webkit-user-select: none;
+  user-select: none;
+  border: 0;
+  text-align: center !important;
+  color: #344054;
+  padding: 16px !important;
+  top: 0px !important;
+  left: 0px !important ;
+  right: 0px !important;
+  bottom: 0px !important;
+  font-family: "Inter";
+  font-style: normal;
+  font-weight: 400 !important;
+  font-size: 14px !important;
+  line-height: 20px !important;
+}
+
+.single-date-picker .rdrDay:focus {
+  outline: 0;
+}
+
+.single-date-picker .rdrDayNumber {
+  margin: auto;
+  outline: 0;
+  font-weight: 300;
+  width: 24px;
+  height: 20px;
+  position: absolute;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  top: 5px;
+  bottom: 5px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.single-date-picker .rdrDayToday .rdrDayNumber span {
+  font-weight: 500 !important;
+}
+
+.single-date-picker .rdrDayToday .rdrDayNumber span:after {
+  content: "";
+  bottom: 4px !important;
+  top: -4px !important;
+  right: 4px !important;
+  width: 26px !important;
+  height: 26px !important;
+  border-radius: 100% !important;
+  background: rgba(66, 67, 69, 0.07) !important;
+  z-index: 0;
+}
+
+.single-date-picker
+  .rdrDayToday:not(.rdrDayPassive)
+  .rdrInRange
+  ~ .rdrDayNumber
+  span:after,
+.single-date-picker
+  .rdrDayToday:not(.rdrDayPassive)
+  .rdrStartEdge
+  ~ .rdrDayNumber
+  span:after,
+.single-date-picker
+  .rdrDayToday:not(.rdrDayPassive)
+  .rdrEndEdge
+  ~ .rdrDayNumber
+  span:after,
+.single-date-picker
+  .rdrDayToday:not(.rdrDayPassive)
+  .rdrSelected
+  ~ .rdrDayNumber
+  span:after {
+  background: #fff;
+}
+
+.single-date-picker
+  .rdrDay:not(.rdrDayPassive)
+  .rdrInRange
+  ~ .rdrDayNumber
+  span,
+.single-date-picker
+  .rdrDay:not(.rdrDayPassive)
+  .rdrStartEdge
+  ~ .rdrDayNumber
+  span,
+.single-date-picker
+  .rdrDay:not(.rdrDayPassive)
+  .rdrEndEdge
+  ~ .rdrDayNumber
+  span,
+.single-date-picker
+  .rdrDay:not(.rdrDayPassive)
+  .rdrSelected
+  ~ .rdrDayNumber
+  span {
+  color: #fff;
+}
+
+.single-date-picker .rdrSelected,
+.single-date-picker .rdrInRange,
+.single-date-picker .rdrStartEdge,
+.single-date-picker .rdrEndEdge {
+  background: currentColor;
+  position: absolute;
+  top: 5px;
+  left: 0;
+  right: 0;
+  bottom: 5px;
+}
+
+.single-date-picker .rdrSelected {
+  width: 26px !important;
+  height: 26px !important;
+  top: 3px;
+  left: 4px;
+  background: #175cd3 !important;
+  border-radius: 100% !important;
+  align-self: center !important;
+  justify-self: center !important;
+  flex: none;
+  flex-grow: 0;
+}
+
+.single-date-picker .rdrStartEdge {
+  border-top-left-radius: 1.042em;
+  border-bottom-left-radius: 1.042em;
+  left: 2px;
+}
+
+.single-date-picker .rdrEndEdge {
+  border-top-right-radius: 1.042em;
+  border-bottom-right-radius: 1.042em;
+  right: 2px;
+}
+
+.single-date-picker .rdrSelected {
+  border-radius: 1.042em;
+}
+
+.single-date-picker .rdrDayStartOfMonth .rdrInRange,
+.single-date-picker .rdrDayStartOfMonth .rdrEndEdge,
+.single-date-picker .rdrDayStartOfWeek .rdrInRange,
+.single-date-picker .rdrDayStartOfWeek .rdrEndEdge {
+  border-top-left-radius: 1.042em;
+  border-bottom-left-radius: 1.042em;
+  left: 2px;
+}
+
+.single-date-picker .rdrDayEndOfMonth .rdrInRange,
+.single-date-picker .rdrDayEndOfMonth .rdrStartEdge,
+.single-date-picker .rdrDayEndOfWeek .rdrInRange,
+.single-date-picker .rdrDayEndOfWeek .rdrStartEdge {
+  border-top-right-radius: 1.042em;
+  border-bottom-right-radius: 1.042em;
+  right: 2px;
+}
+
+.single-date-picker .rdrDayStartOfMonth .rdrDayInPreview,
+.single-date-picker .rdrDayStartOfMonth .rdrDayEndPreview,
+.single-date-picker .rdrDayStartOfWeek .rdrDayInPreview,
+.single-date-picker .rdrDayStartOfWeek .rdrDayEndPreview {
+  border-top-left-radius: 1.333em;
+  border-bottom-left-radius: 1.333em;
+  border-left-width: 1px;
+  left: 0px;
+}
+
+.single-date-picker .rdrDayEndOfMonth .rdrDayInPreview,
+.single-date-picker .rdrDayEndOfMonth .rdrDayStartPreview,
+.single-date-picker .rdrDayEndOfWeek .rdrDayInPreview,
+.single-date-picker .rdrDayEndOfWeek .rdrDayStartPreview {
+  border-top-right-radius: 1.333em !important;
+  border-bottom-right-radius: 1.333em !important;
+  border-right-width: 1px !important;
+  right: 0px;
+}
+
+.single-date-picker .rdrDayStartPreview,
+.single-date-picker .rdrDayInPreview,
+.single-date-picker .rdrDayEndPreview {
+  background: rgba(255, 255, 255, 0.09);
+  position: absolute;
+  top: 3px;
+  left: 0px;
+  right: 0px;
+  bottom: 3px;
+  pointer-events: none;
+  border: 0px solid currentColor;
+  z-index: -10;
+}
+
+.single-date-picker .rdrDayStartPreview {
+  border-top-width: 1px !important;
+  border-left-width: 1px !important;
+  border-bottom-width: 1px !important;
+  border-top-left-radius: 1.333em;
+  border-bottom-left-radius: 1.333em !important;
+  left: 0px !important;
+  top: 0px !important;
+  right: 0px !important;
+}
+
+.single-date-picker .rdrDayInPreview {
+  border-top-width: 1px;
+  border-bottom-width: 1px;
+}
+
+.single-date-picker .rdrDayEndPreview {
+  border-top-width: 1px;
+  border-right-width: 1px;
+  border-bottom-width: 1px;
+  border-top-right-radius: 1.333em;
+  border-bottom-right-radius: 1.333em;
+  right: 0px;
+}
+
+.single-date-picker .rdrDefinedRangesWrapper {
+  font-size: 12px;
+  width: 226px;
+  border-right: solid 1px #eff2f7;
+  background: #fff;
+}
+
+.single-date-picker .rdrDefinedRangesWrapper .rdrStaticRangeSelected {
+  color: currentColor;
+  font-weight: 600;
+}
+
+.single-date-picker .rdrStaticRange {
+  border: 0;
+  cursor: pointer;
+  display: block;
+  outline: 0;
+  border-bottom: 1px solid #eff2f7;
+  padding: 0;
+  background: #fff;
+}
+
+.single-date-picker .rdrStaticRange:hover .rdrStaticRangeLabel,
+.single-date-picker .rdrStaticRange:focus .rdrStaticRangeLabel {
+  background: #eff2f7;
+}
+.single-date-picker .single-date-picker .rdrStaticRangeLabel {
+  display: block;
+  outline: 0;
+  line-height: 18px;
+  padding: 10px 20px;
+  text-align: left;
+}
+.single-date-picker .single-date-picker .rdrInputRanges {
+  padding: 10px 0;
+}
+.single-date-picker .single-date-picker .rdrInputRange {
+  align-items: center;
+  padding: 5px 20px;
+}
+.single-date-picker .single-date-picker .rdrInputRangeInput {
+  width: 30px;
+  height: 30px;
+  line-height: 30px;
+  border-radius: 4px;
+  text-align: center;
+  border: solid 1px rgb(222, 231, 235);
+  margin-right: 10px;
+  color: rgb(108, 118, 122);
+}
+
+.single-date-picker .rdrInputRangeInput:focus,
+.single-date-picker .rdrInputRangeInput:hover {
+  border-color: rgb(180, 191, 196);
+  outline: 0;
+  color: #333;
+}
+
+.single-date-picker
+  .rdrCalendarWrapper:not(.rdrDateRangeWrapper)
+  .rdrDayHovered
+  .rdrDayNumber:after {
+  content: "";
+  width: 26px !important;
+  height: 26px !important;
+  border: 0px solid currentColor !important;
+  border-radius: 100% !important;
+  position: absolute !important;
+  top: -3px !important;
+  right: 0px !important;
+  left: -1px !important;
+  bottom: 0px !important;
+  background: rgba(0, 145, 255, 0.1);
+}
+
+.single-date-picker .rdrDayPassive {
+  pointer-events: all !important;
+}
+
+.single-date-picker .rdrDayNumber span {
+  color: #000;
+  font-size: 13px;
+}
+.single-date-picker .rdrDayPassive .rdrDayNumber span {
+  color: #d5dce0;
+}
+
+.single-date-picker .rdrDayPassive .rdrInRange,
+.single-date-picker .rdrDayPassive .rdrStartEdge,
+.single-date-picker .rdrDayPassive .rdrEndEdge,
+.single-date-picker .rdrDayPassive .rdrSelected,
+.single-date-picker .rdrDayPassive .rdrDayStartPreview,
+.single-date-picker .rdrDayPassive .rdrDayInPreview,
+.single-date-picker .rdrDayPassive .rdrDayEndPreview {
+  display: none;
+}
+
+.single-date-picker .rdrDayDisabled {
+  background-color: rgb(255, 255, 255) !important;
+}
+
+.single-date-picker .rdrDayDisabled .rdrDayNumber span {
+  color: #fda29b;
+}
+
+.single-date-picker .rdrDayDisabled .rdrInRange,
+.single-date-picker .rdrDayDisabled .rdrStartEdge,
+.single-date-picker .rdrDayDisabled .rdrEndEdge,
+.single-date-picker .rdrDayDisabled .rdrSelected,
+.single-date-picker .rdrDayDisabled .rdrDayStartPreview,
+.single-date-picker .rdrDayDisabled .rdrDayInPreview,
+.single-date-picker .rdrDayDisabled .rdrDayEndPreview {
+  filter: grayscale(100%) opacity(60%);
+}
+
+.single-date-picker .rdrMonthName {
+  text-align: left;
+  font-weight: 600;
+  color: #849095;
+  padding: 0.833em;
+}
+
 .rdrCalendarWrapper {
   display: flex;
   align-items: flex-start;

package/dist/esm/index.d.ts

@@ -25,6 +25,7 @@ export { default as AddSuggestion } from "./addSuggestion/AddSuggestion";
 export { default as MessageToast } from "./messageToast/MessageToast";
 export { default as NestedDropdown } from "./nestedDropdown/NestedDropdown";
 export { default as DatePicker } from "./datePicker/DatePicker";
+export { default as SingleDatePicker } from "./datePicker/SingleDatePicker";
 export { default as DoubleInput } from "./doubleInput/DoubleInput";
 export { default as InputTag } from "./inputTag/InputTag";
 export { default as InputTagDropdownItem } from "./inputTag/InputTagDropdownItem";

package/dist/esm/index.js

@@ -2374,7 +2374,7 @@ var InputField = function InputField(_a) {
             children: prefix
           }))
         })), Boolean(start_icon) && jsxRuntime.exports.jsx("div", __assign({
-          className: "hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pl-2"
+          className: "hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pl-2 hplxt-text-4"
         }, {
           children: jsxRuntime.exports.jsx("span", {
             className: start_icon
@@ -2386,14 +2386,14 @@ var InputField = function InputField(_a) {
             background: "".concat(fieldColor === null || fieldColor === void 0 ? void 0 : fieldColor.split("-")[1], " "),
             width: "".concat(width)
           },
-          className: "hplxt-flex-1 hplxt-pl-[14px] ".concat(fieldColor, " placeholder:hplxt-text-Indigo-500 placeholder:hplxt-opacity-50   hplxt-pr-[12px] hplxt-py-1 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0"),
+          className: "hplxt-flex-1 ".concat(start_icon ? "hplxt-pl-[4px]" : "hplxt-pl-[14px]", "  ").concat(fieldColor, " hplxt-pr-[12px] hplxt-py-1 focus-visible:hplxt-outline-0 hplxt-border-0 focus:hplxt-border-0"),
           "data-testid": "text-input"
         }, inputProps, {
           onFocus: handleFocus,
           onBlur: handleBlur,
           onChange: handleInputChange
         })), Boolean(end_icon) && jsxRuntime.exports.jsx("div", __assign({
-          className: "hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pr-2"
+          className: "hplxt-text-Gray-500 hplxt-flex hplxt-items-center hplxt-pr-2 hplxt-text-4"
         }, {
           children: jsxRuntime.exports.jsx("span", {
             className: end_icon
@@ -3611,7 +3611,7 @@ var getHierarchyClassName = function getHierarchyClassName(hierarchy, disabled)
 
     case "Secondary":
       return disabled ? "hplxt-bg-Primary-25 hplxt-text-Primary-300" //Disabled Secondary Button
-      : "hplxt-bg-Primary-50 active:hplxt-bg-Primary-50 hover:hplxt-bg-Primary-100 focus:hplxt-outline-bg-Primary-200 focus:hplxt-ring hplxt-shadow-xs hplxt-text-Primary-700";
+      : "hplxt-bg-Primary-50 active:hplxt-bg-Primary-50 hover:hplxt-bg-Primary-100 focus:hplxt-outline-bg-Primary-200 focus:hplxt-ring hplxt-border hplxt-border-Primary-300 hplxt-shadow-xs hplxt-text-Primary-700";
 
     case "Secondary-Grey":
       return disabled ? "hplxt-bg-White hplxt-text-Gray-300 hplxt-border-solid hplxt-border hplxt-border-Gray-200" //Disabled Secondary-Grey Button
@@ -17517,6 +17517,44 @@ var DatePicker = function DatePicker(_a) {
   }));
 };
 
+var SingleDatePicker = function SingleDatePicker(_a) {
+  var date = _a.date,
+      handleDate = _a.handleDate,
+      minDate = _a.minDate,
+      maxDate = _a.maxDate,
+      _b = _a.weekdayDisplayFormat,
+      weekdayDisplayFormat = _b === void 0 ? "EEEEE" : _b;
+
+  var handleSelect = function handleSelect(selectedValue) {
+    handleDate(selectedValue);
+  };
+
+  return jsxRuntime.exports.jsx("div", __assign({
+    className: "single-date-picker"
+  }, {
+    children: jsxRuntime.exports.jsx("div", __assign({
+      className: "hplxt-flex hplxt-flex-col hplxt-box-border hplxt-w-[254px] hplxt-h-[322px] hplxt-z-30"
+    }, {
+      children: jsxRuntime.exports.jsx("div", __assign({
+        className: "hplxt-z-10 hplxt-flex hplxt-mt-1 hplxt-items-center hplxt-justify-center"
+      }, {
+        children: jsxRuntime.exports.jsx("div", __assign({
+          className: "hplxt-flex"
+        }, {
+          children: jsxRuntime.exports.jsx(dist.Calendar, {
+            date: dayjs(date).isValid() ? date : new Date(),
+            onChange: handleSelect,
+            minDate: minDate,
+            maxDate: maxDate,
+            weekdayDisplayFormat: weekdayDisplayFormat,
+            monthDisplayFormat: "MM"
+          })
+        }))
+      }))
+    }))
+  }));
+};
+
 var tryToString = tryToString$3;
 
 var $TypeError = TypeError;
@@ -20682,4 +20720,4 @@ var ImageCarousel = function ImageCarousel(_a) {
   );
 };
 
-export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, CalendarView, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, ImageCarousel, InputField, InputFieldSplit, InputTag, InputTagDropdownItem, MessageToast, NestedDropdown, OtpField, PopUpModal, ProgressBar, ProgressCircle, RadioBtn, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };
+export { AddSuggestion, Avatar, Badge, BadgeGroup, Button, ButtonGroups, CalendarView, Card, Checkbox, CheckboxGroup, CheckboxGroupItem, CollapsibleCard, DatePicker, DoubleInput, DropdownField, DropdownItems as DropdownItem, ImageCarousel, InputField, InputFieldSplit, InputTag, InputTagDropdownItem, MessageToast, NestedDropdown, OtpField, PopUpModal, ProgressBar, ProgressCircle, RadioBtn, SingleDatePicker, Slider, TextAreaField, ToggleSwitch, Tooltip, Typography };

package/dist/esm/types.d.ts

@@ -72,6 +72,14 @@ export interface CalenderViewProps {
     setAutoFocus1?: any;
     setAutoFocus2?: any;
 }
+type weekdayDisplayFormat = "EEE" | "EEEEEE" | "EEEEE";
+export interface SingleDatePickerProps {
+    date: Date;
+    weekdayDisplayFormat?: weekdayDisplayFormat;
+    minDate?: Date;
+    maxDate?: Date;
+    handleDate: (val: Date) => void;
+}
 export interface InputFieldSplitProps {
     label?: string;
     labelSize?: typographyTextType;

package/package.json

@@ -9,7 +9,7 @@
     "frontend",
     "healthplix"
   ],
-  "version": "1.1.9",
+  "version": "1.1.11",
   "main": "dist/esm/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/esm/index.d.ts",