@clickpalm/react 1.2.10 → 1.2.12

package/dist/index.d.ts

@@ -2311,8 +2311,9 @@ interface DatePickerInputProps {
     label: string;
     value?: string;
     onChange: (date: string) => void;
+    errorMessage?: string;
 }
-declare const Datepicker: ({ label, value, onChange }: DatePickerInputProps) => react_jsx_runtime.JSX.Element;
+declare const Datepicker: react.ForwardRefExoticComponent<DatePickerInputProps & react.RefAttributes<HTMLInputElement>>;
 
 declare const StyledHr: _stitches_react_types_styled_component.StyledComponent<"hr", {
     variant?: "gray" | "purple" | undefined;
@@ -2601,6 +2602,7 @@ interface TabItemProps {
     value: string;
     label: string;
     children: ReactNode;
+    forceMount?: boolean;
 }
 declare const TabsItem: React.FC<TabItemProps>;
 declare const Tabs: React.FC<TabsProps> & {

package/dist/index.js

@@ -1388,12 +1388,13 @@ var datePickerStyles = globalCss({
 // src/components/Datepicker/index.tsx
 var import_jsx_runtime20 = require("react/jsx-runtime");
 datePickerStyles();
-var Datepicker = ({ label, value, onChange }) => {
+var Datepicker = (0, import_react6.forwardRef)(({ label, value, onChange, errorMessage }, ref) => {
   const [selected, setSelected] = (0, import_react6.useState)(void 0);
   const [month, setMonth] = (0, import_react6.useState)(/* @__PURE__ */ new Date());
   const [open, setOpen] = (0, import_react6.useState)(false);
   const inputRef = (0, import_react6.useRef)(null);
   const calendarRef = (0, import_react6.useRef)(null);
+  (0, import_react6.useImperativeHandle)(ref, () => inputRef.current);
   const handleDaySelect = (date) => {
     setSelected(date);
     if (date) {
@@ -1426,7 +1427,8 @@ var Datepicker = ({ label, value, onChange }) => {
         onFocus: () => setOpen(true),
         value: value || "",
         readOnly: true,
-        suffix: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "Calendar", size: 16 })
+        suffix: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "Calendar", size: 16 }),
+        errorMessage
       }
     ),
     open && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
@@ -1471,7 +1473,8 @@ var Datepicker = ({ label, value, onChange }) => {
       }
     )
   ] });
-};
+});
+Datepicker.displayName = "Datepicker";
 
 // src/components/Hr.tsx
 var import_react7 = require("react");
@@ -2020,8 +2023,8 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
   const childrenArray = import_react11.Children.toArray(children);
   childrenArray.forEach((child) => {
     if ((0, import_react11.isValidElement)(child) && child.type === TabsItem) {
-      const { value, label, children: content } = child.props;
-      items.push({ value, label, children: content });
+      const { value, label, forceMount, children: content } = child.props;
+      items.push({ value, label, forceMount, children: content });
     }
   });
   const listRef = (0, import_react11.useRef)(null);
@@ -2110,6 +2113,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
           {
             colorContent,
             value: item.value,
+            forceMount: item.forceMount || void 0,
             children: item.children
           },
           `content-${item.value}`

package/dist/index.mjs

@@ -1115,7 +1115,7 @@ Checkbox2.displayName = "Checkbox";
 // src/components/Datepicker/index.tsx
 import { format as format2 } from "date-fns";
 import { ptBR as ptBR2 } from "date-fns/locale";
-import { useEffect as useEffect2, useRef as useRef3, useState as useState2 } from "react";
+import { forwardRef as forwardRef4, useEffect as useEffect2, useImperativeHandle, useRef as useRef3, useState as useState2 } from "react";
 import { DayPicker as DayPicker2 } from "react-day-picker";
 import "react-day-picker/dist/style.css";
 
@@ -1317,12 +1317,13 @@ var datePickerStyles = globalCss({
 // src/components/Datepicker/index.tsx
 import { jsx as jsx20, jsxs as jsxs5 } from "react/jsx-runtime";
 datePickerStyles();
-var Datepicker = ({ label, value, onChange }) => {
+var Datepicker = forwardRef4(({ label, value, onChange, errorMessage }, ref) => {
   const [selected, setSelected] = useState2(void 0);
   const [month, setMonth] = useState2(/* @__PURE__ */ new Date());
   const [open, setOpen] = useState2(false);
   const inputRef = useRef3(null);
   const calendarRef = useRef3(null);
+  useImperativeHandle(ref, () => inputRef.current);
   const handleDaySelect = (date) => {
     setSelected(date);
     if (date) {
@@ -1355,7 +1356,8 @@ var Datepicker = ({ label, value, onChange }) => {
         onFocus: () => setOpen(true),
         value: value || "",
         readOnly: true,
-        suffix: /* @__PURE__ */ jsx20(Icon, { name: "Calendar", size: 16 })
+        suffix: /* @__PURE__ */ jsx20(Icon, { name: "Calendar", size: 16 }),
+        errorMessage
       }
     ),
     open && /* @__PURE__ */ jsx20(
@@ -1400,10 +1402,11 @@ var Datepicker = ({ label, value, onChange }) => {
       }
     )
   ] });
-};
+});
+Datepicker.displayName = "Datepicker";
 
 // src/components/Hr.tsx
-import { forwardRef as forwardRef4 } from "react";
+import { forwardRef as forwardRef5 } from "react";
 import { jsx as jsx21 } from "react/jsx-runtime";
 var StyledHr = styled("hr", {
   border: "none",
@@ -1420,7 +1423,7 @@ var StyledHr = styled("hr", {
     }
   }
 });
-var Hr = forwardRef4(function Hr2({ children, ...props }, ref) {
+var Hr = forwardRef5(function Hr2({ children, ...props }, ref) {
   return /* @__PURE__ */ jsx21(StyledHr, { ref, ...props, children });
 });
 Hr.displayName = "Hr";
@@ -1576,7 +1579,7 @@ var ProgressBar = ({ label, value = 0, max = 100, ...rest }) => {
 ProgressBar.displayName = "ProgressBar";
 
 // src/components/Radio/index.tsx
-import { forwardRef as forwardRef5 } from "react";
+import { forwardRef as forwardRef6 } from "react";
 
 // src/components/Radio/styles.ts
 import * as RadioGroup from "@radix-ui/react-radio-group";
@@ -1671,7 +1674,7 @@ var Span3 = styled("span", {
 
 // src/components/Radio/index.tsx
 import { jsx as jsx24, jsxs as jsxs8 } from "react/jsx-runtime";
-var Radio = forwardRef5(({
+var Radio = forwardRef6(({
   labels,
   value,
   onChange,
@@ -1727,7 +1730,7 @@ var Spacing = ({ size, axis = "vertical" }) => {
 };
 
 // src/components/Switch/index.tsx
-import { forwardRef as forwardRef6 } from "react";
+import { forwardRef as forwardRef7 } from "react";
 
 // src/components/Switch/styles.ts
 import * as Switch from "@radix-ui/react-switch";
@@ -1825,7 +1828,7 @@ var Span4 = styled("span", {
 
 // src/components/Switch/index.tsx
 import { jsx as jsx26, jsxs as jsxs9 } from "react/jsx-runtime";
-var Switch2 = forwardRef6(({
+var Switch2 = forwardRef7(({
   label,
   checked,
   defaultChecked,
@@ -1949,8 +1952,8 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
   const childrenArray = Children.toArray(children);
   childrenArray.forEach((child) => {
     if (isValidElement(child) && child.type === TabsItem) {
-      const { value, label, children: content } = child.props;
-      items.push({ value, label, children: content });
+      const { value, label, forceMount, children: content } = child.props;
+      items.push({ value, label, forceMount, children: content });
     }
   });
   const listRef = useRef4(null);
@@ -2039,6 +2042,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
           {
             colorContent,
             value: item.value,
+            forceMount: item.forceMount || void 0,
             children: item.children
           },
           `content-${item.value}`
@@ -2050,7 +2054,7 @@ var Tabs2 = ({ defaultValue, colorContent, children }) => {
 Tabs2.Item = TabsItem;
 
 // src/components/TextArea.tsx
-import { forwardRef as forwardRef7 } from "react";
+import { forwardRef as forwardRef8 } from "react";
 import { jsx as jsx28, jsxs as jsxs11 } from "react/jsx-runtime";
 var Wrapper4 = styled("div", {
   display: "flex",
@@ -2126,7 +2130,7 @@ var Span5 = styled("span", {
   marginTop: "2px",
   marginBottom: "$6"
 });
-var TextArea = forwardRef7(
+var TextArea = forwardRef8(
   ({ label, id, htmlFor, errorMessage, ...props }, ref) => {
     const textAreaId = id || htmlFor || `textarea-${crypto.randomUUID()}`;
     return /* @__PURE__ */ jsxs11(Wrapper4, { children: [
@@ -2302,7 +2306,7 @@ var Loader = ({ show, fullscreen = false }) => {
 Loader.displayName = "Loader";
 
 // src/components/MaskedInput/index.tsx
-import { forwardRef as forwardRef8, useState as useState5, useRef as useRef5 } from "react";
+import { forwardRef as forwardRef9, useState as useState5, useRef as useRef5 } from "react";
 
 // src/components/MaskedInput/utils.ts
 var MAX_LENGTHS = {
@@ -2367,7 +2371,7 @@ var applyMask = (value, maskType) => {
 
 // src/components/MaskedInput/index.tsx
 import { jsx as jsx31 } from "react/jsx-runtime";
-var MaskedInput = forwardRef8(
+var MaskedInput = forwardRef9(
   ({ maskType, onChange, ...props }, ref) => {
     const [value, setValue] = useState5("");
     const inputRef = useRef5(null);
@@ -2596,7 +2600,7 @@ var Paragraph = (props) => {
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
-import { forwardRef as forwardRef9 } from "react";
+import { forwardRef as forwardRef10 } from "react";
 import { jsx as jsx35 } from "react/jsx-runtime";
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
@@ -2619,7 +2623,7 @@ var StyledHeading = styled("h2", {
     size: "md"
   }
 });
-var Heading = forwardRef9(function Heading2({ children, ...props }, ref) {
+var Heading = forwardRef10(function Heading2({ children, ...props }, ref) {
   return /* @__PURE__ */ jsx35(StyledHeading, { ref, ...props, children });
 });
 Heading.displayName = "Heading";
@@ -2627,7 +2631,7 @@ Heading.displayName = "Heading";
 // src/components/Select/index.tsx
 import { TriangleDownIcon, TriangleUpIcon } from "@radix-ui/react-icons";
 import * as CustomSelect from "@radix-ui/react-select";
-import { forwardRef as forwardRef10, useState as useState6 } from "react";
+import { forwardRef as forwardRef11, useState as useState6 } from "react";
 
 // src/components/Select/styles.ts
 import * as Select from "@radix-ui/react-select";
@@ -2748,7 +2752,7 @@ var Span6 = styled("span", {
 
 // src/components/Select/index.tsx
 import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
-var Select2 = forwardRef10(
+var Select2 = forwardRef11(
   ({
     value,
     onValueChange,
@@ -3674,7 +3678,7 @@ var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ jsx41(Caro
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
-import { forwardRef as forwardRef11, useImperativeHandle, useRef as useRef6, useState as useState9 } from "react";
+import { forwardRef as forwardRef12, useImperativeHandle as useImperativeHandle2, useRef as useRef6, useState as useState9 } from "react";
 import { jsx as jsx42 } from "react/jsx-runtime";
 var ToggleButton = styled("button", {
   all: "unset",
@@ -3690,11 +3694,11 @@ var ToggleButton = styled("button", {
     borderRadius: "$sm"
   }
 });
-var PasswordInput = forwardRef11(
+var PasswordInput = forwardRef12(
   ({ value, onChange, ...props }, ref) => {
     const [visible, setVisible] = useState9(false);
     const innerRef = useRef6(null);
-    useImperativeHandle(ref, () => innerRef.current);
+    useImperativeHandle2(ref, () => innerRef.current);
     const handleToggleVisibility = () => {
       setVisible((v) => !v);
       setTimeout(() => {

package/package.json

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