@rbxts/uiblox 0.2.0-alpha.16 → 0.2.0-alpha.18

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/divider/components/Divider.d.ts

@@ -9,6 +9,7 @@ export interface DividerProps {
     transparency?: number;
     weight?: number;
     anchorPoint?: Vector2;
+    text?: string;
 }
 declare function Divider<T extends DefaultDividerComponent>(props: CustomizedProps<T, DividerProps>): JSX.Element;
 export default Divider;

package/out/ui/packages/divider/components/Divider.luau

@@ -1,15 +1,63 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local React = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local Orientations = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Orientations
+local dividerLabel = TS.import(script, script.Parent, "dividerLabel").dividerLabel
 local useDividerStyles = TS.import(script, script.Parent, "Divider.styles").default
 local function Divider(props)
 	local _binding = props
+	local text = _binding.text
+	local orientation = _binding.orientation
 	local className = _binding.className
 	local sx = _binding.sx
 	local id = _binding.id
 	local ref = _binding.ref
 	local _binding_1 = useDividerStyles(props)
 	local root = _binding_1.root
+	local shell = _binding_1.shell
+	local line = _binding_1.line
+	local caption = _binding_1.caption
+	local captionPad = _binding_1.captionPad
+	local label = dividerLabel(text)
+	if label ~= nil and orientation ~= Orientations.Vertical then
+		local _attributes = {}
+		local _condition = id
+		if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then
+			_condition = "Divider"
+		end
+		_attributes.key = _condition
+		_attributes.ref = ref
+		for _k, _v in shell do
+			_attributes[_k] = _v
+		end
+		if className ~= 0 and className == className and className ~= "" and className then
+			for _k, _v in className do
+				_attributes[_k] = _v
+			end
+		end
+		if sx ~= 0 and sx == sx and sx ~= "" and sx then
+			for _k, _v in sx do
+				_attributes[_k] = _v
+			end
+		end
+		local _attributes_1 = {
+			key = "Line",
+		}
+		for _k, _v in line do
+			_attributes_1[_k] = _v
+		end
+		local _exp = React.createElement("frame", _attributes_1)
+		local _attributes_2 = {
+			key = "Label",
+		}
+		for _k, _v in caption do
+			_attributes_2[_k] = _v
+		end
+		_attributes_2.Text = label
+		local _attributes_3 = table.clone(captionPad)
+		setmetatable(_attributes_3, nil)
+		return React.createElement("frame", _attributes, _exp, React.createElement("textlabel", _attributes_2, React.createElement("uipadding", _attributes_3)))
+	end
 	local _attributes = {}
 	local _condition = id
 	if not (_condition ~= 0 and _condition == _condition and _condition ~= "" and _condition) then

package/out/ui/packages/divider/components/Divider.styles.luau

@@ -32,6 +32,35 @@ local useDividerStyles = componentStyles("Divider", function(theme, props)
 		anchorPoint = Vector2.new(0, 0)
 	end
 	return createStyles({
+		shell = {
+			Size = UDim2.new(1, 0, 0, theme.spacing.calc(2)),
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+		},
+		line = {
+			Size = UDim2.new(1, 0, 0, weight),
+			Position = UDim2.new(0, 0, 0.5, 0),
+			AnchorPoint = Vector2.new(0, 0.5),
+			BackgroundColor3 = color,
+			BackgroundTransparency = transparency,
+			BorderSizePixel = 0,
+		},
+		caption = {
+			AutomaticSize = Enum.AutomaticSize.XY,
+			Size = UDim2.fromScale(0, 0),
+			AnchorPoint = Vector2.new(0.5, 0.5),
+			Position = UDim2.new(0.5, 0, 0.5, 0),
+			BackgroundColor3 = theme.palette.surface.canvas,
+			BorderSizePixel = 0,
+			Font = theme.typography.fontFamilies.default,
+			TextSize = theme.typography.fontSizes.caption,
+			TextColor3 = theme.palette.text.secondary,
+			ZIndex = 2,
+		},
+		captionPad = {
+			PaddingLeft = UDim.new(0, theme.padding.calc(1)),
+			PaddingRight = UDim.new(0, theme.padding.calc(1)),
+		},
 		root = {
 			Position = position or UDim2.new(0, 0, 0, 0),
 			Size = UDim2.new(if orientation == Orientations.Horizontal then 1 else 0, if orientation == Orientations.Horizontal then -padding * 2 else weight, if orientation == Orientations.Vertical then 1 else 0, if orientation == Orientations.Vertical then -padding * 2 else weight),

package/out/ui/packages/divider/components/dividerLabel.d.ts

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

package/out/ui/packages/divider/components/dividerLabel.luau

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

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,
+}