@rbxts/uiblox 0.1.52 → 0.2.0-alpha.0

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/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;

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

@@ -0,0 +1,31 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _componentTheme = TS.import(script, script.Parent, "componentTheme")
+local propsWithDefaults = _componentTheme.propsWithDefaults
+local slotsWithOverrides = _componentTheme.slotsWithOverrides
+local makeStyles = TS.import(script, script.Parent, "makeStyles").default
+local componentStyles = function(name, factory)
+	return makeStyles((function(theme, props)
+		local _spec = theme.components
+		if _spec ~= nil then
+			_spec = _spec[name]
+		end
+		local spec = _spec
+		local _result = spec
+		if _result ~= nil then
+			_result = _result.defaultProps
+		end
+		local merged = propsWithDefaults(_result, props)
+		local paint = factory
+		local _exp = paint(theme, merged)
+		local _result_1 = spec
+		if _result_1 ~= nil then
+			_result_1 = _result_1.styleOverrides
+		end
+		return slotsWithOverrides(_exp, _result_1)
+	end))
+end
+local default = componentStyles
+return {
+	default = default,
+}

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

@@ -0,0 +1,20 @@
+export interface ComponentSpec {
+    defaultProps?: {
+        [key: string]: unknown;
+    };
+    styleOverrides?: {
+        [slot: string]: object;
+    };
+}
+export declare function propsWithDefaults(defaults: {
+    [key: string]: unknown;
+} | undefined, props: {
+    [key: string]: unknown;
+} | undefined): {
+    [key: string]: unknown;
+};
+export declare function slotsWithOverrides<Slots extends {
+    [slot: string]: object;
+}>(slots: Slots, overrides: {
+    [slot: string]: object;
+} | undefined): Slots;

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

@@ -0,0 +1,53 @@
+-- Compiled with roblox-ts v3.0.0
+local function propsWithDefaults(defaults, props)
+	if defaults == nil then
+		return props or {}
+	end
+	local merged = {}
+	for key, value in pairs(defaults) do
+		merged[key] = value
+	end
+	if props ~= nil then
+		for key, value in pairs(props) do
+			if value ~= nil then
+				merged[key] = value
+			end
+		end
+	end
+	return merged
+end
+local function slotsWithOverrides(slots, overrides)
+	if overrides == nil then
+		return slots
+	end
+	local _object = table.clone(slots)
+	setmetatable(_object, nil)
+	local painted = _object
+	for slot, style in pairs(overrides) do
+		local name = slot
+		local current = painted[name]
+		local _result
+		if current == nil then
+			_result = style
+		else
+			local _object_1 = {}
+			if current then
+				for _k, _v in current do
+					_object_1[_k] = _v
+				end
+			end
+			if style then
+				for _k, _v in style do
+					_object_1[_k] = _v
+				end
+			end
+			_result = _object_1
+		end
+		painted[name] = _result
+	end
+	return painted
+end
+return {
+	propsWithDefaults = propsWithDefaults,
+	slotsWithOverrides = slotsWithOverrides,
+}

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

@@ -1,3 +1,2 @@
-import { ClassNameMap } from "../types/styles";
-declare const createStyles: <ClassKey extends string = string>(styles: ClassNameMap<ClassKey>) => ClassNameMap<ClassKey>;
+declare const createStyles: <Styles extends Record<string, object>>(styles: Styles) => Styles;
 export default createStyles;

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

@@ -1,3 +1,7 @@
 export { default as createStyles } from "./createStyles";
 export { default as makeStyles } from "./makeStyles";
-export { default as classNames } from "./classNames";
+export { default as classNames, cx } from "./classNames";
+export { applyVariants, CompoundVariant } from "./variants";
+export { default as componentStyles } from "./componentStyles";
+export { resolveResponsive, Responsive } from "../../../hooks/breakpoints";
+export { interactionStyle, InteractionSlots, InteractionState } from "./interaction";

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

@@ -3,5 +3,11 @@ local TS = _G[script]
 local exports = {}
 exports.createStyles = TS.import(script, script, "createStyles").default
 exports.makeStyles = TS.import(script, script, "makeStyles").default
-exports.classNames = TS.import(script, script, "classNames").default
+local _classNames = TS.import(script, script, "classNames")
+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.resolveResponsive = TS.import(script, script.Parent.Parent.Parent, "hooks", "breakpoints").resolveResponsive
+exports.interactionStyle = TS.import(script, script, "interaction").interactionStyle
 return exports