@rbxts/uiblox 0.2.0-alpha.15 → 0.2.0-alpha.17

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

@@ -3,7 +3,10 @@ local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
 local useState = _react.useState
-local accordionOpen = TS.import(script, script.Parent, "accordionOpen").accordionOpen
+local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local _accordionOpen = TS.import(script, script.Parent, "accordionOpen")
+local accordionGlyph = _accordionOpen.accordionGlyph
+local accordionOpen = _accordionOpen.accordionOpen
 local useAccordionStyles = TS.import(script, script.Parent, "Accordion.styles").default
 local function Accordion(props)
 	local _binding = props
@@ -81,16 +84,24 @@ local function Accordion(props)
 		_attributes_5[_k] = _v
 	end
 	_attributes_5.Text = title
-	local _exp_3 = React.createElement("textbutton", _attributes_3, _exp_2, React.createElement("textlabel", _attributes_5))
+	local _exp_3 = React.createElement("textlabel", _attributes_5)
 	local _attributes_6 = {
+		key = "Icon",
+	}
+	for _k, _v in styles.icon do
+		_attributes_6[_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 = {
 		key = "Body",
 	}
 	for _k, _v in styles.body do
-		_attributes_6[_k] = _v
+		_attributes_7[_k] = _v
 	end
-	local _attributes_7 = table.clone(styles.padding)
-	setmetatable(_attributes_7, nil)
-	return React.createElement("frame", _attributes, _exp, _exp_1, _exp_3, React.createElement("frame", _attributes_6, React.createElement("uipadding", _attributes_7), children))
+	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))
 end
 local default = Accordion
 return {

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

@@ -32,8 +32,8 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 			Selectable = disabled ~= true,
 		},
 		title = {
-			AutomaticSize = Enum.AutomaticSize.XY,
-			Size = UDim2.fromScale(0, 0),
+			AutomaticSize = Enum.AutomaticSize.Y,
+			Size = UDim2.new(1, -theme.spacing.calc(4), 0, 0),
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
@@ -42,6 +42,16 @@ local useAccordionStyles = componentStyles("Accordion", function(theme, _param)
 			TextTransparency = if disabled == true then 0.5 else 0,
 			TextXAlignment = Enum.TextXAlignment.Left,
 		},
+		icon = {
+			Size = UDim2.fromOffset(theme.options.constants.iconSizes.small, theme.options.constants.iconSizes.small),
+			Position = UDim2.new(1, -theme.padding.calc(1.5), 0.5, 0),
+			AnchorPoint = Vector2.new(1, 0.5),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			ScaleType = Enum.ScaleType.Fit,
+			ImageColor3 = theme.palette.text.primary,
+			ImageTransparency = if disabled == true then 0.5 else 0,
+		},
 		padding = {
 			PaddingTop = UDim.new(0, theme.padding.calc(1)),
 			PaddingBottom = UDim.new(0, theme.padding.calc(1)),

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

@@ -1 +1,2 @@
 export declare function accordionOpen(expanded: boolean | undefined, controlled: boolean | undefined): boolean;
+export declare function accordionGlyph(open?: boolean): "expanded" | "collapsed";

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

@@ -5,6 +5,10 @@ local function accordionOpen(expanded, controlled)
 	end
 	return expanded == true
 end
+local function accordionGlyph(open)
+	return if open == true then "expanded" else "collapsed"
+end
 return {
 	accordionOpen = accordionOpen,
+	accordionGlyph = accordionGlyph,
 }

package/out/ui/packages/badge/components/Badge.d.ts

@@ -1,10 +1,12 @@
 import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
+import { BadgeColor } from "./Badge.styles";
 export interface BadgeProps {
     count?: number;
     max?: number;
     invisible?: boolean;
     variant?: "standard" | "dot";
+    color?: BadgeColor;
     children?: React.ReactNode;
 }
 declare function Badge(props: CustomizedProps<Frame, BadgeProps>): JSX.Element;

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

@@ -21,6 +21,10 @@ local function Badge(props)
 	if variant == nil then
 		variant = "standard"
 	end
+	local color = _binding.color
+	if color == nil then
+		color = "error"
+	end
 	local children = _binding.children
 	local className = _binding.className
 	local sx = _binding.sx
@@ -28,6 +32,7 @@ local function Badge(props)
 	local ref = _binding.ref
 	local styles = useBadgeStyles({
 		variant = variant,
+		color = color,
 	})
 	local isDot = variant == "dot"
 	local shown = not invisible and (isDot or count > 0)

package/out/ui/packages/badge/components/Badge.styles.d.ts

@@ -1,4 +1,6 @@
+export type BadgeColor = "error" | "primary" | "success";
 declare const useBadgeStyles: (props: {
     variant?: "standard" | "dot";
+    color?: BadgeColor;
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default useBadgeStyles;

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

@@ -8,7 +8,12 @@ local useBadgeStyles = componentStyles("Badge", function(theme, _param)
 	if variant == nil then
 		variant = "standard"
 	end
+	local color = _param.color
+	if color == nil then
+		color = "error"
+	end
 	local diameter = if variant == "dot" then theme.spacing.calc(1) else theme.spacing.calc(2) + theme.padding.calc(1)
+	local tone = if color == "primary" then theme.palette.primary elseif color == "success" then theme.palette.status.success else theme.palette.status.error
 	return createStyles({
 		root = {
 			AutomaticSize = Enum.AutomaticSize.XY,
@@ -21,11 +26,11 @@ local useBadgeStyles = componentStyles("Badge", function(theme, _param)
 			Position = UDim2.fromScale(1, 0),
 			AutomaticSize = if variant == "dot" then Enum.AutomaticSize.None else Enum.AutomaticSize.X,
 			Size = UDim2.fromOffset(diameter, diameter),
-			BackgroundColor3 = theme.palette.status.error.main,
+			BackgroundColor3 = tone.main,
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.caption,
-			TextColor3 = theme.palette.text.inverse,
+			TextColor3 = if color == "error" then theme.palette.text.inverse else tone.on,
 			TextXAlignment = Enum.TextXAlignment.Center,
 			TextYAlignment = Enum.TextYAlignment.Center,
 			ZIndex = 2,

package/out/ui/packages/fab/components/Fab.d.ts

@@ -1,10 +1,12 @@
 import { CustomizedProps } from "../../../../theme/index";
 import { Icons } from "../../../enums/index";
 import { FabSize } from "./fabSize";
+import { FabColor } from "./Fab.styles";
 export interface FabProps {
     icon: Icons;
     label?: string;
     size?: FabSize;
+    color?: FabColor;
     disabled?: boolean;
     loading?: boolean;
     reducedMotion?: boolean;

package/out/ui/packages/fab/components/Fab.luau

@@ -20,6 +20,10 @@ local function Fab(props)
 	if size == nil then
 		size = "medium"
 	end
+	local color = _binding.color
+	if color == nil then
+		color = "primary"
+	end
 	local disabled = _binding.disabled
 	local loading = _binding.loading
 	if loading == nil then
@@ -35,6 +39,7 @@ local function Fab(props)
 	local extended = fabExtended(label)
 	local styles = useFabStyles({
 		size = size,
+		color = color,
 		disabled = not active,
 		extended = extended,
 	})

package/out/ui/packages/fab/components/Fab.styles.d.ts

@@ -1,6 +1,8 @@
 import { FabSize } from "./fabSize";
+export type FabColor = "primary" | "accent";
 export interface FabStyleProps {
     size?: FabSize;
+    color?: FabColor;
     disabled?: boolean;
     extended?: boolean;
 }

package/out/ui/packages/fab/components/Fab.styles.luau

@@ -9,14 +9,19 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 	if size == nil then
 		size = "medium"
 	end
+	local color = _param.color
+	if color == nil then
+		color = "primary"
+	end
 	local disabled = _param.disabled
 	local extended = _param.extended
 	local diameter = fabPixels(size)
+	local tone = if color == "accent" then theme.palette.accent else theme.palette.primary
 	return createStyles({
 		root = {
 			Size = if extended == true then UDim2.new(0, 0, 0, diameter) else UDim2.fromOffset(diameter, diameter),
 			AutomaticSize = if extended == true then Enum.AutomaticSize.X else Enum.AutomaticSize.None,
-			BackgroundColor3 = theme.palette.primary.main,
+			BackgroundColor3 = tone.main,
 			BackgroundTransparency = if disabled then 0.5 else 0,
 			BorderSizePixel = 0,
 			AutoButtonColor = false,
@@ -42,7 +47,7 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 			BackgroundTransparency = 1,
 			BorderSizePixel = 0,
 			ScaleType = Enum.ScaleType.Fit,
-			ImageColor3 = theme.palette.primary.on,
+			ImageColor3 = tone.on,
 			ImageTransparency = if disabled then 0.5 else 0,
 			LayoutOrder = 1,
 		},
@@ -53,7 +58,7 @@ local useFabStyles = componentStyles("Fab", function(theme, _param)
 			BorderSizePixel = 0,
 			Font = theme.typography.fontFamilies.default,
 			TextSize = theme.typography.fontSizes.body,
-			TextColor3 = theme.palette.primary.on,
+			TextColor3 = tone.on,
 			TextTransparency = if disabled then 0.5 else 0,
 			LayoutOrder = 2,
 		},

package/out/ui/packages/paper/components/Paper.d.ts

@@ -1,5 +1,5 @@
 import React from "@rbxts/react";
-export type PaperElevation = "flat" | "raised";
+export type PaperElevation = "flat" | "raised" | "outlined";
 export interface PaperProps {
     elevation?: PaperElevation;
     square?: boolean;

package/out/ui/packages/paper/components/Paper.luau

@@ -28,7 +28,13 @@ local function Paper(props)
 		setmetatable(_attributes_2, nil)
 		_condition = React.createElement("uicorner", _attributes_2)
 	end
-	return React.createElement("frame", _attributes, _exp, _condition, children)
+	local _condition_1 = elevation == "outlined"
+	if _condition_1 then
+		local _attributes_2 = table.clone(styles.stroke)
+		setmetatable(_attributes_2, nil)
+		_condition_1 = React.createElement("uistroke", _attributes_2)
+	end
+	return React.createElement("frame", _attributes, _exp, _condition, _condition_1, children)
 end
 local default = Paper
 return {

package/out/ui/packages/paper/components/Paper.styles.d.ts

@@ -1,4 +1,4 @@
 declare const usePaperStyles: (props: {
-    elevation?: "flat" | "raised";
+    elevation?: "flat" | "raised" | "outlined";
 }) => import("../../../../theme/index").ClassNameMap<string>;
 export default usePaperStyles;

package/out/ui/packages/paper/components/Paper.styles.luau

@@ -15,6 +15,12 @@ local usePaperStyles = componentStyles("Paper", function(theme, _param)
 			BackgroundColor3 = if elevation == "raised" then theme.palette.surface.elevated else theme.palette.surface.paper,
 			BorderSizePixel = 0,
 		},
+		stroke = {
+			Color = theme.palette.border,
+			ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
+			Thickness = 1,
+			Transparency = 0,
+		},
 		padding = {
 			PaddingTop = UDim.new(0, theme.padding.calc(2)),
 			PaddingBottom = UDim.new(0, theme.padding.calc(2)),

package/out/ui/packages/rating/components/Rating.d.ts

@@ -4,6 +4,7 @@ export interface RatingProps {
     max?: number;
     size?: ControlSize;
     disabled?: boolean;
+    readOnly?: boolean;
     onChange: (value: number) => void;
 }
 declare function Rating(props: CustomizedProps<Frame, RatingProps>): JSX.Element;

package/out/ui/packages/rating/components/Rating.luau

@@ -16,6 +16,7 @@ local function Rating(props)
 		size = "medium"
 	end
 	local disabled = _binding.disabled
+	local readOnly = _binding.readOnly
 	local onChange = _binding.onChange
 	local className = _binding.className
 	local sx = _binding.sx
@@ -25,7 +26,7 @@ local function Rating(props)
 		disabled = disabled,
 		size = size,
 	})
-	local active = canActivate(disabled)
+	local active = canActivate(disabled) and readOnly ~= true
 	local stars = {}
 	do
 		local i = 1

package/out/ui/packages/snackbar/components/Snackbar.d.ts

@@ -6,6 +6,8 @@ export interface SnackbarProps {
     duration?: number;
     variant?: ToastVariants;
     open?: boolean;
+    action?: string;
+    onAction?: () => void;
 }
 declare function Snackbar(props: CustomizedProps<Frame, SnackbarProps>): JSX.Element | undefined;
 export default Snackbar;

package/out/ui/packages/snackbar/components/Snackbar.luau

@@ -2,6 +2,7 @@
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local Toast = TS.import(script, script.Parent.Parent.Parent, "toast").Toast
+local snackbarActionLabel = TS.import(script, script.Parent, "snackbarAction").snackbarActionLabel
 local function Snackbar(props)
 	local _binding = props
 	local message = _binding.message
@@ -12,6 +13,8 @@ local function Snackbar(props)
 	if open == nil then
 		open = true
 	end
+	local action = _binding.action
+	local onAction = _binding.onAction
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
@@ -24,6 +27,8 @@ local function Snackbar(props)
 		onDismiss = onDismiss,
 		duration = duration,
 		variant = variant,
+		action = snackbarActionLabel(action),
+		onAction = onAction,
 		className = className,
 		sx = sx,
 	}

package/out/ui/packages/snackbar/components/snackbarAction.d.ts

@@ -0,0 +1 @@
+export declare function snackbarActionLabel(action?: string): string | undefined;

package/out/ui/packages/snackbar/components/snackbarAction.luau

@@ -0,0 +1,10 @@
+-- Compiled with roblox-ts v3.0.0
+local function snackbarActionLabel(action)
+	if action == nil or #action == 0 then
+		return nil
+	end
+	return action
+end
+return {
+	snackbarActionLabel = snackbarActionLabel,
+}