@rbxts/uiblox 0.2.0-alpha.3 → 0.2.0-alpha.31

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

@@ -6,8 +6,10 @@ 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 useSliderStyles = TS.import(script, script.Parent, "Slider.styles").default
+local sliderMarkValues = TS.import(script, script.Parent, "sliderMarks").sliderMarkValues
 local _sliderNudge = TS.import(script, script.Parent, "sliderNudge")
 local isSliderDrag = _sliderNudge.isSliderDrag
 local isSliderMove = _sliderNudge.isSliderMove
@@ -23,12 +25,18 @@ local function Slider(props)
 	local step = _binding.step
 	local disabled = _binding.disabled
 	local size = _binding.size
+	local marks = _binding.marks
+	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 _binding_1 = useSliderStyles({
 		size = size,
+		color = color,
 	})
 	local root = _binding_1.root
 	local track = _binding_1.track
@@ -36,6 +44,7 @@ local function Slider(props)
 	local knob = _binding_1.knob
 	local corner = _binding_1.corner
 	local stroke = _binding_1.stroke
+	local mark = _binding_1.mark
 	local active = canActivate(disabled)
 	local focused, setFocused = useState(false)
 	local hovering, setHovering = useState(false)
@@ -45,6 +54,8 @@ local function Slider(props)
 	local ratio = if max > min then (math.clamp(value, min, max) - min) / (max - min) else 0
 	local faded = disabled == true
 	local showFocus = focused and active
+	local markValues = sliderMarkValues(min, max, step, marks)
+	local span = max - min
 	local update = function(rbx, x)
 		local width = rbx.AbsoluteSize.X
 		if width <= 0 then
@@ -81,26 +92,24 @@ local function Slider(props)
 			onCommit(nudged)
 		end
 	end
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "Slider"
 	end
 	_attributes.key = _condition
-	_attributes.ref = ref
-	for _k, _v in 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.hostRef = ref
+	_attributes.base = root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+		hover = hovering,
+		pressed = pressed,
+		focused = focused,
+	}
 	_attributes.Active = active
 	_attributes.Selectable = active
 	_attributes.BackgroundTransparency = if showFocus then 0.85 else 1
@@ -127,7 +136,7 @@ local function Slider(props)
 				update(rbx, input.Position.X)
 			end
 		end,
-		InputEnded = function(_, input)
+		InputEnded = function(_rbx, input)
 			if isSliderDrag(input.UserInputType.Name) then
 				finish()
 			end
@@ -165,6 +174,25 @@ local function Slider(props)
 		setmetatable(_attributes_3, nil)
 		_condition_1 = React.createElement("uistroke", _attributes_3)
 	end
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#markValues)
+	local _callback = function(markValue, index)
+		local markRatio = if span > 0 then (markValue - min) / span else 0
+		local _attributes_3 = {
+			key = `Mark-{index}`,
+		}
+		for _k, _v in mark do
+			_attributes_3[_k] = _v
+		end
+		_attributes_3.Position = UDim2.fromScale(markRatio, 0.5)
+		_attributes_3.BackgroundTransparency = if faded then 0.7 else 0.35
+		return React.createElement("frame", _attributes_3)
+	end
+	for _k, _v in markValues do
+		_newValue[_k] = _callback(_v, _k - 1, markValues)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	local _exp_1 = React.createElement(React.Fragment, nil, _newValue)
 	local _attributes_3 = {
 		key = "Fill",
 	}
@@ -176,7 +204,7 @@ local function Slider(props)
 	_attributes_3.Size = UDim2.fromScale(ratio, 1)
 	local _attributes_4 = table.clone(corner)
 	setmetatable(_attributes_4, nil)
-	local _exp_1 = React.createElement("frame", _attributes_3, React.createElement("uicorner", _attributes_4))
+	local _exp_2 = React.createElement("frame", _attributes_3, React.createElement("uicorner", _attributes_4))
 	local _attributes_5 = {
 		key = "Knob",
 	}
@@ -188,7 +216,7 @@ local function Slider(props)
 	_attributes_5.Position = UDim2.fromScale(ratio, 0.5)
 	local _attributes_6 = table.clone(corner)
 	setmetatable(_attributes_6, nil)
-	local _exp_2 = React.createElement("uicorner", _attributes_6)
+	local _exp_3 = React.createElement("uicorner", _attributes_6)
 	local _condition_2 = showFocus
 	if _condition_2 then
 		local _attributes_7 = table.clone(stroke)
@@ -196,7 +224,7 @@ local function Slider(props)
 		_attributes_7.Thickness = 1
 		_condition_2 = React.createElement("uistroke", _attributes_7)
 	end
-	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _condition_1, _exp_1, React.createElement("frame", _attributes_5, _exp_2, _condition_2)))
+	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)))
 end
 local default = Slider
 return {

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

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

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

@@ -6,7 +6,12 @@ local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
 local useSliderStyles = componentStyles("Slider", 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),
@@ -21,7 +26,7 @@ local useSliderStyles = componentStyles("Slider", function(theme, _param)
 			BorderSizePixel = 0,
 		},
 		fill = {
-			BackgroundColor3 = theme.palette.primary.main,
+			BackgroundColor3 = tone,
 			BorderSizePixel = 0,
 		},
 		knob = {
@@ -39,6 +44,14 @@ local useSliderStyles = componentStyles("Slider", function(theme, _param)
 			Thickness = 2,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
+		mark = {
+			Size = UDim2.new(0, 2, 0, metrics.sliderTrack + 4),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			BackgroundColor3 = theme.palette.text.secondary,
+			BackgroundTransparency = 0.35,
+			BorderSizePixel = 0,
+			ZIndex = 1,
+		},
 	})
 end)
 local default = useSliderStyles

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

@@ -0,0 +1 @@
+export declare function sliderMarkValues(min: number, max: number, step: number | undefined, marks: boolean | ReadonlyArray<number> | undefined): number[];

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

@@ -0,0 +1,37 @@
+-- Compiled with roblox-ts v3.0.0
+local function sliderMarkValues(min, max, step, marks)
+	if marks == nil or marks == false then
+		return {}
+	end
+	if marks ~= true then
+		local out = {}
+		for _, value in marks do
+			if value >= min and value <= max then
+				table.insert(out, value)
+			end
+		end
+		return out
+	end
+	local span = max - min
+	if span <= 0 then
+		return { min }
+	end
+	local increment = if step ~= nil and step > 0 then step else span
+	local out = {}
+	local value = min
+	local guard = 0
+	while value <= max + increment * 1e-9 and guard < 64 do
+		local _arg0 = math.clamp(value, min, max)
+		table.insert(out, _arg0)
+		value += increment
+		guard += 1
+	end
+	if out[#out] ~= max then
+		local _max = max
+		table.insert(out, _max)
+	end
+	return out
+end
+return {
+	sliderMarkValues = sliderMarkValues,
+}

package/out/ui/packages/snackbar/components/Snackbar.d.ts

@@ -6,6 +6,8 @@ export interface SnackbarProps {
     duration?: number;
     variant?: ToastVariants;
     open?: boolean;
+    action?: string;
+    onAction?: () => void;
 }
 declare function Snackbar(props: CustomizedProps<Frame, SnackbarProps>): JSX.Element | undefined;
 export default Snackbar;

package/out/ui/packages/snackbar/components/Snackbar.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Toast = TS.import(script, script.Parent.Parent.Parent, "toast").Toast
+local snackbarActionLabel = TS.import(script, script.Parent, "snackbarAction").snackbarActionLabel
 local function Snackbar(props)
 	local _binding = props
 	local message = _binding.message
@@ -12,6 +13,8 @@ local function Snackbar(props)
 	if open == nil then
 		open = true
 	end
+	local action = _binding.action
+	local onAction = _binding.onAction
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -24,6 +27,8 @@ local function Snackbar(props)
 		onDismiss = onDismiss,
 		duration = duration,
 		variant = variant,
+		action = snackbarActionLabel(action),
+		onAction = onAction,
 		className = className,
 		sx = sx,
 	}

package/out/ui/packages/snackbar/components/snackbarAction.d.ts

@@ -0,0 +1 @@
+export declare function snackbarActionLabel(action?: string): string | undefined;

package/out/ui/packages/snackbar/components/snackbarAction.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local function snackbarActionLabel(action)
+	if action == nil or #action == 0 then
+		return nil
+	end
+	return action
+end
+return {
+	snackbarActionLabel = snackbarActionLabel,
+}

package/out/ui/packages/speedDial/components/SpeedDial.d.ts

@@ -0,0 +1,19 @@
+import { CustomizedProps } from "../../../../theme/index";
+import { Icons } from "../../../enums/index";
+import { SpeedDialDirection } from "./SpeedDial.styles";
+export interface SpeedDialAction {
+    icon: Icons;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export interface SpeedDialProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    actions: SpeedDialAction[];
+    icon?: Icons;
+    openIcon?: Icons;
+    disabled?: boolean;
+    direction?: SpeedDialDirection;
+}
+declare function SpeedDial(props: CustomizedProps<Frame, SpeedDialProps>): JSX.Element;
+export default SpeedDial;

package/out/ui/packages/speedDial/components/SpeedDial.luau

@@ -0,0 +1,97 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local Fab = TS.import(script, script.Parent.Parent.Parent, "fab").Fab
+local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
+local useSpeedDialStyles = TS.import(script, script.Parent, "SpeedDial.styles").default
+local function SpeedDial(props)
+	local _binding = props
+	local open = _binding.open
+	local onOpenChange = _binding.onOpenChange
+	local actions = _binding.actions
+	local icon = _binding.icon
+	if icon == nil then
+		icon = Icons.OpenBox
+	end
+	local openIcon = _binding.openIcon
+	if openIcon == nil then
+		openIcon = Icons.Close
+	end
+	local disabled = _binding.disabled
+	local direction = _binding.direction
+	if direction == nil then
+		direction = "up"
+	end
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useSpeedDialStyles({
+		direction = direction,
+	})
+	local mainFirst = direction == "down" or direction == "right"
+	local mainOrder = if mainFirst then 0 else 1000
+	local actionBase = if mainFirst then 1 else 0
+	local _attributes = {
+		tag = "frame",
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "SpeedDial"
+	end
+	_attributes.key = _condition
+	_attributes.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
+	local _attributes_1 = table.clone(styles.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _condition_1 = open
+	if _condition_1 then
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#actions)
+		local _callback = function(action, index)
+			return React.createElement(Fab, {
+				key = `Action-{index}`,
+				icon = action.icon,
+				size = "small",
+				disabled = disabled == true or action.disabled == true,
+				onClick = function()
+					local _result = action.onClick
+					if _result ~= nil then
+						_result()
+					end
+					onOpenChange(false)
+				end,
+				className = {
+					LayoutOrder = actionBase + index,
+				},
+			})
+		end
+		for _k, _v in actions do
+			_newValue[_k] = _callback(_v, _k - 1, actions)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_condition_1 = (React.createElement(React.Fragment, nil, _newValue))
+	end
+	return React.createElement(SxHost, _attributes, _exp, _condition_1, React.createElement(Fab, {
+		key = "Main",
+		icon = if open then openIcon else icon,
+		disabled = disabled,
+		onClick = function()
+			return onOpenChange(not open)
+		end,
+		className = {
+			LayoutOrder = mainOrder,
+		},
+	}))
+end
+local default = SpeedDial
+return {
+	default = default,
+}

package/out/ui/packages/speedDial/components/SpeedDial.styles.d.ts

@@ -0,0 +1,5 @@
+export type SpeedDialDirection = "up" | "down" | "left" | "right";
+declare const useSpeedDialStyles: (props: {
+    direction?: SpeedDialDirection;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useSpeedDialStyles;

package/out/ui/packages/speedDial/components/SpeedDial.styles.luau

@@ -0,0 +1,31 @@
+-- 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 createStyles = _theme.createStyles
+local useSpeedDialStyles = componentStyles("SpeedDial", function(theme, _param)
+	local direction = _param.direction
+	if direction == nil then
+		direction = "up"
+	end
+	local vertical = direction == "up" or direction == "down"
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = if vertical then Enum.FillDirection.Vertical else Enum.FillDirection.Horizontal,
+			HorizontalAlignment = if direction == "left" then Enum.HorizontalAlignment.Right elseif direction == "right" then Enum.HorizontalAlignment.Left else Enum.HorizontalAlignment.Center,
+			VerticalAlignment = if direction == "up" then Enum.VerticalAlignment.Bottom elseif direction == "down" then Enum.VerticalAlignment.Top else Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+		},
+	})
+end)
+local default = useSpeedDialStyles
+return {
+	default = default,
+}

package/out/ui/packages/speedDial/index.d.ts

@@ -0,0 +1,3 @@
+export { default as SpeedDial } from "./components/SpeedDial";
+export { SpeedDialProps, SpeedDialAction } from "./components/SpeedDial";
+export { SpeedDialDirection } from "./components/SpeedDial.styles";

package/out/ui/packages/speedDial/init.luau

@@ -0,0 +1,5 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.SpeedDial = TS.import(script, script, "components", "SpeedDial").default
+return exports

package/out/ui/packages/splitPane/components/SplitPane.luau

@@ -7,6 +7,7 @@ local useRef = _react.useRef
 local useState = _react.useState
 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 SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local useSplitPaneStyles = TS.import(script, script.Parent, "SplitPane.styles").default
 local _splitLook = TS.import(script, script.Parent, "splitLook")
 local splitHitTransparency = _splitLook.splitHitTransparency
@@ -79,26 +80,21 @@ local function SplitPane(props)
 			return connection:Disconnect()
 		end
 	end, { body, vertical })
-	local _attributes = {}
+	local _attributes = {
+		tag = "frame",
+	}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
 		_condition = "SplitPane"
 	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.hostRef = ref
+	_attributes.base = styles.root
+	_attributes.className = className
+	_attributes.sx = sx
+	_attributes.state = {
+		disabled = disabled,
+	}
 	local _attributes_1 = {
 		key = "Body",
 		ref = setBody,
@@ -184,7 +180,7 @@ local function SplitPane(props)
 		_newValue[_k] = _callback(_v, _k - 1, _exp_3)
 	end
 	-- ▲ ReadonlyArray.map ▲
-	local _exp_4 = React.createElement("frame", _attributes_3, _exp_1, React.createElement("frame", _attributes_5, _exp_2, _newValue))
+	local _exp_4 = React.createElement("frame", _attributes_3, _exp_1, React.createElement("frame", _attributes_5, _exp_2, React.createElement(React.Fragment, nil, _newValue)))
 	local _attributes_6 = {
 		key = "Second",
 	}
@@ -233,7 +229,7 @@ local function SplitPane(props)
 		}
 		_condition_1 = (React.createElement("frame", _attributes_7))
 	end
-	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _exp_4, _exp_5, _condition_1))
+	return React.createElement(SxHost, _attributes, React.createElement("frame", _attributes_1, _exp, _exp_4, _exp_5, _condition_1))
 end
 local default = SplitPane
 return {

package/out/ui/packages/splitPane/components/splitLook.d.ts

@@ -1,5 +1,5 @@
 export type SplitPointer = "rest" | "hover" | "press";
 export declare function splitPointer(hovering: boolean, pressed: boolean): SplitPointer;
-export declare function splitRuleTransparency(pointer: SplitPointer, disabled?: boolean): 0.25 | 0.35 | 0.7 | 0.55;
+export declare function splitRuleTransparency(pointer: SplitPointer, disabled?: boolean): 0.25 | 0.7 | 0.55 | 0.35;
 export declare function splitMarkTransparency(pointer: SplitPointer, disabled?: boolean): 0 | 0.55 | 0.1;
 export declare function splitHitTransparency(pointer: SplitPointer, disabled?: boolean): 1 | 0.9 | 0.94;

package/out/ui/packages/stateMatrix.d.ts

@@ -26,5 +26,7 @@ export interface StateCapture {
     indeterminate?: boolean;
     size?: StateSize;
     density?: StateDensity;
+    row?: boolean;
+    marks?: boolean;
 }
 export declare const stateMatrix: StateCapture[];