@rbxts/uiblox 0.1.53 → 0.2.0-alpha.1

package/out/ui/packages/stepper/components/Stepper.d.ts

@@ -0,0 +1,7 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface StepperProps {
+    steps: string[];
+    activeStep: number;
+}
+declare function Stepper(props: CustomizedProps<Frame, StepperProps>): JSX.Element;
+export default Stepper;

package/out/ui/packages/stepper/components/Stepper.luau

@@ -0,0 +1,62 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
+local stepState = TS.import(script, script.Parent, "stepState").stepState
+local useStepperStyles = TS.import(script, script.Parent, "Stepper.styles").default
+local function Stepper(props)
+	local _binding = props
+	local steps = _binding.steps
+	local activeStep = _binding.activeStep
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useStepperStyles()
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Stepper"
+	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
+	local _attributes_1 = table.clone(styles.list)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#steps)
+	local _callback = function(label, index)
+		local state = stepState(index, activeStep)
+		local _attributes_2 = {
+			key = `{label}-{index}`,
+		}
+		for _k, _v in cx(styles.step, state == "active" and styles.active, state == "complete" and styles.complete) do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = `{index + 1}. {label}`
+		_attributes_2.LayoutOrder = index
+		return React.createElement("textlabel", _attributes_2)
+	end
+	for _k, _v in steps do
+		_newValue[_k] = _callback(_v, _k - 1, steps)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("frame", _attributes, _exp, _newValue)
+end
+local default = Stepper
+return {
+	default = default,
+}

package/out/ui/packages/stepper/components/Stepper.styles.d.ts

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

package/out/ui/packages/stepper/components/Stepper.styles.luau

@@ -0,0 +1,39 @@
+-- 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 useStepperStyles = componentStyles("Stepper", function(theme)
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		step = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			TextColor3 = theme.palette.text.secondary,
+		},
+		active = {
+			TextColor3 = theme.palette.primary.main,
+		},
+		complete = {
+			TextColor3 = theme.palette.text.primary,
+		},
+	})
+end)
+local default = useStepperStyles
+return {
+	default = default,
+}

package/out/ui/packages/stepper/components/stepState.d.ts

@@ -0,0 +1,2 @@
+export type StepState = "complete" | "active" | "pending";
+export declare function stepState(index: number, activeStep: number): StepState;

package/out/ui/packages/stepper/components/stepState.luau

@@ -0,0 +1,13 @@
+-- Compiled with roblox-ts v3.0.0
+local function stepState(index, activeStep)
+	if index < activeStep then
+		return "complete"
+	end
+	if index == activeStep then
+		return "active"
+	end
+	return "pending"
+end
+return {
+	stepState = stepState,
+}

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

@@ -0,0 +1,3 @@
+export { default as Stepper } from "./components/Stepper";
+export { StepperProps } from "./components/Stepper";
+export { stepState, StepState } from "./components/stepState";

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

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

package/out/ui/packages/switch/components/Switch.d.ts

@@ -0,0 +1,11 @@
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
+export interface SwitchProps {
+    value: boolean;
+    onChange: (value: boolean) => void;
+    disabled?: boolean;
+    label?: string;
+    size?: ControlSize;
+    reducedMotion?: boolean;
+}
+declare function Switch(props: CustomizedProps<TextButton, SwitchProps>): JSX.Element;
+export default Switch;

package/out/ui/packages/switch/components/Switch.luau

@@ -0,0 +1,170 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
+local useState = _react.useState
+local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
+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 playProperty = TS.import(script, script.Parent.Parent.Parent, "motion").playProperty
+local useSwitchStyles = TS.import(script, script.Parent, "Switch.styles").default
+local _switchLook = TS.import(script, script.Parent, "switchLook")
+local switchPointer = _switchLook.switchPointer
+local switchStrokeTransparency = _switchLook.switchStrokeTransparency
+local switchThumbPlacement = _switchLook.switchThumbPlacement
+local switchThumbTransparency = _switchLook.switchThumbTransparency
+local switchTrackTransparency = _switchLook.switchTrackTransparency
+local THUMB_SECONDS = 0.14
+local function Switch(props)
+	local _binding = props
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local label = _binding.label
+	local size = _binding.size
+	local reducedProp = _binding.reducedMotion
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local reducedMotion = useReducedMotion(reducedProp)
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local _binding_2 = useSwitchStyles({
+		size = size,
+	})
+	local root = _binding_2.root
+	local row = _binding_2.row
+	local track = _binding_2.track
+	local trackOn = _binding_2.trackOn
+	local knob = _binding_2.knob
+	local labelStyle = _binding_2.label
+	local corner = _binding_2.corner
+	local stroke = _binding_2.stroke
+	local hovering, setHovering = useState(false)
+	local pressed, setPressed = useState(false)
+	local focused, setFocused = useState(false)
+	local knobRef = useRef()
+	local placed = useRef(false)
+	local active = canActivate(disabled)
+	local pointer = if active then switchPointer(hovering, pressed, focused) else "rest"
+	local on = value == true
+	local inset = controlMetrics(theme.density, size).switchInset
+	local placement = switchThumbPlacement(on, inset)
+	useEffect(function()
+		local thumb = knobRef.current
+		if not thumb then
+			return nil
+		end
+		local goal = {
+			Position = UDim2.new(placement.scaleX, placement.offsetX, 0.5, 0),
+			AnchorPoint = Vector2.new(placement.anchorX, 0.5),
+		}
+		if not placed.current or reducedMotion == true then
+			thumb.Position = goal.Position
+			thumb.AnchorPoint = goal.AnchorPoint
+			placed.current = true
+			return nil
+		end
+		return playProperty(thumb, goal, THUMB_SECONDS, reducedMotion)
+	end, { placement.scaleX, placement.offsetX, placement.anchorX, reducedMotion })
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Switch"
+	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.Active = active
+	_attributes.Selectable = not disabled
+	_attributes.BackgroundTransparency = if focused and active then 0.85 else 1
+	_attributes.Event = {
+		MouseButton1Click = function()
+			if active then
+				onChange(not value)
+			end
+		end,
+		MouseButton1Down = function()
+			if active then
+				setPressed(true)
+			end
+		end,
+		MouseButton1Up = function()
+			return setPressed(false)
+		end,
+		MouseEnter = function()
+			if active then
+				setHovering(true)
+			end
+		end,
+		MouseLeave = function()
+			setHovering(false)
+			setPressed(false)
+		end,
+		SelectionGained = function()
+			return setFocused(true)
+		end,
+		SelectionLost = function()
+			return setFocused(false)
+		end,
+	}
+	local _attributes_1 = table.clone(row)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _attributes_2 = table.clone(cx(track, on and trackOn, {
+		BackgroundTransparency = switchTrackTransparency(on, disabled == true, pointer),
+	}))
+	setmetatable(_attributes_2, nil)
+	_attributes_2.LayoutOrder = 1
+	local _attributes_3 = table.clone(corner)
+	setmetatable(_attributes_3, nil)
+	local _exp_1 = React.createElement("uicorner", _attributes_3)
+	local _attributes_4 = table.clone(cx(stroke, {
+		Transparency = switchStrokeTransparency(disabled == true, pointer),
+	}))
+	setmetatable(_attributes_4, nil)
+	local _exp_2 = React.createElement("uistroke", _attributes_4)
+	local _attributes_5 = {
+		ref = knobRef,
+	}
+	for _k, _v in cx(knob, {
+		BackgroundTransparency = switchThumbTransparency(disabled == true),
+	}) do
+		_attributes_5[_k] = _v
+	end
+	local _attributes_6 = table.clone(corner)
+	setmetatable(_attributes_6, nil)
+	local _exp_3 = React.createElement("frame", _attributes_2, _exp_1, _exp_2, React.createElement("frame", _attributes_5, React.createElement("uicorner", _attributes_6)))
+	local _condition_1 = label ~= nil
+	if _condition_1 then
+		local _attributes_7 = table.clone(labelStyle)
+		setmetatable(_attributes_7, nil)
+		_attributes_7.Text = label
+		_attributes_7.TextTransparency = if disabled == true then 0.5 else 0
+		_attributes_7.LayoutOrder = 2
+		_condition_1 = (React.createElement("textlabel", _attributes_7))
+	end
+	return React.createElement("textbutton", _attributes, _exp, _exp_3, _condition_1)
+end
+local default = Switch
+return {
+	default = default,
+}

package/out/ui/packages/switch/components/Switch.styles.d.ts

@@ -0,0 +1,6 @@
+import { ControlSize } from "../../../../theme/index";
+export interface SwitchStyleProps {
+    size?: ControlSize;
+}
+declare const useSwitchStyles: (props: SwitchStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
+export default useSwitchStyles;

package/out/ui/packages/switch/components/Switch.styles.luau

@@ -0,0 +1,62 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
+local createStyles = _theme.createStyles
+local componentStyles = _theme.componentStyles
+local useSwitchStyles = componentStyles("Switch", function(theme, _param)
+	local size = _param.size
+	local metrics = controlMetrics(theme.density, size)
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.fromScale(0, 0),
+			Text = "",
+			AutoButtonColor = false,
+		},
+		row = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			Padding = UDim.new(0, theme.padding.default),
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		track = {
+			Size = UDim2.fromOffset(metrics.switchTrackW, metrics.switchTrackH),
+			BackgroundColor3 = theme.palette.action.disabled,
+			BorderSizePixel = 0,
+		},
+		trackOn = {
+			BackgroundColor3 = theme.palette.primary.main,
+		},
+		knob = {
+			Size = UDim2.fromOffset(metrics.switchThumb, metrics.switchThumb),
+			BackgroundColor3 = theme.palette.surface.elevated,
+			BorderSizePixel = 0,
+			ZIndex = 2,
+		},
+		label = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			BackgroundTransparency = 1,
+			Size = UDim2.fromScale(0, 0),
+			TextColor3 = theme.palette.text.primary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = metrics.font,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextWrapped = true,
+		},
+		corner = {
+			CornerRadius = UDim.new(1, 0),
+		},
+		stroke = {
+			Color = theme.palette.focus,
+			Thickness = 2,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
+	})
+end)
+local default = useSwitchStyles
+return {
+	default = default,
+}

package/out/ui/packages/switch/components/switchLook.d.ts

@@ -0,0 +1,10 @@
+export type SwitchPointer = "rest" | "hover" | "press" | "focus";
+export declare function switchPointer(hovering: boolean, pressed: boolean, focused: boolean): SwitchPointer;
+export declare function switchTrackTransparency(on: boolean, disabled: boolean, pointer: SwitchPointer): 0.08 | 0.35 | 0 | 0.25 | 0.65 | 0.55 | 0.15;
+export declare function switchThumbTransparency(disabled: boolean): 0.35 | 0;
+export declare function switchStrokeTransparency(disabled: boolean, pointer: SwitchPointer): 1 | 0.35 | 0;
+export declare function switchThumbPlacement(on: boolean, inset: number): {
+    scaleX: number;
+    offsetX: number;
+    anchorX: number;
+};

package/out/ui/packages/switch/components/switchLook.luau

@@ -0,0 +1,63 @@
+-- Compiled with roblox-ts v3.0.0
+local function switchPointer(hovering, pressed, focused)
+	if pressed then
+		return "press"
+	end
+	if focused then
+		return "focus"
+	end
+	if hovering then
+		return "hover"
+	end
+	return "rest"
+end
+local function switchTrackTransparency(on, disabled, pointer)
+	if disabled then
+		return if on then 0.55 else 0.65
+	end
+	if not on then
+		if pointer == "press" then
+			return 0.15
+		end
+		if pointer == "hover" or pointer == "focus" then
+			return 0.25
+		end
+		return 0.35
+	end
+	if pointer == "press" then
+		return 0.15
+	end
+	if pointer == "hover" then
+		return 0.08
+	end
+	return 0
+end
+local function switchThumbTransparency(disabled)
+	return if disabled then 0.35 else 0
+end
+local function switchStrokeTransparency(disabled, pointer)
+	if disabled then
+		return 1
+	end
+	if pointer == "focus" or pointer == "press" then
+		return 0
+	end
+	if pointer == "hover" then
+		return 0.35
+	end
+	return 1
+end
+local function switchThumbPlacement(on, inset)
+	return {
+		scaleX = if on then 1 else 0,
+		offsetX = if on then -inset else inset,
+		anchorX = if on then 1 else 0,
+	}
+end
+return {
+	switchPointer = switchPointer,
+	switchTrackTransparency = switchTrackTransparency,
+	switchThumbTransparency = switchThumbTransparency,
+	switchStrokeTransparency = switchStrokeTransparency,
+	switchThumbPlacement = switchThumbPlacement,
+}

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

@@ -0,0 +1,2 @@
+export { default as Switch } from "./components/Switch";
+export { SwitchProps } from "./components/Switch";

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

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

package/out/ui/packages/table/components/Table.d.ts

@@ -0,0 +1,9 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface TableProps {
+    columns: string[];
+    rows: string[][];
+    selected?: number;
+    onRowActivated?: (index: number) => void;
+}
+declare function Table(props: CustomizedProps<Frame, TableProps>): JSX.Element;
+export default Table;

package/out/ui/packages/table/components/Table.luau

@@ -0,0 +1,135 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local cx = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme").cx
+local rowSelected = TS.import(script, script.Parent, "rowSelected").rowSelected
+local useTableStyles = TS.import(script, script.Parent, "Table.styles").default
+local function Table(props)
+	local _binding = props
+	local columns = _binding.columns
+	local rows = _binding.rows
+	local selected = _binding.selected
+	local onRowActivated = _binding.onRowActivated
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useTableStyles()
+	local width = if #columns > 0 then 1 / #columns else 1
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Table"
+	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
+	local _attributes_1 = table.clone(styles.corner)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uicorner", _attributes_1)
+	local _attributes_2 = table.clone(styles.list)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
+	local _attributes_3 = {
+		key = "Header",
+	}
+	for _k, _v in styles.header do
+		_attributes_3[_k] = _v
+	end
+	_attributes_3.LayoutOrder = 0
+	local _attributes_4 = table.clone(styles.padding)
+	setmetatable(_attributes_4, nil)
+	local _exp_2 = React.createElement("uipadding", _attributes_4)
+	local _attributes_5 = table.clone(styles.cells)
+	setmetatable(_attributes_5, nil)
+	local _exp_3 = React.createElement("uilistlayout", _attributes_5)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#columns)
+	local _callback = function(label, index)
+		local _attributes_6 = {
+			key = `h-{label}-{index}`,
+		}
+		for _k, _v in cx(styles.cell, styles.headerCell) do
+			_attributes_6[_k] = _v
+		end
+		_attributes_6.Text = label
+		_attributes_6.Size = UDim2.new(width, 0, 0, 0)
+		_attributes_6.LayoutOrder = index
+		return React.createElement("textlabel", _attributes_6)
+	end
+	for _k, _v in columns do
+		_newValue[_k] = _callback(_v, _k - 1, columns)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	local _exp_4 = React.createElement("frame", _attributes_3, _exp_2, _exp_3, _newValue)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue_1 = table.create(#rows)
+	local _callback_1 = function(cells, rowIndex)
+		local _attributes_6 = {
+			key = `r-{rowIndex}`,
+		}
+		for _k, _v in cx(styles.row, rowSelected(rowIndex, selected) and styles.selected) do
+			_attributes_6[_k] = _v
+		end
+		_attributes_6.LayoutOrder = rowIndex + 1
+		_attributes_6.Event = {
+			Activated = function()
+				local _result = onRowActivated
+				if _result ~= nil then
+					_result = _result(rowIndex)
+				end
+				return _result
+			end,
+		}
+		local _attributes_7 = table.clone(styles.padding)
+		setmetatable(_attributes_7, nil)
+		local _exp_5 = React.createElement("uipadding", _attributes_7)
+		local _attributes_8 = table.clone(styles.cells)
+		setmetatable(_attributes_8, nil)
+		local _exp_6 = React.createElement("uilistlayout", _attributes_8)
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue_2 = table.create(#columns)
+		local _callback_2 = function(_, colIndex)
+			local _attributes_9 = {
+				key = `c-{rowIndex}-{colIndex}`,
+			}
+			for _k, _v in styles.cell do
+				_attributes_9[_k] = _v
+			end
+			local _condition_1 = cells[colIndex + 1]
+			if _condition_1 == nil then
+				_condition_1 = ""
+			end
+			_attributes_9.Text = _condition_1
+			_attributes_9.Size = UDim2.new(width, 0, 0, 0)
+			_attributes_9.LayoutOrder = colIndex
+			return React.createElement("textlabel", _attributes_9)
+		end
+		for _k, _v in columns do
+			_newValue_2[_k] = _callback_2(_v, _k - 1, columns)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		return React.createElement("textbutton", _attributes_6, _exp_5, _exp_6, _newValue_2)
+	end
+	for _k, _v in rows do
+		_newValue_1[_k] = _callback_1(_v, _k - 1, rows)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_4, _newValue_1)
+end
+local default = Table
+return {
+	default = default,
+}

package/out/ui/packages/table/components/Table.styles.d.ts

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