@rbxts/uiblox 0.2.0-alpha.17 → 0.2.0-alpha.19

package/out/ui/packages/chip/components/Chip.d.ts

@@ -1,10 +1,12 @@
 import { ControlSize, CustomizedProps } from "../../../../theme/index";
+import { ChipColor } from "./Chip.styles";
 export interface ChipProps {
     label: string;
     selected?: boolean;
     disabled?: boolean;
     size?: ControlSize;
     variant?: "filled" | "outlined";
+    color?: ChipColor;
     onActivated?: () => void;
     onDelete?: () => void;
 }

package/out/ui/packages/chip/components/Chip.luau

@@ -13,6 +13,10 @@ local function Chip(props)
 	if variant == nil then
 		variant = "filled"
 	end
+	local color = _binding.color
+	if color == nil then
+		color = "default"
+	end
 	local onActivated = _binding.onActivated
 	local onDelete = _binding.onDelete
 	local className = _binding.className
@@ -26,6 +30,7 @@ local function Chip(props)
 		deletable = deletable,
 		size = size,
 		variant = variant,
+		color = color,
 	})
 	local _attributes = {}
 	local _condition = id

package/out/ui/packages/chip/components/Chip.styles.d.ts

@@ -1,9 +1,11 @@
 import { ControlSize } from "../../../../theme/index";
+export type ChipColor = "default" | "primary";
 declare const useChipStyles: (props: {
     selected?: boolean;
     disabled?: boolean;
     deletable?: boolean;
     size?: ControlSize;
     variant?: "filled" | "outlined";
+    color?: ChipColor;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useChipStyles;

package/out/ui/packages/chip/components/Chip.styles.luau

@@ -22,21 +22,27 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 	if variant == nil then
 		variant = "filled"
 	end
+	local color = _param.color
+	if color == nil then
+		color = "default"
+	end
 	local metrics = controlMetrics(theme.density, size)
 	local padY = if size == "small" then 0.25 elseif size == "large" then 0.75 else 0.5
 	local padX = if size == "small" then 1 elseif size == "large" then 2 else 1.5
 	local deletePx = metrics.icon
+	local primary = color == "primary"
+	local ink = if disabled then theme.palette.text.disabled elseif primary then if variant == "outlined" then theme.palette.primary.main else theme.palette.primary.on else theme.palette.text.primary
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
 			Size = UDim2.fromScale(0, 0),
-			BackgroundColor3 = if selected then theme.palette.action.selected else theme.palette.surface.input,
+			BackgroundColor3 = if primary and variant ~= "outlined" then theme.palette.primary.main elseif selected then theme.palette.action.selected else theme.palette.surface.input,
 			BackgroundTransparency = if variant == "outlined" and selected ~= true then 1 else 0,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			Active = not disabled,
 			Selectable = not disabled,
-			TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.primary,
+			TextColor3 = ink,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = metrics.font,
 		},
@@ -50,9 +56,9 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			CornerRadius = UDim.new(theme.shape.pillScale, 0),
 		},
 		stroke = {
-			Color = theme.palette.border,
+			Color = if primary then theme.palette.primary.main else theme.palette.border,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-			Transparency = if variant == "outlined" then (if disabled then 0.5 else 0) elseif selected then 1 else 0,
+			Transparency = if variant == "outlined" then (if disabled then 0.5 else 0) elseif primary or selected then 1 else 0,
 		},
 		row = {
 			FillDirection = Enum.FillDirection.Horizontal,
@@ -65,7 +71,7 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			Size = UDim2.fromScale(0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
-			TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.primary,
+			TextColor3 = ink,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = metrics.font,
 			LayoutOrder = 1,
@@ -75,7 +81,7 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
-			ImageColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.secondary,
+			ImageColor3 = if disabled then theme.palette.text.disabled elseif primary and variant ~= "outlined" then theme.palette.primary.on else theme.palette.text.secondary,
 			LayoutOrder = 2,
 		},
 	})

package/out/ui/packages/divider/components/Divider.d.ts

@@ -9,6 +9,7 @@ export interface DividerProps {
     transparency?: number;
     weight?: number;
     anchorPoint?: Vector2;
+    text?: string;
 }
 declare function Divider<T extends DefaultDividerComponent>(props: CustomizedProps<T, DividerProps>): JSX.Element;
 export default Divider;

package/out/ui/packages/divider/components/Divider.luau

@@ -1,15 +1,63 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
+local dividerLabel = TS.import(script, script.Parent, "dividerLabel").dividerLabel
 local useDividerStyles = TS.import(script, script.Parent, "Divider.styles").default
 local function Divider(props)
 	local _binding = props
+	local text = _binding.text
+	local orientation = _binding.orientation
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local _binding_1 = useDividerStyles(props)
 	local root = _binding_1.root
+	local shell = _binding_1.shell
+	local line = _binding_1.line
+	local caption = _binding_1.caption
+	local captionPad = _binding_1.captionPad
+	local label = dividerLabel(text)
+	if label ~= nil and orientation ~= Orientations.Vertical then
+		local _attributes = {}
+		local _condition = id
+		if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+			_condition = "Divider"
+		end
+		_attributes.key = _condition
+		_attributes.ref = ref
+		for _k, _v in shell do
+			_attributes[_k] = _v
+		end
+		if className ~= 0 and className == className and className ~= "" and className then
+			for _k, _v in className do
+				_attributes[_k] = _v
+			end
+		end
+		if sx ~= 0 and sx == sx and sx ~= "" and sx then
+			for _k, _v in sx do
+				_attributes[_k] = _v
+			end
+		end
+		local _attributes_1 = {
+			key = "Line",
+		}
+		for _k, _v in line do
+			_attributes_1[_k] = _v
+		end
+		local _exp = React.createElement("frame", _attributes_1)
+		local _attributes_2 = {
+			key = "Label",
+		}
+		for _k, _v in caption do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = label
+		local _attributes_3 = table.clone(captionPad)
+		setmetatable(_attributes_3, nil)
+		return React.createElement("frame", _attributes, _exp, React.createElement("textlabel", _attributes_2, React.createElement("uipadding", _attributes_3)))
+	end
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then

package/out/ui/packages/divider/components/Divider.styles.luau

@@ -32,6 +32,35 @@ local useDividerStyles = componentStyles("Divider", function(theme, props)
 		anchorPoint = Vector2.new(0, 0)
 	end
 	return createStyles({
+		shell = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		line = {
+			Size = UDim2.new(1, 0, 0, weight),
+			Position = UDim2.new(0, 0, 0.5, 0),
+			AnchorPoint = Vector2.new(0, 0.5),
+			BackgroundColor3 = color,
+			BackgroundTransparency = transparency,
+			BorderSizePixel = 0,
+		},
+		caption = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.new(0.5, 0, 0.5, 0),
+			BackgroundColor3 = theme.palette.surface.canvas,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+			TextColor3 = theme.palette.text.secondary,
+			ZIndex = 2,
+		},
+		captionPad = {
+			PaddingLeft = UDim.new(0, theme.padding.calc(1)),
+			PaddingRight = UDim.new(0, theme.padding.calc(1)),
+		},
 		root = {
 			Position = position or UDim2.new(0, 0, 0, 0),
 			Size = UDim2.new(if orientation == Orientations.Horizontal then 1 else 0, if orientation == Orientations.Horizontal then -padding * 2 else weight, if orientation == Orientations.Vertical then 1 else 0, if orientation == Orientations.Vertical then -padding * 2 else weight),

package/out/ui/packages/divider/components/dividerLabel.d.ts

@@ -0,0 +1 @@
+export declare function dividerLabel(text?: string): string | undefined;

package/out/ui/packages/divider/components/dividerLabel.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local function dividerLabel(text)
+	if text == nil or #text == 0 then
+		return nil
+	end
+	return text
+end
+return {
+	dividerLabel = dividerLabel,
+}

package/out/ui/packages/menu/components/Menu.d.ts

@@ -13,6 +13,7 @@ export interface MenuProps {
     emptyText?: string;
     empty?: React.Element;
     dense?: boolean;
+    selected?: string;
 }
 declare function Menu(props: MenuProps): JSX.Element | undefined;
 export default Menu;

package/out/ui/packages/menu/components/Menu.luau

@@ -17,6 +17,7 @@ local function Menu(props)
 	local emptyText = _binding.emptyText
 	local empty = _binding.empty
 	local dense = _binding.dense
+	local selected = _binding.selected
 	local styles = useMenuStyles()
 	if not open then
 		return nil
@@ -62,6 +63,7 @@ local function Menu(props)
 				text = item.text,
 				disabled = item.disabled,
 				dense = dense,
+				selected = item.id == selected,
 				onActivated = function()
 					if item.disabled == true then
 						return nil

package/out/ui/packages/stateMatrix.luau

@@ -569,188 +569,195 @@ local function togglesRows()
 	local _Length_10 = #_array_11
 	table.move(_array_11, 1, _Length_10, _length + 1, _array)
 	_length += _Length_10
-	local _array_12 = pair("Switch", "disabled", {
-		disabled = true,
+	local _array_12 = pair("Switch", "accent", {
+		value = true,
+		variant = "accent",
 	})
 	local _Length_11 = #_array_12
 	table.move(_array_12, 1, _Length_11, _length + 1, _array)
 	_length += _Length_11
-	local _array_13 = pair("Switch", "disabled-on", {
-		value = true,
+	local _array_13 = pair("Switch", "disabled", {
 		disabled = true,
 	})
 	local _Length_12 = #_array_13
 	table.move(_array_13, 1, _Length_12, _length + 1, _array)
 	_length += _Length_12
-	local _array_14 = pair("Switch", "hover", {
-		pointer = "hover",
+	local _array_14 = pair("Switch", "disabled-on", {
+		value = true,
+		disabled = true,
 	})
 	local _Length_13 = #_array_14
 	table.move(_array_14, 1, _Length_13, _length + 1, _array)
 	_length += _Length_13
-	local _array_15 = pair("Switch", "press", {
-		pointer = "press",
+	local _array_15 = pair("Switch", "hover", {
+		pointer = "hover",
 	})
 	local _Length_14 = #_array_15
 	table.move(_array_15, 1, _Length_14, _length + 1, _array)
 	_length += _Length_14
-	local _array_16 = pair("Switch", "focus", {
-		pointer = "focus",
+	local _array_16 = pair("Switch", "press", {
+		pointer = "press",
 	})
 	local _Length_15 = #_array_16
 	table.move(_array_16, 1, _Length_15, _length + 1, _array)
 	_length += _Length_15
-	local _array_17 = pair("Switch", "on-hover", {
-		value = true,
-		pointer = "hover",
+	local _array_17 = pair("Switch", "focus", {
+		pointer = "focus",
 	})
 	local _Length_16 = #_array_17
 	table.move(_array_17, 1, _Length_16, _length + 1, _array)
 	_length += _Length_16
-	local _array_18 = pair("Switch", "on-press", {
+	local _array_18 = pair("Switch", "on-hover", {
 		value = true,
-		pointer = "press",
+		pointer = "hover",
 	})
 	local _Length_17 = #_array_18
 	table.move(_array_18, 1, _Length_17, _length + 1, _array)
 	_length += _Length_17
-	local _array_19 = pair("Switch", "on-focus", {
+	local _array_19 = pair("Switch", "on-press", {
 		value = true,
-		pointer = "focus",
+		pointer = "press",
 	})
 	local _Length_18 = #_array_19
 	table.move(_array_19, 1, _Length_18, _length + 1, _array)
 	_length += _Length_18
-	local _array_20 = pair("Switch", "reduced", {
+	local _array_20 = pair("Switch", "on-focus", {
 		value = true,
-		reducedMotion = true,
+		pointer = "focus",
 	})
 	local _Length_19 = #_array_20
 	table.move(_array_20, 1, _Length_19, _length + 1, _array)
 	_length += _Length_19
-	local _array_21 = pair("Switch", "long", {
-		text = LONG,
-		width = NARROW,
+	local _array_21 = pair("Switch", "reduced", {
+		value = true,
+		reducedMotion = true,
 	})
 	local _Length_20 = #_array_21
 	table.move(_array_21, 1, _Length_20, _length + 1, _array)
 	_length += _Length_20
-	local _array_22 = pair("Slider", "default", {
-		value = 0.5,
+	local _array_22 = pair("Switch", "long", {
+		text = LONG,
+		width = NARROW,
 	})
 	local _Length_21 = #_array_22
 	table.move(_array_22, 1, _Length_21, _length + 1, _array)
 	_length += _Length_21
-	local _array_23 = pair("Slider", "size-small", {
+	local _array_23 = pair("Slider", "default", {
 		value = 0.5,
-		size = "small",
 	})
 	local _Length_22 = #_array_23
 	table.move(_array_23, 1, _Length_22, _length + 1, _array)
 	_length += _Length_22
-	local _array_24 = pair("Slider", "size-medium", {
+	local _array_24 = pair("Slider", "size-small", {
 		value = 0.5,
-		size = "medium",
+		size = "small",
 	})
 	local _Length_23 = #_array_24
 	table.move(_array_24, 1, _Length_23, _length + 1, _array)
 	_length += _Length_23
-	local _array_25 = pair("Slider", "size-large", {
+	local _array_25 = pair("Slider", "size-medium", {
 		value = 0.5,
-		size = "large",
+		size = "medium",
 	})
 	local _Length_24 = #_array_25
 	table.move(_array_25, 1, _Length_24, _length + 1, _array)
 	_length += _Length_24
-	local _array_26 = pair("Slider", "density-compact", {
+	local _array_26 = pair("Slider", "size-large", {
 		value = 0.5,
-		density = "compact",
-		size = "small",
+		size = "large",
 	})
 	local _Length_25 = #_array_26
 	table.move(_array_26, 1, _Length_25, _length + 1, _array)
 	_length += _Length_25
-	local _array_27 = pair("Slider", "disabled", {
+	local _array_27 = pair("Slider", "density-compact", {
 		value = 0.5,
-		disabled = true,
+		density = "compact",
+		size = "small",
 	})
 	local _Length_26 = #_array_27
 	table.move(_array_27, 1, _Length_26, _length + 1, _array)
 	_length += _Length_26
-	local _array_28 = pair("Slider", "marks", {
+	local _array_28 = pair("Slider", "disabled", {
 		value = 0.5,
-		marks = true,
+		disabled = true,
 	})
 	local _Length_27 = #_array_28
 	table.move(_array_28, 1, _Length_27, _length + 1, _array)
 	_length += _Length_27
-	local _array_29 = pair("Slider", "hover", {
+	local _array_29 = pair("Slider", "marks", {
 		value = 0.5,
-		pointer = "hover",
+		marks = true,
 	})
 	local _Length_28 = #_array_29
 	table.move(_array_29, 1, _Length_28, _length + 1, _array)
 	_length += _Length_28
-	local _array_30 = pair("Slider", "press", {
+	local _array_30 = pair("Slider", "hover", {
 		value = 0.5,
-		pointer = "press",
+		pointer = "hover",
 	})
 	local _Length_29 = #_array_30
 	table.move(_array_30, 1, _Length_29, _length + 1, _array)
 	_length += _Length_29
-	local _array_31 = pair("Slider", "focus", {
+	local _array_31 = pair("Slider", "press", {
 		value = 0.5,
-		pointer = "focus",
+		pointer = "press",
 	})
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("Slider", "long", {
-		value = 0.25,
-		text = LONG,
-		width = NARROW,
+	local _array_32 = pair("Slider", "focus", {
+		value = 0.5,
+		pointer = "focus",
 	})
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("RadioGroup", "default", {
-		value = "Continue",
-		options = { "Continue", "Other" },
+	local _array_33 = pair("Slider", "long", {
+		value = 0.25,
+		text = LONG,
+		width = NARROW,
 	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("RadioGroup", "row", {
+	local _array_34 = pair("RadioGroup", "default", {
 		value = "Continue",
 		options = { "Continue", "Other" },
-		row = true,
 	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("RadioGroup", "size-small", {
+	local _array_35 = pair("RadioGroup", "row", {
 		value = "Continue",
 		options = { "Continue", "Other" },
-		size = "small",
+		row = true,
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("RadioGroup", "size-large", {
+	local _array_36 = pair("RadioGroup", "size-small", {
 		value = "Continue",
 		options = { "Continue", "Other" },
-		size = "large",
+		size = "small",
 	})
 	local _Length_35 = #_array_36
 	table.move(_array_36, 1, _Length_35, _length + 1, _array)
 	_length += _Length_35
-	local _array_37 = pair("RadioGroup", "density-compact", {
+	local _array_37 = pair("RadioGroup", "size-large", {
+		value = "Continue",
+		options = { "Continue", "Other" },
+		size = "large",
+	})
+	local _Length_36 = #_array_37
+	table.move(_array_37, 1, _Length_36, _length + 1, _array)
+	_length += _Length_36
+	local _array_38 = pair("RadioGroup", "density-compact", {
 		value = "Continue",
 		options = { "Continue", "Other" },
 		density = "compact",
 		size = "small",
 	})
-	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 compositeRows()
@@ -1315,16 +1322,22 @@ local function surfacesRows()
 	local _Length_40 = #_array_41
 	table.move(_array_41, 1, _Length_40, _length + 1, _array)
 	_length += _Length_40
-	local _array_42 = pair("Badge", "count", {
-		value = 3,
+	local _array_42 = pair("Chip", "primary", {
+		variant = "primary",
 	})
 	local _Length_41 = #_array_42
 	table.move(_array_42, 1, _Length_41, _length + 1, _array)
 	_length += _Length_41
-	local _array_43 = pair("Badge", "max", {
+	local _array_43 = pair("Badge", "count", {
+		value = 3,
+	})
+	local _Length_42 = #_array_43
+	table.move(_array_43, 1, _Length_42, _length + 1, _array)
+	_length += _Length_42
+	local _array_44 = pair("Badge", "max", {
 		value = 100,
 	})
-	table.move(_array_43, 1, #_array_43, _length + 1, _array)
+	table.move(_array_44, 1, #_array_44, _length + 1, _array)
 	return _array
 end
 local function chromeRows()
@@ -1906,111 +1919,124 @@ local function miscRows()
 	local _Length_36 = #_array_37
 	table.move(_array_37, 1, _Length_36, _length + 1, _array)
 	_length += _Length_36
-	local _array_38 = pair("ImageList", "default")
+	local _array_38 = pair("Divider", "label", {
+		text = "Or",
+	})
 	local _Length_37 = #_array_38
 	table.move(_array_38, 1, _Length_37, _length + 1, _array)
 	_length += _Length_37
-	local _array_39 = pair("ImageList", "dense", {
-		size = "small",
-	})
+	local _array_39 = pair("ImageList", "default")
 	local _Length_38 = #_array_39
 	table.move(_array_39, 1, _Length_38, _length + 1, _array)
 	_length += _Length_38
-	local _array_40 = pair("ImageList", "wide", {
-		size = "large",
+	local _array_40 = pair("ImageList", "dense", {
+		size = "small",
 	})
 	local _Length_39 = #_array_40
 	table.move(_array_40, 1, _Length_39, _length + 1, _array)
 	_length += _Length_39
-	local _array_41 = pair("ImageList", "titled", {
-		text = "Cove",
+	local _array_41 = pair("ImageList", "wide", {
+		size = "large",
 	})
 	local _Length_40 = #_array_41
 	table.move(_array_41, 1, _Length_40, _length + 1, _array)
 	_length += _Length_40
-	local _array_42 = pair("SpeedDial", "closed", {
-		open = false,
+	local _array_42 = pair("ImageList", "titled", {
+		text = "Cove",
 	})
 	local _Length_41 = #_array_42
 	table.move(_array_42, 1, _Length_41, _length + 1, _array)
 	_length += _Length_41
-	local _array_43 = pair("SpeedDial", "open", {
-		open = true,
+	local _array_43 = pair("SpeedDial", "closed", {
+		open = false,
 	})
 	local _Length_42 = #_array_43
 	table.move(_array_43, 1, _Length_42, _length + 1, _array)
 	_length += _Length_42
-	local _array_44 = pair("SpeedDial", "disabled", {
-		open = false,
-		disabled = true,
+	local _array_44 = pair("SpeedDial", "open", {
+		open = true,
 	})
 	local _Length_43 = #_array_44
 	table.move(_array_44, 1, _Length_43, _length + 1, _array)
 	_length += _Length_43
-	local _array_45 = pair("SpeedDial", "down", {
-		open = true,
-		variant = "down",
+	local _array_45 = pair("SpeedDial", "disabled", {
+		open = false,
+		disabled = true,
 	})
 	local _Length_44 = #_array_45
 	table.move(_array_45, 1, _Length_44, _length + 1, _array)
 	_length += _Length_44
-	local _array_46 = pair("FormLabel", "default", {
-		text = "Email",
+	local _array_46 = pair("SpeedDial", "down", {
+		open = true,
+		variant = "down",
 	})
 	local _Length_45 = #_array_46
 	table.move(_array_46, 1, _Length_45, _length + 1, _array)
 	_length += _Length_45
-	local _array_47 = pair("FormLabel", "required", {
+	local _array_47 = pair("FormLabel", "default", {
 		text = "Email",
-		value = true,
 	})
 	local _Length_46 = #_array_47
 	table.move(_array_47, 1, _Length_46, _length + 1, _array)
 	_length += _Length_46
-	local _array_48 = pair("FormLabel", "error", {
+	local _array_48 = pair("FormLabel", "required", {
 		text = "Email",
-		hasError = true,
+		value = true,
 	})
 	local _Length_47 = #_array_48
 	table.move(_array_48, 1, _Length_47, _length + 1, _array)
 	_length += _Length_47
-	local _array_49 = pair("FormHelperText", "default", {
-		text = "We never share this",
+	local _array_49 = pair("FormLabel", "error", {
+		text = "Email",
+		hasError = true,
 	})
 	local _Length_48 = #_array_49
 	table.move(_array_49, 1, _Length_48, _length + 1, _array)
 	_length += _Length_48
-	local _array_50 = pair("FormHelperText", "error", {
-		text = "Required",
-		hasError = true,
+	local _array_50 = pair("FormHelperText", "default", {
+		text = "We never share this",
 	})
 	local _Length_49 = #_array_50
 	table.move(_array_50, 1, _Length_49, _length + 1, _array)
 	_length += _Length_49
-	local _array_51 = pair("Menu", "closed", {
-		open = false,
+	local _array_51 = pair("FormHelperText", "error", {
+		text = "Required",
+		hasError = true,
 	})
 	local _Length_50 = #_array_51
 	table.move(_array_51, 1, _Length_50, _length + 1, _array)
 	_length += _Length_50
-	local _array_52 = pair("Menu", "open", {
-		open = true,
+	local _array_52 = pair("Menu", "closed", {
+		open = false,
 	})
 	local _Length_51 = #_array_52
 	table.move(_array_52, 1, _Length_51, _length + 1, _array)
 	_length += _Length_51
-	local _array_53 = pair("Menu", "empty", {
+	local _array_53 = pair("Menu", "open", {
 		open = true,
-		options = {},
 	})
 	local _Length_52 = #_array_53
 	table.move(_array_53, 1, _Length_52, _length + 1, _array)
 	_length += _Length_52
-	local _array_54 = pair("Menu", "dense", {
+	local _array_54 = pair("Menu", "empty", {
+		open = true,
+		options = {},
+	})
+	local _Length_53 = #_array_54
+	table.move(_array_54, 1, _Length_53, _length + 1, _array)
+	_length += _Length_53
+	local _array_55 = pair("Menu", "dense", {
 		open = true,
 		variant = "dense",
 	})
-	table.move(_array_54, 1, #_array_54, _length + 1, _array)
+	local _Length_54 = #_array_55
+	table.move(_array_55, 1, _Length_54, _length + 1, _array)
+	_length += _Length_54
+	local _array_56 = pair("Menu", "selected", {
+		open = true,
+		selected = "a",
+	})
+	table.move(_array_56, 1, #_array_56, _length + 1, _array)
 	return _array
 end
 local function concatRows(...)

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

@@ -1,10 +1,12 @@
 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

@@ -27,6 +27,10 @@ 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
@@ -37,6 +41,7 @@ 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

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

@@ -1,6 +1,8 @@
 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,7 +6,12 @@ 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,
@@ -28,7 +33,7 @@ local useSwitchStyles = componentStyles("Switch", function(theme, _param)
 			BorderSizePixel = 0,
 		},
 		trackOn = {
-			BackgroundColor3 = theme.palette.primary.main,
+			BackgroundColor3 = onTone,
 		},
 		knob = {
 			Size = UDim2.fromOffset(metrics.switchThumb, metrics.switchThumb),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.2.0-alpha.17",
+	"version": "0.2.0-alpha.19",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.luau",
 	"packageManager": "pnpm@11.3.0",
@@ -8,7 +8,7 @@
 		"build": "rbxtsc",
 		"watch": "rbxtsc -w",
 		"pack:check": "node scripts/pack-check.mjs",
-		"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-motion.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/imageList.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
+		"test": "node scripts/no-internal-refs.check.mjs && node scripts/import-case.check.mjs && node --experimental-strip-types scripts/theme-scope.check.mjs && node --experimental-strip-types scripts/style-types.check.mjs && node --experimental-strip-types scripts/style-cache.check.mjs && node --experimental-strip-types scripts/style-variants.check.mjs && node --experimental-strip-types scripts/component-styles.check.mjs && node --experimental-strip-types scripts/interaction-styles.check.mjs && node --experimental-strip-types scripts/resolve-style.check.mjs && node --experimental-strip-types scripts/density.check.mjs && node --experimental-strip-types scripts/styles.check.mjs && node --experimental-strip-types scripts/contrast.check.mjs && node --experimental-strip-types scripts/primitives.check.mjs && node --experimental-strip-types scripts/paper.check.mjs && node --experimental-strip-types scripts/list-item.check.mjs && node --experimental-strip-types scripts/slider.check.mjs && node --experimental-strip-types scripts/menu.check.mjs && node --experimental-strip-types scripts/guard.check.mjs && node --experimental-strip-types scripts/breakpoints.check.mjs && node --experimental-strip-types scripts/focus-trap.check.mjs && node --experimental-strip-types scripts/select-typeahead.check.mjs && node --experimental-strip-types scripts/select-groups.check.mjs && node --experimental-strip-types scripts/select-multi.check.mjs && node --experimental-strip-types scripts/select-motion.check.mjs && node --experimental-strip-types scripts/select-polish.check.mjs && node --experimental-strip-types scripts/reduced-motion.check.mjs && node --experimental-strip-types scripts/card.check.mjs && node --experimental-strip-types scripts/chip.check.mjs && node --experimental-strip-types scripts/badge.check.mjs && node --experimental-strip-types scripts/avatar.check.mjs && node --experimental-strip-types scripts/imageList.check.mjs && node --experimental-strip-types scripts/drawer.check.mjs && node --experimental-strip-types scripts/breadcrumbs.check.mjs && node --experimental-strip-types scripts/pagination.check.mjs && node --experimental-strip-types scripts/stepper.check.mjs && node --experimental-strip-types scripts/accordion.check.mjs && node --experimental-strip-types scripts/snackbar.check.mjs && node --experimental-strip-types scripts/table.check.mjs && node --experimental-strip-types scripts/autocomplete.check.mjs && node --experimental-strip-types scripts/field-loading.check.mjs && node --experimental-strip-types scripts/fab.check.mjs && node --experimental-strip-types scripts/appbar.check.mjs && node --experimental-strip-types scripts/bottom-navigation.check.mjs && node --experimental-strip-types scripts/alert.check.mjs && node --experimental-strip-types scripts/toggle-button.check.mjs && node --experimental-strip-types scripts/link.check.mjs && node --experimental-strip-types scripts/rating.check.mjs && node --experimental-strip-types scripts/stack.check.mjs && node --experimental-strip-types scripts/speed-dial.check.mjs && node --experimental-strip-types scripts/form-text.check.mjs && node --experimental-strip-types scripts/box.check.mjs && node --experimental-strip-types scripts/image-list.check.mjs && node --experimental-strip-types scripts/radio-group.check.mjs && node --experimental-strip-types scripts/container.check.mjs && node --experimental-strip-types scripts/divider.check.mjs && node --experimental-strip-types scripts/switch.check.mjs && node --experimental-strip-types scripts/tabs.check.mjs && node --experimental-strip-types scripts/dialog.check.mjs && node --experimental-strip-types scripts/backdrop.check.mjs && node --experimental-strip-types scripts/cframe-editor.check.mjs && node --experimental-strip-types scripts/enum-picker.check.mjs && node --experimental-strip-types scripts/number-range.check.mjs && node --experimental-strip-types scripts/rect-editor.check.mjs && node --experimental-strip-types scripts/asset-field.check.mjs && node --experimental-strip-types scripts/gradient-editor.check.mjs && node --experimental-strip-types scripts/ray-editor.check.mjs && node --experimental-strip-types scripts/physical-properties.check.mjs && node --experimental-strip-types scripts/brickcolor-picker.check.mjs",
 		"prepublishOnly": "pnpm build"
 	},
 	"keywords": [