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

package/out/ui/packages/button/components/Button.luau

@@ -5,16 +5,21 @@ local React = _react
 local useEffect = _react.useEffect
 local useState = _react.useState
 local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
-local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
+local useTheme = _theme.useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
 local LoadingStroke = TS.import(script, script.Parent.Parent.Parent, "loadingStroke").LoadingStroke
 local canActivate = TS.import(script, script.Parent, "activation").canActivate
 local _buttonLook = TS.import(script, script.Parent, "buttonLook")
 local buttonFace = _buttonLook.buttonFace
+local buttonIcon = _buttonLook.buttonIcon
 local spinnerPixels = _buttonLook.spinnerPixels
 local spinnerPlace = _buttonLook.spinnerPlace
+local buttonPaint = TS.import(script, script.Parent, "buttonPaint").buttonPaint
 local useButtonStyles = TS.import(script, script.Parent, "Button.styles").default
+local buttonColors
 local function Button(props)
 	local _binding = props
 	local text = _binding.text
@@ -25,6 +30,7 @@ local function Button(props)
 	if variant == nil then
 		variant = "contained"
 	end
+	local icon = _binding.icon
 	local disabled = _binding.disabled
 	if disabled == nil then
 		disabled = false
@@ -69,24 +75,38 @@ local function Button(props)
 	local font = _binding_1.font
 	local corner = _binding_1.corner
 	local stroke = _binding_1.stroke
+	local focus = _binding_1.focus
 	local _binding_2 = useTheme()
 	local theme = _binding_2.theme
+	local metrics = controlMetrics(theme.density, props.size)
+	local glyph = buttonIcon(icon, loading)
+	local grow = glyph ~= nil and props.fullWidth ~= true
 	local reducedMotion = useReducedMotion(reducedProp)
 	local hovering, setHovering = useState(false)
+	local down, setDown = useState(false)
 	local focused, setFocused = useState(false)
 	local active = canActivate(disabled, loading)
-	local pressed = disabled or (not hoveringDisabled and active and (hovering or focused))
 	local face = buttonFace(text, loading, loadingLabel)
 	local place = spinnerPlace(loadingPosition)
 	local busy = loading or animating
+	local sweep = animating and not loading
 	local branded = (props.color or "primary") == "primary"
-	local spinnerColor = if variant == "contained" then if branded then theme.palette.primary.on else theme.palette.text.inverse elseif branded then theme.palette.primary.main else theme.palette.text.primary
+	local paint = buttonPaint({
+		variant = variant,
+		branded = branded,
+		disabled = disabled,
+		hover = hovering and not hoveringDisabled and active,
+		down = down and active,
+	})
+	local colors = buttonColors(theme, paint)
+	local labelTransparency = if face.hideText then 1 else paint.labelTransparency
 	useEffect(function()
 		if active then
 			return nil
 		end
 		setHovering(false)
 		setFocused(false)
+		setDown(false)
 	end, { active })
 	local _attributes = {
 		tag = "textbutton",
@@ -102,40 +122,30 @@ local function Button(props)
 	for _k, _v in font do
 		_object[_k] = _v
 	end
+	_object.BackgroundColor3 = colors.fill
+	_object.BackgroundTransparency = paint.fillTransparency
+	_object.TextColor3 = colors.label
+	_object.TextTransparency = labelTransparency
 	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 		loading = loading,
-		hover = hovering,
-		pressed = pressed,
+		hover = hovering and not hoveringDisabled,
+		pressed = down,
 		focused = focused,
 	}
 	_attributes.Active = active
-	_attributes.AutoButtonColor = active
+	_attributes.AutoButtonColor = false
 	_attributes.Selectable = active
-	_attributes.Text = face.text
-	for _k, _v in (if face.hideText then {
-		TextTransparency = 1,
+	_attributes.Text = if glyph ~= nil then "" else face.text
+	for _k, _v in (if grow then {
+		AutomaticSize = Enum.AutomaticSize.X,
+		Size = UDim2.new(0, 0, 0, metrics.buttonHeight),
 	} else {}) do
 		_attributes[_k] = _v
 	end
-	local _result
-	if pressed then
-		_result = 0.75
-	else
-		local _result_1 = className
-		if _result_1 ~= nil then
-			_result_1 = _result_1.BackgroundTransparency
-		end
-		local _condition_1 = _result_1
-		if _condition_1 == nil then
-			_condition_1 = (if variant == "outlined" or variant == "text" then 1 else 0)
-		end
-		_result = _condition_1
-	end
-	_attributes.BackgroundTransparency = _result
 	_attributes.Event = {
 		MouseEnter = function()
 			if not active then
@@ -148,6 +158,7 @@ local function Button(props)
 		end,
 		MouseLeave = function()
 			setHovering(false)
+			setDown(false)
 			if mouseLeave then
 				mouseLeave()
 			end
@@ -166,11 +177,16 @@ local function Button(props)
 			end
 		end,
 		MouseButton1Down = function()
-			if active and onLeftDown then
+			if not active then
+				return nil
+			end
+			setDown(true)
+			if onLeftDown then
 				onLeftDown()
 			end
 		end,
 		MouseButton1Up = function()
+			setDown(false)
 			if active and onLeftUp then
 				onLeftUp()
 			end
@@ -191,33 +207,93 @@ local function Button(props)
 			end
 		end,
 	}
-	local _condition_1 = variant == "outlined" and not busy
+	local _condition_1 = not sweep and focused
 	if _condition_1 then
-		local _attributes_1 = table.clone(stroke)
+		local _attributes_1 = table.clone(focus)
 		setmetatable(_attributes_1, nil)
 		_condition_1 = React.createElement("uistroke", _attributes_1)
 	end
-	local _exp = busy and React.createElement(LoadingStroke, {
-		animating = busy and not reducedMotion,
-		color = spinnerColor,
-	})
-	local _condition_2 = rounded
+	local _condition_2 = not sweep and not focused and variant == "outlined"
 	if _condition_2 then
+		local _attributes_1 = table.clone(stroke)
+		setmetatable(_attributes_1, nil)
+		_condition_2 = React.createElement("uistroke", _attributes_1)
+	end
+	local _exp = sweep and React.createElement(LoadingStroke, {
+		animating = not reducedMotion,
+		color = colors.label,
+	})
+	local _condition_3 = rounded
+	if _condition_3 then
 		local _attributes_1 = table.clone(corner)
 		setmetatable(_attributes_1, nil)
-		_condition_2 = React.createElement("uicorner", _attributes_1)
+		_condition_3 = React.createElement("uicorner", _attributes_1)
 	end
-	return React.createElement(SxHost, _attributes, _condition_1, _exp, _condition_2, loading and (React.createElement(CircularProgress, {
+	return React.createElement(SxHost, _attributes, _condition_1, _condition_2, _exp, _condition_3, loading and (React.createElement(CircularProgress, {
 		size = spinnerPixels(props.size),
 		thickness = 2,
-		color = spinnerColor,
+		color = colors.label,
 		reducedMotion = reducedMotion,
 		className = {
 			AnchorPoint = Vector2.new(place.anchorX, 0.5),
 			Position = UDim2.new(place.xScale, place.xOffset, 0.5, 0),
 			ZIndex = 10001,
 		},
-	})), children)
+	})), glyph ~= nil and (React.createElement(React.Fragment, nil, React.createElement("uipadding", {
+		PaddingLeft = UDim.new(0, theme.padding.calc(2)),
+		PaddingRight = UDim.new(0, theme.padding.calc(2)),
+	}), React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		VerticalAlignment = Enum.VerticalAlignment.Center,
+		HorizontalAlignment = Enum.HorizontalAlignment.Center,
+		SortOrder = Enum.SortOrder.LayoutOrder,
+		Padding = UDim.new(0, theme.padding.calc(1)),
+	}), React.createElement("imagelabel", {
+		key = "Icon",
+		LayoutOrder = 1,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		ScaleType = Enum.ScaleType.Fit,
+		Image = glyph,
+		ImageColor3 = colors.label,
+		ImageTransparency = labelTransparency,
+		Size = UDim2.fromOffset(metrics.icon, metrics.icon),
+	}), React.createElement("textlabel", {
+		key = "Label",
+		LayoutOrder = 2,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		AutomaticSize = Enum.AutomaticSize.XY,
+		Size = UDim2.fromScale(0, 0),
+		Font = theme.typography.fontFamilies.default,
+		TextSize = metrics.font,
+		TextColor3 = colors.label,
+		TextTransparency = labelTransparency,
+		Text = face.text,
+	}))), children)
+end
+function buttonColors(theme, paint)
+	local brand = theme.palette.primary
+	local fills = {
+		primary = brand.main,
+		primaryHover = brand.hover,
+		primaryPressed = brand.pressed,
+		ink = theme.palette.text.primary,
+		actionHover = theme.palette.action.hover,
+		actionPressed = theme.palette.action.pressed,
+		none = theme.palette.surface.paper,
+	}
+	local labels = {
+		onPrimary = brand.on,
+		inverse = theme.palette.text.inverse,
+		primary = brand.main,
+		ink = theme.palette.text.primary,
+		disabled = theme.palette.text.disabled,
+	}
+	return {
+		fill = fills[paint.fill],
+		label = labels[paint.label],
+	}
 end
 local default = Button
 return {

package/out/ui/packages/button/components/Button.styles.luau

@@ -4,6 +4,7 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local focusRing = _theme.focusRing
 local makeRootStyles = function(theme, _param)
 	local size = _param.size
 	local color = _param.color
@@ -121,6 +122,7 @@ local useButtonStyles = componentStyles("Button", function(theme, _param)
 			Transparency = 0,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
+		focus = focusRing(theme.palette.focus),
 	})
 end)
 local default = useButtonStyles

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

@@ -8,5 +8,7 @@ export declare function spinnerPlace(position?: LoadingPosition): {
     xOffset: number;
     anchorX: number;
 };
+/** An empty glyph stays off the button. Loading keeps the spinner path. */
+export declare function buttonIcon(icon?: string, loading?: boolean): string | undefined;
 export declare function spinnerPixels(size?: "small" | "medium" | "large"): 16 | 14 | 12;
 export declare function iconSpinnerPixels(size?: string): 16 | 12 | 8;

package/out/ui/packages/button/components/buttonLook.luau

@@ -29,6 +29,16 @@ local function spinnerPlace(position)
 		anchorX = 0.5,
 	}
 end
+--* An empty glyph stays off the button. Loading keeps the spinner path. 
+local function buttonIcon(icon, loading)
+	if loading == true then
+		return nil
+	end
+	if icon == nil or icon == "" then
+		return nil
+	end
+	return icon
+end
 local function spinnerPixels(size)
 	if size == "large" then
 		return 16
@@ -50,6 +60,7 @@ end
 return {
 	buttonFace = buttonFace,
 	spinnerPlace = spinnerPlace,
+	buttonIcon = buttonIcon,
 	spinnerPixels = spinnerPixels,
 	iconSpinnerPixels = iconSpinnerPixels,
 }

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

@@ -0,0 +1,16 @@
+export type ButtonVariantName = "contained" | "outlined" | "text";
+export type ButtonFill = "primary" | "primaryHover" | "primaryPressed" | "ink" | "actionHover" | "actionPressed" | "none";
+export type ButtonLabel = "onPrimary" | "inverse" | "primary" | "ink" | "disabled";
+export interface ButtonPaint {
+    fill: ButtonFill;
+    label: ButtonLabel;
+    fillTransparency: number;
+    labelTransparency: number;
+}
+export declare function buttonPaint(input: {
+    variant: ButtonVariantName;
+    branded: boolean;
+    disabled: boolean;
+    hover: boolean;
+    down: boolean;
+}): ButtonPaint;

package/out/ui/packages/button/components/buttonPaint.luau

@@ -0,0 +1,70 @@
+-- Compiled with roblox-ts v3.0.0
+local function buttonPaint(input)
+	local contained = input.variant ~= "outlined" and input.variant ~= "text"
+	if input.disabled then
+		if contained then
+			return {
+				fill = if input.branded then "primary" else "ink",
+				label = if input.branded then "onPrimary" else "inverse",
+				fillTransparency = 0.45,
+				labelTransparency = 0.35,
+			}
+		end
+		return {
+			fill = "none",
+			label = "disabled",
+			fillTransparency = 1,
+			labelTransparency = 0,
+		}
+	end
+	if contained then
+		if input.down then
+			return {
+				fill = if input.branded then "primaryPressed" else "actionPressed",
+				label = if input.branded then "onPrimary" else "ink",
+				fillTransparency = 0,
+				labelTransparency = 0,
+			}
+		end
+		if input.hover then
+			return {
+				fill = if input.branded then "primaryHover" else "actionHover",
+				label = if input.branded then "onPrimary" else "ink",
+				fillTransparency = 0,
+				labelTransparency = 0,
+			}
+		end
+		return {
+			fill = if input.branded then "primary" else "ink",
+			label = if input.branded then "onPrimary" else "inverse",
+			fillTransparency = 0,
+			labelTransparency = 0,
+		}
+	end
+	local label = if input.branded then "primary" else "ink"
+	if input.down then
+		return {
+			fill = "actionPressed",
+			label = label,
+			fillTransparency = 0,
+			labelTransparency = 0,
+		}
+	end
+	if input.hover then
+		return {
+			fill = "actionHover",
+			label = label,
+			fillTransparency = 0,
+			labelTransparency = 0,
+		}
+	end
+	return {
+		fill = "none",
+		label = label,
+		fillTransparency = 1,
+		labelTransparency = 0,
+	}
+end
+return {
+	buttonPaint = buttonPaint,
+}

package/out/ui/packages/buttonGroup/components/ButtonGroup.d.ts

@@ -0,0 +1,14 @@
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
+export interface ButtonGroupItem {
+    label: string;
+    disabled?: boolean;
+}
+export interface ButtonGroupProps {
+    items: ButtonGroupItem[];
+    onItem?: (index: number) => void;
+    disabled?: boolean;
+    size?: ControlSize;
+    selected?: number;
+}
+declare function ButtonGroup(props: CustomizedProps<Frame, ButtonGroupProps>): JSX.Element;
+export default ButtonGroup;

package/out/ui/packages/buttonGroup/components/ButtonGroup.luau

@@ -0,0 +1,117 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+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 buttonGroupEdge = TS.import(script, script.Parent, "buttonGroupEdge").buttonGroupEdge
+local useButtonGroupStyles = TS.import(script, script.Parent, "ButtonGroup.styles").default
+local function ButtonGroup(props)
+	local _binding = props
+	local items = _binding.items
+	local onItem = _binding.onItem
+	local disabled = _binding.disabled
+	local size = _binding.size
+	local selected = _binding.selected
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useButtonGroupStyles({
+		size = size,
+	})
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local count = #items
+	local groupOff = disabled == true
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "ButtonGroup"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = groupOff,
+	}
+	local _attributes_1 = table.clone(styles.corner)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uicorner", _attributes_1)
+	local _attributes_2 = table.clone(styles.stroke)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uistroke", _attributes_2)
+	local _attributes_3 = table.clone(styles.list)
+	setmetatable(_attributes_3, nil)
+	local _exp_2 = React.createElement("uilistlayout", _attributes_3)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#items)
+	local _callback = function(item, index)
+		local off = groupOff or item.disabled == true
+		local active = canActivate(off)
+		local picked = not off and index == selected
+		local edge = buttonGroupEdge(index, count)
+		local rule = edge == "start" or edge == "middle"
+		local _attributes_4 = {
+			key = `{item.label}-{index}`,
+		}
+		for _k, _v in styles.item do
+			_attributes_4[_k] = _v
+		end
+		_attributes_4.Text = item.label
+		_attributes_4.TextColor3 = if picked then theme.palette.primary.on else theme.palette.text.primary
+		_attributes_4.BackgroundColor3 = theme.palette.primary.main
+		_attributes_4.BackgroundTransparency = if picked then 0 else 1
+		_attributes_4.TextTransparency = if off then 0.5 else 0
+		_attributes_4.Active = active
+		_attributes_4.Selectable = active
+		_attributes_4.LayoutOrder = index * 2
+		_attributes_4.Event = {
+			Activated = function()
+				if active then
+					local _result = onItem
+					if _result ~= nil then
+						_result(index)
+					end
+				end
+			end,
+		}
+		local _attributes_5 = table.clone(styles.pad)
+		setmetatable(_attributes_5, nil)
+		local _exp_3 = React.createElement("uipadding", _attributes_5)
+		local _condition_1 = picked and edge ~= "middle"
+		if _condition_1 then
+			local _attributes_6 = table.clone(styles.corner)
+			setmetatable(_attributes_6, nil)
+			_condition_1 = React.createElement("uicorner", _attributes_6)
+		end
+		local _exp_4 = React.createElement("textbutton", _attributes_4, _exp_3, _condition_1)
+		local _result
+		if rule then
+			local _attributes_6 = {
+				key = `Rule-{index}`,
+			}
+			for _k, _v in styles.rule do
+				_attributes_6[_k] = _v
+			end
+			_attributes_6.LayoutOrder = index * 2 + 1
+			_result = React.createElement("frame", _attributes_6)
+		else
+			_result = nil
+		end
+		return React.createElement(React.Fragment, nil, _exp_4, _result)
+	end
+	for _k, _v in items do
+		_newValue[_k] = _callback(_v, _k - 1, items)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, React.createElement(React.Fragment, nil, _newValue))
+end
+local default = ButtonGroup
+return {
+	default = default,
+}

package/out/ui/packages/buttonGroup/components/ButtonGroup.styles.d.ts

@@ -0,0 +1,5 @@
+import { ControlSize } from "../../../../theme/index";
+declare const useButtonGroupStyles: (props: {
+    size?: ControlSize;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useButtonGroupStyles;

package/out/ui/packages/buttonGroup/components/ButtonGroup.styles.luau

@@ -0,0 +1,57 @@
+-- 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 controlMetrics = _theme.controlMetrics
+local createStyles = _theme.createStyles
+local useButtonGroupStyles = componentStyles("ButtonGroup", function(theme, _param)
+	local size = _param.size
+	local metrics = controlMetrics(theme.density, size)
+	local button = theme.typography.variants.button
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundColor3 = theme.palette.surface.paper,
+			BorderSizePixel = 0,
+			ClipsDescendants = true,
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, 0),
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		stroke = {
+			Color = theme.palette.border,
+			Thickness = 1,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
+		item = {
+			AutomaticSize = Enum.AutomaticSize.X,
+			Size = UDim2.new(0, 0, 0, metrics.buttonHeight),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Font = theme.typography.fontFamilies[button.family],
+			TextSize = button.size,
+			TextColor3 = theme.palette.text.primary,
+		},
+		pad = {
+			PaddingLeft = UDim.new(0, theme.padding.calc(2)),
+			PaddingRight = UDim.new(0, theme.padding.calc(2)),
+		},
+		rule = {
+			Size = UDim2.new(0, 1, 0, metrics.buttonHeight),
+			BackgroundColor3 = theme.palette.border,
+			BorderSizePixel = 0,
+		},
+	})
+end)
+local default = useButtonGroupStyles
+return {
+	default = default,
+}

package/out/ui/packages/buttonGroup/components/buttonGroupEdge.d.ts

@@ -0,0 +1,2 @@
+export type ButtonGroupEdge = "only" | "start" | "middle" | "end";
+export declare function buttonGroupEdge(index: number, count: number): ButtonGroupEdge;

package/out/ui/packages/buttonGroup/components/buttonGroupEdge.luau

@@ -0,0 +1,16 @@
+-- Compiled with roblox-ts v3.0.0
+local function buttonGroupEdge(index, count)
+	if count <= 1 or index < 0 then
+		return "only"
+	end
+	if index == 0 then
+		return "start"
+	end
+	if index >= count - 1 then
+		return "end"
+	end
+	return "middle"
+end
+return {
+	buttonGroupEdge = buttonGroupEdge,
+}

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

@@ -0,0 +1,3 @@
+export { default as ButtonGroup } from "./components/ButtonGroup";
+export { ButtonGroupItem, ButtonGroupProps } from "./components/ButtonGroup";
+export { buttonGroupEdge, ButtonGroupEdge } from "./components/buttonGroupEdge";

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

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

package/out/ui/packages/card/components/Card.d.ts

@@ -7,6 +7,7 @@ export interface CardProps {
     elevation?: PaperElevation;
     square?: boolean;
     actions?: React.ReactNode;
+    fullWidth?: boolean;
     children?: React.ReactNode;
 }
 declare function Card(props: CustomizedProps<Frame, CardProps>): JSX.Element;

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

@@ -13,12 +13,31 @@ local function Card(props)
 	end
 	local square = _binding.square
 	local actions = _binding.actions
+	local fullWidth = _binding.fullWidth
 	local children = _binding.children
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local styles = useCardStyles()
+	local styles = useCardStyles({
+		fullWidth = fullWidth,
+	})
+	local _result
+	if fullWidth == true then
+		local _object = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+		}
+		if sx then
+			for _k, _v in sx do
+				_object[_k] = _v
+			end
+		end
+		_result = _object
+	else
+		_result = sx
+	end
+	local paperSx = _result
 	local _attributes = {
 		key = "Column",
 	}
@@ -73,7 +92,7 @@ local function Card(props)
 		elevation = elevation,
 		square = square,
 		className = className,
-		sx = sx,
+		sx = paperSx,
 		id = id,
 		ref = ref,
 	}, React.createElement("frame", _attributes, _exp, _condition, _condition_1, _exp_1, _condition_2))

package/out/ui/packages/card/components/Card.styles.d.ts

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