react-better-html 1.1.146 → 1.1.148

package/dist/index.d.mts

@@ -371,7 +371,7 @@ type ChipProps = {
 type ChipComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, ChipProps>): React.ReactElement;
     colored: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps, "color" | "backgroundColor"> & {
-        color?: Color;
+        color?: string;
     }>) => React.ReactElement;
 };
 declare const ChipComponent: ChipComponentType;
@@ -490,6 +490,7 @@ type InternalToggleInputProps<Value> = {
     label?: string;
     labelColor?: string;
     text?: string;
+    textAdvanced?: React.ReactNode;
     errorText?: string;
     infoText?: string;
     value?: Value;

package/dist/index.d.ts

@@ -371,7 +371,7 @@ type ChipProps = {
 type ChipComponentType = {
     (props: ComponentPropWithRef<HTMLDivElement, ChipProps>): React.ReactElement;
     colored: (props: ComponentPropWithRef<HTMLDivElement, OmitProps<ChipProps, "color" | "backgroundColor"> & {
-        color?: Color;
+        color?: string;
     }>) => React.ReactElement;
 };
 declare const ChipComponent: ChipComponentType;
@@ -490,6 +490,7 @@ type InternalToggleInputProps<Value> = {
     label?: string;
     labelColor?: string;
     text?: string;
+    textAdvanced?: React.ReactNode;
     errorText?: string;
     infoText?: string;
     value?: Value;

package/dist/index.js

@@ -3909,7 +3909,7 @@ var Chip_default = Chip2;
 
 // src/components/InputField.tsx
 var import_react20 = require("react");
-var import_styled_components10 = __toESM(require("styled-components"));
+var import_styled_components11 = __toESM(require("styled-components"));
 
 // src/constants/countries.ts
 var countries = [
@@ -5813,6 +5813,7 @@ var Dropdown_default = Dropdown2;
 
 // src/components/Calendar.tsx
 var import_react19 = require("react");
+var import_styled_components10 = __toESM(require("styled-components"));
 var import_jsx_runtime17 = require("react/jsx-runtime");
 var getMonthName = (month, short = false) => {
   return [
@@ -5842,6 +5843,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 = import_styled_components10.default.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] = (0, import_react19.useState)(value ? new Date(value) : void 0);
@@ -5882,6 +5893,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 = (0, import_react19.useCallback)((event) => {
+    setCurrentYear(parseInt(event.target.value));
+  }, []);
   const firstDayOfMonth = (0, import_react19.useMemo)(() => {
     const day = new Date(currentYear, currentMonth, 1).getDay();
     return day === 0 ? 6 : day - 1;
@@ -5906,10 +5920,13 @@ function Calendar({ value, minDate, maxDate, onChange }) {
   return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.column, { width: "100%", maxWidth: 320, gap: theme2.styles.gap, padding: theme2.styles.space / 2, userSelect: "none", children: [
     /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { width: "100%", justifyContent: "space-between", alignItems: "center", children: [
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronLeft", onClick: onClickPreviousMonthButton }),
-      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Text_default, { fontWeight: 700, children: [
-        getMonthName(currentMonth),
-        " ",
-        currentYear
+      /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { alignItems: "center", gap: 4, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontWeight: 700, children: getMonthName(currentMonth) }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(Div_default.row, { position: "relative", alignItems: "center", gap: 2, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Text_default, { fontWeight: 700, children: currentYear }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon_default, { name: "chevronDown", size: 12 }),
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(SelectComponent, { theme: theme2, value: currentYear, onChange: onChangeYearSelect, children: yearsRange.map((year) => /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("option", { value: year, children: year }, year)) })
+        ] })
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Button_default.icon, { icon: "chevronRight", onClick: onClickNextMonthButton })
     ] }),
@@ -5996,7 +6013,7 @@ var buttonWidth = 50;
 var colorPickerSpacing = 4;
 var colorPickerColorWidth = 12 + 27 + colorPickerSpacing;
 var colorPickerValueWidth = 12 + 74 + colorPickerSpacing;
-var InputElement = import_styled_components10.default.input.withConfig({
+var InputElement = import_styled_components11.default.input.withConfig({
   shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop)
 })`
    position: relative;
@@ -6040,6 +6057,7 @@ var InputElement = import_styled_components10.default.input.withConfig({
    &[type="date"],
    &[type="datetime-local"],
    &[type="time"] {
+      min-height: 48px;
       -webkit-appearance: none;
       -moz-appearance: textfield;
 
@@ -6103,7 +6121,7 @@ var InputElement = import_styled_components10.default.input.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var TextareaElement = import_styled_components10.default.textarea.withConfig({
+var TextareaElement = import_styled_components11.default.textarea.withConfig({
   shouldForwardProp: (prop) => !["theme", "withLeftIcon", "withRightIcon", "normalStyle", "hoverStyle"].includes(prop)
 })`
    width: 100%;
@@ -6869,12 +6887,12 @@ var InputField_default = InputField2;
 
 // src/components/ToggleInput.tsx
 var import_react21 = require("react");
-var import_styled_components11 = __toESM(require("styled-components"));
+var import_styled_components12 = __toESM(require("styled-components"));
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var componentSize = 26;
 var switchComponentBallGap = 3;
 var switchComponentMouseDownDifference = 4;
-var InputElement2 = import_styled_components11.default.input.withConfig({
+var InputElement2 = import_styled_components12.default.input.withConfig({
   shouldForwardProp: (prop) => !["theme", "normalStyle", "hoverStyle"].includes(prop)
 })`
    position: relative;
@@ -6910,7 +6928,7 @@ var InputElement2 = import_styled_components11.default.input.withConfig({
       ${(props) => props.hoverStyle}
    }
 `;
-var SwitchElement = import_styled_components11.default.div.withConfig({
+var SwitchElement = import_styled_components12.default.div.withConfig({
   shouldForwardProp: (prop) => !["theme", "checked", "disabled", "isMouseDown", "normalStyle", "hoverStyle"].includes(prop)
 })`
    --width: ${(props) => componentSize * 2 - props.theme.styles.gap / 2}px;
@@ -6967,6 +6985,7 @@ var ToggleInputComponent = (0, import_react21.forwardRef)(function ToggleInput({
   label,
   labelColor,
   text,
+  textAdvanced,
   errorText,
   infoText,
   value,
@@ -7048,13 +7067,19 @@ var ToggleInputComponent = (0, import_react21.forwardRef)(function ToggleInput({
           }
         ) : void 0
       ] }),
-      text && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
+      text ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { color, userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
         text,
         required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, children: [
           " ",
           "*"
         ] })
-      ] })
+      ] }) : textAdvanced ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Div_default.row, { userSelect: "none", cursor: "pointer", onClick: onClickText, children: [
+        textAdvanced,
+        required && !label && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(Text_default, { as: "span", fontSize: 16, color: theme2.colors.error, marginLeft: 4, children: [
+          " ",
+          "*"
+        ] })
+      ] }) : void 0
     ] }),
     (errorText || infoText) && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       Text_default,
@@ -7112,7 +7137,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,
@@ -7126,7 +7153,6 @@ var ToggleInput_default = {
               checked,
               disabled: disabled ?? false,
               isMouseDown,
-              onClick: onClickElement,
               id: readyId,
               role: "switch",
               "aria-checked": checked,
@@ -7400,11 +7426,11 @@ var ColorThemeSwitch_default = ColorThemeSwitch2;
 
 // src/components/Table.tsx
 var import_react25 = require("react");
-var import_styled_components12 = __toESM(require("styled-components"));
+var import_styled_components13 = __toESM(require("styled-components"));
 var import_jsx_runtime23 = require("react/jsx-runtime");
 var defaultImageWidth = 160;
 var maximumVisiblePages = 11;
-var TableStyledComponent = import_styled_components12.default.table.withConfig({
+var TableStyledComponent = import_styled_components13.default.table.withConfig({
   shouldForwardProp: (prop) => ![
     "isStriped",
     "withHover",
@@ -7484,13 +7510,13 @@ var TableStyledComponent = import_styled_components12.default.table.withConfig({
          }
       }
 
-      ${(props) => props.isStriped ? import_styled_components12.css`
+      ${(props) => props.isStriped ? import_styled_components13.css`
                  &:nth-child(even) {
                     background-color: ${props.theme.colors.backgroundSecondary};
                  }
               ` : ""}
 
-      ${(props) => props.withHover ? import_styled_components12.css`
+      ${(props) => props.withHover ? import_styled_components13.css`
                  transition: ${props.theme.styles.transition};
 
                  &:not(.isHeader):not(.isFooter):not(.withoutHover):hover {
@@ -7519,7 +7545,7 @@ var TableStyledComponent = import_styled_components12.default.table.withConfig({
       }
    }
 `;
-var ThStyledComponent = import_styled_components12.default.th.withConfig({
+var ThStyledComponent = import_styled_components13.default.th.withConfig({
   shouldForwardProp: (prop) => !["width", "minWidth", "maxWidth", "textAlign"].includes(prop)
 })`
    ${(props) => props.width ? `width: ${props.width}px;` : ""}
@@ -7527,7 +7553,7 @@ var ThStyledComponent = import_styled_components12.default.th.withConfig({
    ${(props) => props.maxWidth ? `max-width: ${props.maxWidth}px;` : ""}
    ${(props) => props.textAlign ? `text-align: ${props.textAlign} !important;` : ""}
 `;
-var TdStyledComponent = import_styled_components12.default.td.withConfig({
+var TdStyledComponent = import_styled_components13.default.td.withConfig({
   shouldForwardProp: (prop) => !["width", "textAlign"].includes(prop)
 })`
    ${(props) => props.textAlign ? `text-align: ${props.textAlign} !important;` : ""}
@@ -8237,61 +8263,61 @@ var Table_default = Table2;
 
 // src/components/Tooltip.tsx
 var import_react26 = require("react");
-var import_styled_components13 = __toESM(require("styled-components"));
+var import_styled_components14 = __toESM(require("styled-components"));
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var tooltipContainerStyle = (props) => ({
-  top: import_styled_components13.css`
+  top: import_styled_components14.css`
       bottom: calc(100% + ${props.gap}px + ${props.arrowSize}px);
       ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"}
    `,
-  bottom: import_styled_components13.css`
+  bottom: import_styled_components14.css`
       top: calc(100% + ${props.gap}px + ${props.arrowSize}px);
       ${props.align === "center" ? "left: 50%;" : props.align === "left" ? "left: 0;" : "right: 0;"};
    `,
-  left: import_styled_components13.css`
+  left: import_styled_components14.css`
       ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
       right: calc(100% + ${props.gap}px + ${props.arrowSize}px);
    `,
-  right: import_styled_components13.css`
+  right: import_styled_components14.css`
       ${props.align === "center" ? "top: 50%;" : props.align === "top" ? "top: 0;" : "bottom: 0;"};
       left: calc(100% + ${props.gap}px + ${props.arrowSize}px);
    `
 });
 var tooltipPositionStyle = (props) => ({
   top: {
-    opened: import_styled_components13.css`
+    opened: import_styled_components14.css`
          transform: translateX(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: import_styled_components13.css`
+    closed: import_styled_components14.css`
          transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(${props.theme.styles.gap}px);
       `
   },
   bottom: {
-    opened: import_styled_components13.css`
+    opened: import_styled_components14.css`
          transform: translateX(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: import_styled_components13.css`
+    closed: import_styled_components14.css`
          transform: translateX(${props.align === "center" ? "-50%" : "0"}) translateY(-${props.theme.styles.gap}px);
       `
   },
   left: {
-    opened: import_styled_components13.css`
+    opened: import_styled_components14.css`
          transform: translateY(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: import_styled_components13.css`
+    closed: import_styled_components14.css`
          transform: translateX(${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
       `
   },
   right: {
-    opened: import_styled_components13.css`
+    opened: import_styled_components14.css`
          transform: translateY(${props.align === "center" ? "-50%" : "0"});
       `,
-    closed: import_styled_components13.css`
+    closed: import_styled_components14.css`
          transform: translateX(-${props.theme.styles.gap}px) translateY(${props.align === "center" ? "-50%" : "0"});
       `
   }
 });
-var TooltipContainer = import_styled_components13.default.div.withConfig({
+var TooltipContainer = import_styled_components14.default.div.withConfig({
   shouldForwardProp: (prop) => !["theme", "position", "align", "withArrow", "arrowSize", "isOpen", "gap"].includes(prop)
 })`
    position: absolute;