@rbxts/react-clean-ui 1.1.0 → 1.2.4

package/out/Components/Decorator/Corners.d.ts

@@ -2,6 +2,7 @@ import React from "@rbxts/react";
 import { CssSize } from "../../Interfaces/";
 interface CornerProps {
     radius?: CssSize;
+    name?: string;
 }
 export declare function Corners(props: CornerProps): React.JSX.Element | undefined;
 export {};

package/out/Components/Decorator/Corners.luau

@@ -10,9 +10,14 @@ local function Corners(props)
 	if radius.Scale == 0 and radius.Offset == 0 then
 		return nil
 	end
-	return React.createElement("uicorner", {
-		CornerRadius = radius,
-	})
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Corners"
+	end
+	_attributes.key = _condition
+	_attributes.CornerRadius = radius
+	return React.createElement("uicorner", _attributes)
 end
 return {
 	Corners = Corners,

package/out/Components/Decorator/Gradient.d.ts

@@ -0,0 +1,8 @@
+import React from "@rbxts/react";
+import { CssBackgroundGradient } from "../../Interfaces/";
+interface GradientProps {
+    value?: Partial<CssBackgroundGradient>;
+    name?: string;
+}
+export declare function Gradient(props: GradientProps): React.JSX.Element | undefined;
+export {};

package/out/Components/Decorator/Gradient.luau

@@ -0,0 +1,23 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local CssHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").CssHelper
+local function Gradient(props)
+	local resolved = CssHelper:resolveBackgroundGradient(props.value)
+	if resolved == nil then
+		return nil
+	end
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Gradient"
+	end
+	_attributes.key = _condition
+	for _k, _v in resolved do
+		_attributes[_k] = _v
+	end
+	return React.createElement("uigradient", _attributes)
+end
+return {
+	Gradient = Gradient,
+}

package/out/Components/Decorator/Padding.d.ts

@@ -1,3 +1,5 @@
 import React from "@rbxts/react";
 import { PaddingProps } from "../../Interfaces/";
-export declare function Padding(props: PaddingProps): React.JSX.Element;
+export declare function Padding(props: PaddingProps & {
+    name?: string;
+}): React.JSX.Element;

package/out/Components/Decorator/Padding.luau

@@ -6,12 +6,17 @@ local SpacingHelper = TS.import(script, script.Parent.Parent.Parent, "Helpers").
 local function Padding(props)
 	local theme = React.useContext(CleanThemeContext)
 	local padding = SpacingHelper:GetResolvedPadding(theme, props)
-	return React.createElement("uipadding", {
-		PaddingTop = UDim.new(0, padding.top),
-		PaddingBottom = UDim.new(0, padding.bottom),
-		PaddingLeft = UDim.new(0, padding.left),
-		PaddingRight = UDim.new(0, padding.right),
-	})
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Padding"
+	end
+	_attributes.key = _condition
+	_attributes.PaddingTop = UDim.new(0, padding.top)
+	_attributes.PaddingBottom = UDim.new(0, padding.bottom)
+	_attributes.PaddingLeft = UDim.new(0, padding.left)
+	_attributes.PaddingRight = UDim.new(0, padding.right)
+	return React.createElement("uipadding", _attributes)
 end
 return {
 	Padding = Padding,

package/out/Components/Decorator/index.d.ts

@@ -1,3 +1,4 @@
 export * from './BoxShadow';
 export * from './Corners';
+export * from './Gradient';
 export * from './Padding';

package/out/Components/Decorator/init.luau

@@ -7,6 +7,9 @@ end
 for _k, _v in TS.import(script, script, "Corners") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "Gradient") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "Padding") or {} do
 	exports[_k] = _v
 end

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

@@ -12,6 +12,7 @@ export interface ButtonProps extends SpacedElementProps, ShadowElementProps, ZIn
     disabled?: boolean;
     LayoutOrder?: number;
     styleOverride?: ButtonStyleOverride;
+    name?: string;
 }
 export interface ButtonTextProps extends ScalableElementProps, IntentElementProps {
     children?: string;

package/out/Components/Input/Button.luau

@@ -5,6 +5,7 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
 local BoxShadow = _Decorator.BoxShadow
 local Corners = _Decorator.Corners
+local Gradient = _Decorator.Gradient
 local Padding = _Decorator.Padding
 local Text = TS.import(script, script.Parent.Parent, "Typography").Text
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
@@ -20,6 +21,7 @@ local GroupContext = _.GroupContext
 local function ButtonText(props)
 	local theme = React.useContext(CleanThemeContext)
 	local _attributes = {
+		name = "ButtonText",
 		text = props.text,
 	}
 	local _exp = props.scale
@@ -52,12 +54,16 @@ local function ButtonText(props)
 end
 local function ButtonIcon(props)
 	local theme = React.useContext(CleanThemeContext)
-	local _attributes = {
-		scale = props.scale,
-		icon = props.icon,
-		spinning = props.spinning,
-		speed = props.speed,
-	}
+	local _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "ButtonIcon"
+	end
+	_attributes.name = _condition
+	_attributes.scale = props.scale
+	_attributes.icon = props.icon
+	_attributes.spinning = props.spinning
+	_attributes.speed = props.speed
 	local _exp = props.intent
 	local _exp_1 = if props.disabled then "disabled" else "default"
 	local _exp_2 = theme.components.button.intents
@@ -87,10 +93,14 @@ local Button = React.forwardRef(function(props, ref)
 	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 _attributes = {}
+	local _condition = props.name
+	if _condition == nil then
+		_condition = "Button"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	_attributes.Active = not props.disabled
 	local _object = {}
 	local _spread = props.Event
 	if _spread then
@@ -144,28 +154,28 @@ local Button = React.forwardRef(function(props, ref)
 				_result_2 = _result_2.X
 			end
 		end
-		local _condition = _result_2
-		if _condition == nil then
-			_condition = 0
+		local _condition_1 = _result_2
+		if _condition_1 == nil then
+			_condition_1 = 0
 		end
-		_result_1 = _condition
+		_result_1 = _condition_1
 	else
 		_result_1 = 0
 	end
 	_attributes.Size = UDim2.fromOffset(_result_1, 0)
 	_attributes.AutomaticSize = Enum.AutomaticSize.XY
-	local _condition = props.BackgroundTransparency
-	if _condition == nil then
+	local _condition_1 = props.BackgroundTransparency
+	if _condition_1 == nil then
 		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
+		_condition_1 = _result_2
+		if _condition_1 == nil then
+			_condition_1 = theme.components.button.backgroundTransparency
 		end
 	end
-	_attributes.BackgroundTransparency = _condition
+	_attributes.BackgroundTransparency = _condition_1
 	_attributes.BackgroundColor3 = intentColors.backgroundColor
 	_attributes.AutoButtonColor = false
 	_attributes.LayoutOrder = props.LayoutOrder
@@ -182,22 +192,24 @@ local Button = React.forwardRef(function(props, ref)
 	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
+	local _condition_2 = _result_2
+	if _condition_2 == nil then
+		_condition_2 = theme.components.button.cornerRadius
 	end
-	_attributes_1.radius = _condition_1
+	_attributes_1.radius = _condition_2
 	local _exp_2 = React.createElement(Corners, _attributes_1)
-	local _attributes_2 = {}
+	local _attributes_2 = {
+		key = "Stroke",
+	}
 	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
+	local _condition_3 = _result_3
+	if _condition_3 == nil then
+		_condition_3 = theme.components.button.borderThickness
 	end
-	_attributes_2.Thickness = _condition_2
+	_attributes_2.Thickness = _condition_3
 	_attributes_2.BorderStrokePosition = Enum.BorderStrokePosition.Inner
 	_attributes_2.Color = intentColors.borderColor
 	local _exp_3 = React.createElement("uistroke", _attributes_2)
@@ -207,15 +219,18 @@ local Button = React.forwardRef(function(props, ref)
 	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
+	local _condition_4 = _result_4
+	if _condition_4 == nil then
+		_condition_4 = theme.components.button.boxShadow
 	end
-	_attributes_3.value = _condition_3
+	_attributes_3.value = _condition_4
 	local _exp_4 = React.createElement(BoxShadow, _attributes_3)
+	local _exp_5 = React.createElement(Gradient, {
+		value = intentColors.backgroundGradient,
+	})
 	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, {
+	return React.createElement("imagebutton", _attributes, _exp_2, _exp_3, _exp_4, _exp_5, 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, {

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

@@ -7,6 +7,7 @@ interface CheckboxProps extends IntentElementProps, PaddingProps, BackgroundElem
     'icon-unchecked'?: IconName;
     'intent-checked'?: Intent;
     'intent-unchecked'?: Intent;
+    name?: string;
 }
 export declare function Checkbox(props: CheckboxProps): React.JSX.Element;
 export {};

package/out/Components/Input/Checkbox.luau

@@ -6,6 +6,7 @@ local CleanThemeContext = TS.import(script, script.Parent.Parent.Parent, "Contex
 local FieldsetContext = TS.import(script, script.Parent.Parent, "Layout").FieldsetContext
 local _Decorator = TS.import(script, script.Parent.Parent, "Decorator")
 local Corners = _Decorator.Corners
+local Gradient = _Decorator.Gradient
 local Padding = _Decorator.Padding
 local _Helpers = TS.import(script, script.Parent.Parent.Parent, "Helpers")
 local ColorHelper = _Helpers.ColorHelper
@@ -46,21 +47,25 @@ local function Checkbox(props)
 		end
 	end, { checked })
 	local backgroundImage = CssHelper:resolveBackgroundImage(theme.components.checkbox.backgroundImage)
-	local _attributes = {
-		Size = UDim2.fromOffset(0, 0),
-		AutomaticSize = Enum.AutomaticSize.XY,
-		Event = {
-			Activated = function()
-				setChecked(not checked)
-			end,
-		},
-	}
-	local _condition_1 = props.BackgroundTransparency
+	local _attributes = {}
+	local _condition_1 = props.name
 	if _condition_1 == nil then
-		_condition_1 = theme.components.button.backgroundTransparency
+		_condition_1 = "Checkbox"
+	end
+	_attributes.key = _condition_1
+	_attributes.Size = UDim2.fromOffset(0, 0)
+	_attributes.AutomaticSize = Enum.AutomaticSize.XY
+	_attributes.Event = {
+		Activated = function()
+			setChecked(not checked)
+		end,
+	}
+	local _condition_2 = props.BackgroundTransparency
+	if _condition_2 == nil then
+		_condition_2 = theme.components.button.backgroundTransparency
 	end
-	_attributes.BackgroundTransparency = _condition_1
-	_attributes.BackgroundColor3 = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.button.intents).backgroundColor
+	_attributes.BackgroundTransparency = _condition_2
+	_attributes.BackgroundColor3 = ColorHelper:getIntentColors(theme, props.intent, "default", theme.components.checkbox.intents).backgroundColor
 	_attributes.AutoButtonColor = false
 	_attributes.Image = backgroundImage.Image
 	_attributes.ImageColor3 = backgroundImage.ImageColor3
@@ -72,19 +77,24 @@ local function Checkbox(props)
 	local _exp = React.createElement(Corners, {
 		radius = theme.components.checkbox.cornerRadius,
 	})
+	local _exp_1 = React.createElement(Gradient, {
+		value = theme.components.checkbox.backgroundGradient,
+	})
 	local _attributes_1 = {
+		key = "Stroke",
 		Thickness = theme.components.checkbox.borderThickness,
 		BorderStrokePosition = Enum.BorderStrokePosition.Inner,
 	}
-	local _condition_2 = theme.components.checkbox.borderTransparency
-	if _condition_2 == nil then
-		_condition_2 = 0
+	local _condition_3 = theme.components.checkbox.borderTransparency
+	if _condition_3 == nil then
+		_condition_3 = 0
 	end
-	_attributes_1.Transparency = _condition_2
+	_attributes_1.Transparency = _condition_3
 	_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, {
+	return React.createElement("imagebutton", _attributes, _exp, _exp_1, React.createElement("uistroke", _attributes_1), React.createElement(Padding, {
 		resolvedPadding = SpacingHelper:GetResolvedPadding(theme, props, theme.components.checkbox.spacing, theme.components.checkbox.padding),
 	}), React.createElement(Icon, {
+		name = "CheckboxIcon",
 		scale = props.scale,
 		icon = if checked then props["icon-checked"] or "check" else props["icon-unchecked"],
 		color = ColorHelper:getIntentColors(theme, if checked then props["intent-checked"] or "success" else props["intent-unchecked"] or "primary", "default", theme.components.checkbox.intents).textColor,

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

@@ -11,6 +11,7 @@ interface HoverButtonProps {
     focus?: ImageButtonProps;
     isSelected?: boolean;
     children?: React.ReactNode;
+    name?: string;
 }
 export declare function HoverButton(propSet: HoverButtonProps): React.JSX.Element;
 export {};

package/out/Components/Input/HoverButton.luau

@@ -6,8 +6,6 @@ local function HoverButton(propSet)
 	local hovering, setHovering = React.useState(false)
 	local state = if propSet.isSelected then "focus" elseif hovering then "hover" else "default"
 	local stateProps = propSet[state]
-	-- Object spreading into a new object is supported.
-	-- It is object rest destructuring that roblox-ts does not support.
 	local _object = table.clone(propSet.default)
 	setmetatable(_object, nil)
 	if stateProps then
@@ -22,46 +20,50 @@ local function HoverButton(propSet)
 		_stateEvents = _stateEvents.Event
 	end
 	local stateEvents = _stateEvents
-	local _attributes = {
-		Active = props.Active,
-		AnchorPoint = props.AnchorPoint,
-		Archivable = props.Archivable,
-		AutoButtonColor = props.AutoButtonColor,
-		AutomaticSize = props.AutomaticSize,
-		BackgroundColor3 = props.BackgroundColor3,
-		BackgroundTransparency = props.BackgroundTransparency,
-		BorderColor3 = props.BorderColor3,
-		BorderMode = props.BorderMode,
-		BorderSizePixel = props.BorderSizePixel,
-		ClipsDescendants = props.ClipsDescendants,
-		LayoutOrder = props.LayoutOrder,
-		NextSelectionDown = props.NextSelectionDown,
-		NextSelectionLeft = props.NextSelectionLeft,
-		NextSelectionRight = props.NextSelectionRight,
-		NextSelectionUp = props.NextSelectionUp,
-		Position = props.Position,
-		Rotation = props.Rotation,
-		Selectable = props.Selectable,
-		SelectionBehaviorDown = props.SelectionBehaviorDown,
-		SelectionBehaviorLeft = props.SelectionBehaviorLeft,
-		SelectionBehaviorRight = props.SelectionBehaviorRight,
-		SelectionBehaviorUp = props.SelectionBehaviorUp,
-		SelectionGroup = props.SelectionGroup,
-		Size = props.Size,
-		SizeConstraint = props.SizeConstraint,
-		Visible = props.Visible,
-		ZIndex = props.ZIndex,
-		Image = props.Image,
-		ImageColor3 = props.ImageColor3,
-		ImageRectOffset = props.ImageRectOffset,
-		ImageRectSize = props.ImageRectSize,
-		ImageTransparency = props.ImageTransparency,
-		ResampleMode = props.ResampleMode,
-		ScaleType = props.ScaleType,
-		SliceCenter = props.SliceCenter,
-		SliceScale = props.SliceScale,
-		TileSize = props.TileSize,
-	}
+	local _attributes = {}
+	local _condition = propSet.name
+	if _condition == nil then
+		_condition = "HoverButton"
+	end
+	_attributes.key = _condition
+	_attributes.Active = props.Active
+	_attributes.AnchorPoint = props.AnchorPoint
+	_attributes.Archivable = props.Archivable
+	_attributes.AutoButtonColor = props.AutoButtonColor
+	_attributes.AutomaticSize = props.AutomaticSize
+	_attributes.BackgroundColor3 = props.BackgroundColor3
+	_attributes.BackgroundTransparency = props.BackgroundTransparency
+	_attributes.BorderColor3 = props.BorderColor3
+	_attributes.BorderMode = props.BorderMode
+	_attributes.BorderSizePixel = props.BorderSizePixel
+	_attributes.ClipsDescendants = props.ClipsDescendants
+	_attributes.LayoutOrder = props.LayoutOrder
+	_attributes.NextSelectionDown = props.NextSelectionDown
+	_attributes.NextSelectionLeft = props.NextSelectionLeft
+	_attributes.NextSelectionRight = props.NextSelectionRight
+	_attributes.NextSelectionUp = props.NextSelectionUp
+	_attributes.Position = props.Position
+	_attributes.Rotation = props.Rotation
+	_attributes.Selectable = props.Selectable
+	_attributes.SelectionBehaviorDown = props.SelectionBehaviorDown
+	_attributes.SelectionBehaviorLeft = props.SelectionBehaviorLeft
+	_attributes.SelectionBehaviorRight = props.SelectionBehaviorRight
+	_attributes.SelectionBehaviorUp = props.SelectionBehaviorUp
+	_attributes.SelectionGroup = props.SelectionGroup
+	_attributes.Size = props.Size
+	_attributes.SizeConstraint = props.SizeConstraint
+	_attributes.Visible = props.Visible
+	_attributes.ZIndex = props.ZIndex
+	_attributes.Image = props.Image
+	_attributes.ImageColor3 = props.ImageColor3
+	_attributes.ImageRectOffset = props.ImageRectOffset
+	_attributes.ImageRectSize = props.ImageRectSize
+	_attributes.ImageTransparency = props.ImageTransparency
+	_attributes.ResampleMode = props.ResampleMode
+	_attributes.ScaleType = props.ScaleType
+	_attributes.SliceCenter = props.SliceCenter
+	_attributes.SliceScale = props.SliceScale
+	_attributes.TileSize = props.TileSize
 	local _object_1 = {}
 	if defaultEvents then
 		for _k, _v in defaultEvents do

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

@@ -7,5 +7,6 @@ export interface IncrementProps extends ScalableElementProps, SpacedElementProps
     min?: number;
     max?: number;
     controlled?: boolean;
+    name?: string;
 }
 export declare const Increment: React.ForwardRefExoticComponent<Omit<IncrementProps, "ref"> & React.RefAttributes<ImageLabel>>;

package/out/Components/Input/Increment.luau

@@ -34,9 +34,13 @@ local Increment = React.forwardRef(function(props, ref)
 			_result(nextValue)
 		end
 	end
-	local _attributes = {
-		ref = ref,
-	}
+	local _attributes = {}
+	local _condition_1 = props.name
+	if _condition_1 == nil then
+		_condition_1 = "Increment"
+	end
+	_attributes.name = _condition_1
+	_attributes.ref = ref
 	for _k, _v in props do
 		_attributes[_k] = _v
 	end
@@ -47,6 +51,7 @@ local Increment = React.forwardRef(function(props, ref)
 		valign = "Center",
 		spacing = props.spacing,
 	}, React.createElement(Button, {
+		name = "DecrementButton",
 		icon = "minus",
 		intent = props.intent,
 		scale = props.scale,
@@ -67,6 +72,7 @@ local Increment = React.forwardRef(function(props, ref)
 		HorizontalFlex = "Fill",
 		LayoutOrder = 1,
 	}, React.createElement(Input, {
+		name = "IncrementInput",
 		Size = UDim2.fromScale(0, 0),
 		scale = props.scale,
 		spacing = props.spacing,
@@ -84,6 +90,7 @@ local Increment = React.forwardRef(function(props, ref)
 			applyValue(parsed)
 		end,
 	})), React.createElement(Button, {
+		name = "IncrementButton",
 		icon = "plus",
 		intent = props.intent,
 		scale = props.scale,

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

@@ -1,5 +1,5 @@
 import React from "@rbxts/react";
-import { ScalableElementProps, SpacedElementProps } from "../../Interfaces";
+import { IconName, ScalableElementProps, SpacedElementProps } from "../../Interfaces";
 export interface InputProps extends ScalableElementProps, SpacedElementProps, React.InstanceProps<TextBox> {
     value: string;
     placeholder?: string;
@@ -9,5 +9,7 @@ export interface InputProps extends ScalableElementProps, SpacedElementProps, Re
     onChange?: (value: string) => void;
     Event?: React.InstanceEvent<TextBox>;
     controlled?: boolean;
+    icon?: IconName;
+    name?: string;
 }
 export declare function Input(props: InputProps): React.JSX.Element;