@rbxts/uiblox 0.2.0-alpha.35 → 0.2.0-alpha.4

package/out/ui/packages/stepper/components/Stepper.d.ts

@@ -2,7 +2,6 @@ import { CustomizedProps } from "../../../../theme/index";
 export interface StepperProps {
     steps: string[];
     activeStep: number;
-    orientation?: "horizontal" | "vertical";
 }
 declare function Stepper(props: CustomizedProps<Frame, StepperProps>): JSX.Element;
 export default Stepper;

package/out/ui/packages/stepper/components/Stepper.luau

@@ -3,35 +3,36 @@ local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
 local stepState = TS.import(script, script.Parent, "stepState").stepState
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useStepperStyles = TS.import(script, script.Parent, "Stepper.styles").default
 local function Stepper(props)
 	local _binding = props
 	local steps = _binding.steps
 	local activeStep = _binding.activeStep
-	local orientation = _binding.orientation
-	if orientation == nil then
-		orientation = "horizontal"
-	end
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useStepperStyles({
-		orientation = orientation,
-	})
-	local _attributes = {
-		tag = "frame",
-	}
+	local styles = useStepperStyles()
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Stepper"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
+	_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.list)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -53,7 +54,7 @@ local function Stepper(props)
 		_newValue[_k] = _callback(_v, _k - 1, steps)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
+	return React.createElement("frame", _attributes, _exp, _newValue)
 end
 local default = Stepper
 return {

package/out/ui/packages/stepper/components/Stepper.styles.d.ts

@@ -1,4 +1,2 @@
-declare const useStepperStyles: (props: {
-    orientation?: "horizontal" | "vertical";
-}) => import("../../../../theme/index").ClassNameMap<string>;
+declare const useStepperStyles: () => import("../../../../theme/index").ClassNameMap<string>;
 export default useStepperStyles;

package/out/ui/packages/stepper/components/Stepper.styles.luau

@@ -3,11 +3,7 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local useStepperStyles = componentStyles("Stepper", function(theme, _param)
-	local orientation = _param.orientation
-	if orientation == nil then
-		orientation = "horizontal"
-	end
+local useStepperStyles = componentStyles("Stepper", function(theme)
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -16,7 +12,7 @@ local useStepperStyles = componentStyles("Stepper", function(theme, _param)
 			BorderSizePixel = 0,
 		},
 		list = {
-			FillDirection = if orientation == "vertical" then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
+			FillDirection = Enum.FillDirection.Horizontal,
 			Padding = UDim.new(0, theme.padding.calc(1)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},

package/out/ui/packages/switch/components/Switch.d.ts

@@ -1,12 +1,10 @@
 import { ControlSize, CustomizedProps } from "../../../../theme/index";
-import { SwitchColor } from "./Switch.styles";
 export interface SwitchProps {
     value: boolean;
     onChange: (value: boolean) => void;
     disabled?: boolean;
     label?: string;
     size?: ControlSize;
-    color?: SwitchColor;
     reducedMotion?: boolean;
 }
 declare function Switch(props: CustomizedProps<TextButton, SwitchProps>): JSX.Element;

package/out/ui/packages/switch/components/Switch.luau

@@ -11,7 +11,6 @@ local controlMetrics = _theme.controlMetrics
 local cx = _theme.cx
 local useTheme = _theme.useTheme
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local playProperty = TS.import(script, script.Parent.Parent.Parent, "motion").playProperty
 local useSwitchStyles = TS.import(script, script.Parent, "Switch.styles").default
 local _switchLook = TS.import(script, script.Parent, "switchLook")
@@ -28,10 +27,6 @@ local function Switch(props)
 	local disabled = _binding.disabled
 	local label = _binding.label
 	local size = _binding.size
-	local color = _binding.color
-	if color == nil then
-		color = "primary"
-	end
 	local reducedProp = _binding.reducedMotion
 	local className = _binding.className
 	local sx = _binding.sx
@@ -42,7 +37,6 @@ local function Switch(props)
 	local theme = _binding_1.theme
 	local _binding_2 = useSwitchStyles({
 		size = size,
-		color = color,
 	})
 	local root = _binding_2.root
 	local row = _binding_2.row
@@ -79,25 +73,26 @@ local function Switch(props)
 		end
 		return playProperty(thumb, goal, THUMB_SECONDS, reducedMotion)
 	end, { placement.scaleX, placement.offsetX, placement.anchorX, reducedMotion })
-	local _attributes = {
-		tag = "textbutton",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Switch"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = root
-	_attributes.className = className
-	_attributes.sx = sx
-	_attributes.state = {
-		disabled = disabled,
-		checked = on,
-		hover = hovering,
-		pressed = pressed,
-		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
 	_attributes.Active = active
 	_attributes.Selectable = not disabled
 	_attributes.BackgroundTransparency = if focused and active then 0.85 else 1
@@ -167,7 +162,7 @@ local function Switch(props)
 		_attributes_7.LayoutOrder = 2
 		_condition_1 = (React.createElement("textlabel", _attributes_7))
 	end
-	return React.createElement(SxHost, _attributes, _exp, _exp_3, _condition_1)
+	return React.createElement("textbutton", _attributes, _exp, _exp_3, _condition_1)
 end
 local default = Switch
 return {

package/out/ui/packages/switch/components/Switch.styles.d.ts

@@ -1,8 +1,6 @@
 import { ControlSize } from "../../../../theme/index";
-export type SwitchColor = "primary" | "accent";
 export interface SwitchStyleProps {
     size?: ControlSize;
-    color?: SwitchColor;
 }
 declare const useSwitchStyles: (props: SwitchStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
 export default useSwitchStyles;

package/out/ui/packages/switch/components/Switch.styles.luau

@@ -6,12 +6,7 @@ local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
 local useSwitchStyles = componentStyles("Switch", function(theme, _param)
 	local size = _param.size
-	local color = _param.color
-	if color == nil then
-		color = "primary"
-	end
 	local metrics = controlMetrics(theme.density, size)
-	local onTone = if color == "accent" then theme.palette.accent.main else theme.palette.primary.main
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -33,7 +28,7 @@ local useSwitchStyles = componentStyles("Switch", function(theme, _param)
 			BorderSizePixel = 0,
 		},
 		trackOn = {
-			BackgroundColor3 = onTone,
+			BackgroundColor3 = theme.palette.primary.main,
 		},
 		knob = {
 			Size = UDim2.fromOffset(metrics.switchThumb, metrics.switchThumb),

package/out/ui/packages/switch/components/switchLook.d.ts

@@ -1,6 +1,6 @@
 export type SwitchPointer = "rest" | "hover" | "press" | "focus";
 export declare function switchPointer(hovering: boolean, pressed: boolean, focused: boolean): SwitchPointer;
-export declare function switchTrackTransparency(on: boolean, disabled: boolean, pointer: SwitchPointer): 0 | 0.25 | 0.55 | 0.35 | 0.15 | 0.65 | 0.08;
+export declare function switchTrackTransparency(on: boolean, disabled: boolean, pointer: SwitchPointer): 0 | 0.25 | 0.35 | 0.65 | 0.55 | 0.15 | 0.08;
 export declare function switchThumbTransparency(disabled: boolean): 0 | 0.35;
 export declare function switchStrokeTransparency(disabled: boolean, pointer: SwitchPointer): 1 | 0 | 0.35;
 export declare function switchThumbPlacement(on: boolean, inset: number): {

package/out/ui/packages/table/components/Table.d.ts

@@ -1,22 +1,8 @@
-import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
-import { TableAlign, TableSortDirection } from "./tableColumns";
-export interface TableColumn {
-    header: string | React.ReactNode;
-    width?: number | UDim;
-    flex?: number;
-    align?: TableAlign;
-    sortable?: boolean;
-}
-export type TableCell = string | React.ReactNode;
 export interface TableProps {
-    columns: Array<string | TableColumn>;
-    rows: Array<Array<TableCell>>;
+    columns: string[];
+    rows: string[][];
     selected?: number;
-    dense?: boolean;
-    sortColumn?: number;
-    sortDirection?: TableSortDirection;
-    onSort?: (column: number) => void;
     onRowActivated?: (index: number) => void;
 }
 declare function Table(props: CustomizedProps<Frame, TableProps>): JSX.Element;

package/out/ui/packages/table/components/Table.luau

@@ -2,64 +2,40 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local rowSelected = TS.import(script, script.Parent, "rowSelected").rowSelected
-local _tableColumns = TS.import(script, script.Parent, "tableColumns")
-local canSort = _tableColumns.canSort
-local columnSizes = _tableColumns.columnSizes
-local headerText = _tableColumns.headerText
-local isTextCell = _tableColumns.isTextCell
-local resolveColumn = _tableColumns.resolveColumn
 local useTableStyles = TS.import(script, script.Parent, "Table.styles").default
-local function textAlign(align)
-	if align == "center" then
-		return Enum.TextXAlignment.Center
-	end
-	if align == "right" then
-		return Enum.TextXAlignment.Right
-	end
-	return Enum.TextXAlignment.Left
-end
 local function Table(props)
 	local _binding = props
 	local columns = _binding.columns
 	local rows = _binding.rows
 	local selected = _binding.selected
-	local dense = _binding.dense
-	local sortColumn = _binding.sortColumn
-	local sortDirection = _binding.sortDirection
-	local onSort = _binding.onSort
 	local onRowActivated = _binding.onRowActivated
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useTableStyles({
-		dense = dense,
-	})
-	-- ▼ ReadonlyArray.map ▼
-	local _newValue = table.create(#columns)
-	local _callback = function(column)
-		return resolveColumn(column)
-	end
-	for _k, _v in columns do
-		_newValue[_k] = _callback(_v, _k - 1, columns)
-	end
-	-- ▲ ReadonlyArray.map ▲
-	local resolved = _newValue
-	local sizes = columnSizes(resolved)
-	local _attributes = {
-		tag = "frame",
-	}
+	local styles = useTableStyles()
+	local width = if #columns > 0 then 1 / #columns else 1
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Table"
 	end
 	_attributes.key = _condition
-	_attributes.hostRef = ref
-	_attributes.base = styles.root
-	_attributes.className = className
-	_attributes.sx = sx
+	_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.corner)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uicorner", _attributes_1)
@@ -80,72 +56,27 @@ local function Table(props)
 	setmetatable(_attributes_5, nil)
 	local _exp_3 = React.createElement("uilistlayout", _attributes_5)
 	-- ▼ ReadonlyArray.map ▼
-	local _newValue_1 = table.create(#resolved)
-	local _callback_1 = function(column, index)
-		local size = sizes[index + 1]
-		local box = UDim2.new(size.scale, size.offset, 0, 0)
-		local align = textAlign(column.align)
-		local active = sortColumn == index and column.sortable
-		local _header = column.header
-		local label = if type(_header) == "string" then headerText(column.header, active, sortDirection) else nil
-		local clickable = canSort(column.sortable, onSort ~= nil)
-		if clickable then
-			local _attributes_6 = {
-				key = `h-{index}`,
-			}
-			for _k, _v in (cx(styles.cell, styles.headerCell)) do
-				_attributes_6[_k] = _v
-			end
-			local _condition_1 = label
-			if _condition_1 == nil then
-				_condition_1 = ""
-			end
-			_attributes_6.Text = _condition_1
-			_attributes_6.Size = box
-			_attributes_6.TextXAlignment = align
-			_attributes_6.AutoButtonColor = false
-			_attributes_6.LayoutOrder = index
-			_attributes_6.Event = {
-				Activated = function()
-					local _result = onSort
-					if _result ~= nil then
-						_result = _result(index)
-					end
-					return _result
-				end,
-			}
-			return React.createElement("textbutton", _attributes_6, label == nil and (column.header))
-		end
-		if label ~= nil then
-			local _attributes_6 = {
-				key = `h-{index}`,
-			}
-			for _k, _v in cx(styles.cell, styles.headerCell) do
-				_attributes_6[_k] = _v
-			end
-			_attributes_6.Text = label
-			_attributes_6.Size = box
-			_attributes_6.TextXAlignment = align
-			_attributes_6.LayoutOrder = index
-			return React.createElement("textlabel", _attributes_6)
+	local _newValue = table.create(#columns)
+	local _callback = function(label, index)
+		local _attributes_6 = {
+			key = `h-{label}-{index}`,
+		}
+		for _k, _v in cx(styles.cell, styles.headerCell) do
+			_attributes_6[_k] = _v
 		end
-		return React.createElement("frame", {
-			key = `h-{index}`,
-			Size = box,
-			AutomaticSize = Enum.AutomaticSize.Y,
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			LayoutOrder = index,
-		}, column.header)
+		_attributes_6.Text = label
+		_attributes_6.Size = UDim2.new(width, 0, 0, 0)
+		_attributes_6.LayoutOrder = index
+		return React.createElement("textlabel", _attributes_6)
 	end
-	for _k, _v in resolved do
-		_newValue_1[_k] = _callback_1(_v, _k - 1, resolved)
+	for _k, _v in columns do
+		_newValue[_k] = _callback(_v, _k - 1, columns)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	local _exp_4 = React.createElement("frame", _attributes_3, _exp_2, _exp_3, React.createElement(React.Fragment, nil, _newValue_1))
+	local _exp_4 = React.createElement("frame", _attributes_3, _exp_2, _exp_3, _newValue)
 	-- ▼ ReadonlyArray.map ▼
-	local _newValue_2 = table.create(#rows)
-	local _callback_2 = function(cells, rowIndex)
+	local _newValue_1 = table.create(#rows)
+	local _callback_1 = function(cells, rowIndex)
 		local _attributes_6 = {
 			key = `r-{rowIndex}`,
 		}
@@ -169,48 +100,34 @@ local function Table(props)
 		setmetatable(_attributes_8, nil)
 		local _exp_6 = React.createElement("uilistlayout", _attributes_8)
 		-- ▼ ReadonlyArray.map ▼
-		local _newValue_3 = table.create(#resolved)
-		local _callback_3 = function(column, colIndex)
-			local size = sizes[colIndex + 1]
-			local box = UDim2.new(size.scale, size.offset, 0, 0)
-			local value = cells[colIndex + 1]
-			if isTextCell(value) then
-				local _attributes_9 = {
-					key = `c-{rowIndex}-{colIndex}`,
-				}
-				for _k, _v in styles.cell do
-					_attributes_9[_k] = _v
-				end
-				local _condition_1 = value
-				if _condition_1 == nil then
-					_condition_1 = ""
-				end
-				_attributes_9.Text = _condition_1
-				_attributes_9.Size = box
-				_attributes_9.TextXAlignment = textAlign(column.align)
-				_attributes_9.LayoutOrder = colIndex
-				return React.createElement("textlabel", _attributes_9)
-			end
-			return React.createElement("frame", {
+		local _newValue_2 = table.create(#columns)
+		local _callback_2 = function(_, colIndex)
+			local _attributes_9 = {
 				key = `c-{rowIndex}-{colIndex}`,
-				Size = box,
-				AutomaticSize = Enum.AutomaticSize.Y,
-				BackgroundTransparency = 1,
-				BorderSizePixel = 0,
-				LayoutOrder = colIndex,
-			}, value)
+			}
+			for _k, _v in styles.cell do
+				_attributes_9[_k] = _v
+			end
+			local _condition_1 = cells[colIndex + 1]
+			if _condition_1 == nil then
+				_condition_1 = ""
+			end
+			_attributes_9.Text = _condition_1
+			_attributes_9.Size = UDim2.new(width, 0, 0, 0)
+			_attributes_9.LayoutOrder = colIndex
+			return React.createElement("textlabel", _attributes_9)
 		end
-		for _k, _v in resolved do
-			_newValue_3[_k] = _callback_3(_v, _k - 1, resolved)
+		for _k, _v in columns do
+			_newValue_2[_k] = _callback_2(_v, _k - 1, columns)
 		end
 		-- ▲ ReadonlyArray.map ▲
-		return React.createElement("textbutton", _attributes_6, _exp_5, _exp_6, React.createElement(React.Fragment, nil, _newValue_3))
+		return React.createElement("textbutton", _attributes_6, _exp_5, _exp_6, _newValue_2)
 	end
 	for _k, _v in rows do
-		_newValue_2[_k] = _callback_2(_v, _k - 1, rows)
+		_newValue_1[_k] = _callback_1(_v, _k - 1, rows)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_4, React.createElement(React.Fragment, nil, _newValue_2))
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_4, _newValue_1)
 end
 local default = Table
 return {

package/out/ui/packages/table/components/Table.styles.d.ts

@@ -1,4 +1,2 @@
-declare const useTableStyles: (props: {
-    dense?: boolean;
-}) => import("../../../../theme/index").ClassNameMap<string>;
+declare const useTableStyles: () => import("../../../../theme/index").ClassNameMap<string>;
 export default useTableStyles;

package/out/ui/packages/table/components/Table.styles.luau

@@ -3,11 +3,7 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
-local useTableStyles = componentStyles("Table", function(theme, _param)
-	local dense = _param.dense
-	local padY = theme.padding.calc(if dense == true then 0.5 else 1)
-	local padX = theme.padding.calc(if dense == true then 1 else 1.5)
-	local textSize = if dense == true then theme.typography.fontSizes.caption else theme.typography.fontSizes.body
+local useTableStyles = componentStyles("Table", function(theme)
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -48,7 +44,7 @@ local useTableStyles = componentStyles("Table", function(theme, _param)
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = textSize,
+			TextSize = theme.typography.fontSizes.body,
 			TextColor3 = theme.palette.text.primary,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextTruncate = Enum.TextTruncate.AtEnd,
@@ -58,10 +54,10 @@ local useTableStyles = componentStyles("Table", function(theme, _param)
 			TextColor3 = theme.palette.text.secondary,
 		},
 		padding = {
-			PaddingTop = UDim.new(0, padY),
-			PaddingBottom = UDim.new(0, padY),
-			PaddingLeft = UDim.new(0, padX),
-			PaddingRight = UDim.new(0, padX),
+			PaddingTop = UDim.new(0, theme.padding.calc(1)),
+			PaddingBottom = UDim.new(0, theme.padding.calc(1)),
+			PaddingLeft = UDim.new(0, theme.padding.calc(1.5)),
+			PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),

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

@@ -1,3 +1,2 @@
 export { default as Table } from "./components/Table";
-export { TableProps, TableColumn, TableCell } from "./components/Table";
-export { TableAlign, TableSortDirection } from "./components/tableColumns";
+export { TableProps } from "./components/Table";

package/out/ui/packages/tabs/components/Tabs.d.ts

@@ -1,13 +1,10 @@
 import { CustomizedProps } from "../../../../theme/index";
 import { ChoiceOption } from "../../radioGroup/index";
-import { TabsOrientation } from "./tabsOrientation";
 export interface TabsProps<T> {
     value: T;
     options: ChoiceOption<T>[];
     onChange: (value: T) => void;
     disabled?: boolean;
-    orientation?: TabsOrientation;
-    centered?: boolean;
 }
 declare function Tabs<T>(props: CustomizedProps<ScrollingFrame, TabsProps<T>>): JSX.Element;
 export default Tabs;

package/out/ui/packages/tabs/components/Tabs.luau

@@ -4,8 +4,6 @@ local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local stepChoice = TS.import(script, script.Parent.Parent.Parent, "select", "components", "stepChoice").stepChoice
-local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
-local tabsIsVertical = TS.import(script, script.Parent, "tabsOrientation").tabsIsVertical
 local useTabsStyles = TS.import(script, script.Parent, "Tabs.styles").default
 local function Tabs(props)
 	local _binding = props
@@ -13,17 +11,11 @@ local function Tabs(props)
 	local options = _binding.options
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
-	local orientation = _binding.orientation
-	local centered = _binding.centered
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useTabsStyles({
-		orientation = orientation,
-		centered = centered,
-	})
-	local vertical = tabsIsVertical(orientation)
+	local styles = useTabsStyles()
 	local choose = function(index)
 		local choice = options[index + 1]
 		if choice ~= nil and canActivate(disabled or choice.disabled) and choice.value ~= value then
@@ -44,29 +36,32 @@ local function Tabs(props)
 		end
 		-- ▲ ReadonlyArray.findIndex ▲
 		local index = _result
-		local back = if vertical then Enum.KeyCode.Up else Enum.KeyCode.Left
-		local forward = if vertical then Enum.KeyCode.Down else Enum.KeyCode.Right
-		if input.KeyCode == back then
+		if input.KeyCode == Enum.KeyCode.Left then
 			choose(stepChoice(options, index, -1))
-		elseif input.KeyCode == forward then
+		elseif input.KeyCode == Enum.KeyCode.Right then
 			choose(stepChoice(options, index, 1))
 		end
 	end
-	local _attributes = {
-		tag = "scrollingframe",
-	}
+	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Tabs"
 	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.list)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
@@ -110,7 +105,7 @@ local function Tabs(props)
 		_newValue[_k] = _callback(_v, _k - 1, options)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	return React.createElement(SxHost, _attributes, _exp, React.createElement(React.Fragment, nil, _newValue))
+	return React.createElement("scrollingframe", _attributes, _exp, _newValue)
 end
 local default = Tabs
 return {

package/out/ui/packages/tabs/components/Tabs.styles.d.ts

@@ -1,6 +1,2 @@
-import { TabsOrientation } from "./tabsOrientation";
-declare const useTabsStyles: (props: {
-    orientation?: TabsOrientation;
-    centered?: boolean;
-}) => import("../../../../theme/index").ClassNameMap<string>;
+declare const useTabsStyles: () => import("../../../../theme/index").ClassNameMap<string>;
 export default useTabsStyles;