Make progress on dropdown component

src/Components/Dropdown.luau

@@ -0,0 +1,55 @@
+local OnyxUI = script.Parent.Parent
+local Fusion = require(OnyxUI.Parent.Fusion)
+local Util = require(OnyxUI.Util)
+local Themer = require(OnyxUI.Themer)
+
+local OnEvent = Fusion.OnEvent
+local Peek = Fusion.peek
+local Children = Fusion.Children
+
+local Base = require(OnyxUI.Components.Base)
+local Components = {
+	TextInput = require(OnyxUI.Components.TextInput),
+	Frame = require(OnyxUI.Components.Frame),
+}
+
+export type Props = Base.Props & {}
+
+return function(Scope: Fusion.Scope<any>, Props: Props)
+	local Scope = Fusion.innerScope(Scope, Fusion, Components, Util)
+	local Theme = Themer.Theme:now()
+
+	local Open = Scope:Value(false)
+
+	return Scope:Hydrate(Scope:TextInput(Util.CombineProps(Props, {
+		Name = script.Name,
+		Parent = Props.Parent,
+		StrokeColor = Theme.Colors.NeutralContent.Dark,
+		PlaceholderText = "Dropdown",
+		-- TextEditable = false,
+
+		[Children] = {
+			Scope:Computed(function(Use)
+				if Use(Open) then
+					return Scope:New "Folder" {
+						[Children] = {
+							Scope:Frame {
+								AnchorPoint = Vector2.new(0, 1),
+								Position = UDim2.fromScale(0, 1),
+								Size = UDim2.fromScale(1, 1),
+								BackgroundTransparency = 0,
+							},
+						},
+					}
+				end
+			end),
+		},
+	}))) {
+		[OnEvent "Focused"] = function()
+			Open:set(true)
+		end,
+		[OnEvent "FocusLost"] = function()
+			Open:set(false)
+		end,
+	}
+end

src/Components/Dropdown.story.luau

@@ -0,0 +1,33 @@
+local OnyxUI = script.Parent.Parent
+local Fusion = require(OnyxUI.Parent.Fusion)
+local Util = require(OnyxUI.Util)
+local Themer = require(OnyxUI.Themer)
+
+local Children = Fusion.Children
+
+local Components = {
+	Dropdown = require(script.Parent.Dropdown),
+	Frame = require(script.Parent.Frame),
+}
+
+return {
+	story = function(Target: GuiObject)
+		local Scope = Fusion.scoped(Fusion, Util, Components)
+		local Theme = Themer.Theme:now()
+
+		Scope:Frame {
+			Parent = Target,
+			Padding = Scope:Computed(function(Use)
+				return UDim.new(0, Use(Theme.StrokeThickness["1"]))
+			end),
+
+			[Children] = {
+				Scope:Dropdown {},
+			},
+		}
+
+		return function()
+			Scope:doCleanup()
+		end
+	end,
+}

src/Components/init.luau

@@ -27,6 +27,7 @@ local Components = {
 	TextInput = require(script.TextInput),
 	TextArea = require(script.TextArea),
 	TitleBar = require(script.TitleBar),
+	Dropdown = require(script.Dropdown),
 }
 
 task.spawn(function()