@rbxts/uiblox 0.1.53 → 0.2.0-alpha.1

package/out/ui/packages/assetField/components/AssetField.luau

@@ -0,0 +1,75 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Input = TS.import(script, script.Parent.Parent.Parent, "input").Input
+local useAssetFieldStyles = TS.import(script, script.Parent, "AssetField.styles").default
+local assetPreviewUri = TS.import(script, script.Parent, "assetPreviewUri").assetPreviewUri
+local function AssetField(props)
+	local _binding = props
+	local value = _binding.value
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local placeholder = _binding.placeholder
+	if placeholder == nil then
+		placeholder = "rbxassetid://…"
+	end
+	local preview = _binding.preview
+	if preview == nil then
+		preview = true
+	end
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useAssetFieldStyles()
+	local uri = if preview == true then assetPreviewUri(value) else nil
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "AssetField"
+	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)
+	local _exp_1 = React.createElement(Input, {
+		text = value,
+		disabled = disabled,
+		placeholder = placeholder,
+		width = UDim.new(1, 0),
+		onInput = onChange,
+	})
+	local _condition_1 = uri ~= nil
+	if _condition_1 then
+		local _attributes_2 = {
+			key = "Preview",
+		}
+		for _k, _v in styles.preview do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Image = uri
+		_attributes_2.LayoutOrder = 2
+		local _attributes_3 = table.clone(styles.corner)
+		setmetatable(_attributes_3, nil)
+		_condition_1 = (React.createElement("imagelabel", _attributes_2, React.createElement("uicorner", _attributes_3)))
+	end
+	return React.createElement("frame", _attributes, _exp, _exp_1, _condition_1)
+end
+local default = AssetField
+return {
+	default = default,
+}

package/out/ui/packages/assetField/components/AssetField.styles.d.ts

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

package/out/ui/packages/assetField/components/AssetField.styles.luau

@@ -0,0 +1,33 @@
+-- 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 useAssetFieldStyles = componentStyles("AssetField", function(theme)
+	return createStyles({
+		root = {
+			Size = UDim2.new(1, 0, 0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = Enum.FillDirection.Vertical,
+			Padding = UDim.new(0, theme.padding.calc(1)),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+		},
+		preview = {
+			Size = UDim2.fromOffset(theme.spacing.calc(4), theme.spacing.calc(4)),
+			BackgroundColor3 = theme.palette.surface.input,
+			BorderSizePixel = 0,
+			ScaleType = Enum.ScaleType.Fit,
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+	})
+end)
+local default = useAssetFieldStyles
+return {
+	default = default,
+}

package/out/ui/packages/assetField/components/assetPreviewUri.d.ts

@@ -0,0 +1 @@
+export declare function assetPreviewUri(value: string): string | undefined;

package/out/ui/packages/assetField/components/assetPreviewUri.luau

@@ -0,0 +1,25 @@
+-- Compiled with roblox-ts v3.0.0
+local function assetPreviewUri(value)
+	if #value == 0 then
+		return nil
+	end
+	if string.sub(value, 1, 13) == "rbxassetid://" then
+		return value
+	end
+	if string.sub(value, 1, 11) == "rbxasset://" then
+		return value
+	end
+	for i = 1, #value do
+		local _value = value
+		local _i = i
+		local _i_1 = i
+		local c = string.sub(_value, _i, _i_1)
+		if c < "0" or c > "9" then
+			return nil
+		end
+	end
+	return `rbxassetid://{value}`
+end
+return {
+	assetPreviewUri = assetPreviewUri,
+}

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

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

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

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

package/out/ui/packages/autocomplete/components/Autocomplete.d.ts

@@ -0,0 +1,5 @@
+import { CustomizedProps } from "../../../../theme/index";
+import { SelectProps } from "../../select/index";
+export type AutocompleteProps<T> = SelectProps<T>;
+declare function Autocomplete<T>(props: CustomizedProps<Frame, AutocompleteProps<T>>): JSX.Element;
+export default Autocomplete;

package/out/ui/packages/autocomplete/components/Autocomplete.luau

@@ -0,0 +1,47 @@
+-- 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 autocompleteSearchable = TS.import(script, script.Parent, "autocompleteSearchable").autocompleteSearchable
+local function Autocomplete(props)
+	local _binding = props
+	local value = _binding.value
+	local values = _binding.values
+	local options = _binding.options
+	local onChange = _binding.onChange
+	local disabled = _binding.disabled
+	local loading = _binding.loading
+	local placeholder = _binding.placeholder
+	local searchable = _binding.searchable
+	local reducedMotion = _binding.reducedMotion
+	local size = _binding.size
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local _attributes = {
+		value = value,
+		values = values,
+		options = options,
+		onChange = onChange,
+		disabled = disabled,
+		loading = loading,
+		placeholder = placeholder,
+		searchable = autocompleteSearchable(searchable),
+		reducedMotion = reducedMotion,
+		size = size,
+		className = className,
+		sx = sx,
+	}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Autocomplete"
+	end
+	_attributes.id = _condition
+	_attributes.ref = ref
+	return React.createElement(Select, _attributes)
+end
+local default = Autocomplete
+return {
+	default = default,
+}

package/out/ui/packages/autocomplete/components/autocompleteSearchable.d.ts

@@ -0,0 +1 @@
+export declare function autocompleteSearchable(searchable?: boolean): searchable is true | undefined;

package/out/ui/packages/autocomplete/components/autocompleteSearchable.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local function autocompleteSearchable(searchable)
+	return searchable ~= false
+end
+return {
+	autocompleteSearchable = autocompleteSearchable,
+}

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

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

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

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

package/out/ui/packages/avatar/components/Avatar.d.ts

@@ -0,0 +1,8 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface AvatarProps {
+    name?: string;
+    image?: string;
+    size?: number;
+}
+declare function Avatar(props: CustomizedProps<Frame, AvatarProps>): JSX.Element;
+export default Avatar;

package/out/ui/packages/avatar/components/Avatar.luau

@@ -0,0 +1,69 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local avatarInitials = TS.import(script, script.Parent, "avatarText").avatarInitials
+local useAvatarStyles = TS.import(script, script.Parent, "Avatar.styles").default
+local function Avatar(props)
+	local _binding = props
+	local name = _binding.name
+	if name == nil then
+		name = ""
+	end
+	local image = _binding.image
+	local size = _binding.size
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useAvatarStyles({
+		size = size,
+	})
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Avatar"
+	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 _result
+	if image ~= nil then
+		local _attributes_2 = {
+			key = "Image",
+		}
+		for _k, _v in styles.image do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Image = image
+		_result = (React.createElement("imagelabel", _attributes_2))
+	else
+		local _attributes_2 = {
+			key = "Initials",
+		}
+		for _k, _v in styles.text do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = avatarInitials(name)
+		_result = (React.createElement("textlabel", _attributes_2))
+	end
+	return React.createElement("frame", _attributes, _exp, _result)
+end
+local default = Avatar
+return {
+	default = default,
+}

package/out/ui/packages/avatar/components/Avatar.styles.d.ts

@@ -0,0 +1,4 @@
+declare const useAvatarStyles: (props: {
+    size?: number;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useAvatarStyles;

package/out/ui/packages/avatar/components/Avatar.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 useAvatarStyles = componentStyles("Avatar", function(theme, _param)
+	local size = _param.size
+	if size == nil then
+		size = 40
+	end
+	return createStyles({
+		root = {
+			Size = UDim2.fromOffset(size, size),
+			BackgroundColor3 = theme.palette.primary.main,
+			BorderSizePixel = 0,
+			ClipsDescendants = true,
+		},
+		image = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		text = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = math.max(12, size * 0.4),
+			TextColor3 = theme.palette.primary.on,
+		},
+		corner = {
+			CornerRadius = UDim.new(1, 0),
+		},
+	})
+end)
+local default = useAvatarStyles
+return {
+	default = default,
+}

package/out/ui/packages/avatar/components/avatarText.d.ts

@@ -0,0 +1 @@
+export declare function avatarInitials(name: string): string;

package/out/ui/packages/avatar/components/avatarText.luau

@@ -0,0 +1,17 @@
+-- Compiled with roblox-ts v3.0.0
+local function avatarInitials(name)
+	local result = ""
+	for _, word in string.split(name, " ") do
+		if #word == 0 then
+			continue
+		end
+		result ..= string.upper(string.sub(word, 1, 1))
+		if #result == 2 then
+			break
+		end
+	end
+	return result
+end
+return {
+	avatarInitials = avatarInitials,
+}

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

@@ -0,0 +1,3 @@
+export { default as Avatar } from "./components/Avatar";
+export { AvatarProps } from "./components/Avatar";
+export { avatarInitials } from "./components/avatarText";

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

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

package/out/ui/packages/badge/components/Badge.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+export interface BadgeProps {
+    count?: number;
+    max?: number;
+    invisible?: boolean;
+    children?: React.ReactNode;
+}
+declare function Badge(props: CustomizedProps<Frame, BadgeProps>): JSX.Element;
+export default Badge;

package/out/ui/packages/badge/components/Badge.luau

@@ -0,0 +1,69 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local badgeText = TS.import(script, script.Parent, "badgeValue").badgeText
+local useBadgeStyles = TS.import(script, script.Parent, "Badge.styles").default
+local function Badge(props)
+	local _binding = props
+	local count = _binding.count
+	if count == nil then
+		count = 0
+	end
+	local max = _binding.max
+	if max == nil then
+		max = 99
+	end
+	local invisible = _binding.invisible
+	if invisible == nil then
+		invisible = false
+	end
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useBadgeStyles()
+	local shown = not invisible and count > 0
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Badge"
+	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 _exp = children
+	local _condition_1 = shown
+	if _condition_1 then
+		local _attributes_1 = {
+			key = "Count",
+		}
+		for _k, _v in styles.badge do
+			_attributes_1[_k] = _v
+		end
+		_attributes_1.Text = badgeText(count, max)
+		local _attributes_2 = table.clone(styles.padding)
+		setmetatable(_attributes_2, nil)
+		local _exp_1 = React.createElement("uipadding", _attributes_2)
+		local _attributes_3 = table.clone(styles.corner)
+		setmetatable(_attributes_3, nil)
+		_condition_1 = (React.createElement("textlabel", _attributes_1, _exp_1, React.createElement("uicorner", _attributes_3)))
+	end
+	return React.createElement("frame", _attributes, _exp, _condition_1)
+end
+local default = Badge
+return {
+	default = default,
+}

package/out/ui/packages/badge/components/Badge.styles.d.ts

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

package/out/ui/packages/badge/components/Badge.styles.luau

@@ -0,0 +1,38 @@
+-- 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 useBadgeStyles = componentStyles("Badge", function(theme)
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		badge = {
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.fromScale(1, 0),
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromOffset(theme.padding.calc(2), theme.padding.calc(2)),
+			BackgroundColor3 = theme.palette.status.error.main,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+			TextColor3 = theme.palette.text.inverse,
+			ZIndex = 2,
+		},
+		padding = {
+			PaddingLeft = UDim.new(0, theme.padding.calc(0.5)),
+			PaddingRight = UDim.new(0, theme.padding.calc(0.5)),
+		},
+		corner = {
+			CornerRadius = UDim.new(1, 0),
+		},
+	})
+end)
+local default = useBadgeStyles
+return {
+	default = default,
+}

package/out/ui/packages/badge/components/badgeValue.d.ts

@@ -0,0 +1 @@
+export declare function badgeText(count: number, max: number): string;

package/out/ui/packages/badge/components/badgeValue.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local function badgeText(count, max)
+	return if count > max then `{max}+` else tostring(count)
+end
+return {
+	badgeText = badgeText,
+}

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

@@ -0,0 +1,3 @@
+export { default as Badge } from "./components/Badge";
+export { BadgeProps } from "./components/Badge";
+export { badgeText } from "./components/badgeValue";

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

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

package/out/ui/packages/bottomNavigation/components/BottomNavigation.d.ts

@@ -0,0 +1,10 @@
+import { CustomizedProps } from "../../../../theme/index";
+import { ChoiceOption } from "../../radioGroup/index";
+export interface BottomNavigationProps<T> {
+    value: T;
+    options: ChoiceOption<T>[];
+    onChange: (value: T) => void;
+    disabled?: boolean;
+}
+declare function BottomNavigation<T>(props: CustomizedProps<Frame, BottomNavigationProps<T>>): JSX.Element;
+export default BottomNavigation;

package/out/ui/packages/bottomNavigation/components/BottomNavigation.luau

@@ -0,0 +1,86 @@
+-- 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 canActivate = TS.import(script, script.Parent.Parent.Parent, "button", "components", "activation").canActivate
+local useBottomNavigationStyles = TS.import(script, script.Parent, "BottomNavigation.styles").default
+local function BottomNavigation(props)
+	local _binding = props
+	local value = _binding.value
+	local options = _binding.options
+	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 = useBottomNavigationStyles()
+	local count = math.max(#options, 1)
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "BottomNavigation"
+	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(#options)
+	local _callback = function(choice, index)
+		local active = canActivate(disabled or choice.disabled)
+		local selected = choice.value == value
+		local _attributes_2 = {
+			key = `{choice.label}-{index}`,
+		}
+		for _k, _v in cx(styles.item, selected and styles.selected, not active and styles.disabledItem) do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Size = UDim2.new(1 / count, 0, 1, 0)
+		_attributes_2.Text = choice.label
+		_attributes_2.LayoutOrder = index
+		_attributes_2.Active = active
+		_attributes_2.Selectable = active
+		_attributes_2.Event = {
+			Activated = function()
+				if active and choice.value ~= value then
+					onChange(choice.value)
+				end
+			end,
+		}
+		local _condition_1 = selected
+		if _condition_1 then
+			local _attributes_3 = {
+				key = "Indicator",
+			}
+			for _k, _v in styles.indicator do
+				_attributes_3[_k] = _v
+			end
+			_condition_1 = React.createElement("frame", _attributes_3)
+		end
+		return React.createElement("textbutton", _attributes_2, _condition_1)
+	end
+	for _k, _v in options do
+		_newValue[_k] = _callback(_v, _k - 1, options)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("frame", _attributes, _exp, _newValue)
+end
+local default = BottomNavigation
+return {
+	default = default,
+}

package/out/ui/packages/bottomNavigation/components/BottomNavigation.styles.d.ts

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