@rbxts/uiblox 0.2.0-alpha.36 → 0.2.0-alpha.38

package/out/ui/packages/iconButton/components/IconButton.styles.luau

@@ -3,35 +3,12 @@ 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 iconButtonScale = TS.import(script, script.Parent, "iconButtonBox").iconButtonScale
 local useIconButtonStyles = componentStyles("IconButton", function(theme, props)
-	local getIconSize = function(props)
-		local _binding = props
-		local size = _binding.size
-		repeat
-			if size == "xxs" then
-				return UDim2.new(0, theme.spacing.calc(1), 0, theme.spacing.calc(1))
-			end
-			if size == "xs" then
-				return UDim2.new(0, theme.spacing.calc(1.5), 0, theme.spacing.calc(1.5))
-			end
-			if size == "sm" then
-				return UDim2.new(0, theme.spacing.calc(2), 0, theme.spacing.calc(2))
-			end
-			if size == "md" then
-				return UDim2.new(0, theme.spacing.calc(3), 0, theme.spacing.calc(3))
-			end
-			if size == "lg" then
-				return UDim2.new(0, theme.spacing.calc(4), 0, theme.spacing.calc(4))
-			end
-			if size == "xl" then
-				return UDim2.new(0, theme.spacing.calc(5), 0, theme.spacing.calc(5))
-			end
-			return UDim2.new(0, theme.spacing.calc(2), 0, theme.spacing.calc(2))
-		until true
-	end
+	local extent = theme.spacing.calc(iconButtonScale(props.size))
 	return createStyles({
 		container = {
-			Size = getIconSize(props),
+			Size = UDim2.new(0, extent, 0, extent),
 			BackgroundColor3 = theme.palette.primary.main,
 			ImageColor3 = theme.palette.text.primary,
 			BackgroundTransparency = 1,
@@ -40,7 +17,7 @@ local useIconButtonStyles = componentStyles("IconButton", function(theme, props)
 			ZIndex = 12000,
 		},
 		corner = {
-			CornerRadius = UDim.new(0, theme.shape.borderRadius),
+			CornerRadius = UDim.new(theme.shape.pillScale / 2, 0),
 		},
 	})
 end)

package/out/ui/packages/iconButton/components/iconButtonBox.d.ts

@@ -0,0 +1,11 @@
+export declare function iconButtonScale(size?: string): 4 | 1 | 2 | 3 | 5 | 1.5;
+/** Glyph box inside the button. A fixed 16px mark overflows the small sizes and looks lost in the large ones. */
+export declare function iconGlyphExtent(button: number): number;
+export type IconButtonFace = "clear" | "hover" | "pressed" | "selected";
+export declare function iconButtonFace(input: {
+    disabled: boolean;
+    loading: boolean;
+    selected: boolean;
+    hover: boolean;
+    down: boolean;
+}): IconButtonFace;

package/out/ui/packages/iconButton/components/iconButtonBox.luau

@@ -0,0 +1,48 @@
+-- Compiled with roblox-ts v3.0.0
+local function iconButtonScale(size)
+	repeat
+		if size == "xxs" then
+			return 1
+		end
+		if size == "xs" then
+			return 1.5
+		end
+		if size == "sm" then
+			return 2
+		end
+		if size == "md" then
+			return 3
+		end
+		if size == "lg" then
+			return 4
+		end
+		if size == "xl" then
+			return 5
+		end
+		return 2
+	until true
+end
+--* Glyph box inside the button. A fixed 16px mark overflows the small sizes and looks lost in the large ones. 
+local function iconGlyphExtent(button)
+	return math.max(4, math.floor(button * 0.62))
+end
+local function iconButtonFace(input)
+	if input.disabled or input.loading then
+		return "clear"
+	end
+	if input.down then
+		return "pressed"
+	end
+	if input.selected then
+		return "selected"
+	end
+	if input.hover then
+		return "hover"
+	end
+	return "clear"
+end
+return {
+	iconButtonScale = iconButtonScale,
+	iconGlyphExtent = iconGlyphExtent,
+	iconButtonFace = iconButtonFace,
+}

package/out/ui/packages/iconButton/components/transportGlyph.d.ts

@@ -0,0 +1,10 @@
+export type TransportGlyph = "play" | "pause" | "previous" | "next";
+export declare function isTransportGlyph(name: string): name is TransportGlyph;
+export interface GlyphRect {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+}
+/** Play, pause, previous, and next as a few rectangles. Not an icon font. */
+export declare function transportGlyph(name: TransportGlyph, size?: number): GlyphRect[];

package/out/ui/packages/iconButton/components/transportGlyph.luau

@@ -0,0 +1,77 @@
+-- Compiled with roblox-ts v3.0.0
+local function isTransportGlyph(name)
+	return name == "play" or name == "pause" or name == "previous" or name == "next"
+end
+local function wedge(size, pointRight)
+	local steps = 6
+	local h = math.max(1, math.floor(size / steps))
+	local mid = (steps - 1) / 2
+	local parts = {}
+	for i = 0, steps - 1 do
+		local reach = 1 - math.abs(i - mid) / mid
+		local w = math.max(1, math.floor(reach * size))
+		local x = if pointRight then 0 else size - w
+		local _arg0 = {
+			x = x,
+			y = i * h,
+			w = w,
+			h = h,
+		}
+		table.insert(parts, _arg0)
+	end
+	return parts
+end
+--* Play, pause, previous, and next as a few rectangles. Not an icon font. 
+local function transportGlyph(name, size)
+	if size == nil then
+		size = 16
+	end
+	local box = math.max(4, math.floor(size))
+	if name == "pause" then
+		local bar = math.max(2, math.floor(box / 5))
+		local gap = bar
+		local span = bar * 2 + gap
+		local x0 = math.floor((box - span) / 2)
+		return { {
+			x = x0,
+			y = 0,
+			w = bar,
+			h = box,
+		}, {
+			x = x0 + bar + gap,
+			y = 0,
+			w = bar,
+			h = box,
+		} }
+	end
+	if name == "play" then
+		return wedge(box, true)
+	end
+	local bar = math.max(2, math.floor(box / 6))
+	local mark = {
+		x = if name == "previous" then 0 else box - bar,
+		y = 0,
+		w = bar,
+		h = box,
+	}
+	local inner = math.max(4, box - bar - 1)
+	local shift = if name == "previous" then bar + 1 else 0
+	local moved = {}
+	for _, part in wedge(inner, name ~= "previous") do
+		local _arg0 = {
+			x = part.x + shift,
+			y = part.y,
+			w = part.w,
+			h = part.h,
+		}
+		table.insert(moved, _arg0)
+	end
+	local _array = { mark }
+	local _length = #_array
+	table.move(moved, 1, #moved, _length + 1, _array)
+	return _array
+end
+return {
+	isTransportGlyph = isTransportGlyph,
+	transportGlyph = transportGlyph,
+}

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

@@ -2,12 +2,16 @@ import { CustomizedProps } from "../../../../theme/index";
 export interface ImageListItem {
     src: string;
     title?: string;
+    color?: Color3;
+    aspect?: number;
 }
 export interface ImageListProps {
     items: ImageListItem[];
     cols?: number;
     gap?: number;
     itemSize?: number;
+    aspect?: number;
+    selected?: ReadonlyArray<number>;
     onItemActivated?: (index: number) => void;
 }
 declare function ImageList(props: CustomizedProps<Frame, ImageListProps>): JSX.Element;

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

@@ -2,7 +2,11 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
-local imageListTitle = TS.import(script, script.Parent, "imageListLayout").imageListTitle
+local _imageListLayout = TS.import(script, script.Parent, "imageListLayout")
+local imageListCell = _imageListLayout.imageListCell
+local imageListItemAspect = _imageListLayout.imageListItemAspect
+local imageListSelected = _imageListLayout.imageListSelected
+local imageListTitle = _imageListLayout.imageListTitle
 local useImageListStyles = TS.import(script, script.Parent, "ImageList.styles").default
 local function ImageList(props)
 	local _binding = props
@@ -10,6 +14,8 @@ local function ImageList(props)
 	local cols = _binding.cols
 	local gap = _binding.gap
 	local itemSize = _binding.itemSize
+	local aspect = _binding.aspect
+	local selected = _binding.selected
 	local onItemActivated = _binding.onItemActivated
 	local className = _binding.className
 	local sx = _binding.sx
@@ -19,6 +25,7 @@ local function ImageList(props)
 		cols = cols,
 		gap = gap,
 		itemSize = itemSize,
+		aspect = aspect,
 	})
 	local _attributes = {
 		tag = "frame",
@@ -32,19 +39,27 @@ local function ImageList(props)
 	_attributes.base = styles.root
 	_attributes.className = className
 	_attributes.sx = sx
-	local _attributes_1 = table.clone(styles.grid)
+	local _attributes_1 = table.clone(styles.flow)
 	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uigridlayout", _attributes_1)
+	local _exp = React.createElement("uilistlayout", _attributes_1)
 	-- ▼ ReadonlyArray.map ▼
 	local _newValue = table.create(#items)
 	local _callback = function(item, index)
 		local title = imageListTitle(item.title)
+		local picked = imageListSelected(selected, index)
+		local cell = imageListCell(itemSize, imageListItemAspect(item.aspect, aspect))
 		local _attributes_2 = {
 			key = `Tile-{index}`,
 		}
 		for _k, _v in styles.tile do
 			_attributes_2[_k] = _v
 		end
+		_attributes_2.Size = UDim2.fromOffset(cell.width, cell.height)
+		for _k, _v in (if item.color ~= nil then {
+			BackgroundColor3 = item.color,
+		} else {}) do
+			_attributes_2[_k] = _v
+		end
 		_attributes_2.LayoutOrder = index
 		_attributes_2.Event = {
 			Activated = function()
@@ -58,6 +73,12 @@ local function ImageList(props)
 		local _attributes_3 = table.clone(styles.corner)
 		setmetatable(_attributes_3, nil)
 		local _exp_1 = React.createElement("uicorner", _attributes_3)
+		local _condition_1 = picked
+		if _condition_1 then
+			local _attributes_4 = table.clone(styles.selected)
+			setmetatable(_attributes_4, nil)
+			_condition_1 = React.createElement("uistroke", _attributes_4)
+		end
 		local _attributes_4 = {
 			key = "Image",
 		}
@@ -66,8 +87,8 @@ local function ImageList(props)
 		end
 		_attributes_4.Image = item.src
 		local _exp_2 = React.createElement("imagelabel", _attributes_4)
-		local _condition_1 = title ~= nil
-		if _condition_1 then
+		local _condition_2 = title ~= nil
+		if _condition_2 then
 			local _attributes_5 = {
 				key = "Title",
 			}
@@ -77,9 +98,9 @@ local function ImageList(props)
 			_attributes_5.Text = title
 			local _attributes_6 = table.clone(styles.titlePad)
 			setmetatable(_attributes_6, nil)
-			_condition_1 = (React.createElement("textlabel", _attributes_5, React.createElement("uipadding", _attributes_6)))
+			_condition_2 = (React.createElement("textlabel", _attributes_5, React.createElement("uipadding", _attributes_6)))
 		end
-		return React.createElement("imagebutton", _attributes_2, _exp_1, _exp_2, _condition_1)
+		return React.createElement("imagebutton", _attributes_2, _exp_1, _condition_1, _exp_2, _condition_2)
 	end
 	for _k, _v in items do
 		_newValue[_k] = _callback(_v, _k - 1, items)

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

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

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

@@ -5,40 +5,46 @@ local Common = _theme.Common
 local componentStyles = _theme.componentStyles
 local createStyles = _theme.createStyles
 local _imageListLayout = TS.import(script, script.Parent, "imageListLayout")
+local imageListCell = _imageListLayout.imageListCell
 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 aspect = _param.aspect
+	local columns = imageListCols(cols)
+	local cell = imageListCell(itemSize, aspect)
 	local pad = theme.spacing.calc(imageListGap(gap))
 	local bar = theme.spacing.calc(2.5)
+	local span = columns * cell.width + math.max(0, columns - 1) * pad
 	return createStyles({
 		root = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.fromOffset(span, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 		},
-		grid = {
-			CellSize = UDim2.fromOffset(size, size),
-			CellPadding = UDim2.fromOffset(pad, pad),
+		flow = {
 			FillDirection = Enum.FillDirection.Horizontal,
-			FillDirectionMaxCells = imageListCols(cols),
+			Wraps = true,
+			Padding = UDim.new(0, pad),
 			SortOrder = Enum.SortOrder.LayoutOrder,
-			StartCorner = Enum.StartCorner.TopLeft,
 			HorizontalAlignment = Enum.HorizontalAlignment.Left,
 			VerticalAlignment = Enum.VerticalAlignment.Top,
 		},
 		tile = {
-			Size = UDim2.fromOffset(size, size),
+			Size = UDim2.fromOffset(cell.width, cell.height),
 			BackgroundColor3 = theme.palette.surface.input,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
 			ClipsDescendants = true,
 		},
+		selected = {
+			Color = theme.palette.primary.main,
+			Thickness = 2,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+		},
 		corner = {
 			CornerRadius = UDim.new(0, theme.shape.borderRadius),
 		},
@@ -59,6 +65,7 @@ local useImageListStyles = componentStyles("ImageList", function(theme, _param)
 			TextColor3 = Common.White,
 			TextXAlignment = Enum.TextXAlignment.Left,
 			TextTruncate = Enum.TextTruncate.AtEnd,
+			TextWrapped = false,
 			ZIndex = 2,
 		},
 		titlePad = {

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

@@ -1,4 +1,12 @@
 export declare function imageListCols(cols?: number): number;
 export declare function imageListGap(gap?: number): number;
 export declare function imageListItemSize(itemSize?: number): number;
+export declare function imageListAspect(aspect?: number): number;
+/** Item ratio wins. The list ratio is used when the item does not set one. */
+export declare function imageListItemAspect(item?: number, list?: number): number;
+export declare function imageListCell(itemSize?: number, aspect?: number): {
+    width: number;
+    height: number;
+};
+export declare function imageListSelected(selected: ReadonlyArray<number> | undefined, index: number): boolean;
 export declare function imageListTitle(title?: string): string | undefined;

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

@@ -17,6 +17,38 @@ local function imageListItemSize(itemSize)
 	end
 	return math.floor(itemSize)
 end
+local function imageListAspect(aspect)
+	if aspect == nil or aspect <= 0 then
+		return 1
+	end
+	return aspect
+end
+--* Item ratio wins. The list ratio is used when the item does not set one. 
+local function imageListItemAspect(item, list)
+	if item ~= nil and item > 0 then
+		return item
+	end
+	return imageListAspect(list)
+end
+local function imageListCell(itemSize, aspect)
+	local width = imageListItemSize(itemSize)
+	local height = math.max(1, math.floor(width / imageListAspect(aspect)))
+	return {
+		width = width,
+		height = height,
+	}
+end
+local function imageListSelected(selected, index)
+	if selected == nil then
+		return false
+	end
+	for _, value in selected do
+		if value == index then
+			return true
+		end
+	end
+	return false
+end
 local function imageListTitle(title)
 	if title == nil or #title == 0 then
 		return nil
@@ -27,5 +59,9 @@ return {
 	imageListCols = imageListCols,
 	imageListGap = imageListGap,
 	imageListItemSize = imageListItemSize,
+	imageListAspect = imageListAspect,
+	imageListItemAspect = imageListItemAspect,
+	imageListCell = imageListCell,
+	imageListSelected = imageListSelected,
 	imageListTitle = imageListTitle,
 }

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

@@ -1,4 +1,5 @@
 export * from "./circularProgress/index";
+export * from "./cover/index";
 export * from "./skeleton/index";
 export * from "./divider/index";
 export * from "./errorBoundary/index";
@@ -17,14 +18,20 @@ export * from "./sidebar/index";
 export * from "./toast/index";
 export * from "./treeView/index";
 export * from "./typography/index";
+export * from "./text/index";
+export * from "./weekGrid/index";
 export * from "./button/index";
+export * from "./buttonGroup/index";
+export * from "./copyButton/index";
 export * from "./checkbox/index";
 export * from "./colorPicker/index";
 export * from "./fontEditor/index";
+export * from "./codeEditor/index";
 export * from "./loadingStroke/index";
 export * from "./numberInput/index";
 export * from "./numberRangeEditor/index";
 export * from "./dateRange/index";
+export * from "./timeField/index";
 export * from "./sparkline/index";
 export * from "./rectEditor/index";
 export * from "./rayEditor/index";
@@ -34,6 +41,7 @@ export * from "./vectorEditor/index";
 export * from "./cframeEditor/index";
 export * from "./enumPicker/index";
 export * from "./popup/index";
+export * from "./popover/index";
 export * from "./modal/index";
 export * from "./backdrop/index";
 export * from "./dialog/index";
@@ -43,13 +51,17 @@ export * from "./chip/index";
 export * from "./badge/index";
 export * from "./brickColorPicker/index";
 export * from "./avatar/index";
+export * from "./avatarGroup/index";
 export * from "./assetField/index";
 export * from "./gradientEditor/index";
 export * from "./drawer/index";
 export * from "./breadcrumbs/index";
 export * from "./pagination/index";
+export * from "./pager/index";
 export * from "./stepper/index";
+export * from "./timeline/index";
 export * from "./accordion/index";
+export * from "./collapse/index";
 export * from "./snackbar/index";
 export * from "./table/index";
 export * from "./autocomplete/index";

package/out/ui/packages/init.luau

@@ -4,6 +4,9 @@ local exports = {}
 for _k, _v in TS.import(script, script, "circularProgress") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "cover") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "skeleton") or {} do
 	exports[_k] = _v
 end
@@ -58,9 +61,21 @@ end
 for _k, _v in TS.import(script, script, "typography") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "text") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "weekGrid") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "button") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "buttonGroup") or {} do
+	exports[_k] = _v
+end
+for _k, _v in TS.import(script, script, "copyButton") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "checkbox") or {} do
 	exports[_k] = _v
 end
@@ -70,6 +85,9 @@ end
 for _k, _v in TS.import(script, script, "fontEditor") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "codeEditor") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "loadingStroke") or {} do
 	exports[_k] = _v
 end
@@ -82,6 +100,9 @@ end
 for _k, _v in TS.import(script, script, "dateRange") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "timeField") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "sparkline") or {} do
 	exports[_k] = _v
 end
@@ -109,6 +130,9 @@ end
 for _k, _v in TS.import(script, script, "popup") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "popover") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "modal") or {} do
 	exports[_k] = _v
 end
@@ -136,6 +160,9 @@ end
 for _k, _v in TS.import(script, script, "avatar") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "avatarGroup") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "assetField") or {} do
 	exports[_k] = _v
 end
@@ -151,12 +178,21 @@ end
 for _k, _v in TS.import(script, script, "pagination") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "pager") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "stepper") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "timeline") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "accordion") or {} do
 	exports[_k] = _v
 end
+for _k, _v in TS.import(script, script, "collapse") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "snackbar") or {} do
 	exports[_k] = _v
 end

package/out/ui/packages/input/components/Input.d.ts

@@ -17,6 +17,10 @@ export interface InputProps {
     rounded?: boolean;
     clearsTextOnFocus?: boolean;
     size?: ControlSize;
+    multiline?: boolean;
+    minRows?: number;
+    maxRows?: number;
+    maxLength?: number;
     reducedMotion?: boolean;
     startAdornment?: React.Element;
     endAdornment?: React.Element;