react-better-html 1.1.146 → 1.1.147

package/dist/index.mjs

@@ -3823,7 +3823,7 @@ var Chip_default = Chip2;
 
 // src/components/InputField.tsx
 import { forwardRef as forwardRef11, memo as memo18, useCallback as useCallback9, useState as useState7, useEffect as useEffect8, useMemo as useMemo6, useRef as useRef5, useId } from "react";
-import styled9 from "styled-components";
+import styled10 from "styled-components";
 
 // src/constants/countries.ts
 var countries = [
@@ -5727,6 +5727,7 @@ var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
 import { useCallback as useCallback8, useMemo as useMemo5, useState as useState6, memo as memo17, useEffect as useEffect7 } from "react";
+import styled9 from "styled-components";
 import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var getMonthName = (month, short = false) => {
   return [
@@ -5756,6 +5757,16 @@ var getWeekDayName = (day, short = false) => {
   ][day];
 };
 var weekDaysIndex = [1, 2, 3, 4, 5, 6, 0];
+var yearsRange = Array.from({ length: 100 + 1 + 50 }, (_, index) => index + (/* @__PURE__ */ new Date()).getFullYear() - 100);
+var SelectComponent = styled9.select.withConfig({
+  shouldForwardProp: (prop) => !["normalStyle", "hoverStyle"].includes(prop)
+})`
+   position: absolute;
+   top: 50%;
+   right: 0;
+   transform: translateY(-50%);
+   opacity: 0;
+`;
 function Calendar({ value, minDate, maxDate, onChange }) {
   const theme2 = useTheme();
   const [currentDate, setCurrentDate] = useState6(value ? new Date(value) : void 0);
@@ -5796,6 +5807,9 @@ function Calendar({ value, minDate, maxDate, onChange }) {
       `${today.getFullYear()}-${(today.getMonth() + 1).toString().padStart(2, "0")}-${today.getDate().toString().padStart(2, "0")}`
     );
   }, [onChange]);
+  const onChangeYearSelect = useCallback8((event) => {
+    setCurrentYear(parseInt(event.target.value));
+  }, []);
   const firstDayOfMonth = useMemo5(() => {
     const day = new Date(currentYear, currentMonth, 1).getDay();
     return day === 0 ? 6 : day - 1;
@@ -5820,10 +5834,13 @@ function Calendar({ value, minDate, maxDate, onChange }) {
   return /* @__PURE__ */ jsxs11(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
     /* @__PURE__ */ jsxs11(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
-      /* @__PURE__ */ jsxs11(Text_default, { fontWeight: 700, children: [
-        getMonthName(currentMonth),
-        " ",
-        currentYear
+      /* @__PURE__ */ jsxs11(Div_default.row, { alignItems: "center", gap: 4, children: [
+        /* @__PURE__ */ jsx16(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
+        /* @__PURE__ */ jsxs11(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
+          /* @__PURE__ */ jsx16(Text_default, { fontWeight: 700, children: currentYear }),
+          /* @__PURE__ */ jsx16(Icon_default, { name: "chevronDown", size: 12 }),
+          /* @__PURE__ */ jsx16(SelectComponent, { theme: theme2, value: currentYear, onChange: onChangeYearSelect, children: yearsRange.map((year) => /* @__PURE__ */ jsx16("option", { value: year, children: year }, year)) })
+        ] })
       ] }),
       /* @__PURE__ */ jsx16(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
@@ -5910,7 +5927,7 @@ var buttonWidth = 50;
 var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
 var colorPickerValueWidth = 12 + 74 + colorPickerSpacing;
-var InputElement = styled9.input.withConfig({
+var InputElement = styled10.input.withConfig({
   shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop)
 })`
    position: relative;
@@ -5954,6 +5971,7 @@ var InputElement = styled9.input.withConfig({
    &[type="date"],
    &[type="datetime-local"],
    &[type="time"] {
+      min-height: 48px;
       -webkit-appearance: none;
       -moz-appearance: textfield;
 
@@ -6017,7 +6035,7 @@ var InputElement = styled9.input.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var TextareaElement = styled9.textarea.withConfig({
+var TextareaElement = styled10.textarea.withConfig({
   shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop)
 })`
    width: 100%;
@@ -6783,12 +6801,12 @@ var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
 import { forwardRef as forwardRef12, useCallback as useCallback10, useId as useId2, useState as useState8 } from "react";
-import styled10 from "styled-components";
+import styled11 from "styled-components";
 import { jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
-var InputElement2 = styled10.input.withConfig({
+var InputElement2 = styled11.input.withConfig({
   shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle"].includes(prop)
 })`
    position: relative;
@@ -6824,7 +6842,7 @@ var InputElement2 = styled10.input.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var SwitchElement = styled10.div.withConfig({
+var SwitchElement = styled11.div.withConfig({
   shouldForwardProp: (prop) => !["theme", "checked", "disabled", "isMouseDown", "normalStyle", "hoverStyle"].includes(prop)
 })`
    --width: ${(props) => componentSize * 2 - props.theme.styles.gap / 2}px;
@@ -7026,7 +7044,9 @@ var ToggleInput_default = {
         {
           alignItems: "center",
           gap: theme2.styles.gap,
+          borderRadius: 999,
           isTabAccessed: true,
+          onClick: onClickElement,
           onMouseDown: setIsMouseDown.setTrue,
           onMouseUp: setIsMouseDown.setFalse,
           onMouseOut: setIsMouseDown.setFalse,
@@ -7040,7 +7060,6 @@ var ToggleInput_default = {
               checked,
               disabled: disabled ?? false,
               isMouseDown,
-              onClick: onClickElement,
               id: readyId,
               role: "switch",
               "aria-checked": checked,
@@ -7324,11 +7343,11 @@ import {
   useEffect as useEffect10,
   Fragment as Fragment5
 } from "react";
-import styled11, { css as css2 } from "styled-components";
+import styled12, { css as css2 } from "styled-components";
 import { Fragment as Fragment6, jsx as jsx22, jsxs as jsxs17 } from "react/jsx-runtime";
 var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
-var TableStyledComponent = styled11.table.withConfig({
+var TableStyledComponent = styled12.table.withConfig({
   shouldForwardProp: (prop) => ![
     "isStriped",
     "withHover",
@@ -7443,7 +7462,7 @@ var TableStyledComponent = styled11.table.withConfig({
       }
    }
 `;
-var ThStyledComponent = styled11.th.withConfig({
+var ThStyledComponent = styled12.th.withConfig({
   shouldForwardProp: (prop) => !["width", "minWidth", "maxWidth", "textAlign"].includes(prop)
 })`
    ${(props) => props.width ? `width: ${props.width}px;` : ""}
@@ -7451,7 +7470,7 @@ var ThStyledComponent = styled11.th.withConfig({
    ${(props) => props.maxWidth ? `max-width: ${props.maxWidth}px;` : ""}
    ${(props) => props.textAlign ? `text-align: ${props.textAlign} !important;` : ""}
 `;
-var TdStyledComponent = styled11.td.withConfig({
+var TdStyledComponent = styled12.td.withConfig({
   shouldForwardProp: (prop) => !["width", "textAlign"].includes(prop)
 })`
    ${(props) => props.textAlign ? `text-align: ${props.textAlign} !important;` : ""}
@@ -8161,7 +8180,7 @@ var Table_default = Table2;
 
 // src/components/Tooltip.tsx
 import { memo as memo23, useCallback as useCallback12, useRef as useRef7, useState as useState10, useEffect as useEffect11, forwardRef as forwardRef16, useImperativeHandle as useImperativeHandle3, useMemo as useMemo9 } from "react";
-import styled12, { css as css3 } from "styled-components";
+import styled13, { css as css3 } from "styled-components";
 import { jsx as jsx23, jsxs as jsxs18 } from "react/jsx-runtime";
 var tooltipContainerStyle = (props) => ({
   top: css3`
@@ -8215,7 +8234,7 @@ var tooltipPositionStyle = (props) => ({
       `
   }
 });
-var TooltipContainer = styled12.div.withConfig({
+var TooltipContainer = styled13.div.withConfig({
   shouldForwardProp: (prop) => !["theme", "position", "align", "withArrow", "arrowSize", "isOpen", "gap"].includes(prop)
 })`
    position: absolute;