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

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

@@ -10,6 +10,7 @@ local useCardStyles = componentStyles("Card", function(theme, _param)
 		fullWidth = false
 	end
 	local width = cardColumnWidth(fullWidth, theme.padding.calc(32))
+	local heading = theme.typography.variants.h6
 	return createStyles({
 		column = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -29,8 +30,9 @@ local useCardStyles = componentStyles("Card", function(theme, _param)
 			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,
 		},

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

@@ -2,6 +2,7 @@
 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
@@ -20,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] }
@@ -100,12 +102,18 @@ 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("Rotation (degrees)", ORIENTATION, 2, 3))

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,44 +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.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,
-		},
-	})
+	}
+	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/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
@@ -68,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
@@ -118,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/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.luau

@@ -31,6 +31,7 @@ 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 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"
@@ -48,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)),
@@ -74,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,
@@ -81,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 filledTone and status ~= nil then status.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/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;

package/out/ui/packages/codeEditor/components/CodeEditor.luau

@@ -0,0 +1,262 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useState = _react.useState
+local TextService = TS.import(script, TS.getModule(script, "@rbxts", "services")).TextService
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
+local useTheme = _theme.useTheme
+local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local Menu = TS.import(script, script.Parent.Parent.Parent, "menu").Menu
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local _highlightCode = TS.import(script, script.Parent.Parent, "highlightCode")
+local colorHex = _highlightCode.colorHex
+local highlightCode = _highlightCode.highlightCode
+local useCodeEditorStyles = TS.import(script, script.Parent, "CodeEditor.styles").default
+local LANGUAGES = { "luau", "ts", "json", "text" }
+local function CodeEditor(props)
+	local _binding = props
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local language = _binding.language
+	local onLanguageChange = _binding.onLanguageChange
+	local readOnly = _binding.readOnly
+	if readOnly == nil then
+		readOnly = false
+	end
+	local placeholder = _binding.placeholder
+	if placeholder == nil then
+		placeholder = ""
+	end
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local _condition = value
+	if _condition == nil then
+		_condition = ""
+	end
+	local draft, setDraft = useState(_condition)
+	local picked, setPicked = useState(language or "text")
+	local focused, setFocused = useState(false)
+	local open, setOpen = useState(false)
+	local anchor, setAnchor = useState()
+	local boxHeight, setBoxHeight = useState(0)
+	local inkHeight, setInkHeight = useState(0)
+	local shown = language or picked
+	local editable = readOnly ~= true
+	-- TextBox has TextTransparency and no separate caret property, so a transparent field hides the caret.
+	local colored = not editable or not focused
+	local contentHeight = if colored then math.max(boxHeight, inkHeight) else boxHeight
+	local minHeight = if editable then theme.spacing.calc(8) else 0
+	local fieldHeight = math.max(minHeight, contentHeight)
+	local metrics = controlMetrics(theme.density, "small")
+	local _condition_1 = theme.typography.fontSizes.caption
+	if _condition_1 == nil then
+		_condition_1 = metrics.font
+	end
+	local mark = _condition_1
+	local pad = theme.padding.calc(1)
+	local font = theme.typography.fontFamilies.default or Enum.Font.SourceSans
+	local textWidth = TextService:GetTextSize(shown, metrics.font, font, Vector2.new(10000, 100)).X
+	local triggerWidth = pad + textWidth + pad + mark + pad
+	local styles = useCodeEditorStyles({
+		focused = focused and editable,
+		fieldHeight = fieldHeight,
+		triggerWidth = triggerWidth,
+	})
+	local colors = {
+		keyword = colorHex(theme.palette.code.keyword),
+		string = colorHex(theme.palette.code.string),
+		number = colorHex(theme.palette.code.number),
+		comment = colorHex(theme.palette.code.comment),
+		func = colorHex(theme.palette.code.func),
+	}
+	local highlighted = highlightCode(draft, shown, colors)
+	local empty = #draft == 0
+	useEffect(function()
+		local _condition_2 = value
+		if _condition_2 == nil then
+			_condition_2 = ""
+		end
+		return setDraft(_condition_2)
+	end, { value })
+	local pick = function(choice)
+		setOpen(false)
+		if language == nil then
+			setPicked(choice)
+		end
+		if onLanguageChange then
+			onLanguageChange(choice)
+		end
+	end
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition_2 = id
+	if not (_condition_2 ~= 0 and _condition_2 == _condition_2 and _condition_2 ~= "" and _condition_2) then
+		_condition_2 = "CodeEditor"
+	end
+	_attributes.key = _condition_2
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		focused = focused,
+	}
+	local _attributes_1 = table.clone(styles.stroke)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uistroke", _attributes_1)
+	local _attributes_2 = table.clone(styles.corner)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uicorner", _attributes_2)
+	local _attributes_3 = table.clone(styles.padding)
+	setmetatable(_attributes_3, nil)
+	local _exp_2 = React.createElement("uipadding", _attributes_3)
+	local _attributes_4 = table.clone(styles.stack)
+	setmetatable(_attributes_4, nil)
+	local _exp_3 = React.createElement("uilistlayout", _attributes_4)
+	local _condition_3 = editable
+	if _condition_3 then
+		local _attributes_5 = {
+			key = "Bar",
+		}
+		for _k, _v in styles.bar do
+			_attributes_5[_k] = _v
+		end
+		local _attributes_6 = table.clone(styles.barRow)
+		setmetatable(_attributes_6, nil)
+		local _exp_4 = React.createElement("uilistlayout", _attributes_6)
+		local _attributes_7 = {
+			key = "Language",
+			ref = setAnchor,
+		}
+		for _k, _v in styles.trigger do
+			_attributes_7[_k] = _v
+		end
+		_attributes_7.Text = shown
+		_attributes_7.Event = {
+			Activated = function()
+				return setOpen(function(current)
+					return not current
+				end)
+			end,
+		}
+		local _exp_5 = React.createElement("uipadding", {
+			PaddingLeft = UDim.new(0, pad),
+			PaddingRight = UDim.new(0, pad + mark + pad),
+		})
+		local _attributes_8 = table.clone(styles.corner)
+		setmetatable(_attributes_8, nil)
+		local _exp_6 = React.createElement("uicorner", _attributes_8)
+		local _attributes_9 = table.clone(styles.triggerStroke)
+		setmetatable(_attributes_9, nil)
+		local _exp_7 = React.createElement("textbutton", _attributes_7, _exp_5, _exp_6, React.createElement("uistroke", _attributes_9), React.createElement("imagelabel", {
+			key = "Caret",
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			AnchorPoint = Vector2.new(1, 0.5),
+			Position = UDim2.new(1, mark + pad, 0.5, 0),
+			Size = UDim2.fromOffset(mark, mark),
+			Image = Icons.Collapsed,
+			Rotation = 90,
+			ImageColor3 = theme.palette.text.secondary,
+			ScaleType = Enum.ScaleType.Fit,
+		}))
+		local _attributes_10 = {
+			anchor = anchor,
+			open = open,
+			dense = true,
+			selected = shown,
+		}
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#LANGUAGES)
+		local _callback = function(choice)
+			return {
+				id = choice,
+				text = choice,
+			}
+		end
+		for _k, _v in LANGUAGES do
+			_newValue[_k] = _callback(_v, _k - 1, LANGUAGES)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_attributes_10.items = _newValue
+		_attributes_10.onSelect = function(choice)
+			return pick(choice)
+		end
+		_attributes_10.onClose = function()
+			return setOpen(false)
+		end
+		_condition_3 = (React.createElement("frame", _attributes_5, _exp_4, _exp_7, React.createElement(Menu, _attributes_10)))
+	end
+	local _attributes_5 = {
+		key = "Field",
+	}
+	for _k, _v in styles.fieldHost do
+		_attributes_5[_k] = _v
+	end
+	local _attributes_6 = {
+		key = "Ink",
+	}
+	for _k, _v in styles.highlight do
+		_attributes_6[_k] = _v
+	end
+	_attributes_6.Visible = colored
+	_attributes_6.Active = false
+	_attributes_6.Selectable = false
+	_attributes_6.RichText = not empty
+	_attributes_6.Text = if empty then placeholder else highlighted
+	_attributes_6.TextColor3 = if empty then theme.palette.text.secondary else theme.palette.text.primary
+	_attributes_6.Change = {
+		TextBounds = function(rbx)
+			return setInkHeight(rbx.TextBounds.Y)
+		end,
+	}
+	local _exp_4 = React.createElement("textlabel", _attributes_6)
+	local _attributes_7 = {
+		key = "Input",
+	}
+	for _k, _v in styles.field do
+		_attributes_7[_k] = _v
+	end
+	_attributes_7.Text = draft
+	_attributes_7.PlaceholderText = if colored then "" else placeholder
+	_attributes_7.TextTransparency = if colored then 1 else 0
+	_attributes_7.MultiLine = true
+	_attributes_7.TextEditable = editable
+	_attributes_7.Change = {
+		Text = function(rbx)
+			if not editable then
+				return nil
+			end
+			setDraft(rbx.Text)
+			if onChange then
+				onChange(rbx.Text)
+			end
+		end,
+		TextBounds = function(rbx)
+			return setBoxHeight(rbx.TextBounds.Y)
+		end,
+	}
+	_attributes_7.Event = {
+		Focused = function()
+			if editable then
+				setFocused(true)
+			end
+		end,
+		FocusLost = function()
+			return setFocused(false)
+		end,
+	}
+	return React.createElement(SxHost, _attributes, _exp, _exp_1, _exp_2, _exp_3, _condition_3, React.createElement("frame", _attributes_5, _exp_4, React.createElement("textbox", _attributes_7)))
+end
+local default = CodeEditor
+return {
+	default = default,
+}

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

@@ -0,0 +1,6 @@
+declare const useCodeEditorStyles: (props: {
+    focused?: boolean;
+    fieldHeight: number;
+    triggerWidth: number;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useCodeEditorStyles;