@lattice-ui/accordion 0.3.0

package/README.md

@@ -0,0 +1,18 @@
+# @lattice-ui/accordion
+
+Headless accordion primitives for Roblox UI with single and multiple disclosure modes.
+
+## Exports
+
+- `Accordion`
+- `Accordion.Root`
+- `Accordion.Item`
+- `Accordion.Header`
+- `Accordion.Trigger`
+- `Accordion.Content`
+
+## Notes
+
+- Supports `type="single" | "multiple"`.
+- Supports controlled/uncontrolled `value`.
+- Keyboard navigation is integrated with roving focus.

package/out/Accordion/AccordionContent.d.ts

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

package/out/Accordion/AccordionContent.luau

@@ -0,0 +1,31 @@
+-- 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 useAccordionItemContext = TS.import(script, script.Parent, "context").useAccordionItemContext
+local function AccordionContent(props)
+	local itemContext = useAccordionItemContext()
+	local forceMount = props.forceMount == true
+	if not itemContext.open and not forceMount then
+		return nil
+	end
+	if props.asChild then
+		local child = props.children
+		if not React.isValidElement(child) then
+			error("[AccordionContent] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, {
+			Visible = itemContext.open,
+		}, child)
+	end
+	return React.createElement("frame", {
+		BackgroundColor3 = Color3.fromRGB(35, 41, 54),
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(260, 44),
+		Visible = itemContext.open,
+	}, props.children)
+end
+return {
+	AccordionContent = AccordionContent,
+}

package/out/Accordion/AccordionHeader.d.ts

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

package/out/Accordion/AccordionHeader.luau

@@ -0,0 +1,22 @@
+-- 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 function AccordionHeader(props)
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[AccordionHeader] `asChild` requires a child element.")
+		end
+		return React.createElement(Slot, nil, child)
+	end
+	return React.createElement("frame", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(260, 34),
+	}, props.children)
+end
+return {
+	AccordionHeader = AccordionHeader,
+}

package/out/Accordion/AccordionItem.d.ts

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

package/out/Accordion/AccordionItem.luau

@@ -0,0 +1,41 @@
+-- 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 _context = TS.import(script, script.Parent, "context")
+local AccordionItemContextProvider = _context.AccordionItemContextProvider
+local useAccordionContext = _context.useAccordionContext
+local function AccordionItem(props)
+	local accordionContext = useAccordionContext()
+	local _openValues = accordionContext.openValues
+	local _value = props.value
+	local open = table.find(_openValues, _value) ~= nil
+	local disabled = props.disabled == true
+	local contextValue = React.useMemo(function()
+		return {
+			value = props.value,
+			open = open,
+			disabled = disabled,
+		}
+	end, { disabled, open, props.value })
+	if props.asChild then
+		local child = props.children
+		if not React.isValidElement(child) then
+			error("[AccordionItem] `asChild` requires a child element.")
+		end
+		return React.createElement(AccordionItemContextProvider, {
+			value = contextValue,
+		}, React.createElement(Slot, nil, child))
+	end
+	return React.createElement(AccordionItemContextProvider, {
+		value = contextValue,
+	}, React.createElement("frame", {
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Size = UDim2.fromOffset(260, 80),
+	}, props.children))
+end
+return {
+	AccordionItem = AccordionItem,
+}

package/out/Accordion/AccordionRoot.d.ts

@@ -0,0 +1,4 @@
+import { React } from "@lattice-ui/core";
+import type { AccordionProps } from "./types";
+export declare function AccordionRoot(props: AccordionProps): React.JSX.Element;
+export { AccordionRoot as Accordion };

package/out/Accordion/AccordionRoot.luau

@@ -0,0 +1,68 @@
+-- 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 RovingFocusGroup = TS.import(script, TS.getModule(script, "@lattice-ui", "focus").out).RovingFocusGroup
+local AccordionContextProvider = TS.import(script, script.Parent, "context").AccordionContextProvider
+local _state = TS.import(script, script.Parent, "state")
+local nextAccordionValues = _state.nextAccordionValues
+local normalizeAccordionValue = _state.normalizeAccordionValue
+local function AccordionRoot(props)
+	local accordionType = props.type or "single"
+	local _condition = props.loop
+	if _condition == nil then
+		_condition = true
+	end
+	local loop = _condition
+	local _condition_1 = props.collapsible
+	if _condition_1 == nil then
+		_condition_1 = false
+	end
+	local collapsible = _condition_1
+	local _condition_2 = props.defaultValue
+	if _condition_2 == nil then
+		_condition_2 = (if accordionType == "single" then "" else {})
+	end
+	local defaultValue = _condition_2
+	local _binding = useControllableState({
+		value = props.value,
+		defaultValue = defaultValue,
+		onChange = props.onValueChange,
+	})
+	local rawValue = _binding[1]
+	local setRawValue = _binding[2]
+	local openValues = normalizeAccordionValue(accordionType, rawValue)
+	local toggleItem = React.useCallback(function(candidateValue)
+		local nextValues = nextAccordionValues(accordionType, openValues, candidateValue, collapsible)
+		if accordionType == "single" then
+			local _condition_3 = nextValues[1]
+			if _condition_3 == nil then
+				_condition_3 = ""
+			end
+			setRawValue(_condition_3)
+			return nil
+		end
+		setRawValue(nextValues)
+	end, { accordionType, collapsible, openValues, setRawValue })
+	local contextValue = React.useMemo(function()
+		return {
+			type = accordionType,
+			openValues = openValues,
+			loop = loop,
+			toggleItem = toggleItem,
+		}
+	end, { accordionType, loop, openValues, toggleItem })
+	return React.createElement(AccordionContextProvider, {
+		value = contextValue,
+	}, React.createElement(RovingFocusGroup, {
+		active = true,
+		autoFocus = "none",
+		loop = loop,
+		orientation = "vertical",
+	}, props.children))
+end
+return {
+	AccordionRoot = AccordionRoot,
+	Accordion = AccordionRoot,
+}

package/out/Accordion/AccordionTrigger.d.ts

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

package/out/Accordion/AccordionTrigger.luau

@@ -0,0 +1,70 @@
+-- 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 _context = TS.import(script, script.Parent, "context")
+local useAccordionContext = _context.useAccordionContext
+local useAccordionItemContext = _context.useAccordionItemContext
+local function AccordionTrigger(props)
+	local accordionContext = useAccordionContext()
+	local itemContext = useAccordionItemContext()
+	local disabled = itemContext.disabled
+	local handleActivated = React.useCallback(function()
+		if disabled then
+			return nil
+		end
+		accordionContext.toggleItem(itemContext.value)
+	end, { accordionContext, disabled, itemContext.value })
+	local handleInputBegan = React.useCallback(function(_rbx, inputObject)
+		if disabled then
+			return nil
+		end
+		local keyCode = inputObject.KeyCode
+		if keyCode == Enum.KeyCode.Return or keyCode == Enum.KeyCode.Space then
+			accordionContext.toggleItem(itemContext.value)
+		end
+	end, { accordionContext, disabled, itemContext.value })
+	local eventHandlers = React.useMemo(function()
+		return {
+			Activated = handleActivated,
+			InputBegan = handleInputBegan,
+		}
+	end, { handleActivated, handleInputBegan })
+	if props.asChild then
+		local child = props.children
+		if not child then
+			error("[AccordionTrigger] `asChild` requires a child element.")
+		end
+		return React.createElement(RovingFocusItem, {
+			asChild = true,
+			disabled = disabled,
+		}, React.createElement(Slot, {
+			Active = not disabled,
+			Event = eventHandlers,
+			Selectable = not disabled,
+		}, child))
+	end
+	return React.createElement(RovingFocusItem, {
+		asChild = true,
+		disabled = disabled,
+	}, React.createElement("textbutton", {
+		Active = not disabled,
+		AutoButtonColor = false,
+		BackgroundColor3 = Color3.fromRGB(41, 48, 63),
+		BorderSizePixel = 0,
+		Event = eventHandlers,
+		Selectable = not disabled,
+		Size = UDim2.fromOffset(260, 34),
+		Text = if itemContext.open then "Collapse" else "Expand",
+		TextColor3 = if disabled then Color3.fromRGB(143, 150, 165) else Color3.fromRGB(236, 241, 249),
+		TextSize = 14,
+		TextXAlignment = Enum.TextXAlignment.Left,
+	}, React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, 10),
+	}), props.children))
+end
+return {
+	AccordionTrigger = AccordionTrigger,
+}

package/out/Accordion/context.d.ts

@@ -0,0 +1,4 @@
+import type { AccordionContextValue, AccordionItemContextValue } from "./types";
+declare const AccordionContextProvider: import("@rbxts/react").Provider<AccordionContextValue | undefined>, useAccordionContext: () => AccordionContextValue;
+declare const AccordionItemContextProvider: import("@rbxts/react").Provider<AccordionItemContextValue | undefined>, useAccordionItemContext: () => AccordionItemContextValue;
+export { AccordionContextProvider, AccordionItemContextProvider, useAccordionContext, useAccordionItemContext };

package/out/Accordion/context.luau

@@ -0,0 +1,15 @@
+-- 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("Accordion")
+local AccordionContextProvider = _binding[1]
+local useAccordionContext = _binding[2]
+local _binding_1 = createStrictContext("AccordionItem")
+local AccordionItemContextProvider = _binding_1[1]
+local useAccordionItemContext = _binding_1[2]
+return {
+	AccordionContextProvider = AccordionContextProvider,
+	AccordionItemContextProvider = AccordionItemContextProvider,
+	useAccordionContext = useAccordionContext,
+	useAccordionItemContext = useAccordionItemContext,
+}

package/out/Accordion/state.d.ts

@@ -0,0 +1,3 @@
+export type AccordionType = "single" | "multiple";
+export declare function normalizeAccordionValue(accordionType: AccordionType, value: string | Array<string> | undefined): Array<string>;
+export declare function nextAccordionValues(accordionType: AccordionType, currentValues: Array<string>, candidateValue: string, collapsible: boolean): Array<string>;

package/out/Accordion/state.luau

@@ -0,0 +1,65 @@
+-- Compiled with roblox-ts v3.0.0
+local function normalizeAccordionValue(accordionType, value)
+	if accordionType == "single" then
+		if value == nil then
+			return {}
+		end
+		local _value = value
+		if type(_value) == "string" then
+			return if #value > 0 then { value } else {}
+		end
+		return if value[1] ~= nil then { value[1] } else {}
+	end
+	if value == nil then
+		return {}
+	end
+	local _value = value
+	if type(_value) == "string" then
+		return if #value > 0 then { value } else {}
+	end
+	local deduped = {}
+	for _, item in value do
+		if not (table.find(deduped, item) ~= nil) then
+			table.insert(deduped, item)
+		end
+	end
+	return deduped
+end
+local function nextAccordionValues(accordionType, currentValues, candidateValue, collapsible)
+	local _currentValues = currentValues
+	local _candidateValue = candidateValue
+	local isOpen = table.find(_currentValues, _candidateValue) ~= nil
+	if accordionType == "single" then
+		if isOpen then
+			return if collapsible then {} else { candidateValue }
+		end
+		return { candidateValue }
+	end
+	if isOpen then
+		-- ▼ ReadonlyArray.filter ▼
+		local _newValue = {}
+		local _callback = function(value)
+			return value ~= candidateValue
+		end
+		local _length = 0
+		for _k, _v in currentValues do
+			if _callback(_v, _k - 1, currentValues) == true then
+				_length += 1
+				_newValue[_length] = _v
+			end
+		end
+		-- ▲ ReadonlyArray.filter ▲
+		return _newValue
+	end
+	local _array = {}
+	local _length = #_array
+	local _currentValuesLength = #currentValues
+	table.move(currentValues, 1, _currentValuesLength, _length + 1, _array)
+	_length += _currentValuesLength
+	_array[_length + 1] = candidateValue
+	return _array
+end
+return {
+	normalizeAccordionValue = normalizeAccordionValue,
+	nextAccordionValues = nextAccordionValues,
+}

package/out/Accordion/types.d.ts

@@ -0,0 +1,41 @@
+import type React from "@rbxts/react";
+import type { AccordionType } from "./state";
+export type AccordionContextValue = {
+    type: AccordionType;
+    openValues: Array<string>;
+    loop: boolean;
+    toggleItem: (value: string) => void;
+};
+export type AccordionItemContextValue = {
+    value: string;
+    open: boolean;
+    disabled: boolean;
+};
+export type AccordionProps = {
+    type?: AccordionType;
+    value?: string | Array<string>;
+    defaultValue?: string | Array<string>;
+    onValueChange?: (value: string | Array<string>) => void;
+    collapsible?: boolean;
+    loop?: boolean;
+    children?: React.ReactNode;
+};
+export type AccordionItemProps = {
+    value: string;
+    asChild?: boolean;
+    disabled?: boolean;
+    children?: React.ReactNode;
+};
+export type AccordionHeaderProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type AccordionTriggerProps = {
+    asChild?: boolean;
+    children?: React.ReactElement;
+};
+export type AccordionContentProps = {
+    asChild?: boolean;
+    forceMount?: boolean;
+    children?: React.ReactNode;
+};

package/out/Accordion/types.luau

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

package/out/index.d.ts

@@ -0,0 +1,15 @@
+import { AccordionContent } from "./Accordion/AccordionContent";
+import { AccordionHeader } from "./Accordion/AccordionHeader";
+import { AccordionItem } from "./Accordion/AccordionItem";
+import { AccordionRoot } from "./Accordion/AccordionRoot";
+import { AccordionTrigger } from "./Accordion/AccordionTrigger";
+export declare const Accordion: {
+    readonly Root: typeof AccordionRoot;
+    readonly Item: typeof AccordionItem;
+    readonly Header: typeof AccordionHeader;
+    readonly Trigger: typeof AccordionTrigger;
+    readonly Content: typeof AccordionContent;
+};
+export type { AccordionType } from "./Accordion/state";
+export { nextAccordionValues, normalizeAccordionValue } from "./Accordion/state";
+export type { AccordionContentProps, AccordionContextValue, AccordionHeaderProps, AccordionItemContextValue, AccordionItemProps, AccordionProps, AccordionTriggerProps, } from "./Accordion/types";

package/out/init.luau

@@ -0,0 +1,20 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+local AccordionContent = TS.import(script, script, "Accordion", "AccordionContent").AccordionContent
+local AccordionHeader = TS.import(script, script, "Accordion", "AccordionHeader").AccordionHeader
+local AccordionItem = TS.import(script, script, "Accordion", "AccordionItem").AccordionItem
+local AccordionRoot = TS.import(script, script, "Accordion", "AccordionRoot").AccordionRoot
+local AccordionTrigger = TS.import(script, script, "Accordion", "AccordionTrigger").AccordionTrigger
+local Accordion = {
+	Root = AccordionRoot,
+	Item = AccordionItem,
+	Header = AccordionHeader,
+	Trigger = AccordionTrigger,
+	Content = AccordionContent,
+}
+local _state = TS.import(script, script, "Accordion", "state")
+exports.nextAccordionValues = _state.nextAccordionValues
+exports.normalizeAccordionValue = _state.normalizeAccordionValue
+exports.Accordion = Accordion
+return exports

package/package.json

@@ -0,0 +1,24 @@
+{
+  "name": "@lattice-ui/accordion",
+  "version": "0.3.0",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@lattice-ui/core": "0.3.0",
+    "@lattice-ui/focus": "0.3.0"
+  },
+  "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",
+    "typecheck": "tsc -p tsconfig.typecheck.json",
+    "watch": "rbxtsc -p tsconfig.json -w"
+  }
+}

package/src/Accordion/AccordionContent.tsx

@@ -0,0 +1,32 @@
+import { React, Slot } from "@lattice-ui/core";
+import { useAccordionItemContext } from "./context";
+import type { AccordionContentProps } from "./types";
+
+export function AccordionContent(props: AccordionContentProps) {
+  const itemContext = useAccordionItemContext();
+  const forceMount = props.forceMount === true;
+
+  if (!itemContext.open && !forceMount) {
+    return undefined;
+  }
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!React.isValidElement(child)) {
+      error("[AccordionContent] `asChild` requires a child element.");
+    }
+
+    return <Slot Visible={itemContext.open}>{child}</Slot>;
+  }
+
+  return (
+    <frame
+      BackgroundColor3={Color3.fromRGB(35, 41, 54)}
+      BorderSizePixel={0}
+      Size={UDim2.fromOffset(260, 44)}
+      Visible={itemContext.open}
+    >
+      {props.children}
+    </frame>
+  );
+}

package/src/Accordion/AccordionHeader.tsx

@@ -0,0 +1,19 @@
+import { React, Slot } from "@lattice-ui/core";
+import type { AccordionHeaderProps } from "./types";
+
+export function AccordionHeader(props: AccordionHeaderProps) {
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[AccordionHeader] `asChild` requires a child element.");
+    }
+
+    return <Slot>{child}</Slot>;
+  }
+
+  return (
+    <frame BackgroundTransparency={1} BorderSizePixel={0} Size={UDim2.fromOffset(260, 34)}>
+      {props.children}
+    </frame>
+  );
+}

package/src/Accordion/AccordionItem.tsx

@@ -0,0 +1,39 @@
+import { React, Slot } from "@lattice-ui/core";
+import { AccordionItemContextProvider, useAccordionContext } from "./context";
+import type { AccordionItemProps } from "./types";
+
+export function AccordionItem(props: AccordionItemProps) {
+  const accordionContext = useAccordionContext();
+  const open = accordionContext.openValues.includes(props.value);
+  const disabled = props.disabled === true;
+
+  const contextValue = React.useMemo(
+    () => ({
+      value: props.value,
+      open,
+      disabled,
+    }),
+    [disabled, open, props.value],
+  );
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!React.isValidElement(child)) {
+      error("[AccordionItem] `asChild` requires a child element.");
+    }
+
+    return (
+      <AccordionItemContextProvider value={contextValue}>
+        <Slot>{child}</Slot>
+      </AccordionItemContextProvider>
+    );
+  }
+
+  return (
+    <AccordionItemContextProvider value={contextValue}>
+      <frame BackgroundTransparency={1} BorderSizePixel={0} Size={UDim2.fromOffset(260, 80)}>
+        {props.children}
+      </frame>
+    </AccordionItemContextProvider>
+  );
+}

package/src/Accordion/AccordionRoot.tsx

@@ -0,0 +1,54 @@
+import { React, useControllableState } from "@lattice-ui/core";
+import { RovingFocusGroup } from "@lattice-ui/focus";
+import { AccordionContextProvider } from "./context";
+import { nextAccordionValues, normalizeAccordionValue } from "./state";
+import type { AccordionProps } from "./types";
+
+export function AccordionRoot(props: AccordionProps) {
+  const accordionType = props.type ?? "single";
+  const loop = props.loop ?? true;
+  const collapsible = props.collapsible ?? false;
+
+  const defaultValue = props.defaultValue ?? (accordionType === "single" ? "" : []);
+
+  const [rawValue, setRawValue] = useControllableState<string | Array<string>>({
+    value: props.value,
+    defaultValue,
+    onChange: props.onValueChange,
+  });
+
+  const openValues = normalizeAccordionValue(accordionType, rawValue);
+
+  const toggleItem = React.useCallback(
+    (candidateValue: string) => {
+      const nextValues = nextAccordionValues(accordionType, openValues, candidateValue, collapsible);
+      if (accordionType === "single") {
+        setRawValue(nextValues[0] ?? "");
+        return;
+      }
+
+      setRawValue(nextValues);
+    },
+    [accordionType, collapsible, openValues, setRawValue],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      type: accordionType,
+      openValues,
+      loop,
+      toggleItem,
+    }),
+    [accordionType, loop, openValues, toggleItem],
+  );
+
+  return (
+    <AccordionContextProvider value={contextValue}>
+      <RovingFocusGroup active autoFocus="none" loop={loop} orientation="vertical">
+        {props.children}
+      </RovingFocusGroup>
+    </AccordionContextProvider>
+  );
+}
+
+export { AccordionRoot as Accordion };

package/src/Accordion/AccordionTrigger.tsx

@@ -0,0 +1,76 @@
+import { React, Slot } from "@lattice-ui/core";
+import { RovingFocusItem } from "@lattice-ui/focus";
+import { useAccordionContext, useAccordionItemContext } from "./context";
+import type { AccordionTriggerProps } from "./types";
+
+export function AccordionTrigger(props: AccordionTriggerProps) {
+  const accordionContext = useAccordionContext();
+  const itemContext = useAccordionItemContext();
+  const disabled = itemContext.disabled;
+
+  const handleActivated = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+
+    accordionContext.toggleItem(itemContext.value);
+  }, [accordionContext, disabled, itemContext.value]);
+
+  const handleInputBegan = React.useCallback(
+    (_rbx: GuiObject, inputObject: InputObject) => {
+      if (disabled) {
+        return;
+      }
+
+      const keyCode = inputObject.KeyCode;
+      if (keyCode === Enum.KeyCode.Return || keyCode === Enum.KeyCode.Space) {
+        accordionContext.toggleItem(itemContext.value);
+      }
+    },
+    [accordionContext, disabled, itemContext.value],
+  );
+
+  const eventHandlers = React.useMemo(
+    () => ({
+      Activated: handleActivated,
+      InputBegan: handleInputBegan,
+    }),
+    [handleActivated, handleInputBegan],
+  );
+
+  if (props.asChild) {
+    const child = props.children;
+    if (!child) {
+      error("[AccordionTrigger] `asChild` requires a child element.");
+    }
+
+    return (
+      <RovingFocusItem asChild disabled={disabled}>
+        <Slot Active={!disabled} Event={eventHandlers} Selectable={!disabled}>
+          {child}
+        </Slot>
+      </RovingFocusItem>
+    );
+  }
+
+  return (
+    <RovingFocusItem asChild disabled={disabled}>
+      <textbutton
+        Active={!disabled}
+        AutoButtonColor={false}
+        BackgroundColor3={Color3.fromRGB(41, 48, 63)}
+        BorderSizePixel={0}
+        Event={eventHandlers}
+        Selectable={!disabled}
+        Size={UDim2.fromOffset(260, 34)}
+        Text={itemContext.open ? "Collapse" : "Expand"}
+        TextColor3={disabled ? Color3.fromRGB(143, 150, 165) : Color3.fromRGB(236, 241, 249)}
+        TextSize={14}
+        TextXAlignment={Enum.TextXAlignment.Left}
+      >
+        <uipadding PaddingLeft={new UDim(0, 10)} />
+        {props.children}
+      </textbutton>
+    </RovingFocusItem>
+  );
+}

package/src/Accordion/context.ts

@@ -0,0 +1,8 @@
+import { createStrictContext } from "@lattice-ui/core";
+import type { AccordionContextValue, AccordionItemContextValue } from "./types";
+
+const [AccordionContextProvider, useAccordionContext] = createStrictContext<AccordionContextValue>("Accordion");
+const [AccordionItemContextProvider, useAccordionItemContext] =
+  createStrictContext<AccordionItemContextValue>("AccordionItem");
+
+export { AccordionContextProvider, AccordionItemContextProvider, useAccordionContext, useAccordionItemContext };

package/src/Accordion/state.ts

@@ -0,0 +1,58 @@
+export type AccordionType = "single" | "multiple";
+
+export function normalizeAccordionValue(
+  accordionType: AccordionType,
+  value: string | Array<string> | undefined,
+): Array<string> {
+  if (accordionType === "single") {
+    if (value === undefined) {
+      return [];
+    }
+
+    if (typeIs(value, "string")) {
+      return value.size() > 0 ? [value] : [];
+    }
+
+    return value[0] !== undefined ? [value[0]] : [];
+  }
+
+  if (value === undefined) {
+    return [];
+  }
+
+  if (typeIs(value, "string")) {
+    return value.size() > 0 ? [value] : [];
+  }
+
+  const deduped: Array<string> = [];
+  for (const item of value) {
+    if (!deduped.includes(item)) {
+      deduped.push(item);
+    }
+  }
+
+  return deduped;
+}
+
+export function nextAccordionValues(
+  accordionType: AccordionType,
+  currentValues: Array<string>,
+  candidateValue: string,
+  collapsible: boolean,
+): Array<string> {
+  const isOpen = currentValues.includes(candidateValue);
+
+  if (accordionType === "single") {
+    if (isOpen) {
+      return collapsible ? [] : [candidateValue];
+    }
+
+    return [candidateValue];
+  }
+
+  if (isOpen) {
+    return currentValues.filter((value) => value !== candidateValue);
+  }
+
+  return [...currentValues, candidateValue];
+}

package/src/Accordion/types.ts

@@ -0,0 +1,48 @@
+import type React from "@rbxts/react";
+import type { AccordionType } from "./state";
+
+export type AccordionContextValue = {
+  type: AccordionType;
+  openValues: Array<string>;
+  loop: boolean;
+  toggleItem: (value: string) => void;
+};
+
+export type AccordionItemContextValue = {
+  value: string;
+  open: boolean;
+  disabled: boolean;
+};
+
+export type AccordionProps = {
+  type?: AccordionType;
+  value?: string | Array<string>;
+  defaultValue?: string | Array<string>;
+  onValueChange?: (value: string | Array<string>) => void;
+  collapsible?: boolean;
+  loop?: boolean;
+  children?: React.ReactNode;
+};
+
+export type AccordionItemProps = {
+  value: string;
+  asChild?: boolean;
+  disabled?: boolean;
+  children?: React.ReactNode;
+};
+
+export type AccordionHeaderProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type AccordionTriggerProps = {
+  asChild?: boolean;
+  children?: React.ReactElement;
+};
+
+export type AccordionContentProps = {
+  asChild?: boolean;
+  forceMount?: boolean;
+  children?: React.ReactNode;
+};

package/src/index.ts

@@ -0,0 +1,25 @@
+import { AccordionContent } from "./Accordion/AccordionContent";
+import { AccordionHeader } from "./Accordion/AccordionHeader";
+import { AccordionItem } from "./Accordion/AccordionItem";
+import { AccordionRoot } from "./Accordion/AccordionRoot";
+import { AccordionTrigger } from "./Accordion/AccordionTrigger";
+
+export const Accordion = {
+  Root: AccordionRoot,
+  Item: AccordionItem,
+  Header: AccordionHeader,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent,
+} as const;
+
+export type { AccordionType } from "./Accordion/state";
+export { nextAccordionValues, normalizeAccordionValue } from "./Accordion/state";
+export type {
+  AccordionContentProps,
+  AccordionContextValue,
+  AccordionHeaderProps,
+  AccordionItemContextValue,
+  AccordionItemProps,
+  AccordionProps,
+  AccordionTriggerProps,
+} from "./Accordion/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,35 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "..",
+    "rootDir": "..",
+    "paths": {
+      "@lattice-ui/accordion": ["accordion/src/index.ts"],
+      "@lattice-ui/avatar": ["avatar/src/index.ts"],
+      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
+      "@lattice-ui/combobox": ["combobox/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/progress": ["progress/src/index.ts"],
+      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
+      "@lattice-ui/scroll-area": ["scroll-area/src/index.ts"],
+      "@lattice-ui/select": ["select/src/index.ts"],
+      "@lattice-ui/slider": ["slider/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/text-field": ["text-field/src/index.ts"],
+      "@lattice-ui/textarea": ["textarea/src/index.ts"],
+      "@lattice-ui/toast": ["toast/src/index.ts"],
+      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
+      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
+    }
+  }
+}