@rbxts/uiblox 0.2.0-alpha.36 → 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

@@ -0,0 +1,7 @@
+export declare function focusRing(color: Color3): {
+    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

@@ -0,0 +1,14 @@
+-- Compiled with roblox-ts v3.0.0
+local function focusRing(color)
+	return {
+		Color = color,
+		Thickness = 2,
+		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,6 +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 { 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,6 +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
+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/styles/utilities/resolveSx.d.ts

@@ -33,10 +33,13 @@ interface SxTheme {
     };
 }
 export type SxColor = PaletteToken | Color3;
-/** Evenly spaced color stops on a UIGradient child. */
+/** Color stops on a UIGradient child. Times default to even spacing. */
 export interface SxGradient {
     colors: SxColor[];
     rotation?: number;
+    times?: number[];
+    transparency?: number | NumberSequence;
+    offset?: Vector2;
 }
 /** CSS-like shorthands + pass-through Instance props. No CSS string parser. */
 export type SxInput = {
@@ -110,6 +113,8 @@ export interface ResolvedSx {
     gradient?: {
         Color: ColorSequence;
         Rotation: number;
+        Transparency?: NumberSequence;
+        Offset?: Vector2;
     };
 }
 /**

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

@@ -108,8 +108,18 @@ local SHORTHAND = {
 	z = true,
 	gradient = true,
 }
---* Evenly spaced color stops on a UIGradient child. 
+--* Color stops on a UIGradient child. Times default to even spacing. 
 --* CSS-like shorthands + pass-through Instance props. No CSS string parser. 
+local function gradientTransparency(value)
+	if value == nil then
+		return nil
+	end
+	local _value = value
+	if type(_value) == "number" then
+		return NumberSequence.new(value)
+	end
+	return value
+end
 local function pick(value, width)
 	if value == nil then
 		return nil
@@ -456,21 +466,46 @@ local function resolveSx(theme, sx, width)
 		end
 		-- ▲ ReadonlyArray.map ▲
 		local stops = _newValue
-		local last = math.max(#stops - 1, 1)
-		-- ▼ ReadonlyArray.map ▼
-		local _newValue_1 = table.create(#stops)
-		local _callback_1 = function(color, index)
-			return ColorSequenceKeypoint.new(if #stops == 1 then 0 else index / last, color)
-		end
-		for _k, _v in stops do
-			_newValue_1[_k] = _callback_1(_v, _k - 1, stops)
+		local count = #stops
+		local last = math.max(count - 1, 1)
+		local times = gradientVal.times
+		local keypoints = {}
+		local previous = 0
+		do
+			local index = 0
+			local _shouldIncrement = false
+			while true do
+				if _shouldIncrement then
+					index += 1
+				else
+					_shouldIncrement = true
+				end
+				if not (index < count) then
+					break
+				end
+				local time = if count == 1 then 0 else index / last
+				if times ~= nil and count > 1 and times[index + 1] ~= nil then
+					if index == 0 then
+						time = 0
+					elseif index == count - 1 then
+						time = 1
+					else
+						time = math.clamp(times[index + 1], previous, 1)
+					end
+				end
+				if time < previous then
+					time = previous
+				end
+				previous = time
+				local _colorSequenceKeypoint = ColorSequenceKeypoint.new(time, stops[index + 1])
+				table.insert(keypoints, _colorSequenceKeypoint)
+			end
 		end
-		-- ▲ ReadonlyArray.map ▲
-		local keypoints = _newValue_1
-		if #stops == 1 then
+		if count == 1 then
 			local _colorSequenceKeypoint = ColorSequenceKeypoint.new(1, stops[1])
 			table.insert(keypoints, _colorSequenceKeypoint)
 		end
+		local transparency = gradientTransparency(gradientVal.transparency)
 		local _object = {
 			Color = ColorSequence.new(keypoints),
 		}
@@ -481,6 +516,12 @@ local function resolveSx(theme, sx, width)
 		end
 		_object[_left] = _condition_4
 		gradient = _object
+		if transparency ~= nil then
+			gradient.Transparency = transparency
+		end
+		if gradientVal.offset ~= nil then
+			gradient.Offset = gradientVal.offset
+		end
 	end
 	for key, raw in pairs(sx) do
 		local name = key

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.d.ts

@@ -2,6 +2,7 @@ import React from "@rbxts/react";
 import { CustomizedProps } from "../../../../theme/index";
 export interface AccordionProps {
     title: string;
+    note?: string;
     open?: boolean;
     defaultOpen?: boolean;
     disabled?: boolean;