@rbxts/uiblox 0.2.0-alpha.24 → 0.2.0-alpha.26

package/out/hooks/index.d.ts

@@ -1,4 +1,5 @@
 export { breakpointName, orientationName, resolveResponsive } from "./breakpoints";
 export { BreakpointName, OrientationName, Responsive } from "./breakpoints";
 export { useBreakpoints } from "./useBreakpoints";
+export { clearViewportObservers, observeViewport } from "./viewportObserver";
 export { useReducedMotion } from "./useReducedMotion";

package/out/hooks/init.luau

@@ -6,5 +6,8 @@ exports.breakpointName = _breakpoints.breakpointName
 exports.orientationName = _breakpoints.orientationName
 exports.resolveResponsive = _breakpoints.resolveResponsive
 exports.useBreakpoints = TS.import(script, script, "useBreakpoints").useBreakpoints
+local _viewportObserver = TS.import(script, script, "viewportObserver")
+exports.clearViewportObservers = _viewportObserver.clearViewportObservers
+exports.observeViewport = _viewportObserver.observeViewport
 exports.useReducedMotion = TS.import(script, script, "useReducedMotion").useReducedMotion
 return exports

package/out/hooks/useBreakpoints.luau

@@ -6,6 +6,7 @@ local useState = _react.useState
 local _breakpoints = TS.import(script, script.Parent, "breakpoints")
 local breakpointName = _breakpoints.breakpointName
 local orientationName = _breakpoints.orientationName
+local observeViewport = TS.import(script, script.Parent, "viewportObserver").observeViewport
 local function useBreakpoints(host)
 	local size, setSize = useState({
 		width = 0,
@@ -15,17 +16,7 @@ local function useBreakpoints(host)
 		if host == nil then
 			return nil
 		end
-		local read = function()
-			return setSize({
-				width = host.AbsoluteSize.X,
-				height = host.AbsoluteSize.Y,
-			})
-		end
-		read()
-		local connection = host:GetPropertyChangedSignal("AbsoluteSize"):Connect(read)
-		return function()
-			return connection:Disconnect()
-		end
+		return observeViewport(host, setSize)
 	end, { host })
 	return {
 		width = size.width,

package/out/hooks/viewportObserver.d.ts

@@ -0,0 +1,10 @@
+type Size = {
+    width: number;
+    height: number;
+};
+type Listener = (size: Size) => void;
+/** One AbsoluteSize connection per host; shared by all subscribers. */
+export declare function observeViewport(host: GuiObject, listener: Listener): () => void;
+/** Test helper — drop all host observers. */
+export declare function clearViewportObservers(): void;
+export {};

package/out/hooks/viewportObserver.luau

@@ -0,0 +1,75 @@
+-- Compiled with roblox-ts v3.0.0
+local hosts = {}
+--* One AbsoluteSize connection per host; shared by all subscribers. 
+local function observeViewport(host, listener)
+	local _host = host
+	local entry = hosts[_host]
+	if entry == nil then
+		entry = {
+			listeners = {},
+			size = {
+				width = host.AbsoluteSize.X,
+				height = host.AbsoluteSize.Y,
+			},
+		}
+		local _host_1 = host
+		local _entry = entry
+		hosts[_host_1] = _entry
+		local read = function()
+			local _host_2 = host
+			local current = hosts[_host_2]
+			if current == nil then
+				return nil
+			end
+			current.size = {
+				width = host.AbsoluteSize.X,
+				height = host.AbsoluteSize.Y,
+			}
+			for _, cb in current.listeners do
+				cb(current.size)
+			end
+		end
+		read()
+		entry.connection = host:GetPropertyChangedSignal("AbsoluteSize"):Connect(read)
+	end
+	local _listeners = entry.listeners
+	local _listener = listener
+	table.insert(_listeners, _listener)
+	listener(entry.size)
+	return function()
+		local _host_1 = host
+		local current = hosts[_host_1]
+		if current == nil then
+			return nil
+		end
+		local _listeners_1 = current.listeners
+		local _listener_1 = listener
+		local index = (table.find(_listeners_1, _listener_1) or 0) - 1
+		if index >= 0 then
+			table.remove(current.listeners, index + 1)
+		end
+		if #current.listeners == 0 then
+			local _result = current.connection
+			if _result ~= nil then
+				_result:Disconnect()
+			end
+			local _host_2 = host
+			hosts[_host_2] = nil
+		end
+	end
+end
+--* Test helper — drop all host observers. 
+local function clearViewportObservers()
+	for _, entry in hosts do
+		local _result = entry.connection
+		if _result ~= nil then
+			_result:Disconnect()
+		end
+		table.clear(entry.listeners)
+	end
+	table.clear(hosts)
+end
+return {
+	observeViewport = observeViewport,
+	clearViewportObservers = clearViewportObservers,
+}

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

@@ -21,6 +21,21 @@ interface Theme {
             styleOverrides?: {
                 [slot: string]: object;
             };
+            variants?: {
+                [prop: string]: {
+                    [value: string]: {
+                        [slot: string]: object;
+                    };
+                };
+            };
+            compoundVariants?: Array<{
+                when: {
+                    [prop: string]: unknown;
+                };
+                styles: {
+                    [slot: string]: object;
+                };
+            }>;
         };
     };
 }

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

@@ -4,6 +4,7 @@ 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 applyVariants = TS.import(script, script.Parent, "variants").applyVariants
 local componentStyles = function(name, factory)
 	return makeStyles((function(theme, props)
 		local _spec = theme.components
@@ -17,12 +18,53 @@ local componentStyles = function(name, factory)
 		end
 		local merged = propsWithDefaults(_result, props)
 		local paint = factory
-		local _exp = paint(theme, merged)
+		local slots = paint(theme, merged)
 		local _result_1 = spec
 		if _result_1 ~= nil then
-			_result_1 = _result_1.styleOverrides
+			_result_1 = _result_1.variants
 		end
-		return slotsWithOverrides(_exp, _result_1)
+		local _condition = _result_1 ~= nil
+		if not _condition then
+			local _result_2 = spec
+			if _result_2 ~= nil then
+				_result_2 = _result_2.compoundVariants
+				if _result_2 ~= nil then
+					_result_2 = #_result_2
+				end
+			end
+			local _condition_1 = _result_2
+			if _condition_1 == nil then
+				_condition_1 = 0
+			end
+			_condition = _condition_1 > 0
+		end
+		if _condition then
+			local _exp = slots
+			local _exp_1 = merged
+			local _result_2 = spec
+			if _result_2 ~= nil then
+				_result_2 = _result_2.variants
+			end
+			local _condition_1 = _result_2
+			if _condition_1 == nil then
+				_condition_1 = {}
+			end
+			local _result_3 = spec
+			if _result_3 ~= nil then
+				_result_3 = _result_3.compoundVariants
+			end
+			local _condition_2 = _result_3
+			if _condition_2 == nil then
+				_condition_2 = {}
+			end
+			slots = applyVariants(_exp, _exp_1, _condition_1, _condition_2)
+		end
+		local _exp = slots
+		local _result_2 = spec
+		if _result_2 ~= nil then
+			_result_2 = _result_2.styleOverrides
+		end
+		return slotsWithOverrides(_exp, _result_2)
 	end))
 end
 local default = componentStyles

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

@@ -5,6 +5,21 @@ export interface ComponentSpec {
     styleOverrides?: {
         [slot: string]: object;
     };
+    variants?: {
+        [prop: string]: {
+            [value: string]: {
+                [slot: string]: object;
+            };
+        };
+    };
+    compoundVariants?: Array<{
+        when: {
+            [prop: string]: unknown;
+        };
+        styles: {
+            [slot: string]: object;
+        };
+    }>;
 }
 export declare function propsWithDefaults(defaults: {
     [key: string]: unknown;

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

@@ -4,4 +4,6 @@ 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 { clearStyleCaches, createStyleCache, styleDepsKey } from "./styleCache";
+export { resolveSx, resolvePaletteToken, PaletteToken, ResolvedSx, SxColor, SxInput } from "./resolveSx";
 export { interactionStyle, InteractionSlots, InteractionState, resolveStyle, StyleSelectorKey, StyleState, StyleWithSelectors, } from "./resolveStyle";

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

@@ -9,6 +9,13 @@ 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
+local _styleCache = TS.import(script, script, "styleCache")
+exports.clearStyleCaches = _styleCache.clearStyleCaches
+exports.createStyleCache = _styleCache.createStyleCache
+exports.styleDepsKey = _styleCache.styleDepsKey
+local _resolveSx = TS.import(script, script, "resolveSx")
+exports.resolveSx = _resolveSx.resolveSx
+exports.resolvePaletteToken = _resolveSx.resolvePaletteToken
 local _resolveStyle = TS.import(script, script, "resolveStyle")
 exports.interactionStyle = _resolveStyle.interactionStyle
 exports.resolveStyle = _resolveStyle.resolveStyle

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

@@ -1,23 +1,31 @@
-export type StyleSelectorKey = "_hover" | "_pressed" | "_focus" | "_disabled" | "_selected" | "_checked" | "_first" | "_last";
+export type StyleSelectorKey = "_hover" | "_pressed" | "_focus" | "_focusVisible" | "_disabled" | "_selected" | "_checked" | "_loading" | "_first" | "_last" | "_odd" | "_even";
 export interface StyleState {
     hover?: boolean;
     pressed?: boolean;
     focused?: boolean;
+    focusVisible?: boolean;
     disabled?: boolean;
     selected?: boolean;
     checked?: boolean;
+    loading?: boolean;
     first?: boolean;
     last?: boolean;
+    odd?: boolean;
+    even?: boolean;
 }
 export type StyleWithSelectors<T extends object = object> = T & {
     _hover?: Partial<T>;
     _pressed?: Partial<T>;
     _focus?: Partial<T>;
+    _focusVisible?: Partial<T>;
     _disabled?: Partial<T>;
     _selected?: Partial<T>;
     _checked?: Partial<T>;
+    _loading?: Partial<T>;
     _first?: Partial<T>;
     _last?: Partial<T>;
+    _odd?: Partial<T>;
+    _even?: Partial<T>;
 };
 export interface InteractionSlots<T extends object = object> {
     hover?: T;
@@ -26,7 +34,7 @@ export interface InteractionSlots<T extends object = object> {
     disabled?: T;
 }
 export type InteractionState = Pick<StyleState, "hover" | "pressed" | "focused" | "disabled">;
-/** Peels `_hover` / `_pressed` / `_focus` / … and merges active ones onto the Instance props. */
+/** Peels selector keys and merges active ones onto the Instance props. */
 export declare function resolveStyle<T extends object>(style: StyleWithSelectors<T>, state?: StyleState): T;
 /** Prefer `resolveStyle` with `_hover` keys. Kept for existing call sites. */
 export declare function interactionStyle<T extends object>(base: T, slots: InteractionSlots<T>, state: InteractionState): T;

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

@@ -1,17 +1,21 @@
 -- Compiled with roblox-ts v3.0.0
---* Order matters: later keys win. Structural first, then interaction; `_disabled` last. 
-local SELECTORS = { { "_first", "first" }, { "_last", "last" }, { "_selected", "selected" }, { "_checked", "checked" }, { "_hover", "hover" }, { "_pressed", "pressed" }, { "_focus", "focused" }, { "_disabled", "disabled" } }
+--* Order matters: later keys win. Structural → selection → interaction; `_disabled` last. 
+local SELECTORS = { { "_first", "first" }, { "_last", "last" }, { "_odd", "odd" }, { "_even", "even" }, { "_selected", "selected" }, { "_checked", "checked" }, { "_loading", "loading" }, { "_hover", "hover" }, { "_pressed", "pressed" }, { "_focus", "focused" }, { "_focusVisible", "focusVisible" }, { "_disabled", "disabled" } }
 local SELECTOR_FLAGS = {
 	_hover = true,
 	_pressed = true,
 	_focus = true,
+	_focusVisible = true,
 	_selected = true,
 	_checked = true,
+	_loading = true,
 	_first = true,
 	_last = true,
+	_odd = true,
+	_even = true,
 	_disabled = true,
 }
---* Peels `_hover` / `_pressed` / `_focus` / … and merges active ones onto the Instance props. 
+--* Peels selector keys and merges active ones onto the Instance props. 
 local function resolveStyle(style, state)
 	if state == nil then
 		state = {}

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

@@ -0,0 +1,110 @@
+/** Dot-path into `theme.palette` (typed for common roles). */
+export type PaletteToken = "surface.canvas" | "surface.paper" | "surface.elevated" | "surface.overlay" | "surface.input" | "primary.main" | "primary.on" | "primary.hover" | "primary.pressed" | "accent.main" | "accent.on" | "accent.hover" | "accent.pressed" | "text.primary" | "text.secondary" | "text.disabled" | "text.inverse" | "text.link" | "border" | "divider" | "focus" | "action.hover" | "action.pressed" | "action.selected" | "action.disabled" | "status.success.main" | "status.success.on" | "status.success.surface" | "status.success.border" | "status.warning.main" | "status.warning.on" | "status.warning.surface" | "status.warning.border" | "status.error.main" | "status.error.on" | "status.error.surface" | "status.error.border" | "status.info.main" | "status.info.on" | "status.info.surface" | "status.info.border" | "backdrop" | "shadow";
+export declare function resolvePaletteToken(palette: object, token: PaletteToken | Color3): Color3;
+/** Matches `hooks/breakpoints` thresholds. Kept local so Node style checks need no path aliases. */
+type Responsive<T> = T | {
+    phone?: T;
+    tablet?: T;
+    desktop?: T;
+};
+type PadInput = number | {
+    x?: number;
+    y?: number;
+    top?: number;
+    right?: number;
+    bottom?: number;
+    left?: number;
+};
+interface SxTheme {
+    spacing: {
+        calc: (multiple: number) => number;
+    };
+    palette: object;
+    typography: {
+        fontFamilies: {
+            [family: string]: Enum.Font;
+        };
+        variants: {
+            [name: string]: {
+                size: number;
+                family: string;
+            };
+        };
+    };
+}
+export type SxColor = PaletteToken | Color3;
+/** CSS-like shorthands + pass-through Instance props. No CSS string parser. */
+export type SxInput = {
+    width?: Responsive<number | UDim | UDim2>;
+    height?: Responsive<number | UDim | UDim2>;
+    w?: Responsive<number | UDim | UDim2>;
+    h?: Responsive<number | UDim | UDim2>;
+    size?: Responsive<UDim2 | {
+        width?: number | UDim;
+        height?: number | UDim;
+    }>;
+    x?: Responsive<number | UDim>;
+    y?: Responsive<number | UDim>;
+    position?: Responsive<UDim2>;
+    pos?: Responsive<UDim2>;
+    anchor?: Responsive<Vector2 | number | [number, number]>;
+    p?: Responsive<number>;
+    px?: Responsive<number>;
+    py?: Responsive<number>;
+    pt?: Responsive<number>;
+    pr?: Responsive<number>;
+    pb?: Responsive<number>;
+    pl?: Responsive<number>;
+    padding?: Responsive<PadInput>;
+    gap?: Responsive<number>;
+    bgcolor?: Responsive<SxColor>;
+    bg?: Responsive<SxColor>;
+    backgroundColor?: Responsive<SxColor>;
+    color?: Responsive<SxColor>;
+    borderColor?: Responsive<SxColor>;
+    opacity?: Responsive<number>;
+    transparency?: Responsive<number>;
+    border?: Responsive<number>;
+    borderWidth?: Responsive<number>;
+    radius?: Responsive<number>;
+    typography?: Responsive<string>;
+    fontSize?: Responsive<number>;
+    font?: Responsive<Enum.Font | string>;
+    visible?: Responsive<boolean>;
+    zIndex?: Responsive<number>;
+    z?: Responsive<number>;
+    _hover?: SxInput;
+    _pressed?: SxInput;
+    _focus?: SxInput;
+    _focusVisible?: SxInput;
+    _disabled?: SxInput;
+    _selected?: SxInput;
+    _checked?: SxInput;
+    _loading?: SxInput;
+    _first?: SxInput;
+    _last?: SxInput;
+    _odd?: SxInput;
+    _even?: SxInput;
+    [key: string]: unknown;
+};
+export interface ResolvedSx {
+    root: {
+        [key: string]: unknown;
+    };
+    padding?: {
+        PaddingTop: UDim;
+        PaddingRight: UDim;
+        PaddingBottom: UDim;
+        PaddingLeft: UDim;
+    };
+    corner?: {
+        CornerRadius: UDim;
+    };
+    gap?: number;
+}
+/**
+ * Maps sx shorthands / tokens → Instance props (+ UIPadding / UICorner / gap helpers).
+ * Pass-through keys (BackgroundColor3, _hover, …) stay on `root` for `resolveStyle`.
+ */
+export declare function resolveSx(theme: SxTheme, sx?: SxInput, width?: number): ResolvedSx;
+export {};