@rbxts/uiblox 0.2.0-alpha.11 → 0.2.0-alpha.13

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

@@ -5,6 +5,7 @@ export interface AlertProps {
     title?: string;
     message: string;
     onClose?: () => void;
+    filled?: boolean;
 }
 declare function Alert(props: CustomizedProps<Frame, AlertProps>): JSX.Element;
 export default Alert;

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

@@ -9,6 +9,7 @@ local function Alert(props)
 	local title = _binding.title
 	local message = _binding.message
 	local onClose = _binding.onClose
+	local filled = _binding.filled
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -17,6 +18,7 @@ local function Alert(props)
 	local styles = useAlertStyles({
 		severity = severity,
 		dismissible = dismissible,
+		filled = filled,
 	})
 	local _attributes = {}
 	local _condition = id

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

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

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

@@ -7,13 +7,14 @@ local alertSeverity = TS.import(script, script.Parent, "alertTone").alertSeverit
 local useAlertStyles = componentStyles("Alert", function(theme, _param)
 	local severity = _param.severity
 	local dismissible = _param.dismissible
+	local filled = _param.filled
 	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,
+			BackgroundColor3 = if filled == true then tone.main else tone.surface,
 			BorderSizePixel = 0,
 		},
 		padding = {
@@ -26,9 +27,9 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
 		stroke = {
-			Color = tone.border,
+			Color = if filled == true then tone.main else tone.border,
 			Thickness = 1,
-			Transparency = 0,
+			Transparency = if filled == true then 1 else 0,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
 		body = {
@@ -51,7 +52,7 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = tone.main,
+			TextColor3 = if filled == true then tone.on else tone.main,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			LayoutOrder = 1,
 		},
@@ -70,7 +71,7 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 		_condition = theme.typography.fontSizes.body
 	end
 	_object_1[_left_1] = _condition
-	_object_1.TextColor3 = theme.palette.text.primary
+	_object_1.TextColor3 = if filled == true then tone.on else theme.palette.text.primary
 	_object_1.TextXAlignment = Enum.TextXAlignment.Left
 	_object_1.TextWrapped = true
 	_object_1.LayoutOrder = 2
@@ -81,7 +82,7 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 		AnchorPoint = Vector2.new(1, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,
-		ImageColor3 = theme.palette.text.secondary,
+		ImageColor3 = if filled == true then tone.on else theme.palette.text.secondary,
 		ScaleType = Enum.ScaleType.Fit,
 		ZIndex = 2,
 	}

package/out/ui/packages/badge/components/Badge.d.ts

@@ -4,6 +4,7 @@ export interface BadgeProps {
     count?: number;
     max?: number;
     invisible?: boolean;
+    variant?: "standard" | "dot";
     children?: React.ReactNode;
 }
 declare function Badge(props: CustomizedProps<Frame, BadgeProps>): JSX.Element;

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

@@ -17,13 +17,20 @@ local function Badge(props)
 	if invisible == nil then
 		invisible = false
 	end
+	local variant = _binding.variant
+	if variant == nil then
+		variant = "standard"
+	end
 	local children = _binding.children
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useBadgeStyles()
-	local shown = not invisible and count > 0
+	local styles = useBadgeStyles({
+		variant = variant,
+	})
+	local isDot = variant == "dot"
+	local shown = not invisible and (isDot or count > 0)
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
@@ -53,13 +60,16 @@ local function Badge(props)
 		for _k, _v in styles.badge do
 			_attributes_1[_k] = _v
 		end
-		_attributes_1.Text = badgeText(count, max)
-		local _attributes_2 = table.clone(styles.padding)
+		_attributes_1.Text = if isDot then "" else badgeText(count, max)
+		local _condition_2 = isDot ~= true
+		if _condition_2 then
+			local _attributes_2 = table.clone(styles.padding)
+			setmetatable(_attributes_2, nil)
+			_condition_2 = React.createElement("uipadding", _attributes_2)
+		end
+		local _attributes_2 = table.clone(styles.corner)
 		setmetatable(_attributes_2, nil)
-		local _exp_1 = React.createElement("uipadding", _attributes_2)
-		local _attributes_3 = table.clone(styles.corner)
-		setmetatable(_attributes_3, nil)
-		_condition_1 = (React.createElement("textlabel", _attributes_1, _exp_1, React.createElement("uicorner", _attributes_3)))
+		_condition_1 = (React.createElement("textlabel", _attributes_1, _condition_2, React.createElement("uicorner", _attributes_2)))
 	end
 	return React.createElement("frame", _attributes, _exp, _condition_1)
 end

package/out/ui/packages/badge/components/Badge.styles.d.ts

@@ -1,2 +1,4 @@
-declare const useBadgeStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+declare const useBadgeStyles: (props: {
+    variant?: "standard" | "dot";
+}) => import("../../../../theme/index").ClassNameMap<string>;
 export default useBadgeStyles;

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

@@ -3,8 +3,12 @@ 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 useBadgeStyles = componentStyles("Badge", function(theme)
-	local diameter = theme.spacing.calc(2) + theme.padding.calc(1)
+local useBadgeStyles = componentStyles("Badge", function(theme, _param)
+	local variant = _param.variant
+	if variant == nil then
+		variant = "standard"
+	end
+	local diameter = if variant == "dot" then theme.spacing.calc(1) else theme.spacing.calc(2) + theme.padding.calc(1)
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -15,7 +19,7 @@ local useBadgeStyles = componentStyles("Badge", function(theme)
 		badge = {
 			AnchorPoint = Vector2.new(0.5, 0.5),
 			Position = UDim2.fromScale(1, 0),
-			AutomaticSize = Enum.AutomaticSize.X,
+			AutomaticSize = if variant == "dot" then Enum.AutomaticSize.None else Enum.AutomaticSize.X,
 			Size = UDim2.fromOffset(diameter, diameter),
 			BackgroundColor3 = theme.palette.status.error.main,
 			BorderSizePixel = 0,
@@ -27,8 +31,8 @@ local useBadgeStyles = componentStyles("Badge", function(theme)
 			ZIndex = 2,
 		},
 		padding = {
-			PaddingLeft = UDim.new(0, theme.padding.calc(0.5)),
-			PaddingRight = UDim.new(0, theme.padding.calc(0.5)),
+			PaddingLeft = UDim.new(0, if variant == "dot" then 0 else theme.padding.calc(0.5)),
+			PaddingRight = UDim.new(0, if variant == "dot" then 0 else theme.padding.calc(0.5)),
 		},
 		corner = {
 			CornerRadius = UDim.new(0.5, 0),

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

@@ -5,6 +5,7 @@ export interface BottomNavigationProps<T> {
     options: ChoiceOption<T>[];
     onChange: (value: T) => void;
     disabled?: boolean;
+    showLabels?: boolean;
 }
 declare function BottomNavigation<T>(props: CustomizedProps<Frame, BottomNavigationProps<T>>): JSX.Element;
 export default BottomNavigation;

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

@@ -10,11 +10,17 @@ local function BottomNavigation(props)
 	local options = _binding.options
 	local onChange = _binding.onChange
 	local disabled = _binding.disabled
+	local showLabels = _binding.showLabels
+	if showLabels == nil then
+		showLabels = true
+	end
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useBottomNavigationStyles()
+	local styles = useBottomNavigationStyles({
+		showLabels = showLabels,
+	})
 	local count = math.max(#options, 1)
 	local _attributes = {}
 	local _condition = id
@@ -51,7 +57,7 @@ local function BottomNavigation(props)
 			_attributes_2[_k] = _v
 		end
 		_attributes_2.Size = UDim2.new(1 / count, 0, 1, 0)
-		_attributes_2.Text = choice.label
+		_attributes_2.Text = if showLabels == false then "" else choice.label
 		_attributes_2.LayoutOrder = index
 		_attributes_2.Active = active
 		_attributes_2.Selectable = active

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

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

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

@@ -3,10 +3,14 @@ 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 useBottomNavigationStyles = componentStyles("BottomNavigation", function(theme)
+local useBottomNavigationStyles = componentStyles("BottomNavigation", function(theme, _param)
+	local showLabels = _param.showLabels
+	if showLabels == nil then
+		showLabels = true
+	end
 	local _object = {
 		root = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(7)),
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(if showLabels == false then 5 else 7)),
 			BackgroundColor3 = theme.palette.surface.elevated,
 			BorderSizePixel = 0,
 			ZIndex = 11000,

package/out/ui/packages/checkbox/components/checkboxLook.d.ts

@@ -2,4 +2,4 @@ export type CheckboxPointer = "rest" | "hover" | "press" | "focus";
 export declare function checkboxMark(value: boolean, mixed?: boolean): "" | "–" | "✓";
 export declare function checkboxPointer(hovering: boolean, pressed: boolean, focused: boolean): CheckboxPointer;
 export declare function checkboxBoxTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 1 | 0 | 0.7 | 0.55 | 0.85;
-export declare function checkboxStrokeTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 0 | 0.25 | 0.45 | 0.55 | 0.2;
+export declare function checkboxStrokeTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 0 | 0.25 | 0.55 | 0.45 | 0.2;

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

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

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

@@ -6,6 +6,7 @@ local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
 local EmptyListHint = TS.import(script, script.Parent.Parent.Parent, "virtualList").EmptyListHint
 local useMenuStyles = TS.import(script, script.Parent, "Menu.styles").default
 local ROW = 28
+local ROW_DENSE = 22
 local function Menu(props)
 	local _binding = props
 	local anchor = _binding.anchor
@@ -15,12 +16,14 @@ local function Menu(props)
 	local onClose = _binding.onClose
 	local emptyText = _binding.emptyText
 	local empty = _binding.empty
+	local dense = _binding.dense
 	local styles = useMenuStyles()
 	if not open then
 		return nil
 	end
 	local vacant = #items == 0
-	local height = if vacant then ROW else #items * ROW
+	local row = if dense == true then ROW_DENSE else ROW
+	local height = if vacant then row else #items * row
 	local _attributes = {
 		key = "Surface",
 	}
@@ -46,7 +49,7 @@ local function Menu(props)
 				_condition_1 = "No options"
 			end
 			_attributes_4.text = _condition_1
-			_attributes_4.height = ROW
+			_attributes_4.height = row
 			_condition = React.createElement(EmptyListHint, _attributes_4)
 		end
 		_result = _condition
@@ -58,6 +61,7 @@ local function Menu(props)
 				key = item.id,
 				text = item.text,
 				disabled = item.disabled,
+				dense = dense,
 				onActivated = function()
 					if item.disabled == true then
 						return nil

package/out/ui/packages/rating/components/Rating.d.ts

@@ -1,7 +1,8 @@
-import { CustomizedProps } from "../../../../theme/index";
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
 export interface RatingProps {
     value: number;
     max?: number;
+    size?: ControlSize;
     disabled?: boolean;
     onChange: (value: number) => void;
 }

package/out/ui/packages/rating/components/Rating.luau

@@ -11,6 +11,10 @@ local function Rating(props)
 	if max == nil then
 		max = 5
 	end
+	local size = _binding.size
+	if size == nil then
+		size = "medium"
+	end
 	local disabled = _binding.disabled
 	local onChange = _binding.onChange
 	local className = _binding.className
@@ -19,6 +23,7 @@ local function Rating(props)
 	local ref = _binding.ref
 	local styles = useRatingStyles({
 		disabled = disabled,
+		size = size,
 	})
 	local active = canActivate(disabled)
 	local stars = {}

package/out/ui/packages/rating/components/Rating.styles.d.ts

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

package/out/ui/packages/rating/components/Rating.styles.luau

@@ -8,6 +8,11 @@ local useRatingStyles = componentStyles("Rating", function(theme, _param)
 	if disabled == nil then
 		disabled = false
 	end
+	local size = _param.size
+	if size == nil then
+		size = "medium"
+	end
+	local star = if size == "small" then theme.spacing.calc(2) elseif size == "large" then theme.spacing.calc(4) else theme.spacing.calc(3)
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -20,10 +25,10 @@ local useRatingStyles = componentStyles("Rating", function(theme, _param)
 			HorizontalAlignment = Enum.HorizontalAlignment.Left,
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
+			Padding = UDim.new(0, theme.padding.calc(if size == "small" then 0.25 else 0.5)),
 		},
 		star = {
-			Size = UDim2.fromOffset(theme.spacing.calc(3), theme.spacing.calc(3)),
+			Size = UDim2.fromOffset(star, star),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,

package/out/ui/packages/speedDial/components/SpeedDial.d.ts

@@ -1,5 +1,6 @@
 import { CustomizedProps } from "../../../../theme/index";
 import { Icons } from "../../../enums/index";
+import { SpeedDialDirection } from "./SpeedDial.styles";
 export interface SpeedDialAction {
     icon: Icons;
     disabled?: boolean;
@@ -12,6 +13,7 @@ export interface SpeedDialProps {
     icon?: Icons;
     openIcon?: Icons;
     disabled?: boolean;
+    direction?: SpeedDialDirection;
 }
 declare function SpeedDial(props: CustomizedProps<Frame, SpeedDialProps>): JSX.Element;
 export default SpeedDial;

package/out/ui/packages/speedDial/components/SpeedDial.luau

@@ -18,11 +18,20 @@ local function SpeedDial(props)
 		openIcon = Icons.Close
 	end
 	local disabled = _binding.disabled
+	local direction = _binding.direction
+	if direction == nil then
+		direction = "up"
+	end
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useSpeedDialStyles()
+	local styles = useSpeedDialStyles({
+		direction = direction,
+	})
+	local mainFirst = direction == "down" or direction == "right"
+	local mainOrder = if mainFirst then 0 else 1000
+	local actionBase = if mainFirst then 1 else 0
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
@@ -64,7 +73,7 @@ local function SpeedDial(props)
 					onOpenChange(false)
 				end,
 				className = {
-					LayoutOrder = index,
+					LayoutOrder = actionBase + index,
 				},
 			})
 		end
@@ -82,7 +91,7 @@ local function SpeedDial(props)
 			return onOpenChange(not open)
 		end,
 		className = {
-			LayoutOrder = 1000,
+			LayoutOrder = mainOrder,
 		},
 	}))
 end

package/out/ui/packages/speedDial/components/SpeedDial.styles.d.ts

@@ -1,2 +1,5 @@
-declare const useSpeedDialStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+export type SpeedDialDirection = "up" | "down" | "left" | "right";
+declare const useSpeedDialStyles: (props: {
+    direction?: SpeedDialDirection;
+}) => import("../../../../theme/index").ClassNameMap<string>;
 export default useSpeedDialStyles;

package/out/ui/packages/speedDial/components/SpeedDial.styles.luau

@@ -3,7 +3,12 @@ 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 useSpeedDialStyles = componentStyles("SpeedDial", function(theme)
+local useSpeedDialStyles = componentStyles("SpeedDial", function(theme, _param)
+	local direction = _param.direction
+	if direction == nil then
+		direction = "up"
+	end
+	local vertical = direction == "up" or direction == "down"
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -12,9 +17,9 @@ local useSpeedDialStyles = componentStyles("SpeedDial", function(theme)
 			BorderSizePixel = 0,
 		},
 		list = {
-			FillDirection = Enum.FillDirection.Vertical,
-			HorizontalAlignment = Enum.HorizontalAlignment.Center,
-			VerticalAlignment = Enum.VerticalAlignment.Bottom,
+			FillDirection = if vertical then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
+			HorizontalAlignment = if direction == "left" then Enum.HorizontalAlignment.Right elseif direction == "right" then Enum.HorizontalAlignment.Left else Enum.HorizontalAlignment.Center,
+			VerticalAlignment = if direction == "up" then Enum.VerticalAlignment.Bottom elseif direction == "down" then Enum.VerticalAlignment.Top else Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 			Padding = UDim.new(0, theme.padding.calc(1)),
 		},

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

@@ -1,2 +1,3 @@
 export { default as SpeedDial } from "./components/SpeedDial";
 export { SpeedDialProps, SpeedDialAction } from "./components/SpeedDial";
+export { SpeedDialDirection } from "./components/SpeedDial.styles";

package/out/ui/packages/splitPane/components/splitLook.d.ts

@@ -1,5 +1,5 @@
 export type SplitPointer = "rest" | "hover" | "press";
 export declare function splitPointer(hovering: boolean, pressed: boolean): SplitPointer;
-export declare function splitRuleTransparency(pointer: SplitPointer, disabled?: boolean): 0.25 | 0.7 | 0.55 | 0.35;
+export declare function splitRuleTransparency(pointer: SplitPointer, disabled?: boolean): 0.25 | 0.35 | 0.7 | 0.55;
 export declare function splitMarkTransparency(pointer: SplitPointer, disabled?: boolean): 0 | 0.55 | 0.1;
 export declare function splitHitTransparency(pointer: SplitPointer, disabled?: boolean): 1 | 0.9 | 0.94;