@rbxts/uiblox 0.2.0-alpha.0 → 0.2.0-alpha.10

package/out/ui/packages/alert/components/Alert.luau

@@ -0,0 +1,98 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local useAlertStyles = TS.import(script, script.Parent, "Alert.styles").default
+local function Alert(props)
+	local _binding = props
+	local severity = _binding.severity
+	local title = _binding.title
+	local message = _binding.message
+	local onClose = _binding.onClose
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local dismissible = onClose ~= nil
+	local styles = useAlertStyles({
+		severity = severity,
+		dismissible = dismissible,
+	})
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Alert"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = table.clone(styles.padding)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uipadding", _attributes_1)
+	local _attributes_2 = table.clone(styles.corner)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uicorner", _attributes_2)
+	local _attributes_3 = table.clone(styles.stroke)
+	setmetatable(_attributes_3, nil)
+	local _exp_2 = React.createElement("uistroke", _attributes_3)
+	local _condition_1 = dismissible
+	if _condition_1 then
+		local _attributes_4 = {
+			key = "Close",
+		}
+		for _k, _v in styles.close do
+			_attributes_4[_k] = _v
+		end
+		_attributes_4.Image = tostring(Icons.Close)
+		_attributes_4.Event = {
+			Activated = function()
+				return onClose()
+			end,
+		}
+		_condition_1 = (React.createElement("imagebutton", _attributes_4))
+	end
+	local _attributes_4 = {
+		key = "Body",
+	}
+	for _k, _v in styles.body do
+		_attributes_4[_k] = _v
+	end
+	local _attributes_5 = table.clone(styles.layout)
+	setmetatable(_attributes_5, nil)
+	local _exp_3 = React.createElement("uilistlayout", _attributes_5)
+	local _condition_2 = title ~= nil and title ~= ""
+	if _condition_2 then
+		local _attributes_6 = {
+			key = "Title",
+		}
+		for _k, _v in styles.title do
+			_attributes_6[_k] = _v
+		end
+		_attributes_6.Text = title
+		_condition_2 = React.createElement("textlabel", _attributes_6)
+	end
+	local _attributes_6 = {
+		key = "Message",
+	}
+	for _k, _v in styles.message do
+		_attributes_6[_k] = _v
+	end
+	_attributes_6.Text = message
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _condition_1, React.createElement("frame", _attributes_4, _exp_3, _condition_2, React.createElement("textlabel", _attributes_6)))
+end
+local default = Alert
+return {
+	default = default,
+}

package/out/ui/packages/alert/components/Alert.styles.d.ts

@@ -0,0 +1,6 @@
+import { AlertSeverity } from "./alertTone";
+declare const useAlertStyles: (props: {
+    severity?: AlertSeverity;
+    dismissible?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useAlertStyles;

package/out/ui/packages/alert/components/Alert.styles.luau

@@ -0,0 +1,93 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local alertSeverity = TS.import(script, script.Parent, "alertTone").alertSeverity
+local useAlertStyles = componentStyles("Alert", function(theme, _param)
+	local severity = _param.severity
+	local dismissible = _param.dismissible
+	local tone = theme.palette.status[alertSeverity(severity)]
+	local closeSize = theme.spacing.calc(2)
+	local _object = {
+		root = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundColor3 = tone.surface,
+			BorderSizePixel = 0,
+		},
+		padding = {
+			PaddingTop = UDim.new(0, theme.padding.calc(1.5)),
+			PaddingBottom = UDim.new(0, theme.padding.calc(1.5)),
+			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
+			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		stroke = {
+			Color = tone.border,
+			Thickness = 1,
+			Transparency = 0,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
+		body = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, if dismissible == true then -(closeSize + theme.padding.calc(1)) else 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		layout = {
+			FillDirection = Enum.FillDirection.Vertical,
+			HorizontalAlignment = Enum.HorizontalAlignment.Left,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.padding.calc(0.5)),
+		},
+		title = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = tone.main,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			LayoutOrder = 1,
+		},
+	}
+	local _left = "message"
+	local _object_1 = {
+		AutomaticSize = Enum.AutomaticSize.XY,
+		Size = UDim2.fromScale(0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Font = theme.typography.fontFamilies.default,
+	}
+	local _left_1 = "TextSize"
+	local _condition = theme.typography.fontSizes.caption
+	if _condition == nil then
+		_condition = theme.typography.fontSizes.body
+	end
+	_object_1[_left_1] = _condition
+	_object_1.TextColor3 = theme.palette.text.primary
+	_object_1.TextXAlignment = Enum.TextXAlignment.Left
+	_object_1.TextWrapped = true
+	_object_1.LayoutOrder = 2
+	_object[_left] = _object_1
+	_object.close = {
+		Size = UDim2.fromOffset(closeSize, closeSize),
+		Position = UDim2.new(1, 0, 0, 0),
+		AnchorPoint = Vector2.new(1, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		ImageColor3 = theme.palette.text.secondary,
+		ScaleType = Enum.ScaleType.Fit,
+		ZIndex = 2,
+	}
+	return createStyles(_object)
+end)
+local default = useAlertStyles
+return {
+	default = default,
+}

package/out/ui/packages/alert/components/alertTone.d.ts

@@ -0,0 +1,2 @@
+export type AlertSeverity = "info" | "success" | "warning" | "error";
+export declare function alertSeverity(severity?: AlertSeverity): AlertSeverity;

package/out/ui/packages/alert/components/alertTone.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local function alertSeverity(severity)
+	return severity or "info"
+end
+return {
+	alertSeverity = alertSeverity,
+}

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

@@ -0,0 +1,3 @@
+export { default as Alert } from "./components/Alert";
+export { AlertProps } from "./components/Alert";
+export { AlertSeverity, alertSeverity } from "./components/alertTone";

package/out/ui/packages/alert/init.luau

@@ -0,0 +1,6 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Alert = TS.import(script, script, "components", "Alert").default
+exports.alertSeverity = TS.import(script, script, "components", "alertTone").alertSeverity
+return exports

package/out/ui/packages/appBar/components/AppBar.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+import { AppBarElevation } from "./AppBar.styles";
+export interface AppBarProps {
+    title?: string;
+    elevation?: AppBarElevation;
+    children?: React.ReactNode;
+}
+declare function AppBar(props: CustomizedProps<Frame, AppBarProps>): JSX.Element;
+export default AppBar;

package/out/ui/packages/appBar/components/AppBar.luau

@@ -0,0 +1,77 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
+local useAppBarStyles = TS.import(script, script.Parent, "AppBar.styles").default
+local function AppBar(props)
+	local _binding = props
+	local title = _binding.title
+	if title == nil then
+		title = ""
+	end
+	local elevation = _binding.elevation
+	if elevation == nil then
+		elevation = "raised"
+	end
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useAppBarStyles({
+		elevation = elevation,
+		hasActions = children ~= nil,
+	})
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "AppBar"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = table.clone(styles.padding)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uipadding", _attributes_1)
+	local _exp_1 = elevation == "raised" and React.createElement(Shadow)
+	local _condition_1 = title ~= ""
+	if _condition_1 then
+		local _attributes_2 = {
+			key = "Title",
+		}
+		for _k, _v in styles.title do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = title
+		_condition_1 = React.createElement("textlabel", _attributes_2)
+	end
+	local _condition_2 = children ~= nil
+	if _condition_2 then
+		local _attributes_2 = {
+			key = "Actions",
+		}
+		for _k, _v in styles.actions do
+			_attributes_2[_k] = _v
+		end
+		local _attributes_3 = table.clone(styles.actionsLayout)
+		setmetatable(_attributes_3, nil)
+		_condition_2 = (React.createElement("frame", _attributes_2, React.createElement("uilistlayout", _attributes_3), children))
+	end
+	return React.createElement("frame", _attributes, _exp, _exp_1, _condition_1, _condition_2)
+end
+local default = AppBar
+return {
+	default = default,
+}

package/out/ui/packages/appBar/components/AppBar.styles.d.ts

@@ -0,0 +1,6 @@
+export type AppBarElevation = "flat" | "raised";
+declare const useAppBarStyles: (props: {
+    elevation?: AppBarElevation;
+    hasActions?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useAppBarStyles;

package/out/ui/packages/appBar/components/AppBar.styles.luau

@@ -0,0 +1,66 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local useAppBarStyles = componentStyles("AppBar", function(theme, _param)
+	local elevation = _param.elevation
+	if elevation == nil then
+		elevation = "raised"
+	end
+	local hasActions = _param.hasActions
+	if hasActions == nil then
+		hasActions = false
+	end
+	local _object = {
+		root = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(7)),
+			BackgroundColor3 = if elevation == "raised" then theme.palette.surface.elevated else theme.palette.surface.paper,
+			BorderSizePixel = 0,
+			ZIndex = 11000,
+		},
+		padding = {
+			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
+			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+		},
+	}
+	local _left = "title"
+	local _object_1 = {
+		Size = UDim2.new(1, if hasActions then -theme.spacing.calc(8) else 0, 1, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		Font = theme.typography.fontFamilies.default,
+	}
+	local _left_1 = "TextSize"
+	local _condition = theme.typography.fontSizes.h3
+	if _condition == nil then
+		_condition = theme.typography.fontSizes.body
+	end
+	_object_1[_left_1] = _condition
+	_object_1.TextColor3 = theme.palette.text.primary
+	_object_1.TextXAlignment = Enum.TextXAlignment.Left
+	_object_1.TextYAlignment = Enum.TextYAlignment.Center
+	_object_1.TextTruncate = Enum.TextTruncate.AtEnd
+	_object[_left] = _object_1
+	_object.actions = {
+		AutomaticSize = Enum.AutomaticSize.X,
+		Size = UDim2.new(0, 0, 1, 0),
+		Position = UDim2.new(1, 0, 0, 0),
+		AnchorPoint = Vector2.new(1, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		ZIndex = 2,
+	}
+	_object.actionsLayout = {
+		FillDirection = Enum.FillDirection.Horizontal,
+		HorizontalAlignment = Enum.HorizontalAlignment.Right,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		Padding = UDim.new(0, theme.padding.calc(1)),
+	}
+	return createStyles(_object)
+end)
+local default = useAppBarStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,3 @@
+export { default as AppBar } from "./components/AppBar";
+export { AppBarProps } from "./components/AppBar";
+export { AppBarElevation } from "./components/AppBar.styles";

package/out/ui/packages/appBar/init.luau

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.AppBar = TS.import(script, script, "components", "AppBar").default
+return exports

package/out/ui/packages/autocomplete/components/Autocomplete.luau

@@ -10,8 +10,13 @@ local function Autocomplete(props)
 	local options = _binding.options
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
+	local loading = _binding.loading
 	local placeholder = _binding.placeholder
 	local searchable = _binding.searchable
+	local defaultOpen = _binding.defaultOpen
+	local defaultQuery = _binding.defaultQuery
+	local emptyText = _binding.emptyText
+	local empty = _binding.empty
 	local reducedMotion = _binding.reducedMotion
 	local size = _binding.size
 	local className = _binding.className
@@ -24,8 +29,13 @@ local function Autocomplete(props)
 		options = options,
 		onChange = onChange,
 		disabled = disabled,
+		loading = loading,
 		placeholder = placeholder,
 		searchable = autocompleteSearchable(searchable),
+		defaultOpen = defaultOpen,
+		defaultQuery = defaultQuery,
+		emptyText = emptyText,
+		empty = empty,
 		reducedMotion = reducedMotion,
 		size = size,
 		className = className,

package/out/ui/packages/backdrop/components/Backdrop.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+export interface BackdropProps {
+    open?: boolean;
+    invisible?: boolean;
+    onClick?: () => void;
+    children?: React.ReactNode;
+}
+declare function Backdrop(props: CustomizedProps<TextButton, BackdropProps>): JSX.Element | undefined;
+export default Backdrop;

package/out/ui/packages/backdrop/components/Backdrop.luau

@@ -0,0 +1,58 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useBackdropStyles = TS.import(script, script.Parent, "Backdrop.styles").default
+local function Backdrop(props)
+	local _binding = props
+	local open = _binding.open
+	if open == nil then
+		open = true
+	end
+	local invisible = _binding.invisible
+	local onClick = _binding.onClick
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useBackdropStyles({
+		invisible = invisible,
+	})
+	if open ~= true then
+		return nil
+	end
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Backdrop"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	_attributes.Event = {
+		Activated = function()
+			local _result = onClick
+			if _result ~= nil then
+				_result = _result()
+			end
+			return _result
+		end,
+	}
+	return React.createElement("textbutton", _attributes, children)
+end
+local default = Backdrop
+return {
+	default = default,
+}

package/out/ui/packages/backdrop/components/Backdrop.styles.d.ts

@@ -0,0 +1,4 @@
+declare const useBackdropStyles: (props: {
+    invisible?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useBackdropStyles;

package/out/ui/packages/backdrop/components/Backdrop.styles.luau

@@ -0,0 +1,24 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local useBackdropStyles = componentStyles("Backdrop", function(theme, _param)
+	local invisible = _param.invisible
+	return createStyles({
+		root = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundColor3 = theme.palette.backdrop,
+			BackgroundTransparency = if invisible == true then 1 else 0.45,
+			BorderSizePixel = 0,
+			Text = "",
+			AutoButtonColor = false,
+			Selectable = false,
+			ZIndex = 30000,
+		},
+	})
+end)
+local default = useBackdropStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,2 @@
+export { default as Backdrop } from "./components/Backdrop";
+export { BackdropProps } from "./components/Backdrop";

package/out/ui/packages/backdrop/init.luau

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Backdrop = TS.import(script, script, "components", "Backdrop").default
+return exports

package/out/ui/packages/badge/components/Badge.styles.luau

@@ -4,6 +4,7 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
 local useBadgeStyles = componentStyles("Badge", function(theme)
+	local diameter = theme.spacing.calc(2) + theme.padding.calc(1)
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -14,13 +15,15 @@ local useBadgeStyles = componentStyles("Badge", function(theme)
 		badge = {
 			AnchorPoint = Vector2.new(0.5, 0.5),
 			Position = UDim2.fromScale(1, 0),
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromOffset(theme.padding.calc(2), theme.padding.calc(2)),
+			AutomaticSize = Enum.AutomaticSize.X,
+			Size = UDim2.fromOffset(diameter, diameter),
 			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,
+			TextYAlignment = Enum.TextYAlignment.Center,
 			ZIndex = 2,
 		},
 		padding = {
@@ -28,7 +31,7 @@ local useBadgeStyles = componentStyles("Badge", function(theme)
 			PaddingRight = UDim.new(0, theme.padding.calc(0.5)),
 		},
 		corner = {
-			CornerRadius = UDim.new(1, 0),
+			CornerRadius = UDim.new(0.5, 0),
 		},
 	})
 end)

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

@@ -0,0 +1,10 @@
+import { CustomizedProps } from "../../../../theme/index";
+import { ChoiceOption } from "../../radioGroup/index";
+export interface BottomNavigationProps<T> {
+    value: T;
+    options: ChoiceOption<T>[];
+    onChange: (value: T) => void;
+    disabled?: boolean;
+}
+declare function BottomNavigation<T>(props: CustomizedProps<Frame, BottomNavigationProps<T>>): JSX.Element;
+export default BottomNavigation;

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

@@ -0,0 +1,86 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+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 useBottomNavigationStyles = TS.import(script, script.Parent, "BottomNavigation.styles").default
+local function BottomNavigation(props)
+	local _binding = props
+	local value = _binding.value
+	local options = _binding.options
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useBottomNavigationStyles()
+	local count = math.max(#options, 1)
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "BottomNavigation"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = table.clone(styles.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#options)
+	local _callback = function(choice, index)
+		local active = canActivate(disabled or choice.disabled)
+		local selected = choice.value == value
+		local _attributes_2 = {
+			key = `{choice.label}-{index}`,
+		}
+		for _k, _v in cx(styles.item, selected and styles.selected, not active and styles.disabledItem) do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Size = UDim2.new(1 / count, 0, 1, 0)
+		_attributes_2.Text = choice.label
+		_attributes_2.LayoutOrder = index
+		_attributes_2.Active = active
+		_attributes_2.Selectable = active
+		_attributes_2.Event = {
+			Activated = function()
+				if active and choice.value ~= value then
+					onChange(choice.value)
+				end
+			end,
+		}
+		local _condition_1 = selected
+		if _condition_1 then
+			local _attributes_3 = {
+				key = "Indicator",
+			}
+			for _k, _v in styles.indicator do
+				_attributes_3[_k] = _v
+			end
+			_condition_1 = React.createElement("frame", _attributes_3)
+		end
+		return React.createElement("textbutton", _attributes_2, _condition_1)
+	end
+	for _k, _v in options do
+		_newValue[_k] = _callback(_v, _k - 1, options)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("frame", _attributes, _exp, _newValue)
+end
+local default = BottomNavigation
+return {
+	default = default,
+}

package/out/ui/packages/bottomNavigation/components/BottomNavigation.styles.d.ts

@@ -0,0 +1,2 @@
+declare const useBottomNavigationStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+export default useBottomNavigationStyles;