@rbxts/uiblox 0.1.30 → 0.1.31

package/out/theme/types/types.d.ts

@@ -3,6 +3,7 @@ import { WriteableStyle } from "../interfaces/index";
 export interface CommonProps<T extends Instance> extends PropsWithChildren {
     className?: WriteableStyle<T>;
     component?: T;
+    key?: string;
 }
 export type BaseDefaultProps<T extends Instance, P> = CommonProps<T> & P;
 export type BaseCustomizedProps<T extends Instance, P> = BaseDefaultProps<T, P>;

package/out/ui/index.d.ts

@@ -14,6 +14,10 @@ export { InputProps } from "./packages/index";
 export { InputColor } from "./packages/index";
 export { InputMargin } from "./packages/index";
 export { InputVariant } from "./packages/index";
+export { Grid } from "./packages/index";
+export { GridProps } from "./packages/index";
+export { List } from "./packages/index";
+export { ListProps } from "./packages/index";
 export { Preloader } from "./packages/index";
 export { PreloaderProps } from "./packages/index";
 export { PreloaderAssets as Assets } from "./packages/index";

package/out/ui/init.luau

@@ -12,6 +12,8 @@ exports.ErrorBoundary = TS.import(script, script, "packages").ErrorBoundary
 exports.Icon = TS.import(script, script, "packages").Icon
 exports.IconButton = TS.import(script, script, "packages").IconButton
 exports.Input = TS.import(script, script, "packages").Input
+exports.Grid = TS.import(script, script, "packages").Grid
+exports.List = TS.import(script, script, "packages").List
 exports.Preloader = TS.import(script, script, "packages").Preloader
 exports.ProgressBar = TS.import(script, script, "packages").ProgressBar
 exports.Shadow = TS.import(script, script, "packages").Shadow

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

@@ -3,6 +3,7 @@ export * from "./errorBoundary/index";
 export * from "./icon/index";
 export * from "./iconButton/index";
 export * from "./input/index";
+export * from "./layout/index";
 export * from "./preloader/index";
 export * from "./progressBar/index";
 export * from "./shadow/index";

package/out/ui/packages/init.luau

@@ -16,6 +16,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, "layout") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "preloader") or {} do
 	exports[_k] = _v
 end

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

@@ -0,0 +1,13 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface GridProps {
+    cellPadding?: UDim;
+    cellSize?: UDim2;
+    fillDirection?: Enum.FillDirection;
+    fillDirectionMaxCells?: number;
+    sortOrder?: Enum.SortOrder;
+    startCorner: Enum.StartCorner;
+    horizontalAlignment?: Enum.HorizontalAlignment;
+    veritcalAlignment?: Enum.VerticalAlignment;
+}
+declare function Grid(props: CustomizedProps<Frame, GridProps>): JSX.Element;
+export default Grid;

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

@@ -0,0 +1,93 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local makeStyles = _theme.makeStyles
+local createStyles = _theme.createStyles
+local useGridStyles = makeStyles(function(_, props)
+	return createStyles({
+		baseGrid = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 0,
+			BorderSizePixel = 0,
+		},
+		baseLayout = {
+			CellPadding = props.cellPadding,
+			CellSize = props.cellSize,
+			FillDirection = props.fillDirection,
+			FillDirectionMaxCells = props.fillDirectionMaxCells,
+			SortOrder = props.sortOrder,
+			StartCorner = props.startCorner,
+			HorizontalAlignment = props.horizontalAlignment,
+			VerticalAlignment = props.veritcalAlignment,
+		},
+	})
+end)
+local function Grid(props)
+	local _binding = props
+	local cellPadding = _binding.cellPadding
+	if cellPadding == nil then
+		cellPadding = UDim.new(0, 0)
+	end
+	local cellSize = _binding.cellSize
+	if cellSize == nil then
+		cellSize = UDim2.fromOffset(100, 100)
+	end
+	local fillDirection = _binding.fillDirection
+	if fillDirection == nil then
+		fillDirection = Enum.FillDirection.Horizontal
+	end
+	local fillDirectionMaxCells = _binding.fillDirectionMaxCells
+	if fillDirectionMaxCells == nil then
+		fillDirectionMaxCells = 0
+	end
+	local sortOrder = _binding.sortOrder
+	if sortOrder == nil then
+		sortOrder = Enum.SortOrder.LayoutOrder
+	end
+	local startCorner = _binding.startCorner
+	if startCorner == nil then
+		startCorner = Enum.StartCorner.TopLeft
+	end
+	local horizontalAlignment = _binding.horizontalAlignment
+	if horizontalAlignment == nil then
+		horizontalAlignment = Enum.HorizontalAlignment.Left
+	end
+	local veritcalAlignment = _binding.veritcalAlignment
+	if veritcalAlignment == nil then
+		veritcalAlignment = Enum.VerticalAlignment.Top
+	end
+	local className = _binding.className
+	local children = _binding.children
+	local _binding_1 = useGridStyles({
+		cellPadding = cellPadding,
+		cellSize = cellSize,
+		fillDirection = fillDirection,
+		fillDirectionMaxCells = fillDirectionMaxCells,
+		sortOrder = sortOrder,
+		startCorner = startCorner,
+		horizontalAlignment = horizontalAlignment,
+		veritcalAlignment = veritcalAlignment,
+	})
+	local baseGrid = _binding_1.baseGrid
+	local baseLayout = _binding_1.baseLayout
+	local _attributes = {
+		key = "grid",
+	}
+	for _k, _v in baseGrid do
+		_attributes[_k] = _v
+	end
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = table.clone(baseLayout)
+	setmetatable(_attributes_1, nil)
+	return React.createElement("frame", _attributes, React.createElement("uigridlayout", _attributes_1), children)
+end
+local default = Grid
+return {
+	default = default,
+}

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

@@ -0,0 +1,13 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface ListProps {
+    padding?: UDim;
+    fillDirection?: Enum.FillDirection;
+    sortOrder?: Enum.SortOrder;
+    wrap?: "wrap" | "no-wrap";
+    horizontalAlignment?: Enum.HorizontalAlignment;
+    horizontalFlex?: Enum.UIFlexAlignment;
+    veritcalAlignment?: Enum.VerticalAlignment;
+    verticalFlex?: Enum.UIFlexAlignment;
+}
+declare function List(props: CustomizedProps<Frame, ListProps>): JSX.Element;
+export default List;

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

@@ -0,0 +1,89 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local makeStyles = _theme.makeStyles
+local createStyles = _theme.createStyles
+local useListStyles = makeStyles(function(_, props)
+	return createStyles({
+		baseList = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 0,
+			BorderSizePixel = 0,
+		},
+		baseLayout = {
+			Padding = props.padding,
+			FillDirection = props.fillDirection,
+			SortOrder = props.sortOrder,
+			Wraps = props.wrap == "wrap",
+			HorizontalAlignment = props.horizontalAlignment,
+			HorizontalFlex = props.horizontalFlex,
+			VerticalAlignment = props.veritcalAlignment,
+			VerticalFlex = props.verticalFlex,
+		},
+	})
+end)
+local function List(props)
+	local _binding = props
+	local padding = _binding.padding
+	if padding == nil then
+		padding = UDim.new(0, 0)
+	end
+	local fillDirection = _binding.fillDirection
+	if fillDirection == nil then
+		fillDirection = Enum.FillDirection.Horizontal
+	end
+	local sortOrder = _binding.sortOrder
+	if sortOrder == nil then
+		sortOrder = Enum.SortOrder.LayoutOrder
+	end
+	local wrap = _binding.wrap
+	if wrap == nil then
+		wrap = "wrap"
+	end
+	local horizontalAlignment = _binding.horizontalAlignment
+	if horizontalAlignment == nil then
+		horizontalAlignment = Enum.HorizontalAlignment.Left
+	end
+	local horizontalFlex = _binding.horizontalFlex
+	if horizontalFlex == nil then
+		horizontalFlex = Enum.UIFlexAlignment.None
+	end
+	local veritcalAlignment = _binding.veritcalAlignment
+	if veritcalAlignment == nil then
+		veritcalAlignment = Enum.VerticalAlignment.Top
+	end
+	local verticalFlex = _binding.verticalFlex
+	if verticalFlex == nil then
+		verticalFlex = Enum.UIFlexAlignment.None
+	end
+	local className = _binding.className
+	local children = _binding.children
+	local _binding_1 = useListStyles({
+		padding = padding,
+		fillDirection = fillDirection,
+		sortOrder = sortOrder,
+		wrap = wrap,
+		horizontalAlignment = horizontalAlignment,
+		horizontalFlex = horizontalFlex,
+		veritcalAlignment = veritcalAlignment,
+		verticalFlex = verticalFlex,
+	})
+	local baseList = _binding_1.baseList
+	local baseLayout = _binding_1.baseLayout
+	local _attributes = table.clone(baseList)
+	setmetatable(_attributes, nil)
+	if className then
+		for _k, _v in className do
+			_attributes[_k] = _v
+		end
+	end
+	local _attributes_1 = table.clone(baseLayout)
+	setmetatable(_attributes_1, nil)
+	return React.createElement("frame", _attributes, React.createElement("uilistlayout", _attributes_1), children)
+end
+local default = List
+return {
+	default = default,
+}

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

@@ -0,0 +1,6 @@
+export { default as Grid } from "./components/Grid";
+export { GridProps } from "./components/Grid";
+export * from "./components/Grid";
+export { default as List } from "./components/List";
+export { ListProps } from "./components/List";
+export * from "./components/List";

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

@@ -0,0 +1,12 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Grid = TS.import(script, script, "components", "Grid").default
+for _k, _v in TS.import(script, script, "components", "Grid") or {} do
+	exports[_k] = _v
+end
+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
+return exports

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@rbxts/uiblox",
-	"version": "0.1.30",
+	"version": "0.1.31",
 	"description": "UI Library and theming for roblox-ts projects",
 	"main": "out/init.lua",
 	"scripts": {