@lattice-ui/popper 0.1.1

package/README.md

@@ -0,0 +1,9 @@
+# @lattice-ui/popper
+
+Initial skeleton package for popper-style positioning.
+
+## Planned first implementation
+
+- Anchor/content geometry observers.
+- Placement compute with flip/clamp/offset.
+- `usePopper` hook for live position updates.

package/out/compute.d.ts

@@ -0,0 +1,2 @@
+import type { ComputePopperInput, ComputePopperResult } from "./types";
+export declare function computePopper(input: ComputePopperInput): ComputePopperResult;

package/out/compute.luau

@@ -0,0 +1,77 @@
+-- Compiled with roblox-ts v3.0.0
+local function getPositionForPlacement(placement, anchorPosition, anchorSize, contentSize, offset, out)
+	if placement == "top" then
+		out.x = anchorPosition.X + anchorSize.X / 2 - contentSize.X / 2 + offset.X
+		out.y = anchorPosition.Y - contentSize.Y + offset.Y
+		return out
+	end
+	if placement == "left" then
+		out.x = anchorPosition.X - contentSize.X + offset.X
+		out.y = anchorPosition.Y + anchorSize.Y / 2 - contentSize.Y / 2 + offset.Y
+		return out
+	end
+	if placement == "right" then
+		out.x = anchorPosition.X + anchorSize.X + offset.X
+		out.y = anchorPosition.Y + anchorSize.Y / 2 - contentSize.Y / 2 + offset.Y
+		return out
+	end
+	out.x = anchorPosition.X + anchorSize.X / 2 - contentSize.X / 2 + offset.X
+	out.y = anchorPosition.Y + anchorSize.Y + offset.Y
+	return out
+end
+local function overflowsViewport(positionX, positionY, contentSize, viewportSize, padding)
+	local minX = padding
+	local minY = padding
+	local maxX = viewportSize.X - contentSize.X - padding
+	local maxY = viewportSize.Y - contentSize.Y - padding
+	return positionX < minX or positionX > maxX or positionY < minY or positionY > maxY
+end
+local function clampToViewport(positionX, positionY, contentSize, viewportSize, padding, out)
+	local minX = padding
+	local minY = padding
+	local maxX = math.max(minX, viewportSize.X - contentSize.X - padding)
+	local maxY = math.max(minY, viewportSize.Y - contentSize.Y - padding)
+	out.x = math.clamp(positionX, minX, maxX)
+	out.y = math.clamp(positionY, minY, maxY)
+	return out
+end
+local function computePopper(input)
+	local placement = input.placement or "bottom"
+	local offset = input.offset or Vector2.new(0, 0)
+	local _condition = input.padding
+	if _condition == nil then
+		_condition = 8
+	end
+	local padding = _condition
+	local primary = getPositionForPlacement(placement, input.anchorPosition, input.anchorSize, input.contentSize, offset, {
+		x = 0,
+		y = 0,
+	})
+	local fallbackPlacement = if placement == "top" then "bottom" elseif placement == "bottom" then "top" elseif placement == "left" then "right" else "left"
+	local resolvedPlacement = placement
+	local resolvedX = primary.x
+	local resolvedY = primary.y
+	if overflowsViewport(primary.x, primary.y, input.contentSize, input.viewportSize, padding) then
+		local fallback = getPositionForPlacement(fallbackPlacement, input.anchorPosition, input.anchorSize, input.contentSize, offset, {
+			x = 0,
+			y = 0,
+		})
+		if not overflowsViewport(fallback.x, fallback.y, input.contentSize, input.viewportSize, padding) then
+			resolvedPlacement = fallbackPlacement
+			resolvedX = fallback.x
+			resolvedY = fallback.y
+		end
+	end
+	local clamped = clampToViewport(resolvedX, resolvedY, input.contentSize, input.viewportSize, padding, {
+		x = 0,
+		y = 0,
+	})
+	return {
+		position = UDim2.fromOffset(clamped.x, clamped.y),
+		anchorPoint = Vector2.new(0, 0),
+		placement = resolvedPlacement,
+	}
+end
+return {
+	computePopper = computePopper,
+}

package/out/index.d.ts

@@ -0,0 +1,3 @@
+export * from "./compute";
+export * from "./types";
+export * from "./usePopper";

package/out/init.luau

@@ -0,0 +1,13 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+for _k, _v in TS.import(script, script, "compute") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "types") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "usePopper") or {} do
+	exports[_k] = _v
+end
+return exports

package/out/observers.d.ts

@@ -0,0 +1,4 @@
+export type ObserverUnsubscribe = () => void;
+export declare function subscribeAnchor(anchor: GuiObject, onChange: () => void): ObserverUnsubscribe;
+export declare function subscribeContent(content: GuiObject, onChange: () => void): ObserverUnsubscribe;
+export declare function subscribeViewport(onChange: () => void): ObserverUnsubscribe;

package/out/observers.luau

@@ -0,0 +1,52 @@
+-- Compiled with roblox-ts v3.0.0
+local WorkspaceService = game:GetService("Workspace")
+local function subscribeGuiObjectLayout(guiObject, onChange)
+	local positionConnection = guiObject:GetPropertyChangedSignal("AbsolutePosition"):Connect(function()
+		onChange()
+	end)
+	local sizeConnection = guiObject:GetPropertyChangedSignal("AbsoluteSize"):Connect(function()
+		onChange()
+	end)
+	return function()
+		positionConnection:Disconnect()
+		sizeConnection:Disconnect()
+	end
+end
+local function subscribeAnchor(anchor, onChange)
+	return subscribeGuiObjectLayout(anchor, onChange)
+end
+local function subscribeContent(content, onChange)
+	return subscribeGuiObjectLayout(content, onChange)
+end
+local function subscribeViewport(onChange)
+	local viewportConnection
+	local reconnectViewportConnection = function()
+		if viewportConnection then
+			viewportConnection:Disconnect()
+			viewportConnection = nil
+		end
+		local currentCamera = WorkspaceService.CurrentCamera
+		if currentCamera then
+			viewportConnection = currentCamera:GetPropertyChangedSignal("ViewportSize"):Connect(function()
+				onChange()
+			end)
+		end
+	end
+	reconnectViewportConnection()
+	local cameraConnection = WorkspaceService:GetPropertyChangedSignal("CurrentCamera"):Connect(function()
+		reconnectViewportConnection()
+		onChange()
+	end)
+	return function()
+		if viewportConnection then
+			viewportConnection:Disconnect()
+			viewportConnection = nil
+		end
+		cameraConnection:Disconnect()
+	end
+end
+return {
+	subscribeAnchor = subscribeAnchor,
+	subscribeContent = subscribeContent,
+	subscribeViewport = subscribeViewport,
+}

package/out/types.d.ts

@@ -0,0 +1,27 @@
+import type React from "@rbxts/react";
+export type PopperPlacement = "top" | "bottom" | "left" | "right";
+export type ComputePopperInput = {
+    anchorPosition: Vector2;
+    anchorSize: Vector2;
+    contentSize: Vector2;
+    viewportSize: Vector2;
+    placement?: PopperPlacement;
+    offset?: Vector2;
+    padding?: number;
+};
+export type ComputePopperResult = {
+    position: UDim2;
+    anchorPoint: Vector2;
+    placement: PopperPlacement;
+};
+export type UsePopperOptions = {
+    anchorRef: React.RefObject<GuiObject> | React.MutableRefObject<GuiObject | undefined>;
+    contentRef: React.RefObject<GuiObject> | React.MutableRefObject<GuiObject | undefined>;
+    placement?: PopperPlacement;
+    offset?: Vector2;
+    padding?: number;
+    enabled?: boolean;
+};
+export type UsePopperResult = ComputePopperResult & {
+    update: () => void;
+};

package/out/types.luau

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

package/out/usePopper.d.ts

@@ -0,0 +1,2 @@
+import type { UsePopperOptions, UsePopperResult } from "./types";
+export declare function usePopper(options: UsePopperOptions): UsePopperResult;

package/out/usePopper.luau

@@ -0,0 +1,132 @@
+-- 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 computePopper = TS.import(script, script.Parent, "compute").computePopper
+local _observers = TS.import(script, script.Parent, "observers")
+local subscribeAnchor = _observers.subscribeAnchor
+local subscribeContent = _observers.subscribeContent
+local subscribeViewport = _observers.subscribeViewport
+local WorkspaceService = game:GetService("Workspace")
+local RunService = game:GetService("RunService")
+local function readGuiRef(ref)
+	return ref.current
+end
+local function getDefaultComputedResult(placement)
+	return {
+		anchorPoint = Vector2.new(0, 0),
+		placement = placement or "bottom",
+		position = UDim2.fromOffset(0, 0),
+	}
+end
+local function areResultsEqual(a, b)
+	return a.placement == b.placement and a.anchorPoint.X == b.anchorPoint.X and a.anchorPoint.Y == b.anchorPoint.Y and a.position.X.Scale == b.position.X.Scale and a.position.X.Offset == b.position.X.Offset and a.position.Y.Scale == b.position.Y.Scale and a.position.Y.Offset == b.position.Y.Offset
+end
+local function usePopper(options)
+	local _condition = options.enabled
+	if _condition == nil then
+		_condition = true
+	end
+	local enabled = _condition
+	local computedResult, setComputedResult = React.useState(function()
+		return getDefaultComputedResult(options.placement)
+	end)
+	local update = React.useCallback(function()
+		if not enabled then
+			return nil
+		end
+		local anchor = readGuiRef(options.anchorRef)
+		local content = readGuiRef(options.contentRef)
+		if not anchor or not content then
+			return nil
+		end
+		local _result = WorkspaceService.CurrentCamera
+		if _result ~= nil then
+			_result = _result.ViewportSize
+		end
+		local _condition_1 = _result
+		if _condition_1 == nil then
+			_condition_1 = Vector2.new(1920, 1080)
+		end
+		local viewportSize = _condition_1
+		local nextResult = computePopper({
+			anchorPosition = anchor.AbsolutePosition,
+			anchorSize = anchor.AbsoluteSize,
+			contentSize = content.AbsoluteSize,
+			offset = options.offset,
+			padding = options.padding,
+			placement = options.placement,
+			viewportSize = viewportSize,
+		})
+		setComputedResult(function(currentResult)
+			return if areResultsEqual(currentResult, nextResult) then currentResult else nextResult
+		end)
+	end, { enabled, options.anchorRef, options.contentRef, options.offset, options.padding, options.placement })
+	React.useEffect(function()
+		update()
+	end, { update })
+	React.useEffect(function()
+		if not enabled then
+			return nil
+		end
+		local disconnectAnchor
+		local disconnectContent
+		local disconnectViewport
+		local waitForRefsConnection
+		local attached = false
+		local attachObservers = function()
+			if attached then
+				return true
+			end
+			local anchor = readGuiRef(options.anchorRef)
+			local content = readGuiRef(options.contentRef)
+			if not anchor or not content then
+				return false
+			end
+			disconnectAnchor = subscribeAnchor(anchor, update)
+			disconnectContent = subscribeContent(content, update)
+			disconnectViewport = subscribeViewport(update)
+			attached = true
+			return true
+		end
+		if not attachObservers() then
+			waitForRefsConnection = RunService.Heartbeat:Connect(function()
+				if attachObservers() then
+					if waitForRefsConnection then
+						waitForRefsConnection:Disconnect()
+						waitForRefsConnection = nil
+					end
+					update()
+				end
+			end)
+		else
+			update()
+		end
+		return function()
+			if waitForRefsConnection then
+				waitForRefsConnection:Disconnect()
+				waitForRefsConnection = nil
+			end
+			local _result = disconnectAnchor
+			if _result ~= nil then
+				_result()
+			end
+			local _result_1 = disconnectContent
+			if _result_1 ~= nil then
+				_result_1()
+			end
+			local _result_2 = disconnectViewport
+			if _result_2 ~= nil then
+				_result_2()
+			end
+		end
+	end, { enabled, options.anchorRef, options.contentRef, update })
+	return React.useMemo(function()
+		local _object = table.clone(computedResult)
+		setmetatable(_object, nil)
+		_object.update = update
+		return _object
+	end, { computedResult, update })
+end
+return {
+	usePopper = usePopper,
+}

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@lattice-ui/popper",
+  "version": "0.1.1",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@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/compute.ts

@@ -0,0 +1,116 @@
+import type { ComputePopperInput, ComputePopperResult, PopperPlacement } from "./types";
+
+type XY = {
+  x: number;
+  y: number;
+};
+
+function getPositionForPlacement(
+  placement: PopperPlacement,
+  anchorPosition: Vector2,
+  anchorSize: Vector2,
+  contentSize: Vector2,
+  offset: Vector2,
+  out: XY,
+): XY {
+  if (placement === "top") {
+    out.x = anchorPosition.X + anchorSize.X / 2 - contentSize.X / 2 + offset.X;
+    out.y = anchorPosition.Y - contentSize.Y + offset.Y;
+    return out;
+  }
+
+  if (placement === "left") {
+    out.x = anchorPosition.X - contentSize.X + offset.X;
+    out.y = anchorPosition.Y + anchorSize.Y / 2 - contentSize.Y / 2 + offset.Y;
+    return out;
+  }
+
+  if (placement === "right") {
+    out.x = anchorPosition.X + anchorSize.X + offset.X;
+    out.y = anchorPosition.Y + anchorSize.Y / 2 - contentSize.Y / 2 + offset.Y;
+    return out;
+  }
+
+  out.x = anchorPosition.X + anchorSize.X / 2 - contentSize.X / 2 + offset.X;
+  out.y = anchorPosition.Y + anchorSize.Y + offset.Y;
+  return out;
+}
+
+function overflowsViewport(
+  positionX: number,
+  positionY: number,
+  contentSize: Vector2,
+  viewportSize: Vector2,
+  padding: number,
+) {
+  const minX = padding;
+  const minY = padding;
+  const maxX = viewportSize.X - contentSize.X - padding;
+  const maxY = viewportSize.Y - contentSize.Y - padding;
+  return positionX < minX || positionX > maxX || positionY < minY || positionY > maxY;
+}
+
+function clampToViewport(
+  positionX: number,
+  positionY: number,
+  contentSize: Vector2,
+  viewportSize: Vector2,
+  padding: number,
+  out: XY,
+): XY {
+  const minX = padding;
+  const minY = padding;
+  const maxX = math.max(minX, viewportSize.X - contentSize.X - padding);
+  const maxY = math.max(minY, viewportSize.Y - contentSize.Y - padding);
+
+  out.x = math.clamp(positionX, minX, maxX);
+  out.y = math.clamp(positionY, minY, maxY);
+  return out;
+}
+
+export function computePopper(input: ComputePopperInput): ComputePopperResult {
+  const placement = input.placement ?? "bottom";
+  const offset = input.offset ?? new Vector2(0, 0);
+  const padding = input.padding ?? 8;
+
+  const primary = getPositionForPlacement(
+    placement,
+    input.anchorPosition,
+    input.anchorSize,
+    input.contentSize,
+    offset,
+    { x: 0, y: 0 },
+  );
+
+  const fallbackPlacement: PopperPlacement =
+    placement === "top" ? "bottom" : placement === "bottom" ? "top" : placement === "left" ? "right" : "left";
+
+  let resolvedPlacement = placement;
+  let resolvedX = primary.x;
+  let resolvedY = primary.y;
+
+  if (overflowsViewport(primary.x, primary.y, input.contentSize, input.viewportSize, padding)) {
+    const fallback = getPositionForPlacement(
+      fallbackPlacement,
+      input.anchorPosition,
+      input.anchorSize,
+      input.contentSize,
+      offset,
+      { x: 0, y: 0 },
+    );
+
+    if (!overflowsViewport(fallback.x, fallback.y, input.contentSize, input.viewportSize, padding)) {
+      resolvedPlacement = fallbackPlacement;
+      resolvedX = fallback.x;
+      resolvedY = fallback.y;
+    }
+  }
+
+  const clamped = clampToViewport(resolvedX, resolvedY, input.contentSize, input.viewportSize, padding, { x: 0, y: 0 });
+
+  return {
+    position: UDim2.fromOffset(clamped.x, clamped.y),
+    anchorPoint: new Vector2(0, 0),
+    placement: resolvedPlacement,
+  };
+}

package/src/index.ts

@@ -0,0 +1,3 @@
+export * from "./compute";
+export * from "./types";
+export * from "./usePopper";

package/src/observers.ts

@@ -0,0 +1,57 @@
+const WorkspaceService = game.GetService("Workspace");
+
+export type ObserverUnsubscribe = () => void;
+
+function subscribeGuiObjectLayout(guiObject: GuiObject, onChange: () => void): ObserverUnsubscribe {
+  const positionConnection = guiObject.GetPropertyChangedSignal("AbsolutePosition").Connect(() => {
+    onChange();
+  });
+  const sizeConnection = guiObject.GetPropertyChangedSignal("AbsoluteSize").Connect(() => {
+    onChange();
+  });
+
+  return () => {
+    positionConnection.Disconnect();
+    sizeConnection.Disconnect();
+  };
+}
+
+export function subscribeAnchor(anchor: GuiObject, onChange: () => void): ObserverUnsubscribe {
+  return subscribeGuiObjectLayout(anchor, onChange);
+}
+
+export function subscribeContent(content: GuiObject, onChange: () => void): ObserverUnsubscribe {
+  return subscribeGuiObjectLayout(content, onChange);
+}
+
+export function subscribeViewport(onChange: () => void): ObserverUnsubscribe {
+  let viewportConnection: RBXScriptConnection | undefined;
+
+  const reconnectViewportConnection = () => {
+    if (viewportConnection) {
+      viewportConnection.Disconnect();
+      viewportConnection = undefined;
+    }
+
+    const currentCamera = WorkspaceService.CurrentCamera;
+    if (currentCamera) {
+      viewportConnection = currentCamera.GetPropertyChangedSignal("ViewportSize").Connect(() => {
+        onChange();
+      });
+    }
+  };
+
+  reconnectViewportConnection();
+  const cameraConnection = WorkspaceService.GetPropertyChangedSignal("CurrentCamera").Connect(() => {
+    reconnectViewportConnection();
+    onChange();
+  });
+
+  return () => {
+    if (viewportConnection) {
+      viewportConnection.Disconnect();
+      viewportConnection = undefined;
+    }
+    cameraConnection.Disconnect();
+  };
+}

package/src/types.ts

@@ -0,0 +1,32 @@
+import type React from "@rbxts/react";
+
+export type PopperPlacement = "top" | "bottom" | "left" | "right";
+
+export type ComputePopperInput = {
+  anchorPosition: Vector2;
+  anchorSize: Vector2;
+  contentSize: Vector2;
+  viewportSize: Vector2;
+  placement?: PopperPlacement;
+  offset?: Vector2;
+  padding?: number;
+};
+
+export type ComputePopperResult = {
+  position: UDim2;
+  anchorPoint: Vector2;
+  placement: PopperPlacement;
+};
+
+export type UsePopperOptions = {
+  anchorRef: React.RefObject<GuiObject> | React.MutableRefObject<GuiObject | undefined>;
+  contentRef: React.RefObject<GuiObject> | React.MutableRefObject<GuiObject | undefined>;
+  placement?: PopperPlacement;
+  offset?: Vector2;
+  padding?: number;
+  enabled?: boolean;
+};
+
+export type UsePopperResult = ComputePopperResult & {
+  update: () => void;
+};

package/src/usePopper.ts

@@ -0,0 +1,130 @@
+import { React } from "@lattice-ui/core";
+import { computePopper } from "./compute";
+import { subscribeAnchor, subscribeContent, subscribeViewport } from "./observers";
+import type { ComputePopperResult, UsePopperOptions, UsePopperResult } from "./types";
+
+const WorkspaceService = game.GetService("Workspace");
+const RunService = game.GetService("RunService");
+
+function readGuiRef(ref: UsePopperOptions["anchorRef"] | UsePopperOptions["contentRef"]): GuiObject | undefined {
+  return ref.current;
+}
+
+function getDefaultComputedResult(placement: UsePopperOptions["placement"]): ComputePopperResult {
+  return {
+    anchorPoint: new Vector2(0, 0),
+    placement: placement ?? "bottom",
+    position: UDim2.fromOffset(0, 0),
+  };
+}
+
+function areResultsEqual(a: ComputePopperResult, b: ComputePopperResult) {
+  return (
+    a.placement === b.placement &&
+    a.anchorPoint.X === b.anchorPoint.X &&
+    a.anchorPoint.Y === b.anchorPoint.Y &&
+    a.position.X.Scale === b.position.X.Scale &&
+    a.position.X.Offset === b.position.X.Offset &&
+    a.position.Y.Scale === b.position.Y.Scale &&
+    a.position.Y.Offset === b.position.Y.Offset
+  );
+}
+
+export function usePopper(options: UsePopperOptions): UsePopperResult {
+  const enabled = options.enabled ?? true;
+  const [computedResult, setComputedResult] = React.useState<ComputePopperResult>(() =>
+    getDefaultComputedResult(options.placement),
+  );
+
+  const update = React.useCallback(() => {
+    if (!enabled) {
+      return;
+    }
+
+    const anchor = readGuiRef(options.anchorRef);
+    const content = readGuiRef(options.contentRef);
+    if (!anchor || !content) {
+      return;
+    }
+
+    const viewportSize = WorkspaceService.CurrentCamera?.ViewportSize ?? new Vector2(1920, 1080);
+    const nextResult = computePopper({
+      anchorPosition: anchor.AbsolutePosition,
+      anchorSize: anchor.AbsoluteSize,
+      contentSize: content.AbsoluteSize,
+      offset: options.offset,
+      padding: options.padding,
+      placement: options.placement,
+      viewportSize,
+    });
+
+    setComputedResult((currentResult) => (areResultsEqual(currentResult, nextResult) ? currentResult : nextResult));
+  }, [enabled, options.anchorRef, options.contentRef, options.offset, options.padding, options.placement]);
+
+  React.useEffect(() => {
+    update();
+  }, [update]);
+
+  React.useEffect(() => {
+    if (!enabled) {
+      return;
+    }
+
+    let disconnectAnchor: (() => void) | undefined;
+    let disconnectContent: (() => void) | undefined;
+    let disconnectViewport: (() => void) | undefined;
+    let waitForRefsConnection: RBXScriptConnection | undefined;
+    let attached = false;
+
+    const attachObservers = () => {
+      if (attached) {
+        return true;
+      }
+
+      const anchor = readGuiRef(options.anchorRef);
+      const content = readGuiRef(options.contentRef);
+      if (!anchor || !content) {
+        return false;
+      }
+
+      disconnectAnchor = subscribeAnchor(anchor, update);
+      disconnectContent = subscribeContent(content, update);
+      disconnectViewport = subscribeViewport(update);
+      attached = true;
+      return true;
+    };
+
+    if (!attachObservers()) {
+      waitForRefsConnection = RunService.Heartbeat.Connect(() => {
+        if (attachObservers()) {
+          if (waitForRefsConnection) {
+            waitForRefsConnection.Disconnect();
+            waitForRefsConnection = undefined;
+          }
+          update();
+        }
+      });
+    } else {
+      update();
+    }
+
+    return () => {
+      if (waitForRefsConnection) {
+        waitForRefsConnection.Disconnect();
+        waitForRefsConnection = undefined;
+      }
+
+      disconnectAnchor?.();
+      disconnectContent?.();
+      disconnectViewport?.();
+    };
+  }, [enabled, options.anchorRef, options.contentRef, update]);
+
+  return React.useMemo(
+    () => ({
+      ...computedResult,
+      update,
+    }),
+    [computedResult, update],
+  );
+}

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"]
+    }
+  }
+}