@clickpalm/react 1.3.1 → 1.3.3

package/dist/index.d.ts

@@ -2313,6 +2313,7 @@ interface DatePickerInputProps {
     value?: string;
     onChange: (date: string) => void;
     errorMessage?: string;
+    endDate?: Date;
 }
 declare const Datepicker: react.ForwardRefExoticComponent<DatePickerInputProps & react.RefAttributes<HTMLInputElement>>;
 
@@ -3072,7 +3073,7 @@ interface TooltipProps {
     delayDuration?: number;
 }
 declare const Tooltip: {
-    ({ content, children, side, sideOffset, open, onOpenChange, delayDuration }: TooltipProps): react_jsx_runtime.JSX.Element;
+    ({ content, children, side, sideOffset, open: controlledOpen, onOpenChange, delayDuration }: TooltipProps): react_jsx_runtime.JSX.Element;
     displayName: string;
 };
 

package/dist/index.js

@@ -1218,8 +1218,7 @@ var TextInputContainer = styled("div", {
   marginBottom: "$6",
   FontSize: "$md",
   "&:has(input:focus), &:hover": {
-    border: "2px solid $clickpalm_light",
-    padding: "calc($4 - 0.9px) calc($4 - 0.9px)"
+    border: "1px solid $clickpalm_light"
   },
   "&:has(input:disabled)": {
     opacity: 0.5,
@@ -1240,8 +1239,7 @@ var TextInputContainer = styled("div", {
         border: "1px solid $danger_dark",
         marginBottom: "0px",
         "&:has(input:focus), &:hover": {
-          border: "2px solid $danger_dark",
-          padding: "calc($4 - 0.9px) calc($4 - 0.9px)"
+          border: "1px solid $danger_dark"
         }
       }
     },
@@ -1326,9 +1324,22 @@ var CharCounter = styled(Span2, {
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var Input2 = (0, import_react5.forwardRef)(
   ({ prefix, suffix, label, maxLength, showCounter = false, errorMessage, noMargin = false, ...props }, forwardedRef) => {
-    const [charCount, setCharCount] = (0, import_react5.useState)(0);
+    const getDisplayValue = (value) => {
+      const stringValue = String(value || "");
+      if (prefix && stringValue.startsWith(prefix)) {
+        return stringValue.substring(prefix.length);
+      }
+      return stringValue;
+    };
+    const [displayValue, setDisplayValue] = (0, import_react5.useState)(getDisplayValue(props.value));
+    const [charCount, setCharCount] = (0, import_react5.useState)((prefix?.length || 0) + getDisplayValue(props.value).length);
     const localInputRef = (0, import_react5.useRef)(null);
     const inputRef = forwardedRef || localInputRef;
+    (0, import_react5.useEffect)(() => {
+      const newDisplayValue = getDisplayValue(props.value);
+      setDisplayValue(newDisplayValue);
+      setCharCount((prefix?.length || 0) + newDisplayValue.length);
+    }, [props.value, prefix]);
     const handleContainerClick = () => {
       inputRef?.current?.focus();
     };
@@ -1355,12 +1366,23 @@ var Input2 = (0, import_react5.forwardRef)(
               {
                 ref: inputRef,
                 ...props,
-                maxLength,
+                value: displayValue,
+                maxLength: maxLength ? maxLength - (prefix?.length || 0) : void 0,
                 onChange: (e) => {
+                  const currentDisplayValue = e.target.value;
+                  setDisplayValue(currentDisplayValue);
+                  setCharCount((prefix?.length || 0) + currentDisplayValue.length);
                   if (props.onChange) {
-                    props.onChange(e);
+                    const valueWithPrefix = prefix ? prefix + currentDisplayValue : currentDisplayValue;
+                    const newEvent = {
+                      ...e,
+                      target: {
+                        ...e.target,
+                        value: valueWithPrefix
+                      }
+                    };
+                    props.onChange(newEvent);
                   }
-                  setCharCount(e.target.value.length);
                 }
               }
             ),
@@ -1430,7 +1452,8 @@ var SelectOptionsList = styled("ul", {
   fontFamily: theme.fonts.default,
   fontWeight: theme.fontWeights.regular,
   textAlign: "left",
-  width: "100%",
+  width: "120px",
+  overflowX: "hidden",
   "&::-webkit-scrollbar": {
     width: "8px"
   },
@@ -1455,6 +1478,14 @@ var SelectOptionItem = styled("li", {
     backgroundColor: theme.colors.gray_background,
     color: theme.colors.clickpalm_mid
   },
+  '&[aria-disabled="true"]': {
+    color: theme.colors.gray_mid,
+    cursor: "not-allowed",
+    "&:hover": {
+      backgroundColor: "transparent",
+      color: theme.colors.gray_mid
+    }
+  },
   variants: {
     selected: {
       true: {
@@ -1539,7 +1570,8 @@ var CustomSelect = ({
       SelectOptionItem,
       {
         selected: option.value === value,
-        onClick: () => handleOptionClick(option.value),
+        onClick: () => !option.disabled && handleOptionClick(option.value),
+        "aria-disabled": option.disabled,
         children: option.label
       },
       option.value
@@ -1563,9 +1595,14 @@ function DatePickerSelectAdapter(props) {
     const label = typeof option.label === "string" ? option.label.charAt(0).toUpperCase() + option.label.slice(1) : option.label;
     return {
       label,
-      value: option.value?.toString() ?? ""
+      value: option.value?.toString() ?? "",
+      disabled: option.disabled
     };
   }) || [];
+  const isYearDropdown = options && options.length > 0 && typeof options[0].value === "number" && options[0].value > 31;
+  if (isYearDropdown) {
+    selectOptions.reverse();
+  }
   return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
     CustomSelect,
     {
@@ -1671,7 +1708,8 @@ var datePickerStyles = globalCss({
 // src/components/Datepicker/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 datePickerStyles();
-var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onChange, errorMessage }, ref) => {
+var oneYearMore = new Date((/* @__PURE__ */ new Date()).getFullYear() + 1, 11);
+var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onChange, errorMessage, endDate = oneYearMore }, ref) => {
   const [selected, setSelected] = (0, import_react7.useState)(void 0);
   const [month, setMonth] = (0, import_react7.useState)(/* @__PURE__ */ new Date());
   const [open, setOpen] = (0, import_react7.useState)(false);
@@ -1739,7 +1777,7 @@ var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onC
             showOutsideDays: true,
             captionLayout: "dropdown",
             startMonth: new Date(1915, 0),
-            endMonth: /* @__PURE__ */ new Date(),
+            endMonth: endDate,
             components: {
               PreviousMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "TriangleLeft", size: 16 }) }),
               NextMonthButton: (props) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "TriangleRight", size: 16 }) }),
@@ -2119,7 +2157,7 @@ var StyledRoot3 = styled(Switch.Root, {
   },
   '&[data-state="unchecked"]': {
     backgroundColor: "$white",
-    border: "2px solid $gray_dark"
+    border: "1px solid $gray_dark"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -2131,13 +2169,13 @@ var StyledRoot3 = styled(Switch.Root, {
   variants: {
     hasError: {
       true: {
-        border: "2px solid $danger_dark",
+        border: "1px solid $danger_dark",
         marginBottom: "0px",
         "&:focus": {
           outline: "1px solid $danger_dark"
         },
         '&[data-state="unchecked"]': {
-          border: "2px solid $danger_dark"
+          border: "1px solid $danger_dark"
         }
       }
     }
@@ -2435,7 +2473,7 @@ var TextAreaElement = styled("textarea", {
   width: "100%",
   "&:focus": {
     outline: 0,
-    border: "2px solid $clickpalm_light"
+    border: "1px solid $clickpalm_light"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -2460,10 +2498,10 @@ var TextAreaElement = styled("textarea", {
   variants: {
     hasError: {
       true: {
-        border: "1px solid $danger_dark",
+        border: "1px solid $danger",
         marginBottom: "0px",
         "&:focus": {
-          border: "2px solid $danger_dark"
+          border: "1px solid $danger_dark"
         }
       }
     },
@@ -2598,18 +2636,32 @@ var TooltipArrow = styled(RadixTooltip.Arrow, {
 });
 
 // src/components/Tooltip/index.tsx
+var import_react14 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
 var Tooltip = ({
   content,
   children,
   side = "top",
   sideOffset = 5,
-  open,
+  open: controlledOpen,
   onOpenChange,
   delayDuration = 100
 }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixTooltip2.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(RadixTooltip2.Root, { open, onOpenChange, delayDuration, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, children }),
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react14.useState)(false);
+  const [isTouchDevice, setIsTouchDevice] = (0, import_react14.useState)(false);
+  (0, import_react14.useEffect)(() => {
+    setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
+  }, []);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = onOpenChange ?? setUncontrolledOpen;
+  const handleClick = (event) => {
+    if (isTouchDevice) {
+      event.preventDefault();
+      setOpen(!open);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixTooltip2.Provider, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(RadixTooltip2.Root, { open, onOpenChange: setOpen, delayDuration, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipTrigger, { asChild: true, onClick: handleClick, children }),
     /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(TooltipContent, { side, sideOffset, children: [
       content,
       /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipArrow, {})
@@ -2703,7 +2755,7 @@ var Loader = ({ show, fullscreen = false }) => {
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-var import_react14 = require("react");
+var import_react15 = require("react");
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2768,10 +2820,10 @@ var applyMask = (value, maskType) => {
 
 // src/components/MaskedInput/index.tsx
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var MaskedInput = (0, import_react14.forwardRef)(
+var MaskedInput = (0, import_react15.forwardRef)(
   ({ maskType, onChange, ...props }, ref) => {
-    const [value, setValue] = (0, import_react14.useState)("");
-    const inputRef = (0, import_react14.useRef)(null);
+    const [value, setValue] = (0, import_react15.useState)("");
+    const inputRef = (0, import_react15.useRef)(null);
     const handleChange = (e) => {
       const { value: inputValue, selectionStart } = e.target;
       const isBackspace = value.length > inputValue.length;
@@ -2819,7 +2871,7 @@ var MaskedInput = (0, import_react14.forwardRef)(
 MaskedInput.displayName = "MaskedInput";
 
 // src/components/Dropdown/index.tsx
-var import_react15 = __toESM(require("react"));
+var import_react16 = __toESM(require("react"));
 var DropdownMenu2 = __toESM(require("@radix-ui/react-dropdown-menu"));
 
 // src/components/Dropdown/styles.ts
@@ -2907,17 +2959,17 @@ var IconButton = styled("button", {
 // src/components/Dropdown/index.tsx
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var Dropdown = ({ children }) => {
-  const childrenArray = import_react15.Children.toArray(children);
+  const childrenArray = import_react16.Children.toArray(children);
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DropdownMenu2.Root, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "Dots", size: 16 }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react15.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownMenu2.Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react16.Fragment, { children: [
       child,
       index < childrenArray.length - 1 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownSeparator, {})
     ] }, index)) }) })
   ] });
 };
 var DropdownSeparator = StyledSeparator;
-var DropdownItem = import_react15.default.forwardRef(({ children, ...props }, forwardedRef) => {
+var DropdownItem = import_react16.default.forwardRef(({ children, ...props }, forwardedRef) => {
   return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(StyledItem2, { ...props, ref: forwardedRef, children });
 });
 Dropdown.displayName = "Dropdown";
@@ -2999,7 +3051,7 @@ var Paragraph = (props) => {
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
-var import_react16 = require("react");
+var import_react17 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
@@ -3022,7 +3074,7 @@ var StyledHeading = styled("h2", {
     size: "md"
   }
 });
-var Heading = (0, import_react16.forwardRef)(function Heading2({ children, ...props }, ref) {
+var Heading = (0, import_react17.forwardRef)(function Heading2({ children, ...props }, ref) {
   return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(StyledHeading, { ref, ...props, children });
 });
 Heading.displayName = "Heading";
@@ -3030,7 +3082,7 @@ Heading.displayName = "Heading";
 // src/components/Select/index.tsx
 var import_react_icons2 = require("@radix-ui/react-icons");
 var CustomSelect2 = __toESM(require("@radix-ui/react-select"));
-var import_react17 = require("react");
+var import_react18 = require("react");
 
 // src/components/Select/styles.ts
 var Select = __toESM(require("@radix-ui/react-select"));
@@ -3066,8 +3118,7 @@ var StyledTrigger = styled(Select.Trigger, {
   },
   "&[data-highlighted], &:focus, &:hover": {
     outline: "none",
-    border: "2px solid $clickpalm_light",
-    padding: "calc(0.92rem - 0.9px) calc($4 - 0.9px)"
+    border: "1px solid $clickpalm_light"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -3080,8 +3131,7 @@ var StyledTrigger = styled(Select.Trigger, {
         marginBottom: "0px",
         "&[data-highlighted], &:focus, &:hover": {
           outline: "none",
-          border: "2px solid $danger_dark",
-          padding: "calc(0.92rem - 0.9px) calc($4 - 0.9px)"
+          border: "1px solid $danger_dark"
         }
       }
     }
@@ -3165,7 +3215,7 @@ var Span6 = styled("span", {
 
 // src/components/Select/index.tsx
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var Select2 = (0, import_react17.forwardRef)(
+var Select2 = (0, import_react18.forwardRef)(
   ({
     value,
     onValueChange,
@@ -3178,7 +3228,7 @@ var Select2 = (0, import_react17.forwardRef)(
     style,
     ...rest
   }, ref) => {
-    const [open, setOpen] = (0, import_react17.useState)(false);
+    const [open, setOpen] = (0, import_react18.useState)(false);
     return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(StyledWrapper4, { css: css2, className, style, children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(Label3, { children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
@@ -3208,7 +3258,7 @@ var Select2 = (0, import_react17.forwardRef)(
 Select2.displayName = "Select";
 
 // src/components/LabelledValue/index.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 
 // src/components/LabelledValue/styles.ts
 var Container = styled("div", {
@@ -3271,9 +3321,9 @@ var Value2 = styled("div", {
 // src/components/LabelledValue/index.tsx
 var import_jsx_runtime39 = require("react/jsx-runtime");
 function LabelledValue({ position = "vertical", withRow = false, children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Container, { position, children: import_react18.Children.map(children, (child) => {
-    if ((0, import_react18.isValidElement)(child)) {
-      return (0, import_react18.cloneElement)(child, { position, withRow });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Container, { position, children: import_react19.Children.map(children, (child) => {
+    if ((0, import_react19.isValidElement)(child)) {
+      return (0, import_react19.cloneElement)(child, { position, withRow });
     }
     return child;
   }) });
@@ -3869,7 +3919,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-var import_react19 = require("react");
+var import_react20 = require("react");
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -3980,10 +4030,10 @@ var CarouselItemContainer = styled("div", {
 var import_jsx_runtime43 = require("react/jsx-runtime");
 var SWIPE_THRESHOLD = 50;
 var Carousel = ({ title, variant, children }) => {
-  const items = import_react19.Children.toArray(children);
-  const [activeIndex, setActiveIndex] = (0, import_react19.useState)(0);
-  const [touchStartX, setTouchStartX] = (0, import_react19.useState)(null);
-  const [touchEndX, setTouchEndX] = (0, import_react19.useState)(null);
+  const items = import_react20.Children.toArray(children);
+  const [activeIndex, setActiveIndex] = (0, import_react20.useState)(0);
+  const [touchStartX, setTouchStartX] = (0, import_react20.useState)(null);
+  const [touchEndX, setTouchEndX] = (0, import_react20.useState)(null);
   const prev = () => {
     setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
   };
@@ -4056,7 +4106,7 @@ var Carousel = ({ title, variant, children }) => {
               onTouchMove,
               onTouchEnd,
               children: items.map(
-                (child, index) => (0, import_react19.cloneElement)(child, {
+                (child, index) => (0, import_react20.cloneElement)(child, {
                   "aria-hidden": index !== activeIndex,
                   style: {
                     display: index === activeIndex ? "block" : "none"
@@ -4087,7 +4137,7 @@ var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ (0, import
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-var import_react20 = require("react");
+var import_react21 = require("react");
 var import_jsx_runtime44 = require("react/jsx-runtime");
 var ToggleButton = styled("button", {
   all: "unset",
@@ -4103,11 +4153,11 @@ var ToggleButton = styled("button", {
     borderRadius: "$sm"
   }
 });
-var PasswordInput = (0, import_react20.forwardRef)(
+var PasswordInput = (0, import_react21.forwardRef)(
   ({ value, onChange, ...props }, ref) => {
-    const [visible, setVisible] = (0, import_react20.useState)(false);
-    const innerRef = (0, import_react20.useRef)(null);
-    (0, import_react20.useImperativeHandle)(ref, () => innerRef.current);
+    const [visible, setVisible] = (0, import_react21.useState)(false);
+    const innerRef = (0, import_react21.useRef)(null);
+    (0, import_react21.useImperativeHandle)(ref, () => innerRef.current);
     const handleToggleVisibility = () => {
       setVisible((v) => !v);
       setTimeout(() => {
@@ -4143,7 +4193,7 @@ PasswordInput.displayName = "PasswordInput";
 
 // src/components/Accordion/index.tsx
 var RadixAccordion = __toESM(require("@radix-ui/react-accordion"));
-var import_react21 = __toESM(require("react"));
+var import_react22 = __toESM(require("react"));
 
 // src/components/Accordion/styles.ts
 var Accordion = __toESM(require("@radix-ui/react-accordion"));
@@ -4171,19 +4221,24 @@ var AccordionHeader = styled(Accordion.Header, {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "0 $5"
+  padding: "0 $5",
+  gap: "$2"
 });
 var AccordionTrigger = styled(Accordion.Trigger, {
   all: "unset",
-  fontFamily: "$default",
   backgroundColor: "transparent",
   display: "flex",
   alignItems: "center",
+  fontFamily: "$default",
+  fontWeight: "$bold",
   fontSize: "$md",
   lineHeight: "$regular",
+  textAlign: "left",
   color: "$black",
-  fontWeight: "$bold",
   width: "100%",
+  flexWrap: "wrap",
+  wordBreak: "break-word",
+  whiteSpace: "normal",
   "&:hover": {
     cursor: "pointer"
   },
@@ -4225,7 +4280,7 @@ var OptionsButton = styled(Button, {
 
 // src/components/Accordion/index.tsx
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var Accordion2 = import_react21.default.forwardRef(
+var Accordion2 = import_react22.default.forwardRef(
   ({ title, children, dropdownItems }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(AccordionContainer, { type: "single", collapsible: true, ref, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AccordionItem, { value: "item-1", children: [
       /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(AccordionHeader, { children: [

package/dist/index.mjs

@@ -1117,12 +1117,12 @@ Checkbox2.displayName = "Checkbox";
 // src/components/Datepicker/index.tsx
 import { format as format2 } from "date-fns";
 import { ptBR as ptBR2 } from "date-fns/locale";
-import { forwardRef as forwardRef4, useEffect as useEffect3, useImperativeHandle, useRef as useRef4, useState as useState4 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect4, useImperativeHandle, useRef as useRef4, useState as useState4 } from "react";
 import { DayPicker as DayPicker2 } from "react-day-picker";
 import "react-day-picker/dist/style.css";
 
 // src/components/Input/index.tsx
-import React, { forwardRef as forwardRef3, useRef as useRef2, useState as useState2 } from "react";
+import React, { forwardRef as forwardRef3, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
 
 // src/components/Input/styles.ts
 var StyledWrapper2 = styled("div", {
@@ -1148,8 +1148,7 @@ var TextInputContainer = styled("div", {
   marginBottom: "$6",
   FontSize: "$md",
   "&:has(input:focus), &:hover": {
-    border: "2px solid $clickpalm_light",
-    padding: "calc($4 - 0.9px) calc($4 - 0.9px)"
+    border: "1px solid $clickpalm_light"
   },
   "&:has(input:disabled)": {
     opacity: 0.5,
@@ -1170,8 +1169,7 @@ var TextInputContainer = styled("div", {
         border: "1px solid $danger_dark",
         marginBottom: "0px",
         "&:has(input:focus), &:hover": {
-          border: "2px solid $danger_dark",
-          padding: "calc($4 - 0.9px) calc($4 - 0.9px)"
+          border: "1px solid $danger_dark"
         }
       }
     },
@@ -1256,9 +1254,22 @@ var CharCounter = styled(Span2, {
 import { jsx as jsx19, jsxs as jsxs4 } from "react/jsx-runtime";
 var Input2 = forwardRef3(
   ({ prefix, suffix, label, maxLength, showCounter = false, errorMessage, noMargin = false, ...props }, forwardedRef) => {
-    const [charCount, setCharCount] = useState2(0);
+    const getDisplayValue = (value) => {
+      const stringValue = String(value || "");
+      if (prefix && stringValue.startsWith(prefix)) {
+        return stringValue.substring(prefix.length);
+      }
+      return stringValue;
+    };
+    const [displayValue, setDisplayValue] = useState2(getDisplayValue(props.value));
+    const [charCount, setCharCount] = useState2((prefix?.length || 0) + getDisplayValue(props.value).length);
     const localInputRef = useRef2(null);
     const inputRef = forwardedRef || localInputRef;
+    useEffect2(() => {
+      const newDisplayValue = getDisplayValue(props.value);
+      setDisplayValue(newDisplayValue);
+      setCharCount((prefix?.length || 0) + newDisplayValue.length);
+    }, [props.value, prefix]);
     const handleContainerClick = () => {
       inputRef?.current?.focus();
     };
@@ -1285,12 +1296,23 @@ var Input2 = forwardRef3(
               {
                 ref: inputRef,
                 ...props,
-                maxLength,
+                value: displayValue,
+                maxLength: maxLength ? maxLength - (prefix?.length || 0) : void 0,
                 onChange: (e) => {
+                  const currentDisplayValue = e.target.value;
+                  setDisplayValue(currentDisplayValue);
+                  setCharCount((prefix?.length || 0) + currentDisplayValue.length);
                   if (props.onChange) {
-                    props.onChange(e);
+                    const valueWithPrefix = prefix ? prefix + currentDisplayValue : currentDisplayValue;
+                    const newEvent = {
+                      ...e,
+                      target: {
+                        ...e.target,
+                        value: valueWithPrefix
+                      }
+                    };
+                    props.onChange(newEvent);
                   }
-                  setCharCount(e.target.value.length);
                 }
               }
             ),
@@ -1312,7 +1334,7 @@ var Input2 = forwardRef3(
 Input2.displayName = "Input";
 
 // src/components/Datepicker/CustomSelect/index.tsx
-import { useEffect as useEffect2, useRef as useRef3, useState as useState3 } from "react";
+import { useEffect as useEffect3, useRef as useRef3, useState as useState3 } from "react";
 
 // src/components/Datepicker/CustomSelect/styles.ts
 var IconWrapper = styled("span", {
@@ -1360,7 +1382,8 @@ var SelectOptionsList = styled("ul", {
   fontFamily: theme.fonts.default,
   fontWeight: theme.fontWeights.regular,
   textAlign: "left",
-  width: "100%",
+  width: "120px",
+  overflowX: "hidden",
   "&::-webkit-scrollbar": {
     width: "8px"
   },
@@ -1385,6 +1408,14 @@ var SelectOptionItem = styled("li", {
     backgroundColor: theme.colors.gray_background,
     color: theme.colors.clickpalm_mid
   },
+  '&[aria-disabled="true"]': {
+    color: theme.colors.gray_mid,
+    cursor: "not-allowed",
+    "&:hover": {
+      backgroundColor: "transparent",
+      color: theme.colors.gray_mid
+    }
+  },
   variants: {
     selected: {
       true: {
@@ -1447,7 +1478,7 @@ var CustomSelect = ({
     }
     setIsOpen(false);
   };
-  useEffect2(() => {
+  useEffect3(() => {
     const handleClickOutside = (event) => {
       if (selectRef.current && !selectRef.current.contains(event.target)) {
         setIsOpen(false);
@@ -1469,7 +1500,8 @@ var CustomSelect = ({
       SelectOptionItem,
       {
         selected: option.value === value,
-        onClick: () => handleOptionClick(option.value),
+        onClick: () => !option.disabled && handleOptionClick(option.value),
+        "aria-disabled": option.disabled,
         children: option.label
       },
       option.value
@@ -1493,9 +1525,14 @@ function DatePickerSelectAdapter(props) {
     const label = typeof option.label === "string" ? option.label.charAt(0).toUpperCase() + option.label.slice(1) : option.label;
     return {
       label,
-      value: option.value?.toString() ?? ""
+      value: option.value?.toString() ?? "",
+      disabled: option.disabled
     };
   }) || [];
+  const isYearDropdown = options && options.length > 0 && typeof options[0].value === "number" && options[0].value > 31;
+  if (isYearDropdown) {
+    selectOptions.reverse();
+  }
   return /* @__PURE__ */ jsx21(
     CustomSelect,
     {
@@ -1601,7 +1638,8 @@ var datePickerStyles = globalCss({
 // src/components/Datepicker/index.tsx
 import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
 datePickerStyles();
-var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessage }, ref) => {
+var oneYearMore = new Date((/* @__PURE__ */ new Date()).getFullYear() + 1, 11);
+var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessage, endDate = oneYearMore }, ref) => {
   const [selected, setSelected] = useState4(void 0);
   const [month, setMonth] = useState4(/* @__PURE__ */ new Date());
   const [open, setOpen] = useState4(false);
@@ -1616,7 +1654,7 @@ var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessag
     }
     setOpen(false);
   };
-  useEffect3(() => {
+  useEffect4(() => {
     const handleClickOutside = (event) => {
       if (calendarRef.current && !calendarRef.current.contains(event.target) && inputRef.current && !inputRef.current.contains(event.target)) {
         setOpen(false);
@@ -1625,7 +1663,7 @@ var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessag
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, []);
-  useEffect3(() => {
+  useEffect4(() => {
     if (!open && selected) {
       setMonth(selected);
     }
@@ -1669,7 +1707,7 @@ var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessag
             showOutsideDays: true,
             captionLayout: "dropdown",
             startMonth: new Date(1915, 0),
-            endMonth: /* @__PURE__ */ new Date(),
+            endMonth: endDate,
             components: {
               PreviousMonthButton: (props) => /* @__PURE__ */ jsx22(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ jsx22(Icon, { name: "TriangleLeft", size: 16 }) }),
               NextMonthButton: (props) => /* @__PURE__ */ jsx22(Button, { size: "sm", variant: "secondary", ...props, children: /* @__PURE__ */ jsx22(Icon, { name: "TriangleRight", size: 16 }) }),
@@ -1798,7 +1836,7 @@ var Modal = ({ open, onOpenChange, title, description, children }) => {
 };
 
 // src/components/ProgressBar/index.tsx
-import { useEffect as useEffect4, useState as useState5 } from "react";
+import { useEffect as useEffect5, useState as useState5 } from "react";
 
 // src/components/ProgressBar/styles.ts
 import * as Progress from "@radix-ui/react-progress";
@@ -1831,7 +1869,7 @@ var StyledIndicator = styled(Progress.Indicator, {
 import { jsx as jsx25, jsxs as jsxs8 } from "react/jsx-runtime";
 var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
   const [progress2, setProgress] = useState5(0);
-  useEffect4(() => {
+  useEffect5(() => {
     const timer = setTimeout(() => setProgress(value), 500);
     return () => clearTimeout(timer);
   }, [value]);
@@ -2049,7 +2087,7 @@ var StyledRoot3 = styled(Switch.Root, {
   },
   '&[data-state="unchecked"]': {
     backgroundColor: "$white",
-    border: "2px solid $gray_dark"
+    border: "1px solid $gray_dark"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -2061,13 +2099,13 @@ var StyledRoot3 = styled(Switch.Root, {
   variants: {
     hasError: {
       true: {
-        border: "2px solid $danger_dark",
+        border: "1px solid $danger_dark",
         marginBottom: "0px",
         "&:focus": {
           outline: "1px solid $danger_dark"
         },
         '&[data-state="unchecked"]': {
-          border: "2px solid $danger_dark"
+          border: "1px solid $danger_dark"
         }
       }
     }
@@ -2365,7 +2403,7 @@ var TextAreaElement = styled("textarea", {
   width: "100%",
   "&:focus": {
     outline: 0,
-    border: "2px solid $clickpalm_light"
+    border: "1px solid $clickpalm_light"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -2390,10 +2428,10 @@ var TextAreaElement = styled("textarea", {
   variants: {
     hasError: {
       true: {
-        border: "1px solid $danger_dark",
+        border: "1px solid $danger",
         marginBottom: "0px",
         "&:focus": {
-          border: "2px solid $danger_dark"
+          border: "1px solid $danger_dark"
         }
       }
     },
@@ -2528,18 +2566,32 @@ var TooltipArrow = styled(RadixTooltip.Arrow, {
 });
 
 // src/components/Tooltip/index.tsx
+import { useState as useState8, useEffect as useEffect6 } from "react";
 import { jsx as jsx31, jsxs as jsxs13 } from "react/jsx-runtime";
 var Tooltip = ({
   content,
   children,
   side = "top",
   sideOffset = 5,
-  open,
+  open: controlledOpen,
   onOpenChange,
   delayDuration = 100
 }) => {
-  return /* @__PURE__ */ jsx31(RadixTooltip2.Provider, { children: /* @__PURE__ */ jsxs13(RadixTooltip2.Root, { open, onOpenChange, delayDuration, children: [
-    /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, children }),
+  const [uncontrolledOpen, setUncontrolledOpen] = useState8(false);
+  const [isTouchDevice, setIsTouchDevice] = useState8(false);
+  useEffect6(() => {
+    setIsTouchDevice("ontouchstart" in window || navigator.maxTouchPoints > 0);
+  }, []);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const setOpen = onOpenChange ?? setUncontrolledOpen;
+  const handleClick = (event) => {
+    if (isTouchDevice) {
+      event.preventDefault();
+      setOpen(!open);
+    }
+  };
+  return /* @__PURE__ */ jsx31(RadixTooltip2.Provider, { children: /* @__PURE__ */ jsxs13(RadixTooltip2.Root, { open, onOpenChange: setOpen, delayDuration, children: [
+    /* @__PURE__ */ jsx31(TooltipTrigger, { asChild: true, onClick: handleClick, children }),
     /* @__PURE__ */ jsxs13(TooltipContent, { side, sideOffset, children: [
       content,
       /* @__PURE__ */ jsx31(TooltipArrow, {})
@@ -2633,7 +2685,7 @@ var Loader = ({ show, fullscreen = false }) => {
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-import { forwardRef as forwardRef9, useState as useState8, useRef as useRef6 } from "react";
+import { forwardRef as forwardRef9, useState as useState9, useRef as useRef6 } from "react";
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2700,7 +2752,7 @@ var applyMask = (value, maskType) => {
 import { jsx as jsx33 } from "react/jsx-runtime";
 var MaskedInput = forwardRef9(
   ({ maskType, onChange, ...props }, ref) => {
-    const [value, setValue] = useState8("");
+    const [value, setValue] = useState9("");
     const inputRef = useRef6(null);
     const handleChange = (e) => {
       const { value: inputValue, selectionStart } = e.target;
@@ -2960,7 +3012,7 @@ Heading.displayName = "Heading";
 // src/components/Select/index.tsx
 import { TriangleDownIcon, TriangleUpIcon } from "@radix-ui/react-icons";
 import * as CustomSelect2 from "@radix-ui/react-select";
-import { forwardRef as forwardRef11, useState as useState9 } from "react";
+import { forwardRef as forwardRef11, useState as useState10 } from "react";
 
 // src/components/Select/styles.ts
 import * as Select from "@radix-ui/react-select";
@@ -2996,8 +3048,7 @@ var StyledTrigger = styled(Select.Trigger, {
   },
   "&[data-highlighted], &:focus, &:hover": {
     outline: "none",
-    border: "2px solid $clickpalm_light",
-    padding: "calc(0.92rem - 0.9px) calc($4 - 0.9px)"
+    border: "1px solid $clickpalm_light"
   },
   "&:disabled": {
     opacity: 0.5,
@@ -3010,8 +3061,7 @@ var StyledTrigger = styled(Select.Trigger, {
         marginBottom: "0px",
         "&[data-highlighted], &:focus, &:hover": {
           outline: "none",
-          border: "2px solid $danger_dark",
-          padding: "calc(0.92rem - 0.9px) calc($4 - 0.9px)"
+          border: "1px solid $danger_dark"
         }
       }
     }
@@ -3108,7 +3158,7 @@ var Select2 = forwardRef11(
     style,
     ...rest
   }, ref) => {
-    const [open, setOpen] = useState9(false);
+    const [open, setOpen] = useState10(false);
     return /* @__PURE__ */ jsxs15(StyledWrapper4, { css: css2, className, style, children: [
       label && /* @__PURE__ */ jsx38(Label3, { children: label }),
       /* @__PURE__ */ jsxs15(
@@ -3803,7 +3853,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-import { useState as useState11, Children as Children4, cloneElement as cloneElement2 } from "react";
+import { useState as useState12, Children as Children4, cloneElement as cloneElement2 } from "react";
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -3915,9 +3965,9 @@ import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
 var SWIPE_THRESHOLD = 50;
 var Carousel = ({ title, variant, children }) => {
   const items = Children4.toArray(children);
-  const [activeIndex, setActiveIndex] = useState11(0);
-  const [touchStartX, setTouchStartX] = useState11(null);
-  const [touchEndX, setTouchEndX] = useState11(null);
+  const [activeIndex, setActiveIndex] = useState12(0);
+  const [touchStartX, setTouchStartX] = useState12(null);
+  const [touchEndX, setTouchEndX] = useState12(null);
   const prev = () => {
     setActiveIndex((prevIndex) => prevIndex === 0 ? items.length - 1 : prevIndex - 1);
   };
@@ -4021,7 +4071,7 @@ var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ jsx43(Caro
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-import { forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2, useRef as useRef7, useState as useState12 } from "react";
+import { forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2, useRef as useRef7, useState as useState13 } from "react";
 import { jsx as jsx44 } from "react/jsx-runtime";
 var ToggleButton = styled("button", {
   all: "unset",
@@ -4039,7 +4089,7 @@ var ToggleButton = styled("button", {
 });
 var PasswordInput = forwardRef12(
   ({ value, onChange, ...props }, ref) => {
-    const [visible, setVisible] = useState12(false);
+    const [visible, setVisible] = useState13(false);
     const innerRef = useRef7(null);
     useImperativeHandle2(ref, () => innerRef.current);
     const handleToggleVisibility = () => {
@@ -4105,19 +4155,24 @@ var AccordionHeader = styled(Accordion.Header, {
   display: "flex",
   alignItems: "center",
   justifyContent: "space-between",
-  padding: "0 $5"
+  padding: "0 $5",
+  gap: "$2"
 });
 var AccordionTrigger = styled(Accordion.Trigger, {
   all: "unset",
-  fontFamily: "$default",
   backgroundColor: "transparent",
   display: "flex",
   alignItems: "center",
+  fontFamily: "$default",
+  fontWeight: "$bold",
   fontSize: "$md",
   lineHeight: "$regular",
+  textAlign: "left",
   color: "$black",
-  fontWeight: "$bold",
   width: "100%",
+  flexWrap: "wrap",
+  wordBreak: "break-word",
+  whiteSpace: "normal",
   "&:hover": {
     cursor: "pointer"
   },

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Design System da Clikpalm",
 	"author": "Enisson Shilo",
 	"license": "MIT",
-	"version": "1.3.1",
+	"version": "1.3.3",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/clickpalm/clickpalm-designsystem-lib.git"