@rbxts/uiblox 0.2.0-alpha.4 → 0.2.0-alpha.5

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

@@ -13,6 +13,10 @@ local function Autocomplete(props)
 	local loading = _binding.loading
 	local placeholder = _binding.placeholder
 	local searchable = _binding.searchable
+	local defaultOpen = _binding.defaultOpen
+	local defaultQuery = _binding.defaultQuery
+	local emptyText = _binding.emptyText
+	local empty = _binding.empty
 	local reducedMotion = _binding.reducedMotion
 	local size = _binding.size
 	local className = _binding.className
@@ -28,6 +32,10 @@ local function Autocomplete(props)
 		loading = loading,
 		placeholder = placeholder,
 		searchable = autocompleteSearchable(searchable),
+		defaultOpen = defaultOpen,
+		defaultQuery = defaultQuery,
+		emptyText = emptyText,
+		empty = empty,
 		reducedMotion = reducedMotion,
 		size = size,
 		className = className,

package/out/ui/packages/chip/components/Chip.d.ts

@@ -4,6 +4,7 @@ export interface ChipProps {
     selected?: boolean;
     disabled?: boolean;
     onActivated?: () => void;
+    onDelete?: () => void;
 }
 declare function Chip(props: CustomizedProps<TextButton, ChipProps>): JSX.Element;
 export default Chip;

package/out/ui/packages/chip/components/Chip.luau

@@ -1,6 +1,7 @@
 -- 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 useChipStyles = TS.import(script, script.Parent, "Chip.styles").default
 local function Chip(props)
 	local _binding = props
@@ -8,13 +9,16 @@ local function Chip(props)
 	local selected = _binding.selected
 	local disabled = _binding.disabled
 	local onActivated = _binding.onActivated
+	local onDelete = _binding.onDelete
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local deletable = onDelete ~= nil
 	local styles = useChipStyles({
 		selected = selected,
 		disabled = disabled,
+		deletable = deletable,
 	})
 	local _attributes = {}
 	local _condition = id
@@ -36,7 +40,7 @@ local function Chip(props)
 			_attributes[_k] = _v
 		end
 	end
-	_attributes.Text = label
+	_attributes.Text = if deletable then "" else label
 	_attributes.Event = {
 		Activated = function()
 			if disabled ~= true then
@@ -55,7 +59,38 @@ local function Chip(props)
 	local _exp_1 = React.createElement("uicorner", _attributes_2)
 	local _attributes_3 = table.clone(styles.stroke)
 	setmetatable(_attributes_3, nil)
-	return React.createElement("textbutton", _attributes, _exp, _exp_1, React.createElement("uistroke", _attributes_3))
+	local _exp_2 = React.createElement("uistroke", _attributes_3)
+	local _condition_1 = deletable
+	if _condition_1 then
+		local _attributes_4 = table.clone(styles.row)
+		setmetatable(_attributes_4, nil)
+		local _exp_3 = React.createElement("uilistlayout", _attributes_4)
+		local _attributes_5 = {
+			key = "Label",
+		}
+		for _k, _v in styles.label do
+			_attributes_5[_k] = _v
+		end
+		_attributes_5.Text = label
+		local _exp_4 = React.createElement("textlabel", _attributes_5)
+		local _attributes_6 = {
+			key = "Delete",
+		}
+		for _k, _v in styles.delete do
+			_attributes_6[_k] = _v
+		end
+		_attributes_6.Image = tostring(Icons.Close)
+		_attributes_6.Active = disabled ~= true
+		_attributes_6.Event = {
+			Activated = function()
+				if disabled ~= true then
+					onDelete()
+				end
+			end,
+		}
+		_condition_1 = (React.createElement(React.Fragment, nil, _exp_3, _exp_4, React.createElement("imagebutton", _attributes_6)))
+	end
+	return React.createElement("textbutton", _attributes, _exp, _exp_1, _exp_2, _condition_1)
 end
 local default = Chip
 return {

package/out/ui/packages/chip/components/Chip.styles.d.ts

@@ -1,5 +1,6 @@
 declare const useChipStyles: (props: {
     selected?: boolean;
     disabled?: boolean;
+    deletable?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useChipStyles;

package/out/ui/packages/chip/components/Chip.styles.luau

@@ -12,6 +12,10 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 	if disabled == nil then
 		disabled = false
 	end
+	local deletable = _param.deletable
+	if deletable == nil then
+		deletable = false
+	end
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -29,7 +33,7 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			PaddingTop = UDim.new(0, theme.padding.calc(0.5)),
 			PaddingBottom = UDim.new(0, theme.padding.calc(0.5)),
 			PaddingLeft = UDim.new(0, theme.padding.calc(1.5)),
-			PaddingRight = UDim.new(0, theme.padding.calc(1.5)),
+			PaddingRight = UDim.new(0, theme.padding.calc(if deletable then 0.5 else 1.5)),
 		},
 		corner = {
 			CornerRadius = UDim.new(theme.shape.pillScale, 0),
@@ -39,6 +43,30 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 			Transparency = if selected then 1 else 0,
 		},
+		row = {
+			FillDirection = Enum.FillDirection.Horizontal,
+			VerticalAlignment = Enum.VerticalAlignment.Center,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.padding.calc(0.5)),
+		},
+		label = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.primary,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.body,
+			LayoutOrder = 1,
+		},
+		delete = {
+			Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			ImageColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.secondary,
+			LayoutOrder = 2,
+		},
 	})
 end)
 local default = useChipStyles

package/out/ui/packages/formText/components/FormHelperText.d.ts

@@ -0,0 +1,8 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface FormHelperTextProps {
+    text: string;
+    hasError?: boolean;
+    disabled?: boolean;
+}
+declare function FormHelperText(props: CustomizedProps<TextLabel, FormHelperTextProps>): JSX.Element;
+export default FormHelperText;

package/out/ui/packages/formText/components/FormHelperText.luau

@@ -0,0 +1,44 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useFormTextStyles = TS.import(script, script.Parent, "FormText.styles").default
+local function FormHelperText(props)
+	local _binding = props
+	local text = _binding.text
+	local hasError = _binding.hasError
+	local disabled = _binding.disabled
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useFormTextStyles({
+		hasError = hasError,
+		disabled = disabled,
+	})
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "FormHelperText"
+	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.Text = text
+	return React.createElement("textlabel", _attributes)
+end
+local default = FormHelperText
+return {
+	default = default,
+}

package/out/ui/packages/formText/components/FormLabel.d.ts

@@ -0,0 +1,9 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface FormLabelProps {
+    text: string;
+    required?: boolean;
+    hasError?: boolean;
+    disabled?: boolean;
+}
+declare function FormLabel(props: CustomizedProps<TextLabel, FormLabelProps>): JSX.Element;
+export default FormLabel;

package/out/ui/packages/formText/components/FormLabel.luau

@@ -0,0 +1,46 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useFormTextStyles = TS.import(script, script.Parent, "FormText.styles").default
+local function FormLabel(props)
+	local _binding = props
+	local text = _binding.text
+	local required = _binding.required
+	local hasError = _binding.hasError
+	local disabled = _binding.disabled
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useFormTextStyles({
+		hasError = hasError,
+		disabled = disabled,
+	})
+	local caption = if required == true then `{text} *` else text
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "FormLabel"
+	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.Text = caption
+	return React.createElement("textlabel", _attributes)
+end
+local default = FormLabel
+return {
+	default = default,
+}

package/out/ui/packages/formText/components/FormText.styles.d.ts

@@ -0,0 +1,5 @@
+declare const useFormTextStyles: (props: {
+    hasError?: boolean;
+    disabled?: boolean;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useFormTextStyles;

package/out/ui/packages/formText/components/FormText.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 componentStyles = _theme.componentStyles
+local createStyles = _theme.createStyles
+local useFormTextStyles = componentStyles("FormText", function(theme, _param)
+	local hasError = _param.hasError
+	if hasError == nil then
+		hasError = false
+	end
+	local disabled = _param.disabled
+	if disabled == nil then
+		disabled = false
+	end
+	local color = if disabled then theme.palette.text.disabled elseif hasError then theme.palette.status.error.main else theme.palette.text.secondary
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			TextColor3 = color,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+			TextXAlignment = Enum.TextXAlignment.Left,
+			TextWrapped = true,
+		},
+	})
+end)
+local default = useFormTextStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,4 @@
+export { default as FormLabel } from "./components/FormLabel";
+export { FormLabelProps } from "./components/FormLabel";
+export { default as FormHelperText } from "./components/FormHelperText";
+export { FormHelperTextProps } from "./components/FormHelperText";

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

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

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

@@ -5,6 +5,7 @@ export * from "./errorBoundary/index";
 export * from "./icon/index";
 export * from "./iconButton/index";
 export * from "./input/index";
+export * from "./formText/index";
 export * from "./layout/index";
 export * from "./preloader/index";
 export * from "./progressBar/index";
@@ -48,6 +49,7 @@ export * from "./snackbar/index";
 export * from "./table/index";
 export * from "./autocomplete/index";
 export * from "./fab/index";
+export * from "./speedDial/index";
 export * from "./appBar/index";
 export * from "./bottomNavigation/index";
 export * from "./alert/index";

package/out/ui/packages/init.luau

@@ -22,6 +22,9 @@ end
 for _k, _v in TS.import(script, script, "input") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "formText") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "layout") or {} do
 	exports[_k] = _v
 end
@@ -151,6 +154,9 @@ end
 for _k, _v in TS.import(script, script, "fab") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "speedDial") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "appBar") or {} do
 	exports[_k] = _v
 end

package/out/ui/packages/layout/components/Stack.d.ts

@@ -0,0 +1,12 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+import { StackAlign, StackDirection, StackJustify } from "./stackAlign";
+export interface StackProps {
+    direction?: StackDirection;
+    spacing?: number;
+    alignItems?: StackAlign;
+    justifyContent?: StackJustify;
+    children?: React.ReactNode;
+}
+declare function Stack(props: CustomizedProps<Frame, StackProps>): JSX.Element;
+export default Stack;

package/out/ui/packages/layout/components/Stack.luau

@@ -0,0 +1,49 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useStackStyles = TS.import(script, script.Parent, "Stack.styles").default
+local function Stack(props)
+	local _binding = props
+	local direction = _binding.direction
+	local spacing = _binding.spacing
+	local alignItems = _binding.alignItems
+	local justifyContent = _binding.justifyContent
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useStackStyles({
+		direction = direction,
+		spacing = spacing,
+		alignItems = alignItems,
+		justifyContent = justifyContent,
+	})
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Stack"
+	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)
+	return React.createElement("frame", _attributes, React.createElement("uilistlayout", _attributes_1), children)
+end
+local default = Stack
+return {
+	default = default,
+}

package/out/ui/packages/layout/components/Stack.styles.d.ts

@@ -0,0 +1,8 @@
+import { StackAlign, StackDirection, StackJustify } from "./stackAlign";
+declare const useStackStyles: (props: {
+    direction?: StackDirection;
+    spacing?: number;
+    alignItems?: StackAlign;
+    justifyContent?: StackJustify;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useStackStyles;

package/out/ui/packages/layout/components/Stack.styles.luau

@@ -0,0 +1,72 @@
+-- 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 _stackAlign = TS.import(script, script.Parent, "stackAlign")
+local stackAlignKey = _stackAlign.stackAlignKey
+local stackGap = _stackAlign.stackGap
+local stackIsRow = _stackAlign.stackIsRow
+local stackJustifyKey = _stackAlign.stackJustifyKey
+local stackUsesFlex = _stackAlign.stackUsesFlex
+local function horizontalAlign(key)
+	if key == "center" then
+		return Enum.HorizontalAlignment.Center
+	end
+	if key == "end" then
+		return Enum.HorizontalAlignment.Right
+	end
+	return Enum.HorizontalAlignment.Left
+end
+local function verticalAlign(key)
+	if key == "center" then
+		return Enum.VerticalAlignment.Center
+	end
+	if key == "end" then
+		return Enum.VerticalAlignment.Bottom
+	end
+	return Enum.VerticalAlignment.Top
+end
+local function mainFlex(justify)
+	if justify == "space-between" then
+		return Enum.UIFlexAlignment.SpaceBetween
+	end
+	if justify == "space-around" then
+		return Enum.UIFlexAlignment.SpaceAround
+	end
+	if justify == "space-evenly" then
+		return Enum.UIFlexAlignment.SpaceEvenly
+	end
+	return Enum.UIFlexAlignment.None
+end
+local useStackStyles = componentStyles("Stack", function(theme, _param)
+	local direction = _param.direction
+	local spacing = _param.spacing
+	local alignItems = _param.alignItems
+	local justifyContent = _param.justifyContent
+	local row = stackIsRow(direction)
+	local cross = stackAlignKey(alignItems)
+	local main = stackJustifyKey(justifyContent)
+	local flex = if stackUsesFlex(main) then mainFlex(main) else Enum.UIFlexAlignment.None
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		list = {
+			FillDirection = if row then Enum.FillDirection.Horizontal else Enum.FillDirection.Vertical,
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			Padding = UDim.new(0, theme.spacing.calc(stackGap(spacing))),
+			HorizontalAlignment = if row then horizontalAlign(main) else horizontalAlign(cross),
+			VerticalAlignment = if row then verticalAlign(cross) else verticalAlign(main),
+			HorizontalFlex = if row then flex else Enum.UIFlexAlignment.None,
+			VerticalFlex = if row then Enum.UIFlexAlignment.None else flex,
+		},
+	})
+end)
+local default = useStackStyles
+return {
+	default = default,
+}

package/out/ui/packages/layout/components/stackAlign.d.ts

@@ -0,0 +1,8 @@
+export type StackDirection = "row" | "column";
+export type StackAlign = "start" | "center" | "end";
+export type StackJustify = "start" | "center" | "end" | "space-between" | "space-around" | "space-evenly";
+export declare function stackIsRow(direction?: StackDirection): direction is "row";
+export declare function stackGap(spacing?: number): number;
+export declare function stackUsesFlex(justify?: StackJustify): justify is "space-between" | "space-around" | "space-evenly";
+export declare function stackAlignKey(align?: StackAlign): StackAlign;
+export declare function stackJustifyKey(justify?: StackJustify): StackJustify;

package/out/ui/packages/layout/components/stackAlign.luau

@@ -0,0 +1,29 @@
+-- Compiled with roblox-ts v3.0.0
+local function stackIsRow(direction)
+	return direction == "row"
+end
+local function stackGap(spacing)
+	return if spacing == nil then 1 else spacing
+end
+local function stackUsesFlex(justify)
+	return justify == "space-between" or justify == "space-around" or justify == "space-evenly"
+end
+local function stackAlignKey(align)
+	if align == "center" or align == "end" then
+		return align
+	end
+	return "start"
+end
+local function stackJustifyKey(justify)
+	if justify == "center" or justify == "end" or justify == "space-between" or justify == "space-around" or justify == "space-evenly" then
+		return justify
+	end
+	return "start"
+end
+return {
+	stackIsRow = stackIsRow,
+	stackGap = stackGap,
+	stackUsesFlex = stackUsesFlex,
+	stackAlignKey = stackAlignKey,
+	stackJustifyKey = stackJustifyKey,
+}

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

@@ -4,3 +4,6 @@ export * from "./components/Grid";
 export { default as List } from "./components/List";
 export { ListProps } from "./components/List";
 export * from "./components/List";
+export { default as Stack } from "./components/Stack";
+export { StackProps } from "./components/Stack";
+export { StackAlign, StackDirection, StackJustify } from "./components/stackAlign";

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

@@ -9,4 +9,5 @@ exports.List = TS.import(script, script, "components", "List").default
 for _k, _v in TS.import(script, script, "components", "List") or {} do
 	exports[_k] = _v
 end
+exports.Stack = TS.import(script, script, "components", "Stack").default
 return exports

package/out/ui/packages/menu/components/Menu.d.ts

@@ -1,3 +1,4 @@
+import React from "@rbxts/react";
 export interface MenuItem {
     id: string;
     text: string;
@@ -9,6 +10,8 @@ export interface MenuProps {
     items: MenuItem[];
     onSelect: (id: string) => void;
     onClose: () => void;
+    emptyText?: string;
+    empty?: React.Element;
 }
 declare function Menu(props: MenuProps): JSX.Element | undefined;
 export default Menu;