@lattice-ui/popover 0.1.1

package/out/Popover/PopoverAnchor.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { PopoverAnchorProps } from "./types";
+export declare function PopoverAnchor(props: PopoverAnchorProps): React.JSX.Element;

package/out/Popover/PopoverAnchor.luau

@@ -0,0 +1,36 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local usePopoverContext = TS.import(script, script.Parent, "context").usePopoverContext
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
+local function PopoverAnchor(props)
+	local popoverContext = usePopoverContext()
+	local setAnchorRef = React.useCallback(function(instance)
+		popoverContext.anchorRef.current = toGuiObject(instance)
+	end, { popoverContext.anchorRef })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[PopoverAnchor] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			ref = setAnchorRef,
+		}, child)
+	end
+	return React.createElement("frame", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(0, 0),
+		ref = setAnchorRef,
+	})
+end
+return {
+	PopoverAnchor = PopoverAnchor,
+}

package/out/Popover/PopoverClose.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { PopoverCloseProps } from "./types";
+export declare function PopoverClose(props: PopoverCloseProps): React.JSX.Element;

package/out/Popover/PopoverClose.luau

@@ -0,0 +1,38 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local usePopoverContext = TS.import(script, script.Parent, "context").usePopoverContext
+local function PopoverClose(props)
+	local popoverContext = usePopoverContext()
+	local handleActivated = React.useCallback(function()
+		popoverContext.setOpen(false)
+	end, { popoverContext.setOpen })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[PopoverClose] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Event = {
+				Activated = handleActivated,
+			},
+		}, child)
+	end
+	return React.createElement("textbutton", {
+		AutoButtonColor = false,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Event = {
+			Activated = handleActivated,
+		},
+		Size = UDim2.fromOffset(110, 34),
+		Text = "Close",
+		TextColor3 = Color3.fromRGB(240, 244, 250),
+		TextSize = 16,
+	}, props.children)
+end
+return {
+	PopoverClose = PopoverClose,
+}

package/out/Popover/PopoverContent.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { PopoverContentProps } from "./types";
+export declare function PopoverContent(props: PopoverContentProps): React.JSX.Element | undefined;

package/out/Popover/PopoverContent.luau

@@ -0,0 +1,112 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local _layer = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out)
+local DismissableLayer = _layer.DismissableLayer
+local Presence = _layer.Presence
+local usePopper = TS.import(script, TS.getModule(script, "@lattice-ui", "popper").out).usePopper
+local usePopoverContext = TS.import(script, script.Parent, "context").usePopoverContext
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
+local function PopoverContentImpl(props)
+	local popoverContext = usePopoverContext()
+	local anchorRef = if popoverContext.anchorRef.current then popoverContext.anchorRef else popoverContext.triggerRef
+	local popper = usePopper({
+		anchorRef = anchorRef,
+		contentRef = popoverContext.contentRef,
+		placement = props.placement,
+		offset = props.offset,
+		padding = props.padding,
+		enabled = props.enabled,
+	})
+	local setContentRef = React.useCallback(function(instance)
+		popoverContext.contentRef.current = toGuiObject(instance)
+	end, { popoverContext.contentRef })
+	if props.asChild then
+		local child = props.children
+		if not React.isValidElement(child) then
+			error("[PopoverContent] `asChild` requires a child element.")
+		end
+		return React.createElement(DismissableLayer, {
+			enabled = props.enabled,
+			modal = popoverContext.modal,
+			onDismiss = props.onDismiss,
+			onEscapeKeyDown = props.onEscapeKeyDown,
+			onInteractOutside = props.onInteractOutside,
+			onPointerDownOutside = props.onPointerDownOutside,
+		}, React.createElement(Slot, {
+			AnchorPoint = popper.anchorPoint,
+			Position = popper.position,
+			Visible = props.visible,
+			ref = setContentRef,
+		}, child))
+	end
+	return React.createElement(DismissableLayer, {
+		enabled = props.enabled,
+		modal = popoverContext.modal,
+		onDismiss = props.onDismiss,
+		onEscapeKeyDown = props.onEscapeKeyDown,
+		onInteractOutside = props.onInteractOutside,
+		onPointerDownOutside = props.onPointerDownOutside,
+	}, React.createElement("frame", {
+		AnchorPoint = popper.anchorPoint,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Position = popper.position,
+		Size = UDim2.fromOffset(0, 0),
+		Visible = props.visible,
+		ref = setContentRef,
+	}, props.children))
+end
+local function PopoverContent(props)
+	local popoverContext = usePopoverContext()
+	local open = popoverContext.open
+	local forceMount = props.forceMount == true
+	local handleDismiss = React.useCallback(function()
+		popoverContext.setOpen(false)
+	end, { popoverContext.setOpen })
+	if not open and not forceMount then
+		return nil
+	end
+	if forceMount then
+		return React.createElement(PopoverContentImpl, {
+			asChild = props.asChild,
+			enabled = open,
+			offset = props.offset,
+			onDismiss = handleDismiss,
+			onEscapeKeyDown = props.onEscapeKeyDown,
+			onInteractOutside = props.onInteractOutside,
+			onPointerDownOutside = props.onPointerDownOutside,
+			padding = props.padding,
+			placement = props.placement,
+			visible = open,
+		}, props.children)
+	end
+	return React.createElement(Presence, {
+		exitFallbackMs = 0,
+		present = open,
+		render = function(state)
+			return React.createElement(PopoverContentImpl, {
+				asChild = props.asChild,
+				enabled = state.isPresent,
+				offset = props.offset,
+				onDismiss = handleDismiss,
+				onEscapeKeyDown = props.onEscapeKeyDown,
+				onInteractOutside = props.onInteractOutside,
+				onPointerDownOutside = props.onPointerDownOutside,
+				padding = props.padding,
+				placement = props.placement,
+				visible = state.isPresent,
+			}, props.children)
+		end,
+	})
+end
+return {
+	PopoverContent = PopoverContent,
+}

package/out/Popover/PopoverPortal.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { PopoverPortalProps } from "./types";
+export declare function PopoverPortal(props: PopoverPortalProps): React.JSX.Element;

package/out/Popover/PopoverPortal.luau

@@ -0,0 +1,33 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).React
+local _layer = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out)
+local Portal = _layer.Portal
+local PortalProvider = _layer.PortalProvider
+local usePortalContext = _layer.usePortalContext
+local function PopoverPortalWithOverrides(props)
+	local portalContext = usePortalContext()
+	local container = props.container or portalContext.container
+	local _condition = props.displayOrderBase
+	if _condition == nil then
+		_condition = portalContext.displayOrderBase
+	end
+	local displayOrderBase = _condition
+	return React.createElement(PortalProvider, {
+		container = container,
+		displayOrderBase = displayOrderBase,
+	}, React.createElement(Portal, nil, props.children))
+end
+local function PopoverPortal(props)
+	local hasOverrides = props.container ~= nil or props.displayOrderBase ~= nil
+	if hasOverrides then
+		return React.createElement(PopoverPortalWithOverrides, {
+			container = props.container,
+			displayOrderBase = props.displayOrderBase,
+		}, props.children)
+	end
+	return React.createElement(Portal, nil, props.children)
+end
+return {
+	PopoverPortal = PopoverPortal,
+}

package/out/Popover/PopoverRoot.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { PopoverProps } from "./types";
+export declare function Popover(props: PopoverProps): React.JSX.Element;

package/out/Popover/PopoverRoot.luau

@@ -0,0 +1,48 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local useControllableState = _core.useControllableState
+local PopoverContextProvider = TS.import(script, script.Parent, "context").PopoverContextProvider
+local function Popover(props)
+	local _object = {
+		value = props.open,
+	}
+	local _left = "defaultValue"
+	local _condition = props.defaultOpen
+	if _condition == nil then
+		_condition = false
+	end
+	_object[_left] = _condition
+	_object.onChange = props.onOpenChange
+	local _binding = useControllableState(_object)
+	local open = _binding[1]
+	local setOpenState = _binding[2]
+	local _condition_1 = props.modal
+	if _condition_1 == nil then
+		_condition_1 = false
+	end
+	local modal = _condition_1
+	local triggerRef = React.useRef()
+	local anchorRef = React.useRef()
+	local contentRef = React.useRef()
+	local setOpen = React.useCallback(function(nextOpen)
+		setOpenState(nextOpen)
+	end, { setOpenState })
+	local contextValue = React.useMemo(function()
+		return {
+			open = open,
+			setOpen = setOpen,
+			modal = modal,
+			triggerRef = triggerRef,
+			anchorRef = anchorRef,
+			contentRef = contentRef,
+		}
+	end, { modal, open, setOpen })
+	return React.createElement(PopoverContextProvider, {
+		value = contextValue,
+	}, props.children)
+end
+return {
+	Popover = Popover,
+}

package/out/Popover/PopoverTrigger.d.ts

@@ -0,0 +1,3 @@
+import { React } from "@lattice-ui/core";
+import type { PopoverTriggerProps } from "./types";
+export declare function PopoverTrigger(props: PopoverTriggerProps): React.JSX.Element;

package/out/Popover/PopoverTrigger.luau

@@ -0,0 +1,54 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local usePopoverContext = TS.import(script, script.Parent, "context").usePopoverContext
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
+local function PopoverTrigger(props)
+	local popoverContext = usePopoverContext()
+	local setTriggerRef = React.useCallback(function(instance)
+		popoverContext.triggerRef.current = toGuiObject(instance)
+	end, { popoverContext.triggerRef })
+	local handleActivated = React.useCallback(function()
+		if props.disabled then
+			return nil
+		end
+		popoverContext.setOpen(not popoverContext.open)
+	end, { popoverContext.open, popoverContext.setOpen, props.disabled })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[PopoverTrigger] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Event = {
+				Activated = handleActivated,
+			},
+			ref = setTriggerRef,
+		}, child)
+	end
+	return React.createElement("textbutton", {
+		Active = props.disabled ~= true,
+		AutoButtonColor = false,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Event = {
+			Activated = handleActivated,
+		},
+		Selectable = props.disabled ~= true,
+		Size = UDim2.fromOffset(150, 38),
+		Text = "Toggle Popover",
+		TextColor3 = Color3.fromRGB(240, 244, 250),
+		TextSize = 16,
+		ref = setTriggerRef,
+	}, props.children)
+end
+return {
+	PopoverTrigger = PopoverTrigger,
+}

package/out/Popover/context.d.ts

@@ -0,0 +1,3 @@
+import type { PopoverContextValue } from "./types";
+declare const PopoverContextProvider: import("@rbxts/react").Provider<PopoverContextValue | undefined>, usePopoverContext: () => PopoverContextValue;
+export { PopoverContextProvider, usePopoverContext };

package/out/Popover/context.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local createStrictContext = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out).createStrictContext
+local _binding = createStrictContext("Popover")
+local PopoverContextProvider = _binding[1]
+local usePopoverContext = _binding[2]
+return {
+	PopoverContextProvider = PopoverContextProvider,
+	usePopoverContext = usePopoverContext,
+}

package/out/Popover/types.d.ts

@@ -0,0 +1,48 @@
+import type { LayerInteractEvent } from "@lattice-ui/layer";
+import type { PopperPlacement } from "@lattice-ui/popper";
+import type React from "@rbxts/react";
+export type PopoverSetOpen = (open: boolean) => void;
+export type PopoverContextValue = {
+    open: boolean;
+    setOpen: PopoverSetOpen;
+    modal: boolean;
+    triggerRef: React.MutableRefObject<GuiObject | undefined>;
+    anchorRef: React.MutableRefObject<GuiObject | undefined>;
+    contentRef: React.MutableRefObject<GuiObject | undefined>;
+};
+export type PopoverProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    children?: React.ReactNode;
+};
+export type PopoverTriggerProps = {
+    asChild?: boolean;
+    disabled?: boolean;
+    children?: React.ReactElement;
+};
+export type PopoverPortalProps = {
+    container?: BasePlayerGui;
+    displayOrderBase?: number;
+    children?: React.ReactNode;
+};
+export type PopoverContentProps = {
+    asChild?: boolean;
+    forceMount?: boolean;
+    placement?: PopperPlacement;
+    offset?: Vector2;
+    padding?: number;
+    onEscapeKeyDown?: (event: LayerInteractEvent) => void;
+    onPointerDownOutside?: (event: LayerInteractEvent) => void;
+    onInteractOutside?: (event: LayerInteractEvent) => void;
+    children?: React.ReactNode;
+};
+export type PopoverAnchorProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type PopoverCloseProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};

package/out/Popover/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/out/index.d.ts

@@ -0,0 +1,7 @@
+export { PopoverAnchor } from "./Popover/PopoverAnchor";
+export { PopoverClose } from "./Popover/PopoverClose";
+export { PopoverContent } from "./Popover/PopoverContent";
+export { PopoverPortal } from "./Popover/PopoverPortal";
+export { Popover } from "./Popover/PopoverRoot";
+export { PopoverTrigger } from "./Popover/PopoverTrigger";
+export type { PopoverAnchorProps, PopoverCloseProps, PopoverContentProps, PopoverPortalProps, PopoverProps, PopoverTriggerProps, } from "./Popover/types";

package/out/init.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.PopoverAnchor = TS.import(script, script, "Popover", "PopoverAnchor").PopoverAnchor
+exports.PopoverClose = TS.import(script, script, "Popover", "PopoverClose").PopoverClose
+exports.PopoverContent = TS.import(script, script, "Popover", "PopoverContent").PopoverContent
+exports.PopoverPortal = TS.import(script, script, "Popover", "PopoverPortal").PopoverPortal
+exports.Popover = TS.import(script, script, "Popover", "PopoverRoot").Popover
+exports.PopoverTrigger = TS.import(script, script, "Popover", "PopoverTrigger").PopoverTrigger
+return exports

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@lattice-ui/popover",
+  "version": "0.1.1",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@lattice-ui/layer": "0.1.1",
+    "@lattice-ui/popper": "0.1.1",
+    "@lattice-ui/core": "0.1.1"
+  },
+  "devDependencies": {
+    "@rbxts/react": "17.3.7-ts.1",
+    "@rbxts/react-roblox": "17.3.7-ts.1"
+  },
+  "peerDependencies": {
+    "@rbxts/react": "^17",
+    "@rbxts/react-roblox": "^17"
+  },
+  "scripts": {
+    "build": "rbxtsc -p tsconfig.json",
+    "watch": "rbxtsc -p tsconfig.json -w",
+    "typecheck": "tsc -p tsconfig.typecheck.json"
+  }
+}

package/src/Popover/PopoverAnchor.tsx

@@ -0,0 +1,33 @@
+import { React, Slot } from "@lattice-ui/core";
+import { usePopoverContext } from "./context";
+import type { PopoverAnchorProps } from "./types";
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function PopoverAnchor(props: PopoverAnchorProps) {
+  const popoverContext = usePopoverContext();
+
+  const setAnchorRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      popoverContext.anchorRef.current = toGuiObject(instance);
+    },
+    [popoverContext.anchorRef],
+  );
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[PopoverAnchor] `asChild` requires a child element.");
+    }
+
+    return <Slot ref={setAnchorRef}>{child}</Slot>;
+  }
+
+  return <frame BackgroundTransparency={1} BorderSizePixel={0} Size={UDim2.fromOffset(0, 0)} ref={setAnchorRef} />;
+}

package/src/Popover/PopoverClose.tsx

@@ -0,0 +1,35 @@
+import { React, Slot } from "@lattice-ui/core";
+import { usePopoverContext } from "./context";
+import type { PopoverCloseProps } from "./types";
+
+export function PopoverClose(props: PopoverCloseProps) {
+  const popoverContext = usePopoverContext();
+
+  const handleActivated = React.useCallback(() => {
+    popoverContext.setOpen(false);
+  }, [popoverContext.setOpen]);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[PopoverClose] `asChild` requires a child element.");
+    }
+
+    return <Slot Event={{ Activated: handleActivated }}>{child}</Slot>;
+  }
+
+  return (
+    <textbutton
+      AutoButtonColor={false}
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Event={{ Activated: handleActivated }}
+      Size={UDim2.fromOffset(110, 34)}
+      Text="Close"
+      TextColor3={Color3.fromRGB(240, 244, 250)}
+      TextSize={16}
+    >
+      {props.children}
+    </textbutton>
+  );
+}

package/src/Popover/PopoverContent.tsx

@@ -0,0 +1,145 @@
+import { React, Slot } from "@lattice-ui/core";
+import { DismissableLayer, Presence } from "@lattice-ui/layer";
+import { usePopper } from "@lattice-ui/popper";
+import { usePopoverContext } from "./context";
+import type { PopoverContentProps } from "./types";
+
+type PopoverContentImplProps = {
+  enabled: boolean;
+  visible: boolean;
+  onDismiss: () => void;
+  asChild?: boolean;
+  placement?: PopoverContentProps["placement"];
+  offset?: PopoverContentProps["offset"];
+  padding?: PopoverContentProps["padding"];
+} & Pick<PopoverContentProps, "children" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside">;
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+function PopoverContentImpl(props: PopoverContentImplProps) {
+  const popoverContext = usePopoverContext();
+  const anchorRef = popoverContext.anchorRef.current ? popoverContext.anchorRef : popoverContext.triggerRef;
+
+  const popper = usePopper({
+    anchorRef,
+    contentRef: popoverContext.contentRef,
+    placement: props.placement,
+    offset: props.offset,
+    padding: props.padding,
+    enabled: props.enabled,
+  });
+
+  const setContentRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      popoverContext.contentRef.current = toGuiObject(instance);
+    },
+    [popoverContext.contentRef],
+  );
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!React.isValidElement(child)) {
+      error("[PopoverContent] `asChild` requires a child element.");
+    }
+
+    return (
+      <DismissableLayer
+        enabled={props.enabled}
+        modal={popoverContext.modal}
+        onDismiss={props.onDismiss}
+        onEscapeKeyDown={props.onEscapeKeyDown}
+        onInteractOutside={props.onInteractOutside}
+        onPointerDownOutside={props.onPointerDownOutside}
+      >
+        <Slot AnchorPoint={popper.anchorPoint} Position={popper.position} Visible={props.visible} ref={setContentRef}>
+          {child}
+        </Slot>
+      </DismissableLayer>
+    );
+  }
+
+  return (
+    <DismissableLayer
+      enabled={props.enabled}
+      modal={popoverContext.modal}
+      onDismiss={props.onDismiss}
+      onEscapeKeyDown={props.onEscapeKeyDown}
+      onInteractOutside={props.onInteractOutside}
+      onPointerDownOutside={props.onPointerDownOutside}
+    >
+      <frame
+        AnchorPoint={popper.anchorPoint}
+        BackgroundTransparency={1}
+        BorderSizePixel={0}
+        Position={popper.position}
+        Size={UDim2.fromOffset(0, 0)}
+        Visible={props.visible}
+        ref={setContentRef}
+      >
+        {props.children}
+      </frame>
+    </DismissableLayer>
+  );
+}
+
+export function PopoverContent(props: PopoverContentProps) {
+  const popoverContext = usePopoverContext();
+  const open = popoverContext.open;
+  const forceMount = props.forceMount === true;
+
+  const handleDismiss = React.useCallback(() => {
+    popoverContext.setOpen(false);
+  }, [popoverContext.setOpen]);
+
+  if (!open && !forceMount) {
+    return undefined;
+  }
+
+  if (forceMount) {
+    return (
+      <PopoverContentImpl
+        asChild={props.asChild}
+        enabled={open}
+        offset={props.offset}
+        onDismiss={handleDismiss}
+        onEscapeKeyDown={props.onEscapeKeyDown}
+        onInteractOutside={props.onInteractOutside}
+        onPointerDownOutside={props.onPointerDownOutside}
+        padding={props.padding}
+        placement={props.placement}
+        visible={open}
+      >
+        {props.children}
+      </PopoverContentImpl>
+    );
+  }
+
+  return (
+    <Presence
+      exitFallbackMs={0}
+      present={open}
+      render={(state) => (
+        <PopoverContentImpl
+          asChild={props.asChild}
+          enabled={state.isPresent}
+          offset={props.offset}
+          onDismiss={handleDismiss}
+          onEscapeKeyDown={props.onEscapeKeyDown}
+          onInteractOutside={props.onInteractOutside}
+          onPointerDownOutside={props.onPointerDownOutside}
+          padding={props.padding}
+          placement={props.placement}
+          visible={state.isPresent}
+        >
+          {props.children}
+        </PopoverContentImpl>
+      )}
+    />
+  );
+}

package/src/Popover/PopoverPortal.tsx

@@ -0,0 +1,28 @@
+import { React } from "@lattice-ui/core";
+import { Portal, PortalProvider, usePortalContext } from "@lattice-ui/layer";
+import type { PopoverPortalProps } from "./types";
+
+function PopoverPortalWithOverrides(props: PopoverPortalProps) {
+  const portalContext = usePortalContext();
+  const container = props.container ?? portalContext.container;
+  const displayOrderBase = props.displayOrderBase ?? portalContext.displayOrderBase;
+
+  return (
+    <PortalProvider container={container} displayOrderBase={displayOrderBase}>
+      <Portal>{props.children}</Portal>
+    </PortalProvider>
+  );
+}
+
+export function PopoverPortal(props: PopoverPortalProps) {
+  const hasOverrides = props.container !== undefined || props.displayOrderBase !== undefined;
+  if (hasOverrides) {
+    return (
+      <PopoverPortalWithOverrides container={props.container} displayOrderBase={props.displayOrderBase}>
+        {props.children}
+      </PopoverPortalWithOverrides>
+    );
+  }
+
+  return <Portal>{props.children}</Portal>;
+}

package/src/Popover/PopoverRoot.tsx

@@ -0,0 +1,37 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import { PopoverContextProvider } from "./context";
+import type { PopoverProps } from "./types";
+
+export function Popover(props: PopoverProps) {
+  const [open, setOpenState] = useControllableState<boolean>({
+    value: props.open,
+    defaultValue: props.defaultOpen ?? false,
+    onChange: props.onOpenChange,
+  });
+  const modal = props.modal ?? false;
+
+  const triggerRef = React.useRef<GuiObject>();
+  const anchorRef = React.useRef<GuiObject>();
+  const contentRef = React.useRef<GuiObject>();
+
+  const setOpen = React.useCallback(
+    (nextOpen: boolean) => {
+      setOpenState(nextOpen);
+    },
+    [setOpenState],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      open,
+      setOpen,
+      modal,
+      triggerRef,
+      anchorRef,
+      contentRef,
+    }),
+    [modal, open, setOpen],
+  );
+
+  return <PopoverContextProvider value={contextValue}>{props.children}</PopoverContextProvider>;
+}

package/src/Popover/PopoverTrigger.tsx

@@ -0,0 +1,61 @@
+import { React, Slot } from "@lattice-ui/core";
+import { usePopoverContext } from "./context";
+import type { PopoverTriggerProps } from "./types";
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function PopoverTrigger(props: PopoverTriggerProps) {
+  const popoverContext = usePopoverContext();
+
+  const setTriggerRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      popoverContext.triggerRef.current = toGuiObject(instance);
+    },
+    [popoverContext.triggerRef],
+  );
+
+  const handleActivated = React.useCallback(() => {
+    if (props.disabled) {
+      return;
+    }
+
+    popoverContext.setOpen(!popoverContext.open);
+  }, [popoverContext.open, popoverContext.setOpen, props.disabled]);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[PopoverTrigger] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Event={{ Activated: handleActivated }} ref={setTriggerRef}>
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <textbutton
+      Active={props.disabled !== true}
+      AutoButtonColor={false}
+      BackgroundTransparency={1}
+      BorderSizePixel={0}
+      Event={{ Activated: handleActivated }}
+      Selectable={props.disabled !== true}
+      Size={UDim2.fromOffset(150, 38)}
+      Text="Toggle Popover"
+      TextColor3={Color3.fromRGB(240, 244, 250)}
+      TextSize={16}
+      ref={setTriggerRef}
+    >
+      {props.children}
+    </textbutton>
+  );
+}

package/src/Popover/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { PopoverContextValue } from "./types";
+
+const [PopoverContextProvider, usePopoverContext] = createStrictContext<PopoverContextValue>("Popover");
+
+export { PopoverContextProvider, usePopoverContext };

package/src/Popover/types.ts

@@ -0,0 +1,56 @@
+import type { LayerInteractEvent } from "@lattice-ui/layer";
+import type { PopperPlacement } from "@lattice-ui/popper";
+import type React from "@rbxts/react";
+
+export type PopoverSetOpen = (open: boolean) => void;
+
+export type PopoverContextValue = {
+  open: boolean;
+  setOpen: PopoverSetOpen;
+  modal: boolean;
+  triggerRef: React.MutableRefObject<GuiObject | undefined>;
+  anchorRef: React.MutableRefObject<GuiObject | undefined>;
+  contentRef: React.MutableRefObject<GuiObject | undefined>;
+};
+
+export type PopoverProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  modal?: boolean;
+  children?: React.ReactNode;
+};
+
+export type PopoverTriggerProps = {
+  asChild?: boolean;
+  disabled?: boolean;
+  children?: React.ReactElement;
+};
+
+export type PopoverPortalProps = {
+  container?: BasePlayerGui;
+  displayOrderBase?: number;
+  children?: React.ReactNode;
+};
+
+export type PopoverContentProps = {
+  asChild?: boolean;
+  forceMount?: boolean;
+  placement?: PopperPlacement;
+  offset?: Vector2;
+  padding?: number;
+  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
+  onPointerDownOutside?: (event: LayerInteractEvent) => void;
+  onInteractOutside?: (event: LayerInteractEvent) => void;
+  children?: React.ReactNode;
+};
+
+export type PopoverAnchorProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type PopoverCloseProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};

package/src/index.ts

@@ -0,0 +1,14 @@
+export { PopoverAnchor } from "./Popover/PopoverAnchor";
+export { PopoverClose } from "./Popover/PopoverClose";
+export { PopoverContent } from "./Popover/PopoverContent";
+export { PopoverPortal } from "./Popover/PopoverPortal";
+export { Popover } from "./Popover/PopoverRoot";
+export { PopoverTrigger } from "./Popover/PopoverTrigger";
+export type {
+  PopoverAnchorProps,
+  PopoverCloseProps,
+  PopoverContentProps,
+  PopoverPortalProps,
+  PopoverProps,
+  PopoverTriggerProps,
+} from "./Popover/types";

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "out",
+    "declaration": true,
+    "typeRoots": [
+      "./node_modules/@rbxts",
+      "../../node_modules/@rbxts",
+      "./node_modules/@lattice-ui",
+      "../../node_modules/@lattice-ui"
+    ],
+    "types": ["types", "compiler-types"]
+  },
+  "include": ["src"]
+}

package/tsconfig.typecheck.json

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "..",
+    "rootDir": "..",
+    "paths": {
+      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
+      "@lattice-ui/core": ["core/src/index.ts"],
+      "@lattice-ui/dialog": ["dialog/src/index.ts"],
+      "@lattice-ui/focus": ["focus/src/index.ts"],
+      "@lattice-ui/layer": ["layer/src/index.ts"],
+      "@lattice-ui/menu": ["menu/src/index.ts"],
+      "@lattice-ui/popover": ["popover/src/index.ts"],
+      "@lattice-ui/popper": ["popper/src/index.ts"],
+      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
+      "@lattice-ui/style": ["style/src/index.ts"],
+      "@lattice-ui/switch": ["switch/src/index.ts"],
+      "@lattice-ui/system": ["system/src/index.ts"],
+      "@lattice-ui/tabs": ["tabs/src/index.ts"],
+      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
+      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
+    }
+  }
+}