@rbxts-ui/components 2.1.0 → 3.0.0

package/dist/{TextField.luau → form/TextField.luau}

@@ -2,12 +2,13 @@
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
+local forwardRef = _react.forwardRef
 local useEffect = _react.useEffect
 local useState = _react.useState
 local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist)
 local fonts = _primitives.fonts
 local Group = _primitives.Group
-local function TextField(props)
+local TextField = forwardRef(function(props, ref)
 	local childRef, setChildRef = useState(nil)
 	useEffect(function()
 		local _condition = childRef
@@ -27,6 +28,7 @@ local function TextField(props)
 		end
 	end, { childRef, props.text })
 	local _attributes = {
+		ref = ref,
 		PlaceholderText = props.placeholderText,
 		PlaceholderColor3 = props.placeholderColor,
 		ClearTextOnFocus = props.clearTextOnFocus,
@@ -65,7 +67,7 @@ local function TextField(props)
 	}), React.createElement(Group, {
 		ref = setChildRef,
 	}))
-end
+end)
 return {
 	TextField = TextField,
 }

package/dist/form/validation.d.ts

@@ -0,0 +1,13 @@
+export declare function validateAngle(val: string): "Please enter a valid number" | "Angle must be greater than 0" | "Angle must be less than 180" | undefined;
+export declare function validatePosNumber(val: string): "Please enter a valid number" | "Number must be greater than 0" | undefined;
+export declare function validateNumber(val: string): "Please enter a valid number" | undefined;
+/**
+ * Validates that a number is within specified bounds
+ * @param val - String value to validate
+ * @param min - Minimum allowed value
+ * @param max - Maximum allowed value
+ * @param customErrorMsg - Optional custom error message for bounds error
+ * @returns Error message or undefined if valid
+ */
+export declare function validateNumberBounds(val: string, min: number, max: number, customErrorMsg?: string): string | undefined;
+//# sourceMappingURL=validation.d.ts.map

package/dist/form/validation.luau

@@ -0,0 +1,80 @@
+-- Compiled with roblox-ts v3.0.0
+local function validateAngle(val)
+	local _condition = tonumber(val)
+	if _condition == nil then
+		_condition = 0
+	end
+	local angle = _condition
+	local _value = tonumber(val)
+	if not (_value ~= 0 and _value == _value and _value) then
+		return "Please enter a valid number"
+	end
+	if angle < 0 then
+		return "Angle must be greater than 0"
+	end
+	if angle > 180 then
+		return "Angle must be less than 180"
+	end
+	return nil
+end
+local function validatePosNumber(val)
+	local _condition = tonumber(val)
+	if _condition == nil then
+		_condition = 0
+	end
+	local number = _condition
+	local _value = tonumber(val)
+	if not (_value ~= 0 and _value == _value and _value) then
+		return "Please enter a valid number"
+	end
+	if number < 0 then
+		return "Number must be greater than 0"
+	end
+	return nil
+end
+local function validateNumber(val)
+	local valParsed = tonumber(val)
+	if not (valParsed ~= 0 and valParsed == valParsed and valParsed) and valParsed ~= 0 then
+		return "Please enter a valid number"
+	end
+	return nil
+end
+--[[
+	*
+	 * Validates that a number is within specified bounds
+	 * @param val - String value to validate
+	 * @param min - Minimum allowed value
+	 * @param max - Maximum allowed value
+	 * @param customErrorMsg - Optional custom error message for bounds error
+	 * @returns Error message or undefined if valid
+	 
+]]
+local function validateNumberBounds(val, min, max, customErrorMsg)
+	local _condition = tonumber(val)
+	if _condition == nil then
+		_condition = 0
+	end
+	local number = _condition
+	local _value = tonumber(val)
+	local _condition_1 = not (_value ~= 0 and _value == _value and _value)
+	if _condition_1 then
+		_condition_1 = number ~= 0
+	end
+	if _condition_1 then
+		return "Please enter a valid number"
+	end
+	if number < min or number > max then
+		local _condition_2 = customErrorMsg
+		if _condition_2 == nil then
+			_condition_2 = `Number must be between {min} and {max}`
+		end
+		return _condition_2
+	end
+	return nil
+end
+return {
+	validateAngle = validateAngle,
+	validatePosNumber = validatePosNumber,
+	validateNumber = validateNumber,
+	validateNumberBounds = validateNumberBounds,
+}

package/dist/{use-button-animation.d.ts → hooks/use-button-animation.d.ts}

@@ -1,5 +1,4 @@
 import React from "@rbxts/react";
-import { type Theme } from "./theme";
 export interface ButtonAnimation {
     /**
      * An underdamped spring. `-1` is fully hovered, `0` is neutral, and `1` is
@@ -31,8 +30,7 @@ export interface ButtonAnimation {
  *
  * @param pressedState Whether the button is pressed.
  * @param hoveredState Whether the button is hovered.
- * @param theme Optional theme for spring configs.
  * @returns A `ButtonAnimation` object.
  */
-export declare function useButtonAnimation(pressedState: boolean, hoveredState: boolean, theme?: Theme): ButtonAnimation;
+export declare function useButtonAnimation(pressedState: boolean, hoveredState: boolean): ButtonAnimation;
 //# sourceMappingURL=use-button-animation.d.ts.map

package/dist/{use-button-animation.luau → hooks/use-button-animation.luau}

@@ -4,7 +4,7 @@ local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pr
 local useMotion = _pretty_react_hooks.useMotion
 local useUpdateEffect = _pretty_react_hooks.useUpdateEffect
 local useMemo = TS.import(script, TS.getModule(script, "@rbxts", "react")).useMemo
-local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
+local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 --[[
 	*
 	 * Returns a `ButtonAnimation` object that can be used to animate a button.
@@ -18,14 +18,11 @@ local defaultTheme = TS.import(script, script.Parent, "theme").defaultTheme
 	 *
 	 * @param pressedState Whether the button is pressed.
 	 * @param hoveredState Whether the button is hovered.
-	 * @param theme Optional theme for spring configs.
 	 * @returns A `ButtonAnimation` object.
 	 
 ]]
-local function useButtonAnimation(pressedState, hoveredState, theme)
-	if theme == nil then
-		theme = defaultTheme
-	end
+local function useButtonAnimation(pressedState, hoveredState)
+	local theme = defaultTheme
 	local press, pressMotion = useMotion(0)
 	local hover, hoverMotion = useMotion(0)
 	local hoverExclusive, hoverExclusiveMotion = useMotion(0)

package/dist/index.d.ts

@@ -1,33 +1,49 @@
-export { Padding, type PaddingProps } from "./Padding";
-export { Divider, type DividerProps } from "./Divider";
-export { Checkmark, type CheckmarkProps } from "./Checkmark";
-export { DelayRender, type DelayRenderProps } from "./DelayRender";
-export { ErrorBoundary, type ErrorBoundaryProps } from "./ErrorBoundary";
-export { TextField, type TextFieldProps } from "./TextField";
-export { defaultTheme, type Theme } from "./theme";
-export { Outline, type OutlineProps } from "./Outline";
-export { Button, type ButtonProps } from "./Button";
-export { ReactiveButton, type ReactiveButtonProps } from "./ReactiveButton";
-export { ClickOutsideOverlay, ClickOutsideLayer, type ClickOutsideOverlayProps, type ClickOutsideLayerProps } from "./ClickOutsideOverlay";
-export { useInputDevice, type InputDevice } from "./use-input-device";
-export { useButtonState, type ButtonEvents } from "./use-button-state";
-export { useButtonAnimation, type ButtonAnimation } from "./use-button-animation";
-export { Checkbox, type CheckboxProps } from "./Checkbox";
-export { Radio, type RadioProps } from "./Radio";
-export { PrimaryButton, type PrimaryButtonProps } from "./PrimaryButton";
-export { TextButton, TextButtonVariant, type TextButtonProps } from "./TextButton";
-export { IconRoundButton, type IconRoundButtonProps } from "./IconRoundButton";
-export { IconTileButton, type IconTileButtonProps } from "./IconTileButton";
-export { FormRow, type FormRowProps } from "./FormRow";
-export { CheckboxRow, type CheckboxRowProps } from "./CheckboxRow";
-export { RadioRow, type RadioRowProps } from "./RadioRow";
-export { SegmentedToggle, type SegmentedToggleProps, type SegmentedToggleOption } from "./SegmentedToggle";
-export { Section, type SectionProps } from "./Section";
-export { Accordion, type AccordionProps } from "./Accordion";
-export { Dropdown, type DropdownProps, type DropdownOption } from "./Dropdown";
-export { DropdownButton, type DropdownButtonProps } from "./DropdownButton";
-export { DropdownOptionButton, type DropdownOptionButtonProps } from "./DropdownOptionButton";
-export { TimeAgo, type TimeAgoProps } from "./TimeAgo";
-export { Legend, type LegendProps } from "./Legend";
-export { PillText, type PillTextProps } from "./PillText";
+export { Checkmark, type CheckmarkProps } from "./display/Checkmark";
+export { ErrorHandler, ErrorPage } from "./error-handler/index";
+export { TextBox, type TextBoxProps } from "./form/TextBox";
+export { TextField, type TextFieldProps } from "./form/TextField";
+export { Divider, type DividerProps } from "./layout/Divider";
+export { Padding, type PaddingProps } from "./layout/Padding";
+export { DelayRender, type DelayRenderProps } from "./utils/DelayRender";
+export { ErrorBoundary, type ErrorBoundaryProps } from "./utils/ErrorBoundary";
+export { Button, type ButtonProps } from "./buttons/Button";
+export { ReactiveButton, type ReactiveButtonProps } from "./buttons/ReactiveButton";
+export { useButtonAnimation, type ButtonAnimation } from "./hooks/use-button-animation";
+export { useButtonState, type ButtonEvents } from "./hooks/use-button-state";
+export { useInputDevice, type InputDevice } from "./hooks/use-input-device";
+export { useTooltip } from "./tooltip/useTooltip";
+export { ClickOutsideLayer, ClickOutsideOverlay, type ClickOutsideLayerProps, type ClickOutsideOverlayProps, } from "./utils/ClickOutsideOverlay";
+export { Outline, type OutlineProps } from "./utils/Outline";
+export { Checkbox, type CheckboxProps } from "./form/Checkbox";
+export { Radio, type RadioProps } from "./form/Radio";
+export { IconRoundButton, type IconRoundButtonProps } from "./buttons/IconRoundButton";
+export { IconTileButton, type IconTileButtonProps } from "./buttons/IconTileButton";
+export { PrimaryButton, type PrimaryButtonProps } from "./buttons/PrimaryButton";
+export { TextButton, TextButtonVariant, type TextButtonProps } from "./buttons/TextButton";
+export { CheckboxRow, type CheckboxRowProps } from "./form/CheckboxRow";
+export { DropdownRow, type DropdownRowProps } from "./form/DropdownRow";
+export { FormRow, type FormRowProps } from "./form/FormRow";
+export { InputRow, type InputRowProps } from "./form/InputRow";
+export { RadioRow, type RadioRowProps } from "./form/RadioRow";
+export { Accordion, type AccordionProps } from "./layout/Accordion";
+export { Section, type SectionProps } from "./layout/Section";
+export { SegmentedToggle, type SegmentedToggleOption, type SegmentedToggleProps } from "./layout/SegmentedToggle";
+export { ExampleTable } from "./table/ExampleTable";
+export { Table, type TableProps } from "./table/Table";
+export { TableCell, type TableCellProps } from "./table/TableCell";
+export { TableFooter, type TableFooterProps } from "./table/TableFooter";
+export { TableHeader, type TableHeaderProps } from "./table/TableHeader";
+export { TableRow, type TableRowProps } from "./table/TableRow";
+export { DropdownButton, type DropdownButtonProps } from "./buttons/DropdownButton";
+export { DropdownOptionButton, type DropdownOptionButtonProps } from "./buttons/DropdownOptionButton";
+export { Dropdown, type DropdownOption, type DropdownProps } from "./form/Dropdown";
+export { Legend, type LegendProps } from "./display/Legend";
+export { PillText, type PillTextProps } from "./display/PillText";
+export { TimeAgo, type TimeAgoProps } from "./display/TimeAgo";
+export { Tooltip, type TooltipProps } from "./tooltip/Tooltip";
+export { validateAngle, validateNumber, validateNumberBounds, validatePosNumber } from "./form/validation";
+export { InputRound, type InputRoundProps } from "./form/InputRound";
+export { RoundEmoji, type RoundEmojiProps } from "./form/RoundEmoji";
+export { DynamicWindow, type ExtendableFrameProps } from "./DynamicWindow/DynamicWindow";
+export { clampViewportPosition, getInputViewportPos, getMouseViewportPos, resolveWindowSpawnPosition, type Mode, type ResizeCorner, type WindowSpawnOptions, } from "./DynamicWindow/DynamicWindow.utils";
 //# sourceMappingURL=index.d.ts.map

package/dist/init.luau

@@ -1,47 +1,76 @@
 -- 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.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.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
+-- 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