@rbxts/uiblox 0.1.52 → 0.2.0-alpha.0

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;

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

@@ -0,0 +1,190 @@
+-- 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 useRef = _react.useRef
+local useState = _react.useState
+local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local ColorPicker = TS.import(script, script.Parent, "ColorPicker").default
+local useColorPickerStyles = TS.import(script, script.Parent, "ColorPicker.styles").default
+local _sequenceValue = TS.import(script, script.Parent, "sequenceValue")
+local hitStop = _sequenceValue.hitStop
+local insertColorStop = _sequenceValue.insertColorStop
+local patchColorStop = _sequenceValue.patchColorStop
+local readColorStops = _sequenceValue.readColorStops
+local removeColorStop = _sequenceValue.removeColorStop
+local writeColorStops = _sequenceValue.writeColorStops
+local function ColorSequenceEditor(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 active = canActivate(disabled)
+	local stops = readColorStops(value)
+	local selected, setSelected = useState(0)
+	local dragging = useRef(false)
+	local index = math.clamp(selected, 0, math.max(0, #stops - 1))
+	local current = stops[index + 1] or {
+		t = 0,
+		color = Color3.new(),
+	}
+	local commit = function(updated)
+		return onChange(writeColorStops(updated))
+	end
+	local atAlpha = function(rbx, position)
+		local width = rbx.AbsoluteSize.X
+		if width <= 0 then
+			return 0
+		end
+		return math.clamp((position.X - rbx.AbsolutePosition.X) / width, 0, 1)
+	end
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "ColorSequenceEditor"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root 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
+	_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 = "Bar",
+	}
+	for _k, _v in styles.hue do
+		_attributes_2[_k] = _v
+	end
+	_attributes_2.LayoutOrder = 1
+	_attributes_2.Active = active
+	_attributes_2.Event = {
+		InputBegan = function(rbx, input)
+			if not active or input.UserInputType ~= Enum.UserInputType.MouseButton1 then
+				return nil
+			end
+			local alpha = atAlpha(rbx, input.Position)
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue = table.create(#stops)
+			local _callback = function(stop)
+				return stop.t
+			end
+			for _k, _v in stops do
+				_newValue[_k] = _callback(_v, _k - 1, stops)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			local hit = hitStop(_newValue, alpha, 0.04)
+			if hit >= 0 then
+				setSelected(hit)
+				dragging.current = hit > 0 and hit < #stops - 1
+				return nil
+			end
+			local updated = insertColorStop(stops, alpha)
+			commit(updated)
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue_1 = table.create(#updated)
+			local _callback_1 = function(stop)
+				return stop.t
+			end
+			for _k, _v in updated do
+				_newValue_1[_k] = _callback_1(_v, _k - 1, updated)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			setSelected(hitStop(_newValue_1, alpha, 1))
+		end,
+		InputChanged = function(rbx, input)
+			if not dragging.current or input.UserInputType ~= Enum.UserInputType.MouseMovement then
+				return nil
+			end
+			commit(patchColorStop(stops, index, {
+				t = atAlpha(rbx, input.Position),
+			}))
+		end,
+		InputEnded = function()
+			dragging.current = false
+		end,
+	}
+	local _attributes_3 = table.clone(styles.corner)
+	setmetatable(_attributes_3, nil)
+	local _exp_1 = React.createElement("uicorner", _attributes_3)
+	local _exp_2 = React.createElement("uigradient", {
+		Color = value,
+	})
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#stops)
+	local _callback = function(stop, stopIndex)
+		local _attributes_4 = {
+			key = `Stop-{stopIndex}`,
+		}
+		for _k, _v in styles.hueKnob do
+			_attributes_4[_k] = _v
+		end
+		_attributes_4.BackgroundColor3 = stop.color
+		_attributes_4.Position = UDim2.fromScale(stop.t, 0.5)
+		_attributes_4.ZIndex = if stopIndex == index then 2 else 1
+		local _attributes_5 = table.clone(styles.corner)
+		setmetatable(_attributes_5, nil)
+		return React.createElement("frame", _attributes_4, React.createElement("uicorner", _attributes_5), React.createElement("uistroke", {
+			Thickness = if stopIndex == index then 2 else 1,
+			Color = Color3.new(1, 1, 1),
+		}))
+	end
+	for _k, _v in stops do
+		_newValue[_k] = _callback(_v, _k - 1, stops)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	local _exp_3 = React.createElement("frame", _attributes_2, _exp_1, _exp_2, _newValue)
+	local _exp_4 = React.createElement(ColorPicker, {
+		key = "StopColor",
+		value = current.color,
+		disabled = disabled,
+		onChange = function(color)
+			return commit(patchColorStop(stops, index, {
+				color = color,
+			}))
+		end,
+	})
+	local _condition_1 = #stops > 2 and index > 0 and index < #stops - 1
+	if _condition_1 then
+		local _attributes_4 = {
+			key = "Remove",
+		}
+		for _k, _v in styles.link do
+			_attributes_4[_k] = _v
+		end
+		_attributes_4.Text = "Remove stop"
+		_attributes_4.LayoutOrder = 3
+		_attributes_4.Event = {
+			Activated = function()
+				if not active then
+					return nil
+				end
+				commit(removeColorStop(stops, index))
+				setSelected(math.max(0, index - 1))
+			end,
+		}
+		_condition_1 = (React.createElement("textbutton", _attributes_4))
+	end
+	return React.createElement("frame", _attributes, _exp, _exp_3, _exp_4, _condition_1)
+end
+local default = ColorSequenceEditor
+return {
+	default = default,
+}

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

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

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

@@ -0,0 +1,240 @@
+-- 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 useRef = _react.useRef
+local useState = _react.useState
+local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local NumberInput = TS.import(script, script.Parent.Parent.Parent, "numberInput").NumberInput
+local useColorPickerStyles = TS.import(script, script.Parent, "ColorPicker.styles").default
+local _sequenceValue = TS.import(script, script.Parent, "sequenceValue")
+local hitStop = _sequenceValue.hitStop
+local insertNumberStop = _sequenceValue.insertNumberStop
+local patchNumberStop = _sequenceValue.patchNumberStop
+local readNumberStops = _sequenceValue.readNumberStops
+local removeNumberStop = _sequenceValue.removeNumberStop
+local writeNumberStops = _sequenceValue.writeNumberStops
+local function NumberSequenceEditor(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 active = canActivate(disabled)
+	local stops = readNumberStops(value)
+	local selected, setSelected = useState(0)
+	local dragging = useRef(false)
+	local index = math.clamp(selected, 0, math.max(0, #stops - 1))
+	local current = stops[index + 1] or {
+		t = 0,
+		value = 0,
+		envelope = 0,
+	}
+	local commit = function(updated)
+		return onChange(writeNumberStops(updated))
+	end
+	local atAlpha = function(rbx, position)
+		local width = rbx.AbsoluteSize.X
+		if width <= 0 then
+			return 0
+		end
+		return math.clamp((position.X - rbx.AbsolutePosition.X) / width, 0, 1)
+	end
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "NumberSequenceEditor"
+	end
+	_attributes.key = _condition
+	_attributes.ref = ref
+	for _k, _v in styles.root 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
+	_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 = "Bar",
+	}
+	for _k, _v in styles.hue do
+		_attributes_2[_k] = _v
+	end
+	_attributes_2.BackgroundColor3 = Color3.new(0.2, 0.2, 0.2)
+	_attributes_2.LayoutOrder = 1
+	_attributes_2.Active = active
+	_attributes_2.Event = {
+		InputBegan = function(rbx, input)
+			if not active or input.UserInputType ~= Enum.UserInputType.MouseButton1 then
+				return nil
+			end
+			local alpha = atAlpha(rbx, input.Position)
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue = table.create(#stops)
+			local _callback = function(stop)
+				return stop.t
+			end
+			for _k, _v in stops do
+				_newValue[_k] = _callback(_v, _k - 1, stops)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			local hit = hitStop(_newValue, alpha, 0.04)
+			if hit >= 0 then
+				setSelected(hit)
+				dragging.current = hit > 0 and hit < #stops - 1
+				return nil
+			end
+			local updated = insertNumberStop(stops, alpha)
+			commit(updated)
+			-- ▼ ReadonlyArray.map ▼
+			local _newValue_1 = table.create(#updated)
+			local _callback_1 = function(stop)
+				return stop.t
+			end
+			for _k, _v in updated do
+				_newValue_1[_k] = _callback_1(_v, _k - 1, updated)
+			end
+			-- ▲ ReadonlyArray.map ▲
+			setSelected(hitStop(_newValue_1, alpha, 1))
+		end,
+		InputChanged = function(rbx, input)
+			if not dragging.current or input.UserInputType ~= Enum.UserInputType.MouseMovement then
+				return nil
+			end
+			commit(patchNumberStop(stops, index, {
+				t = atAlpha(rbx, input.Position),
+			}))
+		end,
+		InputEnded = function()
+			dragging.current = false
+		end,
+	}
+	local _attributes_3 = table.clone(styles.corner)
+	setmetatable(_attributes_3, nil)
+	local _exp_1 = React.createElement("uicorner", _attributes_3)
+	local _exp_2 = React.createElement("uigradient", {
+		Transparency = value,
+	})
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#stops)
+	local _callback = function(stop, stopIndex)
+		local _attributes_4 = {
+			key = `Stop-{stopIndex}`,
+		}
+		for _k, _v in styles.hueKnob do
+			_attributes_4[_k] = _v
+		end
+		_attributes_4.Position = UDim2.fromScale(stop.t, 0.5)
+		_attributes_4.ZIndex = if stopIndex == index then 2 else 1
+		local _attributes_5 = table.clone(styles.corner)
+		setmetatable(_attributes_5, nil)
+		return React.createElement("frame", _attributes_4, React.createElement("uicorner", _attributes_5))
+	end
+	for _k, _v in stops do
+		_newValue[_k] = _callback(_v, _k - 1, stops)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	local _exp_3 = React.createElement("frame", _attributes_2, _exp_1, _exp_2, _newValue)
+	local _attributes_4 = {
+		key = "Fields",
+	}
+	for _k, _v in styles.row do
+		_attributes_4[_k] = _v
+	end
+	_attributes_4.LayoutOrder = 2
+	_attributes_4.Size = UDim2.new(1, 0, 0, 0)
+	_attributes_4.AutomaticSize = Enum.AutomaticSize.Y
+	local _attributes_5 = table.clone(styles.rowLayout)
+	setmetatable(_attributes_5, nil)
+	local _exp_4 = React.createElement("uilistlayout", _attributes_5)
+	local _attributes_6 = {
+		key = "Value",
+	}
+	for _k, _v in styles.channel do
+		_attributes_6[_k] = _v
+	end
+	local _attributes_7 = table.clone(styles.rowLayout)
+	setmetatable(_attributes_7, nil)
+	local _exp_5 = React.createElement("uilistlayout", _attributes_7)
+	local _attributes_8 = table.clone(styles.label)
+	setmetatable(_attributes_8, nil)
+	_attributes_8.Text = "V"
+	local _exp_6 = React.createElement("textlabel", _attributes_8)
+	local _attributes_9 = table.clone(styles.channelField)
+	setmetatable(_attributes_9, nil)
+	local _exp_7 = React.createElement("frame", _attributes_6, _exp_5, _exp_6, React.createElement("frame", _attributes_9, React.createElement(NumberInput, {
+		value = current.value,
+		disabled = disabled,
+		width = UDim.new(1, 0),
+		onChange = function(amount)
+			return commit(patchNumberStop(stops, index, {
+				value = amount,
+			}))
+		end,
+	})))
+	local _attributes_10 = {
+		key = "Envelope",
+	}
+	for _k, _v in styles.channel do
+		_attributes_10[_k] = _v
+	end
+	local _attributes_11 = table.clone(styles.rowLayout)
+	setmetatable(_attributes_11, nil)
+	local _exp_8 = React.createElement("uilistlayout", _attributes_11)
+	local _attributes_12 = table.clone(styles.label)
+	setmetatable(_attributes_12, nil)
+	_attributes_12.Text = "E"
+	local _exp_9 = React.createElement("textlabel", _attributes_12)
+	local _attributes_13 = table.clone(styles.channelField)
+	setmetatable(_attributes_13, nil)
+	local _exp_10 = React.createElement("frame", _attributes_4, _exp_4, _exp_7, React.createElement("frame", _attributes_10, _exp_8, _exp_9, React.createElement("frame", _attributes_13, React.createElement(NumberInput, {
+		value = current.envelope,
+		disabled = disabled,
+		width = UDim.new(1, 0),
+		onChange = function(amount)
+			return commit(patchNumberStop(stops, index, {
+				envelope = amount,
+			}))
+		end,
+	}))))
+	local _condition_1 = #stops > 2 and index > 0 and index < #stops - 1
+	if _condition_1 then
+		local _attributes_14 = {
+			key = "Remove",
+		}
+		for _k, _v in styles.link do
+			_attributes_14[_k] = _v
+		end
+		_attributes_14.Text = "Remove stop"
+		_attributes_14.LayoutOrder = 3
+		_attributes_14.Event = {
+			Activated = function()
+				if not active then
+					return nil
+				end
+				commit(removeNumberStop(stops, index))
+				setSelected(math.max(0, index - 1))
+			end,
+		}
+		_condition_1 = (React.createElement("textbutton", _attributes_14))
+	end
+	return React.createElement("frame", _attributes, _exp, _exp_3, _exp_10, _condition_1)
+end
+local default = NumberSequenceEditor
+return {
+	default = default,
+}

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

@@ -0,0 +1,22 @@
+export interface Hsv {
+    h: number;
+    s: number;
+    v: number;
+}
+export declare function channelToByte(unit: number): number;
+export declare function byteToUnit(byte: number): number;
+export declare function rgbToHsv(r: number, g: number, b: number): Hsv;
+export declare function hsvToRgb(h: number, s: number, v: number): {
+    r: number;
+    g: number;
+    b: number;
+};
+export declare function hsvToColor3(h: number, s: number, v: number): Color3;
+export declare function colorToHex(color: Color3): string;
+export declare function parseHex(text: string): Color3 | undefined;
+export declare function parseByte(text: string): number | undefined;
+export declare function sameColor(a: Color3, b: Color3): boolean;
+export declare function resolveHsv(color: Color3, previous?: Hsv): Hsv;
+export declare function rememberColor(color: Color3): void;
+export declare function recentColors(): Color3[];
+export declare function colorBytes(color: Color3): string;