@rbxts/uiblox 0.1.53 → 0.2.0-alpha.1

package/out/theme/constants/NumberConstants.luau

@@ -1,13 +1,12 @@
 -- Compiled with roblox-ts v3.0.0
-local SPACING_BASE = 12
+local SPACING_BASE = 8
 local PADDING_BASE = 4
--- align with UIBlox design
 local BORDER_RADIUS = 4
 local CONTENT_WIDTH = 1024
 local ICON_SIZES = {
 	small = 16,
-	medium = 36,
-	large = 48,
+	medium = 24,
+	large = 32,
 }
 return {
 	SPACING_BASE = SPACING_BASE,

package/out/theme/context/ThemeProvider.d.ts

@@ -1,5 +1,8 @@
+import React from "@rbxts/react";
 import { Theme } from "../interfaces/index";
 import { CustomizedProps } from "../types/index";
+import { ThemeScope } from "./themeScope";
+export declare const ThemeContext: React.Context<ThemeScope<Theme> | undefined>;
 export interface ThemeProviderProps {
     theme?: Theme;
 }

package/out/theme/context/ThemeProvider.luau

@@ -2,11 +2,11 @@
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
 local React = _react
-local StrictMode = _react.StrictMode
 local useEffect = _react.useEffect
-local ReflexProvider = TS.import(script, TS.getModule(script, "@rbxts", "react-reflex")).ReflexProvider
+local useMemo = _react.useMemo
+local useState = _react.useState
 local DEFAULT_THEME = TS.import(script, script.Parent.Parent, "constants").DEFAULT_THEME
-local themeProducer = TS.import(script, script.Parent, "ThemeProducer").themeProducer
+local ThemeContext = React.createContext(nil)
 local function ThemeProvider(props)
 	local _binding = props
 	local theme = _binding.theme
@@ -14,15 +14,22 @@ local function ThemeProvider(props)
 		theme = DEFAULT_THEME
 	end
 	local children = _binding.children
-	-- When theme prop changes
+	local current, setCurrent = useState(theme)
 	useEffect(function()
-		themeProducer.setTheme(theme)
+		setCurrent(theme)
 	end, { theme })
-	return React.createElement(StrictMode, nil, React.createElement(ReflexProvider, {
-		producer = themeProducer,
-	}, children))
+	local value = useMemo(function()
+		return {
+			theme = current,
+			setTheme = setCurrent,
+		}
+	end, { current })
+	return React.createElement(ThemeContext.Provider, {
+		value = value,
+	}, children)
 end
 local default = ThemeProvider
 return {
+	ThemeContext = ThemeContext,
 	default = default,
 }

package/out/theme/context/themeScope.d.ts

@@ -0,0 +1,5 @@
+export interface ThemeScope<T> {
+    theme: T;
+    setTheme: (theme: T) => void;
+}
+export declare function readScopedTheme<T>(provided: ThemeScope<T> | undefined, fallback: ThemeScope<T>): ThemeScope<T>;

package/out/theme/context/themeScope.luau

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local function readScopedTheme(provided, fallback)
+	return provided or fallback
+end
+return {
+	readScopedTheme = readScopedTheme,
+}

package/out/theme/hooks/useTheme.luau

@@ -1,29 +1,30 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local _react = TS.import(script, TS.getModule(script, "@rbxts", "react"))
+local useContext = _react.useContext
 local useEffect = _react.useEffect
-local useMemo = _react.useMemo
 local useState = _react.useState
+local ThemeContext = TS.import(script, script.Parent.Parent, "context", "ThemeProvider").ThemeContext
 local themeProducer = TS.import(script, script.Parent.Parent, "context", "ThemeProducer").themeProducer
+local readScopedTheme = TS.import(script, script.Parent.Parent, "context", "themeScope").readScopedTheme
 local useTheme = function()
-	local theme, setTheme = useState(themeProducer:getState())
+	local provided = useContext(ThemeContext)
+	local fallbackTheme, setFallbackTheme = useState(themeProducer:getState())
 	useEffect(function()
-		local unsubscribeFn = themeProducer:subscribe(function(state, _previousState)
-			setTheme(state)
+		if provided then
+			return nil
+		end
+		local unsubscribeFn = themeProducer:subscribe(function(state)
+			setFallbackTheme(state)
 		end)
 		return function()
 			unsubscribeFn()
 		end
-	end)
-	local memoizedSetTheme = useMemo(function()
-		return themeProducer.setTheme
-	end, { themeProducer.setTheme })
-	return useMemo(function()
-		return {
-			theme = theme,
-			setTheme = memoizedSetTheme,
-		}
-	end, { theme, setTheme })
+	end, { provided })
+	return readScopedTheme(provided, {
+		theme = fallbackTheme,
+		setTheme = themeProducer.setTheme,
+	})
 end
 local default = useTheme
 return {

package/out/theme/interfaces/density/controlMetrics.d.ts

@@ -0,0 +1,21 @@
+export type ControlSize = "small" | "medium" | "large";
+export type ThemeDensity = "compact" | "comfortable";
+export interface ControlMetrics {
+    height: number;
+    checkbox: number;
+    switchTrackW: number;
+    switchTrackH: number;
+    switchThumb: number;
+    switchInset: number;
+    sliderHeight: number;
+    sliderTrack: number;
+    sliderKnob: number;
+    radio: number;
+    icon: number;
+    font: number;
+    markFont: number;
+    buttonHeight: number;
+    buttonWidth: number;
+}
+export declare function resolveControlSize(density?: ThemeDensity, size?: ControlSize): ControlSize;
+export declare function controlMetrics(density?: ThemeDensity, size?: ControlSize): ControlMetrics;

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

@@ -0,0 +1,67 @@
+-- Compiled with roblox-ts v3.0.0
+local METRICS = {
+	small = {
+		height = 22,
+		checkbox = 16,
+		switchTrackW = 32,
+		switchTrackH = 18,
+		switchThumb = 14,
+		switchInset = 2,
+		sliderHeight = 22,
+		sliderTrack = 4,
+		sliderKnob = 12,
+		radio = 14,
+		icon = 14,
+		font = 13,
+		markFont = 11,
+		buttonHeight = 24,
+		buttonWidth = 96,
+	},
+	medium = {
+		height = 24,
+		checkbox = 20,
+		switchTrackW = 48,
+		switchTrackH = 24,
+		switchThumb = 18,
+		switchInset = 3,
+		sliderHeight = 24,
+		sliderTrack = 6,
+		sliderKnob = 14,
+		radio = 18,
+		icon = 18,
+		font = 14,
+		markFont = 12,
+		buttonHeight = 36,
+		buttonWidth = 144,
+	},
+	large = {
+		height = 36,
+		checkbox = 24,
+		switchTrackW = 60,
+		switchTrackH = 36,
+		switchThumb = 30,
+		switchInset = 3,
+		sliderHeight = 36,
+		sliderTrack = 8,
+		sliderKnob = 18,
+		radio = 22,
+		icon = 18,
+		font = 16,
+		markFont = 12,
+		buttonHeight = 48,
+		buttonWidth = 192,
+	},
+}
+local function resolveControlSize(density, size)
+	if size ~= nil then
+		return size
+	end
+	return if density == "compact" then "small" else "medium"
+end
+local function controlMetrics(density, size)
+	return METRICS[resolveControlSize(density, size)]
+end
+return {
+	resolveControlSize = resolveControlSize,
+	controlMetrics = controlMetrics,
+}

package/out/theme/interfaces/density/index.d.ts

@@ -0,0 +1 @@
+export { controlMetrics, resolveControlSize, type ControlMetrics, type ControlSize, type ThemeDensity, } from "./controlMetrics";

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

@@ -0,0 +1,7 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+local _controlMetrics = TS.import(script, script, "controlMetrics")
+exports.controlMetrics = _controlMetrics.controlMetrics
+exports.resolveControlSize = _controlMetrics.resolveControlSize
+return exports

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

@@ -1,4 +1,5 @@
 export { IconSizes } from "./iconSizes/index";
+export * from "./density/index";
 export * from "./palette/index";
 export { Borders } from "./spacing/index";
 export { Padding } from "./spacing/index";

package/out/theme/interfaces/init.luau

@@ -1,6 +1,9 @@
 -- Compiled with roblox-ts v3.0.0
 local TS = _G[script]
 local exports = {}
+for _k, _v in TS.import(script, script, "density") or {} do
+	exports[_k] = _v
+end
 for _k, _v in TS.import(script, script, "palette") or {} do
 	exports[_k] = _v
 end

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

@@ -1,26 +1,47 @@
+export interface BrandRole {
+    main: Color3;
+    on: Color3;
+    hover: Color3;
+    pressed: Color3;
+}
+export interface StatusRole {
+    main: Color3;
+    on: Color3;
+    surface: Color3;
+    border: Color3;
+}
 export default interface Palette {
-    primary: {
-        main: Color3;
-    };
-    secondary: {
-        main: Color3;
-    };
-    error: {
-        main: Color3;
-    };
-    warning: {
-        main: Color3;
-    };
-    success: {
-        main: Color3;
-    };
-    background: {
-        default: Color3;
+    surface: {
+        canvas: Color3;
         paper: Color3;
+        elevated: Color3;
+        overlay: Color3;
+        input: Color3;
     };
-    divider: Color3;
+    primary: BrandRole;
+    accent: BrandRole;
     text: {
         primary: Color3;
         secondary: Color3;
+        disabled: Color3;
+        inverse: Color3;
+        link: Color3;
+    };
+    border: Color3;
+    divider: Color3;
+    focus: Color3;
+    action: {
+        hover: Color3;
+        pressed: Color3;
+        selected: Color3;
+        disabled: Color3;
+    };
+    status: {
+        success: StatusRole;
+        warning: StatusRole;
+        error: StatusRole;
+        info: StatusRole;
     };
+    backdrop: Color3;
+    shadow: Color3;
 }

package/out/theme/interfaces/palette/colors/index.d.ts

@@ -10,4 +10,3 @@ export { default as Turquoise } from "./Turquoise";
 export { default as Yellow } from "./Yellow";
 export { default as Dark } from "./Dark";
 export { default as Light } from "./Light";
-export { default as Colors } from "./Colors";

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

@@ -1,3 +1,4 @@
 export * from "./colors/index";
 export { ColorTokens } from "./colorTokens/index";
 export { default as Palette } from "./Palette";
+export type { BrandRole, StatusRole } from "./Palette";

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

@@ -1,14 +1,27 @@
+import { ThemeDensity } from "../density/index";
 import { Palette } from "../palette/index";
 import { Padding, Shape, Spacing } from "../spacing/index";
 import { ThemeTypography } from "../typography/index";
 import ThemeOptions from "./ThemeOptions";
 interface Theme {
     type: string;
+    density: ThemeDensity;
+    reducedMotion?: boolean;
     options: ThemeOptions;
     palette: Palette;
     padding: Padding;
     shape: Shape;
     spacing: Spacing;
     typography: ThemeTypography;
+    components?: {
+        [name: string]: {
+            defaultProps?: {
+                [key: string]: unknown;
+            };
+            styleOverrides?: {
+                [slot: string]: object;
+            };
+        };
+    };
 }
 export default Theme;

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

@@ -1,25 +1,7 @@
 import { Borders } from "../spacing/index";
 import { IconSizes } from "../iconSizes/index";
-import { ColorTokens } from "../palette/colorTokens/index";
-import { CommonColors } from "../palette/colors/Common";
-import { Colors } from "../palette/colors/index";
 export default interface ThemeConstants {
     contentWidth: number;
     iconSizes: IconSizes;
-    colors: Colors;
     borders: Borders;
-    extendedPalette: {
-        Blue: ColorTokens;
-        Common: CommonColors;
-        Dark: ColorTokens;
-        Gray: ColorTokens;
-        Green: ColorTokens;
-        Light: ColorTokens;
-        Magenta: ColorTokens;
-        Orange: ColorTokens;
-        Purple: ColorTokens;
-        Red: ColorTokens;
-        Turquoise: ColorTokens;
-        Yellow: ColorTokens;
-    };
 }

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

@@ -1,3 +1,3 @@
 import { FontSizeOptions } from "./FontSizeOptions";
-export declare const baseFontSize = 16;
+export declare const baseFontSize = 14;
 export declare const allFontSizes: FontSizeOptions;

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

@@ -1,13 +1,13 @@
 -- Compiled with roblox-ts v3.0.0
-local baseFontSize = 16
+local baseFontSize = 14
 local allFontSizes = {
-	h1 = baseFontSize * 2,
-	h2 = baseFontSize * 1.5,
-	h3 = baseFontSize * 1.25,
+	h1 = 28,
+	h2 = 22,
+	h3 = 18,
 	body = baseFontSize,
-	caption = baseFontSize * 0.75,
-	overline = baseFontSize * 0.625,
-	button = baseFontSize * 0.875,
+	caption = 12,
+	overline = 10,
+	button = 13,
 }
 return {
 	baseFontSize = baseFontSize,

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

@@ -1,7 +1,6 @@
 export { ClassNameMap } from "./types/index";
 export { WriteableStyle } from "./types/index";
-export { ConditionalStylesMap } from "./types/index";
 export { createStyles } from "./utilities/index";
 export { makeStyles } from "./utilities/index";
-export { classNames } from "./utilities/index";
+export { classNames, cx } from "./utilities/index";
 export * from "./utilities/index";

package/out/theme/styles/init.luau

@@ -3,7 +3,9 @@ local TS = _G[script]
 local exports = {}
 exports.createStyles = TS.import(script, script, "utilities").createStyles
 exports.makeStyles = TS.import(script, script, "utilities").makeStyles
-exports.classNames = TS.import(script, script, "utilities").classNames
+local _utilities = TS.import(script, script, "utilities")
+exports.classNames = _utilities.classNames
+exports.cx = _utilities.cx
 for _k, _v in TS.import(script, script, "utilities") or {} do
 	exports[_k] = _v
 end

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

@@ -1,3 +1,2 @@
 export { ClassNameMap } from "./styles";
 export { WriteableStyle } from "./WriteableStyle";
-export { ConditionalStylesMap } from "./ConditionalStylesMap";

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

@@ -1,3 +1,4 @@
-import { WriteableStyle, ConditionalStylesMap } from "../types/index";
-declare function classNames<T extends Instance>(...args: [...Array<WriteableStyle<T> | undefined>, ConditionalStylesMap<T>] | [...Array<WriteableStyle<T> | undefined>]): WriteableStyle<T>;
+import type { WriteableStyle } from "../types/index";
+declare const classNames: <T extends Instance>(...args: Array<WriteableStyle<T> | false | undefined>) => WriteableStyle<T>;
 export default classNames;
+export { classNames as cx };

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

@@ -1,187 +1,21 @@
 -- Compiled with roblox-ts v3.0.0
-local TS = _G[script]
-local classNamesInternal = function(conditionalStyles, ...)
-	local styles = { ... }
+local classNames = function(...)
+	local args = { ... }
 	local style = {}
-	-- ▼ ReadonlyArray.filterUndefined ▼
-	local _length = 0
-	for _i in styles do
-		if _i > _length then
-			_length = _i
-		end
-	end
-	local _result = {}
-	local _resultLength = 0
-	for _i = 1, _length do
-		local _v = styles[_i]
-		if _v ~= nil then
-			_resultLength += 1
-			_result[_resultLength] = _v
-		end
-	end
-	-- ▲ ReadonlyArray.filterUndefined ▲
-	-- ▼ ReadonlyArray.forEach ▼
-	local _callback = function(value)
-		if value ~= 0 and value == value and value ~= "" and value then
+	for _, arg in args do
+		if arg ~= false and arg ~= nil then
 			local _object = table.clone(style)
 			setmetatable(_object, nil)
-			for _k, _v in value do
+			for _k, _v in arg do
 				_object[_k] = _v
 			end
 			style = _object
 		end
 	end
-	for _k, _v in _result do
-		_callback(_v, _k - 1, _result)
-	end
-	-- ▲ ReadonlyArray.forEach ▲
-	local _result_1 = conditionalStyles
-	if _result_1 ~= nil then
-		-- ▼ ReadonlyMap.forEach ▼
-		local _callback_1 = function(value, key)
-			if value then
-				local _object = table.clone(style)
-				setmetatable(_object, nil)
-				if key ~= 0 and key == key and key ~= "" and key then
-					for _k, _v in key do
-						_object[_k] = _v
-					end
-				end
-				style = _object
-			end
-		end
-		for _k, _v in _result_1 do
-			_callback_1(_v, _k, _result_1)
-		end
-		-- ▲ ReadonlyMap.forEach ▲
-	end
-	local _object = table.clone(style)
-	setmetatable(_object, nil)
-	return _object
-end
--- Use variadic tuple types to allow for multiple WriteableStyle<T> arguments with an optional ConditionalStyles<T> argument at the end
-local function classNames(...)
-	local args = { ... }
-	-- Check if last argument is ConditionalStyles
-	local hasConditionalStyles = function(args)
-		local _exitType, _returns = TS.try(function()
-			local lastArg = args[#args]
-			-- If the last argument is undefined or not a table then its not a ConditionalStyles<T>
-			-- Map<K, V> compiles to a table literal (ref: https://roblox-ts.com/docs/api/constructors)
-			if lastArg == nil or not (type(lastArg) == "table") then
-				return TS.TRY_RETURN, { false }
-			end
-			local lastArgAsConditionalStylesMap = lastArg
-			local matchesMapFormat = true
-			local _result = lastArgAsConditionalStylesMap
-			if _result ~= nil then
-				-- ▼ ReadonlyMap.forEach ▼
-				local _callback = function(value, key)
-					-- Assume that the last argument is a ConditionalStyles<T> with correct format (Map<WriteableStyle<T>, boolean>)
-					-- If the key is not a WriteableStyle<T> then it does not match the format
-					-- If the value is not a boolean then it does not match the format
-					local _value = value
-					local _condition = not (type(_value) == "boolean")
-					if not _condition then
-						local _key = key
-						_condition = not (type(_key) == "table")
-					end
-					if _condition then
-						matchesMapFormat = false
-					end
-				end
-				for _k, _v in _result do
-					_callback(_v, _k, _result)
-				end
-				-- ▲ ReadonlyMap.forEach ▲
-			end
-			return TS.TRY_RETURN, { matchesMapFormat }
-		end, function()
-			-- If we catch an error, it means that the last argument is not a ConditionalStyles<T>
-			return TS.TRY_RETURN, { false }
-		end)
-		if _exitType then
-			return unpack(_returns)
-		end
-	end
-	local _exitType, _returns = TS.try(function()
-		if hasConditionalStyles(args) then
-			-- Handle case with ConditionalStyles
-			-- ▼ Array.pop ▼
-			local _length = #args
-			local _result = args[_length]
-			args[_length] = nil
-			-- ▲ Array.pop ▲
-			local conditionalStyles = _result
-			local styles = args
-			-- ConditionalStyles<T> is the last argument
-			-- ▼ ReadonlyArray.filterUndefined ▼
-			local _length_1 = 0
-			for _i in styles do
-				if _i > _length_1 then
-					_length_1 = _i
-				end
-			end
-			local _result_1 = {}
-			local _resultLength = 0
-			for _i = 1, _length_1 do
-				local _v = styles[_i]
-				if _v ~= nil then
-					_resultLength += 1
-					_result_1[_resultLength] = _v
-				end
-			end
-			-- ▲ ReadonlyArray.filterUndefined ▲
-			return TS.TRY_RETURN, { classNamesInternal(conditionalStyles, unpack(_result_1)) }
-		end
-	end, function()
-		-- If we catch an error, like attempt to iterate over a string value, it means that the last argument is not a ConditionalStyles<T>
-		local styles = args
-		-- ▼ ReadonlyArray.filterUndefined ▼
-		local _length = 0
-		for _i in styles do
-			if _i > _length then
-				_length = _i
-			end
-		end
-		local _result = {}
-		local _resultLength = 0
-		for _i = 1, _length do
-			local _v = styles[_i]
-			if _v ~= nil then
-				_resultLength += 1
-				_result[_resultLength] = _v
-			end
-		end
-		-- ▲ ReadonlyArray.filterUndefined ▲
-		return TS.TRY_RETURN, { classNamesInternal(nil, unpack(_result)) }
-	end)
-	if _exitType then
-		return unpack(_returns)
-	end
-	-- Handle case without ConditionalStyles
-	-- All args are WriteableStyle<T>
-	local styles = args
-	-- ▼ ReadonlyArray.filterUndefined ▼
-	local _length = 0
-	for _i in styles do
-		if _i > _length then
-			_length = _i
-		end
-	end
-	local _result = {}
-	local _resultLength = 0
-	for _i = 1, _length do
-		local _v = styles[_i]
-		if _v ~= nil then
-			_resultLength += 1
-			_result[_resultLength] = _v
-		end
-	end
-	-- ▲ ReadonlyArray.filterUndefined ▲
-	return classNamesInternal(nil, unpack(_result))
+	return style
 end
 local default = classNames
 return {
 	default = default,
+	cx = classNames,
 }

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

@@ -0,0 +1,7 @@
+import { Theme } from "../../interfaces/theme/index";
+import { ClassNameMap } from "../types/styles";
+type TMakeStyles<ClassKey extends string = string> = (theme: Theme) => ClassNameMap<ClassKey>;
+type TMakeStylesWithProps<Props, ClassKey extends string = string> = (theme: Theme, props: Props) => ClassNameMap<ClassKey>;
+type TVariantF<Props> = keyof Props extends never ? TMakeStyles : TMakeStylesWithProps<Props>;
+declare const componentStyles: <Props = {}, ClassKey extends string = string>(name: string, factory: TVariantF<Props>) => keyof Props extends never ? () => ClassNameMap<ClassKey> : (props: Props) => ClassNameMap<ClassKey>;
+export default componentStyles;