@lattice-ui/style 0.1.1

package/out/index.d.ts

@@ -0,0 +1,10 @@
+export { Box } from "./primitives/Box";
+export { Text } from "./primitives/Text";
+export type { RecipeConfig, RecipeSelection, RecipeVariants } from "./recipe/createRecipe";
+export { createRecipe } from "./recipe/createRecipe";
+export { mergeGuiProps } from "./sx/mergeGuiProps";
+export type { Sx } from "./sx/sx";
+export { mergeSx, resolveSx } from "./sx/sx";
+export { ThemeProvider, useTheme, useThemeValue } from "./theme/ThemeProvider";
+export { createTheme, defaultDarkTheme, defaultLightTheme } from "./theme/tokens";
+export type { PartialTheme, Theme, ThemeColors, ThemeContextValue, ThemeProviderProps, ThemeRadius, ThemeSpace, ThemeTypography, ThemeTypographyStyle, } from "./theme/types";

package/out/init.luau

@@ -0,0 +1,19 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local exports = {}
+exports.Box = TS.import(script, script, "primitives", "Box").Box
+exports.Text = TS.import(script, script, "primitives", "Text").Text
+exports.createRecipe = TS.import(script, script, "recipe", "createRecipe").createRecipe
+exports.mergeGuiProps = TS.import(script, script, "sx", "mergeGuiProps").mergeGuiProps
+local _sx = TS.import(script, script, "sx", "sx")
+exports.mergeSx = _sx.mergeSx
+exports.resolveSx = _sx.resolveSx
+local _ThemeProvider = TS.import(script, script, "theme", "ThemeProvider")
+exports.ThemeProvider = _ThemeProvider.ThemeProvider
+exports.useTheme = _ThemeProvider.useTheme
+exports.useThemeValue = _ThemeProvider.useThemeValue
+local _tokens = TS.import(script, script, "theme", "tokens")
+exports.createTheme = _tokens.createTheme
+exports.defaultDarkTheme = _tokens.defaultDarkTheme
+exports.defaultLightTheme = _tokens.defaultLightTheme
+return exports

package/out/primitives/Box.d.ts

@@ -0,0 +1,10 @@
+import { React } from "@lattice-ui/core";
+import type { Sx } from "../sx/sx";
+type StyleProps = React.Attributes & Record<string, unknown>;
+export type BoxProps = {
+    asChild?: boolean;
+    sx?: Sx<StyleProps>;
+    children?: React.ReactNode;
+} & StyleProps;
+export declare function Box(props: BoxProps): React.JSX.Element;
+export {};

package/out/primitives/Box.luau

@@ -0,0 +1,38 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local mergeGuiProps = TS.import(script, script.Parent.Parent, "sx", "mergeGuiProps").mergeGuiProps
+local resolveSx = TS.import(script, script.Parent.Parent, "sx", "sx").resolveSx
+local useTheme = TS.import(script, script.Parent.Parent, "theme", "ThemeProvider").useTheme
+local function Box(props)
+	local asChild = props.asChild
+	local sx = props.sx
+	local children = props.children
+	local restProps = {}
+	for rawKey, value in pairs(props) do
+		if not (type(rawKey) == "string") then
+			continue
+		end
+		if rawKey == "asChild" or rawKey == "sx" or rawKey == "children" then
+			continue
+		end
+		restProps[rawKey] = value
+	end
+	local _binding = useTheme()
+	local theme = _binding.theme
+	local mergedProps = mergeGuiProps(restProps, resolveSx(sx, theme))
+	if asChild then
+		if not React.isValidElement(children) then
+			error("[Box] `asChild` requires a single child element.")
+		end
+		local _attributes = table.clone(mergedProps)
+		setmetatable(_attributes, nil)
+		return React.createElement(Slot, _attributes, children)
+	end
+	return React.createElement("frame", mergedProps, children)
+end
+return {
+	Box = Box,
+}

package/out/primitives/Text.d.ts

@@ -0,0 +1,10 @@
+import { React } from "@lattice-ui/core";
+import type { Sx } from "../sx/sx";
+type StyleProps = React.Attributes & Record<string, unknown>;
+export type TextProps = {
+    asChild?: boolean;
+    sx?: Sx<StyleProps>;
+    children?: React.ReactNode;
+} & StyleProps;
+export declare function Text(props: TextProps): React.JSX.Element;
+export {};

package/out/primitives/Text.luau

@@ -0,0 +1,38 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local React = _core.React
+local Slot = _core.Slot
+local mergeGuiProps = TS.import(script, script.Parent.Parent, "sx", "mergeGuiProps").mergeGuiProps
+local resolveSx = TS.import(script, script.Parent.Parent, "sx", "sx").resolveSx
+local useTheme = TS.import(script, script.Parent.Parent, "theme", "ThemeProvider").useTheme
+local function Text(props)
+	local asChild = props.asChild
+	local sx = props.sx
+	local children = props.children
+	local restProps = {}
+	for rawKey, value in pairs(props) do
+		if not (type(rawKey) == "string") then
+			continue
+		end
+		if rawKey == "asChild" or rawKey == "sx" or rawKey == "children" then
+			continue
+		end
+		restProps[rawKey] = value
+	end
+	local _binding = useTheme()
+	local theme = _binding.theme
+	local mergedProps = mergeGuiProps(restProps, resolveSx(sx, theme))
+	if asChild then
+		if not React.isValidElement(children) then
+			error("[Text] `asChild` requires a single child element.")
+		end
+		local _attributes = table.clone(mergedProps)
+		setmetatable(_attributes, nil)
+		return React.createElement(Slot, _attributes, children)
+	end
+	return React.createElement("textlabel", mergedProps, children)
+end
+return {
+	Text = Text,
+}

package/out/recipe/createRecipe.d.ts

@@ -0,0 +1,16 @@
+import type { Sx } from "../sx/sx";
+import type { Theme } from "../theme/types";
+type GuiPropRecord = Record<string, unknown>;
+export type RecipeVariants<Props extends GuiPropRecord> = Record<string, Record<string, Sx<Props>>>;
+export type RecipeSelection<Variants extends RecipeVariants<GuiPropRecord>> = Partial<Record<keyof Variants & string, string>>;
+export type RecipeConfig<Props extends GuiPropRecord, Variants extends RecipeVariants<Props>> = {
+    base?: Sx<Props>;
+    variants?: Variants;
+    defaultVariants?: RecipeSelection<Variants>;
+    compoundVariants?: Array<{
+        variants: RecipeSelection<Variants>;
+        sx: Sx<Props>;
+    }>;
+};
+export declare function createRecipe<Props extends GuiPropRecord, Variants extends RecipeVariants<Props>>(config: RecipeConfig<Props, Variants>): (selection: RecipeSelection<Variants> | undefined, theme: Theme) => Partial<Props>;
+export {};

package/out/recipe/createRecipe.luau

@@ -0,0 +1,63 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local mergeGuiProps = TS.import(script, script.Parent.Parent, "sx", "mergeGuiProps").mergeGuiProps
+local resolveSx = TS.import(script, script.Parent.Parent, "sx", "sx").resolveSx
+local function isCompoundMatch(candidate, resolvedSelection)
+	local candidateRecord = candidate
+	local resolvedRecord = resolvedSelection
+	for rawVariantName, rawExpectedValue in pairs(candidateRecord) do
+		if not (type(rawVariantName) == "string") or not (type(rawExpectedValue) == "string") then
+			continue
+		end
+		local actualValue = resolvedRecord[rawVariantName]
+		if actualValue ~= rawExpectedValue then
+			return false
+		end
+	end
+	return true
+end
+local function createRecipe(config)
+	return function(selection, theme)
+		local _condition = config.defaultVariants
+		if _condition == nil then
+			_condition = {}
+		end
+		local _object = table.clone(_condition)
+		setmetatable(_object, nil)
+		local _condition_1 = selection
+		if _condition_1 == nil then
+			_condition_1 = {}
+		end
+		for _k, _v in _condition_1 do
+			_object[_k] = _v
+		end
+		local resolvedSelection = _object
+		local merged = resolveSx(config.base, theme)
+		local variants = config.variants
+		if variants then
+			local variantsRecord = variants
+			local resolvedRecord = resolvedSelection
+			for rawVariantName, rawVariantMap in pairs(variantsRecord) do
+				if not (type(rawVariantName) == "string") or not (type(rawVariantMap) == "table") then
+					continue
+				end
+				local selectedValue = resolvedRecord[rawVariantName]
+				if selectedValue == nil then
+					continue
+				end
+				local sx = rawVariantMap[selectedValue]
+				merged = mergeGuiProps(merged, resolveSx(sx, theme))
+			end
+		end
+		for _, compound in config.compoundVariants or {} do
+			if not isCompoundMatch(compound.variants, resolvedSelection) then
+				continue
+			end
+			merged = mergeGuiProps(merged, resolveSx(compound.sx, theme))
+		end
+		return merged
+	end
+end
+return {
+	createRecipe = createRecipe,
+}

package/out/sx/mergeGuiProps.d.ts

@@ -0,0 +1,3 @@
+type GuiPropRecord = Record<string, unknown>;
+export declare function mergeGuiProps<Props extends GuiPropRecord>(base?: Partial<Props>, variant?: Partial<Props>, user?: Partial<Props>): Partial<Props>;
+export {};

package/out/sx/mergeGuiProps.luau

@@ -0,0 +1,105 @@
+-- Compiled with roblox-ts v3.0.0
+local function isRecord(value)
+	local _value = value
+	return type(_value) == "table"
+end
+local function isFn(value)
+	local _value = value
+	return type(_value) == "function"
+end
+local function toHandlerTable(value)
+	if not isRecord(value) then
+		return nil
+	end
+	local out = {}
+	for rawKey, candidate in pairs(value) do
+		if not (type(rawKey) == "string") or not isFn(candidate) then
+			continue
+		end
+		out[rawKey] = candidate
+	end
+	return if (next(out)) ~= nil then out else nil
+end
+local function mergeHandlerTables(tables)
+	local out = {}
+	for _, handlerTable in tables do
+		if not handlerTable then
+			continue
+		end
+		for rawKey, candidate in pairs(handlerTable) do
+			if not (type(rawKey) == "string") or not isFn(candidate) then
+				continue
+			end
+			local previous = out[rawKey]
+			out[rawKey] = if previous ~= nil then function(...)
+				local args = { ... }
+				previous(unpack(args))
+				candidate(unpack(args))
+			end else candidate
+		end
+	end
+	return if (next(out)) ~= nil then out else nil
+end
+local function mergeGuiProps(base, variant, user)
+	local _condition = base
+	if _condition == nil then
+		_condition = {}
+	end
+	local _object = table.clone(_condition)
+	setmetatable(_object, nil)
+	local _condition_1 = variant
+	if _condition_1 == nil then
+		_condition_1 = {}
+	end
+	for _k, _v in _condition_1 do
+		_object[_k] = _v
+	end
+	local _condition_2 = user
+	if _condition_2 == nil then
+		_condition_2 = {}
+	end
+	for _k, _v in _condition_2 do
+		_object[_k] = _v
+	end
+	local merged = _object
+	local _result = base
+	if _result ~= nil then
+		_result = _result.Event
+	end
+	local _exp = toHandlerTable(_result)
+	local _result_1 = variant
+	if _result_1 ~= nil then
+		_result_1 = _result_1.Event
+	end
+	local _exp_1 = toHandlerTable(_result_1)
+	local _result_2 = user
+	if _result_2 ~= nil then
+		_result_2 = _result_2.Event
+	end
+	local mergedEvent = mergeHandlerTables({ _exp, _exp_1, toHandlerTable(_result_2) })
+	if mergedEvent then
+		merged.Event = mergedEvent
+	end
+	local _result_3 = base
+	if _result_3 ~= nil then
+		_result_3 = _result_3.Change
+	end
+	local _exp_2 = toHandlerTable(_result_3)
+	local _result_4 = variant
+	if _result_4 ~= nil then
+		_result_4 = _result_4.Change
+	end
+	local _exp_3 = toHandlerTable(_result_4)
+	local _result_5 = user
+	if _result_5 ~= nil then
+		_result_5 = _result_5.Change
+	end
+	local mergedChange = mergeHandlerTables({ _exp_2, _exp_3, toHandlerTable(_result_5) })
+	if mergedChange then
+		merged.Change = mergedChange
+	end
+	return merged
+end
+return {
+	mergeGuiProps = mergeGuiProps,
+}

package/out/sx/sx.d.ts

@@ -0,0 +1,6 @@
+import type { Theme } from "../theme/types";
+type GuiPropRecord = Record<string, unknown>;
+export type Sx<Props extends GuiPropRecord> = Partial<Props> | ((theme: Theme) => Partial<Props>) | undefined;
+export declare function resolveSx<Props extends GuiPropRecord>(sx: Sx<Props>, theme: Theme): Partial<Props>;
+export declare function mergeSx<Props extends GuiPropRecord>(...sxList: Array<Sx<Props>>): Sx<Props>;
+export {};

package/out/sx/sx.luau

@@ -0,0 +1,31 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local mergeGuiProps = TS.import(script, script.Parent, "mergeGuiProps").mergeGuiProps
+local function isSxResolver(sx)
+	local _sx = sx
+	return type(_sx) == "function"
+end
+local function resolveSx(sx, theme)
+	if not sx then
+		return {}
+	end
+	if isSxResolver(sx) then
+		return sx(theme)
+	end
+	return sx
+end
+local function mergeSx(...)
+	local sxList = { ... }
+	return function(theme)
+		local merged = {}
+		for _, sx in sxList do
+			local resolved = resolveSx(sx, theme)
+			merged = mergeGuiProps(merged, resolved)
+		end
+		return merged
+	end
+end
+return {
+	resolveSx = resolveSx,
+	mergeSx = mergeSx,
+}

package/out/theme/ThemeProvider.d.ts

@@ -0,0 +1,5 @@
+import { React } from "@lattice-ui/core";
+import type { Theme, ThemeContextValue, ThemeProviderProps } from "./types";
+export declare function ThemeProvider(props: ThemeProviderProps): React.JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export declare function useThemeValue<T>(selector: (theme: Theme) => T): T;

package/out/theme/ThemeProvider.luau

@@ -0,0 +1,46 @@
+-- Compiled with roblox-ts v3.0.0
+local TS = _G[script]
+local _core = TS.import(script, TS.getModule(script, "@lattice-ui", "core").out)
+local createStrictContext = _core.createStrictContext
+local React = _core.React
+local defaultLightTheme = TS.import(script, script.Parent, "tokens").defaultLightTheme
+local _binding = createStrictContext("ThemeProvider")
+local ThemeContextProvider = _binding[1]
+local useThemeContext = _binding[2]
+local function ThemeProvider(props)
+	local internalTheme, setInternalTheme = React.useState(props.defaultTheme or defaultLightTheme)
+	local controlled = props.theme ~= nil
+	local resolvedTheme = props.theme or internalTheme
+	local setTheme = React.useCallback(function(nextTheme)
+		if not controlled then
+			setInternalTheme(nextTheme)
+		end
+		local _result = props.onThemeChange
+		if _result ~= nil then
+			_result(nextTheme)
+		end
+	end, { controlled, props.onThemeChange })
+	local contextValue = React.useMemo(function()
+		return {
+			theme = resolvedTheme,
+			setTheme = setTheme,
+		}
+	end, { resolvedTheme, setTheme })
+	return React.createElement(ThemeContextProvider, {
+		value = contextValue,
+	}, props.children)
+end
+local function useTheme()
+	return useThemeContext()
+end
+local function useThemeValue(selector)
+	local context = useThemeContext()
+	return React.useMemo(function()
+		return selector(context.theme)
+	end, { context.theme, selector })
+end
+return {
+	ThemeProvider = ThemeProvider,
+	useTheme = useTheme,
+	useThemeValue = useThemeValue,
+}

package/out/theme/tokens.d.ts

@@ -0,0 +1,4 @@
+import type { PartialTheme, Theme } from "./types";
+export declare const defaultLightTheme: Theme;
+export declare const defaultDarkTheme: Theme;
+export declare function createTheme(partialTheme?: PartialTheme): Theme;

package/out/theme/tokens.luau

@@ -0,0 +1,133 @@
+-- Compiled with roblox-ts v3.0.0
+local defaultSpace = {
+	[0] = 0,
+	[2] = 2,
+	[4] = 4,
+	[6] = 6,
+	[8] = 8,
+	[10] = 10,
+	[12] = 12,
+	[14] = 14,
+	[16] = 16,
+	[20] = 20,
+	[24] = 24,
+	[32] = 32,
+}
+local defaultRadius = {
+	none = 0,
+	sm = 4,
+	md = 8,
+	lg = 12,
+	xl = 16,
+	full = 999,
+}
+local defaultTypography = {
+	labelSm = {
+		font = Enum.Font.Gotham,
+		textSize = 14,
+	},
+	bodyMd = {
+		font = Enum.Font.Gotham,
+		textSize = 16,
+	},
+	titleMd = {
+		font = Enum.Font.GothamBold,
+		textSize = 22,
+	},
+}
+local defaultLightTheme = {
+	colors = {
+		background = Color3.fromRGB(246, 249, 252),
+		surface = Color3.fromRGB(233, 239, 246),
+		surfaceElevated = Color3.fromRGB(255, 255, 255),
+		border = Color3.fromRGB(193, 202, 214),
+		textPrimary = Color3.fromRGB(27, 33, 44),
+		textSecondary = Color3.fromRGB(79, 90, 107),
+		accent = Color3.fromRGB(46, 114, 216),
+		accentContrast = Color3.fromRGB(239, 245, 252),
+		danger = Color3.fromRGB(167, 56, 64),
+		dangerContrast = Color3.fromRGB(254, 236, 238),
+		overlay = Color3.fromRGB(12, 16, 23),
+	},
+	space = defaultSpace,
+	radius = defaultRadius,
+	typography = defaultTypography,
+}
+local defaultDarkTheme = {
+	colors = {
+		background = Color3.fromRGB(18, 21, 26),
+		surface = Color3.fromRGB(32, 37, 46),
+		surfaceElevated = Color3.fromRGB(40, 47, 60),
+		border = Color3.fromRGB(72, 80, 98),
+		textPrimary = Color3.fromRGB(233, 239, 246),
+		textSecondary = Color3.fromRGB(176, 186, 201),
+		accent = Color3.fromRGB(43, 105, 196),
+		accentContrast = Color3.fromRGB(240, 244, 250),
+		danger = Color3.fromRGB(129, 57, 63),
+		dangerContrast = Color3.fromRGB(245, 223, 226),
+		overlay = Color3.fromRGB(8, 10, 14),
+	},
+	space = defaultSpace,
+	radius = defaultRadius,
+	typography = defaultTypography,
+}
+local function mergeTheme(baseTheme, partialTheme)
+	if not partialTheme then
+		local _object = {}
+		local _left = "colors"
+		local _object_1 = table.clone(baseTheme.colors)
+		setmetatable(_object_1, nil)
+		_object[_left] = _object_1
+		local _left_1 = "space"
+		local _object_2 = table.clone(baseTheme.space)
+		setmetatable(_object_2, nil)
+		_object[_left_1] = _object_2
+		local _left_2 = "radius"
+		local _object_3 = table.clone(baseTheme.radius)
+		setmetatable(_object_3, nil)
+		_object[_left_2] = _object_3
+		local _left_3 = "typography"
+		local _object_4 = table.clone(baseTheme.typography)
+		setmetatable(_object_4, nil)
+		_object[_left_3] = _object_4
+		return _object
+	end
+	local _object = {}
+	local _left = "colors"
+	local _object_1 = table.clone(baseTheme.colors)
+	setmetatable(_object_1, nil)
+	for _k, _v in (partialTheme.colors or {}) do
+		_object_1[_k] = _v
+	end
+	_object[_left] = _object_1
+	local _left_1 = "space"
+	local _object_2 = table.clone(baseTheme.space)
+	setmetatable(_object_2, nil)
+	for _k, _v in (partialTheme.space or {}) do
+		_object_2[_k] = _v
+	end
+	_object[_left_1] = _object_2
+	local _left_2 = "radius"
+	local _object_3 = table.clone(baseTheme.radius)
+	setmetatable(_object_3, nil)
+	for _k, _v in (partialTheme.radius or {}) do
+		_object_3[_k] = _v
+	end
+	_object[_left_2] = _object_3
+	local _left_3 = "typography"
+	local _object_4 = table.clone(baseTheme.typography)
+	setmetatable(_object_4, nil)
+	for _k, _v in (partialTheme.typography or {}) do
+		_object_4[_k] = _v
+	end
+	_object[_left_3] = _object_4
+	return _object
+end
+local function createTheme(partialTheme)
+	return mergeTheme(defaultLightTheme, partialTheme)
+end
+return {
+	createTheme = createTheme,
+	defaultLightTheme = defaultLightTheme,
+	defaultDarkTheme = defaultDarkTheme,
+}

package/out/theme/types.d.ts

@@ -0,0 +1,67 @@
+import type React from "@rbxts/react";
+export type ThemeColors = {
+    background: Color3;
+    surface: Color3;
+    surfaceElevated: Color3;
+    border: Color3;
+    textPrimary: Color3;
+    textSecondary: Color3;
+    accent: Color3;
+    accentContrast: Color3;
+    danger: Color3;
+    dangerContrast: Color3;
+    overlay: Color3;
+};
+export type ThemeSpace = {
+    0: number;
+    2: number;
+    4: number;
+    6: number;
+    8: number;
+    10: number;
+    12: number;
+    14: number;
+    16: number;
+    20: number;
+    24: number;
+    32: number;
+};
+export type ThemeRadius = {
+    none: number;
+    sm: number;
+    md: number;
+    lg: number;
+    xl: number;
+    full: number;
+};
+export type ThemeTypographyStyle = {
+    font: Enum.Font;
+    textSize: number;
+};
+export type ThemeTypography = {
+    labelSm: ThemeTypographyStyle;
+    bodyMd: ThemeTypographyStyle;
+    titleMd: ThemeTypographyStyle;
+};
+export type Theme = {
+    colors: ThemeColors;
+    space: ThemeSpace;
+    radius: ThemeRadius;
+    typography: ThemeTypography;
+};
+export type PartialTheme = {
+    colors?: Partial<ThemeColors>;
+    space?: Partial<ThemeSpace>;
+    radius?: Partial<ThemeRadius>;
+    typography?: Partial<ThemeTypography>;
+};
+export type ThemeContextValue = {
+    theme: Theme;
+    setTheme: (nextTheme: Theme) => void;
+};
+export type ThemeProviderProps = {
+    theme?: Theme;
+    defaultTheme?: Theme;
+    onThemeChange?: (nextTheme: Theme) => void;
+    children?: React.ReactNode;
+};

package/out/theme/types.luau

@@ -0,0 +1,2 @@
+-- Compiled with roblox-ts v3.0.0
+return nil

package/package.json

@@ -0,0 +1,23 @@
+{
+  "name": "@lattice-ui/style",
+  "version": "0.1.1",
+  "private": false,
+  "main": "out/init.luau",
+  "types": "out/index.d.ts",
+  "dependencies": {
+    "@lattice-ui/core": "0.1.1"
+  },
+  "devDependencies": {
+    "@rbxts/react": "17.3.7-ts.1",
+    "@rbxts/react-roblox": "17.3.7-ts.1"
+  },
+  "peerDependencies": {
+    "@rbxts/react": "^17",
+    "@rbxts/react-roblox": "^17"
+  },
+  "scripts": {
+    "build": "rbxtsc -p tsconfig.json",
+    "watch": "rbxtsc -p tsconfig.json -w",
+    "typecheck": "tsc -p tsconfig.typecheck.json"
+  }
+}

package/src/index.ts

@@ -0,0 +1,20 @@
+export { Box } from "./primitives/Box";
+export { Text } from "./primitives/Text";
+export type { RecipeConfig, RecipeSelection, RecipeVariants } from "./recipe/createRecipe";
+export { createRecipe } from "./recipe/createRecipe";
+export { mergeGuiProps } from "./sx/mergeGuiProps";
+export type { Sx } from "./sx/sx";
+export { mergeSx, resolveSx } from "./sx/sx";
+export { ThemeProvider, useTheme, useThemeValue } from "./theme/ThemeProvider";
+export { createTheme, defaultDarkTheme, defaultLightTheme } from "./theme/tokens";
+export type {
+  PartialTheme,
+  Theme,
+  ThemeColors,
+  ThemeContextValue,
+  ThemeProviderProps,
+  ThemeRadius,
+  ThemeSpace,
+  ThemeTypography,
+  ThemeTypographyStyle,
+} from "./theme/types";

package/src/primitives/Box.tsx

@@ -0,0 +1,44 @@
+import { React, Slot } from "@lattice-ui/core";
+import { mergeGuiProps } from "../sx/mergeGuiProps";
+import type { Sx } from "../sx/sx";
+import { resolveSx } from "../sx/sx";
+import { useTheme } from "../theme/ThemeProvider";
+
+type StyleProps = React.Attributes & Record<string, unknown>;
+
+export type BoxProps = {
+  asChild?: boolean;
+  sx?: Sx<StyleProps>;
+  children?: React.ReactNode;
+} & StyleProps;
+
+export function Box(props: BoxProps) {
+  const asChild = props.asChild;
+  const sx = props.sx;
+  const children = props.children;
+  const restProps: StyleProps = {};
+  for (const [rawKey, value] of pairs(props as Record<string, unknown>)) {
+    if (!typeIs(rawKey, "string")) {
+      continue;
+    }
+
+    if (rawKey === "asChild" || rawKey === "sx" || rawKey === "children") {
+      continue;
+    }
+
+    restProps[rawKey] = value;
+  }
+
+  const { theme } = useTheme();
+  const mergedProps = mergeGuiProps(restProps, resolveSx(sx, theme));
+
+  if (asChild) {
+    if (!React.isValidElement(children)) {
+      error("[Box] `asChild` requires a single child element.");
+    }
+
+    return <Slot {...mergedProps}>{children}</Slot>;
+  }
+
+  return React.createElement("frame", mergedProps as never, children);
+}

package/src/primitives/Text.tsx

@@ -0,0 +1,44 @@
+import { React, Slot } from "@lattice-ui/core";
+import { mergeGuiProps } from "../sx/mergeGuiProps";
+import type { Sx } from "../sx/sx";
+import { resolveSx } from "../sx/sx";
+import { useTheme } from "../theme/ThemeProvider";
+
+type StyleProps = React.Attributes & Record<string, unknown>;
+
+export type TextProps = {
+  asChild?: boolean;
+  sx?: Sx<StyleProps>;
+  children?: React.ReactNode;
+} & StyleProps;
+
+export function Text(props: TextProps) {
+  const asChild = props.asChild;
+  const sx = props.sx;
+  const children = props.children;
+  const restProps: StyleProps = {};
+  for (const [rawKey, value] of pairs(props as Record<string, unknown>)) {
+    if (!typeIs(rawKey, "string")) {
+      continue;
+    }
+
+    if (rawKey === "asChild" || rawKey === "sx" || rawKey === "children") {
+      continue;
+    }
+
+    restProps[rawKey] = value;
+  }
+
+  const { theme } = useTheme();
+  const mergedProps = mergeGuiProps(restProps, resolveSx(sx, theme));
+
+  if (asChild) {
+    if (!React.isValidElement(children)) {
+      error("[Text] `asChild` requires a single child element.");
+    }
+
+    return <Slot {...mergedProps}>{children}</Slot>;
+  }
+
+  return React.createElement("textlabel", mergedProps as never, children);
+}

package/src/recipe/createRecipe.ts

@@ -0,0 +1,85 @@
+import { mergeGuiProps } from "../sx/mergeGuiProps";
+import type { Sx } from "../sx/sx";
+import { resolveSx } from "../sx/sx";
+import type { Theme } from "../theme/types";
+
+type GuiPropRecord = Record<string, unknown>;
+
+export type RecipeVariants<Props extends GuiPropRecord> = Record<string, Record<string, Sx<Props>>>;
+export type RecipeSelection<Variants extends RecipeVariants<GuiPropRecord>> = Partial<
+  Record<keyof Variants & string, string>
+>;
+
+export type RecipeConfig<Props extends GuiPropRecord, Variants extends RecipeVariants<Props>> = {
+  base?: Sx<Props>;
+  variants?: Variants;
+  defaultVariants?: RecipeSelection<Variants>;
+  compoundVariants?: Array<{
+    variants: RecipeSelection<Variants>;
+    sx: Sx<Props>;
+  }>;
+};
+
+function isCompoundMatch<Variants extends RecipeVariants<GuiPropRecord>>(
+  candidate: RecipeSelection<Variants>,
+  resolvedSelection: RecipeSelection<Variants>,
+) {
+  const candidateRecord = candidate as Record<string, string | undefined>;
+  const resolvedRecord = resolvedSelection as Record<string, string | undefined>;
+
+  for (const [rawVariantName, rawExpectedValue] of pairs(candidateRecord)) {
+    if (!typeIs(rawVariantName, "string") || !typeIs(rawExpectedValue, "string")) {
+      continue;
+    }
+
+    const actualValue = resolvedRecord[rawVariantName];
+    if (actualValue !== rawExpectedValue) {
+      return false;
+    }
+  }
+
+  return true;
+}
+
+export function createRecipe<Props extends GuiPropRecord, Variants extends RecipeVariants<Props>>(
+  config: RecipeConfig<Props, Variants>,
+) {
+  return (selection: RecipeSelection<Variants> | undefined, theme: Theme): Partial<Props> => {
+    const resolvedSelection = {
+      ...(config.defaultVariants ?? {}),
+      ...(selection ?? {}),
+    } as RecipeSelection<Variants>;
+
+    let merged = resolveSx(config.base, theme);
+
+    const variants = config.variants;
+    if (variants) {
+      const variantsRecord = variants as Record<string, Record<string, Sx<Props>>>;
+      const resolvedRecord = resolvedSelection as Record<string, string | undefined>;
+
+      for (const [rawVariantName, rawVariantMap] of pairs(variantsRecord)) {
+        if (!typeIs(rawVariantName, "string") || !typeIs(rawVariantMap, "table")) {
+          continue;
+        }
+
+        const selectedValue = resolvedRecord[rawVariantName];
+        if (selectedValue === undefined) {
+          continue;
+        }
+
+        const sx = rawVariantMap[selectedValue];
+        merged = mergeGuiProps(merged, resolveSx(sx, theme));
+      }
+    }
+
+    for (const compound of config.compoundVariants ?? []) {
+      if (!isCompoundMatch(compound.variants, resolvedSelection)) {
+        continue;
+      }
+
+      merged = mergeGuiProps(merged, resolveSx(compound.sx, theme));
+    }
+
+    return merged;
+  };
+}

package/src/sx/mergeGuiProps.ts

@@ -0,0 +1,87 @@
+type GuiHandler = (...args: unknown[]) => void;
+type GuiHandlerTable = Partial<Record<string, GuiHandler>>;
+type GuiPropRecord = Record<string, unknown>;
+
+function isRecord(value: unknown): value is GuiPropRecord {
+  return typeIs(value, "table");
+}
+
+function isFn(value: unknown): value is GuiHandler {
+  return typeIs(value, "function");
+}
+
+function toHandlerTable(value: unknown): GuiHandlerTable | undefined {
+  if (!isRecord(value)) {
+    return undefined;
+  }
+
+  const out: GuiHandlerTable = {};
+  for (const [rawKey, candidate] of pairs(value)) {
+    if (!typeIs(rawKey, "string") || !isFn(candidate)) {
+      continue;
+    }
+
+    out[rawKey] = candidate;
+  }
+
+  return next(out)[0] !== undefined ? out : undefined;
+}
+
+function mergeHandlerTables(tables: Array<GuiHandlerTable | undefined>): GuiHandlerTable | undefined {
+  const out: GuiHandlerTable = {};
+
+  for (const handlerTable of tables) {
+    if (!handlerTable) {
+      continue;
+    }
+
+    for (const [rawKey, candidate] of pairs(handlerTable)) {
+      if (!typeIs(rawKey, "string") || !isFn(candidate)) {
+        continue;
+      }
+
+      const previous = out[rawKey];
+      out[rawKey] =
+        previous !== undefined
+          ? (...args: unknown[]) => {
+              previous(...args);
+              candidate(...args);
+            }
+          : candidate;
+    }
+  }
+
+  return next(out)[0] !== undefined ? out : undefined;
+}
+
+export function mergeGuiProps<Props extends GuiPropRecord>(
+  base?: Partial<Props>,
+  variant?: Partial<Props>,
+  user?: Partial<Props>,
+): Partial<Props> {
+  const merged = {
+    ...(base ?? {}),
+    ...(variant ?? {}),
+    ...(user ?? {}),
+  } as Partial<Props>;
+
+  const mergedEvent = mergeHandlerTables([
+    toHandlerTable(base?.Event),
+    toHandlerTable(variant?.Event),
+    toHandlerTable(user?.Event),
+  ]);
+  if (mergedEvent) {
+    (merged as GuiPropRecord).Event = mergedEvent;
+  }
+
+  const mergedChange = mergeHandlerTables([
+    toHandlerTable(base?.Change),
+    toHandlerTable(variant?.Change),
+    toHandlerTable(user?.Change),
+  ]);
+  if (mergedChange) {
+    (merged as GuiPropRecord).Change = mergedChange;
+  }
+
+  return merged;
+}

package/src/sx/sx.ts

@@ -0,0 +1,35 @@
+import type { Theme } from "../theme/types";
+import { mergeGuiProps } from "./mergeGuiProps";
+
+type GuiPropRecord = Record<string, unknown>;
+
+export type Sx<Props extends GuiPropRecord> = Partial<Props> | ((theme: Theme) => Partial<Props>) | undefined;
+
+function isSxResolver<Props extends GuiPropRecord>(sx: Sx<Props>): sx is (theme: Theme) => Partial<Props> {
+  return typeIs(sx, "function");
+}
+
+export function resolveSx<Props extends GuiPropRecord>(sx: Sx<Props>, theme: Theme): Partial<Props> {
+  if (!sx) {
+    return {};
+  }
+
+  if (isSxResolver(sx)) {
+    return sx(theme);
+  }
+
+  return sx;
+}
+
+export function mergeSx<Props extends GuiPropRecord>(...sxList: Array<Sx<Props>>): Sx<Props> {
+  return (theme) => {
+    let merged: Partial<Props> = {};
+
+    for (const sx of sxList) {
+      const resolved = resolveSx(sx, theme);
+      merged = mergeGuiProps(merged, resolved);
+    }
+
+    return merged;
+  };
+}

package/src/theme/ThemeProvider.tsx

@@ -0,0 +1,41 @@
+import { createStrictContext, React } from "@lattice-ui/core";
+import { defaultLightTheme } from "./tokens";
+import type { Theme, ThemeContextValue, ThemeProviderProps } from "./types";
+
+const [ThemeContextProvider, useThemeContext] = createStrictContext<ThemeContextValue>("ThemeProvider");
+
+export function ThemeProvider(props: ThemeProviderProps) {
+  const [internalTheme, setInternalTheme] = React.useState(props.defaultTheme ?? defaultLightTheme);
+  const controlled = props.theme !== undefined;
+  const resolvedTheme = props.theme ?? internalTheme;
+
+  const setTheme = React.useCallback(
+    (nextTheme: Theme) => {
+      if (!controlled) {
+        setInternalTheme(nextTheme);
+      }
+
+      props.onThemeChange?.(nextTheme);
+    },
+    [controlled, props.onThemeChange],
+  );
+
+  const contextValue = React.useMemo(
+    () => ({
+      theme: resolvedTheme,
+      setTheme,
+    }),
+    [resolvedTheme, setTheme],
+  );
+
+  return <ThemeContextProvider value={contextValue}>{props.children}</ThemeContextProvider>;
+}
+
+export function useTheme() {
+  return useThemeContext();
+}
+
+export function useThemeValue<T>(selector: (theme: Theme) => T): T {
+  const context = useThemeContext();
+  return React.useMemo(() => selector(context.theme), [context.theme, selector]);
+}

package/src/theme/tokens.ts

@@ -0,0 +1,112 @@
+import type { PartialTheme, Theme } from "./types";
+
+const defaultSpace = {
+  0: 0,
+  2: 2,
+  4: 4,
+  6: 6,
+  8: 8,
+  10: 10,
+  12: 12,
+  14: 14,
+  16: 16,
+  20: 20,
+  24: 24,
+  32: 32,
+};
+
+const defaultRadius = {
+  none: 0,
+  sm: 4,
+  md: 8,
+  lg: 12,
+  xl: 16,
+  full: 999,
+};
+
+const defaultTypography = {
+  labelSm: {
+    font: Enum.Font.Gotham,
+    textSize: 14,
+  },
+  bodyMd: {
+    font: Enum.Font.Gotham,
+    textSize: 16,
+  },
+  titleMd: {
+    font: Enum.Font.GothamBold,
+    textSize: 22,
+  },
+};
+
+export const defaultLightTheme: Theme = {
+  colors: {
+    background: Color3.fromRGB(246, 249, 252),
+    surface: Color3.fromRGB(233, 239, 246),
+    surfaceElevated: Color3.fromRGB(255, 255, 255),
+    border: Color3.fromRGB(193, 202, 214),
+    textPrimary: Color3.fromRGB(27, 33, 44),
+    textSecondary: Color3.fromRGB(79, 90, 107),
+    accent: Color3.fromRGB(46, 114, 216),
+    accentContrast: Color3.fromRGB(239, 245, 252),
+    danger: Color3.fromRGB(167, 56, 64),
+    dangerContrast: Color3.fromRGB(254, 236, 238),
+    overlay: Color3.fromRGB(12, 16, 23),
+  },
+  space: defaultSpace,
+  radius: defaultRadius,
+  typography: defaultTypography,
+};
+
+export const defaultDarkTheme: Theme = {
+  colors: {
+    background: Color3.fromRGB(18, 21, 26),
+    surface: Color3.fromRGB(32, 37, 46),
+    surfaceElevated: Color3.fromRGB(40, 47, 60),
+    border: Color3.fromRGB(72, 80, 98),
+    textPrimary: Color3.fromRGB(233, 239, 246),
+    textSecondary: Color3.fromRGB(176, 186, 201),
+    accent: Color3.fromRGB(43, 105, 196),
+    accentContrast: Color3.fromRGB(240, 244, 250),
+    danger: Color3.fromRGB(129, 57, 63),
+    dangerContrast: Color3.fromRGB(245, 223, 226),
+    overlay: Color3.fromRGB(8, 10, 14),
+  },
+  space: defaultSpace,
+  radius: defaultRadius,
+  typography: defaultTypography,
+};
+
+function mergeTheme(baseTheme: Theme, partialTheme?: PartialTheme): Theme {
+  if (!partialTheme) {
+    return {
+      colors: { ...baseTheme.colors },
+      space: { ...baseTheme.space },
+      radius: { ...baseTheme.radius },
+      typography: { ...baseTheme.typography },
+    };
+  }
+
+  return {
+    colors: {
+      ...baseTheme.colors,
+      ...(partialTheme.colors ?? {}),
+    },
+    space: {
+      ...baseTheme.space,
+      ...(partialTheme.space ?? {}),
+    },
+    radius: {
+      ...baseTheme.radius,
+      ...(partialTheme.radius ?? {}),
+    },
+    typography: {
+      ...baseTheme.typography,
+      ...(partialTheme.typography ?? {}),
+    },
+  };
+}
+
+export function createTheme(partialTheme?: PartialTheme) {
+  return mergeTheme(defaultLightTheme, partialTheme);
+}

package/src/theme/types.ts

@@ -0,0 +1,76 @@
+import type React from "@rbxts/react";
+
+export type ThemeColors = {
+  background: Color3;
+  surface: Color3;
+  surfaceElevated: Color3;
+  border: Color3;
+  textPrimary: Color3;
+  textSecondary: Color3;
+  accent: Color3;
+  accentContrast: Color3;
+  danger: Color3;
+  dangerContrast: Color3;
+  overlay: Color3;
+};
+
+export type ThemeSpace = {
+  0: number;
+  2: number;
+  4: number;
+  6: number;
+  8: number;
+  10: number;
+  12: number;
+  14: number;
+  16: number;
+  20: number;
+  24: number;
+  32: number;
+};
+
+export type ThemeRadius = {
+  none: number;
+  sm: number;
+  md: number;
+  lg: number;
+  xl: number;
+  full: number;
+};
+
+export type ThemeTypographyStyle = {
+  font: Enum.Font;
+  textSize: number;
+};
+
+export type ThemeTypography = {
+  labelSm: ThemeTypographyStyle;
+  bodyMd: ThemeTypographyStyle;
+  titleMd: ThemeTypographyStyle;
+};
+
+export type Theme = {
+  colors: ThemeColors;
+  space: ThemeSpace;
+  radius: ThemeRadius;
+  typography: ThemeTypography;
+};
+
+export type PartialTheme = {
+  colors?: Partial<ThemeColors>;
+  space?: Partial<ThemeSpace>;
+  radius?: Partial<ThemeRadius>;
+  typography?: Partial<ThemeTypography>;
+};
+
+export type ThemeContextValue = {
+  theme: Theme;
+  setTheme: (nextTheme: Theme) => void;
+};
+
+export type ThemeProviderProps = {
+  theme?: Theme;
+  defaultTheme?: Theme;
+  onThemeChange?: (nextTheme: Theme) => void;
+  children?: React.ReactNode;
+};

package/tsconfig.json

@@ -0,0 +1,16 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "out",
+    "declaration": true,
+    "typeRoots": [
+      "./node_modules/@rbxts",
+      "../../node_modules/@rbxts",
+      "./node_modules/@lattice-ui",
+      "../../node_modules/@lattice-ui"
+    ],
+    "types": ["types", "compiler-types"]
+  },
+  "include": ["src"]
+}

package/tsconfig.typecheck.json

@@ -0,0 +1,25 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "noEmit": true,
+    "baseUrl": "..",
+    "rootDir": "..",
+    "paths": {
+      "@lattice-ui/checkbox": ["checkbox/src/index.ts"],
+      "@lattice-ui/core": ["core/src/index.ts"],
+      "@lattice-ui/dialog": ["dialog/src/index.ts"],
+      "@lattice-ui/focus": ["focus/src/index.ts"],
+      "@lattice-ui/layer": ["layer/src/index.ts"],
+      "@lattice-ui/menu": ["menu/src/index.ts"],
+      "@lattice-ui/popover": ["popover/src/index.ts"],
+      "@lattice-ui/popper": ["popper/src/index.ts"],
+      "@lattice-ui/radio-group": ["radio-group/src/index.ts"],
+      "@lattice-ui/style": ["style/src/index.ts"],
+      "@lattice-ui/switch": ["switch/src/index.ts"],
+      "@lattice-ui/system": ["system/src/index.ts"],
+      "@lattice-ui/tabs": ["tabs/src/index.ts"],
+      "@lattice-ui/toggle-group": ["toggle-group/src/index.ts"],
+      "@lattice-ui/tooltip": ["tooltip/src/index.ts"]
+    }
+  }
+}