@rbxts/uiblox 0.2.0-alpha.12 → 0.2.0-alpha.14

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

@@ -7,6 +7,7 @@ export interface TabsProps<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

@@ -13,12 +13,14 @@ local function Tabs(props)
 	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 choose = function(index)

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

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

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

@@ -6,6 +6,7 @@ local componentStyles = _theme.componentStyles
 local tabsIsVertical = TS.import(script, script.Parent, "tabsOrientation").tabsIsVertical
 local useTabsStyles = componentStyles("Tabs", function(theme, _param)
 	local orientation = _param.orientation
+	local centered = _param.centered
 	local vertical = tabsIsVertical(orientation)
 	local bar = theme.padding.calc(0.5)
 	return createStyles({
@@ -23,6 +24,7 @@ local useTabsStyles = componentStyles("Tabs", function(theme, _param)
 		},
 		list = {
 			FillDirection = if vertical then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
+			HorizontalAlignment = if centered == true and vertical ~= true then Enum.HorizontalAlignment.Center else Enum.HorizontalAlignment.Left,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		tab = {

package/out/ui/packages/toggleButton/components/ToggleButton.d.ts

@@ -1,9 +1,10 @@
-import { CustomizedProps } from "../../../../theme/index";
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
 import { ChoiceOption } from "../../radioGroup/index";
 export interface ToggleButtonProps {
     label: string;
     selected?: boolean;
     disabled?: boolean;
+    size?: ControlSize;
     onActivated?: () => void;
 }
 declare function ToggleButton(props: CustomizedProps<TextButton, ToggleButtonProps>): JSX.Element;
@@ -12,6 +13,7 @@ export interface ToggleButtonGroupProps<T> {
     options: ChoiceOption<T>[];
     onChange: (value: T) => void;
     disabled?: boolean;
+    size?: ControlSize;
 }
 export declare function ToggleButtonGroup<T>(props: CustomizedProps<Frame, ToggleButtonGroupProps<T>>): JSX.Element;
 export default ToggleButton;

package/out/ui/packages/toggleButton/components/ToggleButton.luau

@@ -8,6 +8,10 @@ local function ToggleButton(props)
 	local label = _binding.label
 	local selected = _binding.selected
 	local disabled = _binding.disabled
+	local size = _binding.size
+	if size == nil then
+		size = "medium"
+	end
 	local onActivated = _binding.onActivated
 	local className = _binding.className
 	local sx = _binding.sx
@@ -16,6 +20,7 @@ local function ToggleButton(props)
 	local styles = useToggleButtonStyles({
 		selected = selected,
 		disabled = disabled,
+		size = size,
 	})
 	local active = canActivate(disabled)
 	local _attributes = {}
@@ -67,11 +72,14 @@ local function ToggleButtonGroup(props)
 	local options = _binding.options
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
+	local size = _binding.size
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useToggleButtonStyles({})
+	local styles = useToggleButtonStyles({
+		size = size,
+	})
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
@@ -103,6 +111,7 @@ local function ToggleButtonGroup(props)
 			label = choice.label,
 			selected = choice.value == value,
 			disabled = disabled == true or choice.disabled == true,
+			size = size,
 			onActivated = function()
 				if choice.value ~= value then
 					onChange(choice.value)

package/out/ui/packages/toggleButton/components/ToggleButton.styles.d.ts

@@ -1,5 +1,7 @@
+import { ControlSize } from "../../../../theme/index";
 declare const useToggleButtonStyles: (props: {
     selected?: boolean;
     disabled?: boolean;
+    size?: ControlSize;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useToggleButtonStyles;

package/out/ui/packages/toggleButton/components/ToggleButton.styles.luau

@@ -12,10 +12,17 @@ local useToggleButtonStyles = componentStyles("ToggleButton", function(theme, _p
 	if disabled == nil then
 		disabled = false
 	end
+	local size = _param.size
+	if size == nil then
+		size = "medium"
+	end
+	local height = if size == "small" then theme.spacing.calc(3) elseif size == "large" then theme.spacing.calc(5) else theme.spacing.calc(4)
+	local textSize = if size == "small" then theme.typography.fontSizes.caption elseif size == "large" then theme.typography.fontSizes.h6 else theme.typography.fontSizes.body
+	local pad = theme.padding.calc(if size == "small" then 1 else 1.5)
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.X,
-			Size = UDim2.new(0, 0, 0, theme.spacing.calc(4)),
+			Size = UDim2.new(0, 0, 0, height),
 			BackgroundColor3 = if selected then theme.palette.action.selected else theme.palette.surface.input,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
@@ -23,11 +30,11 @@ local useToggleButtonStyles = componentStyles("ToggleButton", function(theme, _p
 			Selectable = not disabled,
 			TextColor3 = if disabled then theme.palette.text.disabled elseif selected then theme.palette.primary.main else theme.palette.text.primary,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
+			TextSize = textSize,
 		},
 		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
+			PaddingLeft = UDim.new(0, pad),
+			PaddingRight = UDim.new(0, pad),
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.2.0-alpha.12",
+	"version": "0.2.0-alpha.14",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.luau",
 	"packageManager": "pnpm@11.3.0",