@rbxts/uiblox 0.2.0-alpha.5 → 0.2.0-alpha.7

package/out/ui/packages/radioGroup/components/RadioGroup.styles.d.ts

@@ -1,6 +1,7 @@
 import { ControlSize } from "../../../../theme/index";
 export interface RadioGroupStyleProps {
     size?: ControlSize;
+    row?: boolean;
 }
 declare const useRadioGroupStyles: (props: RadioGroupStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
 export default useRadioGroupStyles;

package/out/ui/packages/radioGroup/components/RadioGroup.styles.luau

@@ -6,6 +6,7 @@ local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
 local useRadioGroupStyles = componentStyles("RadioGroup", function(theme, _param)
 	local size = _param.size
+	local row = _param.row
 	local metrics = controlMetrics(theme.density, size)
 	return createStyles({
 		root = {
@@ -15,8 +16,10 @@ local useRadioGroupStyles = componentStyles("RadioGroup", function(theme, _param
 			BorderSizePixel = 0,
 		},
 		list = {
+			FillDirection = if row == true then Enum.FillDirection.Horizontal else Enum.FillDirection.Vertical,
 			Padding = UDim.new(0, theme.padding.default),
 			SortOrder = Enum.SortOrder.LayoutOrder,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
 		},
 		option = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -25,7 +28,7 @@ local useRadioGroupStyles = componentStyles("RadioGroup", function(theme, _param
 			BorderSizePixel = 0,
 			Text = "",
 		},
-		row = {
+		optionRow = {
 			FillDirection = Enum.FillDirection.Horizontal,
 			Padding = UDim.new(0, theme.padding.default),
 			VerticalAlignment = Enum.VerticalAlignment.Center,

package/out/ui/packages/skeleton/components/Skeleton.styles.luau

@@ -3,16 +3,20 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local skeletonTone = TS.import(script, script.Parent, "skeletonTone").skeletonTone
 local useSkeletonStyles = componentStyles("Skeleton", function(theme)
+	local _binding = skeletonTone(theme)
+	local bone = _binding.bone
+	local shine = _binding.shine
 	return createStyles({
 		block = {
-			BackgroundColor3 = theme.palette.divider,
+			BackgroundColor3 = bone,
 			BackgroundTransparency = 0,
 			BorderSizePixel = 0,
 		},
 		highlight = {
-			Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, theme.palette.divider), ColorSequenceKeypoint.new(0.5, theme.palette.text.secondary), ColorSequenceKeypoint.new(1, theme.palette.divider) }),
-			Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 0.25), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 0.25) }),
+			Color = ColorSequence.new({ ColorSequenceKeypoint.new(0, bone), ColorSequenceKeypoint.new(0.5, shine), ColorSequenceKeypoint.new(1, bone) }),
+			Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 0.35), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(1, 0.35) }),
 		},
 		rounded = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),

package/out/ui/packages/skeleton/components/skeletonTone.d.ts

@@ -0,0 +1,20 @@
+interface SkeletonPalette {
+    surface: {
+        canvas: Color3;
+        elevated: Color3;
+    };
+    action: {
+        hover: Color3;
+    };
+    text: {
+        secondary: Color3;
+    };
+}
+/** Bone + shimmer peak from semantic tokens; shine always lifts off the bone vs canvas. */
+export declare function skeletonTone(theme: {
+    palette: SkeletonPalette;
+}): {
+    bone: Color3;
+    shine: Color3;
+};
+export {};

package/out/ui/packages/skeleton/components/skeletonTone.luau

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local relativeLuminance = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme", "utilites", "colorMath").relativeLuminance
+--* Bone + shimmer peak from semantic tokens; shine always lifts off the bone vs canvas. 
+local function skeletonTone(theme)
+	local lightCanvas = relativeLuminance(theme.palette.surface.canvas) > 0.5
+	return {
+		bone = theme.palette.action.hover,
+		shine = if lightCanvas then theme.palette.surface.elevated else theme.palette.text.secondary,
+	}
+end
+return {
+	skeletonTone = skeletonTone,
+}

package/out/ui/packages/splitPane/components/splitLook.d.ts

@@ -1,5 +1,5 @@
 export type SplitPointer = "rest" | "hover" | "press";
 export declare function splitPointer(hovering: boolean, pressed: boolean): SplitPointer;
-export declare function splitRuleTransparency(pointer: SplitPointer, disabled?: boolean): 0.25 | 0.35 | 0.7 | 0.55;
+export declare function splitRuleTransparency(pointer: SplitPointer, disabled?: boolean): 0.25 | 0.7 | 0.55 | 0.35;
 export declare function splitMarkTransparency(pointer: SplitPointer, disabled?: boolean): 0 | 0.55 | 0.1;
 export declare function splitHitTransparency(pointer: SplitPointer, disabled?: boolean): 1 | 0.9 | 0.94;

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

@@ -26,5 +26,6 @@ export interface StateCapture {
     indeterminate?: boolean;
     size?: StateSize;
     density?: StateDensity;
+    row?: boolean;
 }
 export declare const stateMatrix: StateCapture[];

package/out/ui/packages/stateMatrix.luau

@@ -713,29 +713,37 @@ local function togglesRows()
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("RadioGroup", "size-small", {
+	local _array_33 = pair("RadioGroup", "row", {
 		value = "Continue",
 		options = { "Continue", "Other" },
-		size = "small",
+		row = true,
 	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("RadioGroup", "size-large", {
+	local _array_34 = pair("RadioGroup", "size-small", {
 		value = "Continue",
 		options = { "Continue", "Other" },
-		size = "large",
+		size = "small",
 	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("RadioGroup", "density-compact", {
+	local _array_35 = pair("RadioGroup", "size-large", {
+		value = "Continue",
+		options = { "Continue", "Other" },
+		size = "large",
+	})
+	local _Length_34 = #_array_35
+	table.move(_array_35, 1, _Length_34, _length + 1, _array)
+	_length += _Length_34
+	local _array_36 = pair("RadioGroup", "density-compact", {
 		value = "Continue",
 		options = { "Continue", "Other" },
 		density = "compact",
 		size = "small",
 	})
-	table.move(_array_35, 1, #_array_35, _length + 1, _array)
+	table.move(_array_36, 1, #_array_36, _length + 1, _array)
 	return _array
 end
 local function compositeRows()
@@ -907,123 +915,131 @@ local function compositeRows()
 	local _Length_19 = #_array_20
 	table.move(_array_20, 1, _Length_19, _length + 1, _array)
 	_length += _Length_19
-	local _array_21 = pair("Tabs", "disabled", {
+	local _array_21 = pair("Tabs", "vertical", {
 		value = "Continue",
 		options = { "Continue", "Docs", "Actions" },
-		disabled = true,
+		variant = "vertical",
 	})
 	local _Length_20 = #_array_21
 	table.move(_array_21, 1, _Length_20, _length + 1, _array)
 	_length += _Length_20
-	local _array_22 = pair("Tabs", "hover", {
+	local _array_22 = pair("Tabs", "disabled", {
 		value = "Continue",
 		options = { "Continue", "Docs", "Actions" },
-		pointer = "hover",
+		disabled = true,
 	})
 	local _Length_21 = #_array_22
 	table.move(_array_22, 1, _Length_21, _length + 1, _array)
 	_length += _Length_21
-	local _array_23 = pair("Tabs", "long", {
-		value = LONG,
-		options = { LONG, "Docs", "Actions", "Source", "Settings" },
-		text = LONG,
-		width = NARROW,
+	local _array_23 = pair("Tabs", "hover", {
+		value = "Continue",
+		options = { "Continue", "Docs", "Actions" },
+		pointer = "hover",
 	})
 	local _Length_22 = #_array_23
 	table.move(_array_23, 1, _Length_22, _length + 1, _array)
 	_length += _Length_22
-	local _array_24 = pair("SplitPane", "default", {
-		value = 160,
+	local _array_24 = pair("Tabs", "long", {
+		value = LONG,
+		options = { LONG, "Docs", "Actions", "Source", "Settings" },
+		text = LONG,
+		width = NARROW,
 	})
 	local _Length_23 = #_array_24
 	table.move(_array_24, 1, _Length_23, _length + 1, _array)
 	_length += _Length_23
-	local _array_25 = pair("SplitPane", "disabled", {
+	local _array_25 = pair("SplitPane", "default", {
 		value = 160,
-		disabled = true,
 	})
 	local _Length_24 = #_array_25
 	table.move(_array_25, 1, _Length_24, _length + 1, _array)
 	_length += _Length_24
-	local _array_26 = pair("SplitPane", "hover", {
+	local _array_26 = pair("SplitPane", "disabled", {
 		value = 160,
-		pointer = "hover",
+		disabled = true,
 	})
 	local _Length_25 = #_array_26
 	table.move(_array_26, 1, _Length_25, _length + 1, _array)
 	_length += _Length_25
-	local _array_27 = pair("SplitPane", "drag", {
+	local _array_27 = pair("SplitPane", "hover", {
 		value = 160,
-		pointer = "press",
+		pointer = "hover",
 	})
 	local _Length_26 = #_array_27
 	table.move(_array_27, 1, _Length_26, _length + 1, _array)
 	_length += _Length_26
-	local _array_28 = pair("SplitPane", "long", {
-		value = 80,
-		text = LONG,
-		width = NARROW,
+	local _array_28 = pair("SplitPane", "drag", {
+		value = 160,
+		pointer = "press",
 	})
 	local _Length_27 = #_array_28
 	table.move(_array_28, 1, _Length_27, _length + 1, _array)
 	_length += _Length_27
-	local _array_29 = pair("Tooltip", "hidden")
+	local _array_29 = pair("SplitPane", "long", {
+		value = 80,
+		text = LONG,
+		width = NARROW,
+	})
 	local _Length_28 = #_array_29
 	table.move(_array_29, 1, _Length_28, _length + 1, _array)
 	_length += _Length_28
-	local _array_30 = pair("Tooltip", "shown", {
-		pointer = "hover",
-	})
+	local _array_30 = pair("Tooltip", "hidden")
 	local _Length_29 = #_array_30
 	table.move(_array_30, 1, _Length_29, _length + 1, _array)
 	_length += _Length_29
-	local _array_31 = pair("Tooltip", "long", {
-		text = LONG,
-		width = NARROW,
+	local _array_31 = pair("Tooltip", "shown", {
 		pointer = "hover",
 	})
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("TreeView", "default", {
-		selected = "Fixture/Styled",
+	local _array_32 = pair("Tooltip", "long", {
+		text = LONG,
+		width = NARROW,
+		pointer = "hover",
 	})
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("TreeView", "hover", {
+	local _array_33 = pair("TreeView", "default", {
 		selected = "Fixture/Styled",
-		pointer = "hover",
 	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("TreeView", "filter", {
+	local _array_34 = pair("TreeView", "hover", {
 		selected = "Fixture/Styled",
-		filter = "sty",
+		pointer = "hover",
 	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("TreeView", "long", {
-		selected = `Fixture/{LONG}`,
-		text = LONG,
-		width = NARROW,
+	local _array_35 = pair("TreeView", "filter", {
+		selected = "Fixture/Styled",
+		filter = "sty",
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("IconButton", "loading", {
-		loading = true,
+	local _array_36 = pair("TreeView", "long", {
+		selected = `Fixture/{LONG}`,
+		text = LONG,
+		width = NARROW,
 	})
 	local _Length_35 = #_array_36
 	table.move(_array_36, 1, _Length_35, _length + 1, _array)
 	_length += _Length_35
-	local _array_37 = pair("IconButton", "loading-disabled", {
+	local _array_37 = pair("IconButton", "loading", {
+		loading = true,
+	})
+	local _Length_36 = #_array_37
+	table.move(_array_37, 1, _Length_36, _length + 1, _array)
+	_length += _Length_36
+	local _array_38 = pair("IconButton", "loading-disabled", {
 		loading = true,
 		disabled = true,
 	})
-	table.move(_array_37, 1, #_array_37, _length + 1, _array)
+	table.move(_array_38, 1, #_array_38, _length + 1, _array)
 	return _array
 end
 local function surfacesRows()
@@ -1224,34 +1240,46 @@ local function surfacesRows()
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("Chip", "selected", {
-		value = true,
+	local _array_32 = pair("Chip", "size-small", {
+		size = "small",
 	})
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("Chip", "disabled", {
-		disabled = true,
+	local _array_33 = pair("Chip", "size-large", {
+		size = "large",
 	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("Chip", "deletable", {
-		text = "Tag",
+	local _array_34 = pair("Chip", "selected", {
+		value = true,
 	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("Badge", "count", {
-		value = 3,
+	local _array_35 = pair("Chip", "disabled", {
+		disabled = true,
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("Badge", "max", {
+	local _array_36 = pair("Chip", "deletable", {
+		text = "Tag",
+	})
+	local _Length_35 = #_array_36
+	table.move(_array_36, 1, _Length_35, _length + 1, _array)
+	_length += _Length_35
+	local _array_37 = pair("Badge", "count", {
+		value = 3,
+	})
+	local _Length_36 = #_array_37
+	table.move(_array_37, 1, _Length_36, _length + 1, _array)
+	_length += _Length_36
+	local _array_38 = pair("Badge", "max", {
 		value = 100,
 	})
-	table.move(_array_36, 1, #_array_36, _length + 1, _array)
+	table.move(_array_38, 1, #_array_38, _length + 1, _array)
 	return _array
 end
 local function chromeRows()
@@ -1638,75 +1666,153 @@ local function miscRows()
 	local _Length_20 = #_array_21
 	table.move(_array_21, 1, _Length_20, _length + 1, _array)
 	_length += _Length_20
-	local _array_22 = pair("SpeedDial", "closed", {
-		open = false,
-	})
+	local _array_22 = pair("Box", "plain")
 	local _Length_21 = #_array_22
 	table.move(_array_22, 1, _Length_21, _length + 1, _array)
 	_length += _Length_21
-	local _array_23 = pair("SpeedDial", "open", {
-		open = true,
+	local _array_23 = pair("Box", "padded", {
+		size = "medium",
 	})
 	local _Length_22 = #_array_23
 	table.move(_array_23, 1, _Length_22, _length + 1, _array)
 	_length += _Length_22
-	local _array_24 = pair("SpeedDial", "disabled", {
-		open = false,
-		disabled = true,
+	local _array_24 = pair("Box", "paper", {
+		variant = "paper",
 	})
 	local _Length_23 = #_array_24
 	table.move(_array_24, 1, _Length_23, _length + 1, _array)
 	_length += _Length_23
-	local _array_25 = pair("FormLabel", "default", {
-		text = "Email",
+	local _array_25 = pair("Container", "default", {
+		variant = "lg",
 	})
 	local _Length_24 = #_array_25
 	table.move(_array_25, 1, _Length_24, _length + 1, _array)
 	_length += _Length_24
-	local _array_26 = pair("FormLabel", "required", {
-		text = "Email",
-		value = true,
+	local _array_26 = pair("Container", "sm", {
+		variant = "sm",
 	})
 	local _Length_25 = #_array_26
 	table.move(_array_26, 1, _Length_25, _length + 1, _array)
 	_length += _Length_25
-	local _array_27 = pair("FormLabel", "error", {
-		text = "Email",
-		hasError = true,
+	local _array_27 = pair("Container", "fluid", {
+		variant = "false",
 	})
 	local _Length_26 = #_array_27
 	table.move(_array_27, 1, _Length_26, _length + 1, _array)
 	_length += _Length_26
-	local _array_28 = pair("FormHelperText", "default", {
-		text = "We never share this",
-	})
+	local _array_28 = pair("Backdrop", "default")
 	local _Length_27 = #_array_28
 	table.move(_array_28, 1, _Length_27, _length + 1, _array)
 	_length += _Length_27
-	local _array_29 = pair("FormHelperText", "error", {
-		text = "Required",
-		hasError = true,
+	local _array_29 = pair("Backdrop", "invisible", {
+		variant = "invisible",
 	})
 	local _Length_28 = #_array_29
 	table.move(_array_29, 1, _Length_28, _length + 1, _array)
 	_length += _Length_28
-	local _array_30 = pair("Menu", "closed", {
+	local _array_30 = pair("Backdrop", "closed", {
 		open = false,
 	})
 	local _Length_29 = #_array_30
 	table.move(_array_30, 1, _Length_29, _length + 1, _array)
 	_length += _Length_29
-	local _array_31 = pair("Menu", "open", {
-		open = true,
+	local _array_31 = pair("Divider", "horizontal", {
+		variant = "horizontal",
 	})
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("Menu", "empty", {
+	local _array_32 = pair("Divider", "vertical", {
+		variant = "vertical",
+	})
+	local _Length_31 = #_array_32
+	table.move(_array_32, 1, _Length_31, _length + 1, _array)
+	_length += _Length_31
+	local _array_33 = pair("ImageList", "default")
+	local _Length_32 = #_array_33
+	table.move(_array_33, 1, _Length_32, _length + 1, _array)
+	_length += _Length_32
+	local _array_34 = pair("ImageList", "dense", {
+		size = "small",
+	})
+	local _Length_33 = #_array_34
+	table.move(_array_34, 1, _Length_33, _length + 1, _array)
+	_length += _Length_33
+	local _array_35 = pair("ImageList", "wide", {
+		size = "large",
+	})
+	local _Length_34 = #_array_35
+	table.move(_array_35, 1, _Length_34, _length + 1, _array)
+	_length += _Length_34
+	local _array_36 = pair("SpeedDial", "closed", {
+		open = false,
+	})
+	local _Length_35 = #_array_36
+	table.move(_array_36, 1, _Length_35, _length + 1, _array)
+	_length += _Length_35
+	local _array_37 = pair("SpeedDial", "open", {
+		open = true,
+	})
+	local _Length_36 = #_array_37
+	table.move(_array_37, 1, _Length_36, _length + 1, _array)
+	_length += _Length_36
+	local _array_38 = pair("SpeedDial", "disabled", {
+		open = false,
+		disabled = true,
+	})
+	local _Length_37 = #_array_38
+	table.move(_array_38, 1, _Length_37, _length + 1, _array)
+	_length += _Length_37
+	local _array_39 = pair("FormLabel", "default", {
+		text = "Email",
+	})
+	local _Length_38 = #_array_39
+	table.move(_array_39, 1, _Length_38, _length + 1, _array)
+	_length += _Length_38
+	local _array_40 = pair("FormLabel", "required", {
+		text = "Email",
+		value = true,
+	})
+	local _Length_39 = #_array_40
+	table.move(_array_40, 1, _Length_39, _length + 1, _array)
+	_length += _Length_39
+	local _array_41 = pair("FormLabel", "error", {
+		text = "Email",
+		hasError = true,
+	})
+	local _Length_40 = #_array_41
+	table.move(_array_41, 1, _Length_40, _length + 1, _array)
+	_length += _Length_40
+	local _array_42 = pair("FormHelperText", "default", {
+		text = "We never share this",
+	})
+	local _Length_41 = #_array_42
+	table.move(_array_42, 1, _Length_41, _length + 1, _array)
+	_length += _Length_41
+	local _array_43 = pair("FormHelperText", "error", {
+		text = "Required",
+		hasError = true,
+	})
+	local _Length_42 = #_array_43
+	table.move(_array_43, 1, _Length_42, _length + 1, _array)
+	_length += _Length_42
+	local _array_44 = pair("Menu", "closed", {
+		open = false,
+	})
+	local _Length_43 = #_array_44
+	table.move(_array_44, 1, _Length_43, _length + 1, _array)
+	_length += _Length_43
+	local _array_45 = pair("Menu", "open", {
+		open = true,
+	})
+	local _Length_44 = #_array_45
+	table.move(_array_45, 1, _Length_44, _length + 1, _array)
+	_length += _Length_44
+	local _array_46 = pair("Menu", "empty", {
 		open = true,
 		options = {},
 	})
-	table.move(_array_32, 1, #_array_32, _length + 1, _array)
+	table.move(_array_46, 1, #_array_46, _length + 1, _array)
 	return _array
 end
 local function concatRows(...)

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.35 | 0.65 | 0.55 | 0.15 | 0.08;
+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 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/tabs/components/Tabs.d.ts

@@ -1,10 +1,12 @@
 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;
 }
 declare function Tabs<T>(props: CustomizedProps<ScrollingFrame, TabsProps<T>>): JSX.Element;
 export default Tabs;

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

@@ -4,6 +4,7 @@ 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 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
@@ -11,11 +12,15 @@ local function Tabs(props)
 	local options = _binding.options
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
+	local orientation = _binding.orientation
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useTabsStyles()
+	local styles = useTabsStyles({
+		orientation = orientation,
+	})
+	local vertical = tabsIsVertical(orientation)
 	local choose = function(index)
 		local choice = options[index + 1]
 		if choice ~= nil and canActivate(disabled or choice.disabled) and choice.value ~= value then
@@ -36,9 +41,11 @@ local function Tabs(props)
 		end
 		-- ▲ ReadonlyArray.findIndex ▲
 		local index = _result
-		if input.KeyCode == Enum.KeyCode.Left then
+		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
 			choose(stepChoice(options, index, -1))
-		elseif input.KeyCode == Enum.KeyCode.Right then
+		elseif input.KeyCode == forward then
 			choose(stepChoice(options, index, 1))
 		end
 	end

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

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