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

package/README.md

@@ -6,25 +6,9 @@
 
 UI library and theming for roblox-ts projects.
 
-## Background
-
-Roblox has their own internal design system, coined "uiblox-web", that it uses for its new
-web-facing products. This system offers reusable components, implemented in
-React Typescript, that are derived from material UI (MUI). As well, it offers a
-common theme/pallete for consistent UI/UX.
-
-Anyone is able to view their design system as
-[UIBlox-Web](https://uiblox.roblox.com). You can see that they leverage
-[Storybook](https://storybook.js.org), a UI component explorer for frontend
-developers, to render component previews.
-
-Design systems all help engineers cut down on implementation time and ensure
-consitent UX across products.
-
 ## Overview
 
-So what is uiblox-rbxts? Simply put, its my stab at a design system that mimics
-uiblox-web for games written using roblox-ts.
+uiblox-rbxts is a design system for games written using roblox-ts.
 
 UIBlox-rbxts aims to provide extensible components that can be reusable by
 anyone who installs this npm package. It also offers a theme and styling system
@@ -254,4 +238,3 @@ new AppLoader().Mount();
 -   [Storyblox](https://github.com/bjlarouche/storyblox) a UI component explorer for roblox-ts developers
     -   <img src=docs/storyblox-preview.png width=40%>
     -   Test it out here [Storyblox Pre-Release Experience](https://www.roblox.com/games/9159382473)
-    -   Similar to [hoarcekat](https://github.com/Kampfkarren/hoarcekat) by Kampfkarren

package/out/theme/constants/NumberConstants.d.ts

@@ -2,6 +2,16 @@ import { IconSizes } from "../interfaces/iconSizes/index";
 export declare const SPACING_BASE = 8;
 export declare const PADDING_BASE = 4;
 export declare const BORDER_RADIUS = 4;
+export declare const RADIUS: {
+    small: number;
+    default: number;
+    large: number;
+};
+export declare const MOTION: {
+    fast: number;
+    default: number;
+    slow: number;
+};
 /** UICorner scale for pill/capsule controls (1 = fully round). */
 export declare const PILL_SCALE = 1;
 export declare const CONTENT_WIDTH = 1024;

package/out/theme/constants/NumberConstants.luau

@@ -2,6 +2,16 @@
 local SPACING_BASE = 8
 local PADDING_BASE = 4
 local BORDER_RADIUS = 4
+local RADIUS = {
+	small = 2,
+	default = BORDER_RADIUS,
+	large = 8,
+}
+local MOTION = {
+	fast = 0.1,
+	default = 0.14,
+	slow = 0.24,
+}
 --* UICorner scale for pill/capsule controls (1 = fully round). 
 local PILL_SCALE = 1
 local CONTENT_WIDTH = 1024
@@ -14,6 +24,8 @@ return {
 	SPACING_BASE = SPACING_BASE,
 	PADDING_BASE = PADDING_BASE,
 	BORDER_RADIUS = BORDER_RADIUS,
+	RADIUS = RADIUS,
+	MOTION = MOTION,
 	PILL_SCALE = PILL_SCALE,
 	CONTENT_WIDTH = CONTENT_WIDTH,
 	ICON_SIZES = ICON_SIZES,

package/out/theme/interfaces/density/controlMetrics.luau

@@ -28,7 +28,7 @@ local METRICS = {
 		sliderTrack = 6,
 		sliderKnob = 14,
 		radio = 18,
-		icon = 18,
+		icon = 16,
 		font = 14,
 		markFont = 12,
 		buttonHeight = 36,
@@ -45,7 +45,7 @@ local METRICS = {
 		sliderTrack = 8,
 		sliderKnob = 18,
 		radio = 22,
-		icon = 18,
+		icon = 20,
 		font = 16,
 		markFont = 12,
 		buttonHeight = 48,

package/out/theme/interfaces/palette/Palette.d.ts

@@ -44,4 +44,11 @@ export default interface Palette {
     };
     backdrop: Color3;
     shadow: Color3;
+    code: {
+        keyword: Color3;
+        string: Color3;
+        number: Color3;
+        comment: Color3;
+        func: Color3;
+    };
 }

package/out/theme/interfaces/spacing/Shape.d.ts

@@ -3,4 +3,10 @@ export default interface Shape {
     borderRadius: number;
     /** UICorner scale for capsules (Switch, Chip). Use `new UDim(pillScale, 0)`. */
     pillScale: number;
+    /** Pixel radii: tight internals, controls and surfaces, dialogs and cards. `default` matches `borderRadius`. */
+    radius: {
+        small: number;
+        default: number;
+        large: number;
+    };
 }

package/out/theme/interfaces/theme/Theme.d.ts

@@ -7,6 +7,12 @@ interface Theme {
     type: string;
     density: ThemeDensity;
     reducedMotion?: boolean;
+    /** Tween seconds: focus and hover, menus and disclosure, sheets and snackbars. */
+    motion: {
+        fast: number;
+        default: number;
+        slow: number;
+    };
     options: ThemeOptions;
     palette: Palette;
     padding: Padding;

package/out/theme/interfaces/typography/FontFamilies.luau

@@ -5,6 +5,7 @@ local allFontFamilies = {
 	semibold = Enum.Font.SourceSansSemibold,
 	light = Enum.Font.SourceSansLight,
 	italics = Enum.Font.SourceSansItalic,
+	mono = Enum.Font.RobotoMono,
 }
 return {
 	allFontFamilies = allFontFamilies,

package/out/theme/interfaces/typography/FontFamilyOptions.d.ts

@@ -1,3 +1,3 @@
-export type FontFamilyVariant = "default" | "bold" | "semibold" | "light" | "italics";
+export type FontFamilyVariant = "default" | "bold" | "semibold" | "light" | "italics" | "mono";
 export interface FontFamilyOptions extends Partial<Record<FontFamilyVariant, Required<Enum.Font>>> {
 }

package/out/theme/interfaces/typography/FontSizeOptions.d.ts

@@ -1,3 +1,3 @@
-export type FontSizeVariant = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body" | "caption" | "button" | "overline";
+export type FontSizeVariant = "display" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "subtitle1" | "subtitle2" | "body" | "bodySmall" | "caption" | "button" | "overline";
 export interface FontSizeOptions extends Partial<Record<FontSizeVariant, Required<number>>> {
 }

package/out/theme/interfaces/typography/FontSizes.luau

@@ -3,6 +3,7 @@ local TS = _G[script]
 local allTypographyVariants = TS.import(script, script.Parent, "Variants").allTypographyVariants
 local baseFontSize = allTypographyVariants.body.size
 local allFontSizes = {
+	display = allTypographyVariants.display.size,
 	h1 = allTypographyVariants.h1.size,
 	h2 = allTypographyVariants.h2.size,
 	h3 = allTypographyVariants.h3.size,
@@ -12,6 +13,7 @@ local allFontSizes = {
 	subtitle1 = allTypographyVariants.subtitle1.size,
 	subtitle2 = allTypographyVariants.subtitle2.size,
 	body = allTypographyVariants.body.size,
+	bodySmall = allTypographyVariants.bodySmall.size,
 	caption = allTypographyVariants.caption.size,
 	overline = allTypographyVariants.overline.size,
 	button = allTypographyVariants.button.size,

package/out/theme/interfaces/typography/Variants.d.ts

@@ -5,9 +5,11 @@ export interface TypographyVariantSpec {
     family: FontFamilyVariant;
     /** Approx CSS weight; Roblox TextLabel uses `family` / FontFace */
     weight: number;
+    /** TextLabel.LineHeight multiplier */
+    leading: number;
 }
 export type TypographyVariants = FontSizeVariant;
-/** Size + family + weight per typography variant. */
+/** Size, family, weight, and line height per typography variant. */
 export declare const allTypographyVariants: Record<FontSizeVariant, TypographyVariantSpec>;
 /** @deprecated prefer allTypographyVariants[*].weight */
 export declare const TypographyWeights: {

package/out/theme/interfaces/typography/Variants.luau

@@ -1,65 +1,89 @@
 -- Compiled with roblox-ts v3.0.0
---* Size + family + weight per typography variant. 
+--* Size, family, weight, and line height per typography variant. 
 local allTypographyVariants = {
+	display = {
+		size = 36,
+		family = "bold",
+		weight = 700,
+		leading = 1.15,
+	},
 	h1 = {
 		size = 28,
 		family = "bold",
 		weight = 700,
+		leading = 1.2,
 	},
 	h2 = {
 		size = 22,
 		family = "bold",
 		weight = 700,
+		leading = 1.2,
 	},
 	h3 = {
 		size = 18,
 		family = "semibold",
 		weight = 600,
+		leading = 1.3,
 	},
 	h4 = {
 		size = 16,
 		family = "semibold",
 		weight = 600,
+		leading = 1.3,
 	},
 	h5 = {
 		size = 14,
 		family = "semibold",
 		weight = 600,
+		leading = 1.3,
 	},
 	h6 = {
 		size = 14,
 		family = "semibold",
 		weight = 600,
+		leading = 1.3,
 	},
 	subtitle1 = {
 		size = 16,
 		family = "default",
 		weight = 400,
+		leading = 1.4,
 	},
 	subtitle2 = {
 		size = 14,
 		family = "semibold",
 		weight = 600,
+		leading = 1.4,
 	},
 	body = {
 		size = 14,
 		family = "default",
 		weight = 400,
+		leading = 1.4,
+	},
+	bodySmall = {
+		size = 13,
+		family = "default",
+		weight = 400,
+		leading = 1.4,
 	},
 	button = {
 		size = 13,
 		family = "semibold",
 		weight = 600,
+		leading = 1.15,
 	},
 	caption = {
 		size = 12,
 		family = "default",
 		weight = 400,
+		leading = 1.4,
 	},
 	overline = {
 		size = 10,
 		family = "default",
 		weight = 400,
+		leading = 1.4,
 	},
 }
 --* @deprecated prefer allTypographyVariants[*].weight 

package/out/theme/styles/utilities/focusRing.d.ts

@@ -3,3 +3,5 @@ export declare function focusRing(color: Color3): {
     Thickness: number;
     ApplyStrokeMode: Enum.ApplyStrokeMode.Border;
 };
+/** One disabled fade for checkbox, switch, radio, and slider. */
+export declare const controlFade = 0.5;

package/out/theme/styles/utilities/focusRing.luau

@@ -6,6 +6,9 @@ local function focusRing(color)
 		ApplyStrokeMode = Enum.ApplyStrokeMode.Border,
 	}
 end
+--* One disabled fade for checkbox, switch, radio, and slider. 
+local controlFade = 0.5
 return {
 	focusRing = focusRing,
+	controlFade = controlFade,
 }

package/out/theme/styles/utilities/index.d.ts

@@ -3,7 +3,7 @@ export { default as makeStyles } from "./makeStyles";
 export { default as classNames, cx } from "./classNames";
 export { applyVariants, CompoundVariant } from "./variants";
 export { default as componentStyles } from "./componentStyles";
-export { focusRing } from "./focusRing";
+export { controlFade, focusRing } from "./focusRing";
 export { resolveResponsive, Responsive } from "../../../hooks/breakpoints";
 export { clearStyleCaches, createStyleCache, styleDepsKey } from "./styleCache";
 export { resolveSx, resolvePaletteToken, PaletteToken, ResolvedSx, SxColor, SxGradient, SxInput } from "./resolveSx";

package/out/theme/styles/utilities/init.luau

@@ -8,7 +8,9 @@ exports.classNames = _classNames.default
 exports.cx = _classNames.cx
 exports.applyVariants = TS.import(script, script, "variants").applyVariants
 exports.componentStyles = TS.import(script, script, "componentStyles").default
-exports.focusRing = TS.import(script, script, "focusRing").focusRing
+local _focusRing = TS.import(script, script, "focusRing")
+exports.controlFade = _focusRing.controlFade
+exports.focusRing = _focusRing.focusRing
 exports.resolveResponsive = TS.import(script, script.Parent.Parent.Parent, "hooks", "breakpoints").resolveResponsive
 local _styleCache = TS.import(script, script, "styleCache")
 exports.clearStyleCaches = _styleCache.clearStyleCaches

package/out/theme/themes/DarkTheme.luau

@@ -5,8 +5,10 @@ local _NumberConstants = TS.import(script, script.Parent.Parent, "constants", "N
 local BORDER_RADIUS = _NumberConstants.BORDER_RADIUS
 local CONTENT_WIDTH = _NumberConstants.CONTENT_WIDTH
 local ICON_SIZES = _NumberConstants.ICON_SIZES
+local MOTION = _NumberConstants.MOTION
 local PADDING_BASE = _NumberConstants.PADDING_BASE
 local PILL_SCALE = _NumberConstants.PILL_SCALE
+local RADIUS = _NumberConstants.RADIUS
 local SPACING_BASE = _NumberConstants.SPACING_BASE
 local DEFAULT_BORDERS = TS.import(script, script.Parent.Parent, "constants", "ColorConstants").DEFAULT_BORDERS
 local allFontFamilies = TS.import(script, script.Parent.Parent, "interfaces", "typography", "FontFamilies").allFontFamilies
@@ -15,6 +17,7 @@ local createDarkPalette = TS.import(script, script.Parent, "createPalette").crea
 local DarkTheme = {
 	type = "Dark",
 	density = "comfortable",
+	motion = MOTION,
 	palette = createDarkPalette(),
 	spacing = {
 		default = SPACING_BASE,
@@ -31,6 +34,7 @@ local DarkTheme = {
 	shape = {
 		borderRadius = BORDER_RADIUS,
 		pillScale = PILL_SCALE,
+		radius = RADIUS,
 	},
 	typography = {
 		fontSizes = allFontSizes,

package/out/theme/themes/LightTheme.luau

@@ -5,8 +5,10 @@ local _NumberConstants = TS.import(script, script.Parent.Parent, "constants", "N
 local BORDER_RADIUS = _NumberConstants.BORDER_RADIUS
 local CONTENT_WIDTH = _NumberConstants.CONTENT_WIDTH
 local ICON_SIZES = _NumberConstants.ICON_SIZES
+local MOTION = _NumberConstants.MOTION
 local PADDING_BASE = _NumberConstants.PADDING_BASE
 local PILL_SCALE = _NumberConstants.PILL_SCALE
+local RADIUS = _NumberConstants.RADIUS
 local SPACING_BASE = _NumberConstants.SPACING_BASE
 local DEFAULT_BORDERS = TS.import(script, script.Parent.Parent, "constants", "ColorConstants").DEFAULT_BORDERS
 local allFontFamilies = TS.import(script, script.Parent.Parent, "interfaces", "typography", "FontFamilies").allFontFamilies
@@ -15,6 +17,7 @@ local createLightPalette = TS.import(script, script.Parent, "createPalette").cre
 local LightTheme = {
 	type = "Light",
 	density = "comfortable",
+	motion = MOTION,
 	palette = createLightPalette(),
 	spacing = {
 		default = SPACING_BASE,
@@ -31,6 +34,7 @@ local LightTheme = {
 	shape = {
 		borderRadius = BORDER_RADIUS,
 		pillScale = PILL_SCALE,
+		radius = RADIUS,
 	},
 	typography = {
 		fontSizes = allFontSizes,

package/out/theme/themes/createPalette.luau

@@ -5,6 +5,7 @@ local Blue = _colors.Blue
 local Common = _colors.Common
 local Gray = _colors.Gray
 local Green = _colors.Green
+local Orange = _colors.Orange
 local Purple = _colors.Purple
 local Red = _colors.Red
 local Yellow = _colors.Yellow
@@ -64,6 +65,13 @@ local createLightPalette = function()
 		},
 		backdrop = Common.Black,
 		shadow = Common.Black,
+		code = {
+			keyword = Purple[80],
+			string = Green[90],
+			number = Orange[80],
+			comment = Gray[70],
+			func = Blue[90],
+		},
 	}
 end
 local createDarkPalette = function()
@@ -103,6 +111,13 @@ local createDarkPalette = function()
 		},
 		backdrop = Common.Black,
 		shadow = Common.Black,
+		code = {
+			keyword = Purple[30],
+			string = Green[50],
+			number = Orange[40],
+			comment = Gray[50],
+			func = Blue[40],
+		},
 	}
 end
 return {

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

@@ -2,14 +2,20 @@
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
+local useEffect = _react.useEffect
+local useRef = _react.useRef
 local useState = _react.useState
-local Icons = TS.import(script, script.Parent.Parent.Parent.Parent, "enums").Icons
+local useReducedMotion = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "hooks").useReducedMotion
+local _theme = TS.import(script, script.Parent.Parent.Parent.Parent.Parent, "theme")
+local controlMetrics = _theme.controlMetrics
+local cx = _theme.cx
+local useTheme = _theme.useTheme
+local playProperty = TS.import(script, script.Parent.Parent.Parent, "motion", "play").playProperty
 local SxHost = TS.import(script, script.Parent.Parent.Parent, "host").SxHost
 local Collapse = TS.import(script, script.Parent.Parent.Parent, "collapse").Collapse
+local Icon = TS.import(script, script.Parent.Parent.Parent, "icon").Icon
 local accordionNote = TS.import(script, script.Parent, "accordionNote").accordionNote
-local _accordionOpen = TS.import(script, script.Parent, "accordionOpen")
-local accordionGlyph = _accordionOpen.accordionGlyph
-local accordionOpen = _accordionOpen.accordionOpen
+local accordionOpen = TS.import(script, script.Parent, "accordionOpen").accordionOpen
 local useAccordionStyles = TS.import(script, script.Parent, "Accordion.styles").default
 local function Accordion(props)
 	local _binding = props
@@ -26,12 +32,27 @@ local function Accordion(props)
 	local id = _binding.id
 	local ref = _binding.ref
 	local localOpen, setLocalOpen = useState(defaultOpen == true)
+	local hovering, setHovering = useState(false)
 	local open = accordionOpen(localOpen, controlled)
 	local summary = accordionNote(note)
 	local styles = useAccordionStyles({
 		open = open,
 		disabled = disabled,
 	})
+	local _binding_1 = useTheme()
+	local theme = _binding_1.theme
+	local reduced = useReducedMotion()
+	local iconRef = useRef()
+	local icon = controlMetrics(theme.density).icon
+	useEffect(function()
+		local icon = iconRef.current
+		if not icon then
+			return nil
+		end
+		return playProperty(icon, {
+			Rotation = if open then 90 else 0,
+		}, theme.motion.default, reduced)
+	end, { open, reduced, theme })
 	local toggle = function()
 		if disabled == true then
 			return nil
@@ -66,78 +87,101 @@ local function Accordion(props)
 		setmetatable(_attributes_1, nil)
 		_condition_1 = React.createElement("uicorner", _attributes_1)
 	end
-	local _attributes_1 = table.clone(styles.list)
+	local _attributes_1 = table.clone(styles.stroke)
 	setmetatable(_attributes_1, nil)
-	local _exp = React.createElement("uilistlayout", _attributes_1)
-	local _attributes_2 = {
+	local _exp = React.createElement("uistroke", _attributes_1)
+	local _attributes_2 = table.clone(styles.list)
+	setmetatable(_attributes_2, nil)
+	local _exp_1 = React.createElement("uilistlayout", _attributes_2)
+	local _attributes_3 = {
 		key = "Header",
 	}
-	for _k, _v in styles.header do
-		_attributes_2[_k] = _v
+	for _k, _v in cx(styles.header, hovering and disabled ~= true and styles.hover) do
+		_attributes_3[_k] = _v
 	end
-	_attributes_2.Event = {
+	_attributes_3.Event = {
 		Activated = toggle,
+		MouseEnter = function()
+			return setHovering(true)
+		end,
+		MouseLeave = function()
+			return setHovering(false)
+		end,
 	}
-	local _attributes_3 = table.clone(styles.padding)
-	setmetatable(_attributes_3, nil)
-	local _exp_1 = React.createElement("uipadding", _attributes_3)
+	local _attributes_4 = table.clone(styles.tail)
+	setmetatable(_attributes_4, nil)
+	local _exp_2 = React.createElement("uipadding", _attributes_4)
 	local _result
 	if summary == nil then
-		local _attributes_4 = {
+		local _attributes_5 = {
 			key = "Title",
 		}
 		for _k, _v in styles.title do
-			_attributes_4[_k] = _v
+			_attributes_5[_k] = _v
 		end
-		_attributes_4.Text = title
-		_result = (React.createElement("textlabel", _attributes_4))
+		_attributes_5.Text = title
+		_result = (React.createElement("textlabel", _attributes_5))
 	else
-		local _attributes_4 = {
+		local _attributes_5 = {
 			key = "Copy",
 		}
 		for _k, _v in styles.copy do
-			_attributes_4[_k] = _v
+			_attributes_5[_k] = _v
 		end
-		local _exp_2 = React.createElement("uilistlayout", {
+		local _exp_3 = React.createElement("uilistlayout", {
 			FillDirection = Enum.FillDirection.Vertical,
 			SortOrder = Enum.SortOrder.LayoutOrder,
 			Padding = UDim.new(0, 0),
 		})
-		local _attributes_5 = {
+		local _attributes_6 = {
 			key = "Title",
 		}
 		for _k, _v in styles.title do
-			_attributes_5[_k] = _v
+			_attributes_6[_k] = _v
 		end
-		_attributes_5.Size = UDim2.new(1, 0, 0, 0)
-		_attributes_5.Text = title
-		_attributes_5.LayoutOrder = 1
-		local _exp_3 = React.createElement("textlabel", _attributes_5)
-		local _attributes_6 = {
+		_attributes_6.Position = UDim2.new(0, 0, 0, 0)
+		_attributes_6.Size = UDim2.new(1, 0, 0, 0)
+		_attributes_6.Text = title
+		_attributes_6.LayoutOrder = 1
+		local _exp_4 = React.createElement("textlabel", _attributes_6)
+		local _attributes_7 = {
 			key = "Note",
 		}
 		for _k, _v in styles.note do
-			_attributes_6[_k] = _v
+			_attributes_7[_k] = _v
 		end
-		_attributes_6.Text = summary
-		_attributes_6.LayoutOrder = 2
-		_result = (React.createElement("frame", _attributes_4, _exp_2, _exp_3, React.createElement("textlabel", _attributes_6)))
+		_attributes_7.Text = summary
+		_attributes_7.LayoutOrder = 2
+		_result = (React.createElement("frame", _attributes_5, _exp_3, _exp_4, React.createElement("textlabel", _attributes_7)))
 	end
-	local _attributes_4 = {
+	local _exp_3 = React.createElement("textbutton", _attributes_3, _exp_2, _result, React.createElement(SxHost, {
+		tag = "frame",
 		key = "Icon",
+		hostRef = iconRef,
+		base = {
+			BackgroundTransparency = 1,
+			BorderSizePixel = 0,
+			Size = UDim2.new(0, icon, 0, icon),
+		},
+		className = styles.icon,
+	}, React.createElement(Icon, {
+		glyph = "chevronRight",
+		size = icon,
+		tint = if disabled == true then theme.palette.text.disabled else theme.palette.text.primary,
+	})))
+	local _attributes_5 = {
+		key = "Inset",
 	}
-	for _k, _v in styles.icon do
-		_attributes_4[_k] = _v
+	for _k, _v in styles.band do
+		_attributes_5[_k] = _v
 	end
-	_attributes_4.Image = if accordionGlyph(open) == "expanded" then Icons.Expanded else Icons.Collapsed
-	local _exp_2 = React.createElement("textbutton", _attributes_2, _exp_1, _result, React.createElement("imagelabel", _attributes_4))
-	local _attributes_5 = table.clone(styles.padding)
-	setmetatable(_attributes_5, nil)
-	return React.createElement(SxHost, _attributes, _condition_1, _exp, _exp_2, React.createElement(Collapse, {
+	local _attributes_6 = table.clone(styles.tail)
+	setmetatable(_attributes_6, nil)
+	return React.createElement(SxHost, _attributes, _condition_1, _exp, _exp_1, _exp_3, React.createElement(Collapse, {
 		key = "Body",
 		open = open,
 		className = styles.body,
-	}, React.createElement("uipadding", _attributes_5), children))
+	}, React.createElement("frame", _attributes_5, React.createElement("uipadding", _attributes_6), children)))
 end
 local default = Accordion
 return {