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

package/out/ui/packages/rating/components/ratingCommit.luau

@@ -0,0 +1,11 @@
+-- Compiled with roblox-ts v3.0.0
+--* Clicks commit only when the rating is editable and a handler was passed. 
+local function ratingCommit(readOnly, onChange, landed)
+	if readOnly == true or onChange == nil then
+		return nil
+	end
+	return landed
+end
+return {
+	ratingCommit = ratingCommit,
+}

package/out/ui/packages/scroll/components/ScrollView.luau

@@ -1,8 +1,30 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
-local useTheme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").useTheme
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local resolveSx = _theme.resolveSx
+local useTheme = _theme.useTheme
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local function isPadKey(key)
+	return key == "p" or key == "px" or key == "py" or key == "pt" or key == "pr" or key == "pb" or key == "pl" or key == "padding"
+end
+--* Padding on a scrolling frame offsets scale-sized children without shrinking them. 
+local function withoutPad(sx)
+	if sx == nil then
+		return nil
+	end
+	local rest = {}
+	local kept = false
+	for key, value in pairs(sx) do
+		local name = tostring(key)
+		if isPadKey(name) then
+			continue
+		end
+		rest[name] = value
+		kept = true
+	end
+	return if kept then rest else nil
+end
 local function ScrollView(props)
 	local _binding = props
 	local children = _binding.children
@@ -22,19 +44,66 @@ local function ScrollView(props)
 		ScrollBarThickness = theme.spacing.calc(0.5),
 		ScrollBarImageColor3 = theme.palette.text.secondary,
 	}
+	local pad = resolveSx(theme, sx).padding
+	local _result = pad
+	if _result ~= nil then
+		_result = _result.PaddingLeft.Offset
+	end
+	local _condition = _result
+	if _condition == nil then
+		_condition = 0
+	end
+	local left = _condition
+	local _result_1 = pad
+	if _result_1 ~= nil then
+		_result_1 = _result_1.PaddingRight.Offset
+	end
+	local _condition_1 = _result_1
+	if _condition_1 == nil then
+		_condition_1 = 0
+	end
+	local right = _condition_1
+	local _result_2 = pad
+	if _result_2 ~= nil then
+		_result_2 = _result_2.PaddingTop.Offset
+	end
+	local _condition_2 = _result_2
+	if _condition_2 == nil then
+		_condition_2 = 0
+	end
+	local top = _condition_2
+	local _result_3 = pad
+	if _result_3 ~= nil then
+		_result_3 = _result_3.PaddingBottom.Offset
+	end
+	local _condition_3 = _result_3
+	if _condition_3 == nil then
+		_condition_3 = 0
+	end
+	local bottom = _condition_3
+	local inset = left + right + top + bottom > 0
 	local _attributes = {
 		tag = "scrollingframe",
 	}
-	local _condition = id
-	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
-		_condition = "ScrollView"
+	local _condition_4 = id
+	if not (_condition_4 ~= 0 and _condition_4 == _condition_4 and _condition_4 ~= "" and _condition_4) then
+		_condition_4 = "ScrollView"
 	end
-	_attributes.key = _condition
+	_attributes.key = _condition_4
 	_attributes.hostRef = ref
 	_attributes.base = root
 	_attributes.className = className
-	_attributes.sx = sx
-	return React.createElement(SxHost, _attributes, children)
+	_attributes.sx = withoutPad(sx)
+	return React.createElement(SxHost, _attributes, if inset then (React.createElement("frame", {
+		key = "Pad",
+		Size = UDim2.new(1, -(left + right), 0, 0),
+		Position = UDim2.new(0, left, 0, top),
+		AutomaticSize = Enum.AutomaticSize.Y,
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+	}, React.createElement("uipadding", {
+		PaddingBottom = UDim.new(0, bottom),
+	}), children)) else children)
 end
 local default = ScrollView
 return {

package/out/ui/packages/select/components/Select.luau

@@ -7,6 +7,7 @@ local useRef = _react.useRef
 local useState = _react.useState
 local _services = TS.import(script, TS.getModule(script, "@rbxts", "services"))
 local GuiService = _services.GuiService
+local TextService = _services.TextService
 local UserInputService = _services.UserInputService
 local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
@@ -37,6 +38,7 @@ local _selectMulti = TS.import(script, script.Parent, "selectMulti")
 local includesChoice = _selectMulti.includesChoice
 local selectionLabel = _selectMulti.selectionLabel
 local typeaheadChoice = TS.import(script, script.Parent, "selectTypeahead").typeaheadChoice
+local selectWidth = TS.import(script, script.Parent, "selectWidth").selectWidth
 local stepChoice = TS.import(script, script.Parent, "stepChoice").stepChoice
 local function Select(props)
 	local _binding = props
@@ -70,7 +72,8 @@ local function Select(props)
 	})
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
-	local row = controlMetrics(theme.density, size).height
+	local metrics = controlMetrics(theme.density, size)
+	local row = metrics.height
 	local active = canActivate(disabled, loading)
 	local anchor, setAnchor = useState()
 	local open, setOpen = useState(defaultOpen == true and not loading)
@@ -104,6 +107,19 @@ local function Select(props)
 	local rows = groupRows(filtered)
 	local listHeight = if #rows == 0 then row else math.min(#rows * row, theme.spacing.calc(16))
 	local menuHeight = listHeight + (if search then row else 0)
+	local font = theme.typography.fontFamilies.default or Enum.Font.SourceSans
+	local textSize = metrics.font
+	local widest = 0
+	for _, line in rows do
+		local shown = if line.kind == "header" then line.label else optionLabel(line.label, if values ~= nil then includesChoice(values, filtered[line.optionIndex + 1].value) else filtered[line.optionIndex + 1].value == value)
+		local bounds = TextService:GetTextSize(shown, textSize, font, Vector2.new(10000, 100))
+		if bounds.X > widest then
+			widest = bounds.X
+		end
+	end
+	local pad = theme.padding.calc(1.5) * 2
+	local floor = if anchor ~= nil then anchor.AbsoluteSize.X else 0
+	local popupWidth = if #rows == 0 then 0 else selectWidth(widest, pad, floor)
 	local _condition_1 = empty
 	if _condition_1 == nil then
 		local _attributes = {}
@@ -366,6 +382,7 @@ local function Select(props)
 		_condition_3 = (React.createElement(Popup, {
 			anchor = anchor,
 			preferredHeight = menuHeight,
+			preferredWidth = popupWidth,
 			onDismiss = close,
 			onInput = function(input)
 				return onKey(input, true)

package/out/ui/packages/select/components/Select.styles.luau

@@ -4,6 +4,7 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
+local focusRing = _theme.focusRing
 local useSelectStyles = componentStyles("Select", function(theme, _param)
 	local size = _param.size
 	local metrics = controlMetrics(theme.density, size)
@@ -91,11 +92,7 @@ local useSelectStyles = componentStyles("Select", function(theme, _param)
 			Color = theme.palette.border,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
-		focusStroke = {
-			Color = theme.palette.focus,
-			Thickness = 2,
-			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
-		},
+		focusStroke = focusRing(theme.palette.focus),
 	})
 end)
 local default = useSelectStyles

package/out/ui/packages/select/components/selectWidth.d.ts

@@ -0,0 +1,2 @@
+/** Grow past a narrow field so the option fits. Stay at least as wide as the field. */
+export declare function selectWidth(text: number, pad: number, floor: number): number;

package/out/ui/packages/select/components/selectWidth.luau

@@ -0,0 +1,15 @@
+-- Compiled with roblox-ts v3.0.0
+--* Grow past a narrow field so the option fits. Stay at least as wide as the field. 
+local function selectWidth(text, pad, floor)
+	local need = text + pad
+	if need < 0 then
+		need = 0
+	end
+	if floor > need then
+		return floor
+	end
+	return need
+end
+return {
+	selectWidth = selectWidth,
+}

package/out/ui/packages/shadow/components/Shadow.luau

@@ -77,10 +77,22 @@ local function Shadow(props)
 	end
 	_attributes_1.Size = blobSize
 	_attributes_1.ZIndex = zIndex
-	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, cornerRadius ~= nil and React.createElement("uicorner", {
+	return React.createElement(SxHost, _attributes, React.createElement("scrollingframe", {
+		key = "Bounds",
+		Size = UDim2.fromOffset(0, 0),
+		BackgroundTransparency = 1,
+		BorderSizePixel = 0,
+		ScrollBarThickness = 0,
+		ScrollingEnabled = false,
+		AutomaticCanvasSize = Enum.AutomaticSize.None,
+		CanvasSize = UDim2.fromOffset(0, 0),
+		ClipsDescendants = false,
+		Active = false,
+		Selectable = false,
+	}, React.createElement("frame", _attributes_1, cornerRadius ~= nil and React.createElement("uicorner", {
 		key = "Corner",
 		CornerRadius = cornerRadius,
-	})))
+	}))))
 end
 local default = Shadow
 return {

package/out/ui/packages/slider/components/RangeSlider.d.ts

@@ -0,0 +1,16 @@
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
+import { SliderColor } from "./Slider.styles";
+import { RangeValue } from "./rangeValue";
+export interface RangeSliderProps {
+    value: RangeValue;
+    onChange: (value: RangeValue) => void;
+    onCommit?: (value: RangeValue) => void;
+    min: number;
+    max: number;
+    step?: number;
+    disabled?: boolean;
+    size?: ControlSize;
+    color?: SliderColor;
+}
+declare function RangeSlider(props: CustomizedProps<Frame, RangeSliderProps>): JSX.Element;
+export default RangeSlider;

package/out/ui/packages/slider/components/RangeSlider.luau

@@ -0,0 +1,231 @@
+-- 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 cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "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 commitNumber = TS.import(script, script.Parent.Parent.Parent, "numberInput", "components", "numberValue").commitNumber
+local _sliderNudge = TS.import(script, script.Parent, "sliderNudge")
+local isSliderDrag = _sliderNudge.isSliderDrag
+local isSliderMove = _sliderNudge.isSliderMove
+local nudgeDelta = _sliderNudge.nudgeDelta
+local nudgeValue = _sliderNudge.nudgeValue
+local useRangeSliderStyles = TS.import(script, script.Parent, "RangeSlider.styles").default
+local _rangeValue = TS.import(script, script.Parent, "rangeValue")
+local orderRange = _rangeValue.orderRange
+local rangeMove = _rangeValue.rangeMove
+local rangeRatios = _rangeValue.rangeRatios
+local rangeThumb = _rangeValue.rangeThumb
+local function RangeSlider(props)
+	local _binding = props
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local onCommit = _binding.onCommit
+	local min = _binding.min
+	local max = _binding.max
+	local step = _binding.step
+	local disabled = _binding.disabled
+	local size = _binding.size
+	local color = _binding.color
+	if color == nil then
+		color = "primary"
+	end
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useRangeSliderStyles({
+		size = size,
+		color = color,
+	})
+	local ordered = orderRange(value.start, value.finish)
+	local ratios = rangeRatios(ordered.start, ordered.finish, min, max)
+	local active = canActivate(disabled)
+	local focused, setFocused = useState(false)
+	local pressed, setPressed = useState(false)
+	local dragging = useRef(false)
+	local thumb = useRef("low")
+	local latest = useRef(ordered)
+	latest.current = ordered
+	local faded = disabled == true
+	local showFocus = focused and active
+	local pointerValue = function(rbx, x)
+		local width = rbx.AbsoluteSize.X
+		if width <= 0 then
+			return nil
+		end
+		return commitNumber(min + ((x - rbx.AbsolutePosition.X) / width) * (max - min), min, max, step)
+	end
+	local publish = function(landed, commit)
+		thumb.current = landed.thumb
+		if landed.start == latest.current.start and landed.finish == latest.current.finish then
+			return nil
+		end
+		latest.current = {
+			start = landed.start,
+			finish = landed.finish,
+		}
+		onChange(latest.current)
+		if commit and onCommit then
+			onCommit(latest.current)
+		end
+	end
+	local update = function(rbx, x)
+		local landed = pointerValue(rbx, x)
+		if landed == nil then
+			return nil
+		end
+		publish(rangeMove(thumb.current, landed, latest.current.start, latest.current.finish), false)
+	end
+	local finish = function()
+		if not dragging.current then
+			return nil
+		end
+		dragging.current = false
+		setPressed(false)
+		if onCommit then
+			onCommit(latest.current)
+		end
+	end
+	local nudge = function(direction)
+		if not active then
+			return nil
+		end
+		local current = if thumb.current == "low" then latest.current.start else latest.current.finish
+		local nudged = nudgeValue(current, min, max, step, direction)
+		if nudged == nil then
+			return nil
+		end
+		publish(rangeMove(thumb.current, nudged, latest.current.start, latest.current.finish), true)
+	end
+	local knobLook = function(ratio, which)
+		return cx(styles.knob, {
+			Position = UDim2.fromScale(ratio, 0.5),
+			BackgroundTransparency = if faded then 0.45 else 0,
+			ZIndex = if which == thumb.current then 3 else 2,
+		})
+	end
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "RangeSlider"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+		pressed = pressed,
+		focused = focused,
+	}
+	_attributes.Active = active
+	_attributes.Selectable = active
+	_attributes.BackgroundTransparency = if showFocus then 0.85 else 1
+	_attributes.Event = {
+		InputBegan = function(rbx, input)
+			if not active then
+				return nil
+			end
+			local direction = nudgeDelta(input.KeyCode.Name)
+			if direction ~= nil then
+				nudge(direction)
+				return nil
+			end
+			if not isSliderDrag(input.UserInputType.Name) then
+				return nil
+			end
+			local landed = pointerValue(rbx, input.Position.X)
+			if landed ~= nil then
+				thumb.current = rangeThumb(landed, latest.current.start, latest.current.finish)
+			end
+			dragging.current = true
+			setPressed(true)
+			update(rbx, input.Position.X)
+		end,
+		InputChanged = function(rbx, input)
+			if dragging.current and isSliderMove(input.UserInputType.Name) then
+				update(rbx, input.Position.X)
+			end
+		end,
+		InputEnded = function(_rbx, input)
+			if isSliderDrag(input.UserInputType.Name) then
+				finish()
+			end
+		end,
+		MouseLeave = function()
+			return finish()
+		end,
+		SelectionGained = function()
+			return setFocused(true)
+		end,
+		SelectionLost = function()
+			return setFocused(false)
+		end,
+	}
+	local _attributes_1 = {
+		key = "Track",
+	}
+	for _k, _v in styles.track do
+		_attributes_1[_k] = _v
+	end
+	_attributes_1.BackgroundTransparency = if faded then 0.55 else 0.35
+	local _attributes_2 = table.clone(styles.corner)
+	setmetatable(_attributes_2, nil)
+	local _exp = React.createElement("uicorner", _attributes_2)
+	local _attributes_3 = {
+		key = "Fill",
+	}
+	for _k, _v in cx(styles.fill, {
+		Position = UDim2.fromScale(ratios.low, 0),
+		Size = UDim2.fromScale(ratios.high - ratios.low, 1),
+		BackgroundTransparency = if faded then 0.55 elseif pressed then 0.1 else 0,
+	}) do
+		_attributes_3[_k] = _v
+	end
+	local _attributes_4 = table.clone(styles.corner)
+	setmetatable(_attributes_4, nil)
+	local _exp_1 = React.createElement("frame", _attributes_3, React.createElement("uicorner", _attributes_4))
+	local _attributes_5 = {
+		key = "Low",
+	}
+	for _k, _v in knobLook(ratios.low, "low") do
+		_attributes_5[_k] = _v
+	end
+	local _attributes_6 = table.clone(styles.corner)
+	setmetatable(_attributes_6, nil)
+	local _exp_2 = React.createElement("uicorner", _attributes_6)
+	local _condition_1 = showFocus and thumb.current == "low"
+	if _condition_1 then
+		local _attributes_7 = table.clone(styles.stroke)
+		setmetatable(_attributes_7, nil)
+		_condition_1 = React.createElement("uistroke", _attributes_7)
+	end
+	local _exp_3 = React.createElement("frame", _attributes_5, _exp_2, _condition_1)
+	local _attributes_7 = {
+		key = "High",
+	}
+	for _k, _v in knobLook(ratios.high, "high") do
+		_attributes_7[_k] = _v
+	end
+	local _attributes_8 = table.clone(styles.corner)
+	setmetatable(_attributes_8, nil)
+	local _exp_4 = React.createElement("uicorner", _attributes_8)
+	local _condition_2 = showFocus and thumb.current == "high"
+	if _condition_2 then
+		local _attributes_9 = table.clone(styles.stroke)
+		setmetatable(_attributes_9, nil)
+		_condition_2 = React.createElement("uistroke", _attributes_9)
+	end
+	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, _exp, _exp_1, _exp_3, React.createElement("frame", _attributes_7, _exp_4, _condition_2)))
+end
+local default = RangeSlider
+return {
+	default = default,
+}

package/out/ui/packages/slider/components/RangeSlider.styles.d.ts

@@ -0,0 +1,7 @@
+import { ControlSize } from "../../../../theme/index";
+import { SliderColor } from "./Slider.styles";
+declare const useRangeSliderStyles: (props: {
+    size?: ControlSize;
+    color?: SliderColor;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useRangeSliderStyles;

package/out/ui/packages/slider/components/RangeSlider.styles.luau

@@ -0,0 +1,48 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local componentStyles = _theme.componentStyles
+local controlMetrics = _theme.controlMetrics
+local createStyles = _theme.createStyles
+local focusRing = _theme.focusRing
+local useRangeSliderStyles = componentStyles("RangeSlider", function(theme, _param)
+	local size = _param.size
+	local color = _param.color
+	if color == nil then
+		color = "primary"
+	end
+	local metrics = controlMetrics(theme.density, size)
+	local tone = if color == "accent" then theme.palette.accent.main else theme.palette.primary.main
+	return createStyles({
+		root = {
+			Size = UDim2.new(1, 0, 0, metrics.sliderHeight),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		track = {
+			Size = UDim2.new(1, 0, 0, metrics.sliderTrack),
+			Position = UDim2.fromScale(0, 0.5),
+			AnchorPoint = Vector2.new(0, 0.5),
+			BackgroundColor3 = theme.palette.action.disabled,
+			BorderSizePixel = 0,
+		},
+		fill = {
+			BackgroundColor3 = tone,
+			BorderSizePixel = 0,
+		},
+		knob = {
+			Size = UDim2.fromOffset(metrics.sliderKnob, metrics.sliderKnob),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			BackgroundColor3 = theme.palette.text.primary,
+			BorderSizePixel = 0,
+		},
+		corner = {
+			CornerRadius = UDim.new(1, 0),
+		},
+		stroke = focusRing(theme.palette.focus),
+	})
+end)
+local default = useRangeSliderStyles
+return {
+	default = default,
+}

package/out/ui/packages/slider/components/Slider.d.ts

@@ -10,6 +10,7 @@ export interface SliderProps {
     disabled?: boolean;
     size?: ControlSize;
     marks?: boolean | ReadonlyArray<number>;
+    format?: (value: number) => string;
     color?: SliderColor;
 }
 declare function Slider(props: CustomizedProps<Frame, SliderProps>): JSX.Element;

package/out/ui/packages/slider/components/Slider.luau

@@ -4,11 +4,18 @@ local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useRef = _react.useRef
 local useState = _react.useState
-local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
+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 cx = _theme.cx
+local useTheme = _theme.useTheme
 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 commitNumber = TS.import(script, script.Parent.Parent.Parent, "numberInput", "components", "numberValue").commitNumber
 local useSliderStyles = TS.import(script, script.Parent, "Slider.styles").default
+local _sliderLabel = TS.import(script, script.Parent, "sliderLabel")
+local sliderLabel = _sliderLabel.sliderLabel
+local sliderSlot = _sliderLabel.sliderSlot
 local sliderMarkValues = TS.import(script, script.Parent, "sliderMarks").sliderMarkValues
 local _sliderNudge = TS.import(script, script.Parent, "sliderNudge")
 local isSliderDrag = _sliderNudge.isSliderDrag
@@ -26,6 +33,7 @@ local function Slider(props)
 	local disabled = _binding.disabled
 	local size = _binding.size
 	local marks = _binding.marks
+	local format = _binding.format
 	local color = _binding.color
 	if color == nil then
 		color = "primary"
@@ -34,17 +42,26 @@ local function Slider(props)
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
-	local _binding_1 = useSliderStyles({
+	local labelText = sliderLabel(format, value)
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local metrics = controlMetrics(theme.density, size)
+	local caption = theme.typography.variants.caption
+	local font = theme.typography.fontFamilies[caption.family] or Enum.Font.SourceSans
+	local slot = if labelText == nil then 0 else sliderSlot(TextService:GetTextSize(labelText, caption.size, font, Vector2.new(10000, 100)).X, 52, 4)
+	local _binding_2 = useSliderStyles({
 		size = size,
 		color = color,
+		labeled = labelText ~= nil,
 	})
-	local root = _binding_1.root
-	local track = _binding_1.track
-	local fill = _binding_1.fill
-	local knob = _binding_1.knob
-	local corner = _binding_1.corner
-	local stroke = _binding_1.stroke
-	local mark = _binding_1.mark
+	local root = _binding_2.root
+	local track = _binding_2.track
+	local fill = _binding_2.fill
+	local knob = _binding_2.knob
+	local corner = _binding_2.corner
+	local stroke = _binding_2.stroke
+	local mark = _binding_2.mark
+	local label = _binding_2.label
 	local active = canActivate(disabled)
 	local focused, setFocused = useState(false)
 	local hovering, setHovering = useState(false)
@@ -162,6 +179,8 @@ local function Slider(props)
 	}
 	for _k, _v in cx(track, {
 		BackgroundTransparency = if faded then 0.55 elseif hovering and active then 0.2 else 0.35,
+	}, labelText ~= nil and {
+		Size = UDim2.new(1, -(slot + 4), 0, metrics.sliderTrack),
 	}) do
 		_attributes_1[_k] = _v
 	end
@@ -221,10 +240,24 @@ local function Slider(props)
 	if _condition_2 then
 		local _attributes_7 = table.clone(stroke)
 		setmetatable(_attributes_7, nil)
-		_attributes_7.Thickness = 1
 		_condition_2 = React.createElement("uistroke", _attributes_7)
 	end
-	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, _exp, _condition_1, _exp_1, _exp_2, React.createElement("frame", _attributes_5, _exp_3, _condition_2)))
+	local _exp_4 = React.createElement("frame", _attributes_1, _exp, _condition_1, _exp_1, _exp_2, React.createElement("frame", _attributes_5, _exp_3, _condition_2))
+	local _result
+	if labelText ~= nil then
+		local _attributes_7 = {
+			key = "Value",
+		}
+		for _k, _v in label do
+			_attributes_7[_k] = _v
+		end
+		_attributes_7.Size = UDim2.new(0, slot, 1, 0)
+		_attributes_7.Text = labelText
+		_result = React.createElement("textlabel", _attributes_7)
+	else
+		_result = nil
+	end
+	return React.createElement(SxHost, _attributes, _exp_4, _result)
 end
 local default = Slider
 return {

package/out/ui/packages/slider/components/Slider.styles.d.ts

@@ -3,6 +3,7 @@ export type SliderColor = "primary" | "accent";
 export interface SliderStyleProps {
     size?: ControlSize;
     color?: SliderColor;
+    labeled?: boolean;
 }
 declare const useSliderStyles: (props: SliderStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
 export default useSliderStyles;