@rbxts-ui/components 7.0.2 → 8.0.0

package/dist/DynamicWindow/DynamicWindow.d.ts

@@ -1,3 +1,22 @@
+import { type StyleProps } from "@rbxts-ui/theme";
+declare const useDynamicWindowStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    titlebar: "titlebar";
+    bgColor: "surface";
+    borderColor: "surfaceHover";
+    windowClose: "windowClose";
+    windowMinimize: "windowMinimize";
+    windowMaximize: "windowMaximize";
+    titleColor: "textPrimary";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    titlebar: "titlebar";
+    bgColor: "surface";
+    borderColor: "surfaceHover";
+    windowClose: "windowClose";
+    windowMinimize: "windowMinimize";
+    windowMaximize: "windowMaximize";
+    titleColor: "textPrimary";
+}>;
+export type DynamicWindowStyle = StyleProps<typeof useDynamicWindowStyle>;
 import React from "@rbxts/react";
 export interface ExtendableFrameProps extends React.PropsWithChildren {
     readonly size?: UDim2 | React.Binding<UDim2>;
@@ -16,4 +35,5 @@ export interface ExtendableFrameProps extends React.PropsWithChildren {
     readonly resizeEnabled?: boolean;
 }
 export declare function DynamicWindow({ children, size, position, backgroundColor, backgroundTransparency, clipsDescendants, initialSize, initialPosition, title, resizeEnabled, onClose, onPositionChange, onSizeChange, active, zIndex, }: ExtendableFrameProps): JSX.Element;
+export {};
 //# sourceMappingURL=DynamicWindow.d.ts.map

package/dist/DynamicWindow/DynamicWindow.luau

@@ -5,7 +5,16 @@ 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 useDynamicWindowStyle = makeStyle({
+	titlebar = "titlebar",
+	bgColor = "surface",
+	borderColor = "surfaceHover",
+	windowClose = "windowClose",
+	windowMinimize = "windowMinimize",
+	windowMaximize = "windowMaximize",
+	titleColor = "textPrimary",
+})
 local _pretty_react_hooks = TS.import(script, TS.getModule(script, "@rbxts", "pretty-react-hooks").out)
 local useEventListener = _pretty_react_hooks.useEventListener
 local useLatest = _pretty_react_hooks.useLatest
@@ -53,12 +62,12 @@ local function DynamicWindow(_param)
 	local active = _param.active
 	local zIndex = _param.zIndex
 	local rem = useRem()
-	local theme = defaultTheme
+	local style = useDynamicWindowStyle()
 	local titleBarHeight = rem(7)
 	local titleBarPadding = rem(1)
 	local trafficLightSize = rem(2.5)
 	local titleFontSize = rem(3.2)
-	local titleBarColor = theme.palette.lightblue
+	local titleBarColor = style.titlebar
 	local corner = UDim.new(0, rem(1.5))
 	-- Defaults: fixed offset size/position so move/resize make sense immediately
 	local fallbackPosition = UDim2.new(0, 0, 0, ROBLOX_TOOLBAR_HEIGHT)
@@ -211,9 +220,9 @@ local function DynamicWindow(_param)
 		stopInteraction = stopInteraction,
 		visible = resizeEnabled and not minimized,
 	}
-	local defaultBackgroundColor = backgroundColor or theme.palette.white
+	local defaultBackgroundColor = backgroundColor or style.bgColor
 	local _exp = React.createElement("uistroke", {
-		Color = theme.palette.offwhite,
+		Color = style.borderColor,
 		Transparency = 0.5,
 		Thickness = 1,
 	}, children)
@@ -240,28 +249,28 @@ local function DynamicWindow(_param)
 		horizontalAlignment = Enum.HorizontalAlignment.Left,
 		spacing = rem(0.75),
 	}, React.createElement(TrafficLightButton, {
-		color = theme.palette.macRed,
+		color = style.windowClose,
 		size = trafficLightSize,
 		onClick = handleClose,
 	}), resizeEnabled and (React.createElement(React.Fragment, nil, React.createElement(TrafficLightButton, {
-		color = theme.palette.macYellow,
+		color = style.windowMinimize,
 		size = trafficLightSize,
 		onClick = toggleMinimize,
 	}), React.createElement(TrafficLightButton, {
-		color = theme.palette.macGreen,
+		color = style.windowMaximize,
 		size = trafficLightSize,
 		onClick = maximize,
 	})))), React.createElement(Text, {
 		text = title,
 		textSize = titleFontSize,
-		textColor = theme.palette.crust,
+		textColor = style.titleColor,
 		anchorPoint = Vector2.new(0.5, 0.5),
 		position = UDim2.new(0.5, 0, 0.5, 0),
 	}))
 	local _exp_2 = React.createElement(Divider, {
 		zIndex = 2,
 		position = UDim2.new(0, 0, 0, titleBarHeight),
-		color = theme.palette.offwhite,
+		color = style.borderColor,
 		thickness = 1,
 	})
 	local _exp_3 = React.createElement(Frame, {

package/dist/DynamicWindow/ResizeCornerButton.luau

@@ -1,10 +1,13 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 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 getMouseViewportPos = TS.import(script, script.Parent, "DynamicWindow.utils").getMouseViewportPos
+local useResizeCornerStyle = makeStyle({
+	gripColor = "surfaceRaised",
+})
 local function ResizeCornerButton(_param)
 	local size = _param.size
 	local handleCorner = _param.handleCorner
@@ -14,7 +17,7 @@ local function ResizeCornerButton(_param)
 	local stopInteraction = _param.stopInteraction
 	local visible = _param.visible
 	local rem = useRem()
-	local theme = defaultTheme
+	local style = useResizeCornerStyle()
 	local isHovering, setIsHovering = React.useState(false)
 	local handleMouseEnter = function()
 		return setIsHovering(true)
@@ -28,7 +31,7 @@ local function ResizeCornerButton(_param)
 		position = position,
 		anchorPoint = anchorPoint,
 		visible = visible,
-		backgroundColor = theme.palette.surface2,
+		backgroundColor = style.gripColor,
 		backgroundTransparency = if isHovering then 0.65 else 1,
 		cornerRadius = UDim.new(0, rem(1.5)),
 		selectable = false,

package/dist/buttons/DropdownButton.d.ts

@@ -1,4 +1,15 @@
 import React from "@rbxts/react";
+import { type StyleProps } from "@rbxts-ui/theme";
+declare const useDropdownButtonStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    textColor: "textPrimary";
+    bgColor: "surface";
+    borderColor: "border";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    textColor: "textPrimary";
+    bgColor: "surface";
+    borderColor: "border";
+}>;
+export type DropdownButtonStyle = StyleProps<typeof useDropdownButtonStyle>;
 interface DropdownButtonProps extends React.PropsWithChildren {
     readonly text: string;
     readonly onClick?: () => void;
@@ -14,7 +25,8 @@ interface DropdownButtonProps extends React.PropsWithChildren {
     readonly hasShadow?: boolean;
     readonly padding?: number;
     readonly radius?: number;
+    readonly style?: DropdownButtonStyle;
 }
-export declare function DropdownButton({ text, onClick, onHover, position, anchorPoint, layoutOrder, isDisabled, size, padding, radius, }: DropdownButtonProps): JSX.Element;
+export declare function DropdownButton({ text, onClick, onHover, position, anchorPoint, layoutOrder, isDisabled, size, padding, radius, style: styleOverride, }: DropdownButtonProps): JSX.Element;
 export type { DropdownButtonProps };
 //# sourceMappingURL=DropdownButton.d.ts.map

package/dist/buttons/DropdownButton.luau

@@ -9,7 +9,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, "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 _theme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist)
+local defaultTheme = _theme.defaultTheme
+local makeStyle = _theme.makeStyle
+local useDropdownButtonStyle = makeStyle({
+	textColor = "textPrimary",
+	bgColor = "surface",
+	borderColor = "border",
+})
 local function DropdownButton(_param)
 	local text = _param.text
 	local onClick = _param.onClick
@@ -21,11 +28,13 @@ local function DropdownButton(_param)
 	local size = _param.size
 	local padding = _param.padding
 	local radius = _param.radius
+	local styleOverride = _param.style
 	local theme = defaultTheme
+	local style = useDropdownButtonStyle(styleOverride)
 	local rem = useRem()
 	local hover, hoverMotion = useMotion(0)
-	local textColor = theme.palette.crust
-	local backgroundColor = theme.palette.white
+	local textColor = style.textColor
+	local backgroundColor = style.bgColor
 	local _condition = radius
 	if _condition == nil then
 		_condition = 1
@@ -43,9 +52,9 @@ local function DropdownButton(_param)
 	}))
 	local _exp_1 = React.createElement(Outline, {
 		cornerRadius = cornerRadius,
-		innerColor = theme.palette.crust,
+		innerColor = style.borderColor,
 		innerTransparency = 0,
-		outerColor = theme.palette.white,
+		outerColor = style.bgColor,
 		outerTransparency = 0,
 		outerThickness = 1,
 	})

package/dist/buttons/DropdownOptionButton.d.ts

@@ -1,11 +1,21 @@
 import React from "@rbxts/react";
+import { type StyleProps } from "@rbxts-ui/theme";
+declare const useDropdownOptionStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    textColor: "textPrimary";
+    hoverColor: "surfaceHover";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    textColor: "textPrimary";
+    hoverColor: "surfaceHover";
+}>;
+export type DropdownOptionButtonStyle = StyleProps<typeof useDropdownOptionStyle>;
 interface DropdownOptionButtonProps extends React.PropsWithChildren {
     readonly text: string;
     readonly onClick?: () => void;
     readonly onHover?: (hovered: boolean) => void;
     readonly size?: UDim2;
     readonly padding?: number;
+    readonly style?: DropdownOptionButtonStyle;
 }
-export declare function DropdownOptionButton({ text, onClick, onHover, size, padding, children, }: DropdownOptionButtonProps): JSX.Element;
+export declare function DropdownOptionButton({ text, onClick, onHover, size, padding, children, style: styleOverride, }: DropdownOptionButtonProps): JSX.Element;
 export type { DropdownOptionButtonProps };
 //# sourceMappingURL=DropdownOptionButton.d.ts.map

package/dist/buttons/DropdownOptionButton.luau

@@ -8,7 +8,13 @@ local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
 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, 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 useDropdownOptionStyle = makeStyle({
+	textColor = "textPrimary",
+	hoverColor = "surfaceHover",
+})
 local function DropdownOptionButton(_param)
 	local text = _param.text
 	local onClick = _param.onClick
@@ -16,12 +22,14 @@ local function DropdownOptionButton(_param)
 	local size = _param.size
 	local padding = _param.padding
 	local children = _param.children
+	local styleOverride = _param.style
 	local theme = defaultTheme
+	local style = useDropdownOptionStyle(styleOverride)
 	local rem = useRem()
 	local hover, hoverMotion = useMotion(0)
-	local textColor = theme.palette.crust
+	local textColor = style.textColor
 	local _exp = React.createElement(Frame, {
-		backgroundColor = theme.palette.overlay0,
+		backgroundColor = style.hoverColor,
 		backgroundTransparency = lerpBinding(hover, 1, 0.8),
 		size = UDim2.new(1, 0, 1, 0),
 	})

package/dist/buttons/IconRoundButton.d.ts

@@ -1,7 +1,17 @@
+import { type IconName } from "@rbxts-ui/icons";
+import { type StyleProps } from "@rbxts-ui/theme";
 import React from "@rbxts/react";
+declare const useIconRoundButtonStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    chipColor: "textInverse";
+    labelColor: "textPrimary";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    chipColor: "textInverse";
+    labelColor: "textPrimary";
+}>;
+export type IconRoundButtonStyle = StyleProps<typeof useIconRoundButtonStyle>;
 interface IconRoundButtonProps {
     readonly onClick?: () => void;
-    readonly emoji?: string;
+    readonly icon?: IconName;
     readonly label?: string;
     readonly primaryColor: Color3;
     readonly enabled: boolean;
@@ -9,13 +19,13 @@ interface IconRoundButtonProps {
     readonly circleSize?: number;
     readonly addShadow?: boolean;
     readonly width?: number;
-    readonly emojiSize?: number;
+    readonly iconScale?: number;
     readonly tooltipText?: string;
     readonly tooltipComponent?: React.ReactNode;
     readonly position?: UDim2;
     readonly onMouseDown?: () => void;
     readonly onMouseUp?: () => void;
 }
-export declare function IconRoundButton({ onClick, emoji, label, primaryColor, enabled, order, circleSize, width, addShadow, emojiSize, tooltipText, tooltipComponent, position, onMouseDown, onMouseUp, }: IconRoundButtonProps): JSX.Element;
+export declare function IconRoundButton({ onClick, icon, label, primaryColor, enabled, order, circleSize, width, addShadow, iconScale, tooltipText, tooltipComponent, position, onMouseDown, onMouseUp, }: IconRoundButtonProps): JSX.Element;
 export type { IconRoundButtonProps };
 //# sourceMappingURL=IconRoundButton.d.ts.map

package/dist/buttons/IconRoundButton.luau

@@ -1,5 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
+local Icon = TS.import(script, TS.getModule(script, "@rbxts-ui", "icons").dist).Icon
 local _layout = TS.import(script, TS.getModule(script, "@rbxts-ui", "layout").dist)
 local HStack = _layout.HStack
 local Transition = _layout.Transition
@@ -8,7 +9,9 @@ local Frame = _primitives.Frame
 local Group = _primitives.Group
 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 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
@@ -16,13 +19,17 @@ local useEffect = _react.useEffect
 local useState = _react.useState
 local Padding = TS.import(script, script.Parent.Parent, "layout", "Padding").Padding
 local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local useIconRoundButtonStyle = makeStyle({
+	chipColor = "textInverse",
+	labelColor = "textPrimary",
+})
 local MARGIN_Y = 0
 local PADDING_LEFT = 2
 local PADDING_RIGHT = 2
 local INTERNAL_PADDING = 1
 local function IconRoundButton(_param)
 	local onClick = _param.onClick
-	local emoji = _param.emoji
+	local icon = _param.icon
 	local label = _param.label
 	local primaryColor = _param.primaryColor
 	local enabled = _param.enabled
@@ -39,9 +46,9 @@ local function IconRoundButton(_param)
 	if addShadow == nil then
 		addShadow = false
 	end
-	local emojiSize = _param.emojiSize
-	if emojiSize == nil then
-		emojiSize = 2.5
+	local iconScale = _param.iconScale
+	if iconScale == nil then
+		iconScale = 2.5
 	end
 	local tooltipText = _param.tooltipText
 	local tooltipComponent = _param.tooltipComponent
@@ -49,10 +56,11 @@ local function IconRoundButton(_param)
 	local onMouseDown = _param.onMouseDown
 	local onMouseUp = _param.onMouseUp
 	local theme = defaultTheme
+	local style = useIconRoundButtonStyle()
 	local rem = useRem()
 	local CIRCLE_SIZE = circleSize
-	local EMOJI_SIZE = CIRCLE_SIZE / emojiSize
-	local isRound = emoji ~= nil
+	local ICON_SIZE = CIRCLE_SIZE / iconScale
+	local isRound = icon ~= nil
 	local HEIGHT = rem(CIRCLE_SIZE)
 	local WIDTH = if isRound then HEIGHT else HEIGHT + rem(width)
 	local transparency, transparencyMotion = useMotion(1)
@@ -110,24 +118,24 @@ local function IconRoundButton(_param)
 	}), React.createElement(HStack, {
 		spacing = rem(INTERNAL_PADDING),
 		clipsDescendants = false,
-	}, if emoji ~= "" and emoji then (React.createElement(Group, {
+	}, if icon ~= nil then (React.createElement(Group, {
 		size = UDim2.new(0, rem(CIRCLE_SIZE), 0, rem(CIRCLE_SIZE)),
 	}, React.createElement(Frame, {
-		backgroundColor = theme.palette.white,
+		backgroundColor = style.chipColor,
 		backgroundTransparency = 0.7,
 		cornerRadius = fullRound,
 		anchorPoint = Vector2.new(0.5, 0.5),
 		position = UDim2.new(0.5, 0, 0.5, 0),
 		size = UDim2.new(1, 0, 1, 0),
 	}, React.createElement("uistroke", {
-		Color = theme.palette.white,
+		Color = style.chipColor,
 		Transparency = 0.7,
 		Thickness = 0.5,
-	})), React.createElement(Text, {
-		text = emoji,
-		textScaled = true,
+	})), React.createElement(Icon, {
+		icon = icon,
+		color = style.labelColor,
 		anchorPoint = Vector2.new(0.5, 0.5),
-		size = UDim2.new(0, rem(EMOJI_SIZE), 0, rem(EMOJI_SIZE)),
+		size = UDim2.new(0, rem(ICON_SIZE), 0, rem(ICON_SIZE)),
 		position = UDim2.new(0.5, 0, 0.5, 0),
 	}))) else nil, if label ~= "" and label then (React.createElement(Text, {
 		text = label,
@@ -135,7 +143,7 @@ local function IconRoundButton(_param)
 		size = UDim2.new(1, 0, 1, 0),
 		position = UDim2.new(0.5, 0, 0.5, 0),
 		font = theme.fonts.inter.bold,
-		textColor = theme.palette.text,
+		textColor = style.labelColor,
 		textSize = rem(1.5),
 		textXAlignment = "Center",
 		textYAlignment = "Center",

package/dist/buttons/IconTextButton.d.ts

@@ -0,0 +1,24 @@
+import { type IconName } from "@rbxts-ui/icons";
+interface IconTextButtonProps {
+    /** Omit for an icon-only button. */
+    readonly text?: string;
+    readonly icon: IconName;
+    /** Icon on the trailing side instead of leading. */
+    readonly iconAfter?: boolean;
+    /** Solid pill background; defaults to the neutral button color. */
+    readonly backgroundColor?: Color3;
+    /** Outlined style: theme surface fill + this outline color. */
+    readonly outlineColor?: Color3;
+    readonly textSize?: number;
+    readonly size?: UDim2;
+    readonly onClick?: () => void;
+    readonly layoutOrder?: number;
+    readonly disabled?: boolean;
+}
+/**
+ * Pill button with a Lucide icon beside an optional label. Outlined or solid.
+ * Replaces TextButton labels that embedded emoji glyphs.
+ */
+export declare function IconTextButton({ text, icon, iconAfter, backgroundColor, outlineColor, textSize, size, onClick, layoutOrder, disabled, }: IconTextButtonProps): JSX.Element;
+export type { IconTextButtonProps };
+//# sourceMappingURL=IconTextButton.d.ts.map

package/dist/buttons/IconTextButton.luau

@@ -0,0 +1,92 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local Icon = TS.import(script, TS.getModule(script, "@rbxts-ui", "icons").dist).Icon
+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 _theme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist)
+local defaultTheme = _theme.defaultTheme
+local makeStyle = _theme.makeStyle
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
+local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
+local useIconTextButtonStyle = makeStyle({
+	labelColor = "textPrimary",
+	neutralBg = "neutralButton",
+	outlinedBg = "surfaceHover",
+})
+--[[
+	*
+	 * Pill button with a Lucide icon beside an optional label. Outlined or solid.
+	 * Replaces TextButton labels that embedded emoji glyphs.
+	 
+]]
+local function IconTextButton(_param)
+	local text = _param.text
+	local icon = _param.icon
+	local iconAfter = _param.iconAfter
+	if iconAfter == nil then
+		iconAfter = false
+	end
+	local backgroundColor = _param.backgroundColor
+	local outlineColor = _param.outlineColor
+	local textSize = _param.textSize
+	local size = _param.size
+	local onClick = _param.onClick
+	local layoutOrder = _param.layoutOrder
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	local rem = useRem()
+	local style = useIconTextButtonStyle()
+	local _condition = textSize
+	if _condition == nil then
+		_condition = rem(2.5)
+	end
+	local labelSize = _condition
+	local iconSize = labelSize * 0.9
+	local contentTransparency = if disabled then 0.6 else 0
+	local label = if text ~= nil and text ~= "" then (React.createElement(Text, {
+		key = "label",
+		text = text,
+		textSize = labelSize,
+		textColor = style.labelColor,
+		textTransparency = contentTransparency,
+		font = defaultTheme.fonts.inter.medium,
+		size = UDim2.new(0, 0, 1, 0),
+		automaticSize = Enum.AutomaticSize.X,
+		textXAlignment = "Center",
+		textYAlignment = "Center",
+	})) else nil
+	local glyph = (React.createElement(Icon, {
+		key = "icon",
+		icon = icon,
+		color = style.labelColor,
+		transparency = contentTransparency,
+		size = UDim2.new(0, iconSize, 0, iconSize),
+	}))
+	local cornerRadius = UDim.new(1, 0)
+	return React.createElement(ReactiveButton, {
+		backgroundColor = if outlineColor ~= nil then style.outlinedBg else (backgroundColor or style.neutralBg),
+		backgroundTransparency = if disabled then 0.4 else 0,
+		cornerRadius = cornerRadius,
+		size = size,
+		onClick = if disabled then nil else onClick,
+		layoutOrder = layoutOrder,
+	}, if outlineColor ~= nil then (React.createElement(Outline, {
+		cornerRadius = cornerRadius,
+		innerColor = outlineColor,
+		innerTransparency = if disabled then 0.5 else 0,
+		outerTransparency = 1,
+		innerThickness = 2,
+	})) else nil, React.createElement(HStack, {
+		size = UDim2.new(1, 0, 1, 0),
+		spacing = rem(0.75),
+		horizontalAlignment = Enum.HorizontalAlignment.Center,
+		verticalAlignment = Enum.VerticalAlignment.Center,
+	}, if iconAfter then { label, glyph } else { glyph, label }))
+end
+return {
+	IconTextButton = IconTextButton,
+}

package/dist/buttons/IconTileButton.d.ts

@@ -1,3 +1,18 @@
+import { type StyleProps } from "@rbxts-ui/theme";
+declare const useIconTileButtonStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    selectedBg: "accent";
+    bgColor: "surface";
+    hoverColor: "surfaceHover";
+    emojiColor: "textInverse";
+    labelColor: "textPrimary";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    selectedBg: "accent";
+    bgColor: "surface";
+    hoverColor: "surfaceHover";
+    emojiColor: "textInverse";
+    labelColor: "textPrimary";
+}>;
+export type IconTileButtonStyle = StyleProps<typeof useIconTileButtonStyle>;
 interface IconTileButtonProps {
     readonly icon?: string;
     readonly emoji?: string;
@@ -6,7 +21,8 @@ interface IconTileButtonProps {
     readonly selected?: boolean;
     readonly size?: UDim2;
     readonly enabled?: boolean;
+    readonly style?: IconTileButtonStyle;
 }
-export declare function IconTileButton({ icon, emoji, onClick, label, selected, size, enabled, }: IconTileButtonProps): JSX.Element;
+export declare function IconTileButton({ icon, emoji, onClick, label, selected, size, enabled, style: styleOverride, }: IconTileButtonProps): JSX.Element;
 export type { IconTileButtonProps };
 //# sourceMappingURL=IconTileButton.d.ts.map

package/dist/buttons/IconTileButton.luau

@@ -11,7 +11,16 @@ local lerpBinding = _pretty_react_hooks.lerpBinding
 local useMotion = _pretty_react_hooks.useMotion
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
-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 useIconTileButtonStyle = makeStyle({
+	selectedBg = "accent",
+	bgColor = "surface",
+	hoverColor = "surfaceHover",
+	emojiColor = "textInverse",
+	labelColor = "textPrimary",
+})
 local function IconTileButton(_param)
 	local icon = _param.icon
 	local emoji = _param.emoji
@@ -23,12 +32,14 @@ local function IconTileButton(_param)
 	if enabled == nil then
 		enabled = true
 	end
+	local styleOverride = _param.style
 	local theme = defaultTheme
+	local style = useIconTileButtonStyle(styleOverride)
 	local rem = useRem()
 	local hover, hoverMotion = useMotion(0)
 	local roundness = rem(1)
-	local bgColor = if selected then theme.palette.blue else theme.palette.white
-	local backgroundColor = lerpBinding(hover, bgColor, theme.palette.offwhite)
+	local bgColor = if selected then style.selectedBg else style.bgColor
+	local backgroundColor = lerpBinding(hover, bgColor, style.hoverColor)
 	local side = 45
 	local tileSize = size or UDim2.new(0, side, 0, side)
 	local imageSize = 0.6
@@ -62,7 +73,7 @@ local function IconTileButton(_param)
 		text = emoji,
 		textSize = rem(3),
 		textScaled = true,
-		textColor = theme.palette.white,
+		textColor = style.emojiColor,
 		size = UDim2.new(1, 0, 1, 0),
 		textXAlignment = "Center",
 		textYAlignment = "Center",
@@ -75,7 +86,7 @@ local function IconTileButton(_param)
 		font = theme.fonts.inter.medium,
 		text = string.upper(label),
 		textSize = rem(1.5),
-		textColor = theme.palette.black,
+		textColor = style.labelColor,
 		textYAlignment = "Center",
 		textXAlignment = "Center",
 		size = UDim2.new(1, 0, 1, 0),

package/dist/buttons/PrimaryButton.luau

@@ -8,7 +8,6 @@ local useRem = TS.import(script, TS.getModule(script, "@rbxts-ui", "rem").dist).
 local Frame = TS.import(script, TS.getModule(script, "@rbxts-ui", "primitives").dist).Frame
 local Outline = TS.import(script, script.Parent.Parent, "utils", "Outline").Outline
 local ReactiveButton = TS.import(script, script.Parent, "ReactiveButton").ReactiveButton
-local defaultTheme = TS.import(script, TS.getModule(script, "@rbxts-ui", "theme").dist).defaultTheme
 local function PrimaryButton(_param)
 	local name = _param.name
 	local onClick = _param.onClick
@@ -46,7 +45,6 @@ local function PrimaryButton(_param)
 	end
 	local automaticSize = _param.automaticSize
 	local children = _param.children
-	local theme = defaultTheme
 	local rem = useRem()
 	local hover, hoverMotion = useMotion(0)
 	return React.createElement(ReactiveButton, {

package/dist/buttons/TextButton.d.ts

@@ -1,4 +1,25 @@
+import { type StyleProps } from "@rbxts-ui/theme";
 import React from "@rbxts/react";
+declare const useTextButtonStyle: (override?: Partial<import("@rbxts-ui/theme").ResolvedStyle<{
+    bgColor: "surfaceHover";
+    green: "success";
+    red: "danger";
+    blue: "accent";
+    black: "mark";
+    darkGray: "neutralButton";
+    textDefault: "textPrimary";
+    textOnDark: "textInverse";
+}>> | undefined) => import("@rbxts-ui/theme").ResolvedStyle<{
+    bgColor: "surfaceHover";
+    green: "success";
+    red: "danger";
+    blue: "accent";
+    black: "mark";
+    darkGray: "neutralButton";
+    textDefault: "textPrimary";
+    textOnDark: "textInverse";
+}>;
+export type TextButtonStyle = StyleProps<typeof useTextButtonStyle>;
 export declare enum TextButtonVariant {
     Green = 0,
     Red = 1,
@@ -26,7 +47,8 @@ interface TextButtonProps extends React.PropsWithChildren {
     readonly textScaled?: boolean;
     readonly fill?: boolean;
     readonly hasOutline?: boolean;
+    readonly style?: TextButtonStyle;
 }
-export declare function TextButton({ text, onClick, onHover, position, anchorPoint, layoutOrder, variant, isDisabled, hasShadow, size, padding, radius, children, textSize, textScaled, fill, hasOutline, }: TextButtonProps): JSX.Element;
+export declare function TextButton({ text, onClick, onHover, position, anchorPoint, layoutOrder, variant, isDisabled, hasShadow, size, padding, radius, children, textSize, textScaled, fill, hasOutline, style: styleOverride, }: TextButtonProps): JSX.Element;
 export type { TextButtonProps };
 //# sourceMappingURL=TextButton.d.ts.map