@rbxts/uiblox 0.1.53 → 0.2.0-alpha.1

package/out/ui/packages/colorPicker/components/ColorPicker.luau

@@ -0,0 +1,512 @@
+-- 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 useRef = _react.useRef
+local useState = _react.useState
+local UserInputService = TS.import(script, TS.getModule(script, "@rbxts", "services")).UserInputService
+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 Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
+local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
+local Popup = TS.import(script, script.Parent.Parent.Parent, "popup").Popup
+local useColorPickerStyles = TS.import(script, script.Parent, "ColorPicker.styles").default
+local _colorValue = TS.import(script, script.Parent, "colorValue")
+local byteToUnit = _colorValue.byteToUnit
+local channelToByte = _colorValue.channelToByte
+local colorBytes = _colorValue.colorBytes
+local colorToHex = _colorValue.colorToHex
+local hsvToColor3 = _colorValue.hsvToColor3
+local parseHex = _colorValue.parseHex
+local recentColors = _colorValue.recentColors
+local rememberColor = _colorValue.rememberColor
+local resolveHsv = _colorValue.resolveHsv
+local sameColor = _colorValue.sameColor
+local HUE_STOPS = { ColorSequenceKeypoint.new(0, Color3.new(1, 0, 0)), ColorSequenceKeypoint.new(1 / 6, Color3.new(1, 1, 0)), ColorSequenceKeypoint.new(2 / 6, Color3.new(0, 1, 0)), ColorSequenceKeypoint.new(3 / 6, Color3.new(0, 1, 1)), ColorSequenceKeypoint.new(4 / 6, Color3.new(0, 0, 1)), ColorSequenceKeypoint.new(5 / 6, Color3.new(1, 0, 1)), ColorSequenceKeypoint.new(1, Color3.new(1, 0, 0)) }
+local function pointerInput(input)
+	return input.UserInputType == Enum.UserInputType.MouseButton1 or input.UserInputType == Enum.UserInputType.Touch or input.UserInputType == Enum.UserInputType.MouseMovement
+end
+local function ColorPanel(props)
+	local _binding = props
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local styles = useColorPickerStyles()
+	local active = canActivate(disabled)
+	local hsvRef = useRef(resolveHsv(value))
+	local hsv, setHsv = useState(hsvRef.current)
+	local hexDraft, setHexDraft = useState(colorToHex(value))
+	local hexFault, setHexFault = useState(false)
+	local dragging = useRef(nil)
+	local latest = useRef(value)
+	local recents = recentColors()
+	useEffect(function()
+		if sameColor(value, latest.current) then
+			return nil
+		end
+		latest.current = value
+		local resolved = resolveHsv(value, hsvRef.current)
+		hsvRef.current = resolved
+		setHsv(resolved)
+		setHexDraft(colorToHex(value))
+		setHexFault(false)
+	end, { value })
+	local emit = function(hsvValue)
+		hsvRef.current = hsvValue
+		setHsv(hsvValue)
+		local color = hsvToColor3(hsvValue.h, hsvValue.s, hsvValue.v)
+		if sameColor(color, latest.current) then
+			return nil
+		end
+		latest.current = color
+		setHexDraft(colorToHex(color))
+		setHexFault(false)
+		onChange(color)
+	end
+	local updatePlane = function(rbx, position)
+		local size = rbx.AbsoluteSize
+		if size.X <= 0 or size.Y <= 0 then
+			return nil
+		end
+		local origin = rbx.AbsolutePosition
+		emit({
+			h = hsvRef.current.h,
+			s = math.clamp((position.X - origin.X) / size.X, 0, 1),
+			v = 1 - math.clamp((position.Y - origin.Y) / size.Y, 0, 1),
+		})
+	end
+	local updateHue = function(rbx, position)
+		local width = rbx.AbsoluteSize.X
+		if width <= 0 then
+			return nil
+		end
+		emit({
+			h = math.clamp((position.X - rbx.AbsolutePosition.X) / width, 0, 1),
+			s = hsvRef.current.s,
+			v = hsvRef.current.v,
+		})
+	end
+	local hueColor = hsvToColor3(hsv.h, 1, 1)
+	local channel = function(label, unit, apply)
+		local _attributes = {
+			key = label,
+		}
+		for _k, _v in styles.channel do
+			_attributes[_k] = _v
+		end
+		local _attributes_1 = table.clone(styles.rowLayout)
+		setmetatable(_attributes_1, nil)
+		local _exp = React.createElement("uilistlayout", _attributes_1)
+		local _attributes_2 = table.clone(styles.label)
+		setmetatable(_attributes_2, nil)
+		_attributes_2.Text = label
+		local _exp_1 = React.createElement("textlabel", _attributes_2)
+		local _attributes_3 = table.clone(styles.channelField)
+		setmetatable(_attributes_3, nil)
+		return React.createElement("frame", _attributes, _exp, _exp_1, React.createElement("frame", _attributes_3, React.createElement(NumberInput, {
+			value = channelToByte(unit),
+			min = 0,
+			max = 255,
+			step = 1,
+			disabled = disabled,
+			width = UDim.new(1, 0),
+			onChange = function(byte)
+				return apply(byte)
+			end,
+		})))
+	end
+	local _attributes = {
+		key = "Panel",
+	}
+	for _k, _v in styles.root do
+		_attributes[_k] = _v
+	end
+	_attributes.BackgroundTransparency = 1
+	_attributes.Selectable = false
+	local _attributes_1 = table.clone(styles.column)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _attributes_2 = {
+		key = "Header",
+	}
+	for _k, _v in styles.row do
+		_attributes_2[_k] = _v
+	end
+	_attributes_2.LayoutOrder = 1
+	local _attributes_3 = table.clone(styles.rowLayout)
+	setmetatable(_attributes_3, nil)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_3)
+	local _attributes_4 = {
+		key = "Swatch",
+	}
+	for _k, _v in styles.swatch do
+		_attributes_4[_k] = _v
+	end
+	_attributes_4.BackgroundColor3 = value
+	_attributes_4.LayoutOrder = 1
+	local _attributes_5 = table.clone(styles.corner)
+	setmetatable(_attributes_5, nil)
+	local _exp_2 = React.createElement("uicorner", _attributes_5)
+	local _attributes_6 = table.clone(styles.swatchStroke)
+	setmetatable(_attributes_6, nil)
+	local _exp_3 = React.createElement("frame", _attributes_4, _exp_2, React.createElement("uistroke", _attributes_6))
+	local _attributes_7 = {
+		key = "Hex",
+	}
+	for _k, _v in styles.hex do
+		_attributes_7[_k] = _v
+	end
+	_attributes_7.LayoutOrder = 2
+	local _exp_4 = React.createElement("frame", _attributes_2, _exp_1, _exp_3, React.createElement("frame", _attributes_7, React.createElement(Input, {
+		text = hexDraft,
+		placeholder = "#RRGGBB",
+		disabled = disabled,
+		hasError = hexFault,
+		width = UDim.new(1, 0),
+		onInput = function(text)
+			setHexDraft(text)
+			local parsed = parseHex(text)
+			if parsed == nil then
+				setHexFault(#text > 0)
+				return nil
+			end
+			setHexFault(false)
+			emit(resolveHsv(parsed, hsvRef.current))
+		end,
+		onTextChanged = function(text)
+			local parsed = parseHex(text)
+			if parsed == nil then
+				setHexFault(false)
+				setHexDraft(colorToHex(latest.current))
+				return nil
+			end
+			setHexFault(false)
+			emit(resolveHsv(parsed, hsvRef.current))
+		end,
+	})))
+	local _attributes_8 = {
+		key = "Plane",
+	}
+	for _k, _v in styles.plane do
+		_attributes_8[_k] = _v
+	end
+	_attributes_8.BackgroundColor3 = hueColor
+	_attributes_8.LayoutOrder = 2
+	_attributes_8.Selectable = active
+	_attributes_8.Active = active
+	_attributes_8.Event = {
+		InputBegan = function(rbx, input)
+			if not active or not pointerInput(input) or input.UserInputType == Enum.UserInputType.MouseMovement then
+				return nil
+			end
+			dragging.current = "plane"
+			updatePlane(rbx, input.Position)
+		end,
+		InputChanged = function(rbx, input)
+			if dragging.current == "plane" and pointerInput(input) then
+				updatePlane(rbx, input.Position)
+			end
+		end,
+		InputEnded = function(_, input)
+			if pointerInput(input) then
+				dragging.current = nil
+			end
+		end,
+	}
+	local _attributes_9 = table.clone(styles.corner)
+	setmetatable(_attributes_9, nil)
+	local _exp_5 = React.createElement("uicorner", _attributes_9)
+	local _exp_6 = React.createElement("uigradient", {
+		Color = ColorSequence.new(Color3.new(1, 1, 1), hueColor),
+	})
+	local _attributes_10 = {
+		key = "Shade",
+	}
+	for _k, _v in styles.planeOverlay do
+		_attributes_10[_k] = _v
+	end
+	local _attributes_11 = table.clone(styles.corner)
+	setmetatable(_attributes_11, nil)
+	local _exp_7 = React.createElement("frame", _attributes_10, React.createElement("uicorner", _attributes_11), React.createElement("uigradient", {
+		Rotation = 90,
+		Transparency = NumberSequence.new({ NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(1, 0) }),
+	}))
+	local _attributes_12 = {
+		key = "Cursor",
+	}
+	for _k, _v in styles.cursor do
+		_attributes_12[_k] = _v
+	end
+	_attributes_12.Position = UDim2.fromScale(hsv.s, 1 - hsv.v)
+	local _exp_8 = React.createElement("uicorner", {
+		CornerRadius = UDim.new(1, 0),
+	})
+	local _attributes_13 = table.clone(styles.cursorStroke)
+	setmetatable(_attributes_13, nil)
+	local _exp_9 = React.createElement("frame", _attributes_8, _exp_5, _exp_6, _exp_7, React.createElement("frame", _attributes_12, _exp_8, React.createElement("uistroke", _attributes_13)))
+	local _attributes_14 = {
+		key = "Hue",
+	}
+	for _k, _v in styles.hue do
+		_attributes_14[_k] = _v
+	end
+	_attributes_14.LayoutOrder = 3
+	_attributes_14.Selectable = active
+	_attributes_14.Active = active
+	_attributes_14.Event = {
+		InputBegan = function(rbx, input)
+			if not active or not pointerInput(input) or input.UserInputType == Enum.UserInputType.MouseMovement then
+				return nil
+			end
+			dragging.current = "hue"
+			updateHue(rbx, input.Position)
+		end,
+		InputChanged = function(rbx, input)
+			if dragging.current == "hue" and pointerInput(input) then
+				updateHue(rbx, input.Position)
+			end
+		end,
+		InputEnded = function(_, input)
+			if pointerInput(input) then
+				dragging.current = nil
+			end
+		end,
+	}
+	local _attributes_15 = table.clone(styles.corner)
+	setmetatable(_attributes_15, nil)
+	local _exp_10 = React.createElement("uicorner", _attributes_15)
+	local _exp_11 = React.createElement("uigradient", {
+		Color = ColorSequence.new(HUE_STOPS),
+	})
+	local _attributes_16 = {
+		key = "Knob",
+	}
+	for _k, _v in styles.hueKnob do
+		_attributes_16[_k] = _v
+	end
+	_attributes_16.Position = UDim2.fromScale(hsv.h, 0.5)
+	local _attributes_17 = table.clone(styles.corner)
+	setmetatable(_attributes_17, nil)
+	local _exp_12 = React.createElement("frame", _attributes_14, _exp_10, _exp_11, React.createElement("frame", _attributes_16, React.createElement("uicorner", _attributes_17)))
+	local _attributes_18 = {
+		key = "Rgb",
+	}
+	for _k, _v in styles.row do
+		_attributes_18[_k] = _v
+	end
+	_attributes_18.LayoutOrder = 4
+	_attributes_18.Size = UDim2.new(1, 0, 0, 0)
+	_attributes_18.AutomaticSize = Enum.AutomaticSize.Y
+	local _attributes_19 = table.clone(styles.rowLayout)
+	setmetatable(_attributes_19, nil)
+	local _exp_13 = React.createElement("frame", _attributes_18, React.createElement("uilistlayout", _attributes_19), channel("R", value.R, function(byte)
+		return emit(resolveHsv(Color3.new(byteToUnit(byte), value.G, value.B), hsvRef.current))
+	end), channel("G", value.G, function(byte)
+		return emit(resolveHsv(Color3.new(value.R, byteToUnit(byte), value.B), hsvRef.current))
+	end), channel("B", value.B, function(byte)
+		return emit(resolveHsv(Color3.new(value.R, value.G, byteToUnit(byte)), hsvRef.current))
+	end))
+	local _condition = #recents > 0
+	if _condition then
+		local _attributes_20 = {
+			key = "Recent",
+		}
+		for _k, _v in styles.recent do
+			_attributes_20[_k] = _v
+		end
+		_attributes_20.LayoutOrder = 5
+		local _attributes_21 = table.clone(styles.rowLayout)
+		setmetatable(_attributes_21, nil)
+		local _exp_14 = React.createElement("uilistlayout", _attributes_21)
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#recents)
+		local _callback = function(color, index)
+			local _attributes_22 = {
+				key = `Recent-{index}`,
+			}
+			for _k, _v in styles.recentChip do
+				_attributes_22[_k] = _v
+			end
+			_attributes_22.BackgroundColor3 = color
+			_attributes_22.LayoutOrder = index
+			_attributes_22.Event = {
+				Activated = function()
+					if active then
+						emit(resolveHsv(color, hsvRef.current))
+					end
+				end,
+			}
+			local _attributes_23 = table.clone(styles.corner)
+			setmetatable(_attributes_23, nil)
+			local _exp_15 = React.createElement("uicorner", _attributes_23)
+			local _attributes_24 = table.clone(styles.swatchStroke)
+			setmetatable(_attributes_24, nil)
+			return React.createElement("textbutton", _attributes_22, _exp_15, React.createElement("uistroke", _attributes_24))
+		end
+		for _k, _v in recents do
+			_newValue[_k] = _callback(_v, _k - 1, recents)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_condition = (React.createElement("frame", _attributes_20, _exp_14, _newValue))
+	end
+	return React.createElement("frame", _attributes, _exp, _exp_4, _exp_9, _exp_12, _exp_13, _condition)
+end
+local function ColorPicker(props)
+	local _binding = props
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useColorPickerStyles()
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local active = canActivate(disabled)
+	local anchor, setAnchor = useState()
+	local open, setOpen = useState(false)
+	local hexDraft, setHexDraft = useState(colorToHex(value))
+	local hexFault, setHexFault = useState(false)
+	local shown = open and active
+	useEffect(function()
+		setHexDraft(colorToHex(value))
+		setHexFault(false)
+	end, { value })
+	local close = function()
+		rememberColor(value)
+		setOpen(false)
+	end
+	useEffect(function()
+		if not shown then
+			return nil
+		end
+		local connection = UserInputService.InputBegan:Connect(function(input)
+			if input.KeyCode == Enum.KeyCode.Escape or input.KeyCode == Enum.KeyCode.ButtonB then
+				close()
+			end
+		end)
+		return function()
+			return connection:Disconnect()
+		end
+	end, { shown, value })
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "ColorPicker"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.field do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	if sx then
+		for _k, _v in sx do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = table.clone(styles.rowLayout)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _attributes_2 = {
+		key = "Swatch",
+		ref = setAnchor,
+	}
+	for _k, _v in styles.swatchButton do
+		_attributes_2[_k] = _v
+	end
+	_attributes_2.BackgroundColor3 = value
+	_attributes_2.LayoutOrder = 1
+	_attributes_2.Active = active
+	_attributes_2.Selectable = active
+	_attributes_2.Event = {
+		Activated = function()
+			if not active then
+				return nil
+			end
+			if shown then
+				close()
+			else
+				setOpen(true)
+			end
+		end,
+	}
+	local _attributes_3 = table.clone(styles.corner)
+	setmetatable(_attributes_3, nil)
+	local _exp_1 = React.createElement("uicorner", _attributes_3)
+	local _attributes_4 = table.clone(styles.swatchStroke)
+	setmetatable(_attributes_4, nil)
+	local _exp_2 = React.createElement("textbutton", _attributes_2, _exp_1, React.createElement("uistroke", _attributes_4))
+	local _attributes_5 = {
+		key = "Value",
+	}
+	for _k, _v in styles.value do
+		_attributes_5[_k] = _v
+	end
+	_attributes_5.LayoutOrder = 2
+	local _exp_3 = React.createElement("frame", _attributes_5, React.createElement(Input, {
+		text = hexDraft,
+		placeholder = colorBytes(value),
+		disabled = disabled,
+		hasError = hexFault,
+		width = UDim.new(1, 0),
+		onInput = function(text)
+			setHexDraft(text)
+			local parsed = parseHex(text)
+			if parsed == nil then
+				setHexFault(#text > 0)
+				return nil
+			end
+			setHexFault(false)
+			onChange(parsed)
+		end,
+		onTextChanged = function(text)
+			local parsed = parseHex(text)
+			if parsed == nil then
+				setHexFault(false)
+				setHexDraft(colorToHex(value))
+				return nil
+			end
+			setHexFault(false)
+			onChange(parsed)
+		end,
+	}))
+	local _condition_1 = shown
+	if _condition_1 then
+		local _attributes_6 = {
+			key = "Shell",
+		}
+		for _k, _v in styles.shell do
+			_attributes_6[_k] = _v
+		end
+		local _attributes_7 = table.clone(styles.corner)
+		setmetatable(_attributes_7, nil)
+		local _exp_4 = React.createElement("uicorner", _attributes_7)
+		local _attributes_8 = table.clone(styles.swatchStroke)
+		setmetatable(_attributes_8, nil)
+		local _exp_5 = React.createElement("uistroke", _attributes_8)
+		local _attributes_9 = table.clone(styles.shellPad)
+		setmetatable(_attributes_9, nil)
+		_condition_1 = (React.createElement(Popup, {
+			anchor = anchor,
+			preferredWidth = theme.spacing.calc(18),
+			preferredHeight = theme.spacing.calc(20),
+			onDismiss = close,
+		}, React.createElement("frame", _attributes_6, _exp_4, _exp_5, React.createElement("uipadding", _attributes_9), React.createElement(ColorPanel, {
+			value = value,
+			disabled = disabled,
+			onChange = onChange,
+		}))))
+	end
+	return React.createElement("frame", _attributes, _exp, _exp_2, _exp_3, _condition_1)
+end
+local default = ColorPicker
+return {
+	default = default,
+}

package/out/ui/packages/colorPicker/components/ColorPicker.styles.d.ts

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

package/out/ui/packages/colorPicker/components/ColorPicker.styles.luau

@@ -0,0 +1,145 @@
+-- Compiled with roblox-ts v3.0.0
+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 useColorPickerStyles = componentStyles("ColorPicker", function(theme)
+	return createStyles({
+		root = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundColor3 = theme.palette.primary.main,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Selectable = true,
+		},
+		column = {
+			FillDirection = Enum.FillDirection.Vertical,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		row = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		rowLayout = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		swatch = {
+			Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
+			BorderSizePixel = 0,
+		},
+		swatchStroke = {
+			Color = theme.palette.divider,
+			Thickness = 1,
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.padding.calc(0.5)),
+		},
+		hex = {
+			Size = UDim2.new(1, -theme.spacing.calc(3), 1, 0),
+			BackgroundTransparency = 1,
+		},
+		plane = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(8)),
+			BorderSizePixel = 0,
+			Active = true,
+		},
+		planeOverlay = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundColor3 = Color3.new(0, 0, 0),
+			BorderSizePixel = 0,
+		},
+		cursor = {
+			Size = UDim2.fromOffset(theme.spacing.calc(1), theme.spacing.calc(1)),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		cursorStroke = {
+			Color = Color3.new(1, 1, 1),
+			Thickness = 2,
+		},
+		hue = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(1.5)),
+			BorderSizePixel = 0,
+			Active = true,
+		},
+		hueKnob = {
+			Size = UDim2.fromOffset(theme.padding.calc(1), theme.spacing.calc(1.5)),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			BackgroundColor3 = theme.palette.text.primary,
+			BorderSizePixel = 0,
+		},
+		channel = {
+			Size = UDim2.new(1 / 3, -theme.padding.calc(1), 0, theme.spacing.calc(2)),
+			BackgroundTransparency = 1,
+		},
+		label = {
+			Size = UDim2.new(0, theme.spacing.calc(1), 1, 0),
+			BackgroundTransparency = 1,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+			TextColor3 = theme.palette.text.secondary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
+		channelField = {
+			Size = UDim2.new(1, -theme.spacing.calc(1), 1, 0),
+			BackgroundTransparency = 1,
+		},
+		field = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		swatchButton = {
+			Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Text = "",
+		},
+		value = {
+			Size = UDim2.new(1, -theme.spacing.calc(3), 1, 0),
+			BackgroundTransparency = 1,
+		},
+		shell = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundColor3 = theme.palette.surface.elevated,
+			BorderSizePixel = 0,
+		},
+		shellPad = {
+			PaddingTop = UDim.new(0, theme.padding.calc(1)),
+			PaddingBottom = UDim.new(0, theme.padding.calc(1)),
+			PaddingLeft = UDim.new(0, theme.padding.calc(1)),
+			PaddingRight = UDim.new(0, theme.padding.calc(1)),
+		},
+		recent = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(1.5)),
+			BackgroundTransparency = 1,
+		},
+		recentChip = {
+			Size = UDim2.fromOffset(theme.spacing.calc(1.5), theme.spacing.calc(1.5)),
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Text = "",
+		},
+		link = {
+			Size = UDim2.new(0, 0, 0, theme.spacing.calc(1.5)),
+			AutomaticSize = Enum.AutomaticSize.X,
+			BackgroundTransparency = 1,
+			AutoButtonColor = false,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+			TextColor3 = theme.palette.text.secondary,
+			TextXAlignment = Enum.TextXAlignment.Left,
+		},
+	})
+end)
+local default = useColorPickerStyles
+return {
+	default = default,
+}

package/out/ui/packages/colorPicker/components/ColorSequenceEditor.d.ts

@@ -0,0 +1,8 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface ColorSequenceEditorProps {
+    value: ColorSequence;
+    onChange: (value: ColorSequence) => void;
+    disabled?: boolean;
+}
+declare function ColorSequenceEditor(props: CustomizedProps<Frame, ColorSequenceEditorProps>): JSX.Element;
+export default ColorSequenceEditor;