@crystallize/design-system 1.11.3 → 1.11.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @crystallize/design-system
 
+## 1.11.4
+
+### Patch Changes
+
+- 1bb27da: Add portal component to the ActionMenu and data-testid property
+
 ## 1.11.3
 
 ### Patch Changes

package/dist/index.css

@@ -640,6 +640,9 @@ button {
 .h-full {
   height: 100%;
 }
+.w-1\/2 {
+  width: 50%;
+}
 .w-4 {
   width: 1rem;
 }
@@ -878,6 +881,9 @@ button {
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
+.pt-14 {
+  padding-top: 3.5rem;
+}
 .text-center {
   text-align: center;
 }
@@ -1199,8 +1205,6 @@ button {
 /* src/action-menu/action-menu.css */
 .c-action-menu {
   display: flex;
-  height: 2rem;
-  width: 2rem;
   flex-shrink: 0;
   --tw-rotate: 0deg;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -1212,7 +1216,6 @@ button {
   border-radius: 0.375rem;
   border-style: none;
   background-color: transparent;
-  padding: 0.25rem;
   outline-offset: -1px;
   transition-property:
     color,
@@ -1230,8 +1233,6 @@ button {
   transition-duration: 150ms;
 }
 .c-action-menu-dot {
-  height: 4px;
-  width: 4px;
   border-radius: 9999px;
   background-color: rgb(var(--c-color-gray));
 }
@@ -1261,15 +1262,33 @@ button {
   --tw-bg-opacity: 1;
   background-color: rgb(var(--c-color-purple-100-800) / var(--tw-bg-opacity));
 }
+.c-action-menu-xs {
+  height: 1.5rem;
+  width: 1.5rem;
+  padding: 0.125rem;
+}
+.c-action-menu-xs .c-action-menu-dot {
+  height: 0.125rem;
+  width: 0.125rem;
+}
+.c-action-menu-sm {
+  height: 2rem;
+  width: 2rem;
+  padding: 0.25rem;
+}
+.c-action-menu-sm .c-action-menu-dot {
+  height: 0.25rem;
+  width: 0.25rem;
+}
 .c-action-menu-item {
   display: flex;
   cursor: pointer;
   align-items: center;
   gap: 0.5rem;
-  padding-top: 0.625rem;
-  padding-bottom: 0.625rem;
   padding-left: 1.25rem;
   padding-right: 1.25rem;
+  padding-top: 0.625rem;
+  padding-bottom: 0.625rem;
   font-family:
     Roboto,
     ui-sans-serif,
@@ -1400,12 +1419,12 @@ button {
   outline-offset: 2px;
 }
 .c-dropdown-menu-item:first-child {
-  border-top-right-radius: 0.25rem;
   border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
 }
 .c-dropdown-menu-item:last-child {
-  border-bottom-right-radius: 0.25rem;
   border-bottom-left-radius: 0.25rem;
+  border-bottom-right-radius: 0.25rem;
 }
 
 /* src/avatar/avatar.css */

package/dist/index.d.ts

@@ -19,11 +19,15 @@ type ItemProps = HTMLAttributes<HTMLLIElement> & {
 };
 declare function Item({ children, className, onSelect }: ItemProps): JSX.Element;
 
-type ActionMenuProps = {
+type ButtonStylesProps$1 = VariantProps<typeof buttonStyles$2>;
+declare const buttonStyles$2: (props?: ({
+    size?: "xs" | "sm" | null | undefined;
+} & class_variance_authority_dist_types.ClassProp) | undefined) => string;
+type ActionMenuProps = ButtonStylesProps$1 & {
     children: ReactNode;
     tabIndex?: number;
 };
-declare function ActionMenu({ children, tabIndex }: ActionMenuProps): JSX.Element;
+declare function ActionMenu({ children, tabIndex, size }: ActionMenuProps): JSX.Element;
 declare namespace ActionMenu {
     var Item: typeof Item;
     var Separator: typeof Separator;

package/dist/index.js

@@ -251,6 +251,9 @@ function Card({ children, className, variant, ...delegated }) {
 // src/card/index.ts
 var cardToken = "c-card";
 
+// src/action-menu/action-menu.tsx
+var import_class_variance_authority7 = require("class-variance-authority");
+
 // src/dropdown-menu/index.ts
 var import_react_dropdown_menu = require("@radix-ui/react-dropdown-menu");
 
@@ -282,7 +285,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 function DropdownMenuRoot({
   children,
   content,
-  alignContent = "start",
+  alignContent = "center",
   disabled,
   onOpenChange,
   ...delegated
@@ -295,12 +298,14 @@ function DropdownMenuRoot({
         asChild: true,
         children
       }),
-      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Content, {
-        align: alignContent,
-        sideOffset: 5,
-        className: "c-dropdown-menu-content",
-        ...delegated,
-        children: content
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Portal, {
+        children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(DropdownMenuPrimitive3.Content, {
+          align: alignContent,
+          sideOffset: 5,
+          className: "c-dropdown-menu-content",
+          ...delegated,
+          children: content
+        })
       })
     ]
   });
@@ -338,15 +343,27 @@ function Separator2({ className }) {
 
 // src/action-menu/action-menu.tsx
 var import_jsx_runtime9 = require("react/jsx-runtime");
-function ActionMenu({ children, tabIndex }) {
+var buttonStyles2 = (0, import_class_variance_authority7.cva)("c-action-menu", {
+  variants: {
+    size: {
+      xs: "c-action-menu-xs",
+      sm: "c-action-menu-sm"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+function ActionMenu({ children, tabIndex, size }) {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DropdownMenu.Root, {
     content: children,
     alignContent: "center",
     children: /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("button", {
+      "aria-label": "more options",
+      className: buttonStyles2({ size }),
+      "data-testid": "action-menu-button",
       tabIndex,
       type: "button",
-      className: "c-action-menu",
-      "aria-label": "more options",
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", {
           className: "sr-only",
@@ -370,7 +387,7 @@ ActionMenu.Separator = Separator2;
 
 // src/avatar/avatar.tsx
 var import_react3 = require("react");
-var import_class_variance_authority7 = require("class-variance-authority");
+var import_class_variance_authority8 = require("class-variance-authority");
 
 // src/avatar/get-initials.ts
 var getInitials = (name) => {
@@ -381,7 +398,7 @@ var getInitials = (name) => {
 
 // src/avatar/avatar.tsx
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var avatarClassName = (0, import_class_variance_authority7.cva)(["c-avatar"], {
+var avatarClassName = (0, import_class_variance_authority8.cva)(["c-avatar"], {
   variants: {
     size: {
       md: "c-avatar-md",
@@ -443,7 +460,7 @@ var destroyFns = [];
 
 // src/dialog/dialog.tsx
 var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"));
-var import_class_variance_authority8 = require("class-variance-authority");
+var import_class_variance_authority9 = require("class-variance-authority");
 
 // src/iconography/add.tsx
 var import_react5 = require("react");
@@ -2972,7 +2989,7 @@ var IconMap = {
   info: Icon.Info,
   warning: Icon.Warning
 };
-var dialogContentStyles = (0, import_class_variance_authority8.cva)("c-dialog", {
+var dialogContentStyles = (0, import_class_variance_authority9.cva)("c-dialog", {
   variants: {
     withIcon: {
       true: "c-dialog-with-icon"
@@ -3022,7 +3039,7 @@ function DialogContent({ children, closable = true, type, className, container,
 }
 function DialogTitle({ className, ...delegated }) {
   return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(DialogPrimitive.Title, {
-    className: (0, import_class_variance_authority8.cx)("c-dialog-title", className),
+    className: (0, import_class_variance_authority9.cx)("c-dialog-title", className),
     ...delegated
   });
 }
@@ -3263,9 +3280,9 @@ function destroyAll() {
 
 // src/icon-button/icon-button.tsx
 var import_react54 = require("react");
-var import_class_variance_authority9 = require("class-variance-authority");
+var import_class_variance_authority10 = require("class-variance-authority");
 var import_jsx_runtime64 = require("react/jsx-runtime");
-var buttonStyles2 = (0, import_class_variance_authority9.cva)(["c-icon-button"], {
+var buttonStyles3 = (0, import_class_variance_authority10.cva)(["c-icon-button"], {
   variants: {
     variant: {
       default: "",
@@ -3289,7 +3306,7 @@ var IconButton = (0, import_react54.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("button", {
       ref,
       type,
-      className: buttonStyles2({ size, variant, className }),
+      className: buttonStyles3({ size, variant, className }),
       ...delegated,
       children
     });
@@ -3299,9 +3316,9 @@ IconButton.displayName = "Button";
 
 // src/inline-radio/inline-radio.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"));
-var import_class_variance_authority10 = require("class-variance-authority");
+var import_class_variance_authority11 = require("class-variance-authority");
 var import_jsx_runtime65 = require("react/jsx-runtime");
-var inlineRadioGroupStyles = (0, import_class_variance_authority10.cva)("c-inline-radio-group", {
+var inlineRadioGroupStyles = (0, import_class_variance_authority11.cva)("c-inline-radio-group", {
   variants: {
     size: {
       xs: "c-inline-radio-group-xs",
@@ -3323,7 +3340,7 @@ function InlineRadioGroup({ size, className, ...delegated }) {
 function InlineRadioItem({ children, className, ...delegated }) {
   return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RadioGroupPrimitive.Item, {
     ...delegated,
-    className: (0, import_class_variance_authority10.cx)("c-inline-radio", className),
+    className: (0, import_class_variance_authority11.cx)("c-inline-radio", className),
     children: /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(RadioGroupPrimitive.Indicator, {
       forceMount: true,
       children
@@ -3337,13 +3354,13 @@ var InlineRadio = {
 
 // src/input-with-label/input-with-label.tsx
 var import_react58 = require("react");
-var import_class_variance_authority13 = require("class-variance-authority");
+var import_class_variance_authority14 = require("class-variance-authority");
 
 // src/input/input.tsx
-var import_class_variance_authority11 = require("class-variance-authority");
+var import_class_variance_authority12 = require("class-variance-authority");
 var import_react55 = require("react");
 var import_jsx_runtime66 = require("react/jsx-runtime");
-var inputStyles = (0, import_class_variance_authority11.cva)(["c-input"], {
+var inputStyles = (0, import_class_variance_authority12.cva)(["c-input"], {
   variants: {},
   defaultVariants: {}
 });
@@ -3359,12 +3376,12 @@ Input.displayName = "Input";
 
 // src/label/label.tsx
 var import_react56 = require("react");
-var import_class_variance_authority12 = require("class-variance-authority");
+var import_class_variance_authority13 = require("class-variance-authority");
 var import_jsx_runtime67 = require("react/jsx-runtime");
 var Label2 = (0, import_react56.forwardRef)(({ className, ...delegated }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("label", {
     ref,
-    className: (0, import_class_variance_authority12.cx)("c-label", className),
+    className: (0, import_class_variance_authority13.cx)("c-label", className),
     ...delegated
   });
 });
@@ -3393,7 +3410,7 @@ var Triangle = (0, import_react57.forwardRef)((delegated, ref) => {
 
 // src/input-with-label/input-with-label.tsx
 var import_jsx_runtime69 = require("react/jsx-runtime");
-var inputWithLabelStyles = (0, import_class_variance_authority13.cva)(["c-input-with-label"], {
+var inputWithLabelStyles = (0, import_class_variance_authority14.cva)(["c-input-with-label"], {
   variants: {
     variant: {
       default: "",
@@ -3420,7 +3437,7 @@ var InputWithLabel = (0, import_react58.forwardRef)(
             className: "c-input-with-label-input-wrap",
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Input, {
-                className: (0, import_class_variance_authority13.cx)("c-input-with-label-input", className),
+                className: (0, import_class_variance_authority14.cx)("c-input-with-label-input", className),
                 ref,
                 id,
                 ...delegated
@@ -3441,11 +3458,11 @@ InputWithLabel.displayName = "InputWithLabel";
 
 // src/progress/progress.tsx
 var ProgressPrimitives = __toESM(require("@radix-ui/react-progress"));
-var import_class_variance_authority14 = require("class-variance-authority");
+var import_class_variance_authority15 = require("class-variance-authority");
 var import_jsx_runtime70 = require("react/jsx-runtime");
 function Progress({ className, value }) {
   return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ProgressPrimitives.Root, {
-    className: (0, import_class_variance_authority14.cx)(className, "c-progress-root"),
+    className: (0, import_class_variance_authority15.cx)(className, "c-progress-root"),
     value,
     children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ProgressPrimitives.Indicator, {
       className: "c-progress-indicator",
@@ -3494,9 +3511,9 @@ SelectItem.displayName = "SelectItem";
 // src/select/select-root.tsx
 var import_react60 = require("react");
 var SelectPrimitives2 = __toESM(require("@radix-ui/react-select"));
-var import_class_variance_authority15 = require("class-variance-authority");
+var import_class_variance_authority16 = require("class-variance-authority");
 var import_jsx_runtime73 = require("react/jsx-runtime");
-var selectTriggerStyles = (0, import_class_variance_authority15.cva)("c-select-trigger", {
+var selectTriggerStyles = (0, import_class_variance_authority16.cva)("c-select-trigger", {
   variants: {
     size: {
       xs: "c-select-trigger-xs",
@@ -3556,12 +3573,12 @@ var Select = {
 
 // src/slider/slider.tsx
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"));
-var import_class_variance_authority16 = require("class-variance-authority");
+var import_class_variance_authority17 = require("class-variance-authority");
 var import_react61 = require("react");
 var import_jsx_runtime74 = require("react/jsx-runtime");
 var Slider = (0, import_react61.forwardRef)(({ className, transparentRange, ...delegated }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(SliderPrimitive.Root, {
-    className: (0, import_class_variance_authority16.cx)("c-slider-root", className),
+    className: (0, import_class_variance_authority17.cx)("c-slider-root", className),
     ref,
     ...delegated,
     children: [
@@ -3579,9 +3596,9 @@ var Slider = (0, import_react61.forwardRef)(({ className, transparentRange, ...d
 });
 
 // src/tag/tag.tsx
-var import_class_variance_authority17 = require("class-variance-authority");
+var import_class_variance_authority18 = require("class-variance-authority");
 var import_jsx_runtime75 = require("react/jsx-runtime");
-var tagStyles = (0, import_class_variance_authority17.cva)("c-tag", {
+var tagStyles = (0, import_class_variance_authority18.cva)("c-tag", {
   variants: {
     variant: {
       default: "",

package/dist/index.mjs

@@ -191,8 +191,11 @@ function Card({ children, className, variant, ...delegated }) {
 // src/card/index.ts
 var cardToken = "c-card";
 
+// src/action-menu/action-menu.tsx
+import { cva as cva3 } from "class-variance-authority";
+
 // src/dropdown-menu/index.ts
-import { Portal, Separator } from "@radix-ui/react-dropdown-menu";
+import { Portal as Portal2, Separator } from "@radix-ui/react-dropdown-menu";
 
 // src/dropdown-menu/dropdown-menu-item.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
@@ -222,7 +225,7 @@ import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function DropdownMenuRoot({
   children,
   content,
-  alignContent = "start",
+  alignContent = "center",
   disabled,
   onOpenChange,
   ...delegated
@@ -235,12 +238,14 @@ function DropdownMenuRoot({
         asChild: true,
         children
       }),
-      /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Content, {
-        align: alignContent,
-        sideOffset: 5,
-        className: "c-dropdown-menu-content",
-        ...delegated,
-        children: content
+      /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Portal, {
+        children: /* @__PURE__ */ jsx6(DropdownMenuPrimitive3.Content, {
+          align: alignContent,
+          sideOffset: 5,
+          className: "c-dropdown-menu-content",
+          ...delegated,
+          children: content
+        })
       })
     ]
   });
@@ -252,7 +257,7 @@ var DropdownMenu = {
   Item: DropdownMenuItem,
   Label: DropdownMenuLabel,
   Separator,
-  Portal
+  Portal: Portal2
 };
 
 // src/action-menu/action-item.tsx
@@ -278,15 +283,27 @@ function Separator2({ className }) {
 
 // src/action-menu/action-menu.tsx
 import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
-function ActionMenu({ children, tabIndex }) {
+var buttonStyles2 = cva3("c-action-menu", {
+  variants: {
+    size: {
+      xs: "c-action-menu-xs",
+      sm: "c-action-menu-sm"
+    }
+  },
+  defaultVariants: {
+    size: "sm"
+  }
+});
+function ActionMenu({ children, tabIndex, size }) {
   return /* @__PURE__ */ jsx9(DropdownMenu.Root, {
     content: children,
     alignContent: "center",
     children: /* @__PURE__ */ jsxs4("button", {
+      "aria-label": "more options",
+      className: buttonStyles2({ size }),
+      "data-testid": "action-menu-button",
       tabIndex,
       type: "button",
-      className: "c-action-menu",
-      "aria-label": "more options",
       children: [
         /* @__PURE__ */ jsx9("span", {
           className: "sr-only",
@@ -310,7 +327,7 @@ ActionMenu.Separator = Separator2;
 
 // src/avatar/avatar.tsx
 import { forwardRef as forwardRef3 } from "react";
-import { cva as cva3 } from "class-variance-authority";
+import { cva as cva4 } from "class-variance-authority";
 
 // src/avatar/get-initials.ts
 var getInitials = (name) => {
@@ -321,7 +338,7 @@ var getInitials = (name) => {
 
 // src/avatar/avatar.tsx
 import { jsx as jsx10 } from "react/jsx-runtime";
-var avatarClassName = cva3(["c-avatar"], {
+var avatarClassName = cva4(["c-avatar"], {
   variants: {
     size: {
       md: "c-avatar-md",
@@ -383,7 +400,7 @@ var destroyFns = [];
 
 // src/dialog/dialog.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
-import { cva as cva4, cx as cx5 } from "class-variance-authority";
+import { cva as cva5, cx as cx5 } from "class-variance-authority";
 
 // src/iconography/add.tsx
 import { forwardRef as forwardRef5 } from "react";
@@ -2912,7 +2929,7 @@ var IconMap = {
   info: Icon.Info,
   warning: Icon.Warning
 };
-var dialogContentStyles = cva4("c-dialog", {
+var dialogContentStyles = cva5("c-dialog", {
   variants: {
     withIcon: {
       true: "c-dialog-with-icon"
@@ -3203,9 +3220,9 @@ function destroyAll() {
 
 // src/icon-button/icon-button.tsx
 import { forwardRef as forwardRef54 } from "react";
-import { cva as cva5 } from "class-variance-authority";
+import { cva as cva6 } from "class-variance-authority";
 import { jsx as jsx64 } from "react/jsx-runtime";
-var buttonStyles2 = cva5(["c-icon-button"], {
+var buttonStyles3 = cva6(["c-icon-button"], {
   variants: {
     variant: {
       default: "",
@@ -3229,7 +3246,7 @@ var IconButton = forwardRef54(
     return /* @__PURE__ */ jsx64("button", {
       ref,
       type,
-      className: buttonStyles2({ size, variant, className }),
+      className: buttonStyles3({ size, variant, className }),
       ...delegated,
       children
     });
@@ -3239,9 +3256,9 @@ IconButton.displayName = "Button";
 
 // src/inline-radio/inline-radio.tsx
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import { cx as cx6, cva as cva6 } from "class-variance-authority";
+import { cx as cx6, cva as cva7 } from "class-variance-authority";
 import { jsx as jsx65 } from "react/jsx-runtime";
-var inlineRadioGroupStyles = cva6("c-inline-radio-group", {
+var inlineRadioGroupStyles = cva7("c-inline-radio-group", {
   variants: {
     size: {
       xs: "c-inline-radio-group-xs",
@@ -3277,13 +3294,13 @@ var InlineRadio = {
 
 // src/input-with-label/input-with-label.tsx
 import { forwardRef as forwardRef58 } from "react";
-import { cva as cva8, cx as cx8 } from "class-variance-authority";
+import { cva as cva9, cx as cx8 } from "class-variance-authority";
 
 // src/input/input.tsx
-import { cva as cva7 } from "class-variance-authority";
+import { cva as cva8 } from "class-variance-authority";
 import { forwardRef as forwardRef55 } from "react";
 import { jsx as jsx66 } from "react/jsx-runtime";
-var inputStyles = cva7(["c-input"], {
+var inputStyles = cva8(["c-input"], {
   variants: {},
   defaultVariants: {}
 });
@@ -3333,7 +3350,7 @@ var Triangle = forwardRef57((delegated, ref) => {
 
 // src/input-with-label/input-with-label.tsx
 import { Fragment, jsx as jsx69, jsxs as jsxs54 } from "react/jsx-runtime";
-var inputWithLabelStyles = cva8(["c-input-with-label"], {
+var inputWithLabelStyles = cva9(["c-input-with-label"], {
   variants: {
     variant: {
       default: "",
@@ -3434,9 +3451,9 @@ SelectItem.displayName = "SelectItem";
 // src/select/select-root.tsx
 import { forwardRef as forwardRef60 } from "react";
 import * as SelectPrimitives2 from "@radix-ui/react-select";
-import { cva as cva9 } from "class-variance-authority";
+import { cva as cva10 } from "class-variance-authority";
 import { jsx as jsx73, jsxs as jsxs56 } from "react/jsx-runtime";
-var selectTriggerStyles = cva9("c-select-trigger", {
+var selectTriggerStyles = cva10("c-select-trigger", {
   variants: {
     size: {
       xs: "c-select-trigger-xs",
@@ -3519,9 +3536,9 @@ var Slider = forwardRef61(({ className, transparentRange, ...delegated }, ref) =
 });
 
 // src/tag/tag.tsx
-import { cva as cva10 } from "class-variance-authority";
+import { cva as cva11 } from "class-variance-authority";
 import { jsx as jsx75 } from "react/jsx-runtime";
-var tagStyles = cva10("c-tag", {
+var tagStyles = cva11("c-tag", {
   variants: {
     variant: {
       default: "",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@crystallize/design-system",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "types": "./dist/index.d.ts",
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
@@ -40,6 +40,7 @@
     "@radix-ui/react-checkbox": "1.0.1",
     "@radix-ui/react-dialog": "1.0.2",
     "@radix-ui/react-dropdown-menu": "2.0.1",
+    "@radix-ui/react-popover": "1.0.0",
     "@radix-ui/react-progress": "^1.0.1",
     "@radix-ui/react-radio-group": "1.1.0",
     "@radix-ui/react-select": "1.1.2",
@@ -88,8 +89,8 @@
     "tailwindcss": "^3.3.0",
     "tsup": "^6.5.0",
     "typescript": "^4.9.4",
-    "vite": "^4.1.1",
-    "vitest": "^0.29.1",
+    "vite": "^4.2.1",
+    "vitest": "^0.30.1",
     "tsconfig": "0.0.0"
   },
   "keywords": [

package/src/action-menu/ActionMenu.stories.tsx

@@ -23,3 +23,15 @@ export const Default: Story = {
     </ActionMenu>
   ),
 };
+
+export const XS: Story = {
+  args: {},
+  render: () => (
+    <ActionMenu size="xs">
+      <ActionMenu.Item onSelect={() => console.warn('Download')}>Download</ActionMenu.Item>
+      <ActionMenu.Item className="danger" onSelect={() => console.warn('Delete')}>
+        Delete
+      </ActionMenu.Item>
+    </ActionMenu>
+  ),
+};

package/src/action-menu/action-menu.css

@@ -1,12 +1,15 @@
 .c-action-menu {
-  @apply flex h-8 w-8 shrink-0 rotate-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent p-1 -outline-offset-1 transition;
+  @apply flex shrink-0 rotate-0 cursor-pointer flex-col items-center justify-center gap-[2px] rounded-md border-none bg-transparent -outline-offset-1 transition;
+
   &-dot {
-    @apply h-[4px] w-[4px] rounded-full bg-gray;
+    @apply rounded-full bg-gray;
   }
+
   &[data-state='open'],
   [aria-expanded='true'] {
     @apply flex-row gap-[3px];
   }
+
   &:focus-visible {
     @apply outline outline-1 outline-inherit;
     outline-color: currentColor;
@@ -21,8 +24,24 @@
   }
 }
 
+.c-action-menu-xs {
+  @apply h-6 w-6 p-0.5;
+
+  .c-action-menu-dot {
+    @apply h-0.5 w-0.5;
+  }
+}
+
+.c-action-menu-sm {
+  @apply h-8 w-8 p-1;
+
+  .c-action-menu-dot {
+    @apply h-1 w-1;
+  }
+}
+
 .c-action-menu-item {
-  @apply flex cursor-pointer items-center gap-2 py-2.5 px-5 font-sans text-sm font-medium text-gray;
+  @apply flex cursor-pointer items-center gap-2 px-5 py-2.5 font-sans text-sm font-medium text-gray;
 
   &:hover {
     @apply bg-gray-50-900;

package/src/action-menu/action-menu.test.tsx

@@ -0,0 +1,53 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { ActionMenu } from './index';
+
+describe('ActionMenu', () => {
+  it('renders correctly', () => {
+    render(
+      <ActionMenu>
+        <ActionMenu.Item onSelect={() => {}}>Delete</ActionMenu.Item>
+      </ActionMenu>,
+    );
+
+    expect(screen.getByLabelText(/more options/i)).toBeInTheDocument();
+  });
+
+  it('opens the menu and selects an option when clicking on an action item', async () => {
+    const onSelectOption = vi.fn();
+    const callbackThatShouldNotBeExecuted = vi.fn();
+    const user = userEvent.setup();
+
+    const touchableProps = { onSelect: onSelectOption, onClick: onSelectOption };
+    const touchablePropsThatShouldNotBeCalled = {
+      onSelect: callbackThatShouldNotBeExecuted,
+      onClick: callbackThatShouldNotBeExecuted,
+    };
+
+    render(
+      <ActionMenu>
+        <ActionMenu.Item {...touchableProps}>Add</ActionMenu.Item>
+        <ActionMenu.Item {...touchablePropsThatShouldNotBeCalled}>Delete</ActionMenu.Item>
+      </ActionMenu>,
+    );
+
+    const triggerButton = screen.getByTestId('action-menu-button') as HTMLButtonElement;
+    await user.click(triggerButton);
+
+    // The user should be able to see the dropdown menu
+    const dropdownMenu = await screen.getByRole('menu');
+    expect(dropdownMenu).toBeInTheDocument();
+
+    // The user should be able to see the list of options
+    const addOption = screen.getByText(/add/i);
+    expect(addOption).toBeInTheDocument();
+
+    // The user can interact with any of the options
+    await user.click(addOption);
+
+    // The following expect is failing
+    expect(onSelectOption).toBeCalledTimes(1);
+    expect(callbackThatShouldNotBeExecuted).toBeCalledTimes(0);
+  });
+});

package/src/action-menu/action-menu.tsx

@@ -1,18 +1,38 @@
 import type { ReactNode } from 'react';
+import { VariantProps, cva } from 'class-variance-authority';
 
 import { DropdownMenu } from '../dropdown-menu';
 import { Item } from './action-item';
 import { Separator } from './action-item-separator';
 
-type ActionMenuProps = {
+type ButtonStylesProps = VariantProps<typeof buttonStyles>;
+const buttonStyles = cva('c-action-menu', {
+  variants: {
+    size: {
+      xs: 'c-action-menu-xs',
+      sm: 'c-action-menu-sm',
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+});
+
+type ActionMenuProps = ButtonStylesProps & {
   children: ReactNode;
   tabIndex?: number;
 };
 
-export function ActionMenu({ children, tabIndex }: ActionMenuProps) {
+export function ActionMenu({ children, tabIndex, size }: ActionMenuProps) {
   return (
     <DropdownMenu.Root content={children} alignContent="center">
-      <button tabIndex={tabIndex} type="button" className="c-action-menu" aria-label="more options">
+      <button
+        aria-label="more options"
+        className={buttonStyles({ size })}
+        data-testid="action-menu-button"
+        tabIndex={tabIndex}
+        type="button"
+      >
         <span className="sr-only">Open more options</span>
         <span className="c-action-menu-dot"></span>
         <span className="c-action-menu-dot"></span>

package/src/button/button.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import { Button } from './index';
+
+describe('Button', () => {
+  it('renders correctly', () => {
+    render(<Button>Hey</Button>);
+
+    expect(screen.getByText(/Hey/i)).toBeInTheDocument();
+  });
+
+  it('fires the onClick event', async () => {
+    const onClick = vi.fn();
+
+    render(<Button onClick={onClick}>Hey</Button>);
+
+    await userEvent.click(screen.getByRole('button'));
+
+    expect(onClick).toBeCalledTimes(1);
+  });
+});

package/src/dropdown-menu/dropdown-menu-root.tsx

@@ -1,7 +1,7 @@
 import type { ReactNode } from 'react';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
 
-type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
+export type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
   children: ReactNode;
   content: ReactNode;
   alignContent?: 'start' | 'center' | 'end';
@@ -12,7 +12,7 @@ type DropdownMenuRootProps = DropdownMenuPrimitive.MenuContentProps & {
 export function DropdownMenuRoot({
   children,
   content,
-  alignContent = 'start',
+  alignContent = 'center',
   disabled,
   onOpenChange,
   ...delegated
@@ -22,14 +22,16 @@ export function DropdownMenuRoot({
       <DropdownMenuPrimitive.Trigger disabled={disabled} asChild>
         {children}
       </DropdownMenuPrimitive.Trigger>
-      <DropdownMenuPrimitive.Content
-        align={alignContent}
-        sideOffset={5}
-        className="c-dropdown-menu-content"
-        {...delegated}
-      >
-        {content}
-      </DropdownMenuPrimitive.Content>
+      <DropdownMenuPrimitive.Portal>
+        <DropdownMenuPrimitive.Content
+          align={alignContent}
+          sideOffset={5}
+          className="c-dropdown-menu-content"
+          {...delegated}
+        >
+          {content}
+        </DropdownMenuPrimitive.Content>
+      </DropdownMenuPrimitive.Portal>
     </DropdownMenuPrimitive.Root>
   );
 }

package/src/dropdown-menu/dropdown-menu.css

@@ -16,5 +16,5 @@
     @apply bg-gray-50-900 outline-none;
   }
 
-  @apply first:rounded-tr first:rounded-tl last:rounded-br last:rounded-bl;
+  @apply first:rounded-tl first:rounded-tr last:rounded-bl last:rounded-br;
 }

package/src/popover/index.ts

@@ -0,0 +1 @@
+export * from './popover';

package/src/popover/popover-close.tsx

@@ -0,0 +1,18 @@
+import type { ReactNode } from 'react';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import { Icon } from '../iconography';
+
+export type PopoverCloseProps = PopoverPrimitive.PopoverCloseProps & {
+  children?: ReactNode;
+};
+
+export function PopoverClose(props: PopoverCloseProps) {
+  const { asChild, children } = props;
+
+  return (
+    <PopoverPrimitive.Close asChild={asChild} className="c-popover-close">
+      {children ?? <Icon.Cancel width={16} height={16} />}
+    </PopoverPrimitive.Close>
+  );
+}

package/src/popover/popover.css

@@ -0,0 +1,11 @@
+.c-popover-content {
+  @apply rounded bg-elevate text-xs text-gray-700-200 shadow focus-visible:outline-none;
+}
+
+.c-popover-close {
+  @apply absolute right-1 top-1 flex cursor-pointer items-center justify-center rounded-full border-0 bg-transparent p-1;
+}
+
+.c-popover-arrow {
+  @apply fill-white;
+}

package/src/popover/popover.stories.tsx

@@ -0,0 +1,48 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { Popover } from '.';
+import { Icon } from '../iconography';
+
+const meta: Meta<typeof Popover> = {
+  title: 'Components/Popover',
+  component: Popover,
+  argTypes: {
+    side: {
+      options: ['top', 'right', 'bottom', 'left'],
+      control: {
+        type: 'select',
+      },
+    },
+    align: {
+      options: ['start', 'center', 'end'],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Popover>;
+
+export const SimpleTemplate: Story = {
+  name: 'Simple Template',
+  render: args => (
+    <div className="flex w-1/2 justify-center pt-14">
+      <Popover {...args} content="Content goes here">
+        <Icon.Customers width={32} height={32} />
+      </Popover>
+    </div>
+  ),
+};
+
+export const WithCustomCloseButton: Story = {
+  name: 'With custom Close button',
+  render: () => (
+    <div className="flex w-1/2 justify-center pt-14">
+      <Popover content="Content goes here" side="left" closeButton={<button>close</button>}>
+        <Icon.Customers width={32} height={32} />
+      </Popover>
+    </div>
+  ),
+};

package/src/popover/popover.tsx

@@ -0,0 +1,45 @@
+import type { ReactNode } from 'react';
+import { cx } from 'class-variance-authority';
+import * as PopoverPrimitive from '@radix-ui/react-popover';
+
+import './popover.css';
+import { PopoverClose } from './popover-close';
+
+type PopoverProps = Pick<PopoverPrimitive.PopoverProps, 'open' | 'onOpenChange'> &
+  Pick<PopoverPrimitive.PortalProps, 'container'> &
+  PopoverPrimitive.PopperContentProps & {
+    children: ReactNode;
+    closeButton?: boolean | JSX.Element;
+    hasArrow?: boolean;
+    content: ReactNode;
+  };
+
+export function Popover({
+  children,
+  closeButton,
+  content,
+  side,
+  open,
+  onOpenChange,
+  className,
+  container,
+  hasArrow = true,
+  ...delegatedContent
+}: PopoverProps) {
+  return (
+    <PopoverPrimitive.Root open={open} onOpenChange={onOpenChange}>
+      <PopoverPrimitive.Trigger asChild>{children}</PopoverPrimitive.Trigger>
+      <PopoverPrimitive.Portal container={container}>
+        <PopoverPrimitive.Content {...delegatedContent} side={side} className={cx('c-popover-content', className)}>
+          {!closeButton ? null : (
+            <PopoverClose asChild={typeof closeButton !== 'boolean'}>
+              {typeof closeButton !== 'boolean' ? closeButton : null}
+            </PopoverClose>
+          )}
+          {hasArrow && <PopoverPrimitive.Arrow className="c-popover-arrow" offset={5} />}
+          {content}
+        </PopoverPrimitive.Content>
+      </PopoverPrimitive.Portal>
+    </PopoverPrimitive.Root>
+  );
+}