@delacour/react-native-ui 0.1.0-alpha.4 → 0.1.0

package/src/components/popover/popover.position.ts

@@ -0,0 +1,286 @@
+/**
+ * Where an anchored panel goes — pure, so the whole matrix is reachable from
+ * `bun test`.
+ *
+ * **A leaf.** Popover, Tooltip and, later, Menu and Select all import this
+ * file, so it imports nothing at all: never `./popover`, never `./index`.
+ */
+
+/** The side of the anchor the panel prefers. A preference: it flips when that side lacks room. */
+export type PopoverPlacement = "top" | "bottom" | "left" | "right";
+
+/** Which edges line up along the cross axis. Logical on `top` / `bottom`: mirrored under RTL. */
+export type PopoverAlign = "start" | "center" | "end";
+
+/** A fixed width, the anchor's width, the content's own, or the safe span. */
+export type PopoverWidth = number | "trigger" | "content-fit" | "full";
+
+/** A view's frame in window coordinates — what `measureInWindow` reports. */
+export type AnchorRect = { x: number; y: number; width: number; height: number };
+
+export type AnchoredSize = { width: number; height: number };
+
+export type AnchoredInsets = { top: number; right: number; bottom: number; left: number };
+
+export type AnchoredBounds = { width: number; height: number; insets: AnchoredInsets };
+
+export type AnchoredInput = {
+	anchor: AnchorRect;
+	content: AnchoredSize;
+	bounds: AnchoredBounds;
+	placement: PopoverPlacement;
+	align: PopoverAlign;
+	/** The gap between anchor and panel along the main axis. */
+	offset: number;
+	/** A nudge along the cross axis, inward from the aligned edge. */
+	alignOffset: number;
+	/** Keep this far from the bounds' safe edges. */
+	collisionPadding: number;
+	/** The panel's corner radius plus the arrow's half-diagonal; the arrow never sits inside it. */
+	arrowInset: number;
+	/** The caller's cap on the panel's height, before the room on the resolved side clamps it. */
+	maxHeight?: number;
+	/** Align start / end are logical on top / bottom placements. */
+	isRTL: boolean;
+};
+
+export type AnchoredPosition = {
+	/** The panel's left edge, in window coordinates. */
+	x: number;
+	/** The panel's top edge, in window coordinates. */
+	y: number;
+	/** The side it ended up on, after any flip. */
+	placement: PopoverPlacement;
+	/** `min(maxHeight, room)` — the room on the resolved side for top / bottom, the safe height for left / right. */
+	maxHeight: number;
+	/** Distance along the panel's facing edge to the arrow's centre — toward the anchor's centre, clamped clear of the corners. */
+	arrowOffset: number;
+};
+
+type SafeRect = { left: number; top: number; right: number; bottom: number };
+
+const OPPOSITE: Record<PopoverPlacement, PopoverPlacement> = {
+	top: "bottom",
+	bottom: "top",
+	left: "right",
+	right: "left",
+};
+
+function isVertical(placement: PopoverPlacement): boolean {
+	return placement === "top" || placement === "bottom";
+}
+
+function safeRect(bounds: AnchoredBounds, padding: number): SafeRect {
+	return {
+		left: bounds.insets.left + padding,
+		top: bounds.insets.top + padding,
+		right: bounds.width - bounds.insets.right - padding,
+		bottom: bounds.height - bounds.insets.bottom - padding,
+	};
+}
+
+/** The space between the anchor (plus offset) and the safe edge on `placement`'s side. */
+function roomOn(placement: PopoverPlacement, anchor: AnchorRect, offset: number, safe: SafeRect): number {
+	switch (placement) {
+		case "bottom":
+			return safe.bottom - (anchor.y + anchor.height + offset);
+		case "top":
+			return anchor.y - offset - safe.top;
+		case "right":
+			return safe.right - (anchor.x + anchor.width + offset);
+		case "left":
+			return anchor.x - offset - safe.left;
+	}
+}
+
+function clamp(value: number, min: number, max: number): number {
+	return Math.min(Math.max(value, min), Math.max(min, max));
+}
+
+/**
+ * The cross-axis start of a panel of `size` along an anchor spanning
+ * `[start, start + length]`, before any shift.
+ *
+ * `start` lines up leading edges, `end` trailing edges. `alignOffset` moves the
+ * panel inward from whichever edge it is aligned to, and `direction` is −1 on
+ * the horizontal axis under RTL, which is what makes start / end logical.
+ */
+function alignAlong(
+	start: number,
+	length: number,
+	size: number,
+	align: PopoverAlign,
+	alignOffset: number,
+	direction: 1 | -1
+): number {
+	const leading = direction === 1 ? start : start + length - size;
+	const trailing = direction === 1 ? start + length - size : start;
+	switch (align) {
+		case "start":
+			return leading + alignOffset * direction;
+		case "end":
+			return trailing - alignOffset * direction;
+		case "center":
+			return start + (length - size) / 2 + alignOffset * direction;
+	}
+}
+
+/**
+ * Places a panel of `content` size against `anchor`.
+ *
+ * 1. Prefer `placement`. Flip to the opposite side **only** when the preferred
+ *    side cannot hold the panel and the opposite has more room — a panel that
+ *    fits nowhere stays where it was asked to be unless moving buys room.
+ * 2. `maxHeight` is `min(maxHeight, room)`: the room on the resolved side for
+ *    a top / bottom panel, the safe height for a side one. A panel taller than
+ *    that is clamped, which is what keeps it on screen.
+ * 3. Align along the cross axis, then shift to stay inside
+ *    `bounds − insets − collisionPadding`. Finally clamp both axes, so the
+ *    panel is never off-screen whatever the anchor did.
+ * 4. The arrow points at the anchor's centre, clamped to
+ *    `[arrowInset, size − arrowInset]` — the middle when the panel is too small
+ *    to clear both corners.
+ */
+export function resolveAnchoredPosition(input: AnchoredInput): AnchoredPosition {
+	const { anchor, content, bounds, align, offset, alignOffset, collisionPadding, arrowInset, isRTL } = input;
+	const safe = safeRect(bounds, collisionPadding);
+	const cap = input.maxHeight ?? Number.POSITIVE_INFINITY;
+
+	const preferred = input.placement;
+	const opposite = OPPOSITE[preferred];
+	const needed = (placement: PopoverPlacement): number =>
+		isVertical(placement) ? Math.min(content.height, cap) : content.width;
+	const preferredRoom = roomOn(preferred, anchor, offset, safe);
+	const oppositeRoom = roomOn(opposite, anchor, offset, safe);
+	const placement = preferredRoom < needed(preferred) && oppositeRoom > preferredRoom ? opposite : preferred;
+
+	const room = isVertical(placement) ? roomOn(placement, anchor, offset, safe) : safe.bottom - safe.top;
+	const maxHeight = Math.max(0, Math.min(cap, room));
+	const width = content.width;
+	const height = Math.min(content.height, maxHeight);
+
+	let x: number;
+	let y: number;
+	if (isVertical(placement)) {
+		y = placement === "bottom" ? anchor.y + anchor.height + offset : anchor.y - offset - height;
+		x = alignAlong(anchor.x, anchor.width, width, align, alignOffset, isRTL ? -1 : 1);
+	} else {
+		x = placement === "right" ? anchor.x + anchor.width + offset : anchor.x - offset - width;
+		y = alignAlong(anchor.y, anchor.height, height, align, alignOffset, 1);
+	}
+
+	x = clamp(x, safe.left, safe.right - width);
+	y = clamp(y, safe.top, safe.bottom - height);
+
+	const edge = isVertical(placement) ? width : height;
+	const toCentre = isVertical(placement) ? anchor.x + anchor.width / 2 - x : anchor.y + anchor.height / 2 - y;
+	const arrowOffset = edge < arrowInset * 2 ? edge / 2 : clamp(toCentre, arrowInset, edge - arrowInset);
+
+	return { x, y, placement, maxHeight, arrowOffset };
+}
+
+export type PopoverWidthInput = {
+	width: PopoverWidth;
+	anchorWidth: number;
+	bounds: AnchoredBounds;
+	collisionPadding: number;
+	minWidth?: number;
+};
+
+export type ResolvedPopoverWidth = {
+	/** A fixed width, or `undefined` to let the content size itself. */
+	width?: number;
+	/** Only for a content-fit panel; a fixed width has already been raised to it. */
+	minWidth?: number;
+	/** The safe span — no panel is ever wider than the screen it is on. */
+	maxWidth: number;
+};
+
+/**
+ * Resolves `width` to numbers before the panel is measured.
+ *
+ * `"trigger"` is the anchor's width, which is what a form field under its
+ * trigger wants; `"full"` is the safe span; a number is taken as given. Each is
+ * raised to `minWidth` and capped at the safe span. `"content-fit"` leaves the
+ * width to the content and passes `minWidth` through as a floor.
+ */
+export function resolvePopoverWidth({
+	width,
+	anchorWidth,
+	bounds,
+	collisionPadding,
+	minWidth,
+}: PopoverWidthInput): ResolvedPopoverWidth {
+	const maxWidth = Math.max(0, bounds.width - bounds.insets.left - bounds.insets.right - collisionPadding * 2);
+	if (width === "content-fit") {
+		return minWidth === undefined ? { maxWidth } : { minWidth: Math.min(minWidth, maxWidth), maxWidth };
+	}
+	const base = width === "trigger" ? anchorWidth : width === "full" ? maxWidth : width;
+	return { width: Math.min(Math.max(base, minWidth ?? 0), maxWidth), maxWidth };
+}
+
+/**
+ * Where the panel starts its entrance, relative to where it settles: `distance`
+ * back toward the anchor, so a panel below the trigger enters downward from it.
+ */
+export function resolveEnterTranslate(placement: PopoverPlacement, distance: number): { x: number; y: number } {
+	switch (placement) {
+		case "bottom":
+			return { x: 0, y: -distance };
+		case "top":
+			return { x: 0, y: distance };
+		case "right":
+			return { x: -distance, y: 0 };
+		case "left":
+			return { x: distance, y: 0 };
+	}
+}
+
+/**
+ * The scale's origin, in the panel's own coordinates: the arrow, on the edge
+ * facing the anchor — so the panel grows out of the thing that opened it.
+ */
+export function resolveTransformOrigin(
+	placement: PopoverPlacement,
+	arrowOffset: number,
+	size: AnchoredSize
+): { x: number; y: number } {
+	switch (placement) {
+		case "bottom":
+			return { x: arrowOffset, y: 0 };
+		case "top":
+			return { x: arrowOffset, y: size.height };
+		case "right":
+			return { x: 0, y: arrowOffset };
+		case "left":
+			return { x: size.width, y: arrowOffset };
+	}
+}
+
+/**
+ * Where the arrow's square sits inside the panel, and how far it is turned.
+ *
+ * Centred on the facing edge at `arrowOffset`, so half of it shows past the
+ * panel. The square carries its border on the bottom and right edges only, and
+ * at 45° the corner between those two points straight down: each placement
+ * turns that corner toward the anchor, so the bordered edges are the outer two
+ * and the bare two are the ones that lie over the panel.
+ */
+export function resolveArrowFrame(
+	placement: PopoverPlacement,
+	arrowOffset: number,
+	size: AnchoredSize,
+	arrowSize: number
+): { left: number; top: number; rotate: number } {
+	const half = arrowSize / 2;
+	switch (placement) {
+		case "bottom":
+			return { left: arrowOffset - half, top: -half, rotate: 225 };
+		case "top":
+			return { left: arrowOffset - half, top: size.height - half, rotate: 45 };
+		case "right":
+			return { left: -half, top: arrowOffset - half, rotate: 135 };
+		case "left":
+			return { left: size.width - half, top: arrowOffset - half, rotate: 315 };
+	}
+}

package/src/components/popover/popover.tsx

@@ -0,0 +1,123 @@
+import { type ReactElement, type ReactNode, useCallback, useMemo, useState } from "react";
+import { useControllableState } from "../../hooks/use-controllable-state";
+import { PopoverContext, type PopoverContextValue } from "./popover.context";
+import type { PopoverPlacement } from "./popover.position";
+import { POPOVER_DEFAULTS } from "./popover.variants";
+import { PopoverAnchor } from "./popover-anchor";
+import { PopoverArrow } from "./popover-arrow";
+import { PopoverClose } from "./popover-close";
+import { PopoverContent } from "./popover-content";
+import { PopoverDescription } from "./popover-description";
+import { PopoverTitle } from "./popover-title";
+import { PopoverTrigger } from "./popover-trigger";
+import { useAnchorMeasure } from "./use-anchor-measure";
+
+export type PopoverProps = {
+	isOpen?: boolean;
+	/** Default false. */
+	defaultOpen?: boolean;
+	onOpenChange?: (isOpen: boolean) => void;
+	/** An outside tap, Android back and the escape gesture close it. Default true. */
+	isDismissible?: boolean;
+	children: ReactNode;
+};
+
+function PopoverRoot({
+	isOpen: isOpenProp,
+	defaultOpen = false,
+	onOpenChange,
+	isDismissible = true,
+	children,
+}: PopoverProps): ReactElement {
+	const [isOpen, setOpen] = useControllableState({
+		value: isOpenProp,
+		defaultValue: defaultOpen,
+		onChange: onOpenChange,
+	});
+	const [anchorCount, setAnchorCount] = useState(0);
+	const [placement, setPlacement] = useState<PopoverPlacement>(POPOVER_DEFAULTS.placement);
+	const hasAnchor = anchorCount > 0;
+
+	const trigger = useAnchorMeasure({ isEnabled: isOpen && !hasAnchor });
+	const anchor = useAnchorMeasure({ isEnabled: isOpen && hasAnchor });
+
+	const close = useCallback(() => setOpen(false), [setOpen]);
+
+	const registerAnchor = useCallback(() => {
+		setAnchorCount((count) => count + 1);
+		return () => setAnchorCount((count) => count - 1);
+	}, []);
+
+	const value = useMemo<PopoverContextValue>(
+		() => ({
+			isOpen,
+			setOpen,
+			close,
+			isDismissible,
+			placement,
+			onPlaced: setPlacement,
+			anchorRect: hasAnchor ? anchor.rect : trigger.rect,
+			triggerRef: trigger.ref,
+			triggerNode: trigger.node,
+			anchorRef: anchor.ref,
+			registerAnchor,
+		}),
+		[
+			isOpen,
+			setOpen,
+			close,
+			isDismissible,
+			placement,
+			hasAnchor,
+			anchor.rect,
+			anchor.ref,
+			trigger.rect,
+			trigger.ref,
+			trigger.node,
+			registerAnchor,
+		]
+	);
+
+	return <PopoverContext.Provider value={value}>{children}</PopoverContext.Provider>;
+}
+
+/**
+ * A small panel anchored to the control that opened it, with the screen around
+ * it still visible — a rename field beside a title, a note on a badge, a short
+ * list of options.
+ *
+ * The placement is a preference: the panel flips across its anchor and slides
+ * along it to stay inside the safe area and above the keyboard. It draws in the
+ * overlay layer — over sheets, dialogs and the navigator header — so it needs
+ * `OverlayProvider` at the app root. An outside tap, Android back and the
+ * escape gesture close it unless `isDismissible` is false.
+ *
+ * Open state is `isOpen` / `defaultOpen` / `onOpenChange`, controlled or not.
+ *
+ * @example
+ * <Popover>
+ *   <Popover.Trigger asChild><Button variant="secondary">Rename</Button></Popover.Trigger>
+ *   <Popover.Content align="start" width="trigger" minWidth={260}>
+ *     <Popover.Arrow />
+ *     <Popover.Title>Rename</Popover.Title>
+ *     <Input value={name} onChangeText={setName} />
+ *   </Popover.Content>
+ * </Popover>
+ */
+export const Popover = Object.assign(PopoverRoot, {
+	/** Opens the popover; the panel anchors to it unless a `Popover.Anchor` is written. */
+	Trigger: PopoverTrigger,
+	/** Anchors the panel to a different view than the trigger. */
+	Anchor: PopoverAnchor,
+	/** The panel — teleported, measured, placed and animated. */
+	Content: PopoverContent,
+	/** The arrow pointing from the panel at the anchor. */
+	Arrow: PopoverArrow,
+	/** The panel's heading, which labels it. */
+	Title: PopoverTitle,
+	/** Muted supporting copy under the title. */
+	Description: PopoverDescription,
+	/** Closes the popover — the corner ✕, or `asChild` around a button. */
+	Close: PopoverClose,
+	displayName: "DelacourUI.Popover",
+});

package/src/components/popover/popover.variants.test.ts

@@ -0,0 +1,135 @@
+import { describe, expect, test } from "bun:test";
+import { declaredTokens, RADIUS_BASE_PX } from "../../styles/theme-tokens.test";
+import { OVERLAY_SCRIM_TOKEN } from "../overlay/overlay.variants";
+import {
+	POPOVER_ARROW_INSET,
+	POPOVER_ARROW_SIZE,
+	POPOVER_CLOSE_HIT_SLOP,
+	POPOVER_COLLISION_PADDING,
+	POPOVER_DEFAULTS,
+	POPOVER_ENTER_DISTANCE,
+	POPOVER_ENTER_SCALE,
+	popoverVariants,
+} from "./popover.variants";
+
+const LIGHT = declaredTokens("light");
+const DARK = declaredTokens("dark");
+
+/** `border-t` and friends set a width, not a colour, and name no token. */
+const STRUCTURAL_BORDER_SUFFIXES = new Set(["t", "b", "l", "r", "x", "y", "s", "e"]);
+
+/** Every theme token a class string paints with, with any `/alpha` suffix dropped. */
+function colorTokens(cls: string): string[] {
+	const tokens: string[] = [];
+	for (const [, utility, token] of cls.matchAll(/\b(bg|border|text)-([a-z][\w-]*)(?:\/\d+)?\b/g)) {
+		if (utility === "border" && STRUCTURAL_BORDER_SUFFIXES.has(token)) continue;
+		tokens.push(token);
+	}
+	return tokens;
+}
+
+/** The slots this component declares, pinned so a new one has to be added before the sweeps can miss it. */
+const SLOT_NAMES = ["scrim", "dismissLayer", "content", "arrow", "title", "description", "close"] as const;
+
+const SLOTS = popoverVariants();
+const UNSTYLED = popoverVariants({ isUnstyled: true });
+
+describe("popoverVariants — slots", () => {
+	test("declares every slot", () => {
+		for (const name of SLOT_NAMES) expect(typeof SLOTS[name]).toBe("function");
+	});
+
+	test("every token a slot paints with exists in both themes", () => {
+		for (const name of SLOT_NAMES) {
+			for (const token of colorTokens(SLOTS[name]() ?? "")) {
+				expect(LIGHT.has(token)).toBe(true);
+				expect(DARK.has(token)).toBe(true);
+			}
+		}
+	});
+
+	test("the scrim is the foundation's token", () => {
+		expect(SLOTS.scrim()).toContain(`bg-${OVERLAY_SCRIM_TOKEN}`);
+	});
+
+	test("the dismiss layer fills the screen and paints nothing", () => {
+		const layer = SLOTS.dismissLayer();
+		expect(layer).toContain("absolute");
+		expect(layer).toContain("inset-0");
+		expect(colorTokens(layer)).toEqual([]);
+	});
+
+	test("the panel is a popover surface with a hairline, a card corner, padding and a gap", () => {
+		const content = SLOTS.content();
+		expect(content).toContain("bg-popover");
+		expect(content).toContain("border");
+		expect(content).toContain("border-border");
+		expect(content).toContain("rounded-lg");
+		expect(content).toMatch(/\bp-\d/);
+		expect(content).toMatch(/\bgap-\d/);
+	});
+
+	test("the arrow is the panel's fill with the panel's border on two edges", () => {
+		const arrow = SLOTS.arrow();
+		expect(arrow).toContain("bg-popover");
+		expect(arrow).toContain("border-border");
+		expect(arrow).toContain("border-b");
+		expect(arrow).toContain("border-r");
+	});
+
+	test("the title reserves room for the close control and sets no type of its own", () => {
+		const title = SLOTS.title();
+		expect(title).toContain("pr-6");
+		expect(title).not.toMatch(/\btext-(xs|sm|base|lg|xl)\b/);
+		expect(title).not.toMatch(/\bfont-/);
+	});
+
+	test("the close control sits in the corner, out of the flow", () => {
+		expect(SLOTS.close()).toContain("absolute");
+	});
+
+	test("a caller's className wins on the panel", () => {
+		expect(SLOTS.content({ className: "p-6" })).toContain("p-6");
+		expect(SLOTS.content({ className: "p-6" })).not.toMatch(/\bp-3\b/);
+	});
+});
+
+describe("popoverVariants — isUnstyled", () => {
+	test("strips the surface, the border, the corner and the padding", () => {
+		const content = UNSTYLED.content();
+		expect(content).not.toContain("bg-popover");
+		expect(content).not.toMatch(/\bborder\b/);
+		expect(content).not.toContain("rounded-lg");
+		expect(content).not.toMatch(/\bp-\d/);
+	});
+
+	test("strips the arrow's paint too", () => {
+		expect(UNSTYLED.arrow()).not.toContain("bg-popover");
+	});
+});
+
+describe("constants", () => {
+	test("the arrow never sits inside the panel's rounded corner", () => {
+		expect(POPOVER_ARROW_INSET).toBeGreaterThanOrEqual(RADIUS_BASE_PX + (POPOVER_ARROW_SIZE * Math.SQRT2) / 2);
+	});
+
+	test("defaults match the documented API", () => {
+		expect(POPOVER_DEFAULTS).toEqual({
+			placement: "bottom",
+			align: "center",
+			offset: 8,
+			alignOffset: 0,
+			width: "content-fit",
+		});
+		expect(POPOVER_COLLISION_PADDING).toBe(8);
+	});
+
+	test("the entrance is a short slide and a slight scale", () => {
+		expect(POPOVER_ENTER_DISTANCE).toBe(6);
+		expect(POPOVER_ENTER_SCALE).toBe(0.96);
+	});
+
+	test("the close glyph has slop to reach a 44pt target", () => {
+		expect(POPOVER_CLOSE_HIT_SLOP).toBeGreaterThan(0);
+	});
+});

package/src/components/popover/popover.variants.ts

@@ -0,0 +1,85 @@
+import type { VariantProps } from "tailwind-variants";
+import { tv } from "../../lib/tv";
+import type { PopoverAlign, PopoverPlacement, PopoverWidth } from "./popover.position";
+
+/**
+ * What `Popover.Content` does when a prop is left out.
+ *
+ * Below the trigger and centred on it, 8pt clear of it, as wide as its content.
+ */
+export const POPOVER_DEFAULTS = {
+	placement: "bottom",
+	align: "center",
+	offset: 8,
+	alignOffset: 0,
+	width: "content-fit",
+} as const satisfies {
+	placement: PopoverPlacement;
+	align: PopoverAlign;
+	offset: number;
+	alignOffset: number;
+	width: PopoverWidth;
+};
+
+/** How far a panel keeps from the safe area's edges, in points. */
+export const POPOVER_COLLISION_PADDING = 8;
+
+/** The arrow's square, in points, before it is rotated 45°. Half of it shows past the panel's edge. */
+export const POPOVER_ARROW_SIZE = 10;
+
+/**
+ * How close the arrow's centre may come to a panel corner, in points.
+ *
+ * The panel's corner is `rounded-lg`, which is `--radius` — 10pt by default —
+ * and a rotated square reaches half its diagonal either side of its centre. Any
+ * less and the arrow would hang off the curve of the corner instead of the
+ * straight edge. The test pins it against the radius `tokens.css` declares.
+ */
+export const POPOVER_ARROW_INSET = 18;
+
+/** How far the panel travels on its way in, toward its resolved side. */
+export const POPOVER_ENTER_DISTANCE = 6;
+
+/** The scale the panel grows from, at the arrow. */
+export const POPOVER_ENTER_SCALE = 0.96;
+
+/** A bare glyph in a corner has no capsule to bring it to 44pt — the slop does. */
+export const POPOVER_CLOSE_HIT_SLOP = 8;
+
+/**
+ * Styling for every part of a popover.
+ *
+ * `content` is the panel: the popover token, the hairline, the card corner and
+ * the padding — and `isUnstyled` strips all four, keeping only the gap, for a caller drawing their
+ * own surface with `background`. The arrow is the same fill with the border on
+ * its two outer edges; rotated 45° those are the two that show past the
+ * panel's edge, and the two that would draw a seam across the panel stay bare.
+ *
+ * `dismissLayer` is the invisible full-screen catcher under a scrim-less
+ * panel. It paints nothing, and the test holds it to that.
+ */
+export const popoverVariants = tv({
+	slots: {
+		scrim: "absolute inset-0 bg-overlay",
+		dismissLayer: "absolute inset-0",
+		content: "gap-2",
+		arrow: "absolute",
+		title: "pr-6",
+		description: "",
+		close: "absolute top-2 right-2 z-10",
+	},
+	variants: {
+		isUnstyled: {
+			true: {},
+			false: {
+				content: "rounded-lg border border-border bg-popover p-3",
+				arrow: "border-b border-r border-border bg-popover",
+			},
+		},
+	},
+	defaultVariants: {
+		isUnstyled: false,
+	},
+});
+
+export type PopoverVariantProps = VariantProps<typeof popoverVariants>;