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

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

@@ -0,0 +1,102 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+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 className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useButtonGroupStyles({
+		size = size,
+	})
+	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 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.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("textbutton", _attributes_4, React.createElement("uipadding", _attributes_5))
+		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_3, _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;

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

@@ -3,11 +3,17 @@ 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 useCardStyles = componentStyles("Card", function(theme)
+local cardColumnWidth = TS.import(script, script.Parent, "cardWidth").cardColumnWidth
+local useCardStyles = componentStyles("Card", function(theme, _param)
+	local fullWidth = _param.fullWidth
+	if fullWidth == nil then
+		fullWidth = false
+	end
+	local width = cardColumnWidth(fullWidth, theme.padding.calc(32))
 	return createStyles({
 		column = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromOffset(theme.padding.calc(32), 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(width.scale, width.offset, 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
@@ -18,8 +24,9 @@ local useCardStyles = componentStyles("Card", function(theme)
 		},
 		title = {
 			LayoutOrder = 1,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			TextWrapped = true,
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
@@ -29,8 +36,9 @@ local useCardStyles = componentStyles("Card", function(theme)
 		},
 		subtitle = {
 			LayoutOrder = 2,
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			TextWrapped = true,
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
@@ -57,6 +65,7 @@ local useCardStyles = componentStyles("Card", function(theme)
 			HorizontalAlignment = Enum.HorizontalAlignment.Right,
 			Padding = UDim.new(0, theme.padding.calc(1)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
+			Wraps = true,
 		},
 	})
 end)

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

@@ -0,0 +1,10 @@
+export interface CardColumnWidth {
+    scale: number;
+    offset: number;
+}
+/** Fluid cards fill the parent. The default stays the fixed column. */
+export declare function cardColumnWidth(fullWidth: boolean | undefined, fixed: number): CardColumnWidth;
+/** A title wider than the column wraps. A short title stays one line. */
+export declare function cardTitleWrap(textWidth: number, column: number): boolean;
+/** Two small actions are wider than the fixed column, so the row wraps. */
+export declare function cardActionWrap(column: number, button: number, count: number, gap?: number): boolean;

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

@@ -0,0 +1,36 @@
+-- Compiled with roblox-ts v3.0.0
+--* Fluid cards fill the parent. The default stays the fixed column. 
+local function cardColumnWidth(fullWidth, fixed)
+	if fullWidth == true then
+		return {
+			scale = 1,
+			offset = 0,
+		}
+	end
+	return {
+		scale = 0,
+		offset = fixed,
+	}
+end
+--* A title wider than the column wraps. A short title stays one line. 
+local function cardTitleWrap(textWidth, column)
+	if column <= 0 then
+		return false
+	end
+	return textWidth > column
+end
+--* Two small actions are wider than the fixed column, so the row wraps. 
+local function cardActionWrap(column, button, count, gap)
+	if gap == nil then
+		gap = 0
+	end
+	if count < 2 or column <= 0 then
+		return false
+	end
+	return button * count + gap * (count - 1) > column
+end
+return {
+	cardColumnWidth = cardColumnWidth,
+	cardTitleWrap = cardTitleWrap,
+	cardActionWrap = cardActionWrap,
+}

package/out/ui/packages/cframeEditor/components/CFrameEditor.luau

@@ -1,10 +1,13 @@
 -- 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 SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
 local useCFrameEditorStyles = TS.import(script, script.Parent, "CFrameEditor.styles").default
-local nextCFrameParts = TS.import(script, script.Parent, "cframeValue").nextCFrameParts
+local _cframeValue = TS.import(script, script.Parent, "cframeValue")
+local cframeAxis = _cframeValue.cframeAxis
+local nextCFrameParts = _cframeValue.nextCFrameParts
 local POSITION = { "X", "Y", "Z" }
 local ORIENTATION = { "RX", "RY", "RZ" }
 local function CFrameEditor(props)
@@ -65,15 +68,17 @@ local function CFrameEditor(props)
 			local _attributes_6 = table.clone(styles.row)
 			setmetatable(_attributes_6, nil)
 			local _exp_3 = React.createElement("uilistlayout", _attributes_6)
-			local _attributes_7 = table.clone(styles.label)
+			local _attributes_7 = table.clone(cx(styles.label, if cframeAxis(field) == "X" then styles.labelX elseif cframeAxis(field) == "Y" then styles.labelY else styles.labelZ))
 			setmetatable(_attributes_7, nil)
-			_attributes_7.Text = field
+			_attributes_7.Text = cframeAxis(field)
 			local _exp_4 = React.createElement("textlabel", _attributes_7)
 			local _attributes_8 = table.clone(styles.field)
 			setmetatable(_attributes_8, nil)
 			return React.createElement("frame", _attributes_5, _exp_3, _exp_4, React.createElement("frame", _attributes_8, React.createElement(NumberInput, {
 				value = amounts[offset + index + 1],
+				places = 3,
 				disabled = disabled,
+				size = "small",
 				width = UDim.new(1, 0),
 				onChange = function(amount)
 					return commit(field, amount)
@@ -103,7 +108,7 @@ local function CFrameEditor(props)
 	}
 	local _attributes_1 = table.clone(styles.wrap)
 	setmetatable(_attributes_1, nil)
-	return React.createElement(SxHost, _attributes, React.createElement("uilistlayout", _attributes_1), group("Position", POSITION, 1, 0), group("Orientation", ORIENTATION, 2, 3))
+	return React.createElement(SxHost, _attributes, React.createElement("uilistlayout", _attributes_1), group("Position", POSITION, 1, 0), group("Rotation (degrees)", ORIENTATION, 2, 3))
 end
 local default = CFrameEditor
 return {

package/out/ui/packages/cframeEditor/components/CFrameEditor.styles.luau

@@ -46,11 +46,20 @@ local useCFrameEditorStyles = componentStyles("CFrameEditor", function(theme)
 		label = {
 			Size = UDim2.new(0, theme.spacing.calc(2.5), 1, 0),
 			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
+			Font = theme.typography.fontFamilies.semibold,
 			TextSize = theme.typography.fontSizes.button,
 			TextColor3 = theme.palette.text.secondary,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
+		labelX = {
+			TextColor3 = theme.palette.status.error.main,
+		},
+		labelY = {
+			TextColor3 = theme.palette.status.success.main,
+		},
+		labelZ = {
+			TextColor3 = theme.palette.status.info.main,
+		},
 		field = {
 			Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
 			BackgroundTransparency = 1,

package/out/ui/packages/cframeEditor/components/cframeValue.d.ts

@@ -1,3 +1,4 @@
 export type CFrameField = "X" | "Y" | "Z" | "RX" | "RY" | "RZ";
 export declare function cframeFields(): CFrameField[];
+export declare function cframeAxis(field: CFrameField): "X" | "Y" | "Z";
 export declare function nextCFrameParts(x: number, y: number, z: number, rx: number, ry: number, rz: number, field: CFrameField, amount: number): number[];

package/out/ui/packages/cframeEditor/components/cframeValue.luau

@@ -3,6 +3,18 @@ local FIELDS = { "X", "Y", "Z", "RX", "RY", "RZ" }
 local function cframeFields()
 	return FIELDS
 end
+local function cframeAxis(field)
+	if field == "RX" then
+		return "X"
+	end
+	if field == "RY" then
+		return "Y"
+	end
+	if field == "RZ" then
+		return "Z"
+	end
+	return field
+end
 local function nextCFrameParts(x, y, z, rx, ry, rz, field, amount)
 	local parts = { x, y, z, rx, ry, rz }
 	local index = if field == "X" then 0 elseif field == "Y" then 1 elseif field == "Z" then 2 elseif field == "RX" then 3 elseif field == "RY" then 4 else 5
@@ -11,5 +23,6 @@ local function nextCFrameParts(x, y, z, rx, ry, rz, field, amount)
 end
 return {
 	cframeFields = cframeFields,
+	cframeAxis = cframeAxis,
 	nextCFrameParts = nextCFrameParts,
 }

package/out/ui/packages/checkbox/components/Checkbox.luau

@@ -38,6 +38,7 @@ local function Checkbox(props)
 	local fill = _binding_1.fill
 	local activeStroke = _binding_1.activeStroke
 	local idleStroke = _binding_1.idleStroke
+	local focus = _binding_1.focus
 	local hovering, setHovering = useState(false)
 	local pressed, setPressed = useState(false)
 	local focused, setFocused = useState(false)
@@ -109,7 +110,7 @@ local function Checkbox(props)
 	local _attributes_3 = table.clone(corner)
 	setmetatable(_attributes_3, nil)
 	local _exp_1 = React.createElement("uicorner", _attributes_3)
-	local _attributes_4 = table.clone(cx(stroke, if filled or pointer == "focus" or pointer == "press" then activeStroke else idleStroke, {
+	local _attributes_4 = table.clone(cx(stroke, if pointer == "focus" then focus elseif filled or pointer == "press" then activeStroke else idleStroke, {
 		Transparency = strokeTransparency,
 	}))
 	setmetatable(_attributes_4, nil)

package/out/ui/packages/checkbox/components/Checkbox.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 useCheckboxStyles = componentStyles("Checkbox", function(theme, _param)
 	local size = _param.size
 	local metrics = controlMetrics(theme.density, size)
@@ -61,6 +62,7 @@ local useCheckboxStyles = componentStyles("Checkbox", function(theme, _param)
 		idleStroke = {
 			Color = theme.palette.text.secondary,
 		},
+		focus = focusRing(theme.palette.focus),
 	})
 end)
 local default = useCheckboxStyles

package/out/ui/packages/chip/components/Chip.styles.d.ts

@@ -1,5 +1,6 @@
 import { ControlSize } from "../../../../theme/index";
-export type ChipColor = "default" | "primary";
+import { ChipColor } from "./chipTone";
+export type { ChipColor };
 declare const useChipStyles: (props: {
     selected?: boolean;
     disabled?: boolean;

package/out/ui/packages/chip/components/Chip.styles.luau

@@ -4,6 +4,7 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local componentStyles = _theme.componentStyles
 local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
+local chipTone = TS.import(script, script.Parent, "chipTone").chipTone
 local useChipStyles = componentStyles("Chip", function(theme, _param)
 	local selected = _param.selected
 	if selected == nil then
@@ -30,13 +31,15 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 	local padY = if size == "small" then 0.25 elseif size == "large" then 0.75 else 0.5
 	local padX = if size == "small" then 1 elseif size == "large" then 2 else 1.5
 	local deletePx = metrics.icon
-	local primary = color == "primary"
-	local ink = if disabled then theme.palette.text.disabled elseif primary then if variant == "outlined" then theme.palette.primary.main else theme.palette.primary.on else theme.palette.text.primary
+	local tone = chipTone(color)
+	local status = if tone == "success" then theme.palette.status.success elseif tone == "error" then theme.palette.status.error elseif tone == "primary" then theme.palette.primary else nil
+	local filledTone = status ~= nil and variant ~= "outlined"
+	local ink = if disabled then theme.palette.text.disabled elseif status == nil then theme.palette.text.primary elseif variant == "outlined" then status.main else status.on
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
 			Size = UDim2.fromScale(0, 0),
-			BackgroundColor3 = if primary and variant ~= "outlined" then theme.palette.primary.main elseif selected then theme.palette.action.selected else theme.palette.surface.input,
+			BackgroundColor3 = if filledTone and status ~= nil then status.main elseif selected then theme.palette.action.selected else theme.palette.surface.input,
 			BackgroundTransparency = if variant == "outlined" and selected ~= true then 1 else 0,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
@@ -56,9 +59,9 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			CornerRadius = UDim.new(theme.shape.pillScale, 0),
 		},
 		stroke = {
-			Color = if primary then theme.palette.primary.main else theme.palette.border,
+			Color = if status ~= nil then status.main else theme.palette.border,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-			Transparency = if variant == "outlined" then (if disabled then 0.5 else 0) elseif primary or selected then 1 else 0,
+			Transparency = if variant == "outlined" then (if disabled then 0.5 else 0) elseif tone ~= "default" or selected then 1 else 0,
 		},
 		row = {
 			FillDirection = Enum.FillDirection.Horizontal,
@@ -81,7 +84,7 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
-			ImageColor3 = if disabled then theme.palette.text.disabled elseif primary and variant ~= "outlined" then theme.palette.primary.on else theme.palette.text.secondary,
+			ImageColor3 = if disabled then theme.palette.text.disabled elseif filledTone and status ~= nil then status.on else theme.palette.text.secondary,
 			LayoutOrder = 2,
 		},
 	})

package/out/ui/packages/chip/components/chipTone.d.ts

@@ -0,0 +1,3 @@
+export type ChipColor = "default" | "primary" | "success" | "error";
+/** Unknown colors stay the plain chip. Primary, success, and error keep their tone. */
+export declare function chipTone(color?: ChipColor): ChipColor;

package/out/ui/packages/chip/components/chipTone.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* Unknown colors stay the plain chip. Primary, success, and error keep their tone. 
+local function chipTone(color)
+	if color == "primary" or color == "success" or color == "error" then
+		return color
+	end
+	return "default"
+end
+return {
+	chipTone = chipTone,
+}

package/out/ui/packages/collapse/components/Collapse.d.ts

@@ -0,0 +1,8 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+export interface CollapseProps {
+    open?: boolean;
+    children?: React.ReactNode;
+}
+declare function Collapse(props: CustomizedProps<Frame, CollapseProps>): JSX.Element;
+export default Collapse;

package/out/ui/packages/collapse/components/Collapse.luau

@@ -0,0 +1,34 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local collapseOpen = TS.import(script, script.Parent, "collapseOpen").collapseOpen
+local useCollapseStyles = TS.import(script, script.Parent, "Collapse.styles").default
+local function Collapse(props)
+	local _binding = props
+	local open = _binding.open
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useCollapseStyles()
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Collapse"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.Visible = collapseOpen(open)
+	return React.createElement(SxHost, _attributes, children)
+end
+local default = Collapse
+return {
+	default = default,
+}

package/out/ui/packages/collapse/components/Collapse.styles.d.ts

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

package/out/ui/packages/collapse/components/Collapse.styles.luau

@@ -0,0 +1,20 @@
+-- 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 useCollapseStyles = componentStyles("Collapse", function(_theme)
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ClipsDescendants = true,
+		},
+	})
+end)
+local default = useCollapseStyles
+return {
+	default = default,
+}

package/out/ui/packages/collapse/components/collapseOpen.d.ts

@@ -0,0 +1 @@
+export declare function collapseOpen(open?: boolean): open is true;

package/out/ui/packages/collapse/components/collapseOpen.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local function collapseOpen(open)
+	return open == true
+end
+return {
+	collapseOpen = collapseOpen,
+}

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

@@ -0,0 +1,3 @@
+export { default as Collapse } from "./components/Collapse";
+export { CollapseProps } from "./components/Collapse";
+export { collapseOpen } from "./components/collapseOpen";