feat: add 'fit' width variant to Popover component (#1864)

* feat: add 'fit' width variant to Popover component

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

* chore: add changeset for popover fit width variant

Co-Authored-By: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

---------

Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com>

Author: cpurps22

.changeset/popover-fit-width.md

@@ -0,0 +1,5 @@
+---
+'@launchpad-ui/components': minor
+---
+
+Add `fit` width variant to Popover component that sets `width: fit-content` with no min-width constraint

packages/components/src/Popover.tsx

@@ -30,6 +30,7 @@ const popoverStyles = cva(styles.popover, {
 	variants: {
 		width: {
 			default: styles.default,
+			fit: styles.fit,
 			trigger: styles.trigger,
 		},
 	},

packages/components/src/styles/Popover.module.css

@@ -132,6 +132,10 @@
 	}
 }
 
+.fit {
+	width: fit-content;
+}
+
 .trigger {
 	&[data-trigger] {
 		width: var(--trigger-width);

packages/components/stories/Popover.stories.tsx

@@ -91,6 +91,20 @@ export const WithHeading: Story = {
 	play,
 };
 
+export const FitWidth: Story = {
+	render: (args) => {
+		return (
+			<DialogTrigger>
+				<Button>Trigger</Button>
+				<Popover width="fit" {...args}>
+					<Dialog>Message</Dialog>
+				</Popover>
+			</DialogTrigger>
+		);
+	},
+	play,
+};
+
 export const CustomTrigger: Story = {
 	render: (args) => {
 		return (