@rbxts/react-clean-ui 1.0.36 → 1.1.0

package/out/Components/Decorator/Corners.luau

@@ -6,8 +6,12 @@ local function Corners(props)
 	if props.radius == nil then
 		return nil
 	end
+	local radius = SizeHelper:toUDim(props.radius)
+	if radius.Scale == 0 and radius.Offset == 0 then
+		return nil
+	end
 	return React.createElement("uicorner", {
-		CornerRadius = SizeHelper:toUDim(props.radius),
+		CornerRadius = radius,
 	})
 end
 return {

package/out/Components/Decorator/Padding.luau

@@ -5,7 +5,7 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local SpacingHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").SpacingHelper
 local function Padding(props)
 	local theme = React.useContext(CleanThemeContext)
-	local padding = if props.resolvedPadding ~= nil then props.resolvedPadding else SpacingHelper:GetResolvedPadding(theme, props)
+	local padding = SpacingHelper:GetResolvedPadding(theme, props)
 	return React.createElement("uipadding", {
 		PaddingTop = UDim.new(0, padding.top),
 		PaddingBottom = UDim.new(0, padding.bottom),

package/out/Components/Input/Button.d.ts

@@ -1,19 +1,28 @@
 import React from "@rbxts/react";
 import { BackgroundElementProps, IconElementProps, IntentElementProps, ScalableElementProps, ShadowElementProps, SpacedElementProps, ZIndexElementProps } from "../../Interfaces/";
 import { IconProps } from "../Surface";
+import { ThemeTemplate } from "../../Theme/theme.template";
+export type ButtonStyleOverride = Partial<ThemeTemplate["components"]["button"]>;
 export interface ButtonProps extends SpacedElementProps, ShadowElementProps, ZIndexElementProps, BackgroundElementProps, IntentElementProps, ScalableElementProps, IconElementProps {
     text?: string;
     fontWeight?: Enum.FontWeight;
     Event?: React.InstanceEvent<ImageButton>;
     children?: React.ReactNode;
     group?: boolean;
+    disabled?: boolean;
+    LayoutOrder?: number;
+    styleOverride?: ButtonStyleOverride;
 }
 export interface ButtonTextProps extends ScalableElementProps, IntentElementProps {
     children?: string;
     text: string;
+    disabled?: boolean;
+    styleOverride?: ButtonStyleOverride;
 }
 declare function ButtonText(props: ButtonTextProps): React.JSX.Element;
 export interface ButtonIconProps extends IconProps, IntentElementProps {
+    disabled?: boolean;
+    styleOverride?: ButtonStyleOverride;
 }
 declare function ButtonIcon(props: ButtonIconProps): React.JSX.Element;
 type ButtonComponent = React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<ImageButton>> & {

package/out/Components/Input/Button.luau

@@ -9,6 +9,7 @@ local Padding = _Decorator.Padding
 local Text = TS.import(script, script.Parent.Parent, "Typography").Text
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
+local CssHelper = _Helpers.CssHelper
 local SpacingHelper = _Helpers.SpacingHelper
 local TypographyHelper = _Helpers.TypographyHelper
 local Icon = TS.import(script, script.Parent.Parent, "Surface").Icon
@@ -18,29 +19,77 @@ local Group = _.Group
 local GroupContext = _.GroupContext
 local function ButtonText(props)
 	local theme = React.useContext(CleanThemeContext)
-	return React.createElement(Text, {
+	local _attributes = {
 		text = props.text,
-		typography = TypographyHelper:getTypography(theme, props.scale, theme.components.button.typography),
-		TextColor3 = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.button.intents).textColor,
-	})
+	}
+	local _exp = props.scale
+	local _object = {}
+	local _spread = theme.components.button.typography
+	if _spread then
+		for _k, _v in _spread do
+			_object[_k] = _v
+		end
+	end
+	local _result = props.styleOverride
+	if _result ~= nil then
+		_result = _result.typography
+	end
+	if _result then
+		for _k, _v in _result do
+			_object[_k] = _v
+		end
+	end
+	_attributes.typography = TypographyHelper:getTypography(theme, _exp, _object)
+	local _exp_1 = props.intent
+	local _exp_2 = if props.disabled then "disabled" else "default"
+	local _exp_3 = theme.components.button.intents
+	local _result_1 = props.styleOverride
+	if _result_1 ~= nil then
+		_result_1 = _result_1.intents
+	end
+	_attributes.TextColor3 = ColorHelper:getIntentColors(theme, _exp_1, _exp_2, _exp_3, _result_1).textColor
+	return React.createElement(Text, _attributes)
 end
 local function ButtonIcon(props)
 	local theme = React.useContext(CleanThemeContext)
-	return React.createElement(Icon, {
+	local _attributes = {
 		scale = props.scale,
 		icon = props.icon,
 		spinning = props.spinning,
 		speed = props.speed,
-		color = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.button.intents).textColor,
-	})
+	}
+	local _exp = props.intent
+	local _exp_1 = if props.disabled then "disabled" else "default"
+	local _exp_2 = theme.components.button.intents
+	local _result = props.styleOverride
+	if _result ~= nil then
+		_result = _result.intents
+	end
+	_attributes.color = ColorHelper:getIntentColors(theme, _exp, _exp_1, _exp_2, _result).textColor
+	return React.createElement(Icon, _attributes)
 end
 local Button = React.forwardRef(function(props, ref)
 	local theme = React.useContext(CleanThemeContext)
 	local hover, setHover = React.useState(false)
+	React.useEffect(function()
+		if props.disabled then
+			setHover(false)
+		end
+	end, { props.disabled })
 	local group = React.useContext(GroupContext)
 	local padding = SpacingHelper:GetResolvedPadding(theme, props)
+	local state = if props.disabled then "disabled" elseif hover then "hover" else "default"
+	local _exp = props.intent
+	local _exp_1 = theme.components.button.intents
+	local _result = props.styleOverride
+	if _result ~= nil then
+		_result = _result.intents
+	end
+	local intentColors = ColorHelper:getIntentColors(theme, _exp, state, _exp_1, _result)
+	local backgroundImage = CssHelper:resolveBackgroundImage(intentColors.backgroundImage)
 	local _attributes = {
 		ref = ref,
+		Active = not props.disabled,
 	}
 	local _object = {}
 	local _spread = props.Event
@@ -50,81 +99,141 @@ local Button = React.forwardRef(function(props, ref)
 		end
 	end
 	_object.MouseEnter = function(button, x, y)
-		setHover(true)
-		local _result = props.Event
-		if _result ~= nil then
-			_result = _result.MouseEnter
-			if _result ~= nil then
-				_result(button, x, y)
+		if not props.disabled then
+			setHover(true)
+		end
+		local _result_1 = props.Event
+		if _result_1 ~= nil then
+			_result_1 = _result_1.MouseEnter
+			if _result_1 ~= nil then
+				_result_1(button, x, y)
 			end
 		end
 	end
 	_object.MouseLeave = function(button, x, y)
-		setHover(false)
-		local _result = props.Event
-		if _result ~= nil then
-			_result = _result.MouseLeave
-			if _result ~= nil then
-				_result(button, x, y)
+		if not props.disabled then
+			setHover(false)
+		end
+		local _result_1 = props.Event
+		if _result_1 ~= nil then
+			_result_1 = _result_1.MouseLeave
+			if _result_1 ~= nil then
+				_result_1(button, x, y)
 			end
 		end
 	end
-	_attributes.Event = _object
-	local _result
-	if props.group then
-		local _result_1 = group
+	_object.Activated = function(button, inputObject, clickCount)
+		if props.disabled then
+			return nil
+		end
+		local _result_1 = props.Event
 		if _result_1 ~= nil then
-			_result_1 = _result_1.size
+			_result_1 = _result_1.Activated
 			if _result_1 ~= nil then
-				_result_1 = _result_1.X
+				_result_1(button, inputObject, clickCount)
+			end
+		end
+	end
+	_attributes.Event = _object
+	local _result_1
+	if props.group then
+		local _result_2 = group
+		if _result_2 ~= nil then
+			_result_2 = _result_2.size
+			if _result_2 ~= nil then
+				_result_2 = _result_2.X
 			end
 		end
-		local _condition = _result_1
+		local _condition = _result_2
 		if _condition == nil then
 			_condition = 0
 		end
-		_result = _condition
+		_result_1 = _condition
 	else
-		_result = 0
+		_result_1 = 0
 	end
-	_attributes.Size = UDim2.fromOffset(_result, 0)
+	_attributes.Size = UDim2.fromOffset(_result_1, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.XY
 	local _condition = props.BackgroundTransparency
 	if _condition == nil then
-		_condition = theme.components.button.backgroundTransparency
+		local _result_2 = props.styleOverride
+		if _result_2 ~= nil then
+			_result_2 = _result_2.backgroundTransparency
+		end
+		_condition = _result_2
+		if _condition == nil then
+			_condition = theme.components.button.backgroundTransparency
+		end
 	end
 	_attributes.BackgroundTransparency = _condition
-	_attributes.BackgroundColor3 = ColorHelper:getIntentColors(theme, props.intent, if hover then "hover" else "default", theme.components.button.intents).backgroundColor
+	_attributes.BackgroundColor3 = intentColors.backgroundColor
 	_attributes.AutoButtonColor = false
+	_attributes.LayoutOrder = props.LayoutOrder
 	_attributes.ZIndex = props.ZIndex
-	local _exp = React.createElement(Corners, {
-		radius = theme.components.button.cornerRadius,
-	})
-	local _exp_1 = React.createElement("uistroke", {
-		Thickness = theme.components.button.borderThickness,
-		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
-		Color = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.button.intents).borderColor,
-	})
-	local _attributes_1 = table.clone(props)
-	setmetatable(_attributes_1, nil)
-	_attributes_1.value = theme.components.button.boxShadow
-	local _exp_2 = React.createElement(BoxShadow, _attributes_1)
-	local _attributes_2 = table.clone(props)
-	setmetatable(_attributes_2, nil)
-	return React.createElement("imagebutton", _attributes, _exp, _exp_1, _exp_2, React.createElement(Padding, _attributes_2), React.createElement(Group.Element, {
+	_attributes.Image = backgroundImage.Image
+	_attributes.ImageColor3 = backgroundImage.ImageColor3
+	_attributes.ImageTransparency = backgroundImage.ImageTransparency
+	_attributes.ScaleType = backgroundImage.ScaleType
+	_attributes.SliceCenter = backgroundImage.SliceCenter
+	_attributes.SliceScale = backgroundImage.SliceScale
+	_attributes.TileSize = backgroundImage.TileSize
+	local _attributes_1 = {}
+	local _result_2 = props.styleOverride
+	if _result_2 ~= nil then
+		_result_2 = _result_2.cornerRadius
+	end
+	local _condition_1 = _result_2
+	if _condition_1 == nil then
+		_condition_1 = theme.components.button.cornerRadius
+	end
+	_attributes_1.radius = _condition_1
+	local _exp_2 = React.createElement(Corners, _attributes_1)
+	local _attributes_2 = {}
+	local _result_3 = props.styleOverride
+	if _result_3 ~= nil then
+		_result_3 = _result_3.borderThickness
+	end
+	local _condition_2 = _result_3
+	if _condition_2 == nil then
+		_condition_2 = theme.components.button.borderThickness
+	end
+	_attributes_2.Thickness = _condition_2
+	_attributes_2.BorderStrokePosition = Enum.BorderStrokePosition.Inner
+	_attributes_2.Color = intentColors.borderColor
+	local _exp_3 = React.createElement("uistroke", _attributes_2)
+	local _attributes_3 = table.clone(props)
+	setmetatable(_attributes_3, nil)
+	local _result_4 = props.styleOverride
+	if _result_4 ~= nil then
+		_result_4 = _result_4.boxShadow
+	end
+	local _condition_3 = _result_4
+	if _condition_3 == nil then
+		_condition_3 = theme.components.button.boxShadow
+	end
+	_attributes_3.value = _condition_3
+	local _exp_4 = React.createElement(BoxShadow, _attributes_3)
+	local _attributes_4 = table.clone(props)
+	setmetatable(_attributes_4, nil)
+	return React.createElement("imagebutton", _attributes, _exp_2, _exp_3, _exp_4, React.createElement(Padding, _attributes_4), React.createElement(Group.Element, {
 		enabled = props.group,
 		padding = padding,
 	}, (props.icon ~= nil or props.text ~= nil) and React.createElement(HStack, {
 		valign = "Center",
 		spacing = props.spacing,
+		Wraps = false,
 	}, props.icon ~= nil and React.createElement(ButtonIcon, {
 		scale = props.scale,
 		intent = props.intent,
+		disabled = props.disabled,
 		icon = props.icon,
+		styleOverride = props.styleOverride,
 	}), props.text ~= nil and React.createElement(ButtonText, {
 		text = props.text,
 		intent = props.intent,
+		disabled = props.disabled,
 		scale = props.scale,
+		styleOverride = props.styleOverride,
 	})), props.children))
 end)
 Button.Text = ButtonText

package/out/Components/Input/Checkbox.luau

@@ -9,6 +9,7 @@ local Corners = _Decorator.Corners
 local Padding = _Decorator.Padding
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
+local CssHelper = _Helpers.CssHelper
 local SpacingHelper = _Helpers.SpacingHelper
 local function Checkbox(props)
 	local theme = React.useContext(CleanThemeContext)
@@ -44,6 +45,7 @@ local function Checkbox(props)
 			_result(checked)
 		end
 	end, { checked })
+	local backgroundImage = CssHelper:resolveBackgroundImage(theme.components.checkbox.backgroundImage)
 	local _attributes = {
 		Size = UDim2.fromOffset(0, 0),
 		AutomaticSize = Enum.AutomaticSize.XY,
@@ -60,14 +62,28 @@ local function Checkbox(props)
 	_attributes.BackgroundTransparency = _condition_1
 	_attributes.BackgroundColor3 = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.button.intents).backgroundColor
 	_attributes.AutoButtonColor = false
-	return React.createElement("imagebutton", _attributes, React.createElement(Corners, {
+	_attributes.Image = backgroundImage.Image
+	_attributes.ImageColor3 = backgroundImage.ImageColor3
+	_attributes.ImageTransparency = backgroundImage.ImageTransparency
+	_attributes.ScaleType = backgroundImage.ScaleType
+	_attributes.SliceCenter = backgroundImage.SliceCenter
+	_attributes.SliceScale = backgroundImage.SliceScale
+	_attributes.TileSize = backgroundImage.TileSize
+	local _exp = React.createElement(Corners, {
 		radius = theme.components.checkbox.cornerRadius,
-	}), React.createElement("uistroke", {
-		Thickness = theme.components.button.borderThickness,
+	})
+	local _attributes_1 = {
+		Thickness = theme.components.checkbox.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
-		Color = ColorHelper:getIntentColors(theme, if checked then props["intent-checked"] or "success" else props["intent-unchecked"] or "primary", "default", theme.components.checkbox.intents).borderColor,
-	}), React.createElement(Padding, {
-		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.checkbox.spacing),
+	}
+	local _condition_2 = theme.components.checkbox.borderTransparency
+	if _condition_2 == nil then
+		_condition_2 = 0
+	end
+	_attributes_1.Transparency = _condition_2
+	_attributes_1.Color = ColorHelper:getIntentColors(theme, if checked then props["intent-checked"] or "success" else props["intent-unchecked"] or "primary", "default", theme.components.checkbox.intents).borderColor
+	return React.createElement("imagebutton", _attributes, _exp, React.createElement("uistroke", _attributes_1), React.createElement(Padding, {
+		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.checkbox.spacing, theme.components.checkbox.padding),
 	}), React.createElement(Icon, {
 		scale = props.scale,
 		icon = if checked then props["icon-checked"] or "check" else props["icon-unchecked"],

package/out/Components/Input/Increment.d.ts

@@ -0,0 +1,11 @@
+import React from "@rbxts/react";
+import { IntentElementProps, ScalableElementProps, SpacedElementProps } from "../../Interfaces";
+export interface IncrementProps extends ScalableElementProps, SpacedElementProps, IntentElementProps, React.InstanceProps<ImageLabel> {
+    value: number;
+    onChange?: (value: number) => void;
+    step?: number;
+    min?: number;
+    max?: number;
+    controlled?: boolean;
+}
+export declare const Increment: React.ForwardRefExoticComponent<Omit<IncrementProps, "ref"> & React.RefAttributes<ImageLabel>>;

package/out/Components/Input/Increment.luau

@@ -0,0 +1,107 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contexts").CleanThemeContext
+local _Layout = TS.import(script, script.Parent.Parent, "Layout")
+local Container = _Layout.Container
+local FlexItem = _Layout.FlexItem
+local HStack = _Layout.HStack
+local Button = TS.import(script, script.Parent, "Button").Button
+local resolveSteppedValue = TS.import(script, script.Parent, "Increment.step").resolveSteppedValue
+local Input = TS.import(script, script.Parent, "Input").Input
+local Increment = React.forwardRef(function(props, ref)
+	local theme = React.useContext(CleanThemeContext)
+	local _buttonStyleOverride = theme.components.increment
+	if _buttonStyleOverride ~= nil then
+		_buttonStyleOverride = _buttonStyleOverride.button
+	end
+	local buttonStyleOverride = _buttonStyleOverride
+	local value, setValue = React.useState(props.value)
+	local current = if props.controlled then props.value else value
+	local _condition = props.step
+	if _condition == nil then
+		_condition = 1
+	end
+	local step = _condition
+	local decrementDisabled = resolveSteppedValue(current, "decrement", step, props.min, props.max) == nil
+	local incrementDisabled = resolveSteppedValue(current, "increment", step, props.min, props.max) == nil
+	local applyValue = function(nextValue)
+		if not props.controlled then
+			setValue(nextValue)
+		end
+		local _result = props.onChange
+		if _result ~= nil then
+			_result(nextValue)
+		end
+	end
+	local _attributes = {
+		ref = ref,
+	}
+	for _k, _v in props do
+		_attributes[_k] = _v
+	end
+	_attributes.Size = UDim2.fromScale(1, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.Y
+	return React.createElement(Container, _attributes, React.createElement(HStack, {
+		Wraps = false,
+		valign = "Center",
+		spacing = props.spacing,
+	}, React.createElement(Button, {
+		icon = "minus",
+		intent = props.intent,
+		scale = props.scale,
+		spacing = props.spacing,
+		disabled = decrementDisabled,
+		styleOverride = buttonStyleOverride,
+		LayoutOrder = 0,
+		Event = {
+			Activated = function()
+				local nextValue = resolveSteppedValue(current, "decrement", step, props.min, props.max)
+				if nextValue == nil then
+					return nil
+				end
+				applyValue(nextValue)
+			end,
+		},
+	}), React.createElement(FlexItem, {
+		HorizontalFlex = "Fill",
+		LayoutOrder = 1,
+	}, React.createElement(Input, {
+		Size = UDim2.fromScale(0, 0),
+		scale = props.scale,
+		spacing = props.spacing,
+		controlled = true,
+		validation = "Number",
+		min = props.min,
+		max = props.max,
+		value = tostring(current),
+		TextXAlignment = Enum.TextXAlignment.Center,
+		onChange = function(text)
+			local parsed = tonumber(text)
+			if parsed == nil then
+				return nil
+			end
+			applyValue(parsed)
+		end,
+	})), React.createElement(Button, {
+		icon = "plus",
+		intent = props.intent,
+		scale = props.scale,
+		spacing = props.spacing,
+		disabled = incrementDisabled,
+		styleOverride = buttonStyleOverride,
+		LayoutOrder = 2,
+		Event = {
+			Activated = function()
+				local nextValue = resolveSteppedValue(current, "increment", step, props.min, props.max)
+				if nextValue == nil then
+					return nil
+				end
+				applyValue(nextValue)
+			end,
+		},
+	})))
+end)
+return {
+	Increment = Increment,
+}

package/out/Components/Input/Increment.step.d.ts

@@ -0,0 +1 @@
+export declare function resolveSteppedValue(current: number, direction: "increment" | "decrement", step: number, min?: number, max?: number): number | undefined;

package/out/Components/Input/Increment.step.luau

@@ -0,0 +1,25 @@
+-- Compiled with roblox-ts v3.0.0
+local ROUNDING_PRECISION = 1e9
+local function roundToPrecision(value)
+	return if value >= 0 then math.floor(value * ROUNDING_PRECISION + 0.5) / ROUNDING_PRECISION else math.ceil(value * ROUNDING_PRECISION - 0.5) / ROUNDING_PRECISION
+end
+local function resolveSteppedValue(current, direction, step, min, max)
+	if direction == "decrement" and min ~= nil and current <= min then
+		return nil
+	end
+	if direction == "increment" and max ~= nil and current >= max then
+		return nil
+	end
+	local candidate = if direction == "increment" then current + step else current - step
+	candidate = roundToPrecision(candidate)
+	if min ~= nil and candidate < min then
+		candidate = min
+	end
+	if max ~= nil and candidate > max then
+		candidate = max
+	end
+	return candidate
+end
+return {
+	resolveSteppedValue = resolveSteppedValue,
+}

package/out/Components/Input/Input.d.ts

@@ -1,12 +1,13 @@
 import React from "@rbxts/react";
 import { ScalableElementProps, SpacedElementProps } from "../../Interfaces";
-interface InputProps extends ScalableElementProps, SpacedElementProps, React.InstanceProps<TextBox> {
+export interface InputProps extends ScalableElementProps, SpacedElementProps, React.InstanceProps<TextBox> {
     value: string;
     placeholder?: string;
-    validation?: "Number" | "String" | "None" | "Int";
+    validation?: "Number" | "String" | "None" | "Int" | "Telephone" | "Alphanumeric" | "Email";
+    min?: number;
+    max?: number;
     onChange?: (value: string) => void;
     Event?: React.InstanceEvent<TextBox>;
     controlled?: boolean;
 }
 export declare function Input(props: InputProps): React.JSX.Element;
-export {};