@rbxts-ui/components 2.1.0 → 3.1.0

package/dist/init.luau

@@ -1,47 +1,81 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
-exports.Padding = TS.import(script, script, "Padding").Padding
-exports.Divider = TS.import(script, script, "Divider").Divider
-exports.Checkmark = TS.import(script, script, "Checkmark").Checkmark
-exports.DelayRender = TS.import(script, script, "DelayRender").DelayRender
-exports.ErrorBoundary = TS.import(script, script, "ErrorBoundary").ErrorBoundary
-exports.TextField = TS.import(script, script, "TextField").TextField
--- Theme
-exports.defaultTheme = TS.import(script, script, "theme").defaultTheme
+exports.Checkmark = TS.import(script, script, "display", "Checkmark").Checkmark
+local _error_handler = TS.import(script, script, "error-handler")
+exports.ErrorHandler = _error_handler.ErrorHandler
+exports.ErrorPage = _error_handler.ErrorPage
+exports.TextBox = TS.import(script, script, "form", "TextBox").TextBox
+exports.TextField = TS.import(script, script, "form", "TextField").TextField
+exports.Divider = TS.import(script, script, "layout", "Divider").Divider
+exports.Padding = TS.import(script, script, "layout", "Padding").Padding
+exports.DelayRender = TS.import(script, script, "utils", "DelayRender").DelayRender
+exports.ErrorBoundary = TS.import(script, script, "utils", "ErrorBoundary").ErrorBoundary
 -- Utilities
-exports.Outline = TS.import(script, script, "Outline").Outline
-exports.Button = TS.import(script, script, "Button").Button
-exports.ReactiveButton = TS.import(script, script, "ReactiveButton").ReactiveButton
-local _ClickOutsideOverlay = TS.import(script, script, "ClickOutsideOverlay")
-exports.ClickOutsideOverlay = _ClickOutsideOverlay.ClickOutsideOverlay
+exports.Button = TS.import(script, script, "buttons", "Button").Button
+exports.ReactiveButton = TS.import(script, script, "buttons", "ReactiveButton").ReactiveButton
+exports.useButtonAnimation = TS.import(script, script, "hooks", "use-button-animation").useButtonAnimation
+exports.useButtonState = TS.import(script, script, "hooks", "use-button-state").useButtonState
+exports.useInputDevice = TS.import(script, script, "hooks", "use-input-device").useInputDevice
+exports.useTooltip = TS.import(script, script, "tooltip", "useTooltip").useTooltip
+local _ClickOutsideOverlay = TS.import(script, script, "utils", "ClickOutsideOverlay")
 exports.ClickOutsideLayer = _ClickOutsideOverlay.ClickOutsideLayer
-exports.useInputDevice = TS.import(script, script, "use-input-device").useInputDevice
-exports.useButtonState = TS.import(script, script, "use-button-state").useButtonState
-exports.useButtonAnimation = TS.import(script, script, "use-button-animation").useButtonAnimation
+exports.ClickOutsideOverlay = _ClickOutsideOverlay.ClickOutsideOverlay
+exports.InputCapture = TS.import(script, script, "utils", "InputCapture").InputCapture
+exports.Outline = TS.import(script, script, "utils", "Outline").Outline
 -- Form Inputs
-exports.Checkbox = TS.import(script, script, "Checkbox").Checkbox
-exports.Radio = TS.import(script, script, "Radio").Radio
+exports.Checkbox = TS.import(script, script, "form", "Checkbox").Checkbox
+exports.Radio = TS.import(script, script, "form", "Radio").Radio
 -- Buttons
-exports.PrimaryButton = TS.import(script, script, "PrimaryButton").PrimaryButton
-local _TextButton = TS.import(script, script, "TextButton")
+exports.IconRoundButton = TS.import(script, script, "buttons", "IconRoundButton").IconRoundButton
+exports.IconTileButton = TS.import(script, script, "buttons", "IconTileButton").IconTileButton
+exports.PrimaryButton = TS.import(script, script, "buttons", "PrimaryButton").PrimaryButton
+local _TextButton = TS.import(script, script, "buttons", "TextButton")
 exports.TextButton = _TextButton.TextButton
 exports.TextButtonVariant = _TextButton.TextButtonVariant
-exports.IconRoundButton = TS.import(script, script, "IconRoundButton").IconRoundButton
-exports.IconTileButton = TS.import(script, script, "IconTileButton").IconTileButton
 -- Form Layout
-exports.FormRow = TS.import(script, script, "FormRow").FormRow
-exports.CheckboxRow = TS.import(script, script, "CheckboxRow").CheckboxRow
-exports.RadioRow = TS.import(script, script, "RadioRow").RadioRow
-exports.SegmentedToggle = TS.import(script, script, "SegmentedToggle").SegmentedToggle
-exports.Section = TS.import(script, script, "Section").Section
-exports.Accordion = TS.import(script, script, "Accordion").Accordion
+exports.CheckboxRow = TS.import(script, script, "form", "CheckboxRow").CheckboxRow
+exports.DropdownRow = TS.import(script, script, "form", "DropdownRow").DropdownRow
+exports.FormRow = TS.import(script, script, "form", "FormRow").FormRow
+exports.InputRow = TS.import(script, script, "form", "InputRow").InputRow
+exports.RadioRow = TS.import(script, script, "form", "RadioRow").RadioRow
+exports.Accordion = TS.import(script, script, "layout", "Accordion").Accordion
+exports.Section = TS.import(script, script, "layout", "Section").Section
+exports.SegmentedToggle = TS.import(script, script, "layout", "SegmentedToggle").SegmentedToggle
+-- Table
+exports.ExampleTable = TS.import(script, script, "table", "ExampleTable").ExampleTable
+exports.Table = TS.import(script, script, "table", "Table").Table
+exports.TableCell = TS.import(script, script, "table", "TableCell").TableCell
+exports.TableFooter = TS.import(script, script, "table", "TableFooter").TableFooter
+exports.TableHeader = TS.import(script, script, "table", "TableHeader").TableHeader
+exports.TableRow = TS.import(script, script, "table", "TableRow").TableRow
 -- Dropdown
-exports.Dropdown = TS.import(script, script, "Dropdown").Dropdown
-exports.DropdownButton = TS.import(script, script, "DropdownButton").DropdownButton
-exports.DropdownOptionButton = TS.import(script, script, "DropdownOptionButton").DropdownOptionButton
+exports.DropdownButton = TS.import(script, script, "buttons", "DropdownButton").DropdownButton
+exports.DropdownOptionButton = TS.import(script, script, "buttons", "DropdownOptionButton").DropdownOptionButton
+exports.Dropdown = TS.import(script, script, "form", "Dropdown").Dropdown
 -- Display
-exports.TimeAgo = TS.import(script, script, "TimeAgo").TimeAgo
-exports.Legend = TS.import(script, script, "Legend").Legend
-exports.PillText = TS.import(script, script, "PillText").PillText
+exports.AlertBox = TS.import(script, script, "display", "AlertBox").AlertBox
+exports.Legend = TS.import(script, script, "display", "Legend").Legend
+exports.PillText = TS.import(script, script, "display", "PillText").PillText
+exports.TimeAgo = TS.import(script, script, "display", "TimeAgo").TimeAgo
+exports.Tooltip = TS.import(script, script, "tooltip", "Tooltip").Tooltip
+-- Icons
+exports.InfoIcon = TS.import(script, script, "icons", "InfoIcon").InfoIcon
+exports.WarningIcon = TS.import(script, script, "icons", "WarningIcon").WarningIcon
+-- Form Validation
+local _validation = TS.import(script, script, "form", "validation")
+exports.validateAngle = _validation.validateAngle
+exports.validateNumber = _validation.validateNumber
+exports.validateNumberBounds = _validation.validateNumberBounds
+exports.validatePosNumber = _validation.validatePosNumber
+-- Form Input Components
+exports.InputRound = TS.import(script, script, "form", "InputRound").InputRound
+exports.RoundEmoji = TS.import(script, script, "form", "RoundEmoji").RoundEmoji
+-- DynamicWindow
+exports.DynamicWindow = TS.import(script, script, "DynamicWindow", "DynamicWindow").DynamicWindow
+local _DynamicWindow_utils = TS.import(script, script, "DynamicWindow", "DynamicWindow.utils")
+exports.clampViewportPosition = _DynamicWindow_utils.clampViewportPosition
+exports.getInputViewportPos = _DynamicWindow_utils.getInputViewportPos
+exports.getMouseViewportPos = _DynamicWindow_utils.getMouseViewportPos
+exports.resolveWindowSpawnPosition = _DynamicWindow_utils.resolveWindowSpawnPosition
 return exports

package/dist/{Accordion.d.ts → layout/Accordion.d.ts}

@@ -1,5 +1,4 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 interface AccordionProps {
     title: string;
     children: React.ReactNode;
@@ -9,8 +8,7 @@ interface AccordionProps {
     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 declare function Accordion({ title, children, backgroundColor, backgroundTransparency, cornerRadius, sortOrder, isExpanded, onExpandedChange, }: AccordionProps): JSX.Element;
 export type { AccordionProps };
 //# sourceMappingURL=Accordion.d.ts.map

package/dist/{Accordion.luau → layout/Accordion.luau}

@@ -2,14 +2,14 @@
 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 useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).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 ReactiveButton = TS.import(script, script.Parent.Parent, "buttons", "ReactiveButton").ReactiveButton
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local DEFAULT_EXPANDED = true
 local function Accordion(_param)
 	local title = _param.title
@@ -29,10 +29,7 @@ local function Accordion(_param)
 	end
 	local isExpanded = _param.isExpanded
 	local onExpandedChange = _param.onExpandedChange
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local contentHeight, setContentHeight = useState(0)
 	-- Header visual height must match the header button height below (rem(5))
@@ -63,7 +60,6 @@ local function Accordion(_param)
 		onClick = handleToggle,
 		backgroundTransparency = 1,
 		size = UDim2.new(1, 0, 0, rem(5)),
-		theme = theme,
 	}, React.createElement(Text, {
 		text = title,
 		textSize = textSize,

package/dist/{Divider.luau → layout/Divider.luau}

@@ -2,7 +2,7 @@
 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 useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
 local DEFAULT_COLOR = Color3.fromRGB(255, 255, 255)
 local function Divider(_param)
 	local orientation = _param.orientation

package/dist/{Section.d.ts → layout/Section.d.ts}

@@ -1,12 +1,10 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 interface SectionProps {
     title: string;
     children: React.ReactNode;
     cornerRadius?: number;
     sortOrder?: Enum.SortOrder;
-    theme?: Theme;
 }
-export declare function Section({ title, children, cornerRadius, sortOrder, theme, }: SectionProps): JSX.Element;
+export declare function Section({ title, children, cornerRadius, sortOrder, }: SectionProps): JSX.Element;
 export type { SectionProps };
 //# sourceMappingURL=Section.d.ts.map

package/dist/{Section.luau → layout/Section.luau}

@@ -1,10 +1,10 @@
 -- 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 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 defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local function Section(_param)
 	local title = _param.title
 	local children = _param.children
@@ -16,10 +16,7 @@ local function Section(_param)
 	if sortOrder == nil then
 		sortOrder = Enum.SortOrder.Name
 	end
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local textSize = rem(3.5)
 	return React.createElement(VStack, {

package/dist/{SegmentedToggle.d.ts → layout/SegmentedToggle.d.ts}

@@ -1,5 +1,4 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 export interface SegmentedToggleOption<T extends string> {
     id: T;
     label: string;
@@ -13,7 +12,6 @@ export interface SegmentedToggleProps<T extends string> {
     size?: "default" | "small";
     label?: string;
     children?: React.ReactNode;
-    theme?: Theme;
 }
-export declare function SegmentedToggle<T extends string>({ options, value, onChange, disabled, size, label, children, theme, }: SegmentedToggleProps<T>): JSX.Element;
+export declare function SegmentedToggle<T extends string>({ options, value, onChange, disabled, size, label, children, }: SegmentedToggleProps<T>): JSX.Element;
 //# sourceMappingURL=SegmentedToggle.d.ts.map

package/dist/{SegmentedToggle.luau → layout/SegmentedToggle.luau}

@@ -1,14 +1,14 @@
 -- 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 Button = TS.import(script, script.Parent, "Button").Button
+local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local Button = TS.import(script, script.Parent.Parent, "buttons", "Button").Button
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
 local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
 local _layout = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist)
 local HStack = _layout.HStack
 local VStack = _layout.VStack
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local function SegmentedToggle(_param)
 	local options = _param.options
 	local value = _param.value
@@ -23,10 +23,7 @@ local function SegmentedToggle(_param)
 	end
 	local label = _param.label
 	local children = _param.children
-	local theme = _param.theme
-	if theme == nil then
-		theme = defaultTheme
-	end
+	local theme = defaultTheme
 	local rem = useRem()
 	local count = #options
 	if count == 0 then

package/dist/layout/SegmentedToggle.story.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import ReactRoblox from "@rbxts/react-roblox";
+declare const story: {
+    react: typeof React;
+    reactRoblox: typeof ReactRoblox;
+    controls: {};
+    story: () => JSX.Element;
+};
+export = story;
+//# sourceMappingURL=SegmentedToggle.story.d.ts.map

package/dist/layout/SegmentedToggle.story.luau

@@ -0,0 +1,72 @@
+-- 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 _rem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem"))
+local RemProvider = _rem.RemProvider
+local useRem = _rem.useRem
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
+local ReactRoblox = TS.import(script, TS.getModule(script, "@rbxts", "react-roblox"))
+local SegmentedToggle = TS.import(script, script.Parent, "SegmentedToggle").SegmentedToggle
+local controls = {}
+local SegmentedToggleStory = function()
+	local rem = useRem()
+	local demoOptions = { {
+		id = "Folder",
+		label = "Folder",
+	}, {
+		id = "Model",
+		label = "Model",
+	}, {
+		id = "Asset",
+		label = "Asset",
+	} }
+	local selection, setSelection = useState(demoOptions[1].id)
+	return React.createElement(RemProvider, {
+		baseRem = 16,
+		maximumRem = 32,
+	}, React.createElement(VStack, {
+		size = UDim2.new(1, 0, 1, 0),
+		spacing = rem(2),
+		horizontalAlignment = Enum.HorizontalAlignment.Center,
+		verticalAlignment = Enum.VerticalAlignment.Center,
+	}, React.createElement(SegmentedToggle, {
+		label = "Output Type",
+		options = demoOptions,
+		value = selection,
+		onChange = setSelection,
+	}), React.createElement(Text, {
+		text = `Selected: {selection}`,
+		textSize = rem(3),
+		textScaled = true,
+		textColor = defaultTheme.palette.text,
+		size = UDim2.new(0, rem(50), 0, rem(4)),
+		textXAlignment = "Center",
+	}), React.createElement(SegmentedToggle, {
+		label = "Disabled Example",
+		options = { {
+			id = "DisabledFolder",
+			label = "Folder",
+			disabled = true,
+		}, {
+			id = "DisabledModel",
+			label = "Model",
+		} },
+		value = "DisabledModel",
+		onChange = function() end,
+		disabled = true,
+		size = "small",
+	})))
+end
+local story = {
+	react = React,
+	reactRoblox = ReactRoblox,
+	controls = controls,
+	story = function()
+		return React.createElement(SegmentedToggleStory)
+	end,
+}
+return story

package/dist/table/ExampleTable.d.ts

@@ -0,0 +1,2 @@
+export declare function ExampleTable(): JSX.Element;
+//# sourceMappingURL=ExampleTable.d.ts.map

package/dist/table/ExampleTable.luau

@@ -0,0 +1,46 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local Table = TS.import(script, script.Parent, "Table").Table
+local TableCell = TS.import(script, script.Parent, "TableCell").TableCell
+local TableHeader = TS.import(script, script.Parent, "TableHeader").TableHeader
+local TableRow = TS.import(script, script.Parent, "TableRow").TableRow
+local function ExampleTable()
+	return React.createElement(Table, {
+		size = UDim2.new(0.8, 0, 0, 200),
+		backgroundTransparency = 1,
+		position = UDim2.new(0.1, 0, 0.1, 0),
+	}, React.createElement(TableHeader, {
+		size = UDim2.new(1, 0, 0, 30),
+	}, React.createElement(TableCell, {
+		size = UDim2.new(0.2, 0, 1, 0),
+	}, React.createElement(Text, {
+		text = "ID",
+	})), React.createElement(TableCell, {
+		size = UDim2.new(0.4, 0, 1, 0),
+	}, React.createElement(Text, {
+		text = "Name",
+	})), React.createElement(TableCell, {
+		size = UDim2.new(0.4, 0, 1, 0),
+	}, React.createElement(Text, {
+		text = "Score",
+	}))), React.createElement(TableRow, {
+		size = UDim2.new(1, 0, 0, 30),
+	}, React.createElement(TableCell, {
+		size = UDim2.new(0.2, 0, 1, 0),
+	}, React.createElement(Text, {
+		text = "1",
+	})), React.createElement(TableCell, {
+		size = UDim2.new(0.4, 0, 1, 0),
+	}, React.createElement(Text, {
+		text = "Alice",
+	})), React.createElement(TableCell, {
+		size = UDim2.new(0.4, 0, 1, 0),
+	}, React.createElement(Text, {
+		text = "95",
+	}))))
+end
+return {
+	ExampleTable = ExampleTable,
+}

package/dist/table/Table.d.ts

@@ -0,0 +1,10 @@
+import { PropsWithChildren } from "@rbxts/react";
+interface TableProps extends PropsWithChildren {
+    readonly size: UDim2;
+    readonly position?: UDim2;
+    readonly layoutOrder?: number;
+    readonly backgroundTransparency?: number;
+}
+export declare function Table({ children, size, position, layoutOrder, backgroundTransparency }: TableProps): JSX.Element;
+export type { TableProps };
+//# sourceMappingURL=Table.d.ts.map

package/dist/table/Table.luau

@@ -0,0 +1,26 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local VStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).VStack
+local function Table(_param)
+	local children = _param.children
+	local size = _param.size
+	local position = _param.position
+	local layoutOrder = _param.layoutOrder
+	if layoutOrder == nil then
+		layoutOrder = 0
+	end
+	local backgroundTransparency = _param.backgroundTransparency
+	if backgroundTransparency == nil then
+		backgroundTransparency = 1
+	end
+	return React.createElement(VStack, {
+		size = size,
+		position = position,
+		layoutOrder = layoutOrder,
+		backgroundTransparency = backgroundTransparency,
+	}, children)
+end
+return {
+	Table = Table,
+}

package/dist/table/TableCell.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "@rbxts/react";
+interface TableCellProps extends PropsWithChildren {
+    readonly size: UDim2;
+    readonly layoutOrder?: number;
+    readonly backgroundTransparency?: number;
+}
+export declare function TableCell({ children, size, layoutOrder, backgroundTransparency }: TableCellProps): JSX.Element;
+export type { TableCellProps };
+//# sourceMappingURL=TableCell.d.ts.map

package/dist/table/TableCell.luau

@@ -0,0 +1,26 @@
+-- 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 useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "@rbxts-ui/rem")).useRem
+local function TableCell(_param)
+	local children = _param.children
+	local size = _param.size
+	local layoutOrder = _param.layoutOrder
+	if layoutOrder == nil then
+		layoutOrder = 0
+	end
+	local backgroundTransparency = _param.backgroundTransparency
+	if backgroundTransparency == nil then
+		backgroundTransparency = 1
+	end
+	local rem = useRem()
+	return React.createElement(Frame, {
+		size = size,
+		layoutOrder = layoutOrder,
+		backgroundTransparency = backgroundTransparency,
+	}, children)
+end
+return {
+	TableCell = TableCell,
+}

package/dist/table/TableFooter.d.ts

@@ -0,0 +1,9 @@
+import { type HStackProps as StackProps } from "@rbxts-ui/layout";
+interface TableFooterProps extends StackProps {
+    readonly size: UDim2;
+    readonly layoutOrder?: number;
+    readonly backgroundTransparency?: number;
+}
+export declare function TableFooter(props: TableFooterProps): JSX.Element;
+export type { TableFooterProps };
+//# sourceMappingURL=TableFooter.d.ts.map

package/dist/table/TableFooter.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
+local function TableFooter(props)
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	return React.createElement(HStack, _attributes, props.children)
+end
+return {
+	TableFooter = TableFooter,
+}

package/dist/table/TableHeader.d.ts

@@ -0,0 +1,9 @@
+import { type HStackProps as StackProps } from "@rbxts-ui/layout";
+interface TableHeaderProps extends StackProps {
+    readonly size: UDim2;
+    readonly layoutOrder?: number;
+    readonly backgroundTransparency?: number;
+}
+export declare function TableHeader(props: TableHeaderProps): JSX.Element;
+export type { TableHeaderProps };
+//# sourceMappingURL=TableHeader.d.ts.map

package/dist/table/TableHeader.luau

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
+local function TableHeader(props)
+	local _attributes = table.clone(props)
+	setmetatable(_attributes, nil)
+	return React.createElement(HStack, _attributes, props.children)
+end
+return {
+	TableHeader = TableHeader,
+}

package/dist/table/TableRow.d.ts

@@ -0,0 +1,9 @@
+import { PropsWithChildren } from "@rbxts/react";
+interface TableRowProps extends PropsWithChildren {
+    readonly size: UDim2;
+    readonly layoutOrder?: number;
+    readonly backgroundTransparency?: number;
+}
+export declare function TableRow({ children, size, layoutOrder, backgroundTransparency }: TableRowProps): JSX.Element;
+export type { TableRowProps };
+//# sourceMappingURL=TableRow.d.ts.map

package/dist/table/TableRow.luau

@@ -0,0 +1,24 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local HStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist).HStack
+local function TableRow(_param)
+	local children = _param.children
+	local size = _param.size
+	local layoutOrder = _param.layoutOrder
+	if layoutOrder == nil then
+		layoutOrder = 0
+	end
+	local backgroundTransparency = _param.backgroundTransparency
+	if backgroundTransparency == nil then
+		backgroundTransparency = 1
+	end
+	return React.createElement(HStack, {
+		size = size,
+		layoutOrder = layoutOrder,
+		backgroundTransparency = backgroundTransparency,
+	}, children)
+end
+return {
+	TableRow = TableRow,
+}

package/dist/tooltip/Tooltip.d.ts

@@ -0,0 +1,14 @@
+interface TooltipProps {
+    text: string;
+    visible: boolean;
+    position?: UDim2;
+    offsetX?: number;
+    offsetY?: number;
+    backgroundColor?: Color3;
+    textColor?: Color3;
+    maxWidth?: number;
+    anchorPoint?: Vector2;
+}
+export declare function Tooltip({ text, visible, position, backgroundColor, textColor, anchorPoint, maxWidth, offsetX, offsetY, }: TooltipProps): JSX.Element | undefined;
+export type { TooltipProps };
+//# sourceMappingURL=Tooltip.d.ts.map

package/dist/tooltip/Tooltip.luau

@@ -0,0 +1,65 @@
+-- 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", "@rbxts-ui/rem")).useRem
+local Padding = TS.import(script, script.Parent.Parent, "layout", "Padding").Padding
+local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Text
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local function Tooltip(_param)
+	local text = _param.text
+	local visible = _param.visible
+	local position = _param.position
+	local backgroundColor = _param.backgroundColor
+	if backgroundColor == nil then
+		backgroundColor = defaultTheme.palette.black
+	end
+	local textColor = _param.textColor
+	if textColor == nil then
+		textColor = defaultTheme.palette.white
+	end
+	local anchorPoint = _param.anchorPoint
+	if anchorPoint == nil then
+		anchorPoint = Vector2.new(0.5, 0.5)
+	end
+	local maxWidth = _param.maxWidth
+	if maxWidth == nil then
+		maxWidth = 200
+	end
+	local offsetX = _param.offsetX
+	if offsetX == nil then
+		offsetX = 0
+	end
+	local offsetY = _param.offsetY
+	if offsetY == nil then
+		offsetY = 0
+	end
+	local rem = useRem()
+	local theme = defaultTheme
+	if not visible or not position then
+		return nil
+	end
+	local cornerRadius = UDim.new(0, rem(2))
+	return React.createElement(Text, {
+		backgroundColor = backgroundColor,
+		backgroundTransparency = 0.2,
+		text = text,
+		textSize = rem(2),
+		lineHeight = 1.5,
+		textColor = textColor,
+		font = theme.fonts.inter.medium,
+		position = UDim2.new(0, position.X.Offset + offsetX, 0, position.Y.Offset + offsetY),
+		size = UDim2.new(0, rem(maxWidth), 0, 0),
+		textYAlignment = "Center",
+		textXAlignment = "Left",
+		automaticSize = Enum.AutomaticSize.Y,
+		textWrapped = true,
+		cornerRadius = cornerRadius,
+		anchorPoint = anchorPoint,
+	}, React.createElement(Padding, {
+		paddingX = rem(2),
+		paddingY = rem(1.5),
+	}))
+end
+return {
+	Tooltip = Tooltip,
+}