@rbxts/uiblox 0.2.0-alpha.28 → 0.2.0-alpha.3

package/out/ui/packages/gradientEditor/components/GradientEditor.luau

@@ -1,7 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local _colorPicker = TS.import(script, script.Parent.Parent.Parent, "colorPicker")
 local ColorSequenceEditor = _colorPicker.ColorSequenceEditor
 local NumberSequenceEditor = _colorPicker.NumberSequenceEditor
@@ -22,28 +21,33 @@ local function GradientEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useGradientEditorStyles()
-	local _attributes = {
-		tag = "frame",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "GradientEditor"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
-		disabled = disabled,
-	}
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	local _attributes_1 = table.clone(styles.column)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
 	local _attributes_2 = {
 		key = "Color",
 	}
-	for _k, _v in styles.block do
+	for _k, _v in styles.row do
 		_attributes_2[_k] = _v
 	end
 	_attributes_2.LayoutOrder = 1
@@ -53,7 +57,6 @@ local function GradientEditor(props)
 	local _attributes_4 = table.clone(styles.label)
 	setmetatable(_attributes_4, nil)
 	_attributes_4.Text = "Color"
-	_attributes_4.LayoutOrder = 1
 	local _exp_2 = React.createElement("frame", _attributes_2, _exp_1, React.createElement("textlabel", _attributes_4), React.createElement(ColorSequenceEditor, {
 		value = value.color,
 		disabled = disabled,
@@ -67,7 +70,7 @@ local function GradientEditor(props)
 	local _attributes_5 = {
 		key = "Transparency",
 	}
-	for _k, _v in styles.block do
+	for _k, _v in styles.row do
 		_attributes_5[_k] = _v
 	end
 	_attributes_5.LayoutOrder = 2
@@ -77,7 +80,6 @@ local function GradientEditor(props)
 	local _attributes_7 = table.clone(styles.label)
 	setmetatable(_attributes_7, nil)
 	_attributes_7.Text = "Transparency"
-	_attributes_7.LayoutOrder = 1
 	local _exp_4 = React.createElement("frame", _attributes_5, _exp_3, React.createElement("textlabel", _attributes_7), React.createElement(NumberSequenceEditor, {
 		value = value.transparency,
 		disabled = disabled,
@@ -89,56 +91,40 @@ local function GradientEditor(props)
 		end,
 	}))
 	local _attributes_8 = {
-		key = "Metrics",
+		key = "Rotation",
 	}
-	for _k, _v in styles.metrics do
+	for _k, _v in styles.row do
 		_attributes_8[_k] = _v
 	end
 	_attributes_8.LayoutOrder = 3
-	local _attributes_9 = table.clone(styles.metricsRow)
+	local _attributes_9 = table.clone(styles.column)
 	setmetatable(_attributes_9, nil)
 	local _exp_5 = React.createElement("uilistlayout", _attributes_9)
-	local _attributes_10 = {
-		key = "Rotation",
-	}
-	for _k, _v in styles.metric do
-		_attributes_10[_k] = _v
-	end
-	_attributes_10.LayoutOrder = 1
-	local _attributes_11 = table.clone(styles.metricInner)
-	setmetatable(_attributes_11, nil)
-	local _exp_6 = React.createElement("uilistlayout", _attributes_11)
-	local _attributes_12 = table.clone(styles.metricLabel)
-	setmetatable(_attributes_12, nil)
-	_attributes_12.Text = "Rotation"
-	_attributes_12.LayoutOrder = 1
-	local _exp_7 = React.createElement("textlabel", _attributes_12)
-	local _attributes_13 = table.clone(styles.metricField)
-	setmetatable(_attributes_13, nil)
-	_attributes_13.LayoutOrder = 2
-	local _exp_8 = React.createElement("frame", _attributes_10, _exp_6, _exp_7, React.createElement("frame", _attributes_13, React.createElement(NumberInput, {
+	local _attributes_10 = table.clone(styles.label)
+	setmetatable(_attributes_10, nil)
+	_attributes_10.Text = "Rotation"
+	local _exp_6 = React.createElement("frame", _attributes_8, _exp_5, React.createElement("textlabel", _attributes_10), React.createElement(NumberInput, {
 		value = value.rotation,
 		disabled = disabled,
 		width = UDim.new(1, 0),
 		onChange = function(rotation)
 			return onChange(patchGradientRotation(value, rotation))
 		end,
-	})))
-	local _attributes_14 = {
+	}))
+	local _attributes_11 = {
 		key = "Offset",
 	}
-	for _k, _v in styles.metric do
-		_attributes_14[_k] = _v
+	for _k, _v in styles.row do
+		_attributes_11[_k] = _v
 	end
-	_attributes_14.LayoutOrder = 2
-	local _attributes_15 = table.clone(styles.column)
-	setmetatable(_attributes_15, nil)
-	local _exp_9 = React.createElement("uilistlayout", _attributes_15)
-	local _attributes_16 = table.clone(styles.metricLabel)
-	setmetatable(_attributes_16, nil)
-	_attributes_16.Text = "Offset"
-	_attributes_16.LayoutOrder = 1
-	local _exp_10 = React.createElement("frame", _attributes_8, _exp_5, _exp_8, React.createElement("frame", _attributes_14, _exp_9, React.createElement("textlabel", _attributes_16), React.createElement(VectorEditor, {
+	_attributes_11.LayoutOrder = 4
+	local _attributes_12 = table.clone(styles.column)
+	setmetatable(_attributes_12, nil)
+	local _exp_7 = React.createElement("uilistlayout", _attributes_12)
+	local _attributes_13 = table.clone(styles.label)
+	setmetatable(_attributes_13, nil)
+	_attributes_13.Text = "Offset"
+	local _exp_8 = React.createElement("frame", _attributes_11, _exp_7, React.createElement("textlabel", _attributes_13), React.createElement(VectorEditor, {
 		value = value.offset,
 		disabled = disabled,
 		onChange = function(offset)
@@ -147,15 +133,15 @@ local function GradientEditor(props)
 			_object.offset = offset
 			return onChange(_object)
 		end,
-	})))
-	local _attributes_17 = {
+	}))
+	local _attributes_14 = {
 		key = "Enabled",
 	}
-	for _k, _v in styles.block do
-		_attributes_17[_k] = _v
+	for _k, _v in styles.row do
+		_attributes_14[_k] = _v
 	end
-	_attributes_17.LayoutOrder = 4
-	return React.createElement(SxHost, _attributes, _exp, _exp_2, _exp_4, _exp_10, React.createElement("frame", _attributes_17, React.createElement(Switch, {
+	_attributes_14.LayoutOrder = 5
+	return React.createElement("frame", _attributes, _exp, _exp_2, _exp_4, _exp_6, _exp_8, React.createElement("frame", _attributes_14, React.createElement(Switch, {
 		value = value.enabled,
 		disabled = disabled,
 		label = "Enabled",

package/out/ui/packages/gradientEditor/components/GradientEditor.styles.luau

@@ -13,55 +13,22 @@ local useGradientEditorStyles = componentStyles("GradientEditor", function(theme
 		},
 		column = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
+			Padding = UDim.new(0, theme.padding.calc(1)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
-		block = {
+		row = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundTransparency = 1,
 		},
 		label = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(1.5)),
 			BackgroundTransparency = 1,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.button,
+			TextSize = theme.typography.fontSizes.caption,
 			TextColor3 = theme.palette.text.secondary,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
-		metrics = {
-			Size = UDim2.new(1, 0, 0, 0),
-			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundTransparency = 1,
-		},
-		metricsRow = {
-			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(1)),
-			VerticalAlignment = Enum.VerticalAlignment.Top,
-			SortOrder = Enum.SortOrder.LayoutOrder,
-		},
-		metric = {
-			Size = UDim2.new(0.5, -theme.padding.calc(0.5), 0, 0),
-			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundTransparency = 1,
-		},
-		metricInner = {
-			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
-			SortOrder = Enum.SortOrder.LayoutOrder,
-		},
-		metricLabel = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
-			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.button,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		metricField = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
-			BackgroundTransparency = 1,
-		},
 	})
 end)
 local default = useGradientEditorStyles

package/out/ui/packages/icon/components/Icon.luau

@@ -1,7 +1,6 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useIconStyles = TS.import(script, script.Parent, "Icon.styles").default
 local function Icon(props)
 	local _binding = props
@@ -13,21 +12,29 @@ local function Icon(props)
 	local ref = _binding.ref
 	local _binding_1 = useIconStyles(props)
 	local container = _binding_1.container
-	local _attributes = {
-		tag = "imagelabel",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Icon"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = container
-	_attributes.className = className
-	_attributes.sx = sx
+	_attributes.ref = ref
+	for _k, _v in container do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	_attributes.Image = tostring(icon)
 	_attributes.ImageColor3 = tint or container.ImageColor3
-	return React.createElement(SxHost, _attributes)
+	return React.createElement("imagelabel", _attributes)
 end
 local default = Icon
 return {

package/out/ui/packages/iconButton/components/IconButton.luau

@@ -4,8 +4,6 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useEffect = _react.useEffect
 local useState = _react.useState
-local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local iconSpinnerPixels = TS.import(script, script.Parent.Parent.Parent, "button", "components", "buttonLook").iconSpinnerPixels
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
@@ -20,7 +18,7 @@ local function IconButton(props)
 	if loading == nil then
 		loading = false
 	end
-	local reducedProp = _binding.reducedMotion
+	local reducedMotion = _binding.reducedMotion
 	local onClick = _binding.onClick
 	local className = _binding.className
 	local sx = _binding.sx
@@ -28,8 +26,6 @@ local function IconButton(props)
 	local ref = _binding.ref
 	local _binding_1 = useIconButtonStyles(props)
 	local container = _binding_1.container
-	local corner = _binding_1.corner
-	local reducedMotion = useReducedMotion(reducedProp)
 	local active = canActivate(disabled, loading)
 	local hovering, setHovering = useState(false)
 	local focused, setFocused = useState(false)
@@ -40,25 +36,26 @@ local function IconButton(props)
 		setHovering(false)
 		setFocused(false)
 	end, { active })
-	local _attributes = {
-		tag = "imagebutton",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "IconButton"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = container
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
-		disabled = disabled,
-		loading = loading,
-		selected = selected,
-		hover = hovering,
-		focused = focused,
-	}
+	_attributes.ref = ref
+	for _k, _v in container do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	_attributes.Active = active
 	_attributes.AutoButtonColor = active
 	_attributes.Selectable = active
@@ -89,9 +86,7 @@ local function IconButton(props)
 			return setFocused(false)
 		end,
 	}
-	local _attributes_1 = table.clone(corner)
-	setmetatable(_attributes_1, nil)
-	return React.createElement(SxHost, _attributes, React.createElement("uicorner", _attributes_1), loading and (React.createElement(CircularProgress, {
+	return React.createElement("imagebutton", _attributes, loading and (React.createElement(CircularProgress, {
 		size = iconSpinnerPixels(props.size),
 		thickness = 2,
 		color = tint,

package/out/ui/packages/iconButton/components/IconButton.styles.luau

@@ -39,9 +39,6 @@ local useIconButtonStyles = componentStyles("IconButton", function(theme, props)
 			ScaleType = Enum.ScaleType.Fit,
 			ZIndex = 12000,
 		},
-		corner = {
-			CornerRadius = UDim.new(0, theme.shape.borderRadius),
-		},
 	})
 end)
 local default = useIconButtonStyles

package/out/ui/packages/index.d.ts

@@ -3,10 +3,8 @@ export * from "./skeleton/index";
 export * from "./divider/index";
 export * from "./errorBoundary/index";
 export * from "./icon/index";
-export * from "./imageList/index";
 export * from "./iconButton/index";
 export * from "./input/index";
-export * from "./formText/index";
 export * from "./layout/index";
 export * from "./preloader/index";
 export * from "./progressBar/index";
@@ -32,7 +30,6 @@ export * from "./cframeEditor/index";
 export * from "./enumPicker/index";
 export * from "./popup/index";
 export * from "./modal/index";
-export * from "./backdrop/index";
 export * from "./dialog/index";
 export * from "./paper/index";
 export * from "./card/index";
@@ -51,14 +48,9 @@ export * from "./snackbar/index";
 export * from "./table/index";
 export * from "./autocomplete/index";
 export * from "./fab/index";
-export * from "./speedDial/index";
 export * from "./appBar/index";
 export * from "./bottomNavigation/index";
 export * from "./alert/index";
-export * from "./toggleButton/index";
-export * from "./link/index";
-export * from "./markdown/index";
-export * from "./rating/index";
 export * from "./listItem/index";
 export * from "./menu/index";
 export * from "./motion/index";

package/out/ui/packages/init.luau

@@ -16,18 +16,12 @@ end
 for _k, _v in TS.import(script, script, "icon") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "imageList") or {} do
-	exports[_k] = _v
-end
 for _k, _v in TS.import(script, script, "iconButton") or {} do
 	exports[_k] = _v
 end
 for _k, _v in TS.import(script, script, "input") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "formText") or {} do
-	exports[_k] = _v
-end
 for _k, _v in TS.import(script, script, "layout") or {} do
 	exports[_k] = _v
 end
@@ -103,9 +97,6 @@ end
 for _k, _v in TS.import(script, script, "modal") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "backdrop") or {} do
-	exports[_k] = _v
-end
 for _k, _v in TS.import(script, script, "dialog") or {} do
 	exports[_k] = _v
 end
@@ -160,9 +151,6 @@ end
 for _k, _v in TS.import(script, script, "fab") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "speedDial") or {} do
-	exports[_k] = _v
-end
 for _k, _v in TS.import(script, script, "appBar") or {} do
 	exports[_k] = _v
 end
@@ -172,18 +160,6 @@ end
 for _k, _v in TS.import(script, script, "alert") or {} do
 	exports[_k] = _v
 end
-for _k, _v in TS.import(script, script, "toggleButton") or {} do
-	exports[_k] = _v
-end
-for _k, _v in TS.import(script, script, "link") or {} do
-	exports[_k] = _v
-end
-for _k, _v in TS.import(script, script, "markdown") or {} do
-	exports[_k] = _v
-end
-for _k, _v in TS.import(script, script, "rating") or {} do
-	exports[_k] = _v
-end
 for _k, _v in TS.import(script, script, "listItem") or {} do
 	exports[_k] = _v
 end

package/out/ui/packages/input/components/Input.d.ts

@@ -5,7 +5,6 @@ export type DefaultInputComponent = Frame;
 export interface InputProps {
     color?: InputColor;
     disabled?: boolean;
-    readOnly?: boolean;
     loading?: boolean;
     hasError?: boolean;
     helperText?: string;

package/out/ui/packages/input/components/Input.luau

@@ -12,7 +12,6 @@ local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "co
 local spinnerPixels = TS.import(script, script.Parent.Parent.Parent, "button", "components", "buttonLook").spinnerPixels
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
 local Divider = TS.import(script, script.Parent.Parent.Parent, "divider").Divider
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
 local useInputStyles = TS.import(script, script.Parent, "Input.styles").default
 local syncInputDraft = TS.import(script, script.Parent, "inputDraft").syncInputDraft
@@ -37,10 +36,6 @@ local function Input(props)
 	if disabled == nil then
 		disabled = false
 	end
-	local readOnly = _binding.readOnly
-	if readOnly == nil then
-		readOnly = false
-	end
 	local loading = _binding.loading
 	if loading == nil then
 		loading = false
@@ -51,7 +46,7 @@ local function Input(props)
 	end
 	local rounded = _binding.rounded
 	if rounded == nil then
-		rounded = true
+		rounded = false
 	end
 	local size = _binding.size
 	local reducedMotion = _binding.reducedMotion
@@ -76,8 +71,7 @@ local function Input(props)
 	local focused, setFocused = useState(false)
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
-	local active = canActivate(disabled, loading)
-	local editable = active and readOnly ~= true
+	local editable = canActivate(disabled, loading)
 	local endSlotContent = if loading then nil else endAdornment
 	local _object = table.clone(props)
 	setmetatable(_object, nil)
@@ -103,23 +97,26 @@ local function Input(props)
 	end, { text })
 	local showStroke = variant == "outlined" or variant == "filled"
 	local showCorner = rounded
-	local _attributes = {
-		tag = "frame",
-	}
+	local _attributes = {}
 	local _condition_1 = id
 	if not (_condition_1 ~= 0 and _condition_1 == _condition_1 and _condition_1 ~= "" and _condition_1) then
 		_condition_1 = "Input"
 	end
 	_attributes.key = _condition_1
-	_attributes.hostRef = ref
-	_attributes.base = root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
-		disabled = disabled,
-		loading = loading,
-		focused = focused,
-	}
+	_attributes.ref = ref
+	for _k, _v in root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
 	local _attributes_1 = {
 		key = "Margin",
 	}
@@ -163,7 +160,7 @@ local function Input(props)
 	for _k, _v in box do
 		_attributes_3[_k] = _v
 	end
-	_attributes_3.Active = active
+	_attributes_3.Active = editable
 	_attributes_3.TextEditable = editable
 	_attributes_3.Text = draft
 	_attributes_3.PlaceholderText = placeholder
@@ -270,7 +267,7 @@ local function Input(props)
 		_attributes_4.Text = helperText
 		_condition_7 = (React.createElement("textlabel", _attributes_4))
 	end
-	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, _exp_1, _exp_2, _condition_7))
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp_1, _exp_2, _condition_7))
 end
 local default = Input
 return {

package/out/ui/packages/layout/components/Grid.d.ts

@@ -1,15 +1,11 @@
 import { CustomizedProps } from "../../../../theme/index";
-import { GridCorner } from "./gridProps";
 export interface GridProps {
     cellPadding?: UDim2;
     cellSize?: UDim2;
-    gap?: number;
-    columns?: number;
-    maxColumns?: number;
     fillDirection?: Enum.FillDirection;
     fillDirectionMaxCells?: number;
     sortOrder?: Enum.SortOrder;
-    startCorner?: Enum.StartCorner | GridCorner;
+    startCorner: Enum.StartCorner;
     horizontalAlignment?: Enum.HorizontalAlignment;
     verticalAlignment?: Enum.VerticalAlignment;
 }