@quenty/colorpicker 10.19.3 → 10.19.4-canary.559.339cfa7.0

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [10.19.4-canary.559.339cfa7.0](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpicker@10.19.3...@quenty/colorpicker@10.19.4-canary.559.339cfa7.0) (2025-05-10)
+
+
+### Features
+
+* Add even more types ([b31717d](https://github.com/Quenty/NevermoreEngine/commit/b31717d8c9f7620c457f5018a2affa760a65334a))
+
+
+
+
+
 ## [10.19.3](https://github.com/Quenty/NevermoreEngine/compare/@quenty/colorpicker@10.19.2...@quenty/colorpicker@10.19.3) (2025-04-10)
 
 **Note:** Version bump only for package @quenty/colorpicker

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@quenty/colorpicker",
-  "version": "10.19.3",
+  "version": "10.19.4-canary.559.339cfa7.0",
   "description": "Color picking UI system for Roblox.",
   "keywords": [
     "Roblox",
@@ -28,17 +28,17 @@
     "access": "public"
   },
   "dependencies": {
-    "@quenty/baseobject": "^10.8.3",
-    "@quenty/basicpane": "^13.17.3",
-    "@quenty/blend": "^12.18.3",
-    "@quenty/buttondragmodel": "^1.15.3",
-    "@quenty/color3utils": "^11.18.3",
-    "@quenty/inputobjectutils": "^4.18.3",
-    "@quenty/instanceutils": "^13.17.3",
-    "@quenty/loader": "^10.8.3",
-    "@quenty/maid": "^3.4.3",
-    "@quenty/math": "^2.7.3",
-    "@quenty/valueobject": "^13.17.3"
+    "@quenty/baseobject": "10.8.4-canary.559.339cfa7.0",
+    "@quenty/basicpane": "13.17.4-canary.559.339cfa7.0",
+    "@quenty/blend": "12.18.4-canary.559.339cfa7.0",
+    "@quenty/buttondragmodel": "1.15.4-canary.559.339cfa7.0",
+    "@quenty/color3utils": "11.18.4-canary.559.339cfa7.0",
+    "@quenty/inputobjectutils": "4.18.4-canary.559.339cfa7.0",
+    "@quenty/instanceutils": "13.17.4-canary.559.339cfa7.0",
+    "@quenty/loader": "10.8.4-canary.559.339cfa7.0",
+    "@quenty/maid": "3.4.4-canary.559.339cfa7.0",
+    "@quenty/math": "2.7.3",
+    "@quenty/valueobject": "13.17.4-canary.559.339cfa7.0"
   },
-  "gitHead": "b06c070ae91d5dab7bd8de6e290ad2caabb15d8f"
+  "gitHead": "339cfa778736f08768ed7305041f6221faa35bfc"
 }

package/src/Client/ColorPickerUtils.lua

@@ -25,7 +25,7 @@ function ColorPickerUtils.getOutlineWithContrast(color: Color3, backingColor: Co
 		v = math.clamp(v - 80, 0, 100)
 	end
 
-	return LuvColor3Utils.toColor3({l, u, v})
+	return LuvColor3Utils.toColor3({ l, u, v })
 end
 
-return ColorPickerUtils
+return ColorPickerUtils

package/src/Client/Cursor/ColorPickerCursorPreview.lua

@@ -1,3 +1,4 @@
+--!strict
 --[=[
 	Cursor preview for mobile input especially
 	@class ColorPickerCursorPreview
@@ -6,19 +7,35 @@
 local require = require(script.Parent.loader).load(script)
 
 local BasicPane = require("BasicPane")
-local Blend = require("Blend")
 local BasicPaneUtils = require("BasicPaneUtils")
-local Math = require("Math")
+local Blend = require("Blend")
 local ColorPickerUtils = require("ColorPickerUtils")
 local LuvColor3Utils = require("LuvColor3Utils")
+local Math = require("Math")
+local Signal = require("Signal")
 local ValueObject = require("ValueObject")
 
 local ColorPickerCursorPreview = setmetatable({}, BasicPane)
 ColorPickerCursorPreview.ClassName = "ColorPickerCursorPreview"
 ColorPickerCursorPreview.__index = ColorPickerCursorPreview
 
-function ColorPickerCursorPreview.new()
-	local self = setmetatable(BasicPane.new(), ColorPickerCursorPreview)
+export type ColorPickerCursorPreview = typeof(setmetatable(
+	{} :: {
+		Gui: Frame?,
+		_transparency: ValueObject.ValueObject<number>,
+		_backgroundColorHint: ValueObject.ValueObject<Color3>,
+		_colorValue: ValueObject.ValueObject<Color3>,
+		_heightAbs: ValueObject.ValueObject<number>,
+		_offsetAbs: ValueObject.ValueObject<number>,
+		_position: ValueObject.ValueObject<Vector2>,
+
+		PositionChanged: Signal.Signal<Vector2>,
+	},
+	{} :: typeof({ __index = ColorPickerCursorPreview })
+)) & BasicPane.BasicPane
+
+function ColorPickerCursorPreview.new(): ColorPickerCursorPreview
+	local self: ColorPickerCursorPreview = setmetatable(BasicPane.new() :: any, ColorPickerCursorPreview)
 
 	self._backgroundColorHint = self._maid:Add(ValueObject.new(Color3.new(0, 0, 0), "Color3"))
 	self._heightAbs = self._maid:Add(ValueObject.new(60, "number"))
@@ -31,44 +48,48 @@ function ColorPickerCursorPreview.new()
 		self.Gui = gui
 	end))
 
-	self.PositionChanged = assert(self._position.Changed, "No .Changed event")
+	self.PositionChanged = assert(self._position.Changed :: any, "No .Changed event")
 
 	return self
 end
 
-function ColorPickerCursorPreview:HintBackgroundColor(color)
+function ColorPickerCursorPreview.HintBackgroundColor(self: ColorPickerCursorPreview, color: Color3)
 	assert(typeof(color) == "Color3", "Bad color")
 
 	self._backgroundColorHint.Value = color
 end
 
-function ColorPickerCursorPreview:SetPosition(position)
+function ColorPickerCursorPreview.SetPosition(self: ColorPickerCursorPreview, position: Vector2)
 	assert(typeof(position) == "Vector2", "Bad position")
 
 	self._position.Value = position
 end
 
-function ColorPickerCursorPreview:GetPosition()
+function ColorPickerCursorPreview.GetPosition(self: ColorPickerCursorPreview)
 	return self._position.Value
 end
 
-function ColorPickerCursorPreview:SetColor(color)
+function ColorPickerCursorPreview.SetColor(self: ColorPickerCursorPreview, color: Color3)
 	assert(typeof(color) == "Color3", "Bad color")
 
 	self._colorValue.Value = color
 end
 
-function ColorPickerCursorPreview:SetTransparency(transparency: number)
+function ColorPickerCursorPreview.SetTransparency(self: ColorPickerCursorPreview, transparency: number)
 	assert(type(transparency) == "number", "Bad transparency")
 
 	self._transparency.Value = transparency
 end
 
-function ColorPickerCursorPreview:_render()
+function ColorPickerCursorPreview._render(self: ColorPickerCursorPreview)
 	local percentVisible = Blend.Spring(BasicPaneUtils.observePercentVisible(self), 30, 0.5)
-	local transparencyTarget = Blend.Computed(BasicPaneUtils.observePercentVisible(self), self._transparency, function(visible, value)
-		return Math.map(visible, 0, 1, 1, value)
-	end)
+	local transparencyTarget = Blend.Computed(
+		BasicPaneUtils.observePercentVisible(self),
+		self._transparency,
+		function(visible, value)
+			return Math.map(visible, 0, 1, 1, value)
+		end
+	)
 	local transparency = Blend.Spring(transparencyTarget, 30)
 	local isOutlineVisible = Blend.Computed(self._colorValue, self._backgroundColorHint, function(color, backingColor)
 		local _, _, v = unpack(LuvColor3Utils.fromColor3(color))
@@ -77,56 +98,65 @@ function ColorPickerCursorPreview:_render()
 		return math.abs(bv - v) <= 60
 	end)
 
-	return Blend.New "Frame" {
-		Name = "Preview";
-		BackgroundTransparency = 1;
+	return Blend.New("Frame")({
+		Name = "Preview",
+		BackgroundTransparency = 1,
 		Size = Blend.Computed(self._heightAbs, function(heightAbs)
 			return UDim2.fromOffset(heightAbs, heightAbs)
-		end);
-		AnchorPoint = Vector2.new(0.5, 0.5);
-		Position = Blend.Computed(self._position, self._offsetAbs, self._heightAbs, function(pos, offsetAbs, heightAbs)
-			return UDim2.new(pos.x, 0, pos.y, offsetAbs - heightAbs/2)
-		end);
-		ZIndex = 3;
-
-		Blend.New "UIAspectRatioConstraint" {
-			AspectRatio = 1;
-		};
-
-		Blend.New "Frame" {
-			BackgroundTransparency = transparency;
-			BackgroundColor3 = self._colorValue;
-			AnchorPoint = Vector2.new(0.5, 0.5);
-			Position = UDim2.fromScale(0.5, 0.5);
-			Size = UDim2.fromScale(1, 1);
-
-			Blend.New "UIScale" {
-				Scale = percentVisible;
-			};
-
-			Blend.New "UICorner" {
-				CornerRadius = UDim.new(1, 0);
-			};
-
-			Blend.New "UIStroke" {
-				Color = Blend.Spring(Blend.Computed(
-					self._colorValue,
-					self._backgroundColorHint,
-					isOutlineVisible,
-					function(color, backingColor, needed)
-						if needed then
-							return ColorPickerUtils.getOutlineWithContrast(color, backingColor)
-						else
-							return color
+		end),
+		AnchorPoint = Vector2.new(0.5, 0.5),
+		Position = Blend.Computed(
+			self._position,
+			self._offsetAbs,
+			self._heightAbs,
+			function(pos: Vector2, offsetAbs: number, heightAbs: number)
+				return UDim2.new(pos.X, 0, pos.Y, offsetAbs - heightAbs / 2)
+			end
+		),
+		ZIndex = 3,
+
+		Blend.New("UIAspectRatioConstraint")({
+			AspectRatio = 1,
+		}),
+
+		Blend.New("Frame")({
+			BackgroundTransparency = transparency,
+			BackgroundColor3 = self._colorValue,
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.fromScale(0.5, 0.5),
+			Size = UDim2.fromScale(1, 1),
+
+			Blend.New("UIScale")({
+				Scale = percentVisible,
+			}),
+
+			Blend.New("UICorner")({
+				CornerRadius = UDim.new(1, 0),
+			}),
+
+			Blend.New("UIStroke")({
+				Color = Blend.Spring(
+					Blend.Computed(
+						self._colorValue,
+						self._backgroundColorHint,
+						isOutlineVisible,
+						function(color, backingColor, needed)
+							if needed then
+								return ColorPickerUtils.getOutlineWithContrast(color, backingColor)
+							else
+								return color
+							end
 						end
-					end), 20);
-				Transparency = transparency;
-				Thickness = Blend.Computed(percentVisible, function(percent)
-					return percent*3
-				end);
-			};
-		}
-	}
+					),
+					20
+				),
+				Transparency = transparency,
+				Thickness = Blend.Computed(percentVisible, function(percent: number)
+					return percent * 3
+				end),
+			}),
+		}),
+	})
 end
 
-return ColorPickerCursorPreview
+return ColorPickerCursorPreview

package/src/Client/Cursor/ColorPickerTriangle.lua

@@ -1,3 +1,4 @@
+--!strict
 --[=[
 	Color picker triangle
 
@@ -15,8 +16,19 @@ local ColorPickerTriangle = setmetatable({}, BaseObject)
 ColorPickerTriangle.ClassName = "ColorPickerTriangle"
 ColorPickerTriangle.__index = ColorPickerTriangle
 
-function ColorPickerTriangle.new()
-	local self = setmetatable(BaseObject.new(), ColorPickerTriangle)
+export type ColorPickerTriangle = typeof(setmetatable(
+	{} :: {
+		Gui: Frame?,
+		_transparency: ValueObject.ValueObject<number>,
+		_backgroundColorHint: ValueObject.ValueObject<Color3>,
+		_color: ValueObject.ValueObject<Color3>,
+		_sizeValue: ValueObject.ValueObject<Vector2>,
+	},
+	{} :: typeof({ __index = ColorPickerTriangle })
+)) & BaseObject.BaseObject
+
+function ColorPickerTriangle.new(): ColorPickerTriangle
+	local self: ColorPickerTriangle = setmetatable(BaseObject.new() :: any, ColorPickerTriangle)
 
 	self._transparency = self._maid:Add(ValueObject.new(0, "number"))
 	self._backgroundColorHint = self._maid:Add(ValueObject.new(Color3.new(0, 0, 0), "Color3"))
@@ -30,55 +42,54 @@ function ColorPickerTriangle.new()
 	return self
 end
 
-function ColorPickerTriangle:HintBackgroundColor(color)
+function ColorPickerTriangle.HintBackgroundColor(self: ColorPickerTriangle, color: Color3)
 	self._backgroundColorHint.Value = color
 end
 
-function ColorPickerTriangle:GetSizeValue()
+function ColorPickerTriangle.GetSizeValue(self: ColorPickerTriangle): ValueObject.ValueObject<Vector2>
 	return self._sizeValue
 end
 
-function ColorPickerTriangle:GetMeasureValue()
+function ColorPickerTriangle.GetMeasureValue(self: ColorPickerTriangle): ValueObject.ValueObject<Vector2>
 	return self._sizeValue
 end
 
-function ColorPickerTriangle:SetColor(color)
+function ColorPickerTriangle.SetColor(self: ColorPickerTriangle, color: Color3)
 	self._color.Value = color
 end
 
-function ColorPickerTriangle:SetTransparency(transparency: number)
+function ColorPickerTriangle.SetTransparency(self: ColorPickerTriangle, transparency: number)
 	assert(type(transparency) == "number", "Bad transparency")
 
 	self._transparency.Value = transparency
 end
 
-function ColorPickerTriangle:_render()
+function ColorPickerTriangle._render(self: ColorPickerTriangle)
 	return Blend.New "Frame" {
-		Name = "ColorPickerTriangle";
-		Size = UDim2.new(1, 0, 1, 0);
-		BackgroundTransparency = 1;
+		Name = "ColorPickerTriangle",
+		Size = UDim2.new(1, 0, 1, 0),
+		BackgroundTransparency = 1,
 
 		Blend.New "ImageLabel" {
-			BackgroundTransparency = 1;
-			Size = UDim2.new(1, 0, 1, 0);
+			BackgroundTransparency = 1,
+			Size = UDim2.new(1, 0, 1, 0),
 			ImageColor3 = Blend.Computed(self._color, self._backgroundColorHint, function(color, backingColor)
 				return ColorPickerUtils.getOutlineWithContrast(color, backingColor)
-			end);
-			ImageTransparency = self._transparency;
-			Image = "rbxassetid://9291514809";
-		};
+			end),
+			ImageTransparency = self._transparency,
+			Image = "rbxassetid://9291514809",
+		},
 
 		Blend.New "UIAspectRatioConstraint" {
 			AspectRatio = Blend.Computed(self._sizeValue, function(size)
 				if size.x <= 0 or size.y <= 0 then
 					return 1
 				else
-					return size.x/size.y
+					return size.x / size.y
 				end
-			end);
-		};
+			end),
+		},
 	}
 end
 
-
-return ColorPickerTriangle
+return ColorPickerTriangle

package/src/Client/Cursor/HSColorPickerCursor.lua

@@ -1,3 +1,4 @@
+--!strict
 --[=[
 	The actual cursor for the HSV (it's a plus). See [HSVColorPicker].
 
@@ -9,14 +10,30 @@ local require = require(script.Parent.loader).load(script)
 local BaseObject = require("BaseObject")
 local Blend = require("Blend")
 local ColorPickerUtils = require("ColorPickerUtils")
+local Signal = require("Signal")
 local ValueObject = require("ValueObject")
 
 local HSColorPickerCursor = setmetatable({}, BaseObject)
 HSColorPickerCursor.ClassName = "HSColorPickerCursor"
 HSColorPickerCursor.__index = HSColorPickerCursor
 
-function HSColorPickerCursor.new()
-	local self = setmetatable(BaseObject.new(), HSColorPickerCursor)
+export type HSColorPickerCursor = typeof(setmetatable(
+	{} :: {
+		Gui: Frame?,
+		_backgroundColorHint: ValueObject.ValueObject<Color3>,
+		_height: ValueObject.ValueObject<number>,
+		_crossHairWidthAbs: ValueObject.ValueObject<number>,
+		_verticalHairVisible: ValueObject.ValueObject<boolean>,
+		_horizontalHairVisible: ValueObject.ValueObject<boolean>,
+		_position: ValueObject.ValueObject<Vector2>,
+		_transparency: ValueObject.ValueObject<number>,
+		PositionChanged: Signal.Signal<Vector2>,
+	},
+	{} :: typeof({ __index = HSColorPickerCursor })
+)) & BaseObject.BaseObject
+
+function HSColorPickerCursor.new(): HSColorPickerCursor
+	local self: HSColorPickerCursor = setmetatable(BaseObject.new() :: any, HSColorPickerCursor)
 
 	self._backgroundColorHint = self._maid:Add(ValueObject.new(Color3.new(0, 0, 0), "Color3"))
 	self._height = self._maid:Add(ValueObject.new(0.075, "number"))
@@ -30,7 +47,7 @@ function HSColorPickerCursor.new()
 		self.Gui = gui
 	end))
 
-	self.PositionChanged = assert(self._position.Changed, "No .Changed event")
+	self.PositionChanged = assert(self._position.Changed :: any, "No .Changed event")
 
 	return self
 end
@@ -40,17 +57,17 @@ end
 
 	@param color Color3
 ]=]
-function HSColorPickerCursor:HintBackgroundColor(color)
+function HSColorPickerCursor.HintBackgroundColor(self: HSColorPickerCursor, color: Color3)
 	assert(typeof(color) == "Color3", "Bad color")
 
 	self._backgroundColorHint.Value = color
 end
 
-function HSColorPickerCursor:SetVerticalHairVisible(visible)
+function HSColorPickerCursor.SetVerticalHairVisible(self: HSColorPickerCursor, visible)
 	self._verticalHairVisible.Value = visible
 end
 
-function HSColorPickerCursor:SetHorizontalHairVisible(visible)
+function HSColorPickerCursor.SetHorizontalHairVisible(self: HSColorPickerCursor, visible)
 	self._horizontalHairVisible.Value = visible
 end
 
@@ -59,7 +76,7 @@ end
 
 	@param height number
 ]=]
-function HSColorPickerCursor:SetHeight(height)
+function HSColorPickerCursor.SetHeight(self: HSColorPickerCursor, height)
 	self._height.Value = height
 end
 
@@ -68,7 +85,7 @@ end
 
 	@param position Vector2
 ]=]
-function HSColorPickerCursor:SetPosition(position)
+function HSColorPickerCursor.SetPosition(self: HSColorPickerCursor, position)
 	assert(typeof(position) == "Vector2", "Bad position")
 
 	self._position.Value = position
@@ -79,7 +96,7 @@ end
 
 	@return Vector2
 ]=]
-function HSColorPickerCursor:GetPosition()
+function HSColorPickerCursor.GetPosition(self: HSColorPickerCursor)
 	return self._position.Value
 end
 
@@ -88,63 +105,65 @@ end
 
 	@param transparency number
 ]=]
-function HSColorPickerCursor:SetTransparency(transparency: number)
+function HSColorPickerCursor.SetTransparency(self: HSColorPickerCursor, transparency: number)
 	assert(type(transparency) == "number", "Bad transparency")
 
 	self._transparency.Value = transparency
 end
 
-function HSColorPickerCursor:_render()
+function HSColorPickerCursor._render(self: HSColorPickerCursor)
 	return Blend.New "Frame" {
-		Name = "HSColorPickerCursor";
+		Name = "HSColorPickerCursor",
 		Size = Blend.Computed(self._height, function(height)
 			return UDim2.fromScale(height, height)
-		end);
-		BackgroundTransparency = 1;
-		AnchorPoint = Vector2.new(0.5, 0.5);
+		end),
+		BackgroundTransparency = 1,
+		AnchorPoint = Vector2.new(0.5, 0.5),
 		Position = Blend.Computed(self._position, function(pos)
 			return UDim2.fromScale(pos.x, pos.y)
-		end);
+		end),
 
 		Blend.New "UIAspectRatioConstraint" {
-			AspectRatio = 1;
-		};
+			AspectRatio = 1,
+		},
 
 		Blend.New "Frame" {
-			AnchorPoint = Vector2.new(0.5, 0.5);
-			Position = UDim2.fromScale(0.5, 0.5);
-			Visible = self._horizontalHairVisible;
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.fromScale(0.5, 0.5),
+			Visible = self._horizontalHairVisible,
 			Size = Blend.Computed(self._crossHairWidthAbs, function(width)
 				return UDim2.new(1, 0, 0, width)
-			end);
+			end),
 			BackgroundColor3 = Blend.Computed(self._backgroundColorHint, function(backingColor)
 				return ColorPickerUtils.getOutlineWithContrast(Color3.new(0, 0, 0), backingColor)
-			end);
-			BackgroundTransparency = self._transparency;
+			end),
+			BackgroundTransparency = self._transparency,
 
 			Blend.New "UICorner" {
-				CornerRadius = UDim.new(1, 0);
-			};
-		};
+				CornerRadius = UDim.new(1, 0),
+			},
+		},
 
 		Blend.New "Frame" {
-			AnchorPoint = Vector2.new(0.5, 0.5);
-			Position = UDim2.fromScale(0.5, 0.5);
-			Visible = self._verticalHairVisible;
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.fromScale(0.5, 0.5),
+			Visible = self._verticalHairVisible,
 			Size = Blend.Computed(self._crossHairWidthAbs, function(width)
 				return UDim2.new(0, width, 1, 0)
-			end);
-			BackgroundColor3 = Blend.Spring(Blend.Computed(self._backgroundColorHint, function(backingColor)
-				return ColorPickerUtils.getOutlineWithContrast(Color3.new(0, 0, 0), backingColor)
-			end), 20);
-			BackgroundTransparency = self._transparency;
+			end),
+			BackgroundColor3 = Blend.Spring(
+				Blend.Computed(self._backgroundColorHint, function(backingColor)
+					return ColorPickerUtils.getOutlineWithContrast(Color3.new(0, 0, 0), backingColor)
+				end),
+				20
+			),
+			BackgroundTransparency = self._transparency,
 
 			Blend.New "UICorner" {
-				CornerRadius = UDim.new(1, 0);
-			};
-		};
+				CornerRadius = UDim.new(1, 0),
+			},
+		},
 	}
 end
 
-
 return HSColorPickerCursor

package/src/Client/HSV/HSColorPicker.lua

@@ -173,33 +173,33 @@ end
 
 function HSColorPicker:_render()
 	return Blend.New "ImageButton" {
-		Name = "HSColorPicker";
-		Size = UDim2.new(1, 0, 1, 0);
-		BackgroundTransparency = 1;
-		Active = true;
-		Image = "rbxassetid://9290917908";
-		ImageTransparency = self._transparency;
+		Name = "HSColorPicker",
+		Size = UDim2.new(1, 0, 1, 0),
+		BackgroundTransparency = 1,
+		Active = true,
+		Image = "rbxassetid://9290917908",
+		ImageTransparency = self._transparency,
 
 		[Blend.Instance] = function(inst)
 			self._dragModel:SetButton(inst)
-		end;
+		end,
 
 		Blend.New "UIAspectRatioConstraint" {
 			AspectRatio = Blend.Computed(self._sizeValue, function(size)
 				if size.x <= 0 or size.y <= 0 then
 					return 1
 				else
-					return size.x/size.y
+					return size.x / size.y
 				end
-			end);
-		};
+			end),
+		},
 
 		Blend.New "UICorner" {
-			CornerRadius = UDim.new(0, 4);
-		};
+			CornerRadius = UDim.new(0, 4),
+		},
 
-		self._preview.Gui;
-		self._cursor.Gui;
+		self._preview.Gui,
+		self._cursor.Gui,
 	}
 end
 

package/src/Client/HSV/HSColorPicker.story.lua

@@ -2,10 +2,11 @@
 	@class serviceBag.story
 ]]
 
-local require = require(game:GetService("ServerScriptService"):FindFirstChild("LoaderUtils", true).Parent).bootstrapStory(script)
+local require =
+	require(game:GetService("ServerScriptService"):FindFirstChild("LoaderUtils", true).Parent).bootstrapStory(script)
 
-local Maid = require("Maid")
 local HSColorPicker = require("HSColorPicker")
+local Maid = require("Maid")
 
 return function(target)
 	local maid = Maid.new()
@@ -13,11 +14,11 @@ return function(target)
 	local picker = maid:Add(HSColorPicker.new())
 	picker:SetColor(Color3.new(1, 1, 1))
 	picker.Gui.AnchorPoint = Vector2.new(0.5, 0.5)
-	picker.Gui.Position = UDim2.fromScale(0.5, 0.5);
+	picker.Gui.Position = UDim2.fromScale(0.5, 0.5)
 	picker.Gui.Size = UDim2.fromScale(0.8, 0.8)
 	picker.Gui.Parent = target
 
 	return function()
 		maid:DoCleaning()
 	end
-end
+end

package/src/Client/HSV/HSVColorPicker.story.lua

@@ -2,10 +2,11 @@
 	@class HSVColorPicker.story
 ]]
 
-local require = require(game:GetService("ServerScriptService"):FindFirstChild("LoaderUtils", true).Parent).bootstrapStory(script)
+local require =
+	require(game:GetService("ServerScriptService"):FindFirstChild("LoaderUtils", true).Parent).bootstrapStory(script)
 
-local Maid = require("Maid")
 local HSVColorPicker = require("HSVColorPicker")
+local Maid = require("Maid")
 
 return function(target)
 	local maid = Maid.new()
@@ -13,11 +14,11 @@ return function(target)
 	local picker = maid:Add(HSVColorPicker.new())
 	picker:SetColor(Color3.new(0.5, 0.8, 0.3))
 	picker.Gui.AnchorPoint = Vector2.new(0.5, 0.5)
-	picker.Gui.Position = UDim2.fromScale(0.5, 0.5);
+	picker.Gui.Position = UDim2.fromScale(0.5, 0.5)
 	picker.Gui.Size = UDim2.fromScale(0.8, 0.8)
 	picker.Gui.Parent = target
 
 	return function()
 		maid:DoCleaning()
 	end
-end
+end

package/src/Client/HSV/ValueColorPicker.lua

@@ -10,9 +10,9 @@ local require = require(script.Parent.loader).load(script)
 local BaseObject = require("BaseObject")
 local Blend = require("Blend")
 local ButtonDragModel = require("ButtonDragModel")
-local ValueObject = require("ValueObject")
 local ColorPickerCursorPreview = require("ColorPickerCursorPreview")
 local ColorPickerTriangle = require("ColorPickerTriangle")
+local ValueObject = require("ValueObject")
 
 local ValueColorPicker = setmetatable({}, BaseObject)
 ValueColorPicker.ClassName = "ValueColorPicker"
@@ -203,35 +203,35 @@ end
 
 function ValueColorPicker:_render()
 	return Blend.New "ImageButton" {
-		Name = "HSColorPicker";
-		Size = UDim2.new(1, 0, 1, 0);
-		BackgroundTransparency = 1;
-		Active = true;
+		Name = "HSColorPicker",
+		Size = UDim2.new(1, 0, 1, 0),
+		BackgroundTransparency = 1,
+		Active = true,
 
 		[Blend.Instance] = function(inst)
 			self._dragModel:SetButton(inst)
-		end;
+		end,
 
 		Blend.New "UIAspectRatioConstraint" {
 			AspectRatio = Blend.Computed(self._sizeValue, function(size)
 				if size.x <= 0 or size.y <= 0 then
 					return 1
 				else
-					return size.x/size.y
+					return size.x / size.y
 				end
-			end);
-		};
+			end),
+		},
 
 		Blend.New "Frame" {
-			BackgroundColor3 = Color3.new(1, 1, 1);
-			BackgroundTransparency = self._transparency;
+			BackgroundColor3 = Color3.new(1, 1, 1),
+			BackgroundTransparency = self._transparency,
 			Size = Blend.Computed(self._leftWidth, self._sizeValue, function(width, sizeValue)
 				if sizeValue.x == 0 then
 					return UDim2.new(0, 0, 1, 0)
 				end
 
-				return UDim2.new(width/sizeValue.x, 0, 1, 0)
-			end);
+				return UDim2.new(width / sizeValue.x, 0, 1, 0)
+			end),
 
 			Blend.New "UIGradient" {
 				Color = Blend.Computed(self._hsvColorValue, function(color)
@@ -239,31 +239,31 @@ function ValueColorPicker:_render()
 					local start = Color3.fromHSV(h, s, 0)
 					local finish = Color3.fromHSV(h, s, 1)
 					return ColorSequence.new(start, finish)
-				end);
-				Rotation = -90;
-			};
+				end),
+				Rotation = -90,
+			},
 			Blend.New "UICorner" {
-				CornerRadius = UDim.new(0, 4);
-			};
+				CornerRadius = UDim.new(0, 4),
+			},
 
-			self._preview.Gui;
+			self._preview.Gui,
 			-- self._cursor.Gui;
-		};
+		},
 
 		Blend.New "Frame" {
-			BackgroundTransparency = 1;
-			Position = UDim2.fromScale(1, 0);
-			AnchorPoint = Vector2.new(1, 0);
+			BackgroundTransparency = 1,
+			Position = UDim2.fromScale(1, 0),
+			AnchorPoint = Vector2.new(1, 0),
 			Size = Blend.Computed(self._leftWidth, self._sizeValue, function(width, sizeValue)
 				if sizeValue.x == 0 then
 					return UDim2.new(0, 0, 1, 0)
 				end
 
-				return UDim2.new((sizeValue.x - width)/sizeValue.x, 0, 1, 0)
-			end);
+				return UDim2.new((sizeValue.x - width) / sizeValue.x, 0, 1, 0)
+			end),
 
-			self._triangle.Gui;
-		}
+			self._triangle.Gui,
+		},
 	}
 end
 

package/src/Client/HSV/ValueColorPicker.story.lua

@@ -2,7 +2,8 @@
 	@class ValueColorPicker.story
 ]]
 
-local require = require(game:GetService("ServerScriptService"):FindFirstChild("LoaderUtils", true).Parent).bootstrapStory(script)
+local require =
+	require(game:GetService("ServerScriptService"):FindFirstChild("LoaderUtils", true).Parent).bootstrapStory(script)
 
 local Maid = require("Maid")
 local ValueColorPicker = require("ValueColorPicker")
@@ -13,11 +14,11 @@ return function(target)
 	local picker = maid:Add(ValueColorPicker.new())
 	picker:SetHSVColor(Vector3.new(1, 0.5, 1))
 	picker.Gui.AnchorPoint = Vector2.new(0.5, 0.5)
-	picker.Gui.Position = UDim2.fromScale(0.5, 0.5);
+	picker.Gui.Position = UDim2.fromScale(0.5, 0.5)
 	picker.Gui.Size = UDim2.fromScale(0.8, 0.8)
 	picker.Gui.Parent = target
 
 	return function()
 		maid:DoCleaning()
 	end
-end
+end

package/src/Client/Story/ColorPickerStoryUtils.lua

@@ -14,8 +14,8 @@ function ColorPickerStoryUtils.createPicker(maid, valueSync, labelText, currentV
 	local picker = maid:Add(HSVColorPicker.new())
 	picker.Gui.AnchorPoint = Vector2.new(0.5, 1)
 	picker.Gui.Position = UDim2.new(0.5, 0, 1, 0)
-	picker.Gui.Size = UDim2.new(0, 150, 1, -30);
-	picker.Gui.ZIndex = 2;
+	picker.Gui.Size = UDim2.new(0, 150, 1, -30)
+	picker.Gui.ZIndex = 2
 
 	maid:GiveTask(picker:SyncValue(valueSync))
 
@@ -35,57 +35,59 @@ function ColorPickerStoryUtils.createPicker(maid, valueSync, labelText, currentV
 	end))
 
 	return Blend.New "ImageButton" {
-		BackgroundTransparency = 0;
-		AutoButtonColor = true;
-		BackgroundColor3 = Color3.new(0.2, 0.2, 0.2);
-		Size = Blend.Spring(Blend.Computed(visible, function(isVisible)
-			if isVisible then
-				return UDim2.new(0, 170, 0, 190);
-			else
-				return UDim2.new(0, 170, 0, 50);
-			end
-		end), 40);
-		ClipsDescendants = false;
+		BackgroundTransparency = 0,
+		AutoButtonColor = true,
+		BackgroundColor3 = Color3.new(0.2, 0.2, 0.2),
+		Size = Blend.Spring(
+			Blend.Computed(visible, function(isVisible)
+				if isVisible then
+					return UDim2.new(0, 170, 0, 190)
+				else
+					return UDim2.new(0, 170, 0, 50)
+				end
+			end),
+			40
+		),
+		ClipsDescendants = false,
 		[Blend.OnEvent "Activated"] = function()
 			visible.Value = not visible.Value
-		end;
+		end,
 
-		picker.Gui;
+		picker.Gui,
 		Blend.New "TextLabel" {
-			BackgroundTransparency = 1;
-			Text = labelText;
-			Position = UDim2.new(0, 35, 0, 5);
-			Size = UDim2.new(1, -40, 0, 20);
-			Font = Enum.Font.FredokaOne;
-			TextXAlignment = Enum.TextXAlignment.Left;
-			TextScaled = true;
-			TextColor3 = Color3.new(1, 1, 1);
-			ZIndex = 0;
-		};
+			BackgroundTransparency = 1,
+			Text = labelText,
+			Position = UDim2.new(0, 35, 0, 5),
+			Size = UDim2.new(1, -40, 0, 20),
+			Font = Enum.Font.FredokaOne,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextScaled = true,
+			TextColor3 = Color3.new(1, 1, 1),
+			ZIndex = 0,
+		},
 
 		Blend.New "Frame" {
-			BackgroundColor3 = valueSync;
-			Size = UDim2.new(0, 20, 0, 20);
-			Position = UDim2.new(0, 5, 0, 5);
+			BackgroundColor3 = valueSync,
+			Size = UDim2.new(0, 20, 0, 20),
+			Position = UDim2.new(0, 5, 0, 5),
 			[Blend.Children] = {
 				Blend.New "UICorner" {
-					CornerRadius = UDim.new(0, 10);
-				};
-			};
-		};
+					CornerRadius = UDim.new(0, 10),
+				},
+			},
+		},
 
 		Blend.New "UIPadding" {
-			PaddingTop = UDim.new(0, 10);
-			PaddingBottom = UDim.new(0, 10);
-			PaddingLeft = UDim.new(0, 10);
-			PaddingRight = UDim.new(0, 10);
-		};
+			PaddingTop = UDim.new(0, 10),
+			PaddingBottom = UDim.new(0, 10),
+			PaddingLeft = UDim.new(0, 10),
+			PaddingRight = UDim.new(0, 10),
+		},
 
 		Blend.New "UICorner" {
-			CornerRadius = UDim.new(0, 10);
-		};
+			CornerRadius = UDim.new(0, 10),
+		},
 	}
-
 end
 
 function ColorPickerStoryUtils.create(maid, buildPickers)
@@ -99,26 +101,26 @@ function ColorPickerStoryUtils.create(maid, buildPickers)
 
 	local function pickerGroup(pickers)
 		return Blend.New "Frame" {
-			Size = UDim2.new(1, 0, 0, 0);
-			AnchorPoint = Vector2.new(0.5, 0.5);
-			Position = UDim2.fromScale(0.5, 0.5);
-			BackgroundTransparency = 1;
-			AutomaticSize = Enum.AutomaticSize.Y;
+			Size = UDim2.new(1, 0, 0, 0),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.fromScale(0.5, 0.5),
+			BackgroundTransparency = 1,
+			AutomaticSize = Enum.AutomaticSize.Y,
 
 			Blend.New "UIListLayout" {
-				Padding = UDim.new(0, 10);
-				HorizontalAlignment = Enum.HorizontalAlignment.Left;
-				VerticalAlignment = Enum.VerticalAlignment.Top;
-				FillDirection = Enum.FillDirection.Horizontal;
-			};
-
-			pickers;
-		};
+				Padding = UDim.new(0, 10),
+				HorizontalAlignment = Enum.HorizontalAlignment.Left,
+				VerticalAlignment = Enum.VerticalAlignment.Top,
+				FillDirection = Enum.FillDirection.Horizontal,
+			},
+
+			pickers,
+		}
 	end
 
 	local groups = {}
 	local current = {}
-	for i=1, #built do
+	for i = 1, #built do
 		table.insert(current, built[i])
 		if #current >= 4 then
 			table.insert(groups, pickerGroup(current))
@@ -131,11 +133,11 @@ function ColorPickerStoryUtils.create(maid, buildPickers)
 	end
 
 	return Blend.New "Frame" {
-		Size = UDim2.new(0, 0, 0, 0);
-		AnchorPoint = Vector2.new(0.5, 0.5);
-		Position = UDim2.fromScale(0.5, 0.5);
-		BackgroundTransparency = 1;
-		AutomaticSize = Enum.AutomaticSize.XY;
+		Size = UDim2.new(0, 0, 0, 0),
+		AnchorPoint = Vector2.new(0.5, 0.5),
+		Position = UDim2.fromScale(0.5, 0.5),
+		BackgroundTransparency = 1,
+		AutomaticSize = Enum.AutomaticSize.XY,
 
 		[Blend.OnEvent "InputBegan"] = function(inputObject, processed)
 			if processed then
@@ -145,17 +147,17 @@ function ColorPickerStoryUtils.create(maid, buildPickers)
 			if inputObject.UserInputType == Enum.UserInputType.MouseButton1 then
 				currentVisible.Value = nil
 			end
-		end;
+		end,
 
 		Blend.New "UIListLayout" {
-			Padding = UDim.new(0, 10);
-			HorizontalAlignment = Enum.HorizontalAlignment.Center;
-			VerticalAlignment = Enum.VerticalAlignment.Top;
-			FillDirection = Enum.FillDirection.Vertical;
-		};
-
-		groups;
-	};
+			Padding = UDim.new(0, 10),
+			HorizontalAlignment = Enum.HorizontalAlignment.Center,
+			VerticalAlignment = Enum.VerticalAlignment.Top,
+			FillDirection = Enum.FillDirection.Vertical,
+		},
+
+		groups,
+	}
 end
 
-return ColorPickerStoryUtils
+return ColorPickerStoryUtils