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

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/card/components/Card.d.ts

@@ -4,6 +4,7 @@ export interface CardProps {
     title?: string;
     subtitle?: string;
     elevation?: PaperElevation;
+    square?: boolean;
     actions?: React.ReactNode;
     children?: React.ReactNode;
 }

package/out/ui/packages/card/components/Card.luau

@@ -11,6 +11,7 @@ local function Card(props)
 	if elevation == nil then
 		elevation = "flat"
 	end
+	local square = _binding.square
 	local actions = _binding.actions
 	local children = _binding.children
 	local styles = useCardStyles()
@@ -66,6 +67,7 @@ local function Card(props)
 	end
 	return React.createElement(Paper, {
 		elevation = elevation,
+		square = square,
 	}, React.createElement("frame", _attributes, _exp, _condition, _condition_1, _exp_1, _condition_2))
 end
 local default = Card

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/drawer/components/Drawer.d.ts

@@ -4,6 +4,7 @@ export interface DrawerProps {
     host?: Instance;
     open: boolean;
     edge?: DrawerEdge;
+    width?: number;
     onClose: () => void;
     children?: React.ReactNode;
 }

package/out/ui/packages/drawer/components/Drawer.luau

@@ -17,9 +17,12 @@ local function Drawer(props)
 	if edge == nil then
 		edge = "left"
 	end
+	local width = _binding.width
 	local onClose = _binding.onClose
 	local children = _binding.children
-	local styles = useDrawerStyles()
+	local styles = useDrawerStyles({
+		width = width,
+	})
 	local close = useRef(onClose)
 	close.current = onClose
 	useEffect(function()

package/out/ui/packages/drawer/components/Drawer.styles.d.ts

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

package/out/ui/packages/drawer/components/Drawer.styles.luau

@@ -3,7 +3,8 @@ 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 useDrawerStyles = componentStyles("Drawer", function(theme)
+local useDrawerStyles = componentStyles("Drawer", function(theme, _param)
+	local width = _param.width
 	return createStyles({
 		root = {
 			Size = UDim2.fromScale(1, 1),
@@ -21,7 +22,7 @@ local useDrawerStyles = componentStyles("Drawer", function(theme)
 			ZIndex = 30000,
 		},
 		panel = {
-			Size = UDim2.new(0, theme.spacing.calc(20), 1, 0),
+			Size = UDim2.new(0, if width ~= nil and width > 0 then width else theme.spacing.calc(20), 1, 0),
 			BackgroundColor3 = theme.palette.surface.elevated,
 			BorderSizePixel = 0,
 			ZIndex = 30001,

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;

package/out/ui/packages/stateMatrix.luau

@@ -1255,50 +1255,56 @@ local function surfacesRows()
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("Chip", "default")
+	local _array_33 = pair("Card", "square", {
+		variant = "square",
+	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("Chip", "size-small", {
-		size = "small",
-	})
+	local _array_34 = pair("Chip", "default")
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("Chip", "size-large", {
-		size = "large",
+	local _array_35 = pair("Chip", "size-small", {
+		size = "small",
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("Chip", "selected", {
-		value = true,
+	local _array_36 = pair("Chip", "size-large", {
+		size = "large",
 	})
 	local _Length_35 = #_array_36
 	table.move(_array_36, 1, _Length_35, _length + 1, _array)
 	_length += _Length_35
-	local _array_37 = pair("Chip", "disabled", {
-		disabled = true,
+	local _array_37 = pair("Chip", "selected", {
+		value = true,
 	})
 	local _Length_36 = #_array_37
 	table.move(_array_37, 1, _Length_36, _length + 1, _array)
 	_length += _Length_36
-	local _array_38 = pair("Chip", "deletable", {
-		text = "Tag",
+	local _array_38 = pair("Chip", "disabled", {
+		disabled = true,
 	})
 	local _Length_37 = #_array_38
 	table.move(_array_38, 1, _Length_37, _length + 1, _array)
 	_length += _Length_37
-	local _array_39 = pair("Badge", "count", {
-		value = 3,
+	local _array_39 = pair("Chip", "deletable", {
+		text = "Tag",
 	})
 	local _Length_38 = #_array_39
 	table.move(_array_39, 1, _Length_38, _length + 1, _array)
 	_length += _Length_38
-	local _array_40 = pair("Badge", "max", {
+	local _array_40 = pair("Badge", "count", {
+		value = 3,
+	})
+	local _Length_39 = #_array_40
+	table.move(_array_40, 1, _Length_39, _length + 1, _array)
+	_length += _Length_39
+	local _array_41 = pair("Badge", "max", {
 		value = 100,
 	})
-	table.move(_array_40, 1, #_array_40, _length + 1, _array)
+	table.move(_array_41, 1, #_array_41, _length + 1, _array)
 	return _array
 end
 local function chromeRows()
@@ -1310,264 +1316,291 @@ local function chromeRows()
 	local _Length = #_array_1
 	table.move(_array_1, 1, _Length, _length + 1, _array)
 	_length += _Length
-	local _array_2 = pair("Avatar", "initials", {
-		text = "BL",
+	local _array_2 = pair("Badge", "dot", {
+		variant = "dot",
 	})
 	local _Length_1 = #_array_2
 	table.move(_array_2, 1, _Length_1, _length + 1, _array)
 	_length += _Length_1
-	local _array_3 = pair("Avatar", "image", {
-		variant = "image",
+	local _array_3 = pair("Avatar", "initials", {
+		text = "BL",
 	})
 	local _Length_2 = #_array_3
 	table.move(_array_3, 1, _Length_2, _length + 1, _array)
 	_length += _Length_2
-	local _array_4 = pair("Avatar", "small", {
-		size = "small",
+	local _array_4 = pair("Avatar", "image", {
+		variant = "image",
 	})
 	local _Length_3 = #_array_4
 	table.move(_array_4, 1, _Length_3, _length + 1, _array)
 	_length += _Length_3
-	local _array_5 = pair("Drawer", "closed", {
-		open = false,
+	local _array_5 = pair("Avatar", "small", {
+		size = "small",
 	})
 	local _Length_4 = #_array_5
 	table.move(_array_5, 1, _Length_4, _length + 1, _array)
 	_length += _Length_4
-	local _array_6 = pair("Drawer", "left", {
-		open = true,
-		variant = "left",
+	local _array_6 = pair("Drawer", "closed", {
+		open = false,
 	})
 	local _Length_5 = #_array_6
 	table.move(_array_6, 1, _Length_5, _length + 1, _array)
 	_length += _Length_5
-	local _array_7 = pair("Drawer", "right", {
+	local _array_7 = pair("Drawer", "left", {
 		open = true,
-		variant = "right",
+		variant = "left",
 	})
 	local _Length_6 = #_array_7
 	table.move(_array_7, 1, _Length_6, _length + 1, _array)
 	_length += _Length_6
-	local _array_8 = pair("Breadcrumbs", "single", {
-		text = "Home",
+	local _array_8 = pair("Drawer", "right", {
+		open = true,
+		variant = "right",
 	})
 	local _Length_7 = #_array_8
 	table.move(_array_8, 1, _Length_7, _length + 1, _array)
 	_length += _Length_7
-	local _array_9 = pair("Breadcrumbs", "trail", {
-		text = "Home / Library / Item",
+	local _array_9 = pair("Drawer", "wide", {
+		open = true,
+		variant = "wide",
 	})
 	local _Length_8 = #_array_9
 	table.move(_array_9, 1, _Length_8, _length + 1, _array)
 	_length += _Length_8
-	local _array_10 = pair("Breadcrumbs", "collapsed", {
-		text = "Home / … / Item",
-		size = "small",
+	local _array_10 = pair("Breadcrumbs", "single", {
+		text = "Home",
 	})
 	local _Length_9 = #_array_10
 	table.move(_array_10, 1, _Length_9, _length + 1, _array)
 	_length += _Length_9
-	local _array_11 = pair("Breadcrumbs", "custom-separator", {
-		text = "Home > Item",
+	local _array_11 = pair("Breadcrumbs", "trail", {
+		text = "Home / Library / Item",
 	})
 	local _Length_10 = #_array_11
 	table.move(_array_11, 1, _Length_10, _length + 1, _array)
 	_length += _Length_10
-	local _array_12 = pair("Pagination", "first", {
-		value = 1,
+	local _array_12 = pair("Breadcrumbs", "collapsed", {
+		text = "Home / … / Item",
+		size = "small",
 	})
 	local _Length_11 = #_array_12
 	table.move(_array_12, 1, _Length_11, _length + 1, _array)
 	_length += _Length_11
-	local _array_13 = pair("Pagination", "middle", {
-		value = 3,
+	local _array_13 = pair("Breadcrumbs", "custom-separator", {
+		text = "Home > Item",
 	})
 	local _Length_12 = #_array_13
 	table.move(_array_13, 1, _Length_12, _length + 1, _array)
 	_length += _Length_12
-	local _array_14 = pair("Pagination", "collapsed", {
-		value = 10,
-		size = "large",
+	local _array_14 = pair("Pagination", "first", {
+		value = 1,
 	})
 	local _Length_13 = #_array_14
 	table.move(_array_14, 1, _Length_13, _length + 1, _array)
 	_length += _Length_13
-	local _array_15 = pair("Pagination", "disabled", {
-		value = 2,
-		disabled = true,
+	local _array_15 = pair("Pagination", "middle", {
+		value = 3,
 	})
 	local _Length_14 = #_array_15
 	table.move(_array_15, 1, _Length_14, _length + 1, _array)
 	_length += _Length_14
-	local _array_16 = pair("Stepper", "first", {
-		value = 0,
+	local _array_16 = pair("Pagination", "collapsed", {
+		value = 10,
+		size = "large",
 	})
 	local _Length_15 = #_array_16
 	table.move(_array_16, 1, _Length_15, _length + 1, _array)
 	_length += _Length_15
-	local _array_17 = pair("Stepper", "middle", {
-		value = 1,
+	local _array_17 = pair("Pagination", "disabled", {
+		value = 2,
+		disabled = true,
 	})
 	local _Length_16 = #_array_17
 	table.move(_array_17, 1, _Length_16, _length + 1, _array)
 	_length += _Length_16
-	local _array_18 = pair("Stepper", "last", {
-		value = 2,
+	local _array_18 = pair("Stepper", "first", {
+		value = 0,
 	})
 	local _Length_17 = #_array_18
 	table.move(_array_18, 1, _Length_17, _length + 1, _array)
 	_length += _Length_17
-	local _array_19 = pair("Accordion", "closed", {
-		open = false,
+	local _array_19 = pair("Stepper", "middle", {
+		value = 1,
 	})
 	local _Length_18 = #_array_19
 	table.move(_array_19, 1, _Length_18, _length + 1, _array)
 	_length += _Length_18
-	local _array_20 = pair("Accordion", "open", {
-		open = true,
+	local _array_20 = pair("Stepper", "last", {
+		value = 2,
 	})
 	local _Length_19 = #_array_20
 	table.move(_array_20, 1, _Length_19, _length + 1, _array)
 	_length += _Length_19
-	local _array_21 = pair("Accordion", "disabled", {
-		open = false,
-		disabled = true,
+	local _array_21 = pair("Stepper", "vertical", {
+		value = 1,
+		variant = "vertical",
 	})
 	local _Length_20 = #_array_21
 	table.move(_array_21, 1, _Length_20, _length + 1, _array)
 	_length += _Length_20
-	local _array_22 = pair("Snackbar", "open", {
-		open = true,
-		text = "Saved",
+	local _array_22 = pair("Accordion", "closed", {
+		open = false,
 	})
 	local _Length_21 = #_array_22
 	table.move(_array_22, 1, _Length_21, _length + 1, _array)
 	_length += _Length_21
-	local _array_23 = pair("Snackbar", "closed", {
-		open = false,
-		text = "Saved",
+	local _array_23 = pair("Accordion", "open", {
+		open = true,
 	})
 	local _Length_22 = #_array_23
 	table.move(_array_23, 1, _Length_22, _length + 1, _array)
 	_length += _Length_22
-	local _array_24 = pair("Table", "empty", {
-		text = "",
+	local _array_24 = pair("Accordion", "disabled", {
+		open = false,
+		disabled = true,
 	})
 	local _Length_23 = #_array_24
 	table.move(_array_24, 1, _Length_23, _length + 1, _array)
 	_length += _Length_23
-	local _array_25 = pair("Table", "default", {
-		text = "Name / Role",
+	local _array_25 = pair("Snackbar", "open", {
+		open = true,
+		text = "Saved",
 	})
 	local _Length_24 = #_array_25
 	table.move(_array_25, 1, _Length_24, _length + 1, _array)
 	_length += _Length_24
-	local _array_26 = pair("Table", "selected", {
-		text = "Name / Role",
-		value = 0,
+	local _array_26 = pair("Snackbar", "closed", {
+		open = false,
+		text = "Saved",
 	})
 	local _Length_25 = #_array_26
 	table.move(_array_26, 1, _Length_25, _length + 1, _array)
 	_length += _Length_25
-	local _array_27 = pair("Autocomplete", "default", {
-		value = "Continue",
-		options = { "Continue", "Other" },
+	local _array_27 = pair("Table", "empty", {
+		text = "",
 	})
 	local _Length_26 = #_array_27
 	table.move(_array_27, 1, _Length_26, _length + 1, _array)
 	_length += _Length_26
-	local _array_28 = pair("Autocomplete", "open", {
-		value = "Continue",
-		options = { "Continue", "Other" },
-		open = true,
+	local _array_28 = pair("Table", "default", {
+		text = "Name / Role",
 	})
 	local _Length_27 = #_array_28
 	table.move(_array_28, 1, _Length_27, _length + 1, _array)
 	_length += _Length_27
-	local _array_29 = pair("Autocomplete", "disabled", {
-		value = "Continue",
-		options = { "Continue", "Other" },
-		disabled = true,
+	local _array_29 = pair("Table", "selected", {
+		text = "Name / Role",
+		value = 0,
 	})
 	local _Length_28 = #_array_29
 	table.move(_array_29, 1, _Length_28, _length + 1, _array)
 	_length += _Length_28
-	local _array_30 = pair("Autocomplete", "empty", {
-		value = "",
-		options = {},
-		open = true,
+	local _array_30 = pair("Table", "dense", {
+		text = "Name / Role",
+		variant = "dense",
 	})
 	local _Length_29 = #_array_30
 	table.move(_array_30, 1, _Length_29, _length + 1, _array)
 	_length += _Length_29
-	local _array_31 = pair("Autocomplete", "no-results", {
+	local _array_31 = pair("Autocomplete", "default", {
 		value = "Continue",
 		options = { "Continue", "Other" },
-		open = true,
-		filter = "zzz",
 	})
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("Fab", "default")
+	local _array_32 = pair("Autocomplete", "open", {
+		value = "Continue",
+		options = { "Continue", "Other" },
+		open = true,
+	})
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("Fab", "extended", {
-		text = "Compose",
+	local _array_33 = pair("Autocomplete", "disabled", {
+		value = "Continue",
+		options = { "Continue", "Other" },
+		disabled = true,
 	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("Fab", "small", {
-		size = "small",
+	local _array_34 = pair("Autocomplete", "empty", {
+		value = "",
+		options = {},
+		open = true,
 	})
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("Fab", "large", {
-		size = "large",
+	local _array_35 = pair("Autocomplete", "no-results", {
+		value = "Continue",
+		options = { "Continue", "Other" },
+		open = true,
+		filter = "zzz",
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("Fab", "disabled", {
-		disabled = true,
-	})
+	local _array_36 = pair("Fab", "default")
 	local _Length_35 = #_array_36
 	table.move(_array_36, 1, _Length_35, _length + 1, _array)
 	_length += _Length_35
-	local _array_37 = pair("Fab", "loading", {
-		loading = true,
+	local _array_37 = pair("Fab", "extended", {
+		text = "Compose",
 	})
 	local _Length_36 = #_array_37
 	table.move(_array_37, 1, _Length_36, _length + 1, _array)
 	_length += _Length_36
-	local _array_38 = pair("AppBar", "default", {
-		text = "Storyblox",
+	local _array_38 = pair("Fab", "small", {
+		size = "small",
 	})
 	local _Length_37 = #_array_38
 	table.move(_array_38, 1, _Length_37, _length + 1, _array)
 	_length += _Length_37
-	local _array_39 = pair("AppBar", "flat", {
-		text = "Storyblox",
-		variant = "flat",
+	local _array_39 = pair("Fab", "large", {
+		size = "large",
 	})
 	local _Length_38 = #_array_39
 	table.move(_array_39, 1, _Length_38, _length + 1, _array)
 	_length += _Length_38
-	local _array_40 = pair("AppBar", "raised", {
-		text = "Storyblox",
-		variant = "raised",
+	local _array_40 = pair("Fab", "disabled", {
+		disabled = true,
 	})
 	local _Length_39 = #_array_40
 	table.move(_array_40, 1, _Length_39, _length + 1, _array)
 	_length += _Length_39
-	local _array_41 = pair("BottomNavigation", "default", {
+	local _array_41 = pair("Fab", "loading", {
+		loading = true,
+	})
+	local _Length_40 = #_array_41
+	table.move(_array_41, 1, _Length_40, _length + 1, _array)
+	_length += _Length_40
+	local _array_42 = pair("AppBar", "default", {
+		text = "Storyblox",
+	})
+	local _Length_41 = #_array_42
+	table.move(_array_42, 1, _Length_41, _length + 1, _array)
+	_length += _Length_41
+	local _array_43 = pair("AppBar", "flat", {
+		text = "Storyblox",
+		variant = "flat",
+	})
+	local _Length_42 = #_array_43
+	table.move(_array_43, 1, _Length_42, _length + 1, _array)
+	_length += _Length_42
+	local _array_44 = pair("AppBar", "raised", {
+		text = "Storyblox",
+		variant = "raised",
+	})
+	local _Length_43 = #_array_44
+	table.move(_array_44, 1, _Length_43, _length + 1, _array)
+	_length += _Length_43
+	local _array_45 = pair("BottomNavigation", "default", {
 		value = "Home",
 		options = { "Home", "Search", "Profile" },
 	})
-	table.move(_array_41, 1, #_array_41, _length + 1, _array)
+	table.move(_array_45, 1, #_array_45, _length + 1, _array)
 	return _array
 end
 local function miscRows()
@@ -1693,172 +1726,193 @@ local function miscRows()
 	local _Length_17 = #_array_18
 	table.move(_array_18, 1, _Length_17, _length + 1, _array)
 	_length += _Length_17
-	local _array_19 = pair("Stack", "column", {
-		variant = "column",
+	local _array_19 = pair("Rating", "size-small", {
+		value = 3,
+		size = "small",
 	})
 	local _Length_18 = #_array_19
 	table.move(_array_19, 1, _Length_18, _length + 1, _array)
 	_length += _Length_18
-	local _array_20 = pair("Stack", "row", {
-		variant = "row",
+	local _array_20 = pair("Stack", "column", {
+		variant = "column",
 	})
 	local _Length_19 = #_array_20
 	table.move(_array_20, 1, _Length_19, _length + 1, _array)
 	_length += _Length_19
-	local _array_21 = pair("Stack", "spaced", {
-		variant = "column",
-		size = "large",
+	local _array_21 = pair("Stack", "row", {
+		variant = "row",
 	})
 	local _Length_20 = #_array_21
 	table.move(_array_21, 1, _Length_20, _length + 1, _array)
 	_length += _Length_20
-	local _array_22 = pair("Box", "plain")
+	local _array_22 = pair("Stack", "spaced", {
+		variant = "column",
+		size = "large",
+	})
 	local _Length_21 = #_array_22
 	table.move(_array_22, 1, _Length_21, _length + 1, _array)
 	_length += _Length_21
-	local _array_23 = pair("Box", "padded", {
-		size = "medium",
-	})
+	local _array_23 = pair("Box", "plain")
 	local _Length_22 = #_array_23
 	table.move(_array_23, 1, _Length_22, _length + 1, _array)
 	_length += _Length_22
-	local _array_24 = pair("Box", "paper", {
-		variant = "paper",
+	local _array_24 = pair("Box", "padded", {
+		size = "medium",
 	})
 	local _Length_23 = #_array_24
 	table.move(_array_24, 1, _Length_23, _length + 1, _array)
 	_length += _Length_23
-	local _array_25 = pair("Container", "default", {
-		variant = "lg",
+	local _array_25 = pair("Box", "paper", {
+		variant = "paper",
 	})
 	local _Length_24 = #_array_25
 	table.move(_array_25, 1, _Length_24, _length + 1, _array)
 	_length += _Length_24
-	local _array_26 = pair("Container", "sm", {
-		variant = "sm",
+	local _array_26 = pair("Container", "default", {
+		variant = "lg",
 	})
 	local _Length_25 = #_array_26
 	table.move(_array_26, 1, _Length_25, _length + 1, _array)
 	_length += _Length_25
-	local _array_27 = pair("Container", "fluid", {
-		variant = "false",
+	local _array_27 = pair("Container", "sm", {
+		variant = "sm",
 	})
 	local _Length_26 = #_array_27
 	table.move(_array_27, 1, _Length_26, _length + 1, _array)
 	_length += _Length_26
-	local _array_28 = pair("Backdrop", "default")
+	local _array_28 = pair("Container", "fluid", {
+		variant = "false",
+	})
 	local _Length_27 = #_array_28
 	table.move(_array_28, 1, _Length_27, _length + 1, _array)
 	_length += _Length_27
-	local _array_29 = pair("Backdrop", "invisible", {
-		variant = "invisible",
-	})
+	local _array_29 = pair("Backdrop", "default")
 	local _Length_28 = #_array_29
 	table.move(_array_29, 1, _Length_28, _length + 1, _array)
 	_length += _Length_28
-	local _array_30 = pair("Backdrop", "closed", {
-		open = false,
+	local _array_30 = pair("Backdrop", "invisible", {
+		variant = "invisible",
 	})
 	local _Length_29 = #_array_30
 	table.move(_array_30, 1, _Length_29, _length + 1, _array)
 	_length += _Length_29
-	local _array_31 = pair("Divider", "horizontal", {
-		variant = "horizontal",
+	local _array_31 = pair("Backdrop", "closed", {
+		open = false,
 	})
 	local _Length_30 = #_array_31
 	table.move(_array_31, 1, _Length_30, _length + 1, _array)
 	_length += _Length_30
-	local _array_32 = pair("Divider", "vertical", {
-		variant = "vertical",
+	local _array_32 = pair("Divider", "horizontal", {
+		variant = "horizontal",
 	})
 	local _Length_31 = #_array_32
 	table.move(_array_32, 1, _Length_31, _length + 1, _array)
 	_length += _Length_31
-	local _array_33 = pair("ImageList", "default")
+	local _array_33 = pair("Divider", "vertical", {
+		variant = "vertical",
+	})
 	local _Length_32 = #_array_33
 	table.move(_array_33, 1, _Length_32, _length + 1, _array)
 	_length += _Length_32
-	local _array_34 = pair("ImageList", "dense", {
-		size = "small",
-	})
+	local _array_34 = pair("ImageList", "default")
 	local _Length_33 = #_array_34
 	table.move(_array_34, 1, _Length_33, _length + 1, _array)
 	_length += _Length_33
-	local _array_35 = pair("ImageList", "wide", {
-		size = "large",
+	local _array_35 = pair("ImageList", "dense", {
+		size = "small",
 	})
 	local _Length_34 = #_array_35
 	table.move(_array_35, 1, _Length_34, _length + 1, _array)
 	_length += _Length_34
-	local _array_36 = pair("SpeedDial", "closed", {
-		open = false,
+	local _array_36 = pair("ImageList", "wide", {
+		size = "large",
 	})
 	local _Length_35 = #_array_36
 	table.move(_array_36, 1, _Length_35, _length + 1, _array)
 	_length += _Length_35
-	local _array_37 = pair("SpeedDial", "open", {
-		open = true,
+	local _array_37 = pair("SpeedDial", "closed", {
+		open = false,
 	})
 	local _Length_36 = #_array_37
 	table.move(_array_37, 1, _Length_36, _length + 1, _array)
 	_length += _Length_36
-	local _array_38 = pair("SpeedDial", "disabled", {
-		open = false,
-		disabled = true,
+	local _array_38 = pair("SpeedDial", "open", {
+		open = true,
 	})
 	local _Length_37 = #_array_38
 	table.move(_array_38, 1, _Length_37, _length + 1, _array)
 	_length += _Length_37
-	local _array_39 = pair("FormLabel", "default", {
-		text = "Email",
+	local _array_39 = pair("SpeedDial", "disabled", {
+		open = false,
+		disabled = true,
 	})
 	local _Length_38 = #_array_39
 	table.move(_array_39, 1, _Length_38, _length + 1, _array)
 	_length += _Length_38
-	local _array_40 = pair("FormLabel", "required", {
-		text = "Email",
-		value = true,
+	local _array_40 = pair("SpeedDial", "down", {
+		open = true,
+		variant = "down",
 	})
 	local _Length_39 = #_array_40
 	table.move(_array_40, 1, _Length_39, _length + 1, _array)
 	_length += _Length_39
-	local _array_41 = pair("FormLabel", "error", {
+	local _array_41 = pair("FormLabel", "default", {
 		text = "Email",
-		hasError = true,
 	})
 	local _Length_40 = #_array_41
 	table.move(_array_41, 1, _Length_40, _length + 1, _array)
 	_length += _Length_40
-	local _array_42 = pair("FormHelperText", "default", {
-		text = "We never share this",
+	local _array_42 = pair("FormLabel", "required", {
+		text = "Email",
+		value = true,
 	})
 	local _Length_41 = #_array_42
 	table.move(_array_42, 1, _Length_41, _length + 1, _array)
 	_length += _Length_41
-	local _array_43 = pair("FormHelperText", "error", {
-		text = "Required",
+	local _array_43 = pair("FormLabel", "error", {
+		text = "Email",
 		hasError = true,
 	})
 	local _Length_42 = #_array_43
 	table.move(_array_43, 1, _Length_42, _length + 1, _array)
 	_length += _Length_42
-	local _array_44 = pair("Menu", "closed", {
-		open = false,
+	local _array_44 = pair("FormHelperText", "default", {
+		text = "We never share this",
 	})
 	local _Length_43 = #_array_44
 	table.move(_array_44, 1, _Length_43, _length + 1, _array)
 	_length += _Length_43
-	local _array_45 = pair("Menu", "open", {
-		open = true,
+	local _array_45 = pair("FormHelperText", "error", {
+		text = "Required",
+		hasError = true,
 	})
 	local _Length_44 = #_array_45
 	table.move(_array_45, 1, _Length_44, _length + 1, _array)
 	_length += _Length_44
-	local _array_46 = pair("Menu", "empty", {
+	local _array_46 = pair("Menu", "closed", {
+		open = false,
+	})
+	local _Length_45 = #_array_46
+	table.move(_array_46, 1, _Length_45, _length + 1, _array)
+	_length += _Length_45
+	local _array_47 = pair("Menu", "open", {
+		open = true,
+	})
+	local _Length_46 = #_array_47
+	table.move(_array_47, 1, _Length_46, _length + 1, _array)
+	_length += _Length_46
+	local _array_48 = pair("Menu", "empty", {
 		open = true,
 		options = {},
 	})
-	table.move(_array_46, 1, #_array_46, _length + 1, _array)
+	local _Length_47 = #_array_48
+	table.move(_array_48, 1, _Length_47, _length + 1, _array)
+	_length += _Length_47
+	local _array_49 = pair("Menu", "dense", {
+		open = true,
+		variant = "dense",
+	})
+	table.move(_array_49, 1, #_array_49, _length + 1, _array)
 	return _array
 end
 local function concatRows(...)

package/out/ui/packages/stepper/components/Stepper.d.ts

@@ -2,6 +2,7 @@ import { CustomizedProps } from "../../../../theme/index";
 export interface StepperProps {
     steps: string[];
     activeStep: number;
+    orientation?: "horizontal" | "vertical";
 }
 declare function Stepper(props: CustomizedProps<Frame, StepperProps>): JSX.Element;
 export default Stepper;

package/out/ui/packages/stepper/components/Stepper.luau

@@ -8,11 +8,17 @@ local function Stepper(props)
 	local _binding = props
 	local steps = _binding.steps
 	local activeStep = _binding.activeStep
+	local orientation = _binding.orientation
+	if orientation == nil then
+		orientation = "horizontal"
+	end
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useStepperStyles()
+	local styles = useStepperStyles({
+		orientation = orientation,
+	})
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then

package/out/ui/packages/stepper/components/Stepper.styles.d.ts

@@ -1,2 +1,4 @@
-declare const useStepperStyles: () => import("../../../../theme/index").ClassNameMap<string>;
+declare const useStepperStyles: (props: {
+    orientation?: "horizontal" | "vertical";
+}) => import("../../../../theme/index").ClassNameMap<string>;
 export default useStepperStyles;

package/out/ui/packages/stepper/components/Stepper.styles.luau

@@ -3,7 +3,11 @@ 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 useStepperStyles = componentStyles("Stepper", function(theme)
+local useStepperStyles = componentStyles("Stepper", function(theme, _param)
+	local orientation = _param.orientation
+	if orientation == nil then
+		orientation = "horizontal"
+	end
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -12,7 +16,7 @@ local useStepperStyles = componentStyles("Stepper", function(theme)
 			BorderSizePixel = 0,
 		},
 		list = {
-			FillDirection = Enum.FillDirection.Horizontal,
+			FillDirection = if orientation == "vertical" then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
 			Padding = UDim.new(0, theme.padding.calc(1)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},

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

@@ -1,6 +1,6 @@
 export type SwitchPointer = "rest" | "hover" | "press" | "focus";
 export declare function switchPointer(hovering: boolean, pressed: boolean, focused: boolean): SwitchPointer;
-export declare function switchTrackTransparency(on: boolean, disabled: boolean, pointer: SwitchPointer): 0 | 0.25 | 0.55 | 0.35 | 0.15 | 0.65 | 0.08;
+export declare function switchTrackTransparency(on: boolean, disabled: boolean, pointer: SwitchPointer): 0 | 0.25 | 0.35 | 0.65 | 0.55 | 0.15 | 0.08;
 export declare function switchThumbTransparency(disabled: boolean): 0 | 0.35;
 export declare function switchStrokeTransparency(disabled: boolean, pointer: SwitchPointer): 1 | 0 | 0.35;
 export declare function switchThumbPlacement(on: boolean, inset: number): {

package/out/ui/packages/table/components/Table.d.ts

@@ -3,6 +3,7 @@ export interface TableProps {
     columns: string[];
     rows: string[][];
     selected?: number;
+    dense?: boolean;
     onRowActivated?: (index: number) => void;
 }
 declare function Table(props: CustomizedProps<Frame, TableProps>): JSX.Element;

package/out/ui/packages/table/components/Table.luau

@@ -9,12 +9,15 @@ local function Table(props)
 	local columns = _binding.columns
 	local rows = _binding.rows
 	local selected = _binding.selected
+	local dense = _binding.dense
 	local onRowActivated = _binding.onRowActivated
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useTableStyles()
+	local styles = useTableStyles({
+		dense = dense,
+	})
 	local width = if #columns > 0 then 1 / #columns else 1
 	local _attributes = {}
 	local _condition = id

package/out/ui/packages/table/components/Table.styles.d.ts

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

package/out/ui/packages/table/components/Table.styles.luau

@@ -3,7 +3,11 @@ 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 useTableStyles = componentStyles("Table", function(theme)
+local useTableStyles = componentStyles("Table", function(theme, _param)
+	local dense = _param.dense
+	local padY = theme.padding.calc(if dense == true then 0.5 else 1)
+	local padX = theme.padding.calc(if dense == true then 1 else 1.5)
+	local textSize = if dense == true then theme.typography.fontSizes.caption else theme.typography.fontSizes.body
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -44,7 +48,7 @@ local useTableStyles = componentStyles("Table", function(theme)
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
+			TextSize = textSize,
 			TextColor3 = theme.palette.text.primary,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextTruncate = Enum.TextTruncate.AtEnd,
@@ -54,10 +58,10 @@ local useTableStyles = componentStyles("Table", function(theme)
 			TextColor3 = theme.palette.text.secondary,
 		},
 		padding = {
-			PaddingTop = UDim.new(0, theme.padding.calc(1)),
-			PaddingBottom = UDim.new(0, theme.padding.calc(1)),
-			PaddingLeft = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
+			PaddingTop = UDim.new(0, padY),
+			PaddingBottom = UDim.new(0, padY),
+			PaddingLeft = UDim.new(0, padX),
+			PaddingRight = UDim.new(0, padX),
 		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),

package/package.json

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