@rbxts/uiblox 0.1.53 → 0.2.0-alpha.1

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

@@ -0,0 +1,3 @@
+export { default as Drawer } from "./components/Drawer";
+export { DrawerProps } from "./components/Drawer";
+export { DrawerEdge } from "./components/drawerPlacement";

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

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

package/out/ui/packages/enumPicker/components/EnumPicker.d.ts

@@ -0,0 +1,11 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface EnumPickerProps {
+    value: EnumItem;
+    items: EnumItem[];
+    onChange: (value: EnumItem) => void;
+    disabled?: boolean;
+    searchable?: boolean;
+    placeholder?: string;
+}
+declare function EnumPicker(props: CustomizedProps<Frame, EnumPickerProps>): JSX.Element;
+export default EnumPicker;

package/out/ui/packages/enumPicker/components/EnumPicker.luau

@@ -0,0 +1,42 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Select = TS.import(script, script.Parent.Parent.Parent, "select").Select
+local enumOptions = TS.import(script, script.Parent, "enumOptions").enumOptions
+local function EnumPicker(props)
+	local _binding = props
+	local value = _binding.value
+	local items = _binding.items
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local searchable = _binding.searchable
+	if searchable == nil then
+		searchable = true
+	end
+	local placeholder = _binding.placeholder
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local _attributes = {
+		value = value,
+		options = enumOptions(items),
+		onChange = onChange,
+		disabled = disabled,
+		searchable = searchable,
+		placeholder = placeholder,
+		className = className,
+		sx = sx,
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "EnumPicker"
+	end
+	_attributes.id = _condition
+	_attributes.ref = ref
+	return React.createElement(Select, _attributes)
+end
+local default = EnumPicker
+return {
+	default = default,
+}

package/out/ui/packages/enumPicker/components/enumOptions.d.ts

@@ -0,0 +1,5 @@
+export declare function enumOptions(items: EnumItem[]): {
+    label: string;
+    value: EnumItem;
+}[];
+export declare function enumItemByName(items: EnumItem[], name: string): EnumItem | undefined;

package/out/ui/packages/enumPicker/components/enumOptions.luau

@@ -0,0 +1,28 @@
+-- Compiled with roblox-ts v3.0.0
+local function enumOptions(items)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#items)
+	local _callback = function(item)
+		return {
+			label = item.Name,
+			value = item,
+		}
+	end
+	for _k, _v in items do
+		_newValue[_k] = _callback(_v, _k - 1, items)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return _newValue
+end
+local function enumItemByName(items, name)
+	for _, item in items do
+		if item.Name == name then
+			return item
+		end
+	end
+	return nil
+end
+return {
+	enumOptions = enumOptions,
+	enumItemByName = enumItemByName,
+}

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

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

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

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

package/out/ui/packages/fab/components/Fab.d.ts

@@ -0,0 +1,13 @@
+import { CustomizedProps } from "../../../../theme/index";
+import { Icons } from "../../../enums/index";
+import { FabSize } from "./fabSize";
+export interface FabProps {
+    icon: Icons;
+    size?: FabSize;
+    disabled?: boolean;
+    loading?: boolean;
+    reducedMotion?: boolean;
+    onClick?: () => void;
+}
+declare function Fab(props: CustomizedProps<TextButton, FabProps>): JSX.Element;
+export default Fab;

package/out/ui/packages/fab/components/Fab.luau

@@ -0,0 +1,128 @@
+-- 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 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 CircularProgress = TS.import(script, script.Parent.Parent.Parent, "circularProgress").CircularProgress
+local Shadow = TS.import(script, script.Parent.Parent.Parent, "shadow").Shadow
+local fabIconPixels = TS.import(script, script.Parent, "fabSize").fabIconPixels
+local useFabStyles = TS.import(script, script.Parent, "Fab.styles").default
+local function Fab(props)
+	local _binding = props
+	local icon = _binding.icon
+	local size = _binding.size
+	if size == nil then
+		size = "medium"
+	end
+	local disabled = _binding.disabled
+	local loading = _binding.loading
+	if loading == nil then
+		loading = false
+	end
+	local reducedMotion = _binding.reducedMotion
+	local onClick = _binding.onClick
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local active = canActivate(disabled, loading)
+	local styles = useFabStyles({
+		size = size,
+		disabled = not active,
+	})
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local hovering, setHovering = useState(false)
+	local focused, setFocused = useState(false)
+	local iconPx = fabIconPixels(size)
+	useEffect(function()
+		if active then
+			return nil
+		end
+		setHovering(false)
+		setFocused(false)
+	end, { active })
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Fab"
+	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.Active = active
+	_attributes.Selectable = active
+	_attributes.BackgroundTransparency = if not active then 0.5 elseif hovering or focused then 0.15 else 0
+	_attributes.Event = {
+		Activated = function()
+			if active and onClick then
+				onClick()
+			end
+		end,
+		MouseEnter = function()
+			if active then
+				setHovering(true)
+			end
+		end,
+		MouseLeave = function()
+			return setHovering(false)
+		end,
+		SelectionGained = function()
+			if active then
+				setFocused(true)
+			end
+		end,
+		SelectionLost = function()
+			return setFocused(false)
+		end,
+	}
+	local _attributes_1 = table.clone(styles.corner)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uicorner", _attributes_1)
+	local _exp_1 = React.createElement(Shadow)
+	local _result
+	if loading then
+		_result = (React.createElement(CircularProgress, {
+			size = iconPx,
+			thickness = 2,
+			color = theme.palette.primary.on,
+			reducedMotion = reducedMotion,
+			className = {
+				AnchorPoint = Vector2.new(0.5, 0.5),
+				Position = UDim2.fromScale(0.5, 0.5),
+			},
+		}))
+	else
+		local _attributes_2 = {
+			key = "Icon",
+		}
+		for _k, _v in styles.icon do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Size = UDim2.fromOffset(iconPx, iconPx)
+		_attributes_2.AnchorPoint = Vector2.new(0.5, 0.5)
+		_attributes_2.Position = UDim2.fromScale(0.5, 0.5)
+		_attributes_2.Image = tostring(icon)
+		_result = (React.createElement("imagelabel", _attributes_2))
+	end
+	return React.createElement("textbutton", _attributes, _exp, _exp_1, _result)
+end
+local default = Fab
+return {
+	default = default,
+}

package/out/ui/packages/fab/components/Fab.styles.d.ts

@@ -0,0 +1,7 @@
+import { FabSize } from "./fabSize";
+export interface FabStyleProps {
+    size?: FabSize;
+    disabled?: boolean;
+}
+declare const useFabStyles: (props: FabStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
+export default useFabStyles;

package/out/ui/packages/fab/components/Fab.styles.luau

@@ -0,0 +1,40 @@
+-- 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 fabPixels = TS.import(script, script.Parent, "fabSize").fabPixels
+local useFabStyles = componentStyles("Fab", function(theme, _param)
+	local size = _param.size
+	if size == nil then
+		size = "medium"
+	end
+	local disabled = _param.disabled
+	local diameter = fabPixels(size)
+	return createStyles({
+		root = {
+			Size = UDim2.fromOffset(diameter, diameter),
+			BackgroundColor3 = theme.palette.primary.main,
+			BackgroundTransparency = if disabled then 0.5 else 0,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Text = "",
+			ZIndex = 12000,
+		},
+		corner = {
+			CornerRadius = UDim.new(1, 0),
+		},
+		icon = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ScaleType = Enum.ScaleType.Fit,
+			ImageColor3 = theme.palette.primary.on,
+			ImageTransparency = if disabled then 0.5 else 0,
+		},
+	})
+end)
+local default = useFabStyles
+return {
+	default = default,
+}

package/out/ui/packages/fab/components/fabSize.d.ts

@@ -0,0 +1,3 @@
+export type FabSize = "small" | "medium" | "large";
+export declare function fabPixels(size?: FabSize): 40 | 64 | 56;
+export declare function fabIconPixels(size?: FabSize): 18 | 24 | 28;

package/out/ui/packages/fab/components/fabSize.luau

@@ -0,0 +1,29 @@
+-- Compiled with roblox-ts v3.0.0
+local function fabPixels(size)
+	if size == nil then
+		size = "medium"
+	end
+	if size == "small" then
+		return 40
+	end
+	if size == "large" then
+		return 64
+	end
+	return 56
+end
+local function fabIconPixels(size)
+	if size == nil then
+		size = "medium"
+	end
+	if size == "small" then
+		return 18
+	end
+	if size == "large" then
+		return 28
+	end
+	return 24
+end
+return {
+	fabPixels = fabPixels,
+	fabIconPixels = fabIconPixels,
+}

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

@@ -0,0 +1,3 @@
+export { default as Fab } from "./components/Fab";
+export { FabProps } from "./components/Fab";
+export { FabSize, fabPixels, fabIconPixels } from "./components/fabSize";

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

@@ -0,0 +1,8 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Fab = TS.import(script, script, "components", "Fab").default
+local _fabSize = TS.import(script, script, "components", "fabSize")
+exports.fabPixels = _fabSize.fabPixels
+exports.fabIconPixels = _fabSize.fabIconPixels
+return exports

package/out/ui/packages/fontEditor/components/FontEditor.d.ts

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

package/out/ui/packages/fontEditor/components/FontEditor.luau

@@ -0,0 +1,223 @@
+-- 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 useState = _react.useState
+local canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
+local Select = TS.import(script, script.Parent.Parent.Parent, "select").Select
+local useFontEditorStyles = TS.import(script, script.Parent, "FontEditor.styles").default
+local _fontValue = TS.import(script, script.Parent, "fontValue")
+local enumFamilies = _fontValue.enumFamilies
+local familyLabel = _fontValue.familyLabel
+local writeFont = _fontValue.writeFont
+local function enumOptions(items)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#items)
+	local _callback = function(item)
+		return {
+			label = item.Name,
+			value = item.Name,
+		}
+	end
+	for _k, _v in items do
+		_newValue[_k] = _callback(_v, _k - 1, items)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return _newValue
+end
+local cachedFamilies
+local function builtInFamilies()
+	if cachedFamilies ~= nil then
+		return cachedFamilies
+	end
+	local fonts = {}
+	for _, item in Enum.Font:GetEnumItems() do
+		local _arg0 = Font.fromEnum(item)
+		table.insert(fonts, _arg0)
+	end
+	cachedFamilies = enumFamilies(fonts)
+	return cachedFamilies
+end
+local function FontEditor(props)
+	local _binding = props
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useFontEditorStyles()
+	local active = canActivate(disabled)
+	local families = builtInFamilies()
+	-- ▼ ReadonlyArray.find ▼
+	local _callback = function(item)
+		return item.family == value.Family
+	end
+	local _result
+	for _i, _v in families do
+		if _callback(_v, _i - 1, families) == true then
+			_result = _v
+			break
+		end
+	end
+	-- ▲ ReadonlyArray.find ▲
+	if _result == nil then
+		local _arg1 = {
+			label = familyLabel(value.Family),
+			family = value.Family,
+		}
+		table.insert(families, 1, _arg1)
+	end
+	local custom, setCustom = useState(value.Family)
+	local weights = enumOptions(Enum.FontWeight:GetEnumItems())
+	local stylesList = enumOptions(Enum.FontStyle:GetEnumItems())
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "FontEditor"
+	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.column)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _attributes_2 = {
+		key = "Family",
+	}
+	for _k, _v in styles.row do
+		_attributes_2[_k] = _v
+	end
+	_attributes_2.LayoutOrder = 1
+	local _attributes_3 = {
+		value = value.Family,
+	}
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#families)
+	local _callback_1 = function(item)
+		return {
+			label = item.label,
+			value = item.family,
+		}
+	end
+	for _k, _v in families do
+		_newValue[_k] = _callback_1(_v, _k - 1, families)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	_attributes_3.options = _newValue
+	_attributes_3.disabled = disabled
+	_attributes_3.className = styles.fill
+	_attributes_3.onChange = function(family)
+		setCustom(family)
+		onChange(writeFont(family, value.Weight, value.Style))
+	end
+	local _exp_1 = React.createElement("frame", _attributes_2, React.createElement(Select, _attributes_3))
+	local _attributes_4 = {
+		key = "Custom",
+	}
+	for _k, _v in styles.row do
+		_attributes_4[_k] = _v
+	end
+	_attributes_4.LayoutOrder = 2
+	local _exp_2 = React.createElement("frame", _attributes_4, React.createElement(Input, {
+		text = custom,
+		placeholder = "rbxasset://fonts/families/…",
+		disabled = disabled,
+		width = UDim.new(1, 0),
+		onInput = function(text)
+			return setCustom(text)
+		end,
+		onTextChanged = function(text)
+			if #text == 0 then
+				return nil
+			end
+			setCustom(text)
+			onChange(writeFont(text, value.Weight, value.Style))
+		end,
+	}))
+	local _attributes_5 = {
+		key = "Face",
+	}
+	for _k, _v in styles.row do
+		_attributes_5[_k] = _v
+	end
+	_attributes_5.LayoutOrder = 3
+	local _exp_3 = React.createElement("uilistlayout", {
+		FillDirection = Enum.FillDirection.Horizontal,
+		Padding = UDim.new(0, 4),
+		SortOrder = Enum.SortOrder.LayoutOrder,
+	})
+	local _attributes_6 = {
+		key = "Weight",
+	}
+	for _k, _v in styles.pair do
+		_attributes_6[_k] = _v
+	end
+	_attributes_6.LayoutOrder = 1
+	local _exp_4 = React.createElement("frame", _attributes_6, React.createElement(Select, {
+		value = value.Weight.Name,
+		options = weights,
+		disabled = not active,
+		className = styles.fill,
+		onChange = function(name)
+			local weight = (Enum.FontWeight)[name]
+			if weight ~= nil then
+				onChange(writeFont(value.Family, weight, value.Style))
+			end
+		end,
+	}))
+	local _attributes_7 = {
+		key = "Style",
+	}
+	for _k, _v in styles.pair do
+		_attributes_7[_k] = _v
+	end
+	_attributes_7.LayoutOrder = 2
+	local _exp_5 = React.createElement("frame", _attributes_5, _exp_3, _exp_4, React.createElement("frame", _attributes_7, React.createElement(Select, {
+		value = value.Style.Name,
+		options = stylesList,
+		disabled = not active,
+		className = styles.fill,
+		onChange = function(name)
+			local face = (Enum.FontStyle)[name]
+			if face ~= nil then
+				onChange(writeFont(value.Family, value.Weight, face))
+			end
+		end,
+	})))
+	local _attributes_8 = {
+		key = "Preview",
+	}
+	for _k, _v in styles.preview do
+		_attributes_8[_k] = _v
+	end
+	_attributes_8.LayoutOrder = 4
+	_attributes_8.FontFace = value
+	local _attributes_9 = table.clone(styles.padding)
+	setmetatable(_attributes_9, nil)
+	local _exp_6 = React.createElement("uipadding", _attributes_9)
+	local _attributes_10 = table.clone(styles.corner)
+	setmetatable(_attributes_10, nil)
+	local _exp_7 = React.createElement("uicorner", _attributes_10)
+	local _attributes_11 = table.clone(styles.stroke)
+	setmetatable(_attributes_11, nil)
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _exp_5, React.createElement("textlabel", _attributes_8, _exp_6, _exp_7, React.createElement("uistroke", _attributes_11)))
+end
+local default = FontEditor
+return {
+	default = default,
+}

package/out/ui/packages/fontEditor/components/FontEditor.styles.d.ts

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

package/out/ui/packages/fontEditor/components/FontEditor.styles.luau

@@ -0,0 +1,56 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local createStyles = _theme.createStyles
+local componentStyles = _theme.componentStyles
+local useFontEditorStyles = componentStyles("FontEditor", function(theme)
+	return createStyles({
+		root = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		column = {
+			FillDirection = Enum.FillDirection.Vertical,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		row = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			BackgroundTransparency = 1,
+		},
+		pair = {
+			Size = UDim2.new(0.5, -theme.padding.calc(0.5), 0, theme.spacing.calc(2)),
+			BackgroundTransparency = 1,
+		},
+		fill = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+		},
+		preview = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(3)),
+			BackgroundColor3 = theme.palette.surface.input,
+			BorderSizePixel = 0,
+			Text = "The quick brown fox",
+			TextColor3 = theme.palette.text.primary,
+			TextSize = theme.typography.fontSizes.body,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextTruncate = Enum.TextTruncate.AtEnd,
+		},
+		padding = {
+			PaddingLeft = UDim.new(0, theme.padding.default),
+			PaddingRight = UDim.new(0, theme.padding.default),
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		stroke = {
+			Color = theme.palette.border,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
+	})
+end)
+local default = useFontEditorStyles
+return {
+	default = default,
+}

package/out/ui/packages/fontEditor/components/fontValue.d.ts

@@ -0,0 +1,10 @@
+export interface FontFamily {
+    label: string;
+    family: string;
+}
+export declare function familyLabel(family: string): string;
+export declare function uniqueFamilies(families: string[]): FontFamily[];
+export declare function enumFamilies(items: {
+    Family: string;
+}[]): FontFamily[];
+export declare function writeFont(family: string, weight: Enum.FontWeight, style: Enum.FontStyle): Font;