Merge branch 'main' into chore/update-dependencies

Author: Cahllagerfeld

CHANGELOG.md

@@ -1,5 +1,11 @@
 # @zenml-io/react-component-library
 
+## 0.21.0
+
+### Minor Changes
+
+- 669c43a: add popover component
+
 ## 0.20.0
 
 ### Minor Changes

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@zenml-io/react-component-library",
-	"version": "0.20.0",
+	"version": "0.21.0",
 	"description": "React Component Library from Zenml.io",
 	"keywords": [
 		"ZenML",
@@ -60,6 +60,7 @@
 		"@radix-ui/react-dialog": "^1.1.6",
 		"@radix-ui/react-dropdown-menu": "^2.1.6",
 		"@radix-ui/react-hover-card": "^1.1.6",
+		"@radix-ui/react-popover": "^1.1.6",
 		"@radix-ui/react-progress": "^1.1.2",
 		"@radix-ui/react-radio-group": "^1.2.3",
 		"@radix-ui/react-scroll-area": "^1.2.3",

pnpm-lock.yaml

@@ -0,0 +1,34 @@
+import { Meta } from "@storybook/react";
+import React from "react";
+import { Popover, PopoverContent, PopoverTrigger } from "./index";
+import { Button } from "../Button";
+import { StoryObj } from "@storybook/react";
+
+const meta = {
+	title: "Elements/Popover",
+	component: Popover,
+	argTypes: {},
+	parameters: {
+		layout: "centered"
+	},
+
+	tags: ["autodocs"]
+} satisfies Meta<typeof Popover>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const DefaultVariant: Story = {
+	name: "Default",
+	render: () => (
+		<Popover>
+			<PopoverTrigger asChild>
+				<Button>Open Popover</Button>
+			</PopoverTrigger>
+			<PopoverContent className="w-[250px]">
+				<div>Popover Content</div>
+			</PopoverContent>
+		</Popover>
+	)
+};

src/components/Popover/Popover.stories.tsx

@@ -0,0 +1,28 @@
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React from "react";
+import { cn } from "../../utilities";
+
+const Popover = PopoverPrimitive.Root;
+
+const PopoverTrigger = PopoverPrimitive.Trigger;
+
+const PopoverContent = React.forwardRef<
+	React.ElementRef<typeof PopoverPrimitive.Content>,
+	React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>
+>(({ className, align = "center", sideOffset = 4, ...props }, ref) => (
+	<PopoverPrimitive.Portal>
+		<PopoverPrimitive.Content
+			ref={ref}
+			align={align}
+			sideOffset={sideOffset}
+			className={cn(
+				"z-50 rounded-md border border-theme-border-minimal bg-theme-surface-primary p-2 shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+				className
+			)}
+			{...props}
+		/>
+	</PopoverPrimitive.Portal>
+));
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+export { Popover, PopoverContent, PopoverTrigger };

src/components/Popover/Popover.tsx

@@ -0,0 +1 @@
+export * from "./Popover";

src/components/Popover/index.tsx

@@ -18,3 +18,4 @@ export * from "./ScrollArea";
 export * from "./HoverCard";
 export * from "./RadioGroup";
 export * from "./Command";
+export * from "./Popover";