@clickpalm/react 1.1.2 → 1.2.0

package/dist/index.mjs

@@ -2372,8 +2372,110 @@ var MaskedInput = forwardRef5(
 );
 MaskedInput.displayName = "MaskedInput";
 
+// src/components/Dropdown/index.tsx
+import { Children as Children2, Fragment as Fragment2 } from "react";
+import * as DropdownMenu2 from "@radix-ui/react-dropdown-menu";
+
+// src/components/Dropdown/styles.ts
+import * as DropdownMenu from "@radix-ui/react-dropdown-menu";
+var slideUpAndFade2 = keyframes({
+  "0%": { opacity: 0, transform: "translateY(2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+});
+var slideRightAndFade2 = keyframes({
+  "0%": { opacity: 0, transform: "translateX(-2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+});
+var slideDownAndFade2 = keyframes({
+  "0%": { opacity: 0, transform: "translateY(-2px)" },
+  "100%": { opacity: 1, transform: "translateY(0)" }
+});
+var slideLeftAndFade2 = keyframes({
+  "0%": { opacity: 0, transform: "translateX(2px)" },
+  "100%": { opacity: 1, transform: "translateX(0)" }
+});
+var StyledContent2 = styled(DropdownMenu.Content, {
+  minWidth: 100,
+  backgroundColor: "$white",
+  borderRadius: "$md",
+  padding: "$2",
+  boxShadow: "0px 10px 38px -10px rgba(22, 23, 24, 0.35), 0px 10px 20px -15px rgba(22, 23, 24, 0.2)",
+  animationDuration: "400ms",
+  animationTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+  willChange: "transform, opacity",
+  '&[data-state="open"]': {
+    '&[data-side="top"]': { animationName: slideDownAndFade2 },
+    '&[data-side="right"]': { animationName: slideLeftAndFade2 },
+    '&[data-side="bottom"]': { animationName: slideUpAndFade2 },
+    '&[data-side="left"]': { animationName: slideRightAndFade2 }
+  }
+});
+var itemStyles = {
+  all: "unset",
+  fontSize: "$sm",
+  lineHeight: 1,
+  color: "$black",
+  borderRadius: "$sm",
+  display: "flex",
+  alignItems: "center",
+  height: 25,
+  padding: "0 $2",
+  position: "relative",
+  paddingLeft: "$5",
+  userSelect: "none",
+  "&[data-disabled]": {
+    color: "$gray_mid",
+    pointerEvents: "none"
+  },
+  "&[data-highlighted]": {
+    color: "$clickpalm_light",
+    cursor: "pointer"
+  },
+  button: {
+    all: "unset",
+    width: "100%",
+    textAlign: "left"
+  }
+};
+var StyledItem2 = styled(DropdownMenu.Item, { ...itemStyles });
+var StyledSeparator = styled(DropdownMenu.Separator, {
+  height: "1px",
+  backgroundColor: "$gray_light",
+  margin: "$2"
+});
+var IconButton = styled("button", {
+  all: "unset",
+  fontFamily: "inherit",
+  borderRadius: "100%",
+  height: 35,
+  width: 35,
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  color: "$clickpalm_light",
+  backgroundColor: "transparent"
+});
+
+// src/components/Dropdown/index.tsx
+import { jsx as jsx32, jsxs as jsxs13 } from "react/jsx-runtime";
+var Dropdown = ({ children }) => {
+  const childrenArray = Children2.toArray(children);
+  return /* @__PURE__ */ jsxs13(DropdownMenu2.Root, { children: [
+    /* @__PURE__ */ jsx32(DropdownMenu2.Trigger, { asChild: true, children: /* @__PURE__ */ jsx32(Button, { variant: "secondary", size: "sm", children: /* @__PURE__ */ jsx32(Icon, { name: "Dots", size: 16 }) }) }),
+    /* @__PURE__ */ jsx32(DropdownMenu2.Portal, { children: /* @__PURE__ */ jsx32(StyledContent2, { sideOffset: 5, align: "end", children: childrenArray.map((child, index) => /* @__PURE__ */ jsxs13(Fragment2, { children: [
+      child,
+      index < childrenArray.length - 1 && /* @__PURE__ */ jsx32(DropdownSeparator, {})
+    ] }, index)) }) })
+  ] });
+};
+var DropdownItem = StyledItem2;
+var DropdownSeparator = StyledSeparator;
+Dropdown.displayName = "Dropdown";
+DropdownItem.displayName = "DropdownItem";
+DropdownSeparator.displayName = "DropdownSeparator";
+
 // src/components/Box.tsx
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { jsx as jsx33 } from "react/jsx-runtime";
 var StyledBox = styled("div", {
   padding: "$5",
   borderRadius: "$md",
@@ -2395,12 +2497,12 @@ var StyledBox = styled("div", {
   }
 });
 var Box = (props) => {
-  return /* @__PURE__ */ jsx32(StyledBox, { ...props });
+  return /* @__PURE__ */ jsx33(StyledBox, { ...props });
 };
 Box.displayName = "Box";
 
 // src/components/Paragraph.tsx
-import { jsx as jsx33 } from "react/jsx-runtime";
+import { jsx as jsx34 } from "react/jsx-runtime";
 var StyledParagraph = styled("p", {
   fontFamily: "$default",
   lineHeight: "$short",
@@ -2441,13 +2543,13 @@ var StyledParagraph = styled("p", {
   }
 });
 var Paragraph = (props) => {
-  return /* @__PURE__ */ jsx33(StyledParagraph, { ...props });
+  return /* @__PURE__ */ jsx34(StyledParagraph, { ...props });
 };
 Paragraph.displayName = "Paragraph";
 
 // src/components/Heading.tsx
 import { forwardRef as forwardRef6 } from "react";
-import { jsx as jsx34 } from "react/jsx-runtime";
+import { jsx as jsx35 } from "react/jsx-runtime";
 var StyledHeading = styled("h2", {
   fontFamily: "$default",
   lineHeight: "$shorter",
@@ -2470,7 +2572,7 @@ var StyledHeading = styled("h2", {
   }
 });
 var Heading = forwardRef6(function Heading2({ children, ...props }, ref) {
-  return /* @__PURE__ */ jsx34(StyledHeading, { ref, ...props, children });
+  return /* @__PURE__ */ jsx35(StyledHeading, { ref, ...props, children });
 });
 Heading.displayName = "Heading";
 
@@ -2530,7 +2632,7 @@ var StyledTrigger = styled(Select.Trigger, {
     }
   }
 });
-var StyledContent2 = styled(Select.Content, {
+var StyledContent3 = styled(Select.Content, {
   overflow: "hidden",
   backgroundColor: "$gray_background",
   borderRadius: "$md",
@@ -2542,7 +2644,7 @@ var StyledContent2 = styled(Select.Content, {
 var StyledViewport = styled(Select.Viewport, {
   padding: "4px"
 });
-var StyledItem2 = styled(Select.Item, {
+var StyledItem3 = styled(Select.Item, {
   position: "relative",
   fontSize: "$md",
   padding: "14px 12px",
@@ -2594,7 +2696,7 @@ var Span6 = styled("span", {
 });
 
 // src/components/Select/index.tsx
-import { jsx as jsx35, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
 function Select2({
   value,
   onValueChange,
@@ -2605,9 +2707,9 @@ function Select2({
   ...rest
 }) {
   const [open, setOpen] = useState6(false);
-  return /* @__PURE__ */ jsxs13(StyledWrapper4, { children: [
-    label && /* @__PURE__ */ jsx35(Label3, { children: label }),
-    /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsxs14(StyledWrapper4, { children: [
+    label && /* @__PURE__ */ jsx36(Label3, { children: label }),
+    /* @__PURE__ */ jsxs14(
       CustomSelect.Root,
       {
         value,
@@ -2615,21 +2717,21 @@ function Select2({
         onOpenChange: setOpen,
         ...rest,
         children: [
-          /* @__PURE__ */ jsxs13(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, children: [
-            /* @__PURE__ */ jsx35(CustomSelect.Value, { placeholder }),
-            /* @__PURE__ */ jsx35(StyledIcon, { open, children: /* @__PURE__ */ jsx35(TriangleDownIcon, {}) })
+          /* @__PURE__ */ jsxs14(StyledTrigger, { "aria-label": label, hasError: !!errorMessage, children: [
+            /* @__PURE__ */ jsx36(CustomSelect.Value, { placeholder }),
+            /* @__PURE__ */ jsx36(StyledIcon, { open, children: /* @__PURE__ */ jsx36(TriangleDownIcon, {}) })
           ] }),
-          errorMessage && /* @__PURE__ */ jsx35(Span6, { children: errorMessage }),
-          /* @__PURE__ */ jsx35(CustomSelect.Portal, { children: /* @__PURE__ */ jsxs13(
-            StyledContent2,
+          errorMessage && /* @__PURE__ */ jsx36(Span6, { children: errorMessage }),
+          /* @__PURE__ */ jsx36(CustomSelect.Portal, { children: /* @__PURE__ */ jsxs14(
+            StyledContent3,
             {
               side: "bottom",
               align: "start",
               position: "popper",
               children: [
-                /* @__PURE__ */ jsx35(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ jsx35(TriangleUpIcon, {}) }),
-                /* @__PURE__ */ jsx35(StyledViewport, { children: items.map((item) => /* @__PURE__ */ jsx35(StyledItem2, { value: item.value, children: /* @__PURE__ */ jsx35(CustomSelect.ItemText, { children: item.label }) }, item.value)) }),
-                /* @__PURE__ */ jsx35(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ jsx35(TriangleDownIcon, {}) })
+                /* @__PURE__ */ jsx36(CustomSelect.ScrollUpButton, { children: /* @__PURE__ */ jsx36(TriangleUpIcon, {}) }),
+                /* @__PURE__ */ jsx36(StyledViewport, { children: items.map((item) => /* @__PURE__ */ jsx36(StyledItem3, { value: item.value, children: /* @__PURE__ */ jsx36(CustomSelect.ItemText, { children: item.label }) }, item.value)) }),
+                /* @__PURE__ */ jsx36(CustomSelect.ScrollDownButton, { children: /* @__PURE__ */ jsx36(TriangleDownIcon, {}) })
               ]
             }
           ) })
@@ -2642,7 +2744,7 @@ Select2.displayName = "Select";
 
 // src/components/LabelledValue/index.tsx
 import {
-  Children as Children2,
+  Children as Children3,
   cloneElement,
   isValidElement as isValidElement2
 } from "react";
@@ -2706,22 +2808,22 @@ var Value2 = styled("div", {
 });
 
 // src/components/LabelledValue/index.tsx
-import { jsx as jsx36, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
 function LabelledValue({ position = "vertical", withRow = false, children }) {
-  return /* @__PURE__ */ jsx36(Container, { position, children: Children2.map(children, (child) => {
+  return /* @__PURE__ */ jsx37(Container, { position, children: Children3.map(children, (child) => {
     if (isValidElement2(child)) {
       return cloneElement(child, { position, withRow });
     }
     return child;
   }) });
 }
-function Item3({ label, value, position = "vertical", withRow = false }) {
-  return /* @__PURE__ */ jsxs14(ItemWrapper, { position, withRow, children: [
-    /* @__PURE__ */ jsx36(Label4, { children: label }),
-    /* @__PURE__ */ jsx36(Value2, { children: value })
+function Item4({ label, value, position = "vertical", withRow = false }) {
+  return /* @__PURE__ */ jsxs15(ItemWrapper, { position, withRow, children: [
+    /* @__PURE__ */ jsx37(Label4, { children: label }),
+    /* @__PURE__ */ jsx37(Value2, { children: value })
   ] });
 }
-LabelledValue.Item = Item3;
+LabelledValue.Item = Item4;
 
 // src/components/OneTimePassword/index.tsx
 import * as OneTimePasswordField2 from "@radix-ui/react-one-time-password-field";
@@ -2789,11 +2891,11 @@ var Span7 = styled("span", {
 });
 
 // src/components/OneTimePassword/index.tsx
-import { jsx as jsx37, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
 var OneTimePassword = ({ label, length, value, errorMessage, onValueChange, ...rootProps }) => {
-  return /* @__PURE__ */ jsx37(Container2, { children: /* @__PURE__ */ jsxs15(StyledWrapper5, { children: [
-    /* @__PURE__ */ jsx37(StyledLabel3, { children: label }),
-    /* @__PURE__ */ jsxs15(
+  return /* @__PURE__ */ jsx38(Container2, { children: /* @__PURE__ */ jsxs16(StyledWrapper5, { children: [
+    /* @__PURE__ */ jsx38(StyledLabel3, { children: label }),
+    /* @__PURE__ */ jsxs16(
       StyledRoot4,
       {
         value,
@@ -2801,19 +2903,19 @@ var OneTimePassword = ({ label, length, value, errorMessage, onValueChange, ...r
         ...rootProps,
         style: { "--otp-length": length },
         children: [
-          Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx37(StyledInput, {}, index)),
-          /* @__PURE__ */ jsx37(OneTimePasswordField2.HiddenInput, {})
+          Array.from({ length }).map((_, index) => /* @__PURE__ */ jsx38(StyledInput, {}, index)),
+          /* @__PURE__ */ jsx38(OneTimePasswordField2.HiddenInput, {})
         ]
       }
     ),
-    errorMessage && /* @__PURE__ */ jsx37(Span7, { children: errorMessage })
+    errorMessage && /* @__PURE__ */ jsx38(Span7, { children: errorMessage })
   ] }) });
 };
 OneTimePassword.displayName = "OneTimePasswordInput";
 
 // src/components/Toast/index.tsx
 import * as ToastPrimitive2 from "@radix-ui/react-toast";
-import * as React3 from "react";
+import * as React4 from "react";
 
 // src/components/Toast/styles.ts
 import * as ToastPrimitive from "@radix-ui/react-toast";
@@ -2976,11 +3078,11 @@ var toast = {
 };
 
 // src/components/Toast/index.tsx
-import { jsx as jsx38, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
 var Toast = () => {
-  const [messages, setMessages] = React3.useState([]);
-  const [paused, setPaused] = React3.useState(false);
-  React3.useEffect(() => {
+  const [messages, setMessages] = React4.useState([]);
+  const [paused, setPaused] = React4.useState(false);
+  React4.useEffect(() => {
     const handleNewToast = (msg) => {
       setMessages((prev) => [...prev, msg]);
     };
@@ -2992,8 +3094,8 @@ var Toast = () => {
   const removeToast = (id) => {
     setMessages((prev) => prev.filter((msg) => msg.id !== id));
   };
-  return /* @__PURE__ */ jsxs16(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
-    messages.map((message) => /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(ToastPrimitive2.Provider, { swipeDirection: "right", children: [
+    messages.map((message) => /* @__PURE__ */ jsxs17(
       ToastRoot,
       {
         open: true,
@@ -3006,11 +3108,11 @@ var Toast = () => {
         onPause: () => setPaused(true),
         onResume: () => setPaused(false),
         children: [
-          /* @__PURE__ */ jsxs16(ToastContent, { children: [
-            /* @__PURE__ */ jsx38(ToastTitle, { children: message.title }),
-            message.description && /* @__PURE__ */ jsx38(ToastDescription, { children: message.description })
+          /* @__PURE__ */ jsxs17(ToastContent, { children: [
+            /* @__PURE__ */ jsx39(ToastTitle, { children: message.title }),
+            message.description && /* @__PURE__ */ jsx39(ToastDescription, { children: message.description })
           ] }),
-          /* @__PURE__ */ jsx38(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ jsx38(
+          /* @__PURE__ */ jsx39(ToastAction, { altText: "Fechar", asChild: true, children: /* @__PURE__ */ jsx39(
             "button",
             {
               style: {
@@ -3020,15 +3122,15 @@ var Toast = () => {
                 alignItems: "center"
               },
               onClick: () => removeToast(message.id),
-              children: /* @__PURE__ */ jsx38(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
+              children: /* @__PURE__ */ jsx39(Icon, { name: "Closed", size: 16, height: 14, width: 14 })
             }
           ) }),
-          /* @__PURE__ */ jsx38(ToastProgress, { paused, variant: message.variant })
+          /* @__PURE__ */ jsx39(ToastProgress, { paused, variant: message.variant })
         ]
       },
       message.id
     )),
-    /* @__PURE__ */ jsx38(ToastViewport, {})
+    /* @__PURE__ */ jsx39(ToastViewport, {})
   ] });
 };
 
@@ -3264,22 +3366,22 @@ var StepLabel = styled("span", {
 });
 
 // src/components/MultiStep/index.tsx
-import { jsx as jsx39, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
 var MultiStep = ({
   steps,
   currentStep,
   orientation = "horizontal",
   variant
 }) => {
-  return /* @__PURE__ */ jsx39(
+  return /* @__PURE__ */ jsx40(
     Wrapper5,
     {
       orientation,
       children: steps.map((step, index) => {
         const isFirst = index === 0;
         const isLast = index === steps.length - 1;
-        return /* @__PURE__ */ jsxs17(StepItem, { orientation, children: [
-          /* @__PURE__ */ jsx39(
+        return /* @__PURE__ */ jsxs18(StepItem, { orientation, children: [
+          /* @__PURE__ */ jsx40(
             StepCircle,
             {
               orientation,
@@ -3290,7 +3392,7 @@ var MultiStep = ({
               children: index + 1
             }
           ),
-          /* @__PURE__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             StepLabel,
             {
               orientation,
@@ -3306,7 +3408,7 @@ var MultiStep = ({
 MultiStep.displayName = "MultiStep";
 
 // src/components/Carousel/index.tsx
-import { useState as useState8, Children as Children3, cloneElement as cloneElement2 } from "react";
+import { useState as useState8, Children as Children4, cloneElement as cloneElement2 } from "react";
 
 // src/components/Carousel/styles.ts
 var CarouselContainer = styled("div", {
@@ -3412,10 +3514,10 @@ var CarouselItemContainer = styled("div", {
 });
 
 // src/components/Carousel/index.tsx
-import { jsx as jsx40, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs19 } from "react/jsx-runtime";
 var SWIPE_THRESHOLD = 50;
 var Carousel = ({ title, variant, children }) => {
-  const items = Children3.toArray(children);
+  const items = Children4.toArray(children);
   const [activeIndex, setActiveIndex] = useState8(0);
   const [touchStartX, setTouchStartX] = useState8(null);
   const [touchEndX, setTouchEndX] = useState8(null);
@@ -3446,18 +3548,18 @@ var Carousel = ({ title, variant, children }) => {
     setTouchStartX(null);
     setTouchEndX(null);
   };
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     CarouselContainer,
     {
       role: "region",
       "aria-roledescription": "carousel",
       "aria-label": "Carousel Component",
       children: [
-        /* @__PURE__ */ jsxs18(Wrapper6, { variant, children: [
-          /* @__PURE__ */ jsxs18(CarouselHeader, { children: [
-            /* @__PURE__ */ jsx40(Title2, { children: title }),
-            /* @__PURE__ */ jsxs18(Navigation, { children: [
-              /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsxs19(Wrapper6, { variant, children: [
+          /* @__PURE__ */ jsxs19(CarouselHeader, { children: [
+            /* @__PURE__ */ jsx41(Title2, { children: title }),
+            /* @__PURE__ */ jsxs19(Navigation, { children: [
+              /* @__PURE__ */ jsx41(
                 Button,
                 {
                   size: "sm",
@@ -3465,10 +3567,10 @@ var Carousel = ({ title, variant, children }) => {
                   "aria-label": "Previous Slide",
                   onClick: prev,
                   tabIndex: 0,
-                  children: /* @__PURE__ */ jsx40(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
+                  children: /* @__PURE__ */ jsx41(Icon, { name: "TriangleLeft", size: 16, color: variant === "purple" ? "white" : "black" })
                 }
               ),
-              /* @__PURE__ */ jsx40(
+              /* @__PURE__ */ jsx41(
                 Button,
                 {
                   size: "sm",
@@ -3476,15 +3578,15 @@ var Carousel = ({ title, variant, children }) => {
                   "aria-label": "Previous Slide",
                   onClick: next,
                   tabIndex: 0,
-                  children: /* @__PURE__ */ jsx40(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
+                  children: /* @__PURE__ */ jsx41(Icon, { name: "TriangleRight", size: 16, color: variant === "purple" ? "white" : "black" })
                 }
               )
             ] })
           ] }),
-          /* @__PURE__ */ jsx40(Spacing, { size: "xs" }),
-          /* @__PURE__ */ jsx40(Hr, { variant }),
-          /* @__PURE__ */ jsx40(Spacing, { size: "xs" }),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx41(Spacing, { size: "xs" }),
+          /* @__PURE__ */ jsx41(Hr, { variant }),
+          /* @__PURE__ */ jsx41(Spacing, { size: "xs" }),
+          /* @__PURE__ */ jsx41(
             CarouselContent,
             {
               onTouchStart,
@@ -3501,8 +3603,8 @@ var Carousel = ({ title, variant, children }) => {
             }
           )
         ] }),
-        /* @__PURE__ */ jsx40(Spacing, { size: "md" }),
-        /* @__PURE__ */ jsx40(DotsContainer, { children: /* @__PURE__ */ jsx40(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ jsx40(
+        /* @__PURE__ */ jsx41(Spacing, { size: "md" }),
+        /* @__PURE__ */ jsx41(DotsContainer, { children: /* @__PURE__ */ jsx41(Dots2, { role: "tablist", "aria-label": "Carousel Pagination", children: items.map((_, idx) => /* @__PURE__ */ jsx41(
           DotButton,
           {
             active: idx === activeIndex,
@@ -3518,12 +3620,12 @@ var Carousel = ({ title, variant, children }) => {
     }
   );
 };
-var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ jsx40(CarouselItemContainer, { ...props, style: { ...style }, children });
+var CarouselItem = ({ children, style, ...props }) => /* @__PURE__ */ jsx41(CarouselItemContainer, { ...props, style: { ...style }, children });
 Carousel.Item = CarouselItem;
 
 // src/components/PasswordInput.tsx
 import { forwardRef as forwardRef7, useImperativeHandle, useRef as useRef6, useState as useState9 } from "react";
-import { jsx as jsx41 } from "react/jsx-runtime";
+import { jsx as jsx42 } from "react/jsx-runtime";
 var ToggleButton = styled("button", {
   all: "unset",
   cursor: "pointer",
@@ -3552,7 +3654,7 @@ var PasswordInput = forwardRef7(
         }
       }, 0);
     };
-    return /* @__PURE__ */ jsx41(
+    return /* @__PURE__ */ jsx42(
       Input2,
       {
         ...props,
@@ -3560,14 +3662,14 @@ var PasswordInput = forwardRef7(
         type: visible ? "text" : "password",
         value,
         onChange,
-        suffix: /* @__PURE__ */ jsx41(
+        suffix: /* @__PURE__ */ jsx42(
           ToggleButton,
           {
             type: "button",
             onClick: handleToggleVisibility,
             onMouseDown: (e) => e.preventDefault(),
             "aria-label": visible ? "Ocultar senha" : "Mostrar senha",
-            children: visible ? /* @__PURE__ */ jsx41(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ jsx41(Icon, { name: "EyeOpen", size: 16, color: "black" })
+            children: visible ? /* @__PURE__ */ jsx42(Icon, { name: "EyeClosed", size: 16, color: "black" }) : /* @__PURE__ */ jsx42(Icon, { name: "EyeOpen", size: 16, color: "black" })
           }
         )
       }
@@ -3575,7 +3677,108 @@ var PasswordInput = forwardRef7(
   }
 );
 PasswordInput.displayName = "PasswordInput";
+
+// src/components/Accordion/index.tsx
+import * as RadixAccordion from "@radix-ui/react-accordion";
+import React6 from "react";
+
+// src/components/Accordion/styles.ts
+import * as Accordion from "@radix-ui/react-accordion";
+var AccordionContainer = styled(Accordion.Root, {
+  borderRadius: "$md",
+  width: "100%",
+  backgroundColor: "$white",
+  boxShadow: "0 1px 2px $colors$gray_mid",
+  border: "2px solid $colors$gray_mid"
+});
+var AccordionItem = styled(Accordion.Item, {
+  overflow: "hidden",
+  marginTop: "1px",
+  "&:first-child": {
+    marginTop: 0,
+    borderTopLeftRadius: "$md",
+    borderTopRightRadius: "$md"
+  },
+  "&:last-child": {
+    borderBottomLeftRadius: "$md",
+    borderBottomRightRadius: "$md"
+  }
+});
+var AccordionHeader = styled(Accordion.Header, {
+  display: "flex"
+});
+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",
+  fontWeight: "$bold",
+  width: "100%",
+  "&:hover": {
+    cursor: "pointer"
+  },
+  "&:focus": {
+    cursor: "pointer",
+    outline: "none"
+  }
+});
+var AccordionChevron = styled(Icon, {
+  color: "$ignite_light",
+  transition: "transform 300ms cubic-bezier(0.87, 0, 0.13, 1)",
+  "[data-state=open] &": {
+    transform: "rotate(180deg)"
+  }
+});
+var AccordionContent = styled(Accordion.Content, {
+  overflow: "hidden",
+  fontSize: "$md",
+  color: "$black",
+  borderTop: "1px solid $colors$gray_mid",
+  '&[data-state="open"]': {
+    animation: "slideDown 300ms cubic-bezier(0.87, 0, 0.13, 1)"
+  },
+  '&[data-state="closed"]': {
+    animation: "slideUp 300ms cubic-bezier(0.87, 0, 0.13, 1)"
+  },
+  "> div": {
+    padding: "$5"
+  }
+});
+var TriggerContent = styled("div", {
+  display: "flex",
+  alignItems: "center",
+  gap: "$2"
+});
+var OptionsButton = styled(Button, {
+  marginRight: "$1"
+});
+
+// src/components/Accordion/index.tsx
+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(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.Content, { asChild: true, children: /* @__PURE__ */ jsx43(AccordionContent, { children }) })
+    ] }) });
+  }
+);
+Accordion2.displayName = "Accordion";
 export {
+  Accordion2 as Accordion,
   Avatar2 as Avatar,
   Box,
   Button,
@@ -3583,6 +3786,9 @@ export {
   Carousel,
   Checkbox2 as Checkbox,
   Datepicker,
+  Dropdown,
+  DropdownItem,
+  DropdownSeparator,
   Heading,
   Hr,
   Icon,

package/package.json

@@ -3,7 +3,7 @@
 	"description": "Design System da Clikpalm",
 	"author": "Enisson Shilo",
 	"license": "MIT",
-	"version": "1.1.2",
+	"version": "1.2.0",
 	"repository": {
 		"type": "git",
 		"url": "git+https://github.com/clickpalm/clickpalm-designsystem-lib.git"
@@ -26,9 +26,11 @@
 		"dev": "tsup src/index.tsx --format esm,cjs --dts --external react --watch"
 	},
 	"dependencies": {
+		"@radix-ui/react-accordion": "^1.2.11",
 		"@radix-ui/react-avatar": "^1.0.0",
 		"@radix-ui/react-checkbox": "^1.0.0",
 		"@radix-ui/react-dialog": "^1.1.14",
+		"@radix-ui/react-dropdown-menu": "^2.1.15",
 		"@radix-ui/react-icons": "^1.3.2",
 		"@radix-ui/react-one-time-password-field": "^0.1.7",
 		"@radix-ui/react-password-toggle-field": "^0.1.2",