@rbxts-ui/components 7.0.1 → 8.0.0

package/dist/form/InputRound.d.ts

@@ -1,7 +1,23 @@
 import React from "@rbxts/react";
+import { type StyleProps } from "@rbxts-ui/theme";
+import type { IconName } from "@rbxts-ui/icons";
+declare const useInputRoundStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    bgColor: "surface";
+    outlineColor: "border";
+    textColor: "textPrimary";
+    disabledColor: "textMuted";
+    errorColor: "danger";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    bgColor: "surface";
+    outlineColor: "border";
+    textColor: "textPrimary";
+    disabledColor: "textMuted";
+    errorColor: "danger";
+}>;
+export type InputRoundStyle = StyleProps<typeof useInputRoundStyle>;
 interface InputRoundProps {
     readonly onClick?: () => void;
-    readonly emoji: string;
+    readonly icon: IconName;
     readonly placeholderText: string;
     readonly value: string | React.Binding<string>;
     readonly primary: Color3;
@@ -13,6 +29,7 @@ interface InputRoundProps {
     readonly debounceDelay?: number;
     readonly disabled?: boolean;
     readonly name?: string;
+    readonly style?: InputRoundStyle;
 }
 export declare const InputRound: React.ForwardRefExoticComponent<InputRoundProps & React.RefAttributes<TextBox>>;
 export type { InputRoundProps };

package/dist/form/InputRound.luau

@@ -15,12 +15,21 @@ local _layout = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").di
 local HStack = _layout.HStack
 local VStack = _layout.VStack
 local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local _theme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist)
+local defaultTheme = _theme.defaultTheme
+local makeStyle = _theme.makeStyle
 local Padding = TS.import(script, script.Parent.Parent, "layout", "Padding").Padding
 local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
-local RoundEmoji = TS.import(script, script.Parent, "RoundEmoji").RoundEmoji
+local IconChip = TS.import(script, script.Parent, "IconChip").IconChip
 -- Default debounce delay in seconds
 local DEFAULT_DEBOUNCE_DELAY = 0.3
+local useInputRoundStyle = makeStyle({
+	bgColor = "surface",
+	outlineColor = "border",
+	textColor = "textPrimary",
+	disabledColor = "textMuted",
+	errorColor = "danger",
+})
 local MARGIN_Y = 0
 local PADDING_LEFT = 0.5
 local PADDING_RIGHT = 2
@@ -28,7 +37,7 @@ local INTERNAL_PADDING = 1
 local InputRound = forwardRef(function(props, ref)
 	local _binding = props
 	local onClick = _binding.onClick
-	local emoji = _binding.emoji
+	local icon = _binding.icon
 	local placeholderText = _binding.placeholderText
 	local valueProp = _binding.value
 	local primary = _binding.primary
@@ -46,9 +55,11 @@ local InputRound = forwardRef(function(props, ref)
 	end
 	local disabled = _binding.disabled
 	local name = _binding.name
+	local styleOverride = _binding.style
 	local hover, hoverMotion = useMotion(0)
 	local rem = useRem()
 	local theme = defaultTheme
+	local style = useInputRoundStyle(styleOverride)
 	-- Check if value is a binding
 	local isBinding = type(valueProp) == "table" and valueProp.getValue ~= nil
 	local valueBinding = if isBinding then valueProp else nil
@@ -165,14 +176,14 @@ local InputRound = forwardRef(function(props, ref)
 		paddingY = rem(MARGIN_Y),
 	}), React.createElement(Frame, {
 		backgroundTransparency = 0,
-		backgroundColor = theme.palette.white,
+		backgroundColor = style.bgColor,
 		cornerRadius = fullRound,
 		size = UDim2.new(1, 0, 1, 0),
 	}), React.createElement(Outline, {
 		cornerRadius = fullRound,
-		innerColor = if disabled then theme.palette.disabled else theme.palette.crust,
+		innerColor = if disabled then style.disabledColor else style.outlineColor,
 		innerTransparency = 0,
-		outerColor = theme.palette.white,
+		outerColor = style.bgColor,
 		outerTransparency = 0,
 		outerThickness = 1,
 	}), React.createElement(HStack, {
@@ -180,15 +191,15 @@ local InputRound = forwardRef(function(props, ref)
 	}, React.createElement("uipadding", {
 		PaddingLeft = UDim.new(0, rem(PADDING_LEFT)),
 		PaddingRight = UDim.new(0, rem(PADDING_RIGHT)),
-	}), React.createElement(RoundEmoji, {
-		emoji = emoji,
+	}), React.createElement(IconChip, {
+		icon = icon,
 		primary = primary,
 		height = height,
 	}), React.createElement(TextField, {
 		ref = ref or internalRef,
 		font = theme.fonts.inter.medium,
 		text = inputValue,
-		textColor = if disabled then theme.palette.disabled else theme.palette.crust,
+		textColor = if disabled then style.disabledColor else style.textColor,
 		textTransparency = 0.05,
 		textSize = rem(3.5),
 		textXAlignment = "Left",
@@ -211,7 +222,7 @@ local InputRound = forwardRef(function(props, ref)
 	}))), if validationError ~= "" and validationError then (React.createElement(Text, {
 		text = validationError,
 		font = theme.fonts.inter.bold,
-		textColor = theme.palette.red,
+		textColor = style.errorColor,
 		textScaled = true,
 		size = UDim2.new(1, 0, 0, rem(2.6)),
 		textXAlignment = "Left",

package/dist/form/InputRow.d.ts

@@ -1,8 +1,9 @@
+import type { IconName } from "@rbxts-ui/icons";
 import React from "@rbxts/react";
 export interface InputRowProps {
     value: string;
-    emoji: string;
-    emojiColor: Color3;
+    icon: IconName;
+    iconColor: Color3;
     placeholderText: string;
     label: string;
     onTextChanged: (value: string) => void;
@@ -10,5 +11,5 @@ export interface InputRowProps {
     name?: string;
     children?: React.ReactNode;
 }
-export declare function InputRow({ value, emoji, emojiColor, placeholderText, label, onTextChanged, disabled, name, children, }: InputRowProps): JSX.Element;
+export declare function InputRow({ value, icon, iconColor, placeholderText, label, onTextChanged, disabled, name, children, }: InputRowProps): JSX.Element;
 //# sourceMappingURL=InputRow.d.ts.map

package/dist/form/InputRow.luau

@@ -5,8 +5,8 @@ local FormRow = TS.import(script, script.Parent, "FormRow").FormRow
 local InputRound = TS.import(script, script.Parent, "InputRound").InputRound
 local function InputRow(_param)
 	local value = _param.value
-	local emoji = _param.emoji
-	local emojiColor = _param.emojiColor
+	local icon = _param.icon
+	local iconColor = _param.iconColor
 	local placeholderText = _param.placeholderText
 	local label = _param.label
 	local onTextChanged = _param.onTextChanged
@@ -19,9 +19,9 @@ local function InputRow(_param)
 		name = name,
 	}, React.createElement(InputRound, {
 		value = value,
-		emoji = emoji,
+		icon = icon,
 		placeholderText = placeholderText,
-		primary = emojiColor,
+		primary = iconColor,
 		order = 0,
 		onTextChanged = onTextChanged,
 		disabled = disabled,

package/dist/form/Radio.d.ts

@@ -1,3 +1,18 @@
+import { type StyleProps } from "@rbxts-ui/theme";
+declare const useRadioStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    boxColor: "surface";
+    ringColor: "mark";
+    selectedColor: "accent";
+    labelColor: "textPrimary";
+    mutedColor: "textMuted";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    boxColor: "surface";
+    ringColor: "mark";
+    selectedColor: "accent";
+    labelColor: "textPrimary";
+    mutedColor: "textMuted";
+}>;
+export type RadioStyle = StyleProps<typeof useRadioStyle>;
 interface RadioProps {
     checked: boolean;
     onChecked: (checked: boolean) => void;
@@ -5,7 +20,8 @@ interface RadioProps {
     variant?: "default" | "large" | "small";
     position?: UDim2;
     disabled?: boolean;
+    style?: RadioStyle;
 }
-export declare function Radio({ checked, onChecked, text, variant, position, disabled }: RadioProps): JSX.Element;
+export declare function Radio({ checked, onChecked, text, variant, position, disabled, style: styleOverride, }: RadioProps): JSX.Element;
 export type { RadioProps };
 //# sourceMappingURL=Radio.d.ts.map

package/dist/form/Radio.luau

@@ -11,7 +11,14 @@ local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").
 local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
 local ReactiveButton = TS.import(script, script.Parent.Parent, "buttons", "ReactiveButton").ReactiveButton
 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 makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
+local useRadioStyle = makeStyle({
+	boxColor = "surface",
+	ringColor = "mark",
+	selectedColor = "accent",
+	labelColor = "textPrimary",
+	mutedColor = "textMuted",
+})
 local function Radio(_param)
 	local checked = _param.checked
 	local onChecked = _param.onChecked
@@ -25,7 +32,8 @@ local function Radio(_param)
 	if disabled == nil then
 		disabled = false
 	end
-	local theme = defaultTheme
+	local styleOverride = _param.style
+	local style = useRadioStyle(styleOverride)
 	local rem = useRem()
 	local hover, hoverMotion = useMotion(0)
 	local checkboxSize = if variant == "large" then 4 elseif variant == "small" then 1.7 else 3
@@ -44,8 +52,8 @@ local function Radio(_param)
 		end)
 	end, { rem })
 	local cornerRadius = UDim.new(1, 0)
-	local mainColor = if disabled then theme.palette.overlay0 else theme.palette.black
-	local textColor = if disabled then theme.palette.overlay0 else theme.palette.black
+	local mainColor = if disabled then style.mutedColor else style.ringColor
+	local textColor = if disabled then style.mutedColor else style.labelColor
 	return React.createElement(ReactiveButton, {
 		backgroundTransparency = 1,
 		size = size,
@@ -64,7 +72,7 @@ local function Radio(_param)
 		backgroundTransparency = 1,
 		size = buttonSize,
 	}, React.createElement(Frame, {
-		backgroundColor = theme.palette.white,
+		backgroundColor = style.boxColor,
 		cornerRadius = cornerRadius,
 		size = UDim2.new(1, 0, 1, 0),
 	}, React.createElement("uigradient", {
@@ -79,7 +87,7 @@ local function Radio(_param)
 		outerTransparency = 1,
 		innerThickness = 2,
 	}), if checked then (React.createElement(Frame, {
-		backgroundColor = theme.palette.blue,
+		backgroundColor = style.selectedColor,
 		backgroundTransparency = 0,
 		size = UDim2.new(0.7, 0, 0.7, 0),
 		position = UDim2.new(0.5, 0, 0.5, 0),

package/dist/form/RadioRow.d.ts

@@ -1,8 +1,19 @@
+import { type StyleProps } from "@rbxts-ui/theme";
+declare const useRadioRowStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    labelColor: "textPrimary";
+    mutedColor: "textMuted";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    labelColor: "textPrimary";
+    mutedColor: "textMuted";
+}>;
+export type RadioRowStyle = StyleProps<typeof useRadioRowStyle>;
 export interface RadioRowProps {
     label: string;
     checked: boolean;
     onChecked: () => void;
     disabled?: boolean;
+    style?: RadioRowStyle;
 }
-export declare function RadioRow({ label, checked, onChecked, disabled }: RadioRowProps): JSX.Element;
+export declare function RadioRow({ label, checked, onChecked, disabled, style: styleOverride }: RadioRowProps): JSX.Element;
+export {};
 //# sourceMappingURL=RadioRow.d.ts.map

package/dist/form/RadioRow.luau

@@ -3,16 +3,21 @@ local TS = _G[script]
 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 useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Button = TS.import(script, script.Parent.Parent, "buttons", "Button").Button
 local Radio = TS.import(script, script.Parent, "Radio").Radio
+local useRadioRowStyle = makeStyle({
+	labelColor = "textPrimary",
+	mutedColor = "textMuted",
+})
 local function RadioRow(_param)
 	local label = _param.label
 	local checked = _param.checked
 	local onChecked = _param.onChecked
 	local disabled = _param.disabled
-	local theme = defaultTheme
+	local styleOverride = _param.style
+	local style = useRadioRowStyle(styleOverride)
 	local rem = useRem()
 	local textSize = rem(3)
 	return React.createElement(HStack, {
@@ -32,7 +37,7 @@ local function RadioRow(_param)
 		text = label,
 		textSize = textSize,
 		textScaled = true,
-		textColor = if disabled then theme.palette.disabled else theme.palette.crust,
+		textColor = if disabled then style.mutedColor else style.labelColor,
 		size = UDim2.new(0.8, 0, 0, rem(4)),
 		textXAlignment = "Left",
 	}, React.createElement("uiflexitem", {

package/dist/form/SegmentedToggle.d.ts

@@ -1,4 +1,19 @@
 import React from "@rbxts/react";
+import { type StyleProps } from "@rbxts-ui/theme";
+declare const useSegmentedToggleStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    labelColor: "textPrimary";
+    mutedColor: "textMuted";
+    trackColor: "surfaceSunken";
+    borderColor: "textMuted";
+    selectedColor: "accent";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    labelColor: "textPrimary";
+    mutedColor: "textMuted";
+    trackColor: "surfaceSunken";
+    borderColor: "textMuted";
+    selectedColor: "accent";
+}>;
+export type SegmentedToggleStyle = StyleProps<typeof useSegmentedToggleStyle>;
 export interface SegmentedToggleOption<T extends string> {
     id: T;
     label: string;
@@ -12,6 +27,8 @@ export interface SegmentedToggleProps<T extends string> {
     size?: "default" | "small";
     label?: string;
     children?: React.ReactNode;
+    style?: SegmentedToggleStyle;
 }
-export declare function SegmentedToggle<T extends string>({ options, value, onChange, disabled, size, label, children, }: SegmentedToggleProps<T>): JSX.Element;
+export declare function SegmentedToggle<T extends string>({ options, value, onChange, disabled, size, label, children, style: styleOverride, }: SegmentedToggleProps<T>): JSX.Element;
+export {};
 //# sourceMappingURL=SegmentedToggle.d.ts.map

package/dist/form/SegmentedToggle.luau

@@ -8,7 +8,14 @@ local Text = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").d
 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, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
+local useSegmentedToggleStyle = makeStyle({
+	labelColor = "textPrimary",
+	mutedColor = "textMuted",
+	trackColor = "surfaceSunken",
+	borderColor = "textMuted",
+	selectedColor = "accent",
+})
 local function SegmentedToggle(_param)
 	local options = _param.options
 	local value = _param.value
@@ -23,7 +30,8 @@ local function SegmentedToggle(_param)
 	end
 	local label = _param.label
 	local children = _param.children
-	local theme = defaultTheme
+	local styleOverride = _param.style
+	local style = useSegmentedToggleStyle(styleOverride)
 	local rem = useRem()
 	local count = #options
 	if count == 0 then
@@ -47,7 +55,7 @@ local function SegmentedToggle(_param)
 	end
 	local showLabel = label ~= nil and label ~= ""
 	local containerHeight = if showLabel then height + rem(3.5) else height
-	local labelColor = if disabled then theme.palette.disabled else theme.palette.crust
+	local labelColor = if disabled then style.mutedColor else style.labelColor
 	local _exp = showLabel and (React.createElement(Text, {
 		text = label,
 		textSize = rem(3),
@@ -57,7 +65,7 @@ local function SegmentedToggle(_param)
 		textXAlignment = "Left",
 	}))
 	local _exp_1 = React.createElement("uistroke", {
-		Color = theme.palette.overlay0,
+		Color = style.borderColor,
 		Transparency = if disabled then 0.6 else 0.3,
 		Thickness = 1,
 	})
@@ -72,7 +80,7 @@ local function SegmentedToggle(_param)
 	local _callback = function(option, index)
 		local isSelected = option.id == value
 		local optionDisabled = disabled or option.disabled
-		local backgroundColor = theme.palette.blue
+		local backgroundColor = style.selectedColor
 		return React.createElement(Button, {
 			key = `segmented-toggle-{option.id}-{index}`,
 			size = buttonSize,
@@ -88,7 +96,7 @@ local function SegmentedToggle(_param)
 			text = option.label,
 			textSize = rem(3),
 			textScaled = true,
-			textColor = theme.palette.crust,
+			textColor = style.labelColor,
 			textXAlignment = "Center",
 			textYAlignment = "Center",
 			padding = 0.5,
@@ -105,7 +113,7 @@ local function SegmentedToggle(_param)
 		automaticSize = Enum.AutomaticSize.Y,
 	}, _exp, React.createElement(Frame, {
 		size = UDim2.new(1, 0, 0, height),
-		backgroundColor = theme.palette.surface1,
+		backgroundColor = style.trackColor,
 		backgroundTransparency = 1,
 		cornerRadius = UDim.new(0, rem(3)),
 	}, _exp_1, React.createElement(HStack, {

package/dist/icons/InfoIcon.luau

@@ -4,19 +4,24 @@ local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primiti
 local Frame = _primitives.Frame
 local Text = _primitives.Text
 local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
 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 useInfoIconStyle = makeStyle({
+	bgColor = "textMuted",
+	textColor = "textInverse",
+})
 local ReactiveButton = TS.import(script, script.Parent.Parent, "buttons", "ReactiveButton").ReactiveButton
 local Tooltip = TS.import(script, script.Parent.Parent, "tooltip", "Tooltip").Tooltip
 local function InfoIcon(_param)
 	local tooltipText = _param.tooltipText
 	local portalRef = _param.portalRef
 	local rem = useRem()
+	local style = useInfoIconStyle()
 	local showTooltip, setShowTooltip = useState(false)
 	local iconRef = useRef()
 	local tooltipPos, setTooltipPos = useState()
@@ -38,14 +43,14 @@ local function InfoIcon(_param)
 		onMouseLeave = function()
 			return setShowTooltip(false)
 		end,
-		backgroundColor = defaultTheme.palette.overlay0,
+		backgroundColor = style.bgColor,
 		backgroundTransparency = 0.5,
 		cornerRadius = UDim.new(0.5, 0),
 	}, React.createElement(Text, {
 		text = "?",
 		textSize = rem(3),
 		textScaled = true,
-		textColor = defaultTheme.palette.white,
+		textColor = style.textColor,
 		size = UDim2.new(1, 0, 1, 0),
 		textXAlignment = "Center",
 		textYAlignment = "Center",

package/dist/icons/WarningIcon.luau

@@ -4,7 +4,11 @@ local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primiti
 local Frame = _primitives.Frame
 local Text = _primitives.Text
 local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
+local useWarningIconStyle = makeStyle({
+	bgColor = "surface",
+	textColor = "textInverse",
+})
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
@@ -17,6 +21,7 @@ local function WarningIcon(_param)
 	local tooltipText = _param.tooltipText
 	local portalRef = _param.portalRef
 	local rem = useRem()
+	local style = useWarningIconStyle()
 	local _condition = tooltipText
 	if _condition == nil then
 		_condition = "Warning"
@@ -43,14 +48,14 @@ local function WarningIcon(_param)
 		onMouseLeave = function()
 			return setShowTooltip(false)
 		end,
-		backgroundColor = defaultTheme.palette.white,
+		backgroundColor = style.bgColor,
 		backgroundTransparency = 0.5,
 		cornerRadius = UDim.new(0.5, 0),
 	}, React.createElement(Text, {
 		text = "⚠️",
 		textSize = rem(3),
 		textScaled = true,
-		textColor = defaultTheme.palette.white,
+		textColor = style.textColor,
 		size = UDim2.new(1, 0, 1, 0),
 		textXAlignment = "Center",
 		textYAlignment = "Center",

package/dist/index.d.ts

@@ -19,6 +19,7 @@ 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 { IconTextButton, type IconTextButtonProps } from "./buttons/IconTextButton";
 export { IconTileButton, type IconTileButtonProps } from "./buttons/IconTileButton";
 export { PrimaryButton, type PrimaryButtonProps } from "./buttons/PrimaryButton";
 export { TextButton, TextButtonVariant, type TextButtonProps } from "./buttons/TextButton";
@@ -48,6 +49,7 @@ export { InfoIcon } from "./icons/InfoIcon";
 export { WarningIcon } from "./icons/WarningIcon";
 export { validateAngle, validateNumber, validateNumberBounds, validatePosNumber } from "./form/validation";
 export { InputRound, type InputRoundProps } from "./form/InputRound";
+export { IconChip, type IconChipProps } from "./form/IconChip";
 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";

package/dist/init.luau

@@ -29,6 +29,7 @@ exports.Checkbox = TS.import(script, script, "form", "Checkbox").Checkbox
 exports.Radio = TS.import(script, script, "form", "Radio").Radio
 -- Buttons
 exports.IconRoundButton = TS.import(script, script, "buttons", "IconRoundButton").IconRoundButton
+exports.IconTextButton = TS.import(script, script, "buttons", "IconTextButton").IconTextButton
 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")
@@ -71,6 +72,7 @@ exports.validateNumberBounds = _validation.validateNumberBounds
 exports.validatePosNumber = _validation.validatePosNumber
 -- Form Input Components
 exports.InputRound = TS.import(script, script, "form", "InputRound").InputRound
+exports.IconChip = TS.import(script, script, "form", "IconChip").IconChip
 exports.RoundEmoji = TS.import(script, script, "form", "RoundEmoji").RoundEmoji
 -- DynamicWindow
 exports.DynamicWindow = TS.import(script, script, "DynamicWindow", "DynamicWindow").DynamicWindow

package/dist/layout/Accordion.d.ts

@@ -1,3 +1,12 @@
+import { type StyleProps } from "@rbxts-ui/theme";
+declare const useAccordionStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    defaultBg: "info";
+    titleColor: "textPrimary";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    defaultBg: "info";
+    titleColor: "textPrimary";
+}>;
+export type AccordionStyle = StyleProps<typeof useAccordionStyle>;
 import React from "@rbxts/react";
 interface AccordionProps {
     title: string;

package/dist/layout/Accordion.luau

@@ -5,7 +5,13 @@ local _primitives = TS.import(script, TS.getModule(script, "@rbxts-ui", "primiti
 local Frame = _primitives.Frame
 local Text = _primitives.Text
 local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).useRem
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local _theme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist)
+local defaultTheme = _theme.defaultTheme
+local makeStyle = _theme.makeStyle
+local useAccordionStyle = makeStyle({
+	defaultBg = "info",
+	titleColor = "textPrimary",
+})
 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
@@ -32,6 +38,7 @@ local function Accordion(_param)
 	local isExpanded = _param.isExpanded
 	local onExpandedChange = _param.onExpandedChange
 	local theme = defaultTheme
+	local style = useAccordionStyle()
 	local rem = useRem()
 	local contentHeight, setContentHeight = useState(0)
 	-- Header visual height must match the header button height below (rem(5))
@@ -39,7 +46,7 @@ local function Accordion(_param)
 	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
+	local defaultBgColor = backgroundColor or style.defaultBg
 	useEffect(function()
 		local target = if isExpanded then contentHeight else 0
 		contentSizeMotion:spring(UDim2.new(1, 0, 0, target), theme.springs.gentle)
@@ -57,7 +64,7 @@ local function Accordion(_param)
 		textSize = textSize,
 		font = theme.fonts.roboto.light,
 		textScaled = true,
-		textColor = theme.palette.crust,
+		textColor = style.titleColor,
 		size = UDim2.new(1, 0, 1, 0),
 		textYAlignment = "Center",
 	}, React.createElement("uiflexitem", {
@@ -66,7 +73,7 @@ local function Accordion(_param)
 		text = if isExpanded then "×" else "+",
 		textSize = rem(4),
 		textScaled = true,
-		textColor = theme.palette.crust,
+		textColor = style.titleColor,
 		size = UDim2.new(0, rem(5), 1, 0),
 		textYAlignment = "Center",
 		position = UDim2.new(1, 0, 0, 0),

package/dist/layout/Section.d.ts

@@ -1,10 +1,18 @@
 import React from "@rbxts/react";
+import { type StyleProps } from "@rbxts-ui/theme";
+declare const useSectionStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    titleColor: "textPrimary";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    titleColor: "textPrimary";
+}>;
+export type SectionStyle = StyleProps<typeof useSectionStyle>;
 interface SectionProps {
     title: string;
     children: React.ReactNode;
     cornerRadius?: number;
     sortOrder?: Enum.SortOrder;
+    style?: SectionStyle;
 }
-export declare function Section({ title, children, cornerRadius, sortOrder, }: SectionProps): JSX.Element;
+export declare function Section({ title, children, cornerRadius, sortOrder, style: styleOverride, }: SectionProps): JSX.Element;
 export type { SectionProps };
 //# sourceMappingURL=Section.d.ts.map

package/dist/layout/Section.luau

@@ -4,7 +4,10 @@ local VStack = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dis
 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 React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
+local makeStyle = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).makeStyle
+local useSectionStyle = makeStyle({
+	titleColor = "textPrimary",
+})
 local function Section(_param)
 	local title = _param.title
 	local children = _param.children
@@ -16,7 +19,8 @@ local function Section(_param)
 	if sortOrder == nil then
 		sortOrder = Enum.SortOrder.Name
 	end
-	local theme = defaultTheme
+	local styleOverride = _param.style
+	local style = useSectionStyle(styleOverride)
 	local rem = useRem()
 	local textSize = rem(3.5)
 	return React.createElement(VStack, {
@@ -33,7 +37,7 @@ local function Section(_param)
 		textSize = rem(3),
 		textScaled = true,
 		richText = true,
-		textColor = theme.palette.crust,
+		textColor = style.titleColor,
 		size = UDim2.new(1, 0, 1, 0),
 		textYAlignment = "Center",
 		textXAlignment = "Left",