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

package/out/ui/packages/alert/components/Alert.luau

@@ -13,8 +13,10 @@ local function Alert(props)
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
+	local dismissible = onClose ~= nil
 	local styles = useAlertStyles({
 		severity = severity,
+		dismissible = dismissible,
 	})
 	local _attributes = {}
 	local _condition = id
@@ -45,45 +47,50 @@ local function Alert(props)
 	local _attributes_3 = table.clone(styles.stroke)
 	setmetatable(_attributes_3, nil)
 	local _exp_2 = React.createElement("uistroke", _attributes_3)
-	local _attributes_4 = table.clone(styles.layout)
-	setmetatable(_attributes_4, nil)
-	local _exp_3 = React.createElement("uilistlayout", _attributes_4)
-	local _condition_1 = title ~= nil and title ~= ""
+	local _condition_1 = dismissible
 	if _condition_1 then
-		local _attributes_5 = {
-			key = "Title",
+		local _attributes_4 = {
+			key = "Close",
 		}
-		for _k, _v in styles.title do
-			_attributes_5[_k] = _v
+		for _k, _v in styles.close do
+			_attributes_4[_k] = _v
 		end
-		_attributes_5.Text = title
-		_condition_1 = React.createElement("textlabel", _attributes_5)
+		_attributes_4.Image = tostring(Icons.Close)
+		_attributes_4.Event = {
+			Activated = function()
+				return onClose()
+			end,
+		}
+		_condition_1 = (React.createElement("imagebutton", _attributes_4))
 	end
-	local _attributes_5 = {
-		key = "Message",
+	local _attributes_4 = {
+		key = "Body",
 	}
-	for _k, _v in styles.message do
-		_attributes_5[_k] = _v
+	for _k, _v in styles.body do
+		_attributes_4[_k] = _v
 	end
-	_attributes_5.Text = message
-	local _exp_4 = React.createElement("textlabel", _attributes_5)
-	local _condition_2 = onClose ~= nil
+	local _attributes_5 = table.clone(styles.layout)
+	setmetatable(_attributes_5, nil)
+	local _exp_3 = React.createElement("uilistlayout", _attributes_5)
+	local _condition_2 = title ~= nil and title ~= ""
 	if _condition_2 then
 		local _attributes_6 = {
-			key = "Close",
+			key = "Title",
 		}
-		for _k, _v in styles.close do
+		for _k, _v in styles.title do
 			_attributes_6[_k] = _v
 		end
-		_attributes_6.Image = tostring(Icons.Close)
-		_attributes_6.Event = {
-			Activated = function()
-				return onClose()
-			end,
-		}
-		_condition_2 = (React.createElement("imagebutton", _attributes_6))
+		_attributes_6.Text = title
+		_condition_2 = React.createElement("textlabel", _attributes_6)
+	end
+	local _attributes_6 = {
+		key = "Message",
+	}
+	for _k, _v in styles.message do
+		_attributes_6[_k] = _v
 	end
-	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _exp_3, _condition_1, _exp_4, _condition_2)
+	_attributes_6.Text = message
+	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, _condition_1, React.createElement("frame", _attributes_4, _exp_3, _condition_2, React.createElement("textlabel", _attributes_6)))
 end
 local default = Alert
 return {

package/out/ui/packages/alert/components/Alert.styles.d.ts

@@ -1,5 +1,6 @@
 import { AlertSeverity } from "./alertTone";
 declare const useAlertStyles: (props: {
     severity?: AlertSeverity;
+    dismissible?: boolean;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useAlertStyles;

package/out/ui/packages/alert/components/Alert.styles.luau

@@ -6,7 +6,9 @@ local createStyles = _theme.createStyles
 local alertSeverity = TS.import(script, script.Parent, "alertTone").alertSeverity
 local useAlertStyles = componentStyles("Alert", function(theme, _param)
 	local severity = _param.severity
+	local dismissible = _param.dismissible
 	local tone = theme.palette.status[alertSeverity(severity)]
+	local closeSize = theme.spacing.calc(2)
 	local _object = {
 		root = {
 			AutomaticSize = Enum.AutomaticSize.Y,
@@ -29,6 +31,12 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 			Transparency = 0,
 			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 		},
+		body = {
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, if dismissible == true then -(closeSize + theme.padding.calc(1)) else 0, 0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
 		layout = {
 			FillDirection = Enum.FillDirection.Vertical,
 			HorizontalAlignment = Enum.HorizontalAlignment.Left,
@@ -68,8 +76,8 @@ local useAlertStyles = componentStyles("Alert", function(theme, _param)
 	_object_1.LayoutOrder = 2
 	_object[_left] = _object_1
 	_object.close = {
-		Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
-		Position = UDim2.new(1, -theme.padding.calc(1), 0, theme.padding.calc(1)),
+		Size = UDim2.fromOffset(closeSize, closeSize),
+		Position = UDim2.new(1, 0, 0, 0),
 		AnchorPoint = Vector2.new(1, 0),
 		BackgroundTransparency = 1,
 		BorderSizePixel = 0,

package/out/ui/packages/backdrop/components/Backdrop.d.ts

@@ -0,0 +1,10 @@
+import React from "@rbxts/react";
+import { CustomizedProps } from "../../../../theme/index";
+export interface BackdropProps {
+    open?: boolean;
+    invisible?: boolean;
+    onClick?: () => void;
+    children?: React.ReactNode;
+}
+declare function Backdrop(props: CustomizedProps<TextButton, BackdropProps>): JSX.Element | undefined;
+export default Backdrop;

package/out/ui/packages/backdrop/components/Backdrop.luau

@@ -0,0 +1,58 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useBackdropStyles = TS.import(script, script.Parent, "Backdrop.styles").default
+local function Backdrop(props)
+	local _binding = props
+	local open = _binding.open
+	if open == nil then
+		open = true
+	end
+	local invisible = _binding.invisible
+	local onClick = _binding.onClick
+	local children = _binding.children
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useBackdropStyles({
+		invisible = invisible,
+	})
+	if open ~= true then
+		return nil
+	end
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "Backdrop"
+	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.Event = {
+		Activated = function()
+			local _result = onClick
+			if _result ~= nil then
+				_result = _result()
+			end
+			return _result
+		end,
+	}
+	return React.createElement("textbutton", _attributes, children)
+end
+local default = Backdrop
+return {
+	default = default,
+}

package/out/ui/packages/backdrop/components/Backdrop.styles.d.ts

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

package/out/ui/packages/backdrop/components/Backdrop.styles.luau

@@ -0,0 +1,24 @@
+-- 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 useBackdropStyles = componentStyles("Backdrop", function(theme, _param)
+	local invisible = _param.invisible
+	return createStyles({
+		root = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundColor3 = theme.palette.backdrop,
+			BackgroundTransparency = if invisible == true then 1 else 0.45,
+			BorderSizePixel = 0,
+			Text = "",
+			AutoButtonColor = false,
+			Selectable = false,
+			ZIndex = 30000,
+		},
+	})
+end)
+local default = useBackdropStyles
+return {
+	default = default,
+}

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

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

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

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

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

@@ -4,6 +4,7 @@ local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "the
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
 local useBadgeStyles = componentStyles("Badge", function(theme)
+	local diameter = theme.spacing.calc(2) + theme.padding.calc(1)
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -14,13 +15,15 @@ local useBadgeStyles = componentStyles("Badge", function(theme)
 		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)),
+			AutomaticSize = Enum.AutomaticSize.X,
+			Size = UDim2.fromOffset(diameter, diameter),
 			BackgroundColor3 = theme.palette.status.error.main,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.caption,
 			TextColor3 = theme.palette.text.inverse,
+			TextXAlignment = Enum.TextXAlignment.Center,
+			TextYAlignment = Enum.TextYAlignment.Center,
 			ZIndex = 2,
 		},
 		padding = {
@@ -28,7 +31,7 @@ local useBadgeStyles = componentStyles("Badge", function(theme)
 			PaddingRight = UDim.new(0, theme.padding.calc(0.5)),
 		},
 		corner = {
-			CornerRadius = UDim.new(1, 0),
+			CornerRadius = UDim.new(0.5, 0),
 		},
 	})
 end)

package/out/ui/packages/checkbox/components/checkboxLook.d.ts

@@ -2,4 +2,4 @@ export type CheckboxPointer = "rest" | "hover" | "press" | "focus";
 export declare function checkboxMark(value: boolean, mixed?: boolean): "" | "–" | "✓";
 export declare function checkboxPointer(hovering: boolean, pressed: boolean, focused: boolean): CheckboxPointer;
 export declare function checkboxBoxTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 1 | 0 | 0.7 | 0.55 | 0.85;
-export declare function checkboxStrokeTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 0 | 0.25 | 0.55 | 0.45 | 0.2;
+export declare function checkboxStrokeTransparency(filled: boolean, disabled: boolean, pointer: CheckboxPointer): 0 | 0.25 | 0.45 | 0.55 | 0.2;

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

@@ -1,8 +1,9 @@
-import { CustomizedProps } from "../../../../theme/index";
+import { ControlSize, CustomizedProps } from "../../../../theme/index";
 export interface ChipProps {
     label: string;
     selected?: boolean;
     disabled?: boolean;
+    size?: ControlSize;
     onActivated?: () => void;
     onDelete?: () => void;
 }

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

@@ -8,6 +8,7 @@ local function Chip(props)
 	local label = _binding.label
 	local selected = _binding.selected
 	local disabled = _binding.disabled
+	local size = _binding.size
 	local onActivated = _binding.onActivated
 	local onDelete = _binding.onDelete
 	local className = _binding.className
@@ -19,6 +20,7 @@ local function Chip(props)
 		selected = selected,
 		disabled = disabled,
 		deletable = deletable,
+		size = size,
 	})
 	local _attributes = {}
 	local _condition = id

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

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

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

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
 local componentStyles = _theme.componentStyles
+local controlMetrics = _theme.controlMetrics
 local createStyles = _theme.createStyles
 local useChipStyles = componentStyles("Chip", function(theme, _param)
 	local selected = _param.selected
@@ -16,6 +17,11 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 	if deletable == nil then
 		deletable = false
 	end
+	local size = _param.size
+	local metrics = controlMetrics(theme.density, size)
+	local padY = if size == "small" then 0.25 elseif size == "large" then 0.75 else 0.5
+	local padX = if size == "small" then 1 elseif size == "large" then 2 else 1.5
+	local deletePx = metrics.icon
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -27,13 +33,13 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			Selectable = not disabled,
 			TextColor3 = if disabled then theme.palette.text.disabled else theme.palette.text.primary,
 			Font = theme.typography.fontFamilies.default,
-			TextSize = theme.typography.fontSizes.body,
+			TextSize = metrics.font,
 		},
 		padding = {
-			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(if deletable then 0.5 else 1.5)),
+			PaddingTop = UDim.new(0, theme.padding.calc(padY)),
+			PaddingBottom = UDim.new(0, theme.padding.calc(padY)),
+			PaddingLeft = UDim.new(0, theme.padding.calc(padX)),
+			PaddingRight = UDim.new(0, theme.padding.calc(if deletable then 0.5 else padX)),
 		},
 		corner = {
 			CornerRadius = UDim.new(theme.shape.pillScale, 0),
@@ -56,11 +62,11 @@ local useChipStyles = componentStyles("Chip", function(theme, _param)
 			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,
+			TextSize = metrics.font,
 			LayoutOrder = 1,
 		},
 		delete = {
-			Size = UDim2.fromOffset(theme.spacing.calc(2), theme.spacing.calc(2)),
+			Size = UDim2.fromOffset(deletePx, deletePx),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,

package/out/ui/packages/circularProgress/components/CircularProgress.luau

@@ -10,6 +10,7 @@ local _motion = TS.import(script, script.Parent.Parent.Parent, "motion")
 local arcKeys = _motion.arcKeys
 local loopProperty = _motion.loopProperty
 local progressSpin = _motion.progressSpin
+local spinArcKeys = _motion.spinArcKeys
 local function CircularProgress(props)
 	local _binding = props
 	local value = _binding.value
@@ -38,7 +39,17 @@ local function CircularProgress(props)
 	local shown = if indeterminate then (if motion == "spin" then nil else 0.25) else value
 	local _result
 	if shown == nil then
-		_result = NumberSequence.new({ NumberSequenceKeypoint.new(0, 1), NumberSequenceKeypoint.new(0.35, 1), NumberSequenceKeypoint.new(0.5, 0), NumberSequenceKeypoint.new(0.65, 1), NumberSequenceKeypoint.new(1, 1) })
+		local _exp = spinArcKeys()
+		-- ▼ ReadonlyArray.map ▼
+		local _newValue = table.create(#_exp)
+		local _callback = function(key)
+			return NumberSequenceKeypoint.new(key.time, key.transparency)
+		end
+		for _k, _v in _exp do
+			_newValue[_k] = _callback(_v, _k - 1, _exp)
+		end
+		-- ▲ ReadonlyArray.map ▲
+		_result = NumberSequence.new(_newValue)
 	else
 		local _exp = arcKeys(shown)
 		-- ▼ ReadonlyArray.map ▼
@@ -91,7 +102,7 @@ local function CircularProgress(props)
 	}), React.createElement("uistroke", {
 		Color = tint,
 		Thickness = thickness,
-		Transparency = if disabled then 0.75 else 0.7,
+		Transparency = if disabled then 0.85 else 0.82,
 	}), React.createElement("uistroke", {
 		Color = tint,
 		Thickness = thickness,

package/out/ui/packages/dialog/components/Dialog.d.ts

@@ -2,7 +2,7 @@ import React from "@rbxts/react";
 export interface DialogProps {
     host?: Instance;
     open: boolean;
-    title: string;
+    title?: string;
     onClose: () => void;
     children?: React.ReactNode;
     actions?: React.ReactNode;

package/out/ui/packages/dialog/components/Dialog.luau

@@ -12,6 +12,8 @@ local function Dialog(props)
 	local children = _binding.children
 	local actions = _binding.actions
 	local styles = useDialogStyles()
+	local hasTitle = title ~= nil and title ~= ""
+	local hasActions = actions ~= nil
 	local _attributes = {
 		key = "Column",
 	}
@@ -21,34 +23,41 @@ local function Dialog(props)
 	local _attributes_1 = table.clone(styles.columnList)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uilistlayout", _attributes_1)
-	local _attributes_2 = {
-		key = "Title",
-	}
-	for _k, _v in styles.title do
-		_attributes_2[_k] = _v
+	local _condition = hasTitle
+	if _condition then
+		local _attributes_2 = {
+			key = "Title",
+		}
+		for _k, _v in styles.title do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = title
+		_condition = React.createElement("textlabel", _attributes_2)
 	end
-	_attributes_2.Text = title
-	local _exp_1 = React.createElement("textlabel", _attributes_2)
-	local _attributes_3 = {
+	local _attributes_2 = {
 		key = "Body",
 	}
 	for _k, _v in styles.body do
-		_attributes_3[_k] = _v
+		_attributes_2[_k] = _v
 	end
-	local _exp_2 = React.createElement("frame", _attributes_3, children)
-	local _attributes_4 = {
-		key = "Actions",
-	}
-	for _k, _v in styles.actions do
-		_attributes_4[_k] = _v
+	local _exp_1 = React.createElement("frame", _attributes_2, children)
+	local _condition_1 = hasActions
+	if _condition_1 then
+		local _attributes_3 = {
+			key = "Actions",
+		}
+		for _k, _v in styles.actions do
+			_attributes_3[_k] = _v
+		end
+		local _attributes_4 = table.clone(styles.actionList)
+		setmetatable(_attributes_4, nil)
+		_condition_1 = (React.createElement("frame", _attributes_3, React.createElement("uilistlayout", _attributes_4), actions))
 	end
-	local _attributes_5 = table.clone(styles.actionList)
-	setmetatable(_attributes_5, nil)
 	return React.createElement(Modal, {
 		host = host,
 		open = open,
 		onClose = onClose,
-	}, React.createElement("frame", _attributes, _exp, _exp_1, _exp_2, React.createElement("frame", _attributes_4, React.createElement("uilistlayout", _attributes_5), actions)))
+	}, React.createElement("frame", _attributes, _exp, _condition, _exp_1, _condition_1))
 end
 local default = Dialog
 return {

package/out/ui/packages/imageList/components/ImageList.d.ts

@@ -0,0 +1,14 @@
+import { CustomizedProps } from "../../../../theme/index";
+export interface ImageListItem {
+    src: string;
+    title?: string;
+}
+export interface ImageListProps {
+    items: ImageListItem[];
+    cols?: number;
+    gap?: number;
+    itemSize?: number;
+    onItemActivated?: (index: number) => void;
+}
+declare function ImageList(props: CustomizedProps<Frame, ImageListProps>): JSX.Element;
+export default ImageList;

package/out/ui/packages/imageList/components/ImageList.luau

@@ -0,0 +1,84 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useImageListStyles = TS.import(script, script.Parent, "ImageList.styles").default
+local function ImageList(props)
+	local _binding = props
+	local items = _binding.items
+	local cols = _binding.cols
+	local gap = _binding.gap
+	local itemSize = _binding.itemSize
+	local onItemActivated = _binding.onItemActivated
+	local className = _binding.className
+	local sx = _binding.sx
+	local id = _binding.id
+	local ref = _binding.ref
+	local styles = useImageListStyles({
+		cols = cols,
+		gap = gap,
+		itemSize = itemSize,
+	})
+	local _attributes = {}
+	local _condition = id
+	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+		_condition = "ImageList"
+	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.grid)
+	setmetatable(_attributes_1, nil)
+	local _exp = React.createElement("uigridlayout", _attributes_1)
+	-- ▼ ReadonlyArray.map ▼
+	local _newValue = table.create(#items)
+	local _callback = function(item, index)
+		local _attributes_2 = {
+			key = `Tile-{index}`,
+		}
+		for _k, _v in styles.tile do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.LayoutOrder = index
+		_attributes_2.Event = {
+			Activated = function()
+				local _result = onItemActivated
+				if _result ~= nil then
+					_result = _result(index)
+				end
+				return _result
+			end,
+		}
+		local _attributes_3 = table.clone(styles.corner)
+		setmetatable(_attributes_3, nil)
+		local _exp_1 = React.createElement("uicorner", _attributes_3)
+		local _attributes_4 = {
+			key = "Image",
+		}
+		for _k, _v in styles.image do
+			_attributes_4[_k] = _v
+		end
+		_attributes_4.Image = item.src
+		return React.createElement("imagebutton", _attributes_2, _exp_1, React.createElement("imagelabel", _attributes_4))
+	end
+	for _k, _v in items do
+		_newValue[_k] = _callback(_v, _k - 1, items)
+	end
+	-- ▲ ReadonlyArray.map ▲
+	return React.createElement("frame", _attributes, _exp, _newValue)
+end
+local default = ImageList
+return {
+	default = default,
+}

package/out/ui/packages/imageList/components/ImageList.styles.d.ts

@@ -0,0 +1,6 @@
+declare const useImageListStyles: (props: {
+    cols?: number;
+    gap?: number;
+    itemSize?: number;
+}) => import("../../../../theme/index").ClassNameMap<string>;
+export default useImageListStyles;

package/out/ui/packages/imageList/components/ImageList.styles.luau

@@ -0,0 +1,54 @@
+-- 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 _imageListLayout = TS.import(script, script.Parent, "imageListLayout")
+local imageListCols = _imageListLayout.imageListCols
+local imageListGap = _imageListLayout.imageListGap
+local imageListItemSize = _imageListLayout.imageListItemSize
+local useImageListStyles = componentStyles("ImageList", function(theme, _param)
+	local cols = _param.cols
+	local gap = _param.gap
+	local itemSize = _param.itemSize
+	local size = imageListItemSize(itemSize)
+	local pad = theme.spacing.calc(imageListGap(gap))
+	return createStyles({
+		root = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		grid = {
+			CellSize = UDim2.fromOffset(size, size),
+			CellPadding = UDim2.fromOffset(pad, pad),
+			FillDirection = Enum.FillDirection.Horizontal,
+			FillDirectionMaxCells = imageListCols(cols),
+			SortOrder = Enum.SortOrder.LayoutOrder,
+			StartCorner = Enum.StartCorner.TopLeft,
+			HorizontalAlignment = Enum.HorizontalAlignment.Left,
+			VerticalAlignment = Enum.VerticalAlignment.Top,
+		},
+		tile = {
+			Size = UDim2.fromOffset(size, size),
+			BackgroundColor3 = theme.palette.surface.input,
+			BorderSizePixel = 0,
+			AutoButtonColor = false,
+			Text = "",
+		},
+		corner = {
+			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+		},
+		image = {
+			Size = UDim2.fromScale(1, 1),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ScaleType = Enum.ScaleType.Crop,
+		},
+	})
+end)
+local default = useImageListStyles
+return {
+	default = default,
+}

package/out/ui/packages/imageList/components/imageListLayout.d.ts

@@ -0,0 +1,3 @@
+export declare function imageListCols(cols?: number): number;
+export declare function imageListGap(gap?: number): number;
+export declare function imageListItemSize(itemSize?: number): number;