@clickpalm/react 1.3.3 → 1.3.5

package/dist/index.d.ts

@@ -3091,6 +3091,7 @@ interface TextInputProps extends InputHTMLAttributes<HTMLInputElement> {
     errorMessage?: string;
     maxLength?: number;
     showCounter?: boolean;
+    redBorder?: boolean;
 }
 declare const Input: react__default.ForwardRefExoticComponent<TextInputProps & react__default.RefAttributes<HTMLInputElement>>;
 

package/dist/index.js

@@ -1247,6 +1247,15 @@ var TextInputContainer = styled("div", {
       true: {
         marginBottom: "0px"
       }
+    },
+    redBorder: {
+      true: {
+        border: "1px solid $danger_dark",
+        marginBottom: "0px",
+        "&:has(input:focus), &:hover": {
+          border: "1px solid $danger_dark"
+        }
+      }
     }
   }
 });
@@ -1323,7 +1332,7 @@ var CharCounter = styled(Span2, {
 // src/components/Input/index.tsx
 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) => {
+  ({ prefix, suffix, label, maxLength, showCounter = false, errorMessage, noMargin = false, redBorder, ...props }, forwardedRef) => {
     const getDisplayValue = (value) => {
       const stringValue = String(value || "");
       if (prefix && stringValue.startsWith(prefix)) {
@@ -1359,6 +1368,7 @@ var Input2 = (0, import_react5.forwardRef)(
           hasError: !!errorMessage,
           hasCounter: showCounter,
           onClick: handleContainerClick,
+          redBorder,
           children: [
             !!prefix && /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Prefix, { children: prefix }),
             /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -1738,6 +1748,7 @@ var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onC
       setMonth(selected);
     }
   }, [open, selected]);
+  const isOpenWithError = open && errorMessage ? true : false;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       Input2,
@@ -1749,8 +1760,9 @@ var Datepicker = (0, import_react7.forwardRef)(({ label, placeholder, value, onC
         value: value || "",
         readOnly: true,
         suffix: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon, { name: "Calendar", size: 16 }),
-        errorMessage,
-        noMargin: true
+        noMargin: true,
+        errorMessage: open ? "" : errorMessage,
+        redBorder: isOpenWithError
       }
     ),
     open && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -2960,7 +2972,7 @@ var IconButton = styled("button", {
 var import_jsx_runtime34 = require("react/jsx-runtime");
 var Dropdown = ({ children }) => {
   const childrenArray = import_react16.Children.toArray(children);
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DropdownMenu2.Root, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(DropdownMenu2.Root, { modal: false, 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_react16.Fragment, { children: [
       child,

package/dist/index.mjs

@@ -1177,6 +1177,15 @@ var TextInputContainer = styled("div", {
       true: {
         marginBottom: "0px"
       }
+    },
+    redBorder: {
+      true: {
+        border: "1px solid $danger_dark",
+        marginBottom: "0px",
+        "&:has(input:focus), &:hover": {
+          border: "1px solid $danger_dark"
+        }
+      }
     }
   }
 });
@@ -1253,7 +1262,7 @@ var CharCounter = styled(Span2, {
 // src/components/Input/index.tsx
 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) => {
+  ({ prefix, suffix, label, maxLength, showCounter = false, errorMessage, noMargin = false, redBorder, ...props }, forwardedRef) => {
     const getDisplayValue = (value) => {
       const stringValue = String(value || "");
       if (prefix && stringValue.startsWith(prefix)) {
@@ -1289,6 +1298,7 @@ var Input2 = forwardRef3(
           hasError: !!errorMessage,
           hasCounter: showCounter,
           onClick: handleContainerClick,
+          redBorder,
           children: [
             !!prefix && /* @__PURE__ */ jsx19(Prefix, { children: prefix }),
             /* @__PURE__ */ jsx19(
@@ -1668,6 +1678,7 @@ var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessag
       setMonth(selected);
     }
   }, [open, selected]);
+  const isOpenWithError = open && errorMessage ? true : false;
   return /* @__PURE__ */ jsxs6("div", { children: [
     /* @__PURE__ */ jsx22(
       Input2,
@@ -1679,8 +1690,9 @@ var Datepicker = forwardRef4(({ label, placeholder, value, onChange, errorMessag
         value: value || "",
         readOnly: true,
         suffix: /* @__PURE__ */ jsx22(Icon, { name: "Calendar", size: 16 }),
-        errorMessage,
-        noMargin: true
+        noMargin: true,
+        errorMessage: open ? "" : errorMessage,
+        redBorder: isOpenWithError
       }
     ),
     open && /* @__PURE__ */ jsx22(
@@ -2890,7 +2902,7 @@ var IconButton = styled("button", {
 import { jsx as jsx34, jsxs as jsxs14 } from "react/jsx-runtime";
 var Dropdown = ({ children }) => {
   const childrenArray = Children2.toArray(children);
-  return /* @__PURE__ */ jsxs14(DropdownMenu2.Root, { children: [
+  return /* @__PURE__ */ jsxs14(DropdownMenu2.Root, { modal: false, children: [
     /* @__PURE__ */ jsx34(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx34(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx34(Icon, { name: "Dots", size: 16 }) }) }),
     /* @__PURE__ */ jsx34(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx34(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ jsxs14(Fragment2, { children: [
       child,

package/package.json

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