@rbxts/uiblox 0.2.0-alpha.18 → 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/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

@@ -1322,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()
@@ -2023,7 +2029,14 @@ local function miscRows()
 		open = true,
 		variant = "dense",
 	})
-	table.move(_array_55, 1, #_array_55, _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/package.json

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