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

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

@@ -3,11 +3,18 @@ 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))
+	local heading = theme.typography.variants.h6
 	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,19 +25,22 @@ 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,
-			TextSize = theme.typography.fontSizes.h6,
+			Font = theme.typography.fontFamilies[heading.family],
+			TextSize = heading.size,
+			LineHeight = heading.leading,
 			TextColor3 = theme.palette.text.primary,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
 		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 +67,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,14 @@
 -- 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 useEditorHover = TS.import(script, script.Parent.Parent.Parent, "editorFace").useEditorHover
 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)
@@ -17,6 +21,7 @@ local function CFrameEditor(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local styles = useCFrameEditorStyles()
+	local hover = useEditorHover(disabled)
 	local rx, ry, rz = value:ToEulerAnglesXYZ()
 	local degrees = { math.deg(rx), math.deg(ry), math.deg(rz) }
 	local amounts = { value.X, value.Y, value.Z, degrees[1], degrees[2], degrees[3] }
@@ -65,15 +70,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)
@@ -95,15 +102,21 @@ local function CFrameEditor(props)
 	end
 	_attributes.key = _condition
 	_attributes.hostRef = ref
-	_attributes.base = styles.root
+	local _object = table.clone(styles.root)
+	setmetatable(_object, nil)
+	for _k, _v in hover.face do
+		_object[_k] = _v
+	end
+	_attributes.base = _object
 	_attributes.className = className
 	_attributes.sx = sx
 	_attributes.state = {
 		disabled = disabled,
 	}
+	_attributes.Event = hover.event
 	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

@@ -3,8 +3,12 @@ local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local _editorFace = TS.import(script, script.Parent.Parent.Parent, "editorFace")
+local editorPad = _editorFace.editorPad
+local editorRowHeight = _editorFace.editorRowHeight
+local editorText = _editorFace.editorText
 local useCFrameEditorStyles = componentStyles("CFrameEditor", function(theme)
-	return createStyles({
+	local _object = {
 		root = {
 			Size = UDim2.new(1, 0, 0, 0),
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -13,12 +17,12 @@ local useCFrameEditorStyles = componentStyles("CFrameEditor", function(theme)
 		},
 		wrap = {
 			FillDirection = Enum.FillDirection.Vertical,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
+			Padding = UDim.new(0, editorPad(theme)),
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
 		row = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			Padding = UDim.new(0, theme.padding.calc(0.5)),
+			Padding = UDim.new(0, editorPad(theme)),
 			VerticalAlignment = Enum.VerticalAlignment.Center,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 		},
@@ -27,35 +31,49 @@ local useCFrameEditorStyles = componentStyles("CFrameEditor", function(theme)
 			AutomaticSize = Enum.AutomaticSize.Y,
 			BackgroundTransparency = 1,
 		},
-		groupLabel = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
-			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.button,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		axes = {
-			Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
-			BackgroundTransparency = 1,
-		},
-		axis = {
-			Size = UDim2.new(1 / 3, -theme.padding.calc(0.5), 1, 0),
-			BackgroundTransparency = 1,
-		},
-		label = {
-			Size = UDim2.new(0, theme.spacing.calc(2.5), 1, 0),
-			BackgroundTransparency = 1,
-			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.button,
-			TextColor3 = theme.palette.text.secondary,
-			TextXAlignment = Enum.TextXAlignment.Left,
-		},
-		field = {
-			Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
-			BackgroundTransparency = 1,
-		},
-	})
+	}
+	local _left = "groupLabel"
+	local _object_1 = {
+		Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	_object.axes = {
+		Size = UDim2.new(1, 0, 0, editorRowHeight(theme, "small")),
+		BackgroundTransparency = 1,
+	}
+	_object.axis = {
+		Size = UDim2.new(1 / 3, -editorPad(theme), 1, 0),
+		BackgroundTransparency = 1,
+	}
+	local _left_1 = "label"
+	local _object_2 = {
+		Size = UDim2.new(0, theme.spacing.calc(2.5), 1, 0),
+		BackgroundTransparency = 1,
+		TextColor3 = theme.palette.text.secondary,
+	}
+	for _k, _v in editorText(theme) do
+		_object_2[_k] = _v
+	end
+	_object[_left_1] = _object_2
+	_object.labelX = {
+		TextColor3 = theme.palette.status.error.main,
+	}
+	_object.labelY = {
+		TextColor3 = theme.palette.status.success.main,
+	}
+	_object.labelZ = {
+		TextColor3 = theme.palette.status.info.main,
+	}
+	_object.field = {
+		Size = UDim2.new(1, -theme.spacing.calc(2.5), 1, 0),
+		BackgroundTransparency = 1,
+	}
+	return createStyles(_object)
 end)
 local default = useCFrameEditorStyles
 return {

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

@@ -3,7 +3,9 @@ local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useState = _react.useState
-local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlFade = _theme.controlFade
+local cx = _theme.cx
 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 useCheckboxStyles = TS.import(script, script.Parent, "Checkbox.styles").default
@@ -38,6 +40,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)
@@ -67,7 +70,6 @@ local function Checkbox(props)
 	}
 	_attributes.Active = active
 	_attributes.Selectable = not disabled
-	_attributes.BackgroundTransparency = if focused and active then 0.85 else 1
 	_attributes.Event = {
 		MouseButton1Click = function()
 			if active then
@@ -109,7 +111,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)
@@ -117,14 +119,14 @@ local function Checkbox(props)
 	local _attributes_5 = table.clone(mark)
 	setmetatable(_attributes_5, nil)
 	_attributes_5.Text = checkboxMark(value, mixed)
-	_attributes_5.TextTransparency = if disabled == true then 0.45 else 0
+	_attributes_5.TextTransparency = if disabled == true then controlFade else 0
 	local _exp_3 = React.createElement("frame", _attributes_2, _exp_1, _exp_2, React.createElement("textlabel", _attributes_5))
 	local _condition_1 = label ~= nil
 	if _condition_1 then
 		local _attributes_6 = table.clone(labelStyle)
 		setmetatable(_attributes_6, nil)
 		_attributes_6.Text = label
-		_attributes_6.TextTransparency = if disabled == true then 0.5 else 0
+		_attributes_6.TextTransparency = if disabled == true then controlFade else 0
 		_attributes_6.LayoutOrder = 2
 		_condition_1 = (React.createElement("textlabel", _attributes_6))
 	end

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/checkbox/components/checkboxLook.d.ts

@@ -1,5 +1,5 @@
 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 checkboxBoxTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 1 | 0 | 0.5 | 0.7 | 0.85;
+export declare function checkboxStrokeTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 0 | 0.5 | 0.25 | 0.45 | 0.2;

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

@@ -19,7 +19,7 @@ local function checkboxPointer(hovering, pressed, focused)
 end
 local function checkboxBoxTransparency(filled, disabled, pointer)
 	if filled then
-		return if disabled then 0.55 else 0
+		return if disabled then 0.5 else 0
 	end
 	if disabled then
 		return 1
@@ -34,7 +34,7 @@ local function checkboxBoxTransparency(filled, disabled, pointer)
 end
 local function checkboxStrokeTransparency(filled, disabled, pointer)
 	if disabled then
-		return 0.55
+		return 0.5
 	end
 	if pointer == "focus" or pointer == "press" then
 		return 0

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

@@ -1,8 +1,8 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local IconButton = TS.import(script, script.Parent.Parent.Parent, "iconButton").IconButton
 local useChipStyles = TS.import(script, script.Parent, "Chip.styles").default
 local function Chip(props)
 	local _binding = props
@@ -83,21 +83,23 @@ local function Chip(props)
 		_attributes_5.Text = label
 		local _exp_4 = React.createElement("textlabel", _attributes_5)
 		local _attributes_6 = {
-			key = "Delete",
+			id = "Delete",
+			glyph = "close",
 		}
-		for _k, _v in styles.delete do
-			_attributes_6[_k] = _v
+		local _result = (styles.glyph).Size
+		if _result ~= nil then
+			_result = _result.X.Offset
 		end
-		_attributes_6.Image = tostring(Icons.Close)
-		_attributes_6.Active = disabled ~= true
-		_attributes_6.Event = {
-			Activated = function()
-				if disabled ~= true then
-					onDelete()
-				end
-			end,
-		}
-		_condition_1 = (React.createElement(React.Fragment, nil, _exp_3, _exp_4, React.createElement("imagebutton", _attributes_6)))
+		local _condition_2 = _result
+		if _condition_2 == nil then
+			_condition_2 = 16
+		end
+		_attributes_6.iconSize = _condition_2
+		_attributes_6.tint = (styles.glyph).ImageColor3
+		_attributes_6.disabled = disabled
+		_attributes_6.className = styles.delete
+		_attributes_6.onClick = onDelete
+		_condition_1 = (React.createElement(React.Fragment, nil, _exp_3, _exp_4, React.createElement(IconButton, _attributes_6)))
 	end
 	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _condition_1)
 end

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,16 @@ 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 glyphPx = math.round(metrics.font * 0.7)
+	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,
@@ -45,6 +49,7 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			TextColor3 = ink,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = metrics.font,
+			TextWrapped = true,
 		},
 		padding = {
 			PaddingTop = UDim.new(0, theme.padding.calc(padY)),
@@ -56,9 +61,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,
@@ -71,6 +76,7 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			Size = UDim2.fromScale(0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
+			TextWrapped = true,
 			TextColor3 = ink,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = metrics.font,
@@ -78,12 +84,12 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 		},
 		delete = {
 			Size = UDim2.fromOffset(deletePx, deletePx),
-			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,
 			LayoutOrder = 2,
 		},
+		glyph = {
+			Size = UDim2.fromOffset(glyphPx, glyphPx),
+			ImageColor3 = if disabled then theme.palette.text.disabled elseif filledTone and status ~= nil then status.on else theme.palette.text.secondary,
+		},
 	})
 end)
 local default = useChipStyles

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/circularProgress/components/CircularProgress.luau

@@ -99,14 +99,21 @@ local function CircularProgress(props)
 	}
 	return React.createElement(SxHost, _attributes, React.createElement("uicorner", {
 		CornerRadius = UDim.new(1, 0),
+	}), React.createElement("frame", {
+		key = "Track",
+		Size = UDim2.fromScale(1, 1),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}, React.createElement("uicorner", {
+		CornerRadius = UDim.new(1, 0),
 	}), React.createElement("uistroke", {
 		Color = tint,
 		Thickness = thickness,
-		Transparency = if disabled then 0.85 else 0.82,
-	}), React.createElement("uistroke", {
+		Transparency = if disabled then 0.75 else 0.82,
+	})), React.createElement("uistroke", {
 		Color = tint,
 		Thickness = thickness,
-		Transparency = if disabled then 0.55 else 0,
+		Transparency = if disabled then 0.4 else 0,
 	}, React.createElement("uigradient", {
 		ref = gradientRef,
 		Rotation = -90,

package/out/ui/packages/codeEditor/components/CodeEditor.d.ts

@@ -0,0 +1,12 @@
+import { CustomizedProps } from "../../../../theme/index";
+import { CodeLanguage } from "../../markdown/parseMarkdown";
+export interface CodeEditorProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    language?: CodeLanguage;
+    onLanguageChange?: (language: CodeLanguage) => void;
+    readOnly?: boolean;
+    placeholder?: string;
+}
+declare function CodeEditor(props: CustomizedProps<Frame, CodeEditorProps>): JSX.Element;
+export default CodeEditor;