@clickpalm/react 1.2.1 → 1.2.3

package/dist/index.d.ts

@@ -2301,7 +2301,7 @@ declare const CheckboxContainer: _stitches_react_types_styled_component.StyledCo
 
 interface CheckboxProps extends ComponentProps<typeof CheckboxContainer> {
     label: string;
-    checked: boolean;
+    checked?: boolean;
     onCheckedChange: (checked: boolean) => void;
     errorMessage?: string;
 }

package/dist/index.js

@@ -1165,7 +1165,7 @@ var Checkbox2 = (0, import_react5.forwardRef)(
           CheckboxContainer,
           {
             ref,
-            checked,
+            checked: !!checked,
             onCheckedChange,
             hasError: !!errorMessage,
             ...rest,
@@ -1511,9 +1511,9 @@ var StyledContent = styled(Dialog.Content, {
   left: "50%",
   display: "flex",
   flexDirection: "column",
-  padding: "$4",
+  padding: "0 $4",
   width: "90%",
-  maxWidth: "500px",
+  maxWidth: "600px",
   backgroundColor: "$white",
   borderRadius: "$md",
   boxShadow: "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
@@ -1533,10 +1533,9 @@ var StyledTitle = styled(Dialog.Title, {
   color: "$black"
 });
 var StyledClose = styled(Dialog.Close, {
-  all: "unset",
-  position: "absolute",
-  top: "16px",
-  right: "16px",
+  // position: 'absolute',
+  // top: '24px',
+  // right: '16px',
   cursor: "pointer",
   fontSize: "18px",
   color: "#999",
@@ -1547,20 +1546,30 @@ var StyledClose = styled(Dialog.Close, {
 var StyledDivider = styled("hr", {
   width: "100%",
   border: "none",
-  borderTop: "1px solid $gray_mid"
+  borderTop: "1px solid $gray_mid",
+  margin: "0px"
 });
 var StyledDescription = styled(Dialog.Description, {
   display: "flex",
   fontFamily: "$default",
   fontWeight: "$regular",
   fontSize: "$md",
-  margin: "$2 0"
+  color: "$black",
+  marginTop: "$4",
+  marginBottom: 0
+});
+var StyledChildren = styled(Dialog.Description, {
+  fontFamily: "$default",
+  fontWeight: "$regular",
+  fontSize: "$md",
+  color: "$black",
+  margin: "$4 0"
 });
 
 // src/components/Modal/index.tsx
 var import_jsx_runtime22 = require("react/jsx-runtime");
 var Modal = ({ open, onOpenChange, title, description, children }) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Dialog2.Root, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Dialog2.Portal, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Dialog2.Root, { open, onOpenChange, modal: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Dialog2.Portal, { children: [
     /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledOverlay, {}),
     /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(StyledContent, { children: [
       /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Wrapper, { children: [
@@ -1569,7 +1578,7 @@ var Modal = ({ open, onOpenChange, title, description, children }) => {
       ] }),
       /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledDivider, {}),
       description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledDescription, { children: description }),
-      children
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(StyledChildren, { children })
     ] })
   ] }) });
 };
@@ -3807,17 +3816,17 @@ var AccordionItem = styled(Accordion.Item, {
   }
 });
 var AccordionHeader = styled(Accordion.Header, {
-  display: "flex"
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "0 $5"
 });
 var AccordionTrigger = styled(Accordion.Trigger, {
   all: "unset",
   fontFamily: "$default",
   backgroundColor: "transparent",
-  padding: "0 $5",
-  flex: 1,
   display: "flex",
   alignItems: "center",
-  justifyContent: "space-between",
   fontSize: "$md",
   lineHeight: "$regular",
   color: "$black",
@@ -3867,13 +3876,13 @@ var import_jsx_runtime43 = require("react/jsx-runtime");
 var Accordion2 = import_react21.default.forwardRef(
   ({ title, children, dropdownItems }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionContainer, { type: "single", collapsible: true, ref, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AccordionItem, { value: "item-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionHeader, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AccordionTrigger, { children: [
-        title,
+      /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(AccordionHeader, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionTrigger, { children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { children: title }) }),
         /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(TriggerContent, { children: [
           dropdownItems && dropdownItems,
-          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionChevron, { name: "TriangleDown", size: 16, "aria-hidden": true }) })
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixAccordion.Trigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(StyledButton, { as: "div", variant: "secondary", size: "sm", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionChevron, { name: "TriangleDown", size: 16, "aria-hidden": true }) }) })
         ] })
-      ] }) }),
+      ] }),
       /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RadixAccordion.Content, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(AccordionContent, { children }) })
     ] }) });
   }

package/dist/index.mjs

@@ -1093,7 +1093,7 @@ var Checkbox2 = forwardRef2(
           CheckboxContainer,
           {
             ref,
-            checked,
+            checked: !!checked,
             onCheckedChange,
             hasError: !!errorMessage,
             ...rest,
@@ -1439,9 +1439,9 @@ var StyledContent = styled(Dialog.Content, {
   left: "50%",
   display: "flex",
   flexDirection: "column",
-  padding: "$4",
+  padding: "0 $4",
   width: "90%",
-  maxWidth: "500px",
+  maxWidth: "600px",
   backgroundColor: "$white",
   borderRadius: "$md",
   boxShadow: "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
@@ -1461,10 +1461,9 @@ var StyledTitle = styled(Dialog.Title, {
   color: "$black"
 });
 var StyledClose = styled(Dialog.Close, {
-  all: "unset",
-  position: "absolute",
-  top: "16px",
-  right: "16px",
+  // position: 'absolute',
+  // top: '24px',
+  // right: '16px',
   cursor: "pointer",
   fontSize: "18px",
   color: "#999",
@@ -1475,20 +1474,30 @@ var StyledClose = styled(Dialog.Close, {
 var StyledDivider = styled("hr", {
   width: "100%",
   border: "none",
-  borderTop: "1px solid $gray_mid"
+  borderTop: "1px solid $gray_mid",
+  margin: "0px"
 });
 var StyledDescription = styled(Dialog.Description, {
   display: "flex",
   fontFamily: "$default",
   fontWeight: "$regular",
   fontSize: "$md",
-  margin: "$2 0"
+  color: "$black",
+  marginTop: "$4",
+  marginBottom: 0
+});
+var StyledChildren = styled(Dialog.Description, {
+  fontFamily: "$default",
+  fontWeight: "$regular",
+  fontSize: "$md",
+  color: "$black",
+  margin: "$4 0"
 });
 
 // src/components/Modal/index.tsx
 import { jsx as jsx22, jsxs as jsxs6 } from "react/jsx-runtime";
 var Modal = ({ open, onOpenChange, title, description, children }) => {
-  return /* @__PURE__ */ jsx22(Dialog2.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs6(Dialog2.Portal, { children: [
+  return /* @__PURE__ */ jsx22(Dialog2.Root, { open, onOpenChange, modal: true, children: /* @__PURE__ */ jsxs6(Dialog2.Portal, { children: [
     /* @__PURE__ */ jsx22(StyledOverlay, {}),
     /* @__PURE__ */ jsxs6(StyledContent, { children: [
       /* @__PURE__ */ jsxs6(Wrapper, { children: [
@@ -1497,7 +1506,7 @@ var Modal = ({ open, onOpenChange, title, description, children }) => {
       ] }),
       /* @__PURE__ */ jsx22(StyledDivider, {}),
       description && /* @__PURE__ */ jsx22(StyledDescription, { children: description }),
-      children
+      /* @__PURE__ */ jsx22(StyledChildren, { children })
     ] })
   ] }) });
 };
@@ -3739,17 +3748,17 @@ var AccordionItem = styled(Accordion.Item, {
   }
 });
 var AccordionHeader = styled(Accordion.Header, {
-  display: "flex"
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  padding: "0 $5"
 });
 var AccordionTrigger = styled(Accordion.Trigger, {
   all: "unset",
   fontFamily: "$default",
   backgroundColor: "transparent",
-  padding: "0 $5",
-  flex: 1,
   display: "flex",
   alignItems: "center",
-  justifyContent: "space-between",
   fontSize: "$md",
   lineHeight: "$regular",
   color: "$black",
@@ -3799,13 +3808,13 @@ import { jsx as jsx43, jsxs as jsxs20 } from "react/jsx-runtime";
 var Accordion2 = React6.forwardRef(
   ({ title, children, dropdownItems }, ref) => {
     return /* @__PURE__ */ jsx43(AccordionContainer, { type: "single", collapsible: true, ref, children: /* @__PURE__ */ jsxs20(AccordionItem, { value: "item-1", children: [
-      /* @__PURE__ */ jsx43(AccordionHeader, { children: /* @__PURE__ */ jsxs20(AccordionTrigger, { children: [
-        title,
+      /* @__PURE__ */ jsxs20(AccordionHeader, { children: [
+        /* @__PURE__ */ jsx43(AccordionTrigger, { children: /* @__PURE__ */ jsx43("span", { children: title }) }),
         /* @__PURE__ */ jsxs20(TriggerContent, { children: [
           dropdownItems && dropdownItems,
-          /* @__PURE__ */ jsx43(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx43(AccordionChevron, { name: "TriangleDown", size: 16, "aria-hidden": true }) })
+          /* @__PURE__ */ jsx43(RadixAccordion.Trigger, { asChild: true, children: /* @__PURE__ */ jsx43(StyledButton, { as: "div", variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx43(AccordionChevron, { name: "TriangleDown", size: 16, "aria-hidden": true }) }) })
         ] })
-      ] }) }),
+      ] }),
       /* @__PURE__ */ jsx43(RadixAccordion.Content, { asChild: true, children: /* @__PURE__ */ jsx43(AccordionContent, { children }) })
     ] }) });
   }

package/package.json

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