@lattice-ui/tabs 0.1.1

package/README.md

@@ -0,0 +1,11 @@
+# @lattice-ui/tabs
+
+Behavior-only Tabs primitives for Roblox UI, aligned with the lattice compound pattern.
+
+## Exports
+
+- `Tabs` (`TabsRoot` alias)
+- `TabsRoot`
+- `TabsList`
+- `TabsTrigger`
+- `TabsContent`

package/out/Tabs/TabsContent.d.ts

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

package/out/Tabs/TabsContent.luau

@@ -0,0 +1,56 @@
+-- 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 Presence = TS.import(script, TS.getModule(script, "@lattice-ui", "layer").out).Presence
+local useTabsContext = TS.import(script, script.Parent, "context").useTabsContext
+local createTabsContentName = TS.import(script, script.Parent, "internals", "ids").createTabsContentName
+local function TabsContentImpl(props)
+	local contentName = createTabsContentName(props.value)
+	if props.asChild then
+		local child = props.children
+		if not React.isValidElement(child) then
+			error("[TabsContent] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Name = contentName,
+			Visible = props.visible,
+		}, child)
+	end
+	return React.createElement("frame", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(0, 0),
+		Visible = props.visible,
+	}, props.children)
+end
+local function TabsContent(props)
+	local tabsContext = useTabsContext()
+	local selected = tabsContext.value == props.value
+	local forceMount = props.forceMount == true
+	if not selected and not forceMount then
+		return nil
+	end
+	if forceMount then
+		return React.createElement(TabsContentImpl, {
+			asChild = props.asChild,
+			value = props.value,
+			visible = selected,
+		}, props.children)
+	end
+	return React.createElement(Presence, {
+		exitFallbackMs = 0,
+		present = selected,
+		render = function(state)
+			return React.createElement(TabsContentImpl, {
+				asChild = props.asChild,
+				value = props.value,
+				visible = state.isPresent,
+			}, props.children)
+		end,
+	})
+end
+return {
+	TabsContent = TabsContent,
+}

package/out/Tabs/TabsList.d.ts

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

package/out/Tabs/TabsList.luau

@@ -0,0 +1,30 @@
+-- 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 RovingFocusGroup = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusGroup
+local useTabsContext = TS.import(script, script.Parent, "context").useTabsContext
+local function TabsList(props)
+	local tabsContext = useTabsContext()
+	local listNode = if props.asChild then ((function()
+		local child = props.children
+		if not React.isValidElement(child) then
+			error("[TabsList] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, nil, child)
+	end)()) else (React.createElement("frame", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(0, 0),
+	}, props.children))
+	return React.createElement(RovingFocusGroup, {
+		active = true,
+		autoFocus = "none",
+		loop = true,
+		orientation = tabsContext.orientation,
+	}, listNode)
+end
+return {
+	TabsList = TabsList,
+}

package/out/Tabs/TabsRoot.d.ts

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

package/out/Tabs/TabsRoot.luau

@@ -0,0 +1,212 @@
+-- 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 TabsContextProvider = TS.import(script, script.Parent, "context").TabsContextProvider
+local function getOrderedTriggers(triggers)
+	local _array = {}
+	local _length = #_array
+	table.move(triggers, 1, #triggers, _length + 1, _array)
+	local ordered = _array
+	table.sort(ordered, function(a, b)
+		return a.order < b.order
+	end)
+	return ordered
+end
+local function resolveNextValue(currentValue, orderedTriggers, fallbackOrder)
+	-- ▼ ReadonlyArray.filter ▼
+	local _newValue = {}
+	local _callback = function(trigger)
+		return not trigger.disabled
+	end
+	local _length = 0
+	for _k, _v in orderedTriggers do
+		if _callback(_v, _k - 1, orderedTriggers) == true then
+			_length += 1
+			_newValue[_length] = _v
+		end
+	end
+	-- ▲ ReadonlyArray.filter ▲
+	local enabled = _newValue
+	if #enabled == 0 then
+		return nil
+	end
+	if currentValue == nil then
+		local _result = enabled[1]
+		if _result ~= nil then
+			_result = _result.value
+		end
+		return _result
+	end
+	-- ▼ ReadonlyArray.find ▼
+	local _callback_1 = function(trigger)
+		return trigger.value == currentValue
+	end
+	local _result
+	for _i, _v in enabled do
+		if _callback_1(_v, _i - 1, enabled) == true then
+			_result = _v
+			break
+		end
+	end
+	-- ▲ ReadonlyArray.find ▲
+	local selectedEnabled = _result
+	if selectedEnabled then
+		return selectedEnabled.value
+	end
+	-- ▼ ReadonlyArray.find ▼
+	local _callback_2 = function(trigger)
+		return trigger.value == currentValue
+	end
+	local _result_1
+	for _i, _v in orderedTriggers do
+		if _callback_2(_v, _i - 1, orderedTriggers) == true then
+			_result_1 = _v
+			break
+		end
+	end
+	-- ▲ ReadonlyArray.find ▲
+	local selected = _result_1
+	local _result_2 = selected
+	if _result_2 ~= nil then
+		_result_2 = _result_2.order
+	end
+	local _condition = _result_2
+	if _condition == nil then
+		_condition = fallbackOrder
+	end
+	local anchorOrder = _condition
+	if anchorOrder ~= nil then
+		-- ▼ ReadonlyArray.find ▼
+		local _callback_3 = function(trigger)
+			return trigger.order > anchorOrder
+		end
+		local _result_3
+		for _i, _v in enabled do
+			if _callback_3(_v, _i - 1, enabled) == true then
+				_result_3 = _v
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.find ▲
+		local after = _result_3
+		if after then
+			return after.value
+		end
+	end
+	local _result_3 = enabled[1]
+	if _result_3 ~= nil then
+		_result_3 = _result_3.value
+	end
+	return _result_3
+end
+local function TabsRoot(props)
+	local _binding = useControllableState({
+		value = props.value,
+		defaultValue = props.defaultValue,
+		onChange = function(nextValue)
+			if nextValue ~= nil then
+				local _result = props.onValueChange
+				if _result ~= nil then
+					_result(nextValue)
+				end
+			end
+		end,
+	})
+	local value = _binding[1]
+	local setValueState = _binding[2]
+	local orientation = props.orientation or "horizontal"
+	local activationMode = props.activationMode or "automatic"
+	local triggerRegistryRef = React.useRef({})
+	local lastSelectedOrderRef = React.useRef()
+	local registryRevision, setRegistryRevision = React.useState(0)
+	local registerTrigger = React.useCallback(function(trigger)
+		local _current = triggerRegistryRef.current
+		local _trigger = trigger
+		table.insert(_current, _trigger)
+		setRegistryRevision(function(revision)
+			return revision + 1
+		end)
+		return function()
+			local _exp = triggerRegistryRef.current
+			-- ▼ ReadonlyArray.findIndex ▼
+			local _callback = function(entry)
+				return entry.id == trigger.id
+			end
+			local _result = -1
+			for _i, _v in _exp do
+				if _callback(_v, _i - 1, _exp) == true then
+					_result = _i - 1
+					break
+				end
+			end
+			-- ▲ ReadonlyArray.findIndex ▲
+			local index = _result
+			if index >= 0 then
+				table.remove(triggerRegistryRef.current, index + 1)
+				setRegistryRevision(function(revision)
+					return revision + 1
+				end)
+			end
+		end
+	end, {})
+	local setValue = React.useCallback(function(nextValue)
+		local orderedTriggers = getOrderedTriggers(triggerRegistryRef.current)
+		-- ▼ ReadonlyArray.find ▼
+		local _callback = function(trigger)
+			return trigger.value == nextValue and not trigger.disabled
+		end
+		local _result
+		for _i, _v in orderedTriggers do
+			if _callback(_v, _i - 1, orderedTriggers) == true then
+				_result = _v
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.find ▲
+		local selected = _result
+		if selected then
+			lastSelectedOrderRef.current = selected.order
+		end
+		setValueState(nextValue)
+	end, { setValueState })
+	React.useEffect(function()
+		local orderedTriggers = getOrderedTriggers(triggerRegistryRef.current)
+		-- ▼ ReadonlyArray.find ▼
+		local _callback = function(trigger)
+			return trigger.value == value and not trigger.disabled
+		end
+		local _result
+		for _i, _v in orderedTriggers do
+			if _callback(_v, _i - 1, orderedTriggers) == true then
+				_result = _v
+				break
+			end
+		end
+		-- ▲ ReadonlyArray.find ▲
+		local selected = _result
+		if selected then
+			lastSelectedOrderRef.current = selected.order
+		end
+		local nextValue = resolveNextValue(value, orderedTriggers, lastSelectedOrderRef.current)
+		if nextValue ~= value then
+			setValueState(nextValue)
+		end
+	end, { registryRevision, setValueState, value })
+	local contextValue = React.useMemo(function()
+		return {
+			value = value,
+			setValue = setValue,
+			orientation = orientation,
+			activationMode = activationMode,
+			registerTrigger = registerTrigger,
+		}
+	end, { activationMode, orientation, registerTrigger, setValue, value })
+	return React.createElement(TabsContextProvider, {
+		value = contextValue,
+	}, props.children)
+end
+return {
+	TabsRoot = TabsRoot,
+}

package/out/Tabs/TabsTrigger.d.ts

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

package/out/Tabs/TabsTrigger.luau

@@ -0,0 +1,109 @@
+-- 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 RovingFocusItem = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusItem
+local useTabsContext = TS.import(script, script.Parent, "context").useTabsContext
+local createTabsTriggerName = TS.import(script, script.Parent, "internals", "ids").createTabsTriggerName
+local nextTriggerId = 0
+local nextTriggerOrder = 0
+local function toGuiObject(instance)
+	if not instance or not instance:IsA("GuiObject") then
+		return nil
+	end
+	return instance
+end
+local function TabsTrigger(props)
+	local tabsContext = useTabsContext()
+	local triggerRef = React.useRef()
+	local selected = tabsContext.value == props.value
+	local disabled = props.disabled == true
+	local triggerIdRef = React.useRef(0)
+	if triggerIdRef.current == 0 then
+		nextTriggerId += 1
+		triggerIdRef.current = nextTriggerId
+	end
+	local triggerOrderRef = React.useRef(0)
+	if triggerOrderRef.current == 0 then
+		nextTriggerOrder += 1
+		triggerOrderRef.current = nextTriggerOrder
+	end
+	React.useEffect(function()
+		return tabsContext.registerTrigger({
+			id = triggerIdRef.current,
+			value = props.value,
+			disabled = disabled,
+			ref = triggerRef,
+			order = triggerOrderRef.current,
+		})
+	end, { disabled, props.value, tabsContext })
+	local setTriggerRef = React.useCallback(function(instance)
+		triggerRef.current = toGuiObject(instance)
+	end, {})
+	local handleActivated = React.useCallback(function()
+		if disabled then
+			return nil
+		end
+		tabsContext.setValue(props.value)
+	end, { disabled, props.value, tabsContext })
+	local handleSelectionGained = React.useCallback(function()
+		if disabled or tabsContext.activationMode ~= "automatic" then
+			return nil
+		end
+		tabsContext.setValue(props.value)
+	end, { disabled, props.value, tabsContext })
+	local handleInputBegan = React.useCallback(function(_rbx, inputObject)
+		if disabled or tabsContext.activationMode ~= "manual" then
+			return nil
+		end
+		local keyCode = inputObject.KeyCode
+		if keyCode ~= Enum.KeyCode.Return and keyCode ~= Enum.KeyCode.Space then
+			return nil
+		end
+		tabsContext.setValue(props.value)
+	end, { disabled, props.value, tabsContext })
+	local eventHandlers = React.useMemo(function()
+		return {
+			Activated = handleActivated,
+			SelectionGained = handleSelectionGained,
+			InputBegan = handleInputBegan,
+		}
+	end, { handleActivated, handleInputBegan, handleSelectionGained })
+	local triggerName = React.useMemo(function()
+		return createTabsTriggerName(props.value)
+	end, { props.value })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[TabsTrigger] `asChild` requires a child element.")
+		end
+		return React.createElement(RovingFocusItem, {
+			asChild = true,
+			disabled = disabled,
+		}, React.createElement(Slot, {
+			Event = eventHandlers,
+			Name = triggerName,
+			ref = setTriggerRef,
+		}, child))
+	end
+	return React.createElement(RovingFocusItem, {
+		asChild = true,
+		disabled = disabled,
+	}, React.createElement("textbutton", {
+		Active = not disabled,
+		AutoButtonColor = false,
+		BackgroundColor3 = if selected then Color3.fromRGB(86, 137, 245) else Color3.fromRGB(47, 53, 68),
+		BorderSizePixel = 0,
+		Event = eventHandlers,
+		Selectable = not disabled,
+		Size = UDim2.fromOffset(132, 34),
+		Text = props.value,
+		TextColor3 = if disabled then Color3.fromRGB(136, 144, 159) else Color3.fromRGB(235, 240, 248),
+		TextSize = 15,
+		ref = setTriggerRef,
+	}, props.children))
+end
+return {
+	TabsTrigger = TabsTrigger,
+}

package/out/Tabs/context.d.ts

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

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

package/out/Tabs/internals/ids.d.ts

@@ -0,0 +1,2 @@
+export declare function createTabsTriggerName(value: string): string;
+export declare function createTabsContentName(value: string): string;

package/out/Tabs/internals/ids.luau

@@ -0,0 +1,16 @@
+-- Compiled with roblox-ts v3.0.0
+local function sanitizeValue(value)
+	local lowered = string.lower(value)
+	local sanitized = (string.gsub(lowered, "[^%w_%-]", "-"))
+	return if #sanitized > 0 then sanitized else "tab"
+end
+local function createTabsTriggerName(value)
+	return `TabsTrigger:{sanitizeValue(value)}`
+end
+local function createTabsContentName(value)
+	return `TabsContent:{sanitizeValue(value)}`
+end
+return {
+	createTabsTriggerName = createTabsTriggerName,
+	createTabsContentName = createTabsContentName,
+}

package/out/Tabs/types.d.ts

@@ -0,0 +1,42 @@
+import type React from "@rbxts/react";
+export type TabsOrientation = "horizontal" | "vertical";
+export type TabsActivationMode = "automatic" | "manual";
+export type TabsSetValue = (value: string) => void;
+export type TabsTriggerRegistration = {
+    id: number;
+    value: string;
+    disabled: boolean;
+    ref: React.MutableRefObject<GuiObject | undefined>;
+    order: number;
+};
+export type TabsContextValue = {
+    value?: string;
+    setValue: TabsSetValue;
+    orientation: TabsOrientation;
+    activationMode: TabsActivationMode;
+    registerTrigger: (trigger: TabsTriggerRegistration) => () => void;
+};
+export type TabsProps = {
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string) => void;
+    orientation?: TabsOrientation;
+    activationMode?: TabsActivationMode;
+    children?: React.ReactNode;
+};
+export type TabsListProps = {
+    asChild?: boolean;
+    children?: React.ReactNode;
+};
+export type TabsTriggerProps = {
+    value: string;
+    asChild?: boolean;
+    disabled?: boolean;
+    children?: React.ReactElement;
+};
+export type TabsContentProps = {
+    value: string;
+    asChild?: boolean;
+    forceMount?: boolean;
+    children?: React.ReactNode;
+};

package/out/Tabs/types.luau

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

package/out/index.d.ts

@@ -0,0 +1,5 @@
+export { TabsContent } from "./Tabs/TabsContent";
+export { TabsList } from "./Tabs/TabsList";
+export { TabsRoot, TabsRoot as Tabs } from "./Tabs/TabsRoot";
+export { TabsTrigger } from "./Tabs/TabsTrigger";
+export type { TabsActivationMode, TabsContentProps, TabsContextValue, TabsListProps, TabsOrientation, TabsProps, TabsTriggerProps, } from "./Tabs/types";

package/out/init.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.TabsContent = TS.import(script, script, "Tabs", "TabsContent").TabsContent
+exports.TabsList = TS.import(script, script, "Tabs", "TabsList").TabsList
+local _TabsRoot = TS.import(script, script, "Tabs", "TabsRoot")
+exports.TabsRoot = _TabsRoot.TabsRoot
+exports.Tabs = _TabsRoot.TabsRoot
+exports.TabsTrigger = TS.import(script, script, "Tabs", "TabsTrigger").TabsTrigger
+return exports

package/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@lattice-ui/tabs",
+  "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/Tabs/TabsContent.tsx

@@ -0,0 +1,65 @@
+import { React, Slot } from "@lattice-ui/core";
+import { Presence } from "@lattice-ui/layer";
+import { useTabsContext } from "./context";
+import { createTabsContentName } from "./internals/ids";
+import type { TabsContentProps } from "./types";
+
+type TabsContentImplProps = {
+  visible: boolean;
+  value: string;
+  asChild?: boolean;
+  children?: React.ReactNode;
+};
+
+function TabsContentImpl(props: TabsContentImplProps) {
+  const contentName = createTabsContentName(props.value);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!React.isValidElement(child)) {
+      error("[TabsContent] `asChild` requires a child element.");
+    }
+
+    return (
+      <Slot Name={contentName} Visible={props.visible}>
+        {child}
+      </Slot>
+    );
+  }
+
+  return (
+    <frame BackgroundTransparency={1} BorderSizePixel={0} Size={UDim2.fromOffset(0, 0)} Visible={props.visible}>
+      {props.children}
+    </frame>
+  );
+}
+
+export function TabsContent(props: TabsContentProps) {
+  const tabsContext = useTabsContext();
+  const selected = tabsContext.value === props.value;
+  const forceMount = props.forceMount === true;
+
+  if (!selected && !forceMount) {
+    return undefined;
+  }
+
+  if (forceMount) {
+    return (
+      <TabsContentImpl asChild={props.asChild} value={props.value} visible={selected}>
+        {props.children}
+      </TabsContentImpl>
+    );
+  }
+
+  return (
+    <Presence
+      exitFallbackMs={0}
+      present={selected}
+      render={(state) => (
+        <TabsContentImpl asChild={props.asChild} value={props.value} visible={state.isPresent}>
+          {props.children}
+        </TabsContentImpl>
+      )}
+    />
+  );
+}

package/src/Tabs/TabsList.tsx

@@ -0,0 +1,29 @@
+import { React, Slot } from "@lattice-ui/core";
+import { RovingFocusGroup } from "@lattice-ui/focus";
+import { useTabsContext } from "./context";
+import type { TabsListProps } from "./types";
+
+export function TabsList(props: TabsListProps) {
+  const tabsContext = useTabsContext();
+
+  const listNode = props.asChild ? (
+    (() => {
+      const child = props.children;
+      if (!React.isValidElement(child)) {
+        error("[TabsList] `asChild` requires a child element.");
+      }
+
+      return <Slot>{child}</Slot>;
+    })()
+  ) : (
+    <frame BackgroundTransparency={1} BorderSizePixel={0} Size={UDim2.fromOffset(0, 0)}>
+      {props.children}
+    </frame>
+  );
+
+  return (
+    <RovingFocusGroup active autoFocus="none" loop orientation={tabsContext.orientation}>
+      {listNode}
+    </RovingFocusGroup>
+  );
+}

package/src/Tabs/TabsRoot.tsx

@@ -0,0 +1,111 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import { TabsContextProvider } from "./context";
+import type { TabsProps, TabsTriggerRegistration } from "./types";
+
+function getOrderedTriggers(triggers: Array<TabsTriggerRegistration>) {
+  const ordered = [...triggers];
+  ordered.sort((a, b) => a.order < b.order);
+  return ordered;
+}
+
+function resolveNextValue(
+  currentValue: string | undefined,
+  orderedTriggers: Array<TabsTriggerRegistration>,
+  fallbackOrder: number | undefined,
+) {
+  const enabled = orderedTriggers.filter((trigger) => !trigger.disabled);
+  if (enabled.size() === 0) {
+    return undefined;
+  }
+
+  if (currentValue === undefined) {
+    return enabled[0]?.value;
+  }
+
+  const selectedEnabled = enabled.find((trigger) => trigger.value === currentValue);
+  if (selectedEnabled) {
+    return selectedEnabled.value;
+  }
+
+  const selected = orderedTriggers.find((trigger) => trigger.value === currentValue);
+  const anchorOrder = selected?.order ?? fallbackOrder;
+  if (anchorOrder !== undefined) {
+    const after = enabled.find((trigger) => trigger.order > anchorOrder);
+    if (after) {
+      return after.value;
+    }
+  }
+
+  return enabled[0]?.value;
+}
+
+export function TabsRoot(props: TabsProps) {
+  const [value, setValueState] = useControllableState<string | undefined>({
+    value: props.value,
+    defaultValue: props.defaultValue,
+    onChange: (nextValue) => {
+      if (nextValue !== undefined) {
+        props.onValueChange?.(nextValue);
+      }
+    },
+  });
+
+  const orientation = props.orientation ?? "horizontal";
+  const activationMode = props.activationMode ?? "automatic";
+
+  const triggerRegistryRef = React.useRef<Array<TabsTriggerRegistration>>([]);
+  const lastSelectedOrderRef = React.useRef<number>();
+  const [registryRevision, setRegistryRevision] = React.useState(0);
+
+  const registerTrigger = React.useCallback((trigger: TabsTriggerRegistration) => {
+    triggerRegistryRef.current.push(trigger);
+    setRegistryRevision((revision) => revision + 1);
+
+    return () => {
+      const index = triggerRegistryRef.current.findIndex((entry) => entry.id === trigger.id);
+      if (index >= 0) {
+        triggerRegistryRef.current.remove(index);
+        setRegistryRevision((revision) => revision + 1);
+      }
+    };
+  }, []);
+
+  const setValue = React.useCallback(
+    (nextValue: string) => {
+      const orderedTriggers = getOrderedTriggers(triggerRegistryRef.current);
+      const selected = orderedTriggers.find((trigger) => trigger.value === nextValue && !trigger.disabled);
+      if (selected) {
+        lastSelectedOrderRef.current = selected.order;
+      }
+
+      setValueState(nextValue);
+    },
+    [setValueState],
+  );
+
+  React.useEffect(() => {
+    const orderedTriggers = getOrderedTriggers(triggerRegistryRef.current);
+    const selected = orderedTriggers.find((trigger) => trigger.value === value && !trigger.disabled);
+    if (selected) {
+      lastSelectedOrderRef.current = selected.order;
+    }
+
+    const nextValue = resolveNextValue(value, orderedTriggers, lastSelectedOrderRef.current);
+    if (nextValue !== value) {
+      setValueState(nextValue);
+    }
+  }, [registryRevision, setValueState, value]);
+
+  const contextValue = React.useMemo(
+    () => ({
+      value,
+      setValue,
+      orientation,
+      activationMode,
+      registerTrigger,
+    }),
+    [activationMode, orientation, registerTrigger, setValue, value],
+  );
+
+  return <TabsContextProvider value={contextValue}>{props.children}</TabsContextProvider>;
+}

package/src/Tabs/TabsTrigger.tsx

@@ -0,0 +1,127 @@
+import { React, Slot } from "@lattice-ui/core";
+import { RovingFocusItem } from "@lattice-ui/focus";
+import { useTabsContext } from "./context";
+import { createTabsTriggerName } from "./internals/ids";
+import type { TabsTriggerProps } from "./types";
+
+let nextTriggerId = 0;
+let nextTriggerOrder = 0;
+
+function toGuiObject(instance: Instance | undefined) {
+  if (!instance || !instance.IsA("GuiObject")) {
+    return undefined;
+  }
+
+  return instance;
+}
+
+export function TabsTrigger(props: TabsTriggerProps) {
+  const tabsContext = useTabsContext();
+  const triggerRef = React.useRef<GuiObject>();
+  const selected = tabsContext.value === props.value;
+  const disabled = props.disabled === true;
+
+  const triggerIdRef = React.useRef(0);
+  if (triggerIdRef.current === 0) {
+    nextTriggerId += 1;
+    triggerIdRef.current = nextTriggerId;
+  }
+
+  const triggerOrderRef = React.useRef(0);
+  if (triggerOrderRef.current === 0) {
+    nextTriggerOrder += 1;
+    triggerOrderRef.current = nextTriggerOrder;
+  }
+
+  React.useEffect(() => {
+    return tabsContext.registerTrigger({
+      id: triggerIdRef.current,
+      value: props.value,
+      disabled,
+      ref: triggerRef,
+      order: triggerOrderRef.current,
+    });
+  }, [disabled, props.value, tabsContext]);
+
+  const setTriggerRef = React.useCallback((instance: Instance | undefined) => {
+    triggerRef.current = toGuiObject(instance);
+  }, []);
+
+  const handleActivated = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    tabsContext.setValue(props.value);
+  }, [disabled, props.value, tabsContext]);
+
+  const handleSelectionGained = React.useCallback(() => {
+    if (disabled || tabsContext.activationMode !== "automatic") {
+      return;
+    }
+
+    tabsContext.setValue(props.value);
+  }, [disabled, props.value, tabsContext]);
+
+  const handleInputBegan = React.useCallback(
+    (_rbx: TextButton, inputObject: InputObject) => {
+      if (disabled || tabsContext.activationMode !== "manual") {
+        return;
+      }
+
+      const keyCode = inputObject.KeyCode;
+      if (keyCode !== Enum.KeyCode.Return && keyCode !== Enum.KeyCode.Space) {
+        return;
+      }
+
+      tabsContext.setValue(props.value);
+    },
+    [disabled, props.value, tabsContext],
+  );
+
+  const eventHandlers = React.useMemo(
+    () => ({
+      Activated: handleActivated,
+      SelectionGained: handleSelectionGained,
+      InputBegan: handleInputBegan,
+    }),
+    [handleActivated, handleInputBegan, handleSelectionGained],
+  );
+
+  const triggerName = React.useMemo(() => createTabsTriggerName(props.value), [props.value]);
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[TabsTrigger] `asChild` requires a child element.");
+    }
+
+    return (
+      <RovingFocusItem asChild disabled={disabled}>
+        <Slot Event={eventHandlers} Name={triggerName} ref={setTriggerRef}>
+          {child}
+        </Slot>
+      </RovingFocusItem>
+    );
+  }
+
+  return (
+    <RovingFocusItem asChild disabled={disabled}>
+      <textbutton
+        Active={!disabled}
+        AutoButtonColor={false}
+        BackgroundColor3={selected ? Color3.fromRGB(86, 137, 245) : Color3.fromRGB(47, 53, 68)}
+        BorderSizePixel={0}
+        Event={eventHandlers}
+        Selectable={!disabled}
+        Size={UDim2.fromOffset(132, 34)}
+        Text={props.value}
+        TextColor3={disabled ? Color3.fromRGB(136, 144, 159) : Color3.fromRGB(235, 240, 248)}
+        TextSize={15}
+        ref={setTriggerRef}
+      >
+        {props.children}
+      </textbutton>
+    </RovingFocusItem>
+  );
+}

package/src/Tabs/context.ts

@@ -0,0 +1,6 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { TabsContextValue } from "./types";
+
+const [TabsContextProvider, useTabsContext] = createStrictContext<TabsContextValue>("Tabs");
+
+export { TabsContextProvider, useTabsContext };

package/src/Tabs/internals/ids.ts

@@ -0,0 +1,13 @@
+function sanitizeValue(value: string) {
+  const lowered = string.lower(value);
+  const sanitized = string.gsub(lowered, "[^%w_%-]", "-")[0];
+  return sanitized.size() > 0 ? sanitized : "tab";
+}
+
+export function createTabsTriggerName(value: string) {
+  return `TabsTrigger:${sanitizeValue(value)}`;
+}
+
+export function createTabsContentName(value: string) {
+  return `TabsContent:${sanitizeValue(value)}`;
+}

package/src/Tabs/types.ts

@@ -0,0 +1,50 @@
+import type React from "@rbxts/react";
+
+export type TabsOrientation = "horizontal" | "vertical";
+export type TabsActivationMode = "automatic" | "manual";
+
+export type TabsSetValue = (value: string) => void;
+
+export type TabsTriggerRegistration = {
+  id: number;
+  value: string;
+  disabled: boolean;
+  ref: React.MutableRefObject<GuiObject | undefined>;
+  order: number;
+};
+
+export type TabsContextValue = {
+  value?: string;
+  setValue: TabsSetValue;
+  orientation: TabsOrientation;
+  activationMode: TabsActivationMode;
+  registerTrigger: (trigger: TabsTriggerRegistration) => () => void;
+};
+
+export type TabsProps = {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  orientation?: TabsOrientation;
+  activationMode?: TabsActivationMode;
+  children?: React.ReactNode;
+};
+
+export type TabsListProps = {
+  asChild?: boolean;
+  children?: React.ReactNode;
+};
+
+export type TabsTriggerProps = {
+  value: string;
+  asChild?: boolean;
+  disabled?: boolean;
+  children?: React.ReactElement;
+};
+
+export type TabsContentProps = {
+  value: string;
+  asChild?: boolean;
+  forceMount?: boolean;
+  children?: React.ReactNode;
+};

package/src/index.ts

@@ -0,0 +1,13 @@
+export { TabsContent } from "./Tabs/TabsContent";
+export { TabsList } from "./Tabs/TabsList";
+export { TabsRoot, TabsRoot as Tabs } from "./Tabs/TabsRoot";
+export { TabsTrigger } from "./Tabs/TabsTrigger";
+export type {
+  TabsActivationMode,
+  TabsContentProps,
+  TabsContextValue,
+  TabsListProps,
+  TabsOrientation,
+  TabsProps,
+  TabsTriggerProps,
+} from "./Tabs/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"]
+    }
+  }
+}