@rbxts/uiblox 0.2.0-alpha.36 → 0.2.0-alpha.38

package/out/ui/packages/bottomNavigation/components/BottomNavigation.luau

@@ -5,6 +5,7 @@ local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 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 useBottomNavigationStyles = TS.import(script, script.Parent, "BottomNavigation.styles").default
+local navBadge = TS.import(script, script.Parent, "navBadge").navBadge
 local function BottomNavigation(props)
 	local _binding = props
 	local value = _binding.value
@@ -46,6 +47,7 @@ local function BottomNavigation(props)
 	local _callback = function(choice, index)
 		local active = canActivate(disabled or choice.disabled)
 		local selected = choice.value == value
+		local mark = navBadge(choice.badge)
 		local _attributes_2 = {
 			key = `{choice.label}-{index}`,
 		}
@@ -74,7 +76,23 @@ local function BottomNavigation(props)
 			end
 			_condition_1 = React.createElement("frame", _attributes_3)
 		end
-		return React.createElement("textbutton", _attributes_2, _condition_1)
+		local _condition_2 = mark ~= nil
+		if _condition_2 then
+			local _attributes_3 = {
+				key = "Badge",
+			}
+			for _k, _v in styles.badge do
+				_attributes_3[_k] = _v
+			end
+			_attributes_3.Text = mark
+			local _attributes_4 = table.clone(styles.badgePad)
+			setmetatable(_attributes_4, nil)
+			local _exp_1 = React.createElement("uipadding", _attributes_4)
+			local _attributes_5 = table.clone(styles.badgeCorner)
+			setmetatable(_attributes_5, nil)
+			_condition_2 = (React.createElement("textlabel", _attributes_3, _exp_1, React.createElement("uicorner", _attributes_5)))
+		end
+		return React.createElement("textbutton", _attributes_2, _condition_1, _condition_2)
 	end
 	for _k, _v in options do
 		_newValue[_k] = _callback(_v, _k - 1, options)

package/out/ui/packages/bottomNavigation/components/BottomNavigation.styles.luau

@@ -41,7 +41,7 @@ local useBottomNavigationStyles = componentStyles("BottomNavigation", function(t
 	_object_1.TextTruncate = Enum.TextTruncate.AtEnd
 	_object[_left] = _object_1
 	_object.selected = {
-		TextColor3 = theme.palette.primary.main,
+		TextColor3 = theme.palette.text.primary,
 		BackgroundColor3 = theme.palette.action.selected,
 		BackgroundTransparency = 0.85,
 	}
@@ -49,11 +49,32 @@ local useBottomNavigationStyles = componentStyles("BottomNavigation", function(t
 		TextTransparency = 0.5,
 	}
 	_object.indicator = {
-		Size = UDim2.new(1, 0, 0, 2),
-		Position = UDim2.new(0, 0, 0, 0),
+		Size = UDim2.new(1, -theme.padding.calc(3), 0, 2),
+		Position = UDim2.new(0.5, 0, 0, theme.padding.calc(0.5)),
+		AnchorPoint = Vector2.new(0.5, 0),
 		BackgroundColor3 = theme.palette.primary.main,
 		BorderSizePixel = 0,
 	}
+	_object.badge = {
+		AnchorPoint = Vector2.new(1, 0),
+		Position = UDim2.new(1, -4, 0, 2),
+		AutomaticSize = Enum.AutomaticSize.X,
+		Size = UDim2.fromOffset(0, theme.spacing.calc(2)),
+		BackgroundColor3 = theme.palette.status.error.main,
+		BorderSizePixel = 0,
+		Font = theme.typography.fontFamilies.default,
+		TextSize = theme.typography.fontSizes.caption,
+		TextColor3 = theme.palette.text.inverse,
+		TextXAlignment = Enum.TextXAlignment.Center,
+		ZIndex = 2,
+	}
+	_object.badgePad = {
+		PaddingLeft = UDim.new(0, theme.padding.calc(0.5)),
+		PaddingRight = UDim.new(0, theme.padding.calc(0.5)),
+	}
+	_object.badgeCorner = {
+		CornerRadius = UDim.new(0, theme.spacing.calc(1)),
+	}
 	return createStyles(_object)
 end)
 local default = useBottomNavigationStyles

package/out/ui/packages/bottomNavigation/components/navBadge.d.ts

@@ -0,0 +1,2 @@
+/** A missing or empty count stays off the item. Larger counts cap the same way as badgeText. */
+export declare function navBadge(count?: number, max?: number): string | undefined;

package/out/ui/packages/bottomNavigation/components/navBadge.luau

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+--* A missing or empty count stays off the item. Larger counts cap the same way as badgeText. 
+local function navBadge(count, max)
+	if max == nil then
+		max = 99
+	end
+	if count == nil or count <= 0 then
+		return nil
+	end
+	return if count > max then `{max}+` else `{count}`
+end
+return {
+	navBadge = navBadge,
+}

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

@@ -1,2 +1,2 @@
 export { default as BottomNavigation } from "./components/BottomNavigation";
-export { BottomNavigationProps } from "./components/BottomNavigation";
+export { BottomNavigationProps, BottomNavOption } from "./components/BottomNavigation";

package/out/ui/packages/breadcrumbs/components/Breadcrumbs.luau

@@ -1,9 +1,12 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
-local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useState = _react.useState
 local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
 local _breadcrumbItems = TS.import(script, script.Parent, "breadcrumbItems")
 local breadcrumbCurrent = _breadcrumbItems.breadcrumbCurrent
+local breadcrumbHasGap = _breadcrumbItems.breadcrumbHasGap
 local breadcrumbVisible = _breadcrumbItems.breadcrumbVisible
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useBreadcrumbStyles = TS.import(script, script.Parent, "Breadcrumbs.styles").default
@@ -20,7 +23,9 @@ local function Breadcrumbs(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useBreadcrumbStyles()
-	local visible = breadcrumbVisible(items, maxItems)
+	local opened, setOpened = useState(false)
+	local gap = breadcrumbHasGap(#items, maxItems)
+	local visible = breadcrumbVisible(items, if opened or not gap then nil else maxItems)
 	local _attributes = {
 		tag = "frame",
 	}
@@ -30,11 +35,12 @@ local function Breadcrumbs(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	_attributes.base = if opened then styles.opened else styles.root
 	_attributes.className = className
 	_attributes.sx = sx
 	local _attributes_1 = table.clone(styles.list)
 	setmetatable(_attributes_1, nil)
+	_attributes_1.Wraps = opened
 	local _exp = React.createElement("uilistlayout", _attributes_1)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#visible)
@@ -51,11 +57,18 @@ local function Breadcrumbs(props)
 		end
 		local _result
 		if entry.ellipsis then
-			local _attributes_2 = table.clone(styles.separator)
+			local _attributes_2 = table.clone(styles.item)
 			setmetatable(_attributes_2, nil)
 			_attributes_2.Text = "…"
 			_attributes_2.LayoutOrder = order * 2 + 1
-			_result = (React.createElement("textlabel", _attributes_2))
+			_attributes_2.Event = {
+				Activated = function()
+					return setOpened(true)
+				end,
+			}
+			local _attributes_3 = table.clone(styles.cap)
+			setmetatable(_attributes_3, nil)
+			_result = (React.createElement("textbutton", _attributes_2, React.createElement("uisizeconstraint", _attributes_3)))
 		else
 			local _attributes_2 = table.clone(cx(styles.item, current and styles.current))
 			setmetatable(_attributes_2, nil)
@@ -91,7 +104,9 @@ local function Breadcrumbs(props)
 					return _result_1
 				end,
 			}
-			_result = (React.createElement("textbutton", _attributes_2))
+			local _attributes_3 = table.clone(styles.cap)
+			setmetatable(_attributes_3, nil)
+			_result = (React.createElement("textbutton", _attributes_2, React.createElement("uisizeconstraint", _attributes_3)))
 		end
 		return React.createElement(React.Fragment, {
 			key = `{entry.label}-{order}`,

package/out/ui/packages/breadcrumbs/components/Breadcrumbs.styles.luau

@@ -11,6 +11,12 @@ local useBreadcrumbStyles = componentStyles("Breadcrumbs", function(theme)
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
+		opened = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
 		list = {
 			FillDirection = Enum.FillDirection.Horizontal,
 			VerticalAlignment = Enum.VerticalAlignment.Center,
@@ -26,6 +32,10 @@ local useBreadcrumbStyles = componentStyles("Breadcrumbs", function(theme)
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
 			TextColor3 = theme.palette.text.link,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+		},
+		cap = {
+			MaxSize = Vector2.new(theme.spacing.calc(20), math.huge),
 		},
 		current = {
 			TextColor3 = theme.palette.text.primary,

package/out/ui/packages/breadcrumbs/components/breadcrumbItems.d.ts

@@ -4,6 +4,8 @@ export interface BreadcrumbSlice {
     index: number;
     ellipsis?: boolean;
 }
+/** True when a middle gap is shown. A max of one item has no gap to open. */
+export declare function breadcrumbHasGap(count: number, maxItems?: number): boolean;
 /** Collapse middle items when over maxItems (keep ends). */
 export declare function breadcrumbVisible<T extends {
     label: string;

package/out/ui/packages/breadcrumbs/components/breadcrumbItems.luau

@@ -2,6 +2,13 @@
 local function breadcrumbCurrent(index, count)
 	return count > 0 and index == count - 1
 end
+--* True when a middle gap is shown. A max of one item has no gap to open. 
+local function breadcrumbHasGap(count, maxItems)
+	if maxItems == nil or maxItems <= 1 then
+		return false
+	end
+	return count > maxItems
+end
 --* Collapse middle items when over maxItems (keep ends). 
 local function breadcrumbVisible(items, maxItems)
 	local count = #items
@@ -71,5 +78,6 @@ local function breadcrumbVisible(items, maxItems)
 end
 return {
 	breadcrumbCurrent = breadcrumbCurrent,
+	breadcrumbHasGap = breadcrumbHasGap,
 	breadcrumbVisible = breadcrumbVisible,
 }

package/out/ui/packages/brickColorPicker/components/BrickColorPicker.luau

@@ -7,6 +7,7 @@ local useState = _react.useState
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local cx = _theme.cx
 local useTheme = _theme.useTheme
+local useEditorHover = TS.import(script, script.Parent.Parent.Parent, "editorFace").useEditorHover
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
 local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
@@ -30,12 +31,14 @@ local function BrickColorPicker(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useBrickColorPickerStyles()
+	local hover = useEditorHover(disabled)
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
 	local active = canActivate(disabled)
 	local anchor, setAnchor = useState()
 	local open, setOpen = useState(false)
 	local query, setQuery = useState("")
+	local over, setOver = useState("")
 	local catalog = useMemo(function()
 		return brickColorCatalog()
 	end, {})
@@ -74,12 +77,18 @@ local function BrickColorPicker(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	for _k, _v in hover.face do
+		_object[_k] = _v
+	end
+	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 	}
+	_attributes.Event = hover.event
 	local _attributes_1 = {
 		key = "Trigger",
 		ref = setAnchor,
@@ -87,6 +96,9 @@ local function BrickColorPicker(props)
 	for _k, _v in styles.trigger do
 		_attributes_1[_k] = _v
 	end
+	for _k, _v in (if hover.active then hover.face else {}) do
+		_attributes_1[_k] = _v
+	end
 	_attributes_1.Active = active
 	_attributes_1.Selectable = active
 	_attributes_1.Event = {
@@ -188,11 +200,17 @@ local function BrickColorPicker(props)
 			className = styles.list,
 			renderItem = function(color)
 				local picked = color.Number == value.Number
-				local _attributes_14 = table.clone(cx(styles.option, picked and styles.selected))
+				local _attributes_14 = table.clone(cx(styles.option, over == color.Name and styles.highlighted, picked and styles.selected))
 				setmetatable(_attributes_14, nil)
 				_attributes_14.Active = true
 				_attributes_14.Selectable = true
 				_attributes_14.Event = {
+					MouseEnter = function()
+						return setOver(color.Name)
+					end,
+					MouseLeave = function()
+						return setOver("")
+					end,
 					Activated = function()
 						onChange(color)
 						close()

package/out/ui/packages/brickColorPicker/components/BrickColorPicker.styles.luau

@@ -3,8 +3,11 @@ 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 _editorFace = TS.import(script, script.Parent.Parent.Parent, "editorFace")
+local editorPad = _editorFace.editorPad
+local editorText = _editorFace.editorText
 local useBrickColorPickerStyles = componentStyles("BrickColorPicker", function(theme)
-	return createStyles({
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
 			BackgroundTransparency = 1,
@@ -12,7 +15,7 @@ local useBrickColorPickerStyles = componentStyles("BrickColorPicker", function(t
 		},
 		row = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(1)),
+			Padding = UDim.new(0, editorPad(theme)),
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
@@ -27,70 +30,73 @@ local useBrickColorPickerStyles = componentStyles("BrickColorPicker", function(t
 			Size = UDim2.fromOffset(theme.spacing.calc(1.5), theme.spacing.calc(1.5)),
 			BorderSizePixel = 0,
 		},
-		label = {
-			Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = theme.palette.text.primary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-			TextTruncate = Enum.TextTruncate.AtEnd,
-		},
-		menu = {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundColor3 = theme.palette.surface.elevated,
-			BorderSizePixel = 0,
-		},
-		search = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
-			BackgroundTransparency = 1,
-		},
-		list = {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundColor3 = theme.palette.surface.elevated,
-			BorderSizePixel = 0,
-			ScrollBarThickness = theme.padding.default,
-			ScrollBarImageColor3 = theme.palette.text.secondary,
-			ScrollingDirection = Enum.ScrollingDirection.Y,
-		},
-		option = {
-			Size = UDim2.fromScale(1, 1),
-			BackgroundColor3 = theme.palette.action.hover,
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			AutoButtonColor = false,
-			Text = "",
-		},
-		highlighted = {
-			BackgroundTransparency = 0,
-		},
-		selected = {
-			BackgroundColor3 = theme.palette.action.selected,
-			BackgroundTransparency = 0,
-		},
-		optionLabel = {
-			Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
-			BackgroundTransparency = 1,
-			BorderSizePixel = 0,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = theme.palette.text.primary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-			TextTruncate = Enum.TextTruncate.AtEnd,
-		},
-		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.calc(1)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1)),
-		},
-		corner = {
-			CornerRadius = UDim.new(0, theme.shape.borderRadius),
-		},
-		stroke = {
-			Color = theme.palette.border,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-		},
-	})
+	}
+	local _left = "label"
+	local _object_1 = {
+		Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		TextColor3 = theme.palette.text.primary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.menu = {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundColor3 = theme.palette.surface.elevated,
+		BorderSizePixel = 0,
+	}
+	_object.search = {
+		Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+		BackgroundTransparency = 1,
+	}
+	_object.list = {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundColor3 = theme.palette.surface.elevated,
+		BorderSizePixel = 0,
+		ScrollBarThickness = editorPad(theme),
+		ScrollBarImageColor3 = theme.palette.text.secondary,
+		ScrollingDirection = Enum.ScrollingDirection.Y,
+	}
+	_object.option = {
+		Size = UDim2.fromScale(1, 1),
+		BackgroundColor3 = theme.palette.action.hover,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		AutoButtonColor = false,
+		Text = "",
+	}
+	_object.highlighted = {
+		BackgroundTransparency = 0,
+	}
+	_object.selected = {
+		BackgroundColor3 = theme.palette.action.selected,
+		BackgroundTransparency = 0,
+	}
+	local _left_1 = "optionLabel"
+	local _object_2 = {
+		Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		TextColor3 = theme.palette.text.primary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_2[_k] = _v
+	end
+	_object[_left_1] = _object_2
+	_object.padding = {
+		PaddingLeft = UDim.new(0, editorPad(theme)),
+		PaddingRight = UDim.new(0, editorPad(theme)),
+	}
+	_object.corner = {
+		CornerRadius = UDim.new(0, theme.shape.borderRadius),
+	}
+	_object.stroke = {
+		Color = theme.palette.border,
+		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+	}
+	return createStyles(_object)
 end)
 local default = useBrickColorPickerStyles
 return {

package/out/ui/packages/button/components/Button.d.ts

@@ -1,4 +1,5 @@
 import { CustomizedProps } from "../../../../theme/index";
+import { Icons } from "../../../enums/index";
 import { ButtonSize, ButtonColor, ButtonVariant } from "../types/index";
 import { LoadingPosition } from "./buttonLook";
 export type DefaultButtonComponent = TextButton;
@@ -8,6 +9,7 @@ export interface ButtonProps {
     color?: ButtonColor;
     fullWidth?: boolean;
     variant?: ButtonVariant;
+    icon?: Icons;
     disabled?: boolean;
     loading?: boolean;
     loadingLabel?: string;