@rbxts-ui/components 2.0.0 → 2.1.0

package/dist/Accordion.d.ts

@@ -0,0 +1,16 @@
+import React from "@rbxts/react";
+import { type Theme } from "./theme";
+interface AccordionProps {
+    title: string;
+    children: React.ReactNode;
+    isExpanded: boolean;
+    onExpandedChange: (expanded: boolean) => void;
+    backgroundColor?: Color3;
+    backgroundTransparency?: number;
+    cornerRadius?: number;
+    sortOrder?: Enum.SortOrder;
+    theme?: Theme;
+}
+export declare function Accordion({ title, children, backgroundColor, backgroundTransparency, cornerRadius, sortOrder, isExpanded, onExpandedChange, theme, }: AccordionProps): JSX.Element;
+export type { AccordionProps };
+//# sourceMappingURL=Accordion.d.ts.map

package/dist/Accordion.luau

@@ -0,0 +1,105 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local VStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).VStack
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local useMotion = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out).useMotion
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useState = _react.useState
+local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local DEFAULT_EXPANDED = true
+local function Accordion(_param)
+	local title = _param.title
+	local children = _param.children
+	local backgroundColor = _param.backgroundColor
+	local backgroundTransparency = _param.backgroundTransparency
+	if backgroundTransparency == nil then
+		backgroundTransparency = 0.8
+	end
+	local cornerRadius = _param.cornerRadius
+	if cornerRadius == nil then
+		cornerRadius = 2
+	end
+	local sortOrder = _param.sortOrder
+	if sortOrder == nil then
+		sortOrder = Enum.SortOrder.Name
+	end
+	local isExpanded = _param.isExpanded
+	local onExpandedChange = _param.onExpandedChange
+	local theme = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local rem = useRem()
+	local contentHeight, setContentHeight = useState(0)
+	-- Header visual height must match the header button height below (rem(5))
+	local headerHeight = rem(5)
+	local size, sizeMotion = useMotion(UDim2.new(1, 0, 0, headerHeight))
+	local contentSize, contentSizeMotion = useMotion(UDim2.new(1, 0, 0, if isExpanded then contentHeight else 0))
+	local textSize = rem(3.5)
+	local defaultBgColor = backgroundColor or theme.palette.blueishColor
+	useEffect(function()
+		local target = if isExpanded then contentHeight else 0
+		contentSizeMotion:spring(UDim2.new(1, 0, 0, target), theme.springs.gentle)
+		-- Keep outer size equal to header + animated content height for clipping
+		sizeMotion:spring(UDim2.new(1, 0, 0, headerHeight + target), theme.springs.gentle)
+	end, { isExpanded, contentHeight, headerHeight })
+	local handleToggle = function()
+		local nextExpanded = not isExpanded
+		onExpandedChange(nextExpanded)
+	end
+	return React.createElement(VStack, {
+		size = size,
+		backgroundTransparency = backgroundTransparency,
+		backgroundColor = defaultBgColor,
+		verticalAlignment = Enum.VerticalAlignment.Center,
+		clipsDescendants = true,
+	}, React.createElement("uicorner", {
+		CornerRadius = UDim.new(0, rem(cornerRadius)),
+	}), React.createElement(ReactiveButton, {
+		onClick = handleToggle,
+		backgroundTransparency = 1,
+		size = UDim2.new(1, 0, 0, rem(5)),
+		theme = theme,
+	}, React.createElement(Text, {
+		text = title,
+		textSize = textSize,
+		font = theme.fonts.roboto.light,
+		textScaled = true,
+		textColor = theme.palette.crust,
+		size = UDim2.new(1, 0, 1, 0),
+		textYAlignment = "Center",
+	}, React.createElement("uiflexitem", {
+		FlexMode = Enum.UIFlexMode.Fill,
+	})), React.createElement(Text, {
+		text = if isExpanded then "×" else "+",
+		textSize = rem(4),
+		textScaled = true,
+		textColor = theme.palette.crust,
+		size = UDim2.new(0, rem(5), 1, 0),
+		textYAlignment = "Center",
+		position = UDim2.new(1, 0, 0, 0),
+		anchorPoint = Vector2.new(1, 0),
+	})), React.createElement("frame", {
+		Size = contentSize,
+		BackgroundTransparency = 1,
+		ClipsDescendants = true,
+	}, React.createElement(VStack, {
+		padding = rem(2),
+		spacing = rem(2),
+		size = UDim2.new(1, 0, 0, 0),
+		automaticSize = Enum.AutomaticSize.Y,
+		change = {
+			AbsoluteSize = function(rbx)
+				setContentHeight(rbx.AbsoluteSize.Y)
+			end,
+		},
+		sortOrder = sortOrder,
+	}, children)))
+end
+return {
+	Accordion = Accordion,
+}

package/dist/Button.d.ts

@@ -0,0 +1,15 @@
+import React from "@rbxts/react";
+import { FrameProps } from "@rbxts-ui/primitives";
+export interface ButtonProps extends FrameProps<TextButton> {
+    active?: boolean | React.Binding<boolean>;
+    onClick?: () => void;
+    onMouseDown?: () => void;
+    onMouseUp?: () => void;
+    onMouseEnter?: () => void;
+    onMouseLeave?: () => void;
+    onMouseClick?: () => void;
+    automaticSize?: Enum.AutomaticSize;
+    selectable?: boolean | React.Binding<boolean>;
+}
+export declare const Button: React.ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & React.RefAttributes<TextButton>>;
+//# sourceMappingURL=Button.d.ts.map

package/dist/Button.luau

@@ -0,0 +1,66 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local forwardRef = _react.forwardRef
+local Button = forwardRef(function(props, ref)
+	local _binding = props
+	local onClick = _binding.onClick
+	local onMouseDown = _binding.onMouseDown
+	local onMouseEnter = _binding.onMouseEnter
+	local onMouseLeave = _binding.onMouseLeave
+	local onMouseUp = _binding.onMouseUp
+	local onMouseClick = _binding.onMouseClick
+	local _object = {
+		Activated = onClick and (function()
+			return onClick()
+		end),
+		MouseButton1Down = onMouseDown and (function()
+			return onMouseDown()
+		end),
+		MouseButton1Click = onMouseClick and (function()
+			return onMouseClick()
+		end),
+		MouseButton1Up = onMouseUp and (function()
+			return onMouseUp()
+		end),
+		MouseEnter = onMouseEnter and (function()
+			return onMouseEnter()
+		end),
+		MouseLeave = onMouseLeave and (function()
+			return onMouseLeave()
+		end),
+	}
+	local _spread = props.event
+	if _spread then
+		for _k, _v in _spread do
+			_object[_k] = _v
+		end
+	end
+	local event = _object
+	return React.createElement("textbutton", {
+		ref = ref,
+		Active = props.active,
+		Text = "",
+		AutoButtonColor = false,
+		Size = props.size,
+		Position = props.position,
+		AnchorPoint = props.anchorPoint,
+		BackgroundColor3 = props.backgroundColor,
+		BackgroundTransparency = props.backgroundTransparency,
+		ClipsDescendants = props.clipsDescendants,
+		Visible = props.visible,
+		ZIndex = props.zIndex,
+		LayoutOrder = props.layoutOrder,
+		BorderSizePixel = 0,
+		Selectable = props.selectable,
+		Event = event,
+		Change = props.change,
+		AutomaticSize = props.automaticSize,
+	}, props.children, props.cornerRadius and React.createElement("uicorner", {
+		CornerRadius = props.cornerRadius,
+	}))
+end)
+return {
+	Button = Button,
+}

package/dist/Checkbox.d.ts

@@ -0,0 +1,13 @@
+import { type Theme } from "./theme";
+interface CheckboxProps {
+    checked: boolean;
+    onChecked: (checked: boolean) => void;
+    text?: string;
+    variant?: "default" | "large" | "small";
+    position?: UDim2;
+    disabled?: boolean;
+    theme?: Theme;
+}
+export declare function Checkbox({ checked, onChecked, text, variant, position, disabled, theme, }: CheckboxProps): JSX.Element;
+export type { CheckboxProps };
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/Checkbox.luau

@@ -0,0 +1,113 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
+local lerpBinding = _pretty_react_hooks.lerpBinding
+local useMotion = _pretty_react_hooks.useMotion
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useMemo = _react.useMemo
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local Outline = TS.import(script, script.Parent, "Outline").Outline
+local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local function Checkbox(_param)
+	local checked = _param.checked
+	local onChecked = _param.onChecked
+	local text = _param.text
+	local variant = _param.variant
+	if variant == nil then
+		variant = "default"
+	end
+	local position = _param.position
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	local theme = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local rem = useRem()
+	local hover, hoverMotion = useMotion(0)
+	local checkboxSize = if variant == "large" then 4 elseif variant == "small" then 1.7 else 3
+	local buttonSize = UDim2.new(0, rem(checkboxSize), 0, rem(checkboxSize))
+	local textWidth, textWidthMotion = useMotion({
+		label = 0,
+		value = 0,
+	})
+	local size = useMemo(function()
+		return textWidth:map(function(_param_1)
+			local label = _param_1.label
+			local value = _param_1.value
+			local content = math.max(label, value)
+			local width = checkboxSize
+			return UDim2.new(0, rem(width) + content, 0, rem(checkboxSize))
+		end)
+	end, { rem })
+	local cornerRadius = UDim.new(0, rem(1))
+	local mainColor = if disabled then theme.palette.overlay0 else theme.palette.black
+	local textColor = if disabled then theme.palette.overlay0 else theme.palette.black
+	return React.createElement(ReactiveButton, {
+		backgroundTransparency = 1,
+		size = size,
+		position = position,
+		onClick = function()
+			return not disabled and onChecked(not checked)
+		end,
+		onHover = function(hovered)
+			return hoverMotion:spring(if hovered then 1 else 0)
+		end,
+		theme = theme,
+	}, React.createElement("uilistlayout", {
+		FillDirection = "Horizontal",
+		VerticalAlignment = "Center",
+		Padding = UDim.new(0, 8),
+	}), React.createElement(Frame, {
+		backgroundTransparency = 1,
+		size = buttonSize,
+	}, React.createElement(Frame, {
+		backgroundColor = theme.palette.white,
+		cornerRadius = cornerRadius,
+		size = UDim2.new(1, 0, 1, 0),
+	}, React.createElement("uigradient", {
+		Offset = lerpBinding(hover, Vector2.new(), Vector2.new(0, 1)),
+		Rotation = 90,
+		Transparency = NumberSequence.new(0, 0.1),
+	})), React.createElement(Outline, {
+		outerColor = mainColor,
+		innerColor = mainColor,
+		cornerRadius = cornerRadius,
+		innerTransparency = 0,
+		outerTransparency = 1,
+		innerThickness = 2,
+		theme = theme,
+	}), React.createElement(Text, {
+		text = if checked then "✔" else "",
+		textColor = mainColor,
+		textScaled = true,
+		size = UDim2.new(1, 0, 1, 0),
+		position = UDim2.new(0.5, 0, 0.5, 0),
+		anchorPoint = Vector2.new(0.5, 0.5),
+		textXAlignment = "Center",
+		textYAlignment = "Center",
+		padding = 0.9,
+		rem = rem,
+	})), if text ~= "" and text then (React.createElement(Text, {
+		text = text,
+		size = UDim2.new(0, rem(2), 0, rem(2)),
+		textColor = textColor,
+		textXAlignment = "Left",
+		change = {
+			TextBounds = function(rbx)
+				textWidthMotion:spring({
+					value = rbx.TextBounds.X,
+				})
+			end,
+		},
+	})) else nil)
+end
+return {
+	Checkbox = Checkbox,
+}

package/dist/CheckboxRow.d.ts

@@ -0,0 +1,14 @@
+import React from "@rbxts/react";
+import { type Theme } from "./theme";
+interface CheckboxRowProps {
+    label: string;
+    checked: boolean;
+    onChecked: () => void;
+    disabled?: boolean;
+    name?: string;
+    children?: React.ReactNode;
+    theme?: Theme;
+}
+export declare function CheckboxRow({ label, checked, onChecked, disabled, name, children, theme, }: CheckboxRowProps): JSX.Element;
+export type { CheckboxRowProps };
+//# sourceMappingURL=CheckboxRow.d.ts.map

package/dist/CheckboxRow.luau

@@ -0,0 +1,52 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local Checkbox = TS.import(script, script.Parent, "Checkbox").Checkbox
+local Button = TS.import(script, script.Parent, "Button").Button
+local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local function CheckboxRow(_param)
+	local label = _param.label
+	local checked = _param.checked
+	local onChecked = _param.onChecked
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	local name = _param.name
+	local children = _param.children
+	local theme = _param.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local rem = useRem()
+	local textSize = rem(3)
+	return React.createElement(HStack, {
+		size = UDim2.new(1, 0, 0, 0),
+		automaticSize = Enum.AutomaticSize.Y,
+		spacing = rem(2),
+		name = name,
+	}, React.createElement(Checkbox, {
+		checked = checked,
+		variant = "large",
+		onChecked = onChecked,
+		disabled = disabled,
+		theme = theme,
+	}), React.createElement(Button, {
+		backgroundTransparency = 1,
+		size = UDim2.new(1, 0, 0, rem(4)),
+		onClick = if disabled then function() end else onChecked,
+	}, React.createElement(Text, {
+		text = label,
+		textSize = textSize,
+		textScaled = true,
+		textColor = if disabled then theme.palette.overlay0 else theme.palette.crust,
+		size = UDim2.new(1, 0, 1, 0),
+		textXAlignment = "Left",
+	})), children)
+end
+return {
+	CheckboxRow = CheckboxRow,
+}

package/dist/ClickOutsideOverlay.d.ts

@@ -0,0 +1,11 @@
+import React from "@rbxts/react";
+interface ClickOutsideOverlayProps {
+    readonly onClickOutside: () => void;
+}
+export declare function ClickOutsideOverlay({ onClickOutside }: ClickOutsideOverlayProps): JSX.Element;
+interface ClickOutsideLayerProps extends React.PropsWithChildren {
+    readonly onClickOutside: () => void;
+}
+export declare function ClickOutsideLayer({ onClickOutside, children }: ClickOutsideLayerProps): JSX.Element;
+export type { ClickOutsideOverlayProps, ClickOutsideLayerProps };
+//# sourceMappingURL=ClickOutsideOverlay.d.ts.map

package/dist/ClickOutsideOverlay.luau

@@ -0,0 +1,35 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local function ClickOutsideOverlay(_param)
+	local onClickOutside = _param.onClickOutside
+	return React.createElement(Frame, {
+		size = UDim2.new(1, 0, 1, 0),
+		backgroundTransparency = 1,
+		active = true,
+		event = {
+			InputBegan = function(_, input)
+				if input.UserInputType ~= Enum.UserInputType.MouseButton1 and input.UserInputType ~= Enum.UserInputType.Touch then
+					return nil
+				end
+				onClickOutside()
+			end,
+		},
+	})
+end
+local function ClickOutsideLayer(_param)
+	local onClickOutside = _param.onClickOutside
+	local children = _param.children
+	return React.createElement(Frame, {
+		size = UDim2.new(1, 0, 1, 0),
+		backgroundTransparency = 1,
+		active = true,
+	}, React.createElement(ClickOutsideOverlay, {
+		onClickOutside = onClickOutside,
+	}), children)
+end
+return {
+	ClickOutsideOverlay = ClickOutsideOverlay,
+	ClickOutsideLayer = ClickOutsideLayer,
+}

package/dist/Dropdown.d.ts

@@ -0,0 +1,18 @@
+import React from "@rbxts/react";
+import { type Theme } from "./theme";
+interface DropdownOption<T> {
+    label: string;
+    value: T;
+}
+interface DropdownProps<T> {
+    options: Array<DropdownOption<T>>;
+    value?: T;
+    onChange: (value: T) => void;
+    size?: UDim2;
+    renderOption?: (option: DropdownOption<T>) => React.ReactNode;
+    portalRef?: React.RefObject<GuiObject>;
+    theme?: Theme;
+}
+export declare function Dropdown<T>(props: DropdownProps<T>): JSX.Element;
+export type { DropdownOption, DropdownProps };
+//# sourceMappingURL=Dropdown.d.ts.map

package/dist/Dropdown.luau

@@ -0,0 +1,160 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local VStackScrolling = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).VStackScrolling
+local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local useState = _react.useState
+local createPortal = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox")).createPortal
+local ClickOutsideLayer = TS.import(script, script.Parent, "ClickOutsideOverlay").ClickOutsideLayer
+local DropdownButton = TS.import(script, script.Parent, "DropdownButton").DropdownButton
+local DropdownOptionButton = TS.import(script, script.Parent, "DropdownOptionButton").DropdownOptionButton
+local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local function Dropdown(props)
+	local _binding = props
+	local options = _binding.options
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local size = _binding.size
+	local renderOption = _binding.renderOption
+	local portalRef = _binding.portalRef
+	local theme = _binding.theme
+	if theme == nil then
+		theme = defaultTheme
+	end
+	local isOpen, setIsOpen = useState(false)
+	local dropdownBounds, setDropdownBounds = useState()
+	local dropdownRef = useRef()
+	local rem = useRem()
+	local frameSize = size or UDim2.new(0.4, 0, 0, rem(5))
+	local optionHeight = rem(5)
+	-- ▼ ReadonlyArray.find ▼
+	local _callback = function(option)
+		return option.value == value
+	end
+	local _result
+	for _i, _v in options do
+		if _callback(_v, _i - 1, options) == true then
+			_result = _v
+			break
+		end
+	end
+	-- ▲ ReadonlyArray.find ▲
+	local selectedOption = _result
+	local cornerRadius = UDim.new(0, rem(1.7))
+	local dropdownHeight = #options * optionHeight
+	useEffect(function()
+		if not isOpen then
+			setDropdownBounds(nil)
+			return nil
+		end
+		local frame = dropdownRef.current
+		if not frame then
+			return nil
+		end
+		local updateBounds = function()
+			setDropdownBounds({
+				position = frame.AbsolutePosition,
+				size = frame.AbsoluteSize,
+			})
+		end
+		updateBounds()
+		local positionConnection = frame:GetPropertyChangedSignal("AbsolutePosition"):Connect(updateBounds)
+		local sizeConnection = frame:GetPropertyChangedSignal("AbsoluteSize"):Connect(updateBounds)
+		return function()
+			positionConnection:Disconnect()
+			sizeConnection:Disconnect()
+		end
+	end, { isOpen })
+	local renderOptions = function()
+		local _exp = React.createElement("uicorner", {
+			CornerRadius = cornerRadius,
+		})
+		local _exp_1 = React.createElement("uistroke", {
+			Color = theme.palette.crust,
+			Transparency = 0.5,
+			Thickness = 1,
+		})
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#options)
+		local _callback_1 = function(option)
+			return React.createElement(DropdownOptionButton, {
+				key = tostring(option.value),
+				text = option.label,
+				size = UDim2.new(1, 0, 0, optionHeight),
+				onClick = function()
+					onChange(option.value)
+					setIsOpen(false)
+				end,
+				theme = theme,
+			}, if renderOption then renderOption(option) else nil)
+		end
+		for _k, _v in options do
+			_newValue[_k] = _callback_1(_v, _k - 1, options)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		return React.createElement(React.Fragment, nil, _exp, _exp_1, _newValue)
+	end
+	local dropdownOverlay = (function()
+		if not isOpen then
+			return nil
+		end
+		-- Use provided portalRef or fallback to Players.LocalPlayer.PlayerGui
+		local _container = portalRef
+		if _container ~= nil then
+			_container = _container.current
+		end
+		local container = _container
+		if not container then
+			error("Dropdown requires a portalRef prop or a PortalProvider with an active portalRef")
+		end
+		if not dropdownBounds then
+			return nil
+		end
+		local containerPosition = container.AbsolutePosition
+		local relativePosition = dropdownBounds.position - containerPosition
+		local dropdownY = relativePosition.Y + dropdownBounds.size.Y
+		return createPortal(React.createElement(ClickOutsideLayer, {
+			onClickOutside = function()
+				return setIsOpen(false)
+			end,
+		}, React.createElement(VStackScrolling, {
+			Position = UDim2.new(0, relativePosition.X, 0, dropdownY),
+			Size = UDim2.new(0, dropdownBounds.size.X, 0, dropdownHeight),
+			BackgroundColor3 = theme.palette.white,
+			BackgroundTransparency = 0,
+			ClipsDescendants = true,
+			BorderColor3 = theme.palette.crust,
+			ZIndex = 2000,
+			paddingBottom = rem(1),
+		}, renderOptions())), container)
+	end)()
+	local _attributes = {}
+	local _result_1 = selectedOption
+	if _result_1 ~= nil then
+		_result_1 = _result_1.label
+	end
+	local _condition = _result_1
+	if not (_condition ~= "" and _condition) then
+		_condition = "Select..."
+	end
+	_attributes.text = _condition
+	_attributes.size = UDim2.new(1, 0, 1, 0)
+	_attributes.onClick = function()
+		return setIsOpen(not isOpen)
+	end
+	_attributes.theme = theme
+	return React.createElement(Frame, {
+		backgroundTransparency = 1,
+		size = frameSize,
+		ref = dropdownRef,
+	}, React.createElement(DropdownButton, _attributes), dropdownOverlay, React.createElement("uiflexitem", {
+		FlexMode = Enum.UIFlexMode.Fill,
+	}))
+end
+return {
+	Dropdown = Dropdown,
+}

package/dist/DropdownButton.d.ts

@@ -0,0 +1,22 @@
+import React from "@rbxts/react";
+import { type Theme } from "./theme";
+interface DropdownButtonProps extends React.PropsWithChildren {
+    readonly text: string;
+    readonly onClick?: () => void;
+    readonly onHover?: (hovered: boolean) => void;
+    readonly size?: UDim2 | React.Binding<UDim2>;
+    readonly position?: UDim2 | React.Binding<UDim2>;
+    readonly anchorPoint?: Vector2 | React.Binding<Vector2>;
+    readonly overlayGradient?: ColorSequence | React.Binding<ColorSequence>;
+    readonly overlayTransparency?: number | React.Binding<number>;
+    readonly overlayRotation?: number | React.Binding<number>;
+    readonly layoutOrder?: number | React.Binding<number>;
+    readonly isDisabled?: boolean;
+    readonly hasShadow?: boolean;
+    readonly padding?: number;
+    readonly radius?: number;
+    readonly theme?: Theme;
+}
+export declare function DropdownButton({ text, onClick, onHover, position, anchorPoint, layoutOrder, isDisabled, size, padding, radius, theme, }: DropdownButtonProps): JSX.Element;
+export type { DropdownButtonProps };
+//# sourceMappingURL=DropdownButton.d.ts.map