@rbxts/uiblox 0.2.0-alpha.19 → 0.2.0-alpha.20

package/out/ui/packages/accordion/components/Accordion.d.ts

@@ -5,6 +5,7 @@ export interface AccordionProps {
     open?: boolean;
     defaultOpen?: boolean;
     disabled?: boolean;
+    square?: boolean;
     onChange?: (open: boolean) => void;
     children?: React.ReactNode;
 }

package/out/ui/packages/accordion/components/Accordion.luau

@@ -14,6 +14,7 @@ local function Accordion(props)
 	local controlled = _binding.open
 	local defaultOpen = _binding.defaultOpen
 	local disabled = _binding.disabled
+	local square = _binding.square
 	local onChange = _binding.onChange
 	local children = _binding.children
 	local className = _binding.className
@@ -59,49 +60,52 @@ local function Accordion(props)
 			_attributes[_k] = _v
 		end
 	end
-	local _attributes_1 = table.clone(styles.corner)
+	local _condition_1 = square ~= true
+	if _condition_1 then
+		local _attributes_1 = table.clone(styles.corner)
+		setmetatable(_attributes_1, nil)
+		_condition_1 = React.createElement("uicorner", _attributes_1)
+	end
+	local _attributes_1 = table.clone(styles.list)
 	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uicorner", _attributes_1)
-	local _attributes_2 = table.clone(styles.list)
-	setmetatable(_attributes_2, nil)
-	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
-	local _attributes_3 = {
+	local _exp = React.createElement("uilistlayout", _attributes_1)
+	local _attributes_2 = {
 		key = "Header",
 	}
 	for _k, _v in styles.header do
-		_attributes_3[_k] = _v
+		_attributes_2[_k] = _v
 	end
-	_attributes_3.Event = {
+	_attributes_2.Event = {
 		Activated = toggle,
 	}
-	local _attributes_4 = table.clone(styles.padding)
-	setmetatable(_attributes_4, nil)
-	local _exp_2 = React.createElement("uipadding", _attributes_4)
-	local _attributes_5 = {
+	local _attributes_3 = table.clone(styles.padding)
+	setmetatable(_attributes_3, nil)
+	local _exp_1 = React.createElement("uipadding", _attributes_3)
+	local _attributes_4 = {
 		key = "Title",
 	}
 	for _k, _v in styles.title do
-		_attributes_5[_k] = _v
+		_attributes_4[_k] = _v
 	end
-	_attributes_5.Text = title
-	local _exp_3 = React.createElement("textlabel", _attributes_5)
-	local _attributes_6 = {
+	_attributes_4.Text = title
+	local _exp_2 = React.createElement("textlabel", _attributes_4)
+	local _attributes_5 = {
 		key = "Icon",
 	}
 	for _k, _v in styles.icon do
-		_attributes_6[_k] = _v
+		_attributes_5[_k] = _v
 	end
-	_attributes_6.Image = if accordionGlyph(open) == "expanded" then Icons.Expanded else Icons.Collapsed
-	local _exp_4 = React.createElement("textbutton", _attributes_3, _exp_2, _exp_3, React.createElement("imagelabel", _attributes_6))
-	local _attributes_7 = {
+	_attributes_5.Image = if accordionGlyph(open) == "expanded" then Icons.Expanded else Icons.Collapsed
+	local _exp_3 = React.createElement("textbutton", _attributes_2, _exp_1, _exp_2, React.createElement("imagelabel", _attributes_5))
+	local _attributes_6 = {
 		key = "Body",
 	}
 	for _k, _v in styles.body do
-		_attributes_7[_k] = _v
+		_attributes_6[_k] = _v
 	end
-	local _attributes_8 = table.clone(styles.padding)
-	setmetatable(_attributes_8, nil)
-	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_4, React.createElement("frame", _attributes_7, React.createElement("uipadding", _attributes_8), children))
+	local _attributes_7 = table.clone(styles.padding)
+	setmetatable(_attributes_7, nil)
+	return React.createElement("frame", _attributes, _condition_1, _exp, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
 end
 local default = Accordion
 return {

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

@@ -6,6 +6,7 @@ export interface AlertProps {
     message: string;
     onClose?: () => void;
     filled?: boolean;
+    square?: boolean;
 }
 declare function Alert(props: CustomizedProps<Frame, AlertProps>): JSX.Element;
 export default Alert;

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

@@ -10,6 +10,7 @@ local function Alert(props)
 	local message = _binding.message
 	local onClose = _binding.onClose
 	local filled = _binding.filled
+	local square = _binding.square
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -43,56 +44,59 @@ local function Alert(props)
 	local _attributes_1 = table.clone(styles.padding)
 	setmetatable(_attributes_1, nil)
 	local _exp = React.createElement("uipadding", _attributes_1)
-	local _attributes_2 = table.clone(styles.corner)
-	setmetatable(_attributes_2, nil)
-	local _exp_1 = React.createElement("uicorner", _attributes_2)
-	local _attributes_3 = table.clone(styles.stroke)
-	setmetatable(_attributes_3, nil)
-	local _exp_2 = React.createElement("uistroke", _attributes_3)
-	local _condition_1 = dismissible
+	local _condition_1 = square ~= true
 	if _condition_1 then
-		local _attributes_4 = {
+		local _attributes_2 = table.clone(styles.corner)
+		setmetatable(_attributes_2, nil)
+		_condition_1 = React.createElement("uicorner", _attributes_2)
+	end
+	local _attributes_2 = table.clone(styles.stroke)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uistroke", _attributes_2)
+	local _condition_2 = dismissible
+	if _condition_2 then
+		local _attributes_3 = {
 			key = "Close",
 		}
 		for _k, _v in styles.close do
-			_attributes_4[_k] = _v
+			_attributes_3[_k] = _v
 		end
-		_attributes_4.Image = tostring(Icons.Close)
-		_attributes_4.Event = {
+		_attributes_3.Image = tostring(Icons.Close)
+		_attributes_3.Event = {
 			Activated = function()
 				return onClose()
 			end,
 		}
-		_condition_1 = (React.createElement("imagebutton", _attributes_4))
+		_condition_2 = (React.createElement("imagebutton", _attributes_3))
 	end
-	local _attributes_4 = {
+	local _attributes_3 = {
 		key = "Body",
 	}
 	for _k, _v in styles.body do
-		_attributes_4[_k] = _v
+		_attributes_3[_k] = _v
 	end
-	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 = {
+	local _attributes_4 = table.clone(styles.layout)
+	setmetatable(_attributes_4, nil)
+	local _exp_2 = React.createElement("uilistlayout", _attributes_4)
+	local _condition_3 = title ~= nil and title ~= ""
+	if _condition_3 then
+		local _attributes_5 = {
 			key = "Title",
 		}
 		for _k, _v in styles.title do
-			_attributes_6[_k] = _v
+			_attributes_5[_k] = _v
 		end
-		_attributes_6.Text = title
-		_condition_2 = React.createElement("textlabel", _attributes_6)
+		_attributes_5.Text = title
+		_condition_3 = React.createElement("textlabel", _attributes_5)
 	end
-	local _attributes_6 = {
+	local _attributes_5 = {
 		key = "Message",
 	}
 	for _k, _v in styles.message do
-		_attributes_6[_k] = _v
+		_attributes_5[_k] = _v
 	end
-	_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)))
+	_attributes_5.Text = message
+	return React.createElement("frame", _attributes, _exp, _condition_1, _exp_1, _condition_2, React.createElement("frame", _attributes_3, _exp_2, _condition_3, React.createElement("textlabel", _attributes_5)))
 end
 local default = Alert
 return {

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

@@ -5,6 +5,7 @@ export type DefaultInputComponent = Frame;
 export interface InputProps {
     color?: InputColor;
     disabled?: boolean;
+    readOnly?: boolean;
     loading?: boolean;
     hasError?: boolean;
     helperText?: string;

package/out/ui/packages/input/components/Input.luau

@@ -36,6 +36,10 @@ local function Input(props)
 	if disabled == nil then
 		disabled = false
 	end
+	local readOnly = _binding.readOnly
+	if readOnly == nil then
+		readOnly = false
+	end
 	local loading = _binding.loading
 	if loading == nil then
 		loading = false
@@ -71,7 +75,8 @@ local function Input(props)
 	local focused, setFocused = useState(false)
 	local _binding_1 = useTheme()
 	local theme = _binding_1.theme
-	local editable = canActivate(disabled, loading)
+	local active = canActivate(disabled, loading)
+	local editable = active and readOnly ~= true
 	local endSlotContent = if loading then nil else endAdornment
 	local _object = table.clone(props)
 	setmetatable(_object, nil)
@@ -160,7 +165,7 @@ local function Input(props)
 	for _k, _v in box do
 		_attributes_3[_k] = _v
 	end
-	_attributes_3.Active = editable
+	_attributes_3.Active = active
 	_attributes_3.TextEditable = editable
 	_attributes_3.Text = draft
 	_attributes_3.PlaceholderText = placeholder

package/out/ui/packages/listItem/components/ListItem.d.ts

@@ -4,6 +4,7 @@ export interface ListItemProps {
     selected?: boolean;
     disabled?: boolean;
     dense?: boolean;
+    divider?: boolean;
     onActivated?: () => void;
 }
 declare function ListItem(props: ListItemProps): JSX.Element;

package/out/ui/packages/listItem/components/ListItem.luau

@@ -18,6 +18,10 @@ local function ListItem(props)
 	if dense == nil then
 		dense = false
 	end
+	local divider = _binding.divider
+	if divider == nil then
+		divider = false
+	end
 	local onActivated = _binding.onActivated
 	local styles = useListItemStyles({
 		selected = selected,
@@ -64,7 +68,19 @@ local function ListItem(props)
 	else
 		_result = nil
 	end
-	return React.createElement("textbutton", _attributes, _exp, _exp_1, _exp_2, _result)
+	local _result_1
+	if divider == true then
+		local _attributes_4 = {
+			key = "Divider",
+		}
+		for _k, _v in styles.divider do
+			_attributes_4[_k] = _v
+		end
+		_result_1 = React.createElement("frame", _attributes_4)
+	else
+		_result_1 = nil
+	end
+	return React.createElement("textbutton", _attributes, _exp, _exp_1, _exp_2, _result, _result_1)
 end
 local default = ListItem
 return {

package/out/ui/packages/listItem/components/ListItem.styles.luau

@@ -61,6 +61,12 @@ local useListItemStyles = componentStyles("ListItem", function(theme, _param)
 			TextColor3 = theme.palette.text.secondary,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
+		divider = {
+			LayoutOrder = 3,
+			Size = UDim2.new(1, 0, 0, 1),
+			BackgroundColor3 = theme.palette.divider,
+			BorderSizePixel = 0,
+		},
 	})
 end)
 local default = useListItemStyles

package/out/ui/packages/numberInput/components/NumberInput.d.ts

@@ -6,6 +6,7 @@ export interface NumberInputProps {
     max?: number;
     step?: number;
     disabled?: boolean;
+    readOnly?: boolean;
     loading?: boolean;
     placeholder?: string;
     width?: UDim;

package/out/ui/packages/numberInput/components/NumberInput.luau

@@ -11,6 +11,7 @@ local function NumberInput(props)
 	local max = _binding.max
 	local step = _binding.step
 	local disabled = _binding.disabled
+	local readOnly = _binding.readOnly
 	local loading = _binding.loading
 	local placeholder = _binding.placeholder
 	local width = _binding.width
@@ -31,6 +32,7 @@ local function NumberInput(props)
 	_attributes.placeholder = placeholder
 	_attributes.width = width
 	_attributes.disabled = disabled
+	_attributes.readOnly = readOnly
 	_attributes.loading = loading
 	_attributes.size = size
 	_attributes.reducedMotion = reducedMotion

package/out/ui/packages/slider/components/Slider.d.ts

@@ -1,4 +1,5 @@
 import { ControlSize, CustomizedProps } from "../../../../theme/index";
+import { SliderColor } from "./Slider.styles";
 export interface SliderProps {
     value: number;
     onChange: (value: number) => void;
@@ -9,6 +10,7 @@ export interface SliderProps {
     disabled?: boolean;
     size?: ControlSize;
     marks?: boolean | ReadonlyArray<number>;
+    color?: SliderColor;
 }
 declare function Slider(props: CustomizedProps<Frame, SliderProps>): JSX.Element;
 export default Slider;

package/out/ui/packages/slider/components/Slider.luau

@@ -25,12 +25,17 @@ local function Slider(props)
 	local disabled = _binding.disabled
 	local size = _binding.size
 	local marks = _binding.marks
+	local color = _binding.color
+	if color == nil then
+		color = "primary"
+	end
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local _binding_1 = useSliderStyles({
 		size = size,
+		color = color,
 	})
 	local root = _binding_1.root
 	local track = _binding_1.track
@@ -188,6 +193,7 @@ local function Slider(props)
 		_newValue[_k] = _callback(_v, _k - 1, markValues)
 	end
 	-- ▲ ReadonlyArray.map ▲
+	local _exp_1 = React.createElement(React.Fragment, nil, _newValue)
 	local _attributes_3 = {
 		key = "Fill",
 	}
@@ -199,7 +205,7 @@ local function Slider(props)
 	_attributes_3.Size = UDim2.fromScale(ratio, 1)
 	local _attributes_4 = table.clone(corner)
 	setmetatable(_attributes_4, nil)
-	local _exp_1 = React.createElement("frame", _attributes_3, React.createElement("uicorner", _attributes_4))
+	local _exp_2 = React.createElement("frame", _attributes_3, React.createElement("uicorner", _attributes_4))
 	local _attributes_5 = {
 		key = "Knob",
 	}
@@ -211,7 +217,7 @@ local function Slider(props)
 	_attributes_5.Position = UDim2.fromScale(ratio, 0.5)
 	local _attributes_6 = table.clone(corner)
 	setmetatable(_attributes_6, nil)
-	local _exp_2 = React.createElement("uicorner", _attributes_6)
+	local _exp_3 = React.createElement("uicorner", _attributes_6)
 	local _condition_2 = showFocus
 	if _condition_2 then
 		local _attributes_7 = table.clone(stroke)
@@ -219,7 +225,7 @@ local function Slider(props)
 		_attributes_7.Thickness = 1
 		_condition_2 = React.createElement("uistroke", _attributes_7)
 	end
-	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _condition_1, _newValue, _exp_1, React.createElement("frame", _attributes_5, _exp_2, _condition_2)))
+	return React.createElement("frame", _attributes, React.createElement("frame", _attributes_1, _exp, _condition_1, _exp_1, _exp_2, React.createElement("frame", _attributes_5, _exp_3, _condition_2)))
 end
 local default = Slider
 return {

package/out/ui/packages/slider/components/Slider.styles.d.ts

@@ -1,6 +1,8 @@
 import { ControlSize } from "../../../../theme/index";
+export type SliderColor = "primary" | "accent";
 export interface SliderStyleProps {
     size?: ControlSize;
+    color?: SliderColor;
 }
 declare const useSliderStyles: (props: SliderStyleProps) => import("../../../../theme/index").ClassNameMap<string>;
 export default useSliderStyles;

package/out/ui/packages/slider/components/Slider.styles.luau

@@ -6,7 +6,12 @@ local createStyles = _theme.createStyles
 local componentStyles = _theme.componentStyles
 local useSliderStyles = componentStyles("Slider", function(theme, _param)
 	local size = _param.size
+	local color = _param.color
+	if color == nil then
+		color = "primary"
+	end
 	local metrics = controlMetrics(theme.density, size)
+	local tone = if color == "accent" then theme.palette.accent.main else theme.palette.primary.main
 	return createStyles({
 		root = {
 			Size = UDim2.new(1, 0, 0, metrics.sliderHeight),
@@ -21,7 +26,7 @@ local useSliderStyles = componentStyles("Slider", function(theme, _param)
 			BorderSizePixel = 0,
 		},
 		fill = {
-			BackgroundColor3 = theme.palette.primary.main,
+			BackgroundColor3 = tone,
 			BorderSizePixel = 0,
 		},
 		knob = {