@lattice-ui/dialog 0.1.1

package/out/Dialog/DialogClose.d.ts

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

package/out/Dialog/DialogClose.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 useDialogContext = TS.import(script, script.Parent, "context").useDialogContext
+local function DialogClose(props)
+	local dialogContext = useDialogContext()
+	local handleActivated = React.useCallback(function()
+		dialogContext.setOpen(false)
+	end, { dialogContext.setOpen })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[DialogClose] `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 {
+	DialogClose = DialogClose,
+}

package/out/Dialog/DialogContent.d.ts

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

package/out/Dialog/DialogContent.luau

@@ -0,0 +1,73 @@
+-- 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 FocusScope = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).FocusScope
+local _layer = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out)
+local DismissableLayer = _layer.DismissableLayer
+local Presence = _layer.Presence
+local useDialogContext = TS.import(script, script.Parent, "context").useDialogContext
+local function DialogContentImpl(props)
+	return React.createElement(DismissableLayer, {
+		enabled = props.enabled,
+		modal = props.modal,
+		onDismiss = props.onDismiss,
+		onEscapeKeyDown = props.onEscapeKeyDown,
+		onInteractOutside = props.onInteractOutside,
+		onPointerDownOutside = props.onPointerDownOutside,
+	}, React.createElement(FocusScope, {
+		restoreFocus = props.restoreFocus,
+		trapped = props.trapFocus,
+	}, props.children))
+end
+local function DialogContent(props)
+	local dialogContext = useDialogContext()
+	local open = dialogContext.open
+	local forceMount = props.forceMount == true
+	local _condition = props.trapFocus
+	if _condition == nil then
+		_condition = true
+	end
+	local trapFocus = _condition
+	local _condition_1 = props.restoreFocus
+	if _condition_1 == nil then
+		_condition_1 = true
+	end
+	local restoreFocus = _condition_1
+	local handleDismiss = React.useCallback(function()
+		dialogContext.setOpen(false)
+	end, { dialogContext.setOpen })
+	if not open and not forceMount then
+		return nil
+	end
+	if forceMount then
+		return React.createElement(DialogContentImpl, {
+			enabled = open,
+			modal = dialogContext.modal,
+			onDismiss = handleDismiss,
+			onEscapeKeyDown = props.onEscapeKeyDown,
+			onInteractOutside = props.onInteractOutside,
+			onPointerDownOutside = props.onPointerDownOutside,
+			restoreFocus = restoreFocus,
+			trapFocus = trapFocus,
+		}, props.children)
+	end
+	return React.createElement(Presence, {
+		exitFallbackMs = 0,
+		present = open,
+		render = function(state)
+			return React.createElement(DialogContentImpl, {
+				enabled = state.isPresent,
+				modal = dialogContext.modal,
+				onDismiss = handleDismiss,
+				onEscapeKeyDown = props.onEscapeKeyDown,
+				onInteractOutside = props.onInteractOutside,
+				onPointerDownOutside = props.onPointerDownOutside,
+				restoreFocus = restoreFocus,
+				trapFocus = trapFocus,
+			}, props.children)
+		end,
+	})
+end
+return {
+	DialogContent = DialogContent,
+}

package/out/Dialog/DialogOverlay.d.ts

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

package/out/Dialog/DialogOverlay.luau

@@ -0,0 +1,50 @@
+-- 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 useDialogContext = TS.import(script, script.Parent, "context").useDialogContext
+local function DialogOverlay(props)
+	local dialogContext = useDialogContext()
+	local open = dialogContext.open
+	local shouldRender = open or props.forceMount == true
+	local handleActivated = React.useCallback(function()
+		dialogContext.setOpen(false)
+	end, { dialogContext.setOpen })
+	if not shouldRender then
+		return nil
+	end
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[DialogOverlay] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Active = open,
+			Event = {
+				Activated = handleActivated,
+			},
+			Visible = open,
+		}, child)
+	end
+	return React.createElement("textbutton", {
+		Active = open,
+		AutoButtonColor = false,
+		BackgroundColor3 = Color3.fromRGB(8, 10, 14),
+		BackgroundTransparency = if open then 0.35 else 1,
+		BorderSizePixel = 0,
+		Event = {
+			Activated = handleActivated,
+		},
+		Position = UDim2.fromScale(0, 0),
+		Selectable = false,
+		Size = UDim2.fromScale(1, 1),
+		Text = "",
+		TextTransparency = 1,
+		Visible = open,
+		ZIndex = 5,
+	})
+end
+return {
+	DialogOverlay = DialogOverlay,
+}

package/out/Dialog/DialogPortal.d.ts

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

package/out/Dialog/DialogPortal.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 DialogPortalWithOverrides(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 DialogPortal(props)
+	local hasOverrides = props.container ~= nil or props.displayOrderBase ~= nil
+	if hasOverrides then
+		return React.createElement(DialogPortalWithOverrides, {
+			container = props.container,
+			displayOrderBase = props.displayOrderBase,
+		}, props.children)
+	end
+	return React.createElement(Portal, nil, props.children)
+end
+return {
+	DialogPortal = DialogPortal,
+}

package/out/Dialog/DialogRoot.d.ts

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

package/out/Dialog/DialogRoot.luau

@@ -0,0 +1,44 @@
+-- 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 DialogContextProvider = TS.import(script, script.Parent, "context").DialogContextProvider
+local function Dialog(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 = true
+	end
+	local modal = _condition_1
+	local triggerRef = 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,
+		}
+	end, { modal, open, setOpen })
+	return React.createElement(DialogContextProvider, {
+		value = contextValue,
+	}, props.children)
+end
+return {
+	Dialog = Dialog,
+}

package/out/Dialog/DialogTrigger.d.ts

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

package/out/Dialog/DialogTrigger.luau

@@ -0,0 +1,53 @@
+-- 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 useDialogContext = TS.import(script, script.Parent, "context").useDialogContext
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
+local function DialogTrigger(props)
+	local dialogContext = useDialogContext()
+	local setTriggerRef = React.useCallback(function(instance)
+		dialogContext.triggerRef.current = toGuiObject(instance)
+	end, { dialogContext.triggerRef })
+	local handleActivated = React.useCallback(function()
+		if props.disabled then
+			return nil
+		end
+		dialogContext.setOpen(true)
+	end, { dialogContext.setOpen, props.disabled })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[DialogTrigger] `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,
+		},
+		Size = UDim2.fromOffset(140, 38),
+		Text = "Open Dialog",
+		TextColor3 = Color3.fromRGB(240, 244, 250),
+		TextSize = 16,
+		ref = setTriggerRef,
+	}, props.children)
+end
+return {
+	DialogTrigger = DialogTrigger,
+}

package/out/Dialog/context.d.ts

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

package/out/Dialog/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("Dialog")
+local DialogContextProvider = _binding[1]
+local useDialogContext = _binding[2]
+return {
+	DialogContextProvider = DialogContextProvider,
+	useDialogContext = useDialogContext,
+}

package/out/Dialog/types.d.ts

@@ -0,0 +1,44 @@
+import type { LayerInteractEvent } from "@lattice-ui/layer";
+import type React from "@rbxts/react";
+export type DialogSetOpen = (open: boolean) => void;
+export type DialogContextValue = {
+    open: boolean;
+    setOpen: DialogSetOpen;
+    modal: boolean;
+    triggerRef: React.MutableRefObject<GuiObject | undefined>;
+};
+export type DialogProps = {
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    modal?: boolean;
+    children?: React.ReactNode;
+};
+export type DialogTriggerProps = {
+    asChild?: boolean;
+    disabled?: boolean;
+    children?: React.ReactElement;
+};
+export type DialogPortalProps = {
+    container?: BasePlayerGui;
+    displayOrderBase?: number;
+    children?: React.ReactNode;
+};
+export type DialogOverlayProps = {
+    asChild?: boolean;
+    forceMount?: boolean;
+    children?: React.ReactElement;
+};
+export type DialogContentProps = {
+    forceMount?: boolean;
+    trapFocus?: boolean;
+    restoreFocus?: boolean;
+    onEscapeKeyDown?: (event: LayerInteractEvent) => void;
+    onPointerDownOutside?: (event: LayerInteractEvent) => void;
+    onInteractOutside?: (event: LayerInteractEvent) => void;
+    children?: React.ReactNode;
+};
+export type DialogCloseProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};

package/out/Dialog/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 { DialogClose } from "./Dialog/DialogClose";
+export { DialogContent } from "./Dialog/DialogContent";
+export { DialogOverlay } from "./Dialog/DialogOverlay";
+export { DialogPortal } from "./Dialog/DialogPortal";
+export { Dialog } from "./Dialog/DialogRoot";
+export { DialogTrigger } from "./Dialog/DialogTrigger";
+export type { DialogCloseProps, DialogContentProps, DialogOverlayProps, DialogPortalProps, DialogProps, DialogTriggerProps, } from "./Dialog/types";

package/out/init.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.DialogClose = TS.import(script, script, "Dialog", "DialogClose").DialogClose
+exports.DialogContent = TS.import(script, script, "Dialog", "DialogContent").DialogContent
+exports.DialogOverlay = TS.import(script, script, "Dialog", "DialogOverlay").DialogOverlay
+exports.DialogPortal = TS.import(script, script, "Dialog", "DialogPortal").DialogPortal
+exports.Dialog = TS.import(script, script, "Dialog", "DialogRoot").Dialog
+exports.DialogTrigger = TS.import(script, script, "Dialog", "DialogTrigger").DialogTrigger
+return exports

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@lattice-ui/dialog",
+  "version": "0.1.1",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@lattice-ui/core": "0.1.1",
+    "@lattice-ui/focus": "0.1.1",
+    "@lattice-ui/layer": "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/Dialog/DialogClose.tsx

@@ -0,0 +1,35 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useDialogContext } from "./context";
+import type { DialogCloseProps } from "./types";
+
+export function DialogClose(props: DialogCloseProps) {
+  const dialogContext = useDialogContext();
+
+  const handleActivated = React.useCallback(() => {
+    dialogContext.setOpen(false);
+  }, [dialogContext.setOpen]);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[DialogClose] `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/Dialog/DialogContent.tsx

@@ -0,0 +1,84 @@
+import { React } from "@lattice-ui/core";
+import { FocusScope } from "@lattice-ui/focus";
+import { DismissableLayer, Presence } from "@lattice-ui/layer";
+import { useDialogContext } from "./context";
+import type { DialogContentProps } from "./types";
+
+type DialogContentImplProps = {
+  enabled: boolean;
+  modal: boolean;
+  trapFocus: boolean;
+  restoreFocus: boolean;
+  onDismiss: () => void;
+} & Pick<DialogContentProps, "children" | "onEscapeKeyDown" | "onInteractOutside" | "onPointerDownOutside">;
+
+function DialogContentImpl(props: DialogContentImplProps) {
+  return (
+    <DismissableLayer
+      enabled={props.enabled}
+      modal={props.modal}
+      onDismiss={props.onDismiss}
+      onEscapeKeyDown={props.onEscapeKeyDown}
+      onInteractOutside={props.onInteractOutside}
+      onPointerDownOutside={props.onPointerDownOutside}
+    >
+      <FocusScope restoreFocus={props.restoreFocus} trapped={props.trapFocus}>
+        {props.children}
+      </FocusScope>
+    </DismissableLayer>
+  );
+}
+
+export function DialogContent(props: DialogContentProps) {
+  const dialogContext = useDialogContext();
+  const open = dialogContext.open;
+  const forceMount = props.forceMount === true;
+  const trapFocus = props.trapFocus ?? true;
+  const restoreFocus = props.restoreFocus ?? true;
+
+  const handleDismiss = React.useCallback(() => {
+    dialogContext.setOpen(false);
+  }, [dialogContext.setOpen]);
+
+  if (!open && !forceMount) {
+    return undefined;
+  }
+
+  if (forceMount) {
+    return (
+      <DialogContentImpl
+        enabled={open}
+        modal={dialogContext.modal}
+        onDismiss={handleDismiss}
+        onEscapeKeyDown={props.onEscapeKeyDown}
+        onInteractOutside={props.onInteractOutside}
+        onPointerDownOutside={props.onPointerDownOutside}
+        restoreFocus={restoreFocus}
+        trapFocus={trapFocus}
+      >
+        {props.children}
+      </DialogContentImpl>
+    );
+  }
+
+  return (
+    <Presence
+      exitFallbackMs={0}
+      present={open}
+      render={(state) => (
+        <DialogContentImpl
+          enabled={state.isPresent}
+          modal={dialogContext.modal}
+          onDismiss={handleDismiss}
+          onEscapeKeyDown={props.onEscapeKeyDown}
+          onInteractOutside={props.onInteractOutside}
+          onPointerDownOutside={props.onPointerDownOutside}
+          restoreFocus={restoreFocus}
+          trapFocus={trapFocus}
+        >
+          {props.children}
+        </DialogContentImpl>
+      )}
+    />
+  );
+}

package/src/Dialog/DialogOverlay.tsx

@@ -0,0 +1,48 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useDialogContext } from "./context";
+import type { DialogOverlayProps } from "./types";
+
+export function DialogOverlay(props: DialogOverlayProps) {
+  const dialogContext = useDialogContext();
+  const open = dialogContext.open;
+  const shouldRender = open || props.forceMount === true;
+
+  const handleActivated = React.useCallback(() => {
+    dialogContext.setOpen(false);
+  }, [dialogContext.setOpen]);
+
+  if (!shouldRender) {
+    return undefined;
+  }
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[DialogOverlay] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Active={open} Event={{ Activated: handleActivated }} Visible={open}>
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <textbutton
+      Active={open}
+      AutoButtonColor={false}
+      BackgroundColor3={Color3.fromRGB(8, 10, 14)}
+      BackgroundTransparency={open ? 0.35 : 1}
+      BorderSizePixel={0}
+      Event={{ Activated: handleActivated }}
+      Position={UDim2.fromScale(0, 0)}
+      Selectable={false}
+      Size={UDim2.fromScale(1, 1)}
+      Text=""
+      TextTransparency={1}
+      Visible={open}
+      ZIndex={5}
+    />
+  );
+}

package/src/Dialog/DialogPortal.tsx

@@ -0,0 +1,28 @@
+import { React } from "@lattice-ui/core";
+import { Portal, PortalProvider, usePortalContext } from "@lattice-ui/layer";
+import type { DialogPortalProps } from "./types";
+
+function DialogPortalWithOverrides(props: DialogPortalProps) {
+  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 DialogPortal(props: DialogPortalProps) {
+  const hasOverrides = props.container !== undefined || props.displayOrderBase !== undefined;
+  if (hasOverrides) {
+    return (
+      <DialogPortalWithOverrides container={props.container} displayOrderBase={props.displayOrderBase}>
+        {props.children}
+      </DialogPortalWithOverrides>
+    );
+  }
+
+  return <Portal>{props.children}</Portal>;
+}

package/src/Dialog/DialogRoot.tsx

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

package/src/Dialog/DialogTrigger.tsx

@@ -0,0 +1,60 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useDialogContext } from "./context";
+import type { DialogTriggerProps } from "./types";
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function DialogTrigger(props: DialogTriggerProps) {
+  const dialogContext = useDialogContext();
+
+  const setTriggerRef = React.useCallback(
+    (instance: Instance | undefined) => {
+      dialogContext.triggerRef.current = toGuiObject(instance);
+    },
+    [dialogContext.triggerRef],
+  );
+
+  const handleActivated = React.useCallback(() => {
+    if (props.disabled) {
+      return;
+    }
+
+    dialogContext.setOpen(true);
+  }, [dialogContext.setOpen, props.disabled]);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[DialogTrigger] `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 }}
+      Size={UDim2.fromOffset(140, 38)}
+      Text="Open Dialog"
+      TextColor3={Color3.fromRGB(240, 244, 250)}
+      TextSize={16}
+      ref={setTriggerRef}
+    >
+      {props.children}
+    </textbutton>
+  );
+}

package/src/Dialog/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { DialogContextValue } from "./types";
+
+const [DialogContextProvider, useDialogContext] = createStrictContext<DialogContextValue>("Dialog");
+
+export { DialogContextProvider, useDialogContext };

package/src/Dialog/types.ts

@@ -0,0 +1,52 @@
+import type { LayerInteractEvent } from "@lattice-ui/layer";
+import type React from "@rbxts/react";
+
+export type DialogSetOpen = (open: boolean) => void;
+
+export type DialogContextValue = {
+  open: boolean;
+  setOpen: DialogSetOpen;
+  modal: boolean;
+  triggerRef: React.MutableRefObject<GuiObject | undefined>;
+};
+
+export type DialogProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  modal?: boolean;
+  children?: React.ReactNode;
+};
+
+export type DialogTriggerProps = {
+  asChild?: boolean;
+  disabled?: boolean;
+  children?: React.ReactElement;
+};
+
+export type DialogPortalProps = {
+  container?: BasePlayerGui;
+  displayOrderBase?: number;
+  children?: React.ReactNode;
+};
+
+export type DialogOverlayProps = {
+  asChild?: boolean;
+  forceMount?: boolean;
+  children?: React.ReactElement;
+};
+
+export type DialogContentProps = {
+  forceMount?: boolean;
+  trapFocus?: boolean;
+  restoreFocus?: boolean;
+  onEscapeKeyDown?: (event: LayerInteractEvent) => void;
+  onPointerDownOutside?: (event: LayerInteractEvent) => void;
+  onInteractOutside?: (event: LayerInteractEvent) => void;
+  children?: React.ReactNode;
+};
+
+export type DialogCloseProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};

package/src/index.ts

@@ -0,0 +1,14 @@
+export { DialogClose } from "./Dialog/DialogClose";
+export { DialogContent } from "./Dialog/DialogContent";
+export { DialogOverlay } from "./Dialog/DialogOverlay";
+export { DialogPortal } from "./Dialog/DialogPortal";
+export { Dialog } from "./Dialog/DialogRoot";
+export { DialogTrigger } from "./Dialog/DialogTrigger";
+export type {
+  DialogCloseProps,
+  DialogContentProps,
+  DialogOverlayProps,
+  DialogPortalProps,
+  DialogProps,
+  DialogTriggerProps,
+} from "./Dialog/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"]
+    }
+  }
+}